jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-30 12:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' of github.com:home-assistant/frontend into ha-button

Browse Source
This commit is contained in:
Wendelin 2025-05-26 16:24:12 +02:00
commit 1c08736f45
No known key found for this signature in database
139 changed files with 3319 additions and 1893 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/relative-ci.yaml vendored
View File

@ -17,7 +17,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Send bundle stats and build information to RelativeCI
uses: relative-ci/agent-action@v2.2.0
uses: relative-ci/agent-action@v3.0.0
with:
key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
token: ${{ github.token }}

20
package.json
View File

@ -89,8 +89,8 @@
"@thomasloven/round-slider": "0.6.0",
"@tsparticles/engine": "3.8.1",
"@tsparticles/preset-links": "3.2.0",
"@vaadin/combo-box": "24.7.6",
"@vaadin/vaadin-themable-mixin": "24.7.6",
"@vaadin/combo-box": "24.7.7",
"@vaadin/vaadin-themable-mixin": "24.7.7",
"@vibrant/color": "4.0.0",
"@vue/web-component-wrapper": "1.3.0",
"@webcomponents/scoped-custom-element-registry": "0.0.10",
@ -122,7 +122,7 @@
"lit": "3.3.0",
"lit-html": "3.3.0",
"luxon": "3.6.1",
"marked": "15.0.11",
"marked": "15.0.12",
"memoize-one": "6.0.0",
"node-vibrant": "4.0.3",
"object-hash": "3.0.0",
@ -155,12 +155,12 @@
"@babel/preset-env": "7.27.2",
"@bundle-stats/plugin-webpack-filter": "4.20.1",
"@lokalise/node-api": "14.7.0",
"@octokit/auth-oauth-device": "7.1.5",
"@octokit/plugin-retry": "7.2.1",
"@octokit/auth-oauth-device": "8.0.1",
"@octokit/plugin-retry": "8.0.1",
"@octokit/rest": "21.1.1",
"@rsdoctor/rspack-plugin": "1.1.2",
"@rspack/cli": "1.3.10",
"@rspack/core": "1.3.10",
"@rspack/cli": "1.3.11",
"@rspack/core": "1.3.11",
"@types/babel__plugin-transform-runtime": "7.9.5",
"@types/chromecast-caf-receiver": "6.0.21",
"@types/chromecast-caf-sender": "1.0.11",
@ -168,7 +168,7 @@
"@types/glob": "8.1.0",
"@types/html-minifier-terser": "7.0.2",
"@types/js-yaml": "4.0.9",
"@types/leaflet": "1.9.17",
"@types/leaflet": "1.9.18",
"@types/leaflet-draw": "1.0.12",
"@types/leaflet.markercluster": "1.5.5",
"@types/lodash.merge": "4.6.9",
@ -179,7 +179,7 @@
"@types/tar": "6.1.13",
"@types/ua-parser-js": "0.7.39",
"@types/webspeechapi": "0.0.29",
"@vitest/coverage-v8": "3.1.3",
"@vitest/coverage-v8": "3.1.4",
"babel-loader": "10.0.0",
"babel-plugin-template-html-minifier": "4.1.0",
"browserslist-useragent-regexp": "4.1.3",
@ -220,7 +220,7 @@
"typescript": "5.8.3",
"typescript-eslint": "8.32.1",
"vite-tsconfig-paths": "5.1.4",
"vitest": "3.1.3",
"vitest": "3.1.4",
"webpack-stats-plugin": "1.1.3",
"webpackbar": "7.0.0",
"workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"

8
src/common/entity/state_icon.ts
View File

@ -2,7 +2,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
import { computeStateDomain } from "./compute_state_domain";
import { updateIcon } from "./update_icon";
import { deviceTrackerIcon } from "./device_tracker_icon";
import { batteryIcon } from "./battery_icon";
export const stateIcon = (
stateObj: HassEntity,
@ -10,17 +9,10 @@ export const stateIcon = (
): string | undefined => {
const domain = computeStateDomain(stateObj);
const compareState = state ?? stateObj.state;
const dc = stateObj.attributes.device_class;
switch (domain) {
case "update":
return updateIcon(stateObj, compareState);
case "sensor":
if (dc === "battery") {
return batteryIcon(stateObj, compareState);
}
break;
case "device_tracker":
return deviceTrackerIcon(stateObj, compareState);

72
src/components/chart/down-sample.ts Normal file
View File

@ -0,0 +1,72 @@
import type { LineSeriesOption } from "echarts";
export function downSampleLineData(
data: LineSeriesOption["data"],
chartWidth: number,
minX?: number,
maxX?: number
) {
if (!data || data.length < 10) {
return data;
}
const width = chartWidth * window.devicePixelRatio;
if (data.length <= width) {
return data;
}
const min = minX ?? getPointData(data[0]!)[0];
const max = maxX ?? getPointData(data[data.length - 1]!)[0];
const step = Math.floor((max - min) / width);
const frames = new Map<
number,
{
min: { point: (typeof data)[number]; x: number; y: number };
max: { point: (typeof data)[number]; x: number; y: number };
}
>();
// Group points into frames
for (const point of data) {
const pointData = getPointData(point);
if (!Array.isArray(pointData)) continue;
const x = Number(pointData[0]);
const y = Number(pointData[1]);
if (isNaN(x) || isNaN(y)) continue;
const frameIndex = Math.floor((x - min) / step);
const frame = frames.get(frameIndex);
if (!frame) {
frames.set(frameIndex, { min: { point, x, y }, max: { point, x, y } });
} else {
if (frame.min.y > y) {
frame.min = { point, x, y };
}
if (frame.max.y < y) {
frame.max = { point, x, y };
}
}
}
// Convert frames back to points
const result: typeof data = [];
for (const [_i, frame] of frames) {
// Use min/max points to preserve visual accuracy
// The order of the data must be preserved so max may be before min
if (frame.min.x > frame.max.x) {
result.push(frame.max.point);
}
result.push(frame.min.point);
if (frame.min.x < frame.max.x) {
result.push(frame.max.point);
}
}
return result;
}
function getPointData(point: NonNullable<LineSeriesOption["data"]>[number]) {
const pointData =
point && typeof point === "object" && "value" in point
? point.value
: point;
return pointData as number[];
}

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

@ -27,6 +27,7 @@ import "../ha-icon-button";
import { formatTimeLabel } from "./axis-label";
import { ensureArray } from "../../common/array/ensure-array";
import "../chips/ha-assist-chip";
import { downSampleLineData } from "./down-sample";
export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
const LEGEND_OVERFLOW_LIMIT = 10;
@ -387,9 +388,9 @@ export class HaChartBase extends LitElement {
if (axis.type !== "time" || axis.show === false) {
return axis;
}
if (axis.max && axis.min) {
if (axis.min) {
this._minutesDifference = differenceInMinutes(
axis.max as Date,
(axis.max as Date) || new Date(),
axis.min as Date
);
}
@ -613,19 +614,21 @@ export class HaChartBase extends LitElement {
}
private _getSeries() {
const series = ensureArray(this.data).filter(
(d) => !this._hiddenDatasets.has(String(d.name ?? d.id))
);
const xAxis = (this.options?.xAxis?.[0] ?? this.options?.xAxis) as
| XAXisOption
| undefined;
const yAxis = (this.options?.yAxis?.[0] ?? this.options?.yAxis) as
| YAXisOption
| undefined;
if (yAxis?.type === "log") {
// set <=0 values to null so they render as gaps on a log graph
return series.map((d) =>
d.type === "line"
? {
...d,
data: d.data?.map((v) =>
const series = ensureArray(this.data)
.filter((d) => !this._hiddenDatasets.has(String(d.name ?? d.id)))
.map((s) => {
if (s.type === "line") {
if (yAxis?.type === "log") {
// set <=0 values to null so they render as gaps on a log graph
return {
...s,
data: s.data?.map((v) =>
Array.isArray(v)
? [
v[0],
@ -634,10 +637,26 @@ export class HaChartBase extends LitElement {
]
: v
),
}
: d
);
}
};
}
if (s.sampling === "minmax") {
const minX =
xAxis?.min && typeof xAxis.min === "number"
? xAxis.min
: undefined;
const maxX =
xAxis?.max && typeof xAxis.max === "number"
? xAxis.max
: undefined;
return {
...s,
sampling: undefined,
data: downSampleLineData(s.data, this.clientWidth, minX, maxX),
};
}
}
return s;
});
return series;
}

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

@ -12,6 +12,7 @@ import type { EntityRegistryEntry } from "../../data/entity_registry";
import type { HomeAssistant } from "../../types";
import "../ha-list-item";
import "../ha-select";
import { stopPropagation } from "../../common/dom/stop_propagation";
const NO_AUTOMATION_KEY = "NO_AUTOMATION";
const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
@ -103,6 +104,7 @@ export abstract class HaDeviceAutomationPicker<
.label=${this.label}
.value=${value}
@selected=${this._automationChanged}
@closed=${stopPropagation}
.disabled=${this._automations.length === 0}
>
${value === NO_AUTOMATION_KEY

3
src/components/entity/ha-entity-picker.ts
View File

@ -317,6 +317,7 @@ export class HaEntityPicker extends LitElement {
const secondary = [areaName, entityName ? deviceName : undefined]
.filter(Boolean)
.join(isRTL ? " ◂ " : " ▸ ");
const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
return {
id: entityId,
@ -332,6 +333,7 @@ export class HaEntityPicker extends LitElement {
friendlyName,
entityId,
].filter(Boolean) as string[],
a11y_label: a11yLabel,
stateObj: stateObj,
};
});
@ -384,6 +386,7 @@ export class HaEntityPicker extends LitElement {
return html`
<ha-generic-picker
.hass=${this.hass}
.disabled=${this.disabled}
.autofocus=${this.autofocus}
.allowCustomValue=${this.allowCustomEntity}
.label=${this.label}

2
src/components/entity/ha-statistic-picker.ts
View File

@ -267,6 +267,7 @@ export class HaStatisticPicker extends LitElement {
const secondary = [areaName, entityName ? deviceName : undefined]
.filter(Boolean)
.join(isRTL ? " ◂ " : " ▸ ");
const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
const sortingPrefix = `${TYPE_ORDER.indexOf("entity")}`;
output.push({
@ -274,6 +275,7 @@ export class HaStatisticPicker extends LitElement {
statistic_id: id,
primary,
secondary,
a11y_label: a11yLabel,
stateObj: stateObj,
type: "entity",
sorting_label: [sortingPrefix, deviceName, entityName].join("_"),

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

@ -1,16 +1,16 @@
import { mdiTextureBox } from "@mdi/js";
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import type { TemplateResult } from "lit";
import { LitElement, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { customElement, property, query } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";
import { computeAreaName } from "../common/entity/compute_area_name";
import { computeDomain } from "../common/entity/compute_domain";
import { computeFloorName } from "../common/entity/compute_floor_name";
import { stringCompare } from "../common/string/compare";
import type { ScorableTextItem } from "../common/string/filter/sequence-matching";
import { fuzzyFilterSort } from "../common/string/filter/sequence-matching";
import { computeRTL } from "../common/util/compute_rtl";
import type { AreaRegistryEntry } from "../data/area_registry";
import type {
@ -19,29 +19,33 @@ import type {
} from "../data/device_registry";
import { getDeviceEntityDisplayLookup } from "../data/device_registry";
import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
import type { FloorRegistryEntry } from "../data/floor_registry";
import { getFloorAreaLookup } from "../data/floor_registry";
import {
getFloorAreaLookup,
type FloorRegistryEntry,
} from "../data/floor_registry";
import type { HomeAssistant, ValueChangedEvent } from "../types";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./ha-combo-box";
import type { HaComboBox } from "./ha-combo-box";
import "./ha-combo-box-item";
import "./ha-floor-icon";
import "./ha-generic-picker";
import type { HaGenericPicker } from "./ha-generic-picker";
import "./ha-icon-button";
import type { PickerComboBoxItem } from "./ha-picker-combo-box";
import type { PickerValueRenderer } from "./ha-picker-field";
import "./ha-svg-icon";
import "./ha-tree-indicator";
type ScorableAreaFloorEntry = ScorableTextItem & FloorAreaEntry;
const SEPARATOR = "________";
interface FloorAreaEntry {
id: string | null;
name: string;
icon: string | null;
strings: string[];
interface FloorComboBoxItem extends PickerComboBoxItem {
type: "floor" | "area";
floor?: FloorRegistryEntry;
area?: AreaRegistryEntry;
}
interface AreaFloorValue {
id: string;
type: "floor" | "area";
level: number | null;
hasFloor?: boolean;
lastArea?: boolean;
}
@customElement("ha-area-floor-picker")
@ -50,12 +54,15 @@ export class HaAreaFloorPicker extends LitElement {
@property() public label?: string;
@property() public value?: string;
@property({ attribute: false }) public value?: AreaFloorValue;
@property() public helper?: string;
@property() public placeholder?: string;
@property({ type: String, attribute: "search-label" })
public searchLabel?: string;
/**
* Show only areas with entities from specific domains.
* @type {Array}
@ -106,66 +113,53 @@ export class HaAreaFloorPicker extends LitElement {
@property({ type: Boolean }) public required = false;
@state() private _opened?: boolean;
@query("ha-combo-box", true) public comboBox!: HaComboBox;
private _init = false;
@query("ha-generic-picker") private _picker?: HaGenericPicker;
public async open() {
await this.updateComplete;
await this.comboBox?.open();
await this._picker?.open();
}
public async focus() {
await this.updateComplete;
await this.comboBox?.focus();
}
private _valueRenderer: PickerValueRenderer = (value: string) => {
const item = this._parseValue(value);
const area = item.type === "area" && this.hass.areas[value];
if (area) {
const areaName = computeAreaName(area);
return html`
${area.icon
? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
: html`<ha-svg-icon
slot="start"
.path=${mdiTextureBox}
></ha-svg-icon>`}
<slot name="headline">${areaName}</slot>
`;
}
const floor = item.type === "floor" && this.hass.floors[value];
if (floor) {
const floorName = computeFloorName(floor);
return html`
<ha-floor-icon slot="start" .floor=${floor}></ha-floor-icon>
<span slot="headline">${floorName}</span>
`;
}
private _rowRenderer: ComboBoxLitRenderer<FloorAreaEntry> = (item) => {
const rtl = computeRTL(this.hass);
return html`
<ha-combo-box-item
type="button"
style=${item.type === "area" && item.hasFloor
? "--md-list-item-leading-space: 48px;"
: ""}
>
${item.type === "area" && item.hasFloor
? html`
<ha-tree-indicator
style=${styleMap({
width: "48px",
position: "absolute",
top: "0px",
left: rtl ? undefined : "4px",
right: rtl ? "4px" : undefined,
transform: rtl ? "scaleX(-1)" : "",
})}
.end=${item.lastArea}
slot="start"
></ha-tree-indicator>
`
: nothing}
${item.type === "floor"
? html`<ha-floor-icon slot="start" .floor=${item}></ha-floor-icon>`
: item.icon
? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
: html`<ha-svg-icon
slot="start"
.path=${mdiTextureBox}
></ha-svg-icon>`}
${item.name}
</ha-combo-box-item>
<ha-svg-icon slot="start" .path=${mdiTextureBox}></ha-svg-icon>
<span slot="headline">${value}</span>
`;
};
private _getAreas = memoizeOne(
private _getAreasAndFloors = memoizeOne(
(
floors: FloorRegistryEntry[],
areas: AreaRegistryEntry[],
devices: DeviceRegistryEntry[],
entities: EntityRegistryDisplayEntry[],
haFloors: HomeAssistant["floors"],
haAreas: HomeAssistant["areas"],
haDevices: HomeAssistant["devices"],
haEntities: HomeAssistant["entities"],
includeDomains: this["includeDomains"],
excludeDomains: this["excludeDomains"],
includeDeviceClasses: this["includeDeviceClasses"],
@ -173,19 +167,11 @@ export class HaAreaFloorPicker extends LitElement {
entityFilter: this["entityFilter"],
excludeAreas: this["excludeAreas"],
excludeFloors: this["excludeFloors"]
): FloorAreaEntry[] => {
if (!areas.length && !floors.length) {
return [
{
id: "no_areas",
type: "area",
name: this.hass.localize("ui.components.area-picker.no_areas"),
icon: null,
strings: [],
level: null,
},
];
}
): FloorComboBoxItem[] => {
const floors = Object.values(haFloors);
const areas = Object.values(haAreas);
const devices = Object.values(haDevices);
const entities = Object.values(haEntities);
let deviceEntityLookup: DeviceEntityDisplayLookup = {};
let inputDevices: DeviceRegistryEntry[] | undefined;
@ -326,19 +312,6 @@ export class HaAreaFloorPicker extends LitElement {
);
}
if (!outputAreas.length) {
return [
{
id: "no_areas",
type: "area",
name: this.hass.localize("ui.components.area-picker.no_match"),
icon: null,
strings: [],
level: null,
},
];
}
const floorAreaLookup = getFloorAreaLookup(outputAreas);
const unassisgnedAreas = Object.values(outputAreas).filter(
(area) => !area.floor_id || !floorAreaLookup[area.floor_id]
@ -360,151 +333,186 @@ export class HaAreaFloorPicker extends LitElement {
return stringCompare(floorA.name, floorB.name);
});
const output: FloorAreaEntry[] = [];
const items: FloorComboBoxItem[] = [];
floorAreaEntries.forEach(([floor, floorAreas]) => {
if (floor) {
output.push({
id: floor.floor_id,
const floorName = computeFloorName(floor);
const areaSearchLabels = floorAreas
.map((area) => {
const areaName = computeAreaName(area) || area.area_id;
return [area.area_id, areaName, ...area.aliases];
})
.flat();
items.push({
id: this._formatValue({ id: floor.floor_id, type: "floor" }),
type: "floor",
name: floor.name,
icon: floor.icon,
strings: [floor.floor_id, ...floor.aliases, floor.name],
level: floor.level,
primary: floorName,
floor: floor,
search_labels: [
floor.floor_id,
floorName,
...floor.aliases,
...areaSearchLabels,
],
});
}
output.push(
...floorAreas.map((area, index, array) => ({
id: area.area_id,
type: "area" as const,
name: area.name,
icon: area.icon,
strings: [area.area_id, ...area.aliases, area.name],
hasFloor: true,
level: null,
lastArea: index === array.length - 1,
}))
items.push(
...floorAreas.map((area) => {
const areaName = computeAreaName(area) || area.area_id;
return {
id: this._formatValue({ id: area.area_id, type: "area" }),
type: "area" as const,
primary: areaName,
area: area,
icon: area.icon || undefined,
search_labels: [area.area_id, areaName, ...area.aliases],
};
})
);
});
if (!output.length && !unassisgnedAreas.length) {
output.push({
id: "no_areas",
type: "area",
name: this.hass.localize(
"ui.components.area-picker.unassigned_areas"
),
icon: null,
strings: [],
level: null,
});
}
output.push(
...unassisgnedAreas.map((area) => ({
id: area.area_id,
type: "area" as const,
name: area.name,
icon: area.icon,
strings: [area.area_id, ...area.aliases, area.name],
level: null,
}))
items.push(
...unassisgnedAreas.map((area) => {
const areaName = computeAreaName(area) || area.area_id;
return {
id: this._formatValue({ id: area.area_id, type: "area" }),
type: "area" as const,
primary: areaName,
icon: area.icon || undefined,
search_labels: [area.area_id, areaName, ...area.aliases],
};
})
);
return output;
return items;
}
);
protected updated(changedProps: PropertyValues) {
if (
(!this._init && this.hass) ||
(this._init && changedProps.has("_opened") && this._opened)
) {
this._init = true;
const areas = this._getAreas(
Object.values(this.hass.floors),
Object.values(this.hass.areas),
Object.values(this.hass.devices),
Object.values(this.hass.entities),
this.includeDomains,
this.excludeDomains,
this.includeDeviceClasses,
this.deviceFilter,
this.entityFilter,
this.excludeAreas,
this.excludeFloors
);
this.comboBox.items = areas;
this.comboBox.filteredItems = areas;
}
}
private _rowRenderer: ComboBoxLitRenderer<FloorComboBoxItem> = (
item,
{ index },
combobox
) => {
const nextItem = combobox.filteredItems?.[index + 1];
const isLastArea =
!nextItem ||
nextItem.type === "floor" ||
(nextItem.type === "area" && !nextItem.area?.floor_id);
const rtl = computeRTL(this.hass);
const hasFloor = item.type === "area" && item.area?.floor_id;
return html`
<ha-combo-box-item
type="button"
style=${item.type === "area" && hasFloor
? "--md-list-item-leading-space: 48px;"
: ""}
>
${item.type === "area" && hasFloor
? html`
<ha-tree-indicator
style=${styleMap({
width: "48px",
position: "absolute",
top: "0px",
left: rtl ? undefined : "4px",
right: rtl ? "4px" : undefined,
transform: rtl ? "scaleX(-1)" : "",
})}
.end=${isLastArea}
slot="start"
></ha-tree-indicator>
`
: nothing}
${item.type === "floor" && item.floor
? html`<ha-floor-icon
slot="start"
.floor=${item.floor}
></ha-floor-icon>`
: item.icon
? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
: html`<ha-svg-icon
slot="start"
.path=${item.icon_path || mdiTextureBox}
></ha-svg-icon>`}
${item.primary}
</ha-combo-box-item>
`;
};
private _getItems = () =>
this._getAreasAndFloors(
this.hass.floors,
this.hass.areas,
this.hass.devices,
this.hass.entities,
this.includeDomains,
this.excludeDomains,
this.includeDeviceClasses,
this.deviceFilter,
this.entityFilter,
this.excludeAreas,
this.excludeFloors
);
private _formatValue = memoizeOne((value: AreaFloorValue): string =>
[value.type, value.id].join(SEPARATOR)
);
private _parseValue = memoizeOne((value: string): AreaFloorValue => {
const [type, id] = value.split(SEPARATOR);
return { id, type: type as "floor" | "area" };
});
protected render(): TemplateResult {
const placeholder =
this.placeholder ?? this.hass.localize("ui.components.area-picker.area");
const value = this.value ? this._formatValue(this.value) : undefined;
return html`
<ha-combo-box
<ha-generic-picker
.hass=${this.hass}
.helper=${this.helper}
item-value-path="id"
item-id-path="id"
item-label-path="name"
.value=${this._value}
.disabled=${this.disabled}
.required=${this.required}
.label=${this.label === undefined && this.hass
? this.hass.localize("ui.components.area-picker.area")
: this.label}
.placeholder=${this.placeholder
? this.hass.areas[this.placeholder]?.name
: undefined}
.renderer=${this._rowRenderer}
@filter-changed=${this._filterChanged}
@opened-changed=${this._openedChanged}
@value-changed=${this._areaChanged}
.autofocus=${this.autofocus}
.label=${this.label}
.searchLabel=${this.searchLabel}
.notFoundLabel=${this.hass.localize(
"ui.components.area-picker.no_match"
)}
.placeholder=${placeholder}
.value=${value}
.getItems=${this._getItems}
.valueRenderer=${this._valueRenderer}
.rowRenderer=${this._rowRenderer}
@value-changed=${this._valueChanged}
>
</ha-combo-box>
</ha-generic-picker>
`;
}
private _filterChanged(ev: CustomEvent): void {
const target = ev.target as HaComboBox;
const filterString = ev.detail.value;
if (!filterString) {
this.comboBox.filteredItems = this.comboBox.items;
return;
}
const filteredItems = fuzzyFilterSort<ScorableAreaFloorEntry>(
filterString,
target.items || []
);
this.comboBox.filteredItems = filteredItems;
}
private get _value() {
return this.value || "";
}
private _openedChanged(ev: ValueChangedEvent<boolean>) {
this._opened = ev.detail.value;
}
private async _areaChanged(ev: ValueChangedEvent<string>) {
private _valueChanged(ev: ValueChangedEvent<string>) {
ev.stopPropagation();
const newValue = ev.detail.value;
const value = ev.detail.value;
if (newValue === "no_areas") {
if (!value) {
this._setValue(undefined);
return;
}
const selected = this.comboBox.selectedItem;
const selected = this._parseValue(value);
this._setValue(selected);
}
fireEvent(this, "value-changed", {
value: {
id: selected.id,
type: selected.type,
},
});
private _setValue(value?: AreaFloorValue) {
this.value = value;
fireEvent(this, "value-changed", { value });
fireEvent(this, "change");
}
}

24
src/components/ha-combo-box-textfield.ts Normal file
View File

@ -0,0 +1,24 @@
import type { PropertyValues } from "lit";
import { customElement, property } from "lit/decorators";
import { HaTextField } from "./ha-textfield";
@customElement("ha-combo-box-textfield")
export class HaComboBoxTextField extends HaTextField {
@property({ type: Boolean, attribute: "disable-set-value" })
public disableSetValue = false;
protected willUpdate(changedProps: PropertyValues): void {
super.willUpdate(changedProps);
if (changedProps.has("value")) {
if (this.disableSetValue) {
this.value = changedProps.get("value") as string;
}
}
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-combo-box-textfield": HaComboBoxTextField;
}
}

31
src/components/ha-combo-box.ts
View File

@ -12,11 +12,12 @@ import type {
import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, query } from "lit/decorators";
import { customElement, property, query, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../common/dom/fire_event";
import type { HomeAssistant } from "../types";
import "./ha-combo-box-item";
import "./ha-combo-box-textfield";
import "./ha-icon-button";
import "./ha-textfield";
import type { HaTextField } from "./ha-textfield";
@ -108,9 +109,14 @@ export class HaComboBox extends LitElement {
@property({ type: Boolean, attribute: "hide-clear-icon" })
public hideClearIcon = false;
@property({ type: Boolean, attribute: "clear-initial-value" })
public clearInitialValue = false;
@query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
@query("ha-textfield", true) private _inputElement!: HaTextField;
@query("ha-combo-box-textfield", true) private _inputElement!: HaTextField;
@state({ type: Boolean }) private _disableSetValue = false;
private _overlayMutationObserver?: MutationObserver;
@ -171,7 +177,7 @@ export class HaComboBox extends LitElement {
@value-changed=${this._valueChanged}
attr-for-value="value"
>
<ha-textfield
<ha-combo-box-textfield
label=${ifDefined(this.label)}
placeholder=${ifDefined(this.placeholder)}
?disabled=${this.disabled}
@ -191,9 +197,10 @@ export class HaComboBox extends LitElement {
.invalid=${this.invalid}
.helper=${this.helper}
helperPersistent
.disableSetValue=${this._disableSetValue}
>
<slot name="icon" slot="leadingIcon"></slot>
</ha-textfield>
</ha-combo-box-textfield>
${this.value && !this.hideClearIcon
? html`<ha-svg-icon
role="button"
@ -249,6 +256,18 @@ export class HaComboBox extends LitElement {
fireEvent(this, "opened-changed", { value: ev.detail.value });
}, 0);
if (this.clearInitialValue) {
this.setTextFieldValue("");
if (opened) {
// Wait 100ms to be sure vaddin-combo-box-light already tried to set the value
setTimeout(() => {
this._disableSetValue = false;
}, 100);
} else {
this._disableSetValue = true;
}
}
if (opened) {
const overlay = document.querySelector<HTMLElement>(
"vaadin-combo-box-overlay"
@ -342,10 +361,10 @@ export class HaComboBox extends LitElement {
position: relative;
--vaadin-combo-box-overlay-max-height: calc(45vh - 56px);
}
ha-textfield {
ha-combo-box-textfield {
width: 100%;
}
ha-textfield > ha-icon-button {
ha-combo-box-textfield > ha-icon-button {
--mdc-icon-button-size: 24px;
padding: 2px;
color: var(--secondary-text-color);

2
src/components/ha-generic-picker.ts
View File

@ -2,6 +2,7 @@ import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../common/dom/fire_event";
import type { HomeAssistant } from "../types";
import "./ha-combo-box-item";
@ -74,6 +75,7 @@ export class HaGenericPicker extends LitElement {
<ha-picker-field
type="button"
compact
aria-label=${ifDefined(this.label)}
@click=${this.open}
@clear=${this._clear}
.placeholder=${this.placeholder}

287
src/components/ha-items-display-editor.ts
View File

@ -2,7 +2,7 @@ import { ResizeController } from "@lit-labs/observers/resize-controller";
import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
import type { TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined";
import { repeat } from "lit/directives/repeat";
@ -64,92 +64,15 @@ export class HaItemDisplayEditor extends LitElement {
item: DisplayItem
) => TemplateResult<1> | typeof nothing;
/**
* Used to sort items by keyboard navigation.
*/
@state() private _dragIndex: number | null = null;
private _showIcon = new ResizeController(this, {
callback: (entries) => entries[0]?.contentRect.width > 450,
});
private _toggle(ev) {
ev.stopPropagation();
const value = ev.currentTarget.value;
const hiddenItems = this._hiddenItems(this.items, this.value.hidden);
const newHidden = hiddenItems.map((item) => item.value);
if (newHidden.includes(value)) {
newHidden.splice(newHidden.indexOf(value), 1);
} else {
newHidden.push(value);
}
const newVisibleItems = this._visibleItems(
this.items,
newHidden,
this.value.order
);
const newOrder = newVisibleItems.map((a) => a.value);
this.value = {
hidden: newHidden,
order: newOrder,
};
fireEvent(this, "value-changed", { value: this.value });
}
private _itemMoved(ev: CustomEvent): void {
ev.stopPropagation();
const { oldIndex, newIndex } = ev.detail;
const visibleItems = this._visibleItems(
this.items,
this.value.hidden,
this.value.order
);
const newOrder = visibleItems.map((item) => item.value);
const movedItem = newOrder.splice(oldIndex, 1)[0];
newOrder.splice(newIndex, 0, movedItem);
this.value = {
...this.value,
order: newOrder,
};
fireEvent(this, "value-changed", { value: this.value });
}
private _navigate(ev) {
const value = ev.currentTarget.value;
fireEvent(this, "item-display-navigate-clicked", { value });
ev.stopPropagation();
}
private _visibleItems = memoizeOne(
(items: DisplayItem[], hidden: string[], order: string[]) => {
const compare = orderCompare(order);
const visibleItems = items.filter((item) => !hidden.includes(item.value));
if (this.dontSortVisible) {
return visibleItems;
}
return items.sort((a, b) =>
a.disableSorting && !b.disableSorting ? -1 : compare(a.value, b.value)
);
}
);
private _allItems = memoizeOne(
(items: DisplayItem[], hidden: string[], order: string[]) => {
const visibleItems = this._visibleItems(items, hidden, order);
const hiddenItems = this._hiddenItems(items, hidden);
return [...visibleItems, ...hiddenItems];
}
);
private _hiddenItems = memoizeOne((items: DisplayItem[], hidden: string[]) =>
items.filter((item) => hidden.includes(item.value))
);
protected render() {
const allItems = this._allItems(
this.items,
@ -168,7 +91,7 @@ export class HaItemDisplayEditor extends LitElement {
${repeat(
allItems,
(item) => item.value,
(item: DisplayItem, _idx) => {
(item: DisplayItem, idx) => {
const isVisible = !this.value.hidden.includes(item.value);
const {
label,
@ -180,9 +103,7 @@ export class HaItemDisplayEditor extends LitElement {
} = item;
return html`
<ha-md-list-item
type=${ifDefined(
this.showNavigationButton ? "button" : undefined
)}
type="button"
@click=${this.showNavigationButton
? this._navigate
: undefined}
@ -190,7 +111,12 @@ export class HaItemDisplayEditor extends LitElement {
class=${classMap({
hidden: !isVisible,
draggable: isVisible && !disableSorting,
"drag-selected": this._dragIndex === idx,
})}
@keydown=${isVisible && !disableSorting
? this._listElementKeydown
: undefined}
.idx=${idx}
>
<span slot="headline">${label}</span>
${description
@ -199,6 +125,13 @@ export class HaItemDisplayEditor extends LitElement {
${isVisible && !disableSorting
? html`
<ha-svg-icon
tabindex=${ifDefined(
this.showNavigationButton ? "0" : undefined
)}
.idx=${idx}
@keydown=${this.showNavigationButton
? this._dragHandleKeydown
: undefined}
class="handle"
.path=${mdiDrag}
slot="start"
@ -253,6 +186,180 @@ export class HaItemDisplayEditor extends LitElement {
`;
}
private _toggle(ev) {
ev.stopPropagation();
this._dragIndex = null;
const value = ev.currentTarget.value;
const hiddenItems = this._hiddenItems(this.items, this.value.hidden);
const newHidden = hiddenItems.map((item) => item.value);
if (newHidden.includes(value)) {
newHidden.splice(newHidden.indexOf(value), 1);
} else {
newHidden.push(value);
}
const newVisibleItems = this._visibleItems(
this.items,
newHidden,
this.value.order
);
const newOrder = newVisibleItems.map((a) => a.value);
this.value = {
hidden: newHidden,
order: newOrder,
};
fireEvent(this, "value-changed", { value: this.value });
}
private _itemMoved(ev: CustomEvent): void {
ev.stopPropagation();
const { oldIndex, newIndex } = ev.detail;
this._moveItem(oldIndex, newIndex);
}
private _moveItem(oldIndex, newIndex) {
if (oldIndex === newIndex) {
return;
}
const visibleItems = this._visibleItems(
this.items,
this.value.hidden,
this.value.order
);
const newOrder = visibleItems.map((item) => item.value);
const movedItem = newOrder.splice(oldIndex, 1)[0];
newOrder.splice(newIndex, 0, movedItem);
this.value = {
...this.value,
order: newOrder,
};
fireEvent(this, "value-changed", { value: this.value });
}
private _navigate(ev) {
const value = ev.currentTarget.value;
fireEvent(this, "item-display-navigate-clicked", { value });
ev.stopPropagation();
}
private _visibleItems = memoizeOne(
(items: DisplayItem[], hidden: string[], order: string[]) => {
const compare = orderCompare(order);
const visibleItems = items.filter((item) => !hidden.includes(item.value));
if (this.dontSortVisible) {
return [
...visibleItems.filter((item) => !item.disableSorting),
...visibleItems.filter((item) => item.disableSorting),
];
}
return items.sort((a, b) =>
a.disableSorting && !b.disableSorting ? -1 : compare(a.value, b.value)
);
}
);
private _allItems = memoizeOne(
(items: DisplayItem[], hidden: string[], order: string[]) => {
const visibleItems = this._visibleItems(items, hidden, order);
const hiddenItems = this._hiddenItems(items, hidden);
return [...visibleItems, ...hiddenItems];
}
);
private _hiddenItems = memoizeOne((items: DisplayItem[], hidden: string[]) =>
items.filter((item) => hidden.includes(item.value))
);
private _maxSortableIndex = memoizeOne(
(items: DisplayItem[], hidden: string[]) =>
items.filter(
(item) => !item.disableSorting && !hidden.includes(item.value)
).length - 1
);
private _keyActivatedMove = (ev: KeyboardEvent, clearDragIndex = false) => {
const oldIndex = this._dragIndex;
if (ev.key === "ArrowUp") {
this._dragIndex = Math.max(0, this._dragIndex! - 1);
} else {
this._dragIndex = Math.min(
this._maxSortableIndex(this.items, this.value.hidden),
this._dragIndex! + 1
);
}
this._moveItem(oldIndex, this._dragIndex);
// refocus the item after the sort
setTimeout(async () => {
await this.updateComplete;
const selectedElement = this.shadowRoot?.querySelector(
`ha-md-list-item:nth-child(${this._dragIndex! + 1})`
) as HTMLElement | null;
selectedElement?.focus();
if (clearDragIndex) {
this._dragIndex = null;
}
});
};
private _sortKeydown = (ev: KeyboardEvent) => {
if (
this._dragIndex !== null &&
(ev.key === "ArrowUp" || ev.key === "ArrowDown")
) {
ev.preventDefault();
this._keyActivatedMove(ev);
} else if (this._dragIndex !== null && ev.key === "Escape") {
ev.preventDefault();
ev.stopPropagation();
this._dragIndex = null;
this.removeEventListener("keydown", this._sortKeydown);
}
};
private _listElementKeydown = (ev: KeyboardEvent) => {
if (ev.altKey && (ev.key === "ArrowUp" || ev.key === "ArrowDown")) {
ev.preventDefault();
this._dragIndex = (ev.target as any).idx;
this._keyActivatedMove(ev, true);
} else if (
(!this.showNavigationButton && ev.key === "Enter") ||
ev.key === " "
) {
this._dragHandleKeydown(ev);
}
};
private _dragHandleKeydown(ev: KeyboardEvent): void {
if (ev.key === "Enter" || ev.key === " ") {
ev.preventDefault();
ev.stopPropagation();
if (this._dragIndex === null) {
this._dragIndex = (ev.target as any).idx;
this.addEventListener("keydown", this._sortKeydown);
} else {
this.removeEventListener("keydown", this._sortKeydown);
this._dragIndex = null;
}
}
}
disconnectedCallback(): void {
super.disconnectedCallback();
this.removeEventListener("keydown", this._sortKeydown);
}
static styles = css`
:host {
display: block;
@ -273,6 +380,12 @@ export class HaItemDisplayEditor extends LitElement {
--md-list-item-two-line-container-height: 48px;
--md-list-item-one-line-container-height: 48px;
}
ha-md-list-item.drag-selected {
box-shadow:
0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
border-radius: 8px;
}
ha-md-list-item ha-icon-button {
margin-left: -12px;
margin-right: -12px;

37
src/components/ha-label-picker.ts
View File

@ -116,23 +116,26 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
}
);
private _valueRenderer: PickerValueRenderer = (value) => {
const label = this._labelMap(this._labels).get(value);
private _computeValueRenderer = memoizeOne(
(labels: LabelRegistryEntry[] | undefined): PickerValueRenderer =>
(value) => {
const label = this._labelMap(labels).get(value);
if (!label) {
return html`
<ha-svg-icon slot="start" .path=${mdiLabel}></ha-svg-icon>
<span slot="headline">${value}</span>
`;
}
if (!label) {
return html`
<ha-svg-icon slot="start" .path=${mdiLabel}></ha-svg-icon>
<span slot="headline">${value}</span>
`;
}
return html`
${label.icon
? html`<ha-icon slot="start" .icon=${label.icon}></ha-icon>`
: html`<ha-svg-icon slot="start" .path=${mdiLabel}></ha-svg-icon>`}
<span slot="headline">${label.name}</span>
`;
};
return html`
${label.icon
? html`<ha-icon slot="start" .icon=${label.icon}></ha-icon>`
: html`<ha-svg-icon slot="start" .path=${mdiLabel}></ha-svg-icon>`}
<span slot="headline">${label.name}</span>
`;
}
);
private _getLabels = memoizeOne(
(
@ -388,6 +391,8 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
this.placeholder ??
this.hass.localize("ui.components.label-picker.label");
const valueRenderer = this._computeValueRenderer(this._labels);
return html`
<ha-generic-picker
.hass=${this.hass}
@ -400,7 +405,7 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
.value=${this.value}
.getItems=${this._getItems}
.getAdditionalItems=${this._getAdditionalItems}
.valueRenderer=${this._valueRenderer}
.valueRenderer=${valueRenderer}
@value-changed=${this._valueChanged}
>
</ha-generic-picker>

5
src/components/ha-markdown-element.ts
View File

@ -26,6 +26,9 @@ class HaMarkdownElement extends ReactiveElement {
@property({ attribute: "allow-svg", type: Boolean }) public allowSvg = false;
@property({ attribute: "allow-data-url", type: Boolean })
public allowDataUrl = false;
@property({ type: Boolean }) public breaks = false;
@property({ type: Boolean, attribute: "lazy-images" }) public lazyImages =
@ -66,6 +69,7 @@ class HaMarkdownElement extends ReactiveElement {
return hash({
content: this.content,
allowSvg: this.allowSvg,
allowDataUrl: this.allowDataUrl,
breaks: this.breaks,
});
}
@ -79,6 +83,7 @@ class HaMarkdownElement extends ReactiveElement {
},
{
allowSvg: this.allowSvg,
allowDataUrl: this.allowDataUrl,
}
);

4
src/components/ha-markdown.ts
View File

@ -8,6 +8,9 @@ export class HaMarkdown extends LitElement {
@property({ attribute: "allow-svg", type: Boolean }) public allowSvg = false;
@property({ attribute: "allow-data-url", type: Boolean })
public allowDataUrl = false;
@property({ type: Boolean }) public breaks = false;
@property({ type: Boolean, attribute: "lazy-images" }) public lazyImages =
@ -23,6 +26,7 @@ export class HaMarkdown extends LitElement {
return html`<ha-markdown-element
.content=${this.content}
.allowSvg=${this.allowSvg}
.allowDataUrl=${this.allowDataUrl}
.breaks=${this.breaks}
.lazyImages=${this.lazyImages}
.cache=${this.cache}

14
src/components/ha-picker-combo-box.ts
View File

@ -18,6 +18,7 @@ import "./ha-icon";
export interface PickerComboBoxItem {
id: string;
primary: string;
a11y_label?: string;
secondary?: string;
search_labels?: string[];
sorting_label?: string;
@ -27,7 +28,7 @@ export interface PickerComboBoxItem {
// Hack to force empty label to always display empty value by default in the search field
export interface PickerComboBoxItemWithLabel extends PickerComboBoxItem {
label: "";
a11y_label: string;
}
const NO_MATCHING_ITEMS_FOUND_ID = "___no_matching_items_found___";
@ -109,7 +110,7 @@ export class HaPickerComboBox extends LitElement {
id: NO_MATCHING_ITEMS_FOUND_ID,
primary: label || localize("ui.components.combo-box.no_match"),
icon_path: mdiMagnify,
label: "",
a11y_label: label || localize("ui.components.combo-box.no_match"),
})
);
@ -118,7 +119,7 @@ export class HaPickerComboBox extends LitElement {
return items.map<PickerComboBoxItemWithLabel>((item) => ({
...item,
label: "",
a11y_label: item.a11y_label || item.primary,
}));
};
@ -128,7 +129,7 @@ export class HaPickerComboBox extends LitElement {
const sortedItems = items
.map<PickerComboBoxItemWithLabel>((item) => ({
...item,
label: "",
a11y_label: item.a11y_label || item.primary,
}))
.sort((entityA, entityB) =>
caseInsensitiveStringCompare(
@ -175,7 +176,8 @@ export class HaPickerComboBox extends LitElement {
<ha-combo-box
item-id-path="id"
item-value-path="id"
item-label-path="label"
item-label-path="a11y_label"
clear-initial-value
.hass=${this.hass}
.value=${this._value}
.label=${this.label}
@ -232,7 +234,7 @@ export class HaPickerComboBox extends LitElement {
const searchString = ev.detail.value.trim() as string;
const index = this._fuseIndex(this._items);
const fuse = new HaFuse(this._items, {}, index);
const fuse = new HaFuse(this._items, { shouldSort: false }, index);
const results = fuse.multiTermsSearch(searchString);
if (results) {

37
src/components/ha-selector/ha-selector-action.ts
View File

@ -1,14 +1,22 @@
import { ContextProvider, consume } from "@lit/context";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import { fullEntitiesContext } from "../../data/context";
import type { Action } from "../../data/script";
import { migrateAutomationAction } from "../../data/script";
import type { ActionSelector } from "../../data/selector";
import "../../panels/config/automation/action/ha-automation-action";
import type { HomeAssistant } from "../../types";
import {
subscribeEntityRegistry,
type EntityRegistryEntry,
} from "../../data/entity_registry";
import { SubscribeMixin } from "../../mixins/subscribe-mixin";
@customElement("ha-selector-action")
export class HaActionSelector extends LitElement {
export class HaActionSelector extends SubscribeMixin(LitElement) {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public selector!: ActionSelector;
@ -19,6 +27,14 @@ export class HaActionSelector extends LitElement {
@property({ type: Boolean, reflect: true }) public disabled = false;
@state()
@consume({ context: fullEntitiesContext, subscribe: true })
_entityReg: EntityRegistryEntry[] | undefined;
@state() private _entitiesContext;
protected hassSubscribeRequiredHostProps = ["_entitiesContext"];
private _actions = memoizeOne((action: Action | undefined) => {
if (!action) {
return [];
@ -26,6 +42,23 @@ export class HaActionSelector extends LitElement {
return migrateAutomationAction(action);
});
protected firstUpdated() {
if (!this._entityReg) {
this._entitiesContext = new ContextProvider(this, {
context: fullEntitiesContext,
initialValue: [],
});
}
}
public hassSubscribe(): UnsubscribeFunc[] {
return [
subscribeEntityRegistry(this.hass.connection!, (entities) => {
this._entitiesContext.setValue(entities);
}),
];
}
protected render() {
return html`
${this.label ? html`<label>${this.label}</label>` : nothing}

126
src/components/ha-sidebar.ts
View File

@ -14,7 +14,6 @@ import {
mdiTooltipAccount,
mdiViewDashboard,
} from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import {
@ -30,6 +29,7 @@ import { fireEvent } from "../common/dom/fire_event";
import { toggleAttribute } from "../common/dom/toggle_attribute";
import { stringCompare } from "../common/string/compare";
import { throttle } from "../common/util/throttle";
import { subscribeFrontendUserData } from "../data/frontend";
import type { ActionHandlerDetail } from "../data/lovelace/action_handler";
import type { PersistentNotification } from "../data/persistent_notification";
import { subscribeNotifications } from "../data/persistent_notification";
@ -41,11 +41,13 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant, PanelInfo, Route } from "../types";
import "./ha-fade-in";
import "./ha-icon";
import "./ha-icon-button";
import "./ha-md-list";
import "./ha-md-list-item";
import type { HaMdListItem } from "./ha-md-list-item";
import "./ha-spinner";
import "./ha-svg-icon";
import "./user/ha-user-badge";
@ -187,38 +189,57 @@ class HaSidebar extends SubscribeMixin(LitElement) {
@property({ attribute: "always-expand", type: Boolean })
public alwaysExpand = false;
@property({ attribute: false })
public panelOrder!: string[];
@property({ attribute: false })
public hiddenPanels!: string[];
@state() private _notifications?: PersistentNotification[];
@state() private _updatesCount = 0;
@state() private _issuesCount = 0;
@state() private _panelOrder?: string[];
@state() private _hiddenPanels?: string[];
private _mouseLeaveTimeout?: number;
private _tooltipHideTimeout?: number;
private _recentKeydownActiveUntil = 0;
private _unsubPersistentNotifications: UnsubscribeFunc | undefined;
@query(".tooltip") private _tooltip!: HTMLDivElement;
public hassSubscribe(): UnsubscribeFunc[] {
return this.hass.user?.is_admin
? [
subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
this._issuesCount = repairs.issues.filter(
(issue) => !issue.ignored
).length;
}),
]
: [];
public hassSubscribe() {
return [
subscribeFrontendUserData(
this.hass.connection,
"sidebar",
({ value }) => {
this._panelOrder = value?.panelOrder;
this._hiddenPanels = value?.hiddenPanels;
// fallback to old localStorage values
if (!this._panelOrder) {
const storedOrder = localStorage.getItem("sidebarPanelOrder");
this._panelOrder = storedOrder ? JSON.parse(storedOrder) : [];
}
if (!this._hiddenPanels) {
const storedHidden = localStorage.getItem("sidebarHiddenPanels");
this._hiddenPanels = storedHidden ? JSON.parse(storedHidden) : [];
}
}
),
subscribeNotifications(this.hass.connection, (notifications) => {
this._notifications = notifications;
}),
...(this.hass.user?.is_admin
? [
subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
this._issuesCount = repairs.issues.filter(
(issue) => !issue.ignored
).length;
}),
]
: []),
];
}
protected render() {
@ -254,8 +275,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
changedProps.has("_updatesCount") ||
changedProps.has("_issuesCount") ||
changedProps.has("_notifications") ||
changedProps.has("hiddenPanels") ||
changedProps.has("panelOrder")
changedProps.has("_hiddenPanels") ||
changedProps.has("_panelOrder")
) {
return true;
}
@ -279,23 +300,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
);
}
protected firstUpdated(changedProps: PropertyValues) {
super.firstUpdated(changedProps);
this._subscribePersistentNotifications();
}
private _subscribePersistentNotifications(): void {
if (this._unsubPersistentNotifications) {
this._unsubPersistentNotifications();
}
this._unsubPersistentNotifications = subscribeNotifications(
this.hass.connection,
(notifications) => {
this._notifications = notifications;
}
);
}
protected updated(changedProps) {
super.updated(changedProps);
if (changedProps.has("alwaysExpand")) {
@ -307,14 +311,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (
this.hass &&
oldHass?.connected === false &&
this.hass.connected === true
) {
this._subscribePersistentNotifications();
}
this._calculateCounts();
if (!SUPPORT_SCROLL_IF_NEEDED) {
@ -369,11 +365,19 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
private _renderAllPanels(selectedPanel: string) {
if (!this._panelOrder || !this._hiddenPanels) {
return html`
<ha-fade-in .delay=${500}
><ha-spinner size="large"></ha-spinner
></ha-fade-in>
`;
}
const [beforeSpacer, afterSpacer] = computePanels(
this.hass.panels,
this.hass.defaultPanel,
this.panelOrder,
this.hiddenPanels,
this._panelOrder,
this._hiddenPanels,
this.hass.locale
);
@ -559,18 +563,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
return;
}
showEditSidebarDialog(this, {
saveCallback: this._saveSidebar,
});
showEditSidebarDialog(this);
}
private _saveSidebar = (order: string[], hidden: string[]) => {
fireEvent(this, "hass-edit-sidebar", {
order,
hidden,
});
};
private _itemMouseEnter(ev: MouseEvent) {
// On keypresses on the listbox, we're going to ignore mouse enter events
// for 100ms so that we ignore it when pressing down arrow scrolls the
@ -730,13 +725,22 @@ class HaSidebar extends SubscribeMixin(LitElement) {
display: none;
}
ha-fade-in,
ha-md-list {
padding: 4px 0;
box-sizing: border-box;
height: calc(100% - var(--header-height) - 132px);
height: calc(
100% - var(--header-height) - 132px - var(--safe-area-inset-bottom)
);
}
ha-fade-in {
display: flex;
justify-content: center;
align-items: center;
}
ha-md-list {
padding: 4px 0;
box-sizing: border-box;
overflow-x: hidden;
background: none;
margin-left: var(--safe-area-inset-left);

6
src/components/ha-target-picker.ts
View File

@ -397,10 +397,12 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.hass=${this.hass}
id="input"
.type=${"area_id"}
.label=${this.hass.localize(
.placeholder=${this.hass.localize(
"ui.components.target-picker.add_area_id"
)}
.searchLabel=${this.hass.localize(
"ui.components.target-picker.add_area_id"
)}
no-add
.deviceFilter=${this.deviceFilter}
.entityFilter=${this.entityFilter}
.includeDeviceClasses=${this.includeDeviceClasses}

8
src/data/backup.ts
View File

@ -103,12 +103,20 @@ export interface BackupContentAgent {
protected: boolean;
}
export interface AddonInfo {
name: string | null;
slug: string;
version: string | null;
}
export interface BackupContent {
backup_id: string;
date: string;
name: string;
agents: Record<string, BackupContentAgent>;
failed_agent_ids?: string[];
failed_addons?: AddonInfo[];
failed_folders?: string[];
extra_metadata?: {
"supervisor.addon_update"?: string;
};

6
src/data/frontend.ts
View File

@ -5,9 +5,15 @@ export interface CoreFrontendUserData {
showEntityIdPicker?: boolean;
}
export interface SidebarFrontendUserData {
panelOrder: string[];
hiddenPanels: string[];
}
declare global {
interface FrontendUserData {
core: CoreFrontendUserData;
sidebar: SidebarFrontendUserData;
}
}

88
src/data/icons.ts
View File

@ -145,10 +145,12 @@ type PlatformIcons = Record<
string,
{
state: Record<string, string>;
range?: Record<string, string>;
state_attributes: Record<
string,
{
state: Record<string, string>;
range?: Record<string, string>;
default: string;
}
>;
@ -160,10 +162,12 @@ export type ComponentIcons = Record<
string,
{
state?: Record<string, string>;
range?: Record<string, string>;
state_attributes?: Record<
string,
{
state: Record<string, string>;
range?: Record<string, string>;
default: string;
}
>;
@ -286,6 +290,74 @@ export const getServiceIcons = async (
return resources.services.domains[domain];
};
// Cache for sorted range keys
const sortedRangeCache = new WeakMap<Record<string, string>, number[]>();
// Helper function to get an icon from a range of values
const getIconFromRange = (
value: number,
range: Record<string, string>
): string | undefined => {
// Get cached range values or compute and cache them
let rangeValues = sortedRangeCache.get(range);
if (!rangeValues) {
rangeValues = Object.keys(range)
.map(Number)
.filter((k) => !isNaN(k))
.sort((a, b) => a - b);
sortedRangeCache.set(range, rangeValues);
}
if (rangeValues.length === 0) {
return undefined;
}
// If the value is below the first threshold, return undefined
// (we'll fall back to the default icon)
if (value < rangeValues[0]) {
return undefined;
}
// Find the highest threshold that's less than or equal to the value
let selectedThreshold = rangeValues[0];
for (const threshold of rangeValues) {
if (value >= threshold) {
selectedThreshold = threshold;
} else {
break;
}
}
return range[selectedThreshold.toString()];
};
// Helper function to get an icon based on state and translations
const getIconFromTranslations = (
state: string | number | undefined,
translations:
| {
default?: string;
state?: Record<string, string>;
range?: Record<string, string>;
}
| undefined
): string | undefined => {
if (!translations) {
return undefined;
}
// First check for exact state match
if (state && translations.state?.[state]) {
return translations.state[state];
}
// Then check for range-based icons if we have a numeric state
if (state !== undefined && translations.range && !isNaN(Number(state))) {
return getIconFromRange(Number(state), translations.range);
}
// Fallback to default icon
return translations.default;
};
export const entityIcon = async (
hass: HomeAssistant,
stateObj: HassEntity,
@ -331,7 +403,8 @@ const getEntityIcon = async (
const platformIcons = await getPlatformIcons(hass, platform);
if (platformIcons) {
const translations = platformIcons[domain]?.[translation_key];
icon = (state && translations?.state?.[state]) || translations?.default;
icon = getIconFromTranslations(state, translations);
}
}
@ -345,7 +418,8 @@ const getEntityIcon = async (
const translations =
(device_class && entityComponentIcons[device_class]) ||
entityComponentIcons._;
icon = (state && translations?.state?.[state]) || translations?.default;
icon = getIconFromTranslations(state, translations);
}
}
return icon;
@ -372,9 +446,10 @@ export const attributeIcon = async (
if (translation_key && platform) {
const platformIcons = await getPlatformIcons(hass, platform);
if (platformIcons) {
const translations =
platformIcons[domain]?.[translation_key]?.state_attributes?.[attribute];
icon = (value && translations?.state?.[value]) || translations?.default;
icon = getIconFromTranslations(
value,
platformIcons[domain]?.[translation_key]?.state_attributes?.[attribute]
);
}
}
if (!icon) {
@ -384,7 +459,8 @@ export const attributeIcon = async (
(deviceClass &&
entityComponentIcons[deviceClass]?.state_attributes?.[attribute]) ||
entityComponentIcons._?.state_attributes?.[attribute];
icon = (value && translations?.state?.[value]) || translations?.default;
icon = getIconFromTranslations(value, translations);
}
}
return icon;

7
src/data/lovelace_custom_cards.ts
View File

@ -1,4 +1,6 @@
import type { HassEntity } from "home-assistant-js-websocket";
import type { HomeAssistant } from "../types";
import type { LovelaceCardFeatureContext } from "../panels/lovelace/card-features/types";
export interface CustomCardEntry {
type: string;
@ -19,7 +21,12 @@ export interface CustomBadgeEntry {
export interface CustomCardFeatureEntry {
type: string;
name?: string;
/** @deprecated Use `isSupported` */
supported?: (stateObj: HassEntity) => boolean;
isSupported?: (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => boolean;
configurable?: boolean;
}

9
src/data/translation.ts
View File

@ -1,9 +1,5 @@
import type { HomeAssistant } from "../types";
import {
fetchFrontendUserData,
saveFrontendUserData,
subscribeFrontendUserData,
} from "./frontend";
import { saveFrontendUserData, subscribeFrontendUserData } from "./frontend";
export enum NumberFormat {
language = "language",
@ -78,9 +74,6 @@ export type TranslationCategory =
| "selector"
| "services";
export const fetchTranslationPreferences = (hass: HomeAssistant) =>
fetchFrontendUserData(hass.connection, "language");
export const subscribeTranslationPreferences = (
hass: HomeAssistant,
callback: (data: { value: FrontendLocaleData | null }) => void

7
src/dialogs/config-flow/show-dialog-config-flow.ts
View File

@ -73,7 +73,12 @@ export const showConfigFlowDialog = (
);
return description
? html`
<ha-markdown allow-svg breaks .content=${description}></ha-markdown>
<ha-markdown
.allowDataUrl=${step.handler === "zwave_js"}
allow-svg
breaks
.content=${description}
></ha-markdown>
`
: "";
},

25
src/dialogs/config-flow/step-flow-form.ts
View File

@ -1,6 +1,7 @@
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { dynamicElement } from "../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../common/dom/fire_event";
import { isNavigationClick } from "../../common/dom/is-navigation-click";
@ -8,7 +9,10 @@ import "../../components/ha-button";
import "../../components/ha-alert";
import { computeInitialHaFormData } from "../../components/ha-form/compute-initial-ha-form-data";
import "../../components/ha-form/ha-form";
import type { HaFormSchema } from "../../components/ha-form/types";
import type {
HaFormSchema,
HaFormSelector,
} from "../../components/ha-form/types";
import "../../components/ha-markdown";
import "../../components/ha-spinner";
import { autocompleteLoginFields } from "../../data/auth";
@ -38,6 +42,15 @@ class StepFlowForm extends LitElement {
this.removeEventListener("keydown", this._handleKeyDown);
}
private handleReadOnlyFields = memoizeOne((schema) =>
schema?.map((field) => ({
...field,
...(Object.values((field as HaFormSelector)?.selector ?? {})[0]?.read_only
? { disabled: true }
: {}),
}))
);
protected render(): TemplateResult {
const step = this.step;
const stepData = this._stepDataProcessed;
@ -53,7 +66,9 @@ class StepFlowForm extends LitElement {
.data=${stepData}
.disabled=${this._loading}
@value-changed=${this._stepDataChanged}
.schema=${autocompleteLoginFields(step.data_schema)}
.schema=${autocompleteLoginFields(
this.handleReadOnlyFields(step.data_schema)
)}
.error=${step.errors}
.computeLabel=${this._labelCallback}
.computeHelper=${this._helperCallback}
@ -178,8 +193,10 @@ class StepFlowForm extends LitElement {
Object.keys(stepData).forEach((key) => {
const value = stepData[key];
const isEmpty = [undefined, ""].includes(value);
if (!isEmpty) {
const field = this.step.data_schema?.find((f) => f.name === key);
const selector = (field as HaFormSelector)?.selector ?? {};
const read_only = (Object.values(selector)[0] as any)?.read_only;
if (!isEmpty && !read_only) {
toSendData[key] = value;
}
});

140
src/dialogs/sidebar/dialog-edit-sidebar.ts
View File

@ -1,18 +1,25 @@
import "@material/mwc-linear-progress/mwc-linear-progress";
import { mdiClose } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { css, html, LitElement, nothing, type TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-alert";
import "../../components/ha-dialog-header";
import "../../components/ha-fade-in";
import "../../components/ha-icon-button";
import "../../components/ha-items-display-editor";
import type { DisplayValue } from "../../components/ha-items-display-editor";
import "../../components/ha-md-dialog";
import type { HaMdDialog } from "../../components/ha-md-dialog";
import { computePanels, PANEL_ICONS } from "../../components/ha-sidebar";
import "../../components/ha-spinner";
import {
fetchFrontendUserData,
saveFrontendUserData,
} from "../../data/frontend";
import type { HomeAssistant } from "../../types";
import type { EditSidebarDialogParams } from "./show-dialog-edit-sidebar";
import { showConfirmationDialog } from "../generic/show-dialog-box";
@customElement("dialog-edit-sidebar")
class DialogEditSidebar extends LitElement {
@ -22,21 +29,43 @@ class DialogEditSidebar extends LitElement {
@query("ha-md-dialog") private _dialog?: HaMdDialog;
@state() private _order: string[] = [];
@state() private _order?: string[];
@state() private _hidden: string[] = [];
@state() private _hidden?: string[];
private _saveCallback?: (order: string[], hidden: string[]) => void;
@state() private _error?: string;
public async showDialog(params: EditSidebarDialogParams): Promise<void> {
/**
* If user has old localStorage values, show a confirmation dialog
*/
@state() private _migrateToUserData = false;
public async showDialog(): Promise<void> {
this._open = true;
const storedOrder = localStorage.getItem("sidebarPanelOrder");
const storedHidden = localStorage.getItem("sidebarHiddenPanels");
this._getData();
}
this._order = storedOrder ? JSON.parse(storedOrder) : this._order;
this._hidden = storedHidden ? JSON.parse(storedHidden) : this._hidden;
this._saveCallback = params.saveCallback;
private async _getData() {
try {
const data = await fetchFrontendUserData(this.hass.connection, "sidebar");
this._order = data?.panelOrder;
this._hidden = data?.hiddenPanels;
// fallback to old localStorage values
if (!this._order) {
const storedOrder = localStorage.getItem("sidebarPanelOrder");
this._migrateToUserData = !!storedOrder;
this._order = storedOrder ? JSON.parse(storedOrder) : [];
}
if (!this._hidden) {
const storedHidden = localStorage.getItem("sidebarHiddenPanels");
this._migrateToUserData = this._migrateToUserData || !!storedHidden;
this._hidden = storedHidden ? JSON.parse(storedHidden) : [];
}
} catch (err: any) {
this._error = err.message || err;
}
}
private _dialogClosed(): void {
@ -52,12 +81,16 @@ class DialogEditSidebar extends LitElement {
panels ? Object.values(panels) : []
);
protected render() {
if (!this._open) {
return nothing;
private _renderContent(): TemplateResult {
if (!this._order || !this._hidden) {
return html`<ha-fade-in .delay=${500}
><ha-spinner size="large"></ha-spinner
></ha-fade-in>`;
}
const dialogTitle = this.hass.localize("ui.sidebar.edit_sidebar");
if (this._error) {
return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
}
const panels = this._panels(this.hass.panels);
@ -71,7 +104,7 @@ class DialogEditSidebar extends LitElement {
const items = [
...beforeSpacer,
...panels.filter((panel) => this._hidden.includes(panel.url_path)),
...panels.filter((panel) => this._hidden!.includes(panel.url_path)),
...afterSpacer.filter((panel) => panel.url_path !== "config"),
].map((panel) => ({
value: panel.url_path,
@ -89,6 +122,26 @@ class DialogEditSidebar extends LitElement {
disableSorting: panel.url_path === "developer-tools",
}));
return html`<ha-items-display-editor
.hass=${this.hass}
.value=${{
order: this._order,
hidden: this._hidden,
}}
.items=${items}
@value-changed=${this._changed}
dont-sort-visible
>
</ha-items-display-editor>`;
}
protected render() {
if (!this._open) {
return nothing;
}
const dialogTitle = this.hass.localize("ui.sidebar.edit_sidebar");
return html`
<ha-md-dialog open @closed=${this._dialogClosed}>
<ha-dialog-header slot="headline">
@ -98,26 +151,22 @@ class DialogEditSidebar extends LitElement {
.path=${mdiClose}
@click=${this.closeDialog}
></ha-icon-button>
<span slot="title" .title=${dialogTitle}> ${dialogTitle} </span>
<span slot="title" .title=${dialogTitle}>${dialogTitle}</span>
${!this._migrateToUserData
? html`<span slot="subtitle"
>${this.hass.localize("ui.sidebar.edit_subtitle")}</span
>`
: nothing}
</ha-dialog-header>
<div slot="content" class="content">
<ha-items-display-editor
.hass=${this.hass}
.value=${{
order: this._order,
hidden: this._hidden,
}}
.items=${items}
@value-changed=${this._changed}
dont-sort-visible
>
</ha-items-display-editor>
</div>
<div slot="content" class="content">${this._renderContent()}</div>
<div slot="actions">
<ha-button @click=${this.closeDialog}>
${this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button @click=${this._save}>
<ha-button
.disabled=${!this._order || !this._hidden}
@click=${this._save}
>
${this.hass.localize("ui.common.save")}
</ha-button>
</div>
@ -131,8 +180,27 @@ class DialogEditSidebar extends LitElement {
this._hidden = [...hidden];
}
private _save(): void {
this._saveCallback?.(this._order ?? [], this._hidden ?? []);
private async _save() {
if (this._migrateToUserData) {
const confirmation = await showConfirmationDialog(this, {
destructive: true,
text: this.hass.localize("ui.sidebar.migrate_to_user_data"),
});
if (!confirmation) {
return;
}
}
try {
await saveFrontendUserData(this.hass.connection, "sidebar", {
panelOrder: this._order!,
hiddenPanels: this._hidden!,
});
} catch (err: any) {
this._error = err.message || err;
return;
}
this.closeDialog();
}
@ -149,6 +217,12 @@ class DialogEditSidebar extends LitElement {
min-height: 100%;
}
}
ha-fade-in {
display: flex;
justify-content: center;
align-items: center;
}
`;
}

11
src/dialogs/sidebar/show-dialog-edit-sidebar.ts
View File

@ -1,18 +1,11 @@
import { fireEvent } from "../../common/dom/fire_event";
export interface EditSidebarDialogParams {
saveCallback: (order: string[], hidden: string[]) => void;
}
export const loadEditSidebarDialog = () => import("./dialog-edit-sidebar");
export const showEditSidebarDialog = (
element: HTMLElement,
dialogParams: EditSidebarDialogParams
): void => {
export const showEditSidebarDialog = (element: HTMLElement): void => {
fireEvent(element, "show-dialog", {
dialogTag: "dialog-edit-sidebar",
dialogImport: loadEditSidebarDialog,
dialogParams,
dialogParams: {},
});
};

2
src/dialogs/voice-assistant-setup/voice-assistant-setup-step-update.ts
View File

@ -131,7 +131,7 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement {
);
this._refreshTimeout = window.setTimeout(() => {
this._nextStep();
}, 5000);
}, 10000);
} else {
this._nextStep();
}

36
src/layouts/home-assistant-main.ts
View File

@ -5,31 +5,23 @@ import type { HASSDomEvent } from "../common/dom/fire_event";
import { fireEvent } from "../common/dom/fire_event";
import { listenMediaQuery } from "../common/dom/media_query";
import { toggleAttribute } from "../common/dom/toggle_attribute";
import { computeRTLDirection } from "../common/util/compute_rtl";
import "../components/ha-drawer";
import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
import type { HomeAssistant, Route } from "../types";
import "./partial-panel-resolver";
import { computeRTLDirection } from "../common/util/compute_rtl";
import { storage } from "../common/decorators/storage";
declare global {
// for fire event
interface HASSDomEvents {
"hass-toggle-menu": undefined | { open?: boolean };
"hass-edit-sidebar": EditSideBarEvent;
"hass-show-notifications": undefined;
}
interface HTMLElementEventMap {
"hass-edit-sidebar": HASSDomEvent<EditSideBarEvent>;
"hass-toggle-menu": HASSDomEvent<HASSDomEvents["hass-toggle-menu"]>;
}
}
interface EditSideBarEvent {
order: string[];
hidden: string[];
}
@customElement("home-assistant-main")
export class HomeAssistantMain extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -44,22 +36,6 @@ export class HomeAssistantMain extends LitElement {
@state() private _drawerOpen = false;
@state()
@storage({
key: "sidebarPanelOrder",
state: true,
subscribe: true,
})
private _panelOrder: string[] = [];
@state()
@storage({
key: "sidebarHiddenPanels",
state: true,
subscribe: true,
})
private _hiddenPanels: string[] = [];
constructor() {
super();
listenMediaQuery("(max-width: 870px)", (matches) => {
@ -81,8 +57,6 @@ export class HomeAssistantMain extends LitElement {
.hass=${this.hass}
.narrow=${sidebarNarrow}
.route=${this.route}
.panelOrder=${this._panelOrder}
.hiddenPanels=${this._hiddenPanels}
.alwaysExpand=${sidebarNarrow || this.hass.dockedSidebar === "docked"}
></ha-sidebar>
<partial-panel-resolver
@ -106,14 +80,6 @@ export class HomeAssistantMain extends LitElement {
);
}
this.addEventListener(
"hass-edit-sidebar",
(ev: HASSDomEvent<EditSideBarEvent>) => {
this._panelOrder = ev.detail.order;
this._hiddenPanels = ev.detail.hidden;
}
);
this.addEventListener("hass-toggle-menu", (ev) => {
if (this._sidebarEditMode) {
return;

17
src/panels/calendar/ha-full-calendar.ts
View File

@ -41,6 +41,7 @@ import type {
} from "../../types";
import { showCalendarEventDetailDialog } from "./show-dialog-calendar-event-detail";
import { showCalendarEventEditDialog } from "./show-dialog-calendar-event-editor";
import "../lovelace/components/hui-warning";
declare global {
interface HTMLElementTagNameMap {
@ -126,11 +127,8 @@ export class HAFullCalendar extends LitElement {
${this.calendar
? html`
${this.error
? html`<ha-alert
alert-type="error"
dismissable
@alert-dismissed-clicked=${this._clearError}
>${this.error}</ha-alert
? html`<hui-warning .hass=${this.hass} severity="warning"
>${this.error}</hui-warning
>`
: ""}
<div class="header">
@ -422,10 +420,6 @@ export class HAFullCalendar extends LitElement {
);
});
private _clearError() {
this.error = undefined;
}
static get styles(): CSSResultGroup {
return [
haStyle,
@ -512,11 +506,6 @@ export class HAFullCalendar extends LitElement {
z-index: 1;
}
ha-alert {
display: block;
margin: 4px 0;
}
#calendar {
flex-grow: 1;
background-color: var(

5
src/panels/config/automation/action/types/ha-automation-action-device_id.ts
View File

@ -127,6 +127,7 @@ export class HaDeviceAction extends LitElement {
}
protected firstUpdated() {
this.hass.loadBackendTranslation("device_automation");
if (!this._capabilities) {
this._getCapabilities();
}
@ -135,8 +136,8 @@ export class HaDeviceAction extends LitElement {
}
}
protected updated(changedPros) {
const prevAction = changedPros.get("action");
protected updated(changedProps) {
const prevAction = changedProps.get("action");
if (
prevAction &&
!deviceAutomationsEqual(this._entityReg, prevAction, this.action)

5
src/panels/config/automation/condition/types/ha-automation-condition-device.ts
View File

@ -128,6 +128,7 @@ export class HaDeviceCondition extends LitElement {
}
protected firstUpdated() {
this.hass.loadBackendTranslation("device_automation");
if (!this._capabilities) {
this._getCapabilities();
}
@ -136,8 +137,8 @@ export class HaDeviceCondition extends LitElement {
}
}
protected updated(changedPros) {
const prevCondition = changedPros.get("condition");
protected updated(changedProps) {
const prevCondition = changedProps.get("condition");
if (
prevCondition &&
!deviceAutomationsEqual(this._entityReg, prevCondition, this.condition)

1
src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts
View File

@ -132,6 +132,7 @@ export class HaDeviceTrigger extends LitElement {
}
protected firstUpdated() {
this.hass.loadBackendTranslation("device_automation");
if (!this._capabilities) {
this._getCapabilities();
}

70
src/panels/config/backup/components/ha-backup-details-summary.ts
View File

@ -1,15 +1,17 @@
import { css, html, LitElement } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { formatDateTime } from "../../../../common/datetime/format_date_time";
import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
import "../../../../components/ha-alert";
import "../../../../components/ha-card";
import "../../../../components/ha-md-list";
import "../../../../components/ha-md-list-item";
import type { HomeAssistant } from "../../../../types";
import { formatDateTime } from "../../../../common/datetime/format_date_time";
import {
computeBackupSize,
computeBackupType,
type BackupContentExtended,
} from "../../../../data/backup";
import type { HomeAssistant } from "../../../../types";
import { bytesToString } from "../../../../util/bytes-to-string";
@customElement("ha-backup-details-summary")
@ -28,12 +30,35 @@ class HaBackupDetailsSummary extends LitElement {
this.hass.config
);
const errors: { title: string; items: string[] }[] = [];
if (this.backup.failed_addons?.length) {
errors.push({
title: this.hass.localize(
"ui.panel.config.backup.details.summary.error.failed_addons"
),
items: this.backup.failed_addons.map(
(addon) => `${addon.name || addon.slug} (${addon.version})`
),
});
}
if (this.backup.failed_folders?.length) {
errors.push({
title: this.hass.localize(
"ui.panel.config.backup.details.summary.error.failed_folders"
),
items: this.backup.failed_folders.map((folder) =>
this._localizeFolder(folder)
),
});
}
return html`
<ha-card>
<div class="card-header">
${this.hass.localize("ui.panel.config.backup.details.summary.title")}
</div>
<div class="card-content">
${errors.length ? this._renderErrorSummary(errors) : nothing}
<ha-md-list class="summary">
<ha-md-list-item>
<span slot="headline">
@ -69,6 +94,45 @@ class HaBackupDetailsSummary extends LitElement {
`;
}
private _renderErrorSummary(errors: { title: string; items: string[] }[]) {
return html`
<ha-alert
alert-type="error"
.title=${this.hass.localize(
"ui.panel.config.backup.details.summary.error.title"
)}
>
${errors.map(
({ title, items }) => html`
<br />
<b>${title}:</b>
<ul>
${items.map((item) => html`<li>${item}</li>`)}
</ul>
`
)}
</ha-alert>
`;
}
private _localizeFolder(folder: string): string {
switch (folder) {
case "media":
return this.hass.localize(`ui.panel.config.backup.data_picker.media`);
case "share":
return this.hass.localize(
`ui.panel.config.backup.data_picker.share_folder`
);
case "ssl":
return this.hass.localize(`ui.panel.config.backup.data_picker.ssl`);
case "addons/local":
return this.hass.localize(
`ui.panel.config.backup.data_picker.local_addons`
);
}
return capitalizeFirstLetter(folder);
}
static styles = css`
:host {
max-width: 690px;

385
src/panels/config/backup/components/overview/ha-backup-overview-summary.ts
View File

@ -4,13 +4,18 @@ import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one";
import {
formatDate,
formatDateWeekday,
} from "../../../../../common/datetime/format_date";
import { relativeTime } from "../../../../../common/datetime/relative_time";
import type { LocalizeKeys } from "../../../../../common/translations/localize";
import "../../../../../components/ha-button";
import "../../../../../components/ha-card";
import "../../../../../components/ha-icon-button";
import "../../../../../components/ha-md-list";
import "../../../../../components/ha-md-list-item";
import "../../../../../components/ha-svg-icon";
import "../../../../../components/ha-icon-button";
import type { BackupConfig, BackupContent } from "../../../../../data/backup";
import {
BackupScheduleRecurrence,
@ -18,12 +23,8 @@ import {
} from "../../../../../data/backup";
import { haStyle } from "../../../../../resources/styles";
import type { HomeAssistant } from "../../../../../types";
import "../ha-backup-summary-card";
import {
formatDate,
formatDateWeekday,
} from "../../../../../common/datetime/format_date";
import { showAlertDialog } from "../../../../lovelace/custom-card-helpers";
import "../ha-backup-summary-card";
const OVERDUE_MARGIN_HOURS = 3;
@ -55,29 +56,57 @@ class HaBackupOverviewBackups extends LitElement {
);
});
private _renderSummaryCard(
heading: string,
status: "error" | "info" | "warning" | "loading" | "success",
headline: string | null,
description?: string | null,
lastCompletedDate?: Date
) {
return html`
<ha-backup-summary-card .heading=${heading} .status=${status}>
<ha-md-list>
<ha-md-list-item>
<ha-svg-icon slot="start" .path=${mdiBackupRestore}></ha-svg-icon>
<span slot="headline" class=${headline === null ? "skeleton" : ""}
>${headline}</span
>
</ha-md-list-item>
${description || description === null
? html`<ha-md-list-item>
<ha-svg-icon slot="start" .path=${mdiCalendar}></ha-svg-icon>
<span
slot="headline"
class=${description === null ? "skeleton" : ""}
>${description}</span
>
${lastCompletedDate
? html` <ha-icon-button
slot="end"
@click=${this._createAdditionalBackupDescription(
lastCompletedDate
)}
.path=${mdiInformation}
></ha-icon-button>`
: nothing}
</ha-md-list-item>`
: nothing}
</ha-md-list>
</ha-backup-summary-card>
`;
}
protected render() {
const now = new Date();
if (this.fetching) {
return html`
<ha-backup-summary-card
.heading=${this.hass.localize(
"ui.panel.config.backup.overview.summary.loading"
)}
status="loading"
>
<ha-md-list>
<ha-md-list-item>
<ha-svg-icon slot="start" .path=${mdiBackupRestore}></ha-svg-icon>
<span slot="headline" class="skeleton"></span>
</ha-md-list-item>
<ha-md-list-item>
<ha-svg-icon slot="start" .path=${mdiCalendar}></ha-svg-icon>
<span slot="headline" class="skeleton"></span>
</ha-md-list-item>
</ha-md-list>
</ha-backup-summary-card>
`;
return this._renderSummaryCard(
this.hass.localize("ui.panel.config.backup.overview.summary.loading"),
"loading",
null,
null
);
}
const lastBackup = this._lastBackup(this.backups);
@ -137,146 +166,112 @@ class HaBackupOverviewBackups extends LitElement {
if (lastAttemptDate > lastCompletedDate) {
const lastUploadedBackup = this._lastUploadedBackup(this.backups);
return html`
<ha-backup-summary-card
.heading=${this.hass.localize(
"ui.panel.config.backup.overview.summary.last_backup_failed_heading"
)}
status="error"
>
<ha-md-list>
<ha-md-list-item>
<ha-svg-icon slot="start" .path=${mdiBackupRestore}></ha-svg-icon>
<span slot="headline">
${this.hass.localize(
"ui.panel.config.backup.overview.summary.last_backup_failed_description",
{
relative_time: relativeTime(
lastAttemptDate,
this.hass.locale,
now,
true
),
}
)}
</span>
</ha-md-list-item>
${lastUploadedBackup || nextBackupDescription
? html`
<ha-md-list-item>
<ha-svg-icon
slot="start"
.path=${mdiCalendar}
></ha-svg-icon>
<span slot="headline">
${lastUploadedBackup
? this.hass.localize(
"ui.panel.config.backup.overview.summary.last_successful_backup_description",
{
relative_time: relativeTime(
new Date(lastUploadedBackup.date),
this.hass.locale,
now,
true
),
count: Object.keys(lastUploadedBackup.agents)
.length,
}
)
: nextBackupDescription}
</span>
</ha-md-list-item>
`
: nothing}
</ha-md-list>
</ha-backup-summary-card>
`;
return this._renderSummaryCard(
this.hass.localize(
"ui.panel.config.backup.overview.summary.last_backup_failed_heading"
),
"error",
this.hass.localize(
"ui.panel.config.backup.overview.summary.last_backup_failed_description",
{
relative_time: relativeTime(
lastAttemptDate,
this.hass.locale,
now,
true
),
}
),
lastUploadedBackup || nextBackupDescription
? lastUploadedBackup
? this.hass.localize(
"ui.panel.config.backup.overview.summary.last_successful_backup_description",
{
relative_time: relativeTime(
new Date(lastUploadedBackup.date),
this.hass.locale,
now,
true
),
count: Object.keys(lastUploadedBackup.agents).length,
}
)
: nextBackupDescription
: undefined
);
}
// If no backups yet, show warning
if (!lastBackup) {
return html`
<ha-backup-summary-card
.heading=${this.hass.localize(
"ui.panel.config.backup.overview.summary.no_backup_heading"
)}
status="warning"
>
<ha-md-list>
<ha-md-list-item>
<ha-svg-icon slot="start" .path=${mdiBackupRestore}></ha-svg-icon>
<span slot="headline">
${this.hass.localize(
"ui.panel.config.backup.overview.summary.no_backup_description"
)}
</span>
</ha-md-list-item>
${this._renderNextBackupDescription(
nextBackupDescription,
lastCompletedDate,
showAdditionalBackupDescription
)}
</ha-md-list>
</ha-backup-summary-card>
`;
return this._renderSummaryCard(
this.hass.localize(
"ui.panel.config.backup.overview.summary.no_backup_heading"
),
"warning",
this.hass.localize(
"ui.panel.config.backup.overview.summary.no_backup_description"
),
nextBackupDescription,
showAdditionalBackupDescription ? lastCompletedDate : undefined
);
}
const lastBackupDate = new Date(lastBackup.date);
// If last backup
if (lastBackup.failed_agent_ids?.length) {
// if parts of the last backup failed
if (
lastBackup.failed_agent_ids?.length ||
lastBackup.failed_addons?.length ||
lastBackup.failed_folders?.length
) {
const lastUploadedBackup = this._lastUploadedBackup(this.backups);
return html`
<ha-backup-summary-card
.heading=${this.hass.localize(
"ui.panel.config.backup.overview.summary.last_backup_failed_heading"
)}
status="error"
>
<ha-md-list>
<ha-md-list-item>
<ha-svg-icon slot="start" .path=${mdiBackupRestore}></ha-svg-icon>
<span slot="headline">
${this.hass.localize(
"ui.panel.config.backup.overview.summary.last_backup_failed_locations_description",
{
relative_time: relativeTime(
lastAttemptDate,
this.hass.locale,
now,
true
),
}
)}
</span>
</ha-md-list-item>
const failedTypes: string[] = [];
${lastUploadedBackup || nextBackupDescription
? html` <ha-md-list-item>
<ha-svg-icon slot="start" .path=${mdiCalendar}></ha-svg-icon>
<span slot="headline">
${lastUploadedBackup
? this.hass.localize(
"ui.panel.config.backup.overview.summary.last_successful_backup_description",
{
relative_time: relativeTime(
new Date(lastUploadedBackup.date),
this.hass.locale,
now,
true
),
count: Object.keys(lastUploadedBackup.agents)
.length,
}
)
: nextBackupDescription}
</span>
</ha-md-list-item>`
: nothing}
</ha-md-list>
</ha-backup-summary-card>
`;
if (lastBackup.failed_agent_ids?.length) {
failedTypes.push("locations");
}
if (lastBackup.failed_addons?.length) {
failedTypes.push("addons");
}
if (lastBackup.failed_folders?.length) {
failedTypes.push("folders");
}
const type = failedTypes.join("_");
return this._renderSummaryCard(
this.hass.localize(
"ui.panel.config.backup.overview.summary.last_backup_failed_heading"
),
"error",
this.hass.localize(
`ui.panel.config.backup.overview.summary.last_backup_failed_${type}_description` as LocalizeKeys,
{
relative_time: relativeTime(
lastAttemptDate,
this.hass.locale,
now,
true
),
}
),
lastUploadedBackup
? this.hass.localize(
"ui.panel.config.backup.overview.summary.last_successful_backup_description",
{
relative_time: relativeTime(
new Date(lastUploadedBackup.date),
this.hass.locale,
now,
true
),
count: Object.keys(lastUploadedBackup.agents).length,
}
)
: nextBackupDescription,
showAdditionalBackupDescription ? lastCompletedDate : undefined
);
}
const lastSuccessfulBackupDescription = this.hass.localize(
@ -303,67 +298,33 @@ class HaBackupOverviewBackups extends LitElement {
this.config.schedule.recurrence === BackupScheduleRecurrence.DAILY) ||
numberOfDays >= 7;
return html`
<ha-backup-summary-card
.heading=${this.hass.localize(
`ui.panel.config.backup.overview.summary.${isOverdue ? "backup_too_old_heading" : "backup_success_heading"}`,
{ count: numberOfDays }
)}
.status=${isOverdue ? "warning" : "success"}
>
<ha-md-list>
<ha-md-list-item>
<ha-svg-icon slot="start" .path=${mdiBackupRestore}></ha-svg-icon>
<span slot="headline">${lastSuccessfulBackupDescription}</span>
</ha-md-list-item>
${this._renderNextBackupDescription(
nextBackupDescription,
lastCompletedDate,
showAdditionalBackupDescription
)}
</ha-md-list>
</ha-backup-summary-card>
`;
return this._renderSummaryCard(
this.hass.localize(
`ui.panel.config.backup.overview.summary.${isOverdue ? "backup_too_old_heading" : "backup_success_heading"}`,
{ count: numberOfDays }
),
isOverdue ? "warning" : "success",
lastSuccessfulBackupDescription,
nextBackupDescription,
showAdditionalBackupDescription ? lastCompletedDate : undefined
);
}
private _renderNextBackupDescription(
nextBackupDescription: string,
lastCompletedDate: Date,
showTip = false
) {
// handle edge case that there is an additional backup scheduled
const openAdditionalBackupDescriptionDialog = showTip
? () => {
showAlertDialog(this, {
text: this.hass.localize(
"ui.panel.config.backup.overview.summary.additional_backup_description",
{
date: formatDate(
lastCompletedDate,
this.hass.locale,
this.hass.config
),
}
private _createAdditionalBackupDescription =
(lastCompletedDate: Date) => () => {
showAlertDialog(this, {
text: this.hass.localize(
"ui.panel.config.backup.overview.summary.additional_backup_description",
{
date: formatDate(
lastCompletedDate,
this.hass.locale,
this.hass.config
),
});
}
: undefined;
return nextBackupDescription
? html`<ha-md-list-item>
<ha-svg-icon slot="start" .path=${mdiCalendar}></ha-svg-icon>
<span slot="headline">${nextBackupDescription}</span>
${showTip
? html` <ha-icon-button
slot="end"
@click=${openAdditionalBackupDescriptionDialog}
.path=${mdiInformation}
></ha-icon-button>`
: nothing}
</ha-md-list-item>`
: nothing;
}
}
),
});
};
static get styles(): CSSResultGroup {
return [

351
src/panels/config/category/ha-category-picker.ts
View File

@ -1,17 +1,14 @@
import { mdiTag } from "@mdi/js";
import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { mdiTag, mdiPlus } from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { html, LitElement, nothing } from "lit";
import type { TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import type { ScorableTextItem } from "../../../common/string/filter/sequence-matching";
import { fuzzyFilterSort } from "../../../common/string/filter/sequence-matching";
import "../../../components/ha-combo-box";
import type { HaComboBox } from "../../../components/ha-combo-box";
import "../../../components/ha-combo-box-item";
import "../../../components/ha-icon-button";
import "../../../components/ha-generic-picker";
import type { HaGenericPicker } from "../../../components/ha-generic-picker";
import type { PickerComboBoxItem } from "../../../components/ha-picker-combo-box";
import type { PickerValueRenderer } from "../../../components/ha-picker-field";
import "../../../components/ha-svg-icon";
import type { CategoryRegistryEntry } from "../../../data/category_registry";
import {
@ -22,20 +19,8 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import type { HomeAssistant, ValueChangedEvent } from "../../../types";
import { showCategoryRegistryDetailDialog } from "./show-dialog-category-registry-detail";
type ScorableCategoryRegistryEntry = ScorableTextItem & CategoryRegistryEntry;
const ADD_NEW_ID = "___ADD_NEW___";
const NO_CATEGORIES_ID = "___NO_CATEGORIES___";
const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
const rowRenderer: ComboBoxLitRenderer<CategoryRegistryEntry> = (item) => html`
<ha-combo-box-item type="button">
${item.icon
? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
: html`<ha-svg-icon .path=${mdiTag} slot="start"></ha-svg-icon>`}
${item.name}
</ha-combo-box-item>
`;
@customElement("ha-category-picker")
export class HaCategoryPicker extends SubscribeMixin(LitElement) {
@ -58,14 +43,17 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
@property({ type: Boolean }) public required = false;
@state() private _opened?: boolean;
@state() private _categories?: CategoryRegistryEntry[];
@query("ha-combo-box", true) public comboBox!: HaComboBox;
@query("ha-generic-picker") private _picker?: HaGenericPicker;
protected hassSubscribeRequiredHostProps = ["scope"];
public async open() {
await this.updateComplete;
await this._picker?.open();
}
protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
return [
subscribeCategoryRegistry(
@ -78,186 +66,185 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
];
}
private _suggestion?: string;
private _init = false;
public async open() {
await this.updateComplete;
await this.comboBox?.open();
}
public async focus() {
await this.updateComplete;
await this.comboBox?.focus();
}
private _getCategories = memoizeOne(
private _categoryMap = memoizeOne(
(
categories: CategoryRegistryEntry[] | undefined,
noAdd: this["noAdd"]
): CategoryRegistryEntry[] => {
const result = categories ? [...categories] : [];
if (!result?.length) {
result.push({
category_id: NO_CATEGORIES_ID,
name: this.hass.localize(
"ui.components.category-picker.no_categories"
),
icon: null,
});
categories: CategoryRegistryEntry[] | undefined
): Map<string, CategoryRegistryEntry> => {
if (!categories) {
return new Map();
}
return noAdd
? result
: [
...result,
{
category_id: ADD_NEW_ID,
name: this.hass.localize("ui.components.category-picker.add_new"),
icon: "mdi:plus",
},
];
return new Map(
categories.map((category) => [category.category_id, category])
);
}
);
protected updated(changedProps: PropertyValues) {
if (
(!this._init && this.hass && this._categories) ||
(this._init && changedProps.has("_opened") && this._opened)
) {
this._init = true;
const categories = this._getCategories(this._categories, this.noAdd).map(
(label) => ({
...label,
strings: [label.name],
})
);
this.comboBox.items = categories;
this.comboBox.filteredItems = categories;
}
}
private _computeValueRenderer = memoizeOne(
(categories: CategoryRegistryEntry[] | undefined): PickerValueRenderer =>
(value) => {
const category = this._categoryMap(categories).get(value);
protected render() {
if (!this._categories) {
return nothing;
}
return html`
<ha-combo-box
.hass=${this.hass}
.helper=${this.helper}
item-value-path="category_id"
item-id-path="category_id"
item-label-path="name"
.value=${this._value}
.disabled=${this.disabled}
.required=${this.required}
.label=${this.label === undefined && this.hass
? this.hass.localize("ui.components.category-picker.category")
: this.label}
.placeholder=${this.placeholder}
.renderer=${rowRenderer}
@filter-changed=${this._filterChanged}
@opened-changed=${this._openedChanged}
@value-changed=${this._categoryChanged}
>
</ha-combo-box>
`;
}
if (!category) {
return html`
<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>
<span slot="headline">${value}</span>
`;
}
private _filterChanged(ev: CustomEvent): void {
const target = ev.target as HaComboBox;
const filterString = ev.detail.value;
if (!filterString) {
this.comboBox.filteredItems = this.comboBox.items;
return;
}
return html`
${category.icon
? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
: html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
<span slot="headline">${category.name}</span>
`;
}
);
const filteredItems = fuzzyFilterSort<ScorableCategoryRegistryEntry>(
filterString,
target.items?.filter(
(item) => ![NO_CATEGORIES_ID, ADD_NEW_ID].includes(item.category_id)
) || []
);
if (filteredItems?.length === 0) {
if (this.noAdd) {
this.comboBox.filteredItems = [
private _getCategories = memoizeOne(
(categories: CategoryRegistryEntry[] | undefined): PickerComboBoxItem[] => {
if (!categories || categories.length === 0) {
return [
{
category_id: NO_CATEGORIES_ID,
name: this.hass.localize("ui.components.category-picker.no_match"),
icon: null,
},
] as ScorableCategoryRegistryEntry[];
} else {
this._suggestion = filterString;
this.comboBox.filteredItems = [
{
category_id: ADD_NEW_SUGGESTION_ID,
name: this.hass.localize(
"ui.components.category-picker.add_new_sugestion",
{ name: this._suggestion }
id: NO_CATEGORIES_ID,
primary: this.hass.localize(
"ui.components.category-picker.no_categories"
),
icon: "mdi:plus",
icon_path: mdiTag,
},
];
}
} else {
this.comboBox.filteredItems = filteredItems;
const items = categories.map<PickerComboBoxItem>((category) => ({
id: category.category_id,
primary: category.name,
icon: category.icon || undefined,
icon_path: category.icon ? undefined : mdiTag,
sorting_label: category.name,
search_labels: [category.name, category.category_id].filter(
(v): v is string => Boolean(v)
),
}));
return items;
}
}
);
private get _value() {
return this.value || "";
}
private _getItems = () => this._getCategories(this._categories);
private _openedChanged(ev: ValueChangedEvent<boolean>) {
this._opened = ev.detail.value;
}
private _categoryChanged(ev: ValueChangedEvent<string>) {
ev.stopPropagation();
let newValue = ev.detail.value;
if (newValue === NO_CATEGORIES_ID) {
newValue = "";
this.comboBox.setInputValue("");
return;
}
if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
if (newValue !== this._value) {
this._setValue(newValue);
private _allCategoryNames = memoizeOne(
(categories?: CategoryRegistryEntry[]) => {
if (!categories) {
return [];
}
return [
...new Set(
categories
.map((category) => category.name.toLowerCase())
.filter(Boolean) as string[]
),
];
}
);
private _getAdditionalItems = (
searchString?: string
): PickerComboBoxItem[] => {
if (this.noAdd) {
return [];
}
const allCategoryNames = this._allCategoryNames(this._categories);
if (
searchString &&
!allCategoryNames.includes(searchString.toLowerCase())
) {
return [
{
id: ADD_NEW_ID + searchString,
primary: this.hass.localize(
"ui.components.category-picker.add_new_sugestion",
{
name: searchString,
}
),
icon_path: mdiPlus,
},
];
}
return [
{
id: ADD_NEW_ID,
primary: this.hass.localize("ui.components.category-picker.add_new"),
icon_path: mdiPlus,
},
];
};
protected render(): TemplateResult {
const placeholder =
this.placeholder ??
this.hass.localize("ui.components.category-picker.category");
const valueRenderer = this._computeValueRenderer(this._categories);
return html`
<ha-generic-picker
.hass=${this.hass}
.autofocus=${this.autofocus}
.label=${this.label}
.notFoundLabel=${this.hass.localize(
"ui.components.category-picker.no_match"
)}
.placeholder=${placeholder}
.value=${this.value}
.getItems=${this._getItems}
.getAdditionalItems=${this._getAdditionalItems}
.valueRenderer=${valueRenderer}
@value-changed=${this._valueChanged}
>
</ha-generic-picker>
`;
}
private _valueChanged(ev: ValueChangedEvent<string>) {
ev.stopPropagation();
const value = ev.detail.value;
if (value === NO_CATEGORIES_ID) {
return;
}
(ev.target as any).value = this._value;
if (!value) {
this._setValue(undefined);
return;
}
this.hass.loadFragmentTranslation("config");
if (value.startsWith(ADD_NEW_ID)) {
this.hass.loadFragmentTranslation("config");
showCategoryRegistryDetailDialog(this, {
scope: this.scope!,
suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
createEntry: async (values) => {
const category = await createCategoryRegistryEntry(
this.hass,
this.scope!,
values
);
this._categories = [...this._categories!, category];
this.comboBox.filteredItems = this._getCategories(
this._categories,
this.noAdd
);
await this.updateComplete;
await this.comboBox.updateComplete;
this._setValue(category.category_id);
return category;
},
});
const suggestedName = value.substring(ADD_NEW_ID.length);
this._suggestion = undefined;
this.comboBox.setInputValue("");
showCategoryRegistryDetailDialog(this, {
scope: this.scope!,
suggestedName: suggestedName,
createEntry: async (values) => {
const category = await createCategoryRegistryEntry(
this.hass,
this.scope!,
values
);
this._setValue(category.category_id);
return category;
},
});
return;
}
this._setValue(value);
}
private _setValue(value?: string) {

12
src/panels/config/integrations/ha-config-integration-page.ts
View File

@ -275,9 +275,15 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
this.configEntriesInProgress
);
const discoveryFlows = configEntriesInProgress.filter(
(flow) => !ATTENTION_SOURCES.includes(flow.context.source)
);
const discoveryFlows = configEntriesInProgress
.filter((flow) => !ATTENTION_SOURCES.includes(flow.context.source))
.sort((a, b) =>
caseInsensitiveStringCompare(
a.localized_title || "zzz",
b.localized_title || "zzz",
this.hass.locale.language
)
);
const attentionFlows = configEntriesInProgress.filter((flow) =>
ATTENTION_SOURCES.includes(flow.context.source)

17
src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts
View File

@ -32,6 +32,9 @@ import { throttle } from "../../../../../common/util/throttle";
const UPDATE_THROTTLE_TIME = 10000;
const CORE_SOURCE_ID = "ha";
const CORE_SOURCE_LABEL = "Home Assistant";
@customElement("bluetooth-network-visualization")
export class BluetoothNetworkVisualization extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -130,7 +133,7 @@ export class BluetoothNetworkVisualization extends LitElement {
): NetworkData => {
const categories = [
{
name: this.hass.localize("ui.panel.config.bluetooth.core"),
name: CORE_SOURCE_LABEL,
symbol: "roundRect",
itemStyle: {
color: colorVariables["primary-color"],
@ -160,8 +163,8 @@ export class BluetoothNetworkVisualization extends LitElement {
];
const nodes: NetworkNode[] = [
{
id: "ha",
name: this.hass.localize("ui.panel.config.bluetooth.core"),
id: CORE_SOURCE_ID,
name: CORE_SOURCE_LABEL,
category: 0,
value: 4,
symbol: "roundRect",
@ -183,7 +186,7 @@ export class BluetoothNetworkVisualization extends LitElement {
polarDistance: 0.25,
});
links.push({
source: "ha",
source: CORE_SOURCE_ID,
target: scanner.source,
value: 0,
symbol: "none",
@ -234,8 +237,8 @@ export class BluetoothNetworkVisualization extends LitElement {
);
private _getBluetoothDeviceName(id: string): string {
if (id === "ha") {
return this.hass.localize("ui.panel.config.bluetooth.core");
if (id === CORE_SOURCE_ID) {
return CORE_SOURCE_LABEL;
}
if (this._sourceDevices[id]) {
return (
@ -262,7 +265,7 @@ export class BluetoothNetworkVisualization extends LitElement {
const sourceName = this._getBluetoothDeviceName(source);
const targetName = this._getBluetoothDeviceName(target);
tooltipText = `${sourceName} → ${targetName}`;
if (source !== "ha") {
if (source !== CORE_SOURCE_ID) {
tooltipText += ` <b>${this.hass.localize("ui.panel.config.bluetooth.rssi")}:</b> ${value}`;
}
} else {

64
src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts
View File

@ -1,7 +1,6 @@
import { mdiShieldOff } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
@ -26,9 +25,19 @@ import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import type { AlarmModesCardFeatureConfig } from "./types";
import type {
AlarmModesCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsAlarmModesCardFeature = (stateObj: HassEntity) => {
export const supportsAlarmModesCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return domain === "alarm_control_panel";
};
@ -40,7 +49,7 @@ class HuiAlarmModeCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: AlarmControlPanelEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: AlarmModesCardFeatureConfig;
@ -66,10 +75,26 @@ class HuiAlarmModeCardFeature
this._config = config;
}
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id] as
| AlarmControlPanelEntity
| undefined;
}
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentMode = this._getCurrentMode(this.stateObj);
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._currentMode = this._getCurrentMode(this._stateObj);
}
}
}
@ -79,12 +104,12 @@ class HuiAlarmModeCardFeature
});
private async _valueChanged(ev: CustomEvent) {
if (!this.stateObj) return;
if (!this._stateObj) return;
const mode = (ev.detail as any).value as AlarmMode;
if (mode === this.stateObj.state) return;
if (mode === this._stateObj.state) return;
const oldMode = this._getCurrentMode(this.stateObj);
const oldMode = this._getCurrentMode(this._stateObj);
this._currentMode = mode;
try {
@ -102,24 +127,25 @@ class HuiAlarmModeCardFeature
await setProtectedAlarmControlPanelMode(
this,
this.hass!,
this.stateObj!,
this._stateObj!,
mode
);
}
protected render(): TemplateResult | null {
protected render(): TemplateResult | typeof nothing {
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsAlarmModesCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsAlarmModesCardFeature(this.hass, this.context)
) {
return null;
return nothing;
}
const color = stateColorCss(this.stateObj);
const color = stateColorCss(this._stateObj);
const supportedModes = supportedAlarmModes(this.stateObj).reverse();
const supportedModes = supportedAlarmModes(this._stateObj).reverse();
const options = filterModes(
supportedModes,
@ -130,7 +156,7 @@ class HuiAlarmModeCardFeature
path: ALARM_MODES[mode].path,
}));
if (["triggered", "arming", "pending"].includes(this.stateObj.state)) {
if (["triggered", "arming", "pending"].includes(this._stateObj.state)) {
return html`
<ha-control-button-group>
<ha-control-button
@ -156,7 +182,7 @@ class HuiAlarmModeCardFeature
"--control-select-color": color,
"--modes-count": options.length.toString(),
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;

25
src/panels/lovelace/card-features/hui-card-feature.ts
View File

@ -1,17 +1,19 @@
import type { HassEntity } from "home-assistant-js-websocket";
import { LitElement, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import type { HomeAssistant } from "../../../types";
import type { HuiErrorCard } from "../cards/hui-error-card";
import { createCardFeatureElement } from "../create-element/create-card-feature-element";
import type { LovelaceCardFeature } from "../types";
import type { LovelaceCardFeatureConfig } from "./types";
import type {
LovelaceCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
@customElement("hui-card-feature")
export class HuiCardFeature extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: HassEntity;
@property({ attribute: false }) public context!: LovelaceCardFeatureContext;
@property({ attribute: false }) public feature?: LovelaceCardFeatureConfig;
@ -22,9 +24,7 @@ export class HuiCardFeature extends LitElement {
private _getFeatureElement(feature: LovelaceCardFeatureConfig) {
if (!this._element) {
this._element = createCardFeatureElement(feature);
return this._element;
}
return this._element;
}
@ -33,12 +33,21 @@ export class HuiCardFeature extends LitElement {
return nothing;
}
const element = this._getFeatureElement(this.feature);
const element = this._getFeatureElement(
this.feature
) as LovelaceCardFeature;
if (this.hass) {
element.hass = this.hass;
(element as LovelaceCardFeature).stateObj = this.stateObj;
(element as LovelaceCardFeature).color = this.color;
element.context = this.context;
element.color = this.color;
// Backwards compatibility from custom card features
if (this.context.entity_id) {
const stateObj = this.hass.states[this.context.entity_id];
if (stateObj) {
element.stateObj = stateObj;
}
}
}
return html`${element}`;
}

10
src/panels/lovelace/card-features/hui-card-features.ts
View File

@ -1,15 +1,17 @@
import type { HassEntity } from "home-assistant-js-websocket";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import type { HomeAssistant } from "../../../types";
import "./hui-card-feature";
import type { LovelaceCardFeatureConfig } from "./types";
import type {
LovelaceCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
@customElement("hui-card-features")
export class HuiCardFeatures extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: HassEntity;
@property({ attribute: false }) public context!: LovelaceCardFeatureContext;
@property({ attribute: false }) public features?: LovelaceCardFeatureConfig[];
@ -24,7 +26,7 @@ export class HuiCardFeatures extends LitElement {
(feature) => html`
<hui-card-feature
.hass=${this.hass}
.stateObj=${this.stateObj}
.context=${this.context}
.color=${this.color}
.feature=${feature}
></hui-card-feature>

54
src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts
View File

@ -1,5 +1,4 @@
import { mdiFan } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -19,9 +18,19 @@ import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import type { ClimateFanModesCardFeatureConfig } from "./types";
import type {
ClimateFanModesCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsClimateFanModesCardFeature = (stateObj: HassEntity) => {
export const supportsClimateFanModesCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "climate" &&
@ -36,7 +45,7 @@ class HuiClimateFanModesCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: ClimateEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: ClimateFanModesCardFeatureConfig;
@ -45,6 +54,15 @@ class HuiClimateFanModesCardFeature
@query("ha-control-select-menu", true)
private _haSelect?: HaControlSelectMenu;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| ClimateEntity
| undefined;
}
static getStubConfig(): ClimateFanModesCardFeatureConfig {
return {
type: "climate-fan-modes",
@ -68,8 +86,15 @@ class HuiClimateFanModesCardFeature
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentFanMode = this.stateObj.attributes.fan_mode;
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._currentFanMode = this._stateObj.attributes.fan_mode;
}
}
}
@ -91,7 +116,7 @@ class HuiClimateFanModesCardFeature
const fanMode =
(ev.detail as any).value ?? ((ev.target as any).value as string);
const oldFanMode = this.stateObj!.attributes.fan_mode;
const oldFanMode = this._stateObj!.attributes.fan_mode;
if (fanMode === oldFanMode) return;
@ -106,7 +131,7 @@ class HuiClimateFanModesCardFeature
private async _setMode(mode: string) {
await this.hass!.callService("climate", "set_fan_mode", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
fan_mode: mode,
});
}
@ -115,13 +140,14 @@ class HuiClimateFanModesCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsClimateFanModesCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsClimateFanModesCardFeature(this.hass, this.context)
) {
return null;
}
const stateObj = this.stateObj;
const stateObj = this._stateObj;
const options = filterModes(
stateObj.attributes.fan_modes,
@ -129,7 +155,7 @@ class HuiClimateFanModesCardFeature
).map<ControlSelectOption>((mode) => ({
value: mode,
label: this.hass!.formatEntityAttributeValue(
this.stateObj!,
this._stateObj!,
"fan_mode",
mode
),
@ -153,7 +179,7 @@ class HuiClimateFanModesCardFeature
stateObj,
"fan_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
@ -165,7 +191,7 @@ class HuiClimateFanModesCardFeature
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "fan_mode")}
.value=${this._currentFanMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this._stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}

58
src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts
View File

@ -1,5 +1,4 @@
import { mdiThermostat } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -22,9 +21,19 @@ import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import type { ClimateHvacModesCardFeatureConfig } from "./types";
import type {
ClimateHvacModesCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsClimateHvacModesCardFeature = (stateObj: HassEntity) => {
export const supportsClimateHvacModesCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return domain === "climate";
};
@ -36,7 +45,7 @@ class HuiClimateHvacModesCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: ClimateEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: ClimateHvacModesCardFeatureConfig;
@ -45,6 +54,15 @@ class HuiClimateHvacModesCardFeature
@query("ha-control-select-menu", true)
private _haSelect?: HaControlSelectMenu;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| ClimateEntity
| undefined;
}
static getStubConfig(): ClimateHvacModesCardFeatureConfig {
return {
type: "climate-hvac-modes",
@ -67,8 +85,15 @@ class HuiClimateHvacModesCardFeature
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentHvacMode = this.stateObj.state as HvacMode;
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._currentHvacMode = this._stateObj.state as HvacMode;
}
}
}
@ -90,9 +115,9 @@ class HuiClimateHvacModesCardFeature
const mode =
(ev.detail as any).value ?? ((ev.target as any).value as HvacMode);
if (mode === this.stateObj!.state) return;
if (mode === this._stateObj!.state) return;
const oldMode = this.stateObj!.state as HvacMode;
const oldMode = this._stateObj!.state as HvacMode;
this._currentHvacMode = mode;
try {
@ -104,7 +129,7 @@ class HuiClimateHvacModesCardFeature
private async _setMode(mode: HvacMode) {
await this.hass!.callService("climate", "set_hvac_mode", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
hvac_mode: mode,
});
}
@ -113,15 +138,16 @@ class HuiClimateHvacModesCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsClimateHvacModesCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsClimateHvacModesCardFeature(this.hass, this.context)
) {
return null;
}
const color = stateColorCss(this.stateObj);
const color = stateColorCss(this._stateObj);
const ordererHvacModes = (this.stateObj.attributes.hvac_modes || [])
const ordererHvacModes = (this._stateObj.attributes.hvac_modes || [])
.concat()
.sort(compareClimateHvacModes)
.reverse();
@ -131,7 +157,7 @@ class HuiClimateHvacModesCardFeature
this._config.hvac_modes
).map<ControlSelectOption>((mode) => ({
value: mode,
label: this.hass!.formatEntityState(this.stateObj!, mode),
label: this.hass!.formatEntityState(this._stateObj!, mode),
icon: html`
<ha-svg-icon
slot="graphic"
@ -147,7 +173,7 @@ class HuiClimateHvacModesCardFeature
hide-label
.label=${this.hass.localize("ui.card.climate.mode")}
.value=${this._currentHvacMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this._stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@ -184,7 +210,7 @@ class HuiClimateHvacModesCardFeature
style=${styleMap({
"--control-select-color": color,
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;

54
src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts
View File

@ -1,5 +1,4 @@
import { mdiTuneVariant } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -19,9 +18,19 @@ import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import type { ClimatePresetModesCardFeatureConfig } from "./types";
import type {
ClimatePresetModesCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsClimatePresetModesCardFeature = (stateObj: HassEntity) => {
export const supportsClimatePresetModesCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "climate" &&
@ -36,7 +45,7 @@ class HuiClimatePresetModesCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: ClimateEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: ClimatePresetModesCardFeatureConfig;
@ -45,6 +54,15 @@ class HuiClimatePresetModesCardFeature
@query("ha-control-select-menu", true)
private _haSelect?: HaControlSelectMenu;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| ClimateEntity
| undefined;
}
static getStubConfig(): ClimatePresetModesCardFeatureConfig {
return {
type: "climate-preset-modes",
@ -70,8 +88,15 @@ class HuiClimatePresetModesCardFeature
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentPresetMode = this.stateObj.attributes.preset_mode;
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._currentPresetMode = this._stateObj.attributes.preset_mode;
}
}
}
@ -93,7 +118,7 @@ class HuiClimatePresetModesCardFeature
const presetMode =
(ev.detail as any).value ?? ((ev.target as any).value as string);
const oldPresetMode = this.stateObj!.attributes.preset_mode;
const oldPresetMode = this._stateObj!.attributes.preset_mode;
if (presetMode === oldPresetMode) return;
@ -108,7 +133,7 @@ class HuiClimatePresetModesCardFeature
private async _setMode(mode: string) {
await this.hass!.callService("climate", "set_preset_mode", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
preset_mode: mode,
});
}
@ -117,13 +142,14 @@ class HuiClimatePresetModesCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsClimatePresetModesCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsClimatePresetModesCardFeature(this.hass, this.context)
) {
return null;
}
const stateObj = this.stateObj;
const stateObj = this._stateObj;
const options = filterModes(
stateObj.attributes.preset_modes,
@ -131,7 +157,7 @@ class HuiClimatePresetModesCardFeature
).map<ControlSelectOption>((mode) => ({
value: mode,
label: this.hass!.formatEntityAttributeValue(
this.stateObj!,
this._stateObj!,
"preset_mode",
mode
),
@ -155,7 +181,7 @@ class HuiClimatePresetModesCardFeature
stateObj,
"preset_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
@ -167,7 +193,7 @@ class HuiClimatePresetModesCardFeature
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
.value=${this._currentPresetMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this._stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}

54
src/panels/lovelace/card-features/hui-climate-swing-horizontal-modes-card-feature.ts
View File

@ -1,5 +1,4 @@
import { mdiArrowOscillating } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -19,11 +18,19 @@ import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import type { ClimateSwingHorizontalModesCardFeatureConfig } from "./types";
import type {
ClimateSwingHorizontalModesCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsClimateSwingHorizontalModesCardFeature = (
stateObj: HassEntity
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "climate" &&
@ -38,7 +45,7 @@ class HuiClimateSwingHorizontalModesCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: ClimateEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: ClimateSwingHorizontalModesCardFeatureConfig;
@ -47,6 +54,15 @@ class HuiClimateSwingHorizontalModesCardFeature
@query("ha-control-select-menu", true)
private _haSelect?: HaControlSelectMenu;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| ClimateEntity
| undefined;
}
static getStubConfig(): ClimateSwingHorizontalModesCardFeatureConfig {
return {
type: "climate-swing-horizontal-modes",
@ -72,9 +88,16 @@ class HuiClimateSwingHorizontalModesCardFeature
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentSwingHorizontalMode =
this.stateObj.attributes.swing_horizontal_mode;
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._currentSwingHorizontalMode =
this._stateObj.attributes.swing_horizontal_mode;
}
}
}
@ -97,7 +120,7 @@ class HuiClimateSwingHorizontalModesCardFeature
(ev.detail as any).value ?? ((ev.target as any).value as string);
const oldSwingHorizontalMode =
this.stateObj!.attributes.swing_horizontal_mode;
this._stateObj!.attributes.swing_horizontal_mode;
if (swingHorizontalMode === oldSwingHorizontalMode) return;
@ -112,7 +135,7 @@ class HuiClimateSwingHorizontalModesCardFeature
private async _setMode(mode: string) {
await this.hass!.callService("climate", "set_swing_horizontal_mode", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
swing_horizontal_mode: mode,
});
}
@ -121,13 +144,14 @@ class HuiClimateSwingHorizontalModesCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsClimateSwingHorizontalModesCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsClimateSwingHorizontalModesCardFeature(this.hass, this.context)
) {
return null;
}
const stateObj = this.stateObj;
const stateObj = this._stateObj;
const options = filterModes(
stateObj.attributes.swing_horizontal_modes,
@ -135,7 +159,7 @@ class HuiClimateSwingHorizontalModesCardFeature
).map<ControlSelectOption>((mode) => ({
value: mode,
label: this.hass!.formatEntityAttributeValue(
this.stateObj!,
this._stateObj!,
"swing_horizontal_mode",
mode
),
@ -159,7 +183,7 @@ class HuiClimateSwingHorizontalModesCardFeature
stateObj,
"swing_horizontal_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
@ -174,7 +198,7 @@ class HuiClimateSwingHorizontalModesCardFeature
"swing_horizontal_mode"
)}
.value=${this._currentSwingHorizontalMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this._stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}

54
src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts
View File

@ -1,5 +1,4 @@
import { mdiArrowOscillating } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -19,9 +18,19 @@ import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import type { ClimateSwingModesCardFeatureConfig } from "./types";
import type {
ClimateSwingModesCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsClimateSwingModesCardFeature = (stateObj: HassEntity) => {
export const supportsClimateSwingModesCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "climate" &&
@ -36,7 +45,7 @@ class HuiClimateSwingModesCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: ClimateEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: ClimateSwingModesCardFeatureConfig;
@ -45,6 +54,15 @@ class HuiClimateSwingModesCardFeature
@query("ha-control-select-menu", true)
private _haSelect?: HaControlSelectMenu;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| ClimateEntity
| undefined;
}
static getStubConfig(): ClimateSwingModesCardFeatureConfig {
return {
type: "climate-swing-modes",
@ -70,8 +88,15 @@ class HuiClimateSwingModesCardFeature
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentSwingMode = this.stateObj.attributes.swing_mode;
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._currentSwingMode = this._stateObj.attributes.swing_mode;
}
}
}
@ -93,7 +118,7 @@ class HuiClimateSwingModesCardFeature
const swingMode =
(ev.detail as any).value ?? ((ev.target as any).value as string);
const oldSwingMode = this.stateObj!.attributes.swing_mode;
const oldSwingMode = this._stateObj!.attributes.swing_mode;
if (swingMode === oldSwingMode) return;
@ -108,7 +133,7 @@ class HuiClimateSwingModesCardFeature
private async _setMode(mode: string) {
await this.hass!.callService("climate", "set_swing_mode", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
swing_mode: mode,
});
}
@ -117,13 +142,14 @@ class HuiClimateSwingModesCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsClimateSwingModesCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsClimateSwingModesCardFeature(this.hass, this.context)
) {
return null;
}
const stateObj = this.stateObj;
const stateObj = this._stateObj;
const options = filterModes(
stateObj.attributes.swing_modes,
@ -131,7 +157,7 @@ class HuiClimateSwingModesCardFeature
).map<ControlSelectOption>((mode) => ({
value: mode,
label: this.hass!.formatEntityAttributeValue(
this.stateObj!,
this._stateObj!,
"swing_mode",
mode
),
@ -155,7 +181,7 @@ class HuiClimateSwingModesCardFeature
stateObj,
"swing_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
@ -167,7 +193,7 @@ class HuiClimateSwingModesCardFeature
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "swing_mode")}
.value=${this._currentSwingMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this._stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}

41
src/panels/lovelace/card-features/hui-counter-actions-card-feature.ts
View File

@ -1,19 +1,30 @@
import { mdiRestore, mdiPlus, mdiMinus } from "@mdi/js";
import { mdiMinus, mdiPlus, mdiRestore } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { TemplateResult } from "lit";
import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import "../../../components/ha-control-button";
import "../../../components/ha-control-button-group";
import "../../../components/ha-control-select";
import { UNAVAILABLE } from "../../../data/entity";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { COUNTER_ACTIONS, type CounterActionsCardFeatureConfig } from "./types";
import "../../../components/ha-control-button-group";
import "../../../components/ha-control-button";
import {
COUNTER_ACTIONS,
type CounterActionsCardFeatureConfig,
type LovelaceCardFeatureContext,
} from "./types";
export const supportsCounterActionsCardFeature = (stateObj: HassEntity) => {
export const supportsCounterActionsCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return domain === "counter";
};
@ -56,10 +67,17 @@ class HuiCounterActionsCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: CounterActionsCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as HassEntity | undefined;
}
public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
await import(
"../editor/config-elements/hui-counter-actions-card-feature-editor"
@ -85,8 +103,9 @@ class HuiCounterActionsCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsCounterActionsCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsCounterActionsCardFeature(this.hass, this.context)
) {
return null;
}
@ -96,7 +115,7 @@ class HuiCounterActionsCardFeature
${this._config?.actions
?.filter((action) => COUNTER_ACTIONS.includes(action))
.map((action) => {
const button = COUNTER_ACTIONS_BUTTON[action](this.stateObj!);
const button = COUNTER_ACTIONS_BUTTON[action](this._stateObj!);
return html`
<ha-control-button
.entry=${button}
@ -106,7 +125,7 @@ class HuiCounterActionsCardFeature
)}
@click=${this._onActionTap}
.disabled=${button.disabled ||
this.stateObj?.state === UNAVAILABLE}
this._stateObj?.state === UNAVAILABLE}
>
<ha-svg-icon .path=${button.icon}></ha-svg-icon>
</ha-control-button>
@ -120,7 +139,7 @@ class HuiCounterActionsCardFeature
ev.stopPropagation();
const entry = (ev.target! as any).entry as CounterButton;
this.hass!.callService("counter", entry.serviceName, {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
});
}

54
src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts
View File

@ -1,5 +1,4 @@
import { mdiStop } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
@ -9,20 +8,31 @@ import {
} from "../../../common/entity/cover_icon";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-control-button";
import "../../../components/ha-svg-icon";
import "../../../components/ha-control-button-group";
import "../../../components/ha-svg-icon";
import {
canClose,
canOpen,
canStop,
CoverEntityFeature,
type CoverEntity,
} from "../../../data/cover";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { CoverOpenCloseCardFeatureConfig } from "./types";
import type {
CoverOpenCloseCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsCoverOpenCloseCardFeature = (stateObj: HassEntity) => {
export const supportsCoverOpenCloseCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "cover" &&
@ -38,10 +48,17 @@ class HuiCoverOpenCloseCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: CoverOpenCloseCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as CoverEntity | undefined;
}
static getStubConfig(): CoverOpenCloseCardFeatureConfig {
return {
type: "cover-open-close",
@ -58,21 +75,21 @@ class HuiCoverOpenCloseCardFeature
private _onOpenTap(ev): void {
ev.stopPropagation();
this.hass!.callService("cover", "open_cover", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
});
}
private _onCloseTap(ev): void {
ev.stopPropagation();
this.hass!.callService("cover", "close_cover", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
});
}
private _onStopTap(ev): void {
ev.stopPropagation();
this.hass!.callService("cover", "stop_cover", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
});
}
@ -80,47 +97,48 @@ class HuiCoverOpenCloseCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsCoverOpenCloseCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsCoverOpenCloseCardFeature(this.hass, this.context)
) {
return nothing;
}
return html`
<ha-control-button-group>
${supportsFeature(this.stateObj, CoverEntityFeature.OPEN)
${supportsFeature(this._stateObj, CoverEntityFeature.OPEN)
? html`
<ha-control-button
.label=${this.hass.localize("ui.card.cover.open_cover")}
@click=${this._onOpenTap}
.disabled=${!canOpen(this.stateObj)}
.disabled=${!canOpen(this._stateObj)}
>
<ha-svg-icon
.path=${computeOpenIcon(this.stateObj)}
.path=${computeOpenIcon(this._stateObj)}
></ha-svg-icon>
</ha-control-button>
`
: nothing}
${supportsFeature(this.stateObj, CoverEntityFeature.STOP)
${supportsFeature(this._stateObj, CoverEntityFeature.STOP)
? html`
<ha-control-button
.label=${this.hass.localize("ui.card.cover.stop_cover")}
@click=${this._onStopTap}
.disabled=${!canStop(this.stateObj)}
.disabled=${!canStop(this._stateObj)}
>
<ha-svg-icon .path=${mdiStop}></ha-svg-icon>
</ha-control-button>
`
: nothing}
${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE)
${supportsFeature(this._stateObj, CoverEntityFeature.CLOSE)
? html`
<ha-control-button
.label=${this.hass.localize("ui.card.cover.close_cover")}
@click=${this._onCloseTap}
.disabled=${!canClose(this.stateObj)}
.disabled=${!canClose(this._stateObj)}
>
<ha-svg-icon
.path=${computeCloseIcon(this.stateObj)}
.path=${computeCloseIcon(this._stateObj)}
></ha-svg-icon>
</ha-control-button>
`

47
src/panels/lovelace/card-features/hui-cover-position-card-feature.ts
View File

@ -1,4 +1,3 @@
import type { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
@ -8,16 +7,26 @@ import { computeDomain } from "../../../common/entity/compute_domain";
import { stateActive } from "../../../common/entity/state_active";
import { stateColorCss } from "../../../common/entity/state_color";
import { supportsFeature } from "../../../common/entity/supports-feature";
import { CoverEntityFeature } from "../../../data/cover";
import "../../../components/ha-control-slider";
import { CoverEntityFeature, type CoverEntity } from "../../../data/cover";
import { UNAVAILABLE } from "../../../data/entity";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { CoverPositionCardFeatureConfig } from "./types";
import "../../../components/ha-control-slider";
import type {
CoverPositionCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsCoverPositionCardFeature = (stateObj: HassEntity) => {
export const supportsCoverPositionCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "cover" &&
@ -32,12 +41,19 @@ class HuiCoverPositionCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@property({ attribute: false }) public color?: string;
@state() private _config?: CoverPositionCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as CoverEntity | undefined;
}
static getStubConfig(): CoverPositionCardFeatureConfig {
return {
type: "cover-position",
@ -55,23 +71,24 @@ class HuiCoverPositionCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsCoverPositionCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsCoverPositionCardFeature(this.hass, this.context)
) {
return nothing;
}
const percentage = stateActive(this.stateObj)
? (this.stateObj.attributes.current_position ?? 0)
const percentage = stateActive(this._stateObj)
? (this._stateObj.attributes.current_position ?? 0)
: 0;
const value = Math.max(Math.round(percentage), 0);
const openColor = stateColorCss(this.stateObj, "open");
const openColor = stateColorCss(this._stateObj, "open");
const color = this.color
? computeCssColor(this.color)
: stateColorCss(this.stateObj);
: stateColorCss(this._stateObj);
const style = {
"--feature-color": color,
@ -91,11 +108,11 @@ class HuiCoverPositionCardFeature
@value-changed=${this._valueChanged}
.ariaLabel=${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
this._stateObj,
this.hass.entities,
"current_position"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
.unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_position}
.locale=${this.hass.locale}
></ha-control-slider>
@ -107,7 +124,7 @@ class HuiCoverPositionCardFeature
if (isNaN(value)) return;
this.hass!.callService("cover", "set_cover_position", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
position: value,
});
}

50
src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts
View File

@ -1,24 +1,34 @@
import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import { LitElement, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-control-button";
import "../../../components/ha-svg-icon";
import "../../../components/ha-control-button-group";
import "../../../components/ha-svg-icon";
import {
CoverEntityFeature,
canCloseTilt,
canOpenTilt,
canStopTilt,
type CoverEntity,
} from "../../../data/cover";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { CoverTiltCardFeatureConfig } from "./types";
import type {
CoverTiltCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsCoverTiltCardFeature = (stateObj: HassEntity) => {
export const supportsCoverTiltCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "cover" &&
@ -34,10 +44,17 @@ class HuiCoverTiltCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: CoverTiltCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as CoverEntity | undefined;
}
static getStubConfig(): CoverTiltCardFeatureConfig {
return {
type: "cover-tilt",
@ -54,21 +71,21 @@ class HuiCoverTiltCardFeature
private _onOpenTap(ev): void {
ev.stopPropagation();
this.hass!.callService("cover", "open_cover_tilt", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
});
}
private _onCloseTap(ev): void {
ev.stopPropagation();
this.hass!.callService("cover", "close_cover_tilt", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
});
}
private _onStopTap(ev): void {
ev.stopPropagation();
this.hass!.callService("cover", "stop_cover_tilt", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
});
}
@ -76,42 +93,43 @@ class HuiCoverTiltCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsCoverTiltCardFeature
!this.context ||
!this._stateObj ||
!supportsCoverTiltCardFeature(this.hass, this.context)
) {
return nothing;
}
return html`
<ha-control-button-group>
${supportsFeature(this.stateObj, CoverEntityFeature.OPEN_TILT)
${supportsFeature(this._stateObj, CoverEntityFeature.OPEN_TILT)
? html`
<ha-control-button
.label=${this.hass.localize("ui.card.cover.open_tilt_cover")}
@click=${this._onOpenTap}
.disabled=${!canOpenTilt(this.stateObj)}
.disabled=${!canOpenTilt(this._stateObj)}
>
<ha-svg-icon .path=${mdiArrowTopRight}></ha-svg-icon>
</ha-control-button>
`
: nothing}
${supportsFeature(this.stateObj, CoverEntityFeature.STOP_TILT)
${supportsFeature(this._stateObj, CoverEntityFeature.STOP_TILT)
? html`
<ha-control-button
.label=${this.hass.localize("ui.card.cover.stop_cover")}
@click=${this._onStopTap}
.disabled=${!canStopTilt(this.stateObj)}
.disabled=${!canStopTilt(this._stateObj)}
>
<ha-svg-icon .path=${mdiStop}></ha-svg-icon>
</ha-control-button>
`
: nothing}
${supportsFeature(this.stateObj, CoverEntityFeature.CLOSE_TILT)
${supportsFeature(this._stateObj, CoverEntityFeature.CLOSE_TILT)
? html`
<ha-control-button
.label=${this.hass.localize("ui.card.cover.close_tilt_cover")}
@click=${this._onCloseTap}
.disabled=${!canCloseTilt(this.stateObj)}
.disabled=${!canCloseTilt(this._stateObj)}
>
<ha-svg-icon .path=${mdiArrowBottomLeft}></ha-svg-icon>
</ha-control-button>

41
src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts
View File

@ -1,4 +1,3 @@
import type { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
@ -15,11 +14,21 @@ import { generateTiltSliderTrackBackgroundGradient } from "../../../state-contro
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { CoverTiltPositionCardFeatureConfig } from "./types";
import type {
CoverTiltPositionCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
const GRADIENT = generateTiltSliderTrackBackgroundGradient();
export const supportsCoverTiltPositionCardFeature = (stateObj: HassEntity) => {
export const supportsCoverTiltPositionCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "cover" &&
@ -34,12 +43,19 @@ class HuiCoverTiltPositionCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: CoverEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@property({ attribute: false }) public color?: string;
@state() private _config?: CoverTiltPositionCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as CoverEntity | undefined;
}
static getStubConfig(): CoverTiltPositionCardFeatureConfig {
return {
type: "cover-tilt-position",
@ -57,21 +73,22 @@ class HuiCoverTiltPositionCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsCoverTiltPositionCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsCoverTiltPositionCardFeature(this.hass, this.context)
) {
return nothing;
}
const percentage = this.stateObj.attributes.current_tilt_position ?? 0;
const percentage = this._stateObj.attributes.current_tilt_position ?? 0;
const value = Math.max(Math.round(percentage), 0);
const openColor = stateColorCss(this.stateObj, "open");
const openColor = stateColorCss(this._stateObj, "open");
const color = this.color
? computeCssColor(this.color)
: stateColorCss(this.stateObj);
: stateColorCss(this._stateObj);
const style = {
"--feature-color": color,
@ -90,11 +107,11 @@ class HuiCoverTiltPositionCardFeature
@value-changed=${this._valueChanged}
.ariaLabel=${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
this._stateObj,
this.hass.entities,
"current_tilt_position"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
.unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_tilt_position}
.locale=${this.hass.locale}
>
@ -108,7 +125,7 @@ class HuiCoverTiltPositionCardFeature
if (isNaN(value)) return;
this.hass!.callService("cover", "set_cover_tilt_position", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
tilt_position: value,
});
}

53
src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts
View File

@ -1,5 +1,4 @@
import { mdiTuneVariant } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -19,9 +18,19 @@ import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import type { FanPresetModesCardFeatureConfig } from "./types";
import type {
FanPresetModesCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsFanPresetModesCardFeature = (stateObj: HassEntity) => {
export const supportsFanPresetModesCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "fan" && supportsFeature(stateObj, FanEntityFeature.PRESET_MODE)
@ -35,7 +44,7 @@ class HuiFanPresetModesCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: FanEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: FanPresetModesCardFeatureConfig;
@ -44,6 +53,13 @@ class HuiFanPresetModesCardFeature
@query("ha-control-select-menu", true)
private _haSelect?: HaControlSelectMenu;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as FanEntity | undefined;
}
static getStubConfig(): FanPresetModesCardFeatureConfig {
return {
type: "fan-preset-modes",
@ -66,9 +82,15 @@ class HuiFanPresetModesCardFeature
}
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentPresetMode = this.stateObj.attributes.preset_mode;
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._currentPresetMode = this._stateObj.attributes.preset_mode;
}
}
}
@ -90,7 +112,7 @@ class HuiFanPresetModesCardFeature
const presetMode =
(ev.detail as any).value ?? ((ev.target as any).value as string);
const oldPresetMode = this.stateObj!.attributes.preset_mode;
const oldPresetMode = this._stateObj!.attributes.preset_mode;
if (presetMode === oldPresetMode) return;
@ -105,7 +127,7 @@ class HuiFanPresetModesCardFeature
private async _setMode(mode: string) {
await this.hass!.callService("fan", "set_preset_mode", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
preset_mode: mode,
});
}
@ -114,13 +136,14 @@ class HuiFanPresetModesCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsFanPresetModesCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsFanPresetModesCardFeature(this.hass, this.context)
) {
return null;
}
const stateObj = this.stateObj;
const stateObj = this._stateObj;
const options = filterModes(
stateObj.attributes.preset_modes,
@ -128,7 +151,7 @@ class HuiFanPresetModesCardFeature
).map<ControlSelectOption>((mode) => ({
value: mode,
label: this.hass!.formatEntityAttributeValue(
this.stateObj!,
this._stateObj!,
"preset_mode",
mode
),
@ -152,7 +175,7 @@ class HuiFanPresetModesCardFeature
stateObj,
"preset_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
@ -164,7 +187,7 @@ class HuiFanPresetModesCardFeature
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
.value=${this._currentPresetMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this._stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}

59
src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts
View File

@ -1,4 +1,3 @@
import type { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
@ -9,6 +8,7 @@ import "../../../components/ha-control-select";
import type { ControlSelectOption } from "../../../components/ha-control-select";
import "../../../components/ha-control-slider";
import { UNAVAILABLE } from "../../../data/entity";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
import type { FanEntity, FanSpeed } from "../../../data/fan";
import {
computeFanSpeedCount,
@ -21,11 +21,20 @@ import {
} from "../../../data/fan";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import type { FanSpeedCardFeatureConfig } from "./types";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type {
FanSpeedCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsFanSpeedCardFeature = (stateObj: HassEntity) => {
export const supportsFanSpeedCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "fan" && supportsFeature(stateObj, FanEntityFeature.SET_SPEED)
@ -36,10 +45,17 @@ export const supportsFanSpeedCardFeature = (stateObj: HassEntity) => {
class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: FanEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: FanSpeedCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as FanEntity | undefined;
}
static getStubConfig(): FanSpeedCardFeatureConfig {
return {
type: "fan-speed",
@ -55,7 +71,7 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
private _localizeSpeed(speed: FanSpeed) {
if (speed === "on" || speed === "off") {
return this.hass!.formatEntityState(this.stateObj!, speed);
return this.hass!.formatEntityState(this._stateObj!, speed);
}
return this.hass!.localize(`ui.card.fan.speed.${speed}`) || speed;
}
@ -64,16 +80,17 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsFanSpeedCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsFanSpeedCardFeature(this.hass, this.context)
) {
return nothing;
}
const speedCount = computeFanSpeedCount(this.stateObj);
const speedCount = computeFanSpeedCount(this._stateObj);
const percentage = stateActive(this.stateObj)
? (this.stateObj.attributes.percentage ?? 0)
const percentage = stateActive(this._stateObj)
? (this._stateObj.attributes.percentage ?? 0)
: 0;
if (speedCount <= FAN_SPEED_COUNT_MAX_FOR_BUTTONS) {
@ -81,11 +98,11 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
(speed) => ({
value: speed,
label: this._localizeSpeed(speed),
path: computeFanSpeedIcon(this.stateObj!, speed),
path: computeFanSpeedIcon(this._stateObj!, speed),
})
);
const speed = fanPercentageToSpeed(this.stateObj, percentage);
const speed = fanPercentageToSpeed(this._stateObj, percentage);
return html`
<ha-control-select
@ -95,11 +112,11 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
hide-label
.ariaLabel=${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
this._stateObj,
this.hass.entities,
"percentage"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
@ -112,15 +129,15 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
.value=${value}
min="0"
max="100"
.step=${this.stateObj.attributes.percentage_step ?? 1}
.step=${this._stateObj.attributes.percentage_step ?? 1}
@value-changed=${this._valueChanged}
.ariaLabel=${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
this._stateObj,
this.hass.entities,
"percentage"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
.unit=${DOMAIN_ATTRIBUTES_UNITS.fan.percentage}
.locale=${this.hass.locale}
></ha-control-slider>
@ -130,10 +147,10 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
private _speedValueChanged(ev: CustomEvent) {
const speed = (ev.detail as any).value as FanSpeed;
const percentage = fanSpeedToPercentage(this.stateObj!, speed);
const percentage = fanSpeedToPercentage(this._stateObj!, speed);
this.hass!.callService("fan", "set_percentage", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
percentage: percentage,
});
}
@ -143,7 +160,7 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
if (isNaN(value)) return;
this.hass!.callService("fan", "set_percentage", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
percentage: value,
});
}

54
src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts
View File

@ -1,5 +1,4 @@
import { mdiTuneVariant } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -19,9 +18,19 @@ import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import type { HumidifierModesCardFeatureConfig } from "./types";
import type {
HumidifierModesCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsHumidifierModesCardFeature = (stateObj: HassEntity) => {
export const supportsHumidifierModesCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "humidifier" &&
@ -36,12 +45,21 @@ class HuiHumidifierModesCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HumidifierEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: HumidifierModesCardFeatureConfig;
@state() _currentMode?: string;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| HumidifierEntity
| undefined;
}
@query("ha-control-select-menu", true)
private _haSelect?: HaControlSelectMenu;
@ -68,8 +86,15 @@ class HuiHumidifierModesCardFeature
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentMode = this.stateObj.attributes.mode;
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._currentMode = this._stateObj.attributes.mode;
}
}
}
@ -91,7 +116,7 @@ class HuiHumidifierModesCardFeature
const mode =
(ev.detail as any).value ?? ((ev.target as any).value as string);
const oldMode = this.stateObj!.attributes.mode;
const oldMode = this._stateObj!.attributes.mode;
if (mode === oldMode) return;
@ -106,7 +131,7 @@ class HuiHumidifierModesCardFeature
private async _setMode(mode: string) {
await this.hass!.callService("humidifier", "set_mode", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
mode: mode,
});
}
@ -115,13 +140,14 @@ class HuiHumidifierModesCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsHumidifierModesCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsHumidifierModesCardFeature(this.hass, this.context)
) {
return null;
}
const stateObj = this.stateObj;
const stateObj = this._stateObj;
const options = filterModes(
stateObj.attributes.available_modes,
@ -129,7 +155,7 @@ class HuiHumidifierModesCardFeature
).map<ControlSelectOption>((mode) => ({
value: mode,
label: this.hass!.formatEntityAttributeValue(
this.stateObj!,
this._stateObj!,
"mode",
mode
),
@ -150,7 +176,7 @@ class HuiHumidifierModesCardFeature
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass!.formatEntityAttributeName(stateObj, "mode")}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
@ -162,7 +188,7 @@ class HuiHumidifierModesCardFeature
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "mode")}
.value=${this._currentMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this._stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}

54
src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts
View File

@ -1,5 +1,4 @@
import { mdiPower, mdiWaterPercent } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -16,9 +15,19 @@ import type {
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { HumidifierToggleCardFeatureConfig } from "./types";
import type {
HumidifierToggleCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsHumidifierToggleCardFeature = (stateObj: HassEntity) => {
export const supportsHumidifierToggleCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return domain === "humidifier";
};
@ -30,12 +39,21 @@ class HuiHumidifierToggleCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HumidifierEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: HumidifierToggleCardFeatureConfig;
@state() _currentState?: HumidifierState;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| HumidifierEntity
| undefined;
}
static getStubConfig(): HumidifierToggleCardFeatureConfig {
return {
type: "humidifier-toggle",
@ -51,17 +69,24 @@ class HuiHumidifierToggleCardFeature
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentState = this.stateObj.state as HumidifierState;
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._currentState = this._stateObj.state as HumidifierState;
}
}
}
private async _valueChanged(ev: CustomEvent) {
const newState = (ev.detail as any).value as HumidifierState;
if (newState === this.stateObj!.state) return;
if (newState === this._stateObj!.state) return;
const oldState = this.stateObj!.state as HumidifierState;
const oldState = this._stateObj!.state as HumidifierState;
this._currentState = newState;
try {
@ -76,7 +101,7 @@ class HuiHumidifierToggleCardFeature
"humidifier",
newState === "on" ? "turn_on" : "turn_off",
{
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
}
);
}
@ -85,17 +110,18 @@ class HuiHumidifierToggleCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsHumidifierToggleCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsHumidifierToggleCardFeature(this.hass, this.context)
) {
return null;
}
const color = stateColorCss(this.stateObj);
const color = stateColorCss(this._stateObj);
const options = ["off", "on"].map<ControlSelectOption>((entityState) => ({
value: entityState,
label: this.hass!.formatEntityState(this.stateObj!, entityState),
label: this.hass!.formatEntityState(this._stateObj!, entityState),
path: entityState === "on" ? mdiWaterPercent : mdiPower,
}));
@ -109,7 +135,7 @@ class HuiHumidifierToggleCardFeature
style=${styleMap({
"--control-select-color": color,
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;

39
src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts
View File

@ -5,8 +5,8 @@ import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-control-button";
import "../../../components/ha-svg-icon";
import "../../../components/ha-control-button-group";
import "../../../components/ha-svg-icon";
import { UNAVAILABLE } from "../../../data/entity";
import type { LawnMowerEntity } from "../../../data/lawn_mower";
import { LawnMowerEntityFeature, canDock } from "../../../data/lawn_mower";
@ -16,6 +16,7 @@ import { cardFeatureStyles } from "./common/card-feature-styles";
import type {
LawnMowerCommand,
LawnMowerCommandsCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
import { LAWN_MOWER_COMMANDS } from "./types";
@ -74,7 +75,14 @@ export const LAWN_MOWER_COMMANDS_BUTTONS: Record<
}),
};
export const supportsLawnMowerCommandCardFeature = (stateObj: HassEntity) => {
export const supportsLawnMowerCommandCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "lawn_mower" &&
@ -89,14 +97,26 @@ class HuiLawnMowerCommandCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: LawnMowerCommandsCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| LawnMowerEntity
| undefined;
}
static getStubConfig(
_,
stateObj?: HassEntity
hass: HomeAssistant,
context: LovelaceCardFeatureContext
): LawnMowerCommandsCardFeatureConfig {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
return {
type: "lawn-mower-commands",
commands: stateObj
@ -127,7 +147,7 @@ class HuiLawnMowerCommandCardFeature
ev.stopPropagation();
const entry = (ev.target! as any).entry as LawnMowerButton;
this.hass!.callService("lawn_mower", entry.serviceName, {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
});
}
@ -135,13 +155,14 @@ class HuiLawnMowerCommandCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsLawnMowerCommandCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsLawnMowerCommandCardFeature(this.hass, this.context)
) {
return nothing;
}
const stateObj = this.stateObj as LawnMowerEntity;
const stateObj = this._stateObj as LawnMowerEntity;
return html`
<ha-control-button-group>

41
src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts
View File

@ -1,17 +1,26 @@
import type { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { stateActive } from "../../../common/entity/state_active";
import "../../../components/ha-control-slider";
import { UNAVAILABLE } from "../../../data/entity";
import { lightSupportsBrightness } from "../../../data/light";
import { lightSupportsBrightness, type LightEntity } from "../../../data/light";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { LightBrightnessCardFeatureConfig } from "./types";
import type {
LightBrightnessCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsLightBrightnessCardFeature = (stateObj: HassEntity) => {
export const supportsLightBrightnessCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return domain === "light" && lightSupportsBrightness(stateObj);
};
@ -23,10 +32,17 @@ class HuiLightBrightnessCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: LightBrightnessCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id] as LightEntity | undefined;
}
static getStubConfig(): LightBrightnessCardFeatureConfig {
return {
type: "light-brightness",
@ -44,16 +60,17 @@ class HuiLightBrightnessCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsLightBrightnessCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsLightBrightnessCardFeature(this.hass, this.context)
) {
return nothing;
}
const position =
this.stateObj.attributes.brightness != null
this._stateObj.attributes.brightness != null
? Math.max(
Math.round((this.stateObj.attributes.brightness * 100) / 255),
Math.round((this._stateObj.attributes.brightness * 100) / 255),
1
)
: undefined;
@ -63,8 +80,8 @@ class HuiLightBrightnessCardFeature
.value=${position}
min="1"
max="100"
.showHandle=${stateActive(this.stateObj)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.showHandle=${stateActive(this._stateObj)}
.disabled=${this._stateObj!.state === UNAVAILABLE}
@value-changed=${this._valueChanged}
.label=${this.hass.localize("ui.card.light.brightness")}
unit="%"
@ -78,7 +95,7 @@ class HuiLightBrightnessCardFeature
const value = ev.detail.value;
this.hass!.callService("light", "turn_on", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
brightness_pct: value,
});
}

49
src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts
View File

@ -1,4 +1,3 @@
import type { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
@ -12,14 +11,28 @@ import { stateActive } from "../../../common/entity/state_active";
import "../../../components/ha-control-slider";
import { UNAVAILABLE } from "../../../data/entity";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
import { LightColorMode, lightSupportsColorMode } from "../../../data/light";
import {
LightColorMode,
lightSupportsColorMode,
type LightEntity,
} from "../../../data/light";
import { generateColorTemperatureGradient } from "../../../dialogs/more-info/components/lights/light-color-temp-picker";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { LightColorTempCardFeatureConfig } from "./types";
import type {
LightColorTempCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsLightColorTempCardFeature = (stateObj: HassEntity) => {
export const supportsLightColorTempCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "light" &&
@ -34,10 +47,17 @@ class HuiLightColorTempCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: LightColorTempCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as LightEntity | undefined;
}
static getStubConfig(): LightColorTempCardFeatureConfig {
return {
type: "light-color-temp",
@ -55,21 +75,22 @@ class HuiLightColorTempCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsLightColorTempCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsLightColorTempCardFeature(this.hass, this.context)
) {
return nothing;
}
const position =
this.stateObj.attributes.color_temp_kelvin != null
? this.stateObj.attributes.color_temp_kelvin
this._stateObj.attributes.color_temp_kelvin != null
? this._stateObj.attributes.color_temp_kelvin
: undefined;
const minKelvin =
this.stateObj.attributes.min_color_temp_kelvin ?? DEFAULT_MIN_KELVIN;
this._stateObj.attributes.min_color_temp_kelvin ?? DEFAULT_MIN_KELVIN;
const maxKelvin =
this.stateObj.attributes.max_color_temp_kelvin ?? DEFAULT_MAX_KELVIN;
this._stateObj.attributes.max_color_temp_kelvin ?? DEFAULT_MAX_KELVIN;
const gradient = this._generateTemperatureGradient(minKelvin!, maxKelvin);
@ -77,8 +98,8 @@ class HuiLightColorTempCardFeature
<ha-control-slider
.value=${position}
mode="cursor"
.showHandle=${stateActive(this.stateObj)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.showHandle=${stateActive(this._stateObj)}
.disabled=${this._stateObj!.state === UNAVAILABLE}
@value-changed=${this._valueChanged}
.label=${this.hass.localize("ui.card.light.color_temperature")}
.min=${minKelvin}
@ -101,7 +122,7 @@ class HuiLightColorTempCardFeature
const value = ev.detail.value;
this.hass!.callService("light", "turn_on", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
color_temp_kelvin: value,
});
}

39
src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts
View File

@ -1,10 +1,8 @@
import { mdiLock, mdiLockOpenVariant } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
import { LitElement, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import "../../../components/ha-control-button";
import "../../../components/ha-control-button-group";
import { forwardHaptic } from "../../../data/haptics";
@ -12,13 +10,24 @@ import {
callProtectedLockService,
canLock,
canUnlock,
type LockEntity,
} from "../../../data/lock";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { LockCommandsCardFeatureConfig } from "./types";
import type {
LockCommandsCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsLockCommandsCardFeature = (stateObj: HassEntity) => {
export const supportsLockCommandsCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return domain === "lock";
};
@ -30,10 +39,17 @@ class HuiLockCommandsCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: LockCommandsCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as LockEntity | undefined;
}
static getStubConfig(): LockCommandsCardFeatureConfig {
return {
type: "lock-commands",
@ -50,19 +66,20 @@ class HuiLockCommandsCardFeature
private _onTap(ev): void {
ev.stopPropagation();
const service = ev.target.dataset.service;
if (!this.hass || !this.stateObj || !service) {
if (!this.hass || !this._stateObj || !service) {
return;
}
forwardHaptic("light");
callProtectedLockService(this, this.hass, this.stateObj, service);
callProtectedLockService(this, this.hass, this._stateObj, service);
}
protected render() {
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsLockCommandsCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsLockCommandsCardFeature(this.hass, this.context)
) {
return nothing;
}
@ -71,7 +88,7 @@ class HuiLockCommandsCardFeature
<ha-control-button-group>
<ha-control-button
.label=${this.hass.localize("ui.card.lock.lock")}
.disabled=${!canLock(this.stateObj)}
.disabled=${!canLock(this._stateObj)}
@click=${this._onTap}
data-service="lock"
>
@ -79,7 +96,7 @@ class HuiLockCommandsCardFeature
</ha-control-button>
<ha-control-button
.label=${this.hass.localize("ui.card.lock.unlock")}
.disabled=${!canUnlock(this.stateObj)}
.disabled=${!canUnlock(this._stateObj)}
@click=${this._onTap}
data-service="unlock"
>

37
src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
View File

@ -1,10 +1,8 @@
import { mdiCheck } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-control-button";
import "../../../components/ha-control-button-group";
@ -12,13 +10,24 @@ import {
callProtectedLockService,
canOpen,
LockEntityFeature,
type LockEntity,
} from "../../../data/lock";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import type { LockOpenDoorCardFeatureConfig } from "./types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type {
LockOpenDoorCardFeatureConfig,
LovelaceCardFeatureContext,
} from "./types";
export const supportsLockOpenDoorCardFeature = (stateObj: HassEntity) => {
export const supportsLockOpenDoorCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return domain === "lock" && supportsFeature(stateObj, LockEntityFeature.OPEN);
};
@ -35,7 +44,7 @@ class HuiLockOpenDoorCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() public _buttonState: ButtonState = "normal";
@ -43,6 +52,13 @@ class HuiLockOpenDoorCardFeature
private _buttonTimeout?: number;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as LockEntity | undefined;
}
static getStubConfig(): LockOpenDoorCardFeatureConfig {
return {
type: "lock-open-door",
@ -71,10 +87,10 @@ class HuiLockOpenDoorCardFeature
this._setButtonState("confirm", CONFIRM_TIMEOUT_SECOND);
return;
}
if (!this.hass || !this.stateObj) {
if (!this.hass || !this._stateObj) {
return;
}
callProtectedLockService(this, this.hass, this.stateObj!, "open");
callProtectedLockService(this, this.hass, this._stateObj!, "open");
this._setButtonState("done", DONE_TIMEOUT_SECOND);
}
@ -83,8 +99,9 @@ class HuiLockOpenDoorCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsLockOpenDoorCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsLockOpenDoorCardFeature(this.hass, this.context)
) {
return nothing;
}
@ -100,7 +117,7 @@ class HuiLockOpenDoorCardFeature
: html`
<ha-control-button-group>
<ha-control-button
.disabled=${!canOpen(this.stateObj)}
.disabled=${!canOpen(this._stateObj)}
class="open-button ${this._buttonState}"
@click=${this._open}
>

46
src/panels/lovelace/card-features/hui-media-player-volume-slider-card-feature.ts
View File

@ -1,20 +1,30 @@
import type { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { stateActive } from "../../../common/entity/state_active";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-control-slider";
import { isUnavailableState } from "../../../data/entity";
import {
MediaPlayerEntityFeature,
type MediaPlayerEntity,
} from "../../../data/media-player";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { MediaPlayerVolumeSliderCardFeatureConfig } from "./types";
import { MediaPlayerEntityFeature } from "../../../data/media-player";
import { supportsFeature } from "../../../common/entity/supports-feature";
import type {
LovelaceCardFeatureContext,
MediaPlayerVolumeSliderCardFeatureConfig,
} from "./types";
export const supportsMediaPlayerVolumeSliderCardFeature = (
stateObj: HassEntity
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "media_player" &&
@ -29,10 +39,19 @@ class HuiMediaPlayerVolumeSliderCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: MediaPlayerVolumeSliderCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| MediaPlayerEntity
| undefined;
}
static getStubConfig(): MediaPlayerVolumeSliderCardFeatureConfig {
return {
type: "media-player-volume-slider",
@ -50,15 +69,16 @@ class HuiMediaPlayerVolumeSliderCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsMediaPlayerVolumeSliderCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsMediaPlayerVolumeSliderCardFeature(this.hass, this.context)
) {
return nothing;
}
const position =
this.stateObj.attributes.volume_level != null
? Math.round(this.stateObj.attributes.volume_level * 100)
this._stateObj.attributes.volume_level != null
? Math.round(this._stateObj.attributes.volume_level * 100)
: undefined;
return html`
@ -66,8 +86,8 @@ class HuiMediaPlayerVolumeSliderCardFeature
.value=${position}
min="0"
max="100"
.showHandle=${stateActive(this.stateObj)}
.disabled=${!this.stateObj || isUnavailableState(this.stateObj.state)}
.showHandle=${stateActive(this._stateObj)}
.disabled=${!this._stateObj || isUnavailableState(this._stateObj.state)}
@value-changed=${this._valueChanged}
unit="%"
.locale=${this.hass.locale}
@ -80,7 +100,7 @@ class HuiMediaPlayerVolumeSliderCardFeature
const value = ev.detail.value;
this.hass!.callService("media_player", "volume_set", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
volume_level: value / 100,
});
}

43
src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts
View File

@ -12,9 +12,19 @@ import { isUnavailableState } from "../../../data/entity";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { NumericInputCardFeatureConfig } from "./types";
import type {
LovelaceCardFeatureContext,
NumericInputCardFeatureConfig,
} from "./types";
export const supportsNumericInputCardFeature = (stateObj: HassEntity) => {
export const supportsNumericInputCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return domain === "input_number" || domain === "number";
};
@ -26,7 +36,7 @@ class HuiNumericInputCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: NumericInputCardFeatureConfig;
@ -39,6 +49,13 @@ class HuiNumericInputCardFeature
};
}
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as HassEntity | undefined;
}
public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
await import(
"../editor/config-elements/hui-numeric-input-card-feature-editor"
@ -55,13 +72,20 @@ class HuiNumericInputCardFeature
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentState = this.stateObj.state;
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._currentState = this._stateObj.state;
}
}
}
private async _setValue(ev: CustomEvent) {
const stateObj = this.stateObj!;
const stateObj = this._stateObj!;
const domain = computeDomain(stateObj.entity_id);
@ -75,13 +99,14 @@ class HuiNumericInputCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsNumericInputCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsNumericInputCardFeature(this.hass, this.context)
) {
return nothing;
}
const stateObj = this.stateObj;
const stateObj = this._stateObj;
const parsedState = Number(stateObj.state);
const value = !isNaN(parsedState) ? parsedState : undefined;

59
src/panels/lovelace/card-features/hui-select-options-card-feature.ts
View File

@ -1,4 +1,3 @@
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -15,9 +14,19 @@ import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import type { SelectOptionsCardFeatureConfig } from "./types";
import type {
LovelaceCardFeatureContext,
SelectOptionsCardFeatureConfig,
} from "./types";
export const supportsSelectOptionsCardFeature = (stateObj: HassEntity) => {
export const supportsSelectOptionsCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return domain === "select" || domain === "input_select";
};
@ -29,9 +38,7 @@ class HuiSelectOptionsCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?:
| SelectEntity
| InputSelectEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: SelectOptionsCardFeatureConfig;
@ -40,6 +47,16 @@ class HuiSelectOptionsCardFeature
@query("ha-control-select-menu", true)
private _haSelect!: HaControlSelectMenu;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| SelectEntity
| InputSelectEntity
| undefined;
}
static getStubConfig(): SelectOptionsCardFeatureConfig {
return {
type: "select-options",
@ -62,8 +79,15 @@ class HuiSelectOptionsCardFeature
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentOption = this.stateObj.state;
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._currentOption = this._stateObj.state;
}
}
}
@ -84,11 +108,11 @@ class HuiSelectOptionsCardFeature
private async _valueChanged(ev: CustomEvent) {
const option = (ev.target as any).value as string;
const oldOption = this.stateObj!.state;
const oldOption = this._stateObj!.state;
if (
option === oldOption ||
!this.stateObj!.attributes.options.includes(option)
!this._stateObj!.attributes.options.includes(option)
)
return;
@ -102,9 +126,9 @@ class HuiSelectOptionsCardFeature
}
private async _setOption(option: string) {
const domain = computeDomain(this.stateObj!.entity_id);
const domain = computeDomain(this._stateObj!.entity_id);
await this.hass!.callService(domain, "select_option", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
option: option,
});
}
@ -113,16 +137,17 @@ class HuiSelectOptionsCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsSelectOptionsCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsSelectOptionsCardFeature(this.hass, this.context)
) {
return nothing;
}
const stateObj = this.stateObj;
const stateObj = this._stateObj;
const options = this._getOptions(
this.stateObj.attributes.options,
this._stateObj.attributes.options,
this._config.options
);
@ -133,7 +158,7 @@ class HuiSelectOptionsCardFeature
.label=${this.hass.localize("ui.card.select.option")}
.value=${stateObj.state}
.options=${options}
.disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this._stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}

57
src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts
View File

@ -1,4 +1,3 @@
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -9,9 +8,19 @@ import type { HumidifierEntity } from "../../../data/humidifier";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { TargetHumidityCardFeatureConfig } from "./types";
import type {
LovelaceCardFeatureContext,
TargetHumidityCardFeatureConfig,
} from "./types";
export const supportsTargetHumidityCardFeature = (stateObj: HassEntity) => {
export const supportsTargetHumidityCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return domain === "humidifier";
};
@ -23,12 +32,21 @@ class HuiTargetHumidityCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HumidifierEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: TargetHumidityCardFeatureConfig;
@state() private _targetHumidity?: number;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| HumidifierEntity
| undefined;
}
static getStubConfig(): TargetHumidityCardFeatureConfig {
return {
type: "target-humidity",
@ -44,19 +62,26 @@ class HuiTargetHumidityCardFeature
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj")) {
this._targetHumidity = this.stateObj!.attributes.humidity;
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._targetHumidity = this._stateObj!.attributes.humidity;
}
}
}
private _step = 1;
private get _min() {
return this.stateObj!.attributes.min_humidity ?? 0;
return this._stateObj!.attributes.min_humidity ?? 0;
}
private get _max() {
return this.stateObj!.attributes.max_humidity ?? 100;
return this._stateObj!.attributes.max_humidity ?? 100;
}
private _valueChanged(ev: CustomEvent) {
@ -68,7 +93,7 @@ class HuiTargetHumidityCardFeature
private _callService() {
this.hass!.callService("humidifier", "set_humidity", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
humidity: this._targetHumidity,
});
}
@ -77,21 +102,25 @@ class HuiTargetHumidityCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsTargetHumidityCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsTargetHumidityCardFeature(this.hass, this.context)
) {
return nothing;
}
return html`
<ha-control-slider
.value=${this.stateObj.attributes.humidity}
.value=${this._stateObj.attributes.humidity}
.min=${this._min}
.max=${this._max}
.step=${this._step}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
@value-changed=${this._valueChanged}
.label=${this.hass.formatEntityAttributeName(this.stateObj, "humidity")}
.label=${this.hass.formatEntityAttributeName(
this._stateObj,
"humidity"
)}
unit="%"
.locale=${this.hass.locale}
></ha-control-slider>

111
src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts
View File

@ -1,4 +1,3 @@
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -19,11 +18,21 @@ import { WaterHeaterEntityFeature } from "../../../data/water_heater";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { TargetTemperatureCardFeatureConfig } from "./types";
import type {
LovelaceCardFeatureContext,
TargetTemperatureCardFeatureConfig,
} from "./types";
type Target = "value" | "low" | "high";
export const supportsTargetTemperatureCardFeature = (stateObj: HassEntity) => {
export const supportsTargetTemperatureCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
(domain === "climate" &&
@ -44,14 +53,22 @@ class HuiTargetTemperatureCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?:
| ClimateEntity
| WaterHeaterEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: TargetTemperatureCardFeatureConfig;
@state() private _targetTemperature: Partial<Record<Target, number>> = {};
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| WaterHeaterEntity
| ClimateEntity
| undefined;
}
static getStubConfig(): TargetTemperatureCardFeatureConfig {
return {
type: "target-temperature",
@ -67,34 +84,41 @@ class HuiTargetTemperatureCardFeature
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj")) {
this._targetTemperature = {
value: this.stateObj!.attributes.temperature,
low:
"target_temp_low" in this.stateObj!.attributes
? this.stateObj!.attributes.target_temp_low
: undefined,
high:
"target_temp_high" in this.stateObj!.attributes
? this.stateObj!.attributes.target_temp_high
: undefined,
};
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._targetTemperature = {
value: this._stateObj!.attributes.temperature,
low:
"target_temp_low" in this._stateObj!.attributes
? this._stateObj!.attributes.target_temp_low
: undefined,
high:
"target_temp_high" in this._stateObj!.attributes
? this._stateObj!.attributes.target_temp_high
: undefined,
};
}
}
}
private get _step() {
return (
this.stateObj!.attributes.target_temp_step ||
this._stateObj!.attributes.target_temp_step ||
(this.hass!.config.unit_system.temperature === UNIT_F ? 1 : 0.5)
);
}
private get _min() {
return this.stateObj!.attributes.min_temp;
return this._stateObj!.attributes.min_temp;
}
private get _max() {
return this.stateObj!.attributes.max_temp;
return this._stateObj!.attributes.max_temp;
}
private async _valueChanged(ev: CustomEvent) {
@ -115,43 +139,43 @@ class HuiTargetTemperatureCardFeature
);
private _callService(type: string) {
const domain = computeStateDomain(this.stateObj!);
const domain = computeStateDomain(this._stateObj!);
if (type === "high" || type === "low") {
this.hass!.callService(domain, "set_temperature", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
target_temp_low: this._targetTemperature.low,
target_temp_high: this._targetTemperature.high,
});
return;
}
this.hass!.callService(domain, "set_temperature", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
temperature: this._targetTemperature.value,
});
}
private _supportsTarget() {
const domain = computeStateDomain(this.stateObj!);
const domain = computeStateDomain(this._stateObj!);
return (
(domain === "climate" &&
supportsFeature(
this.stateObj!,
this._stateObj!,
ClimateEntityFeature.TARGET_TEMPERATURE
)) ||
(domain === "water_heater" &&
supportsFeature(
this.stateObj!,
this._stateObj!,
WaterHeaterEntityFeature.TARGET_TEMPERATURE
))
);
}
private _supportsTargetRange() {
const domain = computeStateDomain(this.stateObj!);
const domain = computeStateDomain(this._stateObj!);
return (
domain === "climate" &&
supportsFeature(
this.stateObj!,
this._stateObj!,
ClimateEntityFeature.TARGET_TEMPERATURE_RANGE
)
);
@ -161,13 +185,14 @@ class HuiTargetTemperatureCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsTargetTemperatureCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsTargetTemperatureCardFeature(this.hass, this.context)
) {
return nothing;
}
const stateColor = stateColorCss(this.stateObj);
const stateColor = stateColorCss(this._stateObj);
const digits = this._step.toString().split(".")?.[1]?.length ?? 0;
const options = {
@ -178,27 +203,27 @@ class HuiTargetTemperatureCardFeature
if (
this._supportsTarget() &&
this._targetTemperature.value != null &&
this.stateObj.state !== UNAVAILABLE
this._stateObj.state !== UNAVAILABLE
) {
return html`
<ha-control-button-group>
<ha-control-number-buttons
.formatOptions=${options}
.target=${"value"}
.value=${this.stateObj.attributes.temperature}
.value=${this._stateObj.attributes.temperature}
.unit=${this.hass.config.unit_system.temperature}
.min=${this._min}
.max=${this._max}
.step=${this._step}
@value-changed=${this._valueChanged}
.label=${this.hass.formatEntityAttributeName(
this.stateObj,
this._stateObj,
"temperature"
)}
style=${styleMap({
"--control-number-buttons-focus-color": stateColor,
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
.locale=${this.hass.locale}
>
</ha-control-number-buttons>
@ -210,7 +235,7 @@ class HuiTargetTemperatureCardFeature
this._supportsTargetRange() &&
this._targetTemperature.low != null &&
this._targetTemperature.high != null &&
this.stateObj.state !== UNAVAILABLE
this._stateObj.state !== UNAVAILABLE
) {
return html`
<ha-control-button-group>
@ -227,13 +252,13 @@ class HuiTargetTemperatureCardFeature
.step=${this._step}
@value-changed=${this._valueChanged}
.label=${this.hass.formatEntityAttributeName(
this.stateObj,
this._stateObj,
"target_temp_low"
)}
style=${styleMap({
"--control-number-buttons-focus-color": stateColor,
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
.locale=${this.hass.locale}
>
</ha-control-number-buttons>
@ -250,13 +275,13 @@ class HuiTargetTemperatureCardFeature
.step=${this._step}
@value-changed=${this._valueChanged}
.label=${this.hass.formatEntityAttributeName(
this.stateObj,
this._stateObj,
"target_temp_high"
)}
style=${styleMap({
"--control-number-buttons-focus-color": stateColor,
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
.locale=${this.hass.locale}
>
</ha-control-number-buttons>
@ -267,10 +292,10 @@ class HuiTargetTemperatureCardFeature
return html`
<ha-control-button-group>
<ha-control-number-buttons
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
.unit=${this.hass.config.unit_system.temperature}
.label=${this.hass.formatEntityAttributeName(
this.stateObj,
this._stateObj,
"temperature"
)}
style=${styleMap({

52
src/panels/lovelace/card-features/hui-toggle-card-feature.ts
View File

@ -23,9 +23,19 @@ import { forwardHaptic } from "../../../data/haptics";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { ToggleCardFeatureConfig } from "./types";
import type {
LovelaceCardFeatureContext,
ToggleCardFeatureConfig,
} from "./types";
export const supportsToggleCardFeature = (stateObj: HassEntity) => {
export const supportsToggleCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return [
"switch",
@ -56,10 +66,17 @@ const DOMAIN_ICONS: Record<string, { on: string; off: string }> = {
class HuiToggleCardFeature extends LitElement implements LovelaceCardFeature {
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: ToggleCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as HassEntity | undefined;
}
static getStubConfig(): ToggleCardFeatureConfig {
return {
type: "toggle",
@ -92,16 +109,16 @@ class HuiToggleCardFeature extends LitElement implements LovelaceCardFeature {
}
private async _callService(turnOn): Promise<void> {
if (!this.hass || !this.stateObj) {
if (!this.hass || !this._stateObj) {
return;
}
forwardHaptic("light");
const stateDomain = computeDomain(this.stateObj.entity_id);
const stateDomain = computeDomain(this._stateObj.entity_id);
const serviceDomain = stateDomain;
const service = turnOn ? "turn_on" : "turn_off";
await this.hass.callService(serviceDomain, service, {
entity_id: this.stateObj.entity_id,
entity_id: this._stateObj.entity_id,
});
}
@ -109,32 +126,33 @@ class HuiToggleCardFeature extends LitElement implements LovelaceCardFeature {
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsToggleCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsToggleCardFeature(this.hass, this.context)
) {
return nothing;
}
const onColor = "var(--feature-color)";
const offColor = stateColorCss(this.stateObj, "off");
const offColor = stateColorCss(this._stateObj, "off");
const isOn = this.stateObj.state === "on";
const isOff = this.stateObj.state === "off";
const isOn = this._stateObj.state === "on";
const isOff = this._stateObj.state === "off";
const domain = computeDomain(this.stateObj.entity_id);
const domain = computeDomain(this._stateObj.entity_id);
const onIcon = DOMAIN_ICONS[domain]?.on || mdiPower;
const offIcon = DOMAIN_ICONS[domain]?.off || mdiPowerOff;
if (
this.stateObj.attributes.assumed_state ||
this.stateObj.state === UNKNOWN
this._stateObj.attributes.assumed_state ||
this._stateObj.state === UNKNOWN
) {
return html`
<ha-control-button-group>
<ha-control-button
.label=${this.hass.localize("ui.card.common.turn_off")}
@click=${this._turnOff}
.disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this._stateObj.state === UNAVAILABLE}
class=${classMap({
active: isOff,
})}
@ -147,7 +165,7 @@ class HuiToggleCardFeature extends LitElement implements LovelaceCardFeature {
<ha-control-button
.label=${this.hass.localize("ui.card.common.turn_on")}
@click=${this._turnOn}
.disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this._stateObj.state === UNAVAILABLE}
class=${classMap({
active: isOn,
})}
@ -168,7 +186,7 @@ class HuiToggleCardFeature extends LitElement implements LovelaceCardFeature {
.checked=${isOn}
@change=${this._valueChanged}
.ariaLabel=${this.hass.localize("ui.card.common.toggle")}
.disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this._stateObj.state === UNAVAILABLE}
>
</ha-control-switch>
`;

41
src/panels/lovelace/card-features/hui-update-actions-card-feature.ts
View File

@ -1,5 +1,4 @@
import { mdiCancel, mdiCellphoneArrowDown } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import { LitElement, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
@ -14,11 +13,21 @@ import { showUpdateBackupDialogParams } from "../../../dialogs/update_backup/sho
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { UpdateActionsCardFeatureConfig } from "./types";
import type {
LovelaceCardFeatureContext,
UpdateActionsCardFeatureConfig,
} from "./types";
export const DEFAULT_UPDATE_BACKUP_OPTION = "no";
export const supportsUpdateActionsCardFeature = (stateObj: HassEntity) => {
export const supportsUpdateActionsCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "update" &&
@ -33,10 +42,19 @@ class HuiUpdateActionsCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: UpdateActionsCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| UpdateEntity
| undefined;
}
public static async getConfigElement(): Promise<LovelaceCardFeatureEditor> {
await import(
"../editor/config-elements/hui-update-actions-card-feature-editor"
@ -59,7 +77,7 @@ class HuiUpdateActionsCardFeature
}
private get _installDisabled(): boolean {
const stateObj = this.stateObj as UpdateEntity;
const stateObj = this._stateObj as UpdateEntity;
if (stateObj.state === UNAVAILABLE) return true;
@ -74,7 +92,7 @@ class HuiUpdateActionsCardFeature
}
private get _skipDisabled(): boolean {
const stateObj = this.stateObj as UpdateEntity;
const stateObj = this._stateObj as UpdateEntity;
if (stateObj.state === UNAVAILABLE) return true;
@ -89,7 +107,7 @@ class HuiUpdateActionsCardFeature
private async _install(): Promise<void> {
const supportsBackup = supportsFeature(
this.stateObj!,
this._stateObj!,
UpdateEntityFeature.BACKUP
);
let backup = supportsBackup && this._config?.backup === "yes";
@ -101,14 +119,14 @@ class HuiUpdateActionsCardFeature
}
this.hass!.callService("update", "install", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
backup: backup,
});
}
private async _skip(): Promise<void> {
this.hass!.callService("update", "skip", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
});
}
@ -116,8 +134,9 @@ class HuiUpdateActionsCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsUpdateActionsCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsUpdateActionsCardFeature(this.hass, this.context)
) {
return nothing;
}

44
src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts
View File

@ -13,8 +13,8 @@ import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-control-button";
import "../../../components/ha-svg-icon";
import "../../../components/ha-control-button-group";
import "../../../components/ha-svg-icon";
import { UNAVAILABLE } from "../../../data/entity";
import type { VacuumEntity } from "../../../data/vacuum";
import {
@ -27,7 +27,11 @@ import {
import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import type { VacuumCommand, VacuumCommandsCardFeatureConfig } from "./types";
import type {
LovelaceCardFeatureContext,
VacuumCommand,
VacuumCommandsCardFeatureConfig,
} from "./types";
import { VACUUM_COMMANDS } from "./types";
interface VacuumButton {
@ -115,7 +119,14 @@ export const VACUUM_COMMANDS_BUTTONS: Record<
}),
};
export const supportsVacuumCommandsCardFeature = (stateObj: HassEntity) => {
export const supportsVacuumCommandsCardFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return (
domain === "vacuum" &&
@ -130,14 +141,26 @@ class HuiVacuumCommandCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: VacuumCommandsCardFeatureConfig;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| VacuumEntity
| undefined;
}
static getStubConfig(
_,
stateObj?: HassEntity
hass: HomeAssistant,
context: LovelaceCardFeatureContext
): VacuumCommandsCardFeatureConfig {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
return {
type: "vacuum-commands",
commands: stateObj
@ -166,7 +189,7 @@ class HuiVacuumCommandCardFeature
ev.stopPropagation();
const entry = (ev.target! as any).entry as VacuumButton;
this.hass!.callService("vacuum", entry.serviceName, {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
});
}
@ -174,13 +197,14 @@ class HuiVacuumCommandCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsVacuumCommandsCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsVacuumCommandsCardFeature(this.hass, this.context)
) {
return nothing;
}
const stateObj = this.stateObj as VacuumEntity;
const stateObj = this._stateObj as VacuumEntity;
return html`
<ha-control-button-group>

54
src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts
View File

@ -1,4 +1,3 @@
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues, TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -23,11 +22,19 @@ import type { HomeAssistant } from "../../../types";
import type { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import type { WaterHeaterOperationModesCardFeatureConfig } from "./types";
import type {
LovelaceCardFeatureContext,
WaterHeaterOperationModesCardFeatureConfig,
} from "./types";
export const supportsWaterHeaterOperationModesCardFeature = (
stateObj: HassEntity
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
const domain = computeDomain(stateObj.entity_id);
return domain === "water_heater";
};
@ -39,12 +46,21 @@ class HuiWaterHeaterOperationModeCardFeature
{
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: WaterHeaterEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@state() private _config?: WaterHeaterOperationModesCardFeatureConfig;
@state() _currentOperationMode?: OperationMode;
private get _stateObj() {
if (!this.hass || !this.context || !this.context.entity_id) {
return undefined;
}
return this.hass.states[this.context.entity_id!] as
| WaterHeaterEntity
| undefined;
}
static getStubConfig(): WaterHeaterOperationModesCardFeatureConfig {
return {
type: "water-heater-operation-modes",
@ -69,17 +85,24 @@ class HuiWaterHeaterOperationModeCardFeature
protected willUpdate(changedProp: PropertyValues): void {
super.willUpdate(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
this._currentOperationMode = this.stateObj.state as OperationMode;
if (
(changedProp.has("hass") || changedProp.has("context")) &&
this._stateObj
) {
const oldHass = changedProp.get("hass") as HomeAssistant | undefined;
const oldStateObj = oldHass?.states[this.context!.entity_id!];
if (oldStateObj !== this._stateObj) {
this._currentOperationMode = this._stateObj.state as OperationMode;
}
}
}
private async _valueChanged(ev: CustomEvent) {
const mode = (ev.detail as any).value as OperationMode;
if (mode === this.stateObj!.state) return;
if (mode === this._stateObj!.state) return;
const oldMode = this.stateObj!.state as OperationMode;
const oldMode = this._stateObj!.state as OperationMode;
this._currentOperationMode = mode;
try {
@ -91,7 +114,7 @@ class HuiWaterHeaterOperationModeCardFeature
private async _setMode(mode: OperationMode) {
await this.hass!.callService("water_heater", "set_operation_mode", {
entity_id: this.stateObj!.entity_id,
entity_id: this._stateObj!.entity_id,
operation_mode: mode,
});
}
@ -100,15 +123,16 @@ class HuiWaterHeaterOperationModeCardFeature
if (
!this._config ||
!this.hass ||
!this.stateObj ||
!supportsWaterHeaterOperationModesCardFeature(this.stateObj)
!this.context ||
!this._stateObj ||
!supportsWaterHeaterOperationModesCardFeature(this.hass, this.context)
) {
return null;
}
const color = stateColorCss(this.stateObj);
const color = stateColorCss(this._stateObj);
const orderedModes = (this.stateObj.attributes.operation_list || [])
const orderedModes = (this._stateObj.attributes.operation_list || [])
.concat()
.sort(compareWaterHeaterOperationMode)
.reverse();
@ -118,7 +142,7 @@ class HuiWaterHeaterOperationModeCardFeature
this._config.operation_modes
).map<ControlSelectOption>((mode) => ({
value: mode,
label: this.hass!.formatEntityState(this.stateObj!, mode),
label: this.hass!.formatEntityState(this._stateObj!, mode),
path: computeOperationModeIcon(mode as OperationMode),
}));
@ -132,7 +156,7 @@ class HuiWaterHeaterOperationModeCardFeature
style=${styleMap({
"--control-select-color": color,
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this._stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;

2
src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
View File

@ -86,7 +86,7 @@ class HuiEnergyCarbonGaugeCard
const co2State = this.hass.states[this._data.co2SignalEntity];
if (!co2State) {
return html`<hui-warning>
return html`<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._data.co2SignalEntity)}
</hui-warning>`;
}

2
src/panels/lovelace/cards/hui-alarm-panel-card.ts
View File

@ -221,7 +221,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;

2
src/panels/lovelace/cards/hui-area-card.ts
View File

@ -363,7 +363,7 @@ export class HuiAreaCard
if (area === null) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${this.hass.localize("ui.card.area.area_not_found")}
</hui-warning>
`;

2
src/panels/lovelace/cards/hui-button-card.ts
View File

@ -179,7 +179,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
if (this._config.entity && !stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;

11
src/panels/lovelace/cards/hui-calendar-card.ts
View File

@ -4,7 +4,6 @@ import { customElement, property, state } from "lit/decorators";
import { getColorByIndex } from "../../../common/color/colors";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import type { HASSDomEvent } from "../../../common/dom/fire_event";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { debounce } from "../../../common/util/debounce";
import "../../../components/ha-card";
import type { Calendar, CalendarEvent } from "../../../data/calendar";
@ -176,17 +175,9 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
this._events = result.events;
if (result.errors.length > 0) {
const nameList = result.errors
.map((error_entity_id) =>
this.hass!.states[error_entity_id]
? computeStateName(this.hass!.states[error_entity_id])
: error_entity_id
)
.join(", ");
this._error = `${this.hass!.localize(
"ui.components.calendar.event_retrieval_error"
)} ${nameList}`;
)}`;
}
}

13
src/panels/lovelace/cards/hui-card.ts
View File

@ -13,7 +13,6 @@ import {
checkConditionsMet,
} from "../common/validate-condition";
import { createCardElement } from "../create-element/create-card-element";
import { createErrorCardConfig } from "../create-element/create-element-base";
import type { LovelaceCard, LovelaceGridOptions } from "../types";
declare global {
@ -191,7 +190,9 @@ export class HuiCard extends ReactiveElement {
this._element.hass = this.hass;
}
} catch (e: any) {
this._loadElement(createErrorCardConfig(e.message, null));
// eslint-disable-next-line no-console
console.error(this.config?.type, e);
this._loadElement({ type: "error" });
}
}
if (changedProps.has("preview")) {
@ -200,7 +201,9 @@ export class HuiCard extends ReactiveElement {
// For backwards compatibility
(this._element as any).editMode = this.preview;
} catch (e: any) {
this._loadElement(createErrorCardConfig(e.message, null));
// eslint-disable-next-line no-console
console.error(this.config?.type, e);
this._loadElement({ type: "error" });
}
}
if (changedProps.has("layout")) {
@ -209,7 +212,9 @@ export class HuiCard extends ReactiveElement {
// For backwards compatibility
(this._element as any).isPanel = this.layout === "panel";
} catch (e: any) {
this._loadElement(createErrorCardConfig(e.message, null));
// eslint-disable-next-line no-console
console.error(this.config?.type, e);
this._loadElement({ type: "error" });
}
}
}

2
src/panels/lovelace/cards/hui-entity-card.ts
View File

@ -114,7 +114,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;

42
src/panels/lovelace/cards/hui-entity-filter-card.ts
View File

@ -82,18 +82,40 @@ export class HuiEntityFilterCard
}
if (
!(
(config.conditions && Array.isArray(config.conditions)) ||
(config.state_filter && Array.isArray(config.state_filter))
) &&
!config.entities.every(
!config.conditions &&
!config.state_filter &&
!config.entities.some(
(entity) =>
typeof entity === "object" &&
entity.state_filter &&
Array.isArray(entity.state_filter)
(entity.state_filter || entity.conditions)
)
) {
throw new Error("Incorrect filter config");
throw new Error("At least one conditions or state_filter is required");
}
if (
(config.conditions && !Array.isArray(config.conditions)) ||
(config.state_filter && !Array.isArray(config.state_filter)) ||
config.entities.some(
(entity) =>
typeof entity === "object" &&
((entity.state_filter && !Array.isArray(entity.state_filter)) ||
(entity.conditions && !Array.isArray(entity.conditions)))
)
) {
throw new Error("Conditions or state_filter must be an array");
}
if (
(config.conditions && config.state_filter) ||
config.entities.some(
(entity) =>
typeof entity === "object" && entity.state_filter && entity.conditions
)
) {
throw new Error(
"Conditions and state_filter may not be simultaneously defined"
);
}
this._configEntities = processConfigEntities(config.entities);
@ -149,7 +171,7 @@ export class HuiEntityFilterCard
if (!stateObj) return false;
const conditions = entityConf.conditions ?? this._config!.conditions;
if (conditions) {
if (conditions && !entityConf.state_filter) {
const conditionWithEntity = conditions.map((condition) =>
addEntityToCondition(condition, entityConf.entity)
);
@ -161,7 +183,7 @@ export class HuiEntityFilterCard
return filters.some((filter) => evaluateStateFilter(stateObj, filter));
}
return false;
return true;
});
if (entitiesList.length === 0 && this._config.show_empty === false) {

104
src/panels/lovelace/cards/hui-error-card.ts
View File

@ -1,52 +1,106 @@
import { dump } from "js-yaml";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-alert";
import { mdiAlertCircleOutline, mdiAlertOutline } from "@mdi/js";
import type { HomeAssistant } from "../../../types";
import type { LovelaceCard } from "../types";
import type { LovelaceCard, LovelaceGridOptions } from "../types";
import type { ErrorCardConfig } from "./types";
import "../../../components/ha-card";
import "../../../components/ha-svg-icon";
const ERROR_ICONS = {
warning: mdiAlertOutline,
error: mdiAlertCircleOutline,
};
@customElement("hui-error-card")
export class HuiErrorCard extends LitElement implements LovelaceCard {
public hass?: HomeAssistant;
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public preview = false;
@property({ attribute: "severity" }) public severity: "warning" | "error" =
"error";
@state() private _config?: ErrorCardConfig;
public getCardSize(): number {
return 4;
return 1;
}
public getGridOptions(): LovelaceGridOptions {
return {
columns: 6,
rows: 1,
min_rows: 1,
min_columns: 6,
};
}
public setConfig(config: ErrorCardConfig): void {
this._config = config;
this.severity = config.severity || "error";
}
protected render() {
if (!this._config) {
return nothing;
}
const error =
this._config?.error ||
this.hass?.localize("ui.errors.config.configuration_error");
const showTitle = this.hass === undefined || this.hass?.user?.is_admin;
let dumped: string | undefined;
if (this._config.origConfig) {
try {
dumped = dump(this._config.origConfig);
} catch (_err: any) {
dumped = `[Error dumping ${this._config.origConfig}]`;
}
}
return html`<ha-alert alert-type="error" .title=${this._config.error}>
${dumped ? html`<pre>${dumped}</pre>` : ""}
</ha-alert>`;
return html`
<ha-card class="${this.severity} ${showTitle ? "" : "no-title"}">
<div class="icon">
<slot name="icon">
<ha-svg-icon .path=${ERROR_ICONS[this.severity]}></ha-svg-icon>
</slot>
</div>
${showTitle
? html`<div class="title"><slot>${error}</slot></div>`
: nothing}
</ha-card>
`;
}
static styles = css`
pre {
font-family: var(--ha-font-family-code);
white-space: break-spaces;
user-select: text;
ha-card {
height: 100%;
border-width: 0;
display: flex;
align-items: center;
column-gap: 16px;
padding: 16px;
}
ha-card::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.12;
pointer-events: none;
content: "";
border-radius: var(--ha-card-border-radius, 12px);
}
.no-title {
justify-content: center;
}
.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: var(--ha-font-weight-bold);
}
ha-card.warning > .icon {
color: var(--warning-color);
}
ha-card.warning::after {
background-color: var(--warning-color);
}
ha-card.error > .icon {
color: var(--error-color);
}
ha-card.error::after {
background-color: var(--error-color);
}
`;
}

2
src/panels/lovelace/cards/hui-gauge-card.ts
View File

@ -90,7 +90,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;

10
src/panels/lovelace/cards/hui-humidifier-card.ts
View File

@ -14,6 +14,7 @@ import type { HumidifierEntity } from "../../../data/humidifier";
import "../../../state-control/humidifier/ha-state-control-humidifier-humidity";
import type { HomeAssistant } from "../../../types";
import "../card-features/hui-card-features";
import type { LovelaceCardFeatureContext } from "../card-features/types";
import { findEntities } from "../common/find-entities";
import { createEntityNotFoundWarning } from "../components/hui-warning";
import type {
@ -69,6 +70,8 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
@state() private _config?: HumidifierCardConfig;
@state() private _featureContext: LovelaceCardFeatureContext = {};
public getCardSize(): number {
return 7;
}
@ -79,6 +82,9 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
}
this._config = config;
this._featureContext = {
entity_id: config.entity,
};
}
private _handleMoreInfo() {
@ -121,7 +127,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;
@ -165,7 +171,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
"--feature-color": color,
})}
.hass=${this.hass}
.stateObj=${stateObj}
.context=${this._featureContext}
.features=${this._config.features}
></hui-card-features>`
: nothing}

2
src/panels/lovelace/cards/hui-light-card.ts
View File

@ -82,7 +82,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;

2
src/panels/lovelace/cards/hui-logbook-card.ts
View File

@ -174,7 +174,7 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
if (!isComponentLoaded(this.hass, "logbook")) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${this.hass.localize("ui.components.logbook.not_loaded", {
platform: "logbook",
})}</hui-warning

2
src/panels/lovelace/cards/hui-media-control-card.ts
View File

@ -145,7 +145,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;

2
src/panels/lovelace/cards/hui-picture-card.ts
View File

@ -100,7 +100,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
if (this._config.image_entity) {
stateObj = this.hass.states[this._config.image_entity];
if (!stateObj) {
return html`<hui-warning>
return html`<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.image_entity)}
</hui-warning>`;
}

2
src/panels/lovelace/cards/hui-picture-entity-card.ts
View File

@ -119,7 +119,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;

2
src/panels/lovelace/cards/hui-plant-status-card.ts
View File

@ -104,7 +104,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;

10
src/panels/lovelace/cards/hui-thermostat-card.ts
View File

@ -14,6 +14,7 @@ import type { ClimateEntity } from "../../../data/climate";
import "../../../state-control/climate/ha-state-control-climate-temperature";
import type { HomeAssistant } from "../../../types";
import "../card-features/hui-card-features";
import type { LovelaceCardFeatureContext } from "../card-features/types";
import { findEntities } from "../common/find-entities";
import { createEntityNotFoundWarning } from "../components/hui-warning";
import type {
@ -61,6 +62,8 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
@state() private _config?: ThermostatCardConfig;
@state() private _featureContext: LovelaceCardFeatureContext = {};
public getCardSize(): number {
return 7;
}
@ -71,6 +74,9 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
}
this._config = config;
this._featureContext = {
entity_id: config.entity,
};
}
private _handleMoreInfo() {
@ -113,7 +119,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;
@ -157,7 +163,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
"--feature-color": color,
})}
.hass=${this.hass}
.stateObj=${stateObj}
.context=${this._featureContext}
.features=${this._config.features}
></hui-card-features>`
: nothing}

27
src/panels/lovelace/cards/hui-tile-card.ts
View File

@ -1,4 +1,3 @@
import { mdiExclamationThick, mdiHelp } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -37,6 +36,8 @@ import type {
} from "../types";
import { renderTileBadge } from "./tile/badges/tile-badge";
import type { TileCardConfig } from "./types";
import type { LovelaceCardFeatureContext } from "../card-features/types";
import { createEntityNotFoundWarning } from "../components/hui-warning";
export const getEntityDefaultTileIconAction = (entityId: string) => {
const domain = computeDomain(entityId);
@ -84,6 +85,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
@state() private _config?: TileCardConfig;
@state() private _featureContext: LovelaceCardFeatureContext = {};
public setConfig(config: TileCardConfig): void {
if (!config.entity) {
throw new Error("Specify an entity");
@ -98,6 +101,9 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
},
...config,
};
this._featureContext = {
entity_id: config.entity,
};
}
public getCardSize(): number {
@ -249,20 +255,9 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<ha-card>
<div class="content ${classMap(contentClasses)}">
<ha-tile-icon>
<ha-svg-icon slot="icon" .path=${mdiHelp}></ha-svg-icon>
<ha-tile-badge class="not-found">
<ha-svg-icon .path=${mdiExclamationThick}></ha-svg-icon>
</ha-tile-badge>
</ha-tile-icon>
<ha-tile-info
.primary=${entityId}
secondary=${this.hass.localize("ui.card.tile.not_found")}
></ha-tile-info>
</div>
</ha-card>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;
}
@ -346,7 +341,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
? html`
<hui-card-features
.hass=${this.hass}
.stateObj=${stateObj}
.context=${this._featureContext}
.color=${this._config.color}
.features=${features}
></hui-card-features>

2
src/panels/lovelace/cards/hui-todo-list-card.ts
View File

@ -241,7 +241,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._entityId)}
</hui-warning>
`;

92
src/panels/lovelace/cards/hui-weather-forecast-card.ts
View File

@ -3,6 +3,7 @@ import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { classMap } from "lit/directives/class-map";
import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
import { formatTime } from "../../../common/datetime/format_time";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
@ -74,17 +75,26 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
private _sizeController = new ResizeController(this, {
callback: (entries) => {
const result = {
width: "regular",
height: "tall",
};
const width = entries[0]?.contentRect.width;
if (width < 245) {
return "very-very-narrow";
result.height = "very-very-narrow";
} else if (width < 300) {
result.width = "very-narrow";
} else if (width < 375) {
result.width = "narrow";
}
if (width < 300) {
return "very-narrow";
const height = entries[0]?.contentRect.height;
if (height < 235) {
result.height = "short";
}
if (width < 375) {
return "narrow";
}
return "regular";
return result;
},
});
@ -210,7 +220,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;
@ -233,11 +243,11 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
);
let itemsToShow = this._config?.forecast_slots ?? 5;
if (this._sizeController.value === "very-very-narrow") {
if (this._sizeController.value.width === "very-very-narrow") {
itemsToShow = Math.min(3, itemsToShow);
} else if (this._sizeController.value === "very-narrow") {
} else if (this._sizeController.value.width === "very-narrow") {
itemsToShow = Math.min(5, itemsToShow);
} else if (this._sizeController.value === "narrow") {
} else if (this._sizeController.value.width === "narrow") {
itemsToShow = Math.min(7, itemsToShow);
}
@ -255,7 +265,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
return html`
<ha-card
class=${ifDefined(this._sizeController.value)}
class=${classMap({
[this._sizeController.value.height]: true,
[this._sizeController.value.width]: true,
})}
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this._config!.hold_action),
@ -489,7 +502,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
}
.content + .forecast {
padding-top: 8px;
padding-top: 16px;
}
.icon-image {
@ -585,8 +598,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
}
.forecast-image-icon {
padding-top: 4px;
padding-bottom: 4px;
padding-top: 6px;
padding-bottom: 6px;
display: flex;
justify-content: center;
}
@ -684,11 +697,60 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
flex-direction: column;
}
[class*="very-very-narrow"] .icon-image {
min-width: 48px;
}
[class*="very-very-narrow"] .icon-image > * {
flex: 0 0 48px;
height: 48px;
}
[class*="very-very-narrow"] .content + .forecast {
padding-top: 8px;
}
[class*="very-very-narrow"] .icon-image {
margin-right: 0;
margin-inline-end: 0;
margin-inline-start: initial;
}
/* ============= SHORT ============= */
.short .state,
.short .temp-attribute .temp {
font-size: 24px;
line-height: 1.25;
}
.short .content + .forecast {
padding-top: 12px;
}
.short .icon-image {
min-width: 48px;
}
.short .icon-image > * {
flex: 0 0 48px;
height: 48px;
}
.short .forecast-image-icon {
padding-top: 4px;
padding-bottom: 4px;
}
.short .forecast-image-icon > * {
width: 32px;
height: 32px;
--mdc-icon-size: 32px;
}
.short .forecast-icon {
--mdc-icon-size: 32px;
}
`,
];
}

5
src/panels/lovelace/cards/types.ts
View File

@ -215,8 +215,9 @@ export interface EntityFilterCardConfig extends LovelaceCardConfig {
}
export interface ErrorCardConfig extends LovelaceCardConfig {
error: string;
origConfig: LovelaceCardConfig;
error?: string;
origConfig?: LovelaceCardConfig;
severity?: "warning" | "error";
}
export interface SeverityConfig {

2
src/panels/lovelace/components/hui-generic-entity-row.ts
View File

@ -46,7 +46,7 @@ export class HuiGenericEntityRow extends LitElement {
if (!stateObj) {
return html`
<hui-warning>
<hui-warning .hass=${this.hass}>
${createEntityNotFoundWarning(this.hass, this.config.entity)}
</hui-warning>
`;

16
src/panels/lovelace/components/hui-warning.ts
View File

@ -1,24 +1,28 @@
import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";
import type { TemplateResult } from "lit";
import { html, LitElement } from "lit";
import { customElement } from "lit/decorators";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-alert";
import type { HomeAssistant } from "../../../types";
import "../cards/hui-error-card";
export const createEntityNotFoundWarning = (
hass: HomeAssistant,
entityId: string
// left for backwards compatibility for custom cards
_entityId: string
) =>
hass.config.state !== STATE_NOT_RUNNING
? hass.localize("ui.panel.lovelace.warning.entity_not_found", {
entity: entityId || "[empty]",
})
? hass.localize("ui.card.common.entity_not_found")
: hass.localize("ui.panel.lovelace.warning.starting");
@customElement("hui-warning")
export class HuiWarning extends LitElement {
@property({ attribute: false }) public hass?: HomeAssistant;
protected render(): TemplateResult {
return html`<ha-alert alert-type="warning"><slot></slot></ha-alert> `;
return html`<hui-error-card .hass=${this.hass} severity="warning"
><slot></slot
></hui-error-card>`;
}
}

20
src/panels/lovelace/create-element/create-element-base.ts
View File

@ -16,7 +16,10 @@ import type { ErrorCardConfig } from "../cards/types";
import type { LovelaceElement, LovelaceElementConfig } from "../elements/types";
import type { LovelaceRow, LovelaceRowConfig } from "../entity-rows/types";
import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
import type { LovelaceHeadingBadgeConfig } from "../heading-badges/types";
import type {
ErrorBadgeConfig as ErrorHeadingBadgeConfig,
LovelaceHeadingBadgeConfig,
} from "../heading-badges/types";
import type {
LovelaceBadge,
LovelaceBadgeConstructor,
@ -31,6 +34,7 @@ import type {
LovelaceHeadingBadgeConstructor,
LovelaceRowConstructor,
} from "../types";
import type { ErrorBadgeConfig } from "../badges/types";
const TIMEOUT = 2000;
@ -96,7 +100,7 @@ export const createErrorCardElement = (config: ErrorCardConfig) => {
return el;
};
export const createErrorBadgeElement = (config: ErrorCardConfig) => {
export const createErrorBadgeElement = (config: ErrorBadgeConfig) => {
const el = document.createElement("hui-error-badge");
if (customElements.get("hui-error-badge")) {
el.setConfig(config);
@ -110,7 +114,9 @@ export const createErrorBadgeElement = (config: ErrorCardConfig) => {
return el;
};
export const createErrorHeadingBadgeElement = (config: ErrorCardConfig) => {
export const createErrorHeadingBadgeElement = (
config: ErrorHeadingBadgeConfig
) => {
const el = document.createElement("hui-error-heading-badge");
if (customElements.get("hui-error-heading-badge")) {
el.setConfig(config);
@ -124,12 +130,6 @@ export const createErrorHeadingBadgeElement = (config: ErrorCardConfig) => {
return el;
};
export const createErrorCardConfig = (error, origConfig) => ({
type: "error",
error,
origConfig,
});
export const createErrorBadgeConfig = (error, origConfig) => ({
type: "error",
error,
@ -167,7 +167,7 @@ const _createErrorElement = <T extends keyof CreateElementConfigTypes>(
createErrorHeadingBadgeConfig(error, config)
);
}
return createErrorCardElement(createErrorCardConfig(error, config));
return createErrorCardElement({ type: "error" });
};
const _customCreate = <T extends keyof CreateElementConfigTypes>(

70
src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts
View File

@ -1,5 +1,4 @@
import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
@ -22,8 +21,8 @@ import { supportsAlarmModesCardFeature } from "../../card-features/hui-alarm-mod
import { supportsClimateFanModesCardFeature } from "../../card-features/hui-climate-fan-modes-card-feature";
import { supportsClimateHvacModesCardFeature } from "../../card-features/hui-climate-hvac-modes-card-feature";
import { supportsClimatePresetModesCardFeature } from "../../card-features/hui-climate-preset-modes-card-feature";
import { supportsClimateSwingModesCardFeature } from "../../card-features/hui-climate-swing-modes-card-feature";
import { supportsClimateSwingHorizontalModesCardFeature } from "../../card-features/hui-climate-swing-horizontal-modes-card-feature";
import { supportsClimateSwingModesCardFeature } from "../../card-features/hui-climate-swing-modes-card-feature";
import { supportsCounterActionsCardFeature } from "../../card-features/hui-counter-actions-card-feature";
import { supportsCoverOpenCloseCardFeature } from "../../card-features/hui-cover-open-close-card-feature";
import { supportsCoverPositionCardFeature } from "../../card-features/hui-cover-position-card-feature";
@ -47,11 +46,18 @@ import { supportsToggleCardFeature } from "../../card-features/hui-toggle-card-f
import { supportsUpdateActionsCardFeature } from "../../card-features/hui-update-actions-card-feature";
import { supportsVacuumCommandsCardFeature } from "../../card-features/hui-vacuum-commands-card-feature";
import { supportsWaterHeaterOperationModesCardFeature } from "../../card-features/hui-water-heater-operation-modes-card-feature";
import type { LovelaceCardFeatureConfig } from "../../card-features/types";
import type {
LovelaceCardFeatureConfig,
LovelaceCardFeatureContext,
} from "../../card-features/types";
import { getCardFeatureElementClass } from "../../create-element/create-card-feature-element";
export type FeatureType = LovelaceCardFeatureConfig["type"];
type SupportsFeature = (stateObj: HassEntity) => boolean;
type SupportsFeature = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext
) => boolean;
const UI_FEATURE_TYPES = [
"alarm-modes",
@ -152,7 +158,8 @@ customCardFeatures.forEach((feature) => {
});
export const getSupportedFeaturesType = (
stateObj: HassEntity,
hass: HomeAssistant,
context: LovelaceCardFeatureContext,
featuresTypes?: string[]
) => {
const filteredFeaturesTypes = UI_FEATURE_TYPES.filter(
@ -164,23 +171,41 @@ export const getSupportedFeaturesType = (
);
return filteredFeaturesTypes
.concat(customFeaturesTypes)
.filter((type) => supportsFeaturesType(stateObj, type));
.filter((type) => supportsFeaturesType(hass, context, type));
};
export const supportsFeaturesType = (stateObj: HassEntity, type: string) => {
export const supportsFeaturesType = (
hass: HomeAssistant,
context: LovelaceCardFeatureContext,
type: string
) => {
if (isCustomType(type)) {
const customType = stripCustomPrefix(type);
const customFeatureEntry = CUSTOM_FEATURE_ENTRIES[customType];
if (!customFeatureEntry?.supported) return true;
if (!customFeatureEntry) {
return false;
}
try {
return customFeatureEntry.supported(stateObj);
if (customFeatureEntry.isSupported) {
return customFeatureEntry.isSupported(hass, context);
}
// Fallback to the old supported method
if (customFeatureEntry.supported) {
const stateObj = context.entity_id
? hass.states[context.entity_id]
: undefined;
if (!stateObj) return false;
return customFeatureEntry.supported(stateObj);
}
return true;
} catch {
return false;
}
}
const supportsFeature = SUPPORTS_FEATURE_TYPES[type];
return !supportsFeature || supportsFeature(stateObj);
return !supportsFeature || supportsFeature(hass, context);
};
declare global {
@ -195,7 +220,7 @@ declare global {
export class HuiCardFeaturesEditor extends LitElement {
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public stateObj?: HassEntity;
@property({ attribute: false }) public context?: LovelaceCardFeatureContext;
@property({ attribute: false })
public features?: LovelaceCardFeatureConfig[];
@ -209,13 +234,17 @@ export class HuiCardFeaturesEditor extends LitElement {
private _featuresKeys = new WeakMap<LovelaceCardFeatureConfig, string>();
private _supportsFeatureType(type: string): boolean {
if (!this.stateObj) return false;
return supportsFeaturesType(this.stateObj, type);
if (!this.hass || !this.context) return false;
return supportsFeaturesType(this.hass, this.context, type);
}
private _getSupportedFeaturesType() {
if (!this.stateObj) return [];
return getSupportedFeaturesType(this.stateObj, this.featuresTypes);
if (!this.hass || !this.context) return [];
return getSupportedFeaturesType(
this.hass,
this.context,
this.featuresTypes
);
}
private _isFeatureTypeEditable(type: string) {
@ -288,7 +317,7 @@ export class HuiCardFeaturesEditor extends LitElement {
<div class="feature-content">
<div>
<span> ${this._getFeatureTypeLabel(type)} </span>
${this.stateObj && !supported
${this.context && !supported
? html`
<span class="secondary">
${this.hass!.localize(
@ -379,7 +408,14 @@ export class HuiCardFeaturesEditor extends LitElement {
let newFeature: LovelaceCardFeatureConfig;
if (elClass && elClass.getStubConfig) {
newFeature = await elClass.getStubConfig(this.hass!, this.stateObj);
try {
newFeature = await elClass.getStubConfig(this.hass!, this.context!);
} catch (_err) {
const stateObj = this.context!.entity_id
? this.hass!.states[this.context!.entity_id]
: undefined;
newFeature = await elClass.getStubConfig(this.hass!, stateObj);
}
} else {
newFeature = { type: value } as LovelaceCardFeatureConfig;
}

13
src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
View File

@ -1,6 +1,7 @@
import { mdiListBox } from "@mdi/js";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import {
any,
array,
@ -85,13 +86,19 @@ export class HuiHumidifierCardEditor
this._config = config;
}
private _featureContext = memoizeOne(
(entityId?: string): LovelaceCardFeatureContext => ({
entity_id: entityId,
})
);
protected render() {
if (!this.hass || !this._config) {
return nothing;
}
const entityId = this._config!.entity;
const stateObj = entityId ? this.hass!.states[entityId] : undefined;
const entityId = this._config.entity;
const featureContext = this._featureContext(entityId);
return html`
<ha-form
@ -111,7 +118,7 @@ export class HuiHumidifierCardEditor
<div class="content">
<hui-card-features-editor
.hass=${this.hass}
.stateObj=${stateObj}
.context=${featureContext}
.featuresTypes=${COMPATIBLE_FEATURES_TYPES}
.features=${this._config!.features ?? []}
@features-changed=${this._featuresChanged}

13
src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
View File

@ -1,6 +1,7 @@
import { mdiListBox } from "@mdi/js";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import {
any,
array,
@ -84,13 +85,19 @@ export class HuiThermostatCardEditor
this._config = config;
}
private _featureContext = memoizeOne(
(entityId?: string): LovelaceCardFeatureContext => ({
entity_id: entityId,
})
);
protected render() {
if (!this.hass || !this._config) {
return nothing;
}
const entityId = this._config!.entity;
const stateObj = entityId ? this.hass!.states[entityId] : undefined;
const entityId = this._config.entity;
const featureContext = this._featureContext(entityId);
return html`
<ha-form
@ -110,7 +117,7 @@ export class HuiThermostatCardEditor
<div class="content">
<hui-card-features-editor
.hass=${this.hass}
.stateObj=${stateObj}
.context=${featureContext}
.featuresTypes=${COMPATIBLE_FEATURES_TYPES}
.features=${this._config!.features ?? []}
@features-changed=${this._featuresChanged}

22
src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts
View File

@ -1,5 +1,4 @@
import { mdiGestureTap, mdiListBox, mdiTextShort } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -75,6 +74,12 @@ export class HuiTileCardEditor
this._config = config;
}
private _featureContext = memoizeOne(
(entityId?: string): LovelaceCardFeatureContext => ({
entity_id: entityId,
})
);
private _schema = memoizeOne(
(
localize: LocalizeFunc,
@ -239,7 +244,8 @@ export class HuiTileCardEditor
);
private _hasCompatibleFeatures = memoizeOne(
(stateObj: HassEntity) => getSupportedFeaturesType(stateObj).length > 0
(context: LovelaceCardFeatureContext) =>
getSupportedFeaturesType(this.hass!, context).length > 0
);
protected render() {
@ -248,7 +254,6 @@ export class HuiTileCardEditor
}
const entityId = this._config!.entity;
const stateObj = entityId ? this.hass!.states[entityId] : undefined;
const schema = this._schema(
this.hass.localize,
@ -271,8 +276,8 @@ export class HuiTileCardEditor
data.features_position = "bottom";
}
const hasCompatibleFeatures =
(stateObj && this._hasCompatibleFeatures(stateObj)) || false;
const featureContext = this._featureContext(entityId);
const hasCompatibleFeatures = this._hasCompatibleFeatures(featureContext);
return html`
<ha-form
@ -306,7 +311,7 @@ export class HuiTileCardEditor
: nothing}
<hui-card-features-editor
.hass=${this.hass}
.stateObj=${stateObj}
.context=${featureContext}
.features=${this._config!.features ?? []}
@features-changed=${this._featuresChanged}
@edit-detail-element=${this._editDetailElement}
@ -368,13 +373,12 @@ export class HuiTileCardEditor
private _editDetailElement(ev: HASSDomEvent<EditDetailElementEvent>): void {
const index = ev.detail.subElementConfig.index;
const config = this._config!.features![index!];
const featureContext = this._featureContext(this._config!.entity);
fireEvent(this, "edit-sub-element", {
config: config,
saveConfig: (newConfig) => this._updateFeature(index!, newConfig),
context: {
entity_id: this._config!.entity,
},
context: featureContext,
type: "feature",
} as EditSubElementEvent<
LovelaceCardFeatureConfig,

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