purifier-card 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "purifier-card",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Air Purifier card for Home Assistant Lovelace UI",
   "main": "dist/purifier-card.js",
   "scripts": {
@@ -24,7 +24,8 @@
   "license": "MIT",
   "dependencies": {
     "custom-card-helpers": "^1.6.4",
-    "lit-element": "^2.3.1"
+    "ha-template": "^1.0.2",
+    "lit": "^2.2.2"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",
@@ -39,8 +40,12 @@
     "eslint-plugin-import": "^2.20.2",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.2",
+    "postcss-preset-env": "^7.4.3",
     "prettier": "^2.0.5",
     "rollup": "^2.7.6",
+    "rollup-plugin-minify-html-literals": "^1.2.6",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-postcss-lit": "^2.0.0",
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "semantic-release": "^17.3.7"
@@ -54,6 +59,9 @@
     "*.js": "eslint --fix",
     "*": "prettier --write"
   },
+  "prettier": {
+    "singleQuote": true
+  },
   "release": {
     "plugins": [
       "@semantic-release/commit-analyzer",

package/rollup.config.js

@@ -4,7 +4,11 @@ import nodeResolve from '@rollup/plugin-node-resolve';
 import json from '@rollup/plugin-json';
 import babel from '@rollup/plugin-babel';
 import image from '@rollup/plugin-image';
+import postcss from 'rollup-plugin-postcss';
+import postcssPresetEnv from 'postcss-preset-env';
+import postcssLit from 'rollup-plugin-postcss-lit';
 import { terser } from 'rollup-plugin-terser';
+import minifyLiterals from 'rollup-plugin-minify-html-literals';
 import serve from 'rollup-plugin-serve';
 
 const IS_DEV = process.env.ROLLUP_WATCH;
@@ -30,10 +34,31 @@ export default {
     commonjs(),
     json(),
     babel({
+      babelHelpers: 'bundled',
       exclude: 'node_modules/**',
     }),
+    postcss({
+      plugins: [
+        postcssPresetEnv({
+          stage: 1,
+          features: {
+            'nesting-rules': true,
+          },
+        }),
+      ],
+      extract: false,
+    }),
+    postcssLit({
+      importPackage: 'lit-element',
+    }),
     image(),
     IS_DEV && serve(serverOptions),
-    !IS_DEV && terser(),
+    !IS_DEV && minifyLiterals(),
+    !IS_DEV &&
+      terser({
+        output: {
+          comments: false,
+        },
+      }),
   ],
 };

package/src/purifier-card-editor.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css, nothing } from 'lit';
 import { fireEvent } from 'custom-card-helpers';
 import localize from './localize';
 
@@ -68,7 +68,7 @@ export class PurifierCardEditor extends LitElement {
 
   render() {
     if (!this.hass) {
-      return html``;
+      return nothing;
     }
 
     const fanEntities = this.getEntitiesByType('fan');

package/src/purifier-card.js

@@ -1,9 +1,14 @@
-import { LitElement, html } from 'lit-element';
+import { LitElement, html, nothing } from 'lit';
 import { hasConfigOrEntityChanged, fireEvent } from 'custom-card-helpers';
-import './purifier-card-editor';
+import registerTemplates from 'ha-template';
 import localize from './localize';
-import styles from './styles';
+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';
+
+registerTemplates();
 
 console.info(
   `%c PURIFIER-CARD %c ${version} `,
@@ -129,15 +134,15 @@ class PurifierCard extends LitElement {
     }
   }
 
-  handleMore() {
+  handleMore(entityId = this.entity.entity_id) {
     fireEvent(
       this,
       'hass-more-info',
       {
-        entityId: this.entity.entity_id,
+        entityId,
       },
       {
-        bubbles: true,
+        bubbles: false,
         composed: true,
       }
     );
@@ -176,40 +181,32 @@ class PurifierCard extends LitElement {
       !preset_modes ||
       !(supported_features & SUPPORT_PRESET_MODE)
     ) {
-      return html``;
+      return nothing;
     }
 
     const selected = preset_modes.indexOf(preset_mode);
 
     return html`
       <div class="preset-mode">
-        <paper-menu-button
-          slot="dropdown-trigger"
-          .horizontalAlign=${'right'}
-          .verticalAlign=${'top'}
-          .verticalOffset=${40}
-          .noAnimations=${true}
-          @click="${(e) => e.stopPropagation()}"
-        >
-          <paper-button slot="dropdown-trigger">
+        <ha-button-menu @click="${(e) => e.stopPropagation()}">
+          <mmp-icon-button slot="trigger">
             <ha-icon icon="mdi:fan"></ha-icon>
-            <span show=${true}
-              >${localize(`preset_mode.${preset_mode}`) || preset_mode}
+            <span>
+              ${localize(`preset_mode.${preset_mode}`) || preset_mode}
             </span>
-          </paper-button>
-          <paper-listbox
-            slot="dropdown-content"
-            selected=${selected}
-            @click="${(e) => this.handlePresetMode(e)}"
-          >
-            ${preset_modes.map(
-              (item) =>
-                html`<paper-item value=${item}
-                  >${localize(`preset_mode.${item}`) || item}</paper-item
-                >`
-            )}
-          </paper-listbox>
-        </paper-menu-button>
+          </mmp-icon-button>
+
+          ${preset_modes.map(
+            (item, index) =>
+              html`<mwc-list-item
+                ?activated=${selected === index}
+                value=${item}
+                @click=${(e) => this.handlePresetMode(e)}
+              >
+                ${localize(`preset_mode.${item}`) || item}
+              </mwc-list-item>`
+          )}
+        </ha-button-menu>
       </div>
     `;
   }
@@ -245,7 +242,7 @@ class PurifierCard extends LitElement {
     } = this.entity;
 
     const disabled = state !== 'on';
-    const stateClass = !disabled ? 'working' : 'standby';
+    const image = !disabled ? workingImg : standbyImg;
 
     return html`
       <div class="slider">
@@ -256,7 +253,8 @@ class PurifierCard extends LitElement {
           @value-changed=${(e) => this.handlePercentage(e)}
         >
         </round-slider>
-        <div class="slider-center image ${stateClass}">
+        <img src=${image} alt="purifier is ${state}" class="image" />
+        <div class="slider-center">
           <div class="slider-content">
             ${this.renderAQI()}
           </div>
@@ -278,7 +276,7 @@ class PurifierCard extends LitElement {
     } = this.entity;
 
     if (!this.showName) {
-      return html``;
+      return nothing;
     }
 
     return html` <div class="friendly-name">${friendly_name}</div> `;
@@ -289,7 +287,7 @@ class PurifierCard extends LitElement {
     const localizedState = localize(`state.${state}`) || state;
 
     if (!this.showState) {
-      return html``;
+      return nothing;
     }
 
     return html`
@@ -297,10 +295,10 @@ class PurifierCard extends LitElement {
         <span class="state-text" alt=${localizedState}>
           ${localizedState}
         </span>
-        <ha-circular-progress
-          .active=${this.requestInProgress}
-          size="small"
-        ></ha-circular-progress>
+        <mwc-circular-progress
+          .indeterminate=${this.requestInProgress}
+          density="-5"
+        ></mwc-circular-progress>
       </div>
     `;
   }
@@ -310,23 +308,33 @@ class PurifierCard extends LitElement {
 
     const statsList = stats || [];
 
-    return statsList.map(({ entity_id, attribute, unit, subtitle }) => {
-      if (!entity_id && !attribute) {
-        return html``;
-      }
-
-      const value = entity_id
-        ? this.hass.states[entity_id].state
-        : this.entity.attributes[attribute];
+    return statsList.map(
+      ({ entity_id, attribute, value_template, unit, subtitle }) => {
+        if (!entity_id && !attribute && !value_template) {
+          return nothing;
+        }
+
+        const state = entity_id
+          ? this.hass.states[entity_id].state
+          : this.entity.attributes[attribute];
+
+        const value = html`
+          <ha-template
+            hass=${this.hass}
+            template=${value_template}
+            value=${state}
+          ></ha-template>
+        `;
 
-      return html`
-        <div class="stats-block">
-          <span class="stats-value">${value}</span>
-          ${unit}
-          <div class="stats-subtitle">${subtitle}</div>
-        </div>
-      `;
-    });
+        return html`
+          <div class="stats-block" @click="${() => this.handleMore(entity_id)}">
+            <span class="stats-value">${value}</span>
+            ${unit}
+            <div class="stats-subtitle">${subtitle}</div>
+          </div>
+        `;
+      }
+    );
   }
 
   renderToolbar() {
@@ -334,7 +342,7 @@ class PurifierCard extends LitElement {
     const { state, attributes } = this.entity;
 
     if (!this.showToolbar) {
-      return html``;
+      return nothing;
     }
 
     const buttons = shortcuts.map(
@@ -408,7 +416,9 @@ class PurifierCard extends LitElement {
       <ha-card>
         <div class="preview">
           <div class="header">
-            ${this.renderPresetMode()}
+            <div class="tips">
+              ${this.renderPresetMode()}
+            </div>
             <ha-icon-button
               class="more-info"
               icon="mdi:dots-vertical"

package/src/styles.css

@@ -0,0 +1,260 @@
+:host {
+  --pc-background: var(
+    --ha-card-background,
+    var(--card-background-color, white)
+  );
+  --pc-primary-text-color: var(--primary-text-color);
+  --pc-secondary-text-color: var(--secondary-text-color);
+  --pc-icon-color: var(--secondary-text-color);
+  --pc-slider-path-color: var(--round-slider-path-color);
+  --pc-slider-bar-color: var(--round-slider-bar-color);
+  --pc-toolbar-background: var(--vc-background);
+  --pc-toolbar-icon-color: var(--secondary-text-color);
+  --pc-divider-color: var(--entities-divider-color, var(--divider-color));
+  --pc-spacing: 10px;
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+ha-card {
+  flex-direction: column;
+  flex: 1;
+  position: relative;
+  padding: 0px;
+  overflow: hidden;
+}
+
+.fill-gap {
+  flex-grow: 1;
+}
+
+.preview {
+  background-color: var(--pc-background);
+  overflow: hidden;
+  position: relative;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  color: var(--pc-primary-text-color);
+}
+
+.tips {
+  display: flex;
+  gap: var(--pc-spacing);
+  flex-grow: 1;
+  flex-wrap: wrap;
+  padding: var(--pc-spacing);
+
+  & .tip {
+    cursor: pointer;
+  }
+}
+
+.preset-mode ha-icon {
+  display: inline-block;
+}
+
+.more-info {
+  color: var(--pc-primary-text-color);
+}
+
+.controls {
+  display: flex;
+  justify-content: center;
+}
+
+.slider {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  max-width: 250px;
+  min-width: 100px;
+}
+
+.slider round-slider {
+  --round-slider-path-color: var(--pc-slider-path-color);
+  --round-slider-bar-color: var(--pc-slider-bar-color);
+}
+
+.slider-center {
+  position: absolute;
+  width: calc(100% - 90px);
+  height: calc(100% - 10px);
+  box-sizing: border-box;
+  border-radius: 100%;
+  left: 45px;
+  top: 20px;
+  text-align: center;
+  overflow-wrap: break-word;
+  pointer-events: none;
+}
+
+.slider-content {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  top: 50%;
+  left: 50%;
+}
+
+.slider-value {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  color: var(--pc-primary-text-color);
+}
+
+.image {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  object-fit: contain;
+  pointer-events: none;
+}
+
+.preview.not-available {
+  filter: grayscale(1);
+}
+
+.number-off {
+  opacity: 0.2;
+}
+
+.current-aqi {
+  font-size: 48px;
+  font-weight: bold;
+  line-height: 48px;
+  padding: var(--pc-spacing);
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.6);
+  color: var(--text-primary-color);
+}
+
+.current-aqi sup {
+  font-size: 16px;
+  line-height: 16px;
+  font-weight: normal;
+}
+
+.state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.state-text {
+  color: var(--pc-secondary-text-color);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-left: calc(28px + var(--pc-spacing)); /* size + margin of spinner */
+}
+
+.state mwc-circular-progress {
+  --mdc-theme-primary: var(--pc-secondary-text-color) !important;
+  margin-left: var(--pc-spacing);
+}
+
+.friendly-name {
+  text-align: center;
+  font-weight: bold;
+  color: var(--pc-primary-text-colo);
+  font-size: 16px;
+}
+
+.not-available {
+  text-align: center;
+  color: var(--pc-primary-text-colo);
+  font-size: 16px;
+}
+
+.metadata {
+  margin: var(--pc-spacing) auto;
+}
+
+.stats {
+  border-top: 1px solid var(--pc-divider-color);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  color: var(--pc-secondary-text-color);
+}
+
+.stats-block {
+  cursor: pointer;
+  margin: var(--pc-spacing) 0px;
+  text-align: center;
+  border-right: 1px solid var(--pc-divider-color);
+  flex-grow: 1;
+
+  &:last-of-type {
+    border-right: 0px;
+  }
+}
+
+.stats-value {
+  font-size: 20px;
+  color: var(--pc-primary-text-color);
+}
+
+ha-icon {
+  display: flex;
+  color: var(--pc-icon-color);
+}
+
+.toolbar {
+  background: var(--pc-toolbar-background);
+  min-height: 30px;
+  display: flex;
+  flex-direction: row;
+  flex-flow: row wrap;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  padding: 5px;
+  border-top: 1px solid var(--pc-divider-color);
+}
+
+.toolbar ha-icon-button {
+  color: var(--pc-toolbar-text-color);
+  flex-direction: column;
+  width: 44px;
+  height: 44px;
+  --mdc-icon-button-size: 44px;
+  opacity: 0.5;
+}
+
+.toolbar ha-icon-button.active {
+  opacity: 1;
+}
+
+.toolbar paper-button {
+  color: var(--pc-toolbar-icon-color);
+  flex-direction: column;
+  margin-right: 10px;
+  padding: 15px 10px;
+  cursor: pointer;
+}
+
+.toolbar ha-icon-button:active,
+.toolbar paper-button:active {
+  opacity: 0.4;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.toolbar paper-button {
+  color: var(--pc-toolbar-icon-color);
+  flex-direction: row;
+}
+
+.toolbar ha-icon {
+  color: var(--pc-toolbar-icon-color);
+}

package/.prettierrc.json

@@ -1,3 +0,0 @@
-{
-  "singleQuote": true
-}