diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 18d4d4a5a1..372bfa4460 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -945,6 +945,7 @@ export class HaDataTable extends LitElement { } .scroller { height: calc(100% - 57px); + overflow: overlay !important; } .mdc-data-table__table.auto-height .scroller { diff --git a/src/components/ha-blueprint-picker.ts b/src/components/ha-blueprint-picker.ts index ba17709a76..bbe399e214 100644 --- a/src/components/ha-blueprint-picker.ts +++ b/src/components/ha-blueprint-picker.ts @@ -1,10 +1,10 @@ -import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select/mwc-select"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../common/dom/fire_event"; +import { stopPropagation } from "../common/dom/stop_propagation"; import { stringCompare } from "../common/string/compare"; import { Blueprint, Blueprints, fetchBlueprints } from "../data/blueprint"; import { HomeAssistant } from "../types"; @@ -24,7 +24,11 @@ class HaBluePrintPicker extends LitElement { @property({ type: Boolean }) public disabled = false; public open() { - this.shadowRoot!.querySelector("paper-dropdown-menu-light")!.open(); + const select = this.shadowRoot?.querySelector("mwc-select"); + if (select) { + // @ts-expect-error + select.menuOpen = true; + } } private _processedBlueprints = memoizeOne((blueprints?: Blueprints) => { @@ -45,32 +49,29 @@ class HaBluePrintPicker extends LitElement { return html``; } return html` - - - - ${this.hass.localize( - "ui.components.blueprint-picker.select_blueprint" - )} - - ${this._processedBlueprints(this.blueprints).map( - (blueprint) => html` - - ${blueprint.name} - - ` + + ${this.hass.localize( + "ui.components.blueprint-picker.select_blueprint" )} - - + + ${this._processedBlueprints(this.blueprints).map( + (blueprint) => html` + + ${blueprint.name} + + ` + )} + `; } @@ -84,10 +85,10 @@ class HaBluePrintPicker extends LitElement { } private _blueprintChanged(ev) { - const newValue = ev.detail.item.dataset.blueprintPath; + const newValue = ev.target.value; if (newValue !== this.value) { - this.value = ev.detail.value; + this.value = newValue; setTimeout(() => { fireEvent(this, "value-changed", { value: newValue }); fireEvent(this, "change"); @@ -100,15 +101,11 @@ class HaBluePrintPicker extends LitElement { :host { display: inline-block; } - paper-dropdown-menu-light { + mwc-select { width: 100%; min-width: 200px; display: block; } - paper-item { - cursor: pointer; - min-width: 200px; - } `; } } diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts index c80a131dca..f8f1bd5cde 100644 --- a/src/components/ha-combo-box.ts +++ b/src/components/ha-combo-box.ts @@ -209,7 +209,6 @@ export class HaComboBox extends LitElement { :host { display: block; width: 100%; - margin-top: 4px; } vaadin-combo-box-light { position: relative; diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts index b12f1f20fd..f1ac638e0b 100644 --- a/src/components/user/ha-user-picker.ts +++ b/src/components/user/ha-user-picker.ts @@ -1,8 +1,3 @@ -import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; -import "@polymer/paper-input/paper-input"; -import "@polymer/paper-item/paper-icon-item"; -import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -11,6 +6,8 @@ import { stringCompare } from "../../common/string/compare"; import { fetchUsers, User } from "../../data/user"; import { HomeAssistant } from "../../types"; import "./ha-user-badge"; +import "@material/mwc-select/mwc-select"; +import "@material/mwc-list/mwc-list-item"; class HaUserPicker extends LitElement { public hass?: HomeAssistant; @@ -37,34 +34,31 @@ class HaUserPicker extends LitElement { protected render(): TemplateResult { return html` - - - - ${this.noUserLabel || - this.hass?.localize("ui.components.user-picker.no_user")} - - ${this._sortedUsers(this.users).map( - (user) => html` - - - ${user.name} - - ` - )} - - + ${this.users?.length === 0 + ? html` + ${this.noUserLabel || + this.hass?.localize("ui.components.user-picker.no_user")} + ` + : ""} + ${this._sortedUsers(this.users).map( + (user) => html` + + + ${user.name} + + ` + )} + `; } @@ -78,10 +72,10 @@ class HaUserPicker extends LitElement { } private _userChanged(ev) { - const newValue = ev.detail.item.dataset.userId; + const newValue = ev.target.value; if (newValue !== this.value) { - this.value = ev.detail.value; + this.value = newValue; setTimeout(() => { fireEvent(this, "value-changed", { value: newValue }); fireEvent(this, "change"); @@ -94,15 +88,9 @@ class HaUserPicker extends LitElement { :host { display: inline-block; } - paper-dropdown-menu-light { + mwc-list { display: block; } - paper-listbox { - min-width: 200px; - } - paper-icon-item { - cursor: pointer; - } `; } } diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts index d9c4ff148a..ceb972d178 100644 --- a/src/components/user/ha-users-picker.ts +++ b/src/components/user/ha-users-picker.ts @@ -75,7 +75,7 @@ class HaUsersPickerLight extends LitElement { ) )} *:last-child { margin-left: auto; } - paper-dropdown-menu-light { - cursor: pointer; - } - paper-item { - cursor: pointer; - white-space: nowrap; - } @media all and (max-width: 450px), all and (max-height: 500px) { .device { width: 100%; diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts index 6074e2be62..3512ba86a3 100644 --- a/src/dialogs/more-info/controls/more-info-climate.ts +++ b/src/dialogs/more-info/controls/more-info-climate.ts @@ -1,6 +1,3 @@ -import "@polymer/iron-flex-layout/iron-flex-layout-classes"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, @@ -15,7 +12,6 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { computeRTLDirection } from "../../../common/util/compute_rtl"; import "../../../components/ha-climate-control"; -import "../../../components/ha-paper-dropdown-menu"; import "../../../components/ha-slider"; import "../../../components/ha-switch"; import { @@ -30,6 +26,9 @@ import { compareClimateHvacModes, } from "../../../data/climate"; import { HomeAssistant } from "../../../types"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select/mwc-select"; +import { stopPropagation } from "../../../common/dom/stop_propagation"; class MoreInfoClimate extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -169,109 +168,93 @@ class MoreInfoClimate extends LitElement {
- - - ${stateObj.attributes.hvac_modes - .concat() - .sort(compareClimateHvacModes) - .map( - (mode) => html` - - ${hass.localize(`component.climate.state._.${mode}`)} - - ` - )} - - + ${stateObj.attributes.hvac_modes + .concat() + .sort(compareClimateHvacModes) + .map( + (mode) => html` + + ${hass.localize(`component.climate.state._.${mode}`)} + + ` + )} +
${supportPresetMode && stateObj.attributes.preset_modes ? html`
- - - ${stateObj.attributes.preset_modes!.map( - (mode) => html` - - ${hass.localize( - `state_attributes.climate.preset_mode.${mode}` - ) || mode} - - ` - )} - - + ${stateObj.attributes.preset_modes!.map( + (mode) => html` + + ${hass.localize( + `state_attributes.climate.preset_mode.${mode}` + ) || mode} + + ` + )} +
` : ""} ${supportFanMode && stateObj.attributes.fan_modes ? html`
- - - ${stateObj.attributes.fan_modes!.map( - (mode) => html` - - ${hass.localize( - `state_attributes.climate.fan_mode.${mode}` - ) || mode} - - ` - )} - - + ${stateObj.attributes.fan_modes!.map( + (mode) => html` + + ${hass.localize( + `state_attributes.climate.fan_mode.${mode}` + ) || mode} + + ` + )} +
` : ""} ${supportSwingMode && stateObj.attributes.swing_modes ? html`
- - - ${stateObj.attributes.swing_modes!.map( - (mode) => html` - ${mode} - ` - )} - - + ${stateObj.attributes.swing_modes!.map( + (mode) => html` + ${mode} + ` + )} +
` : ""} @@ -366,7 +349,7 @@ class MoreInfoClimate extends LitElement { } private _handleFanmodeChanged(ev) { - const newVal = ev.detail.value; + const newVal = ev.target.value; this._callServiceHelper( this.stateObj!.attributes.fan_mode, newVal, @@ -376,14 +359,14 @@ class MoreInfoClimate extends LitElement { } private _handleOperationmodeChanged(ev) { - const newVal = ev.detail.value; + const newVal = ev.target.value; this._callServiceHelper(this.stateObj!.state, newVal, "set_hvac_mode", { hvac_mode: newVal, }); } private _handleSwingmodeChanged(ev) { - const newVal = ev.detail.value; + const newVal = ev.target.value; this._callServiceHelper( this.stateObj!.attributes.swing_mode, newVal, @@ -393,7 +376,7 @@ class MoreInfoClimate extends LitElement { } private _handlePresetmodeChanged(ev) { - const newVal = ev.detail.value || null; + const newVal = ev.target.value || null; this._callServiceHelper( this.stateObj!.attributes.preset_mode, newVal, @@ -444,12 +427,9 @@ class MoreInfoClimate extends LitElement { color: var(--primary-text-color); } - ha-paper-dropdown-menu { + mwc-select { width: 100%; - } - - paper-item { - cursor: pointer; + margin-top: 8px; } ha-slider { @@ -488,3 +468,9 @@ class MoreInfoClimate extends LitElement { } customElements.define("more-info-climate", MoreInfoClimate); + +declare global { + interface HTMLElementTagNameMap { + "more-info-climate": MoreInfoClimate; + } +} diff --git a/src/dialogs/more-info/controls/more-info-fan.js b/src/dialogs/more-info/controls/more-info-fan.js index 3bfa8ec2aa..3d712670c7 100644 --- a/src/dialogs/more-info/controls/more-info-fan.js +++ b/src/dialogs/more-info/controls/more-info-fan.js @@ -1,6 +1,4 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; @@ -10,11 +8,12 @@ import "../../../components/ha-attributes"; import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; import "../../../components/ha-labeled-slider"; -import "../../../components/ha-paper-dropdown-menu"; import "../../../components/ha-switch"; import { SUPPORT_SET_SPEED } from "../../../data/fan"; import { EventsMixin } from "../../../mixins/events-mixin"; import LocalizeMixin from "../../../mixins/localize-mixin"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select/mwc-select"; /* * @appliesMixin EventsMixin @@ -38,13 +37,9 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) { display: block; } - ha-paper-dropdown-menu { + mwc-select { width: 100%; } - - paper-item { - cursor: pointer; - }
@@ -62,25 +57,21 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
- - - - - + [[item]] + +
@@ -180,7 +171,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) { presetModeChanged(ev) { const oldVal = this.stateObj.attributes.preset_mode; - const newVal = ev.detail.value; + const newVal = ev.target.value; if (!newVal || oldVal === newVal) return; @@ -190,6 +181,10 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) { }); } + stopPropagation(ev) { + ev.stopPropagation(); + } + percentageChanged(ev) { const oldVal = parseInt(this.stateObj.attributes.percentage, 10); const newVal = ev.target.value; diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts index 8271b86703..3d6aa6e0c9 100644 --- a/src/dialogs/more-info/controls/more-info-humidifier.ts +++ b/src/dialogs/more-info/controls/more-info-humidifier.ts @@ -1,6 +1,3 @@ -import "@polymer/iron-flex-layout/iron-flex-layout-classes"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, @@ -12,9 +9,9 @@ import { import { property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { fireEvent } from "../../../common/dom/fire_event"; +import { stopPropagation } from "../../../common/dom/stop_propagation"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { computeRTLDirection } from "../../../common/util/compute_rtl"; -import "../../../components/ha-paper-dropdown-menu"; import "../../../components/ha-slider"; import "../../../components/ha-switch"; import { @@ -22,6 +19,8 @@ import { HUMIDIFIER_SUPPORT_MODES, } from "../../../data/humidifier"; import { HomeAssistant } from "../../../types"; +import "@material/mwc-list/mwc-list"; +import "@material/mwc-list/mwc-list-item"; class MoreInfoHumidifier extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @@ -69,28 +68,24 @@ class MoreInfoHumidifier extends LitElement { ${supportModes ? html`
- - - ${stateObj.attributes.available_modes!.map( - (mode) => html` - - ${hass.localize( - `state_attributes.humidifier.mode.${mode}` - ) || mode} - - ` - )} - - + ${stateObj.attributes.available_modes!.map( + (mode) => html` + + ${hass.localize( + `state_attributes.humidifier.mode.${mode}` + ) || mode} + + ` + )} +
` : ""} @@ -124,7 +119,7 @@ class MoreInfoHumidifier extends LitElement { } private _handleModeChanged(ev) { - const newVal = ev.detail.value || null; + const newVal = ev.target.value || null; this._callServiceHelper( this.stateObj!.attributes.mode, newVal, @@ -175,14 +170,10 @@ class MoreInfoHumidifier extends LitElement { color: var(--primary-text-color); } - ha-paper-dropdown-menu { + mwc-select { width: 100%; } - paper-item { - cursor: pointer; - } - ha-slider { width: 100%; } @@ -207,3 +198,9 @@ class MoreInfoHumidifier extends LitElement { } customElements.define("more-info-humidifier", MoreInfoHumidifier); + +declare global { + interface HTMLElementTagNameMap { + "more-info-humidifier": MoreInfoHumidifier; + } +} diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts index cc656c8e60..12c28a045b 100644 --- a/src/dialogs/more-info/controls/more-info-light.ts +++ b/src/dialogs/more-info/controls/more-info-light.ts @@ -1,6 +1,6 @@ +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select/mwc-select"; import { mdiPalette } from "@mdi/js"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, @@ -11,13 +11,13 @@ import { } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; +import { stopPropagation } from "../../../common/dom/stop_propagation"; import { supportsFeature } from "../../../common/entity/supports-feature"; import "../../../components/ha-attributes"; import "../../../components/ha-button-toggle-group"; import "../../../components/ha-color-picker"; import "../../../components/ha-icon-button"; import "../../../components/ha-labeled-slider"; -import "../../../components/ha-paper-dropdown-menu"; import { getLightCurrentModeRgbColor, LightColorModes, @@ -208,24 +208,22 @@ class MoreInfoLight extends LitElement { this.stateObj!.attributes.effect_list?.length ? html`
- - ${this.stateObj.attributes.effect_list.map( - (effect: string) => html` - ${effect} - ` - )} - - + ${this.stateObj.attributes.effect_list.map( + (effect: string) => html` + + ${effect} + + ` + )} + ` : ""} ` @@ -322,8 +320,8 @@ class MoreInfoLight extends LitElement { this._mode = ev.detail.value; } - private _effectChanged(ev: CustomEvent) { - const newVal = ev.detail.item.itemName; + private _effectChanged(ev) { + const newVal = ev.target.value; if (!newVal || this.stateObj!.attributes.effect === newVal) { return; diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index e836e3dd28..526445cf5d 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -1,4 +1,6 @@ import "@material/mwc-button/mwc-button"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select/mwc-select"; import { mdiLoginVariant, mdiMusicNote, @@ -10,17 +12,15 @@ import { mdiVolumePlus, } from "@mdi/js"; import "@polymer/paper-input/paper-input"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, query } from "lit/decorators"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; +import { stopPropagation } from "../../../common/dom/stop_propagation"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { computeRTLDirection } from "../../../common/util/compute_rtl"; import "../../../components/ha-icon-button"; -import "../../../components/ha-svg-icon"; -import "../../../components/ha-paper-dropdown-menu"; import "../../../components/ha-slider"; +import "../../../components/ha-svg-icon"; import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog"; import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity"; import { @@ -139,23 +139,21 @@ class MoreInfoMediaPlayer extends LitElement { class="source-input" .path=${mdiLoginVariant} > - - - ${stateObj.attributes.source_list!.map( - (source) => - html` - ${source} - ` - )} - - + ${stateObj.attributes.source_list!.map( + (source) => + html` + ${source} + ` + )} +
` : ""} @@ -164,24 +162,20 @@ class MoreInfoMediaPlayer extends LitElement { ? html`
- - - ${stateObj.attributes.sound_mode_list.map( - (mode) => html` - ${mode} - ` - )} - - + ${stateObj.attributes.sound_mode_list.map( + (mode) => html` + ${mode} + ` + )} +
` : ""} @@ -242,15 +236,11 @@ class MoreInfoMediaPlayer extends LitElement { margin-top: 24px; } - .source-input ha-paper-dropdown-menu, - .sound-input ha-paper-dropdown-menu { + .source-input mwc-select, + .sound-input mwc-select { margin-left: 10px; flex-grow: 1; } - - paper-item { - cursor: pointer; - } `; } @@ -279,8 +269,8 @@ class MoreInfoMediaPlayer extends LitElement { }); } - private _handleSourceChanged(e: CustomEvent) { - const newVal = e.detail.item.itemName; + private _handleSourceChanged(e) { + const newVal = e.target.value; if (!newVal || this.stateObj!.attributes.source === newVal) { return; @@ -292,8 +282,8 @@ class MoreInfoMediaPlayer extends LitElement { }); } - private _handleSoundModeChanged(e: CustomEvent) { - const newVal = e.detail.item.itemName; + private _handleSoundModeChanged(e) { + const newVal = e.target.value; if (!newVal || this.stateObj?.attributes.sound_mode === newVal) { return; diff --git a/src/dialogs/more-info/controls/more-info-remote.ts b/src/dialogs/more-info/controls/more-info-remote.ts index 421537bf67..d952dfbeab 100644 --- a/src/dialogs/more-info/controls/more-info-remote.ts +++ b/src/dialogs/more-info/controls/more-info-remote.ts @@ -1,12 +1,12 @@ -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { supportsFeature } from "../../../common/entity/supports-feature"; import "../../../components/ha-attributes"; -import "../../../components/ha-paper-dropdown-menu"; import { RemoteEntity, REMOTE_SUPPORT_ACTIVITY } from "../../../data/remote"; import { HomeAssistant } from "../../../types"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-list/mwc-list"; +import { stopPropagation } from "../../../common/dom/stop_propagation"; const filterExtraAttributes = "activity_list,current_activity"; @@ -26,24 +26,22 @@ class MoreInfoRemote extends LitElement { return html` ${supportsFeature(stateObj, REMOTE_SUPPORT_ACTIVITY) ? html` - - - ${stateObj.attributes.activity_list!.map( - (activity) => html` - ${activity} - ` - )} - - + ${stateObj.attributes.activity_list!.map( + (activity) => html` + ${activity} + ` + )} + ` : ""} @@ -55,9 +53,9 @@ class MoreInfoRemote extends LitElement { `; } - private handleActivityChanged(ev: CustomEvent) { + private handleActivityChanged(ev) { const oldVal = this.stateObj!.attributes.current_activity; - const newVal = ev.detail.item.itemName; + const newVal = ev.target.value; if (!newVal || oldVal === newVal) { return; diff --git a/src/dialogs/more-info/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts index 73a3c12eb0..17eaa0a534 100644 --- a/src/dialogs/more-info/controls/more-info-vacuum.ts +++ b/src/dialogs/more-info/controls/more-info-vacuum.ts @@ -8,15 +8,13 @@ import { mdiStop, mdiTargetVariant, } from "@mdi/js"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; +import { stopPropagation } from "../../../common/dom/stop_propagation"; import { supportsFeature } from "../../../common/entity/supports-feature"; import "../../../components/ha-attributes"; import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; -import "../../../components/ha-paper-dropdown-menu"; import { UNAVAILABLE } from "../../../data/entity"; import { VacuumEntity, @@ -31,6 +29,8 @@ import { VACUUM_SUPPORT_STOP, } from "../../../data/vacuum"; import { HomeAssistant } from "../../../types"; +import "@material/mwc-select/mwc-select"; +import "@material/mwc-list/mwc-list-item"; interface VacuumCommand { translationKey: string; @@ -173,25 +173,23 @@ class MoreInfoVacuum extends LitElement { ? html`
- - - ${stateObj.attributes.fan_speed_list!.map( - (mode) => html` - ${mode} - ` - )} - - + ${stateObj.attributes.fan_speed_list!.map( + (mode) => html` + ${mode} + ` + )} +
@@ -221,9 +219,9 @@ class MoreInfoVacuum extends LitElement { }); } - private handleFanSpeedChanged(ev: CustomEvent) { + private handleFanSpeedChanged(ev) { const oldVal = this.stateObj!.attributes.fan_speed; - const newVal = ev.detail.item.itemName; + const newVal = ev.target.value; if (!newVal || oldVal === newVal) { return; diff --git a/src/dialogs/more-info/controls/more-info-water_heater.js b/src/dialogs/more-info/controls/more-info-water_heater.js index 0a8c006006..d46bf1a178 100644 --- a/src/dialogs/more-info/controls/more-info-water_heater.js +++ b/src/dialogs/more-info/controls/more-info-water_heater.js @@ -1,6 +1,4 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { timeOut } from "@polymer/polymer/lib/utils/async"; import { Debouncer } from "@polymer/polymer/lib/utils/debounce"; import { html } from "@polymer/polymer/lib/utils/html-tag"; @@ -8,11 +6,12 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import { featureClassNames } from "../../../common/entity/feature_class_names"; import { supportsFeature } from "../../../common/entity/supports-feature"; -import "../../../components/ha-paper-dropdown-menu"; import "../../../components/ha-switch"; import "../../../components/ha-water_heater-control"; import { EventsMixin } from "../../../mixins/events-mixin"; import LocalizeMixin from "../../../mixins/localize-mixin"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select/mwc-select"; /* * @appliesMixin EventsMixin @@ -27,14 +26,10 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) { color: var(--primary-text-color); } - ha-paper-dropdown-menu { + mwc-select { width: 100%; } - paper-item { - cursor: pointer; - } - ha-water_heater-control.range-control-left, ha-water_heater-control.range-control-right { float: left; @@ -75,27 +70,23 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) { +
@@ -209,13 +200,17 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) { handleOperationmodeChanged(ev) { const oldVal = this.stateObj.attributes.operation_mode; - const newVal = ev.detail.value; + const newVal = ev.target.value; if (!newVal || oldVal === newVal) return; this.callServiceHelper("set_operation_mode", { operation_mode: newVal, }); } + stopPropagation(ev) { + ev.stopPropagation(); + } + callServiceHelper(service, data) { // We call stateChanged after a successful call to re-sync the inputs // with the state. It will be out of sync if our service call did not diff --git a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts index 07249aeaf8..6037160e47 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts @@ -1,7 +1,5 @@ import "@polymer/paper-input/paper-input"; -import type { PaperListboxElement } from "@polymer/paper-listbox"; -import "@polymer/paper-listbox/paper-listbox"; -import { CSSResultGroup, html, LitElement } from "lit"; +import { css, CSSResultGroup, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { @@ -35,31 +33,25 @@ export class HaRepeatAction extends LitElement implements ActionElement { const action = this.action.repeat; const type = getType(action); - const selected = type ? OPTIONS.indexOf(type) : -1; return html` - - - ${OPTIONS.map( - (opt) => html` - - ${this.hass.localize( - `ui.panel.config.automation.editor.actions.type.repeat.type.${opt}.label` - )} - - ` - )} - - + ${OPTIONS.map( + (opt) => html` + + ${this.hass.localize( + `ui.panel.config.automation.editor.actions.type.repeat.type.${opt}.label` + )} + + ` + )} + ${type === "count" ? html`` )}

- - - ${MODES.map( - (mode) => html` - - ${this.hass.localize( - `ui.panel.config.automation.editor.modes.${mode}` - ) || mode} - - ` - )} - - + ${MODES.map( + (mode) => html` + + ${this.hass.localize( + `ui.panel.config.automation.editor.modes.${mode}` + ) || mode} + + ` + )} + ${this.config.mode && MODES_MAX.includes(this.config.mode) ? html`
- - - ${languages.map( - ([key, label]) => - html`${label}` - )} - - + ${languages.map( + ([key, label]) => + html`${label}` + )} + - - - ${genders.map( - ([key, label]) => - html`${label}` - )} - - + + ${genders.map( + ([key, label]) => + html`${label}` + )} +
@@ -94,15 +88,13 @@ export class CloudTTSPref extends LitElement { `; } - protected firstUpdated(changedProps) { - super.firstUpdated(changedProps); - getCloudTTSInfo(this.hass).then((info) => { - this.ttsInfo = info; - }); - } - - protected updated(changedProps) { - super.updated(changedProps); + protected willUpdate(changedProps) { + super.willUpdate(changedProps); + if (!this.hasUpdated) { + getCloudTTSInfo(this.hass).then((info) => { + this.ttsInfo = info; + }); + } if (changedProps.has("cloudStatus")) { this.savingPreferences = false; } @@ -171,11 +163,11 @@ export class CloudTTSPref extends LitElement { } async _handleLanguageChange(ev) { - if (ev.detail.item.value === this.cloudStatus!.prefs.tts_default_voice[0]) { + if (ev.target.value === this.cloudStatus!.prefs.tts_default_voice[0]) { return; } this.savingPreferences = true; - const language = ev.detail.item.value; + const language = ev.target.value; const curGender = this.cloudStatus!.prefs.tts_default_voice[1]; const genders = this.getSupportedGenders(language, this.ttsInfo); @@ -200,12 +192,12 @@ export class CloudTTSPref extends LitElement { } async _handleGenderChange(ev) { - if (ev.detail.item.value === this.cloudStatus!.prefs.tts_default_voice[1]) { + if (ev.target.value === this.cloudStatus!.prefs.tts_default_voice[1]) { return; } this.savingPreferences = true; const language = this.cloudStatus!.prefs.tts_default_voice[0]; - const gender = ev.detail.item.value; + const gender = ev.target.value; try { await updateCloudPref(this.hass, { diff --git a/src/panels/config/cloud/account/dialog-cloud-tts-try.ts b/src/panels/config/cloud/account/dialog-cloud-tts-try.ts index a65c544e40..bb4bad9e49 100644 --- a/src/panels/config/cloud/account/dialog-cloud-tts-try.ts +++ b/src/panels/config/cloud/account/dialog-cloud-tts-try.ts @@ -1,18 +1,18 @@ import "@material/mwc-button"; +import "@material/mwc-select"; +import "@material/mwc-list/mwc-list-item"; import { mdiPlayCircleOutline, mdiRobot } from "@mdi/js"; -import "@polymer/paper-input/paper-textarea"; -import type { PaperTextareaElement } from "@polymer/paper-input/paper-textarea"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state, query } from "lit/decorators"; import { LocalStorage } from "../../../../common/decorators/local-storage"; import { fireEvent } from "../../../../common/dom/fire_event"; +import { stopPropagation } from "../../../../common/dom/stop_propagation"; import { computeStateDomain } from "../../../../common/entity/compute_state_domain"; import { computeStateName } from "../../../../common/entity/compute_state_name"; import { supportsFeature } from "../../../../common/entity/supports-feature"; import { createCloseHeading } from "../../../../components/ha-dialog"; -import "../../../../components/ha-paper-dropdown-menu"; +import type { HaTextArea } from "../../../../components/ha-textarea"; +import "../../../../components/ha-textarea"; import { showAutomationEditor } from "../../../../data/automation"; import { SUPPORT_PLAY_MEDIA } from "../../../../data/media-player"; import { convertTextToSpeech } from "../../../../data/tts"; @@ -29,7 +29,7 @@ export class DialogTryTts extends LitElement { @state() private _params?: TryTtsDialogParams; - @query("#message") private _messageInput?: PaperTextareaElement; + @query("#message") private _messageInput?: HaTextArea; @LocalStorage("cloudTtsTryMessage", false, false) private _message!: string; @@ -61,7 +61,8 @@ export class DialogTryTts extends LitElement { )} >
- - + - - - - ${this.hass.localize( - "ui.panel.config.cloud.account.tts.dialog.target_browser" - )} - - ${Object.values(this.hass.states) - .filter( - (entity) => - computeStateDomain(entity) === "media_player" && - supportsFeature(entity, SUPPORT_PLAY_MEDIA) - ) - .map( - (entity) => html` - - ${computeStateName(entity)} - - ` - )} - - + + ${this.hass.localize( + "ui.panel.config.cloud.account.tts.dialog.target_browser" + )} + + ${Object.values(this.hass.states) + .filter( + (entity) => + computeStateDomain(entity) === "media_player" && + supportsFeature(entity, SUPPORT_PLAY_MEDIA) + ) + .map( + (entity) => html` + + ${computeStateName(entity)} + + ` + )} +