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

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", { 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-menu.js

@@ -45,6 +45,6 @@ export const PepMenu = ({ text, iconName, iconPosition, type, styleType, sizeTyp
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onStateChange, onMenuItemClick, onMenuClick]);
-    return (_jsx("pep-menu", { ref: ref, className: className, text: text, "icon-name": iconName, "icon-position": iconPosition, type: type, "style-type": styleType, "size-type": sizeType, "x-position": xPosition, ...rest }));
+    return (_jsx("pep-menu-element", { ref: ref, className: className, text: text, "icon-name": iconName, "icon-position": iconPosition, type: type, "style-type": styleType, "size-type": sizeType, "x-position": xPosition, ...rest }));
 };
 //# sourceMappingURL=pep-menu.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>;

package/pep-page-layout.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepPageLayout = ({ addPadding = false, showShadow = false, headerArea, sideArea, topArea, mainArea, children }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Use setTimeout to ensure the element is ready for property setting
+        setTimeout(() => {
+            if (addPadding !== undefined)
+                element.addPadding = addPadding;
+            if (showShadow !== undefined)
+                element.showShadow = showShadow;
+        }, 0);
+    }, [addPadding, showShadow]);
+    return (_jsxs("pep-page-layout-element", { ref: elementRef, children: [headerArea && _jsx("div", { "pep-header-area": "", children: headerArea }), sideArea && _jsx("div", { "pep-side-area": "", children: sideArea }), topArea && _jsx("div", { "pep-top-area": "", children: topArea }), mainArea && _jsx("div", { "pep-main-area": "", children: mainArea }), children] }));
+};
+//# sourceMappingURL=pep-page-layout.js.map

package/pep-quantity-selector.js

@@ -55,6 +55,6 @@ export const PepQuantitySelector = ({ keyProp, value, label, type, mandatory, di
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onValueChange, onElementClick, onValidationChange]);
-    return (_jsx("pep-quantity-selector", { ref: ref, className: className, label: label, type: type, ...rest }));
+    return (_jsx("pep-quantity-selector-element", { ref: ref, className: className, label: label, type: type, ...rest }));
 };
 //# sourceMappingURL=pep-quantity-selector.js.map

package/pep-search.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare type PepSearchTriggerType = 'keydown' | 'click';
+export declare type PepSearchShrinkType = 'small-screen' | 'always' | 'never';
+export declare type PepSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface PepSearchClickEvent {
+    value: string;
+}
+export interface PepSearchAutocompleteChangeEvent {
+    value: string;
+    top: number;
+}
+export interface PepSearchStateChangeEvent {
+    state: 'open' | 'close';
+}
+export interface PepSearchProps {
+    triggerOn?: PepSearchTriggerType;
+    autoCompleteTop?: number;
+    autoCompleteValues?: any[];
+    shrink?: PepSearchShrinkType;
+    value?: string;
+    useAsWebComponent?: boolean;
+    sizeType?: PepSizeType;
+    onSearch?: (event: PepSearchClickEvent) => void;
+    onAutocompleteChange?: (event: PepSearchAutocompleteChangeEvent) => void;
+    onStateChange?: (event: PepSearchStateChangeEvent) => void;
+}
+export declare const PepSearch: React.FC<PepSearchProps>;

package/pep-search.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+export const PepSearch = ({ triggerOn, autoCompleteTop, autoCompleteValues, shrink, value, useAsWebComponent, sizeType, onSearch, onAutocompleteChange, onStateChange, }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Defer property setting to ensure Angular component initialization completes
+        setTimeout(() => {
+            try {
+                if (element) {
+                    if (triggerOn !== undefined)
+                        element.triggerOn = triggerOn;
+                    if (autoCompleteTop !== undefined)
+                        element.autoCompleteTop = autoCompleteTop;
+                    if (autoCompleteValues !== undefined)
+                        element.autoCompleteValues = autoCompleteValues;
+                    if (shrink !== undefined)
+                        element.shrink = shrink;
+                    if (value !== undefined)
+                        element.value = value;
+                    if (useAsWebComponent !== undefined)
+                        element.useAsWebComponent = useAsWebComponent;
+                    if (sizeType !== undefined)
+                        element.sizeType = sizeType;
+                }
+            }
+            catch (error) {
+                console.error('Error setting PepSearch properties:', error);
+            }
+        }, 100);
+    }, [triggerOn, autoCompleteTop, autoCompleteValues, shrink, value, useAsWebComponent, sizeType]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Event listeners
+        const handleSearch = (event) => {
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch(event.detail);
+        };
+        const handleAutocompleteChange = (event) => {
+            onAutocompleteChange === null || onAutocompleteChange === void 0 ? void 0 : onAutocompleteChange(event.detail);
+        };
+        const handleStateChange = (event) => {
+            onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(event.detail);
+        };
+        element.addEventListener('search', handleSearch);
+        element.addEventListener('autocompleteChange', handleAutocompleteChange);
+        element.addEventListener('stateChange', handleStateChange);
+        return () => {
+            element.removeEventListener('search', handleSearch);
+            element.removeEventListener('autocompleteChange', handleAutocompleteChange);
+            element.removeEventListener('stateChange', handleStateChange);
+        };
+    }, [onSearch, onAutocompleteChange, onStateChange]);
+    return _jsx("pep-search-element", { ref: elementRef });
+};
+//# sourceMappingURL=pep-search.js.map

package/pep-select.d.ts

@@ -14,6 +14,20 @@ export interface PepSelectProps extends React.HTMLAttributes<HTMLElement> {
     mandatory?: boolean;
     options?: PepOption[];
     addValueToOptionsIfNotExist?: boolean;
+    xAlignment?: string;
+    rowSpan?: number;
+    placeholderWhenDisabled?: string;
+    autoSortOptions?: boolean;
+    visible?: boolean;
+    emptyOption?: boolean;
+    form?: any;
+    layoutType?: string;
+    parentFieldKey?: string | null;
+    isActive?: boolean;
+    showTitle?: boolean;
+    renderTitle?: boolean;
+    typeaheadDebounceInterval?: number;
     onValueChange?: (value: string) => void;
+    onValidationChange?: (isValid: boolean) => void;
 }
 export declare const PepSelect: React.FC<PepSelectProps>;

package/pep-select.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-export const PepSelect = ({ keyProp, value, label, placeholder, type, disabled, readonly, mandatory, options, addValueToOptionsIfNotExist, onValueChange, ...rest }) => {
+export const PepSelect = ({ keyProp, value, label, placeholder, type, disabled, readonly, mandatory, options, addValueToOptionsIfNotExist, xAlignment, rowSpan, placeholderWhenDisabled, autoSortOptions, visible, emptyOption, form, layoutType, parentFieldKey, isActive, showTitle, renderTitle, typeaheadDebounceInterval, onValueChange, onValidationChange, ...rest }) => {
     const ref = useRef(null);
     // Sync complex props via properties
     useEffect(() => {
@@ -11,7 +11,49 @@ export const PepSelect = ({ keyProp, value, label, placeholder, type, disabled,
             el.options = options;
         if (typeof addValueToOptionsIfNotExist !== 'undefined')
             el.addValueToOptionsIfNotExist = !!addValueToOptionsIfNotExist;
-    }, [options, addValueToOptionsIfNotExist]);
+        if (typeof xAlignment !== 'undefined')
+            el.xAlignment = xAlignment;
+        if (typeof rowSpan !== 'undefined')
+            el.rowSpan = rowSpan;
+        if (typeof placeholderWhenDisabled !== 'undefined')
+            el.placeholderWhenDisabled = placeholderWhenDisabled;
+        if (typeof autoSortOptions !== 'undefined')
+            el.autoSortOptions = !!autoSortOptions;
+        if (typeof visible !== 'undefined')
+            el.visible = !!visible;
+        if (typeof emptyOption !== 'undefined')
+            el.emptyOption = !!emptyOption;
+        if (typeof form !== 'undefined')
+            el.form = form;
+        if (typeof layoutType !== 'undefined')
+            el.layoutType = layoutType;
+        if (typeof parentFieldKey !== 'undefined')
+            el.parentFieldKey = parentFieldKey;
+        if (typeof isActive !== 'undefined')
+            el.isActive = !!isActive;
+        if (typeof showTitle !== 'undefined')
+            el.showTitle = !!showTitle;
+        if (typeof renderTitle !== 'undefined')
+            el.renderTitle = !!renderTitle;
+        if (typeof typeaheadDebounceInterval !== 'undefined')
+            el.typeaheadDebounceInterval = typeaheadDebounceInterval;
+    }, [
+        options,
+        addValueToOptionsIfNotExist,
+        xAlignment,
+        rowSpan,
+        placeholderWhenDisabled,
+        autoSortOptions,
+        visible,
+        emptyOption,
+        form,
+        layoutType,
+        parentFieldKey,
+        isActive,
+        showTitle,
+        renderTitle,
+        typeaheadDebounceInterval,
+    ]);
     // Sync booleans via properties to be safe
     useEffect(() => {
         const el = ref.current;
@@ -27,13 +69,19 @@ export const PepSelect = ({ keyProp, value, label, placeholder, type, disabled,
     // Events
     useEffect(() => {
         const el = ref.current;
-        if (!el || !onValueChange)
+        if (!el)
             return;
-        const handler = (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', handler);
-        return () => el.removeEventListener('valueChange', handler);
-    }, [onValueChange]);
-    return (_jsx("pep-select", { ref: ref, 
+        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-select-element", { ref: ref, 
         // attributes (strings)
         value: value, label: label, placeholder: placeholder, type: type, ...rest }, keyProp));
 };

package/pep-separator.d.ts

@@ -4,5 +4,7 @@ export interface PepSeparatorProps extends React.HTMLAttributes<HTMLElement> {
     label?: string;
     xAlignment?: 'start' | 'center' | 'end' | string;
     visible?: boolean;
+    form?: unknown;
+    layoutType?: 'form' | 'table' | 'card' | string;
 }
 export declare const PepSeparator: React.FC<PepSeparatorProps>;

package/pep-separator.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-export const PepSeparator = ({ keyProp, label, xAlignment, visible, className, ...rest }) => {
+export const PepSeparator = ({ keyProp, label, xAlignment, visible, form, layoutType, className, ...rest }) => {
     const ref = useRef(null);
     useEffect(() => {
         const el = ref.current;
@@ -12,7 +12,11 @@ export const PepSeparator = ({ keyProp, label, xAlignment, visible, className, .
             el.xAlignment = xAlignment;
         if (typeof visible !== 'undefined')
             el.visible = !!visible;
-    }, [keyProp, xAlignment, visible]);
-    return (_jsx("pep-separator", { ref: ref, className: className, label: label, ...rest }));
+        if (typeof form !== 'undefined')
+            el.form = form;
+        if (typeof layoutType !== 'undefined')
+            el.layoutType = layoutType;
+    }, [keyProp, xAlignment, visible, form, layoutType]);
+    return (_jsx("pep-separator-element", { ref: ref, className: className, label: label, ...rest }));
 };
 //# sourceMappingURL=pep-separator.js.map

package/pep-skeleton-loader.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type PepSkeletonSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'max';
+export interface PepSkeletonLoaderProps {
+    rowHeightType?: PepSkeletonSizeType;
+    rowsNumber?: number;
+    lastRowOffset?: boolean;
+}
+export declare const PepSkeletonLoader: React.FC<PepSkeletonLoaderProps>;

package/pep-skeleton-loader.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+export const PepSkeletonLoader = ({ rowHeightType = 'md', rowsNumber = 3, lastRowOffset = true, }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Wait for custom element to be fully upgraded
+        const setProperties = () => {
+            try {
+                if (element && element.rowHeightType !== undefined) {
+                    element.rowHeightType = rowHeightType;
+                    element.rowsNumber = rowsNumber;
+                    element.lastRowOffset = lastRowOffset;
+                }
+                else {
+                    // If not ready, try again
+                    setTimeout(setProperties, 50);
+                }
+            }
+            catch (error) {
+                console.error('Error setting PepSkeletonLoader properties:', error);
+            }
+        };
+        setTimeout(setProperties, 100);
+    }, [rowHeightType, rowsNumber, lastRowOffset]);
+    return _jsx("pep-skeleton-loader-element", { ref: elementRef });
+};
+//# sourceMappingURL=pep-skeleton-loader.js.map

package/pep-slider.js

@@ -35,6 +35,6 @@ export const PepSlider = ({ label, disabled, hint, background, step, minValue, m
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onValueChange, onInputChange]);
-    return (_jsx("pep-slider", { ref: ref, className: className, label: label, ...rest }));
+    return (_jsx("pep-slider-element", { ref: ref, className: className, label: label, ...rest }));
 };
 //# sourceMappingURL=pep-slider.js.map

package/pep-snack-bar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface PepSnackBarProps {
+    snackBarRef?: any;
+    title?: string;
+    onCloseClick?: () => void;
+}
+export declare const PepSnackBar: React.FC<PepSnackBarProps>;

package/pep-snack-bar.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+export const PepSnackBar = ({ snackBarRef, title, onCloseClick, }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Defer property setting to ensure Angular component initialization completes
+        setTimeout(() => {
+            if (snackBarRef !== undefined)
+                element.snackBarRef = snackBarRef;
+            if (title !== undefined)
+                element.title = title;
+            console.log('PepSnackBar properties set:', { snackBarRef, title });
+        }, 0);
+    }, [snackBarRef, title]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Event listeners
+        const handleCloseClick = (event) => {
+            onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
+        };
+        element.addEventListener('closeClick', handleCloseClick);
+        return () => {
+            element.removeEventListener('closeClick', handleCloseClick);
+        };
+    }, [onCloseClick]);
+    return _jsx("pep-snack-bar-element", { ref: elementRef });
+};
+//# sourceMappingURL=pep-snack-bar.js.map

package/pep-textarea.d.ts

@@ -1,11 +1,25 @@
 /// <reference types="react" />
 export interface PepTextareaProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
     value?: string;
     label?: string;
     placeholder?: string;
     disabled?: boolean;
     readonly?: boolean;
+    mandatory?: boolean;
+    maxFieldCharacters?: number;
+    textColor?: string;
+    xAlignment?: string;
+    rowSpan?: number;
+    visible?: boolean;
+    form?: any;
+    isActive?: boolean;
+    showTitle?: boolean;
+    renderTitle?: boolean;
+    layoutType?: string;
     rows?: number;
     onValueChange?: (value: any) => void;
+    onKeyup?: (e: any) => void;
+    onValidationChange?: (isValid: boolean) => void;
 }
 export declare const PepTextarea: React.FC<PepTextareaProps>;