Add Attribute Picker as a selector - add to state trigger (#11641)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

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

@@ -40,7 +40,12 @@ const SCHEMAS: {
     schema: [
       { name: "addon", selector: { addon: {} } },
       { name: "entity", selector: { entity: {} } },
-      { name: "device", selector: { device: {} } },
+      {
+        name: "Attribute",
+        selector: { attribute: { entity_id: "" } },
+      },
+      { name: "Device", selector: { device: {} } },
+      { name: "Duration", selector: { duration: {} } },
       { name: "area", selector: { area: {} } },
       { name: "target", selector: { target: {} } },
       { name: "number", selector: { number: { min: 0, max: 10 } } },

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

@@ -21,7 +21,12 @@ const SCHEMAS: {
     name: "One of each",
     input: {
       entity: { name: "Entity", selector: { entity: {} } },
+      attribute: {
+        name: "Attribute",
+        selector: { attribute: { entity_id: "" } },
+      },
       device: { name: "Device", selector: { device: {} } },
+      duration: { name: "Duration", selector: { duration: {} } },
       addon: { name: "Addon", selector: { addon: {} } },
       area: { name: "Area", selector: { area: {} } },
       target: { name: "Target", selector: { target: {} } },

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

@@ -81,6 +81,7 @@ export class HaForm extends LitElement implements HaFormElement {
               : ""}
             ${"selector" in item
               ? html`<ha-selector
+                  .schema=${item}
                   .hass=${this.hass}
                   .selector=${item.selector}
                   .value=${getValue(this.data, item)}

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

@@ -0,0 +1,38 @@
+import "../entity/ha-entity-attribute-picker";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { AttributeSelector } from "../../data/selector";
+import { SubscribeMixin } from "../../mixins/subscribe-mixin";
+import { HomeAssistant } from "../../types";
+
+@customElement("ha-selector-attribute")
+export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: AttributeSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  protected render() {
+    return html`
+      <ha-entity-attribute-picker
+        .hass=${this.hass}
+        .entityId=${this.selector.attribute.entity_id}
+        .value=${this.value}
+        .label=${this.label}
+        .disabled=${this.disabled}
+        allow-custom-value
+      ></ha-entity-attribute-picker>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-attribute": HaSelectorAttribute;
+  }
+}

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

@@ -6,8 +6,10 @@ import { HomeAssistant } from "../../types";
 import "./ha-selector-action";
 import "./ha-selector-addon";
 import "./ha-selector-area";
+import "./ha-selector-attribute";
 import "./ha-selector-boolean";
 import "./ha-selector-device";
+import "./ha-selector-duration";
 import "./ha-selector-entity";
 import "./ha-selector-number";
 import "./ha-selector-object";
@@ -15,7 +17,6 @@ import "./ha-selector-select";
 import "./ha-selector-target";
 import "./ha-selector-text";
 import "./ha-selector-time";
-import "./ha-selector-duration";
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {

src/data/selector.ts

@@ -1,7 +1,9 @@
 export type Selector =
   | AddonSelector
+  | AttributeSelector
   | EntitySelector
   | DeviceSelector
+  | DurationSelector
   | AreaSelector
   | TargetSelector
   | NumberSelector
@@ -11,6 +13,7 @@ export type Selector =
   | StringSelector
   | ObjectSelector
   | SelectSelector;
+
 export interface EntitySelector {
   entity: {
     integration?: string;
@@ -19,6 +22,12 @@ export interface EntitySelector {
   };
 }
 
+export interface AttributeSelector {
+  attribute: {
+    entity_id: string;
+  };
+}
+
 export interface DeviceSelector {
   device: {
     integration?: string;

src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts

@@ -9,6 +9,7 @@ import {
   string,
   union,
 } from "superstruct";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { hasTemplate } from "../../../../../common/string/has-template";
 import { StateTrigger } from "../../../../../data/automation";
@@ -33,6 +34,7 @@ const stateTriggerStruct = assign(
 
 const SCHEMA = [
   { name: "entity_id", selector: { entity: {} } },
+  { name: "attribute", selector: { attribute: { entity_id: "" } } },
   { name: "from", required: false, selector: { text: {} } },
   { name: "to", required: false, selector: { text: {} } },
   { name: "for", required: false, selector: { duration: {} } },
@@ -48,6 +50,15 @@ export class HaStateTrigger extends LitElement implements TriggerElement {
     return { entity_id: "" };
   }
 
+  private _schema = memoizeOne((entityId) => {
+    const schema = [...SCHEMA];
+    schema[1] = {
+      name: "attribute",
+      selector: { attribute: { entity_id: entityId } },
+    };
+    return schema;
+  });
+
   public shouldUpdate(changedProperties: PropertyValues) {
     if (!changedProperties.has("trigger")) {
       return true;
@@ -81,12 +92,13 @@ export class HaStateTrigger extends LitElement implements TriggerElement {
     const trgFor = createDurationData(this.trigger.for);
 
     const data = { ...this.trigger, ...{ for: trgFor } };
+    const schema = this._schema(this.trigger.entity_id);
 
     return html`
       <ha-form
         .hass=${this.hass}
         .data=${data}
-        .schema=${SCHEMA}
+        .schema=${schema}
         @value-changed=${this._valueChanged}
         .computeLabel=${this._computeLabelCallback}
       ></ha-form>