diff --git a/src/components/ha-filter-blueprints.ts b/src/components/ha-filter-blueprints.ts
index c20dc197bfc8..2b48e27e5458 100644
--- a/src/components/ha-filter-blueprints.ts
+++ b/src/components/ha-filter-blueprints.ts
@@ -1,12 +1,13 @@
import { SelectedDetail } from "@material/mwc-list";
import "@material/mwc-menu/mwc-menu-surface";
+import { mdiFilterVariantRemove } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
+import { Blueprints, fetchBlueprints } from "../data/blueprint";
import { findRelated, RelatedResult } from "../data/search";
-import type { HomeAssistant } from "../types";
import { haStyleScrollbar } from "../resources/styles";
-import { Blueprints, fetchBlueprints } from "../data/blueprint";
+import type { HomeAssistant } from "../types";
@customElement("ha-filter-blueprints")
export class HaFilterBlueprints extends LitElement {
@@ -35,7 +36,11 @@ export class HaFilterBlueprints extends LitElement {
${this._blueprints && this._shouldRender
@@ -128,6 +133,15 @@ export class HaFilterBlueprints 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,
@@ -147,6 +161,10 @@ export class HaFilterBlueprints 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;
diff --git a/src/components/ha-filter-categories.ts b/src/components/ha-filter-categories.ts
index fdaa8d481a1d..40dac92a85c6 100644
--- a/src/components/ha-filter-categories.ts
+++ b/src/components/ha-filter-categories.ts
@@ -2,6 +2,7 @@ import { ActionDetail, SelectedDetail } from "@material/mwc-list";
import {
mdiDelete,
mdiDotsVertical,
+ mdiFilterVariantRemove,
mdiPencil,
mdiPlus,
mdiTag,
@@ -68,7 +69,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
${this._shouldRender
@@ -254,6 +259,15 @@ export class HaFilterCategories extends SubscribeMixin(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,
@@ -274,6 +288,10 @@ export class HaFilterCategories extends SubscribeMixin(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;
diff --git a/src/components/ha-filter-devices.ts b/src/components/ha-filter-devices.ts
index de5f5d9c7850..97f17f9c83b0 100644
--- a/src/components/ha-filter-devices.ts
+++ b/src/components/ha-filter-devices.ts
@@ -1,3 +1,4 @@
+import { mdiFilterVariantRemove } from "@mdi/js";
import {
css,
CSSResultGroup,
@@ -54,7 +55,11 @@ export class HaFilterDevices extends LitElement {
${this._shouldRender
@@ -185,6 +190,15 @@ export class HaFilterDevices 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,
@@ -205,6 +219,10 @@ export class HaFilterDevices 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;
diff --git a/src/components/ha-filter-entities.ts b/src/components/ha-filter-entities.ts
index 15d9b2f39154..585d35a527ad 100644
--- a/src/components/ha-filter-entities.ts
+++ b/src/components/ha-filter-entities.ts
@@ -1,3 +1,4 @@
+import { mdiFilterVariantRemove } from "@mdi/js";
import {
css,
CSSResultGroup,
@@ -55,7 +56,11 @@ export class HaFilterEntities extends LitElement {
${this._shouldRender
@@ -204,6 +209,15 @@ export class HaFilterEntities 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,
@@ -223,6 +237,10 @@ export class HaFilterEntities 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;
diff --git a/src/components/ha-filter-floor-areas.ts b/src/components/ha-filter-floor-areas.ts
index 6960621fb309..ba983b7349aa 100644
--- a/src/components/ha-filter-floor-areas.ts
+++ b/src/components/ha-filter-floor-areas.ts
@@ -1,5 +1,5 @@
import "@material/mwc-menu/mwc-menu-surface";
-import { mdiTextureBox } from "@mdi/js";
+import { mdiFilterVariantRemove, mdiTextureBox } from "@mdi/js";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@@ -53,9 +53,13 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
${this.hass.localize("ui.panel.config.areas.caption")}
${this.value?.areas?.length || this.value?.floors?.length
? html`
- ${(this.value?.areas?.length || 0) +
- (this.value?.floors?.length || 0)}
-
`
+ ${(this.value?.areas?.length || 0) +
+ (this.value?.floors?.length || 0)}
+
+ `
: nothing}
${this._shouldRender
@@ -238,6 +242,15 @@ export class HaFilterFloorAreas extends SubscribeMixin(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,
@@ -257,6 +270,10 @@ export class HaFilterFloorAreas extends SubscribeMixin(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;
diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts
index 5f8b1224b5cd..2f8b6f3cf050 100644
--- a/src/components/ha-filter-integrations.ts
+++ b/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 {
${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;
diff --git a/src/components/ha-filter-labels.ts b/src/components/ha-filter-labels.ts
index c28b3fabe18e..eef52f52de99 100644
--- a/src/components/ha-filter-labels.ts
+++ b/src/components/ha-filter-labels.ts
@@ -1,6 +1,6 @@
import { SelectedDetail } from "@material/mwc-list";
import "@material/mwc-menu/mwc-menu-surface";
-import { mdiCog } from "@mdi/js";
+import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@@ -53,7 +53,11 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
${this._shouldRender
@@ -150,6 +154,15 @@ export class HaFilterLabels extends SubscribeMixin(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,
@@ -170,6 +183,10 @@ export class HaFilterLabels extends SubscribeMixin(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;
diff --git a/src/components/ha-filter-states.ts b/src/components/ha-filter-states.ts
index 71451460b0a8..b3eb0fc1da77 100644
--- a/src/components/ha-filter-states.ts
+++ b/src/components/ha-filter-states.ts
@@ -1,11 +1,12 @@
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 { fireEvent } from "../common/dom/fire_event";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types";
-import "./ha-expansion-panel";
import "./ha-check-list-item";
+import "./ha-expansion-panel";
import "./ha-icon";
@customElement("ha-filter-states")
@@ -43,7 +44,11 @@ export class HaFilterStates extends LitElement {
${this._shouldRender
@@ -118,6 +123,15 @@ export class HaFilterStates 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,
@@ -137,6 +151,10 @@ export class HaFilterStates 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;
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 53a60e37e3db..57036a9ab4c5 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -368,14 +368,16 @@ export class HaTabsSubpageDataTable extends LitElement {
"ui.components.subpage-data-table.filters"
)}
-
+ ${this.filters
+ ? html``
+ : nothing}
-
+ ${this.filters
+ ? html``
+ : nothing}