@hakit/components
Version:
A series of components to work with @hakit/core
1,206 lines (1,192 loc) • 376 kB
JavaScript
import { j as r, a as x, F as ie } from "./emotion-react-jsx-runtime.browser.esm-Tq_btErF.js";
import { c as _ } from "./emotion-styled-base.browser.esm-Dyg8Y4aq.js";
import * as X from "react";
import aa, { useMemo as ee, useState as Q, useEffect as G, memo as Mt, useId as ur, useRef as Y, useCallback as M, Children as Re, isValidElement as Te, cloneElement as Ue, lazy as ao, Suspense as Tr, Fragment as ia, useLayoutEffect as io } from "react";
import { getBreakpoints as sa, allBreakpoints as Zt, mq as Ce, getColumnSizeCSS as pt, generateColumnBreakpoints as ca } from "./es/ThemeProvider/breakpoints.js";
import { useStore as le, computeDomain as et, useEntity as pe, isUnavailableState as Ee, localize as j, useIcon as $e, useIconByDomain as Pt, useIconByEntity as jt, computeDomainTitle as Hr, ON as Je, OFF as je, useHass as Be, useWeather as la, getIconByEntity as fn, getSupportedForecastTypes as da, supportsFeatureFromAttributes as be, UNAVAILABLE as Ve, toReadableString as We, stateActive as zr, isOffState as ua, useLightBrightness as pa, lightSupportsColorMode as ot, LIGHT_COLOR_MODES as at, lightSupportsColor as so, lightSupportsBrightness as fa, useService as Bt, computeStateDisplay as ha, getColorByIndex as ma, useCamera as co, STREAM_TYPE_WEB_RTC as lo, STREAM_TYPE_HLS as uo, useLogs as ga, useDevice as po, createHistoricState as hn, localizeStateMessage as mn, localizeTriggerSource as va, timeAgo as ba, batteryIconByLevel as ya, useLightTemperature as xa, temperature2rgb as fo, rgb2hex as Tt, rgb2hs as wa, useLightColor as Na, hsv2rgb as Vr, hex2rgb as Cr, hs2rgb as Ea, rgbw2rgb as ka, rgbww2rgb as Sa } from "@hakit/core";
import { TextField as _a } from "./es/Shared/Form/TextField.js";
import { css as Se, createElement as qr, Global as Ur, keyframes as ho, CacheProvider as Ca } from "@emotion/react";
import { useLongPress as mo } from "use-long-press";
import { startCase as go, lowerCase as vo, capitalize as bt, clamp as lt, snakeCase as vt, flatten as Oa, groupBy as Da, isNumber as Or, isEqual as Ra, merge as Ia } from "lodash";
import { ErrorBoundary as se } from "react-error-boundary";
import * as Aa from "react-dom";
import { createPortal as pr } from "react-dom";
import "@emotion/serialize";
import "@emotion/utils";
import "@emotion/is-prop-valid";
import { filterSupportedAlarmStates as Ta, DEFAULT_STATES as za, _getActionColor as Va, ALARM_MODE_STATE_MAP as gn, ALARM_MODES as $a, _getActionLabel as vn } from "./es/Shared/Entity/Alarm/AlarmControls/shared.js";
import { useDebouncedCallback as Ft, useThrottledCallback as Yr } from "use-debounce";
import { SvgGraph as Ma } from "./es/Shared/SvgGraph/index.js";
import { Row as K } from "./es/Shared/Row/index.js";
import { Column as te } from "./es/Shared/Column/index.js";
import { Icon as xe } from "@iconify/react";
import { getAdditionalWeatherInformation as Pa } from "./es/Cards/WeatherCard/helpers.js";
import { UNIT_F as fr, ClimateEntityFeature as it, CLIMATE_HVAC_ACTION_TO_MODE as ja, compareClimateHvacModes as Ba, computeHvacModeIcon as bn, computePresetModeIcon as yn, computeFanModeIcon as xn, computeSwingModeIcon as wn } from "./es/Shared/Entity/Climate/ClimateControls/data.js";
import { colors as Ie, icons as Nn, activeColors as Fa } from "./es/Shared/Entity/Climate/ClimateControls/shared.js";
import { BigNumber as bo } from "./es/Shared/Entity/Climate/ClimateControls/BigNumber.js";
import { useGesture as Lt } from "@use-gesture/react";
import La from "@fullcalendar/react";
import Wa from "@fullcalendar/daygrid";
import Ha from "@fullcalendar/interaction";
import qa from "@fullcalendar/list";
import { useResizeDetector as Gr } from "react-resize-detector";
import Ua from "autolinker";
import { VideoPlayer as yo } from "./es/Cards/CameraCard/players/index.js";
import { svgArc as En } from "./es/Shared/ControlSliderCircular/svg-arc.js";
import { PreloadImage as Qr } from "./es/Shared/PreloadImage/index.js";
import { Alert as tt } from "./es/Shared/Alert/index.js";
import { theme as Ya } from "./es/ThemeProvider/theme.js";
import { convertToCssVars as Ga } from "./es/ThemeProvider/helpers.js";
import { DEFAULT_THEME_OPTIONS as kn, LIGHT as hr, DARK as Xr, ACCENT as xo, DIFF as Nt, DEFAULT_START_LIGHT as Kr, DEFAULT_START_DARK as Jr } from "./es/ThemeProvider/constants.js";
import { useThemeStore as st } from "./es/ThemeProvider/store.js";
import Qa from "@emotion/cache";
import { jsxs as Xa, jsx as er } from "react/jsx-runtime";
import { useKeyPress as wo, useDebounce as Ka } from "react-use";
import { getToolbarActions as No } from "./es/Shared/Entity/Vacuum/VacuumControls/shared.js";
import { VacuumImage as Eo } from "./es/Shared/Entity/Vacuum/VacuumControls/VacuumImage.js";
import { DEFAULT_FAB_SIZE as yt } from "./es/Cards/MediaPlayerCard/constants.js";
import { Marquee as Ja } from "./es/Cards/MediaPlayerCard/Marquee.js";
import { Thumbnail as Za } from "./es/Cards/MediaPlayerCard/Thumbnail.js";
import { Clock as ei } from "./es/Cards/MediaPlayerCard/Clock.js";
import { ProgressBar as ti } from "./es/Cards/MediaPlayerCard/ProgressBar.js";
import $r, { DivIcon as ri } from "leaflet";
import { MapContainer as ni, Marker as oi, TileLayer as ai } from "react-leaflet";
import { daySuffix as ii, createDateFormatter as si } from "./es/Cards/TimeCard/formatter.js";
import { Time as Dr, AmOrPm as ci } from "./es/Cards/TimeCard/shared.js";
import { AutoHeight as li } from "./es/Shared/AutoHeight/index.js";
import { isValidProp as Sn } from "./es/utils/isValidProp.js";
import { SVG_WIDTH as di, SVG_HEIGHT as ui } from "./es/Shared/SvgGraph/constants.js";
function Wt() {
const e = st((s) => s.breakpoints), o = le((s) => s.windowContext) ?? window, n = ee(() => sa(e), [e]), [a, c] = Q(() => Object.fromEntries(Zt.map((s) => [s, !1])));
return G(() => {
const s = o || window, i = /* @__PURE__ */ new Map(), l = () => {
const p = Object.fromEntries(Zt.map((u) => [u, !1]));
for (const u of Zt)
if (typeof n[u] == "string" && i.get(u)?.matches) {
p[u] = !0;
break;
}
c(p);
};
for (const p of Zt) {
const u = n[p];
if (typeof u == "string") {
const v = s.matchMedia(u);
if (!v) continue;
i.set(p, v), v.addEventListener("change", l);
}
}
return l(), () => {
for (const p of i.values())
p && p.removeEventListener("change", l);
};
}, [n, o]), a;
}
var pi = function(t) {
var o = /* @__PURE__ */ new WeakMap();
return function(n) {
if (o.has(n))
return o.get(n);
var a = t(n);
return o.set(n, a), a;
};
};
function ko() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
const fi = (e, t) => t ? /* @__PURE__ */ _(e, process.env.NODE_ENV === "production" ? {
target: "e1xe7ch93"
} : {
target: "e1xe7ch93",
label: "getBaseElement"
})() : /* @__PURE__ */ _(e, process.env.NODE_ENV === "production" ? {
shouldForwardProp: (o) => Sn(o),
target: "e1xe7ch92"
} : {
shouldForwardProp: (o) => Sn(o),
target: "e1xe7ch92",
label: "getBaseElement"
})("outline:none;border:0;box-sizing:border-box;padding:0;position:relative;overflow:hidden;display:flex;width:100%;cursor:pointer;background-color:var(--ha-S300);box-shadow:0px 0px 0px rgba(0, 0, 0, 0);transform:scale(1) translate3d(0, 0, 0);transition:var(--ha-transition-duration) var(--ha-easing);transition-property:transform,background-color,background-image;color:var(--ha-S200-contrast);flex-shrink:1;user-select:none;svg{color:var(--ha-S200-contrast);transition:color var(--ha-transition-duration) var(--ha-easing);}.graph-element{position:absolute;bottom:0;left:0;right:0;}&:not(.disabled):not(:disabled):not(:focus):hover{background-color:var(--ha-S400);color:var(--ha-500-contrast);svg{color:var(--ha-S400-contrast);}}&:disabled,&.disabled{cursor:not-allowed;opacity:0.8;}&.card-base-active:active:not(.disable-scale-effect):not(.disabled):not(.unavailable){transform:scale(0.9) translate3d(0, 0, 0);}", (o) => !o.disableActiveState && `
&.active, &:active {
background-color: var(--ha-A400);
color: var(--ha-900-contrast);
svg {
color: var(--ha-900-contrast);
}
&:not(:disabled):not(.disabled):hover {
background-color: var(--ha-A700);
color: var(--ha-900-contrast);
}
}
`, ";"), hi = /* @__PURE__ */ _((e) => /* @__PURE__ */ r(ji, { ...e }), process.env.NODE_ENV === "production" ? {
target: "e1xe7ch91"
} : {
target: "e1xe7ch91",
label: "StyledRipples"
})(process.env.NODE_ENV === "production" ? {
name: "1513zut",
styles: "flex-shrink:1;width:100%;height:100%"
} : {
name: "1513zut",
styles: "flex-shrink:1;width:100%;height:100%",
toString: ko
}), _n = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e1xe7ch90"
} : {
target: "e1xe7ch90",
label: "Trigger"
})(process.env.NODE_ENV === "production" ? {
name: "1rw17cg",
styles: "width:100%;height:100%;&:has(.features){display:flex;flex-direction:column;}>.features{padding:0 1rem 1rem;>.fit-content>.button-group-inner>*{width:auto;flex-grow:1;>.button-bar-button{width:auto;flex-grow:1;}}}"
} : {
name: "1rw17cg",
styles: "width:100%;height:100%;&:has(.features){display:flex;flex-direction:column;}>.features{padding:0 1rem 1rem;>.fit-content>.button-group-inner>*{width:auto;flex-grow:1;>.button-bar-button{width:auto;flex-grow:1;}}}",
toString: ko
}), Cn = {
xxs: 12,
xs: 6,
sm: 6,
md: 4,
lg: 4,
xlg: 3
}, mi = function({
as: t = "div",
entity: o,
title: n,
active: a,
service: c,
serviceData: s,
children: i,
disabled: l,
longPressCallback: p,
onClick: u,
disableModal: v = !1,
modalProps: m,
disableRipples: h = !1,
disableScale: f = !1,
disableActiveState: b = !1,
onlyFunctionality: d = !1,
id: k,
className: y,
cssStyles: N,
style: E,
borderRadius: g = "16px",
rippleProps: S,
disableColumns: O,
refCallback: V,
key: R,
relatedEntities: z,
features: I,
featureBarProps: P,
graph: w,
resizeDetectorProps: C,
triggerClass: A,
...D
}) {
const $ = ur(), T = le((H) => H.globalComponentStyles), [L, F] = Q(!1), J = o ? et(o) : null, B = pe(o ?? "unknown", {
returnNullIfNotFound: !0
}), U = Y(null), {
width: W = 0
} = Gr({
refreshMode: "debounce",
refreshRate: 50,
handleHeight: !1,
skipOnMount: !1,
targetRef: U,
...C ?? {}
}), ne = pe(w?.entity ?? "unknown", {
returnNullIfNotFound: !0,
historyOptions: {
disable: !1,
...w?.historyOptions
}
}), de = ee(() => typeof B?.state == "string" ? Ee(B.state) : !1, [B?.state]), ue = g, q = ee(() => fi(t, d), [t, d]), Z = mo((H) => {
typeof p == "function" && p(B !== null ? B : null, H), typeof o == "string" && !L && !v && F(!0), U.current?.classList.remove("card-base-active");
}, {
threshold: 300,
cancelOnMovement: !0,
cancelOutsideElement: !0,
filterEvents(H) {
return !("button" in H && H.button === 2);
}
}), re = M((H) => {
if (!l) {
if (typeof c == "string" && B && !de) {
const ve = B.service[c];
ve(s);
}
typeof u == "function" && u(B !== null ? B : null, H);
}
}, [c, l, B, s, u, de]), oe = ee(() => n || B?.attributes?.friendly_name || (J !== null ? go(vo(J)) : null), [n, B, J]), ae = ee(() => {
const H = Object.entries(Cn).reduce((ve, [De, Ze]) => {
const Jt = D[De];
return {
...ve,
[De]: Jt ?? Ze
};
}, Cn);
return Object.entries(H).map(([ve, De]) => `${ve}-${De}`).join(" ");
}, [D.xxs, D.xs, D.sm, D.md, D.lg, D.xlg]), fe = Re.toArray(z).filter((H) => Te(H)), he = Re.toArray(I).filter((H) => Te(H)), ye = Re.map(he, (H, ve) => Te(H) ? Ue(H, {
key: H.key || `${$}${ve}`,
...H.props
}) : H), ge = he.length > 0, Oe = ge && /* @__PURE__ */ r(rt, { layoutType: "bubble", className: "features", fullWidth: !0, gap: "0.5rem", ...P, children: ye });
function we(H) {
const ve = di / ui;
return `calc(${H / ve}px - ${w?.adjustGraphSpaceBy ?? "0px"});`;
}
const Pe = we(W), Qe = ee(() => ["card-base", y ?? "", O ? "" : ae, f ? "disable-scale-effect" : "", a ? "active" : "", de ? "unavailable" : "", l || de ? "disabled" : "", ge ? "has-features" : "", ne ? "has-graph" : ""].filter((H) => !!H).join(" "), [a, y, ae, f, O, l, ne, ge, de]), Xt = () => {
U.current?.classList.add("card-base-active");
}, Kt = () => {
U.current?.classList.remove("card-base-active");
};
return /* @__PURE__ */ x(ie, { children: [
/* @__PURE__ */ x(q, { ref: (H) => {
U.current = H, V && V(U);
}, id: k ?? "", className: Qe, css: /* @__PURE__ */ Se("padding-bottom:", ne ? Pe : "inherit", ";", T.cardBase ?? "", " ", N ?? "", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:CardBase;")), style: {
...E ?? {},
borderRadius: ue
}, disableActiveState: b, disabled: de || l, ...Z(), ...D, children: [
ne && /* @__PURE__ */ r("div", { className: "graph-element history", children: ne.history.loading ? /* @__PURE__ */ r(tt, { className: "loading", description: j("loading") }) : ne.history.coordinates.length > 0 ? /* @__PURE__ */ r(Ma, { coordinates: ne.history.coordinates, ...w?.props }) : /* @__PURE__ */ r(tt, { className: "no-state-history", description: j("no_state_history_found") }) }),
h ? /* @__PURE__ */ x(_n, { className: `contents trigger-element ${A}`, onClick: re, onPointerDown: Xt, onPointerUp: Kt, children: [
i,
Oe
] }) : /* @__PURE__ */ qr(hi, { ...S, key: S?.key, borderRadius: ue, disabled: l || de }, /* @__PURE__ */ x(_n, { className: `contents trigger-element ${A}`, onClick: re, onPointerDown: Xt, onPointerUp: Kt, children: [
i,
Oe
] })),
Re.map(fe, (H, ve) => Te(H) ? Ue(H, {
key: H.key || `${$}${ve}`,
...H.props
}) : H)
] }, R),
typeof o == "string" && /* @__PURE__ */ r(Bo, { ...m, entity: o, title: m?.title ?? oe ?? j("unknown"), onClose: () => {
F(!1), m?.onClose && m.onClose();
}, open: m?.open || L, id: $ })
] });
}, _e = Mt(function(t) {
return /* @__PURE__ */ r(se, { ...ce({
prefix: "CardBase"
}), children: mi(t) });
}), gi = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e1q4f2q20"
} : {
target: "e1q4f2q20",
label: "RelatedEntityEl"
})("position:absolute;margin:", (e) => e.margin || "1rem", ";padding:", (e) => e.padding || "0", ";cursor:", (e) => e.onClick ? "pointer" : "default", ";", (e) => {
switch (e.position) {
case "left top":
return "top: 0; left: 0;";
case "left center":
return "top: 50%; left: 0; transform: translateY(-50%);";
case "left bottom":
return "bottom: 0; left: 0;";
case "center top":
return "top: 0; left: 50%; transform: translateX(-50%);";
case "center center":
return "top: 50%; left: 50%; transform: translate(-50%, -50%);";
case "center bottom":
return "bottom: 0; left: 50%; transform: translateX(-50%);";
case "right top":
return "top: 0; right: 0;";
case "right center":
return "top: 50%; right: 0; transform: translateY(-50%);";
case "right bottom":
return "bottom: 0; right: 0;";
default:
return "top: 0; right: 0;";
}
}, ";");
function vi({
entity: e,
icon: t,
iconProps: o,
render: n,
position: a,
onClick: c,
disabled: s,
service: i,
serviceData: l,
...p
}) {
const u = pe(e), v = $e(t ?? null, o), m = et(e), h = Pt(m === null ? "unknown" : m, o), f = jt(e || "unknown", o), b = v ?? f ?? h, d = ee(() => typeof u?.state == "string" ? Ee(u.state) : !1, [u?.state]), k = M((y) => {
if (!s) {
if (typeof i == "string" && u && !d) {
const N = u.service[i];
N(l);
}
typeof c == "function" && c(u !== null ? u : null, y);
}
}, [i, s, u, l, c, d]);
return /* @__PURE__ */ r(gi, { position: a, onClick: k, ...p, children: n ? n(u, b) : /* @__PURE__ */ r(ie, { children: b }) });
}
const pf = Mt(function(t) {
return /* @__PURE__ */ r(se, { ...ce({
prefix: "RelatedEntity"
}), children: /* @__PURE__ */ r(vi, { ...t }) });
});
function bi({
children: e,
active: t,
...o
}) {
return /* @__PURE__ */ r(
Ae,
{
as: "div",
rippleProps: {
preventPropagation: !0
},
active: t,
cssStyles: `
&.button-bar-button {
.contents {
> div {
padding: 0.6rem;
}
}
}
`,
...o,
children: e
}
);
}
const ht = function(t) {
return /* @__PURE__ */ r(se, { ...ce({
prefix: "FeatureEntity"
}), children: /* @__PURE__ */ r(bi, { ...t }) });
}, yi = /* @__PURE__ */ _("span", process.env.NODE_ENV === "production" ? {
target: "e9g8avo0"
} : {
target: "e9g8avo0",
label: "TooltipSpan"
})("position:fixed;top:0;left:0;background-color:var(--ha-S300);color:var(--ha-S100-contrast);padding:8px;border-radius:4px;box-shadow:0px 2px 4px var(--ha-S100);font-size:0.9rem;z-index:1000;visibility:hidden;opacity:0;transition:var(--ha-transition-duration) var(--ha-easing);transition-property:opacity,visibility;pointer-events:none;transform:", (e) => {
switch (e.placement) {
default:
case "top":
return "translateY(calc(-100% - 10px)) translateX(-50%)";
case "right":
return "translateX(10px) translateY(-50%)";
case "bottom":
return "translateY(10px) translateX(-50%)";
case "left":
return "translateX(calc(-100% - 10px)) translateY(-50%)";
}
}, ';&::before{content:"";position:absolute;width:0;height:0;border-style:solid;display:block;', (e) => {
switch (e.placement) {
default:
case "top":
return `
border-width: 6px 6px 0 6px;
border-color: var(--ha-S300) transparent transparent transparent;
top: 100%;
left: 50%;
transform: translateX(-50%);
`;
case "right":
return `
border-width: 6px 6px 6px 0;
border-color: transparent var(--ha-S300) transparent transparent;
left: 0;
top: 50%;
transform: translate(-100%, -50%);
`;
case "bottom":
return `
border-width: 0 6px 6px 6px;
border-color: transparent transparent var(--ha-S300) transparent;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
`;
case "left":
return `
border-width: 6px 0 6px 6px;
border-color: transparent transparent transparent var(--ha-S300);
right: 0;
top: 50%;
transform: translate(100%, -50%);
`;
}
}, ";}");
function xi({
placement: e = "top",
title: t = null,
children: o,
ref: n,
...a
}) {
const c = Y(null), s = Y(null), i = le((b) => b.portalRoot), p = le((b) => b.windowContext) ?? window, [u, v] = Q(!1), m = M((b) => {
const d = s.current?.getBoundingClientRect();
if (typeof d > "u") return;
let k = 0, y = 0;
switch (e) {
case "top":
k = d.top, y = d.left + d.width / 2;
break;
case "right":
k = d.top + d.height / 2, y = d.right;
break;
case "bottom":
k = d.bottom, y = d.left + d.width / 2;
break;
case "left":
k = d.top + d.height / 2, y = d.left;
break;
}
b.style.top = `${k}px`, b.style.left = `${y}px`, setTimeout(() => {
b.style.opacity = "1", b.style.visibility = "visible";
}, 0);
}, [e]), h = M(() => {
v(!0);
}, []), f = M(() => {
const b = c.current;
b && (b.style.opacity = "0", b.style.visibility = "hidden", b.setAttribute("aria-hidden", "true"), setTimeout(() => {
v(!1);
}, 250));
}, []);
return t === null || t === "" ? o : /* @__PURE__ */ x("div", { ref: s, onBlur: f, onTouchEnd: f, onTouchStart: h, onMouseUp: f, onMouseEnter: h, onMouseLeave: f, ...a, children: [
Re.map(o, (b, d) => Te(b) ? Ue(b, {
...b.props,
onClick(k, y) {
b.props.onClick?.(k, y), a?.onClick?.(y);
},
ref: n,
key: b.key ?? d
}) : b),
typeof document < "u" && pr(u && /* @__PURE__ */ r(yi, { className: "tooltip-inner", placement: e, ref: (b) => {
b && (c.current = b, m(b));
}, "aria-hidden": "false", children: t }), i ?? p.document.body)
] });
}
function Ne(e) {
return /* @__PURE__ */ r(se, { ...ce({
prefix: "Tooltip"
}), children: /* @__PURE__ */ r(xi, { ...e }) });
}
const ce = ({
prefix: e
}) => ({
fallbackRender({
error: t,
resetErrorBoundary: o
}) {
return /* @__PURE__ */ r(tt, { className: "error-boundary-alert", title: `${e ? `${e} - ` : ""}${j("unknown_error")}`, description: t.message, type: "error", onClick: () => o() });
}
});
function _t() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
const wi = /* @__PURE__ */ _(_e, process.env.NODE_ENV === "production" ? {
target: "e1cw8oq38"
} : {
target: "e1cw8oq38",
label: "StyledButtonCard"
})(process.env.NODE_ENV === "production" ? {
name: "1uus07k",
styles: "&.slim{justify-content:center;.fab-card-inner{width:3rem;height:3rem;}.button-card-trigger{align-items:center;>.contents{width:100%;}}}.button-card-trigger>.features{width:100%;}.button-card-trigger>.features>.fit-content{flex-basis:100%;}.children{width:100%;}&.slim-vertical{justify-content:center;.fab-card-inner{width:3rem;height:3rem;}.button-card-trigger{align-items:center;}}.footer>.title{text-align:left;}&:not(.disabled),&:not(:disabled){&:not(:focus):hover{.fab-card-inner:not(.custom){background-color:var(--ha-S500);color:var(--ha-S500-contrast);}}}"
} : {
name: "1uus07k",
styles: "&.slim{justify-content:center;.fab-card-inner{width:3rem;height:3rem;}.button-card-trigger{align-items:center;>.contents{width:100%;}}}.button-card-trigger>.features{width:100%;}.button-card-trigger>.features>.fit-content{flex-basis:100%;}.children{width:100%;}&.slim-vertical{justify-content:center;.fab-card-inner{width:3rem;height:3rem;}.button-card-trigger{align-items:center;}}.footer>.title{text-align:left;}&:not(.disabled),&:not(:disabled){&:not(:focus):hover{.fab-card-inner:not(.custom){background-color:var(--ha-S500);color:var(--ha-S500-contrast);}}}",
toString: _t
}), Ni = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e1cw8oq37"
} : {
target: "e1cw8oq37",
label: "Contents"
})(process.env.NODE_ENV === "production" ? {
name: "104hu76",
styles: "padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:stretch;height:100%"
} : {
name: "104hu76",
styles: "padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:stretch;height:100%",
toString: _t
}), Ei = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e1cw8oq36"
} : {
target: "e1cw8oq36",
label: "ToggleState"
})("background-color:var(--ha-100);border-radius:100%;width:16px;height:16px;position:absolute;top:2px;left:0;box-shadow:0px 0px 4px rgba(0, 0, 0, 0.5);transition:var(--ha-transition-duration) var(--ha-easing);transition-property:left,transform;left:", (e) => e.active ? "100%" : "0px", ";transform:", (e) => e.active ? "translate3d(calc(-100% - 2px), 0, 0)" : "translate3d(calc(0% + 2px), 0, 0)", ";"), ki = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e1cw8oq35"
} : {
target: "e1cw8oq35",
label: "Toggle"
})("position:relative;background-color:", (e) => e.active ? "var(--ha-A400)" : "var(--ha-S100)", ";border-radius:10px;width:40px;height:20px;flex-grow:0;flex-shrink:0;transition:background-color var(--ha-transition-duration) var(--ha-easing);margin-left:20px;"), Si = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e1cw8oq34"
} : {
target: "e1cw8oq34",
label: "Fab"
})("border-radius:100%;padding:6px;width:2rem;height:2rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.2);", (e) => e.brightness && `
filter: ${e.brightness};
`, " transition:var(--ha-transition-duration) var(--ha-easing);transition-property:background-color,color,filter;svg{transition:var(--ha-transition-duration) var(--ha-easing);transition-property:color;}"), _i = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e1cw8oq33"
} : {
target: "e1cw8oq33",
label: "LayoutBetween"
})(process.env.NODE_ENV === "production" ? {
name: "1fkysi1",
styles: "display:flex;align-items:center;justify-content:space-between;flex-direction:row;gap:10px;width:100%;&.vertical{flex-direction:column;height:100%;}"
} : {
name: "1fkysi1",
styles: "display:flex;align-items:center;justify-content:space-between;flex-direction:row;gap:10px;width:100%;&.vertical{flex-direction:column;height:100%;}",
toString: _t
}), Ci = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e1cw8oq32"
} : {
target: "e1cw8oq32",
label: "Footer"
})(process.env.NODE_ENV === "production" ? {
name: "1cgwlg6",
styles: "display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;margin-top:20px;width:100%"
} : {
name: "1cgwlg6",
styles: "display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;margin-top:20px;width:100%",
toString: _t
}), On = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e1cw8oq31"
} : {
target: "e1cw8oq31",
label: "Title"
})(process.env.NODE_ENV === "production" ? {
name: "ph2n02",
styles: "color:var(--ha-S100-contrast);font-size:0.9rem;font-weight:bold;margin-bottom:0.25rem"
} : {
name: "ph2n02",
styles: "color:var(--ha-S100-contrast);font-size:0.9rem;font-weight:bold;margin-bottom:0.25rem",
toString: _t
}), tr = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e1cw8oq30"
} : {
target: "e1cw8oq30",
label: "Description"
})(process.env.NODE_ENV === "production" ? {
name: "2pojne",
styles: "color:var(--ha-S300-contrast);font-size:0.7rem;margin:2px 0;text-align:left;width:100%;&.center{text-align:center;}&.secondary{color:var(--ha-S500-contrast);}&.slim-vertical{text-align:center;}"
} : {
name: "2pojne",
styles: "color:var(--ha-S300-contrast);font-size:0.7rem;margin:2px 0;text-align:left;width:100%;&.center{text-align:center;}&.secondary{color:var(--ha-S500-contrast);}&.slim-vertical{text-align:center;}",
toString: _t
});
function Oi({
entity: e,
service: t,
serviceData: o,
iconProps: n,
icon: a,
fabProps: c,
active: s,
onClick: i,
description: l,
title: p,
layoutType: u,
disabled: v = !1,
className: m,
hideIcon: h = !1,
hideState: f = !1,
hideLastUpdated: b = !1,
children: d,
hideDetails: k = !1,
cssStyles: y,
key: N,
hideToggle: E = !1,
unitOfMeasurement: g,
customRenderState: S,
...O
}) {
const V = le((U) => U.globalComponentStyles), R = e ? et(e) : null, z = pe(e || "unknown", {
returnNullIfNotFound: !0
}), I = typeof a < "u" && typeof a != "string" ? a : null, P = Pt(R === null ? "unknown" : R, {
...n ?? {}
}), w = jt(e || "unknown", {
...n ?? {}
}), C = u === "default" || u === void 0, A = u === "slim" || u === "slim-vertical", D = typeof z?.state == "string" ? Ee(z.state) : !1, $ = z ? z.state !== "off" && !D && !v : s || !1, T = $e(typeof a == "string" ? a : null, {
...n ?? {}
}), L = ee(() => p === null ? null : p || z?.attributes.friendly_name || z?.entity_id || null, [p, z]), F = ee(() => l || (R !== null && e ? Hr(e, z?.attributes?.device_class) : null), [l, R, z, e]);
function J() {
return f ? null : S && z ? S(z) : typeof s == "boolean" ? s ? `${j(Je)}` : `${j(je)}` : D ? j("unavailable") : z && z.state === Je && R === "light" ? `${z.custom.brightnessValue}%` : z ? z.attributes.unit_of_measurement ? `${j(z.state)}${g ?? z.attributes.unit_of_measurement}` : `${j(z.state)}` : null;
}
const B = Re.toArray(O?.features).filter((U) => Te(U)).length > 0;
return /* @__PURE__ */ r(
wi,
{
as: "button",
service: t,
serviceData: o,
active: s,
entity: e,
title: L ?? void 0,
disabled: v || D,
onClick: i,
className: `${m ?? ""} ${u ?? "default"} button-card`,
triggerClass: "button-card-trigger",
cssStyles: `
${V.buttonCard ?? ""}
${y ?? ""}
`,
...O,
children: /* @__PURE__ */ x(Ni, { className: `contents ${B ? "has-features" : ""}`, children: [
/* @__PURE__ */ x(_i, { className: `layout-between ${u === "slim-vertical" ? "vertical" : ""}`, children: [
!h && /* @__PURE__ */ r(Si, { brightness: $ && z?.custom.brightness || "brightness(100%)", ...c, className: `fab-card-inner icon ${c?.className} ${c?.style ? "custom" : ""}`, style: {
...c?.style,
backgroundColor: c?.style?.backgroundColor ?? ($ ? R === "light" ? z?.custom?.rgbaColor ?? "var(--ha-A400)" : "var(--ha-A400)" : "var(--ha-S400)"),
color: c?.style?.color ?? (z ? $ ? z.custom.rgbColor : "var(--ha-S500-contrast)" : $ ? "var(--ha-A400)" : "var(--ha-S500-contrast)")
}, children: I ?? T ?? w ?? P }),
C && !E && /* @__PURE__ */ r(ki, { active: $, className: "toggle", children: !D && /* @__PURE__ */ r(Ei, { active: $, className: "toggle-state" }) }),
A && /* @__PURE__ */ x(te, { fullWidth: !0, alignItems: u === "slim-vertical" ? "center" : "flex-start", children: [
L && /* @__PURE__ */ r(On, { className: "title", children: L }),
!k && F && /* @__PURE__ */ x(tr, { className: `description ${u ?? ""}`, children: [
F,
" ",
f ? "" : ` - ${J()}`
] }),
z && !b && /* @__PURE__ */ x(tr, { className: `description secondary ${u === "slim-vertical" ? "center" : ""}`, children: [
j("last_updated"),
": ",
z.custom.relativeTime
] })
] })
] }),
C && /* @__PURE__ */ x(Ci, { className: "footer", children: [
L && /* @__PURE__ */ r(On, { className: "title", children: L }),
!k && F && /* @__PURE__ */ x(tr, { className: "description", children: [
F,
z && !f ? ` - ${J()}` : ""
] }),
!k && z && !b && /* @__PURE__ */ x(tr, { className: "description secondary", children: [
j("last_updated"),
": ",
z.custom.relativeTime
] })
] }),
d && /* @__PURE__ */ r("div", { className: "children", children: d })
] })
},
N
);
}
function So(e) {
const t = {
xxs: 12,
xs: 6,
sm: 4,
md: 3,
lg: 2,
xlg: 2
};
return /* @__PURE__ */ r(se, { ...ce({
prefix: "ButtonCard"
}), children: /* @__PURE__ */ r(Oi, { ...t, ...e }) });
}
function _o() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
const Di = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "eu3ltb74"
} : {
target: "eu3ltb74",
label: "RangeSliderParent"
})(), Ri = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "eu3ltb73"
} : {
target: "eu3ltb73",
label: "StyledRange"
})((e) => `
min-width: 6rem;
width: 100%;
position: relative;
isolation: isolate;
${Ce(["xxs", "xs", "sm"], `
min-width: 0;
`)}
z-index: 1;
.range-slider-range {
position: relative;
-webkit-appearance: none;
width: 100%;
height: 0.7rem;
border-radius: 5px;
background: var(--ha-S400);
outline: none;
padding: 0;
margin: 0;
z-index: 1;
&::-webkit-slider-thumb {
appearance: none;
width: ${e.handleSize}px;
height: ${e.handleSize}px;
border-radius: 50%;
background: var(--ha-A400);
cursor: pointer;
transition: background var(--ha-transition-duration) var(--ha-easing);
position: relative;
z-index: 1;
&:hover {
background: var(--ha-A200);
}
}
&:active::-webkit-slider-thumb {
background: var(--ha-A400);
}
&::-moz-range-thumb {
width: ${e.handleSize}px;
height: ${e.handleSize}px;
border: 0;
border-radius: 50%;
background: var(--ha-A400);
cursor: pointer;
transition: background var(--ha-transition-duration) var(--ha-easing);
z-index: 1;
&:hover {
background: var(--ha-A200);
}
}
&:active::-moz-range-thumb {
background: var(--ha-A400);
}
&:focus {
&::-webkit-slider-thumb {
box-shadow: 0 0 0 3px var(--ha-A100);
}
}
}
// Firefox Overrides
::-moz-range-track {
background: var(--ha-S400);
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}
&:hover, &.active {
.tooltip-holder {
> div {
transform: translate(-50%, -1rem) rotate(-45deg) scale(1);
opacity: 1;
}
}
}
`, ";"), Ii = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "eu3ltb72"
} : {
target: "eu3ltb72",
label: "Tooltip"
})("opacity:0;position:absolute;bottom:100%;width:", ({
size: e
}) => `${e}rem`, ";height:", ({
size: e
}) => `${e}rem`, ";border-radius:50% 50% 50% 0;left:0;transform:translate(-50%, 1rem) rotate(-45deg) scale(0);transition:var(--ha-transition-duration) var(--ha-easing);transition-property:transform,opacity;background-color:var(--ha-A400);white-space:nowrap;pointer-events:none;z-index:0;&:after{content:attr(data-title);font-size:0.7rem;display:flex;align-items:center;justify-content:center;color:white;transform:rotate(45deg);position:absolute;inset:0;border-radius:50%;}"), Ai = /* @__PURE__ */ _("label", process.env.NODE_ENV === "production" ? {
target: "eu3ltb71"
} : {
target: "eu3ltb71",
label: "Label"
})(process.env.NODE_ENV === "production" ? {
name: "1cboe98",
styles: "display:block;margin-bottom:0.5rem;font-size:0.9rem;color:var(--ha-S50-contrast)"
} : {
name: "1cboe98",
styles: "display:block;margin-bottom:0.5rem;font-size:0.9rem;color:var(--ha-S50-contrast)",
toString: _o
}), Ti = /* @__PURE__ */ _("span", process.env.NODE_ENV === "production" ? {
target: "eu3ltb70"
} : {
target: "eu3ltb70",
label: "Description"
})(process.env.NODE_ENV === "production" ? {
name: "imenuv",
styles: "display:block;font-size:0.8rem;margin-bottom:0.5rem;color:var(--ha-S500-contrast)"
} : {
name: "imenuv",
styles: "display:block;font-size:0.8rem;margin-bottom:0.5rem;color:var(--ha-S500-contrast)",
toString: _o
});
function zi({
value: e,
onChange: t,
formatTooltipValue: o,
hideTooltip: n,
label: a,
description: c,
className: s,
style: i,
tooltipSize: l = 2,
handleSize: p = 15,
min: u = 0,
max: v = 100,
step: m = 1,
debounceThrottleValue: h = 300,
debounceType: f = "debounce",
onChangeComplete: b,
cssStyles: d,
...k
}) {
const [y, N] = Q(e ?? 0), [E, g] = Q(!1), S = Y(null), O = Y(null), V = Y(null);
G(() => {
typeof e == "number" && N(e);
}, [e]), G(() => {
if (!S.current || n) return;
const I = parseFloat(`${u ?? 0}`), P = parseFloat(`${v ?? 100}`), w = parseFloat(`${m ?? 1}`), C = parseFloat(S.current.valueAsNumber.toFixed(w < 1 ? Math.abs(Math.log10(w)) : 0)), A = (S.current.valueAsNumber - I) / (P - I) * 100;
if (V.current) {
V.current.style.left = `${A}%`;
const D = typeof o == "function" ? o(C) : C;
V.current.setAttribute("data-title", `${D}`);
}
}, [y, u, v, m, o, n]);
const z = (f === "debounce" ? Ft : Yr)((I) => {
typeof b == "function" && b(I.target.valueAsNumber, I), g(!1);
}, h, {
leading: !0,
trailing: !0
});
return /* @__PURE__ */ x(Di, { className: `${s ?? ""} ${E ? "active" : ""} range-slider`, style: {
position: "relative",
...i ?? {}
}, css: /* @__PURE__ */ Se(d ?? "", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:InternalRangeSlider;")), children: [
a && /* @__PURE__ */ r(Ai, { className: "label", children: a }),
c && /* @__PURE__ */ r(Ti, { className: "description", children: c }),
/* @__PURE__ */ x(Ri, { ref: O, handleSize: p, className: `range-slider-inner ${E ? "active" : ""}`, children: [
/* @__PURE__ */ r("input", { ...k, min: u, max: v, step: m, ref: S, type: "range", className: "range-slider-range", value: y, onInput: (I) => {
N(I.target.valueAsNumber), E || g(!0);
}, onChange: (I) => {
typeof t == "function" && t(I.target.valueAsNumber, I), z(I);
} }),
!n && /* @__PURE__ */ r("div", { className: "tooltip-holder", style: {
position: "absolute",
top: 0,
left: p / 2,
right: p / 2
}, children: /* @__PURE__ */ r(Ii, { size: l, ref: V }) })
] })
] });
}
function mt(e) {
return /* @__PURE__ */ r(se, { ...ce({
prefix: "RangeSlider"
}), children: /* @__PURE__ */ r(zi, { ...e }) });
}
function Vi() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
const $i = {
position: "relative",
display: "inline-flex",
overflow: "hidden"
}, Mi = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "ekpqrw61"
} : {
target: "ekpqrw61",
label: "StyledRipple"
})(process.env.NODE_ENV === "production" ? {
name: "zomlrg",
styles: "position:absolute;border-radius:50%;opacity:0;width:35px;height:35px;transform:translate(-50%, -50%);pointer-events:none;flex-shrink:0"
} : {
name: "zomlrg",
styles: "position:absolute;border-radius:50%;opacity:0;width:35px;height:35px;transform:translate(-50%, -50%);pointer-events:none;flex-shrink:0",
toString: Vi
}), Pi = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "ekpqrw60"
} : {
target: "ekpqrw60",
label: "ParentRipple"
})((e) => e.borderRadius && `
border-radius: ${e.borderRadius};
overflow: hidden;
display: inline-flex;
`, ";"), Co = Mt(({
duration: e = 600,
color: t = "rgba(0, 0, 0, .3)",
borderRadius: o = "none",
onClick: n,
children: a,
disabled: c,
preventPropagation: s = !1,
style: i,
className: l,
cssStyles: p,
id: u,
...v
}) => {
const m = Y(null), h = Y(null), b = le((k) => k.windowContext) ?? window;
G(() => () => {
h.current && clearTimeout(h.current);
}, []);
const d = M((k) => {
if (k.stopPropagation(), c) return;
h.current !== null && clearTimeout(h.current);
const {
pageX: y,
pageY: N,
currentTarget: E
} = k, g = E.getBoundingClientRect();
let S = 1;
typeof b < "u" && (S = b.scrollX);
let O = 1;
typeof b < "u" && (O = b.scrollY);
const V = y - (g.left + S), R = N - (g.top + O), z = Math.max(g.width, g.height);
if (m.current) {
const I = {
left: isNaN(V) ? "0px" : `${V}px`,
top: isNaN(R) ? "0px" : `${R}px`,
opacity: 1,
transform: "translate(-50%, -50%)",
transition: "initial",
backgroundColor: t
};
Object.assign(m.current.style, I);
}
h.current = setTimeout(() => {
if (m.current) {
const I = {
opacity: 0,
transform: `scale(${z / 9})`,
transition: `all ${e}ms`
};
Object.assign(m.current.style, I);
}
h.current = null;
}, 50), typeof n == "function" && n(k);
}, [t, e, c, n, b]);
return /* @__PURE__ */ r(Pi, { borderRadius: o, id: u ?? "", className: `ripple-parent ${l ?? ""}`, css: /* @__PURE__ */ Se(p ?? "", ";"), style: {
...i ?? {}
}, children: /* @__PURE__ */ x("div", { className: "ripple-inner", onPointerDownCapture: (k) => {
s && k.stopPropagation();
}, ...v, style: {
width: "100%",
...$i,
borderRadius: o
}, onClick: d, children: [
a,
/* @__PURE__ */ r(Mi, { ref: m })
] }) });
});
Co.displayName = "_Ripples";
function ji(e) {
return /* @__PURE__ */ r(se, { ...ce({
prefix: "Ripples"
}), children: /* @__PURE__ */ r(Co, { ...e }) });
}
function mr() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
const Bi = /* @__PURE__ */ _(_e, process.env.NODE_ENV === "production" ? {
target: "e17tod368"
} : {
target: "e17tod368",
label: "StyledTriggerCard"
})(), Fi = /* @__PURE__ */ _("span", process.env.NODE_ENV === "production" ? {
target: "e17tod367"
} : {
target: "e17tod367",
label: "ToggleMessage"
})("font-size:0.6rem;display:flex;align-items:center;justify-content:flex-end;height:100%;padding:0 0.4rem 0 0.8rem;transition:var(--ha-transition-duration) var(--ha-easing);transition-property:justify-content,color;justify-content:", (e) => e.active ? "flex-start" : "flex-end", ";color:", (e) => e.active ? "var(--ha-300-contrast)" : "var(--ha-300)", ";", (e) => e.hideArrow && "padding-right: 0.8rem;", ";"), Li = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e17tod366"
} : {
target: "e17tod366",
label: "ToggleState"
})("background-color:var(--ha-S200);border-radius:100%;width:1.9rem;height:1.9rem;position:absolute;top:5px;left:0px;display:flex;align-items:center;justify-content:center;transition:var(--ha-transition-duration) var(--ha-easing);transition-property:left,transform;left:", (e) => e.active ? "100%" : "0px", ";transform:", (e) => e.active ? "translate3d(calc(-100% - 5px), 0, 0)" : "translate3d(calc(0% + 5px), 0, 0)", ";svg{color:", (e) => e.active ? "var(--ha-A400)" : "var(--ha-200)", ";font-size:40px;}"), Wi = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e17tod365"
} : {
target: "e17tod365",
label: "Gap"
})(process.env.NODE_ENV === "production" ? {
name: "rhxkjj",
styles: "height:20px"
} : {
name: "rhxkjj",
styles: "height:20px",
toString: mr
}), Hi = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e17tod364"
} : {
target: "e17tod364",
label: "Toggle"
})("position:relative;background-color:", (e) => e.active ? "var(--ha-300)" : "var(--ha-S200)", ";border-radius:3rem;width:10rem;height:2.5rem;flex-grow:0;flex-shrink:0;transition:background-color var(--ha-transition-duration) var(--ha-easing);margin-left:1.5rem;overflow:hidden;"), qi = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e17tod363"
} : {
target: "e17tod363",
label: "Contents"
})(process.env.NODE_ENV === "production" ? {
name: "dpr5ta",
styles: "padding:1rem;height:100%;display:flex;flex-direction:column;justify-content:center"
} : {
name: "dpr5ta",
styles: "padding:1rem;height:100%;display:flex;flex-direction:column;justify-content:center",
toString: mr
}), Dn = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e17tod362"
} : {
target: "e17tod362",
label: "LayoutBetween"
})(process.env.NODE_ENV === "production" ? {
name: "fycgd8",
styles: "display:flex;align-items:center;justify-content:space-between;flex-direction:row"
} : {
name: "fycgd8",
styles: "display:flex;align-items:center;justify-content:space-between;flex-direction:row",
toString: mr
}), Ui = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e17tod361"
} : {
target: "e17tod361",
label: "Description"
})(process.env.NODE_ENV === "production" ? {
name: "bme980",
styles: "color:var(--ha-S500-contrast);font-size:0.7rem;text-align:left"
} : {
name: "bme980",
styles: "color:var(--ha-S500-contrast);font-size:0.7rem;text-align:left",
toString: mr
}), Yi = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e17tod360"
} : {
target: "e17tod360",
label: "Title"
})("color:var(--ha-S300-contrast);font-size:0.9rem;font-weight:bold;", (e) => e.disabled && "color: var(--ha-S50-contrast);", " text-align:left;span{display:block;width:100%;color:var(--ha-S50-contrast);margin-top:0.3rem;line-height:1rem;font-size:0.7rem;}");
function Gi({
entity: e,
title: t,
description: o,
onClick: n,
disabled: a,
icon: c,
iconProps: s,
sliderIconProps: i,
sliderIcon: l,
sliderTextActive: p,
sliderTextInactive: u,
activeStateDuration: v = 5e3,
hideArrow: m = !1,
className: h,
service: f,
serviceData: b,
key: d,
cssStyles: k,
...y
}) {
const N = le((T) => T.globalComponentStyles), E = et(e), g = pe(e), S = jt(e, s), O = Pt(E, s), V = Y(null), [R, z] = Q(!1), I = $e(c ?? null, s), P = $e(l ?? null, i), w = $e("mdi:power", s), C = $e("mingcute:arrows-right-line", {
...s,
style: {
fontSize: "16px",
...s?.style
}
}), A = Ee(g.state), D = a || A, $ = M((T) => {
z(!0), typeof n == "function" && !A && n(g, T), V.current && clearTimeout(V.current), V.current = setTimeout(() => {
z(!1);
}, v);
}, [g, n, v, A]);
return /* @__PURE__ */ r(
Bi,
{
as: "button",
className: `${h ?? ""} trigger-card`,
disabled: D,
entity: e,
service: f,
serviceData: b,
onClick: $,
cssStyles: `
${N?.triggerCard ?? ""}
${k ?? ""}
`,
...y,
children: /* @__PURE__ */ x(qi, { children: [
/* @__PURE__ */ x(Dn, { className: "layout-between", children: [
/* @__PURE__ */ x(Yi, { disabled: D, className: "description", children: [
t || g.attributes.friendly_name || e,
o && /* @__PURE__ */ r("span", { children: o })
] }),
I ?? S ?? O
] }),
/* @__PURE__ */ r(Wi, { className: "gap" }),
/* @__PURE__ */ x(Dn, { className: "layout-between", children: [
/* @__PURE__ */ x(Ui, { className: "title", children: [
g.custom.relativeTime,
D ? ` - ${g.state}` : ""
] }),
/* @__PURE__ */ r(Hi, { active: D ? !1 : R, className: "toggle", children: D ? null : /* @__PURE__ */ x(ie, { children: [
/* @__PURE__ */ r(Li, { active: R, className: "toggle-state", children: P ?? w }),
/* @__PURE__ */ x(Fi, { hideArrow: m, active: R, className: "toggle-message", children: [
R ? p ?? j("triggered_name", {
search: " {name}",
replace: ""
}) : u ?? `${j("run")} ${Hr(e, g?.attributes?.device_class)}`,
" ",
!R && !m && C
] })
] }) })
] })
] })
},
d
);
}
function ff(e) {
const t = {
xxs: 12,
xs: 6,
sm: 6,
md: 4,
lg: 4,
xlg: 3
};
return /* @__PURE__ */ r(se, { ...ce({
prefix: "TriggerCard"
}), children: /* @__PURE__ */ r(Gi, { ...t, ...e }) });
}
function Oo() {
return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
}
const Qi = /* @__PURE__ */ _(_e, process.env.NODE_ENV === "production" ? {
target: "e16eobz13"
} : {
target: "e16eobz13",
label: "StyledGroup"
})("background-color:var(--ha-S200);color:var(--ha-S200-contrast);padding:", ({
collapsed: e
}) => e ? "0 2rem" : "0 2rem 2rem", ";transition:var(--ha-transition-duration) var(--ha-easing);transition-property:height,padding,background-color;&.expanded{height:calc-size(auto);}width:100%;>div.contents>.header-title{cursor:pointer;padding:", ({
collapsed: e
}) => e ? "1.5rem 0" : "2rem 0", ";>h3{color:var(--ha-S100-contrast);margin:0;display:flex;align-items:center;transition:padding var(--ha-transition-duration) var(--ha-easing);", ({
collapsible: e,
collapsed: t
}) => e && `&:before {
content: "${t ? "+" : "-"}";
display: inline-block;
color: var(--ha-A400);
width: 1rem;
}`, ";}}", ({
collapsed: e
}) => `
${Ce(["xxs", "xs"], `
padding: ${e ? "1rem 0rem" : "1.5rem 1rem 1rem"};
`)}
`, ";"), Xi = /* @__PURE__ */ _("span", process.env.NODE_ENV === "production" ? {
target: "e16eobz12"
} : {
target: "e16eobz12",
label: "Description"
})(process.env.NODE_ENV === "production" ? {
name: "qzd1ts",
styles: "color:var(--ha-S300-contrast);font-size:0.9rem;margin:0.5rem 0 0;width:100%;display:block;padding-left:1rem"
} : {
name: "qzd1ts",
styles: "color:var(--ha-S300-contrast);font-size:0.9rem;margin:0.5rem 0 0;width:100%;display:block;padding-left:1rem",
toString: Oo
}), Ki = /* @__PURE__ */ _("div", process.env.NODE_ENV === "production" ? {
target: "e16eobz11"
} : {
target: "e16eobz11",
label: "Header"
})(process.env.NODE_ENV === "production" ? {
name: "dslko4",
styles: "transition:padding var(--ha-transition-duration) var(--ha-easing)"
} : {
name: "dslko4",
styles: "transition:padding var(--ha-transition-duration) var(--ha-easing)",
toString: Oo
}), Ji = /* @__PURE__ */ _("h3", process.env.NODE_ENV === "production" ? {
target: "e16eobz10"
} : {
target: "e16eobz10",
label: "Title"
})();
function