` ${t}="currentColor"`).replace(RegExp(`(fill|stroke)\\s*:\\s*${t}`, "gi"), (e, t) => `${t}:currentColor`);
}
async function Gi() {
return In.filter(Xi).map((e) => Zi(e, "orbit"));
}
async function Ki() {
let e = Array.isArray(window.ORBIT_ICON_FILES) ? window.ORBIT_ICON_FILES : [], t = await qi([
"/local/icons/manifest.json",
"/local/icons/orbit-icons.json",
"/local/icons/icons.json"
]), n = await Ji();
return [
...e,
...t,
...n
].filter(Xi).map((e) => Zi(e, "local"));
}
async function qi(e) {
for (let t of e) try {
let e = await fetch(t, { cache: "no-store" });
if (!e.ok) continue;
let n = await e.json(), r = Array.isArray(n) ? n : n.files;
if (Array.isArray(r)) return r.filter(Xi).map((e) => Zi(e));
} catch {}
return [];
}
async function Ji() {
try {
let e = await fetch("/local/icons/", { cache: "no-store" });
return e.ok ? [...(await e.text()).matchAll(/href=["']([^"']+)["']/gi)].map((e) => e[1]) : [];
} catch {
return [];
}
}
function Yi(e) {
return e ? (typeof e == "object" ? e.file : e).toString().split("?")[0].split("/").pop() : "";
}
function Xi(e) {
return Ei(Yi(e));
}
function Zi(e, t = "") {
let n = Yi(e);
return n ? {
file: n,
name: typeof e == "object" && e.name || n,
tags: Array.isArray(e?.tags) ? e.tags : [],
source: e?.source || t
} : null;
}
function Qi(e) {
if (!e || !Xi(e)) return null;
let t = Yi(e);
return t ? {
file: t,
name: t,
tags: [],
source: e?.toString().startsWith("orbit:") ? "orbit" : e?.toString().startsWith("local:") ? "local" : ""
} : null;
}
function $i(e) {
return e.source === "orbit" ? `orbit:${e.file}` : e.source === "local" ? `local:${e.file}` : e.file;
}
function ea(e) {
let t = /* @__PURE__ */ new Set();
return e.filter(Boolean).filter((e) => {
let n = `${e.source || ""}:${e.file}`;
return t.has(n) ? !1 : (t.add(n), !0);
}).sort((e, t) => (e.name || e.file).localeCompare(t.name || t.file));
}
//#endregion
//#region src/common/editor/helpers/inputs.js
function ta(e, t) {
return Array.isArray(t) ? na(e, t.map((t) => ta(e, t))) : e._t ? e._t(t) : t;
}
function na(e, t) {
return (e?.hass?.locale?.language || e?.hass?.language || "en").toLowerCase().startsWith("en") ? t.map((e, t) => t === 0 ? e : ra(e)).join(" ") : t.join(" ");
}
function ra(e = "") {
return e.replace(/^(\p{L})/u, (e) => e.toLocaleLowerCase());
}
function ia(e, t, n, r = {}) {
let i = r.externalLabel === !0, a = r.value ?? this._config?.[t] ?? "", o = r.onValueChanged || ((e) => this._handleConfigUpdate(t, e));
return E`
${i ? E`${ta(this, e)} ` : ""}
o(e.detail.value || "")}
>
`;
}
function aa(e, t, n = {}) {
let r = n.value ?? this._config?.[t] ?? "", i = n.hideLabel === !0, a = n.required !== !1, o = n.onValueChanged || ((e) => this._handleConfigUpdate(t, e));
return E`
o(e.detail.value || "")}
>
`;
}
function oa(e, t, n = {}) {
let r = n.value ?? this._config?.[t] ?? "", i = n.min ?? 0, a = n.step ?? 1, o = n.onValueChanged || ((e) => this._handleConfigUpdate(t, e));
return E`
o(e.detail.value)}
>
`;
}
//#endregion
//#region src/common/editor/helpers/config.js
function sa(e, t) {
let n = {
...e || {},
...t
};
return Object.keys(n).forEach((e) => {
n[e] === void 0 && delete n[e];
}), n;
}
function U(e, t = {}) {
let n = { ...t };
return e.forEach((e) => {
n[e] = void 0;
}), n;
}
function W(e, t = []) {
return U([e, ...t]);
}
function ca(e, t = []) {
return U([e, ...t.map((t) => `${e}${t}`)]);
}
//#endregion
//#region src/common/editor/helpers/labels.js
function G(e, t, n) {
return Array.isArray(t) ? la(e, t.map((t) => G(e, t, n))) : e._t ? e._t(t, n) : t;
}
function la(e, t) {
return (e?.hass?.locale?.language || e?.hass?.language || "en").toLowerCase().startsWith("en") ? t.map((e, t) => t === 0 ? e : ua(e)).join(" ") : t.join(" ");
}
function ua(e = "") {
return e.replace(/^(\p{L})/u, (e) => e.toLocaleLowerCase());
}
//#endregion
//#region src/common/editor/helpers/color-picker.js
function da(e, t, n) {
let r = this._config?.[t] || "";
return fa.call(this, e, t, r, (e) => this._handleConfigUpdate(t, e), n);
}
function fa(e, t, n, r, i, a = !0) {
Ea.call(this);
let o = !a && P(n) ? "" : n, s = ha.call(this, o, i), c = qa(o || s), l = this._colorPickerKey === t && this._colorPickerTab || c, u = !a && l === "template" ? qa(s) === "template" ? "theme" : qa(s) : l;
return E`
e.stopPropagation()}
>
{
this._colorPickerKey = t, this._colorPickerTab = "picker", this._themeColorPickerOpen = !1;
let e = o || s;
if (e && !Ja(e)) {
let t = this._getColorPickerValue(e);
t && r(t);
}
}}
>
{
this._colorPickerKey = t, this._colorPickerTab = "theme", this._themeColorPickerOpen = !1, this._themeColorSearch = "";
}}
>
${a ? E`
{
this._colorPickerKey = t, this._colorPickerTab = "template", this._themeColorPickerOpen = !1;
}}
>
` : ""}
${u === "template" ? ma.call(this, e, o, r) : u === "theme" ? E`
${_a.call(this, e, o, r, s, t)}
` : E`
${ga.call(this, e, o, r, s)}
`}
`;
}
function pa({ label: e = "Color", onLabel: t = ["Active", "Color"], offLabel: n = ["Inactive", "Color"], onKey: r, offKey: i, sourceKey: a, templateKey: o, legacySourceKey: s, legacyTemplateKey: c, config: l = this._config || {}, onUpdate: u = (e, t) => this._handleConfigUpdate(e, t), onPreviewValue: d, offPreviewValue: f, pickerPrefix: p = "" } = {}) {
let m = r?.replace(/(?:_on_color|_color_on)$/, "") || "color", h = a || `${m}_color_source`, g = o || `${m}_color`, _ = l[h] ?? (s ? l[s] : void 0), v = l[g] ?? (c ? l[c] : void 0), ee = _ === "template";
return E`
${ee ? E`
u(g, e.detail.value || "")}
>
` : E`
${fa.call(this, t, `${p}${r}`, l[r] || "", (e) => u(r, e), d, !1)}
${fa.call(this, n, `${p}${i}`, l[i] || "", (e) => u(i, e), f, !1)}
`}
n(e.detail.value || "")}
>
`;
}
function ha(e, t) {
return t || e || "theme";
}
function ga(e, t, n, r = t) {
let i = Ja(t) ? this._getColorPickerValue(t) : "", a = i || (Ja(t) ? this._getColorPickerValue(t) : this._getColorPickerValue(t || r)) || "#000000";
return E`
e.stopPropagation()}
>
${e ? E`
${G(this, e)}
` : ""}
${i.toUpperCase()}
` : E`
${e ? E`
${G(this, e)}
` : ""}
`}
${i ? E`
{
e.preventDefault(), e.stopPropagation(), n("");
}}
>
` : ""}
`;
}
function _a(e, t, n, r = t, i = "") {
let a = t || r, o = qa(a) === "theme" ? Aa(a) || "theme" : "", s = Ta.call(this), c = va.call(this, s, o);
return E`
e.stopPropagation()}
>
ba.call(this, e)}
.valueRenderer=${(e) => xa.call(this, c.find((t) => t.id === e))}
.notFoundLabel=${G(this, "No matching colors")}
.emptyLabel=${""}
.noSort=${!0}
@value-changed=${(e) => {
e.stopPropagation(), n(e.detail.value || "");
}}
>
`;
}
function va(e, t) {
return !t || e.some((e) => e.id === t) ? e : [...e, Oa.call(this, {
id: t,
source: "theme"
})];
}
function ya(e, t) {
this._themeColorItemGetters ||= /* @__PURE__ */ new Map();
let n = this._themeColorItemGetters.get(e);
return n ? n.items = t : (n = {
items: t,
getItems: () => n.items
}, this._themeColorItemGetters.set(e, n)), n.getItems;
}
function ba(e) {
return E`
${Sa.call(this, e)}
${e.primary}
${Ca.call(this, e)}
`;
}
function xa(e) {
return e ? E`
${Sa.call(this, e)}
${e.primary}
${Ca.call(this, e)}
` : "";
}
function Sa(e) {
return e.id === "theme" ? E`
T
` : e.isStandardFallback ? E`
S
` : "";
}
function wa() {
let e = [], t = /* @__PURE__ */ new Set();
for (let n of Ka) {
let r = Oa.call(this, n);
!r || t.has(r.id) || (t.add(r.id), e.push(r));
}
for (let n of ja.call(this)) {
let r = Oa.call(this, n);
!r || t.has(r.id) || (t.add(r.id), e.push(r));
}
return e;
}
function Ta() {
let e = Da.call(this);
if (this._themeColorItemsCache && this._themeColorItemsCacheKey === e) return this._themeColorItemsCache;
let t = wa.call(this);
return this._themeColorItemsCache = t, this._themeColorItemsCacheKey = e, t;
}
function Ea() {
let e = Da.call(this);
if (this._themeColorItemsCacheKey === e || this._themeColorWarmupScheduled === e) return;
this._themeColorWarmupScheduled = e;
let t = () => {
this._themeColorWarmupScheduled === e && (Ta.call(this), this._themeColorWarmupScheduled = "");
};
if (window.requestIdleCallback) {
window.requestIdleCallback(t, { timeout: 500 });
return;
}
window.setTimeout(t, 0);
}
function Da() {
return `${this?.hass?.locale?.language || this?.hass?.language || ""}|${this?.hass?.selectedTheme?.theme || this?.hass?.themes?.theme || ""}|${this?.hass?.themes?.darkMode ?? this?.hass?.selectedTheme?.dark ?? ""}|${Ma.call(this)}`;
}
function Oa(e) {
let t = ka(typeof e == "string" ? { id: e } : e), n = Ha(t.id), r = n && Ua(t.id), i = !r && (t.source === "theme" || Ba.call(this, t.id)), a = t.label ? G(this, t.label) : Wa.call(this, t.id);
return {
id: t.id,
primary: a,
secondary: n ? G(this, "Color") : G(this, "Theme"),
sorting_label: a,
isStandardFallback: r,
isThemeColor: i,
search_labels: {
color: t.id,
label: a,
source: r ? "standard" : i ? "theme" : "color"
}
};
}
function ka(e) {
return {
...e,
id: Aa(e.id),
label: e.label || null
};
}
function Aa(e) {
if (!e) return "";
let t = e.toString().trim().toLowerCase().replace(/[^a-z0-9-_]/g, ""), n = t.startsWith("color-") ? t.slice(6) : t;
return Ga[n] || n;
}
function ja() {
return Na.call(this).map((e) => Ia(e)).filter(La).map((e) => ({
id: e,
source: "theme"
})).sort((e, t) => Wa.call(this, e.id).localeCompare(Wa.call(this, t.id), this?.hass?.locale?.language || this?.hass?.language || void 0, { sensitivity: "base" }));
}
function Ma() {
return Pa.call(this).map(([e, t]) => `${e}:${t}`).join(",");
}
function Na() {
return Pa.call(this).map(([e]) => e).sort();
}
function Pa() {
let e = /* @__PURE__ */ new Set(), t = [], n = Fa.call(this);
for (let [r, i] of Object.entries(n)) {
let n = r.toLowerCase();
Ra(n, i) && (e.has(n) || (e.add(n), t.push([n, i])));
}
return t.sort(([e], [t]) => e.localeCompare(t));
}
function Fa() {
let e = this?.hass?.selectedTheme?.theme || this?.hass?.themes?.theme || "", t = e ? this?.hass?.themes?.themes?.[e] : null;
if (!t) return {};
let { modes: n, ...r } = t, i = this?.hass?.themes?.darkMode ?? this?.hass?.selectedTheme?.dark ?? !1 ? n?.dark : n?.light;
return {
...r,
...i || {}
};
}
function Ia(e) {
return e.startsWith("color-") ? e.slice(6) : e;
}
function La(e) {
return !!e && !/^\d+$/.test(e);
}
function Ra(e, t) {
return !e || !(e.startsWith("color-") || e.startsWith("google-") || e.endsWith("-color") || e.includes("-color-")) ? !1 : za(t);
}
function za(e) {
let t = e == null ? "" : e.toString().trim();
return t ? /^#[0-9a-f]{3,8}$/i.test(t) || /^(rgb|rgba|hsl|hsla)\(/i.test(t) || /^var\(\s*--[a-z0-9-_]*color[a-z0-9-_]*/i.test(t) || /^\d+\s*,\s*\d+\s*,\s*\d+/.test(t) : !1;
}
function Ba(e) {
let t = new Set(Na.call(this));
return Va(e).some((e) => t.has(e));
}
function Va(e) {
let t = Aa(e);
if (!t) return [];
let n = t.startsWith("color-") ? t : `color-${t}`;
return t.endsWith("-color") ? [t, n] : [n, t];
}
function Ha(e) {
return e === "theme" || e === "primary-color" || e === "accent-color" || Rt(e);
}
function Ua(e) {
return Rt(e) && !Bt(e);
}
function Wa(e) {
return e === "theme" ? G(this, "State color (default)") : e === "light" ? G(this, "State light color") : e === "primary-color" ? G(this, "Primary") : e === "primary-text-color" ? G(this, "Primary text color") : e === "card-background-color" ? G(this, "Card background") : e === "secondary-background-color" ? G(this, "Secondary background color") : e === "accent-color" ? G(this, "Accent") : e.replaceAll("-", " ").replace(/\b\w/g, (e) => e.toUpperCase());
}
var Ga = {
bluegrey: "blue-grey",
darkgrey: "dark-grey",
deeporange: "deep-orange",
deeppurple: "deep-purple",
lightblue: "light-blue",
lightgreen: "light-green",
lightgrey: "light-grey"
}, Ka = [
{
id: "theme",
label: "State color (default)"
},
{
id: "light",
label: "State light color"
},
"primary-color",
"card-background-color",
"accent-color",
"red",
"pink",
"purple",
"deep-purple",
"indigo",
"blue",
"light-blue",
"cyan",
"teal",
"green",
"light-green",
"lime",
"yellow",
"amber",
"orange",
"deep-orange",
"brown",
"light-grey",
"grey",
"dark-grey",
"blue-grey",
"black",
"white",
"disabled",
"state-icon-color",
"state-inactive-color",
"state-light-active-color",
"gold",
"violet",
"google-red",
"google-green",
"google-yellow",
"google-blue",
"google-violet",
"google-grey",
"color-red",
"color-green",
"color-yellow",
"color-amber",
"color-blue",
"color-purple",
"color-violet",
"color-grey",
"color-darkgrey",
"color-pink",
"color-orange",
"color-gold",
"color-brown"
];
function qa(e) {
let t = e?.toString().trim();
return t ? P(t) ? "template" : Ja(t) ? "picker" : "theme" : "theme";
}
function Ja(e) {
let t = e?.toString().trim().toLowerCase();
return !!(t && (t.startsWith("#") || t.startsWith("rgb") || t.startsWith("hsl")));
}
//#endregion
//#region src/common/editor/helpers/actions.js
function Ya(e, t) {
let n = Za[t];
return Xa(e?.hass, t) || (n ? G(e, n) : void 0) || t;
}
function Xa(e, t) {
if (!e?.localize || !t) return null;
let n = [t, t.replaceAll("-", "_")].flatMap((e) => [
`ui.panel.lovelace.editor.action-editor.actions.${e}`,
`ui.panel.lovelace.editor.card.generic.action.actions.${e}`,
`ui.panel.lovelace.editor.card.generic.action.${e}`,
`ui.panel.lovelace.editor.card.config.action.actions.${e}`,
`ui.panel.lovelace.editor.card.config.action.${e}`,
`ui.components.action-input.editor.action.${e}`
]);
for (let r of n) {
let n = e.localize(r);
if (n && n !== r && n !== t) return n;
}
return null;
}
var Za = {
"Current state": "Current state",
"current-activity": "Current activity",
"call-service": "Perform action",
"more-info": "More info",
navigate: "Navigate",
none: "Nothing",
popup: "Popup",
"perform-action": "Perform action",
toggle: "Toggle",
url: "URL"
};
function K({ interactions: e = [], title: t = "Interactions", expanded: n = !1, context: r = {}, config: i = this._config, onChange: a } = {}) {
let o = e.filter(Boolean);
if (!o.length) return "";
let s = o.filter((e) => Qa(i, e)), c = o.filter((e) => !s.includes(e)), l = [{
name: "interactions",
type: "expandable",
flatten: !0,
expanded: n,
icon: "mdi:gesture-tap-button",
schema: [...s.map((e) => $a(e, r, i, this)), {
name: "",
type: "optional_actions",
flatten: !0,
schema: c.map((e) => $a(e, r, i, this))
}]
}], u = eo(i, o);
return E`
ro(this, e, o, t)}
@value-changed=${(e) => {
e.stopPropagation();
let t = to(e.detail.value || {}, o, i);
a ? a(t) : this._updateConfig(t), this.requestUpdate?.();
}}
>
`;
}
function Qa(e = {}, t) {
return t.defaultVisible && !ao(e?.[t.key]);
}
function $a(e, t, n, r) {
let i = io(e.defaultAction), a = n?.[e.key], o = e.customActions || [], s = io(a);
if (o.length > 0 && !a || e.customDefaultLabel && !a || o.includes(s)) {
let t = oo(i, o), n = a ? [] : [{
value: "__default__",
label: `${G(r, "Default")} (${e.customDefaultLabel ? G(r, e.customDefaultLabel) : Ya(r, i)})`
}];
return {
name: e.formKey || e.key,
selector: { select: {
mode: "dropdown",
options: [...n, ...t.map((e) => ({
value: e,
label: Ya(r, e)
}))]
} }
};
}
return {
name: e.formKey || e.key,
selector: { ui_action: {
actions: oo(i, o),
default_action: i
} },
...t ? { context: t } : {}
};
}
function eo(e = {}, t) {
return t.reduce((t, n) => {
let r = n.formKey || n.key;
if (n.customDefaultLabel && !e?.[n.key]) return t[r] = "__default__", t;
if (n.customActions?.includes(io(e?.[n.key]))) return t[r] = io(e[n.key]), t;
let i = e?.[n.key] || (n.displayDefaultValue ? so(n.defaultAction) : void 0);
return i && typeof i == "object" && i.action !== "popup" && (!ao(i) || io(n.defaultAction) !== "none") && (t[r] = co(i)), t;
}, {});
}
function to(e, t, n = {}) {
return t.reduce((t, r) => {
let i = r.formKey || r.key;
if ((e[i] === "__default__" || r.customActions?.includes(e[i])) && typeof e[i] == "string") return t[r.key] = e[i] === "__default__" ? void 0 : { action: e[i] }, t;
let a = n?.[r.key], o = lo(no(e[i], a), r.defaultAction);
return t[r.key] = n?.[r.key]?.action === "popup" && !(i in e) ? n[r.key] : o, t;
}, {});
}
function no(e, t) {
if (!e || typeof e != "object" || e.action !== "more-info" || e.entity || e.entity_id || t?.action !== "more-info") return e;
let n = t.entity || t.entity_id;
return n ? {
...e,
entity: n
} : e;
}
function ro(e, t, n, r) {
return t.name === "interactions" ? G(e, r) : G(e, n.find((e) => (e.formKey || e.key) === t.name)?.label || t.name);
}
function io(e) {
let t = typeof e == "string" ? e : e?.action || "none";
return t === "call-service" ? "perform-action" : t;
}
function ao(e) {
return e?.action === "none";
}
function oo(e, t = []) {
let n = [
...t,
"more-info",
"toggle",
"navigate",
"url",
"perform-action",
"assist"
];
e && e !== "none" && !n.includes(e) && n.unshift(e);
let r = [...new Set(n)];
return e === "none" ? r : [...r, "none"];
}
function so(e) {
return typeof e == "string" ? { action: e } : e || { action: "none" };
}
function co(e) {
if (!e || typeof e != "object") return e;
let t = e.action === "call-service" ? "perform-action" : e.action;
if (t !== "perform-action") return {
...e,
action: t
};
let n = {
...e,
action: t,
perform_action: e.perform_action || e.service || ""
};
return e.service_data && !e.data && (n.data = e.service_data), delete n.service, delete n.service_data, n;
}
function lo(e, t) {
if (!(!e || typeof e != "object") && !(e.action === "none" && io(t) === "none")) {
if (e.action === "perform-action") {
let t = {
...e,
action: "call-service",
service: e.perform_action || e.service || ""
};
return e.data && !e.service_data && (t.service_data = e.data), delete t.perform_action, delete t.data, uo(t);
}
return uo(e);
}
}
function uo(e) {
let t = e?.action === "perform-action" ? "call-service" : e?.action || "none", n = { action: t };
if (t === "navigate") return n.navigation_path = e.navigation_path || "", n;
if (t === "more-info") {
let t = e.entity || e.entity_id;
return t && (n.entity = t), n;
}
return t === "call-service" ? (n.service = e.service || e.perform_action || "", (e.service_data || e.data) && (n.service_data = { ...e.service_data || e.data }), e.target && (n.target = { ...e.target }), n) : t === "url" ? (n.url_path = e.url_path || "", n) : t === "popup" ? (n.popup_title = e.popup_title || "", n.popup_content = e.popup_content || "", e.style && (n.style = e.style), e.card_mod && (n.card_mod = e.card_mod), n) : n;
}
//#endregion
//#region src/common/editor/helpers/renders.js
function fo({ value: e = "", includeDomains: t, excludeDomains: n, multiple: r = !1, onValueChanged: i, filterOptions: a, activeFilter: o = "all", className: s = "entity-picker" } = {}) {
let c = a?.length ? a.map((e) => ({
...e,
label: po.call(this, e)
})) : null, l = c ? ho(c) : t;
return r ? E`
i?.(e.detail.value || "")}
>
` : c?.length ? _o.call(this, {
value: e,
includeDomains: t,
excludeDomains: n,
filters: c,
activeFilter: o,
className: s,
onValueChanged: i
}) : E`
i?.(e.detail.value || "")}
>
`;
}
function po(e) {
if (e.haDomains?.length) {
let t = e.haDomains.map((e) => mo(this?.hass, e)).filter(Boolean);
if (t.length) return t.join(" / ");
}
return G(this, e.label);
}
function mo(e, t) {
if (!e?.localize || !t) return null;
let n = [`component.${t}.entity_component._.name_plural`, `component.${t}.entity_component._.name`];
for (let t of n) {
let n = e.localize(t);
if (n && n !== t) return n;
}
return null;
}
function ho(e = []) {
if (e.some((e) => e.value === "all" && (!e.domains || e.domains.length === 0))) return;
let t = /* @__PURE__ */ new Set();
return e.forEach((e) => e.domains?.forEach((e) => t.add(e))), [...t];
}
var go = !1;
function _o({ value: e, includeDomains: t, excludeDomains: n, filters: r, activeFilter: i, className: a, onValueChanged: o }) {
Oo();
let s = r.map((e) => ({
id: e.value,
label: e.label
}));
return E`
vo.call(this, {
search: e,
section: i,
filters: r,
includeDomains: t,
excludeDomains: n
})}
.valueRenderer=${(e) => bo.call(this, e)}
.rowRenderer=${xo}
.sections=${s}
.selectedSection=${i || r[0]?.value || "all"}
@picker-opened=${(e) => {
e.currentTarget.__orbitSuppressSectionScroll = !0;
}}
@value-changed=${(e) => o?.(e.detail.value || "")}
>
`;
}
function vo({ search: e, section: t, filters: n, includeDomains: r, excludeDomains: i }) {
let a = n.find((e) => e.value === (t || "all"))?.domains, o = a?.length ? a : r, s = new Set(i || []), c = (e || "").trim().toLowerCase();
return Object.values(this.hass?.states || {}).filter((e) => {
let t = Eo(e.entity_id);
return o?.length && !o.includes(t) ? !1 : !s.has(t);
}).map((e) => yo.call(this, e)).filter((e) => So(e, c)).sort(Co);
}
function yo(e) {
let t = wo(e), n = Eo(e.entity_id), r = To(this.hass, e);
return {
id: e.entity_id,
primary: t,
secondary: r,
sorting_label: `${t}_${e.entity_id}`,
stateObj: e,
domain: n,
domainLabel: Do(n),
searchText: [
t,
e.entity_id,
n,
Do(n),
r,
e.attributes?.device_class
].filter(Boolean).join(" ").toLowerCase()
};
}
function bo(e) {
let t = this.hass?.states?.[e], n = t ? wo(t) : e, r = t ? To(this.hass, t) : void 0;
return E`
${t ? E`${n}
${r ? E`${r} ` : ""}
`;
}
function xo(e, t) {
return E`
${e.primary}
${e.secondary ? E`${e.secondary} ` : ""}
${e.domainLabel}
`;
}
function So(e, t) {
return t ? t.split(/\s+/).every((t) => e.searchText.includes(t)) : !0;
}
function Co(e, t) {
return e.sorting_label.localeCompare(t.sorting_label, void 0, { sensitivity: "base" });
}
function wo(e) {
return e.attributes?.friendly_name || e.entity_id;
}
function To(e, t) {
let n = e?.entities?.[t.entity_id], r = n?.device_id ? e?.devices?.[n.device_id] : void 0, i = n?.area_id || r?.area_id || t.attributes?.area_id;
return i ? e?.areas?.[i]?.name : void 0;
}
function Eo(e = "") {
return e.split(".")[0] || "";
}
function Do(e = "") {
return e.split("_").filter(Boolean).map((e) => e[0]?.toUpperCase() + e.slice(1)).join(" ");
}
function Oo() {
if (go) return;
let e = Element.prototype.scrollIntoView;
Element.prototype.scrollIntoView = function(...t) {
if (Ao(this)) {
ko(this);
return;
}
return e.apply(this, t);
}, go = !0;
}
function ko(e) {
let t = e;
for (; t;) {
if (t.tagName?.toLowerCase?.() === "lit-virtualizer") {
t.scrollTop = 0;
return;
}
let e = t.getRootNode?.();
if (e?.host && e.host !== t) {
t = e.host;
continue;
}
t = t.parentNode || t.host;
}
}
function Ao(e) {
let t = e;
for (; t;) {
if (t.__orbitSuppressSectionScroll) return !0;
let e = t.getRootNode?.();
if (e?.host && e.host !== t) {
t = e.host;
continue;
}
t = t.parentNode || t.host;
}
return !1;
}
function jo({ value: e = "", onValueChanged: t, className: n = "entity-picker" } = {}) {
return E`
Mo.call(this)}
.valueRenderer=${(e) => Po.call(this, e)}
.rowRenderer=${Fo}
@value-changed=${(e) => t?.(e.detail.value || "")}
>
`;
}
function Mo() {
return Object.values(this.hass?.areas || {}).map((e) => No.call(this, e)).sort(Lo);
}
function No(e) {
let t = e.name || e.area_id, n = Io(this.hass, e);
return {
id: e.area_id,
primary: t,
secondary: n,
sorting_label: t,
icon: e.icon || "mdi:texture-box"
};
}
function Po(e) {
let t = this.hass?.areas?.[e], n = t ? No.call(this, t) : {
id: e,
primary: e,
icon: "mdi:texture-box"
};
return E`
${n.primary}
${n.secondary ? E`${n.secondary} ` : ""}
`;
}
function Fo(e, t) {
return E`
${e.primary}
${e.secondary ? E`${e.secondary} ` : ""}
`;
}
function Io(e, t) {
let n = t.floor_id;
return n ? e?.floors?.[n]?.name : void 0;
}
function Lo(e, t) {
return e.sorting_label.localeCompare(t.sorting_label, void 0, { sensitivity: "base" });
}
function Ro(e, t, n) {
return E`
${G(this, e, n)}
${fo.call(this, {
value: this._config?.[t] || "",
onValueChanged: (e) => this._handleEntityUpdate ? this._handleEntityUpdate(t, e) : this._handleConfigUpdate(t, e)
})}
`;
}
function zo(e, t) {
return E`
${jo.call(this, {
value: this._config?.[t] || "",
onValueChanged: (e) => this._handleConfigUpdate ? this._handleConfigUpdate(t, e) : this._updateConfig({ [t]: e })
})}
`;
}
//#endregion
//#region src/common/editor/helpers/helpers.js
function Bo(e) {
e._editorPopoverCloseHandler || (e._editorPopoverCloseHandler = (t) => {
!e._iconPickerKey && !e._colorPickerKey || Ho(t.composedPath?.() || []) || (e._iconPickerKey = "", e._colorPickerKey = "", e._iconFilePickerOpen = !1, e._iconFileSearch = "", e._themeColorPickerOpen = !1, e._themeColorSearch = "", e.requestUpdate?.());
}, document.addEventListener("pointerdown", e._editorPopoverCloseHandler, !0), e.addEventListener("pointerdown", e._editorPopoverCloseHandler, !0));
}
function Vo(e) {
e._editorPopoverCloseHandler &&= (document.removeEventListener("pointerdown", e._editorPopoverCloseHandler, !0), e.removeEventListener("pointerdown", e._editorPopoverCloseHandler, !0), null);
}
function Ho(e) {
return e.some((e) => {
let t = e?.classList, n = e?.tagName?.toLowerCase?.();
return t?.contains("icon-popover") || t?.contains("color-popover") || t?.contains("icon-preview") || t?.contains("color-preview") || t?.contains("color-control-button") || t?.contains("mdc-menu-surface") || n === "ha-generic-picker" || n === "ha-icon-picker" || n === "ha-combo-box" || n === "ha-combo-box-item" || n === "mwc-list" || n === "mwc-list-item";
});
}
function Uo(e) {
if (!e) return "background-color: rgb(var(--color-theme));";
let t = e.toString().trim().toLowerCase();
if (t.startsWith("#") || t.startsWith("rgb(") || t.startsWith("hsl(")) return `background-color:${t};`;
let n = t.replace(/[^a-z0-9-_]/g, "");
return n ? `background-color: ${Lt(n)};` : "background-color: rgb(var(--color-theme));";
}
function Wo(e) {
let t = e?.toString().trim();
return t && (Jo(t) || Yo(t) || Go(t)) || "#ffffff";
}
function Go(e, t = /* @__PURE__ */ new Set()) {
let n = e?.toString().trim().toLowerCase().replace(/[^a-z0-9-_]/g, "");
if (!n || t.has(n)) return "";
t.add(n);
let r = Vt(n), i = Bt(n) ? qo(r) : "", a = Rt(n) ? qo(`${n}-color`) : "", o = qo(n), s = n.startsWith("color-") ? "" : qo(`color-${n}`);
return Ko(i, t) || Ko(a, t) || Ko(o, t) || Ko(s, t) || "";
}
function Ko(e, t) {
let n = e?.trim();
if (!n) return "";
let r = Jo(n);
if (r) return r;
let i = Yo(n);
if (i) return i;
let a = n.match(/^var\(\s*--([^),\s]+)\s*\)$/i);
return a ? Go(a[1], t) : "";
}
function qo(e) {
let t = `--${e}`, n = [document.documentElement, document.body].filter(Boolean);
for (let e of n) {
let n = getComputedStyle(e).getPropertyValue(t).trim();
if (n) return n;
}
return "";
}
function Jo(e) {
return /^#[0-9a-f]{6}$/i.test(e) ? e : /^#[0-9a-f]{3}$/i.test(e) ? `#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}` : "";
}
function Yo(e) {
let t = e.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})/i);
if (t) return Xo(Number(t[1]), Number(t[2]), Number(t[3]));
let n = e.match(/^\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*$/i);
return n ? Xo(Number(n[1]), Number(n[2]), Number(n[3])) : "";
}
function Xo(e, t, n) {
return `#${Zo(e)}${Zo(t)}${Zo(n)}`;
}
function Zo(e) {
return Math.max(0, Math.min(255, e || 0)).toString(16).padStart(2, "0");
}
//#endregion
//#region src/common/editor/helpers/name-picker.js
function Qo({ label: e = "Name", valueKey: t, legacyValueKey: n = "", entityKey: r = "main_entity", areaKey: i = "area", deviceClassKey: a = "device_class", defaultType: o = "", defaultMode: s = "composed", modeKey: c = t, templateKey: l = "", templateLabel: u = "Template" } = {}) {
return $o.call(this), l || !customElements.get("ha-entity-name-picker") ? es.call(this, {
label: e,
valueKey: t,
entityKey: r,
areaKey: i,
deviceClassKey: a,
defaultType: o,
defaultMode: s,
modeKey: c,
templateKey: l,
templateLabel: u
}) : E`
{
e.stopPropagation(), hs.call(this, {
valueKey: t,
legacyValueKey: n,
value: gs(e.detail.value, this._config, {
entityKey: r,
areaKey: i,
defaultType: o
})
});
}}
>
`;
}
function $o() {
customElements.get("ha-entity-name-picker") || this._namePickerRenderQueued || (this._namePickerRenderQueued = !0, customElements.whenDefined("ha-entity-name-picker").then(() => {
this._namePickerRenderQueued = !1, this.requestUpdate?.();
}));
}
function es(e) {
let t = as(this._config, os(this, e.modeKey), e);
return E`
${t === "template" ? this._renderTemplateInput(e.templateLabel, e.templateKey, { hideLabel: !0 }) : t === "custom" ? ts.call(this, e) : ns.call(this, e)}
`;
}
function ts(e) {
return E`
{
t.stopPropagation(), hs.call(this, {
valueKey: e.valueKey,
legacyValueKey: e.legacyValueKey,
value: t.detail.value || void 0
});
}}
>
`;
}
function ns(e) {
let t = cs(this._config, e), n = us.call(this, t, e);
return E`
n}
allow-custom-value
.customValueLabel=${Os(this)}
.rowRenderer=${(e) => E`
${e.primary}
${e.secondary ? E`${e.secondary} ` : ""}
`}
.noSort=${!0}
.searchLabel=${Ds(this)}
@value-changed=${(n) => {
n.stopPropagation();
let r = ds(n.detail.value);
r && (ss(this, e.modeKey, "composed"), hs.call(this, {
valueKey: e.valueKey,
legacyValueKey: e.legacyValueKey,
value: gs([...t, r], this._config, e)
}));
}}
>
${t.map((n, r) => rs.call(this, n, r, t, e))}
is(e)}
>
${Es(this)}
`;
}
function rs(e, t, n, r) {
return E`
is(e)}
>
${ls.call(this, e, r)}
{
e.preventDefault(), e.stopPropagation();
let i = n.filter((e, n) => n !== t);
hs.call(this, {
valueKey: r.valueKey,
legacyValueKey: r.legacyValueKey,
value: gs(i, this._config, r)
});
}}
>
`;
}
function is(e) {
e.preventDefault(), e.stopPropagation(), e.currentTarget?.closest("ha-generic-picker")?.open?.();
}
function as(e = {}, t, n) {
if (n.templateKey && ps(e, n.templateKey)) return "template";
let r = ms(e, n);
return typeof r == "string" ? "custom" : r ? "composed" : t || n.defaultMode || "composed";
}
function os(e, t) {
return e._namePickerModes?.[t];
}
function ss(e, t, n) {
e._namePickerModes = {
...e._namePickerModes,
[t]: n
};
}
function cs(e = {}, t) {
let n = fs(e, t);
return !n || typeof n == "string" ? [] : Array.isArray(n) ? n : [n];
}
function ls(e, t) {
return e ? e.type === "text" ? `"${e.text || ""}"` : e.type === "area" ? this._t("Area") : e.type === "entity" ? this._t("Entity") : e.type === "device_class" ? this._t("Device class") : ks(this, e.type) : "";
}
function us(e = [], t) {
let n = [], r = new Set(e.filter((e) => e?.type && e.type !== "text").map((e) => e.type)), i = t.areaKey && this._config?.[t.areaKey] ? this.hass?.areas?.[this._config[t.areaKey]] : null, a = xs.call(this, t), o = a ? this.hass?.states?.[a] : null, s = ys(this._config, t);
if (s && !r.has("device_class") && n.push({
id: "device_class",
primary: this._t("Device class"),
secondary: s
}), i && !r.has("area")) n.push({
id: "area",
primary: this._t("Area"),
secondary: i.name || ""
});
else if (o && !r.has("area")) {
let e = Cs(this.hass, o, "area");
e && n.push({
id: "area",
primary: this._t("Area"),
secondary: e
});
}
if (o) {
r.has("entity") || n.push({
id: "entity",
primary: this._t("Entity"),
secondary: Cs(this.hass, o, "entity")
});
let e = Cs(this.hass, o, "device");
e && !r.has("device") && n.push({
id: "device",
primary: ks(this, "device"),
secondary: e
});
let i = ws(this.hass, this._config?.[t.areaKey]) || Cs(this.hass, o, "floor");
i && !r.has("floor") && n.push({
id: "floor",
primary: ks(this, "floor"),
secondary: i
});
}
return n;
}
function ds(e) {
if (e) return [
"area",
"device",
"device_class",
"entity",
"floor"
].includes(e) ? { type: e } : {
type: "text",
text: e
};
}
function fs(e = {}, t) {
let n = ms(e, t);
if (n !== void 0) return n;
if (t.defaultType === "area" && e[t.areaKey]) return { type: "area" };
if (t.defaultType === "entity" && (e[t.entityKey] || e.entity)) return { type: "entity" };
if (t.defaultType === "device_class" && vs(e, t).length) return { type: "device_class" };
}
function ps(e = {}, t) {
return Object.prototype.hasOwnProperty.call(e, t) && e[t] !== void 0 && e[t] !== "";
}
function ms(e = {}, t) {
if (ps(e, t.valueKey)) return e[t.valueKey];
if (t.legacyValueKey && ps(e, t.legacyValueKey)) return e[t.legacyValueKey];
}
function hs({ valueKey: e, legacyValueKey: t, value: n }) {
if (t && typeof this._updateConfig == "function") {
this._updateConfig({
[e]: n,
[t]: void 0
});
return;
}
this._handleConfigUpdate(e, n);
}
function gs(e, t = {}, n) {
if (!(Array.isArray(e) && e.length === 0) && e && !(n.defaultType && _s(t, n) && bs(e, n.defaultType))) return e;
}
function _s(e = {}, t) {
return t.defaultType === "area" ? !!e[t.areaKey] : t.defaultType === "entity" ? !!(e[t.entityKey] || e.entity) : t.defaultType === "device_class" ? vs(e, t).length > 0 : !1;
}
function vs(e = {}, t = {}) {
let n = e?.[t.deviceClassKey || "device_class"];
return (Array.isArray(n) ? n : [n]).filter((e) => typeof e == "string").map((e) => e.trim()).filter(Boolean);
}
function ys(e = {}, t = {}) {
return vs(e, t).map((e) => e.replaceAll("_", " ").replace(/\b\w/g, (e) => e.toUpperCase())).join(", ");
}
function bs(e, t) {
let n = Array.isArray(e) ? e : [e];
return n.length === 1 && n[0] && typeof n[0] == "object" && n[0].type === t;
}
function xs(e) {
return this._config?.[e.entityKey] || this._config?.entity || Ss(this.hass, this._config?.[e.areaKey]);
}
function Ss(e, t) {
if (!e || !t) return "";
let n = e.entities || {}, r = e.devices || {};
for (let i of Object.keys(e.states || {})) {
let e = n[i];
if (e?.area_id === t || e?.device_id && r[e.device_id]?.area_id === t) return i;
}
return "";
}
function Cs(e, t, n) {
return !t || typeof e?.formatEntityName != "function" ? n === "entity" && (t?.attributes?.friendly_name || t?.entity_id) || "" : e.formatEntityName(t, { type: n }) || "";
}
function ws(e, t) {
let n = t && e?.areas?.[t] ? e.areas[t].floor_id : "";
return n && e?.floors?.[n] && e.floors[n].name || "";
}
function Ts(e, t) {
let n = `ui.components.entity.entity-name-picker.mode_${t}`, r = e.hass?.localize?.(n);
return r && r !== n ? r : t === "custom" ? e._t("Custom") : "Composed";
}
function Es(e) {
let t = "ui.components.entity.entity-name-picker.add", n = e.hass?.localize?.(t);
return n && n !== t ? n : e._t("Add");
}
function Ds(e) {
let t = "ui.components.entity.entity-name-picker.search", n = e.hass?.localize?.(t);
return n && n !== t ? n : e._t("Search");
}
function Os(e) {
let t = "ui.components.entity.entity-name-picker.custom_name", n = e.hass?.localize?.(t);
return n && n !== t ? n : e._t("Name");
}
function ks(e, t) {
let n = `ui.components.entity.entity-name-picker.types.${t}`, r = e.hass?.localize?.(n);
return r && r !== n ? r : t;
}
//#endregion
//#region src/editors/area/sections/area.js
function As() {
return E`
${Ms.call(this)}
${this._renderArea("Area", "area")}
${this._renderColor("Color", "color")}
${this._renderEntity("Main entity", "main_entity")}
${Ns.call(this)}
${this._config?.main_entity ? this._renderTemplateInput("State template", "state_template") : ""}
${K.call(this, {
interactions: [
{
key: "tap_action",
formKey: "tap_action",
label: "Tap behavior",
defaultAction: js(this._config),
defaultVisible: !0,
displayDefaultValue: !0
},
{
key: "hold_action",
formKey: "hold_action",
label: "Hold behavior",
defaultAction: "none"
},
{
key: "double_tap_action",
formKey: "double_tap_action",
label: "Double tap behavior",
defaultAction: "none"
},
this._config?.main_entity ? {
key: "main_entity_tap_action",
formKey: "icon_tap_action",
label: "Icon tap behavior",
defaultAction: "more-info",
defaultVisible: !0
} : null,
this._config?.main_entity ? {
key: "main_entity_hold_action",
formKey: "icon_hold_action",
label: "Icon hold behavior",
defaultAction: "none"
} : null,
this._config?.main_entity ? {
key: "main_entity_double_tap_action",
formKey: "icon_double_tap_action",
label: "Icon double tap behavior",
defaultAction: "none"
} : null
],
context: {
entity_id: this._config?.main_entity,
area_id: this._config?.area
}
})}
`;
}
function js(e = {}) {
return {
action: "navigate",
navigation_path: e.tap_action?.navigation_path || e.navigate?.navigation_path || e.navigation_path || "/lovelace/home"
};
}
function Ms() {
return Qo.call(this, {
label: "Name",
valueKey: "area_name",
legacyValueKey: "room_name",
entityKey: "main_entity",
areaKey: "area",
defaultType: "area"
});
}
function Ns() {
return ki.call(this, {
label: "Icon",
sourceKey: "icon_source",
templateKey: "icon",
entityKey: "main_entity",
areaKey: "area",
allowArea: !0,
customIconKeys: [
"icon",
"icon_on",
"icon_off"
],
renderCustom() {
return E`
${this._renderIconInput("", "icon")}
${this._renderIconInput(["Active", "Icon"], "icon_on")}
${this._renderIconInput(["Inactive", "Icon"], "icon_off")}
`;
}
});
}
//#endregion
//#region src/editors/area/sections/buttons.js
function Ps() {
let e = this._selectedButtonIndex || 1;
return E`
${Fs.call(this, [
1,
2,
3,
4
], e, (e) => {
this._selectedButtonIndex = e;
})}
${Is.call(this, e)}
`;
}
function Fs(e, t, n) {
return E`
`;
}
function Is(e) {
let t = `button${e}`, n = this._areaButtonDomainFilter || "all";
return E`
${this._t("Entity")}
${fo.call(this, {
value: this._config?.[t] || "",
filterOptions: Ls,
activeFilter: n,
onValueChanged: (e) => this._handleEntityUpdate ? this._handleEntityUpdate(t, e) : this._handleConfigUpdate(t, e)
})}
${this._renderColorPair({
label: "Color",
onKey: `${t}_color_on`,
offKey: `${t}_color_off`,
onPreviewValue: "theme",
offPreviewValue: "theme"
})}
${ki.call(this, {
label: "Icon",
sourceKey: `${t}_icon_source`,
templateKey: `${t}_icon`,
entityKey: t,
customIconKeys: [
`${t}_icon`,
`${t}_icon_on`,
`${t}_icon_off`
],
renderCustom() {
return E`
${this._renderIconInput("", `${t}_icon`)}
${this._renderIconInput(["Active", "Icon"], `${t}_icon_on`)}
${this._renderIconInput(["Inactive", "Icon"], `${t}_icon_off`)}
`;
}
})}
${this._renderTemplateInput("State template", `${t}_state_template`)}
${K.call(this, {
interactions: [
{
key: `${t}_tap_action`,
formKey: "tap_action",
label: "Tap behavior",
defaultAction: "toggle",
defaultVisible: !0
},
{
key: `${t}_hold_action`,
formKey: "hold_action",
label: "Hold behavior",
defaultAction: "more-info"
},
{
key: `${t}_double_tap_action`,
formKey: "double_tap_action",
label: "Double tap behavior",
defaultAction: "none"
}
],
context: {
entity_id: this._config?.[t],
area_id: this._config?.area
}
})}
`;
}
var Ls = [
{
label: "All",
value: "all",
domains: null
},
{
label: "Lights",
haDomains: ["light"],
value: "light",
domains: ["light"]
},
{
label: "Switches",
haDomains: ["switch"],
value: "switch",
domains: ["switch"]
}
];
//#endregion
//#region src/editors/area/sections/curve-buttons.js
function Rs() {
let e = this._selectedCurveButtonIndex || 1;
return E`
${this._t("Lock curve button positions")}
this._updateConfig({ curve_buttons_lock_position: e.target.checked })}
>
${Bs.call(this, [
1,
2,
3,
4,
5,
6
], e, (e) => {
this._selectedCurveButtonIndex = e;
})}
${Vs.call(this, `curve_button${e}`, "", "more-info", { index: e }, {
showColors: !0,
filteredEntity: !0,
filterKey: "_areaCurveButtonDomainFilter",
filters: Us
})}
`;
}
function zs() {
let e = br(this._config?.action_button);
return E`
${Vs.call(this, "action_button", "", e, {}, {
showColors: !0,
filteredEntity: !0
})}
`;
}
function Bs(e, t, n) {
return E`
`;
}
function Vs(e, t, n, r = {}, i = {}) {
let a = this._config?.[e];
return E`
${t ? E`
${this._t(t, r)}
` : ""}
${i.filteredEntity ? Ws.call(this, "Entity", e, i) : this._renderEntity("Entity", e)}
${i.showColors ? this._renderColorPair({
label: "Color",
onKey: `${e}_color_on`,
offKey: `${e}_color_off`,
onPreviewValue: this._config?.color || "theme",
offPreviewValue: this._config?.color || "theme"
}) : ""}
${ki.call(this, {
label: "Icon",
sourceKey: `${e}_icon_source`,
templateKey: `${e}_icon`,
entityKey: e,
customIconKeys: [
`${e}_icon`,
`${e}_icon_on`,
`${e}_icon_off`
],
renderCustom() {
return E`
${this._renderIconInput("", `${e}_icon`)}
${this._renderIconInput(["Active", "Icon"], `${e}_icon_on`)}
${this._renderIconInput(["Inactive", "Icon"], `${e}_icon_off`)}
`;
}
})}
${this._renderTemplateInput("State template", `${e}_state_template`)}
${K.call(this, {
interactions: [
{
key: `${e}_tap_action`,
formKey: "tap_action",
label: "Tap behavior",
defaultAction: n,
defaultVisible: !0
},
{
key: `${e}_hold_action`,
formKey: "hold_action",
label: "Hold behavior",
defaultAction: "none"
},
{
key: `${e}_double_tap_action`,
formKey: "double_tap_action",
label: "Double tap behavior",
defaultAction: "none"
}
],
context: {
entity_id: a,
area_id: this._config?.area
}
})}
${this._t(e)}
${fo.call(this, {
value: this._config?.[t] || "",
filterOptions: i,
activeFilter: r,
onValueChanged: (e) => this._handleEntityUpdate ? this._handleEntityUpdate(t, e) : this._handleConfigUpdate(t, e)
})}
`;
}
//#endregion
//#region src/common/editor/styles/editor-styles.js
var Gs = [
d`
:host {
display: block;
font-family: var(--ha-font-family-body, var(--mdc-typography-font-family, Roboto, Noto, sans-serif));
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-normal, 400);
line-height: var(--ha-line-height-normal, 20px);
color: var(--primary-text-color);
--orbit-editor-surface: color-mix(
in srgb,
var(--card-background-color, var(--secondary-background-color)) 96%,
var(--primary-text-color, #fff) 4%
);
--orbit-editor-control: var(
--input-fill-color,
var(
--mdc-text-field-fill-color,
color-mix(
in srgb,
var(--card-background-color, var(--secondary-background-color)) 88%,
var(--primary-text-color, #fff) 12%
)
)
);
--orbit-editor-control-hover: color-mix(
in srgb,
var(--orbit-editor-control) 86%,
var(--primary-text-color, #fff) 14%
);
--orbit-editor-border: var(--outline-color, var(--divider-color));
--orbit-editor-popover: color-mix(
in srgb,
var(--card-background-color, var(--secondary-background-color)) 94%,
var(--primary-text-color, #fff) 6%
);
--orbit-editor-active: color-mix(
in srgb,
var(--primary-color) 20%,
transparent
);
}
.wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
`,
d`
.section {
display: flex;
flex-direction: column;
gap: 12px;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
}
.sub-section {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid var(--orbit-editor-border);
}
.sub-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.curve-divider {
height: 1px;
margin: 4px 0 6px 0;
background: var(--orbit-editor-border);
}
`,
d`
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-medium, 500);
line-height: var(--ha-line-height-normal, 20px);
opacity: 0.75;
transition: opacity 0.2s ease;
}
.section-header:hover {
opacity: 1;
}
.sub-section-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-medium, 500);
line-height: var(--ha-line-height-normal, 20px);
opacity: 0.72;
padding-bottom: 6px;
transition: opacity 0.2s ease;
}
.sub-section-header:hover {
opacity: 1;
}
.collapse-icon {
font-size: 18px;
line-height: 1;
}
`,
d`
.field {
display: flex;
flex-direction: column;
gap: 8px;
}
.field > label {
color: var(--primary-text-color);
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-medium, 500);
line-height: var(--ha-line-height-condensed, 20px);
}
.field-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.field-header > label {
color: var(--primary-text-color);
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-medium, 500);
line-height: var(--ha-line-height-condensed, 20px);
}
.editor-header-button-toggle,
.main-entity-icon-source-selector,
.name-picker-mode-selector,
.color-pair-source-selector {
flex: 0 1 auto;
width: auto;
max-width: 100%;
}
.editor-button-toggle-field .field-header,
.main-entity-icon-source-field .field-header,
.name-picker-fallback .field-header {
min-height: 40px;
}
.color-pair-control {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
min-width: 0;
}
.color-pair-source-header {
min-height: 40px;
}
.color-pair-source-header > label {
flex: 0 0 auto;
white-space: nowrap;
}
.name-picker-field ha-entity-name-picker,
.name-picker-custom-input,
.name-picker-composed-picker {
display: block;
width: 100%;
}
.name-picker-composed-picker {
--ha-generic-picker-width: min(360px, calc(100vw - 48px));
--ha-generic-picker-max-width: min(360px, calc(100vw - 48px));
}
.name-picker-composed-field {
min-height: 56px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 12px 24px;
border-radius: 4px 4px 0 0;
border-bottom: 1px solid var(--input-ink-color, var(--secondary-text-color));
background: var(--orbit-editor-control);
box-sizing: border-box;
}
.name-picker-composed-field:focus-within {
border-bottom-color: var(--primary-color);
box-shadow: inset 0 -1px 0 var(--primary-color);
}
.name-picker-chip,
.name-picker-add-chip {
min-height: 32px;
border: 1px solid var(--orbit-editor-border);
border-radius: var(--ha-border-radius-pill, 999px);
background: color-mix(
in srgb,
var(--primary-text-color) 10%,
transparent
);
color: var(--primary-text-color);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 12px;
font: inherit;
font-size: var(--ha-font-size-m, 14px);
line-height: var(--ha-line-height-normal, 20px);
cursor: pointer;
}
.name-picker-add-chip {
background: transparent;
}
.name-picker-chip ha-icon,
.name-picker-add-chip ha-icon {
--mdc-icon-size: 18px;
color: var(--secondary-text-color);
}
.name-picker-chip-remove {
margin-right: -4px;
}
.status-badge-hide-hidden-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-height: 40px;
}
.status-badge-device-class-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
align-items: center;
column-gap: 16px;
row-gap: 8px;
min-height: 40px;
}
.status-badge-device-class-options ha-checkbox {
display: inline-flex;
}
.status-area-count-low-sensors-hint {
color: var(--secondary-text-color);
font-size: 12px;
line-height: 1.35;
}
.color-pair,
.selector-pair,
.icon-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.status-settings-row .status-separator-field {
padding-top: 44px;
}
@media (max-width: 640px) {
.color-pair,
.selector-pair,
.icon-pair {
grid-template-columns: 1fr;
}
.status-settings-row .status-separator-field {
padding-top: 0;
}
}
.editor-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 36px;
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-normal, 400);
line-height: var(--ha-line-height-normal, 20px);
opacity: 0.9;
}
.editor-toggle-row span {
opacity: 0.78;
}
input,
select,
ha-selector {
width: 100%;
}
ha-selector {
display: block;
}
input,
select {
height: 56px;
padding: 0 16px;
border: none;
border-bottom: 1px solid var(--input-ink-color, var(--secondary-text-color));
border-radius: 4px 4px 0 0;
background: var(--orbit-editor-control);
color: inherit;
font: inherit;
font-size: var(--ha-font-size-l, 16px);
line-height: var(--ha-line-height-expanded, 24px);
outline: none;
box-sizing: border-box;
}
input:focus,
select:focus {
border-bottom-color: var(--primary-color);
box-shadow: inset 0 -1px 0 var(--primary-color);
}
input::placeholder {
color: var(--secondary-text-color);
opacity: 1;
}
select {
appearance: auto;
}
.editor-note {
padding: 10px 12px;
border-radius: 10px;
background: var(--orbit-editor-control);
border: 1px solid var(--orbit-editor-border);
color: inherit;
font-size: var(--ha-font-size-s, 12px);
line-height: var(--ha-line-height-condensed, 18px);
opacity: 0.72;
}
.editor-note code {
display: block;
margin-top: 4px;
font-family: monospace;
white-space: normal;
overflow-wrap: anywhere;
}
`,
d`
.entity-picker {
width: 100%;
display: block;
}
.entity-picker::part(root),
.entity-picker * {
box-sizing: border-box;
}
`,
d`
.color-row {
position: relative;
}
.color-control-button {
width: 100%;
height: 56px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 0 16px;
border: 0;
border-bottom: 1px solid var(--input-ink-color, var(--secondary-text-color));
border-radius: 4px 4px 0 0;
background: var(--orbit-editor-control);
color: inherit;
cursor: pointer;
font: inherit;
font-size: var(--ha-font-size-l, 16px);
font-weight: var(--ha-font-weight-normal, 400);
line-height: var(--ha-line-height-expanded, 24px);
text-align: left;
box-sizing: border-box;
}
.color-control-button:focus {
border-bottom-color: var(--primary-color);
box-shadow: inset 0 -1px 0 var(--primary-color);
outline: none;
}
.color-control-button ha-icon {
--mdc-icon-size: 20px;
opacity: 0.72;
}
.color-control-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.color-control-label.placeholder {
color: var(--secondary-text-color);
}
.color-preview {
position: relative;
flex: none;
width: 34px;
height: 34px;
border-radius: var(--ha-border-radius-md, 8px);
border: 1px solid var(--orbit-editor-border);
cursor: pointer;
overflow: hidden;
}
.color-popover {
position: relative;
width: 100%;
max-width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-sizing: border-box;
}
.color-tabs {
display: flex;
align-items: end;
gap: 0;
margin-bottom: 10px;
border-bottom: 1px solid var(--orbit-editor-border);
overflow-x: auto;
}
.color-tabs button {
position: relative;
flex: 1 1 0;
min-width: 44px;
height: 34px;
padding: 0 12px;
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-medium, 500);
line-height: var(--ha-line-height-normal, 20px);
opacity: 0.62;
overflow: hidden;
}
.color-tabs button ha-icon {
--mdc-icon-size: 20px;
pointer-events: none;
}
.color-tabs button.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
opacity: 1;
}
.native-color-picker-field {
position: relative;
width: 100%;
height: 56px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 12px;
padding: 0 16px;
border: 0;
border-bottom: 1px solid var(--input-ink-color, var(--secondary-text-color));
border-radius: 4px 4px 0 0;
background: var(--orbit-editor-control);
color: inherit;
cursor: pointer;
box-sizing: border-box;
}
.native-color-picker-field:focus-within {
border-bottom-color: var(--primary-color);
box-shadow: inset 0 -1px 0 var(--primary-color);
}
.native-color-picker-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
border: 0;
cursor: pointer;
z-index: 1;
}
.native-color-picker-swatch {
position: relative;
z-index: 2;
display: block;
width: 20px;
height: 20px;
border-radius: var(--ha-border-radius-pill, 999px);
border: 1px solid var(--outline-color, var(--divider-color));
box-sizing: border-box;
pointer-events: none;
}
.native-color-picker-empty-swatch {
position: relative;
z-index: 2;
display: block;
width: 20px;
height: 20px;
pointer-events: none;
}
.native-color-picker-text {
position: relative;
z-index: 2;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
pointer-events: none;
}
.native-color-picker-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--ha-font-size-m, 14px);
line-height: var(--ha-line-height-normal, 20px);
color: var(--secondary-text-color);
}
.native-color-picker-value {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--ha-font-size-m, 14px);
line-height: var(--ha-line-height-normal, 20px);
letter-spacing: 0;
}
.native-color-picker-value.empty {
min-height: 20px;
}
.native-color-picker-clear {
position: relative;
z-index: 3;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 -8px 0 0;
padding: 0;
border: 0;
border-radius: var(--ha-border-radius-pill, 999px);
background: transparent;
color: var(--secondary-text-color);
cursor: pointer;
}
.native-color-picker-clear:hover,
.native-color-picker-clear:focus {
background: color-mix(in srgb, var(--primary-text-color) 10%, transparent);
color: var(--primary-text-color);
outline: none;
}
.native-color-picker-clear ha-icon {
--mdc-icon-size: 22px;
}
.native-color-picker-arrow {
position: relative;
z-index: 2;
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
pointer-events: none;
}
.theme-color-picker {
position: relative;
}
.color-template-input {
position: relative;
}
.color-template-input ha-selector {
display: block;
}
.theme-color-picker ha-generic-picker {
display: block;
--ha-generic-picker-width: min(360px, calc(100vw - 48px));
--ha-generic-picker-max-width: min(360px, calc(100vw - 48px));
}
.theme-color-select {
width: 100%;
height: 56px;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 12px;
padding: 0 16px;
border: 0;
border-bottom: 1px solid var(--orbit-editor-border);
border-radius: 4px 4px 0 0;
background: var(--orbit-editor-control);
color: inherit;
cursor: pointer;
font: inherit;
font-size: var(--ha-font-size-l, 16px);
font-weight: var(--ha-font-weight-normal, 400);
line-height: var(--ha-line-height-expanded, 24px);
text-align: left;
}
.theme-color-select ha-icon {
--mdc-icon-size: 20px;
opacity: 0.7;
}
.theme-color-empty {
grid-column: 1 / 4;
min-height: 24px;
}
.theme-color-menu {
position: absolute;
z-index: 25;
top: calc(100% + 2px);
left: 0;
right: 0;
border-radius: var(--ha-border-radius-xl, 16px);
background: var(--mdc-theme-surface, var(--orbit-editor-popover));
border: 1px solid var(--orbit-editor-border);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.theme-color-search {
display: flex;
align-items: center;
gap: 8px;
margin: 10px;
padding: 0 10px;
height: 40px;
border: 1px solid var(--primary-color);
border-radius: var(--ha-border-radius-md, 8px);
background: var(--mdc-theme-surface, var(--orbit-editor-popover));
}
.theme-color-search ha-icon {
--mdc-icon-size: 20px;
opacity: 0.68;
}
.theme-color-search input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
outline: none;
background: transparent;
color: inherit;
font: inherit;
}
.theme-color-options {
max-height: 392px;
overflow: auto;
border-top: 1px solid var(--orbit-editor-border);
}
.theme-color-option {
width: 100%;
min-height: 46px;
display: grid;
grid-template-columns: 30px 1fr auto;
align-items: center;
gap: 14px;
padding: 8px 14px;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
font-size: var(--ha-font-size-l, 16px);
line-height: var(--ha-line-height-expanded, 24px);
text-align: left;
}
.theme-color-option.active {
background: var(--orbit-editor-active);
}
.theme-color-no-results {
padding: 14px;
opacity: 0.72;
}
.theme-color-preview {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.theme-color-swatch {
display: block;
flex: none;
width: 20px;
height: 20px;
border-radius: var(--ha-border-radius-pill, 999px);
border: 1px solid var(--orbit-editor-border);
box-sizing: border-box;
}
.theme-color-default-icon {
--mdc-icon-size: 20px;
color: var(--secondary-text-color);
}
.theme-color-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.theme-source-badge {
display: inline-flex;
flex: none;
width: 13px;
height: 13px;
border-radius: 50%;
align-items: center;
justify-content: center;
background: var(--primary-color);
color: var(--text-primary-color);
font-size: 8px;
font-weight: 800;
line-height: 1;
}
.theme-source-badge-theme {
background: var(--accent-color, var(--primary-color));
}
.theme-source-badge-standard {
background: var(--primary-color);
}
.icon-input-row {
position: relative;
display: flex;
align-items: center;
gap: 10px;
}
.icon-input-row input {
flex: 1;
}
.icon-preview {
width: 34px;
height: 34px;
min-width: 34px;
border-radius: var(--ha-border-radius-md, 8px);
background: var(--orbit-editor-control);
border: 1px solid var(--orbit-editor-border);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
}
.preview-image-stack {
position: relative;
width: 24px;
height: 24px;
display: block;
}
.icon-preview .preview-image,
.icon-preview .preview-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.icon-preview .preview-image {
object-fit: contain;
filter: brightness(0) invert(1);
}
.icon-preview .preview-svg {
color: currentColor;
display: flex;
background: transparent;
}
.icon-preview .preview-svg svg {
width: 100%;
height: 100%;
}
.icon-preview ha-icon {
--mdc-icon-size: 24px;
}
.icon-popover {
position: absolute;
z-index: 20;
top: calc(100% + 8px);
right: 0;
width: min(360px, 100%);
padding: 10px;
border-radius: var(--ha-border-radius-xl, 16px);
background: var(--mdc-theme-surface, var(--card-background-color, var(--secondary-background-color)));
box-shadow: var(--ha-card-box-shadow, 0 8px 24px rgba(0, 0, 0, 0.35));
border: 1px solid var(--orbit-editor-border);
}
.icon-picker-panel {
position: relative;
width: 100%;
max-width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-sizing: border-box;
}
.icon-picker-panel ha-icon-picker,
.icon-picker-panel ha-generic-picker {
display: block;
width: 100%;
}
.icon-picker-panel ha-icon-picker {
--ha-icon-picker-width: 100%;
--ha-icon-picker-max-width: 100%;
}
.icon-picker-panel ha-generic-picker {
--ha-generic-picker-width: min(360px, calc(100vw - 48px));
--ha-generic-picker-max-width: min(360px, calc(100vw - 48px));
}
.file-picker-preview {
display: inline-flex;
flex: none;
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
max-width: 24px;
max-height: 24px;
align-items: center;
justify-content: center;
overflow: hidden;
line-height: 0;
color: var(--secondary-text-color);
}
.file-picker-preview-inner {
display: inline-flex;
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
max-width: 24px;
max-height: 24px;
align-items: center;
justify-content: center;
overflow: hidden;
line-height: 0;
color: inherit;
}
.file-picker-preview-inner svg,
.file-picker-preview-inner img {
display: block;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
object-fit: contain;
}
.file-picker-preview-inner img {
filter: brightness(0) opacity(0.72);
}
.file-picker-preview-inner img.dark {
filter: brightness(0) invert(0.72);
}
.icon-tabs {
display: flex;
align-items: end;
gap: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var(--orbit-editor-border);
overflow-x: auto;
}
.icon-tabs button {
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0;
min-width: 92px;
height: 34px;
padding: 0 12px;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-medium, 500);
line-height: var(--ha-line-height-normal, 20px);
opacity: 0.62;
}
.icon-tabs button.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
opacity: 1;
}
.icon-source-template-field ha-selector {
display: block;
}
.file-icon-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
overflow: hidden;
background: var(--orbit-editor-popover);
}
.file-icon-section + .file-icon-section {
margin-top: 10px;
}
.file-icon-section-title {
margin: 0 0 6px;
font-size: var(--ha-font-size-s, 12px);
font-weight: var(--ha-font-weight-medium, 500);
line-height: var(--ha-line-height-condensed, 18px);
opacity: 0.62;
text-transform: uppercase;
}
.icon-popover {
max-height: 320px;
overflow: auto;
}
.file-icon-option {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
min-height: 54px;
padding: 10px 14px;
border: 0;
border-radius: 0;
background: var(--orbit-editor-popover);
color: var(--primary-text-color);
cursor: pointer;
font: inherit;
font-size: var(--ha-font-size-l, 16px);
font-weight: var(--ha-font-weight-normal, 400);
line-height: var(--ha-line-height-expanded, 24px);
text-align: left;
}
.file-icon-option.active {
background: rgba(var(--rgb-primary-color, 3, 169, 244), 0.18);
}
.file-icon-option:hover {
background: var(--orbit-editor-control-hover);
}
.file-icon-preview {
display: inline-flex;
flex: none;
width: 24px;
height: 24px;
min-width: 24px;
min-height: 24px;
max-width: 24px;
max-height: 24px;
align-items: center;
justify-content: center;
overflow: hidden;
line-height: 0;
color: var(--secondary-text-color);
}
.file-icon-preview svg,
.file-icon-preview img {
display: block;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
object-fit: contain;
}
.file-icon-option span:last-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon-picker-note {
padding: 10px;
border-radius: 9px;
background: var(--orbit-editor-control);
font-size: var(--ha-font-size-s, 12px);
line-height: var(--ha-line-height-condensed, 18px);
opacity: 0.76;
}
.icon-picker-note code {
display: block;
margin-top: 5px;
overflow-wrap: anywhere;
}
`,
d`
.action-field {
display: flex;
flex-direction: column;
gap: 12px;
}
.interactions-form {
display: block;
margin-top: 0;
}
.interactions-form ha-form {
display: block;
}
.action-picker {
width: 100%;
}
.action-picker ha-generic-picker,
.action-subfield ha-navigation-picker,
.action-subfield ha-service-control,
.action-subfield ha-input,
.action-subfield ha-selector {
width: 100%;
}
.action-subfield ha-navigation-picker,
.action-subfield ha-service-control,
.action-subfield ha-input {
display: block;
}
.action-subfield ha-service-control {
--service-control-padding: 0;
}
.action-picker ha-combo-box-item ha-icon,
.action-picker ha-icon[slot="start"] {
color: var(--secondary-text-color);
}
.inline-field {
display: flex;
align-items: center;
gap: 10px;
}
.inline-label {
width: 80px;
min-width: 80px;
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-normal, 400);
line-height: var(--ha-line-height-normal, 20px);
opacity: 0.7;
}
.inline-field input {
flex: 1;
}
.action-subfield {
align-items: flex-start;
}
.action-subfield .inline-label {
padding-top: 18px;
}
.action-subfield input {
min-height: 56px;
}
`,
d`
.editor-version {
padding: 0 14px;
font-size: var(--ha-font-size-xs, 11px);
font-weight: var(--ha-font-weight-normal, 400);
line-height: var(--ha-line-height-condensed, 18px);
opacity: 0.5;
text-align: right;
}
`,
d`
.editor-tabs {
display: flex;
align-items: end;
gap: 10px;
border-bottom: 1px solid var(--orbit-editor-border);
overflow-x: auto;
}
.editor-tabs + .editor-tabs {
margin-top: -12px;
}
.editor-tab {
min-width: 72px;
height: 42px;
padding: 0 12px;
border: none;
border-bottom: 3px solid transparent;
background: transparent;
color: inherit;
font: inherit;
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-medium, 500);
line-height: var(--ha-line-height-normal, 20px);
opacity: 0.62;
cursor: pointer;
}
.editor-tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
opacity: 1;
}
.editor-segment-menu {
display: grid;
grid-template-columns: repeat(
var(--editor-segment-columns, 3),
minmax(0, 1fr)
);
gap: 6px;
padding: 6px;
border-radius: var(--ha-border-radius-xl, 16px);
background: var(--orbit-editor-surface);
border: 1px solid var(--orbit-editor-border);
}
.editor-segment-item {
min-width: 0;
height: 34px;
padding: 0 10px;
border: none;
border-radius: var(--ha-border-radius-lg, 12px);
background: transparent;
color: inherit;
font: inherit;
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-medium, 500);
line-height: var(--ha-line-height-normal, 20px);
opacity: 0.58;
cursor: pointer;
}
.editor-segment-item.active {
background: var(--orbit-editor-active);
color: var(--primary-color);
opacity: 1;
}
.selected-button-section {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.sub-section-title {
margin-bottom: 12px;
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-medium, 500);
line-height: var(--ha-line-height-normal, 20px);
opacity: 0.62;
}
`
], Ks = class extends k {
static svgCache = z;
static properties = {
hass: { attribute: !1 },
_config: { state: !0 },
_activeSection: { state: !0 },
_selectedStatusIndex: { state: !0 },
_selectedButtonIndex: { state: !0 },
_selectedCurveButtonIndex: { state: !0 },
_areaButtonDomainFilter: { state: !0 },
_areaCurveButtonDomainFilter: { state: !0 },
_areaActionButtonDomainFilter: { state: !0 },
_colorPickerKey: { state: !0 },
_colorPickerTab: { state: !0 },
_iconPickerKey: { state: !0 },
_iconPickerTab: { state: !0 },
_iconFileSearch: { state: !0 },
_iconFilePickerOpen: { state: !0 },
_orbitIconFiles: { state: !0 },
_orbitIconFilesLoading: { state: !0 },
_localIconFiles: { state: !0 },
_localIconFilesLoading: { state: !0 }
};
constructor() {
super(), this._config = this._config || {}, this._activeSection = "card", this._selectedStatusIndex = 1, this._selectedButtonIndex = 1, this._selectedCurveButtonIndex = 1, this._areaButtonDomainFilter = "all", this._areaCurveButtonDomainFilter = "all", this._areaActionButtonDomainFilter = "all", this._colorPickerKey = "", this._colorPickerTab = "picker", this._iconPickerKey = "", this._iconPickerTab = "ha", this._iconFileSearch = "", this._iconFilePickerOpen = !1, this._orbitIconFiles = [], this._orbitIconFilesLoading = !1, this._localIconFiles = [], this._localIconFilesLoading = !1;
}
connectedCallback() {
super.connectedCallback(), Bo(this), this._updateDocumentationContext();
}
disconnectedCallback() {
Vo(this), super.disconnectedCallback();
}
_getColorStyle(e) {
return Uo(e);
}
_getColorPickerValue(e) {
return Wo(e);
}
_t(e, t) {
return B(this.hass, e, t);
}
setConfig(e) {
let { config: t, migrated: n } = cn(e || {});
this._config = tc(t || {}), this._updateDocumentationContext(), n && this._queueConfigMigration();
}
_queueConfigMigration() {
this._configMigrationQueued || (this._configMigrationQueued = !0, Promise.resolve().then(() => {
this._configMigrationQueued = !1, this.dispatchEvent(new CustomEvent("config-changed", {
detail: { config: tc(this._config) },
bubbles: !0,
composed: !0
}));
}));
}
_updateConfig(e) {
let t = { ...e };
Object.prototype.hasOwnProperty.call(t, "tap_action") && t.tap_action !== void 0 && (t.navigate = void 0);
let n = sa(this._config, t), r = Ai(n, {
sourceKey: "icon_source",
templateKey: "icon",
entityKey: "main_entity",
areaKey: "area",
allowArea: !0,
customIconKeys: [
"icon",
"icon_on",
"icon_off"
]
}), i = Object.prototype.hasOwnProperty.call(t, "icon_source") && !["custom", "template"].includes(t.icon_source), a = r !== "custom" && n.icon === "";
(i || a) && (n.icon = void 0), this._config = tc(sa(n, {})), this.dispatchEvent(new CustomEvent("config-changed", {
detail: { config: this._config },
bubbles: !0,
composed: !0
}));
}
_handleInput(e, t) {
this._updateConfig({ [e]: t.target.value });
}
_handleEntityUpdate(e, t) {
if (t) {
this._handleConfigUpdate(e, t);
return;
}
if (e.startsWith("button")) {
this._clearButtonEntity(e);
return;
}
if (e.startsWith("curve_button")) {
this._clearCurveButtonEntity(e);
return;
}
if (e === "action_button") {
this._clearActionButtonEntity(e);
return;
}
if (/^status[1-3]$/.test(e)) {
this._clearStatusEntity(e);
return;
}
if (e !== "main_entity") {
this._handleConfigUpdate(e, t);
return;
}
this._updateConfig(W("main_entity", Ys));
}
_clearStatusEntity(e) {
this._updateConfig(ca(e, Xs));
}
_clearButtonEntity(e) {
this._updateConfig(ca(e, Zs));
}
_clearCurveButtonEntity(e) {
this._updateConfig(ca(e, Qs));
}
_clearActionButtonEntity(e) {
this._updateConfig(ca(e, $s));
}
_renderInput(e, t, n = "", r = {}) {
return ia.call(this, e, t, n, r);
}
_renderTemplateInput(e, t) {
return aa.call(this, e, t);
}
_handleConfigUpdate(e, t) {
this._updateConfig({ [e]: t });
}
_renderColor(e, t, n) {
return da.call(this, e, t, n);
}
_renderColorControl(e, t, n, r, i = n) {
return fa.call(this, e, t, n, r, i);
}
_renderColorPair(e) {
return pa.call(this, e);
}
_renderIconInput(e, t, n = "mdi:lightbulb or icon.svg") {
return Oi.call(this, e, t, n);
}
_loadLocalIconFiles(e = "") {
return ji.call(this, e);
}
_isImageIcon(e) {
return Ei(e);
}
_resolveIconPath(e) {
return Di(e);
}
_getInlineSvg(e) {
return R.call(this, e, { forceColor: !0 });
}
_renderEntity(e, t, n) {
return Ro.call(this, e, t, n);
}
_renderArea(e, t) {
return zo.call(this, e, t);
}
_renderAreaSection() {
return As.call(this);
}
_renderStatusSection() {
let e = this._selectedStatusIndex || 1;
return E`
${this._renderInput("Separator", "status_separator", "|")}
${this._renderColorControl("Color", "status_color", this._config?.status_color || this._config?.color || "", (e) => this._handleConfigUpdate("status_color", e), this._config?.status_color || this._config?.color || "")}
${this._renderEntity("Entity", `status${e}`)}
${ki.call(this, {
label: ["Prefix", "Icon"],
sourceKey: `status${e}_icon_source`,
templateKey: `status${e}_icon`,
entityKey: `status${e}`,
allowNone: !0,
customIconKeys: [`status${e}_icon`],
renderCustom() {
return this._renderIconInput("", `status${e}_icon`, "mdi:thermometer / icon.svg / 🌡️");
}
})}
${this._renderInput("Display precision", `status${e}_decimal_places`, "entity default")}
`;
}
_renderButtonsSection() {
return Ps.call(this);
}
_renderCurvedButtonsSection() {
return Rs.call(this);
}
_renderActionButtonSection() {
return zs.call(this);
}
_renderEditorTabs() {
return E`
${qs.map((e) => E`
{
this._activeSection = e.key, this._updateDocumentationContext();
}}
>
${this._t(e.label)}
`)}
`;
}
_updateDocumentationContext() {
an(this, this._config?.type || "orbit-area-card-dev", this._activeSection || "card");
}
_renderActiveSection() {
let e = qs.find((e) => e.key === this._activeSection) || qs[0];
return this[e.render]();
}
render() {
return E`
${this._renderEditorTabs()}
${this._renderActiveSection()}
${this._t("Orbit Area Card (Dev) v{version}", { version: t.area })}
{
e.stopPropagation(), tl.call(this);
}}
>
tl.call(this)}
>
${m}
${c ? E`
{
if (c.service === "turn_off") {
this._activeEntitiesConfirmOpen = !0;
return;
}
await nl.call(this, c, s.map((e) => e.stateObj.entity_id)), tl.call(this);
}}
>
` : ""}
${o.length ? o.map(({ stateObj: e, name: t, areaName: n, control: r, serviceName: i, icon: a, deviceId: o, entityCount: s, powerStateObj: c }) => E`
${r ? E`
{
t.stopPropagation(), nl.call(this, r, [e.entity_id]);
}}
>
` : a ? E`
il.call(this, o)}
>
` : E`
o ? il.call(this, o) : rl.call(this, e.entity_id)}
>
${t}
${n ? E`
${n}
` : O}
(${s}) ` : O}
${c ? E`
-
-
${yl(this.hass, e, this._activeEntitiesDurationNow)}
`) : E`
${this._t("No active entities")}
`}
${this._activeEntitiesConfirmOpen && c?.service === "turn_off" ? E`
{
e.stopPropagation(), this._activeEntitiesConfirmOpen = !1;
}}
aria-labelledby="active-entities-confirmation-title"
aria-describedby="active-entities-confirmation-description"
>
${this.hass?.localize?.("ui.dialogs.generic.default_confirmation_title")}
${this._t("This will turn off {count} active entities.", { count: s.length })}
{
this._activeEntitiesConfirmOpen = !1;
}}
>
${this.hass?.localize?.("ui.common.cancel")}
{
await nl.call(this, c, s.map((e) => e.stateObj.entity_id)), this._activeEntitiesConfirmOpen = !1, tl.call(this);
}}
>
${l || this.hass?.localize?.("ui.card.common.turn_off")}
` : O}
`;
}
//#endregion
//#region src/common/helpers/current-activity-dialog.js
var jl = 140, Ml = "calc(100dvh - 216px)", Nl = {
_currentActivityOpen: { state: !0 },
_currentActivityCard: { state: !0 },
_currentActivityLoading: { state: !0 },
_currentActivityError: { state: !0 },
_currentActivityHeight: { state: !0 },
_currentActivityScope: { state: !0 },
_currentActivityCurrentEntityIds: { state: !0 },
_currentActivityAllEntityIds: { state: !0 },
_currentActivityShowScopeToggle: { state: !0 },
_currentActivityStartDate: { state: !0 },
_currentActivityEndDate: { state: !0 },
_currentActivityHasDateRangePicker: { state: !0 },
_currentActivityHeightLocked: { state: !0 },
_currentActivityTitleDetail: { state: !0 }
};
function Pl() {
this._currentActivityOpen = !1, this._currentActivityCard = null, this._currentActivityLoading = !1, this._currentActivityError = "", this._currentActivityHeight = `${jl}px`, this._currentActivityScope = "current", this._currentActivityCurrentEntityIds = [], this._currentActivityAllEntityIds = [], this._currentActivityShowScopeToggle = !1;
let { startDate: e, endDate: t } = Wl();
this._currentActivityStartDate = e, this._currentActivityEndDate = t, this._currentActivityHasDateRangePicker = !!customElements.get("ha-date-range-picker"), this._currentActivityHeightLocked = !1, this._currentActivityTitleDetail = "", this._currentActivityRequest = 0, this._currentActivityHeightTimer = null;
}
function Fl(e = [], t = e, n = !1, r = "") {
let i = Hl(e), a = Hl(t);
this._currentActivityScope = "current", this._currentActivityCurrentEntityIds = i, this._currentActivityAllEntityIds = a, this._currentActivityShowScopeToggle = !!n, this._currentActivityTitleDetail = String(r || "").trim();
let { startDate: o, endDate: s } = Wl();
this._currentActivityStartDate = o, this._currentActivityEndDate = s, this._currentActivityHeightLocked = !1, this._currentActivityOpen = !0, zl.call(this, "current");
}
function Il(e) {
let t = e === "all" ? "all" : "current";
t !== this._currentActivityScope && (this._currentActivityScope = t, zl.call(this, t));
}
function Ll(e = [], t = e) {
if (!this._currentActivityOpen) return;
let n = this._currentActivityCurrentEntityIds, r = this._currentActivityAllEntityIds, i = Hl([...n, ...e]), a = Hl(t), o = !Ul(n, i), s = !Ul(r, a);
if (!o && !s || (this._currentActivityCurrentEntityIds = i, this._currentActivityAllEntityIds = a, !(this._currentActivityScope === "all" ? s : o))) return;
let c = this._currentActivityScope === "all" ? a : i, l = this._currentActivityCard;
if (l?.localName === "ha-logbook" && c.length) {
l.hass = this.hass, l.entityIds = c;
return;
}
zl.call(this, this._currentActivityScope);
}
function Rl(e = {}) {
let t = Gl(e.startDate), n = Gl(e.endDate);
if (!t || !n || n <= t) return;
this._currentActivityStartDate = t, this._currentActivityEndDate = n, this._currentActivityHeightLocked = !0, this._currentActivityHeight = Ml;
let r = this._currentActivityCard;
if (r?.localName === "ha-logbook") {
this._currentActivityRequest += 1, window.clearTimeout(this._currentActivityHeightTimer), this._currentActivityHeightTimer = null, this._currentActivityLoading = !1, this._currentActivityError = "", r.hass = this.hass, r.time = { range: [t, n] }, r.requestUpdate?.();
return;
}
zl.call(this, this._currentActivityScope);
}
async function zl(e) {
let t = e === "all" ? this._currentActivityAllEntityIds : this._currentActivityCurrentEntityIds, n = ++this._currentActivityRequest;
if (this._currentActivityCard = null, this._currentActivityLoading = !0, this._currentActivityError = "", this._currentActivityHeight = this._currentActivityHeightLocked ? Ml : `${jl}px`, window.clearTimeout(this._currentActivityHeightTimer), this._currentActivityHeightTimer = null, !t.length) {
this._currentActivityLoading = !1, this._currentActivityError = this._t("No entities available for activity");
return;
}
try {
if (!window.loadCardHelpers) throw Error("Home Assistant card helpers are unavailable");
let e = await window.loadCardHelpers();
this._currentActivityHasDateRangePicker = await Kl(e), e.createCardElement({
type: "logbook",
target: { entity_id: t },
hours_to_show: 24
}), await customElements.whenDefined("ha-logbook");
let r = document.createElement("ha-logbook");
if (n !== this._currentActivityRequest) return;
r.hass = this.hass, r.time = Bl.call(this), r.entityIds = t, r.virtualize = !0, r.narrow = !0, this._currentActivityCard = r, ql.call(this, r, n);
} catch (e) {
if (n !== this._currentActivityRequest) return;
this._currentActivityError = e?.message || this._t("Unable to load current activity");
} finally {
n === this._currentActivityRequest && (this._currentActivityLoading = !1);
}
}
function Bl() {
return this._currentActivityHeightLocked ? { range: [this._currentActivityStartDate, this._currentActivityEndDate] } : { recent: 1440 * 60 };
}
function Vl() {
this._currentActivityOpen = !1, this._currentActivityCard = null, this._currentActivityLoading = !1, this._currentActivityError = "", this._currentActivityHeight = `${jl}px`, this._currentActivityScope = "current", this._currentActivityCurrentEntityIds = [], this._currentActivityAllEntityIds = [], this._currentActivityShowScopeToggle = !1;
let { startDate: e, endDate: t } = Wl();
this._currentActivityStartDate = e, this._currentActivityEndDate = t, this._currentActivityHeightLocked = !1, this._currentActivityTitleDetail = "", this._currentActivityRequest += 1, window.clearTimeout(this._currentActivityHeightTimer), this._currentActivityHeightTimer = null;
}
function Hl(e = []) {
return [...new Set(e.filter(Boolean))];
}
function Ul(e = [], t = []) {
return e.length === t.length && e.every((e, n) => e === t[n]);
}
function Wl() {
let e = /* @__PURE__ */ new Date();
return {
startDate: /* @__PURE__ */ new Date(e.getTime() - 1440 * 60 * 1e3),
endDate: e
};
}
function Gl(e) {
return !(e instanceof Date) || Number.isNaN(e.getTime()) ? null : new Date(e);
}
async function Kl(e) {
if (customElements.get("ha-date-range-picker")) return !0;
try {
return e.createCardElement({ type: "energy-date-selection" }), await Promise.race([customElements.whenDefined("ha-date-range-picker").then(() => !0), new Promise((e) => window.setTimeout(() => e(!1), 3e3))]);
} catch {
return !1;
}
}
function ql(e, t, n = 0) {
this._currentActivityHeightLocked || (window.clearTimeout(this._currentActivityHeightTimer), this._currentActivityHeightTimer = window.setTimeout(async () => {
if (t !== this._currentActivityRequest || e !== this._currentActivityCard || this._currentActivityHeightLocked) return;
await e.updateComplete;
let r = e.localName === "ha-logbook" ? e : e.shadowRoot?.querySelector("ha-logbook");
await r?.updateComplete;
let i = r?.shadowRoot?.querySelector("ha-logbook-renderer");
await i?.updateComplete;
let a = i?.shadowRoot?.querySelector(".container"), o = i?.shadowRoot?.querySelector("lit-virtualizer"), s = Math.max(a?.scrollHeight || 0, o?.scrollHeight || 0), c = Number.parseFloat(this._currentActivityHeight) || jl;
this._currentActivityHeight = `${Math.max(jl, c, s)}px`, n < 50 ? ql.call(this, e, t, n + 1) : this._currentActivityHeightTimer = null;
}, 100));
}
//#endregion
//#region src/common/renders/current-activity-dialog.js
function Jl() {
return this._currentActivityOpen ? (this._currentActivityCard && (this._currentActivityCard.hass = this.hass), E`
{
e.stopPropagation(), Vl.call(this);
}}
>
Vl.call(this)}
>
${this._t("Activity")}${this._currentActivityTitleDetail ? ` · ${this._currentActivityTitleDetail}` : ""}
${this._currentActivityShowScopeToggle ? E`
{
e.stopPropagation(), Il.call(this, e.detail.value);
}}
>
` : O}
${this._currentActivityHasDateRangePicker ? E`
{
e.stopPropagation(), Rl.call(this, e.detail.value);
}}
>
` : O}
${this._currentActivityLoading ? E`
` : this._currentActivityError ? E`
${this._currentActivityError}
` : this._currentActivityCard || O}
`) : O;
}
//#endregion
//#region src/cards/status/helpers/attributes.js
function Q(e, t) {
let n = e?.attributes?.[t];
return n == null || typeof n == "string" && n.trim() === "" ? null : n;
}
function Yl(e) {
let t = e.navigate?.navigation_path;
return typeof t == "string" && t.trim() || null;
}
function Xl(e, t, n) {
let r = Q(t, "color");
return e.color_source === "template" ? e.color || r || "theme" : n ? e.color_on || r || "theme" : e.color_off || r || "theme";
}
function Zl(e, t = null, n = null) {
if (!e) return !1;
let r = (n ?? e.state)?.toString().trim().toLowerCase(), i = Number(r);
if (Number.isFinite(i)) return i > 0;
if (Ql.includes(r)) return !1;
let a = e.entity_id?.split(".")[0];
return [
"sensor",
"input_text",
"input_select",
"select"
].includes(a) ? !0 : typeof t == "function" ? t(e) : !0;
}
var Ql = [
"",
"0",
"off",
"false",
"no",
"none",
"unknown",
"unavailable",
"idle",
"standby",
"docked",
"disarmed",
"closed",
"locked",
"clear",
"cleared",
"normal",
"ok",
"okay",
"safe",
"home",
"online",
"connected",
"available",
"disabled"
];
function $l(e, t) {
let n = Q(t, "navigation"), r = typeof n == "string" ? n.trim() : n?.navigation_path;
return Yl(e) || r || "/lovelace/home";
}
//#endregion
//#region src/common/helpers/zones.js
var eu = /* @__PURE__ */ new WeakMap();
function tu(e) {
let t = e?.states;
if (!t) return {
zones: [],
zoneByTrackerState: /* @__PURE__ */ new Map()
};
let n = eu.get(t);
if (n) return n;
let r = Object.values(t).filter((e) => e.entity_id?.startsWith("zone.") && !e.attributes?.passive), i = {
zones: r,
zoneByTrackerState: new Map(r.map((e) => [nu(e), e]))
};
return eu.set(t, i), i;
}
function nu(e) {
return (e.attributes?.friendly_name || e.entity_id.replace(/^zone\./, "")).toLowerCase().replace(/\s+/g, "_");
}
//#endregion
//#region src/cards/status/helpers/lifecycle.js
function ru(e) {
if (!e.has("_config") && !e.has("hass") && !e.has("_templateRevision")) return;
if (this._config.mode === "person") {
cu.call(this);
return;
}
if (this._config.mode === "icon_only") {
let e = iu(this._config);
this._statusItems = e.map((e) => au.call(this, e, this._config)), su.call(this, this._statusItems[0] || {});
return;
}
let t = this._config.entity, n = au.call(this, { entity: t }, this._config);
this._statusItems = [n], su.call(this, n);
}
function iu(e = {}) {
return Array.isArray(e.entities) && e.entities.length ? e.entities.map((e) => typeof e == "string" ? { entity: e } : e || {}) : [{
entity: e.entity,
...mc(e),
color_source: e.color_source,
color: e.color,
color_on: e.color_on,
color_off: e.color_off,
icon_source: e.icon_source,
icon: e.icon,
icon_on: e.icon_on,
icon_off: e.icon_off,
entity_icon_source: e.entity_icon_source,
entity_icon_template: e.entity_icon_template,
entity_icon: e.entity_icon,
entity_icon_on: e.entity_icon_on,
entity_icon_off: e.entity_icon_off,
entity_icon_svg_color_override: e.entity_icon_svg_color_override,
entity_icon_on_svg_color_override: e.entity_icon_on_svg_color_override,
entity_icon_off_svg_color_override: e.entity_icon_off_svg_color_override,
state_template: e.state_template,
label_template: e.label_template,
name_template: e.name_template,
tap_action: e.tap_action,
hold_action: e.hold_action,
double_tap_action: e.double_tap_action,
entity_tap_action: e.entity_tap_action,
entity_hold_action: e.entity_hold_action,
entity_double_tap_action: e.entity_double_tap_action
}];
}
function au(e, t = {}) {
let n = {
...t,
...e
}, r = X(n), i = e.entity || t.entity, a = r === "area_count" ? Lc(this.hass, n) : [], o = jc(a, n, (e) => this._getEntityActiveState(e)), s = r === "area_count" ? o[0] || a[0] || null : i && this.hass ? this.hass.states[i] : null, c = i || s?.entity_id || "", l = c.split(".")[0] || n.domain || "";
n.entity = c;
let u = n.mode !== "icon_only" && Object.prototype.hasOwnProperty.call(n, "name") && n.name !== void 0 && n.name !== "", d = r === "template" && n.state_template ? this._evaluateStateTemplate(n.state_template, c) : null, f = r === "template" && n.active_template ? this._evaluateStateTemplate(n.active_template, c) : null, p = r === "template" && n.inactive_template ? this._evaluateStateTemplate(n.inactive_template, c) : null, m = r !== "area_count" && n.name_template ? this._evaluateStateTemplate(n.name_template, c) : null, h = r === "template" && n.label_template ? this._evaluateStateTemplate(n.label_template, c) : null, g = m === null ? u ? Yt(n.name, n, this.hass) : r === "area_count" ? n.domain === "unavailable" ? B(this.hass, "Unavailable") : Z(n).length ? Z(n).map(Sc).join(", ") : Y(n.domain).label : Q(s, "friendly_name") || c || B(this.hass, "Status") : String(m), _ = h === null ? r === "template" ? n.state_template ? vt(d, this.hass, l) : s ? Q(s, "label") || this.formatState(s) : "" : r === "area_count" ? String(o.length) : Q(s, "label") || (s ? this.formatState(s) : "") : String(h), v = n.icon_on ?? n.entity_icon_on, ee = n.icon_off ?? n.entity_icon_off, te = !!(n.state_template || n.active_template || n.inactive_template), y = r === "template" ? te ? _t(f, l) ? !0 : _t(p, l) ? !1 : _t(d, l) : s ? Zl(s, (e) => this._getEntityActiveState(e)) : !1 : r === "area_count" ? o.length > 0 : Zl(s, (e) => this._getEntityActiveState(e), d), b = ou(n, c), ne = zn.call(this, n.icon, c), x = b === "template" ? ne : b === "custom" && ((y ? v : ee) || ne) || "", re = x || (r === "area_count" ? Y(n.domain).icon : c && !s ? "mdi:alert-circle-outline" : "mdi:information-outline"), ie = Z(n)[0] || "", ae = r === "area_count" && Y(n.domain).staticIcon, S = r === "area_count" ? {
entity_id: `${n.domain || "sensor"}.orbit_status_card`,
state: s?.state ?? (y ? "on" : "off"),
attributes: ie ? { device_class: ie } : {}
} : s, C = b === "template" && ne ? "icon" : b === "custom" && y && v ? n.icon_on ? "icon_on" : "entity_icon_on" : b === "custom" && !y && ee ? n.icon_off ? "icon_off" : "entity_icon_off" : b === "custom" && ne ? n.icon ? "icon" : "entity_icon" : "", oe = Xl(n, s, y), se = $l(n, s), ce = this._computeFullColor(oe), le = this._computeFullColor(oe), w = this._computeCircleColor(oe), ue = c && !s ? "var(--error-color)" : y ? this._computeFullColor(oe) : this._computeIconColor(oe);
return {
...e,
entityId: c,
stateObj: s,
nativeIconStateObj: S,
useStateIcon: !!S && b !== "template" && !x && !ae,
cardName: g,
statusText: _,
icon: re,
navigationPath: se,
nameColor: ce,
statusColor: le,
circleColor: w,
iconColor: ue,
svgForceColor: C ? this._getSvgColorOverride(n, C) : !0,
suppressEntityIssueBadge: r === "area_count" && n.domain === "unavailable"
};
}
function ou(e, t) {
let n = e.icon_source ?? e.entity_icon_source, r = !!t, i = !!(e.icon || e.icon_on || e.icon_off || e.entity_icon || e.entity_icon_on || e.entity_icon_off);
return n === "custom" ? "custom" : n === "template" ? "template" : n === "domain" && e.domain ? "domain" : n === "entity" && r ? "entity" : i ? "custom" : e.state_source === "area_count" ? "domain" : "entity";
}
function su(e) {
this._cardName = e.cardName ?? B(this.hass, "Status"), this._statusText = e.statusText || "", this._icon = e.icon || "mdi:information-outline", this._mainStateObj = e.stateObj || null, this._mainIconStateObj = e.nativeIconStateObj || e.stateObj || null, this._useNativeMainIcon = e.useStateIcon ?? !1, this._navigationPath = e.navigationPath || "", this._nameColor = e.nameColor || this._nameColor, this._statusColor = e.statusColor || this._statusColor, this._circleColor = e.circleColor || this._circleColor, this._iconColor = e.iconColor || this._iconColor, this._iconSvgForceColor = e.svgForceColor ?? !0;
}
function cu() {
let e = this._config.entity, t = this._config.tracker_entity, n = this._config.eta_entity, r = t && this.hass ? this.hass.states[t] : null, i = e && this.hass ? this.hass.states[e] : null, a = n && this.hass ? this.hass.states[n] : null, o = Object.prototype.hasOwnProperty.call(this._config, "name") && this._config.name !== void 0 && this._config.name !== "";
this._cardName = o ? Yt(this._config.name, this._config, this.hass) : Q(i, "friendly_name") || Q(r, "friendly_name") || e || t || B(this.hass, "Person");
let s = this._config.name_template ? this._evaluateStateTemplate(this._config.name_template, t) : null;
s !== null && (this._cardName = String(s));
let c = r ? uu.call(this, r) : "", l = a && r?.state !== "home" ? this.formatState(a) : "";
this._statusText = l ? `${c} | ${l}` : c;
let u = Zl(r, (e) => this._getEntityActiveState(e), this._config.state_template ? this._evaluateStateTemplate(this._config.state_template, t) : null), d = Xl(this._config, r, u);
this._personPicture = Q(i, "entity_picture") || Q(r, "entity_picture") || "", this._personZoneIcon = lu.call(this, r, i), this._personBattery1 = du.call(this, this._config.battery_entity_1), this._personBattery2 = du.call(this, this._config.battery_entity_2), this._icon = Q(i, "icon") || Q(r, "icon") || "mdi:account", this._navigationPath = $l(this._config, r), this._nameColor = this._computeFullColor(d), this._statusColor = this._computeFullColor(d), this._circleColor = this._computeCircleColor(d), this._iconColor = u ? this._computeFullColor(d) : this._computeIconColor(d), this._iconSvgForceColor = !0;
}
function lu(e, t) {
if (e?.state === "home") return "mdi:home-variant";
let n = tu(this.hass), r = t?.entity_id;
if (r) {
let e = n.zones.find((e) => Array.isArray(e.attributes?.persons) && e.attributes.persons.includes(r));
if (e?.attributes?.icon) return e.attributes.icon;
}
let i = e?.state?.toLowerCase();
if (i && i !== "not_home") {
let e = n.zoneByTrackerState.get(i);
if (e?.attributes?.icon) return e.attributes.icon;
}
return "mdi:home-minus";
}
function uu(e) {
let t = e?.state;
return t ? t === "home" ? B(this.hass, "Home") : t === "not_home" ? B(this.hass, "Away") : t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase()) : "";
}
function du(e) {
let t = e && this.hass ? this.hass.states[e] : null;
if (!t) return null;
let n = Number(t.state), r = "var(--state-icon-color)";
return Number.isFinite(n) && (r = n >= 70 ? "var(--state-sensor-battery-high-color)" : n >= 30 ? "var(--state-sensor-battery-medium-color)" : "var(--state-sensor-battery-low-color)"), {
entityId: e,
stateObj: t,
color: r
};
}
//#endregion
//#region src/cards/status/helpers/action-config.js
function fu() {
return A(this._config.hold_action) ? this._config.hold_action : null;
}
function pu() {
return A(this._config.double_tap_action) ? this._config.double_tap_action : null;
}
function mu() {
return A(this._config.entity_hold_action) ? this._config.entity_hold_action : null;
}
function hu() {
let e = vu(this), t = e.entity_tap_action;
return t?.action ? t : X(e) === "area_count" ? { action: q } : _u.call(this);
}
function gu() {
return A(this._config.entity_double_tap_action) ? this._config.entity_double_tap_action : null;
}
function _u() {
let e = vu(this), t = X(e);
if (t === "area_count") return e.tap_action?.action ? e.tap_action : { action: J };
if (t === "template") return e.tap_action?.action ? e.tap_action : { action: "more-info" };
let n = {
action: this._isIconOnlyMode() || this._isPersonMode() ? "more-info" : "navigate",
navigation_path: this._navigationPath || "/lovelace/home"
}, r = this._config.tap_action;
return r?.action ? r : n;
}
function vu(e) {
if (e._config?.mode !== "icon_only") return e._config || {};
let t = Array.isArray(e._config?.entities) ? e._config.entities[0] : null;
return t && typeof t == "object" ? {
...e._config,
...t
} : e._config || {};
}
function yu(e = 0) {
let t = this._statusItems?.[e];
return t?.tap_action?.action ? t.tap_action : this._config.tap_action?.action ? this._config.tap_action : X(t) === "area_count" ? {
action: J,
status_index: e
} : { action: "more-info" };
}
function bu(e = 0) {
let t = this._statusItems?.[e];
return A(t?.hold_action) ? t.hold_action : A(this._config.hold_action) ? this._config.hold_action : null;
}
function xu(e = 0) {
let t = this._statusItems?.[e];
return A(t?.double_tap_action) ? t.double_tap_action : A(this._config.double_tap_action) ? this._config.double_tap_action : null;
}
function Su(e = 0) {
let t = this._statusItems?.[e];
return t?.entity_tap_action?.action ? t.entity_tap_action : this._config.entity_tap_action?.action ? this._config.entity_tap_action : X(t) === "area_count" ? {
action: q,
status_index: e
} : this._getStatusItemCardTapAction(e);
}
function Cu(e = 0) {
let t = this._statusItems?.[e];
return A(t?.entity_double_tap_action) ? t.entity_double_tap_action : A(this._config.entity_double_tap_action) ? this._config.entity_double_tap_action : null;
}
function wu(e = 0) {
let t = this._statusItems?.[e];
return t?.entity_hold_action?.action ? t.entity_hold_action.action === "none" ? null : t.entity_hold_action : this._config.entity_hold_action?.action ? this._config.entity_hold_action.action === "none" ? null : this._config.entity_hold_action : null;
}
//#endregion
//#region src/common/helpers/editor-preview.js
function Tu(e) {
let t = e;
for (; t;) {
let e = t.localName || "";
if (e === "hui-dialog-edit-card" || e === "hui-dialog-edit-badge") return !0;
let n = t.getRootNode?.();
t = t.parentElement || t.assignedSlot || n?.host || null;
}
return !1;
}
//#endregion
//#region src/common/editor/helpers/group-options.js
function Eu({ config: e = {}, itemCount: t = 0, wrapEnabled: n = !!e?.wrap, perRowKey: r = "items_per_row", defaultPerRow: i = 3, scrollThreshold: a = 6 } = {}) {
let o = Math.max(1, Number(e?.[r]) || i), s = !!n && t > o;
return {
itemsPerRow: o,
shouldWrapTabs: s,
showTabScrollHint: !s && t > a || s && o > a
};
}
function Du({ itemCount: e = 0, classPrefix: t, wrapKey: n = "wrap", wrapEnabled: r = !!this._config?.[n], showWrapToggle: i = !0, showSeparateToggle: a = e > 1, separateKey: o = "separate_cards", perRowKey: s = "items_per_row", perRowLabel: c = "Items per row", defaultPerRow: l = 3 } = {}) {
let u = t || "action";
return E`
${i ? E`
${this._t("Wrap")}
this._updateConfig({
[n]: e.target.checked,
[s]: e.target.checked ? this._config?.[s] || l : this._config?.[s]
})}
>
` : ""}
${a ? E`
${this._t("Separate cards")}
this._updateConfig({ [o]: e.target.checked })}
>
` : ""}
${r ? E`
${this._renderNumberInput(c, s, {
value: this._config?.[s] || l,
min: 1,
step: 1,
onValueChanged: (e) => this._updateConfig({ [s]: Math.max(1, Number(e) || 1) })
})}
` : ""}
${t === "custom" ? E`
${this._renderIconInput("", "icon")}
${this._renderIconInput(["Active", "Icon"], "icon_on")}
${this._renderIconInput(["Inactive", "Icon"], "icon_off")}
` : ""}
${t === "template" ? E`
this._handleConfigUpdate("icon", e.detail.value || "")}
>
` : ""}
${r ? E`
this._handleConfigUpdate("entity", e.detail.value || "")}
>
` : ""}
${!r && e === "entity" ? u ? u() : E`
this._handleConfigUpdate("entity", e.detail.value || "")}
>
` : !r && e === "area_count" ? E`
${f ? f() : d ? Bu.call(this, {
config: this._config,
updateConfig: (e) => this._updateConfig(e)
}) : E`
${this._t("Area")}
this._handleConfigUpdate("area", e.detail.value || "")}
>
`}
Nu.call(this)}
.valueRenderer=${(e) => Ru.call(this, e)}
.rowRenderer=${zu}
@value-changed=${(e) => this._updateConfig({
domain: e.detail.value || void 0,
device_class: void 0,
threshold: void 0,
thresholds: void 0
})}
>
${t?.requiresDeviceClass && n.length > 0 ? E`
${this._t("Device class")}
${n.map((e) => E`
{
let n = t.target.checked ? [...new Set([...m, e.value])] : m.filter((t) => t !== e.value);
this._updateConfig({
device_class: n.length ? n : void 0,
threshold: n.includes("battery") ? this._config?.threshold : void 0,
thresholds: Lu(this._config?.thresholds, n)
});
}}
>${e.label}
`)}
` : ""}
${m.includes("battery") ? E`
this._handleConfigUpdate("threshold", e.detail.value === "" || e.detail.value === void 0 ? void 0 : Number(e.detail.value))}
>
` : ""}
${h.map((e) => {
let t = Fu(this._config, e), n = Ac(this.hass, e);
return E`
Iu.call(this, e, { value: t.detail.value === "" || t.detail.value === void 0 ? 0 : Number(t.detail.value) })}
>
`;
})}
${Mu.call(this)}
` : g === "template" ? E`
${r ? "" : u ? u("") : E`
this._handleConfigUpdate("entity", e.detail.value || "")}
>
`}
${i ? Au.call(this, {
key: "active_template",
label: "Active template"
}) : ""}
${a ? E`
this._handleConfigUpdate("inactive_template", e.detail.value || void 0)}
>
${ju.call(this, this._config?.inactive_template, this._config?.entity || "")}
` : ""}
${o ? Au.call(this, {
key: "state_template",
label: "State"
}) : ""}
${s ? Au.call(this, {
key: "label_template",
label: "Label"
}) : ""}
${c ? E`
this._handleConfigUpdate("name_template", e.detail.value || void 0)}
>
${ju.call(this, this._config?.name_template)}
` : ""}
` : ""}
this._handleConfigUpdate(e, t.detail.value || void 0)}
>
${ju.call(this, this._config?.[e], this._config?.entity || "")}
`;
}
function ju(e, t = "") {
let n = gt.call(this, e, t);
return n ? E`${n} ` : "";
}
function Mu() {
let e = vc(this._config), t = e.some((e) => e.type === "hidden"), n = e.some((e) => e.type === "low"), r = Z(this._config).includes("battery"), i = e.filter((e) => e.type === "label").map((e) => e.label), a = ({ hidden: e = t, low: r = n, labels: a = i } = {}) => {
this._updateConfig({ hide: yc([
...e ? [{ type: "hidden" }] : [],
...r ? [{ type: "low" }] : [],
...a.map((e) => ({
type: "label",
label: e
}))
]) });
};
return E`
${this._t("Hide")}
a({ hidden: !t })}
>
${this._t("Hidden entities")}
${t ? E`
${r ? E`
a({ low: !n })}
>
${this._t("Low sensors")}
${n ? E`
` : ""}
${r ? E`
${this._t("Low sensors are only used when a device has no percentage sensor.")}
` : ""}
a({ labels: Array.isArray(e.detail.value) ? e.detail.value : [] })}
>
`;
}
function Nu() {
return dc.map((e) => ({
id: e.value,
primary: this._t(e.label),
sorting_label: this._t(e.label),
icon: e.icon
}));
}
function Pu(e, t, n) {
return t === "sensor" ? n.filter((t) => t !== "battery" && !fc.has(t) && Object.values(e?.states || {}).some((e) => e.entity_id.startsWith("sensor.") && e.attributes?.device_class === t)) : [];
}
function Fu(e = {}, t) {
return Ec(e, t);
}
function Iu(e, t = {}) {
let n = Fu(this._config, e);
this._updateConfig({ thresholds: {
...this._config?.thresholds || {},
[e]: {
...n,
...t
}
} });
}
function Lu(e = {}, t = []) {
let n = Object.fromEntries(Object.entries(e || {}).filter(([e]) => t.includes(e) && e !== "battery"));
return Object.keys(n).length ? n : void 0;
}
function Ru(e) {
let t = dc.find((t) => t.value === e);
return t ? E`
${this._t(t.label)}
` : "";
}
function zu(e, t) {
return E`
${e.primary}
`;
}
function Bu({ config: e = this._config || {}, updateConfig: t = (e) => this._updateConfig(e) } = {}) {
let n = Array.isArray(e.area), r = n ? e.area : [], i = Object.values(this.hass?.areas || {}).sort((e, t) => (e.name || e.area_id).localeCompare(t.name || t.area_id)), a = i.map((e) => e.area_id), o = n && a.length > 0 && a.every((e) => r.includes(e)), s = [
{
value: "__all__",
label: this._t("All")
},
{
value: "__multiple__",
label: this._t("Multiple")
},
...i.map((e) => ({
value: e.area_id,
label: e.name || e.area_id
}))
];
return E`
{
let r = n.detail.value || "";
t({ area: r === "__all__" ? a : r === "__multiple__" ? e.area ? [e.area].flat().filter(Boolean) : [] : r });
}}
>
${n && !o ? E`
${this._t("Areas")}
${i.map((e) => E`
t({ area: n.target.checked ? [...new Set([...r, e.area_id])] : r.filter((t) => t !== e.area_id) })}
>${e.name || e.area_id}
`)}
` : ""}
`;
}
//#endregion
//#region src/editors/status/sections/status.js
function Vu() {
let e = this._config?.mode || "standard", t = e === "icon_only", n = e === "person", r = n ? "entity" : X(this._config), i = r === "area_count" ? J : r === "template" || t || n ? "more-info" : "navigate", a = this._config?.tap_action?.action || i, o = r === "area_count" ? q : t || n ? a : "more-info";
return E`
${t ? Uu.call(this, {
cardActionDefault: i,
mainEntityActionDefault: o
}) : E`
${n ? Ku.call(this, E`
${Hu.call(this)}
${this._renderEntity("Person entity", "entity")}
${this._renderEntity("Tracker entity", "tracker_entity")}
${this._renderEntity("ETA entity", "eta_entity")}
${this._renderEntity("Battery entity {index}", "battery_entity_1", { index: 1 })}
${this._renderEntity("Battery entity {index}", "battery_entity_2", { index: 2 })}
${this._renderColorPair({
label: "Color",
onLabel: ["Active", "Color"],
offLabel: ["Inactive", "Color"],
onKey: "color_on",
offKey: "color_off",
sourceKey: "color_source",
templateKey: "color",
legacySourceKey: "accent_color_source",
legacyTemplateKey: "accent_color"
})}
`) : E`
${Gu.call(this, this._config, "entity", (e) => this._updateConfig(e), (e) => this._handleEntityUpdate("entity", e))}
${Ku.call(this, E`
${Hu.call(this)}
${this._renderColorPair({
label: "Color",
onLabel: ["Active", "Color"],
offLabel: ["Inactive", "Color"],
onKey: "color_on",
offKey: "color_off",
sourceKey: "color_source",
templateKey: "color",
legacySourceKey: "accent_color_source",
legacyTemplateKey: "accent_color"
})}
${Yu.call(this, r)}
${r === "template" ? E`
${this._renderTemplateInput("State template", "state_template", { required: !1 })}
${this._renderTemplateInput("Label template", "label_template", { required: !1 })}
` : ""}
`)}
`}
${this._config?.entity || r !== "entity" ? K.call(this, {
interactions: [
{
key: "tap_action",
formKey: "tap_action",
label: "Tap behavior",
defaultAction: i,
customActions: [J],
defaultVisible: !0,
customDefaultLabel: Wu(i)
},
{
key: "hold_action",
formKey: "hold_action",
label: "Hold behavior",
defaultAction: "none",
customActions: [J]
},
{
key: "double_tap_action",
formKey: "double_tap_action",
label: "Double tap behavior",
defaultAction: "none",
customActions: [J]
},
{
key: "entity_tap_action",
formKey: "icon_tap_action",
label: "Icon tap behavior",
defaultAction: o,
customActions: [J],
customDefaultLabel: Wu(o)
},
{
key: "entity_hold_action",
formKey: "icon_hold_action",
label: "Icon hold behavior",
defaultAction: "none",
customActions: [J]
},
{
key: "entity_double_tap_action",
formKey: "icon_double_tap_action",
label: "Icon double tap behavior",
defaultAction: "none",
customActions: [J]
}
],
context: {
entity_id: this._config.entity,
area_id: this._config.area
}
}) : ""}
`}
`;
}
function Hu() {
let e = X(this._config), t = e === "area_count";
return Qo.call(this, {
label: this.hass.localize("ui.panel.lovelace.editor.card.generic.name"),
valueKey: "name",
entityKey: "entity",
defaultType: t ? "device_class" : "entity",
defaultMode: e === "template" ? "template" : "composed",
modeKey: `name:${e}`,
templateKey: "name_template"
});
}
function Uu({ cardActionDefault: e, mainEntityActionDefault: t }) {
let n = this._getStatusItems(), r = Math.min(this._selectedStatusIndex || 0, n.length - 1), i = n[r] || {}, a = X(i), o = a === "area_count", s = o ? J : e, c = o ? q : t, { itemsPerRow: l, shouldWrapTabs: u, showTabScrollHint: d } = Eu({
config: this._config,
itemCount: n.length,
defaultPerRow: 3
});
return E`
${Du.call(this, {
itemCount: n.length,
classPrefix: "status",
defaultPerRow: 3
})}
1 ? "has-tools" : ""}"
style=${u ? `--status-tabs-per-row: ${l};` : ""}
>
${n.map((e, t) => E`
this._selectStatusItem(t)}
>
${t + 1}
`)}
${d ? E`
` : ""}
this._addStatusItem()}
>
+
this._duplicateStatusItem(r)}
>
${n.length > 1 ? E`
this._removeStatusItem(r)}
>
this._moveStatusItem(r, -1)}
>
this._moveStatusItem(r, 1)}
>
` : ""}
${Gu.call(this, i, "entity", (e) => this._updateStatusItem(r, e), (e) => this._updateStatusItem(r, { entity: e }))}
${Ku.call(this, E`
${this._renderColorPair({
label: "Color",
onLabel: ["Active", "Color"],
offLabel: ["Inactive", "Color"],
onKey: "color_on",
offKey: "color_off",
sourceKey: "color_source",
templateKey: "color",
legacySourceKey: "accent_color_source",
legacyTemplateKey: "accent_color",
config: i,
pickerPrefix: `status-${r}-`,
onUpdate: (e, t) => this._updateStatusItem(r, { [e]: t })
})}
${Xu.call(this, r, i, o)}
${a === "template" ? E`
${Ju.call(this, "State template", "state_template", r, i)}
${Ju.call(this, "Label template", "label_template", r, i)}
` : ""}
`)}
${i.entity || a !== "entity" ? this._renderStatusItemInteractions(r, i, s, c) : ""}
{
this._statusStateTypeExpanded = e.detail.expanded;
}}
>
${this._t("State type")}
${ku.call(o, {
stateSource: a,
domainConfig: Y(i.domain),
deviceClassOptions: Ic(this.hass, i),
badgeMode: !1,
showActiveTemplate: !0,
showInactiveTemplate: !0,
showStateTemplate: !1,
showLabelTemplate: !1,
showNameTemplate: !1,
preserveStateConfig: !0,
renderAreaPicker: () => Bu.call(this, {
config: e,
updateConfig: n
}),
renderEntityPicker: (n = "Main entity") => E`
${n ? E`${this._t(n)} ` : ""}
${fo.call(this, {
value: e?.[t] || "",
filterOptions: Qu,
onValueChanged: r
})}
`
})}
`;
}
function Ku(e) {
return E`
{
this._statusContentExpanded = e.detail.expanded;
}}
>
${this._t("Content")}
${e}
`;
}
function qu(e, t) {
let n = { ...e };
return Object.prototype.hasOwnProperty.call(n, "entity") && (n[t] = n.entity, delete n.entity), n;
}
function Ju(e, t, n, r) {
return this._renderTemplateInput(e, t, {
required: !1,
value: r[t] || "",
onValueChanged: (e) => this._updateStatusItem(n, { [t]: e })
});
}
function Yu(e = "entity") {
let t = e === "area_count";
return ki.call(this, {
label: "Icon",
sourceKey: "icon_source",
legacySourceKey: "entity_icon_source",
templateKey: "icon",
legacyTemplateKeys: ["entity_icon_template"],
entityKey: "entity",
defaultSource: t ? "domain" : "entity",
defaultSourceLabel: t ? "Domain" : "Entity",
customIconKeys: [
"icon",
"icon_on",
"icon_off"
],
renderCustom() {
return E`
${this._renderIconInput("", "icon")}
${this._renderIconInput(["Active", "Icon"], "icon_on")}
${this._renderIconInput(["Inactive", "Icon"], "icon_off")}
`;
}
});
}
function Xu(e, t, n = !1) {
let r = this, i = {
hass: this.hass,
_config: t,
_t: (e, t) => this._t(e, t),
_handleConfigUpdate: (t, n) => r._updateStatusItem(e, { [t]: n }),
_renderIconInput: (t, n) => r._renderStatusItemIconInput(t, n, e)
};
return ki.call(i, {
label: "Icon",
sourceKey: "icon_source",
legacySourceKey: "entity_icon_source",
templateKey: "icon",
legacyTemplateKeys: ["entity_icon_template"],
entityKey: "entity",
defaultSource: n ? "domain" : "entity",
defaultSourceLabel: n ? "Domain" : "Entity",
customIconKeys: [
"icon",
"icon_on",
"icon_off"
],
renderCustom() {
return E`
${this._renderIconInput("", "icon")}
${this._renderIconInput(["Active", "Icon"], "icon_on")}
${this._renderIconInput(["Inactive", "Icon"], "icon_off")}
`;
}
});
}
function Zu() {
return [
{
label: this._t("Standard"),
value: "standard"
},
{
label: this._t("Icon only"),
value: "icon_only"
},
{
label: this._t("Person"),
value: "person"
}
];
}
var Qu = [
{
label: "All",
value: "all",
domains: null
},
{
label: "Binary Sensors",
haDomains: ["binary_sensor"],
value: "binary_sensor",
domains: ["binary_sensor"]
},
{
label: "Sensors",
haDomains: ["sensor"],
value: "sensor",
domains: ["sensor"]
}
], $u = d`
.state-type-panel,
.content-panel {
display: block;
--expansion-panel-content-padding: 0;
border-radius: var(--ha-border-radius-md);
--ha-card-border-radius: var(--ha-border-radius-md);
}
.state-type-panel > [slot="header"],
.content-panel > [slot="header"] {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.state-type-panel > ha-icon,
.content-panel > ha-icon {
color: var(--secondary-text-color);
}
.content-panel-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px;
}
.status-wrap-toggle {
display: flex;
align-items: center;
gap: 10px;
opacity: 1;
}
.status-per-row-field {
margin-left: auto;
width: 128px;
min-width: 128px;
}
.status-group-options {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 2px;
}
.status-tabs {
display: flex;
align-items: end;
gap: 6px;
border-bottom: 1px solid var(--orbit-editor-border);
padding-bottom: 2px;
margin-bottom: 12px;
overflow: visible;
}
.status-tabs.scroll-hint .status-tab-items {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 12px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 12px), transparent);
}
.status-tabs.wrapped {
display: flex;
align-items: start;
}
.status-tab-items {
display: flex;
align-items: end;
gap: 6px;
min-width: 0;
overflow-x: auto;
}
.status-tabs.wrapped .status-tab-items {
display: grid;
grid-template-columns: repeat(
var(--status-tabs-per-row, 3),
32px
);
justify-content: start;
flex: 1 1 auto;
overflow-x: auto;
}
.status-tabs-scroll-indicator {
width: 16px;
min-width: 16px;
height: 36px;
color: var(--primary-color);
display: inline-flex;
align-items: center;
justify-content: flex-end;
opacity: 0.78;
pointer-events: none;
}
.status-tabs-scroll-indicator ha-icon {
--mdc-icon-size: 18px;
}
.status-tab,
.status-tab-add {
border: none;
background: transparent;
color: inherit;
width: 32px;
min-width: 32px;
height: 36px;
padding: 0;
font: inherit;
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-medium, 500);
line-height: var(--ha-line-height-normal, 20px);
opacity: 0.6;
cursor: pointer;
}
.status-tab.active {
color: var(--primary-color);
opacity: 1;
border-bottom: 3px solid var(--primary-color);
}
.status-tabs.wrapped .status-tab,
.status-tabs.wrapped .status-tab-add {
width: 32px;
min-width: 32px;
}
.status-editor-tools .status-tab-add {
width: 34px;
min-width: 34px;
height: 34px;
border: 1px solid var(--orbit-editor-border);
border-radius: var(--ha-border-radius-lg, 12px);
background: var(--orbit-editor-control);
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 1;
}
.status-tab-add {
font-size: 24px;
opacity: 0.9;
}
.status-editor-tools {
display: flex;
gap: 4px;
margin-left: auto;
justify-content: flex-end;
}
.status-tabs.scroll-hint .status-editor-tools {
margin-left: 0;
}
.status-tabs.wrapped .status-editor-tools {
display: grid;
grid-template-columns: repeat(2, 34px);
grid-template-rows: repeat(2, 34px);
gap: 4px;
min-width: max-content;
align-self: start;
}
.status-tool-button {
width: 34px;
height: 34px;
border: 1px solid var(--orbit-editor-border);
border-radius: var(--ha-border-radius-lg, 12px);
background: var(--orbit-editor-control);
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.status-tool-button:disabled {
opacity: 0.35;
cursor: default;
}
.status-tool-button ha-icon {
--mdc-icon-size: 20px;
}
`, ed = Symbol.for("orbit-status-card-dev-preview-selected-index"), td = class extends k {
static svgCache = z;
static properties = {
hass: { attribute: !1 },
_config: { state: !0 },
_selectedStatusIndex: { state: !0 },
_colorPickerKey: { state: !0 },
_colorPickerTab: { state: !0 },
_iconPickerKey: { state: !0 },
_iconPickerTab: { state: !0 },
_iconFileSearch: { state: !0 },
_iconFilePickerOpen: { state: !0 },
_orbitIconFiles: { state: !0 },
_orbitIconFilesLoading: { state: !0 },
_localIconFiles: { state: !0 },
_localIconFilesLoading: { state: !0 },
_statusStateTypeExpanded: { state: !0 },
_statusContentExpanded: { state: !0 }
};
constructor() {
super(), this._config = this._config || {}, this._selectedStatusIndex = 0, this._colorPickerKey = "", this._colorPickerTab = "picker", this._iconPickerKey = "", this._iconPickerTab = "ha", this._iconFileSearch = "", this._iconFilePickerOpen = !1, this._orbitIconFiles = [], this._orbitIconFilesLoading = !1, this._localIconFiles = [], this._localIconFilesLoading = !1, this._statusStateTypeExpanded = !1, this._statusContentExpanded = !1;
}
connectedCallback() {
super.connectedCallback(), Bo(this), an(this, "orbit-status-card-dev");
}
disconnectedCallback() {
Vo(this), super.disconnectedCallback();
}
_getColorStyle(e) {
return Uo(e);
}
_getColorPickerValue(e) {
return Wo(e);
}
_t(e, t) {
return B(this.hass, e, t);
}
setConfig(e) {
let t = bd(e || {}), { config: n, migrated: r } = mn(e || {});
this._config = gd(n || {}), this._selectedStatusIndex = Math.min(this._selectedStatusIndex || 0, this._getStatusItems(this._config).length - 1), (r || t) && this._queueConfigMigration();
}
_queueConfigMigration() {
this._configMigrationQueued || (this._configMigrationQueued = !0, Promise.resolve().then(() => {
this._configMigrationQueued = !1, this.dispatchEvent(new CustomEvent("config-changed", {
detail: { config: this._getPreviewConfig(gd(this._config)) },
bubbles: !0,
composed: !0
}));
}));
}
_updateConfig(e) {
this._config = gd(sa(this._config, e)), this.dispatchEvent(new CustomEvent("config-changed", {
detail: { config: this._getPreviewConfig() },
bubbles: !0,
composed: !0
}));
}
_getPreviewConfig(e = this._config) {
return {
...e,
[ed]: this._selectedStatusIndex || 0
};
}
_handleInput(e, t) {
this._updateConfig({ [e]: t.target.value });
}
_handleConfigUpdate(e, t) {
this._updateConfig({ [e]: t });
}
_handleEntityUpdate(e, t) {
if (t) {
this._handleConfigUpdate(e, t);
return;
}
if (e === "entity" && X(this._config) !== "entity") {
this._handleConfigUpdate(e, t);
return;
}
if (e === "entity") {
this._clearMainEntity();
return;
}
if (e === "tracker_entity") {
this._updateConfig(W("tracker_entity", od));
return;
}
this._handleConfigUpdate(e, t);
}
_clearMainEntity() {
if (this._config?.mode === "person") {
this._updateConfig(W("entity", ad));
return;
}
this._updateConfig(W("entity", rd));
}
_getStatusItems(e = this._config) {
return Array.isArray(e?.entities) && e.entities.length ? e.entities.map((e) => typeof e == "string" ? { entity: e } : e || {}) : [{
entity: e?.entity || "",
...mc(e),
color_source: e?.color_source || e?.accent_color_source || "",
color: e?.color || e?.accent_color || "",
accent_color_source: e?.accent_color_source || "",
accent_color: e?.accent_color || "",
color_on: e?.color_on || "",
color_off: e?.color_off || "",
icon_source: e?.icon_source || e?.entity_icon_source || "",
icon: e?.icon || e?.entity_icon || "",
icon_on: e?.icon_on || e?.entity_icon_on || "",
icon_off: e?.icon_off || e?.entity_icon_off || "",
entity_icon_source: e?.entity_icon_source || "",
entity_icon_template: e?.entity_icon_template || "",
entity_icon: e?.entity_icon || "",
entity_icon_on: e?.entity_icon_on || "",
entity_icon_off: e?.entity_icon_off || "",
state_template: e?.state_template || "",
label_template: e?.label_template || "",
name_template: e?.name_template || "",
tap_action: e?.tap_action,
hold_action: e?.hold_action,
double_tap_action: e?.double_tap_action,
entity_tap_action: e?.entity_tap_action,
entity_hold_action: e?.entity_hold_action,
entity_double_tap_action: e?.entity_double_tap_action
}];
}
_handleStatusModeChange(e) {
if (this._config?.mode === "icon_only" && e === "standard") {
let t = this._getStatusItems(), n = t[Math.min(this._selectedStatusIndex || 0, t.length - 1)] || {};
this._updateConfig({
...U(id),
mode: e,
entities: void 0,
entity: n.entity || void 0,
...mc(n),
color_source: n.color_source,
color: n.color,
accent_color_source: n.accent_color_source,
accent_color: n.accent_color,
color_on: n.color_on,
color_off: n.color_off,
icon_source: n.icon_source,
icon: n.icon,
icon_on: n.icon_on,
icon_off: n.icon_off,
entity_icon_source: n.entity_icon_source,
entity_icon_template: n.entity_icon_template,
entity_icon: n.entity_icon,
entity_icon_on: n.entity_icon_on,
entity_icon_off: n.entity_icon_off,
state_template: n.state_template,
label_template: n.label_template,
name_template: n.name_template,
tap_action: n.tap_action,
hold_action: n.hold_action,
double_tap_action: n.double_tap_action,
entity_tap_action: n.entity_tap_action,
entity_hold_action: n.entity_hold_action,
entity_double_tap_action: n.entity_double_tap_action
});
return;
}
this._updateConfig({
mode: e,
...e === "icon_only" ? {} : { entities: void 0 }
});
}
_selectStatusItem(e) {
this._selectedStatusIndex = e, this.dispatchEvent(new CustomEvent("config-changed", {
detail: { config: this._getPreviewConfig() },
bubbles: !0,
composed: !0
}));
}
_addStatusItem() {
let e = this._getStatusItems();
this._selectedStatusIndex = e.length, this._updateConfig(U(id, { entities: [...e, { entity: "" }] }));
}
_duplicateStatusItem(e) {
let t = this._getStatusItems(), n = t[e];
if (!n) return;
let r = [...t];
r.splice(e + 1, 0, structuredClone(n)), this._selectedStatusIndex = e + 1, this._updateConfig(U(id, { entities: r }));
}
_removeStatusItem(e) {
let t = this._getStatusItems();
if (t.length <= 1) {
this._updateConfig(W("entity", rd));
return;
}
let n = t.filter((t, n) => n !== e);
this._selectedStatusIndex = Math.max(0, Math.min(e, n.length - 1)), this._updateConfig({ entities: n });
}
_moveStatusItem(e, t) {
let n = this._getStatusItems(), r = e + t;
if (r < 0 || r >= n.length) return;
let i = [...n], [a] = i.splice(e, 1);
i.splice(r, 0, a), this._selectedStatusIndex = r, this._updateConfig(U(id, { entities: i }));
}
_updateStatusItem(e, t) {
let n = this._getStatusItems(), r = {
...n[e] || {},
...t
};
if (t.entity === "" && X(r) === "entity" && nd(r), Array.isArray(this._config?.entities)) {
let t = [...n];
t[e] = r;
let i = { entities: t };
t.length > 1 && Object.assign(i, U(id)), this._updateConfig(i);
return;
}
if (t.entity === "" && X(r) === "entity") {
this._updateConfig(W("entity", rd));
return;
}
this._updateConfig({
entity: r.entity || "",
...mc(r),
color_source: r.color_source || "",
color: r.color || "",
accent_color_source: r.accent_color_source || "",
accent_color: r.accent_color || "",
color_on: r.color_on || "",
color_off: r.color_off || "",
icon_source: r.icon_source || "",
icon: r.icon || "",
icon_on: r.icon_on || "",
icon_off: r.icon_off || "",
entity_icon_source: r.entity_icon_source || "",
entity_icon_template: r.entity_icon_template || "",
entity_icon: r.entity_icon || "",
entity_icon_on: r.entity_icon_on || "",
entity_icon_off: r.entity_icon_off || "",
state_template: r.state_template || "",
label_template: r.label_template || "",
name_template: r.name_template || "",
tap_action: r.tap_action,
hold_action: r.hold_action,
double_tap_action: r.double_tap_action,
entity_tap_action: r.entity_tap_action,
entity_hold_action: r.entity_hold_action,
entity_double_tap_action: r.entity_double_tap_action
});
}
_renderInput(e, t, n = "", r = {}) {
return ia.call(this, e, t, n, r);
}
_renderTemplateInput(e, t, n = {}) {
return aa.call(this, e, t, n);
}
_renderNumberInput(e, t, n = {}) {
return oa.call(this, e, t, n);
}
_renderColor(e, t, n) {
return da.call(this, e, t, n);
}
_renderColorControl(e, t, n, r, i) {
return fa.call(this, e, t, n, r, i);
}
_renderColorPair(e) {
return pa.call(this, e);
}
_renderEntity(e, t, n) {
return Ro.call(this, e, t, n);
}
_renderStatusItemInteractions(e, t, n, r) {
let i = {
hass: this.hass,
_config: t,
_t: (e, t) => this._t(e, t),
requestUpdate: () => this.requestUpdate(),
_updateConfig: (t) => this._updateStatusItem(e, t)
};
return K.call(i, {
interactions: [
{
key: "tap_action",
formKey: "tap_action",
label: "Tap behavior",
defaultAction: n,
customActions: [J],
defaultVisible: !0,
customDefaultLabel: wd(n)
},
{
key: "hold_action",
formKey: "hold_action",
label: "Hold behavior",
defaultAction: "none",
customActions: [J]
},
{
key: "double_tap_action",
formKey: "double_tap_action",
label: "Double tap behavior",
defaultAction: "none",
customActions: [J]
},
{
key: "entity_tap_action",
formKey: "icon_tap_action",
label: "Icon tap behavior",
defaultAction: r,
customActions: [J],
customDefaultLabel: wd(r)
},
{
key: "entity_hold_action",
formKey: "icon_hold_action",
label: "Icon hold behavior",
defaultAction: "none",
customActions: [J]
},
{
key: "entity_double_tap_action",
formKey: "icon_double_tap_action",
label: "Icon double tap behavior",
defaultAction: "none",
customActions: [J]
}
],
context: {
entity_id: t.entity,
area_id: this._config?.area
}
});
}
_renderArea(e, t) {
return zo.call(this, e, t);
}
_renderIconInput(e, t, n = "mdi:information-outline or icon.svg") {
return Oi.call(this, e, t, n);
}
_loadLocalIconFiles(e = "") {
return ji.call(this, e);
}
_renderStatusItemIconInput(e, t, n, r = "mdi:information-outline or icon.svg") {
let i = this._getStatusItems()[n] || {}, a = {
hass: this.hass,
_config: i,
_iconPickerPrefix: `status-${n}-icon`,
_t: (e, t) => this._t(e, t),
_isImageIcon: (e) => this._isImageIcon(e),
_resolveIconPath: (e) => this._resolveIconPath(e),
_getInlineSvg: (e) => this._getInlineSvg(e),
_loadLocalIconFiles: (e) => this._loadLocalIconFiles(e),
requestUpdate: () => this.requestUpdate(),
renderRoot: this.renderRoot,
_handleConfigUpdate: (e, t) => this._updateStatusItem(n, { [e]: t })
};
return Object.defineProperties(a, {
_iconPickerKey: {
get: () => this._iconPickerKey,
set: (e) => {
this._iconPickerKey = e;
}
},
_iconPickerTab: {
get: () => this._iconPickerTab,
set: (e) => {
this._iconPickerTab = e;
}
},
_localIconFiles: {
get: () => this._localIconFiles,
set: (e) => {
this._localIconFiles = e;
}
},
_orbitIconFiles: {
get: () => this._orbitIconFiles,
set: (e) => {
this._orbitIconFiles = e;
}
},
_localIconFilesLoading: {
get: () => this._localIconFilesLoading,
set: (e) => {
this._localIconFilesLoading = e;
}
},
_orbitIconFilesLoading: {
get: () => this._orbitIconFilesLoading,
set: (e) => {
this._orbitIconFilesLoading = e;
}
}
}), Oi.call(a, e, t, r);
}
_isImageIcon(e) {
return Ei(e);
}
_resolveIconPath(e) {
return Di(e);
}
_getInlineSvg(e) {
return R.call(this, e, { forceColor: !0 });
}
_renderStatusSection() {
return Vu.call(this);
}
render() {
return E`
${this._renderStatusSection()}
${this._t("Orbit Status Card (Dev) v{version}", { version: t.status })}
${n ? Od.call(this, t, i) : E`
${e === "person" ? Ad.call(this) : this._isImageIcon(this._icon) ? E`
${c ? V(c) : E`
`}
` : this._useNativeMainIcon && this._mainIconStateObj ? E`
` : E`
`}
${Md.call(this, this._config.entity, this.hass?.states?.[this._config.entity])}
${e === "icon_only" ? E`
${o}
` : E`
`}
`}
${this._renderActiveEntitiesDialog()}
${this._renderCurrentActivityDialog()}
`;
}
function Od(e, t) {
return E`
${Fd(e, t).map((e, n) => E`
${e.map((e, r) => kd.call(this, e, n * t + r))}
${Id(e.length, t, "status-icon-spacer")}
`)}
${this._isImageIcon(e.icon) ? E`
${o ? V(o) : E`
`}
` : e.useStateIcon && e.nativeIconStateObj ? E`
` : E`
`}
${e.suppressEntityIssueBadge ? "" : Md.call(this, e.entityId, e.stateObj)}
${i}
`;
return (this._statusItems?.length || 0) > 1 && !this._config?.separate_cards ? E`
this._handleStatusItemClick(e, t)}
@dblclick=${(e) => this._handleStatusItemDoubleClick(e, t)}
@pointerdown=${(e) => this._handleStatusItemPointerDown(e, t)}
@pointerup=${this._handleStatusItemPointerUp}
@pointerleave=${this._handleStatusItemPointerCancel}
@pointercancel=${this._handleStatusItemPointerCancel}
@contextmenu=${(e) => this._handleStatusItemContextMenu(e, t)}
>
${s}
` : E`
this._handleStatusItemClick(e, t)}
@dblclick=${(e) => this._handleStatusItemDoubleClick(e, t)}
@pointerdown=${(e) => this._handleStatusItemPointerDown(e, t)}
@pointerup=${this._handleStatusItemPointerUp}
@pointerleave=${this._handleStatusItemPointerCancel}
@pointercancel=${this._handleStatusItemPointerCancel}
@contextmenu=${(e) => this._handleStatusItemContextMenu(e, t)}
>
${s}
`;
}
function Ad() {
return E`
${this._personPicture ? E`
` : E`
`}
${jd.call(this, "zone", this._personZoneIcon || "mdi:home-minus", this._computeFullColor("blue"))}
${this._personBattery1 ? jd.call(this, "battery-1", null, this._personBattery1.color, this._personBattery1.entityId, this._personBattery1.stateObj) : ""}
${this._personBattery2 ? jd.call(this, "battery-2", null, this._personBattery2.color, this._personBattery2.entityId, this._personBattery2.stateObj) : ""}
${i ? E`
${Md.call(this, r, i)}
`;
}
function Md(e, t) {
let n = ut(e, t);
if (!n) return "";
let r = this._t(n === "missing" ? "Entity not found" : "Unavailable");
return E`
`;
}
function Nd(e) {
let t = e?.attributes || {};
return String(t.icon || "").toLowerCase().includes("battery-charging") || t.battery_charging === !0 || t.is_charging === !0 || t.charging === !0;
}
function Pd(e) {
let t = String(e || "").match(/-?\d+(?:\.\d+)?/);
return (t ? Number(t[0]) : null) === 0 ? "" : t?.[0] || "";
}
function Fd(e, t = 1) {
let n = Math.max(1, t), r = [];
for (let t = 0; t < e.length; t += n) r.push(e.slice(t, t + n));
return r;
}
function Id(e, t, n) {
let r = Math.max(0, t - e);
return Array.from({ length: r }, () => E`
`);
}
//#endregion
//#region src/common/styles/editor-preview-selection.js
var Ld = d`
.orbit-editor-preview-selected {
isolation: isolate;
position: relative;
}
.orbit-editor-preview-selected::before {
border: 2px solid var(--primary-color);
border-radius: inherit;
box-sizing: border-box;
content: "";
inset: 0;
pointer-events: none;
position: absolute;
z-index: 100;
}
`, Rd = [
fi,
pi,
mi,
Ld,
d`
ha-card {
aspect-ratio: 3 / 1;
border-radius: 15px;
}
ha-card.mode-icon_only {
aspect-ratio: 0.94 / 1;
}
ha-card.mode-icon_only.grouped {
--orbit-grouped-item-gap: clamp(5px, 1.4cqw, 8px);
aspect-ratio: auto;
container-type: inline-size;
}
ha-card.mode-icon_only.grouped:not(.separate-cards) {
background: var(--ha-card-background, var(--card-background-color, #1a1a1a));
overflow: hidden;
}
ha-card.mode-icon_only.grouped.separate-cards {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: var(--ha-card-border-width, 1px) solid transparent;
box-shadow: none;
overflow: visible;
}
ha-card.mode-person {
aspect-ratio: 3 / 1;
}
.status-container {
--status-circle-color: rgba(var(--color-theme),0.05);
--status-icon-color: rgba(var(--color-theme),0.4);
--status-name-color: rgb(var(--color-theme));
--status-text-color: rgb(var(--color-theme));
overflow: hidden;
}
.status-circle {
background: var(--status-circle-color);
position: absolute;
left: -8%;
top: 18%;
width: 34%;
aspect-ratio: 1 / 1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
touch-action: manipulation;
z-index: 3;
}
.status-circle .main-icon {
--orbit-main-icon-size: 45%;
color: var(--status-icon-color);
}
.status-circle .main-image-icon {
width: 45%;
height: 45%;
color: var(--status-icon-color);
}
.status-container .content {
justify-content: center;
padding-left: 31%;
pointer-events: none;
}
.status-container .status {
color: var(--status-text-color);
font-size: clamp(16px, 8cqw, 32px);
}
.status-container .card-name {
color: var(--status-name-color);
}
.status-container.mode-icon_only .status-circle {
left: -12%;
top: auto;
bottom: -12%;
width: 82%;
transform: none;
}
.status-container.mode-icon_only.grouped {
display: block;
height: auto;
overflow: visible;
padding: 0;
}
.status-icon-grid {
display: flex;
flex-direction: column;
gap: var(--orbit-grouped-item-gap);
width: 100%;
height: 100%;
box-sizing: border-box;
}
.status-container.mode-icon_only.grouped .status-icon-grid {
height: auto;
}
.status-icon-row {
display: flex;
gap: var(--orbit-grouped-item-gap);
width: 100%;
}
.status-icon-item {
border-radius: 15px;
box-sizing: border-box;
container-type: size;
cursor: pointer;
overflow: hidden;
position: relative;
flex: 1 1 0;
min-width: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.status-icon-spacer {
flex: 1 1 0;
min-width: 0;
visibility: hidden;
pointer-events: none;
}
.status-container.mode-icon_only.grouped .status-icon-item {
aspect-ratio: 0.94 / 1;
}
ha-card.mode-icon_only.grouped:not(.separate-cards) .status-icon-item {
--ha-card-background: transparent;
--card-background-color: transparent;
background: transparent !important;
border: var(--ha-card-border-width, 1px) solid transparent;
box-shadow: none;
}
.status-container.mode-icon_only.grouped .status-icon-spacer {
aspect-ratio: 0.94 / 1;
}
ha-card.mode-icon_only.grouped.separate-cards .status-icon-item {
border-radius: 15px;
overflow: hidden;
}
.status-icon-item .status-circle {
left: -12%;
top: auto;
bottom: -12%;
width: 82%;
}
.status-container.mode-icon_only .status-circle .main-icon {
--orbit-main-icon-size: 54%;
}
.status-container.mode-icon_only .status-circle .main-image-icon {
width: 54%;
height: 54%;
}
.status-container.mode-person .status-circle {
overflow: visible;
}
.status-container.mode-person .person-main-icon {
position: relative;
width: 100%;
height: 100%;
}
.status-container.mode-person .person-picture,
.status-container.mode-person .person-fallback-icon {
width: 100%;
height: 100%;
}
.status-container.mode-person .person-picture {
border-radius: 50%;
object-fit: cover;
display: block;
}
.status-container.mode-person .person-fallback-icon {
--mdc-icon-size: 100%;
color: var(--status-icon-color);
}
.person-badge {
--person-badge-size: clamp(16px, 18%, 40px);
--person-badge-ring: clamp(2px, 0.55cqw, 4px);
position: absolute;
width: var(--person-badge-size);
height: var(--person-badge-size);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 var(--person-badge-ring) var(--ha-card-background, var(--card-background-color));
transform: translate(-50%, -50%);
z-index: 5;
pointer-events: none;
}
.person-badge.clickable {
pointer-events: auto;
cursor: pointer;
}
.person-badge-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.person-badge ha-icon,
.person-badge ha-state-icon {
--mdc-icon-size: 92%;
width: 92%;
height: 92%;
display: flex;
align-items: center;
justify-content: center;
transform: none;
color: var(--primary-background-color);
}
.person-badge-zone {
left: 37%;
top: 4%;
z-index: 6;
}
.person-badge-zone ha-icon {
transform: none;
}
.person-badge ha-state-icon {
transform: translate(4%, -10%);
}
.person-badge ha-state-icon.charging {
transform: translate(10%, -10%);
}
.person-badge-battery-1 {
left: 69%;
top: 4%;
}
.person-badge-battery-2 {
left: 94%;
top: 25%;
}
.status-badge {
background: var(--status-circle-color);
color: var(--status-icon-color);
position: absolute;
top: 5%;
right: 5%;
min-width: clamp(20px, 36cqw, 80px);
height: clamp(20px, 36cqw, 80px);
padding: 0 clamp(3px, 7cqw, 18px);
border-radius: 999px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: clamp(17px, 23cqw, 52px);
font-weight: bold;
line-height: 1;
white-space: nowrap;
z-index: 4;
pointer-events: none;
}
.status-badge[hidden] {
display: none;
}
`
], zd = d`
ha-adaptive-dialog {
--ha-dialog-min-height: auto;
--ha-bottom-sheet-height: auto;
}
.active-entities-dialog-content {
min-width: 0;
padding: 0 var(--ha-space-4, 16px);
}
.active-entity-row {
position: relative;
display: flex;
align-items: center;
gap: var(--ha-space-3, 12px);
min-height: 52px;
padding: 6px 0;
}
.active-entity-row::before {
position: absolute;
top: 0;
right: -12px;
left: -12px;
border-top: 1px solid var(--divider-color);
content: "";
pointer-events: none;
}
.active-entity-row > ha-state-icon,
.active-entity-row > ha-icon {
flex: 0 0 auto;
margin: 12px;
transform: translateX(-4px);
}
.active-entity-row ha-state-icon,
.active-entity-row ha-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
line-height: 0;
--mdc-icon-size: 36px;
}
.active-entity-control-button {
display: grid;
flex: 0 0 auto;
width: 48px;
height: 48px;
margin: 6px;
padding: 0;
transform: translateX(-4px);
place-items: center;
border: 0;
border-radius: 50%;
outline: 0;
background: transparent;
color: inherit;
cursor: pointer;
}
.active-entity-device-button {
width: 36px;
height: 36px;
margin: 12px;
transform: translateX(-4px);
}
.active-entity-control-button ha-state-icon,
.active-entity-control-button ha-icon {
pointer-events: none;
}
.active-entity-control-button:focus-visible,
.active-entity-control-button:hover {
background: var(--secondary-background-color);
}
.active-entity-info {
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
gap: 1px;
padding: 4px 0;
border: 0;
outline: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
}
.active-entity-info:focus-visible {
border-radius: var(--ha-border-radius-md);
background: var(--secondary-background-color);
}
.active-entity-name {
overflow: hidden;
color: var(--primary-text-color);
text-overflow: ellipsis;
white-space: nowrap;
}
.active-entity-area,
.active-entity-state-line {
color: var(--secondary-text-color);
font-size: var(--ha-font-size-s, 12px);
}
.active-entity-area {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.active-entity-state-line {
display: flex;
align-items: baseline;
gap: 5px;
}
.active-entity-state-line state-display {
color: var(--secondary-text-color);
font-size: var(--ha-font-size-s, 12px);
}
.active-entities-empty {
padding: var(--ha-space-5, 20px) 0;
color: var(--secondary-text-color);
text-align: center;
}
.active-entities-confirmation-text {
margin: 0;
color: var(--primary-text-color);
}
.active-entities-confirmation-title {
margin: inherit;
padding: 0 var(--ha-space-2, 8px);
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
`, Bd = d`
.current-activity-dialog {
--ha-dialog-width-sm: 640px;
--mdc-dialog-min-width: min(640px, calc(100vw - 32px));
--mdc-dialog-max-width: min(640px, calc(100vw - 32px));
--mdc-dialog-min-height: 0px;
--ha-dialog-min-height: 0px;
--ha-bottom-sheet-height: auto;
}
.current-activity-dialog-content {
min-width: 0;
height: min(
var(--current-activity-height, 140px),
calc(100dvh - 216px)
);
max-height: calc(100dvh - 216px);
padding: 0 var(--ha-space-4, 16px) var(--ha-space-4, 16px);
overflow-x: hidden;
overflow-y: auto;
}
.current-activity-scope-selector {
width: 180px;
}
.current-activity-date-browser {
display: flex;
padding: 0 var(--ha-space-4, 16px) var(--ha-space-3, 12px);
}
.current-activity-date-browser ha-date-range-picker {
width: 100%;
}
.current-activity-dialog-content > ha-logbook {
display: block;
height: 100%;
max-height: calc(100dvh - 216px);
}
.current-activity-dialog-message {
display: grid;
min-height: 120px;
place-items: center;
color: var(--secondary-text-color);
text-align: center;
}
@media (max-width: 600px) {
.current-activity-scope-selector {
width: 156px;
}
.current-activity-dialog-content {
padding-inline: 0;
}
.current-activity-date-browser {
padding-inline: 0;
}
}
@media (max-width: 870px), (max-height: 500px) {
.current-activity-dialog {
--ha-bottom-sheet-height: min(
90dvh,
calc(
100dvh - max(var(--safe-area-inset-top, 0px), 48px)
)
);
--ha-bottom-sheet-max-height: var(--ha-bottom-sheet-height);
--dialog-content-padding: 0;
}
.current-activity-dialog-content {
flex: 1 1 auto;
min-height: 0;
height: auto;
max-height: none;
}
.current-activity-dialog-content > ha-logbook {
min-height: 0;
max-height: none;
}
}
`, Vd = class extends k {
static svgCache = z;
static get properties() {
return {
hass: {},
_config: { type: Object },
_cardName: { type: String },
_statusText: { type: String },
_icon: { type: String },
_nameColor: { type: String },
_statusColor: { type: String },
_iconColor: { type: String },
_circleColor: { type: String },
_navigationPath: { type: String },
_personPicture: { type: String },
_personZoneIcon: { type: String },
_personBattery1: { type: Object },
_personBattery2: { type: Object },
_statusItems: { type: Array },
_templateRevision: { type: Number },
...Jc,
...Nl
};
}
constructor() {
super(), Yc.call(this), Pl.call(this), this._activeEntitiesStatusIndex = 0, this._currentActivityStatusIndex = 0;
}
static getConfigElement() {
return document.createElement("orbit-status-card-dev-editor");
}
static getStubConfig() {
return {
type: "custom:orbit-status-card-dev",
mode: "standard",
entity: ""
};
}
getLayoutOptions() {
if (this._config?.mode === "icon_only") {
let e = iu(this._config).length, t = Wd(this._config, e);
return {
grid_columns: Math.max(1, t),
grid_min_columns: .5,
grid_rows: "auto"
};
}
return {
grid_columns: 3,
grid_min_columns: 2
};
}
setConfig(e) {
this._config = mn(e).config;
let t = this._config.color_off || "theme";
this._nameColor = this._computeFullColor(t), this._statusColor = this._computeFullColor(t), this._iconColor = this._computeIconColor(t), this._circleColor = this._computeCircleColor(t), this._statusItems = [];
}
willUpdate(e) {
return (e.has("_config") || e.has("hass")) && (mt.call(this, this._getTemplateEntries()), this._syncCurrentActivityEntities()), ru.call(this, e);
}
_syncCurrentActivityEntities() {
if (!this._currentActivityOpen) return;
let e = this._currentActivityStatusIndex ?? 0, t = this._config?.mode === "icon_only" ? iu(this._config)[e] || {} : this._config || {}, n = zc(this.hass, t), r = jc(n, t, (e) => this._getEntityActiveState(e)).map((e) => e.entity_id);
Ll.call(this, r, n.map((e) => e.entity_id));
}
disconnectedCallback() {
ht.call(this), this._clearMainIconHoldTimer(), this._clearStatusItemHoldTimer(), this._clearDoubleTapTimer(), Qc.call(this), super.disconnectedCallback();
}
shouldUpdate(e) {
return $c.call(this, e) ? !0 : $n.call(this, e, this._getRelevantEntities(), {
hasTemplates: er(this._config),
includeZones: this._config?.mode === "person"
});
}
_handleAction(e, t = null) {
if (e?.action === "Current state") {
Vl.call(this), this._activeEntitiesStatusIndex = e.status_index ?? 0, Xc.call(this);
return;
}
if (e?.action === "current-activity") {
tl.call(this);
let t = e.status_index ?? 0;
this._currentActivityStatusIndex = t;
let n = this._config?.mode === "icon_only" ? iu(this._config)[t] || {} : this._config || {}, r = zc(this.hass, n), i = jc(r, n, (e) => this._getEntityActiveState(e)).map((e) => e.entity_id), a = X(n) === "area_count", o = a ? r.map((e) => e.entity_id) : i, s = wc(this.hass, n);
Fl.call(this, i, o, a, s);
return;
}
return He.call(this, e, t);
}
_renderActiveEntitiesDialog() {
let e = this._config?.mode === "icon_only" ? iu(this._config)[this._activeEntitiesStatusIndex] || {} : this._config;
return Al.call(this, jc(zc(this.hass, e), e, (e) => this._getEntityActiveState(e)), e);
}
_renderCurrentActivityDialog() {
return Jl.call(this);
}
_t(e, t) {
return B(this.hass, e, t);
}
_handleTap(e) {
if (!j(this)) {
if (this._shouldSuppressMainIconTap(e)) {
this._stopEvent(e);
return;
}
if (this._isMainIconEvent(e)) {
this._handleMainEntityTap(e);
return;
}
M.call(this, e, this._getStatusItemEntityId(0), this._getCardTapAction(), this._getCardDoubleTapAction());
}
}
_handleDoubleTap(e) {
if (this._isMainIconEvent(e)) {
this._handleMainEntityDoubleTap(e);
return;
}
N.call(this, e, this._config.entity, this._getCardDoubleTapAction());
}
_isMainIconEvent(e) {
if (e.composedPath().some((e) => e?.classList && (e.classList.contains("circle") || e.classList.contains("status-circle") || e.classList.contains("main-icon") || e.classList.contains("main-image-icon")))) return !0;
let t = (this.shadowRoot?.querySelector(".status-circle"))?.getBoundingClientRect();
return t ? e.clientX >= t.left && e.clientX <= t.right && e.clientY >= t.top && e.clientY <= t.bottom : !1;
}
_handleMainEntityTap(e) {
if (j(this)) return;
if (this._shouldSuppressMainIconTap(e)) {
this._stopEvent(e);
return;
}
if (this._longPressTriggered) {
this._longPressTriggered = !1, this._stopEvent(e);
return;
}
let t = this._getStatusItemEntityId(0), n = this._getMainEntityTapAction() || this._getCardTapAction();
!t && !Hd(n) || M.call(this, e, t, n, this._getMainEntityDoubleTapAction());
}
_handleMainEntityDoubleTap(e) {
N.call(this, e, this._config.entity, this._getMainEntityDoubleTapAction());
}
_handleCardTapAction() {
let e = this._getCardTapAction(), t = this._getStatusItemEntityId(0);
if (e.action && e.action !== "navigate") {
this._handleAction(e, t);
return;
}
this._navigate(e.navigation_path || this._navigationPath || "/lovelace/home");
}
_handleCardPointerDown(e) {
if (j(this) || this._isMainIconEvent(e)) return;
this._stopEvent(e), this._clearStatusItemHoldTimer();
let t = this._getCardHoldAction();
t && (this._statusItemHoldTimer = setTimeout(() => {
this._statusItemLongPressTriggered = !0, this._handleAction(t, this._config.entity);
}, this._LONG_PRESS_DELAY));
}
_handleCardPointerUp(e) {
this._isMainIconEvent(e) || (this._stopEvent(e), this._clearStatusItemHoldTimer());
}
_handleCardPointerCancel(e) {
this._isMainIconEvent(e) || (this._stopEvent(e), this._clearStatusItemHoldTimer());
}
_handleCardContextMenu(e) {
if (this._isMainIconEvent(e)) return;
this._stopEvent(e);
let t = this._getCardHoldAction();
t && (this._clearStatusItemHoldTimer(), this._statusItemLongPressTriggered = !0, this._handleAction(t, this._config.entity));
}
_handleStatusItemClick(e, t = 0) {
if (this._statusItemLongPressTriggered) {
this._statusItemLongPressTriggered = !1, this._stopEvent(e);
return;
}
let n = this._getStatusItemEntityId(t), r = this._isStatusItemMainIconEvent(e) ? this._getStatusItemMainEntityTapAction(t) : this._getStatusItemCardTapAction(t), i = this._isStatusItemMainIconEvent(e) ? this._getStatusItemMainEntityDoubleTapAction(t) : this._getStatusItemCardDoubleTapAction(t);
!n && !Hd(r) || M.call(this, e, n, r?.action ? Ud(r, t) : { action: "more-info" }, Ud(i, t));
}
_handleStatusItemDoubleClick(e, t = 0) {
N.call(this, e, this._getStatusItemEntityId(t), Ud(this._isStatusItemMainIconEvent(e) ? this._getStatusItemMainEntityDoubleTapAction(t) : this._getStatusItemCardDoubleTapAction(t), t));
}
_handleStatusItemPointerDown(e, t = 0) {
if (j(this)) return;
this._stopEvent(e), this._clearStatusItemHoldTimer();
let n = this._isStatusItemMainIconEvent(e) ? this._getStatusItemMainEntityHoldAction(t) : this._getStatusItemCardHoldAction(t);
n && (this._statusItemHoldTimer = setTimeout(() => {
this._statusItemLongPressTriggered = !0, this._handleAction(Ud(n, t), this._getStatusItemEntityId(t));
}, this._LONG_PRESS_DELAY));
}
_handleStatusItemPointerUp(e) {
this._stopEvent(e), this._clearStatusItemHoldTimer();
}
_handleStatusItemPointerCancel(e) {
this._stopEvent(e), this._clearStatusItemHoldTimer();
}
_handleStatusItemContextMenu(e, t = 0) {
this._stopEvent(e);
let n = this._isStatusItemMainIconEvent(e) ? this._getStatusItemMainEntityHoldAction(t) : this._getStatusItemCardHoldAction(t);
n && (this._clearStatusItemHoldTimer(), this._statusItemLongPressTriggered = !0, this._handleAction(Ud(n, t), this._getStatusItemEntityId(t)));
}
_navigate(e) {
return Ke.call(this, e);
}
_handlePersonBadgeStop(e) {
e.currentTarget?.dataEntity && e.stopPropagation();
}
_handlePersonBadgePointerUp(e) {
let t = e.currentTarget?.dataEntity;
t && (e.stopPropagation(), this._personBadgeActionFired = !0, this._openPersonBadgeMoreInfo(t));
}
_handlePersonBadgeClick(e) {
let t = e.currentTarget?.dataEntity;
if (t) {
if (e.stopPropagation(), this._personBadgeActionFired) {
this._personBadgeActionFired = !1;
return;
}
this._openPersonBadgeMoreInfo(t);
}
}
_openPersonBadgeMoreInfo(e) {
this.dispatchEvent(new CustomEvent("hass-more-info", {
detail: { entityId: e },
bubbles: !0,
composed: !0
}));
}
_computeFullColor(e) {
return Nt.call(this, e);
}
_computeIconColor(e) {
return Pt.call(this, e);
}
_computeCircleColor(e) {
return Ft.call(this, e);
}
_getMainStateObj() {
let e = this._config.entity;
return e && this.hass ? this.hass.states[e] : null;
}
formatState(e) {
return it(e, this.hass);
}
_getEntityActiveState(e) {
return at(e);
}
_isImageIcon(e) {
return Hn(e);
}
_resolveIconPath(e) {
return Un(e);
}
_getInlineSvg(e, t = !0) {
return R.call(this, e, { forceColor: t });
}
_getSvgColorOverride(e, t) {
return Wn(e, t);
}
_evaluateStateTemplate(e, t) {
return F.call(this, e, t);
}
_getTemplateEntries() {
if (this._config?.mode === "icon_only") return [
...iu(this._config).flatMap((e) => (X(e) === "area_count" ? [] : [
e.state_template,
e.active_template,
e.inactive_template,
e.label_template,
e.name_template
]).filter(Boolean).map((t) => ({
template: t,
entityId: e.entity || ""
}))),
...St(this._config),
...Ct(this._config)
];
let e = this._config?.mode === "person" ? this._config?.tracker_entity || "" : this._config?.entity || "";
return [
...(X(this._config) === "area_count" ? [] : [
this._config?.state_template,
this._config?.active_template,
this._config?.inactive_template,
this._config?.label_template,
this._config?.name_template
]).filter(Boolean).map((t) => ({
template: t,
entityId: e
})),
...St(this._config),
...Ct(this._config)
];
}
_getRelevantEntities() {
return this._config?.mode === "icon_only" ? iu(this._config).flatMap((e) => X(e) === "area_count" ? Hc(this.hass, e) : [e.entity]) : X(this._config) === "area_count" ? Hc(this.hass, this._config) : [
this._config?.entity,
this._config?.tracker_entity,
this._config?.eta_entity,
this._config?.battery_entity_1,
this._config?.battery_entity_2
];
}
get _LONG_PRESS_DELAY() {
return 500;
}
_handleMainIconPointerDown(e) {
if (j(this)) return;
if (this._isDuplicateTouchEvent(e)) {
this._stopEvent(e);
return;
}
this._trackPointerEvent(e), this._stopEvent(e), e.currentTarget?.setPointerCapture?.(e.pointerId), this._mainIconPointerDown = !0, this._mainIconHoldFired = !1, this._mainIconSuppressUntil = 0, this._clearMainIconHoldTimer();
let t = this._getMainEntityHoldAction();
t && (this._mainIconHoldTimer = setTimeout(() => {
this._mainIconHoldFired = !0, this._mainIconSuppressUntil = Date.now() + 1e3, this._handleAction(t, this._config.entity);
}, this._LONG_PRESS_DELAY));
}
_handleMainIconPointerUp(e) {
if (this._isDuplicateTouchEvent(e)) {
this._stopEvent(e);
return;
}
this._trackPointerEvent(e), this._stopEvent(e);
let t = this._mainIconHoldFired;
if (this._clearMainIconHoldTimer(), this._mainIconPointerDown = !1, t) {
this._mainIconSuppressClick = !0, this._mainIconSuppressUntil = Date.now() + 1e3;
return;
}
this._handleMainEntityTap(e), this._mainIconSuppressClick = !0;
}
_handleMainIconPointerCancel(e) {
if (this._isDuplicateTouchEvent(e)) {
this._stopEvent(e);
return;
}
if (this._trackPointerEvent(e), this._stopEvent(e), !this._getMainEntityHoldAction()) {
this._clearMainIconHoldTimer(), this._mainIconPointerDown = !1;
return;
}
}
_handleMainIconClick(e) {
this._stopEvent(e), this._mainIconSuppressClick &&= !1;
}
_handleMainIconContextMenu(e) {
this._stopEvent(e);
let t = this._getMainEntityHoldAction();
t && this._mainIconPointerDown && !this._mainIconHoldFired && (this._clearMainIconHoldTimer(), this._mainIconHoldFired = !0, this._mainIconSuppressClick = !0, this._mainIconSuppressUntil = Date.now() + 1e3, this._handleAction(t, this._config.entity));
}
_clearMainIconHoldTimer() {
this._mainIconHoldTimer &&= (clearTimeout(this._mainIconHoldTimer), null);
}
_clearStatusItemHoldTimer() {
this._statusItemHoldTimer &&= (clearTimeout(this._statusItemHoldTimer), null);
}
_clearDoubleTapTimer() {
return Ue.call(this);
}
_getCardHoldAction() {
return fu.call(this);
}
_getCardDoubleTapAction() {
return pu.call(this);
}
_getMainEntityHoldAction() {
return mu.call(this);
}
_getMainEntityTapAction() {
return hu.call(this);
}
_getMainEntityDoubleTapAction() {
return gu.call(this);
}
_getCardTapAction() {
return _u.call(this);
}
_getStatusItemCardTapAction(e = 0) {
return yu.call(this, e);
}
_getStatusItemCardHoldAction(e = 0) {
return bu.call(this, e);
}
_getStatusItemCardDoubleTapAction(e = 0) {
return xu.call(this, e);
}
_getStatusItemMainEntityTapAction(e = 0) {
return Su.call(this, e);
}
_getStatusItemMainEntityDoubleTapAction(e = 0) {
return Cu.call(this, e);
}
_getStatusItemMainEntityHoldAction(e = 0) {
return wu.call(this, e);
}
_isIconOnlyMode() {
return this._config?.mode === "icon_only";
}
_isPersonMode() {
return this._config?.mode === "person";
}
_getStatusItemEntityId(e = 0) {
let t = this._statusItems?.[e];
return t?.entityId || t?.entity || this._config.entity;
}
_getStatusColumnCount(e = this._statusItems?.length || 1) {
return Wd(this._config, e);
}
_getStatusRowCount(e = this._statusItems?.length || 1) {
return Gd(this._config, e);
}
_isStatusItemMainIconEvent(e) {
return e.composedPath().some((e) => e?.classList && (e.classList.contains("status-circle") || e.classList.contains("main-icon") || e.classList.contains("main-image-icon")));
}
_trackPointerEvent(e) {
e.type?.startsWith("pointer") && (this._lastMainIconPointerEventAt = Date.now());
}
_isDuplicateTouchEvent(e) {
return !!(e.type?.startsWith("touch") && this._lastMainIconPointerEventAt && Date.now() - this._lastMainIconPointerEventAt < 750);
}
_shouldSuppressMainIconTap(e) {
return !this._mainIconSuppressUntil || Date.now() > this._mainIconSuppressUntil ? !1 : !e || this._isMainIconEvent(e);
}
_stopEvent(e) {
e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation && e.stopImmediatePropagation();
}
render() {
return Dd.call(this);
}
static styles = [
...Rd,
zd,
Bd
];
};
function Hd(e) {
let t = e?.action;
return t === "Current state" || t === "current-activity" ? !0 : t === "more-info" ? !!(e.entity || e.entity_id) : [
"navigate",
"url",
"perform-action",
"call-service",
"fire-dom-event",
"popup",
"none"
].includes(t);
}
function Ud(e, t) {
return ["Current state", "current-activity"].includes(e?.action) ? {
...e,
status_index: t
} : e;
}
function Wd(e = {}, t = 1) {
return cc({
config: e,
count: t,
perRowKey: "items_per_row"
});
}
function Gd(e = {}, t = 1) {
return lc({
config: e,
count: t,
perRowKey: "items_per_row"
});
}
sn({
tag: "orbit-status-card-dev",
cardClass: Vd,
name: "Orbit Status Card (Dev)",
description: "Responsive status card",
version: t.status,
getEntitySuggestion: qd
});
var Kd = new Set([
"automation",
"button",
"input_button",
"scene",
"script"
]);
function qd(e, t) {
let n = nr(t);
if (n === "person") return { config: {
type: "custom:orbit-status-card-dev",
mode: "person",
entity: t
} };
if (Kd.has(n)) return null;
let r = {
label: B(e, "Standard"),
config: {
type: "custom:orbit-status-card-dev",
mode: "standard",
entity: t
}
};
return ir(e, t) ? [r, {
label: B(e, "Icon only"),
config: {
type: "custom:orbit-status-card-dev",
mode: "icon_only",
entity: t
}
}] : { config: r.config };
}
//#endregion
//#region src/cards/action/helpers/lifecycle.js
function Jd(e) {
!e.has("_config") && !e.has("hass") && !e.has("_templateRevision") || (this._actions = Yd(this._config).map((e) => Xd.call(this, e)));
}
function Yd(e = {}) {
return Array.isArray(e.entities) && e.entities.length ? e.entities.map((e) => typeof e == "string" ? { entity: e } : e || {}) : [{
entity: e.main_entity,
color: e.color,
icon_source: e.icon_source,
icon: e.icon,
icon_svg_color_override: e.icon_svg_color_override,
tap_action: e.tap_action,
hold_action: e.hold_action,
double_tap_action: e.double_tap_action
}];
}
function Xd(e) {
let t = e.entity || e.main_entity, n = t && this.hass ? this.hass.states[t] : null, r = e.color || this._config.color || "theme";
this._orbitColorTemplateEntityId = t || "";
let i = Qd(n), a = this._computeCircleColor(r), o = i ? this._computeFullColor(r) : this._computeIconColor(r);
this._orbitColorTemplateEntityId = "";
let s = Zd(e, t), c = ["custom", "template"].includes(s) ? zn.call(this, e.icon, t) : "", l = ["custom", "template"].includes(s) && c ? "icon" : "", u = c || (t && !n ? "mdi:alert-circle-outline" : "mdi:play-circle");
return {
...e,
entityId: t,
stateObj: n,
useStateIcon: !!n && s !== "template" && !c,
icon: u,
iconColor: t && !n ? "var(--error-color)" : o,
cardBackground: a,
isRunning: i,
svgForceColor: l ? this._getSvgColorOverride(e, l) : !0
};
}
function Zd(e, t) {
let n = e.icon_source, r = !!t, i = !!e.icon;
return n === "custom" ? "custom" : n === "template" ? "template" : n === "entity" && r ? "entity" : i ? "custom" : "entity";
}
function Qd(e) {
if (!e) return !1;
let t = e.entity_id?.split(".")[0], n = Number(e.attributes?.current);
return Number.isFinite(n) && n > 0 ? !0 : t === "script" && e.state === "on";
}
//#endregion
//#region src/cards/action/renders/action-card.js
function $d() {
let e = this._actions || [], t = Math.max(e.length, 1), n = this._getActionColumnCount(t), r = this._getActionRowCount(t), i = tf(e, n);
return E`
1 && this._config?.separate_cards ? "separate-cards" : ""}"
tabindex="0"
style="
--action-count:${t};
--action-columns:${n};
--action-rows:${r};
"
>
${i.map((e, t) => E`
${e.map((e, r) => ef.call(this, e, t * n + r))}
${nf(e.length, n, "action-spacer")}
`)}
`;
}
function ef(e, t) {
let n = ut(e.entityId, e.stateObj), r = n ? this._t(n === "missing" ? "Entity not found" : "Unavailable") : "", i = this._isImageIcon(e.icon) ? this._resolveIconPath(e.icon) : "", a = i ? this._getInlineSvg(i, e.svgForceColor) : "", o = E`
${this._isImageIcon(e.icon) ? E`
${a ? V(a) : E`
`}
` : e.useStateIcon && e.stateObj ? E`
` : E`
`}
${n ? E`
` : ""}
this._handleTap(e, t)}
@dblclick=${(e) => this._handleDoubleTap(e, t)}
@pointerdown=${(e) => this._handlePointerDown(e, t)}
@pointerup=${this._handlePointerUp}
@pointerleave=${this._handlePointerCancel}
@pointercancel=${this._handlePointerCancel}
@contextmenu=${(e) => this._handleContextMenu(e, t)}
>
${o}
` : E`
this._handleTap(e, t)}
@dblclick=${(e) => this._handleDoubleTap(e, t)}
@pointerdown=${(e) => this._handlePointerDown(e, t)}
@pointerup=${this._handlePointerUp}
@pointerleave=${this._handlePointerCancel}
@pointercancel=${this._handlePointerCancel}
@contextmenu=${(e) => this._handleContextMenu(e, t)}
>
${o}
`;
}
function tf(e, t = 1) {
let n = Math.max(1, t), r = [];
for (let t = 0; t < e.length; t += n) r.push(e.slice(t, t + n));
return r;
}
function nf(e, t, n) {
let r = Math.max(0, t - e);
return Array.from({ length: r }, () => E`
`);
}
//#endregion
//#region src/cards/action/styles/action-card-styles.js
var rf = [
pi,
mi,
d`
ha-card {
aspect-ratio: 0.94 / 1;
border-radius: 15px;
}
ha-card.grouped {
--orbit-grouped-item-gap: clamp(5px, 1.4cqw, 8px);
aspect-ratio: auto;
container-type: inline-size;
}
ha-card.grouped:not(.separate-cards) {
background: var(--ha-card-background, var(--card-background-color, #1a1a1a));
overflow: hidden;
}
ha-card.grouped.separate-cards {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: var(--ha-card-border-width, 1px) solid transparent;
box-shadow: none;
overflow: visible;
}
.action-container {
display: flex;
flex-direction: column;
gap: var(--orbit-grouped-item-gap);
height: auto;
padding: 0;
box-sizing: border-box;
}
.action-row {
display: flex;
flex: 1 1 auto;
gap: var(--orbit-grouped-item-gap);
min-height: 0;
width: 100%;
}
ha-card.grouped .action-row {
flex: 0 0 auto;
}
.action-button {
border-radius: 15px;
box-sizing: border-box;
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
flex: 1 1 0;
align-items: center;
justify-content: center;
min-width: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.action-spacer {
flex: 1 1 0;
min-width: 0;
visibility: hidden;
pointer-events: none;
}
ha-card.grouped .action-button {
aspect-ratio: 0.94 / 1;
height: auto;
}
ha-card.grouped:not(.separate-cards) .action-button {
--ha-card-background: transparent;
--card-background-color: transparent;
background: transparent !important;
border: var(--ha-card-border-width, 1px) solid transparent;
box-shadow: none;
}
ha-card.grouped .action-spacer {
aspect-ratio: 0.94 / 1;
}
ha-card.grouped.separate-cards .action-button {
border-radius: 15px;
overflow: hidden;
}
.action-circle {
width: min(84%, 84cqh);
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--action-card-background, rgba(var(--color-theme),0.05));
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
position: relative;
pointer-events: none;
}
.action-button.running .action-circle {
background: color-mix(
in srgb,
var(--action-card-background, rgba(var(--color-theme),0.05)) 70%,
var(--action-icon-color, currentColor)
);
}
.action-circle .main-icon,
.action-circle .main-image-icon {
color: var(--action-icon-color);
}
.action-circle .main-icon {
--orbit-main-icon-size: 58%;
}
.action-circle .main-image-icon {
width: 58%;
height: 58%;
}
`
];
//#endregion
//#region src/editors/action/sections/action.js
function af() {
let e = this._getActionItems(), t = Math.min(this._selectedActionIndex || 0, e.length - 1), n = e[t] || {}, r = this._actionEntityDomainFilter || "all", { itemsPerRow: i, shouldWrapTabs: a, showTabScrollHint: o } = Eu({
config: this._config,
itemCount: e.length,
perRowKey: "actions_per_row",
defaultPerRow: 3
});
return E`
${Du.call(this, {
itemCount: e.length,
classPrefix: "action",
perRowKey: "actions_per_row",
perRowLabel: "Actions per row",
defaultPerRow: 3
})}
1 ? "has-tools" : ""}"
style=${a ? `--action-tabs-per-row: ${i};` : ""}
>
${e.map((e, n) => E`
this._selectActionItem(n)}
>
${n + 1}
`)}
${o ? E`
` : ""}
this._addActionItem()}
>
+
${e.length > 1 ? E`
this._removeActionItem(t)}
>
this._moveActionItem(t, -1)}
>
this._moveActionItem(t, 1)}
>
` : ""}
${this._t("Main entity")}
${fo.call(this, {
value: n.entity || "",
filterOptions: of,
activeFilter: r,
onValueChanged: (e) => this._updateActionItem(t, { entity: e })
})}
${this._renderColorControl("Color", `action-${t}-color`, n.color || "", (e) => this._updateActionItem(t, { color: e }), this._config?.color || "theme")}
${sf.call(this, t, n)}
${n.entity ? this._renderActionItemInteractions(t, n) : ""}
${this._renderActionSection()}
${this._t("Orbit Action Card (Dev) v{version}", { version: t.action })}
`);
}
//#endregion
//#region src/cards/deck/surface.js
function Yf(e = []) {
return e.map((e) => {
if (!e?.element) return `${e?.index ?? ""}:none`;
let t = Sf(e.item), n = wf(e.item), r = Tf(e.item);
return [
e.index,
e.kind || Nf(e.item),
Pf(e.item)?.type || "",
n ? "force" : "child",
r ? t.top : "",
r ? t.right : "",
r ? t.bottom : "",
r ? t.left : ""
].join(":");
}).join("|");
}
function Xf(e, t) {
return e?.querySelector?.(`.deck-item-interaction[data-deck-index="${t}"]`);
}
function Zf(e = {}, t = {}, n = 0) {
let r = t?.attributes?.transparent_background;
return e?.layout === "wrap" ? typeof r == "boolean" ? r : !e?.separate_cards : e?.layout === "overlay" ? n > 0 && r === !0 : e?.layout === "tabs" && r !== !1;
}
var Qf = {
background: "transparent",
"backdrop-filter": "none",
"-webkit-backdrop-filter": "none",
"border-color": "transparent",
"box-shadow": "none"
};
function $f(e, t) {
if (t) {
e._orbitDeckSurfaceStyles ||= Object.fromEntries(Object.keys(Qf).map((t) => [t, {
value: e.style.getPropertyValue(t),
priority: e.style.getPropertyPriority(t)
}])), ep(e), tp(e);
return;
}
let n = e._orbitDeckSurfaceStyles;
n && (np(e), Object.entries(n).forEach(([t, n]) => {
n.value ? e.style.setProperty(t, n.value, n.priority) : e.style.removeProperty(t);
}), delete e._orbitDeckSurfaceStyles);
}
function ep(e) {
Object.entries(Qf).forEach(([t, n]) => {
(e.style.getPropertyValue(t) !== n || e.style.getPropertyPriority(t) !== "important") && e.style.setProperty(t, n, "important");
});
}
function tp(e) {
e._orbitDeckSurfaceObserver || (e._orbitDeckSurfaceObserver = new MutationObserver(() => {
e._orbitDeckSurfaceStyles && ep(e);
}), e._orbitDeckSurfaceObserver.observe(e, {
attributes: !0,
attributeFilter: ["style"]
}));
}
function np(e) {
e._orbitDeckSurfaceObserver?.disconnect(), e._orbitDeckSurfaceObserver = null;
}
function rp(e) {
let t = /* @__PURE__ */ new Set();
return ip(e, t, /* @__PURE__ */ new WeakSet()), [...t];
}
function ip(e, t, n) {
!e || n.has(e) || (n.add(e), e.localName === "ha-card" && t.add(e), [e.shadowRoot, e].filter(Boolean).forEach((e) => {
let r = e.querySelectorAll?.("*") || [];
for (let e of r) e.localName === "ha-card" && t.add(e), e.shadowRoot && ip(e, t, n);
}));
}
function ap(e, t, n) {
op(e, n ? t : {
top: "",
right: "",
bottom: "",
left: ""
}), e._orbitDeckPaddingApplied = n;
}
function op(e, t) {
sp(e, "padding-top", t.top), sp(e, "padding-right", t.right), sp(e, "padding-bottom", t.bottom), sp(e, "padding-left", t.left);
}
function sp(e, t, n) {
n ? (e.style.getPropertyValue(t) !== n || e.style.getPropertyPriority(t) !== "important") && e.style.setProperty(t, n, "important") : e.style.removeProperty(t);
}
function cp(e, t) {
e._orbitDeckPadding = t, !e._orbitDeckPaddingObserver && (e._orbitDeckPaddingObserver = new MutationObserver(() => {
e._orbitDeckPadding && op(e, e._orbitDeckPadding);
}), e._orbitDeckPaddingObserver.observe(e, {
attributes: !0,
attributeFilter: ["style"]
}));
}
function lp(e) {
e._orbitDeckPadding = null, e._orbitDeckPaddingObserver?.disconnect(), e._orbitDeckPaddingObserver = null;
}
//#endregion
//#region src/cards/deck/styles/deck-card-styles.js
var up = [Ld, d`
ha-card.deck-card {
border-radius: var(--ha-card-border-radius, 15px);
overflow: visible;
}
ha-card.deck-card.wrap.separate-cards {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
box-shadow: none;
}
ha-card.deck-card.overlay {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
box-shadow: none;
}
.deck-item-interaction.transparent-background,
.deck-item-interaction.transparent-background > * {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: transparent;
box-shadow: none;
}
.deck-card.empty {
min-height: 132px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
.deck-empty-preview {
width: min(100%, 360px);
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
.deck-empty-illustration {
width: 132px;
height: 76px;
flex: 0 0 auto;
display: grid;
grid-template-columns: 1.45fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 6px;
transform: rotate(-2deg);
}
.deck-empty-tile {
min-width: 0;
padding: 9px;
border: 1px solid color-mix(
in srgb,
var(--primary-color) 28%,
var(--divider-color)
);
border-radius: 10px;
background: color-mix(
in srgb,
var(--primary-color) 9%,
var(--card-background-color)
);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
box-sizing: border-box;
}
.deck-empty-tile-main {
grid-row: 1 / 3;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.deck-empty-tile-top,
.deck-empty-tile-bottom {
display: flex;
align-items: center;
gap: 5px;
}
.deck-empty-orbit {
width: 26px;
height: 26px;
border: 3px solid var(--primary-color);
border-radius: 50%;
position: relative;
box-sizing: border-box;
}
.deck-empty-orbit::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
inset-inline-end: -5px;
top: 1px;
border-radius: 50%;
background: var(--primary-color);
box-shadow: 0 0 0 2px var(--card-background-color);
}
.deck-empty-dot {
width: 11px;
height: 11px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--primary-color);
opacity: 0.82;
}
.deck-empty-line {
width: 100%;
height: 5px;
border-radius: 999px;
background: var(--primary-text-color);
opacity: 0.28;
}
.deck-empty-line.short {
width: 64%;
}
.deck-empty-copy {
min-width: 0;
}
.deck-empty-title {
color: var(--primary-text-color);
font-size: var(--ha-font-size-l, 16px);
font-weight: var(--ha-font-weight-medium, 500);
line-height: 1.35;
}
.deck-empty-modes {
margin-top: 5px;
color: var(--secondary-text-color);
font-size: var(--ha-font-size-s, 12px);
line-height: 1.4;
white-space: nowrap;
}
@media (max-width: 360px) {
.deck-empty-preview {
gap: 16px;
}
.deck-empty-illustration {
width: 108px;
height: 68px;
}
}
.deck-wrap {
display: flex;
flex-direction: column;
gap: var(--orbit-deck-gap, 8px);
padding: var(--orbit-deck-padding, 0);
}
.deck-row {
display: flex;
gap: var(--orbit-deck-gap, 8px);
width: 100%;
}
.deck-item,
.deck-spacer {
flex: 1 1 0;
min-width: 0;
}
.deck-item.orbit-editor-preview-resized {
flex: 0 0 var(--orbit-editor-preview-width, 50%);
}
.deck-row:has(.orbit-editor-preview-resized) {
align-items: flex-start;
flex-wrap: wrap;
}
.deck-item.orbit-editor-preview-resized >
.deck-item-interaction.orbit-editor-preview-selected {
height: auto;
width: 100%;
}
.deck-item-interaction {
display: block;
height: 100%;
}
.deck-item-interaction.has-actions {
cursor: pointer;
}
.deck-spacer {
visibility: hidden;
pointer-events: none;
}
.deck-visibility-observers {
display: none !important;
}
.deck-tabs {
display: flex;
align-items: end;
gap: 4px;
border-bottom: none;
box-shadow: inset 0 -2px 0 var(--divider-color);
background: var(--orbit-deck-tab-background-color, transparent);
overflow-x: auto;
}
.deck-tab {
position: relative;
min-width: 72px;
min-height: 44px;
border: none;
border-bottom: 3px solid transparent;
background: transparent;
color: var(--orbit-deck-tab-color, inherit);
padding: 0 12px;
font: inherit;
font-size: var(--orbit-deck-tab-font-size, var(--ha-font-size-m, 14px));
font-weight: var(--ha-font-weight-medium, 500);
opacity: 0.62;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
}
.deck-card.tabs:not(.hide-tab-dividers) .deck-tab + .deck-tab::before {
content: "";
position: absolute;
inset-inline-start: -3px;
top: 8px;
bottom: 0;
width: 2px;
background: var(--divider-color);
pointer-events: none;
}
.deck-card.tabs.tab-width-equal .deck-tab {
flex: 1 1 0;
min-width: 0;
}
.deck-card.tabs.tab-width-dynamic .deck-tab {
flex: 0 0 auto;
}
.deck-card.tabs.tab-width-custom .deck-tab {
flex: 0 0 var(--orbit-deck-tab-width, 120px);
min-width: var(--orbit-deck-tab-width, 120px);
}
.deck-tab.active {
color: var(--orbit-deck-tab-active-color, var(--primary-color));
border-bottom-color: var(--orbit-deck-tab-active-color, var(--primary-color));
opacity: 1;
}
.deck-tab ha-icon {
--mdc-icon-size: 20px;
}
.deck-tab-content {
padding-top: var(--orbit-deck-gap, 8px);
}
.deck-overlay {
position: relative;
width: 100%;
overflow: hidden;
border-radius: var(--ha-card-border-radius, 15px);
}
.deck-overlay-main {
position: relative;
z-index: 0;
}
.deck-overlay-item {
position: absolute;
inset-inline-start: var(--orbit-deck-overlay-left, 0);
top: var(--orbit-deck-overlay-top, 0);
z-index: var(--orbit-deck-overlay-z-index, 1);
flex: 0 0 auto;
pointer-events: auto;
}
.deck-overlay-item.overlay-card {
width: 100%;
}
.deck-overlay-item.overlay-badge {
width: max-content;
}
.deck-overlay-content {
display: block;
transform-origin: top left;
}
.deck-overlay-item .deck-item-interaction {
height: auto;
}
.deck-overlay-item.transparent-background,
.deck-overlay-item.transparent-background .deck-overlay-content,
.deck-overlay-item.transparent-background .deck-item-interaction,
.deck-overlay-item.transparent-background .deck-item-interaction > * {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-width: 0;
border-color: transparent;
box-shadow: none;
}
.deck-error-card {
padding: 16px;
background: color-mix(in srgb, var(--error-color) 14%, transparent);
color: var(--primary-text-color);
}
.deck-error-title {
font-weight: var(--ha-font-weight-bold, 700);
margin-bottom: 8px;
}
`], dp = [
"type",
"layout",
"items_per_row",
"separate_cards",
"tab_width_mode",
"tab_font_size",
"tab_divider",
"tab_color",
"tab_active_color",
"tab_background_color",
"decks",
"grid_options",
"view_layout"
], fp = [
"attributes",
"badge",
"card"
], pp = [
"default",
"icon",
"name",
"width",
"fit",
"left",
"top",
"height",
"transparent_background",
"force_padding",
"padding_top",
"padding_bottom",
"padding_left",
"padding_right",
"tap_action",
"hold_action",
"double_tap_action"
];
function mp(e) {
let t = {}, n = /* @__PURE__ */ new Set();
return dp.forEach((r) => {
Object.prototype.hasOwnProperty.call(e, r) && (t[r] = r === "decks" && Array.isArray(e[r]) ? e[r].map(_p) : e[r], n.add(r));
}), Object.keys(e).forEach((r) => {
n.has(r) || (t[r] = e[r]);
}), t;
}
function hp(e) {
if (!Array.isArray(e?.decks)) return {
config: e,
changed: !1
};
let t = !1, n = e.decks.map((e) => {
let n = e?.attributes || {};
if (!Object.prototype.hasOwnProperty.call(n, "label")) return e;
t = !0;
let { label: r, ...i } = n;
return {
...e,
attributes: {
...i,
name: n.name || r
}
};
});
return t ? {
config: {
...e,
decks: n
},
changed: t
} : {
config: e,
changed: t
};
}
function gp(e = {}) {
return e?.badge ? {
attributes: e.attributes || {},
badge: e.badge || {}
} : {
attributes: e?.attributes || {},
card: e?.card || {}
};
}
function _p(e) {
if (!e || typeof e != "object" || Array.isArray(e)) return e;
let t = {}, n = /* @__PURE__ */ new Set(), r = {
...e,
attributes: vp(yp(e.attributes || {}), pp)
};
return e.badge?.type ? (r.badge = e.badge, delete r.card) : e.card?.type ? (r.card = e.card, delete r.badge) : (delete r.badge, delete r.card), fp.forEach((e) => {
Object.prototype.hasOwnProperty.call(r, e) && (t[e] = r[e], n.add(e));
}), Object.keys(r).forEach((e) => {
n.has(e) || (t[e] = r[e]);
}), t;
}
function vp(e, t) {
let n = {}, r = /* @__PURE__ */ new Set();
return t.forEach((t) => {
Object.prototype.hasOwnProperty.call(e, t) && (n[t] = e[t], r.add(t));
}), Object.keys(e).forEach((t) => {
r.has(t) || (n[t] = e[t]);
}), n;
}
function yp(e = {}) {
return Object.entries(e).reduce((e, [t, n]) => (n !== void 0 && n !== "" && (e[t] = n), e), {});
}
//#endregion
//#region src/editors/deck/item-helpers.js
function bp(e = {}) {
return e?.badge || e?.card || {};
}
function xp(e = {}, t, n = "Card") {
let r = bp(e)?.type || "";
if (!r) return n;
let i = r.replace(/^custom:/, ""), a = (e?.badge ? window.customBadges || [] : window.customCards || []).find((e) => e.type === r || e.type === i);
if (a?.name) return a.name;
let o = e?.badge ? [`ui.panel.lovelace.editor.badges.${i}.name`, `ui.panel.lovelace.editor.badge.${i}.name`] : [`ui.panel.lovelace.editor.card.${i}.name`];
for (let e of o) {
let n = t?.localize?.(e);
if (n && n !== e) return n;
}
return i.replace(/[-_]+/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
}
//#endregion
//#region src/editors/deck/native-pickers.js
async function Sp() {
if (!this._badgePickerLoadRequested) {
this._badgePickerLoadRequested = !0;
try {
window.loadCardHelpers && await window.loadCardHelpers(), customElements.get("hui-badge-picker") || await this._loadNativeBadgeModule({
eventName: "ll-create-badge",
dialogTag: "hui-dialog-create-badge"
}), await Promise.race([customElements.whenDefined("hui-badge-picker"), new Promise((e) => setTimeout(e, 1500))]);
} catch {} finally {
this._badgePickerLoadRequested = !1, this.requestUpdate();
}
}
}
async function Cp() {
if (!this._badgeEditorLoadRequested) {
this._badgeEditorLoadRequested = !0;
try {
if (window.loadCardHelpers && await window.loadCardHelpers(), !customElements.get("hui-badge-element-editor")) {
let e = this._findElementInShadowRoots(document, (e) => e.localName === "hui-view" && e._layoutElement), t = Number.isInteger(e?.index) ? e.index : 0;
await this._loadNativeBadgeModule({
eventName: "ll-edit-badge",
dialogTag: "hui-dialog-edit-badge",
detail: { path: [t, 0] },
huiView: e
});
}
await Promise.race([customElements.whenDefined("hui-badge-element-editor"), new Promise((e) => setTimeout(e, 1500))]);
} catch {} finally {
this._badgeEditorLoadRequested = !1, this.requestUpdate();
}
}
}
async function wp({ eventName: e, dialogTag: t, detail: n, huiView: r }) {
let i = r || this._findElementInShadowRoots(document, (e) => e.localName === "hui-view" && e._layoutElement);
if (!i) return;
let a, o = (e) => {
e.detail?.dialogTag === t && (e.preventDefault(), e.stopImmediatePropagation(), a = e.detail.dialogImport);
};
i.addEventListener("show-dialog", o);
try {
i._layoutElement.dispatchEvent(new CustomEvent(e, {
detail: n,
bubbles: !1,
composed: !0
}));
} finally {
i.removeEventListener("show-dialog", o);
}
typeof a == "function" && await a();
}
function Tp(e, t) {
let n = e.querySelectorAll?.("*") || [];
for (let e of n) {
if (t(e)) return e;
if (e.shadowRoot) {
let n = this._findElementInShadowRoots(e.shadowRoot, t);
if (n) return n;
}
}
}
async function Ep() {
if (!this._cardPickerLoadRequested) {
this._cardPickerLoadRequested = !0;
try {
window.loadCardHelpers && await window.loadCardHelpers(), await Promise.race([customElements.whenDefined("hui-card-picker"), new Promise((e) => setTimeout(e, 1500))]);
} catch {} finally {
this._cardPickerLoadRequested = !1, this.requestUpdate();
}
}
}
//#endregion
//#region src/editors/deck/sections/child-picker.js
function Dp() {
let e = this._childPickerType;
return E`
${[["badge", "Badges"], ["card", "Cards"]].map(([t, n]) => E`
{
this._childPickerType = t;
}}
>
${this._t(n)}
`)}
`;
}
function Op(e, t) {
return this._childPickerType === "badge" ? this._renderBadgePicker(e, t) : this._renderCardPicker(e, t);
}
function kp(e, t) {
return t?.badge?.type ? customElements.get("hui-badge-element-editor") ? E`
{
t.stopPropagation(), this._updateDeckBadge(e, t.detail.config);
}}
>
` : (this._ensureNativeBadgeEditor(), E`
`) : !this.hass || !this.lovelace ? E`` : customElements.get("hui-badge-picker") ? E`
this._updateDeckBadge(e, t)}
@config-changed=${(t) => {
t.stopPropagation(), this._updateDeckBadge(e, t.detail.config);
}}
>
` : (this._ensureNativeBadgePicker(), E`
`);
}
function Ap(e, t) {
return t?.card?.type ? E`
{
t.stopPropagation(), this._updateDeckCard(e, t.detail.config);
}}
>
` : !this.hass || !this.lovelace ? E`` : customElements.get("hui-card-picker") ? E`
this._updateDeckCard(e, t)}
@config-changed=${(t) => {
t.stopPropagation(), this._updateDeckCard(e, t.detail.config);
}}
>
` : (this._ensureNativeCardPicker(), E`
e.stopPropagation()}
>
`);
}
//#endregion
//#region src/editors/deck/sections/style.js
function jp(e, t) {
let n = t?.attributes || {}, r = this._config?.layout === "wrap", i = this._config?.layout === "tabs", a = this._config?.layout === "overlay" && e > 0, o = r || i || a, s = i || r && !this._config?.separate_cards, c = typeof n.transparent_background == "boolean" ? n.transparent_background : s;
return E`
{
e.target === e.currentTarget && (this._styleSectionExpanded = e.detail.expanded);
}}
>
${this._t("Style")}
${i ? E`
${this._renderAttributeSelector(e, {
label: "Icon",
selector: { icon: {} },
value: n.icon || "",
changeKey: "icon"
})}
${this._renderAttributeSelector(e, {
label: "Name",
selector: { text: {} },
value: n.name || n.label || "",
changeKey: "name"
})}
` : ""}
${i && this._config?.tab_width_mode === "custom" ? this._renderAttributeSelector(e, {
label: "Tab width",
selector: { text: {} },
value: n.width || "",
changeKey: "width"
}) : ""}
${a ? E`
${this._renderOverlayNumberSelector(e, {
label: "Left",
value: n.left,
changeKey: "left",
min: -1e4
})}
${this._renderOverlayNumberSelector(e, {
label: "Top",
value: n.top,
changeKey: "top",
min: -1e4
})}
${this._renderOverlayNumberSelector(e, {
label: "Width",
value: n.width,
changeKey: "width"
})}
${this._renderOverlayNumberSelector(e, {
label: "Height",
value: n.height,
changeKey: "height"
})}
` : ""}
${o ? E`
${this._t("Transparent background")}
{
let n = t.target.checked;
this._updateDeckAttributes(e, { transparent_background: n === s ? void 0 : n });
}}
>
` : ""}
${this._t("Force padding")}
this._updateDeckAttributes(e, { force_padding: t.target.checked ? !0 : void 0 })}
>
${this._renderAttributeSelector(e, {
label: "Top",
selector: { text: {} },
value: n.padding_top || "",
changeKey: "padding_top"
})}
${this._renderAttributeSelector(e, {
label: "Bottom",
selector: { text: {} },
value: n.padding_bottom || "",
changeKey: "padding_bottom"
})}
${this._renderAttributeSelector(e, {
label: "Left",
selector: { text: {} },
value: n.padding_left || "",
changeKey: "padding_left"
})}
${this._renderAttributeSelector(e, {
label: "Right",
selector: { text: {} },
value: n.padding_right || "",
changeKey: "padding_right"
})}
`;
}
//#endregion
//#region src/editors/deck/styles.js
var Mp = [
Gs,
cf,
d`
.deck-subtabs-row {
display: flex;
align-items: end;
gap: 12px;
border-bottom: 1px solid var(--orbit-editor-border);
margin-bottom: 12px;
}
.deck-subtabs {
flex: 1 1 auto;
border-bottom: none;
}
.deck-layout-toggle {
display: flex;
justify-content: flex-end;
margin-left: auto;
width: auto;
min-width: 270px;
margin-bottom: 6px;
}
.deck-tab-width-toggle {
width: auto;
min-width: 260px;
}
.deck-overlay-fit-toggle {
width: min(360px, 100%);
min-width: 0;
}
.field-grid.two-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 12px;
}
.field-grid.four-columns {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.deck-tab-colors {
margin-top: 12px;
}
.deck-tab-divider-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 36px;
margin-top: 4px;
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-normal, 400);
line-height: var(--ha-line-height-normal, 20px);
}
.deck-card-tab-section {
gap: 4px;
}
.deck-style-section {
margin-top: 4px;
}
.deck-style-content {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 0;
}
.deck-style-content .field-grid.two-columns {
margin-bottom: 0;
}
.deck-force-padding-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 36px;
margin: 0;
font-size: var(--ha-font-size-m, 14px);
font-weight: var(--ha-font-weight-normal, 400);
line-height: var(--ha-line-height-normal, 20px);
}
.deck-padding-grid {
margin-top: -4px;
margin-bottom: -26px;
}
.deck-default-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 6px 0 16px;
}
.deck-card-editor-frame {
min-height: 160px;
}
.deck-child-type-tabs {
margin: -4px 0 12px;
}
hui-badge-picker {
display: block;
min-height: 320px;
}
.deck-card-section {
display: block;
margin: 0;
--expansion-panel-content-padding: 0;
border-radius: var(--ha-border-radius-md);
--ha-card-border-radius: var(--ha-border-radius-md);
}
.deck-card-section-content {
padding: 12px;
}
.deck-card-section ha-icon {
color: var(--secondary-text-color);
}
.deck-card-picker-loading {
width: 100%;
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
}
.native-picker-preloader {
display: none;
}
.deck-empty-editor {
color: var(--secondary-text-color);
padding: 24px 0;
}
`
], Np = Symbol.for("orbit-deck-card-dev-preview-selected-index"), Pp = class extends k {
static properties = {
hass: { attribute: !1 },
lovelace: { attribute: !1 },
_config: { state: !0 },
_selectedTab: { state: !0 },
_selectedDeckIndex: { state: !0 },
_childPickerType: { state: !0 },
_colorPickerKey: { state: !0 },
_colorPickerTab: { state: !0 },
_styleSectionExpanded: { state: !0 },
_cardSectionExpanded: { state: !0 }
};
constructor() {
super(), this._config = {}, this._selectedTab = "setup", this._selectedDeckIndex = 0, this._childPickerType = "badge", this._colorPickerKey = "", this._colorPickerTab = "picker", this._styleSectionExpanded = !1, this._cardSectionExpanded = !0;
}
connectedCallback() {
super.connectedCallback(), Bo(this), this._updateDocumentationContext();
}
disconnectedCallback() {
Vo(this), super.disconnectedCallback();
}
setConfig(e) {
let t = dn(e || {}), n = hp(t.config), r = {
...n.config,
layout: ["tabs", "overlay"].includes(t.config?.layout) ? t.config.layout : "wrap"
};
this._config = mp(r), this._selectedDeckIndex = Math.min(this._selectedDeckIndex || 0, Math.max(0, this._getDeckItems().length - 1));
let i = this._getDeckItems()[this._selectedDeckIndex];
this._childPickerType = i?.badge ? "badge" : "card", this._updateDocumentationContext(), (t.migrated || n.changed) && queueMicrotask(() => this._dispatchConfigChanged());
}
_t(e, t) {
return B(this.hass, e, t);
}
_getColorPickerValue(e) {
return Wo(e);
}
_getColorStyle(e) {
return Uo(e);
}
_updateConfig(e) {
this._config = mp(sa(this._config, e)), this._dispatchConfigChanged();
}
_dispatchConfigChanged() {
this.dispatchEvent(new CustomEvent("config-changed", {
detail: { config: this._getPreviewConfig() },
bubbles: !0,
composed: !0
}));
}
_getPreviewConfig() {
return {
...this._config,
[Np]: this._selectedDeckIndex || 0
};
}
_getDeckItems(e = this._config) {
return Array.isArray(e?.decks) ? e.decks.map(gp) : [];
}
_selectDeckItem(e) {
let t = this._getDeckItems()[e];
this._selectedDeckIndex = e, this._childPickerType = t?.badge ? "badge" : "card", this._dispatchPreviewSelection(e);
}
_dispatchPreviewSelection(e) {
this.dispatchEvent(new CustomEvent("config-changed", {
detail: { config: {
...this._getPreviewConfig(),
[Np]: e
} },
bubbles: !0,
composed: !0
}));
}
_addDeckItem() {
let e = this._getDeckItems();
this._selectedDeckIndex = e.length, this._selectedTab = "card", this._childPickerType = "badge", this.requestUpdate();
}
_removeDeckItem(e) {
let t = this._getDeckItems().filter((t, n) => n !== e);
this._selectedDeckIndex = Math.max(0, Math.min(e, t.length - 1)), this._updateConfig({ decks: t });
}
_duplicateDeckItem(e) {
let t = this._getDeckItems(), n = t[e];
if (!n) return;
let r = [...t];
r.splice(e + 1, 0, structuredClone(n)), this._selectedDeckIndex = e + 1, this._updateConfig({ decks: r });
}
_moveDeckItem(e, t) {
let n = this._getDeckItems(), r = e + t;
if (r < 0 || r >= n.length) return;
let i = [...n], [a] = i.splice(e, 1);
i.splice(r, 0, a), this._selectedDeckIndex = r, this._updateConfig({ decks: i });
}
_updateDeckItem(e, t) {
let n = [...this._getDeckItems()];
n[e] = {
...n[e] || {},
...t
}, this._updateConfig({ decks: n });
}
_updateDeckAttributes(e, t) {
let n = this._getDeckItems()[e] || {};
this._updateDeckItem(e, { attributes: {
...n.attributes || {},
...t
} });
}
_updateDeckCard(e, t) {
let n = this._getDeckItems();
if (e >= n.length) {
this._selectedDeckIndex = n.length, this._updateConfig({ decks: [...n, {
attributes: {},
card: t
}] });
return;
}
this._updateDeckItem(e, {
badge: void 0,
card: t
});
}
_updateDeckBadge(e, t) {
let n = this._getDeckItems();
if (e >= n.length) {
this._selectedDeckIndex = n.length, this._updateConfig({ decks: [...n, {
attributes: {},
badge: t
}] });
return;
}
this._updateDeckItem(e, {
badge: t,
card: void 0
});
}
_renderInput(e, t, n = "", r = {}) {
return ia.call(this, e, t, n, r);
}
_renderNumberInput(e, t, n = {}) {
return oa.call(this, e, t, n);
}
_renderColorControl(e, t, n, r, i = n) {
return fa.call(this, e, t, n, r, i);
}
_renderSubTabs() {
return E`
${["setup", "card"].map((e) => E`
{
this._selectedTab = e, this._updateDocumentationContext();
}}
>
${e === "setup" ? this._t("Setup") : this._t("Card")}
`)}
`;
}
_updateDocumentationContext() {
let e = this._selectedTab === "card" ? "card" : `setup-${this._config?.layout || "wrap"}`;
an(this, "orbit-deck-card-dev", e);
}
_renderSetup() {
let e = this._getDeckItems();
return E`
${this._config?.layout === "wrap" ? Du.call(this, {
itemCount: e.length,
classPrefix: "action",
wrapEnabled: !0,
showWrapToggle: !1,
perRowKey: "items_per_row",
perRowLabel: "Items per row",
defaultPerRow: 1
}) : this._config?.layout === "tabs" ? E`
${this._renderTabWidthModeControl()}
${this._renderInput("Tab font size", "tab_font_size", "18px", {
value: this._config?.tab_font_size || "",
onValueChanged: (e) => this._updateConfig({ tab_font_size: e || void 0 })
})}
${this._t("Divider")}
this._updateConfig({ tab_divider: e.target.checked ? void 0 : !1 })}
>
${this._renderColorControl(["Inactive", "Color"], "tab_color", this._config?.tab_color || "", (e) => this._updateConfig({ tab_color: e || void 0 }), "primary-text-color")}
${this._renderColorControl(["Active", "Color"], "tab_active_color", this._config?.tab_active_color || "", (e) => this._updateConfig({ tab_active_color: e || void 0 }), "primary-color")}
${this._renderColorControl(["Background", "Color"], "tab_background_color", this._config?.tab_background_color || "", (e) => this._updateConfig({ tab_background_color: e || void 0 }), "card-background-color")}
` : ""}
`;
}
_renderDeckTabs(e, t) {
let { itemsPerRow: n, shouldWrapTabs: r } = Eu({
config: this._config,
itemCount: e.length,
wrapEnabled: this._config?.layout === "wrap",
defaultPerRow: 1
});
return E`
1 ? "has-tools" : ""}"
style=${r ? `--action-tabs-per-row: ${n};` : ""}
>
${e.map((e, n) => E`
this._selectDeckItem(n)}
>
${this._config?.layout === "overlay" && n === 0 ? this._t("Main") : n + 1}
`)}
this._addDeckItem()}
>
+
${e.length > 0 && t < e.length ? E`
this._duplicateDeckItem(t)}
>
this._removeDeckItem(t)}
>
this._moveDeckItem(t, -1)}
>
this._moveDeckItem(t, 1)}
>
` : ""}
this._updateDeckAttributes(e, { [i]: t.detail.value || void 0 })}
>
`;
}
_renderOverlayNumberSelector(e, { label: t, value: n, changeKey: r, min: i = 0 }) {
return oa.call(this, t, r, {
value: n ?? "",
min: i,
onValueChanged: (t) => this._updateDeckAttributes(e, { [r]: t === "" || t === null ? void 0 : t })
});
}
_renderDeckCardSection(e, t) {
return E`
{
e.target === e.currentTarget && (this._cardSectionExpanded = e.detail.expanded);
}}
>
${xp(t, this.hass, this._t("Card"))}
${t?.badge?.type || t?.card?.type ? "" : this._renderChildTypeTabs()}
${this._renderChildPicker(e, t)}
`;
}
_renderDeckInteractions(e, t) {
let n = t?.attributes || {};
return K.call(this, {
expanded: !1,
config: n,
onChange: (t) => this._updateDeckAttributes(e, t),
interactions: [
{
key: "tap_action",
formKey: "tap_action",
label: "Tap behavior"
},
{
key: "hold_action",
formKey: "hold_action",
label: "Hold behavior"
},
{
key: "double_tap_action",
formKey: "double_tap_action",
label: "Double tap behavior"
}
],
context: { entity_id: n.entity || bp(t)?.entity }
});
}
async _ensureNativeBadgePicker() {
return Sp.call(this);
}
async _ensureNativeBadgeEditor() {
return Cp.call(this);
}
async _loadNativeBadgeModule(e) {
return wp.call(this, e);
}
_findElementInShadowRoots(e, t) {
return Tp.call(this, e, t);
}
async _ensureNativeCardPicker() {
return Ep.call(this);
}
_renderCard() {
let e = this._getDeckItems(), t = Math.min(this._selectedDeckIndex || 0, e.length), n = e[t], r = t === e.length;
return E`
${this._renderDeckTabs(e, t)}
${n || r ? E`
${n && this._config?.layout === "tabs" ? E`
${this._t("Default")}
this._setDefaultDeck(t, e.target.checked)}
>
` : ""}
${n ? this._renderDeckStyleControls(t, n) : ""}
${n ? E`
${this._renderDeckInteractions(t, n)}
` : ""}
${this._renderDeckCardSection(t, n)}
` : E`
${this._t("Add a card to start.")}
`}
${this._renderSubTabs()}
${this._selectedTab === "setup" ? this._renderSetup() : this._renderCard()}
${this._t("Orbit Deck Card (Dev) v{version}", { version: t.deck })}
${this._renderDeckEntry(e)}
`;
}
_renderDeckEntry(e) {
return e?.element ? e.element : E`
${this._t("Configuration error")}
${e?.error || "No card configured"}
`;
}
_applyDeckPaddingToEntries() {
let e = this._deckCards.map((e) => Zf(this._config, e.item, e.index) ? "flat" : "native").join(":"), t = `${Yf(this._deckCards)}|surface:${e}`;
t !== this._paddingApplyKey && (this._paddingApplyKey = t, this._deckCards.forEach((e) => this._applyDeckCardPadding(e)));
}
_applyDeckCardPadding(e, t = 0) {
let n = e?.element;
if (!n) return;
let r = this._deckEntryGeneration, i = Sf(e.item), a = Tf(e.item);
(n.updateComplete instanceof Promise ? n.updateComplete : Promise.resolve()).then(() => new Promise((e) => requestAnimationFrame(e))).then(() => {
if (!this._isDeckEntryActive(e, r)) return;
let o = rp(n), s = o[0] || null, c = Xf(this.renderRoot, e.index), l = Zf(this._config, e.item, e.index);
if (!(!s && !c)) {
if ((a || l) && !s && t < 10 && window.setTimeout(() => this._applyDeckCardPadding(e, t + 1), 50), $f(n, l), o.forEach((e) => $f(e, l)), !a && !s?._orbitDeckPaddingApplied && !c?._orbitDeckPaddingApplied) {
s && lp(s);
return;
}
c && ap(c, i, !1), s && ap(s, i, a), a && s ? (cp(s, i), requestAnimationFrame(() => {
this._isDeckEntryActive(e, r) && (c && ap(c, i, !1), ap(s, i, !0));
})) : s && lp(s);
}
}).catch(() => {});
}
_renderWrap(e) {
let t = this._getVisibleDeckEntries(), n = this._deckCards.filter((e) => e.visible === !1), r = this._getColumnCount(t.length || 1), i = qf(t, r);
return E`
${i.map((e) => E`
${e.map((e) => {
let t = Tu(this) && this._config?.[Np] === e.index ? Lp(e, r) : "";
return E`
${this._renderInteractiveDeckEntry(e)}
`;
})}
${Jf(e.length, r)}
`)}
`;
}
_renderTabs(e) {
let t = Math.min(this._selectedIndex || 0, Math.max(0, e.length - 1)), n = this._getVisibleDeckEntries(), r = n.find((e) => e.index === t) || n[0], i = r?.index ?? t, a = this._deckCards.filter((e) => e !== r), o = Wf(this._config), s = Gf.call(this, this._config);
return E`
${n.map((e) => E`
this._selectTab(e.index)}
>
${e.item.attributes?.icon ? E`${e.item.attributes?.name || e.item.attributes?.label || `Card ${e.index + 1}`}
`)}
${r ? this._renderInteractiveDeckEntry(r) : ""}
${this._renderVisibilityObservers(a)}
`;
}
_getVisibleDeckEntries() {
return this._deckCards.filter((e) => e.visible !== !1);
}
_renderVisibilityObservers(e) {
return e.length ? E`
${e.map((e) => this._renderDeckEntry(e))}
` : "";
}
_renderOverlay() {
let e = this._deckCards[0], t = this._deckCards.slice(1);
return E`
${this._renderInteractiveDeckEntry(e)}
${t.map((e, t) => E`
${this._renderInteractiveDeckEntry(e)}
`)}
`;
}
_t(e, t) {
return B(this.hass, e, t);
}
render() {
let e = kf(this._config);
return e.length ? this._config?.layout === "tabs" ? this._renderTabs(e) : this._config?.layout === "overlay" ? this._renderOverlay() : this._renderWrap(e) : E`
${this._t("Add card")}
${this._t("Wrap")} · ${this._t("Tabs")} ·
${this._t("Overlay")}
`;
}
static styles = up;
};
function Lp(e, t) {
let n = Mf(e?.item)?.grid_options?.columns, r = n === "full" ? 12 : Number(n);
if (!Number.isFinite(r) || r <= 0) try {
r = Number(e?.element?.getLayoutOptions?.()?.grid_columns);
} catch {
r = 0;
}
(!Number.isFinite(r) || r <= 0) && (r = 6);
let i = Math.min(12, Math.max(1, r)) / 12 * 100;
return i > 100 / Math.max(1, Number(t) || 1) + .01 ? `${i}%` : "";
}
sn({
tag: "orbit-deck-card-dev",
cardClass: Ip,
name: "Orbit Deck Card (Dev)",
description: "Wrap or tab any Lovelace cards",
version: t.deck
});
//#endregion
//#region src/common/helpers/badge-registration.js
function Rp({ tag: e, badgeClass: t, name: n, description: r, version: a, documentationURL: o }) {
customElements.get(e) || customElements.define(e, t), window.customBadges = window.customBadges || [];
for (let t = window.customBadges.length - 1; t >= 0; --t) window.customBadges[t].type === e && window.customBadges.splice(t, 1);
window.customBadges.push({
type: e,
name: n,
description: r,
preview: !0,
documentationURL: o || rn(e)
}), i(n, a);
}
//#endregion
//#region src/badges/helpers/model.js
function zp() {
let e = X(this._config), t = this._getEntities(), n = jc(t, this._config), r = e === "template" ? F.call(this, this._config?.state_template, "") ?? "unavailable" : "", i = this._config?.active_template?.trim() || "", a = e === "template" && i ? F.call(this, i, "") : null, o = this._config?.inactive_template?.trim() || "", s = e === "template" && o ? F.call(this, o, "") : null, c = t[0]?.entity_id?.split(".")[0] || this._config?.domain || "", l = !!o && _t(s, c), u = e === "template" ? _t(a ?? r, c) : n.length > 0, d = this._config?.display_style === "badge" && !this._config?.card_visibility ? !0 : u, f = t[0], p = Z(this._config), m = p[0] || "", h = e === "area_count" && this._config?.domain === "unavailable" ? uc : f?.entity_id.split(".")[0] || this._config?.domain || "", g = Y(h), _ = this._config?.icon_source || (this._config?.icon ? "custom" : "domain"), v = zn.call(this, this._config?.icon, f?.entity_id || ""), ee = _ === "template" ? v : d ? this._config?.icon_on || v : this._config?.icon_off || v, te = ["custom", "template"].includes(_) && ee || g.icon, y = this._config?.color_source === "template" ? this._config?.color : d ? this._config?.color_on ?? (this._config?.color_source ? void 0 : this._config?.color) : this._config?.color_off, b = I.call(this, y), ne = !!(b && ![
"theme",
"state",
"state-active",
"state-inactive"
].includes(b)), x = !b || [
"theme",
"state",
"state-active",
"state-inactive"
].includes(b) ? "theme" : b, re = e === "template" && this._config?.name_template?.trim() || "", ie = re ? F.call(this, re, "") : null, ae = String(ie ?? "").trim(), S = e === "template" && !f ? {
entity_id: "sensor.orbit_status_badge_template",
state: r || "unavailable",
attributes: { friendly_name: ae || "Template" }
} : n[0] || t[0] || {
entity_id: `${h || "sensor"}.orbit_status_badge`,
state: d ? "on" : "off",
attributes: m ? { device_class: m } : {}
}, C = ["entity", "template"].includes(e) ? S : {
entity_id: `${h}.orbit_status_badge`,
state: S.state,
attributes: m ? { device_class: m } : {}
}, oe = C.entity_id?.startsWith("sensor.") ? !1 : d, se = Vc(this.hass, this._config), ce = this._config?.name, le = p.map((e) => Sc(e)).join(", "), w = f && this.hass?.formatEntityName ? this.hass.formatEntityName(f) : "", ue = e === "area_count" && this._config?.domain === "unavailable" ? B(this.hass, g.label) : w || (e === "template" ? "Template" : se || le || g.label), de = ce && this.hass?.formatEntityName && this.hass.formatEntityName(S, Bp(ce, ae)) || ue, T = _ === "custom" ? d && this._config?.icon_on ? "icon_on" : !d && this._config?.icon_off ? "icon_off" : this._config?.icon ? "icon" : "" : _ === "template" && v ? "icon" : "";
return {
entities: t,
activeEntities: n,
isOn: d,
inactiveTemplateActive: l,
count: n.length,
displayValue: e === "template" ? vt(r, this.hass, c) : e === "entity" ? S.state : n.length,
label: de,
icon: te,
iconKey: T,
iconSource: _,
useStaticIcon: _ === "domain" && g.staticIcon,
stateSource: e,
representativeStateObj: S,
iconStateObj: C,
displayStateObj: ["entity", "template"].includes(e) ? S : {
entity_id: "sensor.orbit_status_badge_count",
state: d ? "on" : "off",
attributes: {
count: n.length,
friendly_name: de
},
last_changed: S.last_changed,
last_updated: S.last_updated,
context: S.context
},
defaultStateContent: e === "area_count" ? "count" : "state",
hasIconColorOverride: ne,
iconColor: x === "theme" ? Uc(C, oe) : Nt.call(this, x)
};
}
function Bp(e, t) {
let n = (e) => e?.type === "template" ? {
type: "text",
text: t
} : e;
return Array.isArray(e) ? e.map(n) : n(e);
}
//#endregion
//#region src/badges/styles/status-badge-styles.js
var Vp = d`
.card-badge {
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
width: 16px;
height: 16px;
border-radius: var(--ha-border-radius-md);
background-color: var(--tile-badge-background-color);
transition: background-color 280ms ease-in-out;
box-sizing: border-box;
user-select: none;
}
.card-badge[role="button"] {
cursor: pointer;
}
.card-badge:focus-visible {
outline: 2px solid var(--tile-badge-background-color);
outline-offset: 2px;
}
.card-badge > * {
color: var(--tile-badge-icon-color);
}
.card-badge .image-icon {
width: 12px;
height: 12px;
color: var(--tile-badge-icon-color);
}
.image-icon {
width: var(--ha-badge-icon-size, 18px);
height: var(--ha-badge-icon-size, 18px);
display: block;
line-height: 0;
color: var(--icon-color, var(--badge-color));
}
:host([heading-badge]) .image-icon {
width: 18px;
height: 18px;
}
:host([heading-badge]) .entity-picture {
width: 18px;
height: 18px;
border-radius: var(--ha-border-radius-circle);
object-fit: cover;
}
:host([heading-badge]) ha-state-icon {
--mdc-icon-size: 18px;
}
.image-icon svg {
display: block;
width: 100%;
height: 100%;
}
.template-state {
white-space: pre-line;
}
`, Hp = "sensor.orbit_status_badge_preview", Up = class extends k {
static svgCache = z;
static properties = {
hass: { attribute: !1 },
_config: { state: !0 },
_colorPickerKey: { state: !0 },
_colorPickerTab: { state: !0 },
_iconPickerKey: { state: !0 },
_iconPickerTab: { state: !0 },
_orbitIconFiles: { state: !0 },
_orbitIconFilesLoading: { state: !0 },
_localIconFiles: { state: !0 },
_localIconFilesLoading: { state: !0 },
_contentExpanded: { state: !0 },
_stateTypeExpanded: { state: !0 },
_templateRevision: { state: !0 }
};
constructor() {
super(), this._config = {}, this._colorPickerKey = "", this._colorPickerTab = "picker", this._iconPickerKey = "", this._iconPickerTab = "ha", this._orbitIconFiles = [], this._orbitIconFilesLoading = !1, this._localIconFiles = [], this._localIconFilesLoading = !1, this._contentExpanded = !1, this._stateTypeExpanded = !1, this._namePickerEnhanceFrame = void 0, this._namePickerEnhanceAttempts = 0;
}
connectedCallback() {
super.connectedCallback(), Bo(this), an(this, "orbit-status-badge-dev"), queueMicrotask(() => this._syncTemplateSubscriptions());
}
disconnectedCallback() {
this._namePickerEnhanceFrame !== void 0 && (cancelAnimationFrame(this._namePickerEnhanceFrame), this._namePickerEnhanceFrame = void 0), ht.call(this), Vo(this), super.disconnectedCallback();
}
updated(e) {
(e.has("hass") || e.has("_config")) && (this._syncTemplateSubscriptions(), this._namePickerEnhanceAttempts = 0), this._scheduleNamePickerEnhancement();
}
_scheduleNamePickerEnhancement() {
X(this._config) !== "template" || this._namePickerEnhanceFrame !== void 0 || (this._namePickerEnhanceFrame = requestAnimationFrame(() => {
this._namePickerEnhanceFrame = void 0, this._namePickerEnhanceAttempts += 1, this._enhanceNamePicker();
}));
}
_syncTemplateSubscriptions() {
let e = X(this._config), t = [
this._config?.state_template,
this._config?.active_template,
this._config?.inactive_template,
this._config?.name_template
], n = this._config?.display_style === "badge", r = [
...(e === "template" ? n ? [this._config?.active_template, this._config?.inactive_template] : t : []).filter(Boolean).map((e) => ({
template: e,
entityId: ""
})),
...St(this._config),
...Ct(this._config)
];
mt.call(this, r);
}
_enhanceNamePicker() {
let e = this.shadowRoot?.querySelector(".status-badge-name-selector"), t = Yp(e, "ha-entity-name-picker");
if (!t) {
this._namePickerEnhanceAttempts < 10 && this._scheduleNamePickerEnhancement();
return;
}
if (this._namePickerEnhanceAttempts = 0, t.__orbitTemplateNameEnhanced) return;
let n = t._getFilteredItems, r = t._validTypes, i = t._formatItem, a = t._pickerValueChanged;
typeof n != "function" || typeof r != "function" || typeof i != "function" || typeof a != "function" || (t.__orbitTemplateNameEnhanced = !0, t._validTypes = (e) => new Set([...r.call(t, e), "template"]), t._formatItem = (e) => e?.type === "template" ? this._t("Template") : i.call(t, e), t._getFilteredItems = () => {
let e = n.call(t), r = Jp(t.value), i = t._editIndex != null && r[t._editIndex]?.type === "template";
if (!r.some((e) => e?.type === "template") || i) {
let t = String(F.call(this, this._config?.name_template, "") ?? "").trim(), n = this._t("Template"), r = t || this._t("Not configured");
e.push({
id: "___template___",
primary: n,
secondary: r,
search_labels: {
id: "___template___",
primary: n,
secondary: r
},
sorting_label: n
});
}
return e;
}, t._pickerValueChanged = (e) => {
if (e.detail?.value !== "___template___") {
a.call(t, e);
return;
}
if (e.stopPropagation(), t.disabled) return;
let n = Jp(t.value), r = { type: "template" };
t._editIndex == null ? n.push(r) : (n[t._editIndex] = r, t._editIndex = void 0), t._setValue(n), t._picker && (t._picker.value = void 0);
}, t.requestUpdate());
}
setConfig(e) {
let { config: t, migrated: n } = un(e || {}), r = xc(t);
this._config = qp(r), n && queueMicrotask(() => this._dispatchConfigChanged(this._config));
}
_t(e, t) {
return B(this.hass, e, t);
}
_updateConfig(e) {
this._config = qp(xc(sa(this._config, e))), this._dispatchConfigChanged(this._config);
}
_dispatchConfigChanged(e) {
this.dispatchEvent(new CustomEvent("config-changed", {
detail: { config: e },
bubbles: !0,
composed: !0
}));
}
_handleConfigUpdate(e, t) {
let n = ["color_on", "color_off"].includes(e) && (!t || t === "theme");
this._updateConfig({ [e]: n || t === "" ? void 0 : t });
}
_renderColor(e, t, n) {
return da.call(this, e, t, n);
}
_renderColorPair(e) {
return pa.call(this, e);
}
_renderIconInput(e, t, n = "mdi:lightbulb or icon.svg") {
return Oi.call(this, e, t, n);
}
_getColorStyle(e) {
return Uo(e);
}
_getColorPickerValue(e) {
return Wo(e);
}
_loadLocalIconFiles(e = "") {
return ji.call(this, e);
}
_isImageIcon(e) {
return Ei(e);
}
_resolveIconPath(e) {
return Di(e);
}
_getInlineSvg(e) {
return R.call(this, e, { forceColor: !0 });
}
_getDeviceClassOptions() {
return Ic(this.hass, this._config);
}
_getStateContentHass() {
let e = (/* @__PURE__ */ new Date()).toISOString(), t = Vc(this.hass, this._config), n = this._config?.name_template?.trim() || "", r = {
entity_id: Hp,
state: "on",
attributes: {
count: 2,
friendly_name: (X(this._config) === "template" ? String(F.call(this, n, "") ?? "").trim() : "") || t || "Orbit status"
},
last_changed: e,
last_updated: e,
context: {
id: "",
parent_id: null,
user_id: null
}
};
return {
...this.hass,
entities: {
...this.hass?.entities || {},
[Hp]: {
entity_id: Hp,
platform: "orbit",
area_id: Bc(this._config)[0] || null,
device_id: null
}
},
states: {
...this.hass?.states || {},
[Hp]: r
}
};
}
render() {
let e = this._config?.display_style === "badge", n = this._getDeviceClassOptions(), r = dc.find((e) => e.value === this._config?.domain), i = [
...this._config?.show_name === !0 ? ["name"] : [],
...this._config?.show_state === !1 ? [] : ["state"],
...this._config?.show_icon === !1 ? [] : ["icon"]
], a = X(this._config), o = this._config?.entity || "", s = a === "entity" && o ? this.hass : this._getStateContentHass(), c = a === "entity" && o ? o : Hp;
return E`
{
this._stateTypeExpanded = e.detail.expanded;
}}
>
${this._t("State type")}
${ku.call(this, {
stateSource: a,
domainConfig: r,
deviceClassOptions: n,
badgeMode: e,
areaMultiple: !0
})}
{
this._contentExpanded = e.detail.expanded;
}}
>
${this._t("Content")}
${e ? this._renderColor(["Background", "Color"], "card_color", "primary-color") : E`
this._handleConfigUpdate("name", e.detail.value)}
>
`}
${this._renderColorPair({
label: "Color",
onKey: "color_on",
offKey: "color_off",
onPreviewValue: e ? "white" : "theme",
offPreviewValue: e ? "white" : "theme"
})}
${Ou.call(this, a)}
${e ? "" : E`
${this.hass?.localize("ui.panel.lovelace.editor.card.heading.entity_config.displayed_elements") || this._t("Displayed elements")}
{
let t = e.detail.value || [];
this._updateConfig({
show_name: t.includes("name") ? !0 : void 0,
show_state: t.includes("state") ? void 0 : !1,
show_icon: t.includes("icon") ? void 0 : !1
});
}}
>
${a === "template" ? "" : E`
this._handleConfigUpdate("state_content", (() => {
let t = e.detail.value;
return !t || t === (a === "entity" ? "state" : "count") ? void 0 : t;
})())}
>
`}
`}
${K.call(this, {
interactions: [
{
key: "tap_action",
formKey: "tap_action",
label: "Tap behavior",
defaultAction: a === "entity" ? "more-info" : a === "area_count" ? q : "none",
customActions: [J],
defaultVisible: !0,
customDefaultLabel: a === "area_count" ? q : void 0
},
{
key: "hold_action",
formKey: "hold_action",
label: "Hold behavior",
defaultAction: "none",
customActions: [J]
},
{
key: "double_tap_action",
formKey: "double_tap_action",
label: "Double tap behavior",
defaultAction: "none",
customActions: [J]
}
],
context: {
entity_id: this._config?.entity,
area_id: this._config?.area
}
})}
${this._t("Orbit Status Badge (Dev) v{version}", { version: t.statusBadge })}
`;
}
static styles = [...Gs, d`
.content-panel,
.state-type-panel {
display: block;
--expansion-panel-content-padding: 0;
border-radius: var(--ha-border-radius-md);
--ha-card-border-radius: var(--ha-border-radius-md);
}
.content-panel > [slot="header"],
.state-type-panel > [slot="header"] {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.content-panel ha-icon,
.state-type-panel ha-icon {
color: var(--secondary-text-color);
}
.content-panel-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px;
}
.native-picker-label {
display: block;
}
`];
}, Wp = [
"state_source",
"entity",
"area",
"domain",
"device_class",
"threshold",
"thresholds",
"hide",
"active_template",
"inactive_template",
"name_template",
"state_template"
], Gp = [
"card_color",
"name",
"color_source",
"color",
"color_on",
"color_off",
"icon_source",
"icon",
"icon_on",
"icon_off",
"icon_svg_color_override",
"icon_on_svg_color_override",
"icon_off_svg_color_override",
"show_name",
"show_state",
"show_icon",
"show_entity_picture",
"state_content"
], Kp = [
"tap_action",
"hold_action",
"double_tap_action"
];
function qp(e = {}) {
let t = e.display_style === "badge" ? [
"type",
"display_style",
"entity",
"card_visibility",
...Wp.filter((e) => e !== "entity"),
...Gp,
...Kp,
"grid_options",
"view_layout"
] : [
"type",
"display_style",
...Wp,
...Gp,
...Kp,
"grid_options",
"view_layout"
], n = {}, r = /* @__PURE__ */ new Set();
return t.forEach((t) => {
Object.prototype.hasOwnProperty.call(e, t) && (n[t] = e[t], r.add(t));
}), Object.keys(e).forEach((t) => {
r.has(t) || (n[t] = e[t]);
}), n;
}
customElements.get("orbit-status-badge-dev-editor") || customElements.define("orbit-status-badge-dev-editor", Up);
function Jp(e) {
return e ? typeof e == "string" ? [{
type: "text",
text: e
}] : Array.isArray(e) ? [...e] : [e] : [];
}
function Yp(e, t) {
if (!e) return;
if (e.matches?.(t)) return e;
let n = e.shadowRoot?.querySelector(t);
if (n) return n;
for (let n of e.shadowRoot?.querySelectorAll("*") || []) {
let e = Yp(n, t);
if (e) return e;
}
}
Rp({
tag: "orbit-status-badge-dev",
badgeClass: class extends k {
static svgCache = z;
static properties = {
hass: { attribute: !1 },
_config: { state: !0 },
_isHeadingBadge: { state: !0 },
_templateRevision: { state: !0 },
...Jc,
...Nl
};
constructor() {
super(), Yc.call(this), Pl.call(this);
}
static getConfigElement() {
return document.createElement("orbit-status-badge-dev-editor");
}
static getStubConfig() {
return {};
}
setConfig(e) {
_c(e || {}), this._config = xc(e || {});
}
_t(e, t) {
return B(this.hass, e, t);
}
connectedCallback() {
super.connectedCallback(), this._isHeadingBadge = !!this.closest("hui-heading-badge"), this.toggleAttribute("heading-badge", this._isHeadingBadge), queueMicrotask(() => this._syncTemplateSubscriptions());
}
disconnectedCallback() {
ht.call(this), Qc.call(this), this._clearDoubleTapTimer(), this._cancelLongPress(), super.disconnectedCallback();
}
updated(e) {
(e.has("hass") || e.has("_config")) && (this._syncTemplateSubscriptions(), this._syncCurrentActivityEntities());
}
_syncCurrentActivityEntities() {
if (!this._currentActivityOpen) return;
let e = this._getModel();
Ll.call(this, e.activeEntities.map((e) => e.entity_id), e.entities.map((e) => e.entity_id));
}
shouldUpdate(e) {
if ($c.call(this, e) || !e.has("hass") || e.has("_config") || [...e.keys()].some((e) => e !== "hass")) return !0;
let t = e.get("hass"), n = this.hass;
if (!t || !n || t.entities !== n.entities || t.devices !== n.devices || t.areas !== n.areas) return !0;
let r = X(this._config);
return r === "template" ? !0 : (r === "area_count" ? Hc(this.hass, this._config) : [this._config?.entity].filter(Boolean)).some((e) => t.states?.[e] !== n.states?.[e]);
}
_syncTemplateSubscriptions() {
let e = X(this._config), t = this._config?.state_template?.trim() || "", n = this._config?.active_template?.trim() || "", r = this._config?.inactive_template?.trim() || "", i = this._config?.name_template?.trim() || "", a = this._config?.display_style === "badge", o = (e === "template" ? a ? [n, r] : [
t,
n,
r,
i
] : []).filter(Boolean).map((e) => ({
template: e,
entityId: ""
}));
mt.call(this, [
...o,
...St(this._config),
...Ct(this._config)
]);
}
_getEntities() {
return zc(this.hass, this._config);
}
_getModel() {
return zp.call(this);
}
_handleAction(e, t = null) {
if (e?.action === "Current state") {
Vl.call(this), Xc.call(this);
return;
}
if (e?.action === "current-activity") {
tl.call(this);
let e = this._getModel(), t = e.activeEntities.map((e) => e.entity_id), n = X(this._config) === "area_count", r = n ? e.entities.map((e) => e.entity_id) : t, i = wc(this.hass, this._config);
Fl.call(this, t, r, n, i);
return;
}
return He.call(this, e, t);
}
_navigate(e) {
return Ke(e);
}
_clearDoubleTapTimer() {
return Ue.call(this);
}
_cancelLongPress() {
return Zn.call(this);
}
get _LONG_PRESS_DELAY() {
return 500;
}
_handlePointerDown(e, t) {
if (A(this._config?.hold_action)) return Xn.call(this, e, t, this._config?.hold_action);
}
_handlePointerEnd(e) {
return Qn.call(this, e);
}
_handleTap(e, t) {
if (this._longPressTriggered) {
this._longPressTriggered = !1;
return;
}
let n = hc(this._config);
return M.call(this, e, t, this._config?.tap_action || n, this._config?.double_tap_action);
}
_handleDoubleTap(e, t) {
return N.call(this, e, t, this._config?.double_tap_action);
}
_renderIcon(e) {
let t = this._config?.display_style === "badge", n = t ? "width:12px;height:12px;margin:0;" : "", r = t ? "width:16px;height:16px;margin:0;border-radius:var(--ha-border-radius-md);" : "", i = e.stateSource === "entity" && this._config?.show_entity_picture ? e.representativeStateObj.attributes?.entity_picture_local || e.representativeStateObj.attributes?.entity_picture : "";
if (i) return E`
${V(e)} ` : E`${e.displayValue} ` : E`
this._cancelLongPress()}
@pointerleave=${() => this._cancelLongPress()}
>
${f}
${m}
${h}
` : E`${this._isHeadingBadge ? E`
this._cancelLongPress()}
@pointerleave=${() => this._cancelLongPress()}
>
${f}
` : E`
this._cancelLongPress()}
@pointerleave=${() => this._cancelLongPress()}
>
${f}
`}${m}${h}`;
}
static styles = [
Vp,
zd,
Bd
];
},
name: "Orbit Status Badge (Dev)",
description: "Displays an entity, area count, or template state",
version: t.statusBadge
}), console.info("Orbit Cards development namespace active (-dev)"), i("Orbit Cards", e);
//#endregion