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

package/http-helpers.d.ts

@@ -0,0 +1,49 @@
+/**
+ * HTTP Helper Functions for React
+ *
+ * These are standalone functions that wrap common HTTP patterns from PepHttpService
+ * without requiring Angular's dependency injection.
+ */
+/**
+ * HTTP request options
+ */
+export interface PepHttpOptions {
+    headers?: Record<string, string>;
+    params?: Record<string, string>;
+}
+/**
+ * Make a GET HTTP request with optional authorization
+ */
+export declare function pepHttpGet<T = any>(url: string, options?: PepHttpOptions): Promise<T>;
+/**
+ * Make a POST HTTP request with optional authorization
+ */
+export declare function pepHttpPost<T = any>(url: string, body: any, options?: PepHttpOptions): Promise<T>;
+/**
+ * Make a PUT HTTP request with optional authorization
+ */
+export declare function pepHttpPut<T = any>(url: string, body: any, options?: PepHttpOptions): Promise<T>;
+/**
+ * Make a DELETE HTTP request with optional authorization
+ */
+export declare function pepHttpDelete<T = any>(url: string, options?: PepHttpOptions): Promise<T>;
+/**
+ * Make a PATCH HTTP request with optional authorization
+ */
+export declare function pepHttpPatch<T = any>(url: string, body: any, options?: PepHttpOptions): Promise<T>;
+/**
+ * Helper to add Bearer token to headers
+ */
+export declare function addBearerToken(token: string, options?: PepHttpOptions): PepHttpOptions;
+/**
+ * Helper to add Pepperi session token to headers
+ */
+export declare function addPepperiSessionToken(token: string, options?: PepHttpOptions): PepHttpOptions;
+/**
+ * Build URL with query parameters
+ */
+export declare function buildUrl(baseUrl: string, params: Record<string, any>): string;
+/**
+ * Retry a request with exponential backoff
+ */
+export declare function pepHttpRetry<T>(requestFn: () => Promise<T>, maxRetries?: number, delayMs?: number): Promise<T>;

package/http-helpers.js

@@ -0,0 +1,164 @@
+/**
+ * HTTP Helper Functions for React
+ *
+ * These are standalone functions that wrap common HTTP patterns from PepHttpService
+ * without requiring Angular's dependency injection.
+ */
+/**
+ * Make a GET HTTP request with optional authorization
+ */
+export async function pepHttpGet(url, options = {}) {
+    const headers = new Headers({
+        'Content-Type': 'application/json',
+        ...options.headers
+    });
+    // Add query params if provided
+    let fullUrl = url;
+    if (options.params) {
+        const params = new URLSearchParams(options.params);
+        fullUrl = `${url}?${params.toString()}`;
+    }
+    const response = await fetch(fullUrl, {
+        method: 'GET',
+        headers,
+        credentials: 'include' // Include cookies for authentication
+    });
+    if (!response.ok) {
+        throw new Error(`HTTP Error ${response.status}: ${response.statusText}`);
+    }
+    return response.json();
+}
+/**
+ * Make a POST HTTP request with optional authorization
+ */
+export async function pepHttpPost(url, body, options = {}) {
+    const headers = new Headers({
+        'Content-Type': 'application/json',
+        ...options.headers
+    });
+    const response = await fetch(url, {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(body),
+        credentials: 'include' // Include cookies for authentication
+    });
+    if (!response.ok) {
+        throw new Error(`HTTP Error ${response.status}: ${response.statusText}`);
+    }
+    return response.json();
+}
+/**
+ * Make a PUT HTTP request with optional authorization
+ */
+export async function pepHttpPut(url, body, options = {}) {
+    const headers = new Headers({
+        'Content-Type': 'application/json',
+        ...options.headers
+    });
+    const response = await fetch(url, {
+        method: 'PUT',
+        headers,
+        body: JSON.stringify(body),
+        credentials: 'include'
+    });
+    if (!response.ok) {
+        throw new Error(`HTTP Error ${response.status}: ${response.statusText}`);
+    }
+    return response.json();
+}
+/**
+ * Make a DELETE HTTP request with optional authorization
+ */
+export async function pepHttpDelete(url, options = {}) {
+    const headers = new Headers({
+        'Content-Type': 'application/json',
+        ...options.headers
+    });
+    const response = await fetch(url, {
+        method: 'DELETE',
+        headers,
+        credentials: 'include'
+    });
+    if (!response.ok) {
+        throw new Error(`HTTP Error ${response.status}: ${response.statusText}`);
+    }
+    // DELETE might return empty response
+    const text = await response.text();
+    return text ? JSON.parse(text) : null;
+}
+/**
+ * Make a PATCH HTTP request with optional authorization
+ */
+export async function pepHttpPatch(url, body, options = {}) {
+    const headers = new Headers({
+        'Content-Type': 'application/json',
+        ...options.headers
+    });
+    const response = await fetch(url, {
+        method: 'PATCH',
+        headers,
+        body: JSON.stringify(body),
+        credentials: 'include'
+    });
+    if (!response.ok) {
+        throw new Error(`HTTP Error ${response.status}: ${response.statusText}`);
+    }
+    return response.json();
+}
+/**
+ * Helper to add Bearer token to headers
+ */
+export function addBearerToken(token, options = {}) {
+    return {
+        ...options,
+        headers: {
+            ...options.headers,
+            'Authorization': `Bearer ${token}`
+        }
+    };
+}
+/**
+ * Helper to add Pepperi session token to headers
+ */
+export function addPepperiSessionToken(token, options = {}) {
+    return {
+        ...options,
+        headers: {
+            ...options.headers,
+            'PepperiSessionToken': token
+        }
+    };
+}
+/**
+ * Build URL with query parameters
+ */
+export function buildUrl(baseUrl, params) {
+    const searchParams = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+        if (value !== null && value !== undefined) {
+            searchParams.append(key, String(value));
+        }
+    });
+    const queryString = searchParams.toString();
+    return queryString ? `${baseUrl}?${queryString}` : baseUrl;
+}
+/**
+ * Retry a request with exponential backoff
+ */
+export async function pepHttpRetry(requestFn, maxRetries = 3, delayMs = 1000) {
+    let lastError;
+    for (let i = 0; i < maxRetries; i++) {
+        try {
+            return await requestFn();
+        }
+        catch (error) {
+            lastError = error;
+            if (i < maxRetries - 1) {
+                // Wait with exponential backoff
+                await new Promise(resolve => setTimeout(resolve, delayMs * Math.pow(2, i)));
+            }
+        }
+    }
+    throw lastError;
+}
+//# sourceMappingURL=http-helpers.js.map

package/index.d.ts

@@ -14,3 +14,18 @@ export * from './pep-menu.js';
 export * from './pep-separator.js';
 export * from './pep-draggable-item.js';
 export * from './pep-checkbox.js';
+export * from './pep-dialog.js';
+export { PepImage } from './pep-image.js';
+export { PepImagesFilmstrip } from './pep-images-filmstrip.js';
+export { PepAttachment } from './pep-attachment.js';
+export { PepBreadCrumbs } from './pep-bread-crumbs.js';
+export { PepSkeletonLoader } from './pep-skeleton-loader.js';
+export { PepSearch } from './pep-search.js';
+export { PepSnackBar } from './pep-snack-bar.js';
+export { PepPageLayout } from './pep-page-layout.js';
+export { PepCarousel } from './pep-carousel.js';
+export { PepIcon } from './pep-icon.js';
+export { PepAddress } from './pep-address.js';
+export * from './pep-color-picker.js';
+export * from './services.js';
+export * from './http-helpers.js';

package/index.js

@@ -14,4 +14,21 @@ export * from './pep-menu.js';
 export * from './pep-separator.js';
 export * from './pep-draggable-item.js';
 export * from './pep-checkbox.js';
+export * from './pep-dialog.js';
+export { PepImage } from './pep-image.js';
+export { PepImagesFilmstrip } from './pep-images-filmstrip.js';
+export { PepAttachment } from './pep-attachment.js';
+export { PepBreadCrumbs } from './pep-bread-crumbs.js';
+export { PepSkeletonLoader } from './pep-skeleton-loader.js';
+export { PepSearch } from './pep-search.js';
+export { PepSnackBar } from './pep-snack-bar.js';
+export { PepPageLayout } from './pep-page-layout.js';
+export { PepCarousel } from './pep-carousel.js';
+export { PepIcon } from './pep-icon.js';
+export { PepAddress } from './pep-address.js';
+export * from './pep-color-picker.js';
+// Export all services
+export * from './services.js';
+// Export HTTP helper functions
+export * from './http-helpers.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-lib-react",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Thin React wrappers for Pepperi Angular Elements (Web Components) to improve DX in React.",
   "license": "MIT",
   "author": "Pepperi",

package/pep-address.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+export declare type PepLayoutType = 'form' | 'card' | 'table';
+export declare type PepHorizontalAlignment = 'left' | 'center' | 'right';
+export interface PepFieldValueChangeEvent {
+    key: string;
+    value: any;
+}
+export interface PepAddressGroupField {
+    key: string;
+    value?: any;
+    formattedValue?: string;
+    label?: string;
+    placeholder?: string;
+    type?: string;
+    controlType?: 'textbox' | 'select';
+    mandatory?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    xAlignment?: PepHorizontalAlignment;
+    rowSpan?: number;
+    colSpan?: number;
+    options?: any[];
+}
+export interface PepAddressProps {
+    fieldKey?: string;
+    formattedValue?: string;
+    label?: string;
+    mandatory?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    visible?: boolean;
+    xAlignment?: PepHorizontalAlignment;
+    rowSpan?: number;
+    groupFields?: PepAddressGroupField[];
+    layoutType?: PepLayoutType;
+    onAddressValueChange?: (event: PepFieldValueChangeEvent) => void;
+}
+export declare const PepAddress: React.FC<PepAddressProps>;

package/pep-address.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+export const PepAddress = ({ fieldKey, formattedValue, label, mandatory, disabled, readonly, visible = true, xAlignment, rowSpan, groupFields, layoutType, onAddressValueChange, }) => {
+    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.key !== undefined) {
+                    // Phase 1: set structural props first so Angular can create controls
+                    if (fieldKey !== undefined)
+                        element.key = fieldKey;
+                    if (groupFields !== undefined)
+                        element.groupFields = groupFields;
+                    if (layoutType !== undefined)
+                        element.layoutType = layoutType;
+                    // Phase 2: defer behavioral props to next tick to avoid early validator updates
+                    const applyPhase2 = () => {
+                        try {
+                            if (label !== undefined)
+                                element.label = label;
+                            if (xAlignment !== undefined)
+                                element.xAlignment = xAlignment;
+                            if (rowSpan !== undefined)
+                                element.rowSpan = rowSpan;
+                            if (formattedValue !== undefined)
+                                element.formattedValue = formattedValue;
+                            if (mandatory !== undefined)
+                                element.mandatory = mandatory;
+                            if (disabled !== undefined)
+                                element.disabled = disabled;
+                            if (readonly !== undefined)
+                                element.readonly = readonly;
+                            if (visible !== undefined)
+                                element.visible = visible;
+                        }
+                        catch (e) {
+                            console.error('Error applying PepAddress phase 2 properties:', e);
+                        }
+                    };
+                    setTimeout(applyPhase2, 0);
+                }
+                else {
+                    // If not ready, try again
+                    setTimeout(setProperties, 50);
+                }
+            }
+            catch (error) {
+                console.error('Error setting PepAddress properties:', error);
+            }
+        };
+        setTimeout(setProperties, 100);
+    }, [fieldKey, formattedValue, label, mandatory, disabled, readonly, visible, xAlignment, rowSpan, groupFields, layoutType]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const handleAddressValueChange = (event) => {
+            onAddressValueChange === null || onAddressValueChange === void 0 ? void 0 : onAddressValueChange(event.detail);
+        };
+        element.addEventListener('addressValueChange', handleAddressValueChange);
+        return () => {
+            element.removeEventListener('addressValueChange', handleAddressValueChange);
+        };
+    }, [onAddressValueChange]);
+    return _jsx("pep-address-element", { ref: elementRef });
+};
+//# sourceMappingURL=pep-address.js.map

package/pep-attachment.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export interface PepAttachmentProps {
+    keyProp?: string;
+    src?: string;
+    label?: string;
+    mandatory?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    xAlignment?: 'start' | 'center' | 'end';
+    rowSpan?: number;
+    visible?: boolean;
+    form?: any;
+    showTitle?: boolean;
+    renderTitle?: boolean;
+    layoutType?: 'form' | 'table' | 'card';
+    isActive?: boolean;
+    handleActions?: boolean;
+    hint?: string;
+    onChooseFile?: () => void;
+    onFileChange?: (fileData: any) => void;
+    onElementClick?: (event: any) => void;
+    onValidationChange?: (isValid: boolean) => void;
+}
+export declare const PepAttachment: React.FC<PepAttachmentProps>;

package/pep-attachment.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+export const PepAttachment = ({ keyProp, src, label, mandatory, disabled, readonly, xAlignment, rowSpan, visible, form, showTitle, renderTitle, layoutType, isActive, handleActions, hint, onChooseFile, onFileChange, onElementClick, onValidationChange, }) => {
+    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 (src !== undefined)
+                element.src = src;
+            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 (visible !== undefined)
+                element.visible = visible;
+            if (form !== undefined)
+                element.form = form;
+            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 (handleActions !== undefined)
+                element.handleActions = handleActions;
+            if (hint !== undefined)
+                element.hint = hint;
+            console.log('PepAttachment properties set:', { src, label, mandatory, disabled, readonly });
+        }, 0);
+    }, [keyProp, src, label, mandatory, disabled, readonly, xAlignment, rowSpan, visible, form, showTitle, renderTitle, layoutType, isActive, handleActions, hint]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Event listeners
+        const handleChooseFile = () => {
+            onChooseFile === null || onChooseFile === void 0 ? void 0 : onChooseFile();
+        };
+        const handleFileChange = (event) => {
+            onFileChange === null || onFileChange === void 0 ? void 0 : onFileChange(event.detail);
+        };
+        const handleElementClick = (event) => {
+            onElementClick === null || onElementClick === void 0 ? void 0 : onElementClick(event.detail);
+        };
+        const handleValidationChange = (event) => {
+            onValidationChange === null || onValidationChange === void 0 ? void 0 : onValidationChange(event.detail);
+        };
+        element.addEventListener('chooseFile', handleChooseFile);
+        element.addEventListener('fileChange', handleFileChange);
+        element.addEventListener('elementClick', handleElementClick);
+        element.addEventListener('validationChange', handleValidationChange);
+        return () => {
+            element.removeEventListener('chooseFile', handleChooseFile);
+            element.removeEventListener('fileChange', handleFileChange);
+            element.removeEventListener('elementClick', handleElementClick);
+            element.removeEventListener('validationChange', handleValidationChange);
+        };
+    }, [onChooseFile, onFileChange, onElementClick, onValidationChange]);
+    return _jsx("pep-attachment-element", { ref: elementRef });
+};
+//# sourceMappingURL=pep-attachment.js.map

package/pep-bread-crumbs.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface PepBreadCrumbItem {
+    key: string;
+    text: string;
+    title?: string;
+    disabled?: boolean;
+}
+export interface PepBreadCrumbsProps {
+    items?: PepBreadCrumbItem[];
+    displayType?: 'label' | 'items';
+    addSpacing?: boolean;
+    onItemClick?: (event: {
+        source: PepBreadCrumbItem;
+    }) => void;
+}
+export declare const PepBreadCrumbs: React.FC<PepBreadCrumbsProps>;

package/pep-bread-crumbs.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+export const PepBreadCrumbs = ({ items, displayType, addSpacing, onItemClick, }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Defer property setting to ensure Angular component initialization completes
+        setTimeout(() => {
+            if (items !== undefined)
+                element.items = items;
+            if (displayType !== undefined)
+                element.displayType = displayType;
+            if (addSpacing !== undefined)
+                element.addSpacing = addSpacing;
+            console.log('PepBreadCrumbs properties set:', { items, displayType, addSpacing });
+        }, 0);
+    }, [items, displayType, addSpacing]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Event listeners
+        const handleItemClick = (event) => {
+            onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(event.detail);
+        };
+        element.addEventListener('itemClick', handleItemClick);
+        return () => {
+            element.removeEventListener('itemClick', handleItemClick);
+        };
+    }, [onItemClick]);
+    return _jsx("pep-bread-crumbs-element", { ref: elementRef });
+};
+//# sourceMappingURL=pep-bread-crumbs.js.map

package/pep-carousel.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export interface PepCarouselProps {
+    scrollbarHidden?: boolean;
+    disabled?: boolean;
+    xDisabled?: boolean;
+    yDisabled?: boolean;
+    xWheelEnabled?: boolean;
+    dragDisabled?: boolean;
+    snapDisabled?: boolean;
+    snapOffset?: number;
+    snapDuration?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    onDsInitialized?: () => void;
+    onIndexChanged?: (index: number) => void;
+    onReachesLeftBound?: (reached: boolean) => void;
+    onReachesRightBound?: (reached: boolean) => void;
+    onSnapAnimationFinished?: (index: number) => void;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
+    children?: React.ReactNode;
+}
+export declare type PepCarouselRef = {
+    moveLeft: () => void;
+    moveRight: () => void;
+    moveTo: (index: number) => void;
+};
+export declare const PepCarousel: any;

package/pep-carousel.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef } from 'react';
+export const PepCarousel = React.forwardRef(({ scrollbarHidden = false, disabled = false, xDisabled = false, yDisabled = false, xWheelEnabled = false, dragDisabled = false, snapDisabled = false, snapOffset = 0, snapDuration = 500, className, style, onDsInitialized, onIndexChanged, onReachesLeftBound, onReachesRightBound, onSnapAnimationFinished, onDragStart, onDragEnd, children }, ref) => {
+    const elementRef = useRef(null);
+    React.useImperativeHandle(ref, () => ({
+        moveLeft: () => { var _a, _b; return (_b = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.moveLeft) === null || _b === void 0 ? void 0 : _b.call(_a); },
+        moveRight: () => { var _a, _b; return (_b = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.moveRight) === null || _b === void 0 ? void 0 : _b.call(_a); },
+        moveTo: (index) => { var _a, _b; return (_b = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.moveTo) === null || _b === void 0 ? void 0 : _b.call(_a, index); }
+    }));
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Use setTimeout to ensure the element is ready for property setting
+        setTimeout(() => {
+            if (scrollbarHidden !== undefined)
+                element.scrollbarHidden = scrollbarHidden;
+            if (disabled !== undefined)
+                element.disabled = disabled;
+            if (xDisabled !== undefined)
+                element.xDisabled = xDisabled;
+            if (yDisabled !== undefined)
+                element.yDisabled = yDisabled;
+            if (xWheelEnabled !== undefined)
+                element.xWheelEnabled = xWheelEnabled;
+            if (dragDisabled !== undefined)
+                element.dragDisabled = dragDisabled;
+            if (snapDisabled !== undefined)
+                element.snapDisabled = snapDisabled;
+            if (snapOffset !== undefined)
+                element.snapOffset = snapOffset;
+            if (snapDuration !== undefined)
+                element.snapDuration = snapDuration;
+        }, 0);
+    }, [scrollbarHidden, disabled, xDisabled, yDisabled, xWheelEnabled, dragDisabled, snapDisabled, snapOffset, snapDuration]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const handleDsInitialized = () => onDsInitialized === null || onDsInitialized === void 0 ? void 0 : onDsInitialized();
+        const handleIndexChanged = (event) => onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(event.detail);
+        const handleReachesLeftBound = (event) => onReachesLeftBound === null || onReachesLeftBound === void 0 ? void 0 : onReachesLeftBound(event.detail);
+        const handleReachesRightBound = (event) => onReachesRightBound === null || onReachesRightBound === void 0 ? void 0 : onReachesRightBound(event.detail);
+        const handleSnapAnimationFinished = (event) => onSnapAnimationFinished === null || onSnapAnimationFinished === void 0 ? void 0 : onSnapAnimationFinished(event.detail);
+        const handleDragStart = () => onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
+        const handleDragEnd = () => onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
+        if (onDsInitialized)
+            element.addEventListener('dsInitialized', handleDsInitialized);
+        if (onIndexChanged)
+            element.addEventListener('indexChanged', handleIndexChanged);
+        if (onReachesLeftBound)
+            element.addEventListener('reachesLeftBound', handleReachesLeftBound);
+        if (onReachesRightBound)
+            element.addEventListener('reachesRightBound', handleReachesRightBound);
+        if (onSnapAnimationFinished)
+            element.addEventListener('snapAnimationFinished', handleSnapAnimationFinished);
+        if (onDragStart)
+            element.addEventListener('dragStart', handleDragStart);
+        if (onDragEnd)
+            element.addEventListener('dragEnd', handleDragEnd);
+        return () => {
+            if (onDsInitialized)
+                element.removeEventListener('dsInitialized', handleDsInitialized);
+            if (onIndexChanged)
+                element.removeEventListener('indexChanged', handleIndexChanged);
+            if (onReachesLeftBound)
+                element.removeEventListener('reachesLeftBound', handleReachesLeftBound);
+            if (onReachesRightBound)
+                element.removeEventListener('reachesRightBound', handleReachesRightBound);
+            if (onSnapAnimationFinished)
+                element.removeEventListener('snapAnimationFinished', handleSnapAnimationFinished);
+            if (onDragStart)
+                element.removeEventListener('dragStart', handleDragStart);
+            if (onDragEnd)
+                element.removeEventListener('dragEnd', handleDragEnd);
+        };
+    }, [onDsInitialized, onIndexChanged, onReachesLeftBound, onReachesRightBound, onSnapAnimationFinished, onDragStart, onDragEnd]);
+    return (_jsx("pep-carousel-element", { ref: elementRef, className: className, style: style, children: children }));
+});
+//# sourceMappingURL=pep-carousel.js.map

package/pep-checkbox.d.ts

@@ -13,6 +13,11 @@ export interface PepCheckboxProps extends React.HTMLAttributes<HTMLElement> {
     rowSpan?: number;
     additionalValue?: any;
     visible?: boolean;
+    form?: unknown;
+    isActive?: boolean;
+    showTitle?: boolean;
+    renderTitle?: boolean;
+    layoutType?: 'form' | 'table' | 'card' | string;
     onValueChange?: (value: boolean) => void;
     onValidationChange?: (isValid: boolean) => void;
     className?: string;