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

package/index.d.ts

@@ -1,19 +1,16 @@
-export * from './pep-color-settings.js';
-export * from './pep-padding-settings.js';
-export * from './pep-shadow-settings.js';
-export * from './pep-rich-text.js';
-export * from './pep-icon-picker.js';
-export * from './pep-generic-form.js';
-export * from './pep-generic-list.js';
-export * from './pep-data-view-builder.js';
-export * from './pep-field-container.js';
-export * from './pep-file-status-panel.js';
-export * from './pep-manage-parameters.js';
-export * from './pep-mapping-parameters.js';
-export * from './pep-show-if-badge.js';
-export * from './pep-layout.js';
-export * from './pep-layout-builder.js';
-export * from './pep-layout-builder-editor.js';
-export * from './pep-flow-picker-button.js';
-export { PepGroupButtonsSettingsReact } from './components/PepGroupButtonsSettingsReact.js';
-export { PepGroupButtonsSettings as PepGroupButtonsSettingsWC } from './pep-group-buttons-settings.js';
+export { PepColorSettings } from './pep-color-settings.js';
+export { PepGroupButtonsSettings } from './pep-group-buttons-settings.js';
+export { PepFlowPickerButton } from './pep-flow-picker-button.js';
+export { PepIconPicker } from './pep-icon-picker.js';
+export { PepPaddingSettings } from './pep-padding-settings.js';
+export { PepShadowSettings } from './pep-shadow-settings.js';
+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

@@ -1,20 +1,17 @@
-export * from './pep-color-settings.js';
-export * from './pep-padding-settings.js';
-export * from './pep-shadow-settings.js';
-export * from './pep-rich-text.js';
-export * from './pep-icon-picker.js';
-export * from './pep-generic-form.js';
-export * from './pep-generic-list.js';
-export * from './pep-data-view-builder.js';
-export * from './pep-field-container.js';
-export * from './pep-file-status-panel.js';
-export * from './pep-manage-parameters.js';
-export * from './pep-mapping-parameters.js';
-export * from './pep-show-if-badge.js';
-export * from './pep-layout.js';
-export * from './pep-layout-builder.js';
-export * from './pep-layout-builder-editor.js';
-export * from './pep-flow-picker-button.js';
-export { PepGroupButtonsSettingsReact } from './components/PepGroupButtonsSettingsReact.js';
-export { PepGroupButtonsSettings as PepGroupButtonsSettingsWC } from './pep-group-buttons-settings.js';
+export { PepColorSettings } from './pep-color-settings.js';
+export { PepGroupButtonsSettings } from './pep-group-buttons-settings.js';
+export { PepFlowPickerButton } from './pep-flow-picker-button.js';
+export { PepIconPicker } from './pep-icon-picker.js';
+export { PepPaddingSettings } from './pep-padding-settings.js';
+export { PepShadowSettings } from './pep-shadow-settings.js';
+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,40 +1,41 @@
 {
   "name": "@pepperi-addons/ngx-composite-lib-react",
-  "version": "0.0.4",
-  "description": "React wrappers for @pepperi-addons/ngx-composite-lib web components, plus registration bundles.",
-  "type": "module",
+  "version": "0.5.1",
+  "description": "React wrappers for Pepperi ngx-composite-lib Angular Elements.",
+  "license": "MIT",
+  "author": "Pepperi",
+  "repository": {
+    "type": "git",
+    "url": "https://example.com/repo.git"
+  },
+  "keywords": [
+    "pepperi",
+    "react",
+    "angular-elements",
+    "web-components",
+    "composite"
+  ],
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
   "files": [
     "*.js",
     "*.d.ts",
-    "components/*.js",
-    "components/*.d.ts",
-    "utils/*.js",
-    "utils/*.d.ts",
-    "elements/*",
-    "README.md"
+    "README.md",
+    "elements/*"
   ],
   "exports": {
     ".": {
       "types": "./index.d.ts",
       "default": "./index.js"
     },
-    "./components/PepGroupButtonsSettingsReact.js": "./components/PepGroupButtonsSettingsReact.js",
-    "./elements/register.js": "./elements/register.js",
-    "./elements/register.auto.js": "./elements/register.auto.js",
     "./elements/styles.css": "./elements/styles.css",
-    "./elements/register.runtime.js": "./elements/register.runtime.js",
-    "./elements/register.polyfills.js": "./elements/register.polyfills.js"
-  },
-  "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17",
-    "@pepperi-addons/ngx-lib-react": ">=0.0.0"
-  },
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
+    "./elements/main.js": "./elements/main.js",
+    "./elements/runtime.js": "./elements/runtime.js",
+    "./elements/polyfills.js": "./elements/polyfills.js"
   }
 }

package/pep-color-settings.d.ts

@@ -1,4 +1,17 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepColorSettings: import("react").ForwardRefExoticComponent<Pick<Record<string, any> & {
-    children?: import("react").ReactNode;
-}, string> & import("react").RefAttributes<HTMLElement & Record<string, any>>>;
+import React from 'react';
+export interface PepColorSettingsValue {
+    value?: string;
+    opacity?: number;
+    use?: boolean;
+}
+export interface PepColorSettingsProps {
+    title?: string;
+    checkAAComplient?: boolean;
+    showAAComplient?: boolean;
+    titleSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
+    color?: PepColorSettingsValue;
+    onColorChange?: (value: PepColorSettingsValue) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepColorSettings: React.FC<PepColorSettingsProps>;

package/pep-color-settings.js

@@ -1,3 +1,34 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepColorSettings = createPepWrapper('pep-color-settings', 'PepColorSettings');
+import React, { useEffect, useRef } from 'react';
+export const PepColorSettings = ({ title, checkAAComplient, showAAComplient, titleSize, color, onColorChange, className, style, }) => {
+    const ref = useRef(null);
+    // Apply inputs as element properties (preferred for Angular Elements)
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (title !== undefined)
+            el.title = title;
+        if (checkAAComplient !== undefined)
+            el.checkAAComplient = checkAAComplient;
+        if (showAAComplient !== undefined)
+            el.showAAComplient = showAAComplient;
+        if (titleSize !== undefined)
+            el.titleSize = titleSize;
+        if (color !== undefined)
+            el.color = color;
+    }, [title, checkAAComplient, showAAComplient, titleSize, color]);
+    // Wire outputs
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => {
+            const ce = e;
+            onColorChange?.(ce.detail ?? el.color);
+        };
+        el.addEventListener('colorChange', handler);
+        return () => el.removeEventListener('colorChange', handler);
+    }, [onColorChange]);
+    return React.createElement('pep-color-settings-element', { ref, class: className, style });
+};
 //# sourceMappingURL=pep-color-settings.js.map

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

@@ -1,4 +1,28 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepDataViewBuilder: import("react").ForwardRefExoticComponent<Pick<Record<string, any> & {
-    children?: import("react").ReactNode;
-}, string> & import("react").RefAttributes<HTMLElement & Record<string, any>>>;
+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

@@ -1,3 +1,42 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepDataViewBuilder = createPepWrapper('pep-data-view-builder', 'PepDataViewBuilder');
+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-file-status-panel.d.ts

@@ -1,4 +1,18 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepFileStatusPanel: import("react").ForwardRefExoticComponent<Pick<Record<string, any> & {
-    children?: import("react").ReactNode;
-}, string> & import("react").RefAttributes<HTMLElement & Record<string, any>>>;
+import React from 'react';
+export interface PepSnackBarData {
+    title?: string;
+    content?: Array<{
+        key?: number;
+        name?: string;
+        status?: string;
+        statusMessage?: string;
+    }>;
+}
+export interface PepFileStatusPanelProps {
+    panelData?: PepSnackBarData;
+    openAsSnackBar?: boolean;
+    closeClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepFileStatusPanel: React.FC<PepFileStatusPanelProps>;

package/pep-file-status-panel.js

@@ -1,3 +1,29 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepFileStatusPanel = createPepWrapper('pep-file-status-panel', 'PepFileStatusPanel');
+import React, { useEffect, useRef } from 'react';
+export const PepFileStatusPanel = (props) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (props.panelData !== undefined)
+            el.panelData = props.panelData;
+        if (props.openAsSnackBar !== undefined)
+            el.openAsSnackBar = props.openAsSnackBar;
+    }, [props.panelData, props.openAsSnackBar]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const bind = (name, cb) => {
+            if (!cb)
+                return () => { };
+            const handler = () => cb();
+            el.addEventListener(name, handler);
+            return () => el.removeEventListener(name, handler);
+        };
+        const unsubs = [bind('closeClick', props.closeClick)];
+        return () => { unsubs.forEach((u) => u()); };
+    }, [props.closeClick]);
+    return React.createElement('pep-file-status-panel-element', { ref, class: props.className, style: props.style });
+};
 //# sourceMappingURL=pep-file-status-panel.js.map

package/pep-flow-picker-button.d.ts

@@ -1,4 +1,13 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepFlowPickerButton: import("react").ForwardRefExoticComponent<Pick<Record<string, any> & {
-    children?: import("react").ReactNode;
-}, string> & import("react").RefAttributes<HTMLElement & Record<string, any>>>;
+import React from 'react';
+export declare type PepStyleType = 'weak' | 'regular' | 'strong' | string;
+export declare type PepDialogSizeType = 'regular' | 'full-screen' | 'medium' | 'large' | string;
+export interface PepFlowPickerButtonProps {
+    flowHostObject?: any;
+    disabled?: boolean;
+    styleType?: PepStyleType;
+    flowDlgSize?: PepDialogSizeType;
+    onFlowChange?: (data: any) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepFlowPickerButton: React.FC<PepFlowPickerButtonProps>;

package/pep-flow-picker-button.js

@@ -1,3 +1,30 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepFlowPickerButton = createPepWrapper('pep-flow-picker-button', 'PepFlowPickerButton');
+import React, { useEffect, useRef } from 'react';
+export const PepFlowPickerButton = ({ flowHostObject, disabled, styleType, flowDlgSize, onFlowChange, className, style, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (flowHostObject !== undefined)
+            el.flowHostObject = flowHostObject;
+        if (disabled !== undefined)
+            el.disabled = disabled;
+        if (styleType !== undefined)
+            el.styleType = styleType;
+        if (flowDlgSize !== undefined)
+            el.flowDlgSize = flowDlgSize;
+    }, [flowHostObject, disabled, styleType, flowDlgSize]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => {
+            const ce = e;
+            onFlowChange?.(ce.detail);
+        };
+        el.addEventListener('flowChange', handler);
+        return () => el.removeEventListener('flowChange', handler);
+    }, [onFlowChange]);
+    return React.createElement('pep-flow-picker-button-element', { ref, class: className, style });
+};
 //# sourceMappingURL=pep-flow-picker-button.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

@@ -1,4 +1,52 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepGenericForm: import("react").ForwardRefExoticComponent<Pick<Record<string, any> & {
-    children?: import("react").ReactNode;
-}, string> & import("react").RefAttributes<HTMLElement & Record<string, any>>>;
+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

@@ -1,3 +1,47 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepGenericForm = createPepWrapper('pep-generic-form', 'PepGenericForm');
+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