@hortiview/shared-components 0.0.6403 → 0.0.6829

package/dist/ListAreaService-DDlsV9UD.js

@@ -0,0 +1,100 @@
+import "./assets/ListAreaService.css";
+import { jsx as r, jsxs as C } from "react/jsx-runtime";
+import { TypoButton as N, Group as O, TypoSubtitle as k, TypoBody as $, Icon as L } from "@element/react-components";
+import { Iconify as E } from "./components/Iconify/Iconify.js";
+import { AvailableCustomIcons as j } from "./enums/AvailableCustomIcons.js";
+const W = "_fullWidth_1l0gd_1", G = "_mainElevation_1l0gd_5", S = "_searchbar_1l0gd_11", w = "_roundedBottom_1l0gd_19", A = "_primaryText_1l0gd_24", P = "_noOverlineText_1l0gd_28", q = "_list_1l0gd_32", z = "_listItem_1l0gd_60", D = "_trailingIcon_1l0gd_64", F = "_groupedListItem_1l0gd_76", H = "_iconColor_1l0gd_80", J = "_overlineTitle_1l0gd_84", K = "_truncate_1l0gd_89", M = "_truncateOverlineText_1l0gd_98", i = {
+  fullWidth: W,
+  mainElevation: G,
+  searchbar: S,
+  roundedBottom: w,
+  primaryText: A,
+  noOverlineText: P,
+  list: q,
+  listItem: z,
+  trailingIcon: D,
+  groupedListItem: F,
+  iconColor: H,
+  overlineTitle: J,
+  truncate: K,
+  truncateOverlineText: M
+}, tt = (e, l, c, a) => {
+  const o = e.reduce((n, s) => {
+    const { groupName: t, ...m } = s;
+    return !t || typeof t != "string" || (n[t] || (n[t] = {
+      groupName: /* @__PURE__ */ r(N, { children: t }),
+      id: t,
+      items: []
+    }), n[t].items = [
+      ...n[t].items,
+      T(m, l, c, a)
+    ]), n;
+  }, {});
+  return Object.values(o);
+}, et = (e, l, c, a) => e.map((o) => T(o, l, c, a)), T = (e, l, c, a) => {
+  const {
+    id: o,
+    title: n,
+    subTitle: s,
+    route: t,
+    value: m,
+    noNavigation: g,
+    disabled: d,
+    icon: y,
+    iconType: u,
+    trailingIcon: I,
+    trailingIconType: x,
+    actionButton: f,
+    onClick: h,
+    customTitle: p,
+    listItemClassName: B,
+    overlineTitle: v
+  } = e, _ = l === t;
+  return {
+    id: o,
+    key: o,
+    select: _,
+    primaryText: o,
+    secondaryText: /* @__PURE__ */ C(O, { direction: "vertical", gap: "none", children: [
+      p ?? /* @__PURE__ */ r(
+        k,
+        {
+          level: 1,
+          bold: _,
+          className: `${i.truncate} lmnt-theme-on-surface-active`,
+          children: n
+        }
+      ),
+      s && !p ? /* @__PURE__ */ r(
+        $,
+        {
+          level: 2,
+          themeColor: _ ? "primary" : void 0,
+          className: `${i.truncate} lmnt-theme-on-surface-inactive`,
+          children: s
+        }
+      ) : void 0
+    ] }),
+    overlineText: /* @__PURE__ */ r("span", { className: `${i.truncate} ${i.truncateOverlineText}`, children: v }),
+    trailingBlock: f ?? I ?? /* @__PURE__ */ r(L, { icon: "arrow_right", className: i.iconColor }),
+    leadingBlock: Q(y),
+    value: m,
+    componentProps: {
+      id: o,
+      key: o,
+      leadingBlockType: u ?? "icon",
+      trailingBlockType: x ?? "icon",
+      className: `${u === "avatar" ? "" : i.listItem} ${c} ${B ?? ""} ${v ? i.overlineTitle : i.noOverlineText}`,
+      onClick: (R, b) => h?.(b),
+      tag: d || g ? void 0 : a ?? "a",
+      to: d || g ? void 0 : t,
+      disabled: d
+    }
+  };
+}, Q = (e) => typeof e == "string" && e in j ? /* @__PURE__ */ r(E, { icon: e }) : e;
+export {
+  et as a,
+  tt as g,
+  T as m,
+  i as s
+};

package/dist/assets/BaseView.css

@@ -1 +1 @@
-._divider_anyyu_1{margin:0 2rem}
+._divider_12ecr_1{margin:0 2rem}._truncate_12ecr_5{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}

package/dist/assets/ListAreaService.css

@@ -1 +1 @@
-._fullWidth_9hcwy_1{width:100%}._mainElevation_9hcwy_5{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_9hcwy_11 div{border:none}._searchbar_9hcwy_11 button{margin-right:.5rem}._roundedBottom_9hcwy_19{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._primaryText_9hcwy_24 [class*=mdc-list-item__primary-text]{display:none!important}._noOverlineText_9hcwy_28 [class*=mdc-list-item__content]{margin-top:-.625rem}._list_9hcwy_32{padding-top:0;padding-bottom:0;overflow-y:auto}._list_9hcwy_32 [class*=mdc-list-item__overline-text]{margin-bottom:-2.25rem}._list_9hcwy_32::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 .25rem rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_9hcwy_32::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_9hcwy_32::-webkit-scrollbar-thumb{border-radius:.5rem;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--lmnt-theme-primary-on-surface)}._listItem_9hcwy_60{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_9hcwy_60 i:not(._trailingIcon_9hcwy_64){color:var(--lmnt-theme-on-surface-inactive)}._listItem_9hcwy_60 i._trailingIcon_9hcwy_64{color:var(--lmnt-theme-on-surface-disabled)}._listItem_9hcwy_60 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_9hcwy_76{height:4.5rem!important}._iconColor_9hcwy_80{color:var(--lmnt-theme-on-surface-disabled)!important}._overlineTitle_9hcwy_84 [class*=mdc-list-item__overline-text]{color:var(--lmnt-theme-on-surface-inactive)!important;line-height:1rem!important}
+._fullWidth_1l0gd_1{width:100%}._mainElevation_1l0gd_5{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_1l0gd_11 div{border:none}._searchbar_1l0gd_11 button{margin-right:.5rem}._roundedBottom_1l0gd_19{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._primaryText_1l0gd_24 [class*=mdc-list-item__primary-text]{display:none!important}._noOverlineText_1l0gd_28 [class*=mdc-list-item__content]{margin-top:-.625rem}._list_1l0gd_32{padding-top:0;padding-bottom:0;overflow-y:auto}._list_1l0gd_32 [class*=mdc-list-item__overline-text]{margin-bottom:-2.25rem}._list_1l0gd_32::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 .25rem rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_1l0gd_32::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_1l0gd_32::-webkit-scrollbar-thumb{border-radius:.5rem;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--lmnt-theme-primary-on-surface)}._listItem_1l0gd_60{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_1l0gd_60 i:not(._trailingIcon_1l0gd_64){color:var(--lmnt-theme-on-surface-inactive)}._listItem_1l0gd_60 i._trailingIcon_1l0gd_64{color:var(--lmnt-theme-on-surface-disabled)}._listItem_1l0gd_60 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_1l0gd_76{height:4.5rem!important}._iconColor_1l0gd_80{color:var(--lmnt-theme-on-surface-disabled)!important}._overlineTitle_1l0gd_84 [class*=mdc-list-item__overline-text]{color:var(--lmnt-theme-on-surface-inactive)!important;line-height:1rem!important}._truncate_1l0gd_89{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-width:100%}._truncateOverlineText_1l0gd_98{margin-bottom:-1rem!important;margin-top:-1rem!important}

package/dist/components/BaseView/BaseView.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { LinkProps } from '../../types/internal/ReactRouterTypes';
 import { BaseListElement } from '../../types/ListElement';
+import { LinkProps } from '../../types/internal/ReactRouterTypes';
 type BaseViewProps = {
     /**
      * elements to be displayed in the list area

package/dist/components/BaseView/BaseView.js

@@ -1,65 +1,67 @@
 import "../../assets/BaseView.css";
-import { jsx as t, Fragment as k, jsxs as e } from "react/jsx-runtime";
-import { useMemo as n } from "react";
-import { EmptyView as y } from "../EmptyView/EmptyView.js";
-import { ListArea as A } from "../ListArea/ListArea.js";
-import { VerticalDivider as H } from "../VerticalDivider/VerticalDivider.js";
-import { a as L } from "../../useBreakpoint-DROHPVxO.js";
-import { Grid as V, GridRow as W, GridCol as a, Group as m } from "@element/react-components";
-import { BasicHeading as u } from "../BasicHeading/BasicHeading.js";
-const _ = "_divider_anyyu_1", j = {
-  divider: _
-}, z = ({
-  action: d,
-  heading: c,
+import { jsx as e, Fragment as k, jsxs as i } from "react/jsx-runtime";
+import { Grid as A, GridRow as H, GridCol as a, Group as u } from "@element/react-components";
+import { useMemo as l } from "react";
+import { BasicHeading as m } from "../BasicHeading/BasicHeading.js";
+import { EmptyView as L } from "../EmptyView/EmptyView.js";
+import { ListArea as N } from "../ListArea/ListArea.js";
+import { VerticalDivider as V } from "../VerticalDivider/VerticalDivider.js";
+import { a as W } from "../../useBreakpoint-DROHPVxO.js";
+const j = "_divider_12ecr_1", D = "_truncate_12ecr_5", p = {
+  divider: j,
+  truncate: D
+}, J = ({
+  action: c,
+  heading: d,
   elements: o,
   emptyText: s,
-  hasSearch: p = !0,
-  isSorted: h = !0,
-  className: f,
-  withAvatar: v = !1,
-  listMaxHeight: g = "calc(100vh - 200px)",
-  pathname: l,
-  routerLinkElement: C,
-  searchPlaceholder: B
+  hasSearch: h = !0,
+  isSorted: f = !0,
+  className: v,
+  withAvatar: g = !1,
+  listMaxHeight: C = "calc(100vh - 200px)",
+  pathname: n,
+  routerLinkElement: B,
+  searchPlaceholder: _
 }) => {
-  const { isLg: r, isXs: G } = L(), i = n(() => o.find((x) => x.route === l), [l, o]), b = n(() => i?.component ?? (r ? /* @__PURE__ */ t(y, { subtitle: s }) : /* @__PURE__ */ t(k, {})), [i, r, s]), w = n(() => r ? !0 : !i, [i, r]);
-  return /* @__PURE__ */ t(V, { className: f ?? "", fullHeight: !0, fullWidth: !0, columnGap: 0, children: /* @__PURE__ */ e(W, { children: [
-    w && /* @__PURE__ */ e(a, { desktopCol: 4, tabletCol: 12, phoneCol: 12, children: [
-      /* @__PURE__ */ e(m, { direction: "vertical", fullWidth: !0, gap: G ? "dense" : "standard", children: [
-        c && /* @__PURE__ */ t(u, { heading: c, level: 4, marginBottom: 0, children: d }),
-        /* @__PURE__ */ t(
-          A,
-          {
-            elements: o,
-            hasSearch: p,
-            maxHeight: g,
-            isSorted: h,
-            pathname: l,
-            routerLinkElement: C,
-            searchPlaceholder: B
-          }
-        )
-      ] }),
-      r && /* @__PURE__ */ t(H, { className: j.divider, height: "100%" })
-    ] }),
-    /* @__PURE__ */ t(a, { desktopCol: 8, tabletCol: 12, phoneCol: 12, children: /* @__PURE__ */ e(m, { direction: "vertical", fullWidth: !0, children: [
-      /* @__PURE__ */ t(
-        u,
+  const { isLg: r, isXs: G } = W(), t = l(() => o.find((x) => x.route === n), [n, o]), b = l(() => t?.component ?? (r ? /* @__PURE__ */ e(L, { subtitle: s }) : /* @__PURE__ */ e(k, {})), [t, r, s]), w = l(() => r ? !0 : !t, [t, r]);
+  return /* @__PURE__ */ e(A, { className: v ?? "", fullHeight: !0, fullWidth: !0, columnGap: 0, children: /* @__PURE__ */ i(H, { children: [
+    w && /* @__PURE__ */ e(a, { desktopCol: 3, tabletCol: 12, phoneCol: 12, children: /* @__PURE__ */ i(u, { direction: "vertical", fullWidth: !0, gap: G ? "dense" : "standard", children: [
+      d && /* @__PURE__ */ e(m, { heading: d, level: 4, marginBottom: 0, children: c }),
+      /* @__PURE__ */ e(
+        N,
         {
-          heading: i?.detailTitle ?? i?.title ?? "",
-          level: 4,
-          icon: i?.hideIconInDetail === !0 ? void 0 : i?.icon,
-          marginBottom: 0,
-          invisibleButton: i?.detailAction === void 0,
-          withAvatar: v,
-          children: i?.detailAction ?? d
+          elements: o,
+          hasSearch: h,
+          maxHeight: C,
+          isSorted: f,
+          pathname: n,
+          routerLinkElement: B,
+          searchPlaceholder: _
         }
-      ),
-      b
-    ] }) })
+      )
+    ] }) }),
+    /* @__PURE__ */ i(a, { desktopCol: 9, tabletCol: 12, phoneCol: 12, children: [
+      r && /* @__PURE__ */ e(V, { className: p.divider, height: "100%" }),
+      /* @__PURE__ */ i(u, { direction: "vertical", fullWidth: !0, children: [
+        /* @__PURE__ */ e(
+          m,
+          {
+            className: p.truncate,
+            heading: t?.detailTitle ?? t?.title ?? "",
+            level: 4,
+            icon: t?.hideIconInDetail === !0 ? void 0 : t?.icon,
+            marginBottom: 0,
+            invisibleButton: t?.detailAction === void 0,
+            withAvatar: g,
+            children: t?.detailAction ?? c
+          }
+        ),
+        b
+      ] })
+    ] })
   ] }) });
 };
 export {
-  z as BaseView
+  J as BaseView
 };

package/dist/components/BasicHeading/BasicHeading.js

@@ -1,66 +1,67 @@
 import "../../assets/BasicHeading.css";
-import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
 import { TypoDisplay as C, TypoBody as w, Icon as y } from "@element/react-components";
-import { a as u } from "../../useBreakpoint-DROHPVxO.js";
-import { Iconify as I } from "../Iconify/Iconify.js";
-import { AvailableCustomIcons as B } from "../../enums/AvailableCustomIcons.js";
-const N = "_pageHeader_fwns1_1", H = "_headlineContainer_fwns1_11", b = "_actionButtonContainer_fwns1_16", A = "_content_fwns1_25", W = "_leadingIcon_fwns1_31", $ = "_headingWrapper_fwns1_38", x = "_headingContainer_fwns1_43", T = "_invisible_fwns1_48", j = "_withAvatar_fwns1_52", z = "_iconContainer_fwns1_57", n = {
-  pageHeader: N,
-  headlineContainer: H,
-  actionButtonContainer: b,
+import { Iconify as u } from "../Iconify/Iconify.js";
+import { AvailableCustomIcons as I } from "../../enums/AvailableCustomIcons.js";
+import { a as B } from "../../useBreakpoint-DROHPVxO.js";
+import { OverflowTooltip as N } from "../OverflowTooltip/OverflowTooltip.js";
+const H = "_pageHeader_fwns1_1", b = "_headlineContainer_fwns1_11", x = "_actionButtonContainer_fwns1_16", A = "_content_fwns1_25", T = "_leadingIcon_fwns1_31", W = "_headingWrapper_fwns1_38", $ = "_headingContainer_fwns1_43", j = "_invisible_fwns1_48", z = "_withAvatar_fwns1_52", L = "_iconContainer_fwns1_57", n = {
+  pageHeader: H,
+  headlineContainer: b,
+  actionButtonContainer: x,
   content: A,
-  leadingIcon: W,
-  headingWrapper: $,
-  headingContainer: x,
-  invisible: T,
-  withAvatar: j,
-  iconContainer: z
-}, L = ({ icon: e }) => e ? typeof e != "string" ? /* @__PURE__ */ i("div", { className: n.iconContainer, children: e }) : e in B ? /* @__PURE__ */ i(
-  I,
+  leadingIcon: T,
+  headingWrapper: W,
+  headingContainer: $,
+  invisible: j,
+  withAvatar: z,
+  iconContainer: L
+}, S = ({ icon: e }) => e ? typeof e != "string" ? /* @__PURE__ */ i("div", { className: n.iconContainer, children: e }) : e in I ? /* @__PURE__ */ i(
+  u,
   {
     icon: e,
     className: n.leadingIcon,
     iconSize: "large",
     iconType: "filled"
   }
-) : /* @__PURE__ */ i(y, { iconSize: "large", iconType: "filled", icon: e, className: n.leadingIcon }) : null, q = ({
+) : /* @__PURE__ */ i(y, { iconSize: "large", iconType: "filled", icon: e, className: n.leadingIcon }) : null, E = ({
   children: e,
-  marginBottom: a,
-  heading: l,
+  marginBottom: t,
+  heading: a,
   icon: d,
   className: p,
-  subHeading: o,
+  subHeading: r,
   subHeadingLevel: _ = 2,
   invisibleButton: f = !1,
-  level: r = 4,
-  fontWeight: s = 400,
-  withAvatar: g = !1
+  level: s = 4,
+  fontWeight: c = 400,
+  withAvatar: m = !1
 }) => {
-  const { isLg: c } = u(), h = c ? r : r + 1, m = s === "bold" ? 500 : s, v = () => {
-    if (a !== void 0)
-      return typeof a == "number" ? `${a}px` : "2rem";
+  const { isLg: l } = B(), g = l ? s : s + 1, h = c === "bold" ? 500 : c, v = () => {
+    if (t !== void 0)
+      return typeof t == "number" ? `${t}px` : "2rem";
   };
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ o(
     "div",
     {
       className: n.pageHeader,
       style: { marginBottom: v() },
       "data-testid": "HeaderContainer",
       children: [
-        /* @__PURE__ */ t("div", { className: `${g && c ? n.withAvatar : ""} ${n.headingWrapper}`, children: [
-          /* @__PURE__ */ i(L, { icon: d }),
-          /* @__PURE__ */ t("div", { className: o ? n.headingContainer : "", children: [
-            /* @__PURE__ */ i(
+        /* @__PURE__ */ o("div", { className: `${m && l ? n.withAvatar : ""} ${n.headingWrapper}`, children: [
+          /* @__PURE__ */ i(S, { icon: d }),
+          /* @__PURE__ */ o("div", { className: r ? n.headingContainer : "", children: [
+            /* @__PURE__ */ i(N, { id: a, text: a, children: /* @__PURE__ */ i(
               C,
               {
-                level: h,
+                level: g,
                 "data-testid": "Header",
                 className: p ?? "",
-                style: { fontWeight: m },
-                children: l
+                style: { fontWeight: h },
+                children: a
               }
-            ),
-            /* @__PURE__ */ i(w, { level: _, children: o })
+            ) }),
+            /* @__PURE__ */ i(w, { level: _, children: r })
           ] })
         ] }),
         /* @__PURE__ */ i(
@@ -76,5 +77,5 @@ const N = "_pageHeader_fwns1_1", H = "_headlineContainer_fwns1_11", b = "_action
   );
 };
 export {
-  q as BasicHeading
+  E as BasicHeading
 };