diff --git a/src/panels/lovelace/components/hui-action-editor.ts b/src/panels/lovelace/components/hui-action-editor.ts index 20c6248a45..472de0d87d 100644 --- a/src/panels/lovelace/components/hui-action-editor.ts +++ b/src/panels/lovelace/components/hui-action-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-textarea"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; @@ -31,15 +32,15 @@ declare global { } } +@customElement("hui-action-editor") export class HuiActionEditor extends LitElement { - public config?: ActionConfig; - public label?: string; - public actions?: string[]; - protected hass?: HomeAssistant; + @property() public config?: ActionConfig; - static get properties(): PropertyDeclarations { - return { hass: {}, config: {}, label: {}, actions: {} }; - } + @property() public label?: string; + + @property() public actions?: string[]; + + @property() protected hass?: HomeAssistant; get _action(): string { return this.config!.action || ""; @@ -126,5 +127,3 @@ declare global { "hui-action-editor": HuiActionEditor; } } - -customElements.define("hui-action-editor", HuiActionEditor); diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index 374506ccd1..5eac60e0ff 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -1,4 +1,12 @@ -import { html, LitElement, PropertyDeclarations } from "lit-element"; +import { + html, + LitElement, + customElement, + property, + css, + CSSResult, + TemplateResult, +} from "lit-element"; import "@material/mwc-button"; import "@polymer/paper-menu-button/paper-menu-button"; import "@polymer/paper-icon-button/paper-icon-button"; @@ -12,63 +20,18 @@ import { Lovelace } from "../types"; import { swapCard } from "../editor/config-util"; import { showMoveCardViewDialog } from "../editor/card-editor/show-move-card-view-dialog"; +@customElement("hui-card-options") export class HuiCardOptions extends LitElement { public cardConfig?: LovelaceCardConfig; - public hass?: HomeAssistant; - public lovelace?: Lovelace; - public path?: [number, number]; - static get properties(): PropertyDeclarations { - return { hass: {}, lovelace: {}, path: {} }; - } + @property() public hass?: HomeAssistant; - protected render() { + @property() public lovelace?: Lovelace; + + @property() public path?: [number, number]; + + protected render(): TemplateResult | void { return html` -
@@ -122,6 +85,54 @@ export class HuiCardOptions extends LitElement { `; } + static get styles(): CSSResult { + return css` + div.options { + border-top: 1px solid #e8e8e8; + padding: 5px 8px; + background: var(--paper-card-background-color, white); + box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, + rgba(0, 0, 0, 0.12) 0px 1px 5px -4px, + rgba(0, 0, 0, 0.2) 0px 3px 1px -2px; + display: flex; + } + + div.options .primary-actions { + flex: 1; + margin: auto; + } + + div.options .secondary-actions { + flex: 4; + text-align: right; + } + + paper-icon-button { + color: var(--primary-text-color); + } + + paper-icon-button.move-arrow[disabled] { + color: var(--disabled-text-color); + } + + paper-menu-button { + color: var(--secondary-text-color); + padding: 0; + } + + paper-item.header { + color: var(--primary-text-color); + text-transform: uppercase; + font-weight: 500; + font-size: 14px; + } + + paper-item { + cursor: pointer; + } + `; + } + private _editCard(): void { showEditCardDialog(this, { lovelace: this.lovelace!, @@ -162,5 +173,3 @@ declare global { "hui-card-options": HuiCardOptions; } } - -customElements.define("hui-card-options", HuiCardOptions); diff --git a/src/panels/lovelace/components/hui-entities-toggle.ts b/src/panels/lovelace/components/hui-entities-toggle.ts index e65bf1546d..0c64f794ab 100644 --- a/src/panels/lovelace/components/hui-entities-toggle.ts +++ b/src/panels/lovelace/components/hui-entities-toggle.ts @@ -1,9 +1,12 @@ import { html, LitElement, - PropertyDeclarations, PropertyValues, TemplateResult, + customElement, + property, + css, + CSSResult, } from "lit-element"; import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button"; @@ -11,20 +14,15 @@ import { DOMAINS_TOGGLE } from "../../../common/const"; import { turnOnOffEntities } from "../common/entity/turn-on-off-entities"; import { HomeAssistant } from "../../../types"; +@customElement("hui-entities-toggle") class HuiEntitiesToggle extends LitElement { - public entities?: string[]; - protected hass?: HomeAssistant; - private _toggleEntities?: string[]; + @property() public entities?: string[]; - static get properties(): PropertyDeclarations { - return { - hass: {}, - entities: {}, - _toggleEntities: {}, - }; - } + @property() protected hass?: HomeAssistant; - public updated(changedProperties: PropertyValues) { + @property() private _toggleEntities?: string[]; + + public updated(changedProperties: PropertyValues): void { super.updated(changedProperties); if (changedProperties.has("entities")) { this._toggleEntities = this.entities!.filter( @@ -41,7 +39,6 @@ class HuiEntitiesToggle extends LitElement { } return html` - ${this.renderStyle()} Entities
${this.entities.map((entityConf, index) => { @@ -79,13 +76,11 @@ export class HuiEntityEditor extends LitElement { fireEvent(this, "entities-changed", { entities: newConfigEntities }); } - private renderStyle(): TemplateResult { - return html` - + static get styles(): CSSResult { + return css` + .entities { + padding-left: 20px; + } `; } } @@ -95,5 +90,3 @@ declare global { "hui-entity-editor": HuiEntityEditor; } } - -customElements.define("hui-entity-editor", HuiEntityEditor); diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts index 03ecc5ef08..d38b413dfc 100644 --- a/src/panels/lovelace/components/hui-generic-entity-row.ts +++ b/src/panels/lovelace/components/hui-generic-entity-row.ts @@ -6,6 +6,7 @@ import { CSSResult, PropertyValues, property, + TemplateResult, } from "lit-element"; import { HomeAssistant } from "../../../types"; @@ -19,10 +20,12 @@ import "../components/hui-warning"; class HuiGenericEntityRow extends LitElement { @property() public hass?: HomeAssistant; + @property() public config?: EntitiesCardEntityConfig; + @property() public showSecondary: boolean = true; - protected render() { + protected render(): TemplateResult | void { if (!this.hass || !this.config) { return html``; } @@ -73,7 +76,7 @@ class HuiGenericEntityRow extends LitElement { `; } - protected updated(changedProps: PropertyValues) { + protected updated(changedProps: PropertyValues): void { super.updated(changedProps); if (changedProps.has("hass")) { this.toggleAttribute("rtl", computeRTL(this.hass!)); diff --git a/src/panels/lovelace/components/hui-image.ts b/src/panels/lovelace/components/hui-image.ts index 04a12f34d8..213220772d 100644 --- a/src/panels/lovelace/components/hui-image.ts +++ b/src/panels/lovelace/components/hui-image.ts @@ -12,6 +12,7 @@ import { css, PropertyValues, query, + customElement, } from "lit-element"; import { HomeAssistant } from "../../../types"; import { styleMap } from "lit-html/directives/style-map"; @@ -26,33 +27,43 @@ export interface StateSpecificConfig { [state: string]: string; } -/* - * @appliesMixin LocalizeMixin - */ +@customElement("hui-image") class HuiImage extends LitElement { @property() public hass?: HomeAssistant; + @property() public entity?: string; + @property() public image?: string; + @property() public stateImage?: StateSpecificConfig; + @property() public cameraImage?: string; + @property() public aspectRatio?: string; + @property() public filter?: string; + @property() public stateFilter?: StateSpecificConfig; @property() private _loadError?: boolean; + @property() private _cameraImageSrc?: string; + @query("img") private _image!: HTMLImageElement; + private _lastImageHeight?: number; + private _cameraUpdater?: number; + private _attached?: boolean; - public connectedCallback() { + public connectedCallback(): void { super.connectedCallback(); this._attached = true; this._startUpdateCameraInterval(); } - public disconnectedCallback() { + public disconnectedCallback(): void { super.disconnectedCallback(); this._attached = false; this._stopUpdateCameraInterval(); @@ -137,7 +148,7 @@ class HuiImage extends LitElement { } } - private _startUpdateCameraInterval() { + private _startUpdateCameraInterval(): void { this._stopUpdateCameraInterval(); if (this.cameraImage && this._attached) { this._cameraUpdater = window.setInterval( @@ -147,23 +158,23 @@ class HuiImage extends LitElement { } } - private _stopUpdateCameraInterval() { + private _stopUpdateCameraInterval(): void { if (this._cameraUpdater) { clearInterval(this._cameraUpdater); } } - private _onImageError() { + private _onImageError(): void { this._loadError = true; } - private async _onImageLoad() { + private async _onImageLoad(): Promise { this._loadError = false; await this.updateComplete; this._lastImageHeight = this._image.offsetHeight; } - private async _updateCameraImageSrc() { + private async _updateCameraImageSrc(): Promise { if (!this.hass || !this.cameraImage) { return; } @@ -221,5 +232,3 @@ declare global { "hui-image": HuiImage; } } - -customElements.define("hui-image", HuiImage); diff --git a/src/panels/lovelace/components/hui-theme-select-editor.ts b/src/panels/lovelace/components/hui-theme-select-editor.ts index 318e42add8..2dbc863293 100644 --- a/src/panels/lovelace/components/hui-theme-select-editor.ts +++ b/src/panels/lovelace/components/hui-theme-select-editor.ts @@ -1,8 +1,11 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, + css, + CSSResult, } from "lit-element"; import "@material/mwc-button"; @@ -20,16 +23,11 @@ declare global { } } +@customElement("hui-theme-selection-editor") export class HuiThemeSelectionEditor extends LitElement { - public value?: string; - public hass?: HomeAssistant; + @property() public value?: string; - static get properties(): PropertyDeclarations { - return { - hass: {}, - value: {}, - }; - } + @property() public hass?: HomeAssistant; protected render(): TemplateResult | void { const themes = ["Backend-selected", "default"].concat( @@ -37,7 +35,6 @@ export class HuiThemeSelectionEditor extends LitElement { ); return html` - ${this.renderStyle()} - paper-dropdown-menu { - width: 100%; - } - + static get styles(): CSSResult { + return css` + paper-dropdown-menu { + width: 100%; + } `; } @@ -82,5 +77,3 @@ declare global { "hui-theme-select-editor": HuiThemeSelectionEditor; } } - -customElements.define("hui-theme-select-editor", HuiThemeSelectionEditor); diff --git a/src/panels/lovelace/components/hui-timestamp-display.ts b/src/panels/lovelace/components/hui-timestamp-display.ts index 1c03a8807f..9d3ca782c0 100644 --- a/src/panels/lovelace/components/hui-timestamp-display.ts +++ b/src/panels/lovelace/components/hui-timestamp-display.ts @@ -1,9 +1,10 @@ import { html, LitElement, - PropertyDeclarations, PropertyValues, TemplateResult, + customElement, + property, } from "lit-element"; import { HomeAssistant } from "../../../types"; @@ -19,30 +20,32 @@ const FORMATS: { [key: string]: (ts: Date, lang: string) => string } = { }; const INTERVAL_FORMAT = ["relative", "total"]; +@customElement("hui-timestamp-display") class HuiTimestampDisplay extends LitElement { - public hass?: HomeAssistant; - public ts?: Date; - public format?: "relative" | "total" | "date" | "datetime" | "time"; - private _relative?: string; + @property() public hass?: HomeAssistant; + + @property() public ts?: Date; + + @property() public format?: + | "relative" + | "total" + | "date" + | "datetime" + | "time"; + + @property() private _relative?: string; + private _connected?: boolean; + private _interval?: number; - static get properties(): PropertyDeclarations { - return { - ts: {}, - hass: {}, - format: {}, - _relative: {}, - }; - } - - public connectedCallback() { + public connectedCallback(): void { super.connectedCallback(); this._connected = true; this._startInterval(); } - public disconnectedCallback() { + public disconnectedCallback(): void { super.disconnectedCallback(); this._connected = false; this._clearInterval(); @@ -65,18 +68,18 @@ class HuiTimestampDisplay extends LitElement { return html` ${this._relative} `; - } else if (format in FORMATS) { + } + if (format in FORMATS) { return html` ${FORMATS[format](this.ts, this.hass.language)} `; - } else { - return html` - Invalid format - `; } + return html` + Invalid format + `; } - protected updated(changedProperties: PropertyValues) { + protected updated(changedProperties: PropertyValues): void { super.updated(changedProperties); if (!changedProperties.has("format") || !this._connected) { return; @@ -89,11 +92,11 @@ class HuiTimestampDisplay extends LitElement { } } - private get _format() { + private get _format(): string { return this.format || "relative"; } - private _startInterval() { + private _startInterval(): void { this._clearInterval(); if (this._connected && INTERVAL_FORMAT.includes(this._format)) { this._updateRelative(); @@ -101,14 +104,14 @@ class HuiTimestampDisplay extends LitElement { } } - private _clearInterval() { + private _clearInterval(): void { if (this._interval) { clearInterval(this._interval); this._interval = undefined; } } - private _updateRelative() { + private _updateRelative(): void { if (this.ts && this.hass!.localize) { this._relative = this._format === "relative" @@ -126,5 +129,3 @@ declare global { "hui-timestamp-display": HuiTimestampDisplay; } } - -customElements.define("hui-timestamp-display", HuiTimestampDisplay); diff --git a/src/panels/lovelace/components/hui-yaml-editor.ts b/src/panels/lovelace/components/hui-yaml-editor.ts index c0709b837c..d0efdf1eed 100644 --- a/src/panels/lovelace/components/hui-yaml-editor.ts +++ b/src/panels/lovelace/components/hui-yaml-editor.ts @@ -6,6 +6,7 @@ import codeMirrorCSS from "codemirror/lib/codemirror.css"; import { HomeAssistant } from "../../../types"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeRTL } from "../../../common/util/compute_rtl"; +import { customElement } from "lit-element"; declare global { interface HASSDomEvents { @@ -16,9 +17,12 @@ declare global { } } +@customElement("hui-yaml-editor") export class HuiYamlEditor extends HTMLElement { public _hass?: HomeAssistant; + public codemirror: CodeMirror; + private _value: string; public constructor() { @@ -108,7 +112,7 @@ export class HuiYamlEditor extends HTMLElement { fireEvent(this, "yaml-changed", { value: this.codemirror.getValue() }); } - private setScrollBarDirection() { + private setScrollBarDirection(): void { if (!this.codemirror) { return; } @@ -124,5 +128,3 @@ declare global { "hui-yaml-editor": HuiYamlEditor; } } - -window.customElements.define("hui-yaml-editor", HuiYamlEditor); 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 869a376f54..6caebb4255 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -1,4 +1,11 @@ -import { html, css, LitElement, TemplateResult, CSSResult } from "lit-element"; +import { + html, + css, + LitElement, + TemplateResult, + CSSResult, + customElement, +} from "lit-element"; import "@material/mwc-button"; import { HomeAssistant } from "../../../../types"; @@ -33,8 +40,10 @@ const cards = [ { name: "Weather Forecast", type: "weather-forecast" }, ]; +@customElement("hui-card-picker") export class HuiCardPicker extends LitElement { public hass?: HomeAssistant; + public cardPicked?: (cardConf: LovelaceCardConfig) => void; protected render(): TemplateResult | void { @@ -97,5 +106,3 @@ declare global { "hui-card-picker": HuiCardPicker; } } - -customElements.define("hui-card-picker", HuiCardPicker); diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index 0170f16984..28651529ce 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import { HomeAssistant } from "../../../../types"; @@ -23,18 +24,13 @@ declare global { } } +@customElement("hui-dialog-edit-card") export class HuiDialogEditCard extends LitElement { - protected hass?: HomeAssistant; - private _params?: EditCardDialogParams; - private _cardConfig?: LovelaceCardConfig; + @property() protected hass?: HomeAssistant; - static get properties(): PropertyDeclarations { - return { - hass: {}, - _params: {}, - _cardConfig: {}, - }; - } + @property() private _params?: EditCardDialogParams; + + @property() private _cardConfig?: LovelaceCardConfig; constructor() { super(); @@ -78,11 +74,11 @@ export class HuiDialogEditCard extends LitElement { `; } - private _cardPicked(cardConf: LovelaceCardConfig) { + private _cardPicked(cardConf: LovelaceCardConfig): void { this._cardConfig = cardConf; } - private _cancel() { + private _cancel(): void { this._params = undefined; this._cardConfig = undefined; } @@ -93,5 +89,3 @@ declare global { "hui-dialog-edit-card": HuiDialogEditCard; } } - -customElements.define("hui-dialog-edit-card", HuiDialogEditCard); diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts index 58ac1051c6..1cd86ebee7 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts @@ -1,8 +1,11 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, + css, + CSSResult, } from "lit-element"; import "@polymer/paper-dialog/paper-dialog"; import "@polymer/paper-item/paper-item"; @@ -13,14 +16,9 @@ import { moveCard } from "../config-util"; import { MoveCardViewDialogParams } from "./show-move-card-view-dialog"; import { PolymerChangedEvent } from "../../../../polymer-types"; +@customElement("hui-dialog-move-card-view") export class HuiDialogMoveCardView extends LitElement { - private _params?: MoveCardViewDialogParams; - - static get properties(): PropertyDeclarations { - return { - _params: {}, - }; - } + @property() private _params?: MoveCardViewDialogParams; public async showDialog(params: MoveCardViewDialogParams): Promise { this._params = params; @@ -32,29 +30,6 @@ export class HuiDialogMoveCardView extends LitElement { return html``; } return html` - void; public closeDialog?: () => void; - static get properties(): PropertyDeclarations { - return {}; - } - protected render(): TemplateResult | void { return html` void; - private _configElement?: LovelaceCardEditor | null; - private _uiEditor?: boolean; - private _configValue?: ConfigValue; - private _configState?: string; - private _loading?: boolean; - private _saving: boolean; - private _errorMsg?: TemplateResult; - private _cardType?: string; + @property() public hass?: HomeAssistant; - static get properties(): PropertyDeclarations { - return { - hass: {}, - cardConfig: {}, - viewIndex: {}, - _cardIndex: {}, - _configElement: {}, - _configValue: {}, - _configState: {}, - _errorMsg: {}, - _uiEditor: {}, - _saving: {}, - _loading: {}, - }; - } + @property() public cardConfig?: LovelaceCardConfig; + + public lovelace?: Lovelace; + + public path?: [number] | [number, number]; + + public closeDialog?: () => void; + + @property() private _configElement?: LovelaceCardEditor | null; + + @property() private _uiEditor?: boolean; + + @property() private _configValue?: ConfigValue; + + @property() private _configState?: string; + + @property() private _loading?: boolean; + + @property() private _saving: boolean; + + @property() private _errorMsg?: TemplateResult; + + private _cardType?: string; private get _dialog(): PaperDialogElement { return this.shadowRoot!.querySelector("paper-dialog")!; @@ -88,7 +86,7 @@ export class HuiEditCard extends LitElement { return this.shadowRoot!.querySelector("hui-card-preview")!; } - protected constructor() { + public constructor() { super(); this._saving = false; } @@ -270,7 +268,7 @@ export class HuiEditCard extends LitElement { this._updatePreview(value); } - private async _updatePreview(config: LovelaceCardConfig) { + private async _updatePreview(config: LovelaceCardConfig): Promise { await this.updateComplete; if (!this._previewEl) { @@ -286,7 +284,7 @@ export class HuiEditCard extends LitElement { } } - private _setPreviewError(error: ConfigError) { + private _setPreviewError(error: ConfigError): void { if (!this._previewEl) { return; } @@ -323,7 +321,7 @@ export class HuiEditCard extends LitElement { this._resizeDialog(); } - private _isConfigValid() { + private _isConfigValid(): boolean { if (!this._configValue || !this._configValue.value) { return false; } @@ -401,7 +399,7 @@ export class HuiEditCard extends LitElement { return this.path!.length === 1; } - private _openedChanged(ev) { + private _openedChanged(ev): void { if (!ev.detail.value) { this.closeDialog!(); } @@ -518,5 +516,3 @@ declare global { "hui-edit-card": HuiEditCard; } } - -customElements.define("hui-edit-card", HuiEditCard); diff --git a/src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts b/src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts index 0eb932f758..b2cb6d2501 100644 --- a/src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts +++ b/src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts @@ -17,7 +17,7 @@ export interface EditCardDialogParams { path: [number] | [number, number]; } -const registerEditCardDialog = (element: HTMLElement) => +const registerEditCardDialog = (element: HTMLElement): Event => fireEvent(element, "register-dialog", { dialogShowEvent, dialogTag, @@ -28,7 +28,7 @@ const registerEditCardDialog = (element: HTMLElement) => export const showEditCardDialog = ( element: HTMLElement, editCardDialogParams: EditCardDialogParams -) => { +): void => { if (!registeredDialog) { registeredDialog = true; registerEditCardDialog(element); diff --git a/src/panels/lovelace/editor/card-editor/show-move-card-view-dialog.ts b/src/panels/lovelace/editor/card-editor/show-move-card-view-dialog.ts index 5ffccaaa44..c68e3cc635 100644 --- a/src/panels/lovelace/editor/card-editor/show-move-card-view-dialog.ts +++ b/src/panels/lovelace/editor/card-editor/show-move-card-view-dialog.ts @@ -15,7 +15,7 @@ export interface MoveCardViewDialogParams { lovelace: Lovelace; } -const registerEditCardDialog = (element: HTMLElement) => +const registerEditCardDialog = (element: HTMLElement): Event => fireEvent(element, "register-dialog", { dialogShowEvent: "show-move-card-view", dialogTag: "hui-dialog-move-card-view", @@ -26,7 +26,7 @@ const registerEditCardDialog = (element: HTMLElement) => export const showMoveCardViewDialog = ( element: HTMLElement, moveCardViewDialogParams: MoveCardViewDialogParams -) => { +): void => { if (!registeredDialog) { registeredDialog = true; registerEditCardDialog(element); 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 969a48f2e6..8daa8ead02 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,8 +1,11 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, + CSSResult, + css, } from "lit-element"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-item"; @@ -26,20 +29,18 @@ const cardConfigStruct = struct({ states: "array?", }); +@customElement("hui-alarm-panel-card-editor") export class HuiAlarmPanelCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; public setConfig(config: Config): void { config = cardConfigStruct(config); this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } - get _entity(): string { return this._config!.entity || ""; } @@ -60,7 +61,7 @@ export class HuiAlarmPanelCardEditor extends LitElement const states = ["arm_home", "arm_away", "arm_night", "arm_custom_bypass"]; return html` - ${configElementStyle} ${this.renderStyle()} + ${configElementStyle}
- .states { - display: flex; - flex-direction: row; - } - .deleteState { - visibility: hidden; - } - .states:hover > .deleteState { - visibility: visible; - } - ha-icon { - padding-top: 12px; - } - + static get styles(): CSSResult { + return css` + .states { + display: flex; + flex-direction: row; + } + .deleteState { + visibility: hidden; + } + .states:hover > .deleteState { + visibility: visible; + } + ha-icon { + padding-top: 12px; + } `; } @@ -190,5 +189,3 @@ declare global { "hui-alarm-panel-card-editor": HuiAlarmPanelCardEditor; } } - -customElements.define("hui-alarm-panel-card-editor", HuiAlarmPanelCardEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts index 8aa763b492..7e61259e97 100644 --- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-item"; @@ -44,10 +45,19 @@ const cardConfigStruct = struct({ entities: [entitiesConfigStruct], }); +@customElement("hui-entities-card-editor") export class HuiEntitiesCardEditor extends LitElement implements LovelaceCardEditor { - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {}, _configEntities: {} }; + @property() public hass?: HomeAssistant; + + @property() private _config?: EntitiesCardConfig; + + @property() private _configEntities?: EntitiesCardEntityConfig[]; + + public setConfig(config: EntitiesCardConfig): void { + config = cardConfigStruct(config); + this._config = config; + this._configEntities = processEditorEntities(config.entities); } get _title(): string { @@ -58,16 +68,6 @@ export class HuiEntitiesCardEditor extends LitElement return this._config!.theme || "Backend-selected"; } - public hass?: HomeAssistant; - private _config?: EntitiesCardConfig; - private _configEntities?: EntitiesCardEntityConfig[]; - - public setConfig(config: EntitiesCardConfig): void { - config = cardConfigStruct(config); - this._config = config; - this._configEntities = processEditorEntities(config.entities); - } - protected render(): TemplateResult | void { if (!this.hass) { return html``; @@ -141,5 +141,3 @@ declare global { "hui-entities-card-editor": HuiEntitiesCardEditor; } } - -customElements.define("hui-entities-card-editor", HuiEntitiesCardEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts index 8fd9fb8961..7318a1f270 100644 --- a/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-input"; @@ -33,20 +34,18 @@ const cardConfigStruct = struct({ theme: "string?", }); +@customElement("hui-entity-button-card-editor") export class HuiEntityButtonCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; public setConfig(config: Config): void { config = cardConfigStruct(config); this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } - get _entity(): string { return this._config!.entity || ""; } @@ -161,8 +160,3 @@ declare global { "hui-entity-button-card-editor": HuiEntityButtonCardEditor; } } - -customElements.define( - "hui-entity-button-card-editor", - HuiEntityButtonCardEditor -); diff --git a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts index 328077be8f..a9f5af2dec 100644 --- a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts @@ -1,8 +1,11 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, + css, + CSSResult, } from "lit-element"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-toggle-button/paper-toggle-button"; @@ -29,22 +32,21 @@ const cardConfigStruct = struct({ theme: "string?", }); +@customElement("hui-gauge-card-editor") export class HuiGaugeCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; + private _useSeverity?: boolean; public setConfig(config: Config): void { config = cardConfigStruct(config); - this._useSeverity = config.severity ? true : false; + this._useSeverity = !!config.severity; this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } - get _name(): string { return this._config!.name || ""; } @@ -79,7 +81,7 @@ export class HuiGaugeCardEditor extends LitElement } return html` - ${configElementStyle} ${this.renderStyle()} + ${configElementStyle}
- .severity { - display: none; - width: 100%; - padding-left: 16px; - flex-direction: row; - flex-wrap: wrap; - } - .severity > * { - flex: 1 0 30%; - padding-right: 4px; - } - paper-toggle-button[checked] ~ .severity { - display: flex; - } - + static get styles(): CSSResult { + return css` + .severity { + display: none; + width: 100%; + padding-left: 16px; + flex-direction: row; + flex-wrap: wrap; + } + .severity > * { + flex: 1 0 30%; + padding-right: 4px; + } + paper-toggle-button[checked] ~ .severity { + display: flex; + } `; } @@ -243,5 +243,3 @@ declare global { "hui-gauge-card-editor": HuiGaugeCardEditor; } } - -customElements.define("hui-gauge-card-editor", HuiGaugeCardEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts index a3270c3cb2..a879dda2bd 100644 --- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-item"; @@ -43,11 +44,14 @@ const cardConfigStruct = struct({ entities: [entitiesConfigStruct], }); +@customElement("hui-glance-card-editor") export class HuiGlanceCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; - private _configEntities?: ConfigEntity[]; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; + + @property() private _configEntities?: ConfigEntity[]; public setConfig(config: Config): void { config = cardConfigStruct(config); @@ -55,10 +59,6 @@ export class HuiGlanceCardEditor extends LitElement this._configEntities = processEditorEntities(config.entities); } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {}, _configEntities: {} }; - } - get _title(): string { return this._config!.title || ""; } @@ -162,5 +162,3 @@ declare global { "hui-glance-card-editor": HuiGlanceCardEditor; } } - -customElements.define("hui-glance-card-editor", HuiGlanceCardEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts index 347365f698..6d01f24ee5 100644 --- a/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-input"; @@ -21,20 +22,18 @@ const cardConfigStruct = struct({ aspect_ratio: "string?", }); +@customElement("hui-iframe-card-editor") export class HuiIframeCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; public setConfig(config: Config): void { config = cardConfigStruct(config); this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } - get _title(): string { return this._config!.title || ""; } @@ -110,5 +109,3 @@ declare global { "hui-iframe-card-editor": HuiIframeCardEditor; } } - -customElements.define("hui-iframe-card-editor", HuiIframeCardEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts index a2f748bb2f..742fe7ee4c 100644 --- a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-input"; @@ -24,20 +25,18 @@ const cardConfigStruct = struct({ theme: "string?", }); +@customElement("hui-light-card-editor") export class HuiLightCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; public setConfig(config: Config): void { config = cardConfigStruct(config); this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {}, _configEntities: {} }; - } - get _name(): string { return this._config!.name || ""; } @@ -112,5 +111,3 @@ declare global { "hui-light-card-editor": HuiLightCardEditor; } } - -customElements.define("hui-light-card-editor", HuiLightCardEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts index b2161e4bb3..045c7f94dc 100644 --- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-input"; @@ -35,10 +36,13 @@ const cardConfigStruct = struct({ entities: [entitiesConfigStruct], }); +@customElement("hui-map-card-editor") export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: MapCardConfig; - private _configEntities?: EntityConfig[]; + @property() public hass?: HomeAssistant; + + @property() private _config?: MapCardConfig; + + @property() private _configEntities?: EntityConfig[]; public setConfig(config: MapCardConfig): void { config = cardConfigStruct(config); @@ -46,10 +50,6 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor { this._configEntities = processEditorEntities(config.entities); } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {}, _configEntities: {} }; - } - get _title(): string { return this._config!.title || ""; } @@ -137,5 +137,3 @@ declare global { "hui-map-card-editor": HuiMapCardEditor; } } - -customElements.define("hui-map-card-editor", HuiMapCardEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts index 8c06bea724..d9af9cf701 100644 --- a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-textarea"; @@ -21,20 +22,18 @@ const cardConfigStruct = struct({ content: "string", }); +@customElement("hui-markdown-card-editor") export class HuiMarkdownCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; public setConfig(config: Config): void { config = cardConfigStruct(config); this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } - get _title(): string { return this._config!.title || ""; } @@ -98,5 +97,3 @@ declare global { "hui-markdown-card-editor": HuiMarkdownCardEditor; } } - -customElements.define("hui-markdown-card-editor", HuiMarkdownCardEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts index baaa846515..6a3b6a835d 100644 --- a/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import { struct } from "../../common/structs/struct"; @@ -19,20 +20,18 @@ const cardConfigStruct = struct({ entity: "string?", }); +@customElement("hui-media-control-card-editor") export class HuiMediaControlCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; public setConfig(config: Config): void { config = cardConfigStruct(config); this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } - get _entity(): string { return this._config!.entity || ""; } @@ -83,8 +82,3 @@ declare global { "hui-media-control-card-editor": HuiMediaControlCardEditor; } } - -customElements.define( - "hui-media-control-card-editor", - HuiMediaControlCardEditor -); diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts index f53d4af3da..b6cfc6125a 100644 --- a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-input"; @@ -28,20 +29,18 @@ const cardConfigStruct = struct({ hold_action: struct.optional(actionConfigStruct), }); +@customElement("hui-picture-card-editor") export class HuiPictureCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; public setConfig(config: Config): void { config = cardConfigStruct(config); this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } - get _image(): string { return this._config!.image || ""; } @@ -123,5 +122,3 @@ declare global { "hui-picture-card-editor": HuiPictureCardEditor; } } - -customElements.define("hui-picture-card-editor", HuiPictureCardEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts index 63fe65eea5..942da40302 100644 --- a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-input"; @@ -23,20 +24,18 @@ const cardConfigStruct = struct({ name: "string?", }); +@customElement("hui-plant-status-card-editor") export class HuiPlantStatusCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; public setConfig(config: Config): void { config = cardConfigStruct(config); this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } - get _entity(): string { return this._config!.entity || ""; } @@ -100,5 +99,3 @@ declare global { "hui-plant-status-card-editor": HuiPlantStatusCardEditor; } } - -customElements.define("hui-plant-status-card-editor", HuiPlantStatusCardEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts index acf2f74f06..062a9baeed 100644 --- a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; @@ -32,20 +33,18 @@ const cardConfigStruct = struct({ hours_to_show: "number?", }); +@customElement("hui-sensor-card-editor") export class HuiSensorCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; public setConfig(config: Config): void { config = cardConfigStruct(config); this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } - get _entity(): string { return this._config!.entity || ""; } @@ -194,5 +193,3 @@ declare global { "hui-sensor-card-editor": HuiSensorCardEditor; } } - -customElements.define("hui-sensor-card-editor", HuiSensorCardEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts index 91b960b905..b2c0090299 100644 --- a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-input"; @@ -18,20 +19,18 @@ const cardConfigStruct = struct({ title: "string?", }); +@customElement("hui-shopping-list-card-editor") export class HuiShoppingListEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; public setConfig(config: Config): void { config = cardConfigStruct(config); this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } - get _title(): string { return this._config!.title || ""; } @@ -81,5 +80,3 @@ declare global { "hui-shopping-list-card-editor": HuiShoppingListEditor; } } - -customElements.define("hui-shopping-list-card-editor", HuiShoppingListEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts index 4c3d16aa18..bc6e27edae 100644 --- a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-input"; @@ -24,20 +25,18 @@ const cardConfigStruct = struct({ theme: "string?", }); +@customElement("hui-thermostat-card-editor") export class HuiThermostatCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; public setConfig(config: Config): void { config = cardConfigStruct(config); this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } - get _entity(): string { return this._config!.entity || ""; } @@ -109,5 +108,3 @@ declare global { "hui-thermostat-card-editor": HuiThermostatCardEditor; } } - -customElements.define("hui-thermostat-card-editor", HuiThermostatCardEditor); diff --git a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts index 607baeadaa..cf394c5450 100644 --- a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import { struct } from "../../common/structs/struct"; @@ -21,20 +22,18 @@ const cardConfigStruct = struct({ name: "string?", }); +@customElement("hui-weather-forecast-card-editor") export class HuiWeatherForecastCardEditor extends LitElement implements LovelaceCardEditor { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; + + @property() private _config?: Config; public setConfig(config: Config): void { config = cardConfigStruct(config); this._config = config; } - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } - get _entity(): string { return this._config!.entity || ""; } @@ -98,8 +97,3 @@ declare global { "hui-weather-forecast-card-editor": HuiWeatherForecastCardEditor; } } - -customElements.define( - "hui-weather-forecast-card-editor", - HuiWeatherForecastCardEditor -); diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts index d8575d77d5..b6d94943c1 100644 --- a/src/panels/lovelace/editor/hui-dialog-save-config.ts +++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts @@ -2,11 +2,11 @@ import { html, css, LitElement, - PropertyDeclarations, TemplateResult, CSSResult, + customElement, + property, } from "lit-element"; - import "@polymer/paper-spinner/paper-spinner"; import "@polymer/paper-dialog/paper-dialog"; // This is not a duplicate import, one is for types, one is for element. @@ -15,25 +15,18 @@ import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog"; import "@material/mwc-button"; import { haStyleDialog } from "../../../resources/styles"; - import { HomeAssistant } from "../../../types"; - import { SaveDialogParams } from "./show-save-config-dialog"; +@customElement("hui-save-config") export class HuiSaveConfig extends LitElement { - public hass?: HomeAssistant; - private _params?: SaveDialogParams; - private _saving: boolean; + @property() public hass?: HomeAssistant; - static get properties(): PropertyDeclarations { - return { - hass: {}, - _params: {}, - _saving: {}, - }; - } + @property() private _params?: SaveDialogParams; - protected constructor() { + @property() private _saving: boolean; + + public constructor() { super(); this._saving = false; } @@ -145,5 +138,3 @@ declare global { "hui-dialog-save-config": HuiSaveConfig; } } - -customElements.define("hui-dialog-save-config", HuiSaveConfig); diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts index 72e121e563..2b62748c09 100644 --- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts +++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts @@ -2,9 +2,10 @@ import { html, css, LitElement, - PropertyDeclarations, TemplateResult, CSSResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-spinner/paper-spinner"; import "@polymer/paper-dialog/paper-dialog"; @@ -21,20 +22,17 @@ import { HomeAssistant } from "../../../../types"; import { LovelaceConfig } from "../../../../data/lovelace"; import { Lovelace } from "../../types"; +@customElement("hui-dialog-edit-lovelace") export class HuiDialogEditLovelace extends LitElement { - public hass?: HomeAssistant; - private _lovelace?: Lovelace; + @property() public hass?: HomeAssistant; + + @property() private _lovelace?: Lovelace; + private _config?: LovelaceConfig; + private _saving: boolean; - static get properties(): PropertyDeclarations { - return { - hass: {}, - _lovelace: {}, - }; - } - - protected constructor() { + public constructor() { super(); this._saving = false; } @@ -168,5 +166,3 @@ declare global { "hui-dialog-edit-lovelace": HuiDialogEditLovelace; } } - -customElements.define("hui-dialog-edit-lovelace", HuiDialogEditLovelace); diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts b/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts index 1944a38982..2cbea06bdc 100644 --- a/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts +++ b/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-input"; @@ -21,13 +22,11 @@ declare global { } } +@customElement("hui-lovelace-editor") export class HuiLovelaceEditor extends LitElement { - static get properties(): PropertyDeclarations { - return { hass: {}, config: {} }; - } + @property() public hass?: HomeAssistant; - public hass?: HomeAssistant; - public config?: LovelaceConfig; + @property() public config?: LovelaceConfig; get _title(): string { if (!this.config) { @@ -79,5 +78,3 @@ declare global { "hui-lovelace-editor": HuiLovelaceEditor; } } - -customElements.define("hui-lovelace-editor", HuiLovelaceEditor); diff --git a/src/panels/lovelace/editor/lovelace-editor/show-edit-lovelace-dialog.ts b/src/panels/lovelace/editor/lovelace-editor/show-edit-lovelace-dialog.ts index bc042dfa15..fe95b27853 100644 --- a/src/panels/lovelace/editor/lovelace-editor/show-edit-lovelace-dialog.ts +++ b/src/panels/lovelace/editor/lovelace-editor/show-edit-lovelace-dialog.ts @@ -12,7 +12,7 @@ let registeredDialog = false; const dialogShowEvent = "show-edit-lovelace"; const dialogTag = "hui-dialog-edit-lovelace"; -const registerEditLovelaceDialog = (element: HTMLElement) => +const registerEditLovelaceDialog = (element: HTMLElement): Event => fireEvent(element, "register-dialog", { dialogShowEvent, dialogTag, @@ -23,7 +23,7 @@ const registerEditLovelaceDialog = (element: HTMLElement) => export const showEditLovelaceDialog = ( element: HTMLElement, lovelace: Lovelace -) => { +): void => { if (!registeredDialog) { registeredDialog = true; registerEditLovelaceDialog(element); 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 163127b073..30f5532830 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 @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import { HomeAssistant } from "../../../../types"; @@ -21,16 +22,11 @@ declare global { } } +@customElement("hui-dialog-edit-view") export class HuiDialogEditView extends LitElement { - protected hass?: HomeAssistant; - private _params?: EditViewDialogParams; + @property() protected hass?: HomeAssistant; - static get properties(): PropertyDeclarations { - return { - hass: {}, - _params: {}, - }; - } + @property() private _params?: EditViewDialogParams; public async showDialog(params: EditViewDialogParams): Promise { this._params = params; @@ -58,5 +54,3 @@ declare global { "hui-dialog-edit-view": HuiDialogEditView; } } - -customElements.define("hui-dialog-edit-view", HuiDialogEditView); diff --git a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts index 721aab61e4..ff115e7cf5 100644 --- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts +++ b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts @@ -2,9 +2,10 @@ import { html, css, LitElement, - PropertyDeclarations, TemplateResult, CSSResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-spinner/paper-spinner"; @@ -35,31 +36,27 @@ import { navigate } from "../../../../common/navigate"; import { Lovelace } from "../../types"; import { deleteView, addView, replaceView } from "../config-util"; +@customElement("hui-edit-view") export class HuiEditView extends LitElement { - public lovelace?: Lovelace; - public viewIndex?: number; - public hass?: HomeAssistant; - private _config?: LovelaceViewConfig; - private _badges?: EntityConfig[]; - private _cards?: LovelaceCardConfig[]; - private _saving: boolean; + @property() public lovelace?: Lovelace; + + @property() public viewIndex?: number; + + @property() public hass?: HomeAssistant; + + @property() private _config?: LovelaceViewConfig; + + @property() private _badges?: EntityConfig[]; + + @property() private _cards?: LovelaceCardConfig[]; + + @property() private _saving: boolean; + + @property() private _curTab?: string; + private _curTabIndex: number; - private _curTab?: string; - static get properties(): PropertyDeclarations { - return { - hass: {}, - lovelace: {}, - viewIndex: {}, - _config: {}, - _badges: {}, - _cards: {}, - _saving: {}, - _curTab: {}, - }; - } - - protected constructor() { + public constructor() { super(); this._saving = false; this._curTabIndex = 0; @@ -162,7 +159,7 @@ export class HuiEditView extends LitElement { `; } - private async _delete() { + private async _delete(): Promise { if (this._cards && this._cards.length > 0) { alert( "You can't delete a view that has cards in it. Remove the cards first." @@ -321,5 +318,3 @@ declare global { "hui-edit-view": HuiEditView; } } - -customElements.define("hui-edit-view", HuiEditView); 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 5e845aacc5..cea486b521 100644 --- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts +++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts @@ -1,8 +1,9 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, } from "lit-element"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-toggle-button/paper-toggle-button"; @@ -23,10 +24,11 @@ declare global { } } +@customElement("hui-view-editor") export class HuiViewEditor extends LitElement { - static get properties(): PropertyDeclarations { - return { hass: {}, _config: {} }; - } + @property() public hass?: HomeAssistant; + + @property() private _config?: LovelaceViewConfig; get _path(): string { if (!this._config) { @@ -63,9 +65,6 @@ export class HuiViewEditor extends LitElement { return this._config.panel || false; } - public hass?: HomeAssistant; - private _config?: LovelaceViewConfig; - set config(config: LovelaceViewConfig) { this._config = config; } @@ -142,5 +141,3 @@ declare global { "hui-view-editor": HuiViewEditor; } } - -customElements.define("hui-view-editor", HuiViewEditor); diff --git a/src/panels/lovelace/editor/view-editor/show-edit-view-dialog.ts b/src/panels/lovelace/editor/view-editor/show-edit-view-dialog.ts index a3f7748de7..135630644a 100644 --- a/src/panels/lovelace/editor/view-editor/show-edit-view-dialog.ts +++ b/src/panels/lovelace/editor/view-editor/show-edit-view-dialog.ts @@ -22,7 +22,7 @@ export interface EditViewDialogParams { viewIndex?: number; } -const registerEditViewDialog = (element: HTMLElement) => +const registerEditViewDialog = (element: HTMLElement): Event => fireEvent(element, "register-dialog", { dialogShowEvent, dialogTag, @@ -33,7 +33,7 @@ const registerEditViewDialog = (element: HTMLElement) => export const showEditViewDialog = ( element: HTMLElement, editViewDialogParams: EditViewDialogParams -) => { +): void => { if (!registeredDialog) { registeredDialog = true; registerEditViewDialog(element);