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

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

@ -13,7 +13,7 @@ import {
ERR_INVALID_HTTPS_TO_HTTP,
getAuth,
} from "home-assistant-js-websocket";
import type { CSSResultGroup, TemplateResult } from "lit";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, state } from "lit/decorators";
import type { CastManager } from "../../../../src/cast/cast_manager";
@ -293,36 +293,34 @@ export class HcConnect extends LitElement {
}
}
static get styles(): CSSResultGroup {
return css`
.card-content a {
color: var(--primary-color);
}
.card-actions a {
text-decoration: none;
}
.error {
color: red;
font-weight: bold;
}
static styles = css`
.card-content a {
color: var(--primary-color);
}
.card-actions a {
text-decoration: none;
}
.error {
color: red;
font-weight: bold;
}
.error a {
color: darkred;
}
.error a {
color: darkred;
}
mwc-button ha-svg-icon {
margin-left: 8px;
}
mwc-button ha-svg-icon {
margin-left: 8px;
}
.spacer {
flex: 1;
}
.spacer {
flex: 1;
}
ha-textfield {
width: 100%;
}
`;
}
ha-textfield {
width: 100%;
}
`;
}
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 { getUser } from "home-assistant-js-websocket";
import type { CSSResultGroup, TemplateResult } from "lit";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../../src/components/ha-card";
@ -63,96 +63,94 @@ class HcLayout extends LitElement {
}
}
static get styles(): CSSResultGroup {
return css`
static styles = 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 {
display: flex;
min-height: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
justify-content: flex-start;
min-height: 90%;
margin-bottom: 30px;
}
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 {

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

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

@ -1,10 +1,4 @@
import {
css,
type CSSResultGroup,
html,
LitElement,
type TemplateResult,
} from "lit";
import { css, html, LitElement, type TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
@ -117,20 +111,18 @@ class HcLovelace extends LitElement {
return undefined;
}
static get styles(): CSSResultGroup {
return css`
hui-view-container {
display: flex;
position: relative;
min-height: 100vh;
box-sizing: border-box;
}
hui-view {
flex: 1 1 100%;
max-width: 100%;
}
`;
}
static styles = css`
hui-view-container {
display: flex;
position: relative;
min-height: 100vh;
box-sizing: border-box;
}
hui-view {
flex: 1 1 100%;
max-width: 100%;
}
`;
}
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 type { DemoConfig } from "./types";
export const demoConfigs: Array<() => Promise<DemoConfig>> = [
export const demoConfigs: (() => Promise<DemoConfig>)[] = [
() => import("./sections").then((mod) => mod.demoSections),
() => import("./arsaboo").then((mod) => mod.demoArsaboo),
() => 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 type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, state } from "lit/decorators";
import type { CastManager } from "../../../src/cast/cast_manager";
@ -67,37 +66,35 @@ class CastDemoRow extends LitElement implements LovelaceRow {
this.style.display = this._castManager ? "" : "none";
}
static get styles(): CSSResultGroup {
return css`
:host {
display: flex;
align-items: center;
}
ha-svg-icon {
padding: 8px;
color: var(--paper-item-icon-color);
}
.flex {
flex: 1;
overflow: hidden;
margin-left: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
google-cast-launcher {
cursor: pointer;
display: inline-block;
height: 24px;
width: 24px;
}
`;
}
static styles = css`
:host {
display: flex;
align-items: center;
}
ha-svg-icon {
padding: 8px;
color: var(--paper-item-icon-color);
}
.flex {
flex: 1;
overflow: hidden;
margin-left: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
google-cast-launcher {
cursor: pointer;
display: inline-block;
height: 24px;
width: 24px;
}
`;
}
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;
}
// eslint-disable-next-line @typescript-eslint/no-empty-function
public setConfig(_config: LovelaceCardConfig) {}
protected render() {

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

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

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

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

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

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

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

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

1
eslint.config.mjs
View File

@ -20,6 +20,7 @@ export default [
"airbnb-base",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/strict",
"plugin:@typescript-eslint/stylistic",
"plugin:wc/recommended",
"plugin:lit/all",
"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;
}
static get styles() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
.action {
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
span {
margin-right: 16px;
}
ha-yaml-editor {
width: 50%;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
.action {
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
span {
margin-right: 16px;
}
ha-yaml-editor {
width: 50%;
}
`;
}
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;
}
static get styles() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
.condition {
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
span {
margin-right: 16px;
}
ha-yaml-editor {
width: 50%;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
.condition {
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
span {
margin-right: 16px;
}
ha-yaml-editor {
width: 50%;
}
`;
}
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;
}
static get styles() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
.trigger {
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
span {
margin-right: 16px;
}
ha-yaml-editor {
width: 50%;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
.trigger {
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
span {
margin-right: 16px;
}
ha-yaml-editor {
width: 50%;
}
`;
}
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");
}
static get styles() {
return css`
ha-card {
max-width: 600px;
margin: 24px;
}
.card-content {
display: flex;
}
button {
position: absolute;
top: 0;
right: 0;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px;
}
.card-content {
display: flex;
}
button {
position: absolute;
top: 0;
right: 0;
}
`;
}
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 };
}
static get styles() {
return css`
ha-card {
max-width: 600px;
margin: 24px;
}
.card-content {
display: flex;
}
.card-content > * {
margin-right: 16px;
}
.card-content > *:last-child {
margin-right: 0;
}
button {
position: absolute;
top: 0;
right: 0;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px;
}
.card-content {
display: flex;
}
.card-content > * {
margin-right: 16px;
}
.card-content > *:last-child {
margin-right: 0;
}
button {
position: absolute;
top: 0;
right: 0;
}
`;
}
declare global {

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

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

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

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

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

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

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

@ -48,14 +48,12 @@ export class DemoHaCircularProgress extends LitElement {
></ha-card>`;
}
static get styles() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
`;
}
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-control-button-group";
type Button = {
interface Button {
label: string;
icon?: string;
class?: string;
disabled?: boolean;
};
}
const buttons: Button[] = [
{
@ -35,10 +35,10 @@ const buttons: Button[] = [
},
];
type ButtonGroup = {
interface ButtonGroup {
vertical?: boolean;
class?: string;
};
}
const buttonGroups: ButtonGroup[] = [
{},
@ -137,53 +137,51 @@ export class DemoHaBarButton extends LitElement {
`;
}
static get styles() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
--control-button-icon-color: var(--primary-color);
--control-button-background-color: var(--primary-color);
--control-button-background-opacity: 0.2;
--control-button-border-radius: 18px;
height: 100px;
width: 100px;
}
.custom-group {
--control-button-group-thickness: 100px;
--control-button-group-border-radius: 36px;
--control-button-group-spacing: 20px;
}
.custom-group ha-control-button {
--control-button-border-radius: 18px;
--mdc-icon-size: 32px;
}
.vertical-buttons {
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
p.title {
margin-bottom: 12px;
}
.vertical-switches > *:not(:last-child) {
margin-right: 4px;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
--control-button-icon-color: var(--primary-color);
--control-button-background-color: var(--primary-color);
--control-button-background-opacity: 0.2;
--control-button-border-radius: 18px;
height: 100px;
width: 100px;
}
.custom-group {
--control-button-group-thickness: 100px;
--control-button-group-border-radius: 36px;
--control-button-group-spacing: 20px;
}
.custom-group ha-control-button {
--control-button-border-radius: 18px;
--mdc-icon-size: 32px;
}
.vertical-buttons {
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
p.title {
margin-bottom: 12px;
}
.vertical-switches > *:not(:last-child) {
margin-right: 4px;
}
`;
}
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() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
p.title {
margin-bottom: 12px;
}
ha-control-circular-slider {
--control-circular-slider-color: #ff9800;
}
ha-control-circular-slider[inverted] {
--control-circular-slider-color: #2196f3;
}
ha-control-circular-slider[dual] {
--control-circular-slider-high-color: #2196f3;
--control-circular-slider-low-color: #ff9800;
}
.field {
display: flex;
flex-direction: row;
align-items: center;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
p.title {
margin-bottom: 12px;
}
ha-control-circular-slider {
--control-circular-slider-color: #ff9800;
}
ha-control-circular-slider[inverted] {
--control-circular-slider-color: #2196f3;
}
ha-control-circular-slider[dual] {
--control-circular-slider-high-color: #2196f3;
--control-circular-slider-low-color: #ff9800;
}
.field {
display: flex;
flex-direction: row;
align-items: center;
}
`;
}
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() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
color: #2196f3;
--control-number-buttons-color: #2196f3;
--control-number-buttons-background-color: #2196f3;
--control-number-buttons-background-opacity: 0.1;
--control-number-buttons-thickness: 100px;
--control-number-buttons-border-radius: 36px;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
color: #2196f3;
--control-number-buttons-color: #2196f3;
--control-number-buttons-background-color: #2196f3;
--control-number-buttons-background-opacity: 0.1;
--control-number-buttons-thickness: 100px;
--control-number-buttons-border-radius: 36px;
}
`;
}
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-svg-icon";
type SelectMenuOptions = {
interface SelectMenuOptions {
label: string;
value: string;
icon?: string;
};
}
type SelectMenu = {
interface SelectMenu {
label: string;
icon: string;
class?: string;
disabled?: boolean;
options: SelectMenuOptions[];
};
}
const selects: SelectMenu[] = [
{
@ -112,32 +112,30 @@ export class DemoHaControlSelectMenu extends LitElement {
`;
}
static get styles() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
--control-button-icon-color: var(--primary-color);
--control-button-background-color: var(--primary-color);
--control-button-background-opacity: 0.2;
--control-button-border-radius: 18px;
height: 100px;
width: 100px;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
--control-button-icon-color: var(--primary-color);
--control-button-background-color: var(--primary-color);
--control-button-background-opacity: 0.2;
--control-button-border-radius: 18px;
height: 100px;
width: 100px;
}
`;
}
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() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
--mdc-icon-size: 24px;
--control-select-color: var(--state-fan-active-color);
--control-select-thickness: 130px;
--control-select-border-radius: 36px;
}
.vertical-selects {
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
p.title {
margin-bottom: 12px;
}
.vertical-selects > *:not(:last-child) {
margin-right: 4px;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
--mdc-icon-size: 24px;
--control-select-color: var(--state-fan-active-color);
--control-select-thickness: 130px;
--control-select-border-radius: 36px;
}
.vertical-selects {
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
p.title {
margin-bottom: 12px;
}
.vertical-selects > *:not(:last-child) {
margin-right: 4px;
}
`;
}
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() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
--control-slider-color: #ffcf4c;
--control-slider-background: #ffcf4c;
--control-slider-background-opacity: 0.2;
--control-slider-thickness: 130px;
--control-slider-border-radius: 36px;
}
.vertical-sliders {
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
p.title {
margin-bottom: 12px;
}
.vertical-sliders > *:not(:last-child) {
margin-right: 4px;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
--control-slider-color: #ffcf4c;
--control-slider-background: #ffcf4c;
--control-slider-background-opacity: 0.2;
--control-slider-thickness: 130px;
--control-slider-border-radius: 36px;
}
.vertical-sliders {
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
p.title {
margin-bottom: 12px;
}
.vertical-sliders > *:not(:last-child) {
margin-right: 4px;
}
`;
}
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() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
--control-switch-on-color: var(--green-color);
--control-switch-off-color: var(--red-color);
--control-switch-thickness: 130px;
--control-switch-border-radius: 36px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
.vertical-switches {
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
p.title {
margin-bottom: 12px;
}
.vertical-switches > *:not(:last-child) {
margin-right: 4px;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
--control-switch-on-color: var(--green-color);
--control-switch-off-color: var(--red-color);
--control-switch-thickness: 130px;
--control-switch-border-radius: 36px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
.vertical-switches {
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
p.title {
margin-bottom: 12px;
}
.vertical-switches > *:not(:last-child) {
margin-right: 4px;
}
`;
}
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() {
return css`
ha-expansion-panel {
margin: -16px;
}
`;
}
static styles = css`
ha-expansion-panel {
margin: -16px;
}
`;
}
declare global {

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

@ -61,14 +61,12 @@ export class DemoHaFaded extends LitElement {
`;
}
static get styles() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
`;
}
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() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
.card-content {
display: flex;
align-items: center;
flex-direction: column;
}
ha-hs-color-picker {
width: 400px;
}
.value {
font-size: 22px;
font-weight: bold;
margin: 0 0 12px 0;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
.card-content {
display: flex;
align-items: center;
flex-direction: column;
}
ha-hs-color-picker {
width: 400px;
}
.value {
font-size: 22px;
font-weight: bold;
margin: 0 0 12px 0;
}
`;
}
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() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-left: 16px;
background-color: var(--markdown-code-background-color);
padding: 8px;
}
.badge {
display: flex;
flex-direction: row;
margin-bottom: 16px;
align-items: center;
}
`;
}
static styles = css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-left: 16px;
background-color: var(--markdown-code-background-color);
padding: 8px;
}
.badge {
display: flex;
flex-direction: row;
margin-bottom: 16px;
align-items: center;
}
`;
}
declare global {

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

@ -48,27 +48,25 @@ export class DemoHaTip extends LitElement {
);
}
static get styles() {
return css`
:host {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.dark,
.light {
display: block;
background-color: var(--primary-background-color);
padding: 0 50px;
}
ha-tip {
margin-bottom: 14px;
}
ha-card {
margin: 24px auto;
}
`;
}
static styles = css`
:host {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.dark,
.light {
display: block;
background-color: var(--primary-background-color);
padding: 0 50px;
}
ha-tip {
margin-bottom: 14px;
}
ha-card {
margin: 24px auto;
}
`;
}
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() {
return css`
ha-control-select {
max-width: 800px;
margin: 12px auto;
}
.header {
font-weight: bold;
}
.center {
text-align: center;
}
.container {
max-width: 900px;
margin: 12px auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
static styles = css`
ha-control-select {
max-width: 800px;
margin: 12px auto;
}
.header {
font-weight: bold;
}
.center {
text-align: center;
}
.container {
max-width: 900px;
margin: 12px auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.container > div {
flex-grow: 1;
width: 20%;
}
`;
}
.container > div {
flex-grow: 1;
width: 20%;
}
`;
}
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() {
return css`
ha-control-select {
max-width: 800px;
margin: 12px auto;
}
.header {
font-weight: bold;
}
.center {
text-align: center;
}
.container {
max-width: 900px;
margin: 12px auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
static styles = css`
ha-control-select {
max-width: 800px;
margin: 12px auto;
}
.header {
font-weight: bold;
}
.center {
text-align: center;
}
.container {
max-width: 900px;
margin: 12px auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.container > div {
flex-grow: 1;
width: 20%;
}
`;
}
.container > div {
flex-grow: 1;
width: 20%;
}
`;
}
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() {
return css`
ha-control-select {
max-width: 800px;
margin: 12px auto;
}
.header {
font-weight: bold;
}
.center {
text-align: center;
}
.container {
max-width: 900px;
margin: 12px auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
static styles = css`
ha-control-select {
max-width: 800px;
margin: 12px auto;
}
.header {
font-weight: bold;
}
.center {
text-align: center;
}
.container {
max-width: 900px;
margin: 12px auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.container > div {
flex-grow: 1;
width: 20%;
}
`;
}
.container > div {
flex-grow: 1;
width: 20%;
}
`;
}
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() {
return css`
ha-control-select {
max-width: 800px;
margin: 12px auto;
}
.header {
font-weight: bold;
}
.center {
text-align: center;
}
.container {
max-width: 900px;
margin: 12px auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
static styles = css`
ha-control-select {
max-width: 800px;
margin: 12px auto;
}
.header {
font-weight: bold;
}
.center {
text-align: center;
}
.container {
max-width: 900px;
margin: 12px auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.container > div {
flex-grow: 1;
width: 20%;
}
`;
}
.container > div {
flex-grow: 1;
width: 20%;
}
`;
}
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() {
return css`
ha-control-select {
max-width: 800px;
margin: 12px auto;
}
.header {
font-weight: bold;
}
.center {
text-align: center;
}
.container {
max-width: 900px;
margin: 12px auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
static styles = css`
ha-control-select {
max-width: 800px;
margin: 12px auto;
}
.header {
font-weight: bold;
}
.center {
text-align: center;
}
.container {
max-width: 900px;
margin: 12px auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.container > div {
flex-grow: 1;
width: 20%;
}
`;
}
.container > div {
flex-grow: 1;
width: 20%;
}
`;
}
declare global {

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

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

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

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

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

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

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

@ -76,14 +76,12 @@ export class DemoMiscMarkdown extends LitElement {
`;
}
static get styles() {
return css`
ha-card {
margin: 12px;
padding: 12px;
}
`;
}
static styles = css`
ha-card {
margin: 12px;
padding: 12px;
}
`;
}
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[];
is_custom?: boolean;
disabled?: boolean;
highlight?: string;
}> = [
}[] = [
{ items: [loadedEntry] },
{ items: [configPanelEntry] },
{ items: [optionsFlowEntry] },
@ -349,26 +349,24 @@ export class DemoIntegrationCard extends LitElement {
this.isCloud = !this.isCloud;
}
static get styles() {
return css`
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 8px 8px;
padding: 8px 16px 16px;
margin-bottom: 16px;
}
static styles = css`
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 8px 8px;
padding: 8px 16px 16px;
margin-bottom: 16px;
}
.container > * {
max-width: 500px;
}
.container > * {
max-width: 500px;
}
ha-formfield {
margin: 8px 0;
display: block;
}
`;
}
ha-formfield {
margin: 8px 0;
display: block;
}
`;
}
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 "@material/mwc-list/mwc-list-item";
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 { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -211,35 +211,33 @@ export class HassioAddonStore extends LitElement {
this._filter = e.detail.value;
}
static get styles(): CSSResultGroup {
return css`
hassio-addon-repository {
margin-top: 24px;
}
.search {
position: sticky;
top: 0;
z-index: 2;
}
search-input {
display: block;
--mdc-text-field-fill-color: var(--sidebar-background-color);
--mdc-text-field-idle-line-color: var(--divider-color);
}
.advanced {
padding: 12px;
display: flex;
flex-wrap: wrap;
color: var(--primary-text-color);
}
.advanced a {
margin-left: 0.5em;
margin-inline-start: 0.5em;
margin-inline-end: initial;
color: var(--primary-color);
}
`;
}
static styles = css`
hassio-addon-repository {
margin-top: 24px;
}
.search {
position: sticky;
top: 0;
z-index: 2;
}
search-input {
display: block;
--mdc-text-field-fill-color: var(--sidebar-background-color);
--mdc-text-field-idle-line-color: var(--divider-color);
}
.advanced {
padding: 12px;
display: flex;
flex-wrap: wrap;
color: var(--primary-text-color);
}
.advanced a {
margin-left: 0.5em;
margin-inline-start: 0.5em;
margin-inline-end: initial;
color: var(--primary-color);
}
`;
}
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) {
this._valid = true;
this._configHasChanged = true;
this._options! = ev.detail.value;
this._options = ev.detail.value;
} else {
this._configHasChanged = true;
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> {
this._configHasChanged = true;
this._config! = ev.detail.value;
this._config = ev.detail.value;
}
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 type { CSSResultGroup, TemplateResult } from "lit";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../src/components/ha-svg-icon";
@ -64,86 +64,84 @@ class HassioCardContent extends LitElement {
`;
}
static get styles(): CSSResultGroup {
return css`
:host {
direction: ltr;
}
static styles = css`
:host {
direction: ltr;
}
ha-svg-icon {
margin-right: 24px;
margin-left: 8px;
margin-top: 12px;
float: left;
color: var(--secondary-text-color);
}
ha-svg-icon.update {
color: var(--warning-color);
}
ha-svg-icon.running,
ha-svg-icon.installed {
color: var(--success-color);
}
ha-svg-icon.hassupdate,
ha-svg-icon.backup {
color: var(--paper-item-icon-color);
}
ha-svg-icon.not_available {
color: var(--error-color);
}
.title {
color: var(--primary-text-color);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.addition {
color: var(--secondary-text-color);
overflow: hidden;
position: relative;
height: 2.4em;
line-height: 1.2em;
}
.icon_image img {
max-height: 40px;
max-width: 40px;
margin-top: 4px;
margin-right: 16px;
float: left;
}
.icon_image.stopped,
.icon_image.not_available {
filter: grayscale(1);
}
.dot {
position: absolute;
background-color: var(--warning-color);
width: 12px;
height: 12px;
top: 8px;
right: 8px;
border-radius: 50%;
}
.topbar {
position: absolute;
width: 100%;
height: 2px;
top: 0;
left: 0;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.topbar.installed {
background-color: var(--primary-color);
}
.topbar.update {
background-color: var(--accent-color);
}
.topbar.unavailable {
background-color: var(--error-color);
}
`;
}
ha-svg-icon {
margin-right: 24px;
margin-left: 8px;
margin-top: 12px;
float: left;
color: var(--secondary-text-color);
}
ha-svg-icon.update {
color: var(--warning-color);
}
ha-svg-icon.running,
ha-svg-icon.installed {
color: var(--success-color);
}
ha-svg-icon.hassupdate,
ha-svg-icon.backup {
color: var(--paper-item-icon-color);
}
ha-svg-icon.not_available {
color: var(--error-color);
}
.title {
color: var(--primary-text-color);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.addition {
color: var(--secondary-text-color);
overflow: hidden;
position: relative;
height: 2.4em;
line-height: 1.2em;
}
.icon_image img {
max-height: 40px;
max-width: 40px;
margin-top: 4px;
margin-right: 16px;
float: left;
}
.icon_image.stopped,
.icon_image.not_available {
filter: grayscale(1);
}
.dot {
position: absolute;
background-color: var(--warning-color);
width: 12px;
height: 12px;
top: 8px;
right: 8px;
border-radius: 50%;
}
.topbar {
position: absolute;
width: 100%;
height: 2px;
top: 0;
left: 0;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.topbar.installed {
background-color: var(--primary-color);
}
.topbar.update {
background-color: var(--accent-color);
}
.topbar.unavailable {
background-color: var(--error-color);
}
`;
}
declare global {

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

@ -1,5 +1,5 @@
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 { customElement, property, query } from "lit/decorators";
import { atLeastVersion } from "../../../src/common/config/version";
@ -283,52 +283,50 @@ export class SupervisorBackupContent extends LitElement {
this.homeAssistant = !this.homeAssistant;
}
static get styles(): CSSResultGroup {
return css`
.partial-picker ha-formfield {
display: block;
}
.partial-picker ha-checkbox {
--mdc-checkbox-touch-target-size: 32px;
}
.partial-picker {
display: block;
margin: 0px -6px;
}
supervisor-formfield-label {
display: inline-flex;
align-items: center;
}
hr {
border-color: var(--divider-color);
border-bottom: none;
margin: 16px 0;
}
.details {
color: var(--secondary-text-color);
}
.section-content {
display: flex;
flex-direction: column;
margin-left: 30px;
margin-inline-start: 30px;
margin-inline-end: initial;
}
ha-formfield.password {
display: block;
margin: 0 -14px -16px;
}
.backup-types {
display: flex;
margin-left: -13px;
margin-inline-start: -13px;
margin-inline-end: initial;
}
.sub-header {
margin-top: 8px;
}
`;
}
static styles = css`
.partial-picker ha-formfield {
display: block;
}
.partial-picker ha-checkbox {
--mdc-checkbox-touch-target-size: 32px;
}
.partial-picker {
display: block;
margin: 0px -6px;
}
supervisor-formfield-label {
display: inline-flex;
align-items: center;
}
hr {
border-color: var(--divider-color);
border-bottom: none;
margin: 16px 0;
}
.details {
color: var(--secondary-text-color);
}
.section-content {
display: flex;
flex-direction: column;
margin-left: 30px;
margin-inline-start: 30px;
margin-inline-end: initial;
}
ha-formfield.password {
display: block;
margin: 0 -14px -16px;
}
.backup-types {
display: flex;
margin-left: -13px;
margin-inline-start: -13px;
margin-inline-end: initial;
}
.sub-header {
margin-top: 8px;
}
`;
public backupDetails():
| 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 { customElement, property } from "lit/decorators";
import "../../../src/components/ha-svg-icon";
@ -30,29 +30,27 @@ class SupervisorFormfieldLabel extends LitElement {
`;
}
static get styles(): CSSResultGroup {
return css`
:host {
display: flex;
align-items: center;
}
.label {
margin-right: 4px;
margin-inline-end: 4px;
margin-inline-start: initial;
}
.version {
color: var(--secondary-text-color);
}
.icon {
max-height: 22px;
max-width: 22px;
margin-right: 8px;
margin-inline-end: 8px;
margin-inline-start: initial;
}
`;
}
static styles = css`
:host {
display: flex;
align-items: center;
}
.label {
margin-right: 4px;
margin-inline-end: 4px;
margin-inline-start: initial;
}
.version {
color: var(--secondary-text-color);
}
.icon {
max-height: 22px;
max-width: 22px;
margin-right: 8px;
margin-inline-end: 8px;
margin-inline-start: initial;
}
`;
}
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 { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
@ -31,46 +31,41 @@ class SupervisorMetric extends LitElement {
</ha-settings-row>`;
}
static get styles(): CSSResultGroup {
return css`
ha-settings-row {
padding: 0;
height: 54px;
width: 100%;
}
ha-settings-row > div[slot="description"] {
white-space: normal;
color: var(--secondary-text-color);
display: flex;
justify-content: space-between;
}
ha-bar {
--ha-bar-primary-color: var(
--hassio-bar-ok-color,
var(--success-color)
);
}
.target-warning {
--ha-bar-primary-color: var(
--hassio-bar-warning-color,
var(--warning-color)
);
}
.target-critical {
--ha-bar-primary-color: var(
--hassio-bar-critical-color,
var(--error-color)
);
}
.value {
width: 48px;
padding-right: 4px;
padding-inline-start: initial;
padding-inline-end: 4px;
flex-shrink: 0;
}
`;
}
static styles = css`
ha-settings-row {
padding: 0;
height: 54px;
width: 100%;
}
ha-settings-row > div[slot="description"] {
white-space: normal;
color: var(--secondary-text-color);
display: flex;
justify-content: space-between;
}
ha-bar {
--ha-bar-primary-color: var(--hassio-bar-ok-color, var(--success-color));
}
.target-warning {
--ha-bar-primary-color: var(
--hassio-bar-warning-color,
var(--warning-color)
);
}
.target-critical {
--ha-bar-primary-color: var(
--hassio-bar-critical-color,
var(--error-color)
);
}
.value {
width: 48px;
padding-right: 4px;
padding-inline-start: initial;
padding-inline-end: 4px;
flex-shrink: 0;
}
`;
}
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 { customElement, property } from "lit/decorators";
import type { Supervisor } from "../../src/data/supervisor/supervisor";
@ -39,15 +39,13 @@ class HassioPanel extends LitElement {
`;
}
static get styles(): CSSResultGroup {
return css`
:host {
--app-header-background-color: var(--sidebar-background-color);
--app-header-text-color: var(--sidebar-text-color);
--app-header-border-bottom: 1px solid var(--divider-color);
}
`;
}
static styles = css`
:host {
--app-header-background-color: var(--sidebar-background-color);
--app-header-text-color: var(--sidebar-text-color);
--app-header-border-bottom: 1px solid var(--divider-color);
}
`;
}
declare global {

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

@ -1,5 +1,5 @@
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 { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../src/common/dom/fire_event";
@ -325,51 +325,49 @@ class HassioIngressView extends LitElement {
fireEvent(this, "hass-toggle-menu");
}
static get styles(): CSSResultGroup {
return css`
iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
static styles = css`
iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.header + iframe {
height: calc(100% - 40px);
}
.header + iframe {
height: calc(100% - 40px);
}
.header {
display: flex;
align-items: center;
font-size: 16px;
height: 40px;
padding: 0 16px;
pointer-events: none;
background-color: var(--app-header-background-color);
font-weight: 400;
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
box-sizing: border-box;
--mdc-icon-size: 20px;
}
.header {
display: flex;
align-items: center;
font-size: 16px;
height: 40px;
padding: 0 16px;
pointer-events: none;
background-color: var(--app-header-background-color);
font-weight: 400;
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
box-sizing: border-box;
--mdc-icon-size: 20px;
}
.main-title {
margin: var(--margin-title);
line-height: 20px;
flex-grow: 1;
}
.main-title {
margin: var(--margin-title);
line-height: 20px;
flex-grow: 1;
}
ha-icon-button {
pointer-events: auto;
}
ha-icon-button {
pointer-events: auto;
}
hass-subpage {
--app-header-background-color: var(--sidebar-background-color);
--app-header-text-color: var(--sidebar-text-color);
--app-header-border-bottom: 1px solid var(--divider-color);
}
`;
}
hass-subpage {
--app-header-background-color: var(--sidebar-background-color);
--app-header-text-color: var(--sidebar-text-color);
--app-header-border-bottom: 1px solid var(--divider-color);
}
`;
}
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 { customElement, property } from "lit/decorators";
import type { Supervisor } from "../../../src/data/supervisor/supervisor";
@ -38,20 +38,18 @@ class UpdateAvailableDashboard extends LitElement {
history.back();
}
static get styles(): CSSResultGroup {
return css`
hass-subpage {
--app-header-background-color: var(--primary-background-color);
--app-header-text-color: var(--sidebar-text-color);
}
update-available-card {
margin: auto;
margin-top: 16px;
margin-bottom: 24px;
max-width: 600px;
}
`;
}
static styles = css`
hass-subpage {
--app-header-background-color: var(--primary-background-color);
--app-header-text-color: var(--sidebar-text-color);
}
update-available-card {
margin: auto;
margin-top: 16px;
margin-bottom: 24px;
max-width: 600px;
}
`;
}
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.
public status?: ReceiverStatusMessage;
private _eventListeners: { [event: string]: CastEventListener[] } = {};
private _eventListeners: Record<string, CastEventListener[]> = {};
constructor(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 = (
hass: HomeAssistant,
service: string
): Array<string> =>
): string[] =>
hass &&
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;
private _storage: { [storageKey: string]: any } = {};
private _storage: Record<string, any> = {};
private _listeners: {
[storageKey: string]: Callback[];
} = {};
private _listeners: Record<string, Callback[]> = {};
public addFromStorage(storageKey: any): void {
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.
*/
export interface Transformer<T = any, V = any> {
(value: V): T;
}
export type Transformer<T = any, V = any> = (value: V) => T;
type ReactiveTransformElement = ReactiveElement & {
_transformers: Map<PropertyKey, Transformer>;

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

@ -32,7 +32,7 @@ export const ancestorsWithProperty = (
property: string | symbol,
own = DEFAULT_OWN
) => {
const ancestors: Set<Element> = new Set();
const ancestors = new Set<Element>();
while (element) {
ancestors.add(element);
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";
interface ProcessedTheme {
keys: { [key: string]: "" };
keys: Record<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 = (
entityId: string,
attributes: { [key: string]: any }
attributes: Record<string, any>
): string =>
attributes.friendly_name === undefined
? 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);
export const supportsFeatureFromAttributes = (
attributes: {
[key: string]: any;
},
attributes: Record<string, any>,
feature: number
): boolean =>
// 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
*/
// export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number];
export type FuzzyScore = Array<number>;
export type FuzzyScore = number[];
export function fuzzyScore(
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 _diag = initTable(); // the length of a contiguous diagonal match
const _table = initTable();
const _arrows = <Arrow[][]>initTable();
const _arrows = initTable() as Arrow[][];
function initArr(maxLen: number) {
const row: number[] = [];
@ -498,17 +498,15 @@ function _fillInMaxWordMatchPos(
}
}
export interface FuzzyScorer {
(
pattern: string,
lowPattern: string,
patternPos: number,
word: string,
lowWord: string,
wordPos: number,
firstMatchCanBeWeak: boolean
): FuzzyScore | undefined;
}
export type FuzzyScorer = (
pattern: string,
lowPattern: string,
patternPos: number,
word: string,
lowWord: string,
wordPos: number,
firstMatchCanBeWeak: boolean
) => FuzzyScore | undefined;
export function createMatches(score: undefined | FuzzyScore): Match[] {
if (typeof score === "undefined") {

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

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

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

@ -1,7 +1,7 @@
export const groupBy = <T>(
list: T[],
keySelector: (item: T) => string
): { [key: string]: T[] } => {
): Record<string, T[]> => {
const result = {};
for (const item of list) {
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";
interface ResultCache<T> {
[entityId: string]: Promise<T> | undefined;
}
type ResultCache<T> = Record<string, Promise<T> | undefined>;
/**
* 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 { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
import type { CSSResultGroup, TemplateResult } from "lit";
import type { TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../ha-circular-progress";
@ -62,64 +62,62 @@ export class HaProgressButton extends LitElement {
}, 2000);
}
static get styles(): CSSResultGroup {
return css`
:host {
outline: none;
display: inline-block;
position: relative;
pointer-events: none;
}
static styles = css`
:host {
outline: none;
display: inline-block;
position: relative;
pointer-events: none;
}
mwc-button {
transition: all 1s;
pointer-events: initial;
}
mwc-button {
transition: all 1s;
pointer-events: initial;
}
mwc-button.success {
--mdc-theme-primary: white;
background-color: var(--success-color);
transition: none;
border-radius: 4px;
pointer-events: none;
}
mwc-button.success {
--mdc-theme-primary: white;
background-color: var(--success-color);
transition: none;
border-radius: 4px;
pointer-events: none;
}
mwc-button[raised].success {
--mdc-theme-primary: var(--success-color);
--mdc-theme-on-primary: white;
}
mwc-button[raised].success {
--mdc-theme-primary: var(--success-color);
--mdc-theme-on-primary: white;
}
mwc-button.error {
--mdc-theme-primary: white;
background-color: var(--error-color);
transition: none;
border-radius: 4px;
pointer-events: none;
}
mwc-button.error {
--mdc-theme-primary: white;
background-color: var(--error-color);
transition: none;
border-radius: 4px;
pointer-events: none;
}
mwc-button[raised].error {
--mdc-theme-primary: var(--error-color);
--mdc-theme-on-primary: white;
}
mwc-button[raised].error {
--mdc-theme-primary: var(--error-color);
--mdc-theme-on-primary: white;
}
.progress {
bottom: 4px;
position: absolute;
text-align: center;
top: 4px;
width: 100%;
}
.progress {
bottom: 4px;
position: absolute;
text-align: center;
top: 4px;
width: 100%;
}
ha-svg-icon {
color: white;
}
ha-svg-icon {
color: white;
}
mwc-button.success slot,
mwc-button.error slot {
visibility: hidden;
}
`;
}
mwc-button.success slot,
mwc-button.error slot {
visibility: hidden;
}
`;
}
declare global {

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

@ -6,7 +6,7 @@ import type {
TooltipModel,
UpdateMode,
} from "chart.js";
import type { CSSResultGroup, PropertyValues } from "lit";
import type { PropertyValues } from "lit";
import { css, html, nothing, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
@ -60,7 +60,7 @@ export class HaChartBase extends LitElement {
@state() private _tooltip?: Tooltip;
@state() private _hiddenDatasets: Set<number> = new Set();
@state() private _hiddenDatasets = new Set<number>();
@state() private _showZoomHint = false;
@ -526,145 +526,143 @@ export class HaChartBase extends LitElement {
this._tooltip = undefined;
};
static get styles(): CSSResultGroup {
return css`
:host {
display: block;
position: relative;
}
.chart-container {
position: relative;
}
canvas {
max-height: var(--chart-max-height, 400px);
}
canvas.not-zoomed {
/* allow scrolling if the chart is not zoomed */
touch-action: pan-y !important;
}
.chart-legend {
text-align: center;
}
.chart-legend li {
cursor: pointer;
display: inline-grid;
grid-auto-flow: column;
padding: 0 8px;
box-sizing: border-box;
align-items: center;
color: var(--secondary-text-color);
}
.chart-legend .hidden {
text-decoration: line-through;
}
.chart-legend .label {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.chart-legend .bullet,
.chart-tooltip .bullet {
border-width: 1px;
border-style: solid;
border-radius: 50%;
display: inline-block;
height: 16px;
margin-right: 6px;
width: 16px;
flex-shrink: 0;
box-sizing: border-box;
margin-inline-end: 6px;
margin-inline-start: initial;
direction: var(--direction);
}
.chart-tooltip .bullet {
align-self: baseline;
}
.chart-tooltip {
padding: 8px;
font-size: 90%;
position: fixed;
background: rgba(80, 80, 80, 0.9);
color: white;
border-radius: 4px;
pointer-events: none;
z-index: 1;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
width: 200px;
box-sizing: border-box;
direction: var(--direction);
}
.chart-legend ul,
.chart-tooltip ul {
display: inline-block;
padding: 0 0px;
margin: 8px 0 0 0;
width: 100%;
}
.chart-tooltip ul {
margin: 0 4px;
}
.chart-tooltip li {
display: flex;
white-space: pre-line;
word-break: break-word;
align-items: center;
line-height: 16px;
padding: 4px 0;
}
.chart-tooltip .title {
text-align: center;
font-weight: 500;
word-break: break-word;
direction: ltr;
}
.chart-tooltip .footer {
font-weight: 500;
}
.chart-tooltip .before-body {
text-align: center;
font-weight: 300;
word-break: break-all;
}
.zoom-hint {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.zoom-hint.visible {
opacity: 1;
}
.zoom-hint > div {
color: white;
font-size: 1.5em;
font-weight: 500;
padding: 8px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 32px 32px rgba(0, 0, 0, 0.3);
}
.zoom-reset {
position: absolute;
top: 16px;
right: 4px;
background: var(--card-background-color);
border-radius: 4px;
--mdc-icon-button-size: 32px;
color: var(--primary-color);
border: 1px solid var(--divider-color);
}
`;
}
static styles = css`
:host {
display: block;
position: relative;
}
.chart-container {
position: relative;
}
canvas {
max-height: var(--chart-max-height, 400px);
}
canvas.not-zoomed {
/* allow scrolling if the chart is not zoomed */
touch-action: pan-y !important;
}
.chart-legend {
text-align: center;
}
.chart-legend li {
cursor: pointer;
display: inline-grid;
grid-auto-flow: column;
padding: 0 8px;
box-sizing: border-box;
align-items: center;
color: var(--secondary-text-color);
}
.chart-legend .hidden {
text-decoration: line-through;
}
.chart-legend .label {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.chart-legend .bullet,
.chart-tooltip .bullet {
border-width: 1px;
border-style: solid;
border-radius: 50%;
display: inline-block;
height: 16px;
margin-right: 6px;
width: 16px;
flex-shrink: 0;
box-sizing: border-box;
margin-inline-end: 6px;
margin-inline-start: initial;
direction: var(--direction);
}
.chart-tooltip .bullet {
align-self: baseline;
}
.chart-tooltip {
padding: 8px;
font-size: 90%;
position: fixed;
background: rgba(80, 80, 80, 0.9);
color: white;
border-radius: 4px;
pointer-events: none;
z-index: 1;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
width: 200px;
box-sizing: border-box;
direction: var(--direction);
}
.chart-legend ul,
.chart-tooltip ul {
display: inline-block;
padding: 0 0px;
margin: 8px 0 0 0;
width: 100%;
}
.chart-tooltip ul {
margin: 0 4px;
}
.chart-tooltip li {
display: flex;
white-space: pre-line;
word-break: break-word;
align-items: center;
line-height: 16px;
padding: 4px 0;
}
.chart-tooltip .title {
text-align: center;
font-weight: 500;
word-break: break-word;
direction: ltr;
}
.chart-tooltip .footer {
font-weight: 500;
}
.chart-tooltip .before-body {
text-align: center;
font-weight: 300;
word-break: break-all;
}
.zoom-hint {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.zoom-hint.visible {
opacity: 1;
}
.zoom-hint > div {
color: white;
font-size: 1.5em;
font-weight: 500;
padding: 8px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 32px 32px rgba(0, 0, 0, 0.3);
}
.zoom-reset {
position: absolute;
top: 16px;
right: 4px;
background: var(--card-background-color);
border-radius: 4px;
--mdc-icon-button-size: 32px;
color: var(--primary-color);
border: 1px solid var(--divider-color);
}
`;
}
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 type { HomeAssistant } from "../../types";
export type Node = {
export interface Node {
id: string;
value: number;
index: number; // like z-index but for x/y
@ -12,13 +12,17 @@ export type Node = {
tooltip?: string;
color?: string;
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[];
links: Link[];
};
}
type ProcessedNode = Node & {
x: number;
@ -35,13 +39,13 @@ type ProcessedLink = Link & {
passThroughNodeIds: string[];
};
type Section = {
interface Section {
nodes: ProcessedNode[];
offset: number;
index: number;
totalValue: number;
statePerPixel: number;
};
}
const MIN_SIZE = 3;
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
? 0
: states.states[0].last_changed;
for (let i = 0; i < states.statistics.length; i++) {
if (stopTime && states.statistics[i].last_changed >= stopTime) {
for (const statistic of states.statistics) {
if (stopTime && statistic.last_changed >= stopTime) {
break;
}
processData(states.statistics[i]);
processData(statistic);
}
}
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 { getRelativePosition } from "chart.js/helpers";
import type { CSSResultGroup, PropertyValues } from "lit";
import type { PropertyValues } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@ -319,13 +319,11 @@ export class StateHistoryChartTimeline extends LitElement {
};
}
static get styles(): CSSResultGroup {
return css`
ha-chart-base {
--chart-max-height: none;
}
`;
}
static styles = css`
ha-chart-base {
--chart-max-height: none;
}
`;
}
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 { customElement, eventOptions, property, state } from "lit/decorators";
import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
@ -272,64 +272,62 @@ export class StateHistoryCharts extends LitElement {
this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
}
static get styles(): CSSResultGroup {
return css`
:host {
display: block;
/* height of single timeline chart = 60px */
min-height: 60px;
}
static styles = css`
:host {
display: block;
/* height of single timeline chart = 60px */
min-height: 60px;
}
:host([virtualize]) {
height: 100%;
}
:host([virtualize]) {
height: 100%;
}
.info {
text-align: center;
line-height: 60px;
color: var(--secondary-text-color);
}
.info {
text-align: center;
line-height: 60px;
color: var(--secondary-text-color);
}
.container {
max-height: var(--history-max-height);
}
.container {
max-height: var(--history-max-height);
}
.entry-container {
width: 100%;
}
.entry-container {
width: 100%;
}
.entry-container:hover {
z-index: 1;
}
.entry-container:hover {
z-index: 1;
}
:host([virtualize]) .entry-container {
padding-left: 1px;
padding-right: 1px;
padding-inline-start: 1px;
padding-inline-end: 1px;
}
:host([virtualize]) .entry-container {
padding-left: 1px;
padding-right: 1px;
padding-inline-start: 1px;
padding-inline-end: 1px;
}
.entry-container:not(:first-child) {
border-top: 2px solid var(--divider-color);
margin-top: 16px;
}
.entry-container:not(:first-child) {
border-top: 2px solid var(--divider-color);
margin-top: 16px;
}
.container,
lit-virtualizer {
height: 100%;
width: 100%;
}
.container,
lit-virtualizer {
height: 100%;
width: 100%;
}
lit-virtualizer {
contain: size layout !important;
}
lit-virtualizer {
contain: size layout !important;
}
state-history-chart-timeline,
state-history-chart-line {
width: 100%;
}
`;
}
state-history-chart-timeline,
state-history-chart-line {
width: 100%;
}
`;
}
declare global {

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

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

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

@ -49,7 +49,7 @@ function computeTimelineStateColor(
}
let colorIndex = 0;
const stateColorMap: Map<string, string> = new Map();
const stateColorMap = new Map<string, string>();
function computeTimeLineGenericColor(
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
const findLastIndex = (
arr: Array<any>,
fn: (item: any, index: number, arr: Array<any>) => boolean
arr: any[],
fn: (item: any, index: number, arr: any[]) => boolean
) => {
for (let i = arr.length - 1; i >= 0; 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);
}
static get styles() {
return css`
:host {
display: inline-block;
position: relative;
}
ha-svg-icon {
color: var(--secondary-text-color);
}
div {
position: absolute;
right: 28px;
inset-inline-end: 28px;
inset-inline-start: initial;
z-index: 1002;
outline: none;
font-size: 10px;
line-height: 1;
background-color: var(--simple-tooltip-background, #616161);
color: var(--simple-tooltip-text-color, white);
padding: 8px;
border-radius: 2px;
}
`;
}
static styles = css`
:host {
display: inline-block;
position: relative;
}
ha-svg-icon {
color: var(--secondary-text-color);
}
div {
position: absolute;
right: 28px;
inset-inline-end: 28px;
inset-inline-start: initial;
z-index: 1002;
outline: none;
font-size: 10px;
line-height: 1;
background-color: var(--simple-tooltip-background, #616161);
color: var(--simple-tooltip-text-color, white);
padding: 8px;
border-radius: 2px;
}
`;
}
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() {
return css`
:host {
display: block;
flex-grow: 1;
margin-top: 4px;
height: 22px;
}
ha-chip-set {
position: fixed;
flex-wrap: nowrap;
}
ha-label {
--ha-label-background-color: var(--color, var(--grey-color));
--ha-label-background-opacity: 0.5;
}
ha-button-menu {
border-radius: 10px;
}
.plus {
--ha-label-background-color: transparent;
border: 1px solid var(--divider-color);
}
`;
}
static styles = css`
:host {
display: block;
flex-grow: 1;
margin-top: 4px;
height: 22px;
}
ha-chip-set {
position: fixed;
flex-wrap: nowrap;
}
ha-label {
--ha-label-background-color: var(--color, var(--grey-color));
--ha-label-background-opacity: 0.5;
}
ha-button-menu {
border-radius: 10px;
}
.plus {
--ha-label-background-color: transparent;
border: 1px solid var(--divider-color);
}
`;
}
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 interface DataTableColumnContainer<T = any> {
[key: string]: DataTableColumnData<T>;
}
export type DataTableColumnContainer<T = any> = Record<
string,
DataTableColumnData<T>
>;
export interface DataTableSortColumnData {
sortable?: boolean;
@ -94,9 +95,7 @@ export interface DataTableRowData {
selectable?: boolean;
}
export interface SortableColumnContainer {
[key: string]: ClonedDataTableColumnData;
}
export type SortableColumnContainer = Record<string, ClonedDataTableColumnData>;
const UNDEFINED_GROUP_KEY = "zzzzz_undefined";
@ -694,9 +693,9 @@ export class HaDataTable extends LitElement {
grouped[UNDEFINED_GROUP_KEY] = grouped.undefined;
delete grouped.undefined;
}
const sorted: {
[key: string]: DataTableRowData[];
} = Object.keys(grouped)
const sorted: Record<string, DataTableRowData[]> = Object.keys(
grouped
)
.sort((a, b) => {
const orderA = groupOrder?.indexOf(a) ?? -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 "@material/mwc-list/mwc-list-item";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
@ -185,11 +184,9 @@ export abstract class HaDeviceAutomationPicker<
fireEvent(this, "value-changed", { value });
}
static get styles(): CSSResultGroup {
return css`
ha-select {
display: block;
}
`;
}
static styles = css`
ha-select {
display: block;
}
`;
}

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

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

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

@ -1,6 +1,6 @@
import { mdiAlert } from "@mdi/js";
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 { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
@ -26,7 +26,7 @@ const TRUNCATED_DOMAINS = [
"alarm_control_panel",
"device_tracker",
"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 TruncatedKey = {
@ -262,50 +262,48 @@ export class HaStateLabelBadge extends LitElement {
this._timerTimeRemaining = timerTimeRemaining(stateObj);
}
static get styles(): CSSResultGroup {
return css`
:host {
cursor: pointer;
}
.big {
font-size: 70%;
}
ha-label-badge {
--ha-label-badge-color: var(--label-badge-red);
}
ha-label-badge.has-unit_of_measurement {
--ha-label-badge-label-text-transform: none;
}
static styles = css`
:host {
cursor: pointer;
}
.big {
font-size: 70%;
}
ha-label-badge {
--ha-label-badge-color: var(--label-badge-red);
}
ha-label-badge.has-unit_of_measurement {
--ha-label-badge-label-text-transform: none;
}
ha-label-badge.binary_sensor {
--ha-label-badge-color: var(--label-badge-blue);
}
ha-label-badge.binary_sensor {
--ha-label-badge-color: var(--label-badge-blue);
}
.red {
--ha-label-badge-color: var(--label-badge-red);
}
.red {
--ha-label-badge-color: var(--label-badge-red);
}
.blue {
--ha-label-badge-color: var(--label-badge-blue);
}
.blue {
--ha-label-badge-color: var(--label-badge-blue);
}
.green {
--ha-label-badge-color: var(--label-badge-green);
}
.green {
--ha-label-badge-color: var(--label-badge-green);
}
.yellow {
--ha-label-badge-color: var(--label-badge-yellow);
}
.yellow {
--ha-label-badge-color: var(--label-badge-yellow);
}
.grey {
--ha-label-badge-color: var(--label-badge-grey);
}
.grey {
--ha-label-badge-color: var(--label-badge-grey);
}
.warning {
--ha-label-badge-color: var(--label-badge-yellow);
}
`;
}
.warning {
--ha-label-badge-color: var(--label-badge-yellow);
}
`;
}
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 { customElement, property } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
@ -172,19 +171,17 @@ class HaStatisticsPicker extends LitElement {
this._updateStatistics([...currentEntities, toAdd]);
}
static get styles(): CSSResultGroup {
return css`
:host {
width: 200px;
display: block;
}
ha-statistic-picker {
display: block;
width: 100%;
margin-top: 8px;
}
`;
}
static styles = css`
:host {
width: 200px;
display: block;
}
ha-statistic-picker {
display: block;
width: 100%;
margin-top: 8px;
}
`;
}
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
@property({ type: Boolean, reflect: true }) public icon = true;
@state() private _iconStyle: { [name: string]: string | undefined } = {};
@state() private _iconStyle: Record<string, string | undefined> = {};
connectedCallback(): void {
super.connectedCallback();
@ -108,7 +108,7 @@ export class StateBadge extends LitElement {
}
const stateObj = this.stateObj;
const iconStyle: { [name: string]: string } = {};
const iconStyle: Record<string, string> = {};
let backgroundImage = "";
this.icon = true;

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

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

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

@ -1,6 +1,5 @@
import {
css,
type CSSResultGroup,
html,
LitElement,
type PropertyValues,
@ -47,83 +46,81 @@ export class HaAnsiToHtml extends LitElement {
}
}
static get styles(): CSSResultGroup {
return css`
pre {
overflow-x: auto;
margin: 0;
}
pre.wrap {
white-space: pre-wrap;
overflow-wrap: break-word;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.strikethrough {
text-decoration: line-through;
}
.underline.strikethrough {
text-decoration: underline line-through;
}
.fg-red {
color: var(--error-color);
}
.fg-green {
color: var(--success-color);
}
.fg-yellow {
color: var(--warning-color);
}
.fg-blue {
color: var(--info-color);
}
.fg-magenta {
color: rgb(118, 38, 113);
}
.fg-cyan {
color: rgb(44, 181, 233);
}
.fg-white {
color: rgb(204, 204, 204);
}
.bg-black {
background-color: rgb(0, 0, 0);
}
.bg-red {
background-color: var(--error-color);
}
.bg-green {
background-color: var(--success-color);
}
.bg-yellow {
background-color: var(--warning-color);
}
.bg-blue {
background-color: var(--info-color);
}
.bg-magenta {
background-color: rgb(118, 38, 113);
}
.bg-cyan {
background-color: rgb(44, 181, 233);
}
.bg-white {
background-color: rgb(204, 204, 204);
}
static styles = css`
pre {
overflow-x: auto;
margin: 0;
}
pre.wrap {
white-space: pre-wrap;
overflow-wrap: break-word;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.underline {
text-decoration: underline;
}
.strikethrough {
text-decoration: line-through;
}
.underline.strikethrough {
text-decoration: underline line-through;
}
.fg-red {
color: var(--error-color);
}
.fg-green {
color: var(--success-color);
}
.fg-yellow {
color: var(--warning-color);
}
.fg-blue {
color: var(--info-color);
}
.fg-magenta {
color: rgb(118, 38, 113);
}
.fg-cyan {
color: rgb(44, 181, 233);
}
.fg-white {
color: rgb(204, 204, 204);
}
.bg-black {
background-color: rgb(0, 0, 0);
}
.bg-red {
background-color: var(--error-color);
}
.bg-green {
background-color: var(--success-color);
}
.bg-yellow {
background-color: var(--warning-color);
}
.bg-blue {
background-color: var(--info-color);
}
.bg-magenta {
background-color: rgb(118, 38, 113);
}
.bg-cyan {
background-color: rgb(44, 181, 233);
}
.bg-white {
background-color: rgb(204, 204, 204);
}
::highlight(search-results) {
background-color: var(--primary-color);
color: var(--text-primary-color);
}
`;
}
::highlight(search-results) {
background-color: var(--primary-color);
color: var(--text-primary-color);
}
`;
/**
* 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 type { CSSResultGroup, TemplateResult } from "lit";
import type { TemplateResult } from "lit";
import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
@ -9,10 +9,10 @@ import "./ha-icon-next";
import "./ha-svg-icon";
import "./ha-textfield";
export type AreaFilterValue = {
export interface AreaFilterValue {
hidden?: string[];
order?: string[];
};
}
@customElement("ha-area-filter")
export class HaAreaPicker extends LitElement {
@ -80,14 +80,12 @@ export class HaAreaPicker extends LitElement {
fireEvent(this, "value-changed", { value });
}
static get styles(): CSSResultGroup {
return css`
ha-list-item {
--mdc-list-side-padding-left: 8px;
--mdc-list-side-padding-right: 8px;
}
`;
}
static styles = css`
ha-list-item {
--mdc-list-side-padding-left: 8px;
--mdc-list-side-padding-right: 8px;
}
`;
}
declare global {

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

@ -345,9 +345,10 @@ export class HaAreaFloorPicker extends LitElement {
);
// @ts-ignore
const floorAreaEntries: Array<
[FloorRegistryEntry | undefined, AreaRegistryEntry[]]
> = Object.entries(floorAreaLookup)
const floorAreaEntries: [
FloorRegistryEntry | undefined,
AreaRegistryEntry[],
][] = Object.entries(floorAreaLookup)
.map(([floorId, floorAreas]) => {
const floor = floors.find((fl) => fl.floor_id === floorId)!;
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 { mdiAlertCircle, mdiMicrophone, mdiSend } from "@mdi/js";
import { customElement, property, query, state } from "lit/decorators";
@ -475,161 +475,159 @@ export class HaAssistChat extends LitElement {
}
}
static get styles(): CSSResultGroup {
return css`
:host {
flex: 1;
display: flex;
flex-direction: column;
min-height: var(--ha-assist-chat-min-height, 415px);
}
ha-textfield {
display: block;
margin: 0 24px 16px;
}
.messages {
flex: 1;
display: block;
box-sizing: border-box;
position: relative;
}
.messages-container {
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
padding: 24px;
box-sizing: border-box;
overflow-y: auto;
max-height: 100%;
}
static styles = css`
:host {
flex: 1;
display: flex;
flex-direction: column;
min-height: var(--ha-assist-chat-min-height, 415px);
}
ha-textfield {
display: block;
margin: 0 24px 16px;
}
.messages {
flex: 1;
display: block;
box-sizing: border-box;
position: relative;
}
.messages-container {
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
padding: 24px;
box-sizing: border-box;
overflow-y: auto;
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 {
white-space: pre-line;
font-size: 18px;
clear: both;
margin: 8px 0;
padding: 8px;
border-radius: 15px;
font-size: 16px;
}
}
@media all and (max-width: 450px), all and (max-height: 500px) {
.message {
font-size: 16px;
}
}
.message p {
margin: 0;
}
.message p:not(:last-child) {
margin-bottom: 8px;
}
.message p {
margin: 0;
}
.message p:not(:last-child) {
margin-bottom: 8px;
}
.message.user {
margin-left: 24px;
margin-inline-start: 24px;
margin-inline-end: initial;
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 {
margin-left: 24px;
margin-inline-start: 24px;
margin-inline-end: initial;
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.hass {
margin-right: 24px;
margin-inline-end: 24px;
margin-inline-start: initial;
float: var(--float-start);
border-bottom-left-radius: 0px;
background-color: var(--secondary-background-color);
.message.hass {
margin-right: 24px;
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);
direction: var(--direction);
}
color: var(--primary-text-color);
direction: var(--direction);
}
.message.user a {
color: var(--text-primary-color);
}
.message.user a {
color: var(--text-primary-color);
}
.message.hass a {
color: var(--primary-text-color);
}
.message.hass a {
color: var(--primary-text-color);
}
.message.error {
background-color: var(--error-color);
color: var(--text-primary-color);
}
.message.error {
background-color: var(--error-color);
color: var(--text-primary-color);
.bouncer {
width: 48px;
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 {
width: 48px;
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);
}
}
.listening-icon {
position: relative;
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 {
position: relative;
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] {
color: var(--primary-color);
}
.listening-icon[active] {
color: var(--primary-color);
}
.unsupported {
color: var(--error-color);
position: absolute;
--mdc-icon-size: 16px;
right: 5px;
inset-inline-end: 5px;
inset-inline-start: initial;
top: 0px;
}
`;
}
.unsupported {
color: var(--error-color);
position: absolute;
--mdc-icon-size: 16px;
right: 5px;
inset-inline-end: 5px;
inset-inline-start: initial;
top: 0px;
}
`;
}
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 { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
@ -90,13 +90,11 @@ export class HaAssistPipelinePicker extends LitElement {
});
}
static get styles(): CSSResultGroup {
return css`
ha-select {
width: 100%;
}
`;
}
static styles = css`
ha-select {
width: 100%;
}
`;
private _changed(ev): void {
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 { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
@ -38,114 +37,109 @@ export class HaBadge extends LitElement {
`;
}
static get styles(): CSSResultGroup {
return css`
:host {
--badge-color: var(--secondary-text-color);
-webkit-tap-highlight-color: transparent;
}
.badge {
position: relative;
--ha-ripple-color: var(--badge-color);
--ha-ripple-hover-opacity: 0.04;
--ha-ripple-pressed-opacity: 0.12;
transition:
box-shadow 180ms ease-in-out,
border-color 180ms ease-in-out;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
height: var(--ha-badge-size, 36px);
min-width: var(--ha-badge-size, 36px);
padding: 0px 12px;
box-sizing: border-box;
width: auto;
border-radius: var(
--ha-badge-border-radius,
calc(var(--ha-badge-size, 36px) / 2)
);
background: var(
--ha-card-background,
var(--card-background-color, white)
);
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
backdrop-filter: var(--ha-card-backdrop-filter, none);
border-width: var(--ha-card-border-width, 1px);
box-shadow: var(--ha-card-box-shadow, none);
border-style: solid;
border-color: var(
--ha-card-border-color,
var(--divider-color, #e0e0e0)
);
}
.badge:focus-visible {
--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);
box-shadow: var(--shadow-default), var(--shadow-focus);
}
[role="button"] {
cursor: pointer;
}
[role="button"]:focus {
outline: none;
}
.info {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-inline-start: initial;
text-align: center;
}
.label {
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: 10px;
letter-spacing: 0.1px;
color: var(--secondary-text-color);
}
.content {
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px;
letter-spacing: 0.1px;
color: var(--primary-text-color);
}
::slotted([slot="icon"]) {
--mdc-icon-size: 18px;
color: var(--badge-color);
line-height: 0;
margin-left: -4px;
margin-right: 0;
margin-inline-start: -4px;
margin-inline-end: 0;
}
::slotted(img[slot="icon"]) {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
overflow: hidden;
margin-left: -10px;
margin-right: 0;
margin-inline-start: -10px;
margin-inline-end: 0;
}
.badge.icon-only {
padding: 0;
}
.badge.icon-only ::slotted([slot="icon"]) {
margin-left: 0;
margin-right: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
`;
}
static styles = css`
:host {
--badge-color: var(--secondary-text-color);
-webkit-tap-highlight-color: transparent;
}
.badge {
position: relative;
--ha-ripple-color: var(--badge-color);
--ha-ripple-hover-opacity: 0.04;
--ha-ripple-pressed-opacity: 0.12;
transition:
box-shadow 180ms ease-in-out,
border-color 180ms ease-in-out;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
height: var(--ha-badge-size, 36px);
min-width: var(--ha-badge-size, 36px);
padding: 0px 12px;
box-sizing: border-box;
width: auto;
border-radius: var(
--ha-badge-border-radius,
calc(var(--ha-badge-size, 36px) / 2)
);
background: var(
--ha-card-background,
var(--card-background-color, white)
);
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
backdrop-filter: var(--ha-card-backdrop-filter, none);
border-width: var(--ha-card-border-width, 1px);
box-shadow: var(--ha-card-box-shadow, none);
border-style: solid;
border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
.badge:focus-visible {
--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);
box-shadow: var(--shadow-default), var(--shadow-focus);
}
[role="button"] {
cursor: pointer;
}
[role="button"]:focus {
outline: none;
}
.info {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-inline-start: initial;
text-align: center;
}
.label {
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: 10px;
letter-spacing: 0.1px;
color: var(--secondary-text-color);
}
.content {
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px;
letter-spacing: 0.1px;
color: var(--primary-text-color);
}
::slotted([slot="icon"]) {
--mdc-icon-size: 18px;
color: var(--badge-color);
line-height: 0;
margin-left: -4px;
margin-right: 0;
margin-inline-start: -4px;
margin-inline-end: 0;
}
::slotted(img[slot="icon"]) {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
overflow: hidden;
margin-left: -10px;
margin-right: 0;
margin-inline-start: -10px;
margin-inline-end: 0;
}
.badge.icon-only {
padding: 0;
}
.badge.icon-only ::slotted([slot="icon"]) {
margin-left: 0;
margin-right: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
`;
}
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 { customElement, property } from "lit/decorators";
import {
@ -34,25 +34,23 @@ export class HaBar extends LitElement {
`;
}
static get styles(): CSSResultGroup {
return css`
rect {
height: 100%;
}
rect:first-child {
width: 100%;
fill: var(--ha-bar-background-color, var(--secondary-background-color));
}
rect:last-child {
fill: var(--ha-bar-primary-color, var(--primary-color));
}
svg {
border-radius: var(--ha-bar-border-radius, 4px);
height: 12px;
width: 100%;
}
`;
}
static styles = css`
rect {
height: 100%;
}
rect:first-child {
width: 100%;
fill: var(--ha-bar-background-color, var(--secondary-background-color));
}
rect:last-child {
fill: var(--ha-bar-primary-color, var(--primary-color));
}
svg {
border-radius: var(--ha-bar-border-radius, 4px);
height: 12px;
width: 100%;
}
`;
}
declare global {

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

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

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

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

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

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

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

@ -1,11 +1,4 @@
import {
css,
type CSSResultGroup,
html,
LitElement,
nothing,
type PropertyValues,
} from "lit";
import { css, html, LitElement, nothing, type PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one";
@ -28,10 +21,10 @@ import "./ha-web-rtc-player";
const MJPEG_STREAM = "mjpeg";
type Stream = {
interface Stream {
type: StreamType | typeof MJPEG_STREAM;
visible: boolean;
};
}
@customElement("ha-camera-stream")
export class HaCameraStream extends LitElement {
@ -256,22 +249,20 @@ export class HaCameraStream extends LitElement {
}
);
static get styles(): CSSResultGroup {
return css`
:host,
img {
display: block;
}
static styles = css`
:host,
img {
display: block;
}
img {
width: 100%;
}
img {
width: 100%;
}
.hidden {
display: none;
}
`;
}
.hidden {
display: none;
}
`;
}
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 { customElement, property } from "lit/decorators";
@ -8,70 +7,65 @@ export class HaCard extends LitElement {
@property({ type: Boolean, reflect: true }) public raised = false;
static get styles(): CSSResultGroup {
return css`
:host {
background: var(
--ha-card-background,
var(--card-background-color, white)
);
-webkit-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-sizing: border-box;
border-radius: var(--ha-card-border-radius, 12px);
border-width: var(--ha-card-border-width, 1px);
border-style: solid;
border-color: var(
--ha-card-border-color,
var(--divider-color, #e0e0e0)
);
color: var(--primary-text-color);
display: block;
transition: all 0.3s ease-out;
position: relative;
}
static styles = css`
:host {
background: var(
--ha-card-background,
var(--card-background-color, white)
);
-webkit-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-sizing: border-box;
border-radius: var(--ha-card-border-radius, 12px);
border-width: var(--ha-card-border-width, 1px);
border-style: solid;
border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0));
color: var(--primary-text-color);
display: block;
transition: all 0.3s ease-out;
position: relative;
}
:host([raised]) {
border: none;
box-shadow: var(
--ha-card-box-shadow,
0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
);
}
:host([raised]) {
border: none;
box-shadow: var(
--ha-card-box-shadow,
0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
);
}
.card-header,
:host ::slotted(.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: 48px;
padding: 12px 16px 16px;
display: block;
margin-block-start: 0px;
margin-block-end: 0px;
font-weight: normal;
}
.card-header,
:host ::slotted(.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: 48px;
padding: 12px 16px 16px;
display: block;
margin-block-start: 0px;
margin-block-end: 0px;
font-weight: normal;
}
:host ::slotted(.card-content:not(:first-child)),
slot:not(:first-child)::slotted(.card-content) {
padding-top: 0px;
margin-top: -8px;
}
:host ::slotted(.card-content:not(:first-child)),
slot:not(:first-child)::slotted(.card-content) {
padding-top: 0px;
margin-top: -8px;
}
:host ::slotted(.card-content) {
padding: 16px;
}
:host ::slotted(.card-content) {
padding: 16px;
}
:host ::slotted(.card-actions) {
border-top: 1px solid var(--divider-color, #e8e8e8);
padding: 5px 16px;
}
`;
}
:host ::slotted(.card-actions) {
border-top: 1px solid var(--divider-color, #e8e8e8);
padding: 5px 16px;
}
`;
protected render() {
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 { customElement, property } from "lit/decorators";
import type { ClimateEntity } from "../data/climate";
@ -136,34 +136,32 @@ class HaClimateState extends LitElement {
return stateString;
}
static get styles(): CSSResultGroup {
return css`
:host {
display: flex;
flex-direction: column;
justify-content: center;
white-space: nowrap;
}
static styles = css`
:host {
display: flex;
flex-direction: column;
justify-content: center;
white-space: nowrap;
}
.target {
color: var(--primary-text-color);
}
.target {
color: var(--primary-text-color);
}
.current {
color: var(--secondary-text-color);
direction: var(--direction);
}
.current {
color: var(--secondary-text-color);
direction: var(--direction);
}
.state-label {
font-weight: bold;
}
.state-label {
font-weight: bold;
}
.unit {
display: inline-block;
direction: ltr;
}
`;
}
.unit {
display: inline-block;
direction: ltr;
}
`;
}
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 { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
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 { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -339,13 +339,11 @@ export class HaCodeEditor extends ReactiveElement {
return [];
};
static get styles(): CSSResultGroup {
return css`
:host(.error-state) .cm-gutters {
border-color: var(--error-state-color, red);
}
`;
}
static styles = css`
:host(.error-state) .cm-gutters {
border-color: var(--error-state-color, red);
}
`;
}
declare global {

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