jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-25 05:47:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate a bunch of paper-dropdowns (#11626)

Browse Source
This commit is contained in:
Bram Kragten 2022-02-10 00:18:44 +01:00 committed by GitHub
parent ce3b8544b9
commit a0aed9112c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 412 additions and 507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/data-table/ha-data-table.ts
View File

@ -945,6 +945,7 @@ export class HaDataTable extends LitElement {
} }
.scroller { .scroller {
height: calc(100% - 57px); height: calc(100% - 57px);
overflow: overlay !important;
} }
.mdc-data-table__table.auto-height .scroller { .mdc-data-table__table.auto-height .scroller {

61
src/components/ha-blueprint-picker.ts
View File

@ -1,10 +1,10 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-item/paper-item"; import "@material/mwc-select/mwc-select";
import "@polymer/paper-listbox/paper-listbox";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { stopPropagation } from "../common/dom/stop_propagation";
import { stringCompare } from "../common/string/compare"; import { stringCompare } from "../common/string/compare";
import { Blueprint, Blueprints, fetchBlueprints } from "../data/blueprint"; import { Blueprint, Blueprints, fetchBlueprints } from "../data/blueprint";
import { HomeAssistant } from "../types"; import { HomeAssistant } from "../types";
@ -24,7 +24,11 @@ class HaBluePrintPicker extends LitElement {
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;
public open() { 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) => { private _processedBlueprints = memoizeOne((blueprints?: Blueprints) => {
@ -45,32 +49,29 @@ class HaBluePrintPicker extends LitElement {
return html``; return html``;
} }
return html` return html`
<paper-dropdown-menu-light <mwc-select
.label=${this.label || .label=${this.label ||
this.hass.localize("ui.components.blueprint-picker.label")} this.hass.localize("ui.components.blueprint-picker.label")}
fixedMenuPosition
naturalMenuWidth
.value=${this.value}
.disabled=${this.disabled} .disabled=${this.disabled}
horizontal-align="left" @selected=${this._blueprintChanged}
@closed=${stopPropagation}
> >
<paper-listbox <mwc-list-item value="">
slot="dropdown-content" ${this.hass.localize(
.selected=${this.value} "ui.components.blueprint-picker.select_blueprint"
attr-for-selected="data-blueprint-path"
@iron-select=${this._blueprintChanged}
>
<paper-item data-blueprint-path="">
${this.hass.localize(
"ui.components.blueprint-picker.select_blueprint"
)}
</paper-item>
${this._processedBlueprints(this.blueprints).map(
(blueprint) => html`
<paper-item data-blueprint-path=${blueprint.path}>
${blueprint.name}
</paper-item>
`
)} )}
</paper-listbox> </mwc-list-item>
</paper-dropdown-menu-light> ${this._processedBlueprints(this.blueprints).map(
(blueprint) => html`
<mwc-list-item .value=${blueprint.path}>
${blueprint.name}
</mwc-list-item>
`
)}
</mwc-select>
`; `;
} }
@ -84,10 +85,10 @@ class HaBluePrintPicker extends LitElement {
} }
private _blueprintChanged(ev) { private _blueprintChanged(ev) {
const newValue = ev.detail.item.dataset.blueprintPath; const newValue = ev.target.value;
if (newValue !== this.value) { if (newValue !== this.value) {
this.value = ev.detail.value; this.value = newValue;
setTimeout(() => { setTimeout(() => {
fireEvent(this, "value-changed", { value: newValue }); fireEvent(this, "value-changed", { value: newValue });
fireEvent(this, "change"); fireEvent(this, "change");
@ -100,15 +101,11 @@ class HaBluePrintPicker extends LitElement {
:host { :host {
display: inline-block; display: inline-block;
} }
paper-dropdown-menu-light { mwc-select {
width: 100%; width: 100%;
min-width: 200px; min-width: 200px;
display: block; display: block;
} }
paper-item {
cursor: pointer;
min-width: 200px;
}
`; `;
} }
} }

1
src/components/ha-combo-box.ts
View File

@ -209,7 +209,6 @@ export class HaComboBox extends LitElement {
:host { :host {
display: block; display: block;
width: 100%; width: 100%;
margin-top: 4px;
} }
vaadin-combo-box-light { vaadin-combo-box-light {
position: relative; position: relative;

66
src/components/user/ha-user-picker.ts
View File

@ -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 { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property } from "lit/decorators"; import { property } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -11,6 +6,8 @@ import { stringCompare } from "../../common/string/compare";
import { fetchUsers, User } from "../../data/user"; import { fetchUsers, User } from "../../data/user";
import { HomeAssistant } from "../../types"; import { HomeAssistant } from "../../types";
import "./ha-user-badge"; import "./ha-user-badge";
import "@material/mwc-select/mwc-select";
import "@material/mwc-list/mwc-list-item";
class HaUserPicker extends LitElement { class HaUserPicker extends LitElement {
public hass?: HomeAssistant; public hass?: HomeAssistant;
@ -37,34 +34,31 @@ class HaUserPicker extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<paper-dropdown-menu-light <mwc-select
.label=${this.label} .label=${this.label}
.disabled=${this.disabled} .disabled=${this.disabled}
.value=${this.value}
@selected=${this._userChanged}
> >
<paper-listbox ${this.users?.length === 0
slot="dropdown-content" ? html`<mwc-list-item value="">
.selected=${this.value} ${this.noUserLabel ||
attr-for-selected="data-user-id" this.hass?.localize("ui.components.user-picker.no_user")}
@iron-select=${this._userChanged} </mwc-list-item>`
> : ""}
<paper-icon-item data-user-id=""> ${this._sortedUsers(this.users).map(
${this.noUserLabel || (user) => html`
this.hass?.localize("ui.components.user-picker.no_user")} <mwc-list-item graphic="avatar" .value=${user.id}>
</paper-icon-item> <ha-user-badge
${this._sortedUsers(this.users).map( .hass=${this.hass}
(user) => html` .user=${user}
<paper-icon-item data-user-id=${user.id}> slot="graphic"
<ha-user-badge ></ha-user-badge>
.hass=${this.hass} ${user.name}
.user=${user} </mwc-list-item>
slot="item-icon" `
></ha-user-badge> )}
${user.name} </mwc-select>
</paper-icon-item>
`
)}
</paper-listbox>
</paper-dropdown-menu-light>
`; `;
} }
@ -78,10 +72,10 @@ class HaUserPicker extends LitElement {
} }
private _userChanged(ev) { private _userChanged(ev) {
const newValue = ev.detail.item.dataset.userId; const newValue = ev.target.value;
if (newValue !== this.value) { if (newValue !== this.value) {
this.value = ev.detail.value; this.value = newValue;
setTimeout(() => { setTimeout(() => {
fireEvent(this, "value-changed", { value: newValue }); fireEvent(this, "value-changed", { value: newValue });
fireEvent(this, "change"); fireEvent(this, "change");
@ -94,15 +88,9 @@ class HaUserPicker extends LitElement {
:host { :host {
display: inline-block; display: inline-block;
} }
paper-dropdown-menu-light { mwc-list {
display: block; display: block;
} }
paper-listbox {
min-width: 200px;
}
paper-icon-item {
cursor: pointer;
}
`; `;
} }
} }

2
src/components/user/ha-users-picker.ts
View File

@ -75,7 +75,7 @@ class HaUsersPickerLight extends LitElement {
) )
)} )}
<ha-user-picker <ha-user-picker
.noUserLabel=${this.pickUserLabel || .label=${this.pickUserLabel ||
this.hass!.localize("ui.components.user-picker.add_user")} this.hass!.localize("ui.components.user-picker.add_user")}
.hass=${this.hass} .hass=${this.hass}
.users=${notSelectedUsers} .users=${notSelectedUsers}

10
src/dialogs/config-flow/step-flow-create-entry.ts
View File

@ -1,7 +1,4 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
@ -122,13 +119,6 @@ class StepFlowCreateEntry extends LitElement {
.buttons > *:last-child { .buttons > *:last-child {
margin-left: auto; 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) { @media all and (max-width: 450px), all and (max-height: 500px) {
.device { .device {
width: 100%; width: 100%;

166
src/dialogs/more-info/controls/more-info-climate.ts
View File

@ -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 { import {
css, css,
CSSResultGroup, CSSResultGroup,
@ -15,7 +12,6 @@ import { fireEvent } from "../../../common/dom/fire_event";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import { computeRTLDirection } from "../../../common/util/compute_rtl"; import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/ha-climate-control"; import "../../../components/ha-climate-control";
import "../../../components/ha-paper-dropdown-menu";
import "../../../components/ha-slider"; import "../../../components/ha-slider";
import "../../../components/ha-switch"; import "../../../components/ha-switch";
import { import {
@ -30,6 +26,9 @@ import {
compareClimateHvacModes, compareClimateHvacModes,
} from "../../../data/climate"; } from "../../../data/climate";
import { HomeAssistant } from "../../../types"; 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 { class MoreInfoClimate extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -169,109 +168,93 @@ class MoreInfoClimate extends LitElement {
<div class="container-hvac_modes"> <div class="container-hvac_modes">
<div class="controls"> <div class="controls">
<ha-paper-dropdown-menu <mwc-select
label-float
dynamic-align
.label=${hass.localize("ui.card.climate.operation")} .label=${hass.localize("ui.card.climate.operation")}
.value=${stateObj.state}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleOperationmodeChanged}
@closed=${stopPropagation}
> >
<paper-listbox ${stateObj.attributes.hvac_modes
slot="dropdown-content" .concat()
attr-for-selected="item-name" .sort(compareClimateHvacModes)
.selected=${stateObj.state} .map(
@selected-changed=${this._handleOperationmodeChanged} (mode) => html`
> <mwc-list-item .value=${mode}>
${stateObj.attributes.hvac_modes ${hass.localize(`component.climate.state._.${mode}`)}
.concat() </mwc-list-item>
.sort(compareClimateHvacModes) `
.map( )}
(mode) => html` </mwc-select>
<paper-item item-name=${mode}>
${hass.localize(`component.climate.state._.${mode}`)}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
</div> </div>
</div> </div>
${supportPresetMode && stateObj.attributes.preset_modes ${supportPresetMode && stateObj.attributes.preset_modes
? html` ? html`
<div class="container-preset_modes"> <div class="container-preset_modes">
<ha-paper-dropdown-menu <mwc-select
label-float
dynamic-align
.label=${hass.localize("ui.card.climate.preset_mode")} .label=${hass.localize("ui.card.climate.preset_mode")}
.value=${stateObj.attributes.preset_mode}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handlePresetmodeChanged}
@closed=${stopPropagation}
> >
<paper-listbox ${stateObj.attributes.preset_modes!.map(
slot="dropdown-content" (mode) => html`
attr-for-selected="item-name" <mwc-list-item .value=${mode}>
.selected=${stateObj.attributes.preset_mode} ${hass.localize(
@selected-changed=${this._handlePresetmodeChanged} `state_attributes.climate.preset_mode.${mode}`
> ) || mode}
${stateObj.attributes.preset_modes!.map( </mwc-list-item>
(mode) => html` `
<paper-item item-name=${mode}> )}
${hass.localize( </mwc-select>
`state_attributes.climate.preset_mode.${mode}`
) || mode}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
</div> </div>
` `
: ""} : ""}
${supportFanMode && stateObj.attributes.fan_modes ${supportFanMode && stateObj.attributes.fan_modes
? html` ? html`
<div class="container-fan_list"> <div class="container-fan_list">
<ha-paper-dropdown-menu <mwc-select
label-float
dynamic-align
.label=${hass.localize("ui.card.climate.fan_mode")} .label=${hass.localize("ui.card.climate.fan_mode")}
.value=${stateObj.attributes.fan_mode}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleFanmodeChanged}
@closed=${stopPropagation}
> >
<paper-listbox ${stateObj.attributes.fan_modes!.map(
slot="dropdown-content" (mode) => html`
attr-for-selected="item-name" <mwc-list-item .value=${mode}>
.selected=${stateObj.attributes.fan_mode} ${hass.localize(
@selected-changed=${this._handleFanmodeChanged} `state_attributes.climate.fan_mode.${mode}`
> ) || mode}
${stateObj.attributes.fan_modes!.map( </mwc-list-item>
(mode) => html` `
<paper-item item-name=${mode}> )}
${hass.localize( </mwc-select>
`state_attributes.climate.fan_mode.${mode}`
) || mode}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
</div> </div>
` `
: ""} : ""}
${supportSwingMode && stateObj.attributes.swing_modes ${supportSwingMode && stateObj.attributes.swing_modes
? html` ? html`
<div class="container-swing_list"> <div class="container-swing_list">
<ha-paper-dropdown-menu <mwc-select
label-float
dynamic-align
.label=${hass.localize("ui.card.climate.swing_mode")} .label=${hass.localize("ui.card.climate.swing_mode")}
.value=${stateObj.attributes.swing_mode}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleSwingmodeChanged}
@closed=${stopPropagation}
> >
<paper-listbox ${stateObj.attributes.swing_modes!.map(
slot="dropdown-content" (mode) => html`
attr-for-selected="item-name" <mwc-list-item .value=${mode}>${mode}</mwc-list-item>
.selected=${stateObj.attributes.swing_mode} `
@selected-changed=${this._handleSwingmodeChanged} )}
> </mwc-select>
${stateObj.attributes.swing_modes!.map(
(mode) => html`
<paper-item item-name=${mode}>${mode}</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
</div> </div>
` `
: ""} : ""}
@ -366,7 +349,7 @@ class MoreInfoClimate extends LitElement {
} }
private _handleFanmodeChanged(ev) { private _handleFanmodeChanged(ev) {
const newVal = ev.detail.value; const newVal = ev.target.value;
this._callServiceHelper( this._callServiceHelper(
this.stateObj!.attributes.fan_mode, this.stateObj!.attributes.fan_mode,
newVal, newVal,
@ -376,14 +359,14 @@ class MoreInfoClimate extends LitElement {
} }
private _handleOperationmodeChanged(ev) { private _handleOperationmodeChanged(ev) {
const newVal = ev.detail.value; const newVal = ev.target.value;
this._callServiceHelper(this.stateObj!.state, newVal, "set_hvac_mode", { this._callServiceHelper(this.stateObj!.state, newVal, "set_hvac_mode", {
hvac_mode: newVal, hvac_mode: newVal,
}); });
} }
private _handleSwingmodeChanged(ev) { private _handleSwingmodeChanged(ev) {
const newVal = ev.detail.value; const newVal = ev.target.value;
this._callServiceHelper( this._callServiceHelper(
this.stateObj!.attributes.swing_mode, this.stateObj!.attributes.swing_mode,
newVal, newVal,
@ -393,7 +376,7 @@ class MoreInfoClimate extends LitElement {
} }
private _handlePresetmodeChanged(ev) { private _handlePresetmodeChanged(ev) {
const newVal = ev.detail.value || null; const newVal = ev.target.value || null;
this._callServiceHelper( this._callServiceHelper(
this.stateObj!.attributes.preset_mode, this.stateObj!.attributes.preset_mode,
newVal, newVal,
@ -444,12 +427,9 @@ class MoreInfoClimate extends LitElement {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
ha-paper-dropdown-menu { mwc-select {
width: 100%; width: 100%;
} margin-top: 8px;
paper-item {
cursor: pointer;
} }
ha-slider { ha-slider {
@ -488,3 +468,9 @@ class MoreInfoClimate extends LitElement {
} }
customElements.define("more-info-climate", MoreInfoClimate); customElements.define("more-info-climate", MoreInfoClimate);
declare global {
interface HTMLElementTagNameMap {
"more-info-climate": MoreInfoClimate;
}
}

45
src/dialogs/more-info/controls/more-info-fan.js
View File

@ -1,6 +1,4 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes"; 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"; import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */ /* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element"; import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -10,11 +8,12 @@ import "../../../components/ha-attributes";
import "../../../components/ha-icon"; import "../../../components/ha-icon";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-labeled-slider"; import "../../../components/ha-labeled-slider";
import "../../../components/ha-paper-dropdown-menu";
import "../../../components/ha-switch"; import "../../../components/ha-switch";
import { SUPPORT_SET_SPEED } from "../../../data/fan"; import { SUPPORT_SET_SPEED } from "../../../data/fan";
import { EventsMixin } from "../../../mixins/events-mixin"; import { EventsMixin } from "../../../mixins/events-mixin";
import LocalizeMixin from "../../../mixins/localize-mixin"; import LocalizeMixin from "../../../mixins/localize-mixin";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
/* /*
* @appliesMixin EventsMixin * @appliesMixin EventsMixin
@ -38,13 +37,9 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
display: block; display: block;
} }
ha-paper-dropdown-menu { mwc-select {
width: 100%; width: 100%;
} }
paper-item {
cursor: pointer;
}
</style> </style>
<div class$="[[computeClassNames(stateObj)]]"> <div class$="[[computeClassNames(stateObj)]]">
@ -62,25 +57,21 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
</div> </div>
<div class="container-preset_modes"> <div class="container-preset_modes">
<ha-paper-dropdown-menu <mwc-select
label-float=""
dynamic-align=""
label="[[localize('ui.card.fan.preset_mode')]]" label="[[localize('ui.card.fan.preset_mode')]]"
value="[[stateObj.attributes.preset_mode]]"
on-selected="presetModeChanged"
fixedMenuPosition
naturalMenuWidth
on-closed="stopPropagation"
> >
<paper-listbox <template
slot="dropdown-content" is="dom-repeat"
selected="[[stateObj.attributes.preset_mode]]" items="[[stateObj.attributes.preset_modes]]"
on-selected-changed="presetModeChanged"
attr-for-selected="item-name"
> >
<template <mwc-list-item value="[[item]]">[[item]]</mwc-list-item>
is="dom-repeat" </template>
items="[[stateObj.attributes.preset_modes]]" </mwc-select>
>
<paper-item item-name$="[[item]]">[[item]]</paper-item>
</template>
</paper-listbox>
</ha-paper-dropdown-menu>
</div> </div>
<div class="container-oscillating"> <div class="container-oscillating">
@ -180,7 +171,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
presetModeChanged(ev) { presetModeChanged(ev) {
const oldVal = this.stateObj.attributes.preset_mode; const oldVal = this.stateObj.attributes.preset_mode;
const newVal = ev.detail.value; const newVal = ev.target.value;
if (!newVal || oldVal === newVal) return; if (!newVal || oldVal === newVal) return;
@ -190,6 +181,10 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
}); });
} }
stopPropagation(ev) {
ev.stopPropagation();
}
percentageChanged(ev) { percentageChanged(ev) {
const oldVal = parseInt(this.stateObj.attributes.percentage, 10); const oldVal = parseInt(this.stateObj.attributes.percentage, 10);
const newVal = ev.target.value; const newVal = ev.target.value;

57
src/dialogs/more-info/controls/more-info-humidifier.ts
View File

@ -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 { import {
css, css,
CSSResultGroup, CSSResultGroup,
@ -12,9 +9,9 @@ import {
import { property } from "lit/decorators"; import { property } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import { computeRTLDirection } from "../../../common/util/compute_rtl"; import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/ha-paper-dropdown-menu";
import "../../../components/ha-slider"; import "../../../components/ha-slider";
import "../../../components/ha-switch"; import "../../../components/ha-switch";
import { import {
@ -22,6 +19,8 @@ import {
HUMIDIFIER_SUPPORT_MODES, HUMIDIFIER_SUPPORT_MODES,
} from "../../../data/humidifier"; } from "../../../data/humidifier";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import "@material/mwc-list/mwc-list";
import "@material/mwc-list/mwc-list-item";
class MoreInfoHumidifier extends LitElement { class MoreInfoHumidifier extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -69,28 +68,24 @@ class MoreInfoHumidifier extends LitElement {
${supportModes ${supportModes
? html` ? html`
<div class="container-modes"> <div class="container-modes">
<ha-paper-dropdown-menu <mwc-list
label-float
dynamic-align
.label=${hass.localize("ui.card.humidifier.mode")} .label=${hass.localize("ui.card.humidifier.mode")}
.value=${stateObj.attributes.mode}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleModeChanged}
@closed=${stopPropagation}
> >
<paper-listbox ${stateObj.attributes.available_modes!.map(
slot="dropdown-content" (mode) => html`
attr-for-selected="item-name" <mwc-list-item .value=${mode}>
.selected=${stateObj.attributes.mode} ${hass.localize(
@selected-changed=${this._handleModeChanged} `state_attributes.humidifier.mode.${mode}`
> ) || mode}
${stateObj.attributes.available_modes!.map( </mwc-list-item>
(mode) => html` `
<paper-item item-name=${mode}> )}
${hass.localize( </mwc-list>
`state_attributes.humidifier.mode.${mode}`
) || mode}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
</div> </div>
` `
: ""} : ""}
@ -124,7 +119,7 @@ class MoreInfoHumidifier extends LitElement {
} }
private _handleModeChanged(ev) { private _handleModeChanged(ev) {
const newVal = ev.detail.value || null; const newVal = ev.target.value || null;
this._callServiceHelper( this._callServiceHelper(
this.stateObj!.attributes.mode, this.stateObj!.attributes.mode,
newVal, newVal,
@ -175,14 +170,10 @@ class MoreInfoHumidifier extends LitElement {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
ha-paper-dropdown-menu { mwc-select {
width: 100%; width: 100%;
} }
paper-item {
cursor: pointer;
}
ha-slider { ha-slider {
width: 100%; width: 100%;
} }
@ -207,3 +198,9 @@ class MoreInfoHumidifier extends LitElement {
} }
customElements.define("more-info-humidifier", MoreInfoHumidifier); customElements.define("more-info-humidifier", MoreInfoHumidifier);
declare global {
interface HTMLElementTagNameMap {
"more-info-humidifier": MoreInfoHumidifier;
}
}

40
src/dialogs/more-info/controls/more-info-light.ts
View File

@ -1,6 +1,6 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import { mdiPalette } from "@mdi/js"; import { mdiPalette } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { import {
css, css,
CSSResultGroup, CSSResultGroup,
@ -11,13 +11,13 @@ import {
} from "lit"; } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes"; import "../../../components/ha-attributes";
import "../../../components/ha-button-toggle-group"; import "../../../components/ha-button-toggle-group";
import "../../../components/ha-color-picker"; import "../../../components/ha-color-picker";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-labeled-slider"; import "../../../components/ha-labeled-slider";
import "../../../components/ha-paper-dropdown-menu";
import { import {
getLightCurrentModeRgbColor, getLightCurrentModeRgbColor,
LightColorModes, LightColorModes,
@ -208,24 +208,22 @@ class MoreInfoLight extends LitElement {
this.stateObj!.attributes.effect_list?.length this.stateObj!.attributes.effect_list?.length
? html` ? html`
<hr /> <hr />
<ha-paper-dropdown-menu <mwc-select
dynamic-align
.label=${this.hass.localize("ui.card.light.effect")} .label=${this.hass.localize("ui.card.light.effect")}
.value=${this.stateObj.attributes.effect || ""}
fixedMenuPosition
naturalMenuWidth
@selected=${this._effectChanged}
@closed=${stopPropagation}
> >
<paper-listbox ${this.stateObj.attributes.effect_list.map(
slot="dropdown-content" (effect: string) => html`
.selected=${this.stateObj.attributes.effect || ""} <mwc-list-item .value=${effect}>
@iron-select=${this._effectChanged} ${effect}
attr-for-selected="item-name" </mwc-list-item>
>${this.stateObj.attributes.effect_list.map( `
(effect: string) => html` )}
<paper-item .itemName=${effect} </mwc-select>
>${effect}</paper-item
>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
` `
: ""} : ""}
` `
@ -322,8 +320,8 @@ class MoreInfoLight extends LitElement {
this._mode = ev.detail.value; this._mode = ev.detail.value;
} }
private _effectChanged(ev: CustomEvent) { private _effectChanged(ev) {
const newVal = ev.detail.item.itemName; const newVal = ev.target.value;
if (!newVal || this.stateObj!.attributes.effect === newVal) { if (!newVal || this.stateObj!.attributes.effect === newVal) {
return; return;

80
src/dialogs/more-info/controls/more-info-media_player.ts
View File

@ -1,4 +1,6 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import { import {
mdiLoginVariant, mdiLoginVariant,
mdiMusicNote, mdiMusicNote,
@ -10,17 +12,15 @@ import {
mdiVolumePlus, mdiVolumePlus,
} from "@mdi/js"; } from "@mdi/js";
import "@polymer/paper-input/paper-input"; 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 { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import { computeRTLDirection } from "../../../common/util/compute_rtl"; import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
import "../../../components/ha-paper-dropdown-menu";
import "../../../components/ha-slider"; import "../../../components/ha-slider";
import "../../../components/ha-svg-icon";
import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog"; import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity"; import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
import { import {
@ -139,23 +139,21 @@ class MoreInfoMediaPlayer extends LitElement {
class="source-input" class="source-input"
.path=${mdiLoginVariant} .path=${mdiLoginVariant}
></ha-svg-icon> ></ha-svg-icon>
<ha-paper-dropdown-menu <mwc-select
.label=${this.hass.localize("ui.card.media_player.source")} .label=${this.hass.localize("ui.card.media_player.source")}
.value=${stateObj.attributes.source!}
@selected=${this._handleSourceChanged}
fixedMenuPosition
naturalMenuWidth
@closed=${stopPropagation}
> >
<paper-listbox ${stateObj.attributes.source_list!.map(
slot="dropdown-content" (source) =>
attr-for-selected="item-name" html`
.selected=${stateObj.attributes.source!} <mwc-list-item .value=${source}>${source}</mwc-list-item>
@iron-select=${this._handleSourceChanged} `
> )}
${stateObj.attributes.source_list!.map( </mwc-select>
(source) =>
html`
<paper-item .itemName=${source}>${source}</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
</div> </div>
` `
: ""} : ""}
@ -164,24 +162,20 @@ class MoreInfoMediaPlayer extends LitElement {
? html` ? html`
<div class="sound-input"> <div class="sound-input">
<ha-svg-icon .path=${mdiMusicNote}></ha-svg-icon> <ha-svg-icon .path=${mdiMusicNote}></ha-svg-icon>
<ha-paper-dropdown-menu <mwc-select
dynamic-align
label-float
.label=${this.hass.localize("ui.card.media_player.sound_mode")} .label=${this.hass.localize("ui.card.media_player.sound_mode")}
.value=${stateObj.attributes.sound_mode!}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleSoundModeChanged}
@closed=${stopPropagation}
> >
<paper-listbox ${stateObj.attributes.sound_mode_list.map(
slot="dropdown-content" (mode) => html`
attr-for-selected="item-name" <mwc-list-item .value=${mode}>${mode}</mwc-list-item>
.selected=${stateObj.attributes.sound_mode!} `
@iron-select=${this._handleSoundModeChanged} )}
> </mwc-select>
${stateObj.attributes.sound_mode_list.map(
(mode) => html`
<paper-item .itemName=${mode}>${mode}</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
</div> </div>
` `
: ""} : ""}
@ -242,15 +236,11 @@ class MoreInfoMediaPlayer extends LitElement {
margin-top: 24px; margin-top: 24px;
} }
.source-input ha-paper-dropdown-menu, .source-input mwc-select,
.sound-input ha-paper-dropdown-menu { .sound-input mwc-select {
margin-left: 10px; margin-left: 10px;
flex-grow: 1; flex-grow: 1;
} }
paper-item {
cursor: pointer;
}
`; `;
} }
@ -279,8 +269,8 @@ class MoreInfoMediaPlayer extends LitElement {
}); });
} }
private _handleSourceChanged(e: CustomEvent) { private _handleSourceChanged(e) {
const newVal = e.detail.item.itemName; const newVal = e.target.value;
if (!newVal || this.stateObj!.attributes.source === newVal) { if (!newVal || this.stateObj!.attributes.source === newVal) {
return; return;
@ -292,8 +282,8 @@ class MoreInfoMediaPlayer extends LitElement {
}); });
} }
private _handleSoundModeChanged(e: CustomEvent) { private _handleSoundModeChanged(e) {
const newVal = e.detail.item.itemName; const newVal = e.target.value;
if (!newVal || this.stateObj?.attributes.sound_mode === newVal) { if (!newVal || this.stateObj?.attributes.sound_mode === newVal) {
return; return;

36
src/dialogs/more-info/controls/more-info-remote.ts
View File

@ -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 { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes"; import "../../../components/ha-attributes";
import "../../../components/ha-paper-dropdown-menu";
import { RemoteEntity, REMOTE_SUPPORT_ACTIVITY } from "../../../data/remote"; import { RemoteEntity, REMOTE_SUPPORT_ACTIVITY } from "../../../data/remote";
import { HomeAssistant } from "../../../types"; 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"; const filterExtraAttributes = "activity_list,current_activity";
@ -26,24 +26,22 @@ class MoreInfoRemote extends LitElement {
return html` return html`
${supportsFeature(stateObj, REMOTE_SUPPORT_ACTIVITY) ${supportsFeature(stateObj, REMOTE_SUPPORT_ACTIVITY)
? html` ? html`
<ha-paper-dropdown-menu <mwc-list
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.more_info_control.remote.activity" "ui.dialogs.more_info_control.remote.activity"
)} )}
.value=${stateObj.attributes.current_activity}
@selected=${this.handleActivityChanged}
fixedMenuPosition
naturalMenuWidth
@closed=${stopPropagation}
> >
<paper-listbox ${stateObj.attributes.activity_list!.map(
slot="dropdown-content" (activity) => html`
.selected=${stateObj.attributes.current_activity} <mwc-list-item .value=${activity}>${activity}</mwc-list-item>
@iron-select=${this.handleActivityChanged} `
attr-for-selected="item-name" )}
> </mwc-list>
${stateObj.attributes.activity_list!.map(
(activity) => html`
<paper-item .itemName=${activity}> ${activity} </paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
` `
: ""} : ""}
@ -55,9 +53,9 @@ class MoreInfoRemote extends LitElement {
`; `;
} }
private handleActivityChanged(ev: CustomEvent) { private handleActivityChanged(ev) {
const oldVal = this.stateObj!.attributes.current_activity; const oldVal = this.stateObj!.attributes.current_activity;
const newVal = ev.detail.item.itemName; const newVal = ev.target.value;
if (!newVal || oldVal === newVal) { if (!newVal || oldVal === newVal) {
return; return;

36
src/dialogs/more-info/controls/more-info-vacuum.ts
View File

@ -8,15 +8,13 @@ import {
mdiStop, mdiStop,
mdiTargetVariant, mdiTargetVariant,
} from "@mdi/js"; } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes"; import "../../../components/ha-attributes";
import "../../../components/ha-icon"; import "../../../components/ha-icon";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-paper-dropdown-menu";
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE } from "../../../data/entity";
import { import {
VacuumEntity, VacuumEntity,
@ -31,6 +29,8 @@ import {
VACUUM_SUPPORT_STOP, VACUUM_SUPPORT_STOP,
} from "../../../data/vacuum"; } from "../../../data/vacuum";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import "@material/mwc-select/mwc-select";
import "@material/mwc-list/mwc-list-item";
interface VacuumCommand { interface VacuumCommand {
translationKey: string; translationKey: string;
@ -173,25 +173,23 @@ class MoreInfoVacuum extends LitElement {
? html` ? html`
<div> <div>
<div class="flex-horizontal"> <div class="flex-horizontal">
<ha-paper-dropdown-menu <mwc-select
.label=${this.hass!.localize( .label=${this.hass!.localize(
"ui.dialogs.more_info_control.vacuum.fan_speed" "ui.dialogs.more_info_control.vacuum.fan_speed"
)} )}
.disabled=${stateObj.state === UNAVAILABLE} .disabled=${stateObj.state === UNAVAILABLE}
.value=${stateObj.attributes.fan_speed}
@selected=${this.handleFanSpeedChanged}
fixedMenuPosition
naturalMenuWidth
@closed=${stopPropagation}
> >
<paper-listbox ${stateObj.attributes.fan_speed_list!.map(
slot="dropdown-content" (mode) => html`
.selected=${stateObj.attributes.fan_speed} <mwc-list-item .value=${mode}>${mode}</mwc-list-item>
@iron-select=${this.handleFanSpeedChanged} `
attr-for-selected="item-name" )}
> </mwc-select>
${stateObj.attributes.fan_speed_list!.map(
(mode) => html`
<paper-item .itemName=${mode}> ${mode} </paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
<div <div
style="justify-content: center; align-self: center; padding-top: 1.3em" style="justify-content: center; align-self: center; padding-top: 1.3em"
> >
@ -221,9 +219,9 @@ class MoreInfoVacuum extends LitElement {
}); });
} }
private handleFanSpeedChanged(ev: CustomEvent) { private handleFanSpeedChanged(ev) {
const oldVal = this.stateObj!.attributes.fan_speed; const oldVal = this.stateObj!.attributes.fan_speed;
const newVal = ev.detail.item.itemName; const newVal = ev.target.value;
if (!newVal || oldVal === newVal) { if (!newVal || oldVal === newVal) {
return; return;

49
src/dialogs/more-info/controls/more-info-water_heater.js
View File

@ -1,6 +1,4 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes"; 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 { timeOut } from "@polymer/polymer/lib/utils/async";
import { Debouncer } from "@polymer/polymer/lib/utils/debounce"; import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
import { html } from "@polymer/polymer/lib/utils/html-tag"; 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 { PolymerElement } from "@polymer/polymer/polymer-element";
import { featureClassNames } from "../../../common/entity/feature_class_names"; import { featureClassNames } from "../../../common/entity/feature_class_names";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-paper-dropdown-menu";
import "../../../components/ha-switch"; import "../../../components/ha-switch";
import "../../../components/ha-water_heater-control"; import "../../../components/ha-water_heater-control";
import { EventsMixin } from "../../../mixins/events-mixin"; import { EventsMixin } from "../../../mixins/events-mixin";
import LocalizeMixin from "../../../mixins/localize-mixin"; import LocalizeMixin from "../../../mixins/localize-mixin";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
/* /*
* @appliesMixin EventsMixin * @appliesMixin EventsMixin
@ -27,14 +26,10 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
ha-paper-dropdown-menu { mwc-select {
width: 100%; width: 100%;
} }
paper-item {
cursor: pointer;
}
ha-water_heater-control.range-control-left, ha-water_heater-control.range-control-left,
ha-water_heater-control.range-control-right { ha-water_heater-control.range-control-right {
float: left; float: left;
@ -75,27 +70,23 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
<template is="dom-if" if="[[supportsOperationMode(stateObj)]]"> <template is="dom-if" if="[[supportsOperationMode(stateObj)]]">
<div class="container-operation_list"> <div class="container-operation_list">
<div class="controls"> <div class="controls">
<ha-paper-dropdown-menu <mwc-select
label-float=""
dynamic-align=""
label="[[localize('ui.card.water_heater.operation')]]" label="[[localize('ui.card.water_heater.operation')]]"
value="[[stateObj.attributes.operation_mode]]"
on-selected="handleOperationmodeChanged"
fixedMenuPosition
naturalMenuWidth
on-closed="stopPropagation"
> >
<paper-listbox <template
slot="dropdown-content" is="dom-repeat"
selected="[[stateObj.attributes.operation_mode]]" items="[[stateObj.attributes.operation_list]]"
attr-for-selected="item-name"
on-selected-changed="handleOperationmodeChanged"
> >
<template <mwc-list-item value="[[item]]">
is="dom-repeat" [[_localizeOperationMode(localize, item)]]
items="[[stateObj.attributes.operation_list]]" </mwc-list-item>
> </template>
<paper-item item-name$="[[item]]" </mwc-select>
>[[_localizeOperationMode(localize, item)]]</paper-item
>
</template>
</paper-listbox>
</ha-paper-dropdown-menu>
</div> </div>
</div> </div>
</template> </template>
@ -209,13 +200,17 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
handleOperationmodeChanged(ev) { handleOperationmodeChanged(ev) {
const oldVal = this.stateObj.attributes.operation_mode; const oldVal = this.stateObj.attributes.operation_mode;
const newVal = ev.detail.value; const newVal = ev.target.value;
if (!newVal || oldVal === newVal) return; if (!newVal || oldVal === newVal) return;
this.callServiceHelper("set_operation_mode", { this.callServiceHelper("set_operation_mode", {
operation_mode: newVal, operation_mode: newVal,
}); });
} }
stopPropagation(ev) {
ev.stopPropagation();
}
callServiceHelper(service, data) { callServiceHelper(service, data) {
// We call stateChanged after a successful call to re-sync the inputs // 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 // with the state. It will be out of sync if our service call did not

50
src/panels/config/automation/action/types/ha-automation-action-repeat.ts
View File

@ -1,7 +1,5 @@
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import type { PaperListboxElement } from "@polymer/paper-listbox"; import { css, CSSResultGroup, html, LitElement } from "lit";
import "@polymer/paper-listbox/paper-listbox";
import { CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import { import {
@ -35,31 +33,25 @@ export class HaRepeatAction extends LitElement implements ActionElement {
const action = this.action.repeat; const action = this.action.repeat;
const type = getType(action); const type = getType(action);
const selected = type ? OPTIONS.indexOf(type) : -1;
return html` return html`
<paper-dropdown-menu-light <mwc-select
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.type.repeat.type_select" "ui.panel.config.automation.editor.actions.type.repeat.type_select"
)} )}
no-animations .value=${type}
@selected=${this._typeChanged}
> >
<paper-listbox ${OPTIONS.map(
slot="dropdown-content" (opt) => html`
.selected=${selected} <mwc-list-item .value=${opt}>
@iron-select=${this._typeChanged} ${this.hass.localize(
> `ui.panel.config.automation.editor.actions.type.repeat.type.${opt}.label`
${OPTIONS.map( )}
(opt) => html` </mwc-list-item>
<paper-item .action=${opt}> `
${this.hass.localize( )}
`ui.panel.config.automation.editor.actions.type.repeat.type.${opt}.label` </mwc-select>
)}
</paper-item>
`
)}
</paper-listbox>
</paper-dropdown-menu-light>
${type === "count" ${type === "count"
? html`<paper-input ? html`<paper-input
.label=${this.hass.localize( .label=${this.hass.localize(
@ -107,9 +99,8 @@ export class HaRepeatAction extends LitElement implements ActionElement {
`; `;
} }
private _typeChanged(ev: CustomEvent) { private _typeChanged(ev) {
const type = ((ev.target as PaperListboxElement)?.selectedItem as any) const type = ev.target.value;
?.action;
if (!type || type === getType(this.action.repeat)) { if (!type || type === getType(this.action.repeat)) {
return; return;
@ -166,7 +157,14 @@ export class HaRepeatAction extends LitElement implements ActionElement {
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return haStyle; return [
haStyle,
css`
mwc-select {
margin-top: 8px;
}
`,
];
} }
} }

1
src/panels/config/automation/blueprint-automation-editor.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
import "@polymer/paper-input/paper-textarea"; import "@polymer/paper-input/paper-textarea";
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement } from "lit"; import { css, CSSResultGroup, html, LitElement } from "lit";

4
src/panels/config/automation/dialog-new-automation.ts
View File

@ -94,10 +94,10 @@ class DialogNewAutomation extends LitElement implements HassDialog {
haStyleDialog, haStyleDialog,
css` css`
mwc-list-item.blueprint { mwc-list-item.blueprint {
height: 92px; height: 110px;
} }
ha-blueprint-picker { ha-blueprint-picker {
margin-top: -16px; margin-top: 8px;
} }
ha-dialog { ha-dialog {
--dialog-content-padding: 0; --dialog-content-padding: 0;

1
src/panels/config/automation/ha-automation-editor.ts
View File

@ -9,7 +9,6 @@ import {
} from "@mdi/js"; } from "@mdi/js";
import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
import "@polymer/paper-input/paper-textarea"; import "@polymer/paper-input/paper-textarea";
import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { import {

40
src/panels/config/automation/manual-automation-editor.ts
View File

@ -1,7 +1,5 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
import "@polymer/paper-input/paper-textarea"; import "@polymer/paper-input/paper-textarea";
import { PaperListboxElement } from "@polymer/paper-listbox";
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement } from "lit"; import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
@ -81,30 +79,23 @@ export class HaManualAutomationEditor extends LitElement {
>` >`
)} )}
</p> </p>
<paper-dropdown-menu-light <mwc-select
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.automation.editor.modes.label" "ui.panel.config.automation.editor.modes.label"
)} )}
no-animations .value=${this.config.mode ? MODES.indexOf(this.config.mode) : 0}
@selected=${this._modeChanged}
> >
<paper-listbox ${MODES.map(
slot="dropdown-content" (mode) => html`
.selected=${this.config.mode <mwc-list-item .value=${mode}>
? MODES.indexOf(this.config.mode) ${this.hass.localize(
: 0} `ui.panel.config.automation.editor.modes.${mode}`
@iron-select=${this._modeChanged} ) || mode}
> </mwc-list-item>
${MODES.map( `
(mode) => html` )}
<paper-item .mode=${mode}> </mwc-select>
${this.hass.localize(
`ui.panel.config.automation.editor.modes.${mode}`
) || mode}
</paper-item>
`
)}
</paper-listbox>
</paper-dropdown-menu-light>
${this.config.mode && MODES_MAX.includes(this.config.mode) ${this.config.mode && MODES_MAX.includes(this.config.mode)
? html`<paper-input ? html`<paper-input
.label=${this.hass.localize( .label=${this.hass.localize(
@ -263,9 +254,8 @@ export class HaManualAutomationEditor extends LitElement {
}); });
} }
private _modeChanged(ev: CustomEvent) { private _modeChanged(ev) {
const mode = ((ev.target as PaperListboxElement)?.selectedItem as any) const mode = ev.target.value;
?.mode;
if ( if (
mode === this.config!.mode || mode === this.config!.mode ||

78
src/panels/config/cloud/account/cloud-tts-pref.ts
View File

@ -1,7 +1,6 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; import "@material/mwc-select";
import "@polymer/paper-item/paper-item"; import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-listbox/paper-listbox";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -32,7 +31,7 @@ export class CloudTTSPref extends LitElement {
@state() private ttsInfo?: CloudTTSInfo; @state() private ttsInfo?: CloudTTSInfo;
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.cloudStatus) { if (!this.cloudStatus || !this.ttsInfo) {
return html``; return html``;
} }
@ -52,38 +51,33 @@ export class CloudTTSPref extends LitElement {
)} )}
<br /><br /> <br /><br />
<paper-dropdown-menu-light <mwc-select
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.cloud.account.tts.default_language" "ui.panel.config.cloud.account.tts.default_language"
)} )}
.disabled=${this.savingPreferences} .disabled=${this.savingPreferences}
.value=${defaultVoice[0]}
@selected=${this._handleLanguageChange}
> >
<paper-listbox ${languages.map(
slot="dropdown-content" ([key, label]) =>
.selected=${defaultVoice[0]} html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
attr-for-selected="value" )}
@iron-select=${this._handleLanguageChange} </mwc-select>
>
${languages.map(
([key, label]) =>
html`<paper-item .value=${key}>${label}</paper-item>`
)}
</paper-listbox>
</paper-dropdown-menu-light>
<paper-dropdown-menu-light .disabled=${this.savingPreferences}> <mwc-select
<paper-listbox .label=${this.hass.localize(
slot="dropdown-content" "ui.panel.config.cloud.account.tts.default_gender"
.selected=${defaultVoice[1]} )}
attr-for-selected="value" .disabled=${this.savingPreferences}
@iron-select=${this._handleGenderChange} .value=${defaultVoice[1]}
> @selected=${this._handleGenderChange}
${genders.map( >
([key, label]) => ${genders.map(
html`<paper-item .value=${key}>${label}</paper-item>` ([key, label]) =>
)} html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
</paper-listbox> )}
</paper-dropdown-menu-light> </mwc-select>
</div> </div>
<div class="card-actions"> <div class="card-actions">
<mwc-button @click=${this._openTryDialog}> <mwc-button @click=${this._openTryDialog}>
@ -94,15 +88,13 @@ export class CloudTTSPref extends LitElement {
`; `;
} }
protected firstUpdated(changedProps) { protected willUpdate(changedProps) {
super.firstUpdated(changedProps); super.willUpdate(changedProps);
getCloudTTSInfo(this.hass).then((info) => { if (!this.hasUpdated) {
this.ttsInfo = info; getCloudTTSInfo(this.hass).then((info) => {
}); this.ttsInfo = info;
} });
}
protected updated(changedProps) {
super.updated(changedProps);
if (changedProps.has("cloudStatus")) { if (changedProps.has("cloudStatus")) {
this.savingPreferences = false; this.savingPreferences = false;
} }
@ -171,11 +163,11 @@ export class CloudTTSPref extends LitElement {
} }
async _handleLanguageChange(ev) { 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; return;
} }
this.savingPreferences = true; this.savingPreferences = true;
const language = ev.detail.item.value; const language = ev.target.value;
const curGender = this.cloudStatus!.prefs.tts_default_voice[1]; const curGender = this.cloudStatus!.prefs.tts_default_voice[1];
const genders = this.getSupportedGenders(language, this.ttsInfo); const genders = this.getSupportedGenders(language, this.ttsInfo);
@ -200,12 +192,12 @@ export class CloudTTSPref extends LitElement {
} }
async _handleGenderChange(ev) { 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; return;
} }
this.savingPreferences = true; this.savingPreferences = true;
const language = this.cloudStatus!.prefs.tts_default_voice[0]; const language = this.cloudStatus!.prefs.tts_default_voice[0];
const gender = ev.detail.item.value; const gender = ev.target.value;
try { try {
await updateCloudPref(this.hass, { await updateCloudPref(this.hass, {

80
src/panels/config/cloud/account/dialog-cloud-tts-try.ts
View File

@ -1,18 +1,18 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@material/mwc-select";
import "@material/mwc-list/mwc-list-item";
import { mdiPlayCircleOutline, mdiRobot } from "@mdi/js"; 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 { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state, query } from "lit/decorators"; import { customElement, property, state, query } from "lit/decorators";
import { LocalStorage } from "../../../../common/decorators/local-storage"; import { LocalStorage } from "../../../../common/decorators/local-storage";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { computeStateDomain } from "../../../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../../common/entity/compute_state_name"; import { computeStateName } from "../../../../common/entity/compute_state_name";
import { supportsFeature } from "../../../../common/entity/supports-feature"; import { supportsFeature } from "../../../../common/entity/supports-feature";
import { createCloseHeading } from "../../../../components/ha-dialog"; 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 { showAutomationEditor } from "../../../../data/automation";
import { SUPPORT_PLAY_MEDIA } from "../../../../data/media-player"; import { SUPPORT_PLAY_MEDIA } from "../../../../data/media-player";
import { convertTextToSpeech } from "../../../../data/tts"; import { convertTextToSpeech } from "../../../../data/tts";
@ -29,7 +29,7 @@ export class DialogTryTts extends LitElement {
@state() private _params?: TryTtsDialogParams; @state() private _params?: TryTtsDialogParams;
@query("#message") private _messageInput?: PaperTextareaElement; @query("#message") private _messageInput?: HaTextArea;
@LocalStorage("cloudTtsTryMessage", false, false) private _message!: string; @LocalStorage("cloudTtsTryMessage", false, false) private _message!: string;
@ -61,7 +61,8 @@ export class DialogTryTts extends LitElement {
)} )}
> >
<div> <div>
<paper-textarea <ha-textarea
autogrow
id="message" id="message"
label="Message" label="Message"
.value=${this._message || .value=${this._message ||
@ -71,40 +72,38 @@ export class DialogTryTts extends LitElement {
this.hass.user!.name this.hass.user!.name
)} )}
> >
</paper-textarea> </ha-textarea>
<ha-paper-dropdown-menu <mwc-select
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.panel.config.cloud.account.tts.dialog.target" "ui.panel.config.cloud.account.tts.dialog.target"
)} )}
id="target"
.value=${target}
@selected=${this._handleTargetChanged}
fixedMenuPosition
naturalMenuWidth
@closed=${stopPropagation}
> >
<paper-listbox <mwc-list-item value="browser">
id="target" ${this.hass.localize(
slot="dropdown-content" "ui.panel.config.cloud.account.tts.dialog.target_browser"
attr-for-selected="item-value" )}
.selected=${target} </mwc-list-item>
@selected-changed=${this._handleTargetChanged} ${Object.values(this.hass.states)
> .filter(
<paper-item item-value="browser"> (entity) =>
${this.hass.localize( computeStateDomain(entity) === "media_player" &&
"ui.panel.config.cloud.account.tts.dialog.target_browser" supportsFeature(entity, SUPPORT_PLAY_MEDIA)
)} )
</paper-item> .map(
${Object.values(this.hass.states) (entity) => html`
.filter( <mwc-list-item .value=${entity.entity_id}>
(entity) => ${computeStateName(entity)}
computeStateDomain(entity) === "media_player" && </mwc-list-item>
supportsFeature(entity, SUPPORT_PLAY_MEDIA) `
) )}
.map( </mwc-select>
(entity) => html`
<paper-item .itemValue=${entity.entity_id}>
${computeStateName(entity)}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
</div> </div>
<mwc-button <mwc-button
slot="primaryAction" slot="primaryAction"
@ -131,7 +130,7 @@ export class DialogTryTts extends LitElement {
} }
private _handleTargetChanged(ev) { private _handleTargetChanged(ev) {
this._target = ev.detail.value; this._target = ev.target.value;
this.requestUpdate("_target"); this.requestUpdate("_target");
} }
@ -215,6 +214,13 @@ export class DialogTryTts extends LitElement {
ha-dialog { ha-dialog {
--mdc-dialog-max-width: 500px; --mdc-dialog-max-width: 500px;
} }
ha-textarea,
mwc-select {
width: 100%;
}
mwc-select {
margin-top: 8px;
}
`, `,
]; ];
} }

3
src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
View File

@ -1,8 +1,5 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-input/paper-input"; 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 { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";

3
src/panels/config/entities/ha-config-entities.ts
View File

@ -9,9 +9,6 @@ import {
mdiRestoreAlert, mdiRestoreAlert,
mdiUndo, mdiUndo,
} from "@mdi/js"; } from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-tooltip/paper-tooltip"; import "@polymer/paper-tooltip/paper-tooltip";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";

3
src/panels/config/helpers/ha-config-helpers.ts
View File

@ -1,7 +1,4 @@
import { mdiPencilOff, mdiPlus } from "@mdi/js"; import { mdiPencilOff, mdiPlus } from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-tooltip/paper-tooltip"; import "@polymer/paper-tooltip/paper-tooltip";
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, PropertyValues, TemplateResult } from "lit";

4
src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
View File

@ -1,6 +1,3 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { import {
@ -31,6 +28,7 @@ import { entitiesConfigStruct } from "../structs/entities-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types"; import { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style"; import { configElementStyle } from "./config-elements-style";
import { baseLovelaceCardConfig } from "../structs/base-card-struct"; import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import "@polymer/paper-input/paper-input";
const cardConfigStruct = assign( const cardConfigStruct = assign(
baseLovelaceCardConfig, baseLovelaceCardConfig,

1
src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
View File

@ -1,4 +1,3 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";

1
src/translations/en.json
View File

@ -2103,6 +2103,7 @@
"title": "Text to Speech", "title": "Text to Speech",
"info": "Bring personality to your home by having it speak to you by using our Text-to-Speech services. You can use this in automations and scripts by using the {service} service.", "info": "Bring personality to your home by having it speak to you by using our Text-to-Speech services. You can use this in automations and scripts by using the {service} service.",
"default_language": "Default language to use", "default_language": "Default language to use",
"default_gender": "Default gender to use",
"male": "Male", "male": "Male",
"female": "Female", "female": "Female",
"try": "Try", "try": "Try",