custom-card-helpers 2.0.0 → 2.1.0

package/.github/dependabot.yml

@@ -0,0 +1,13 @@
+# Source - https://stackoverflow.com/a/66819358
+# Posted by Johnny, modified by community. See post 'Timeline' for change history
+# Retrieved 2026-02-27, License - CC BY-SA 4.0
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    # Always increase the version requirement
+    # to match the new version.
+    versioning-strategy: increase

package/.github/workflows/claude-code-review.yml

@@ -0,0 +1,44 @@
+name: Claude Code Review
+
+on:
+  pull_request:
+    types: [opened, synchronize, ready_for_review, reopened]
+    # Optional: Only run on specific file changes
+    # paths:
+    #   - "src/**/*.ts"
+    #   - "src/**/*.tsx"
+    #   - "src/**/*.js"
+    #   - "src/**/*.jsx"
+
+jobs:
+  claude-review:
+    # Optional: Filter by PR author
+    # if: |
+    #   github.event.pull_request.user.login == 'external-contributor' ||
+    #   github.event.pull_request.user.login == 'new-developer' ||
+    #   github.event.pull_request.author_association == 'FIRST_TIME_CONTRIBUTOR'
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code Review
+        id: claude-review
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          plugin_marketplaces: 'https://github.com/anthropics/claude-code.git'
+          plugins: 'code-review@claude-code-plugins'
+          prompt: '/code-review:code-review ${{ github.repository }}/pull/${{ github.event.pull_request.number }}'
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://code.claude.com/docs/en/cli-reference for available options
+

package/.github/workflows/claude.yml

@@ -0,0 +1,50 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+
+          # This is an optional setting that allows Claude to read CI results on PRs
+          additional_permissions: |
+            actions: read
+
+          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
+          # prompt: 'Update the pull request description to include a summary of changes.'
+
+          # Optional: Add claude_args to customize behavior and configuration
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://code.claude.com/docs/en/cli-reference for available options
+          # claude_args: '--allowed-tools Bash(gh pr *)'
+

package/.github/workflows/release.yml

@@ -27,6 +27,10 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Bump version to match release tag
+        if: github.event_name == 'release'
+        run: npm version ${GITHUB_REF_NAME#v} --no-git-tag-version
+
       - name: Build
         run: npm run build
 

package/.github/workflows/test.yml

@@ -7,6 +7,7 @@ on:
   pull_request:
     branches:
       - master
+  workflow_dispatch :
 
 jobs:
   build:

package/dist/compute-name.d.ts

@@ -1,2 +1,9 @@
 import { HassEntity } from "home-assistant-js-websocket";
+/**
+ * @deprecated Reads `friendly_name`, which Home Assistant is moving away from -
+ * it now always includes the device name, so this duplicates context the
+ * surrounding UI already shows. Prefer `hass.formatEntityName(stateObj, name)`
+ * on HA 2026.4 and later, which resolves the name from the entity's registry
+ * context and lets users choose which parts to include.
+ */
 export declare const computeName: (stateObj: HassEntity) => string;

package/dist/compute-state-display.d.ts

@@ -1,4 +1,3 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { LocalizeFunc } from "./translations/localize";
-import { FrontendLocaleData } from "./types";
+import { FrontendLocaleData, LocalizeFunc } from "./types";
 export declare const computeStateDisplay: (localize: LocalizeFunc, stateObj: HassEntity, locale: FrontendLocaleData, state?: string) => string;

package/dist/datetime/duration_to_seconds.d.ts

@@ -3,4 +3,4 @@
  * @param duration hh:mm:ss formated duration
  * @returns duration in seconds
  */
-export default function durationToSeconds(duration: string): number;
+export declare function durationToSeconds(duration: string): number;

package/dist/datetime/seconds_to_duration.d.ts

@@ -1 +1 @@
-export default function secondsToDuration(d: number): string | null;
+export declare function secondsToDuration(d: number): string | null;

package/dist/datetime/select_unit.d.ts

@@ -0,0 +1,8 @@
+export type Unit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
+export declare function selectUnit(from: Date | number, to?: Date | number, thresholds?: Partial<Thresholds>): {
+    value: number;
+    unit: Unit;
+};
+type Thresholds = Record<'second' | 'minute' | 'hour' | 'day', number>;
+export declare const DEFAULT_THRESHOLDS: Thresholds;
+export {};

package/dist/get-lovelace.d.ts

@@ -1 +1,5 @@
-export declare const getLovelace: () => any;
+export declare const getLovelace: () => {
+    [key: string]: any;
+    config: import("./types").LovelaceConfig;
+    current_view: number;
+} | null;

package/dist/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var intlUtils = require('@formatjs/intl-utils');
-
 /**
  * Apply a theme to an element by setting the CSS variables on it.
  *
@@ -87,6 +85,13 @@ const computeIcon = (stateObj, icon) => {
     return DOMAIN_ICONS[domain] || "mdi:bookmark";
 };
 
+/**
+ * @deprecated Reads `friendly_name`, which Home Assistant is moving away from -
+ * it now always includes the device name, so this duplicates context the
+ * surrounding UI already shows. Prefer `hass.formatEntityName(stateObj, name)`
+ * on HA 2026.4 and later, which resolves the name from the entity's registry
+ * context and lets users choose which parts to include.
+ */
 const computeName = (stateObj) => stateObj.attributes.friendly_name || stateObj.entity_id;
 
 function computeRTL(hass) {
@@ -137,6 +142,30 @@ exports.TimeFormat = void 0;
     TimeFormat["am_pm"] = "12";
     TimeFormat["twenty_four"] = "24";
 })(exports.TimeFormat || (exports.TimeFormat = {}));
+exports.TimeZone = void 0;
+(function (TimeZone) {
+    TimeZone["local"] = "local";
+    TimeZone["server"] = "server";
+})(exports.TimeZone || (exports.TimeZone = {}));
+exports.DateFormat = void 0;
+(function (DateFormat) {
+    DateFormat["language"] = "language";
+    DateFormat["system"] = "system";
+    DateFormat["DMY"] = "DMY";
+    DateFormat["MDY"] = "MDY";
+    DateFormat["YMD"] = "YMD";
+})(exports.DateFormat || (exports.DateFormat = {}));
+exports.FirstWeekday = void 0;
+(function (FirstWeekday) {
+    FirstWeekday["language"] = "language";
+    FirstWeekday["monday"] = "monday";
+    FirstWeekday["tuesday"] = "tuesday";
+    FirstWeekday["wednesday"] = "wednesday";
+    FirstWeekday["thursday"] = "thursday";
+    FirstWeekday["friday"] = "friday";
+    FirstWeekday["saturday"] = "saturday";
+    FirstWeekday["sunday"] = "sunday";
+})(exports.FirstWeekday || (exports.FirstWeekday = {}));
 
 // REF: https://github.com/home-assistant/frontend/blob/dev/src/common/datetime/use_am_pm.ts
 /**
@@ -735,6 +764,74 @@ function durationToSeconds(duration) {
     return parts[0] * 3600 + parts[1] * 60 + parts[2];
 }
 
+/*
+ * selectUnit() taken from @formatjs/intl-units 3.8.4.
+ *
+ */
+const MS_PER_SECOND = 1e3;
+const SECS_PER_MIN = 60;
+const SECS_PER_HOUR = SECS_PER_MIN * 60;
+const SECS_PER_DAY = SECS_PER_HOUR * 24;
+const SECS_PER_WEEK = SECS_PER_DAY * 7;
+function selectUnit(from, to = Date.now(), thresholds = {}) {
+    const resolvedThresholds = Object.assign(Object.assign({}, DEFAULT_THRESHOLDS), (thresholds || {}));
+    const secs = (+from - +to) / MS_PER_SECOND;
+    if (Math.abs(secs) < resolvedThresholds.second) {
+        return {
+            value: Math.round(secs),
+            unit: 'second',
+        };
+    }
+    const mins = secs / SECS_PER_MIN;
+    if (Math.abs(mins) < resolvedThresholds.minute) {
+        return {
+            value: Math.round(mins),
+            unit: 'minute',
+        };
+    }
+    const hours = secs / SECS_PER_HOUR;
+    if (Math.abs(hours) < resolvedThresholds.hour) {
+        return {
+            value: Math.round(hours),
+            unit: 'hour',
+        };
+    }
+    const days = secs / SECS_PER_DAY;
+    if (Math.abs(days) < resolvedThresholds.day) {
+        return {
+            value: Math.round(days),
+            unit: 'day',
+        };
+    }
+    const fromDate = new Date(from);
+    const toDate = new Date(to);
+    const years = fromDate.getFullYear() - toDate.getFullYear();
+    if (Math.round(Math.abs(years)) > 0) {
+        return {
+            value: Math.round(years),
+            unit: 'year',
+        };
+    }
+    const months = years * 12 + fromDate.getMonth() - toDate.getMonth();
+    if (Math.round(Math.abs(months)) > 0) {
+        return {
+            value: Math.round(months),
+            unit: 'month',
+        };
+    }
+    const weeks = secs / SECS_PER_WEEK;
+    return {
+        value: Math.round(weeks),
+        unit: 'week',
+    };
+}
+const DEFAULT_THRESHOLDS = {
+    second: 45, // seconds to minute
+    minute: 45, // minutes to hour
+    hour: 22, // hour to day
+    day: 5, // day to week
+};
+
 //REF: https://github.com/home-assistant/frontend/blob/dev/src/common/datetime/relative_time.ts
 const formatRelTimeMem = (locale) => new Intl.RelativeTimeFormat(locale.language, { numeric: "auto" });
 /**
@@ -743,7 +840,7 @@ const formatRelTimeMem = (locale) => new Intl.RelativeTimeFormat(locale.language
  * Example output: 5 minutes ago, in 3 days.
  */
 const relativeTime = (from, locale, to, includeTense = true) => {
-    const diff = intlUtils.selectUnit(from, to);
+    const diff = selectUnit(from, to);
     if (includeTense) {
         return formatRelTimeMem(locale).format(diff.value, diff.unit);
     }
@@ -754,6 +851,24 @@ const relativeTime = (from, locale, to, includeTense = true) => {
     }).format(Math.abs(diff.value));
 };
 
+//REF: https://github.com/home-assistant/frontend/blob/dev/src/common/datetime/seconds_to_duration.ts
+const leftPad = (num) => (num < 10 ? `0${num}` : num);
+function secondsToDuration(d) {
+    const h = Math.floor(d / 3600);
+    const m = Math.floor((d % 3600) / 60);
+    const s = Math.floor((d % 3600) % 60);
+    if (h > 0) {
+        return `${h}:${leftPad(m)}:${leftPad(s)}`;
+    }
+    if (m > 0) {
+        return `${m}:${leftPad(s)}`;
+    }
+    if (s > 0) {
+        return "" + s;
+    }
+    return null;
+}
+
 function timerTimeRemaining(stateObj) {
     let timeRemaining = durationToSeconds(stateObj.attributes.remaining);
     if (stateObj.state === "active") {
@@ -1041,18 +1156,15 @@ const formatTimestamp = (timestamp) => {
 };
 
 const getLovelace = () => {
-    let root = document.querySelector('home-assistant');
-    root = root && root.shadowRoot;
-    root = root && root.querySelector('home-assistant-main');
-    root = root && root.shadowRoot;
-    root = root && root.querySelector('app-drawer-layout partial-panel-resolver');
-    root = root && root.shadowRoot || root;
-    root = root && root.querySelector('ha-panel-lovelace');
-    root = root && root.shadowRoot;
-    root = root && root.querySelector('hui-root');
-    if (root) {
-        const ll = root.lovelace;
-        ll.current_view = root.___curView;
+    var _a, _b, _c, _d, _e, _f;
+    const root = (_c = (_b = (_a = document
+        .querySelector("home-assistant")) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("home-assistant-main")) === null || _c === void 0 ? void 0 : _c.shadowRoot;
+    const resolver = (root === null || root === void 0 ? void 0 : root.querySelector("ha-drawer partial-panel-resolver")) ||
+        (root === null || root === void 0 ? void 0 : root.querySelector("app-drawer-layout partial-panel-resolver"));
+    const huiRoot = (_f = (_e = (_d = ((resolver === null || resolver === void 0 ? void 0 : resolver.shadowRoot) || resolver)) === null || _d === void 0 ? void 0 : _d.querySelector("ha-panel-lovelace")) === null || _e === void 0 ? void 0 : _e.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector("hui-root");
+    if (huiRoot) {
+        const ll = huiRoot.lovelace;
+        ll.current_view = huiRoot.___curView;
         return ll;
     }
     return null;
@@ -1090,6 +1202,8 @@ const turnOnOffEntity = (hass, entityId, turnOn = true) => {
     }
     return hass.callService(serviceDomain, service, { entity_id: entityId });
 };
+const turnOnEntity = (hass, entityId) => turnOnOffEntity(hass, entityId, true);
+const turnOffEntity = (hass, entityId) => turnOnOffEntity(hass, entityId, false);
 
 const toggleEntity = (hass, entityId) => {
     const turnOn = STATES_OFF.includes(hass.states[entityId].state);
@@ -1135,13 +1249,21 @@ const handleActionConfig = (node, hass, config, actionConfig) => {
                 forwardHaptic("success");
             }
             break;
+        case "turn_on":
+            turnOnOffEntity(hass, actionConfig.entity || config.entity, true);
+            forwardHaptic("success");
+            break;
+        case "turn_off":
+            turnOnOffEntity(hass, actionConfig.entity || config.entity, false);
+            forwardHaptic("success");
+            break;
         case "call-service": {
             if (!actionConfig.service) {
                 forwardHaptic("failure");
                 return;
             }
             const [domain, service] = actionConfig.service.split(".", 2);
-            hass.callService(domain, service, actionConfig.service_data, actionConfig.target);
+            hass.callService(domain, service, actionConfig.data, actionConfig.target);
             forwardHaptic("success");
             break;
         }
@@ -1226,7 +1348,7 @@ const handleClick = (node, hass, config, hold, dblClick) => {
                 return;
             }
             const [domain, service] = actionConfig.service.split(".", 2);
-            const serviceData = Object.assign({}, actionConfig.service_data);
+            const serviceData = Object.assign({}, actionConfig.data);
             if (serviceData.entity_id === "entity") {
                 serviceData.entity_id = config.entity;
             }
@@ -1271,6 +1393,46 @@ function hasDoubleClick(config) {
     return config !== undefined && config.action !== "none";
 }
 
+/**
+ * Scroll to a specific y coordinate.
+ *
+ * Copied from paper-scroll-header-panel.
+ *
+ * @method scroll
+ * @param {number} top The coordinate to scroll to, along the y-axis.
+ * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
+ */
+function scrollToTarget(element, target) {
+    // the scroll event will trigger _updateScrollState directly,
+    // However, _updateScrollState relies on the previous `scrollTop` to update the states.
+    // Calling _updateScrollState will ensure that the states are synced correctly.
+    const top = 0;
+    const scroller = target;
+    const easingFn = function easeOutQuad(t, b, c, d) {
+        /* eslint-disable no-param-reassign, space-infix-ops, no-mixed-operators */
+        t /= d;
+        return -c * t * (t - 2) + b;
+        /* eslint-enable no-param-reassign, space-infix-ops, no-mixed-operators */
+    };
+    const animationId = Math.random();
+    const duration = 200;
+    const startTime = Date.now();
+    const currentScrollTop = scroller.scrollTop;
+    const deltaScrollTop = top - currentScrollTop;
+    element._currentAnimationId = animationId;
+    (function updateFrame() {
+        const now = Date.now();
+        const elapsedTime = now - startTime;
+        if (elapsedTime > duration) {
+            scroller.scrollTop = top;
+        }
+        else if (element._currentAnimationId === animationId) {
+            scroller.scrollTop = easingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration);
+            requestAnimationFrame(updateFrame.bind(element));
+        }
+    }.call(element));
+}
+
 /** Return an icon representing a binary sensor state. */
 const binarySensorIcon = (state, stateObj) => {
     const is_off = state === "off";
@@ -1333,17 +1495,86 @@ const coverIcon = (state) => {
     const open = state.state !== "closed";
     switch (state.attributes.device_class) {
         case "garage":
-            return open ? "mdi:garage-open" : "mdi:garage";
+            switch (state.state) {
+                case "opening":
+                    return "mdi:arrow-up-box";
+                case "closing":
+                    return "mdi:arrow-down-box";
+                case "closed":
+                    return "mdi:garage";
+                default:
+                    return "mdi:garage-open";
+            }
+        case "gate":
+            switch (state.state) {
+                case "opening":
+                case "closing":
+                    return "mdi:gate-arrow-right";
+                case "closed":
+                    return "mdi:gate";
+                default:
+                    return "mdi:gate-open";
+            }
         case "door":
             return open ? "mdi:door-open" : "mdi:door-closed";
+        case "damper":
+            return open ? "mdi:circle" : "mdi:circle-slice-8";
         case "shutter":
-            return open ? "mdi:window-shutter-open" : "mdi:window-shutter";
+            switch (state.state) {
+                case "opening":
+                    return "mdi:arrow-up-box";
+                case "closing":
+                    return "mdi:arrow-down-box";
+                case "closed":
+                    return "mdi:window-shutter";
+                default:
+                    return "mdi:window-shutter-open";
+            }
+        case "curtain":
+            switch (state.state) {
+                case "opening":
+                    return "mdi:arrow-split-vertical";
+                case "closing":
+                    return "mdi:arrow-collapse-horizontal";
+                case "closed":
+                    return "mdi:curtains-closed";
+                default:
+                    return "mdi:curtains";
+            }
         case "blind":
-            return open ? "mdi:blinds-open" : "mdi:blinds";
+        case "shade":
+            switch (state.state) {
+                case "opening":
+                    return "mdi:arrow-up-box";
+                case "closing":
+                    return "mdi:arrow-down-box";
+                case "closed":
+                    return "mdi:blinds";
+                default:
+                    return "mdi:blinds-open";
+            }
         case "window":
-            return open ? "mdi:window-open" : "mdi:window-closed";
+            switch (state.state) {
+                case "opening":
+                    return "mdi:arrow-up-box";
+                case "closing":
+                    return "mdi:arrow-down-box";
+                case "closed":
+                    return "mdi:window-closed";
+                default:
+                    return "mdi:window-open";
+            }
         default:
-            return domainIcon("cover", state.state);
+            switch (state.state) {
+                case "opening":
+                    return "mdi:arrow-up-box";
+                case "closing":
+                    return "mdi:arrow-down-box";
+                case "closed":
+                    return "mdi:window-closed";
+                default:
+                    return "mdi:window-open";
+            }
     }
 };
 
@@ -1404,7 +1635,7 @@ const inputDateTimeIcon = (state) => {
 };
 
 const domainIcons = {
-    binary_sensor: binarySensorIcon,
+    binary_sensor: (stateObj) => binarySensorIcon(stateObj.state, stateObj),
     cover: coverIcon,
     sensor: sensorIcon,
     input_datetime: inputDateTimeIcon,
@@ -1480,6 +1711,7 @@ exports.createThing = createThing;
 exports.debounce = debounce;
 exports.deepEqual = deepEqual;
 exports.domainIcon = domainIcon;
+exports.durationToSeconds = durationToSeconds;
 exports.evaluateFilter = evaluateFilter;
 exports.fireEvent = fireEvent;
 exports.fixedIcons = fixedIcons;
@@ -1511,9 +1743,13 @@ exports.navigate = navigate;
 exports.numberFormatToLocale = numberFormatToLocale;
 exports.relativeTime = relativeTime;
 exports.round = round;
+exports.scrollToTarget = scrollToTarget;
+exports.secondsToDuration = secondsToDuration;
 exports.stateIcon = stateIcon;
 exports.timerTimeRemaining = timerTimeRemaining;
 exports.toggleEntity = toggleEntity;
+exports.turnOffEntity = turnOffEntity;
+exports.turnOnEntity = turnOnEntity;
 exports.turnOnOffEntities = turnOnOffEntities;
 exports.turnOnOffEntity = turnOnOffEntity;
 //# sourceMappingURL=index.js.map