Add active property

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

@@ -20,6 +20,11 @@ const chips: HaChipSetItem[] = [
     leadingIcon: mdiHomeAssistant,
     label: "Demo chip",
   },
+  {
+    leadingIcon: mdiHomeAssistant,
+    label: "Demo chip",
+    active: true,
+  },
   {},
   {
     trailingIcon: mdiClose,
@@ -48,6 +53,8 @@ export class DemoHaChip extends LitElement {
 
   @state() standaloneIsOutlined = false;
 
+  @state() standaloneIsActive = false;
+
   protected render(): TemplateResult {
     return html`
       <div class="filters">
@@ -57,12 +64,16 @@ export class DemoHaChip extends LitElement {
         <ha-formfield label="Outline standalone chips">
           <ha-switch @change=${this._toggleOutline}></ha-switch>
         </ha-formfield>
+        <ha-formfield label="Activate standalone chips">
+          <ha-switch @change=${this._toggleActive}></ha-switch>
+        </ha-formfield>
       </div>
       <ha-card header="Standalone ha-chip demo">
         <div class="card-content">
           <div class="standalone">
             <span>Simple:</span>
             <ha-chip
+              .active=${this.standaloneIsActive}
               .outlined=${this.standaloneIsOutlined}
               ?disabled=${this.standaloneIsDisabled}
               >Demo chip</ha-chip
@@ -72,6 +83,7 @@ export class DemoHaChip extends LitElement {
           <div class="standalone">
             <span>Label property:</span>
             <ha-chip
+              .active=${this.standaloneIsActive}
               .outlined=${this.standaloneIsOutlined}
               ?disabled=${this.standaloneIsDisabled}
               label="Demo chip"
@@ -81,6 +93,7 @@ export class DemoHaChip extends LitElement {
           <div class="standalone">
             <span>With leadingIcon:</span>
             <ha-chip
+              .active=${this.standaloneIsActive}
               .leadingIcon=${mdiHomeAssistant}
               .outlined=${this.standaloneIsOutlined}
               ?disabled=${this.standaloneIsDisabled}
@@ -91,6 +104,7 @@ export class DemoHaChip extends LitElement {
           <div class="standalone">
             <span>With trailingIcon property:</span>
             <ha-chip
+              .active=${this.standaloneIsActive}
               .trailingIcon=${mdiHomeAssistant}
               .outlined=${this.standaloneIsOutlined}
               ?disabled=${this.standaloneIsDisabled}
@@ -101,6 +115,7 @@ export class DemoHaChip extends LitElement {
           <div class="standalone">
             <span>With trailing-icon slot:</span>
             <ha-chip
+              .active=${this.standaloneIsActive}
               .outlined=${this.standaloneIsOutlined}
               ?disabled=${this.standaloneIsDisabled}
             >
@@ -127,6 +142,10 @@ export class DemoHaChip extends LitElement {
     `;
   }
 
+  private _toggleActive() {
+    this.standaloneIsActive = !this.standaloneIsActive;
+  }
+
   private _toggleDisable() {
     this.standaloneIsDisabled = !this.standaloneIsDisabled;
   }

src/components/ha-chip-set.ts

@@ -16,6 +16,7 @@ export interface HaChipSetItem {
   leadingIcon?: string;
   trailingIcon?: string;
   outlined?: boolean;
+  active?: boolean;
 }
 
 @customElement("ha-chip-set")
@@ -31,6 +32,7 @@ export class HaChipSet extends LitElement {
                 html`
                   <ha-chip
                     .index=${idx}
+                    .active=${item.active || false}
                     .label=${item.label}
                     .leadingIcon=${item.leadingIcon}
                     .trailingIcon=${item.trailingIcon}

src/components/ha-chip.ts

@@ -1,3 +1,4 @@
+import "./ha-circular-progress";
 import "./ha-svg-icon"; // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
 import {
@@ -25,6 +26,8 @@ export class HaChip extends LitElement {
 
   @property({ type: Boolean }) public outlined = false;
 
+  @property({ type: Boolean }) public active = false;
+
   @property() public label?: string;
 
   @property() public leadingIcon?: string;
@@ -39,11 +42,15 @@ export class HaChip extends LitElement {
       >
         ${this.leadingIcon
           ? html`<span role="gridcell">
-              <span role="button" tabindex="0" class="mdc-chip__primary-action"
+              <span role="button" tabindex="0" class="mdc-chip__primary-action">
-                ><ha-svg-icon
+                ${this.active
-                  class="mdc-chip__icon mdc-chip__icon--leading"
+                  ? html`<ha-circular-progress alt="active" size="tiny" active>
-                  .path=${this.leadingIcon}
+                    </ha-circular-progress>`
-                ></ha-svg-icon>
+                  : html`<ha-svg-icon
+                      class="mdc-chip__icon mdc-chip__icon--leading"
+                      .path=${this.leadingIcon}
+                    >
+                    </ha-svg-icon>`}
               </span>
             </span>`
           : ""}
@@ -109,6 +116,26 @@ export class HaChip extends LitElement {
         color: var(--ha-chip-icon-color, var(--text-primary-color));
       }
 
+      ha-circular-progress {
+        --mdc-theme-primary: var(
+          --ha-chip-icon-color,
+          var(--text-primary-color)
+        );
+        padding: 8px;
+        margin-left: -12px !important;
+        margin-right: -2px;
+      }
+
+      .mdc-chip.outlined ha-circular-progress {
+        border-radius: 50%;
+        margin-right: 4px;
+        background-color: var(--ha-chip-background-color, var(--primary-color));
+        --mdc-theme-primary: var(
+          --ha-chip-icon-color,
+          var(--text-primary-color)
+        );
+      }
+
       .mdc-chip.outlined ha-svg-icon,
       slot[name="trailing-icon"]::slotted(ha-svg-icon) {
         border-radius: 50%;
@@ -127,7 +154,7 @@ export class HaChip extends LitElement {
         height: 18px;
         font-size: 18px;
         padding: 2px;
-        color: var(--ha-chip-icon-color);
+        color: var(--ha-chip-icon-color, var(--text-primary-color));
         margin-right: -8px;
         display: inline-flex;
         align-items: center;