Add clear filter button to individual filters (#20343)

src/components/ha-filter-integrations.ts

@@ -1,4 +1,5 @@
 import { SelectedDetail } from "@material/mwc-list";
+import { mdiFilterVariantRemove } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
@@ -38,7 +39,11 @@ export class HaFilterIntegrations extends LitElement {
         <div slot="header" class="header">
           ${this.hass.localize("ui.panel.config.integrations.caption")}
           ${this.value?.length
-            ? html`<div class="badge">${this.value?.length}</div>`
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
             : nothing}
         </div>
         ${this._manifests && this._shouldRender
@@ -142,6 +147,15 @@ export class HaFilterIntegrations extends LitElement {
     });
   }
 
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = undefined;
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
@@ -161,6 +175,10 @@ export class HaFilterIntegrations extends LitElement {
           display: flex;
           align-items: center;
         }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
         .badge {
           display: inline-block;
           margin-left: 8px;