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

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

package/pep-padding-settings.d.ts

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

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

package/pep-rich-text.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+export declare type PepHorizontalAlignment = 'start' | 'center' | 'end' | 'space-between' | string;
+export declare type PepLayoutType = 'form' | 'card' | 'table' | string;
+export interface PepToolbarImageOptions {
+    useAssetsABI?: boolean;
+}
+export interface IPepRichHtmlTextareaToolbarOptions {
+    font?: boolean;
+    size?: boolean;
+    header?: boolean;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strike?: boolean;
+    link?: boolean;
+    image?: boolean | PepToolbarImageOptions;
+    ordered?: boolean;
+    bullet?: boolean;
+    color?: boolean;
+    background?: boolean;
+    align?: boolean;
+}
+export interface PepRichTextProps {
+    keyProp?: string;
+    value?: string;
+    label?: string;
+    mandatory?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    maxFieldCharacters?: number;
+    xAlignment?: PepHorizontalAlignment;
+    sanitize?: boolean;
+    rowSpan?: number;
+    visible?: boolean;
+    isActive?: boolean;
+    showTitle?: boolean;
+    renderTitle?: boolean;
+    renderEnlargeButton?: boolean;
+    layoutType?: PepLayoutType;
+    inlineMode?: boolean;
+    useAssetsForImages?: boolean;
+    toolbarOptions?: IPepRichHtmlTextareaToolbarOptions;
+    onValueChange?: (val: any) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepRichText: React.FC<PepRichTextProps>;

package/pep-rich-text.js

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef } from 'react';
+export const PepRichText = ({ keyProp, value, label, mandatory, disabled, readonly, maxFieldCharacters, xAlignment, sanitize, rowSpan, visible, isActive, showTitle, renderTitle, renderEnlargeButton, layoutType, inlineMode, useAssetsForImages, toolbarOptions, onValueChange, className, style, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (keyProp !== undefined)
+            el.key = keyProp;
+        if (value !== undefined)
+            el.value = value;
+        if (label !== undefined)
+            el.label = label;
+        if (mandatory !== undefined)
+            el.mandatory = mandatory;
+        if (disabled !== undefined)
+            el.disabled = disabled;
+        if (readonly !== undefined)
+            el.readonly = readonly;
+        if (maxFieldCharacters !== undefined)
+            el.maxFieldCharacters = maxFieldCharacters;
+        if (xAlignment !== undefined)
+            el.xAlignment = xAlignment;
+        if (sanitize !== undefined)
+            el.sanitize = sanitize;
+        if (rowSpan !== undefined)
+            el.rowSpan = rowSpan;
+        if (visible !== undefined)
+            el.visible = visible;
+        if (isActive !== undefined)
+            el.isActive = isActive;
+        if (showTitle !== undefined)
+            el.showTitle = showTitle;
+        if (renderTitle !== undefined)
+            el.renderTitle = renderTitle;
+        if (renderEnlargeButton !== undefined)
+            el.renderEnlargeButton = renderEnlargeButton;
+        if (layoutType !== undefined)
+            el.layoutType = layoutType;
+        if (inlineMode !== undefined)
+            el.inlineMode = inlineMode;
+        if (useAssetsForImages !== undefined)
+            el.useAssetsForImages = useAssetsForImages;
+        if (toolbarOptions !== undefined)
+            el.toolbarOptions = toolbarOptions;
+    }, [
+        keyProp,
+        value,
+        label,
+        mandatory,
+        disabled,
+        readonly,
+        maxFieldCharacters,
+        xAlignment,
+        sanitize,
+        rowSpan,
+        visible,
+        isActive,
+        showTitle,
+        renderTitle,
+        renderEnlargeButton,
+        layoutType,
+        inlineMode,
+        useAssetsForImages,
+        toolbarOptions,
+    ]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onValueChange?.(e.detail ?? ref.current?.value);
+        el.addEventListener('valueChange', handler);
+        return () => el.removeEventListener('valueChange', handler);
+    }, [onValueChange]);
+    return React.createElement('pep-rich-text-element', { ref, class: className, style });
+};
+//# sourceMappingURL=pep-rich-text.js.map

package/pep-shadow-settings.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare type PepSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
+export interface PepShadowSettings {
+    use?: boolean;
+    size?: PepSizeType;
+    intensity?: 'soft' | 'regular' | 'hard' | string;
+}
+export interface PepShadowSettingsProps {
+    titleSize?: PepSizeType;
+    shadow?: PepShadowSettings;
+    onShadowChange?: (value: PepShadowSettings) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepShadowSettings: React.FC<PepShadowSettingsProps>;

package/pep-shadow-settings.js

@@ -0,0 +1,23 @@
+import React, { useEffect, useRef } from 'react';
+export const PepShadowSettings = ({ titleSize, shadow, onShadowChange, className, style, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (titleSize !== undefined)
+            el.titleSize = titleSize;
+        if (shadow !== undefined)
+            el.shadow = shadow;
+    }, [titleSize, shadow]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onShadowChange?.(e.detail ?? ref.current?.shadow);
+        el.addEventListener('shadowChange', handler);
+        return () => el.removeEventListener('shadowChange', handler);
+    }, [onShadowChange]);
+    return React.createElement('pep-shadow-settings-element', { ref, class: className, style });
+};
+//# sourceMappingURL=pep-shadow-settings.js.map

package/pep-show-if-badge.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare type PepIconType = string;
+export interface PepShowIfBadgeProps {
+    showIf?: boolean;
+    iconName?: PepIconType;
+    backgroundColor?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepShowIfBadge: React.FC<PepShowIfBadgeProps>;

package/pep-show-if-badge.js

@@ -0,0 +1,17 @@
+import React, { useEffect, useRef } from 'react';
+export const PepShowIfBadge = ({ showIf, iconName, backgroundColor, className, style, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (showIf !== undefined)
+            el.showIf = showIf;
+        if (iconName !== undefined)
+            el.iconName = iconName;
+        if (backgroundColor !== undefined)
+            el.backgroundColor = backgroundColor;
+    }, [showIf, iconName, backgroundColor]);
+    return React.createElement('pep-show-if-badge-element', { ref, class: className, style });
+};
+//# sourceMappingURL=pep-show-if-badge.js.map