diff --git a/src/panels/lovelace/editor/config-elements/elements/hui-image-element-editor.ts b/src/panels/lovelace/editor/config-elements/elements/hui-image-element-editor.ts
index 092f26456e..3533604437 100644
--- a/src/panels/lovelace/editor/config-elements/elements/hui-image-element-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/elements/hui-image-element-editor.ts
@@ -1,7 +1,9 @@
+import memoizeOne from "memoize-one";
import { mdiGestureTap } from "@mdi/js";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { any, assert, literal, object, optional, string } from "superstruct";
+import type { LocalizeFunc } from "../../../../../common/translations/localize";
import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-form/ha-form";
import type { SchemaUnion } from "../../../../../components/ha-form/types";
@@ -27,61 +29,6 @@ const imageElementConfigStruct = object({
aspect_ratio: optional(string()),
});
-const SCHEMA = [
- { name: "entity", selector: { entity: {} } },
- { name: "title", selector: { text: {} } },
- {
- name: "interactions",
- type: "expandable",
- flatten: true,
- iconPath: mdiGestureTap,
- schema: [
- {
- name: "tap_action",
- selector: {
- ui_action: {
- default_action: "more-info",
- },
- },
- },
- {
- name: "hold_action",
- selector: {
- ui_action: {
- default_action: "more-info",
- },
- },
- },
- {
- name: "",
- type: "optional_actions",
- flatten: true,
- schema: [
- {
- name: "double_tap_action",
- selector: {
- ui_action: {
- default_action: "none",
- },
- },
- },
- ],
- },
- ],
- },
- { name: "image", selector: { image: {} } },
- { name: "camera_image", selector: { entity: { domain: "camera" } } },
- {
- name: "camera_view",
- selector: { select: { options: ["auto", "live"] } },
- },
- { name: "state_image", selector: { object: {} } },
- { name: "filter", selector: { text: {} } },
- { name: "state_filter", selector: { object: {} } },
- { name: "aspect_ratio", selector: { text: {} } },
- { name: "style", selector: { object: {} } },
-] as const;
-
@customElement("hui-image-element-editor")
export class HuiImageElementEditor
extends LitElement
@@ -96,6 +43,74 @@ export class HuiImageElementEditor
this._config = config;
}
+ private _schema = memoizeOne(
+ (localize: LocalizeFunc) =>
+ [
+ { name: "entity", selector: { entity: {} } },
+ { name: "title", selector: { text: {} } },
+ {
+ name: "interactions",
+ type: "expandable",
+ flatten: true,
+ iconPath: mdiGestureTap,
+ schema: [
+ {
+ name: "tap_action",
+ selector: {
+ ui_action: {
+ default_action: "more-info",
+ },
+ },
+ },
+ {
+ name: "hold_action",
+ selector: {
+ ui_action: {
+ default_action: "more-info",
+ },
+ },
+ },
+ {
+ name: "",
+ type: "optional_actions",
+ flatten: true,
+ schema: [
+ {
+ name: "double_tap_action",
+ selector: {
+ ui_action: {
+ default_action: "none",
+ },
+ },
+ },
+ ],
+ },
+ ],
+ },
+ { name: "image", selector: { image: {} } },
+ { name: "camera_image", selector: { entity: { domain: "camera" } } },
+ {
+ name: "camera_view",
+ selector: {
+ select: {
+ options: ["auto", "live"].map((value) => ({
+ value,
+ label: localize(
+ `ui.panel.lovelace.editor.card.generic.camera_view_options.${value}`
+ ),
+ })),
+ mode: "dropdown",
+ },
+ },
+ },
+ { name: "state_image", selector: { object: {} } },
+ { name: "filter", selector: { text: {} } },
+ { name: "state_filter", selector: { object: {} } },
+ { name: "aspect_ratio", selector: { text: {} } },
+ { name: "style", selector: { object: {} } },
+ ] as const
+ );
+
protected render() {
if (!this.hass || !this._config) {
return nothing;
@@ -105,7 +120,7 @@ export class HuiImageElementEditor
@@ -116,7 +131,9 @@ export class HuiImageElementEditor
fireEvent(this, "config-changed", { config: ev.detail.value });
}
- private _computeLabelCallback = (schema: SchemaUnion) =>
+ private _computeLabelCallback = (
+ schema: SchemaUnion>
+ ) =>
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
diff --git a/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts
index d73fe9ecd2..7248d9fdc3 100644
--- a/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts
@@ -25,6 +25,7 @@ import { computeDomain } from "../../../../common/entity/compute_domain";
import { caseInsensitiveStringCompare } from "../../../../common/string/compare";
import type { SelectOption } from "../../../../data/selector";
import { getSensorNumericDeviceClasses } from "../../../../data/sensor";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@@ -53,6 +54,7 @@ export class HuiAreaCardEditor
private _schema = memoizeOne(
(
+ localize: LocalizeFunc,
showCamera: boolean,
binaryClasses: SelectOption[],
sensorClasses: SelectOption[]
@@ -64,7 +66,17 @@ export class HuiAreaCardEditor
? ([
{
name: "camera_view",
- selector: { select: { options: ["auto", "live"] } },
+ selector: {
+ select: {
+ options: ["auto", "live"].map((value) => ({
+ value,
+ label: localize(
+ `ui.panel.lovelace.editor.card.generic.camera_view_options.${value}`
+ ),
+ })),
+ mode: "dropdown",
+ },
+ },
},
] as const)
: []),
@@ -212,6 +224,7 @@ export class HuiAreaCardEditor
);
const schema = this._schema(
+ this.hass.localize,
this._config.show_camera || false,
binarySelectOptions,
sensorSelectOptions
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts
index 6e1f761f30..7167e6c02e 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-elements-card-editor.ts
@@ -1,3 +1,4 @@
+import memoizeOne from "memoize-one";
import type { CSSResultGroup } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@@ -11,7 +12,6 @@ import {
string,
type,
} from "superstruct";
-import memoizeOne from "memoize-one";
import type { HASSDomEvent } from "../../../../common/dom/fire_event";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-card";
@@ -84,7 +84,17 @@ export class HuiPictureElementsCardEditor
},
{
name: "camera_view",
- selector: { select: { options: ["auto", "live"] } },
+ selector: {
+ select: {
+ options: ["auto", "live"].map((value) => ({
+ value,
+ label: localize(
+ `ui.panel.lovelace.editor.card.generic.camera_view_options.${value}`
+ ),
+ })),
+ mode: "dropdown",
+ },
+ },
},
{ name: "theme", selector: { theme: {} } },
{ name: "state_filter", selector: { object: {} } },
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
index 5fbd83db4e..c827a48ed3 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
@@ -1,8 +1,8 @@
+import memoizeOne from "memoize-one";
import { mdiGestureTap } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
import {
assert,
assign,
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
index 53cf5fd8b0..3afa9250a2 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
@@ -173,13 +173,11 @@ export class HuiPictureGlanceCardEditor
const data = { camera_view: "auto", fit_mode: "cover", ...this._config };
- const schema = this._schema(this.hass.localize);
-
return html`