@pepperi-addons/ngx-composite-lib-react 0.5.5 → 0.5.6
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/package.json +1 -1
- package/elements/3rdpartylicenses.txt +0 -641
- package/elements/index.html +0 -10
- package/elements/main.js +0 -1
- package/elements/polyfills.js +0 -1
- package/elements/runtime.js +0 -1
- package/elements/styles.css +0 -16
- package/i18n/de.ngx-composite-lib.json +0 -2
- package/i18n/en.ngx-composite-lib.json +0 -181
- package/i18n/es.ngx-composite-lib.json +0 -2
- package/i18n/fr.ngx-composite-lib.json +0 -2
- package/i18n/he.ngx-composite-lib.json +0 -2
- package/i18n/hu.ngx-composite-lib.json +0 -2
- package/i18n/it.ngx-composite-lib.json +0 -2
- package/i18n/ja.ngx-composite-lib.json +0 -2
- package/i18n/nl.ngx-composite-lib.json +0 -2
- package/i18n/pl.ngx-composite-lib.json +0 -2
- package/i18n/pt.ngx-composite-lib.json +0 -2
- package/i18n/ru.ngx-composite-lib.json +0 -2
- package/i18n/zh.ngx-composite-lib.json +0 -2
- package/index.d.ts +0 -16
- package/index.js +0 -17
- package/pep-color-settings.d.ts +0 -17
- package/pep-color-settings.js +0 -34
- package/pep-data-view-builder.d.ts +0 -28
- package/pep-data-view-builder.js +0 -42
- package/pep-file-status-panel.d.ts +0 -18
- package/pep-file-status-panel.js +0 -29
- package/pep-flow-picker-button.d.ts +0 -13
- package/pep-flow-picker-button.js +0 -30
- package/pep-generic-fields-builder.d.ts +0 -33
- package/pep-generic-fields-builder.js +0 -57
- package/pep-generic-form.d.ts +0 -52
- package/pep-generic-form.js +0 -47
- package/pep-generic-list.d.ts +0 -74
- package/pep-generic-list.js +0 -141
- package/pep-group-buttons-settings.d.ts +0 -25
- package/pep-group-buttons-settings.js +0 -58
- package/pep-icon-picker.d.ts +0 -18
- package/pep-icon-picker.js +0 -40
- package/pep-manage-parameters.d.ts +0 -31
- package/pep-manage-parameters.js +0 -40
- package/pep-mapping-parameters.d.ts +0 -17
- package/pep-mapping-parameters.js +0 -32
- package/pep-menu-data-view.d.ts +0 -18
- package/pep-menu-data-view.js +0 -36
- package/pep-padding-settings.d.ts +0 -12
- package/pep-padding-settings.js +0 -24
- package/pep-rich-text.d.ts +0 -47
- package/pep-rich-text.js +0 -77
- package/pep-shadow-settings.d.ts +0 -15
- package/pep-shadow-settings.js +0 -23
- package/pep-show-if-badge.d.ts +0 -10
- package/pep-show-if-badge.js +0 -17
package/pep-generic-form.js
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React, { useRef, useEffect } from 'react';
|
|
2
|
-
export const PepGenericForm = ({ dataSource, dataView, isLocked = false, inline = false, showTopBar = false, addPadding = false, onValueChange, onFieldClick, onFormValidationChange, children }) => {
|
|
3
|
-
const elementRef = useRef(null);
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
const element = elementRef.current;
|
|
6
|
-
if (!element)
|
|
7
|
-
return;
|
|
8
|
-
// Reflect props to custom element
|
|
9
|
-
if (dataSource !== undefined)
|
|
10
|
-
element.dataSource = dataSource;
|
|
11
|
-
if (dataView !== undefined)
|
|
12
|
-
element.dataView = dataView;
|
|
13
|
-
element.isLocked = isLocked;
|
|
14
|
-
element.inline = inline;
|
|
15
|
-
element.showTopBar = showTopBar;
|
|
16
|
-
element.addPadding = addPadding;
|
|
17
|
-
}, [dataSource, dataView, isLocked, inline, showTopBar, addPadding]);
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
const element = elementRef.current;
|
|
20
|
-
if (!element)
|
|
21
|
-
return;
|
|
22
|
-
const handleValueChange = (event) => {
|
|
23
|
-
if (onValueChange)
|
|
24
|
-
onValueChange(event);
|
|
25
|
-
};
|
|
26
|
-
const handleFieldClick = (event) => {
|
|
27
|
-
if (onFieldClick)
|
|
28
|
-
onFieldClick(event);
|
|
29
|
-
};
|
|
30
|
-
const handleFormValidationChange = (event) => {
|
|
31
|
-
if (onFormValidationChange)
|
|
32
|
-
onFormValidationChange(event);
|
|
33
|
-
};
|
|
34
|
-
// Add event listeners
|
|
35
|
-
element.addEventListener('valueChange', handleValueChange);
|
|
36
|
-
element.addEventListener('fieldClick', handleFieldClick);
|
|
37
|
-
element.addEventListener('formValidationChange', handleFormValidationChange);
|
|
38
|
-
// Cleanup
|
|
39
|
-
return () => {
|
|
40
|
-
element.removeEventListener('valueChange', handleValueChange);
|
|
41
|
-
element.removeEventListener('fieldClick', handleFieldClick);
|
|
42
|
-
element.removeEventListener('formValidationChange', handleFormValidationChange);
|
|
43
|
-
};
|
|
44
|
-
}, [onValueChange, onFieldClick, onFormValidationChange]);
|
|
45
|
-
return React.createElement('pep-generic-form-element', { ref: elementRef }, children);
|
|
46
|
-
};
|
|
47
|
-
//# sourceMappingURL=pep-generic-form.js.map
|
package/pep-generic-list.d.ts
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare type PepListSelectionType = 'multi' | 'single' | 'none' | string;
|
|
3
|
-
export declare type PepListTableViewType = 'regular' | 'grid' | string;
|
|
4
|
-
export interface IPepGenericListPager {
|
|
5
|
-
type: 'scroll' | 'pages';
|
|
6
|
-
size?: number;
|
|
7
|
-
index?: number;
|
|
8
|
-
}
|
|
9
|
-
export interface IPepGenericListEmptyState {
|
|
10
|
-
show?: boolean;
|
|
11
|
-
title?: string;
|
|
12
|
-
description?: string;
|
|
13
|
-
}
|
|
14
|
-
export interface IPepGenericListSortingData {
|
|
15
|
-
sortBy?: string;
|
|
16
|
-
isAsc?: boolean;
|
|
17
|
-
}
|
|
18
|
-
export interface IPepGenericListDataSource {
|
|
19
|
-
inputs?: Record<string, unknown>;
|
|
20
|
-
init: (params: Record<string, unknown>) => Promise<unknown> | unknown;
|
|
21
|
-
update?: (params: Record<string, unknown>) => Promise<unknown> | unknown;
|
|
22
|
-
}
|
|
23
|
-
export interface IPepGenericListActions {
|
|
24
|
-
get: (data: unknown) => Promise<Array<{
|
|
25
|
-
title: string;
|
|
26
|
-
handler: (obj: unknown) => Promise<void>;
|
|
27
|
-
}>> | Array<{
|
|
28
|
-
title: string;
|
|
29
|
-
handler: (obj: unknown) => Promise<void>;
|
|
30
|
-
}>;
|
|
31
|
-
}
|
|
32
|
-
export interface PepGenericListProps {
|
|
33
|
-
dataSource?: IPepGenericListDataSource;
|
|
34
|
-
actions?: IPepGenericListActions;
|
|
35
|
-
uuidMapping?: string;
|
|
36
|
-
disabled?: boolean;
|
|
37
|
-
addPadding?: boolean;
|
|
38
|
-
title?: string;
|
|
39
|
-
sideBarTitle?: string;
|
|
40
|
-
description?: string;
|
|
41
|
-
inline?: boolean;
|
|
42
|
-
showSearch?: boolean;
|
|
43
|
-
noDataFoundMsg?: string;
|
|
44
|
-
emptyState?: IPepGenericListEmptyState;
|
|
45
|
-
selectionType?: PepListSelectionType;
|
|
46
|
-
supportSorting?: boolean;
|
|
47
|
-
supportSortingFields?: string[];
|
|
48
|
-
separator?: string;
|
|
49
|
-
sorting?: IPepGenericListSortingData;
|
|
50
|
-
cacheSize?: number;
|
|
51
|
-
hideSelectAll?: boolean;
|
|
52
|
-
pager?: IPepGenericListPager;
|
|
53
|
-
tableViewType?: PepListTableViewType;
|
|
54
|
-
zebraStripes?: boolean;
|
|
55
|
-
smartFilter?: unknown;
|
|
56
|
-
showTopBar?: boolean;
|
|
57
|
-
breadCrumbsItems?: unknown[];
|
|
58
|
-
selectAll?: boolean;
|
|
59
|
-
scrollPosition?: number;
|
|
60
|
-
unknownCount?: boolean;
|
|
61
|
-
itemClick?: (detail: unknown) => void;
|
|
62
|
-
fieldClick?: (detail: unknown) => void;
|
|
63
|
-
valueChange?: (detail: unknown) => void;
|
|
64
|
-
breadCrumbItemClick?: (detail: unknown) => void;
|
|
65
|
-
startIndexChange?: (detail: unknown) => void;
|
|
66
|
-
listLoad?: () => void;
|
|
67
|
-
className?: string;
|
|
68
|
-
style?: React.CSSProperties;
|
|
69
|
-
leftButtonsContent?: React.ReactNode;
|
|
70
|
-
rightButtonsContent?: React.ReactNode;
|
|
71
|
-
leftBottomAreaContent?: React.ReactNode;
|
|
72
|
-
rightBottomAreaContent?: React.ReactNode;
|
|
73
|
-
}
|
|
74
|
-
export declare const PepGenericList: React.FC<PepGenericListProps>;
|
package/pep-generic-list.js
DELETED
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from 'react';
|
|
2
|
-
export const PepGenericList = (props) => {
|
|
3
|
-
const ref = useRef(null);
|
|
4
|
-
// Reflect props to the custom element instance
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
const el = ref.current;
|
|
7
|
-
if (!el)
|
|
8
|
-
return;
|
|
9
|
-
// Inputs
|
|
10
|
-
if (props.dataSource !== undefined)
|
|
11
|
-
el.dataSource = props.dataSource;
|
|
12
|
-
if (props.actions !== undefined)
|
|
13
|
-
el.actions = props.actions;
|
|
14
|
-
if (props.uuidMapping !== undefined)
|
|
15
|
-
el.uuidMapping = props.uuidMapping;
|
|
16
|
-
if (props.disabled !== undefined)
|
|
17
|
-
el.disabled = props.disabled;
|
|
18
|
-
if (props.addPadding !== undefined)
|
|
19
|
-
el.addPadding = props.addPadding;
|
|
20
|
-
if (props.title !== undefined)
|
|
21
|
-
el.title = props.title;
|
|
22
|
-
if (props.sideBarTitle !== undefined)
|
|
23
|
-
el.sideBarTitle = props.sideBarTitle;
|
|
24
|
-
if (props.description !== undefined)
|
|
25
|
-
el.description = props.description;
|
|
26
|
-
if (props.inline !== undefined)
|
|
27
|
-
el.inline = props.inline;
|
|
28
|
-
if (props.showSearch !== undefined)
|
|
29
|
-
el.showSearch = props.showSearch;
|
|
30
|
-
if (props.noDataFoundMsg !== undefined)
|
|
31
|
-
el.noDataFoundMsg = props.noDataFoundMsg;
|
|
32
|
-
if (props.emptyState !== undefined)
|
|
33
|
-
el.emptyState = props.emptyState;
|
|
34
|
-
if (props.selectionType !== undefined)
|
|
35
|
-
el.selectionType = props.selectionType;
|
|
36
|
-
if (props.supportSorting !== undefined)
|
|
37
|
-
el.supportSorting = props.supportSorting;
|
|
38
|
-
if (props.supportSortingFields !== undefined)
|
|
39
|
-
el.supportSortingFields = props.supportSortingFields;
|
|
40
|
-
if (props.separator !== undefined)
|
|
41
|
-
el.separator = props.separator;
|
|
42
|
-
if (props.sorting !== undefined)
|
|
43
|
-
el.sorting = props.sorting;
|
|
44
|
-
if (props.cacheSize !== undefined)
|
|
45
|
-
el.cacheSize = props.cacheSize;
|
|
46
|
-
if (props.hideSelectAll !== undefined)
|
|
47
|
-
el.hideSelectAll = props.hideSelectAll;
|
|
48
|
-
if (props.pager !== undefined)
|
|
49
|
-
el.pager = props.pager;
|
|
50
|
-
if (props.tableViewType !== undefined)
|
|
51
|
-
el.tableViewType = props.tableViewType;
|
|
52
|
-
if (props.zebraStripes !== undefined)
|
|
53
|
-
el.zebraStripes = props.zebraStripes;
|
|
54
|
-
if (props.smartFilter !== undefined)
|
|
55
|
-
el.smartFilter = props.smartFilter;
|
|
56
|
-
if (props.showTopBar !== undefined)
|
|
57
|
-
el.showTopBar = props.showTopBar;
|
|
58
|
-
if (props.breadCrumbsItems !== undefined)
|
|
59
|
-
el.breadCrumbsItems = props.breadCrumbsItems;
|
|
60
|
-
if (props.selectAll !== undefined)
|
|
61
|
-
el.selectAll = props.selectAll;
|
|
62
|
-
if (props.scrollPosition !== undefined)
|
|
63
|
-
el.scrollPosition = props.scrollPosition;
|
|
64
|
-
if (props.unknownCount !== undefined)
|
|
65
|
-
el.unknownCount = props.unknownCount;
|
|
66
|
-
}, [
|
|
67
|
-
props.dataSource,
|
|
68
|
-
props.actions,
|
|
69
|
-
props.uuidMapping,
|
|
70
|
-
props.disabled,
|
|
71
|
-
props.addPadding,
|
|
72
|
-
props.title,
|
|
73
|
-
props.sideBarTitle,
|
|
74
|
-
props.description,
|
|
75
|
-
props.inline,
|
|
76
|
-
props.showSearch,
|
|
77
|
-
props.noDataFoundMsg,
|
|
78
|
-
props.emptyState,
|
|
79
|
-
props.selectionType,
|
|
80
|
-
props.supportSorting,
|
|
81
|
-
props.supportSortingFields,
|
|
82
|
-
props.separator,
|
|
83
|
-
props.sorting,
|
|
84
|
-
props.cacheSize,
|
|
85
|
-
props.hideSelectAll,
|
|
86
|
-
props.pager,
|
|
87
|
-
props.tableViewType,
|
|
88
|
-
props.zebraStripes,
|
|
89
|
-
props.smartFilter,
|
|
90
|
-
props.showTopBar,
|
|
91
|
-
props.breadCrumbsItems,
|
|
92
|
-
props.selectAll,
|
|
93
|
-
props.scrollPosition,
|
|
94
|
-
props.unknownCount,
|
|
95
|
-
]);
|
|
96
|
-
// Wire events (exact names)
|
|
97
|
-
useEffect(() => {
|
|
98
|
-
const el = ref.current;
|
|
99
|
-
if (!el)
|
|
100
|
-
return;
|
|
101
|
-
const bind = (name, cb) => {
|
|
102
|
-
if (!cb)
|
|
103
|
-
return () => { };
|
|
104
|
-
const handler = (e) => cb(e.detail);
|
|
105
|
-
el.addEventListener(name, handler);
|
|
106
|
-
return () => el.removeEventListener(name, handler);
|
|
107
|
-
};
|
|
108
|
-
const unsubs = [
|
|
109
|
-
bind('itemClick', props.itemClick),
|
|
110
|
-
bind('fieldClick', props.fieldClick),
|
|
111
|
-
bind('valueChange', props.valueChange),
|
|
112
|
-
bind('breadCrumbItemClick', props.breadCrumbItemClick),
|
|
113
|
-
bind('startIndexChange', props.startIndexChange),
|
|
114
|
-
bind('listLoad', props.listLoad ? () => props.listLoad?.() : undefined),
|
|
115
|
-
];
|
|
116
|
-
return () => { unsubs.forEach((u) => u()); };
|
|
117
|
-
}, [
|
|
118
|
-
props.itemClick,
|
|
119
|
-
props.fieldClick,
|
|
120
|
-
props.valueChange,
|
|
121
|
-
props.breadCrumbItemClick,
|
|
122
|
-
props.startIndexChange,
|
|
123
|
-
props.listLoad,
|
|
124
|
-
]);
|
|
125
|
-
// Render projected content for Angular ng-content slots by using matching attributes
|
|
126
|
-
const children = [];
|
|
127
|
-
if (props.leftButtonsContent) {
|
|
128
|
-
children.push(React.createElement('div', { ['left-buttons']: '' }, props.leftButtonsContent));
|
|
129
|
-
}
|
|
130
|
-
if (props.rightButtonsContent) {
|
|
131
|
-
children.push(React.createElement('div', { ['right-buttons']: '' }, props.rightButtonsContent));
|
|
132
|
-
}
|
|
133
|
-
if (props.leftBottomAreaContent) {
|
|
134
|
-
children.push(React.createElement('div', { ['left-bottom-area']: '' }, props.leftBottomAreaContent));
|
|
135
|
-
}
|
|
136
|
-
if (props.rightBottomAreaContent) {
|
|
137
|
-
children.push(React.createElement('div', { ['right-bottom-area']: '' }, props.rightBottomAreaContent));
|
|
138
|
-
}
|
|
139
|
-
return React.createElement('pep-generic-list-element', { ref, class: props.className, style: props.style }, children.length > 0 ? children : undefined);
|
|
140
|
-
};
|
|
141
|
-
//# sourceMappingURL=pep-generic-list.js.map
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare type PepGroupbuttonsTypes = 'sizes' | 'custom' | 'vertical-align' | 'left-right-arrows' | 'horizontal-align' | 'font-weight' | 'width-sizes' | 'boolean';
|
|
3
|
-
export interface PepButton {
|
|
4
|
-
key: string;
|
|
5
|
-
value?: string;
|
|
6
|
-
iconName?: string;
|
|
7
|
-
callback?: (ev: any) => void;
|
|
8
|
-
}
|
|
9
|
-
export interface PepGroupButtonsSettingsProps {
|
|
10
|
-
header?: string;
|
|
11
|
-
subHeader?: string;
|
|
12
|
-
groupType?: PepGroupbuttonsTypes;
|
|
13
|
-
btnsArray?: PepButton[];
|
|
14
|
-
excludeKeys?: string[];
|
|
15
|
-
useNone?: boolean;
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
dir?: 'rtl' | 'ltr';
|
|
18
|
-
titleSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
|
|
19
|
-
bold?: boolean;
|
|
20
|
-
btnKey?: string;
|
|
21
|
-
onBtnkeyChange?: (value: string) => void;
|
|
22
|
-
className?: string;
|
|
23
|
-
style?: React.CSSProperties;
|
|
24
|
-
}
|
|
25
|
-
export declare const PepGroupButtonsSettings: React.FC<PepGroupButtonsSettingsProps>;
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from 'react';
|
|
2
|
-
export const PepGroupButtonsSettings = ({ header, subHeader, groupType, btnsArray, excludeKeys, useNone, disabled, dir, titleSize, bold, btnKey, onBtnkeyChange, className, style, }) => {
|
|
3
|
-
const ref = useRef(null);
|
|
4
|
-
// Apply inputs as element properties - set excludeKeys BEFORE groupType
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
const el = ref.current;
|
|
7
|
-
if (!el)
|
|
8
|
-
return;
|
|
9
|
-
// Set properties in the correct order - excludeKeys must be set before groupType
|
|
10
|
-
if (header !== undefined) {
|
|
11
|
-
el.header = header;
|
|
12
|
-
}
|
|
13
|
-
if (subHeader !== undefined) {
|
|
14
|
-
el.subHeader = subHeader;
|
|
15
|
-
}
|
|
16
|
-
if (excludeKeys !== undefined) {
|
|
17
|
-
el.excludeKeys = excludeKeys; // Set excludeKeys FIRST
|
|
18
|
-
}
|
|
19
|
-
if (groupType !== undefined) {
|
|
20
|
-
el.groupType = groupType; // Then set groupType
|
|
21
|
-
}
|
|
22
|
-
if (btnsArray !== undefined) {
|
|
23
|
-
el.btnsArray = btnsArray;
|
|
24
|
-
}
|
|
25
|
-
if (useNone !== undefined) {
|
|
26
|
-
el.useNone = useNone;
|
|
27
|
-
}
|
|
28
|
-
if (disabled !== undefined) {
|
|
29
|
-
el.disabled = disabled;
|
|
30
|
-
}
|
|
31
|
-
if (dir !== undefined) {
|
|
32
|
-
el.dir = dir;
|
|
33
|
-
}
|
|
34
|
-
if (titleSize !== undefined) {
|
|
35
|
-
el.titleSize = titleSize;
|
|
36
|
-
}
|
|
37
|
-
if (bold !== undefined) {
|
|
38
|
-
el.bold = bold;
|
|
39
|
-
}
|
|
40
|
-
if (btnKey !== undefined) {
|
|
41
|
-
el.btnKey = btnKey;
|
|
42
|
-
}
|
|
43
|
-
}, [header, subHeader, groupType, btnsArray, excludeKeys, useNone, disabled, dir, titleSize, bold, btnKey]);
|
|
44
|
-
// Wire outputs (Angular emits custom event name 'btnkeyChange')
|
|
45
|
-
useEffect(() => {
|
|
46
|
-
const el = ref.current;
|
|
47
|
-
if (!el)
|
|
48
|
-
return;
|
|
49
|
-
const handler = (e) => {
|
|
50
|
-
const ce = e;
|
|
51
|
-
onBtnkeyChange?.(ce.detail ?? ref.current?.btnKey ?? '');
|
|
52
|
-
};
|
|
53
|
-
el.addEventListener('btnkeyChange', handler);
|
|
54
|
-
return () => el.removeEventListener('btnkeyChange', handler);
|
|
55
|
-
}, [onBtnkeyChange]);
|
|
56
|
-
return React.createElement('pep-group-buttons-settings-element', { ref, class: className, style });
|
|
57
|
-
};
|
|
58
|
-
//# sourceMappingURL=pep-group-buttons-settings.js.map
|
package/pep-icon-picker.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare type Dir = 'rtl' | 'ltr';
|
|
3
|
-
export declare type PepSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
|
|
4
|
-
export interface PepIconPickerProps {
|
|
5
|
-
disabled?: boolean;
|
|
6
|
-
header?: string;
|
|
7
|
-
preview_header?: string;
|
|
8
|
-
select_btn_header?: string;
|
|
9
|
-
dir?: Dir;
|
|
10
|
-
iconURL?: string;
|
|
11
|
-
useCheckBoxHeader?: boolean;
|
|
12
|
-
titleSize?: PepSizeType;
|
|
13
|
-
onIconChange?: (data: any) => void;
|
|
14
|
-
onIconDisableChange?: (data: any) => void;
|
|
15
|
-
className?: string;
|
|
16
|
-
style?: React.CSSProperties;
|
|
17
|
-
}
|
|
18
|
-
export declare const PepIconPicker: React.FC<PepIconPickerProps>;
|
package/pep-icon-picker.js
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from 'react';
|
|
2
|
-
export const PepIconPicker = ({ disabled, header, preview_header, select_btn_header, dir, iconURL, useCheckBoxHeader, titleSize, onIconChange, onIconDisableChange, className, style, }) => {
|
|
3
|
-
const ref = useRef(null);
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
const el = ref.current;
|
|
6
|
-
if (!el)
|
|
7
|
-
return;
|
|
8
|
-
if (disabled !== undefined)
|
|
9
|
-
el.disabled = disabled;
|
|
10
|
-
if (header !== undefined)
|
|
11
|
-
el.header = header;
|
|
12
|
-
if (preview_header !== undefined)
|
|
13
|
-
el.preview_header = preview_header;
|
|
14
|
-
if (select_btn_header !== undefined)
|
|
15
|
-
el.select_btn_header = select_btn_header;
|
|
16
|
-
if (dir !== undefined)
|
|
17
|
-
el.dir = dir;
|
|
18
|
-
if (iconURL !== undefined)
|
|
19
|
-
el.iconURL = iconURL;
|
|
20
|
-
if (useCheckBoxHeader !== undefined)
|
|
21
|
-
el.useCheckBoxHeader = useCheckBoxHeader;
|
|
22
|
-
if (titleSize !== undefined)
|
|
23
|
-
el.titleSize = titleSize;
|
|
24
|
-
}, [disabled, header, preview_header, select_btn_header, dir, iconURL, useCheckBoxHeader, titleSize]);
|
|
25
|
-
useEffect(() => {
|
|
26
|
-
const el = ref.current;
|
|
27
|
-
if (!el)
|
|
28
|
-
return;
|
|
29
|
-
const onChange = (e) => onIconChange?.(e.detail);
|
|
30
|
-
const onDisable = (e) => onIconDisableChange?.(e.detail);
|
|
31
|
-
el.addEventListener('iconChange', onChange);
|
|
32
|
-
el.addEventListener('iconDisableChange', onDisable);
|
|
33
|
-
return () => {
|
|
34
|
-
el.removeEventListener('iconChange', onChange);
|
|
35
|
-
el.removeEventListener('iconDisableChange', onDisable);
|
|
36
|
-
};
|
|
37
|
-
}, [onIconChange, onIconDisableChange]);
|
|
38
|
-
return React.createElement('pep-icon-picker-element', { ref, class: className, style });
|
|
39
|
-
};
|
|
40
|
-
//# sourceMappingURL=pep-icon-picker.js.map
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface IParamemeter {
|
|
3
|
-
Key: string;
|
|
4
|
-
Type?: string;
|
|
5
|
-
DefaultValue?: string;
|
|
6
|
-
Description?: string;
|
|
7
|
-
Internal?: boolean;
|
|
8
|
-
Persistency?: boolean;
|
|
9
|
-
Readonly?: boolean;
|
|
10
|
-
[key: string]: any;
|
|
11
|
-
}
|
|
12
|
-
export interface IParametersColumn {
|
|
13
|
-
Key: string;
|
|
14
|
-
Type: string;
|
|
15
|
-
Title: string;
|
|
16
|
-
Width: number;
|
|
17
|
-
}
|
|
18
|
-
export interface PepManageParametersProps {
|
|
19
|
-
showType?: boolean;
|
|
20
|
-
showAccessibility?: boolean;
|
|
21
|
-
showPersistency?: boolean;
|
|
22
|
-
inline?: boolean;
|
|
23
|
-
addPadding?: boolean;
|
|
24
|
-
parametersTitle?: string;
|
|
25
|
-
parametersColumns?: IParametersColumn[];
|
|
26
|
-
parameters?: IParamemeter[];
|
|
27
|
-
onParametersChange?: (parameters: IParamemeter[]) => void;
|
|
28
|
-
className?: string;
|
|
29
|
-
style?: React.CSSProperties;
|
|
30
|
-
}
|
|
31
|
-
export declare const PepManageParameters: React.FC<PepManageParametersProps>;
|
package/pep-manage-parameters.js
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from 'react';
|
|
2
|
-
export const PepManageParameters = ({ showType, showAccessibility, showPersistency, inline, addPadding, parametersTitle, parametersColumns, parameters, onParametersChange, className, style, }) => {
|
|
3
|
-
const ref = useRef(null);
|
|
4
|
-
// Apply inputs as element properties
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
const el = ref.current;
|
|
7
|
-
if (!el)
|
|
8
|
-
return;
|
|
9
|
-
if (showType !== undefined)
|
|
10
|
-
el.showType = showType;
|
|
11
|
-
if (showAccessibility !== undefined)
|
|
12
|
-
el.showAccessibility = showAccessibility;
|
|
13
|
-
if (showPersistency !== undefined)
|
|
14
|
-
el.showPersistency = showPersistency;
|
|
15
|
-
if (inline !== undefined)
|
|
16
|
-
el.inline = inline;
|
|
17
|
-
if (addPadding !== undefined)
|
|
18
|
-
el.addPadding = addPadding;
|
|
19
|
-
if (parametersTitle !== undefined)
|
|
20
|
-
el.parametersTitle = parametersTitle;
|
|
21
|
-
if (parametersColumns !== undefined)
|
|
22
|
-
el.parametersColumns = parametersColumns;
|
|
23
|
-
if (parameters !== undefined)
|
|
24
|
-
el.parameters = parameters;
|
|
25
|
-
}, [showType, showAccessibility, showPersistency, inline, addPadding, parametersTitle, parametersColumns, parameters]);
|
|
26
|
-
// Wire outputs
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
const el = ref.current;
|
|
29
|
-
if (!el)
|
|
30
|
-
return;
|
|
31
|
-
const handler = (e) => {
|
|
32
|
-
const ce = e;
|
|
33
|
-
onParametersChange?.(ce.detail ?? ref.current?.parameters ?? []);
|
|
34
|
-
};
|
|
35
|
-
el.addEventListener('parametersChange', handler);
|
|
36
|
-
return () => el.removeEventListener('parametersChange', handler);
|
|
37
|
-
}, [onParametersChange]);
|
|
38
|
-
return React.createElement('pep-manage-parameters-element', { ref, class: className, style });
|
|
39
|
-
};
|
|
40
|
-
//# sourceMappingURL=pep-manage-parameters.js.map
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { IParamemeter } from './pep-manage-parameters';
|
|
3
|
-
export interface MappedParameter {
|
|
4
|
-
Value: string;
|
|
5
|
-
Type: 'Default' | 'Static' | 'Dynamic';
|
|
6
|
-
}
|
|
7
|
-
export declare type MappedParameters = Record<string, MappedParameter>;
|
|
8
|
-
export interface PepMappingParametersProps {
|
|
9
|
-
mapToParameters?: Record<string, any>;
|
|
10
|
-
configurationParameters?: IParamemeter[];
|
|
11
|
-
mappedParameters?: MappedParameters;
|
|
12
|
-
maxHeight?: string;
|
|
13
|
-
onMappedParametersChange?: (mappedParameters: MappedParameters) => void;
|
|
14
|
-
className?: string;
|
|
15
|
-
style?: React.CSSProperties;
|
|
16
|
-
}
|
|
17
|
-
export declare const PepMappingParameters: React.FC<PepMappingParametersProps>;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from 'react';
|
|
2
|
-
export const PepMappingParameters = ({ mapToParameters, configurationParameters, mappedParameters, maxHeight, onMappedParametersChange, className, style, }) => {
|
|
3
|
-
const ref = useRef(null);
|
|
4
|
-
// Apply inputs as element properties
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
const el = ref.current;
|
|
7
|
-
if (!el)
|
|
8
|
-
return;
|
|
9
|
-
if (mapToParameters !== undefined)
|
|
10
|
-
el.mapToParameters = mapToParameters;
|
|
11
|
-
if (configurationParameters !== undefined)
|
|
12
|
-
el.configurationParameters = configurationParameters;
|
|
13
|
-
if (mappedParameters !== undefined)
|
|
14
|
-
el.mappedParameters = mappedParameters;
|
|
15
|
-
if (maxHeight !== undefined)
|
|
16
|
-
el.maxHeight = maxHeight;
|
|
17
|
-
}, [mapToParameters, configurationParameters, mappedParameters, maxHeight]);
|
|
18
|
-
// Wire outputs
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
const el = ref.current;
|
|
21
|
-
if (!el)
|
|
22
|
-
return;
|
|
23
|
-
const handler = (e) => {
|
|
24
|
-
const ce = e;
|
|
25
|
-
onMappedParametersChange?.(ce.detail ?? ref.current?.mappedParameters ?? {});
|
|
26
|
-
};
|
|
27
|
-
el.addEventListener('mappedParametersChange', handler);
|
|
28
|
-
return () => el.removeEventListener('mappedParametersChange', handler);
|
|
29
|
-
}, [onMappedParametersChange]);
|
|
30
|
-
return React.createElement('pep-mapping-parameters-element', { ref, class: className, style });
|
|
31
|
-
};
|
|
32
|
-
//# sourceMappingURL=pep-mapping-parameters.js.map
|
package/pep-menu-data-view.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface DataViewField {
|
|
3
|
-
FieldID: string;
|
|
4
|
-
Title?: string;
|
|
5
|
-
[key: string]: any;
|
|
6
|
-
}
|
|
7
|
-
export interface PepMenuDataViewProps {
|
|
8
|
-
fields?: DataViewField[];
|
|
9
|
-
availableFieldsTitles?: Map<string, string>;
|
|
10
|
-
emptyDropAreaId?: string;
|
|
11
|
-
mappedFieldsId?: string;
|
|
12
|
-
showAddSeparator?: boolean;
|
|
13
|
-
itemKeyLabel?: string;
|
|
14
|
-
itemTitleLabel?: string;
|
|
15
|
-
onFieldsChange?: (event: CustomEvent<DataViewField[]>) => void;
|
|
16
|
-
children?: React.ReactNode;
|
|
17
|
-
}
|
|
18
|
-
export declare const PepMenuDataView: React.FC<PepMenuDataViewProps>;
|
package/pep-menu-data-view.js
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React, { useRef, useEffect } from 'react';
|
|
2
|
-
export const PepMenuDataView = ({ fields = [], availableFieldsTitles, emptyDropAreaId = '', mappedFieldsId = '', showAddSeparator = true, itemKeyLabel = '', itemTitleLabel = '', onFieldsChange, children }) => {
|
|
3
|
-
const elementRef = useRef(null);
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
const element = elementRef.current;
|
|
6
|
-
if (!element)
|
|
7
|
-
return;
|
|
8
|
-
// Reflect props to custom element
|
|
9
|
-
if (fields !== undefined)
|
|
10
|
-
element.fields = fields;
|
|
11
|
-
if (availableFieldsTitles !== undefined)
|
|
12
|
-
element.availableFieldsTitles = availableFieldsTitles;
|
|
13
|
-
element.emptyDropAreaId = emptyDropAreaId;
|
|
14
|
-
element.mappedFieldsId = mappedFieldsId;
|
|
15
|
-
element.showAddSeparator = showAddSeparator;
|
|
16
|
-
element.itemKeyLabel = itemKeyLabel;
|
|
17
|
-
element.itemTitleLabel = itemTitleLabel;
|
|
18
|
-
}, [fields, availableFieldsTitles, emptyDropAreaId, mappedFieldsId, showAddSeparator, itemKeyLabel, itemTitleLabel]);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
const element = elementRef.current;
|
|
21
|
-
if (!element)
|
|
22
|
-
return;
|
|
23
|
-
const handleFieldsChange = (event) => {
|
|
24
|
-
if (onFieldsChange)
|
|
25
|
-
onFieldsChange(event);
|
|
26
|
-
};
|
|
27
|
-
// Add event listeners
|
|
28
|
-
element.addEventListener('fieldsChange', handleFieldsChange);
|
|
29
|
-
// Cleanup
|
|
30
|
-
return () => {
|
|
31
|
-
element.removeEventListener('fieldsChange', handleFieldsChange);
|
|
32
|
-
};
|
|
33
|
-
}, [onFieldsChange]);
|
|
34
|
-
return React.createElement('pep-menu-data-view-element', { ref: elementRef }, children);
|
|
35
|
-
};
|
|
36
|
-
//# sourceMappingURL=pep-menu-data-view.js.map
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface PepPaddingSettings {
|
|
3
|
-
IsUniform?: boolean;
|
|
4
|
-
PaddingValue?: string;
|
|
5
|
-
}
|
|
6
|
-
export interface PepPaddingSettingsProps {
|
|
7
|
-
padding?: PepPaddingSettings;
|
|
8
|
-
onPaddingChange?: (value: PepPaddingSettings) => void;
|
|
9
|
-
className?: string;
|
|
10
|
-
style?: React.CSSProperties;
|
|
11
|
-
}
|
|
12
|
-
export declare const PepPaddingSettings: React.FC<PepPaddingSettingsProps>;
|
package/pep-padding-settings.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from 'react';
|
|
2
|
-
export const PepPaddingSettings = ({ padding, onPaddingChange, className, style, }) => {
|
|
3
|
-
const ref = useRef(null);
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
const el = ref.current;
|
|
6
|
-
if (!el)
|
|
7
|
-
return;
|
|
8
|
-
if (padding !== undefined)
|
|
9
|
-
el.padding = padding;
|
|
10
|
-
}, [padding]);
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
const el = ref.current;
|
|
13
|
-
if (!el)
|
|
14
|
-
return;
|
|
15
|
-
const handler = (e) => {
|
|
16
|
-
const ce = e;
|
|
17
|
-
onPaddingChange?.(ce.detail ?? ref.current?.padding);
|
|
18
|
-
};
|
|
19
|
-
el.addEventListener('paddingChange', handler);
|
|
20
|
-
return () => el.removeEventListener('paddingChange', handler);
|
|
21
|
-
}, [onPaddingChange]);
|
|
22
|
-
return React.createElement('pep-padding-settings-element', { ref, class: className, style });
|
|
23
|
-
};
|
|
24
|
-
//# sourceMappingURL=pep-padding-settings.js.map
|
package/pep-rich-text.d.ts
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare type PepHorizontalAlignment = 'start' | 'center' | 'end' | 'space-between' | string;
|
|
3
|
-
export declare type PepLayoutType = 'form' | 'card' | 'table' | string;
|
|
4
|
-
export interface PepToolbarImageOptions {
|
|
5
|
-
useAssetsABI?: boolean;
|
|
6
|
-
}
|
|
7
|
-
export interface IPepRichHtmlTextareaToolbarOptions {
|
|
8
|
-
font?: boolean;
|
|
9
|
-
size?: boolean;
|
|
10
|
-
header?: boolean;
|
|
11
|
-
bold?: boolean;
|
|
12
|
-
italic?: boolean;
|
|
13
|
-
underline?: boolean;
|
|
14
|
-
strike?: boolean;
|
|
15
|
-
link?: boolean;
|
|
16
|
-
image?: boolean | PepToolbarImageOptions;
|
|
17
|
-
ordered?: boolean;
|
|
18
|
-
bullet?: boolean;
|
|
19
|
-
color?: boolean;
|
|
20
|
-
background?: boolean;
|
|
21
|
-
align?: boolean;
|
|
22
|
-
}
|
|
23
|
-
export interface PepRichTextProps {
|
|
24
|
-
keyProp?: string;
|
|
25
|
-
value?: string;
|
|
26
|
-
label?: string;
|
|
27
|
-
mandatory?: boolean;
|
|
28
|
-
disabled?: boolean;
|
|
29
|
-
readonly?: boolean;
|
|
30
|
-
maxFieldCharacters?: number;
|
|
31
|
-
xAlignment?: PepHorizontalAlignment;
|
|
32
|
-
sanitize?: boolean;
|
|
33
|
-
rowSpan?: number;
|
|
34
|
-
visible?: boolean;
|
|
35
|
-
isActive?: boolean;
|
|
36
|
-
showTitle?: boolean;
|
|
37
|
-
renderTitle?: boolean;
|
|
38
|
-
renderEnlargeButton?: boolean;
|
|
39
|
-
layoutType?: PepLayoutType;
|
|
40
|
-
inlineMode?: boolean;
|
|
41
|
-
useAssetsForImages?: boolean;
|
|
42
|
-
toolbarOptions?: IPepRichHtmlTextareaToolbarOptions;
|
|
43
|
-
onValueChange?: (val: any) => void;
|
|
44
|
-
className?: string;
|
|
45
|
-
style?: React.CSSProperties;
|
|
46
|
-
}
|
|
47
|
-
export declare const PepRichText: React.FC<PepRichTextProps>;
|