diff --git a/src/components/ha-icon-picker.ts b/src/components/ha-icon-picker.ts index 9197d5bb7b..93da7a5d87 100644 --- a/src/components/ha-icon-picker.ts +++ b/src/components/ha-icon-picker.ts @@ -60,6 +60,8 @@ export class HaIconPicker extends LitElement { @property({ type: Boolean }) public disabled = false; + @property({ type: Boolean }) public invalid = false; + @state() private _opened = false; @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement; @@ -86,6 +88,8 @@ export class HaIconPicker extends LitElement { autocomplete="off" autocorrect="off" spellcheck="false" + .errorMessage=${this.errorMessage} + .invalid=${this.invalid} > ${this._value || this.placeholder ? html` diff --git a/src/data/zone.ts b/src/data/zone.ts index e1c630f020..a4e091c30e 100644 --- a/src/data/zone.ts +++ b/src/data/zone.ts @@ -12,7 +12,7 @@ export interface Zone { } export interface ZoneMutableParams { - icon: string; + icon?: string; latitude: number; longitude: number; name: string; diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts index 8adc9b1591..81c3e78807 100644 --- a/src/panels/config/zone/dialog-zone-detail.ts +++ b/src/panels/config/zone/dialog-zone-detail.ts @@ -8,6 +8,7 @@ import { addDistanceToCoord } from "../../../common/location/add_distance_to_coo import { computeRTLDirection } from "../../../common/util/compute_rtl"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-formfield"; +import "../../../components/ha-icon-picker"; import "../../../components/ha-switch"; import "../../../components/map/ha-locations-editor"; import type { MarkerLocation } from "../../../components/map/ha-locations-editor"; @@ -77,14 +78,18 @@ class DialogZoneDetail extends LitElement { if (!this._params) { return html``; } - const nameValid = this._name.trim() === ""; - const iconValid = !this._icon.trim().includes(":"); - const latValid = String(this._latitude) === ""; - const lngValid = String(this._longitude) === ""; - const radiusValid = String(this._radius) === ""; + const nameInvalid = this._name.trim() === ""; + const iconInvalid = Boolean(this._icon && !this._icon.trim().includes(":")); + const latInvalid = String(this._latitude) === ""; + const lngInvalid = String(this._longitude) === ""; + const radiusInvalid = String(this._radius) === ""; const valid = - !nameValid && !iconValid && !latValid && !lngValid && !radiusValid; + !nameInvalid && + !iconInvalid && + !latInvalid && + !lngInvalid && + !radiusInvalid; return html` - + .invalid=${iconInvalid} + >

${this.hass!.localize("ui.panel.config.zone.detail.passive_note")} @@ -268,12 +273,14 @@ class DialogZoneDetail extends LitElement { try { const values: ZoneMutableParams = { name: this._name.trim(), - icon: this._icon.trim(), latitude: this._latitude, longitude: this._longitude, passive: this._passive, radius: this._radius, }; + if (this._icon) { + values.icon = this._icon.trim(); + } if (this._params!.entry) { await this._params!.updateEntry!(values); } else {