@hortiview/shared-components 0.0.4723 → 0.0.4730

package/dist/components/BaseView/BaseView.js

@@ -1,317 +1,63 @@
-import { jsx as p, Fragment as $, jsxs as G } from "react/jsx-runtime";
-import b, { forwardRef as P, useMemo as f, useRef as H, useImperativeHandle as O, useContext as B, createContext as E } from "react";
-import { EmptyView as D } from "../EmptyView/EmptyView.js";
-import { ListArea as z } from "../ListArea/ListArea.js";
-import { VerticalDivider as M } from "../VerticalDivider/VerticalDivider.js";
-import { s as S } from "../../baseView.module-DXWalo9p.js";
+import { jsx as i, Fragment as x, jsxs as e } from "react/jsx-runtime";
+import { useMemo as n } from "react";
+import { EmptyView as k } from "../EmptyView/EmptyView.js";
+import { ListArea as A } from "../ListArea/ListArea.js";
+import { VerticalDivider as H } from "../VerticalDivider/VerticalDivider.js";
+import { s as L } from "../../baseView.module-DXWalo9p.js";
 import { u as V } from "../../useBreakpoint-DyAmuka7.js";
-import { BasicHeading as T } from "../BasicHeading/BasicHeading.js";
-import { d as j, P as e, c as x, _ as A } from "../../index.es-Cct4Uapb.js";
-import { G as k } from "../../index.es-CNBieliG.js";
-const R = /* @__PURE__ */ E({}), I = {
-  /**
-   * @deprecated _Use `variant`='airy' instead._
-   *
-   * Applies extra padding to each column.
-   *
-   * Defaults to **undefined**.
-   */
-  airy: j(e.bool, "Grid", 'Use `variant`="airy" instead.'),
-  /**
-   * Accepts GridCol or GridRow.
-   *
-   * Defaults to **null**.
-   */
-  children: e.node.isRequired,
-  /**
-   * The css class name to be passed through to the component markup.
-   *
-   * Defaults to **undefined**.
-   */
-  className: e.string,
-  /**
-   * Sets the column gap for the grid.
-   *
-   * Defaults to **'16px'**.
-   */
-  columnGap: e.oneOfType([e.string, e.number]),
-  /**
-   * Applies 100% height to the grid and direct children rows. Useful when creating a page layout. Be aware all direct children rows will have a 100% height.
-   *
-   * Defaults to **null**.
-   */
-  fullHeight: e.bool,
-  /**
-   * Applies 100% width to the grid and direct children rows. Useful to maintain full width in a flex container.
-   *
-   * Defaults to **null**.
-   */
-  fullWidth: e.bool,
-  /**
-   * Alignment of entire grid: left and right.
-   *
-   * Defaults to **'center'**.
-   */
-  gridAlign: e.oneOf(["center", "left", "right"]),
-  /**
-   * Sets the row gap for the grid.
-   *
-   * Defaults to **'16px'**.
-   */
-  rowGap: e.oneOfType([e.string, e.number]),
-  /**
-   * Styles for the grid.
-   *
-   * Defaults to **undefined**.
-   */
-  style: e.object,
-  /**
-   * If true the grid will have a max width according to your theme's breakpoints.
-   *
-   * Defaults to **false**.
-   */
-  useMaxWidth: e.bool,
-  /**
-   * Select `airy` or `standard` padding.
-   *
-   * Defaults to **'standard'**.
-   */
-  variant: e.oneOf(["standard", "airy", "none"])
-}, L = {
-  airy: void 0,
-  children: null,
-  className: void 0,
-  columnGap: "16px",
-  fullHeight: null,
-  fullWidth: null,
-  gridAlign: "center",
-  rowGap: "16px",
-  style: void 0,
-  useMaxWidth: !1,
-  variant: "standard"
-}, q = {
-  /**
-   * Alignment of cell within the row: top, middle, bottom. If omitted the col will stretch to the height of the row.
-   *
-   * Defaults to **undefined**.
-   */
-  align: e.oneOf(["", "top", "middle", "bottom"]),
-  /**
-   * Content to be rendered inside the GridCol. Accepts any valid markup.
-   *
-   * Defaults to **null**.
-   */
-  children: e.node,
-  /**
-   * The css class name to be passed through to the component markup.
-   *
-   * Defaults to **undefined**.
-   */
-  className: e.string,
-  /**
-   * Specifies the number of columns the cell spans.
-   *
-   * Defaults to **null**.
-   */
-  desktopCol: e.number,
-  /**
-   * Specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. Set to any valid `grid-column-start`.
-   *
-   * Defaults to **null**.
-   */
-  gridColStart: e.oneOfType([e.string, e.number]),
-  /**
-   * Horizontal alignment of the cell contents of cell content: top, middle, bottom.
-   *
-   * Defaults to **'left'**.
-   */
-  horizontalAlign: e.oneOf(["left", "center", "right"]),
-  /**
-   * Specifies the order of the cell.
-   *
-   * Defaults to **null**.
-   */
-  order: e.number,
-  /**
-   * Specifies the number of columns the cell spans on a phone.
-   *
-   * Defaults to **null**.
-   */
-  phoneCol: e.number,
-  /**
-   * Specifies the number of columns the cell spans on a tablet.
-   *
-   * Defaults to **null**.
-   */
-  tabletCol: e.number,
-  /**
-   * Vertical alignment of cell content: top, middle, bottom.
-   *
-   * Defaults to **'top'**.
-   */
-  verticalAlign: e.oneOf(["top", "middle", "bottom"])
-}, F = {
-  align: void 0,
-  children: null,
-  className: void 0,
-  desktopCol: null,
-  gridColStart: null,
-  horizontalAlign: "left",
-  order: null,
-  phoneCol: null,
-  tabletCol: null,
-  verticalAlign: "top"
-}, U = {
-  /**
-   * Content to be rendered inside the GridRow. Accepts any valid markup.
-   *
-   * Defaults to **null**.
-   */
-  children: e.node.isRequired,
-  /**
-   * The css class name to be passed through to the component markup.
-   *
-   * Defaults to **undefined**.
-   */
-  className: e.string
-}, J = {
-  children: null,
-  className: void 0
-}, w = /* @__PURE__ */ P((c, u) => {
-  const {
-    airy: o,
-    children: m,
-    className: d,
-    columnGap: n,
-    fullHeight: t,
-    fullWidth: a,
-    gridAlign: s,
-    rowGap: i,
-    style: h,
-    useMaxWidth: g,
-    variant: r,
-    ...l
-  } = c, y = o ? "airy" : r, _ = f(() => ({
-    fullHeight: t,
-    rowGap: i,
-    columnGap: n
-  }), [n, t, i]), v = H();
-  O(u, () => v.current, []);
-  const W = f(() => x("lmnt", "mdc-layout-grid", "lmnt-layout-grid", `mdc-layout-grid mdc-layout-grid--align-${s}`, (y === "airy" || o) && "mdc-grid-cell-wrapper-airy-tablet mdc-grid-cell-wrapper-airy-desktop", r === "none" && "mdc-grid-cell-wrapper-none-tablet mdc-grid-cell-wrapper-none-desktop mdc-grid-cell-wrapper-none-phone ", a && "lmnt-layout-grid--full-width", t && "lmnt-layout-grid--full-height", g && "lmnt-layout-grid--with-max-width", d), [o, d, y, t, a, s, g, r]);
-  return /* @__PURE__ */ b.createElement(R.Provider, {
-    value: _
-  }, /* @__PURE__ */ b.createElement("div", A({
-    ref: v,
-    className: W
-  }, l), m));
-});
-w.displayName = "Grid";
-w.propTypes = I;
-w.defaultProps = L;
-const C = /* @__PURE__ */ P((c, u) => {
-  const {
-    align: o,
-    children: m,
-    className: d,
-    columns: n,
-    desktopCol: t,
-    gridColStart: a,
-    horizontalAlign: s,
-    order: i,
-    phoneCol: h,
-    style: g,
-    tabletCol: r,
-    verticalAlign: l,
-    ...y
-  } = c, _ = f(() => ({
-    ...g,
-    gridColumnStart: a
-  }), [a, g]);
-  return /* @__PURE__ */ b.createElement("div", A({
-    ref: u,
-    style: _,
-    className: x("lmnt", `lmnt-layout-grid__cell--vertical-align-${l}`, `lmnt-layout-grid__cell--horizontal-align-${s}`, "mdc-layout-grid__cell", !n && !h && !r && !t && ["mdc-layout-grid__cell"], i && `mdc-layout-grid__cell--order-${i}`, o && `mdc-layout-grid__cell--align-${o}`, n && [`mdc-layout-grid__cell--span-${n}`], h && [`mdc-layout-grid__cell--span-${h}-phone`], r && [`mdc-layout-grid__cell--span-${r}-tablet`], t && [`mdc-layout-grid__cell--span-${t}-desktop`], "lmnt-layout-grid__cell", d)
-  }, y), m);
-});
-C.displayName = "GridCol";
-C.propTypes = q;
-C.defaultProps = F;
-const N = /* @__PURE__ */ P((c, u) => {
-  const {
-    children: o,
-    className: m,
-    style: d,
-    ...n
-  } = c, {
-    fullHeight: t,
-    rowGap: a,
-    columnGap: s
-  } = B(R), i = f(() => ({
-    ...d,
-    height: t ? "100%" : "",
-    rowGap: a,
-    columnGap: s
-  }), [d, t, a, s]);
-  return /* @__PURE__ */ b.createElement("div", A({
-    ref: u,
-    className: x("lmnt", "mdc-layout-grid__inner", "lmnt-layout-grid__inner", m),
-    style: i
-  }, n), o);
-});
-N.displayName = "GridRow";
-N.propTypes = U;
-N.defaultProps = J;
-const ie = ({
+import { Grid as W, GridRow as j, GridCol as m, Group as u } from "@element/react-components";
+import { BasicHeading as a } from "../BasicHeading/BasicHeading.js";
+const z = ({
   action: c,
-  heading: u,
+  heading: d,
   elements: o,
-  emptyText: m,
-  hasSearch: d = !0,
-  isSorted: n = !0,
-  className: t,
-  withAvatar: a = !1,
-  listMaxHeight: s = "calc(100vh - 200px)",
-  pathname: i,
-  routerLinkElement: h,
-  searchPlaceholder: g
+  emptyText: s,
+  hasSearch: h = !0,
+  isSorted: p = !0,
+  className: f,
+  withAvatar: v = !1,
+  listMaxHeight: g = "calc(100vh - 200px)",
+  pathname: l,
+  routerLinkElement: C,
+  searchPlaceholder: B
 }) => {
-  const { isLg: r } = V(), l = f(() => o.find((v) => v.route === i), [i, o]), y = f(() => l?.component ?? (r ? /* @__PURE__ */ p(D, { subtitle: m }) : /* @__PURE__ */ p($, {})), [l, r, m]), _ = f(() => r ? !0 : !l, [l, r]);
-  return /* @__PURE__ */ p(w, { className: t ?? "", fullHeight: !0, fullWidth: !0, columnGap: 0, children: /* @__PURE__ */ G(N, { children: [
-    _ && /* @__PURE__ */ G(C, { desktopCol: 4, tabletCol: 12, phoneCol: 12, children: [
-      /* @__PURE__ */ G(k, { direction: "vertical", fullWidth: !0, children: [
-        u && /* @__PURE__ */ p(T, { heading: u, level: 4, marginBottom: 0, children: c }),
-        /* @__PURE__ */ p(
-          z,
+  const { isLg: r } = V(), t = n(() => o.find((w) => w.route === l), [l, o]), G = n(() => t?.component ?? (r ? /* @__PURE__ */ i(k, { subtitle: s }) : /* @__PURE__ */ i(x, {})), [t, r, s]), b = n(() => r ? !0 : !t, [t, r]);
+  return /* @__PURE__ */ i(W, { className: f ?? "", fullHeight: !0, fullWidth: !0, columnGap: 0, children: /* @__PURE__ */ e(j, { children: [
+    b && /* @__PURE__ */ e(m, { desktopCol: 4, tabletCol: 12, phoneCol: 12, children: [
+      /* @__PURE__ */ e(u, { direction: "vertical", fullWidth: !0, children: [
+        d && /* @__PURE__ */ i(a, { heading: d, level: 4, marginBottom: 0, children: c }),
+        /* @__PURE__ */ i(
+          A,
           {
             elements: o,
-            hasSearch: d,
-            maxHeight: s,
-            isSorted: n,
-            pathname: i,
-            routerLinkElement: h,
-            searchPlaceholder: g
+            hasSearch: h,
+            maxHeight: g,
+            isSorted: p,
+            pathname: l,
+            routerLinkElement: C,
+            searchPlaceholder: B
           }
         )
       ] }),
-      r && /* @__PURE__ */ p(M, { className: S.divider, height: "100%" })
+      r && /* @__PURE__ */ i(H, { className: L.divider, height: "100%" })
     ] }),
-    /* @__PURE__ */ p(C, { desktopCol: 8, tabletCol: 12, phoneCol: 12, children: /* @__PURE__ */ G(k, { direction: "vertical", fullWidth: !0, children: [
-      /* @__PURE__ */ p(
-        T,
+    /* @__PURE__ */ i(m, { desktopCol: 8, tabletCol: 12, phoneCol: 12, children: /* @__PURE__ */ e(u, { direction: "vertical", fullWidth: !0, children: [
+      /* @__PURE__ */ i(
+        a,
         {
-          heading: l?.detailTitle ?? l?.title ?? "",
+          heading: t?.detailTitle ?? t?.title ?? "",
           level: 4,
-          icon: l?.hideIconInDetail === !0 ? void 0 : l?.icon,
+          icon: t?.hideIconInDetail === !0 ? void 0 : t?.icon,
           marginBottom: 0,
-          invisibleButton: l?.detailAction === void 0,
-          withAvatar: a,
-          children: l?.detailAction ?? c
+          invisibleButton: t?.detailAction === void 0,
+          withAvatar: v,
+          children: t?.detailAction ?? c
         }
       ),
-      y
+      G
     ] }) })
   ] }) });
 };
 export {
-  ie as BaseView
+  z as BaseView
 };

package/dist/components/BasicHeading/BasicHeading.js

@@ -1,32 +1,31 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { u as v } from "../../useBreakpoint-DyAmuka7.js";
-import { Iconify as N } from "../Iconify/Iconify.js";
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { TypoDisplay as v, TypoBody as N, Icon as I } from "@element/react-components";
+import { u as B } from "../../useBreakpoint-DyAmuka7.js";
+import { Iconify as C } from "../Iconify/Iconify.js";
 import { s as e } from "../../basicHeading.module-ClcvD7x2.js";
-import { AvailableCustomIcons as I } from "../../enums/AvailableCustomIcons.js";
-import { c as B, b as C } from "../../index.es-Cm4X20_S.js";
-import { I as $ } from "../../index.es-InSNsV4f.js";
-const b = ({ icon: a }) => a ? typeof a != "string" ? /* @__PURE__ */ i("div", { className: e.iconContainer, children: a }) : a in I ? /* @__PURE__ */ i(
-  N,
+import { AvailableCustomIcons as $ } from "../../enums/AvailableCustomIcons.js";
+const x = ({ icon: i }) => i ? typeof i != "string" ? /* @__PURE__ */ a("div", { className: e.iconContainer, children: i }) : i in $ ? /* @__PURE__ */ a(
+  C,
   {
-    icon: a,
+    icon: i,
     className: e.leadingIcon,
     iconSize: "large",
     iconType: "filled"
   }
-) : /* @__PURE__ */ i($, { iconSize: "large", iconType: "filled", icon: a, className: e.leadingIcon }) : null, S = ({
-  children: a,
+) : /* @__PURE__ */ a(I, { iconSize: "large", iconType: "filled", icon: i, className: e.leadingIcon }) : null, L = ({
+  children: i,
   marginBottom: t,
-  heading: c,
-  icon: d,
+  heading: d,
+  icon: c,
   className: m,
-  subHeading: s,
+  subHeading: n,
   subHeadingLevel: p = 2,
   invisibleButton: f = !1,
-  level: n = 4,
+  level: s = 4,
   fontWeight: o = 400,
   withAvatar: y = !1
 }) => {
-  const { isLg: l } = v(), g = l ? n : n + 1, h = o === "bold" ? 500 : o, u = () => {
+  const { isLg: l } = B(), g = l ? s : s + 1, h = o === "bold" ? 500 : o, u = () => {
     if (t !== void 0)
       return typeof t == "number" ? `${t}px` : "2rem";
   };
@@ -38,27 +37,27 @@ const b = ({ icon: a }) => a ? typeof a != "string" ? /* @__PURE__ */ i("div", {
       "data-testid": "HeaderContainer",
       children: [
         /* @__PURE__ */ r("div", { className: `${y && l ? e.withAvatar : ""} ${e.headingWrapper}`, children: [
-          /* @__PURE__ */ i(b, { icon: d }),
-          /* @__PURE__ */ r("div", { className: s ? e.headingContainer : "", children: [
-            /* @__PURE__ */ i(
-              B,
+          /* @__PURE__ */ a(x, { icon: c }),
+          /* @__PURE__ */ r("div", { className: n ? e.headingContainer : "", children: [
+            /* @__PURE__ */ a(
+              v,
               {
                 level: g,
                 "data-testid": "Header",
                 className: m ?? "",
                 style: { fontWeight: h },
-                children: c
+                children: d
               }
             ),
-            /* @__PURE__ */ i(C, { level: p, children: s })
+            /* @__PURE__ */ a(N, { level: p, children: n })
           ] })
         ] }),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ a(
           "div",
           {
             className: `${e.actionButtonContainer} ${f && e.invisible}`,
             "data-testid": "RightPart",
-            children: a
+            children: i
           }
         )
       ]
@@ -66,5 +65,5 @@ const b = ({ icon: a }) => a ? typeof a != "string" ? /* @__PURE__ */ i("div", {
   );
 };
 export {
-  S as BasicHeading
+  L as BasicHeading
 };

package/dist/components/BasicHeading/BasicHeading.test.js

@@ -1,9 +1,9 @@
 import { jsx as o, Fragment as c } from "react/jsx-runtime";
+import { Button as g } from "@element/react-components";
 import { BasicHeading as a } from "./BasicHeading.js";
 import { r as i, s as n } from "../../react.esm-BeDwcQWb.js";
-import { d as g, t as s, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
-import { B as h } from "../../index.es-CQ3ep412.js";
-g("BasicHeading-Test", () => {
+import { d as h, t as s, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
+h("BasicHeading-Test", () => {
   s("render small container without content", () => {
     i(/* @__PURE__ */ o(a, { heading: "Test" }));
     const t = n.getByTestId("HeaderContainer");
@@ -14,7 +14,7 @@ g("BasicHeading-Test", () => {
     e(d).toBeDefined();
   }), s("render large container with children", () => {
     i(
-      /* @__PURE__ */ o(a, { heading: "Test", marginBottom: "large", children: /* @__PURE__ */ o(h, { children: "Extracontent" }) })
+      /* @__PURE__ */ o(a, { heading: "Test", marginBottom: "large", children: /* @__PURE__ */ o(g, { children: "Extracontent" }) })
     );
     const t = n.getByTestId("HeaderContainer");
     e(t).toBeDefined();

package/dist/components/BlockView/BlockView.js

@@ -1,8 +1,8 @@
 import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { useState as B, useEffect as C, useMemo as A } from "react";
+import { TypoSubtitle as B, TypoDisplay as C } from "@element/react-components";
+import { useState as A, useEffect as D, useMemo as E } from "react";
 import { s as e } from "../../BlockView.module-8kbPxxc4.js";
-import { getBlockNumberByDto as D } from "../../services/BlockService.js";
-import { a as E, c as S } from "../../index.es-Cm4X20_S.js";
+import { getBlockNumberByDto as S } from "../../services/BlockService.js";
 const R = ({
   rows: s,
   columns: t,
@@ -17,28 +17,28 @@ const R = ({
   blockViewTitle: v,
   blockLabel: $
 }) => {
-  const [p, h] = B(0);
-  C(() => {
+  const [p, h] = A(0);
+  D(() => {
     if (!c)
       return;
-    const o = D(c, t);
+    const o = S(c, t);
     h(o);
   }, [c, t]);
-  const g = A(() => s * t, [s, t]), w = (o) => {
+  const g = E(() => s * t, [s, t]), w = (o) => {
     u && u(o, c ?? void 0);
-  }, x = ({ row: o, column: l }) => b.length === 0 ? !0 : b.some((a) => a.position?.row === o && a.position?.column === l);
+  }, x = ({ row: o, column: l }) => b.length === 0 ? !0 : b.some((m) => m.position?.row === o && m.position?.column === l);
   return /* @__PURE__ */ f("div", { className: e.grid, children: [
-    !n && /* @__PURE__ */ i(E, { level: 1, bold: !0, className: e.black, children: v }),
-    /* @__PURE__ */ i("div", { className: e.blockLayout, style: { width: `${d}rem`, height: `${d}rem` }, children: Array.from({ length: s }).map((o, l) => /* @__PURE__ */ i("div", { className: e.blockRow, children: Array.from({ length: t }).map((a, m) => {
-      const r = t * l + m + 1;
+    !n && /* @__PURE__ */ i(B, { level: 1, bold: !0, className: e.black, children: v }),
+    /* @__PURE__ */ i("div", { className: e.blockLayout, style: { width: `${d}rem`, height: `${d}rem` }, children: Array.from({ length: s }).map((o, l) => /* @__PURE__ */ i("div", { className: e.blockRow, children: Array.from({ length: t }).map((m, a) => {
+      const r = t * l + a + 1;
       return /* @__PURE__ */ i(
         "div",
         {
           "data-testid": "blockViewBlock",
-          className: `${e.block} ${p === r ? e.active : ""} ${x({ row: l + 1, column: m + 1 }) ? "" : e.empty} ${k.includes(r) ? e.error : ""}`,
+          className: `${e.block} ${p === r ? e.active : ""} ${x({ row: l + 1, column: a + 1 }) ? "" : e.empty} ${k.includes(r) ? e.error : ""}`,
           id: `block${r}`,
           onClick: N ? () => {
-            h(r), w({ row: l + 1, column: m + 1 });
+            h(r), w({ row: l + 1, column: a + 1 });
           } : void 0,
           children: y && /* @__PURE__ */ i(
             "div",
@@ -51,7 +51,7 @@ const R = ({
         r
       );
     }) }, l)) }),
-    !n && /* @__PURE__ */ f(S, { themeColor: "primary", level: 6, children: [
+    !n && /* @__PURE__ */ f(C, { themeColor: "primary", level: 6, children: [
       g,
       " ",
       $