diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index abc02ce398..7fadfbf954 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -6,6 +6,7 @@ import { CSSResult, css, property, + customElement, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -39,6 +40,7 @@ export interface Config extends LovelaceCardConfig { states?: string[]; } +@customElement("hui-alarm-panel-card") class HuiAlarmPanelCard extends LitElement implements LovelaceCard { public static async getConfigElement() { await import(/* webpackChunkName: "hui-alarm-panel-card-editor" */ "../editor/config-elements/hui-alarm-panel-card-editor"); @@ -50,7 +52,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { } @property() public hass?: HomeAssistant; + @property() private _config?: Config; + @property() private _code?: string; public getCardSize(): number { @@ -205,98 +209,109 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { this._code = ""; } - static get styles(): CSSResult[] { - return [ - css` - ha-card { - padding-bottom: 16px; - position: relative; - --alarm-color-disarmed: var(--label-badge-green); - --alarm-color-pending: var(--label-badge-yellow); - --alarm-color-triggered: var(--label-badge-red); - --alarm-color-armed: var(--label-badge-red); - --alarm-color-autoarm: rgba(0, 153, 255, 0.1); - --alarm-state-color: var(--alarm-color-armed); - --base-unit: 15px; - font-size: calc(var(--base-unit)); - } - ha-label-badge { + static get styles(): CSSResult { + return css` + ha-card { + padding-bottom: 16px; + position: relative; + --alarm-color-disarmed: var(--label-badge-green); + --alarm-color-pending: var(--label-badge-yellow); + --alarm-color-triggered: var(--label-badge-red); + --alarm-color-armed: var(--label-badge-red); + --alarm-color-autoarm: rgba(0, 153, 255, 0.1); + --alarm-state-color: var(--alarm-color-armed); + --base-unit: 15px; + font-size: calc(var(--base-unit)); + } + + ha-label-badge { + --ha-label-badge-color: var(--alarm-state-color); + --label-badge-text-color: var(--alarm-state-color); + --label-badge-background-color: var(--paper-card-background-color); + color: var(--alarm-state-color); + position: absolute; + right: 12px; + top: 12px; + } + + .disarmed { + --alarm-state-color: var(--alarm-color-disarmed); + } + + .triggered { + --alarm-state-color: var(--alarm-color-triggered); + animation: pulse 1s infinite; + } + + .arming { + --alarm-state-color: var(--alarm-color-pending); + animation: pulse 1s infinite; + } + + .pending { + --alarm-state-color: var(--alarm-color-pending); + animation: pulse 1s infinite; + } + + @keyframes pulse { + 0% { --ha-label-badge-color: var(--alarm-state-color); - --label-badge-text-color: var(--alarm-state-color); - --label-badge-background-color: var(--paper-card-background-color); - color: var(--alarm-state-color); - position: absolute; - right: 12px; - top: 12px; } - .disarmed { - --alarm-state-color: var(--alarm-color-disarmed); + 100% { + --ha-label-badge-color: rgba(255, 153, 0, 0.3); } - .triggered { - --alarm-state-color: var(--alarm-color-triggered); - animation: pulse 1s infinite; - } - .arming { - --alarm-state-color: var(--alarm-color-pending); - animation: pulse 1s infinite; - } - .pending { - --alarm-state-color: var(--alarm-color-pending); - animation: pulse 1s infinite; - } - @keyframes pulse { - 0% { - --ha-label-badge-color: var(--alarm-state-color); - } - 100% { - --ha-label-badge-color: rgba(255, 153, 0, 0.3); - } - } - paper-input { - margin: 0 auto 8px; - max-width: 150px; - font-size: calc(var(--base-unit)); - text-align: center; - } - .state { - margin-left: 16px; - font-size: calc(var(--base-unit) * 0.9); - position: relative; - bottom: 16px; - color: var(--alarm-state-color); - animation: none; - } - #keypad { - display: flex; - justify-content: center; - flex-wrap: wrap; - margin: auto; - width: 300px; - } - #keypad mwc-button { - margin-bottom: 5%; - width: 30%; - padding: calc(var(--base-unit)); - font-size: calc(var(--base-unit) * 1.1); - box-sizing: border-box; - } - .actions { - margin: 0 8px; - padding-top: 20px; - display: flex; - flex-wrap: wrap; - justify-content: center; - font-size: calc(var(--base-unit) * 1); - } - .actions mwc-button { - min-width: calc(var(--base-unit) * 9); - margin: 0 4px; - } - mwc-button#disarm { - color: var(--google-red-500); - } - `, - ]; + } + + paper-input { + margin: 0 auto 8px; + max-width: 150px; + font-size: calc(var(--base-unit)); + text-align: center; + } + + .state { + margin-left: 16px; + font-size: calc(var(--base-unit) * 0.9); + position: relative; + bottom: 16px; + color: var(--alarm-state-color); + animation: none; + } + + #keypad { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin: auto; + width: 300px; + } + + #keypad mwc-button { + margin-bottom: 5%; + width: 30%; + padding: calc(var(--base-unit)); + font-size: calc(var(--base-unit) * 1.1); + box-sizing: border-box; + } + + .actions { + margin: 0 8px; + padding-top: 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; + font-size: calc(var(--base-unit) * 1); + } + + .actions mwc-button { + min-width: calc(var(--base-unit) * 9); + margin: 0 4px; + } + + mwc-button#disarm { + color: var(--google-red-500); + } + `; } } @@ -305,5 +320,3 @@ declare global { "hui-alarm-panel-card": HuiAlarmPanelCard; } } - -customElements.define("hui-alarm-panel-card", HuiAlarmPanelCard); diff --git a/src/panels/lovelace/cards/hui-empty-state-card.ts b/src/panels/lovelace/cards/hui-empty-state-card.ts index 88724cd8f9..ed3553685f 100644 --- a/src/panels/lovelace/cards/hui-empty-state-card.ts +++ b/src/panels/lovelace/cards/hui-empty-state-card.ts @@ -1,10 +1,11 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, CSSResult, css, + customElement, + property, } from "lit-element"; import "@polymer/paper-card/paper-card"; @@ -18,8 +19,9 @@ export interface Config extends LovelaceCardConfig { title?: string; } +@customElement("hui-empty-state-card") export class HuiEmptyStateCard extends LitElement implements LovelaceCard { - public hass?: HomeAssistant; + @property() public hass?: HomeAssistant; public getCardSize(): number { return 2; @@ -29,12 +31,6 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard { // tslint:disable-next-line } - static get properties(): PropertyDeclarations { - return { - hass: {}, - }; - } - protected render(): TemplateResult | void { if (!this.hass) { return html``; @@ -83,5 +79,3 @@ declare global { "hui-empty-state-card": HuiEmptyStateCard; } } - -customElements.define("hui-empty-state-card", HuiEmptyStateCard); diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index eb67189cc1..6b057ab09e 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -1,9 +1,12 @@ import { html, LitElement, - PropertyDeclarations, PropertyValues, TemplateResult, + customElement, + property, + css, + CSSResult, } from "lit-element"; import "../../../components/ha-card"; @@ -36,6 +39,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig { theme?: string; } +@customElement("hui-entities-card") class HuiEntitiesCard extends LitElement implements LovelaceCard { public static async getConfigElement(): Promise { await import(/* webpackChunkName: "hui-entities-card-editor" */ "../editor/config-elements/hui-entities-card-editor"); @@ -46,8 +50,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { return { entities: [] }; } + @property() protected _config?: EntitiesCardConfig; + protected _hass?: HomeAssistant; - protected _config?: EntitiesCardConfig; + protected _configEntities?: EntitiesCardEntityConfig[]; set hass(hass: HomeAssistant) { @@ -65,12 +71,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { } } - static get properties(): PropertyDeclarations { - return { - _config: {}, - }; - } - public getCardSize(): number { if (!this._config) { return 0; @@ -100,7 +100,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { const { show_header_toggle, title } = this._config; return html` - ${this.renderStyle()} ${!title && !show_header_toggle ? html`` @@ -128,38 +127,52 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { `; } - private renderStyle(): TemplateResult { - return html` - + static get styles(): CSSResult { + return css` + ha-card { + padding: 16px; + } + + #states { + margin: -4px 0; + } + + #states > * { + margin: 8px 0; + } + + #states > div > * { + overflow: hidden; + } + + .header { + /* start paper-font-headline style */ + font-family: "Roboto", "Noto", sans-serif; + -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */ + text-rendering: optimizeLegibility; + font-size: 24px; + font-weight: 400; + letter-spacing: -0.012em; + /* end paper-font-headline style */ + + line-height: 40px; + color: var(--primary-text-color); + padding: 4px 0 12px; + display: flex; + justify-content: space-between; + } + + .header .name { + /* start paper-font-common-nowrap style */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + /* end paper-font-common-nowrap */ + } + + .state-card-dialog { + cursor: pointer; + } `; } @@ -192,5 +205,3 @@ declare global { "hui-entities-card": HuiEntitiesCard; } } - -customElements.define("hui-entities-card", HuiEntitiesCard); diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts index 4d7a9cd2bf..16455b2642 100644 --- a/src/panels/lovelace/cards/hui-entity-button-card.ts +++ b/src/panels/lovelace/cards/hui-entity-button-card.ts @@ -1,11 +1,12 @@ import { html, LitElement, - PropertyDeclarations, PropertyValues, TemplateResult, CSSResult, css, + customElement, + property, } from "lit-element"; import { HassEntity } from "home-assistant-js-websocket"; import { styleMap } from "lit-html/directives/style-map"; @@ -34,6 +35,7 @@ export interface Config extends LovelaceCardConfig { hold_action?: ActionConfig; } +@customElement("hui-entity-button-card") class HuiEntityButtonCard extends LitElement implements LovelaceCard { public static async getConfigElement(): Promise { await import(/* webpackChunkName: "hui-entity-button-card-editor" */ "../editor/config-elements/hui-entity-button-card-editor"); @@ -47,15 +49,9 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard { }; } - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; - static get properties(): PropertyDeclarations { - return { - hass: {}, - _config: {}, - }; - } + @property() private _config?: Config; public getCardSize(): number { return 2; @@ -147,11 +143,13 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard { padding: 4% 0; font-size: 1.2rem; } + ha-icon { width: 40%; height: auto; color: var(--paper-item-icon-color, #44739e); } + ha-icon[data-domain="light"][data-state="on"], ha-icon[data-domain="switch"][data-state="on"], ha-icon[data-domain="binary_sensor"][data-state="on"], @@ -159,6 +157,7 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard { ha-icon[data-domain="sun"][data-state="above_horizon"] { color: var(--paper-item-icon-active-color, #fdd835); } + ha-icon[data-state="unavailable"] { color: var(--state-icon-unavailable-color); } @@ -198,5 +197,3 @@ declare global { "hui-entity-button-card": HuiEntityButtonCard; } } - -customElements.define("hui-entity-button-card", HuiEntityButtonCard); diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts index 95d535061b..946f782a79 100644 --- a/src/panels/lovelace/cards/hui-error-card.ts +++ b/src/panels/lovelace/cards/hui-error-card.ts @@ -1,4 +1,12 @@ -import { html, LitElement, TemplateResult } from "lit-element"; +import { + html, + LitElement, + TemplateResult, + customElement, + property, + css, + CSSResult, +} from "lit-element"; import { LovelaceCard } from "../types"; import { LovelaceCardConfig } from "../../../data/lovelace"; @@ -21,15 +29,11 @@ export const createErrorCardConfig = (error, origConfig) => ({ origConfig, }); +@customElement("hui-error-card") export class HuiErrorCard extends LitElement implements LovelaceCard { public hass?: HomeAssistant; - private _config?: Config; - static get properties() { - return { - _config: {}, - }; - } + @property() private _config?: Config; public getCardSize(): number { return 4; @@ -45,22 +49,20 @@ export class HuiErrorCard extends LitElement implements LovelaceCard { } return html` - ${this.renderStyle()} ${this._config.error} + ${this._config.error} 
${this._toStr(this._config.origConfig)}
`; } - private renderStyle(): TemplateResult { - return html` - + static get styles(): CSSResult { + return css` + :host { + display: block; + background-color: #ef5350; + color: white; + padding: 8px; + font-weight: 500; + } `; } @@ -74,5 +76,3 @@ declare global { "hui-error-card": HuiErrorCard; } } - -customElements.define("hui-error-card", HuiErrorCard); diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 020356fc8c..96fcf946fe 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -6,6 +6,7 @@ import { css, CSSResult, property, + customElement, } from "lit-element"; import { styleMap } from "lit-html/directives/style-map"; @@ -45,6 +46,7 @@ export const severityMap = { normal: "var(--label-badge-blue)", }; +@customElement("hui-gauge-card") class HuiGaugeCard extends LitElement implements LovelaceCard { public static async getConfigElement(): Promise { await import(/* webpackChunkName: "hui-gauge-card-editor" */ "../editor/config-elements/hui-gauge-card-editor"); @@ -55,7 +57,9 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { } @property() public hass?: HomeAssistant; + @property() private _config?: Config; + private _updated?: boolean; public getCardSize(): number { @@ -306,5 +310,3 @@ declare global { "hui-gauge-card": HuiGaugeCard; } } - -customElements.define("hui-gauge-card", HuiGaugeCard); diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index 820ca06f48..9b59b980e6 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -2,8 +2,11 @@ import { html, LitElement, PropertyValues, - PropertyDeclarations, TemplateResult, + customElement, + property, + css, + CSSResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -38,6 +41,7 @@ export interface Config extends LovelaceCardConfig { columns?: number; } +@customElement("hui-glance-card") export class HuiGlanceCard extends LitElement implements LovelaceCard { public static async getConfigElement(): Promise { await import(/* webpackChunkName: "hui-glance-card-editor" */ "../editor/config-elements/hui-glance-card-editor"); @@ -47,16 +51,11 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { return { entities: [] }; } - public hass?: HomeAssistant; - private _config?: Config; - private _configEntities?: ConfigEntity[]; + @property() public hass?: HomeAssistant; - static get properties(): PropertyDeclarations { - return { - hass: {}, - _config: {}, - }; - } + @property() private _config?: Config; + + private _configEntities?: ConfigEntity[]; public getCardSize(): number { return ( @@ -120,7 +119,6 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { const { title } = this._config; return html` - ${this.renderStyle()}
${this._configEntities!.map((entityConf) => @@ -143,41 +141,39 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { } } - private renderStyle(): TemplateResult { - return html` - + static get styles(): CSSResult { + return css` + .entities { + display: flex; + padding: 0 16px 4px; + flex-wrap: wrap; + } + .entities.no-header { + padding-top: 16px; + } + .entity { + box-sizing: border-box; + padding: 0 4px; + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; + margin-bottom: 12px; + width: var(--glance-column-width, 20%); + } + .entity div { + width: 100%; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .name { + min-height: var(--paper-font-body1_-_line-height, 20px); + } + state-badge { + margin: 8px 0; + } `; } @@ -248,5 +244,3 @@ declare global { "hui-glance-card": HuiGlanceCard; } } - -customElements.define("hui-glance-card", HuiGlanceCard); diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts index 0f949e6585..e49e149d47 100644 --- a/src/panels/lovelace/cards/hui-iframe-card.ts +++ b/src/panels/lovelace/cards/hui-iframe-card.ts @@ -1,8 +1,11 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, + css, + CSSResult, } from "lit-element"; import "../../../components/ha-card"; @@ -17,6 +20,7 @@ export interface Config extends LovelaceCardConfig { url: string; } +@customElement("hui-iframe-card") export class HuiIframeCard extends LitElement implements LovelaceCard { public static async getConfigElement(): Promise { await import(/* webpackChunkName: "hui-iframe-card-editor" */ "../editor/config-elements/hui-iframe-card-editor"); @@ -26,13 +30,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard { return { url: "https://www.home-assistant.io", aspect_ratio: "50%" }; } - protected _config?: Config; - - static get properties(): PropertyDeclarations { - return { - _config: {}, - }; - } + @property() protected _config?: Config; public getCardSize(): number { if (!this._config) { @@ -60,7 +58,6 @@ export class HuiIframeCard extends LitElement implements LovelaceCard { const aspectRatio = this._config.aspect_ratio || "50%"; return html` - ${this.renderStyle()}
- ha-card { - overflow: hidden; - } - #root { - width: 100%; - position: relative; - } - iframe { - position: absolute; - border: none; - width: 100%; - height: 100%; - top: 0; - left: 0; - } - + static get styles(): CSSResult { + return css` + ha-card { + overflow: hidden; + } + + #root { + width: 100%; + position: relative; + } + + iframe { + position: absolute; + border: none; + width: 100%; + height: 100%; + top: 0; + left: 0; + } `; } } @@ -102,5 +99,3 @@ declare global { "hui-iframe-card": HuiIframeCard; } } - -customElements.define("hui-iframe-card", HuiIframeCard); diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index f43309fe6a..46ed51c616 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -4,6 +4,7 @@ import { PropertyValues, TemplateResult, property, + customElement, } from "lit-element"; import "@polymer/paper-icon-button/paper-icon-button"; @@ -45,6 +46,7 @@ export interface Config extends LovelaceCardConfig { theme?: string; } +@customElement("hui-light-card") export class HuiLightCard extends LitElement implements LovelaceCard { public static async getConfigElement(): Promise { await import(/* webpackChunkName: "hui-light-card-editor" */ "../editor/config-elements/hui-light-card-editor"); @@ -55,9 +57,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard { } @property() public hass?: HomeAssistant; + @property() private _config?: Config; + @property() private _roundSliderStyle?: TemplateResult; + @property() private _jQuery?: any; + private _brightnessTimout?: number; public getCardSize(): number { @@ -183,6 +189,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard { :host { display: block; } + ha-card { position: relative; overflow: hidden; @@ -193,6 +200,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard { --brightness-font-size: 1.2rem; --rail-border-color: transparent; } + #tooltip { position: absolute; top: 0; @@ -202,6 +210,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard { text-align: center; z-index: 15; } + .icon-state { display: block; margin: auto; @@ -209,40 +218,50 @@ export class HuiLightCard extends LitElement implements LovelaceCard { height: 100%; transform: translate(0, 25%); } + #light { margin: 0 auto; padding-top: 16px; padding-bottom: 16px; } + #light .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second { z-index: 20 !important; } + #light .rs-range-color { background-color: var(--primary-color); } + #light .rs-path-color { background-color: var(--disabled-text-color); } + #light .rs-handle { background-color: var(--paper-card-background-color, white); padding: 7px; border: 2px solid var(--disabled-text-color); } + #light .rs-handle.rs-focus { border-color: var(--primary-color); } + #light .rs-handle:after { border-color: var(--primary-color); background-color: var(--primary-color); } + #light .rs-border { border-color: var(--rail-border-color); } + #light .rs-inner.rs-bg-color.rs-border, #light .rs-overlay.rs-transition.rs-bg-color { background-color: var(--paper-card-background-color, white); } + .light-icon { margin: auto; width: 76px; @@ -250,16 +269,20 @@ export class HuiLightCard extends LitElement implements LovelaceCard { color: var(--paper-item-icon-color, #44739e); cursor: pointer; } + .light-icon[data-state="on"] { color: var(--paper-item-icon-active-color, #fdd835); } + .light-icon[data-state="unavailable"] { color: var(--state-icon-unavailable-color); } + .name { padding-top: 40px; font-size: var(--name-font-size); } + .brightness { font-size: var(--brightness-font-size); position: absolute; @@ -276,9 +299,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard { text-shadow: var(--brightness-font-text-shadow); pointer-events: none; } + .show_brightness { opacity: 1; } + .more-info { position: absolute; cursor: pointer; @@ -352,5 +377,3 @@ declare global { "hui-light-card": HuiLightCard; } } - -customElements.define("hui-light-card", HuiLightCard); diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts index 9e9f521867..da62878edd 100644 --- a/src/panels/lovelace/cards/hui-markdown-card.ts +++ b/src/panels/lovelace/cards/hui-markdown-card.ts @@ -1,8 +1,11 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, + css, + CSSResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -17,22 +20,18 @@ export interface Config extends LovelaceCardConfig { title?: string; } +@customElement("hui-markdown-card") export class HuiMarkdownCard extends LitElement implements LovelaceCard { public static async getConfigElement(): Promise { await import(/* webpackChunkName: "hui-markdown-card-editor" */ "../editor/config-elements/hui-markdown-card-editor"); return document.createElement("hui-markdown-card-editor"); } + public static getStubConfig(): object { return { content: " " }; } - private _config?: Config; - - static get properties(): PropertyDeclarations { - return { - _config: {}, - }; - } + @property() private _config?: Config; public getCardSize(): number { return this._config!.content.split("\n").length; @@ -52,7 +51,6 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard { } return html` - ${this.renderStyle()} *:first-child { + margin-top: 0; + } + ha-markdown > *:last-child { + margin-bottom: 0; + } + ha-markdown a { + color: var(--primary-color); + } + ha-markdown img { + max-width: 100%; + } `; } } @@ -102,5 +105,3 @@ declare global { "hui-markdown-card": HuiMarkdownCard; } } - -customElements.define("hui-markdown-card", HuiMarkdownCard); diff --git a/src/panels/lovelace/cards/hui-picture-card.ts b/src/panels/lovelace/cards/hui-picture-card.ts index 9a78b6c8ff..ac2b0128bb 100644 --- a/src/panels/lovelace/cards/hui-picture-card.ts +++ b/src/panels/lovelace/cards/hui-picture-card.ts @@ -1,8 +1,11 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, + css, + CSSResult, } from "lit-element"; import "../../../components/ha-card"; @@ -20,6 +23,7 @@ export interface Config extends LovelaceCardConfig { hold_action?: ActionConfig; } +@customElement("hui-picture-card") export class HuiPictureCard extends LitElement implements LovelaceCard { public static async getConfigElement(): Promise { await import(/* webpackChunkName: "hui-picture-card-editor" */ "../editor/config-elements/hui-picture-card-editor"); @@ -35,11 +39,8 @@ export class HuiPictureCard extends LitElement implements LovelaceCard { } public hass?: HomeAssistant; - protected _config?: Config; - static get properties(): PropertyDeclarations { - return { _config: {} }; - } + @property() protected _config?: Config; public getCardSize(): number { return 3; @@ -59,7 +60,6 @@ export class HuiPictureCard extends LitElement implements LovelaceCard { } return html` - ${this.renderStyle()} - ha-card { - overflow: hidden; - } - ha-card.clickable { - cursor: pointer; - } - img { - display: block; - width: 100%; - } - + static get styles(): CSSResult { + return css` + ha-card { + overflow: hidden; + } + + ha-card.clickable { + cursor: pointer; + } + + img { + display: block; + width: 100%; + } `; } @@ -106,5 +106,3 @@ declare global { "hui-picture-card": HuiPictureCard; } } - -customElements.define("hui-picture-card", HuiPictureCard); diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts index b24196a047..9f4ec65730 100644 --- a/src/panels/lovelace/cards/hui-picture-elements-card.ts +++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts @@ -1,4 +1,12 @@ -import { html, LitElement, TemplateResult } from "lit-element"; +import { + html, + LitElement, + TemplateResult, + property, + customElement, + css, + CSSResult, +} from "lit-element"; import { createStyledHuiElement } from "./picture-elements/create-styled-hui-element"; @@ -17,15 +25,11 @@ interface Config extends LovelaceCardConfig { elements: LovelaceElementConfig[]; } +@customElement("hui-picture-elements-card") class HuiPictureElementsCard extends LitElement implements LovelaceCard { - private _config?: Config; - private _hass?: HomeAssistant; + @property() private _config?: Config; - static get properties() { - return { - _config: {}, - }; - } + private _hass?: HomeAssistant; set hass(hass: HomeAssistant) { this._hass = hass; @@ -60,7 +64,6 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { } return html` - ${this.renderStyle()}
- #root { - position: relative; - } - .element { - position: absolute; - transform: translate(-50%, -50%); - } - ha-card { - overflow: hidden; - } - + static get styles(): CSSResult { + return css` + #root { + position: relative; + } + + .element { + position: absolute; + transform: translate(-50%, -50%); + } + + ha-card { + overflow: hidden; + } `; } } @@ -107,5 +110,3 @@ declare global { "hui-picture-elements-card": HuiPictureElementsCard; } } - -customElements.define("hui-picture-elements-card", HuiPictureElementsCard); diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts index 9fa618a6a0..b13ba4a60a 100644 --- a/src/panels/lovelace/cards/hui-picture-entity-card.ts +++ b/src/panels/lovelace/cards/hui-picture-entity-card.ts @@ -1,8 +1,11 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, + css, + CSSResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -34,16 +37,11 @@ interface Config extends LovelaceCardConfig { show_state?: boolean; } +@customElement("hui-picture-entity-card") class HuiPictureEntityCard extends LitElement implements LovelaceCard { - public hass?: HomeAssistant; - private _config?: Config; + @property() public hass?: HomeAssistant; - static get properties(): PropertyDeclarations { - return { - hass: {}, - _config: {}, - }; - } + @property() private _config?: Config; public getCardSize(): number { return 3; @@ -109,7 +107,6 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard { } return html` - ${this.renderStyle()} - ha-card { - min-height: 75px; - overflow: hidden; - position: relative; - } - hui-image.clickable { - cursor: pointer; - } - .footer { - @apply --paper-font-common-nowrap; - position: absolute; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.3); - padding: 16px; - font-size: 16px; - line-height: 16px; - color: white; - } - .both { - display: flex; - justify-content: space-between; - } - .state { - text-align: right; - } - + static get styles(): CSSResult { + return css` + ha-card { + min-height: 75px; + overflow: hidden; + position: relative; + } + + hui-image.clickable { + cursor: pointer; + } + + .footer { + /* start paper-font-common-nowrap style */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + /* end paper-font-common-nowrap style */ + + position: absolute; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + padding: 16px; + font-size: 16px; + line-height: 16px; + color: white; + } + + .both { + display: flex; + justify-content: space-between; + } + + .state { + text-align: right; + } `; } @@ -180,5 +184,3 @@ declare global { "hui-picture-entity-card": HuiPictureEntityCard; } } - -customElements.define("hui-picture-entity-card", HuiPictureEntityCard); diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 8b5927c47f..17c13ed494 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -1,8 +1,11 @@ import { html, LitElement, - PropertyDeclarations, TemplateResult, + customElement, + property, + css, + CSSResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -39,18 +42,15 @@ interface Config extends LovelaceCardConfig { hold_action?: ActionConfig; } +@customElement("hui-picture-glance-card") class HuiPictureGlanceCard extends LitElement implements LovelaceCard { - public hass?: HomeAssistant; - private _config?: Config; - private _entitiesDialog?: EntityConfig[]; - private _entitiesToggle?: EntityConfig[]; + @property() public hass?: HomeAssistant; - static get properties(): PropertyDeclarations { - return { - hass: {}, - _config: {}, - }; - } + @property() private _config?: Config; + + private _entitiesDialog?: EntityConfig[]; + + private _entitiesToggle?: EntityConfig[]; public getCardSize(): number { return 3; @@ -91,7 +91,6 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { } return html` - ${this.renderStyle()} { await import(/* webpackChunkName: "hui-sensor-card-editor" */ "../editor/config-elements/hui-sensor-card-editor"); @@ -155,18 +159,13 @@ class HuiSensorCard extends LitElement implements LovelaceCard { return {}; } - public hass?: HomeAssistant; - private _config?: Config; - private _history?: any; - private _date?: Date; + @property() public hass?: HomeAssistant; - static get properties(): PropertyDeclarations { - return { - hass: {}, - _config: {}, - _history: {}, - }; - } + @property() private _config?: Config; + + @property() private _history?: any; + + private _date?: Date; public setConfig(config: Config): void { if (!config.entity || config.entity.split(".")[0] !== "sensor") { @@ -244,7 +243,6 @@ class HuiSensorCard extends LitElement implements LovelaceCard { graph = ""; } return html` - ${this.renderStyle()}
@@ -324,87 +322,95 @@ class HuiSensorCard extends LitElement implements LovelaceCard { this._date = new Date(); } - private renderStyle(): TemplateResult { - return html` - + static get styles(): CSSResult { + return css` + :host { + display: flex; + flex-direction: column; + } + + ha-card { + display: flex; + flex-direction: column; + flex: 1; + padding: 16px; + position: relative; + cursor: pointer; + } + + .flex { + display: flex; + } + + .header { + align-items: center; + display: flex; + min-width: 0; + opacity: 0.8; + position: relative; + } + + .name { + display: block; + display: -webkit-box; + font-size: 1.2rem; + font-weight: 500; + max-height: 1.4rem; + margin-top: 2px; + opacity: 0.8; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + word-wrap: break-word; + word-break: break-all; + } + + .icon { + color: var(--paper-item-icon-color, #44739e); + display: inline-block; + flex: 0 0 40px; + line-height: 40px; + position: relative; + text-align: center; + width: 40px; + } + + .info { + flex-wrap: wrap; + margin: 16px 0 16px 8px; + } + + #value { + display: inline-block; + font-size: 2rem; + font-weight: 400; + line-height: 1em; + margin-right: 4px; + } + + #measurement { + align-self: flex-end; + display: inline-block; + font-size: 1.3rem; + line-height: 1.2em; + margin-top: 0.1em; + opacity: 0.6; + vertical-align: bottom; + } + + .graph { + align-self: flex-end; + margin: auto; + margin-bottom: 0px; + position: relative; + width: 100%; + } + + .graph > div { + align-self: flex-end; + margin: auto 8px; + } `; } } @@ -414,5 +420,3 @@ declare global { "hui-sensor-card": HuiSensorCard; } } - -customElements.define("hui-sensor-card", HuiSensorCard); diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts index e98053f36f..7eecc139a7 100644 --- a/src/panels/lovelace/cards/hui-shopping-list-card.ts +++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts @@ -5,6 +5,7 @@ import { css, CSSResult, property, + customElement, } from "lit-element"; import { repeat } from "lit-html/directives/repeat"; import { PaperInputElement } from "@polymer/paper-input/paper-input"; @@ -28,6 +29,7 @@ export interface Config extends LovelaceCardConfig { title?: string; } +@customElement("hui-shopping-list-card") class HuiShoppingListCard extends LitElement implements LovelaceCard { public static async getConfigElement(): Promise { await import(/* webpackChunkName: "hui-shopping-list-editor" */ "../editor/config-elements/hui-shopping-list-editor"); @@ -39,9 +41,13 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard { } @property() public hass?: HomeAssistant; + @property() private _config?: Config; + @property() private _uncheckedItems?: ShoppingListItem[]; + @property() private _checkedItems?: ShoppingListItem[]; + private _unsubEvents?: Promise<() => Promise>; public getCardSize(): number { @@ -178,61 +184,68 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResult[] { - return [ - css` - .editRow, - .addRow { - display: flex; - flex-direction: row; + static get styles(): CSSResult { + return css` + .editRow, + .addRow { + display: flex; + flex-direction: row; + } + + .addButton { + padding: 9px 15px 11px 15px; + cursor: pointer; + } + + paper-item-body { + width: 75%; + } + + paper-checkbox { + padding: 11px 11px 11px 18px; + } + + paper-input { + --paper-input-container-underline: { + display: none; } - .addButton { - padding: 9px 15px 11px 15px; - cursor: pointer; + --paper-input-container-underline-focus: { + display: none; } - paper-item-body { - width: 75%; + --paper-input-container-underline-disabled: { + display: none; } - paper-checkbox { - padding: 11px 11px 11px 18px; - } - paper-input { - --paper-input-container-underline: { - display: none; - } - --paper-input-container-underline-focus: { - display: none; - } - --paper-input-container-underline-disabled: { - display: none; - } - position: relative; - top: 1px; - } - .checked { - margin-left: 17px; - margin-bottom: 11px; - margin-top: 11px; - } - .label { - color: var(--primary-color); - } - .divider { - height: 1px; - background-color: var(--divider-color); - margin: 10px; - } - .clearall { - cursor: pointer; - margin-bottom: 3px; - float: right; - padding-right: 10px; - } - .addRow > ha-icon { - color: var(--secondary-text-color); - } - `, - ]; + position: relative; + top: 1px; + } + + .checked { + margin-left: 17px; + margin-bottom: 11px; + margin-top: 11px; + } + + .label { + color: var(--primary-color); + } + + .divider { + height: 1px; + background-color: var(--divider-color); + margin: 10px; + } + + .clearall { + cursor: pointer; + margin-bottom: 3px; + float: right; + padding-right: 10px; + } + + .addRow > ha-icon { + color: var(--secondary-text-color); + } + `; } private async _fetchData(): Promise { @@ -301,5 +314,3 @@ declare global { "hui-shopping-list-card": HuiShoppingListCard; } } - -customElements.define("hui-shopping-list-card", HuiShoppingListCard); diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index 071f324306..74bec1a21f 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -1,9 +1,10 @@ import { html, LitElement, - PropertyDeclarations, PropertyValues, TemplateResult, + customElement, + property, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; import "@polymer/paper-icon-button/paper-icon-button"; @@ -52,6 +53,7 @@ export interface Config extends LovelaceCardConfig { name?: string; } +@customElement("hui-thermostat-card") export class HuiThermostatCard extends LitElement implements LovelaceCard { public static async getConfigElement(): Promise { await import(/* webpackChunkName: "hui-thermostat-card-editor" */ "../editor/config-elements/hui-thermostat-card-editor"); @@ -62,22 +64,19 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { return { entity: "" }; } - public hass?: HomeAssistant; - private _config?: Config; - private _roundSliderStyle?: TemplateResult; - private _jQuery?: any; - private _broadCard?: boolean; - private _loaded?: boolean; - private _updated?: boolean; + @property() public hass?: HomeAssistant; - static get properties(): PropertyDeclarations { - return { - hass: {}, - _config: {}, - roundSliderStyle: {}, - _jQuery: {}, - }; - } + @property() private _config?: Config; + + @property() private _roundSliderStyle?: TemplateResult; + + @property() private _jQuery?: any; + + private _broadCard?: boolean; + + private _loaded?: boolean; + + private _updated?: boolean; public getCardSize(): number { return 4; @@ -574,5 +573,3 @@ declare global { "hui-thermostat-card": HuiThermostatCard; } } - -customElements.define("hui-thermostat-card", HuiThermostatCard);