mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
Improve card features editor (#22023)
* Move expansion panel outside of feature component * Cache main form and feature form
This commit is contained in:
Paul Bottein
GitHub
parent
5920efa2b2
commit
7de5c46f14
@ -34,4 +34,21 @@ export const configElementStyle = css`
|
||||
margin-top: 8px;
|
||||
display: block;
|
||||
}
|
||||
ha-expansion-panel {
|
||||
display: block;
|
||||
--expansion-panel-content-padding: 0;
|
||||
border-radius: 6px;
|
||||
--ha-card-border-radius: 6px;
|
||||
}
|
||||
ha-expansion-panel .content {
|
||||
padding: 12px;
|
||||
}
|
||||
ha-expansion-panel > * {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
ha-expansion-panel ha-svg-icon {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import { mdiDelete, mdiDrag, mdiListBox, mdiPencil, mdiPlus } from "@mdi/js";
|
||||
import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { repeat } from "lit/directives/repeat";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { stopPropagation } from "../../../../common/dom/stop_propagation";
|
||||
import "../../../../components/entity/ha-entity-picker";
|
||||
import "../../../../components/ha-button";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import "../../../../components/ha-list-item";
|
||||
@ -236,119 +235,108 @@ export class HuiCardFeaturesEditor extends LitElement {
|
||||
);
|
||||
|
||||
return html`
|
||||
<ha-expansion-panel outlined>
|
||||
<h3 slot="header">
|
||||
<ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
|
||||
${this.hass!.localize("ui.panel.lovelace.editor.features.name")}
|
||||
</h3>
|
||||
<div class="content">
|
||||
${supportedFeaturesType.length === 0 && this.features.length === 0
|
||||
? html`
|
||||
<ha-alert type="info">
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.features.no_compatible_available"
|
||||
)}
|
||||
</ha-alert>
|
||||
`
|
||||
: nothing}
|
||||
<ha-sortable
|
||||
handle-selector=".handle"
|
||||
@item-moved=${this._featureMoved}
|
||||
>
|
||||
<div class="features">
|
||||
${repeat(
|
||||
this.features,
|
||||
(featureConf) => this._getKey(featureConf),
|
||||
(featureConf, index) => {
|
||||
const type = featureConf.type;
|
||||
const supported = this._supportsFeatureType(type);
|
||||
const editable = this._isFeatureTypeEditable(type);
|
||||
return html`
|
||||
<div class="feature">
|
||||
<div class="handle">
|
||||
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
<div>
|
||||
<span> ${this._getFeatureTypeLabel(type)} </span>
|
||||
${this.stateObj && !supported
|
||||
? html`
|
||||
<span class="secondary">
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.features.not_compatible"
|
||||
)}
|
||||
</span>
|
||||
`
|
||||
: nothing}
|
||||
</div>
|
||||
</div>
|
||||
${editable
|
||||
${supportedFeaturesType.length === 0 && this.features.length === 0
|
||||
? html`
|
||||
<ha-alert type="info">
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.features.no_compatible_available"
|
||||
)}
|
||||
</ha-alert>
|
||||
`
|
||||
: nothing}
|
||||
<ha-sortable handle-selector=".handle" @item-moved=${this._featureMoved}>
|
||||
<div class="features">
|
||||
${repeat(
|
||||
this.features,
|
||||
(featureConf) => this._getKey(featureConf),
|
||||
(featureConf, index) => {
|
||||
const type = featureConf.type;
|
||||
const supported = this._supportsFeatureType(type);
|
||||
const editable = this._isFeatureTypeEditable(type);
|
||||
return html`
|
||||
<div class="feature">
|
||||
<div class="handle">
|
||||
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
|
||||
</div>
|
||||
<div class="feature-content">
|
||||
<div>
|
||||
<span> ${this._getFeatureTypeLabel(type)} </span>
|
||||
${this.stateObj && !supported
|
||||
? html`
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.features.edit`
|
||||
<span class="secondary">
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.features.not_compatible"
|
||||
)}
|
||||
.path=${mdiPencil}
|
||||
class="edit-icon"
|
||||
.index=${index}
|
||||
@click=${this._editFeature}
|
||||
.disabled=${!supported}
|
||||
></ha-icon-button>
|
||||
</span>
|
||||
`
|
||||
: nothing}
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.features.remove`
|
||||
)}
|
||||
.path=${mdiDelete}
|
||||
class="remove-icon"
|
||||
.index=${index}
|
||||
@click=${this._removeFeature}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</ha-sortable>
|
||||
${supportedFeaturesType.length > 0
|
||||
? html`
|
||||
<ha-button-menu
|
||||
fixed
|
||||
@action=${this._addFeature}
|
||||
@closed=${stopPropagation}
|
||||
>
|
||||
<ha-button
|
||||
slot="trigger"
|
||||
outlined
|
||||
.label=${this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.features.add`
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
|
||||
</ha-button>
|
||||
${types.map(
|
||||
(type) => html`
|
||||
<ha-list-item .value=${type}>
|
||||
${this._getFeatureTypeLabel(type)}
|
||||
</ha-list-item>
|
||||
`
|
||||
)}
|
||||
${types.length > 0 && customTypes.length > 0
|
||||
? html`<li divider role="separator"></li>`
|
||||
</div>
|
||||
${editable
|
||||
? html`
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.features.edit`
|
||||
)}
|
||||
.path=${mdiPencil}
|
||||
class="edit-icon"
|
||||
.index=${index}
|
||||
@click=${this._editFeature}
|
||||
.disabled=${!supported}
|
||||
></ha-icon-button>
|
||||
`
|
||||
: nothing}
|
||||
${customTypes.map(
|
||||
(type) => html`
|
||||
<ha-list-item .value=${type}>
|
||||
${this._getFeatureTypeLabel(type)}
|
||||
</ha-list-item>
|
||||
`
|
||||
)}
|
||||
</ha-button-menu>
|
||||
`
|
||||
: nothing}
|
||||
<ha-icon-button
|
||||
.label=${this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.features.remove`
|
||||
)}
|
||||
.path=${mdiDelete}
|
||||
class="remove-icon"
|
||||
.index=${index}
|
||||
@click=${this._removeFeature}
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</ha-expansion-panel>
|
||||
</ha-sortable>
|
||||
${supportedFeaturesType.length > 0
|
||||
? html`
|
||||
<ha-button-menu
|
||||
fixed
|
||||
@action=${this._addFeature}
|
||||
@closed=${stopPropagation}
|
||||
>
|
||||
<ha-button
|
||||
slot="trigger"
|
||||
outlined
|
||||
.label=${this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.features.add`
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
|
||||
</ha-button>
|
||||
${types.map(
|
||||
(type) => html`
|
||||
<ha-list-item .value=${type}>
|
||||
${this._getFeatureTypeLabel(type)}
|
||||
</ha-list-item>
|
||||
`
|
||||
)}
|
||||
${types.length > 0 && customTypes.length > 0
|
||||
? html`<li divider role="separator"></li>`
|
||||
: nothing}
|
||||
${customTypes.map(
|
||||
(type) => html`
|
||||
<ha-list-item .value=${type}>
|
||||
${this._getFeatureTypeLabel(type)}
|
||||
</ha-list-item>
|
||||
`
|
||||
)}
|
||||
</ha-button-menu>
|
||||
`
|
||||
: nothing}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -409,23 +397,6 @@ export class HuiCardFeaturesEditor extends LitElement {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
padding: 12px;
|
||||
}
|
||||
ha-expansion-panel {
|
||||
display: block;
|
||||
--expansion-panel-content-padding: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
ha-svg-icon,
|
||||
ha-icon {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
ha-button-menu {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { mdiListBox } from "@mdi/js";
|
||||
import { LitElement, css, html, nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { cache } from "lit/directives/cache";
|
||||
import memoizeOne from "memoize-one";
|
||||
import {
|
||||
any,
|
||||
@ -12,11 +14,13 @@ import {
|
||||
string,
|
||||
} from "superstruct";
|
||||
import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
|
||||
import "../../../../components/ha-expansion-panel";
|
||||
import "../../../../components/ha-form/ha-form";
|
||||
import type {
|
||||
HaFormSchema,
|
||||
SchemaUnion,
|
||||
} from "../../../../components/ha-form/types";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import {
|
||||
LovelaceCardFeatureConfig,
|
||||
@ -27,6 +31,7 @@ import type { LovelaceCardEditor } from "../../types";
|
||||
import "../hui-sub-element-editor";
|
||||
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
|
||||
import { EditSubElementEvent, SubElementEditorConfig } from "../types";
|
||||
import { configElementStyle } from "./config-elements-style";
|
||||
import "./hui-card-features-editor";
|
||||
import type { FeatureType } from "./hui-card-features-editor";
|
||||
|
||||
@ -93,22 +98,30 @@ export class HuiHumidifierCardEditor
|
||||
return nothing;
|
||||
}
|
||||
|
||||
const stateObj = this._config.entity
|
||||
? this.hass.states[this._config.entity]
|
||||
: undefined;
|
||||
return cache(
|
||||
this._subElementEditorConfig
|
||||
? this._renderFeatureForm()
|
||||
: this._renderForm()
|
||||
);
|
||||
}
|
||||
|
||||
if (this._subElementEditorConfig) {
|
||||
return html`
|
||||
<hui-sub-element-editor
|
||||
.hass=${this.hass}
|
||||
.config=${this._subElementEditorConfig}
|
||||
.context=${this._context(this._config.entity)}
|
||||
@go-back=${this._goBack}
|
||||
@config-changed=${this.subElementChanged}
|
||||
>
|
||||
</hui-sub-element-editor>
|
||||
`;
|
||||
}
|
||||
private _renderFeatureForm() {
|
||||
const entityId = this._config!.entity;
|
||||
return html`
|
||||
<hui-sub-element-editor
|
||||
.hass=${this.hass}
|
||||
.config=${this._subElementEditorConfig}
|
||||
.context=${this._context(entityId)}
|
||||
@go-back=${this._goBack}
|
||||
@config-changed=${this.subElementChanged}
|
||||
>
|
||||
</hui-sub-element-editor>
|
||||
`;
|
||||
}
|
||||
|
||||
private _renderForm() {
|
||||
const entityId = this._config!.entity;
|
||||
const stateObj = entityId ? this.hass!.states[entityId] : undefined;
|
||||
|
||||
return html`
|
||||
<ha-form
|
||||
@ -118,14 +131,24 @@ export class HuiHumidifierCardEditor
|
||||
.computeLabel=${this._computeLabelCallback}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-form>
|
||||
<hui-card-features-editor
|
||||
.hass=${this.hass}
|
||||
.stateObj=${stateObj}
|
||||
.featuresTypes=${COMPATIBLE_FEATURES_TYPES}
|
||||
.features=${this._config!.features ?? []}
|
||||
@features-changed=${this._featuresChanged}
|
||||
@edit-detail-element=${this._editDetailElement}
|
||||
></hui-card-features-editor>
|
||||
<ha-expansion-panel outlined>
|
||||
<h3 slot="header">
|
||||
<ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.features"
|
||||
)}
|
||||
</h3>
|
||||
<div class="content">
|
||||
<hui-card-features-editor
|
||||
.hass=${this.hass}
|
||||
.stateObj=${stateObj}
|
||||
.featuresTypes=${COMPATIBLE_FEATURES_TYPES}
|
||||
.features=${this._config!.features ?? []}
|
||||
@features-changed=${this._featuresChanged}
|
||||
@edit-detail-element=${this._editDetailElement}
|
||||
></hui-card-features-editor>
|
||||
</div>
|
||||
</ha-expansion-panel>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -202,12 +225,15 @@ export class HuiHumidifierCardEditor
|
||||
};
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
ha-form {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
`;
|
||||
return [
|
||||
configElementStyle,
|
||||
css`
|
||||
ha-form {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { mdiListBox } from "@mdi/js";
|
||||
import { LitElement, css, html, nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { cache } from "lit/directives/cache";
|
||||
import memoizeOne from "memoize-one";
|
||||
import {
|
||||
any,
|
||||
@ -12,11 +14,13 @@ import {
|
||||
string,
|
||||
} from "superstruct";
|
||||
import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
|
||||
import "../../../../components/ha-expansion-panel";
|
||||
import "../../../../components/ha-form/ha-form";
|
||||
import type {
|
||||
HaFormSchema,
|
||||
SchemaUnion,
|
||||
} from "../../../../components/ha-form/types";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import {
|
||||
LovelaceCardFeatureConfig,
|
||||
@ -27,6 +31,7 @@ import type { LovelaceCardEditor } from "../../types";
|
||||
import "../hui-sub-element-editor";
|
||||
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
|
||||
import { EditSubElementEvent, SubElementEditorConfig } from "../types";
|
||||
import { configElementStyle } from "./config-elements-style";
|
||||
import "./hui-card-features-editor";
|
||||
import type { FeatureType } from "./hui-card-features-editor";
|
||||
|
||||
@ -91,22 +96,29 @@ export class HuiThermostatCardEditor
|
||||
return nothing;
|
||||
}
|
||||
|
||||
const stateObj = this._config.entity
|
||||
? this.hass.states[this._config.entity]
|
||||
: undefined;
|
||||
return cache(
|
||||
this._subElementEditorConfig
|
||||
? this._renderFeatureForm()
|
||||
: this._renderForm()
|
||||
);
|
||||
}
|
||||
|
||||
if (this._subElementEditorConfig) {
|
||||
return html`
|
||||
<hui-sub-element-editor
|
||||
.hass=${this.hass}
|
||||
.config=${this._subElementEditorConfig}
|
||||
.context=${this._context(this._config.entity)}
|
||||
@go-back=${this._goBack}
|
||||
@config-changed=${this.subElementChanged}
|
||||
>
|
||||
</hui-sub-element-editor>
|
||||
`;
|
||||
}
|
||||
private _renderFeatureForm() {
|
||||
return html`
|
||||
<hui-sub-element-editor
|
||||
.hass=${this.hass}
|
||||
.config=${this._subElementEditorConfig}
|
||||
.context=${this._context(this._config!.entity)}
|
||||
@go-back=${this._goBack}
|
||||
@config-changed=${this.subElementChanged}
|
||||
>
|
||||
</hui-sub-element-editor>
|
||||
`;
|
||||
}
|
||||
|
||||
private _renderForm() {
|
||||
const entityId = this._config!.entity;
|
||||
const stateObj = entityId ? this.hass!.states[entityId] : undefined;
|
||||
|
||||
return html`
|
||||
<ha-form
|
||||
@ -116,14 +128,24 @@ export class HuiThermostatCardEditor
|
||||
.computeLabel=${this._computeLabelCallback}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-form>
|
||||
<hui-card-features-editor
|
||||
.hass=${this.hass}
|
||||
.stateObj=${stateObj}
|
||||
.featuresTypes=${COMPATIBLE_FEATURES_TYPES}
|
||||
.features=${this._config!.features ?? []}
|
||||
@features-changed=${this._featuresChanged}
|
||||
@edit-detail-element=${this._editDetailElement}
|
||||
></hui-card-features-editor>
|
||||
<ha-expansion-panel outlined>
|
||||
<h3 slot="header">
|
||||
<ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.features"
|
||||
)}
|
||||
</h3>
|
||||
<div class="content">
|
||||
<hui-card-features-editor
|
||||
.hass=${this.hass}
|
||||
.stateObj=${stateObj}
|
||||
.featuresTypes=${COMPATIBLE_FEATURES_TYPES}
|
||||
.features=${this._config!.features ?? []}
|
||||
@features-changed=${this._featuresChanged}
|
||||
@edit-detail-element=${this._editDetailElement}
|
||||
></hui-card-features-editor>
|
||||
</div>
|
||||
</ha-expansion-panel>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -200,12 +222,15 @@ export class HuiThermostatCardEditor
|
||||
};
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
ha-form {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
`;
|
||||
return [
|
||||
configElementStyle,
|
||||
css`
|
||||
ha-form {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { mdiGestureTap, mdiPalette } from "@mdi/js";
|
||||
import { mdiGestureTap, mdiListBox, mdiPalette } from "@mdi/js";
|
||||
import { LitElement, css, html, nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { cache } from "lit/directives/cache";
|
||||
import memoizeOne from "memoize-one";
|
||||
import {
|
||||
any,
|
||||
@ -14,11 +15,13 @@ import {
|
||||
union,
|
||||
} from "superstruct";
|
||||
import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
|
||||
import "../../../../components/ha-expansion-panel";
|
||||
import "../../../../components/ha-form/ha-form";
|
||||
import type {
|
||||
HaFormSchema,
|
||||
SchemaUnion,
|
||||
} from "../../../../components/ha-form/types";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import {
|
||||
LovelaceCardFeatureConfig,
|
||||
@ -168,27 +171,31 @@ export class HuiTileCardEditor
|
||||
return nothing;
|
||||
}
|
||||
|
||||
const stateObj = this._config.entity
|
||||
? this.hass.states[this._config.entity]
|
||||
: undefined;
|
||||
|
||||
const schema = this._schema(
|
||||
this._config.entity,
|
||||
this._config.hide_state ?? false
|
||||
return cache(
|
||||
this._subElementEditorConfig
|
||||
? this._renderFeatureForm()
|
||||
: this._renderForm()
|
||||
);
|
||||
}
|
||||
|
||||
if (this._subElementEditorConfig) {
|
||||
return html`
|
||||
<hui-sub-element-editor
|
||||
.hass=${this.hass}
|
||||
.config=${this._subElementEditorConfig}
|
||||
.context=${this._context(this._config.entity)}
|
||||
@go-back=${this._goBack}
|
||||
@config-changed=${this.subElementChanged}
|
||||
>
|
||||
</hui-sub-element-editor>
|
||||
`;
|
||||
}
|
||||
private _renderFeatureForm() {
|
||||
return html`
|
||||
<hui-sub-element-editor
|
||||
.hass=${this.hass}
|
||||
.config=${this._subElementEditorConfig}
|
||||
.context=${this._context(this._config!.entity)}
|
||||
@go-back=${this._goBack}
|
||||
@config-changed=${this.subElementChanged}
|
||||
>
|
||||
</hui-sub-element-editor>
|
||||
`;
|
||||
}
|
||||
|
||||
private _renderForm() {
|
||||
const entityId = this._config!.entity;
|
||||
const stateObj = entityId ? this.hass!.states[entityId] : undefined;
|
||||
|
||||
const schema = this._schema(entityId, this._config!.hide_state ?? false);
|
||||
|
||||
const data = this._config;
|
||||
|
||||
@ -200,13 +207,23 @@ export class HuiTileCardEditor
|
||||
.computeLabel=${this._computeLabelCallback}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-form>
|
||||
<hui-card-features-editor
|
||||
.hass=${this.hass}
|
||||
.stateObj=${stateObj}
|
||||
.features=${this._config!.features ?? []}
|
||||
@features-changed=${this._featuresChanged}
|
||||
@edit-detail-element=${this._editDetailElement}
|
||||
></hui-card-features-editor>
|
||||
<ha-expansion-panel outlined>
|
||||
<h3 slot="header">
|
||||
<ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
|
||||
${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.features"
|
||||
)}
|
||||
</h3>
|
||||
<div class="content">
|
||||
<hui-card-features-editor
|
||||
.hass=${this.hass}
|
||||
.stateObj=${stateObj}
|
||||
.features=${this._config!.features ?? []}
|
||||
@features-changed=${this._featuresChanged}
|
||||
@edit-detail-element=${this._editDetailElement}
|
||||
></hui-card-features-editor>
|
||||
</div>
|
||||
</ha-expansion-panel>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -5989,7 +5989,8 @@
|
||||
"state_color": "Color icons based on state?",
|
||||
"suggested_cards": "Suggested cards",
|
||||
"other_cards": "Other cards",
|
||||
"custom_cards": "Custom cards"
|
||||
"custom_cards": "Custom cards",
|
||||
"features": "Features"
|
||||
},
|
||||
"map": {
|
||||
"name": "Map",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user