@hortiview/shared-components 0.0.5053 → 0.0.5110

package/dist/ListAreaService-DhlEJxAH.js

@@ -0,0 +1,74 @@
+import "./assets/ListAreaService.css";
+import { jsx as l } from "react/jsx-runtime";
+import { TypoButton as C, TypoSubtitle as L, TypoBody as x, Icon as N } from "@element/react-components";
+import { Iconify as E } from "./components/Iconify/Iconify.js";
+import { AvailableCustomIcons as $ } from "./enums/AvailableCustomIcons.js";
+const W = "_fullWidth_1y0ty_1", j = "_mainElevation_1y0ty_5", S = "_searchbar_1y0ty_11", w = "_roundedBottom_1y0ty_19", A = "_list_1y0ty_24", G = "_listItem_1y0ty_52", O = "_trailingIcon_1y0ty_56", P = "_groupedListItem_1y0ty_68", _ = {
+  fullWidth: W,
+  mainElevation: j,
+  searchbar: S,
+  roundedBottom: w,
+  list: A,
+  listItem: G,
+  trailingIcon: O,
+  groupedListItem: P
+}, M = (t, i, n, r) => {
+  const s = t.reduce((o, m) => {
+    const { groupName: e, ...a } = m;
+    return !e || typeof e != "string" || (o[e] || (o[e] = {
+      groupName: /* @__PURE__ */ l(C, { children: e }),
+      id: e,
+      items: []
+    }), o[e].items = [
+      ...o[e].items,
+      g(a, i, n, !0, r)
+    ]), o;
+  }, {});
+  return Object.values(s);
+}, Q = (t, i, n, r) => t.map((s) => g(s, i, n, !1, r)), g = (t, i, n, r, s) => {
+  const {
+    id: o,
+    title: m,
+    subTitle: e,
+    route: a,
+    value: I,
+    noNavigation: y,
+    disabled: d,
+    icon: v,
+    iconType: p,
+    trailingIcon: f,
+    trailingIconType: T,
+    actionButton: h,
+    onClick: B,
+    customTitle: u,
+    listItemClassName: b
+  } = t, c = i === a;
+  return {
+    id: o,
+    key: o,
+    select: c,
+    primaryText: u ?? /* @__PURE__ */ l(L, { level: 1, bold: c, themeColor: c ? "primary" : void 0, children: m }),
+    secondaryText: e && !u ? /* @__PURE__ */ l(x, { level: 2, themeColor: c ? "primary" : void 0, children: e }) : void 0,
+    overlineText: t.overlineTitle,
+    trailingBlock: h ?? f ?? /* @__PURE__ */ l(N, { icon: "arrow_right" }),
+    leadingBlock: q(v),
+    value: I,
+    componentProps: {
+      id: o,
+      key: o,
+      leadingBlockType: p ?? "icon",
+      trailingBlockType: T ?? "icon",
+      className: `${p === "avatar" ? "" : _.listItem} ${n} ${r ? _.groupedListItem : ""} ${b ?? ""}`,
+      onClick: (z, k) => B?.(k),
+      tag: d || y ? void 0 : s ?? "a",
+      to: d || y ? void 0 : a,
+      disabled: d
+    }
+  };
+}, q = (t) => typeof t == "string" && t in $ ? /* @__PURE__ */ l(E, { icon: t }) : t;
+export {
+  Q as a,
+  M as g,
+  g as m,
+  _ as s
+};

package/dist/assets/AlertBanner.css

@@ -1 +1 @@
-._messageContainer_92aoe_1{border-radius:.25rem;padding:.5rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._message_92aoe_1{color:var(--lmnt-theme-on-surface-active);font-weight:700}._info_92aoe_13{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_92aoe_18{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_92aoe_23{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}
+._messageContainer_1kpsp_1{border-radius:.25rem;padding:.5rem 1rem;width:-moz-available;width:-webkit-fill-available;width:stretch}._info_1kpsp_9{border:1px solid var(--lmnt-theme-on-secondary-stroke);background:var(--lmnt-theme-secondary-50)}._danger_1kpsp_14{border:1px solid var(--lmnt-theme-on-danger-stroke);background:var(--lmnt-theme-danger-50)}._success_1kpsp_19{border:1px solid var(--lmnt-theme-on-success-stroke);background:var(--lmnt-theme-success-50)}

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,20 +1,19 @@
 import "../../assets/AlertBanner.css";
-import { jsx as e, Fragment as t, jsxs as c } from "react/jsx-runtime";
-import { Group as m, TypoBody as g } from "@element/react-components";
-import { a as _ } from "../../useBreakpoint-DROHPVxO.js";
-const l = "_messageContainer_92aoe_1", d = "_message_92aoe_1", p = "_info_92aoe_13", f = "_danger_92aoe_18", u = "_success_92aoe_23", n = {
-  messageContainer: l,
-  message: d,
-  info: p,
-  danger: f,
-  success: u
-}, A = ({ text: s, color: o = "info", isOpen: r = !0, action: a }) => {
-  const { isLg: i } = _();
-  return r ? /* @__PURE__ */ e("div", { className: `${n.messageContainer} ${n[o]}`, children: /* @__PURE__ */ c(m, { direction: i ? "horizontal" : "vertical", primaryAlign: "space-between", secondaryAlign: "center", children: [
-    typeof s == "string" ? /* @__PURE__ */ e(g, { bold: !0, level: 2, children: s }) : /* @__PURE__ */ e("div", { children: s }),
-    a
-  ] }) }) : /* @__PURE__ */ e(t, {});
+import { jsx as e, Fragment as a, jsxs as c } from "react/jsx-runtime";
+import { Group as p, TypoBody as l } from "@element/react-components";
+import { a as m } from "../../useBreakpoint-DROHPVxO.js";
+const d = "_messageContainer_1kpsp_1", g = "_info_1kpsp_9", _ = "_danger_1kpsp_14", f = "_success_1kpsp_19", n = {
+  messageContainer: d,
+  info: g,
+  danger: _,
+  success: f
+}, v = ({ text: s, color: r = "info", isOpen: o = !0, action: i }) => {
+  const { isLg: t } = m();
+  return o ? /* @__PURE__ */ e("div", { className: `${n.messageContainer} ${n[r]}`, children: /* @__PURE__ */ c(p, { direction: t ? "horizontal" : "vertical", primaryAlign: "space-between", secondaryAlign: "center", children: [
+    typeof s == "string" ? /* @__PURE__ */ e(l, { bold: !0, level: 2, children: s }) : /* @__PURE__ */ e("div", { children: s }),
+    i
+  ] }) }) : /* @__PURE__ */ e(a, {});
 };
 export {
-  A as AlertBanner
+  v as AlertBanner
 };

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,40 +1,50 @@
 import "../../assets/ContextMenu.css";
 import { jsx as n } from "react/jsx-runtime";
-import { Menu as c, IconButton as m, List as r, ListItem as d } from "@element/react-components";
-import { useState as f, useCallback as s, useEffect as p } from "react";
-const y = "_menu_1rfel_1", B = {
-  menu: y
-}, k = ({ triggerOpen: o = null, actions: l }) => {
-  const [e, t] = f(!1), i = s(() => {
+import { Menu as a, IconButton as m, List as r, ListItem as d } from "@element/react-components";
+import { useState as f, useCallback as i, useEffect as p } from "react";
+const C = "_menu_1rfel_1", k = {
+  menu: C
+}, h = ({ triggerOpen: o = null, actions: u }) => {
+  const [e, t] = f(!1), c = i(() => {
     t(!e);
-  }, [e]), u = s(() => {
+  }, [e]), s = i(() => {
     t(!1);
   }, []);
   return p(() => {
     t(o !== null ? o : !1);
   }, [o]), /* @__PURE__ */ n(
-    c,
+    a,
     {
-      className: B.menu,
+      className: k.menu,
       "data-testid": "selectionmenu",
       open: e,
       surfaceOnly: !0,
       hoistToBody: !0,
-      onClose: u,
+      onClose: s,
       trigger: /* @__PURE__ */ n(
         m,
         {
           variant: e ? "filled-primary" : void 0,
           "data-testid": "openButton",
           icon: "more_vert",
-          onClick: i
+          onClick: c
         }
       ),
-      children: /* @__PURE__ */ n(r, { children: l.map((a) => /* @__PURE__ */ n(d, { ...a, leadingBlockType: "icon", "data-testid": "listItemButton" })) })
+      children: /* @__PURE__ */ n(r, { children: u.map((l) => /* @__PURE__ */ n(
+        d,
+        {
+          ...l,
+          leadingBlockType: "icon",
+          "data-testid": "listItemButton",
+          onClick: () => {
+            l?.onClick?.(), s();
+          }
+        }
+      )) })
     },
     "selectionmenu"
   );
 };
 export {
-  k as ContextMenu
+  h as ContextMenu
 };

package/dist/components/ListArea/ListArea.js

@@ -4,7 +4,7 @@ import { g as Hr } from "../../_commonjsHelpers-CT_km90n.js";
 import { _ as H, a as Tr, b as wr, c as T, d as Nr, e as Wr, i as h, f as N, h as B, j as Xr, k as zr, l as I, m as Yr, n as Zr, o as Jr, p as W, q as Qr, r as Or, s as Pr, t as kr, u as Vr } from "../../get-Dyz8NMrE.js";
 import { useState as re, useMemo as k } from "react";
 import { SearchBar as ee } from "../SearchBar/SearchBar.js";
-import { g as ae, a as te, s as m } from "../../ListAreaService-jz92va76.js";
+import { g as ae, a as te, s as m } from "../../ListAreaService-DhlEJxAH.js";
 var ne = H;
 function se() {
   this.__data__ = new ne(), this.size = 0;

package/dist/components/ListArea/ListArea.test.js

@@ -2,7 +2,7 @@ import { jsx as r, Fragment as i } from "react/jsx-runtime";
 import { TypoButton as p } from "@element/react-components";
 import { r as s, s as a, f as u } from "../../react.esm-C0LtovhP.js";
 import { ListArea as c } from "./ListArea.js";
-import { g as h } from "../../ListAreaService-jz92va76.js";
+import { g as h } from "../../ListAreaService-DhlEJxAH.js";
 import { d as m, t as n, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
 m("ListArea Test", () => {
   const o = [

package/dist/components/ListArea/ListAreaService.d.ts

@@ -21,6 +21,8 @@ export declare const getGroupedItems: (items: ListElement[], pathname: string, i
  * @returns an array of objects with List component schema
  */
 export declare const getListedItems: (items: ListElement[], pathname: string, itemClassName: string, routerLinkElement: undefined | React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>) => {
+    id: string;
+    key: string;
     select: boolean;
     primaryText: JSX.Element;
     secondaryText: import("react/jsx-runtime").JSX.Element | undefined;
@@ -29,6 +31,8 @@ export declare const getListedItems: (items: ListElement[], pathname: string, it
     leadingBlock: string | JSX.Element | undefined;
     value: string | undefined;
     componentProps: {
+        id: string;
+        key: string;
         leadingBlockType: "icon" | "badge" | "image" | "meta" | "checkbox" | "radio" | "switch" | "avatar" | "lgImage" | "thumbnail";
         trailingBlockType: "icon" | "badge" | "image" | "meta" | "checkbox" | "radio" | "switch" | "avatar" | "lgImage" | "thumbnail";
         className: string;
@@ -47,6 +51,8 @@ export declare const getListedItems: (items: ListElement[], pathname: string, it
  * @returns an object with List component schema
  */
 export declare const mapListElement: (element: ListElement, pathname: string | undefined, itemClassName: string | undefined, isGrouped: boolean, routerLinkElement: undefined | React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>) => {
+    id: string;
+    key: string;
     select: boolean;
     primaryText: JSX.Element;
     secondaryText: import("react/jsx-runtime").JSX.Element | undefined;
@@ -55,6 +61,8 @@ export declare const mapListElement: (element: ListElement, pathname: string | u
     leadingBlock: string | JSX.Element | undefined;
     value: string | undefined;
     componentProps: {
+        id: string;
+        key: string;
         leadingBlockType: "icon" | "badge" | "image" | "meta" | "checkbox" | "radio" | "switch" | "avatar" | "lgImage" | "thumbnail";
         trailingBlockType: "icon" | "badge" | "image" | "meta" | "checkbox" | "radio" | "switch" | "avatar" | "lgImage" | "thumbnail";
         className: string;

package/dist/components/ListArea/ListAreaService.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "@element/react-components";
 import "../Iconify/Iconify.js";
 import "../../enums/AvailableCustomIcons.js";
-import { g as s, a as i, m as a } from "../../ListAreaService-jz92va76.js";
+import { g as s, a as i, m as a } from "../../ListAreaService-DhlEJxAH.js";
 export {
   s as getGroupedItems,
   i as getListedItems,

package/dist/types/ListElement.d.ts

@@ -96,4 +96,8 @@ export type ListElement = Omit<BaseListElement, 'component'> & {
      * will be rendered instead of title and subtitle
      */
     customTitle?: JSX.Element;
+    /**
+     * a custom class name for the list item
+     */
+    listItemClassName?: 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": "0.0.5053",
+  "version": "0.0.5110",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",

package/dist/ListAreaService-jz92va76.js

@@ -1,68 +0,0 @@
-import "./assets/ListAreaService.css";
-import { jsx as l } from "react/jsx-runtime";
-import { TypoButton as b, TypoSubtitle as k, TypoBody as L, Icon as x } from "@element/react-components";
-import { Iconify as C } from "./components/Iconify/Iconify.js";
-import { AvailableCustomIcons as E } from "./enums/AvailableCustomIcons.js";
-const N = "_fullWidth_1y0ty_1", W = "_mainElevation_1y0ty_5", $ = "_searchbar_1y0ty_11", j = "_roundedBottom_1y0ty_19", S = "_list_1y0ty_24", w = "_listItem_1y0ty_52", A = "_trailingIcon_1y0ty_56", G = "_groupedListItem_1y0ty_68", _ = {
-  fullWidth: N,
-  mainElevation: W,
-  searchbar: $,
-  roundedBottom: j,
-  list: S,
-  listItem: w,
-  trailingIcon: A,
-  groupedListItem: G
-}, J = (t, i, n, r) => {
-  const s = t.reduce((e, a) => {
-    const { groupName: o, ...m } = a;
-    return !o || typeof o != "string" || (e[o] || (e[o] = {
-      groupName: /* @__PURE__ */ l(b, { children: o }),
-      id: o,
-      items: []
-    }), e[o].items = [
-      ...e[o].items,
-      g(m, i, n, !0, r)
-    ]), e;
-  }, {});
-  return Object.values(s);
-}, K = (t, i, n, r) => t.map((s) => g(s, i, n, !1, r)), g = (t, i, n, r, s) => {
-  const {
-    title: e,
-    subTitle: a,
-    route: o,
-    value: m,
-    noNavigation: y,
-    disabled: d,
-    icon: I,
-    iconType: p,
-    trailingIcon: v,
-    trailingIconType: f,
-    actionButton: T,
-    onClick: h,
-    customTitle: u
-  } = t, c = i === o;
-  return {
-    select: c,
-    primaryText: u ?? /* @__PURE__ */ l(k, { level: 1, bold: c, themeColor: c ? "primary" : void 0, children: e }),
-    secondaryText: a && !u ? /* @__PURE__ */ l(L, { level: 2, themeColor: c ? "primary" : void 0, children: a }) : void 0,
-    overlineText: t.overlineTitle,
-    trailingBlock: T ?? v ?? /* @__PURE__ */ l(x, { icon: "arrow_right" }),
-    leadingBlock: O(I),
-    value: m,
-    componentProps: {
-      leadingBlockType: p ?? "icon",
-      trailingBlockType: f ?? "icon",
-      className: `${p === "avatar" ? "" : _.listItem} ${n} ${r ? _.groupedListItem : ""}`,
-      onClick: (P, B) => h?.(B),
-      tag: d || y ? void 0 : s ?? "a",
-      to: d || y ? void 0 : o,
-      disabled: d
-    }
-  };
-}, O = (t) => typeof t == "string" && t in E ? /* @__PURE__ */ l(C, { icon: t }) : t;
-export {
-  K as a,
-  J as g,
-  g as m,
-  _ as s
-};