@hakit/components
Version:
A series of components to work with @hakit/core
124 lines (123 loc) • 3.39 kB
JavaScript
import { j as e } from "../../../emotion-react-jsx-runtime.browser.esm-Tq_btErF.js";
import { c as k } from "../../../emotion-styled-base.browser.esm-Dyg8Y4aq.js";
import { useCallback as L, useMemo as x } from "react";
import { useEntity as $, useHass as D, UNAVAILABLE as O, localize as d } from "@hakit/core";
import { ErrorBoundary as B } from "react-error-boundary";
import { f as N, F, B as R } from "../../../ThemeControlsModal-DWBaJmrH.js";
import { filterSupportedAlarmStates as j, DEFAULT_STATES as w, _getActionColor as I, ALARM_MODES as l, ALARM_MODE_STATE_MAP as u, _getActionLabel as P } from "../../Shared/Entity/Alarm/AlarmControls/shared.js";
import { snakeCase as U } from "lodash";
const V = /* @__PURE__ */ k(R, process.env.NODE_ENV === "production" ? {
target: "e1tay81o0"
} : {
target: "e1tay81o0",
label: "Wrapper"
})(), W = {
armed_home: "arm_home",
armed_away: "arm_away",
armed_night: "arm_night",
armed_vacation: "arm_vacation",
armed_custom_bypass: "custom_bypass",
disarmed: "disarm",
triggered: "pending",
pending: "pending",
arming: "pending"
};
function z({
entity: r,
cssStyles: o,
key: p,
className: A,
title: n,
states: f,
modalProps: s,
layoutType: g = "slim-vertical",
defaultCode: i,
children: _,
icon: b,
...y
}) {
const t = $(r), {
useStore: S
} = D(), v = S((a) => a.globalComponentStyles), C = L((a) => a === O ? d("unavailable") : d(W[a]), []), E = x(() => n ?? t.attributes.friendly_name, [n, t.attributes.friendly_name]), h = C(t.state), m = f || j(t, w), M = (a) => {
i && t.service[U(`alarm_${a}`)]({
serviceData: {
code: i.toString()
}
});
}, c = I(t.state, s?.customActionColor);
return /* @__PURE__ */ e(
V,
{
as: "div",
entity: r,
layoutType: g,
icon: b ?? (t.state in l ? l[t.state].icon : void 0),
title: n,
hideToggle: !0,
className: `alarm-card ${A ?? ""} ${t.state}`,
fabProps: {
style: {
backgroundColor: c,
color: "var(--ha-S500-contrast)"
// now set the hover/disabled states
}
},
cssStyles: `
.fab-card-inner.icon {
background-color: ${c};
color: var(--ha-S500-contrast);
}
&:not(.disabled),
&:not(:disabled) {
&:not(:focus):hover {
.fab-card-inner.icon {
background-color: ${c};
color: var(--ha-S500-contrast);
}
}
}
${v.alarmCard ?? ""}
${o ?? ""}
`,
features: i ? (t.state === "disarmed" ? m : ["disarm"]).map((a, T) => /* @__PURE__ */ e(
F,
{
entity: r,
onClick: () => {
M(a);
},
icon: a in u ? l[u[a]].icon : void 0,
children: P(a, s?.labelMap)
},
T
)) : [],
disableActiveState: !0,
modalProps: {
title: E,
stateTitle: h,
states: m,
...s
},
...y,
children: _
},
p
);
}
function Z(r) {
const o = {
xxs: 12,
xs: 6,
sm: 6,
md: 4,
lg: 4,
xlg: 3
};
return /* @__PURE__ */ e(B, { ...N({
prefix: "AlarmCard"
}), children: /* @__PURE__ */ e(z, { ...o, ...r }) });
}
export {
Z as AlarmCard
};
//# sourceMappingURL=index.js.map