Add support for multiple entities and hide_states option in state and attribute selectors (#26207)

* Add support for multiple entities and target for state selector

* Add support for multiple entities for attribute selector

* Improve context support

* Add combine mode and fix hidden and entity category for service control

* Don't use combine mode

* Refactor options

src/components/entity/ha-entity-state-picker.ts

@@ -2,6 +2,7 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { getStates } from "../../common/entity/get_states";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
@@ -10,11 +11,16 @@ import type { HaComboBox } from "../ha-combo-box";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
+interface StateOption {
+  value: string;
+  label: string;
+}
+
 @customElement("ha-entity-state-picker")
 class HaEntityStatePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public entityId?: string;
+  @property({ attribute: false }) public entityId?: string | string[];
 
   @property() public attribute?: string;
 
@@ -30,6 +36,9 @@ class HaEntityStatePicker extends LitElement {
   @property({ type: Boolean, attribute: "allow-custom-value" })
   public allowCustomValue;
 
+  @property({ attribute: false })
+  public hideStates?: string[];
+
   @property() public label?: string;
 
   @property() public value?: string;
@@ -51,24 +60,42 @@ class HaEntityStatePicker extends LitElement {
       changedProps.has("attribute") ||
       changedProps.has("extraOptions")
     ) {
-      const stateObj = this.entityId
-        ? this.hass.states[this.entityId]
-        : undefined;
-      (this._comboBox as any).items = [
-        ...(this.extraOptions ?? []),
-        ...(this.entityId && stateObj
-          ? getStates(this.hass, stateObj, this.attribute).map((key) => ({
-              value: key,
-              label: !this.attribute
-                ? this.hass.formatEntityState(stateObj, key)
-                : this.hass.formatEntityAttributeValue(
-                    stateObj,
-                    this.attribute,
-                    key
-                  ),
-            }))
-          : []),
-      ];
+      const entityIds = this.entityId ? ensureArray(this.entityId) : [];
+
+      const entitiesOptions = entityIds.map<StateOption[]>((entityId) => {
+        const stateObj = this.hass.states[entityId];
+        if (!stateObj) {
+          return [];
+        }
+
+        const states = getStates(this.hass, stateObj, this.attribute).filter(
+          (s) => !this.hideStates?.includes(s)
+        );
+
+        return states.map((s) => ({
+          value: s,
+          label: this.attribute
+            ? this.hass.formatEntityAttributeValue(stateObj, this.attribute, s)
+            : this.hass.formatEntityState(stateObj, s),
+        }));
+      });
+
+      const options: StateOption[] = [];
+      const optionsSet = new Set<string>();
+      for (const entityOptions of entitiesOptions) {
+        for (const option of entityOptions) {
+          if (!optionsSet.has(option.value)) {
+            optionsSet.add(option.value);
+            options.push(option);
+          }
+        }
+      }
+
+      if (this.extraOptions) {
+        options.unshift(...this.extraOptions);
+      }
+
+      (this._comboBox as any).filteredItems = options;
     }
   }
 
@@ -88,6 +115,7 @@ class HaEntityStatePicker extends LitElement {
         .required=${this.required}
         .helper=${this.helper}
         .allowCustomValue=${this.allowCustomValue}
+        item-id-path="value"
         item-value-path="value"
         item-label-path="label"
         @opened-changed=${this._openedChanged}