@hakit/components
Version:
A series of components to work with @hakit/core
1,204 lines (1,190 loc) • 382 kB
JavaScript
import { j as t, a as w, F as se } from "./emotion-react-jsx-runtime.browser.esm-BErL7L7Y.js";
import { c as C } from "./emotion-styled-base.browser.esm-Dyg8Y4aq.js";
import * as Z from "react";
import ua, { useMemo as oe, useState as ne, useEffect as K, memo as Vt, useId as dr, useRef as G, useCallback as $, Children as Re, isValidElement as Te, cloneElement as Ue, lazy as so, Suspense as Ar, Fragment as pa, useLayoutEffect as co } from "react";
import { getBreakpoints as ha, allBreakpoints as Kt, mq as De, getColumnSizeCSS as ut, generateColumnBreakpoints as fa } from "./es/ThemeProvider/breakpoints.js";
import { useHass as Q, computeDomain as tt, useEntity as pe, isUnavailableState as Ee, localize as B, useIcon as $e, useIconByDomain as $t, useIconByEntity as Mt, ON as je, OFF as We, computeDomainTitle as lo, useWeather as ma, getIconByEntity as pn, getSupportedForecastTypes as ga, supportsFeatureFromAttributes as xe, UNAVAILABLE as Ve, toReadableString as Le, stateActive as Tr, isOffState as uo, useLightBrightness as va, DOMAIN_ATTRIBUTES_UNITS as ba, lightSupportsColorMode as Je, LIGHT_COLOR_MODES as Ze, lightSupportsColor as po, lightSupportsBrightness as ya, lightSupportsFavoriteColors as xa, computeDefaultFavoriteColors as wa, getLightCurrentModeRgbColor as Na, luminosity as Ea, hs2rgb as ho, temperature2rgb as Wr, rgbw2rgb as fo, rgbww2rgb as mo, useService as Pt, getColorByIndex as _a, useCamera as go, STREAM_TYPE_WEB_RTC as vo, STREAM_TYPE_HLS as bo, useLogs as ka, useDevice as yo, createHistoricState as hn, localizeStateMessage as fn, localizeTriggerSource as Sa, timeAgo as Ca, batteryIconByLevel as Da, useLightTemperature as Oa, rgb2hex as It, rgb2hs as Ra, useLightColor as Ia, hsv2rgb as zr, hex2rgb as Cr } from "@hakit/core";
import { TextField as Aa } from "./es/Shared/Form/TextField.js";
import { createElement as Hr, css as Se, Global as qr, keyframes as xo, CacheProvider as Ta } from "@emotion/react";
import { useLongPress as wo } from "use-long-press";
import { startCase as No, lowerCase as Eo, clamp as ct, snakeCase as mt, flatten as za, groupBy as Va, capitalize as Ot, isNumber as Dr, isEqual as $a, merge as Ma } from "lodash";
import { ErrorBoundary as le } from "react-error-boundary";
import * as Pa from "react-dom";
import { createPortal as ur } from "react-dom";
import "@emotion/serialize";
import "@emotion/utils";
import "@emotion/is-prop-valid";
import { filterSupportedAlarmStates as ja, DEFAULT_STATES as Ba, _getActionColor as Fa, _getActionLabel as mn, ALARM_MODES as La, ALARM_MODE_STATE_MAP as gn } from "./es/Shared/Entity/Alarm/AlarmControls/shared.js";
import { useDebouncedCallback as jt, useThrottledCallback as Ur } from "use-debounce";
import { SvgGraph as Wa } from "./es/Shared/SvgGraph/index.js";
import { Row as ee } from "./es/Shared/Row/index.js";
import { Column as ie } from "./es/Shared/Column/index.js";
import { Icon as we } from "@iconify/react";
import { getAdditionalWeatherInformation as Ha } from "./es/Cards/WeatherCard/helpers.js";
import { UNIT_F as pr, ClimateEntityFeature as at, CLIMATE_HVAC_ACTION_TO_MODE as qa, computeHvacModeIcon as vn, compareClimateHvacModes as Ua, computePresetModeIcon as bn, computeFanModeIcon as yn, computeSwingModeIcon as xn } from "./es/Shared/Entity/Climate/ClimateControls/data.js";
import { colors as Ie, icons as wn, activeColors as Ya } from "./es/Shared/Entity/Climate/ClimateControls/shared.js";
import { BigNumber as _o } from "./es/Shared/Entity/Climate/ClimateControls/BigNumber.js";
import { useGesture as Bt } from "@use-gesture/react";
import Ga from "@fullcalendar/react";
import Xa from "@fullcalendar/daygrid";
import Qa from "@fullcalendar/interaction";
import Ka from "@fullcalendar/list";
import { useResizeDetector as Yr } from "react-resize-detector";
import Ja from "autolinker";
import { VideoPlayer as ko } from "./es/Cards/CameraCard/players/index.js";
import { svgArc as Nn } 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 Za } from "./es/ThemeProvider/theme.js";
import { convertToCssVars as ei } from "./es/ThemeProvider/helpers.js";
import { DEFAULT_THEME_OPTIONS as En, LIGHT as hr, DARK as Xr, ACCENT as So, DIFF as yt, DEFAULT_START_LIGHT as Qr, DEFAULT_START_DARK as Kr } from "./es/ThemeProvider/constants.js";
import { useThemeStore as it } from "./es/ThemeProvider/store.js";
import ti from "@emotion/cache";
import { jsxs as ri, jsx as Jt } from "react/jsx-runtime";
import { useKeyPress as Co, useDebounce as ni } from "react-use";
import { getToolbarActions as Do } from "./es/Shared/Entity/Vacuum/VacuumControls/shared.js";
import { VacuumImage as Oo } from "./es/Shared/Entity/Vacuum/VacuumControls/VacuumImage.js";
import { DEFAULT_FAB_SIZE as gt } from "./es/Cards/MediaPlayerCard/constants.js";
import { Marquee as oi } from "./es/Cards/MediaPlayerCard/Marquee.js";
import { Thumbnail as ai } from "./es/Cards/MediaPlayerCard/Thumbnail.js";
import { Clock as ii } from "./es/Cards/MediaPlayerCard/Clock.js";
import { ProgressBar as si } from "./es/Cards/MediaPlayerCard/ProgressBar.js";
import Vr, { DivIcon as ci } from "leaflet";
import { TileLayer as li, Marker as di, MapContainer as ui } from "react-leaflet";
import { createDateFormatter as pi, daySuffix as _n } from "./es/Cards/TimeCard/formatter.js";
import { Time as Zt, AmOrPm as kn } from "./es/Cards/TimeCard/shared.js";
import { AutoHeight as hi } from "./es/Shared/AutoHeight/index.js";
import { isValidProp as Sn } from "./es/utils/isValidProp.js";
import { SVG_WIDTH as fi, SVG_HEIGHT as mi } from "./es/Shared/SvgGraph/constants.js";
function Ft() {
const e = it((c) => c.breakpoints), o = Q((c) => c.windowContext) ?? window, n = oe(() => ha(e), [e]), [a, s] = ne(() => Object.fromEntries(Kt.map((c) => [c, !1])));
return K(() => {
const c = o || window, i = /* @__PURE__ */ new Map(), l = () => {
const h = Object.fromEntries(Kt.map((d) => [d, !1]));
for (const d of Kt)
if (typeof n[d] == "string" && i.get(d)?.matches) {
h[d] = !0;
break;
}
s(h);
};
for (const h of Kt) {
const d = n[h];
if (typeof d == "string") {
const g = c.matchMedia(d);
if (!g) continue;
i.set(h, g), g.addEventListener("change", l);
}
}
return l(), () => {
for (const h of i.values())
h && h.removeEventListener("change", l);
};
}, [n, o]), a;
}
var gi = 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 Ro() {
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 vi = (e, r) => r ? /* @__PURE__ */ C(e, process.env.NODE_ENV === "production" ? {
target: "e1xe7ch93"
} : {
target: "e1xe7ch93",
label: "getBaseElement"
})() : /* @__PURE__ */ C(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);
}
}
`, ";"), bi = /* @__PURE__ */ C((e) => /* @__PURE__ */ t(Wi, { ...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: Ro
}), Cn = /* @__PURE__ */ C("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: Ro
}), Dn = {
xxs: 12,
xs: 6,
sm: 6,
md: 4,
lg: 4,
xlg: 3
}, yi = function({
as: r = "div",
entity: o,
title: n,
active: a,
service: s,
serviceData: c,
children: i,
disabled: l,
longPressCallback: h,
onClick: d,
disableModal: g = !1,
modalProps: x,
disableRipples: f = !1,
disableScale: u = !1,
disableActiveState: b = !1,
onlyFunctionality: p = !1,
id: _,
className: y,
cssStyles: N,
style: k,
borderRadius: v = "16px",
rippleProps: S,
disableColumns: R,
refCallback: A,
key: D,
relatedEntities: m,
features: E,
featureBarProps: T,
graph: M,
resizeDetectorProps: j,
triggerClass: I,
...z
}) {
const V = dr(), O = Q((q) => q.globalComponentStyles), [W, P] = ne(!1), re = o ? tt(o) : null, H = pe(o ?? "unknown", {
returnNullIfNotFound: !0
}), Y = G(null), {
width: U = 0
} = Yr({
refreshMode: "debounce",
refreshRate: 50,
handleHeight: !1,
skipOnMount: !1,
targetRef: Y,
...j ?? {}
}), J = pe(M?.entity ?? "unknown", {
returnNullIfNotFound: !0,
historyOptions: {
disable: !1,
...M?.historyOptions
}
}), ae = oe(() => typeof H?.state == "string" ? Ee(H.state) : !1, [H?.state]), be = v, F = oe(() => vi(r, p), [r, p]), L = wo((q) => {
typeof h == "function" && h(H !== null ? H : null, q), typeof o == "string" && !W && !g && P(!0), Y.current?.classList.remove("card-base-active");
}, {
threshold: 300,
cancelOnMovement: !0,
cancelOutsideElement: !0,
filterEvents(q) {
return !("button" in q && q.button === 2);
}
}), X = $((q) => {
if (!l) {
if (typeof s == "string" && H && !ae) {
const ge = H.service[s];
ge(c);
}
typeof d == "function" && d(H !== null ? H : null, q);
}
}, [s, l, H, c, d, ae]), te = oe(() => n || H?.attributes?.friendly_name || (re !== null ? No(Eo(re)) : null), [n, H, re]), ce = oe(() => {
const q = Object.entries(Dn).reduce((ge, [Oe, et]) => {
const Qt = z[Oe];
return {
...ge,
[Oe]: Qt ?? et
};
}, Dn);
return Object.entries(q).map(([ge, Oe]) => `${ge}-${Oe}`).join(" ");
}, [z.xxs, z.xs, z.sm, z.md, z.lg, z.xlg]), ue = Re.toArray(m).filter((q) => Te(q)), he = Re.toArray(E).filter((q) => Te(q)), ve = Re.map(he, (q, ge) => Te(q) ? Ue(q, {
key: q.key || `${V}${ge}`,
...q.props
}) : q), me = he.length > 0, _e = me && /* @__PURE__ */ t(nt, { layoutType: "bubble", className: "features", fullWidth: !0, gap: "0.5rem", ...T, children: ve });
function Ne(q) {
const ge = fi / mi;
return `calc(${q / ge}px - ${M?.adjustGraphSpaceBy ?? "0px"});`;
}
const Pe = Ne(U), Xe = oe(() => ["card-base", y ?? "", R ? "" : ce, u ? "disable-scale-effect" : "", a ? "active" : "", ae ? "unavailable" : "", l || ae ? "disabled" : "", me ? "has-features" : "", J ? "has-graph" : ""].filter((q) => !!q).join(" "), [a, y, ce, u, R, l, J, me, ae]), Gt = () => {
Y.current?.classList.add("card-base-active");
}, Xt = () => {
Y.current?.classList.remove("card-base-active");
};
return /* @__PURE__ */ w(se, { children: [
/* @__PURE__ */ w(F, { ref: (q) => {
Y.current = q, A && A(Y);
}, id: _ ?? "", className: Xe, css: /* @__PURE__ */ Se("padding-bottom:", J ? Pe : "inherit", ";", O.cardBase ?? "", " ", N ?? "", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:CardBase;")), style: {
...k ?? {},
borderRadius: be
}, disableActiveState: b, disabled: ae || l, ...L(), ...z, children: [
J && /* @__PURE__ */ t("div", { className: "graph-element history", children: J.history.loading ? /* @__PURE__ */ t(rt, { className: "loading", description: B("loading") }) : J.history.coordinates.length > 0 ? /* @__PURE__ */ t(Wa, { coordinates: J.history.coordinates, ...M?.props }) : /* @__PURE__ */ t(rt, { className: "no-state-history", description: B("no_state_history_found") }) }),
f ? /* @__PURE__ */ w(Cn, { className: `contents trigger-element ${I}`, onClick: X, onPointerDown: Gt, onPointerUp: Xt, children: [
i,
_e
] }) : /* @__PURE__ */ Hr(bi, { ...S, key: S?.key, borderRadius: be, disabled: l || ae }, /* @__PURE__ */ w(Cn, { className: `contents trigger-element ${I}`, onClick: X, onPointerDown: Gt, onPointerUp: Xt, children: [
i,
_e
] })),
Re.map(ue, (q, ge) => Te(q) ? Ue(q, {
key: q.key || `${V}${ge}`,
...q.props
}) : q)
] }, D),
typeof o == "string" && /* @__PURE__ */ t(Uo, { ...x, entity: o, title: x?.title ?? te ?? B("unknown"), onClose: () => {
P(!1), x?.onClose && x.onClose();
}, open: x?.open || W, id: V })
] });
}, Ce = Vt(function(r) {
return /* @__PURE__ */ t(le, { ...de({
prefix: "CardBase"
}), children: yi(r) });
}), xi = /* @__PURE__ */ C("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 wi({
entity: e,
icon: r,
iconProps: o,
render: n,
position: a,
onClick: s,
disabled: c,
service: i,
serviceData: l,
...h
}) {
const d = pe(e), g = $e(r ?? null, o), x = tt(e), f = $t(x === null ? "unknown" : x, o), u = Mt(e || "unknown", o), b = g ?? u ?? f, p = oe(() => typeof d?.state == "string" ? Ee(d.state) : !1, [d?.state]), _ = $((y) => {
if (!c) {
if (typeof i == "string" && d && !p) {
const N = d.service[i];
N(l);
}
typeof s == "function" && s(d !== null ? d : null, y);
}
}, [i, c, d, l, s, p]);
return /* @__PURE__ */ t(xi, { position: a, onClick: _, ...h, children: n ? n(d, b) : /* @__PURE__ */ t(se, { children: b }) });
}
const Th = Vt(function(r) {
return /* @__PURE__ */ t(le, { ...de({
prefix: "RelatedEntity"
}), children: /* @__PURE__ */ t(wi, { ...r }) });
});
function Ni({
children: e,
active: r,
...o
}) {
return /* @__PURE__ */ t(
Ae,
{
as: "div",
rippleProps: {
preventPropagation: !0
},
active: r,
cssStyles: `
&.button-bar-button {
.contents {
> div {
padding: 0.6rem;
}
}
}
`,
...o,
children: e
}
);
}
const pt = function(r) {
return /* @__PURE__ */ t(le, { ...de({
prefix: "FeatureEntity"
}), children: /* @__PURE__ */ t(Ni, { ...r }) });
}, Ei = /* @__PURE__ */ C("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 _i({
placement: e = "top",
title: r = null,
children: o,
ref: n,
...a
}) {
const s = G(null), c = G(null), i = Q((b) => b.portalRoot), h = Q((b) => b.windowContext) ?? window, [d, g] = ne(!1), x = $((b) => {
const p = c.current?.getBoundingClientRect();
if (typeof p > "u") return;
let _ = 0, y = 0;
switch (e) {
case "top":
_ = p.top, y = p.left + p.width / 2;
break;
case "right":
_ = p.top + p.height / 2, y = p.right;
break;
case "bottom":
_ = p.bottom, y = p.left + p.width / 2;
break;
case "left":
_ = p.top + p.height / 2, y = p.left;
break;
}
b.style.top = `${_}px`, b.style.left = `${y}px`, setTimeout(() => {
b.style.opacity = "1", b.style.visibility = "visible";
}, 0);
}, [e]), f = $(() => {
g(!0);
}, []), u = $(() => {
const b = s.current;
b && (b.style.opacity = "0", b.style.visibility = "hidden", b.setAttribute("aria-hidden", "true"), setTimeout(() => {
g(!1);
}, 250));
}, []);
return r === null || r === "" ? o : /* @__PURE__ */ w("div", { ref: c, onBlur: u, onTouchEnd: u, onTouchStart: f, onMouseUp: u, onMouseEnter: f, onMouseLeave: u, ...a, children: [
Re.map(o, (b, p) => Te(b) ? Ue(b, {
...b.props,
onClick(_, y) {
b.props.onClick?.(_, y), a?.onClick?.(y);
},
ref: n,
key: b.key ?? p
}) : b),
typeof document < "u" && ur(d && /* @__PURE__ */ t(Ei, { className: "tooltip-inner", placement: e, ref: (b) => {
b && (s.current = b, x(b));
}, "aria-hidden": "false", children: r }), i ?? h.document.body)
] });
}
function ye(e) {
return /* @__PURE__ */ t(le, { ...de({
prefix: "Tooltip"
}), children: /* @__PURE__ */ t(_i, { ...e }) });
}
const de = ({
prefix: e
}) => ({
fallbackRender({
error: r,
resetErrorBoundary: o
}) {
return /* @__PURE__ */ t(rt, { className: "error-boundary-alert", title: `${e ? `${e} - ` : ""}${B("unknown_error")}`, description: r.message, type: "error", onClick: () => o() });
}
});
function Et() {
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 ki = /* @__PURE__ */ C(Ce, 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: Et
}), Si = /* @__PURE__ */ C("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: Et
}), Ci = /* @__PURE__ */ C("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)", ";"), Di = /* @__PURE__ */ C("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;"), Oi = /* @__PURE__ */ C("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;}"), Ri = /* @__PURE__ */ C("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: Et
}), Ii = /* @__PURE__ */ C("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: Et
}), On = /* @__PURE__ */ C("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: Et
}), er = /* @__PURE__ */ C("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: Et
});
function Ai({
entity: e,
service: r,
serviceData: o,
iconProps: n,
icon: a,
fabProps: s,
active: c,
onClick: i,
description: l,
title: h,
layoutType: d,
disabled: g = !1,
className: x,
hideIcon: f = !1,
hideState: u = !1,
hideLastUpdated: b = !1,
children: p,
hideDetails: _ = !1,
cssStyles: y,
key: N,
hideToggle: k = !1,
customRenderState: v,
...S
}) {
const R = Q((J) => J.globalComponentStyles), A = Q((J) => J.formatter), D = e ? tt(e) : null, m = pe(e || "unknown", {
returnNullIfNotFound: !0
}), E = typeof a < "u" && typeof a != "string" ? a : null, T = $t(D === null ? "unknown" : D, {
...n ?? {}
}), M = Mt(e || "unknown", {
...n ?? {}
}), j = d === "default" || d === void 0, I = d === "slim" || d === "slim-vertical", z = typeof m?.state == "string" ? Ee(m.state) : !1, V = m ? m.state !== "off" && !z && !g : c || !1, O = $e(typeof a == "string" ? a : null, {
...n ?? {}
}), W = oe(() => h === null ? null : h || m?.attributes.friendly_name || m?.entity_id || null, [h, m]);
function P() {
return u ? null : v && m ? v(m) : typeof c == "boolean" ? c ? `${B(je)}` : `${B(We)}` : m && m.state === je && D === "light" ? A.attributeValue(m, "brightness") : m ? A.stateValue(m) : null;
}
const re = Re.toArray(S?.features).filter((J) => Te(J)).length > 0, H = P(), Y = S.descriptionSeparator ?? "-";
function U(J, ae) {
return !J && !ae ? null : J && ae ? /* @__PURE__ */ w(se, { children: [
J,
" ",
/* @__PURE__ */ t("span", { className: "description-separator", children: Y }),
" ",
ae
] }) : J || ae;
}
return /* @__PURE__ */ t(
ki,
{
as: "button",
service: r,
serviceData: o,
active: c,
entity: e,
title: W ?? void 0,
disabled: g || z,
onClick: i,
className: `${x ?? ""} ${d ?? "default"} button-card`,
triggerClass: "button-card-trigger",
cssStyles: `
${R.buttonCard ?? ""}
${y ?? ""}
`,
...S,
children: /* @__PURE__ */ w(Si, { className: `contents ${re ? "has-features" : ""}`, children: [
/* @__PURE__ */ w(Ri, { className: `layout-between ${d === "slim-vertical" ? "vertical" : ""}`, children: [
!f && /* @__PURE__ */ t(Oi, { brightness: V && m?.custom.brightness || "brightness(100%)", ...s, className: `fab-card-inner icon ${s?.className} ${s?.style ? "custom" : ""}`, style: {
...s?.style,
backgroundColor: s?.style?.backgroundColor ?? (V ? D === "light" ? m?.custom?.rgbaColor ?? "var(--ha-A400)" : "var(--ha-A400)" : "var(--ha-S400)"),
color: s?.style?.color ?? (m ? V ? m.custom.rgbColor : "var(--ha-S500-contrast)" : V ? "var(--ha-A400)" : "var(--ha-S500-contrast)")
}, children: E ?? O ?? M ?? T }),
j && !k && /* @__PURE__ */ t(Di, { active: V, className: "toggle", children: !z && /* @__PURE__ */ t(Ci, { active: V, className: "toggle-state" }) }),
I && /* @__PURE__ */ w(ie, { fullWidth: !0, alignItems: d === "slim-vertical" ? "center" : "flex-start", children: [
W && /* @__PURE__ */ t(On, { className: "title", children: W }),
!_ && /* @__PURE__ */ t(er, { className: `description ${d ?? ""}`, children: U(l, H) }),
m && !b && /* @__PURE__ */ w(er, { className: `description secondary ${d === "slim-vertical" ? "center" : ""}`, children: [
B("last_updated"),
": ",
m.custom.relativeTime
] })
] })
] }),
j && /* @__PURE__ */ w(Ii, { className: "footer", children: [
W && /* @__PURE__ */ t(On, { className: "title", children: W }),
!_ && /* @__PURE__ */ t(er, { className: "description", children: U(l, H) }),
!_ && m && !b && /* @__PURE__ */ w(er, { className: "description secondary", children: [
B("last_updated"),
": ",
m.custom.relativeTime
] })
] }),
p && /* @__PURE__ */ t("div", { className: "children", children: p })
] })
},
N
);
}
function Io(e) {
const r = {
xxs: 12,
xs: 6,
sm: 4,
md: 3,
lg: 2,
xlg: 2
};
return /* @__PURE__ */ t(le, { ...de({
prefix: "ButtonCard"
}), children: /* @__PURE__ */ t(Ai, { ...r, ...e }) });
}
function Ao() {
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 Ti = /* @__PURE__ */ C("div", process.env.NODE_ENV === "production" ? {
target: "eu3ltb74"
} : {
target: "eu3ltb74",
label: "RangeSliderParent"
})(), zi = /* @__PURE__ */ C("div", process.env.NODE_ENV === "production" ? {
target: "eu3ltb73"
} : {
target: "eu3ltb73",
label: "StyledRange"
})((e) => `
min-width: 6rem;
width: 100%;
position: relative;
isolation: isolate;
${De(["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;
}
}
}
`, ";"), Vi = /* @__PURE__ */ C("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%;}"), $i = /* @__PURE__ */ C("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: Ao
}), Mi = /* @__PURE__ */ C("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: Ao
});
function Pi({
value: e,
onChange: r,
formatTooltipValue: o,
hideTooltip: n,
label: a,
description: s,
className: c,
style: i,
tooltipSize: l = 2,
handleSize: h = 15,
min: d = 0,
max: g = 100,
step: x = 1,
debounceThrottleValue: f = 300,
debounceType: u = "debounce",
onChangeComplete: b,
cssStyles: p,
..._
}) {
const [y, N] = ne(e ?? 0), [k, v] = ne(!1), S = G(null), R = G(null), A = G(null);
K(() => {
typeof e == "number" && N(e);
}, [e]), K(() => {
if (!S.current || n) return;
const E = parseFloat(`${d ?? 0}`), T = parseFloat(`${g ?? 100}`), M = parseFloat(`${x ?? 1}`), j = parseFloat(S.current.valueAsNumber.toFixed(M < 1 ? Math.abs(Math.log10(M)) : 0)), I = (S.current.valueAsNumber - E) / (T - E) * 100;
if (A.current) {
A.current.style.left = `${I}%`;
const z = typeof o == "function" ? o(j) : j;
A.current.setAttribute("data-title", `${z}`);
}
}, [y, d, g, x, o, n]);
const m = (u === "debounce" ? jt : Ur)((E) => {
typeof b == "function" && b(E.target.valueAsNumber, E), v(!1);
}, f, {
leading: !0,
trailing: !0
});
return /* @__PURE__ */ w(Ti, { className: `${c ?? ""} ${k ? "active" : ""} range-slider`, style: {
position: "relative",
...i ?? {}
}, css: /* @__PURE__ */ Se(p ?? "", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:InternalRangeSlider;")), children: [
a && /* @__PURE__ */ t($i, { className: "label", children: a }),
s && /* @__PURE__ */ t(Mi, { className: "description", children: s }),
/* @__PURE__ */ w(zi, { ref: R, handleSize: h, className: `range-slider-inner ${k ? "active" : ""}`, children: [
/* @__PURE__ */ t("input", { ..._, min: d, max: g, step: x, ref: S, type: "range", className: "range-slider-range", value: y, onInput: (E) => {
N(E.target.valueAsNumber), k || v(!0);
}, onChange: (E) => {
typeof r == "function" && r(E.target.valueAsNumber, E), m(E);
} }),
!n && /* @__PURE__ */ t("div", { className: "tooltip-holder", style: {
position: "absolute",
top: 0,
left: h / 2,
right: h / 2
}, children: /* @__PURE__ */ t(Vi, { size: l, ref: A }) })
] })
] });
}
function ht(e) {
return /* @__PURE__ */ t(le, { ...de({
prefix: "RangeSlider"
}), children: /* @__PURE__ */ t(Pi, { ...e }) });
}
function ji() {
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 = {
position: "relative",
display: "inline-flex",
overflow: "hidden"
}, Fi = /* @__PURE__ */ C("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: ji
}), Li = /* @__PURE__ */ C("div", process.env.NODE_ENV === "production" ? {
target: "ekpqrw60"
} : {
target: "ekpqrw60",
label: "ParentRipple"
})((e) => e.borderRadius && `
border-radius: ${e.borderRadius};
overflow: hidden;
display: inline-flex;
`, ";"), To = Vt(({
duration: e = 600,
color: r = "rgba(0, 0, 0, .3)",
borderRadius: o = "none",
onClick: n,
children: a,
disabled: s,
preventPropagation: c = !1,
style: i,
className: l,
cssStyles: h,
id: d,
...g
}) => {
const x = G(null), f = G(null), b = Q((_) => _.windowContext) ?? window;
K(() => () => {
f.current && clearTimeout(f.current);
}, []);
const p = $((_) => {
if (_.stopPropagation(), s) return;
f.current !== null && clearTimeout(f.current);
const {
pageX: y,
pageY: N,
currentTarget: k
} = _, v = k.getBoundingClientRect();
let S = 1;
typeof b < "u" && (S = b.scrollX);
let R = 1;
typeof b < "u" && (R = b.scrollY);
const A = y - (v.left + S), D = N - (v.top + R), m = Math.max(v.width, v.height);
if (x.current) {
const E = {
left: isNaN(A) ? "0px" : `${A}px`,
top: isNaN(D) ? "0px" : `${D}px`,
opacity: 1,
transform: "translate(-50%, -50%)",
transition: "initial",
backgroundColor: r
};
Object.assign(x.current.style, E);
}
f.current = setTimeout(() => {
if (x.current) {
const E = {
opacity: 0,
transform: `scale(${m / 9})`,
transition: `all ${e}ms`
};
Object.assign(x.current.style, E);
}
f.current = null;
}, 50), typeof n == "function" && n(_);
}, [r, e, s, n, b]);
return /* @__PURE__ */ t(Li, { borderRadius: o, id: d ?? "", className: `ripple-parent ${l ?? ""}`, css: /* @__PURE__ */ Se(h ?? "", ";"), style: {
...i ?? {}
}, children: /* @__PURE__ */ w("div", { className: "ripple-inner", onPointerDownCapture: (_) => {
c && _.stopPropagation();
}, ...g, style: {
width: "100%",
...Bi,
borderRadius: o
}, onClick: p, children: [
a,
/* @__PURE__ */ t(Fi, { ref: x })
] }) });
});
To.displayName = "_Ripples";
function Wi(e) {
return /* @__PURE__ */ t(le, { ...de({
prefix: "Ripples"
}), children: /* @__PURE__ */ t(To, { ...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 Hi = /* @__PURE__ */ C(Ce, process.env.NODE_ENV === "production" ? {
target: "e17tod368"
} : {
target: "e17tod368",
label: "StyledTriggerCard"
})(), qi = /* @__PURE__ */ C("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;", ";"), Ui = /* @__PURE__ */ C("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;}"), Yi = /* @__PURE__ */ C("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
}), Gi = /* @__PURE__ */ C("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;"), Xi = /* @__PURE__ */ C("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
}), Rn = /* @__PURE__ */ C("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
}), Qi = /* @__PURE__ */ C("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
}), Ki = /* @__PURE__ */ C("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 Ji({
entity: e,
title: r,
description: o,
onClick: n,
disabled: a,
icon: s,
iconProps: c,
sliderIconProps: i,
sliderIcon: l,
sliderTextActive: h,
sliderTextInactive: d,
activeStateDuration: g = 5e3,
hideArrow: x = !1,
className: f,
service: u,
serviceData: b,
key: p,
cssStyles: _,
...y
}) {
const N = Q((O) => O.globalComponentStyles), k = tt(e), v = pe(e), S = Mt(e, c), R = $t(k, c), A = G(null), [D, m] = ne(!1), E = $e(s ?? null, c), T = $e(l ?? null, i), M = $e("mdi:power", c), j = $e("mingcute:arrows-right-line", {
...c,
style: {
fontSize: "16px",
...c?.style
}
}), I = Ee(v.state), z = a || I, V = $((O) => {
m(!0), typeof n == "function" && !I && n(v, O), A.current && clearTimeout(A.current), A.current = setTimeout(() => {
m(!1);
}, g);
}, [v, n, g, I]);
return /* @__PURE__ */ t(
Hi,
{
as: "button",
className: `${f ?? ""} trigger-card`,
disabled: z,
entity: e,
service: u,
serviceData: b,
onClick: V,
cssStyles: `
${N?.triggerCard ?? ""}
${_ ?? ""}
`,
...y,
children: /* @__PURE__ */ w(Xi, { children: [
/* @__PURE__ */ w(Rn, { className: "layout-between", children: [
/* @__PURE__ */ w(Ki, { disabled: z, className: "description", children: [
r || v.attributes.friendly_name || e,
o && /* @__PURE__ */ t("span", { children: o })
] }),
E ?? S ?? R
] }),
/* @__PURE__ */ t(Yi, { className: "gap" }),
/* @__PURE__ */ w(Rn, { className: "layout-between", children: [
/* @__PURE__ */ w(Qi, { className: "title", children: [
v.custom.relativeTime,
z ? ` - ${v.state}` : ""
] }),
/* @__PURE__ */ t(Gi, { active: z ? !1 : D, className: "toggle", children: z ? null : /* @__PURE__ */ w(se, { children: [
/* @__PURE__ */ t(Ui, { active: D, className: "toggle-state", children: T ?? M }),
/* @__PURE__ */ w(qi, { hideArrow: x, active: D, className: "toggle-message", children: [
D ? h ?? B("triggered_name", {
search: " {name}",
replace: ""
}) : d ?? `${B("run")} ${lo(e, v?.attributes?.device_class)}`,
" ",
!D && !x && j
] })
] }) })
] })
] })
},
p
);
}
function zh(e) {
const r = {
xxs: 12,
xs: 6,
sm: 6,
md: 4,
lg: 4,
xlg: 3
};
return /* @__PURE__ */ t(le, { ...de({
prefix: "TriggerCard"
}), children: /* @__PURE__ */ t(Ji, { ...r, ...e }) });
}
function zo() {
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 Zi = /* @__PURE__ */ C(Ce, 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
}) => `
${De(["xxs", "xs"], `
padding: ${e ? "1rem 0rem" : "1.5rem 1rem 1rem"};
`)}
`, ";"), es = /* @__PURE__ */ C("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: zo
}), ts = /* @__PURE__ */ C("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: zo
}), rs = /* @__PURE__ */ C("h3", process.env.NODE_ENV === "production" ? {
target: "e16eobz10"
} : {
target: