HA > 0.110.0 support

artem-sedykh · May 18, 2020 · a540e6f · a540e6f
1 parent 023b5ad
commit a540e6f
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 27 deletions.
diff --git a/.babelrc b/.babelrc
@@ -8,8 +8,7 @@
           "esmodules": true
         }
       }
-    ],
-    ["minify"]
+    ]
   ],
   "comments": false,
   "plugins": [

diff --git a/release_notes/v1.0.7.md b/release_notes/v1.0.7.md
@@ -6,3 +6,6 @@
 
 ### CHANGED
 - `depth:max_value` changed default value from `120` to `125`
+
+### FIXED
+- HA > 0.110.0 support, #14
diff --git a/src/components/controls.js b/src/components/controls.js
@@ -32,11 +32,11 @@ class MiniHumidifierControls extends LitElement {
 
   renderDryButton(context) {
     return html`
-      <paper-icon-button class='dry-button'
+      <ha-icon-button class='dry-button'
         .icon=${context.config.dry_button.icon}
         @click=${e => context.toggleDry(e)}
         ?color=${context.humidifier.isDryOn}>
-      </paper-icon-button>
+      </ha-icon-button>
     `;
   }
 
@@ -61,31 +61,31 @@ class MiniHumidifierControls extends LitElement {
       `;
 
     return html`
-       <paper-icon-button 
+       <ha-icon-button 
           .icon=${context.config.led_button.icon}
           @click=${e => context.toggleLedBrightness(e)}
           ?color=${context.humidifier.isLedBrightnessOn}>
-        </paper-icon-button>
+        </ha-icon-button>
     `;
   }
 
   renderBuzzerButton(context) {
     return html`
-       <paper-icon-button class='buzzer-button'
+       <ha-icon-button class='buzzer-button'
           .icon=${context.config.buzzer_button.icon}
           @click=${e => context.toggleBuzzer(e)}
           ?color=${context.humidifier.isBuzzerOn}>
-        </paper-icon-button>
+        </ha-icon-button>
     `;
   }
 
   renderChildLockButton(context) {
     return html`
-       <paper-icon-button class='child-lock-button'
+       <ha-icon-button class='child-lock-button'
           .icon=${context.config.child_lock_button.icon}
           @click=${e => context.toggleChildLock(e)}
           ?color=${context.humidifier.isChildLockOn}>
-        </paper-icon-button>
+        </ha-icon-button>
     `;
   }
 

diff --git a/src/components/dropdown.js b/src/components/dropdown.js
@@ -40,11 +40,11 @@ class MiniHumidifierDropdown extends LitElement {
         .dynamicAlign=${true}
         ?disabled=${this.disabled}
         @click=${e => e.stopPropagation()}>
-        <paper-icon-button class='mh-dropdown__button icon' slot='dropdown-trigger'
+        <ha-icon-button class='mh-dropdown__button icon' slot='dropdown-trigger'
           .icon=${this.icon}
           ?disabled=${this.disabled}
           ?color=${this.active}>
-        </paper-icon-button>
+        </ha-icon-button>
         <paper-listbox slot="dropdown-content" .selected=${this.selectedId} @iron-select=${this.onChange}>
           ${this.items.map(item => html`
             <paper-item value=${item.id || item.name}>
@@ -75,7 +75,7 @@ class MiniHumidifierDropdown extends LitElement {
           padding: 0;
           display: block;
         }
-        paper-icon-button[disabled] {
+        ha-icon-button[disabled] {
           opacity: .25;
           pointer-events: none;
         }
@@ -86,10 +86,10 @@ class MiniHumidifierDropdown extends LitElement {
         paper-item > *:nth-child(2) {
           margin-left: 4px;
         }
-        paper-menu-button[focused] paper-icon-button {
+        paper-menu-button[focused] ha-icon-button {
           color: var(--mh-accent-color);
         }
-        paper-menu-button[focused] paper-icon-button[focused] {
+        paper-menu-button[focused] ha-icon-button[focused] {
           color: var(--mh-text-color);
           transform: rotate(0deg);
         }

diff --git a/src/components/info.js b/src/components/info.js
@@ -12,7 +12,7 @@ class MiniHumidifierInfo extends LitElement {
   renderDepth(context) {
     return html`
        <div class='state depth'>
-         <iron-icon class='state__value_icon' .icon=${context.config.depth.icon}></iron-icon>
+         <ha-icon class='state__value_icon' .icon=${context.config.depth.icon}></ha-icon>
          <span class='state__value'>${context.humidifier.depth}</span>
          <span class='state__uom'>${context.config.depth.unit}</span>
        </div>
@@ -22,7 +22,7 @@ class MiniHumidifierInfo extends LitElement {
   renderTemperature(context) {
     return html`
        <div class='state temperature'>
-         <iron-icon class='state__value_icon' .icon=${context.config.temperature.icon}></iron-icon>
+         <ha-icon class='state__value_icon' .icon=${context.config.temperature.icon}></ha-icon>
          <span class='state__value'>${context.humidifier.temperature}</span>
          <span class='state__uom'>${context.config.temperature.unit}</span>
        </div>
@@ -32,7 +32,7 @@ class MiniHumidifierInfo extends LitElement {
   renderHumidity(context) {
     return html`
        <div class='state humidity'>
-         <iron-icon class='state__value_icon' .icon=${context.config.humidity.icon}></iron-icon>
+         <ha-icon class='state__value_icon' .icon=${context.config.humidity.icon}></ha-icon>
          <span class='state__value'>${context.humidifier.humidity}</span>
          <span class='state__uom'>${context.config.humidity.unit}</span>
        </div>
@@ -82,6 +82,7 @@ class MiniHumidifierInfo extends LitElement {
         height: calc(var(--mh-unit) * .475);
         width: calc(var(--mh-unit) * .425);
         color: var(--mh-icon-color);
+        --mdc-icon-size: calc(var(--mh-unit) * .425);
      }
      .state__value {
         margin: 0 1px;

diff --git a/src/components/powerstrip.js b/src/components/powerstrip.js
@@ -29,11 +29,11 @@ class MiniHumidifierPowerstrip extends LitElement {
     }
 
     return html`
-        <paper-icon-button class='power-button'
+        <ha-icon-button class='power-button'
           .icon=${this.config.power_button.icon}
           @click=${e => this.humidifier.togglePower(e)}
           ?color=${this.humidifier.isOn}>
-        </paper-icon-button>
+        </ha-icon-button>
     `;
   }
 

diff --git a/src/components/targetHumiditySlider.js b/src/components/targetHumiditySlider.js
@@ -21,7 +21,7 @@ class MiniHumidifierTargetHumiditySlider extends LitElement {
 
     return html`
         <div class="mh-target_humidifier__state">
-           <iron-icon class='state__value_icon' .icon=${this.config.target_humidity.icon}></iron-icon>
+           <ha-icon class='state__value_icon' .icon=${this.config.target_humidity.icon}></ha-icon>
            <span class='state__value ellipsis'>${sliderValue}</span>
            <span class='state__uom ellipsis'>${this.config.target_humidity.unit}</span>
         </div>
@@ -76,6 +76,7 @@ class MiniHumidifierTargetHumiditySlider extends LitElement {
      .state__value_icon {
         height: calc(var(--mh-unit) * .475);
         width: calc(var(--mh-unit) * .425);
+        --mdc-icon-size: calc(var(--mh-unit) * .425);
         color: var(--mh-icon-color);
      }
      .state__value {

diff --git a/src/main.js b/src/main.js
@@ -21,6 +21,13 @@ if (!customElements.get('ha-slider')) {
   );
 }
 
+if (!customElements.get('ha-icon-button')) {
+  customElements.define(
+    'ha-icon-button',
+    class extends customElements.get('paper-icon-button') {},
+  );
+}
+
 class MiniHumidifier extends LitElement {
   constructor() {
     super();
@@ -354,10 +361,10 @@ class MiniHumidifier extends LitElement {
 
     return html`
         <div class='mh-humidifier__toggle'>
-          <paper-icon-button class='toggle-button ${this.toggleButtonCls()}'
+          <ha-icon-button class='toggle-button ${this.toggleButtonCls()}'
           .icon=${this.config.toggle_button.icon}
           @click=${e => this.handleToggle(e)}>
-          </paper-icon-button>
+          </ha-icon-button>
         </div>
     `;
   }
@@ -399,7 +406,7 @@ class MiniHumidifier extends LitElement {
 
     return html`
       <div class='entity__secondary_info'>
-         <iron-icon class='entity__secondary_info_icon' .icon=${this.config.fan_mode_button.icon}></iron-icon>
+         <ha-icon class='entity__secondary_info_icon' .icon=${this.config.fan_mode_button.icon}></ha-icon>
          <span class='entity__secondary_info__name'>${this.secondaryInfoLabel}</span>
       </div>
     `;

diff --git a/src/sharedStyle.js b/src/sharedStyle.js
@@ -13,17 +13,18 @@ const sharedStyle = css`
     width: calc(var(--mh-unit) * .6);
     height: calc(var(--mh-unit) * .6);
   }
-  paper-icon-button {
+  ha-icon-button {
     width: calc(var(--mh-unit));
     height: calc(var(--mh-unit));
+    --mdc-icon-button-size: calc(var(--mh-unit));
     color: var(--mh-button-color);
     transition: color .25s;
   }
-  paper-icon-button[color] {
+  ha-icon-button[color] {
     color: var(--mh-icon-active-color) !important;
     opacity: 1 !important;
   }
-  paper-icon-button[inactive] {
+  ha-icon-button[inactive] {
     opacity: .5;
   }
 `;

diff --git a/src/style.js b/src/style.js
@@ -120,6 +120,7 @@ const style = css`
     width: calc(var(--mh-unit) * .375);
     height: calc(var(--mh-unit) * .375);
     min-width: calc(var(--mh-unit) * .375);
+    --mdc-icon-size: calc(var(--mh-unit) * .375);
   }
   .entity__secondary_info {
     margin-top: -2px;
@@ -160,6 +161,7 @@ const style = css`
   .toggle-button {
     width: calc(var(--mh-unit) * .75);
     height: calc(var(--mh-unit) * .75);
+    --mdc-icon-button-size: calc(var(--mh-unit) * .75);
     padding: 3px;
     color: var(--mh-icon-color);
   }