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

mwc-select -> ha-select (#11806)

Browse Source
This commit is contained in:
Bram Kragten 2022-02-23 19:59:36 +01:00 committed by GitHub
parent 87290c4330
commit 1719d062b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
62 changed files with 308 additions and 269 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,4 @@
import "@material/mwc-button";
import "@material/mwc-select";
import "@material/mwc-list/mwc-list-item";
import {
css,
@ -14,6 +13,7 @@ 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";
import "../../../../src/components/ha-select";
import {
HassioAddonDetails,
HassioAddonSetOptionParams,
@ -57,7 +57,7 @@ class HassioAddonAudio extends LitElement {
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""}
${this._inputDevices &&
html`<mwc-select
html`<ha-select
.label=${this.supervisor.localize(
"addon.configuration.audio.input"
)}
@ -74,9 +74,9 @@ class HassioAddonAudio extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>`}
</ha-select>`}
${this._outputDevices &&
html`<mwc-select
html`<ha-select
.label=${this.supervisor.localize(
"addon.configuration.audio.output"
)}
@ -93,7 +93,7 @@ class HassioAddonAudio extends LitElement {
>
`
)}
</mwc-select>`}
</ha-select>`}
</div>
<div class="card-actions">
<ha-progress-button @click=${this._saveSettings}>
@ -119,10 +119,10 @@ class HassioAddonAudio extends LitElement {
.card-actions {
text-align: right;
}
mwc-select {
ha-select {
width: 100%;
}
mwc-select:last-child {
ha-select:last-child {
margin-top: 8px;
}
`,

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

@ -1,11 +1,11 @@
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";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/ha-circular-progress";
import "../../../../src/components/ha-markdown";
import "../../../../src/components/ha-select";
import {
extractApiErrorMessage,
ignoreSupervisorError,
@ -89,7 +89,7 @@ class HassioDatadiskDialog extends LitElement {
)}
<br /><br />
<mwc-select
<ha-select
.label=${this.dialogParams.supervisor.localize(
"dialog.datadisk_move.select_device"
)}
@ -102,7 +102,7 @@ class HassioDatadiskDialog extends LitElement {
>${device}</mwc-list-item
>`
)}
</mwc-select>
</ha-select>
`
: this.devices === undefined
? this.dialogParams.supervisor.localize(
@ -161,7 +161,7 @@ class HassioDatadiskDialog extends LitElement {
haStyle,
haStyleDialog,
css`
mwc-select {
ha-select {
width: 100%;
}
ha-circular-progress {

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

@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
import "../../../src/components/buttons/ha-progress-button";
import "../../../src/components/ha-alert";
import "../../../src/components/ha-card";
import "../../../src/components/ha-select";
import { extractApiErrorMessage } from "../../../src/data/hassio/common";
import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
import { Supervisor } from "../../../src/data/supervisor/supervisor";
@ -70,7 +71,7 @@ class HassioSupervisorLog extends LitElement {
: ""}
${this.hass.userData?.showAdvanced
? html`
<mwc-select
<ha-select
.label=${this.supervisor.localize("system.log.log_provider")}
@selected=${this._setLogProvider}
.value=${this._selectedLogProvider}
@ -82,7 +83,7 @@ class HassioSupervisorLog extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
`
: ""}
@ -145,7 +146,7 @@ class HassioSupervisorLog extends LitElement {
pre {
white-space: pre-wrap;
}
mwc-select {
ha-select {
width: 100%;
margin-bottom: 4px;
}

8
src/components/device/ha-device-automation-picker.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
@ -8,6 +7,7 @@ import {
deviceAutomationsEqual,
} from "../../data/device_automation";
import { HomeAssistant } from "../../types";
import "../ha-select";
const NO_AUTOMATION_KEY = "NO_AUTOMATION";
const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
@ -90,7 +90,7 @@ export abstract class HaDeviceAutomationPicker<
}
const value = this._value;
return html`
<mwc-select
<ha-select
.label=${this.label}
.value=${value}
@selected=${this._automationChanged}
@ -113,7 +113,7 @@ export abstract class HaDeviceAutomationPicker<
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
`;
}
@ -167,7 +167,7 @@ export abstract class HaDeviceAutomationPicker<
static get styles(): CSSResultGroup {
return css`
mwc-select {
ha-select {
width: 100%;
margin-top: 4px;
}

8
src/components/ha-base-time-input.ts
View File

@ -1,6 +1,6 @@
import { LitElement, html, TemplateResult, css } from "lit";
import { customElement, property } from "lit/decorators";
import "@material/mwc-select/mwc-select";
import "./ha-select";
import "@material/mwc-list/mwc-list-item";
import "./ha-textfield";
import { fireEvent } from "../common/dom/fire_event";
@ -193,7 +193,7 @@ export class HaBaseTimeInput extends LitElement {
: ""}
${this.format === 24
? ""
: html`<mwc-select
: html`<ha-select
.required=${this.required}
.value=${this.amPm}
.disabled=${this.disabled}
@ -205,7 +205,7 @@ export class HaBaseTimeInput extends LitElement {
>
<mwc-list-item value="AM">AM</mwc-list-item>
<mwc-list-item value="PM">PM</mwc-list-item>
</mwc-select>`}
</ha-select>`}
</div>
`;
}
@ -280,7 +280,7 @@ export class HaBaseTimeInput extends LitElement {
ha-textfield:last-child {
--text-field-border-top-right-radius: var(--mdc-shape-medium);
}
mwc-select {
ha-select {
--mdc-shape-small: 0;
width: 85px;
}

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

@ -1,5 +1,5 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "./ha-select";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -24,7 +24,7 @@ class HaBluePrintPicker extends LitElement {
@property({ type: Boolean }) public disabled = false;
public open() {
const select = this.shadowRoot?.querySelector("mwc-select");
const select = this.shadowRoot?.querySelector("ha-select");
if (select) {
// @ts-expect-error
select.menuOpen = true;
@ -49,7 +49,7 @@ class HaBluePrintPicker extends LitElement {
return html``;
}
return html`
<mwc-select
<ha-select
.label=${this.label ||
this.hass.localize("ui.components.blueprint-picker.label")}
fixedMenuPosition
@ -71,7 +71,7 @@ class HaBluePrintPicker extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
`;
}
@ -101,7 +101,7 @@ class HaBluePrintPicker extends LitElement {
:host {
display: inline-block;
}
mwc-select {
ha-select {
width: 100%;
min-width: 200px;
display: block;

1
src/components/ha-form/ha-form-multi_select.ts
View File

@ -1,4 +1,3 @@
import "@material/mwc-select/mwc-select";
import { mdiMenuDown, mdiMenuUp } from "@mdi/js";
import {
css,

19
src/components/ha-form/ha-form-select.ts
View File

@ -1,14 +1,13 @@
import "@material/mwc-select";
import type { Select } from "@material/mwc-select";
import "@material/mwc-list/mwc-list-item";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import "../ha-radio";
import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./types";
import { stopPropagation } from "../../common/dom/stop_propagation";
import "../ha-radio";
import type { HaRadio } from "../ha-radio";
import "../ha-select";
import type { HaSelect } from "../ha-select";
import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./types";
@customElement("ha-form-select")
export class HaFormSelect extends LitElement implements HaFormElement {
@ -20,7 +19,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
@property({ type: Boolean }) public disabled = false;
@query("mwc-select", true) private _input?: HTMLElement;
@query("ha-select", true) private _input?: HTMLElement;
public focus() {
if (this._input) {
@ -50,7 +49,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
}
return html`
<mwc-select
<ha-select
fixedMenuPosition
naturalMenuWidth
.label=${this.label}
@ -67,13 +66,13 @@ export class HaFormSelect extends LitElement implements HaFormElement {
<mwc-list-item .value=${value}>${label}</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
`;
}
private _valueChanged(ev: CustomEvent) {
ev.stopPropagation();
let value: string | undefined = (ev.target as Select | HaRadio).value;
let value: string | undefined = (ev.target as HaSelect | HaRadio).value;
if (value === this.data) {
return;
@ -90,7 +89,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
static get styles(): CSSResultGroup {
return css`
mwc-select,
ha-select,
mwc-formfield {
display: block;
}

1
src/components/ha-qr-scanner.ts
View File

@ -1,6 +1,5 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import { mdiCamera } from "@mdi/js";
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";

47
src/components/ha-select.ts Normal file
View File

@ -0,0 +1,47 @@
import { SelectBase } from "@material/mwc-select/mwc-select-base";
import { styles } from "@material/mwc-select/mwc-select.css";
import { html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { debounce } from "../common/util/debounce";
import { nextRender } from "../common/util/render-status";
@customElement("ha-select")
export class HaSelect extends SelectBase {
// @ts-ignore
@property({ type: Boolean }) public icon?: boolean;
protected override renderLeadingIcon() {
if (!this.icon) {
return nothing;
}
return html`<span class="mdc-select__icon"
><slot name="icon"></slot
></span>`;
}
static override styles = [styles];
connectedCallback() {
super.connectedCallback();
window.addEventListener("translations-updated", this._translationsUpdated);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener(
"translations-updated",
this._translationsUpdated
);
}
private _translationsUpdated = debounce(async () => {
await nextRender();
this.layoutOptions();
}, 500);
}
declare global {
interface HTMLElementTagNameMap {
"ha-select": HaSelect;
}
}

10
src/components/ha-selector/ha-selector-select.ts
View File

@ -1,11 +1,11 @@
import "@material/mwc-list/mwc-list-item";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { stopPropagation } from "../../common/dom/stop_propagation";
import { SelectOption, SelectSelector } from "../../data/selector";
import { HomeAssistant } from "../../types";
import "@material/mwc-select/mwc-select";
import "@material/mwc-list/mwc-list-item";
import "../ha-select";
@customElement("ha-selector-select")
export class HaSelectSelector extends LitElement {
@ -22,7 +22,7 @@ export class HaSelectSelector extends LitElement {
@property({ type: Boolean }) public disabled = false;
protected render() {
return html`<mwc-select
return html`<ha-select
fixedMenuPosition
naturalMenuWidth
.label=${this.label}
@ -38,7 +38,7 @@ export class HaSelectSelector extends LitElement {
return html`<mwc-list-item .value=${value}>${label}</mwc-list-item>`;
})}
</mwc-select>`;
</ha-select>`;
}
private _valueChanged(ev) {
@ -53,7 +53,7 @@ export class HaSelectSelector extends LitElement {
static get styles(): CSSResultGroup {
return css`
mwc-select {
ha-select {
width: 100%;
}
`;

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

@ -1,9 +1,10 @@
import "@material/mwc-select";
import "@material/mwc-list/mwc-list-item";
import { css, html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { LocalStorage } from "../../common/decorators/local-storage";
import { fireEvent } from "../../common/dom/fire_event";
import { stopPropagation } from "../../common/dom/stop_propagation";
import { fetchCloudStatus, updateCloudPref } from "../../data/cloud";
import {
CloudTTSInfo,
@ -15,12 +16,11 @@ import {
MediaPlayerBrowseAction,
MediaPlayerItem,
} from "../../data/media-player";
import { HomeAssistant } from "../../types";
import "../ha-textarea";
import { buttonLinkStyle } from "../../resources/styles";
import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
import { LocalStorage } from "../../common/decorators/local-storage";
import { stopPropagation } from "../../common/dom/stop_propagation";
import { buttonLinkStyle } from "../../resources/styles";
import { HomeAssistant } from "../../types";
import "../ha-select";
import "../ha-textarea";
export interface TtsMediaPickedEvent {
item: MediaPlayerItem;
@ -103,7 +103,7 @@ class BrowseMediaTTS extends LitElement {
return html`
<div class="cloud-options">
<mwc-select
<ha-select
fixedMenuPosition
naturalMenuWidth
.label=${this.hass.localize(
@ -117,9 +117,9 @@ class BrowseMediaTTS extends LitElement {
([key, label]) =>
html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
)}
</mwc-select>
</ha-select>
<mwc-select
<ha-select
fixedMenuPosition
naturalMenuWidth
.label=${this.hass.localize("ui.components.media-browser.tts.gender")}
@ -131,7 +131,7 @@ class BrowseMediaTTS extends LitElement {
([key, label]) =>
html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
)}
</mwc-select>
</ha-select>
</div>
`;
}
@ -256,7 +256,7 @@ class BrowseMediaTTS extends LitElement {
display: flex;
justify-content: space-between;
}
.cloud-options mwc-select {
.cloud-options ha-select {
width: 48%;
}
ha-textarea {

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

@ -1,3 +1,4 @@
import "@material/mwc-list/mwc-list-item";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -5,9 +6,8 @@ import { fireEvent } from "../../common/dom/fire_event";
import { stringCompare } from "../../common/string/compare";
import { fetchUsers, User } from "../../data/user";
import { HomeAssistant } from "../../types";
import "../ha-select";
import "./ha-user-badge";
import "@material/mwc-select/mwc-select";
import "@material/mwc-list/mwc-list-item";
class HaUserPicker extends LitElement {
public hass?: HomeAssistant;
@ -34,7 +34,7 @@ class HaUserPicker extends LitElement {
protected render(): TemplateResult {
return html`
<mwc-select
<ha-select
.label=${this.label}
.disabled=${this.disabled}
.value=${this.value}
@ -58,7 +58,7 @@ class HaUserPicker extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
`;
}

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

@ -1,3 +1,4 @@
import "@material/mwc-list/mwc-list-item";
import {
css,
CSSResultGroup,
@ -9,9 +10,11 @@ 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-climate-control";
import "../../../components/ha-select";
import "../../../components/ha-slider";
import "../../../components/ha-switch";
import {
@ -26,9 +29,6 @@ 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;
@ -168,7 +168,7 @@ class MoreInfoClimate extends LitElement {
<div class="container-hvac_modes">
<div class="controls">
<mwc-select
<ha-select
.label=${hass.localize("ui.card.climate.operation")}
.value=${stateObj.state}
fixedMenuPosition
@ -186,14 +186,14 @@ class MoreInfoClimate extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
</div>
</div>
${supportPresetMode && stateObj.attributes.preset_modes
? html`
<div class="container-preset_modes">
<mwc-select
<ha-select
.label=${hass.localize("ui.card.climate.preset_mode")}
.value=${stateObj.attributes.preset_mode}
fixedMenuPosition
@ -210,14 +210,14 @@ class MoreInfoClimate extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
</div>
`
: ""}
${supportFanMode && stateObj.attributes.fan_modes
? html`
<div class="container-fan_list">
<mwc-select
<ha-select
.label=${hass.localize("ui.card.climate.fan_mode")}
.value=${stateObj.attributes.fan_mode}
fixedMenuPosition
@ -234,14 +234,14 @@ class MoreInfoClimate extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
</div>
`
: ""}
${supportSwingMode && stateObj.attributes.swing_modes
? html`
<div class="container-swing_list">
<mwc-select
<ha-select
.label=${hass.localize("ui.card.climate.swing_mode")}
.value=${stateObj.attributes.swing_mode}
fixedMenuPosition
@ -254,7 +254,7 @@ class MoreInfoClimate extends LitElement {
<mwc-list-item .value=${mode}>${mode}</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
</div>
`
: ""}
@ -427,7 +427,7 @@ class MoreInfoClimate extends LitElement {
color: var(--primary-text-color);
}
mwc-select {
ha-select {
width: 100%;
margin-top: 8px;
}

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

@ -1,3 +1,4 @@
import "@material/mwc-list/mwc-list-item";
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
@ -8,12 +9,11 @@ import "../../../components/ha-attributes";
import "../../../components/ha-icon";
import "../../../components/ha-icon-button";
import "../../../components/ha-labeled-slider";
import "../../../components/ha-select";
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
@ -37,7 +37,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
display: block;
}
mwc-select {
ha-select {
width: 100%;
}
</style>
@ -57,7 +57,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
</div>
<div class="container-preset_modes">
<mwc-select
<ha-select
label="[[localize('ui.card.fan.preset_mode')]]"
value="[[stateObj.attributes.preset_mode]]"
on-selected="presetModeChanged"
@ -71,7 +71,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
>
<mwc-list-item value="[[item]]">[[item]]</mwc-list-item>
</template>
</mwc-select>
</ha-select>
</div>
<div class="container-oscillating">

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

@ -170,11 +170,7 @@ class MoreInfoHumidifier extends LitElement {
color: var(--primary-text-color);
}
mwc-select {
width: 100%;
}
ha-slider {
ha-select {
width: 100%;
}

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

@ -1,5 +1,4 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import { mdiPalette } from "@mdi/js";
import {
css,
@ -18,6 +17,7 @@ import "../../../components/ha-button-toggle-group";
import "../../../components/ha-color-picker";
import "../../../components/ha-icon-button";
import "../../../components/ha-labeled-slider";
import "../../../components/ha-select";
import {
getLightCurrentModeRgbColor,
LightColorModes,
@ -208,7 +208,7 @@ class MoreInfoLight extends LitElement {
this.stateObj!.attributes.effect_list?.length
? html`
<hr />
<mwc-select
<ha-select
.label=${this.hass.localize("ui.card.light.effect")}
.value=${this.stateObj.attributes.effect || ""}
fixedMenuPosition
@ -223,7 +223,7 @@ class MoreInfoLight extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
`
: ""}
`

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

@ -1,6 +1,5 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import {
mdiLoginVariant,
mdiMusicNote,
@ -17,6 +16,7 @@ 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-select";
import "../../../components/ha-slider";
import "../../../components/ha-svg-icon";
import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
@ -135,12 +135,9 @@ class MoreInfoMediaPlayer extends LitElement {
stateObj.attributes.source_list?.length
? html`
<div class="source-input">
<ha-svg-icon
class="source-input"
.path=${mdiLoginVariant}
></ha-svg-icon>
<mwc-select
<ha-select
.label=${this.hass.localize("ui.card.media_player.source")}
icon
.value=${stateObj.attributes.source!}
@selected=${this._handleSourceChanged}
fixedMenuPosition
@ -153,7 +150,8 @@ class MoreInfoMediaPlayer extends LitElement {
<mwc-list-item .value=${source}>${source}</mwc-list-item>
`
)}
</mwc-select>
<ha-svg-icon .path=${mdiLoginVariant} slot="icon"></ha-svg-icon>
</ha-select>
</div>
`
: ""}
@ -161,10 +159,10 @@ class MoreInfoMediaPlayer extends LitElement {
stateObj.attributes.sound_mode_list?.length
? html`
<div class="sound-input">
<ha-svg-icon .path=${mdiMusicNote}></ha-svg-icon>
<mwc-select
<ha-select
.label=${this.hass.localize("ui.card.media_player.sound_mode")}
.value=${stateObj.attributes.sound_mode!}
icon
fixedMenuPosition
naturalMenuWidth
@selected=${this._handleSoundModeChanged}
@ -175,7 +173,8 @@ class MoreInfoMediaPlayer extends LitElement {
<mwc-list-item .value=${mode}>${mode}</mwc-list-item>
`
)}
</mwc-select>
<ha-svg-icon .path=${mdiMusicNote} slot="icon"></ha-svg-icon>
</ha-select>
</div>
`
: ""}
@ -216,14 +215,8 @@ class MoreInfoMediaPlayer extends LitElement {
justify-content: space-between;
}
.source-input ha-svg-icon,
.sound-input ha-svg-icon {
padding: 7px;
margin-top: 24px;
}
.source-input mwc-select,
.sound-input mwc-select {
.source-input ha-select,
.sound-input ha-select {
margin-left: 10px;
flex-grow: 1;
}

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

@ -1,3 +1,4 @@
import "@material/mwc-list/mwc-list-item";
import {
mdiFan,
mdiHomeMapMarker,
@ -15,6 +16,7 @@ import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes";
import "../../../components/ha-icon";
import "../../../components/ha-icon-button";
import "../../../components/ha-select";
import { UNAVAILABLE } from "../../../data/entity";
import {
VacuumEntity,
@ -29,8 +31,6 @@ 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,7 +173,7 @@ class MoreInfoVacuum extends LitElement {
? html`
<div>
<div class="flex-horizontal">
<mwc-select
<ha-select
.label=${this.hass!.localize(
"ui.dialogs.more_info_control.vacuum.fan_speed"
)}
@ -189,7 +189,7 @@ class MoreInfoVacuum extends LitElement {
<mwc-list-item .value=${mode}>${mode}</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
<div
style="justify-content: center; align-self: center; padding-top: 1.3em"
>

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

@ -1,3 +1,4 @@
import "@material/mwc-list/mwc-list-item";
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import { timeOut } from "@polymer/polymer/lib/utils/async";
import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
@ -6,12 +7,11 @@ 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-select";
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
@ -26,7 +26,7 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
color: var(--primary-text-color);
}
mwc-select {
ha-select {
width: 100%;
}
@ -70,7 +70,7 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
<template is="dom-if" if="[[supportsOperationMode(stateObj)]]">
<div class="container-operation_list">
<div class="controls">
<mwc-select
<ha-select
label="[[localize('ui.card.water_heater.operation')]]"
value="[[stateObj.attributes.operation_mode]]"
on-selected="handleOperationmodeChanged"
@ -86,7 +86,7 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
[[_localizeOperationMode(localize, item)]]
</mwc-list-item>
</template>
</mwc-select>
</ha-select>
</div>
</div>
</template>

2
src/fake_data/provide_hass.ts
View File

@ -3,6 +3,7 @@ import {
applyThemesOnElement,
invalidateThemeCache,
} from "../common/dom/apply_themes_on_element";
import { fireEvent } from "../common/dom/fire_event";
import { computeLocalize } from "../common/translations/localize";
import { DEFAULT_PANEL } from "../data/panel";
import { NumberFormat, TimeFormat } from "../data/translation";
@ -85,6 +86,7 @@ export const provideHass = (
hass().updateHass({
localize: await computeLocalize(elements[0], lang, hass().resources),
});
fireEvent(window, "translations-updated");
}
function updateStates(newStates: HassEntities) {

12
src/panels/config/automation/action/ha-automation-action-row.ts
View File

@ -1,7 +1,5 @@
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
import type { Select } from "@material/mwc-select";
import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -15,6 +13,8 @@ import "../../../../components/ha-alert";
import "../../../../components/ha-button-menu";
import "../../../../components/ha-card";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-select";
import type { HaSelect } from "../../../../components/ha-select";
import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import { Action, getActionType } from "../../../../data/script";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
@ -241,7 +241,7 @@ export default class HaAutomationActionRow extends LitElement {
></ha-yaml-editor>
`
: html`
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.type_select"
)}
@ -254,7 +254,7 @@ export default class HaAutomationActionRow extends LitElement {
<mwc-list-item .value=${opt}>${label}</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
<div @ui-mode-not-available=${this._handleUiModeNotAvailable}>
${dynamicElement(`ha-automation-action-${type}`, {
@ -315,7 +315,7 @@ export default class HaAutomationActionRow extends LitElement {
}
private _typeChanged(ev: CustomEvent) {
const type = (ev.target as Select).value;
const type = (ev.target as HaSelect).value;
if (!type) {
return;
@ -375,7 +375,7 @@ export default class HaAutomationActionRow extends LitElement {
.warning ul {
margin: 4px 0;
}
mwc-select {
ha-select {
margin-bottom: 24px;
}
`,

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

@ -35,7 +35,7 @@ export class HaRepeatAction extends LitElement implements ActionElement {
const type = getType(action);
return html`
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.config.automation.editor.actions.type.repeat.type_select"
)}
@ -51,7 +51,7 @@ export class HaRepeatAction extends LitElement implements ActionElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
${type === "count"
? html`
<ha-textfield
@ -162,7 +162,7 @@ export class HaRepeatAction extends LitElement implements ActionElement {
return [
haStyle,
css`
mwc-select {
ha-select {
margin-top: 8px;
}
`,

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

@ -1,5 +1,3 @@
import "@material/mwc-select";
import type { Select } from "@material/mwc-select";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -8,6 +6,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { stringCompare } from "../../../../common/string/compare";
import type { LocalizeFunc } from "../../../../common/translations/localize";
import "../../../../components/ha-card";
import "../../../../components/ha-select";
import type { HaSelect } from "../../../../components/ha-select";
import "../../../../components/ha-yaml-editor";
import type { Condition } from "../../../../data/automation";
import { haStyle } from "../../../../resources/styles";
@ -86,7 +86,7 @@ export default class HaAutomationConditionEditor extends LitElement {
></ha-yaml-editor>
`
: html`
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.type_select"
)}
@ -99,7 +99,7 @@ export default class HaAutomationConditionEditor extends LitElement {
<mwc-list-item .value=${opt}>${label}</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
<div>
${dynamicElement(
@ -112,7 +112,7 @@ export default class HaAutomationConditionEditor extends LitElement {
}
private _typeChanged(ev: CustomEvent) {
const type = (ev.target as Select).value;
const type = (ev.target as HaSelect).value;
if (!type) {
return;
@ -146,7 +146,7 @@ export default class HaAutomationConditionEditor extends LitElement {
static styles = [
haStyle,
css`
mwc-select {
ha-select {
margin-bottom: 24px;
}
`,

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

@ -1,10 +1,10 @@
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";
import { fireEvent } from "../../../../../common/dom/fire_event";
import { ensureArray } from "../../../../../common/ensure-array";
import "../../../../../components/ha-select";
import type {
AutomationConfig,
Trigger,
@ -50,7 +50,7 @@ export class HaTriggerCondition extends LitElement {
"ui.panel.config.automation.editor.conditions.type.trigger.no_triggers"
);
}
return html`<mwc-select
return html`<ha-select
.label=${this.hass.localize(
"ui.panel.config.automation.editor.conditions.type.trigger.id"
)}
@ -63,7 +63,7 @@ export class HaTriggerCondition extends LitElement {
<mwc-list-item .value=${trigger.id}> ${trigger.id} </mwc-list-item>
`
)}
</mwc-select>`;
</ha-select>`;
}
private _automationUpdated(config?: AutomationConfig) {

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

@ -95,7 +95,7 @@ export class HaManualAutomationEditor extends LitElement {
>`
)}
</p>
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.config.automation.editor.modes.label"
)}
@ -112,7 +112,7 @@ export class HaManualAutomationEditor extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
${this.config.mode && MODES_MAX.includes(this.config.mode)
? html`
<br /><ha-textfield
@ -358,7 +358,7 @@ export class HaManualAutomationEditor extends LitElement {
ha-entity-toggle {
margin-right: 8px;
}
mwc-select,
ha-select,
.max {
margin-top: 16px;
width: 200px;

24
src/panels/config/automation/trigger/ha-automation-trigger-row.ts
View File

@ -1,24 +1,26 @@
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical } from "@mdi/js";
import "@material/mwc-select";
import type { Select } from "@material/mwc-select";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one";
import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stringCompare } from "../../../../common/string/compare";
import { handleStructError } from "../../../../common/structs/handle-errors";
import { LocalizeFunc } from "../../../../common/translations/localize";
import { debounce } from "../../../../common/util/debounce";
import "../../../../components/ha-alert";
import "../../../../components/ha-button-menu";
import "../../../../components/ha-card";
import "../../../../components/ha-alert";
import "../../../../components/ha-textfield";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-select";
import type { HaSelect } from "../../../../components/ha-select";
import "../../../../components/ha-textfield";
import { subscribeTrigger, Trigger } from "../../../../data/automation";
import { validateConfig } from "../../../../data/config";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
@ -36,8 +38,6 @@ import "./types/ha-automation-trigger-time";
import "./types/ha-automation-trigger-time_pattern";
import "./types/ha-automation-trigger-webhook";
import "./types/ha-automation-trigger-zone";
import { debounce } from "../../../../common/util/debounce";
import { validateConfig } from "../../../../data/config";
const OPTIONS = [
"device",
@ -194,7 +194,7 @@ export default class HaAutomationTriggerRow extends LitElement {
></ha-yaml-editor>
`
: html`
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type_select"
)}
@ -207,7 +207,7 @@ export default class HaAutomationTriggerRow extends LitElement {
<mwc-list-item .value=${opt}>${label}</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
${showId
? html`
@ -359,7 +359,7 @@ export default class HaAutomationTriggerRow extends LitElement {
}
private _typeChanged(ev: CustomEvent) {
const type = (ev.target as Select).value;
const type = (ev.target as HaSelect).value;
if (!type) {
return;
@ -456,7 +456,7 @@ export default class HaAutomationTriggerRow extends LitElement {
mwc-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
}
mwc-select {
ha-select {
margin-bottom: 24px;
}
ha-textfield {

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

@ -1,9 +1,9 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
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 "../../../../../components/ha-select";
import { TagTrigger } from "../../../../../data/automation";
import { fetchTags, Tag } from "../../../../../data/tag";
import { HomeAssistant } from "../../../../../types";
@ -29,7 +29,7 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
protected render() {
const { tag_id } = this.trigger;
return html`
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.tag.label"
)}
@ -44,7 +44,7 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
`;
}

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

@ -1,11 +1,11 @@
import "@material/mwc-button";
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";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-card";
import "../../../../components/ha-select";
import "../../../../components/ha-svg-icon";
import "../../../../components/ha-switch";
import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
@ -54,7 +54,7 @@ export class CloudTTSPref extends LitElement {
)}
<br /><br />
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.config.cloud.account.tts.default_language"
)}
@ -66,9 +66,9 @@ export class CloudTTSPref extends LitElement {
([key, label]) =>
html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
)}
</mwc-select>
</ha-select>
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.config.cloud.account.tts.default_gender"
)}
@ -80,7 +80,7 @@ export class CloudTTSPref extends LitElement {
([key, label]) =>
html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
)}
</mwc-select>
</ha-select>
</div>
<div class="card-actions">
<mwc-button @click=${this._openTryDialog}>

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

@ -1,9 +1,8 @@
import "@material/mwc-button";
import "@material/mwc-select";
import "@material/mwc-list/mwc-list-item";
import { mdiPlayCircleOutline, mdiRobot } from "@mdi/js";
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 { LocalStorage } from "../../../../common/decorators/local-storage";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
@ -11,8 +10,9 @@ import { computeStateDomain } from "../../../../common/entity/compute_state_doma
import { computeStateName } from "../../../../common/entity/compute_state_name";
import { supportsFeature } from "../../../../common/entity/supports-feature";
import { createCloseHeading } from "../../../../components/ha-dialog";
import type { HaTextArea } from "../../../../components/ha-textarea";
import "../../../../components/ha-select";
import "../../../../components/ha-textarea";
import type { HaTextArea } from "../../../../components/ha-textarea";
import { showAutomationEditor } from "../../../../data/automation";
import { SUPPORT_PLAY_MEDIA } from "../../../../data/media-player";
import { convertTextToSpeech } from "../../../../data/tts";
@ -74,7 +74,7 @@ export class DialogTryTts extends LitElement {
>
</ha-textarea>
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.config.cloud.account.tts.dialog.target"
)}
@ -103,7 +103,7 @@ export class DialogTryTts extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
</div>
<mwc-button
slot="primaryAction"
@ -215,10 +215,10 @@ export class DialogTryTts extends LitElement {
--mdc-dialog-max-width: 500px;
}
ha-textarea,
mwc-select {
ha-select {
width: 100%;
}
mwc-select {
ha-select {
margin-top: 8px;
}
`,

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

@ -1,7 +1,5 @@
import "../../../components/ha-alert";
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
@ -15,12 +13,14 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import { computeDomain } from "../../../common/entity/compute_domain";
import { domainIcon } from "../../../common/entity/domain_icon";
import "../../../components/ha-alert";
import "../../../components/ha-area-picker";
import "../../../components/ha-expansion-panel";
import "../../../components/ha-icon-picker";
import "../../../components/ha-select";
import "../../../components/ha-switch";
import "../../../components/ha-textfield";
import type { HaSwitch } from "../../../components/ha-switch";
import "../../../components/ha-textfield";
import {
DeviceRegistryEntry,
subscribeDeviceRegistry,
@ -161,7 +161,7 @@ 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`<mwc-select
? html`<ha-select
.label=${this.hass.localize(
"ui.dialogs.entity_registry.editor.device_class"
)}
@ -177,7 +177,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
</mwc-list-item>
`
)}
</mwc-select>`
</ha-select>`
: ""}
<ha-textfield
error-message="Domain needs to stay the same"
@ -420,7 +420,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
padding-bottom: max(env(safe-area-inset-bottom), 8px);
background-color: var(--mdc-theme-surface, #fff);
}
mwc-select {
ha-select {
width: 100%;
}
ha-switch {

4
src/panels/config/integrations/integration-panels/zha/types.ts
View File

@ -1,8 +1,8 @@
import { Select } from "@material/mwc-select";
import { HaSelect } from "../../../../../components/ha-select";
import { Cluster, ZHADevice } from "../../../../../data/zha";
export interface ItemSelectedEvent {
target?: Select;
target?: HaSelect;
}
export interface ZHADeviceRemovedEvent {

8
src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts
View File

@ -1,6 +1,5 @@
import "@material/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
import { mdiHelpCircle } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import {
@ -16,6 +15,7 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation";
import "../../../../../components/buttons/ha-call-service-button";
import "../../../../../components/ha-card";
import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-select";
import "../../../../../components/ha-service-description";
import {
Attribute,
@ -92,7 +92,7 @@ export class ZHAClusterAttributes extends LitElement {
<ha-card class="content">
<div class="attribute-picker">
<mwc-select
<ha-select
.label=${this.hass!.localize(
"ui.panel.config.zha.cluster_attributes.attributes_of_cluster"
)}
@ -110,7 +110,7 @@ export class ZHAClusterAttributes extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
</div>
${this.showHelp
? html`
@ -270,7 +270,7 @@ export class ZHAClusterAttributes extends LitElement {
return [
haStyle,
css`
mwc-select {
ha-select {
margin-top: 16px;
}

8
src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
import { mdiHelpCircle } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import {
@ -15,6 +14,7 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation";
import "../../../../../components/buttons/ha-call-service-button";
import "../../../../../components/ha-card";
import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-select";
import "../../../../../components/ha-service-description";
import {
Cluster,
@ -82,7 +82,7 @@ export class ZHAClusterCommands extends LitElement {
<ha-card class="content">
<div class="command-picker">
<mwc-select
<ha-select
.label=${this.hass!.localize(
"ui.panel.config.zha.cluster_commands.commands_of_cluster"
)}
@ -100,7 +100,7 @@ export class ZHAClusterCommands extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
</div>
${this._showHelp
? html`
@ -206,7 +206,7 @@ export class ZHAClusterCommands extends LitElement {
return [
haStyle,
css`
mwc-select {
ha-select {
margin-top: 16px;
}
.menu {

8
src/panels/config/integrations/integration-panels/zha/zha-clusters.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
import { mdiHelpCircle } from "@mdi/js";
import {
css,
@ -15,6 +14,7 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation";
import "../../../../../components/buttons/ha-call-service-button";
import "../../../../../components/ha-card";
import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-select";
import "../../../../../components/ha-service-description";
import {
Cluster,
@ -78,7 +78,7 @@ export class ZHAClusters extends LitElement {
<ha-card class="content">
<div class="node-picker">
<mwc-select
<ha-select
.label=${this.hass!.localize(
"ui.panel.config.zha.common.clusters"
)}
@ -96,7 +96,7 @@ export class ZHAClusters extends LitElement {
>
`
)}
</mwc-select>
</ha-select>
</div>
${this.showHelp
? html`
@ -137,7 +137,7 @@ export class ZHAClusters extends LitElement {
return [
haStyle,
css`
mwc-select {
ha-select {
margin-top: 16px;
}
.menu {

10
src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts
View File

@ -1,7 +1,6 @@
import "@material/mwc-button/mwc-button";
import { mdiHelpCircle } from "@mdi/js";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select";
import { mdiHelpCircle } from "@mdi/js";
import {
css,
CSSResultGroup,
@ -11,16 +10,17 @@ import {
TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../../../common/dom/stop_propagation";
import "../../../../../components/buttons/ha-call-service-button";
import "../../../../../components/ha-card";
import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-select";
import "../../../../../components/ha-service-description";
import { bindDevices, unbindDevices, ZHADevice } from "../../../../../data/zha";
import { haStyle } from "../../../../../resources/styles";
import { HomeAssistant } from "../../../../../types";
import "../../../ha-config-section";
import { ItemSelectedEvent } from "./types";
import { stopPropagation } from "../../../../../common/dom/stop_propagation";
@customElement("zha-device-binding-control")
export class ZHADeviceBindingControl extends LitElement {
@ -62,7 +62,7 @@ export class ZHADeviceBindingControl extends LitElement {
<ha-card class="content">
<div class="command-picker">
<mwc-select
<ha-select
label="Bindable Devices"
class="menu"
.value=${String(this._bindTargetIndex)}
@ -80,7 +80,7 @@ export class ZHADeviceBindingControl extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
</div>
${this._showHelp
? html`

4
src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts
View File

@ -93,7 +93,7 @@ export class ZHAGroupBindingControl extends LitElement {
<ha-card class="content">
<div class="command-picker">
<mwc-select
<ha-select
.label=${this.hass!.localize(
"ui.panel.config.zha.group_binding.group_picker_label"
)}
@ -110,7 +110,7 @@ export class ZHAGroupBindingControl extends LitElement {
>${group.name}</mwc-list-item
> `
)}
</mwc-select>
</ha-select>
</div>
${this._showHelp
? html`

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

@ -1,11 +1,11 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import { mdiDownload } from "@mdi/js";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultArray, html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { capitalizeFirstLetter } from "../../../../../common/string/capitalize-first-letter";
import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-select";
import {
fetchZWaveJSLogConfig,
setZWaveJSLogLevel,
@ -77,7 +77,7 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
<div class="card-content">
${this._logConfig
? html`
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.config.zwave_js.logs.log_level"
)}
@ -90,7 +90,7 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
<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>
</ha-select>
`
: ""}
</div>

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

@ -1,6 +1,5 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import {
mdiCheckCircle,
mdiCircle,
@ -22,6 +21,7 @@ import memoizeOne from "memoize-one";
import { debounce } from "../../../../../common/util/debounce";
import "../../../../../components/ha-card";
import "../../../../../components/ha-icon-next";
import "../../../../../components/ha-select";
import "../../../../../components/ha-settings-row";
import "../../../../../components/ha-svg-icon";
import "../../../../../components/ha-switch";
@ -286,7 +286,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
return html`
${labelAndDescription}
<div class="flex">
<mwc-select
<ha-select
.disabled=${!item.metadata.writeable}
.value=${item.value}
.key=${id}
@ -299,7 +299,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
<mwc-list-item .value=${key}>${entityState}</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
</div>
`;
}
@ -455,7 +455,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
}
.flex .config-label,
.flex mwc-select {
.flex ha-select {
flex: 1;
}

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

@ -1,8 +1,11 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { createCloseHeading } from "../../../../components/ha-dialog";
import "../../../../components/ha-select";
import {
LovelaceResource,
LovelaceResourcesMutableParams,
@ -11,9 +14,6 @@ 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,7 +102,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
dialogInitialFocus
></paper-input>
<br />
<mwc-select
<ha-select
.label=${this.hass!.localize(
"ui.panel.config.lovelace.resources.detail.type"
)}
@ -139,7 +139,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
</mwc-list-item>
`
: ""}
</mwc-select>
</ha-select>
</div>
</div>
${this._params.resource

6
src/panels/lovelace/components/hui-action-editor.ts
View File

@ -57,7 +57,7 @@ export class HuiActionEditor extends LitElement {
return html`
<div class="dropdown">
<mwc-select
<ha-select
.label=${this.label}
.configValue=${"action"}
@selected=${this._actionPicked}
@ -80,7 +80,7 @@ export class HuiActionEditor extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
${this.tooltipText
? html`
<ha-help-tooltip .label=${this.tooltipText}></ha-help-tooltip>
@ -199,7 +199,7 @@ export class HuiActionEditor extends LitElement {
right: 40px;
top: 16px;
}
mwc-select,
ha-select,
ha-textfield {
width: 100%;
}

12
src/panels/lovelace/components/hui-theme-select-editor.ts
View File

@ -1,11 +1,11 @@
import "@material/mwc-button";
import "@material/mwc-list/mwc-list-item";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import { HomeAssistant } from "../../../types";
import "@material/mwc-select/mwc-select";
import "@material/mwc-list/mwc-list-item";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import "../../../components/ha-select";
import { HomeAssistant } from "../../../types";
@customElement("hui-theme-select-editor")
export class HuiThemeSelectEditor extends LitElement {
@ -17,7 +17,7 @@ export class HuiThemeSelectEditor extends LitElement {
protected render(): TemplateResult {
return html`
<mwc-select
<ha-select
.label=${this.label ||
`${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
@ -41,13 +41,13 @@ export class HuiThemeSelectEditor extends LitElement {
(theme) =>
html`<mwc-list-item .value=${theme}>${theme}</mwc-list-item>`
)}
</mwc-select>
</ha-select>
`;
}
static get styles(): CSSResultGroup {
return css`
mwc-select {
ha-select {
width: 100%;
}
`;

2
src/panels/lovelace/editor/config-elements/config-elements-style.ts
View File

@ -21,7 +21,7 @@ export const configElementStyle = css`
}
hui-theme-select-editor,
hui-action-editor,
mwc-select,
ha-select,
ha-textfield,
ha-icon-picker {
margin-top: 8px;

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

@ -1,5 +1,4 @@
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";
@ -17,6 +16,7 @@ import {
import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-select";
import "../../../../components/ha-textfield";
import type {
LovelaceCardConfig,
@ -156,7 +156,7 @@ export class HuiConditionalCardEditor
></ha-entity-picker>
</div>
<div class="state">
<mwc-select
<ha-select
.value=${cond.state_not !== undefined
? "true"
: "false"}
@ -177,7 +177,7 @@ export class HuiConditionalCardEditor
"ui.panel.lovelace.editor.card.conditional.state_not_equal"
)}
</mwc-list-item>
</mwc-select>
</ha-select>
<ha-textfield
.label="${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.state"
@ -330,7 +330,7 @@ export class HuiConditionalCardEditor
display: flex;
align-items: flex-end;
}
.condition .state mwc-select {
.condition .state ha-select {
margin-right: 16px;
}
.condition .state ha-textfield {

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

@ -1,5 +1,4 @@
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";
@ -10,6 +9,7 @@ import { computeDomain } from "../../../../common/entity/compute_domain";
import { domainIcon } from "../../../../common/entity/domain_icon";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-select";
import "../../../../components/ha-switch";
import { HomeAssistant } from "../../../../types";
import { EntitiesCardEntityConfig } from "../../cards/types";
@ -102,7 +102,7 @@ export class HuiGenericEntityRowEditor
@value-changed=${this._valueChanged}
></ha-icon-picker>
</div>
<mwc-select
<ha-select
label="Secondary Info"
.configValue=${"secondary_info"}
@selected=${this._valueChanged}
@ -132,7 +132,7 @@ export class HuiGenericEntityRowEditor
}
return "";
})}
</mwc-select>
</ha-select>
</div>
`;
}

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

@ -1,5 +1,4 @@
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";
@ -8,6 +7,7 @@ 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-select";
import "../../../../components/ha-switch";
import { ActionConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
@ -155,7 +155,7 @@ export class HuiPictureEntityCardEditor
allow-custom-entity
></ha-entity-picker>
<div class="side-by-side">
<mwc-select
<ha-select
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.camera_view"
)} (${this.hass.localize(
@ -172,7 +172,7 @@ export class HuiPictureEntityCardEditor
(view) =>
html`<mwc-list-item .value=${view}>${view}</mwc-list-item> `
)}
</mwc-select>
</ha-select>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.aspect_ratio"

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

@ -1,5 +1,4 @@
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";
@ -7,6 +6,7 @@ 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-select";
import { ActionConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
import { PictureGlanceCardConfig } from "../../cards/types";
@ -146,7 +146,7 @@ export class HuiPictureGlanceCardEditor
.includeDomains=${includeDomains}
></ha-entity-picker>
<div class="side-by-side">
<mwc-select
<ha-select
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.camera_view"
)} (${this.hass.localize(
@ -163,7 +163,7 @@ export class HuiPictureGlanceCardEditor
(view) =>
html`<mwc-list-item .value=${view}>${view}</mwc-list-item> `
)}
</mwc-select>
</ha-select>
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.aspect_ratio"

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

@ -1,5 +1,4 @@
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";
@ -20,6 +19,7 @@ import { domainIcon } from "../../../../common/entity/domain_icon";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-select";
import "../../../../components/ha-switch";
import { HomeAssistant } from "../../../../types";
import { SensorCardConfig } from "../../cards/types";
@ -142,7 +142,7 @@ export class HuiSensorCardEditor
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-picker>
<mwc-select
<ha-select
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.sensor.graph_type"
)} (${this.hass.localize(
@ -159,7 +159,7 @@ export class HuiSensorCardEditor
(graph) =>
html`<mwc-list-item .value=${graph}>${graph}</mwc-list-item>`
)}
</mwc-select>
</ha-select>
</div>
<div class="side-by-side">
<paper-input

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

@ -1,5 +1,4 @@
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";
@ -21,6 +20,7 @@ import "../../../../components/ha-checkbox";
import "../../../../components/ha-formfield";
import "../../../../components/ha-radio";
import type { HaRadio } from "../../../../components/ha-radio";
import "../../../../components/ha-select";
import { StatisticType } from "../../../../data/history";
import { HomeAssistant } from "../../../../types";
import { StatisticsGraphCardConfig } from "../../cards/types";
@ -120,7 +120,7 @@ export class HuiStatisticsGraphCardEditor
@value-changed=${this._valueChanged}
></paper-input>
<div class="side-by-side">
<mwc-select
<ha-select
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.statistics-graph.period"
)} (${this.hass.localize(
@ -141,7 +141,7 @@ export class HuiStatisticsGraphCardEditor
)}
</mwc-list-item>`
)}
</mwc-select>
</ha-select>
<paper-input
type="number"
.label="${this.hass.localize(

8
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 "@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-select";
import {
fetchConfig,
fetchDashboards,
@ -69,7 +69,7 @@ export class HuiDialogSelectView extends LitElement {
)}
>
${this._params.allowDashboardChange
? html`<mwc-select
? html`<ha-select
.label=${this.hass.localize(
"ui.panel.lovelace.editor.select_view.dashboard_label"
)}
@ -100,7 +100,7 @@ export class HuiDialogSelectView extends LitElement {
>
`;
})}
</mwc-select>`
</ha-select>`
: ""}
${this._config
? this._config.views.length > 1
@ -183,7 +183,7 @@ export class HuiDialogSelectView extends LitElement {
return [
haStyleDialog,
css`
mwc-select {
ha-select {
width: 100%;
}
`,

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

@ -1,5 +1,4 @@
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";
@ -8,6 +7,7 @@ import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { slugify } from "../../../../common/string/slugify";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker";
import "../../../../components/ha-select";
import "../../../../components/ha-switch";
import { LovelaceViewConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
@ -124,7 +124,7 @@ export class HuiViewEditor extends LitElement {
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.lovelace.editor.edit_view.type"
)}
@ -141,7 +141,7 @@ export class HuiViewEditor extends LitElement {
)}
</mwc-list-item>`
)}
</mwc-select>
</ha-select>
</div>
`;
}

8
src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import {
css,
CSSResultGroup,
@ -11,6 +10,7 @@ import {
import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/ha-select";
import { UNAVAILABLE_STATES } from "../../../data/entity";
import { forwardHaptic } from "../../../data/haptics";
import {
@ -65,7 +65,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
.config=${this._config}
hideName
>
<mwc-select
<ha-select
.label=${this._config.name || computeStateName(stateObj)}
.value=${stateObj.state}
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
@ -82,7 +82,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
>`
)
: ""}
</mwc-select>
</ha-select>
</hui-generic-entity-row>
`;
}
@ -93,7 +93,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
display: flex;
align-items: center;
}
mwc-select {
ha-select {
width: 100%;
}
`;

8
src/panels/lovelace/entity-rows/hui-select-entity-row.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import {
css,
CSSResultGroup,
@ -11,6 +10,7 @@ import {
import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/ha-select";
import { UNAVAILABLE } from "../../../data/entity";
import { forwardHaptic } from "../../../data/haptics";
import { SelectEntity, setSelectOption } from "../../../data/select";
@ -62,7 +62,7 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
.config=${this._config}
hideName
>
<mwc-select
<ha-select
.label=${this._config.name || computeStateName(stateObj)}
.value=${stateObj.state}
.disabled=${stateObj.state === UNAVAILABLE}
@ -88,7 +88,7 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
`
)
: ""}
</mwc-select>
</ha-select>
</hui-generic-entity-row>
`;
}
@ -99,7 +99,7 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
display: flex;
align-items: center;
}
mwc-select {
ha-select {
width: 100%;
}
`;

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

@ -1,11 +1,11 @@
import "@material/mwc-list/mwc-list-item";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../components/ha-select";
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 {
@ -29,7 +29,7 @@ class HaPickDashboardRow extends LitElement {
<span slot="description">
${this.hass.localize("ui.panel.profile.dashboard.description")}
</span>
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.profile.dashboard.dropdown_label"
)}
@ -52,7 +52,7 @@ class HaPickDashboardRow extends LitElement {
</mwc-list-item>
`;
})}
</mwc-select>
</ha-select>
</ha-settings-row>
`;
}

8
src/panels/profile/ha-pick-language-row.ts
View File

@ -1,10 +1,10 @@
import "@material/mwc-list/mwc-list-item";
import { css, html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-select";
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 {
@ -33,7 +33,7 @@ export class HaPickLanguageRow extends LitElement {
>${this.hass.localize("ui.panel.profile.language.link_promo")}</a
>
</span>
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.profile.language.dropdown_label"
)}
@ -48,7 +48,7 @@ export class HaPickLanguageRow extends LitElement {
${language.nativeName}
</mwc-list-item>`
)}
</mwc-select>
</ha-select>
</ha-settings-row>
`;
}

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

@ -1,10 +1,10 @@
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-select";
import "../../components/ha-settings-row";
import { NumberFormat } from "../../data/translation";
import { HomeAssistant } from "../../types";
@ -24,7 +24,7 @@ class NumberFormatRow extends LitElement {
<span slot="description">
${this.hass.localize("ui.panel.profile.number_format.description")}
</span>
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.profile.number_format.dropdown_label"
)}
@ -50,7 +50,7 @@ class NumberFormatRow extends LitElement {
</mwc-list-item>
`;
})}
</mwc-select>
</ha-select>
</ha-settings-row>
`;
}

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

@ -1,6 +1,5 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import {
css,
CSSResultGroup,
@ -14,6 +13,7 @@ import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-formfield";
import "../../components/ha-radio";
import type { HaRadio } from "../../components/ha-radio";
import "../../components/ha-select";
import "../../components/ha-settings-row";
import "../../components/ha-textfield";
import {
@ -62,7 +62,7 @@ export class HaPickThemeRow extends LitElement {
${this.hass.localize("ui.panel.profile.themes.link_promo")}
</a>
</span>
<mwc-select
<ha-select
.label=${this.hass.localize("ui.panel.profile.themes.dropdown_label")}
.disabled=${!hasThemes}
.value=${this.hass.selectedTheme?.theme || "Backend-selected"}
@ -72,7 +72,7 @@ export class HaPickThemeRow extends LitElement {
(theme) =>
html`<mwc-list-item .value=${theme}>${theme}</mwc-list-item>`
)}
</mwc-select>
</ha-select>
</ha-settings-row>
${curTheme === "default" || this._supportsModeSelection(curTheme)
? html` <div class="inputs">

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

@ -1,13 +1,13 @@
import "@material/mwc-list/mwc-list-item";
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-select";
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 {
@ -25,7 +25,7 @@ class TimeFormatRow extends LitElement {
<span slot="description">
${this.hass.localize("ui.panel.profile.time_format.description")}
</span>
<mwc-select
<ha-select
.label=${this.hass.localize(
"ui.panel.profile.time_format.dropdown_label"
)}
@ -46,7 +46,7 @@ class TimeFormatRow extends LitElement {
<span slot="secondary">${formattedTime}</span>
</mwc-list-item>`;
})}
</mwc-select>
</ha-select>
</ha-settings-row>
`;
}

8
src/state-summary/state-card-input_select.ts
View File

@ -1,5 +1,5 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "../components/ha-select";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { stopPropagation } from "../common/dom/stop_propagation";
@ -18,7 +18,7 @@ class StateCardInputSelect extends LitElement {
protected render(): TemplateResult {
return html`
<state-badge .stateObj=${this.stateObj}></state-badge>
<mwc-select
<ha-select
.label=${computeStateName(this.stateObj)}
.value=${this.stateObj.state}
.disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
@ -31,7 +31,7 @@ class StateCardInputSelect extends LitElement {
(option) =>
html`<mwc-list-item .value=${option}>${option}</mwc-list-item>`
)}
</mwc-select>
</ha-select>
`;
}
@ -54,7 +54,7 @@ class StateCardInputSelect extends LitElement {
margin-top: 10px;
}
mwc-select {
ha-select {
width: 100%;
}
`;

8
src/state-summary/state-card-select.ts
View File

@ -1,5 +1,5 @@
import "@material/mwc-list/mwc-list-item";
import "@material/mwc-select/mwc-select";
import "../components/ha-select";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { stopPropagation } from "../common/dom/stop_propagation";
@ -18,7 +18,7 @@ class StateCardSelect extends LitElement {
protected render(): TemplateResult {
return html`
<state-badge .stateObj=${this.stateObj}></state-badge>
<mwc-select
<ha-select
.value=${this.stateObj.state}
.label=${computeStateName(this.stateObj)}
.disabled=${this.stateObj.state === UNAVAILABLE}
@ -40,7 +40,7 @@ class StateCardSelect extends LitElement {
</mwc-list-item>
`
)}
</mwc-select>
</ha-select>
`;
}
@ -63,7 +63,7 @@ class StateCardSelect extends LitElement {
margin-top: 10px;
}
mwc-select {
ha-select {
width: 100%;
}
`;

2
src/state/quick-bar-mixin.ts
View File

@ -58,7 +58,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
return false;
}
if (el.parentElement.tagName === "MWC-SELECT") {
if (el.parentElement.tagName === "ha-select") {
return false;
}

3
src/state/translations-mixin.ts
View File

@ -19,6 +19,7 @@ import {
getUserLocale,
} from "../util/common-translation";
import { HassBaseEl } from "./hass-base-mixin";
import { fireEvent } from "../common/dom/fire_event";
declare global {
// for fire event
@ -32,6 +33,7 @@ declare global {
"hass-time-format-select": {
time_format: TimeFormat;
};
"translations-updated": undefined;
}
}
@ -352,6 +354,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
localize,
});
}
fireEvent(this, "translations-updated");
}
private _refetchCachedHassTranslations(