@droans/ha-components 0.1.0 → 0.2.0-b.3

package/.github/workflows/publish.yaml

@@ -7,12 +7,15 @@ on:
   release:
     types:
       - published
+    branch:
+      - main
 permissions:
   id-token: write
   contents: read
 
 jobs:
   publish:
+    if: contains(github.event.release.target_commitish, 'main')
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -21,4 +24,15 @@ jobs:
         with:
           node-version: '24'
           registry-url: 'https://registry.npmjs.org'
-      - run: npm publish
+      - run: npm publish
+  publish-prerelease:
+    runs-on: ubuntu-latest
+    if: contains(github.event.release.target_commitish, 'dev')
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm publish --tag beta

package/README.md

@@ -1,6 +1,9 @@
 # ha-components
 
-A library of HA components. For reusability, none of the components are exported and must be redefined by the developer.
+A library of HA components. For reusability, the components are only redefined if they have not yet been defined as a custom element.
 
 Elements:
-  * marquee-text
+  * ha-control-select-menu (`hac-control-select-menu`)
+  * ha-icon (`hac-icon`)
+  * ha-marquee-text (`hac-marquee-text`)
+  * ha-svg-icon (`hac-svg-icon`)

package/eslint.config.mjs

@@ -32,7 +32,9 @@ export default tseslint.config(
       globals: {
         ...globals.browser,
         ...globals.node,
+        __SUPERVISOR__: false,
       },
+      // parser: tseslint.parser,
     },
   },
   // individual rule overrides

package/globals.d.ts

@@ -0,0 +1,11 @@
+// declare global {
+//   interface Window {
+//    __SUPERVISOR__: boolean;
+//   }
+// }
+
+declare global {
+  let __SUPERVISOR__: boolean;
+}
+
+declare  let __SUPERVISOR__: boolean;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@droans/ha-components",
   "description": "Home Assistant Built-In Components re-exported for reuse",
-  "repository": "https://github.com/droans/mass-queue-types",
+  "repository": "https://github.com/droans/ha-components.git",
   "author": "Michael Carroll",
-  "version": "0.1.0",
+  "version": "0.2.0-b.3",
   "keywords": [
     "home-assistant",
     "homeassistant",
@@ -18,6 +18,7 @@
   "type": "module",
   "devDependencies": {
     "@eslint/js": "9.39.1",
+    "@material/mwc-select": "0.27.0",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.0",
@@ -28,6 +29,8 @@
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-jest": "29.1.0",
     "eslint-plugin-wc": "^3.0.1",
+    "idb-keyval": "6.2.2",
+    "memoize-one": "6.0.0",
     "prettier": "^3.6.2",
     "rollup": "^4.53.2",
     "rollup-plugin-commonjs": "^10.1.0",

package/packages/ha-components/common/util/debounce.ts

@@ -0,0 +1,31 @@
+// From: https://davidwalsh.name/javascript-debounce-function
+
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge and on the trailing.
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const debounce = <T extends any[]>(
+  func: (...args: T) => void,
+  wait: number,
+  immediate = false
+) => {
+  let timeout: number | undefined;
+  const debouncedFunc = (...args: T): void => {
+    const later = () => {
+      timeout = undefined;
+      func(...args);
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = window.setTimeout(later, wait);
+    if (callNow) {
+      func(...args);
+    }
+  };
+  debouncedFunc.cancel = () => {
+    clearTimeout(timeout);
+  };
+  return debouncedFunc;
+};

package/packages/ha-components/common/util/promise-timeout.ts

@@ -0,0 +1,35 @@
+/* eslint-disable  */
+declare global {
+  interface ErrorConstructor {
+      captureStackTrace(thisArg: any, func: any): void
+  }
+}
+
+class TimeoutError extends Error {
+  public timeout: number;
+
+  constructor(timeout: number, ...params) {
+    super(...params);
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, TimeoutError);
+    }
+
+    this.name = "TimeoutError";
+    // Custom debugging information
+    this.timeout = timeout;
+    this.message = `Timed out in ${timeout} ms.`;
+  }
+}
+
+export const promiseTimeout = (ms: number, promise: Promise<any> | any) => {
+  const timeout = new Promise((_resolve, reject) => {
+    setTimeout(() => {
+      reject(new TimeoutError(ms));
+    }, ms);
+  });
+
+  // Returns a race between our timeout and the passed in promise
+  return Promise.race([promise, timeout]);
+};

package/packages/ha-components/common/util/render-status.ts

@@ -0,0 +1,8 @@
+export const afterNextRender = (cb: (value: unknown) => void): void => {
+  requestAnimationFrame(() => setTimeout(cb, 0));
+};
+
+export const nextRender = () =>
+  new Promise((resolve) => {
+    afterNextRender(resolve);
+  });

package/packages/ha-components/components/hac-control-select-menu.ts

@@ -0,0 +1,280 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+/* eslint-disable @typescript-eslint/unbound-method */
+import { SelectBase } from "@material/mwc-select/mwc-select-base";
+import { mdiMenuDown } from "@mdi/js";
+import type { PropertyValues } from "lit";
+import type { CSSResultGroup } from '@material/mwc-base/node_modules/@lit/reactive-element/css-tag';
+import { css } from "@material/mwc-base/node_modules/lit";
+import { html, nothing } from "lit";
+import { property, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
+import { debounce } from "../common/util/debounce";
+import { nextRender } from "../common/util/render-status";
+import "./ha-icon";
+import type { HaIcon } from "./hac-icon";
+import "./ha-ripple";
+import "./ha-svg-icon";
+import type { HaSvgIcon } from "./hac-svg-icon";
+import "./ha-menu";
+import { customElementOverride } from "../../utils/decorators.js";
+
+@customElementOverride("hac-control-select-menu")
+export class HaControlSelectMenu extends SelectBase {
+  @query(".select") protected mdcRoot!: HTMLElement;
+
+  @query(".select-anchor") protected anchorElement!: HTMLDivElement | null;
+
+  @property({ type: Boolean, attribute: "show-arrow" })
+  public showArrow = false;
+
+  @property({ type: Boolean, attribute: "hide-label" })
+  public hideLabel = false;
+
+  @property() public options;
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (changedProps.get("options")) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      this.layoutOptions();
+      this.selectByValue(this.value);
+    }
+  }
+
+  public override render() {
+    const classes = {
+      "select-disabled": this.disabled,
+      "select-required": this.required,
+      "select-invalid": !this.isUiValid,
+      "select-no-value": !this.selectedText,
+    };
+
+    const labelledby = this.label && !this.hideLabel ? "label" : undefined;
+    const labelAttribute =
+      this.label && this.hideLabel ? this.label : undefined;
+
+    return html`
+      <div class="select ${classMap(classes)}">
+        <input
+          class="formElement"
+          .name=${this.name}
+          .value=${this.value}
+          hidden
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+        />
+        <!-- @ts-ignore -->
+        <div
+          class="select-anchor"
+          aria-autocomplete="none"
+          role="combobox"
+          aria-expanded=${this.menuOpen}
+          aria-invalid=${!this.isUiValid}
+          aria-haspopup="listbox"
+          aria-labelledby=${ifDefined(labelledby)}
+          aria-label=${ifDefined(labelAttribute)}
+          aria-required=${this.required}
+          aria-controls="listbox"
+          @focus=${this.onFocus}
+          @blur=${this.onBlur}
+          @click=${this.onClick}
+          @keydown=${this.onKeydown}
+        >
+          ${this._renderIcon()}
+          <div class="content">
+            ${this.hideLabel
+              ? nothing
+              : html`<p id="label" class="label">${this.label}</p>`}
+            ${this.selectedText
+              ? html`<p class="value">${this.selectedText}</p>`
+              : nothing}
+          </div>
+          ${this._renderArrow()}
+          <ha-ripple .disabled=${this.disabled}></ha-ripple>
+        </div>
+        ${this.renderMenu()}
+      </div>
+    `;
+  }
+
+  protected override renderMenu() {
+    const classes = this.getMenuClasses();
+    return html`<ha-menu
+      innerRole="listbox"
+      wrapFocus
+      class=${classMap(classes)}
+      activatable
+      .fullwidth=${this.fixedMenuPosition ? false : !this.naturalMenuWidth}
+      .open=${this.menuOpen}
+      .anchor=${this.anchorElement}
+      .fixed=${this.fixedMenuPosition}
+      @selected=${this.onSelected}
+      @opened=${this.onOpened}
+      @closed=${this.onClosed}
+      @items-updated=${this.onItemsUpdated}
+      @keydown=${this.handleTypeahead}
+    >
+      ${this.renderMenuContent()}
+    </ha-menu>`;
+  }
+
+  private _renderArrow() {
+    if (!this.showArrow) return nothing;
+
+    return html`
+      <div class="icon">
+        <ha-svg-icon .path=${mdiMenuDown}></ha-svg-icon>
+      </div>
+    `;
+  }
+
+  private _renderIcon() {
+    const index = this.mdcFoundation?.getSelectedIndex();
+    const items = this.menuElement?.items ?? [];
+    const item = index != null ? items[index] : undefined;
+    const defaultIcon = this.querySelector("[slot='icon']");
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    const icon = (item?.querySelector("[slot='graphic']") ?? null) as
+      | HaSvgIcon
+      | HaIcon
+      | null;
+
+    if (!defaultIcon && !icon) {
+      return null;
+    }
+
+    return html`
+      <div class="icon">
+        ${icon && icon.localName === "ha-svg-icon" && "path" in icon
+          ? html`<ha-svg-icon .path=${icon.path}></ha-svg-icon>`
+          : icon && icon.localName === "ha-icon" && "icon" in icon
+            ? html`<ha-icon .path=${icon.icon}></ha-icon>`
+            : html`<slot name="icon"></slot>`}
+      </div>
+    `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("translations-updated", this._translationsUpdated);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener(
+      "translations-updated",
+      this._translationsUpdated
+    );
+  }
+
+  private _translationsUpdated = debounce(async () => {
+    await nextRender();
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.layoutOptions();
+  }, 500);
+
+  static override styles: CSSResultGroup =
+    css`
+      :host {
+        display: inline-block;
+        --control-select-menu-focus-color: var(--secondary-text-color);
+        --control-select-menu-text-color: var(--primary-text-color);
+        --control-select-menu-background-color: var(--disabled-color);
+        --control-select-menu-background-opacity: 0.2;
+        --control-select-menu-border-radius: var(--ha-border-radius-lg);
+        --control-select-menu-height: 48px;
+        --control-select-menu-padding: 6px 10px;
+        --mdc-icon-size: 20px;
+        --ha-ripple-color: var(--secondary-text-color);
+        font-size: var(--ha-font-size-m);
+        line-height: 1.4;
+        width: auto;
+        color: var(--primary-text-color);
+        -webkit-tap-highlight-color: transparent;
+      }
+      .select-anchor {
+        height: var(--control-select-menu-height);
+        padding: var(--control-select-menu-padding);
+        overflow: hidden;
+        position: relative;
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-radius: var(--control-select-menu-border-radius);
+        box-sizing: border-box;
+        outline: none;
+        overflow: hidden;
+        background: none;
+        /* For safari border-radius overflow */
+        z-index: 0;
+        transition:
+          box-shadow 180ms ease-in-out,
+          color 180ms ease-in-out;
+        gap: 10px;
+        width: 100%;
+        user-select: none;
+        font-style: normal;
+        font-weight: var(--ha-font-weight-normal);
+        letter-spacing: 0.25px;
+      }
+      .content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .content p {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        min-width: 0;
+        width: 100%;
+        margin: auto;
+      }
+
+      .label {
+        font-size: 0.85em;
+        letter-spacing: 0.4px;
+      }
+
+      .select-no-value .label {
+        font-size: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+      }
+
+      .select-anchor:focus-visible {
+        box-shadow: 0 0 0 2px var(--control-select-menu-focus-color);
+      }
+
+      .select-anchor::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-color: var(--control-select-menu-background-color);
+        transition:
+          background-color 180ms ease-in-out,
+          opacity 180ms ease-in-out;
+        opacity: var(--control-select-menu-background-opacity);
+      }
+
+      .select-disabled .select-anchor {
+        cursor: not-allowed;
+        color: var(--disabled-color);
+      }
+    `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-control-select-menu": HaControlSelectMenu;
+  }
+}

package/packages/ha-components/components/hac-icon.ts

@@ -0,0 +1,199 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import type { PropertyValues } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators";
+import { debounce } from "../common/util/debounce";
+import type { CustomIcon } from "../data/custom_icons";
+import { customIcons } from "../data/custom_icons";
+import type { Chunks, Icons } from "../data/iconsets";
+import {
+  MDI_PREFIXES,
+  findIconChunk,
+  getIcon,
+  writeCache,
+} from "../data/iconsets";
+import "./ha-svg-icon";
+import { customElementOverride } from "../../utils/decorators.js";
+
+type DeprecatedIcon = Record<
+  string,
+  {
+    removeIn: string;
+    newName?: string;
+  }
+>;
+
+const mdiDeprecatedIcons: DeprecatedIcon = {};
+
+const chunks: Chunks = {};
+
+// eslint-disable-next-line @typescript-eslint/no-misused-promises
+const debouncedWriteCache = debounce(() => writeCache(chunks), 2000);
+
+const cachedIcons: Record<string, string> = {};
+
+@customElementOverride("hac-icon")
+export class HaIcon extends LitElement {
+  @property() public icon?: string;
+
+  @state() private _path?: string;
+
+  @state() private _secondaryPath?: string;
+
+  @state() private _viewBox?: string;
+
+  @state() private _legacy = false;
+
+  public willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+    if (changedProps.has("icon")) {
+      this._path = undefined;
+      this._secondaryPath = undefined;
+      this._viewBox = undefined;
+      this._loadIcon();
+    }
+  }
+
+  protected render() {
+    if (!this.icon) {
+      return nothing;
+    }
+    if (this._legacy) {
+      return html`<!-- @ts-ignore we don't provide the iron-icon element -->
+        <iron-icon .icon=${this.icon}></iron-icon>`;
+    }
+    return html`<ha-svg-icon
+      .path=${this._path}
+      .secondaryPath=${this._secondaryPath}
+      .viewBox=${this._viewBox}
+    ></ha-svg-icon>`;
+  }
+
+  private async _loadIcon() {
+    if (!this.icon) {
+      return;
+    }
+    const requestedIcon = this.icon;
+    const [iconPrefix, origIconName] = this.icon.split(":", 2);
+
+    let iconName = origIconName;
+
+    if (!iconPrefix || !iconName) {
+      return;
+    }
+
+    if (!MDI_PREFIXES.includes(iconPrefix)) {
+      const customIcon = customIcons[iconPrefix];
+      if (customIcon) {
+        if (customIcon && typeof customIcon.getIcon === "function") {
+          this._setCustomPath(customIcon.getIcon(iconName), requestedIcon);
+        }
+        return;
+      }
+      this._legacy = true;
+      return;
+    }
+
+    this._legacy = false;
+
+    if (iconName in mdiDeprecatedIcons) {
+      const deprecatedIcon = mdiDeprecatedIcons[iconName];
+      let message: string;
+
+      if (deprecatedIcon.newName) {
+        message = `Icon ${iconPrefix}:${iconName} was renamed to ${iconPrefix}:${deprecatedIcon.newName}, please change your config, it will be removed in version ${deprecatedIcon.removeIn}.`;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        iconName = deprecatedIcon.newName!;
+      } else {
+        message = `Icon ${iconPrefix}:${iconName} was removed from MDI, please replace this icon with an other icon in your config, it will be removed in version ${deprecatedIcon.removeIn}.`;
+      }
+      // eslint-disable-next-line no-console
+      console.warn(message);
+    }
+
+    if (iconName in cachedIcons) {
+      this._path = cachedIcons[iconName];
+      return;
+    }
+
+    if (iconName === "home-assistant") {
+      const icon = (await import("../resources/home-assistant-logo-svg"))
+        .mdiHomeAssistant;
+
+      if (this.icon === requestedIcon) {
+        this._path = icon;
+      }
+      cachedIcons[iconName] = icon;
+      return;
+    }
+
+    let databaseIcon: string | undefined;
+    try {
+      databaseIcon = await getIcon(iconName);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (_err) {
+      // Firefox in private mode doesn't support IDB
+      // iOS Safari sometimes doesn't open the DB
+      databaseIcon = undefined;
+    }
+
+    if (databaseIcon) {
+      if (this.icon === requestedIcon) {
+        this._path = databaseIcon;
+      }
+      cachedIcons[iconName] = databaseIcon;
+      return;
+    }
+    const chunk = findIconChunk(iconName);
+
+    if (chunk in chunks) {
+      this._setPath(chunks[chunk], iconName, requestedIcon);
+      return;
+    }
+
+    const iconPromise = fetch(`/static/mdi/${chunk}.json`).then((response) =>
+      response.json()
+    );
+    chunks[chunk] = iconPromise;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    this._setPath(iconPromise, iconName, requestedIcon);
+    debouncedWriteCache();
+  }
+
+  private async _setCustomPath(
+    promise: Promise<CustomIcon>,
+    requestedIcon: string
+  ) {
+    const icon = await promise;
+    if (this.icon !== requestedIcon) {
+      return;
+    }
+    this._path = icon.path;
+    this._secondaryPath = icon.secondaryPath;
+    this._viewBox = icon.viewBox;
+  }
+
+  private async _setPath(
+    promise: Promise<Icons>,
+    iconName: string,
+    requestedIcon: string
+  ) {
+    const iconPack = await promise;
+    if (this.icon === requestedIcon) {
+      this._path = iconPack[iconName];
+    }
+    cachedIcons[iconName] = iconPack[iconName];
+  }
+
+  static styles = css`
+    :host {
+      fill: currentcolor;
+    }
+  `;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-icon": HaIcon;
+  }
+}

package/packages/{components/marquee-text.ts → ha-components/components/hac-marquee-text.ts}

@@ -6,7 +6,9 @@ import {
   type PropertyValues,
 } from "lit";
 import { property, query } from "lit/decorators.js";
+import { customElementOverride } from "../../utils/decorators.js";
 
+@customElementOverride("hac-marquee-text")
 export class MarqueeText extends LitElement {
   @property({ type: Number }) speed = 15; // pixels per second
 

package/packages/ha-components/components/hac-svg-icon.ts

@@ -0,0 +1,69 @@
+import type { SVGTemplateResult } from "lit";
+import { css, LitElement, nothing, svg } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-svg-icon")
+export class HaSvgIcon extends LitElement {
+  @property() public path?: string;
+
+  @property({ attribute: false }) public secondaryPath?: string;
+
+  @property({ attribute: false }) public viewBox?: string;
+
+  protected render(): SVGTemplateResult {
+    /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+    return svg`
+    <svg
+      viewBox=${this.viewBox || "0 0 24 24"}
+      preserveAspectRatio="xMidYMid meet"
+      focusable="false"
+      role="img"
+      aria-hidden="true"
+    >
+      <g>
+        ${
+          this.path
+            ? svg`<path class="primary-path" d=${this.path}></path>`
+            : nothing
+        }
+        ${
+          this.secondaryPath
+            ? svg`<path class="secondary-path" d=${this.secondaryPath}></path>`
+            : nothing
+        }
+      </g>
+    </svg>`;
+    /* eslint-enable @typescript-eslint/prefer-nullish-coalescing */
+  }
+
+  static styles = css`
+    :host {
+      display: var(--ha-icon-display, inline-flex);
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      vertical-align: middle;
+      fill: var(--icon-primary-color, currentcolor);
+      width: var(--mdc-icon-size, 24px);
+      height: var(--mdc-icon-size, 24px);
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      display: block;
+    }
+    path.primary-path {
+      opacity: var(--icon-primary-opactity, 1);
+    }
+    path.secondary-path {
+      fill: var(--icon-secondary-color, currentcolor);
+      opacity: var(--icon-secondary-opactity, 0.5);
+    }
+  `;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-svg-icon": HaSvgIcon;
+  }
+}

package/packages/ha-components/data/custom_icons.ts

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { customIconsets } from "./custom_iconsets";
+
+export interface CustomIcon {
+  path: string;
+  secondaryPath?: string;
+  viewBox?: string;
+}
+
+export interface CustomIconListItem {
+  name: string;
+  keywords?: string[];
+}
+
+export interface CustomIconHelpers {
+  getIcon: (name: string) => Promise<CustomIcon>;
+  getIconList?: () => Promise<CustomIconListItem[]>;
+}
+
+export interface CustomIconsWindow {
+  customIcons?: Record<string, CustomIconHelpers>;
+}
+
+const customIconsWindow = window as CustomIconsWindow;
+
+if (!("customIcons" in customIconsWindow)) {
+  customIconsWindow.customIcons = {};
+}
+
+// Proxy for backward compatibility with icon sets
+export const customIcons = new Proxy(customIconsWindow.customIcons!, {
+  get: (obj, prop: string) =>
+    obj[prop] ??
+    (customIconsets[prop]
+      ? {
+          getIcon: customIconsets[prop],
+        }
+      : undefined),
+});

package/packages/ha-components/data/custom_iconsets.ts

@@ -0,0 +1,14 @@
+import type { CustomIcon } from "./custom_icons";
+
+interface CustomIconsetsWindow {
+  customIconsets?: Record<string, (name: string) => Promise<CustomIcon>>;
+}
+
+const customIconsetsWindow = window as CustomIconsetsWindow;
+
+if (!("customIconsets" in customIconsetsWindow)) {
+  customIconsetsWindow.customIconsets = {};
+}
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+export const customIconsets = customIconsetsWindow.customIconsets!;

package/packages/ha-components/data/iconsets.ts

@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/use-unknown-in-catch-callback-variable */
+/* eslint-disable @typescript-eslint/no-floating-promises */
+/* eslint-disable @typescript-eslint/no-confusing-void-expression */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+declare global {
+  interface Window {
+   __SUPERVISOR__: boolean;
+  }
+}
+
+import { clear, get, set, createStore, promisifyRequest } from "idb-keyval";
+import memoizeOne from "memoize-one";
+import { promiseTimeout } from "../common/util/promise-timeout";
+import { iconMetadata } from "../resources/icon-metadata";
+import type { IconMeta } from "../types";
+
+export type Icons = Record<string, string>;
+
+export type Chunks = Record<string, Promise<Icons>>;
+
+const getStore = memoizeOne(async () => {
+  const iconStore = createStore("hass-icon-db", "mdi-icon-store");
+
+  // Supervisor doesn't use icons, and should not update/downgrade the icon DB.
+  if (!__SUPERVISOR__) {
+    const version = await get("_version", iconStore);
+
+    if (!version) {
+      set("_version", iconMetadata.version, iconStore);
+    } else if (version !== iconMetadata.version) {
+      await clear(iconStore);
+      set("_version", iconMetadata.version, iconStore);
+    }
+  }
+
+  return iconStore;
+});
+
+export const MDI_PREFIXES = ["mdi", "hass", "hassio", "hademo"];
+
+let toRead: [
+  string,
+  (iconPath: string | undefined) => void,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: any) => void,
+][] = [];
+
+// Queue up as many icon fetches in 1 transaction
+export const getIcon = (iconName: string) =>
+  new Promise<string | undefined>((resolve, reject) => {
+    toRead.push([iconName, resolve, reject]);
+
+    if (toRead.length > 1) {
+      return;
+    }
+
+    // Start initializing the store, so it's ready when we need it
+    const iconStoreProm = getStore();
+    const readIcons = async () => {
+      const iconStore = await iconStoreProm;
+      iconStore("readonly", (store) => {
+        for (const [iconName_, resolve_, reject_] of toRead) {
+          promisifyRequest<string | undefined>(store.get(iconName_))
+            .then((icon) => resolve_(icon))
+            .catch((e) => reject_(e));
+        }
+        toRead = [];
+      });
+    };
+
+    promiseTimeout(1000, readIcons()).catch((e) => {
+      // Firefox in private mode doesn't support IDB
+      // Safari sometime doesn't open the DB so we time out
+      for (const [, , reject_] of toRead) {
+        reject_(e);
+      }
+      toRead = [];
+    });
+  });
+
+export const findIconChunk = (icon: string): string => {
+  let lastChunk: IconMeta;
+  for (const chunk of iconMetadata.parts) {
+    if (chunk.start !== undefined && icon < chunk.start) {
+      break;
+    }
+    lastChunk = chunk;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return lastChunk!.file;
+};
+
+export const writeCache = async (chunks: Chunks) => {
+  const keys = Object.keys(chunks);
+  const iconsSets: Icons[] = await Promise.all(Object.values(chunks));
+  const iconStore = await getStore();
+  // We do a batch opening the store just once, for (considerable) performance
+  iconStore("readwrite", (store) => {
+    iconsSets.forEach((icons, idx) => {
+      Object.entries(icons).forEach(([name, path]) => {
+        store.put(path, name);
+      });
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete chunks[keys[idx]];
+    });
+  });
+};

package/packages/ha-components/resources/home-assistant-logo-svg.ts

@@ -0,0 +1,2 @@
+export const mdiHomeAssistant =
+  "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";

package/packages/ha-components/resources/icon-metadata.ts

@@ -0,0 +1,5 @@
+import * as iconMetadata_ from "./iconMetadata.json";
+import type { IconMetaFile } from "../types";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+export const iconMetadata = (iconMetadata_ as any).default as IconMetaFile;

package/packages/ha-components/resources/iconMetadata.json

@@ -0,0 +1 @@
+{"version":"7.4.47","parts":[{"file":"7a7139d465f1f41cb26ab851a17caa21a9331234"},{"start":"account-supervisor-circle-","file":"9561286c4c1021d46b9006596812178190a7cc1c"},{"start":"alpha-r-c","file":"eb466b7087fb2b4d23376ea9bc86693c45c500fa"},{"start":"arrow-decision-o","file":"4b3c01b7e0723b702940c5ac46fb9e555646972b"},{"start":"baby-f","file":"2611401d85450b95ab448ad1d02c1a432b409ed2"},{"start":"battery-hi","file":"89bcd31855b34cd9d31ac693fb073277e74f1f6a"},{"start":"blur-r","file":"373709cd5d7e688c2addc9a6c5d26c2d57c02c48"},{"start":"briefcase-account-","file":"a75956cf812ee90ee4f656274426aafac81e1053"},{"start":"calendar-question-","file":"3253f2529b5ebdd110b411917bacfacb5b7063e6"},{"start":"car-lig","file":"74566af3501ad6ae58ad13a8b6921b3cc2ef879d"},{"start":"cellphone-co","file":"7677f1cfb2dd4f5562a2aa6d3ae43a2e6997b21a"},{"start":"circle-slice-2","file":"70d08c50ec4522dd75d11338db57846588263ee2"},{"start":"cloud-co","file":"141d2bfa55ca4c83f4bae2812a5da59a84fec4ff"},{"start":"cog-s","file":"5a640365f8e47c609005d5e098e0e8104286d120"},{"start":"cookie-l","file":"dd85b8eb8581b176d3acf75d1bd82e61ca1ba2fc"},{"start":"currency-eur-","file":"15362279f4ebfc3620ae55f79d2830ad86d5213e"},{"start":"delete-o","file":"239434ab8df61237277d7599ebe066c55806c274"},{"start":"draw-","file":"5605918a592070803ba2ad05a5aba06263da0d70"},{"start":"emoticon-po","file":"a838cfcec34323946237a9f18e66945f55260f78"},{"start":"fan","file":"effd56103b37a8c7f332e22de8e4d67a69b70db7"},{"start":"file-question-","file":"b2424b50bd465ae192593f1c3d086c5eec893af8"},{"start":"flask-off-","file":"3b76295cde006a18f0301dd98eed8c57e1d5a425"},{"start":"food-s","file":"1c6941474cbeb1755faaaf5771440577f4f1f9c6"},{"start":"gamepad-u","file":"c6efe18db6bc9654ae3540c7dee83218a5450263"},{"start":"google-f","file":"df341afe6ad4437457cf188499cb8d2df8ac7b9e"},{"start":"head-c","file":"282121c9e45ed67f033edcc1eafd279334c00f46"},{"start":"home-pl","file":"27e8e38fc7adcacf2a210802f27d841b49c8c508"},{"start":"inbox-","file":"0f0316ec7b1b7f7ce3eaabce26c9ef619b5a1694"},{"start":"key-v","file":"ea33462be7b953ff1eafc5dac2d166b210685a60"},{"start":"leaf-circle-","file":"33db9bbd66ce48a2db3e987fdbd37fb0482145a4"},{"start":"lock-p","file":"b89e27ed39e9d10c44259362a4b57f3c579d3ec8"},{"start":"message-s","file":"7b5ab5a5cadbe06e3113ec148f044aa701eac53a"},{"start":"moti","file":"01024d78c248d36805b565e343dd98033cc3bcaf"},{"start":"newspaper-variant-o","file":"22a6ec4a4fdd0a7c0acaf805f6127b38723c9189"},{"start":"on","file":"c73d55b412f394e64632e2011a59aa05e5a1f50d"},{"start":"paw-ou","file":"3f669bf26d16752dc4a9ea349492df93a13dcfbf"},{"start":"pigg","file":"0c24edb27eb1c90b6e33fc05f34ef3118fa94256"},{"start":"printer-pos-sy","file":"41a55cda866f90b99a64395c3bb18c14983dcf0a"},{"start":"read","file":"c7ed91552a3a64c9be88c85e807404cf705b7edf"},{"start":"robot-vacuum-variant-o","file":"917d2a35d7268c0ea9ad9ecab2778060e19d90e0"},{"start":"sees","file":"6e82d9861d8fac30102bafa212021b819f303bdb"},{"start":"shoe-f","file":"e2fe7ce02b5472301418cc90a0e631f187b9f238"},{"start":"snowflake-m","file":"a28ba9f5309090c8b49a27ca20ff582a944f6e71"},{"start":"st","file":"7e92d03f095ec27e137b708b879dfd273bd735ab"},{"start":"su","file":"61c74913720f9de59a379bdca37f1d2f0dc1f9db"},{"start":"tag-plus-","file":"8f3184156a4f38549cf4c4fffba73a6a941166ae"},{"start":"timer-a","file":"baab470d11cfb3a3cd3b063ee6503a77d12a80d0"},{"start":"transit-d","file":"8561c0d9b1ac03fab360fd8fe9729c96e8693239"},{"start":"vector-arrange-b","file":"c9a3439257d4bab33d3355f1f2e11842e8171141"},{"start":"water-ou","file":"02dbccfb8ca35f39b99f5a085b095fc1275005a0"},{"start":"webc","file":"57bafd4b97341f4f2ac20a609d023719f23a619c"},{"start":"zip","file":"65ae094e8263236fa50486584a08c03497a38d93"}]}

package/packages/ha-components/types.ts

@@ -0,0 +1,10 @@
+
+export interface IconMetaFile {
+  version: string;
+  parts: IconMeta[];
+}
+
+export interface IconMeta {
+  start: string;
+  file: string;
+}

package/packages/utils/decorators.ts

@@ -0,0 +1,40 @@
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+type Constructor<T> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/prefer-function-type
+  new (...args: any[]): T;
+};
+
+
+type CustomElementClass = Omit<typeof HTMLElement, 'new'>;
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type CustomElementDecorator = {
+  // legacy
+  (cls: CustomElementClass): void;
+
+  // standard
+  (
+    target: CustomElementClass,
+    // eslint-disable-next-line @typescript-eslint/unified-signatures
+    context: ClassDecoratorContext<Constructor<HTMLElement>>
+  ): void;
+};
+
+export const customElementOverride =
+  (tagName: string): CustomElementDecorator =>
+  (
+    classOrTarget: CustomElementClass | Constructor<HTMLElement>,
+    context?: ClassDecoratorContext<Constructor<HTMLElement>>
+  ) => {
+    if (context !== undefined) {
+      context.addInitializer(() => {
+        customElements.define(
+          tagName,
+          classOrTarget as CustomElementConstructor
+        );
+      });
+    } else {
+      if (!window.customElements.get(tagName)) {
+        customElements.define(tagName, classOrTarget as CustomElementConstructor);
+      }
+    }
+  };

package/tsconfig.json

@@ -14,5 +14,5 @@
     "resolveJsonModule": true,
     "experimentalDecorators": true,
   },
-  "include": ["packages"]
+  "include": ["packages", "globals.d.ts"]
 }