Merge tag 'v3.0.2'

phischdev · Jul 11, 2023 · f617e79 · f617e79
2 parents e48ab70 + 994932b
commit f617e79
Show file tree

Hide file tree

Showing 97 changed files with 1,948 additions and 2,349 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -7,7 +7,7 @@ body:
       attributes:
           label: Requirements
           options:
-              - label: I have updated Mushroom to the latest available version
+              - label: I checked the troubleshooting section in the README to verify that I have the latest Mushroom version.
                 required: true
               - label: I did a search to see if there is a similar issue or if a pull request is open.
                 required: true

diff --git a/README.md b/README.md
@@ -47,6 +47,19 @@ Mushroom Better Sliders is available in [HACS][hacs] (Home Assistant Community S
               type: module
         ```
 
+### Merging upstream
+- git fetch upstream
+- git merge vX.X.X (merge release commit)
+- resolve conflicts
+- run npm i to generate package-lock.json
+- npm run start to host
+- Edit Dashboard -> Manage Resources 
+-> Add hosted "http://192.168.x.x:4000/mushroom.js"
+-> Disable current Mushroom (better sliders) resource
+-> Reload
+- Test
+- Create Pull Request
+
 
 <!-- Badges -->
 

diff --git a/hacs.json b/hacs.json
@@ -1,6 +1,6 @@
 {
     "name": "Mushroom - Better Sliders",
     "filename": "mushroom.js",
-    "homeassistant": "2022.11.0",
+    "homeassistant": "2023.7.0",
     "render_readme": true
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mushroom-cards-better-sliders",
-  "version": "2.8.0",
+  "version": "3.0.2",
   "description": "Home Assistant Mushroom Cards - With better slider touch support",
   "main": "index.js",
   "scripts": {
@@ -21,28 +21,28 @@
     "@material/mwc-textfield": "^0.27.0",
     "color": "^4.2.3",
     "hammerjs": "^2.0.8",
-    "home-assistant-js-websocket": "^8.0.1",
-    "lit": "^2.6.0",
+    "home-assistant-js-websocket": "^8.1.0",
+    "lit": "^2.7.6",
     "memoize-one": "^6.0.0",
     "sortablejs": "^1.15.0",
     "superstruct": "^0.15.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.22.8",
     "@material/mwc-ripple": "^0.27.0",
     "@material/tab-bar": "^14.0.0",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.3.0",
-    "@rollup/plugin-typescript": "^11.0.0",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.2",
     "@types/color": "^3.0.3",
     "@types/hammerjs": "^2.0.41",
-    "eslint": "^8.31.0",
+    "eslint": "^8.44.0",
     "prettier": "^2.8.2",
-    "rollup": "^3.9.1",
+    "rollup": "^3.26.2",
     "rollup-plugin-serve": "^2.0.2",
-    "typescript": "^4.9.4"
+    "typescript": "^5.1.6"
   }
 }
diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts
@@ -2,32 +2,31 @@ import { html, nothing } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
-import { fireEvent, LocalizeFunc, LovelaceCardEditor } from "../../ha";
+import { LocalizeFunc, LovelaceCardEditor, fireEvent } from "../../ha";
 import setupCustomlocalize from "../../localize";
 import { computeActionsFormSchema } from "../../shared/config/actions-config";
 import { APPEARANCE_FORM_SCHEMA } from "../../shared/config/appearance-config";
 import { MushroomBaseElement } from "../../utils/base-element";
 import { GENERIC_LABELS } from "../../utils/form/generic-fields";
 import { HaFormSchema } from "../../utils/form/ha-form";
 import { UiAction } from "../../utils/form/ha-selector";
-import { stateIcon } from "../../utils/icons/state-icon";
 import { loadHaComponents } from "../../utils/loader";
 import {
-    alarmControlPanelCardCardConfigStruct,
     AlarmControlPanelCardConfig,
+    alarmControlPanelCardCardConfigStruct,
 } from "./alarm-control-panel-card-config";
 import { ALARM_CONTROl_PANEL_CARD_EDITOR_NAME, ALARM_CONTROl_PANEL_ENTITY_DOMAINS } from "./const";
 
-const actions: UiAction[] = ["more-info", "navigate", "url", "call-service", "none"];
+const actions: UiAction[] = ["more-info", "navigate", "url", "call-service", "assist", "none"];
 
 const states = ["armed_home", "armed_away", "armed_night", "armed_vacation", "armed_custom_bypass"];
 
 const ALARM_CONTROL_PANEL_LABELS = ["show_keypad"];
 
-const computeSchema = memoizeOne((localize: LocalizeFunc, icon?: string): HaFormSchema[] => [
+const computeSchema = memoizeOne((localize: LocalizeFunc): HaFormSchema[] => [
     { name: "entity", selector: { entity: { domain: ALARM_CONTROl_PANEL_ENTITY_DOMAINS } } },
     { name: "name", selector: { text: {} } },
-    { name: "icon", selector: { icon: { placeholder: icon } } },
+    { name: "icon", selector: { icon: {} }, context: { icon_entity: "entity" } },
     ...APPEARANCE_FORM_SCHEMA,
     {
         type: "multi_select",
@@ -60,10 +59,7 @@ export class SwitchCardEditor extends MushroomBaseElement implements LovelaceCar
             return nothing;
         }
 
-        const entityState = this._config.entity ? this.hass.states[this._config.entity] : undefined;
-        const entityIcon = entityState ? stateIcon(entityState) : undefined;
-        const icon = this._config.icon || entityIcon;
-        const schema = computeSchema(this.hass!.localize, icon);
+        const schema = computeSchema(this.hass!.localize);
 
         return html`
             <ha-form

diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
@@ -25,7 +25,6 @@ import { MushroomBaseCard } from "../../utils/base-card";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { alarmPanelIconAction } from "../../utils/icons/alarm-panel-icon";
-import { stateIcon } from "../../utils/icons/state-icon";
 import { computeEntityPicture } from "../../utils/info";
 import { AlarmControlPanelCardConfig } from "./alarm-control-panel-card-config";
 import {
@@ -165,7 +164,7 @@ export class AlarmControlPanelCard extends MushroomBaseCard implements LovelaceC
         }
 
         const name = this._config.name || stateObj.attributes.friendly_name || "";
-        const icon = this._config.icon || stateIcon(stateObj);
+        const icon = this._config.icon;
         const appearance = computeAppearance(this._config);
         const picture = computeEntityPicture(stateObj, appearance.icon_type);
 
@@ -257,7 +256,7 @@ export class AlarmControlPanelCard extends MushroomBaseCard implements LovelaceC
         `;
     }
 
-    protected renderIcon(stateObj: HassEntity, icon: string): TemplateResult {
+    protected renderIcon(stateObj: HassEntity, icon?: string): TemplateResult {
         const color = getStateColor(stateObj.state);
         const shapePulse = shouldPulse(stateObj.state);
         const iconStyle = {
@@ -268,11 +267,10 @@ export class AlarmControlPanelCard extends MushroomBaseCard implements LovelaceC
             <mushroom-shape-icon
                 slot="icon"
                 style=${styleMap(iconStyle)}
-                class=${classMap({
-                    pulse: shapePulse,
-                })}
-                .icon=${icon}
-            ></mushroom-shape-icon>
+                class=${classMap({ pulse: shapePulse })}
+            >
+                <ha-state-icon .state=${stateObj} .icon=${icon}></ha-state-icon>
+            </mushroom-shape-icon>
         `;
     }
 

diff --git a/src/cards/chips-card/chips/action-chip-editor.ts b/src/cards/chips-card/chips/action-chip-editor.ts
@@ -1,6 +1,5 @@
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import memoizeOne from "memoize-one";
 import { fireEvent, HomeAssistant } from "../../../ha";
 import setupCustomlocalize from "../../../localize";
 import { computeActionsFormSchema } from "../../../shared/config/actions-config";
@@ -12,19 +11,19 @@ import { ActionChipConfig } from "../../../utils/lovelace/chip/types";
 import { LovelaceChipEditor } from "../../../utils/lovelace/types";
 import { DEFAULT_ACTION_ICON } from "./action-chip";
 
-const actions: UiAction[] = ["navigate", "url", "call-service", "none"];
+const actions: UiAction[] = ["navigate", "url", "call-service", "assist", "none"];
 
-const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
+const SCHEMA: HaFormSchema[] = [
     {
         type: "grid",
         name: "",
         schema: [
-            { name: "icon", selector: { icon: { placeholder: icon } } },
+            { name: "icon", selector: { icon: { placeholder: DEFAULT_ACTION_ICON } } },
             { name: "icon_color", selector: { mush_color: {} } },
         ],
     },
     ...computeActionsFormSchema(actions),
-]);
+];
 
 @customElement(computeChipEditorComponentName("action"))
 export class EntityChipEditor extends LitElement implements LovelaceChipEditor {
@@ -50,14 +49,11 @@ export class EntityChipEditor extends LitElement implements LovelaceChipEditor {
             return nothing;
         }
 
-        const icon = this._config.icon || DEFAULT_ACTION_ICON;
-        const schema = computeSchema(icon);
-
         return html`
             <ha-form
                 .hass=${this.hass}
                 .data=${this._config}
-                .schema=${schema}
+                .schema=${SCHEMA}
                 .computeLabel=${this._computeLabel}
                 @value-changed=${this._valueChanged}
             ></ha-form>

diff --git a/src/cards/chips-card/chips/action-chip.ts b/src/cards/chips-card/chips/action-chip.ts
@@ -71,7 +71,7 @@ export class ActionChip extends LitElement implements LovelaceChip {
                     hasDoubleClick: hasAction(this._config.double_tap_action),
                 })}
             >
-                <ha-icon .icon=${icon} style=${styleMap(iconStyle)}></ha-icon>
+                <ha-state-icon .icon=${icon} style=${styleMap(iconStyle)}></ha-state-icon>
             </mushroom-chip>
         `;
     }
@@ -81,7 +81,7 @@ export class ActionChip extends LitElement implements LovelaceChip {
             mushroom-chip {
                 cursor: pointer;
             }
-            ha-icon {
+            ha-state-icon {
                 color: var(--color);
             }
         `;

diff --git a/src/cards/chips-card/chips/alarm-control-panel-chip-editor.ts b/src/cards/chips-card/chips/alarm-control-panel-chip-editor.ts
@@ -1,21 +1,19 @@
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import memoizeOne from "memoize-one";
 import { fireEvent, HomeAssistant } from "../../../ha";
 import setupCustomlocalize from "../../../localize";
 import { computeActionsFormSchema } from "../../../shared/config/actions-config";
 import { GENERIC_LABELS } from "../../../utils/form/generic-fields";
 import { HaFormSchema } from "../../../utils/form/ha-form";
 import { UiAction } from "../../../utils/form/ha-selector";
-import { stateIcon } from "../../../utils/icons/state-icon";
 import { computeChipEditorComponentName } from "../../../utils/lovelace/chip/chip-element";
 import { AlarmControlPanelChipConfig } from "../../../utils/lovelace/chip/types";
 import { LovelaceChipEditor } from "../../../utils/lovelace/types";
 import { ALARM_CONTROl_PANEL_ENTITY_DOMAINS } from "../../alarm-control-panel-card/const";
 
-const actions: UiAction[] = ["more-info", "navigate", "url", "call-service", "none"];
+const actions: UiAction[] = ["more-info", "navigate", "url", "call-service", "assist", "none"];
 
-const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
+const SCHEMA: HaFormSchema[] = [
     { name: "entity", selector: { entity: { domain: ALARM_CONTROl_PANEL_ENTITY_DOMAINS } } },
     {
         type: "grid",
@@ -25,9 +23,9 @@ const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
             { name: "content_info", selector: { mush_info: {} } },
         ],
     },
-    { name: "icon", selector: { icon: { placeholder: icon } } },
+    { name: "icon", selector: { icon: {} }, context: { icon_entity: "entity" } },
     ...computeActionsFormSchema(actions),
-]);
+];
 
 @customElement(computeChipEditorComponentName("alarm-control-panel"))
 export class AlarmControlPanelChipEditor extends LitElement implements LovelaceChipEditor {
@@ -53,16 +51,11 @@ export class AlarmControlPanelChipEditor extends LitElement implements LovelaceC
             return nothing;
         }
 
-        const entityState = this._config.entity ? this.hass.states[this._config.entity] : undefined;
-        const entityIcon = entityState ? stateIcon(entityState) : undefined;
-        const icon = this._config.icon || entityIcon;
-        const schema = computeSchema(icon);
-
         return html`
             <ha-form
                 .hass=${this.hass}
                 .data=${this._config}
-                .schema=${schema}
+                .schema=${SCHEMA}
                 .computeLabel=${this._computeLabel}
                 @value-changed=${this._valueChanged}
             ></ha-form>

diff --git a/src/cards/chips-card/chips/alarm-control-panel-chip.ts b/src/cards/chips-card/chips/alarm-control-panel-chip.ts
@@ -1,3 +1,4 @@
+import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -13,7 +14,6 @@ import {
 } from "../../../ha";
 import { computeRgbColor } from "../../../utils/colors";
 import { animation } from "../../../utils/entity-styles";
-import { stateIcon } from "../../../utils/icons/state-icon";
 import { computeInfoDisplay } from "../../../utils/info";
 import {
     computeChipComponentName,
@@ -27,7 +27,6 @@ import {
 import { LovelaceChipEditor } from "../../../utils/lovelace/types";
 import { ALARM_CONTROl_PANEL_ENTITY_DOMAINS } from "../../alarm-control-panel-card/const";
 import { getStateColor, shouldPulse } from "../../alarm-control-panel-card/utils";
-import { HassEntity } from "home-assistant-js-websocket";
 
 @customElement(computeChipComponentName("alarm-control-panel"))
 export class AlarmControlPanelChip extends LitElement implements LovelaceChip {
@@ -74,16 +73,16 @@ export class AlarmControlPanelChip extends LitElement implements LovelaceChip {
         }
 
         const name = this._config.name || stateObj.attributes.friendly_name || "";
-        const icon = this._config.icon || stateIcon(stateObj);
+        const icon = this._config.icon;
         const iconColor = getStateColor(stateObj.state);
         const iconPulse = shouldPulse(stateObj.state);
 
         const stateDisplay = computeStateDisplay(
             this.hass.localize,
             stateObj,
             this.hass.locale,
-            this.hass.entities,
-            this.hass.connection.haVersion
+            this.hass.config,
+            this.hass.entities
         );
 
         const iconStyle = {};
@@ -111,11 +110,12 @@ export class AlarmControlPanelChip extends LitElement implements LovelaceChip {
                     hasDoubleClick: hasAction(this._config.double_tap_action),
                 })}
             >
-                <ha-icon
+                <ha-state-icon
+                    .state=${stateObj}
                     .icon=${icon}
                     style=${styleMap(iconStyle)}
                     class=${classMap({ pulse: iconPulse })}
-                ></ha-icon>
+                ></ha-state-icon>
                 ${content ? html`<span>${content}</span>` : nothing}
             </mushroom-chip>
         `;
@@ -127,10 +127,10 @@ export class AlarmControlPanelChip extends LitElement implements LovelaceChip {
             mushroom-chip {
                 cursor: pointer;
             }
-            ha-icon {
+            ha-state-icon {
                 color: var(--color);
             }
-            ha-icon.pulse {
+            ha-state-icon.pulse {
                 animation: 1s ease 0s infinite normal none running pulse;
             }
             ${animation.pulse}