From 1d1e05dbdf4204d6ab92a78edefd49f1d79298c2 Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Wed, 11 Feb 2026 10:30:10 +0100 Subject: [PATCH] Migrate from ha-md-select to ha-select (#29551) * Migrate from ha-md-select to ha-select across multiple components * Review * Remove --md-filled-field-content-space --- .../device/ha-device-automation-picker.ts | 10 +- src/components/ha-md-select-option.ts | 27 ---- src/components/ha-md-select.ts | 36 ------ .../config/ha-backup-config-addon.ts | 48 ++++--- .../config/ha-backup-config-data.ts | 73 ++++++----- .../config/ha-backup-config-retention.ts | 104 ++++++++-------- .../config/ha-backup-config-schedule.ts | 117 ++++++++---------- .../backup/dialogs/dialog-generate-backup.ts | 62 ++++------ .../config/logs/dialog-download-logs.ts | 27 ++-- .../hui-dialog-select-dashboard.ts | 45 +++---- 10 files changed, 219 insertions(+), 330 deletions(-) delete mode 100644 src/components/ha-md-select-option.ts delete mode 100644 src/components/ha-md-select.ts diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts index 67819e8d8f..4fd3572ee3 100644 --- a/src/components/device/ha-device-automation-picker.ts +++ b/src/components/device/ha-device-automation-picker.ts @@ -1,5 +1,5 @@ import { consume } from "@lit/context"; -import { css, html, LitElement, nothing } from "lit"; +import { html, LitElement, nothing } from "lit"; import { property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../common/dom/fire_event"; @@ -13,8 +13,6 @@ import { import type { EntityRegistryEntry } from "../../data/entity/entity_registry"; import type { HomeAssistant, ValueChangedEvent } from "../../types"; import "../ha-generic-picker"; -import "../ha-md-select"; -import "../ha-md-select-option"; import type { PickerValueRenderer } from "../ha-picker-field"; const NO_AUTOMATION_KEY = "NO_AUTOMATION"; @@ -217,10 +215,4 @@ export abstract class HaDeviceAutomationPicker< delete value.metadata; fireEvent(this, "value-changed", { value }); } - - static styles = css` - ha-select { - display: block; - } - `; } diff --git a/src/components/ha-md-select-option.ts b/src/components/ha-md-select-option.ts deleted file mode 100644 index f0df065e97..0000000000 --- a/src/components/ha-md-select-option.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { SelectOptionEl } from "@material/web/select/internal/selectoption/select-option"; -import { styles } from "@material/web/menu/internal/menuitem/menu-item-styles"; -import { css } from "lit"; -import { customElement } from "lit/decorators"; - -@customElement("ha-md-select-option") -export class HaMdSelectOption extends SelectOptionEl { - static override styles = [ - styles, - css` - :host { - --ha-icon-display: block; - --md-sys-color-primary: var(--primary-text-color); - --md-sys-color-secondary: var(--secondary-text-color); - --md-sys-color-surface: var(--card-background-color); - --md-sys-color-on-surface: var(--primary-text-color); - --md-sys-color-on-surface-variant: var(--secondary-text-color); - } - `, - ]; -} - -declare global { - interface HTMLElementTagNameMap { - "ha-md-select-option": HaMdSelectOption; - } -} diff --git a/src/components/ha-md-select.ts b/src/components/ha-md-select.ts deleted file mode 100644 index 2a6aa1070d..0000000000 --- a/src/components/ha-md-select.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { FilledSelect } from "@material/web/select/internal/filled-select"; -import { styles as sharedStyles } from "@material/web/select/internal/shared-styles"; -import { styles } from "@material/web/select/internal/filled-select-styles"; -import { css } from "lit"; -import { customElement } from "lit/decorators"; - -@customElement("ha-md-select") -export class HaMdSelect extends FilledSelect { - static override styles = [ - sharedStyles, - styles, - css` - :host { - --ha-icon-display: block; - --md-sys-color-primary: var(--primary-text-color); - --md-sys-color-secondary: var(--secondary-text-color); - --md-sys-color-surface: var(--card-background-color); - --md-sys-color-on-surface-variant: var(--secondary-text-color); - - --md-sys-color-surface-container-highest: var(--input-fill-color); - --md-sys-color-on-surface: var(--input-ink-color); - - --md-sys-color-surface-container: var(--input-fill-color); - --md-sys-color-on-secondary-container: var(--primary-text-color); - --md-sys-color-secondary-container: var(--input-fill-color); - --md-menu-container-color: var(--card-background-color); - } - `, - ]; -} - -declare global { - interface HTMLElementTagNameMap { - "ha-md-select": HaMdSelect; - } -} diff --git a/src/panels/config/backup/components/config/ha-backup-config-addon.ts b/src/panels/config/backup/components/config/ha-backup-config-addon.ts index b6f19d5ea0..88f1586c5f 100644 --- a/src/panels/config/backup/components/config/ha-backup-config-addon.ts +++ b/src/panels/config/backup/components/config/ha-backup-config-addon.ts @@ -3,13 +3,11 @@ import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-md-list"; import "../../../../../components/ha-md-list-item"; -import "../../../../../components/ha-md-select"; -import type { HaMdSelect } from "../../../../../components/ha-md-select"; -import "../../../../../components/ha-md-select-option"; import "../../../../../components/ha-md-textfield"; import type { HaMdTextfield } from "../../../../../components/ha-md-textfield"; +import "../../../../../components/ha-select"; import type { SupervisorUpdateConfig } from "../../../../../data/supervisor/update"; -import type { HomeAssistant } from "../../../../../types"; +import type { HomeAssistant, ValueChangedEvent } from "../../../../../types"; const MIN_RETENTION_VALUE = 1; @@ -34,27 +32,26 @@ class HaBackupConfigAddon extends LitElement { `ui.panel.config.backup.schedule.update_preference.supporting_text` )} - - -
- ${this.hass.localize( + .options=${[ + { + value: "false", + label: this.hass.localize( "ui.panel.config.backup.schedule.update_preference.skip_backups" - )} -
- - -
- ${this.hass.localize( + ), + }, + { + value: "true", + label: this.hass.localize( "ui.panel.config.backup.schedule.update_preference.backup_before_update" - )} -
- - + ), + }, + ]} + > @@ -83,10 +80,10 @@ class HaBackupConfigAddon extends LitElement { `; } - private _updatePreferenceChanged(ev) { + private _updatePreferenceChanged(ev: ValueChangedEvent) { ev.stopPropagation(); - const target = ev.currentTarget as HaMdSelect; - const add_on_backup_before_update = target.value === "true"; + const target = ev.detail.value; + const add_on_backup_before_update = target === "true"; fireEvent(this, "update-config-changed", { value: { add_on_backup_before_update, @@ -115,17 +112,16 @@ class HaBackupConfigAddon extends LitElement { ha-md-list-item { --md-item-overflow: visible; } - ha-md-select { + ha-select { min-width: 210px; } ha-md-textfield { width: 210px; } @media all and (max-width: 450px) { - ha-md-select { + ha-select { min-width: 160px; width: 160px; - --md-filled-field-content-space: 0; } ha-md-textfield { width: 160px; diff --git a/src/panels/config/backup/components/config/ha-backup-config-data.ts b/src/panels/config/backup/components/config/ha-backup-config-data.ts index 2785aea5d6..63335c6f22 100644 --- a/src/panels/config/backup/components/config/ha-backup-config-data.ts +++ b/src/panels/config/backup/components/config/ha-backup-config-data.ts @@ -17,9 +17,7 @@ import "../../../../../components/ha-button"; import "../../../../../components/ha-expansion-panel"; import "../../../../../components/ha-md-list"; import "../../../../../components/ha-md-list-item"; -import "../../../../../components/ha-md-select"; -import type { HaMdSelect } from "../../../../../components/ha-md-select"; -import "../../../../../components/ha-md-select-option"; +import "../../../../../components/ha-select"; import "../../../../../components/ha-spinner"; import "../../../../../components/ha-switch"; import type { HaSwitch } from "../../../../../components/ha-switch"; @@ -27,11 +25,11 @@ import "../../../../../components/ha-tooltip"; import { fetchHassioAddonsInfo } from "../../../../../data/hassio/addon"; import type { HostDisksUsage } from "../../../../../data/hassio/host"; import { fetchHostDisksUsage } from "../../../../../data/hassio/host"; -import type { HomeAssistant } from "../../../../../types"; +import { getRecorderInfo } from "../../../../../data/recorder"; +import type { HomeAssistant, ValueChangedEvent } from "../../../../../types"; import { bytesToString } from "../../../../../util/bytes-to-string"; import "../ha-backup-addons-picker"; import type { BackupAddonItem } from "../ha-backup-addons-picker"; -import { getRecorderInfo } from "../../../../../data/recorder"; export interface FormData { homeassistant: boolean; @@ -369,34 +367,31 @@ class HaBackupConfigData extends LitElement { "ui.panel.config.backup.data.apps_description" )} - - -
- ${this.hass.localize( + .options=${[ + { + value: "all", + label: this.hass.localize( "ui.panel.config.backup.data.apps_all" - )} -
- - -
- ${this.hass.localize( + ), + }, + { + value: "none", + label: this.hass.localize( "ui.panel.config.backup.data.apps_none" - )} -
- - -
- ${this.hass.localize( + ), + }, + { + value: "custom", + label: this.hass.localize( "ui.panel.config.backup.data.apps_custom" - )} -
- - + ), + }, + ]} + > ` : nothing} @@ -432,16 +427,21 @@ class HaBackupConfigData extends LitElement { }); } - private _selectChanged(ev: Event) { - const target = ev.currentTarget as HaMdSelect; + private _selectChanged( + ev: ValueChangedEvent<"all" | "none" | "custom" | undefined> + ) { + const value = ev.detail.value; + + if (!value) { + return; + } const data = this._getData(this.value, this._showAddons); + this._setData({ ...data, - [target.id]: target.value, + addons_mode: value, }); - if (target.id === "addons_mode") { - this._showAddons = target.value === "custom"; - } + this._showAddons = value === "custom"; } private _addonsChanged(ev: CustomEvent) { @@ -559,14 +559,13 @@ class HaBackupConfigData extends LitElement { ha-md-list-item { --md-item-overflow: visible; } - ha-md-select { + ha-select { min-width: 210px; } @media all and (max-width: 450px) { - ha-md-select { + ha-select { min-width: 140px; width: 140px; - --md-filled-field-content-space: 0; } } `; diff --git a/src/panels/config/backup/components/config/ha-backup-config-retention.ts b/src/panels/config/backup/components/config/ha-backup-config-retention.ts index 05b0564eb0..ea09ae7e05 100644 --- a/src/panels/config/backup/components/config/ha-backup-config-retention.ts +++ b/src/panels/config/backup/components/config/ha-backup-config-retention.ts @@ -4,13 +4,12 @@ import { fireEvent } from "../../../../../common/dom/fire_event"; import { clamp } from "../../../../../common/number/clamp"; import "../../../../../components/ha-expansion-panel"; import "../../../../../components/ha-md-list-item"; -import "../../../../../components/ha-md-select"; -import type { HaMdSelect } from "../../../../../components/ha-md-select"; -import "../../../../../components/ha-md-select-option"; import "../../../../../components/ha-md-textfield"; import type { HaMdTextfield } from "../../../../../components/ha-md-textfield"; +import "../../../../../components/ha-select"; +import type { HaSelect } from "../../../../../components/ha-select"; import type { BackupConfig, Retention } from "../../../../../data/backup"; -import type { HomeAssistant } from "../../../../../types"; +import type { HomeAssistant, ValueChangedEvent } from "../../../../../types"; export type BackupConfigSchedule = Pick; @@ -57,7 +56,7 @@ class HaBackupConfigRetention extends LitElement { @query("#value") private _customValueField?: HaMdTextfield; - @query("#type") private _customTypeField?: HaMdSelect; + @query("#type") private _customTypeField?: HaSelect; private _configLoaded = false; @@ -115,23 +114,17 @@ class HaBackupConfigRetention extends LitElement { `ui.panel.config.backup.schedule.retention_description` )} - - ${this.presetOptions.map( - (option) => html` - -
- ${this.hass.localize( - `ui.panel.config.backup.schedule.retention_presets.${option}` - )} -
- - ` - )} - + .options=${this.presetOptions.map((option) => ({ + value: option, + label: this.hass.localize( + `ui.panel.config.backup.schedule.retention_presets.${option}` + ), + }))} + > ${this._preset === RetentionPreset.CUSTOM @@ -159,35 +152,39 @@ class HaBackupConfigRetention extends LitElement { step="1" > - - -
- ${this.hass.localize( + .options=${[ + { + value: "days", + label: this.hass.localize( "ui.panel.config.backup.schedule.retention_units.days" - )} -
- - - ${this.hass.localize( - "ui.panel.config.backup.schedule.retention_units.copies" - )} - - - ` + ), + }, + { + value: "copies", + label: this.hass.localize( + "ui.panel.config.backup.schedule.retention_units.copies" + ), + }, + ]} + > ` : nothing} `; } - private _retentionPresetChanged(ev) { - ev.stopPropagation(); - const target = ev.currentTarget as HaMdSelect; - let value = target.value as RetentionPreset; + private _retentionPresetChanged( + ev: ValueChangedEvent + ) { + let value = ev.detail.value; + + if (!value) { + return; + } if ( value === RetentionPreset.CUSTOM && @@ -211,7 +208,7 @@ class HaBackupConfigRetention extends LitElement { private _retentionValueChanged(ev) { ev.stopPropagation(); - const target = ev.currentTarget as HaMdSelect; + const target = ev.currentTarget as HaMdTextfield; const value = parseInt(target.value); const clamped = clamp(value, MIN_VALUE, MAX_VALUE); target.value = clamped.toString(); @@ -226,10 +223,15 @@ class HaBackupConfigRetention extends LitElement { }); } - private _retentionTypeChanged(ev) { - ev.stopPropagation(); - const target = ev.currentTarget as HaMdSelect; - const type = target.value as "copies" | "days"; + private _retentionTypeChanged( + ev: ValueChangedEvent<"copies" | "days" | undefined> + ) { + const type = ev.detail.value; + if (!type) { + return; + } + + this._type = type; const value = this._customValueField?.value; @@ -247,17 +249,19 @@ class HaBackupConfigRetention extends LitElement { --md-list-item-leading-space: 0; --md-list-item-trailing-space: 0; } + ha-select { + min-width: 210px; + } @media all and (max-width: 450px) { - ha-md-select { + ha-select { min-width: 160px; width: 160px; - --md-filled-field-content-space: 0; } } ha-md-textfield#value { min-width: 70px; } - ha-md-select#type { + ha-select#type { min-width: 100px; } @media all and (max-width: 450px) { @@ -265,7 +269,7 @@ class HaBackupConfigRetention extends LitElement { min-width: 60px; margin: 0 -8px; } - ha-md-select#type { + ha-select#type { min-width: 120px; width: 120px; } diff --git a/src/panels/config/backup/components/config/ha-backup-config-schedule.ts b/src/panels/config/backup/components/config/ha-backup-config-schedule.ts index 7501075802..0ed7bfb84b 100644 --- a/src/panels/config/backup/components/config/ha-backup-config-schedule.ts +++ b/src/panels/config/backup/components/config/ha-backup-config-schedule.ts @@ -9,10 +9,8 @@ import "../../../../../components/ha-expansion-panel"; import "../../../../../components/ha-formfield"; import "../../../../../components/ha-md-list"; import "../../../../../components/ha-md-list-item"; -import "../../../../../components/ha-md-select"; -import type { HaMdSelect } from "../../../../../components/ha-md-select"; -import "../../../../../components/ha-md-select-option"; import "../../../../../components/ha-md-textfield"; +import "../../../../../components/ha-select"; import "../../../../../components/ha-time-input"; import "../../../../../components/ha-tip"; import type { @@ -133,23 +131,17 @@ class HaBackupConfigSchedule extends LitElement { )} - - ${SCHEDULE_OPTIONS.map( - (option) => html` - -
- ${this.hass.localize( - `ui.panel.config.backup.schedule.schedule_options.${option}` - )} -
- - ` - )} - + .options=${SCHEDULE_OPTIONS.map((option) => ({ + value: option, + label: this.hass.localize( + `ui.panel.config.backup.schedule.schedule_options.${option}` + ), + }))} + > ${data.recurrence === BackupScheduleRecurrence.CUSTOM_DAYS ? html` - - ${SCHEDULE_TIME_OPTIONS.map( - (option) => html` - -
- ${this.hass.localize( - `ui.panel.config.backup.schedule.time_options.${option}` - )} -
- - ` - )} - + .options=${SCHEDULE_TIME_OPTIONS.map((option) => ({ + value: option, + label: this.hass.localize( + `ui.panel.config.backup.schedule.time_options.${option}` + ), + }))} + > ${data.time_option === BackupScheduleTime.CUSTOM ? html` - - -
- ${this.hass.localize( - "ui.panel.config.backup.schedule.update_preference.skip_backups" - )} -
- - -
- ${this.hass.localize( - "ui.panel.config.backup.schedule.update_preference.backup_before_update" - )} -
- - + .options=${[ + { + value: "false", + label: this.hass.localize( + `ui.panel.config.backup.schedule.update_preference.skip_backups` + ), + }, + { + value: "true", + label: this.hass.localize( + `ui.panel.config.backup.schedule.update_preference.backup_before_update` + ), + }, + ]} + > ` : nothing} @@ -331,14 +316,13 @@ class HaBackupConfigSchedule extends LitElement { `; } - private _scheduleChanged(ev) { - ev.stopPropagation(); - const target = ev.currentTarget as HaMdSelect; + private _scheduleChanged(ev: ValueChangedEvent) { + const value = ev.detail.value; const data = this._getData(this.value); let days = [...data.days]; if ( - target.value === BackupScheduleRecurrence.CUSTOM_DAYS && + value === BackupScheduleRecurrence.CUSTOM_DAYS && data.days.length === 0 ) { days = [...BACKUP_DAYS]; @@ -346,19 +330,19 @@ class HaBackupConfigSchedule extends LitElement { this._setData({ ...data, - recurrence: target.value as BackupScheduleRecurrence, + recurrence: value, days, }); } - private _scheduleTimeChanged(ev) { - ev.stopPropagation(); - const target = ev.currentTarget as HaMdSelect; + private _scheduleTimeChanged(ev: ValueChangedEvent) { + const value = ev.detail.value; + const data = this._getData(this.value); this._setData({ ...data, - time_option: target.value as BackupScheduleTime, - time: target.value === BackupScheduleTime.CUSTOM ? "04:45:00" : undefined, + time_option: value, + time: value === BackupScheduleTime.CUSTOM ? "04:45:00" : undefined, }); } @@ -394,10 +378,8 @@ class HaBackupConfigSchedule extends LitElement { }); } - private _updatePreferenceChanged(ev) { - ev.stopPropagation(); - const target = ev.currentTarget as HaMdSelect; - const core_backup_before_update = target.value === "true"; + private _updatePreferenceChanged(ev: ValueChangedEvent<"true" | "false">) { + const core_backup_before_update = ev.detail.value === "true"; fireEvent(this, "update-config-changed", { value: { core_backup_before_update, @@ -428,7 +410,7 @@ class HaBackupConfigSchedule extends LitElement { ha-md-list-item { --md-item-overflow: visible; } - ha-md-select { + ha-select { min-width: 210px; } ha-time-input { @@ -436,10 +418,9 @@ class HaBackupConfigSchedule extends LitElement { --time-input-flex: 1; } @media all and (max-width: 450px) { - ha-md-select { + ha-select { min-width: 160px; width: 160px; - --md-filled-field-content-space: 0; } ha-time-input { min-width: 145px; diff --git a/src/panels/config/backup/dialogs/dialog-generate-backup.ts b/src/panels/config/backup/dialogs/dialog-generate-backup.ts index 1feff3f059..eaec579816 100644 --- a/src/panels/config/backup/dialogs/dialog-generate-backup.ts +++ b/src/panels/config/backup/dialogs/dialog-generate-backup.ts @@ -6,17 +6,16 @@ import { isComponentLoaded } from "../../../../common/config/is_component_loaded import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-alert"; import "../../../../components/ha-button"; +import "../../../../components/ha-dialog-footer"; import "../../../../components/ha-dialog-header"; import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-icon-button"; -import "../../../../components/ha-dialog-footer"; import "../../../../components/ha-icon-button-prev"; -import "../../../../components/ha-wa-dialog"; import "../../../../components/ha-md-list"; import "../../../../components/ha-md-list-item"; -import "../../../../components/ha-md-select"; -import "../../../../components/ha-md-select-option"; +import "../../../../components/ha-select"; import "../../../../components/ha-textfield"; +import "../../../../components/ha-wa-dialog"; import type { BackupAgent, BackupConfig, @@ -30,7 +29,7 @@ import { } from "../../../../data/backup"; import type { HassDialog } from "../../../../dialogs/make-dialog-manager"; import { haStyle, haStyleDialog } from "../../../../resources/styles"; -import type { HomeAssistant } from "../../../../types"; +import type { HomeAssistant, ValueChangedEvent } from "../../../../types"; import "../components/config/ha-backup-config-data"; import type { BackupConfigData } from "../components/config/ha-backup-config-data"; import "../components/ha-backup-agents-picker"; @@ -312,31 +311,27 @@ class DialogGenerateBackup extends LitElement implements HassDialog { "ui.panel.config.backup.dialogs.generate.sync.locations_description" )} - - -
- ${this.hass.localize( + .options=${[ + { + value: "all", + label: this.hass.localize( "ui.panel.config.backup.dialogs.generate.sync.locations_options.all", { count: this._allAgentIds.length } - )} -
- - -
- ${this.hass.localize( + ), + disabled: !!disabledAgentIds.length, + }, + { + value: "custom", + label: this.hass.localize( "ui.panel.config.backup.dialogs.generate.sync.locations_options.custom" - )} -
- - + ), + }, + ]} + > ${disabledAgentIds.length @@ -375,11 +370,11 @@ class DialogGenerateBackup extends LitElement implements HassDialog { `; } - private _selectChanged(ev) { - const select = ev.currentTarget; + private _selectChanged(ev: ValueChangedEvent<"custom" | "all">) { + const value = ev.detail.value; this._formData = { ...this._formData!, - [select.id]: select.value, + agents_mode: value, }; } @@ -459,25 +454,20 @@ class DialogGenerateBackup extends LitElement implements HassDialog { --md-list-item-leading-space: 0; --md-list-item-trailing-space: 0; } - ha-md-list-item ha-md-select { + ha-md-list-item ha-select { min-width: 210px; } @media all and (max-width: 450px) { - ha-md-list-item ha-md-select { + ha-md-list-item ha-select { min-width: 160px; width: 160px; } } - ha-md-list-item ha-md-select > span { + ha-md-list-item ha-select > span { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } - ha-md-list-item ha-md-select-option { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } ha-textfield { width: 100%; } diff --git a/src/panels/config/logs/dialog-download-logs.ts b/src/panels/config/logs/dialog-download-logs.ts index 4b49f57cdd..d0360f0523 100644 --- a/src/panels/config/logs/dialog-download-logs.ts +++ b/src/panels/config/logs/dialog-download-logs.ts @@ -4,13 +4,12 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-button"; import "../../../components/ha-dialog-footer"; -import "../../../components/ha-md-select"; -import "../../../components/ha-md-select-option"; +import "../../../components/ha-select"; import "../../../components/ha-wa-dialog"; import { getSignedPath } from "../../../data/auth"; import { getHassioLogDownloadLinesUrl } from "../../../data/hassio/supervisor"; import { haStyle, haStyleDialog } from "../../../resources/styles"; -import type { HomeAssistant } from "../../../types"; +import type { HomeAssistant, ValueChangedEvent } from "../../../types"; import { fileDownload } from "../../../util/file_download"; import type { DownloadLogsDialogParams } from "./show-dialog-download-logs"; @@ -81,19 +80,12 @@ class DownloadLogsDialog extends LitElement { "ui.panel.config.logs.select_number_of_lines" )}: - - ${numberOfLinesOptions.map( - (option) => html` - - ${option} - - ` - )} - + .options=${numberOfLinesOptions.map((option) => String(option))} + > ) { + this._lineCount = Number(ev.detail.value); } static get styles(): CSSResultGroup { @@ -148,6 +140,9 @@ class DownloadLogsDialog extends LitElement { align-items: center; gap: var(--ha-space-2); } + ha-select { + width: 100%; + } `, ]; } diff --git a/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts b/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts index d08aa45dc3..93b3f14e33 100644 --- a/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts +++ b/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts @@ -4,18 +4,17 @@ import { customElement, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-button"; import "../../../../components/ha-dialog-footer"; -import "../../../../components/ha-wa-dialog"; -import "../../../../components/ha-md-select"; -import "../../../../components/ha-md-select-option"; +import "../../../../components/ha-select"; import "../../../../components/ha-spinner"; +import "../../../../components/ha-wa-dialog"; import type { LovelaceConfig } from "../../../../data/lovelace/config/types"; import type { LovelaceDashboard } from "../../../../data/lovelace/dashboard"; import { fetchDashboards } from "../../../../data/lovelace/dashboard"; import { getDefaultPanelUrlPath } from "../../../../data/panel"; -import { haStyleDialog } from "../../../../resources/styles"; -import type { HomeAssistant } from "../../../../types"; -import type { SelectDashboardDialogParams } from "./show-select-dashboard-dialog"; import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box"; +import { haStyleDialog } from "../../../../resources/styles"; +import type { HomeAssistant, ValueChangedEvent } from "../../../../types"; +import type { SelectDashboardDialogParams } from "./show-select-dashboard-dialog"; @customElement("hui-dialog-select-dashboard") export class HuiDialogSelectDashboard extends LitElement { @@ -77,26 +76,22 @@ export class HuiDialogSelectDashboard extends LitElement { > ${this._dashboards && !this._saving ? html` - - ${this._dashboards.map( - (dashboard) => html` - ${dashboard.title} - ` - )} - + .options=${this._dashboards.map((dashboard) => ({ + value: dashboard.url_path, + label: dashboard.title, + disabled: + dashboard.mode !== "storage" || + dashboard.url_path === this._fromUrlPath || + (dashboard.url_path === "lovelace" && + this._fromUrlPath === null), + }))} + > ` : html`
@@ -167,8 +162,8 @@ export class HuiDialogSelectDashboard extends LitElement { } } - private async _dashboardChanged(ev) { - const urlPath: string = ev.target.value; + private async _dashboardChanged(ev: ValueChangedEvent) { + const urlPath = ev.detail.value; if (urlPath === this._toUrlPath) { return; } @@ -188,7 +183,7 @@ export class HuiDialogSelectDashboard extends LitElement { return [ haStyleDialog, css` - ha-md-select { + ha-select { width: 100%; } .loading {