Add Energy panel (#9445)

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

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

@@ -42,6 +42,8 @@ const rowRenderer: ComboBoxLitRenderer<HassEntity> = (item) => html`<style>
 
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ type: Boolean }) public autofocus = false;
 
   @property({ type: Boolean }) public disabled?: boolean;
@@ -49,8 +51,6 @@ export class HaEntityPicker extends LitElement {
   @property({ type: Boolean, attribute: "allow-custom-entity" })
   public allowCustomEntity;
 
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
   @property() public label?: string;
 
   @property() public value?: string;
@@ -79,6 +79,14 @@ export class HaEntityPicker extends LitElement {
   @property({ type: Array, attribute: "include-device-classes" })
   public includeDeviceClasses?: string[];
 
+  /**
+   * Show only entities with these unit of measuments.
+   * @type {Array}
+   * @attr include-unit-of-measurement
+   */
+  @property({ type: Array, attribute: "include-unit-of-measurement" })
+  public includeUnitOfMeasurement?: string[];
+
   @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
 
   @property({ type: Boolean }) public hideClearIcon = false;
@@ -110,7 +118,8 @@ export class HaEntityPicker extends LitElement {
       includeDomains: this["includeDomains"],
       excludeDomains: this["excludeDomains"],
       entityFilter: this["entityFilter"],
-      includeDeviceClasses: this["includeDeviceClasses"]
+      includeDeviceClasses: this["includeDeviceClasses"],
+      includeUnitOfMeasurement: this["includeUnitOfMeasurement"]
     ) => {
       let states: HassEntity[] = [];
 
@@ -143,6 +152,18 @@ export class HaEntityPicker extends LitElement {
         );
       }
 
+      if (includeUnitOfMeasurement) {
+        states = states.filter(
+          (stateObj) =>
+            // We always want to include the entity of the current value
+            stateObj.entity_id === this.value ||
+            (stateObj.attributes.unit_of_measurement &&
+              includeUnitOfMeasurement.includes(
+                stateObj.attributes.unit_of_measurement
+              ))
+        );
+      }
+
       if (entityFilter) {
         states = states.filter(
           (stateObj) =>
@@ -184,7 +205,7 @@ export class HaEntityPicker extends LitElement {
     return !(!changedProps.has("_opened") && this._opened);
   }
 
-  protected updated(changedProps: PropertyValues) {
+  public willUpdate(changedProps: PropertyValues) {
     if (!this._initedStates || (changedProps.has("_opened") && this._opened)) {
       this._states = this._getStates(
         this._opened,
@@ -192,23 +213,24 @@ export class HaEntityPicker extends LitElement {
         this.includeDomains,
         this.excludeDomains,
         this.entityFilter,
-        this.includeDeviceClasses
+        this.includeDeviceClasses,
+        this.includeUnitOfMeasurement
       );
-      (this.comboBox as any).filteredItems = this._states;
+      if (this._initedStates) {
+        (this.comboBox as any).filteredItems = this._states;
+      }
       this._initedStates = true;
     }
   }
 
   protected render(): TemplateResult {
-    if (!this.hass) {
-      return html``;
-    }
     return html`
       <vaadin-combo-box-light
         item-value-path="entity_id"
         item-label-path="entity_id"
         .value=${this._value}
         .allowCustomValue=${this.allowCustomEntity}
+        .filteredItems=${this._states}
         ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}