@pepperi-addons/ngx-composite-lib-react 0.5.6 → 0.5.8

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-generic-list.d.ts

@@ -0,0 +1,74 @@
+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;
+    leftButtonsContent?: React.ReactNode;
+    rightButtonsContent?: React.ReactNode;
+    leftBottomAreaContent?: React.ReactNode;
+    rightBottomAreaContent?: React.ReactNode;
+}
+export declare const PepGenericList: React.FC<PepGenericListProps>;

package/pep-generic-list.js

@@ -0,0 +1,141 @@
+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,
+    ]);
+    // Render projected content for Angular ng-content slots by using matching attributes
+    const children = [];
+    if (props.leftButtonsContent) {
+        children.push(React.createElement('div', { ['left-buttons']: '' }, props.leftButtonsContent));
+    }
+    if (props.rightButtonsContent) {
+        children.push(React.createElement('div', { ['right-buttons']: '' }, props.rightButtonsContent));
+    }
+    if (props.leftBottomAreaContent) {
+        children.push(React.createElement('div', { ['left-bottom-area']: '' }, props.leftBottomAreaContent));
+    }
+    if (props.rightBottomAreaContent) {
+        children.push(React.createElement('div', { ['right-bottom-area']: '' }, props.rightBottomAreaContent));
+    }
+    return React.createElement('pep-generic-list-element', { ref, class: props.className, style: props.style }, children.length > 0 ? children : undefined);
+};
+//# sourceMappingURL=pep-generic-list.js.map

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,58 @@
+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;
+        // Set properties in the correct order - excludeKeys must be set before groupType
+        if (header !== undefined) {
+            el.header = header;
+        }
+        if (subHeader !== undefined) {
+            el.subHeader = subHeader;
+        }
+        if (excludeKeys !== undefined) {
+            el.excludeKeys = excludeKeys; // Set excludeKeys FIRST
+        }
+        if (groupType !== undefined) {
+            el.groupType = groupType; // Then set groupType
+        }
+        if (btnsArray !== undefined) {
+            el.btnsArray = btnsArray;
+        }
+        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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,40 @@
+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-layout-builder.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+export interface PepLayoutBlockConfig {
+    navigateToEditorAfterBlockAdded?: boolean;
+    blocksLimitNumber?: number;
+    getBlockTitle?: (blockKey: string) => string;
+}
+export interface PepLayoutBlockAddedEvent {
+    BlockKey: string;
+    DraggableItem: unknown;
+}
+export declare type PepLayoutEditorType = 'layout-builder' | 'section' | 'block';
+export interface PepLayoutEditor {
+    id: string;
+    title: string;
+    type: PepLayoutEditorType;
+    hostObject?: unknown;
+}
+export interface PepLayoutView {
+    Layout: {
+        MaxWidth?: number;
+        VerticalSpacing?: unknown;
+        HorizontalSpacing?: unknown;
+        SectionsGap?: unknown;
+        ColumnsGap?: unknown;
+        Sections: Array<{
+            Key: string;
+            Name?: string;
+            Split?: string;
+            Height?: number;
+            CollapseOnTablet?: boolean;
+            FillHeight?: boolean;
+            Hide?: unknown[];
+            Columns: Array<{
+                BlockContainer?: {
+                    BlockKey: string;
+                    Hide?: unknown[];
+                };
+            }>;
+        }>;
+    };
+}
+export interface PepLayoutBuilderProps {
+    availableBlocksForDrag?: unknown[];
+    blocksLayoutConfig?: PepLayoutBlockConfig;
+    layoutEditorTitle?: string;
+    lockScreen?: boolean;
+    updateShellRouterData?: boolean;
+    manageGlobalCursor?: boolean;
+    layoutView?: PepLayoutView;
+    onBackClick?: () => void;
+    onEditorChange?: (editor: PepLayoutEditor) => void;
+    onBlockAdded?: (event: PepLayoutBlockAddedEvent) => void;
+    onBlocksRemoved?: (blockKeys: string[]) => void;
+    onEditableStateChange?: (isEditable: boolean) => void;
+    layoutEditorTopContent?: React.ReactNode;
+    headerEndContent?: React.ReactNode;
+    blockEditorContent?: React.ReactNode;
+    layoutContent?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare class PepLayoutBuilder extends React.Component<PepLayoutBuilderProps> {
+    private readonly elementRef;
+    private unsubs;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PepLayoutBuilderProps): void;
+    componentWillUnmount(): void;
+    private applyPropsToElement;
+    private bindEvents;
+    private unbindEvents;
+    render(): React.ReactNode;
+}

package/pep-layout-builder.js

@@ -0,0 +1,88 @@
+import React from 'react';
+export class PepLayoutBuilder extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.elementRef = React.createRef();
+        this.unsubs = [];
+    }
+    componentDidMount() {
+        this.applyPropsToElement();
+        this.bindEvents();
+    }
+    componentDidUpdate(prevProps) {
+        this.applyPropsToElement();
+        const handlersChanged = prevProps.onBackClick !== this.props.onBackClick ||
+            prevProps.onEditorChange !== this.props.onEditorChange ||
+            prevProps.onBlockAdded !== this.props.onBlockAdded ||
+            prevProps.onBlocksRemoved !== this.props.onBlocksRemoved ||
+            prevProps.onEditableStateChange !== this.props.onEditableStateChange;
+        if (handlersChanged) {
+            this.unbindEvents();
+            this.bindEvents();
+        }
+    }
+    componentWillUnmount() {
+        this.unbindEvents();
+    }
+    applyPropsToElement() {
+        const el = this.elementRef.current;
+        if (!el)
+            return;
+        const { availableBlocksForDrag, blocksLayoutConfig, layoutEditorTitle, lockScreen, updateShellRouterData, manageGlobalCursor, layoutView, } = this.props;
+        if (availableBlocksForDrag !== undefined)
+            el.availableBlocksForDrag = availableBlocksForDrag;
+        if (blocksLayoutConfig !== undefined)
+            el.blocksLayoutConfig = blocksLayoutConfig;
+        if (layoutEditorTitle !== undefined)
+            el.layoutEditorTitle = layoutEditorTitle;
+        if (lockScreen !== undefined)
+            el.lockScreen = lockScreen;
+        if (updateShellRouterData !== undefined)
+            el.updateShellRouterData = updateShellRouterData;
+        if (manageGlobalCursor !== undefined)
+            el.manageGlobalCursor = manageGlobalCursor;
+        if (layoutView !== undefined)
+            el.layoutView = layoutView;
+    }
+    bindEvents() {
+        const el = this.elementRef.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);
+        };
+        this.unsubs = [
+            bind('backClick', this.props.onBackClick ? () => this.props.onBackClick?.() : undefined),
+            bind('editorChange', this.props.onEditorChange),
+            bind('blockAdded', this.props.onBlockAdded),
+            bind('blocksRemoved', this.props.onBlocksRemoved),
+            bind('editableStateChange', this.props.onEditableStateChange),
+        ];
+    }
+    unbindEvents() {
+        this.unsubs.forEach((u) => u());
+        this.unsubs = [];
+    }
+    render() {
+        const { layoutEditorTopContent, headerEndContent, blockEditorContent, layoutContent, className, style, } = this.props;
+        const children = [];
+        if (layoutEditorTopContent) {
+            children.push(React.createElement('div', { ['layout-editor-top-content']: '' }, layoutEditorTopContent));
+        }
+        if (headerEndContent) {
+            children.push(React.createElement('div', { ['header-end-content']: '' }, headerEndContent));
+        }
+        if (blockEditorContent) {
+            children.push(React.createElement('div', { ['block-editor-content']: '' }, blockEditorContent));
+        }
+        if (layoutContent) {
+            children.push(React.createElement('div', { ['layout-content']: '' }, layoutContent));
+        }
+        return React.createElement('pep-layout-builder-element', { ref: this.elementRef, class: className, style }, children.length > 0 ? children : undefined);
+    }
+}
+//# sourceMappingURL=pep-layout-builder.js.map

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>;