@pepperi-addons/ngx-composite-lib-react 0.5.0 → 0.5.1

package/index.d.ts

@@ -8,3 +8,9 @@ export { PepRichText } from './pep-rich-text.js';
 export { PepShowIfBadge } from './pep-show-if-badge.js';
 export { PepGenericList } from './pep-generic-list.js';
 export { PepFileStatusPanel } from './pep-file-status-panel.js';
+export { PepGenericForm } from './pep-generic-form.js';
+export { PepDataViewBuilder } from './pep-data-view-builder.js';
+export { PepMenuDataView } from './pep-menu-data-view.js';
+export { PepManageParameters } from './pep-manage-parameters.js';
+export { PepMappingParameters } from './pep-mapping-parameters.js';
+export { PepGenericFieldsBuilder } from './pep-generic-fields-builder.js';

package/index.js

@@ -8,4 +8,10 @@ export { PepRichText } from './pep-rich-text.js';
 export { PepShowIfBadge } from './pep-show-if-badge.js';
 export { PepGenericList } from './pep-generic-list.js';
 export { PepFileStatusPanel } from './pep-file-status-panel.js';
+export { PepGenericForm } from './pep-generic-form.js';
+export { PepDataViewBuilder } from './pep-data-view-builder.js';
+export { PepMenuDataView } from './pep-menu-data-view.js';
+export { PepManageParameters } from './pep-manage-parameters.js';
+export { PepMappingParameters } from './pep-mapping-parameters.js';
+export { PepGenericFieldsBuilder } from './pep-generic-fields-builder.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-composite-lib-react",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "React wrappers for Pepperi ngx-composite-lib Angular Elements.",
   "license": "MIT",
   "author": "Pepperi",

package/pep-data-view-builder.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface IPepDraggableItem {
+    data: {
+        key: string;
+        [key: string]: any;
+    };
+    title: string;
+    disabled?: boolean;
+    [key: string]: any;
+}
+export interface BaseDataView {
+    Type: string;
+    Fields?: any[];
+    [key: string]: any;
+}
+export declare type PepDataViewBuilderType = 'menu' | 'list' | 'card' | 'not-supported';
+export interface PepDataViewBuilderProps {
+    builderTitle?: string;
+    builderTitleHint?: string;
+    showAddSeparator?: boolean;
+    itemKeyLabel?: string;
+    itemTitleLabel?: string;
+    availableFields?: IPepDraggableItem[];
+    dataView?: BaseDataView;
+    onDataViewChange?: (event: CustomEvent<BaseDataView>) => void;
+    children?: React.ReactNode;
+}
+export declare const PepDataViewBuilder: React.FC<PepDataViewBuilderProps>;

package/pep-data-view-builder.js

@@ -0,0 +1,42 @@
+import React, { useRef, useEffect } from 'react';
+export const PepDataViewBuilder = ({ builderTitle = '', builderTitleHint = '', showAddSeparator = true, itemKeyLabel = '', itemTitleLabel = '', availableFields = [], dataView, onDataViewChange, children }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Use setTimeout to ensure the element is fully initialized
+        setTimeout(() => {
+            // Reflect props to custom element
+            element.builderTitle = builderTitle;
+            element.builderTitleHint = builderTitleHint;
+            element.showAddSeparator = showAddSeparator;
+            element.itemKeyLabel = itemKeyLabel;
+            element.itemTitleLabel = itemTitleLabel;
+            // Set availableFields first, then dataView to trigger proper initialization
+            if (availableFields !== undefined) {
+                element.availableFields = availableFields;
+            }
+            if (dataView !== undefined) {
+                element.dataView = dataView;
+            }
+        }, 0);
+    }, [builderTitle, builderTitleHint, showAddSeparator, itemKeyLabel, itemTitleLabel, availableFields, dataView]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const handleDataViewChange = (event) => {
+            if (onDataViewChange)
+                onDataViewChange(event);
+        };
+        // Add event listeners
+        element.addEventListener('dataViewChange', handleDataViewChange);
+        // Cleanup
+        return () => {
+            element.removeEventListener('dataViewChange', handleDataViewChange);
+        };
+    }, [onDataViewChange]);
+    return React.createElement('pep-data-view-builder-element', { ref: elementRef }, children);
+};
+//# sourceMappingURL=pep-data-view-builder.js.map

package/pep-generic-fields-builder.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export interface IPepDraggableItemData {
+    [key: string]: any;
+}
+export interface IPepDraggableItem {
+    title: string;
+    data: IPepDraggableItemData;
+    [key: string]: any;
+}
+export interface IPepGenericField {
+    key: string;
+    title: string;
+    draggableItemData: IPepDraggableItemData;
+    [key: string]: any;
+}
+export interface IPepGenericFieldAddedEvent {
+    field: IPepGenericField;
+    index: number;
+}
+export interface PepGenericFieldsBuilderProps {
+    builderTitle?: string;
+    builderTitleHint?: string;
+    showAddSeparator?: boolean;
+    itemKeyLabel?: string;
+    itemTitleLabel?: string;
+    availableFields?: IPepDraggableItem[];
+    fields?: IPepGenericField[];
+    onFieldsChange?: (fields: IPepGenericField[]) => void;
+    onFieldAdd?: (event: IPepGenericFieldAddedEvent) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepGenericFieldsBuilder: React.FC<PepGenericFieldsBuilderProps>;

package/pep-generic-fields-builder.js

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef } from 'react';
+export const PepGenericFieldsBuilder = ({ builderTitle, builderTitleHint, showAddSeparator, itemKeyLabel, itemTitleLabel, availableFields, fields, onFieldsChange, onFieldAdd, className, style, }) => {
+    const ref = useRef(null);
+    // Apply inputs as element properties
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        // Wait for custom element to be defined and connected
+        const setPropertiesWhenReady = async () => {
+            await customElements.whenDefined('pep-generic-fields-builder-element');
+            // Wait for multiple animation frames to ensure Angular is fully initialized
+            await new Promise(resolve => requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(resolve);
+                });
+            }));
+            if (builderTitle !== undefined)
+                el.builderTitle = builderTitle;
+            if (builderTitleHint !== undefined)
+                el.builderTitleHint = builderTitleHint;
+            if (showAddSeparator !== undefined)
+                el.showAddSeparator = showAddSeparator;
+            if (itemKeyLabel !== undefined)
+                el.itemKeyLabel = itemKeyLabel;
+            if (itemTitleLabel !== undefined)
+                el.itemTitleLabel = itemTitleLabel;
+            if (availableFields !== undefined)
+                el.availableFields = availableFields;
+            if (fields !== undefined)
+                el.fields = fields;
+        };
+        setPropertiesWhenReady();
+    }, [builderTitle, builderTitleHint, showAddSeparator, itemKeyLabel, itemTitleLabel, availableFields, fields]);
+    // Wire outputs
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const fieldsChangeHandler = (e) => {
+            const ce = e;
+            onFieldsChange?.(ce.detail ?? ref.current?.fields ?? []);
+        };
+        const fieldAddHandler = (e) => {
+            const ce = e;
+            onFieldAdd?.(ce.detail);
+        };
+        el.addEventListener('fieldsChange', fieldsChangeHandler);
+        el.addEventListener('fieldAdd', fieldAddHandler);
+        return () => {
+            el.removeEventListener('fieldsChange', fieldsChangeHandler);
+            el.removeEventListener('fieldAdd', fieldAddHandler);
+        };
+    }, [onFieldsChange, onFieldAdd]);
+    return React.createElement('pep-generic-fields-builder-element', { ref, class: className, style });
+};
+//# sourceMappingURL=pep-generic-fields-builder.js.map

package/pep-generic-form.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+export interface IPepGenericFormDataView {
+    UID?: string;
+    Fields: IPepGenericFormDataViewField[];
+    [key: string]: any;
+}
+export interface IPepGenericFormDataViewField {
+    FieldID: string;
+    OptionalValues: Array<{
+        Key: string;
+        Value: string;
+    }>;
+    AdditionalProps: {
+        [key: string]: any;
+    };
+    [key: string]: any;
+}
+export interface IPepGenericFormValueChange {
+    UID: string;
+    ApiName: string;
+    Value: any;
+}
+export interface IPepGenericFormFieldUpdate {
+    FieldId: string;
+    Params: IPepGenericFormDataParams;
+}
+export interface IPepGenericFormDataParams {
+    Value?: any;
+    Visible?: boolean;
+    Enabled?: boolean;
+    BackgroundColor?: string;
+    TextColor?: string;
+    Highlighted?: boolean;
+    OptionalValues?: Array<{
+        Key: string;
+        Value: string;
+    }>;
+    [key: string]: any;
+}
+export interface PepGenericFormProps {
+    dataSource?: any;
+    dataView?: IPepGenericFormDataView;
+    isLocked?: boolean;
+    inline?: boolean;
+    showTopBar?: boolean;
+    addPadding?: boolean;
+    onValueChange?: (event: CustomEvent<IPepGenericFormValueChange>) => void;
+    onFieldClick?: (event: CustomEvent<IPepGenericFormValueChange>) => void;
+    onFormValidationChange?: (event: CustomEvent<boolean>) => void;
+    children?: React.ReactNode;
+}
+export declare const PepGenericForm: React.FC<PepGenericFormProps>;

package/pep-generic-form.js

@@ -0,0 +1,47 @@
+import React, { useRef, useEffect } from 'react';
+export const PepGenericForm = ({ dataSource, dataView, isLocked = false, inline = false, showTopBar = false, addPadding = false, onValueChange, onFieldClick, onFormValidationChange, children }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Reflect props to custom element
+        if (dataSource !== undefined)
+            element.dataSource = dataSource;
+        if (dataView !== undefined)
+            element.dataView = dataView;
+        element.isLocked = isLocked;
+        element.inline = inline;
+        element.showTopBar = showTopBar;
+        element.addPadding = addPadding;
+    }, [dataSource, dataView, isLocked, inline, showTopBar, addPadding]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const handleValueChange = (event) => {
+            if (onValueChange)
+                onValueChange(event);
+        };
+        const handleFieldClick = (event) => {
+            if (onFieldClick)
+                onFieldClick(event);
+        };
+        const handleFormValidationChange = (event) => {
+            if (onFormValidationChange)
+                onFormValidationChange(event);
+        };
+        // Add event listeners
+        element.addEventListener('valueChange', handleValueChange);
+        element.addEventListener('fieldClick', handleFieldClick);
+        element.addEventListener('formValidationChange', handleFormValidationChange);
+        // Cleanup
+        return () => {
+            element.removeEventListener('valueChange', handleValueChange);
+            element.removeEventListener('fieldClick', handleFieldClick);
+            element.removeEventListener('formValidationChange', handleFormValidationChange);
+        };
+    }, [onValueChange, onFieldClick, onFormValidationChange]);
+    return React.createElement('pep-generic-form-element', { ref: elementRef }, children);
+};
+//# sourceMappingURL=pep-generic-form.js.map

package/pep-group-buttons-settings.js

@@ -1,33 +1,60 @@
 import React, { useEffect, useRef } from 'react';
 export const PepGroupButtonsSettings = ({ header, subHeader, groupType, btnsArray, excludeKeys, useNone, disabled, dir, titleSize, bold, btnKey, onBtnkeyChange, className, style, }) => {
     const ref = useRef(null);
-    // Apply inputs as element properties
+    // Apply inputs as element properties - set excludeKeys BEFORE groupType
     useEffect(() => {
         const el = ref.current;
         if (!el)
             return;
-        if (header !== undefined)
+        console.log('[REACT DEBUG] Setting Group Buttons properties...');
+        console.log('[REACT DEBUG] Props received:', { header, subHeader, excludeKeys, groupType, btnsArray, useNone, disabled, dir, titleSize, bold, btnKey });
+        // Set properties in the correct order - excludeKeys must be set before groupType
+        if (header !== undefined) {
             el.header = header;
-        if (subHeader !== undefined)
+            console.log('[REACT DEBUG] Set header:', el.header);
+        }
+        if (subHeader !== undefined) {
             el.subHeader = subHeader;
-        if (groupType !== undefined)
-            el.groupType = groupType;
-        if (btnsArray !== undefined)
+            console.log('[REACT DEBUG] Set subHeader:', el.subHeader);
+        }
+        if (excludeKeys !== undefined) {
+            el.excludeKeys = excludeKeys; // Set excludeKeys FIRST
+            console.log('[REACT DEBUG] Set excludeKeys:', el.excludeKeys);
+        }
+        if (groupType !== undefined) {
+            el.groupType = groupType; // Then set groupType
+            console.log('[REACT DEBUG] Set groupType:', el.groupType);
+        }
+        if (btnsArray !== undefined) {
             el.btnsArray = btnsArray;
-        if (excludeKeys !== undefined)
-            el.excludeKeys = excludeKeys;
-        if (useNone !== undefined)
+            console.log('[REACT DEBUG] Set btnsArray:', el.btnsArray);
+        }
+        if (useNone !== undefined) {
             el.useNone = useNone;
-        if (disabled !== undefined)
+            console.log('[REACT DEBUG] Set useNone:', el.useNone);
+        }
+        if (disabled !== undefined) {
             el.disabled = disabled;
-        if (dir !== undefined)
+            console.log('[REACT DEBUG] Set disabled:', el.disabled);
+        }
+        if (dir !== undefined) {
             el.dir = dir;
-        if (titleSize !== undefined)
+            console.log('[REACT DEBUG] Set dir:', el.dir);
+        }
+        if (titleSize !== undefined) {
             el.titleSize = titleSize;
-        if (bold !== undefined)
+            console.log('[REACT DEBUG] Set titleSize:', el.titleSize);
+        }
+        if (bold !== undefined) {
             el.bold = bold;
-        if (btnKey !== undefined)
+            console.log('[REACT DEBUG] Set bold:', el.bold);
+        }
+        if (btnKey !== undefined) {
             el.btnKey = btnKey;
+            console.log('[REACT DEBUG] Set btnKey:', el.btnKey);
+        }
+        console.log('[REACT DEBUG] btnsArray:', el.btnsArray);
+        console.log('[REACT DEBUG] excludeKeys should trigger automatic arrayMerge via setter');
     }, [header, subHeader, groupType, btnsArray, excludeKeys, useNone, disabled, dir, titleSize, bold, btnKey]);
     // Wire outputs (Angular emits custom event name 'btnkeyChange')
     useEffect(() => {

package/pep-manage-parameters.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export interface IParamemeter {
+    Key: string;
+    Type?: string;
+    DefaultValue?: string;
+    Description?: string;
+    Internal?: boolean;
+    Persistency?: boolean;
+    Readonly?: boolean;
+    [key: string]: any;
+}
+export interface IParametersColumn {
+    Key: string;
+    Type: string;
+    Title: string;
+    Width: number;
+}
+export interface PepManageParametersProps {
+    showType?: boolean;
+    showAccessibility?: boolean;
+    showPersistency?: boolean;
+    inline?: boolean;
+    addPadding?: boolean;
+    parametersTitle?: string;
+    parametersColumns?: IParametersColumn[];
+    parameters?: IParamemeter[];
+    onParametersChange?: (parameters: IParamemeter[]) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepManageParameters: React.FC<PepManageParametersProps>;

package/pep-manage-parameters.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useRef } from 'react';
+export const PepManageParameters = ({ showType, showAccessibility, showPersistency, inline, addPadding, parametersTitle, parametersColumns, parameters, onParametersChange, className, style, }) => {
+    const ref = useRef(null);
+    // Apply inputs as element properties
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (showType !== undefined)
+            el.showType = showType;
+        if (showAccessibility !== undefined)
+            el.showAccessibility = showAccessibility;
+        if (showPersistency !== undefined)
+            el.showPersistency = showPersistency;
+        if (inline !== undefined)
+            el.inline = inline;
+        if (addPadding !== undefined)
+            el.addPadding = addPadding;
+        if (parametersTitle !== undefined)
+            el.parametersTitle = parametersTitle;
+        if (parametersColumns !== undefined)
+            el.parametersColumns = parametersColumns;
+        if (parameters !== undefined)
+            el.parameters = parameters;
+    }, [showType, showAccessibility, showPersistency, inline, addPadding, parametersTitle, parametersColumns, parameters]);
+    // Wire outputs
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => {
+            const ce = e;
+            onParametersChange?.(ce.detail ?? ref.current?.parameters ?? []);
+        };
+        el.addEventListener('parametersChange', handler);
+        return () => el.removeEventListener('parametersChange', handler);
+    }, [onParametersChange]);
+    return React.createElement('pep-manage-parameters-element', { ref, class: className, style });
+};
+//# sourceMappingURL=pep-manage-parameters.js.map

package/pep-mapping-parameters.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IParamemeter } from './pep-manage-parameters';
+export interface MappedParameter {
+    Value: string;
+    Type: 'Default' | 'Static' | 'Dynamic';
+}
+export declare type MappedParameters = Record<string, MappedParameter>;
+export interface PepMappingParametersProps {
+    mapToParameters?: Record<string, any>;
+    configurationParameters?: IParamemeter[];
+    mappedParameters?: MappedParameters;
+    maxHeight?: string;
+    onMappedParametersChange?: (mappedParameters: MappedParameters) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepMappingParameters: React.FC<PepMappingParametersProps>;

package/pep-mapping-parameters.js

@@ -0,0 +1,32 @@
+import React, { useEffect, useRef } from 'react';
+export const PepMappingParameters = ({ mapToParameters, configurationParameters, mappedParameters, maxHeight, onMappedParametersChange, className, style, }) => {
+    const ref = useRef(null);
+    // Apply inputs as element properties
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (mapToParameters !== undefined)
+            el.mapToParameters = mapToParameters;
+        if (configurationParameters !== undefined)
+            el.configurationParameters = configurationParameters;
+        if (mappedParameters !== undefined)
+            el.mappedParameters = mappedParameters;
+        if (maxHeight !== undefined)
+            el.maxHeight = maxHeight;
+    }, [mapToParameters, configurationParameters, mappedParameters, maxHeight]);
+    // Wire outputs
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => {
+            const ce = e;
+            onMappedParametersChange?.(ce.detail ?? ref.current?.mappedParameters ?? {});
+        };
+        el.addEventListener('mappedParametersChange', handler);
+        return () => el.removeEventListener('mappedParametersChange', handler);
+    }, [onMappedParametersChange]);
+    return React.createElement('pep-mapping-parameters-element', { ref, class: className, style });
+};
+//# sourceMappingURL=pep-mapping-parameters.js.map

package/pep-menu-data-view.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface DataViewField {
+    FieldID: string;
+    Title?: string;
+    [key: string]: any;
+}
+export interface PepMenuDataViewProps {
+    fields?: DataViewField[];
+    availableFieldsTitles?: Map<string, string>;
+    emptyDropAreaId?: string;
+    mappedFieldsId?: string;
+    showAddSeparator?: boolean;
+    itemKeyLabel?: string;
+    itemTitleLabel?: string;
+    onFieldsChange?: (event: CustomEvent<DataViewField[]>) => void;
+    children?: React.ReactNode;
+}
+export declare const PepMenuDataView: React.FC<PepMenuDataViewProps>;

package/pep-menu-data-view.js

@@ -0,0 +1,36 @@
+import React, { useRef, useEffect } from 'react';
+export const PepMenuDataView = ({ fields = [], availableFieldsTitles, emptyDropAreaId = '', mappedFieldsId = '', showAddSeparator = true, itemKeyLabel = '', itemTitleLabel = '', onFieldsChange, children }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Reflect props to custom element
+        if (fields !== undefined)
+            element.fields = fields;
+        if (availableFieldsTitles !== undefined)
+            element.availableFieldsTitles = availableFieldsTitles;
+        element.emptyDropAreaId = emptyDropAreaId;
+        element.mappedFieldsId = mappedFieldsId;
+        element.showAddSeparator = showAddSeparator;
+        element.itemKeyLabel = itemKeyLabel;
+        element.itemTitleLabel = itemTitleLabel;
+    }, [fields, availableFieldsTitles, emptyDropAreaId, mappedFieldsId, showAddSeparator, itemKeyLabel, itemTitleLabel]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const handleFieldsChange = (event) => {
+            if (onFieldsChange)
+                onFieldsChange(event);
+        };
+        // Add event listeners
+        element.addEventListener('fieldsChange', handleFieldsChange);
+        // Cleanup
+        return () => {
+            element.removeEventListener('fieldsChange', handleFieldsChange);
+        };
+    }, [onFieldsChange]);
+    return React.createElement('pep-menu-data-view-element', { ref: elementRef }, children);
+};
+//# sourceMappingURL=pep-menu-data-view.js.map