purifier-card 2.6.9 → 2.7.0

package/eslint.config.mjs

@@ -0,0 +1,26 @@
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import tsParser from '@typescript-eslint/parser';
+import tsPlugin from '@typescript-eslint/eslint-plugin';
+import importPlugin from 'eslint-plugin-import';
+import js from '@eslint/js';
+
+export default defineConfig([
+  {
+    files: ['**/*.ts', '**/*.js', '**/*.mjs'],
+    languageOptions: {
+      globals: globals.browser,
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      parser: tsParser,
+    },
+    plugins: {
+      '@typescript-eslint': tsPlugin,
+      import: importPlugin,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...tsPlugin.configs.recommended.rules,
+    },
+  },
+]);

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "purifier-card",
-  "version": "2.6.9",
+  "version": "2.7.0",
   "description": "Air Purifier card for Home Assistant Lovelace UI",
   "main": "dist/purifier-card.js",
   "scripts": {
     "start": "rollup -c --watch",
-    "lint": "eslint src",
+    "lint": "npm run lint:src && npm run lint:translations",
     "lint:fix": "eslint src --fix",
+    "lint:src": "eslint src",
+    "lint:translations": "node scripts/validate-i18n",
     "format": "prettier --write .",
     "build": "rollup -c",
     "test": "npm run lint && npm run build",
@@ -32,42 +34,44 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@types/lodash": "^4.14.195",
     "custom-card-helpers": "^2.0.0",
-    "ha-template": "^1.2.2",
-    "home-assistant-js-websocket": "^9.1.0",
+    "ha-template": "^1.4.0",
+    "home-assistant-js-websocket": "^9.6.0",
     "lit": "^3.3.2",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@rollup/plugin-babel": "^6.0.3",
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@eslint/js": "^9.39.2",
+    "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-image": "^3.0.1",
-    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@semantic-release/git": "^10.0.1",
-    "@typescript-eslint/eslint-plugin": "^8.54.0",
-    "@typescript-eslint/parser": "^8.54.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.20.2",
-    "husky": "^9.0.11",
+    "@types/lodash": "^4.14.195",
+    "@typescript-eslint/eslint-plugin": "^8.51.0",
+    "@typescript-eslint/parser": "^8.51.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "globals": "^17.0.0",
+    "husky": "^9.1.7",
     "lint-staged": "^16.3.1",
     "postcss-preset-env": "^11.1.2",
-    "prettier": "^3.2.5",
+    "prettier": "^3.7.4",
     "rollup": "^4.59.0",
-    "rollup-plugin-html-literals": "^2.0.1",
+    "rollup-plugin-minify-html-literals-v3": "^1.3.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-postcss-lit": "^2.0.0",
-    "rollup-plugin-serve": "^2.0.1",
+    "rollup-plugin-postcss-lit": "^2.2.0",
+    "rollup-plugin-serve": "^3.0.0",
     "rollup-plugin-typescript2": "^0.36.0",
     "semantic-release": "^25.0.3",
-    "typescript": "^5.1.3"
+    "typescript": "^5.9.3"
   },
   "browserslist": [
     "last 2 versions",

package/rollup.config.mjs

@@ -10,7 +10,7 @@ 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-html-literals';
+import minifyLiterals from 'rollup-plugin-minify-html-literals-v3';
 import replace from '@rollup/plugin-replace';
 import serve from 'rollup-plugin-serve';
 
@@ -61,11 +61,12 @@ const plugins = [
   !IS_DEV && minifyLiterals(),
   !IS_DEV &&
     terser({
+      maxWorkers: 1,
       output: {
         comments: false,
       },
     }),
-];
+].filter(Boolean);
 
 export default {
   input: 'src/purifier-card.ts',

package/scripts/validate-i18n

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+
+import { readdir, readFile } from 'node:fs/promises';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const translationsDir = path.join(__dirname, '..', 'src', 'translations');
+const sourceLocale = 'en.json';
+
+const flattenKeys = (value, prefix = '') => {
+  let keys = [];
+  if (value && typeof value === 'object') {
+    for (const [key, child] of Object.entries(value)) {
+      const nextPrefix = prefix ? `${prefix}.${key}` : key;
+      keys = keys.concat(flattenKeys(child, nextPrefix));
+    }
+  } else if (prefix) {
+    keys.push(prefix);
+  }
+  return keys;
+};
+
+const readJson = async (filePath) => {
+  const raw = await readFile(filePath, 'utf8');
+  return JSON.parse(raw);
+};
+
+const listJsonFiles = async () => {
+  const files = await readdir(translationsDir);
+  return files.filter((file) => file.endsWith('.json')).sort();
+};
+
+const main = async () => {
+  const files = await listJsonFiles();
+
+  if (!files.includes(sourceLocale)) {
+    console.error(`Missing source locale: ${sourceLocale}`);
+    process.exit(1);
+  }
+
+  const sourcePath = path.join(translationsDir, sourceLocale);
+  const sourceData = await readJson(sourcePath);
+  const sourceKeys = new Set(flattenKeys(sourceData));
+
+  let hasErrors = false;
+
+  for (const file of files) {
+    if (file === sourceLocale) continue;
+
+    const localePath = path.join(translationsDir, file);
+    const localeData = await readJson(localePath);
+    const localeKeys = flattenKeys(localeData);
+    const extraKeys = localeKeys.filter((key) => !sourceKeys.has(key));
+
+    if (extraKeys.length > 0) {
+      hasErrors = true;
+      console.error(
+        `Extra keys found in ${file} (missing in ${sourceLocale}):`,
+      );
+      for (const key of extraKeys.sort()) {
+        console.error(`  - ${key}`);
+      }
+    }
+  }
+
+  if (hasErrors) {
+    process.exit(1);
+  }
+
+  console.log('Translation keys are consistent with en.json.');
+};
+
+main().catch((error) => {
+  console.error('Failed to validate translations:', error);
+  process.exit(1);
+});

package/src/purifier-card.ts

@@ -1,5 +1,6 @@
 import { CSSResultGroup, LitElement, PropertyValues, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import {
   hasConfigOrEntityChanged,
   fireEvent,
@@ -130,11 +131,59 @@ export class PurifierCard extends LitElement {
     }
   }
 
-  private handlePresetMode(event: PointerEvent) {
-    const preset_mode = (<HTMLDivElement>event.target).getAttribute('value');
+  private handlePresetMode(
+    e: CustomEvent<{ item?: { value?: string } }>,
+  ): void {
+    const preset_mode = e.detail.item?.value;
     this.callService('fan.set_preset_mode', { preset_mode });
   }
 
+  private renderDropdown({
+    icon,
+    value,
+    options,
+    onSelect,
+    formatLabel,
+    ariaLabel,
+  }: {
+    icon: string;
+    value: string;
+    options: string[];
+    onSelect: (_e: CustomEvent<{ item?: { value?: string } }>) => void;
+    formatLabel: (_value: string) => string;
+    ariaLabel?: string;
+  }): Template {
+    const selectedLabel = formatLabel(value);
+
+    return html`
+      <div class="tip dropdown-tip" @click=${(e: Event) => e.stopPropagation()}>
+        <ha-dropdown placement="bottom" @wa-select=${onSelect}>
+          <button
+            class="dropdown-trigger"
+            slot="trigger"
+            aria-label=${ariaLabel ?? selectedLabel}
+          >
+            <ha-icon icon=${icon}></ha-icon>
+            <span class="tip-title">${selectedLabel}</span>
+            <ha-icon
+              class="dropdown-trigger-arrow"
+              icon="mdi:menu-down"
+            ></ha-icon>
+          </button>
+          ${repeat(
+            options,
+            (item) => item,
+            (item) => html`
+              <ha-dropdown-item .value=${item} ?checked=${item === value}>
+                ${formatLabel(item)}
+              </ha-dropdown-item>
+            `,
+          )}
+        </ha-dropdown>
+      </div>
+    `;
+  }
+
   private handlePercentage(event: CustomEvent<SliderValue>) {
     const percentage = event.detail.value;
     this.callService('fan.set_percentage', { percentage });
@@ -154,32 +203,15 @@ export class PurifierCard extends LitElement {
       return nothing;
     }
 
-    const selected = preset_modes.indexOf(preset_mode);
-
-    return html`
-      <div class="tip preset-mode">
-        <ha-dropdown @click="${(e: PointerEvent) => e.stopPropagation()}">
-          <mmp-icon-button slot="trigger">
-            <ha-icon icon="mdi:fan"></ha-icon>
-            <span>
-              ${localize(`preset_mode.${preset_mode}`) || preset_mode}
-            </span>
-          </mmp-icon-button>
-
-          ${preset_modes.map(
-            (item, index) => html`
-              <ha-dropdown-item
-                ?activated=${selected === index}
-                value=${item}
-                @click=${(e: PointerEvent) => this.handlePresetMode(e)}
-              >
-                ${localize(`preset_mode.${item.toLowerCase()}`) || item}
-              </ha-dropdown-item>
-            `,
-          )}
-        </ha-dropdown>
-      </div>
-    `;
+    return this.renderDropdown({
+      icon: 'mdi:fan',
+      value: preset_mode,
+      options: preset_modes,
+      onSelect: (e) => this.handlePresetMode(e),
+      formatLabel: (value: string) =>
+        localize(`preset_mode.${value.toLowerCase()}`) ?? value,
+      ariaLabel: localize('common.preset_mode') || 'Preset mode',
+    });
   }
 
   private renderAQI(): Template {
@@ -271,13 +303,12 @@ export class PurifierCard extends LitElement {
 
     return html`
       <div class="state">
+        ${this.requestInProgress
+          ? html`<ha-spinner class="state-spinner" size="tiny"></ha-spinner>`
+          : nothing}
         <span class="state-text" alt=${localizedState}>
           ${localizedState}
         </span>
-        <ha-circular-progress
-          .indeterminate=${this.requestInProgress}
-          size="small"
-        ></ha-circular-progress>
       </div>
     `;
   }

package/src/styles.css

@@ -46,15 +46,53 @@ ha-card {
   gap: var(--pc-spacing);
   flex-grow: 1;
   flex-wrap: wrap;
+  align-items: center;
   padding: var(--pc-spacing);
 
   & .tip {
     cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+
+    & ha-icon {
+      --mdc-icon-size: 18px;
+    }
+  }
+
+  & .dropdown-tip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  & .dropdown-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background: transparent;
+    border: 0;
+    color: var(--pc-secondary-text-color);
+    cursor: pointer;
+    font: inherit;
+    line-height: 1;
+    padding: 0;
+  }
+
+  & .dropdown-trigger:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
   }
-}
 
-.preset-mode ha-icon {
-  display: inline-block;
+  & .dropdown-trigger-arrow {
+    --mdc-icon-size: 18px;
+  }
+
+  & .tip-title {
+    display: inline-block;
+    line-height: 1;
+    vertical-align: middle;
+  }
 }
 
 .more-info {
@@ -148,6 +186,8 @@ ha-card {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: var(--pc-spacing);
+  direction: ltr;
 }
 
 .state-text {
@@ -155,12 +195,10 @@ ha-card {
   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);
+.state .state-spinner {
+  --ha-spinner-color: var(--pc-secondary-text-color);
 }
 
 .friendly-name {

package/src/translations/bg.json

@@ -3,7 +3,8 @@
     "name": "Карта Пречиствател за Въздух",
     "description": "Картата Пречиствател за Въздух улеснява управлението на различни видове смарт пречистватели.",
     "not_available": "Обектът не е наличен",
-    "toggle_power": "Включи/Изключи"
+    "toggle_power": "Включи/Изключи",
+    "preset_mode": "Предварителен режим"
   },
   "state": {
     "on": "Включен",
@@ -13,10 +14,15 @@
     "auto": "Автоматичен режим",
     "silent": "Тих режим",
     "favorite": "Любима",
-    "fan": "Вентилатор"
+    "fan": "Вентилатор",
+    "idle": "Неактивен",
+    "low": "Ниска",
+    "medium": "Средна",
+    "high": "Висока"
   },
   "error": {
-    "missing_entity": "Избирането на обект е задължително!"
+    "missing_entity": "Избирането на обект е задължително!",
+    "invalid_config": "Невалидна конфигурация на картата!"
   },
   "editor": {
     "entity": "Обект (Задължително)",
@@ -33,5 +39,8 @@
     "show_toolbar_aria_label_on": "Покажи лентата с инструменти",
     "show_toolbar_aria_label_off": "Скрий лентата с инструменти",
     "code_only_note": "Забележка: Настройването на  actions и stats е възможно единствено чрез Code Editor."
+  },
+  "warning": {
+    "actions_array": "ПРЕДУПРЕЖДЕНИЕ: 'actions' е преименувано на 'shortcuts'"
   }
 }

package/src/translations/ca.json

@@ -3,7 +3,8 @@
     "name": "Purifier Card",
     "description": "Purifier card us permet controlar el purificador intel·ligent.",
     "not_available": "L'entitat no està disponible",
-    "toggle_power": "Encendre/apagar"
+    "toggle_power": "Encendre/apagar",
+    "preset_mode": "Mode predefinit"
   },
   "state": {
     "on": "Encès",
@@ -13,10 +14,15 @@
     "auto": "Auto",
     "silent": "Silenciós",
     "favorite": "Favorit",
-    "fan": "Ventilador"
+    "fan": "Ventilador",
+    "idle": "Inactiu",
+    "low": "Baix",
+    "medium": "Mitjà",
+    "high": "Alt"
   },
   "error": {
-    "missing_entity": "Cal especificar una entitat."
+    "missing_entity": "Cal especificar una entitat.",
+    "invalid_config": "Configuració de targeta no vàlida!"
   },
   "editor": {
     "entity": "Entitat (Requerit)",
@@ -33,5 +39,8 @@
     "show_toolbar_aria_label_on": "Mostra barra d'eines",
     "show_toolbar_aria_label_off": "Amaga barra d'eines",
     "code_only_note": "Nota: Configuració de les accions i estadístiques només disponible des de l'Editor de Codi."
+  },
+  "warning": {
+    "actions_array": "AVÍS: 'actions' s'ha reanomenat a 'shortcuts'"
   }
 }

package/src/translations/cs.json

@@ -3,7 +3,8 @@
     "name": "Karta čističky",
     "description": "Karta čističky Vám umožní ovládat Vaši chytrou čističku.",
     "not_available": "Entita je nedostupná",
-    "toggle_power": "Zapnout/vypnout"
+    "toggle_power": "Zapnout/vypnout",
+    "preset_mode": "Režim předvolby"
   },
   "state": {
     "on": "Zapnuto",
@@ -13,10 +14,15 @@
     "auto": "Automatický",
     "silent": "Noční",
     "favorite": "Manuální",
-    "fan": "Větrák"
+    "fan": "Větrák",
+    "idle": "Nečinný",
+    "low": "Nízký",
+    "medium": "Střední",
+    "high": "Vysoký"
   },
   "error": {
-    "missing_entity": "Je vyžadováno specifikování entity!"
+    "missing_entity": "Je vyžadováno specifikování entity!",
+    "invalid_config": "Neplatná konfigurace karty!"
   },
   "editor": {
     "entity": "Entity (povinné)",
@@ -33,5 +39,8 @@
     "show_toolbar_aria_label_on": "Zapnout zobrazení lišty",
     "show_toolbar_aria_label_off": "Vypnout zobrazení lišty",
     "code_only_note": "Poznámka: Nastavení akcí a statistik je dostupné pouze v editoru kódu."
+  },
+  "warning": {
+    "actions_array": "VAROVÁNÍ: 'actions' bylo přejmenováno na 'shortcuts'"
   }
 }

package/src/translations/de.json

@@ -3,7 +3,8 @@
     "name": "Purifier Karte",
     "description": "Die Purifier Karte steuert deinen smarten Luftreiniger.",
     "not_available": "Entity nicht verfügbar",
-    "toggle_power": "an/aus"
+    "toggle_power": "an/aus",
+    "preset_mode": "Voreingestellter Modus"
   },
   "state": {
     "on": "An",
@@ -13,10 +14,15 @@
     "auto": "Auto",
     "silent": "Leise",
     "favorite": "Favorit",
-    "fan": "Lüfter"
+    "fan": "Lüfter",
+    "idle": "Leerlauf",
+    "low": "Niedrig",
+    "medium": "Mittel",
+    "high": "Hoch"
   },
   "error": {
-    "missing_entity": "Es muss eine Entity definiert werden!"
+    "missing_entity": "Es muss eine Entity definiert werden!",
+    "invalid_config": "Ungültige Kartenkonfiguration!"
   },
   "editor": {
     "entity": "Entity (Erforderlich)",
@@ -33,5 +39,8 @@
     "show_toolbar_aria_label_on": "Symbolleiste anzeigen anschalten",
     "show_toolbar_aria_label_off": "Symbolleiste anzeigen ausschalten",
     "code_only_note": "Bitte beachten: Aktionen und Status Optionen sind nur im Code Editor verfügbar."
+  },
+  "warning": {
+    "actions_array": "WARNUNG: 'actions' wurde in 'shortcuts' umbenannt"
   }
 }

package/src/translations/en.json

@@ -3,7 +3,8 @@
     "name": "Purifier Card",
     "description": "Purifier card allows you to control your smart purifier.",
     "not_available": "Entity is not available",
-    "toggle_power": "Turn on/off"
+    "toggle_power": "Turn on/off",
+    "preset_mode": "Preset mode"
   },
   "state": {
     "on": "On",
@@ -13,10 +14,15 @@
     "auto": "Auto",
     "silent": "Silent",
     "favorite": "Favorite",
-    "fan": "Fan"
+    "fan": "Fan",
+    "idle": "Idle",
+    "low": "Low",
+    "medium": "Medium",
+    "high": "High"
   },
   "error": {
-    "missing_entity": "Specifying entity is required!"
+    "missing_entity": "Specifying entity is required!",
+    "invalid_config": "Invalid card configuration!"
   },
   "editor": {
     "entity": "Entity (Required)",
@@ -33,5 +39,8 @@
     "show_toolbar_aria_label_on": "Toggle display toolbar on",
     "show_toolbar_aria_label_off": "Toggle display toolbar off",
     "code_only_note": "Note: Setting actions and stats options are available exclusively using Code Editor."
+  },
+  "warning": {
+    "actions_array": "WARNING: 'actions' has been renamed to 'shortcuts'"
   }
 }

package/src/translations/es.json

@@ -3,7 +3,8 @@
     "name": "Tarjeta Purificadora",
     "description": "La tarjeta purificadora te permite controlar tu purificador inteligente.",
     "not_available": "La entidad no está disponible",
-    "toggle_power": "Encender/Apagar"
+    "toggle_power": "Encender/Apagar",
+    "preset_mode": "Modo preestablecido"
   },
   "state": {
     "on": "Encendido",
@@ -13,10 +14,15 @@
     "auto": "Automático",
     "silent": "Nocturno",
     "favorite": "Manual",
-    "fan": "Ventilador"
+    "fan": "Ventilador",
+    "idle": "Inactivo",
+    "low": "Bajo",
+    "medium": "Medio",
+    "high": "Alto"
   },
   "error": {
-    "missing_entity": "¡Se requiere especificar la entidad!"
+    "missing_entity": "¡Se requiere especificar la entidad!",
+    "invalid_config": "¡Configuración de tarjeta inválida!"
   },
   "editor": {
     "entity": "Entidad (Requerido)",
@@ -33,5 +39,8 @@
     "show_toolbar_aria_label_on": "Activar mostrar barra de herramientas",
     "show_toolbar_aria_label_off": "Desactivar mostrar barra de herramientas",
     "code_only_note": "Nota: La configuración de acciones y opciones de estadísticas solo está disponible mediante el Editor de Código."
+  },
+  "warning": {
+    "actions_array": "ADVERTENCIA: 'actions' ha sido renombrado a 'shortcuts'"
   }
 }