Entities Card: Entity Row Editor

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

@@ -93,6 +93,8 @@ export class HaEntityPicker extends LitElement {
 
   @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
 
+  @property({ type: Boolean }) public hideClearIcon = false;
+
   @property({ type: Boolean }) private _opened = false;
 
   @query("vaadin-combo-box-light") private _comboBox!: HTMLElement;
@@ -204,7 +206,7 @@ export class HaEntityPicker extends LitElement {
           autocorrect="off"
           spellcheck="false"
         >
-          ${this.value
+          ${this.value && !this.hideClearIcon
             ? html`
                 <ha-icon-button
                   aria-label=${this.hass.localize(

src/panels/lovelace/cards/hui-entities-card.ts

@@ -3,8 +3,8 @@ import {
   CSSResult,
   customElement,
   html,
-  LitElement,
   internalProperty,
+  LitElement,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -13,19 +13,23 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen
 import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-card";
 import { HomeAssistant } from "../../../types";
+import { computeCardSize } from "../common/compute-card-size";
 import { findEntities } from "../common/find-entites";
 import { processConfigEntities } from "../common/process-config-entities";
 import "../components/hui-entities-toggle";
 import { createHeaderFooterElement } from "../create-element/create-header-footer-element";
 import { createRowElement } from "../create-element/create-row-element";
-import { LovelaceRow } from "../entity-rows/types";
+import {
+  EntityConfig,
+  LovelaceRow,
+  LovelaceRowConfig,
+} from "../entity-rows/types";
 import {
   LovelaceCard,
   LovelaceCardEditor,
   LovelaceHeaderFooter,
 } from "../types";
-import { EntitiesCardConfig, EntitiesCardEntityConfig } from "./types";
-import { computeCardSize } from "../common/compute-card-size";
+import { EntitiesCardConfig } from "./types";
 
 @customElement("hui-entities-card")
 class HuiEntitiesCard extends LitElement implements LovelaceCard {
@@ -57,7 +61,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
 
   private _hass?: HomeAssistant;
 
-  private _configEntities?: EntitiesCardEntityConfig[];
+  private _configEntities?: LovelaceRowConfig[];
 
   private _showHeaderToggle?: boolean;
 
@@ -115,7 +119,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
       // Default value is show toggle if we can at least toggle 2 entities.
       let toggleable = 0;
       for (const rowConf of entities) {
-        if (!rowConf.entity) {
+        if (!("entity" in rowConf)) {
           continue;
         }
         toggleable += Number(DOMAINS_TOGGLE.has(computeDomain(rowConf.entity)));
@@ -188,7 +192,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
                     ? html`
                         <ha-icon
                           class="icon"
-                          .icon="${this._config.icon}"
+                          .icon=${this._config.icon}
                         ></ha-icon>
                       `
                     : ""}
@@ -198,10 +202,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
                   ? html``
                   : html`
                       <hui-entities-toggle
-                        .hass="${this._hass}"
-                        .entities="${this._configEntities!.map(
-                          (conf) => conf.entity
-                        )}"
+                        .hass=${this._hass}
+                        .entities=${(this._configEntities!.filter(
+                          (conf) => "type" in conf
+                        ) as EntityConfig[]).map((conf) => conf.entity)}
                       ></hui-entities-toggle>
                     `}
               </div>
@@ -285,20 +289,20 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private renderEntity(entityConf: EntitiesCardEntityConfig): TemplateResult {
+  private renderEntity(entityConf: LovelaceRowConfig): TemplateResult {
     const element = createRowElement(
-      this._config!.state_color
-        ? {
+      !("type" in entityConf) && this._config!.state_color
+        ? ({
             state_color: true,
-            ...entityConf,
-          }
+            ...(entityConf as EntityConfig),
+          } as EntityConfig)
         : entityConf
     );
     if (this._hass) {
       element.hass = this._hass;
     }
 
-    return html` <div>${element}</div> `;
+    return html`<div>${element}</div>`;
   }
 }
 

src/panels/lovelace/cards/types.ts

@@ -3,7 +3,11 @@ import { FullCalendarView } from "../../../types";
 import { Condition } from "../common/validate-condition";
 import { HuiImage } from "../components/hui-image";
 import { LovelaceElementConfig } from "../elements/types";
-import { EntityConfig, EntityFilterEntityConfig } from "../entity-rows/types";
+import {
+  EntityConfig,
+  EntityFilterEntityConfig,
+  LovelaceRowConfig,
+} from "../entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
 
 export interface AlarmPanelCardConfig extends LovelaceCardConfig {
@@ -60,7 +64,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig {
   type: "entities";
   show_header_toggle?: boolean;
   title?: string;
-  entities: Array<EntitiesCardEntityConfig | string>;
+  entities: Array<LovelaceRowConfig | string>;
   theme?: string;
   icon?: string;
   header?: LovelaceHeaderFooterConfig;

src/panels/lovelace/common/has-changed.ts

@@ -56,6 +56,7 @@ export function hasConfigOrEntitiesChanged(
 
   return entities.some(
     (entity) =>
+      "entity" in entity &&
       oldHass.states[entity.entity] !== element.hass!.states[entity.entity]
   );
 }

src/panels/lovelace/common/process-config-entities.ts

@@ -1,8 +1,10 @@
 // Parse array of entity objects from config
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
-import { EntityConfig } from "../entity-rows/types";
+import { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
 
-export const processConfigEntities = <T extends EntityConfig>(
+export const processConfigEntities = <
+  T extends EntityConfig | LovelaceRowConfig
+>(
   entities: Array<T | string>
 ): T[] => {
   if (!entities || !Array.isArray(entities)) {
@@ -24,7 +26,7 @@ export const processConfigEntities = <T extends EntityConfig>(
       if (typeof entityConf === "string") {
         config = { entity: entityConf } as T;
       } else if (typeof entityConf === "object" && !Array.isArray(entityConf)) {
-        if (!entityConf.entity) {
+        if (!("entity" in entityConf)) {
           throw new Error(
             `Entity object at position ${index} is missing entity field.`
           );
@@ -34,9 +36,11 @@ export const processConfigEntities = <T extends EntityConfig>(
         throw new Error(`Invalid entity specified at position ${index}.`);
       }
 
-      if (!isValidEntityId(config.entity)) {
+      if (!isValidEntityId((config as EntityConfig).entity!)) {
         throw new Error(
-          `Invalid entity ID at position ${index}: ${config.entity}`
+          `Invalid entity ID at position ${index}: ${
+            (config as EntityConfig).entity
+          }`
         );
       }
 

src/panels/lovelace/create-element/create-element-base.ts

@@ -5,6 +5,7 @@ import {
 } from "../../../data/lovelace";
 import { CUSTOM_TYPE_PREFIX } from "../../../data/lovelace_custom_cards";
 import type { HuiErrorCard } from "../cards/hui-error-card";
+import type { ErrorCardConfig } from "../cards/types";
 import { LovelaceElement, LovelaceElementConfig } from "../elements/types";
 import { LovelaceRow, LovelaceRowConfig } from "../entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
@@ -13,8 +14,8 @@ import {
   LovelaceCard,
   LovelaceCardConstructor,
   LovelaceHeaderFooter,
+  LovelaceRowConstructor,
 } from "../types";
-import type { ErrorCardConfig } from "../cards/types";
 
 const TIMEOUT = 2000;
 
@@ -37,7 +38,7 @@ interface CreateElementConfigTypes {
   row: {
     config: LovelaceRowConfig;
     element: LovelaceRow;
-    constructor: unknown;
+    constructor: LovelaceRowConstructor;
   };
   "header-footer": {
     config: LovelaceHeaderFooterConfig;

src/panels/lovelace/create-element/create-row-element.ts

@@ -4,11 +4,14 @@ import "../entity-rows/hui-script-entity-row";
 import "../entity-rows/hui-sensor-entity-row";
 import "../entity-rows/hui-text-entity-row";
 import "../entity-rows/hui-toggle-entity-row";
-import { EntityConfig } from "../entity-rows/types";
+import { LovelaceRowConfig } from "../entity-rows/types";
 import "../special-rows/hui-attribute-row";
 import "../special-rows/hui-button-row";
 import "../special-rows/hui-call-service-row";
-import { createLovelaceElement } from "./create-element-base";
+import {
+  createLovelaceElement,
+  getLovelaceElementClass,
+} from "./create-element-base";
 
 const ALWAYS_LOADED_TYPES = new Set([
   "media-player-entity",
@@ -74,7 +77,7 @@ const DOMAIN_TO_ELEMENT_TYPE = {
   weather: "weather",
 };
 
-export const createRowElement = (config: EntityConfig) =>
+export const createRowElement = (config: LovelaceRowConfig) =>
   createLovelaceElement(
     "row",
     config,
@@ -83,3 +86,12 @@ export const createRowElement = (config: EntityConfig) =>
     DOMAIN_TO_ELEMENT_TYPE,
     undefined
   );
+
+export const getRowElementClass = (type: string) => {
+  return getLovelaceElementClass(
+    type,
+    "row",
+    ALWAYS_LOADED_TYPES,
+    LAZY_LOAD_TYPES
+  );
+};

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -1,42 +1,42 @@
+import { mdiHelpCircle } from "@mdi/js";
 import deepFreeze from "deep-freeze";
 import {
   css,
   CSSResultArray,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
+  PropertyValues,
   query,
   TemplateResult,
-  PropertyValues,
 } from "lit-element";
-import { mdiHelpCircle } from "@mdi/js";
-
+import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { haStyleDialog } from "../../../../resources/styles";
-import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
-import { addCard, replaceCard } from "../config-util";
-import { getCardDocumentationURL } from "../get-card-documentation-url";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
-import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
-
-import type { HomeAssistant } from "../../../../types";
-import type { GUIModeChangedEvent } from "../types";
-import type { ConfigChangedEvent, HuiCardEditor } from "./hui-card-editor";
-import type { EditCardDialogParams } from "./show-edit-card-dialog";
-import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
-import type { HASSDomEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-circular-progress";
+import "../../../../components/ha-dialog";
+import "../../../../components/ha-header-bar";
 import type {
   LovelaceCardConfig,
   LovelaceViewConfig,
 } from "../../../../data/lovelace";
-
-import "./hui-card-editor";
+import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
+import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { haStyleDialog } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
+import { addCard, replaceCard } from "../config-util";
+import { getCardDocumentationURL } from "../get-card-documentation-url";
+import "../hui-element-editor";
+import type {
+  ConfigChangedEvent,
+  HuiElementEditor,
+} from "../hui-element-editor";
+import type { GUIModeChangedEvent } from "../types";
 import "./hui-card-preview";
-import "../../../../components/ha-dialog";
-import "../../../../components/ha-header-bar";
-import "../../../../components/ha-circular-progress";
+import type { EditCardDialogParams } from "./show-edit-card-dialog";
 
 declare global {
   // for fire event
@@ -65,7 +65,7 @@ export class HuiDialogEditCard extends LitElement implements HassDialog {
 
   @internalProperty() private _guiModeAvailable? = true;
 
-  @query("hui-card-editor") private _cardEditorEl?: HuiCardEditor;
+  @query("hui-element-editor") private _cardEditorEl?: HuiElementEditor;
 
   @internalProperty() private _GUImode = true;
 
@@ -183,14 +183,14 @@ export class HuiDialogEditCard extends LitElement implements HassDialog {
         </div>
         <div class="content">
           <div class="element-editor">
-            <hui-card-editor
+            <hui-element-editor
               .hass=${this.hass}
               .lovelace=${this._params.lovelaceConfig}
               .value=${this._cardConfig}
               @config-changed=${this._handleConfigChanged}
               @GUImode-changed=${this._handleGUIModeChanged}
               @editor-save=${this._save}
-            ></hui-card-editor>
+            ></hui-element-editor>
           </div>
           <div class="element-preview">
             <hui-card-preview
@@ -364,6 +364,8 @@ export class HuiDialogEditCard extends LitElement implements HassDialog {
         @media all and (min-width: 850px) {
           ha-dialog {
             --mdc-dialog-min-width: 845px;
+            --dialog-surface-top: 40px;
+            --mdc-dialog-max-height: calc(100% - 72px);
           }
         }
 
@@ -402,6 +404,9 @@ export class HuiDialogEditCard extends LitElement implements HassDialog {
           ha-dialog {
             --mdc-dialog-max-width: calc(100% - 32px);
             --mdc-dialog-min-width: 1000px;
+            --dialog-surface-position: fixed;
+            --dialog-surface-top: 40px;
+            --mdc-dialog-max-height: calc(100% - 72px);
           }
 
           .content {

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -1,19 +1,17 @@
-import { html } from "lit-element";
+import { css } from "lit-element";
 
-export const configElementStyle = html`
-  <style>
-    ha-switch {
-      padding: 16px 0;
-    }
-    .side-by-side {
-      display: flex;
-    }
-    .side-by-side > * {
-      flex: 1;
-      padding-right: 4px;
-    }
-    .suffix {
-      margin: 0 8px;
-    }
-  </style>
+export const configElementStyle = css`
+  ha-switch {
+    padding: 16px 0;
+  }
+  .side-by-side {
+    display: flex;
+  }
+  .side-by-side > * {
+    flex: 1;
+    padding-right: 4px;
+  }
+  .suffix {
+    margin: 0 8px;
+  }
 `;