v5.8.0

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file.
 
+## v5.8.0
+
+- update card editor to MWC
+
 ## v5.7.1
 
 - fixed de/en syntax (thanks to @tispokes)

elements/formfield.js

@@ -0,0 +1,10 @@
+import { FormfieldBase } from '@material/mwc-formfield/mwc-formfield-base.js';
+import { styles as formfieldStyles } from '@material/mwc-formfield/mwc-formfield.css.js';
+
+export const formfieldDefinition = {
+  'mwc-formfield': class extends FormfieldBase {
+    static get styles() {
+      return formfieldStyles;
+    }
+  },
+};

elements/ignore/select.js

@@ -0,0 +1,8 @@
+export const ignoreSelectFiles = [
+  '@material/mwc-ripple/mwc-ripple.js',
+  '@material/mwc-menu/mwc-menu.js',
+  '@material/mwc-menu/mwc-menu-surface.js',
+  '@material/mwc-list/mwc-list.js',
+  '@material/mwc-list/mwc-list-item.js',
+  '@material/mwc-icon/mwc-icon.js',
+];

elements/ignore/switch.js

@@ -0,0 +1 @@
+export const ignoreSwitchFiles = ['@material/mwc-ripple/mwc-ripple.js'];

elements/ignore/textfield.js

@@ -0,0 +1 @@
+export const ignoreTextfieldFiles = ['@material/mwc-notched-outline/mwc-notched-outline.js'];

elements/select.js

@@ -0,0 +1,53 @@
+import { SelectBase } from '@material/mwc-select/mwc-select-base.js';
+import { ListBase } from '@material/mwc-list/mwc-list-base.js';
+import { ListItemBase } from '@material/mwc-list/mwc-list-item-base.js';
+import { MenuBase } from '@material/mwc-menu/mwc-menu-base.js';
+import { MenuSurfaceBase } from '@material/mwc-menu/mwc-menu-surface-base.js';
+import { RippleBase } from '@material/mwc-ripple/mwc-ripple-base.js';
+import { NotchedOutlineBase } from '@material/mwc-notched-outline/mwc-notched-outline-base.js';
+
+import { styles as selectStyles } from '@material/mwc-select/mwc-select.css';
+import { styles as listStyles } from '@material/mwc-list/mwc-list.css';
+import { styles as listItemStyles } from '@material/mwc-list//mwc-list-item.css';
+import { styles as rippleStyles } from '@material/mwc-ripple/mwc-ripple.css';
+import { styles as menuStyles } from '@material/mwc-menu/mwc-menu.css';
+import { styles as menuSurfaceStyles } from '@material/mwc-menu/mwc-menu-surface.css';
+import { styles as notchedOutlineStyles } from '@material/mwc-notched-outline/mwc-notched-outline.css';
+
+export const selectDefinition = {
+  'mwc-select': class extends SelectBase {
+    static get styles() {
+      return selectStyles;
+    }
+  },
+  'mwc-list': class extends ListBase {
+    static get styles() {
+      return listStyles;
+    }
+  },
+  'mwc-list-item': class extends ListItemBase {
+    static get styles() {
+      return listItemStyles;
+    }
+  },
+  'mwc-ripple': class extends RippleBase {
+    static get styles() {
+      return rippleStyles;
+    }
+  },
+  'mwc-menu': class extends MenuBase {
+    static get styles() {
+      return menuStyles;
+    }
+  },
+  'mwc-menu-surface': class extends MenuSurfaceBase {
+    static get styles() {
+      return menuSurfaceStyles;
+    }
+  },
+  'mwc-notched-outline': class extends NotchedOutlineBase {
+    static get styles() {
+      return notchedOutlineStyles;
+    }
+  },
+};

elements/switch.js

@@ -0,0 +1,17 @@
+import { SwitchBase } from '@material/mwc-switch/deprecated/mwc-switch-base.js';
+import { RippleBase } from '@material/mwc-ripple/mwc-ripple-base.js';
+import { styles as switchStyles } from '@material/mwc-switch/deprecated/mwc-switch.css';
+import { styles as rippleStyles } from '@material/mwc-ripple/mwc-ripple.css';
+
+export const switchDefinition = {
+  'mwc-switch': class extends SwitchBase {
+    static get styles() {
+      return switchStyles;
+    }
+  },
+  'mwc-ripple': class extends RippleBase {
+    static get styles() {
+      return rippleStyles;
+    }
+  },
+};

elements/textfield.js

@@ -0,0 +1,18 @@
+import { TextFieldBase } from '@material/mwc-textfield/mwc-textfield-base.js';
+import { NotchedOutlineBase } from '@material/mwc-notched-outline/mwc-notched-outline-base.js';
+
+import { styles as textfieldStyles } from '@material/mwc-textfield/mwc-textfield.css';
+import { styles as notchedOutlineStyles } from '@material/mwc-notched-outline/mwc-notched-outline.css';
+
+export const textfieldDefinition = {
+  'mwc-textfield': class extends TextFieldBase {
+    static get styles() {
+      return textfieldStyles;
+    }
+  },
+  'mwc-notched-outline': class extends NotchedOutlineBase {
+    static get styles() {
+      return notchedOutlineStyles;
+    }
+  },
+};

package.json

@@ -16,35 +16,46 @@
   "author": "Dckiller <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "@material/mwc-ripple": "^0.21.0",
-    "@polymer/paper-button": "^3.0.1",
-    "@polymer/paper-icon-button": "^3.0.2",
-    "custom-card-helpers": "^1.7.1",
-    "home-assistant-js-websocket": "^5.10.0",
-    "lit": "^2.0.0-rc.2"
+    "@lit-labs/scoped-registry-mixin": "^1.0.0",
+    "@material/mwc-formfield": "^0.25.3",
+    "@material/mwc-list": "^0.25.3",
+    "@material/mwc-menu": "^0.25.3",
+    "@material/mwc-notched-outline": "^0.25.3",
+    "@material/mwc-ripple": "^0.25.3",
+    "@material/mwc-select": "^0.25.3",
+    "@material/mwc-switch": "^0.25.3",
+    "@material/mwc-textfield": "^0.25.3",
+    "custom-card-helpers": "^1.7.2",
+    "home-assistant-js-websocket": "^5.11.1",
+    "lit": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
+    "@babel/core": "^7.15.0",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-proposal-decorators": "^7.14.5",
     "@rollup/plugin-json": "^4.1.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.0",
-    "@typescript-eslint/parser": "^4.28.0",
-    "eslint": "^7.29.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-prettier": "^3.4.0",
-    "prettier": "^2.3.2",
-    "rollup": "^2.52.3",
+    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "prettier": "^2.4.1",
+    "rollup": "^2.58.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "rollup-plugin-uglify": "^5.0.2",
-    "typescript": "^4.3.4"
+    "typescript": "^4.4.3"
+  },
+  "resolutions": {
+    "lit": "^2.1.2",
+    "lit-html": "2.1.2",
+    "lit-element": "3.1.2",
+    "@lit/reactive-element": "1.2.1"
   },
   "scripts": {
     "start": "rollup -c rollup.config.dev.js --watch",

rollup-plugins/ignore.js

@@ -0,0 +1,24 @@
+export default function (userOptions = {}) {
+  // Files need to be absolute paths.
+  // This only works if the file has no exports
+  // and only is imported for its side effects
+  const files = userOptions.files || [];
+
+  if (files.length === 0) {
+    return {
+      name: 'ignore',
+    };
+  }
+
+  return {
+    name: 'ignore',
+
+    load(id) {
+      return files.some((toIgnorePath) => id.startsWith(toIgnorePath))
+        ? {
+            code: '',
+          }
+        : null;
+    },
+  };
+}

rollup.config.dev.js

@@ -1,32 +1,39 @@
-import resolve from "rollup-plugin-node-resolve";
-import typescript from "rollup-plugin-typescript2";
-import babel from "rollup-plugin-babel";
-import serve from "rollup-plugin-serve";
-import { terser } from "rollup-plugin-terser";
+import resolve from 'rollup-plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import babel from 'rollup-plugin-babel';
+import serve from 'rollup-plugin-serve';
+import { terser } from 'rollup-plugin-terser';
 import json from '@rollup/plugin-json';
+import ignore from './rollup-plugins/ignore.js';
+import { ignoreTextfieldFiles } from './elements/ignore/textfield.js';
+import { ignoreSelectFiles } from './elements/ignore/select.js';
+import { ignoreSwitchFiles } from './elements/ignore/switch.js';
 
 export default {
-  input: ["src/body-miscale-card.ts"],
+  input: ['src/body-miscale-card.ts'],
   output: {
-    dir: "./dist",
-    format: "es",
+    dir: './dist',
+    format: 'es',
   },
   plugins: [
     resolve(),
     typescript(),
     json(),
     babel({
-      exclude: "node_modules/**",
+      exclude: 'node_modules/**',
     }),
     terser(),
     serve({
-      contentBase: "./dist",
-      host: "0.0.0.0",
+      contentBase: './dist',
+      host: '0.0.0.0',
       port: 5000,
       allowCrossOrigin: true,
       headers: {
-        "Access-Control-Allow-Origin": "*",
+        'Access-Control-Allow-Origin': '*',
       },
     }),
+    ignore({
+      files: [...ignoreTextfieldFiles, ...ignoreSelectFiles, ...ignoreSwitchFiles].map((file) => require.resolve(file)),
+    }),
   ],
 };

rollup.config.js

@@ -5,6 +5,10 @@ import babel from 'rollup-plugin-babel';
 import { terser } from 'rollup-plugin-terser';
 import serve from 'rollup-plugin-serve';
 import json from '@rollup/plugin-json';
+import ignore from './rollup-plugins/ignore.js';
+import { ignoreTextfieldFiles } from './elements/ignore/textfield.js';
+import { ignoreSelectFiles } from './elements/ignore/select.js';
+import { ignoreSwitchFiles } from './elements/ignore/switch.js';
 
 const dev = process.env.ROLLUP_WATCH;
 
@@ -28,6 +32,9 @@ const plugins = [
   }),
   dev && serve(serveopts),
   !dev && terser(),
+  ignore({
+    files: [...ignoreTextfieldFiles, ...ignoreSelectFiles, ...ignoreSwitchFiles].map((file) => require.resolve(file)),
+  }),
 ];
 
 export default [

src/body-miscale-card.ts

@@ -184,7 +184,7 @@ export class BodyMiScaleCard extends LitElement implements LovelaceCard {
     const hasDropdown = `${data.key}_list` in stateObj.attributes;
 
     return hasDropdown && (isValidAttribute || isValidEntityData)
-      ? this.renderDropdown(attribute, data.key)
+      ? this.renderDropdown(attribute, data.key, data.service)
       : attribute;
   }
 
@@ -215,7 +215,7 @@ export class BodyMiScaleCard extends LitElement implements LovelaceCard {
     const hasDropdown = `${data.key}_list` in stateObj.attributes;
 
     return hasDropdown && (isValidAttribute || isValidEntityData)
-      ? this.renderDropdown(attribute, data.key)
+      ? this.renderDropdown(attribute, data.key, data.service)
       : attribute;
   }
 
@@ -414,7 +414,7 @@ export class BodyMiScaleCard extends LitElement implements LovelaceCard {
     const hasDropdown = `${data.key}_list` in stateObj.attributes;
 
     return hasDropdown && (isValidAttribute || isValidEntityData)
-      ? this.renderDropdown(attribute, data.key)
+      ? this.renderDropdown(attribute, data.key, data.service)
       : attribute;
   }
 
@@ -476,37 +476,41 @@ export class BodyMiScaleCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private handleChange(e: any, key: any): void {
+  private handleChange(mode: any, key: any, service: any): void {
     const stateObj = this.hass!.states[this.config!.entity];
-    const mode = e.target.getAttribute('value');
-    this.callService(`bodymiscale.set_${key}`, { entity_id: stateObj.entity_id, [key]: mode });
+    this.callService(service ||`bodymiscale.set_${key}`, { entity_id: stateObj.entity_id, [key]: mode });
   }
 
   private callService(service: any, data = { entity_id: this.stateObj.entity_id }): void {
     const [domain, name] = service.split('.');
     this.hass!.callService(domain, name, data);
   }
 
-  private renderDropdown(attribute: any, key: any) {
+  private renderDropdown(attribute: any, key: any, service: any) {
     if (!this.hass || !this.config) {
       return html``;
     }
     const stateObj = this.hass.states[this.config!.entity];
-    const selected = stateObj.attributes[key];
     const list = stateObj.attributes[`${key}_list`];
 
     return html`
-      <paper-menu-button slot="dropdown-trigger" @click="${(e: any) => e.stopPropagation()}" style="padding: 0">
-        <paper-button slot="dropdown-trigger">${attribute}</paper-button>
-        <paper-listbox
-          slot="dropdown-content"
-          selected="${list.indexOf(selected)}"
-          @click="${(e: any) => this.handleChange(e, key)}"
-        >
-          ${list.map((item: any) => html`<paper-item value="${item}" style="text-shadow: none;">${item}</paper-item>`)}
-        </paper-listbox>
-      </paper-menu-button>
-    `;
+      <div style="position: relative" @click=${e => e.stopPropagation()}>
+        <ha-button @click=${() => this.toggleMenu(key)}>
+          ${attribute}
+        </ha-button>
+        <mwc-menu
+        @selected=${e => this.handleChange(list[e.detail.index], key, service)}
+          id=${`bmc-menu-${key}`}
+          activatable
+          corner="BOTTOM_START">
+            ${list.map(item => html`<mwc-list-item value=${item}>${item}</mwc-list-item>`)}
+        </mwc-menu>
+      </div>`;
+  }
+
+  toggleMenu(key: any) {
+    const menu: any = this.shadowRoot!.querySelector(`#bmc-menu-${key}`);
+    menu.open = !menu.open;
   }
 
   static get styles(): CSSResultGroup {

src/const.ts

@@ -1,6 +1,6 @@
 import { localize } from './localize/localize';
 
-export const CARD_VERSION = '5.7.1';
+export const CARD_VERSION = '5.8.0';
 
 export const states = {
   status: {