@hakit/components
Version:
A series of components to work with @hakit/core
1,218 lines (1,204 loc) • 375 kB
JavaScript
import { j as t, a as x, F as re } from "./emotion-react-jsx-runtime.browser.esm-Tq_btErF.js";
import { c as k } from "./emotion-styled-base.browser.esm-Dyg8Y4aq.js";
import * as K from "react";
import { useMemo as Z, useState as Q, useEffect as q, memo as jt, useId as dr, useRef as H, useCallback as M, Children as Ie, isValidElement as Ve, cloneElement as Ue, lazy as ro, Suspense as Tr, Fragment as ra, useLayoutEffect as no } from "react";
import { getBreakpoints as na, allBreakpoints as Jt, mq as Oe, getColumnSizeCSS as ft, generateColumnBreakpoints as oa } from "./es/ThemeProvider/breakpoints.js";
import { useHass as he, computeDomain as tt, useEntity as ue, isUnavailableState as Ee, localize as F, useIcon as je, useIconByDomain as Bt, useIconByEntity as Ft, computeDomainTitle as Wr, ON as Ze, OFF as Fe, useWeather as aa, getIconByEntity as hn, getSupportedForecastTypes as sa, supportsFeatureFromAttributes as ye, UNAVAILABLE as Pe, toReadableString as He, stateActive as zr, isOffState as ia, useLightBrightness as ca, lightSupportsColorMode as at, LIGHT_COLOR_MODES as st, lightSupportsColor as oo, lightSupportsBrightness as la, useService as Lt, computeStateDisplay as da, getColorByIndex as ua, useCamera as ao, STREAM_TYPE_HLS as so, STREAM_TYPE_WEB_RTC as io, useLogs as pa, useDevice as co, createHistoricState as fn, localizeStateMessage as mn, localizeTriggerSource as ha, timeAgo as fa, batteryIconByLevel as ma, useLightTemperature as ga, temperature2rgb as lo, rgb2hex as Vt, rgb2hs as va, useLightColor as ba, hsv2rgb as Vr, hex2rgb as Cr, hs2rgb as ya, rgbw2rgb as xa, rgbww2rgb as wa } from "@hakit/core";
import { TextField as Na } from "./es/Shared/Form/TextField.js";
import { css as ke, createElement as Hr, Global as qr, keyframes as uo, CacheProvider as Ea } from "@emotion/react";
import { useLongPress as po } from "use-long-press";
import { startCase as ho, lowerCase as fo, capitalize as xt, clamp as dt, snakeCase as yt, flatten as Sa, groupBy as ka, isNumber as Dr, isEqual as _a, merge as Ca } from "lodash";
import { ErrorBoundary as ne } from "react-error-boundary";
import * as Da from "react-dom";
import { createPortal as ur } from "react-dom";
import "@emotion/serialize";
import "@emotion/utils";
import "@emotion/is-prop-valid";
import { filterSupportedAlarmStates as Oa, DEFAULT_STATES as Ra, _getActionColor as Ia, ALARM_MODE_STATE_MAP as gn, ALARM_MODES as Aa, _getActionLabel as vn } from "./es/Shared/Entity/Alarm/AlarmControls/shared.js";
import { useDebouncedCallback as Wt, useThrottledCallback as Yr } from "use-debounce";
import { SvgGraph as Ta } from "./es/Shared/SvgGraph/index.js";
import { Row as J } from "./es/Shared/Row/index.js";
import { Column as te } from "./es/Shared/Column/index.js";
import { Icon as we } from "@iconify/react";
import { getAdditionalWeatherInformation as za } from "./es/Cards/WeatherCard/helpers.js";
import { UNIT_F as pr, ClimateEntityFeature as it, CLIMATE_HVAC_ACTION_TO_MODE as Va, compareClimateHvacModes as $a, computeHvacModeIcon as bn, computePresetModeIcon as yn, computeFanModeIcon as xn, computeSwingModeIcon as wn } from "./es/Shared/Entity/Climate/ClimateControls/data.js";
import { colors as Te, icons as Nn, activeColors as Ma } from "./es/Shared/Entity/Climate/ClimateControls/shared.js";
import { BigNumber as mo } from "./es/Shared/Entity/Climate/ClimateControls/BigNumber.js";
import { useGesture as Ht } from "@use-gesture/react";
import Pa from "@fullcalendar/react";
import ja from "@fullcalendar/daygrid";
import Ba from "@fullcalendar/interaction";
import Fa from "@fullcalendar/list";
import { useResizeDetector as Ur } from "react-resize-detector";
import La from "autolinker";
import { VideoPlayer as go } from "./es/Cards/CameraCard/players/index.js";
import { svgArc as En } from "./es/Shared/ControlSliderCircular/svg-arc.js";
import { PreloadImage as Gr } from "./es/Shared/PreloadImage/index.js";
import { Alert as rt } from "./es/Shared/Alert/index.js";
import { theme as Wa } from "./es/ThemeProvider/theme.js";
import { convertToCssVars as Ha } from "./es/ThemeProvider/helpers.js";
import { DEFAULT_THEME_OPTIONS as Sn, LIGHT as hr, DARK as Qr, ACCENT as vo, DIFF as St, DEFAULT_START_LIGHT as Xr, DEFAULT_START_DARK as Kr } from "./es/ThemeProvider/constants.js";
import { useThemeStore as ct } from "./es/ThemeProvider/store.js";
import qa from "@emotion/cache";
import { jsxs as Ya, jsx as Zt } from "react/jsx-runtime";
import { useKeyPress as bo, useDebounce as Ua } from "react-use";
import { getToolbarActions as yo } from "./es/Shared/Entity/Vacuum/VacuumControls/shared.js";
import { VacuumImage as xo } from "./es/Shared/Entity/Vacuum/VacuumControls/VacuumImage.js";
import { DEFAULT_FAB_SIZE as wt } from "./es/Cards/MediaPlayerCard/constants.js";
import { Marquee as Ga } from "./es/Cards/MediaPlayerCard/Marquee.js";
import { Thumbnail as Qa } from "./es/Cards/MediaPlayerCard/Thumbnail.js";
import { Clock as Xa } from "./es/Cards/MediaPlayerCard/Clock.js";
import { ProgressBar as Ka } from "./es/Cards/MediaPlayerCard/ProgressBar.js";
import $r, { DivIcon as Ja } from "leaflet";
import { MapContainer as Za, Marker as es, TileLayer as ts } from "react-leaflet";
import { daySuffix as rs, createDateFormatter as ns } from "./es/Cards/TimeCard/formatter.js";
import { Time as Or, AmOrPm as os } from "./es/Cards/TimeCard/shared.js";
import { AutoHeight as as } from "./es/Shared/AutoHeight/index.js";
import { isValidProp as kn } from "./es/utils/isValidProp.js";
import { SVG_WIDTH as ss, SVG_HEIGHT as is } from "./es/Shared/SvgGraph/constants.js";
function qt() {
const {
useStore: e
} = he(), r = ct((s) => s.breakpoints), n = e((s) => s.windowContext) ?? window, a = Z(() => na(r), [r]), [i, c] = Q(() => Object.fromEntries(Jt.map((s) => [s, !1])));
return q(() => {
const s = n || window, l = /* @__PURE__ */ new Map(), h = () => {
const p = Object.fromEntries(Jt.map((m) => [m, !1]));
for (const m of Jt)
if (typeof a[m] == "string" && l.get(m)?.matches) {
p[m] = !0;
break;
}
c(p);
};
for (const p of Jt) {
const m = a[p];
if (typeof m == "string") {
const v = s.matchMedia(m);
if (!v) continue;
l.set(p, v), v.addEventListener("change", h);
}
}
return h(), () => {
for (const p of l.values())
p && p.removeEventListener("change", h);
};
}, [a, n]), i;
}
var cs = function(r) {
var o = /* @__PURE__ */ new WeakMap();
return function(n) {
if (o.has(n))
return o.get(n);
var a = r(n);
return o.set(n, a), a;
};
};
function wo() {
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 ls = (e, r) => r ? /* @__PURE__ */ k(e, process.env.NODE_ENV === "production" ? {
target: "e1xe7ch93"
} : {
target: "e1xe7ch93",
label: "getBaseElement"
})() : /* @__PURE__ */ k(e, process.env.NODE_ENV === "production" ? {
shouldForwardProp: (o) => kn(o),
target: "e1xe7ch92"
} : {
shouldForwardProp: (o) => kn(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;}&: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);
}
}
`, ";"), ds = /* @__PURE__ */ k((e) => /* @__PURE__ */ t(Vs, { ...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: wo
}), _n = /* @__PURE__ */ k("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: wo
}), Cn = {
xxs: 12,
xs: 6,
sm: 6,
md: 4,
lg: 4,
xlg: 3
}, us = function({
as: r = "div",
entity: o,
title: n,
active: a,
service: i,
serviceData: c,
children: s,
disabled: l,
longPressCallback: h,
onClick: p,
modalProps: m,
disableRipples: v = !1,
disableScale: u = !1,
disableActiveState: f = !1,
onlyFunctionality: y = !1,
id: d,
className: S,
cssStyles: E,
style: g,
borderRadius: R = "16px",
rippleProps: b,
disableColumns: _,
ref: N,
key: T,
relatedEntities: P,
features: I,
featureBarProps: O,
graph: A,
resizeDetectorProps: V,
triggerClass: w,
...D
}) {
const z = dr(), {
useStore: $
} = he(), C = $((ce) => ce.globalComponentStyles), [j, W] = Q(!1), U = o ? tt(o) : null, L = ue(o ?? "unknown", {
returnNullIfNotFound: !0
}), ie = H(null), {
width: X = 0
} = Ur({
refreshMode: "debounce",
refreshRate: 50,
handleHeight: !1,
skipOnMount: !1,
targetRef: N ?? ie,
...V ?? {}
}), ae = ue(A?.entity ?? "unknown", {
returnNullIfNotFound: !0,
historyOptions: {
disable: !1,
...A?.historyOptions
}
}), ge = Z(() => typeof L?.state == "string" ? Ee(L.state) : !1, [L?.state]), G = R, B = Z(() => ls(r, y), [r, y]), Y = po((ce) => {
typeof h == "function" && h(L !== null ? L : null, ce), typeof o == "string" && !j && W(!0);
}, {
threshold: 300,
cancelOnMovement: !0,
cancelOutsideElement: !0,
filterEvents(ce) {
return !("button" in ce && ce.button === 2);
}
}), ee = M((ce) => {
if (!l) {
if (typeof i == "string" && L && !ge) {
const De = L.service[i];
De(c);
}
typeof p == "function" && p(L !== null ? L : null, ce);
}
}, [i, l, L, c, p, ge]), le = Z(() => n || L?.attributes?.friendly_name || (U !== null ? ho(fo(U)) : null), [n, L, U]), se = Z(() => {
const ce = Object.entries(Cn).reduce((De, [et, _r]) => {
const de = D[et];
return {
...De,
[et]: de ?? _r
};
}, Cn);
return Object.entries(ce).map(([De, et]) => `${De}-${et}`).join(" ");
}, [D.xxs, D.xs, D.sm, D.md, D.lg, D.xlg]), me = Ie.toArray(P).filter((ce) => Ve(ce)), pe = Ie.toArray(I).filter((ce) => Ve(ce)), fe = Ie.map(pe, (ce, De) => Ve(ce) ? Ue(ce, {
key: ce.key || `${z}${De}`,
...ce.props
}) : ce), be = pe.length > 0, Ae = be && /* @__PURE__ */ t(nt, { layoutType: "bubble", className: "features", fullWidth: !0, gap: "0.5rem", ...O, children: fe });
function Ce(ce) {
const De = ss / is;
return `calc(${ce / De}px - ${A?.adjustGraphSpaceBy ?? "0px"});`;
}
const xe = Ce(X), Re = Z(() => ["card-base", S ?? "", _ ? "" : se, u ? "disable-scale-effect" : "", a ? "active" : "", ge ? "unavailable" : "", l || ge ? "disabled" : "", be ? "has-features" : "", ae ? "has-graph" : ""].filter((ce) => !!ce).join(" "), [a, S, se, u, _, l, ae, be, ge]);
return /* @__PURE__ */ x(re, { children: [
/* @__PURE__ */ x(B, { ref: N ?? ie, id: d ?? "", className: Re, css: /* @__PURE__ */ ke("padding-bottom:", ae ? xe : "inherit", ";", C.cardBase ?? "", " ", E ?? "", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:CardBase;")), style: {
...g ?? {},
borderRadius: G
}, disableActiveState: f, disabled: ge || l, ...Y(), ...D, children: [
ae && /* @__PURE__ */ t("div", { className: "graph-element history", children: ae.history.loading ? /* @__PURE__ */ t(rt, { className: "loading", description: F("loading") }) : ae.history.coordinates.length > 0 ? /* @__PURE__ */ t(Ta, { coordinates: ae.history.coordinates, ...A?.props }) : /* @__PURE__ */ t(rt, { className: "no-state-history", description: F("no_state_history_found") }) }),
v ? /* @__PURE__ */ x(_n, { className: `contents trigger-element ${w}`, onClick: ee, children: [
s,
Ae
] }) : /* @__PURE__ */ Hr(ds, { ...b, key: b?.key, borderRadius: G, disabled: l || ge }, /* @__PURE__ */ x(_n, { className: `contents trigger-element ${w}`, onClick: ee, children: [
s,
Ae
] })),
Ie.map(me, (ce, De) => Ve(ce) ? Ue(ce, {
key: ce.key || `${z}${De}`,
...ce.props
}) : ce)
] }, T),
typeof o == "string" && /* @__PURE__ */ t(Mo, { ...m, entity: o, title: m?.title ?? le ?? F("unknown"), onClose: () => {
W(!1), m?.onClose && m.onClose();
}, open: m?.open || j, id: z })
] });
}, _e = jt(function(r) {
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "CardBase"
}), children: /* @__PURE__ */ t(us, { ...r }) });
}), ps = /* @__PURE__ */ k("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 hs({
entity: e,
icon: r,
iconProps: o,
render: n,
position: a,
onClick: i,
disabled: c,
service: s,
serviceData: l,
...h
}) {
const p = ue(e), m = je(r ?? null, o), v = tt(e), u = Bt(v === null ? "unknown" : v, o), f = Ft(e || "unknown", o), y = m ?? f ?? u, d = Z(() => typeof p?.state == "string" ? Ee(p.state) : !1, [p?.state]), S = M((E) => {
if (!c) {
if (typeof s == "string" && p && !d) {
const g = p.service[s];
g(l);
}
typeof i == "function" && i(p !== null ? p : null, E);
}
}, [s, c, p, l, i, d]);
return /* @__PURE__ */ t(ps, { position: a, onClick: S, ...h, children: n ? n(p, y) : /* @__PURE__ */ t(re, { children: y }) });
}
const oh = jt(function(r) {
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "RelatedEntity"
}), children: /* @__PURE__ */ t(hs, { ...r }) });
});
function fs({
children: e,
active: r,
...o
}) {
return /* @__PURE__ */ t(
ze,
{
as: "div",
rippleProps: {
preventPropagation: !0
},
active: r,
cssStyles: `
&.button-bar-button {
.contents {
> div {
padding: 0.6rem;
}
}
}
`,
...o,
children: e
}
);
}
const gt = function(r) {
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "FeatureEntity"
}), children: /* @__PURE__ */ t(fs, { ...r }) });
}, ms = /* @__PURE__ */ k("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 gs({
placement: e = "top",
title: r = null,
children: o,
ref: n,
...a
}) {
const i = H(null), c = H(null), {
useStore: s
} = he(), l = s((d) => d.portalRoot), p = s((d) => d.windowContext) ?? window, [m, v] = Q(!1), u = M((d) => {
const S = c.current?.getBoundingClientRect();
if (typeof S > "u") return;
let E = 0, g = 0;
switch (e) {
case "top":
E = S.top, g = S.left + S.width / 2;
break;
case "right":
E = S.top + S.height / 2, g = S.right;
break;
case "bottom":
E = S.bottom, g = S.left + S.width / 2;
break;
case "left":
E = S.top + S.height / 2, g = S.left;
break;
}
d.style.top = `${E}px`, d.style.left = `${g}px`, setTimeout(() => {
d.style.opacity = "1", d.style.visibility = "visible";
}, 0);
}, [e]), f = M(() => {
v(!0);
}, []), y = M(() => {
const d = i.current;
d && (d.style.opacity = "0", d.style.visibility = "hidden", d.setAttribute("aria-hidden", "true"), setTimeout(() => {
v(!1);
}, 250));
}, []);
return r === null || r === "" ? o : /* @__PURE__ */ x("div", { ref: c, onBlur: y, onTouchEnd: y, onTouchStart: f, onMouseUp: y, onMouseEnter: f, onMouseLeave: y, ...a, children: [
Ie.map(o, (d, S) => Ve(d) ? Ue(d, {
...d.props,
onClick(E, g) {
d.props.onClick?.(E, g), a?.onClick?.(g);
},
ref: n,
key: d.key ?? S
}) : d),
typeof document < "u" && ur(m && /* @__PURE__ */ t(ms, { className: "tooltip-inner", placement: e, ref: (d) => {
d && (i.current = d, u(d));
}, "aria-hidden": "false", children: r }), l ?? p.document.body)
] });
}
function Ne(e) {
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "Tooltip"
}), children: /* @__PURE__ */ t(gs, { ...e }) });
}
const oe = ({
prefix: e
}) => ({
fallbackRender({
error: r,
resetErrorBoundary: o
}) {
return /* @__PURE__ */ t(rt, { className: "error-boundary-alert", title: `${e ? `${e} - ` : ""}${F("unknown_error")}`, description: r.message, type: "error", onClick: () => o() });
}
});
function Dt() {
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 vs = /* @__PURE__ */ k(_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: Dt
}), bs = /* @__PURE__ */ k("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: Dt
}), ys = /* @__PURE__ */ k("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)", ";"), xs = /* @__PURE__ */ k("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;"), ws = /* @__PURE__ */ k("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;}"), Ns = /* @__PURE__ */ k("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: Dt
}), Es = /* @__PURE__ */ k("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: Dt
}), Dn = /* @__PURE__ */ k("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: Dt
}), er = /* @__PURE__ */ k("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: Dt
});
function Ss({
entity: e,
service: r,
serviceData: o,
iconProps: n,
icon: a,
fabProps: i,
active: c,
onClick: s,
description: l,
title: h,
layoutType: p,
disabled: m = !1,
className: v,
hideIcon: u = !1,
hideState: f = !1,
hideLastUpdated: y = !1,
children: d,
hideDetails: S = !1,
cssStyles: E,
key: g,
hideToggle: R = !1,
unitOfMeasurement: b,
customRenderState: _,
...N
}) {
const {
useStore: T
} = he(), P = T((X) => X.globalComponentStyles), I = e ? tt(e) : null, O = ue(e || "unknown", {
returnNullIfNotFound: !0
}), A = typeof a < "u" && typeof a != "string" ? a : null, V = Bt(I === null ? "unknown" : I, {
...n ?? {}
}), w = Ft(e || "unknown", {
...n ?? {}
}), D = p === "default" || p === void 0, z = p === "slim" || p === "slim-vertical", $ = typeof O?.state == "string" ? Ee(O.state) : !1, C = O ? O.state !== "off" && !$ && !m : c || !1, j = je(typeof a == "string" ? a : null, {
...n ?? {}
}), W = Z(() => h === null ? null : h || O?.attributes.friendly_name || O?.entity_id || null, [h, O]), U = Z(() => l || (I !== null && e ? Wr(e, O?.attributes?.device_class) : null), [l, I, O, e]);
function L() {
return f ? null : _ && O ? _(O) : typeof c == "boolean" ? c ? `${F(Ze)}` : `${F(Fe)}` : $ ? F("unavailable") : O && O.state === Ze && I === "light" ? `${O.custom.brightnessValue}%` : O ? O.attributes.unit_of_measurement ? `${F(O.state)}${b ?? O.attributes.unit_of_measurement}` : `${F(O.state)}` : null;
}
const ie = Ie.toArray(N?.features).filter((X) => Ve(X)).length > 0;
return /* @__PURE__ */ t(
vs,
{
as: "button",
service: r,
serviceData: o,
active: c,
entity: e,
title: W ?? void 0,
disabled: m || $,
onClick: s,
className: `${v ?? ""} ${p ?? "default"} button-card`,
triggerClass: "button-card-trigger",
cssStyles: `
${P.buttonCard ?? ""}
${E ?? ""}
`,
...N,
children: /* @__PURE__ */ x(bs, { className: `contents ${ie ? "has-features" : ""}`, children: [
/* @__PURE__ */ x(Ns, { className: `layout-between ${p === "slim-vertical" ? "vertical" : ""}`, children: [
!u && /* @__PURE__ */ t(ws, { brightness: C && O?.custom.brightness || "brightness(100%)", ...i, className: `fab-card-inner icon ${i?.className} ${i?.style ? "custom" : ""}`, style: {
...i?.style,
backgroundColor: i?.style?.backgroundColor ?? (C ? I === "light" ? O?.custom?.rgbaColor ?? "var(--ha-A400)" : "var(--ha-A400)" : "var(--ha-S400)"),
color: i?.style?.color ?? (O ? C ? O.custom.rgbColor : "var(--ha-S500-contrast)" : C ? "var(--ha-A400)" : "var(--ha-S500-contrast)")
}, children: A ?? j ?? w ?? V }),
D && !R && /* @__PURE__ */ t(xs, { active: C, className: "toggle", children: !$ && /* @__PURE__ */ t(ys, { active: C, className: "toggle-state" }) }),
z && /* @__PURE__ */ x(te, { fullWidth: !0, alignItems: p === "slim-vertical" ? "center" : "flex-start", children: [
W && /* @__PURE__ */ t(Dn, { className: "title", children: W }),
!S && U && /* @__PURE__ */ x(er, { className: `description ${p ?? ""}`, children: [
U,
" ",
f ? "" : ` - ${L()}`
] }),
O && !y && /* @__PURE__ */ x(er, { className: `description secondary ${p === "slim-vertical" ? "center" : ""}`, children: [
F("last_updated"),
": ",
O.custom.relativeTime
] })
] })
] }),
D && /* @__PURE__ */ x(Es, { className: "footer", children: [
W && /* @__PURE__ */ t(Dn, { className: "title", children: W }),
!S && U && /* @__PURE__ */ x(er, { className: "description", children: [
U,
O && !f ? ` - ${L()}` : ""
] }),
!S && O && !y && /* @__PURE__ */ x(er, { className: "description secondary", children: [
F("last_updated"),
": ",
O.custom.relativeTime
] })
] }),
d && /* @__PURE__ */ t("div", { className: "children", children: d })
] })
},
g
);
}
function No(e) {
const r = {
xxs: 12,
xs: 6,
sm: 4,
md: 3,
lg: 2,
xlg: 2
};
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "ButtonCard"
}), children: /* @__PURE__ */ t(Ss, { ...r, ...e }) });
}
function Eo() {
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 ks = /* @__PURE__ */ k("div", process.env.NODE_ENV === "production" ? {
target: "eu3ltb74"
} : {
target: "eu3ltb74",
label: "RangeSliderParent"
})(), _s = /* @__PURE__ */ k("div", process.env.NODE_ENV === "production" ? {
target: "eu3ltb73"
} : {
target: "eu3ltb73",
label: "StyledRange"
})((e) => `
min-width: 6rem;
width: 100%;
position: relative;
isolation: isolate;
${Oe(["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;
}
}
}
`, ";"), Cs = /* @__PURE__ */ k("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%;}"), Ds = /* @__PURE__ */ k("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: Eo
}), Os = /* @__PURE__ */ k("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: Eo
});
function Rs({
value: e,
onChange: r,
formatTooltipValue: o,
hideTooltip: n,
label: a,
description: i,
className: c,
style: s,
tooltipSize: l = 2,
handleSize: h = 15,
min: p = 0,
max: m = 100,
step: v = 1,
debounceThrottleValue: u = 300,
debounceType: f = "debounce",
onChangeComplete: y,
cssStyles: d,
...S
}) {
const [E, g] = Q(e ?? 0), [R, b] = Q(!1), _ = H(null), N = H(null), T = H(null);
q(() => {
typeof e == "number" && g(e);
}, [e]), q(() => {
if (!_.current || n) return;
const O = parseFloat(`${p ?? 0}`), A = parseFloat(`${m ?? 100}`), V = parseFloat(`${v ?? 1}`), w = parseFloat(_.current.valueAsNumber.toFixed(V < 1 ? Math.abs(Math.log10(V)) : 0)), D = (_.current.valueAsNumber - O) / (A - O) * 100;
if (T.current) {
T.current.style.left = `${D}%`;
const z = typeof o == "function" ? o(w) : w;
T.current.setAttribute("data-title", `${z}`);
}
}, [E, p, m, v, o, n]);
const I = (f === "debounce" ? Wt : Yr)((O) => {
typeof y == "function" && y(O.target.valueAsNumber, O), b(!1);
}, u, {
leading: !0,
trailing: !0
});
return /* @__PURE__ */ x(ks, { className: `${c ?? ""} ${R ? "active" : ""} range-slider`, style: {
position: "relative",
...s ?? {}
}, css: /* @__PURE__ */ ke(d ?? "", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:InternalRangeSlider;")), children: [
a && /* @__PURE__ */ t(Ds, { className: "label", children: a }),
i && /* @__PURE__ */ t(Os, { className: "description", children: i }),
/* @__PURE__ */ x(_s, { ref: N, handleSize: h, className: `range-slider-inner ${R ? "active" : ""}`, children: [
/* @__PURE__ */ t("input", { ...S, min: p, max: m, step: v, ref: _, type: "range", className: "range-slider-range", value: E, onInput: (O) => {
g(O.target.valueAsNumber), R || b(!0);
}, onChange: (O) => {
typeof r == "function" && r(O.target.valueAsNumber, O), I(O);
} }),
!n && /* @__PURE__ */ t("div", { className: "tooltip-holder", style: {
position: "absolute",
top: 0,
left: h / 2,
right: h / 2
}, children: /* @__PURE__ */ t(Cs, { size: l, ref: T }) })
] })
] });
}
function vt(e) {
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "RangeSlider"
}), children: /* @__PURE__ */ t(Rs, { ...e }) });
}
function Is() {
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 As = {
position: "relative",
display: "inline-flex",
overflow: "hidden"
}, Ts = /* @__PURE__ */ k("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: Is
}), zs = /* @__PURE__ */ k("div", process.env.NODE_ENV === "production" ? {
target: "ekpqrw60"
} : {
target: "ekpqrw60",
label: "ParentRipple"
})((e) => e.borderRadius && `
border-radius: ${e.borderRadius};
overflow: hidden;
display: inline-flex;
`, ";"), So = jt(({
duration: e = 600,
color: r = "rgba(0, 0, 0, .3)",
borderRadius: o = "none",
onClick: n,
children: a,
disabled: i,
preventPropagation: c = !1,
style: s,
className: l,
cssStyles: h,
id: p,
...m
}) => {
const v = H(null), u = H(null), {
useStore: f
} = he(), d = f((E) => E.windowContext) ?? window;
q(() => () => {
u.current && clearTimeout(u.current);
}, []);
const S = M((E) => {
if (E.stopPropagation(), i) return;
u.current !== null && clearTimeout(u.current);
const {
pageX: g,
pageY: R,
currentTarget: b
} = E, _ = b.getBoundingClientRect();
let N = 1;
typeof d < "u" && (N = d.scrollX);
let T = 1;
typeof d < "u" && (T = d.scrollY);
const P = g - (_.left + N), I = R - (_.top + T), O = Math.max(_.width, _.height);
if (v.current) {
const A = {
left: isNaN(P) ? "0px" : `${P}px`,
top: isNaN(I) ? "0px" : `${I}px`,
opacity: 1,
transform: "translate(-50%, -50%)",
transition: "initial",
backgroundColor: r
};
Object.assign(v.current.style, A);
}
u.current = setTimeout(() => {
if (v.current) {
const A = {
opacity: 0,
transform: `scale(${O / 9})`,
transition: `all ${e}ms`
};
Object.assign(v.current.style, A);
}
u.current = null;
}, 50), typeof n == "function" && n(E);
}, [r, e, i, n, d]);
return /* @__PURE__ */ t(zs, { borderRadius: o, id: p ?? "", className: `ripple-parent ${l ?? ""}`, css: /* @__PURE__ */ ke(h ?? "", ";"), style: {
...s ?? {}
}, children: /* @__PURE__ */ x("div", { className: "ripple-inner", onPointerDownCapture: (E) => {
c && E.stopPropagation();
}, ...m, style: {
width: "100%",
...As,
borderRadius: o
}, onClick: S, children: [
a,
/* @__PURE__ */ t(Ts, { ref: v })
] }) });
});
So.displayName = "_Ripples";
function Vs(e) {
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "Ripples"
}), children: /* @__PURE__ */ t(So, { ...e }) });
}
function fr() {
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 $s = /* @__PURE__ */ k(_e, process.env.NODE_ENV === "production" ? {
target: "e17tod368"
} : {
target: "e17tod368",
label: "StyledTriggerCard"
})(), Ms = /* @__PURE__ */ k("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;", ";"), Ps = /* @__PURE__ */ k("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;}"), js = /* @__PURE__ */ k("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: fr
}), Bs = /* @__PURE__ */ k("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;"), Fs = /* @__PURE__ */ k("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: fr
}), On = /* @__PURE__ */ k("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: fr
}), Ls = /* @__PURE__ */ k("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: fr
}), Ws = /* @__PURE__ */ k("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 Hs({
entity: e,
title: r,
description: o,
onClick: n,
disabled: a,
icon: i,
iconProps: c,
sliderIconProps: s,
sliderIcon: l,
sliderTextActive: h,
sliderTextInactive: p,
activeStateDuration: m = 5e3,
hideArrow: v = !1,
className: u,
service: f,
serviceData: y,
key: d,
cssStyles: S,
...E
}) {
const {
useStore: g
} = he(), R = g((j) => j.globalComponentStyles), b = tt(e), _ = ue(e), N = Ft(e, c), T = Bt(b, c), P = H(null), [I, O] = Q(!1), A = je(i ?? null, c), V = je(l ?? null, s), w = je("mdi:power", c), D = je("mingcute:arrows-right-line", {
...c,
style: {
fontSize: "16px",
...c?.style
}
}), z = Ee(_.state), $ = a || z, C = M((j) => {
O(!0), typeof n == "function" && !z && n(_, j), P.current && clearTimeout(P.current), P.current = setTimeout(() => {
O(!1);
}, m);
}, [_, n, m, z]);
return /* @__PURE__ */ t(
$s,
{
as: "button",
className: `${u ?? ""} trigger-card`,
disabled: $,
entity: e,
service: f,
serviceData: y,
onClick: C,
cssStyles: `
${R?.triggerCard ?? ""}
${S ?? ""}
`,
...E,
children: /* @__PURE__ */ x(Fs, { children: [
/* @__PURE__ */ x(On, { className: "layout-between", children: [
/* @__PURE__ */ x(Ws, { disabled: $, className: "description", children: [
r || _.attributes.friendly_name || e,
o && /* @__PURE__ */ t("span", { children: o })
] }),
A ?? N ?? T
] }),
/* @__PURE__ */ t(js, { className: "gap" }),
/* @__PURE__ */ x(On, { className: "layout-between", children: [
/* @__PURE__ */ x(Ls, { className: "title", children: [
_.custom.relativeTime,
$ ? ` - ${_.state}` : ""
] }),
/* @__PURE__ */ t(Bs, { active: $ ? !1 : I, className: "toggle", children: $ ? null : /* @__PURE__ */ x(re, { children: [
/* @__PURE__ */ t(Ps, { active: I, className: "toggle-state", children: V ?? w }),
/* @__PURE__ */ x(Ms, { hideArrow: v, active: I, className: "toggle-message", children: [
I ? h ?? F("triggered_name", {
search: " {name}",
replace: ""
}) : p ?? `${F("run")} ${Wr(e, _?.attributes?.device_class)}`,
" ",
!I && !v && D
] })
] }) })
] })
] })
},
d
);
}
function ah(e) {
const r = {
xxs: 12,
xs: 6,
sm: 6,
md: 4,
lg: 4,
xlg: 3
};
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "TriggerCard"
}), children: /* @__PURE__ */ t(Hs, { ...r, ...e }) });
}
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 qs = /* @__PURE__ */ k(_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: r
}) => e && `&:before {
content: "${r ? "+" : "-"}";
display: inline-block;
color: var(--ha-A400);
width: 1rem;
}`, ";}}", ({
collapsed: e
}) => `
${Oe(["xxs", "xs"], `
padding: ${e ? "1rem 0rem" : "1.5rem 1rem 1rem"};
`)}
`, ";"), Ys = /* @__PURE__ */ k("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: ko
}), Us = /* @__PURE__ */ k("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: ko
}), Gs = /* @__PURE__ */ k("h3", process.env.NODE_ENV === "production" ? {
target: "e16eobz10"
} : {
target: "e16eobz10",
label: "Title"
})();
function Qs({
title: e,
description: r,
children: o,
gap: n = "0.5rem",
justifyContent: a = "center",
alignItems: i = "center",
layout: c = "r