jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-24 21:37:21 +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 {
height: calc(100% - 57px);
overflow: overlay !important;
}
.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 "@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`
<paper-dropdown-menu-light
<mwc-select
.label=${this.label ||
this.hass.localize("ui.components.blueprint-picker.label")}
fixedMenuPosition
naturalMenuWidth
.value=${this.value}
.disabled=${this.disabled}
horizontal-align="left"
@selected=${this._blueprintChanged}
@closed=${stopPropagation}
>
<paper-listbox
slot="dropdown-content"
.selected=${this.value}
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>
`
<mwc-list-item value="">
${this.hass.localize(
"ui.components.blueprint-picker.select_blueprint"
)}
</paper-listbox>
</paper-dropdown-menu-light>
</mwc-list-item>
${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) {
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;
}
`;
}
}

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

@ -209,7 +209,6 @@ export class HaComboBox extends LitElement {
:host {
display: block;
width: 100%;
margin-top: 4px;
}
vaadin-combo-box-light {
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 { 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`
<paper-dropdown-menu-light
<mwc-select
.label=${this.label}
.disabled=${this.disabled}
.value=${this.value}
@selected=${this._userChanged}
>
<paper-listbox
slot="dropdown-content"
.selected=${this.value}
attr-for-selected="data-user-id"
@iron-select=${this._userChanged}
>
<paper-icon-item data-user-id="">
${this.noUserLabel ||
this.hass?.localize("ui.components.user-picker.no_user")}
</paper-icon-item>
${this._sortedUsers(this.users).map(
(user) => html`
<paper-icon-item data-user-id=${user.id}>
<ha-user-badge
.hass=${this.hass}
.user=${user}
slot="item-icon"
></ha-user-badge>
${user.name}
</paper-icon-item>
`
)}
</paper-listbox>
</paper-dropdown-menu-light>
${this.users?.length === 0
? html`<mwc-list-item value="">
${this.noUserLabel ||
this.hass?.localize("ui.components.user-picker.no_user")}
</mwc-list-item>`
: ""}
${this._sortedUsers(this.users).map(
(user) => html`
<mwc-list-item graphic="avatar" .value=${user.id}>
<ha-user-badge
.hass=${this.hass}
.user=${user}
slot="graphic"
></ha-user-badge>
${user.name}
</mwc-list-item>
`
)}
</mwc-select>
`;
}
@ -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;
}
`;
}
}

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

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

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

@ -1,7 +1,4 @@
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 { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
@ -122,13 +119,6 @@ class StepFlowCreateEntry extends LitElement {
.buttons > *: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%;

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 {
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 {
<div class="container-hvac_modes">
<div class="controls">
<ha-paper-dropdown-menu
label-float
dynamic-align
<mwc-select
.label=${hass.localize("ui.card.climate.operation")}
.value=${stateObj.state}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleOperationmodeChanged}
@closed=${stopPropagation}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="item-name"
.selected=${stateObj.state}
@selected-changed=${this._handleOperationmodeChanged}
>
${stateObj.attributes.hvac_modes
.concat()
.sort(compareClimateHvacModes)
.map(
(mode) => html`
<paper-item item-name=${mode}>
${hass.localize(`component.climate.state._.${mode}`)}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
${stateObj.attributes.hvac_modes
.concat()
.sort(compareClimateHvacModes)
.map(
(mode) => html`
<mwc-list-item .value=${mode}>
${hass.localize(`component.climate.state._.${mode}`)}
</mwc-list-item>
`
)}
</mwc-select>
</div>
</div>
${supportPresetMode && stateObj.attributes.preset_modes
? html`
<div class="container-preset_modes">
<ha-paper-dropdown-menu
label-float
dynamic-align
<mwc-select
.label=${hass.localize("ui.card.climate.preset_mode")}
.value=${stateObj.attributes.preset_mode}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handlePresetmodeChanged}
@closed=${stopPropagation}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="item-name"
.selected=${stateObj.attributes.preset_mode}
@selected-changed=${this._handlePresetmodeChanged}
>
${stateObj.attributes.preset_modes!.map(
(mode) => html`
<paper-item item-name=${mode}>
${hass.localize(
`state_attributes.climate.preset_mode.${mode}`
) || mode}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
${stateObj.attributes.preset_modes!.map(
(mode) => html`
<mwc-list-item .value=${mode}>
${hass.localize(
`state_attributes.climate.preset_mode.${mode}`
) || mode}
</mwc-list-item>
`
)}
</mwc-select>
</div>
`
: ""}
${supportFanMode && stateObj.attributes.fan_modes
? html`
<div class="container-fan_list">
<ha-paper-dropdown-menu
label-float
dynamic-align
<mwc-select
.label=${hass.localize("ui.card.climate.fan_mode")}
.value=${stateObj.attributes.fan_mode}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleFanmodeChanged}
@closed=${stopPropagation}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="item-name"
.selected=${stateObj.attributes.fan_mode}
@selected-changed=${this._handleFanmodeChanged}
>
${stateObj.attributes.fan_modes!.map(
(mode) => html`
<paper-item item-name=${mode}>
${hass.localize(
`state_attributes.climate.fan_mode.${mode}`
) || mode}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
${stateObj.attributes.fan_modes!.map(
(mode) => html`
<mwc-list-item .value=${mode}>
${hass.localize(
`state_attributes.climate.fan_mode.${mode}`
) || mode}
</mwc-list-item>
`
)}
</mwc-select>
</div>
`
: ""}
${supportSwingMode && stateObj.attributes.swing_modes
? html`
<div class="container-swing_list">
<ha-paper-dropdown-menu
label-float
dynamic-align
<mwc-select
.label=${hass.localize("ui.card.climate.swing_mode")}
.value=${stateObj.attributes.swing_mode}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleSwingmodeChanged}
@closed=${stopPropagation}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="item-name"
.selected=${stateObj.attributes.swing_mode}
@selected-changed=${this._handleSwingmodeChanged}
>
${stateObj.attributes.swing_modes!.map(
(mode) => html`
<paper-item item-name=${mode}>${mode}</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
${stateObj.attributes.swing_modes!.map(
(mode) => html`
<mwc-list-item .value=${mode}>${mode}</mwc-list-item>
`
)}
</mwc-select>
</div>
`
: ""}
@ -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;
}
}

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/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;
}
</style>
<div class$="[[computeClassNames(stateObj)]]">
@ -62,25 +57,21 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
</div>
<div class="container-preset_modes">
<ha-paper-dropdown-menu
label-float=""
dynamic-align=""
<mwc-select
label="[[localize('ui.card.fan.preset_mode')]]"
value="[[stateObj.attributes.preset_mode]]"
on-selected="presetModeChanged"
fixedMenuPosition
naturalMenuWidth
on-closed="stopPropagation"
>
<paper-listbox
slot="dropdown-content"
selected="[[stateObj.attributes.preset_mode]]"
on-selected-changed="presetModeChanged"
attr-for-selected="item-name"
<template
is="dom-repeat"
items="[[stateObj.attributes.preset_modes]]"
>
<template
is="dom-repeat"
items="[[stateObj.attributes.preset_modes]]"
>
<paper-item item-name$="[[item]]">[[item]]</paper-item>
</template>
</paper-listbox>
</ha-paper-dropdown-menu>
<mwc-list-item value="[[item]]">[[item]]</mwc-list-item>
</template>
</mwc-select>
</div>
<div class="container-oscillating">
@ -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;

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 {
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`
<div class="container-modes">
<ha-paper-dropdown-menu
label-float
dynamic-align
<mwc-list
.label=${hass.localize("ui.card.humidifier.mode")}
.value=${stateObj.attributes.mode}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleModeChanged}
@closed=${stopPropagation}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="item-name"
.selected=${stateObj.attributes.mode}
@selected-changed=${this._handleModeChanged}
>
${stateObj.attributes.available_modes!.map(
(mode) => html`
<paper-item item-name=${mode}>
${hass.localize(
`state_attributes.humidifier.mode.${mode}`
) || mode}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
${stateObj.attributes.available_modes!.map(
(mode) => html`
<mwc-list-item .value=${mode}>
${hass.localize(
`state_attributes.humidifier.mode.${mode}`
) || mode}
</mwc-list-item>
`
)}
</mwc-list>
</div>
`
: ""}
@ -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;
}
}

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 "@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`
<hr />
<ha-paper-dropdown-menu
dynamic-align
<mwc-select
.label=${this.hass.localize("ui.card.light.effect")}
.value=${this.stateObj.attributes.effect || ""}
fixedMenuPosition
naturalMenuWidth
@selected=${this._effectChanged}
@closed=${stopPropagation}
>
<paper-listbox
slot="dropdown-content"
.selected=${this.stateObj.attributes.effect || ""}
@iron-select=${this._effectChanged}
attr-for-selected="item-name"
>${this.stateObj.attributes.effect_list.map(
(effect: string) => html`
<paper-item .itemName=${effect}
>${effect}</paper-item
>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
${this.stateObj.attributes.effect_list.map(
(effect: string) => html`
<mwc-list-item .value=${effect}>
${effect}
</mwc-list-item>
`
)}
</mwc-select>
`
: ""}
`
@ -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;

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-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}
></ha-svg-icon>
<ha-paper-dropdown-menu
<mwc-select
.label=${this.hass.localize("ui.card.media_player.source")}
.value=${stateObj.attributes.source!}
@selected=${this._handleSourceChanged}
fixedMenuPosition
naturalMenuWidth
@closed=${stopPropagation}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="item-name"
.selected=${stateObj.attributes.source!}
@iron-select=${this._handleSourceChanged}
>
${stateObj.attributes.source_list!.map(
(source) =>
html`
<paper-item .itemName=${source}>${source}</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
${stateObj.attributes.source_list!.map(
(source) =>
html`
<mwc-list-item .value=${source}>${source}</mwc-list-item>
`
)}
</mwc-select>
</div>
`
: ""}
@ -164,24 +162,20 @@ class MoreInfoMediaPlayer extends LitElement {
? html`
<div class="sound-input">
<ha-svg-icon .path=${mdiMusicNote}></ha-svg-icon>
<ha-paper-dropdown-menu
dynamic-align
label-float
<mwc-select
.label=${this.hass.localize("ui.card.media_player.sound_mode")}
.value=${stateObj.attributes.sound_mode!}
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleSoundModeChanged}
@closed=${stopPropagation}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="item-name"
.selected=${stateObj.attributes.sound_mode!}
@iron-select=${this._handleSoundModeChanged}
>
${stateObj.attributes.sound_mode_list.map(
(mode) => html`
<paper-item .itemName=${mode}>${mode}</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
${stateObj.attributes.sound_mode_list.map(
(mode) => html`
<mwc-list-item .value=${mode}>${mode}</mwc-list-item>
`
)}
</mwc-select>
</div>
`
: ""}
@ -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;

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 { 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`
<ha-paper-dropdown-menu
<mwc-list
.label=${this.hass!.localize(
"ui.dialogs.more_info_control.remote.activity"
)}
.value=${stateObj.attributes.current_activity}
@selected=${this.handleActivityChanged}
fixedMenuPosition
naturalMenuWidth
@closed=${stopPropagation}
>
<paper-listbox
slot="dropdown-content"
.selected=${stateObj.attributes.current_activity}
@iron-select=${this.handleActivityChanged}
attr-for-selected="item-name"
>
${stateObj.attributes.activity_list!.map(
(activity) => html`
<paper-item .itemName=${activity}> ${activity} </paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
${stateObj.attributes.activity_list!.map(
(activity) => html`
<mwc-list-item .value=${activity}>${activity}</mwc-list-item>
`
)}
</mwc-list>
`
: ""}
@ -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;

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

@ -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`
<div>
<div class="flex-horizontal">
<ha-paper-dropdown-menu
<mwc-select
.label=${this.hass!.localize(
"ui.dialogs.more_info_control.vacuum.fan_speed"
)}
.disabled=${stateObj.state === UNAVAILABLE}
.value=${stateObj.attributes.fan_speed}
@selected=${this.handleFanSpeedChanged}
fixedMenuPosition
naturalMenuWidth
@closed=${stopPropagation}
>
<paper-listbox
slot="dropdown-content"
.selected=${stateObj.attributes.fan_speed}
@iron-select=${this.handleFanSpeedChanged}
attr-for-selected="item-name"
>
${stateObj.attributes.fan_speed_list!.map(
(mode) => html`
<paper-item .itemName=${mode}> ${mode} </paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
${stateObj.attributes.fan_speed_list!.map(
(mode) => html`
<mwc-list-item .value=${mode}>${mode}</mwc-list-item>
`
)}
</mwc-select>
<div
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 newVal = ev.detail.item.itemName;
const newVal = ev.target.value;
if (!newVal || oldVal === newVal) {
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/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)) {
<template is="dom-if" if="[[supportsOperationMode(stateObj)]]">
<div class="container-operation_list">
<div class="controls">
<ha-paper-dropdown-menu
label-float=""
dynamic-align=""
<mwc-select
label="[[localize('ui.card.water_heater.operation')]]"
value="[[stateObj.attributes.operation_mode]]"
on-selected="handleOperationmodeChanged"
fixedMenuPosition
naturalMenuWidth
on-closed="stopPropagation"
>
<paper-listbox
slot="dropdown-content"
selected="[[stateObj.attributes.operation_mode]]"
attr-for-selected="item-name"
on-selected-changed="handleOperationmodeChanged"
<template
is="dom-repeat"
items="[[stateObj.attributes.operation_list]]"
>
<template
is="dom-repeat"
items="[[stateObj.attributes.operation_list]]"
>
<paper-item item-name$="[[item]]"
>[[_localizeOperationMode(localize, item)]]</paper-item
>
</template>
</paper-listbox>
</ha-paper-dropdown-menu>
<mwc-list-item value="[[item]]">
[[_localizeOperationMode(localize, item)]]
</mwc-list-item>
</template>
</mwc-select>
</div>
</div>
</template>
@ -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

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 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`
<paper-dropdown-menu-light
<mwc-select
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.type.repeat.type_select"
)}
no-animations
.value=${type}
@selected=${this._typeChanged}
>
<paper-listbox
slot="dropdown-content"
.selected=${selected}
@iron-select=${this._typeChanged}
>
${OPTIONS.map(
(opt) => html`
<paper-item .action=${opt}>
${this.hass.localize(
`ui.panel.config.automation.editor.actions.type.repeat.type.${opt}.label`
)}
</paper-item>
`
)}
</paper-listbox>
</paper-dropdown-menu-light>
${OPTIONS.map(
(opt) => html`
<mwc-list-item .value=${opt}>
${this.hass.localize(
`ui.panel.config.automation.editor.actions.type.repeat.type.${opt}.label`
)}
</mwc-list-item>
`
)}
</mwc-select>
${type === "count"
? html`<paper-input
.label=${this.hass.localize(
@ -107,9 +99,8 @@ export class HaRepeatAction extends LitElement implements ActionElement {
`;
}
private _typeChanged(ev: CustomEvent) {
const type = ((ev.target as PaperListboxElement)?.selectedItem as any)
?.action;
private _typeChanged(ev) {
const type = ev.target.value;
if (!type || type === getType(this.action.repeat)) {
return;
@ -166,7 +157,14 @@ export class HaRepeatAction extends LitElement implements ActionElement {
}
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 "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
import "@polymer/paper-input/paper-textarea";
import { HassEntity } from "home-assistant-js-websocket";
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,
css`
mwc-list-item.blueprint {
height: 92px;
height: 110px;
}
ha-blueprint-picker {
margin-top: -16px;
margin-top: 8px;
}
ha-dialog {
--dialog-content-padding: 0;

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

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

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

@ -1,7 +1,5 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
import "@polymer/paper-input/paper-textarea";
import { PaperListboxElement } from "@polymer/paper-listbox";
import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
@ -81,30 +79,23 @@ export class HaManualAutomationEditor extends LitElement {
>`
)}
</p>
<paper-dropdown-menu-light
<mwc-select
.label=${this.hass.localize(
"ui.panel.config.automation.editor.modes.label"
)}
no-animations
.value=${this.config.mode ? MODES.indexOf(this.config.mode) : 0}
@selected=${this._modeChanged}
>
<paper-listbox
slot="dropdown-content"
.selected=${this.config.mode
? MODES.indexOf(this.config.mode)
: 0}
@iron-select=${this._modeChanged}
>
${MODES.map(
(mode) => html`
<paper-item .mode=${mode}>
${this.hass.localize(
`ui.panel.config.automation.editor.modes.${mode}`
) || mode}
</paper-item>
`
)}
</paper-listbox>
</paper-dropdown-menu-light>
${MODES.map(
(mode) => html`
<mwc-list-item .value=${mode}>
${this.hass.localize(
`ui.panel.config.automation.editor.modes.${mode}`
) || mode}
</mwc-list-item>
`
)}
</mwc-select>
${this.config.mode && MODES_MAX.includes(this.config.mode)
? html`<paper-input
.label=${this.hass.localize(
@ -263,9 +254,8 @@ export class HaManualAutomationEditor extends LitElement {
});
}
private _modeChanged(ev: CustomEvent) {
const mode = ((ev.target as PaperListboxElement)?.selectedItem as any)
?.mode;
private _modeChanged(ev) {
const mode = ev.target.value;
if (
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 "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@material/mwc-select";
import "@material/mwc-list/mwc-list-item";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -32,7 +31,7 @@ export class CloudTTSPref extends LitElement {
@state() private ttsInfo?: CloudTTSInfo;
protected render(): TemplateResult {
if (!this.cloudStatus) {
if (!this.cloudStatus || !this.ttsInfo) {
return html``;
}
@ -52,38 +51,33 @@ export class CloudTTSPref extends LitElement {
)}
<br /><br />
<paper-dropdown-menu-light
<mwc-select
.label=${this.hass.localize(
"ui.panel.config.cloud.account.tts.default_language"
)}
.disabled=${this.savingPreferences}
.value=${defaultVoice[0]}
@selected=${this._handleLanguageChange}
>
<paper-listbox
slot="dropdown-content"
.selected=${defaultVoice[0]}
attr-for-selected="value"
@iron-select=${this._handleLanguageChange}
>
${languages.map(
([key, label]) =>
html`<paper-item .value=${key}>${label}</paper-item>`
)}
</paper-listbox>
</paper-dropdown-menu-light>
${languages.map(
([key, label]) =>
html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
)}
</mwc-select>
<paper-dropdown-menu-light .disabled=${this.savingPreferences}>
<paper-listbox
slot="dropdown-content"
.selected=${defaultVoice[1]}
attr-for-selected="value"
@iron-select=${this._handleGenderChange}
>
${genders.map(
([key, label]) =>
html`<paper-item .value=${key}>${label}</paper-item>`
)}
</paper-listbox>
</paper-dropdown-menu-light>
<mwc-select
.label=${this.hass.localize(
"ui.panel.config.cloud.account.tts.default_gender"
)}
.disabled=${this.savingPreferences}
.value=${defaultVoice[1]}
@selected=${this._handleGenderChange}
>
${genders.map(
([key, label]) =>
html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
)}
</mwc-select>
</div>
<div class="card-actions">
<mwc-button @click=${this._openTryDialog}>
@ -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, {

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

@ -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 {
)}
>
<div>
<paper-textarea
<ha-textarea
autogrow
id="message"
label="Message"
.value=${this._message ||
@ -71,40 +72,38 @@ export class DialogTryTts extends LitElement {
this.hass.user!.name
)}
>
</paper-textarea>
</ha-textarea>
<ha-paper-dropdown-menu
<mwc-select
.label=${this.hass.localize(
"ui.panel.config.cloud.account.tts.dialog.target"
)}
id="target"
.value=${target}
@selected=${this._handleTargetChanged}
fixedMenuPosition
naturalMenuWidth
@closed=${stopPropagation}
>
<paper-listbox
id="target"
slot="dropdown-content"
attr-for-selected="item-value"
.selected=${target}
@selected-changed=${this._handleTargetChanged}
>
<paper-item item-value="browser">
${this.hass.localize(
"ui.panel.config.cloud.account.tts.dialog.target_browser"
)}
</paper-item>
${Object.values(this.hass.states)
.filter(
(entity) =>
computeStateDomain(entity) === "media_player" &&
supportsFeature(entity, SUPPORT_PLAY_MEDIA)
)
.map(
(entity) => html`
<paper-item .itemValue=${entity.entity_id}>
${computeStateName(entity)}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
<mwc-list-item value="browser">
${this.hass.localize(
"ui.panel.config.cloud.account.tts.dialog.target_browser"
)}
</mwc-list-item>
${Object.values(this.hass.states)
.filter(
(entity) =>
computeStateDomain(entity) === "media_player" &&
supportsFeature(entity, SUPPORT_PLAY_MEDIA)
)
.map(
(entity) => html`
<mwc-list-item .value=${entity.entity_id}>
${computeStateName(entity)}
</mwc-list-item>
`
)}
</mwc-select>
</div>
<mwc-button
slot="primaryAction"
@ -131,7 +130,7 @@ export class DialogTryTts extends LitElement {
}
private _handleTargetChanged(ev) {
this._target = ev.detail.value;
this._target = ev.target.value;
this.requestUpdate("_target");
}
@ -215,6 +214,13 @@ export class DialogTryTts extends LitElement {
ha-dialog {
--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 "@polymer/paper-dropdown-menu/paper-dropdown-menu";
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, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";

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

@ -9,9 +9,6 @@ import {
mdiRestoreAlert,
mdiUndo,
} 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 { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
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 "@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 { HassEntity } from "home-assistant-js-websocket";
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 { customElement, property, state } from "lit/decorators";
import {
@ -31,6 +28,7 @@ import { entitiesConfigStruct } from "../structs/entities-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import "@polymer/paper-input/paper-input";
const cardConfigStruct = assign(
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 { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";

1
src/translations/en.json
View File

@ -2103,6 +2103,7 @@
"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.",
"default_language": "Default language to use",
"default_gender": "Default gender to use",
"male": "Male",
"female": "Female",
"try": "Try",