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

package/index.d.ts

@@ -1,19 +1,10 @@
-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';

package/index.js

@@ -1,20 +1,11 @@
-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';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,40 +1,41 @@
 {
   "name": "@pepperi-addons/ngx-composite-lib-react",
-  "version": "0.0.3",
-  "description": "React wrappers for @pepperi-addons/ngx-composite-lib web components, plus registration bundles.",
-  "type": "module",
+  "version": "0.5.0",
+  "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-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-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,46 @@
-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
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (header !== undefined)
+            el.header = header;
+        if (subHeader !== undefined)
+            el.subHeader = subHeader;
+        if (groupType !== undefined)
+            el.groupType = groupType;
+        if (btnsArray !== undefined)
+            el.btnsArray = btnsArray;
+        if (excludeKeys !== undefined)
+            el.excludeKeys = excludeKeys;
+        if (useNone !== undefined)
+            el.useNone = useNone;
+        if (disabled !== undefined)
+            el.disabled = disabled;
+        if (dir !== undefined)
+            el.dir = dir;
+        if (titleSize !== undefined)
+            el.titleSize = titleSize;
+        if (bold !== undefined)
+            el.bold = bold;
+        if (btnKey !== undefined)
+            el.btnKey = btnKey;
+    }, [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