@hakit/components/dist/es/Cards/AlarmCard/index.js

A series of components to work with @hakit/core

import { j as e } from "../../../emotion-react-jsx-runtime.browser.esm-BErL7L7Y.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, useHass as $, localize as d, UNAVAILABLE 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-gl0xLRqL.js";
import { filterSupportedAlarmStates as R, DEFAULT_STATES as j, _getActionColor as w, ALARM_MODES as l, _getActionLabel as I, ALARM_MODE_STATE_MAP as p } 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: "armed",
  armed_away: "arm_away",
  armed_night: "arm_night",
  armed_vacation: "arm_vacation",
  armed_custom_bypass: "custom_bypass",
  disarmed: "disarmed",
  disarm: "disarm",
  triggered: "pending",
  pending: "pending",
  arming: "pending"
};
function W({
  entity: t,
  cssStyles: o,
  key: u,
  className: A,
  title: n,
  states: g,
  modalProps: i,
  layoutType: b = "slim-vertical",
  defaultCode: s,
  children: _,
  icon: f,
  ...y
}) {
  const r = x(t), S = $((a) => a.globalComponentStyles), v = k((a) => a === D ? d("unavailable") : d(V[a]), []), C = L(() => n ?? r.attributes.friendly_name, [n, r.attributes.friendly_name]), E = v(r.state), m = g || R(r, j), h = (a) => {
    s && r.service[P(`alarm_${a}`)]({
      serviceData: {
        code: s.toString()
      }
    });
  }, c = w(r.state, i?.customActionColor);
  return /* @__PURE__ */ e(
    U,
    {
      as: "div",
      entity: t,
      layoutType: b,
      icon: f ?? (r.state in l ? l[r.state].icon : void 0),
      title: n,
      hideToggle: !0,
      className: `alarm-card ${A ?? ""} ${r.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 ? (r.state === "disarmed" ? m : ["disarm"]).map((a, M) => /* @__PURE__ */ e(
        N,
        {
          entity: t,
          onClick: () => {
            h(a);
          },
          icon: a in p ? l[p[a]].icon : void 0,
          children: I(a, i?.labelMap)
        },
        M
      )) : [],
      disableActiveState: !0,
      modalProps: {
        title: C,
        stateTitle: E,
        states: m,
        ...i
      },
      ...y,
      children: _
    },
    u
  );
}
function Y(t) {
  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, ...t }) });
}
export {
  Y as AlarmCard
};
//# sourceMappingURL=index.js.map