@hortiview/shared-components 0.0.11528 → 0.0.11589

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -1,4 +1,4 @@
-import { ListItemProps } from '@element-public/react-components';
+import { ListItemProps } from '@element-public/react-list';
 
 type ContextMenuProps = {
     /**

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,54 +1,55 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Menu as u, List as f, ListItem as d, IconButton as _ } from "@element-public/react-components";
-import { useState as p, useCallback as c, useEffect as v } from "react";
-import { uniqueId as I } from "lodash";
-import '../../assets/ContextMenu.css';const y = "_menu_ol91v_1", C = "_icon_ol91v_5", k = "_listItem_ol91v_9", i = {
+import { jsx as n } from "react/jsx-runtime";
+import { I as u } from "../../index.es-0lQcz8m1.js";
+import { M as f, L as d, a as _ } from "../../index.es-d5xhUpJZ.js";
+import { useState as p, useCallback as a, useEffect as I } from "react";
+import { u as v } from "../../uniqueId-NU3-C36A.js";
+import '../../assets/ContextMenu.css';const y = "_menu_ol91v_1", C = "_icon_ol91v_5", k = "_listItem_ol91v_9", l = {
   menu: y,
   icon: C,
   listItem: k
 }, b = ({
-  triggerOpen: l = null,
+  triggerOpen: s = null,
   actions: m,
-  iconOrientation: r = "vertical"
+  iconOrientation: c = "vertical"
 }) => {
-  const [t, n] = p(!1), a = c(() => {
-    n(!t);
-  }, [t]), s = c(() => {
-    n(!1);
+  const [t, o] = p(!1), r = a(() => {
+    o(!t);
+  }, [t]), i = a(() => {
+    o(!1);
   }, []);
-  return v(() => {
-    n(l !== null ? l : !1);
-  }, [l]), /* @__PURE__ */ o(
-    u,
+  return I(() => {
+    o(s !== null ? s : !1);
+  }, [s]), /* @__PURE__ */ n(
+    f,
     {
-      className: i.menu,
+      className: l.menu,
       "data-testid": "selection-menu",
       open: t,
       surfaceOnly: !0,
       hoistToBody: !0,
-      onClose: s,
-      trigger: /* @__PURE__ */ o(
-        _,
+      onClose: i,
+      trigger: /* @__PURE__ */ n(
+        u,
         {
-          className: i.icon,
+          className: l.icon,
           variant: t ? "filled-primary" : void 0,
           "data-testid": "open-button",
-          icon: r === "vertical" ? "more_vert" : "more_horiz",
-          onClick: a
+          icon: c === "vertical" ? "more_vert" : "more_horiz",
+          onClick: r
         }
       ),
-      children: /* @__PURE__ */ o(f, { children: m.map((e) => /* @__PURE__ */ o(
-        d,
+      children: /* @__PURE__ */ n(d, { children: m.map((e) => /* @__PURE__ */ n(
+        _,
         {
-          className: i.listItem,
+          className: l.listItem,
           ...e,
           leadingBlockType: "icon",
           "data-testid": `list-item-button-${e.primaryText}`,
           onClick: () => {
-            e?.onClick?.(), e.closeOnClick !== !1 && s();
+            e?.onClick?.(), e.closeOnClick !== !1 && i();
           }
         },
-        I(`LI_${e.primaryText?.toString()}_`)
+        v(`LI_${e.primaryText?.toString()}_`)
       )) })
     },
     "selectionmenu"

package/dist/components/DeleteModal/DeleteModal.js

@@ -1,40 +1,43 @@
-import { jsx as o, jsxs as g, Fragment as c } from "react/jsx-runtime";
-import { Group as i, Button as u, Icon as I, TypoBody as l } from "@element-public/react-components";
-import { uniqueId as O } from "lodash";
+import { jsx as o, jsxs as p, Fragment as i } from "react/jsx-runtime";
+import { B as u } from "../../index.es-CiqbARoC.js";
+import { G as c } from "../../index.es-DntoATwO.js";
+import { I } from "../../index.es-3043KTnb.js";
+import { b as l } from "../../index.es-CF_xy2ns.js";
+import { u as O } from "../../uniqueId-NU3-C36A.js";
 import { AvailableCustomIcons as N } from "../../enums/AvailableCustomIcons.js";
 import { u as S } from "../../useBreakpoints-MzTZ0tCT.js";
 import { Iconify as x } from "../Iconify/Iconify.js";
-import { Modal as M } from "../Modal/Modal.js";
-import '../../assets/DeleteModal.css';const j = "_bulletPoint_1kyg0_1", z = "_modal_1kyg0_6", B = "_colorDanger_1kyg0_10", P = "_crossedOut_1kyg0_14", t = {
-  bulletPoint: j,
-  modal: z,
-  colorDanger: B,
+import { Modal as B } from "../Modal/Modal.js";
+import '../../assets/DeleteModal.css';const M = "_bulletPoint_1kyg0_1", j = "_modal_1kyg0_6", z = "_colorDanger_1kyg0_10", P = "_crossedOut_1kyg0_14", t = {
+  bulletPoint: M,
+  modal: j,
+  colorDanger: z,
   crossedOut: P
-}, R = ({
+}, W = ({
   title: r,
   confirmButtonLabel: e,
   cancelButtonLabel: n,
   deleteHeader: a,
   deleteBody: s,
-  deleteText: p,
-  icon: f,
-  isIconCrossedOut: h,
-  impossibleDeleteHeader: y,
-  open: b,
-  setOpen: d,
+  deleteText: f,
+  icon: g,
+  isIconCrossedOut: b,
+  impossibleDeleteHeader: h,
+  open: y,
+  setOpen: m,
   onDelete: k,
   onCancel: v,
-  isDeletePossible: m = !0
+  isDeletePossible: d = !0
 }) => {
   const { isDesktop: _ } = S(), C = (D) => {
-    D.detail.action === "close" && d(!1);
+    D.detail.action === "close" && m(!1);
   };
   return /* @__PURE__ */ o(
-    M,
+    B,
     {
       className: t.modal,
       modalSize: _ ? "small" : "fullscreen",
-      open: b,
+      open: y,
       onClose: C,
       title: r,
       primaryButton: /* @__PURE__ */ o(
@@ -44,7 +47,7 @@ import '../../assets/DeleteModal.css';const j = "_bulletPoint_1kyg0_1", z = "_mo
           variant: "danger",
           label: e,
           onClick: k,
-          disabled: !m
+          disabled: !d
         }
       ),
       footerSupplemental: /* @__PURE__ */ o(
@@ -54,42 +57,42 @@ import '../../assets/DeleteModal.css';const j = "_bulletPoint_1kyg0_1", z = "_mo
           variant: "text",
           label: n,
           onClick: () => {
-            v?.(), d(!1);
+            v?.(), m(!1);
           }
         }
       ),
-      children: /* @__PURE__ */ g(i, { direction: "vertical", secondaryAlign: "center", children: [
-        /* @__PURE__ */ o(A, { element: /* @__PURE__ */ o(q, { icon: f }), isCrossedOut: h }),
-        /* @__PURE__ */ o(i, { direction: "vertical", children: m ? /* @__PURE__ */ o(
-          F,
+      children: /* @__PURE__ */ p(c, { direction: "vertical", secondaryAlign: "center", children: [
+        /* @__PURE__ */ o(A, { element: /* @__PURE__ */ o(G, { icon: g }), isCrossedOut: b }),
+        /* @__PURE__ */ o(c, { direction: "vertical", children: d ? /* @__PURE__ */ o(
+          q,
           {
             deleteHeader: a,
-            deleteText: p,
+            deleteText: f,
             deleteBody: s
           }
-        ) : /* @__PURE__ */ o(G, { impossibleDeleteHeader: y }) })
+        ) : /* @__PURE__ */ o(F, { impossibleDeleteHeader: h }) })
       ] })
     }
   );
 }, A = ({
   element: r,
   isCrossedOut: e = !1
-}) => e ? /* @__PURE__ */ o("span", { className: t.crossedOut, children: r }) : r, q = ({ icon: r }) => r ? typeof r != "string" ? r : Object.values(N).includes(r) ? /* @__PURE__ */ o(
+}) => e ? /* @__PURE__ */ o("span", { className: t.crossedOut, children: r }) : r, G = ({ icon: r }) => r ? typeof r != "string" ? r : Object.values(N).includes(r) ? /* @__PURE__ */ o(
   x,
   {
     icon: r,
     iconSize: "xlarge",
     className: t.colorDanger
   }
-) : /* @__PURE__ */ o(I, { icon: r, iconSize: "xlarge", className: t.colorDanger }) : /* @__PURE__ */ o(c, {}), F = ({
+) : /* @__PURE__ */ o(I, { icon: r, iconSize: "xlarge", className: t.colorDanger }) : /* @__PURE__ */ o(i, {}), q = ({
   deleteHeader: r,
   deleteText: e,
   deleteBody: n
-}) => /* @__PURE__ */ g(c, { children: [
+}) => /* @__PURE__ */ p(i, { children: [
   /* @__PURE__ */ o(l, { level: 1, themeColor: "text-primary-on-background", children: r }),
   e && typeof e == "string" && /* @__PURE__ */ o(l, { level: 2, themeColor: "text-secondary-on-background", children: e }),
-  e && typeof e != "string" && /* @__PURE__ */ o(c, { children: e }),
-  n && e === void 0 && /* @__PURE__ */ o(i, { direction: "vertical", gap: "none", children: n.map((a, s) => /* @__PURE__ */ o(
+  e && typeof e != "string" && /* @__PURE__ */ o(i, { children: e }),
+  n && e === void 0 && /* @__PURE__ */ o(c, { direction: "vertical", gap: "none", children: n.map((a, s) => /* @__PURE__ */ o(
     l,
     {
       level: 2,
@@ -99,9 +102,9 @@ import '../../assets/DeleteModal.css';const j = "_bulletPoint_1kyg0_1", z = "_mo
     },
     O(s.toString())
   )) })
-] }), G = ({
+] }), F = ({
   impossibleDeleteHeader: r
 }) => /* @__PURE__ */ o(l, { level: 1, themeColor: "text-primary-on-background", children: r });
 export {
-  R as DeleteModal
+  W as DeleteModal
 };

package/dist/components/Disclaimer/Disclaimer.js

@@ -1,21 +1,23 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { Group as s, TypoSubtitle as t, TypoBody as m, Icon as d } from "@element-public/react-components";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { G as n } from "../../index.es-DntoATwO.js";
+import { I as m } from "../../index.es-3043KTnb.js";
+import { d as t, b as d } from "../../index.es-CF_xy2ns.js";
 import '../../assets/Disclaimer.css';const p = "_disclaimer_1k38t_1", y = "_iconArea_1k38t_7", c = {
   disclaimer: p,
   iconArea: y
-}, h = ({ text: l, subtext: r, icon: i, level: o = 2, bold: a = !1 }) => /* @__PURE__ */ n(
-  s,
+}, g = ({ text: o, subtext: i, icon: e, level: a = 2, bold: s = !1 }) => /* @__PURE__ */ l(
+  n,
   {
-    direction: i || r ? "vertical" : "horizontal",
+    direction: e || i ? "vertical" : "horizontal",
     secondaryAlign: "center",
     primaryAlign: "center",
     children: [
-      /* @__PURE__ */ e(t, { className: c.disclaimer, level: o, bold: a, children: l }),
-      r && /* @__PURE__ */ e(m, { level: 2, children: r }),
-      i && /* @__PURE__ */ e("div", { className: c.iconArea, children: /* @__PURE__ */ e(d, { className: c.Icon, icon: i, iconSize: "large" }) })
+      /* @__PURE__ */ r(t, { className: c.disclaimer, level: a, bold: s, children: o }),
+      i && /* @__PURE__ */ r(d, { level: 2, children: i }),
+      e && /* @__PURE__ */ r("div", { className: c.iconArea, children: /* @__PURE__ */ r(m, { className: c.Icon, icon: e, iconSize: "large" }) })
     ]
   }
 );
 export {
-  h as Disclaimer
+  g as Disclaimer
 };

package/dist/components/EmptyView/EmptyView.js

@@ -1,32 +1,271 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Hero as d, HeroContent as h, Icon as s, TypoBody as i, Group as m } from "@element-public/react-components";
-const u = ({
-  title: r = "",
+import { jsx as m, jsxs as $ } from "react/jsx-runtime";
+import { G as _ } from "../../index.es-DntoATwO.js";
+import { c as P, _ as C, P as e } from "../../identity-DLWZln-X.js";
+import c, { forwardRef as T, useRef as H, useImperativeHandle as w, useMemo as y } from "react";
+import { e as N, b as O } from "../../index.es-CF_xy2ns.js";
+import { I as B } from "../../index.es-3043KTnb.js";
+const j = {
+  /**
+   * Aligns the Hero contents.
+   *
+   * Defaults to **'centered'**.
+   */
+  alignment: e.oneOf(["center-bottom", "center-top", "centered", "left-bottom", "left-center", "left-top", "right-bottom", "right-center", "right-top"]),
+  /**
+   * Content to be rendered inside the Hero.
+   *
+   * Defaults to **null**.
+   */
+  children: e.node,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: e.string,
+  /**
+   * Image Url for Hero background image
+   *
+   * Defaults to **null**.
+   */
+  imageUrl: e.string,
+  /**
+   * Adds an overlay over the Hero. Use `overlayProps` to send props to the Hero Overlay component.  See Hero Overlay for prop details.
+   *
+   * Defaults to **false**.
+   */
+  overlay: e.bool,
+  /**
+   * Props sent to Hero Overlay. See Hero Overlay for prop details.
+   *
+   * Defaults to **{}**.
+   */
+  overlayProps: e.object,
+  /**
+   * Override the default background color. Can only be used if background image is omitted.
+   *
+   * Defaults to **empty string**.
+   */
+  themeColor: e.oneOf(["", "surface", "primary", "secondary"])
+}, A = {
+  alignment: "centered",
+  children: null,
+  className: void 0,
+  imageUrl: null,
+  overlay: !1,
+  overlayProps: {},
+  themeColor: ""
+}, I = {
+  /**
+   * Content to be rendered inside the Hero Content.  Will take precedence over props.
+   *
+   * Defaults to **null**.
+   */
+  children: e.node,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: e.string,
+  /**
+   * Button to be rendered inside the Hero Content.
+   *
+   * Defaults to **null**.
+   */
+  heroBtn: e.node,
+  /**
+   * Logo to be rendered inside the Hero Content.
+   *
+   * Defaults to **null**.
+   */
+  logo: e.node,
+  /**
+   * Overline text for the Hero Content. Cannot be used with children.
+   *
+   * Defaults to **'Overline'**.
+   */
+  overline: e.string,
+  /**
+   * Adds a padding style to the Hero. Must be a valid CSS padding declaration. i.e. 38px 30px
+   *
+   * Defaults to **null**.
+   */
+  padding: e.string,
+  /**
+   * Passthrough style object.
+   *
+   * Defaults to **null**.
+   */
+  style: e.object,
+  /**
+   * Subtitle text for the Hero Content. Cannot be used with children.
+   *
+   * Defaults to **'Subtitle'**.
+   */
+  subtitle: e.string,
+  /**
+   * Set the color of the text.  Make sure to check for accessibility compliance.
+   *
+   * Defaults to **'on-unknown-black-active'**.
+   */
+  textColor: e.oneOf(["on-unknown-black-active", "on-unknown-white-active", "primary", "secondary", "on-primary", "on-secondary"]),
+  /**
+   * Title text for the Hero Content. Cannot be used with children.
+   *
+   * Defaults to **'Title'**.
+   */
+  title: e.string
+}, D = {
+  children: null,
+  className: void 0,
+  heroBtn: null,
+  logo: null,
+  overline: "Overline",
+  padding: null,
+  style: null,
+  subtitle: "Subtitle",
+  textColor: "on-unknown-black-active",
+  title: "Title"
+}, R = {
+  /**
+   * Content to be rendered inside the Hero Overlay.  Useful for angles or other non semantic elements displayed in the Hero.
+   *
+   * Defaults to **null**.
+   */
+  children: e.node,
+  /**
+   * The css class name to be passed through to the component markup.
+   *
+   * Defaults to **undefined**.
+   */
+  className: e.string,
+  /**
+   * Overlay theme color.
+   *
+   * Defaults to **'dark'**.
+   */
+  overlayThemeColor: e.oneOf(["dark", "light", "surface", "linear-gradient-white-to-bottom", "linear-gradient-white-to-top", "linear-gradient-black-to-bottom", "linear-gradient-black-to-top", "linear-gradient-primary-dark-to-bottom", "linear-gradient-primary-dark-to-top", "linear-gradient-primary-darker-to-bottom", "linear-gradient-primary-darker-to-top", "linear-gradient-primary-to-bottom", "linear-gradient-primary-to-top", "linear-gradient-secondary-dark-to-bottom", "linear-gradient-secondary-dark-to-top", "linear-gradient-secondary-darker-to-bottom", "linear-gradient-secondary-darker-to-top", "linear-gradient-secondary-to-bottom", "linear-gradient-secondary-to-top"]),
+  /**
+   * Position of the Overlay. Use `overlayThemeColor` to change the theme color. If set to leading or trailing be sure to set `alignment` on Hero accordingly to have Hero Content over the overlay.
+   *
+   * Defaults to **'full'**.
+   */
+  position: e.oneOf(["full", "leading", "trailing"])
+}, U = {
+  children: null,
+  className: void 0,
+  overlayThemeColor: "dark",
+  position: "full"
+}, f = /* @__PURE__ */ T((t, o) => {
+  const {
+    children: l,
+    className: a,
+    position: n,
+    overlayThemeColor: r,
+    ...i
+  } = t, s = H();
+  w(o, () => s.current, []);
+  const d = y(() => n !== "none" && P("lmnt", "lmnt-hero-overlay ", !r.includes("gradient") && r !== "surface" && `lmnt-hero-overlay__${r}`, r.includes("gradient") && r !== "surface" && `lmnt-theme--bg-${r}`, r === "surface" && "lmnt-theme-surface-bg", `lmnt-hero-overlay__${n}`, a), [r, n, a]);
+  return /* @__PURE__ */ c.createElement("div", C({
+    className: d
+  }, i), l && l);
+});
+f.displayName = "HeroOverlay";
+f.propTypes = R;
+f.defaultProps = U;
+const v = /* @__PURE__ */ T((t, o) => {
+  const {
+    alignment: l,
+    children: a,
+    className: n,
+    imageUrl: r,
+    style: i,
+    themeColor: s,
+    overlay: d,
+    overlayProps: g,
+    ...u
+  } = t, p = H();
+  w(o, () => p.current, []);
+  const k = y(() => P("lmnt lmnt-hero", s && `lmnt-theme-${s}-bg`, `lmnt-hero__align-${l}`, n), [l, n, s]), h = y(() => r ? {
+    ...i,
+    backgroundImage: `url(${r})`
+  } : i, [r, i]);
+  return /* @__PURE__ */ c.createElement("div", C({
+    ref: p,
+    className: k,
+    style: h
+  }, u), d && /* @__PURE__ */ c.createElement(f, g), a);
+});
+v.displayName = "Hero";
+v.propTypes = j;
+v.defaultProps = A;
+const b = /* @__PURE__ */ T((t, o) => {
+  const {
+    children: l,
+    className: a,
+    heroBtn: n,
+    logo: r,
+    overline: i,
+    padding: s,
+    title: d,
+    style: g,
+    subtitle: u,
+    textColor: p,
+    ...k
+  } = t, h = H(), E = y(() => P("lmnt lmnt-hero-content", `lmnt-theme-${p}`, a), [a, p]);
+  w(o, () => h.current, []);
+  const x = y(() => ({
+    ...g,
+    padding: s
+  }), [s, g]);
+  return /* @__PURE__ */ c.createElement("div", C({
+    ref: h,
+    className: E
+  }, k, {
+    style: x
+  }), l || /* @__PURE__ */ c.createElement(_, {
+    gap: "dense",
+    direction: "vertical",
+    secondaryAlign: "center"
+  }, r && r, i && /* @__PURE__ */ c.createElement(N, {
+    type: "overline"
+  }, i), d && /* @__PURE__ */ c.createElement(N, {
+    type: "display2"
+  }, d), u && /* @__PURE__ */ c.createElement(N, {
+    type: "display6"
+  }, u), n && n));
+});
+b.displayName = "HeroContent";
+b.propTypes = I;
+b.defaultProps = D;
+const F = ({
+  title: t = "",
   subtitle: o = "",
-  icon: n = "dashbord",
-  text: t = "",
-  action: l
-}) => /* @__PURE__ */ e(
-  d,
+  icon: l = "dashbord",
+  text: a = "",
+  action: n
+}) => /* @__PURE__ */ m(
+  v,
   {
     "data-testid": "empty-view-container",
     style: { width: "100%", height: "25vh" },
     themeColor: "surface",
-    children: /* @__PURE__ */ e(
-      h,
+    children: /* @__PURE__ */ m(
+      b,
       {
-        logo: /* @__PURE__ */ e(s, { iconSize: "large", icon: n }),
+        logo: /* @__PURE__ */ m(B, { iconSize: "large", icon: l }),
         overline: "",
         subtitle: o,
-        title: r,
-        heroBtn: /* @__PURE__ */ e(p, { action: l, text: t })
+        title: t,
+        heroBtn: /* @__PURE__ */ m(G, { action: n, text: a })
       }
     )
   }
-), p = ({ action: r, text: o }) => o ? r ? /* @__PURE__ */ c(m, { direction: "vertical", primaryAlign: "center", secondaryAlign: "center", children: [
-  /* @__PURE__ */ e(i, { level: 2, children: o }),
-  r
-] }) : /* @__PURE__ */ e(i, { level: 2, children: o }) : r;
+), G = ({ action: t, text: o }) => o ? t ? /* @__PURE__ */ $(_, { direction: "vertical", primaryAlign: "center", secondaryAlign: "center", children: [
+  /* @__PURE__ */ m(O, { level: 2, children: o }),
+  t
+] }) : /* @__PURE__ */ m(O, { level: 2, children: o }) : t;
 export {
-  u as EmptyView
+  F as EmptyView
 };