@pepperi-addons/ngx-lib-react 0.5.20 → 0.5.22

package/index.d.ts

@@ -33,4 +33,8 @@ export * from './pep-query-builder.js';
 export * from './pep-remote-loader.js';
 export * from './pep-addon-block-loader.js';
 export { PepRichHtmlTextarea } from './pep-rich-html-textarea.js';
+export { PepSignature } from './pep-signature.js';
+export type { PepSignatureProps } from './pep-signature.js';
+export { PepSmartFilters } from './pep-smart-filters.js';
+export type { PepSmartFiltersProps, PepSmartFiltersRef } from './pep-smart-filters.js';
 export * from './services.js';

package/index.js

@@ -33,6 +33,8 @@ export * from './pep-query-builder.js';
 export * from './pep-remote-loader.js';
 export * from './pep-addon-block-loader.js';
 export { PepRichHtmlTextarea } from './pep-rich-html-textarea.js';
+export { PepSignature } from './pep-signature.js';
+export { PepSmartFilters } from './pep-smart-filters.js';
 // Export all service helpers (bridge-based access to Angular services)
 export * from './services.js';
 //# sourceMappingURL=index.js.map

package/package.json

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

package/pep-addon-block-loader.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 export const PepAddonBlockLoader = ({ keyProp, addonId, remoteEntry, slugName, blockType, name, hostObject, remoteLoaderOptions, onHostEvents, onBlockLoad, ...rest }) => {
-    const ref = useRef(null);
+    const containerRef = useRef(null);
+    const elementRef = useRef(null);
     useEffect(() => {
-        const el = ref.current;
-        if (!el)
+        const container = containerRef.current;
+        if (!container) {
             return;
+        }
+        const el = document.createElement('pep-addon-block-loader-element');
+        elementRef.current = el;
         if (typeof addonId !== 'undefined')
             el.addonId = addonId;
         if (typeof remoteEntry !== 'undefined')
@@ -20,11 +24,17 @@ export const PepAddonBlockLoader = ({ keyProp, addonId, remoteEntry, slugName, b
             el.hostObject = hostObject;
         if (typeof remoteLoaderOptions !== 'undefined')
             el.remoteLoaderOptions = remoteLoaderOptions;
-    }, [addonId, remoteEntry, slugName, blockType, name, hostObject, remoteLoaderOptions]);
+        container.replaceChildren(el);
+        return () => {
+            container.replaceChildren();
+            elementRef.current = null;
+        };
+    }, [keyProp]);
     useEffect(() => {
-        const el = ref.current;
-        if (!el)
+        const el = elementRef.current;
+        if (!el) {
             return;
+        }
         const handlers = [];
         if (onHostEvents) {
             handlers.push(['hostEvents', (e) => { var _a; return onHostEvents((_a = e.detail) !== null && _a !== void 0 ? _a : e); }]);
@@ -35,6 +45,26 @@ export const PepAddonBlockLoader = ({ keyProp, addonId, remoteEntry, slugName, b
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onHostEvents, onBlockLoad]);
-    return _jsx("pep-addon-block-loader-element", { ref: ref, ...rest }, keyProp);
+    useEffect(() => {
+        const el = elementRef.current;
+        if (!el) {
+            return;
+        }
+        if (typeof addonId !== 'undefined')
+            el.addonId = addonId;
+        if (typeof remoteEntry !== 'undefined')
+            el.remoteEntry = remoteEntry;
+        if (typeof slugName !== 'undefined')
+            el.slugName = slugName;
+        if (typeof blockType !== 'undefined')
+            el.blockType = blockType;
+        if (typeof name !== 'undefined')
+            el.name = name;
+        if (typeof hostObject !== 'undefined')
+            el.hostObject = hostObject;
+        if (typeof remoteLoaderOptions !== 'undefined')
+            el.remoteLoaderOptions = remoteLoaderOptions;
+    }, [addonId, remoteEntry, slugName, blockType, name, hostObject, remoteLoaderOptions]);
+    return _jsx("div", { ref: containerRef, ...rest }, keyProp);
 };
 //# sourceMappingURL=pep-addon-block-loader.js.map

package/pep-remote-loader.js

@@ -1,26 +1,75 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 export const PepRemoteLoader = ({ keyProp, options, props, events, onLoad, ...rest }) => {
-    const ref = useRef(null);
+    const containerRef = useRef(null);
+    const elementRef = useRef(null);
+    const mountTokenRef = useRef(0);
+    const loadUnsubRef = useRef(null);
+    const REMOTE_LOADER_TAG = 'pep-remote-loader-element-element';
     useEffect(() => {
-        const el = ref.current;
-        if (!el)
+        const container = containerRef.current;
+        if (!container) {
             return;
-        if (typeof options !== 'undefined')
+        }
+        const token = ++mountTokenRef.current;
+        let didCleanup = false;
+        void (async () => {
+            try {
+                await customElements.whenDefined(REMOTE_LOADER_TAG);
+            }
+            catch {
+                // Ignore.
+            }
+            if (didCleanup || token !== mountTokenRef.current) {
+                return;
+            }
+            const el = document.createElement(REMOTE_LOADER_TAG);
+            elementRef.current = el;
+            if (loadUnsubRef.current) {
+                loadUnsubRef.current();
+                loadUnsubRef.current = null;
+            }
+            if (onLoad) {
+                const handler = () => onLoad();
+                el.addEventListener('load', handler);
+                loadUnsubRef.current = () => el.removeEventListener('load', handler);
+            }
+            if (typeof options !== 'undefined') {
+                el.options = options;
+            }
+            if (typeof props !== 'undefined') {
+                el.props = props;
+            }
+            if (typeof events !== 'undefined') {
+                el.events = events;
+            }
+            container.replaceChildren(el);
+        })();
+        return () => {
+            didCleanup = true;
+            if (loadUnsubRef.current) {
+                loadUnsubRef.current();
+                loadUnsubRef.current = null;
+            }
+            container.replaceChildren();
+            elementRef.current = null;
+        };
+    }, [keyProp]);
+    useEffect(() => {
+        const el = elementRef.current;
+        if (!el) {
+            return;
+        }
+        if (typeof options !== 'undefined') {
             el.options = options;
-        if (typeof props !== 'undefined')
+        }
+        if (typeof props !== 'undefined') {
             el.props = props;
-        if (typeof events !== 'undefined')
+        }
+        if (typeof events !== 'undefined') {
             el.events = events;
+        }
     }, [options, props, events]);
-    useEffect(() => {
-        const el = ref.current;
-        if (!el || !onLoad)
-            return;
-        const handler = () => onLoad();
-        el.addEventListener('load', handler);
-        return () => el.removeEventListener('load', handler);
-    }, [onLoad]);
-    return _jsx("pep-remote-loader-element-element", { ref: ref, ...rest }, keyProp);
+    return _jsx("div", { ref: containerRef, ...rest }, keyProp);
 };
 //# sourceMappingURL=pep-remote-loader.js.map

package/pep-signature.d.ts

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

package/pep-signature.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+export const PepSignature = ({ keyProp, src, label, mandatory, disabled, readonly, xAlignment, rowSpan, signatureURL, visible, form, showTitle, renderTitle, layoutType, isActive, handleActions, 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 (signatureURL !== undefined)
+                element.signatureURL = signatureURL;
+            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;
+        }, 0);
+    }, [keyProp, src, label, mandatory, disabled, readonly, xAlignment, rowSpan, signatureURL, visible, form, showTitle, renderTitle, layoutType, isActive, handleActions]);
+    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-signature-element", { ref: elementRef });
+};
+//# sourceMappingURL=pep-signature.js.map

package/pep-smart-filters.d.ts

@@ -0,0 +1,14 @@
+export interface PepSmartFiltersProps {
+    title?: string;
+    filters?: any[];
+    fields?: any[];
+    useAsWebComponent?: boolean;
+    onFiltersChange?: (filters: any[]) => void;
+    onFieldToggleChange?: (field: any) => void;
+}
+export interface PepSmartFiltersRef {
+    clearFilters: () => void;
+    clearFilter: (fieldId: string) => void;
+    toggleField: (index: number, isOpen: boolean) => void;
+}
+export declare const PepSmartFilters: any;

package/pep-smart-filters.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useRef, useEffect } from 'react';
+export const PepSmartFilters = React.forwardRef(({ title, filters, fields, useAsWebComponent = true, onFiltersChange, onFieldToggleChange, }, ref) => {
+    const elementRef = useRef(null);
+    // Expose methods via ref
+    React.useImperativeHandle(ref, () => ({
+        clearFilters: () => {
+            const element = elementRef.current;
+            if (element && typeof element.clearFilters === 'function') {
+                element.clearFilters();
+            }
+            else {
+                console.warn('clearFilters method not available on element', element);
+            }
+        },
+        clearFilter: (fieldId) => {
+            const element = elementRef.current;
+            if (element && typeof element.clearFilter === 'function') {
+                element.clearFilter(fieldId);
+            }
+            else {
+                console.warn('clearFilter method not available on element', element);
+            }
+        },
+        toggleField: (index, isOpen) => {
+            const element = elementRef.current;
+            if (element && typeof element.toggleField === 'function') {
+                element.toggleField(index, isOpen);
+            }
+            else {
+                console.warn('toggleField method not available on element', element);
+            }
+        },
+    }));
+    // Set initial properties only once on mount
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Defer property setting to ensure Angular component initialization completes
+        setTimeout(() => {
+            if (title !== undefined)
+                element.title = title;
+            if (fields !== undefined)
+                element.fields = fields;
+            if (useAsWebComponent !== undefined)
+                element.useAsWebComponent = useAsWebComponent;
+            // Set initial filters only if provided
+            if (filters !== undefined && filters.length > 0) {
+                element.filters = filters;
+            }
+        }, 0);
+    }, []); // Empty deps - only run on mount
+    // Update title if it changes
+    useEffect(() => {
+        const element = elementRef.current;
+        if (element && title !== undefined) {
+            element.title = title;
+        }
+    }, [title]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        // Event listeners
+        const handleFiltersChange = (event) => {
+            onFiltersChange === null || onFiltersChange === void 0 ? void 0 : onFiltersChange(event.detail);
+        };
+        const handleFieldToggleChange = (event) => {
+            onFieldToggleChange === null || onFieldToggleChange === void 0 ? void 0 : onFieldToggleChange(event.detail);
+        };
+        if (onFiltersChange)
+            element.addEventListener('filtersChange', handleFiltersChange);
+        if (onFieldToggleChange)
+            element.addEventListener('fieldToggleChange', handleFieldToggleChange);
+        return () => {
+            if (onFiltersChange)
+                element.removeEventListener('filtersChange', handleFiltersChange);
+            if (onFieldToggleChange)
+                element.removeEventListener('fieldToggleChange', handleFieldToggleChange);
+        };
+    }, [onFiltersChange, onFieldToggleChange]);
+    return _jsx("pep-smart-filters-element", { ref: elementRef });
+});
+PepSmartFilters.displayName = 'PepSmartFilters';
+//# sourceMappingURL=pep-smart-filters.js.map

package/services.d.ts

@@ -100,6 +100,16 @@ export interface PepDialogServiceBridge {
     openDefaultDialog(options: PepDialogDefaultOptions): any;
     openColorPicker?(options: any): any;
 }
+export interface PepSnackBarData {
+    title?: string;
+    content?: string;
+}
+export interface PepSnackBarServiceBridge {
+    getSnackBarConfig?: (options?: {
+        duration?: number;
+    }) => unknown;
+    openDefaultSnackBar: (data: PepSnackBarData, config?: unknown) => unknown;
+}
 export interface PepperiServicesBridge {
     http?: PepHttpServiceBridge;
     session?: PepSessionServiceBridge;
@@ -109,11 +119,13 @@ export interface PepperiServicesBridge {
     color?: PepColorServiceBridge;
     loader?: PepLoaderServiceBridge;
     dialog?: PepDialogServiceBridge;
+    snackBar?: PepSnackBarServiceBridge;
 }
 export declare function getPepHttpService(): PepHttpServiceBridge | undefined;
 export declare function getPepSessionService(): PepSessionServiceBridge | undefined;
 export declare function getPepTranslateService(): PepTranslateServiceBridge | undefined;
 export declare function getPepDialogService(): PepDialogServiceBridge | undefined;
+export declare function getPepSnackBarService(): PepSnackBarServiceBridge | undefined;
 export declare function pepHttpGetViaService<T = any>(url: string, httpOptions?: any): Promise<T>;
 export declare function pepHttpPostViaService<T = any>(url: string, body: any | null, httpOptions?: any): Promise<T>;
 export declare function pepHttpGetWapi<T = any>(relativeUrl: string, httpOptions?: any): Promise<T>;
@@ -153,6 +165,9 @@ export declare function pepFindClosestAccessibleColor(adjustableColor: string, o
 export declare function pepLightOrDark(color: any): 'light' | 'dark';
 export declare function pepLoaderShow(): void;
 export declare function pepLoaderHide(): void;
+export declare function pepOpenDefaultSnackBar(data: PepSnackBarData, options?: {
+    duration?: number;
+}): unknown;
 export declare function pepOpenDefaultDialog<T = any>(options: PepDialogDefaultOptions): Promise<T | undefined>;
 export declare function pepOpenColorPickerDialog<T = any>(options: any): Promise<T | undefined>;
 export interface OpenReactPepDialogOptions<T = any> {

package/services.js

@@ -93,6 +93,14 @@ export function getPepDialogService() {
         return undefined;
     }
 }
+export function getPepSnackBarService() {
+    try {
+        return getPepperiServicesOrThrow().snackBar;
+    }
+    catch {
+        return undefined;
+    }
+}
 function requirePepHttpService() {
     const http = getPepHttpService();
     if (!http) {
@@ -149,6 +157,13 @@ function requirePepDialogService() {
     }
     return dialog;
 }
+function requirePepSnackBarService() {
+    const snackBar = getPepSnackBarService();
+    if (!snackBar) {
+        throw new Error('PepSnackBarService is not available on window.pepperi.services.snackBar. Ensure Elements bundle is loaded and services bridge is initialized.');
+    }
+    return snackBar;
+}
 // -----------------------------------------------------------------------------
 // Internal: convert RxJS-like Observable to Promise without importing rxjs
 // -----------------------------------------------------------------------------
@@ -158,8 +173,7 @@ function observableToPromise(observable) {
             reject(new Error('Pepperi HTTP service did not return a subscribable object.'));
             return;
         }
-        let subscription;
-        subscription = observable.subscribe((value) => {
+        const subscription = observable.subscribe((value) => {
             try {
                 resolve(value);
             }
@@ -330,6 +344,12 @@ export function pepLoaderShow() {
 export function pepLoaderHide() {
     requirePepLoaderService().hide();
 }
+export function pepOpenDefaultSnackBar(data, options) {
+    var _a;
+    const snackBar = requirePepSnackBarService();
+    const config = (_a = snackBar.getSnackBarConfig) === null || _a === void 0 ? void 0 : _a.call(snackBar, options);
+    return snackBar.openDefaultSnackBar(data, config);
+}
 // -----------------------------------------------------------------------------
 // Convenience helpers for PepDialogService (dialogs)
 // -----------------------------------------------------------------------------