Script Editor to Ha Form

build-scripts/bundle.js

@@ -33,6 +33,10 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
       require.resolve(
         path.resolve(paths.polymer_dir, "src/components/ha-icon.ts")
       ),
+    isHassioBuild &&
+      require.resolve(
+        path.resolve(paths.polymer_dir, "src/components/ha-icon-picker.ts")
+      ),
   ].filter(Boolean);
 
 module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({

gallery/src/pages/components/ha-form.ts

@@ -61,6 +61,12 @@ const SCHEMAS: {
           select: { options: ["Everyone Home", "Some Home", "All gone"] },
         },
       },
+      {
+        name: "icon",
+        selector: {
+          icon: {},
+        },
+      },
     ],
   },
   {

gallery/src/pages/components/ha-selector.ts

@@ -72,6 +72,7 @@ const SCHEMAS: {
         name: "Select",
         selector: { select: { options: ["Option 1", "Option 2"] } },
       },
+      icon: { name: "Icon", selector: { icon: {} } },
     },
   },
 ];

src/components/ha-form/ha-form.ts

@@ -32,7 +32,12 @@ export class HaForm extends LitElement implements HaFormElement {
 
   @property() public computeError?: (schema: HaFormSchema, error) => string;
 
-  @property() public computeLabel?: (schema: HaFormSchema) => string;
+  @property() public computeLabel?: (
+    schema: HaFormSchema,
+    data?: HaFormDataContainer
+  ) => string;
+
+  @property() public computeHelper?: (schema: HaFormSchema) => string;
 
   public focus() {
     const root = this.shadowRoot?.querySelector(".root");
@@ -71,6 +76,7 @@ export class HaForm extends LitElement implements HaFormElement {
           : ""}
         ${this.schema.map((item) => {
           const error = getValue(this.error, item);
+
           return html`
             ${error
               ? html`
@@ -85,14 +91,15 @@ export class HaForm extends LitElement implements HaFormElement {
                   .hass=${this.hass}
                   .selector=${item.selector}
                   .value=${getValue(this.data, item)}
-                  .label=${this._computeLabel(item)}
+                  .label=${this._computeLabel(item, this.data)}
                   .disabled=${this.disabled}
+                  .helper=${this._computeHelper(item)}
                   .required=${item.required || false}
                 ></ha-selector>`
               : dynamicElement(`ha-form-${item.type}`, {
                   schema: item,
                   data: getValue(this.data, item),
-                  label: this._computeLabel(item),
+                  label: this._computeLabel(item, this.data),
                   disabled: this.disabled,
                 })}
           `;
@@ -107,21 +114,26 @@ export class HaForm extends LitElement implements HaFormElement {
     root.addEventListener("value-changed", (ev) => {
       ev.stopPropagation();
       const schema = (ev.target as HaFormElement).schema as HaFormSchema;
+
       fireEvent(this, "value-changed", {
         value: { ...this.data, [schema.name]: ev.detail.value },
       });
     });
     return root;
   }
 
-  private _computeLabel(schema: HaFormSchema) {
+  private _computeLabel(schema: HaFormSchema, data: HaFormDataContainer) {
     return this.computeLabel
-      ? this.computeLabel(schema)
+      ? this.computeLabel(schema, data)
       : schema
       ? schema.name
       : "";
   }
 
+  private _computeHelper(schema: HaFormSchema) {
+    return this.computeHelper ? this.computeHelper(schema) : "";
+  }
+
   private _computeError(error, schema: HaFormSchema | HaFormSchema[]) {
     return this.computeError ? this.computeError(error, schema) : error;
   }

src/components/ha-selector/ha-selector-icon.ts

@@ -0,0 +1,39 @@
+import "../ha-icon-picker";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { HomeAssistant } from "../../types";
+import { IconSelector } from "../../data/selector";
+import { fireEvent } from "../../common/dom/fire_event";
+
+@customElement("ha-selector-icon")
+export class HaIconSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: IconSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  protected render() {
+    return html`
+      <ha-icon-picker
+        .label=${this.label}
+        .value=${this.value}
+        @value-changed=${this._valueChanged}
+      ></ha-icon-picker>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    fireEvent(this, "value-changed", { value: ev.detail.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-icon": HaIconSelector;
+  }
+}

src/components/ha-selector/ha-selector-select.ts

@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
-import { SelectSelector } from "../../data/selector";
+import { SelectOption, SelectSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "@material/mwc-select/mwc-select";
 import "@material/mwc-list/mwc-list-item";
@@ -17,6 +17,8 @@ export class HaSelectSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
@@ -25,15 +27,17 @@ export class HaSelectSelector extends LitElement {
       naturalMenuWidth
       .label=${this.label}
       .value=${this.value}
+      .helper=${this.helper}
       .disabled=${this.disabled}
       @closed=${stopPropagation}
       @selected=${this._valueChanged}
     >
-      ${this.selector.select.options.map(
-        (item: string) => html`
-          <mwc-list-item .value=${item}>${item}</mwc-list-item>
-        `
-      )}
+      ${this.selector.select.options.map((item: string | SelectOption) => {
+        const value = typeof item === "object" ? item.value : item;
+        const label = typeof item === "object" ? item.label : item;
+
+        return html`<mwc-list-item .value=${value}>${label}</mwc-list-item>`;
+      })}
     </mwc-select>`;
   }
 

src/components/ha-selector/ha-selector.ts

@@ -17,6 +17,7 @@ import "./ha-selector-select";
 import "./ha-selector-target";
 import "./ha-selector-text";
 import "./ha-selector-time";
+import "./ha-selector-icon";
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
@@ -28,6 +29,8 @@ export class HaSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property() public placeholder?: any;
 
   @property({ type: Boolean }) public disabled = false;
@@ -52,6 +55,7 @@ export class HaSelector extends LitElement {
         placeholder: this.placeholder,
         disabled: this.disabled,
         required: this.required,
+        helper: this.helper,
         id: "selector",
       })}
     `;

src/data/selector.ts

@@ -12,7 +12,8 @@ export type Selector =
   | ActionSelector
   | StringSelector
   | ObjectSelector
-  | SelectSelector;
+  | SelectSelector
+  | IconSelector;
 
 export interface EntitySelector {
   entity: {
@@ -133,8 +134,18 @@ export interface ObjectSelector {
   object: {};
 }
 
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
 export interface SelectSelector {
   select: {
-    options: string[];
+    options: string[] | SelectOption[];
   };
 }
+
+export interface IconSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  icon: {};
+}