@hortiview/shared-components 0.0.11176 → 0.0.11587

package/README.md

@@ -13,7 +13,7 @@ This is a shared component library. It should used in the HortiView platform and
 This library is based in Bayers element component library. To use it properly you need to install this package first.
 To get access to this restricted package please contact your Bayer contact person.
 
-After you gain access use `yarn add @element/react-components @element/themes` or `npm i @element/react-components @element/themes` to add the package to your solution.
+After you gain access use `yarn add @element-public/react-components @element-public/themes` or `npm i @element-public/react-components @element-public/themes` to add the package to your solution.
 
 ## Remarks
 
@@ -33,11 +33,11 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [Disclaimer](#disclaimer)
 1. [EmptyView](#emptyview)
 1. [Filter](#filter)
-1. [FormattedNumberDisplay] (#formattednumberdisplay)
+1. [FormattedNumberDisplay](#formattednumberdisplay)
 1. [FormComponents](#formcomponents)
    1. [FormCheckBox](#formcheckbox)
    1. [FormDatePicker](#formdatepicker)
-   1. [FormNumber] (#formnumber)
+   1. [FormNumber](#formnumber)
    1. [FormRadio](#formradio)
    1. [FormSelect](#formselect)
    1. [FormSlider](#formslider)
@@ -51,9 +51,11 @@ 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)
+1. [Select](#select)
 1. [VerticalDivider](#verticaldivider)
 
 ## Available Utility Functions:
@@ -311,7 +313,7 @@ const TypoDisplay3 = (props: { children: React.ReactNode }) => {
   return <TypoDisplay level={3}>{props.children}</TypoDisplay>;
 };
 
-<FormattedNumberDisplay typographyComponent={TypoDisplay3} languageCode="en-MX" value={12345.67} />;
+<FormattedNumberDisplay typographyComponent={TypoDisplay3} languageCode='en-MX' value={12345.67} />;
 ```
 
 ### FormComponents
@@ -439,7 +441,9 @@ const { handleSubmit } = formMethods;
 
 #### FormSelect
 
-Provides a select form component
+Provides a select form component.
+
+> **Warning**: Don't set `menuPosition` when `hoisted` is true.
 
 ```jsx
 import { FormSelect } from '@hortiview/shared-components';
@@ -843,7 +847,7 @@ return <>
 
 ### Modal
 
-Provides the normal elements modal with one additional change. If you are on fullscreen modal size the max-height and max-width is set to 100svh/svw (Smallest ViewPort height/width).
+Provides the normal Element modal with one additional change. If you are on fullscreen modal size the max-height and max-width is set to 100svh/svw (Smallest ViewPort height/width).
 This will set the modal size on an area between the mobile controls.
 
 ```jsx
@@ -854,13 +858,29 @@ 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.
 
 ```jsx
 import { OverflowTooltip } from '@hortiview/shared-components';
-import { TypoBody } from '@element/react-components';
+import { TypoBody } from '@element-public/react-components';
 
 const longText =
   'This is a very long text that needs to be truncated and shown with a tooltip when it overflows.';
@@ -904,6 +924,34 @@ const [searchValue, setSearchValue] = useState('');
 />;
 ```
 
+### Select
+
+Provides the normal Element select with some additional presets and props:
+
+- `menuMaxHeight` has a default value of `15rem` (can be overwritten)
+- custom styles are applied that improve the `hoisted` select menu behavior and avoid two scrolling bars on multi select menus
+- custom portal styles can be passed via the `portalClassName` prop - only works when `portalContainer` is not set
+
+> **Warning**: Don't set `menuPosition` when `hoisted` is true.
+
+```jsx
+import { Select } from '@hortiview/shared-components';
+...
+
+<Select
+  label='Contact during review'
+  options={contacts}
+  hoisted
+  textKey='text'
+  valueKey='id'
+  onChange={handleContactSelect}
+  value={contact}
+  helperText='required'
+  variant='outlined'
+  portalClassName={styles.portal}
+/>;
+```
+
 ### VerticalDivider
 
 Provides a simple vertical divider.
@@ -975,5 +1023,7 @@ Note: Should only be used for displaying numbers, not for calculations or values
 ```typescript
 const userLocale = 'es-MX';
 
-const overlineTitle = `${getNumberAsLocaleString(userLocale, totalArea, 5)} ${t('squaremeter-unit')}`;
+const overlineTitle = `${getNumberAsLocaleString(userLocale, totalArea, 5)} ${t(
+  'squaremeter-unit'
+)}`;
 ```

package/dist/BigLoadingSpinner-iegTbDcD.js

@@ -0,0 +1,16 @@
+import { jsx as i, jsxs as n } from "react/jsx-runtime";
+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", s = "_bigLoadSpinnerCard_7dxo1_12", g = "_bigLoadSpinnerCardText_7dxo1_27", t = "_logo_7dxo1_33", o = {
+  loadingBigOverlay: e,
+  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 })
+] }), b = (a) => /* @__PURE__ */ i("div", { className: o.loadingBigOverlay, children: /* @__PURE__ */ i(l, { ...a }) });
+export {
+  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-DOwtdRa4.js

@@ -0,0 +1,109 @@
+import { jsx as r, jsxs as z } from "react/jsx-runtime";
+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", 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: G,
+  roundedBottom: W,
+  primaryText: L,
+  list: S,
+  listItem: A,
+  iconColor: P,
+  overlineTitle: D,
+  noOverlineTitle: F,
+  truncate: H,
+  truncateOverlineText: J
+}, 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(C, { children: e }),
+      id: e,
+      items: []
+    }), o[e].items = [
+      ...o[e].items,
+      y(m, s, a, l)
+    ]), o;
+  }, {});
+  return Object.values(i);
+}, ee = (t, s, a, l) => t.map((i) => y(i, s, a, l)), y = (t, s, a, l) => {
+  const {
+    id: i,
+    title: o,
+    subTitle: c,
+    route: e,
+    value: m,
+    noNavigation: v,
+    disabled: d,
+    icon: g,
+    iconType: p,
+    trailingIcon: f,
+    trailingIconType: h,
+    actionButton: I,
+    onClick: w,
+    customTitle: T,
+    listItemClassName: x,
+    overlineTitle: _
+  } = t, u = s === e;
+  return {
+    id: i,
+    key: i,
+    select: u,
+    primaryText: i,
+    secondaryText: /* @__PURE__ */ z(b, { direction: "vertical", gap: "none", children: [
+      T ?? /* @__PURE__ */ r(
+        N,
+        {
+          "data-testid": "title",
+          level: 1,
+          themeColor: u ? "primary" : void 0,
+          className: `${n.truncate} lmnt-theme-on-surface-active`,
+          children: o
+        }
+      ),
+      c && !T ? /* @__PURE__ */ r(
+        O,
+        {
+          "data-testid": "subtitle",
+          level: 2,
+          themeColor: u ? "primary" : void 0,
+          className: `${n.truncate} lmnt-theme-on-surface-inactive`,
+          children: c
+        }
+      ) : void 0
+    ] }),
+    overlineText: _ ? /* @__PURE__ */ r(
+      "span",
+      {
+        "data-testid": "overline-title",
+        className: `${n.truncate} ${n.truncateOverlineText}`,
+        children: _
+      }
+    ) : void 0,
+    trailingBlock: I ?? f ?? /* @__PURE__ */ r(B, { icon: "arrow_right", className: n.iconColor }),
+    leadingBlock: K(g),
+    value: m,
+    componentProps: {
+      id: i,
+      "data-testid": `${o}-list-item`,
+      key: i,
+      leadingBlockType: p ?? "icon",
+      trailingBlockType: h ?? "icon",
+      className: `${p === "avatar" ? "" : n.listItem} ${a} ${x ?? ""} ${_ ? n.overlineTitle : n.noOverlineTitle}`,
+      onClick: (M, q) => w?.(q),
+      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 {
+  ee as a,
+  Z as g,
+  y as m,
+  n as s
+};