-
-
- ${periods.map(
- (period) =>
- html`
- ${this.hass!.localize(
- `ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
- )}
- `
- )}
-
-
+ ${periods.map(
+ (period) =>
+ html`
+ ${this.hass!.localize(
+ `ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
+ )}
+ `
+ )}
+
${this._params.allowDashboardChange
- ? html`
-
-
- Default
-
- ${this._dashboards.map((dashboard) => {
- if (!this.hass.user!.is_admin && dashboard.require_admin) {
- return "";
- }
- return html`
- ${dashboard.title}
- `;
- })}
-
- `
+ Default
+
+ ${this._dashboards.map((dashboard) => {
+ if (!this.hass.user!.is_admin && dashboard.require_admin) {
+ return "";
+ }
+ return html`
+ ${dashboard.title}
+ `;
+ })}
+ `
: ""}
${this._config
? this._config.views.length > 1
@@ -111,7 +108,7 @@ export class HuiDialogSelectView extends LitElement {
${this._config.views.map(
(view, idx) => html`
icon)
+ .graphic=${this._config?.views.some(({ icon }) => icon)
? "icon"
: null}
@click=${this._viewChanged}
@@ -142,8 +139,8 @@ export class HuiDialogSelectView extends LitElement {
this._params!.dashboards || (await fetchDashboards(this.hass));
}
- private async _dashboardChanged(ev: CustomEvent) {
- let urlPath: string | null = ev.detail.item.urlPath;
+ private async _dashboardChanged(ev) {
+ let urlPath: string | null = ev.target.value;
if (urlPath === this._urlPath) {
return;
}
@@ -181,7 +178,7 @@ export class HuiDialogSelectView extends LitElement {
return [
haStyleDialog,
css`
- ha-paper-dropdown-menu {
+ mwc-select {
width: 100%;
}
`,
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 40da6d5d4e..411b7906ef 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
@@ -1,7 +1,10 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { slugify } from "../../../../common/string/slugify";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-picker";
@@ -121,26 +124,24 @@ export class HuiViewEditor extends LitElement {
.configValue=${"theme"}
@value-changed=${this._valueChanged}
>
-
-
- ${[DEFAULT_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT, PANEL_VIEW_LAYOUT].map(
- (type) => html`
- ${this.hass.localize(
- `ui.panel.lovelace.editor.edit_view.types.${type}`
- )}
- `
- )}
-
-
+ ${[DEFAULT_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT, PANEL_VIEW_LAYOUT].map(
+ (type) => html`
+ ${this.hass.localize(
+ `ui.panel.lovelace.editor.edit_view.types.${type}`
+ )}
+ `
+ )}
+
`;
}
@@ -166,7 +167,7 @@ export class HuiViewEditor extends LitElement {
}
private _typeChanged(ev): void {
- const selected = ev.target.selected;
+ const selected = ev.target.value;
if (selected === "") {
return;
}
diff --git a/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts
index 143aa75ecf..d4bb565835 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts
@@ -1,5 +1,5 @@
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
import {
css,
CSSResultGroup,
@@ -68,19 +68,20 @@ export class HuiViewVisibilityEditor extends LitElement {
${this._sortedUsers(this._users).map(
(user) => html`
-
+
- ${user.name}
+ ${user.name}
-
+
`
)}
`;
diff --git a/src/panels/profile/ha-panel-profile.ts b/src/panels/profile/ha-panel-profile.ts
index 4d9b82c42c..a1c7b66ad3 100644
--- a/src/panels/profile/ha-panel-profile.ts
+++ b/src/panels/profile/ha-panel-profile.ts
@@ -1,8 +1,6 @@
import "@material/mwc-button";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property, state } from "lit/decorators";
diff --git a/src/panels/profile/ha-pick-dashboard-row.ts b/src/panels/profile/ha-pick-dashboard-row.ts
index 544c7296cc..9fa0dc057e 100644
--- a/src/panels/profile/ha-pick-dashboard-row.ts
+++ b/src/panels/profile/ha-pick-dashboard-row.ts
@@ -1,12 +1,11 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
-import "../../components/ha-paper-dropdown-menu";
import "../../components/ha-settings-row";
import { fetchDashboards, LovelaceDashboard } from "../../data/lovelace";
import { setDefaultPanel } from "../../data/panel";
import { HomeAssistant } from "../../types";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
@customElement("ha-pick-dashboard-row")
class HaPickDashboardRow extends LitElement {
@@ -30,36 +29,30 @@ class HaPickDashboardRow extends LitElement {
${this.hass.localize("ui.panel.profile.dashboard.description")}
-
-
- ${this.hass.localize(
- "ui.panel.profile.dashboard.default_dashboard_label"
- )}
- ${this._dashboards.map((dashboard) => {
- if (!this.hass.user!.is_admin && dashboard.require_admin) {
- return "";
- }
- return html`
- ${dashboard.title}
- `;
- })}
-
-
+
+ ${this.hass.localize(
+ "ui.panel.profile.dashboard.default_dashboard_label"
+ )}
+
+ ${this._dashboards.map((dashboard) => {
+ if (!this.hass.user!.is_admin && dashboard.require_admin) {
+ return "";
+ }
+ return html`
+
+ ${dashboard.title}
+
+ `;
+ })}
+
`;
}
@@ -68,8 +61,8 @@ class HaPickDashboardRow extends LitElement {
this._dashboards = await fetchDashboards(this.hass);
}
- private _dashboardChanged(ev: CustomEvent) {
- const urlPath = ev.detail.item.getAttribute("url-path");
+ private _dashboardChanged(ev) {
+ const urlPath = ev.target.value;
if (!urlPath || urlPath === this.hass.defaultPanel) {
return;
}
diff --git a/src/panels/profile/ha-pick-language-row.js b/src/panels/profile/ha-pick-language-row.js
deleted file mode 100644
index 7cd49a7304..0000000000
--- a/src/panels/profile/ha-pick-language-row.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../components/ha-paper-dropdown-menu";
-import "../../components/ha-settings-row";
-import { EventsMixin } from "../../mixins/events-mixin";
-import LocalizeMixin from "../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- * @appliesMixin EventsMixin
- */
-class HaPickLanguageRow extends LocalizeMixin(EventsMixin(PolymerElement)) {
- static get template() {
- return html`
-
-
- [[localize('ui.panel.profile.language.header')]]
-
- [[localize('ui.panel.profile.language.link_promo')]]
-
-
-
-
-
- [[item.nativeName]]
-
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- narrow: Boolean,
- languageSelection: {
- type: String,
- observer: "languageSelectionChanged",
- },
- languages: {
- type: Array,
- computed: "computeLanguages(hass)",
- },
- };
- }
-
- static get observers() {
- return ["setLanguageSelection(language)"];
- }
-
- computeLanguages(hass) {
- if (!hass || !hass.translationMetadata) {
- return [];
- }
- const translations = hass.translationMetadata.translations;
- return Object.keys(translations).map((key) => ({
- key,
- ...translations[key],
- }));
- }
-
- setLanguageSelection(language) {
- this.languageSelection = language;
- }
-
- languageSelectionChanged(newVal) {
- // Only fire event if language was changed. This prevents select updates when
- // responding to hass changes.
- if (newVal !== this.hass.language) {
- this.fire("hass-language-select", newVal);
- }
- }
-
- ready() {
- super.ready();
- if (this.hass && this.hass.locale && this.hass.locale.language) {
- this.setLanguageSelection(this.hass.locale.language);
- }
- }
-}
-
-customElements.define("ha-pick-language-row", HaPickLanguageRow);
diff --git a/src/panels/profile/ha-pick-language-row.ts b/src/panels/profile/ha-pick-language-row.ts
new file mode 100644
index 0000000000..ced951b463
--- /dev/null
+++ b/src/panels/profile/ha-pick-language-row.ts
@@ -0,0 +1,87 @@
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-settings-row";
+import { HomeAssistant, Translation } from "../../types";
+import "@material/mwc-select/mwc-select";
+import "@material/mwc-list/mwc-list-item";
+
+@customElement("ha-pick-language-row")
+export class HaPickLanguageRow extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property() public narrow!: boolean;
+
+ @state() private _languages: (Translation & { key: string })[] = [];
+
+ protected firstUpdated(changedProps: PropertyValues) {
+ super.firstUpdated(changedProps);
+ this._computeLanguages();
+ }
+
+ protected render() {
+ return html`
+
+ ${this.hass.localize("ui.panel.profile.language.header")}
+
+ ${this.hass.localize("ui.panel.profile.language.link_promo")}
+
+
+ ${this._languages.map(
+ (language) => html`
+ ${language.nativeName}
+ `
+ )}
+
+
+ `;
+ }
+
+ private _computeLanguages() {
+ if (!this.hass.translationMetadata?.translations) {
+ return;
+ }
+ this._languages = Object.keys(
+ this.hass.translationMetadata.translations
+ ).map((key) => ({
+ key,
+ ...this.hass.translationMetadata.translations[key],
+ }));
+ }
+
+ private _languageSelectionChanged(ev) {
+ // Only fire event if language was changed. This prevents select updates when
+ // responding to hass changes.
+ if (ev.target.value !== this.hass.language) {
+ fireEvent(this, "hass-language-select", ev.target.value);
+ }
+ }
+
+ static styles = css`
+ a {
+ color: var(--primary-color);
+ }
+ `;
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-pick-language-row": HaPickLanguageRow;
+ }
+}
diff --git a/src/panels/profile/ha-pick-number-format-row.ts b/src/panels/profile/ha-pick-number-format-row.ts
index 13bd937c46..f32ee02dce 100644
--- a/src/panels/profile/ha-pick-number-format-row.ts
+++ b/src/panels/profile/ha-pick-number-format-row.ts
@@ -1,11 +1,10 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { formatNumber } from "../../common/number/format_number";
import "../../components/ha-card";
-import "../../components/ha-paper-dropdown-menu";
import "../../components/ha-settings-row";
import { NumberFormat } from "../../data/translation";
import { HomeAssistant } from "../../types";
@@ -25,47 +24,39 @@ class NumberFormatRow extends LitElement {
${this.hass.localize("ui.panel.profile.number_format.description")}
-
-
- ${Object.values(NumberFormat).map((format) => {
- const formattedNumber = formatNumber(1234567.89, {
- ...this.hass.locale,
- number_format: format,
- });
- const value = this.hass.localize(
- `ui.panel.profile.number_format.formats.${format}`
- );
- const twoLine = value.slice(value.length - 2) !== "89"; // Display explicit number formats on one line
- return html`
-
-
- ${value}
- ${twoLine
- ? html`${formattedNumber}
`
- : ""}
-
-
- `;
- })}
-
-
+ ${Object.values(NumberFormat).map((format) => {
+ const formattedNumber = formatNumber(1234567.89, {
+ ...this.hass.locale,
+ number_format: format,
+ });
+ const value = this.hass.localize(
+ `ui.panel.profile.number_format.formats.${format}`
+ );
+ const twoLine = value.slice(value.length - 2) !== "89"; // Display explicit number formats on one line
+ return html`
+
+ ${value}
+ ${twoLine
+ ? html`${formattedNumber}`
+ : ""}
+
+ `;
+ })}
+
`;
}
- private async _handleFormatSelection(ev: CustomEvent) {
- fireEvent(this, "hass-number-format-select", ev.detail.item.format);
+ private async _handleFormatSelection(ev) {
+ fireEvent(this, "hass-number-format-select", ev.target.value);
}
}
diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts
index 7f55bb8bb8..214cc20515 100644
--- a/src/panels/profile/ha-pick-theme-row.ts
+++ b/src/panels/profile/ha-pick-theme-row.ts
@@ -1,7 +1,5 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResultGroup,
@@ -13,7 +11,6 @@ import {
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-formfield";
-import "../../components/ha-paper-dropdown-menu";
import "../../components/ha-radio";
import type { HaRadio } from "../../components/ha-radio";
import "../../components/ha-settings-row";
@@ -23,6 +20,8 @@ import {
} from "../../resources/ha-style";
import { HomeAssistant } from "../../types";
import { documentationUrl } from "../../util/documentation-url";
+import "@material/mwc-select/mwc-select";
+import "@material/mwc-list/mwc-list-item";
@customElement("ha-pick-theme-row")
export class HaPickThemeRow extends LitElement {
@@ -63,22 +62,17 @@ export class HaPickThemeRow extends LitElement {
${this.hass.localize("ui.panel.profile.themes.link_promo")}
-
-
- ${this._themeNames.map(
- (theme) => html`${theme}`
- )}
-
-
+ ${this._themeNames.map(
+ (theme) =>
+ html`
${theme}`
+ )}
+
${curTheme === "default" || this._supportsModeSelection(curTheme)
? html`