@hortiview/shared-components 0.0.4870 → 0.0.4991

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/README.md +72 -2
  2. package/dist/ListAreaService-8vnw7uAP.js +68 -0
  3. package/dist/assets/ContextMenu.css +1 -0
  4. package/dist/assets/InfoGroup.css +1 -0
  5. package/dist/assets/ListAreaService.css +1 -1
  6. package/dist/components/BaseView/BaseView.test.js +1 -1
  7. package/dist/components/BasicHeading/BasicHeading.test.js +1 -1
  8. package/dist/components/BlockView/BlockView.test.js +1 -1
  9. package/dist/components/ContextMenu/ContextMenu.d.ts +27 -0
  10. package/dist/components/ContextMenu/ContextMenu.js +40 -0
  11. package/dist/components/ContextMenu/ContextMenu.test.d.ts +1 -0
  12. package/dist/components/ContextMenu/ContextMenu.test.js +22 -0
  13. package/dist/components/DeleteModal/DeleteModal.test.js +1 -1
  14. package/dist/components/Disclaimer/Disclaimer.test.js +1 -1
  15. package/dist/components/EmptyView/EmptyView.test.js +1 -1
  16. package/dist/components/FormComponents/FormCheckBox/FormCheckBox.test.js +1 -1
  17. package/dist/components/FormComponents/FormDatePicker/FormDatePicker.test.js +1 -1
  18. package/dist/components/FormComponents/FormRadio/FormRadio.test.js +1 -1
  19. package/dist/components/FormComponents/FormSelect/FormSelect.test.js +1 -1
  20. package/dist/components/FormComponents/FormSlider/FormSlider.test.js +1 -1
  21. package/dist/components/FormComponents/FormText/FormText.test.js +1 -1
  22. package/dist/components/HashTabView/HashTabView.test.js +1 -1
  23. package/dist/components/HeaderFilter/HeaderFilter.test.js +1 -1
  24. package/dist/components/Iconify/Iconify.test.js +1 -1
  25. package/dist/components/InfoGroup/InfoGroup.d.ts +53 -0
  26. package/dist/components/InfoGroup/InfoGroup.js +60 -0
  27. package/dist/components/InfoGroup/InfoGroup.test.d.ts +1 -0
  28. package/dist/components/InfoGroup/InfoGroup.test.js +40 -0
  29. package/dist/components/ListArea/ListArea.js +1 -1
  30. package/dist/components/ListArea/ListArea.test.js +2 -2
  31. package/dist/components/ListArea/ListAreaService.d.ts +2 -0
  32. package/dist/components/ListArea/ListAreaService.js +1 -1
  33. package/dist/components/Scrollbar/scrollbar.test.js +1 -1
  34. package/dist/components/SearchBar/SearchBar.test.js +1 -1
  35. package/dist/components/VerticalDivider/VerticalDivider.test.js +1 -1
  36. package/dist/main.d.ts +4 -1
  37. package/dist/main.js +45 -41
  38. package/dist/{react.esm-BeDwcQWb.js → react.esm-C0LtovhP.js} +2 -1
  39. package/dist/types/ListElement.d.ts +4 -0
  40. package/package.json +1 -1
  41. package/dist/ListAreaService-BPp_O2BH.js +0 -67
package/README.md CHANGED
@@ -14,7 +14,7 @@ This is a shared component library. It should used in the HortiView platform and
14
14
 
15
15
  ## Prerequisites
16
16
 
17
- This library is based in Bayers element component library. To use it properly you need to install this package first.
17
+ This library is based in Bayers element component library. To use it properly you need to install this package first.
18
18
  To get access to this restricted package please contact your Bayer contact person.
19
19
 
20
20
  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.
@@ -23,13 +23,14 @@ After you gain access use `yarn add @element/react-components @element/themes` o
23
23
 
24
24
  For the best experience use [react-router](https://reactrouter.com/en/main) in your solution, because some of the component rely on properties like pathname, hash or components like `Link` out of `react-router`.
25
25
 
26
- Additionally the library provides form components using [react-hook-form](https://react-hook-form.com/get-started). When you want to use these components please install `react-hook-form` before using them.
26
+ Additionally the library provides form components using [react-hook-form](https://react-hook-form.com/get-started). When you want to use these components please install `react-hook-form` before using them.
27
27
 
28
28
  ## Available packages:
29
29
 
30
30
  1. [BaseView](#baseview)
31
31
  1. [BasicHeading](#basicheading)
32
32
  1. [BlockView](#blockview)
33
+ 1. [ContextMenu](#contextmenu)
33
34
  1. [DeleteModal](#deletemodal)
34
35
  1. [Disclaimer](#disclaimer)
35
36
  1. [EmptyView](#emptyview)
@@ -42,6 +43,7 @@ Additionally the library provides form components using [react-hook-form](https:
42
43
  1. [FormText](#formtext)
43
44
  1. [HashTabView](#hashtabview)
44
45
  1. [HeaderFilter](#headerfilter)
46
+ 1. [InfoGroup](#infogroup)
45
47
  1. [Iconify](#iconify)
46
48
  1. [ListArea](#listarea)
47
49
  1. [ScrollBar](#scrollbar)
@@ -120,6 +122,31 @@ const blocks: BlockDto = [
120
122
  <BlockView blocks={blocks} columns={1} rows={1} />;
121
123
  ```
122
124
 
125
+ ### ContextMenu
126
+
127
+ This is a component to render a menu button, that opens several action-points in a context-menu
128
+
129
+ ```typescript
130
+ import { ContextMenu } from '@hortiview/shared-components';
131
+
132
+ const actions = [
133
+ {
134
+ primaryText: 'Edit',
135
+ secondaryText: 'Open the edit dialog',
136
+ onClick: () => openEdit(param),
137
+ leadingBlock: 'edit',
138
+ },
139
+ {
140
+ primaryText: 'Delete',
141
+ secondaryText: 'Delete the item'
142
+ onClick: deleteItem,
143
+ leadingBlock: 'delete',
144
+ },
145
+ ];
146
+
147
+ <ContextMenu actions={actions} />;
148
+ ```
149
+
123
150
  ### DeleteModal
124
151
 
125
152
  A modal to confirm a deletion.
@@ -390,6 +417,49 @@ const [filterValue, setFilterValue] = useState<string>();
390
417
  />;
391
418
  ```
392
419
 
420
+ ### InfoGroup
421
+
422
+ Renders a section with several informations rendered next to each other (or below for mobile view)
423
+
424
+ ```typescript
425
+ import { InfoGroup } from '@hortiview/shared-components';
426
+
427
+ const fields: FieldItem[] = [
428
+ { label: 'FieldTitle', value: 'Value' },
429
+ { label: 'AnotherFieldTitle', value: 'ValueButInPrimaryColor', themeColor: 'primary' },
430
+ //render a component below the label
431
+ { label: 'StatusBadge', variant: 'embedded', component: <LabelBadge label='redLabel' themeColor='red'>}
432
+ //render a complex component without label
433
+ { label: 'ComplexComponent', component: <ComplexComponent />}
434
+ ]
435
+
436
+ <InfoGroup fields={fields} />
437
+ ```
438
+
439
+ You can also render a multiline section, that receives an array if FieldItem-Arrays instead of a single FieldItem-Array
440
+ ```typescript
441
+ import { InfoGroup } from '@hortiview/shared-components';
442
+
443
+ const multiLineFields: FieldItem[][] = [
444
+ [
445
+ { label: 'FieldTitle', value: 'Value' },
446
+ { label: 'AnotherFieldTitle', value: 'ValueButInPrimaryColor', themeColor: 'primary' }
447
+ ],
448
+ [
449
+ { label: 'LongField', value: 'VeryLongValueThatNeedsToBeDisplayedInANewLine'}
450
+ ],
451
+ [
452
+ { label: 'ComplexComponent', component: <ComplexComponent />},
453
+ { label: 'FieldTitle2', value: 'Value2' },
454
+ { label: 'FieldTitle3', value: 'Value3' },
455
+ { label: 'FieldTitle4', value: 'Value4' },
456
+ ]
457
+ ]
458
+
459
+ <InfoGroup fields={multiLineFields} />
460
+
461
+ ```
462
+
393
463
  ### Iconify
394
464
 
395
465
  Provides some custom icons based on the elements Icon API. Currently supported:
@@ -0,0 +1,68 @@
1
+ import "./assets/ListAreaService.css";
2
+ import { jsx as l } from "react/jsx-runtime";
3
+ import { TypoButton as b, TypoSubtitle as k, TypoBody as L, Icon as x } from "@element/react-components";
4
+ import { Iconify as C } from "./components/Iconify/Iconify.js";
5
+ import { AvailableCustomIcons as E } from "./enums/AvailableCustomIcons.js";
6
+ 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", u = {
7
+ fullWidth: N,
8
+ mainElevation: W,
9
+ searchbar: $,
10
+ roundedBottom: j,
11
+ list: S,
12
+ listItem: w,
13
+ trailingIcon: A,
14
+ groupedListItem: G
15
+ }, J = (t, i, n, r) => {
16
+ const s = t.reduce((e, a) => {
17
+ const { groupName: o, ...m } = a;
18
+ return !o || typeof o != "string" || (e[o] || (e[o] = {
19
+ groupName: /* @__PURE__ */ l(b, { children: o }),
20
+ id: o,
21
+ items: []
22
+ }), e[o].items = [
23
+ ...e[o].items,
24
+ _(m, i, n, !0, r)
25
+ ]), e;
26
+ }, {});
27
+ return Object.values(s);
28
+ }, K = (t, i, n, r) => t.map((s) => _(s, i, n, !1, r)), _ = (t, i, n, r, s) => {
29
+ const {
30
+ title: e,
31
+ subTitle: a,
32
+ route: o,
33
+ value: m,
34
+ noNavigation: d,
35
+ disabled: g,
36
+ icon: I,
37
+ iconType: y,
38
+ trailingIcon: v,
39
+ trailingIconType: f,
40
+ actionButton: T,
41
+ onClick: h,
42
+ customTitle: p
43
+ } = t, c = i === o;
44
+ return {
45
+ select: c,
46
+ primaryText: p ?? /* @__PURE__ */ l(k, { level: 1, bold: c, themeColor: c ? "primary" : void 0, children: e }),
47
+ secondaryText: a && !p ? /* @__PURE__ */ l(L, { level: 2, themeColor: c ? "primary" : void 0, children: a }) : void 0,
48
+ overlineText: t.overlineTitle,
49
+ trailingBlock: T ?? v ?? /* @__PURE__ */ l(x, { icon: "arrow_right" }),
50
+ leadingBlock: O(I),
51
+ nonInteractive: g,
52
+ value: m,
53
+ componentProps: {
54
+ leadingBlockType: y ?? "icon",
55
+ trailingBlockType: f ?? "icon",
56
+ className: `${y === "avatar" ? "" : u.listItem} ${n} ${r ? u.groupedListItem : ""}`,
57
+ onClick: (P, B) => h?.(B),
58
+ tag: d ? void 0 : s ?? "a",
59
+ to: d ? void 0 : o
60
+ }
61
+ };
62
+ }, O = (t) => typeof t == "string" && t in E ? /* @__PURE__ */ l(C, { icon: t }) : t;
63
+ export {
64
+ K as a,
65
+ J as g,
66
+ _ as m,
67
+ u as s
68
+ };
@@ -0,0 +1 @@
1
+ ._menu_1rfel_1{width:15.875rem}
@@ -0,0 +1 @@
1
+ ._container_7ypbj_1{width:100%;padding:0;@media only screen and (max-width: 838px){padding-top:.5rem}}._dividerContainer_7ypbj_10{width:100%;padding:0rem 1rem;margin:-1rem 0rem}._mainGroup_7ypbj_16{border:.0775rem solid var(--lmnt-on-surface-stroke, rgba(0, 0, 0, .12));border-radius:.5rem}._row_7ypbj_21{min-height:5.5vh;padding:1rem}._row_7ypbj_21 input:not([type=checkbox]){@media only screen and (max-width: 839px){height:80%}}._row_7ypbj_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_7ypbj_21 label{font-size:1.2rem}:before{border:none!important}._component_7ypbj_51{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_7ypbj_51>div{display:flex;justify-content:space-between;width:100%}._component_7ypbj_51>div label{font-size:1rem;color:#00000061;font-weight:500}._componentContainer_7ypbj_84{width:100%!important;@media only screen and (max-width: 839px){margin-top:1rem;margin-bottom:-.5rem}}._field_7ypbj_92{width:100%;padding:0rem .5rem;align-self:center;display:flex;flex-direction:column}
@@ -1 +1 @@
1
- ._fullWidth_1l0qh_1{width:100%}._mainElevation_1l0qh_5{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_1l0qh_11 div{border:none}._searchbar_1l0qh_11 button{margin-right:.5rem}._roundedBottom_1l0qh_19{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._list_1l0qh_24{padding-top:0;padding-bottom:0;overflow-y:auto}._list_1l0qh_24::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_1l0qh_24::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_1l0qh_24::-webkit-scrollbar-thumb{border-radius:.5rem;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--lmnt-theme-primary-on-surface)}._listItem_1l0qh_48{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_1l0qh_48 i:not(._trailingIcon_1l0qh_52){color:var(--lmnt-theme-on-surface-inactive)}._listItem_1l0qh_48 i._trailingIcon_1l0qh_52{color:var(--lmnt-theme-on-surface-disabled)}._listItem_1l0qh_48 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_1l0qh_64{height:4.5rem!important}
1
+ ._fullWidth_1y0ty_1{width:100%}._mainElevation_1y0ty_5{background:var(--lmnt-theme-background);border-radius:.5rem;width:100%}._searchbar_1y0ty_11 div{border:none}._searchbar_1y0ty_11 button{margin-right:.5rem}._roundedBottom_1y0ty_19{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}._list_1y0ty_24{padding-top:0;padding-bottom:0;overflow-y:auto}._list_1y0ty_24 [class*=mdc-list-item__overline-text]{margin-bottom:-1.5rem}._list_1y0ty_24::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 .25rem rgba(0,0,0,.2);border-radius:.5rem;margin-right:.25rem;background-color:var(--lmnt-theme-background)}._list_1y0ty_24::-webkit-scrollbar{width:.5rem;background-color:var(--lmnt-theme-background)}._list_1y0ty_24::-webkit-scrollbar-thumb{border-radius:.5rem;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--lmnt-theme-primary-on-surface)}._listItem_1y0ty_52{border-bottom:.0775rem solid var(--lmnt-utility-gray-surface)}._listItem_1y0ty_52 i:not(._trailingIcon_1y0ty_56){color:var(--lmnt-theme-on-surface-inactive)}._listItem_1y0ty_52 i._trailingIcon_1y0ty_56{color:var(--lmnt-theme-on-surface-disabled)}._listItem_1y0ty_52 [class^=mdc-list-item__start]{margin:0 1rem!important;align-self:center!important}._groupedListItem_1y0ty_68{height:4.5rem!important}
@@ -1,7 +1,7 @@
1
1
  import { jsx as a, Fragment as s } from "react/jsx-runtime";
2
2
  import { u as l } from "../../useBreakpoint-DROHPVxO.js";
3
3
  import { BaseView as r } from "./BaseView.js";
4
- import { r as i, s as e, f as p } from "../../react.esm-BeDwcQWb.js";
4
+ import { r as i, s as e, f as p } from "../../react.esm-C0LtovhP.js";
5
5
  import { d as u, b as m, t as n, g as t, v as c } from "../../vi.JYQecGiw-BbUbJcT8.js";
6
6
  u("BaseView Test", () => {
7
7
  m(() => {
@@ -1,7 +1,7 @@
1
1
  import { jsx as o, Fragment as c } from "react/jsx-runtime";
2
2
  import { Button as g } from "@element/react-components";
3
3
  import { BasicHeading as a } from "./BasicHeading.js";
4
- import { r as i, s as n } from "../../react.esm-BeDwcQWb.js";
4
+ import { r as i, s as n } from "../../react.esm-C0LtovhP.js";
5
5
  import { d as h, t as s, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
6
6
  h("BasicHeading-Test", () => {
7
7
  s("render small container without content", () => {
@@ -1,5 +1,5 @@
1
1
  import { jsx as l } from "react/jsx-runtime";
2
- import { r as s, s as o, f as n } from "../../react.esm-BeDwcQWb.js";
2
+ import { r as s, s as o, f as n } from "../../react.esm-C0LtovhP.js";
3
3
  import { BlockView as r } from "./BlockView.js";
4
4
  import { d as B, v as a, t as i, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  B("BlockView Test", () => {
@@ -0,0 +1,27 @@
1
+ import { ListItemProps } from '@element/react-components';
2
+ type ContextMenuProps = {
3
+ /**
4
+ * If not null, the menu will be open
5
+ */
6
+ triggerOpen?: boolean | null;
7
+ /**
8
+ * List of actions to display in the context menu as ListItems
9
+ * @see ListItemProps
10
+ */
11
+ actions: ListItemProps[];
12
+ };
13
+ /**
14
+ *
15
+ * @param {boolean} triggerOpen indicates if the menu should be open
16
+ * @param {ListItemProps[]} actions list of actions to display in the context menu as ListItems
17
+ * @recommended `primaryText`, `onClick`, `leadingBlock`
18
+ * @requires `ListItemProps` from `@element/react-components`
19
+ * @example const actions = [
20
+ * { primaryText: 'Open', onClick: () => openSomeModal(), leadingBlock: 'add' },
21
+ * { primaryText: 'Delete', onClick: () => DeleteSomeThing(), leadingBlock: 'delete_outline'},
22
+ * { primaryText: 'Edit', onClick: () => EditSomeThing(), leadingBlock: 'edit'},
23
+ * ];
24
+ * @returns a context menu with the given actions as ListItems
25
+ */
26
+ export declare const ContextMenu: ({ triggerOpen, actions }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
27
+ export {};
@@ -0,0 +1,40 @@
1
+ import "../../assets/ContextMenu.css";
2
+ import { jsx as n } from "react/jsx-runtime";
3
+ import { Menu as c, IconButton as m, List as r, ListItem as d } from "@element/react-components";
4
+ import { useState as f, useCallback as s, useEffect as p } from "react";
5
+ const y = "_menu_1rfel_1", B = {
6
+ menu: y
7
+ }, k = ({ triggerOpen: o = null, actions: l }) => {
8
+ const [e, t] = f(!1), i = s(() => {
9
+ t(!e);
10
+ }, [e]), u = s(() => {
11
+ t(!1);
12
+ }, []);
13
+ return p(() => {
14
+ t(o !== null ? o : !1);
15
+ }, [o]), /* @__PURE__ */ n(
16
+ c,
17
+ {
18
+ className: B.menu,
19
+ "data-testid": "selectionmenu",
20
+ open: e,
21
+ surfaceOnly: !0,
22
+ hoistToBody: !0,
23
+ onClose: u,
24
+ trigger: /* @__PURE__ */ n(
25
+ m,
26
+ {
27
+ variant: e ? "filled-primary" : void 0,
28
+ "data-testid": "openButton",
29
+ icon: "more_vert",
30
+ onClick: i
31
+ }
32
+ ),
33
+ children: /* @__PURE__ */ n(r, { children: l.map((a) => /* @__PURE__ */ n(d, { ...a, leadingBlockType: "icon", "data-testid": "listItemButton" })) })
34
+ },
35
+ "selectionmenu"
36
+ );
37
+ };
38
+ export {
39
+ k as ContextMenu
40
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,22 @@
1
+ import { jsx as d } from "react/jsx-runtime";
2
+ import { r, s as n, f as o, w as a } from "../../react.esm-C0LtovhP.js";
3
+ import { ContextMenu as u } from "./ContextMenu.js";
4
+ import { v as m, d as C, t as B, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
5
+ const T = m.fn(), l = m.fn(), i = m.fn(), p = [
6
+ { primaryText: "Open", onClick: T, leadingBlock: "add" },
7
+ { primaryText: "Delete", onClick: i, leadingBlock: "delete_outline" },
8
+ { primaryText: "Edit", onClick: l, leadingBlock: "edit" }
9
+ ];
10
+ C("ContextMenu Test", () => {
11
+ B("render ContextMenu and open it", () => {
12
+ r(/* @__PURE__ */ d(u, { actions: p }));
13
+ const c = n.getByTestId("openButton"), t = n.getByTestId("selectionmenu");
14
+ e(t).toBeInTheDocument(), e(t).not.toHaveClass("mdc-menu-surface--open"), o.click(c), a(() => e(t).toHaveClass("mdc-menu-surface--open"));
15
+ const s = n.getAllByTestId("listItemButton");
16
+ e(s.length).toBe(3), e(n.getByText("Open")).toBeInTheDocument(), e(n.getByText("Delete")).toBeInTheDocument(), e(n.getByText("Edit")).toBeInTheDocument(), o.click(s[0]), e(T).toHaveBeenCalled(), e(i).not.toHaveBeenCalled(), e(l).not.toHaveBeenCalled(), o.click(s[1]), e(i).toHaveBeenCalled(), o.click(s[2]), e(l).toHaveBeenCalled();
17
+ }), B("render contextMenu and close it", () => {
18
+ r(/* @__PURE__ */ d(u, { actions: p }));
19
+ const c = n.getByTestId("openButton"), t = n.getByTestId("selectionmenu");
20
+ e(t).toBeInTheDocument(), e(t).not.toHaveClass("mdc-menu-surface--open"), o.click(c), a(() => e(t).toHaveClass("mdc-menu-surface--open")), o.click(c), a(() => e(t).not.toHaveClass("mdc-menu-surface--open"));
21
+ });
22
+ });
@@ -1,5 +1,5 @@
1
1
  import { jsx as n } from "react/jsx-runtime";
2
- import { r as c, s as e } from "../../react.esm-BeDwcQWb.js";
2
+ import { r as c, s as e } from "../../react.esm-C0LtovhP.js";
3
3
  import { DeleteModal as b } from "./DeleteModal.js";
4
4
  import { d as B, t as a, v as o, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  B("DeleteModal Test", () => {
@@ -1,5 +1,5 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
- import { r, s as t } from "../../react.esm-BeDwcQWb.js";
2
+ import { r, s as t } from "../../react.esm-C0LtovhP.js";
3
3
  import { Disclaimer as s } from "./Disclaimer.js";
4
4
  import { d as i, t as m, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  i("Disclaimer test", () => {
@@ -1,5 +1,5 @@
1
1
  import { jsx as o } from "react/jsx-runtime";
2
- import { r as s, s as d } from "../../react.esm-BeDwcQWb.js";
2
+ import { r as s, s as d } from "../../react.esm-C0LtovhP.js";
3
3
  import { EmptyView as n } from "./EmptyView.js";
4
4
  import { d as i, t as r, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  i("EmptyView", () => {
@@ -1,5 +1,5 @@
1
1
  import { jsx as s } from "react/jsx-runtime";
2
- import { r as n, s as t, f as m } from "../../../react.esm-BeDwcQWb.js";
2
+ import { r as n, s as t, f as m } from "../../../react.esm-C0LtovhP.js";
3
3
  import { FormCheckBox as c } from "./FormCheckBox.js";
4
4
  import { v as e, d as h, t as l, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  const a = e.fn();
@@ -1,5 +1,5 @@
1
1
  import { jsx as n } from "react/jsx-runtime";
2
- import { r as s, s as a, f as m } from "../../../react.esm-BeDwcQWb.js";
2
+ import { r as s, s as a, f as m } from "../../../react.esm-C0LtovhP.js";
3
3
  import { FormDatePicker as c } from "./FormDatePicker.js";
4
4
  import { v as e, d as f, t as l, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  const i = e.fn();
@@ -1,5 +1,5 @@
1
1
  import { jsx as n } from "react/jsx-runtime";
2
- import { r as s, s as t, f as m } from "../../../react.esm-BeDwcQWb.js";
2
+ import { r as s, s as t, f as m } from "../../../react.esm-C0LtovhP.js";
3
3
  import { FormRadio as l } from "./FormRadio.js";
4
4
  import { v as e, d as c, t as i, g as o } from "../../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  const a = e.fn();
@@ -1,5 +1,5 @@
1
1
  import { jsx as s } from "react/jsx-runtime";
2
- import { r as a, s as r } from "../../../react.esm-BeDwcQWb.js";
2
+ import { r as a, s as r } from "../../../react.esm-C0LtovhP.js";
3
3
  import { FormSelect as c } from "./FormSelect.js";
4
4
  import { v as e, d as l, t as u, g as t } from "../../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  const m = e.fn();
@@ -1,5 +1,5 @@
1
1
  import { jsx as s } from "react/jsx-runtime";
2
- import { r as a, s as n } from "../../../react.esm-BeDwcQWb.js";
2
+ import { r as a, s as n } from "../../../react.esm-C0LtovhP.js";
3
3
  import { FormSlider as l } from "./FormSlider.js";
4
4
  import { v as e, d as m, t as i, g as r } from "../../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  const o = e.fn();
@@ -1,5 +1,5 @@
1
1
  import { jsx as n } from "react/jsx-runtime";
2
- import { r as s, s as r, f as d } from "../../../react.esm-BeDwcQWb.js";
2
+ import { r as s, s as r, f as d } from "../../../react.esm-C0LtovhP.js";
3
3
  import { FormText as l } from "./FormText.js";
4
4
  import { v as a, d as i, t as o, g as t } from "../../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  const m = a.fn();
@@ -1,5 +1,5 @@
1
1
  import { jsx as n, Fragment as o } from "react/jsx-runtime";
2
- import { r as a, s as e, f as r } from "../../react.esm-BeDwcQWb.js";
2
+ import { r as a, s as e, f as r } from "../../react.esm-C0LtovhP.js";
3
3
  import { HashTabView as c } from "./HashTabView.js";
4
4
  import { d as h, t as l, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  const m = [
@@ -1,5 +1,5 @@
1
1
  import { jsx as n } from "react/jsx-runtime";
2
- import { r as i, s as t, f as T } from "../../react.esm-BeDwcQWb.js";
2
+ import { r as i, s as t, f as T } from "../../react.esm-C0LtovhP.js";
3
3
  import { HeaderFilter as s } from "./HeaderFilter.js";
4
4
  import { d as c, t as o, v as l, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  c("HeaderFilter-Test", () => {
@@ -1,7 +1,7 @@
1
1
  import { jsx as n } from "react/jsx-runtime";
2
2
  import { Iconify as c } from "./Iconify.js";
3
3
  import { AvailableCustomIcons as d } from "../../enums/AvailableCustomIcons.js";
4
- import { r, s as i } from "../../react.esm-BeDwcQWb.js";
4
+ import { r, s as i } from "../../react.esm-C0LtovhP.js";
5
5
  import { d as l, t as s, g as o } from "../../vi.JYQecGiw-BbUbJcT8.js";
6
6
  l("Iconify Test", () => {
7
7
  const m = Object.keys(d).filter((e) => isNaN(Number(e)));
@@ -0,0 +1,53 @@
1
+ import React, { ReactNode } from 'react';
2
+ /**
3
+ * FieldItem type that defines the structure of the fields to render in the InfoGroup component
4
+ */
5
+ export type FieldItem = {
6
+ /**
7
+ * Label for the Textfield
8
+ */
9
+ label?: string;
10
+ /**
11
+ * Current value of the Textfield
12
+ */
13
+ value?: string;
14
+ /**
15
+ * ThemeColor for the Textfield (default: none)
16
+ */
17
+ 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';
18
+ /**
19
+ * Variant of the component (default: default) - embedded will render the component without any padding or border
20
+ */
21
+ variant?: 'default' | 'embedded';
22
+ /**
23
+ * Optional component to render instead of Textfields
24
+ */
25
+ component?: ReactNode;
26
+ };
27
+ /**
28
+ * Props for the InfoGroup component that defines the fields to render
29
+ */
30
+ interface InfoGroupProps {
31
+ /**
32
+ * Array of fields to render in the InfoGroup
33
+ */
34
+ fields: FieldItem[] | FieldItem[][];
35
+ /**
36
+ * If true, the values will be bold
37
+ */
38
+ bold?: boolean;
39
+ }
40
+ /**
41
+ * Provides a Text-Info component that displays a set of fields in a grid
42
+ * @prop {FieldItem[]|FieldItem[][]} fields - Array of fields to render in the InfoGroup.
43
+ * If fields is a 2D array, it will render multiple rows of fields in a vertical layout
44
+ * @prop {boolean} bold - If true, the values will be bold
45
+ * @example
46
+ * const fields = [
47
+ * { label: 'organization.create.registration-number', value: '123' },
48
+ * { label: 'myOrganizations.label-primary-contact', value: 'User A' },
49
+ * { label: 'myOrganizations.label-contact', value: 'User B' },
50
+ * ];
51
+ */
52
+ export declare const InfoGroup: React.FC<InfoGroupProps>;
53
+ export {};
@@ -0,0 +1,60 @@
1
+ import "../../assets/InfoGroup.css";
2
+ import { jsxs as m, Fragment as s, jsx as t } from "react/jsx-runtime";
3
+ import { Divider as p, Group as d, TypoCaption as u, TypoSubtitle as v } from "@element/react-components";
4
+ import { a as h } from "../../useBreakpoint-DROHPVxO.js";
5
+ import { VerticalDivider as _ } from "../VerticalDivider/VerticalDivider.js";
6
+ const y = "_container_7ypbj_1", C = "_dividerContainer_7ypbj_10", b = "_mainGroup_7ypbj_16", j = "_row_7ypbj_21", N = "_component_7ypbj_51", g = "_componentContainer_7ypbj_84", w = "_field_7ypbj_92", e = {
7
+ container: y,
8
+ dividerContainer: C,
9
+ mainGroup: b,
10
+ row: j,
11
+ component: N,
12
+ componentContainer: g,
13
+ field: w
14
+ }, S = ({ fields: n, bold: o }) => {
15
+ const a = n.length > 1 && Array.isArray(n.at(0)) ? n.map((c, r) => /* @__PURE__ */ m(s, { children: [
16
+ r != 0 && /* @__PURE__ */ t("div", { "data-testid": "test-divider", className: e.dividerContainer, children: /* @__PURE__ */ t(p, {}) }),
17
+ /* @__PURE__ */ t(l, { fields: c, bold: o }, `row${r}`)
18
+ ] })) : /* @__PURE__ */ t(l, { fields: n, bold: o });
19
+ return /* @__PURE__ */ t(d, { direction: "vertical", fullWidth: !0, className: e.mainGroup, children: a });
20
+ }, l = ({ fields: n, bold: o }) => {
21
+ const { isLg: i } = h();
22
+ return /* @__PURE__ */ t(
23
+ d,
24
+ {
25
+ direction: i ? "horizontal" : "vertical",
26
+ className: e.row,
27
+ fullWidth: !0,
28
+ primaryAlign: "center",
29
+ secondaryAlign: "center",
30
+ children: n.map((a, c) => {
31
+ const r = i ? /* @__PURE__ */ t(_, { className: e.divider, height: "3rem" }) : /* @__PURE__ */ t(p, {});
32
+ return /* @__PURE__ */ m(s, { children: [
33
+ c != 0 && r,
34
+ /* @__PURE__ */ t(G, { field: a, bold: o })
35
+ ] });
36
+ })
37
+ }
38
+ );
39
+ }, G = ({ field: n, bold: o }) => {
40
+ if (n.variant || (n.variant = "default"), !n.component || n.variant === "embedded")
41
+ return /* @__PURE__ */ m("div", { className: e.field, "data-testid": "infoGroupItem", children: [
42
+ /* @__PURE__ */ t(u, { className: e.label, themeColor: "text-hint-on-light", children: n.label }),
43
+ n.value ? /* @__PURE__ */ t(
44
+ v,
45
+ {
46
+ level: 1,
47
+ "data-testid": "infoGroupValue",
48
+ className: e.value,
49
+ themeColor: n.themeColor,
50
+ bold: o,
51
+ children: n.value
52
+ }
53
+ ) : /* @__PURE__ */ t(s, { children: n.component })
54
+ ] });
55
+ if (n.component && n.variant === "default")
56
+ return /* @__PURE__ */ t("div", { className: e.componentContainer, children: /* @__PURE__ */ t("div", { className: e.component, children: n.component }) });
57
+ };
58
+ export {
59
+ S as InfoGroup
60
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,40 @@
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import { r as l, s as t } from "../../react.esm-C0LtovhP.js";
3
+ import { InfoGroup as r } from "./InfoGroup.js";
4
+ import { d as s, t as i, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
5
+ s("InfoGroup Test", () => {
6
+ i("render Single InfoGroup", () => {
7
+ l(/* @__PURE__ */ o(r, { fields: m }));
8
+ const a = t.getAllByTestId("infoGroupItem");
9
+ e(a.length).toBe(3);
10
+ const n = t.getAllByTestId("infoGroupValue");
11
+ e(a.length).toBe(3), 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.getByText("myOrganizations.label-contact")).toBeInTheDocument(), e(n[2]).toHaveTextContent("User B");
12
+ }), i("render Multi InfoGroup", () => {
13
+ l(/* @__PURE__ */ o(r, { fields: [
14
+ [
15
+ { label: "organization.create.registration-number", value: "123" },
16
+ { label: "myOrganizations.label-primary-contact", value: "User A" }
17
+ ],
18
+ [
19
+ { label: "myOrganizations.label-contact", value: "User B" },
20
+ {
21
+ label: "organization.something-else",
22
+ value: "some"
23
+ }
24
+ ]
25
+ ] }));
26
+ const n = t.getAllByTestId("infoGroupValue");
27
+ 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");
28
+ }), i("render Single InfoGroup with component", () => {
29
+ l(/* @__PURE__ */ o(r, { fields: [
30
+ { label: "labelSouldntBeRendered", component: /* @__PURE__ */ o("div", { children: "Component" }) },
31
+ { label: "myOrganizations.label-primary-contact", value: "User A" },
32
+ { label: "componentWithLabel", variant: "embedded", component: /* @__PURE__ */ o("div", { children: "Badge" }) }
33
+ ] })), 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();
34
+ });
35
+ });
36
+ const m = [
37
+ { label: "organization.create.registration-number", value: "123" },
38
+ { label: "myOrganizations.label-primary-contact", value: "User A" },
39
+ { label: "myOrganizations.label-contact", value: "User B" }
40
+ ];
@@ -4,7 +4,7 @@ import { g as Hr } from "../../_commonjsHelpers-CT_km90n.js";
4
4
  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";
5
5
  import { useState as re, useMemo as k } from "react";
6
6
  import { SearchBar as ee } from "../SearchBar/SearchBar.js";
7
- import { g as ae, a as te, s as m } from "../../ListAreaService-BPp_O2BH.js";
7
+ import { g as ae, a as te, s as m } from "../../ListAreaService-8vnw7uAP.js";
8
8
  var ne = H;
9
9
  function se() {
10
10
  this.__data__ = new ne(), this.size = 0;
@@ -1,8 +1,8 @@
1
1
  import { jsx as r, Fragment as i } from "react/jsx-runtime";
2
2
  import { TypoButton as p } from "@element/react-components";
3
- import { r as s, s as a, f as u } from "../../react.esm-BeDwcQWb.js";
3
+ import { r as s, s as a, f as u } from "../../react.esm-C0LtovhP.js";
4
4
  import { ListArea as c } from "./ListArea.js";
5
- import { g as h } from "../../ListAreaService-BPp_O2BH.js";
5
+ import { g as h } from "../../ListAreaService-8vnw7uAP.js";
6
6
  import { d as m, t as n, g as t } from "../../vi.JYQecGiw-BbUbJcT8.js";
7
7
  m("ListArea Test", () => {
8
8
  const o = [
@@ -24,6 +24,7 @@ export declare const getListedItems: (items: ListElement[], pathname: string, it
24
24
  select: boolean;
25
25
  primaryText: import("react/jsx-runtime").JSX.Element;
26
26
  secondaryText: import("react/jsx-runtime").JSX.Element | undefined;
27
+ overlineText: string | undefined;
27
28
  trailingBlock: string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode>;
28
29
  leadingBlock: string | import("react/jsx-runtime").JSX.Element | undefined;
29
30
  nonInteractive: boolean | undefined;
@@ -49,6 +50,7 @@ export declare const mapListElement: (element: ListElement, pathname: string | u
49
50
  select: boolean;
50
51
  primaryText: import("react/jsx-runtime").JSX.Element;
51
52
  secondaryText: import("react/jsx-runtime").JSX.Element | undefined;
53
+ overlineText: string | undefined;
52
54
  trailingBlock: string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode>;
53
55
  leadingBlock: string | import("react/jsx-runtime").JSX.Element | undefined;
54
56
  nonInteractive: boolean | undefined;
@@ -1,7 +1,7 @@
1
1
  import "react/jsx-runtime";
2
2
  import "@element/react-components";
3
3
  import "../Iconify/Iconify.js";
4
- import { g as s, a as i, m as a } from "../../ListAreaService-BPp_O2BH.js";
4
+ import { g as s, a as i, m as a } from "../../ListAreaService-8vnw7uAP.js";
5
5
  import "../../enums/AvailableCustomIcons.js";
6
6
  export {
7
7
  s as getGroupedItems,
@@ -1,5 +1,5 @@
1
1
  import { jsx as s } from "react/jsx-runtime";
2
- import { r as e, s as t } from "../../react.esm-BeDwcQWb.js";
2
+ import { r as e, s as t } from "../../react.esm-C0LtovhP.js";
3
3
  import { ScrollbarY as d, ScrollbarX as l } from "./Scrollbar.js";
4
4
  import { d as c, t as a, g as o } from "../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  c("Scrollbar", () => {
@@ -1,5 +1,5 @@
1
1
  import { jsx as a } from "react/jsx-runtime";
2
- import { r, s as t, f as h, a as l } from "../../react.esm-BeDwcQWb.js";
2
+ import { r, s as t, f as h, a as l } from "../../react.esm-C0LtovhP.js";
3
3
  import { SearchBar as s } from "./SearchBar.js";
4
4
  import { d as m, t as o, v as n, g as e } from "../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  m("SearchBar Test", () => {
@@ -1,5 +1,5 @@
1
1
  import { jsx as e } from "react/jsx-runtime";
2
- import { r } from "../../react.esm-BeDwcQWb.js";
2
+ import { r } from "../../react.esm-C0LtovhP.js";
3
3
  import { VerticalDivider as s } from "./VerticalDivider.js";
4
4
  import { d as o, t as l, g as i } from "../../vi.JYQecGiw-BbUbJcT8.js";
5
5
  o("VerticalDivider Test", () => {
package/dist/main.d.ts CHANGED
@@ -2,12 +2,14 @@ import './styles/main.css';
2
2
  export { BaseView } from './components/BaseView/BaseView';
3
3
  export { BasicHeading } from './components/BasicHeading/BasicHeading';
4
4
  export { BlockView } from './components/BlockView/BlockView';
5
+ export { ContextMenu } from './components/ContextMenu/ContextMenu';
5
6
  export { DeleteModal } from './components/DeleteModal/DeleteModal';
6
7
  export { Disclaimer } from './components/Disclaimer/Disclaimer';
7
8
  export { EmptyView } from './components/EmptyView/EmptyView';
8
9
  export { HashTabView } from './components/HashTabView/HashTabView';
9
10
  export { HeaderFilter } from './components/HeaderFilter/HeaderFilter';
10
11
  export { Iconify } from './components/Iconify/Iconify';
12
+ export { InfoGroup } from './components/InfoGroup/InfoGroup';
11
13
  export { ListArea } from './components/ListArea/ListArea';
12
14
  export { ScrollbarX, ScrollbarY } from './components/Scrollbar/Scrollbar';
13
15
  export { SearchBar } from './components/SearchBar/SearchBar';
@@ -21,5 +23,6 @@ export { FormText } from './components/FormComponents/FormText/FormText';
21
23
  export { AvailableCustomIcons } from './enums/AvailableCustomIcons';
22
24
  export { useBreakpoints } from './hooks/useBreakpoint';
23
25
  export { capitalizeFirstLetters } from './services/UtilService';
24
- export type { ListElement, BaseListElement } from './types/ListElement';
26
+ export type { FieldItem } from './components/InfoGroup/InfoGroup';
25
27
  export type { HashTab } from './types/HashTab';
28
+ export type { ListElement, BaseListElement } from './types/ListElement';
package/dist/main.js CHANGED
@@ -1,48 +1,52 @@
1
1
  import "./assets/main.css";
2
2
  import { BaseView as t } from "./components/BaseView/BaseView.js";
3
3
  import { BasicHeading as p } from "./components/BasicHeading/BasicHeading.js";
4
- import { BlockView as a } from "./components/BlockView/BlockView.js";
5
- import { DeleteModal as i } from "./components/DeleteModal/DeleteModal.js";
6
- import { Disclaimer as c } from "./components/Disclaimer/Disclaimer.js";
7
- import { EmptyView as F } from "./components/EmptyView/EmptyView.js";
8
- import { HashTabView as B } from "./components/HashTabView/HashTabView.js";
9
- import { HeaderFilter as V } from "./components/HeaderFilter/HeaderFilter.js";
10
- import { Iconify as k } from "./components/Iconify/Iconify.js";
11
- import { ListArea as w } from "./components/ListArea/ListArea.js";
12
- import { ScrollbarX as h, ScrollbarY as H } from "./components/Scrollbar/Scrollbar.js";
13
- import { SearchBar as v } from "./components/SearchBar/SearchBar.js";
14
- import { VerticalDivider as A } from "./components/VerticalDivider/VerticalDivider.js";
15
- import { FormCheckBox as I } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
16
- import { FormDatePicker as T } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
17
- import { FormRadio as z } from "./components/FormComponents/FormRadio/FormRadio.js";
18
- import { FormSelect as M } from "./components/FormComponents/FormSelect/FormSelect.js";
19
- import { FormSlider as R } from "./components/FormComponents/FormSlider/FormSlider.js";
20
- import { FormText as Y } from "./components/FormComponents/FormText/FormText.js";
21
- import { AvailableCustomIcons as q } from "./enums/AvailableCustomIcons.js";
22
- import { a as J } from "./useBreakpoint-DROHPVxO.js";
23
- import { capitalizeFirstLetters as N } from "./services/UtilService.js";
4
+ import { BlockView as f } from "./components/BlockView/BlockView.js";
5
+ import { ContextMenu as i } from "./components/ContextMenu/ContextMenu.js";
6
+ import { DeleteModal as c } from "./components/DeleteModal/DeleteModal.js";
7
+ import { Disclaimer as F } from "./components/Disclaimer/Disclaimer.js";
8
+ import { EmptyView as d } from "./components/EmptyView/EmptyView.js";
9
+ import { HashTabView as S } from "./components/HashTabView/HashTabView.js";
10
+ import { HeaderFilter as b } from "./components/HeaderFilter/HeaderFilter.js";
11
+ import { Iconify as u } from "./components/Iconify/Iconify.js";
12
+ import { InfoGroup as D } from "./components/InfoGroup/InfoGroup.js";
13
+ import { ListArea as C } from "./components/ListArea/ListArea.js";
14
+ import { ScrollbarX as I, ScrollbarY as v } from "./components/Scrollbar/Scrollbar.js";
15
+ import { SearchBar as A } from "./components/SearchBar/SearchBar.js";
16
+ import { VerticalDivider as M } from "./components/VerticalDivider/VerticalDivider.js";
17
+ import { FormCheckBox as g } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
18
+ import { FormDatePicker as E } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
19
+ import { FormRadio as P } from "./components/FormComponents/FormRadio/FormRadio.js";
20
+ import { FormSelect as X } from "./components/FormComponents/FormSelect/FormSelect.js";
21
+ import { FormSlider as j } from "./components/FormComponents/FormSlider/FormSlider.js";
22
+ import { FormText as J } from "./components/FormComponents/FormText/FormText.js";
23
+ import { AvailableCustomIcons as N } from "./enums/AvailableCustomIcons.js";
24
+ import { a as Q } from "./useBreakpoint-DROHPVxO.js";
25
+ import { capitalizeFirstLetters as W } from "./services/UtilService.js";
24
26
  export {
25
- q as AvailableCustomIcons,
27
+ N as AvailableCustomIcons,
26
28
  t as BaseView,
27
29
  p as BasicHeading,
28
- a as BlockView,
29
- i as DeleteModal,
30
- c as Disclaimer,
31
- F as EmptyView,
32
- I as FormCheckBox,
33
- T as FormDatePicker,
34
- z as FormRadio,
35
- M as FormSelect,
36
- R as FormSlider,
37
- Y as FormText,
38
- B as HashTabView,
39
- V as HeaderFilter,
40
- k as Iconify,
41
- w as ListArea,
42
- h as ScrollbarX,
43
- H as ScrollbarY,
44
- v as SearchBar,
45
- A as VerticalDivider,
46
- N as capitalizeFirstLetters,
47
- J as useBreakpoints
30
+ f as BlockView,
31
+ i as ContextMenu,
32
+ c as DeleteModal,
33
+ F as Disclaimer,
34
+ d as EmptyView,
35
+ g as FormCheckBox,
36
+ E as FormDatePicker,
37
+ P as FormRadio,
38
+ X as FormSelect,
39
+ j as FormSlider,
40
+ J as FormText,
41
+ S as HashTabView,
42
+ b as HeaderFilter,
43
+ u as Iconify,
44
+ D as InfoGroup,
45
+ C as ListArea,
46
+ I as ScrollbarX,
47
+ v as ScrollbarY,
48
+ A as SearchBar,
49
+ M as VerticalDivider,
50
+ W as capitalizeFirstLetters,
51
+ Q as useBreakpoints
48
52
  };
@@ -12737,5 +12737,6 @@ export {
12737
12737
  Ft as a,
12738
12738
  re as f,
12739
12739
  G1 as r,
12740
- z1 as s
12740
+ z1 as s,
12741
+ ax as w
12741
12742
  };
@@ -39,6 +39,10 @@ export type BaseListElement = {
39
39
  * the subtitle of the list element
40
40
  */
41
41
  subTitle?: string;
42
+ /**
43
+ * overline text of the list element
44
+ */
45
+ overlineTitle?: string;
42
46
  /**
43
47
  * the route of the list element
44
48
  */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hortiview/shared-components",
3
3
  "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
4
- "version": "0.0.4870",
4
+ "version": "0.0.4991",
5
5
  "type": "module",
6
6
  "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
7
7
  "author": "Falk Menge <falk.menge.ext@bayer.com>",
@@ -1,67 +0,0 @@
1
- import "./assets/ListAreaService.css";
2
- import { jsx as s } from "react/jsx-runtime";
3
- import { TypoButton as b, TypoSubtitle as q, TypoBody as k, Icon as L } from "@element/react-components";
4
- import { Iconify as C } from "./components/Iconify/Iconify.js";
5
- import { AvailableCustomIcons as x } from "./enums/AvailableCustomIcons.js";
6
- const E = "_fullWidth_1l0qh_1", N = "_mainElevation_1l0qh_5", W = "_searchbar_1l0qh_11", $ = "_roundedBottom_1l0qh_19", j = "_list_1l0qh_24", S = "_listItem_1l0qh_48", w = "_trailingIcon_1l0qh_52", A = "_groupedListItem_1l0qh_64", _ = {
7
- fullWidth: E,
8
- mainElevation: N,
9
- searchbar: W,
10
- roundedBottom: $,
11
- list: j,
12
- listItem: S,
13
- trailingIcon: w,
14
- groupedListItem: A
15
- }, J = (o, i, n, r) => {
16
- const l = o.reduce((e, a) => {
17
- const { groupName: t, ...m } = a;
18
- return !t || typeof t != "string" || (e[t] || (e[t] = {
19
- groupName: /* @__PURE__ */ s(b, { children: t }),
20
- id: t,
21
- items: []
22
- }), e[t].items = [
23
- ...e[t].items,
24
- g(m, i, n, !0, r)
25
- ]), e;
26
- }, {});
27
- return Object.values(l);
28
- }, K = (o, i, n, r) => o.map((l) => g(l, i, n, !1, r)), g = (o, i, n, r, l) => {
29
- const {
30
- title: e,
31
- subTitle: a,
32
- route: t,
33
- value: m,
34
- noNavigation: d,
35
- disabled: I,
36
- icon: h,
37
- iconType: p,
38
- trailingIcon: v,
39
- trailingIconType: y,
40
- actionButton: f,
41
- onClick: T,
42
- customTitle: u
43
- } = o, c = i === t;
44
- return {
45
- select: c,
46
- primaryText: u ?? /* @__PURE__ */ s(q, { level: 1, bold: c, themeColor: c ? "primary" : void 0, children: e }),
47
- secondaryText: a && !u ? /* @__PURE__ */ s(k, { level: 2, themeColor: c ? "primary" : void 0, children: a }) : void 0,
48
- trailingBlock: f ?? v ?? /* @__PURE__ */ s(L, { icon: "arrow_right" }),
49
- leadingBlock: G(h),
50
- nonInteractive: I,
51
- value: m,
52
- componentProps: {
53
- leadingBlockType: p ?? "icon",
54
- trailingBlockType: y ?? "icon",
55
- className: `${p === "avatar" ? "" : _.listItem} ${n} ${r ? _.groupedListItem : ""}`,
56
- onClick: (O, B) => T?.(B),
57
- tag: d ? void 0 : l ?? "a",
58
- to: d ? void 0 : t
59
- }
60
- };
61
- }, G = (o) => typeof o == "string" && o in x ? /* @__PURE__ */ s(C, { icon: o }) : o;
62
- export {
63
- K as a,
64
- J as g,
65
- g as m,
66
- _ as s
67
- };