@hortiview/shared-components 0.0.7373 → 0.0.7428

package/dist/assets/infoGroup.css

@@ -1 +1 @@
-._container_egebs_1{width:100%;padding:0;@media only screen and (max-width: 838px){padding-top:.5rem}}._dividerContainer_egebs_10{width:100%;padding:0rem 1rem;margin:-1rem 0rem}._mainGroup_egebs_16{border:.0775rem solid var(--lmnt-on-surface-stroke, rgba(0, 0, 0, .12));border-radius:.5rem}._row_egebs_21{min-height:5.5vh;padding:1rem}._row_egebs_21 input:not([type=checkbox]){@media only screen and (max-width: 839px){height:80%}}._row_egebs_21 input{padding-top:.2rem;border:none;color:#000!important;font-size:1.2rem;margin-top:1rem!important;@media only screen and (min-width: 839px){margin-top:1.5rem!important}}._row_egebs_21 label{font-size:1.2rem}._row_egebs_21 ._valueText_egebs_46{line-height:1rem}:before{border:none!important}._component_egebs_54{width:95%!important;background-color:var(--lmnt-theme-on-primary);padding-left:.4rem!important;justify-content:flex-end;min-height:3rem;height:4vh;align-items:center;text-align:center;display:flex;border-radius:.5rem;box-shadow:0 .125rem .25rem #00000040;padding:1rem;margin-right:1rem;@media only screen and (max-width: 839px){margin-bottom:1.6rem!important;margin-left:1rem}}._component_egebs_54>div{display:flex;justify-content:space-between;width:100%}._component_egebs_54>div label{font-size:1rem;color:#00000061;font-weight:500}._componentContainer_egebs_87{width:100%!important;@media only screen and (max-width: 839px){margin-top:1rem;margin-bottom:-.5rem}}._field_egebs_95{width:100%;padding:0rem .5rem;align-self:center;display:flex;flex-direction:column}
+._dividerContainer_4c1hq_1{width:100%;padding:1rem 0}._fullWidth_4c1hq_6{width:100%}._centerDefaultComponent_4c1hq_10{margin:auto}._verticalDivider_4c1hq_14{display:flex;align-self:stretch;height:auto;width:1px;background-color:var(--lmnt-theme-on-surface-stroke, rgba(0, 0, 0, .12))}._mainGroup_4c1hq_22{padding:1rem;border:.0775rem solid var(--lmnt-on-surface-stroke, rgba(0, 0, 0, .12));border-radius:.5rem}._textAlignRight_4c1hq_28{text-align:right}

package/dist/components/Filter/Filter.js

@@ -21,9 +21,9 @@ import "../../contextMenu.module-DNQ8d9Aj.js";
 import "../../deleteModal.module-Ds3MDzdl.js";
 import "../../disclaimer.module-BZydt-Q_.js";
 import "../../genericCard.module-DzqcufuN.js";
-import "../../HashTabView.module-CJX4gxTu.js";
+import "../../HashTabView.module-DUekkiTC.js";
 import "../../HeaderFilter.module-DiBmulr5.js";
-import "../../infoGroup.module-B3E1gCGi.js";
+import "../../infoGroup.module-Cxw88dfC.js";
 import "../../bigLoadingSpinner.module-GgbFol8k.js";
 import "../../loadingSpinner.module-CLtqSMWA.js";
 import "../Scrollbar/Scrollbar.js";

package/dist/components/GenericTable/GenericTable.js

@@ -19,9 +19,9 @@ import "lodash";
 import "../../contextMenu.module-DNQ8d9Aj.js";
 import "../../deleteModal.module-Ds3MDzdl.js";
 import "../../disclaimer.module-BZydt-Q_.js";
-import "../../HashTabView.module-CJX4gxTu.js";
+import "../../HashTabView.module-DUekkiTC.js";
 import "../../HeaderFilter.module-DiBmulr5.js";
-import "../../infoGroup.module-B3E1gCGi.js";
+import "../../infoGroup.module-Cxw88dfC.js";
 import "../../bigLoadingSpinner.module-GgbFol8k.js";
 import "../../loadingSpinner.module-CLtqSMWA.js";
 import "../Scrollbar/Scrollbar.js";

package/dist/components/HashTabView/HashTabView.js

@@ -2,7 +2,7 @@ import { jsx as r, jsxs as d, Fragment as I } from "react/jsx-runtime";
 import { Elevation as N, Group as c, TabBar as b, Tab as k, Padding as x } from "@element/react-components";
 import { useState as y, useEffect as $ } from "react";
 import { u as w } from "../../useBreakpoints-BNeVhjjZ.js";
-import { s as a } from "../../HashTabView.module-CJX4gxTu.js";
+import { s as a } from "../../HashTabView.module-DUekkiTC.js";
 const h = (n, t) => !t || !n ? 0 : n.findIndex((i) => i.hash === t.replace("#", "")) ?? 0, D = ({
   tabs: n,
   hasHash: t = !0,

package/dist/components/InfoGroup/InfoGroup.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { ThemeColor } from '../../enums/ThemeColor';
 /**
  * FieldItem type that defines the structure of the fields to render in the InfoGroup component
  */
@@ -14,22 +15,25 @@ export type FieldItem = {
     /**
      * ThemeColor for the Textfield (default: none)
      */
-    themeColor?: 'primary' | 'secondary' | 'error' | 'text-primary-on-background' | 'text-secondary-on-background' | 'text-hint-on-background' | 'text-disabled-on-background' | 'text-icon-on-background' | 'text-primary-on-light' | 'text-secondary-on-light' | 'text-hint-on-light' | 'text-disabled-on-light' | 'text-icon-on-light';
-    /**
-     * Variant of the component (default: default) - embedded will render the component without any padding or border
-     */
-    variant?: 'default' | 'embedded';
+    themeColor?: keyof typeof ThemeColor;
     /**
      * Optional component to render instead of Textfields
      */
     component?: ReactNode;
+    /**
+     * Variant of the component (default: default)
+     * default: will render the plain component without the label
+     * embedded: will render the component with the label
+     */
+    componentVariant?: 'default' | 'embedded';
 };
 /**
  * Props for the InfoGroup component that defines the fields to render
  */
 interface InfoGroupProps {
     /**
-     * Array of fields to render in the InfoGroup
+     * Array of fields to render in the InfoGroup.
+     * Using a matrix [][] will render multiple rows of fields in a vertical layout
      */
     fields: FieldItem[] | FieldItem[][];
     /**

package/dist/components/InfoGroup/InfoGroup.js

@@ -1,67 +1,66 @@
-import { jsxs as s, jsx as e, Fragment as h } from "react/jsx-runtime";
-import { Divider as d, Group as c, TypoCaption as v, TypoSubtitle as g } from "@element/react-components";
-import { Fragment as u } from "react";
-import { u as f } from "../../useBreakpoints-BNeVhjjZ.js";
-import { VerticalDivider as y } from "../VerticalDivider/VerticalDivider.js";
-import { s as i } from "../../infoGroup.module-B3E1gCGi.js";
-const x = ({ fields: t, bold: n }) => {
-  const r = t.length > 1 && Array.isArray(t.at(0)) ? t.map((a, o) => /* @__PURE__ */ s(u, { children: [
-    o != 0 && /* @__PURE__ */ e("div", { "data-testid": "test-divider", className: i.dividerContainer, children: /* @__PURE__ */ e(d, {}) }),
-    /* @__PURE__ */ e(m, { fields: a, bold: n })
-  ] }, `row_${o}`)) : /* @__PURE__ */ e(m, { fields: t, bold: n });
-  return /* @__PURE__ */ e(c, { direction: "vertical", fullWidth: !0, className: i.mainGroup, children: r });
-}, m = ({ fields: t, bold: n }) => {
-  const { isDesktop: l } = f();
-  return /* @__PURE__ */ e(
-    c,
+import { jsxs as d, Fragment as p, jsx as t } from "react/jsx-runtime";
+import { Divider as h, Group as s, TypoCaption as g, TypoSubtitle as v } from "@element/react-components";
+import { useMemo as y, Fragment as A } from "react";
+import { u } from "../../useBreakpoints-BNeVhjjZ.js";
+import { s as l } from "../../infoGroup.module-Cxw88dfC.js";
+const w = ({ fields: r, bold: i }) => {
+  const { isDesktop: a } = u(), e = !!r.length && Array.isArray(r.at(0)), n = y(() => e && a ? r.map((o, c) => /* @__PURE__ */ d(p, { children: [
+    c != 0 && /* @__PURE__ */ t("span", { "data-testid": "test-divider", className: l.dividerContainer, children: /* @__PURE__ */ t(h, {}) }),
+    /* @__PURE__ */ t(m, { fields: o, bold: i })
+  ] })) : /* @__PURE__ */ t(m, { fields: r.flat(), bold: i }), [a, e, r, i]);
+  return /* @__PURE__ */ t(
+    s,
     {
-      direction: l ? "horizontal" : "vertical",
-      className: i.row,
+      "data-testid": "infoGroup",
+      direction: "vertical",
+      fullWidth: !0,
+      className: l.mainGroup,
+      gap: "none",
+      children: n
+    }
+  );
+}, m = ({ fields: r, bold: i }) => {
+  const { isDesktop: a } = u();
+  return /* @__PURE__ */ t(
+    s,
+    {
+      "data-testid": "singleRow",
       fullWidth: !0,
-      primaryAlign: "center",
-      secondaryAlign: "center",
-      children: t.map((r, a) => {
-        const o = l ? /* @__PURE__ */ e(y, { className: i.divider, height: "3rem" }) : /* @__PURE__ */ e(d, {});
-        return /* @__PURE__ */ s(u, { children: [
-          a != 0 && o,
-          /* @__PURE__ */ e(N, { field: r, bold: n, variant: r.variant })
-        ] }, `${r.label ?? "label"}_${a}`);
+      direction: a ? "horizontal" : "vertical",
+      secondaryAlign: "start",
+      children: r.map((e, n) => {
+        const o = a ? /* @__PURE__ */ t("div", { className: l.verticalDivider }) : /* @__PURE__ */ t(h, {});
+        return /* @__PURE__ */ d(A, { children: [
+          n != 0 && o,
+          /* @__PURE__ */ t(C, { field: e, bold: i, variant: e.componentVariant })
+        ] }, `${e.label ?? "label"}_${n}`);
       })
     }
   );
-}, N = ({
-  field: t,
-  bold: n,
-  variant: l = "default"
+}, C = ({
+  field: r,
+  bold: i,
+  variant: a = "default"
 }) => {
-  const { component: r, value: a, label: o, themeColor: p } = t;
-  return r && l === "default" ? /* @__PURE__ */ e("div", { className: i.componentContainer, children: /* @__PURE__ */ e("div", { className: i.component, children: r }) }) : /* @__PURE__ */ s(
-    c,
+  const { isDesktop: e } = u(), { component: n, value: o, label: c, themeColor: f } = r;
+  return n && a === "default" ? /* @__PURE__ */ t(s, { fullWidth: !0, primaryAlign: "center", className: l.centerDefaultComponent, children: n }) : /* @__PURE__ */ d(
+    s,
     {
-      "data-testid": "infoGroupItem",
-      direction: "vertical",
-      primaryAlign: "center",
-      secondaryAlign: "space-between",
       fullWidth: !0,
-      gap: "dense",
+      "data-testid": "infoGroupItem",
+      direction: e ? "vertical" : "horizontal",
+      gap: "none",
+      primaryAlign: e ? "start" : "space-between",
+      secondaryAlign: e ? "baseline" : "center",
+      className: e ? "" : l.textAlignRight,
       children: [
-        /* @__PURE__ */ e(v, { className: i.label, themeColor: "text-hint-on-light", children: o }),
-        a ? /* @__PURE__ */ e(
-          g,
-          {
-            level: 1,
-            "data-testid": "infoGroupValue",
-            themeColor: p,
-            bold: n,
-            className: i.valueText,
-            children: a
-          }
-        ) : /* @__PURE__ */ e(h, { children: r })
+        /* @__PURE__ */ t(g, { themeColor: "text-hint-on-light", children: c }),
+        n ? /* @__PURE__ */ t(p, { children: n }) : /* @__PURE__ */ t(v, { level: 1, "data-testid": "infoGroupValue", themeColor: f, bold: i, children: o })
       ]
     }
   );
 };
 export {
-  N as Cell,
-  x as InfoGroup
+  C as Cell,
+  w as InfoGroup
 };

package/dist/components/InfoGroup/InfoGroup.test.js

@@ -24,12 +24,12 @@ s("InfoGroup Test", () => {
       ]
     ] }));
     const n = t.getAllByTestId("infoGroupValue");
-    e(n.length).toBe(4), e(t.getByText("organization.create.registration-number")).toBeInTheDocument(), e(n[0]).toHaveTextContent("123"), e(t.getByText("myOrganizations.label-primary-contact")).toBeInTheDocument(), e(n[1]).toHaveTextContent("User A"), e(t.getByTestId("test-divider")).toBeInTheDocument(), e(t.getByText("myOrganizations.label-contact")).toBeInTheDocument(), e(n[2]).toHaveTextContent("User B"), e(t.getByText("organization.something-else")).toBeInTheDocument(), e(n[3]).toHaveTextContent("some");
+    e(n.length).toBe(4), e(t.getByText("organization.create.registration-number")).toBeInTheDocument(), e(n[0]).toHaveTextContent("123"), e(t.getByText("myOrganizations.label-primary-contact")).toBeInTheDocument(), e(n[1]).toHaveTextContent("User A"), e(t.getByTestId("infoGroup")).toBeInTheDocument(), e(t.getByTestId("singleRow")).toBeInTheDocument(), e(t.getAllByTestId("infoGroupItem").length).toBe(4), e(t.getByText("myOrganizations.label-contact")).toBeInTheDocument(), e(n[2]).toHaveTextContent("User B"), e(t.getByText("organization.something-else")).toBeInTheDocument(), e(n[3]).toHaveTextContent("some");
   }), i("render Single InfoGroup with component", () => {
     l(/* @__PURE__ */ o(r, { fields: [
       { label: "labelSouldntBeRendered", component: /* @__PURE__ */ o("div", { children: "Component" }) },
       { label: "myOrganizations.label-primary-contact", value: "User A" },
-      { label: "componentWithLabel", variant: "embedded", component: /* @__PURE__ */ o("div", { children: "Badge" }) }
+      { label: "componentWithLabel", componentVariant: "embedded", component: /* @__PURE__ */ o("div", { children: "Badge" }) }
     ] })), e(t.queryByText("labelSouldntBeRendered")).toBeNull(), e(t.getByText("Component")).toBeInTheDocument(), e(t.getByText("myOrganizations.label-primary-contact")).toBeInTheDocument(), e(t.getByText("User A")).toBeInTheDocument(), e(t.getByText("componentWithLabel")).toBeInTheDocument(), e(t.getByText("Badge")).toBeInTheDocument();
   });
 });

package/dist/enums/ThemeColor.d.ts

@@ -0,0 +1,15 @@
+export declare enum ThemeColor {
+    'primary' = 0,
+    'secondary' = 1,
+    'error' = 2,
+    'text-primary-on-background' = 3,
+    'text-secondary-on-background' = 4,
+    'text-hint-on-background' = 5,
+    'text-disabled-on-background' = 6,
+    'text-icon-on-background' = 7,
+    'text-primary-on-light' = 8,
+    'text-secondary-on-light' = 9,
+    'text-hint-on-light' = 10,
+    'text-disabled-on-light' = 11,
+    'text-icon-on-light' = 12
+}

package/dist/enums/ThemeColor.js

@@ -0,0 +1,4 @@
+var n = /* @__PURE__ */ ((t) => (t[t.primary = 0] = "primary", t[t.secondary = 1] = "secondary", t[t.error = 2] = "error", t[t["text-primary-on-background"] = 3] = "text-primary-on-background", t[t["text-secondary-on-background"] = 4] = "text-secondary-on-background", t[t["text-hint-on-background"] = 5] = "text-hint-on-background", t[t["text-disabled-on-background"] = 6] = "text-disabled-on-background", t[t["text-icon-on-background"] = 7] = "text-icon-on-background", t[t["text-primary-on-light"] = 8] = "text-primary-on-light", t[t["text-secondary-on-light"] = 9] = "text-secondary-on-light", t[t["text-hint-on-light"] = 10] = "text-hint-on-light", t[t["text-disabled-on-light"] = 11] = "text-disabled-on-light", t[t["text-icon-on-light"] = 12] = "text-icon-on-light", t))(n || {});
+export {
+  n as ThemeColor
+};

package/dist/infoGroup.module-Cxw88dfC.js

@@ -0,0 +1,12 @@
+import "./assets/infoGroup.css";
+const t = "_dividerContainer_4c1hq_1", i = "_fullWidth_4c1hq_6", e = "_centerDefaultComponent_4c1hq_10", n = "_verticalDivider_4c1hq_14", o = "_mainGroup_4c1hq_22", r = "_textAlignRight_4c1hq_28", _ = {
+  dividerContainer: t,
+  fullWidth: i,
+  centerDefaultComponent: e,
+  verticalDivider: n,
+  mainGroup: o,
+  textAlignRight: r
+};
+export {
+  _ as s
+};

package/dist/main.d.ts

@@ -1,4 +1,3 @@
-import './styles/main.css';
 export { AlertBanner } from './components/AlertBanner/AlertBanner';
 export { BaseView } from './components/BaseView/BaseView';
 export { BasicHeading } from './components/BasicHeading/BasicHeading';
@@ -26,6 +25,7 @@ export { FormSelect } from './components/FormComponents/FormSelect/FormSelect';
 export { FormSlider } from './components/FormComponents/FormSlider/FormSlider';
 export { FormText } from './components/FormComponents/FormText/FormText';
 export { AvailableCustomIcons } from './enums/AvailableCustomIcons';
+export { ThemeColor } from './enums/ThemeColor';
 export { useBreakpoints } from './hooks/useBreakpoints';
 export { capitalizeFirstLetters } from './services/UtilService';
 export type { FormSelectOption } from './components/FormComponents/FormSelect/FormSelect';

package/dist/main.js

@@ -8,11 +8,11 @@ import { DeleteModal as s } from "./components/DeleteModal/DeleteModal.js";
 import { Disclaimer as d } from "./components/Disclaimer/Disclaimer.js";
 import { EmptyView as S } from "./components/EmptyView/EmptyView.js";
 import { Filter as u } from "./components/Filter/Filter.js";
-import { GenericTable as V } from "./components/GenericTable/GenericTable.js";
-import { HashTabView as D } from "./components/HashTabView/HashTabView.js";
-import { HeaderFilter as T } from "./components/HeaderFilter/HeaderFilter.js";
-import { I as v } from "./Iconify-CY9lZjFd.js";
-import { InfoGroup as C } from "./components/InfoGroup/InfoGroup.js";
+import { GenericTable as T } from "./components/GenericTable/GenericTable.js";
+import { HashTabView as h } from "./components/HashTabView/HashTabView.js";
+import { HeaderFilter as C } from "./components/HeaderFilter/HeaderFilter.js";
+import { I } from "./Iconify-CY9lZjFd.js";
+import { InfoGroup as A } from "./components/InfoGroup/InfoGroup.js";
 import { ListArea as L } from "./components/ListArea/ListArea.js";
 import { LoadingSpinner as y } from "./components/LoadingSpinner/Default/LoadingSpinner.js";
 import { OverflowTooltip as M } from "./components/OverflowTooltip/OverflowTooltip.js";
@@ -26,8 +26,9 @@ import { FormSelect as W } from "./components/FormComponents/FormSelect/FormSele
 import { FormSlider as _ } from "./components/FormComponents/FormSlider/FormSlider.js";
 import { FormText as rr } from "./components/FormComponents/FormText/FormText.js";
 import { AvailableCustomIcons as er } from "./enums/AvailableCustomIcons.js";
-import { u as mr } from "./useBreakpoints-BNeVhjjZ.js";
-import { capitalizeFirstLetters as fr } from "./services/UtilService.js";
+import { ThemeColor as mr } from "./enums/ThemeColor.js";
+import { u as fr } from "./useBreakpoints-BNeVhjjZ.js";
+import { capitalizeFirstLetters as ir } from "./services/UtilService.js";
 export {
   t as AlertBanner,
   er as AvailableCustomIcons,
@@ -45,18 +46,19 @@ export {
   W as FormSelect,
   _ as FormSlider,
   rr as FormText,
-  V as GenericTable,
-  D as HashTabView,
-  T as HeaderFilter,
-  v as Iconify,
-  C as InfoGroup,
+  T as GenericTable,
+  h as HashTabView,
+  C as HeaderFilter,
+  I as Iconify,
+  A as InfoGroup,
   L as ListArea,
   y as LoadingSpinner,
   M as OverflowTooltip,
   E as ScrollbarX,
   O as ScrollbarY,
   R as SearchBar,
+  mr as ThemeColor,
   Y as VerticalDivider,
-  fr as capitalizeFirstLetters,
-  mr as useBreakpoints
+  ir as capitalizeFirstLetters,
+  fr as useBreakpoints
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "0.0.7373",
+  "version": "0.0.7428",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",
@@ -35,16 +35,16 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "1.5.0",
-    "@element/react-components": "^5.42.4",
+    "@element/react-components": "^5.42.8",
     "@element/themes": "^5.44.4",
-    "@storybook/addon-essentials": "^8.2.4",
-    "@storybook/addon-interactions": "^8.2.4",
-    "@storybook/addon-links": "^8.2.4",
-    "@storybook/addon-onboarding": "^8.2.4",
-    "@storybook/blocks": "^8.2.4",
-    "@storybook/react": "^8.2.4",
-    "@storybook/react-vite": "^8.2.4",
-    "@storybook/test": "^8.2.4",
+    "@storybook/addon-essentials": "^8.2.5",
+    "@storybook/addon-interactions": "^8.2.5",
+    "@storybook/addon-links": "^8.2.5",
+    "@storybook/addon-onboarding": "^8.2.5",
+    "@storybook/blocks": "^8.2.5",
+    "@storybook/react": "^8.2.5",
+    "@storybook/react-vite": "^8.2.5",
+    "@storybook/test": "^8.2.5",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
@@ -68,7 +68,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.2",
     "react-tooltip": "^5.26.4",
-    "storybook": "^8.2.4",
+    "storybook": "^8.2.5",
     "typescript": "^5.2.2",
     "vite": "^5.1.6",
     "vite-plugin-dts": "^3.7.3",

package/dist/HashTabView.module-CJX4gxTu.js

@@ -1,13 +0,0 @@
-import "./assets/HashTabView.css";
-const t = "_elevation_16c7u_1", n = "_themeBackground_16c7u_6", a = "_tabBar_16c7u_10", o = "_tabWrapper_16c7u_16", e = "_tabButton_16c7u_20", c = "_childContainer_16c7u_24", _ = "_childContainerPhone_16c7u_28", i = {
-  elevation: t,
-  themeBackground: n,
-  tabBar: a,
-  tabWrapper: o,
-  tabButton: e,
-  childContainer: c,
-  childContainerPhone: _
-};
-export {
-  i as s
-};

package/dist/infoGroup.module-B3E1gCGi.js

@@ -1,14 +0,0 @@
-import "./assets/infoGroup.css";
-const e = "_container_egebs_1", n = "_dividerContainer_egebs_10", o = "_mainGroup_egebs_16", t = "_row_egebs_21", _ = "_valueText_egebs_46", i = "_component_egebs_54", s = "_componentContainer_egebs_87", r = "_field_egebs_95", a = {
-  container: e,
-  dividerContainer: n,
-  mainGroup: o,
-  row: t,
-  valueText: _,
-  component: i,
-  componentContainer: s,
-  field: r
-};
-export {
-  a as s
-};