@hortiview/shared-components 0.0.11528 → 0.0.11587

package/README.md

@@ -51,6 +51,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [ListArea](#listarea)
 1. [LoadingSpinner](#loadingspinner)
 1. [Modal](#modal)
+1. [ModulePadding](#modulepadding)
 1. [OverflowTooltip](#overflowtooltip)
 1. [ScrollBar](#scrollbar)
 1. [SearchBar](#searchbar)
@@ -857,6 +858,22 @@ import { Modal } from '@hortiview/shared-components';
 </Modal>;
 ```
 
+### ModulePadding
+
+Provides a responsive padding component for modules according to the HV platform UI guidelines, based on the Bayer Element padding component.
+
+Currently, the padding is set to 8px on mobile/tablet and 16px on desktop.
+
+> **Strong recommendation**: If your module does not require any fullscreen features, we highly encourage you to add the `ModulePadding` around your module content to ensure a consistent user experience within the rest of the platform.
+
+```jsx
+import { ModulePadding } from '@hortiview/shared-components';
+
+<ModulePadding>
+  <div>Content</div>
+</ModulePadding>;
+```
+
 ### OverflowTooltip
 
 Provides a tooltip and overflow behavior of a given text value.

package/dist/{BigLoadingSpinner-D7H28pr5.js → BigLoadingSpinner-iegTbDcD.js}

@@ -1,16 +1,16 @@
 import { jsx as i, jsxs as n } from "react/jsx-runtime";
-import { TypoBody as r } from "@element-public/react-components";
+import { b as r } from "./index.es-CF_xy2ns.js";
 import { Iconify as d } from "./components/Iconify/Iconify.js";
-import './assets/BigLoadingSpinner.css';const e = "_loadingBigOverlay_7dxo1_1", g = "_bigLoadSpinnerCard_7dxo1_12", s = "_bigLoadSpinnerCardText_7dxo1_27", t = "_logo_7dxo1_33", o = {
+import './assets/BigLoadingSpinner.css';const e = "_loadingBigOverlay_7dxo1_1", s = "_bigLoadSpinnerCard_7dxo1_12", g = "_bigLoadSpinnerCardText_7dxo1_27", t = "_logo_7dxo1_33", o = {
   loadingBigOverlay: e,
-  bigLoadSpinnerCard: g,
-  bigLoadSpinnerCardText: s,
+  bigLoadSpinnerCard: s,
+  bigLoadSpinnerCardText: g,
   logo: t
 }, l = ({ text: a }) => /* @__PURE__ */ n("div", { className: o.bigLoadSpinnerCard, role: "progressbar", "data-testid": "loading-spinner", children: [
   /* @__PURE__ */ i(d, { icon: "hortiview", className: o.logo, "data-testid": "logo-icon" }),
   /* @__PURE__ */ i(r, { tag: "p", bold: !0, level: 1, className: o.bigLoadSpinnerCardText, children: a })
-] }), x = (a) => /* @__PURE__ */ i("div", { className: o.loadingBigOverlay, children: /* @__PURE__ */ i(l, { ...a }) });
+] }), b = (a) => /* @__PURE__ */ i("div", { className: o.loadingBigOverlay, children: /* @__PURE__ */ i(l, { ...a }) });
 export {
-  x as B,
+  b as B,
   o as s
 };

package/dist/GenericCard-6J558OgP.js

@@ -0,0 +1,350 @@
+import { jsx as n, jsxs as C, Fragment as B } from "react/jsx-runtime";
+import { C as W, a as z, b as D, c as E, d as M } from "./index.es-6TJ1S8Jr.js";
+import { c as x, _ as P, P as e } from "./identity-DLWZln-X.js";
+import b, { forwardRef as $, useMemo as f, useRef as j, useImperativeHandle as q, createContext as F, useContext as I } from "react";
+import { d as U } from "./index.es-da0cf7oE.js";
+import { d as O } from "./index.es-CF_xy2ns.js";
+import { OverflowTooltip as k } from "./components/OverflowTooltip/OverflowTooltip.js";
+import './assets/GenericCard.css';const R = /* @__PURE__ */ F({}), V = {
+  /**
+   * @deprecated _Use `variant`='airy' instead._
+   *
+   * Applies extra padding to each column.
+   *
+   * Defaults to **undefined**.
+   */
+  airy: U(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"])
+}, J = {
+  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"
+}, K = {
+  /**
+   * 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"])
+}, L = {
+  align: void 0,
+  children: null,
+  className: void 0,
+  desktopCol: null,
+  gridColStart: null,
+  horizontalAlign: "left",
+  order: null,
+  phoneCol: null,
+  tabletCol: null,
+  verticalAlign: "top"
+}, Q = {
+  /**
+   * 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
+}, X = {
+  children: null,
+  className: void 0
+}, T = /* @__PURE__ */ $((l, t) => {
+  const {
+    airy: a,
+    children: o,
+    className: d,
+    columnGap: i,
+    fullHeight: r,
+    fullWidth: s,
+    gridAlign: u,
+    rowGap: m,
+    style: c,
+    useMaxWidth: g,
+    variant: y,
+    ...w
+  } = l, h = a ? "airy" : y, G = f(() => ({
+    fullHeight: r,
+    rowGap: m,
+    columnGap: i
+  }), [i, r, m]), A = j();
+  q(t, () => A.current, []);
+  const S = f(() => x("lmnt", "mdc-layout-grid", "lmnt-layout-grid", `mdc-layout-grid mdc-layout-grid--align-${u}`, (h === "airy" || a) && "mdc-grid-cell-wrapper-airy-tablet mdc-grid-cell-wrapper-airy-desktop", y === "none" && "mdc-grid-cell-wrapper-none-tablet mdc-grid-cell-wrapper-none-desktop mdc-grid-cell-wrapper-none-phone ", s && "lmnt-layout-grid--full-width", r && "lmnt-layout-grid--full-height", g && "lmnt-layout-grid--with-max-width", d), [a, d, h, r, s, u, g, y]);
+  return /* @__PURE__ */ b.createElement(R.Provider, {
+    value: G
+  }, /* @__PURE__ */ b.createElement("div", P({
+    ref: A,
+    className: S
+  }, w), o));
+});
+T.displayName = "Grid";
+T.propTypes = V;
+T.defaultProps = J;
+const _ = /* @__PURE__ */ $((l, t) => {
+  const {
+    align: a,
+    children: o,
+    className: d,
+    columns: i,
+    desktopCol: r,
+    gridColStart: s,
+    horizontalAlign: u,
+    order: m,
+    phoneCol: c,
+    style: g,
+    tabletCol: y,
+    verticalAlign: w,
+    ...h
+  } = l, G = f(() => ({
+    ...g,
+    gridColumnStart: s
+  }), [s, g]);
+  return /* @__PURE__ */ b.createElement("div", P({
+    ref: t,
+    style: G,
+    className: x("lmnt", `lmnt-layout-grid__cell--vertical-align-${w}`, `lmnt-layout-grid__cell--horizontal-align-${u}`, "mdc-layout-grid__cell", !i && !c && !y && !r && ["mdc-layout-grid__cell"], m && `mdc-layout-grid__cell--order-${m}`, a && `mdc-layout-grid__cell--align-${a}`, i && [`mdc-layout-grid__cell--span-${i}`], c && [`mdc-layout-grid__cell--span-${c}-phone`], y && [`mdc-layout-grid__cell--span-${y}-tablet`], r && [`mdc-layout-grid__cell--span-${r}-desktop`], "lmnt-layout-grid__cell", d)
+  }, h), o);
+});
+_.displayName = "GridCol";
+_.propTypes = K;
+_.defaultProps = L;
+const v = /* @__PURE__ */ $((l, t) => {
+  const {
+    children: a,
+    className: o,
+    style: d,
+    ...i
+  } = l, {
+    fullHeight: r,
+    rowGap: s,
+    columnGap: u
+  } = I(R), m = f(() => {
+    let c = {
+      rowGap: s,
+      columnGap: u
+    };
+    return r && (c = {
+      ...c,
+      height: "100%"
+    }), {
+      ...d,
+      ...c
+    };
+  }, [d, r, s, u]);
+  return /* @__PURE__ */ b.createElement("div", P({
+    ref: t,
+    className: x("lmnt", "mdc-layout-grid__inner", "lmnt-layout-grid__inner", o),
+    style: m
+  }, i), a);
+});
+v.displayName = "GridRow";
+v.propTypes = Q;
+v.defaultProps = X;
+const Y = "_cardTitle_ny9m0_1", Z = "_cardBody_ny9m0_5", ee = "_cardContent_ny9m0_10", te = "_row_ny9m0_14", re = "_font_ny9m0_18", le = "_fontHeader_ny9m0_23", ae = "_title_ny9m0_27", ne = "_emptyContainer_ny9m0_33", oe = "_empty_ny9m0_33", p = {
+  cardTitle: Y,
+  cardBody: Z,
+  cardContent: ee,
+  row: te,
+  font: re,
+  fontHeader: le,
+  title: ae,
+  emptyContainer: ne,
+  empty: oe
+}, H = {
+  desktopCol: 6,
+  phoneCol: 2,
+  tabletCol: 4,
+  verticalAlign: "bottom"
+}, ge = ({ item: l, columns: t, hiddenColumns: a }) => {
+  const o = t.find((r) => r.asCardTitle), d = t.find((r) => r.asCardSubtitle), i = f(
+    () => t.filter(
+      (r) => !r.asCardTitle && !r.asCardSubtitle && r.id !== "actions"
+    ),
+    [t]
+  );
+  return /* @__PURE__ */ n(
+    W,
+    {
+      variant: "raised",
+      "data-testid": `card${o ? "-" + l[o.accessor] : ""}`,
+      children: /* @__PURE__ */ C(z, { className: p.cardContent, "data-testid": "card-content", children: [
+        /* @__PURE__ */ n(ie, { item: l, titleColumn: o, subTitleColumn: d }),
+        /* @__PURE__ */ n(D, { className: p.cardBody, "data-testid": "card-body", children: /* @__PURE__ */ n(T, { fullHeight: !0, fullWidth: !0, variant: "none", children: i.map((r) => a?.includes(r.id) ? null : /* @__PURE__ */ C(v, { className: p.row, "data-testid": "row", children: [
+          /* @__PURE__ */ n(_, { horizontalAlign: "right", ...H, children: /* @__PURE__ */ C(
+            O,
+            {
+              level: 2,
+              themeColor: "text-secondary-on-background",
+              className: `${p.font} ${p.fontHeader}`,
+              tag: "div",
+              children: [
+                r.header,
+                ":"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ n(_, { horizontalAlign: "left", ...H, children: /* @__PURE__ */ n(N, { column: r, item: l }) })
+        ] }, r.id)) }) })
+      ] })
+    }
+  );
+}, ie = ({ item: l, titleColumn: t, subTitleColumn: a }) => {
+  const o = l.actions;
+  return !t && !a && !o ? null : /* @__PURE__ */ C(B, { children: [
+    /* @__PURE__ */ n(
+      E,
+      {
+        "data-testid": "card-title",
+        className: p.cardTitle,
+        primaryText: t !== void 0 && /* @__PURE__ */ n(N, { column: t, item: l, isTitle: !0 }),
+        secondaryText: a !== void 0 && /* @__PURE__ */ n(N, { column: a, item: l, isTitle: !0 }),
+        trailingBlock: o,
+        trailingBlockType: "title-actions"
+      }
+    ),
+    /* @__PURE__ */ n(M, {})
+  ] });
+}, N = ({ item: l, column: t, isTitle: a = !1 }) => t.cellTemplate ? t.cellTemplate({ row: { original: l } }) : a ? /* @__PURE__ */ n(
+  k,
+  {
+    id: `tip_${t.id}_${l[t.accessor]}`,
+    text: l[t.accessor],
+    children: /* @__PURE__ */ n("span", { className: p.title, children: l[t.accessor] })
+  }
+) : /* @__PURE__ */ n(
+  k,
+  {
+    id: `tip_${t.id}_${l[t.accessor]}`,
+    text: l[t.accessor],
+    children: /* @__PURE__ */ n(O, { level: 2, themeColor: "text-primary-on-background", className: p.font, children: l[t.accessor] })
+  }
+);
+export {
+  ge as G,
+  p as s
+};

package/dist/{ListAreaService-YS_UUPh5.js → ListAreaService-DOwtdRa4.js}

@@ -1,12 +1,14 @@
 import { jsx as r, jsxs as z } from "react/jsx-runtime";
-import { TypoButton as B, Icon as C, Group as b, TypoSubtitle as N, TypoBody as O } from "@element-public/react-components";
+import { G as b } from "./index.es-DntoATwO.js";
+import { I as B } from "./index.es-3043KTnb.js";
+import { c as C, d as N, b as O } from "./index.es-CF_xy2ns.js";
 import { Iconify as $ } from "./components/Iconify/Iconify.js";
 import { AvailableCustomIcons as k } from "./enums/AvailableCustomIcons.js";
-import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_mainElevation_zewqs_5", W = "_searchbar_zewqs_11", G = "_roundedBottom_zewqs_19", L = "_primaryText_zewqs_24", S = "_list_zewqs_28", A = "_listItem_zewqs_56", P = "_iconColor_zewqs_76", D = "_overlineTitle_zewqs_80", F = "_noOverlineTitle_zewqs_85", H = "_truncate_zewqs_89", J = "_truncateOverlineText_zewqs_100", n = {
+import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_mainElevation_zewqs_5", G = "_searchbar_zewqs_11", W = "_roundedBottom_zewqs_19", L = "_primaryText_zewqs_24", S = "_list_zewqs_28", A = "_listItem_zewqs_56", P = "_iconColor_zewqs_76", D = "_overlineTitle_zewqs_80", F = "_noOverlineTitle_zewqs_85", H = "_truncate_zewqs_89", J = "_truncateOverlineText_zewqs_100", n = {
   fullWidth: E,
   mainElevation: j,
-  searchbar: W,
-  roundedBottom: G,
+  searchbar: G,
+  roundedBottom: W,
   primaryText: L,
   list: S,
   listItem: A,
@@ -15,20 +17,20 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
   noOverlineTitle: F,
   truncate: H,
   truncateOverlineText: J
-}, X = (t, s, l, a) => {
+}, Z = (t, s, a, l) => {
   const i = t.reduce((o, c) => {
     const { groupName: e, ...m } = c;
     return !e || typeof e != "string" || (o[e] || (o[e] = {
-      groupName: /* @__PURE__ */ r(B, { children: e }),
+      groupName: /* @__PURE__ */ r(C, { children: e }),
       id: e,
       items: []
     }), o[e].items = [
       ...o[e].items,
-      y(m, s, l, a)
+      y(m, s, a, l)
     ]), o;
   }, {});
   return Object.values(i);
-}, Y = (t, s, l, a) => t.map((i) => y(i, s, l, a)), y = (t, s, l, a) => {
+}, ee = (t, s, a, l) => t.map((i) => y(i, s, a, l)), y = (t, s, a, l) => {
   const {
     id: i,
     title: o,
@@ -39,8 +41,8 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
     disabled: d,
     icon: g,
     iconType: p,
-    trailingIcon: h,
-    trailingIconType: f,
+    trailingIcon: f,
+    trailingIconType: h,
     actionButton: I,
     onClick: w,
     customTitle: T,
@@ -82,7 +84,7 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
         children: _
       }
     ) : void 0,
-    trailingBlock: I ?? h ?? /* @__PURE__ */ r(C, { icon: "arrow_right", className: n.iconColor }),
+    trailingBlock: I ?? f ?? /* @__PURE__ */ r(B, { icon: "arrow_right", className: n.iconColor }),
     leadingBlock: K(g),
     value: m,
     componentProps: {
@@ -90,18 +92,18 @@ import './assets/ListAreaService.css';const E = "_fullWidth_zewqs_1", j = "_main
       "data-testid": `${o}-list-item`,
       key: i,
       leadingBlockType: p ?? "icon",
-      trailingBlockType: f ?? "icon",
-      className: `${p === "avatar" ? "" : n.listItem} ${l} ${x ?? ""} ${_ ? n.overlineTitle : n.noOverlineTitle}`,
+      trailingBlockType: h ?? "icon",
+      className: `${p === "avatar" ? "" : n.listItem} ${a} ${x ?? ""} ${_ ? n.overlineTitle : n.noOverlineTitle}`,
       onClick: (M, q) => w?.(q),
-      tag: d || v ? void 0 : a ?? "a",
+      tag: d || v ? void 0 : l ?? "a",
       to: d || v ? void 0 : e,
       disabled: d
     }
   };
 }, K = (t) => typeof t == "string" && t in k ? /* @__PURE__ */ r($, { icon: t }) : t;
 export {
-  Y as a,
-  X as g,
+  ee as a,
+  Z as g,
   y as m,
   n as s
 };