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

package/pep-generic-list.d.ts

@@ -1,4 +1,70 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepGenericList: 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 PepListSelectionType = 'multi' | 'single' | 'none' | string;
+export declare type PepListTableViewType = 'regular' | 'grid' | string;
+export interface IPepGenericListPager {
+    type: 'scroll' | 'pages';
+    size?: number;
+    index?: number;
+}
+export interface IPepGenericListEmptyState {
+    show?: boolean;
+    title?: string;
+    description?: string;
+}
+export interface IPepGenericListSortingData {
+    sortBy?: string;
+    isAsc?: boolean;
+}
+export interface IPepGenericListDataSource {
+    inputs?: Record<string, unknown>;
+    init: (params: Record<string, unknown>) => Promise<unknown> | unknown;
+    update?: (params: Record<string, unknown>) => Promise<unknown> | unknown;
+}
+export interface IPepGenericListActions {
+    get: (data: unknown) => Promise<Array<{
+        title: string;
+        handler: (obj: unknown) => Promise<void>;
+    }>> | Array<{
+        title: string;
+        handler: (obj: unknown) => Promise<void>;
+    }>;
+}
+export interface PepGenericListProps {
+    dataSource?: IPepGenericListDataSource;
+    actions?: IPepGenericListActions;
+    uuidMapping?: string;
+    disabled?: boolean;
+    addPadding?: boolean;
+    title?: string;
+    sideBarTitle?: string;
+    description?: string;
+    inline?: boolean;
+    showSearch?: boolean;
+    noDataFoundMsg?: string;
+    emptyState?: IPepGenericListEmptyState;
+    selectionType?: PepListSelectionType;
+    supportSorting?: boolean;
+    supportSortingFields?: string[];
+    separator?: string;
+    sorting?: IPepGenericListSortingData;
+    cacheSize?: number;
+    hideSelectAll?: boolean;
+    pager?: IPepGenericListPager;
+    tableViewType?: PepListTableViewType;
+    zebraStripes?: boolean;
+    smartFilter?: unknown;
+    showTopBar?: boolean;
+    breadCrumbsItems?: unknown[];
+    selectAll?: boolean;
+    scrollPosition?: number;
+    unknownCount?: boolean;
+    itemClick?: (detail: unknown) => void;
+    fieldClick?: (detail: unknown) => void;
+    valueChange?: (detail: unknown) => void;
+    breadCrumbItemClick?: (detail: unknown) => void;
+    startIndexChange?: (detail: unknown) => void;
+    listLoad?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepGenericList: React.FC<PepGenericListProps>;

package/pep-generic-list.js

@@ -1,3 +1,127 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepGenericList = createPepWrapper('pep-generic-list', 'PepGenericList');
+import React, { useEffect, useRef } from 'react';
+export const PepGenericList = (props) => {
+    const ref = useRef(null);
+    // Reflect props to the custom element instance
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        // Inputs
+        if (props.dataSource !== undefined)
+            el.dataSource = props.dataSource;
+        if (props.actions !== undefined)
+            el.actions = props.actions;
+        if (props.uuidMapping !== undefined)
+            el.uuidMapping = props.uuidMapping;
+        if (props.disabled !== undefined)
+            el.disabled = props.disabled;
+        if (props.addPadding !== undefined)
+            el.addPadding = props.addPadding;
+        if (props.title !== undefined)
+            el.title = props.title;
+        if (props.sideBarTitle !== undefined)
+            el.sideBarTitle = props.sideBarTitle;
+        if (props.description !== undefined)
+            el.description = props.description;
+        if (props.inline !== undefined)
+            el.inline = props.inline;
+        if (props.showSearch !== undefined)
+            el.showSearch = props.showSearch;
+        if (props.noDataFoundMsg !== undefined)
+            el.noDataFoundMsg = props.noDataFoundMsg;
+        if (props.emptyState !== undefined)
+            el.emptyState = props.emptyState;
+        if (props.selectionType !== undefined)
+            el.selectionType = props.selectionType;
+        if (props.supportSorting !== undefined)
+            el.supportSorting = props.supportSorting;
+        if (props.supportSortingFields !== undefined)
+            el.supportSortingFields = props.supportSortingFields;
+        if (props.separator !== undefined)
+            el.separator = props.separator;
+        if (props.sorting !== undefined)
+            el.sorting = props.sorting;
+        if (props.cacheSize !== undefined)
+            el.cacheSize = props.cacheSize;
+        if (props.hideSelectAll !== undefined)
+            el.hideSelectAll = props.hideSelectAll;
+        if (props.pager !== undefined)
+            el.pager = props.pager;
+        if (props.tableViewType !== undefined)
+            el.tableViewType = props.tableViewType;
+        if (props.zebraStripes !== undefined)
+            el.zebraStripes = props.zebraStripes;
+        if (props.smartFilter !== undefined)
+            el.smartFilter = props.smartFilter;
+        if (props.showTopBar !== undefined)
+            el.showTopBar = props.showTopBar;
+        if (props.breadCrumbsItems !== undefined)
+            el.breadCrumbsItems = props.breadCrumbsItems;
+        if (props.selectAll !== undefined)
+            el.selectAll = props.selectAll;
+        if (props.scrollPosition !== undefined)
+            el.scrollPosition = props.scrollPosition;
+        if (props.unknownCount !== undefined)
+            el.unknownCount = props.unknownCount;
+    }, [
+        props.dataSource,
+        props.actions,
+        props.uuidMapping,
+        props.disabled,
+        props.addPadding,
+        props.title,
+        props.sideBarTitle,
+        props.description,
+        props.inline,
+        props.showSearch,
+        props.noDataFoundMsg,
+        props.emptyState,
+        props.selectionType,
+        props.supportSorting,
+        props.supportSortingFields,
+        props.separator,
+        props.sorting,
+        props.cacheSize,
+        props.hideSelectAll,
+        props.pager,
+        props.tableViewType,
+        props.zebraStripes,
+        props.smartFilter,
+        props.showTopBar,
+        props.breadCrumbsItems,
+        props.selectAll,
+        props.scrollPosition,
+        props.unknownCount,
+    ]);
+    // Wire events (exact names)
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const bind = (name, cb) => {
+            if (!cb)
+                return () => { };
+            const handler = (e) => cb(e.detail);
+            el.addEventListener(name, handler);
+            return () => el.removeEventListener(name, handler);
+        };
+        const unsubs = [
+            bind('itemClick', props.itemClick),
+            bind('fieldClick', props.fieldClick),
+            bind('valueChange', props.valueChange),
+            bind('breadCrumbItemClick', props.breadCrumbItemClick),
+            bind('startIndexChange', props.startIndexChange),
+            bind('listLoad', props.listLoad ? () => props.listLoad?.() : undefined),
+        ];
+        return () => { unsubs.forEach((u) => u()); };
+    }, [
+        props.itemClick,
+        props.fieldClick,
+        props.valueChange,
+        props.breadCrumbItemClick,
+        props.startIndexChange,
+        props.listLoad,
+    ]);
+    return React.createElement('pep-generic-list-element', { ref, class: props.className, style: props.style });
+};
 //# sourceMappingURL=pep-generic-list.js.map

package/pep-group-buttons-settings.d.ts

@@ -1,4 +1,25 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepGroupButtonsSettings: 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 PepGroupbuttonsTypes = 'sizes' | 'custom' | 'vertical-align' | 'left-right-arrows' | 'horizontal-align' | 'font-weight' | 'width-sizes' | 'boolean';
+export interface PepButton {
+    key: string;
+    value?: string;
+    iconName?: string;
+    callback?: (ev: any) => void;
+}
+export interface PepGroupButtonsSettingsProps {
+    header?: string;
+    subHeader?: string;
+    groupType?: PepGroupbuttonsTypes;
+    btnsArray?: PepButton[];
+    excludeKeys?: string[];
+    useNone?: boolean;
+    disabled?: boolean;
+    dir?: 'rtl' | 'ltr';
+    titleSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
+    bold?: boolean;
+    btnKey?: string;
+    onBtnkeyChange?: (value: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepGroupButtonsSettings: React.FC<PepGroupButtonsSettingsProps>;

package/pep-group-buttons-settings.js

@@ -1,3 +1,73 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepGroupButtonsSettings = createPepWrapper('pep-group-buttons-settings', 'PepGroupButtonsSettings');
+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 - set excludeKeys BEFORE groupType
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        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;
+            console.log('[REACT DEBUG] Set header:', el.header);
+        }
+        if (subHeader !== undefined) {
+            el.subHeader = subHeader;
+            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;
+            console.log('[REACT DEBUG] Set btnsArray:', el.btnsArray);
+        }
+        if (useNone !== undefined) {
+            el.useNone = useNone;
+            console.log('[REACT DEBUG] Set useNone:', el.useNone);
+        }
+        if (disabled !== undefined) {
+            el.disabled = disabled;
+            console.log('[REACT DEBUG] Set disabled:', el.disabled);
+        }
+        if (dir !== undefined) {
+            el.dir = dir;
+            console.log('[REACT DEBUG] Set dir:', el.dir);
+        }
+        if (titleSize !== undefined) {
+            el.titleSize = titleSize;
+            console.log('[REACT DEBUG] Set titleSize:', el.titleSize);
+        }
+        if (bold !== undefined) {
+            el.bold = bold;
+            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(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => {
+            const ce = e;
+            onBtnkeyChange?.(ce.detail ?? ref.current?.btnKey ?? '');
+        };
+        el.addEventListener('btnkeyChange', handler);
+        return () => el.removeEventListener('btnkeyChange', handler);
+    }, [onBtnkeyChange]);
+    return React.createElement('pep-group-buttons-settings-element', { ref, class: className, style });
+};
 //# sourceMappingURL=pep-group-buttons-settings.js.map

package/pep-icon-picker.d.ts

@@ -1,4 +1,18 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepIconPicker: 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 Dir = 'rtl' | 'ltr';
+export declare type PepSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
+export interface PepIconPickerProps {
+    disabled?: boolean;
+    header?: string;
+    preview_header?: string;
+    select_btn_header?: string;
+    dir?: Dir;
+    iconURL?: string;
+    useCheckBoxHeader?: boolean;
+    titleSize?: PepSizeType;
+    onIconChange?: (data: any) => void;
+    onIconDisableChange?: (data: any) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepIconPicker: React.FC<PepIconPickerProps>;

package/pep-icon-picker.js

@@ -1,3 +1,40 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepIconPicker = createPepWrapper('pep-icon-picker', 'PepIconPicker');
+import React, { useEffect, useRef } from 'react';
+export const PepIconPicker = ({ disabled, header, preview_header, select_btn_header, dir, iconURL, useCheckBoxHeader, titleSize, onIconChange, onIconDisableChange, className, style, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (disabled !== undefined)
+            el.disabled = disabled;
+        if (header !== undefined)
+            el.header = header;
+        if (preview_header !== undefined)
+            el.preview_header = preview_header;
+        if (select_btn_header !== undefined)
+            el.select_btn_header = select_btn_header;
+        if (dir !== undefined)
+            el.dir = dir;
+        if (iconURL !== undefined)
+            el.iconURL = iconURL;
+        if (useCheckBoxHeader !== undefined)
+            el.useCheckBoxHeader = useCheckBoxHeader;
+        if (titleSize !== undefined)
+            el.titleSize = titleSize;
+    }, [disabled, header, preview_header, select_btn_header, dir, iconURL, useCheckBoxHeader, titleSize]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const onChange = (e) => onIconChange?.(e.detail);
+        const onDisable = (e) => onIconDisableChange?.(e.detail);
+        el.addEventListener('iconChange', onChange);
+        el.addEventListener('iconDisableChange', onDisable);
+        return () => {
+            el.removeEventListener('iconChange', onChange);
+            el.removeEventListener('iconDisableChange', onDisable);
+        };
+    }, [onIconChange, onIconDisableChange]);
+    return React.createElement('pep-icon-picker-element', { ref, class: className, style });
+};
 //# sourceMappingURL=pep-icon-picker.js.map

package/pep-manage-parameters.d.ts

@@ -1,4 +1,31 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepManageParameters: 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 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

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

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

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

package/pep-padding-settings.d.ts

@@ -1,4 +1,12 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepPaddingSettings: 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 PepPaddingSettings {
+    IsUniform?: boolean;
+    PaddingValue?: string;
+}
+export interface PepPaddingSettingsProps {
+    padding?: PepPaddingSettings;
+    onPaddingChange?: (value: PepPaddingSettings) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepPaddingSettings: React.FC<PepPaddingSettingsProps>;

package/pep-padding-settings.js

@@ -1,3 +1,24 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepPaddingSettings = createPepWrapper('pep-padding-settings', 'PepPaddingSettings');
+import React, { useEffect, useRef } from 'react';
+export const PepPaddingSettings = ({ padding, onPaddingChange, className, style, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (padding !== undefined)
+            el.padding = padding;
+    }, [padding]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => {
+            const ce = e;
+            onPaddingChange?.(ce.detail ?? ref.current?.padding);
+        };
+        el.addEventListener('paddingChange', handler);
+        return () => el.removeEventListener('paddingChange', handler);
+    }, [onPaddingChange]);
+    return React.createElement('pep-padding-settings-element', { ref, class: className, style });
+};
 //# sourceMappingURL=pep-padding-settings.js.map