@pepperi-addons/ngx-lib-react 0.5.0 → 0.5.1

package/pep-checkbox.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-export const PepCheckbox = ({ keyProp, value, label, type, mandatory, disabled, readonly, xAlignment, rowSpan, additionalValue, visible, onValueChange, onValidationChange, className, ...rest }) => {
+export const PepCheckbox = ({ keyProp, value, label, type, mandatory, disabled, readonly, xAlignment, rowSpan, additionalValue, visible, form, isActive, showTitle, renderTitle, layoutType, onValueChange, onValidationChange, className, ...rest }) => {
     const ref = useRef(null);
     // Sync props as properties on the custom element
     useEffect(() => {
@@ -27,6 +27,16 @@ export const PepCheckbox = ({ keyProp, value, label, type, mandatory, disabled,
             el.visible = !!visible;
         if (typeof type !== 'undefined')
             el.type = type;
+        if (typeof form !== 'undefined')
+            el.form = form;
+        if (typeof isActive !== 'undefined')
+            el.isActive = !!isActive;
+        if (typeof showTitle !== 'undefined')
+            el.showTitle = !!showTitle;
+        if (typeof renderTitle !== 'undefined')
+            el.renderTitle = !!renderTitle;
+        if (typeof layoutType !== 'undefined')
+            el.layoutType = layoutType;
     }, [
         keyProp,
         value,
@@ -38,6 +48,11 @@ export const PepCheckbox = ({ keyProp, value, label, type, mandatory, disabled,
         additionalValue,
         visible,
         type,
+        form,
+        isActive,
+        showTitle,
+        renderTitle,
+        layoutType,
     ]);
     // Wire events
     useEffect(() => {

package/pep-chips.d.ts

@@ -10,6 +10,7 @@ export interface IPepChipSelection {
     isSelected: boolean;
 }
 export interface PepChipsProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
     chips?: IPepChip[];
     label?: string;
     inline?: boolean;
@@ -19,6 +20,11 @@ export interface PepChipsProps extends React.HTMLAttributes<HTMLElement> {
     placeholder?: string;
     mandatory?: boolean;
     disabled?: boolean;
+    classNames?: string;
+    xAlignment?: string;
+    renderTitle?: boolean;
+    showTitle?: boolean;
+    layoutType?: string;
     onFieldClick?: () => void;
     onSelectionChange?: (e: IPepChipSelection) => void;
 }

package/pep-chips.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-export const PepChips = ({ chips, label, inline, orientation, styleType, multiSelect, placeholder, mandatory, disabled, onFieldClick, onSelectionChange, className, ...rest }) => {
+export const PepChips = ({ keyProp, chips, label, inline, orientation, styleType, multiSelect, placeholder, mandatory, disabled, classNames, xAlignment, renderTitle, showTitle, layoutType, onFieldClick, onSelectionChange, className, ...rest }) => {
     const ref = useRef(null);
     useEffect(() => {
         const el = ref.current;
@@ -24,7 +24,17 @@ export const PepChips = ({ chips, label, inline, orientation, styleType, multiSe
             el.disabled = !!disabled;
         if (typeof label !== 'undefined')
             el.label = label;
-    }, [chips, inline, orientation, styleType, multiSelect, placeholder, mandatory, disabled, label]);
+        if (typeof classNames !== 'undefined')
+            el.classNames = classNames;
+        if (typeof xAlignment !== 'undefined')
+            el.xAlignment = xAlignment;
+        if (typeof renderTitle !== 'undefined')
+            el.renderTitle = !!renderTitle;
+        if (typeof showTitle !== 'undefined')
+            el.showTitle = !!showTitle;
+        if (typeof layoutType !== 'undefined')
+            el.layoutType = layoutType;
+    }, [chips, inline, orientation, styleType, multiSelect, placeholder, mandatory, disabled, label, classNames, xAlignment, renderTitle, showTitle, layoutType]);
     useEffect(() => {
         const el = ref.current;
         if (!el)
@@ -37,6 +47,6 @@ export const PepChips = ({ chips, label, inline, orientation, styleType, multiSe
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onFieldClick, onSelectionChange]);
-    return (_jsx("pep-chips-element", { ref: ref, className: className, label: label, placeholder: placeholder, ...rest }));
+    return (_jsx("pep-chips-element", { ref: ref, className: className, label: label, placeholder: placeholder, ...rest }, keyProp));
 };
 //# sourceMappingURL=pep-chips.js.map

package/pep-color-picker.d.ts

@@ -0,0 +1,9 @@
+declare type InternalPepColorType = 'any' | 'solid' | 'gradient';
+export interface OpenColorPickerOptions {
+    value?: string;
+    type?: InternalPepColorType;
+    showAAComplient?: boolean;
+    checkAAComplient?: boolean;
+}
+export declare function openPepColorPicker(options?: OpenColorPickerOptions): Promise<string | undefined>;
+export {};

package/pep-color-picker.js

@@ -0,0 +1,27 @@
+export function openPepColorPicker(options = {}) {
+    return new Promise((resolve) => {
+        var _a, _b;
+        try {
+            const ref = (_b = (_a = window === null || window === void 0 ? void 0 : window.pepperi) === null || _a === void 0 ? void 0 : _a.openColorPicker) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                value: options.value,
+                type: options.type,
+                showAAComplient: options.showAAComplient,
+                checkAAComplient: options.checkAAComplient,
+            });
+            if (ref && typeof ref.afterClosed === 'function') {
+                const sub = ref.afterClosed().subscribe((result) => {
+                    var _a;
+                    try {
+                        (_a = sub === null || sub === void 0 ? void 0 : sub.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(sub);
+                    }
+                    catch (_) { /* noop */ }
+                    resolve(result);
+                });
+                return;
+            }
+        }
+        catch (_) { /* noop */ }
+        resolve(undefined);
+    });
+}
+//# sourceMappingURL=pep-color-picker.js.map

package/pep-color.d.ts

@@ -1,12 +1,18 @@
 /// <reference types="react" />
 export declare type PepColorType = 'any' | 'solid' | 'gradient';
 export interface PepColorProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
     value?: string;
     label?: string;
     disabled?: boolean;
     type?: PepColorType;
     showAAComplient?: boolean;
     checkAAComplient?: boolean;
+    xAlignment?: any;
+    rowSpan?: number;
+    showTitle?: boolean;
+    renderTitle?: boolean;
+    layoutType?: 'form' | 'table' | 'card' | string;
     onValueChange?: (value: string) => void;
 }
 export declare const PepColor: React.FC<PepColorProps>;

package/pep-color.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-export const PepColor = ({ value, label, disabled, type, showAAComplient, checkAAComplient, onValueChange, className, ...rest }) => {
+export const PepColor = ({ keyProp, value, label, disabled, type, showAAComplient, checkAAComplient, xAlignment, rowSpan, showTitle, renderTitle, layoutType, onValueChange, className, ...rest }) => {
     const ref = useRef(null);
     useEffect(() => {
         const el = ref.current;
         if (!el)
             return;
+        if (typeof keyProp !== 'undefined')
+            el.key = keyProp;
         if (typeof disabled !== 'undefined')
             el.disabled = !!disabled;
         if (typeof type !== 'undefined')
@@ -18,7 +20,17 @@ export const PepColor = ({ value, label, disabled, type, showAAComplient, checkA
             el.value = value;
         if (typeof label !== 'undefined')
             el.label = label;
-    }, [disabled, type, showAAComplient, checkAAComplient, value, label]);
+        if (typeof xAlignment !== 'undefined')
+            el.xAlignment = xAlignment;
+        if (typeof rowSpan !== 'undefined')
+            el.rowSpan = rowSpan;
+        if (typeof showTitle !== 'undefined')
+            el.showTitle = !!showTitle;
+        if (typeof renderTitle !== 'undefined')
+            el.renderTitle = !!renderTitle;
+        if (typeof layoutType !== 'undefined')
+            el.layoutType = layoutType;
+    }, [keyProp, disabled, type, showAAComplient, checkAAComplient, value, label, xAlignment, rowSpan, showTitle, renderTitle, layoutType]);
     useEffect(() => {
         const el = ref.current;
         if (!el || !onValueChange)

package/pep-date.d.ts

@@ -1,5 +1,30 @@
 /// <reference types="react" />
+export declare type PepDateFieldType = 'date' | 'datetime';
 export interface PepDateProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
+    value?: string;
+    label?: string;
+    type?: PepDateFieldType;
+    mandatory?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    textColor?: string;
+    xAlignment?: string;
+    rowSpan?: number;
+    chooseTime?: boolean;
+    visible?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    minDateValue?: string;
+    maxDateValue?: string;
+    form?: any;
+    isActive?: boolean;
+    showTitle?: boolean;
+    renderTitle?: boolean;
+    renderError?: boolean;
+    renderSymbol?: boolean;
+    layoutType?: string;
     onValueChange?: (value: any) => void;
+    onValidationChange?: (isValid: boolean) => void;
 }
 export declare const PepDate: React.FC<PepDateProps>;

package/pep-date.js

@@ -1,15 +1,92 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-export const PepDate = ({ onValueChange, className, ...rest }) => {
+export const PepDate = ({ keyProp, value, label, type, mandatory, disabled, readonly, textColor, xAlignment, rowSpan, chooseTime, visible, minValue, maxValue, minDateValue, maxDateValue, form, isActive, showTitle, renderTitle, renderError, renderSymbol, layoutType, onValueChange, onValidationChange, className, ...rest }) => {
     const ref = useRef(null);
+    // Sync inputs via element properties
     useEffect(() => {
         const el = ref.current;
-        if (!el || !onValueChange)
+        if (!el)
             return;
-        const h = (e) => { var _a, _b; return onValueChange((_a = e.detail) !== null && _a !== void 0 ? _a : (_b = e.target) === null || _b === void 0 ? void 0 : _b.value); };
-        el.addEventListener('valueChange', h);
-        return () => el.removeEventListener('valueChange', h);
-    }, [onValueChange]);
-    return _jsx("pep-date-element", { ref: ref, className: className, ...rest });
+        if (typeof value !== 'undefined')
+            el.value = value;
+        if (typeof label !== 'undefined')
+            el.label = label;
+        if (typeof type !== 'undefined')
+            el.type = type;
+        if (typeof mandatory !== 'undefined')
+            el.mandatory = !!mandatory;
+        if (typeof disabled !== 'undefined')
+            el.disabled = !!disabled;
+        if (typeof readonly !== 'undefined')
+            el.readonly = !!readonly;
+        if (typeof textColor !== 'undefined')
+            el.textColor = textColor;
+        if (typeof xAlignment !== 'undefined')
+            el.xAlignment = xAlignment;
+        if (typeof rowSpan !== 'undefined')
+            el.rowSpan = rowSpan;
+        if (typeof chooseTime !== 'undefined')
+            el.chooseTime = !!chooseTime;
+        if (typeof visible !== 'undefined')
+            el.visible = !!visible;
+        if (typeof minValue !== 'undefined')
+            el.minValue = minValue;
+        if (typeof maxValue !== 'undefined')
+            el.maxValue = maxValue;
+        if (typeof minDateValue !== 'undefined')
+            el.minDateValue = minDateValue;
+        if (typeof maxDateValue !== 'undefined')
+            el.maxDateValue = maxDateValue;
+        if (typeof form !== 'undefined')
+            el.form = form;
+        if (typeof isActive !== 'undefined')
+            el.isActive = !!isActive;
+        if (typeof showTitle !== 'undefined')
+            el.showTitle = !!showTitle;
+        if (typeof renderTitle !== 'undefined')
+            el.renderTitle = !!renderTitle;
+        if (typeof renderError !== 'undefined')
+            el.renderError = !!renderError;
+        if (typeof renderSymbol !== 'undefined')
+            el.renderSymbol = !!renderSymbol;
+        if (typeof layoutType !== 'undefined')
+            el.layoutType = layoutType;
+    }, [
+        value,
+        label,
+        type,
+        mandatory,
+        disabled,
+        readonly,
+        textColor,
+        xAlignment,
+        rowSpan,
+        chooseTime,
+        visible,
+        minValue,
+        maxValue,
+        minDateValue,
+        maxDateValue,
+        form,
+        isActive,
+        showTitle,
+        renderTitle,
+        renderError,
+        renderSymbol,
+        layoutType,
+    ]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handlers = [];
+        if (onValueChange)
+            handlers.push(['valueChange', (e) => { var _a, _b; return onValueChange((_a = e.detail) !== null && _a !== void 0 ? _a : (_b = e.target) === null || _b === void 0 ? void 0 : _b.value); }]);
+        if (onValidationChange)
+            handlers.push(['validationChange', (e) => { var _a, _b; return onValidationChange(!!((_a = e.detail) !== null && _a !== void 0 ? _a : (_b = e.target) === null || _b === void 0 ? void 0 : _b.value)); }]);
+        handlers.forEach(([n, h]) => el.addEventListener(n, h));
+        return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
+    }, [onValueChange, onValidationChange]);
+    return (_jsx("pep-date-element", { ref: ref, className: className, value: value, label: label, type: type, ...rest }, keyProp));
 };
 //# sourceMappingURL=pep-date.js.map

package/pep-dialog.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface PepDialogProps extends React.HTMLAttributes<HTMLElement> {
+    title?: string;
+    showClose?: boolean;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    onClose?: () => void;
+}
+export declare const PepDialog: React.FC<PepDialogProps>;

package/pep-dialog.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepDialog = ({ title, showClose, showHeader, showFooter, onClose, ...rest }) => {
+    const ref = useRef(null);
+    // Sync inputs as properties on the custom element
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof title !== 'undefined')
+            el.title = title;
+        if (typeof showClose !== 'undefined')
+            el.showClose = !!showClose;
+        if (typeof showHeader !== 'undefined')
+            el.showHeader = !!showHeader;
+        if (typeof showFooter !== 'undefined')
+            el.showFooter = !!showFooter;
+    }, [title, showClose, showHeader, showFooter]);
+    // Wire events
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handlers = [];
+        if (onClose) {
+            const h = () => onClose();
+            handlers.push(['close', h]);
+        }
+        handlers.forEach(([n, h]) => el.addEventListener(n, h));
+        return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
+    }, [onClose]);
+    return _jsx("pep-dialog-element", { ref: ref, ...rest });
+};
+//# sourceMappingURL=pep-dialog.js.map

package/pep-icon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type PepIconType = string;
+export interface PepIconProps extends React.HTMLAttributes<HTMLElement> {
+    name?: PepIconType;
+    fill?: string;
+    spin?: boolean;
+}
+export declare const PepIcon: React.FC<PepIconProps>;

package/pep-icon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepIcon = ({ name, fill, spin, className, ...rest }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof name !== 'undefined')
+            el.name = name;
+        if (typeof fill !== 'undefined')
+            el.fill = fill;
+        if (typeof spin !== 'undefined')
+            el.spin = !!spin;
+    }, [name, fill, spin]);
+    return (_jsx("pep-icon-element", { ref: ref, className: className, ...rest }));
+};
+//# sourceMappingURL=pep-icon.js.map

package/pep-image.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export interface PepImageProps {
+    keyProp?: string;
+    srcLarge?: string;
+    src?: string;
+    options?: any[];
+    label?: string;
+    mandatory?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    xAlignment?: 'start' | 'center' | 'end';
+    rowSpan?: number;
+    indicatorsField?: any;
+    menuField?: any;
+    hasCampaignField?: any;
+    visible?: boolean;
+    form?: any;
+    uid?: string;
+    showTitle?: boolean;
+    renderTitle?: boolean;
+    layoutType?: 'form' | 'table' | 'card';
+    isActive?: boolean;
+    sizeLimitMB?: number;
+    acceptImagesType?: string;
+    handleActions?: boolean;
+    hint?: string;
+    onChooseFile?: () => void;
+    onFileChange?: (event: any) => void;
+    onElementClick?: (event: any) => void;
+    onValidationChange?: (isValid: boolean) => void;
+}
+export declare const PepImage: React.FC<PepImageProps>;

package/pep-image.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+export const PepImage = ({ keyProp, srcLarge, src, options, label, mandatory, disabled, readonly, xAlignment, rowSpan, indicatorsField, menuField, hasCampaignField, visible, form, uid, showTitle, renderTitle, layoutType, isActive, sizeLimitMB, acceptImagesType, handleActions, hint, onChooseFile, onFileChange, onElementClick, onValidationChange, }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Set properties
+        if (keyProp !== undefined)
+            element.key = keyProp;
+        if (srcLarge !== undefined)
+            element.srcLarge = srcLarge;
+        if (src !== undefined)
+            element.src = src;
+        if (options !== undefined)
+            element.options = options;
+        if (label !== undefined)
+            element.label = label;
+        if (mandatory !== undefined)
+            element.mandatory = mandatory;
+        if (disabled !== undefined)
+            element.disabled = disabled;
+        if (readonly !== undefined)
+            element.readonly = readonly;
+        if (xAlignment !== undefined)
+            element.xAlignment = xAlignment;
+        if (rowSpan !== undefined)
+            element.rowSpan = rowSpan;
+        if (indicatorsField !== undefined)
+            element.indicatorsField = indicatorsField;
+        if (menuField !== undefined)
+            element.menuField = menuField;
+        if (hasCampaignField !== undefined)
+            element.hasCampaignField = hasCampaignField;
+        if (visible !== undefined)
+            element.visible = visible;
+        if (form !== undefined)
+            element.form = form;
+        if (uid !== undefined)
+            element.uid = uid;
+        if (showTitle !== undefined)
+            element.showTitle = showTitle;
+        if (renderTitle !== undefined)
+            element.renderTitle = renderTitle;
+        if (layoutType !== undefined)
+            element.layoutType = layoutType;
+        if (isActive !== undefined)
+            element.isActive = isActive;
+        if (sizeLimitMB !== undefined)
+            element.sizeLimitMB = sizeLimitMB;
+        if (acceptImagesType !== undefined)
+            element.acceptImagesType = acceptImagesType;
+        if (handleActions !== undefined)
+            element.handleActions = handleActions;
+        if (hint !== undefined)
+            element.hint = hint;
+    }, [keyProp, srcLarge, src, options, label, mandatory, disabled, readonly, xAlignment, rowSpan, indicatorsField, menuField, hasCampaignField, visible, form, uid, showTitle, renderTitle, layoutType, isActive, sizeLimitMB, acceptImagesType, handleActions, hint]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Event listeners
+        const handleChooseFile = () => onChooseFile === null || onChooseFile === void 0 ? void 0 : onChooseFile();
+        const handleFileChange = (e) => onFileChange === null || onFileChange === void 0 ? void 0 : onFileChange(e.detail);
+        const handleElementClick = (e) => onElementClick === null || onElementClick === void 0 ? void 0 : onElementClick(e.detail);
+        const handleValidationChange = (e) => onValidationChange === null || onValidationChange === void 0 ? void 0 : onValidationChange(e.detail);
+        if (onChooseFile)
+            element.addEventListener('chooseFile', handleChooseFile);
+        if (onFileChange)
+            element.addEventListener('fileChange', handleFileChange);
+        if (onElementClick)
+            element.addEventListener('elementClick', handleElementClick);
+        if (onValidationChange)
+            element.addEventListener('validationChange', handleValidationChange);
+        return () => {
+            if (onChooseFile)
+                element.removeEventListener('chooseFile', handleChooseFile);
+            if (onFileChange)
+                element.removeEventListener('fileChange', handleFileChange);
+            if (onElementClick)
+                element.removeEventListener('elementClick', handleElementClick);
+            if (onValidationChange)
+                element.removeEventListener('validationChange', handleValidationChange);
+        };
+    }, [onChooseFile, onFileChange, onElementClick, onValidationChange]);
+    return _jsx("pep-image-element", { ref: elementRef });
+};
+//# sourceMappingURL=pep-image.js.map

package/pep-images-filmstrip.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface PepImagesFilmstripProps {
+    keyProp?: string;
+    value?: string;
+    label?: string;
+    xAlignment?: 'start' | 'center' | 'end';
+    rowSpan?: number;
+    form?: any;
+    uid?: string;
+    showTitle?: boolean;
+    renderTitle?: boolean;
+    layoutType?: 'form' | 'table' | 'card';
+    currIndex?: number;
+    showThumbnails?: boolean;
+}
+export declare const PepImagesFilmstrip: React.FC<PepImagesFilmstripProps>;

package/pep-images-filmstrip.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+export const PepImagesFilmstrip = ({ keyProp, value, label, xAlignment, rowSpan, form, uid, showTitle, renderTitle, layoutType, currIndex, showThumbnails, }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Defer property setting to ensure Angular component initialization completes
+        setTimeout(() => {
+            if (keyProp !== undefined)
+                element.key = keyProp;
+            if (value !== undefined)
+                element.value = value;
+            if (label !== undefined)
+                element.label = label;
+            if (xAlignment !== undefined)
+                element.xAlignment = xAlignment;
+            if (rowSpan !== undefined)
+                element.rowSpan = rowSpan;
+            if (form !== undefined)
+                element.form = form;
+            if (uid !== undefined)
+                element.uid = uid;
+            if (showTitle !== undefined)
+                element.showTitle = showTitle;
+            if (renderTitle !== undefined)
+                element.renderTitle = renderTitle;
+            if (layoutType !== undefined)
+                element.layoutType = layoutType;
+            if (currIndex !== undefined)
+                element.currIndex = currIndex;
+            if (showThumbnails !== undefined)
+                element.showThumbnails = showThumbnails;
+            console.log('PepImagesFilmstrip properties set:', { value, label, showThumbnails, currIndex, showTitle, renderTitle });
+        }, 0);
+    }, [keyProp, value, label, xAlignment, rowSpan, form, uid, showTitle, renderTitle, layoutType, currIndex, showThumbnails]);
+    return _jsx("pep-images-filmstrip-element", { ref: elementRef });
+};
+//# sourceMappingURL=pep-images-filmstrip.js.map

package/pep-link.d.ts

@@ -10,6 +10,15 @@ export interface PepLinkProps extends React.HTMLAttributes<HTMLElement> {
     maxFieldCharacters?: number;
     textColor?: string;
     rowSpan?: number;
+    xAlignment?: string;
+    visible?: boolean;
+    form?: any;
+    isActive?: boolean;
+    showTitle?: boolean;
+    renderTitle?: boolean;
+    renderError?: boolean;
+    renderSymbol?: boolean;
+    layoutType?: string;
     onValueChange?: (value: string) => void;
     onElementClick?: (e: any) => void;
     onKeyup?: (e: any) => void;

package/pep-link.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-export const PepLink = ({ keyProp, value, label, placeholder, mandatory, disabled, readonly, maxFieldCharacters, textColor, rowSpan, onValueChange, onElementClick, onKeyup, onValidationChange, className, ...rest }) => {
+export const PepLink = ({ keyProp, value, label, placeholder, mandatory, disabled, readonly, maxFieldCharacters, textColor, rowSpan, xAlignment, visible, form, isActive, showTitle, renderTitle, renderError, renderSymbol, layoutType, onValueChange, onElementClick, onKeyup, onValidationChange, className, ...rest }) => {
     const ref = useRef(null);
     useEffect(() => {
         const el = ref.current;
@@ -20,7 +20,25 @@ export const PepLink = ({ keyProp, value, label, placeholder, mandatory, disable
             el.textColor = textColor;
         if (typeof rowSpan !== 'undefined')
             el.rowSpan = rowSpan;
-    }, [keyProp, mandatory, disabled, readonly, maxFieldCharacters, textColor, rowSpan]);
+        if (typeof xAlignment !== 'undefined')
+            el.xAlignment = xAlignment;
+        if (typeof visible !== 'undefined')
+            el.visible = !!visible;
+        if (typeof form !== 'undefined')
+            el.form = form;
+        if (typeof isActive !== 'undefined')
+            el.isActive = !!isActive;
+        if (typeof showTitle !== 'undefined')
+            el.showTitle = !!showTitle;
+        if (typeof renderTitle !== 'undefined')
+            el.renderTitle = !!renderTitle;
+        if (typeof renderError !== 'undefined')
+            el.renderError = !!renderError;
+        if (typeof renderSymbol !== 'undefined')
+            el.renderSymbol = !!renderSymbol;
+        if (typeof layoutType !== 'undefined')
+            el.layoutType = layoutType;
+    }, [keyProp, mandatory, disabled, readonly, maxFieldCharacters, textColor, rowSpan, xAlignment, visible, form, isActive, showTitle, renderTitle, renderError, renderSymbol, layoutType]);
     useEffect(() => {
         const el = ref.current;
         if (!el)
@@ -37,6 +55,6 @@ export const PepLink = ({ keyProp, value, label, placeholder, mandatory, disable
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onValueChange, onElementClick, onKeyup, onValidationChange]);
-    return (_jsx("pep-link-element", { ref: ref, className: className, value: value, label: label, placeholder: placeholder, ...rest }));
+    return (_jsx("pep-link-element", { ref: ref, className: className, value: value, label: label, placeholder: placeholder, ...rest }, keyProp));
 };
 //# sourceMappingURL=pep-link.js.map

package/pep-page-layout.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface PepPageLayoutProps {
+    addPadding?: boolean;
+    showShadow?: boolean;
+    headerArea?: React.ReactNode;
+    sideArea?: React.ReactNode;
+    topArea?: React.ReactNode;
+    mainArea?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export declare const PepPageLayout: React.FC<PepPageLayoutProps>;