@pepperi-addons/ngx-composite-lib-react 0.5.4 → 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.
Files changed (54) hide show
  1. package/package.json +1 -1
  2. package/elements/3rdpartylicenses.txt +0 -641
  3. package/elements/index.html +0 -10
  4. package/elements/main.js +0 -1
  5. package/elements/polyfills.js +0 -1
  6. package/elements/runtime.js +0 -1
  7. package/elements/styles.css +0 -16
  8. package/i18n/de.ngx-composite-lib.json +0 -2
  9. package/i18n/en.ngx-composite-lib.json +0 -181
  10. package/i18n/es.ngx-composite-lib.json +0 -2
  11. package/i18n/fr.ngx-composite-lib.json +0 -2
  12. package/i18n/he.ngx-composite-lib.json +0 -2
  13. package/i18n/hu.ngx-composite-lib.json +0 -2
  14. package/i18n/it.ngx-composite-lib.json +0 -2
  15. package/i18n/ja.ngx-composite-lib.json +0 -2
  16. package/i18n/nl.ngx-composite-lib.json +0 -2
  17. package/i18n/pl.ngx-composite-lib.json +0 -2
  18. package/i18n/pt.ngx-composite-lib.json +0 -2
  19. package/i18n/ru.ngx-composite-lib.json +0 -2
  20. package/i18n/zh.ngx-composite-lib.json +0 -2
  21. package/index.d.ts +0 -16
  22. package/index.js +0 -17
  23. package/pep-color-settings.d.ts +0 -17
  24. package/pep-color-settings.js +0 -34
  25. package/pep-data-view-builder.d.ts +0 -28
  26. package/pep-data-view-builder.js +0 -42
  27. package/pep-file-status-panel.d.ts +0 -18
  28. package/pep-file-status-panel.js +0 -29
  29. package/pep-flow-picker-button.d.ts +0 -13
  30. package/pep-flow-picker-button.js +0 -30
  31. package/pep-generic-fields-builder.d.ts +0 -33
  32. package/pep-generic-fields-builder.js +0 -57
  33. package/pep-generic-form.d.ts +0 -52
  34. package/pep-generic-form.js +0 -47
  35. package/pep-generic-list.d.ts +0 -74
  36. package/pep-generic-list.js +0 -141
  37. package/pep-group-buttons-settings.d.ts +0 -25
  38. package/pep-group-buttons-settings.js +0 -58
  39. package/pep-icon-picker.d.ts +0 -18
  40. package/pep-icon-picker.js +0 -40
  41. package/pep-manage-parameters.d.ts +0 -31
  42. package/pep-manage-parameters.js +0 -40
  43. package/pep-mapping-parameters.d.ts +0 -17
  44. package/pep-mapping-parameters.js +0 -32
  45. package/pep-menu-data-view.d.ts +0 -18
  46. package/pep-menu-data-view.js +0 -36
  47. package/pep-padding-settings.d.ts +0 -12
  48. package/pep-padding-settings.js +0 -24
  49. package/pep-rich-text.d.ts +0 -47
  50. package/pep-rich-text.js +0 -77
  51. package/pep-shadow-settings.d.ts +0 -15
  52. package/pep-shadow-settings.js +0 -23
  53. package/pep-show-if-badge.d.ts +0 -10
  54. package/pep-show-if-badge.js +0 -17
@@ -1,2 +0,0 @@
1
- {
2
- }
@@ -1,181 +0,0 @@
1
- {
2
- "COLOR_SETTINGS": {
3
- "OPACITY": "opacity",
4
- "COLOR": "color"
5
- },
6
- "SHADOW_SETTINGS": {
7
- "TITLE": "Drop shadow",
8
- "INTENSITY_SOFT": "Soft",
9
- "INTENSITY_REGULAR": "Regular",
10
- "INTENSITY_HARD": "Hard",
11
- "SIZE": "Shadow size",
12
- "INTENSITY": "Shadow intensity"
13
- },
14
- "PADDING_SETTINGS": {
15
- "TITLE": "Padding",
16
- "UNIFORM": "Uniform",
17
- "DESCRIPTION": "Uniform padding (Rems)",
18
- "TOP": "Top",
19
- "END": "End",
20
- "BOTTOM": "Bottom",
21
- "START": "Start"
22
- },
23
- "DATA_VIEW_BUILDER": {
24
- "TYPE_NOT_SUPPORTED": "This data view type is not supported",
25
- "AVAILABLE_FIELDS": "Available fields",
26
- "MENU_ITEM_KEY_TITLE": "Item key",
27
- "MENU_ITEM_VALUE_TITLE": "Item title",
28
- "EMPTY_DROP_AREA_TEXT": "Drop here from available fields",
29
- "ADD_SEPARATOR": "Add separator",
30
- "SEPARATOR_TITLE": "Separator title",
31
- "ADD_A_TITLE": "Add a title"
32
- },
33
- "GENERIC_FIELDS_BUILDER": {
34
- "AVAILABLE_FIELDS": "Available fields",
35
- "MENU_ITEM_KEY_TITLE": "Item key",
36
- "MENU_ITEM_VALUE_TITLE": "Item title",
37
- "EMPTY_DROP_AREA_TEXT": "Drop here from available fields",
38
- "ADD_SEPARATOR": "Add separator",
39
- "SEPARATOR_TITLE": "Separator title",
40
- "ADD_A_TITLE": "Add a title",
41
- "TEMPLATE_NOT_SUPPLIED": "Template not supplied for - {{fieldTitle}}"
42
- },
43
- "GENERAL": {
44
- "NONE": "None",
45
- "XS": "XS",
46
- "SM": "S",
47
- "MD": "M",
48
- "LG": "L",
49
- "XL": "XL",
50
- "XXL": "XXL",
51
- "FONT_WEIGHT": {
52
- "REGULAR": "Regular",
53
- "BOLD": "Bold",
54
- "BOLDER": "Bolder"
55
- },
56
- "WIDTH_SIZE": {
57
- "NARROW": "Narrow",
58
- "REGULAR": "Regular",
59
- "WIDE": "Wide"
60
- },
61
- "BOOLEAN": {
62
- "TRUE": "True",
63
- "FALSE": "False"
64
- },
65
- "HORIZONTAL_ALIGN": {
66
- "LEFT": "Left",
67
- "CENTER": "Center",
68
- "RIGHT": "Right"
69
- },
70
- "VERTICAL_ALIGN": {
71
- "TOP": "Top",
72
- "MIDDLE": "Middle",
73
- "BOTTOM": "Bottom"
74
- },
75
- "RESET_HINT": "Screen sizes support"
76
- },
77
- "ACTIONS": {
78
- "RESET": "Reset",
79
- "CLOSE": "Close",
80
- "DELETE": "Delete",
81
- "EDIT": "Edit",
82
- "PREVIEW": "Preview"
83
- },
84
- "MESSAGES": {
85
- "DIALOG_NOTICE_TITLE": "Notice",
86
- "DIALOG_INFO_TITLE": "Info",
87
- "DIALOG_ERROR_TITLE": "Error",
88
- "DIALOG_DELETE_TITLE": "Delete",
89
- "DELETE_DIALOG_CONTENT": "Are you sure?",
90
- "OPERATION_SUCCESS_CONTENT": "Operation success.",
91
- "MAPPED_FIELDS_UNMAPPED_ENTRIES_CONTENT": "There are unmapped entries. ‘Ok’ will remove them from the list.",
92
- "MAPPED_FIELDS_SAVED_DIALOG_CONTENT": "The mapped fields are saved.",
93
- "DIALOG_ERROR_CONTENT": "General error - please contact your administrator.",
94
- "DIALOG_ERROR_DETAILS": "<br/><small> Error details: {{error}} </small>"
95
- },
96
- "GENERIC_LIST": {
97
- "EMPTY_STATE": {
98
- "TITLE": "Nothing to see here",
99
- "DESCRIPTION": "Add or create an item to populate this list"
100
- },
101
- "OPEN_SIDEBAR": "Sidebar",
102
- "OPEN_FILTERS": "Filters"
103
- },
104
- "MANAGE_PARAMETERS": {
105
- "TITLE": "Parameters",
106
- "ADD_BUTTON_TITLE": "Add parameter",
107
- "EMPTY_STATE_TITLE":"No parameters here yet :-(",
108
- "EMPTY_STATE_DESCRIPTION":"Click on the \"Add parameter\" button above to get things going",
109
- "DELETE_DIALOG_TITLE": "Delete Param {{param_name}}",
110
- "DELETE_DIALOG_CONTENT": "Are you sure you want to delete this parameter?",
111
- "KEY_TITLE": "Key",
112
- "KEY_REGEX_ERROR": "Parameter Key cannot contain special characters on spaces",
113
- "DESCRIPTION_TITLE": "Description",
114
- "TYPE_TITLE": "Type",
115
- "DEFAULT_VALUE_TITLE": "Default Value",
116
- "INTERNAL_TITLE": "Internal",
117
- "ACCESSIBILITY_TITLE": "Accessibility",
118
- "PERSISTENCY_TITLE": "Persistency (If changed by the user, the value is saved and used in future use)",
119
- "EDIT_FORM_TITLE": "Edit parameter",
120
- "INTERNAL_DESCRIPTION": "The Variable Accessibility feature enables you to classify variables as either external or internal, defining their intended usage within this context.\n When marked as external, a parameter is accessible by external components using the picker \n When marked as internal, parameter is hidden from external entities, though available during the context run time",
121
- "ADD_FORM_TITLE": "Add parameter"
122
- },
123
- "MAPPING_PARAMETERS": {
124
- "VARIABLE_MAPPING": "Variable mapping",
125
- "DYNAMIC": "Dynamic",
126
- "STATIC": "Static",
127
- "DEFAULT": "Default"
128
- },
129
- "FLOW_PICKER_BUTTON": {
130
- "CHOOSE_FLOW": "Choose flow"
131
- },
132
- "ICON_PICKER_BUTTON": {
133
- "CHOOSE_ICON": "Open icon selector",
134
- "MAIN_HEADER": "Icon",
135
- "SELECTED": "Selected",
136
- "CHOOSE_ICON_HEADER": "Choose icon"
137
- },
138
- "LAYOUT_BUILDER": {
139
- "DEFAULT_TITLE": "Layout builder",
140
- "NO_TITLE": "No title",
141
- "VIEWPORT_WIDTH": "View port width",
142
- "PREVIEW_TITLE": "Preview Mode",
143
- "PREVIEW_CLICK_HERE": "Click here to edit",
144
- "DESKTOP": "Desktop",
145
- "TABLET": "Tablet",
146
- "MOBILE": "Mobile",
147
- "SECTION": "Section",
148
- "SECTION_NAME_TITLE": "Section Name (kebab-case)",
149
- "SUB_SECTION_TITLE": "Sub Section",
150
- "COLLAPSE_ON_TABLET_TITLE": "Collapse on Tablet",
151
- "COLLAPSE_ON_TABLET_DESCRIPTION": "Enable this will make the sub section collapse into one column on tablet view",
152
- "FILL_HEIGHT_SECTION_TITLE": "Fill Height",
153
- "FILL_HEIGHT_SECTION_DESCRIPTION": "Set Fill Height on to make the section to fill the relative screen size",
154
- "SECTIONS_TITLE": "Sections",
155
- "LAYOUT": "Layout",
156
- "SPLIT_TITLE": "Split",
157
- "ADD_SECTION": "Add Section",
158
- "BLOCKS_COUNT_LIMIT_MESSAGE": "You exceeded your blocks number limit - please contact your administrator.",
159
- "DELETE_SECTION_MSG": "This action will delete out of range content. This action is irreversible!",
160
- "DELETE_SECTION_TITLE": "Caution",
161
- "GENERAL": "General",
162
- "DESIGN": "Design",
163
- "BLOCKS_TITLE": "Blocks",
164
- "FULL_WIDTH_TITLE": "Full Width",
165
- "MAX_WIDTH_TITLE": "Max Width",
166
- "AUTO_HEIGHT_TITLE": "Auto Height",
167
- "MAX_HEIGHT_TITLE": "Max Height",
168
- "HEIGHT_TITLE": "Height",
169
- "SPACING_TITLE": "Spacing",
170
- "SPACING_HORIZONTAL_TITLE": "Left & Right",
171
- "SPACING_VERTICAL_TITLE": "Top & Bottom",
172
- "GAPS_TITLE": "Gaps",
173
- "SECTIONS_GAP_TITLE": "Gap size between sections",
174
- "COLUMNS_GAP_TITLE": "Gap size between columns",
175
- "ROUNDED_CORNERS_TITLE": "Rounded Corners",
176
- "BORDER_RADIUS_TITLE": "Global border radius",
177
- "HIDE_IN": {
178
- "HIDE_IN_TITLE": "Hide on:"
179
- }
180
- }
181
- }
@@ -1,2 +0,0 @@
1
- {
2
- }
@@ -1,2 +0,0 @@
1
- {
2
- }
@@ -1,2 +0,0 @@
1
- {
2
- }
@@ -1,2 +0,0 @@
1
- {
2
- }
@@ -1,2 +0,0 @@
1
- {
2
- }
@@ -1,2 +0,0 @@
1
- {
2
- }
@@ -1,2 +0,0 @@
1
- {
2
- }
@@ -1,2 +0,0 @@
1
- {
2
- }
@@ -1,2 +0,0 @@
1
- {
2
- }
@@ -1,2 +0,0 @@
1
- {
2
- }
@@ -1,2 +0,0 @@
1
- {
2
- }
package/index.d.ts DELETED
@@ -1,16 +0,0 @@
1
- export { PepColorSettings } from './pep-color-settings.js';
2
- export { PepGroupButtonsSettings } from './pep-group-buttons-settings.js';
3
- export { PepFlowPickerButton } from './pep-flow-picker-button.js';
4
- export { PepIconPicker } from './pep-icon-picker.js';
5
- export { PepPaddingSettings } from './pep-padding-settings.js';
6
- export { PepShadowSettings } from './pep-shadow-settings.js';
7
- export { PepRichText } from './pep-rich-text.js';
8
- export { PepShowIfBadge } from './pep-show-if-badge.js';
9
- export { PepGenericList } from './pep-generic-list.js';
10
- export { PepFileStatusPanel } from './pep-file-status-panel.js';
11
- export { PepGenericForm } from './pep-generic-form.js';
12
- export { PepDataViewBuilder } from './pep-data-view-builder.js';
13
- export { PepMenuDataView } from './pep-menu-data-view.js';
14
- export { PepManageParameters } from './pep-manage-parameters.js';
15
- export { PepMappingParameters } from './pep-mapping-parameters.js';
16
- export { PepGenericFieldsBuilder } from './pep-generic-fields-builder.js';
package/index.js DELETED
@@ -1,17 +0,0 @@
1
- export { PepColorSettings } from './pep-color-settings.js';
2
- export { PepGroupButtonsSettings } from './pep-group-buttons-settings.js';
3
- export { PepFlowPickerButton } from './pep-flow-picker-button.js';
4
- export { PepIconPicker } from './pep-icon-picker.js';
5
- export { PepPaddingSettings } from './pep-padding-settings.js';
6
- export { PepShadowSettings } from './pep-shadow-settings.js';
7
- export { PepRichText } from './pep-rich-text.js';
8
- export { PepShowIfBadge } from './pep-show-if-badge.js';
9
- export { PepGenericList } from './pep-generic-list.js';
10
- export { PepFileStatusPanel } from './pep-file-status-panel.js';
11
- export { PepGenericForm } from './pep-generic-form.js';
12
- export { PepDataViewBuilder } from './pep-data-view-builder.js';
13
- export { PepMenuDataView } from './pep-menu-data-view.js';
14
- export { PepManageParameters } from './pep-manage-parameters.js';
15
- export { PepMappingParameters } from './pep-mapping-parameters.js';
16
- export { PepGenericFieldsBuilder } from './pep-generic-fields-builder.js';
17
- //# sourceMappingURL=index.js.map
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
- export interface PepColorSettingsValue {
3
- value?: string;
4
- opacity?: number;
5
- use?: boolean;
6
- }
7
- export interface PepColorSettingsProps {
8
- title?: string;
9
- checkAAComplient?: boolean;
10
- showAAComplient?: boolean;
11
- titleSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
12
- color?: PepColorSettingsValue;
13
- onColorChange?: (value: PepColorSettingsValue) => void;
14
- className?: string;
15
- style?: React.CSSProperties;
16
- }
17
- export declare const PepColorSettings: React.FC<PepColorSettingsProps>;
@@ -1,34 +0,0 @@
1
- import React, { useEffect, useRef } from 'react';
2
- export const PepColorSettings = ({ title, checkAAComplient, showAAComplient, titleSize, color, onColorChange, className, style, }) => {
3
- const ref = useRef(null);
4
- // Apply inputs as element properties (preferred for Angular Elements)
5
- useEffect(() => {
6
- const el = ref.current;
7
- if (!el)
8
- return;
9
- if (title !== undefined)
10
- el.title = title;
11
- if (checkAAComplient !== undefined)
12
- el.checkAAComplient = checkAAComplient;
13
- if (showAAComplient !== undefined)
14
- el.showAAComplient = showAAComplient;
15
- if (titleSize !== undefined)
16
- el.titleSize = titleSize;
17
- if (color !== undefined)
18
- el.color = color;
19
- }, [title, checkAAComplient, showAAComplient, titleSize, color]);
20
- // Wire outputs
21
- useEffect(() => {
22
- const el = ref.current;
23
- if (!el)
24
- return;
25
- const handler = (e) => {
26
- const ce = e;
27
- onColorChange?.(ce.detail ?? el.color);
28
- };
29
- el.addEventListener('colorChange', handler);
30
- return () => el.removeEventListener('colorChange', handler);
31
- }, [onColorChange]);
32
- return React.createElement('pep-color-settings-element', { ref, class: className, style });
33
- };
34
- //# sourceMappingURL=pep-color-settings.js.map
@@ -1,28 +0,0 @@
1
- import React from 'react';
2
- export interface IPepDraggableItem {
3
- data: {
4
- key: string;
5
- [key: string]: any;
6
- };
7
- title: string;
8
- disabled?: boolean;
9
- [key: string]: any;
10
- }
11
- export interface BaseDataView {
12
- Type: string;
13
- Fields?: any[];
14
- [key: string]: any;
15
- }
16
- export declare type PepDataViewBuilderType = 'menu' | 'list' | 'card' | 'not-supported';
17
- export interface PepDataViewBuilderProps {
18
- builderTitle?: string;
19
- builderTitleHint?: string;
20
- showAddSeparator?: boolean;
21
- itemKeyLabel?: string;
22
- itemTitleLabel?: string;
23
- availableFields?: IPepDraggableItem[];
24
- dataView?: BaseDataView;
25
- onDataViewChange?: (event: CustomEvent<BaseDataView>) => void;
26
- children?: React.ReactNode;
27
- }
28
- export declare const PepDataViewBuilder: React.FC<PepDataViewBuilderProps>;
@@ -1,42 +0,0 @@
1
- import React, { useRef, useEffect } from 'react';
2
- export const PepDataViewBuilder = ({ builderTitle = '', builderTitleHint = '', showAddSeparator = true, itemKeyLabel = '', itemTitleLabel = '', availableFields = [], dataView, onDataViewChange, children }) => {
3
- const elementRef = useRef(null);
4
- useEffect(() => {
5
- const element = elementRef.current;
6
- if (!element)
7
- return;
8
- // Use setTimeout to ensure the element is fully initialized
9
- setTimeout(() => {
10
- // Reflect props to custom element
11
- element.builderTitle = builderTitle;
12
- element.builderTitleHint = builderTitleHint;
13
- element.showAddSeparator = showAddSeparator;
14
- element.itemKeyLabel = itemKeyLabel;
15
- element.itemTitleLabel = itemTitleLabel;
16
- // Set availableFields first, then dataView to trigger proper initialization
17
- if (availableFields !== undefined) {
18
- element.availableFields = availableFields;
19
- }
20
- if (dataView !== undefined) {
21
- element.dataView = dataView;
22
- }
23
- }, 0);
24
- }, [builderTitle, builderTitleHint, showAddSeparator, itemKeyLabel, itemTitleLabel, availableFields, dataView]);
25
- useEffect(() => {
26
- const element = elementRef.current;
27
- if (!element)
28
- return;
29
- const handleDataViewChange = (event) => {
30
- if (onDataViewChange)
31
- onDataViewChange(event);
32
- };
33
- // Add event listeners
34
- element.addEventListener('dataViewChange', handleDataViewChange);
35
- // Cleanup
36
- return () => {
37
- element.removeEventListener('dataViewChange', handleDataViewChange);
38
- };
39
- }, [onDataViewChange]);
40
- return React.createElement('pep-data-view-builder-element', { ref: elementRef }, children);
41
- };
42
- //# sourceMappingURL=pep-data-view-builder.js.map
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
- export interface PepSnackBarData {
3
- title?: string;
4
- content?: Array<{
5
- key?: number;
6
- name?: string;
7
- status?: string;
8
- statusMessage?: string;
9
- }>;
10
- }
11
- export interface PepFileStatusPanelProps {
12
- panelData?: PepSnackBarData;
13
- openAsSnackBar?: boolean;
14
- closeClick?: () => void;
15
- className?: string;
16
- style?: React.CSSProperties;
17
- }
18
- export declare const PepFileStatusPanel: React.FC<PepFileStatusPanelProps>;
@@ -1,29 +0,0 @@
1
- import React, { useEffect, useRef } from 'react';
2
- export const PepFileStatusPanel = (props) => {
3
- const ref = useRef(null);
4
- useEffect(() => {
5
- const el = ref.current;
6
- if (!el)
7
- return;
8
- if (props.panelData !== undefined)
9
- el.panelData = props.panelData;
10
- if (props.openAsSnackBar !== undefined)
11
- el.openAsSnackBar = props.openAsSnackBar;
12
- }, [props.panelData, props.openAsSnackBar]);
13
- useEffect(() => {
14
- const el = ref.current;
15
- if (!el)
16
- return;
17
- const bind = (name, cb) => {
18
- if (!cb)
19
- return () => { };
20
- const handler = () => cb();
21
- el.addEventListener(name, handler);
22
- return () => el.removeEventListener(name, handler);
23
- };
24
- const unsubs = [bind('closeClick', props.closeClick)];
25
- return () => { unsubs.forEach((u) => u()); };
26
- }, [props.closeClick]);
27
- return React.createElement('pep-file-status-panel-element', { ref, class: props.className, style: props.style });
28
- };
29
- //# sourceMappingURL=pep-file-status-panel.js.map
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- export declare type PepStyleType = 'weak' | 'regular' | 'strong' | string;
3
- export declare type PepDialogSizeType = 'regular' | 'full-screen' | 'medium' | 'large' | string;
4
- export interface PepFlowPickerButtonProps {
5
- flowHostObject?: any;
6
- disabled?: boolean;
7
- styleType?: PepStyleType;
8
- flowDlgSize?: PepDialogSizeType;
9
- onFlowChange?: (data: any) => void;
10
- className?: string;
11
- style?: React.CSSProperties;
12
- }
13
- export declare const PepFlowPickerButton: React.FC<PepFlowPickerButtonProps>;
@@ -1,30 +0,0 @@
1
- import React, { useEffect, useRef } from 'react';
2
- export const PepFlowPickerButton = ({ flowHostObject, disabled, styleType, flowDlgSize, onFlowChange, className, style, }) => {
3
- const ref = useRef(null);
4
- useEffect(() => {
5
- const el = ref.current;
6
- if (!el)
7
- return;
8
- if (flowHostObject !== undefined)
9
- el.flowHostObject = flowHostObject;
10
- if (disabled !== undefined)
11
- el.disabled = disabled;
12
- if (styleType !== undefined)
13
- el.styleType = styleType;
14
- if (flowDlgSize !== undefined)
15
- el.flowDlgSize = flowDlgSize;
16
- }, [flowHostObject, disabled, styleType, flowDlgSize]);
17
- useEffect(() => {
18
- const el = ref.current;
19
- if (!el)
20
- return;
21
- const handler = (e) => {
22
- const ce = e;
23
- onFlowChange?.(ce.detail);
24
- };
25
- el.addEventListener('flowChange', handler);
26
- return () => el.removeEventListener('flowChange', handler);
27
- }, [onFlowChange]);
28
- return React.createElement('pep-flow-picker-button-element', { ref, class: className, style });
29
- };
30
- //# sourceMappingURL=pep-flow-picker-button.js.map
@@ -1,33 +0,0 @@
1
- import React from 'react';
2
- export interface IPepDraggableItemData {
3
- [key: string]: any;
4
- }
5
- export interface IPepDraggableItem {
6
- title: string;
7
- data: IPepDraggableItemData;
8
- [key: string]: any;
9
- }
10
- export interface IPepGenericField {
11
- key: string;
12
- title: string;
13
- draggableItemData: IPepDraggableItemData;
14
- [key: string]: any;
15
- }
16
- export interface IPepGenericFieldAddedEvent {
17
- field: IPepGenericField;
18
- index: number;
19
- }
20
- export interface PepGenericFieldsBuilderProps {
21
- builderTitle?: string;
22
- builderTitleHint?: string;
23
- showAddSeparator?: boolean;
24
- itemKeyLabel?: string;
25
- itemTitleLabel?: string;
26
- availableFields?: IPepDraggableItem[];
27
- fields?: IPepGenericField[];
28
- onFieldsChange?: (fields: IPepGenericField[]) => void;
29
- onFieldAdd?: (event: IPepGenericFieldAddedEvent) => void;
30
- className?: string;
31
- style?: React.CSSProperties;
32
- }
33
- export declare const PepGenericFieldsBuilder: React.FC<PepGenericFieldsBuilderProps>;
@@ -1,57 +0,0 @@
1
- import React, { useEffect, useRef } from 'react';
2
- export const PepGenericFieldsBuilder = ({ builderTitle, builderTitleHint, showAddSeparator, itemKeyLabel, itemTitleLabel, availableFields, fields, onFieldsChange, onFieldAdd, 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
- // Wait for custom element to be defined and connected
10
- const setPropertiesWhenReady = async () => {
11
- await customElements.whenDefined('pep-generic-fields-builder-element');
12
- // Wait for multiple animation frames to ensure Angular is fully initialized
13
- await new Promise(resolve => requestAnimationFrame(() => {
14
- requestAnimationFrame(() => {
15
- requestAnimationFrame(resolve);
16
- });
17
- }));
18
- if (builderTitle !== undefined)
19
- el.builderTitle = builderTitle;
20
- if (builderTitleHint !== undefined)
21
- el.builderTitleHint = builderTitleHint;
22
- if (showAddSeparator !== undefined)
23
- el.showAddSeparator = showAddSeparator;
24
- if (itemKeyLabel !== undefined)
25
- el.itemKeyLabel = itemKeyLabel;
26
- if (itemTitleLabel !== undefined)
27
- el.itemTitleLabel = itemTitleLabel;
28
- if (availableFields !== undefined)
29
- el.availableFields = availableFields;
30
- if (fields !== undefined)
31
- el.fields = fields;
32
- };
33
- setPropertiesWhenReady();
34
- }, [builderTitle, builderTitleHint, showAddSeparator, itemKeyLabel, itemTitleLabel, availableFields, fields]);
35
- // Wire outputs
36
- useEffect(() => {
37
- const el = ref.current;
38
- if (!el)
39
- return;
40
- const fieldsChangeHandler = (e) => {
41
- const ce = e;
42
- onFieldsChange?.(ce.detail ?? ref.current?.fields ?? []);
43
- };
44
- const fieldAddHandler = (e) => {
45
- const ce = e;
46
- onFieldAdd?.(ce.detail);
47
- };
48
- el.addEventListener('fieldsChange', fieldsChangeHandler);
49
- el.addEventListener('fieldAdd', fieldAddHandler);
50
- return () => {
51
- el.removeEventListener('fieldsChange', fieldsChangeHandler);
52
- el.removeEventListener('fieldAdd', fieldAddHandler);
53
- };
54
- }, [onFieldsChange, onFieldAdd]);
55
- return React.createElement('pep-generic-fields-builder-element', { ref, class: className, style });
56
- };
57
- //# sourceMappingURL=pep-generic-fields-builder.js.map
@@ -1,52 +0,0 @@
1
- import React from 'react';
2
- export interface IPepGenericFormDataView {
3
- UID?: string;
4
- Fields: IPepGenericFormDataViewField[];
5
- [key: string]: any;
6
- }
7
- export interface IPepGenericFormDataViewField {
8
- FieldID: string;
9
- OptionalValues: Array<{
10
- Key: string;
11
- Value: string;
12
- }>;
13
- AdditionalProps: {
14
- [key: string]: any;
15
- };
16
- [key: string]: any;
17
- }
18
- export interface IPepGenericFormValueChange {
19
- UID: string;
20
- ApiName: string;
21
- Value: any;
22
- }
23
- export interface IPepGenericFormFieldUpdate {
24
- FieldId: string;
25
- Params: IPepGenericFormDataParams;
26
- }
27
- export interface IPepGenericFormDataParams {
28
- Value?: any;
29
- Visible?: boolean;
30
- Enabled?: boolean;
31
- BackgroundColor?: string;
32
- TextColor?: string;
33
- Highlighted?: boolean;
34
- OptionalValues?: Array<{
35
- Key: string;
36
- Value: string;
37
- }>;
38
- [key: string]: any;
39
- }
40
- export interface PepGenericFormProps {
41
- dataSource?: any;
42
- dataView?: IPepGenericFormDataView;
43
- isLocked?: boolean;
44
- inline?: boolean;
45
- showTopBar?: boolean;
46
- addPadding?: boolean;
47
- onValueChange?: (event: CustomEvent<IPepGenericFormValueChange>) => void;
48
- onFieldClick?: (event: CustomEvent<IPepGenericFormValueChange>) => void;
49
- onFormValidationChange?: (event: CustomEvent<boolean>) => void;
50
- children?: React.ReactNode;
51
- }
52
- export declare const PepGenericForm: React.FC<PepGenericFormProps>;