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

package/pep-manage-parameters.js

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

package/pep-mapping-parameters.d.ts

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

package/pep-mapping-parameters.js

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

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

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

package/pep-menu-data-view.js

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