purifier-card 2.3.0 → 2.4.0

package/src/{purifier-card.js → purifier-card.ts}

@@ -1,17 +1,33 @@
-import { LitElement, html, nothing } from 'lit';
-import { hasConfigOrEntityChanged, fireEvent } from 'custom-card-helpers';
+import { CSSResultGroup, LitElement, PropertyValues, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import {
+  hasConfigOrEntityChanged,
+  fireEvent,
+  HomeAssistant,
+  ServiceCallRequest,
+} from 'custom-card-helpers';
 import registerTemplates from 'ha-template';
+import get from 'lodash/get';
 import localize from './localize';
 import styles from './styles.css';
-import { version } from '../package.json';
 import workingImg from './images/purifier-working.gif';
 import standbyImg from './images/purifier-standby.png';
-import './purifier-card-editor';
+
+import {
+  PurifierCardConfig,
+  PurifierEntity,
+  SliderValue,
+  Template,
+} from './types';
+import buildConfig from './config';
 
 registerTemplates();
 
+// String in the right side will be replaced by Rollup
+const PKG_VERSION = 'PKG_VERSION_VALUE';
+
 console.info(
-  `%c PURIFIER-CARD %c ${version} `,
+  `%c PURIFIER-CARD %c ${PKG_VERSION} `,
   'color: white; background: blue; font-weight: 700;',
   'color: blue; background: white; font-weight: 700;'
 );
@@ -19,112 +35,55 @@ console.info(
 if (!customElements.get('ha-icon-button')) {
   customElements.define(
     'ha-icon-button',
-    class extends customElements.get('paper-icon-button') {}
+    class extends (customElements.get('paper-icon-button') ?? HTMLElement) {}
   );
 }
 
 const SUPPORT_PRESET_MODE = 8;
-class PurifierCard extends LitElement {
-  static get properties() {
-    return {
-      hass: Object,
-      config: Object,
-      requestInProgress: Boolean,
-    };
-  }
+@customElement('purifier-card')
+export class PurifierCard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  static get styles() {
+  @state() private config!: PurifierCardConfig;
+  @state() private requestInProgress = false;
+
+  public static get styles(): CSSResultGroup {
     return styles;
   }
 
-  static async getConfigElement() {
+  public static async getConfigElement() {
+    import('./editor');
     return document.createElement('purifier-card-editor');
   }
 
-  static getStubConfig(hass, entities) {
-    const [purifierEntity] = entities.filter(
-      (eid) => eid.substr(0, eid.indexOf('.')) === 'fan'
-    );
+  public static getStubConfig(
+    _: unknown,
+    entities: string[]
+  ): Partial<PurifierCardConfig> {
+    const [purifierEntity] = entities.filter((eid) => eid.startsWith('fan'));
 
     return {
-      entity: purifierEntity || '',
+      entity: purifierEntity ?? '',
     };
   }
 
-  get platform() {
-    if (this.config.platform === undefined) {
-      return 'xiaomi_miio_airpurifier';
-    }
-
-    return this.config.platform;
-  }
-
-  get entity() {
-    return this.hass.states[this.config.entity];
-  }
-
-  get showPresetMode() {
-    if (this.config.show_preset_mode === undefined) {
-      return true;
-    }
-
-    return this.config.show_preset_mode;
-  }
-
-  get showName() {
-    if (this.config.show_name === undefined) {
-      return true;
-    }
-
-    return this.config.show_name;
+  public setConfig(config: Partial<PurifierCardConfig>) {
+    this.config = buildConfig(config);
   }
 
-  get showState() {
-    if (this.config.show_state === undefined) {
-      return true;
-    }
-
-    return this.config.show_state;
-  }
-
-  get showToolbar() {
-    if (this.config.show_toolbar === undefined) {
-      return true;
-    }
-
-    return this.config.show_toolbar;
-  }
-
-  get compactView() {
-    if (this.config.compact_view === undefined) {
-      return false;
-    }
-
-    return this.config.compact_view;
-  }
-
-  setConfig(config) {
-    if (!config.entity) {
-      throw new Error(localize('error.missing_entity'));
-    }
-
-    const actions = config.actions;
-    if (actions && Array.isArray(actions)) {
-      console.warn(localize('warning.actions_array'));
-    }
-
-    this.config = config;
+  get entity(): PurifierEntity {
+    return this.hass.states[this.config.entity] as PurifierEntity;
   }
 
-  getCardSize() {
+  public getCardSize() {
     return 2;
   }
 
-  shouldUpdate(changedProps) {
-    return hasConfigOrEntityChanged(this, changedProps);
+  protected shouldUpdate(changedProps: PropertyValues) {
+    return hasConfigOrEntityChanged(this, changedProps, false);
   }
 
-  updated(changedProps) {
+  protected updated(changedProps: PropertyValues) {
     if (
       changedProps.get('hass') &&
       changedProps.get('hass').states[this.config.entity] !==
@@ -134,7 +93,7 @@ class PurifierCard extends LitElement {
     }
   }
 
-  handleMore(entityId = this.entity.entity_id) {
+  private handleMore(entityId: string = this.entity.entity_id) {
     fireEvent(
       this,
       'hass-more-info',
@@ -148,36 +107,41 @@ class PurifierCard extends LitElement {
     );
   }
 
-  handlePresetMode(e) {
-    const preset_mode = e.target.getAttribute('value');
-    this.callService('fan.set_preset_mode', { preset_mode });
-  }
-
-  handlePercentage(e) {
-    const percentage = e.detail.value;
-    this.callService('fan.set_percentage', { percentage });
-  }
-
-  callService(service, options = {}, isRequest = true) {
+  private callService(
+    service: ServiceCallRequest['service'],
+    options: ServiceCallRequest['serviceData'] = {},
+    request = true
+  ) {
     const [domain, name] = service.split('.');
     this.hass.callService(domain, name, {
       entity_id: this.config.entity,
       ...options,
     });
 
-    if (isRequest) {
+    if (request) {
       this.requestInProgress = true;
       this.requestUpdate();
     }
   }
 
-  renderPresetMode() {
+  private handlePresetMode(event: PointerEvent) {
+    const preset_mode = (<HTMLDivElement>event.target).getAttribute('value');
+    this.callService('fan.set_preset_mode', { preset_mode });
+  }
+
+  private handlePercentage(event: CustomEvent<SliderValue>) {
+    const percentage = event.detail.value;
+    this.callService('fan.set_percentage', { percentage });
+  }
+
+  private renderPresetMode(): Template {
     const {
-      attributes: { preset_mode, preset_modes, supported_features },
+      attributes: { preset_mode, preset_modes, supported_features = 0 },
     } = this.entity;
 
     if (
-      !this.showPresetMode ||
+      !preset_mode ||
+      !this.config.show_preset_mode ||
       !preset_modes ||
       !(supported_features & SUPPORT_PRESET_MODE)
     ) {
@@ -188,7 +152,7 @@ class PurifierCard extends LitElement {
 
     return html`
       <div class="preset-mode">
-        <ha-button-menu @click="${(e) => e.stopPropagation()}">
+        <ha-button-menu @click="${(e: PointerEvent) => e.stopPropagation()}">
           <mmp-icon-button slot="trigger">
             <ha-icon icon="mdi:fan"></ha-icon>
             <span>
@@ -202,9 +166,9 @@ class PurifierCard extends LitElement {
                 <mwc-list-item
                   ?activated=${selected === index}
                   value=${item}
-                  @click=${(e) => this.handlePresetMode(e)}
+                  @click=${(e: PointerEvent) => this.handlePresetMode(e)}
                 >
-                  ${localize(`preset_mode.${item}`) || item}
+                  ${localize(`preset_mode.${item.toLowerCase()}`) || item}
                 </mwc-list-item>
               `
           )}
@@ -213,19 +177,28 @@ class PurifierCard extends LitElement {
     `;
   }
 
-  renderAQI() {
+  private renderAQI(): Template {
     const { aqi = {} } = this.config;
-    const { entity_id, attribute = 'aqi', unit = 'AQI' } = aqi;
+    const { entity_id, attribute, unit = 'AQI' } = aqi;
 
-    const value = entity_id
-      ? this.hass.states[entity_id].state
-      : this.entity.attributes[attribute];
+    let value = '';
 
-    let prefix = '';
+    if (entity_id && attribute) {
+      value = get(this.hass.states[entity_id].attributes, attribute);
+    } else if (attribute) {
+      value = get(this.entity.attributes, attribute);
+    } else if (entity_id) {
+      value = this.hass.states[entity_id].state;
+    } else {
+      return nothing;
+    }
 
-    if (value < 10) {
+    let prefix: Template = nothing;
+    const numericValue = Number(value);
+
+    if (numericValue < 10) {
       prefix = html`<span class="number-off">00</span>`;
-    } else if (value < 100) {
+    } else if (numericValue < 100) {
       prefix = html`<span class="number-off">0</span>`;
     }
 
@@ -237,7 +210,7 @@ class PurifierCard extends LitElement {
     `;
   }
 
-  renderSlider() {
+  private renderSlider(): Template {
     const {
       state,
       attributes: { percentage, percentage_step },
@@ -252,14 +225,13 @@ class PurifierCard extends LitElement {
           value=${percentage}
           step=${percentage_step}
           ?disabled="${disabled}"
-          @value-changed=${(e) => this.handlePercentage(e)}
+          @value-changed=${(e: CustomEvent<SliderValue>) =>
+            this.handlePercentage(e)}
         >
         </round-slider>
         <img src=${image} alt="purifier is ${state}" class="image" />
         <div class="slider-center">
-          <div class="slider-content">
-            ${this.renderAQI()}
-          </div>
+          <div class="slider-content">${this.renderAQI()}</div>
           <div class="slider-value">
             ${percentage ? `${percentage}%` : nothing}
           </div>
@@ -268,27 +240,27 @@ class PurifierCard extends LitElement {
     `;
   }
 
-  renderControls() {
-    return this.compactView ? this.renderAQI() : this.renderSlider();
+  private renderControls(): Template {
+    return this.config.compact_view ? this.renderAQI() : this.renderSlider();
   }
 
-  renderName() {
+  private renderName(): Template {
     const {
       attributes: { friendly_name },
     } = this.entity;
 
-    if (!this.showName) {
+    if (!this.config.show_name) {
       return nothing;
     }
 
     return html` <div class="friendly-name">${friendly_name}</div> `;
   }
 
-  renderState() {
+  private renderState(): Template {
     const { state } = this.entity;
     const localizedState = localize(`state.${state}`) || state;
 
-    if (!this.showState) {
+    if (!this.config.show_state) {
       return nothing;
     }
 
@@ -305,20 +277,26 @@ class PurifierCard extends LitElement {
     `;
   }
 
-  renderStats() {
-    const { stats = [] } = this.config;
+  private renderStats(): Template {
+    const statsList = this.config.stats || [];
 
-    const statsList = stats || [];
-
-    return statsList.map(
+    const stats = statsList.map(
       ({ entity_id, attribute, value_template, unit, subtitle }) => {
-        if (!entity_id && !attribute && !value_template) {
+        if (!entity_id && !attribute) {
           return nothing;
         }
 
-        const state = entity_id
-          ? this.hass.states[entity_id].state
-          : this.entity.attributes[attribute];
+        let state = '';
+
+        if (entity_id && attribute) {
+          state = get(this.hass.states[entity_id].attributes, attribute);
+        } else if (attribute) {
+          state = get(this.entity.attributes, attribute);
+        } else if (entity_id) {
+          state = this.hass.states[entity_id].state;
+        } else {
+          return nothing;
+        }
 
         const value = html`
           <ha-template
@@ -338,13 +316,15 @@ class PurifierCard extends LitElement {
         `;
       }
     );
+
+    return stats.length ? html`<div class="stats">${stats}</div>` : nothing;
   }
 
-  renderToolbar() {
+  private renderToolbar(): Template {
     const { shortcuts = [] } = this.config;
     const { state, attributes } = this.entity;
 
-    if (!this.showToolbar) {
+    if (!this.config.show_toolbar) {
       return nothing;
     }
 
@@ -400,28 +380,30 @@ class PurifierCard extends LitElement {
     `;
   }
 
-  render() {
+  private renderUnavailable(): Template {
+    return html`
+      <ha-card>
+        <div class="preview not-available">
+          <div class="metadata">
+            <div class="not-available">
+              ${localize('common.not_available')}
+            </div>
+          <div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  protected render() {
     if (!this.entity) {
-      return html`
-        <ha-card>
-          <div class="preview not-available">
-            <div class="metadata">
-              <div class="not-available">
-                ${localize('common.not_available')}
-              </div>
-            <div>
-          </div>
-        </ha-card>
-      `;
+      return this.renderUnavailable();
     }
 
     return html`
       <ha-card>
         <div class="preview">
           <div class="header">
-            <div class="tips">
-              ${this.renderPresetMode()}
-            </div>
+            <div class="tips">${this.renderPresetMode()}</div>
             <ha-icon-button
               class="more-info"
               icon="mdi:dots-vertical"
@@ -435,7 +417,7 @@ class PurifierCard extends LitElement {
 
           <div class="metadata">${this.renderName()} ${this.renderState()}</div>
 
-          <div class="stats">${this.renderStats()}</div>
+          ${this.renderStats()}
         </div>
 
         ${this.renderToolbar()}
@@ -444,7 +426,11 @@ class PurifierCard extends LitElement {
   }
 }
 
-customElements.define('purifier-card', PurifierCard);
+declare global {
+  interface Window {
+    customCards?: unknown[];
+  }
+}
 
 window.customCards = window.customCards || [];
 window.customCards.push({

package/src/styles.css

@@ -23,6 +23,7 @@ ha-card {
   flex: 1;
   position: relative;
   padding: 0px;
+  overflow: hidden;
 }
 
 .fill-gap {
@@ -189,7 +190,7 @@ ha-card {
 
 .stats-block {
   cursor: pointer;
-  margin: var(--pc-spacing) 0px;
+  padding: var(--pc-spacing) 0px;
   text-align: center;
   border-right: 1px solid var(--pc-divider-color);
   flex-grow: 1;

package/src/translations/bg.json

@@ -10,10 +10,10 @@
     "off": "Изключен"
   },
   "preset_mode": {
-    "Auto": "Автоматичен режим",
-    "Silent": "Тих режим",
-    "Favorite": "Любима",
-    "Fan": "Вентилатор"
+    "auto": "Автоматичен режим",
+    "silent": "Тих режим",
+    "favorite": "Любима",
+    "fan": "Вентилатор"
   },
   "error": {
     "missing_entity": "Избирането на обект е задължително!"

package/src/translations/ca.json

@@ -10,10 +10,10 @@
     "off": "Apagat"
   },
   "preset_mode": {
-    "Auto": "Auto",
-    "Silent": "Silenciós",
-    "Favorite": "Favorit",
-    "Fan": "Ventilador"
+    "auto": "Auto",
+    "silent": "Silenciós",
+    "favorite": "Favorit",
+    "fan": "Ventilador"
   },
   "error": {
     "missing_entity": "Cal especificar una entitat."

package/src/translations/cs.json

@@ -10,17 +10,14 @@
     "off": "Vypnuto"
   },
   "preset_mode": {
-    "Auto": "Automatický",
-    "Silent": "Noční",
-    "Favorite": "Manuální",
-    "Fan": "Větrák"
+    "auto": "Automatický",
+    "silent": "Noční",
+    "favorite": "Manuální",
+    "fan": "Větrák"
   },
   "error": {
     "missing_entity": "Je vyžadováno specifikování entity!"
   },
-  "warning": {
-    "actions_array": "VAROVÁNÍ: 'actions' je přejmenováno na 'shortcuts'"
-  },
   "editor": {
     "entity": "Entity (povinné)",
     "compact_view": "Kompaktní zobrazení",

package/src/translations/de.json

@@ -10,10 +10,10 @@
     "off": "Aus"
   },
   "preset_mode": {
-    "Auto": "Auto",
-    "Silent": "Leise",
-    "Favorite": "Favorit",
-    "Fan": "Lüfter"
+    "auto": "Auto",
+    "silent": "Leise",
+    "favorite": "Favorit",
+    "fan": "Lüfter"
   },
   "error": {
     "missing_entity": "Es muss eine Entity definiert werden!"

package/src/translations/en.json

@@ -10,17 +10,14 @@
     "off": "Off"
   },
   "preset_mode": {
-    "Auto": "Auto",
-    "Silent": "Silent",
-    "Favorite": "Favorite",
-    "Fan": "Fan"
+    "auto": "Auto",
+    "silent": "Silent",
+    "favorite": "Favorite",
+    "fan": "Fan"
   },
   "error": {
     "missing_entity": "Specifying entity is required!"
   },
-  "warning": {
-    "actions_array": "WARNING: 'actions' is renamed to 'shortcuts'"
-  },
   "editor": {
     "entity": "Entity (Required)",
     "compact_view": "Compact View",

package/src/translations/fr.json

@@ -10,10 +10,10 @@
     "off": "Éteint"
   },
   "preset_mode": {
-    "Auto": "Auto",
-    "Silent": "Nuit",
-    "Favorite": "Favori",
-    "Fan": "Manuel"
+    "auto": "Auto",
+    "silent": "Nuit",
+    "favorite": "Favori",
+    "fan": "Manuel"
   },
   "error": {
     "missing_entity": "Il est obligatoire de spécifier une entité!"

package/src/translations/it.json

@@ -10,10 +10,10 @@
     "off": "Spento"
   },
   "preset_mode": {
-    "Auto": "Auto",
-    "Silent": "Silenzioso",
-    "Favorite": "Preferito",
-    "Fan": "Ventola"
+    "auto": "Auto",
+    "silent": "Silenzioso",
+    "favorite": "Preferito",
+    "fan": "Ventola"
   },
   "error": {
     "missing_entity": "É necessario specificare l'entità"

package/src/translations/nb.json

@@ -10,10 +10,10 @@
     "off": "Av"
   },
   "preset_mode": {
-    "Auto": "Auto",
-    "Silent": "Stille",
-    "Favorite": "Favoritt",
-    "Fan": "Vifte"
+    "auto": "Auto",
+    "silent": "Stille",
+    "favorite": "Favoritt",
+    "fan": "Vifte"
   },
   "error": {
     "missing_entity": "Spesifiserende enhet kreves!"

package/src/translations/nl.json

@@ -10,17 +10,14 @@
     "off": "Uit"
   },
   "preset_mode": {
-    "Auto": "Auto",
-    "Silent": "Stil",
-    "Favorite": "Favoriet",
-    "Fan": "Ventilator"
+    "auto": "Auto",
+    "silent": "Stil",
+    "favorite": "Favoriet",
+    "fan": "Ventilator"
   },
   "error": {
     "missing_entity": "Instellen van entity is verplicht!"
   },
-  "warning": {
-    "actions_array": "WARNING: 'actions' is hernoemd naar 'shortcuts'"
-  },
   "editor": {
     "entity": "Entity (Verplicht)",
     "compact_view": "Compact View",

package/src/translations/pl.json

@@ -10,11 +10,11 @@
     "off": "Wyłączony"
   },
   "preset_mode": {
-    "Auto": "Auto",
-    "Silent": "Cichy",
-    "Favorite": "Ulubiony",
-    "Fan": "Wentylator",
-    "Idle": "Bezczynny"
+    "auto": "Auto",
+    "silent": "Cichy",
+    "favorite": "Ulubiony",
+    "fan": "Wentylator",
+    "idle": "Bezczynny"
   },
   "error": {
     "missing_entity": "Wymagane jest zadeklarowanie encji!"