jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-22 16:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Another round of paper-dropdown -> mwc-select conversion (#11674)

Browse Source 
* Another round of paper-dropdown -> mwc-select conversion

* ha-pick-language-row -> Lit

* Update hui-view-editor.ts

* Cleanup imports

* hassio

* Add explicit imports
This commit is contained in:
Bram Kragten 2022-02-14 20:08:18 +01:00 committed by GitHub
parent 460b9003fc
commit 523afe2f6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 590 additions and 747 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
hassio/src/addon-view/config/hassio-addon-audio.ts
View File

@ -1,7 +1,6 @@
import "@material/mwc-button";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
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,
@ -11,7 +10,7 @@ import {
TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import "web-animations-js/web-animations-next-lite.min";
import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
import "../../../../src/components/buttons/ha-progress-button";
import "../../../../src/components/ha-alert";
import "../../../../src/components/ha-card";
@ -58,48 +57,44 @@ class HassioAddonAudio extends LitElement {
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
<paper-dropdown-menu
<mwc-select
.label=${this.supervisor.localize(
"addon.configuration.audio.input"
)}
@iron-select=${this._setInputDevice}
@selected=${this._setInputDevice}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
.value=${this._selectedInput!}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="device"
.selected=${this._selectedInput!}
>
${this._inputDevices &&
this._inputDevices.map(
(item) => html`
<paper-item device=${item.device || ""}>
${item.name}
</paper-item>
`
)}
</paper-listbox>
</paper-dropdown-menu>
<paper-dropdown-menu
${this._inputDevices &&
this._inputDevices.map(
(item) => html`
<mwc-list-item .value=${item.device || ""}>
${item.name}
</mwc-list-item>
`
)}
</mwc-select>
<mwc-select
.label=${this.supervisor.localize(
"addon.configuration.audio.output"
)}
@iron-select=${this._setOutputDevice}
@selected=${this._setOutputDevice}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
.value=${this._selectedOutput!}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="device"
.selected=${this._selectedOutput!}
>
${this._outputDevices &&
this._outputDevices.map(
(item) => html`
<paper-item device=${item.device || ""}
>${item.name}</paper-item
>
`
)}
</paper-listbox>
</paper-dropdown-menu>
${this._outputDevices &&
this._outputDevices.map(
(item) => html`
<mwc-list-item .value=${item.device || ""}
>${item.name}</mwc-list-item
>
`
)}
</mwc-select>
</div>
<div class="card-actions">
<ha-progress-button @click=${this._saveSettings}>
@ -138,12 +133,12 @@ class HassioAddonAudio extends LitElement {
}
private _setInputDevice(ev): void {
const device = ev.detail.item.getAttribute("device");
const device = ev.target.value;
this._selectedInput = device;
}
private _setOutputDevice(ev): void {
const device = ev.detail.item.getAttribute("device");
const device = ev.target.value;
this._selectedOutput = device;
}

1
hassio/src/dashboard/hassio-update.ts
View File

@ -148,7 +148,6 @@ export class HassioUpdate extends LitElement {
}
ha-settings-row {
padding: 0;
--paper-item-body-two-line-min-height: 32px;
}
`,
];

26
hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts
View File

@ -1,6 +1,5 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -90,18 +89,19 @@ class HassioDatadiskDialog extends LitElement {
)}
<br /><br />
<paper-dropdown-menu
<mwc-select
.label=${this.dialogParams.supervisor.localize(
"dialog.datadisk_move.select_device"
)}
@value-changed=${this._select_device}
@selected=${this._select_device}
>
<paper-listbox slot="dropdown-content">
${this.devices.map(
(device) => html`<paper-item>${device}</paper-item>`
)}
</paper-listbox>
</paper-dropdown-menu>
${this.devices.map(
(device) =>
html`<mwc-list-item .value=${device}
>${device}</mwc-list-item
>`
)}
</mwc-select>
`
: this.devices === undefined
? this.dialogParams.supervisor.localize(
@ -130,8 +130,8 @@ class HassioDatadiskDialog extends LitElement {
`;
}
private _select_device(event) {
this.selectedDevice = event.detail.value;
private _select_device(ev) {
this.selectedDevice = ev.target.value;
}
private async _moveDatadisk() {

34
hassio/src/system/hassio-supervisor-log.ts
View File

@ -1,7 +1,4 @@
import "@material/mwc-button";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
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 "../../../src/components/buttons/ha-progress-button";
@ -73,24 +70,19 @@ class HassioSupervisorLog extends LitElement {
: ""}
${this.hass.userData?.showAdvanced
? html`
<paper-dropdown-menu
<mwc-select
.label=${this.supervisor.localize("system.log.log_provider")}
@iron-select=${this._setLogProvider}
@selected=${this._setLogProvider}
.value=${this._selectedLogProvider}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="provider"
.selected=${this._selectedLogProvider}
>
${logProviders.map(
(provider) => html`
<paper-item provider=${provider.key}>
${provider.name}
</paper-item>
`
)}
</paper-listbox>
</paper-dropdown-menu>
${logProviders.map(
(provider) => html`
<mwc-list-item .value=${provider.key}>
${provider.name}
</mwc-list-item>
`
)}
</mwc-select>
`
: ""}
@ -110,7 +102,7 @@ class HassioSupervisorLog extends LitElement {
}
private async _setLogProvider(ev): Promise<void> {
const provider = ev.detail.item.getAttribute("provider");
const provider = ev.target.value;
this._selectedLogProvider = provider;
this._loadData();
}
@ -153,7 +145,7 @@ class HassioSupervisorLog extends LitElement {
pre {
white-space: pre-wrap;
}
paper-dropdown-menu {
mwc-select {
padding: 0 2%;
width: 96%;
}

2
src/components/entity/ha-statistic-picker.ts
View File

@ -1,6 +1,4 @@
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
import { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";

28
src/components/ha-paper-dropdown-menu.ts
View File

@ -1,28 +0,0 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import { PolymerElement } from "@polymer/polymer";
import { Constructor } from "../types";
const paperDropdownClass = customElements.get(
"paper-dropdown-menu"
) as Constructor<PolymerElement>;
// patches paper drop down to properly support RTL - https://github.com/PolymerElements/paper-dropdown-menu/issues/183
export class HaPaperDropdownClass extends paperDropdownClass {
public ready() {
super.ready();
// wait to check for direction since otherwise direction is wrong even though top level is RTL
setTimeout(() => {
if (window.getComputedStyle(this).direction === "rtl") {
this.style.textAlign = "right";
}
}, 100);
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-paper-dropdown-menu": HaPaperDropdownClass;
}
}
customElements.define("ha-paper-dropdown-menu", HaPaperDropdownClass);

1
src/components/media-player/ha-media-player-browse.ts
View File

@ -2,7 +2,6 @@ import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list";
import "@material/mwc-list/mwc-list-item";
import { mdiPlay, mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-tooltip/paper-tooltip";
import {
css,

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

@ -615,10 +615,6 @@ class MoreInfoLight extends LitElement {
color: var(--secondary-text-color);
}
paper-item {
cursor: pointer;
}
hr {
border-color: var(--divider-color);
border-bottom: none;

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

@ -1,4 +1,4 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes";
@ -66,14 +66,6 @@ class MoreInfoRemote extends LitElement {
activity: newVal,
});
}
static get styles(): CSSResultGroup {
return css`
paper-item {
cursor: pointer;
}
`;
}
}
declare global {

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

@ -241,9 +241,6 @@ class MoreInfoVacuum extends LitElement {
.status-subtitle {
color: var(--secondary-text-color);
}
paper-item {
cursor: pointer;
}
.flex-horizontal {
display: flex;
flex-direction: row;

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

@ -1,7 +1,6 @@
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";

41
src/panels/config/automation/condition/types/ha-automation-condition-trigger.ts
View File

@ -1,4 +1,5 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -48,41 +49,35 @@ export class HaTriggerCondition extends LitElement {
"ui.panel.config.automation.editor.conditions.type.trigger.no_triggers"
);
}
return html`<paper-dropdown-menu-light
return html`<mwc-select
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.type.trigger.id"
)}
no-animations
.value=${id}
@selected=${this._triggerPicked}
>
<paper-listbox
slot="dropdown-content"
.selected=${id}
attr-for-selected="data-trigger-id"
@selected-item-changed=${this._triggerPicked}
>
${ensureArray(this._triggers).map((trigger) =>
trigger.id
? html`
<paper-item data-trigger-id=${trigger.id}>
${trigger.id}
</paper-item>
`
: ""
)}
</paper-listbox>
</paper-dropdown-menu-light>`;
${ensureArray(this._triggers).map((trigger) =>
trigger.id
? html`
<mwc-list-item .value=${trigger.id}>
${trigger.id}
</mwc-list-item>
`
: ""
)}
</mwc-select>`;
}
private _automationUpdated(config?: AutomationConfig) {
this._triggers = config?.trigger;
}
private _triggerPicked(ev: CustomEvent) {
private _triggerPicked(ev) {
ev.stopPropagation();
if (!ev.detail.value) {
if (!ev.target.value) {
return;
}
const newTrigger = ev.detail.value.dataset.triggerId;
const newTrigger = ev.target.value;
if (this.condition.id === newTrigger) {
return;
}

42
src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts
View File

@ -1,13 +1,14 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
import "@polymer/paper-input/paper-input";
import { html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import { caseInsensitiveStringCompare } from "../../../../../common/string/compare";
import { TagTrigger } from "../../../../../data/automation";
import { fetchTags, Tag } from "../../../../../data/tag";
import { HomeAssistant } from "../../../../../types";
import { TriggerElement } from "../ha-automation-trigger-row";
import "../../../../../components/ha-paper-dropdown-menu";
import { caseInsensitiveStringCompare } from "../../../../../common/string/compare";
@customElement("ha-automation-trigger-tag")
export class HaTagTrigger extends LitElement implements TriggerElement {
@ -29,27 +30,22 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
protected render() {
const { tag_id } = this.trigger;
return html`
<ha-paper-dropdown-menu
<mwc-select
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.tag.label"
)}
?disabled=${this._tags.length === 0}
.disabled=${this._tags.length === 0}
.value=${tag_id}
@selected=${this._tagChanged}
>
<paper-listbox
slot="dropdown-content"
.selected=${tag_id}
attr-for-selected="tag_id"
@iron-select=${this._tagChanged}
>
${this._tags.map(
(tag) => html`
<paper-item tag_id=${tag.id} .tag=${tag}>
${tag.name || tag.id}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
${this._tags.map(
(tag) => html`
<mwc-list-item .value=${tag.id}>
${tag.name || tag.id}
</mwc-list-item>
`
)}
</mwc-select>
`;
}
@ -64,8 +60,14 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
fireEvent(this, "value-changed", {
value: {
...this.trigger,
tag_id: ev.detail.item.tag.id,
tag_id: ev.target.value,
},
});
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-automation-trigger-tag": HaTagTrigger;
}
}

1
src/panels/config/cloud/account/cloud-remote-pref.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-button";
import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";

2
src/panels/config/cloud/account/cloud-webhooks.ts
View File

@ -1,5 +1,3 @@
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { isComponentLoaded } from "../../../../common/config/is_component_loaded";

3
src/panels/config/cloud/register/cloud-register.ts
View File

@ -266,9 +266,6 @@ export class CloudRegister extends LitElement {
a {
color: var(--primary-color);
}
paper-item {
cursor: pointer;
}
h1 {
margin: 0;
}

44
src/panels/config/entities/entity-registry-settings.ts
View File

@ -1,6 +1,7 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "@polymer/paper-input/paper-input";
import type { PaperItemElement } from "@polymer/paper-item/paper-item";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
@ -17,7 +18,6 @@ import { domainIcon } from "../../../common/entity/domain_icon";
import "../../../components/ha-area-picker";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-icon-picker";
import "../../../components/ha-paper-dropdown-menu";
import "../../../components/ha-switch";
import type { HaSwitch } from "../../../components/ha-switch";
import {
@ -158,28 +158,23 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
></ha-icon-picker>
${OVERRIDE_DEVICE_CLASSES[domain]?.includes(this._deviceClass) ||
(domain === "cover" && this.entry.original_device_class === null)
? html`<ha-paper-dropdown-menu
? html`<mwc-select
.label=${this.hass.localize(
"ui.dialogs.entity_registry.editor.device_class"
)}
.value=${this._deviceClass}
@selected=${this._deviceClassChanged}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="item-value"
.selected=${this._deviceClass}
@selected-item-changed=${this._deviceClassChanged}
>
${OVERRIDE_DEVICE_CLASSES[domain].map(
(deviceClass: string) => html`
<paper-item .itemValue=${deviceClass}>
${this.hass.localize(
`ui.dialogs.entity_registry.editor.device_classes.${domain}.${deviceClass}`
)}
</paper-item>
`
)}
</paper-listbox>
</ha-paper-dropdown-menu>`
${OVERRIDE_DEVICE_CLASSES[domain].map(
(deviceClass: string) => html`
<mwc-list-item .value=${deviceClass}>
${this.hass.localize(
`ui.dialogs.entity_registry.editor.device_classes.${domain}.${deviceClass}`
)}
</mwc-list-item>
`
)}
</mwc-select>`
: ""}
<paper-input
.value=${this._entityId}
@ -302,12 +297,9 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
this._entityId = ev.detail.value;
}
private _deviceClassChanged(ev: PolymerChangedEvent<PaperItemElement>): void {
private _deviceClassChanged(ev): void {
this._error = undefined;
if (ev.detail.value === null) {
return;
}
this._deviceClass = (ev.detail.value as any).itemValue;
this._deviceClass = ev.target.value;
}
private _areaPicked(ev: CustomEvent) {
@ -425,7 +417,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
padding-bottom: max(env(safe-area-inset-bottom), 8px);
background-color: var(--mdc-theme-surface, #fff);
}
ha-paper-dropdown-menu {
mwc-select {
width: 100%;
}
ha-switch {

4
src/panels/config/ha-form-style.js
View File

@ -22,10 +22,6 @@ documentContainer.innerHTML = `<dom-module id="ha-form-style">
@apply --layout-vertical;
@apply --layout-start;
}
paper-dropdown-menu.form-control {
margin: -9px 0;
}
</style>
</template>
</dom-module>`;

2
src/panels/config/ha-panel-config.ts
View File

@ -21,8 +21,6 @@ import {
mdiTools,
mdiViewDashboard,
} from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { PolymerElement } from "@polymer/polymer";
import { PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";

2
src/panels/config/helpers/dialog-helper-detail.ts
View File

@ -2,7 +2,7 @@ import "@material/mwc-button/mwc-button";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-tooltip/paper-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state, query } from "lit/decorators";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { dynamicElement } from "../../../common/dom/dynamic-element-directive";

2
src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
View File

@ -1,7 +1,5 @@
import "@material/mwc-button/mwc-button";
import { mdiFolderMultipleOutline, mdiLan, mdiNetwork, mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import {
css,
CSSResultGroup,

32
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts
View File

@ -1,6 +1,6 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import { mdiDownload } from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-listbox/paper-listbox";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultArray, html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -77,26 +77,20 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
<div class="card-content">
${this._logConfig
? html`
<paper-dropdown-menu
dynamic-align
<mwc-select
.label=${this.hass.localize(
"ui.panel.config.zwave_js.logs.log_level"
)}
.value=${this._logConfig.level}
@selected=${this._dropdownSelected}
>
<paper-listbox
slot="dropdown-content"
.selected=${this._logConfig.level}
attr-for-selected="value"
@iron-select=${this._dropdownSelected}
>
<paper-item value="error">Error</paper-item>
<paper-item value="warn">Warn</paper-item>
<paper-item value="info">Info</paper-item>
<paper-item value="verbose">Verbose</paper-item>
<paper-item value="debug">Debug</paper-item>
<paper-item value="silly">Silly</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<mwc-list-item value="error">Error</mwc-list-item>
<mwc-list-item value="warn">Warn</mwc-list-item>
<mwc-list-item value="info">Info</mwc-list-item>
<mwc-list-item value="verbose">Verbose</mwc-list-item>
<mwc-list-item value="debug">Debug</mwc-list-item>
<mwc-list-item value="silly">Silly</mwc-list-item>
</mwc-select>
`
: ""}
</div>
@ -142,7 +136,7 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
if (ev.target === undefined || this._logConfig === undefined) {
return;
}
const selected = ev.target.selected;
const selected = ev.target.value;
if (this._logConfig.level === selected) {
return;
}

41
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
View File

@ -1,13 +1,12 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import {
mdiCheckCircle,
mdiCircle,
mdiCloseCircle,
mdiProgressClock,
} from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
@ -287,26 +286,20 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
return html`
${labelAndDescription}
<div class="flex">
<paper-dropdown-menu
dynamic-align
<mwc-select
.disabled=${!item.metadata.writeable}
.value=${item.value}
.key=${id}
.property=${item.property}
.propertyKey=${item.property_key}
@selected=${this._dropdownSelected}
>
<paper-listbox
slot="dropdown-content"
.selected=${item.value}
attr-for-selected="value"
.key=${id}
.property=${item.property}
.propertyKey=${item.property_key}
@iron-select=${this._dropdownSelected}
>
${Object.entries(item.metadata.states).map(
([key, entityState]) => html`
<paper-item .value=${key}>${entityState}</paper-item>
`
)}
</paper-listbox>
</paper-dropdown-menu>
${Object.entries(item.metadata.states).map(
([key, entityState]) => html`
<mwc-list-item .value=${key}>${entityState}</mwc-list-item>
`
)}
</mwc-select>
</div>
`;
}
@ -351,12 +344,12 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
if (ev.target === undefined || this._config![ev.target.key] === undefined) {
return;
}
if (this._config![ev.target.key].value === ev.target.selected) {
if (this._config![ev.target.key].value === ev.target.value) {
return;
}
this.setResult(ev.target.key, undefined);
this._updateConfigParameter(ev.target, Number(ev.target.selected));
this._updateConfigParameter(ev.target, Number(ev.target.value));
}
private debouncedUpdate = debounce((target, value) => {
@ -462,7 +455,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
}
.flex .config-label,
.flex paper-dropdown-menu {
.flex mwc-select {
flex: 1;
}

82
src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
View File

@ -1,11 +1,8 @@
import "@material/mwc-button/mwc-button";
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 { createCloseHeading } from "../../../../components/ha-dialog";
import "../../../../components/ha-paper-dropdown-menu";
import {
LovelaceResource,
LovelaceResourcesMutableParams,
@ -14,6 +11,9 @@ import { PolymerChangedEvent } from "../../../../polymer-types";
import { haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
import { LovelaceResourceDetailsDialogParams } from "./show-dialog-lovelace-resource-detail";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
const detectResourceType = (url: string) => {
const ext = url.split(".").pop() || "";
@ -102,48 +102,44 @@ export class DialogLovelaceResourceDetail extends LitElement {
dialogInitialFocus
></paper-input>
<br />
<ha-paper-dropdown-menu
<mwc-select
.label=${this.hass!.localize(
"ui.panel.config.lovelace.resources.detail.type"
)}
.value=${this._type}
@selected=${this._typeChanged}
@closed=${stopPropagation}
.invalid=${!this._type}
>
<paper-listbox
slot="dropdown-content"
.selected=${this._type}
@iron-select=${this._typeChanged}
attr-for-selected="type"
.invalid=${!this._type}
>
<paper-item type="module">
${this.hass!.localize(
"ui.panel.config.lovelace.resources.types.module"
)}
</paper-item>
${this._type === "js"
? html`
<paper-item type="js">
${this.hass!.localize(
"ui.panel.config.lovelace.resources.types.js"
)}
</paper-item>
`
: ""}
<paper-item type="css">
${this.hass!.localize(
"ui.panel.config.lovelace.resources.types.css"
)}
</paper-item>
${this._type === "html"
? html`
<paper-item type="html">
${this.hass!.localize(
"ui.panel.config.lovelace.resources.types.html"
)}
</paper-item>
`
: ""}
</paper-listbox>
</ha-paper-dropdown-menu>
<mwc-list-item value="module">
${this.hass!.localize(
"ui.panel.config.lovelace.resources.types.module"
)}
</mwc-list-item>
${this._type === "js"
? html`
<mwc-list-item value="js">
${this.hass!.localize(
"ui.panel.config.lovelace.resources.types.js"
)}
</mwc-list-item>
`
: ""}
<mwc-list-item value="css">
${this.hass!.localize(
"ui.panel.config.lovelace.resources.types.css"
)}
</mwc-list-item>
${this._type === "html"
? html`
<mwc-list-item value="html">
${this.hass!.localize(
"ui.panel.config.lovelace.resources.types.html"
)}
</mwc-list-item>
`
: ""}
</mwc-select>
</div>
</div>
${this._params.resource
@ -185,8 +181,8 @@ export class DialogLovelaceResourceDetail extends LitElement {
}
}
private _typeChanged(ev: CustomEvent) {
this._type = ev.detail.item.getAttribute("type");
private _typeChanged(ev) {
this._type = ev.target.value;
}
private async _updateResource() {

2
src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
View File

@ -1,6 +1,4 @@
import { mdiPlus } from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-icon-item";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoize from "memoize-one";

24
src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
View File

@ -1,11 +1,11 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import { mdiClose } from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
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 { array, assert, assign, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-svg-icon";
import { HomeAssistant } from "../../../../types";
@ -109,18 +109,20 @@ export class HuiAlarmPanelCardEditor
</div>
`
)}
<paper-dropdown-menu
<mwc-select
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.alarm-panel.available_states"
)}
@value-changed=${this._stateAdded}
@selected=${this._stateAdded}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
>
<paper-listbox slot="dropdown-content">
${states.map(
(entityState) => html` <paper-item>${entityState}</paper-item> `
)}
</paper-listbox>
</paper-dropdown-menu>
${states.map(
(entityState) =>
html`<mwc-list-item>${entityState}</mwc-list-item> `
)}
</mwc-select>
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}

45
src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
View File

@ -1,3 +1,5 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import {
@ -11,15 +13,16 @@ import {
union,
} from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import "../../../../components/entity/ha-entities-picker";
import type { HomeAssistant } from "../../../../types";
import type { CalendarCardConfig } from "../../cards/types";
import "../../components/hui-entity-editor";
import "../../components/hui-theme-select-editor";
import type { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import type { EditorTarget, EntitiesEditorEvent } from "../types";
import { configElementStyle } from "./config-elements-style";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@ -80,29 +83,25 @@ export class HuiCalendarCardEditor
.configValue=${"title"}
@value-changed=${this._valueChanged}
></paper-input>
<paper-dropdown-menu
<mwc-select
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.calendar.inital_view"
)}
.value=${this._initial_view}
.configValue=${"initial_view"}
@selected=${this._viewChanged}
@closed=${stopPropagation}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="view"
.selected=${this._initial_view}
.configValue=${"initial_view"}
@iron-select=${this._viewChanged}
>
${views.map(
(view) => html`
<paper-item .view=${view}
>${this.hass!.localize(
`ui.panel.lovelace.editor.card.calendar.views.${view}`
)}
</paper-item>
`
)}
</paper-listbox>
</paper-dropdown-menu>
${views.map(
(view) => html`
<mwc-list-item .value=${view}
>${this.hass!.localize(
`ui.panel.lovelace.editor.card.calendar.views.${view}`
)}
</mwc-list-item>
`
)}
</mwc-select>
</div>
<hui-theme-select-editor
.hass=${this.hass}
@ -157,18 +156,18 @@ export class HuiCalendarCardEditor
fireEvent(this, "config-changed", { config: this._config });
}
private _viewChanged(ev: CustomEvent): void {
private _viewChanged(ev): void {
if (!this._config || !this.hass) {
return;
}
if (ev.detail.item.view === "") {
if (ev.target.value === "") {
this._config = { ...this._config };
delete this._config.initial_view;
} else {
this._config = {
...this._config,
initial_view: ev.detail.item.view,
initial_view: ev.target.value,
};
}
fireEvent(this, "config-changed", { config: this._config });

59
src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
View File

@ -1,8 +1,10 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab";
import type { MDCTabBarActivatedEvent } from "@material/tab-bar";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state, query } from "lit/decorators";
import { customElement, property, query, state } from "lit/decorators";
import {
any,
array,
@ -13,6 +15,7 @@ import {
string,
} from "superstruct";
import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import "../../../../components/entity/ha-entity-picker";
import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
@ -142,33 +145,33 @@ export class HuiConditionalCardEditor
<ha-entity-picker
.hass=${this.hass}
.value=${cond.entity}
.index=${idx}
.idx=${idx}
.configValue=${"entity"}
@change=${this._changeCondition}
allow-custom-entity
></ha-entity-picker>
</div>
<div class="state">
<paper-dropdown-menu>
<paper-listbox
.selected=${cond.state_not !== undefined ? 1 : 0}
slot="dropdown-content"
.index=${idx}
.configValue=${"invert"}
@selected-item-changed=${this._changeCondition}
>
<paper-item
>${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.state_equal"
)}</paper-item
>
<paper-item
>${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.state_not_equal"
)}</paper-item
>
</paper-listbox>
</paper-dropdown-menu>
<mwc-select
.value=${cond.state_not !== undefined
? "true"
: "false"}
.idx=${idx}
.configValue=${"invert"}
@selected=${this._changeCondition}
@closed=${stopPropagation}
>
<mwc-list-item value="false">
${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.state_equal"
)}
</mwc-list-item>
<mwc-list-item value="true">
${this.hass!.localize(
"ui.panel.lovelace.editor.card.conditional.state_not_equal"
)}
</mwc-list-item>
</mwc-select>
<paper-input
.label="${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.state"
@ -178,7 +181,7 @@ export class HuiConditionalCardEditor
.value=${cond.state_not !== undefined
? cond.state_not
: cond.state}
.index=${idx}
.idx=${idx}
.configValue=${"state"}
@value-changed=${this._changeCondition}
></paper-input>
@ -274,9 +277,9 @@ export class HuiConditionalCardEditor
}
const conditions = [...this._config.conditions];
if (target.configValue === "entity" && target.value === "") {
conditions.splice(target.index, 1);
conditions.splice(target.idx, 1);
} else {
const condition = { ...conditions[target.index] };
const condition = { ...conditions[target.idx] };
if (target.configValue === "entity") {
condition.entity = target.value;
} else if (target.configValue === "state") {
@ -286,7 +289,7 @@ export class HuiConditionalCardEditor
condition.state = target.value;
}
} else if (target.configValue === "invert") {
if (target.selected === 1) {
if (target.value === "true") {
if (condition.state) {
condition.state_not = condition.state;
delete condition.state;
@ -296,7 +299,7 @@ export class HuiConditionalCardEditor
delete condition.state_not;
}
}
conditions[target.index] = condition;
conditions[target.idx] = condition;
}
this._config = { ...this._config, conditions };
fireEvent(this, "config-changed", { config: this._config });
@ -321,7 +324,7 @@ export class HuiConditionalCardEditor
display: flex;
align-items: flex-end;
}
.condition .state paper-dropdown-menu {
.condition .state mwc-select {
margin-right: 16px;
}
.condition .state paper-input {

2
src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
View File

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

59
src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts
View File

@ -1,3 +1,5 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -99,37 +101,34 @@ export class HuiGenericEntityRowEditor
@value-changed=${this._valueChanged}
></ha-icon-picker>
</div>
<paper-dropdown-menu .label=${"Secondary Info"}>
<paper-listbox
slot="dropdown-content"
attr-for-selected="value"
.selected=${this._config.secondary_info || "none"}
.configValue=${"secondary_info"}
@iron-select=${this._valueChanged}
<mwc-select
label="Secondary Info"
.selected=${this._config.secondary_info || "none"}
.configValue=${"secondary_info"}
@selected=${this._valueChanged}
>
<mwc-list-item value=""
>${this.hass!.localize(
"ui.panel.lovelace.editor.card.entities.secondary_info_values.none"
)}</mwc-list-item
>
<paper-item value=""
>${this.hass!.localize(
"ui.panel.lovelace.editor.card.entities.secondary_info_values.none"
)}</paper-item
>
${Object.keys(SecondaryInfoValues).map((info) => {
if (
!("domains" in SecondaryInfoValues[info]) ||
("domains" in SecondaryInfoValues[info] &&
SecondaryInfoValues[info].domains!.includes(domain))
) {
return html`
<paper-item .value=${info}
>${this.hass!.localize(
`ui.panel.lovelace.editor.card.entities.secondary_info_values.${info}`
)}</paper-item
>
`;
}
return "";
})}
</paper-listbox>
</paper-dropdown-menu>
${Object.keys(SecondaryInfoValues).map((info) => {
if (
!("domains" in SecondaryInfoValues[info]) ||
("domains" in SecondaryInfoValues[info] &&
SecondaryInfoValues[info].domains!.includes(domain))
) {
return html`
<mwc-list-item .value=${info}>
${this.hass!.localize(
`ui.panel.lovelace.editor.card.entities.secondary_info_values.${info}`
)}
</mwc-list-item>
`;
}
return "";
})}
</mwc-select>
</div>
`;
}

30
src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
View File

@ -1,11 +1,11 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "@polymer/paper-input/paper-input";
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 { assert, boolean, object, optional, string, assign } from "superstruct";
import { assert, assign, boolean, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/ha-formfield";
import "../../../../components/ha-switch";
@ -17,9 +17,9 @@ import "../../components/hui-entity-editor";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import { actionConfigStruct } from "../structs/action-struct";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@ -155,22 +155,24 @@ export class HuiPictureEntityCardEditor
allow-custom-entity
></ha-entity-picker>
<div class="side-by-side">
<paper-dropdown-menu
<mwc-select
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.camera_view"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.configValue=${"camera_view"}
@value-changed=${this._valueChanged}
@selected=${this._valueChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
.value=${views.indexOf(this._camera_view)}
>
<paper-listbox
slot="dropdown-content"
.selected=${views.indexOf(this._camera_view)}
>
${views.map((view) => html` <paper-item>${view}</paper-item> `)}
</paper-listbox>
</paper-dropdown-menu>
${views.map(
(view) =>
html`<mwc-list-item .value=${view}>${view}</mwc-list-item> `
)}
</mwc-select>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.aspect_ratio"

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

@ -1,11 +1,11 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "@polymer/paper-input/paper-input";
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 { array, assert, object, optional, string, assign } from "superstruct";
import { array, assert, assign, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import "../../../../components/entity/ha-entity-picker";
import { ActionConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
@ -17,10 +17,10 @@ import { EntityConfig } from "../../entity-rows/types";
import { LovelaceCardEditor } from "../../types";
import { processEditorEntities } from "../process-editor-entities";
import { actionConfigStruct } from "../structs/action-struct";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { entitiesConfigStruct } from "../structs/entities-struct";
import { EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@ -146,22 +146,24 @@ export class HuiPictureGlanceCardEditor
.includeDomains=${includeDomains}
></ha-entity-picker>
<div class="side-by-side">
<paper-dropdown-menu
<mwc-select
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.camera_view"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.configValue=${"camera_view"}
@value-changed=${this._valueChanged}
@selected=${this._valueChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
.value=${this._camera_view}
>
<paper-listbox
slot="dropdown-content"
.selected=${views.indexOf(this._camera_view)}
>
${views.map((view) => html` <paper-item>${view}</paper-item> `)}
</paper-listbox>
</paper-dropdown-menu>
${views.map(
(view) =>
html`<mwc-list-item .value=${view}>${view}</mwc-list-item> `
)}
</mwc-select>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.aspect_ratio"

26
src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
View File

@ -1,7 +1,6 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "@polymer/paper-input/paper-input";
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 {
@ -15,6 +14,7 @@ import {
union,
} from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { computeDomain } from "../../../../common/entity/compute_domain";
import { domainIcon } from "../../../../common/entity/domain_icon";
import "../../../../components/entity/ha-entity-picker";
@ -142,22 +142,24 @@ export class HuiSensorCardEditor
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-picker>
<paper-dropdown-menu
<mwc-select
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.sensor.graph_type"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.configValue=${"graph"}
@value-changed=${this._valueChanged}
@selected=${this._valueChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
.value=${this._graph}
>
<paper-listbox
slot="dropdown-content"
.selected=${graphs.indexOf(this._graph)}
>
${graphs.map((graph) => html`<paper-item>${graph}</paper-item>`)}
</paper-listbox>
</paper-dropdown-menu>
${graphs.map(
(graph) =>
html`<mwc-list-item .value=${graph}>${graph}</mwc-list-item>`
)}
</mwc-select>
</div>
<div class="side-by-side">
<paper-input

58
src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts
View File

@ -1,33 +1,35 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import {
array,
assert,
assign,
literal,
number,
object,
optional,
string,
union,
assign,
} from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import "../../../../components/entity/ha-statistics-picker";
import "../../../../components/ha-checkbox";
import "../../../../components/ha-formfield";
import "../../../../components/ha-radio";
import type { HaRadio } from "../../../../components/ha-radio";
import { StatisticType } from "../../../../data/history";
import { HomeAssistant } from "../../../../types";
import { StatisticsGraphCardConfig } from "../../cards/types";
import { processConfigEntities } from "../../common/process-config-entities";
import { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { entitiesConfigStruct } from "../structs/entities-struct";
import { EditorTarget } from "../types";
import { configElementStyle } from "./config-elements-style";
import "../../../../components/entity/ha-statistics-picker";
import { processConfigEntities } from "../../common/process-config-entities";
import "../../../../components/ha-formfield";
import "../../../../components/ha-checkbox";
import { StatisticType } from "../../../../data/history";
import "../../../../components/ha-radio";
import type { HaRadio } from "../../../../components/ha-radio";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
const statTypeStruct = union([
literal("sum"),
@ -118,30 +120,28 @@ export class HuiStatisticsGraphCardEditor
@value-changed=${this._valueChanged}
></paper-input>
<div class="side-by-side">
<paper-dropdown-menu
<mwc-select
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.statistics-graph.period"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.configValue=${"period"}
@iron-select=${this._periodSelected}
@selected=${this._periodSelected}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
.value=${this._period}
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="period"
.selected=${this._period}
>
${periods.map(
(period) =>
html`<paper-item .period=${period}>
${this.hass!.localize(
`ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
)}
</paper-item>`
)}
</paper-listbox>
</paper-dropdown-menu>
${periods.map(
(period) =>
html`<mwc-list-item .value=${period}>
${this.hass!.localize(
`ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
)}
</mwc-list-item>`
)}
</mwc-select>
<paper-input
type="number"
.label="${this.hass.localize(
@ -242,8 +242,8 @@ export class HuiStatisticsGraphCardEditor
});
}
private _periodSelected(ev: CustomEvent) {
const newPeriod = ev.detail.item
private _periodSelected(ev) {
const newPeriod = ev.target.value
.period as StatisticsGraphCardConfig["period"];
if (newPeriod === this._period) {
return;

1
src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
View File

@ -1,5 +1,4 @@
import { mdiClose, mdiPencil, mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";

67
src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
View File

@ -1,13 +1,13 @@
import "@material/mwc-list/mwc-list";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-list/mwc-radio-list-item";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@material/mwc-select/mwc-select";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { createCloseHeading } from "../../../../components/ha-dialog";
import "../../../../components/ha-icon";
import "../../../../components/ha-paper-dropdown-menu";
import {
fetchConfig,
fetchDashboards,
@ -69,40 +69,37 @@ export class HuiDialogSelectView extends LitElement {
)}
>
${this._params.allowDashboardChange
? html`<ha-paper-dropdown-menu
? html`<mwc-select
.label=${this.hass.localize(
"ui.panel.lovelace.editor.select_view.dashboard_label"
)}
dynamic-align
.disabled=${!this._dashboards.length}
.value=${this._urlPath || this.hass.defaultPanel}
@selected=${this._dashboardChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
>
<paper-listbox
slot="dropdown-content"
.selected=${this._urlPath || this.hass.defaultPanel}
@iron-select=${this._dashboardChanged}
attr-for-selected="url-path"
<mwc-list-item
value="lovelace"
.disabled=${(this.hass.panels.lovelace?.config as any)?.mode ===
"yaml"}
>
<paper-item
.urlPath=${"lovelace"}
.disabled=${(this.hass.panels.lovelace?.config as any)
?.mode === "yaml"}
>
Default
</paper-item>
${this._dashboards.map((dashboard) => {
if (!this.hass.user!.is_admin && dashboard.require_admin) {
return "";
}
return html`
<paper-item
.disabled=${dashboard.mode !== "storage"}
.urlPath=${dashboard.url_path}
>${dashboard.title}</paper-item
>
`;
})}
</paper-listbox>
</ha-paper-dropdown-menu>`
Default
</mwc-list-item>
${this._dashboards.map((dashboard) => {
if (!this.hass.user!.is_admin && dashboard.require_admin) {
return "";
}
return html`
<mwc-list-item
.disabled=${dashboard.mode !== "storage"}
.value=${dashboard.url_path}
>${dashboard.title}</mwc-list-item
>
`;
})}
</mwc-select>`
: ""}
${this._config
? this._config.views.length > 1
@ -111,7 +108,7 @@ export class HuiDialogSelectView extends LitElement {
${this._config.views.map(
(view, idx) => html`
<mwc-radio-list-item
graphic=${this._config?.views.some(({ icon }) => icon)
.graphic=${this._config?.views.some(({ icon }) => icon)
? "icon"
: null}
@click=${this._viewChanged}
@ -142,8 +139,8 @@ export class HuiDialogSelectView extends LitElement {
this._params!.dashboards || (await fetchDashboards(this.hass));
}
private async _dashboardChanged(ev: CustomEvent) {
let urlPath: string | null = ev.detail.item.urlPath;
private async _dashboardChanged(ev) {
let urlPath: string | null = ev.target.value;
if (urlPath === this._urlPath) {
return;
}
@ -181,7 +178,7 @@ export class HuiDialogSelectView extends LitElement {
return [
haStyleDialog,
css`
ha-paper-dropdown-menu {
mwc-select {
width: 100%;
}
`,

35
src/panels/lovelace/editor/view-editor/hui-view-editor.ts
View File

@ -1,7 +1,10 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { slugify } from "../../../../common/string/slugify";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker";
@ -121,26 +124,24 @@ export class HuiViewEditor extends LitElement {
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
<paper-dropdown-menu
<mwc-select
.label=${this.hass.localize(
"ui.panel.lovelace.editor.edit_view.type"
)}
.value=${this._type}
@selected=${this._typeChanged}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidth
>
<paper-listbox
slot="dropdown-content"
.selected=${this._type}
attr-for-selected="type"
@iron-select=${this._typeChanged}
>
${[DEFAULT_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT, PANEL_VIEW_LAYOUT].map(
(type) => html`<paper-item .type=${type}>
${this.hass.localize(
`ui.panel.lovelace.editor.edit_view.types.${type}`
)}
</paper-item>`
)}
</paper-listbox>
</paper-dropdown-menu>
${[DEFAULT_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT, PANEL_VIEW_LAYOUT].map(
(type) => html`<mwc-list-item .value=${type}>
${this.hass.localize(
`ui.panel.lovelace.editor.edit_view.types.${type}`
)}
</mwc-list-item>`
)}
</mwc-select>
</div>
`;
}
@ -166,7 +167,7 @@ export class HuiViewEditor extends LitElement {
}
private _typeChanged(ev): void {
const selected = ev.target.selected;
const selected = ev.target.value;
if (selected === "") {
return;
}

13
src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts
View File

@ -1,5 +1,5 @@
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import {
css,
CSSResultGroup,
@ -68,19 +68,20 @@ export class HuiViewVisibilityEditor extends LitElement {
</p>
${this._sortedUsers(this._users).map(
(user) => html`
<paper-icon-item>
<mwc-list-item graphic="avatar" hasMeta>
<ha-user-badge
slot="item-icon"
slot="graphic"
.hass=${this.hass}
.user=${user}
></ha-user-badge>
<paper-item-body>${user.name}</paper-item-body>
<span>${user.name}</span>
<ha-switch
slot="meta"
.userId=${user.id}
@change=${this.valChange}
.checked=${this.checkUser(user.id)}
></ha-switch>
</paper-icon-item>
</mwc-list-item>
`
)}
`;

2
src/panels/profile/ha-panel-profile.ts
View File

@ -1,8 +1,6 @@
import "@material/mwc-button";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property, state } from "lit/decorators";

53
src/panels/profile/ha-pick-dashboard-row.ts
View File

@ -1,12 +1,11 @@
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../components/ha-paper-dropdown-menu";
import "../../components/ha-settings-row";
import { fetchDashboards, LovelaceDashboard } from "../../data/lovelace";
import { setDefaultPanel } from "../../data/panel";
import { HomeAssistant } from "../../types";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
@customElement("ha-pick-dashboard-row")
class HaPickDashboardRow extends LitElement {
@ -30,36 +29,30 @@ class HaPickDashboardRow extends LitElement {
<span slot="description">
${this.hass.localize("ui.panel.profile.dashboard.description")}
</span>
<ha-paper-dropdown-menu
<mwc-select
.label=${this.hass.localize(
"ui.panel.profile.dashboard.dropdown_label"
)}
dynamic-align
.disabled=${!this._dashboards.length}
.value=${this.hass.defaultPanel}
@selected=${this._dashboardChanged}
>
<paper-listbox
slot="dropdown-content"
.selected=${this.hass.defaultPanel}
@iron-select=${this._dashboardChanged}
attr-for-selected="url-path"
>
<paper-item url-path="lovelace"
>${this.hass.localize(
"ui.panel.profile.dashboard.default_dashboard_label"
)}</paper-item
>
${this._dashboards.map((dashboard) => {
if (!this.hass.user!.is_admin && dashboard.require_admin) {
return "";
}
return html`
<paper-item url-path=${dashboard.url_path}
>${dashboard.title}</paper-item
>
`;
})}
</paper-listbox>
</ha-paper-dropdown-menu>
<mwc-list-item value="lovelace">
${this.hass.localize(
"ui.panel.profile.dashboard.default_dashboard_label"
)}
</mwc-list-item>
${this._dashboards.map((dashboard) => {
if (!this.hass.user!.is_admin && dashboard.require_admin) {
return "";
}
return html`
<mwc-list-item .value=${dashboard.url_path}>
${dashboard.title}
</mwc-list-item>
`;
})}
</mwc-select>
</ha-settings-row>
`;
}
@ -68,8 +61,8 @@ class HaPickDashboardRow extends LitElement {
this._dashboards = await fetchDashboards(this.hass);
}
private _dashboardChanged(ev: CustomEvent) {
const urlPath = ev.detail.item.getAttribute("url-path");
private _dashboardChanged(ev) {
const urlPath = ev.target.value;
if (!urlPath || urlPath === this.hass.defaultPanel) {
return;
}

111
src/panels/profile/ha-pick-language-row.js
View File

@ -1,111 +0,0 @@
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";
import "../../components/ha-paper-dropdown-menu";
import "../../components/ha-settings-row";
import { EventsMixin } from "../../mixins/events-mixin";
import LocalizeMixin from "../../mixins/localize-mixin";
/*
* @appliesMixin LocalizeMixin
* @appliesMixin EventsMixin
*/
class HaPickLanguageRow extends LocalizeMixin(EventsMixin(PolymerElement)) {
static get template() {
return html`
<style>
a {
color: var(--primary-color);
}
paper-item {
direction: ltr;
}
paper-item[is-rtl] {
direction: rtl;
}
</style>
<ha-settings-row narrow="[[narrow]]">
<span slot="heading"
>[[localize('ui.panel.profile.language.header')]]</span
>
<span slot="description">
<a
href="https://developers.home-assistant.io/docs/en/internationalization_translation.html"
target="_blank"
rel="noreferrer"
>[[localize('ui.panel.profile.language.link_promo')]]</a
>
</span>
<ha-paper-dropdown-menu
label="[[localize('ui.panel.profile.language.dropdown_label')]]"
dynamic-align=""
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="language-tag"
selected="{{languageSelection}}"
>
<template is="dom-repeat" items="[[languages]]">
<paper-item language-tag$="[[item.key]]" is-rtl$="[[item.isRTL]]">
[[item.nativeName]]
</paper-item>
</template>
</paper-listbox>
</ha-paper-dropdown-menu>
</ha-settings-row>
`;
}
static get properties() {
return {
hass: Object,
narrow: Boolean,
languageSelection: {
type: String,
observer: "languageSelectionChanged",
},
languages: {
type: Array,
computed: "computeLanguages(hass)",
},
};
}
static get observers() {
return ["setLanguageSelection(language)"];
}
computeLanguages(hass) {
if (!hass || !hass.translationMetadata) {
return [];
}
const translations = hass.translationMetadata.translations;
return Object.keys(translations).map((key) => ({
key,
...translations[key],
}));
}
setLanguageSelection(language) {
this.languageSelection = language;
}
languageSelectionChanged(newVal) {
// Only fire event if language was changed. This prevents select updates when
// responding to hass changes.
if (newVal !== this.hass.language) {
this.fire("hass-language-select", newVal);
}
}
ready() {
super.ready();
if (this.hass && this.hass.locale && this.hass.locale.language) {
this.setLanguageSelection(this.hass.locale.language);
}
}
}
customElements.define("ha-pick-language-row", HaPickLanguageRow);

87
src/panels/profile/ha-pick-language-row.ts Normal file
View File

@ -0,0 +1,87 @@
import { css, html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-settings-row";
import { HomeAssistant, Translation } from "../../types";
import "@material/mwc-select/mwc-select";
import "@material/mwc-list/mwc-list-item";
@customElement("ha-pick-language-row")
export class HaPickLanguageRow extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public narrow!: boolean;
@state() private _languages: (Translation & { key: string })[] = [];
protected firstUpdated(changedProps: PropertyValues) {
super.firstUpdated(changedProps);
this._computeLanguages();
}
protected render() {
return html`
<ha-settings-row .narrow=${this.narrow}>
<span slot="heading"
>${this.hass.localize("ui.panel.profile.language.header")}</span
>
<span slot="description">
<a
href="https://developers.home-assistant.io/docs/en/internationalization_translation.html"
target="_blank"
rel="noreferrer"
>${this.hass.localize("ui.panel.profile.language.link_promo")}</a
>
</span>
<mwc-select
.label=${this.hass.localize(
"ui.panel.profile.language.dropdown_label"
)}
.value=${this.hass.locale.language}
@selected=${this._languageSelectionChanged}
>
${this._languages.map(
(language) => html`<mwc-list-item
.value=${language.key}
rtl=${language.isRTL}
>
${language.nativeName}
</mwc-list-item>`
)}
</mwc-select>
</ha-settings-row>
`;
}
private _computeLanguages() {
if (!this.hass.translationMetadata?.translations) {
return;
}
this._languages = Object.keys(
this.hass.translationMetadata.translations
).map((key) => ({
key,
...this.hass.translationMetadata.translations[key],
}));
}
private _languageSelectionChanged(ev) {
// Only fire event if language was changed. This prevents select updates when
// responding to hass changes.
if (ev.target.value !== this.hass.language) {
fireEvent(this, "hass-language-select", ev.target.value);
}
}
static styles = css`
a {
color: var(--primary-color);
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-pick-language-row": HaPickLanguageRow;
}
}

63
src/panels/profile/ha-pick-number-format-row.ts
View File

@ -1,11 +1,10 @@
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 { html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { formatNumber } from "../../common/number/format_number";
import "../../components/ha-card";
import "../../components/ha-paper-dropdown-menu";
import "../../components/ha-settings-row";
import { NumberFormat } from "../../data/translation";
import { HomeAssistant } from "../../types";
@ -25,47 +24,39 @@ class NumberFormatRow extends LitElement {
<span slot="description">
${this.hass.localize("ui.panel.profile.number_format.description")}
</span>
<ha-paper-dropdown-menu
label=${this.hass.localize(
<mwc-select
.label=${this.hass.localize(
"ui.panel.profile.number_format.dropdown_label"
)}
dynamic-align
.disabled=${this.hass.locale === undefined}
.value=${this.hass.locale.number_format}
@selected=${this._handleFormatSelection}
>
<paper-listbox
slot="dropdown-content"
.selected=${this.hass.locale.number_format}
@iron-select=${this._handleFormatSelection}
attr-for-selected="format"
>
${Object.values(NumberFormat).map((format) => {
const formattedNumber = formatNumber(1234567.89, {
...this.hass.locale,
number_format: format,
});
const value = this.hass.localize(
`ui.panel.profile.number_format.formats.${format}`
);
const twoLine = value.slice(value.length - 2) !== "89"; // Display explicit number formats on one line
return html`
<paper-item .format=${format} .label=${value}>
<paper-item-body ?two-line=${twoLine}>
<div>${value}</div>
${twoLine
? html`<div secondary>${formattedNumber}</div>`
: ""}
</paper-item-body>
</paper-item>
`;
})}
</paper-listbox>
</ha-paper-dropdown-menu>
${Object.values(NumberFormat).map((format) => {
const formattedNumber = formatNumber(1234567.89, {
...this.hass.locale,
number_format: format,
});
const value = this.hass.localize(
`ui.panel.profile.number_format.formats.${format}`
);
const twoLine = value.slice(value.length - 2) !== "89"; // Display explicit number formats on one line
return html`
<mwc-list-item .value=${format} .twoline=${twoLine}>
<span>${value}</span>
${twoLine
? html`<span slot="secondary">${formattedNumber}</span>`
: ""}
</mwc-list-item>
`;
})}
</mwc-select>
</ha-settings-row>
`;
}
private async _handleFormatSelection(ev: CustomEvent) {
fireEvent(this, "hass-number-format-select", ev.detail.item.format);
private async _handleFormatSelection(ev) {
fireEvent(this, "hass-number-format-select", ev.target.value);
}
}

36
src/panels/profile/ha-pick-theme-row.ts
View File

@ -1,7 +1,5 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResultGroup,
@ -13,7 +11,6 @@ import {
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-formfield";
import "../../components/ha-paper-dropdown-menu";
import "../../components/ha-radio";
import type { HaRadio } from "../../components/ha-radio";
import "../../components/ha-settings-row";
@ -23,6 +20,8 @@ import {
} from "../../resources/ha-style";
import { HomeAssistant } from "../../types";
import { documentationUrl } from "../../util/documentation-url";
import "@material/mwc-select/mwc-select";
import "@material/mwc-list/mwc-list-item";
@customElement("ha-pick-theme-row")
export class HaPickThemeRow extends LitElement {
@ -63,22 +62,17 @@ export class HaPickThemeRow extends LitElement {
${this.hass.localize("ui.panel.profile.themes.link_promo")}
</a>
</span>
<ha-paper-dropdown-menu
<mwc-select
.label=${this.hass.localize("ui.panel.profile.themes.dropdown_label")}
dynamic-align
.disabled=${!hasThemes}
.value=${this.hass.selectedTheme?.theme || "Backend-selected"}
@selected=${this._handleThemeSelection}
>
<paper-listbox
slot="dropdown-content"
.selected=${this.hass.selectedTheme?.theme || "Backend-selected"}
attr-for-selected="theme"
@iron-select=${this._handleThemeSelection}
>
${this._themeNames.map(
(theme) => html`<paper-item .theme=${theme}>${theme}</paper-item>`
)}
</paper-listbox>
</ha-paper-dropdown-menu>
${this._themeNames.map(
(theme) =>
html`<mwc-list-item .value=${theme}>${theme}</mwc-list-item>`
)}
</mwc-select>
</ha-settings-row>
${curTheme === "default" || this._supportsModeSelection(curTheme)
? html` <div class="inputs">
@ -91,7 +85,7 @@ export class HaPickThemeRow extends LitElement {
@change=${this._handleDarkMode}
name="dark_mode"
value="auto"
?checked=${themeSettings?.dark === undefined}
.checked=${themeSettings?.dark === undefined}
></ha-radio>
</ha-formfield>
<ha-formfield
@ -103,7 +97,7 @@ export class HaPickThemeRow extends LitElement {
@change=${this._handleDarkMode}
name="dark_mode"
value="light"
?checked=${themeSettings?.dark === false}
.checked=${themeSettings?.dark === false}
>
</ha-radio>
</ha-formfield>
@ -116,7 +110,7 @@ export class HaPickThemeRow extends LitElement {
@change=${this._handleDarkMode}
name="dark_mode"
value="dark"
?checked=${themeSettings?.dark === true}
.checked=${themeSettings?.dark === true}
>
</ha-radio>
</ha-formfield>
@ -195,8 +189,8 @@ export class HaPickThemeRow extends LitElement {
fireEvent(this, "settheme", { dark });
}
private _handleThemeSelection(ev: CustomEvent) {
const theme = ev.detail.item.theme;
private _handleThemeSelection(ev) {
const theme = ev.target.value;
if (theme === "Backend-selected") {
if (this.hass.selectedTheme?.theme) {
fireEvent(this, "settheme", {

51
src/panels/profile/ha-pick-time-format-row.ts
View File

@ -1,14 +1,13 @@
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { formatTime } from "../../common/datetime/format_time";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-card";
import "../../components/ha-paper-dropdown-menu";
import "../../components/ha-settings-row";
import { TimeFormat } from "../../data/translation";
import { HomeAssistant } from "../../types";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
@customElement("ha-pick-time-format-row")
class TimeFormatRow extends LitElement {
@ -26,42 +25,34 @@ class TimeFormatRow extends LitElement {
<span slot="description">
${this.hass.localize("ui.panel.profile.time_format.description")}
</span>
<ha-paper-dropdown-menu
<mwc-select
.label=${this.hass.localize(
"ui.panel.profile.time_format.dropdown_label"
)}
dynamic-align
.disabled=${this.hass.locale === undefined}
.value=${this.hass.locale.time_format}
@selected=${this._handleFormatSelection}
>
<paper-listbox
slot="dropdown-content"
.selected=${this.hass.locale.time_format}
@iron-select=${this._handleFormatSelection}
attr-for-selected="format"
>
${Object.values(TimeFormat).map((format) => {
const formattedTime = formatTime(date, {
...this.hass.locale,
time_format: format,
});
const value = this.hass.localize(
`ui.panel.profile.time_format.formats.${format}`
);
return html` <paper-item .format=${format} .label=${value}>
<paper-item-body two-line>
<div>${value}</div>
<div secondary>${formattedTime}</div>
</paper-item-body>
</paper-item>`;
})}
</paper-listbox>
</ha-paper-dropdown-menu>
${Object.values(TimeFormat).map((format) => {
const formattedTime = formatTime(date, {
...this.hass.locale,
time_format: format,
});
const value = this.hass.localize(
`ui.panel.profile.time_format.formats.${format}`
);
return html`<mwc-list-item .value=${format} twoline>
<span>${value}</span>
<span slot="secondary">${formattedTime}</span>
</mwc-list-item>`;
})}
</mwc-select>
</ha-settings-row>
`;
}
private async _handleFormatSelection(ev: CustomEvent) {
fireEvent(this, "hass-time-format-select", ev.detail.item.format);
private async _handleFormatSelection(ev) {
fireEvent(this, "hass-time-format-select", ev.target.value);
}
}