@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.
- package/README.md +72 -2
- package/dist/ListAreaService-8vnw7uAP.js +68 -0
- package/dist/assets/ContextMenu.css +1 -0
- package/dist/assets/InfoGroup.css +1 -0
- package/dist/assets/ListAreaService.css +1 -1
- package/dist/components/BaseView/BaseView.test.js +1 -1
- package/dist/components/BasicHeading/BasicHeading.test.js +1 -1
- package/dist/components/BlockView/BlockView.test.js +1 -1
- package/dist/components/ContextMenu/ContextMenu.d.ts +27 -0
- package/dist/components/ContextMenu/ContextMenu.js +40 -0
- package/dist/components/ContextMenu/ContextMenu.test.d.ts +1 -0
- package/dist/components/ContextMenu/ContextMenu.test.js +22 -0
- package/dist/components/DeleteModal/DeleteModal.test.js +1 -1
- package/dist/components/Disclaimer/Disclaimer.test.js +1 -1
- package/dist/components/EmptyView/EmptyView.test.js +1 -1
- package/dist/components/FormComponents/FormCheckBox/FormCheckBox.test.js +1 -1
- package/dist/components/FormComponents/FormDatePicker/FormDatePicker.test.js +1 -1
- package/dist/components/FormComponents/FormRadio/FormRadio.test.js +1 -1
- package/dist/components/FormComponents/FormSelect/FormSelect.test.js +1 -1
- package/dist/components/FormComponents/FormSlider/FormSlider.test.js +1 -1
- package/dist/components/FormComponents/FormText/FormText.test.js +1 -1
- package/dist/components/HashTabView/HashTabView.test.js +1 -1
- package/dist/components/HeaderFilter/HeaderFilter.test.js +1 -1
- package/dist/components/Iconify/Iconify.test.js +1 -1
- package/dist/components/InfoGroup/InfoGroup.d.ts +53 -0
- package/dist/components/InfoGroup/InfoGroup.js +60 -0
- package/dist/components/InfoGroup/InfoGroup.test.d.ts +1 -0
- package/dist/components/InfoGroup/InfoGroup.test.js +40 -0
- package/dist/components/ListArea/ListArea.js +1 -1
- package/dist/components/ListArea/ListArea.test.js +2 -2
- package/dist/components/ListArea/ListAreaService.d.ts +2 -0
- package/dist/components/ListArea/ListAreaService.js +1 -1
- package/dist/components/Scrollbar/scrollbar.test.js +1 -1
- package/dist/components/SearchBar/SearchBar.test.js +1 -1
- package/dist/components/VerticalDivider/VerticalDivider.test.js +1 -1
- package/dist/main.d.ts +4 -1
- package/dist/main.js +45 -41
- package/dist/{react.esm-BeDwcQWb.js → react.esm-C0LtovhP.js} +2 -1
- package/dist/types/ListElement.d.ts +4 -0
- package/package.json +1 -1
- 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
|
-
.
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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 {
|
|
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
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
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
|
-
|
|
27
|
+
N as AvailableCustomIcons,
|
|
26
28
|
t as BaseView,
|
|
27
29
|
p as BasicHeading,
|
|
28
|
-
|
|
29
|
-
i as
|
|
30
|
-
c as
|
|
31
|
-
F as
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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
|
};
|
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.
|
|
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
|
-
};
|