@hakit/components
Version:
A series of components to work with @hakit/core
1,235 lines (1,221 loc) • 377 kB
JavaScript
import { j as t, a as y, F as ae } 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 ee, useState as Q, useEffect as Y, memo as Ft, useId as pr, useRef as q, useCallback as M, Children as ze, isValidElement as Me, cloneElement as Ge, lazy as no, Suspense as zr, Fragment as ra, useLayoutEffect as oo } from "react";
import { useHass as pe, computeDomain as tt, useEntity as ue, isUnavailableState as Ee, localize as F, useIcon as Be, useIconByDomain as Lt, useIconByEntity as Wt, computeDomainTitle as Hr, ON as et, OFF as Le, useWeather as na, getIconByEntity as fn, getSupportedForecastTypes as oa, supportsFeatureFromAttributes as be, UNAVAILABLE as je, toReadableString as qe, stateActive as Vr, isOffState as aa, useLightBrightness as ia, lightSupportsColorMode as it, LIGHT_COLOR_MODES as st, lightSupportsColor as ao, lightSupportsBrightness as sa, useService as Ht, computeStateDisplay as ca, getColorByIndex as la, useCamera as io, STREAM_TYPE_HLS as so, STREAM_TYPE_WEB_RTC as co, useLogs as da, useDevice as lo, createHistoricState as mn, localizeStateMessage as gn, localizeTriggerSource as ua, timeAgo as pa, batteryIconByLevel as ha, useLightTemperature as fa, temperature2rgb as uo, rgb2hex as Mt, rgb2hs as ma, useLightColor as ga, hsv2rgb as $r, hex2rgb as Dr, hs2rgb as va, rgbw2rgb as ba, rgbww2rgb as ya } from "@hakit/core";
import { TextField as xa } from "./es/Shared/Form/TextField.js";
import { css as Re, createElement as qr, Global as Yr, keyframes as po, CacheProvider as wa } from "@emotion/react";
import { motion as _e, AnimatePresence as kt, spring as Na } from "framer-motion";
import { useLongPress as ho } from "use-long-press";
import { startCase as fo, lowerCase as mo, capitalize as wt, clamp as dt, snakeCase as xt, flatten as Ea, groupBy as Sa, isNumber as Or, isEqual as ka, merge as _a } from "lodash";
import { ErrorBoundary as ne } from "react-error-boundary";
import * as Ca from "react-dom";
import { createPortal as hr } from "react-dom";
import "@emotion/serialize";
import "@emotion/utils";
import "@emotion/is-prop-valid";
import { filterSupportedAlarmStates as Da, DEFAULT_STATES as Oa, _getActionColor as Ra, ALARM_MODE_STATE_MAP as vn, ALARM_MODES as Ia, _getActionLabel as bn } from "./es/Shared/Entity/Alarm/AlarmControls/shared.js";
import { useDebouncedCallback as qt, useThrottledCallback as Ur } from "use-debounce";
import { getBreakpoints as Aa, mq as Oe, getColumnSizeCSS as mt, generateColumnBreakpoints as Ta } from "./es/ThemeProvider/breakpoints.js";
import { SvgGraph as za } 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 Va } from "./es/Cards/WeatherCard/helpers.js";
import { UNIT_F as fr, ClimateEntityFeature as ct, CLIMATE_HVAC_ACTION_TO_MODE as $a, compareClimateHvacModes as Ma, computeHvacModeIcon as yn, computePresetModeIcon as xn, computeFanModeIcon as wn, computeSwingModeIcon as Nn } from "./es/Shared/Entity/Climate/ClimateControls/data.js";
import { colors as Ve, icons as En, activeColors as Pa } from "./es/Shared/Entity/Climate/ClimateControls/shared.js";
import { BigNumber as go } from "./es/Shared/Entity/Climate/ClimateControls/BigNumber.js";
import { useGesture as Yt } from "@use-gesture/react";
import ja from "@fullcalendar/react";
import Ba from "@fullcalendar/daygrid";
import Fa from "@fullcalendar/interaction";
import La from "@fullcalendar/list";
import { useResizeDetector as Gr } from "react-resize-detector";
import Wa from "autolinker";
import { VideoPlayer as vo } from "./es/Cards/CameraCard/players/index.js";
import { useModalStore as Ha } from "./es/Shared/Modal/ModalProvider/index.js";
import { svgArc as Sn } from "./es/Shared/ControlSliderCircular/svg-arc.js";
import { PreloadImage as Qr } from "./es/Shared/PreloadImage/index.js";
import { Alert as rt } from "./es/Shared/Alert/index.js";
import { theme as qa } from "./es/ThemeProvider/theme.js";
import { convertToCssVars as Ya } from "./es/ThemeProvider/helpers.js";
import { DEFAULT_THEME_OPTIONS as kn, LIGHT as mr, DARK as Xr, ACCENT as bo, DIFF as _t, DEFAULT_START_LIGHT as Kr, DEFAULT_START_DARK as Jr } from "./es/ThemeProvider/constants.js";
import { useThemeStore as sr } from "./es/ThemeProvider/store.js";
import Ua from "@emotion/cache";
import { jsxs as Ga, jsx as er } from "react/jsx-runtime";
import { useKeyPress as yo, useDebounce as Qa } from "react-use";
import { getToolbarActions as xo } from "./es/Shared/Entity/Vacuum/VacuumControls/shared.js";
import { VacuumImage as wo } from "./es/Shared/Entity/Vacuum/VacuumControls/VacuumImage.js";
import { DEFAULT_FAB_SIZE as Nt } from "./es/Cards/MediaPlayerCard/constants.js";
import { Marquee as Xa } from "./es/Cards/MediaPlayerCard/Marquee.js";
import { Thumbnail as Ka } from "./es/Cards/MediaPlayerCard/Thumbnail.js";
import { Clock as Ja } from "./es/Cards/MediaPlayerCard/Clock.js";
import { ProgressBar as Za } from "./es/Cards/MediaPlayerCard/ProgressBar.js";
import Mr, { DivIcon as ei } from "leaflet";
import { MapContainer as ti, Marker as ri, TileLayer as ni } from "react-leaflet";
import { daySuffix as oi, createDateFormatter as ai } from "./es/Cards/TimeCard/formatter.js";
import { Time as Rr, AmOrPm as ii } from "./es/Cards/TimeCard/shared.js";
import { isValidProp as _n } from "./es/utils/isValidProp.js";
import { SVG_WIDTH as si, SVG_HEIGHT as ci } from "./es/Shared/SvgGraph/constants.js";
function Ut() {
const {
useStore: e
} = pe(), r = e((l) => l.breakpoints), n = e((l) => l.windowContext) ?? window, a = ee(() => Aa(r), [r]), s = {
xxs: !1,
xs: !1,
sm: !1,
md: !1,
lg: !1,
xlg: !1
}, [c, i] = Q(s);
return Y(() => {
const l = (p, f) => {
i((v) => ({
...v,
[p]: f.matches
}));
}, h = {
xxs: n.matchMedia(a.xxs),
xs: n.matchMedia(a.xs),
sm: n.matchMedia(a.sm),
md: n.matchMedia(a.md),
lg: n.matchMedia(a.lg),
xlg: n.matchMedia(a.xlg)
};
return Object.keys(h).forEach((p) => {
l(p, h[p]);
}), Object.keys(h).forEach((p) => {
h[p]?.addEventListener("change", (v) => l(p, v.currentTarget));
}), () => {
Object.keys(h).forEach((p) => {
h[p]?.removeEventListener("change", (v) => l(p, v.currentTarget));
});
};
}, [a, n]), c;
}
var li = 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 No() {
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 = (e, r) => {
const o = _e[e];
if (!o)
throw new Error(`Failed to create a motion component for element type: ${e}`);
return r ? /* @__PURE__ */ k(o, process.env.NODE_ENV === "production" ? {
target: "e1xe7ch93"
} : {
target: "e1xe7ch93",
label: "getMotionElement"
})() : /* @__PURE__ */ k(o, process.env.NODE_ENV === "production" ? {
shouldForwardProp: (n) => _n(n),
target: "e1xe7ch92"
} : {
shouldForwardProp: (n) => _n(n),
target: "e1xe7ch92",
label: "getMotionElement"
})("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: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;}", (n) => !n.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);
}
}
`, ";");
}, ui = /* @__PURE__ */ k((e) => /* @__PURE__ */ t($i, { ...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: No
}), Cn = /* @__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: No
}), Dn = {
xxs: 12,
xs: 6,
sm: 6,
md: 4,
lg: 4,
xlg: 3
}, pi = function({
as: r = "div",
entity: o,
title: n,
active: a,
service: s,
serviceData: c,
children: i,
disabled: l,
longPressCallback: h,
onClick: p,
modalProps: f,
disableRipples: v = !1,
disableScale: d = !1,
disableActiveState: m = !1,
onlyFunctionality: b = !1,
id: u,
className: S,
cssStyles: N,
style: g,
borderRadius: _ = "16px",
rippleProps: x,
disableColumns: C,
whileTap: E,
ref: T,
key: j,
relatedEntities: z,
features: D,
featureBarProps: I,
graph: V,
resizeDetectorProps: w,
triggerClass: R,
...A
}) {
const $ = pr(), {
useStore: O
} = pe(), P = O((ce) => ce.globalComponentStyles), [L, G] = Q(!1), W = o ? tt(o) : null, Z = ue(o ?? "unknown", {
returnNullIfNotFound: !0
}), X = q(null), {
width: le = 0
} = Gr({
refreshMode: "debounce",
refreshRate: 50,
handleHeight: !1,
skipOnMount: !1,
targetRef: T ?? X,
...w ?? {}
}), ge = ue(V?.entity ?? "unknown", {
returnNullIfNotFound: !0,
historyOptions: {
disable: !1,
...V?.historyOptions
}
}), U = ee(() => typeof Z?.state == "string" ? Ee(Z.state) : !1, [Z?.state]), B = _, H = ee(() => di(r, b), [r, b]), re = ho((ce) => {
typeof h == "function" && h(Z !== null ? Z : null, ce), typeof o == "string" && !L && G(!0);
}, {
threshold: 300,
cancelOnMovement: !0,
cancelOutsideElement: !0,
filterEvents(ce) {
return !("button" in ce && ce.button === 2);
}
}), se = M((ce) => {
if (!l) {
if (typeof s == "string" && Z && !U) {
const De = Z.service[s];
De(c);
}
typeof p == "function" && p(Z !== null ? Z : null, ce);
}
}, [s, l, Z, c, p, U]), ie = ee(() => n || Z?.attributes?.friendly_name || (W !== null ? fo(mo(W)) : null), [n, Z, W]), me = ee(() => {
const ce = Object.entries(Dn).reduce((De, [ht, de]) => {
const Te = A[ht];
return {
...De,
[ht]: Te ?? de
};
}, Dn);
return Object.entries(ce).map(([De, ht]) => `${De}-${ht}`).join(" ");
}, [A.xxs, A.xs, A.sm, A.md, A.lg, A.xlg]), he = ze.toArray(z).filter((ce) => Me(ce)), fe = ze.toArray(D).filter((ce) => Me(ce)), ye = ze.map(fe, (ce, De) => Me(ce) ? Ge(ce, {
key: ce.key || `${$}${De}`,
...ce.props
}) : ce), Ie = fe.length > 0, Se = Ie && /* @__PURE__ */ t(nt, { layoutType: "bubble", className: "features", fullWidth: !0, gap: "0.5rem", ...I, children: ye });
function xe(ce) {
const De = si / ci;
return `calc(${ce / De}px - ${V?.adjustGraphSpaceBy ?? "0px"});`;
}
const Ae = xe(le), at = ee(() => ["card-base", S ?? "", C ? "" : me, a ? "active" : "", U ? "unavailable" : "", l || U ? "disabled" : "", Ie ? "has-features" : "", ge ? "has-graph" : ""].filter((ce) => !!ce).join(" "), [a, S, me, C, l, ge, Ie, U]);
return /* @__PURE__ */ y(ae, { children: [
/* @__PURE__ */ y(H, { ref: T ?? X, id: u ?? "", className: at, css: /* @__PURE__ */ Re("padding-bottom:", ge ? Ae : "inherit", ";", P.cardBase ?? "", " ", N ?? "", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:CardBase;")), style: {
...g ?? {},
borderRadius: B
}, whileTap: E ?? {
scale: d || l || U ? 1 : 0.9
}, disableActiveState: m, disabled: U || l, ...re(), ...A, children: [
ge && /* @__PURE__ */ t("div", { className: "graph-element history", children: ge.history.loading ? /* @__PURE__ */ t(rt, { className: "loading", description: F("loading") }) : ge.history.coordinates.length > 0 ? /* @__PURE__ */ t(za, { coordinates: ge.history.coordinates, ...V?.props }) : /* @__PURE__ */ t(rt, { className: "no-state-history", description: F("no_state_history_found") }) }),
v ? /* @__PURE__ */ y(Cn, { className: `contents trigger-element ${R}`, onClick: se, children: [
i,
Se
] }) : /* @__PURE__ */ qr(ui, { ...x, key: x?.key, borderRadius: B, disabled: l || U }, /* @__PURE__ */ y(Cn, { className: `contents trigger-element ${R}`, onClick: se, children: [
i,
Se
] })),
ze.map(he, (ce, De) => Me(ce) ? Ge(ce, {
key: ce.key || `${$}${De}`,
...ce.props
}) : ce)
] }, j),
typeof o == "string" && /* @__PURE__ */ t(Mo, { ...f, entity: o, title: f?.title ?? ie ?? F("unknown"), onClose: () => {
G(!1), f?.onClose && f.onClose();
}, open: f?.open || L, id: $ })
] });
}, Ce = Ft(function(r) {
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "CardBase"
}), children: /* @__PURE__ */ t(pi, { ...r }) });
}), hi = /* @__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 fi({
entity: e,
icon: r,
iconProps: o,
render: n,
position: a,
onClick: s,
disabled: c,
service: i,
serviceData: l,
...h
}) {
const p = ue(e), f = Be(r ?? null, o), v = tt(e), d = Lt(v === null ? "unknown" : v, o), m = Wt(e || "unknown", o), b = f ?? m ?? d, u = ee(() => typeof p?.state == "string" ? Ee(p.state) : !1, [p?.state]), S = M((N) => {
if (!c) {
if (typeof i == "string" && p && !u) {
const g = p.service[i];
g(l);
}
typeof s == "function" && s(p !== null ? p : null, N);
}
}, [i, c, p, l, s, u]);
return /* @__PURE__ */ t(hi, { position: a, onClick: S, ...h, children: n ? n(p, b) : /* @__PURE__ */ t(ae, { children: b }) });
}
const ch = Ft(function(r) {
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "RelatedEntity"
}), children: /* @__PURE__ */ t(fi, { ...r }) });
});
function mi({
children: e,
active: r,
...o
}) {
return /* @__PURE__ */ t(
$e,
{
as: "div",
rippleProps: {
preventPropagation: !0
},
active: r,
cssStyles: `
&.button-bar-button {
.contents {
> div {
padding: 0.6rem;
}
}
}
`,
...o,
children: e
}
);
}
const vt = function(r) {
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "FeatureEntity"
}), children: /* @__PURE__ */ t(mi, { ...r }) });
}, gi = /* @__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 vi({
placement: e = "top",
title: r = null,
children: o,
ref: n,
...a
}) {
const s = q(null), c = q(null), {
useStore: i
} = pe(), l = i((u) => u.portalRoot), p = i((u) => u.windowContext) ?? window, [f, v] = Q(!1), d = M((u) => {
const S = c.current?.getBoundingClientRect();
if (typeof S > "u") return;
let N = 0, g = 0;
switch (e) {
case "top":
N = S.top, g = S.left + S.width / 2;
break;
case "right":
N = S.top + S.height / 2, g = S.right;
break;
case "bottom":
N = S.bottom, g = S.left + S.width / 2;
break;
case "left":
N = S.top + S.height / 2, g = S.left;
break;
}
u.style.top = `${N}px`, u.style.left = `${g}px`, setTimeout(() => {
u.style.opacity = "1", u.style.visibility = "visible";
}, 0);
}, [e]), m = M(() => {
v(!0);
}, []), b = M(() => {
const u = s.current;
u && (u.style.opacity = "0", u.style.visibility = "hidden", u.setAttribute("aria-hidden", "true"), setTimeout(() => {
v(!1);
}, 250));
}, []);
return r === null || r === "" ? o : /* @__PURE__ */ y("div", { ref: c, onBlur: b, onTouchEnd: b, onTouchStart: m, onMouseUp: b, onMouseEnter: m, onMouseLeave: b, ...a, children: [
ze.map(o, (u, S) => Me(u) ? Ge(u, {
...u.props,
onClick(N, g) {
u.props.onClick?.(N, g), a?.onClick?.(g);
},
ref: n,
key: u.key ?? S
}) : u),
typeof document < "u" && hr(f && /* @__PURE__ */ t(gi, { className: "tooltip-inner", placement: e, ref: (u) => {
u && (s.current = u, d(u));
}, "aria-hidden": "false", children: r }), l ?? p.document.body)
] });
}
function Ne(e) {
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "Tooltip"
}), children: /* @__PURE__ */ t(vi, { ...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 Rt() {
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__ */ k(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: Rt
}), yi = /* @__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: Rt
}), xi = /* @__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)", ";"), wi = /* @__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;"), Ni = /* @__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;}"), Ei = /* @__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: Rt
}), Si = /* @__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: Rt
}), On = /* @__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: Rt
}), tr = /* @__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: Rt
});
function ki({
entity: e,
service: r,
serviceData: o,
iconProps: n,
icon: a,
fabProps: s,
active: c,
onClick: i,
description: l,
title: h,
layoutType: p,
disabled: f = !1,
className: v,
hideIcon: d = !1,
hideState: m = !1,
hideLastUpdated: b = !1,
children: u,
hideDetails: S = !1,
cssStyles: N,
key: g,
hideToggle: _ = !1,
unitOfMeasurement: x,
customRenderState: C,
...E
}) {
const {
useStore: T
} = pe(), j = T((X) => X.globalComponentStyles), z = e ? tt(e) : null, D = ue(e || "unknown", {
returnNullIfNotFound: !0
}), I = typeof a < "u" && typeof a != "string" ? a : null, V = Lt(z === null ? "unknown" : z, {
...n ?? {}
}), w = Wt(e || "unknown", {
...n ?? {}
}), R = p === "default" || p === void 0, A = p === "slim" || p === "slim-vertical", $ = typeof D?.state == "string" ? Ee(D.state) : !1, O = D ? D.state !== "off" && !$ && !f : c || !1, P = Be(typeof a == "string" ? a : null, {
...n ?? {}
}), L = ee(() => h === null ? null : h || D?.attributes.friendly_name || D?.entity_id || null, [h, D]), G = ee(() => l || (z !== null && e ? Hr(e, D?.attributes?.device_class) : null), [l, z, D, e]);
function W() {
return m ? null : C && D ? C(D) : typeof c == "boolean" ? c ? `${F(et)}` : `${F(Le)}` : $ ? F("unavailable") : D && D.state === et && z === "light" ? `${D.custom.brightnessValue}%` : D ? D.attributes.unit_of_measurement ? `${F(D.state)}${x ?? D.attributes.unit_of_measurement}` : `${F(D.state)}` : null;
}
const Z = ze.toArray(E?.features).filter((X) => Me(X)).length > 0;
return /* @__PURE__ */ t(
bi,
{
as: "button",
service: r,
serviceData: o,
active: c,
entity: e,
title: L ?? void 0,
disabled: f || $,
onClick: i,
className: `${v ?? ""} ${p ?? "default"} button-card`,
triggerClass: "button-card-trigger",
cssStyles: `
${j.buttonCard ?? ""}
${N ?? ""}
`,
...E,
children: /* @__PURE__ */ y(yi, { className: `contents ${Z ? "has-features" : ""}`, children: [
/* @__PURE__ */ y(Ei, { className: `layout-between ${p === "slim-vertical" ? "vertical" : ""}`, children: [
!d && /* @__PURE__ */ t(Ni, { brightness: O && D?.custom.brightness || "brightness(100%)", ...s, className: `fab-card-inner icon ${s?.className} ${s?.style ? "custom" : ""}`, style: {
...s?.style,
backgroundColor: s?.style?.backgroundColor ?? (O ? z === "light" ? D?.custom?.rgbaColor ?? "var(--ha-A400)" : "var(--ha-A400)" : "var(--ha-S400)"),
color: s?.style?.color ?? (D ? O ? D.custom.rgbColor : "var(--ha-S500-contrast)" : O ? "var(--ha-A400)" : "var(--ha-S500-contrast)")
}, children: I ?? P ?? w ?? V }),
R && !_ && /* @__PURE__ */ t(wi, { active: O, className: "toggle", children: !$ && /* @__PURE__ */ t(xi, { active: O, className: "toggle-state" }) }),
A && /* @__PURE__ */ y(te, { fullWidth: !0, alignItems: p === "slim-vertical" ? "center" : "flex-start", children: [
L && /* @__PURE__ */ t(On, { className: "title", children: L }),
!S && G && /* @__PURE__ */ y(tr, { className: `description ${p ?? ""}`, children: [
G,
" ",
m ? "" : ` - ${W()}`
] }),
D && !b && /* @__PURE__ */ y(tr, { className: `description secondary ${p === "slim-vertical" ? "center" : ""}`, children: [
F("last_updated"),
": ",
D.custom.relativeTime
] })
] })
] }),
R && /* @__PURE__ */ y(Si, { className: "footer", children: [
L && /* @__PURE__ */ t(On, { className: "title", children: L }),
!S && G && /* @__PURE__ */ y(tr, { className: "description", children: [
G,
D && !m ? ` - ${W()}` : ""
] }),
!S && D && !b && /* @__PURE__ */ y(tr, { className: "description secondary", children: [
F("last_updated"),
": ",
D.custom.relativeTime
] })
] }),
u && /* @__PURE__ */ t("div", { className: "children", children: u })
] })
},
g
);
}
function Eo(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(ki, { ...r, ...e }) });
}
function So() {
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 = /* @__PURE__ */ k("div", process.env.NODE_ENV === "production" ? {
target: "eu3ltb74"
} : {
target: "eu3ltb74",
label: "RangeSliderParent"
})(), Ci = /* @__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;
}
}
}
`, ";"), Di = /* @__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%;}"), Oi = /* @__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: So
}), Ri = /* @__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: So
});
function Ii({
value: e,
onChange: r,
formatTooltipValue: o,
hideTooltip: n,
label: a,
description: s,
className: c,
style: i,
tooltipSize: l = 2,
handleSize: h = 15,
min: p = 0,
max: f = 100,
step: v = 1,
debounceThrottleValue: d = 300,
debounceType: m = "debounce",
onChangeComplete: b,
cssStyles: u,
...S
}) {
const [N, g] = Q(e ?? 0), [_, x] = Q(!1), C = q(null), E = q(null), T = q(null);
Y(() => {
typeof e == "number" && g(e);
}, [e]), Y(() => {
if (!C.current || n) return;
const D = parseFloat(`${p ?? 0}`), I = parseFloat(`${f ?? 100}`), V = parseFloat(`${v ?? 1}`), w = parseFloat(C.current.valueAsNumber.toFixed(V < 1 ? Math.abs(Math.log10(V)) : 0)), R = (C.current.valueAsNumber - D) / (I - D) * 100;
if (T.current) {
T.current.style.left = `${R}%`;
const A = typeof o == "function" ? o(w) : w;
T.current.setAttribute("data-title", `${A}`);
}
}, [N, p, f, v, o, n]);
const z = (m === "debounce" ? qt : Ur)((D) => {
typeof b == "function" && b(D.target.valueAsNumber, D), x(!1);
}, d, {
leading: !0,
trailing: !0
});
return /* @__PURE__ */ y(_i, { className: `${c ?? ""} ${_ ? "active" : ""} range-slider`, style: {
position: "relative",
...i ?? {}
}, css: /* @__PURE__ */ Re(u ?? "", ";" + (process.env.NODE_ENV === "production" ? "" : ";label:InternalRangeSlider;")), children: [
a && /* @__PURE__ */ t(Oi, { className: "label", children: a }),
s && /* @__PURE__ */ t(Ri, { className: "description", children: s }),
/* @__PURE__ */ y(Ci, { ref: E, handleSize: h, className: `range-slider-inner ${_ ? "active" : ""}`, children: [
/* @__PURE__ */ t("input", { ...S, min: p, max: f, step: v, ref: C, type: "range", className: "range-slider-range", value: N, onInput: (D) => {
g(D.target.valueAsNumber), _ || x(!0);
}, onChange: (D) => {
typeof r == "function" && r(D.target.valueAsNumber, D), z(D);
} }),
!n && /* @__PURE__ */ t("div", { className: "tooltip-holder", style: {
position: "absolute",
top: 0,
left: h / 2,
right: h / 2
}, children: /* @__PURE__ */ t(Di, { size: l, ref: T }) })
] })
] });
}
function bt(e) {
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "RangeSlider"
}), children: /* @__PURE__ */ t(Ii, { ...e }) });
}
function Ai() {
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 = {
position: "relative",
display: "inline-flex",
overflow: "hidden"
}, zi = /* @__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: Ai
}), Vi = /* @__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;
`, ";"), ko = Ft(({
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: p,
...f
}) => {
const v = q(null), d = q(null), {
useStore: m
} = pe(), u = m((N) => N.windowContext) ?? window;
Y(() => () => {
d.current && clearTimeout(d.current);
}, []);
const S = M((N) => {
if (N.stopPropagation(), s) return;
d.current !== null && clearTimeout(d.current);
const {
pageX: g,
pageY: _,
currentTarget: x
} = N, C = x.getBoundingClientRect();
let E = 1;
typeof u < "u" && (E = u.scrollX);
let T = 1;
typeof u < "u" && (T = u.scrollY);
const j = g - (C.left + E), z = _ - (C.top + T), D = Math.max(C.width, C.height);
if (v.current) {
const I = {
left: isNaN(j) ? "0px" : `${j}px`,
top: isNaN(z) ? "0px" : `${z}px`,
opacity: 1,
transform: "translate(-50%, -50%)",
transition: "initial",
backgroundColor: r
};
Object.assign(v.current.style, I);
}
d.current = setTimeout(() => {
if (v.current) {
const I = {
opacity: 0,
transform: `scale(${D / 9})`,
transition: `all ${e}ms`
};
Object.assign(v.current.style, I);
}
d.current = null;
}, 50), typeof n == "function" && n(N);
}, [r, e, s, n, u]);
return /* @__PURE__ */ t(Vi, { borderRadius: o, id: p ?? "", className: `ripple-parent ${l ?? ""}`, css: /* @__PURE__ */ Re(h ?? "", ";"), style: {
...i ?? {}
}, children: /* @__PURE__ */ y("div", { className: "ripple-inner", onPointerDownCapture: (N) => {
c && N.stopPropagation();
}, ...f, style: {
width: "100%",
...Ti,
borderRadius: o
}, onClick: S, children: [
a,
/* @__PURE__ */ t(zi, { ref: v })
] }) });
});
ko.displayName = "_Ripples";
function $i(e) {
return /* @__PURE__ */ t(ne, { ...oe({
prefix: "Ripples"
}), children: /* @__PURE__ */ t(ko, { ...e }) });
}
function gr() {
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 Mi = /* @__PURE__ */ k(Ce, process.env.NODE_ENV === "production" ? {
target: "e17tod368"
} : {
target: "e17tod368",
label: "StyledTriggerCard"
})(), Pi = /* @__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;", ";"), ji = /* @__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;}"), Bi = /* @__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: gr
}), Fi = /* @__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;"), Li = /* @__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: gr
}), Rn = /* @__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: gr
}), Wi = /* @__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: gr
}), Hi = /* @__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 qi({
entity: e,
title: r,
description: o,
onClick: n,
disabled: a,
icon: s,
iconProps: c,
sliderIconProps: i,
sliderIcon: l,
sliderTextActive: h,
sliderTextInactive: p,
activeStateDuration: f = 5e3,
hideArrow: v = !1,
className: d,
service: m,
serviceData: b,
key: u,
cssStyles: S,
...N
}) {
const {
useStore: g
} = pe(), _ = g((P) => P.globalComponentStyles), x = tt(e), C = ue(e), E = Wt(e, c), T = Lt(x, c), j = q(null), [z, D] = Q(!1), I = Be(s ?? null, c), V = Be(l ?? null, i), w = Be("mdi:power", c), R = Be("mingcute:arrows-right-line", {
...c,
style: {
fontSize: "16px",
...c?.style
}
}), A = Ee(C.state), $ = a || A, O = M((P) => {
D(!0), typeof n == "function" && !A && n(C, P), j.current && clearTimeout(j.current), j.current = setTimeout(() => {
D(!1);
}, f);
}, [C, n, f, A]);
return /* @__PURE__ */ t(
Mi,
{
as: "button",
className: `${d ?? ""} trigger-card`,
disabled: $,
entity: e,
service: m,
serviceData: b,
onClick: O,
cssStyles: `
${_?.triggerCard ?? ""}
${S ?? ""}
`,
...N,
children: /* @__PURE__ */ y(Li, { children: [
/* @__PURE__ */ y(Rn, { className: "layout-between", children: [
/* @__PURE__ */ y(Hi, { disabled: $, className: "description", children: [
r || C.attributes.friendly_name || e,
o && /* @__PURE__ */ t("span", { children: o })
] }),
I ?? E ?? T
] }),
/* @__PURE__ */ t(Bi, { className: "gap" }),
/* @__PURE__ */ y(Rn, { className: "layout-between", children: [
/* @__PURE__ */ y(Wi, { className: "title", children: [
C.custom.relativeTime,
$ ? ` - ${C.state}` : ""
] }),
/* @__PURE__ */ t(Fi, { active: $ ? !1 : z, className: "toggle", children: $ ? null : /* @__PURE__ */ y(ae, { children: [
/* @__PURE__ */ t(ji, { active: z, className: "toggle-state", children: V ?? w }),
/* @__PURE__ */ y(Pi, { hideArrow: v, active: z, className: "toggle-message", children: [
z ? h ?? F("triggered_name", {
search: " {name}",
replace: ""
}) : p ?? `${F("run")} ${Hr(e, C?.attributes?.device_class)}`,
" ",
!z && !v && R
] })
] }) })
] })
] })
},
u
);
}
function lh(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(qi, { ...r, ...e }) });
}
function Yi() {
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 Ui = /* @__PURE__ */ k(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:padding,background-color;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"};
`)}
`, ";"), Gi = /* @__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: Yi
}), Qi = /* @__PURE__ */ k("div", process.env.NODE_ENV === "production" ? {
target: "e16eobz11"
} : {
target: "e16eobz11",
label: "Header"
})(), Xi = /* @__PURE__ */ k("h3", process.env.NODE_ENV === "production" ? {
target: "e16eobz10"
} : {
target: "e16eobz10",
label: "Title"
})();
function Ki({
title: e,
description: r,
children: o,
gap: n = "0.5rem",
justifyContent: a = "center",
alignItems: s = "center",
layout: c = "row",
collapsed: i = !1,
collapsible: l = !0,
className: h,
onClick: p,
...f
}) {
const [v, d] = Q(i), m