${this._errorMsg}
`
- : ""}
${this.flowConfig.renderShowFormStepDescription(this.hass, this.step)}
+ ${this._errorMsg
+ ? html`[[value]] [[units]]
`;
diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts
index 8abeaf24ba..afcd9c8911 100644
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
@@ -11,7 +10,7 @@ import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { PolymerChangedEvent } from "../polymer-types";
import { HomeAssistant } from "../types";
-import "./ha-svg-icon";
+import "./ha-icon-button";
// eslint-disable-next-line lit/prefer-static-styles
const defaultRowRenderer: ComboBoxLitRenderer
@@ -363,7 +438,7 @@ class HaSidebar extends LitElement {
}
private _renderHiddenPanels() {
- return html` ${this._hiddenPanels.length
+ return html`${this._hiddenPanels.length
? html`${this._hiddenPanels.map((url) => {
const panel = this.hass.panels[url];
if (!panel) {
@@ -374,21 +449,28 @@ class HaSidebar extends LitElement {
class="hidden-panel"
.panel=${url}
>
-
-
+
-
+ >
`
: ""}
@@ -281,7 +281,7 @@ export class HaMediaPlayerBrowse extends LitElement {
${child.can_play
? html`
-
- this._renderPanel(
- panel.url_path,
- panel.url_path === this.hass.defaultPanel
- ? panel.title || this.hass.localize("panel.states")
- : this.hass.localize(`panel.${panel.title}`) || panel.title,
- panel.icon,
- panel.url_path === this.hass.defaultPanel && !panel.icon
- ? mdiViewDashboard
- : undefined
- )
- );
- }
-
- private _renderPanel(
- urlPath: string,
- title: string | null,
- icon?: string | null,
- iconPath?: string | null
- ) {
- return html`
-
-
- ${iconPath
- ? html`
- ${this.editMode
- ? html``
- : ""}
-
- `;
- }
-
static get styles(): CSSResultGroup {
return [
haStyleScrollbar,
@@ -786,7 +816,7 @@ class HaSidebar extends LitElement {
:host([rtl][expanded]) .menu {
width: calc(256px + env(safe-area-inset-right));
}
- .menu mwc-icon-button {
+ .menu ha-icon-button {
color: var(--sidebar-icon-color);
}
.title {
@@ -1021,7 +1051,7 @@ class HaSidebar extends LitElement {
font-weight: 500;
}
- :host([rtl]) .menu mwc-icon-button {
+ :host([rtl]) .menu ha-icon-button {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
diff --git a/src/components/ha-state-icon.ts b/src/components/ha-state-icon.ts
new file mode 100644
index 0000000000..eace7706bc
--- /dev/null
+++ b/src/components/ha-state-icon.ts
@@ -0,0 +1,27 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { stateIconPath } from "../common/entity/state_icon_path";
+import "./ha-icon";
+import "./ha-svg-icon";
+
+@customElement("ha-state-icon")
+export class HaStateIcon extends LitElement {
+ @property({ attribute: false }) public state?: HassEntity;
+
+ @property() public icon?: string;
+
+ protected render(): TemplateResult {
+ if (this.icon || this.state?.attributes.icon) {
+ return html`
-
+ >
${this.hass.localize(
`ui.components.target-picker.expand_${type}`
@@ -277,17 +278,17 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
>
`}
-
-
+ >
${this.hass.localize(
`ui.components.target-picker.remove_${type}`
@@ -543,13 +544,13 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.mdc-chip:not(.add) {
cursor: default;
}
- .mdc-chip mwc-icon-button {
+ .mdc-chip ha-icon-button {
--mdc-icon-button-size: 24px;
display: flex;
align-items: center;
outline: none;
}
- .mdc-chip mwc-icon-button ha-svg-icon {
+ .mdc-chip ha-icon-button ha-svg-icon {
border-radius: 50%;
background: var(--secondary-text-color);
}
@@ -557,7 +558,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
width: 16px;
height: 16px;
--mdc-icon-size: 14px;
- color: var(--card-background-color);
+ color: var(--secondary-text-color);
}
.mdc-chip__icon--leading {
display: flex;
diff --git a/src/components/ha-water_heater-control.js b/src/components/ha-water_heater-control.js
index 9a3403b36d..f92034266e 100644
--- a/src/components/ha-water_heater-control.js
+++ b/src/components/ha-water_heater-control.js
@@ -3,6 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { EventsMixin } from "../mixins/events-mixin";
+import "./ha-icon";
import "./ha-icon-button";
/*
@@ -40,16 +41,14 @@ class HaWaterHeaterControl extends EventsMixin(PolymerElement) {
${this._error} `;
+ }
+ return html`
+
+ `;
+ }
+
+ public disconnectedCallback() {
+ super.disconnectedCallback();
+ this._cleanUp();
+ }
+
+ protected updated(changedProperties: PropertyValues) {
+ if (!changedProperties.has("entityid")) {
+ return;
+ }
+ if (!this._videoEl) {
+ return;
+ }
+ this._startWebRtc();
+ }
+
+ private async _startWebRtc(): Promise {
+ this._error = undefined;
+
+ const peerConnection = new RTCPeerConnection();
+ // Some cameras (such as nest) require a data channel to establish a stream
+ // however, not used by any integrations.
+ peerConnection.createDataChannel("dataSendChannel");
+ const offerOptions: RTCOfferOptions = {
+ offerToReceiveAudio: true,
+ offerToReceiveVideo: true,
+ };
+ const offer: RTCSessionDescriptionInit = await peerConnection.createOffer(
+ offerOptions
+ );
+ await peerConnection.setLocalDescription(offer);
+
+ let webRtcAnswer: WebRtcAnswer;
+ try {
+ webRtcAnswer = await handleWebRtcOffer(
+ this.hass,
+ this.entityid,
+ offer.sdp!
+ );
+ } catch (err: any) {
+ this._error = "Failed to start WebRTC stream: " + err.message;
+ peerConnection.close();
+ return;
+ }
+
+ // Setup callbacks to render remote stream once media tracks are discovered.
+ const remoteStream = new MediaStream();
+ peerConnection.addEventListener("track", (event) => {
+ remoteStream.addTrack(event.track);
+ this._videoEl.srcObject = remoteStream;
+ });
+ this._remoteStream = remoteStream;
+
+ // Initiate the stream with the remote device
+ const remoteDesc = new RTCSessionDescription({
+ type: "answer",
+ sdp: webRtcAnswer.answer,
+ });
+ try {
+ await peerConnection.setRemoteDescription(remoteDesc);
+ } catch (err: any) {
+ this._error = "Failed to connect WebRTC stream: " + err.message;
+ peerConnection.close();
+ return;
+ }
+ this._peerConnection = peerConnection;
+ }
+
+ private _cleanUp() {
+ if (this._remoteStream) {
+ this._remoteStream.getTracks().forEach((track) => {
+ track.stop();
+ });
+ this._remoteStream = undefined;
+ }
+ if (this._videoEl) {
+ const videoEl = this._videoEl;
+ videoEl.removeAttribute("src");
+ videoEl.load();
+ }
+ if (this._peerConnection) {
+ this._peerConnection.close();
+ this._peerConnection = undefined;
+ }
+ }
+
+ static get styles(): CSSResultGroup {
+ return css`
+ video {
+ display: block;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-web-rtc-player": HaWebRtcPlayer;
+ }
+}
diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index 0d9a21da5c..19672ca8de 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -15,10 +15,10 @@ import {
} from "lit";
import {
customElement,
- property,
- state,
- query,
eventOptions,
+ property,
+ query,
+ state,
} from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined";
@@ -45,6 +45,7 @@ import "../ha-button-menu";
import "../ha-card";
import "../ha-circular-progress";
import "../ha-fab";
+import "../ha-icon-button";
import "../ha-svg-icon";
declare global {
@@ -225,14 +226,13 @@ export class HaMediaPlayerBrowse extends LitElement {
${this.dialog
? html`
- [[value]] [[units]]
`;
diff --git a/src/components/ha-web-rtc-player.ts b/src/components/ha-web-rtc-player.ts
new file mode 100644
index 0000000000..b31b2c0a7d
--- /dev/null
+++ b/src/components/ha-web-rtc-player.ts
@@ -0,0 +1,159 @@
+import {
+ css,
+ CSSResultGroup,
+ html,
+ LitElement,
+ PropertyValues,
+ TemplateResult,
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { handleWebRtcOffer, WebRtcAnswer } from "../data/camera";
+import type { HomeAssistant } from "../types";
+import "./ha-alert";
+
+/**
+ * A WebRTC stream is established by first sending an offer through a signal
+ * path via an integration. An answer is returned, then the rest of the stream
+ * is handled entirely client side.
+ */
+@customElement("ha-web-rtc-player")
+class HaWebRtcPlayer extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property() public entityid!: string;
+
+ @property({ type: Boolean, attribute: "controls" })
+ public controls = false;
+
+ @property({ type: Boolean, attribute: "muted" })
+ public muted = false;
+
+ @property({ type: Boolean, attribute: "autoplay" })
+ public autoPlay = false;
+
+ @property({ type: Boolean, attribute: "playsinline" })
+ public playsInline = false;
+
+ @state() private _error?: string;
+
+ // don't cache this, as we remove it on disconnects
+ @query("#remote-stream") private _videoEl!: HTMLVideoElement;
+
+ private _peerConnection?: RTCPeerConnection;
+
+ private _remoteStream?: MediaStream;
+
+ protected render(): TemplateResult {
+ if (this._error) {
+ return html`
-
-
-
+
-
+ .path=${mdiChevronDown}
+ >
`;
} catch (err: any) {
diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts
index d0420b82dd..d9c4ff148a 100644
--- a/src/components/user/ha-users-picker.ts
+++ b/src/components/user/ha-users-picker.ts
@@ -7,6 +7,7 @@ import { fireEvent } from "../../common/dom/fire_event";
import { fetchUsers, User } from "../../data/user";
import type { PolymerChangedEvent } from "../../polymer-types";
import type { HomeAssistant } from "../../types";
+import "../ha-icon-button";
import "./ha-user-picker";
@customElement("ha-users-picker")
@@ -46,7 +47,7 @@ class HaUsersPickerLight extends LitElement {
${this.flowConfig.renderShowFormStepHeader(this.hass, this.step)}
- ${this._errorMsg
- ? html` ${this._errorMsg} `
+ : ""}
- ${this.hass.localize(
+
+ ${this.hass.localize(
`ui.panel.config.integrations.config_flow.${
this.step.last_step === false ? "next" : "submit"
}`
)}
-
- ${!allRequiredInfoFilledIn
- ? html`
- ${this.hass.localize(
- "ui.panel.config.integrations.config_flow.not_all_required_fields"
- )}
-
- `
- : html``}
`}
@@ -113,25 +93,35 @@ class StepFlowForm extends LitElement {
return this._stepData;
}
- const data = {};
- this.step.data_schema.forEach((field) => {
- if (field.description?.suggested_value) {
- data[field.name] = field.description.suggested_value;
- } else if ("default" in field) {
- data[field.name] = field.default;
- }
- });
-
- this._stepData = data;
- return data;
+ this._stepData = computeInitialHaFormData(this.step.data_schema);
+ return this._stepData;
}
private async _submitStep(): Promise${this.hass.localize("ui.panel.config.integrations.new")}
- ${this.hass.localize("ui.auth_store.ask")}
-
-
-
- ${this.hass.localize("ui.auth_store.decline")}
-
-
- ${this.hass.localize("ui.auth_store.confirm")}
-
-
-
- `;
- }
-
- firstUpdated() {
- this.classList.toggle("small", window.innerWidth < 600);
- }
-
- private _save(): void {
- enableWrite();
- this._dismiss();
- }
-
- private _dismiss(): void {
- const card = this.shadowRoot!.querySelector("ha-card") as HaCard;
- card.style.bottom = `-${card.offsetHeight + 8}px`;
- setTimeout(() => this.parentNode!.removeChild(this), 300);
- }
-
- static get styles() {
- return css`
- ha-card {
- position: fixed;
- padding: 8px 0;
- bottom: 16px;
- right: 16px;
- transition: bottom 0.25s;
- --ha-card-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
- 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
- 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
- }
-
- .card-actions {
- text-align: right;
- border-top: 0;
- }
-
- :host(.small) ha-card {
- bottom: 0;
- left: 0;
- right: 0;
- }
- `;
- }
-}
-
-customElements.define("ha-store-auth-card", HaStoreAuth);
-
-declare global {
- interface HTMLElementTagNameMap {
- "ha-store-auth-card": HaStoreAuth;
- }
-}
diff --git a/src/dialogs/more-info/controls/more-info-camera.ts b/src/dialogs/more-info/controls/more-info-camera.ts
index ce3b02140f..6d265e5b8d 100644
--- a/src/dialogs/more-info/controls/more-info-camera.ts
+++ b/src/dialogs/more-info/controls/more-info-camera.ts
@@ -1,5 +1,3 @@
-import "@polymer/paper-checkbox/paper-checkbox";
-import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
import {
css,
CSSResultGroup,
@@ -12,11 +10,13 @@ import { property, state } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-camera-stream";
+import { HaCheckbox } from "../../../components/ha-checkbox";
import {
CameraEntity,
CameraPreferences,
CAMERA_SUPPORT_STREAM,
fetchCameraPrefs,
+ STREAM_TYPE_HLS,
updateCameraPrefs,
} from "../../../data/camera";
import type { HomeAssistant } from "../../../types";
@@ -24,7 +24,7 @@ import type { HomeAssistant } from "../../../types";
class MoreInfoCamera extends LitElement {
@property({ attribute: false }) public hass?: HomeAssistant;
- @property() public stateObj?: CameraEntity;
+ @property({ attribute: false }) public stateObj?: CameraEntity;
@state() private _cameraPrefs?: CameraPreferences;
@@ -54,12 +54,14 @@ class MoreInfoCamera extends LitElement {
>
${this._cameraPrefs
? html`
- [[localize('ui.card.fan.direction')]]
-
@@ -149,7 +160,7 @@ class MoreInfoMediaPlayer extends LitElement {
stateObj.attributes.sound_mode_list?.length
? html`
${option}
-
- ${this.hass.localize(
- "ui.dialogs.helper_settings.input_text.text"
- )}
-
-
- ${this.hass.localize(
- "ui.dialogs.helper_settings.input_text.password"
- )}
-
-
+
+
-
-
diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index e74420c9da..207dbeafed 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -1,5 +1,4 @@
import "@material/mwc-button";
-import "@material/mwc-icon-button";
import "@material/mwc-tab";
import "@material/mwc-tab-bar";
import { mdiClose, mdiCog, mdiPencil } from "@mdi/js";
@@ -17,7 +16,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
import { navigate } from "../../common/navigate";
import "../../components/ha-dialog";
import "../../components/ha-header-bar";
-import "../../components/ha-svg-icon";
+import "../../components/ha-icon-button";
import { removeEntityRegistryEntry } from "../../data/entity_registry";
import { CONTINUOUS_DOMAINS } from "../../data/logbook";
import { showEntityEditorDialog } from "../../panels/config/entities/show-dialog-entity-editor";
@@ -112,15 +111,14 @@ export class MoreInfoDialog extends LitElement {
>
-
-
+ .path=${mdiClose}
+ >
${this.hass.localize("ui.dialogs.helper_settings.input_datetime.mode")}:
-
-
- ${this.hass.localize(
- "ui.dialogs.helper_settings.input_datetime.date"
- )}
-
-
- ${this.hass.localize(
- "ui.dialogs.helper_settings.input_datetime.time"
- )}
-
-
- ${this.hass.localize(
- "ui.dialogs.helper_settings.input_datetime.datetime"
- )}
-
-
+
+
+
+
`;
}
private _modeChanged(ev: CustomEvent) {
- const mode = ev.detail.value;
+ const mode = (ev.target as HaRadio).value;
fireEvent(this, "value-changed", {
value: {
...this._item,
diff --git a/src/panels/config/helpers/forms/ha-input_number-form.ts b/src/panels/config/helpers/forms/ha-input_number-form.ts
index a87ea0cde0..9d6960062a 100644
--- a/src/panels/config/helpers/forms/ha-input_number-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_number-form.ts
@@ -1,13 +1,14 @@
import "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
import { InputNumber } from "../../../../data/input_number";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
+import "../../../../components/ha-formfield";
+import "../../../../components/ha-radio";
+import type { HaRadio } from "../../../../components/ha-radio";
@customElement("ha-input_number-form")
class HaInputNumberForm extends LitElement {
@@ -85,14 +86,14 @@ class HaInputNumberForm extends LitElement {
.invalid=${nameInvalid}
dialogInitialFocus
>
-
-
- ${this.hass.localize(
- "ui.dialogs.helper_settings.input_number.slider"
- )}
-
-
- ${this.hass.localize(
- "ui.dialogs.helper_settings.input_number.box"
- )}
-
-
+
+
${this.hass.user!.is_admin
? html`
-
-
+ >
`
: ""}
${this.shouldShowEditIcon(domain, stateObj)
? html`
-
-
+ >
`
: ""}
diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts
index 199e8e9490..b00a4ba695 100644
--- a/src/dialogs/more-info/ha-more-info-history.ts
+++ b/src/dialogs/more-info/ha-more-info-history.ts
@@ -1,12 +1,19 @@
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { fireEvent } from "../../common/dom/fire_event";
import { throttle } from "../../common/util/throttle";
import "../../components/chart/state-history-charts";
import { getRecentWithCache } from "../../data/cached-history";
import { HistoryResult } from "../../data/history";
import { HomeAssistant } from "../../types";
+declare global {
+ interface HASSDomEvents {
+ closed: undefined;
+ }
+}
+
@customElement("ha-more-info-history")
export class MoreInfoHistory extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -24,14 +31,26 @@ export class MoreInfoHistory extends LitElement {
return html``;
}
+ const href = "/history?entity_id=" + this.entityId;
+
return html`${isComponentLoaded(this.hass, "history")
- ? html` {
- if ((ev.composedPath()[0] as HTMLElement).tagName === "A") {
- setTimeout(() => closeDialog("ha-more-info-dialog"), 500);
- }
- });
}
protected updated(changedProps: PropertyValues): void {
@@ -182,6 +189,10 @@ export class MoreInfoLogbook extends LitElement {
this._userIdToName = userIdToName;
}
+ private _close(): void {
+ setTimeout(() => fireEvent(this, "closed"), 500);
+ }
+
static get styles() {
return [
haStyle,
@@ -203,6 +214,27 @@ export class MoreInfoLogbook extends LitElement {
display: flex;
justify-content: center;
}
+ .header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
+ }
+ .header > a,
+ a:visited {
+ color: var(--primary-color);
+ }
+ .title {
+ font-family: var(--paper-font-title_-_font-family);
+ -webkit-font-smoothing: var(
+ --paper-font-title_-_-webkit-font-smoothing
+ );
+ font-size: var(--paper-font-subhead_-_font-size);
+ font-weight: var(--paper-font-title_-_font-weight);
+ letter-spacing: var(--paper-font-title_-_letter-spacing);
+ line-height: var(--paper-font-title_-_line-height);
+ }
`,
];
}
diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js
index f5bd40d926..303c2aaae6 100644
--- a/src/dialogs/notifications/notification-drawer.js
+++ b/src/dialogs/notifications/notification-drawer.js
@@ -64,7 +64,6 @@ export class HuiNotificationDrawer extends EventsMixin(
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index c0f9caf20b..80afe58dd7 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -35,6 +35,7 @@ import "../../components/ha-chip";
import "../../components/ha-circular-progress";
import "../../components/ha-dialog";
import "../../components/ha-header-bar";
+import "../../components/ha-icon-button";
import { domainToName } from "../../data/integration";
import { getPanelNameTranslationKey } from "../../data/panel";
import { PageNavigation } from "../../layouts/hass-tabs-subpage";
@@ -160,13 +161,12 @@ export class QuickBar extends LitElement {
>`}
${this._search &&
html`
-
-
+ .label=${this.hass!.localize("ui.common.clear")}
+ .path=${mdiClose}
+ >
`}
${!items
@@ -386,10 +386,14 @@ export class QuickBar extends LitElement {
private _generateEntityItems(): EntityItem[] {
return Object.keys(this.hass.states)
.map((entityId) => {
+ const entityState = this.hass.states[entityId];
const entityItem = {
- primaryText: computeStateName(this.hass.states[entityId]),
+ primaryText: computeStateName(entityState),
altText: entityId,
- icon: domainIcon(computeDomain(entityId), this.hass.states[entityId]),
+ icon: entityState.attributes.icon,
+ iconPath: entityState.attributes.icon
+ ? undefined
+ : domainIcon(computeDomain(entityId), entityState),
action: () => fireEvent(this, "hass-more-info", { entityId }),
};
@@ -613,7 +617,7 @@ export class QuickBar extends LitElement {
color: var(--primary-text-color);
}
- paper-input mwc-icon-button {
+ paper-input ha-icon-button {
--mdc-icon-button-size: 24px;
color: var(--primary-text-color);
}
diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
index 29c2a166ad..4c8fa20780 100644
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@@ -1,6 +1,5 @@
/* eslint-disable lit/prefer-static-styles */
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import type { PaperDialogScrollableElement } from "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
+import { mdiMicrophone } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import {
@@ -16,7 +15,6 @@ import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../common/dom/fire_event";
import { SpeechRecognition } from "../../common/dom/speech-recognition";
import { uid } from "../../common/util/uid";
-import "../../components/dialog/ha-paper-dialog";
import "../../components/ha-icon-button";
import {
AgentInfo,
@@ -26,6 +24,9 @@ import {
} from "../../data/conversation";
import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
+import "../../components/ha-dialog";
+import type { HaDialog } from "../../components/ha-dialog";
+import "@material/mwc-button/mwc-button";
interface Message {
who: string;
@@ -55,7 +56,7 @@ export class HaVoiceCommandDialog extends LitElement {
@state() private _agentInfo?: AgentInfo;
- @query("#messages", true) private messages!: PaperDialogScrollableElement;
+ @query("ha-dialog", true) private _dialog!: HaDialog;
private recognition!: SpeechRecognition;
@@ -69,74 +70,42 @@ export class HaVoiceCommandDialog extends LitElement {
this._agentInfo = await getAgentInfo(this.hass);
}
+ public async closeDialog(): Promise {
+ this._opened = false;
+ if (this.recognition) {
+ this.recognition.abort();
+ }
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
+ }
+
protected render(): TemplateResult {
- // CSS custom property mixins only work in render https://github.com/Polymer/lit-element/issues/633
+ if (!this._opened) {
+ return html``;
+ }
return html`
-
-
- ${this._agentInfo && this._agentInfo.onboarding
- ? html`
-
-
- ${this.hass.localize(
- "ui.panel.config.core.section.core.core_config.unit_system_metric"
- )}
-
- After setting up a new device, it can take up to 2 hours for new data
- to arrive in your energy dashboard.
+ ${this.hass.localize("ui.panel.config.energy.new_device_info")}
-
-
+ >
${stateObj ? computeStateName(stateObj) : entry?.name || entityId}
${stateObj
? html`
-
-
+ >
`
: ""}
diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts
index b7936933e6..96fab20b01 100644
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@@ -15,7 +15,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
import { domainIcon } from "../../../common/entity/domain_icon";
import "../../../components/ha-area-picker";
import "../../../components/ha-expansion-panel";
-import "../../../components/ha-icon-input";
+import "../../../components/ha-icon-picker";
import "../../../components/ha-switch";
import type { HaSwitch } from "../../../components/ha-switch";
import {
@@ -133,20 +133,16 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
.placeholder=${this.entry.original_name}
.disabled=${this._submitting}
>
- html`
-
${entity.restored
? this.hass.localize(
@@ -371,9 +375,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
result.push({
...entry,
- icon: entity
- ? stateIcon(entity)
- : domainIcon(computeDomain(entry.entity_id)),
+ entity,
name:
computeEntityRegistryName(this.hass!, entry) ||
this.hass.localize("state.default.unavailable"),
@@ -540,32 +542,35 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
>
`
: html`
-
${this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.button"
)}
-
${this.hass.localize(
"ui.panel.config.entities.picker.disable_selected.button"
)}
-
${this.hass.localize(
"ui.panel.config.entities.picker.remove_selected.button"
@@ -575,17 +580,13 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
`
: html`
-
-
+ .path=${mdiFilterVariant}
+ >
mwc-button,
- .header-btns > mwc-icon-button {
+ .header-btns > ha-icon-button {
margin: 8px;
}
ha-button-menu {
diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts
index af6bece8df..9ae73825f4 100644
--- a/src/panels/config/helpers/dialog-helper-detail.ts
+++ b/src/panels/config/helpers/dialog-helper-detail.ts
@@ -121,10 +121,10 @@ export class DialogHelperDetail extends LitElement {
.platform=${platform}
dialogInitialFocus
>
-
`;
}
diff --git a/src/panels/config/helpers/forms/ha-input_datetime-form.ts b/src/panels/config/helpers/forms/ha-input_datetime-form.ts
index d28277078c..8f9f89c084 100644
--- a/src/panels/config/helpers/forms/ha-input_datetime-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_datetime-form.ts
@@ -1,13 +1,14 @@
import "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
import { InputDateTime } from "../../../../data/input_datetime";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
+import "../../../../components/ha-formfield";
+import "../../../../components/ha-radio";
+import type { HaRadio } from "../../../../components/ha-radio";
@customElement("ha-input_datetime-form")
class HaInputDateTimeForm extends LitElement {
@@ -70,43 +71,60 @@ class HaInputDateTimeForm extends LitElement {
.invalid=${nameInvalid}
dialogInitialFocus
>
-
+
+
+ ${this.hass.localize("ui.dialogs.more_info_control.history")}
+
+ ${this.hass.localize(
+ "ui.dialogs.more_info_control.show_more"
+ )}
+
+
+ ${this.hass.localize("ui.dialogs.more_info_control.logbook")}
+
+ ${this.hass.localize(
+ "ui.dialogs.more_info_control.show_more"
+ )}
+ [[localize('ui.notification_drawer.title')]]
- ${this._agentInfo.onboarding.text}
-
-
- ${this.hass.localize("ui.common.yes")}!
- ${this.hass.localize("ui.common.no")}
+
+
+ `
+ : ""}
${this._conversation.map(
(message) => html`
`
: ""}
-
-
@@ -199,7 +168,7 @@ export class HaVoiceCommandDialog extends LitElement {
`
: ""}
-
+
`;
}
@@ -345,18 +314,7 @@ export class HaVoiceCommandDialog extends LitElement {
}
private _scrollMessagesBottom() {
- this.messages.scrollTarget.scrollTop =
- this.messages.scrollTarget.scrollHeight;
- if (this.messages.scrollTarget.scrollTop === 0) {
- fireEvent(this.messages, "iron-resize");
- }
- }
-
- private _openedChanged(ev: CustomEvent) {
- this._opened = ev.detail.value;
- if (!this._opened && this.recognition) {
- this.recognition.abort();
- }
+ this._dialog.scrollToPos(0, 99999);
}
private _computeMessageClasses(message: Message) {
@@ -367,10 +325,6 @@ export class HaVoiceCommandDialog extends LitElement {
return [
haStyleDialog,
css`
- :host {
- z-index: 103;
- }
-
ha-icon-button {
color: var(--secondary-text-color);
}
@@ -379,13 +333,12 @@ export class HaVoiceCommandDialog extends LitElement {
color: var(--primary-color);
}
- .input {
- margin: 0 0 16px 0;
+ ha-dialog {
+ --primary-action-button-flex: 1;
+ --secondary-action-button-flex: 0;
+ --mdc-dialog-max-width: 450px;
}
- ha-paper-dialog {
- width: 450px;
- }
a.button {
text-decoration: none;
}
@@ -393,16 +346,7 @@ export class HaVoiceCommandDialog extends LitElement {
width: 100%;
}
.onboarding {
- padding: 0 24px;
- }
- paper-dialog-scrollable.top-border::before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 1px;
- background: var(--divider-color);
+ border-bottom: 1px solid var(--divider-color);
}
.side-by-side {
display: flex;
diff --git a/src/entrypoints/authorize.ts b/src/entrypoints/authorize.ts
index 6150ebb7e0..36954a3fcf 100644
--- a/src/entrypoints/authorize.ts
+++ b/src/entrypoints/authorize.ts
@@ -4,6 +4,7 @@ import "../auth/ha-authorize";
import "../resources/ha-style";
import "../resources/roboto";
import "../resources/safari-14-attachshadow-patch";
+import "../resources/array.flat.polyfill";
/* polyfill for paper-dropdown */
setTimeout(
diff --git a/src/entrypoints/onboarding.ts b/src/entrypoints/onboarding.ts
index 9c085ed82f..44a67890ab 100644
--- a/src/entrypoints/onboarding.ts
+++ b/src/entrypoints/onboarding.ts
@@ -4,6 +4,7 @@ import "../onboarding/ha-onboarding";
import "../resources/ha-style";
import "../resources/roboto";
import "../resources/safari-14-attachshadow-patch";
+import "../resources/array.flat.polyfill";
declare global {
interface Window {
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index bbdc54dca5..b92f35e2e9 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -157,6 +157,7 @@ export class HaTabsSubpageDataTable extends LitElement {
: hiddenLabel;
const headerToolbar = html` a {
+ overflow: hidden;
+ max-width: 45%;
}
#tabbar.bottom-bar {
diff --git a/src/layouts/supervisor-error-screen.ts b/src/layouts/supervisor-error-screen.ts
index f59ae95538..cc9a9be2ad 100644
--- a/src/layouts/supervisor-error-screen.ts
+++ b/src/layouts/supervisor-error-screen.ts
@@ -91,12 +91,6 @@ class SupervisorErrorScreen extends LitElement {
: this.hass.themes.default_theme);
themeSettings = this.hass.selectedTheme;
- if (themeName === "default" && themeSettings?.dark === undefined) {
- themeSettings = {
- ...this.hass.selectedTheme,
- dark: this.hass.themes.darkMode,
- };
- }
} else {
themeName =
(this.hass.selectedTheme as unknown as string) ||
diff --git a/src/mixins/dialog-mixin.js b/src/mixins/dialog-mixin.js
deleted file mode 100644
index cc8103935a..0000000000
--- a/src/mixins/dialog-mixin.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { PaperDialogBehavior } from "@polymer/paper-dialog-behavior/paper-dialog-behavior";
-import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
-import { dedupingMixin } from "@polymer/polymer/lib/utils/mixin";
-import { EventsMixin } from "./events-mixin";
-/**
- * @polymerMixin
- * @appliesMixin EventsMixin
- * @appliesMixin PaperDialogBehavior
- */
-export default dedupingMixin(
- (superClass) =>
- class extends mixinBehaviors(
- [EventsMixin, PaperDialogBehavior],
- superClass
- ) {
- static get properties() {
- return {
- withBackdrop: {
- type: Boolean,
- value: true,
- },
- };
- }
- }
-);
diff --git a/src/onboarding/action-badge.ts b/src/onboarding/action-badge.ts
index e97c9c5bd8..c53f57ca52 100644
--- a/src/onboarding/action-badge.ts
+++ b/src/onboarding/action-badge.ts
@@ -1,6 +1,6 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
-import "../components/ha-icon";
+import "../components/ha-svg-icon";
@customElement("action-badge")
class ActionBadge extends LitElement {
@@ -15,9 +15,12 @@ class ActionBadge extends LitElement {
protected render(): TemplateResult {
return html`
+ ${this._agentInfo && this._agentInfo.onboarding
+ ? html`
+
- `
- : ""}
-
+ ${this._agentInfo.onboarding.text}
+
-
+ ${this.hass.localize("ui.common.yes")}!
+ ${this.hass.localize("ui.common.no")}
+
+
+
-
${this.title}
diff --git a/src/onboarding/integration-badge.ts b/src/onboarding/integration-badge.ts
index c7a18f07ca..62e48d1b00 100644
--- a/src/onboarding/integration-badge.ts
+++ b/src/onboarding/integration-badge.ts
@@ -1,6 +1,6 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
-import "../components/ha-icon";
+import "../components/ha-svg-icon";
import { brandsUrl } from "../util/brands-url";
@customElement("integration-badge")
@@ -27,7 +27,10 @@ class IntegrationBadge extends LitElement {
referrerpolicy="no-referrer"
/>
${this.badgeIcon
- ? html` ${this.title}
diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts
index 83a1e06281..d0f61cfbbc 100644
--- a/src/onboarding/onboarding-core-config.ts
+++ b/src/onboarding/onboarding-core-config.ts
@@ -1,8 +1,6 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@@ -21,6 +19,9 @@ import { SYMBOL_TO_ISO } from "../data/currency";
import { onboardCoreConfigStep } from "../data/onboarding";
import type { PolymerChangedEvent } from "../polymer-types";
import type { HomeAssistant } from "../types";
+import "../components/ha-radio";
+import "../components/ha-formfield";
+import type { HaRadio } from "../components/ha-radio";
const amsterdam: [number, number] = [52.3731339, 4.8903147];
const mql = matchMedia("(prefers-color-scheme: dark)");
@@ -135,32 +136,44 @@ class OnboardingCoreConfig extends LitElement {
"ui.panel.config.core.section.core.core_config.unit_system"
)}
- ${this.hass.localize(
- "ui.panel.config.core.section.core.core_config.metric_example"
+
@@ -144,15 +151,15 @@ export class HAFullCalendar extends LitElement {
@@ -364,6 +371,10 @@ export class HAFullCalendar extends LitElement {
);
--fc-theme-standard-border-color: var(--divider-color);
--fc-border-color: var(--divider-color);
+ --fc-page-bg-color: var(
+ --ha-card-background,
+ var(--card-background-color, white)
+ );
}
a {
diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts
index 91cad5b3a6..ac3862380c 100644
--- a/src/panels/calendar/ha-panel-calendar.ts
+++ b/src/panels/calendar/ha-panel-calendar.ts
@@ -1,5 +1,6 @@
import "@material/mwc-checkbox";
import "@material/mwc-formfield";
+import { mdiRefresh } from "@mdi/js";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import {
@@ -15,6 +16,7 @@ import { styleMap } from "lit/directives/style-map";
import { LocalStorage } from "../../common/decorators/local-storage";
import { HASSDomEvent } from "../../common/dom/fire_event";
import "../../components/ha-card";
+import "../../components/ha-icon-button";
import "../../components/ha-menu-button";
import {
Calendar,
@@ -66,7 +68,8 @@ class PanelCalendar extends LitElement {
>
-
+
-
+
`;
})}
@@ -114,7 +121,9 @@ export class EnergySolarSettings extends LitElement {
- Add solar production
+ ${this.hass.localize(
+ "ui.panel.config.energy.solar.add_solar_production"
+ )}
`
@@ -159,7 +168,7 @@ export class EnergySolarSettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
- title: "Are you sure you want to delete this source?",
+ title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;
diff --git a/src/panels/config/energy/components/styles.ts b/src/panels/config/energy/components/styles.ts
index 91ef2109cd..5aab3c4dbc 100644
--- a/src/panels/config/energy/components/styles.ts
+++ b/src/panels/config/energy/components/styles.ts
@@ -31,7 +31,7 @@ export const energyCardStyles = css`
.row .content {
flex-grow: 1;
}
- mwc-icon-button {
+ ha-icon-button {
color: var(--secondary-text-color);
}
`;
diff --git a/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts
index 61f4841168..12ad6a67cc 100644
--- a/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts
+++ b/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts
@@ -58,7 +58,9 @@ export class DialogEnergyBatterySettings
.path=${mdiBatteryHigh}
style="--mdc-icon-size: 32px;"
>
- Configure battery system`}
+ ${this.hass.localize(
+ "ui.panel.config.energy.battery.dialog.header"
+ )}`}
@closed=${this.closeDialog}
>
${this._error ? html`
+
-
+
`
)}
- Add forecast
+ ${this.hass.localize(
+ "ui.panel.config.energy.solar.dialog.add_forecast"
+ )}
`
: ""}
diff --git a/src/panels/config/energy/ha-config-energy.ts b/src/panels/config/energy/ha-config-energy.ts
index e9c21120c8..b93c93c749 100644
--- a/src/panels/config/energy/ha-config-energy.ts
+++ b/src/panels/config/energy/ha-config-energy.ts
@@ -1,6 +1,5 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
-import "../../../components/ha-svg-icon";
import {
EnergyPreferencesValidation,
getEnergyPreferenceValidation,
@@ -79,8 +78,7 @@ class HaConfigEnergy extends LitElement {
.tabs=${configSections.experiences}
>
+
-
-
- ${this.hass.localize(
- "ui.panel.config.core.section.core.core_config.unit_system_imperial"
- )}
-
- ${this.hass.localize(
- "ui.panel.config.core.section.core.core_config.imperial_example"
+
-
-
+
+
+ ${this.hass.localize(
+ "ui.panel.config.core.section.core.core_config.metric_example"
+ )}
+
`}
+ >
+
+ ${this.hass.localize(
+ "ui.panel.config.core.section.core.core_config.imperial_example"
+ )}
+
`}
+ >
+
@@ -281,10 +294,8 @@ class OnboardingCoreConfig extends LitElement {
this._location = ev.detail.location;
}
- private _unitSystemChanged(
- ev: PolymerChangedEvent
- ) {
- this._unitSystem = ev.detail.value;
+ private _unitSystemChanged(ev: CustomEvent) {
+ this._unitSystem = (ev.target as HaRadio).value as "metric" | "imperial";
}
private async _detect() {
@@ -363,6 +374,13 @@ class OnboardingCoreConfig extends LitElement {
.row > * {
margin: 0 8px;
}
+
+ .radio-group {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ }
+
.footer {
margin-top: 16px;
text-align: right;
diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts
index a914d6855d..9b0370bb9b 100644
--- a/src/onboarding/onboarding-integrations.ts
+++ b/src/onboarding/onboarding-integrations.ts
@@ -8,6 +8,7 @@ import {
TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators";
+import { mdiCheck, mdiDotsHorizontal } from "@mdi/js";
import { fireEvent } from "../common/dom/fire_event";
import { stringCompare } from "../common/string/compare";
import { isComponentLoaded } from "../common/config/is_component_loaded";
@@ -79,7 +80,7 @@ class OnboardingIntegrations extends LitElement {
diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts
index 33e6d35480..3516a14f06 100644
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/src/panels/calendar/ha-full-calendar.ts
@@ -11,7 +11,14 @@ import listPlugin from "@fullcalendar/list";
// @ts-ignore
import listStyle from "@fullcalendar/list/main.css";
import "@material/mwc-button";
-import { mdiViewAgenda, mdiViewDay, mdiViewModule, mdiViewWeek } from "@mdi/js";
+import {
+ mdiChevronLeft,
+ mdiChevronRight,
+ mdiViewAgenda,
+ mdiViewDay,
+ mdiViewModule,
+ mdiViewWeek,
+} from "@mdi/js";
import {
css,
CSSResultGroup,
@@ -118,15 +125,15 @@ export class HAFullCalendar extends LitElement {
)}
${this.calendar.view.title}
${this.hass.localize("panel.calendar")}
diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts
index 92bdbe225b..a2d27e63b7 100644
--- a/src/panels/config/areas/ha-config-areas-dashboard.ts
+++ b/src/panels/config/areas/ha-config-areas-dashboard.ts
@@ -1,4 +1,4 @@
-import { mdiPlus } from "@mdi/js";
+import { mdiHelpCircle, mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -147,7 +147,8 @@ export class HaConfigAreasDashboard extends LitElement {
>
OPTIONS.find((option) => option in action);
+const getType = (action: Action | undefined) =>
+ action ? OPTIONS.find((option) => option in action) : undefined;
declare global {
// for fire event
@@ -98,6 +100,19 @@ export default class HaAutomationActionRow extends LitElement {
@query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
+ private _processedTypes = memoizeOne(
+ (localize: LocalizeFunc): [string, string][] =>
+ OPTIONS.map(
+ (action) =>
+ [
+ action,
+ localize(
+ `ui.panel.config.automation.editor.actions.type.${action}.label`
+ ),
+ ] as [string, string]
+ ).sort((a, b) => stringCompare(a[1], b[1]))
+ );
+
protected updated(changedProperties: PropertyValues) {
if (!changedProperties.has("action")) {
return;
@@ -124,41 +139,32 @@ export default class HaAutomationActionRow extends LitElement {
${this._warnings
- ? html`
-
- ${OPTIONS.map(
- (opt) => html`
-
- ${this.hass.localize(
- `ui.panel.config.automation.editor.actions.type.${opt}.label`
- )}
-
- `
- )}
-
-
+ ${this._processedTypes(this.hass.localize).map(
+ ([opt, label]) => html`
+ ${label}
+ `
+ )}
+
+
Add return
+ ${this.hass.localize(
+ "ui.panel.config.energy.grid.add_return"
+ )}
-
- Add CO2 signal integration
+ ${this.hass.localize(
+ "ui.panel.config.energy.grid.add_co2_signal"
+ )}
`
@@ -236,8 +258,7 @@ export class EnergyGridSettings extends LitElement {
const entryId = ev.currentTarget.closest(".row").entry.entry_id;
if (
!(await showConfirmationDialog(this, {
- title:
- "Are you sure you want to delete this integration? It will remove the entities it provides",
+ title: this.hass.localize("ui.panel.config.energy.delete_integration"),
}))
) {
return;
@@ -374,7 +395,7 @@ export class EnergyGridSettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
- title: "Are you sure you want to delete this source?",
+ title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;
@@ -404,7 +425,7 @@ export class EnergyGridSettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
- title: "Are you sure you want to delete this source?",
+ title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;
diff --git a/src/panels/config/energy/components/ha-energy-solar-settings.ts b/src/panels/config/energy/components/ha-energy-solar-settings.ts
index eaec9ded9a..eca1055649 100644
--- a/src/panels/config/energy/components/ha-energy-solar-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-solar-settings.ts
@@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
import {
EnergyInfo,
EnergyPreferences,
@@ -81,7 +82,11 @@ export class EnergySolarSettings extends LitElement {
`
)}
-
- ${this.hass.localize("ui.errors.config.editor_not_supported")}:
-
+ ? html`
${this._warnings!.length > 0 && this._warnings![0] !== undefined
? html`
`
+ `
: ""}
${yamlMode
? html`
@@ -216,28 +225,21 @@ export default class HaAutomationActionRow extends LitElement {
>
`
: html`
- + ? html`
-
${this._warnings!.map(
@@ -192,7 +201,7 @@ export default class HaAutomationActionRow extends LitElement {
${dynamicElement(`ha-automation-action-${type}`, {
hass: this.hass,
@@ -297,8 +299,7 @@ export default class HaAutomationActionRow extends LitElement {
}
private _typeChanged(ev: CustomEvent) {
- const type = ((ev.target as PaperListboxElement)?.selectedItem as any)
- ?.action;
+ const type = (ev.target as Select).value;
if (!type) {
return;
diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
index 584d217b90..f342512745 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
@@ -5,6 +5,7 @@ import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import { ensureArray } from "../../../../../common/ensure-array";
+import "../../../../../components/ha-icon-button";
import { Condition } from "../../../../../data/automation";
import { Action, ChooseAction } from "../../../../../data/script";
import { haStyle } from "../../../../../resources/styles";
@@ -28,15 +29,14 @@ export class HaChooseAction extends LitElement implements ActionElement {
return html`
${(action.choose ? ensureArray(action.choose) : []).map(
(option, idx) => html`
-
-
+ .path=${mdiDelete}
+ >
${this.hass.localize(
@@ -161,7 +161,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
display: block;
text-align: center;
}
- mwc-icon-button {
+ ha-icon-button {
position: absolute;
right: 0;
padding: 4px;
diff --git a/src/panels/config/automation/action/types/ha-automation-action-delay.ts b/src/panels/config/automation/action/types/ha-automation-action-delay.ts
index e03a533be6..488494e65e 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-delay.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-delay.ts
@@ -40,6 +40,9 @@ export class HaDelayAction extends LitElement implements ActionElement {
protected render() {
return html`
`;
})}
Add consumption ${this.hass.localize(
+ "ui.panel.config.energy.grid.add_consumption"
+ )}
-
-
-
-
+
`;
})}
${this.hass.localize(
@@ -161,7 +161,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
display: block;
text-align: center;
}
- mwc-icon-button {
+ ha-icon-button {
position: absolute;
right: 0;
padding: 4px;
diff --git a/src/panels/config/automation/action/types/ha-automation-action-delay.ts b/src/panels/config/automation/action/types/ha-automation-action-delay.ts
index e03a533be6..488494e65e 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-delay.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-delay.ts
@@ -40,6 +40,9 @@ export class HaDelayAction extends LitElement implements ActionElement {
protected render() {
return html`
+ OPTIONS.map(
+ (condition) =>
+ [
+ condition,
+ localize(
+ `ui.panel.config.automation.editor.conditions.type.${condition}.label`
+ ),
+ ] as [string, string]
+ ).sort((a, b) => stringCompare(a[1], b[1]))
+ );
+
protected render() {
const selected = OPTIONS.indexOf(this.condition.condition);
const yamlMode = this.yamlMode || selected === -1;
@@ -71,28 +85,21 @@ export default class HaAutomationConditionEditor extends LitElement {
>
`
: html`
-
-
- ${OPTIONS.map(
- (opt) => html`
-
- ${this.hass.localize(
- `ui.panel.config.automation.editor.conditions.type.${opt}.label`
- )}
-
- `
- )}
-
-
+ ${this._processedTypes(this.hass.localize).map(
+ ([opt, label]) => html`
+ ${label}
+ `
+ )}
+
+
${dynamicElement(
`ha-automation-condition-${this.condition.condition}`,
@@ -104,8 +111,7 @@ export default class HaAutomationConditionEditor extends LitElement {
}
private _typeChanged(ev: CustomEvent) {
- const type = ((ev.target as PaperListboxElement)?.selectedItem as any)
- ?.condition;
+ const type = (ev.target as Select).value;
if (!type) {
return;
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index 8015055358..325949c3b5 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -60,12 +60,12 @@ export default class HaAutomationConditionRow extends LitElement {
`
: ""}
${this._traces && this._traces.length > 0
? html`
-
-
+ >
-
-
+ >
`
: ""}
diff --git a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
index 3c6752ad46..a19ccbed10 100644
--- a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
+++ b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
@@ -1,20 +1,18 @@
import "@material/mwc-button";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state, query } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/dialog/ha-paper-dialog";
import "../../../../components/ha-circular-progress";
import type { AutomationConfig } from "../../../../data/automation";
import { convertThingTalk } from "../../../../data/cloud";
-import type { PolymerChangedEvent } from "../../../../polymer-types";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import "./ha-thingtalk-placeholders";
import type { PlaceholderValues } from "./ha-thingtalk-placeholders";
import type { ThingtalkDialogParams } from "./show-dialog-thingtalk";
+import "../../../../components/ha-dialog";
export interface Placeholder {
name: string;
@@ -38,8 +36,6 @@ class DialogThingtalk extends LitElement {
@state() private _submitting = false;
- @state() private _opened = false;
-
@state() private _placeholders?: PlaceholderContainer;
@query("#input") private _input?: PaperInputElement;
@@ -51,7 +47,6 @@ class DialogThingtalk extends LitElement {
public async showDialog(params: ThingtalkDialogParams): Promise {
this._params = params;
this._error = undefined;
- this._opened = true;
if (params.input) {
this._value = params.input;
await this.updateComplete;
@@ -61,10 +56,10 @@ class DialogThingtalk extends LitElement {
public closeDialog() {
this._placeholders = undefined;
+ this._params = undefined;
if (this._input) {
this._input.value = null;
}
- this._opened = false;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
@@ -77,26 +72,22 @@ class DialogThingtalk extends LitElement {
`;
}
return html`
-
-
- ${this.hass.localize(
- `ui.panel.config.automation.thingtalk.task_selection.header`
- )}
-
-
+
${this._error ? html` ${this._error} ` : ""}
${this.hass.localize(
`ui.panel.config.automation.thingtalk.task_selection.introduction`
@@ -143,23 +134,25 @@ class DialogThingtalk extends LitElement {
class="attribution"
>Powered by Almond
-
-
-
+
+ ${this.hass.localize(`ui.common.skip`)}
+
+
+ ${this._submitting
+ ? html`
+
`;
}
@@ -234,12 +227,6 @@ class DialogThingtalk extends LitElement {
this.closeDialog();
};
- private _openedChanged(ev: PolymerChangedEvent): void {
- if (!ev.detail.value) {
- this.closeDialog();
- }
- }
-
private _handleKeyUp(ev: KeyboardEvent) {
if (ev.keyCode === 13) {
this._generate();
@@ -255,7 +242,7 @@ class DialogThingtalk extends LitElement {
haStyle,
haStyleDialog,
css`
- ha-paper-dialog {
+ ha-dialog {
max-width: 500px;
}
mwc-button.left {
diff --git a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
index 0f62bb0f39..9731a96394 100644
--- a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
+++ b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
@@ -25,7 +25,6 @@ import {
import { subscribeEntityRegistry } from "../../../../data/entity_registry";
import { domainToName } from "../../../../data/integration";
import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
-import { PolymerChangedEvent } from "../../../../polymer-types";
import { haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
import { Placeholder, PlaceholderContainer } from "./dialog-thingtalk";
@@ -124,18 +123,14 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
protected render(): TemplateResult {
return html`
-
-
- ${this.hass.localize(
- `ui.panel.config.automation.thingtalk.link_devices.header`
- )}
-
-
+
${this._error ? html` ${this._error} ` : ""}
${Object.entries(this.placeholders).map(
([type, placeholders]) =>
@@ -243,16 +238,18 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
})}
`
)}
-
-
-
+
+ ${this.hass.localize(`ui.common.skip`)}
+
+
+ ${this.hass.localize(`ui.panel.config.automation.thingtalk.create`)}
+
+
`;
}
@@ -440,11 +437,6 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
this.requestUpdate("_placeholderValues");
}
});
-
- fireEvent(
- this.shadowRoot!.querySelector("ha-paper-dialog")! as HTMLElement,
- "iron-resize"
- );
}
private _entityPicked(ev: Event): void {
@@ -465,24 +457,16 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
fireEvent(this, "placeholders-filled", { value: this._placeholderValues });
}
- private _openedChanged(ev: PolymerChangedEvent): void {
- // The opened-changed event doesn't leave the shadowdom so we re-dispatch it
- this.dispatchEvent(new CustomEvent(ev.type, ev));
- }
-
static get styles(): CSSResultGroup {
return [
haStyleDialog,
css`
- ha-paper-dialog {
+ ha-dialog {
max-width: 500px;
}
mwc-button.left {
margin-right: auto;
}
- paper-dialog-scrollable {
- margin-top: 10px;
- }
h3 {
margin: 10px 0 0 0;
font-weight: 500;
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index 6444b6aaef..3e8a6bee37 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -1,17 +1,19 @@
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical } from "@mdi/js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-select";
+import type { Select } from "@material/mwc-select";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
+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 "../../../../components/ha-button-menu";
import "../../../../components/ha-card";
+import "../../../../components/ha-alert";
import "../../../../components/ha-icon-button";
import type { Trigger } from "../../../../data/automation";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -85,6 +87,19 @@ export default class HaAutomationTriggerRow extends LitElement {
@state() private _yamlMode = false;
+ private _processedTypes = memoizeOne(
+ (localize: LocalizeFunc): [string, string][] =>
+ OPTIONS.map(
+ (action) =>
+ [
+ action,
+ localize(
+ `ui.panel.config.automation.editor.triggers.type.${action}.label`
+ ),
+ ] as [string, string]
+ ).sort((a, b) => stringCompare(a[1], b[1]))
+ );
+
protected render() {
const selected = OPTIONS.indexOf(this.trigger.platform);
const yamlMode = this._yamlMode || selected === -1;
@@ -94,12 +109,11 @@ export default class HaAutomationTriggerRow extends LitElement {
${this._warnings
- ? html`
- ${this.hass.localize("ui.errors.config.editor_not_supported")}:
-
+ ? html`
${this._warnings.length && this._warnings[0] !== undefined
? html`
${this._warnings.map(
@@ -133,7 +150,7 @@ export default class HaAutomationTriggerRow extends LitElement {
`
: ""}
${this.hass.localize("ui.errors.config.edit_in_yaml_supported")}
- `
+ `
: ""}
${yamlMode
? html`
@@ -157,28 +174,21 @@ export default class HaAutomationTriggerRow extends LitElement {
>
`
: html`
-
-
- ${OPTIONS.map(
- (opt) => html`
-
- ${this.hass.localize(
- `ui.panel.config.automation.editor.triggers.type.${opt}.label`
- )}
-
- `
- )}
-
-
+ ${this._processedTypes(this.hass.localize).map(
+ ([opt, label]) => html`
+ ${label}
+ `
+ )}
+
+
-
`;
}
@@ -87,10 +93,17 @@ export default class HaGeolocationTrigger extends LitElement {
fireEvent(this, "value-changed", {
value: {
...this.trigger,
- event: (ev.target as PaperRadioGroupElement).selected,
+ event: (ev.target as HaRadio).value,
},
});
}
+
+ static styles = css`
+ label {
+ display: flex;
+ align-items: center;
+ }
+ `;
}
declare global {
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts
index f4464a4b36..c660b8f132 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts
@@ -1,21 +1,21 @@
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
-import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HaRadio } from "../../../../../components/ha-radio";
import type { HassTrigger } from "../../../../../data/automation";
import type { HomeAssistant } from "../../../../../types";
+import "../../../../../components/ha-formfield";
+import "../../../../../components/ha-radio";
@customElement("ha-automation-trigger-homeassistant")
-export default class HaHassTrigger extends LitElement {
+export class HaHassTrigger extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
- @property() public trigger!: HassTrigger;
+ @property({ attribute: false }) public trigger!: HassTrigger;
public static get defaultConfig() {
return {
- event: "start",
+ event: "start" as HassTrigger["event"],
};
}
@@ -26,23 +26,31 @@ export default class HaHassTrigger extends LitElement {
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.homeassistant.event"
)}
-
-
-
- ${this.hass.localize(
+
-
- ${this.hass.localize(
+ >
+
+
-
+ >
+
-
`;
}
@@ -97,10 +106,17 @@ export class HaZoneTrigger extends LitElement {
fireEvent(this, "value-changed", {
value: {
...this.trigger,
- event: (ev.target as PaperRadioGroupElement).selected,
+ event: (ev.target as HaRadio).value,
},
});
}
+
+ static styles = css`
+ label {
+ display: flex;
+ align-items: center;
+ }
+ `;
}
declare global {
diff --git a/src/panels/config/blueprint/dialog-import-blueprint.ts b/src/panels/config/blueprint/dialog-import-blueprint.ts
index e9d9a4f0ea..ad2cb1eb6c 100644
--- a/src/panels/config/blueprint/dialog-import-blueprint.ts
+++ b/src/panels/config/blueprint/dialog-import-blueprint.ts
@@ -1,5 +1,4 @@
import "@material/mwc-button";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
diff --git a/src/panels/config/blueprint/ha-blueprint-overview.ts b/src/panels/config/blueprint/ha-blueprint-overview.ts
index e5bfb0c997..35123dceb0 100644
--- a/src/panels/config/blueprint/ha-blueprint-overview.ts
+++ b/src/panels/config/blueprint/ha-blueprint-overview.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button";
import {
mdiDelete,
mdiDownload,
@@ -22,6 +21,7 @@ import { extractSearchParam } from "../../../common/url/search-params";
import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
import "../../../components/entity/ha-entity-toggle";
import "../../../components/ha-fab";
+import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
import { showAutomationEditor } from "../../../data/automation";
import {
@@ -29,6 +29,7 @@ import {
Blueprints,
deleteBlueprint,
} from "../../../data/blueprint";
+import { showScriptEditor } from "../../../data/script";
import {
showAlertDialog,
showConfirmationDialog,
@@ -52,6 +53,12 @@ const createNewFunctions = {
use_blueprint: { path: blueprintMeta.path },
});
},
+ script: (blueprintMeta: BlueprintMetaDataPath) => {
+ showScriptEditor({
+ alias: blueprintMeta.name,
+ use_blueprint: { path: blueprintMeta.path },
+ });
+ },
};
@customElement("ha-blueprint-overview")
@@ -62,27 +69,38 @@ class HaBlueprintOverview extends LitElement {
@property({ type: Boolean }) public narrow!: boolean;
- @property() public route!: Route;
+ @property({ attribute: false }) public route!: Route;
- @property() public blueprints!: Blueprints;
+ @property({ attribute: false }) public blueprints!: Record<
+ string,
+ Blueprints
+ >;
- private _processedBlueprints = memoizeOne((blueprints: Blueprints) => {
- const result = Object.entries(blueprints).map(([path, blueprint]) => {
- if ("error" in blueprint) {
- return {
- name: blueprint.error,
- error: true,
- path,
- };
- }
- return {
- ...blueprint.metadata,
- error: false,
- path,
- };
- });
- return result;
- });
+ private _processedBlueprints = memoizeOne(
+ (blueprints: Record) => {
+ const result: any[] = [];
+ Object.entries(blueprints).forEach(([type, typeBlueprints]) =>
+ Object.entries(typeBlueprints).forEach(([path, blueprint]) => {
+ if ("error" in blueprint) {
+ result.push({
+ name: blueprint.error,
+ type,
+ error: true,
+ path,
+ });
+ } else {
+ result.push({
+ ...blueprint.metadata,
+ type,
+ error: false,
+ path,
+ });
+ }
+ })
+ );
+ return result;
+ }
+ );
private _columns = memoizeOne(
(narrow, _language): DataTableColumnContainer => ({
@@ -102,6 +120,20 @@ class HaBlueprintOverview extends LitElement {
`
: undefined,
},
+ type: {
+ title: this.hass.localize(
+ "ui.panel.config.blueprint.overview.headers.type"
+ ),
+ template: (type: string) =>
+ html`${this.hass.localize(
+ `ui.panel.config.blueprint.overview.types.${type}`
+ )}`,
+ sortable: true,
+ filterable: true,
+ hidden: narrow,
+ direction: "asc",
+ width: "10%",
+ },
path: {
title: this.hass.localize(
"ui.panel.config.blueprint.overview.headers.file_name"
@@ -114,29 +146,27 @@ class HaBlueprintOverview extends LitElement {
},
create: {
title: "",
+ width: narrow ? undefined : "20%",
type: narrow ? "icon-button" : undefined,
template: (_, blueprint: any) =>
blueprint.error
? ""
: narrow
- ? html`
- `
+ `
: html`
${this.hass.localize(
- "ui.panel.config.blueprint.overview.use_blueprint"
+ `ui.panel.config.blueprint.overview.create_${blueprint.domain}`
)}
`,
},
@@ -146,7 +176,7 @@ class HaBlueprintOverview extends LitElement {
template: (_, blueprint: any) =>
blueprint.error
? ""
- : html` `}
>
-
-
+ = {};
protected routerOptions: RouterOptions = {
defaultPage: "dashboard",
@@ -41,7 +41,11 @@ class HaConfigBlueprint extends HassRouterPage {
};
private async _getBlueprints() {
- this.blueprints = await fetchBlueprints(this.hass, "automation");
+ const [automation, script] = await Promise.all([
+ fetchBlueprints(this.hass, "automation"),
+ fetchBlueprints(this.hass, "script"),
+ ]);
+ this.blueprints = { automation, script };
}
protected firstUpdated(changedProps) {
diff --git a/src/panels/config/cloud/account/cloud-account.js b/src/panels/config/cloud/account/cloud-account.js
deleted file mode 100644
index 9670794dfc..0000000000
--- a/src/panels/config/cloud/account/cloud-account.js
+++ /dev/null
@@ -1,246 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-item/paper-item-body";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { formatDateTime } from "../../../../common/datetime/format_date_time";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
-import "../../../../components/buttons/ha-call-api-button";
-import "../../../../components/ha-card";
-import { fetchCloudSubscriptionInfo } from "../../../../data/cloud";
-import "../../../../layouts/hass-subpage";
-import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-import "../../../../styles/polymer-ha-style";
-import "../../ha-config-section";
-import "./cloud-alexa-pref";
-import "./cloud-google-pref";
-import "./cloud-remote-pref";
-import "./cloud-tts-pref";
-import "./cloud-webhooks";
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
- static get template() {
- return html`
-
-
-
-
- Home Assistant Cloud
-
-
- [[localize('ui.panel.config.cloud.account.thank_you_note')]]
-
-
-
-
-
-
- [[cloudStatus.email]]
-
- [[_formatSubscription(_subscription)]]
-
-
-
-
-
- [[localize('ui.panel.config.cloud.account.connection_status')]]
-
- [[_computeConnectionStatus(cloudStatus.cloud)]]
-
-
-
-
-
- [[localize('ui.panel.config.cloud.account.manage_account')]]
-
- [[localize('ui.panel.config.cloud.account.sign_out')]]
-
-
-
-
-
- [[localize('ui.panel.config.cloud.account.integrations')]]
-
-
- [[localize('ui.panel.config.cloud.account.integrations_introduction')]]
-
-
- [[localize('ui.panel.config.cloud.account.integrations_introduction2')]]
-
- [[localize('ui.panel.config.cloud.account.integrations_link_all_features')]].
-
-
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- isWide: Boolean,
- narrow: Boolean,
- cloudStatus: Object,
- _subscription: {
- type: Object,
- value: null,
- },
- _rtlDirection: {
- type: Boolean,
- computed: "_computeRTLDirection(hass)",
- },
- };
- }
-
- ready() {
- super.ready();
- this._fetchSubscriptionInfo();
- }
-
- _computeConnectionStatus(status) {
- return status === "connected"
- ? this.hass.localize("ui.panel.config.cloud.account.connected")
- : status === "disconnected"
- ? this.hass.localize("ui.panel.config.cloud.account.not_connected")
- : this.hass.localize("ui.panel.config.cloud.account.connecting");
- }
-
- async _fetchSubscriptionInfo() {
- this._subscription = await fetchCloudSubscriptionInfo(this.hass);
- if (
- this._subscription.provider &&
- this.cloudStatus &&
- this.cloudStatus.cloud !== "connected"
- ) {
- this.fire("ha-refresh-cloud-status");
- }
- }
-
- handleLogout() {
- this.hass
- .callApi("post", "cloud/logout")
- .then(() => this.fire("ha-refresh-cloud-status"));
- }
-
- _formatSubscription(subInfo) {
- if (subInfo === null) {
- return this.hass.localize(
- "ui.panel.config.cloud.account.fetching_subscription"
- );
- }
-
- let description = subInfo.human_description;
-
- if (subInfo.plan_renewal_date) {
- description = description.replace(
- "{periodEnd}",
- formatDateTime(
- new Date(subInfo.plan_renewal_date * 1000),
- this.hass.locale
- )
- );
- }
-
- return description;
- }
-
- _computeRTLDirection(hass) {
- return computeRTLDirection(hass);
- }
-}
-
-customElements.define("cloud-account", CloudAccount);
diff --git a/src/panels/config/cloud/account/cloud-account.ts b/src/panels/config/cloud/account/cloud-account.ts
new file mode 100644
index 0000000000..8e98482979
--- /dev/null
+++ b/src/panels/config/cloud/account/cloud-account.ts
@@ -0,0 +1,268 @@
+import "@material/mwc-button";
+import "@polymer/paper-item/paper-item-body";
+import { LitElement, css, html, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { formatDateTime } from "../../../../common/datetime/format_date_time";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
+import "../../../../components/buttons/ha-call-api-button";
+import "../../../../components/ha-card";
+import {
+ cloudLogout,
+ CloudStatusLoggedIn,
+ fetchCloudSubscriptionInfo,
+ SubscriptionInfo,
+} from "../../../../data/cloud";
+import "../../../../layouts/hass-subpage";
+import { HomeAssistant } from "../../../../types";
+import "../../ha-config-section";
+import "./cloud-alexa-pref";
+import "./cloud-google-pref";
+import "./cloud-remote-pref";
+import "./cloud-tts-pref";
+import "./cloud-webhooks";
+
+@customElement("cloud-account")
+export class CloudAccount extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ type: Boolean }) public isWide = false;
+
+ @property({ type: Boolean }) public narrow = false;
+
+ @property({ attribute: false }) public cloudStatus!: CloudStatusLoggedIn;
+
+ @state() private _subscription?: SubscriptionInfo;
+
+ @state() private _rtlDirection: "rtl" | "ltr" = "rtl";
+
+ protected render() {
+ return html`
+
+
+
+ Home Assistant Cloud
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.account.thank_you_note"
+ )}
+
+
+
+
+
+
+ ${this.cloudStatus.email}
+
+ ${this._subscription
+ ? this._subscription.human_description.replace(
+ "{periodEnd}",
+ this._subscription.plan_renewal_date
+ ? formatDateTime(
+ new Date(
+ this._subscription.plan_renewal_date * 1000
+ ),
+ this.hass.locale
+ )
+ : ""
+ )
+ : this.hass.localize(
+ "ui.panel.config.cloud.account.fetching_subscription"
+ )}
+
+
+
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.account.connection_status"
+ )}
+
+
+ ${this.cloudStatus.cloud === "connected"
+ ? this.hass.localize(
+ "ui.panel.config.cloud.account.connected"
+ )
+ : this.cloudStatus.cloud === "disconnected"
+ ? this.hass.localize(
+ "ui.panel.config.cloud.account.not_connected"
+ )
+ : this.hass.localize(
+ "ui.panel.config.cloud.account.connecting"
+ )}
+
+
+
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.account.manage_account"
+ )}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.account.sign_out"
+ )}
+
+
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.account.integrations"
+ )}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.account.integrations_introduction"
+ )}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.account.integrations_introduction2"
+ )}
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.account.integrations_link_all_features"
+ )}.
+
+
+
+
+
+
+ `;
+ }
+
+ firstUpdated() {
+ this._fetchSubscriptionInfo();
+ }
+
+ protected updated(changedProps: PropertyValues) {
+ if (changedProps.has("hass")) {
+ const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+ if (!oldHass || oldHass.locale !== this.hass.locale) {
+ this._rtlDirection = computeRTLDirection(this.hass);
+ }
+ }
+ }
+
+ private async _fetchSubscriptionInfo() {
+ this._subscription = await fetchCloudSubscriptionInfo(this.hass);
+ if (
+ this._subscription.provider &&
+ this.cloudStatus &&
+ this.cloudStatus.cloud !== "connected"
+ ) {
+ fireEvent(this, "ha-refresh-cloud-status");
+ }
+ }
+
+ private async _handleLogout() {
+ await cloudLogout(this.hass);
+ fireEvent(this, "ha-refresh-cloud-status");
+ }
+
+ _computeRTLDirection(hass) {
+ return computeRTLDirection(hass);
+ }
+
+ static get styles() {
+ return css`
+ [slot="introduction"] {
+ margin: -1em 0;
+ }
+ [slot="introduction"] a {
+ color: var(--primary-color);
+ }
+ .content {
+ padding-bottom: 24px;
+ }
+ .account-row {
+ display: flex;
+ padding: 0 16px;
+ }
+ .card-actions {
+ display: flex;
+ justify-content: space-between;
+ }
+ .card-actions a {
+ text-decoration: none;
+ }
+ mwc-button {
+ align-self: center;
+ }
+ .wrap {
+ white-space: normal;
+ }
+ .status {
+ text-transform: capitalize;
+ padding: 16px;
+ }
+ a {
+ color: var(--primary-color);
+ }
+ `;
+ }
+}
+
+customElements.define("cloud-account", CloudAccount);
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "cloud-account": CloudAccount;
+ }
+}
diff --git a/src/panels/config/cloud/alexa/cloud-alexa.ts b/src/panels/config/cloud/alexa/cloud-alexa.ts
index a375552df0..90f43f83da 100644
--- a/src/panels/config/cloud/alexa/cloud-alexa.ts
+++ b/src/panels/config/cloud/alexa/cloud-alexa.ts
@@ -116,25 +116,22 @@ class CloudAlexa extends LitElement {
? exposedCards
: notExposedCards;
- const iconButton = html`
- `;
+ .label=${this.hass!.localize("ui.panel.config.cloud.alexa.expose")}
+ .path=${config.should_expose !== null
+ ? isExposed
+ ? mdiCheckboxMarked
+ : mdiCloseBox
+ : isDomainExposed
+ ? mdiCheckboxMultipleMarked
+ : mdiCloseBoxMultiple}
+ >`;
target.push(html`
diff --git a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
index a91261914e..0616c0edd9 100644
--- a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
+++ b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
@@ -2,8 +2,7 @@ import "@material/mwc-button";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { formatDateTime } from "../../../../common/datetime/format_date_time";
-import "../../../../components/dialog/ha-paper-dialog";
-import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
+import { fireEvent } from "../../../../common/dom/fire_event";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
@@ -15,11 +14,13 @@ class DialogCloudCertificate extends LitElement {
@property()
private _params?: CloudCertificateDialogParams;
- public async showDialog(params: CloudCertificateDialogParams) {
+ public showDialog(params: CloudCertificateDialogParams) {
this._params = params;
- // Wait till dialog is rendered.
- await this.updateComplete;
- this._dialog.open();
+ }
+
+ public closeDialog() {
+ this._params = undefined;
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render() {
@@ -29,12 +30,12 @@ class DialogCloudCertificate extends LitElement {
const { certificateInfo } = this._params;
return html`
-
-
- ${this.hass!.localize(
- "ui.panel.config.cloud.dialog_certificate.certificate_information"
- )}
-
+
${this.hass!.localize(
@@ -56,31 +57,21 @@ class DialogCloudCertificate extends LitElement {
-
-
+
+ ${this.hass!.localize(
+ "ui.panel.config.cloud.dialog_certificate.close"
+ )}
+
+
`;
}
- private get _dialog(): HaPaperDialog {
- return this.shadowRoot!.querySelector("ha-paper-dialog")!;
- }
-
- private _closeDialog() {
- this._dialog.close();
- }
-
static get styles(): CSSResultGroup {
return [
haStyle,
css`
- ha-paper-dialog {
- width: 535px;
+ ha-dialog {
+ --mdc-dialog-max-width: 535px;
}
.break-word {
overflow-wrap: break-word;
diff --git a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
index ce44207e7c..b018af2959 100644
--- a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
+++ b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
@@ -1,11 +1,9 @@
import "@material/mwc-button";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { state } from "lit/decorators";
-import "../../../../components/dialog/ha-paper-dialog";
-import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
+import { fireEvent } from "../../../../common/dom/fire_event";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@@ -19,11 +17,13 @@ export class DialogManageCloudhook extends LitElement {
@state() private _params?: WebhookDialogParams;
- public async showDialog(params: WebhookDialogParams) {
+ public showDialog(params: WebhookDialogParams) {
this._params = params;
- // Wait till dialog is rendered.
- await this.updateComplete;
- this._dialog.open();
+ }
+
+ public closeDialog() {
+ this._params = undefined;
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render() {
@@ -39,14 +39,14 @@ export class DialogManageCloudhook extends LitElement {
)
: documentationUrl(this.hass!, `/integrations/${webhook.domain}/`);
return html`
-
-
- ${this.hass!.localize(
- "ui.panel.config.cloud.dialog_cloudhook.webhook_for",
- "name",
- webhook.name
- )}
-
+
${this.hass!.localize(
@@ -79,36 +79,29 @@ export class DialogManageCloudhook extends LitElement {
-
-
+
+
+ ${this.hass!.localize(
+ "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
+ )}
+
+
+
+ ${this.hass!.localize("ui.panel.config.cloud.dialog_cloudhook.close")}
+
+
`;
}
- private get _dialog(): HaPaperDialog {
- return this.shadowRoot!.querySelector("ha-paper-dialog")!;
- }
-
private get _paperInput(): PaperInputElement {
return this.shadowRoot!.querySelector("paper-input")!;
}
- private _closeDialog() {
- this._dialog.close();
- }
-
private async _disableWebhook() {
showConfirmationDialog(this, {
text: this.hass!.localize(
@@ -118,7 +111,7 @@ export class DialogManageCloudhook extends LitElement {
confirmText: this.hass!.localize("ui.common.disable"),
confirm: () => {
this._params!.disableHook();
- this._closeDialog();
+ this.closeDialog();
},
});
}
@@ -147,7 +140,7 @@ export class DialogManageCloudhook extends LitElement {
return [
haStyle,
css`
- ha-paper-dialog {
+ ha-dialog {
width: 650px;
}
paper-input {
@@ -156,7 +149,7 @@ export class DialogManageCloudhook extends LitElement {
button.link {
color: var(--primary-color);
}
- .paper-dialog-buttons a {
+ a {
text-decoration: none;
}
`,
diff --git a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js b/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
deleted file mode 100644
index 46b45c9022..0000000000
--- a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../../components/buttons/ha-progress-button";
-import "../../../../components/ha-card";
-import "../../../../layouts/hass-subpage";
-import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-import "../../../../styles/polymer-ha-style";
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
- static get template() {
- return html`
-
-
-
-
-
-
- [[localize('ui.panel.config.cloud.forgot_password.instructions')]]
-
- [[_error]]
- [[localize('ui.panel.config.cloud.forgot_password.send_reset_email')]]
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- narrow: Boolean,
- email: {
- type: String,
- notify: true,
- observer: "_emailChanged",
- },
- _requestInProgress: {
- type: Boolean,
- value: false,
- },
- _error: {
- type: String,
- value: "",
- },
- };
- }
-
- _emailChanged() {
- this._error = "";
- this.$.email.invalid = false;
- }
-
- _keyDown(ev) {
- // validate on enter
- if (ev.keyCode === 13) {
- this._handleEmailPasswordReset();
- ev.preventDefault();
- }
- }
-
- _handleEmailPasswordReset() {
- if (!this.email || !this.email.includes("@")) {
- this.$.email.invalid = true;
- }
-
- if (this.$.email.invalid) return;
-
- this._requestInProgress = true;
-
- this.hass
- .callApi("post", "cloud/forgot_password", {
- email: this.email,
- })
- .then(
- () => {
- this._requestInProgress = false;
- this.fire("cloud-done", {
- flashMessage: this.hass.localize(
- "ui.panel.config.cloud.forgot_password.check_your_email"
- ),
- });
- },
- (err) =>
- this.setProperties({
- _requestInProgress: false,
- _error:
- err && err.body && err.body.message
- ? err.body.message
- : "Unknown error",
- })
- );
- }
-}
-
-customElements.define("cloud-forgot-password", CloudForgotPassword);
diff --git a/src/panels/config/cloud/forgot-password/cloud-forgot-password.ts b/src/panels/config/cloud/forgot-password/cloud-forgot-password.ts
new file mode 100644
index 0000000000..a6b34b9054
--- /dev/null
+++ b/src/panels/config/cloud/forgot-password/cloud-forgot-password.ts
@@ -0,0 +1,156 @@
+import "@material/mwc-textfield/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield/mwc-textfield";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/buttons/ha-progress-button";
+import "../../../../components/ha-alert";
+import "../../../../components/ha-card";
+import { cloudForgotPassword } from "../../../../data/cloud";
+import "../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+
+@customElement("cloud-forgot-password")
+export class CloudForgotPassword extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ type: Boolean }) public narrow = false;
+
+ @property() public email?: string;
+
+ @state() public _requestInProgress = false;
+
+ @state() private _error?: string;
+
+ @query("#email", true) private _emailField!: TextField;
+
+ protected render(): TemplateResult {
+ return html`
+
+
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.forgot_password.instructions"
+ )}
+
+ ${this._error
+ ? html`${this._error} `
+ : ""}
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.forgot_password.send_reset_email"
+ )}
+
+
+
+
+
+ `;
+ }
+
+ private _keyDown(ev: KeyboardEvent) {
+ if (ev.key === "Enter") {
+ this._handleEmailPasswordReset();
+ }
+ }
+
+ private async _handleEmailPasswordReset() {
+ const emailField = this._emailField;
+
+ const email = emailField.value;
+
+ if (!emailField.reportValidity()) {
+ emailField.focus();
+ return;
+ }
+
+ this._requestInProgress = true;
+
+ try {
+ await cloudForgotPassword(this.hass, email);
+ // @ts-ignore
+ fireEvent(this, "email-changed", { value: email });
+ this._requestInProgress = false;
+ // @ts-ignore
+ fireEvent(this, "cloud-done", {
+ flashMessage: this.hass.localize(
+ "ui.panel.config.cloud.forgot_password.check_your_email"
+ ),
+ });
+ } catch (err: any) {
+ this._requestInProgress = false;
+ this._error =
+ err && err.body && err.body.message
+ ? err.body.message
+ : "Unknown error";
+ }
+ }
+
+ static get styles() {
+ return [
+ haStyle,
+ css`
+ .content {
+ padding-bottom: 24px;
+ }
+ ha-card {
+ max-width: 600px;
+ margin: 0 auto;
+ margin-top: 24px;
+ }
+ h1 {
+ margin: 0;
+ }
+ mwc-textfield {
+ width: 100%;
+ }
+ .card-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .card-actions a {
+ color: var(--primary-text-color);
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "cloud-forgot-password": CloudForgotPassword;
+ }
+}
diff --git a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
index 17414d4abc..51ffa4360a 100644
--- a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
+++ b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
@@ -122,25 +122,22 @@ class CloudGoogleAssistant extends LitElement {
? exposedCards
: notExposedCards;
- const iconButton = html`
- `;
+ .label=${this.hass!.localize("ui.panel.config.cloud.google.expose")}
+ .path=${config.should_expose !== null
+ ? isExposed
+ ? mdiCheckboxMarked
+ : mdiCloseBox
+ : isDomainExposed
+ ? mdiCheckboxMultipleMarked
+ : mdiCloseBoxMultiple}
+ >`;
target.push(html`
diff --git a/src/panels/config/cloud/login/cloud-login.js b/src/panels/config/cloud/login/cloud-login.js
deleted file mode 100644
index b40f08c95c..0000000000
--- a/src/panels/config/cloud/login/cloud-login.js
+++ /dev/null
@@ -1,332 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-ripple/paper-ripple";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { computeRTL } from "../../../../common/util/compute_rtl";
-import "../../../../components/buttons/ha-progress-button";
-import "../../../../components/ha-card";
-import "../../../../components/ha-icon-button";
-import "../../../../components/ha-icon-next";
-import "../../../../layouts/hass-subpage";
-import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-import NavigateMixin from "../../../../mixins/navigate-mixin";
-import "../../../../styles/polymer-ha-style";
-import "../../ha-config-section";
-
-/*
- * @appliesMixin NavigateMixin
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-class CloudLogin extends LocalizeMixin(
- NavigateMixin(EventsMixin(PolymerElement))
-) {
- static get template() {
- return html`
-
-
-
-
- Home Assistant Cloud
-
- [[localize('ui.panel.config.cloud.login.introduction')]]
-
- [[localize('ui.panel.config.cloud.login.introduction2')]]
-
- Nabu Casa, Inc[[localize('ui.panel.config.cloud.login.introduction2a')]]
-
- [[localize('ui.panel.config.cloud.login.introduction3')]]
-
-
- [[localize('ui.panel.config.cloud.login.learn_more_link')]]
-
-
-
-
-
-
- [[flashMessage]]
- [[localize('ui.panel.config.cloud.login.dismiss')]]
-
-
-
-
- [[_error]]
- [[localize('ui.panel.config.cloud.login.sign_in')]]
-
-
-
-
-
-
- [[localize('ui.panel.config.cloud.login.start_trial')]]
-
- [[localize('ui.panel.config.cloud.login.trial_info')]]
-
-
-
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- isWide: Boolean,
- narrow: Boolean,
- email: {
- type: String,
- notify: true,
- },
- _password: {
- type: String,
- value: "",
- },
- _requestInProgress: {
- type: Boolean,
- value: false,
- },
- flashMessage: {
- type: String,
- notify: true,
- },
- rtl: {
- type: Boolean,
- reflectToAttribute: true,
- computed: "_computeRTL(hass)",
- },
- _error: String,
- };
- }
-
- static get observers() {
- return ["_inputChanged(email, _password)"];
- }
-
- connectedCallback() {
- super.connectedCallback();
- if (this.flashMessage) {
- // Wait for DOM to be drawn
- requestAnimationFrame(() =>
- requestAnimationFrame(() => this.$.flashRipple.simulatedRipple())
- );
- }
- }
-
- _inputChanged() {
- this.$.email.invalid = false;
- this.$.password.invalid = false;
- this._error = false;
- }
-
- _keyDown(ev) {
- // validate on enter
- if (ev.keyCode === 13) {
- this._handleLogin();
- ev.preventDefault();
- }
- }
-
- _handleLogin() {
- let invalid = false;
-
- if (!this.email || !this.email.includes("@")) {
- this.$.email.invalid = true;
- this.$.email.focus();
- invalid = true;
- }
-
- if (this._password.length < 8) {
- this.$.password.invalid = true;
-
- if (!invalid) {
- invalid = true;
- this.$.password.focus();
- }
- }
-
- if (invalid) return;
-
- this._requestInProgress = true;
-
- this.hass
- .callApi("post", "cloud/login", {
- email: this.email,
- password: this._password,
- })
- .then(
- () => {
- this.fire("ha-refresh-cloud-status");
- this.setProperties({
- email: "",
- _password: "",
- });
- },
- (err) => {
- // Do this before setProperties because changing it clears errors.
- this._password = "";
-
- const errCode = err && err.body && err.body.code;
- if (errCode === "PasswordChangeRequired") {
- alert(
- "[[localize('ui.panel.config.cloud.login.alert_password_change_required')]]"
- );
- this.navigate("/config/cloud/forgot-password");
- return;
- }
-
- const props = {
- _requestInProgress: false,
- _error:
- err && err.body && err.body.message
- ? err.body.message
- : "Unknown error",
- };
-
- if (errCode === "UserNotConfirmed") {
- props._error =
- "[[localize('ui.panel.config.cloud.login.alert_email_confirm_necessary')]]";
- }
-
- this.setProperties(props);
- this.$.email.focus();
- }
- );
- }
-
- _handleRegister() {
- this.flashMessage = "";
- this.navigate("/config/cloud/register");
- }
-
- _handleForgotPassword() {
- this.flashMessage = "";
- this.navigate("/config/cloud/forgot-password");
- }
-
- _dismissFlash() {
- // give some time to let the ripple finish.
- setTimeout(() => {
- this.flashMessage = "";
- }, 200);
- }
-
- _computeRTL(hass) {
- return computeRTL(hass);
- }
-}
-
-customElements.define("cloud-login", CloudLogin);
diff --git a/src/panels/config/cloud/login/cloud-login.ts b/src/panels/config/cloud/login/cloud-login.ts
new file mode 100644
index 0000000000..c058985a60
--- /dev/null
+++ b/src/panels/config/cloud/login/cloud-login.ts
@@ -0,0 +1,310 @@
+import "@material/mwc-button";
+import "@material/mwc-textfield/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield/mwc-textfield";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { navigate } from "../../../../common/navigate";
+import "../../../../components/buttons/ha-progress-button";
+import "../../../../components/ha-alert";
+import "../../../../components/ha-card";
+import "../../../../components/ha-icon-next";
+import { cloudLogin } from "../../../../data/cloud";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
+import "../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../resources/styles";
+import "../../../../styles/polymer-ha-style";
+import { HomeAssistant } from "../../../../types";
+import "../../ha-config-section";
+
+@customElement("cloud-login")
+export class CloudLogin extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ type: Boolean }) public isWide = false;
+
+ @property({ type: Boolean }) public narrow = false;
+
+ @property() public email?: string;
+
+ @property() public flashMessage?: string;
+
+ @state() private _password?: string;
+
+ @state() private _requestInProgress = false;
+
+ @state() private _error?: string;
+
+ @query("#email", true) private _emailField!: TextField;
+
+ @query("#password", true) private _passwordField!: TextField;
+
+ protected render(): TemplateResult {
+ return html`
+
+
+
+ Home Assistant Cloud
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.login.introduction"
+ )}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.login.introduction2"
+ )}
+
+ Nabu Casa, Inc${this.hass.localize(
+ "ui.panel.config.cloud.login.introduction2a"
+ )}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.login.introduction3"
+ )}
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.login.learn_more_link"
+ )}
+
+
+
+
+ ${this.flashMessage
+ ? html`
+ ${this.flashMessage}
+ `
+ : ""}
+
+
+
+ ${this._error
+ ? html`${this._error} `
+ : ""}
+ ${this.hass.localize(
+ "ui.panel.config.cloud.login.sign_in"
+ )}
+
+
+
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.login.start_trial"
+ )}
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.login.trial_info"
+ )}
+
+
+
+
+
+
+
+ `;
+ }
+
+ private _keyDown(ev: KeyboardEvent) {
+ if (ev.key === "Enter") {
+ this._handleLogin();
+ }
+ }
+
+ private async _handleLogin() {
+ const emailField = this._emailField;
+ const passwordField = this._passwordField;
+
+ const email = emailField.value;
+ const password = passwordField.value;
+
+ if (!emailField.reportValidity()) {
+ passwordField.reportValidity();
+ emailField.focus();
+ return;
+ }
+
+ if (!passwordField.reportValidity()) {
+ passwordField.focus();
+ return;
+ }
+
+ this._requestInProgress = true;
+
+ try {
+ await cloudLogin(this.hass, email, password);
+ fireEvent(this, "ha-refresh-cloud-status");
+ this.email = "";
+ this._password = "";
+ } catch (err: any) {
+ const errCode = err && err.body && err.body.code;
+ if (errCode === "PasswordChangeRequired") {
+ showAlertDialog(this, {
+ title: this.hass.localize(
+ "ui.panel.config.cloud.login.alert_password_change_required"
+ ),
+ });
+ navigate("/config/cloud/forgot-password");
+ return;
+ }
+
+ this._password = "";
+ this._requestInProgress = false;
+
+ if (errCode === "UserNotConfirmed") {
+ this._error = this.hass.localize(
+ "ui.panel.config.cloud.login.alert_email_confirm_necessary"
+ );
+ } else {
+ this._error =
+ err && err.body && err.body.message
+ ? err.body.message
+ : "Unknown error";
+ }
+
+ emailField.focus();
+ }
+ }
+
+ private _handleRegister() {
+ this._dismissFlash();
+ // @ts-ignore
+ fireEvent(this, "email-changed", { value: this._emailField.value });
+ navigate("/config/cloud/register");
+ }
+
+ private _handleForgotPassword() {
+ this._dismissFlash();
+ // @ts-ignore
+ fireEvent(this, "email-changed", { value: this._emailField.value });
+ navigate("/config/cloud/forgot-password");
+ }
+
+ private _dismissFlash() {
+ // @ts-ignore
+ fireEvent(this, "flash-message-changed", { value: "" });
+ }
+
+ static get styles() {
+ return [
+ haStyle,
+ css`
+ .content {
+ padding-bottom: 24px;
+ }
+ [slot="introduction"] {
+ margin: -1em 0;
+ }
+ [slot="introduction"] a {
+ color: var(--primary-color);
+ }
+ paper-item {
+ cursor: pointer;
+ }
+ ha-card {
+ overflow: hidden;
+ }
+ ha-card .card-header {
+ margin-bottom: -8px;
+ }
+ h1 {
+ margin: 0;
+ }
+ .card-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .login-form {
+ display: flex;
+ flex-direction: column;
+ }
+ .pwd-forgot-link {
+ color: var(--secondary-text-color) !important;
+ text-align: right !important;
+ align-self: flex-end;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "cloud-login": CloudLogin;
+ }
+}
diff --git a/src/panels/config/cloud/register/cloud-register.js b/src/panels/config/cloud/register/cloud-register.js
deleted file mode 100644
index b07a19d2f5..0000000000
--- a/src/panels/config/cloud/register/cloud-register.js
+++ /dev/null
@@ -1,229 +0,0 @@
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../../components/buttons/ha-progress-button";
-import "../../../../components/ha-card";
-import "../../../../layouts/hass-subpage";
-import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-import "../../../../styles/polymer-ha-style";
-import { documentationUrl } from "../../../../util/documentation-url";
-import "../../ha-config-section";
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
- static get template() {
- return html`
-
-
-
-
- [[localize('ui.panel.config.cloud.register.headline')]]
-
-
- [[localize('ui.panel.config.cloud.register.information')]]
-
-
- [[localize('ui.panel.config.cloud.register.information2')]]
-
-
- - [[localize('ui.panel.config.cloud.register.feature_remote_control')]]
- - [[localize('ui.panel.config.cloud.register.feature_google_home')]]
- - [[localize('ui.panel.config.cloud.register.feature_amazon_alexa')]]
- - [[localize('ui.panel.config.cloud.register.feature_webhook_apps')]]
-
-
- [[localize('ui.panel.config.cloud.register.information3')]] Nabu Casa, Inc[[localize('ui.panel.config.cloud.register.information3a')]]
-
-
-
- [[localize('ui.panel.config.cloud.register.information4')]]
-
-
-
-
-
-
-
- [[_error]]
-
- [[localize('ui.panel.config.cloud.register.start_trial')]]
-
-
-
-
-
-
-`;
- }
-
- static get properties() {
- return {
- hass: Object,
- isWide: Boolean,
- narrow: Boolean,
- email: {
- type: String,
- notify: true,
- },
-
- _requestInProgress: {
- type: Boolean,
- value: false,
- },
- _password: {
- type: String,
- value: "",
- },
- _error: {
- type: String,
- value: "",
- },
- };
- }
-
- static get observers() {
- return ["_inputChanged(email, _password)"];
- }
-
- _inputChanged() {
- this._error = "";
- this.$.email.invalid = false;
- this.$.password.invalid = false;
- }
-
- _keyDown(ev) {
- // validate on enter
- if (ev.keyCode === 13) {
- this._handleRegister();
- ev.preventDefault();
- }
- }
-
- _computeDocumentationUrlTos(hass) {
- return documentationUrl(hass, "/tos/");
- }
-
- _computeDocumentationUrlPrivacy(hass) {
- return documentationUrl(hass, "/privacy/");
- }
-
- _handleRegister() {
- let invalid = false;
-
- if (!this.email || !this.email.includes("@")) {
- this.$.email.invalid = true;
- this.$.email.focus();
- invalid = true;
- }
-
- if (this._password.length < 8) {
- this.$.password.invalid = true;
-
- if (!invalid) {
- invalid = true;
- this.$.password.focus();
- }
- }
-
- if (invalid) return;
-
- this._requestInProgress = true;
-
- this.hass
- .callApi("post", "cloud/register", {
- email: this.email,
- password: this._password,
- })
- .then(
- () => this._verificationEmailSent(),
- (err) => {
- // Do this before setProperties because changing it clears errors.
- this._password = "";
-
- this.setProperties({
- _requestInProgress: false,
- _error:
- err && err.body && err.body.message
- ? err.body.message
- : "Unknown error",
- });
- }
- );
- }
-
- _handleResendVerifyEmail() {
- if (!this.email) {
- this.$.email.invalid = true;
- return;
- }
-
- this.hass
- .callApi("post", "cloud/resend_confirm", {
- email: this.email,
- })
- .then(
- () => this._verificationEmailSent(),
- (err) =>
- this.setProperties({
- _error:
- err && err.body && err.body.message
- ? err.body.message
- : "Unknown error",
- })
- );
- }
-
- _verificationEmailSent() {
- this.setProperties({
- _requestInProgress: false,
- _password: "",
- });
- this.fire("cloud-done", {
- flashMessage: this.hass.localize(
- "ui.panel.config.cloud.register.account_created"
- ),
- });
- }
-}
-
-customElements.define("cloud-register", CloudRegister);
diff --git a/src/panels/config/cloud/register/cloud-register.ts b/src/panels/config/cloud/register/cloud-register.ts
new file mode 100644
index 0000000000..10e539b05b
--- /dev/null
+++ b/src/panels/config/cloud/register/cloud-register.ts
@@ -0,0 +1,293 @@
+import "@material/mwc-textfield/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield/mwc-textfield";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/buttons/ha-progress-button";
+import "../../../../components/ha-alert";
+import "../../../../components/ha-card";
+import { cloudRegister, cloudResendVerification } from "../../../../data/cloud";
+import "../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+import "../../ha-config-section";
+
+@customElement("cloud-register")
+export class CloudRegister extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ type: Boolean }) public isWide = false;
+
+ @property({ type: Boolean }) public narrow = false;
+
+ @property() public email?: string;
+
+ @state() private _requestInProgress = false;
+
+ @state() private _password = "";
+
+ @state() private _error?: string;
+
+ @query("#email", true) private _emailField!: TextField;
+
+ @query("#password", true) private _passwordField!: TextField;
+
+ protected render(): TemplateResult {
+ return html`
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.headline"
+ )}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.information"
+ )}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.information2"
+ )}
+
+
+ -
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.feature_remote_control"
+ )}
+
+ -
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.feature_google_home"
+ )}
+
+ -
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.feature_amazon_alexa"
+ )}
+
+ -
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.feature_webhook_apps"
+ )}
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.information3"
+ )}
+ Nabu Casa, Inc
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.information3a"
+ )}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.information4"
+ )}
+
+
+
+
+ ${this._error
+ ? html`${this._error} `
+ : ""}
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.start_trial"
+ )}
+
+
+
+
+
+
+ `;
+ }
+
+ private _keyDown(ev: KeyboardEvent) {
+ if (ev.key === "Enter") {
+ this._handleRegister();
+ }
+ }
+
+ private async _handleRegister() {
+ const emailField = this._emailField;
+ const passwordField = this._passwordField;
+
+ const email = emailField.value;
+ const password = passwordField.value;
+
+ if (!emailField.reportValidity()) {
+ passwordField.reportValidity();
+ emailField.focus();
+ return;
+ }
+
+ if (!passwordField.reportValidity()) {
+ passwordField.focus();
+ return;
+ }
+
+ this._requestInProgress = true;
+
+ try {
+ await cloudRegister(this.hass, email, password);
+ this._verificationEmailSent(email);
+ } catch (err: any) {
+ this._password = "";
+ this._requestInProgress = false;
+ this._error =
+ err && err.body && err.body.message
+ ? err.body.message
+ : "Unknown error";
+ }
+ }
+
+ private async _handleResendVerifyEmail() {
+ const emailField = this._emailField;
+
+ const email = emailField.value;
+
+ if (!emailField.reportValidity()) {
+ emailField.focus();
+ return;
+ }
+
+ try {
+ await cloudResendVerification(this.hass, email);
+ this._verificationEmailSent(email);
+ } catch (err: any) {
+ this._error =
+ err && err.body && err.body.message
+ ? err.body.message
+ : "Unknown error";
+ }
+ }
+
+ private _verificationEmailSent(email: string) {
+ this._requestInProgress = false;
+ this._password = "";
+ // @ts-ignore
+ fireEvent(this, "email-changed", { value: email });
+ // @ts-ignore
+ fireEvent(this, "cloud-done", {
+ flashMessage: this.hass.localize(
+ "ui.panel.config.cloud.register.account_created"
+ ),
+ });
+ }
+
+ static get styles() {
+ return [
+ haStyle,
+ css`
+ [slot="introduction"] {
+ margin: -1em 0;
+ }
+ [slot="introduction"] a {
+ color: var(--primary-color);
+ }
+ a {
+ color: var(--primary-color);
+ }
+ paper-item {
+ cursor: pointer;
+ }
+ h1 {
+ margin: 0;
+ }
+ .register-form {
+ display: flex;
+ flex-direction: column;
+ }
+ .card-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "cloud-register": CloudRegister;
+ }
+}
diff --git a/src/panels/config/core/ha-config-core-form.ts b/src/panels/config/core/ha-config-core-form.ts
index 4e48098672..495b963121 100644
--- a/src/panels/config/core/ha-config-core-form.ts
+++ b/src/panels/config/core/ha-config-core-form.ts
@@ -1,8 +1,6 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@@ -16,6 +14,9 @@ import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
import { SYMBOL_TO_ISO } from "../../../data/currency";
import type { PolymerChangedEvent } from "../../../polymer-types";
import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-formfield";
+import "../../../components/ha-radio";
+import type { HaRadio } from "../../../components/ha-radio";
@customElement("ha-config-core-form")
class ConfigCoreForm extends LitElement {
@@ -120,32 +121,44 @@ class ConfigCoreForm extends LitElement {
"ui.panel.config.core.section.core.core_config.unit_system"
)}
-
-
- ${this.hass.localize(
- "ui.panel.config.core.section.core.core_config.unit_system_metric"
- )}
-
- ${this.hass.localize(
- "ui.panel.config.core.section.core.core_config.metric_example"
+
+
-
-
- ${this.hass.localize(
- "ui.panel.config.core.section.core.core_config.unit_system_imperial"
- )}
-
- ${this.hass.localize(
- "ui.panel.config.core.section.core.core_config.imperial_example"
+
+ ${this.hass.localize(
+ "ui.panel.config.core.section.core.core_config.metric_example"
+ )}
+ `}
+ >
+
-
-
+
+ ${this.hass.localize(
+ "ui.panel.config.core.section.core.core_config.imperial_example"
+ )}
+ `}
+ >
+
+
@@ -258,10 +271,8 @@ class ConfigCoreForm extends LitElement {
this._location = ev.detail.location;
}
- private _unitSystemChanged(
- ev: PolymerChangedEvent
- ) {
- this._unitSystem = ev.detail.value;
+ private _unitSystemChanged(ev: CustomEvent) {
+ this._unitSystem = (ev.target as HaRadio).value as "metric" | "imperial";
}
private async _save() {
@@ -307,6 +318,12 @@ class ConfigCoreForm extends LitElement {
margin: 0 8px;
}
+ .radio-group {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ }
+
.card-actions {
text-align: right;
}
diff --git a/src/panels/config/core/ha-config-core.js b/src/panels/config/core/ha-config-core.js
index 5b41675898..4e01b9d6af 100644
--- a/src/panels/config/core/ha-config-core.js
+++ b/src/panels/config/core/ha-config-core.js
@@ -3,7 +3,6 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../components/ha-icon-button";
import "../../../layouts/hass-tabs-subpage";
import LocalizeMixin from "../../../mixins/localize-mixin";
import "../../../styles/polymer-ha-style";
diff --git a/src/panels/config/core/ha-config-name-form.ts b/src/panels/config/core/ha-config-name-form.ts
index 3edc3be6d8..7dc7752720 100644
--- a/src/panels/config/core/ha-config-name-form.ts
+++ b/src/panels/config/core/ha-config-name-form.ts
@@ -1,8 +1,6 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-card";
diff --git a/src/panels/config/customize/ha-config-customize.ts b/src/panels/config/customize/ha-config-customize.ts
index 6d6c378b59..03fd6f17e9 100644
--- a/src/panels/config/customize/ha-config-customize.ts
+++ b/src/panels/config/customize/ha-config-customize.ts
@@ -25,7 +25,7 @@ class HaConfigCustomize extends LitElement {
protected render(): TemplateResult {
return html`
-
+
`;
}
diff --git a/src/panels/config/customize/ha-form-customize.js b/src/panels/config/customize/ha-form-customize.js
index 5e22d6b5d9..cd3278abeb 100644
--- a/src/panels/config/customize/ha-form-customize.js
+++ b/src/panels/config/customize/ha-form-customize.js
@@ -180,10 +180,16 @@ export class HaFormCustomize extends LocalizeMixin(PolymerElement) {
this.newAttributes
);
attrs.forEach((attr) => {
- if (attr.closed || attr.secondary || !attr.attribute || !attr.value)
+ if (
+ attr.closed ||
+ attr.secondary ||
+ !attr.attribute ||
+ attr.value === null ||
+ attr.value === undefined
+ )
return;
const value = attr.type === "json" ? JSON.parse(attr.value) : attr.value;
- if (!value) return;
+ if (value === null || value === undefined) return;
data[attr.attribute] = value;
});
diff --git a/src/panels/config/customize/types/ha-customize-boolean.js b/src/panels/config/customize/types/ha-customize-boolean.js
index bf6aa5c7db..803e6d8d21 100644
--- a/src/panels/config/customize/types/ha-customize-boolean.js
+++ b/src/panels/config/customize/types/ha-customize-boolean.js
@@ -1,14 +1,20 @@
-import "@polymer/paper-checkbox/paper-checkbox";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "../../../../components/ha-checkbox";
+import "../../../../components/ha-formfield";
class HaCustomizeBoolean extends PolymerElement {
static get template() {
return html`
-
- [[item.description]]
-
+
+
+
`;
}
@@ -20,5 +26,9 @@ class HaCustomizeBoolean extends PolymerElement {
},
};
}
+
+ checkedChanged(ev) {
+ this.item.value = ev.target.checked;
+ }
}
customElements.define("ha-customize-boolean", HaCustomizeBoolean);
diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts
index f81527cce0..b7428354e4 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@@ -7,7 +7,6 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import "../../../components/ha-card";
import "../../../components/ha-icon-next";
import "../../../components/ha-menu-button";
-import "../../../components/ha-svg-icon";
import { CloudStatus } from "../../../data/cloud";
import "../../../layouts/ha-app-layout";
import { haStyle } from "../../../resources/styles";
diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
index 5bb169256b..0c57f498ce 100644
--- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
@@ -15,16 +15,23 @@ import { domainIcon } from "../../../../common/entity/domain_icon";
import "../../../../components/entity/state-badge";
import "../../../../components/ha-card";
import "../../../../components/ha-icon";
-import { HomeAssistant } from "../../../../types";
-import { HuiErrorCard } from "../../../lovelace/cards/hui-error-card";
+import type { LovelaceRowConfig } from "../../../lovelace/entity-rows/types";
+import type { HomeAssistant } from "../../../../types";
+import type { HuiErrorCard } from "../../../lovelace/cards/hui-error-card";
import { createRowElement } from "../../../lovelace/create-element/create-row-element";
import { addEntitiesToLovelaceView } from "../../../lovelace/editor/add-entities-to-view";
import { LovelaceRow } from "../../../lovelace/entity-rows/types";
import { showEntityEditorDialog } from "../../entities/show-dialog-entity-editor";
import { EntityRegistryStateEntry } from "../ha-config-device-page";
+import { computeStateName } from "../../../../common/entity/compute_state_name";
+import { stripPrefixFromEntityName } from "../../../../common/entity/strip_prefix_from_entity_name";
@customElement("ha-device-entities-card")
export class HaDeviceEntitiesCard extends LitElement {
+ @property() public header!: string;
+
+ @property() public deviceName!: string;
+
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public entities!: EntityRegistryStateEntry[];
@@ -47,11 +54,7 @@ export class HaDeviceEntitiesCard extends LitElement {
const disabledEntities: EntityRegistryStateEntry[] = [];
this._entityRows = [];
return html`
-
+
${this.entities.length
? html`
@@ -102,14 +105,8 @@ export class HaDeviceEntitiesCard extends LitElement {
`
: html`
-
-
-
- ${this.hass.localize(
- "ui.panel.config.devices.entities.none"
- )}
-
-
+
+ ${this.hass.localize("ui.panel.config.devices.entities.none")}
`}
@@ -121,9 +118,21 @@ export class HaDeviceEntitiesCard extends LitElement {
}
private _renderEntity(entry: EntityRegistryStateEntry): TemplateResult {
- const element = createRowElement({ entity: entry.entity_id });
+ const config: LovelaceRowConfig = {
+ entity: entry.entity_id,
+ };
+
+ const element = createRowElement(config);
if (this.hass) {
element.hass = this.hass;
+ const state = this.hass.states[entry.entity_id];
+ const name = stripPrefixFromEntityName(
+ computeStateName(state),
+ `${this.deviceName} `.toLowerCase()
+ );
+ if (name) {
+ config.name = name;
+ }
}
// @ts-ignore
element.entry = entry;
@@ -133,11 +142,15 @@ export class HaDeviceEntitiesCard extends LitElement {
private _renderEntry(entry: EntityRegistryStateEntry): TemplateResult {
return html`
-
-
+
+ .path=${domainIcon(computeDomain(entry.entity_id))}
+ >
${entry.stateName || entry.entity_id}
@@ -168,7 +181,8 @@ export class HaDeviceEntitiesCard extends LitElement {
this.hass,
this.entities
.filter((entity) => !entity.disabled_by)
- .map((entity) => entity.entity_id)
+ .map((entity) => entity.entity_id),
+ this.deviceName
);
}
@@ -190,6 +204,9 @@ export class HaDeviceEntitiesCard extends LitElement {
.disabled-entry {
color: var(--secondary-text-color);
}
+ #entities {
+ margin-top: -24px; /* match the spacing between card title and content of the device info card above it */
+ }
#entities > * {
margin: 8px 16px 8px 8px;
}
@@ -198,12 +215,16 @@ export class HaDeviceEntitiesCard extends LitElement {
}
paper-icon-item {
min-height: 40px;
- padding: 0 8px;
+ padding: 0 16px;
cursor: pointer;
+ --paper-item-icon-width: 48px;
}
.name {
font-size: 14px;
}
+ .empty {
+ text-align: center;
+ }
button.show-more {
color: var(--primary-color);
text-align: left;
diff --git a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
index ffac1d04f3..b69484180e 100644
--- a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
@@ -18,6 +18,7 @@ import {
nodeStatus,
ZWaveJSNodeStatus,
ZWaveJSNodeIdentifiers,
+ SecurityClass,
} from "../../../../../../data/zwave_js";
import { haStyle } from "../../../../../../resources/styles";
import { HomeAssistant } from "../../../../../../types";
@@ -117,13 +118,33 @@ export class HaDeviceInfoZWaveJS extends LitElement {
: this.hass.localize("ui.common.no")}
- ${this.hass.localize("ui.panel.config.zwave_js.device_info.is_secure")}:
- ${this._node.is_secure === true
- ? this.hass.localize("ui.common.yes")
+ ${this.hass.localize(
+ "ui.panel.config.zwave_js.device_info.highest_security"
+ )}:
+ ${this._node.highest_security_class !== null
+ ? this.hass.localize(
+ `ui.panel.config.zwave_js.security_classes.${
+ SecurityClass[this._node.highest_security_class]
+ }.title`
+ )
: this._node.is_secure === false
- ? this.hass.localize("ui.common.no")
+ ? this.hass.localize(
+ "ui.panel.config.zwave_js.security_classes.none.title"
+ )
: this.hass.localize("ui.panel.config.zwave_js.device_info.unknown")}
+
+ ${this.hass.localize(
+ "ui.panel.config.zwave_js.device_info.zwave_plus"
+ )}:
+ ${this._node.zwave_plus_version
+ ? this.hass.localize(
+ "ui.panel.config.zwave_js.device_info.zwave_plus_version",
+ "version",
+ this._node.zwave_plus_version
+ )
+ : this.hass.localize("ui.common.no")}
+
`;
}
diff --git a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
index 13f930437c..8ad148eef4 100644
--- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
+++ b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
@@ -25,7 +25,7 @@ class DialogDeviceRegistryDetail extends LitElement {
@state() private _params?: DeviceRegistryDetailDialogParams;
- @state() private _areaId?: string | null;
+ @property() public _areaId?: string | null;
@state() private _disabledBy!: string | null;
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index 25206b1ca9..5a2d375d53 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -1,3 +1,4 @@
+import { mdiPencil, mdiPlusCircle, mdiOpenInNew } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
@@ -7,9 +8,13 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { stringCompare } from "../../../common/string/compare";
+import { groupBy } from "../../../common/util/group-by";
import { slugify } from "../../../common/string/slugify";
import "../../../components/entity/ha-battery-icon";
+import "../../../components/ha-icon-button";
import "../../../components/ha-icon-next";
+import "../../../components/ha-alert";
+import "../../../components/ha-svg-icon";
import { AreaRegistryEntry } from "../../../data/area_registry";
import {
ConfigEntry,
@@ -47,6 +52,7 @@ import {
loadDeviceRegistryDetailDialog,
showDeviceRegistryDetailDialog,
} from "./device-registry-detail/show-dialog-device-registry-detail";
+import { computeDomain } from "../../../common/entity/compute_domain";
export interface EntityRegistryStateEntry extends EntityRegistryEntry {
stateName?: string | null;
@@ -110,6 +116,30 @@ export class HaConfigDevicePage extends LitElement {
)
);
+ private _entitiesByCategory = memoizeOne(
+ (entities: EntityRegistryEntry[]) => {
+ const result = groupBy(entities, (entry) =>
+ entry.entity_category
+ ? entry.entity_category
+ : ["sensor", "binary_sensor"].includes(computeDomain(entry.entity_id))
+ ? "sensor"
+ : "control"
+ ) as Record<
+ | "control"
+ | "sensor"
+ | NonNullable,
+ EntityRegistryStateEntry[]
+ >;
+ for (const key of ["control", "sensor", "diagnostic", "config"]) {
+ if (!(key in result)) {
+ result[key] = [];
+ }
+ }
+
+ return result;
+ }
+ );
+
private _computeArea = memoizeOne(
(areas, device): AreaRegistryEntry | undefined => {
if (!areas || !device || !device.area_id) {
@@ -155,8 +185,10 @@ export class HaConfigDevicePage extends LitElement {
`;
}
+ const deviceName = computeDeviceName(device, this.hass);
const integrations = this._integrations(device, this.entries);
const entities = this._entities(this.deviceId, this.entities);
+ const entitiesByCategory = this._entitiesByCategory(entities);
const batteryEntity = this._batteryEntity(entities);
const batteryChargingEntity = this._batteryChargingEntity(entities);
const batteryState = batteryEntity
@@ -169,6 +201,13 @@ export class HaConfigDevicePage extends LitElement {
: undefined;
const area = this._computeArea(this.areas, device);
+ const configurationUrlIsHomeAssistant =
+ device.configuration_url?.startsWith("homeassistant://") || false;
+
+ const configurationUrl = configurationUrlIsHomeAssistant
+ ? device.configuration_url!.replace("homeassistant://", "/")
+ : device.configuration_url;
+
return html`
- ${computeDeviceName(device, this.hass)}
-
+ ${deviceName}
- ${this.hass.localize(
- "ui.panel.config.devices.enabled_cause",
- "cause",
- this.hass.localize(
- `ui.panel.config.devices.disabled_by.${device.disabled_by}`
- )
- )}
-
-
+
+ ${this.hass.localize(
+ "ui.panel.config.devices.enabled_cause",
+ "cause",
+ this.hass.localize(
+ `ui.panel.config.devices.disabled_by.${device.disabled_by}`
+ )
+ )}
+
${device.disabled_by === "user"
? html`
@@ -287,23 +328,57 @@ export class HaConfigDevicePage extends LitElement {
`
: html``
}
+ ${
+ configurationUrl
+ ? html`
+
+ `
+ : ""
+ }
${this._renderIntegrationInfo(device, integrations)}
-
- ${
- entities.length
+
+
+ ${["control", "sensor", "config", "diagnostic"].map((category) =>
+ // Make sure we render controls if no other cards will be rendered
+ entitiesByCategory[category].length > 0 ||
+ (entities.length === 0 && category === "control")
? html`
`
- : html``
- }
+ : ""
+ )}
-
+
${
isComponentLoaded(this.hass, "automation")
? html`
@@ -315,14 +390,14 @@ export class HaConfigDevicePage extends LitElement {
+
${this.hass.localize(
"ui.panel.config.devices.add_prompt",
"name",
@@ -370,92 +445,82 @@ export class HaConfigDevicePage extends LitElement {
"ui.panel.config.devices.automation.automations"
)
)}
-
+
`}
`
: ""
}
-
-
${
isComponentLoaded(this.hass, "scene") && entities.length
? html`
-
- ${this.hass.localize(
- "ui.panel.config.devices.scene.scenes"
- )}
+
+ ${this.hass.localize(
+ "ui.panel.config.devices.scene.scenes"
+ )}
-
+
- ${
- this._related?.scene?.length
- ? this._related.scene.map((scene) => {
- const entityState = this.hass.states[scene];
- return entityState
- ? html`
-
-
-
-
- ${computeStateName(entityState)}
-
-
-
- ${!entityState.attributes.id
- ? html`
-
- ${this.hass.localize(
- "ui.panel.config.devices.cant_edit"
- )}
-
- `
- : ""}
-
- `
- : "";
- })
- : html`
-
- ${this.hass.localize(
- "ui.panel.config.devices.add_prompt",
- "name",
- this.hass.localize(
- "ui.panel.config.devices.scene.scenes"
- )
- )}
-
- `
- }
-
+ ${this._related?.scene?.length
+ ? this._related.scene.map((scene) => {
+ const entityState = this.hass.states[scene];
+ return entityState
+ ? html`
+
+
+
+
+ ${computeStateName(entityState)}
+
+
+
+ ${!entityState.attributes.id
+ ? html`
+
+ ${this.hass.localize(
+ "ui.panel.config.devices.cant_edit"
+ )}
+
+ `
+ : ""}
+
+ `
+ : "";
+ })
+ : html`
+
+ ${this.hass.localize(
+ "ui.panel.config.devices.add_prompt",
+ "name",
+ this.hass.localize(
+ "ui.panel.config.devices.scene.scenes"
+ )
+ )}
+
+ `}
`
: ""
@@ -471,14 +536,14 @@ export class HaConfigDevicePage extends LitElement {
+
${this.hass.localize(
"ui.panel.config.devices.add_prompt",
"name",
@@ -508,14 +573,14 @@ export class HaConfigDevicePage extends LitElement {
"ui.panel.config.devices.script.scripts"
)
)}
-
+
`}
`
: ""
}
-
+
`;
}
@@ -895,22 +960,18 @@ export class HaConfigDevicePage extends LitElement {
font-size: var(--paper-font-body1_-_font-size);
}
- paper-item.no-link {
- cursor: default;
- }
-
a {
text-decoration: none;
color: var(--primary-color);
}
- ha-card {
- padding-bottom: 8px;
- }
-
ha-card a {
color: var(--primary-text-color);
}
+
+ ha-svg-icon[slot="trailingIcon"] {
+ display: block;
+ }
`,
];
}
diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts
index 97502831d2..c8f12b685f 100644
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/src/panels/config/devices/ha-config-devices-dashboard.ts
@@ -17,6 +17,7 @@ import {
} from "../../../components/data-table/ha-data-table";
import "../../../components/entity/ha-battery-icon";
import "../../../components/ha-button-menu";
+import "../../../components/ha-icon-button";
import { AreaRegistryEntry } from "../../../data/area_registry";
import { ConfigEntry } from "../../../data/config_entries";
import {
@@ -407,17 +408,13 @@ export class HaConfigDeviceDashboard extends LitElement {
`
: html``}
-
-
+ .path=${mdiFilterVariant}
+ >
Battery systems
+
+ ${this.hass.localize(
+ "ui.panel.config.energy.battery.battery_systems"
+ )}
+
${batterySources.map((source) => {
const fromEntityState = this.hass.states[source.stat_energy_from];
const toEntityState = this.hass.states[source.stat_energy_to];
@@ -101,19 +106,23 @@ export class EnergyBatterySettings extends LitElement {
: source.stat_energy_to}
-
-
-
-
+ Add battery system ${this.hass.localize(
+ "ui.panel.config.energy.battery.add_battery_system"
+ )}
@@ -154,7 +163,7 @@ export class EnergyBatterySettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
- title: "Are you sure you want to delete this source?",
+ title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;
diff --git a/src/panels/config/energy/components/ha-energy-device-settings.ts b/src/panels/config/energy/components/ha-energy-device-settings.ts
index ad277fd0e4..fe75d061f6 100644
--- a/src/panels/config/energy/components/ha-energy-device-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-device-settings.ts
@@ -4,8 +4,9 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeStateName } from "../../../../common/entity/compute_state_name";
-import { stateIcon } from "../../../../common/entity/state_icon";
import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
+import "../../../../components/ha-state-icon";
import {
DeviceConsumptionEnergyPreference,
EnergyPreferences,
@@ -13,8 +14,8 @@ import {
saveEnergyPreferences,
} from "../../../../data/energy";
import {
- showConfirmationDialog,
showAlertDialog,
+ showConfirmationDialog,
} from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@@ -69,26 +70,36 @@ export class EnergyDeviceSettings extends LitElement {
>
`
)}
- Devices
+
+ ${this.hass.localize(
+ "ui.panel.config.energy.device_consumption.devices"
+ )}
+
${this.preferences.device_consumption.map((device) => {
const entityState = this.hass.states[device.stat_consumption];
return html`
-
-
+ Add device
+ ${this.hass.localize(
+ "ui.panel.config.energy.device_consumption.add_device"
+ )}
@@ -113,7 +124,7 @@ export class EnergyDeviceSettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
- title: "Are you sure you want to delete this device?",
+ title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;
diff --git a/src/panels/config/energy/components/ha-energy-gas-settings.ts b/src/panels/config/energy/components/ha-energy-gas-settings.ts
index 9a92798b2b..3f92d1a023 100644
--- a/src/panels/config/energy/components/ha-energy-gas-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-gas-settings.ts
@@ -5,17 +5,18 @@ import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
import {
EnergyPreferences,
- saveEnergyPreferences,
- GasSourceTypeEnergyPreference,
EnergyPreferencesValidation,
EnergyValidationIssue,
+ GasSourceTypeEnergyPreference,
getEnergyGasUnitCategory,
+ saveEnergyPreferences,
} from "../../../../data/energy";
import {
- showConfirmationDialog,
showAlertDialog,
+ showConfirmationDialog,
} from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@@ -75,7 +76,9 @@ export class EnergyGasSettings extends LitElement {
>
`
)}
- Gas consumption
+
+ ${this.hass.localize("ui.panel.config.energy.gas.gas_consumption")}
+
${gasSources.map((source) => {
const entityState = this.hass.states[source.stat_energy_from];
return html`
@@ -90,18 +93,24 @@ export class EnergyGasSettings extends LitElement {
? computeStateName(entityState)
: source.stat_energy_from}
-
-
-
-
+
`;
})}
Add gas source
+ ${this.hass.localize(
+ "ui.panel.config.energy.gas.add_gas_source"
+ )}
@@ -143,7 +152,7 @@ export class EnergyGasSettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
- title: "Are you sure you want to delete this source?",
+ title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;
diff --git a/src/panels/config/energy/components/ha-energy-grid-settings.ts b/src/panels/config/energy/components/ha-energy-grid-settings.ts
index 6f31cd8394..d0b3df4e76 100644
--- a/src/panels/config/energy/components/ha-energy-grid-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-grid-settings.ts
@@ -11,6 +11,7 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
import {
ConfigEntry,
deleteConfigEntry,
@@ -109,7 +110,11 @@ export class EnergyGridSettings extends LitElement {
`
: ""}
- Grid consumption
+
+ ${this.hass.localize(
+ "ui.panel.config.energy.grid.grid_consumption"
+ )}
+
${gridSource.flow_from.map((flow) => {
const entityState = this.hass.states[flow.stat_energy_from];
return html`
@@ -126,23 +131,29 @@ export class EnergyGridSettings extends LitElement {
? computeStateName(entityState)
: flow.stat_energy_from}
-
-
-
-
+
${dynamicElement(
`ha-automation-condition-${this.condition.condition}`,
@@ -104,8 +111,7 @@ export default class HaAutomationConditionEditor extends LitElement {
}
private _typeChanged(ev: CustomEvent) {
- const type = ((ev.target as PaperListboxElement)?.selectedItem as any)
- ?.condition;
+ const type = (ev.target as Select).value;
if (!type) {
return;
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index 8015055358..325949c3b5 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -60,12 +60,12 @@ export default class HaAutomationConditionRow extends LitElement {
Add gas source
+ ${this.hass.localize(
+ "ui.panel.config.energy.gas.add_gas_source"
+ )}
@@ -143,7 +152,7 @@ export class EnergyGasSettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
- title: "Are you sure you want to delete this source?",
+ title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;
diff --git a/src/panels/config/energy/components/ha-energy-grid-settings.ts b/src/panels/config/energy/components/ha-energy-grid-settings.ts
index 6f31cd8394..d0b3df4e76 100644
--- a/src/panels/config/energy/components/ha-energy-grid-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-grid-settings.ts
@@ -11,6 +11,7 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
import {
ConfigEntry,
deleteConfigEntry,
@@ -109,7 +110,11 @@ export class EnergyGridSettings extends LitElement {
`
: ""}
-
`
: ""}
${this._traces && this._traces.length > 0
? html`
{
this._params = params;
this._error = undefined;
- this._opened = true;
if (params.input) {
this._value = params.input;
await this.updateComplete;
@@ -61,10 +56,10 @@ class DialogThingtalk extends LitElement {
public closeDialog() {
this._placeholders = undefined;
+ this._params = undefined;
if (this._input) {
this._input.value = null;
}
- this._opened = false;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
@@ -77,26 +72,22 @@ class DialogThingtalk extends LitElement {
`;
}
return html`
-
-
+
-
-
-
+
`;
})}
-
-
+ >
-
-
+ >
`
: ""}
diff --git a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
index 3c6752ad46..a19ccbed10 100644
--- a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
+++ b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
@@ -1,20 +1,18 @@
import "@material/mwc-button";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state, query } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/dialog/ha-paper-dialog";
import "../../../../components/ha-circular-progress";
import type { AutomationConfig } from "../../../../data/automation";
import { convertThingTalk } from "../../../../data/cloud";
-import type { PolymerChangedEvent } from "../../../../polymer-types";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import "./ha-thingtalk-placeholders";
import type { PlaceholderValues } from "./ha-thingtalk-placeholders";
import type { ThingtalkDialogParams } from "./show-dialog-thingtalk";
+import "../../../../components/ha-dialog";
export interface Placeholder {
name: string;
@@ -38,8 +36,6 @@ class DialogThingtalk extends LitElement {
@state() private _submitting = false;
- @state() private _opened = false;
-
@state() private _placeholders?: PlaceholderContainer;
@query("#input") private _input?: PaperInputElement;
@@ -51,7 +47,6 @@ class DialogThingtalk extends LitElement {
public async showDialog(params: ThingtalkDialogParams): Promise- ${this.hass.localize( - `ui.panel.config.automation.thingtalk.task_selection.header` - )} -
-
${this._error ? html`
+ ${this.hass.localize(`ui.common.skip`)}
+
+
+ ${this._submitting
+ ? html`
+
`;
}
@@ -234,12 +227,6 @@ class DialogThingtalk extends LitElement {
this.closeDialog();
};
- private _openedChanged(ev: PolymerChangedEvent): void {
- if (!ev.detail.value) {
- this.closeDialog();
- }
- }
-
private _handleKeyUp(ev: KeyboardEvent) {
if (ev.keyCode === 13) {
this._generate();
@@ -255,7 +242,7 @@ class DialogThingtalk extends LitElement {
haStyle,
haStyleDialog,
css`
- ha-paper-dialog {
+ ha-dialog {
max-width: 500px;
}
mwc-button.left {
diff --git a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
index 0f62bb0f39..9731a96394 100644
--- a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
+++ b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
@@ -25,7 +25,6 @@ import {
import { subscribeEntityRegistry } from "../../../../data/entity_registry";
import { domainToName } from "../../../../data/integration";
import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
-import { PolymerChangedEvent } from "../../../../polymer-types";
import { haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
import { Placeholder, PlaceholderContainer } from "./dialog-thingtalk";
@@ -124,18 +123,14 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
protected render(): TemplateResult {
return html`
-
-
+
-
- ${this.hass.localize(
- "ui.panel.config.core.section.core.core_config.unit_system_metric"
- )}
-
Add device
+ ${this.hass.localize(
+ "ui.panel.config.energy.device_consumption.add_device"
+ )}
@@ -113,7 +124,7 @@ export class EnergyDeviceSettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
- title: "Are you sure you want to delete this device?",
+ title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;
diff --git a/src/panels/config/energy/components/ha-energy-gas-settings.ts b/src/panels/config/energy/components/ha-energy-gas-settings.ts
index 9a92798b2b..3f92d1a023 100644
--- a/src/panels/config/energy/components/ha-energy-gas-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-gas-settings.ts
@@ -5,17 +5,18 @@ import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeStateName } from "../../../../common/entity/compute_state_name";
import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
import {
EnergyPreferences,
- saveEnergyPreferences,
- GasSourceTypeEnergyPreference,
EnergyPreferencesValidation,
EnergyValidationIssue,
+ GasSourceTypeEnergyPreference,
getEnergyGasUnitCategory,
+ saveEnergyPreferences,
} from "../../../../data/energy";
import {
- showConfirmationDialog,
showAlertDialog,
+ showConfirmationDialog,
} from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@@ -75,7 +76,9 @@ export class EnergyGasSettings extends LitElement {
>
`
)}
- ${this._error}
` : ""}
${this.hass.localize(
`ui.panel.config.automation.thingtalk.task_selection.introduction`
@@ -143,23 +134,25 @@ class DialogThingtalk extends LitElement {
class="attribution"
>Powered by Almond
-
-
-
+ - ${this.hass.localize( - `ui.panel.config.automation.thingtalk.link_devices.header` - )} -
-
${this._error ? html`
+ ${this.hass.localize(`ui.common.skip`)}
+
+
+ ${this.hass.localize(`ui.panel.config.automation.thingtalk.create`)}
+
+
`;
}
@@ -440,11 +437,6 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
this.requestUpdate("_placeholderValues");
}
});
-
- fireEvent(
- this.shadowRoot!.querySelector("ha-paper-dialog")! as HTMLElement,
- "iron-resize"
- );
}
private _entityPicked(ev: Event): void {
@@ -465,24 +457,16 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
fireEvent(this, "placeholders-filled", { value: this._placeholderValues });
}
- private _openedChanged(ev: PolymerChangedEvent): void {
- // The opened-changed event doesn't leave the shadowdom so we re-dispatch it
- this.dispatchEvent(new CustomEvent(ev.type, ev));
- }
-
static get styles(): CSSResultGroup {
return [
haStyleDialog,
css`
- ha-paper-dialog {
+ ha-dialog {
max-width: 500px;
}
mwc-button.left {
margin-right: auto;
}
- paper-dialog-scrollable {
- margin-top: 10px;
- }
h3 {
margin: 10px 0 0 0;
font-weight: 500;
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index 6444b6aaef..3e8a6bee37 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -1,17 +1,19 @@
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical } from "@mdi/js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-select";
+import type { Select } from "@material/mwc-select";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
+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 "../../../../components/ha-button-menu";
import "../../../../components/ha-card";
+import "../../../../components/ha-alert";
import "../../../../components/ha-icon-button";
import type { Trigger } from "../../../../data/automation";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -85,6 +87,19 @@ export default class HaAutomationTriggerRow extends LitElement {
@state() private _yamlMode = false;
+ private _processedTypes = memoizeOne(
+ (localize: LocalizeFunc): [string, string][] =>
+ OPTIONS.map(
+ (action) =>
+ [
+ action,
+ localize(
+ `ui.panel.config.automation.editor.triggers.type.${action}.label`
+ ),
+ ] as [string, string]
+ ).sort((a, b) => stringCompare(a[1], b[1]))
+ );
+
protected render() {
const selected = OPTIONS.indexOf(this.trigger.platform);
const yamlMode = this._yamlMode || selected === -1;
@@ -94,12 +109,11 @@ export default class HaAutomationTriggerRow extends LitElement {
-
+ = {};
protected routerOptions: RouterOptions = {
defaultPage: "dashboard",
@@ -41,7 +41,11 @@ class HaConfigBlueprint extends HassRouterPage {
};
private async _getBlueprints() {
- this.blueprints = await fetchBlueprints(this.hass, "automation");
+ const [automation, script] = await Promise.all([
+ fetchBlueprints(this.hass, "automation"),
+ fetchBlueprints(this.hass, "script"),
+ ]);
+ this.blueprints = { automation, script };
}
protected firstUpdated(changedProps) {
diff --git a/src/panels/config/cloud/account/cloud-account.js b/src/panels/config/cloud/account/cloud-account.js
deleted file mode 100644
index 9670794dfc..0000000000
--- a/src/panels/config/cloud/account/cloud-account.js
+++ /dev/null
@@ -1,246 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-item/paper-item-body";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { formatDateTime } from "../../../../common/datetime/format_date_time";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
-import "../../../../components/buttons/ha-call-api-button";
-import "../../../../components/ha-card";
-import { fetchCloudSubscriptionInfo } from "../../../../data/cloud";
-import "../../../../layouts/hass-subpage";
-import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-import "../../../../styles/polymer-ha-style";
-import "../../ha-config-section";
-import "./cloud-alexa-pref";
-import "./cloud-google-pref";
-import "./cloud-remote-pref";
-import "./cloud-tts-pref";
-import "./cloud-webhooks";
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
- static get template() {
- return html`
-
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- isWide: Boolean,
- narrow: Boolean,
- cloudStatus: Object,
- _subscription: {
- type: Object,
- value: null,
- },
- _rtlDirection: {
- type: Boolean,
- computed: "_computeRTLDirection(hass)",
- },
- };
- }
-
- ready() {
- super.ready();
- this._fetchSubscriptionInfo();
- }
-
- _computeConnectionStatus(status) {
- return status === "connected"
- ? this.hass.localize("ui.panel.config.cloud.account.connected")
- : status === "disconnected"
- ? this.hass.localize("ui.panel.config.cloud.account.not_connected")
- : this.hass.localize("ui.panel.config.cloud.account.connecting");
- }
-
- async _fetchSubscriptionInfo() {
- this._subscription = await fetchCloudSubscriptionInfo(this.hass);
- if (
- this._subscription.provider &&
- this.cloudStatus &&
- this.cloudStatus.cloud !== "connected"
- ) {
- this.fire("ha-refresh-cloud-status");
- }
- }
-
- handleLogout() {
- this.hass
- .callApi("post", "cloud/logout")
- .then(() => this.fire("ha-refresh-cloud-status"));
- }
-
- _formatSubscription(subInfo) {
- if (subInfo === null) {
- return this.hass.localize(
- "ui.panel.config.cloud.account.fetching_subscription"
- );
- }
-
- let description = subInfo.human_description;
-
- if (subInfo.plan_renewal_date) {
- description = description.replace(
- "{periodEnd}",
- formatDateTime(
- new Date(subInfo.plan_renewal_date * 1000),
- this.hass.locale
- )
- );
- }
-
- return description;
- }
-
- _computeRTLDirection(hass) {
- return computeRTLDirection(hass);
- }
-}
-
-customElements.define("cloud-account", CloudAccount);
diff --git a/src/panels/config/cloud/account/cloud-account.ts b/src/panels/config/cloud/account/cloud-account.ts
new file mode 100644
index 0000000000..8e98482979
--- /dev/null
+++ b/src/panels/config/cloud/account/cloud-account.ts
@@ -0,0 +1,268 @@
+import "@material/mwc-button";
+import "@polymer/paper-item/paper-item-body";
+import { LitElement, css, html, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { formatDateTime } from "../../../../common/datetime/format_date_time";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { computeRTLDirection } from "../../../../common/util/compute_rtl";
+import "../../../../components/buttons/ha-call-api-button";
+import "../../../../components/ha-card";
+import {
+ cloudLogout,
+ CloudStatusLoggedIn,
+ fetchCloudSubscriptionInfo,
+ SubscriptionInfo,
+} from "../../../../data/cloud";
+import "../../../../layouts/hass-subpage";
+import { HomeAssistant } from "../../../../types";
+import "../../ha-config-section";
+import "./cloud-alexa-pref";
+import "./cloud-google-pref";
+import "./cloud-remote-pref";
+import "./cloud-tts-pref";
+import "./cloud-webhooks";
+
+@customElement("cloud-account")
+export class CloudAccount extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ type: Boolean }) public isWide = false;
+
+ @property({ type: Boolean }) public narrow = false;
+
+ @property({ attribute: false }) public cloudStatus!: CloudStatusLoggedIn;
+
+ @state() private _subscription?: SubscriptionInfo;
+
+ @state() private _rtlDirection: "rtl" | "ltr" = "rtl";
+
+ protected render() {
+ return html`
+
+
+ `;
+ }
+
+ firstUpdated() {
+ this._fetchSubscriptionInfo();
+ }
+
+ protected updated(changedProps: PropertyValues) {
+ if (changedProps.has("hass")) {
+ const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+ if (!oldHass || oldHass.locale !== this.hass.locale) {
+ this._rtlDirection = computeRTLDirection(this.hass);
+ }
+ }
+ }
+
+ private async _fetchSubscriptionInfo() {
+ this._subscription = await fetchCloudSubscriptionInfo(this.hass);
+ if (
+ this._subscription.provider &&
+ this.cloudStatus &&
+ this.cloudStatus.cloud !== "connected"
+ ) {
+ fireEvent(this, "ha-refresh-cloud-status");
+ }
+ }
+
+ private async _handleLogout() {
+ await cloudLogout(this.hass);
+ fireEvent(this, "ha-refresh-cloud-status");
+ }
+
+ _computeRTLDirection(hass) {
+ return computeRTLDirection(hass);
+ }
+
+ static get styles() {
+ return css`
+ [slot="introduction"] {
+ margin: -1em 0;
+ }
+ [slot="introduction"] a {
+ color: var(--primary-color);
+ }
+ .content {
+ padding-bottom: 24px;
+ }
+ .account-row {
+ display: flex;
+ padding: 0 16px;
+ }
+ .card-actions {
+ display: flex;
+ justify-content: space-between;
+ }
+ .card-actions a {
+ text-decoration: none;
+ }
+ mwc-button {
+ align-self: center;
+ }
+ .wrap {
+ white-space: normal;
+ }
+ .status {
+ text-transform: capitalize;
+ padding: 16px;
+ }
+ a {
+ color: var(--primary-color);
+ }
+ `;
+ }
+}
+
+customElements.define("cloud-account", CloudAccount);
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "cloud-account": CloudAccount;
+ }
+}
diff --git a/src/panels/config/cloud/alexa/cloud-alexa.ts b/src/panels/config/cloud/alexa/cloud-alexa.ts
index a375552df0..90f43f83da 100644
--- a/src/panels/config/cloud/alexa/cloud-alexa.ts
+++ b/src/panels/config/cloud/alexa/cloud-alexa.ts
@@ -116,25 +116,22 @@ class CloudAlexa extends LitElement {
? exposedCards
: notExposedCards;
- const iconButton = html`
- `;
+ .label=${this.hass!.localize("ui.panel.config.cloud.alexa.expose")}
+ .path=${config.should_expose !== null
+ ? isExposed
+ ? mdiCheckboxMarked
+ : mdiCloseBox
+ : isDomainExposed
+ ? mdiCheckboxMultipleMarked
+ : mdiCloseBoxMultiple}
+ >`;
target.push(html`
diff --git a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
index a91261914e..0616c0edd9 100644
--- a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
+++ b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
@@ -2,8 +2,7 @@ import "@material/mwc-button";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { formatDateTime } from "../../../../common/datetime/format_date_time";
-import "../../../../components/dialog/ha-paper-dialog";
-import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
+import { fireEvent } from "../../../../common/dom/fire_event";
import { haStyle } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
@@ -15,11 +14,13 @@ class DialogCloudCertificate extends LitElement {
@property()
private _params?: CloudCertificateDialogParams;
- public async showDialog(params: CloudCertificateDialogParams) {
+ public showDialog(params: CloudCertificateDialogParams) {
this._params = params;
- // Wait till dialog is rendered.
- await this.updateComplete;
- this._dialog.open();
+ }
+
+ public closeDialog() {
+ this._params = undefined;
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render() {
@@ -29,12 +30,12 @@ class DialogCloudCertificate extends LitElement {
const { certificateInfo } = this._params;
return html`
-
-
-
-
+
+ ${this.hass!.localize(
+ "ui.panel.config.cloud.dialog_certificate.close"
+ )}
+
+
`;
}
- private get _dialog(): HaPaperDialog {
- return this.shadowRoot!.querySelector("ha-paper-dialog")!;
- }
-
- private _closeDialog() {
- this._dialog.close();
- }
-
static get styles(): CSSResultGroup {
return [
haStyle,
css`
- ha-paper-dialog {
- width: 535px;
+ ha-dialog {
+ --mdc-dialog-max-width: 535px;
}
.break-word {
overflow-wrap: break-word;
diff --git a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
index ce44207e7c..b018af2959 100644
--- a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
+++ b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
@@ -1,11 +1,9 @@
import "@material/mwc-button";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { state } from "lit/decorators";
-import "../../../../components/dialog/ha-paper-dialog";
-import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
+import { fireEvent } from "../../../../common/dom/fire_event";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@@ -19,11 +17,13 @@ export class DialogManageCloudhook extends LitElement {
@state() private _params?: WebhookDialogParams;
- public async showDialog(params: WebhookDialogParams) {
+ public showDialog(params: WebhookDialogParams) {
this._params = params;
- // Wait till dialog is rendered.
- await this.updateComplete;
- this._dialog.open();
+ }
+
+ public closeDialog() {
+ this._params = undefined;
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render() {
@@ -39,14 +39,14 @@ export class DialogManageCloudhook extends LitElement {
)
: documentationUrl(this.hass!, `/integrations/${webhook.domain}/`);
return html`
-
-
-
-
+
+
+ ${this.hass!.localize(
+ "ui.panel.config.cloud.dialog_cloudhook.view_documentation"
+ )}
+
+
+
+ ${this.hass!.localize("ui.panel.config.cloud.dialog_cloudhook.close")}
+
+
`;
}
- private get _dialog(): HaPaperDialog {
- return this.shadowRoot!.querySelector("ha-paper-dialog")!;
- }
-
private get _paperInput(): PaperInputElement {
return this.shadowRoot!.querySelector("paper-input")!;
}
- private _closeDialog() {
- this._dialog.close();
- }
-
private async _disableWebhook() {
showConfirmationDialog(this, {
text: this.hass!.localize(
@@ -118,7 +111,7 @@ export class DialogManageCloudhook extends LitElement {
confirmText: this.hass!.localize("ui.common.disable"),
confirm: () => {
this._params!.disableHook();
- this._closeDialog();
+ this.closeDialog();
},
});
}
@@ -147,7 +140,7 @@ export class DialogManageCloudhook extends LitElement {
return [
haStyle,
css`
- ha-paper-dialog {
+ ha-dialog {
width: 650px;
}
paper-input {
@@ -156,7 +149,7 @@ export class DialogManageCloudhook extends LitElement {
button.link {
color: var(--primary-color);
}
- .paper-dialog-buttons a {
+ a {
text-decoration: none;
}
`,
diff --git a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js b/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
deleted file mode 100644
index 46b45c9022..0000000000
--- a/src/panels/config/cloud/forgot-password/cloud-forgot-password.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../../components/buttons/ha-progress-button";
-import "../../../../components/ha-card";
-import "../../../../layouts/hass-subpage";
-import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-import "../../../../styles/polymer-ha-style";
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-class CloudForgotPassword extends LocalizeMixin(EventsMixin(PolymerElement)) {
- static get template() {
- return html`
-
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- narrow: Boolean,
- email: {
- type: String,
- notify: true,
- observer: "_emailChanged",
- },
- _requestInProgress: {
- type: Boolean,
- value: false,
- },
- _error: {
- type: String,
- value: "",
- },
- };
- }
-
- _emailChanged() {
- this._error = "";
- this.$.email.invalid = false;
- }
-
- _keyDown(ev) {
- // validate on enter
- if (ev.keyCode === 13) {
- this._handleEmailPasswordReset();
- ev.preventDefault();
- }
- }
-
- _handleEmailPasswordReset() {
- if (!this.email || !this.email.includes("@")) {
- this.$.email.invalid = true;
- }
-
- if (this.$.email.invalid) return;
-
- this._requestInProgress = true;
-
- this.hass
- .callApi("post", "cloud/forgot_password", {
- email: this.email,
- })
- .then(
- () => {
- this._requestInProgress = false;
- this.fire("cloud-done", {
- flashMessage: this.hass.localize(
- "ui.panel.config.cloud.forgot_password.check_your_email"
- ),
- });
- },
- (err) =>
- this.setProperties({
- _requestInProgress: false,
- _error:
- err && err.body && err.body.message
- ? err.body.message
- : "Unknown error",
- })
- );
- }
-}
-
-customElements.define("cloud-forgot-password", CloudForgotPassword);
diff --git a/src/panels/config/cloud/forgot-password/cloud-forgot-password.ts b/src/panels/config/cloud/forgot-password/cloud-forgot-password.ts
new file mode 100644
index 0000000000..a6b34b9054
--- /dev/null
+++ b/src/panels/config/cloud/forgot-password/cloud-forgot-password.ts
@@ -0,0 +1,156 @@
+import "@material/mwc-textfield/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield/mwc-textfield";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/buttons/ha-progress-button";
+import "../../../../components/ha-alert";
+import "../../../../components/ha-card";
+import { cloudForgotPassword } from "../../../../data/cloud";
+import "../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+
+@customElement("cloud-forgot-password")
+export class CloudForgotPassword extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ type: Boolean }) public narrow = false;
+
+ @property() public email?: string;
+
+ @state() public _requestInProgress = false;
+
+ @state() private _error?: string;
+
+ @query("#email", true) private _emailField!: TextField;
+
+ protected render(): TemplateResult {
+ return html`
+
+
+ `;
+ }
+
+ private _keyDown(ev: KeyboardEvent) {
+ if (ev.key === "Enter") {
+ this._handleEmailPasswordReset();
+ }
+ }
+
+ private async _handleEmailPasswordReset() {
+ const emailField = this._emailField;
+
+ const email = emailField.value;
+
+ if (!emailField.reportValidity()) {
+ emailField.focus();
+ return;
+ }
+
+ this._requestInProgress = true;
+
+ try {
+ await cloudForgotPassword(this.hass, email);
+ // @ts-ignore
+ fireEvent(this, "email-changed", { value: email });
+ this._requestInProgress = false;
+ // @ts-ignore
+ fireEvent(this, "cloud-done", {
+ flashMessage: this.hass.localize(
+ "ui.panel.config.cloud.forgot_password.check_your_email"
+ ),
+ });
+ } catch (err: any) {
+ this._requestInProgress = false;
+ this._error =
+ err && err.body && err.body.message
+ ? err.body.message
+ : "Unknown error";
+ }
+ }
+
+ static get styles() {
+ return [
+ haStyle,
+ css`
+ .content {
+ padding-bottom: 24px;
+ }
+ ha-card {
+ max-width: 600px;
+ margin: 0 auto;
+ margin-top: 24px;
+ }
+ h1 {
+ margin: 0;
+ }
+ mwc-textfield {
+ width: 100%;
+ }
+ .card-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .card-actions a {
+ color: var(--primary-text-color);
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "cloud-forgot-password": CloudForgotPassword;
+ }
+}
diff --git a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
index 17414d4abc..51ffa4360a 100644
--- a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
+++ b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
@@ -122,25 +122,22 @@ class CloudGoogleAssistant extends LitElement {
? exposedCards
: notExposedCards;
- const iconButton = html`
- `;
+ .label=${this.hass!.localize("ui.panel.config.cloud.google.expose")}
+ .path=${config.should_expose !== null
+ ? isExposed
+ ? mdiCheckboxMarked
+ : mdiCloseBox
+ : isDomainExposed
+ ? mdiCheckboxMultipleMarked
+ : mdiCloseBoxMultiple}
+ >`;
target.push(html`
diff --git a/src/panels/config/cloud/login/cloud-login.js b/src/panels/config/cloud/login/cloud-login.js
deleted file mode 100644
index b40f08c95c..0000000000
--- a/src/panels/config/cloud/login/cloud-login.js
+++ /dev/null
@@ -1,332 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-ripple/paper-ripple";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { computeRTL } from "../../../../common/util/compute_rtl";
-import "../../../../components/buttons/ha-progress-button";
-import "../../../../components/ha-card";
-import "../../../../components/ha-icon-button";
-import "../../../../components/ha-icon-next";
-import "../../../../layouts/hass-subpage";
-import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-import NavigateMixin from "../../../../mixins/navigate-mixin";
-import "../../../../styles/polymer-ha-style";
-import "../../ha-config-section";
-
-/*
- * @appliesMixin NavigateMixin
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-class CloudLogin extends LocalizeMixin(
- NavigateMixin(EventsMixin(PolymerElement))
-) {
- static get template() {
- return html`
-
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- isWide: Boolean,
- narrow: Boolean,
- email: {
- type: String,
- notify: true,
- },
- _password: {
- type: String,
- value: "",
- },
- _requestInProgress: {
- type: Boolean,
- value: false,
- },
- flashMessage: {
- type: String,
- notify: true,
- },
- rtl: {
- type: Boolean,
- reflectToAttribute: true,
- computed: "_computeRTL(hass)",
- },
- _error: String,
- };
- }
-
- static get observers() {
- return ["_inputChanged(email, _password)"];
- }
-
- connectedCallback() {
- super.connectedCallback();
- if (this.flashMessage) {
- // Wait for DOM to be drawn
- requestAnimationFrame(() =>
- requestAnimationFrame(() => this.$.flashRipple.simulatedRipple())
- );
- }
- }
-
- _inputChanged() {
- this.$.email.invalid = false;
- this.$.password.invalid = false;
- this._error = false;
- }
-
- _keyDown(ev) {
- // validate on enter
- if (ev.keyCode === 13) {
- this._handleLogin();
- ev.preventDefault();
- }
- }
-
- _handleLogin() {
- let invalid = false;
-
- if (!this.email || !this.email.includes("@")) {
- this.$.email.invalid = true;
- this.$.email.focus();
- invalid = true;
- }
-
- if (this._password.length < 8) {
- this.$.password.invalid = true;
-
- if (!invalid) {
- invalid = true;
- this.$.password.focus();
- }
- }
-
- if (invalid) return;
-
- this._requestInProgress = true;
-
- this.hass
- .callApi("post", "cloud/login", {
- email: this.email,
- password: this._password,
- })
- .then(
- () => {
- this.fire("ha-refresh-cloud-status");
- this.setProperties({
- email: "",
- _password: "",
- });
- },
- (err) => {
- // Do this before setProperties because changing it clears errors.
- this._password = "";
-
- const errCode = err && err.body && err.body.code;
- if (errCode === "PasswordChangeRequired") {
- alert(
- "[[localize('ui.panel.config.cloud.login.alert_password_change_required')]]"
- );
- this.navigate("/config/cloud/forgot-password");
- return;
- }
-
- const props = {
- _requestInProgress: false,
- _error:
- err && err.body && err.body.message
- ? err.body.message
- : "Unknown error",
- };
-
- if (errCode === "UserNotConfirmed") {
- props._error =
- "[[localize('ui.panel.config.cloud.login.alert_email_confirm_necessary')]]";
- }
-
- this.setProperties(props);
- this.$.email.focus();
- }
- );
- }
-
- _handleRegister() {
- this.flashMessage = "";
- this.navigate("/config/cloud/register");
- }
-
- _handleForgotPassword() {
- this.flashMessage = "";
- this.navigate("/config/cloud/forgot-password");
- }
-
- _dismissFlash() {
- // give some time to let the ripple finish.
- setTimeout(() => {
- this.flashMessage = "";
- }, 200);
- }
-
- _computeRTL(hass) {
- return computeRTL(hass);
- }
-}
-
-customElements.define("cloud-login", CloudLogin);
diff --git a/src/panels/config/cloud/login/cloud-login.ts b/src/panels/config/cloud/login/cloud-login.ts
new file mode 100644
index 0000000000..c058985a60
--- /dev/null
+++ b/src/panels/config/cloud/login/cloud-login.ts
@@ -0,0 +1,310 @@
+import "@material/mwc-button";
+import "@material/mwc-textfield/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield/mwc-textfield";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { navigate } from "../../../../common/navigate";
+import "../../../../components/buttons/ha-progress-button";
+import "../../../../components/ha-alert";
+import "../../../../components/ha-card";
+import "../../../../components/ha-icon-next";
+import { cloudLogin } from "../../../../data/cloud";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
+import "../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../resources/styles";
+import "../../../../styles/polymer-ha-style";
+import { HomeAssistant } from "../../../../types";
+import "../../ha-config-section";
+
+@customElement("cloud-login")
+export class CloudLogin extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ type: Boolean }) public isWide = false;
+
+ @property({ type: Boolean }) public narrow = false;
+
+ @property() public email?: string;
+
+ @property() public flashMessage?: string;
+
+ @state() private _password?: string;
+
+ @state() private _requestInProgress = false;
+
+ @state() private _error?: string;
+
+ @query("#email", true) private _emailField!: TextField;
+
+ @query("#password", true) private _passwordField!: TextField;
+
+ protected render(): TemplateResult {
+ return html`
+
+
+ `;
+ }
+
+ private _keyDown(ev: KeyboardEvent) {
+ if (ev.key === "Enter") {
+ this._handleLogin();
+ }
+ }
+
+ private async _handleLogin() {
+ const emailField = this._emailField;
+ const passwordField = this._passwordField;
+
+ const email = emailField.value;
+ const password = passwordField.value;
+
+ if (!emailField.reportValidity()) {
+ passwordField.reportValidity();
+ emailField.focus();
+ return;
+ }
+
+ if (!passwordField.reportValidity()) {
+ passwordField.focus();
+ return;
+ }
+
+ this._requestInProgress = true;
+
+ try {
+ await cloudLogin(this.hass, email, password);
+ fireEvent(this, "ha-refresh-cloud-status");
+ this.email = "";
+ this._password = "";
+ } catch (err: any) {
+ const errCode = err && err.body && err.body.code;
+ if (errCode === "PasswordChangeRequired") {
+ showAlertDialog(this, {
+ title: this.hass.localize(
+ "ui.panel.config.cloud.login.alert_password_change_required"
+ ),
+ });
+ navigate("/config/cloud/forgot-password");
+ return;
+ }
+
+ this._password = "";
+ this._requestInProgress = false;
+
+ if (errCode === "UserNotConfirmed") {
+ this._error = this.hass.localize(
+ "ui.panel.config.cloud.login.alert_email_confirm_necessary"
+ );
+ } else {
+ this._error =
+ err && err.body && err.body.message
+ ? err.body.message
+ : "Unknown error";
+ }
+
+ emailField.focus();
+ }
+ }
+
+ private _handleRegister() {
+ this._dismissFlash();
+ // @ts-ignore
+ fireEvent(this, "email-changed", { value: this._emailField.value });
+ navigate("/config/cloud/register");
+ }
+
+ private _handleForgotPassword() {
+ this._dismissFlash();
+ // @ts-ignore
+ fireEvent(this, "email-changed", { value: this._emailField.value });
+ navigate("/config/cloud/forgot-password");
+ }
+
+ private _dismissFlash() {
+ // @ts-ignore
+ fireEvent(this, "flash-message-changed", { value: "" });
+ }
+
+ static get styles() {
+ return [
+ haStyle,
+ css`
+ .content {
+ padding-bottom: 24px;
+ }
+ [slot="introduction"] {
+ margin: -1em 0;
+ }
+ [slot="introduction"] a {
+ color: var(--primary-color);
+ }
+ paper-item {
+ cursor: pointer;
+ }
+ ha-card {
+ overflow: hidden;
+ }
+ ha-card .card-header {
+ margin-bottom: -8px;
+ }
+ h1 {
+ margin: 0;
+ }
+ .card-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .login-form {
+ display: flex;
+ flex-direction: column;
+ }
+ .pwd-forgot-link {
+ color: var(--secondary-text-color) !important;
+ text-align: right !important;
+ align-self: flex-end;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "cloud-login": CloudLogin;
+ }
+}
diff --git a/src/panels/config/cloud/register/cloud-register.js b/src/panels/config/cloud/register/cloud-register.js
deleted file mode 100644
index b07a19d2f5..0000000000
--- a/src/panels/config/cloud/register/cloud-register.js
+++ /dev/null
@@ -1,229 +0,0 @@
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../../components/buttons/ha-progress-button";
-import "../../../../components/ha-card";
-import "../../../../layouts/hass-subpage";
-import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-import "../../../../styles/polymer-ha-style";
-import { documentationUrl } from "../../../../util/documentation-url";
-import "../../ha-config-section";
-
-/*
- * @appliesMixin EventsMixin
- * @appliesMixin LocalizeMixin
- */
-class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
- static get template() {
- return html`
-
-
-
-`;
- }
-
- static get properties() {
- return {
- hass: Object,
- isWide: Boolean,
- narrow: Boolean,
- email: {
- type: String,
- notify: true,
- },
-
- _requestInProgress: {
- type: Boolean,
- value: false,
- },
- _password: {
- type: String,
- value: "",
- },
- _error: {
- type: String,
- value: "",
- },
- };
- }
-
- static get observers() {
- return ["_inputChanged(email, _password)"];
- }
-
- _inputChanged() {
- this._error = "";
- this.$.email.invalid = false;
- this.$.password.invalid = false;
- }
-
- _keyDown(ev) {
- // validate on enter
- if (ev.keyCode === 13) {
- this._handleRegister();
- ev.preventDefault();
- }
- }
-
- _computeDocumentationUrlTos(hass) {
- return documentationUrl(hass, "/tos/");
- }
-
- _computeDocumentationUrlPrivacy(hass) {
- return documentationUrl(hass, "/privacy/");
- }
-
- _handleRegister() {
- let invalid = false;
-
- if (!this.email || !this.email.includes("@")) {
- this.$.email.invalid = true;
- this.$.email.focus();
- invalid = true;
- }
-
- if (this._password.length < 8) {
- this.$.password.invalid = true;
-
- if (!invalid) {
- invalid = true;
- this.$.password.focus();
- }
- }
-
- if (invalid) return;
-
- this._requestInProgress = true;
-
- this.hass
- .callApi("post", "cloud/register", {
- email: this.email,
- password: this._password,
- })
- .then(
- () => this._verificationEmailSent(),
- (err) => {
- // Do this before setProperties because changing it clears errors.
- this._password = "";
-
- this.setProperties({
- _requestInProgress: false,
- _error:
- err && err.body && err.body.message
- ? err.body.message
- : "Unknown error",
- });
- }
- );
- }
-
- _handleResendVerifyEmail() {
- if (!this.email) {
- this.$.email.invalid = true;
- return;
- }
-
- this.hass
- .callApi("post", "cloud/resend_confirm", {
- email: this.email,
- })
- .then(
- () => this._verificationEmailSent(),
- (err) =>
- this.setProperties({
- _error:
- err && err.body && err.body.message
- ? err.body.message
- : "Unknown error",
- })
- );
- }
-
- _verificationEmailSent() {
- this.setProperties({
- _requestInProgress: false,
- _password: "",
- });
- this.fire("cloud-done", {
- flashMessage: this.hass.localize(
- "ui.panel.config.cloud.register.account_created"
- ),
- });
- }
-}
-
-customElements.define("cloud-register", CloudRegister);
diff --git a/src/panels/config/cloud/register/cloud-register.ts b/src/panels/config/cloud/register/cloud-register.ts
new file mode 100644
index 0000000000..10e539b05b
--- /dev/null
+++ b/src/panels/config/cloud/register/cloud-register.ts
@@ -0,0 +1,293 @@
+import "@material/mwc-textfield/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield/mwc-textfield";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/buttons/ha-progress-button";
+import "../../../../components/ha-alert";
+import "../../../../components/ha-card";
+import { cloudRegister, cloudResendVerification } from "../../../../data/cloud";
+import "../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+import "../../ha-config-section";
+
+@customElement("cloud-register")
+export class CloudRegister extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ type: Boolean }) public isWide = false;
+
+ @property({ type: Boolean }) public narrow = false;
+
+ @property() public email?: string;
+
+ @state() private _requestInProgress = false;
+
+ @state() private _password = "";
+
+ @state() private _error?: string;
+
+ @query("#email", true) private _emailField!: TextField;
+
+ @query("#password", true) private _passwordField!: TextField;
+
+ protected render(): TemplateResult {
+ return html`
+
+
+ `;
+ }
+
+ private _keyDown(ev: KeyboardEvent) {
+ if (ev.key === "Enter") {
+ this._handleRegister();
+ }
+ }
+
+ private async _handleRegister() {
+ const emailField = this._emailField;
+ const passwordField = this._passwordField;
+
+ const email = emailField.value;
+ const password = passwordField.value;
+
+ if (!emailField.reportValidity()) {
+ passwordField.reportValidity();
+ emailField.focus();
+ return;
+ }
+
+ if (!passwordField.reportValidity()) {
+ passwordField.focus();
+ return;
+ }
+
+ this._requestInProgress = true;
+
+ try {
+ await cloudRegister(this.hass, email, password);
+ this._verificationEmailSent(email);
+ } catch (err: any) {
+ this._password = "";
+ this._requestInProgress = false;
+ this._error =
+ err && err.body && err.body.message
+ ? err.body.message
+ : "Unknown error";
+ }
+ }
+
+ private async _handleResendVerifyEmail() {
+ const emailField = this._emailField;
+
+ const email = emailField.value;
+
+ if (!emailField.reportValidity()) {
+ emailField.focus();
+ return;
+ }
+
+ try {
+ await cloudResendVerification(this.hass, email);
+ this._verificationEmailSent(email);
+ } catch (err: any) {
+ this._error =
+ err && err.body && err.body.message
+ ? err.body.message
+ : "Unknown error";
+ }
+ }
+
+ private _verificationEmailSent(email: string) {
+ this._requestInProgress = false;
+ this._password = "";
+ // @ts-ignore
+ fireEvent(this, "email-changed", { value: email });
+ // @ts-ignore
+ fireEvent(this, "cloud-done", {
+ flashMessage: this.hass.localize(
+ "ui.panel.config.cloud.register.account_created"
+ ),
+ });
+ }
+
+ static get styles() {
+ return [
+ haStyle,
+ css`
+ [slot="introduction"] {
+ margin: -1em 0;
+ }
+ [slot="introduction"] a {
+ color: var(--primary-color);
+ }
+ a {
+ color: var(--primary-color);
+ }
+ paper-item {
+ cursor: pointer;
+ }
+ h1 {
+ margin: 0;
+ }
+ .register-form {
+ display: flex;
+ flex-direction: column;
+ }
+ .card-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "cloud-register": CloudRegister;
+ }
+}
diff --git a/src/panels/config/core/ha-config-core-form.ts b/src/panels/config/core/ha-config-core-form.ts
index 4e48098672..495b963121 100644
--- a/src/panels/config/core/ha-config-core-form.ts
+++ b/src/panels/config/core/ha-config-core-form.ts
@@ -1,8 +1,6 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@@ -16,6 +14,9 @@ import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
import { SYMBOL_TO_ISO } from "../../../data/currency";
import type { PolymerChangedEvent } from "../../../polymer-types";
import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-formfield";
+import "../../../components/ha-radio";
+import type { HaRadio } from "../../../components/ha-radio";
@customElement("ha-config-core-form")
class ConfigCoreForm extends LitElement {
@@ -120,32 +121,44 @@ class ConfigCoreForm extends LitElement {
"ui.panel.config.core.section.core.core_config.unit_system"
)}
- ${this._error}
` : ""}
${Object.entries(this.placeholders).map(
([type, placeholders]) =>
@@ -243,16 +238,18 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
})}
`
)}
-
-
-
+
${this._warnings
- ? html`
-
- ${OPTIONS.map(
- (opt) => html`
-
- ${this.hass.localize(
- `ui.panel.config.automation.editor.triggers.type.${opt}.label`
- )}
-
- `
- )}
-
-
+ ${this._processedTypes(this.hass.localize).map(
+ ([opt, label]) => html`
+ ${label}
+ `
+ )}
+
+
-
`;
}
@@ -87,10 +93,17 @@ export default class HaGeolocationTrigger extends LitElement {
fireEvent(this, "value-changed", {
value: {
...this.trigger,
- event: (ev.target as PaperRadioGroupElement).selected,
+ event: (ev.target as HaRadio).value,
},
});
}
+
+ static styles = css`
+ label {
+ display: flex;
+ align-items: center;
+ }
+ `;
}
declare global {
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts
index f4464a4b36..c660b8f132 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts
@@ -1,21 +1,21 @@
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
-import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
+import type { HaRadio } from "../../../../../components/ha-radio";
import type { HassTrigger } from "../../../../../data/automation";
import type { HomeAssistant } from "../../../../../types";
+import "../../../../../components/ha-formfield";
+import "../../../../../components/ha-radio";
@customElement("ha-automation-trigger-homeassistant")
-export default class HaHassTrigger extends LitElement {
+export class HaHassTrigger extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
- @property() public trigger!: HassTrigger;
+ @property({ attribute: false }) public trigger!: HassTrigger;
public static get defaultConfig() {
return {
- event: "start",
+ event: "start" as HassTrigger["event"],
};
}
@@ -26,23 +26,31 @@ export default class HaHassTrigger extends LitElement {
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.type.homeassistant.event"
)}
-
-
-
- ${this.hass.localize(
+
-
- ${this.hass.localize(
+ >
+
+
-
+ >
+
-
`;
}
@@ -97,10 +106,17 @@ export class HaZoneTrigger extends LitElement {
fireEvent(this, "value-changed", {
value: {
...this.trigger,
- event: (ev.target as PaperRadioGroupElement).selected,
+ event: (ev.target as HaRadio).value,
},
});
}
+
+ static styles = css`
+ label {
+ display: flex;
+ align-items: center;
+ }
+ `;
}
declare global {
diff --git a/src/panels/config/blueprint/dialog-import-blueprint.ts b/src/panels/config/blueprint/dialog-import-blueprint.ts
index e9d9a4f0ea..ad2cb1eb6c 100644
--- a/src/panels/config/blueprint/dialog-import-blueprint.ts
+++ b/src/panels/config/blueprint/dialog-import-blueprint.ts
@@ -1,5 +1,4 @@
import "@material/mwc-button";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
diff --git a/src/panels/config/blueprint/ha-blueprint-overview.ts b/src/panels/config/blueprint/ha-blueprint-overview.ts
index e5bfb0c997..35123dceb0 100644
--- a/src/panels/config/blueprint/ha-blueprint-overview.ts
+++ b/src/panels/config/blueprint/ha-blueprint-overview.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button";
import {
mdiDelete,
mdiDownload,
@@ -22,6 +21,7 @@ import { extractSearchParam } from "../../../common/url/search-params";
import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
import "../../../components/entity/ha-entity-toggle";
import "../../../components/ha-fab";
+import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
import { showAutomationEditor } from "../../../data/automation";
import {
@@ -29,6 +29,7 @@ import {
Blueprints,
deleteBlueprint,
} from "../../../data/blueprint";
+import { showScriptEditor } from "../../../data/script";
import {
showAlertDialog,
showConfirmationDialog,
@@ -52,6 +53,12 @@ const createNewFunctions = {
use_blueprint: { path: blueprintMeta.path },
});
},
+ script: (blueprintMeta: BlueprintMetaDataPath) => {
+ showScriptEditor({
+ alias: blueprintMeta.name,
+ use_blueprint: { path: blueprintMeta.path },
+ });
+ },
};
@customElement("ha-blueprint-overview")
@@ -62,27 +69,38 @@ class HaBlueprintOverview extends LitElement {
@property({ type: Boolean }) public narrow!: boolean;
- @property() public route!: Route;
+ @property({ attribute: false }) public route!: Route;
- @property() public blueprints!: Blueprints;
+ @property({ attribute: false }) public blueprints!: Record<
+ string,
+ Blueprints
+ >;
- private _processedBlueprints = memoizeOne((blueprints: Blueprints) => {
- const result = Object.entries(blueprints).map(([path, blueprint]) => {
- if ("error" in blueprint) {
- return {
- name: blueprint.error,
- error: true,
- path,
- };
- }
- return {
- ...blueprint.metadata,
- error: false,
- path,
- };
- });
- return result;
- });
+ private _processedBlueprints = memoizeOne(
+ (blueprints: Record) => {
+ const result: any[] = [];
+ Object.entries(blueprints).forEach(([type, typeBlueprints]) =>
+ Object.entries(typeBlueprints).forEach(([path, blueprint]) => {
+ if ("error" in blueprint) {
+ result.push({
+ name: blueprint.error,
+ type,
+ error: true,
+ path,
+ });
+ } else {
+ result.push({
+ ...blueprint.metadata,
+ type,
+ error: false,
+ path,
+ });
+ }
+ })
+ );
+ return result;
+ }
+ );
private _columns = memoizeOne(
(narrow, _language): DataTableColumnContainer => ({
@@ -102,6 +120,20 @@ class HaBlueprintOverview extends LitElement {
`
: undefined,
},
+ type: {
+ title: this.hass.localize(
+ "ui.panel.config.blueprint.overview.headers.type"
+ ),
+ template: (type: string) =>
+ html`${this.hass.localize(
+ `ui.panel.config.blueprint.overview.types.${type}`
+ )}`,
+ sortable: true,
+ filterable: true,
+ hidden: narrow,
+ direction: "asc",
+ width: "10%",
+ },
path: {
title: this.hass.localize(
"ui.panel.config.blueprint.overview.headers.file_name"
@@ -114,29 +146,27 @@ class HaBlueprintOverview extends LitElement {
},
create: {
title: "",
+ width: narrow ? undefined : "20%",
type: narrow ? "icon-button" : undefined,
template: (_, blueprint: any) =>
blueprint.error
? ""
: narrow
- ? html`
- `
+ `
: html`
${this.hass.localize(
- "ui.panel.config.blueprint.overview.use_blueprint"
+ `ui.panel.config.blueprint.overview.create_${blueprint.domain}`
)}
`,
},
@@ -146,7 +176,7 @@ class HaBlueprintOverview extends LitElement {
template: (_, blueprint: any) =>
blueprint.error
? ""
- : html`
`}
>
-
- ${this.hass.localize("ui.errors.config.editor_not_supported")}:
-
+ ? html`
${this._warnings.length && this._warnings[0] !== undefined
? html`
`
+ `
: ""}
${yamlMode
? html`
@@ -157,28 +174,21 @@ export default class HaAutomationTriggerRow extends LitElement {
>
`
: html`
- + ? html`
-
${this._warnings.map(
@@ -133,7 +150,7 @@ export default class HaAutomationTriggerRow extends LitElement {
-
- Home Assistant Cloud
-
-
-
-
-
- [[localize('ui.panel.config.cloud.account.integrations')]]
-
-
-
-
-
- - [[localize('ui.panel.config.cloud.account.thank_you_note')]] -
-
-
- [[cloudStatus.email]]
-
-
-
-
- [[_formatSubscription(_subscription)]]
-
-
- [[localize('ui.panel.config.cloud.account.connection_status')]]
-
-
-
- [[_computeConnectionStatus(cloudStatus.cloud)]]
-
-
-
- [[localize('ui.panel.config.cloud.account.manage_account')]]
-
- [[localize('ui.panel.config.cloud.account.sign_out')]]
-
-
-
-
- - [[localize('ui.panel.config.cloud.account.integrations_introduction')]] -
-- [[localize('ui.panel.config.cloud.account.integrations_introduction2')]] - - [[localize('ui.panel.config.cloud.account.integrations_link_all_features')]]. -
-
+
+ Home Assistant Cloud
+
+
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.account.integrations"
+ )}
+
+
+
+
+
+ + ${this.hass.localize( + "ui.panel.config.cloud.account.thank_you_note" + )} +
+
+
+ ${this.cloudStatus.email}
+
+
+
+
+ ${this._subscription
+ ? this._subscription.human_description.replace(
+ "{periodEnd}",
+ this._subscription.plan_renewal_date
+ ? formatDateTime(
+ new Date(
+ this._subscription.plan_renewal_date * 1000
+ ),
+ this.hass.locale
+ )
+ : ""
+ )
+ : this.hass.localize(
+ "ui.panel.config.cloud.account.fetching_subscription"
+ )}
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.account.connection_status"
+ )}
+
+
+
+
+ ${this.cloudStatus.cloud === "connected"
+ ? this.hass.localize(
+ "ui.panel.config.cloud.account.connected"
+ )
+ : this.cloudStatus.cloud === "disconnected"
+ ? this.hass.localize(
+ "ui.panel.config.cloud.account.not_connected"
+ )
+ : this.hass.localize(
+ "ui.panel.config.cloud.account.connecting"
+ )}
+
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.account.manage_account"
+ )}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.account.sign_out"
+ )}
+
+
+
+
+ + ${this.hass.localize( + "ui.panel.config.cloud.account.integrations_introduction" + )} +
++ ${this.hass.localize( + "ui.panel.config.cloud.account.integrations_introduction2" + )} + + ${this.hass.localize( + "ui.panel.config.cloud.account.integrations_link_all_features" + )}. +
+- ${this.hass!.localize( - "ui.panel.config.cloud.dialog_certificate.certificate_information" - )} -
+${this.hass!.localize( @@ -56,31 +57,21 @@ class DialogCloudCertificate extends LitElement {
- ${this.hass!.localize( - "ui.panel.config.cloud.dialog_cloudhook.webhook_for", - "name", - webhook.name - )} -
+${this.hass!.localize( @@ -79,36 +79,29 @@ export class DialogManageCloudhook extends LitElement {
-
-
-
-
-
- - [[localize('ui.panel.config.cloud.forgot_password.instructions')]] -
-[[_error]]
-
- [[localize('ui.panel.config.cloud.forgot_password.send_reset_email')]]
-
-
+
+
+
+
+ ${this._error} `
+ : ""}
+
+ + ${this.hass.localize( + "ui.panel.config.cloud.forgot_password.instructions" + )} +
+ ${this._error + ? html`
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.forgot_password.send_reset_email"
+ )}
+
+
+
-
- Home Assistant Cloud
-
-
-
-
-
-
-
-
-
- [[localize('ui.panel.config.cloud.login.start_trial')]]
-
-
-
-
-
-
-
-
- [[localize('ui.panel.config.cloud.login.introduction')]]
-- [[localize('ui.panel.config.cloud.login.introduction2')]] - - Nabu Casa, Inc[[localize('ui.panel.config.cloud.login.introduction2a')]] -
-[[localize('ui.panel.config.cloud.login.introduction3')]]
-- - [[localize('ui.panel.config.cloud.login.learn_more_link')]] - -
-
- [[flashMessage]]
- [[localize('ui.panel.config.cloud.login.dismiss')]]
-
-
-
- [[_error]]
-
- [[localize('ui.panel.config.cloud.login.sign_in')]]
-
-
- [[localize('ui.panel.config.cloud.login.trial_info')]]
-
-
+
+ Home Assistant Cloud
+
+ ${this.flashMessage}
+ `
+ : ""}
+
+
+
+
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.login.start_trial"
+ )}
+
+
+
+
+
+
+
+
+ ${this.flashMessage
+ ? html`+ ${this.hass.localize( + "ui.panel.config.cloud.login.introduction" + )} +
++ ${this.hass.localize( + "ui.panel.config.cloud.login.introduction2" + )} + + Nabu Casa, Inc${this.hass.localize( + "ui.panel.config.cloud.login.introduction2a" + )} +
++ ${this.hass.localize( + "ui.panel.config.cloud.login.introduction3" + )} +
++ + ${this.hass.localize( + "ui.panel.config.cloud.login.learn_more_link" + )} + +
+
+ ${this._error
+ ? html`${this._error} `
+ : ""}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.login.sign_in"
+ )}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.login.trial_info"
+ )}
+
+
-
- [[localize('ui.panel.config.cloud.register.headline')]]
-
-
-
-
-
-
-
- - [[localize('ui.panel.config.cloud.register.information')]] -
-- [[localize('ui.panel.config.cloud.register.information2')]] -
--
-
- [[localize('ui.panel.config.cloud.register.feature_remote_control')]] -
- [[localize('ui.panel.config.cloud.register.feature_google_home')]] -
- [[localize('ui.panel.config.cloud.register.feature_amazon_alexa')]] -
- [[localize('ui.panel.config.cloud.register.feature_webhook_apps')]] -
- [[localize('ui.panel.config.cloud.register.information3')]] Nabu Casa, Inc[[localize('ui.panel.config.cloud.register.information3a')]] -
- -- [[localize('ui.panel.config.cloud.register.information4')]] -
- -
-
-
-
- [[_error]]
-
- [[localize('ui.panel.config.cloud.register.start_trial')]]
-
-
-
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.headline"
+ )}
+
+
+
+
+ + ${this.hass.localize( + "ui.panel.config.cloud.register.information" + )} +
++ ${this.hass.localize( + "ui.panel.config.cloud.register.information2" + )} +
+-
+
- + ${this.hass.localize( + "ui.panel.config.cloud.register.feature_remote_control" + )} + +
- + ${this.hass.localize( + "ui.panel.config.cloud.register.feature_google_home" + )} + +
- + ${this.hass.localize( + "ui.panel.config.cloud.register.feature_amazon_alexa" + )} + +
- + ${this.hass.localize( + "ui.panel.config.cloud.register.feature_webhook_apps" + )} + +
+ ${this.hass.localize( + "ui.panel.config.cloud.register.information3" + )} + Nabu Casa, Inc + ${this.hass.localize( + "ui.panel.config.cloud.register.information3a" + )} +
++ ${this.hass.localize( + "ui.panel.config.cloud.register.information4" + )} +
+ +
+ ${this._error
+ ? html`${this._error} `
+ : ""}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.cloud.register.start_trial"
+ )}
+
+
+
- ${this.hass.localize(
- "ui.panel.config.core.section.core.core_config.metric_example"
+
-
-
-
+ Add battery system ${this.hass.localize(
+ "ui.panel.config.energy.battery.add_battery_system"
+ )}
@@ -154,7 +163,7 @@ export class EnergyBatterySettings extends LitElement {
if (
!(await showConfirmationDialog(this, {
- title: "Are you sure you want to delete this source?",
+ title: this.hass.localize("ui.panel.config.energy.delete_source"),
}))
) {
return;
diff --git a/src/panels/config/energy/components/ha-energy-device-settings.ts b/src/panels/config/energy/components/ha-energy-device-settings.ts
index ad277fd0e4..fe75d061f6 100644
--- a/src/panels/config/energy/components/ha-energy-device-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-device-settings.ts
@@ -4,8 +4,9 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeStateName } from "../../../../common/entity/compute_state_name";
-import { stateIcon } from "../../../../common/entity/state_icon";
import "../../../../components/ha-card";
+import "../../../../components/ha-icon-button";
+import "../../../../components/ha-state-icon";
import {
DeviceConsumptionEnergyPreference,
EnergyPreferences,
@@ -13,8 +14,8 @@ import {
saveEnergyPreferences,
} from "../../../../data/energy";
import {
- showConfirmationDialog,
showAlertDialog,
+ showConfirmationDialog,
} from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
@@ -69,26 +70,36 @@ export class EnergyDeviceSettings extends LitElement {
>
`
)}
-
+
-
-
- ${this.hass.localize(
- "ui.panel.config.core.section.core.core_config.unit_system_imperial"
- )}
-
- ${this.hass.localize(
- "ui.panel.config.core.section.core.core_config.imperial_example"
+
-
-
+
+
+ ${this.hass.localize(
+ "ui.panel.config.core.section.core.core_config.metric_example"
+ )}
+
`}
+ >
+
+ ${this.hass.localize(
+ "ui.panel.config.core.section.core.core_config.imperial_example"
+ )}
+
`}
+ >
+
@@ -258,10 +271,8 @@ class ConfigCoreForm extends LitElement {
this._location = ev.detail.location;
}
- private _unitSystemChanged(
- ev: PolymerChangedEvent
- ) {
- this._unitSystem = ev.detail.value;
+ private _unitSystemChanged(ev: CustomEvent) {
+ this._unitSystem = (ev.target as HaRadio).value as "metric" | "imperial";
}
private async _save() {
@@ -307,6 +318,12 @@ class ConfigCoreForm extends LitElement {
margin: 0 8px;
}
+ .radio-group {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ }
+
.card-actions {
text-align: right;
}
diff --git a/src/panels/config/core/ha-config-core.js b/src/panels/config/core/ha-config-core.js
index 5b41675898..4e01b9d6af 100644
--- a/src/panels/config/core/ha-config-core.js
+++ b/src/panels/config/core/ha-config-core.js
@@ -3,7 +3,6 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../components/ha-icon-button";
import "../../../layouts/hass-tabs-subpage";
import LocalizeMixin from "../../../mixins/localize-mixin";
import "../../../styles/polymer-ha-style";
diff --git a/src/panels/config/core/ha-config-name-form.ts b/src/panels/config/core/ha-config-name-form.ts
index 3edc3be6d8..7dc7752720 100644
--- a/src/panels/config/core/ha-config-name-form.ts
+++ b/src/panels/config/core/ha-config-name-form.ts
@@ -1,8 +1,6 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-card";
diff --git a/src/panels/config/customize/ha-config-customize.ts b/src/panels/config/customize/ha-config-customize.ts
index 6d6c378b59..03fd6f17e9 100644
--- a/src/panels/config/customize/ha-config-customize.ts
+++ b/src/panels/config/customize/ha-config-customize.ts
@@ -25,7 +25,7 @@ class HaConfigCustomize extends LitElement {
protected render(): TemplateResult {
return html`
-
+
`;
}
diff --git a/src/panels/config/customize/ha-form-customize.js b/src/panels/config/customize/ha-form-customize.js
index 5e22d6b5d9..cd3278abeb 100644
--- a/src/panels/config/customize/ha-form-customize.js
+++ b/src/panels/config/customize/ha-form-customize.js
@@ -180,10 +180,16 @@ export class HaFormCustomize extends LocalizeMixin(PolymerElement) {
this.newAttributes
);
attrs.forEach((attr) => {
- if (attr.closed || attr.secondary || !attr.attribute || !attr.value)
+ if (
+ attr.closed ||
+ attr.secondary ||
+ !attr.attribute ||
+ attr.value === null ||
+ attr.value === undefined
+ )
return;
const value = attr.type === "json" ? JSON.parse(attr.value) : attr.value;
- if (!value) return;
+ if (value === null || value === undefined) return;
data[attr.attribute] = value;
});
diff --git a/src/panels/config/customize/types/ha-customize-boolean.js b/src/panels/config/customize/types/ha-customize-boolean.js
index bf6aa5c7db..803e6d8d21 100644
--- a/src/panels/config/customize/types/ha-customize-boolean.js
+++ b/src/panels/config/customize/types/ha-customize-boolean.js
@@ -1,14 +1,20 @@
-import "@polymer/paper-checkbox/paper-checkbox";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "../../../../components/ha-checkbox";
+import "../../../../components/ha-formfield";
class HaCustomizeBoolean extends PolymerElement {
static get template() {
return html`
-
- [[item.description]]
-
+
+
+
`;
}
@@ -20,5 +26,9 @@ class HaCustomizeBoolean extends PolymerElement {
},
};
}
+
+ checkedChanged(ev) {
+ this.item.value = ev.target.checked;
+ }
}
customElements.define("ha-customize-boolean", HaCustomizeBoolean);
diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts
index f81527cce0..b7428354e4 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@@ -7,7 +7,6 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import "../../../components/ha-card";
import "../../../components/ha-icon-next";
import "../../../components/ha-menu-button";
-import "../../../components/ha-svg-icon";
import { CloudStatus } from "../../../data/cloud";
import "../../../layouts/ha-app-layout";
import { haStyle } from "../../../resources/styles";
diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
index 5bb169256b..0c57f498ce 100644
--- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
@@ -15,16 +15,23 @@ import { domainIcon } from "../../../../common/entity/domain_icon";
import "../../../../components/entity/state-badge";
import "../../../../components/ha-card";
import "../../../../components/ha-icon";
-import { HomeAssistant } from "../../../../types";
-import { HuiErrorCard } from "../../../lovelace/cards/hui-error-card";
+import type { LovelaceRowConfig } from "../../../lovelace/entity-rows/types";
+import type { HomeAssistant } from "../../../../types";
+import type { HuiErrorCard } from "../../../lovelace/cards/hui-error-card";
import { createRowElement } from "../../../lovelace/create-element/create-row-element";
import { addEntitiesToLovelaceView } from "../../../lovelace/editor/add-entities-to-view";
import { LovelaceRow } from "../../../lovelace/entity-rows/types";
import { showEntityEditorDialog } from "../../entities/show-dialog-entity-editor";
import { EntityRegistryStateEntry } from "../ha-config-device-page";
+import { computeStateName } from "../../../../common/entity/compute_state_name";
+import { stripPrefixFromEntityName } from "../../../../common/entity/strip_prefix_from_entity_name";
@customElement("ha-device-entities-card")
export class HaDeviceEntitiesCard extends LitElement {
+ @property() public header!: string;
+
+ @property() public deviceName!: string;
+
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public entities!: EntityRegistryStateEntry[];
@@ -47,11 +54,7 @@ export class HaDeviceEntitiesCard extends LitElement {
const disabledEntities: EntityRegistryStateEntry[] = [];
this._entityRows = [];
return html`
-
+
${this.entities.length
? html`
,
+ EntityRegistryStateEntry[]
+ >;
+ for (const key of ["control", "sensor", "diagnostic", "config"]) {
+ if (!(key in result)) {
+ result[key] = [];
+ }
+ }
+
+ return result;
+ }
+ );
+
private _computeArea = memoizeOne(
(areas, device): AreaRegistryEntry | undefined => {
if (!areas || !device || !device.area_id) {
@@ -155,8 +185,10 @@ export class HaConfigDevicePage extends LitElement {
`;
}
+ const deviceName = computeDeviceName(device, this.hass);
const integrations = this._integrations(device, this.entries);
const entities = this._entities(this.deviceId, this.entities);
+ const entitiesByCategory = this._entitiesByCategory(entities);
const batteryEntity = this._batteryEntity(entities);
const batteryChargingEntity = this._batteryChargingEntity(entities);
const batteryState = batteryEntity
@@ -169,6 +201,13 @@ export class HaConfigDevicePage extends LitElement {
: undefined;
const area = this._computeArea(this.areas, device);
+ const configurationUrlIsHomeAssistant =
+ device.configuration_url?.startsWith("homeassistant://") || false;
+
+ const configurationUrl = configurationUrlIsHomeAssistant
+ ? device.configuration_url!.replace("homeassistant://", "/")
+ : device.configuration_url;
+
return html`
- ${computeDeviceName(device, this.hass)}
-
+ ${deviceName}
`;
}
@@ -895,22 +960,18 @@ export class HaConfigDevicePage extends LitElement {
font-size: var(--paper-font-body1_-_font-size);
}
- paper-item.no-link {
- cursor: default;
- }
-
a {
text-decoration: none;
color: var(--primary-color);
}
- ha-card {
- padding-bottom: 8px;
- }
-
ha-card a {
color: var(--primary-text-color);
}
+
+ ha-svg-icon[slot="trailingIcon"] {
+ display: block;
+ }
`,
];
}
diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts
index 97502831d2..c8f12b685f 100644
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/src/panels/config/devices/ha-config-devices-dashboard.ts
@@ -17,6 +17,7 @@ import {
} from "../../../components/data-table/ha-data-table";
import "../../../components/entity/ha-battery-icon";
import "../../../components/ha-button-menu";
+import "../../../components/ha-icon-button";
import { AreaRegistryEntry } from "../../../data/area_registry";
import { ConfigEntry } from "../../../data/config_entries";
import {
@@ -407,17 +408,13 @@ export class HaConfigDeviceDashboard extends LitElement {
`
: html``}
-
-
+ .path=${mdiFilterVariant}
+ >
Battery systems
+
-
@@ -102,14 +105,8 @@ export class HaDeviceEntitiesCard extends LitElement {
`
: html`
-
-
-
+
-
+
+ .path=${domainIcon(computeDomain(entry.entity_id))}
+ >
@@ -168,7 +181,8 @@ export class HaDeviceEntitiesCard extends LitElement {
this.hass,
this.entities
.filter((entity) => !entity.disabled_by)
- .map((entity) => entity.entity_id)
+ .map((entity) => entity.entity_id),
+ this.deviceName
);
}
@@ -190,6 +204,9 @@ export class HaDeviceEntitiesCard extends LitElement {
.disabled-entry {
color: var(--secondary-text-color);
}
+ #entities {
+ margin-top: -24px; /* match the spacing between card title and content of the device info card above it */
+ }
#entities > * {
margin: 8px 16px 8px 8px;
}
@@ -198,12 +215,16 @@ export class HaDeviceEntitiesCard extends LitElement {
}
paper-icon-item {
min-height: 40px;
- padding: 0 8px;
+ padding: 0 16px;
cursor: pointer;
+ --paper-item-icon-width: 48px;
}
.name {
font-size: 14px;
}
+ .empty {
+ text-align: center;
+ }
button.show-more {
color: var(--primary-color);
text-align: left;
diff --git a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
index ffac1d04f3..b69484180e 100644
--- a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
@@ -18,6 +18,7 @@ import {
nodeStatus,
ZWaveJSNodeStatus,
ZWaveJSNodeIdentifiers,
+ SecurityClass,
} from "../../../../../../data/zwave_js";
import { haStyle } from "../../../../../../resources/styles";
import { HomeAssistant } from "../../../../../../types";
@@ -117,13 +118,33 @@ export class HaDeviceInfoZWaveJS extends LitElement {
: this.hass.localize("ui.common.no")}
- ${this.hass.localize(
- "ui.panel.config.devices.entities.none"
- )}
-
-
+ ${this.hass.localize("ui.panel.config.devices.entities.none")}
`}
@@ -121,9 +118,21 @@ export class HaDeviceEntitiesCard extends LitElement {
}
private _renderEntity(entry: EntityRegistryStateEntry): TemplateResult {
- const element = createRowElement({ entity: entry.entity_id });
+ const config: LovelaceRowConfig = {
+ entity: entry.entity_id,
+ };
+
+ const element = createRowElement(config);
if (this.hass) {
element.hass = this.hass;
+ const state = this.hass.states[entry.entity_id];
+ const name = stripPrefixFromEntityName(
+ computeStateName(state),
+ `${this.deviceName} `.toLowerCase()
+ );
+ if (name) {
+ config.name = name;
+ }
}
// @ts-ignore
element.entry = entry;
@@ -133,11 +142,15 @@ export class HaDeviceEntitiesCard extends LitElement {
private _renderEntry(entry: EntityRegistryStateEntry): TemplateResult {
return html`
- ${entry.stateName || entry.entity_id}
- ${this.hass.localize("ui.panel.config.zwave_js.device_info.is_secure")}:
- ${this._node.is_secure === true
- ? this.hass.localize("ui.common.yes")
+ ${this.hass.localize(
+ "ui.panel.config.zwave_js.device_info.highest_security"
+ )}:
+ ${this._node.highest_security_class !== null
+ ? this.hass.localize(
+ `ui.panel.config.zwave_js.security_classes.${
+ SecurityClass[this._node.highest_security_class]
+ }.title`
+ )
: this._node.is_secure === false
- ? this.hass.localize("ui.common.no")
+ ? this.hass.localize(
+ "ui.panel.config.zwave_js.security_classes.none.title"
+ )
: this.hass.localize("ui.panel.config.zwave_js.device_info.unknown")}
+
+ ${this.hass.localize(
+ "ui.panel.config.zwave_js.device_info.zwave_plus"
+ )}:
+ ${this._node.zwave_plus_version
+ ? this.hass.localize(
+ "ui.panel.config.zwave_js.device_info.zwave_plus_version",
+ "version",
+ this._node.zwave_plus_version
+ )
+ : this.hass.localize("ui.common.no")}
+
`;
}
diff --git a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
index 13f930437c..8ad148eef4 100644
--- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
+++ b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
@@ -25,7 +25,7 @@ class DialogDeviceRegistryDetail extends LitElement {
@state() private _params?: DeviceRegistryDetailDialogParams;
- @state() private _areaId?: string | null;
+ @property() public _areaId?: string | null;
@state() private _disabledBy!: string | null;
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index 25206b1ca9..5a2d375d53 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -1,3 +1,4 @@
+import { mdiPencil, mdiPlusCircle, mdiOpenInNew } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
@@ -7,9 +8,13 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { stringCompare } from "../../../common/string/compare";
+import { groupBy } from "../../../common/util/group-by";
import { slugify } from "../../../common/string/slugify";
import "../../../components/entity/ha-battery-icon";
+import "../../../components/ha-icon-button";
import "../../../components/ha-icon-next";
+import "../../../components/ha-alert";
+import "../../../components/ha-svg-icon";
import { AreaRegistryEntry } from "../../../data/area_registry";
import {
ConfigEntry,
@@ -47,6 +52,7 @@ import {
loadDeviceRegistryDetailDialog,
showDeviceRegistryDetailDialog,
} from "./device-registry-detail/show-dialog-device-registry-detail";
+import { computeDomain } from "../../../common/entity/compute_domain";
export interface EntityRegistryStateEntry extends EntityRegistryEntry {
stateName?: string | null;
@@ -110,6 +116,30 @@ export class HaConfigDevicePage extends LitElement {
)
);
+ private _entitiesByCategory = memoizeOne(
+ (entities: EntityRegistryEntry[]) => {
+ const result = groupBy(entities, (entry) =>
+ entry.entity_category
+ ? entry.entity_category
+ : ["sensor", "binary_sensor"].includes(computeDomain(entry.entity_id))
+ ? "sensor"
+ : "control"
+ ) as Record<
+ | "control"
+ | "sensor"
+ | NonNullable
`
@@ -266,17 +309,15 @@ export class HaConfigDevicePage extends LitElement {
${
device.disabled_by
? html`
-
+ ${this.hass.localize(
+ "ui.panel.config.devices.enabled_cause",
+ "cause",
+ this.hass.localize(
+ `ui.panel.config.devices.disabled_by.${device.disabled_by}`
+ )
+ )}
+
${device.disabled_by === "user"
? html`
@@ -287,23 +328,57 @@ export class HaConfigDevicePage extends LitElement {
`
: html``
}
+ ${
+ configurationUrl
+ ? html`
+
+ `
+ : ""
+ }
${this._renderIntegrationInfo(device, integrations)}
-
- ${
- entities.length
+
+
-
+ - ${this.hass.localize( - "ui.panel.config.devices.enabled_cause", - "cause", - this.hass.localize( - `ui.panel.config.devices.disabled_by.${device.disabled_by}` - ) - )} -
-
+ ${["control", "sensor", "config", "diagnostic"].map((category) =>
+ // Make sure we render controls if no other cards will be rendered
+ entitiesByCategory[category].length > 0 ||
+ (entities.length === 0 && category === "control")
? html`
`
- : html``
- }
+ : ""
+ )}
-
+
+
${
isComponentLoaded(this.hass, "automation")
? html`
@@ -315,14 +390,14 @@ export class HaConfigDevicePage extends LitElement {
+
-
${this.hass.localize(
"ui.panel.config.devices.add_prompt",
"name",
@@ -370,92 +445,82 @@ export class HaConfigDevicePage extends LitElement {
"ui.panel.config.devices.automation.automations"
)
)}
-
+
`}
`
: ""
}
-
${
isComponentLoaded(this.hass, "scene") && entities.length
? html`
-
- ${this.hass.localize(
- "ui.panel.config.devices.scene.scenes"
- )}
+
- ${
- this._related?.scene?.length
- ? this._related.scene.map((scene) => {
- const entityState = this.hass.states[scene];
- return entityState
- ? html`
-
- ${this.hass.localize(
- "ui.panel.config.devices.add_prompt",
- "name",
- this.hass.localize(
- "ui.panel.config.devices.scene.scenes"
- )
- )}
-
- `
- }
-
+ ${this._related?.scene?.length
+ ? this._related.scene.map((scene) => {
+ const entityState = this.hass.states[scene];
+ return entityState
+ ? html`
+
+
-
- ${this.hass.localize(
- "ui.panel.config.devices.scene.scenes"
- )}
+
+ ${this.hass.localize(
+ "ui.panel.config.devices.scene.scenes"
+ )}
-
+
- ${
- this._related?.scene?.length
- ? this._related.scene.map((scene) => {
- const entityState = this.hass.states[scene];
- return entityState
- ? html`
-
-
-
-
- ${computeStateName(entityState)}
-
-
-
- ${!entityState.attributes.id
- ? html`
-
- ${this.hass.localize(
- "ui.panel.config.devices.cant_edit"
- )}
-
- `
- : ""}
-
- `
- : "";
- })
- : html`
-
+
+
+
+ ${computeStateName(entityState)}
+
+
+
+ ${!entityState.attributes.id
+ ? html`
+
+ ${this.hass.localize(
+ "ui.panel.config.devices.cant_edit"
+ )}
+
+ `
+ : ""}
+
+ `
+ : "";
+ })
+ : html`
+
+ ${this.hass.localize(
+ "ui.panel.config.devices.add_prompt",
+ "name",
+ this.hass.localize(
+ "ui.panel.config.devices.scene.scenes"
+ )
+ )}
+
+ `}
`
: ""
@@ -471,14 +536,14 @@ export class HaConfigDevicePage extends LitElement {
${this.hass.localize(
"ui.panel.config.devices.add_prompt",
"name",
@@ -508,14 +573,14 @@ export class HaConfigDevicePage extends LitElement {
"ui.panel.config.devices.script.scripts"
)
)}
-
+
`}
`
: ""
}
+ ${this.hass.localize( + "ui.panel.config.energy.battery.battery_systems" + )} +
${batterySources.map((source) => { const fromEntityState = this.hass.states[source.stat_energy_from]; const toEntityState = this.hass.states[source.stat_energy_to]; @@ -101,19 +106,23 @@ export class EnergyBatterySettings extends LitElement { : source.stat_energy_to}Devices
++ ${this.hass.localize( + "ui.panel.config.energy.device_consumption.devices" + )} +
${this.preferences.device_consumption.map((device) => { const entityState = this.hass.states[device.stat_consumption]; return html`
-
-
+
`;
})}
Gas consumption
++ ${this.hass.localize("ui.panel.config.energy.gas.gas_consumption")} +
${gasSources.map((source) => { const entityState = this.hass.states[source.stat_energy_from]; return html` @@ -90,18 +93,24 @@ export class EnergyGasSettings extends LitElement { ? computeStateName(entityState) : source.stat_energy_from} -Grid consumption
++ ${this.hass.localize( + "ui.panel.config.energy.grid.grid_consumption" + )} +
${gridSource.flow_from.map((flow) => { const entityState = this.hass.states[flow.stat_energy_from]; return html` @@ -126,23 +131,29 @@ export class EnergyGridSettings extends LitElement { ? computeStateName(entityState) : flow.stat_energy_from} -Return to grid
++ ${this.hass.localize("ui.panel.config.energy.grid.return_to_grid")} +
${gridSource.flow_to.map((flow) => { const entityState = this.hass.states[flow.stat_energy_to]; return html` @@ -159,21 +170,31 @@ export class EnergyGridSettings extends LitElement { ? computeStateName(entityState) : flow.stat_energy_to} -Grid carbon footprint
++ ${this.hass.localize( + "ui.panel.config.energy.grid.grid_carbon_footprint" + )} +
${this._configEntries?.map( (entry) => html`` )} ${this._configEntries?.length === 0 @@ -207,7 +227,9 @@ export class EnergyGridSettings extends LitElement { })} />Solar production
++ ${this.hass.localize( + "ui.panel.config.energy.solar.solar_production" + )} +
${solarSources.map((source) => { const entityState = this.hass.states[source.stat_energy_from]; return html` @@ -98,14 +103,16 @@ export class EnergySolarSettings extends LitElement { > ${this.info ? html` -${this._error}
` : ""} @@ -68,7 +70,9 @@ export class DialogEnergyBatterySettings .includeUnitOfMeasurement=${energyUnits} .includeDeviceClasses=${energyDeviceClasses} .value=${this._source.stat_energy_to} - .label=${`Energy going in to the battery (kWh)`} + .label=${this.hass.localize( + "ui.panel.config.energy.battery.dialog.energy_into_battery" + )} entities-only @value-changed=${this._statisticToChanged} > @@ -78,7 +82,9 @@ export class DialogEnergyBatterySettings .includeUnitOfMeasurement=${energyUnits} .includeDeviceClasses=${energyDeviceClasses} .value=${this._source.stat_energy_from} - .label=${`Energy coming out of the battery (kWh)`} + .label=${this.hass.localize( + "ui.panel.config.energy.battery.dialog.energy_out_of_battery" + )} entities-only @value-changed=${this._statisticFromChanged} > diff --git a/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts index 758874ff42..4a7002a8e3 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts @@ -55,7 +55,9 @@ export class DialogEnergyDeviceSettings .path=${mdiDevices} style="--mdc-icon-size: 32px;" > - Add a device`} + ${this.hass.localize( + "ui.panel.config.energy.device_consumption.dialog.header" + )}`} @closed=${this.closeDialog} > ${this._error ? html`${this._error}
` : ""} @@ -69,7 +71,9 @@ export class DialogEnergyDeviceSettings .hass=${this.hass} .includeUnitOfMeasurement=${energyUnits} .includeDeviceClasses=${energyDeviceClasses} - .label=${`Device consumption energy (kWh)`} + .label=${this.hass.localize( + "ui.panel.config.energy.device_consumption.dialog.device_consumption_energy" + )} entities-only @value-changed=${this._statisticChanged} > diff --git a/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts index 595ec1c942..e4a4bf98ce 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts @@ -82,7 +82,7 @@ export class DialogEnergyGasSettings .path=${mdiFire} style="--mdc-icon-size: 32px;" > - Configure Gas consumption`} + ${this.hass.localize("ui.panel.config.energy.gas.dialog.header")}`} @closed=${this.closeDialog} > ${this._error ? html`${this._error}
` : ""} @@ -95,9 +95,13 @@ export class DialogEnergyGasSettings ? ENERGY_GAS_ENERGY_UNITS : ENERGY_GAS_VOLUME_UNITS} .value=${this._source.stat_energy_from} - .label=${`Gas usage (${ + .label=${`${this.hass.localize( + "ui.panel.config.energy.gas.dialog.gas_usage" + )} (${ this._params.unit === undefined - ? "m³ or kWh" + ? this.hass.localize( + "ui.panel.config.energy.gas.dialog.m3_or_kWh" + ) : this._params.unit === "energy" ? "kWh" : "m³" diff --git a/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts index d4cdd03676..bcb5786097 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts @@ -72,7 +72,7 @@ export class DialogEnergySolarSettings .path=${mdiSolarPower} style="--mdc-icon-size: 32px;" > - Configure solar panels`} + ${this.hass.localize("ui.panel.config.energy.solar.dialog.header")}`} @closed=${this.closeDialog} > ${this._error ? html`${this._error}
` : ""} @@ -82,18 +82,29 @@ export class DialogEnergySolarSettings .includeUnitOfMeasurement=${energyUnits} .includeDeviceClasses=${energyDeviceClasses} .value=${this._source.stat_energy_from} - .label=${`Solar production energy (kWh)`} + .label=${this.hass.localize( + "ui.panel.config.energy.solar.dialog.solar_production_energy" + )} entities-only @value-changed=${this._statisticChanged} > -Solar production forecast
++ ${this.hass.localize( + "ui.panel.config.energy.solar.dialog.solar_production_forecast" + )} +
- Adding solar production forecast information will allow you to quickly - see your expected production for today. + ${this.hass.localize( + "ui.panel.config.energy.solar.dialog.solar_production_forecast_description" + )}
-${this.hass.localize("ui.dialogs.helper_settings.input_datetime.mode")}:
-
@@ -153,7 +155,7 @@ export class ZHAGroupPage extends LitElement {
>
-
@@ -196,12 +206,13 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
[[localize('ui.panel.developer-tools.tabs.states.entity')]]
[[localize('ui.panel.developer-tools.tabs.states.state')]]
-
+
[[localize('ui.panel.developer-tools.tabs.states.attributes')]]
-
@@ -544,6 +555,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
}
saveAttributeCheckboxState(ev) {
+ this._showAttributes = ev.target.checked;
try {
localStorage.setItem("devToolsShowAttributes", ev.target.checked);
} catch (e) {
diff --git a/src/panels/developer-tools/statistics/developer-tools-statistics.ts b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
index 66fbd5354b..71963bfe6e 100644
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@@ -8,18 +8,24 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/data-table/ha-data-table";
import type { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
import {
+ clearStatistics,
getStatisticIds,
StatisticsMetaData,
StatisticsValidationResult,
validateStatistics,
} from "../../../data/history";
-import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+ showAlertDialog,
+ showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import { showFixStatisticsUnitsChangedDialog } from "./show-dialog-statistics-fix-units-changed";
import { showFixStatisticsUnsupportedUnitMetadataDialog } from "./show-dialog-statistics-fix-unsupported-unit-meta";
const FIX_ISSUES_ORDER = {
+ no_state: 0,
+ entity_no_longer_recorded: 1,
entity_not_recorded: 1,
unsupported_unit_state: 2,
unsupported_state_class: 3,
@@ -103,7 +109,7 @@ class HaPanelDevStatistics extends LitElement {
Do you want to permanently remove + the long term statistics of ${issue.data.statistic_id} from your + database?`, + confirm: async () => { + await clearStatistics(this.hass, [issue.data.statistic_id]); + this._validateStatistics(); + }, + }); + break; case "entity_not_recorded": showAlertDialog(this, { title: "Entity not recorded", @@ -172,6 +192,24 @@ class HaPanelDevStatistics extends LitElement { for more information.`, }); break; + case "entity_no_longer_recorded": + showAlertDialog(this, { + title: "Entity no longer recorded", + text: html`We have generated statistics for this entity in the past, + but state changes of this entity are no longer recorded, therefore, + we can not track long term statistics for it anymore. +
You probably excluded this entity, or have just included + some entities.
See the + + recorder documentation + for more information.`, + }); + break; case "unsupported_state_class": showAlertDialog(this, { title: "Unsupported state class", diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index 9ad752a4b9..952815a91f 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -25,7 +25,7 @@ The temperature is {{ my_test_json.temperature }} {{ my_test_json.unit }}. {% if is_state("sun.sun", "above_horizon") -%} The sun rose {{ relative_time(states.sun.sun.last_changed) }} ago. {%- else -%} - The sun will rise at {{ as_timestamp(strptime(state_attr("sun.sun", "next_rising"), "")) | timestamp_local }}. + The sun will rise at {{ as_timestamp(state_attr("sun.sun", "next_rising")) | timestamp_local }}. {%- endif %} For loop example getting entity values in the weather domain: diff --git a/src/panels/energy/cards/energy-setup-wizard-card.ts b/src/panels/energy/cards/energy-setup-wizard-card.ts index 248a80c10d..57a1ee52e7 100644 --- a/src/panels/energy/cards/energy-setup-wizard-card.ts +++ b/src/panels/energy/cards/energy-setup-wizard-card.ts @@ -1,7 +1,12 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; -import { EnergyPreferences, saveEnergyPreferences } from "../../../data/energy"; +import { + EnergyInfo, + EnergyPreferences, + getEnergyInfo, + saveEnergyPreferences, +} from "../../../data/energy"; import { LovelaceCardConfig } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; import { LovelaceCard, Lovelace } from "../../lovelace/types"; @@ -20,6 +25,8 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard { @property({ attribute: false }) public lovelace?: Lovelace; + @state() private _info?: EnergyInfo; + @state() private _step = 0; @state() private _preferences: EnergyPreferences = { @@ -39,6 +46,7 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard { protected firstUpdated() { this.hass.loadFragmentTranslation("config"); + this._fetchconfig(); } protected render(): TemplateResult { @@ -54,6 +62,7 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard { ? html`
-
+ .path=${mdiRefresh}
+ .label=${this.hass.localize("ui.common.refresh")}
+ >
@@ -135,6 +137,8 @@ class HaPanelHistory extends LitElement {
[this.hass.localize("ui.components.date-range-picker.ranges.last_week")]:
[addDays(weekStart, -7), addDays(weekEnd, -7)],
};
+
+ this._entityId = extractSearchParam("entity_id") ?? "";
}
protected updated(changedProps: PropertyValues) {
diff --git a/src/panels/iframe/ha-panel-iframe.js b/src/panels/iframe/ha-panel-iframe.js
deleted file mode 100644
index 8dcc0e4670..0000000000
--- a/src/panels/iframe/ha-panel-iframe.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../components/ha-menu-button";
-import "../../styles/polymer-ha-style";
-
-class HaPanelIframe extends PolymerElement {
- static get template() {
- return html`
-
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- narrow: Boolean,
- panel: Object,
- };
- }
-}
-
-customElements.define("ha-panel-iframe", HaPanelIframe);
diff --git a/src/panels/iframe/ha-panel-iframe.ts b/src/panels/iframe/ha-panel-iframe.ts
new file mode 100644
index 0000000000..14aec1fdcd
--- /dev/null
+++ b/src/panels/iframe/ha-panel-iframe.ts
@@ -0,0 +1,63 @@
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../layouts/hass-error-screen";
+import "../../layouts/hass-subpage";
+import { HomeAssistant, PanelInfo } from "../../types";
+
+@customElement("ha-panel-iframe")
+class HaPanelIframe extends LitElement {
+ @property() hass!: HomeAssistant;
+
+ @property({ type: Boolean }) narrow!: boolean;
+
+ @property() panel!: PanelInfo<{ url: string }>;
+
+ render() {
+ if (
+ location.protocol === "https:" &&
+ new URL(this.panel.config.url, location.toString()).protocol !== "https:"
+ ) {
+ return html`
+
+
+
+ `;
+ }
+
+ static styles = css`
+ iframe {
+ border: 0;
+ width: 100%;
+ position: absolute;
+ height: 100%;
+ background-color: var(--primary-background-color);
+ }
+ `;
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-panel-iframe": HaPanelIframe;
+ }
+}
diff --git a/src/panels/logbook/ha-logbook.ts b/src/panels/logbook/ha-logbook.ts
index 2ac78f9515..87d3d311ac 100644
--- a/src/panels/logbook/ha-logbook.ts
+++ b/src/panels/logbook/ha-logbook.ts
@@ -222,6 +222,7 @@ class HaLogbook extends LitElement {
}?run_id=${
this.traceContexts[item.context_id!].run_id
}`}
+ @click=${this._close}
>${this.hass.localize(
"ui.components.logbook.show_trace"
)} fireEvent(this, "closed"), 500);
+ }
+
static get styles(): CSSResultGroup {
return [
haStyle,
diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts
index 8b7987f8d1..ed9fb3e690 100644
--- a/src/panels/logbook/ha-panel-logbook.ts
+++ b/src/panels/logbook/ha-panel-logbook.ts
@@ -1,5 +1,4 @@
import { mdiRefresh } from "@mdi/js";
-import "@material/mwc-icon-button";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import { css, html, LitElement, PropertyValues } from "lit";
@@ -20,6 +19,7 @@ import "../../components/entity/ha-entity-picker";
import "../../components/ha-circular-progress";
import "../../components/ha-date-range-picker";
import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
+import "../../components/ha-icon-button";
import "../../components/ha-menu-button";
import {
clearLogbookCache,
@@ -33,6 +33,7 @@ import "../../layouts/ha-app-layout";
import { haStyle } from "../../resources/styles";
import { HomeAssistant } from "../../types";
import "./ha-logbook";
+import { extractSearchParam } from "../../common/url/search-params";
@customElement("ha-panel-logbook")
export class HaPanelLogbook extends LitElement {
@@ -82,12 +83,12 @@ export class HaPanelLogbook extends LitElement {
.narrow=${this.narrow}
>
-
+ >
@@ -158,6 +159,8 @@ export class HaPanelLogbook extends LitElement {
[this.hass.localize("ui.components.date-range-picker.ranges.last_week")]:
[addDays(weekStart, -7), addDays(weekEnd, -7)],
};
+
+ this._entityId = extractSearchParam("entity_id") ?? "";
}
protected updated(changedProps: PropertyValues) {
diff --git a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
index a64d0864e6..ee15dc7b3f 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
@@ -59,7 +59,9 @@ class HuiEnergyCarbonGaugeCard
}
if (!this._data) {
- return html`Loading...`;
+ return html`${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.loading"
+ )}`;
}
if (!this._data.co2SignalEntity) {
@@ -129,9 +131,9 @@ class HuiEnergyCarbonGaugeCard
- This card indicates how much of the energy consumed by your
- home was generated using non-fossil fuels like solar, wind and
- nuclear. The higher, the better!
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.carbon_consumed_gauge.card_indicates_energy_used"
+ )}
Go to the energy dashboard
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_distribution.go_to_energy_dashboard"
+ )}
+
`
diff --git a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
index 4175f55bee..8f31da9fc1 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
@@ -110,8 +110,10 @@ export class HuiEnergyGasGraphCard
${!this._chartData.datasets.length
? html`
- This card represents your energy dependency.
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency"
+ )}
- If it's green, it means you produced more energy than that you - consumed from the grid. If it's in the red, it means that you - relied on the grid for part of your home's energy consumption. + ${this.hass.localize( + "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain" + )}
@@ -126,11 +128,17 @@ class HuiEnergyGridGaugeCard
>
- This card indicates how much of the solar energy you produced
- was used by your home instead of being returned to the grid.
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used"
+ )}
- If this number is typically very low, indicating excess solar - production, you might want to consider charging a home battery - or electric car from your solar panels at times of high solar - production. + ${this.hass.localize( + "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat" + )}
- Energy
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_sources_table.energy"
+ )}
${showCosts
? html`
- Cost
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_sources_table.cost"
+ )}
`
: ""}
@@ -290,7 +298,9 @@ export class HuiEnergySourcesTableCard
? html`
- Battery total
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_sources_table.battery_total"
+ )}
Grid total
+
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_sources_table.grid_total"
+ )}
+
@@ -524,7 +538,9 @@ export class HuiEnergySourcesTableCard
? html`
- Total costs
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_sources_table.total_costs"
+ )}
dataset.data.length)
? html`
-
-
+
+
+ ${this._config.name ||
+ stateObj.attributes.friendly_name ||
+ stateLabel}
+
Do you want to permanently remove + the long term statistics of ${issue.data.statistic_id} from your + database?`, + confirm: async () => { + await clearStatistics(this.hass, [issue.data.statistic_id]); + this._validateStatistics(); + }, + }); + break; case "entity_not_recorded": showAlertDialog(this, { title: "Entity not recorded", @@ -172,6 +192,24 @@ class HaPanelDevStatistics extends LitElement { for more information.`, }); break; + case "entity_no_longer_recorded": + showAlertDialog(this, { + title: "Entity no longer recorded", + text: html`We have generated statistics for this entity in the past, + but state changes of this entity are no longer recorded, therefore, + we can not track long term statistics for it anymore. +
You probably excluded this entity, or have just included + some entities.
See the + + recorder documentation + for more information.`, + }); + break; case "unsupported_state_class": showAlertDialog(this, { title: "Unsupported state class", diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index 9ad752a4b9..952815a91f 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -25,7 +25,7 @@ The temperature is {{ my_test_json.temperature }} {{ my_test_json.unit }}. {% if is_state("sun.sun", "above_horizon") -%} The sun rose {{ relative_time(states.sun.sun.last_changed) }} ago. {%- else -%} - The sun will rise at {{ as_timestamp(strptime(state_attr("sun.sun", "next_rising"), "")) | timestamp_local }}. + The sun will rise at {{ as_timestamp(state_attr("sun.sun", "next_rising")) | timestamp_local }}. {%- endif %} For loop example getting entity values in the weather domain: diff --git a/src/panels/energy/cards/energy-setup-wizard-card.ts b/src/panels/energy/cards/energy-setup-wizard-card.ts index 248a80c10d..57a1ee52e7 100644 --- a/src/panels/energy/cards/energy-setup-wizard-card.ts +++ b/src/panels/energy/cards/energy-setup-wizard-card.ts @@ -1,7 +1,12 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; -import { EnergyPreferences, saveEnergyPreferences } from "../../../data/energy"; +import { + EnergyInfo, + EnergyPreferences, + getEnergyInfo, + saveEnergyPreferences, +} from "../../../data/energy"; import { LovelaceCardConfig } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; import { LovelaceCard, Lovelace } from "../../lovelace/types"; @@ -20,6 +25,8 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard { @property({ attribute: false }) public lovelace?: Lovelace; + @state() private _info?: EnergyInfo; + @state() private _step = 0; @state() private _preferences: EnergyPreferences = { @@ -39,6 +46,7 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard { protected firstUpdated() { this.hass.loadFragmentTranslation("config"); + this._fetchconfig(); } protected render(): TemplateResult { @@ -54,6 +62,7 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard { ? html`
${this.hass.localize("panel.history")}
- [[panel.title]]
- ${this.hass.localize("panel.logbook")}
- Non-fossil energy consumed
+
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.carbon_consumed_gauge.non_fossil_energy_consumed"
+ )}
+
`
- : html`Consumed non-fossil energy couldn't be calculated`}
+ : html`${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.carbon_consumed_gauge.non_fossil_energy_not_calculated"
+ )}`}
`;
}
diff --git a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
index 5d24f900d5..5006808340 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
@@ -170,7 +170,9 @@ export class HuiEnergyDevicesGraphCard
const datasets: ChartDataset<"bar", ParsedDataType<"bar">[]>[] = [
{
- label: "Energy usage",
+ label: this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_devices_graph.energy_usage"
+ ),
borderColor,
backgroundColor,
data,
diff --git a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
index 3a71b8d80b..7c2cf2c2d2 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
@@ -70,7 +70,9 @@ class HuiEnergyDistrubutionCard
}
if (!this._data) {
- return html`Loading…`;
+ return html`${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.loading"
+ )}`;
}
const prefs = this._data.prefs;
@@ -267,7 +269,11 @@ class HuiEnergyDistrubutionCard
${lowCarbonEnergy === undefined
? html``
: html`
- Non-fossil
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_distribution.non_fossil"
+ )}
`}
${hasSolarProduction
? html`
`
@@ -659,7 +685,11 @@ class HuiEnergyDistrubutionCard
? html`
- Solar
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_distribution.solar"
+ )}
- Battery
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_distribution.battery"
+ )}
- Gas
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_distribution.gas"
+ )}
`
: ""}
- Home
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_distribution.home"
+ )}
${isToday(this._start)
- ? "There is no data to show. It can take up to 2 hours for new data to arrive after you configure your energy dashboard."
- : "There is no data for this period."}
+ ? this.hass.localize("ui.panel.lovelace.cards.energy.no_data")
+ : this.hass.localize(
+ "ui.panel.lovelace.cards.energy.no_data_period"
+ )}
`
: ""}
@@ -173,6 +175,7 @@ export class HuiEnergyGasGraphCard
offset: true,
},
y: {
+ stacked: true,
type: "linear",
title: {
display: true,
@@ -304,6 +307,7 @@ export class HuiEnergyGasGraphCard
borderColor,
backgroundColor: borderColor + "7F",
data: gasConsumptionData,
+ stack: "gas",
});
}
diff --git a/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts
index 1f7e9d3f94..cc26d82a0d 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts
@@ -18,12 +18,10 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
import type { HomeAssistant } from "../../../../types";
import type { LovelaceCard } from "../../types";
import type { EnergyGridGaugeCardConfig } from "../types";
-import { severityMap } from "../hui-gauge-card";
const LEVELS: LevelDefinition[] = [
- { level: -1, stroke: severityMap.red },
- { level: -0.2, stroke: severityMap.yellow },
- { level: 0, stroke: severityMap.green },
+ { level: -1, stroke: "var(--energy-grid-consumption-color)" },
+ { level: 0, stroke: "var(--energy-grid-return-color)" },
];
@customElement("hui-energy-grid-neutrality-gauge-card")
@@ -61,7 +59,9 @@ class HuiEnergyGridGaugeCard
}
if (!this._data) {
- return html`Loading...`;
+ return html`${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.loading"
+ )}`;
}
const prefs = this._data.prefs;
@@ -102,11 +102,13 @@ class HuiEnergyGridGaugeCard
- If it's green, it means you produced more energy than that you - consumed from the grid. If it's in the red, it means that you - relied on the grid for part of your home's energy consumption. + ${this.hass.localize( + "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain" + )}
${returnedToGrid! >= consumedFromGrid!
- ? "Net returned to the grid"
- : "Net consumed from the grid"}
+ ? this.hass.localize(
+ "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.net_returned_grid"
+ )
+ : this.hass.localize(
+ "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.net_consumed_grid"
+ )}
`
- : "Grid neutrality could not be calculated"}
+ : this.hass.localize(
+ "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.grid_neutrality_not_calculated"
+ )}
`;
}
diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts
index 6f54631658..578ae00fd5 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts
@@ -54,7 +54,9 @@ class HuiEnergySolarGaugeCard
}
if (!this._data) {
- return html`Loading...`;
+ return html`${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.loading"
+ )}`;
}
const prefs = this._data.prefs;
@@ -91,13 +93,13 @@ class HuiEnergySolarGaugeCard
- If this number is typically very low, indicating excess solar - production, you might want to consider charging a home battery - or electric car from your solar panels at times of high solar - production. + ${this.hass.localize( + "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat" + )}
Self-consumed solar energy
+
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.solar_consumed_gauge.self_consumed_solar_energy"
+ )}
+
`
: totalSolarProduction === 0
- ? "You have not produced any solar energy"
- : "Self-consumed solar energy couldn't be calculated"}
+ ? this.hass.localize(
+ "ui.panel.lovelace.cards.energy.solar_consumed_gauge.not_produced_solar_energy"
+ )
+ : this.hass.localize(
+ "ui.panel.lovelace.cards.energy.solar_consumed_gauge.self_consumed_solar_could_not_calc"
+ )}
`;
}
diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
index fb595bf124..de57958829 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
@@ -108,8 +108,10 @@ export class HuiEnergySolarGraphCard
${!this._chartData.datasets.length
? html`
${isToday(this._start)
- ? "There is no data to show. It can take up to 2 hours for new data to arrive after you configure your energy dashboard."
- : "There is no data for this period."}
+ ? this.hass.localize("ui.panel.lovelace.cards.energy.no_data")
+ : this.hass.localize(
+ "ui.panel.lovelace.cards.energy.no_data_period"
+ )}
`
: ""}
@@ -166,6 +168,7 @@ export class HuiEnergySolarGraphCard
offset: true,
},
y: {
+ stacked: true,
type: "linear",
title: {
display: true,
@@ -306,12 +309,16 @@ export class HuiEnergySolarGraphCard
if (solarProductionData.length) {
data.push({
- label: `Production ${
- entity ? computeStateName(entity) : source.stat_energy_from
- }`,
+ label: this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_solar_graph.production",
+ {
+ name: entity ? computeStateName(entity) : source.stat_energy_from,
+ }
+ ),
borderColor,
backgroundColor: borderColor + "7F",
data: solarProductionData,
+ stack: "solar",
});
}
@@ -361,9 +368,14 @@ export class HuiEnergySolarGraphCard
if (solarForecastData.length) {
data.push({
type: "line",
- label: `Forecast ${
- entity ? computeStateName(entity) : source.stat_energy_from
- }`,
+ label: this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_solar_graph.forecast",
+ {
+ name: entity
+ ? computeStateName(entity)
+ : source.stat_energy_from,
+ }
+ ),
fill: false,
stepped: false,
borderColor: computedStyles.getPropertyValue(
diff --git a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
index e91ecd9fee..bd6a0f3756 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
@@ -69,7 +69,9 @@ export class HuiEnergySourcesTableCard
}
if (!this._data) {
- return html`Loading...`;
+ return html`${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.loading"
+ )}`;
}
let totalGrid = 0;
@@ -134,14 +136,18 @@ export class HuiEnergySourcesTableCard
role="columnheader"
scope="col"
>
- Source
+ ${this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_sources_table.source"
+ )}
${isToday(this._start)
- ? "There is no data to show. It can take up to 2 hours for new data to arrive after you configure your energy dashboard."
- : "There is no data for this period."}
+ ? this.hass.localize("ui.panel.lovelace.cards.energy.no_data")
+ : this.hass.localize(
+ "ui.panel.lovelace.cards.energy.no_data_period"
+ )}
`
: ""}
@@ -204,16 +205,16 @@ export class HuiEnergyUsageGraphCard
}
return [
totalConsumed
- ? `Total consumed: ${formatNumber(
- totalConsumed,
- locale
- )} kWh`
+ ? this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_usage_graph.total_consumed",
+ { num: formatNumber(totalConsumed, locale) }
+ )
: "",
totalReturned
- ? `Total returned: ${formatNumber(
- totalReturned,
- locale
- )} kWh`
+ ? this.hass.localize(
+ "ui.panel.lovelace.cards.energyenergy_usage_graph.total_returned",
+ { num: formatNumber(totalReturned, locale) }
+ )
: "",
].filter(Boolean);
},
@@ -344,15 +345,17 @@ export class HuiEnergyUsageGraphCard
.trim(),
};
const labels = {
- used_grid: "Combined from grid",
- used_solar: "Consumed solar",
- used_battery: "Consumed battery",
+ used_grid: this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_usage_graph.combined_from_grid"
+ ),
+ used_solar: this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_usage_graph.consumed_solar"
+ ),
+ used_battery: this.hass.localize(
+ "ui.panel.lovelace.cards.energy.energy_usage_graph.consumed_battery"
+ ),
};
- const backgroundColor = computedStyles
- .getPropertyValue("--card-background-color")
- .trim();
-
Object.entries(statistics).forEach(([key, statIds]) => {
const sum = [
"solar",
@@ -507,7 +510,7 @@ export class HuiEnergyUsageGraphCard
? Object.keys(combinedData).length
: idx + 1,
borderColor,
- backgroundColor: hexBlend(borderColor, backgroundColor, 50),
+ backgroundColor: borderColor + "7F",
stack: "stack",
data: [],
});
diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
index 8565b47cdd..370add6330 100644
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@@ -8,17 +8,18 @@ import {
PropertyValues,
TemplateResult,
} from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import { fireEvent } from "../../../common/dom/fire_event";
import { alarmPanelIcon } from "../../../common/entity/alarm_panel_icon";
import "../../../components/ha-card";
-import "../../../components/ha-label-badge";
+import "../../../components/ha-chip";
import {
callAlarmAction,
FORMAT_NUMBER,
} from "../../../data/alarm_control_panel";
+import { UNAVAILABLE } from "../../../data/entity";
import type { HomeAssistant } from "../../../types";
import { findEntities } from "../common/find-entities";
import { createEntityNotFoundWarning } from "../components/hui-warning";
@@ -144,19 +145,24 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
`;
}
+ const stateLabel = this._stateDisplay(stateObj.state);
+
return html`
-
+ ${this._config.name ||
+ stateObj.attributes.friendly_name ||
+ stateLabel}
+
+
+
+ ${stateLabel}
+
+
${(stateObj.state === "disarmed"
? this._config.states!
@@ -215,23 +221,16 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
`;
}
- private _stateIconLabel(entityState: string): string {
- const stateLabel = entityState.split("_").pop();
- return stateLabel === "disarmed" ||
- stateLabel === "triggered" ||
- !stateLabel
- ? ""
- : this._stateDisplay(entityState);
- }
-
private _actionDisplay(entityState: string): string {
return this.hass!.localize(`ui.card.alarm_control_panel.${entityState}`);
}
private _stateDisplay(entityState: string): string {
- return this.hass!.localize(
- `component.alarm_control_panel.state._.${entityState}`
- );
+ return entityState === UNAVAILABLE
+ ? this.hass!.localize("state.default.unavailable")
+ : this.hass!.localize(
+ `component.alarm_control_panel.state._.${entityState}`
+ ) || entityState;
}
private _handlePadClick(e: MouseEvent): void {
@@ -273,15 +272,20 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
--alarm-state-color: var(--alarm-color-armed);
}
- ha-label-badge {
- --ha-label-badge-color: var(--alarm-state-color);
- --label-badge-text-color: var(--alarm-state-color);
- --label-badge-background-color: var(--card-background-color);
- color: var(--alarm-state-color);
- position: absolute;
- right: 12px;
- top: 8px;
- cursor: pointer;
+ ha-chip {
+ --ha-chip-background-color: var(--alarm-state-color);
+ --ha-chip-text-color: var(--text-primary-color);
+ line-height: initial;
+ }
+
+ .card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .unavailable {
+ --alarm-state-color: var(--state-unavailable-color);
}
.disarmed {
diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts
index 6893279f1a..a490f9277c 100644
--- a/src/panels/lovelace/cards/hui-button-card.ts
+++ b/src/panels/lovelace/cards/hui-button-card.ts
@@ -26,7 +26,6 @@ import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateDisplay } from "../../../common/entity/compute_state_display";
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
-import { stateIcon } from "../../../common/entity/state_icon";
import { isValidEntityId } from "../../../common/entity/valid_entity_id";
import { iconColorCSS } from "../../../common/style/icon_color_css";
import "../../../components/ha-card";
@@ -167,7 +166,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
>
${this._config.show_icon
? html`
-
${name}
-
diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index fd1528c329..445bd5ff7a 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-glance-card.ts
@@ -321,6 +321,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
.hass=${this.hass}
.ts=${new Date(stateObj.state)}
.format=${entityConf.format}
+ capitalize
>
`
: entityConf.show_last_changed
diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts
index b1337abf0a..9baf03d160 100644
--- a/src/panels/lovelace/cards/hui-humidifier-card.ts
+++ b/src/panels/lovelace/cards/hui-humidifier-card.ts
@@ -1,3 +1,4 @@
+import { mdiDotsVertical } from "@mdi/js";
import "@thomasloven/round-slider";
import { HassEntity } from "home-assistant-js-websocket";
import {
@@ -158,7 +159,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
return html`
+ ${this.hass!.localize(
+ "ui.panel.lovelace.cards.iframe.error_secure_context",
+ {
+ target_protocol,
+ context_protocol: location.protocol,
+ }
+ )}
+
+ `;
+ }
+
return html`
`;
@@ -365,7 +366,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
background: inherit;
}
- mwc-icon-button {
+ ha-icon-button {
position: absolute;
top: 75px;
left: 3px;
diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts
index 6f8cc9fde9..0f91a15b34 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/src/panels/lovelace/cards/hui-markdown-card.ts
@@ -171,6 +171,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
}
ha-markdown {
padding: 0 16px 16px;
+ word-wrap: break-word;
}
ha-markdown.no-header {
padding-top: 16px;
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index 7a223f7bb0..28f279019d 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -1,7 +1,6 @@
-import "@material/mwc-icon-button";
-import { mdiPlayBoxMultiple } from "@mdi/js";
-import "@polymer/paper-progress/paper-progress";
-import type { PaperProgressElement } from "@polymer/paper-progress/paper-progress";
+import "@material/mwc-linear-progress/mwc-linear-progress";
+import type { LinearProgress } from "@material/mwc-linear-progress/mwc-linear-progress";
+import { mdiDotsVertical, mdiPlayBoxMultiple } from "@mdi/js";
import {
css,
CSSResultGroup,
@@ -10,20 +9,18 @@ import {
PropertyValues,
TemplateResult,
} from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import { fireEvent } from "../../../common/dom/fire_event";
import { computeStateName } from "../../../common/entity/compute_state_name";
-import { stateIcon } from "../../../common/entity/state_icon";
import { supportsFeature } from "../../../common/entity/supports-feature";
import { extractColors } from "../../../common/image/extract_color";
import { debounce } from "../../../common/util/debounce";
import "../../../components/ha-card";
-import "../../../components/ha-icon";
import "../../../components/ha-icon-button";
-import "../../../components/ha-svg-icon";
+import "../../../components/ha-state-icon";
import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
import { UNAVAILABLE_STATES } from "../../../data/entity";
import {
@@ -84,7 +81,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
@state() private _cardHeight = 0;
- @query("paper-progress") private _progressBar?: PaperProgressElement;
+ @query("mwc-linear-progress") private _progressBar?: LinearProgress;
@state() private _marqueeActive = false;
@@ -229,7 +226,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
>
-
-
+ >
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index d660dae680..9efb669f41 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -137,13 +137,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
.paths=${this._getHistoryPaths(this._config, this._history)}
.darkMode=${this._config.dark_mode}
>
-
-
+ >
@@ -131,7 +132,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
"state-on": stateObj.state === "on",
"state-unavailable": stateObj.state === UNAVAILABLE,
})}"
- .icon=${this._config.icon || stateIcon(stateObj)}
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
style=${styleMap({
filter: this._computeBrightness(stateObj),
@@ -143,7 +143,12 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
hasDoubleClick: hasAction(this._config!.double_tap_action),
})}
tabindex="0"
- >
+ >
+
-
`
@@ -512,8 +509,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
}
private _updateProgressBar(): void {
- if (this._progressBar) {
- this._progressBar.value = getCurrentProgress(this._stateObj!);
+ if (this._progressBar && this._stateObj?.attributes.media_duration) {
+ this._progressBar.progress =
+ getCurrentProgress(this._stateObj) /
+ this._stateObj!.attributes.media_duration;
}
}
@@ -528,12 +527,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
return;
}
- const progressWidth = (
- this.shadowRoot!.querySelector("paper-progress") as HTMLElement
- ).offsetWidth;
+ const progressWidth = (this._progressBar as HTMLElement).offsetWidth;
const percent = e.offsetX / progressWidth;
- const position = (e.currentTarget! as any).max * percent;
+ const position = this._stateObj!.attributes.media_duration! * percent;
this.hass!.callService("media_player", "media_seek", {
entity_id: this._config!.entity,
@@ -692,7 +689,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
--mdc-icon-size: 40px;
}
- mwc-icon-button.browse-media {
+ ha-icon-button.browse-media {
position: absolute;
right: 4px;
--mdc-icon-size: 24px;
@@ -709,7 +706,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
align-items: center;
}
- .icon-name ha-icon {
+ .icon-name ha-state-icon {
padding-right: 8px;
}
@@ -734,12 +731,10 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
padding-top: 16px;
}
- paper-progress {
+ mwc-linear-progress {
width: 100%;
- height: var(--paper-progress-height, 4px);
margin-top: 4px;
- border-radius: calc(var(--paper-progress-height, 4px) / 2);
- --paper-progress-container-color: rgba(200, 200, 200, 0.5);
+ --mdc-linear-progress-buffer-color: rgba(200, 200, 200, 0.5);
}
.no-image .controls {
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts
index 4a29f5679f..c46d669a9f 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts
@@ -14,9 +14,9 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen
import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateDisplay } from "../../../common/entity/compute_state_display";
import { computeStateName } from "../../../common/entity/compute_state_name";
-import { stateIcon } from "../../../common/entity/state_icon";
import "../../../components/ha-card";
import "../../../components/ha-icon-button";
+import "../../../components/ha-state-icon";
import { ActionHandlerEvent } from "../../../data/lovelace";
import { HomeAssistant } from "../../../types";
import { actionHandler } from "../common/directives/action-handler-directive";
@@ -252,13 +252,18 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
class=${classMap({
"state-on": !STATES_OFF.has(stateObj.state),
})}
- .icon=${entityConf.icon || stateIcon(stateObj)}
title=${`${computeStateName(stateObj)} : ${computeStateDisplay(
this.hass!.localize,
stateObj,
this.hass!.locale
)}`}
- >
+ >
+
${this._config!.name ||
computeStateName(this.hass!.states[this._config!.entity])}
@@ -237,7 +234,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
-
key in stateObj.attributes);
+ return Object.keys(SENSOR_ICONS).filter(
+ (key) => key in stateObj.attributes
+ );
}
private computeIcon(attr: string, batLvl: number): string {
- const icon = SENSORS[attr];
if (attr === "battery") {
- if (batLvl <= 5) {
- return `${icon}-alert`;
- }
- if (batLvl < 95) {
- return `${icon}-${Math.round(batLvl / 10 - 0.01) * 10}`;
- }
+ return batteryIcon(batLvl);
}
- return icon;
+ return SENSOR_ICONS[attr];
}
private _handleMoreInfo(ev: Event): void {
diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index 25ed95dd0e..7063c86a67 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -1,5 +1,4 @@
import { mdiDrag, mdiNotificationClearAll, mdiPlus, mdiSort } from "@mdi/js";
-import "@polymer/paper-checkbox/paper-checkbox";
import { PaperInputElement } from "@polymer/paper-input/paper-input";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
@@ -16,7 +15,8 @@ import { guard } from "lit/directives/guard";
import { repeat } from "lit/directives/repeat";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import "../../../components/ha-card";
-import "../../../components/ha-icon";
+import "../../../components/ha-svg-icon";
+import "../../../components/ha-checkbox";
import {
addItem,
clearItems,
@@ -178,12 +178,12 @@ class HuiShoppingListCard
(item) =>
html`
-
html`
-
-
-
+ >
@@ -414,10 +424,11 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
-
- ${weatherStateIcon ||
- html`
-
-
-
+ `
+ : ""}
${forecast
? html`
-
-
- ${computeStateDisplay(
- this.hass.localize,
- stateObj,
- this.hass.locale
- )}
-
- ${name}
-
-
-
- ${formatNumber(
- stateObj.attributes.temperature,
- this.hass.locale
- )} ${getWeatherUnit(this.hass, "temperature")}
-
-
- ${this._config.secondary_info_attribute !== undefined
- ? html`
- ${this._config.secondary_info_attribute in
- weatherAttrIcons
+ ${weather
+ ? html`
+
-
+
-
+ ${weatherStateIcon ||
+ html`
+
+
+
+
+
+ ${computeStateDisplay(
+ this.hass.localize,
+ stateObj,
+ this.hass.locale
+ )}
+
+ ${name}
+
+
+
+ ${formatNumber(
+ stateObj.attributes.temperature,
+ this.hass.locale
+ )} ${getWeatherUnit(this.hass, "temperature")}
+
+
+ ${this._config.secondary_info_attribute !== undefined
? html`
-
+
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index ac4c4d6289..80a70b4378 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -387,6 +387,7 @@ export interface ThermostatCardConfig extends LovelaceCardConfig {
export interface WeatherForecastCardConfig extends LovelaceCardConfig {
entity: string;
name?: string;
+ show_current?: boolean;
show_forecast?: boolean;
secondary_info_attribute?: string;
theme?: string;
diff --git a/src/panels/lovelace/common/generate-lovelace-config.ts b/src/panels/lovelace/common/generate-lovelace-config.ts
index 7ed2709528..2c7b5d757e 100644
--- a/src/panels/lovelace/common/generate-lovelace-config.ts
+++ b/src/panels/lovelace/common/generate-lovelace-config.ts
@@ -3,6 +3,7 @@ import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { splitByGroups } from "../../../common/entity/split_by_groups";
+import { stripPrefixFromEntityName } from "../../../common/entity/strip_prefix_from_entity_name";
import { stringCompare } from "../../../common/string/compare";
import { LocalizeFunc } from "../../../common/translations/localize";
import type { AreaRegistryEntry } from "../../../data/area_registry";
@@ -19,7 +20,6 @@ import {
AlarmPanelCardConfig,
EntitiesCardConfig,
HumidifierCardConfig,
- LightCardConfig,
PictureEntityCardConfig,
ThermostatCardConfig,
} from "../cards/types";
@@ -83,8 +83,7 @@ const splitByAreas = (
export const computeCards = (
states: Array<[string, HassEntity?]>,
- entityCardOptions: Partial,
- single = false
+ entityCardOptions: Partial
): LovelaceCardConfig[] => {
const cards: LovelaceCardConfig[] = [];
@@ -92,7 +91,7 @@ export const computeCards = (
const entities: Array = [];
const titlePrefix = entityCardOptions.title
- ? `${entityCardOptions.title} `
+ ? `${entityCardOptions.title} `.toLowerCase()
: undefined;
for (const [entityId, stateObj] of states) {
@@ -122,12 +121,6 @@ export const computeCards = (
entity: entityId,
};
cards.push(cardConfig);
- } else if (domain === "light" && single) {
- const cardConfig: LightCardConfig = {
- type: "light",
- entity: entityId,
- };
- cards.push(cardConfig);
} else if (domain === "media_player") {
const cardConfig = {
type: "media-control",
@@ -153,16 +146,18 @@ export const computeCards = (
) {
// Do nothing.
} else {
- let name: string;
+ let name: string | undefined;
const entityConf =
titlePrefix &&
stateObj &&
// eslint-disable-next-line no-cond-assign
- (name = computeStateName(stateObj)) !== titlePrefix &&
- name.startsWith(titlePrefix)
+ (name = stripPrefixFromEntityName(
+ computeStateName(stateObj),
+ titlePrefix
+ ))
? {
entity: entityId,
- name: adjustName(name.substr(titlePrefix.length)),
+ name,
}
: entityId;
@@ -181,14 +176,6 @@ export const computeCards = (
return cards;
};
-const hasUpperCase = (str: string): boolean => str.toLowerCase() !== str;
-
-const adjustName = (name: string): string =>
- // If first word already has an upper case letter (e.g. from brand name)
- // leave as-is, otherwise capitalize the first word.
- hasUpperCase(name.substr(0, name.indexOf(" ")))
- ? name
- : name[0].toUpperCase() + name.slice(1);
const computeDefaultViewStates = (
entities: HassEntities,
entityEntries: EntityRegistryEntry[]
@@ -196,7 +183,9 @@ const computeDefaultViewStates = (
const states = {};
const hiddenEntities = new Set(
entityEntries
- .filter((entry) => HIDE_PLATFORM.has(entry.platform))
+ .filter(
+ (entry) => entry.entity_category || HIDE_PLATFORM.has(entry.platform)
+ )
.map((entry) => entry.entity_id)
);
diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index 63290da1de..aef797e278 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -1,5 +1,4 @@
import "@material/mwc-button";
-import "@material/mwc-icon-button";
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item";
import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
@@ -14,6 +13,7 @@ import {
import { customElement, property, queryAssignedNodes } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-button-menu";
+import "../../../components/ha-icon-button";
import { saveConfig } from "../../../data/lovelace";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import { HomeAssistant } from "../../../types";
@@ -60,36 +60,34 @@ export class HuiCardOptions extends LitElement {
>
-
-
+
+ >
-
-
-
+ .path=${mdiDotsVertical}
+ >
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.move"
@@ -137,11 +135,11 @@ export class HuiCardOptions extends LitElement {
align-items: center;
}
- mwc-icon-button {
+ ha-icon-button {
color: var(--primary-text-color);
}
- mwc-icon-button.move-arrow[disabled] {
+ ha-icon-button.move-arrow[disabled] {
color: var(--disabled-text-color);
}
diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts
index d2515d7dd9..0ac5bab267 100644
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@@ -1,21 +1,22 @@
+import "@material/mwc-button/mwc-button";
import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
import {
- endOfToday,
addDays,
- endOfDay,
- startOfToday,
- endOfWeek,
- endOfMonth,
- startOfDay,
- startOfWeek,
- startOfMonth,
addMonths,
addWeeks,
- startOfYear,
addYears,
+ differenceInDays,
+ endOfDay,
+ endOfMonth,
+ endOfToday,
+ endOfWeek,
endOfYear,
isWithinInterval,
- differenceInDays,
+ startOfDay,
+ startOfMonth,
+ startOfToday,
+ startOfWeek,
+ startOfYear,
} from "date-fns";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -26,21 +27,12 @@ import {
formatDateShort,
formatDateYear,
} from "../../../common/datetime/format_date";
+import { toggleAttribute } from "../../../common/dom/toggle_attribute";
+import "../../../components/ha-button-toggle-group";
+import "../../../components/ha-icon-button";
import { EnergyData, getEnergyDataCollection } from "../../../data/energy";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { HomeAssistant, ToggleButton } from "../../../types";
-import "@material/mwc-icon-button/mwc-icon-button";
-import "../../../components/ha-svg-icon";
-import "@material/mwc-button/mwc-button";
-import "../../../components/ha-button-toggle-group";
-import { toggleAttribute } from "../../../common/dom/toggle_attribute";
-
-const viewButtons: ToggleButton[] = [
- { label: "Day", value: "day" },
- { label: "Week", value: "week" },
- { label: "Month", value: "month" },
- { label: "Year", value: "year" },
-];
@customElement("hui-energy-period-selector")
export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
@@ -72,6 +64,33 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
return html``;
}
+ const viewButtons: ToggleButton[] = [
+ {
+ label: this.hass.localize(
+ "ui.panel.lovelace.components.energy_period_selector.day"
+ ),
+ value: "day",
+ },
+ {
+ label: this.hass.localize(
+ "ui.panel.lovelace.components.energy_period_selector.week"
+ ),
+ value: "week",
+ },
+ {
+ label: this.hass.localize(
+ "ui.panel.lovelace.components.energy_period_selector.month"
+ ),
+ value: "month",
+ },
+ {
+ label: this.hass.localize(
+ "ui.panel.lovelace.components.energy_period_selector.year"
+ ),
+ value: "year",
+ },
+ ];
+
return html`
@@ -88,14 +107,24 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
this._endDate || new Date(),
this.hass.locale
)}`}
-
-
-
-
+
- Today
+ ${this.hass.localize(
+ "ui.panel.lovelace.components.energy_period_selector.today"
+ )}
@@ -232,7 +261,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
--mdc-button-disabled-ink-color: var(--disabled-text-color);
--mdc-icon-button-ripple-opacity: 0.2;
}
- mwc-icon-button {
+ ha-icon-button {
--mdc-icon-button-size: 28px;
}
ha-button-toggle-group {
diff --git a/src/panels/lovelace/components/hui-entity-editor.ts b/src/panels/lovelace/components/hui-entity-editor.ts
index 0393d59ea9..ff81d8ec67 100644
--- a/src/panels/lovelace/components/hui-entity-editor.ts
+++ b/src/panels/lovelace/components/hui-entity-editor.ts
@@ -10,10 +10,6 @@ import {
import { customElement, property, state } from "lit/decorators";
import { guard } from "lit/directives/guard";
import type { SortableEvent } from "sortablejs";
-import Sortable, {
- AutoScroll,
- OnSpill,
-} from "sortablejs/modular/sortable.core.esm";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/entity/ha-entity-picker";
import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
@@ -22,6 +18,8 @@ import { sortableStyles } from "../../../resources/ha-sortable-style";
import { HomeAssistant } from "../../../types";
import { EntityConfig } from "../entity-rows/types";
+let Sortable;
+
@customElement("hui-entity-editor")
export class HuiEntityEditor extends LitElement {
@property({ attribute: false }) protected hass?: HomeAssistant;
@@ -34,7 +32,7 @@ export class HuiEntityEditor extends LitElement {
@state() private _renderEmptySortable = false;
- private _sortable?: Sortable;
+ private _sortable?;
public connectedCallback() {
super.connectedCallback();
@@ -86,11 +84,6 @@ export class HuiEntityEditor extends LitElement {
`;
}
- protected firstUpdated(): void {
- Sortable.mount(OnSpill);
- Sortable.mount(new AutoScroll());
- }
-
protected updated(changedProps: PropertyValues): void {
super.updated(changedProps);
@@ -128,7 +121,17 @@ export class HuiEntityEditor extends LitElement {
this._renderEmptySortable = false;
}
- private _createSortable() {
+ private async _createSortable() {
+ if (!Sortable) {
+ const sortableImport = await import(
+ "sortablejs/modular/sortable.core.esm"
+ );
+
+ Sortable = sortableImport.Sortable;
+ Sortable.mount(sortableImport.OnSpill);
+ Sortable.mount(sortableImport.AutoScroll());
+ }
+
this._sortable = new Sortable(this.shadowRoot!.querySelector(".entities"), {
animation: 150,
fallbackClass: "sortable-fallback",
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index b1554bfcdd..88094f7dd9 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -15,7 +15,6 @@ import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { computeRTL } from "../../../common/util/compute_rtl";
import "../../../components/entity/state-badge";
-import "../../../components/ha-icon";
import "../../../components/ha-relative-time";
import { ActionHandlerEvent } from "../../../data/lovelace";
import { HomeAssistant } from "../../../types";
diff --git a/src/panels/lovelace/components/hui-input-list-editor.ts b/src/panels/lovelace/components/hui-input-list-editor.ts
index 5cead88e75..fe53e72c11 100644
--- a/src/panels/lovelace/components/hui-input-list-editor.ts
+++ b/src/panels/lovelace/components/hui-input-list-editor.ts
@@ -1,3 +1,4 @@
+import { mdiClose } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
@@ -33,9 +34,10 @@ export class HuiInputListEditor extends LitElement {
>Clear
diff --git a/src/panels/lovelace/components/hui-timestamp-display.ts b/src/panels/lovelace/components/hui-timestamp-display.ts
index 211ff97268..2ffbba65ce 100644
--- a/src/panels/lovelace/components/hui-timestamp-display.ts
+++ b/src/panels/lovelace/components/hui-timestamp-display.ts
@@ -4,6 +4,7 @@ import { formatDate } from "../../../common/datetime/format_date";
import { formatDateTime } from "../../../common/datetime/format_date_time";
import { formatTime } from "../../../common/datetime/format_time";
import { relativeTime } from "../../../common/datetime/relative_time";
+import { capitalizeFirstLetter } from "../../../common/string/capitalize-first-letter";
import { FrontendLocaleData } from "../../../data/translation";
import { HomeAssistant } from "../../../types";
import { TimestampRenderingFormat } from "./types";
@@ -25,6 +26,8 @@ class HuiTimestampDisplay extends LitElement {
@property() public format?: TimestampRenderingFormat;
+ @property({ type: Boolean }) public capitalize = false;
+
@state() private _relative?: string;
private _connected?: boolean;
@@ -105,6 +108,10 @@ class HuiTimestampDisplay extends LitElement {
this._format === "relative"
? relativeTime(this.ts, this.hass!.locale)
: relativeTime(new Date(), this.hass!.locale, this.ts, false);
+
+ this._relative = this.capitalize
+ ? capitalizeFirstLetter(this._relative)
+ : this._relative;
}
}
}
diff --git a/src/panels/lovelace/components/hui-views-list.ts b/src/panels/lovelace/components/hui-views-list.ts
deleted file mode 100644
index a04e3f0cba..0000000000
--- a/src/panels/lovelace/components/hui-views-list.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { toggleAttribute } from "../../../common/dom/toggle_attribute";
-import "../../../components/ha-icon";
-import { LovelaceConfig } from "../../../data/lovelace";
-
-declare global {
- interface HASSDomEvents {
- "view-selected": {
- view: number;
- };
- }
-}
-
-@customElement("hui-views-list")
-class HuiViewsList extends LitElement {
- @state() private lovelaceConfig?: LovelaceConfig | undefined;
-
- @state() private selected?: number | undefined;
-
- protected render(): TemplateResult {
- if (!this.lovelaceConfig) {
- return html``;
- }
-
- return html`
-
- ${this.lovelaceConfig.views.map(
- (view, index) => html`
-
- ${view.icon
- ? html`
-
- `
- )}
-
- `;
- }
-
- protected updated(changedProps) {
- super.updated(changedProps);
- toggleAttribute(
- this,
- "hide-icons",
- this.lovelaceConfig
- ? !this.lovelaceConfig.views.some((view) => view.icon)
- : true
- );
- }
-
- private async _handlePickView(ev: Event) {
- const view = Number((ev.currentTarget as any).getAttribute("data-index"));
- fireEvent(this, "view-selected", { view });
- }
-
- static get styles(): CSSResultGroup {
- return css`
- paper-listbox {
- padding-top: 0;
- }
-
- paper-listbox ha-icon {
- padding: 12px;
- color: var(--secondary-text-color);
- }
-
- paper-icon-item {
- cursor: pointer;
- }
-
- paper-icon-item[disabled] {
- cursor: initial;
- }
-
- :host([hide-icons]) paper-icon-item {
- --paper-item-icon-width: 0px;
- }
- `;
- }
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- "hui-views-list": HuiViewsList;
- }
-}
diff --git a/src/panels/lovelace/editor/add-entities-to-view.ts b/src/panels/lovelace/editor/add-entities-to-view.ts
index cd6ccb873a..42ad5ac06d 100644
--- a/src/panels/lovelace/editor/add-entities-to-view.ts
+++ b/src/panels/lovelace/editor/add-entities-to-view.ts
@@ -13,8 +13,10 @@ import { showSelectViewDialog } from "./select-view/show-select-view-dialog";
export const addEntitiesToLovelaceView = async (
element: HTMLElement,
hass: HomeAssistant,
- entities: string[]
+ entities: string[],
+ cardTitle?: string
) => {
+ hass.loadFragmentTranslation("lovelace");
const dashboards = await fetchDashboards(hass);
const storageDashs = dashboards.filter(
@@ -30,6 +32,7 @@ export const addEntitiesToLovelaceView = async (
showSuggestCardDialog(element, {
entities,
yaml: true,
+ cardTitle,
});
return;
}
@@ -68,6 +71,7 @@ export const addEntitiesToLovelaceView = async (
showSuggestCardDialog(element, {
entities,
yaml: true,
+ cardTitle,
});
} else {
// all storage dashboards are generated
@@ -87,6 +91,7 @@ export const addEntitiesToLovelaceView = async (
if (!storageDashs.length && lovelaceConfig.views.length === 1) {
showSuggestCardDialog(element, {
+ cardTitle,
lovelaceConfig: lovelaceConfig!,
saveConfig: async (newConfig: LovelaceConfig): Promise => {
try {
@@ -107,9 +112,11 @@ export const addEntitiesToLovelaceView = async (
lovelaceConfig,
urlPath,
allowDashboardChange: true,
+ actionLabel: hass.localize("ui.common.next"),
dashboards,
viewSelectedCallback: (newUrlPath, selectedDashConfig, viewIndex) => {
showSuggestCardDialog(element, {
+ cardTitle,
lovelaceConfig: selectedDashConfig,
saveConfig: async (newConfig: LovelaceConfig): Promise => {
try {
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index 882cc7266b..a3c9f8ec85 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -98,6 +98,7 @@ export class HuiCardPicker extends LitElement {
return html`
{
this._params = params;
this._GUImode = true;
@@ -92,6 +95,9 @@ export class HuiDialogEditCard
}
public closeDialog(): boolean {
+ this._isEscapeEnabled = true;
+ window.removeEventListener("dialog-closed", this._enableEscapeKeyClose);
+ window.removeEventListener("hass-more-info", this._disableEscapeKeyClose);
if (this._dirty) {
this._confirmCancel();
return false;
@@ -124,6 +130,16 @@ export class HuiDialogEditCard
}
}
+ private _enableEscapeKeyClose = (ev: any) => {
+ if (ev.detail.dialog === "ha-more-info-dialog") {
+ this._isEscapeEnabled = true;
+ }
+ };
+
+ private _disableEscapeKeyClose = () => {
+ this._isEscapeEnabled = false;
+ };
+
protected render(): TemplateResult {
if (!this._params) {
return html``;
@@ -156,6 +172,7 @@ export class HuiDialogEditCard
-
-
+ void;
diff --git a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
index 2105938beb..c843f2b52b 100644
--- a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
@@ -1,3 +1,4 @@
+import { mdiClose } from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
@@ -6,7 +7,7 @@ import { customElement, property, state } from "lit/decorators";
import { array, assert, assign, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
-import "../../../../components/ha-icon";
+import "../../../../components/ha-svg-icon";
import { HomeAssistant } from "../../../../types";
import { AlarmPanelCardConfig } from "../../cards/types";
import "../../components/hui-theme-select-editor";
@@ -73,11 +74,11 @@ export class HuiAlarmPanelCardEditor
return html`
html`
${entityState}
-
-
-
-
+
+
+
+
@@ -143,7 +204,20 @@ export class HuiWeatherForecastCardEditor
return;
}
if (target.configValue) {
- if (target.value === "") {
+ if (target.configValue.startsWith("show_")) {
+ this._config = { ...this._config };
+ if (target.configValue === "show_both") {
+ /* delete since true is default */
+ delete this._config.show_current;
+ delete this._config.show_forecast;
+ } else if (target.configValue === "show_current") {
+ delete this._config.show_current;
+ this._config.show_forecast = false;
+ } else if (target.configValue === "show_forecast") {
+ delete this._config.show_forecast;
+ this._config.show_current = false;
+ }
+ } else if (target.value === "") {
this._config = { ...this._config };
delete this._config[target.configValue!];
} else {
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
index 5ee72ba281..76b7032a8f 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
@@ -1,11 +1,10 @@
-import "@material/mwc-icon-button/mwc-icon-button";
import { mdiClose, mdiPencil, mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-icon-button";
import type { LovelaceConfig } from "../../../../data/lovelace";
import type { HomeAssistant } from "../../../../types";
import type { LovelaceHeaderFooterConfig } from "../../header-footer/types";
@@ -38,35 +37,32 @@ export class HuiHeaderFooterEditor extends LitElement {
-
+
-
-
+
-
+ >
`
)
@@ -136,11 +132,6 @@ export class HuiEntitiesCardRowEditor extends LitElement {
`;
}
- protected firstUpdated(): void {
- Sortable.mount(OnSpill);
- Sortable.mount(new AutoScroll());
- }
-
protected updated(changedProps: PropertyValues): void {
super.updated(changedProps);
@@ -178,7 +169,17 @@ export class HuiEntitiesCardRowEditor extends LitElement {
this._renderEmptySortable = false;
}
- private _createSortable() {
+ private async _createSortable() {
+ if (!Sortable) {
+ const sortableImport = await import(
+ "sortablejs/modular/sortable.core.esm"
+ );
+
+ Sortable = sortableImport.Sortable;
+ Sortable.mount(sortableImport.OnSpill);
+ Sortable.mount(sortableImport.AutoScroll());
+ }
+
this._sortable = new Sortable(this.shadowRoot!.querySelector(".entities"), {
animation: 150,
fallbackClass: "sortable-fallback",
diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts
index e243aee060..eeae816645 100644
--- a/src/panels/lovelace/editor/hui-sub-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts
@@ -1,10 +1,9 @@
import "@material/mwc-button";
-import "@material/mwc-icon-button";
import { mdiArrowLeft } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state, query } from "lit/decorators";
import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-svg-icon";
+import "../../../components/ha-icon-button";
import type { HomeAssistant } from "../../../types";
import type { LovelaceRowConfig } from "../entity-rows/types";
import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
@@ -37,9 +36,11 @@ export class HuiSubElementEditor extends LitElement {
return html`
@@ -133,18 +135,22 @@ export class HuiButtonCardEditor
.configValue=${"name"}
@value-changed=${this._valueChanged}
>
-
diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
index af18dd6edd..845743d300 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
@@ -3,9 +3,10 @@ import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { assert, assign, boolean, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
-import { stateIcon } from "../../../../common/entity/state_icon";
+import { computeDomain } from "../../../../common/entity/compute_domain";
+import { domainIcon } from "../../../../common/entity/domain_icon";
import "../../../../components/entity/ha-entity-attribute-picker";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
import { HomeAssistant } from "../../../../types";
import { EntityCardConfig } from "../../cards/types";
import "../../components/hui-action-editor";
@@ -77,6 +78,7 @@ export class HuiEntityCardEditor
if (!this.hass || !this._config) {
return html``;
}
+ const entityState = this.hass.states[this._entity];
return html`
@@ -83,15 +84,20 @@ export class HuiGenericEntityRowEditor
.configValue=${"name"}
@value-changed=${this._valueChanged}
>
-
-
@@ -103,18 +105,22 @@ export class HuiEntityCardEditor
.configValue=${"name"}
@value-changed=${this._valueChanged}
>
-
-
-
-
+ >
-
-
+ >
-
-
+ >
${!this.config?.type
? html`
-
-
+ >
`
: html`
-
-
-
+
-
+ >
`}
`;
@@ -118,7 +114,7 @@ export class HuiHeaderFooterEditor extends LitElement {
align-items: center;
}
- mwc-icon-button,
+ ha-icon-button,
.header-footer-icon {
--mdc-icon-button-size: 36px;
color: var(--secondary-text-color);
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index fe2e6fad39..5b2a00fc09 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -1,5 +1,4 @@
import "@material/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
import { mdiHelpCircle } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
@@ -8,7 +7,7 @@ import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/ha-circular-progress";
import "../../../components/ha-dialog";
import "../../../components/ha-formfield";
-import "../../../components/ha-svg-icon";
+import "../../../components/ha-icon-button";
import "../../../components/ha-switch";
import "../../../components/ha-yaml-editor";
import type { LovelaceConfig } from "../../../data/lovelace";
@@ -67,9 +66,10 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
rel="noreferrer"
dir=${computeRTLDirection(this.hass!)}
>
-
@@ -197,21 +197,6 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
return [
haStyleDialog,
css`
- @media all and (max-width: 450px), all and (max-height: 500px) {
- /* overrule the ha-style-dialog max-height on small screens */
- ha-paper-dialog {
- max-height: 100%;
- height: 100%;
- }
- }
- @media all and (min-width: 660px) {
- ha-paper-dialog {
- width: 650px;
- }
- }
- ha-paper-dialog {
- max-width: 650px;
- }
ha-switch {
padding-bottom: 16px;
}
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index 68e0d1875c..3fa6aa3d87 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -15,6 +15,7 @@ import { computeRTL } from "../../../common/util/compute_rtl";
import { deepEqual } from "../../../common/util/deep-equal";
import "../../../components/ha-circular-progress";
import "../../../components/ha-code-editor";
+import "../../../components/ha-alert";
import type { HaCodeEditor } from "../../../components/ha-code-editor";
import type {
LovelaceCardConfig,
@@ -229,9 +230,12 @@ export abstract class HuiElementEditor extends LitElement {
: ""}
${this.hasWarning
? html`
-
diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
index 9095c6b1b1..e9e8f5d92c 100644
--- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button";
import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
import {
css,
@@ -11,18 +10,17 @@ import {
import { customElement, property, state } from "lit/decorators";
import { guard } from "lit/directives/guard";
import type { SortableEvent } from "sortablejs";
-import Sortable, {
- AutoScroll,
- OnSpill,
-} from "sortablejs/modular/sortable.core.esm";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/entity/ha-entity-picker";
import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
+import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
import { sortableStyles } from "../../../resources/ha-sortable-style";
import { HomeAssistant } from "../../../types";
import { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
+let Sortable;
+
declare global {
interface HASSDomEvents {
"entities-changed": {
@@ -43,7 +41,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
@state() private _renderEmptySortable = false;
- private _sortable?: Sortable;
+ private _sortable?;
public connectedCallback() {
super.connectedCallback();
@@ -104,26 +102,24 @@ export class HuiEntitiesCardRowEditor extends LitElement {
@value-changed=${this._valueChanged}
>
`}
-
- ${this.hass.localize("ui.errors.config.editor_not_supported")}:
-
+
${this._warnings!.length > 0 && this._warnings![0] !== undefined
? html`
+
`
: ""}
+
-
${this._warnings!.map(
@@ -240,7 +244,7 @@ export abstract class HuiElementEditor
-
-
+ {
+ public showDialog(lovelace: Lovelace): void {
this._lovelace = lovelace;
- if (this._dialog == null) {
- await this.updateComplete;
- }
-
const { views, ...lovelaceConfig } = this._lovelace!.config;
this._config = lovelaceConfig as LovelaceConfig;
-
- this._dialog.open();
}
public closeDialog(): void {
this._config = undefined;
- this._dialog.close();
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
- private get _dialog(): HaPaperDialog {
- return this.shadowRoot!.querySelector("ha-paper-dialog")!;
- }
-
protected render(): TemplateResult {
+ if (!this._config) {
+ return html``;
+ }
return html`
-
-
+
+
- ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_lovelace.header" - )} -
-
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_lovelace.explanation"
)}
@@ -65,27 +50,26 @@ export class HuiDialogEditLovelace extends LitElement {
.hass=${this.hass}
.config=${this._config}
@lovelace-config-changed=${this._ConfigChanged}
- >
-
-
+
+ ${this.hass!.localize("ui.common.cancel")}
+
+
+ ${this._saving
+ ? html`
+
`;
}
@@ -128,26 +112,7 @@ export class HuiDialogEditLovelace extends LitElement {
}
static get styles(): CSSResultGroup {
- return [
- haStyleDialog,
- css`
- @media all and (max-width: 450px), all and (max-height: 500px) {
- /* overrule the ha-style-dialog max-height on small screens */
- ha-paper-dialog {
- max-height: 100%;
- height: 100%;
- }
- }
- @media all and (min-width: 660px) {
- ha-paper-dialog {
- width: 650px;
- }
- }
- ha-paper-dialog {
- max-width: 650px;
- }
- `,
- ];
+ return haStyleDialog;
}
}
diff --git a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
index 2ea6f32c6b..ff555d8e89 100644
--- a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
+++ b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
@@ -1,9 +1,12 @@
+import "@material/mwc-list/mwc-list";
+import "@material/mwc-list/mwc-radio-list-item";
import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/dialog/ha-paper-dialog";
import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-icon";
import "../../../../components/ha-paper-dropdown-menu";
import {
fetchConfig,
@@ -13,9 +16,16 @@ import {
} from "../../../../data/lovelace";
import { haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
-import "../../components/hui-views-list";
import type { SelectViewDialogParams } from "./show-select-view-dialog";
+declare global {
+ interface HASSDomEvents {
+ "view-selected": {
+ view: number;
+ };
+ }
+}
+
@customElement("hui-dialog-select-view")
export class HuiDialogSelectView extends LitElement {
public hass!: HomeAssistant;
@@ -28,6 +38,8 @@ export class HuiDialogSelectView extends LitElement {
@state() private _config?: LovelaceConfig;
+ @state() private _selectedViewIdx = 0;
+
public showDialog(params: SelectViewDialogParams): void {
this._config = params.lovelaceConfig;
this._urlPath = params.urlPath;
@@ -50,7 +62,6 @@ export class HuiDialogSelectView extends LitElement {
`
: ""}
${this._config
- ? html`
- `
+ ? this._config.views.length > 1
+ ? html`
+
+ ${this._config.views.map(
+ (view, idx) => html`
+ icon)
+ ? "icon"
+ : null}
+ @click=${this._viewChanged}
+ .value=${idx.toString()}
+ .selected=${this._selectedViewIdx === idx}
+ >
+ ${view.title}
+
+ `
+ )}
+
+ `
+ : ""
: html`
+ ${this.hass!.localize("ui.common.cancel")}
+
+
+ ${this._params.actionLabel || this.hass!.localize("ui.common.move")}
+
`;
}
@@ -118,6 +151,7 @@ export class HuiDialogSelectView extends LitElement {
urlPath = null;
}
this._urlPath = urlPath;
+ this._selectedViewIdx = 0;
try {
this._config = await fetchConfig(this.hass.connection, urlPath, false);
} catch (err: any) {
@@ -125,9 +159,21 @@ export class HuiDialogSelectView extends LitElement {
}
}
- private _selectView(e: CustomEvent): void {
- const view: number = e.detail.view;
- this._params!.viewSelectedCallback(this._urlPath!, this._config!, view);
+ private _viewChanged(e) {
+ const view = Number(e.target.value);
+
+ if (!isNaN(view)) {
+ this._selectedViewIdx = view;
+ }
+ }
+
+ private _selectView(): void {
+ fireEvent(this, "view-selected", { view: this._selectedViewIdx });
+ this._params!.viewSelectedCallback(
+ this._urlPath!,
+ this._config!,
+ this._selectedViewIdx
+ );
this.closeDialog();
}
diff --git a/src/panels/lovelace/editor/select-view/show-select-view-dialog.ts b/src/panels/lovelace/editor/select-view/show-select-view-dialog.ts
index 05d393c850..4287711de0 100644
--- a/src/panels/lovelace/editor/select-view/show-select-view-dialog.ts
+++ b/src/panels/lovelace/editor/select-view/show-select-view-dialog.ts
@@ -7,6 +7,7 @@ export interface SelectViewDialogParams {
dashboards?: LovelaceDashboard[];
urlPath?: string | null;
header?: string;
+ actionLabel?: string;
viewSelectedCallback: (
urlPath: string | null,
config: LovelaceConfig,
diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
index 9f76adeadc..b261b3c549 100644
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@@ -8,7 +8,6 @@ import { navigate } from "../../../../common/navigate";
import "../../../../components/ha-circular-progress";
import "../../../../components/ha-dialog";
import "../../../../components/ha-alert";
-import "../../../../components/ha-icon-button";
import type {
LovelaceBadgeConfig,
LovelaceCardConfig,
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 f290c8e9c2..40da6d5d4e 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { slugify } from "../../../../common/string/slugify";
import "../../../../components/ha-formfield";
-import "../../../../components/ha-icon-input";
+import "../../../../components/ha-icon-picker";
import "../../../../components/ha-switch";
import { LovelaceViewConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
@@ -94,7 +94,7 @@ export class HuiViewEditor extends LitElement {
@value-changed=${this._valueChanged}
@blur=${this._handleTitleBlur}
>
-
`
@@ -117,7 +130,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
supportsFeature(stateObj, SUPPORT_PAUSE)))
? html`
- ${stateObj.attributes.mode === "slider"
+ ${stateObj.attributes.mode === "slider" ||
+ (stateObj.attributes.mode === "auto" &&
+ (Number(stateObj.attributes.max) - Number(stateObj.attributes.min)) /
+ Number(stateObj.attributes.step) <=
+ 256)
? html`
`
: computeStateDisplay(
diff --git a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
index 2f5c1fd115..8d06737195 100644
--- a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
@@ -13,7 +13,6 @@ import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateDisplay } from "../../../common/entity/compute_state_display";
import { computeStateName } from "../../../common/entity/compute_state_name";
-import { stateIcon } from "../../../common/entity/state_icon";
import { formatNumber } from "../../../common/number/format_number";
import "../../../components/entity/state-badge";
import { UNAVAILABLE_STATES } from "../../../data/entity";
@@ -89,7 +88,10 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
>
${weatherStateIcon ||
html`
-
-
+ >
`
: ""}
diff --git a/src/resources/compatibility.ts b/src/resources/compatibility.ts
index d11f3ba97a..03a0b23fec 100644
--- a/src/resources/compatibility.ts
+++ b/src/resources/compatibility.ts
@@ -13,6 +13,7 @@ import "@formatjs/intl-relativetimeformat/polyfill";
import "@formatjs/intl-relativetimeformat/locale-data/en";
import "@formatjs/intl-datetimeformat/polyfill";
import "@formatjs/intl-datetimeformat/locale-data/en";
+import "@formatjs/intl-datetimeformat/add-all-tz";
// To use comlink under ES5
import "proxy-polyfill";
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index a570a73c22..dffa7a2663 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -59,7 +59,7 @@ documentContainer.innerHTML = `
/* states */
--state-icon-color: #44739e;
- /* an active state is anything that would require attention */
+ /* an active state is anything that would require attention */
--state-icon-active-color: #FDD835;
/* an error state is anything that would be considered an error */
/* --state-icon-error-color: #db4437; derived from error-color */
@@ -84,8 +84,8 @@ documentContainer.innerHTML = `
--state-climate-idle-color: #8a8a8a;
/* energy */
- --energy-grid-consumption-color: #126a9a;
- --energy-grid-return-color: #673ab7;
+ --energy-grid-consumption-color: #488fc2;
+ --energy-grid-return-color: #8353d1;
--energy-solar-color: #ff9800;
--energy-non-fossil-color: #0f9d58;
--energy-battery-out-color: #4db6ac;
@@ -112,6 +112,20 @@ documentContainer.innerHTML = `
--rgb-text-primary-color: 255, 255, 255;
--rgb-card-background-color: 255, 255, 255;
+ /* input components */
+ --input-idle-line-color: rgba(0, 0, 0, 0.42);
+ --input-hover-line-color: rgba(0, 0, 0, 0.87);
+ --input-disabled-line-color: rgba(0, 0, 0, 0.06);
+ --input-outlined-idle-border-color: rgba(0, 0, 0, 0.38);
+ --input-outlined-hover-border-color: rgba(0, 0, 0, 0.87);
+ --input-outlined-disabled-border-color: rgba(0, 0, 0, 0.06);
+ --input-fill-color: rgb(245, 245, 245);
+ --input-disabled-fill-color: rgb(250, 250, 250);
+ --input-ink-color: rgba(0, 0, 0, 0.87);
+ --input-label-ink-color: rgba(0, 0, 0, 0.6);
+ --input-disabled-ink-color: rgba(0, 0, 0, 0.37);
+ --input-dropdown-icon-color: rgba(0, 0, 0, 0.54);
+
/* Vaadin typography */
--material-h6-font-size: 1.25rem;
--material-small-font-size: 0.875rem;
@@ -122,25 +136,6 @@ documentContainer.innerHTML = `
.map(([key, value]) => `--${key}: ${value};`)
.join("")}
}
-
- /*
- prevent clipping of positioned elements in a small scrollable
- force smooth scrolling if can scroll
- use non-shady selectors so this only targets iOS 9
- conditional mixin set in ha-style-dialog does not work with shadyCSS
- */
- paper-dialog-scrollable:not(.can-scroll) > .scrollable {
- -webkit-overflow-scrolling: auto !important;
- }
-
- paper-dialog-scrollable.can-scroll > .scrollable {
- -webkit-overflow-scrolling: touch !important;
- }
-
- /* for paper-dialog */
- iron-overlay-backdrop {
- backdrop-filter: var(--dialog-backdrop-filter, none);
- }
`;
diff --git a/src/resources/markdown_worker.ts b/src/resources/markdown_worker.ts
index b026f47dcc..9b38ad78a8 100644
--- a/src/resources/markdown_worker.ts
+++ b/src/resources/markdown_worker.ts
@@ -11,6 +11,28 @@ interface WhiteList {
let whiteListNormal: WhiteList | undefined;
let whiteListSvg: WhiteList | undefined;
+// Override the default `onTagAttr` behavior to only render
+// our markdown checkboxes.
+// Returning undefined causes the default measure to be taken
+// in the xss library.
+const onTagAttr = (
+ tag: string,
+ name: string,
+ value: string
+): string | undefined => {
+ if (tag === "input") {
+ if (
+ (name === "type" && value === "checkbox") ||
+ name === "checked" ||
+ name === "disabled"
+ ) {
+ return undefined;
+ }
+ return "";
+ }
+ return undefined;
+};
+
const renderMarkdown = (
content: string,
markedOptions: marked.MarkedOptions,
@@ -22,6 +44,7 @@ const renderMarkdown = (
if (!whiteListNormal) {
whiteListNormal = {
...(getDefaultWhiteList() as WhiteList),
+ input: ["type", "disabled", "checked"],
"ha-icon": ["icon"],
"ha-svg-icon": ["path"],
};
@@ -45,6 +68,7 @@ const renderMarkdown = (
return filterXSS(marked(content, markedOptions), {
whiteList,
+ onTagAttr,
});
};
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index 6f7cb696ab..f9c7013fd5 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -13,6 +13,20 @@ export const darkStyles = {
"switch-unchecked-track-color": "#9b9b9b",
"divider-color": "rgba(225, 225, 225, .12)",
"mdc-ripple-color": "#AAAAAA",
+
+ "input-idle-line-color": "rgba(255, 255, 255, 0.42)",
+ "input-hover-line-color": "rgba(255, 255, 255, 0.87)",
+ "input-disabled-line-color": "rgba(255, 255, 255, 0.06)",
+ "input-outlined-idle-border-color": "rgba(255, 255, 255, 0.38)",
+ "input-outlined-hover-border-color": "rgba(255, 255, 255, 0.87)",
+ "input-outlined-disabled-border-color": "rgba(255, 255, 255, 0.06)",
+ "input-fill-color": "rgba(255, 255, 255, 0.05)",
+ "input-disabled-fill-color": "rgba(255, 255, 255, 0.02)",
+ "input-ink-color": "rgba(255, 255, 255, 0.87)",
+ "input-label-ink-color": "rgba(255, 255, 255, 0.6)",
+ "input-disabled-ink-color": "rgba(255, 255, 255, 0.37)",
+ "input-dropdown-icon-color": "rgba(255, 255, 255, 0.54)",
+
"codemirror-keyword": "#C792EA",
"codemirror-operator": "#89DDFF",
"codemirror-variable": "#f07178",
@@ -31,7 +45,7 @@ export const darkStyles = {
"codemirror-property": "#C792EA",
"codemirror-qualifier": "#DECB6B",
"codemirror-type": "#DECB6B",
- "energy-grid-return-color": "#b39bdb",
+ "energy-grid-return-color": "#a280db",
};
export const derivedStyles = {
@@ -69,6 +83,8 @@ export const derivedStyles = {
"paper-slider-container-color": "var(--slider-track-color)",
"data-table-background-color": "var(--card-background-color)",
"markdown-code-background-color": "var(--primary-background-color)",
+
+ // https://github.com/material-components/material-web/blob/master/docs/theming.md
"mdc-theme-primary": "var(--primary-color)",
"mdc-theme-secondary": "var(--accent-color)",
"mdc-theme-background": "var(--primary-background-color)",
@@ -80,6 +96,7 @@ export const derivedStyles = {
"mdc-theme-text-primary-on-background": "var(--primary-text-color)",
"mdc-theme-text-secondary-on-background": "var(--secondary-text-color)",
"mdc-theme-text-icon-on-background": "var(--secondary-text-color)",
+ "mdc-theme-error": "var(--error-color)",
"app-header-text-color": "var(--text-primary-color)",
"app-header-background-color": "var(--primary-color)",
"mdc-checkbox-unchecked-color": "rgba(var(--rgb-primary-text-color), 0.54)",
@@ -90,6 +107,38 @@ export const derivedStyles = {
"mdc-button-disabled-ink-color": "var(--disabled-text-color)",
"mdc-button-outline-color": "var(--divider-color)",
"mdc-dialog-scroll-divider-color": "var(--divider-color)",
+
+ "mdc-text-field-idle-line-color": "var(--input-idle-line-color)",
+ "mdc-text-field-hover-line-color": "var(--input-hover-line-color)",
+ "mdc-text-field-disabled-line-color": "var(--input-disabled-line-color)",
+ "mdc-text-field-outlined-idle-border-color":
+ "var(--input-outlined-idle-border-color)",
+ "mdc-text-field-outlined-hover-border-color":
+ "var(--input-outlined-hover-border-color)",
+ "mdc-text-field-outlined-disabled-border-color":
+ "var(--input-outlined-disabled-border-color)",
+ "mdc-text-field-fill-color": "var(--input-fill-color)",
+ "mdc-text-field-disabled-fill-color": "var(--input-disabled-fill-color)",
+ "mdc-text-field-ink-color": "var(--input-ink-color)",
+ "mdc-text-field-label-ink-color": "var(--input-label-ink-color)",
+ "mdc-text-field-disabled-ink-color": "var(--input-disabled-ink-color)",
+
+ "mdc-select-idle-line-color": "var(--input-idle-line-color)",
+ "mdc-select-hover-line-color": "var(--input-hover-line-color)",
+ "mdc-select-outlined-idle-border-color":
+ "var(--input-outlined-idle-border-color)",
+ "mdc-select-outlined-hover-border-color":
+ "var(--input-outlined-hover-border-color)",
+ "mdc-select-outlined-disabled-border-color":
+ "var(--input-outlined-disabled-border-color)",
+ "mdc-select-fill-color": "var(--input-fill-color)",
+ "mdc-select-disabled-fill-color": "var(--input-disabled-fill-color)",
+ "mdc-select-ink-color": "var(--input-ink-color)",
+ "mdc-select-label-ink-color": "var(--input-label-ink-color)",
+ "mdc-select-disabled-ink-color": "var(--input-disabled-ink-color)",
+ "mdc-select-dropdown-icon-color": "var(--input-dropdown-icon-color)",
+ "mdc-select-disabled-dropdown-icon-color": "var(--input-disabled-ink-color)",
+
"chip-background-color": "rgba(var(--rgb-primary-text-color), 0.15)",
// Vaadin
"material-body-text-color": "var(--primary-text-color)",
@@ -253,57 +302,6 @@ export const haStyle = css`
`;
export const haStyleDialog = css`
- /* prevent clipping of positioned elements */
- paper-dialog-scrollable {
- --paper-dialog-scrollable: {
- -webkit-overflow-scrolling: auto;
- }
- }
-
- /* force smooth scrolling for iOS 10 */
- paper-dialog-scrollable.can-scroll {
- --paper-dialog-scrollable: {
- -webkit-overflow-scrolling: touch;
- }
- }
-
- .paper-dialog-buttons {
- align-items: flex-end;
- padding: 8px;
- padding-bottom: max(env(safe-area-inset-bottom), 8px);
- }
-
- @media all and (min-width: 450px) and (min-height: 500px) {
- ha-paper-dialog {
- min-width: 400px;
- }
- }
-
- @media all and (max-width: 450px), all and (max-height: 500px) {
- paper-dialog,
- ha-paper-dialog {
- margin: 0;
- width: calc(
- 100% - env(safe-area-inset-right) - env(safe-area-inset-left)
- ) !important;
- min-width: calc(
- 100% - env(safe-area-inset-right) - env(safe-area-inset-left)
- ) !important;
- max-width: calc(
- 100% - env(safe-area-inset-right) - env(safe-area-inset-left)
- ) !important;
- max-height: calc(100% - var(--header-height));
-
- position: fixed !important;
- bottom: 0px;
- left: env(safe-area-inset-left);
- right: env(safe-area-inset-right);
- overflow: scroll;
- border-bottom-left-radius: 0px;
- border-bottom-right-radius: 0px;
- }
- }
-
/* mwc-dialog (ha-dialog) styles */
ha-dialog {
--mdc-dialog-min-width: 400px;
diff --git a/src/state-summary/state-card-display.ts b/src/state-summary/state-card-display.ts
index 7bd0e49c6c..1e8a856975 100755
--- a/src/state-summary/state-card-display.ts
+++ b/src/state-summary/state-card-display.ts
@@ -47,6 +47,7 @@ export class StateCardDisplay extends LitElement {
.hass=${this.hass}
.ts=${new Date(this.stateObj.state)}
format="datetime"
+ capitalize
>`
: computeStateDisplay(
this.hass!.localize,
diff --git a/src/state-summary/state-card-number.js b/src/state-summary/state-card-number.js
index 44ffac69b8..24a3e64e0c 100644
--- a/src/state-summary/state-card-number.js
+++ b/src/state-summary/state-card-number.js
@@ -6,6 +6,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../components/entity/state-info";
+import "../components/ha-slider";
class StateCardNumber extends mixinBehaviors(
[IronResizableBehavior],
@@ -15,6 +16,9 @@ class StateCardNumber extends mixinBehaviors(
return html`
No config found.
`}
+
${this.hass!.localize(
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 5ab8afac4e..61445901d7 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -47,6 +47,7 @@ import { debounce } from "../../common/util/debounce";
import { afterNextRender } from "../../common/util/render-status";
import "../../components/ha-button-menu";
import "../../components/ha-icon";
+import "../../components/ha-icon-button";
import "../../components/ha-icon-button-arrow-next";
import "../../components/ha-icon-button-arrow-prev";
import "../../components/ha-menu-button";
@@ -118,30 +119,24 @@ class HUIRoot extends LitElement {
${this._editMode
? html`
-
-
+ >
-
+ .path=${mdiHelpCircle}
+ >
-
-
+ .path=${mdiDotsVertical}
+ >
${__DEMO__ /* No unused entities available in the demo */
? ""
: html`
@@ -278,28 +268,23 @@ class HUIRoot extends LitElement {
${!this.narrow &&
this._conversation(this.hass.config.components)
? html`
-
-
+ >
`
: ""}
-
-
+ .path=${mdiDotsVertical}
+ >
${this.narrow &&
this._conversation(this.hass.config.components)
? html`
@@ -448,9 +433,6 @@ class HUIRoot extends LitElement {
? html`
-
-
+
+
-
-
- [[localize('ui.panel.mailbox.playback_title')]]
+
@@ -171,7 +169,7 @@ class HaLongLivedTokens extends LitElement {
mwc-button {
--mdc-theme-primary: var(--primary-color);
}
- mwc-icon-button {
+ ha-icon-button {
color: var(--primary-text-color);
}
`,
diff --git a/src/panels/profile/ha-pick-dashboard-row.ts b/src/panels/profile/ha-pick-dashboard-row.ts
index 482ce1969b..544c7296cc 100644
--- a/src/panels/profile/ha-pick-dashboard-row.ts
+++ b/src/panels/profile/ha-pick-dashboard-row.ts
@@ -43,7 +43,11 @@ class HaPickDashboardRow extends LitElement {
@iron-select=${this._dashboardChanged}
attr-for-selected="url-path"
>
- default
+ ${this.hass.localize(
+ "ui.panel.profile.dashboard.default_dashboard_label"
+ )}
${this._dashboards.map((dashboard) => {
if (!this.hass.user!.is_admin && dashboard.require_admin) {
return "";
diff --git a/src/panels/profile/ha-refresh-tokens-card.ts b/src/panels/profile/ha-refresh-tokens-card.ts
index 12f801978e..12f08d2bf0 100644
--- a/src/panels/profile/ha-refresh-tokens-card.ts
+++ b/src/panels/profile/ha-refresh-tokens-card.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
import { mdiDelete } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -8,7 +7,7 @@ import { relativeTime } from "../../common/datetime/relative_time";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-card";
import "../../components/ha-settings-row";
-import "../../components/ha-svg-icon";
+import "../../components/ha-icon-button";
import { RefreshToken } from "../../data/refresh_token";
import {
showAlertDialog,
@@ -93,14 +92,13 @@ class HaRefreshTokens extends LitElement {
)}
`
: ""}
-
-
+ >
`
)
@@ -144,7 +142,7 @@ class HaRefreshTokens extends LitElement {
ha-settings-row {
padding: 0;
}
- mwc-icon-button {
+ ha-icon-button {
color: var(--primary-text-color);
}
`,
diff --git a/src/panels/shopping-list/ha-panel-shopping-list.ts b/src/panels/shopping-list/ha-panel-shopping-list.ts
index f46d52dcd2..a852182225 100644
--- a/src/panels/shopping-list/ha-panel-shopping-list.ts
+++ b/src/panels/shopping-list/ha-panel-shopping-list.ts
@@ -12,6 +12,7 @@ import {
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import "../../components/ha-icon-button";
import "../../components/ha-menu-button";
import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
import "../../layouts/ha-app-layout";
@@ -60,14 +61,13 @@ class PanelShoppingList extends LitElement {
${this.config.title ||
this.hass!.localize("ui.panel.lovelace.editor.header")}
-
-
+ >
- ${name}
- [[localize('ui.panel.mailbox.playback_title')]]
+
+
+
+
+
+
+ [[_errorMsg]]
+
+
-
-
-
-
- [[_errorMsg]]
-
-
-
+
`;
}
@@ -161,13 +139,8 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
});
}
- _openedChanged(ev) {
- // Closed dialog by clicking on the overlay
- // Check against dialogClosedCallback to make sure we didn't change
- // programmatically
- if (!ev.detail.value) {
- this._dialogDone();
- }
+ closeDialog() {
+ this._dialogDone();
}
_showLoading(displayed) {
diff --git a/src/panels/map/ha-panel-map.ts b/src/panels/map/ha-panel-map.ts
index d391668c9d..89b9351473 100644
--- a/src/panels/map/ha-panel-map.ts
+++ b/src/panels/map/ha-panel-map.ts
@@ -1,16 +1,15 @@
import { mdiPencil } from "@mdi/js";
-import "@material/mwc-icon-button";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
import { property } from "lit/decorators";
import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { navigate } from "../../common/navigate";
-import "../../components/ha-svg-icon";
import "../../components/ha-menu-button";
-import "../../layouts/ha-app-layout";
-import { HomeAssistant } from "../../types";
+import "../../components/ha-icon-button";
import "../../components/map/ha-map";
+import "../../layouts/ha-app-layout";
import { haStyle } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
class HaPanelMap extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -30,9 +29,11 @@ class HaPanelMap extends LitElement {
>
${this.hass.localize("panel.map")}
${!__DEMO__ && this.hass.user?.is_admin
- ? html`
-
+ >
`
)}
+
+
-
-
- [[_errorMsg]]
+
+
-
-
-
+
`;
}
@@ -161,13 +139,8 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
});
}
- _openedChanged(ev) {
- // Closed dialog by clicking on the overlay
- // Check against dialogClosedCallback to make sure we didn't change
- // programmatically
- if (!ev.detail.value) {
- this._dialogDone();
- }
+ closeDialog() {
+ this._dialogDone();
}
_showLoading(displayed) {
diff --git a/src/panels/map/ha-panel-map.ts b/src/panels/map/ha-panel-map.ts
index d391668c9d..89b9351473 100644
--- a/src/panels/map/ha-panel-map.ts
+++ b/src/panels/map/ha-panel-map.ts
@@ -1,16 +1,15 @@
import { mdiPencil } from "@mdi/js";
-import "@material/mwc-icon-button";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
import { property } from "lit/decorators";
import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { navigate } from "../../common/navigate";
-import "../../components/ha-svg-icon";
import "../../components/ha-menu-button";
-import "../../layouts/ha-app-layout";
-import { HomeAssistant } from "../../types";
+import "../../components/ha-icon-button";
import "../../components/map/ha-map";
+import "../../layouts/ha-app-layout";
import { haStyle } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
class HaPanelMap extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -30,9 +29,11 @@ class HaPanelMap extends LitElement {
>
[[_errorMsg]]
-
-
${this.hass.localize("panel.map")}
${!__DEMO__ && this.hass.user?.is_admin
- ? html`${this.hass.localize("panel.shopping_list")}
${this._conversation(this.hass.config.components)
? html`
-