├── src
    ├── ha
    │   ├── panels
    │   │   ├── config
    │   │   │   └── helpers
    │   │   │   │   └── const.ts
    │   │   └── lovelace
    │   │   │   ├── editor
    │   │   │       ├── process-editor-entities.ts
    │   │   │       ├── types.ts
    │   │   │       └── hui-entities-card-row-editor.ts
    │   │   │   ├── components
    │   │   │       ├── hui-warning.ts
    │   │   │       └── types.ts
    │   │   │   ├── common
    │   │   │       ├── process-config-entities.ts
    │   │   │       ├── evaluate-filter.ts
    │   │   │       └── has-changed.ts
    │   │   │   ├── elements
    │   │   │       └── types.ts
    │   │   │   ├── entity-rows
    │   │   │       └── types.ts
    │   │   │   └── types.ts
    │   ├── data
    │   │   ├── main_window.ts
    │   │   ├── auth.ts
    │   │   ├── lovelace
    │   │   │   └── config
    │   │   │   │   ├── card.ts
    │   │   │   │   └── action.ts
    │   │   ├── image.ts
    │   │   ├── entity.ts
    │   │   ├── device_registry.ts
    │   │   ├── integration.ts
    │   │   ├── ws-themes.ts
    │   │   ├── translation.ts
    │   │   ├── input_select.ts
    │   │   ├── camera.ts
    │   │   └── config_entries.ts
    │   ├── common
    │   │   ├── entity
    │   │   │   ├── compute_domain.ts
    │   │   │   ├── valid_entity_id.ts
    │   │   │   ├── compute_object_id.ts
    │   │   │   ├── supports-feature.ts
    │   │   │   └── compute_state_name.ts
    │   │   ├── string
    │   │   │   ├── strip-diacritics.ts
    │   │   │   ├── compare.ts
    │   │   │   └── filter
    │   │   │   │   ├── sequence-matching.ts
    │   │   │   │   └── char-code.ts
    │   │   ├── number
    │   │   │   ├── round.ts
    │   │   │   └── format_number.ts
    │   │   ├── config
    │   │   │   └── is_component_loaded.ts
    │   │   ├── array
    │   │   │   ├── literal-includes.ts
    │   │   │   └── ensure-array.ts
    │   │   ├── dom
    │   │   │   ├── get_main_window.ts
    │   │   │   ├── fire_event.ts
    │   │   │   └── apply_themes_on_element.ts
    │   │   ├── util
    │   │   │   ├── group-by.ts
    │   │   │   ├── parse-aspect-ratio.ts
    │   │   │   └── time-cache-entity-promise-func.ts
    │   │   ├── color
    │   │   │   ├── lab.ts
    │   │   │   ├── hex.ts
    │   │   │   ├── rgb.ts
    │   │   │   └── convert-color.ts
    │   │   ├── datetime
    │   │   │   ├── use_am_pm.ts
    │   │   │   ├── calc_date.ts
    │   │   │   └── format_time.ts
    │   │   └── const.ts
    │   ├── components
    │   │   ├── ha-base-time-input.ts
    │   │   ├── ha-svg-icon.ts
    │   │   ├── ha-icon-button.ts
    │   │   ├── ha-duration-input.ts
    │   │   ├── ha-list-item.ts
    │   │   ├── ha-alert.ts
    │   │   ├── ha-camera-stream.ts
    │   │   ├── ha-sortable.ts
    │   │   └── ha-textfield.ts
    │   ├── resources
    │   │   ├── sortable.ts
    │   │   ├── home-assistant-logo-svg.ts
    │   │   └── styles-data.ts
    │   └── mixins
    │   │   └── subscribe-mixin.ts
    ├── const.ts
    ├── cards
    │   ├── power-card
    │   │   └── const.ts
    │   └── energy-card
    │   │   ├── const.ts
    │   │   └── energy-elec-flow-card-editor.ts
    ├── energy-sankey.ts
    ├── utils
    │   ├── custom-cards.ts
    │   └── form
    │   │   ├── ha-form.ts
    │   │   └── ha-selector.ts
    ├── types.ts
    ├── shared
    │   └── elec-flow-card-base.ts
    ├── ha-elec-sankey-extra.ts
    ├── translations
    │   ├── ja.json
    │   ├── cs.json
    │   ├── da.json
    │   ├── en.json
    │   ├── de.json
    │   ├── ro.json
    │   ├── it.json
    │   ├── es.json
    │   ├── pt-BR.json
    │   └── fr.json
    ├── localize.ts
    └── ha-elec-sankey.ts
├── .gitignore
├── image.png
├── video.gif
├── hacs.json
├── .github
    ├── workflows
    │   ├── validate.yml
    │   ├── build.yml
    │   └── release.yml
    └── dependabot.yml
├── scripts
    ├── setup.sh
    └── update_package_json_version.sh
├── tsconfig.json
├── .devcontainer
    └── devcontainer.json
├── package.json.template
├── rollup.config.mjs
└── README.md


/src/ha/panels/config/helpers/const.ts:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist/
3 | package.json
4 | 


--------------------------------------------------------------------------------
/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davet2001/energy-sankey/HEAD/image.png


--------------------------------------------------------------------------------
/video.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davet2001/energy-sankey/HEAD/video.gif


--------------------------------------------------------------------------------
/src/ha/data/main_window.ts:
--------------------------------------------------------------------------------
1 | export const MAIN_WINDOW_NAME = "ha-main-window";
2 | 


--------------------------------------------------------------------------------
/src/ha/common/entity/compute_domain.ts:
--------------------------------------------------------------------------------
1 | export const computeDomain = (entityId: string): string =>
2 |   entityId.substr(0, entityId.indexOf("."));
3 | 


--------------------------------------------------------------------------------
/src/ha/common/string/strip-diacritics.ts:
--------------------------------------------------------------------------------
1 | export const stripDiacritics = (str: string) =>
2 |   str.normalize("NFD").replace(/[\u0300-\u036F]/g, "");
3 | 


--------------------------------------------------------------------------------
/hacs.json:
--------------------------------------------------------------------------------
1 | {
2 |     "name": "Energy Sankey Card",
3 |     "render_readme": true,
4 |     "filename": "energy-sankey.js",
5 |     "content_in_root": false
6 | }


--------------------------------------------------------------------------------
/src/ha/common/number/round.ts:
--------------------------------------------------------------------------------
1 | export const round = (value: number, precision = 2): number =>
2 |   Math.round(value * 10 ** precision) / 10 ** precision;
3 | 


--------------------------------------------------------------------------------
/src/ha/common/entity/valid_entity_id.ts:
--------------------------------------------------------------------------------
1 | const validEntityId = /^(\w+)\.(\w+)$/;
2 | 
3 | export const isValidEntityId = (entityId: string) =>
4 |   validEntityId.test(entityId);
5 | 


--------------------------------------------------------------------------------
/src/const.ts:
--------------------------------------------------------------------------------
1 | export const PREFIX_NAME = "energy-sankey";
2 | 
3 | export const GENERIC_LABELS = [
4 |   "appearance",
5 |   "advanced_options",
6 |   "title",
7 |   "max_consumer_branches",
8 | ];
9 | 


--------------------------------------------------------------------------------
/src/ha/common/entity/compute_object_id.ts:
--------------------------------------------------------------------------------
1 | /** Compute the object ID of a state. */
2 | export const computeObjectId = (entityId: string): string =>
3 |   entityId.substr(entityId.indexOf(".") + 1);
4 | 


--------------------------------------------------------------------------------
/src/ha/components/ha-base-time-input.ts:
--------------------------------------------------------------------------------
1 | export interface TimeChangedEvent {
2 |   days?: number;
3 |   hours: number;
4 |   minutes: number;
5 |   seconds: number;
6 |   milliseconds: number;
7 |   amPm?: "AM" | "PM";
8 | }
9 | 


--------------------------------------------------------------------------------
/src/cards/power-card/const.ts:
--------------------------------------------------------------------------------
1 | import { PREFIX_NAME } from "../../const";
2 | 
3 | export const POWER_CARD_NAME = `${PREFIX_NAME}-power-flow-card`;
4 | export const POWER_CARD_EDITOR_NAME = `${POWER_CARD_NAME}-editor`;
5 | 
6 | export const HIDE_CONSUMERS_BELOW_THRESHOLD_W = 20;
7 | 


--------------------------------------------------------------------------------
/src/cards/energy-card/const.ts:
--------------------------------------------------------------------------------
1 | import { PREFIX_NAME } from "../../const";
2 | 
3 | export const ENERGY_CARD_NAME = `${PREFIX_NAME}-energy-elec-flow-card`;
4 | export const ENERGY_CARD_EDITOR_NAME = `${ENERGY_CARD_NAME}-editor`;
5 | 
6 | export const HIDE_CONSUMERS_BELOW_THRESHOLD_KWH = 0.1;
7 | 


--------------------------------------------------------------------------------
/src/ha/common/config/is_component_loaded.ts:
--------------------------------------------------------------------------------
1 | import { HomeAssistant } from "../../types";
2 | 
3 | /** Return if a component is loaded. */
4 | export const isComponentLoaded = (
5 |   hass: HomeAssistant,
6 |   component: string
7 | ): boolean => hass && hass.config.components.includes(component);
8 | 


--------------------------------------------------------------------------------
/src/ha/data/auth.ts:
--------------------------------------------------------------------------------
 1 | import { HomeAssistant } from "../types";
 2 | 
 3 | export interface SignedPath {
 4 |   path: string;
 5 | }
 6 | 
 7 | export const getSignedPath = (
 8 |   hass: HomeAssistant,
 9 |   path: string
10 | ): Promise<SignedPath> => hass.callWS({ type: "auth/sign_path", path });
11 | 
12 | 


--------------------------------------------------------------------------------
/src/ha/data/lovelace/config/card.ts:
--------------------------------------------------------------------------------
 1 | import { LovelaceLayoutOptions } from "../../../panels/lovelace/types";
 2 | 
 3 | export interface LovelaceCardConfig {
 4 |   index?: number;
 5 |   view_index?: number;
 6 |   view_layout?: any;
 7 |   layout_options?: LovelaceLayoutOptions;
 8 |   type: string;
 9 |   [key: string]: any;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/energy-sankey.ts:
--------------------------------------------------------------------------------
1 | import { version } from "../package.json";
2 | import "./cards/energy-card/energy-elec-flow-card";
3 | import "./cards/energy-card/energy-elec-flow-card-editor";
4 | import "./cards/power-card/power-flow-card";
5 | import "./cards/power-card/power-flow-card-editor";
6 | import "./ha-elec-sankey";
7 | 
8 | console.info(`Energy Sankey - ${version}`);
9 | 


--------------------------------------------------------------------------------
/src/ha/common/array/literal-includes.ts:
--------------------------------------------------------------------------------
1 | // Creates a type predicate function for determining if an array literal includes a given value
2 | export const arrayLiteralIncludes =
3 |   <T extends readonly unknown[]>(array: T) =>
4 |   (searchElement: unknown, fromIndex?: number): searchElement is T[number] =>
5 |     array.includes(searchElement as T[number], fromIndex);
6 | 


--------------------------------------------------------------------------------
/src/ha/common/dom/get_main_window.ts:
--------------------------------------------------------------------------------
 1 | import { MAIN_WINDOW_NAME } from "../../data/main_window";
 2 | 
 3 | export const mainWindow = (() => {
 4 |   try {
 5 |     return window.name === MAIN_WINDOW_NAME
 6 |       ? window
 7 |       : parent.name === MAIN_WINDOW_NAME
 8 |         ? parent
 9 |         : top!;
10 |   } catch {
11 |     return window;
12 |   }
13 | })();
14 | 


--------------------------------------------------------------------------------
/src/ha/resources/sortable.ts:
--------------------------------------------------------------------------------
 1 | import type Sortable from "sortablejs";
 2 | import SortableCore, {
 3 |   AutoScroll,
 4 |   OnSpill,
 5 | } from "sortablejs/modular/sortable.core.esm";
 6 | 
 7 | SortableCore.mount(OnSpill);
 8 | SortableCore.mount(new AutoScroll());
 9 | 
10 | export default SortableCore as typeof Sortable;
11 | 
12 | export type { Sortable as SortableInstance };
13 | 


--------------------------------------------------------------------------------
/src/ha/panels/lovelace/editor/process-editor-entities.ts:
--------------------------------------------------------------------------------
 1 | import type { EntityConfig } from "../entity-rows/types";
 2 | 
 3 | export function processEditorEntities(
 4 |   entities: (any | string)[]
 5 | ): EntityConfig[] {
 6 |   return entities.map((entityConf) => {
 7 |     if (typeof entityConf === "string") {
 8 |       return { entity: entityConf };
 9 |     }
10 |     return entityConf;
11 |   });
12 | }
13 | 


--------------------------------------------------------------------------------
/src/ha/common/util/group-by.ts:
--------------------------------------------------------------------------------
 1 | export const groupBy = <T>(
 2 |   list: T[],
 3 |   keySelector: (item: T) => string
 4 | ): { [key: string]: T[] } => {
 5 |   const result = {};
 6 |   for (const item of list) {
 7 |     const key = keySelector(item);
 8 |     if (key in result) {
 9 |       result[key].push(item);
10 |     } else {
11 |       result[key] = [item];
12 |     }
13 |   }
14 |   return result;
15 | };
16 | 


--------------------------------------------------------------------------------
/.github/workflows/validate.yml:
--------------------------------------------------------------------------------
 1 | name: HACS validation
 2 | on:
 3 |     push:
 4 |         branches:
 5 |             - main
 6 | jobs:
 7 |     validate:
 8 |         runs-on: ubuntu-latest
 9 |         steps:
10 |             - name: Checkout
11 |               uses: actions/checkout@v4
12 |             - name: HACS validation
13 |               uses: "hacs/action@main"
14 |               with:
15 |                   category: "plugin"


--------------------------------------------------------------------------------
/scripts/setup.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | # Script to setup node.js ready for card development.
 3 | # So far this has been used inside a homeassistant core vscode devcontainer.
 4 | #
 5 | # After completing setup, use
 6 | #
 7 | # npm run start
 8 | # or
 9 | # npm run build
10 | 
11 | sudo apt update
12 | sudo apt install -y npm
13 | npm cache clean -f
14 | 
15 | scripts/update_package_json_version.sh
16 | npm install -g n
17 | 
18 | 
19 | 


--------------------------------------------------------------------------------
/src/ha/common/color/lab.ts:
--------------------------------------------------------------------------------
 1 | // From https://github.com/gka/chroma.js
 2 | // Copyright (c) 2011-2019, Gregor Aisch
 3 | 
 4 | export const labDarken = (
 5 |   lab: [number, number, number],
 6 |   amount = 1
 7 | ): [number, number, number] => [lab[0] - 18 * amount, lab[1], lab[2]];
 8 | 
 9 | export const labBrighten = (
10 |   lab: [number, number, number],
11 |   amount = 1
12 | ): [number, number, number] => labDarken(lab, -amount);
13 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Build
 2 | on:
 3 |   pull_request:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |       - dev
 8 | jobs:
 9 |   build:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - name: Checkout
13 |         uses: actions/checkout@v4
14 |       - name: Pre-build
15 |         run: scripts/update_package_json_version.sh
16 |       - name: Install
17 |         run: npm ci
18 |       - name: Build
19 |         run: npm run build
20 | 


--------------------------------------------------------------------------------
/src/ha/common/array/ensure-array.ts:
--------------------------------------------------------------------------------
 1 | type NonUndefined<T> = T extends undefined ? never : T;
 2 | 
 3 | export function ensureArray(value: undefined): undefined;
 4 | export function ensureArray<T>(value: T | T[]): NonUndefined<T>[];
 5 | export function ensureArray<T>(value: T | readonly T[]): NonUndefined<T>[];
 6 | export function ensureArray(value) {
 7 |   if (value === undefined || Array.isArray(value)) {
 8 |     return value;
 9 |   }
10 |   return [value];
11 | }
12 | 


--------------------------------------------------------------------------------
/src/ha/panels/lovelace/components/hui-warning.ts:
--------------------------------------------------------------------------------
 1 | import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";
 2 | import { HomeAssistant } from "../../../types";
 3 | 
 4 | export const createEntityNotFoundWarning = (
 5 |   hass: HomeAssistant,
 6 |   entityId: string
 7 | ) =>
 8 |   hass.config.state !== STATE_NOT_RUNNING
 9 |     ? hass.localize("ui.panel.lovelace.warning.entity_not_found", {
10 |         entity: entityId || "[empty]",
11 |       })
12 |     : hass.localize("ui.panel.lovelace.warning.starting");
13 | 
14 | 


--------------------------------------------------------------------------------
/src/ha/common/entity/supports-feature.ts:
--------------------------------------------------------------------------------
 1 | import { HassEntity } from "home-assistant-js-websocket";
 2 | 
 3 | export const supportsFeature = (
 4 |   stateObj: HassEntity,
 5 |   feature: number
 6 | ): boolean => supportsFeatureFromAttributes(stateObj.attributes, feature);
 7 | 
 8 | export const supportsFeatureFromAttributes = (
 9 |   attributes: {
10 |     [key: string]: any;
11 |   },
12 |   feature: number
13 | ): boolean =>
14 |   // eslint-disable-next-line no-bitwise
15 |   (attributes.supported_features! & feature) !== 0;
16 | 


--------------------------------------------------------------------------------
/src/ha/data/image.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   HassEntityAttributeBase,
 3 |   HassEntityBase,
 4 | } from "home-assistant-js-websocket";
 5 | 
 6 | interface ImageEntityAttributes extends HassEntityAttributeBase {
 7 |   access_token: string;
 8 | }
 9 | 
10 | export interface ImageEntity extends HassEntityBase {
11 |   attributes: ImageEntityAttributes;
12 | }
13 | 
14 | export const computeImageUrl = (entity: ImageEntity): string =>
15 |   `/api/image_proxy/${entity.entity_id}?token=${entity.attributes.access_token}&state=${entity.state}`;
16 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for more information:
 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 5 | # https://containers.dev/guide/dependabot
 6 | 
 7 | version: 2
 8 | updates:
 9 |  - package-ecosystem: "devcontainers"
10 |    directory: "/"
11 |    schedule:
12 |      interval: weekly
13 | 


--------------------------------------------------------------------------------
/src/ha/data/entity.ts:
--------------------------------------------------------------------------------
 1 | import { arrayLiteralIncludes } from "../common/array/literal-includes";
 2 | 
 3 | export const UNAVAILABLE = "unavailable";
 4 | export const UNKNOWN = "unknown";
 5 | export const ON = "on";
 6 | export const OFF = "off";
 7 | 
 8 | export const UNAVAILABLE_STATES = [UNAVAILABLE, UNKNOWN] as const;
 9 | export const OFF_STATES = [UNAVAILABLE, UNKNOWN, OFF] as const;
10 | 
11 | export const isUnavailableState = arrayLiteralIncludes(UNAVAILABLE_STATES);
12 | export const isOffState = arrayLiteralIncludes(OFF_STATES);
13 | 


--------------------------------------------------------------------------------
/src/utils/custom-cards.ts:
--------------------------------------------------------------------------------
 1 | import { repository } from "../../package.json";
 2 | 
 3 | interface RegisterCardParams {
 4 |   type: string;
 5 |   name: string;
 6 |   description: string;
 7 | }
 8 | export function registerCustomCard(params: RegisterCardParams) {
 9 |   const windowWithCards = window as unknown as Window & {
10 |     customCards: unknown[];
11 |   };
12 |   windowWithCards.customCards = windowWithCards.customCards || [];
13 | 
14 |   windowWithCards.customCards.push({
15 |     ...params,
16 |     preview: true,
17 |     documentationURL: `${repository.url}/blob/main/README.md`,
18 |   });
19 | 
20 | }


--------------------------------------------------------------------------------
/src/ha/common/entity/compute_state_name.ts:
--------------------------------------------------------------------------------
 1 | import { HassEntity } from "home-assistant-js-websocket";
 2 | import { computeObjectId } from "./compute_object_id";
 3 | 
 4 | export const computeStateNameFromEntityAttributes = (
 5 |   entityId: string,
 6 |   attributes: { [key: string]: any }
 7 | ): string =>
 8 |   attributes.friendly_name === undefined
 9 |     ? computeObjectId(entityId).replace(/_/g, " ")
10 |     : (attributes.friendly_name ?? "").toString();
11 | 
12 | export const computeStateName = (stateObj: HassEntity): string =>
13 |   computeStateNameFromEntityAttributes(stateObj.entity_id, stateObj.attributes);
14 | 


--------------------------------------------------------------------------------
/src/ha/panels/lovelace/components/types.ts:
--------------------------------------------------------------------------------
 1 | import { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 2 | import { Condition } from "../common/validate-condition";
 3 | import { LovelaceElementConfig } from "../elements/types";
 4 | 
 5 | export interface ConditionalBaseConfig extends LovelaceCardConfig {
 6 |   card: LovelaceCardConfig | LovelaceElementConfig;
 7 |   conditions: Condition[];
 8 | }
 9 | 
10 | export const TIMESTAMP_RENDERING_FORMATS = [
11 |   "relative",
12 |   "total",
13 |   "date",
14 |   "time",
15 |   "datetime",
16 | ] as const;
17 | 
18 | export type TimestampRenderingFormat =
19 |   (typeof TIMESTAMP_RENDERING_FORMATS)[number];
20 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | on:
 3 |   push:
 4 |     tags:
 5 |       - "v*.*.*"
 6 | jobs:
 7 |   release:
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - name: Checkout
11 |         uses: actions/checkout@v4
12 |       - name: Pre-build
13 |         run: scripts/update_package_json_version.sh
14 |       - name: Install
15 |         run: npm ci
16 |       - name: Build
17 |         run: npm run build
18 |       - name: Release
19 |         uses: softprops/action-gh-release@v2
20 |         if: startsWith(github.ref, 'refs/tags/')
21 |         with:
22 |           draft: true
23 |           generate_release_notes: true
24 |           files: dist/*.js
25 | 


--------------------------------------------------------------------------------
/src/ha/common/datetime/use_am_pm.ts:
--------------------------------------------------------------------------------
 1 | import memoizeOne from "memoize-one";
 2 | import { FrontendLocaleData, TimeFormat } from "../../data/translation";
 3 | 
 4 | export const useAmPm = memoizeOne((locale: FrontendLocaleData): boolean => {
 5 |   if (
 6 |     locale.time_format === TimeFormat.language ||
 7 |     locale.time_format === TimeFormat.system
 8 |   ) {
 9 |     const testLanguage =
10 |       locale.time_format === TimeFormat.language ? locale.language : undefined;
11 |     const test = new Date("January 1, 2023 22:00:00").toLocaleString(
12 |       testLanguage
13 |     );
14 |     return test.includes("10");
15 |   }
16 | 
17 |   return locale.time_format === TimeFormat.am_pm;
18 | });
19 | 


--------------------------------------------------------------------------------
/src/ha/data/device_registry.ts:
--------------------------------------------------------------------------------
 1 | export interface DeviceRegistryEntry {
 2 |   id: string;
 3 |   config_entries: string[];
 4 |   connections: Array<[string, string]>;
 5 |   identifiers: Array<[string, string]>;
 6 |   manufacturer: string | null;
 7 |   model: string | null;
 8 |   model_id: string | null;
 9 |   name: string | null;
10 |   labels: string[];
11 |   sw_version: string | null;
12 |   hw_version: string | null;
13 |   serial_number: string | null;
14 |   via_device_id: string | null;
15 |   area_id: string | null;
16 |   name_by_user: string | null;
17 |   entry_type: "service" | null;
18 |   disabled_by: "user" | "integration" | "config_entry" | null;
19 |   configuration_url: string | null;
20 | }
21 | 
22 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | import { LovelaceCardConfig } from "./ha/data/lovelace/config/card";
 2 | 
 3 | interface ElecFlowCardConfig extends LovelaceCardConfig {
 4 |   title?: string;
 5 |   hide_small_consumers?: boolean;
 6 |   battery_charge_only_from_generation?: boolean;
 7 | }
 8 | 
 9 | export interface EnergyElecFlowCardConfig extends ElecFlowCardConfig {
10 |   collection_key?: string; // @todo this might not be needed.
11 | }
12 | 
13 | export interface PowerFlowCardConfig extends ElecFlowCardConfig {
14 |   power_from_grid_entity?: string;
15 |   power_to_grid_entity?: string;
16 |   generation_entity?: string;
17 |   independent_grid_in_out?: boolean;
18 |   consumer_entities: {
19 |     entity: string;
20 |     name?: string;
21 |   }[];
22 | }
23 | 


--------------------------------------------------------------------------------
/src/ha/resources/home-assistant-logo-svg.ts:
--------------------------------------------------------------------------------
1 | export const mdiHomeAssistant =
2 |   "m12.151 1.5882c-.3262 0-.6523.1291-.8996.3867l-8.3848 8.7354c-.0619.0644-.1223.1368-.1807.2154-.0588.0789-.1151.1638-.1688.2534-.2593.4325-.4552.9749-.5232 1.4555-.0026.018-.0076.0369-.0094.0548-.0121.0987-.0184.1944-.0184.2857v8.0124a1.2731 1.2731 0 001.2731 1.2731h7.8313l-3.4484-3.593a1.7399 1.7399 0 111.0803-1.125l2.6847 2.7972v-10.248a1.7399 1.7399 0 111.5276-0v7.187l2.6702-2.782a1.7399 1.7399 0 111.0566 1.1505l-3.7269 3.8831v2.7299h8.174a1.2471 1.2471 0 001.2471-1.2471v-8.0375c0-.0912-.0059-.1868-.0184-.2855-.0603-.4935-.2636-1.0617-.5326-1.5105-.0537-.0896-.1101-.1745-.1684-.253-.0588-.079-.1191-.1513-.181-.2158l-8.3848-8.7363c-.2473-.2577-.5735-.3866-.8995-.3864";
3 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "declaration": true,
 4 |         "target": "es2017",
 5 |         "module": "esnext",
 6 |         "moduleResolution": "node",
 7 |         "lib": [
 8 |             "es2017",
 9 |             "dom",
10 |             "dom.iterable"
11 |         ],
12 |         "noEmit": true,
13 |         "noUnusedParameters": true,
14 |         "noImplicitReturns": true,
15 |         "noFallthroughCasesInSwitch": true,
16 |         "strict": true,
17 |         "noImplicitAny": false,
18 |         "skipLibCheck": true,
19 |         "resolveJsonModule": true,
20 |         "experimentalDecorators": true,
21 |         "outDir": "dist",
22 |         "rootDir": "."
23 |     },
24 |     "include": [
25 |         "src/**/*.ts"
26 |     ],
27 |     "exclude": [
28 |         "node_modules"
29 |     ]
30 | }


--------------------------------------------------------------------------------
/src/ha/common/color/hex.ts:
--------------------------------------------------------------------------------
 1 | export const expandHex = (hex: string): string => {
 2 |   hex = hex.replace("#", "");
 3 |   if (hex.length === 6) return hex;
 4 |   let result = "";
 5 |   for (const val of hex) {
 6 |     result += val + val;
 7 |   }
 8 |   return result;
 9 | };
10 | 
11 | // Blend 2 hex colors: c1 is placed over c2, blend is c1's opacity.
12 | export const hexBlend = (c1: string, c2: string, blend = 50): string => {
13 |   let color = "";
14 |   c1 = expandHex(c1);
15 |   c2 = expandHex(c2);
16 |   for (let i = 0; i <= 5; i += 2) {
17 |     const h1 = parseInt(c1.substr(i, 2), 16);
18 |     const h2 = parseInt(c2.substr(i, 2), 16);
19 |     let hex = Math.floor(h2 + (h1 - h2) * (blend / 100)).toString(16);
20 |     while (hex.length < 2) hex = "0" + hex;
21 |     color += hex;
22 |   }
23 |   return `#${color}`;
24 | };
25 | 


--------------------------------------------------------------------------------
/src/shared/elec-flow-card-base.ts:
--------------------------------------------------------------------------------
 1 | import { LitElement } from "lit";
 2 | import { SubscribeMixin } from "../ha/mixins/subscribe-mixin";
 3 | import { setupCustomlocalize } from "../localize";
 4 | import { property } from "lit/decorators";
 5 | import { HomeAssistant } from "../ha/types";
 6 | 
 7 | export class ElecFlowCardBase extends SubscribeMixin(LitElement) {
 8 |   @property({ attribute: false }) public hass!: HomeAssistant;
 9 | 
10 |   private _localizer: (key: string) => string = (key: string): string => {
11 |     return key;
12 |   };
13 | 
14 |   private _localizerIsSetup = false;
15 | 
16 |   protected _localize = (key: string): string => {
17 |     if (!this._localizerIsSetup) {
18 |       this._localizer = setupCustomlocalize(this.hass);
19 |       this._localizerIsSetup = true;
20 |     }
21 |     console.info("[ElecFlowCardBase] Localizing key:", key);
22 |     return this._localizer(key);
23 |   };
24 | }
25 | 


--------------------------------------------------------------------------------
/src/ha/common/util/parse-aspect-ratio.ts:
--------------------------------------------------------------------------------
 1 | // Handle 16x9, 16:9, 1.78x1, 1.78:1, 1.78
 2 | // Ignore everything else
 3 | const parseOrThrow = (num) => {
 4 |   const parsed = parseFloat(num);
 5 |   if (isNaN(parsed)) {
 6 |     throw new Error(`${num} is not a number`);
 7 |   }
 8 |   return parsed;
 9 | };
10 | 
11 | export default function parseAspectRatio(input: string) {
12 |   if (!input) {
13 |     return null;
14 |   }
15 |   try {
16 |     if (input.endsWith("%")) {
17 |       return { w: 100, h: parseOrThrow(input.substr(0, input.length - 1)) };
18 |     }
19 | 
20 |     const arr = input.replace(":", "x").split("x");
21 |     if (arr.length === 0) {
22 |       return null;
23 |     }
24 | 
25 |     return arr.length === 1
26 |       ? { w: parseOrThrow(arr[0]), h: 1 }
27 |       : { w: parseOrThrow(arr[0]), h: parseOrThrow(arr[1]) };
28 |   } catch (err: any) {
29 |     // Ignore the error
30 |   }
31 |   return null;
32 | }
33 | 


--------------------------------------------------------------------------------
/src/ha-elec-sankey-extra.ts:
--------------------------------------------------------------------------------
 1 | import { customElement } from "lit/decorators.js";
 2 | import { HaElecSankey } from "./ha-elec-sankey";
 3 | import { svg, TemplateResult } from "lit";
 4 | import { ElecRoute, renderRect } from "./elec-sankey";
 5 | 
 6 | @customElement("ha-elec-sankey-extra")
 7 | export class HaElecSankeyExtra extends HaElecSankey {
 8 |   static extrasLength = 30;
 9 | 
10 |   // Add your customizations here
11 |   protected _insertExtras(
12 |     _topLeftX: number,
13 |     _topLeftY: number,
14 |     _width: number,
15 |     _color: string,
16 |     _route: ElecRoute
17 |   ): TemplateResult {
18 |     const rect = renderRect(
19 |       0,
20 |       _topLeftY,
21 |       this._getExtrasLength(),
22 |       _width,
23 |       "extra",
24 |       _color
25 |     );
26 |     return svg`
27 |       ${rect}
28 |      `;
29 |   }
30 | }
31 | 
32 | declare global {
33 |   interface HTMLElementTagNameMap {
34 |     "ha-elec-sankey-extra": HaElecSankeyExtra;
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/ha/common/color/rgb.ts:
--------------------------------------------------------------------------------
 1 | export const luminosity = (rgb: [number, number, number]): number => {
 2 |   // http://www.w3.org/TR/WCAG20/#relativeluminancedef
 3 |   const lum: [number, number, number] = [0, 0, 0];
 4 |   for (let i = 0; i < rgb.length; i++) {
 5 |     const chan = rgb[i] / 255;
 6 |     lum[i] = chan <= 0.03928 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
 7 |   }
 8 | 
 9 |   return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
10 | };
11 | 
12 | export const rgbContrast = (
13 |   color1: [number, number, number],
14 |   color2: [number, number, number]
15 | ) => {
16 |   const lum1 = luminosity(color1);
17 |   const lum2 = luminosity(color2);
18 | 
19 |   if (lum1 > lum2) {
20 |     return (lum1 + 0.05) / (lum2 + 0.05);
21 |   }
22 | 
23 |   return (lum2 + 0.05) / (lum1 + 0.05);
24 | };
25 | 
26 | export const getRGBContrastRatio = (
27 |   rgb1: [number, number, number],
28 |   rgb2: [number, number, number]
29 | ) => Math.round((rgbContrast(rgb1, rgb2) + Number.EPSILON) * 100) / 100;
30 | 


--------------------------------------------------------------------------------
/scripts/update_package_json_version.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | # Script to automatically update the version number in package.json based
 4 | # on the latest git tag using `git describe`.
 5 | # Avoids rewriting package.json if there are no changes.
 6 | #
 7 | # Note that this script makes package.json a generated file, based on
 8 | # package.json.template.
 9 | 
10 | PACKAGE_JSON=package.json
11 | PACKAGE_JSON_TEMPLATE=package.json.template
12 | 
13 | version_string=`git describe --tags --dirty=* | sed 's/^v//'`
14 | package_json_new=`jq --arg v "$version_string" '.version = $v' $PACKAGE_JSON_TEMPLATE`
15 | 
16 | if [ -f $PACKAGE_JSON ]; then
17 |   package_json_existing=$(<$PACKAGE_JSON)
18 |   if [[ "$package_json_new" == "$package_json_existing" ]]; then
19 |     #echo "AutoVersion: $PACKAGE_JSON is already up to date with version: $version_string"
20 |     exit 0
21 |   fi
22 | fi
23 | echo "AutoVersion: Updating $PACKAGE_JSON with version: $version_string"
24 | echo "${package_json_new}" > package.json
25 | 
26 | 
27 | 


--------------------------------------------------------------------------------
/src/ha/data/integration.ts:
--------------------------------------------------------------------------------
 1 | export type IntegrationType =
 2 |   | "device"
 3 |   | "helper"
 4 |   | "hub"
 5 |   | "service"
 6 |   | "hardware"
 7 |   | "entity"
 8 |   | "system";
 9 | 
10 | export interface IntegrationManifest {
11 |   is_built_in: boolean;
12 |   domain: string;
13 |   name: string;
14 |   config_flow: boolean;
15 |   documentation: string;
16 |   issue_tracker?: string;
17 |   dependencies?: string[];
18 |   after_dependencies?: string[];
19 |   codeowners?: string[];
20 |   requirements?: string[];
21 |   ssdp?: Array<{ manufacturer?: string; modelName?: string; st?: string }>;
22 |   zeroconf?: string[];
23 |   homekit?: { models: string[] };
24 |   integration_type?: IntegrationType;
25 |   loggers?: string[];
26 |   quality_scale?: "gold" | "internal" | "platinum" | "silver";
27 |   iot_class:
28 |   | "assumed_state"
29 |   | "cloud_polling"
30 |   | "cloud_push"
31 |   | "local_polling"
32 |   | "local_push";
33 |   single_config_entry?: boolean;
34 |   version?: string;
35 | }
36 | 
37 | export const domainToName = (
38 |   domain: string,
39 |   manifest?: IntegrationManifest
40 | ) => manifest?.name || domain;
41 | 


--------------------------------------------------------------------------------
/src/ha/common/string/compare.ts:
--------------------------------------------------------------------------------
 1 | import memoizeOne from "memoize-one";
 2 | 
 3 | const collator = memoizeOne(
 4 |   (language: string | undefined) => new Intl.Collator(language)
 5 | );
 6 | 
 7 | const caseInsensitiveCollator = memoizeOne(
 8 |   (language: string | undefined) =>
 9 |     new Intl.Collator(language, { sensitivity: "accent" })
10 | );
11 | 
12 | const fallbackStringCompare = (a: string, b: string) => {
13 |   if (a < b) {
14 |     return -1;
15 |   }
16 |   if (a > b) {
17 |     return 1;
18 |   }
19 | 
20 |   return 0;
21 | };
22 | 
23 | export const stringCompare = (
24 |   a: string,
25 |   b: string,
26 |   language: string | undefined = undefined
27 | ) => {
28 |   // @ts-ignore
29 |   if (Intl?.Collator) {
30 |     return collator(language).compare(a, b);
31 |   }
32 | 
33 |   return fallbackStringCompare(a, b);
34 | };
35 | 
36 | export const caseInsensitiveStringCompare = (
37 |   a: string,
38 |   b: string,
39 |   language: string | undefined = undefined
40 | ) => {
41 |   // @ts-ignore
42 |   if (Intl?.Collator) {
43 |     return caseInsensitiveCollator(language).compare(a, b);
44 |   }
45 | 
46 |   return fallbackStringCompare(a.toLowerCase(), b.toLowerCase());
47 | };
48 | 


--------------------------------------------------------------------------------
/src/translations/ja.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "card": {
 3 |     "generic": {
 4 |       "other": "その他",
 5 |       "home": "ホーム",
 6 |       "untracked": "追跡外"
 7 |     },
 8 |     "power_sankey": {
 9 |       "live_power_flow": "ライブ電力フロー"
10 |     },
11 |     "energy_sankey": {
12 |       "energy_distribution_today": "今日のエネルギー使用量"
13 |     }
14 |   },
15 |   "editor": {
16 |     "card": {
17 |       "generic": {
18 |         "title": "タイトル",
19 |         "max_consumer_branches": "消費デバイスの最大表示数(0で無制限)",
20 |         "appearance": "外観",
21 |         "advanced_options": "詳細設定"
22 |       },
23 |       "power_sankey": {
24 |         "power_from_grid_entity": "系統からの電力 (任意)",
25 |         "power_to_grid_entity": "系統への電力 (任意)",
26 |         "generation_entity": "発電からの電力 (任意)",
27 |         "hide_small_consumers": "20W以下の消費をグループ化する",
28 |         "invert_battery_flows": "蓄電器の電力は＋で充電を示します",
29 |         "battery_charge_only_from_generation": "蓄電器は発電からの電力でのみ充電する",
30 |         "battery_hint_std": "蓄電器からの放電(入出力をまとめた値、＋は放電を示します)",
31 |         "battery_hint_inverted": "蓄電器への充電 (入出力をまとめた値、＋は充電を示します)",
32 |         "independent_grid_in_out": "充電と放電で異なるセンサーを割り当てる"
33 |       },
34 |       "energy_sankey": {
35 |         "hide_small_consumers": "0.1kWh以下の消費をグループ化する",
36 |         "battery_charge_only_from_generation": "蓄電器は発電からの電力でのみ充電する"
37 |       }
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/ha/data/ws-themes.ts:
--------------------------------------------------------------------------------
 1 | import { Connection, createCollection } from "home-assistant-js-websocket";
 2 | 
 3 | export interface ThemeVars {
 4 |   // Incomplete
 5 |   "primary-color": string;
 6 |   "text-primary-color": string;
 7 |   "accent-color": string;
 8 |   [key: string]: string;
 9 | }
10 | 
11 | export type Theme = ThemeVars & {
12 |   modes?: {
13 |     light?: ThemeVars;
14 |     dark?: ThemeVars;
15 |   };
16 | };
17 | 
18 | export interface Themes {
19 |   default_theme: string;
20 |   default_dark_theme: string | null;
21 |   themes: Record<string, Theme>;
22 |   // Currently effective dark mode. Will never be undefined. If user selected "auto"
23 |   // in theme picker, this property will still contain either true or false based on
24 |   // what has been determined via system preferences and support from the selected theme.
25 |   darkMode: boolean;
26 |   // Currently globally active theme name
27 |   theme: string;
28 | }
29 | 
30 | const fetchThemes = (conn) =>
31 |   conn.sendMessagePromise({
32 |     type: "frontend/get_themes",
33 |   });
34 | 
35 | const subscribeUpdates = (conn, store) =>
36 |   conn.subscribeEvents(
37 |     () => fetchThemes(conn).then((data) => store.setState(data, true)),
38 |     "themes_updated"
39 |   );
40 | 
41 | export const subscribeThemes = (
42 |   conn: Connection,
43 |   onChange: (themes: Themes) => void
44 | ) =>
45 |   createCollection<Themes>(
46 |     "_thm",
47 |     fetchThemes,
48 |     subscribeUpdates,
49 |     conn,
50 |     onChange
51 |   );
52 | 


--------------------------------------------------------------------------------
/src/ha/panels/lovelace/common/process-config-entities.ts:
--------------------------------------------------------------------------------
 1 | // Parse array of entity objects from config
 2 | import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 3 | import { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
 4 | 
 5 | export const processConfigEntities = <
 6 |   T extends EntityConfig | LovelaceRowConfig,
 7 | >(
 8 |   entities: Array<T | string>,
 9 |   checkEntityId = true
10 | ): T[] => {
11 |   if (!entities || !Array.isArray(entities)) {
12 |     throw new Error("Entities need to be an array");
13 |   }
14 | 
15 |   return entities.map((entityConf, index): T => {
16 |     if (
17 |       typeof entityConf === "object" &&
18 |       !Array.isArray(entityConf) &&
19 |       entityConf.type
20 |     ) {
21 |       return entityConf;
22 |     }
23 | 
24 |     let config: T;
25 | 
26 |     if (typeof entityConf === "string") {
27 |       config = { entity: entityConf } as T;
28 |     } else if (typeof entityConf === "object" && !Array.isArray(entityConf)) {
29 |       if (!("entity" in entityConf)) {
30 |         throw new Error(`Object at position ${index} is missing entity field`);
31 |       }
32 |       config = entityConf as T;
33 |     } else {
34 |       throw new Error(`Invalid entity ID at position ${index}`);
35 |     }
36 | 
37 |     if (checkEntityId && !isValidEntityId((config as EntityConfig).entity!)) {
38 |       throw new Error(
39 |         `Invalid entity ID at position ${index}: ${
40 |           (config as EntityConfig).entity
41 |         }`
42 |       );
43 |     }
44 | 
45 |     return config;
46 |   });
47 | };
48 | 


--------------------------------------------------------------------------------
/src/ha/common/util/time-cache-entity-promise-func.ts:
--------------------------------------------------------------------------------
 1 | import { HomeAssistant } from "../../types";
 2 | 
 3 | interface ResultCache<T> {
 4 |   [entityId: string]: Promise<T> | undefined;
 5 | }
 6 | 
 7 | /**
 8 |  * Call a function with result caching per entity.
 9 |  * @param cacheKey key to store the cache on hass object
10 |  * @param cacheTime time to cache the results
11 |  * @param func function to fetch the data
12 |  * @param hass Home Assistant object
13 |  * @param entityId entity to fetch data for
14 |  * @param args extra arguments to pass to the function to fetch the data
15 |  * @returns
16 |  */
17 | export const timeCacheEntityPromiseFunc = async <T>(
18 |   cacheKey: string,
19 |   cacheTime: number,
20 |   func: (hass: HomeAssistant, entityId: string, ...args: any[]) => Promise<T>,
21 |   hass: HomeAssistant,
22 |   entityId: string,
23 |   ...args: any[]
24 | ): Promise<T> => {
25 |   let cache: ResultCache<T> | undefined = (hass as any)[cacheKey];
26 | 
27 |   if (!cache) {
28 |     cache = hass[cacheKey] = {};
29 |   }
30 | 
31 |   const lastResult = cache[entityId];
32 | 
33 |   if (lastResult) {
34 |     return lastResult;
35 |   }
36 | 
37 |   const result = func(hass, entityId, ...args);
38 |   cache[entityId] = result;
39 | 
40 |   result.then(
41 |     // When successful, set timer to clear cache
42 |     () =>
43 |       setTimeout(() => {
44 |         cache![entityId] = undefined;
45 |       }, cacheTime),
46 |     // On failure, clear cache right away
47 |     () => {
48 |       cache![entityId] = undefined;
49 |     }
50 |   );
51 | 
52 |   return result;
53 | };
54 | 


--------------------------------------------------------------------------------
/src/ha/data/translation.ts:
--------------------------------------------------------------------------------
 1 | export enum NumberFormat {
 2 |   language = "language",
 3 |   system = "system",
 4 |   comma_decimal = "comma_decimal",
 5 |   decimal_comma = "decimal_comma",
 6 |   space_comma = "space_comma",
 7 |   none = "none",
 8 | }
 9 | 
10 | export enum TimeFormat {
11 |   language = "language",
12 |   system = "system",
13 |   am_pm = "12",
14 |   twenty_four = "24",
15 | }
16 | 
17 | export enum TimeZone {
18 |   local = "local",
19 |   server = "server",
20 | }
21 | 
22 | export enum DateFormat {
23 |   language = "language",
24 |   system = "system",
25 |   DMY = "DMY",
26 |   MDY = "MDY",
27 |   YMD = "YMD",
28 | }
29 | 
30 | export enum FirstWeekday {
31 |   language = "language",
32 |   monday = "monday",
33 |   tuesday = "tuesday",
34 |   wednesday = "wednesday",
35 |   thursday = "thursday",
36 |   friday = "friday",
37 |   saturday = "saturday",
38 |   sunday = "sunday",
39 | }
40 | 
41 | export interface FrontendLocaleData {
42 |   language: string;
43 |   number_format: NumberFormat;
44 |   time_format: TimeFormat;
45 |   date_format: DateFormat;
46 |   first_weekday: FirstWeekday;
47 |   time_zone: TimeZone;
48 | }
49 | 
50 | declare global {
51 |   interface FrontendUserData {
52 |     language: FrontendLocaleData;
53 |   }
54 | }
55 | 
56 | export type TranslationCategory =
57 |   | "title"
58 |   | "state"
59 |   | "entity"
60 |   | "entity_component"
61 |   | "config"
62 |   | "config_panel"
63 |   | "options"
64 |   | "device_automation"
65 |   | "mfa_setup"
66 |   | "system_health"
67 |   | "device_class"
68 |   | "application_credentials"
69 |   | "issues"
70 |   | "selector";
71 | 


--------------------------------------------------------------------------------
/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
 1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 2 | // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 3 | {
 4 | 	"name": "Energy Sankey Card",
 5 | 	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
 6 | 	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
 7 | 	// Features to add to the dev container. More info: https://containers.dev/features.
 8 | 	// "features": {},
 9 | 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
10 | 	// "forwardPorts": [],
11 | 	// Use 'postCreateCommand' to run commands after the container is created.
12 | 	// "postCreateCommand": "yarn install",
13 | 	// Configure tool-specific properties.
14 | 	"customizations": {
15 | 		"vscode": {
16 | 			"settings": {
17 | 				"files.eol": "\n",
18 | 				"editor.tabSize": 2,
19 | 				"editor.formatOnPaste": false,
20 | 				"editor.formatOnSave": true,
21 | 				"editor.formatOnType": true,
22 | 				"[javascript]": {
23 | 					"editor.defaultFormatter": "esbenp.prettier-vscode"
24 | 				},
25 | 				"[typescript]": {
26 | 					"editor.defaultFormatter": "esbenp.prettier-vscode"
27 | 				},
28 | 				"files.trimTrailingWhitespace": true
29 | 			},
30 | 			// Add the IDs of extensions you want installed when the container is created.
31 | 			"extensions": [
32 | 				"esbenp.prettier-vscode"
33 | 			]
34 | 		}
35 | 	}
36 | 	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
37 | 	// "remoteUser": "root"
38 | }


--------------------------------------------------------------------------------
/src/translations/cs.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "card": {
 3 |     "generic": {
 4 |       "other": "Ostatní",
 5 |       "home": "Domov",
 6 |       "untracked": "Nerozlišeno"
 7 |     },
 8 |     "power_sankey": {
 9 |       "live_power_flow": "Aktuální tok energie"
10 |     },
11 |     "energy_sankey": {
12 |       "energy_distribution_today": "Dnešní distribuce"
13 |     }
14 |   },
15 |   "editor": {
16 |     "card": {
17 |       "generic": {
18 |         "title": "Nadpis",
19 |         "max_consumer_branches": "Maximální počet zařízení (0 pro neomezeno)",
20 |         "appearance": "Zobrazení",
21 |         "advanced_options": "Další nastavení"
22 |       },
23 |       "power_sankey": {
24 |         "power_from_grid_entity": "Import ze sítě (nepovinné)",
25 |         "power_to_grid_entity": "Export do sítě (nepovinné)",
26 |         "generation_entity": "Výroba (nepovinné)",
27 |         "hide_small_consumers": "Nerozlišovat spotřebu pod 20W",
28 |         "invert_battery_flows": "Nabíjení baterie je kladné číslo",
29 |         "battery_charge_only_from_generation": "Baterie se nabíjejí pouze z vyrobené energie",
30 |         "battery_hint_std": "Energie z baterií (kombinované nabíjení/vybíjení, kladná hodnota = vybíjení)",
31 |         "battery_hint_inverted": "Energie do baterií (kombinované nabíjení/vybíjení, kladná hodnota = nabíjení)",
32 |         "independent_grid_in_out": "Samostatné senzory pro import/export do sítě"
33 |       },
34 |       "energy_sankey": {
35 |         "hide_small_consumers": "Nerozlišovat spotřebu pod 0.1kWh",
36 |         "battery_charge_only_from_generation": "Baterie se nabíjejí pouze z vyrobené energie"
37 |       }
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/translations/da.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "card": {
 3 |     "generic": {
 4 |       "other": "Øvrige",
 5 |       "home": "Hjem",
 6 |       "untracked": "Usporede"
 7 |     },
 8 |     "power_sankey": {
 9 |       "live_power_flow": "Aktiv energi"
10 |     },
11 |     "energy_sankey": {
12 |       "energy_distribution_today": "Dagens energi distribution"
13 |     }
14 |   },
15 |   "editor": {
16 |     "card": {
17 |       "generic": {
18 |         "title": "Titel",
19 |         "max_consumer_branches": "Begrænset antal af forbrugssteder (0 for uubegrænset)",
20 |         "appearance": "Udseende",
21 |         "advanced_options": "Avancerede Optioner"
22 |       },
23 |       "power_sankey": {
24 |         "power_from_grid_entity": "Energi fra nettet (optional)",
25 |         "power_to_grid_entity": "Energi til nettet (optional)",
26 |         "generation_entity": "Energi fra produktion (optional)",
27 |         "hide_small_consumers": "Gruppér under 20W",
28 |         "invert_battery_flows": "Batteri flow er positiv ved opladning",
29 |         "battery_charge_only_from_generation": "Batterier kan kun oplade fra produceret energi",
30 |         "battery_hint_std": "Energi fra batteri (En samlet for ind/ud per batteri, positiv = afladning)",
31 |         "battery_hint_inverted": "Energi til batteri (En samlet for ind/ud per batteri, positiv = opladning)",
32 |         "independent_grid_in_out": "Brug seperate sensorer til ind/ud på nettet"
33 |       },
34 |       "energy_sankey": {
35 |         "hide_small_consumers": "Saml forbrug under 0.1kWh",
36 |         "battery_charge_only_from_generation": "Batterier kan kun oplades fra genereret energi"
37 |       }
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/translations/en.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "card": {
 3 |     "generic": {
 4 |       "other": "Other",
 5 |       "home": "Home",
 6 |       "untracked": "Untracked"
 7 |     },
 8 |     "power_sankey": {
 9 |       "live_power_flow": "Live power flow"
10 |     },
11 |     "energy_sankey": {
12 |       "energy_distribution_today": "Energy distribution today"
13 |     }
14 |   },
15 |   "editor": {
16 |     "card": {
17 |       "generic": {
18 |         "title": "Title",
19 |         "max_consumer_branches": "Limit quantity of consumer branches (0 for unlimited)",
20 |         "appearance": "Appearance",
21 |         "advanced_options": "Advanced Options"
22 |       },
23 |       "power_sankey": {
24 |         "power_from_grid_entity": "Power from grid (optional)",
25 |         "power_to_grid_entity": "Power to grid (optional)",
26 |         "generation_entity": "Power from generation (optional)",
27 |         "hide_small_consumers": "Group consumers below 20W",
28 |         "invert_battery_flows": "Battery flows are positive for charging",
29 |         "battery_charge_only_from_generation": "Batteries can only charge from generated power",
30 |         "battery_hint_std": "Power from battery (one combined in/out per battery, positive = discharging)",
31 |         "battery_hint_inverted": "Power to battery (one combined in/out per battery, positive = charging)",
32 |         "independent_grid_in_out": "Use separate sensors for grid in/out"
33 |       },
34 |       "energy_sankey": {
35 |         "hide_small_consumers": "Group consumers below 0.1kWh",
36 |         "battery_charge_only_from_generation": "Batteries can only charge from generated energy"
37 |       }
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/translations/de.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "card": {
 3 |     "generic": {
 4 |       "other": "Andere",
 5 |       "home": "Zuhause",
 6 |       "untracked": "nicht überwacht"
 7 |     },
 8 |     "power_sankey": {
 9 |       "live_power_flow": "Aktueller Leistungsfluss"
10 |     },
11 |     "energy_sankey": {
12 |       "energy_distribution_today": "Heutige Energieaufteilung"
13 |     }
14 |   },
15 |   "editor": {
16 |     "card": {
17 |       "generic": {
18 |         "title": "Titel",
19 |         "max_consumer_branches": "Beschränkung der Anzahl an Verbrauchern (0 für kein Limit)",
20 |         "appearance": "Erscheinungsbild",
21 |         "advanced_options": "Erweiterte Optionen"
22 |       },
23 |       "power_sankey": {
24 |         "power_from_grid_entity": "Netzbezug (optional)",
25 |         "power_to_grid_entity": "Netzeinspeisung (optional)",
26 |         "generation_entity": "Solarleistung (optional)",
27 |         "hide_small_consumers": "Gruppiere Verbraucher unter 20W",
28 |         "invert_battery_flows": "Batteriefluss für Laden ist positiv",
29 |         "battery_charge_only_from_generation": "Batterien werden nur über Solar geladen",
30 |         "battery_hint_std": "Entladeleistung der Batterie (Ein- und Ausgang kombiniert, positiver Wert = Entladen)",
31 |         "battery_hint_inverted": "Ladeleistung der Batterie (Ein- und Ausgang kombiniert, positiver Wert = Laden)",
32 |         "independent_grid_in_out": "Benutze separate Sensoren für Netzbezug/-einspeisung"
33 |       },
34 |       "energy_sankey": {
35 |         "hide_small_consumers": "Gruppiere Verbraucher unter 0.1kWh",
36 |         "battery_charge_only_from_generation": "Batterien werden nur über Solar geladen"
37 |       }
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/translations/ro.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "card": {
 3 |     "generic": {
 4 |       "other": "Altele",
 5 |       "home": "Acasa",
 6 |       "untracked": "Nemonitorizata"
 7 |     },
 8 |     "power_sankey": {
 9 |       "live_power_flow": "Flux Energie in timp real"
10 |     },
11 |     "energy_sankey": {
12 |       "energy_distribution_today": "Distributia Energiei Azi"
13 |     }
14 |   },
15 |   "editor": {
16 |     "card": {
17 |       "generic": {
18 |         "title": "Titlu",
19 |         "max_consumer_branches": "Limiteaza numarul de consumatori (0 pentru nelimitat)",
20 |         "appearance": "Aspect",
21 |         "advanced_options": "Optiuni Avansate"
22 |       },
23 |       "power_sankey": {
24 |         "power_from_grid_entity": "Energie din retea (optional)",
25 |         "power_to_grid_entity": "Energie catre retea (optional)",
26 |         "generation_entity": "Energie produsa solar/generator (optional)",
27 |         "hide_small_consumers": "Grupeaza consumatorii sub 20W",
28 |         "invert_battery_flows": "Bateria are valori pozitive la incarcare",
29 |         "battery_charge_only_from_generation": "Bateriile se incarca doar din energie produsa solar/generator",
30 |         "battery_hint_std": "Energie din baterie (combinata in/out pe baterie, pozitiva = descarcare)",
31 |         "battery_hint_inverted": "Energie catre baterie (combinata in/out pe baterie, pozitiva = incarcare)",
32 |         "independent_grid_in_out": "Foloseste senzori separati pentru retea in/out"
33 |       },
34 |       "energy_sankey": {
35 |         "hide_small_consumers": "Grupeaza consumatorii sub 0.1kWh",
36 |         "battery_charge_only_from_generation": "Bateriile se pot incarca doar din energie produsa"
37 |       }
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/translations/it.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "card": {
 3 |     "generic": {
 4 |       "other": "Altro",
 5 |       "home": "Casa",
 6 |       "untracked": "Non tracciati"
 7 |     },
 8 |     "power_sankey": {
 9 |       "live_power_flow": "Flusso di potenza istantaneo"
10 |     },
11 |     "energy_sankey": {
12 |       "energy_distribution_today": "Distribuzione di energia oggi"
13 |     }
14 |   },
15 |   "editor": {
16 |     "card": {
17 |       "generic": {
18 |         "title": "Titolo",
19 |         "max_consumer_branches": "Limita quantità di rami personalizzati (0 per illimitato)",
20 |         "appearance": "Aspetto",
21 |         "advanced_options": "Opzioni avanzate"
22 |       },
23 |       "power_sankey": {
24 |         "power_from_grid_entity": "Potenza dalla rete (opzionale)",
25 |         "power_to_grid_entity": "Potenza alla rete (opzionale)",
26 |         "generation_entity": "Potenza da generazione (opzionale)",
27 |         "hide_small_consumers": "Raggruppa personalizzati sotto i 20W",
28 |         "invert_battery_flows": "Flussi batteria sono positivi quando in carica",
29 |         "battery_charge_only_from_generation": "Batterie possono essere ricaricate solo da generazione",
30 |         "battery_hint_std": "Potenza da batterie (combinato in/out per batteria, positivo = in scarica)",
31 |         "battery_hint_inverted": "Potenza a batterie (combinato in/out per batteria, positivo = in scarica)",
32 |         "independent_grid_in_out": "Usa sensori separati per rete (in/out)"
33 |       },
34 |       "energy_sankey": {
35 |         "hide_small_consumers": "Raggruppa personalizzati sotto 0.1kWh",
36 |         "battery_charge_only_from_generation": "Batterie possono essere ricaricate solo da generazione"
37 |       }
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/ha/common/datetime/calc_date.ts:
--------------------------------------------------------------------------------
 1 | import { toZonedTime, fromZonedTime } from "date-fns-tz";
 2 | import { HassConfig } from "home-assistant-js-websocket";
 3 | import { FrontendLocaleData, TimeZone } from "../../data/translation";
 4 | 
 5 | const calcZonedDate = (
 6 |   date: Date,
 7 |   tz: string,
 8 |   fn: (date: Date, options?: any) => Date | number | boolean,
 9 |   options?
10 | ) => {
11 |   const inputZoned = toZonedTime(date, tz);
12 |   const fnZoned = fn(inputZoned, options);
13 |   if (fnZoned instanceof Date) {
14 |     return fromZonedTime(fnZoned, tz) as Date;
15 |   }
16 |   return fnZoned;
17 | };
18 | 
19 | export const calcDate = (
20 |   date: Date,
21 |   fn: (date: Date, options?: any) => Date,
22 |   locale: FrontendLocaleData,
23 |   config: HassConfig,
24 |   options?
25 | ) =>
26 |   locale.time_zone === TimeZone.server
27 |     ? (calcZonedDate(date, config.time_zone, fn, options) as Date)
28 |     : fn(date, options);
29 | 
30 | export const calcDateProperty = (
31 |   date: Date,
32 |   fn: (date: Date, options?: any) => boolean | number,
33 |   locale: FrontendLocaleData,
34 |   config: HassConfig,
35 |   options?
36 | ) =>
37 |   locale.time_zone === TimeZone.server
38 |     ? (calcZonedDate(date, config.time_zone, fn, options) as number | boolean)
39 |     : fn(date, options);
40 | 
41 | export const calcDateDifferenceProperty = (
42 |   endDate: Date,
43 |   startDate: Date,
44 |   fn: (date: Date, options?: any) => boolean | number,
45 |   locale: FrontendLocaleData,
46 |   config: HassConfig
47 | ) =>
48 |   calcDateProperty(
49 |     endDate,
50 |     fn,
51 |     locale,
52 |     config,
53 |     locale.time_zone === TimeZone.server
54 |       ? toZonedTime(startDate, config.time_zone)
55 |       : startDate
56 |   );
57 | 


--------------------------------------------------------------------------------
/src/ha/data/input_select.ts:
--------------------------------------------------------------------------------
 1 | import type {
 2 |   HassEntityAttributeBase,
 3 |   HassEntityBase,
 4 | } from "home-assistant-js-websocket";
 5 | import type { HomeAssistant } from "../types";
 6 | 
 7 | interface InputSelectEntityAttributes extends HassEntityAttributeBase {
 8 |   options: string[];
 9 | }
10 | 
11 | export interface InputSelectEntity extends HassEntityBase {
12 |   attributes: InputSelectEntityAttributes;
13 | }
14 | 
15 | export interface InputSelect {
16 |   id: string;
17 |   name: string;
18 |   options: string[];
19 |   icon?: string;
20 |   initial?: string;
21 | }
22 | 
23 | export interface InputSelectMutableParams {
24 |   name: string;
25 |   icon: string;
26 |   initial: string;
27 |   options: string[];
28 | }
29 | 
30 | export const setInputSelectOption = (
31 |   hass: HomeAssistant,
32 |   entity: string,
33 |   option: string
34 | ) =>
35 |   hass.callService("input_select", "select_option", {
36 |     option,
37 |     entity_id: entity,
38 |   });
39 | 
40 | export const fetchInputSelect = (hass: HomeAssistant) =>
41 |   hass.callWS<InputSelect[]>({ type: "input_select/list" });
42 | 
43 | export const createInputSelect = (
44 |   hass: HomeAssistant,
45 |   values: InputSelectMutableParams
46 | ) =>
47 |   hass.callWS<InputSelect>({
48 |     type: "input_select/create",
49 |     ...values,
50 |   });
51 | 
52 | export const updateInputSelect = (
53 |   hass: HomeAssistant,
54 |   id: string,
55 |   updates: Partial<InputSelectMutableParams>
56 | ) =>
57 |   hass.callWS<InputSelect>({
58 |     type: "input_select/update",
59 |     input_select_id: id,
60 |     ...updates,
61 |   });
62 | 
63 | export const deleteInputSelect = (hass: HomeAssistant, id: string) =>
64 |   hass.callWS({
65 |     type: "input_select/delete",
66 |     input_select_id: id,
67 |   });
68 | 


--------------------------------------------------------------------------------
/src/translations/es.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "card": {
 3 |     "generic": {
 4 |       "other": "Otros",
 5 |       "untracked": "Sin seguimiento"
 6 |     },
 7 |     "power_sankey": {
 8 |       "live_power_flow": "Flujo de energía en tiempo real"
 9 |     },
10 |     "energy_sankey": {
11 |       "energy_distribution_today": "Distribución de energía hoy"
12 |     }
13 |   },
14 |   "editor": {
15 |     "card": {
16 |       "generic": {
17 |         "title": "Título",
18 |         "max_consumer_branches": "Limitar cantidad de ramas de consumidores (0 para ilimitado)",
19 |         "appearance": "Apariencia",
20 |         "advanced_options": "Opciones avanzadas"
21 |       },
22 |       "power_sankey": {
23 |         "power_from_grid_entity": "Potencia de la red (opcional)",
24 |         "power_to_grid_entity": "Potencia a la red (opcional)",
25 |         "generation_entity": "Potencia de generación (opcional)",
26 |         "hide_small_consumers": "Agrupar consumidores menores de 20W",
27 |         "invert_battery_flows": "Los flujos de la batería son positivos al cargar",
28 |         "battery_charge_only_from_generation": "Las baterías solo pueden cargarse con energía generada",
29 |         "battery_hint_std": "Potencia desde la batería (una combinación de entrada/salida por batería, positivo = descarga)",
30 |         "battery_hint_inverted": "Potencia hacia la batería (una combinación de entrada/salida por batería, positivo = carga)",
31 |         "independent_grid_in_out": "Utilizar sensores separados para entrada/salida de la red"
32 |       },
33 |       "energy_sankey": {
34 |         "hide_small_consumers": "Agrupar consumidores menores de 0.1 kWh",
35 |         "battery_charge_only_from_generation": "Las baterías solo pueden cargarse con energía generada"
36 |       }
37 |     }
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/translations/pt-BR.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "card": {
 3 |     "generic": {
 4 |       "other": "Outro",
 5 |       "home": "Início",
 6 |       "untracked": "Não rastreado"
 7 |     },
 8 |     "power_sankey": {
 9 |       "live_power_flow": "Fluxo de energia em tempo real"
10 |     },
11 |     "energy_sankey": {
12 |       "energy_distribution_today": "Distribuição de energia hoje"
13 |     }
14 |   },
15 |   "editor": {
16 |     "card": {
17 |       "generic": {
18 |         "title": "Título",
19 |         "max_consumer_branches": "Limite da quantidade de ramificações de consumidores (0 para ilimitado)",
20 |         "appearance": "Aparência",
21 |         "advanced_options": "Opções avançadas"
22 |       },
23 |       "power_sankey": {
24 |         "power_from_grid_entity": "Potência da rede (opcional)",
25 |         "power_to_grid_entity": "Potência para a rede (opcional)",
26 |         "generation_entity": "Potência da geração (opcional)",
27 |         "hide_small_consumers": "Grupo de consumidores abaixo de 20W",
28 |         "invert_battery_flows": "Os fluxos da bateria são positivos ao carregar",
29 |         "battery_charge_only_from_generation": "As baterias só podem ser carregadas com energia gerada",
30 |         "battery_hint_std": "Potência da bateria (uma entrada/saída combinada por bateria, positivo = descarregando)",
31 |         "battery_hint_inverted": "Potência para bateria (uma entrada/saída combinada por bateria, positivo = carregando)",
32 |         "independent_grid_in_out": "Usar sensores separados para entrada/saída da rede"
33 |       },
34 |       "energy_sankey": {
35 |         "hide_small_consumers": "Agrupar consumidores abaixo de 0.1kWh",
36 |         "battery_charge_only_from_generation": "As baterias só podem ser carregadas com energia gerada"
37 |       }
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/translations/fr.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "card": {
 3 |     "generic": {
 4 |       "other": "Autre",
 5 |       "home": "Maison",
 6 |       "untracked": "Non suivi"
 7 |     },
 8 |     "power_sankey": {
 9 |       "live_power_flow": "Flux d'énergie en direct"
10 |     },
11 |     "energy_sankey": {
12 |       "energy_distribution_today": "Répartition de l'énergie aujourd'hui"
13 |     }
14 |   },
15 |   "editor": {
16 |     "card": {
17 |       "generic": {
18 |         "title": "Titre",
19 |         "max_consumer_branches": "Limiter le nombre de consommateur (0 pour illimité)",
20 |         "appearance": "Apparence",
21 |         "advanced_options": "Options avancée"
22 |       },
23 |       "power_sankey": {
24 |         "power_from_grid_entity": "Puissance depuis le réseaux (optionnel)",
25 |         "power_to_grid_entity": "Puissance vers le réseaux (optionnel)",
26 |         "generation_entity": "Puissance depuis les générateur/solaire (optionnel)",
27 |         "hide_small_consumers": "Groupper les consommateurs de moins de 20W",
28 |         "invert_battery_flows": "Le flux de batterie sont positifs pour la charge",
29 |         "battery_charge_only_from_generation": "Les batteries ne peuvent se charger qu'à partir de l'énergie générée",
30 |         "battery_hint_std": "Puissance depuis les batteries (une entrée/sortie combinée par batterie, positive = décharge)",
31 |         "battery_hint_inverted": "Puissance vers les batteries (une entrée/sortie combinée par batterie, positif = charge)",
32 |         "independent_grid_in_out": "Utiliser des capteurs séparés pour l'entrée/sortie du réseau"
33 |       },
34 |       "energy_sankey": {
35 |         "hide_small_consumers": "Regrouper les consommateurs de moins de 0,1 kWh",
36 |         "battery_charge_only_from_generation": "Les batteries ne peuvent se charger qu'à partir de l'énergie générée"
37 |       }
38 |     }
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/ha/data/lovelace/config/action.ts:
--------------------------------------------------------------------------------
 1 | import type { HassServiceTarget } from "home-assistant-js-websocket";
 2 | 
 3 | export interface ToggleActionConfig extends BaseActionConfig {
 4 |   action: "toggle";
 5 | }
 6 | 
 7 | export interface CallServiceActionConfig extends BaseActionConfig {
 8 |   action: "call-service";
 9 |   service: string;
10 |   target?: HassServiceTarget;
11 |   // "service_data" is kept for backwards compatibility. Replaced by "data".
12 |   service_data?: Record<string, unknown>;
13 |   data?: Record<string, unknown>;
14 | }
15 | 
16 | export interface NavigateActionConfig extends BaseActionConfig {
17 |   action: "navigate";
18 |   navigation_path: string;
19 |   navigation_replace?: boolean;
20 | }
21 | 
22 | export interface UrlActionConfig extends BaseActionConfig {
23 |   action: "url";
24 |   url_path: string;
25 | }
26 | 
27 | export interface MoreInfoActionConfig extends BaseActionConfig {
28 |   action: "more-info";
29 | }
30 | 
31 | export interface AssistActionConfig extends BaseActionConfig {
32 |   action: "assist";
33 |   pipeline_id?: string;
34 |   start_listening?: boolean;
35 | }
36 | 
37 | export interface NoActionConfig extends BaseActionConfig {
38 |   action: "none";
39 | }
40 | 
41 | export interface CustomActionConfig extends BaseActionConfig {
42 |   action: "fire-dom-event";
43 | }
44 | 
45 | export interface BaseActionConfig {
46 |   action: string;
47 |   confirmation?: ConfirmationRestrictionConfig;
48 | }
49 | 
50 | export interface ConfirmationRestrictionConfig {
51 |   text?: string;
52 |   exemptions?: RestrictionConfig[];
53 | }
54 | 
55 | export interface RestrictionConfig {
56 |   user: string;
57 | }
58 | 
59 | export type ActionConfig =
60 |   | ToggleActionConfig
61 |   | CallServiceActionConfig
62 |   | NavigateActionConfig
63 |   | UrlActionConfig
64 |   | MoreInfoActionConfig
65 |   | AssistActionConfig
66 |   | NoActionConfig
67 |   | CustomActionConfig;
68 | 


--------------------------------------------------------------------------------
/package.json.template:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "energy-sankey-cards",
 3 |   "version": "0.0.0",
 4 |   "description": "Home Assistant Energy Sankey Cards",
 5 |   "main": "energy-sankey.js",
 6 |   "scripts": {
 7 |     "start": "rollup -c --watch --bundleConfigAsCjs",
 8 |     "build": "rollup -c --bundleConfigAsCjs",
 9 |     "format": "prettier --write ."
10 |   },
11 |   "author": "Dave Thompson",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/davet2001/homeassistant-energy-sankey-card"
15 |   },
16 |   "dependencies": {
17 |     "@material/mwc-icon-button": "^0.27.0",
18 |     "@material/mwc-list": "^0.27.0",
19 |     "@material/mwc-textfield": "^0.27.0",
20 |     "@mdi/js": "^7.4.47",
21 |     "@vaadin/combo-box": "24.5.3",
22 |     "@vaadin/vaadin-themable-mixin": "24.5.3",
23 |     "color-name": "^2.0.0",
24 |     "date-fns": "^4.1.0",
25 |     "date-fns-tz": "^3.2.0",
26 |     "home-assistant-js-websocket": "^9.4.0",
27 |     "memoize-one": "^6.0.0",
28 |     "sortablejs": "^1.15.6"
29 |   },
30 |   "devDependencies": {
31 |     "@rollup/plugin-alias": "^5.1.1",
32 |     "@rollup/plugin-json": "^6.1.0",
33 |     "@rollup/plugin-node-resolve": "^15.3.0",
34 |     "@rollup/plugin-typescript": "^11.1.6",
35 |     "eslint": "^9.6.0",
36 |     "prettier": "^3.3.2",
37 |     "rollup": "^4.18.0",
38 |     "rollup-plugin-serve": "^2.0.3",
39 |     "tslib": "^2.8.0",
40 |     "typescript": "^5.5.3"
41 |   },
42 |   "overrides": {
43 |     "@lit/reactive-element": "1.6.3"
44 |   },
45 |   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
46 |   "resolutions": {
47 |     "@polymer/polymer": "patch:@polymer/polymer@3.5.2#./.yarn/patches/@polymer/polymer/pr-5569.patch",
48 |     "@material/mwc-button@^0.25.3": "^0.27.0",
49 |     "lit": "2.8.0",
50 |     "lit-html": "2.8.0",
51 |     "@fullcalendar/daygrid": "6.1.15",
52 |     "globals": "15.12.0"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/src/ha/components/ha-svg-icon.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   css,
 3 |   CSSResultGroup,
 4 |   LitElement,
 5 |   nothing,
 6 |   svg,
 7 |   SVGTemplateResult,
 8 | } from "lit";
 9 | import { customElement, property } from "lit/decorators.js";
10 | 
11 | @customElement("ha-svg-icon")
12 | export class HaSvgIcon extends LitElement {
13 |   @property() public path?: string;
14 | 
15 |   @property() public secondaryPath?: string;
16 | 
17 |   @property() public viewBox?: string;
18 | 
19 |   protected render(): SVGTemplateResult {
20 |     return svg`
21 |     <svg
22 |       viewBox=${this.viewBox || "0 0 24 24"}
23 |       preserveAspectRatio="xMidYMid meet"
24 |       focusable="false"
25 |       role="img"
26 |       aria-hidden="true"
27 |     >
28 |       <g>
29 |         ${
30 |           this.path
31 |             ? svg`<path class="primary-path" d=${this.path}></path>`
32 |             : nothing
33 |         }
34 |         ${
35 |           this.secondaryPath
36 |             ? svg`<path class="secondary-path" d=${this.secondaryPath}></path>`
37 |             : nothing
38 |         }
39 |       </g>
40 |     </svg>`;
41 |   }
42 | 
43 |   static get styles(): CSSResultGroup {
44 |     return css`
45 |       :host {
46 |         display: var(--ha-icon-display, inline-flex);
47 |         align-items: center;
48 |         justify-content: center;
49 |         position: relative;
50 |         vertical-align: middle;
51 |         fill: var(--icon-primary-color, currentcolor);
52 |         width: var(--mdc-icon-size, 24px);
53 |         height: var(--mdc-icon-size, 24px);
54 |       }
55 |       svg {
56 |         width: 100%;
57 |         height: 100%;
58 |         pointer-events: none;
59 |         display: block;
60 |       }
61 |       path.primary-path {
62 |         opacity: var(--icon-primary-opactity, 1);
63 |       }
64 |       path.secondary-path {
65 |         fill: var(--icon-secondary-color, currentcolor);
66 |         opacity: var(--icon-secondary-opactity, 0.5);
67 |       }
68 |     `;
69 |   }
70 | }
71 | declare global {
72 |   interface HTMLElementTagNameMap {
73 |     "ha-svg-icon": HaSvgIcon;
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/ha/components/ha-icon-button.ts:
--------------------------------------------------------------------------------
 1 | import type { IconButton } from "@material/mwc-icon-button";
 2 | import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 3 | import { customElement, property, query } from "lit/decorators.js";
 4 | import { ifDefined } from "lit/directives/if-defined.js";
 5 | 
 6 | @customElement("ha-icon-button")
 7 | export class HaIconButton extends LitElement {
 8 |   @property({ type: Boolean, reflect: true }) disabled = false;
 9 | 
10 |   // SVG icon path (if you need a non SVG icon instead, use the provided slot to pass an <ha-icon> in)
11 |   @property({ type: String }) path?: string;
12 | 
13 |   // Label that is used for ARIA support and as tooltip
14 |   @property({ type: String }) label?: string;
15 | 
16 |   // These should always be set as properties, not attributes,
17 |   // so that only the <button> element gets the attribute
18 |   @property({ type: String, attribute: "aria-haspopup" })
19 |   override ariaHasPopup!: IconButton["ariaHasPopup"];
20 | 
21 |   @property({ type: Boolean }) hideTitle = false;
22 | 
23 |   @query("mwc-icon-button", true) private _button?: IconButton;
24 | 
25 |   public override focus() {
26 |     this._button?.focus();
27 |   }
28 | 
29 |   static shadowRootOptions: ShadowRootInit = {
30 |     mode: "open",
31 |     delegatesFocus: true,
32 |   };
33 | 
34 |   protected render(): TemplateResult {
35 |     return html`
36 |       <mwc-icon-button
37 |         aria-label=${ifDefined(this.label)}
38 |         title=${ifDefined(this.hideTitle ? undefined : this.label)}
39 |         aria-haspopup=${ifDefined(this.ariaHasPopup)}
40 |         .disabled=${this.disabled}
41 |       >
42 |         ${this.path
43 |           ? html`<ha-svg-icon .path=${this.path}></ha-svg-icon>`
44 |           : html`<slot></slot>`}
45 |       </mwc-icon-button>
46 |     `;
47 |   }
48 | 
49 |   static get styles(): CSSResultGroup {
50 |     return css`
51 |       :host {
52 |         display: inline-block;
53 |         outline: none;
54 |       }
55 |       :host([disabled]) {
56 |         pointer-events: none;
57 |       }
58 |       mwc-icon-button {
59 |         --mdc-theme-on-primary: currentColor;
60 |         --mdc-theme-text-disabled-on-light: var(--disabled-text-color);
61 |       }
62 |     `;
63 |   }
64 | }
65 | 
66 | declare global {
67 |   interface HTMLElementTagNameMap {
68 |     "ha-icon-button": HaIconButton;
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/src/ha/mixins/subscribe-mixin.ts:
--------------------------------------------------------------------------------
 1 | import { UnsubscribeFunc } from "home-assistant-js-websocket";
 2 | import { PropertyValues, ReactiveElement } from "lit";
 3 | import { property } from "lit/decorators.js";
 4 | import { Constructor, HomeAssistant } from "../types";
 5 | 
 6 | export interface HassSubscribeElement {
 7 |   hassSubscribe(): UnsubscribeFunc[];
 8 | }
 9 | 
10 | export const SubscribeMixin = <T extends Constructor<ReactiveElement>>(
11 |   superClass: T
12 | ) => {
13 |   class SubscribeClass extends superClass {
14 |     @property({ attribute: false }) public hass?: HomeAssistant;
15 | 
16 |     // we wait with subscribing till these properties are set on the host element
17 |     protected hassSubscribeRequiredHostProps?: string[];
18 | 
19 |     private __unsubs?: Array<UnsubscribeFunc | Promise<UnsubscribeFunc>>;
20 | 
21 |     public connectedCallback() {
22 |       super.connectedCallback();
23 |       this.__checkSubscribed();
24 |     }
25 | 
26 |     public disconnectedCallback() {
27 |       super.disconnectedCallback();
28 |       if (this.__unsubs) {
29 |         while (this.__unsubs.length) {
30 |           const unsub = this.__unsubs.pop()!;
31 |           if (unsub instanceof Promise) {
32 |             unsub.then((unsubFunc) => unsubFunc());
33 |           } else {
34 |             unsub();
35 |           }
36 |         }
37 |         this.__unsubs = undefined;
38 |       }
39 |     }
40 | 
41 |     protected updated(changedProps: PropertyValues) {
42 |       super.updated(changedProps);
43 |       if (changedProps.has("hass")) {
44 |         this.__checkSubscribed();
45 |         return;
46 |       }
47 |       if (!this.hassSubscribeRequiredHostProps) {
48 |         return;
49 |       }
50 |       for (const key of changedProps.keys()) {
51 |         if (this.hassSubscribeRequiredHostProps.includes(key as string)) {
52 |           this.__checkSubscribed();
53 |           return;
54 |         }
55 |       }
56 |     }
57 | 
58 |     protected hassSubscribe(): Array<
59 |       UnsubscribeFunc | Promise<UnsubscribeFunc>
60 |     > {
61 |       return [];
62 |     }
63 | 
64 |     private __checkSubscribed(): void {
65 |       if (
66 |         this.__unsubs !== undefined ||
67 |         !(this as unknown as Element).isConnected ||
68 |         this.hass === undefined ||
69 |         this.hassSubscribeRequiredHostProps?.some(
70 |           (prop) => this[prop] === undefined
71 |         )
72 |       ) {
73 |         return;
74 |       }
75 |       this.__unsubs = this.hassSubscribe();
76 |     }
77 |   }
78 |   return SubscribeClass;
79 | };
80 | 


--------------------------------------------------------------------------------
/rollup.config.mjs:
--------------------------------------------------------------------------------
 1 | // rollup.config.mjs
 2 | import json from "@rollup/plugin-json";
 3 | import nodeResolve from "@rollup/plugin-node-resolve";
 4 | import typescript from "@rollup/plugin-typescript";
 5 | import alias from "@rollup/plugin-alias";
 6 | import { execSync } from "child_process";
 7 | 
 8 | const autoGitPackageVersionPlugin = {
 9 |   name: "auto-git-package-version",
10 | 
11 |   buildStart() {
12 |     try {
13 |       execSync("scripts/update_package_json_version.sh", {
14 |         stdio: "inherit",
15 |         cwd: process.cwd(),
16 |       });
17 |     } catch (error) {
18 |       console.error("auto-git-package-version script failed:", error.message);
19 |       throw error;
20 |     }
21 |   },
22 | };
23 | 
24 | const plugins = [
25 |   autoGitPackageVersionPlugin,
26 |   typescript({
27 |     declaration: false,
28 |   }),
29 |   nodeResolve(),
30 |   json(),
31 |   alias({
32 |     entries: {
33 |       // "lit/static-html$": "lit/static-html.js",
34 |       "lit/decorators": "lit/decorators.js",
35 |       // "lit/directive$": "lit/directive.js",
36 |       // "lit/directives/until$": "lit/directives/until.js",
37 |       // "lit/directives/class-map$": "lit/directives/class-map.js",
38 |       // "lit/directives/style-map$": "lit/directives/style-map.js",
39 |       "lit/directives/if-defined": "lit/directives/if-defined.js",
40 |       // "lit/directives/guard$": "lit/directives/guard.js",
41 |       // "lit/directives/cache$": "lit/directives/cache.js",
42 |       "lit/directives/repeat": "lit/directives/repeat.js",
43 |       // "lit/directives/live$": "lit/directives/live.js",
44 |       // "lit/directives/keyed$": "lit/directives/keyed.js",
45 |       // "lit/polyfill-support$": "lit/polyfill-support.js",
46 |       // "@lit-labs/virtualizer/layouts/grid":
47 |       //   "@lit-labs/virtualizer/layouts/grid.js",
48 |       // "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver":
49 |       //   "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
50 |       // "@lit-labs/observers/resize-controller":
51 |       //   "@lit-labs/observers/resize-controller.js",
52 |     },
53 |   }),
54 | ];
55 | 
56 | export default {
57 |   input: "src/energy-sankey.ts",
58 |   output: {
59 |     dir: "dist",
60 |     format: "es",
61 |     inlineDynamicImports: true,
62 |   },
63 |   plugins,
64 |   moduleContext: (id) => {
65 |     const thisAsWindowForModules = [
66 |       "node_modules/@formatjs/intl-utils/lib/src/diff.js",
67 |       "node_modules/@formatjs/intl-utils/lib/src/resolve-locale.js",
68 |     ];
69 |     if (thisAsWindowForModules.some((id_) => id.trimRight().endsWith(id_))) {
70 |       return "window";
71 |     }
72 |   },
73 | };
74 | 


--------------------------------------------------------------------------------
/src/ha/panels/lovelace/elements/types.ts:
--------------------------------------------------------------------------------
 1 | import { ActionConfig } from "../../../data/lovelace/config/action";
 2 | import { HomeAssistant } from "../../../types";
 3 | import { Condition } from "../common/validate-condition";
 4 | import { HuiImage } from "../components/hui-image";
 5 | 
 6 | interface LovelaceElementConfigBase {
 7 |   type: string;
 8 |   style: Record<string, string>;
 9 | }
10 | 
11 | export type LovelaceElementConfig =
12 |   | ConditionalElementConfig
13 |   | IconElementConfig
14 |   | ImageElementConfig
15 |   | ServiceButtonElementConfig
16 |   | StateBadgeElementConfig
17 |   | StateIconElementConfig
18 |   | StateLabelElementConfig;
19 | 
20 | export interface LovelaceElement extends HTMLElement {
21 |   hass?: HomeAssistant;
22 |   setConfig(config: LovelaceElementConfig): void;
23 | }
24 | 
25 | export interface ConditionalElementConfig extends LovelaceElementConfigBase {
26 |   conditions: Condition[];
27 |   elements: LovelaceElementConfigBase[];
28 | }
29 | 
30 | export interface IconElementConfig extends LovelaceElementConfigBase {
31 |   entity?: string;
32 |   name?: string;
33 |   tap_action?: ActionConfig;
34 |   hold_action?: ActionConfig;
35 |   double_tap_action?: ActionConfig;
36 |   icon: string;
37 | }
38 | 
39 | export interface ImageElementConfig extends LovelaceElementConfigBase {
40 |   entity?: string;
41 |   tap_action?: ActionConfig;
42 |   hold_action?: ActionConfig;
43 |   double_tap_action?: ActionConfig;
44 |   image?: string;
45 |   image_entity?: string;
46 |   state_image?: string;
47 |   camera_image?: string;
48 |   camera_view?: HuiImage["cameraView"];
49 |   dark_mode_image?: string;
50 |   dark_mode_filter?: string;
51 |   filter?: string;
52 |   state_filter?: string;
53 |   aspect_ratio?: string;
54 | }
55 | 
56 | export interface ServiceButtonElementConfig extends LovelaceElementConfigBase {
57 |   title?: string;
58 |   service?: string;
59 |   service_data?: Record<string, unknown>;
60 | }
61 | 
62 | export interface StateBadgeElementConfig extends LovelaceElementConfigBase {
63 |   entity: string;
64 |   title?: string;
65 |   tap_action?: ActionConfig;
66 |   hold_action?: ActionConfig;
67 |   double_tap_action?: ActionConfig;
68 | }
69 | 
70 | export interface StateIconElementConfig extends LovelaceElementConfigBase {
71 |   entity: string;
72 |   tap_action?: ActionConfig;
73 |   hold_action?: ActionConfig;
74 |   double_tap_action?: ActionConfig;
75 |   icon?: string;
76 |   state_color?: boolean;
77 | }
78 | 
79 | export interface StateLabelElementConfig extends LovelaceElementConfigBase {
80 |   entity: string;
81 |   attribute?: string;
82 |   prefix?: string;
83 |   suffix?: string;
84 |   tap_action?: ActionConfig;
85 |   hold_action?: ActionConfig;
86 |   double_tap_action?: ActionConfig;
87 | }
88 | 


--------------------------------------------------------------------------------
/src/ha/panels/lovelace/common/evaluate-filter.ts:
--------------------------------------------------------------------------------
 1 | import { HassEntity } from "home-assistant-js-websocket";
 2 | 
 3 | type FilterOperator =
 4 |   | "=="
 5 |   | "<="
 6 |   | "<"
 7 |   | ">="
 8 |   | ">"
 9 |   | "!="
10 |   | "in"
11 |   | "not in"
12 |   | "regex";
13 | 
14 | // Legacy entity-filter badge & card condition
15 | export type LegacyStateFilter =
16 |   | {
17 |       operator: FilterOperator;
18 |       attribute?: string;
19 |       value: string | number | (string | number)[];
20 |     }
21 |   | number
22 |   | string;
23 | 
24 | export const evaluateStateFilter = (
25 |   stateObj: HassEntity,
26 |   filter: LegacyStateFilter
27 | ): boolean => {
28 |   let operator: FilterOperator;
29 |   let value: string | number | (string | number)[];
30 |   let state: any;
31 | 
32 |   if (typeof filter === "object") {
33 |     operator = filter.operator;
34 |     value = filter.value;
35 |     state = filter.attribute
36 |       ? stateObj.attributes[filter.attribute]
37 |       : stateObj.state;
38 |   } else {
39 |     operator = "==";
40 |     value = filter;
41 |     state = stateObj.state;
42 |   }
43 | 
44 |   if (operator === "==" || operator === "!=") {
45 |     const valueIsNumeric =
46 |       typeof value === "number" ||
47 |       (typeof value === "string" && value.trim() && !isNaN(Number(value)));
48 |     const stateIsNumeric =
49 |       typeof state === "number" ||
50 |       (typeof state === "string" && state.trim() && !isNaN(Number(state)));
51 |     if (valueIsNumeric && stateIsNumeric) {
52 |       value = Number(value);
53 |       state = Number(state);
54 |     }
55 |   }
56 | 
57 |   switch (operator) {
58 |     case "==":
59 |       return state === value;
60 |     case "<=":
61 |       return state <= value;
62 |     case "<":
63 |       return state < value;
64 |     case ">=":
65 |       return state >= value;
66 |     case ">":
67 |       return state > value;
68 |     case "!=":
69 |       return state !== value;
70 |     case "in":
71 |       if (Array.isArray(value) || typeof value === "string") {
72 |         if (Array.isArray(value)) {
73 |           value = value.map((val) => `${val}`);
74 |         }
75 |         return value.includes(state);
76 |       }
77 |       return false;
78 |     case "not in":
79 |       if (Array.isArray(value) || typeof value === "string") {
80 |         if (Array.isArray(value)) {
81 |           value = value.map((val) => `${val}`);
82 |         }
83 |         return !value.includes(state);
84 |       }
85 |       return false;
86 |     case "regex": {
87 |       if (typeof value !== "string") {
88 |         return false;
89 |       }
90 |       if (state !== null && typeof state === "object") {
91 |         return RegExp(value).test(JSON.stringify(state));
92 |       }
93 |       return RegExp(value).test(state);
94 |     }
95 |     default:
96 |       return false;
97 |   }
98 | };
99 | 


--------------------------------------------------------------------------------
/src/ha/common/string/filter/sequence-matching.ts:
--------------------------------------------------------------------------------
 1 | import { stripDiacritics } from "../strip-diacritics";
 2 | import { fuzzyScore } from "./filter";
 3 | 
 4 | /**
 5 |  * Determine whether a sequence of letters exists in another string,
 6 |  *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
 7 |  *
 8 |  * @param {string} filter - Sequence of letters to check for
 9 |  * @param {ScorableTextItem} item - Item against whose strings will be checked
10 |  *
11 |  * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
12 |  */
13 | 
14 | export const fuzzySequentialMatch = (
15 |   filter: string,
16 |   item: ScorableTextItem
17 | ) => {
18 |   let topScore = Number.NEGATIVE_INFINITY;
19 | 
20 |   for (const word of item.strings) {
21 |     const scores = fuzzyScore(
22 |       filter,
23 |       stripDiacritics(filter.toLowerCase()),
24 |       0,
25 |       word,
26 |       stripDiacritics(word.toLowerCase()),
27 |       0,
28 |       true
29 |     );
30 | 
31 |     if (!scores) {
32 |       continue;
33 |     }
34 | 
35 |     // The VS Code implementation of filter returns a 0 for a weak match.
36 |     // But if .filter() sees a "0", it considers that a failed match and will remove it.
37 |     // So, we set score to 1 in these cases so the match will be included, and mostly respect correct ordering.
38 |     const score = scores[0] === 0 ? 1 : scores[0];
39 | 
40 |     if (score > topScore) {
41 |       topScore = score;
42 |     }
43 |   }
44 | 
45 |   if (topScore === Number.NEGATIVE_INFINITY) {
46 |     return undefined;
47 |   }
48 | 
49 |   return topScore;
50 | };
51 | 
52 | /**
53 |  * An interface that objects must extend in order to use the fuzzy sequence matcher
54 |  *
55 |  * @param {number} score - A number representing the existence and strength of a match.
56 |  *    - `< 0` means a good match that starts in the middle of the string
57 |  *    - `> 0` means a good match that starts at the beginning of the string
58 |  *    - `0` means just barely a match
59 |  *    - `undefined` means not a match
60 |  *
61 |  * @param {string} strings - Array of strings (aliases) representing the item. The filter string will be compared against each of these for a match.
62 |  *
63 |  */
64 | 
65 | export interface ScorableTextItem {
66 |   score?: number;
67 |   strings: string[];
68 | }
69 | 
70 | type FuzzyFilterSort = <T extends ScorableTextItem>(
71 |   filter: string,
72 |   items: T[]
73 | ) => T[];
74 | 
75 | export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) =>
76 |   items
77 |     .map((item) => {
78 |       item.score = fuzzySequentialMatch(filter, item);
79 |       return item;
80 |     })
81 |     .filter((item) => item.score !== undefined)
82 |     .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
83 |       scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
84 |     );
85 | 


--------------------------------------------------------------------------------
/src/ha/panels/lovelace/entity-rows/types.ts:
--------------------------------------------------------------------------------
 1 | import type { ActionConfig } from "../../../data/lovelace/config/action";
 2 | import type { HomeAssistant } from "../../../types";
 3 | import type { LegacyStateFilter } from "../common/evaluate-filter";
 4 | import type { Condition } from "../common/validate-condition";
 5 | import type { TimestampRenderingFormat } from "../components/types";
 6 | 
 7 | export interface EntityConfig {
 8 |   entity: string;
 9 |   type?: string;
10 |   name?: string;
11 |   icon?: string;
12 |   image?: string;
13 | }
14 | export interface ActionRowConfig extends EntityConfig {
15 |   action_name?: string;
16 | }
17 | export interface EntityFilterEntityConfig extends EntityConfig {
18 |   state_filter?: Array<LegacyStateFilter>;
19 |   conditions?: Array<Condition>;
20 | }
21 | export interface DividerConfig {
22 |   type: "divider";
23 |   style?: Record<string, string>;
24 | }
25 | export interface SectionConfig {
26 |   type: "section";
27 |   label: string;
28 | }
29 | export interface WeblinkConfig {
30 |   type: "weblink";
31 |   name?: string;
32 |   icon?: string;
33 |   url: string;
34 |   new_tab?: boolean;
35 |   download?: boolean;
36 | }
37 | export interface TextConfig {
38 |   type: "text";
39 |   name: string;
40 |   icon?: string;
41 |   text: string;
42 | }
43 | export interface CallServiceConfig extends EntityConfig {
44 |   type: "call-service";
45 |   service: string;
46 |   service_data?: Record<string, any>;
47 |   action_name?: string;
48 | }
49 | export interface ButtonRowConfig extends EntityConfig {
50 |   type: "button";
51 |   action_name?: string;
52 |   tap_action?: ActionConfig;
53 |   hold_action?: ActionConfig;
54 |   double_tap_action?: ActionConfig;
55 | }
56 | export interface CastConfig {
57 |   type: "cast";
58 |   icon?: string;
59 |   name?: string;
60 |   view?: string | number;
61 |   dashboard?: string;
62 |   // Hide the row if either unsupported browser or no API available.
63 |   hide_if_unavailable?: boolean;
64 | }
65 | export interface ButtonsRowConfig {
66 |   type: "buttons";
67 |   entities: Array<string | EntityConfig>;
68 | }
69 | export type LovelaceRowConfig =
70 |   | EntityConfig
71 |   | DividerConfig
72 |   | SectionConfig
73 |   | WeblinkConfig
74 |   | CallServiceConfig
75 |   | CastConfig
76 |   | ButtonRowConfig
77 |   | ButtonsRowConfig
78 |   | ConditionalRowConfig
79 |   | AttributeRowConfig
80 |   | TextConfig;
81 | 
82 | export interface LovelaceRow extends HTMLElement {
83 |   hass?: HomeAssistant;
84 |   editMode?: boolean;
85 |   setConfig(config: LovelaceRowConfig);
86 | }
87 | 
88 | export interface ConditionalRowConfig extends EntityConfig {
89 |   row: EntityConfig;
90 |   conditions: Condition[];
91 | }
92 | 
93 | export interface AttributeRowConfig extends EntityConfig {
94 |   attribute: string;
95 |   prefix?: string;
96 |   suffix?: string;
97 |   format?: TimestampRenderingFormat;
98 | }
99 | 


--------------------------------------------------------------------------------
/src/localize.ts:
--------------------------------------------------------------------------------
 1 | import { HomeAssistant } from "./ha/types";
 2 | // import * as ar from "./translations/ar.json";
 3 | // import * as bg from "./translations/bg.json";
 4 | // import * as ca from "./translations/ca.json";
 5 | import * as cs from "./translations/cs.json";
 6 | import * as da from "./translations/da.json";
 7 | import * as de from "./translations/de.json";
 8 | // import * as el from "./translations/el.json";
 9 | import * as en from "./translations/en.json";
10 | import * as es from "./translations/es.json";
11 | // import * as fi from "./translations/fi.json";
12 | import * as fr from "./translations/fr.json";
13 | // import * as he from "./translations/he.json";
14 | // import * as hu from "./translations/hu.json";
15 | // import * as id from "./translations/id.json";
16 | import * as it from "./translations/it.json";
17 | import * as ja from "./translations/ja.json";
18 | // import * as ko_KR from "./translations/ko-KR.json";
19 | // import * as nb from "./translations/nb.json";
20 | // import * as nl from "./translations/nl.json";
21 | // import * as pl from "./translations/pl.json";
22 | import * as pt_BR from "./translations/pt-BR.json";
23 | // import * as pt_PT from "./translations/pt-PT.json";
24 | import * as ro from "./translations/ro.json";
25 | // import * as ru from "./translations/ru.json";
26 | // import * as sl from "./translations/sl.json";
27 | // import * as sk from "./translations/sk.json";
28 | // import * as sv from "./translations/sv.json";
29 | // import * as tr from "./translations/tr.json";
30 | // import * as uk from "./translations/uk.json";
31 | // import * as vi from "./translations/vi.json";
32 | // import * as zh_Hans from "./translations/zh-Hans.json";
33 | // import * as zh_Hant from "./translations/zh-Hant.json";
34 | 
35 | export const languages: Record<string, unknown> = {
36 |   //   ar,
37 |   //   bg,
38 |   //   ca,
39 |   cs,
40 |   da,
41 |   de,
42 |   //   el,
43 |   en,
44 |   es,
45 |   //   fi,
46 |   fr,
47 |   //   he,
48 |   //   hu,
49 |   //   id,
50 |   it,
51 |   ja,
52 |   //   "ko-KR": ko_KR,
53 |   //   nb,
54 |   //   nl,
55 |   //   pl,
56 |   "pt-BR": pt_BR,
57 |   //   "pt-PT": pt_PT,
58 |   //   ro,
59 |   //   ru,
60 |   //   sl,
61 |   //   sk,
62 |   //   sv,
63 |   //   tr,
64 |   //   uk,
65 |   //   vi,
66 |   //   "zh-Hans": zh_Hans,
67 |   //   "zh-Hant": zh_Hant,
68 | };
69 | 
70 | const DEFAULT_LANG = "en";
71 | 
72 | function getTranslatedString(key: string, lang: string): string | undefined {
73 |   try {
74 |     return key
75 |       .split(".")
76 |       .reduce(
77 |         (o, i) => (o as Record<string, unknown>)[i],
78 |         languages[lang]
79 |       ) as string;
80 |   } catch (_) {
81 |     return undefined;
82 |   }
83 | }
84 | 
85 | export function setupCustomlocalize(hass?: HomeAssistant) {
86 |   return function (key: string) {
87 |     const lang = hass?.locale.language ?? DEFAULT_LANG;
88 | 
89 |     let translated = getTranslatedString(key, lang);
90 |     if (!translated) translated = getTranslatedString(key, DEFAULT_LANG);
91 |     return translated ?? key;
92 |   };
93 | }
94 | 


--------------------------------------------------------------------------------
/src/ha/common/datetime/format_time.ts:
--------------------------------------------------------------------------------
 1 | import { HassConfig } from "home-assistant-js-websocket";
 2 | import memoizeOne from "memoize-one";
 3 | import { FrontendLocaleData } from "../../data/translation";
 4 | import { useAmPm } from "./use_am_pm";
 5 | 
 6 | // 9:15 PM || 21:15
 7 | export const formatTime = (
 8 |   dateObj: Date,
 9 |   locale: FrontendLocaleData,
10 |   config: HassConfig
11 | ) => formatTimeMem(locale, config.time_zone).format(dateObj);
12 | 
13 | const formatTimeMem = memoizeOne(
14 |   (locale: FrontendLocaleData, serverTimeZone: string) =>
15 |     new Intl.DateTimeFormat(
16 |       locale.language === "en" && !useAmPm(locale)
17 |         ? "en-u-hc-h23"
18 |         : locale.language,
19 |       {
20 |         hour: "numeric",
21 |         minute: "2-digit",
22 |         hour12: useAmPm(locale),
23 |         timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
24 |       }
25 |     )
26 | );
27 | 
28 | // 9:15:24 PM || 21:15:24
29 | export const formatTimeWithSeconds = (
30 |   dateObj: Date,
31 |   locale: FrontendLocaleData,
32 |   config: HassConfig
33 | ) => formatTimeWithSecondsMem(locale, config.time_zone).format(dateObj);
34 | 
35 | const formatTimeWithSecondsMem = memoizeOne(
36 |   (locale: FrontendLocaleData, serverTimeZone: string) =>
37 |     new Intl.DateTimeFormat(
38 |       locale.language === "en" && !useAmPm(locale)
39 |         ? "en-u-hc-h23"
40 |         : locale.language,
41 |       {
42 |         hour: useAmPm(locale) ? "numeric" : "2-digit",
43 |         minute: "2-digit",
44 |         second: "2-digit",
45 |         hour12: useAmPm(locale),
46 |         timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
47 |       }
48 |     )
49 | );
50 | 
51 | // Tuesday 7:00 PM || Tuesday 19:00
52 | export const formatTimeWeekday = (
53 |   dateObj: Date,
54 |   locale: FrontendLocaleData,
55 |   config: HassConfig
56 | ) => formatTimeWeekdayMem(locale, config.time_zone).format(dateObj);
57 | 
58 | const formatTimeWeekdayMem = memoizeOne(
59 |   (locale: FrontendLocaleData, serverTimeZone: string) =>
60 |     new Intl.DateTimeFormat(
61 |       locale.language === "en" && !useAmPm(locale)
62 |         ? "en-u-hc-h23"
63 |         : locale.language,
64 |       {
65 |         weekday: "long",
66 |         hour: useAmPm(locale) ? "numeric" : "2-digit",
67 |         minute: "2-digit",
68 |         hour12: useAmPm(locale),
69 |         timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
70 |       }
71 |     )
72 | );
73 | 
74 | // 21:15
75 | export const formatTime24h = (
76 |   dateObj: Date,
77 |   locale: FrontendLocaleData,
78 |   config: HassConfig
79 | ) => formatTime24hMem(locale, config.time_zone).format(dateObj);
80 | 
81 | const formatTime24hMem = memoizeOne(
82 |   (locale: FrontendLocaleData, serverTimeZone: string) =>
83 |     // en-GB to fix Chrome 24:59 to 0:59 https://stackoverflow.com/a/60898146
84 |     new Intl.DateTimeFormat("en-GB", {
85 |       hour: "numeric",
86 |       minute: "2-digit",
87 |       hour12: false,
88 |       timeZone: locale.time_zone === "server" ? serverTimeZone : undefined,
89 |     })
90 | );
91 | 


--------------------------------------------------------------------------------
/src/utils/form/ha-form.ts:
--------------------------------------------------------------------------------
  1 | import type { LitElement } from "lit";
  2 | import { Selector } from "./ha-selector";
  3 | 
  4 | interface HaDurationData {
  5 |   hours?: number;
  6 |   minutes?: number;
  7 |   seconds?: number;
  8 |   milliseconds?: number;
  9 | }
 10 | 
 11 | export type HaFormSchema =
 12 |   | HaFormConstantSchema
 13 |   | HaFormStringSchema
 14 |   | HaFormIntegerSchema
 15 |   | HaFormFloatSchema
 16 |   | HaFormBooleanSchema
 17 |   | HaFormSelectSchema
 18 |   | HaFormMultiSelectSchema
 19 |   | HaFormTimeSchema
 20 |   | HaFormSelector
 21 |   | HaFormGridSchema;
 22 | 
 23 | export interface HaFormBaseSchema {
 24 |   name: string;
 25 |   // This value is applied if no data is submitted for this field
 26 |   default?: HaFormData;
 27 |   required?: boolean;
 28 |   description?: {
 29 |     suffix?: string;
 30 |     // This value will be set initially when form is loaded
 31 |     suggested_value?: HaFormData;
 32 |   };
 33 |   context?: Record<string, string>;
 34 | }
 35 | 
 36 | export interface HaFormGridSchema extends HaFormBaseSchema {
 37 |   type: "grid";
 38 |   name: "";
 39 |   column_min_width?: string;
 40 |   schema: HaFormSchema[];
 41 | }
 42 | 
 43 | export interface HaFormSelector extends HaFormBaseSchema {
 44 |   type?: never;
 45 |   selector: Selector;
 46 | }
 47 | 
 48 | export interface HaFormConstantSchema extends HaFormBaseSchema {
 49 |   type: "constant";
 50 |   value?: string;
 51 | }
 52 | 
 53 | export interface HaFormIntegerSchema extends HaFormBaseSchema {
 54 |   type: "integer";
 55 |   default?: HaFormIntegerData;
 56 |   valueMin?: number;
 57 |   valueMax?: number;
 58 | }
 59 | 
 60 | export interface HaFormSelectSchema extends HaFormBaseSchema {
 61 |   type: "select";
 62 |   options: Array<[string, string]>;
 63 | }
 64 | 
 65 | export interface HaFormMultiSelectSchema extends HaFormBaseSchema {
 66 |   type: "multi_select";
 67 |   options: Record<string, string> | string[] | Array<[string, string]>;
 68 | }
 69 | 
 70 | export interface HaFormFloatSchema extends HaFormBaseSchema {
 71 |   type: "float";
 72 | }
 73 | 
 74 | export interface HaFormStringSchema extends HaFormBaseSchema {
 75 |   type: "string";
 76 |   format?: string;
 77 | }
 78 | 
 79 | export interface HaFormBooleanSchema extends HaFormBaseSchema {
 80 |   type: "boolean";
 81 | }
 82 | 
 83 | export interface HaFormTimeSchema extends HaFormBaseSchema {
 84 |   type: "positive_time_period_dict";
 85 | }
 86 | 
 87 | export interface HaFormDataContainer {
 88 |   [key: string]: HaFormData;
 89 | }
 90 | 
 91 | export type HaFormData =
 92 |   | HaFormStringData
 93 |   | HaFormIntegerData
 94 |   | HaFormFloatData
 95 |   | HaFormBooleanData
 96 |   | HaFormSelectData
 97 |   | HaFormMultiSelectData
 98 |   | HaFormTimeData;
 99 | 
100 | export type HaFormStringData = string;
101 | export type HaFormIntegerData = number;
102 | export type HaFormFloatData = number;
103 | export type HaFormBooleanData = boolean;
104 | export type HaFormSelectData = string;
105 | export type HaFormMultiSelectData = string[];
106 | export type HaFormTimeData = HaDurationData;
107 | 
108 | export interface HaFormElement extends LitElement {
109 |   schema: HaFormSchema | HaFormSchema[];
110 |   data?: HaFormDataContainer | HaFormData;
111 |   label?: string;
112 | }
113 | 


--------------------------------------------------------------------------------
/src/ha/common/dom/fire_event.ts:
--------------------------------------------------------------------------------
 1 | // Polymer legacy event helpers used courtesy of the Polymer project.
 2 | //
 3 | // Copyright (c) 2017 The Polymer Authors. All rights reserved.
 4 | //
 5 | // Redistribution and use in source and binary forms, with or without
 6 | // modification, are permitted provided that the following conditions are
 7 | // met:
 8 | //
 9 | //    * Redistributions of source code must retain the above copyright
10 | // notice, this list of conditions and the following disclaimer.
11 | //    * Redistributions in binary form must reproduce the above
12 | // copyright notice, this list of conditions and the following disclaimer
13 | // in the documentation and/or other materials provided with the
14 | // distribution.
15 | //    * Neither the name of Google Inc. nor the names of its
16 | // contributors may be used to endorse or promote products derived from
17 | // this software without specific prior written permission.
18 | //
19 | // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
20 | // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
21 | // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
22 | // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
23 | // OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
24 | // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
25 | // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
26 | // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
27 | // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
28 | // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29 | // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30 | 
31 | declare global {
32 |   // eslint-disable-next-line
33 |   interface HASSDomEvents {}
34 | }
35 | 
36 | export type ValidHassDomEvent = keyof HASSDomEvents;
37 | 
38 | export interface HASSDomEvent<T> extends Event {
39 |   detail: T;
40 | }
41 | 
42 | /**
43 |  * Dispatches a custom event with an optional detail value.
44 |  *
45 |  * @param {string} type Name of event type.
46 |  * @param {*=} detail Detail value containing event-specific
47 |  *   payload.
48 |  * @param {{ bubbles: (boolean|undefined),
49 |  *           cancelable: (boolean|undefined),
50 |  *           composed: (boolean|undefined) }=}
51 |  *  options Object specifying options.  These may include:
52 |  *  `bubbles` (boolean, defaults to `true`),
53 |  *  `cancelable` (boolean, defaults to false), and
54 |  *  `node` on which to fire the event (HTMLElement, defaults to `this`).
55 |  * @return {Event} The new event that was fired.
56 |  */
57 | export const fireEvent = <HassEvent extends ValidHassDomEvent>(
58 |   node: HTMLElement | Window,
59 |   type: HassEvent,
60 |   detail?: HASSDomEvents[HassEvent],
61 |   options?: {
62 |     bubbles?: boolean;
63 |     cancelable?: boolean;
64 |     composed?: boolean;
65 |   }
66 | ) => {
67 |   options = options || {};
68 |   // @ts-ignore
69 |   detail = detail === null || detail === undefined ? {} : detail;
70 |   const event = new Event(type, {
71 |     bubbles: options.bubbles === undefined ? true : options.bubbles,
72 |     cancelable: Boolean(options.cancelable),
73 |     composed: options.composed === undefined ? true : options.composed,
74 |   });
75 |   (event as any).detail = detail;
76 |   node.dispatchEvent(event);
77 |   return event;
78 | };
79 | 


--------------------------------------------------------------------------------
/src/ha/panels/lovelace/editor/types.ts:
--------------------------------------------------------------------------------
  1 | import type { ActionConfig } from "../../../data/lovelace/config/action";
  2 | import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
  3 | // import type {
  4 | //   LovelaceViewConfig,
  5 | //   ShowViewConfig,
  6 | // } from "../../../data/lovelace/config/view";
  7 | import type { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
  8 | // import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
  9 | // import type { LovelaceCardFeatureConfig } from "../card-features/types";
 10 | import type { LovelaceElementConfig } from "../elements/types";
 11 | // import type { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
 12 | // import type { LovelaceHeadingBadgeConfig } from "../heading-badges/types";
 13 | 
 14 | // export interface YamlChangedEvent extends Event {
 15 | //   detail: {
 16 | //     yaml: string;
 17 | //   };
 18 | // }
 19 | 
 20 | // export interface GUIModeChangedEvent {
 21 | //   guiMode: boolean;
 22 | //   guiModeAvailable: boolean;
 23 | // }
 24 | 
 25 | // export interface ViewEditEvent extends Event {
 26 | //   detail: {
 27 | //     config: LovelaceViewConfig;
 28 | //   };
 29 | // }
 30 | 
 31 | // export interface ViewVisibilityChangeEvent {
 32 | //   visible: ShowViewConfig[];
 33 | // }
 34 | 
 35 | // export interface ConfigValue {
 36 | //   format: "json" | "yaml";
 37 | //   value?: string | LovelaceCardConfig;
 38 | // }
 39 | 
 40 | // export interface ConfigError {
 41 | //   type: string;
 42 | //   message: string;
 43 | // }
 44 | 
 45 | // export interface EntitiesEditorEvent extends CustomEvent {
 46 | //   detail: {
 47 | //     entities?: EntityConfig[];
 48 | //     item?: any;
 49 | //   };
 50 | //   target: EventTarget | null;
 51 | // }
 52 | 
 53 | export interface EditorTarget extends EventTarget {
 54 |   value?: string;
 55 |   index?: number;
 56 |   checked?: boolean;
 57 |   configValue?: string;
 58 |   type?: HTMLInputElement["type"];
 59 |   config: ActionConfig;
 60 | }
 61 | 
 62 | // export interface Card {
 63 | //   type: string;
 64 | //   name?: string;
 65 | //   description?: string;
 66 | //   showElement?: boolean;
 67 | //   isCustom?: boolean;
 68 | //   isSuggested?: boolean;
 69 | // }
 70 | 
 71 | // export interface Badge {
 72 | //   type: string;
 73 | //   name?: string;
 74 | //   description?: string;
 75 | //   showElement?: boolean;
 76 | //   isCustom?: boolean;
 77 | //   isSuggested?: boolean;
 78 | // }
 79 | 
 80 | // export interface HeaderFooter {
 81 | //   type: LovelaceHeaderFooterConfig["type"];
 82 | //   icon?: string;
 83 | // }
 84 | 
 85 | // export interface CardPickTarget extends EventTarget {
 86 | //   config: LovelaceCardConfig;
 87 | // }
 88 | 
 89 | // export interface BadgePickTarget extends EventTarget {
 90 | //   config: LovelaceBadgeConfig;
 91 | // }
 92 | 
 93 | export interface SubElementEditorConfig {
 94 |   index?: number;
 95 |   elementConfig?:
 96 |   | LovelaceRowConfig
 97 |   // | LovelaceHeaderFooterConfig
 98 |   // | LovelaceCardFeatureConfig
 99 |   | LovelaceElementConfig
100 |   // | LovelaceHeadingBadgeConfig;
101 |   saveElementConfig?: (elementConfig: any) => void;
102 |   context?: any;
103 |   type: "header" | "footer" | "row" | "feature" | "element" | "heading-badge";
104 | }
105 | 
106 | export interface EditSubElementEvent<T = any, C = any> {
107 |   type: SubElementEditorConfig["type"];
108 |   context?: C;
109 |   config: T;
110 |   saveConfig: (config: T) => void;
111 | }
112 | 
113 | export interface EditDetailElementEvent {
114 |   subElementConfig: SubElementEditorConfig;
115 | }
116 | 


--------------------------------------------------------------------------------
/src/ha/panels/lovelace/common/has-changed.ts:
--------------------------------------------------------------------------------
  1 | import { HassEntity } from "home-assistant-js-websocket";
  2 | import { PropertyValues } from "lit";
  3 | import { EntityRegistryDisplayEntry } from "../../../data/entity_registry";
  4 | import { HomeAssistant } from "../../../types";
  5 | import { processConfigEntities } from "./process-config-entities";
  6 | 
  7 | export function hasConfigChanged(
  8 |   element: any,
  9 |   changedProps: PropertyValues
 10 | ): boolean {
 11 |   if (changedProps.has("_config")) {
 12 |     return true;
 13 |   }
 14 | 
 15 |   if (!changedProps.has("hass")) {
 16 |     return false;
 17 |   }
 18 | 
 19 |   const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
 20 |   if (!oldHass) {
 21 |     return true;
 22 |   }
 23 | 
 24 |   if (
 25 |     oldHass.connected !== element.hass!.connected ||
 26 |     oldHass.themes !== element.hass!.themes ||
 27 |     oldHass.locale !== element.hass!.locale ||
 28 |     oldHass.localize !== element.hass.localize ||
 29 |     oldHass.formatEntityState !== element.hass.formatEntityState ||
 30 |     oldHass.formatEntityAttributeName !==
 31 |       element.hass.formatEntityAttributeName ||
 32 |     oldHass.formatEntityAttributeValue !==
 33 |       element.hass.formatEntityAttributeValue ||
 34 |     oldHass.config.state !== element.hass.config.state
 35 |   ) {
 36 |     return true;
 37 |   }
 38 |   return false;
 39 | }
 40 | 
 41 | function compareEntityState(
 42 |   oldHass: HomeAssistant,
 43 |   newHass: HomeAssistant,
 44 |   entityId: string
 45 | ) {
 46 |   const oldState = oldHass.states[entityId] as HassEntity | undefined;
 47 |   const newState = newHass.states[entityId] as HassEntity | undefined;
 48 | 
 49 |   return oldState !== newState;
 50 | }
 51 | 
 52 | function compareEntityDisplayEntry(
 53 |   oldHass: HomeAssistant,
 54 |   newHass: HomeAssistant,
 55 |   entityId: string
 56 | ) {
 57 |   const oldEntry = oldHass.entities[entityId] as
 58 |     | EntityRegistryDisplayEntry
 59 |     | undefined;
 60 |   const newEntry = newHass.entities[entityId] as
 61 |     | EntityRegistryDisplayEntry
 62 |     | undefined;
 63 | 
 64 |   return oldEntry?.display_precision !== newEntry?.display_precision;
 65 | }
 66 | 
 67 | // Check if config or Entity changed
 68 | export function hasConfigOrEntityChanged(
 69 |   element: any,
 70 |   changedProps: PropertyValues
 71 | ): boolean {
 72 |   if (hasConfigChanged(element, changedProps)) {
 73 |     return true;
 74 |   }
 75 | 
 76 |   if (!changedProps.has("hass")) {
 77 |     return false;
 78 |   }
 79 | 
 80 |   const oldHass = changedProps.get("hass") as HomeAssistant;
 81 |   const newHass = element.hass as HomeAssistant;
 82 | 
 83 |   return (
 84 |     compareEntityState(oldHass, newHass, element._config!.entity) ||
 85 |     compareEntityDisplayEntry(oldHass, newHass, element._config!.entity)
 86 |   );
 87 | }
 88 | 
 89 | // Check if config or Entities changed
 90 | export function hasConfigOrEntitiesChanged(
 91 |   element: any,
 92 |   changedProps: PropertyValues
 93 | ): boolean {
 94 |   if (hasConfigChanged(element, changedProps)) {
 95 |     return true;
 96 |   }
 97 | 
 98 |   if (!changedProps.has("hass")) {
 99 |     return false;
100 |   }
101 | 
102 |   const oldHass = changedProps.get("hass") as HomeAssistant;
103 |   const newHass = element.hass as HomeAssistant;
104 | 
105 |   const entities = processConfigEntities(element._config!.entities, false);
106 | 
107 |   return entities.some((entity) => {
108 |     if (!("entity" in entity)) {
109 |       return false;
110 |     }
111 | 
112 |     return (
113 |       compareEntityState(oldHass, newHass, entity.entity) ||
114 |       compareEntityDisplayEntry(oldHass, newHass, entity.entity)
115 |     );
116 |   });
117 | }
118 | 


--------------------------------------------------------------------------------
/src/ha/components/ha-duration-input.ts:
--------------------------------------------------------------------------------
  1 | import { html, LitElement, TemplateResult } from "lit";
  2 | import { customElement, property, query } from "lit/decorators";
  3 | import { fireEvent } from "../common/dom/fire_event";
  4 | import "./ha-base-time-input";
  5 | import type { TimeChangedEvent } from "./ha-base-time-input";
  6 | 
  7 | export interface HaDurationData {
  8 |   days?: number;
  9 |   hours?: number;
 10 |   minutes?: number;
 11 |   seconds?: number;
 12 |   milliseconds?: number;
 13 | }
 14 | 
 15 | @customElement("ha-duration-input")
 16 | class HaDurationInput extends LitElement {
 17 |   @property({ attribute: false }) public data?: HaDurationData;
 18 | 
 19 |   @property() public label?: string;
 20 | 
 21 |   @property() public helper?: string;
 22 | 
 23 |   @property({ type: Boolean }) public required = false;
 24 | 
 25 |   @property({ type: Boolean }) public enableMillisecond = false;
 26 | 
 27 |   @property({ type: Boolean }) public enableDay = false;
 28 | 
 29 |   @property({ type: Boolean }) public disabled = false;
 30 | 
 31 |   @query("paper-time-input", true) private _input?: HTMLElement;
 32 | 
 33 |   public focus() {
 34 |     if (this._input) {
 35 |       this._input.focus();
 36 |     }
 37 |   }
 38 | 
 39 |   protected render(): TemplateResult {
 40 |     return html`
 41 |       <ha-base-time-input
 42 |         .label=${this.label}
 43 |         .helper=${this.helper}
 44 |         .required=${this.required}
 45 |         .autoValidate=${this.required}
 46 |         .disabled=${this.disabled}
 47 |         errorMessage="Required"
 48 |         enableSecond
 49 |         .enableMillisecond=${this.enableMillisecond}
 50 |         .enableDay=${this.enableDay}
 51 |         format="24"
 52 |         .days=${this._days}
 53 |         .hours=${this._hours}
 54 |         .minutes=${this._minutes}
 55 |         .seconds=${this._seconds}
 56 |         .milliseconds=${this._milliseconds}
 57 |         @value-changed=${this._durationChanged}
 58 |         noHoursLimit
 59 |         dayLabel="dd"
 60 |         hourLabel="hh"
 61 |         minLabel="mm"
 62 |         secLabel="ss"
 63 |         millisecLabel="ms"
 64 |       ></ha-base-time-input>
 65 |     `;
 66 |   }
 67 | 
 68 |   private get _days() {
 69 |     return this.data?.days ? Number(this.data.days) : 0;
 70 |   }
 71 | 
 72 |   private get _hours() {
 73 |     return this.data?.hours ? Number(this.data.hours) : 0;
 74 |   }
 75 | 
 76 |   private get _minutes() {
 77 |     return this.data?.minutes ? Number(this.data.minutes) : 0;
 78 |   }
 79 | 
 80 |   private get _seconds() {
 81 |     return this.data?.seconds ? Number(this.data.seconds) : 0;
 82 |   }
 83 | 
 84 |   private get _milliseconds() {
 85 |     return this.data?.milliseconds ? Number(this.data.milliseconds) : 0;
 86 |   }
 87 | 
 88 |   private _durationChanged(ev: CustomEvent<{ value: TimeChangedEvent }>) {
 89 |     ev.stopPropagation();
 90 |     const value = { ...ev.detail.value };
 91 | 
 92 |     if (!this.enableMillisecond && !value.milliseconds) {
 93 |       // @ts-ignore
 94 |       delete value.milliseconds;
 95 |     } else if (value.milliseconds > 999) {
 96 |       value.seconds += Math.floor(value.milliseconds / 1000);
 97 |       value.milliseconds %= 1000;
 98 |     }
 99 | 
100 |     if (value.seconds > 59) {
101 |       value.minutes += Math.floor(value.seconds / 60);
102 |       value.seconds %= 60;
103 |     }
104 | 
105 |     if (value.minutes > 59) {
106 |       value.hours += Math.floor(value.minutes / 60);
107 |       value.minutes %= 60;
108 |     }
109 | 
110 |     if (this.enableDay && value.hours > 24) {
111 |       value.days = (value.days ?? 0) + Math.floor(value.hours / 24);
112 |       value.hours %= 24;
113 |     }
114 | 
115 |     fireEvent(this, "value-changed", {
116 |       value,
117 |     });
118 |   }
119 | }
120 | 
121 | declare global {
122 |   interface HTMLElementTagNameMap {
123 |     "ha-duration-input": HaDurationInput;
124 |   }
125 | }
126 | 


--------------------------------------------------------------------------------
/src/ha/data/camera.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   HassEntityAttributeBase,
  3 |   HassEntityBase,
  4 | } from "home-assistant-js-websocket";
  5 | import { timeCacheEntityPromiseFunc } from "../common/util/time-cache-entity-promise-func";
  6 | import { HomeAssistant } from "../types";
  7 | import { getSignedPath } from "./auth";
  8 | 
  9 | export const CAMERA_ORIENTATIONS = [1, 2, 3, 4, 6, 8];
 10 | export const CAMERA_SUPPORT_ON_OFF = 1;
 11 | export const CAMERA_SUPPORT_STREAM = 2;
 12 | 
 13 | export const STREAM_TYPE_HLS = "hls";
 14 | export const STREAM_TYPE_WEB_RTC = "web_rtc";
 15 | 
 16 | interface CameraEntityAttributes extends HassEntityAttributeBase {
 17 |   model_name: string;
 18 |   access_token: string;
 19 |   brand: string;
 20 |   motion_detection: boolean;
 21 |   frontend_stream_type: string;
 22 | }
 23 | 
 24 | export interface CameraEntity extends HassEntityBase {
 25 |   attributes: CameraEntityAttributes;
 26 | }
 27 | 
 28 | export interface CameraPreferences {
 29 |   preload_stream: boolean;
 30 |   orientation: number;
 31 | }
 32 | 
 33 | export interface CameraThumbnail {
 34 |   content_type: string;
 35 |   content: string;
 36 | }
 37 | 
 38 | export interface Stream {
 39 |   url: string;
 40 | }
 41 | 
 42 | export interface WebRtcAnswer {
 43 |   answer: string;
 44 | }
 45 | 
 46 | export const cameraUrlWithWidthHeight = (
 47 |   base_url: string,
 48 |   width: number,
 49 |   height: number
 50 | ) => `${base_url}&width=${width}&height=${height}`;
 51 | 
 52 | export const computeMJPEGStreamUrl = (entity: CameraEntity) =>
 53 |   `/api/camera_proxy_stream/${entity.entity_id}?token=${entity.attributes.access_token}`;
 54 | 
 55 | export const fetchThumbnailUrlWithCache = async (
 56 |   hass: HomeAssistant,
 57 |   entityId: string,
 58 |   width: number,
 59 |   height: number
 60 | ) => {
 61 |   const base_url = await timeCacheEntityPromiseFunc(
 62 |     "_cameraTmbUrl",
 63 |     9000,
 64 |     fetchThumbnailUrl,
 65 |     hass,
 66 |     entityId
 67 |   );
 68 |   return cameraUrlWithWidthHeight(base_url, width, height);
 69 | };
 70 | 
 71 | export const fetchThumbnailUrl = async (
 72 |   hass: HomeAssistant,
 73 |   entityId: string
 74 | ) => {
 75 |   const path = await getSignedPath(hass, `/api/camera_proxy/${entityId}`);
 76 |   return hass.hassUrl(path.path);
 77 | };
 78 | 
 79 | export const fetchStreamUrl = async (
 80 |   hass: HomeAssistant,
 81 |   entityId: string,
 82 |   format?: "hls"
 83 | ) => {
 84 |   const data = {
 85 |     type: "camera/stream",
 86 |     entity_id: entityId,
 87 |   };
 88 |   if (format) {
 89 |     // @ts-ignore
 90 |     data.format = format;
 91 |   }
 92 |   const stream = await hass.callWS<Stream>(data);
 93 |   stream.url = hass.hassUrl(stream.url);
 94 |   return stream;
 95 | };
 96 | 
 97 | export const handleWebRtcOffer = (
 98 |   hass: HomeAssistant,
 99 |   entityId: string,
100 |   offer: string
101 | ) =>
102 |   hass.callWS<WebRtcAnswer>({
103 |     type: "camera/web_rtc_offer",
104 |     entity_id: entityId,
105 |     offer: offer,
106 |   });
107 | 
108 | export const fetchCameraPrefs = (hass: HomeAssistant, entityId: string) =>
109 |   hass.callWS<CameraPreferences>({
110 |     type: "camera/get_prefs",
111 |     entity_id: entityId,
112 |   });
113 | 
114 | type ValueOf<T extends any[]> = T[number];
115 | export const updateCameraPrefs = (
116 |   hass: HomeAssistant,
117 |   entityId: string,
118 |   prefs: {
119 |     preload_stream?: boolean;
120 |     orientation?: ValueOf<typeof CAMERA_ORIENTATIONS>;
121 |   }
122 | ) =>
123 |   hass.callWS<CameraPreferences>({
124 |     type: "camera/update_prefs",
125 |     entity_id: entityId,
126 |     ...prefs,
127 |   });
128 | 
129 | const CAMERA_MEDIA_SOURCE_PREFIX = "media-source://camera/";
130 | 
131 | export const isCameraMediaSource = (mediaContentId: string) =>
132 |   mediaContentId.startsWith(CAMERA_MEDIA_SOURCE_PREFIX);
133 | 
134 | export const getEntityIdFromCameraMediaSource = (mediaContentId: string) =>
135 |   mediaContentId.substring(CAMERA_MEDIA_SOURCE_PREFIX.length);
136 | 


--------------------------------------------------------------------------------
/src/ha/components/ha-list-item.ts:
--------------------------------------------------------------------------------
  1 | import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
  2 | import { styles } from "@material/mwc-list/mwc-list-item.css";
  3 | import type { CSSResultGroup } from "lit";
  4 | import { css } from "lit";
  5 | import { customElement } from "lit/decorators";
  6 | 
  7 | @customElement("ha-list-item")
  8 | export class HaListItem extends ListItemBase {
  9 |   protected renderRipple() {
 10 |     if (this.noninteractive) {
 11 |       return "";
 12 |     }
 13 |     return super.renderRipple();
 14 |   }
 15 | 
 16 |   static get styles(): CSSResultGroup {
 17 |     return [
 18 |       styles,
 19 |       css`
 20 |         :host {
 21 |           padding-left: var(
 22 |             --mdc-list-side-padding-left,
 23 |             var(--mdc-list-side-padding, 20px)
 24 |           );
 25 |           padding-inline-start: var(
 26 |             --mdc-list-side-padding-left,
 27 |             var(--mdc-list-side-padding, 20px)
 28 |           );
 29 |           padding-right: var(
 30 |             --mdc-list-side-padding-right,
 31 |             var(--mdc-list-side-padding, 20px)
 32 |           );
 33 |           padding-inline-end: var(
 34 |             --mdc-list-side-padding-right,
 35 |             var(--mdc-list-side-padding, 20px)
 36 |           );
 37 |         }
 38 |         :host([graphic="avatar"]:not([twoLine])),
 39 |         :host([graphic="icon"]:not([twoLine])) {
 40 |           height: 48px;
 41 |         }
 42 |         span.material-icons:first-of-type {
 43 |           margin-inline-start: 0px !important;
 44 |           margin-inline-end: var(
 45 |             --mdc-list-item-graphic-margin,
 46 |             16px
 47 |           ) !important;
 48 |           direction: var(--direction) !important;
 49 |         }
 50 |         span.material-icons:last-of-type {
 51 |           margin-inline-start: auto !important;
 52 |           margin-inline-end: 0px !important;
 53 |           direction: var(--direction) !important;
 54 |         }
 55 |         .mdc-deprecated-list-item__meta {
 56 |           display: var(--mdc-list-item-meta-display);
 57 |           align-items: center;
 58 |           flex-shrink: 0;
 59 |         }
 60 |         :host([graphic="icon"]:not([twoline]))
 61 |           .mdc-deprecated-list-item__graphic {
 62 |           margin-inline-end: var(
 63 |             --mdc-list-item-graphic-margin,
 64 |             20px
 65 |           ) !important;
 66 |         }
 67 |         :host([multiline-secondary]) {
 68 |           height: auto;
 69 |         }
 70 |         :host([multiline-secondary]) .mdc-deprecated-list-item__text {
 71 |           padding: 8px 0;
 72 |         }
 73 |         :host([multiline-secondary]) .mdc-deprecated-list-item__secondary-text {
 74 |           text-overflow: initial;
 75 |           white-space: normal;
 76 |           overflow: auto;
 77 |           display: inline-block;
 78 |           margin-top: 10px;
 79 |         }
 80 |         :host([multiline-secondary]) .mdc-deprecated-list-item__primary-text {
 81 |           margin-top: 10px;
 82 |         }
 83 |         :host([multiline-secondary])
 84 |           .mdc-deprecated-list-item__secondary-text::before {
 85 |           display: none;
 86 |         }
 87 |         :host([multiline-secondary])
 88 |           .mdc-deprecated-list-item__primary-text::before {
 89 |           display: none;
 90 |         }
 91 |         :host([disabled]) {
 92 |           color: var(--disabled-text-color);
 93 |         }
 94 |         :host([noninteractive]) {
 95 |           pointer-events: unset;
 96 |         }
 97 |       `,
 98 |       // safari workaround - must be explicit
 99 |       document.dir === "rtl"
100 |         ? css`
101 |             span.material-icons:first-of-type,
102 |             span.material-icons:last-of-type {
103 |               direction: rtl !important;
104 |               --direction: rtl;
105 |             }
106 |           `
107 |         : css``,
108 |     ];
109 |   }
110 | }
111 | 
112 | declare global {
113 |   interface HTMLElementTagNameMap {
114 |     "ha-list-item": HaListItem;
115 |   }
116 | }
117 | 


--------------------------------------------------------------------------------
/src/cards/energy-card/energy-elec-flow-card-editor.ts:
--------------------------------------------------------------------------------
  1 | import { customElement, property, state } from "lit/decorators";
  2 | 
  3 | import { LovelaceCardEditor } from "../../ha/panels/lovelace/types";
  4 | import { EnergyElecFlowCardConfig, PowerFlowCardConfig } from "../../types";
  5 | import { html, LitElement, nothing } from "lit";
  6 | import { HomeAssistant } from "../../ha/types";
  7 | import { HaFormSchema } from "../../utils/form/ha-form";
  8 | import { fireEvent } from "../../ha/common/dom/fire_event";
  9 | 
 10 | import { ENERGY_CARD_EDITOR_NAME } from "./const";
 11 | import { GENERIC_LABELS } from "../../const";
 12 | import { mdiPalette } from "@mdi/js";
 13 | import { languages, setupCustomlocalize } from "../../localize";
 14 | import { verifyAndMigrateConfig } from "./energy-elec-flow-card";
 15 | 
 16 | const ENERGY_LABELS = [
 17 |   "hide_small_consumers",
 18 |   "battery_charge_only_from_generation",
 19 | ];
 20 | const schema = [
 21 |   { name: "title", selector: { text: {} } },
 22 | 
 23 |   {
 24 |     name: "appearance",
 25 |     flatten: true,
 26 |     type: "expandable",
 27 |     iconPath: mdiPalette,
 28 |     schema: [
 29 |       {
 30 |         name: "max_consumer_branches",
 31 |         selector: {
 32 |           number: {
 33 |             min: 0,
 34 |             max: 10,
 35 |             mode: "slider",
 36 |           },
 37 |         },
 38 |       },
 39 |       {
 40 |         name: "hide_small_consumers",
 41 |         selector: { boolean: {} },
 42 |       },
 43 |       {
 44 |         name: "battery_charge_only_from_generation",
 45 |         selector: { boolean: {} },
 46 |       },
 47 |     ],
 48 |   },
 49 | ];
 50 | 
 51 | @customElement(ENERGY_CARD_EDITOR_NAME)
 52 | export class EnergyFlowCardEditor
 53 |   extends LitElement
 54 |   implements LovelaceCardEditor
 55 | {
 56 |   @property({ attribute: false }) public hass!: HomeAssistant;
 57 | 
 58 |   @state() private _config?: EnergyElecFlowCardConfig;
 59 | 
 60 |   public setConfig(config: EnergyElecFlowCardConfig): void {
 61 |     this._config = verifyAndMigrateConfig(config);
 62 |   }
 63 | 
 64 |   private _computeLabel = (schema: HaFormSchema): string => {
 65 |     const customLocalize = setupCustomlocalize(this.hass!);
 66 | 
 67 |     if (GENERIC_LABELS.includes(schema.name)) {
 68 |       return customLocalize(`editor.card.generic.${schema.name}`);
 69 |     }
 70 |     if (ENERGY_LABELS.includes(schema.name)) {
 71 |       return customLocalize(`editor.card.energy_sankey.${schema.name}`);
 72 |     }
 73 |     return this.hass!.localize(
 74 |       `ui.panel.lovelace.editor.card.generic.${schema.name}`
 75 |     );
 76 |   };
 77 | 
 78 |   protected render() {
 79 |     if (!this.hass || !this._config) {
 80 |       return nothing;
 81 |     }
 82 | 
 83 |     const data = { ...this._config } as any;
 84 |     const language = this.hass.locale.language;
 85 |     return html`
 86 |       <ha-form
 87 |         .hass=${this.hass}
 88 |         .data=${data}
 89 |         .schema=${schema}
 90 |         .computeLabel=${this._computeLabel}
 91 |         @value-changed=${this._valueChanged}
 92 |       ></ha-form>
 93 |       <ha-alert alert-type="info" .title="Note">
 94 |         Energy flow entities are configured in the
 95 |         <a href="/config/energy">Energy Dashboard Config</a>. They cannot be
 96 |         modified via the card configuration.
 97 |       </ha-alert>
 98 |       ${!(language in languages)
 99 |         ? html` <ha-alert alert-type="info" .title="Translations Wanted!">
100 |             Do you want this card translated into ${language}? If you would like
101 |             to translate this card into additional languages, please see the
102 |             <a
103 |               target="_blank"
104 |               rel="noopener noreferrer"
105 |               href="https://github.com/davet2001/energy-sankey#language-translations"
106 |               >project page</a
107 |             >
108 |             for instructions on how to contribute! Thanks!
109 |           </ha-alert>`
110 |         : html` <ha-alert alert-type="info">
111 |             Please note that this card is in development! If you see a bug or a
112 |             possible improvement, please use the
113 |             <a href="https://github.com/davet2001/energy-sankey/issues"
114 |               >issue tracker</a
115 |             >
116 |             to help us improve it!
117 |           </ha-alert>`}
118 |     `;
119 |   }
120 | 
121 |   private _valueChanged(ev: CustomEvent): void {
122 |     fireEvent(this, "config-changed", { config: ev.detail.value });
123 |   }
124 | }
125 | 


--------------------------------------------------------------------------------
/src/ha/components/ha-alert.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   mdiAlertCircleOutline,
  3 |   mdiAlertOutline,
  4 |   mdiCheckboxMarkedCircleOutline,
  5 |   mdiClose,
  6 |   mdiInformationOutline,
  7 | } from "@mdi/js";
  8 | import { css, html, LitElement } from "lit";
  9 | import { customElement, property } from "lit/decorators.js";
 10 | import { classMap } from "lit/directives/class-map.js";
 11 | import { fireEvent } from "../common/dom/fire_event";
 12 | 
 13 | const ALERT_ICONS = {
 14 |   info: mdiInformationOutline,
 15 |   warning: mdiAlertOutline,
 16 |   error: mdiAlertCircleOutline,
 17 |   success: mdiCheckboxMarkedCircleOutline,
 18 | };
 19 | 
 20 | declare global {
 21 |   interface HASSDomEvents {
 22 |     "alert-dismissed-clicked": undefined;
 23 |   }
 24 | }
 25 | 
 26 | @customElement("ha-alert")
 27 | class HaAlert extends LitElement {
 28 |   @property() public title = "";
 29 | 
 30 |   @property({ attribute: "alert-type" }) public alertType:
 31 |     | "info"
 32 |     | "warning"
 33 |     | "error"
 34 |     | "success" = "info";
 35 | 
 36 |   @property({ type: Boolean }) public dismissable = false;
 37 | 
 38 |   public render() {
 39 |     return html`
 40 |       <div
 41 |         class="issue-type ${classMap({
 42 |           [this.alertType]: true,
 43 |         })}"
 44 |         role="alert"
 45 |       >
 46 |         <div class="icon ${this.title ? "" : "no-title"}">
 47 |           <slot name="icon">
 48 |             <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
 49 |           </slot>
 50 |         </div>
 51 |         <div class="content">
 52 |           <div class="main-content">
 53 |             ${this.title ? html`<div class="title">${this.title}</div>` : ""}
 54 |             <slot></slot>
 55 |           </div>
 56 |           <div class="action">
 57 |             <slot name="action">
 58 |               ${this.dismissable
 59 |                 ? html`<ha-icon-button
 60 |                     @click=${this._dismiss_clicked}
 61 |                     label="Dismiss alert"
 62 |                     .path=${mdiClose}
 63 |                   ></ha-icon-button>`
 64 |                 : ""}
 65 |             </slot>
 66 |           </div>
 67 |         </div>
 68 |       </div>
 69 |     `;
 70 |   }
 71 | 
 72 |   private _dismiss_clicked() {
 73 |     fireEvent(this, "alert-dismissed-clicked");
 74 |   }
 75 | 
 76 |   static styles = css`
 77 |     .issue-type {
 78 |       position: relative;
 79 |       padding: 8px;
 80 |       display: flex;
 81 |     }
 82 |     .issue-type::after {
 83 |       position: absolute;
 84 |       top: 0;
 85 |       right: 0;
 86 |       bottom: 0;
 87 |       left: 0;
 88 |       opacity: 0.12;
 89 |       pointer-events: none;
 90 |       content: "";
 91 |       border-radius: 4px;
 92 |     }
 93 |     .icon {
 94 |       z-index: 1;
 95 |     }
 96 |     .icon.no-title {
 97 |       align-self: center;
 98 |     }
 99 |     .content {
100 |       display: flex;
101 |       justify-content: space-between;
102 |       align-items: center;
103 |       width: 100%;
104 |       text-align: var(--float-start);
105 |     }
106 |     .action {
107 |       z-index: 1;
108 |       width: min-content;
109 |       --mdc-theme-primary: var(--primary-text-color);
110 |     }
111 |     .main-content {
112 |       overflow-wrap: anywhere;
113 |       word-break: break-word;
114 |       margin-left: 8px;
115 |       margin-right: 0;
116 |       margin-inline-start: 8px;
117 |       margin-inline-end: 0;
118 |     }
119 |     .title {
120 |       margin-top: 2px;
121 |       font-weight: bold;
122 |     }
123 |     .action mwc-button,
124 |     .action ha-icon-button {
125 |       --mdc-theme-primary: var(--primary-text-color);
126 |       --mdc-icon-button-size: 36px;
127 |     }
128 |     .issue-type.info > .icon {
129 |       color: var(--info-color);
130 |     }
131 |     .issue-type.info::after {
132 |       background-color: var(--info-color);
133 |     }
134 | 
135 |     .issue-type.warning > .icon {
136 |       color: var(--warning-color);
137 |     }
138 |     .issue-type.warning::after {
139 |       background-color: var(--warning-color);
140 |     }
141 | 
142 |     .issue-type.error > .icon {
143 |       color: var(--error-color);
144 |     }
145 |     .issue-type.error::after {
146 |       background-color: var(--error-color);
147 |     }
148 | 
149 |     .issue-type.success > .icon {
150 |       color: var(--success-color);
151 |     }
152 |     .issue-type.success::after {
153 |       background-color: var(--success-color);
154 |     }
155 |     :host ::slotted(ul) {
156 |       margin: 0;
157 |       padding-inline-start: 20px;
158 |     }
159 |   `;
160 | }
161 | 
162 | declare global {
163 |   interface HTMLElementTagNameMap {
164 |     "ha-alert": HaAlert;
165 |   }
166 | }
167 | 


--------------------------------------------------------------------------------
/src/ha/common/color/convert-color.ts:
--------------------------------------------------------------------------------
  1 | import colors from "color-name";
  2 | import { expandHex } from "./hex";
  3 | 
  4 | const rgb_hex = (component: number): string => {
  5 |   const hex = Math.round(Math.min(Math.max(component, 0), 255)).toString(16);
  6 |   return hex.length === 1 ? `0${hex}` : hex;
  7 | };
  8 | 
  9 | // Conversion between HEX and RGB
 10 | 
 11 | export const hex2rgb = (hex: string): [number, number, number] => {
 12 |   hex = expandHex(hex);
 13 | 
 14 |   return [
 15 |     parseInt(hex.substring(0, 2), 16),
 16 |     parseInt(hex.substring(2, 4), 16),
 17 |     parseInt(hex.substring(4, 6), 16),
 18 |   ];
 19 | };
 20 | 
 21 | export const rgb2hex = (rgb: [number, number, number]): string =>
 22 |   `#${rgb_hex(rgb[0])}${rgb_hex(rgb[1])}${rgb_hex(rgb[2])}`;
 23 | 
 24 | // Conversion between LAB, XYZ and RGB from https://github.com/gka/chroma.js
 25 | // Copyright (c) 2011-2019, Gregor Aisch
 26 | 
 27 | // Constants for XYZ and LAB conversion
 28 | const Xn = 0.95047;
 29 | const Yn = 1;
 30 | const Zn = 1.08883;
 31 | 
 32 | const t0 = 0.137931034; // 4 / 29
 33 | const t1 = 0.206896552; // 6 / 29
 34 | const t2 = 0.12841855; // 3 * t1 * t1
 35 | const t3 = 0.008856452; // t1 * t1 * t1
 36 | 
 37 | const rgb_xyz = (r: number) => {
 38 |   r /= 255;
 39 |   if (r <= 0.04045) {
 40 |     return r / 12.92;
 41 |   }
 42 |   return ((r + 0.055) / 1.055) ** 2.4;
 43 | };
 44 | 
 45 | const xyz_lab = (t: number) => {
 46 |   if (t > t3) {
 47 |     return t ** (1 / 3);
 48 |   }
 49 |   return t / t2 + t0;
 50 | };
 51 | 
 52 | const xyz_rgb = (r: number) =>
 53 |   255 * (r <= 0.00304 ? 12.92 * r : 1.055 * r ** (1 / 2.4) - 0.055);
 54 | 
 55 | const lab_xyz = (t: number) => (t > t1 ? t * t * t : t2 * (t - t0));
 56 | 
 57 | // Conversions between RGB and LAB
 58 | 
 59 | const rgb2xyz = (rgb: [number, number, number]): [number, number, number] => {
 60 |   let [r, g, b] = rgb;
 61 |   r = rgb_xyz(r);
 62 |   g = rgb_xyz(g);
 63 |   b = rgb_xyz(b);
 64 |   const x = xyz_lab((0.4124564 * r + 0.3575761 * g + 0.1804375 * b) / Xn);
 65 |   const y = xyz_lab((0.2126729 * r + 0.7151522 * g + 0.072175 * b) / Yn);
 66 |   const z = xyz_lab((0.0193339 * r + 0.119192 * g + 0.9503041 * b) / Zn);
 67 |   return [x, y, z];
 68 | };
 69 | 
 70 | export const rgb2lab = (
 71 |   rgb: [number, number, number]
 72 | ): [number, number, number] => {
 73 |   const [x, y, z] = rgb2xyz(rgb);
 74 |   const l = 116 * y - 16;
 75 |   return [l < 0 ? 0 : l, 500 * (x - y), 200 * (y - z)];
 76 | };
 77 | 
 78 | export const lab2rgb = (
 79 |   lab: [number, number, number]
 80 | ): [number, number, number] => {
 81 |   const [l, a, b] = lab;
 82 | 
 83 |   let y = (l + 16) / 116;
 84 |   let x = isNaN(a) ? y : y + a / 500;
 85 |   let z = isNaN(b) ? y : y - b / 200;
 86 | 
 87 |   y = Yn * lab_xyz(y);
 88 |   x = Xn * lab_xyz(x);
 89 |   z = Zn * lab_xyz(z);
 90 | 
 91 |   const r = xyz_rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z); // D65 -> sRGB
 92 |   const g = xyz_rgb(-0.969266 * x + 1.8760108 * y + 0.041556 * z);
 93 |   const b_ = xyz_rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z);
 94 | 
 95 |   return [r, g, b_];
 96 | };
 97 | 
 98 | export const lab2hex = (lab: [number, number, number]): string => {
 99 |   const rgb = lab2rgb(lab);
100 |   return rgb2hex(rgb);
101 | };
102 | 
103 | export const rgb2hsv = (
104 |   rgb: [number, number, number]
105 | ): [number, number, number] => {
106 |   const [r, g, b] = rgb;
107 |   const v = Math.max(r, g, b);
108 |   const c = v - Math.min(r, g, b);
109 |   const h =
110 |     c && (v === r ? (g - b) / c : v === g ? 2 + (b - r) / c : 4 + (r - g) / c);
111 |   return [60 * (h < 0 ? h + 6 : h), v && c / v, v];
112 | };
113 | 
114 | export const hsv2rgb = (
115 |   hsv: [number, number, number]
116 | ): [number, number, number] => {
117 |   const [h, s, v] = hsv;
118 |   const f = (n: number) => {
119 |     const k = (n + h / 60) % 6;
120 |     return v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
121 |   };
122 |   return [f(5), f(3), f(1)];
123 | };
124 | 
125 | export const rgb2hs = (rgb: [number, number, number]): [number, number] =>
126 |   rgb2hsv(rgb).slice(0, 2) as [number, number];
127 | 
128 | export const hs2rgb = (hs: [number, number]): [number, number, number] =>
129 |   hsv2rgb([hs[0], hs[1], 255]);
130 | 
131 | export function theme2hex(themeColor: string): string {
132 |   if (themeColor.startsWith("#")) {
133 |     return themeColor;
134 |   }
135 | 
136 |   const rgbFromColorName = colors[themeColor];
137 |   if (!rgbFromColorName) {
138 |     // We have a named color, and there's nothing in the table,
139 |     // so nothing further we can do with it.
140 |     // Compare/border/background color will all be the same.
141 |     return themeColor;
142 |   }
143 |   return rgb2hex(rgbFromColorName);
144 | }
145 | 


--------------------------------------------------------------------------------
/src/ha/panels/lovelace/types.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   LovelaceCardConfig,
  3 |   LovelaceConfig,
  4 | } from "../../data/lovelace";
  5 | import { FrontendLocaleData } from "../../data/translation";
  6 | import { Constructor, HomeAssistant } from "../../types";
  7 | 
  8 | declare global {
  9 |   // eslint-disable-next-line
 10 |   interface HASSDomEvents {
 11 |     "ll-rebuild": Record<string, unknown>;
 12 |     "ll-badge-rebuild": Record<string, unknown>;
 13 |   }
 14 | }
 15 | 
 16 | export interface Lovelace {
 17 |   config: LovelaceConfig;
 18 |   // If not set, a strategy was used to generate everything
 19 |   rawConfig: LovelaceConfig | undefined;
 20 |   editMode: boolean;
 21 |   urlPath: string | null;
 22 |   mode: "generated" | "yaml" | "storage";
 23 |   locale: FrontendLocaleData;
 24 |   enableFullEditMode: () => void;
 25 |   setEditMode: (editMode: boolean) => void;
 26 |   saveConfig: (newConfig: LovelaceConfig) => Promise<void>;
 27 |   deleteConfig: () => Promise<void>;
 28 | }
 29 | 
 30 | // export interface LovelaceBadge extends HTMLElement {
 31 | //   hass?: HomeAssistant;
 32 | //   setConfig(config: LovelaceBadgeConfig): void;
 33 | // }
 34 | 
 35 | export type LovelaceLayoutOptions = {
 36 |   grid_columns?: number;
 37 |   grid_rows?: number;
 38 | };
 39 | 
 40 | export interface LovelaceCard extends HTMLElement {
 41 |   hass?: HomeAssistant;
 42 |   isPanel?: boolean;
 43 |   editMode?: boolean;
 44 |   getCardSize(): number | Promise<number>;
 45 |   getLayoutOptions?(): LovelaceLayoutOptions;
 46 |   setConfig(config: LovelaceCardConfig): void;
 47 | }
 48 | 
 49 | // export interface LovelaceConfigForm {
 50 | //   schema: HaFormSchema[];
 51 | //   assertConfig?: (config: LovelaceCardConfig) => void;
 52 | //   computeLabel?: (
 53 | //     schema: HaFormSchema,
 54 | //     localize: LocalizeFunc
 55 | //   ) => string | undefined;
 56 | //   computeHelper?: (
 57 | //     schema: HaFormSchema,
 58 | //     localize: LocalizeFunc
 59 | //   ) => string | undefined;
 60 | // }
 61 | 
 62 | // export interface LovelaceCardConstructor extends Constructor<LovelaceCard> {
 63 | //   getStubConfig?: (
 64 | //     hass: HomeAssistant,
 65 | //     entities: string[],
 66 | //     entitiesFallback: string[]
 67 | //   ) => LovelaceCardConfig;
 68 | //   getConfigElement?: () => LovelaceCardEditor;
 69 | // }
 70 | 
 71 | // export interface LovelaceHeaderFooterConstructor
 72 | //   extends Constructor<LovelaceHeaderFooter> {
 73 | //   getStubConfig?: (
 74 | //     hass: HomeAssistant,
 75 | //     entities: string[],
 76 | //     entitiesFallback: string[]
 77 | //   ) => LovelaceHeaderFooterConfig;
 78 | //   getConfigElement?: () => LovelaceHeaderFooterEditor;
 79 | // }
 80 | 
 81 | // export interface LovelaceRowConstructor extends Constructor<LovelaceRow> {
 82 | //   getConfigElement?: () => LovelaceRowEditor;
 83 | // }
 84 | 
 85 | // export interface LovelaceHeaderFooter extends HTMLElement {
 86 | //   hass?: HomeAssistant;
 87 | //   type: "header" | "footer";
 88 | //   getCardSize(): number | Promise<number>;
 89 | //   setConfig(config: LovelaceHeaderFooterConfig): void;
 90 | // }
 91 | 
 92 | // export interface LovelaceCardEditor extends LovelaceGenericElementEditor {
 93 | //   setConfig(config: LovelaceCardConfig): void;
 94 | // }
 95 | 
 96 | // export interface LovelaceHeaderFooterEditor
 97 | //   extends LovelaceGenericElementEditor {
 98 | //   setConfig(config: LovelaceHeaderFooterConfig): void;
 99 | // }
100 | 
101 | // export interface LovelaceRowEditor extends LovelaceGenericElementEditor {
102 | //   setConfig(config: LovelaceRowConfig): void;
103 | // }
104 | 
105 | export interface LovelaceCardEditor extends LovelaceGenericElementEditor {
106 |   setConfig(config: LovelaceCardConfig): void;
107 | }
108 | 
109 | // export interface LovelaceBadgeEditor extends LovelaceGenericElementEditor {
110 | //   setConfig(config: LovelaceBadgeConfig): void;
111 | // }
112 | 
113 | export interface LovelaceGenericElementEditor extends HTMLElement {
114 |   hass?: HomeAssistant;
115 |   lovelace?: LovelaceConfig;
116 |   setConfig(config: any): void;
117 |   focusYamlEditor?: () => void;
118 | }
119 | // export interface LovelaceCardFeature extends HTMLElement {
120 | //   hass?: HomeAssistant;
121 | //   stateObj?: HassEntity;
122 | //   setConfig(config: LovelaceCardFeatureConfig);
123 | //   color?: string;
124 | // }
125 | 
126 | // export interface LovelaceCardFeatureConstructor
127 | //   extends Constructor<LovelaceCardFeature> {
128 | //   getStubConfig?: (
129 | //     hass: HomeAssistant,
130 | //     stateObj?: HassEntity
131 | //   ) => LovelaceCardFeatureConfig;
132 | //   getConfigElement?: () => LovelaceCardFeatureEditor;
133 | //   getConfigForm?: () => {
134 | //     schema: HaFormSchema[];
135 | //     assertConfig?: (config: LovelaceCardConfig) => void;
136 | //   };
137 | //   isSupported?: (stateObj?: HassEntity) => boolean;
138 | // }
139 | 
140 | // export interface LovelaceCardFeatureEditor
141 | //   extends LovelaceGenericElementEditor {
142 | //   setConfig(config: LovelaceCardFeatureConfig): void;
143 | // }
144 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Home Assistant Energy Sankey Cards
 2 | 
 3 | [![GitHub Release][releases-shield]][releases]
 4 | [![hacs_badge](https://img.shields.io/badge/HACS-Custom-41BDF5.svg?style=for-the-badge)](https://github.com/hacs/integration)
 5 | [![License][license-shield]](LICENSE.md)
 6 | 
 7 | Energy Sankey is a collection of dashboard cards for homeassistant, dynamically displaying the flow of electrical energy and power.
 8 | 
 9 | ![video of animated sankey](video.gif)
10 | 
11 | The cards are ideal if you want to track your electricity consumption and identify where your energy is going.
12 | 
13 | The aim is for as easy setup as possible. No configuring groups of child entities, complicated choices or hunting for info to populate a yaml configuration. In most cases, the default configuration should just work.
14 | 
15 | There are two main cards:
16 | 
17 | - a card showing the total _energy_ flow based on a configurable\* time range (e.g. day so far).
18 | - a user configurable card showing the _power_ flow for a set of sensors. This represents the live power flow at the current moment.
19 | 
20 | Both cards base their configuration on the existing home assistant energy configuration, and use the same colour scheme.
21 | 
22 | Both are live and automatically updating. The cards try to display a coherent representation even if the data set is incomplete or physically impossible (e.g. exporting more than generation + batteries are outputting). This means it is ok for asynchronous updates to be made to any of the entities the card is monitoring, and they can have different update intervals.
23 | 
24 | The width of the flows represents the amount, and the overall size of everything is automatically scaled so that no one part of the diagram becomes too wide.
25 | 
26 | The colour\* of the flows heading to the consumers represents the blend of locally generated vs grid energy.
27 | 
28 | The diagram dynamically scales to fit the size of the window it is in (mostly).
29 | 
30 | ## Installation (the easy way)
31 | 
32 | If you've already installed HACS (https://hacs.xyz/), click this button and then click download!
33 | 
34 | [![Open your Home Assistant instance and open the energy-sankey repository inside the Home Assistant Community Store.](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=davet2001&repository=energy-sankey&category=dashboard)
35 | 
36 | ## Installation via HACS
37 | 
38 | - Install HACS in your Home Assisstant installation (see https://hacs.xyz/ for detailed instructions)
39 | - Navigate to HACS within your Home Assistant instance (Menu > HACS)
40 | - In the search box type 'Energy Sankey'
41 | - Click on **Energy Sankey Card**
42 | - Click Download
43 | - Reload when prompted
44 | - Select a dashboard and enter editing mode
45 | - Type 'Sankey' in the search box
46 | - Select 'Sankey Energy Flow Card' or 'Sankey Power Flow Card'
47 |   - The energy card does not require configuration
48 |   - The power card auto configures. If there are any problems with autoconfiguration, use built in card editor to select the correct power entities for grid input / generation / consumers / batteries.
49 | 
50 | ## Language Translations
51 | 
52 | If you would like to see this card translated into your own language, your contribution is most welcome!
53 | 
54 | It's not too difficult to do; it can be done via a web browser.
55 | Examples of how others have done it are in recent pull requests e.g. [#121](https://github.com/davet2001/energy-sankey/pull/121), [#138](https://github.com/davet2001/energy-sankey/pull/138).
56 | 
57 | In short the process is:
58 | 
59 | - Open the most recent [primary language file](https://github.com/davet2001/energy-sankey/blob/main/src/translations/en.json) `en.json`.
60 | - Copy the contents to the clipboard
61 | - Navigate to the `translations/` parent directory by clicking 'translations'.
62 | - Click 'Add file' to create a new file e.g. `de.json`
63 | - Paste in the contents
64 | - Translate to the new language
65 | - Save the file in a new branch
66 | - Create a pull request for this branch
67 | - (To do the complete job...) Within the branch, edit `src/localize.ts` and uncomment the new language.
68 | - Thank you so much for your contributions!
69 | 
70 | ## Outstanding issues to solve:
71 | 
72 | - [ ] Sometimes there are thin dark lines between the blocks that make up the shapes, I believe this is caused by antialiasing, but I don't see an easy way of reducing/eliminating it, especially where the shapes are across two divs.
73 | - [ ] There are probably more edge cases to experiment with, such as multiple generation sources, grid configured with only input or output, and either of those being negative to represent flow in the opposite direction.
74 | - [ ] \*Configurable time range is not yet implemented
75 | 
76 | [license-shield]: https://img.shields.io/github/license/davet2001/homeassistant-energy-sankey-card.svg?style=for-the-badge
77 | [releases-shield]: https://img.shields.io/github/release/davet2001/homeassistant-energy-sankey-card?style=for-the-badge
78 | [releases]: https://github.com/davet2001/homeassistant-energy-sankey-card/releases
79 | 


--------------------------------------------------------------------------------
/src/ha/common/string/filter/char-code.ts:
--------------------------------------------------------------------------------
  1 | // MIT License
  2 | 
  3 | // Copyright (c) 2015 - present Microsoft Corporation
  4 | 
  5 | // Permission is hereby granted, free of charge, to any person obtaining a copy
  6 | // of this software and associated documentation files (the "Software"), to deal
  7 | // in the Software without restriction, including without limitation the rights
  8 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  9 | // copies of the Software, and to permit persons to whom the Software is
 10 | // furnished to do so, subject to the following conditions:
 11 | 
 12 | // The above copyright notice and this permission notice shall be included in all
 13 | // copies or substantial portions of the Software.
 14 | 
 15 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 16 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 17 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 18 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 19 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 20 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 21 | // SOFTWARE.
 22 | 
 23 | // Names from https://blog.codinghorror.com/ascii-pronunciation-rules-for-programmers/
 24 | 
 25 | /**
 26 |  * An inlined enum containing useful character codes (to be used with String.charCodeAt).
 27 |  * Please leave the const keyword such that it gets inlined when compiled to JavaScript!
 28 |  */
 29 | export enum CharCode {
 30 |   Null = 0,
 31 |   /**
 32 |    * The `\b` character.
 33 |    */
 34 |   Backspace = 8,
 35 |   /**
 36 |    * The `\t` character.
 37 |    */
 38 |   Tab = 9,
 39 |   /**
 40 |    * The `\n` character.
 41 |    */
 42 |   LineFeed = 10,
 43 |   /**
 44 |    * The `\r` character.
 45 |    */
 46 |   CarriageReturn = 13,
 47 |   Space = 32,
 48 |   /**
 49 |    * The `!` character.
 50 |    */
 51 |   ExclamationMark = 33,
 52 |   /**
 53 |    * The `"` character.
 54 |    */
 55 |   DoubleQuote = 34,
 56 |   /**
 57 |    * The `#` character.
 58 |    */
 59 |   Hash = 35,
 60 |   /**
 61 |    * The `$` character.
 62 |    */
 63 |   DollarSign = 36,
 64 |   /**
 65 |    * The `%` character.
 66 |    */
 67 |   PercentSign = 37,
 68 |   /**
 69 |    * The `&` character.
 70 |    */
 71 |   Ampersand = 38,
 72 |   /**
 73 |    * The `'` character.
 74 |    */
 75 |   SingleQuote = 39,
 76 |   /**
 77 |    * The `(` character.
 78 |    */
 79 |   OpenParen = 40,
 80 |   /**
 81 |    * The `)` character.
 82 |    */
 83 |   CloseParen = 41,
 84 |   /**
 85 |    * The `*` character.
 86 |    */
 87 |   Asterisk = 42,
 88 |   /**
 89 |    * The `+` character.
 90 |    */
 91 |   Plus = 43,
 92 |   /**
 93 |    * The `,` character.
 94 |    */
 95 |   Comma = 44,
 96 |   /**
 97 |    * The `-` character.
 98 |    */
 99 |   Dash = 45,
100 |   /**
101 |    * The `.` character.
102 |    */
103 |   Period = 46,
104 |   /**
105 |    * The `/` character.
106 |    */
107 |   Slash = 47,
108 | 
109 |   Digit0 = 48,
110 |   Digit1 = 49,
111 |   Digit2 = 50,
112 |   Digit3 = 51,
113 |   Digit4 = 52,
114 |   Digit5 = 53,
115 |   Digit6 = 54,
116 |   Digit7 = 55,
117 |   Digit8 = 56,
118 |   Digit9 = 57,
119 | 
120 |   /**
121 |    * The `:` character.
122 |    */
123 |   Colon = 58,
124 |   /**
125 |    * The `;` character.
126 |    */
127 |   Semicolon = 59,
128 |   /**
129 |    * The `<` character.
130 |    */
131 |   LessThan = 60,
132 |   /**
133 |    * The `=` character.
134 |    */
135 |   Equals = 61,
136 |   /**
137 |    * The `>` character.
138 |    */
139 |   GreaterThan = 62,
140 |   /**
141 |    * The `?` character.
142 |    */
143 |   QuestionMark = 63,
144 |   /**
145 |    * The `@` character.
146 |    */
147 |   AtSign = 64,
148 | 
149 |   A = 65,
150 |   B = 66,
151 |   C = 67,
152 |   D = 68,
153 |   E = 69,
154 |   F = 70,
155 |   G = 71,
156 |   H = 72,
157 |   I = 73,
158 |   J = 74,
159 |   K = 75,
160 |   L = 76,
161 |   M = 77,
162 |   N = 78,
163 |   O = 79,
164 |   P = 80,
165 |   Q = 81,
166 |   R = 82,
167 |   S = 83,
168 |   T = 84,
169 |   U = 85,
170 |   V = 86,
171 |   W = 87,
172 |   X = 88,
173 |   Y = 89,
174 |   Z = 90,
175 | 
176 |   /**
177 |    * The `[` character.
178 |    */
179 |   OpenSquareBracket = 91,
180 |   /**
181 |    * The `\` character.
182 |    */
183 |   Backslash = 92,
184 |   /**
185 |    * The `]` character.
186 |    */
187 |   CloseSquareBracket = 93,
188 |   /**
189 |    * The `^` character.
190 |    */
191 |   Caret = 94,
192 |   /**
193 |    * The `_` character.
194 |    */
195 |   Underline = 95,
196 |   /**
197 |    * The ``(`)`` character.
198 |    */
199 |   BackTick = 96,
200 | 
201 |   a = 97,
202 |   b = 98,
203 |   c = 99,
204 |   d = 100,
205 |   e = 101,
206 |   f = 102,
207 |   g = 103,
208 |   h = 104,
209 |   i = 105,
210 |   j = 106,
211 |   k = 107,
212 |   l = 108,
213 |   m = 109,
214 |   n = 110,
215 |   o = 111,
216 |   p = 112,
217 |   q = 113,
218 |   r = 114,
219 |   s = 115,
220 |   t = 116,
221 |   u = 117,
222 |   v = 118,
223 |   w = 119,
224 |   x = 120,
225 |   y = 121,
226 |   z = 122,
227 | 
228 |   /**
229 |    * The `{` character.
230 |    */
231 |   OpenCurlyBrace = 123,
232 |   /**
233 |    * The `|` character.
234 |    */
235 |   Pipe = 124,
236 |   /**
237 |    * The `}` character.
238 |    */
239 |   CloseCurlyBrace = 125,
240 |   /**
241 |    * The `~` character.
242 |    */
243 |   Tilde = 126,
244 | }
245 | 


--------------------------------------------------------------------------------
/src/ha/data/config_entries.ts:
--------------------------------------------------------------------------------
  1 | import type { UnsubscribeFunc } from "home-assistant-js-websocket";
  2 | import type { HomeAssistant } from "../types";
  3 | import type { IntegrationManifest, IntegrationType } from "./integration";
  4 | 
  5 | export interface ConfigEntry {
  6 |   entry_id: string;
  7 |   domain: string;
  8 |   title: string;
  9 |   source: string;
 10 |   state:
 11 |     | "loaded"
 12 |     | "setup_error"
 13 |     | "migration_error"
 14 |     | "setup_retry"
 15 |     | "not_loaded"
 16 |     | "failed_unload"
 17 |     | "setup_in_progress";
 18 |   supports_options: boolean;
 19 |   supports_remove_device: boolean;
 20 |   supports_unload: boolean;
 21 |   supports_reconfigure: boolean;
 22 |   pref_disable_new_entities: boolean;
 23 |   pref_disable_polling: boolean;
 24 |   disabled_by: "user" | null;
 25 |   reason: string | null;
 26 |   error_reason_translation_key: string | null;
 27 |   error_reason_translation_placeholders: Record<string, string> | null;
 28 | }
 29 | /*
 30 | export type ConfigEntryMutableParams = Partial<
 31 |   Pick<
 32 |     ConfigEntry,
 33 |     "title" | "pref_disable_new_entities" | "pref_disable_polling"
 34 |   >
 35 | >;
 36 | 
 37 | // https://github.com/home-assistant/core/blob/2286dea636fda001f03433ba14d7adbda43979e5/homeassistant/config_entries.py#L81
 38 | export const ERROR_STATES: ConfigEntry["state"][] = [
 39 |   "migration_error",
 40 |   "setup_error",
 41 |   "setup_retry",
 42 | ];
 43 | 
 44 | // https://github.com/home-assistant/core/blob/2286dea636fda001f03433ba14d7adbda43979e5/homeassistant/config_entries.py#L81
 45 | export const RECOVERABLE_STATES: ConfigEntry["state"][] = [
 46 |   "not_loaded",
 47 |   "loaded",
 48 |   "setup_error",
 49 |   "setup_retry",
 50 | ];
 51 | 
 52 | export interface ConfigEntryUpdate {
 53 |   // null means no update as is the current state
 54 |   type: null | "added" | "removed" | "updated";
 55 |   entry: ConfigEntry;
 56 | }
 57 | 
 58 | export const subscribeConfigEntries = (
 59 |   hass: HomeAssistant,
 60 |   callbackFunction: (message: ConfigEntryUpdate[]) => void,
 61 |   filters?: {
 62 |     type?: IntegrationType[];
 63 |     domain?: string;
 64 |   }
 65 | ): Promise<UnsubscribeFunc> => {
 66 |   const params: any = {
 67 |     type: "config_entries/subscribe",
 68 |   };
 69 |   if (filters && filters.type) {
 70 |     params.type_filter = filters.type;
 71 |   }
 72 |   return hass.connection.subscribeMessage<ConfigEntryUpdate[]>(
 73 |     (message) => callbackFunction(message),
 74 |     params
 75 |   );
 76 | };
 77 | */
 78 | export const getConfigEntries = (
 79 |   hass: HomeAssistant,
 80 |   filters?: {
 81 |     type?: IntegrationType[];
 82 |     domain?: string;
 83 |   }
 84 | ): Promise<ConfigEntry[]> => {
 85 |   const params: any = {};
 86 |   if (filters) {
 87 |     if (filters.type) {
 88 |       params.type_filter = filters.type;
 89 |     }
 90 |     if (filters.domain) {
 91 |       params.domain = filters.domain;
 92 |     }
 93 |   }
 94 |   return hass.callWS<ConfigEntry[]>({
 95 |     type: "config_entries/get",
 96 |     ...params,
 97 |   });
 98 | };
 99 | /*
100 | export const getConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
101 |   hass.callWS<{ config_entry: ConfigEntry }>({
102 |     type: "config_entries/get_single",
103 |     entry_id: configEntryId,
104 |   });
105 | 
106 | export const updateConfigEntry = (
107 |   hass: HomeAssistant,
108 |   configEntryId: string,
109 |   updatedValues: ConfigEntryMutableParams
110 | ) =>
111 |   hass.callWS<{ require_restart: boolean; config_entry: ConfigEntry }>({
112 |     type: "config_entries/update",
113 |     entry_id: configEntryId,
114 |     ...updatedValues,
115 |   });
116 | 
117 | export const deleteConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
118 |   hass.callApi<{
119 |     require_restart: boolean;
120 |   }>("DELETE", `config/config_entries/entry/${configEntryId}`);
121 | 
122 | export const reloadConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
123 |   hass.callApi<{
124 |     require_restart: boolean;
125 |   }>("POST", `config/config_entries/entry/${configEntryId}/reload`);
126 | 
127 | export interface DisableConfigEntryResult {
128 |   require_restart: boolean;
129 | }
130 | 
131 | export const disableConfigEntry = (
132 |   hass: HomeAssistant,
133 |   configEntryId: string
134 | ) =>
135 |   hass.callWS<DisableConfigEntryResult>({
136 |     type: "config_entries/disable",
137 |     entry_id: configEntryId,
138 |     disabled_by: "user",
139 |   });
140 | 
141 | export const enableConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
142 |   hass.callWS<{
143 |     require_restart: boolean;
144 |   }>({
145 |     type: "config_entries/disable",
146 |     entry_id: configEntryId,
147 |     disabled_by: null,
148 |   });
149 | 
150 | export const sortConfigEntries = (
151 |   configEntries: ConfigEntry[],
152 |   manifestLookup: { [domain: string]: IntegrationManifest }
153 | ): ConfigEntry[] => {
154 |   const sortedConfigEntries = [...configEntries];
155 | 
156 |   const getScore = (entry: ConfigEntry) => {
157 |     const manifest = manifestLookup[entry.domain] as
158 |       | IntegrationManifest
159 |       | undefined;
160 |     const isHelper = manifest?.integration_type === "helper";
161 |     return isHelper ? -1 : 1;
162 |   };
163 | 
164 |   const configEntriesCompare = (a: ConfigEntry, b: ConfigEntry) =>
165 |     getScore(b) - getScore(a);
166 | 
167 |   return sortedConfigEntries.sort(configEntriesCompare);
168 | };
169 | */


--------------------------------------------------------------------------------
/src/ha-elec-sankey.ts:
--------------------------------------------------------------------------------
  1 | import { customElement, property } from "lit/decorators.js";
  2 | 
  3 | import { CSSResultArray, TemplateResult, css, html, nothing } from "lit";
  4 | import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
  5 | import { ElecSankey } from "./elec-sankey";
  6 | import { HomeAssistant } from "./ha/types";
  7 | import { formatNumber } from "./ha/common/number/format_number";
  8 | 
  9 | import { fireEvent } from "./ha/common/dom/fire_event";
 10 | import { setupCustomlocalize } from "./localize";
 11 | 
 12 | // Additional items from frontend src/dialogs/more-info/ha-more-info-dialog.ts
 13 | type View = "info" | "history" | "settings" | "related";
 14 | 
 15 | export interface MoreInfoDialogParams {
 16 |   entityId: string | null;
 17 |   view?: View;
 18 |   /** @deprecated Use `view` instead */
 19 |   tab?: View;
 20 | }
 21 | 
 22 | declare global {
 23 |   // for fire event
 24 |   interface HASSDomEvents {
 25 |     "hass-more-info": MoreInfoDialogParams;
 26 |   }
 27 | }
 28 | // end of additional items from frontend src/dialogs/more-info/ha-more-info-dialog.ts
 29 | 
 30 | @customElement("ha-elec-sankey")
 31 | export class HaElecSankey extends ElecSankey {
 32 |   @property({ attribute: false }) public hass!: HomeAssistant;
 33 | 
 34 |   private _localizer: (key: string) => string = (key: string): string => {
 35 |     return key;
 36 |   };
 37 | 
 38 |   private _localizerIsSetup = false;
 39 | 
 40 |   protected _localize = (key: string): string => {
 41 |     if (!this._localizerIsSetup) {
 42 |       this._localizer = setupCustomlocalize(this.hass);
 43 |       this._localizerIsSetup = true;
 44 |     }
 45 |     // The low level card ElecSankey doesn't know anything about the card
 46 |     // prefix, so we need to add it here.
 47 |     if (!key.startsWith("card.")) {
 48 |       key = "card.generic." + key;
 49 |     }
 50 |     return this._localizer(key);
 51 |   };
 52 | 
 53 |   protected _generateLabelDiv(
 54 |     id: string | undefined,
 55 |     icon: string | undefined,
 56 |     _name: string | undefined,
 57 |     valueA: number,
 58 |     valueB: number | undefined,
 59 |     valueAColor: string | undefined = undefined,
 60 |     valueBColor: string | undefined = undefined,
 61 |     displayClass: string | undefined = undefined,
 62 |     showLeftValue: boolean = true
 63 |   ): TemplateResult {
 64 |     const _id = id || "";
 65 |     const numFractionDigits = this.unit === "kWh" ? 1 : 0;
 66 |     // prettier-ignore
 67 |     return html`<div
 68 |       class="label ${id ? "label-action-clickable " : ""}${displayClass}"
 69 |       id=${_id}
 70 |       @click=${id ? this._handleMoreInfo : nothing}
 71 |     >${_name || nothing}${icon
 72 |         ? html`<ha-svg-icon id=${_id} .path=${icon}> </ha-svg-icon>`
 73 |         : nothing}${valueB !== undefined
 74 |         ? html`<br />${showLeftValue ? html`<span
 75 |               class="directionleft ${displayClass}"
 76 |               style=${valueBColor ? `color:${valueBColor}` : nothing}
 77 |               id=${_id}
 78 |             >
 79 |               <ha-svg-icon id=${_id} class="small" .path=${mdiArrowLeft}>
 80 |               </ha-svg-icon
 81 |               >${formatNumber(valueB, this.hass.locale, {
 82 |                 maximumFractionDigits: numFractionDigits,
 83 |               })}&nbsp;${this.unit}</span
 84 |             >`: nothing}<br />
 85 |             <span
 86 |               class="directionright ${displayClass}"
 87 |               style=${valueAColor ? `color:${valueAColor}` : nothing}
 88 |               id=${_id}
 89 |             >
 90 |               <ha-svg-icon id=${_id} class="small" .path=${mdiArrowRight}>
 91 |               </ha-svg-icon
 92 |               >${formatNumber(valueA, this.hass.locale, {
 93 |                 maximumFractionDigits: numFractionDigits,
 94 |               })}&nbsp;${this.unit}
 95 |             </span>`
 96 |         : html`<br />${formatNumber(valueA, this.hass.locale, {
 97 |               maximumFractionDigits: numFractionDigits,
 98 |             })}&nbsp;${this.unit}`}
 99 |     </div>`;
100 |   }
101 | 
102 |   private _handleMoreInfo(e: MouseEvent) {
103 |     const div = e.target as HTMLDivElement;
104 |     fireEvent(this, "hass-more-info", {
105 |       entityId: div.id,
106 |     });
107 |   }
108 | 
109 |   static get styles(): CSSResultArray {
110 |     return [
111 |       super.styles,
112 |       css`
113 |         ha-card:focus {
114 |           outline: none;
115 |         }
116 |         .card-header {
117 |           padding-bottom: 0;
118 |         }
119 |         .name {
120 |           text-align: center;
121 |           line-height: initial;
122 |           color: var(--primary-text-color);
123 |           width: 100%;
124 |           font-size: 15px;
125 |           margin-top: 8px;
126 |         }
127 |         .label {
128 |           font-size: 12px;
129 |         }
130 |         .label-action-clickable {
131 |           cursor: pointer;
132 |         }
133 |         ha-svg-icon {
134 |           --icon-primary-color: var(--icon-primary-color);
135 |         }
136 |         ha-svg-icon.small {
137 |           --mdc-icon-size: 12px;
138 |         }
139 |         .directionright.grid {
140 |           color: var(--energy-grid-consumption-color);
141 |         }
142 |         .directionleft.grid {
143 |           color: var(--energy-grid-return-color);
144 |         }
145 |         .directionleft.battery {
146 |           color: var(--energy-battery-out-color);
147 |         }
148 |       `,
149 |     ];
150 |   }
151 | }
152 | 
153 | declare global {
154 |   interface HTMLElementTagNameMap {
155 |     "ha-elec-sankey": HaElecSankey;
156 |   }
157 | }
158 | 


--------------------------------------------------------------------------------
/src/ha/common/number/format_number.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   HassEntity,
  3 |   HassEntityAttributeBase,
  4 | } from "home-assistant-js-websocket";
  5 | import { EntityRegistryDisplayEntry } from "../../data/entity_registry";
  6 | import { FrontendLocaleData, NumberFormat } from "../../data/translation";
  7 | import { round } from "./round";
  8 | 
  9 | /**
 10 |  * Returns true if the entity is considered numeric based on the attributes it has
 11 |  * @param stateObj The entity state object
 12 |  */
 13 | export const isNumericState = (stateObj: HassEntity): boolean =>
 14 |   isNumericFromAttributes(stateObj.attributes);
 15 | 
 16 | export const isNumericFromAttributes = (
 17 |   attributes: HassEntityAttributeBase,
 18 |   numericDeviceClasses?: string[]
 19 | ): boolean =>
 20 |   !!attributes.unit_of_measurement ||
 21 |   !!attributes.state_class ||
 22 |   (numericDeviceClasses || []).includes(attributes.device_class || "");
 23 | 
 24 | export const numberFormatToLocale = (
 25 |   localeOptions: FrontendLocaleData
 26 | ): string | string[] | undefined => {
 27 |   switch (localeOptions.number_format) {
 28 |     case NumberFormat.comma_decimal:
 29 |       return ["en-US", "en"]; // Use United States with fallback to English formatting 1,234,567.89
 30 |     case NumberFormat.decimal_comma:
 31 |       return ["de", "es", "it"]; // Use German with fallback to Spanish then Italian formatting 1.234.567,89
 32 |     case NumberFormat.space_comma:
 33 |       return ["fr", "sv", "cs"]; // Use French with fallback to Swedish and Czech formatting 1 234 567,89
 34 |     case NumberFormat.system:
 35 |       return undefined;
 36 |     default:
 37 |       return localeOptions.language;
 38 |   }
 39 | };
 40 | 
 41 | /**
 42 |  * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
 43 |  *
 44 |  * @param num The number to format
 45 |  * @param localeOptions The user-selected language and formatting, from `hass.locale`
 46 |  * @param options Intl.NumberFormatOptions to use
 47 |  */
 48 | export const formatNumber = (
 49 |   num: string | number,
 50 |   localeOptions?: FrontendLocaleData,
 51 |   options?: Intl.NumberFormatOptions
 52 | ): string => {
 53 |   const locale = localeOptions
 54 |     ? numberFormatToLocale(localeOptions)
 55 |     : undefined;
 56 | 
 57 |   // Polyfill for Number.isNaN, which is more reliable than the global isNaN()
 58 |   Number.isNaN =
 59 |     Number.isNaN ||
 60 |     function isNaN(input) {
 61 |       return typeof input === "number" && isNaN(input);
 62 |     };
 63 | 
 64 |   if (
 65 |     localeOptions?.number_format !== NumberFormat.none &&
 66 |     !Number.isNaN(Number(num))
 67 |   ) {
 68 |     return new Intl.NumberFormat(
 69 |       locale,
 70 |       getDefaultFormatOptions(num, options)
 71 |     ).format(Number(num));
 72 |   }
 73 | 
 74 |   if (
 75 |     !Number.isNaN(Number(num)) &&
 76 |     num !== "" &&
 77 |     localeOptions?.number_format === NumberFormat.none
 78 |   ) {
 79 |     // If NumberFormat is none, use en-US format without grouping.
 80 |     return new Intl.NumberFormat(
 81 |       "en-US",
 82 |       getDefaultFormatOptions(num, {
 83 |         ...options,
 84 |         useGrouping: false,
 85 |       })
 86 |     ).format(Number(num));
 87 |   }
 88 | 
 89 |   if (typeof num === "string") {
 90 |     return num;
 91 |   }
 92 |   return `${round(num, options?.maximumFractionDigits).toString()}${
 93 |     options?.style === "currency" ? ` ${options.currency}` : ""
 94 |   }`;
 95 | };
 96 | 
 97 | /**
 98 |  * Checks if the current entity state should be formatted as an integer based on the `state` and `step` attribute and returns the appropriate `Intl.NumberFormatOptions` object with `maximumFractionDigits` set
 99 |  * @param entityState The state object of the entity
100 |  * @returns An `Intl.NumberFormatOptions` object with `maximumFractionDigits` set to 0, or `undefined`
101 |  */
102 | export const getNumberFormatOptions = (
103 |   entityState?: HassEntity,
104 |   entity?: EntityRegistryDisplayEntry
105 | ): Intl.NumberFormatOptions | undefined => {
106 |   const precision = entity?.display_precision;
107 |   if (precision != null) {
108 |     return {
109 |       maximumFractionDigits: precision,
110 |       minimumFractionDigits: precision,
111 |     };
112 |   }
113 |   if (
114 |     Number.isInteger(Number(entityState?.attributes?.step)) &&
115 |     Number.isInteger(Number(entityState?.state))
116 |   ) {
117 |     return { maximumFractionDigits: 0 };
118 |   }
119 |   return undefined;
120 | };
121 | 
122 | /**
123 |  * Generates default options for Intl.NumberFormat
124 |  * @param num The number to be formatted
125 |  * @param options The Intl.NumberFormatOptions that should be included in the returned options
126 |  */
127 | export const getDefaultFormatOptions = (
128 |   num: string | number,
129 |   options?: Intl.NumberFormatOptions
130 | ): Intl.NumberFormatOptions => {
131 |   const defaultOptions: Intl.NumberFormatOptions = {
132 |     maximumFractionDigits: 2,
133 |     ...options,
134 |   };
135 | 
136 |   if (typeof num !== "string") {
137 |     return defaultOptions;
138 |   }
139 | 
140 |   // Keep decimal trailing zeros if they are present in a string numeric value
141 |   if (
142 |     !options ||
143 |     (options.minimumFractionDigits === undefined &&
144 |       options.maximumFractionDigits === undefined)
145 |   ) {
146 |     const digits = num.indexOf(".") > -1 ? num.split(".")[1].length : 0;
147 |     defaultOptions.minimumFractionDigits = digits;
148 |     defaultOptions.maximumFractionDigits = digits;
149 |   }
150 | 
151 |   return defaultOptions;
152 | };
153 | 


--------------------------------------------------------------------------------
/src/ha/components/ha-camera-stream.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   css,
  3 |   CSSResultGroup,
  4 |   html,
  5 |   LitElement,
  6 |   PropertyValues,
  7 |   nothing,
  8 | } from "lit";
  9 | import { customElement, property, state } from "lit/decorators";
 10 | import { isComponentLoaded } from "../common/config/is_component_loaded";
 11 | import { computeStateName } from "../common/entity/compute_state_name";
 12 | import { supportsFeature } from "../common/entity/supports-feature";
 13 | import {
 14 |   CameraEntity,
 15 |   CAMERA_SUPPORT_STREAM,
 16 |   computeMJPEGStreamUrl,
 17 |   fetchStreamUrl,
 18 |   fetchThumbnailUrlWithCache,
 19 |   STREAM_TYPE_HLS,
 20 |   STREAM_TYPE_WEB_RTC,
 21 | } from "../data/camera";
 22 | import { HomeAssistant } from "../types";
 23 | import "./ha-hls-player";
 24 | import "./ha-web-rtc-player";
 25 | 
 26 | @customElement("ha-camera-stream")
 27 | export class HaCameraStream extends LitElement {
 28 |   @property({ attribute: false }) public hass?: HomeAssistant;
 29 | 
 30 |   @property({ attribute: false }) public stateObj?: CameraEntity;
 31 | 
 32 |   @property({ type: Boolean, attribute: "controls" })
 33 |   public controls = false;
 34 | 
 35 |   @property({ type: Boolean, attribute: "muted" })
 36 |   public muted = false;
 37 | 
 38 |   @property({ type: Boolean, attribute: "allow-exoplayer" })
 39 |   public allowExoPlayer = false;
 40 | 
 41 |   // Video background image before its loaded
 42 |   @state() private _posterUrl?: string;
 43 | 
 44 |   // We keep track if we should force MJPEG if there was a failure
 45 |   // to get the HLS stream url. This is reset if we change entities.
 46 |   @state() private _forceMJPEG?: string;
 47 | 
 48 |   @state() private _url?: string;
 49 | 
 50 |   @state() private _connected = false;
 51 | 
 52 |   public willUpdate(changedProps: PropertyValues): void {
 53 |     if (
 54 |       changedProps.has("stateObj") &&
 55 |       !this._shouldRenderMJPEG &&
 56 |       this.stateObj &&
 57 |       (changedProps.get("stateObj") as CameraEntity | undefined)?.entity_id !==
 58 |         this.stateObj.entity_id
 59 |     ) {
 60 |       this._getPosterUrl();
 61 |       if (this.stateObj!.attributes.frontend_stream_type === STREAM_TYPE_HLS) {
 62 |         this._forceMJPEG = undefined;
 63 |         this._url = undefined;
 64 |         this._getStreamUrl();
 65 |       }
 66 |     }
 67 |   }
 68 | 
 69 |   public connectedCallback() {
 70 |     super.connectedCallback();
 71 |     this._connected = true;
 72 |   }
 73 | 
 74 |   public disconnectedCallback() {
 75 |     super.disconnectedCallback();
 76 |     this._connected = false;
 77 |   }
 78 | 
 79 |   protected render() {
 80 |     if (!this.stateObj) {
 81 |       return nothing;
 82 |     }
 83 |     if (__DEMO__ || this._shouldRenderMJPEG) {
 84 |       return html`<img
 85 |         .src=${__DEMO__
 86 |           ? this.stateObj.attributes.entity_picture!
 87 |           : this._connected
 88 |             ? computeMJPEGStreamUrl(this.stateObj)
 89 |             : ""}
 90 |         .alt=${`Preview of the ${computeStateName(this.stateObj)} camera.`}
 91 |       />`;
 92 |     }
 93 |     if (this.stateObj.attributes.frontend_stream_type === STREAM_TYPE_HLS) {
 94 |       return this._url
 95 |         ? html`<ha-hls-player
 96 |             autoplay
 97 |             playsinline
 98 |             .allowExoPlayer=${this.allowExoPlayer}
 99 |             .muted=${this.muted}
100 |             .controls=${this.controls}
101 |             .hass=${this.hass}
102 |             .url=${this._url}
103 |             .posterUrl=${this._posterUrl}
104 |           ></ha-hls-player>`
105 |         : nothing;
106 |     }
107 |     if (this.stateObj.attributes.frontend_stream_type === STREAM_TYPE_WEB_RTC) {
108 |       return html`<ha-web-rtc-player
109 |         autoplay
110 |         playsinline
111 |         .muted=${this.muted}
112 |         .controls=${this.controls}
113 |         .hass=${this.hass}
114 |         .entityid=${this.stateObj.entity_id}
115 |         .posterUrl=${this._posterUrl}
116 |       ></ha-web-rtc-player>`;
117 |     }
118 |     return nothing;
119 |   }
120 | 
121 |   private get _shouldRenderMJPEG() {
122 |     if (this._forceMJPEG === this.stateObj!.entity_id) {
123 |       // Fallback when unable to fetch stream url
124 |       return true;
125 |     }
126 |     if (!supportsFeature(this.stateObj!, CAMERA_SUPPORT_STREAM)) {
127 |       // Steaming is not supported by the camera so fallback to MJPEG stream
128 |       return true;
129 |     }
130 |     if (
131 |       this.stateObj!.attributes.frontend_stream_type === STREAM_TYPE_WEB_RTC
132 |     ) {
133 |       // Browser support required for WebRTC
134 |       return typeof RTCPeerConnection === "undefined";
135 |     }
136 |     // Server side stream component required for HLS
137 |     return !isComponentLoaded(this.hass!, "stream");
138 |   }
139 | 
140 |   private async _getPosterUrl(): Promise<void> {
141 |     try {
142 |       this._posterUrl = await fetchThumbnailUrlWithCache(
143 |         this.hass!,
144 |         this.stateObj!.entity_id,
145 |         this.clientWidth,
146 |         this.clientHeight
147 |       );
148 |     } catch (err: any) {
149 |       // poster url is optional
150 |       this._posterUrl = undefined;
151 |     }
152 |   }
153 | 
154 |   private async _getStreamUrl(): Promise<void> {
155 |     try {
156 |       const { url } = await fetchStreamUrl(
157 |         this.hass!,
158 |         this.stateObj!.entity_id
159 |       );
160 | 
161 |       this._url = url;
162 |     } catch (err: any) {
163 |       // Fails if we were unable to get a stream
164 |       // eslint-disable-next-line
165 |       console.error(err);
166 | 
167 |       this._forceMJPEG = this.stateObj!.entity_id;
168 |     }
169 |   }
170 | 
171 |   static get styles(): CSSResultGroup {
172 |     return css`
173 |       :host,
174 |       img {
175 |         display: block;
176 |       }
177 | 
178 |       img {
179 |         width: 100%;
180 |       }
181 |     `;
182 |   }
183 | }
184 | 
185 | declare global {
186 |   interface HTMLElementTagNameMap {
187 |     "ha-camera-stream": HaCameraStream;
188 |   }
189 | }
190 | 


--------------------------------------------------------------------------------
/src/utils/form/ha-selector.ts:
--------------------------------------------------------------------------------
  1 | // This file is based on mushroom's src/utils/form/ha-selector.ts
  2 | 
  3 | export type Selector =
  4 |   | ActionSelector
  5 |   | AddonSelector
  6 |   | AreaSelector
  7 |   | AttributeSelector
  8 |   | BooleanSelector
  9 |   | ColorRGBSelector
 10 |   | ColorTempSelector
 11 |   | DateSelector
 12 |   | DateTimeSelector
 13 |   | DeviceSelector
 14 |   | DurationSelector
 15 |   | EntitySelector
 16 |   | IconSelector
 17 |   | LocationSelector
 18 |   | MediaSelector
 19 |   | NumberSelector
 20 |   | ObjectSelector
 21 |   | SelectSelector
 22 |   | StringSelector
 23 |   | TargetSelector
 24 |   | TemplateSelector
 25 |   | ThemeSelector
 26 |   | TimeSelector;
 27 | 
 28 | export interface ActionSelector {
 29 |   // eslint-disable-next-line @typescript-eslint/ban-types
 30 |   action: {};
 31 | }
 32 | 
 33 | export interface AddonSelector {
 34 |   addon: {
 35 |     name?: string;
 36 |     slug?: string;
 37 |   };
 38 | }
 39 | 
 40 | export interface AreaSelector {
 41 |   area: {
 42 |     entity?: {
 43 |       integration?: EntitySelector["entity"]["integration"];
 44 |       domain?: EntitySelector["entity"]["domain"];
 45 |       device_class?: EntitySelector["entity"]["device_class"];
 46 |     };
 47 |     device?: {
 48 |       integration?: DeviceSelector["device"]["integration"];
 49 |       manufacturer?: DeviceSelector["device"]["manufacturer"];
 50 |       model?: DeviceSelector["device"]["model"];
 51 |     };
 52 |     multiple?: boolean;
 53 |   };
 54 | }
 55 | 
 56 | export interface AttributeSelector {
 57 |   attribute: {
 58 |     entity_id?: string;
 59 |   };
 60 | }
 61 | 
 62 | export interface BooleanSelector {
 63 |   // eslint-disable-next-line @typescript-eslint/ban-types
 64 |   boolean: {};
 65 | }
 66 | 
 67 | export interface ColorRGBSelector {
 68 |   // eslint-disable-next-line @typescript-eslint/ban-types
 69 |   color_rgb: {};
 70 | }
 71 | 
 72 | export interface ColorTempSelector {
 73 |   color_temp: {
 74 |     min_mireds?: number;
 75 |     max_mireds?: number;
 76 |   };
 77 | }
 78 | 
 79 | export interface DateSelector {
 80 |   // eslint-disable-next-line @typescript-eslint/ban-types
 81 |   date: {};
 82 | }
 83 | 
 84 | export interface DateTimeSelector {
 85 |   // eslint-disable-next-line @typescript-eslint/ban-types
 86 |   datetime: {};
 87 | }
 88 | 
 89 | export interface DeviceSelector {
 90 |   device: {
 91 |     integration?: string;
 92 |     manufacturer?: string;
 93 |     model?: string;
 94 |     entity?: {
 95 |       domain?: EntitySelector["entity"]["domain"];
 96 |       device_class?: EntitySelector["entity"]["device_class"];
 97 |     };
 98 |     multiple?: boolean;
 99 |   };
100 | }
101 | 
102 | export interface DurationSelector {
103 |   duration: {
104 |     enable_day?: boolean;
105 |   };
106 | }
107 | 
108 | export interface EntitySelector {
109 |   entity: {
110 |     integration?: string;
111 |     domain?: string | string[];
112 |     device_class?: string;
113 |     multiple?: boolean;
114 |     include_entities?: string[];
115 |     exclude_entities?: string[];
116 |   };
117 | }
118 | 
119 | export interface IconSelector {
120 |   icon: {
121 |     placeholder?: string;
122 |     fallbackPath?: string;
123 |   };
124 | }
125 | 
126 | export interface LocationSelector {
127 |   location: { radius?: boolean; icon?: string };
128 | }
129 | 
130 | export interface LocationSelectorValue {
131 |   latitude: number;
132 |   longitude: number;
133 |   radius?: number;
134 | }
135 | 
136 | export interface MediaSelector {
137 |   // eslint-disable-next-line @typescript-eslint/ban-types
138 |   media: {};
139 | }
140 | 
141 | export interface MediaSelectorValue {
142 |   entity_id?: string;
143 |   media_content_id?: string;
144 |   media_content_type?: string;
145 |   metadata?: {
146 |     title?: string;
147 |     thumbnail?: string | null;
148 |     media_class?: string;
149 |     children_media_class?: string | null;
150 |     navigateIds?: { media_content_type: string; media_content_id: string }[];
151 |   };
152 | }
153 | 
154 | export interface NumberSelector {
155 |   number: {
156 |     min?: number;
157 |     max?: number;
158 |     step?: number;
159 |     mode?: "box" | "slider";
160 |     unit_of_measurement?: string;
161 |   };
162 | }
163 | 
164 | export interface ObjectSelector {
165 |   // eslint-disable-next-line @typescript-eslint/ban-types
166 |   object: {};
167 | }
168 | 
169 | export interface SelectOption {
170 |   value: string;
171 |   label: string;
172 | }
173 | 
174 | export interface SelectSelector {
175 |   select: {
176 |     multiple?: boolean;
177 |     custom_value?: boolean;
178 |     mode?: "list" | "dropdown";
179 |     options: string[] | SelectOption[];
180 |   };
181 | }
182 | 
183 | export interface StringSelector {
184 |   text: {
185 |     multiline?: boolean;
186 |     type?:
187 |       | "number"
188 |       | "text"
189 |       | "search"
190 |       | "tel"
191 |       | "url"
192 |       | "email"
193 |       | "password"
194 |       | "date"
195 |       | "month"
196 |       | "week"
197 |       | "time"
198 |       | "datetime-local"
199 |       | "color";
200 |     suffix?: string;
201 |   };
202 | }
203 | 
204 | export interface TargetSelector {
205 |   target: {
206 |     entity?: {
207 |       integration?: EntitySelector["entity"]["integration"];
208 |       domain?: EntitySelector["entity"]["domain"];
209 |       device_class?: EntitySelector["entity"]["device_class"];
210 |     };
211 |     device?: {
212 |       integration?: DeviceSelector["device"]["integration"];
213 |       manufacturer?: DeviceSelector["device"]["manufacturer"];
214 |       model?: DeviceSelector["device"]["model"];
215 |     };
216 |   };
217 | }
218 | 
219 | export interface TemplateSelector {
220 |   // eslint-disable-next-line @typescript-eslint/ban-types
221 |   template: {};
222 | }
223 | 
224 | export interface ThemeSelector {
225 |   // eslint-disable-next-line @typescript-eslint/ban-types
226 |   theme: {};
227 | }
228 | export interface TimeSelector {
229 |   // eslint-disable-next-line @typescript-eslint/ban-types
230 |   time: {};
231 | }
232 | 
233 | // export type UiAction = Exclude<ActionConfig["action"], "fire-dom-event">;
234 | 
235 | // export interface UiActionSelector {
236 | //   ui_action: {
237 | //     actions?: UiAction[];
238 | //   } | null;
239 | // }
240 | 


--------------------------------------------------------------------------------
/src/ha/components/ha-sortable.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable lit/prefer-static-styles */
  2 | import type { PropertyValues } from "lit";
  3 | import { html, LitElement, nothing } from "lit";
  4 | import { customElement, property } from "lit/decorators";
  5 | import type { SortableEvent } from "sortablejs";
  6 | import { fireEvent } from "../common/dom/fire_event";
  7 | import type { SortableInstance } from "../resources/sortable";
  8 | 
  9 | declare global {
 10 |   interface HASSDomEvents {
 11 |     "item-moved": {
 12 |       oldIndex: number;
 13 |       newIndex: number;
 14 |     };
 15 |     "item-added": {
 16 |       index: number;
 17 |       data: any;
 18 |     };
 19 |     "item-removed": {
 20 |       index: number;
 21 |     };
 22 |     "drag-start": undefined;
 23 |     "drag-end": undefined;
 24 |   }
 25 | }
 26 | 
 27 | export type HaSortableOptions = Omit<
 28 |   SortableInstance.SortableOptions,
 29 |   "onStart" | "onChoose" | "onEnd" | "onUpdate" | "onAdd" | "onRemove"
 30 | >;
 31 | 
 32 | @customElement("ha-sortable")
 33 | export class HaSortable extends LitElement {
 34 |   private _sortable?: SortableInstance;
 35 | 
 36 |   @property({ type: Boolean })
 37 |   public disabled = false;
 38 | 
 39 |   @property({ type: Boolean, attribute: "no-style" })
 40 |   public noStyle: boolean = false;
 41 | 
 42 |   @property({ type: String, attribute: "draggable-selector" })
 43 |   public draggableSelector?: string;
 44 | 
 45 |   @property({ type: String, attribute: "handle-selector" })
 46 |   public handleSelector?: string;
 47 | 
 48 |   /**
 49 |    * Selectors that do not lead to dragging (String or Function)
 50 |    * https://github.com/SortableJS/Sortable?tab=readme-ov-file#filter-option
 51 |    * */
 52 |   @property({ type: String, attribute: "filter" })
 53 |   public filter?: string;
 54 | 
 55 |   @property({ type: String })
 56 |   public group?: string | SortableInstance.GroupOptions;
 57 | 
 58 |   @property({ type: Boolean, attribute: "invert-swap" })
 59 |   public invertSwap: boolean = false;
 60 | 
 61 |   @property({ attribute: false })
 62 |   public options?: HaSortableOptions;
 63 | 
 64 |   @property({ type: Boolean })
 65 |   public rollback: boolean = true;
 66 | 
 67 |   protected updated(changedProperties: PropertyValues<this>) {
 68 |     if (changedProperties.has("disabled")) {
 69 |       if (this.disabled) {
 70 |         this._destroySortable();
 71 |       } else {
 72 |         this._createSortable();
 73 |       }
 74 |     }
 75 |   }
 76 | 
 77 |   // Workaround for connectedCallback just after disconnectedCallback (when dragging sortable with sortable children)
 78 |   private _shouldBeDestroy = false;
 79 | 
 80 |   public disconnectedCallback() {
 81 |     super.disconnectedCallback();
 82 |     this._shouldBeDestroy = true;
 83 |     setTimeout(() => {
 84 |       if (this._shouldBeDestroy) {
 85 |         this._destroySortable();
 86 |         this._shouldBeDestroy = false;
 87 |       }
 88 |     }, 1);
 89 |   }
 90 | 
 91 |   public connectedCallback() {
 92 |     super.connectedCallback();
 93 |     this._shouldBeDestroy = false;
 94 |     if (this.hasUpdated && !this.disabled) {
 95 |       this._createSortable();
 96 |     }
 97 |   }
 98 | 
 99 |   protected createRenderRoot() {
100 |     return this;
101 |   }
102 | 
103 |   protected render() {
104 |     if (this.noStyle) return nothing;
105 |     return html`
106 |       <style>
107 |         .sortable-fallback {
108 |           display: none !important;
109 |         }
110 | 
111 |         .sortable-ghost {
112 |           box-shadow: 0 0 0 2px var(--primary-color);
113 |           background: rgba(var(--rgb-primary-color), 0.25);
114 |           border-radius: 4px;
115 |           opacity: 0.4;
116 |         }
117 | 
118 |         .sortable-drag {
119 |           border-radius: 4px;
120 |           opacity: 1;
121 |           background: var(--card-background-color);
122 |           box-shadow: 0px 4px 8px 3px #00000026;
123 |           cursor: grabbing;
124 |         }
125 |       </style>
126 |     `;
127 |   }
128 | 
129 |   private async _createSortable() {
130 |     if (this._sortable) return;
131 |     const container = this.children[0] as HTMLElement | undefined;
132 | 
133 |     if (!container) return;
134 | 
135 |     const Sortable = (await import("../resources/sortable")).default;
136 | 
137 |     const options: SortableInstance.Options = {
138 |       scroll: true,
139 |       // Force the autoscroll fallback because it works better than the native one
140 |       forceAutoScrollFallback: true,
141 |       scrollSpeed: 20,
142 |       animation: 150,
143 |       ...this.options,
144 |       onChoose: this._handleChoose,
145 |       onStart: this._handleStart,
146 |       onEnd: this._handleEnd,
147 |       onUpdate: this._handleUpdate,
148 |       onAdd: this._handleAdd,
149 |       onRemove: this._handleRemove,
150 |     };
151 | 
152 |     if (this.draggableSelector) {
153 |       options.draggable = this.draggableSelector;
154 |     }
155 |     if (this.handleSelector) {
156 |       options.handle = this.handleSelector;
157 |     }
158 |     if (this.invertSwap !== undefined) {
159 |       options.invertSwap = this.invertSwap;
160 |     }
161 |     if (this.group) {
162 |       options.group = this.group;
163 |     }
164 |     if (this.filter) {
165 |       options.filter = this.filter;
166 |     }
167 | 
168 |     this._sortable = new Sortable(container, options);
169 |   }
170 | 
171 |   private _handleUpdate = (evt) => {
172 |     fireEvent(this, "item-moved", {
173 |       newIndex: evt.newIndex,
174 |       oldIndex: evt.oldIndex,
175 |     });
176 |   };
177 | 
178 |   private _handleAdd = (evt) => {
179 |     fireEvent(this, "item-added", {
180 |       index: evt.newIndex,
181 |       data: evt.item.sortableData,
182 |     });
183 |   };
184 | 
185 |   private _handleRemove = (evt) => {
186 |     fireEvent(this, "item-removed", { index: evt.oldIndex });
187 |   };
188 | 
189 |   private _handleEnd = async (evt) => {
190 |     fireEvent(this, "drag-end");
191 |     // put back in original location
192 |     if (this.rollback && (evt.item as any).placeholder) {
193 |       (evt.item as any).placeholder.replaceWith(evt.item);
194 |       delete (evt.item as any).placeholder;
195 |     }
196 |   };
197 | 
198 |   private _handleStart = () => {
199 |     fireEvent(this, "drag-start");
200 |   };
201 | 
202 |   private _handleChoose = (evt: SortableEvent) => {
203 |     if (!this.rollback) return;
204 |     (evt.item as any).placeholder = document.createComment("sort-placeholder");
205 |     evt.item.after((evt.item as any).placeholder);
206 |   };
207 | 
208 |   private _destroySortable() {
209 |     if (!this._sortable) return;
210 |     this._sortable.destroy();
211 |     this._sortable = undefined;
212 |   }
213 | }
214 | 
215 | declare global {
216 |   interface HTMLElementTagNameMap {
217 |     "ha-sortable": HaSortable;
218 |   }
219 | }
220 | 


--------------------------------------------------------------------------------
/src/ha/common/dom/apply_themes_on_element.ts:
--------------------------------------------------------------------------------
  1 | import { ThemeVars } from "../../data/ws-themes";
  2 | import { darkStyles, derivedStyles } from "../../resources/styles-data";
  3 | import type { HomeAssistant } from "../../types";
  4 | import {
  5 |   hex2rgb,
  6 |   lab2hex,
  7 |   lab2rgb,
  8 |   rgb2hex,
  9 |   rgb2lab,
 10 | } from "../color/convert-color";
 11 | import { hexBlend } from "../color/hex";
 12 | import { labBrighten, labDarken } from "../color/lab";
 13 | import { rgbContrast } from "../color/rgb";
 14 | 
 15 | interface ProcessedTheme {
 16 |   keys: { [key: string]: "" };
 17 |   styles: Record<string, string>;
 18 | }
 19 | 
 20 | let PROCESSED_THEMES: Record<string, ProcessedTheme> = {};
 21 | 
 22 | /**
 23 |  * Apply a theme to an element by setting the CSS variables on it.
 24 |  *
 25 |  * element: Element to apply theme on.
 26 |  * themes: HASS theme information (e.g. active dark mode and globally active theme name).
 27 |  * selectedTheme: Selected theme (used to override the globally active theme for this element).
 28 |  * themeSettings: Additional settings such as selected colors.
 29 |  */
 30 | export const applyThemesOnElement = (
 31 |   element,
 32 |   themes: HomeAssistant["themes"],
 33 |   selectedTheme?: string,
 34 |   themeSettings?: Partial<HomeAssistant["selectedTheme"]>,
 35 |   main?: boolean
 36 | ) => {
 37 |   // If there is no explicitly desired theme provided, and the element is the main element we automatically
 38 |   // use the active one from `themes`.
 39 |   const themeToApply = selectedTheme || (main ? themes.theme : undefined);
 40 | 
 41 |   // If there is no explicitly desired dark mode provided, we automatically
 42 |   // use the active one from `themes`.
 43 |   const darkMode =
 44 |     themeSettings?.dark !== undefined
 45 |       ? themeSettings.dark
 46 |       : themes?.darkMode || false;
 47 | 
 48 |   let cacheKey = themeToApply;
 49 |   let themeRules: Partial<ThemeVars> = {};
 50 | 
 51 |   if (themeToApply && darkMode) {
 52 |     cacheKey = `${cacheKey}__dark`;
 53 |     themeRules = { ...darkStyles };
 54 |   }
 55 | 
 56 |   if (themeToApply === "default") {
 57 |     // Determine the primary and accent colors from the current settings.
 58 |     // Fallbacks are implicitly the HA default blue and orange or the
 59 |     // derived "darkStyles" values, depending on the light vs dark mode.
 60 |     const primaryColor = themeSettings?.primaryColor;
 61 |     const accentColor = themeSettings?.accentColor;
 62 | 
 63 |     if (darkMode && primaryColor) {
 64 |       themeRules["app-theme-color"] = hexBlend(primaryColor, "#121212", 8);
 65 |       themeRules["app-header-background-color"] = themeRules["app-theme-color"];
 66 |     }
 67 | 
 68 |     if (primaryColor) {
 69 |       cacheKey = `${cacheKey}__primary_${primaryColor}`;
 70 |       const rgbPrimaryColor = hex2rgb(primaryColor);
 71 |       const labPrimaryColor = rgb2lab(rgbPrimaryColor);
 72 |       themeRules["primary-color"] = primaryColor;
 73 |       const rgbLightPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
 74 |       themeRules["light-primary-color"] = rgb2hex(rgbLightPrimaryColor);
 75 |       themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
 76 |       themeRules["text-primary-color"] =
 77 |         rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
 78 |       themeRules["text-light-primary-color"] =
 79 |         rgbContrast(rgbLightPrimaryColor, [33, 33, 33]) < 6
 80 |           ? "#fff"
 81 |           : "#212121";
 82 |       themeRules["state-icon-color"] = themeRules["dark-primary-color"];
 83 |     }
 84 |     if (accentColor) {
 85 |       cacheKey = `${cacheKey}__accent_${accentColor}`;
 86 |       themeRules["accent-color"] = accentColor;
 87 |       const rgbAccentColor = hex2rgb(accentColor);
 88 |       themeRules["text-accent-color"] =
 89 |         rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
 90 |     }
 91 | 
 92 |     // Nothing was changed
 93 |     if (element.__themes?.cacheKey === cacheKey) {
 94 |       return;
 95 |     }
 96 |   }
 97 | 
 98 |   // Custom theme logic (not relevant for default theme, since it would override
 99 |   // the derived calculations from above)
100 |   if (
101 |     themeToApply &&
102 |     themeToApply !== "default" &&
103 |     themes.themes[themeToApply]
104 |   ) {
105 |     // Apply theme vars that are relevant for all modes (but extract the "modes" section first)
106 |     const { modes, ...baseThemeRules } = themes.themes[themeToApply];
107 |     themeRules = { ...themeRules, ...baseThemeRules };
108 | 
109 |     // Apply theme vars for the specific mode if available
110 |     if (modes) {
111 |       if (darkMode) {
112 |         themeRules = { ...themeRules, ...modes.dark };
113 |       } else {
114 |         themeRules = { ...themeRules, ...modes.light };
115 |       }
116 |     }
117 |   }
118 | 
119 |   if (!element.__themes?.keys && !Object.keys(themeRules).length) {
120 |     // No styles to reset, and no styles to set
121 |     return;
122 |   }
123 | 
124 |   const newTheme =
125 |     Object.keys(themeRules).length && cacheKey
126 |       ? PROCESSED_THEMES[cacheKey] || processTheme(cacheKey, themeRules)
127 |       : undefined;
128 | 
129 |   // Add previous set keys to reset them, and new theme
130 |   const styles = { ...element.__themes?.keys, ...newTheme?.styles };
131 |   element.__themes = { cacheKey, keys: newTheme?.keys };
132 | 
133 |   // Set and/or reset styles
134 |   if (element.updateStyles) {
135 |     // Use updateStyles() method of Polymer elements
136 |     element.updateStyles(styles);
137 |   } else if (window.ShadyCSS) {
138 |     // Use ShadyCSS if available
139 |     window.ShadyCSS.styleSubtree(/** @type {!HTMLElement} */ element, styles);
140 |   } else {
141 |     for (const s in styles) {
142 |       if (s === null) {
143 |         element.style.removeProperty(s);
144 |       } else {
145 |         element.style.setProperty(s, styles[s]);
146 |       }
147 |     }
148 |   }
149 | };
150 | 
151 | const processTheme = (
152 |   cacheKey: string,
153 |   theme: Partial<ThemeVars>
154 | ): ProcessedTheme | undefined => {
155 |   if (!theme || !Object.keys(theme).length) {
156 |     return undefined;
157 |   }
158 |   const combinedTheme: Partial<ThemeVars> = {
159 |     ...derivedStyles,
160 |     ...theme,
161 |   };
162 |   const styles = {};
163 |   const keys = {};
164 |   for (const key of Object.keys(combinedTheme)) {
165 |     const prefixedKey = `--${key}`;
166 |     const value = String(combinedTheme[key]);
167 |     styles[prefixedKey] = value;
168 |     keys[prefixedKey] = "";
169 | 
170 |     // Try to create a rgb value for this key if it is not a var
171 |     if (!value.startsWith("#")) {
172 |       // Can't convert non hex value
173 |       continue;
174 |     }
175 | 
176 |     const rgbKey = `rgb-${key}`;
177 |     if (combinedTheme[rgbKey] !== undefined) {
178 |       // Theme has it's own rgb value
179 |       continue;
180 |     }
181 |     try {
182 |       const rgbValue = hex2rgb(value).join(",");
183 |       const prefixedRgbKey = `--${rgbKey}`;
184 |       styles[prefixedRgbKey] = rgbValue;
185 |       keys[prefixedRgbKey] = "";
186 |     } catch (err: any) {
187 |       continue;
188 |     }
189 |   }
190 |   PROCESSED_THEMES[cacheKey] = { styles, keys };
191 |   return { styles, keys };
192 | };
193 | 
194 | export const invalidateThemeCache = () => {
195 |   PROCESSED_THEMES = {};
196 | };
197 | 


--------------------------------------------------------------------------------
/src/ha/components/ha-textfield.ts:
--------------------------------------------------------------------------------
  1 | import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
  2 | import { styles } from "@material/mwc-textfield/mwc-textfield.css";
  3 | import type { TemplateResult, PropertyValues } from "lit";
  4 | import { html, css } from "lit";
  5 | import { customElement, property, query } from "lit/decorators";
  6 | import { mainWindow } from "../common/dom/get_main_window";
  7 | 
  8 | @customElement("ha-textfield")
  9 | export class HaTextField extends TextFieldBase {
 10 |   @property({ type: Boolean }) public invalid?: boolean;
 11 | 
 12 |   @property({ attribute: "error-message" }) public errorMessage?: string;
 13 | 
 14 |   // @ts-ignore
 15 |   @property({ type: Boolean }) public icon = false;
 16 | 
 17 |   // @ts-ignore
 18 |   @property({ type: Boolean }) public iconTrailing = false;
 19 | 
 20 |   @property() public autocomplete?: string;
 21 | 
 22 |   @property() public autocorrect?: string;
 23 | 
 24 |   @property({ attribute: "input-spellcheck" })
 25 |   public inputSpellcheck?: string;
 26 | 
 27 |   @query("input") public formElement!: HTMLInputElement;
 28 | 
 29 |   override updated(changedProperties: PropertyValues) {
 30 |     super.updated(changedProperties);
 31 |     if (
 32 |       changedProperties.has("invalid") ||
 33 |       changedProperties.has("errorMessage")
 34 |     ) {
 35 |       this.setCustomValidity(
 36 |         this.invalid
 37 |           ? this.errorMessage || this.validationMessage || "Invalid"
 38 |           : ""
 39 |       );
 40 |       if (
 41 |         this.invalid ||
 42 |         this.validateOnInitialRender ||
 43 |         (changedProperties.has("invalid") &&
 44 |           changedProperties.get("invalid") !== undefined)
 45 |       ) {
 46 |         // Only report validity if the field is invalid or the invalid state has changed from
 47 |         // true to false to prevent setting empty required fields to invalid on first render
 48 |         this.reportValidity();
 49 |       }
 50 |     }
 51 |     if (changedProperties.has("autocomplete")) {
 52 |       if (this.autocomplete) {
 53 |         this.formElement.setAttribute("autocomplete", this.autocomplete);
 54 |       } else {
 55 |         this.formElement.removeAttribute("autocomplete");
 56 |       }
 57 |     }
 58 |     if (changedProperties.has("autocorrect")) {
 59 |       if (this.autocorrect) {
 60 |         this.formElement.setAttribute("autocorrect", this.autocorrect);
 61 |       } else {
 62 |         this.formElement.removeAttribute("autocorrect");
 63 |       }
 64 |     }
 65 |     if (changedProperties.has("inputSpellcheck")) {
 66 |       if (this.inputSpellcheck) {
 67 |         this.formElement.setAttribute("spellcheck", this.inputSpellcheck);
 68 |       } else {
 69 |         this.formElement.removeAttribute("spellcheck");
 70 |       }
 71 |     }
 72 |   }
 73 | 
 74 |   protected override renderIcon(
 75 |     _icon: string,
 76 |     isTrailingIcon = false
 77 |   ): TemplateResult {
 78 |     const type = isTrailingIcon ? "trailing" : "leading";
 79 | 
 80 |     return html`
 81 |       <span
 82 |         class="mdc-text-field__icon mdc-text-field__icon--${type}"
 83 |         tabindex=${isTrailingIcon ? 1 : -1}
 84 |       >
 85 |         <slot name="${type}Icon"></slot>
 86 |       </span>
 87 |     `;
 88 |   }
 89 | 
 90 |   static override styles = [
 91 |     styles,
 92 |     css`
 93 |       .mdc-text-field__input {
 94 |         width: var(--ha-textfield-input-width, 100%);
 95 |       }
 96 |       .mdc-text-field:not(.mdc-text-field--with-leading-icon) {
 97 |         padding: var(--text-field-padding, 0px 16px);
 98 |       }
 99 |       .mdc-text-field__affix--suffix {
100 |         padding-left: var(--text-field-suffix-padding-left, 12px);
101 |         padding-right: var(--text-field-suffix-padding-right, 0px);
102 |         padding-inline-start: var(--text-field-suffix-padding-left, 12px);
103 |         padding-inline-end: var(--text-field-suffix-padding-right, 0px);
104 |         direction: ltr;
105 |       }
106 |       .mdc-text-field--with-leading-icon {
107 |         padding-inline-start: var(--text-field-suffix-padding-left, 0px);
108 |         padding-inline-end: var(--text-field-suffix-padding-right, 16px);
109 |         direction: var(--direction);
110 |       }
111 | 
112 |       .mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
113 |         padding-left: var(--text-field-suffix-padding-left, 0px);
114 |         padding-right: var(--text-field-suffix-padding-right, 0px);
115 |         padding-inline-start: var(--text-field-suffix-padding-left, 0px);
116 |         padding-inline-end: var(--text-field-suffix-padding-right, 0px);
117 |       }
118 |       .mdc-text-field:not(.mdc-text-field--disabled)
119 |         .mdc-text-field__affix--suffix {
120 |         color: var(--secondary-text-color);
121 |       }
122 | 
123 |       .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
124 |         color: var(--secondary-text-color);
125 |       }
126 | 
127 |       .mdc-text-field__icon--leading {
128 |         margin-inline-start: 16px;
129 |         margin-inline-end: 8px;
130 |         direction: var(--direction);
131 |       }
132 | 
133 |       .mdc-text-field__icon--trailing {
134 |         padding: var(--textfield-icon-trailing-padding, 12px);
135 |       }
136 | 
137 |       .mdc-floating-label:not(.mdc-floating-label--float-above) {
138 |         text-overflow: ellipsis;
139 |         width: inherit;
140 |         padding-right: 30px;
141 |         padding-inline-end: 30px;
142 |         padding-inline-start: initial;
143 |         box-sizing: border-box;
144 |         direction: var(--direction);
145 |       }
146 | 
147 |       input {
148 |         text-align: var(--text-field-text-align, start);
149 |       }
150 | 
151 |       /* Edge, hide reveal password icon */
152 |       ::-ms-reveal {
153 |         display: none;
154 |       }
155 | 
156 |       /* Chrome, Safari, Edge, Opera */
157 |       :host([no-spinner]) input::-webkit-outer-spin-button,
158 |       :host([no-spinner]) input::-webkit-inner-spin-button {
159 |         -webkit-appearance: none;
160 |         margin: 0;
161 |       }
162 | 
163 |       /* Firefox */
164 |       :host([no-spinner]) input[type="number"] {
165 |         -moz-appearance: textfield;
166 |       }
167 | 
168 |       .mdc-text-field__ripple {
169 |         overflow: hidden;
170 |       }
171 | 
172 |       .mdc-text-field {
173 |         overflow: var(--text-field-overflow);
174 |       }
175 | 
176 |       .mdc-floating-label {
177 |         inset-inline-start: 16px !important;
178 |         inset-inline-end: initial !important;
179 |         transform-origin: var(--float-start);
180 |         direction: var(--direction);
181 |         text-align: var(--float-start);
182 |       }
183 | 
184 |       .mdc-text-field--with-leading-icon.mdc-text-field--filled
185 |         .mdc-floating-label {
186 |         max-width: calc(
187 |           100% - 48px - var(--text-field-suffix-padding-left, 0px)
188 |         );
189 |         inset-inline-start: calc(
190 |           48px + var(--text-field-suffix-padding-left, 0px)
191 |         ) !important;
192 |         inset-inline-end: initial !important;
193 |         direction: var(--direction);
194 |       }
195 | 
196 |       .mdc-text-field__input[type="number"] {
197 |         direction: var(--direction);
198 |       }
199 |       .mdc-text-field__affix--prefix {
200 |         padding-right: var(--text-field-prefix-padding-right, 2px);
201 |         padding-inline-end: var(--text-field-prefix-padding-right, 2px);
202 |         padding-inline-start: initial;
203 |       }
204 | 
205 |       .mdc-text-field:not(.mdc-text-field--disabled)
206 |         .mdc-text-field__affix--prefix {
207 |         color: var(--mdc-text-field-label-ink-color);
208 |       }
209 |     `,
210 |     // safari workaround - must be explicit
211 |     mainWindow.document.dir === "rtl"
212 |       ? css`
213 |           .mdc-text-field--with-leading-icon,
214 |           .mdc-text-field__icon--leading,
215 |           .mdc-floating-label,
216 |           .mdc-text-field--with-leading-icon.mdc-text-field--filled
217 |             .mdc-floating-label,
218 |           .mdc-text-field__input[type="number"] {
219 |             direction: rtl;
220 |             --direction: rtl;
221 |           }
222 |         `
223 |       : css``,
224 |   ];
225 | }
226 | 
227 | declare global {
228 |   interface HTMLElementTagNameMap {
229 |     "ha-textfield": HaTextField;
230 |   }
231 | }
232 | 


--------------------------------------------------------------------------------
/src/ha/panels/lovelace/editor/hui-entities-card-row-editor.ts:
--------------------------------------------------------------------------------
  1 | import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
  2 | import type { CSSResultGroup } from "lit";
  3 | import { LitElement, css, html, nothing } from "lit";
  4 | import { customElement, property } from "lit/decorators.js";
  5 | import { repeat } from "lit/directives/repeat";
  6 | import { fireEvent } from "../../../common/dom/fire_event";
  7 | import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
  8 | import type { HomeAssistant } from "../../../types";
  9 | import type { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
 10 | 
 11 | declare global {
 12 |   interface HASSDomEvents {
 13 |     "entities-changed": {
 14 |       entities: LovelaceRowConfig[];
 15 |     };
 16 |   }
 17 | }
 18 | 
 19 | @customElement("elec-sankey-hui-entities-card-row-editor")
 20 | export class HuiEntitiesCardRowEditor extends LitElement {
 21 |   @property({ attribute: false }) public hass?: HomeAssistant;
 22 | 
 23 |   @property({ attribute: false }) public entities?: LovelaceRowConfig[];
 24 | 
 25 |   @property() public includeDeviceClasses?: string[];
 26 | 
 27 |   @property() public label?: string;
 28 | 
 29 |   @property() public subLabel?: string;
 30 | 
 31 |   private _entityKeys = new WeakMap<LovelaceRowConfig, string>();
 32 | 
 33 |   private _getKey(action: LovelaceRowConfig) {
 34 |     if (!this._entityKeys.has(action)) {
 35 |       this._entityKeys.set(action, Math.random().toString());
 36 |     }
 37 | 
 38 |     return this._entityKeys.get(action)!;
 39 |   }
 40 | 
 41 |   protected render() {
 42 |     if (!this.entities || !this.hass) {
 43 |       return nothing;
 44 |     }
 45 |     const deviceClassesFilter = this.includeDeviceClasses
 46 |       ? '["' + this.includeDeviceClasses?.join('","') + '"]'
 47 |       : "";
 48 | 
 49 |     return html`
 50 |       <h3>
 51 |         ${this.label ||
 52 |       `${this.hass!.localize(
 53 |         "ui.panel.lovelace.editor.card.generic.entities"
 54 |       )} (${this.hass!.localize(
 55 |         "ui.panel.lovelace.editor.card.config.required"
 56 |       )})`}
 57 |       </h3>
 58 |       <ha-sortable handle-selector=".handle" @item-moved=${this._rowMoved}>
 59 |         <div class="entities">
 60 |           ${repeat(
 61 |         this.entities,
 62 |         (entityConf) => this._getKey(entityConf),
 63 |         (entityConf, index) => html`
 64 |               <div class="entity">
 65 |                 <div class="handle">
 66 |                   <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
 67 |                 </div>
 68 |                 ${entityConf.type
 69 |             ? html`
 70 |                       <div class="special-row">
 71 |                         <div>
 72 |                           <span>
 73 |                             ${this.hass!.localize(
 74 |               `ui.panel.lovelace.editor.card.entities.entity_row.${entityConf.type}`
 75 |             )}
 76 |                           </span>
 77 |                           <span class="secondary"
 78 |                             >${this.hass!.localize(
 79 |               "ui.panel.lovelace.editor.card.entities.edit_special_row"
 80 |             )}</span
 81 |                           >
 82 |                         </div>
 83 |                       </div>
 84 |                     `
 85 |             : html`
 86 |                       <ha-entity-picker
 87 |                         allow-custom-entity
 88 |                         include-device-classes=${deviceClassesFilter}
 89 |                         hideClearIcon
 90 |                         label=${this.subLabel || nothing}
 91 |                         .hass=${this.hass}
 92 |                         .value=${(entityConf as EntityConfig).entity}
 93 |                         .index=${index}
 94 |                         @value-changed=${this._valueChanged}
 95 |                       ></ha-entity-picker>
 96 |                     `}
 97 |                 <ha-icon-button
 98 |                   .label=${this.hass!.localize(
 99 |               "ui.components.entity.entity-picker.clear"
100 |             )}
101 |                   .path=${mdiClose}
102 |                   class="remove-icon"
103 |                   .index=${index}
104 |                   @click=${this._removeRow}
105 |                 ></ha-icon-button>
106 |               </div>
107 |             `
108 |       )}
109 |         </div>
110 |       </ha-sortable>
111 |       <ha-entity-picker
112 |         class="add-entity"
113 |         include-device-classes=${deviceClassesFilter}
114 |         label=${this.subLabel || nothing}
115 |         .hass=${this.hass}
116 |         @value-changed=${this._addEntity}
117 |       ></ha-entity-picker>
118 |     `;
119 |   }
120 | 
121 |   private async _addEntity(ev: CustomEvent): Promise<void> {
122 |     const value = ev.detail.value;
123 |     if (value === "") {
124 |       return;
125 |     }
126 |     const newConfigEntities = this.entities!.concat({
127 |       entity: value as string,
128 |     });
129 |     (ev.target as HaEntityPicker).value = "";
130 |     fireEvent(this, "entities-changed", { entities: newConfigEntities });
131 |   }
132 | 
133 |   private _rowMoved(ev: CustomEvent): void {
134 |     ev.stopPropagation();
135 |     const { oldIndex, newIndex } = ev.detail;
136 | 
137 |     const newEntities = this.entities!.concat();
138 | 
139 |     newEntities.splice(newIndex, 0, newEntities.splice(oldIndex, 1)[0]);
140 | 
141 |     fireEvent(this, "entities-changed", { entities: newEntities });
142 |   }
143 | 
144 |   private _removeRow(ev: CustomEvent): void {
145 |     const index = (ev.currentTarget as any).index;
146 |     const newConfigEntities = this.entities!.concat();
147 | 
148 |     newConfigEntities.splice(index, 1);
149 | 
150 |     fireEvent(this, "entities-changed", { entities: newConfigEntities });
151 |   }
152 | 
153 |   private _valueChanged(ev: CustomEvent): void {
154 |     const value = ev.detail.value;
155 |     const index = (ev.target as any).index;
156 |     const newConfigEntities = this.entities!.concat();
157 | 
158 |     if (value === "" || value === undefined) {
159 |       newConfigEntities.splice(index, 1);
160 |     } else {
161 |       newConfigEntities[index] = {
162 |         ...newConfigEntities[index],
163 |         entity: value!,
164 |       };
165 |     }
166 | 
167 |     fireEvent(this, "entities-changed", { entities: newConfigEntities });
168 |   }
169 | 
170 |   private _editRow(ev: CustomEvent): void {
171 |     const index = (ev.currentTarget as any).index;
172 |     fireEvent(this, "edit-detail-element", {
173 |       subElementConfig: {
174 |         index,
175 |         type: "row",
176 |         elementConfig: this.entities![index],
177 |       },
178 |     });
179 |   }
180 | 
181 |   static get styles(): CSSResultGroup {
182 |     return css`
183 |       ha-entity-picker {
184 |         margin-top: 8px;
185 |       }
186 |       .add-entity {
187 |         display: block;
188 |         margin-left: 31px;
189 |         margin-right: 71px;
190 |         margin-inline-start: 31px;
191 |         margin-inline-end: 71px;
192 |         direction: var(--direction);
193 |       }
194 |       .entity {
195 |         display: flex;
196 |         align-items: center;
197 |       }
198 | 
199 |       .entity .handle {
200 |         padding-right: 8px;
201 |         cursor: move; /* fallback if grab cursor is unsupported */
202 |         cursor: grab;
203 |         padding-inline-end: 8px;
204 |         padding-inline-start: initial;
205 |         direction: var(--direction);
206 |       }
207 |       .entity .handle > * {
208 |         pointer-events: none;
209 |       }
210 | 
211 |       .entity ha-entity-picker {
212 |         flex-grow: 1;
213 |       }
214 | 
215 |       .special-row {
216 |         height: 60px;
217 |         font-size: 16px;
218 |         display: flex;
219 |         align-items: center;
220 |         justify-content: space-between;
221 |         flex-grow: 1;
222 |       }
223 | 
224 |       .special-row div {
225 |         display: flex;
226 |         flex-direction: column;
227 |       }
228 | 
229 |       .remove-icon,
230 |       .edit-icon {
231 |         --mdc-icon-button-size: 36px;
232 |         color: var(--secondary-text-color);
233 |       }
234 | 
235 |       .secondary {
236 |         font-size: 12px;
237 |         color: var(--secondary-text-color);
238 |       }
239 |     `;
240 |   }
241 | }
242 | 
243 | declare global {
244 |   interface HTMLElementTagNameMap {
245 |     "elec-sankey-hui-entities-card-row-editor": HuiEntitiesCardRowEditor;
246 |   }
247 | }
248 | 


--------------------------------------------------------------------------------
/src/ha/common/const.ts:
--------------------------------------------------------------------------------
  1 | /** Constants to be used in the frontend. */
  2 | 
  3 | import {
  4 |   mdiAccount,
  5 |   mdiAirFilter,
  6 |   mdiAlert,
  7 |   mdiAngleAcute,
  8 |   mdiAppleSafari,
  9 |   mdiArrowLeftRight,
 10 |   mdiBell,
 11 |   mdiBookmark,
 12 |   mdiBrightness5,
 13 |   mdiBullhorn,
 14 |   mdiButtonPointer,
 15 |   mdiCalendar,
 16 |   mdiCalendarClock,
 17 |   mdiCarCoolantLevel,
 18 |   mdiCash,
 19 |   mdiChatSleep,
 20 |   mdiClipboardList,
 21 |   mdiClock,
 22 |   mdiCog,
 23 |   mdiCommentAlert,
 24 |   mdiCounter,
 25 |   mdiCurrentAc,
 26 |   mdiDatabase,
 27 |   mdiEarHearing,
 28 |   mdiEye,
 29 |   mdiFlash,
 30 |   mdiFlower,
 31 |   mdiFormatListBulleted,
 32 |   mdiFormatListCheckbox,
 33 |   mdiFormTextbox,
 34 |   mdiGauge,
 35 |   mdiGoogleAssistant,
 36 |   mdiGoogleCirclesCommunities,
 37 |   mdiHomeAutomation,
 38 |   mdiImage,
 39 |   mdiImageFilterFrames,
 40 |   mdiLightbulb,
 41 |   mdiLightningBolt,
 42 |   mdiMailbox,
 43 |   mdiMapMarkerRadius,
 44 |   mdiMeterGas,
 45 |   mdiMicrophoneMessage,
 46 |   mdiMolecule,
 47 |   mdiMoleculeCo,
 48 |   mdiMoleculeCo2,
 49 |   mdiPalette,
 50 |   mdiPh,
 51 |   mdiPipe,
 52 |   mdiProgressClock,
 53 |   mdiRayVertex,
 54 |   mdiRemote,
 55 |   mdiRobot,
 56 |   mdiRobotMower,
 57 |   mdiRobotVacuum,
 58 |   mdiRoomService,
 59 |   mdiScriptText,
 60 |   mdiSineWave,
 61 |   mdiSpeakerMessage,
 62 |   mdiSpeedometer,
 63 |   mdiSunWireless,
 64 |   mdiThermometer,
 65 |   mdiThermometerLines,
 66 |   mdiThermostat,
 67 |   mdiTimerOutline,
 68 |   mdiToggleSwitch,
 69 |   mdiTransmissionTower,
 70 |   mdiWater,
 71 |   mdiWaterPercent,
 72 |   mdiWeatherPartlyCloudy,
 73 |   mdiWeatherPouring,
 74 |   mdiWeatherRainy,
 75 |   mdiWeatherWindy,
 76 |   mdiWeight,
 77 |   mdiWhiteBalanceSunny,
 78 |   mdiWifi,
 79 | } from "@mdi/js";
 80 | 
 81 | import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
 82 | 
 83 | // Constants should be alphabetically sorted by name.
 84 | // Arrays with values should be alphabetically sorted if order doesn't matter.
 85 | // Each constant should have a description what it is supposed to be used for.
 86 | 
 87 | /** Icon to use when no icon specified for service. */
 88 | export const DEFAULT_SERVICE_ICON = mdiRoomService;
 89 | 
 90 | /** Icon to use when no icon specified for domain. */
 91 | export const DEFAULT_DOMAIN_ICON = mdiBookmark;
 92 | 
 93 | /** Icons for each domain */
 94 | export const FIXED_DOMAIN_ICONS = {
 95 |   air_quality: mdiAirFilter,
 96 |   alert: mdiAlert,
 97 |   automation: mdiRobot,
 98 |   calendar: mdiCalendar,
 99 |   climate: mdiThermostat,
100 |   configurator: mdiCog,
101 |   conversation: mdiMicrophoneMessage,
102 |   counter: mdiCounter,
103 |   date: mdiCalendar,
104 |   datetime: mdiCalendarClock,
105 |   demo: mdiHomeAssistant,
106 |   device_tracker: mdiAccount,
107 |   google_assistant: mdiGoogleAssistant,
108 |   group: mdiGoogleCirclesCommunities,
109 |   homeassistant: mdiHomeAssistant,
110 |   homekit: mdiHomeAutomation,
111 |   image_processing: mdiImageFilterFrames,
112 |   image: mdiImage,
113 |   input_boolean: mdiToggleSwitch,
114 |   input_button: mdiButtonPointer,
115 |   input_datetime: mdiCalendarClock,
116 |   input_number: mdiRayVertex,
117 |   input_select: mdiFormatListBulleted,
118 |   input_text: mdiFormTextbox,
119 |   lawn_mower: mdiRobotMower,
120 |   light: mdiLightbulb,
121 |   mailbox: mdiMailbox,
122 |   notify: mdiCommentAlert,
123 |   number: mdiRayVertex,
124 |   persistent_notification: mdiBell,
125 |   person: mdiAccount,
126 |   plant: mdiFlower,
127 |   proximity: mdiAppleSafari,
128 |   remote: mdiRemote,
129 |   scene: mdiPalette,
130 |   schedule: mdiCalendarClock,
131 |   script: mdiScriptText,
132 |   select: mdiFormatListBulleted,
133 |   sensor: mdiEye,
134 |   simple_alarm: mdiBell,
135 |   siren: mdiBullhorn,
136 |   stt: mdiMicrophoneMessage,
137 |   sun: mdiWhiteBalanceSunny,
138 |   text: mdiFormTextbox,
139 |   time: mdiClock,
140 |   timer: mdiTimerOutline,
141 |   todo: mdiClipboardList,
142 |   tts: mdiSpeakerMessage,
143 |   vacuum: mdiRobotVacuum,
144 |   wake_word: mdiChatSleep,
145 |   weather: mdiWeatherPartlyCloudy,
146 |   zone: mdiMapMarkerRadius,
147 | };
148 | 
149 | export const FIXED_DEVICE_CLASS_ICONS = {
150 |   apparent_power: mdiFlash,
151 |   aqi: mdiAirFilter,
152 |   atmospheric_pressure: mdiThermometerLines,
153 |   // battery: mdiBattery, => not included by design since `sensorIcon()` will dynamically determine the icon
154 |   carbon_dioxide: mdiMoleculeCo2,
155 |   carbon_monoxide: mdiMoleculeCo,
156 |   current: mdiCurrentAc,
157 |   data_rate: mdiTransmissionTower,
158 |   data_size: mdiDatabase,
159 |   date: mdiCalendar,
160 |   distance: mdiArrowLeftRight,
161 |   duration: mdiProgressClock,
162 |   energy: mdiLightningBolt,
163 |   frequency: mdiSineWave,
164 |   gas: mdiMeterGas,
165 |   humidity: mdiWaterPercent,
166 |   illuminance: mdiBrightness5,
167 |   irradiance: mdiSunWireless,
168 |   moisture: mdiWaterPercent,
169 |   monetary: mdiCash,
170 |   nitrogen_dioxide: mdiMolecule,
171 |   nitrogen_monoxide: mdiMolecule,
172 |   nitrous_oxide: mdiMolecule,
173 |   ozone: mdiMolecule,
174 |   ph: mdiPh,
175 |   pm1: mdiMolecule,
176 |   pm10: mdiMolecule,
177 |   pm25: mdiMolecule,
178 |   power: mdiFlash,
179 |   power_factor: mdiAngleAcute,
180 |   precipitation: mdiWeatherRainy,
181 |   precipitation_intensity: mdiWeatherPouring,
182 |   pressure: mdiGauge,
183 |   reactive_power: mdiFlash,
184 |   shopping_List: mdiFormatListCheckbox,
185 |   signal_strength: mdiWifi,
186 |   sound_pressure: mdiEarHearing,
187 |   speed: mdiSpeedometer,
188 |   sulphur_dioxide: mdiMolecule,
189 |   temperature: mdiThermometer,
190 |   timestamp: mdiClock,
191 |   volatile_organic_compounds: mdiMolecule,
192 |   volatile_organic_compounds_parts: mdiMolecule,
193 |   voltage: mdiSineWave,
194 |   volume: mdiCarCoolantLevel,
195 |   volume_flow_rate: mdiPipe,
196 |   water: mdiWater,
197 |   weight: mdiWeight,
198 |   wind_speed: mdiWeatherWindy,
199 | };
200 | 
201 | /** Domains that have a state card. */
202 | export const DOMAINS_WITH_CARD = [
203 |   "alert",
204 |   "button",
205 |   "climate",
206 |   "cover",
207 |   "configurator",
208 |   "event",
209 |   "input_button",
210 |   "input_select",
211 |   "input_number",
212 |   "input_text",
213 |   "humidifier",
214 |   "lawn_mower",
215 |   "lock",
216 |   "media_player",
217 |   "number",
218 |   "scene",
219 |   "script",
220 |   "select",
221 |   "timer",
222 |   "text",
223 |   "update",
224 |   "vacuum",
225 |   "water_heater",
226 | ];
227 | 
228 | export const SENSOR_ENTITIES = [
229 |   "sensor",
230 |   "binary_sensor",
231 |   "calendar",
232 |   "camera",
233 |   "device_tracker",
234 |   "image",
235 |   "weather",
236 | ];
237 | 
238 | /** Domains that render an input element instead of a text value when displayed in a row.
239 |  *  Those rows should then not show a cursor pointer when hovered (which would normally
240 |  *  be the default) unless the element itself enforces it (e.g. a button). Also those elements
241 |  *  should not act as a click target to open the more info dialog (the row name and state icon
242 |  *  still do of course) as the click should instead e.g. activate the input field  or toggle
243 |  *  the button that this row shows.
244 |  */
245 | export const DOMAINS_INPUT_ROW = [
246 |   "automation",
247 |   "button",
248 |   "cover",
249 |   "date",
250 |   "datetime",
251 |   "fan",
252 |   "group",
253 |   "humidifier",
254 |   "input_boolean",
255 |   "input_button",
256 |   "input_datetime",
257 |   "input_number",
258 |   "input_select",
259 |   "input_text",
260 |   "light",
261 |   "lock",
262 |   "media_player",
263 |   "number",
264 |   "scene",
265 |   "script",
266 |   "select",
267 |   "switch",
268 |   "text",
269 |   "time",
270 |   "vacuum",
271 |   "valve",
272 | ];
273 | 
274 | /** States that we consider "off". */
275 | export const STATES_OFF = ["closed", "locked", "off"];
276 | 
277 | /** Binary States */
278 | export const BINARY_STATE_ON = "on";
279 | export const BINARY_STATE_OFF = "off";
280 | 
281 | /** Domains where we allow toggle in Lovelace. */
282 | export const DOMAINS_TOGGLE = new Set([
283 |   "fan",
284 |   "input_boolean",
285 |   "light",
286 |   "switch",
287 |   "group",
288 |   "automation",
289 |   "humidifier",
290 |   "valve",
291 | ]);
292 | 
293 | /** Domains that have a dynamic entity image / picture. */
294 | export const DOMAINS_WITH_DYNAMIC_PICTURE = new Set([
295 |   "camera",
296 |   "image",
297 |   "media_player",
298 | ]);
299 | 
300 | /** Temperature units. */
301 | export const UNIT_C = "°C";
302 | export const UNIT_F = "°F";
303 | 
304 | /** Entity ID of the default view. */
305 | export const DEFAULT_VIEW_ENTITY_ID = "group.default_view";
306 | 


--------------------------------------------------------------------------------
/src/ha/resources/styles-data.ts:
--------------------------------------------------------------------------------
  1 | export const DEFAULT_PRIMARY_COLOR = "#03a9f4" as const;
  2 | export const DEFAULT_ACCENT_COLOR = "#ff9800" as const;
  3 | 
  4 | export const darkStyles = {
  5 |   "primary-background-color": "#111111",
  6 |   "card-background-color": "#1c1c1c",
  7 |   "secondary-background-color": "#282828",
  8 |   "clear-background-color": "#111111",
  9 |   "primary-text-color": "#e1e1e1",
 10 |   "secondary-text-color": "#9b9b9b",
 11 |   "disabled-text-color": "#6f6f6f",
 12 |   "app-header-text-color": "#e1e1e1",
 13 |   "app-header-background-color": "#101e24",
 14 |   "switch-unchecked-button-color": "#999999",
 15 |   "switch-unchecked-track-color": "#9b9b9b",
 16 |   "divider-color": "rgba(225, 225, 225, .12)",
 17 |   "outline-color": "rgba(225, 225, 225, .12)",
 18 |   "outline-hover-color": "rgba(225, 225, 225, .24)",
 19 |   "mdc-ripple-color": "#AAAAAA",
 20 |   "mdc-linear-progress-buffer-color": "rgba(255, 255, 255, 0.1)",
 21 | 
 22 |   "input-idle-line-color": "rgba(255, 255, 255, 0.42)",
 23 |   "input-hover-line-color": "rgba(255, 255, 255, 0.87)",
 24 |   "input-disabled-line-color": "rgba(255, 255, 255, 0.06)",
 25 |   "input-outlined-idle-border-color": "rgba(255, 255, 255, 0.38)",
 26 |   "input-outlined-hover-border-color": "rgba(255, 255, 255, 0.87)",
 27 |   "input-outlined-disabled-border-color": "rgba(255, 255, 255, 0.06)",
 28 |   "input-fill-color": "rgba(255, 255, 255, 0.05)",
 29 |   "input-disabled-fill-color": "rgba(255, 255, 255, 0.02)",
 30 |   "input-ink-color": "rgba(255, 255, 255, 0.87)",
 31 |   "input-label-ink-color": "rgba(255, 255, 255, 0.6)",
 32 |   "input-disabled-ink-color": "rgba(255, 255, 255, 0.37)",
 33 |   "input-dropdown-icon-color": "rgba(255, 255, 255, 0.54)",
 34 | 
 35 |   "codemirror-keyword": "#C792EA",
 36 |   "codemirror-operator": "#89DDFF",
 37 |   "codemirror-variable": "#f07178",
 38 |   "codemirror-variable-2": "#EEFFFF",
 39 |   "codemirror-variable-3": "#DECB6B",
 40 |   "codemirror-builtin": "#FFCB6B",
 41 |   "codemirror-atom": "#F78C6C",
 42 |   "codemirror-number": "#FF5370",
 43 |   "codemirror-def": "#82AAFF",
 44 |   "codemirror-string": "#C3E88D",
 45 |   "codemirror-string-2": "#f07178",
 46 |   "codemirror-comment": "#545454",
 47 |   "codemirror-tag": "#FF5370",
 48 |   "codemirror-meta": "#FFCB6B",
 49 |   "codemirror-attribute": "#C792EA",
 50 |   "codemirror-property": "#C792EA",
 51 |   "codemirror-qualifier": "#DECB6B",
 52 |   "codemirror-type": "#DECB6B",
 53 |   "energy-grid-return-color": "#a280db",
 54 |   "map-filter":
 55 |     "invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)",
 56 |   "disabled-color": "#464646",
 57 | } as const;
 58 | 
 59 | export const derivedStyles = {
 60 |   "state-icon-error-color": "var(--error-state-color, var(--error-color))",
 61 |   "state-unavailable-color":
 62 |     "var(--state-icon-unavailable-color, var(--disabled-text-color))",
 63 |   "sidebar-text-color": "var(--primary-text-color)",
 64 |   "sidebar-background-color": "var(--card-background-color)",
 65 |   "sidebar-selected-text-color": "var(--primary-color)",
 66 |   "sidebar-selected-icon-color": "var(--primary-color)",
 67 |   "sidebar-icon-color": "rgba(var(--rgb-primary-text-color), 0.6)",
 68 |   "switch-checked-color": "var(--primary-color)",
 69 |   "switch-checked-button-color":
 70 |     "var(--switch-checked-color, var(--primary-background-color))",
 71 |   "switch-checked-track-color": "var(--switch-checked-color, #000000)",
 72 |   "switch-unchecked-button-color":
 73 |     "var(--switch-unchecked-color, var(--primary-background-color))",
 74 |   "switch-unchecked-track-color": "var(--switch-unchecked-color, #000000)",
 75 |   "slider-color": "var(--primary-color)",
 76 |   "slider-secondary-color": "var(--light-primary-color)",
 77 |   "slider-track-color": "var(--scrollbar-thumb-color)",
 78 |   "label-badge-background-color": "var(--card-background-color)",
 79 |   "label-badge-text-color": "rgba(var(--rgb-primary-text-color), 0.8)",
 80 |   "paper-listbox-background-color": "var(--card-background-color)",
 81 |   "paper-item-icon-color": "var(--state-icon-color)",
 82 |   "paper-item-icon-active-color": "var(--state-icon-active-color)",
 83 |   "table-header-background-color": "var(--input-fill-color)",
 84 |   "table-row-background-color": "var(--primary-background-color)",
 85 |   "table-row-alternative-background-color": "var(--secondary-background-color)",
 86 |   "data-table-background-color": "var(--card-background-color)",
 87 |   "markdown-code-background-color": "var(--primary-background-color)",
 88 | 
 89 |   // https://github.com/material-components/material-web/blob/master/docs/theming.md
 90 |   "mdc-theme-primary": "var(--primary-color)",
 91 |   "mdc-theme-secondary": "var(--accent-color)",
 92 |   "mdc-theme-background": "var(--primary-background-color)",
 93 |   "mdc-theme-surface": "var(--card-background-color)",
 94 |   "mdc-theme-on-primary": "var(--text-primary-color)",
 95 |   "mdc-theme-on-secondary": "var(--text-primary-color)",
 96 |   "mdc-theme-on-surface": "var(--primary-text-color)",
 97 |   "mdc-theme-text-disabled-on-light": "var(--disabled-text-color)",
 98 |   "mdc-theme-text-primary-on-background": "var(--primary-text-color)",
 99 |   "mdc-theme-text-secondary-on-background": "var(--secondary-text-color)",
100 |   "mdc-theme-text-hint-on-background": "var(--secondary-text-color)",
101 |   "mdc-theme-text-icon-on-background": "var(--secondary-text-color)",
102 |   "mdc-theme-error": "var(--error-color)",
103 |   "app-header-text-color": "var(--text-primary-color)",
104 |   "app-header-background-color": "var(--primary-color)",
105 |   "app-theme-color": "var(--primary-color)",
106 |   "mdc-checkbox-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)",
107 |   "mdc-checkbox-disabled-color": "var(--disabled-text-color)",
108 |   "mdc-radio-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)",
109 |   "mdc-radio-disabled-color": "var(--disabled-text-color)",
110 |   "mdc-tab-text-label-color-default": "var(--primary-text-color)",
111 |   "mdc-button-disabled-ink-color": "var(--disabled-text-color)",
112 |   "mdc-button-outline-color": "var(--outline-color)",
113 |   "mdc-dialog-scroll-divider-color": "var(--divider-color)",
114 |   "mdc-dialog-heading-ink-color": "var(--primary-text-color)",
115 |   "mdc-dialog-content-ink-color": "var(--primary-text-color)",
116 | 
117 |   "mdc-text-field-idle-line-color": "var(--input-idle-line-color)",
118 |   "mdc-text-field-hover-line-color": "var(--input-hover-line-color)",
119 |   "mdc-text-field-disabled-line-color": "var(--input-disabled-line-color)",
120 |   "mdc-text-field-outlined-idle-border-color":
121 |     "var(--input-outlined-idle-border-color)",
122 |   "mdc-text-field-outlined-hover-border-color":
123 |     "var(--input-outlined-hover-border-color)",
124 |   "mdc-text-field-outlined-disabled-border-color":
125 |     "var(--input-outlined-disabled-border-color)",
126 |   "mdc-text-field-fill-color": "var(--input-fill-color)",
127 |   "mdc-text-field-disabled-fill-color": "var(--input-disabled-fill-color)",
128 |   "mdc-text-field-ink-color": "var(--input-ink-color)",
129 |   "mdc-text-field-label-ink-color": "var(--input-label-ink-color)",
130 |   "mdc-text-field-disabled-ink-color": "var(--input-disabled-ink-color)",
131 | 
132 |   "mdc-select-idle-line-color": "var(--input-idle-line-color)",
133 |   "mdc-select-hover-line-color": "var(--input-hover-line-color)",
134 |   "mdc-select-outlined-idle-border-color":
135 |     "var(--input-outlined-idle-border-color)",
136 |   "mdc-select-outlined-hover-border-color":
137 |     "var(--input-outlined-hover-border-color)",
138 |   "mdc-select-outlined-disabled-border-color":
139 |     "var(--input-outlined-disabled-border-color)",
140 |   "mdc-select-fill-color": "var(--input-fill-color)",
141 |   "mdc-select-disabled-fill-color": "var(--input-disabled-fill-color)",
142 |   "mdc-select-ink-color": "var(--input-ink-color)",
143 |   "mdc-select-label-ink-color": "var(--input-label-ink-color)",
144 |   "mdc-select-disabled-ink-color": "var(--input-disabled-ink-color)",
145 |   "mdc-select-dropdown-icon-color": "var(--input-dropdown-icon-color)",
146 |   "mdc-select-disabled-dropdown-icon-color": "var(--input-disabled-ink-color)",
147 |   "ha-assist-chip-filled-container-color":
148 |     "rgba(var(--rgb-primary-text-color),0.15)",
149 |   "ha-assist-chip-active-container-color":
150 |     "rgba(var(--rgb-primary-color),0.15)",
151 |   "chip-background-color": "rgba(var(--rgb-primary-text-color), 0.15)",
152 |   // Vaadin
153 |   "material-body-text-color": "var(--primary-text-color)",
154 |   "material-background-color": "var(--card-background-color)",
155 |   "material-secondary-background-color": "var(--secondary-background-color)",
156 |   "material-secondary-text-color": "var(--secondary-text-color)",
157 | } as const;
158 | 


--------------------------------------------------------------------------------