artem-sedykh · artem-sedykh · Mar 13, 2022 · Mar 7, 2022 · Mar 7, 2022 · Mar 7, 2022
diff --git a/.travis.yml b/.travis.yml
@@ -2,7 +2,7 @@ language: node_js
 os: linux
 dist: bionic
 node_js:
-  - 10.15.0
+  - 16.5.0
 script:
   - npm run lint
   - npm run rollup

diff --git a/README.md b/README.md
@@ -15,6 +15,9 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 
 ![Preview Image](https://user-images.githubusercontent.com/861063/83651482-3171c700-a5c2-11ea-8053-f66472a8d539.png)
 
+## Notice
+v3 is only compatible from version 2022.3 onwards
+
 ## Install
 
 *This card is available in [HACS](https://github.com/custom-components/hacs) (Home Assistant Community Store)*

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mini-humidifier",
-  "version": "v2.5.5",
+  "version": "v3.0.0",
   "description": "humidifier card for Home Assistant Lovelace UI",
   "keywords": [
     "home-assistant",
@@ -17,8 +17,11 @@
   "author": "Artem Sedykh <anavrin72@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1",
+    "@lit-labs/scoped-registry-mixin": "^1.0.0",
+    "@material/mwc-list": "^0.25.3",
+    "@material/mwc-menu": "^0.25.3",
+    "@material/mwc-ripple": "^0.25.3",
+    "lit": "^2.1.2",
     "resize-observer-polyfill": "^1.5.1"
   },
   "devDependencies": {
@@ -37,6 +40,12 @@
     "rollup": "^2.10.5",
     "rollup-plugin-node-resolve": "^3.4.0"
   },
+  "resolutions": {
+    "lit": "^2.1.2",
+    "lit-html": "2.1.2",
+    "lit-element": "3.1.2",
+    "@lit/reactive-element": "1.2.1"
+  },
   "scripts": {
     "build": "npm run lint && npm run rollup && npm run babel",
     "rollup": "rollup -c",

diff --git a/rollup-plugins/ignore.js b/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;
+    },
+  };
+}
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,5 +1,6 @@
 import resolve from 'rollup-plugin-node-resolve';
 import json from '@rollup/plugin-json';
+import ignore from './rollup-plugins/ignore';
 
 const path = require('path');
 
@@ -23,5 +24,13 @@ export default {
   plugins: [
     resolve(),
     json(),
+    ignore({
+      files: [
+        '@material/mwc-menu/mwc-menu-surface.js',
+        '@material/mwc-ripple/mwc-ripple.js',
+        '@material/mwc-list/mwc-list.js',
+        '@material/mwc-list/mwc-list-item.js',
+      ].map(file => require.resolve(file)),
+    }),
   ],
 };
diff --git a/src/components/button.js b/src/components/button.js
@@ -1,8 +1,20 @@
-import { LitElement, html, css } from 'lit-element';
-import { styleMap } from 'lit-html/directives/style-map';
+import { LitElement, html, css } from 'lit';
+import { styleMap } from 'lit/directives/style-map';
+import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
 import sharedStyle from '../sharedStyle';
+import buildElementDefinitions from '../utils/buildElementDefinitions';
+import globalElementLoader from '../utils/globalElementLoader';
+
+export default class HumidifierButton extends ScopedRegistryHost(LitElement) {
+  static get defineId() { return 'mh-button'; }
+
+  static get elementDefinitions() {
+    return buildElementDefinitions([
+      globalElementLoader('ha-icon'),
+      globalElementLoader('ha-icon-button'),
+    ], HumidifierButton);
+  }
 
-class HumidifierButton extends LitElement {
   constructor() {
     super();
     this._isOn = false;
@@ -33,11 +45,11 @@ class HumidifierButton extends LitElement {
 
       if (changed === false) {
         this._isOn = this.button.isOn;
-        return this.requestUpdate('_isOn');
+        this.requestUpdate('_isOn');
       }
     }, this.button.actionTimeout);
 
-    return this.requestUpdate('_isOn');
+    this.requestUpdate('_isOn');
   }
 
   render() {
@@ -60,7 +72,7 @@ class HumidifierButton extends LitElement {
 
       clearTimeout(this.timer);
 
-      return this.requestUpdate('_isOn');
+      this.requestUpdate('_isOn');
     }
   }
 
@@ -74,7 +86,6 @@ class HumidifierButton extends LitElement {
         margin: 0;
         overflow: hidden;
         transition: background .5s;
-        --paper-item-min-height: var(--mh-unit);
         --mh-dropdown-unit: var(--mh-unit);
       }
       :host([color]) {
@@ -89,5 +100,3 @@ class HumidifierButton extends LitElement {
     `];
   }
 }
-
-customElements.define('mh-button', HumidifierButton);
diff --git a/src/components/buttons.js b/src/components/buttons.js
@@ -1,9 +1,17 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
+import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
 import sharedStyle from '../sharedStyle';
-import './dropdown';
-import './button';
+import HumidifierButton from './button';
+import HumidifierDropDown from './dropdown';
+import buildElementDefinitions from '../utils/buildElementDefinitions';
+
+export default class HumidifierButtons extends ScopedRegistryHost(LitElement) {
+  static get defineId() { return 'mh-buttons'; }
+
+  static get elementDefinitions() {
+    return buildElementDefinitions([HumidifierDropDown, HumidifierButton], HumidifierButtons);
+  }
 
-class HumidifierButtons extends LitElement {
   static get properties() {
     return {
       buttons: {},
@@ -55,7 +63,6 @@ class HumidifierButtons extends LitElement {
         margin: 0;
         overflow: hidden;
         transition: background .5s;
-        --paper-item-min-height: var(--mh-unit);
         --mh-dropdown-unit: var(--mh-unit);
       }
       :host([color]) {
@@ -70,5 +77,3 @@ class HumidifierButtons extends LitElement {
     `];
   }
 }
-
-customElements.define('mh-buttons', HumidifierButtons);
diff --git a/src/components/dropdown-base.js b/src/components/dropdown-base.js
@@ -1,8 +1,23 @@
-import { LitElement, html, css } from 'lit-element';
-
+import { LitElement, html, css } from 'lit';
+import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
 import sharedStyle from '../sharedStyle';
+import HumidifierMenu from './mwc/menu';
+import HumidifierListItem from './mwc/list-item';
+import buildElementDefinitions from '../utils/buildElementDefinitions';
+import globalElementLoader from '../utils/globalElementLoader';
+
+export default class HumidifierDropdownBase extends ScopedRegistryHost(LitElement) {
+  static get defineId() { return 'mh-dropdown-base'; }
+
+  static get elementDefinitions() {
+    return buildElementDefinitions([
+      globalElementLoader('ha-icon'),
+      globalElementLoader('ha-icon-button'),
+      HumidifierMenu,
+      HumidifierListItem,
+    ], HumidifierDropdownBase);
+  }
 
-class HumidifierDropdownBase extends LitElement {
   static get properties() {
     return {
       items: [],
@@ -20,38 +35,43 @@ class HumidifierDropdownBase extends LitElement {
   }
 
   onChange(e) {
-    const id = e.target.selected;
-    if (id !== this.selectedId && this.items[id]) {
+    const { index } = e.detail;
+    if (index !== this.selectedId && this.items[index]) {
       this.dispatchEvent(new CustomEvent('change', {
-        detail: this.items[id],
+        detail: this.items[index],
       }));
-      e.target.selected = -1;
+      e.detail.index = -1;
     }
   }
 
+  handleClick() {
+    const menu = this.shadowRoot.querySelector('#menu');
+    menu.anchor = this.shadowRoot.querySelector('#button');
+    menu.show();
+  }
+
   render() {
     return html`
-      <paper-menu-button
-        class='mh-dropdown'
-        noink no-animations
-        .horizontalAlign=${'right'}
-        .verticalAlign=${'top'}
-        .verticalOffset=${44}
-        .dynamicAlign=${true}
-        ?disabled=${this.disabled}
-        @click=${e => e.stopPropagation()}>
-        <ha-icon-button class='mh-dropdown__button icon' slot='dropdown-trigger'
-          ?disabled=${this.disabled}
-          ?color=${this.active}>
-          <ha-icon icon="${this.icon}"></ha-icon>
+      <div class='mh-dropdown'>
+        <ha-icon-button class='mh-dropdown__button icon'
+                        id=${'button'}
+                        @click=${this.handleClick}
+                        ?disabled=${this.disabled}
+                        ?color=${this.active}>
+          <ha-icon .icon=${this.icon}></ha-icon>
         </ha-icon-button>
-        <paper-listbox slot="dropdown-content" .selected=${this.selectedId} @iron-select=${this.onChange}>
+        <mwc-menu fixed
+                  id=${'menu'}
+                  ?quick=${true}
+                  .menuCorner=${'END'}
+                  .corner=${'TOP_RIGHT'}
+                  @selected=${this.onChange}>
           ${this.items.map(item => html`
-            <paper-item value=${item.id || item.name}>
+            <mwc-list-item value=${item.id || item.name} ?selected=${this.selected === item.id}>
               <span class='mh-dropdown__item__label'>${item.name}</span>
-            </paper-item>`)}
-        </paper-listbox>
-      </paper-menu-button>
+            </mwc-list-item>`)}
+        </mwc-menu>
+      </div>
     `;
   }
 
@@ -62,9 +82,8 @@ class HumidifierDropdownBase extends LitElement {
         :host {
           position: relative;
           overflow: hidden;
-          --paper-item-min-height: 40px;
         }
-        paper-menu-button
+        .mh-dropdown
         :host([disabled]) {
           opacity: .25;
           pointer-events: none;
@@ -74,7 +93,6 @@ class HumidifierDropdownBase extends LitElement {
         }
         .mh-dropdown {
           padding: 0;
-          display: block;
         }
         ha-icon-button[disabled] {
           opacity: .25;
@@ -88,19 +106,17 @@ class HumidifierDropdownBase extends LitElement {
           height: calc(var(--mh-dropdown-unit));
           --mdc-icon-button-size: calc(var(--mh-dropdown-unit));
         }
-        paper-item > *:nth-child(2) {
+        mwc-item > *:nth-child(2) {
           margin-left: 4px;
         }
-        paper-menu-button[focused] ha-icon-button {
+        .mh-dropdown[focused] ha-icon-button {
           color: var(--mh-accent-color);
         }
-        paper-menu-button[focused] ha-icon-button[focused] {
+        .mh-dropdown[focused] ha-icon-button[focused] {
           color: var(--mh-text-color);
           transform: rotate(0deg);
         }
       `,
     ];
   }
 }
-
-customElements.define('mh-dropdown-base', HumidifierDropdownBase);
diff --git a/src/components/dropdown.js b/src/components/dropdown.js
@@ -1,9 +1,17 @@
-import { LitElement, html, css } from 'lit-element';
-import { styleMap } from 'lit-html/directives/style-map';
+import { LitElement, html, css } from 'lit';
+import { styleMap } from 'lit/directives/style-map';
+import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
 import sharedStyle from '../sharedStyle';
-import './dropdown-base';
+import HumidifierDropdownBase from './dropdown-base';
+import buildElementDefinitions from '../utils/buildElementDefinitions';
+
+export default class HumidifierDropDown extends ScopedRegistryHost(LitElement) {
+  static get defineId() { return 'mh-dropdown'; }
+
+  static get elementDefinitions() {
+    return buildElementDefinitions([HumidifierDropdownBase], HumidifierDropDown);
+  }
 
-class HumidifierDropDown extends LitElement {
   constructor() {
     super();
     this.dropdown = {};
@@ -33,11 +41,11 @@ class HumidifierDropDown extends LitElement {
         this._state = (this.dropdown.state !== undefined && this.dropdown.state !== null)
           ? this.dropdown.state.toString() : '';
 
-        return this.requestUpdate('_state');
+        this.requestUpdate('_state');
       }
     }, this.dropdown.actionTimeout);
 
-    return this.requestUpdate('_state');
+    this.requestUpdate('_state');
   }
 
   render() {
@@ -63,7 +71,7 @@ class HumidifierDropDown extends LitElement {
 
       clearTimeout(this.timer);
 
-      return this.requestUpdate('_state');
+      this.requestUpdate('_state');
     }
   }
 
@@ -77,7 +85,6 @@ class HumidifierDropDown extends LitElement {
         margin: 0;
         overflow: hidden;
         transition: background .5s;
-        --paper-item-min-height: var(--mh-unit);
         --mh-dropdown-unit: var(--mh-unit);
       }
       :host([color]) {
@@ -92,5 +99,3 @@ class HumidifierDropDown extends LitElement {
     `];
   }
 }
-
-customElements.define('mh-dropdown', HumidifierDropDown);