Home-Assistant
/
frontend
mirror of https://github.com/home-assistant/frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add and fix stylistic eslint rules (#23735) 

* Fix stylistic eslint rules

* Fix eslint issues
pull/23737/head^2
Wendelin 2025-01-14 21:00:14 +01:00 committed by GitHub
parent 69a93ddb6e
commit e703750136
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
582 changed files with 12485 additions and 13451 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
cast/src/launcher/layout/hc-cast.ts
View File

@ -3,7 +3,7 @@ import "@material/mwc-list/mwc-list";
import type { ActionDetail } from "@material/mwc-list/mwc-list"; import type { ActionDetail } from "@material/mwc-list/mwc-list";
import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js"; import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
import type { Auth, Connection } from "home-assistant-js-websocket"; import type { Auth, Connection } from "home-assistant-js-websocket";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { LitElement, css, html } from "lit"; import { LitElement, css, html } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import type { CastManager } from "../../../../src/cast/cast_manager"; import type { CastManager } from "../../../../src/cast/cast_manager";
@ -208,69 +208,67 @@ class HcCast extends LitElement {
} }
} }
static get styles(): CSSResultGroup { static styles = css`
return css` .center-item {
.center-item { display: flex;
display: flex; justify-content: space-around;
justify-content: space-around; }
}
.action-item { .action-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.question { .question {
position: relative; position: relative;
padding: 8px 16px; padding: 8px 16px;
} }
.question:before { .question:before {
border-radius: 4px; border-radius: 4px;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
pointer-events: none; pointer-events: none;
content: ""; content: "";
background-color: var(--primary-color); background-color: var(--primary-color);
opacity: 0.12; opacity: 0.12;
will-change: opacity; will-change: opacity;
} }
.connection, .connection,
.connection a { .connection a {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
mwc-button ha-svg-icon { mwc-button ha-svg-icon {
margin-right: 8px; margin-right: 8px;
margin-inline-end: 8px; margin-inline-end: 8px;
margin-inline-start: initial; margin-inline-start: initial;
height: 18px; height: 18px;
} }
ha-list-item ha-icon, ha-list-item ha-icon,
ha-list-item ha-svg-icon { ha-list-item ha-svg-icon {
padding: 12px; padding: 12px;
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
:host([hide-icons]) ha-icon { :host([hide-icons]) ha-icon {
display: none; display: none;
} }
.spacer { .spacer {
flex: 1; flex: 1;
} }
.card-content a { .card-content a {
color: var(--primary-color); color: var(--primary-color);
} }
`; `;
}
} }
declare global { declare global {

52
cast/src/launcher/layout/hc-connect.ts
View File

@ -13,7 +13,7 @@ import {
ERR_INVALID_HTTPS_TO_HTTP, ERR_INVALID_HTTPS_TO_HTTP,
getAuth, getAuth,
} from "home-assistant-js-websocket"; } from "home-assistant-js-websocket";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import type { CastManager } from "../../../../src/cast/cast_manager"; import type { CastManager } from "../../../../src/cast/cast_manager";
@ -293,36 +293,34 @@ export class HcConnect extends LitElement {
} }
} }
static get styles(): CSSResultGroup { static styles = css`
return css` .card-content a {
.card-content a { color: var(--primary-color);
color: var(--primary-color); }
} .card-actions a {
.card-actions a { text-decoration: none;
text-decoration: none; }
} .error {
.error { color: red;
color: red; font-weight: bold;
font-weight: bold; }
}
.error a { .error a {
color: darkred; color: darkred;
} }
mwc-button ha-svg-icon { mwc-button ha-svg-icon {
margin-left: 8px; margin-left: 8px;
} }
.spacer { .spacer {
flex: 1; flex: 1;
} }
ha-textfield { ha-textfield {
width: 100%; width: 100%;
} }
`; `;
}
} }
declare global { declare global {

176
cast/src/launcher/layout/hc-layout.ts
View File

@ -1,6 +1,6 @@
import type { Auth, Connection, HassUser } from "home-assistant-js-websocket"; import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
import { getUser } from "home-assistant-js-websocket"; import { getUser } from "home-assistant-js-websocket";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import "../../../../src/components/ha-card"; import "../../../../src/components/ha-card";
@ -63,96 +63,94 @@ class HcLayout extends LitElement {
} }
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
display: flex;
min-height: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
}
ha-card {
display: flex;
width: 100%;
max-width: 500px;
}
.layout {
display: flex;
flex-direction: column;
}
.card-header {
color: var(--ha-card-header-color, var(--primary-text-color));
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
letter-spacing: -0.012em;
line-height: 32px;
padding: 24px 16px 16px;
display: block;
margin: 0;
}
.hero {
border-radius: 4px 4px 0 0;
}
.subtitle {
font-size: 14px;
color: var(--secondary-text-color);
line-height: initial;
}
.subtitle a {
color: var(--secondary-text-color);
}
:host ::slotted(.card-content:not(:first-child)),
slot:not(:first-child)::slotted(.card-content) {
padding-top: 0px;
margin-top: -8px;
}
:host ::slotted(.section-header) {
font-weight: 500;
padding: 4px 16px;
text-transform: uppercase;
}
:host ::slotted(.card-content) {
padding: 16px;
flex: 1;
}
:host ::slotted(.card-actions) {
border-top: 1px solid #e8e8e8;
padding: 5px 16px;
display: flex;
}
img {
width: 100%;
}
.footer {
text-align: center;
font-size: 12px;
padding: 8px 0 24px;
color: var(--secondary-text-color);
}
.footer a {
color: var(--secondary-text-color);
}
@media all and (max-width: 500px) {
:host { :host {
display: flex; justify-content: flex-start;
min-height: 100%; min-height: 90%;
align-items: center; margin-bottom: 30px;
justify-content: center;
flex-direction: column;
} }
}
ha-card { `;
display: flex;
width: 100%;
max-width: 500px;
}
.layout {
display: flex;
flex-direction: column;
}
.card-header {
color: var(--ha-card-header-color, var(--primary-text-color));
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
letter-spacing: -0.012em;
line-height: 32px;
padding: 24px 16px 16px;
display: block;
margin: 0;
}
.hero {
border-radius: 4px 4px 0 0;
}
.subtitle {
font-size: 14px;
color: var(--secondary-text-color);
line-height: initial;
}
.subtitle a {
color: var(--secondary-text-color);
}
:host ::slotted(.card-content:not(:first-child)),
slot:not(:first-child)::slotted(.card-content) {
padding-top: 0px;
margin-top: -8px;
}
:host ::slotted(.section-header) {
font-weight: 500;
padding: 4px 16px;
text-transform: uppercase;
}
:host ::slotted(.card-content) {
padding: 16px;
flex: 1;
}
:host ::slotted(.card-actions) {
border-top: 1px solid #e8e8e8;
padding: 5px 16px;
display: flex;
}
img {
width: 100%;
}
.footer {
text-align: center;
font-size: 12px;
padding: 8px 0 24px;
color: var(--secondary-text-color);
}
.footer a {
color: var(--secondary-text-color);
}
@media all and (max-width: 500px) {
:host {
justify-content: flex-start;
min-height: 90%;
margin-bottom: 30px;
}
}
`;
}
} }
declare global { declare global {

50
cast/src/receiver/layout/hc-launch-screen.ts
View File

@ -1,4 +1,4 @@
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import type { HomeAssistant } from "../../../../src/types"; import type { HomeAssistant } from "../../../../src/types";
@ -24,31 +24,29 @@ class HcLaunchScreen extends LitElement {
`; `;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { display: block;
display: block; height: 100vh;
height: 100vh; background-color: #f2f4f9;
background-color: #f2f4f9; font-size: 24px;
font-size: 24px; }
} .container {
.container { display: flex;
display: flex; flex-direction: column;
flex-direction: column; text-align: center;
text-align: center; align-items: center;
align-items: center; height: 100%;
height: 100%; justify-content: space-evenly;
justify-content: space-evenly; }
} img {
img { max-width: 80%;
max-width: 80%; object-fit: cover;
object-fit: cover; }
} .status {
.status { color: #1d2126;
color: #1d2126; }
} `;
`;
}
} }
declare global { declare global {

34
cast/src/receiver/layout/hc-lovelace.ts
View File

@ -1,10 +1,4 @@
import { import { css, html, LitElement, type TemplateResult } from "lit";
css,
type CSSResultGroup,
html,
LitElement,
type TemplateResult,
} from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../src/common/dom/fire_event"; import { fireEvent } from "../../../../src/common/dom/fire_event";
import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types"; import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
@ -117,20 +111,18 @@ class HcLovelace extends LitElement {
return undefined; return undefined;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` hui-view-container {
hui-view-container { display: flex;
display: flex; position: relative;
position: relative; min-height: 100vh;
min-height: 100vh; box-sizing: border-box;
box-sizing: border-box; }
} hui-view {
hui-view { flex: 1 1 100%;
flex: 1 1 100%; max-width: 100%;
max-width: 100%; }
} `;
`;
}
} }
export interface CastViewChanged { export interface CastViewChanged {

2
demo/src/configs/demo-configs.ts
View File

@ -3,7 +3,7 @@ import type { Lovelace } from "../../../src/panels/lovelace/types";
import { energyEntities } from "../stubs/entities"; import { energyEntities } from "../stubs/entities";
import type { DemoConfig } from "./types"; import type { DemoConfig } from "./types";
export const demoConfigs: Array<() => Promise<DemoConfig>> = [ export const demoConfigs: (() => Promise<DemoConfig>)[] = [
() => import("./sections").then((mod) => mod.demoSections), () => import("./sections").then((mod) => mod.demoSections),
() => import("./arsaboo").then((mod) => mod.demoArsaboo), () => import("./arsaboo").then((mod) => mod.demoArsaboo),
() => import("./teachingbirds").then((mod) => mod.demoTeachingbirds), () => import("./teachingbirds").then((mod) => mod.demoTeachingbirds),

61
demo/src/custom-cards/cast-demo-row.ts
View File

@ -1,5 +1,4 @@
import { mdiTelevision } from "@mdi/js"; import { mdiTelevision } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import type { CastManager } from "../../../src/cast/cast_manager"; import type { CastManager } from "../../../src/cast/cast_manager";
@ -67,37 +66,35 @@ class CastDemoRow extends LitElement implements LovelaceRow {
this.style.display = this._castManager ? "" : "none"; this.style.display = this._castManager ? "" : "none";
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { display: flex;
display: flex; align-items: center;
align-items: center; }
} ha-svg-icon {
ha-svg-icon { padding: 8px;
padding: 8px; color: var(--paper-item-icon-color);
color: var(--paper-item-icon-color); }
} .flex {
.flex { flex: 1;
flex: 1; overflow: hidden;
overflow: hidden; margin-left: 16px;
margin-left: 16px; display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; align-items: center;
align-items: center; }
} .name {
.name { white-space: nowrap;
white-space: nowrap; overflow: hidden;
overflow: hidden; text-overflow: ellipsis;
text-overflow: ellipsis; }
} google-cast-launcher {
google-cast-launcher { cursor: pointer;
cursor: pointer; display: inline-block;
display: inline-block; height: 24px;
height: 24px; width: 24px;
width: 24px; }
} `;
`;
}
} }
declare global { declare global {

1
demo/src/custom-cards/ha-demo-card.ts
View File

@ -32,6 +32,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
return this._hidden ? 0 : 2; return this._hidden ? 0 : 2;
} }
// eslint-disable-next-line @typescript-eslint/no-empty-function
public setConfig(_config: LovelaceCardConfig) {} public setConfig(_config: LovelaceCardConfig) {}
protected render() { protected render() {

1
demo/src/stubs/history.ts
View File

@ -131,6 +131,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
}); });
}, 1); }, 1);
// eslint-disable-next-line @typescript-eslint/no-empty-function
return () => {}; return () => {};
} }
); );

1
demo/src/stubs/persistent_notification.ts
View File

@ -15,6 +15,7 @@ export const mockPersistentNotification = (hass: MockHomeAssistant) => {
}, },
}, },
} as PersistentNotificationMessage); } as PersistentNotificationMessage);
// eslint-disable-next-line @typescript-eslint/no-empty-function
return () => {}; return () => {};
}); });
}; };

1
demo/src/stubs/template.ts
View File

@ -11,6 +11,7 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
result: msg.template, result: msg.template,
listeners: { all: false, domains: [], entities: [], time: false }, listeners: { all: false, domains: [], entities: [], time: false },
}); });
// eslint-disable-next-line @typescript-eslint/no-empty-function
return () => {}; return () => {};
}); });
}; };

1
demo/src/stubs/todo.ts
View File

@ -22,5 +22,6 @@ export const mockTodo = (hass: MockHomeAssistant) => {
}, },
] as TodoItem[], ] as TodoItem[],
})); }));
// eslint-disable-next-line @typescript-eslint/no-empty-function
hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {}); hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {});
}; };

1
eslint.config.mjs
View File

@ -20,6 +20,7 @@ export default [
"airbnb-base", "airbnb-base",
"plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/strict", "plugin:@typescript-eslint/strict",
"plugin:@typescript-eslint/stylistic",
"plugin:wc/recommended", "plugin:wc/recommended",
"plugin:lit/all", "plugin:lit/all",
"plugin:lit-a11y/recommended", "plugin:lit-a11y/recommended",

38
gallery/src/pages/automation/describe-action.ts
View File

@ -177,26 +177,24 @@ export class DemoAutomationDescribeAction extends LitElement {
this._action = ev.detail.isValid ? ev.detail.value : undefined; this._action = ev.detail.isValid ? ev.detail.value : undefined;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} .action {
.action { padding: 16px;
padding: 16px; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-between;
justify-content: space-between; }
} span {
span { margin-right: 16px;
margin-right: 16px; }
} ha-yaml-editor {
ha-yaml-editor { width: 50%;
width: 50%; }
} `;
`;
}
} }
declare global { declare global {

38
gallery/src/pages/automation/describe-condition.ts
View File

@ -98,26 +98,24 @@ export class DemoAutomationDescribeCondition extends LitElement {
this._condition = ev.detail.isValid ? ev.detail.value : undefined; this._condition = ev.detail.isValid ? ev.detail.value : undefined;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} .condition {
.condition { padding: 16px;
padding: 16px; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-between;
justify-content: space-between; }
} span {
span { margin-right: 16px;
margin-right: 16px; }
} ha-yaml-editor {
ha-yaml-editor { width: 50%;
width: 50%; }
} `;
`;
}
} }
declare global { declare global {

38
gallery/src/pages/automation/describe-trigger.ts
View File

@ -121,26 +121,24 @@ export class DemoAutomationDescribeTrigger extends LitElement {
this._trigger = ev.detail.isValid ? ev.detail.value : undefined; this._trigger = ev.detail.isValid ? ev.detail.value : undefined;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} .trigger {
.trigger { padding: 16px;
padding: 16px; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-between;
justify-content: space-between; }
} span {
span { margin-right: 16px;
margin-right: 16px; }
} ha-yaml-editor {
ha-yaml-editor { width: 50%;
width: 50%; }
} `;
`;
}
} }
declare global { declare global {

30
gallery/src/pages/automation/trace-timeline.ts
View File

@ -58,22 +58,20 @@ export class DemoAutomationTraceTimeline extends LitElement {
hass.updateTranslations("config", "en"); hass.updateTranslations("config", "en");
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px;
margin: 24px; }
} .card-content {
.card-content { display: flex;
display: flex; }
} button {
button { position: absolute;
position: absolute; top: 0;
top: 0; right: 0;
right: 0; }
} `;
`;
}
} }
declare global { declare global {

42
gallery/src/pages/automation/trace.ts
View File

@ -68,28 +68,26 @@ export class DemoAutomationTrace extends LitElement {
this._selected = { ...this._selected, [sampleIdx]: ev.detail.path }; this._selected = { ...this._selected, [sampleIdx]: ev.detail.path };
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px;
margin: 24px; }
} .card-content {
.card-content { display: flex;
display: flex; }
} .card-content > * {
.card-content > * { margin-right: 16px;
margin-right: 16px; }
} .card-content > *:last-child {
.card-content > *:last-child { margin-right: 0;
margin-right: 0; }
} button {
button { position: absolute;
position: absolute; top: 0;
top: 0; right: 0;
right: 0; }
} `;
`;
}
} }
declare global { declare global {

78
gallery/src/pages/components/ha-alert.ts
View File

@ -177,46 +177,44 @@ export class DemoHaAlert extends LitElement {
); );
} }
static get styles() { static styles = css`
return css` :host {
:host { display: flex;
display: flex; flex-direction: row;
flex-direction: row; justify-content: space-between;
justify-content: space-between; }
} .dark,
.dark, .light {
.light { display: block;
display: block; background-color: var(--primary-background-color);
background-color: var(--primary-background-color); padding: 0 50px;
padding: 0 50px; }
} ha-card {
ha-card { margin: 24px auto;
margin: 24px auto; }
} ha-alert {
ha-alert { display: block;
display: block; margin: 24px 0;
margin: 24px 0; }
} .condition {
.condition { padding: 16px;
padding: 16px; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-between;
justify-content: space-between; }
} .image {
.image { display: inline-flex;
display: inline-flex; height: 100%;
height: 100%; align-items: center;
align-items: center; }
} img {
img { max-height: 24px;
max-height: 24px; width: 24px;
width: 24px; }
} mwc-button {
mwc-button { --mdc-theme-primary: var(--primary-text-color);
--mdc-theme-primary: var(--primary-text-color); }
} `;
`;
}
} }
declare global { declare global {

26
gallery/src/pages/components/ha-bar.ts
View File

@ -63,20 +63,18 @@ export class DemoHaBar extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} .warning {
.warning { --ha-bar-primary-color: var(--warning-color);
--ha-bar-primary-color: var(--warning-color); }
} .error {
.error { --ha-bar-primary-color: var(--error-color);
--ha-bar-primary-color: var(--error-color); }
} `;
`;
}
} }
declare global { declare global {

24
gallery/src/pages/components/ha-chips.ts
View File

@ -103,19 +103,17 @@ export class DemoHaChips extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} .card-content {
.card-content { display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: flex-start;
align-items: flex-start; }
} `;
`;
}
} }
declare global { declare global {

14
gallery/src/pages/components/ha-circular-progress.ts
View File

@ -48,14 +48,12 @@ export class DemoHaCircularProgress extends LitElement {
></ha-card>`; ></ha-card>`;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} `;
`;
}
} }
declare global { declare global {

100
gallery/src/pages/components/ha-control-button.ts
View File

@ -14,12 +14,12 @@ import "../../../../src/components/ha-card";
import "../../../../src/components/ha-svg-icon"; import "../../../../src/components/ha-svg-icon";
import "../../../../src/components/ha-control-button-group"; import "../../../../src/components/ha-control-button-group";
type Button = { interface Button {
label: string; label: string;
icon?: string; icon?: string;
class?: string; class?: string;
disabled?: boolean; disabled?: boolean;
}; }
const buttons: Button[] = [ const buttons: Button[] = [
{ {
@ -35,10 +35,10 @@ const buttons: Button[] = [
}, },
]; ];
type ButtonGroup = { interface ButtonGroup {
vertical?: boolean; vertical?: boolean;
class?: string; class?: string;
}; }
const buttonGroups: ButtonGroup[] = [ const buttonGroups: ButtonGroup[] = [
{}, {},
@ -137,53 +137,51 @@ export class DemoHaBarButton extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} pre {
pre { margin-top: 0;
margin-top: 0; margin-bottom: 8px;
margin-bottom: 8px; }
} p {
p { margin: 0;
margin: 0; }
} label {
label { font-weight: 600;
font-weight: 600; }
} .custom {
.custom { --control-button-icon-color: var(--primary-color);
--control-button-icon-color: var(--primary-color); --control-button-background-color: var(--primary-color);
--control-button-background-color: var(--primary-color); --control-button-background-opacity: 0.2;
--control-button-background-opacity: 0.2; --control-button-border-radius: 18px;
--control-button-border-radius: 18px; height: 100px;
height: 100px; width: 100px;
width: 100px; }
} .custom-group {
.custom-group { --control-button-group-thickness: 100px;
--control-button-group-thickness: 100px; --control-button-group-border-radius: 36px;
--control-button-group-border-radius: 36px; --control-button-group-spacing: 20px;
--control-button-group-spacing: 20px; }
} .custom-group ha-control-button {
.custom-group ha-control-button { --control-button-border-radius: 18px;
--control-button-border-radius: 18px; --mdc-icon-size: 32px;
--mdc-icon-size: 32px; }
} .vertical-buttons {
.vertical-buttons { height: 300px;
height: 300px; display: flex;
display: flex; flex-direction: row;
flex-direction: row; justify-content: space-between;
justify-content: space-between; }
} p.title {
p.title { margin-bottom: 12px;
margin-bottom: 12px; }
} .vertical-switches > *:not(:last-child) {
.vertical-switches > *:not(:last-child) { margin-right: 4px;
margin-right: 4px; }
} `;
`;
}
} }
declare global { declare global {

64
gallery/src/pages/components/ha-control-circular-slider.ts
View File

@ -133,39 +133,37 @@ export class DemoHaCircularSlider extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} pre {
pre { margin-top: 0;
margin-top: 0; margin-bottom: 8px;
margin-bottom: 8px; }
} p {
p { margin: 0;
margin: 0; }
} p.title {
p.title { margin-bottom: 12px;
margin-bottom: 12px; }
} ha-control-circular-slider {
ha-control-circular-slider { --control-circular-slider-color: #ff9800;
--control-circular-slider-color: #ff9800; }
} ha-control-circular-slider[inverted] {
ha-control-circular-slider[inverted] { --control-circular-slider-color: #2196f3;
--control-circular-slider-color: #2196f3; }
} ha-control-circular-slider[dual] {
ha-control-circular-slider[dual] { --control-circular-slider-high-color: #2196f3;
--control-circular-slider-high-color: #2196f3; --control-circular-slider-low-color: #ff9800;
--control-circular-slider-low-color: #ff9800; }
} .field {
.field { display: flex;
display: flex; flex-direction: row;
flex-direction: row; align-items: center;
align-items: center; }
} `;
`;
}
} }
declare global { declare global {

50
gallery/src/pages/components/ha-control-number-buttons.ts
View File

@ -73,32 +73,30 @@ export class DemoHarControlNumberButtons extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} pre {
pre { margin-top: 0;
margin-top: 0; margin-bottom: 8px;
margin-bottom: 8px; }
} p {
p { margin: 0;
margin: 0; }
} label {
label { font-weight: 600;
font-weight: 600; }
} .custom {
.custom { color: #2196f3;
color: #2196f3; --control-number-buttons-color: #2196f3;
--control-number-buttons-color: #2196f3; --control-number-buttons-background-color: #2196f3;
--control-number-buttons-background-color: #2196f3; --control-number-buttons-background-opacity: 0.1;
--control-number-buttons-background-opacity: 0.1; --control-number-buttons-thickness: 100px;
--control-number-buttons-thickness: 100px; --control-number-buttons-border-radius: 36px;
--control-number-buttons-border-radius: 36px; }
} `;
`;
}
} }
declare global { declare global {

58
gallery/src/pages/components/ha-control-select-menu.ts
View File

@ -8,19 +8,19 @@ import "../../../../src/components/ha-control-select-menu";
import "../../../../src/components/ha-list-item"; import "../../../../src/components/ha-list-item";
import "../../../../src/components/ha-svg-icon"; import "../../../../src/components/ha-svg-icon";
type SelectMenuOptions = { interface SelectMenuOptions {
label: string; label: string;
value: string; value: string;
icon?: string; icon?: string;
}; }
type SelectMenu = { interface SelectMenu {
label: string; label: string;
icon: string; icon: string;
class?: string; class?: string;
disabled?: boolean; disabled?: boolean;
options: SelectMenuOptions[]; options: SelectMenuOptions[];
}; }
const selects: SelectMenu[] = [ const selects: SelectMenu[] = [
{ {
@ -112,32 +112,30 @@ export class DemoHaControlSelectMenu extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} pre {
pre { margin-top: 0;
margin-top: 0; margin-bottom: 8px;
margin-bottom: 8px; }
} p {
p { margin: 0;
margin: 0; }
} label {
label { font-weight: 600;
font-weight: 600; }
} .custom {
.custom { --control-button-icon-color: var(--primary-color);
--control-button-icon-color: var(--primary-color); --control-button-background-color: var(--primary-color);
--control-button-background-color: var(--primary-color); --control-button-background-opacity: 0.2;
--control-button-background-opacity: 0.2; --control-button-border-radius: 18px;
--control-button-border-radius: 18px; height: 100px;
height: 100px; width: 100px;
width: 100px; }
} `;
`;
}
} }
declare global { declare global {

70
gallery/src/pages/components/ha-control-select.ts
View File

@ -168,42 +168,40 @@ export class DemoHaControlSelect extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} pre {
pre { margin-top: 0;
margin-top: 0; margin-bottom: 8px;
margin-bottom: 8px; }
} p {
p { margin: 0;
margin: 0; }
} label {
label { font-weight: 600;
font-weight: 600; }
} .custom {
.custom { --mdc-icon-size: 24px;
--mdc-icon-size: 24px; --control-select-color: var(--state-fan-active-color);
--control-select-color: var(--state-fan-active-color); --control-select-thickness: 130px;
--control-select-thickness: 130px; --control-select-border-radius: 36px;
--control-select-border-radius: 36px; }
} .vertical-selects {
.vertical-selects { height: 300px;
height: 300px; display: flex;
display: flex; flex-direction: row;
flex-direction: row; justify-content: space-between;
justify-content: space-between; }
} p.title {
p.title { margin-bottom: 12px;
margin-bottom: 12px; }
} .vertical-selects > *:not(:last-child) {
.vertical-selects > *:not(:last-child) { margin-right: 4px;
margin-right: 4px; }
} `;
`;
}
} }
declare global { declare global {

72
gallery/src/pages/components/ha-control-slider.ts
View File

@ -131,43 +131,41 @@ export class DemoHaBarSlider extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} pre {
pre { margin-top: 0;
margin-top: 0; margin-bottom: 8px;
margin-bottom: 8px; }
} p {
p { margin: 0;
margin: 0; }
} label {
label { font-weight: 600;
font-weight: 600; }
} .custom {
.custom { --control-slider-color: #ffcf4c;
--control-slider-color: #ffcf4c; --control-slider-background: #ffcf4c;
--control-slider-background: #ffcf4c; --control-slider-background-opacity: 0.2;
--control-slider-background-opacity: 0.2; --control-slider-thickness: 130px;
--control-slider-thickness: 130px; --control-slider-border-radius: 36px;
--control-slider-border-radius: 36px; }
} .vertical-sliders {
.vertical-sliders { height: 300px;
height: 300px; display: flex;
display: flex; flex-direction: row;
flex-direction: row; justify-content: space-between;
justify-content: space-between; }
} p.title {
p.title { margin-bottom: 12px;
margin-bottom: 12px; }
} .vertical-sliders > *:not(:last-child) {
.vertical-sliders > *:not(:last-child) { margin-right: 4px;
margin-right: 4px; }
} `;
`;
}
} }
declare global { declare global {

74
gallery/src/pages/components/ha-control-switch.ts
View File

@ -99,44 +99,42 @@ export class DemoHaControlSwitch extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} pre {
pre { margin-top: 0;
margin-top: 0; margin-bottom: 8px;
margin-bottom: 8px; }
} p {
p { margin: 0;
margin: 0; }
} label {
label { font-weight: 600;
font-weight: 600; }
} .custom {
.custom { --control-switch-on-color: var(--green-color);
--control-switch-on-color: var(--green-color); --control-switch-off-color: var(--red-color);
--control-switch-off-color: var(--red-color); --control-switch-thickness: 130px;
--control-switch-thickness: 130px; --control-switch-border-radius: 36px;
--control-switch-border-radius: 36px; --control-switch-padding: 6px;
--control-switch-padding: 6px; --mdc-icon-size: 24px;
--mdc-icon-size: 24px; }
} .vertical-switches {
.vertical-switches { height: 300px;
height: 300px; display: flex;
display: flex; flex-direction: row;
flex-direction: row; justify-content: space-between;
justify-content: space-between; }
} p.title {
p.title { margin-bottom: 12px;
margin-bottom: 12px; }
} .vertical-switches > *:not(:last-child) {
.vertical-switches > *:not(:last-child) { margin-right: 4px;
margin-right: 4px; }
} `;
`;
}
} }
declare global { declare global {

12
gallery/src/pages/components/ha-expansion-panel.ts
View File

@ -143,13 +143,11 @@ export class DemoHaExpansionPanel extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-expansion-panel {
ha-expansion-panel { margin: -16px;
margin: -16px; }
} `;
`;
}
} }
declare global { declare global {

14
gallery/src/pages/components/ha-faded.ts
View File

@ -61,14 +61,12 @@ export class DemoHaFaded extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} `;
`;
}
} }
declare global { declare global {

40
gallery/src/pages/components/ha-hs-color-picker.ts
View File

@ -91,27 +91,25 @@ export class DemoHaHsColorPicker extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} .card-content {
.card-content { display: flex;
display: flex; align-items: center;
align-items: center; flex-direction: column;
flex-direction: column; }
} ha-hs-color-picker {
ha-hs-color-picker { width: 400px;
width: 400px; }
} .value {
.value { font-size: 22px;
font-size: 22px; font-weight: bold;
font-weight: bold; margin: 0 0 12px 0;
margin: 0 0 12px 0; }
} `;
`;
}
} }
declare global { declare global {

36
gallery/src/pages/components/ha-label-badge.ts
View File

@ -95,25 +95,23 @@ export class DemoHaLabelBadge extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { max-width: 600px;
max-width: 600px; margin: 24px auto;
margin: 24px auto; }
} pre {
pre { margin-left: 16px;
margin-left: 16px; background-color: var(--markdown-code-background-color);
background-color: var(--markdown-code-background-color); padding: 8px;
padding: 8px; }
} .badge {
.badge { display: flex;
display: flex; flex-direction: row;
flex-direction: row; margin-bottom: 16px;
margin-bottom: 16px; align-items: center;
align-items: center; }
} `;
`;
}
} }
declare global { declare global {

40
gallery/src/pages/components/ha-tip.ts
View File

@ -48,27 +48,25 @@ export class DemoHaTip extends LitElement {
); );
} }
static get styles() { static styles = css`
return css` :host {
:host { display: flex;
display: flex; flex-direction: row;
flex-direction: row; justify-content: space-between;
justify-content: space-between; }
} .dark,
.dark, .light {
.light { display: block;
display: block; background-color: var(--primary-background-color);
background-color: var(--primary-background-color); padding: 0 50px;
padding: 0 50px; }
} ha-tip {
ha-tip { margin-bottom: 14px;
margin-bottom: 14px; }
} ha-card {
ha-card { margin: 24px auto;
margin: 24px auto; }
} `;
`;
}
} }
declare global { declare global {

48
gallery/src/pages/date-time/date-time-numeric.ts
View File

@ -100,32 +100,30 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-control-select {
ha-control-select { max-width: 800px;
max-width: 800px; margin: 12px auto;
margin: 12px auto; }
} .header {
.header { font-weight: bold;
font-weight: bold; }
} .center {
.center { text-align: center;
text-align: center; }
} .container {
.container { max-width: 900px;
max-width: 900px; margin: 12px auto;
margin: 12px auto; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-evenly;
justify-content: space-evenly; }
}
.container > div { .container > div {
flex-grow: 1; flex-grow: 1;
width: 20%; width: 20%;
} }
`; `;
}
} }
declare global { declare global {

48
gallery/src/pages/date-time/date-time-seconds.ts
View File

@ -100,32 +100,30 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-control-select {
ha-control-select { max-width: 800px;
max-width: 800px; margin: 12px auto;
margin: 12px auto; }
} .header {
.header { font-weight: bold;
font-weight: bold; }
} .center {
.center { text-align: center;
text-align: center; }
} .container {
.container { max-width: 900px;
max-width: 900px; margin: 12px auto;
margin: 12px auto; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-evenly;
justify-content: space-evenly; }
}
.container > div { .container > div {
flex-grow: 1; flex-grow: 1;
width: 20%; width: 20%;
} }
`; `;
}
} }
declare global { declare global {

48
gallery/src/pages/date-time/date-time-short-year.ts
View File

@ -100,32 +100,30 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-control-select {
ha-control-select { max-width: 800px;
max-width: 800px; margin: 12px auto;
margin: 12px auto; }
} .header {
.header { font-weight: bold;
font-weight: bold; }
} .center {
.center { text-align: center;
text-align: center; }
} .container {
.container { max-width: 900px;
max-width: 900px; margin: 12px auto;
margin: 12px auto; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-evenly;
justify-content: space-evenly; }
}
.container > div { .container > div {
flex-grow: 1; flex-grow: 1;
width: 20%; width: 20%;
} }
`; `;
}
} }
declare global { declare global {

48
gallery/src/pages/date-time/date-time-short.ts
View File

@ -100,32 +100,30 @@ export class DemoDateTimeDateTimeShort extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-control-select {
ha-control-select { max-width: 800px;
max-width: 800px; margin: 12px auto;
margin: 12px auto; }
} .header {
.header { font-weight: bold;
font-weight: bold; }
} .center {
.center { text-align: center;
text-align: center; }
} .container {
.container { max-width: 900px;
max-width: 900px; margin: 12px auto;
margin: 12px auto; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-evenly;
justify-content: space-evenly; }
}
.container > div { .container > div {
flex-grow: 1; flex-grow: 1;
width: 20%; width: 20%;
} }
`; `;
}
} }
declare global { declare global {

48
gallery/src/pages/date-time/date-time.ts
View File

@ -100,32 +100,30 @@ export class DemoDateTimeDateTime extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-control-select {
ha-control-select { max-width: 800px;
max-width: 800px; margin: 12px auto;
margin: 12px auto; }
} .header {
.header { font-weight: bold;
font-weight: bold; }
} .center {
.center { text-align: center;
text-align: center; }
} .container {
.container { max-width: 900px;
max-width: 900px; margin: 12px auto;
margin: 12px auto; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-evenly;
justify-content: space-evenly; }
}
.container > div { .container > div {
flex-grow: 1; flex-grow: 1;
width: 20%; width: 20%;
} }
`; `;
}
} }
declare global { declare global {

40
gallery/src/pages/date-time/date.ts
View File

@ -90,28 +90,26 @@ export class DemoDateTimeDate extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` .header {
.header { font-weight: bold;
font-weight: bold; }
} .center {
.center { text-align: center;
text-align: center; }
} .container {
.container { max-width: 600px;
max-width: 600px; margin: 12px auto;
margin: 12px auto; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-evenly;
justify-content: space-evenly; }
}
.container > div { .container > div {
flex-grow: 1; flex-grow: 1;
width: 20%; width: 20%;
} }
`; `;
}
} }
declare global { declare global {

48
gallery/src/pages/date-time/time-seconds.ts
View File

@ -100,32 +100,30 @@ export class DemoDateTimeTimeSeconds extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-control-select {
ha-control-select { max-width: 800px;
max-width: 800px; margin: 12px auto;
margin: 12px auto; }
} .header {
.header { font-weight: bold;
font-weight: bold; }
} .center {
.center { text-align: center;
text-align: center; }
} .container {
.container { max-width: 600px;
max-width: 600px; margin: 12px auto;
margin: 12px auto; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-evenly;
justify-content: space-evenly; }
}
.container > div { .container > div {
flex-grow: 1; flex-grow: 1;
width: 20%; width: 20%;
} }
`; `;
}
} }
declare global { declare global {

48
gallery/src/pages/date-time/time-weekday.ts
View File

@ -100,32 +100,30 @@ export class DemoDateTimeTimeWeekday extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-control-select {
ha-control-select { max-width: 800px;
max-width: 800px; margin: 12px auto;
margin: 12px auto; }
} .header {
.header { font-weight: bold;
font-weight: bold; }
} .center {
.center { text-align: center;
text-align: center; }
} .container {
.container { max-width: 800px;
max-width: 800px; margin: 12px auto;
margin: 12px auto; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-evenly;
justify-content: space-evenly; }
}
.container > div { .container > div {
flex-grow: 1; flex-grow: 1;
width: 20%; width: 20%;
} }
`; `;
}
} }
declare global { declare global {

48
gallery/src/pages/date-time/time.ts
View File

@ -100,32 +100,30 @@ export class DemoDateTimeTime extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-control-select {
ha-control-select { max-width: 800px;
max-width: 800px; margin: 12px auto;
margin: 12px auto; }
} .header {
.header { font-weight: bold;
font-weight: bold; }
} .center {
.center { text-align: center;
text-align: center; }
} .container {
.container { max-width: 600px;
max-width: 600px; margin: 12px auto;
margin: 12px auto; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-evenly;
justify-content: space-evenly; }
}
.container > div { .container > div {
flex-grow: 1; flex-grow: 1;
width: 20%; width: 20%;
} }
`; `;
}
} }
declare global { declare global {

24
gallery/src/pages/misc/entity-state.ts
View File

@ -321,13 +321,13 @@ function createEntity(
}; };
} }
type EntityRowData = { interface EntityRowData {
stateObj: HassEntity; stateObj: HassEntity;
entity_id: string; entity_id: string;
state: string; state: string;
device_class?: string; device_class?: string;
domain: string; domain: string;
}; }
function createRowData(stateObj: HassEntity): EntityRowData { function createRowData(stateObj: HassEntity): EntityRowData {
return { return {
@ -429,17 +429,15 @@ export class DemoEntityState extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` .color {
.color { display: block;
display: block; height: 20px;
height: 20px; width: 20px;
width: 20px; border-radius: 10px;
border-radius: 10px; background-color: rgb(--color);
background-color: rgb(--color); }
} `;
`;
}
} }
declare global { declare global {

14
gallery/src/pages/misc/ha-markdown.ts
View File

@ -76,14 +76,12 @@ export class DemoMiscMarkdown extends LitElement {
`; `;
} }
static get styles() { static styles = css`
return css` ha-card {
ha-card { margin: 12px;
margin: 12px; padding: 12px;
padding: 12px; }
} `;
`;
}
} }
declare global { declare global {

38
gallery/src/pages/misc/integration-card.ts
View File

@ -135,12 +135,12 @@ const configFlows: DataEntryFlowProgressExtended[] = [
}, },
]; ];
const configEntries: Array<{ const configEntries: {
items: ConfigEntryExtended[]; items: ConfigEntryExtended[];
is_custom?: boolean; is_custom?: boolean;
disabled?: boolean; disabled?: boolean;
highlight?: string; highlight?: string;
}> = [ }[] = [
{ items: [loadedEntry] }, { items: [loadedEntry] },
{ items: [configPanelEntry] }, { items: [configPanelEntry] },
{ items: [optionsFlowEntry] }, { items: [optionsFlowEntry] },
@ -349,26 +349,24 @@ export class DemoIntegrationCard extends LitElement {
this.isCloud = !this.isCloud; this.isCloud = !this.isCloud;
} }
static get styles() { static styles = css`
return css` .container {
.container { display: grid;
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 8px 8px;
grid-gap: 8px 8px; padding: 8px 16px 16px;
padding: 8px 16px 16px; margin-bottom: 16px;
margin-bottom: 16px; }
}
.container > * { .container > * {
max-width: 500px; max-width: 500px;
} }
ha-formfield { ha-formfield {
margin: 8px 0; margin: 8px 0;
display: block; display: block;
} }
`; `;
}
} }
declare global { declare global {

58
hassio/src/addon-store/hassio-addon-store.ts
View File

@ -1,7 +1,7 @@
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item"; import "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical } from "@mdi/js"; import { mdiDotsVertical } from "@mdi/js";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -211,35 +211,33 @@ export class HassioAddonStore extends LitElement {
this._filter = e.detail.value; this._filter = e.detail.value;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` hassio-addon-repository {
hassio-addon-repository { margin-top: 24px;
margin-top: 24px; }
} .search {
.search { position: sticky;
position: sticky; top: 0;
top: 0; z-index: 2;
z-index: 2; }
} search-input {
search-input { display: block;
display: block; --mdc-text-field-fill-color: var(--sidebar-background-color);
--mdc-text-field-fill-color: var(--sidebar-background-color); --mdc-text-field-idle-line-color: var(--divider-color);
--mdc-text-field-idle-line-color: var(--divider-color); }
} .advanced {
.advanced { padding: 12px;
padding: 12px; display: flex;
display: flex; flex-wrap: wrap;
flex-wrap: wrap; color: var(--primary-text-color);
color: var(--primary-text-color); }
} .advanced a {
.advanced a { margin-left: 0.5em;
margin-left: 0.5em; margin-inline-start: 0.5em;
margin-inline-start: 0.5em; margin-inline-end: initial;
margin-inline-end: initial; color: var(--primary-color);
color: var(--primary-color); }
} `;
`;
}
} }
declare global { declare global {

2
hassio/src/addon-view/config/hassio-addon-config.ts
View File

@ -299,7 +299,7 @@ class HassioAddonConfig extends LitElement {
if (this.addon.schema && this._canShowSchema && !this._yamlMode) { if (this.addon.schema && this._canShowSchema && !this._yamlMode) {
this._valid = true; this._valid = true;
this._configHasChanged = true; this._configHasChanged = true;
this._options! = ev.detail.value; this._options = ev.detail.value;
} else { } else {
this._configHasChanged = true; this._configHasChanged = true;
this._valid = ev.detail.isValid; this._valid = ev.detail.isValid;

2
hassio/src/addon-view/config/hassio-addon-network.ts
View File

@ -151,7 +151,7 @@ class HassioAddonNetwork extends LitElement {
private async _configChanged(ev: CustomEvent): Promise<void> { private async _configChanged(ev: CustomEvent): Promise<void> {
this._configHasChanged = true; this._configHasChanged = true;
this._config! = ev.detail.value; this._config = ev.detail.value;
} }
private async _resetTapped(ev: CustomEvent): Promise<void> { private async _resetTapped(ev: CustomEvent): Promise<void> {

158
hassio/src/components/hassio-card-content.ts
View File

@ -1,5 +1,5 @@
import { mdiHelpCircle } from "@mdi/js"; import { mdiHelpCircle } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import "../../../src/components/ha-svg-icon"; import "../../../src/components/ha-svg-icon";
@ -64,86 +64,84 @@ class HassioCardContent extends LitElement {
`; `;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { direction: ltr;
direction: ltr; }
}
ha-svg-icon { ha-svg-icon {
margin-right: 24px; margin-right: 24px;
margin-left: 8px; margin-left: 8px;
margin-top: 12px; margin-top: 12px;
float: left; float: left;
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
ha-svg-icon.update { ha-svg-icon.update {
color: var(--warning-color); color: var(--warning-color);
} }
ha-svg-icon.running, ha-svg-icon.running,
ha-svg-icon.installed { ha-svg-icon.installed {
color: var(--success-color); color: var(--success-color);
} }
ha-svg-icon.hassupdate, ha-svg-icon.hassupdate,
ha-svg-icon.backup { ha-svg-icon.backup {
color: var(--paper-item-icon-color); color: var(--paper-item-icon-color);
} }
ha-svg-icon.not_available { ha-svg-icon.not_available {
color: var(--error-color); color: var(--error-color);
} }
.title { .title {
color: var(--primary-text-color); color: var(--primary-text-color);
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.addition { .addition {
color: var(--secondary-text-color); color: var(--secondary-text-color);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
height: 2.4em; height: 2.4em;
line-height: 1.2em; line-height: 1.2em;
} }
.icon_image img { .icon_image img {
max-height: 40px; max-height: 40px;
max-width: 40px; max-width: 40px;
margin-top: 4px; margin-top: 4px;
margin-right: 16px; margin-right: 16px;
float: left; float: left;
} }
.icon_image.stopped, .icon_image.stopped,
.icon_image.not_available { .icon_image.not_available {
filter: grayscale(1); filter: grayscale(1);
} }
.dot { .dot {
position: absolute; position: absolute;
background-color: var(--warning-color); background-color: var(--warning-color);
width: 12px; width: 12px;
height: 12px; height: 12px;
top: 8px; top: 8px;
right: 8px; right: 8px;
border-radius: 50%; border-radius: 50%;
} }
.topbar { .topbar {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 2px; height: 2px;
top: 0; top: 0;
left: 0; left: 0;
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-top-right-radius: 2px; border-top-right-radius: 2px;
} }
.topbar.installed { .topbar.installed {
background-color: var(--primary-color); background-color: var(--primary-color);
} }
.topbar.update { .topbar.update {
background-color: var(--accent-color); background-color: var(--accent-color);
} }
.topbar.unavailable { .topbar.unavailable {
background-color: var(--error-color); background-color: var(--error-color);
} }
`; `;
}
} }
declare global { declare global {

92
hassio/src/components/supervisor-backup-content.ts
View File

@ -1,5 +1,5 @@
import { mdiFolder, mdiPuzzle } from "@mdi/js"; import { mdiFolder, mdiPuzzle } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit"; import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { atLeastVersion } from "../../../src/common/config/version"; import { atLeastVersion } from "../../../src/common/config/version";
@ -283,52 +283,50 @@ export class SupervisorBackupContent extends LitElement {
this.homeAssistant = !this.homeAssistant; this.homeAssistant = !this.homeAssistant;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` .partial-picker ha-formfield {
.partial-picker ha-formfield { display: block;
display: block; }
} .partial-picker ha-checkbox {
.partial-picker ha-checkbox { --mdc-checkbox-touch-target-size: 32px;
--mdc-checkbox-touch-target-size: 32px; }
} .partial-picker {
.partial-picker { display: block;
display: block; margin: 0px -6px;
margin: 0px -6px; }
} supervisor-formfield-label {
supervisor-formfield-label { display: inline-flex;
display: inline-flex; align-items: center;
align-items: center; }
} hr {
hr { border-color: var(--divider-color);
border-color: var(--divider-color); border-bottom: none;
border-bottom: none; margin: 16px 0;
margin: 16px 0; }
} .details {
.details { color: var(--secondary-text-color);
color: var(--secondary-text-color); }
} .section-content {
.section-content { display: flex;
display: flex; flex-direction: column;
flex-direction: column; margin-left: 30px;
margin-left: 30px; margin-inline-start: 30px;
margin-inline-start: 30px; margin-inline-end: initial;
margin-inline-end: initial; }
} ha-formfield.password {
ha-formfield.password { display: block;
display: block; margin: 0 -14px -16px;
margin: 0 -14px -16px; }
} .backup-types {
.backup-types { display: flex;
display: flex; margin-left: -13px;
margin-left: -13px; margin-inline-start: -13px;
margin-inline-start: -13px; margin-inline-end: initial;
margin-inline-end: initial; }
} .sub-header {
.sub-header { margin-top: 8px;
margin-top: 8px; }
} `;
`;
}
public backupDetails(): public backupDetails():
| HassioPartialBackupCreateParams | HassioPartialBackupCreateParams

46
hassio/src/components/supervisor-formfield-label.ts
View File

@ -1,4 +1,4 @@
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import "../../../src/components/ha-svg-icon"; import "../../../src/components/ha-svg-icon";
@ -30,29 +30,27 @@ class SupervisorFormfieldLabel extends LitElement {
`; `;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { display: flex;
display: flex; align-items: center;
align-items: center; }
} .label {
.label { margin-right: 4px;
margin-right: 4px; margin-inline-end: 4px;
margin-inline-end: 4px; margin-inline-start: initial;
margin-inline-start: initial; }
} .version {
.version { color: var(--secondary-text-color);
color: var(--secondary-text-color); }
} .icon {
.icon { max-height: 22px;
max-height: 22px; max-width: 22px;
max-width: 22px; margin-right: 8px;
margin-right: 8px; margin-inline-end: 8px;
margin-inline-end: 8px; margin-inline-start: initial;
margin-inline-start: initial; }
} `;
`;
}
} }
declare global { declare global {

77
hassio/src/components/supervisor-metric.ts
View File

@ -1,4 +1,4 @@
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
@ -31,46 +31,41 @@ class SupervisorMetric extends LitElement {
</ha-settings-row>`; </ha-settings-row>`;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` ha-settings-row {
ha-settings-row { padding: 0;
padding: 0; height: 54px;
height: 54px; width: 100%;
width: 100%; }
} ha-settings-row > div[slot="description"] {
ha-settings-row > div[slot="description"] { white-space: normal;
white-space: normal; color: var(--secondary-text-color);
color: var(--secondary-text-color); display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; }
} ha-bar {
ha-bar { --ha-bar-primary-color: var(--hassio-bar-ok-color, var(--success-color));
--ha-bar-primary-color: var( }
--hassio-bar-ok-color, .target-warning {
var(--success-color) --ha-bar-primary-color: var(
); --hassio-bar-warning-color,
} var(--warning-color)
.target-warning { );
--ha-bar-primary-color: var( }
--hassio-bar-warning-color, .target-critical {
var(--warning-color) --ha-bar-primary-color: var(
); --hassio-bar-critical-color,
} var(--error-color)
.target-critical { );
--ha-bar-primary-color: var( }
--hassio-bar-critical-color, .value {
var(--error-color) width: 48px;
); padding-right: 4px;
} padding-inline-start: initial;
.value { padding-inline-end: 4px;
width: 48px; flex-shrink: 0;
padding-right: 4px; }
padding-inline-start: initial; `;
padding-inline-end: 4px;
flex-shrink: 0;
}
`;
}
} }
declare global { declare global {

18
hassio/src/hassio-panel.ts
View File

@ -1,4 +1,4 @@
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import type { Supervisor } from "../../src/data/supervisor/supervisor"; import type { Supervisor } from "../../src/data/supervisor/supervisor";
@ -39,15 +39,13 @@ class HassioPanel extends LitElement {
`; `;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { --app-header-background-color: var(--sidebar-background-color);
--app-header-background-color: var(--sidebar-background-color); --app-header-text-color: var(--sidebar-text-color);
--app-header-text-color: var(--sidebar-text-color); --app-header-border-bottom: 1px solid var(--divider-color);
--app-header-border-bottom: 1px solid var(--divider-color); }
} `;
`;
}
} }
declare global { declare global {

80
hassio/src/ingress-view/hassio-ingress-view.ts
View File

@ -1,5 +1,5 @@
import { mdiMenu } from "@mdi/js"; import { mdiMenu } from "@mdi/js";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../src/common/dom/fire_event"; import { fireEvent } from "../../../src/common/dom/fire_event";
@ -325,51 +325,49 @@ class HassioIngressView extends LitElement {
fireEvent(this, "hass-toggle-menu"); fireEvent(this, "hass-toggle-menu");
} }
static get styles(): CSSResultGroup { static styles = css`
return css` iframe {
iframe { display: block;
display: block; width: 100%;
width: 100%; height: 100%;
height: 100%; border: 0;
border: 0; }
}
.header + iframe { .header + iframe {
height: calc(100% - 40px); height: calc(100% - 40px);
} }
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 16px; font-size: 16px;
height: 40px; height: 40px;
padding: 0 16px; padding: 0 16px;
pointer-events: none; pointer-events: none;
background-color: var(--app-header-background-color); background-color: var(--app-header-background-color);
font-weight: 400; font-weight: 400;
color: var(--app-header-text-color, white); color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none); border-bottom: var(--app-header-border-bottom, none);
box-sizing: border-box; box-sizing: border-box;
--mdc-icon-size: 20px; --mdc-icon-size: 20px;
} }
.main-title { .main-title {
margin: var(--margin-title); margin: var(--margin-title);
line-height: 20px; line-height: 20px;
flex-grow: 1; flex-grow: 1;
} }
ha-icon-button { ha-icon-button {
pointer-events: auto; pointer-events: auto;
} }
hass-subpage { hass-subpage {
--app-header-background-color: var(--sidebar-background-color); --app-header-background-color: var(--sidebar-background-color);
--app-header-text-color: var(--sidebar-text-color); --app-header-text-color: var(--sidebar-text-color);
--app-header-border-bottom: 1px solid var(--divider-color); --app-header-border-bottom: 1px solid var(--divider-color);
} }
`; `;
}
} }
declare global { declare global {

28
hassio/src/update-available/update-available-dashboard.ts
View File

@ -1,4 +1,4 @@
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import type { Supervisor } from "../../../src/data/supervisor/supervisor"; import type { Supervisor } from "../../../src/data/supervisor/supervisor";
@ -38,20 +38,18 @@ class UpdateAvailableDashboard extends LitElement {
history.back(); history.back();
} }
static get styles(): CSSResultGroup { static styles = css`
return css` hass-subpage {
hass-subpage { --app-header-background-color: var(--primary-background-color);
--app-header-background-color: var(--primary-background-color); --app-header-text-color: var(--sidebar-text-color);
--app-header-text-color: var(--sidebar-text-color); }
} update-available-card {
update-available-card { margin: auto;
margin: auto; margin-top: 16px;
margin-top: 16px; margin-bottom: 24px;
margin-bottom: 24px; max-width: 600px;
max-width: 600px; }
} `;
`;
}
} }
declare global { declare global {

2
src/cast/cast_manager.ts
View File

@ -32,7 +32,7 @@ export class CastManager {
// If the cast connection is connected to our Hass. // If the cast connection is connected to our Hass.
public status?: ReceiverStatusMessage; public status?: ReceiverStatusMessage;
private _eventListeners: { [event: string]: CastEventListener[] } = {}; private _eventListeners: Record<string, CastEventListener[]> = {};
constructor(auth?: Auth) { constructor(auth?: Auth) {
this.auth = auth; this.auth = auth;

2
src/common/config/components_with_service.ts
View File

@ -4,6 +4,6 @@ import type { HomeAssistant } from "../../types";
export const componentsWithService = ( export const componentsWithService = (
hass: HomeAssistant, hass: HomeAssistant,
service: string service: string
): Array<string> => ): string[] =>
hass && hass &&
Object.keys(hass.services).filter((key) => service in hass.services[key]); Object.keys(hass.services).filter((key) => service in hass.services[key]);

6
src/common/decorators/storage.ts
View File

@ -31,11 +31,9 @@ class StorageClass {
public storage: globalThis.Storage; public storage: globalThis.Storage;
private _storage: { [storageKey: string]: any } = {}; private _storage: Record<string, any> = {};
private _listeners: { private _listeners: Record<string, Callback[]> = {};
[storageKey: string]: Callback[];
} = {};
public addFromStorage(storageKey: any): void { public addFromStorage(storageKey: any): void {
if (!this._storage[storageKey]) { if (!this._storage[storageKey]) {

4
src/common/decorators/transform.ts
View File

@ -5,9 +5,7 @@ import { shallowEqual } from "../util/shallow-equal";
/** /**
* Transform function type. * Transform function type.
*/ */
export interface Transformer<T = any, V = any> { export type Transformer<T = any, V = any> = (value: V) => T;
(value: V): T;
}
type ReactiveTransformElement = ReactiveElement & { type ReactiveTransformElement = ReactiveElement & {
_transformers: Map<PropertyKey, Transformer>; _transformers: Map<PropertyKey, Transformer>;

2
src/common/dom/ancestors-with-property.ts
View File

@ -32,7 +32,7 @@ export const ancestorsWithProperty = (
property: string | symbol, property: string | symbol,
own = DEFAULT_OWN own = DEFAULT_OWN
) => { ) => {
const ancestors: Set<Element> = new Set(); const ancestors = new Set<Element>();
while (element) { while (element) {
ancestors.add(element); ancestors.add(element);
element = closestWithProperty(element, property, own); element = closestWithProperty(element, property, own);

2
src/common/dom/apply_themes_on_element.ts
View File

@ -13,7 +13,7 @@ import { labBrighten, labDarken } from "../color/lab";
import { rgbContrast } from "../color/rgb"; import { rgbContrast } from "../color/rgb";
interface ProcessedTheme { interface ProcessedTheme {
keys: { [key: string]: "" }; keys: Record<string, "">;
styles: Record<string, string>; styles: Record<string, string>;
} }

2
src/common/entity/compute_state_name.ts
View File

@ -3,7 +3,7 @@ import { computeObjectId } from "./compute_object_id";
export const computeStateNameFromEntityAttributes = ( export const computeStateNameFromEntityAttributes = (
entityId: string, entityId: string,
attributes: { [key: string]: any } attributes: Record<string, any>
): string => ): string =>
attributes.friendly_name === undefined attributes.friendly_name === undefined
? computeObjectId(entityId).replace(/_/g, " ") ? computeObjectId(entityId).replace(/_/g, " ")

4
src/common/entity/supports-feature.ts
View File

@ -6,9 +6,7 @@ export const supportsFeature = (
): boolean => supportsFeatureFromAttributes(stateObj.attributes, feature); ): boolean => supportsFeatureFromAttributes(stateObj.attributes, feature);
export const supportsFeatureFromAttributes = ( export const supportsFeatureFromAttributes = (
attributes: { attributes: Record<string, any>,
[key: string]: any;
},
feature: number feature: number
): boolean => ): boolean =>
// eslint-disable-next-line no-bitwise // eslint-disable-next-line no-bitwise

24
src/common/string/filter/filter.ts
View File

@ -130,7 +130,7 @@ enum Arrow {
* 4. `<match_pos_0>` etc * 4. `<match_pos_0>` etc
*/ */
// export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number]; // export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number];
export type FuzzyScore = Array<number>; export type FuzzyScore = number[];
export function fuzzyScore( export function fuzzyScore(
pattern: string, pattern: string,
@ -469,7 +469,7 @@ const _minWordMatchPos = initArr(2 * _maxLen); // min word position for a certai
const _maxWordMatchPos = initArr(2 * _maxLen); // max word position for a certain pattern position const _maxWordMatchPos = initArr(2 * _maxLen); // max word position for a certain pattern position
const _diag = initTable(); // the length of a contiguous diagonal match const _diag = initTable(); // the length of a contiguous diagonal match
const _table = initTable(); const _table = initTable();
const _arrows = <Arrow[][]>initTable(); const _arrows = initTable() as Arrow[][];
function initArr(maxLen: number) { function initArr(maxLen: number) {
const row: number[] = []; const row: number[] = [];
@ -498,17 +498,15 @@ function _fillInMaxWordMatchPos(
} }
} }
export interface FuzzyScorer { export type FuzzyScorer = (
( pattern: string,
pattern: string, lowPattern: string,
lowPattern: string, patternPos: number,
patternPos: number, word: string,
word: string, lowWord: string,
lowWord: string, wordPos: number,
wordPos: number, firstMatchCanBeWeak: boolean
firstMatchCanBeWeak: boolean ) => FuzzyScore | undefined;
): FuzzyScore | undefined;
}
export function createMatches(score: undefined | FuzzyScore): Match[] { export function createMatches(score: undefined | FuzzyScore): Match[] {
if (typeof score === "undefined") { if (typeof score === "undefined") {

4
src/common/translations/localize.ts
View File

@ -56,9 +56,7 @@ export type LocalizeFunc<Keys extends string = LocalizeKeys> = (
> >
) => string; ) => string;
interface FormatType { type FormatType = Record<string, any>;
[format: string]: any;
}
export interface FormatsType { export interface FormatsType {
number: FormatType; number: FormatType;
date: FormatType; date: FormatType;

2
src/common/util/group-by.ts
View File

@ -1,7 +1,7 @@
export const groupBy = <T>( export const groupBy = <T>(
list: T[], list: T[],
keySelector: (item: T) => string keySelector: (item: T) => string
): { [key: string]: T[] } => { ): Record<string, T[]> => {
const result = {}; const result = {};
for (const item of list) { for (const item of list) {
const key = keySelector(item); const key = keySelector(item);

4
src/common/util/time-cache-entity-promise-func.ts
View File

@ -1,8 +1,6 @@
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
interface ResultCache<T> { type ResultCache<T> = Record<string, Promise<T> | undefined>;
[entityId: string]: Promise<T> | undefined;
}
/** /**
* Call a function with result caching per entity. * Call a function with result caching per entity.

100
src/components/buttons/ha-progress-button.ts
View File

@ -1,6 +1,6 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js"; import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import "../ha-circular-progress"; import "../ha-circular-progress";
@ -62,64 +62,62 @@ export class HaProgressButton extends LitElement {
}, 2000); }, 2000);
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { outline: none;
outline: none; display: inline-block;
display: inline-block; position: relative;
position: relative; pointer-events: none;
pointer-events: none; }
}
mwc-button { mwc-button {
transition: all 1s; transition: all 1s;
pointer-events: initial; pointer-events: initial;
} }
mwc-button.success { mwc-button.success {
--mdc-theme-primary: white; --mdc-theme-primary: white;
background-color: var(--success-color); background-color: var(--success-color);
transition: none; transition: none;
border-radius: 4px; border-radius: 4px;
pointer-events: none; pointer-events: none;
} }
mwc-button[raised].success { mwc-button[raised].success {
--mdc-theme-primary: var(--success-color); --mdc-theme-primary: var(--success-color);
--mdc-theme-on-primary: white; --mdc-theme-on-primary: white;
} }
mwc-button.error { mwc-button.error {
--mdc-theme-primary: white; --mdc-theme-primary: white;
background-color: var(--error-color); background-color: var(--error-color);
transition: none; transition: none;
border-radius: 4px; border-radius: 4px;
pointer-events: none; pointer-events: none;
} }
mwc-button[raised].error { mwc-button[raised].error {
--mdc-theme-primary: var(--error-color); --mdc-theme-primary: var(--error-color);
--mdc-theme-on-primary: white; --mdc-theme-on-primary: white;
} }
.progress { .progress {
bottom: 4px; bottom: 4px;
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 4px; top: 4px;
width: 100%; width: 100%;
} }
ha-svg-icon { ha-svg-icon {
color: white; color: white;
} }
mwc-button.success slot, mwc-button.success slot,
mwc-button.error slot { mwc-button.error slot {
visibility: hidden; visibility: hidden;
} }
`; `;
}
} }
declare global { declare global {

280
src/components/chart/ha-chart-base.ts
View File

@ -6,7 +6,7 @@ import type {
TooltipModel, TooltipModel,
UpdateMode, UpdateMode,
} from "chart.js"; } from "chart.js";
import type { CSSResultGroup, PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { css, html, nothing, LitElement } from "lit"; import { css, html, nothing, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
@ -60,7 +60,7 @@ export class HaChartBase extends LitElement {
@state() private _tooltip?: Tooltip; @state() private _tooltip?: Tooltip;
@state() private _hiddenDatasets: Set<number> = new Set(); @state() private _hiddenDatasets = new Set<number>();
@state() private _showZoomHint = false; @state() private _showZoomHint = false;
@ -526,145 +526,143 @@ export class HaChartBase extends LitElement {
this._tooltip = undefined; this._tooltip = undefined;
}; };
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { display: block;
display: block; position: relative;
position: relative; }
} .chart-container {
.chart-container { position: relative;
position: relative; }
} canvas {
canvas { max-height: var(--chart-max-height, 400px);
max-height: var(--chart-max-height, 400px); }
} canvas.not-zoomed {
canvas.not-zoomed { /* allow scrolling if the chart is not zoomed */
/* allow scrolling if the chart is not zoomed */ touch-action: pan-y !important;
touch-action: pan-y !important; }
} .chart-legend {
.chart-legend { text-align: center;
text-align: center; }
} .chart-legend li {
.chart-legend li { cursor: pointer;
cursor: pointer; display: inline-grid;
display: inline-grid; grid-auto-flow: column;
grid-auto-flow: column; padding: 0 8px;
padding: 0 8px; box-sizing: border-box;
box-sizing: border-box; align-items: center;
align-items: center; color: var(--secondary-text-color);
color: var(--secondary-text-color); }
} .chart-legend .hidden {
.chart-legend .hidden { text-decoration: line-through;
text-decoration: line-through; }
} .chart-legend .label {
.chart-legend .label { text-overflow: ellipsis;
text-overflow: ellipsis; white-space: nowrap;
white-space: nowrap; overflow: hidden;
overflow: hidden; }
} .chart-legend .bullet,
.chart-legend .bullet, .chart-tooltip .bullet {
.chart-tooltip .bullet { border-width: 1px;
border-width: 1px; border-style: solid;
border-style: solid; border-radius: 50%;
border-radius: 50%; display: inline-block;
display: inline-block; height: 16px;
height: 16px; margin-right: 6px;
margin-right: 6px; width: 16px;
width: 16px; flex-shrink: 0;
flex-shrink: 0; box-sizing: border-box;
box-sizing: border-box; margin-inline-end: 6px;
margin-inline-end: 6px; margin-inline-start: initial;
margin-inline-start: initial; direction: var(--direction);
direction: var(--direction); }
} .chart-tooltip .bullet {
.chart-tooltip .bullet { align-self: baseline;
align-self: baseline; }
} .chart-tooltip {
.chart-tooltip { padding: 8px;
padding: 8px; font-size: 90%;
font-size: 90%; position: fixed;
position: fixed; background: rgba(80, 80, 80, 0.9);
background: rgba(80, 80, 80, 0.9); color: white;
color: white; border-radius: 4px;
border-radius: 4px; pointer-events: none;
pointer-events: none; z-index: 1;
z-index: 1; -ms-user-select: none;
-ms-user-select: none; -webkit-user-select: none;
-webkit-user-select: none; -moz-user-select: none;
-moz-user-select: none; width: 200px;
width: 200px; box-sizing: border-box;
box-sizing: border-box; direction: var(--direction);
direction: var(--direction); }
} .chart-legend ul,
.chart-legend ul, .chart-tooltip ul {
.chart-tooltip ul { display: inline-block;
display: inline-block; padding: 0 0px;
padding: 0 0px; margin: 8px 0 0 0;
margin: 8px 0 0 0; width: 100%;
width: 100%; }
} .chart-tooltip ul {
.chart-tooltip ul { margin: 0 4px;
margin: 0 4px; }
} .chart-tooltip li {
.chart-tooltip li { display: flex;
display: flex; white-space: pre-line;
white-space: pre-line; word-break: break-word;
word-break: break-word; align-items: center;
align-items: center; line-height: 16px;
line-height: 16px; padding: 4px 0;
padding: 4px 0; }
} .chart-tooltip .title {
.chart-tooltip .title { text-align: center;
text-align: center; font-weight: 500;
font-weight: 500; word-break: break-word;
word-break: break-word; direction: ltr;
direction: ltr; }
} .chart-tooltip .footer {
.chart-tooltip .footer { font-weight: 500;
font-weight: 500; }
} .chart-tooltip .before-body {
.chart-tooltip .before-body { text-align: center;
text-align: center; font-weight: 300;
font-weight: 300; word-break: break-all;
word-break: break-all; }
} .zoom-hint {
.zoom-hint { position: absolute;
position: absolute; top: 0;
top: 0; left: 0;
left: 0; right: 0;
right: 0; bottom: 0;
bottom: 0; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: center;
justify-content: center; opacity: 0;
opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none;
pointer-events: none; }
} .zoom-hint.visible {
.zoom-hint.visible { opacity: 1;
opacity: 1; }
} .zoom-hint > div {
.zoom-hint > div { color: white;
color: white; font-size: 1.5em;
font-size: 1.5em; font-weight: 500;
font-weight: 500; padding: 8px;
padding: 8px; border-radius: 8px;
border-radius: 8px; background: rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 0, 0.3); box-shadow: 0 0 32px 32px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 32px 32px rgba(0, 0, 0, 0.3); }
} .zoom-reset {
.zoom-reset { position: absolute;
position: absolute; top: 16px;
top: 16px; right: 4px;
right: 4px; background: var(--card-background-color);
background: var(--card-background-color); border-radius: 4px;
border-radius: 4px; --mdc-icon-button-size: 32px;
--mdc-icon-button-size: 32px; color: var(--primary-color);
color: var(--primary-color); border: 1px solid var(--divider-color);
border: 1px solid var(--divider-color); }
} `;
`;
}
} }
declare global { declare global {

18
src/components/chart/ha-sankey-chart.ts
View File

@ -4,7 +4,7 @@ import { ResizeController } from "@lit-labs/observers/resize-controller";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
export type Node = { export interface Node {
id: string; id: string;
value: number; value: number;
index: number; // like z-index but for x/y index: number; // like z-index but for x/y
@ -12,13 +12,17 @@ export type Node = {
tooltip?: string; tooltip?: string;
color?: string; color?: string;
passThrough?: boolean; passThrough?: boolean;
}; }
export type Link = { source: string; target: string; value?: number }; export interface Link {
source: string;
target: string;
value?: number;
}
export type SankeyChartData = { export interface SankeyChartData {
nodes: Node[]; nodes: Node[];
links: Link[]; links: Link[];
}; }
type ProcessedNode = Node & { type ProcessedNode = Node & {
x: number; x: number;
@ -35,13 +39,13 @@ type ProcessedLink = Link & {
passThroughNodeIds: string[]; passThroughNodeIds: string[];
}; };
type Section = { interface Section {
nodes: ProcessedNode[]; nodes: ProcessedNode[];
offset: number; offset: number;
index: number; index: number;
totalValue: number; totalValue: number;
statePerPixel: number; statePerPixel: number;
}; }
const MIN_SIZE = 3; const MIN_SIZE = 3;
const DEFAULT_COLOR = "var(--primary-color)"; const DEFAULT_COLOR = "var(--primary-color)";

6
src/components/chart/state-history-chart-line.ts
View File

@ -553,11 +553,11 @@ export class StateHistoryChartLine extends LitElement {
!states.states || states.states.length === 0 !states.states || states.states.length === 0
? 0 ? 0
: states.states[0].last_changed; : states.states[0].last_changed;
for (let i = 0; i < states.statistics.length; i++) { for (const statistic of states.statistics) {
if (stopTime && states.statistics[i].last_changed >= stopTime) { if (stopTime && statistic.last_changed >= stopTime) {
break; break;
} }
processData(states.statistics[i]); processData(statistic);
} }
} }
states.states.forEach((entityState) => { states.states.forEach((entityState) => {

14
src/components/chart/state-history-chart-timeline.ts
View File

@ -1,6 +1,6 @@
import type { ChartData, ChartDataset, ChartOptions } from "chart.js"; import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
import { getRelativePosition } from "chart.js/helpers"; import { getRelativePosition } from "chart.js/helpers";
import type { CSSResultGroup, PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time"; import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@ -319,13 +319,11 @@ export class StateHistoryChartTimeline extends LitElement {
}; };
} }
static get styles(): CSSResultGroup { static styles = css`
return css` ha-chart-base {
ha-chart-base { --chart-max-height: none;
--chart-max-height: none; }
} `;
`;
}
} }
declare global { declare global {

96
src/components/chart/state-history-charts.ts
View File

@ -1,4 +1,4 @@
import type { CSSResultGroup, PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, eventOptions, property, state } from "lit/decorators"; import { customElement, eventOptions, property, state } from "lit/decorators";
import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize"; import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
@ -272,64 +272,62 @@ export class StateHistoryCharts extends LitElement {
this._savedScrollPos = (e.target as HTMLDivElement).scrollTop; this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { display: block;
display: block; /* height of single timeline chart = 60px */
/* height of single timeline chart = 60px */ min-height: 60px;
min-height: 60px; }
}
:host([virtualize]) { :host([virtualize]) {
height: 100%; height: 100%;
} }
.info { .info {
text-align: center; text-align: center;
line-height: 60px; line-height: 60px;
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
.container { .container {
max-height: var(--history-max-height); max-height: var(--history-max-height);
} }
.entry-container { .entry-container {
width: 100%; width: 100%;
} }
.entry-container:hover { .entry-container:hover {
z-index: 1; z-index: 1;
} }
:host([virtualize]) .entry-container { :host([virtualize]) .entry-container {
padding-left: 1px; padding-left: 1px;
padding-right: 1px; padding-right: 1px;
padding-inline-start: 1px; padding-inline-start: 1px;
padding-inline-end: 1px; padding-inline-end: 1px;
} }
.entry-container:not(:first-child) { .entry-container:not(:first-child) {
border-top: 2px solid var(--divider-color); border-top: 2px solid var(--divider-color);
margin-top: 16px; margin-top: 16px;
} }
.container, .container,
lit-virtualizer { lit-virtualizer {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
lit-virtualizer { lit-virtualizer {
contain: size layout !important; contain: size layout !important;
} }
state-history-chart-timeline, state-history-chart-timeline,
state-history-chart-line { state-history-chart-line {
width: 100%; width: 100%;
} }
`; `;
}
} }
declare global { declare global {

34
src/components/chart/statistics-chart.ts
View File

@ -4,7 +4,7 @@ import type {
ChartOptions, ChartOptions,
ChartType, ChartType,
} from "chart.js"; } from "chart.js";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -60,7 +60,7 @@ export class StatisticsChart extends LitElement {
@property({ attribute: false }) public endTime?: Date; @property({ attribute: false }) public endTime?: Date;
@property({ attribute: false, type: Array }) @property({ attribute: false, type: Array })
public statTypes: Array<StatisticType> = ["sum", "min", "mean", "max"]; public statTypes: StatisticType[] = ["sum", "min", "mean", "max"];
@property({ attribute: false }) public chartType: ChartType = "line"; @property({ attribute: false }) public chartType: ChartType = "line";
@ -372,7 +372,7 @@ export class StatisticsChart extends LitElement {
} }
// array containing [value1, value2, etc] // array containing [value1, value2, etc]
let prevValues: Array<number | null> | null = null; let prevValues: (number | null)[] | null = null;
let prevEndTime: Date | undefined; let prevEndTime: Date | undefined;
// The datasets for the current statistic // The datasets for the current statistic
@ -382,7 +382,7 @@ export class StatisticsChart extends LitElement {
const pushData = ( const pushData = (
start: Date, start: Date,
end: Date, end: Date,
dataValues: Array<number | null> | null dataValues: (number | null)[] | null
) => { ) => {
if (!dataValues) return; if (!dataValues) return;
if (start > end) { if (start > end) {
@ -494,7 +494,7 @@ export class StatisticsChart extends LitElement {
return; return;
} }
prevDate = startDate; prevDate = startDate;
const dataValues: Array<number | null> = []; const dataValues: (number | null)[] = [];
statTypes.forEach((type) => { statTypes.forEach((type) => {
let val: number | null | undefined; let val: number | null | undefined;
if (type === "sum") { if (type === "sum") {
@ -528,19 +528,17 @@ export class StatisticsChart extends LitElement {
this._statisticIds = statisticIds; this._statisticIds = statisticIds;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { display: block;
display: block; min-height: 60px;
min-height: 60px; }
} .info {
.info { text-align: center;
text-align: center; line-height: 60px;
line-height: 60px; color: var(--secondary-text-color);
color: var(--secondary-text-color); }
} `;
`;
}
} }
declare global { declare global {

2
src/components/chart/timeline-chart/timeline-color.ts
View File

@ -49,7 +49,7 @@ function computeTimelineStateColor(
} }
let colorIndex = 0; let colorIndex = 0;
const stateColorMap: Map<string, string> = new Map(); const stateColorMap = new Map<string, string>();
function computeTimeLineGenericColor( function computeTimeLineGenericColor(
state: string, state: string,

4
src/components/data-table/dialog-data-table-settings.ts
View File

@ -218,8 +218,8 @@ export class DialogDataTableSettings extends LitElement {
// Array.findLastIndex when supported or core-js polyfill // Array.findLastIndex when supported or core-js polyfill
const findLastIndex = ( const findLastIndex = (
arr: Array<any>, arr: any[],
fn: (item: any, index: number, arr: Array<any>) => boolean fn: (item: any, index: number, arr: any[]) => boolean
) => { ) => {
for (let i = arr.length - 1; i >= 0; i--) { for (let i = arr.length - 1; i >= 0; i--) {
if (fn(arr[i], i, arr)) return i; if (fn(arr[i], i, arr)) return i;

48
src/components/data-table/ha-data-table-icon.ts
View File

@ -33,31 +33,29 @@ class HaDataTableIcon extends LitElement {
this.addEventListener("tap", hide); this.addEventListener("tap", hide);
} }
static get styles() { static styles = css`
return css` :host {
:host { display: inline-block;
display: inline-block; position: relative;
position: relative; }
} ha-svg-icon {
ha-svg-icon { color: var(--secondary-text-color);
color: var(--secondary-text-color); }
} div {
div { position: absolute;
position: absolute; right: 28px;
right: 28px; inset-inline-end: 28px;
inset-inline-end: 28px; inset-inline-start: initial;
inset-inline-start: initial; z-index: 1002;
z-index: 1002; outline: none;
outline: none; font-size: 10px;
font-size: 10px; line-height: 1;
line-height: 1; background-color: var(--simple-tooltip-background, #616161);
background-color: var(--simple-tooltip-background, #616161); color: var(--simple-tooltip-text-color, white);
color: var(--simple-tooltip-text-color, white); padding: 8px;
padding: 8px; border-radius: 2px;
border-radius: 2px; }
} `;
`;
}
} }
declare global { declare global {

48
src/components/data-table/ha-data-table-labels.ts
View File

@ -98,31 +98,29 @@ class HaDataTableLabels extends LitElement {
} }
} }
static get styles() { static styles = css`
return css` :host {
:host { display: block;
display: block; flex-grow: 1;
flex-grow: 1; margin-top: 4px;
margin-top: 4px; height: 22px;
height: 22px; }
} ha-chip-set {
ha-chip-set { position: fixed;
position: fixed; flex-wrap: nowrap;
flex-wrap: nowrap; }
} ha-label {
ha-label { --ha-label-background-color: var(--color, var(--grey-color));
--ha-label-background-color: var(--color, var(--grey-color)); --ha-label-background-opacity: 0.5;
--ha-label-background-opacity: 0.5; }
} ha-button-menu {
ha-button-menu { border-radius: 10px;
border-radius: 10px; }
} .plus {
.plus { --ha-label-background-color: transparent;
--ha-label-background-color: transparent; border: 1px solid var(--divider-color);
border: 1px solid var(--divider-color); }
} `;
`;
}
} }
declare global { declare global {

17
src/components/data-table/ha-data-table.ts
View File

@ -48,9 +48,10 @@ export interface SortingChangedEvent {
export type SortingDirection = "desc" | "asc" | null; export type SortingDirection = "desc" | "asc" | null;
export interface DataTableColumnContainer<T = any> { export type DataTableColumnContainer<T = any> = Record<
[key: string]: DataTableColumnData<T>; string,
} DataTableColumnData<T>
>;
export interface DataTableSortColumnData { export interface DataTableSortColumnData {
sortable?: boolean; sortable?: boolean;
@ -94,9 +95,7 @@ export interface DataTableRowData {
selectable?: boolean; selectable?: boolean;
} }
export interface SortableColumnContainer { export type SortableColumnContainer = Record<string, ClonedDataTableColumnData>;
[key: string]: ClonedDataTableColumnData;
}
const UNDEFINED_GROUP_KEY = "zzzzz_undefined"; const UNDEFINED_GROUP_KEY = "zzzzz_undefined";
@ -694,9 +693,9 @@ export class HaDataTable extends LitElement {
grouped[UNDEFINED_GROUP_KEY] = grouped.undefined; grouped[UNDEFINED_GROUP_KEY] = grouped.undefined;
delete grouped.undefined; delete grouped.undefined;
} }
const sorted: { const sorted: Record<string, DataTableRowData[]> = Object.keys(
[key: string]: DataTableRowData[]; grouped
} = Object.keys(grouped) )
.sort((a, b) => { .sort((a, b) => {
const orderA = groupOrder?.indexOf(a) ?? -1; const orderA = groupOrder?.indexOf(a) ?? -1;
const orderB = groupOrder?.indexOf(b) ?? -1; const orderB = groupOrder?.indexOf(b) ?? -1;

13
src/components/device/ha-device-automation-picker.ts
View File

@ -1,6 +1,5 @@
import { consume } from "@lit-labs/context"; import { consume } from "@lit-labs/context";
import "@material/mwc-list/mwc-list-item"; import "@material/mwc-list/mwc-list-item";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { property, state } from "lit/decorators"; import { property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
@ -185,11 +184,9 @@ export abstract class HaDeviceAutomationPicker<
fireEvent(this, "value-changed", { value }); fireEvent(this, "value-changed", { value });
} }
static get styles(): CSSResultGroup { static styles = css`
return css` ha-select {
ha-select { display: block;
display: block; }
} `;
`;
}
} }

38
src/components/entity/ha-entity-toggle.ts
View File

@ -1,6 +1,6 @@
import { mdiFlash, mdiFlashOff } from "@mdi/js"; import { mdiFlash, mdiFlashOff } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket"; import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { LitElement, css, html } from "lit"; import { LitElement, css, html } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { STATES_OFF } from "../../common/const"; import { STATES_OFF } from "../../common/const";
@ -152,25 +152,23 @@ export class HaEntityToggle extends LitElement {
}, 2000); }, 2000);
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { white-space: nowrap;
white-space: nowrap; min-width: 38px;
min-width: 38px; }
} ha-icon-button {
ha-icon-button { --mdc-icon-button-size: 40px;
--mdc-icon-button-size: 40px; color: var(--ha-icon-button-inactive-color, var(--primary-text-color));
color: var(--ha-icon-button-inactive-color, var(--primary-text-color)); transition: color 0.5s;
transition: color 0.5s; }
} ha-icon-button.state-active {
ha-icon-button.state-active { color: var(--ha-icon-button-active-color, var(--primary-color));
color: var(--ha-icon-button-active-color, var(--primary-color)); }
} ha-switch {
ha-switch { padding: 13px 5px;
padding: 13px 5px; }
} `;
`;
}
} }
declare global { declare global {

76
src/components/entity/ha-state-label-badge.ts
View File

@ -1,6 +1,6 @@
import { mdiAlert } from "@mdi/js"; import { mdiAlert } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket"; import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
@ -26,7 +26,7 @@ const TRUNCATED_DOMAINS = [
"alarm_control_panel", "alarm_control_panel",
"device_tracker", "device_tracker",
"person", "person",
] as const satisfies ReadonlyArray<keyof typeof FIXED_DOMAIN_STATES>; ] as const satisfies readonly (keyof typeof FIXED_DOMAIN_STATES)[];
type TruncatedDomain = (typeof TRUNCATED_DOMAINS)[number]; type TruncatedDomain = (typeof TRUNCATED_DOMAINS)[number];
type TruncatedKey = { type TruncatedKey = {
@ -262,50 +262,48 @@ export class HaStateLabelBadge extends LitElement {
this._timerTimeRemaining = timerTimeRemaining(stateObj); this._timerTimeRemaining = timerTimeRemaining(stateObj);
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { cursor: pointer;
cursor: pointer; }
} .big {
.big { font-size: 70%;
font-size: 70%; }
} ha-label-badge {
ha-label-badge { --ha-label-badge-color: var(--label-badge-red);
--ha-label-badge-color: var(--label-badge-red); }
} ha-label-badge.has-unit_of_measurement {
ha-label-badge.has-unit_of_measurement { --ha-label-badge-label-text-transform: none;
--ha-label-badge-label-text-transform: none; }
}
ha-label-badge.binary_sensor { ha-label-badge.binary_sensor {
--ha-label-badge-color: var(--label-badge-blue); --ha-label-badge-color: var(--label-badge-blue);
} }
.red { .red {
--ha-label-badge-color: var(--label-badge-red); --ha-label-badge-color: var(--label-badge-red);
} }
.blue { .blue {
--ha-label-badge-color: var(--label-badge-blue); --ha-label-badge-color: var(--label-badge-blue);
} }
.green { .green {
--ha-label-badge-color: var(--label-badge-green); --ha-label-badge-color: var(--label-badge-green);
} }
.yellow { .yellow {
--ha-label-badge-color: var(--label-badge-yellow); --ha-label-badge-color: var(--label-badge-yellow);
} }
.grey { .grey {
--ha-label-badge-color: var(--label-badge-grey); --ha-label-badge-color: var(--label-badge-grey);
} }
.warning { .warning {
--ha-label-badge-color: var(--label-badge-yellow); --ha-label-badge-color: var(--label-badge-yellow);
} }
`; `;
}
} }
declare global { declare global {

25
src/components/entity/ha-statistics-picker.ts
View File

@ -1,4 +1,3 @@
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
@ -172,19 +171,17 @@ class HaStatisticsPicker extends LitElement {
this._updateStatistics([...currentEntities, toAdd]); this._updateStatistics([...currentEntities, toAdd]);
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { width: 200px;
width: 200px; display: block;
display: block; }
} ha-statistic-picker {
ha-statistic-picker { display: block;
display: block; width: 100%;
width: 100%; margin-top: 8px;
margin-top: 8px; }
} `;
`;
}
} }
declare global { declare global {

4
src/components/entity/state-badge.ts
View File

@ -35,7 +35,7 @@ export class StateBadge extends LitElement {
// @todo Consider reworking to eliminate need for attribute since it is manipulated internally // @todo Consider reworking to eliminate need for attribute since it is manipulated internally
@property({ type: Boolean, reflect: true }) public icon = true; @property({ type: Boolean, reflect: true }) public icon = true;
@state() private _iconStyle: { [name: string]: string | undefined } = {}; @state() private _iconStyle: Record<string, string | undefined> = {};
connectedCallback(): void { connectedCallback(): void {
super.connectedCallback(); super.connectedCallback();
@ -108,7 +108,7 @@ export class StateBadge extends LitElement {
} }
const stateObj = this.stateObj; const stateObj = this.stateObj;
const iconStyle: { [name: string]: string } = {}; const iconStyle: Record<string, string> = {};
let backgroundImage = ""; let backgroundImage = "";
this.icon = true; this.icon = true;

107
src/components/entity/state-info.ts
View File

@ -1,6 +1,5 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { HassEntity } from "home-assistant-js-websocket"; import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { computeStateName } from "../../common/entity/compute_state_name"; import { computeStateName } from "../../common/entity/compute_state_name";
@ -75,67 +74,65 @@ class StateInfo extends LitElement {
</div>`; </div>`;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { min-width: 120px;
min-width: 120px; white-space: nowrap;
white-space: nowrap; display: flex;
display: flex; align-items: center;
align-items: center; }
}
state-badge { state-badge {
flex: none; flex: none;
} }
.info { .info {
margin-left: 8px; margin-left: 8px;
margin-inline-start: 8px; margin-inline-start: 8px;
margin-inline-end: initial; margin-inline-end: initial;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
min-width: 0; min-width: 0;
text-align: var(--float-start); text-align: var(--float-start);
position: relative; position: relative;
} }
.name { .name {
color: var(--primary-text-color); color: var(--primary-text-color);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.name.in-dialog, .name.in-dialog,
:host([secondary-line]) .name { :host([secondary-line]) .name {
line-height: 20px; line-height: 20px;
} }
.time-ago, .time-ago,
.extra-info, .extra-info,
.extra-info > * { .extra-info > * {
color: var(--secondary-text-color); color: var(--secondary-text-color);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: no-wrap; flex-wrap: no-wrap;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
margin: 0 2px 4px 0; margin: 0 2px 4px 0;
} }
.row:last-child { .row:last-child {
margin-bottom: 0px; margin-bottom: 0px;
} }
`; `;
}
} }
declare global { declare global {

151
src/components/ha-ansi-to-html.ts
View File

@ -1,6 +1,5 @@
import { import {
css, css,
type CSSResultGroup,
html, html,
LitElement, LitElement,
type PropertyValues, type PropertyValues,
@ -47,83 +46,81 @@ export class HaAnsiToHtml extends LitElement {
} }
} }
static get styles(): CSSResultGroup { static styles = css`
return css` pre {
pre { overflow-x: auto;
overflow-x: auto; margin: 0;
margin: 0; }
} pre.wrap {
pre.wrap { white-space: pre-wrap;
white-space: pre-wrap; overflow-wrap: break-word;
overflow-wrap: break-word; }
} .bold {
.bold { font-weight: bold;
font-weight: bold; }
} .italic {
.italic { font-style: italic;
font-style: italic; }
} .underline {
.underline { text-decoration: underline;
text-decoration: underline; }
} .strikethrough {
.strikethrough { text-decoration: line-through;
text-decoration: line-through; }
} .underline.strikethrough {
.underline.strikethrough { text-decoration: underline line-through;
text-decoration: underline line-through; }
} .fg-red {
.fg-red { color: var(--error-color);
color: var(--error-color); }
} .fg-green {
.fg-green { color: var(--success-color);
color: var(--success-color); }
} .fg-yellow {
.fg-yellow { color: var(--warning-color);
color: var(--warning-color); }
} .fg-blue {
.fg-blue { color: var(--info-color);
color: var(--info-color); }
} .fg-magenta {
.fg-magenta { color: rgb(118, 38, 113);
color: rgb(118, 38, 113); }
} .fg-cyan {
.fg-cyan { color: rgb(44, 181, 233);
color: rgb(44, 181, 233); }
} .fg-white {
.fg-white { color: rgb(204, 204, 204);
color: rgb(204, 204, 204); }
} .bg-black {
.bg-black { background-color: rgb(0, 0, 0);
background-color: rgb(0, 0, 0); }
} .bg-red {
.bg-red { background-color: var(--error-color);
background-color: var(--error-color); }
} .bg-green {
.bg-green { background-color: var(--success-color);
background-color: var(--success-color); }
} .bg-yellow {
.bg-yellow { background-color: var(--warning-color);
background-color: var(--warning-color); }
} .bg-blue {
.bg-blue { background-color: var(--info-color);
background-color: var(--info-color); }
} .bg-magenta {
.bg-magenta { background-color: rgb(118, 38, 113);
background-color: rgb(118, 38, 113); }
} .bg-cyan {
.bg-cyan { background-color: rgb(44, 181, 233);
background-color: rgb(44, 181, 233); }
} .bg-white {
.bg-white { background-color: rgb(204, 204, 204);
background-color: rgb(204, 204, 204); }
}
::highlight(search-results) { ::highlight(search-results) {
background-color: var(--primary-color); background-color: var(--primary-color);
color: var(--text-primary-color); color: var(--text-primary-color);
} }
`; `;
}
/** /**
* add new lines to the log * add new lines to the log

20
src/components/ha-area-filter.ts
View File

@ -1,5 +1,5 @@
import { mdiTextureBox } from "@mdi/js"; import { mdiTextureBox } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { LitElement, css, html } from "lit"; import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
@ -9,10 +9,10 @@ import "./ha-icon-next";
import "./ha-svg-icon"; import "./ha-svg-icon";
import "./ha-textfield"; import "./ha-textfield";
export type AreaFilterValue = { export interface AreaFilterValue {
hidden?: string[]; hidden?: string[];
order?: string[]; order?: string[];
}; }
@customElement("ha-area-filter") @customElement("ha-area-filter")
export class HaAreaPicker extends LitElement { export class HaAreaPicker extends LitElement {
@ -80,14 +80,12 @@ export class HaAreaPicker extends LitElement {
fireEvent(this, "value-changed", { value }); fireEvent(this, "value-changed", { value });
} }
static get styles(): CSSResultGroup { static styles = css`
return css` ha-list-item {
ha-list-item { --mdc-list-side-padding-left: 8px;
--mdc-list-side-padding-left: 8px; --mdc-list-side-padding-right: 8px;
--mdc-list-side-padding-right: 8px; }
} `;
`;
}
} }
declare global { declare global {

7
src/components/ha-area-floor-picker.ts
View File

@ -345,9 +345,10 @@ export class HaAreaFloorPicker extends LitElement {
); );
// @ts-ignore // @ts-ignore
const floorAreaEntries: Array< const floorAreaEntries: [
[FloorRegistryEntry | undefined, AreaRegistryEntry[]] FloorRegistryEntry | undefined,
> = Object.entries(floorAreaLookup) AreaRegistryEntry[],
][] = Object.entries(floorAreaLookup)
.map(([floorId, floorAreas]) => { .map(([floorId, floorAreas]) => {
const floor = floors.find((fl) => fl.floor_id === floorId)!; const floor = floors.find((fl) => fl.floor_id === floorId)!;
return [floor, floorAreas] as const; return [floor, floorAreas] as const;

282
src/components/ha-assist-chat.ts
View File

@ -1,4 +1,4 @@
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import type { PropertyValues, TemplateResult } from "lit";
import { css, LitElement, html, nothing } from "lit"; import { css, LitElement, html, nothing } from "lit";
import { mdiAlertCircle, mdiMicrophone, mdiSend } from "@mdi/js"; import { mdiAlertCircle, mdiMicrophone, mdiSend } from "@mdi/js";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
@ -475,161 +475,159 @@ export class HaAssistChat extends LitElement {
} }
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { flex: 1;
flex: 1; display: flex;
display: flex; flex-direction: column;
flex-direction: column; min-height: var(--ha-assist-chat-min-height, 415px);
min-height: var(--ha-assist-chat-min-height, 415px); }
} ha-textfield {
ha-textfield { display: block;
display: block; margin: 0 24px 16px;
margin: 0 24px 16px; }
} .messages {
.messages { flex: 1;
flex: 1; display: block;
display: block; box-sizing: border-box;
box-sizing: border-box; position: relative;
position: relative; }
} .messages-container {
.messages-container { position: absolute;
position: absolute; bottom: 0px;
bottom: 0px; right: 0px;
right: 0px; left: 0px;
left: 0px; padding: 24px;
padding: 24px; box-sizing: border-box;
box-sizing: border-box; overflow-y: auto;
overflow-y: auto; max-height: 100%;
max-height: 100%; }
} .message {
white-space: pre-line;
font-size: 18px;
clear: both;
margin: 8px 0;
padding: 8px;
border-radius: 15px;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
.message { .message {
white-space: pre-line; font-size: 16px;
font-size: 18px;
clear: both;
margin: 8px 0;
padding: 8px;
border-radius: 15px;
} }
}
@media all and (max-width: 450px), all and (max-height: 500px) { .message p {
.message { margin: 0;
font-size: 16px; }
} .message p:not(:last-child) {
} margin-bottom: 8px;
}
.message p { .message.user {
margin: 0; margin-left: 24px;
} margin-inline-start: 24px;
.message p:not(:last-child) { margin-inline-end: initial;
margin-bottom: 8px; float: var(--float-end);
} text-align: right;
border-bottom-right-radius: 0px;
background-color: var(--primary-color);
color: var(--text-primary-color);
direction: var(--direction);
}
.message.user { .message.hass {
margin-left: 24px; margin-right: 24px;
margin-inline-start: 24px; margin-inline-end: 24px;
margin-inline-end: initial; margin-inline-start: initial;
float: var(--float-end); float: var(--float-start);
text-align: right; border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px; background-color: var(--secondary-background-color);
background-color: var(--primary-color);
color: var(--text-primary-color);
direction: var(--direction);
}
.message.hass { color: var(--primary-text-color);
margin-right: 24px; direction: var(--direction);
margin-inline-end: 24px; }
margin-inline-start: initial;
float: var(--float-start);
border-bottom-left-radius: 0px;
background-color: var(--secondary-background-color);
color: var(--primary-text-color); .message.user a {
direction: var(--direction); color: var(--text-primary-color);
} }
.message.user a { .message.hass a {
color: var(--text-primary-color); color: var(--primary-text-color);
} }
.message.hass a { .message.error {
color: var(--primary-text-color); background-color: var(--error-color);
} color: var(--text-primary-color);
}
.message.error { .bouncer {
background-color: var(--error-color); width: 48px;
color: var(--text-primary-color); height: 48px;
position: absolute;
}
.double-bounce1,
.double-bounce2 {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--primary-color);
opacity: 0.2;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2s infinite ease-in-out;
animation: sk-bounce 2s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
@-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0);
} }
50% {
-webkit-transform: scale(1);
}
}
@keyframes sk-bounce {
0%,
100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
.bouncer { .listening-icon {
width: 48px; position: relative;
height: 48px; color: var(--secondary-text-color);
position: absolute; margin-right: -24px;
} margin-inline-end: -24px;
.double-bounce1, margin-inline-start: initial;
.double-bounce2 { direction: var(--direction);
width: 48px; transform: scaleX(var(--scale-direction));
height: 48px; }
border-radius: 50%;
background-color: var(--primary-color);
opacity: 0.2;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2s infinite ease-in-out;
animation: sk-bounce 2s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
@-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
@keyframes sk-bounce {
0%,
100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
.listening-icon { .listening-icon[active] {
position: relative; color: var(--primary-color);
color: var(--secondary-text-color); }
margin-right: -24px;
margin-inline-end: -24px;
margin-inline-start: initial;
direction: var(--direction);
transform: scaleX(var(--scale-direction));
}
.listening-icon[active] { .unsupported {
color: var(--primary-color); color: var(--error-color);
} position: absolute;
--mdc-icon-size: 16px;
.unsupported { right: 5px;
color: var(--error-color); inset-inline-end: 5px;
position: absolute; inset-inline-start: initial;
--mdc-icon-size: 16px; top: 0px;
right: 5px; }
inset-inline-end: 5px; `;
inset-inline-start: initial;
top: 0px;
}
`;
}
} }
declare global { declare global {

14
src/components/ha-assist-pipeline-picker.ts
View File

@ -1,4 +1,4 @@
import type { CSSResultGroup, PropertyValueMap } from "lit"; import type { PropertyValueMap } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
@ -90,13 +90,11 @@ export class HaAssistPipelinePicker extends LitElement {
}); });
} }
static get styles(): CSSResultGroup { static styles = css`
return css` ha-select {
ha-select { width: 100%;
width: 100%; }
} `;
`;
}
private _changed(ev): void { private _changed(ev): void {
const target = ev.target as HaSelect; const target = ev.target as HaSelect;

212
src/components/ha-badge.ts
View File

@ -1,4 +1,3 @@
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
@ -38,114 +37,109 @@ export class HaBadge extends LitElement {
`; `;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { --badge-color: var(--secondary-text-color);
--badge-color: var(--secondary-text-color); -webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent; }
} .badge {
.badge { position: relative;
position: relative; --ha-ripple-color: var(--badge-color);
--ha-ripple-color: var(--badge-color); --ha-ripple-hover-opacity: 0.04;
--ha-ripple-hover-opacity: 0.04; --ha-ripple-pressed-opacity: 0.12;
--ha-ripple-pressed-opacity: 0.12; transition:
transition: box-shadow 180ms ease-in-out,
box-shadow 180ms ease-in-out, border-color 180ms ease-in-out;
border-color 180ms ease-in-out; display: flex;
display: flex; flex-direction: row;
flex-direction: row; align-items: center;
align-items: center; justify-content: center;
justify-content: center; gap: 8px;
gap: 8px; height: var(--ha-badge-size, 36px);
height: var(--ha-badge-size, 36px); min-width: var(--ha-badge-size, 36px);
min-width: var(--ha-badge-size, 36px); padding: 0px 12px;
padding: 0px 12px; box-sizing: border-box;
box-sizing: border-box; width: auto;
width: auto; border-radius: var(
border-radius: var( --ha-badge-border-radius,
--ha-badge-border-radius, calc(var(--ha-badge-size, 36px) / 2)
calc(var(--ha-badge-size, 36px) / 2) );
); background: var(
background: var( --ha-card-background,
--ha-card-background, var(--card-background-color, white)
var(--card-background-color, white) );
); -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, none); backdrop-filter: var(--ha-card-backdrop-filter, none);
backdrop-filter: var(--ha-card-backdrop-filter, none); border-width: var(--ha-card-border-width, 1px);
border-width: var(--ha-card-border-width, 1px); box-shadow: var(--ha-card-box-shadow, none);
box-shadow: var(--ha-card-box-shadow, none); border-style: solid;
border-style: solid; border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0));
border-color: var( }
--ha-card-border-color, .badge:focus-visible {
var(--divider-color, #e0e0e0) --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
); --shadow-focus: 0 0 0 1px var(--badge-color);
} border-color: var(--badge-color);
.badge:focus-visible { box-shadow: var(--shadow-default), var(--shadow-focus);
--shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent); }
--shadow-focus: 0 0 0 1px var(--badge-color); [role="button"] {
border-color: var(--badge-color); cursor: pointer;
box-shadow: var(--shadow-default), var(--shadow-focus); }
} [role="button"]:focus {
[role="button"] { outline: none;
cursor: pointer; }
} .info {
[role="button"]:focus { display: flex;
outline: none; flex-direction: column;
} align-items: flex-start;
.info { padding-inline-start: initial;
display: flex; text-align: center;
flex-direction: column; }
align-items: flex-start; .label {
padding-inline-start: initial; font-size: 10px;
text-align: center; font-style: normal;
} font-weight: 500;
.label { line-height: 10px;
font-size: 10px; letter-spacing: 0.1px;
font-style: normal; color: var(--secondary-text-color);
font-weight: 500; }
line-height: 10px; .content {
letter-spacing: 0.1px; font-size: 12px;
color: var(--secondary-text-color); font-style: normal;
} font-weight: 500;
.content { line-height: 16px;
font-size: 12px; letter-spacing: 0.1px;
font-style: normal; color: var(--primary-text-color);
font-weight: 500; }
line-height: 16px; ::slotted([slot="icon"]) {
letter-spacing: 0.1px; --mdc-icon-size: 18px;
color: var(--primary-text-color); color: var(--badge-color);
} line-height: 0;
::slotted([slot="icon"]) { margin-left: -4px;
--mdc-icon-size: 18px; margin-right: 0;
color: var(--badge-color); margin-inline-start: -4px;
line-height: 0; margin-inline-end: 0;
margin-left: -4px; }
margin-right: 0; ::slotted(img[slot="icon"]) {
margin-inline-start: -4px; width: 30px;
margin-inline-end: 0; height: 30px;
} border-radius: 50%;
::slotted(img[slot="icon"]) { object-fit: cover;
width: 30px; overflow: hidden;
height: 30px; margin-left: -10px;
border-radius: 50%; margin-right: 0;
object-fit: cover; margin-inline-start: -10px;
overflow: hidden; margin-inline-end: 0;
margin-left: -10px; }
margin-right: 0; .badge.icon-only {
margin-inline-start: -10px; padding: 0;
margin-inline-end: 0; }
} .badge.icon-only ::slotted([slot="icon"]) {
.badge.icon-only { margin-left: 0;
padding: 0; margin-right: 0;
} margin-inline-start: 0;
.badge.icon-only ::slotted([slot="icon"]) { margin-inline-end: 0;
margin-left: 0; }
margin-right: 0; `;
margin-inline-start: 0;
margin-inline-end: 0;
}
`;
}
} }
declare global { declare global {

38
src/components/ha-bar.ts
View File

@ -1,4 +1,4 @@
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, LitElement, svg } from "lit"; import { css, LitElement, svg } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { import {
@ -34,25 +34,23 @@ export class HaBar extends LitElement {
`; `;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` rect {
rect { height: 100%;
height: 100%; }
} rect:first-child {
rect:first-child { width: 100%;
width: 100%; fill: var(--ha-bar-background-color, var(--secondary-background-color));
fill: var(--ha-bar-background-color, var(--secondary-background-color)); }
} rect:last-child {
rect:last-child { fill: var(--ha-bar-primary-color, var(--primary-color));
fill: var(--ha-bar-primary-color, var(--primary-color)); }
} svg {
svg { border-radius: var(--ha-bar-border-radius, 4px);
border-radius: var(--ha-bar-border-radius, 4px); height: 12px;
height: 12px; width: 100%;
width: 100%; }
} `;
`;
}
} }
declare global { declare global {

23
src/components/ha-blueprint-picker.ts
View File

@ -1,5 +1,4 @@
import "@material/mwc-list/mwc-list-item"; import "@material/mwc-list/mwc-list-item";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -95,18 +94,16 @@ class HaBluePrintPicker extends LitElement {
} }
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { display: inline-block;
display: inline-block; }
} ha-select {
ha-select { width: 100%;
width: 100%; min-width: 200px;
min-width: 200px; display: block;
display: block; }
} `;
`;
}
} }
declare global { declare global {

22
src/components/ha-button-menu.ts
View File

@ -1,7 +1,7 @@
import type { Button } from "@material/mwc-button"; import type { Button } from "@material/mwc-button";
import "@material/mwc-menu"; import "@material/mwc-menu";
import type { Corner, Menu, MenuCorner } from "@material/mwc-menu"; import type { Corner, Menu, MenuCorner } from "@material/mwc-menu";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { mainWindow } from "../common/dom/get_main_window"; import { mainWindow } from "../common/dom/get_main_window";
@ -103,17 +103,15 @@ export class HaButtonMenu extends LitElement {
} }
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { display: inline-block;
display: inline-block; position: relative;
position: relative; }
} ::slotted([disabled]) {
::slotted([disabled]) { color: var(--disabled-text-color);
color: var(--disabled-text-color); }
} `;
`;
}
} }
declare global { declare global {

148
src/components/ha-button-toggle-group.ts
View File

@ -1,6 +1,6 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import type { Button } from "@material/mwc-button/mwc-button"; import type { Button } from "@material/mwc-button/mwc-button";
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit"; import { css, html, LitElement } from "lit";
import { customElement, property, queryAll } from "lit/decorators"; import { customElement, property, queryAll } from "lit/decorators";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
@ -66,80 +66,78 @@ export class HaButtonToggleGroup extends LitElement {
fireEvent(this, "value-changed", { value: this.active }); fireEvent(this, "value-changed", { value: this.active });
} }
static get styles(): CSSResultGroup { static styles = css`
return css` div {
div { display: flex;
display: flex; --mdc-icon-button-size: var(--button-toggle-size, 36px);
--mdc-icon-button-size: var(--button-toggle-size, 36px); --mdc-icon-size: var(--button-toggle-icon-size, 20px);
--mdc-icon-size: var(--button-toggle-icon-size, 20px); direction: ltr;
direction: ltr; }
} mwc-button {
mwc-button { flex: 1;
flex: 1; --mdc-shape-small: 0;
--mdc-shape-small: 0; --mdc-button-outline-width: 1px 0 1px 1px;
--mdc-button-outline-width: 1px 0 1px 1px; --mdc-button-outline-color: var(--primary-color);
--mdc-button-outline-color: var(--primary-color); }
} ha-icon-button {
ha-icon-button { border: 1px solid var(--primary-color);
border: 1px solid var(--primary-color); border-right-width: 0px;
border-right-width: 0px; }
} ha-icon-button,
ha-icon-button, mwc-button {
mwc-button { position: relative;
position: relative; cursor: pointer;
cursor: pointer; }
} ha-icon-button::before,
ha-icon-button::before, mwc-button::before {
mwc-button::before { top: 0;
top: 0; left: 0;
left: 0; width: 100%;
width: 100%; height: 100%;
height: 100%; position: absolute;
position: absolute; background-color: var(--primary-color);
background-color: var(--primary-color); opacity: 0;
opacity: 0; pointer-events: none;
pointer-events: none; content: "";
content: ""; transition:
transition: opacity 15ms linear,
opacity 15ms linear, background-color 15ms linear;
background-color 15ms linear; }
} ha-icon-button[active]::before,
ha-icon-button[active]::before, mwc-button[active]::before {
mwc-button[active]::before { opacity: 1;
opacity: 1; }
} ha-icon-button[active] {
ha-icon-button[active] { --icon-primary-color: var(--text-primary-color);
--icon-primary-color: var(--text-primary-color); }
} mwc-button[active] {
mwc-button[active] { --mdc-theme-primary: var(--text-primary-color);
--mdc-theme-primary: var(--text-primary-color); }
} ha-icon-button:first-child,
ha-icon-button:first-child, mwc-button:first-child {
mwc-button:first-child { --mdc-shape-small: 4px 0 0 4px;
--mdc-shape-small: 4px 0 0 4px; border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; --mdc-button-outline-width: 1px;
--mdc-button-outline-width: 1px; }
} mwc-button:first-child::before {
mwc-button:first-child::before { border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px; }
} ha-icon-button:last-child,
ha-icon-button:last-child, mwc-button:last-child {
mwc-button:last-child { border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; border-right-width: 1px;
border-right-width: 1px; --mdc-shape-small: 0 4px 4px 0;
--mdc-shape-small: 0 4px 4px 0; --mdc-button-outline-width: 1px;
--mdc-button-outline-width: 1px; }
} mwc-button:last-child::before {
mwc-button:last-child::before { border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0; }
} ha-icon-button:only-child,
ha-icon-button:only-child, mwc-button:only-child {
mwc-button:only-child { --mdc-shape-small: 4px;
--mdc-shape-small: 4px; border-right-width: 1px;
border-right-width: 1px; }
} `;
`;
}
} }
declare global { declare global {

39
src/components/ha-camera-stream.ts
View File

@ -1,11 +1,4 @@
import { import { css, html, LitElement, nothing, type PropertyValues } from "lit";
css,
type CSSResultGroup,
html,
LitElement,
nothing,
type PropertyValues,
} from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -28,10 +21,10 @@ import "./ha-web-rtc-player";
const MJPEG_STREAM = "mjpeg"; const MJPEG_STREAM = "mjpeg";
type Stream = { interface Stream {
type: StreamType | typeof MJPEG_STREAM; type: StreamType | typeof MJPEG_STREAM;
visible: boolean; visible: boolean;
}; }
@customElement("ha-camera-stream") @customElement("ha-camera-stream")
export class HaCameraStream extends LitElement { export class HaCameraStream extends LitElement {
@ -256,22 +249,20 @@ export class HaCameraStream extends LitElement {
} }
); );
static get styles(): CSSResultGroup { static styles = css`
return css` :host,
:host, img {
img { display: block;
display: block; }
}
img { img {
width: 100%; width: 100%;
} }
.hidden { .hidden {
display: none; display: none;
} }
`; `;
}
} }
declare global { declare global {

114
src/components/ha-card.ts
View File

@ -1,4 +1,3 @@
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
@ -8,70 +7,65 @@ export class HaCard extends LitElement {
@property({ type: Boolean, reflect: true }) public raised = false; @property({ type: Boolean, reflect: true }) public raised = false;
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { background: var(
background: var( --ha-card-background,
--ha-card-background, var(--card-background-color, white)
var(--card-background-color, white) );
); -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, none); backdrop-filter: var(--ha-card-backdrop-filter, none);
backdrop-filter: var(--ha-card-backdrop-filter, none); box-shadow: var(--ha-card-box-shadow, none);
box-shadow: var(--ha-card-box-shadow, none); box-sizing: border-box;
box-sizing: border-box; border-radius: var(--ha-card-border-radius, 12px);
border-radius: var(--ha-card-border-radius, 12px); border-width: var(--ha-card-border-width, 1px);
border-width: var(--ha-card-border-width, 1px); border-style: solid;
border-style: solid; border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0));
border-color: var( color: var(--primary-text-color);
--ha-card-border-color, display: block;
var(--divider-color, #e0e0e0) transition: all 0.3s ease-out;
); position: relative;
color: var(--primary-text-color); }
display: block;
transition: all 0.3s ease-out;
position: relative;
}
:host([raised]) { :host([raised]) {
border: none; border: none;
box-shadow: var( box-shadow: var(
--ha-card-box-shadow, --ha-card-box-shadow,
0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12) 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
); );
} }
.card-header, .card-header,
:host ::slotted(.card-header) { :host ::slotted(.card-header) {
color: var(--ha-card-header-color, var(--primary-text-color)); color: var(--ha-card-header-color, var(--primary-text-color));
font-family: var(--ha-card-header-font-family, inherit); font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px); font-size: var(--ha-card-header-font-size, 24px);
letter-spacing: -0.012em; letter-spacing: -0.012em;
line-height: 48px; line-height: 48px;
padding: 12px 16px 16px; padding: 12px 16px 16px;
display: block; display: block;
margin-block-start: 0px; margin-block-start: 0px;
margin-block-end: 0px; margin-block-end: 0px;
font-weight: normal; font-weight: normal;
} }
:host ::slotted(.card-content:not(:first-child)), :host ::slotted(.card-content:not(:first-child)),
slot:not(:first-child)::slotted(.card-content) { slot:not(:first-child)::slotted(.card-content) {
padding-top: 0px; padding-top: 0px;
margin-top: -8px; margin-top: -8px;
} }
:host ::slotted(.card-content) { :host ::slotted(.card-content) {
padding: 16px; padding: 16px;
} }
:host ::slotted(.card-actions) { :host ::slotted(.card-actions) {
border-top: 1px solid var(--divider-color, #e8e8e8); border-top: 1px solid var(--divider-color, #e8e8e8);
padding: 5px 16px; padding: 5px 16px;
} }
`; `;
}
protected render() { protected render() {
return html` return html`

48
src/components/ha-climate-state.ts
View File

@ -1,4 +1,4 @@
import type { CSSResultGroup, TemplateResult } from "lit"; import type { TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import type { ClimateEntity } from "../data/climate"; import type { ClimateEntity } from "../data/climate";
@ -136,34 +136,32 @@ class HaClimateState extends LitElement {
return stateString; return stateString;
} }
static get styles(): CSSResultGroup { static styles = css`
return css` :host {
:host { display: flex;
display: flex; flex-direction: column;
flex-direction: column; justify-content: center;
justify-content: center; white-space: nowrap;
white-space: nowrap; }
}
.target { .target {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
.current { .current {
color: var(--secondary-text-color); color: var(--secondary-text-color);
direction: var(--direction); direction: var(--direction);
} }
.state-label { .state-label {
font-weight: bold; font-weight: bold;
} }
.unit { .unit {
display: inline-block; display: inline-block;
direction: ltr; direction: ltr;
} }
`; `;
}
} }
declare global { declare global {

14
src/components/ha-code-editor.ts
View File

@ -7,7 +7,7 @@ import type {
import type { Extension, TransactionSpec } from "@codemirror/state"; import type { Extension, TransactionSpec } from "@codemirror/state";
import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view"; import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
import type { HassEntities } from "home-assistant-js-websocket"; import type { HassEntities } from "home-assistant-js-websocket";
import type { CSSResultGroup, PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { css, ReactiveElement } from "lit"; import { css, ReactiveElement } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -339,13 +339,11 @@ export class HaCodeEditor extends ReactiveElement {
return []; return [];
}; };
static get styles(): CSSResultGroup { static styles = css`
return css` :host(.error-state) .cm-gutters {
:host(.error-state) .cm-gutters { border-color: var(--error-state-color, red);
border-color: var(--error-state-color, red); }
} `;
`;
}
} }
declare global { declare global {

Some files were not shown because too many files have changed in this diff Show More