@hakit/components
Version:
A series of components to work with @hakit/core
122 lines (121 loc) • 3.37 kB
JavaScript
import { j as e } from "../../../emotion-react-jsx-runtime.browser.esm-Tq_btErF.js";
import { c as T } from "../../../emotion-styled-base.browser.esm-Dyg8Y4aq.js";
import { useCallback as k, useMemo as L } from "react";
import { useEntity as x, useStore as $, UNAVAILABLE as D, localize as d } from "@hakit/core";
import { ErrorBoundary as O } from "react-error-boundary";
import { f as B, F as N, B as F } from "../../../ThemeControlsModal-SC28YaPX.js";
import { filterSupportedAlarmStates as R, DEFAULT_STATES as j, _getActionColor as w, ALARM_MODES as l, ALARM_MODE_STATE_MAP as u, _getActionLabel as I } from "../../Shared/Entity/Alarm/AlarmControls/shared.js";
import { snakeCase as P } from "lodash";
const U = /* @__PURE__ */ T(F, process.env.NODE_ENV === "production" ? {
target: "e1tay81o0"
} : {
target: "e1tay81o0",
label: "Wrapper"
})(), V = {
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 W({
entity: r,
cssStyles: o,
key: p,
className: A,
title: n,
states: f,
modalProps: i,
layoutType: g = "slim-vertical",
defaultCode: s,
children: _,
icon: b,
...y
}) {
const t = x(r), S = $((a) => a.globalComponentStyles), v = k((a) => a === D ? d("unavailable") : d(V[a]), []), C = L(() => n ?? t.attributes.friendly_name, [n, t.attributes.friendly_name]), E = v(t.state), m = f || R(t, j), h = (a) => {
s && t.service[P(`alarm_${a}`)]({
serviceData: {
code: s.toString()
}
});
}, c = w(t.state, i?.customActionColor);
return /* @__PURE__ */ e(
U,
{
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);
}
}
}
${S.alarmCard ?? ""}
${o ?? ""}
`,
features: s ? (t.state === "disarmed" ? m : ["disarm"]).map((a, M) => /* @__PURE__ */ e(
N,
{
entity: r,
onClick: () => {
h(a);
},
icon: a in u ? l[u[a]].icon : void 0,
children: I(a, i?.labelMap)
},
M
)) : [],
disableActiveState: !0,
modalProps: {
title: C,
stateTitle: E,
states: m,
...i
},
...y,
children: _
},
p
);
}
function Y(r) {
const o = {
xxs: 12,
xs: 6,
sm: 6,
md: 4,
lg: 4,
xlg: 3
};
return /* @__PURE__ */ e(O, { ...B({
prefix: "AlarmCard"
}), children: /* @__PURE__ */ e(W, { ...o, ...r }) });
}
export {
Y as AlarmCard
};
//# sourceMappingURL=index.js.map