diff --git a/hassio/src/addon-view/config/hassio-addon-audio.ts b/hassio/src/addon-view/config/hassio-addon-audio.ts
index 7f7c8d3f2c..acf59950fa 100644
--- a/hassio/src/addon-view/config/hassio-addon-audio.ts
+++ b/hassio/src/addon-view/config/hassio-addon-audio.ts
@@ -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`${this._error}`
: ""}
${this._inputDevices &&
- html`
`
)}
- `}
+ `}
${this._outputDevices &&
- html`
`
)}
- `}
+ `}
@@ -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;
}
`,
diff --git a/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts b/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts
index 564a1fe689..92eda0e5b5 100644
--- a/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts
+++ b/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts
@@ -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 {
)}
- ${device}`
)}
-
+
`
: 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 {
diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts
index 65cb0f8a66..a18f3c1d3b 100644
--- a/hassio/src/system/hassio-supervisor-log.ts
+++ b/hassio/src/system/hassio-supervisor-log.ts
@@ -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`
-
`
)}
-
+
`
: ""}
@@ -145,7 +146,7 @@ class HassioSupervisorLog extends LitElement {
pre {
white-space: pre-wrap;
}
- mwc-select {
+ ha-select {
width: 100%;
margin-bottom: 4px;
}
diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts
index 007f40e77c..57b46e5b5b 100644
--- a/src/components/device/ha-device-automation-picker.ts
+++ b/src/components/device/ha-device-automation-picker.ts
@@ -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`
-
`
)}
-
+
`;
}
@@ -167,7 +167,7 @@ export abstract class HaDeviceAutomationPicker<
static get styles(): CSSResultGroup {
return css`
- mwc-select {
+ ha-select {
width: 100%;
margin-top: 4px;
}
diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 27b72e42f2..64b12f18e2 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -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`
AM
PM
- `}
+ `}
`;
}
@@ -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;
}
diff --git a/src/components/ha-blueprint-picker.ts b/src/components/ha-blueprint-picker.ts
index bbe399e214..e45e31b6da 100644
--- a/src/components/ha-blueprint-picker.ts
+++ b/src/components/ha-blueprint-picker.ts
@@ -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`
-
`
)}
-
+
`;
}
@@ -101,7 +101,7 @@ class HaBluePrintPicker extends LitElement {
:host {
display: inline-block;
}
- mwc-select {
+ ha-select {
width: 100%;
min-width: 200px;
display: block;
diff --git a/src/components/ha-form/ha-form-multi_select.ts b/src/components/ha-form/ha-form-multi_select.ts
index 3411977f51..a591f710bc 100644
--- a/src/components/ha-form/ha-form-multi_select.ts
+++ b/src/components/ha-form/ha-form-multi_select.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-select/mwc-select";
import { mdiMenuDown, mdiMenuUp } from "@mdi/js";
import {
css,
diff --git a/src/components/ha-form/ha-form-select.ts b/src/components/ha-form/ha-form-select.ts
index bbe561ff40..2e342a39a2 100644
--- a/src/components/ha-form/ha-form-select.ts
+++ b/src/components/ha-form/ha-form-select.ts
@@ -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`
- ${label}
`
)}
-
+
`;
}
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;
}
diff --git a/src/components/ha-qr-scanner.ts b/src/components/ha-qr-scanner.ts
index 53ffb463f1..87d0399914 100644
--- a/src/components/ha-qr-scanner.ts
+++ b/src/components/ha-qr-scanner.ts
@@ -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";
diff --git a/src/components/ha-select.ts b/src/components/ha-select.ts
new file mode 100644
index 0000000000..a6e69ee858
--- /dev/null
+++ b/src/components/ha-select.ts
@@ -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``;
+ }
+
+ 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;
+ }
+}
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index 5c1cc3e91b..ebc2704992 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -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`${label}`;
})}
- `;
+ `;
}
private _valueChanged(ev) {
@@ -53,7 +53,7 @@ export class HaSelectSelector extends LitElement {
static get styles(): CSSResultGroup {
return css`
- mwc-select {
+ ha-select {
width: 100%;
}
`;
diff --git a/src/components/media-player/ha-browse-media-tts.ts b/src/components/media-player/ha-browse-media-tts.ts
index 43f4b30190..3cd39d3a73 100644
--- a/src/components/media-player/ha-browse-media-tts.ts
+++ b/src/components/media-player/ha-browse-media-tts.ts
@@ -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`
-
html`${label}`
)}
-
+
-
html`${label}`
)}
-
+
`;
}
@@ -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 {
diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts
index f1ac638e0b..0e7ae97466 100644
--- a/src/components/user/ha-user-picker.ts
+++ b/src/components/user/ha-user-picker.ts
@@ -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`
-
`
)}
-
+
`;
}
diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts
index 3512ba86a3..2a66080055 100644
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@@ -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 {
${supportPresetMode && stateObj.attributes.preset_modes
? html`
-
`
)}
-
+
`
: ""}
${supportFanMode && stateObj.attributes.fan_modes
? html`
-
`
)}
-
+
`
: ""}
${supportSwingMode && stateObj.attributes.swing_modes
? html`
- ${mode}
`
)}
-
+
`
: ""}
@@ -427,7 +427,7 @@ class MoreInfoClimate extends LitElement {
color: var(--primary-text-color);
}
- mwc-select {
+ ha-select {
width: 100%;
margin-top: 8px;
}
diff --git a/src/dialogs/more-info/controls/more-info-fan.js b/src/dialogs/more-info/controls/more-info-fan.js
index 3d712670c7..5a2f042448 100644
--- a/src/dialogs/more-info/controls/more-info-fan.js
+++ b/src/dialogs/more-info/controls/more-info-fan.js
@@ -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%;
}
@@ -57,7 +57,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
-
[[item]]
-
+
diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts
index 3d6aa6e0c9..bce976b45b 100644
--- a/src/dialogs/more-info/controls/more-info-humidifier.ts
+++ b/src/dialogs/more-info/controls/more-info-humidifier.ts
@@ -170,11 +170,7 @@ class MoreInfoHumidifier extends LitElement {
color: var(--primary-text-color);
}
- mwc-select {
- width: 100%;
- }
-
- ha-slider {
+ ha-select {
width: 100%;
}
diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts
index 08b53c1825..5a2a07c21b 100644
--- a/src/dialogs/more-info/controls/more-info-light.ts
+++ b/src/dialogs/more-info/controls/more-info-light.ts
@@ -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`
-
`
)}
-
+
`
: ""}
`
diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts
index c415d322e9..efb7bf3617 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -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`
-
- ${source}
`
)}
-
+
+
`
: ""}
@@ -161,10 +159,10 @@ class MoreInfoMediaPlayer extends LitElement {
stateObj.attributes.sound_mode_list?.length
? html`
-
- ${mode}
`
)}
-
+
+
`
: ""}
@@ -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;
}
diff --git a/src/dialogs/more-info/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts
index 44ef096299..852a41b98a 100644
--- a/src/dialogs/more-info/controls/more-info-vacuum.ts
+++ b/src/dialogs/more-info/controls/more-info-vacuum.ts
@@ -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`
-
${mode}
`
)}
-
+
diff --git a/src/dialogs/more-info/controls/more-info-water_heater.js b/src/dialogs/more-info/controls/more-info-water_heater.js
index d46bf1a178..a48c3b4118 100644
--- a/src/dialogs/more-info/controls/more-info-water_heater.js
+++ b/src/dialogs/more-info/controls/more-info-water_heater.js
@@ -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)) {
diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts
index 8ca7b46de0..dc9e875b32 100644
--- a/src/fake_data/provide_hass.ts
+++ b/src/fake_data/provide_hass.ts
@@ -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) {
diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts
index 2d68bf0461..1844341245 100644
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -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 {
>
`
: html`
-
${label}
`
)}
-
+
${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;
}
`,
diff --git a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
index 0238269e14..13942a211a 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
@@ -35,7 +35,7 @@ export class HaRepeatAction extends LitElement implements ActionElement {
const type = getType(action);
return html`
-
`
)}
-
+
${type === "count"
? html`
`
: html`
- ${label}
`
)}
-
+
${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;
}
`,
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-trigger.ts b/src/panels/config/automation/condition/types/ha-automation-condition-trigger.ts
index eb5e04fb78..cb80c3769b 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-trigger.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-trigger.ts
@@ -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` ${trigger.id}
`
)}
- `;
+ `;
}
private _automationUpdated(config?: AutomationConfig) {
diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts
index 19a82decb9..86dcbd72d9 100644
--- a/src/panels/config/automation/manual-automation-editor.ts
+++ b/src/panels/config/automation/manual-automation-editor.ts
@@ -95,7 +95,7 @@ export class HaManualAutomationEditor extends LitElement {
>`
)}
-
`
)}
-
+
${this.config.mode && MODES_MAX.includes(this.config.mode)
? html`
`
: html`
- ${label}
`
)}
-
+
${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 {
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts
index f79bbd1619..9565c87347 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts
@@ -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`
-
`
)}
-
+
`;
}
diff --git a/src/panels/config/cloud/account/cloud-tts-pref.ts b/src/panels/config/cloud/account/cloud-tts-pref.ts
index b92a9e45d7..e7f36d8edf 100644
--- a/src/panels/config/cloud/account/cloud-tts-pref.ts
+++ b/src/panels/config/cloud/account/cloud-tts-pref.ts
@@ -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 {
)}
-
html`${label}`
)}
-
+
-
html`${label}`
)}
-
+
diff --git a/src/panels/config/cloud/account/dialog-cloud-tts-try.ts b/src/panels/config/cloud/account/dialog-cloud-tts-try.ts
index bb4bad9e49..b93cbeac21 100644
--- a/src/panels/config/cloud/account/dialog-cloud-tts-try.ts
+++ b/src/panels/config/cloud/account/dialog-cloud-tts-try.ts
@@ -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 {
>
-
`
)}
-
+
${OVERRIDE_DEVICE_CLASSES[domain]?.includes(this._deviceClass) ||
(domain === "cover" && this.entry.original_device_class === null)
- ? html`
`
)}
- `
+ `
: ""}
-
`
)}
-
+
${this.showHelp
? html`
@@ -270,7 +270,7 @@ export class ZHAClusterAttributes extends LitElement {
return [
haStyle,
css`
- mwc-select {
+ ha-select {
margin-top: 16px;
}
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
index 4af410898b..ca3a29be5f 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
@@ -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 {
-
`
)}
-
+
${this._showHelp
? html`
@@ -206,7 +206,7 @@ export class ZHAClusterCommands extends LitElement {
return [
haStyle,
css`
- mwc-select {
+ ha-select {
margin-top: 16px;
}
.menu {
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts
index e9e20a2899..19f2d270d2 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts
@@ -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 {
-
`
)}
-
+
${this.showHelp
? html`
@@ -137,7 +137,7 @@ export class ZHAClusters extends LitElement {
return [
haStyle,
css`
- mwc-select {
+ ha-select {
margin-top: 16px;
}
.menu {
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts
index 4ff919838e..1445a572d5 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts
@@ -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 {
-
+
${this._showHelp
? html`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts
index f5d284ea5c..67671e9047 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts
@@ -93,7 +93,7 @@ export class ZHAGroupBindingControl extends LitElement {
- ${group.name} `
)}
-
+
${this._showHelp
? html`
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts
index 542a492e8f..23deecbaf8 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts
@@ -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) {
${this._logConfig
? html`
- Verbose
Debug
Silly
-
+
`
: ""}
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
index 4cf083893d..decfd847df 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
@@ -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}
- ${entityState}
`
)}
-
+
`;
}
@@ -455,7 +455,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
}
.flex .config-label,
- .flex mwc-select {
+ .flex ha-select {
flex: 1;
}
diff --git a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
index ed04677669..eb2ebe92d3 100644
--- a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
+++ b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
@@ -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
>
-
`
: ""}
-
+
${this._params.resource
diff --git a/src/panels/lovelace/components/hui-action-editor.ts b/src/panels/lovelace/components/hui-action-editor.ts
index 114233e2ec..f57a51f51d 100644
--- a/src/panels/lovelace/components/hui-action-editor.ts
+++ b/src/panels/lovelace/components/hui-action-editor.ts
@@ -57,7 +57,7 @@ export class HuiActionEditor extends LitElement {
return html`
-
`
)}
-
+
${this.tooltipText
? html`
@@ -199,7 +199,7 @@ export class HuiActionEditor extends LitElement {
right: 40px;
top: 16px;
}
- mwc-select,
+ ha-select,
ha-textfield {
width: 100%;
}
diff --git a/src/panels/lovelace/components/hui-theme-select-editor.ts b/src/panels/lovelace/components/hui-theme-select-editor.ts
index af07d88788..659b5af4e9 100644
--- a/src/panels/lovelace/components/hui-theme-select-editor.ts
+++ b/src/panels/lovelace/components/hui-theme-select-editor.ts
@@ -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`
-
html`${theme}`
)}
-
+
`;
}
static get styles(): CSSResultGroup {
return css`
- mwc-select {
+ ha-select {
width: 100%;
}
`;
diff --git a/src/panels/lovelace/editor/config-elements/config-elements-style.ts b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
index dead5f483c..061d3aff36 100644
--- a/src/panels/lovelace/editor/config-elements/config-elements-style.ts
+++ b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
@@ -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;
diff --git a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
index a62cf2bb7b..48c6b52da0 100644
--- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
@@ -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
>
-
-
+
-
+
`;
}
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
index aa1ed1eb7b..5c1ca02a96 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
@@ -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
>
-
html`${view} `
)}
-
+
-
html`${view} `
)}
-
+
-
html`${graph}`
)}
-
+
-
`
)}
-
+
${this._params.allowDashboardChange
- ? html`
`;
})}
- `
+ `
: ""}
${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%;
}
`,
diff --git a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
index 411b7906ef..f04f74e0dd 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
@@ -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}
>
- `
)}
-
+
`;
}
diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
index 30fd573dbe..512d3c7785 100644
--- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
@@ -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
>
-
`
)
: ""}
-
+
`;
}
@@ -93,7 +93,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
display: flex;
align-items: center;
}
- mwc-select {
+ ha-select {
width: 100%;
}
`;
diff --git a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
index f6bc9ec867..5cc2ab0ee9 100644
--- a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
@@ -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
>
-
+
`;
}
@@ -99,7 +99,7 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
display: flex;
align-items: center;
}
- mwc-select {
+ ha-select {
width: 100%;
}
`;
diff --git a/src/panels/profile/ha-pick-dashboard-row.ts b/src/panels/profile/ha-pick-dashboard-row.ts
index 9fa0dc057e..4b5d647002 100644
--- a/src/panels/profile/ha-pick-dashboard-row.ts
+++ b/src/panels/profile/ha-pick-dashboard-row.ts
@@ -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 {
${this.hass.localize("ui.panel.profile.dashboard.description")}
-
`;
})}
-
+
`;
}
diff --git a/src/panels/profile/ha-pick-language-row.ts b/src/panels/profile/ha-pick-language-row.ts
index ced951b463..c4fe06bb18 100644
--- a/src/panels/profile/ha-pick-language-row.ts
+++ b/src/panels/profile/ha-pick-language-row.ts
@@ -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")}
- `
)}
-
+
`;
}
diff --git a/src/panels/profile/ha-pick-number-format-row.ts b/src/panels/profile/ha-pick-number-format-row.ts
index f32ee02dce..d8588f6e1a 100644
--- a/src/panels/profile/ha-pick-number-format-row.ts
+++ b/src/panels/profile/ha-pick-number-format-row.ts
@@ -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 {
${this.hass.localize("ui.panel.profile.number_format.description")}
-
`;
})}
-
+
`;
}
diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts
index d9fe4f78c2..b0147b6842 100644
--- a/src/panels/profile/ha-pick-theme-row.ts
+++ b/src/panels/profile/ha-pick-theme-row.ts
@@ -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")}
-
html`${theme}`
)}
-
+
${curTheme === "default" || this._supportsModeSelection(curTheme)
? html`
diff --git a/src/panels/profile/ha-pick-time-format-row.ts b/src/panels/profile/ha-pick-time-format-row.ts
index 5f68076f2a..48a910cd9e 100644
--- a/src/panels/profile/ha-pick-time-format-row.ts
+++ b/src/panels/profile/ha-pick-time-format-row.ts
@@ -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 {
${this.hass.localize("ui.panel.profile.time_format.description")}
- ${formattedTime}
`;
})}
-
+
`;
}
diff --git a/src/state-summary/state-card-input_select.ts b/src/state-summary/state-card-input_select.ts
index c992975a82..e249ae1319 100644
--- a/src/state-summary/state-card-input_select.ts
+++ b/src/state-summary/state-card-input_select.ts
@@ -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`
-
html`${option}`
)}
-
+
`;
}
@@ -54,7 +54,7 @@ class StateCardInputSelect extends LitElement {
margin-top: 10px;
}
- mwc-select {
+ ha-select {
width: 100%;
}
`;
diff --git a/src/state-summary/state-card-select.ts b/src/state-summary/state-card-select.ts
index 1aae15ad6c..a37c8e07ad 100644
--- a/src/state-summary/state-card-select.ts
+++ b/src/state-summary/state-card-select.ts
@@ -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`
-
`
)}
-
+
`;
}
@@ -63,7 +63,7 @@ class StateCardSelect extends LitElement {
margin-top: 10px;
}
- mwc-select {
+ ha-select {
width: 100%;
}
`;
diff --git a/src/state/quick-bar-mixin.ts b/src/state/quick-bar-mixin.ts
index a0e98b327c..b9e6997182 100644
--- a/src/state/quick-bar-mixin.ts
+++ b/src/state/quick-bar-mixin.ts
@@ -58,7 +58,7 @@ export default >(superClass: T) =>
return false;
}
- if (el.parentElement.tagName === "MWC-SELECT") {
+ if (el.parentElement.tagName === "ha-select") {
return false;
}
diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts
index c26978ddc1..5a118b67cc 100644
--- a/src/state/translations-mixin.ts
+++ b/src/state/translations-mixin.ts
@@ -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 >(superClass: T) =>
localize,
});
}
+ fireEvent(this, "translations-updated");
}
private _refetchCachedHassTranslations(