@hortiview/shared-components 2.10.0 → 2.10.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [2.10.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.10.0...v2.10.1) (2026-01-06)
+
+### Bug Fixes
+
+* fixed basic heading padding ([1a88475](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/1a88475f36310c5be9911609f88ce11f74bc26b0))
+* fixed last divider padding ([d9dd2c0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/d9dd2c0ed73092a2a66a006ed8ecc25b611e1f77))
+* fixed page heading width ([324e596](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/324e59630df1d0e8d8c20f68e6b646380114e0a8))
+
 ## [2.10.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.9.0...v2.10.0) (2026-01-06)
 
 ### Features

package/dist/assets/BasicHeading.css

@@ -1 +1 @@
-._basicHeading_imv0w_1{padding:.75rem;width:calc(100% - 1.75rem)}._actions_imv0w_6>button{max-height:48px}._invisible_imv0w_10{visibility:hidden}._leadingIcon_imv0w_14{margin-right:.5rem}._withAvatar_imv0w_18{margin-left:.25rem;padding-right:1rem;margin-top:0rem}._withAvatar_imv0w_18>._iconContainer_imv0w_24{scale:1.1}._iconContainer_imv0w_24{padding-right:.25rem}._cursor_imv0w_32{cursor:pointer}
+._basicHeading_14qaz_1{padding:.75rem 0}._basicHeading_14qaz_1>div:first-of-type{padding-left:1rem}._basicHeading_14qaz_1>div:last-of-type{padding-right:1rem}._basicHeading_14qaz_1._inList_14qaz_13>div:last-of-type{padding-right:.5rem!important}._actions_14qaz_17>button{max-height:48px}._actions_14qaz_17 button>span[class*=mdc-button__label]{width:max-content}._invisible_14qaz_25{visibility:hidden}._leadingIcon_14qaz_29{margin-right:.5rem}._withAvatar_14qaz_33{margin-left:.25rem;padding-right:1rem;margin-top:0rem}._withAvatar_14qaz_33>._iconContainer_14qaz_39{scale:1.1}._iconContainer_14qaz_39{padding-right:.5rem;display:flex;align-items:center}._cursor_14qaz_49{cursor:pointer}

package/dist/assets/InfoGroup.css

@@ -1 +1 @@
-._dividerContainer_v06ae_1{width:100%;padding:1rem 0}._fullWidth_v06ae_6{width:100%}._centerDefaultComponent_v06ae_10{margin:auto}._verticalDivider_v06ae_14{display:flex;align-self:stretch;height:auto;width:1px;background-color:var(--lmnt-theme-on-surface-stroke)}._mainGroup_v06ae_22{padding:1rem;border-radius:.5rem}._textAlignRight_v06ae_27{text-align:right}._typoColor_v06ae_31{color:var(--lmnt-theme-on-surface-inactive)}
+._dividerContainer_1bd14_1{width:100%;padding:1rem 0}._mainGroup_1bd14_6 ._dividerContainer_1bd14_1:last-of-type{padding-bottom:0}._mainGroup_1bd14_6{padding:1rem;border-radius:.5rem}._fullWidth_1bd14_15{width:100%}._centerDefaultComponent_1bd14_19{margin:auto}._verticalDivider_1bd14_23{display:flex;align-self:stretch;height:auto;width:1px;background-color:var(--lmnt-theme-on-surface-stroke)}._textAlignRight_1bd14_31{text-align:right}._typoColor_1bd14_35{color:var(--lmnt-theme-on-surface-inactive)}

package/dist/assets/SearchBar.css

@@ -1 +1 @@
-._searchbar_gnvwc_1 button{color:var(--lmnt-theme-on-surface-inactive)!important}
+._searchbar_g83qp_1 button{color:var(--lmnt-theme-on-surface-inactive)!important}._searchbar_g83qp_1 div[class*=mdc-notched-outline__leading]{border-radius:.25rem 0 0 .25rem!important}._searchbar_g83qp_1 div[class*=mdc-notched-outline__trailing]{border-radius:0 .25rem .25rem 0!important}

package/dist/components/BaseView/BaseView.js

@@ -1,17 +1,17 @@
-import { jsx as e, Fragment as l, jsxs as n } from "react/jsx-runtime";
+import { jsx as e, Fragment as a, jsxs as n } from "react/jsx-runtime";
 import { D as G } from "../../index.es-Bus5gEri.js";
 import { G as s } from "../../index.es-DsGuBR0Z.js";
-import { P } from "../../index.es-Bo1Rhtyb.js";
+import { P as V } from "../../index.es-Bo1Rhtyb.js";
 import { c as w } from "../../index-Cpb-8cAN.js";
 import { useMemo as d } from "react";
 import { BasicHeading as _ } from "../BasicHeading/BasicHeading.js";
-import { EmptyView as V } from "../EmptyView/EmptyView.js";
-import { ListArea as $ } from "../ListArea/ListArea.js";
-import { u as y } from "../../useBreakpoints-MzTZ0tCT.js";
-import { O as F } from "../../OfflineView-D168VIXv.js";
-import { useScrollableInfo as M } from "./BaseView.service.js";
-import '../../assets/BaseView.css';const O = "_fullHeight_1a5ww_1", T = "_fullWidth_1a5ww_5", q = "_maxWidth_1a5ww_9", z = "_list_1a5ww_14", J = "_desktopList_1a5ww_23", K = "_noRoundedCorners_1a5ww_28", Q = "_detail_1a5ww_32", U = "_desktopDetail_1a5ww_40", i = {
-  fullHeight: O,
+import { EmptyView as $ } from "../EmptyView/EmptyView.js";
+import { ListArea as y } from "../ListArea/ListArea.js";
+import { u as F } from "../../useBreakpoints-MzTZ0tCT.js";
+import { O as M } from "../../OfflineView-D168VIXv.js";
+import { useScrollableInfo as O } from "./BaseView.service.js";
+import '../../assets/BaseView.css';const P = "_fullHeight_1a5ww_1", T = "_fullWidth_1a5ww_5", q = "_maxWidth_1a5ww_9", z = "_list_1a5ww_14", J = "_desktopList_1a5ww_23", K = "_noRoundedCorners_1a5ww_28", Q = "_detail_1a5ww_32", U = "_desktopDetail_1a5ww_40", i = {
+  fullHeight: P,
   fullWidth: T,
   maxWidth: q,
   list: z,
@@ -21,19 +21,19 @@ import '../../assets/BaseView.css';const O = "_fullHeight_1a5ww_1", T = "_fullWi
   desktopDetail: U
 }, dt = ({
   heading: c,
-  action: m = /* @__PURE__ */ e(l, {}),
-  hint: g = /* @__PURE__ */ e(l, {}),
-  elements: a,
-  emptyText: u,
+  action: u = /* @__PURE__ */ e(a, {}),
+  hint: g = /* @__PURE__ */ e(a, {}),
+  elements: l,
+  emptyText: m,
   hasSearch: v = !0,
   isSorted: D = !0,
   className: W,
   withAvatar: k = !1,
   listMaxHeight: x = "calc(100vh - 220px)",
-  titleLevel: H = 5,
-  detailTitleLevel: L,
+  titleLevel: L = 5,
+  detailTitleLevel: b,
   pathname: r,
-  basicHeadingIcon: b,
+  basicHeadingIcon: H,
   isOnline: f = !0,
   offlineViewProps: h,
   noRoundedListItemEdges: p = !0,
@@ -41,7 +41,7 @@ import '../../assets/BaseView.css';const O = "_fullHeight_1a5ww_1", T = "_fullWi
   searchPlaceholder: B,
   isGrouped: R = !1
 }) => {
-  const { isDesktopNavbar: o } = y(), t = d(() => a.find((E) => E.route === r), [r, a]), C = d(() => f ? t?.component ? t.component : o ? /* @__PURE__ */ e(P, { className: i.fullWidth, children: /* @__PURE__ */ e(V, { title: u }) }) : /* @__PURE__ */ e(l, {}) : /* @__PURE__ */ e(F, { ...h, fullWidth: !0 }), [t?.component, u, o, f, h]), { showList: S, showDetail: A } = d(() => o ? { showList: !0, showDetail: !0 } : { showList: !t, showDetail: !!t }, [t, o]), { ref: I, hasScrolled: j } = M([
+  const { isDesktopNavbar: o } = F(), t = d(() => l.find((E) => E.route === r), [r, l]), C = d(() => f ? t?.component ? t.component : o ? /* @__PURE__ */ e(V, { className: i.fullWidth, children: /* @__PURE__ */ e($, { title: m }) }) : /* @__PURE__ */ e(a, {}) : /* @__PURE__ */ e(M, { ...h, fullWidth: !0 }), [t?.component, m, o, f, h]), { showList: I, showDetail: S } = d(() => o ? { showList: !0, showDetail: !0 } : { showList: !t, showDetail: !!t }, [t, o]), { ref: A, hasScrolled: j } = O([
     r,
     o
   ]);
@@ -52,7 +52,7 @@ import '../../assets/BaseView.css';const O = "_fullHeight_1a5ww_1", T = "_fullWi
       className: `${i.fullHeight} ${W ?? ""}`,
       fullWidth: !0,
       children: [
-        S && /* @__PURE__ */ n(
+        I && /* @__PURE__ */ n(
           s,
           {
             "data-testid": "show-list-container",
@@ -67,20 +67,21 @@ import '../../assets/BaseView.css';const O = "_fullHeight_1a5ww_1", T = "_fullWi
               c && /* @__PURE__ */ e(
                 _,
                 {
-                  icon: b,
+                  icon: H,
                   "data-testid": "heading",
                   heading: c,
-                  level: H,
+                  level: L,
                   marginBottom: 0,
-                  children: m
+                  inList: !0,
+                  children: u
                 }
               ),
               g,
               /* @__PURE__ */ e(
-                $,
+                y,
                 {
                   hasLastItemNoRoundedEdges: p,
-                  elements: a,
+                  elements: l,
                   hasSearch: v,
                   maxHeight: x,
                   isSorted: D,
@@ -93,7 +94,7 @@ import '../../assets/BaseView.css';const O = "_fullHeight_1a5ww_1", T = "_fullWi
             ]
           }
         ),
-        A && /* @__PURE__ */ n(
+        S && /* @__PURE__ */ n(
           s,
           {
             "data-testid": "show-details-container",
@@ -104,16 +105,15 @@ import '../../assets/BaseView.css';const O = "_fullHeight_1a5ww_1", T = "_fullWi
               /* @__PURE__ */ e(
                 _,
                 {
-                  customHeaderPadding: "0.75rem 0.75rem 0.75rem 1rem",
                   className: i.maxWidth,
                   heading: t?.detailTitle ?? t?.title ?? "",
-                  level: L,
-                  icon: t?.hideIconInDetail === !0 ? void 0 : t?.icon,
+                  level: b,
+                  icon: t?.hideIconInDetail === !0 ? void 0 : t?.detailIcon ?? t?.icon,
                   marginBottom: 0,
                   invisibleButton: t?.detailAction === void 0,
                   withAvatar: k,
                   subHeading: t?.detailSubTitle,
-                  children: t?.detailAction ?? m
+                  children: t?.detailAction ?? u
                 }
               ),
               j && /* @__PURE__ */ e(G, {}),
@@ -123,7 +123,7 @@ import '../../assets/BaseView.css';const O = "_fullHeight_1a5ww_1", T = "_fullWi
                   "data-testid": "base-view-show-details-scroll-component-group",
                   fullWidth: !0,
                   direction: "vertical",
-                  ref: I,
+                  ref: A,
                   children: C
                 }
               )

package/dist/components/BaseView/BaseView.test.js

@@ -1,8 +1,8 @@
 import { jsx as o, Fragment as s } from "react/jsx-runtime";
 import { a as n, s as e, f as p } from "../../react.esm-CX1WJ2Pp.js";
 import { a as l } from "../../useBreakpoints-MzTZ0tCT.js";
-import { BaseView as i } from "./BaseView.js";
-import { d as u, b as d, a as c, t as r, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+import { BaseView as r } from "./BaseView.js";
+import { d as u, b as d, a as c, t as i, g as t } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 u("BaseView Test", () => {
   d(() => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({
@@ -16,6 +16,7 @@ u("BaseView Test", () => {
     {
       id: "1",
       title: "user.personal_information",
+      detailIcon: "border_clear",
       icon: "account_circle",
       route: "/personal-profile/personal-information",
       component: /* @__PURE__ */ o(s, { children: "Personal information selected" })
@@ -37,10 +38,10 @@ u("BaseView Test", () => {
       component: /* @__PURE__ */ o(s, { children: "Security selected" })
     }
   ];
-  r("render BaseView with empty view and navigation list", () => {
+  i("render BaseView with empty view and navigation list", () => {
     n(
       /* @__PURE__ */ o(
-        i,
+        r,
         {
           pathname: "/personal-profile",
           elements: a,
@@ -52,10 +53,10 @@ u("BaseView Test", () => {
         }
       )
     ), t(e.getByText("user.noselection")).toBeInTheDocument(), t(e.getByText("user.personal-profile")).toBeInTheDocument(), t(e.getByText("user.personal_information")).toBeInTheDocument(), t(e.getByText("user.data_privacy")).toBeInTheDocument(), t(e.getByText("user.security")).toBeInTheDocument();
-  }), r("render BaseView with data and navigation list", () => {
+  }), i("render BaseView with data and navigation list", () => {
     n(
       /* @__PURE__ */ o(
-        i,
+        r,
         {
           pathname: "/personal-profile/personal-information",
           elements: a,
@@ -67,11 +68,11 @@ u("BaseView Test", () => {
           basicHeadingIcon: "directions_car"
         }
       )
-    ), t(e.getByText("Personal information selected")).toBeInTheDocument(), t(e.getAllByText("account_circle")).toHaveLength(2), t(e.getAllByText("user.personal_information")).toHaveLength(2), t(e.getByText("directions_car")).toBeInTheDocument();
-  }), r("render BaseView with custom detail title and no detail icon", () => {
+    ), t(e.getByText("Personal information selected")).toBeInTheDocument(), t(e.getAllByText("user.personal_information")).toHaveLength(2), t(e.getByText("account_circle")).toBeInTheDocument(), t(e.getByText("border_clear")).toBeInTheDocument(), t(e.getByText("directions_car")).toBeInTheDocument();
+  }), i("render BaseView with custom detail title and no detail icon", () => {
     n(
       /* @__PURE__ */ o(
-        i,
+        r,
         {
           pathname: "/personal-profile/data-privacy",
           elements: a,
@@ -83,7 +84,7 @@ u("BaseView Test", () => {
         }
       )
     ), t(e.getByText("Data Privacy selected")).toBeInTheDocument(), t(e.getByText("Data Privacy 2000")).toBeInTheDocument(), t(e.getAllByText("privacy_tip")).toHaveLength(1), t(e.getAllByText("user.data_privacy")).toHaveLength(1);
-  }), r("hide empty view when screen is small", () => {
+  }), i("hide empty view when screen is small", () => {
     c.spyOn(l, "useBreakpoints").mockReturnValue({
       isMobile: !0,
       isTablet: !1,
@@ -91,7 +92,7 @@ u("BaseView Test", () => {
       isDesktopNavbar: !1
     }), n(
       /* @__PURE__ */ o(
-        i,
+        r,
         {
           pathname: "/personal-profile/data-privacy",
           elements: a,
@@ -103,10 +104,10 @@ u("BaseView Test", () => {
         }
       )
     ), t(e.queryByText("user.noselection")).not.toBeInTheDocument();
-  }), r("render BaseView with selected detail section", () => {
+  }), i("render BaseView with selected detail section", () => {
     n(
       /* @__PURE__ */ o(
-        i,
+        r,
         {
           pathname: "/personal-profile/data-privacy",
           elements: a,
@@ -118,10 +119,10 @@ u("BaseView Test", () => {
         }
       )
     ), p.click(e.getAllByRole("option")[1]), t(e.getByText("Data Privacy selected")).toBeInTheDocument();
-  }), r("renders only offline view when offline", () => {
+  }), i("renders only offline view when offline", () => {
     n(
       /* @__PURE__ */ o(
-        i,
+        r,
         {
           pathname: "/personal-profile/personal-information",
           elements: a,

package/dist/components/BasicHeading/BasicHeading.d.ts

@@ -47,5 +47,10 @@ export type BasicHeadingProps = {
      * @default false
      */
     withAvatar?: boolean;
+    /**
+     * if true the header will have an avatar
+     * @default false
+     */
+    inList?: boolean;
 };
-export declare const BasicHeading: ({ children, marginBottom, heading, icon, className, subHeading, subHeadingLevel, invisibleButton, level, fontWeight, withAvatar, }: PropsWithChildren<BasicHeadingProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const BasicHeading: ({ children, marginBottom, heading, icon, className, subHeading, subHeadingLevel, invisibleButton, level, fontWeight, withAvatar, inList, }: PropsWithChildren<BasicHeadingProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BasicHeading/BasicHeading.js

@@ -1,89 +1,94 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { G as t } from "../../index.es-DsGuBR0Z.js";
-import { I as u } from "../../index.es-DYs8W4jv.js";
-import { b as w, T as h } from "../../index.es-DCSgIiJH.js";
-import { c as I } from "../../index-Cpb-8cAN.js";
-import { Iconify as A } from "../Iconify/Iconify.js";
-import { AvailableCustomIcons as H } from "../../enums/AvailableCustomIcons.js";
+import { I as A } from "../../index.es-DYs8W4jv.js";
+import { b as I, T as z } from "../../index.es-DCSgIiJH.js";
+import { c as d } from "../../index-Cpb-8cAN.js";
+import { Iconify as H } from "../Iconify/Iconify.js";
+import { AvailableCustomIcons as q } from "../../enums/AvailableCustomIcons.js";
 import { u as N } from "../../useBreakpoints-MzTZ0tCT.js";
-import { OverflowTooltip as x } from "../OverflowTooltip/OverflowTooltip.js";
-import '../../assets/BasicHeading.css';const C = "_basicHeading_imv0w_1", T = "_actions_imv0w_6", B = "_invisible_imv0w_10", j = "_leadingIcon_imv0w_14", k = "_withAvatar_imv0w_18", z = "_iconContainer_imv0w_24", n = {
-  basicHeading: C,
+import { OverflowTooltip as w } from "../OverflowTooltip/OverflowTooltip.js";
+import '../../assets/BasicHeading.css';const x = "_basicHeading_14qaz_1", C = "_inList_14qaz_13", T = "_actions_14qaz_17", B = "_invisible_14qaz_25", L = "_leadingIcon_14qaz_29", W = "_withAvatar_14qaz_33", j = "_iconContainer_14qaz_39", n = {
+  basicHeading: x,
+  inList: C,
   actions: T,
   invisible: B,
-  leadingIcon: j,
-  withAvatar: k,
-  iconContainer: z
-}, D = ({ icon: i }) => i ? typeof i != "string" ? /* @__PURE__ */ e("div", { className: n.iconContainer, children: i }) : i in H ? /* @__PURE__ */ e(
-  A,
+  leadingIcon: L,
+  withAvatar: W,
+  iconContainer: j
+}, k = ({ icon: i }) => i ? typeof i != "string" ? /* @__PURE__ */ e("div", { className: n.iconContainer, children: i }) : i in q ? /* @__PURE__ */ e(
+  H,
   {
     icon: i,
     className: n.leadingIcon,
     iconSize: "medium",
     iconType: "filled"
   }
-) : /* @__PURE__ */ e(u, { iconSize: "medium", iconType: "filled", icon: i, className: n.leadingIcon }) : null, q = ({
+) : /* @__PURE__ */ e(A, { iconSize: "medium", iconType: "filled", icon: i, className: n.leadingIcon }) : null, J = ({
   children: i,
-  marginBottom: s,
+  marginBottom: o,
   heading: a,
   icon: m,
-  className: d,
-  subHeading: p,
+  className: p,
+  subHeading: f,
   subHeadingLevel: g = 2,
-  invisibleButton: f = !1,
+  invisibleButton: _ = !1,
   level: r = 5,
   fontWeight: c = 400,
-  withAvatar: v = !1
+  withAvatar: u = !1,
+  inList: y = !1
 }) => {
-  const { isDesktop: l } = N(), y = l ? r : r + 1, _ = c === "bold" ? 500 : c, b = typeof s == "number" ? `${s}px` : "2rem";
-  return /* @__PURE__ */ o(
+  const { isDesktop: l } = N(), v = l ? r : r + 1, b = c === "bold" ? 500 : c, h = typeof o == "number" ? `${o}px` : "2rem";
+  return /* @__PURE__ */ s(
     t,
     {
       primaryAlign: "space-between",
       secondaryAlign: "center",
       gap: "none",
-      className: n.basicHeading,
-      style: { marginBottom: b },
+      className: d(n.basicHeading, y && n.inList),
+      style: { marginBottom: h },
       "data-testid": "HeaderContainer",
+      fullWidth: !0,
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ s(
           t,
           {
             secondaryAlign: "center",
             gap: "none",
-            className: `${v && l ? n.withAvatar : ""}`,
+            className: `${u && l ? n.withAvatar : ""}`,
+            fullWidth: !0,
             children: [
-              /* @__PURE__ */ e(D, { icon: m }),
-              /* @__PURE__ */ o(t, { direction: "vertical", gap: "none", children: [
-                /* @__PURE__ */ e(x, { id: a, text: a, children: /* @__PURE__ */ e(
-                  w,
+              /* @__PURE__ */ e(k, { icon: m }),
+              /* @__PURE__ */ s(t, { direction: "vertical", gap: "none", fullWidth: !0, children: [
+                /* @__PURE__ */ e(w, { id: a, text: a, children: /* @__PURE__ */ e(
+                  I,
                   {
-                    level: y,
+                    level: v,
                     "data-testid": "Header",
-                    className: d ?? "",
-                    style: { fontWeight: _ },
+                    className: p ?? "",
+                    style: { fontWeight: b },
                     children: a
                   }
                 ) }),
-                /* @__PURE__ */ e(h, { level: g, children: p })
+                /* @__PURE__ */ e(z, { level: g, children: f })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ e(
+        i ? /* @__PURE__ */ e(
           t,
           {
+            primaryAlign: "end",
             secondaryAlign: "center",
             gap: "dense",
-            className: I(f && n.invisible, n.actions),
+            className: d(_ && n.invisible, n.actions),
             "data-testid": "RightPart",
             children: i
           }
-        )
+        ) : null
       ]
     }
   );
 };
 export {
-  q as BasicHeading
+  J as BasicHeading
 };

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

@@ -1,20 +1,20 @@
 import { jsx as o, Fragment as d } from "react/jsx-runtime";
 import { B as g } from "../../index.es-DUcI2Zyr.js";
-import { a as i, s as t } from "../../react.esm-CX1WJ2Pp.js";
-import { BasicHeading as a } from "./BasicHeading.js";
+import { a, s as t } from "../../react.esm-CX1WJ2Pp.js";
+import { BasicHeading as i } from "./BasicHeading.js";
 import { d as h, t as s, g as e } from "../../vi.CjhMlMwf-CKxPQtd6.js";
 h("BasicHeading-Test", () => {
   s("render small container without content", () => {
-    i(/* @__PURE__ */ o(a, { heading: "Test" }));
+    a(/* @__PURE__ */ o(i, { heading: "Test" }));
     const n = t.getByTestId("HeaderContainer");
     e(n).toBeDefined();
     const r = t.getByTestId("Header");
     e(r).toBeDefined(), e(r).toHaveTextContent("Test");
-    const c = t.getByTestId("RightPart");
-    e(c).toBeDefined();
+    const c = t.queryByTestId("RightPart");
+    e(c).toBeNull();
   }), s("render large container with children", () => {
-    i(
-      /* @__PURE__ */ o(a, { heading: "Test", marginBottom: "large", children: /* @__PURE__ */ o(g, { children: "Extracontent" }) })
+    a(
+      /* @__PURE__ */ o(i, { heading: "Test", marginBottom: "large", children: /* @__PURE__ */ o(g, { children: "Extracontent" }) })
     );
     const n = t.getByTestId("HeaderContainer");
     e(n).toBeDefined();
@@ -23,13 +23,13 @@ h("BasicHeading-Test", () => {
     const c = t.getByTestId("RightPart");
     e(c).toBeDefined(), e(c).toContainHTML("<button");
   }), s("render with available custom icon", () => {
-    i(/* @__PURE__ */ o(a, { heading: "Test", icon: "farm" }));
+    a(/* @__PURE__ */ o(i, { heading: "Test", icon: "farm" }));
     const n = t.getByTestId("farm");
     e(n).toBeInTheDocument();
   }), s("render with JSX element as icon", () => {
-    i(/* @__PURE__ */ o(a, { heading: "Test", icon: /* @__PURE__ */ o(d, { children: "JSX" }) })), e(t.getByText("JSX")).toBeInTheDocument();
+    a(/* @__PURE__ */ o(i, { heading: "Test", icon: /* @__PURE__ */ o(d, { children: "JSX" }) })), e(t.getByText("JSX")).toBeInTheDocument();
   }), s("render with other icon", () => {
-    i(/* @__PURE__ */ o(a, { heading: "Test", icon: "contact_support" }));
+    a(/* @__PURE__ */ o(i, { heading: "Test", icon: "contact_support" }));
     const n = document.querySelector("i");
     e(n).toHaveTextContent("contact_support");
   });

package/dist/components/InfoGroup/InfoGroup.js

@@ -1,65 +1,65 @@
-import { jsxs as p, Fragment as v, jsx as t } from "react/jsx-runtime";
+import { jsxs as p, Fragment as h, jsx as t } from "react/jsx-runtime";
 import { D as d } from "../../index.es-Bus5gEri.js";
 import { G as c } from "../../index.es-DsGuBR0Z.js";
 import { a as g, d as _ } from "../../index.es-DCSgIiJH.js";
 import { useMemo as f, Fragment as C } from "react";
 import { u as m } from "../../useBreakpoints-MzTZ0tCT.js";
-import '../../assets/InfoGroup.css';const y = "_dividerContainer_v06ae_1", D = "_centerDefaultComponent_v06ae_10", A = "_verticalDivider_v06ae_14", G = "_mainGroup_v06ae_22", N = "_textAlignRight_v06ae_27", R = "_typoColor_v06ae_31", o = {
+import '../../assets/InfoGroup.css';const y = "_dividerContainer_1bd14_1", D = "_mainGroup_1bd14_6", b = "_centerDefaultComponent_1bd14_19", A = "_verticalDivider_1bd14_23", G = "_textAlignRight_1bd14_31", N = "_typoColor_1bd14_35", a = {
   dividerContainer: y,
-  centerDefaultComponent: D,
+  mainGroup: D,
+  centerDefaultComponent: b,
   verticalDivider: A,
-  mainGroup: G,
-  textAlignRight: N,
-  typoColor: R
+  textAlignRight: G,
+  typoColor: N
 }, j = ({ fields: r, bold: i }) => {
-  const { isDesktop: a } = m(), e = !!r.length && Array.isArray(r.at(0)), n = f(() => e && a ? r.map((l, s) => /* @__PURE__ */ p(v, { children: [
-    s != 0 && /* @__PURE__ */ t("span", { "data-testid": "test-divider", className: o.dividerContainer, children: /* @__PURE__ */ t(d, {}) }),
+  const { isDesktop: o } = m(), e = !!r.length && Array.isArray(r.at(0)), n = f(() => e && o ? r.map((l, s) => /* @__PURE__ */ p(h, { children: [
+    s != 0 && /* @__PURE__ */ t("span", { "data-testid": "test-divider", className: a.dividerContainer, children: /* @__PURE__ */ t(d, {}) }),
     /* @__PURE__ */ t(u, { fields: l, bold: i }),
     s === r.length - 1 && /* @__PURE__ */ t(
       "span",
       {
         "data-testid": "test-divider-end",
-        className: o.dividerContainer,
+        className: a.dividerContainer,
         children: /* @__PURE__ */ t(d, {})
       }
     )
-  ] })) : /* @__PURE__ */ t(u, { fields: r.flat(), bold: i }), [a, e, r, i]);
+  ] })) : /* @__PURE__ */ t(u, { fields: r.flat(), bold: i }), [o, e, r, i]);
   return /* @__PURE__ */ t(
     c,
     {
       "data-testid": "infoGroup",
       direction: "vertical",
       fullWidth: !0,
-      className: o.mainGroup,
+      className: a.mainGroup,
       gap: "none",
       children: n
     }
   );
 }, u = ({ fields: r, bold: i }) => {
-  const { isDesktop: a } = m();
+  const { isDesktop: o } = m();
   return /* @__PURE__ */ t(
     c,
     {
       "data-testid": "singleRow",
       fullWidth: !0,
-      direction: a ? "horizontal" : "vertical",
+      direction: o ? "horizontal" : "vertical",
       secondaryAlign: "start",
       children: r.map((e, n) => {
-        const l = a ? /* @__PURE__ */ t("div", { className: o.verticalDivider }) : /* @__PURE__ */ t(d, {});
+        const l = o ? /* @__PURE__ */ t("div", { className: a.verticalDivider }) : /* @__PURE__ */ t(d, {});
         return /* @__PURE__ */ p(C, { children: [
           n != 0 && l,
-          /* @__PURE__ */ t(x, { field: e, bold: i, variant: e.componentVariant })
+          /* @__PURE__ */ t(R, { field: e, bold: i, variant: e.componentVariant })
         ] }, `${e.label ?? "label"}_${n}`);
       })
     }
   );
-}, x = ({
+}, R = ({
   field: r,
   bold: i,
-  variant: a = "default"
+  variant: o = "default"
 }) => {
-  const { isDesktop: e } = m(), { component: n, value: l, label: s, themeColor: h } = r;
-  return n && a === "default" ? /* @__PURE__ */ t(c, { fullWidth: !0, primaryAlign: "center", className: o.centerDefaultComponent, children: n }) : /* @__PURE__ */ p(
+  const { isDesktop: e } = m(), { component: n, value: l, label: s, themeColor: v } = r;
+  return n && o === "default" ? /* @__PURE__ */ t(c, { fullWidth: !0, primaryAlign: "center", className: a.centerDefaultComponent, children: n }) : /* @__PURE__ */ p(
     c,
     {
       fullWidth: !0,
@@ -68,15 +68,15 @@ import '../../assets/InfoGroup.css';const y = "_dividerContainer_v06ae_1", D = "
       gap: "none",
       primaryAlign: e ? "start" : "space-between",
       secondaryAlign: e ? "baseline" : "center",
-      className: e ? "" : o.textAlignRight,
+      className: e ? "" : a.textAlignRight,
       children: [
-        /* @__PURE__ */ t(g, { className: o.typoColor, children: s }),
-        n ? /* @__PURE__ */ t(v, { children: n }) : /* @__PURE__ */ t(_, { level: 1, "data-testid": "infoGroupValue", themeColor: h, bold: i, children: l })
+        /* @__PURE__ */ t(g, { className: a.typoColor, children: s }),
+        n ? /* @__PURE__ */ t(h, { children: n }) : /* @__PURE__ */ t(_, { level: 1, "data-testid": "infoGroupValue", themeColor: v, bold: i, children: l })
       ]
     }
   );
 };
 export {
-  x as Cell,
+  R as Cell,
   j as InfoGroup
 };

package/dist/components/SearchBar/SearchBar.d.ts

@@ -1,6 +1,6 @@
 import { TextfieldProps } from '@element-public/react-textfield';
 
-type SearchBarProps = Pick<TextfieldProps, 'placeholder' | 'dense' | 'className' | 'fullWidth'> & {
+type SearchBarProps = Pick<TextfieldProps, 'placeholder' | 'dense' | 'className' | 'fullWidth' | 'label'> & {
     /**
      * the current search term
      */
@@ -10,5 +10,5 @@ type SearchBarProps = Pick<TextfieldProps, 'placeholder' | 'dense' | 'className'
      */
     setSearchTerm: (value: string) => void;
 };
-export declare const SearchBar: ({ className, dense, searchTerm, setSearchTerm, placeholder, fullWidth, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchBar: ({ className, dense, searchTerm, setSearchTerm, placeholder, fullWidth, label }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SearchBar/SearchBar.js

@@ -1,28 +1,30 @@
 import { jsx as o } from "react/jsx-runtime";
-import { I as i } from "../../index.es-BzdG6flH.js";
-import { T as l } from "../../index.es-BLolvOHO.js";
-import '../../assets/SearchBar.css';const u = "_searchbar_gnvwc_1", b = {
-  searchbar: u
-}, f = ({
+import { I as l } from "../../index.es-BzdG6flH.js";
+import { T as u } from "../../index.es-BLolvOHO.js";
+import '../../assets/SearchBar.css';const b = "_searchbar_g83qp_1", d = {
+  searchbar: b
+}, g = ({
   className: r = "",
-  dense: n = !1,
+  dense: e = !1,
   searchTerm: t,
   setSearchTerm: a,
-  placeholder: e,
-  fullWidth: s = !0
+  placeholder: n,
+  fullWidth: s = !0,
+  label: c
 }) => /* @__PURE__ */ o(
-  l,
+  u,
   {
     "data-testid": "search-bar-input",
-    className: `${r ?? ""} ${b.searchbar}`,
-    dense: n,
+    className: `${r ?? ""} ${d.searchbar}`,
+    dense: e,
+    label: c,
     variant: "outlined",
-    placeholder: e,
+    placeholder: n,
     value: t,
-    onChange: (c) => a(c.target.value),
+    onChange: (i) => a(i.target.value),
     fullWidth: s,
     trailingIcon: /* @__PURE__ */ o(
-      i,
+      l,
       {
         "data-testid": "search-bar-icon-button",
         icon: t ? "close" : "search",
@@ -33,5 +35,5 @@ import '../../assets/SearchBar.css';const u = "_searchbar_gnvwc_1", b = {
   }
 );
 export {
-  f as SearchBar
+  g as SearchBar
 };

package/dist/types/ListElement.d.ts

@@ -31,7 +31,11 @@ export type BaseListElement = {
      */
     title: string;
     /**
-     * the baseview normally show the title in the detail view, if you want to show a different title set this
+     * the baseview normally show the item icon in the detail view, if you want to show a different icon set this
+     */
+    detailIcon?: JSX.Element | string;
+    /**
+     * the baseview normally show the item title in the detail view, if you want to show a different title set this
      */
     detailTitle?: string;
     /**

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": "2.10.0",
+  "version": "2.10.1",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",