Hide entity pickers when in entity-filter

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

@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
@@ -51,6 +51,8 @@ class HaEntitiesPickerLight extends LitElement {
 
   @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
 
+  @property() public label?: string;
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -58,6 +60,7 @@ class HaEntitiesPickerLight extends LitElement {
 
     const currentEntities = this._currentEntities;
     return html`
+      <h3>${this.label}</h3>
       ${currentEntities.map(
         (entityId) => html`
           <div>
@@ -145,6 +148,14 @@ class HaEntitiesPickerLight extends LitElement {
 
     this._updateEntities([...currentEntities, toAdd]);
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: var(--entity-picker-display);
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -296,6 +296,10 @@ export class HaStatisticPicker extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host {
+        display: var(--entity-picker-display);
+      }
+
       paper-input > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;

src/panels/lovelace/components/hui-entity-editor.ts

@@ -186,6 +186,10 @@ export class HuiEntityEditor extends LitElement {
     return [
       sortableStyles,
       css`
+        :host {
+          display: var(--entity-picker-display);
+        }
+
         .entity {
           display: flex;
           align-items: center;

src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts

@@ -111,15 +111,12 @@ export class HuiCalendarCardEditor
           @value-changed=${this._valueChanged}
         ></hui-theme-select-editor>
       </div>
-      <h3>
-        ${this.hass.localize(
-          "ui.panel.lovelace.editor.card.calendar.calendar_entities"
-        ) +
-        " (" +
-        this.hass!.localize("ui.panel.lovelace.editor.card.config.required") +
-        ")"}
-      </h3>
       <ha-entities-picker
+        .label=${`${this.hass.localize(
+          "ui.panel.lovelace.editor.card.calendar.calendar_entities"
+        )} (${this.hass!.localize(
+          "ui.panel.lovelace.editor.card.config.required"
+        )})`}
         .hass=${this.hass!}
         .value=${this._configEntities}
         .includeDomains=${["calendar"]}

src/panels/lovelace/editor/config-elements/hui-entity-filter-card-editor.ts

@@ -351,7 +351,6 @@ export class HuiEntityFilterCardEditor
         .states,
         .card {
           margin-top: 8px;
-          border: 1px solid var(--divider-color);
           padding: 12px;
         }
         @media (max-width: 450px) {
@@ -361,6 +360,9 @@ export class HuiEntityFilterCardEditor
             margin: 8px -12px 0;
           }
         }
+        .card {
+          --entity-picker-display: none;
+        }
 
         .state {
           display: flex;

src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts

@@ -76,8 +76,8 @@ export class HuiLogbookCardEditor
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.title"
           )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
+      "ui.panel.lovelace.editor.card.config.optional"
+    )})"
           .value=${this._title}
           .configValue=${"title"}
           @value-changed=${this._valueChanged}
@@ -94,22 +94,19 @@ export class HuiLogbookCardEditor
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.hours_to_show"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
+      "ui.panel.lovelace.editor.card.config.optional"
+    )})"
             .value=${this._hours_to_show}
             min="1"
             .configValue=${"hours_to_show"}
             @value-changed=${this._valueChanged}
           ></paper-input>
         </div>
-        <h3>
-          ${`${this.hass!.localize(
+          .label=${`${this.hass!.localize(
             "ui.panel.lovelace.editor.card.generic.entities"
           )} (${this.hass!.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})`}
-        </h3>
-        <ha-entities-picker
           .hass=${this.hass}
           .value=${this._configEntities}
           @value-changed=${this._valueChanged}

src/panels/lovelace/editor/hui-entities-card-row-editor.ts

@@ -253,6 +253,10 @@ export class HuiEntitiesCardRowEditor extends LitElement {
     return [
       sortableStyles,
       css`
+        :host {
+          display: var(--entity-picker-display);
+        }
+
         .entity {
           display: flex;
           align-items: center;