Make ha-chip-set slot-able (#10647)

gallery/src/demos/demo-ha-chips.ts

@@ -3,6 +3,7 @@ import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-chip";
+import "../../../src/components/ha-chip-set";
 import "../../../src/components/ha-svg-icon";
 
 const chips: {
@@ -22,8 +23,8 @@ const chips: {
   },
 ];
 
-@customElement("demo-ha-chip")
+@customElement("demo-ha-chips")
-export class DemoHaChip extends LitElement {
+export class DemoHaChips extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card header="ha-chip demo">
@@ -41,6 +42,23 @@ export class DemoHaChip extends LitElement {
           )}
         </div>
       </ha-card>
+      <ha-card header="ha-chip-set demo">
+        <div class="card-content">
+          <ha-chip-set>
+            ${chips.map(
+              (chip) => html`
+                <ha-chip .hasIcon=${chip.icon !== undefined}>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : ""}
+                  ${chip.content}
+                </ha-chip>
+              `
+            )}
+          </ha-chip-set>
+        </div>
+      </ha-card>
     `;
   }
 
@@ -50,12 +68,19 @@ export class DemoHaChip extends LitElement {
         max-width: 600px;
         margin: 24px auto;
       }
+      ha-chip {
+        margin-bottom: 4px;
+      }
+      .card-content {
+        display: flex;
+        flex-direction: column;
+      }
     `;
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-ha-chip": DemoHaChip;
+    "demo-ha-chips": DemoHaChips;
   }
 }

src/components/ha-chip-set.ts

@@ -8,52 +8,31 @@ import {
   TemplateResult,
   unsafeCSS,
 } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import "./ha-chip";
-
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "chip-clicked": { index: string };
-  }
-}
 
 @customElement("ha-chip-set")
 export class HaChipSet extends LitElement {
-  @property() public items = [];
-
   protected render(): TemplateResult {
-    if (this.items.length === 0) {
-      return html``;
-    }
     return html`
       <div class="mdc-chip-set">
-        ${this.items.map(
+        <slot></slot>
-          (item, idx) =>
-            html`
-              <ha-chip .index=${idx} @click=${this._handleClick}>
-                ${item}
-              </ha-chip>
-            `
-        )}
       </div>
     `;
   }
 
-  private _handleClick(ev): void {
-    fireEvent(this, "chip-clicked", {
-      index: ev.currentTarget.index,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
 
-      ha-chip {
+      slot::slotted(ha-chip) {
         margin: 4px;
       }
+      slot::slotted(ha-chip:first-of-type) {
+        margin-left: -4px;
+      }
+      slot::slotted(ha-chip:last-of-type) {
+        margin-right: -4px;
+      }
     `;
   }
 }

src/components/ha-chip.ts

@@ -10,22 +10,13 @@ import {
 } from "lit";
 import { customElement, property } from "lit/decorators";
 
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "chip-clicked": { index: string };
-  }
-}
-
 @customElement("ha-chip")
 export class HaChip extends LitElement {
-  @property() public index = 0;
-
   @property({ type: Boolean }) public hasIcon = false;
 
   protected render(): TemplateResult {
     return html`
-      <div class="mdc-chip" .index=${this.index}>
+      <div class="mdc-chip">
         ${this.hasIcon
           ? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
               <slot name="icon"></slot>

src/panels/config/devices/device-detail/ha-device-automation-card.ts

@@ -1,6 +1,8 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
+import "../../../../components/ha-chip";
 import "../../../../components/ha-chip-set";
 import { showAutomationEditor } from "../../../../data/automation";
 import {
@@ -10,6 +12,12 @@ import {
 import { showScriptEditor } from "../../../../data/script";
 import { HomeAssistant } from "../../../../types";
 
+declare global {
+  interface HASSDomEvents {
+    "entry-selected": undefined;
+  }
+}
+
 export abstract class HaDeviceAutomationCard<
   T extends DeviceAutomation
 > extends LitElement {
@@ -55,29 +63,34 @@ export abstract class HaDeviceAutomationCard<
     return html`
       <h3>${this.hass.localize(this.headerKey)}</h3>
       <div class="content">
-        <ha-chip-set
+        <ha-chip-set>
-          @chip-clicked=${this._handleAutomationClicked}
+          ${this.automations.map(
-          .items=${this.automations.map((automation) =>
+            (automation, idx) =>
-            this._localizeDeviceAutomation(this.hass, automation)
+              html`
+                <ha-chip .index=${idx} @click=${this._handleAutomationClicked}>
+                  ${this._localizeDeviceAutomation(this.hass, automation)}
+                </ha-chip>
+              `
           )}
-        >
         </ha-chip-set>
       </div>
     `;
   }
 
   private _handleAutomationClicked(ev: CustomEvent) {
-    const automation = this.automations[ev.detail.index];
+    const automation = this.automations[(ev.currentTarget as any).index];
     if (!automation) {
       return;
     }
     if (this.script) {
       showScriptEditor({ sequence: [automation as DeviceAction] });
+      fireEvent(this, "entry-selected");
       return;
     }
     const data = {};
     data[this.type] = [automation];
     showAutomationEditor(data);
+    fireEvent(this, "entry-selected");
   }
 
   static get styles(): CSSResultGroup {

src/panels/config/devices/device-detail/ha-device-automation-dialog.ts

@@ -91,7 +91,7 @@ export class DialogDeviceAutomation extends LitElement {
           }.create`
         )}
       >
-        <div @chip-clicked=${this.closeDialog}>
+        <div @entry-selected=${this.closeDialog}>
           ${this._triggers.length ||
           this._conditions.length ||
           this._actions.length