@pepperi-addons/ngx-lib-react 0.5.3 → 0.5.5

package/index.d.ts

@@ -26,5 +26,7 @@ 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 { PepTopBar } from './pep-top-bar.js';
 export * from './pep-color-picker.js';
+export { PepRichHtmlTextarea } from './pep-rich-html-textarea.js';
 export * from './services.js';

package/index.js

@@ -26,7 +26,9 @@ 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 { PepTopBar } from './pep-top-bar.js';
 export * from './pep-color-picker.js';
+export { PepRichHtmlTextarea } from './pep-rich-html-textarea.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.3",
+  "version": "0.5.5",
   "description": "Thin React wrappers for Pepperi Angular Elements (Web Components) to improve DX in React.",
   "license": "MIT",
   "author": "Pepperi",
@@ -26,6 +26,7 @@
     "*.js",
     "*.d.ts",
     "README.md",
+    "SERVICES.md",
     "elements/*"
   ]
   ,

package/pep-dialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-export const PepDialog = ({ title, showClose, showHeader, showFooter, onClose, ...rest }) => {
+export const PepDialog = ({ title, showClose, showHeader, showFooter, onClose, children, ...rest }) => {
     const ref = useRef(null);
     // Sync inputs as properties on the custom element
     useEffect(() => {
@@ -29,6 +29,6 @@ export const PepDialog = ({ title, showClose, showHeader, showFooter, onClose, .
         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 });
+    return (_jsx("pep-dialog-element", { ref: ref, ...rest, children: children }));
 };
 //# sourceMappingURL=pep-dialog.js.map

package/pep-rich-html-textarea.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+export interface PepRichHtmlTextareaToolbarOptions {
+    font?: unknown;
+    size?: unknown;
+    header?: unknown;
+    bold?: unknown;
+    italic?: unknown;
+    underline?: unknown;
+    strike?: unknown;
+    link?: unknown;
+    image?: unknown;
+    ordered?: unknown;
+    bullet?: unknown;
+    color?: unknown;
+    background?: unknown;
+    align?: unknown;
+}
+export interface PepRichHtmlTextareaProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
+    value?: string;
+    label?: string;
+    mandatory?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    maxFieldCharacters?: number;
+    xAlignment?: string;
+    sanitize?: boolean;
+    rowSpan?: number;
+    visible?: boolean;
+    form?: unknown;
+    isActive?: boolean;
+    showTitle?: boolean;
+    renderTitle?: boolean;
+    renderEnlargeButton?: boolean;
+    layoutType?: string;
+    inlineMode?: boolean;
+    toolbarOptions?: PepRichHtmlTextareaToolbarOptions;
+    onValueChange?: (value: string) => void;
+    onEditorCreated?: (editor: unknown) => void;
+    onValidationChange?: (isValid: boolean) => void;
+}
+export declare const PepRichHtmlTextarea: React.FC<PepRichHtmlTextareaProps>;

package/pep-rich-html-textarea.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepRichHtmlTextarea = ({ keyProp, value, label, mandatory, disabled, readonly, maxFieldCharacters, xAlignment, sanitize, rowSpan, visible, form, isActive, showTitle, renderTitle, renderEnlargeButton, layoutType, inlineMode, toolbarOptions, onValueChange, onEditorCreated, onValidationChange, className, ...rest }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        if (typeof value !== 'undefined') {
+            element.value = value;
+        }
+        if (typeof label !== 'undefined') {
+            element.label = label;
+        }
+        if (typeof mandatory !== 'undefined') {
+            element.mandatory = mandatory;
+        }
+        if (typeof disabled !== 'undefined') {
+            element.disabled = disabled;
+        }
+        if (typeof readonly !== 'undefined') {
+            element.readonly = readonly;
+        }
+        if (typeof maxFieldCharacters !== 'undefined') {
+            element.maxFieldCharacters = maxFieldCharacters;
+        }
+        if (typeof xAlignment !== 'undefined') {
+            element.xAlignment = xAlignment;
+        }
+        if (typeof sanitize !== 'undefined') {
+            element.sanitize = sanitize;
+        }
+        if (typeof rowSpan !== 'undefined') {
+            element.rowSpan = rowSpan;
+        }
+        if (typeof visible !== 'undefined') {
+            element.visible = visible;
+        }
+        if (typeof form !== 'undefined') {
+            element.form = form;
+        }
+        if (typeof isActive !== 'undefined') {
+            element.isActive = isActive;
+        }
+        if (typeof showTitle !== 'undefined') {
+            element.showTitle = showTitle;
+        }
+        if (typeof renderTitle !== 'undefined') {
+            element.renderTitle = renderTitle;
+        }
+        if (typeof renderEnlargeButton !== 'undefined') {
+            element.renderEnlargeButton = renderEnlargeButton;
+        }
+        if (typeof layoutType !== 'undefined') {
+            element.layoutType = layoutType;
+        }
+        if (typeof inlineMode !== 'undefined') {
+            element.inlineMode = inlineMode;
+        }
+        if (typeof toolbarOptions !== 'undefined') {
+            element.toolbarOptions = toolbarOptions;
+        }
+    }, [
+        value,
+        label,
+        mandatory,
+        disabled,
+        readonly,
+        maxFieldCharacters,
+        xAlignment,
+        sanitize,
+        rowSpan,
+        visible,
+        form,
+        isActive,
+        showTitle,
+        renderTitle,
+        renderEnlargeButton,
+        layoutType,
+        inlineMode,
+        toolbarOptions,
+    ]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        const handlers = [];
+        if (onValueChange) {
+            handlers.push([
+                'valueChange',
+                (event) => {
+                    var _a, _b, _c;
+                    const customEvent = event;
+                    const nextValue = (_c = (_a = customEvent.detail) !== null && _a !== void 0 ? _a : (_b = event.target) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '';
+                    onValueChange(nextValue);
+                },
+            ]);
+        }
+        if (onEditorCreated) {
+            handlers.push([
+                'editorCreated',
+                (event) => {
+                    const customEvent = event;
+                    onEditorCreated(customEvent.detail);
+                },
+            ]);
+        }
+        if (onValidationChange) {
+            handlers.push([
+                'validationChange',
+                (event) => {
+                    var _a, _b;
+                    const customEvent = event;
+                    const isValid = (_a = customEvent.detail) !== null && _a !== void 0 ? _a : !!((_b = event.target) === null || _b === void 0 ? void 0 : _b.value);
+                    onValidationChange(isValid);
+                },
+            ]);
+        }
+        handlers.forEach(([name, handler]) => element.addEventListener(name, handler));
+        return () => {
+            handlers.forEach(([name, handler]) => element.removeEventListener(name, handler));
+        };
+    }, [onValueChange, onEditorCreated, onValidationChange]);
+    return (_jsx("pep-rich-html-textarea-element", { ref: elementRef, className: className, value: value, label: label, ...rest }, keyProp));
+};
+//# sourceMappingURL=pep-rich-html-textarea.js.map

package/pep-top-bar.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare type PepFooterStateType = 'visible' | 'hidden';
+export interface PepFooterStateChangeEvent {
+    state: PepFooterStateType;
+}
+export interface PepTopBarProps {
+    inline?: boolean;
+    title?: string;
+    headerStartContent?: React.ReactNode;
+    headerEndContent?: React.ReactNode;
+    footerStartContent?: React.ReactNode;
+    footerEndContent?: React.ReactNode;
+    children?: React.ReactNode;
+    onFooterStateChange?: (event: PepFooterStateChangeEvent) => void;
+}
+export declare const PepTopBar: React.FC<PepTopBarProps>;

package/pep-top-bar.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepTopBar = ({ inline, title, headerStartContent, headerEndContent, footerStartContent, footerEndContent, children, onFooterStateChange, }) => {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        // Defer property setting to ensure Angular component initialization completes
+        const applyProps = () => {
+            try {
+                if (!element) {
+                    return;
+                }
+                if (inline !== undefined) {
+                    element.inline = inline;
+                }
+                if (title !== undefined) {
+                    element.title = title;
+                }
+            }
+            catch (error) {
+                // eslint-disable-next-line no-console
+                console.error('Error setting PepTopBar properties:', error);
+            }
+        };
+        const timeoutId = window.setTimeout(applyProps, 0);
+        return () => {
+            window.clearTimeout(timeoutId);
+        };
+    }, [inline, title]);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element) {
+            return;
+        }
+        const handleFooterStateChange = (event) => {
+            const customEvent = event;
+            onFooterStateChange === null || onFooterStateChange === void 0 ? void 0 : onFooterStateChange(customEvent.detail);
+        };
+        element.addEventListener('footerStateChange', handleFooterStateChange);
+        return () => {
+            element.removeEventListener('footerStateChange', handleFooterStateChange);
+        };
+    }, [onFooterStateChange]);
+    return (_jsxs("pep-top-bar-element", { ref: elementRef, children: [headerStartContent && (_jsx("div", { "header-start-content": "", children: headerStartContent })), headerEndContent && (_jsx("div", { "header-end-content": "", children: headerEndContent })), footerStartContent && (_jsx("div", { "footer-start-content": "", children: footerStartContent })), footerEndContent && (_jsx("div", { "footer-end-content": "", children: footerEndContent })), children] }));
+};
+//# sourceMappingURL=pep-top-bar.js.map

package/services.d.ts

@@ -14,6 +14,7 @@
  * If you absolutely need Angular service functionality, you must use the Angular library
  * directly in an Angular application, not in a React application.
  */
+/// <reference types="react" />
 export interface PepHttpServiceBridge {
     getHttpCall(url: string, httpOptions?: any): any;
     postHttpCall(url: string, body: any | null, httpOptions?: any): any;
@@ -22,7 +23,50 @@ export interface PepHttpServiceBridge {
     getPapiApiCall(url: string, httpOptions?: any): any;
     postPapiApiCall(url: string, body: any | null, httpOptions?: any): any;
 }
+export interface PepTranslateServiceBridge {
+    instant(key: string | string[], interpolateParams?: Record<string, unknown>): string | any;
+    get(key: string | string[], interpolateParams?: Record<string, unknown>): any;
+    use(lang: string): any;
+    getDefaultLang(): string;
+    getCurrentLang(): string | undefined;
+}
+export declare type PepDialogActionsType = 'close' | 'cancel-continue' | 'cancel-ok' | 'cancel-delete' | 'custom';
+export declare type PepDialogSizeType = 'inline' | 'small' | 'regular' | 'large' | 'full-screen';
+export interface PepDialogActionButtonConfig {
+    title: string;
+    className?: string;
+    callback?: () => void;
+}
+export interface PepDialogDefaultOptions {
+    title?: string;
+    content?: string;
+    showClose?: boolean;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    actionsType?: PepDialogActionsType;
+    actionButtons?: PepDialogActionButtonConfig[];
+    size?: PepDialogSizeType;
+    disableClose?: boolean;
+    hasBackdrop?: boolean;
+    height?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    panelClass?: string;
+}
+export interface PepAddonServiceBridge {
+    getAddonApiCall(addonUUID: string, fileName: string, functionName: string, httpOptions?: any, isAsync?: boolean): any;
+    postAddonApiCall(addonUUID: string, fileName: string, functionName: string, body?: any, httpOptions?: any, isAsync?: boolean): any;
+    getAddonCPICall(addonUUID: string, url: string): Promise<any>;
+    postAddonCPICall(addonUUID: string, url: string, body: any): Promise<any>;
+    getServerBaseUrl(addonUUID: string, fileName?: string, isAsync?: boolean, localhostPort?: number): string;
+    getAddonStaticFolder(addonUUID: string): string;
+    setAddonStaticFolder(path: string, addonUUID: string): void;
+}
 export declare function getPepCustomizationService(): PepCustomizationServiceBridge | undefined;
+export declare function getPepAddonService(): PepAddonServiceBridge | undefined;
+export declare function getPepColorService(): PepColorServiceBridge | undefined;
+export declare function getPepLoaderService(): PepLoaderServiceBridge | undefined;
 export interface PepSessionServiceBridge {
     getIdpToken(): string | null;
     getWapiBaseUrl(): string | null;
@@ -44,13 +88,32 @@ export interface PepCustomizationServiceBridge {
     hideSettings(): void;
     showSettings(): void;
 }
+export interface PepColorServiceBridge {
+    findClosestAccessibleColor(adjustableColor: string, otherColor: string, contrastRatio: number): string | null;
+    lightOrDark(color: any): 'light' | 'dark';
+}
+export interface PepLoaderServiceBridge {
+    show(): void;
+    hide(): void;
+}
+export interface PepDialogServiceBridge {
+    openDefaultDialog(options: PepDialogDefaultOptions): any;
+    openColorPicker?(options: any): any;
+}
 export interface PepperiServicesBridge {
     http?: PepHttpServiceBridge;
     session?: PepSessionServiceBridge;
     customization?: PepCustomizationServiceBridge;
+    translate?: PepTranslateServiceBridge;
+    addon?: PepAddonServiceBridge;
+    color?: PepColorServiceBridge;
+    loader?: PepLoaderServiceBridge;
+    dialog?: PepDialogServiceBridge;
 }
 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 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>;
@@ -74,3 +137,30 @@ export declare function pepHideFooter(): void;
 export declare function pepShowFooter(): void;
 export declare function pepHideSettings(): void;
 export declare function pepShowSettings(): void;
+export declare function pepTranslateInstant(key: string | string[], interpolateParams?: Record<string, unknown>): string | any;
+export declare function pepTranslateGet<T = any>(key: string | string[], interpolateParams?: Record<string, unknown>): Promise<T>;
+export declare function pepTranslateUse(lang: string): Promise<void>;
+export declare function pepTranslateGetDefaultLang(): string;
+export declare function pepTranslateGetCurrentLang(): string | undefined;
+export declare function pepAddonGetApi<T = any>(addonUUID: string, fileName: string, functionName: string, httpOptions?: any, isAsync?: boolean): Promise<T>;
+export declare function pepAddonPostApi<T = any>(addonUUID: string, fileName: string, functionName: string, body?: any, httpOptions?: any, isAsync?: boolean): Promise<T>;
+export declare function pepAddonGetCpi<T = any>(addonUUID: string, url: string): Promise<T>;
+export declare function pepAddonPostCpi<T = any>(addonUUID: string, url: string, body: any): Promise<T>;
+export declare function pepAddonGetServerBaseUrl(addonUUID: string, fileName?: string, isAsync?: boolean, localhostPort?: number): string;
+export declare function pepAddonGetStaticFolder(addonUUID: string): string;
+export declare function pepAddonSetStaticFolder(path: string, addonUUID: string): void;
+export declare function pepFindClosestAccessibleColor(adjustableColor: string, otherColor: string, contrastRatio: number): string | null;
+export declare function pepLightOrDark(color: any): 'light' | 'dark';
+export declare function pepLoaderShow(): void;
+export declare function pepLoaderHide(): void;
+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> {
+    title?: string;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    showClose?: boolean;
+    size?: PepDialogSizeType;
+    renderContent?: (close: (result?: T) => void) => React.ReactNode;
+}
+export declare function openReactPepDialog<T = any>(options: OpenReactPepDialogOptions<T>): Promise<T | undefined>;

package/services.js

@@ -14,6 +14,9 @@
  * If you absolutely need Angular service functionality, you must use the Angular library
  * directly in an Angular application, not in a React application.
  */
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import { PepDialog } from './pep-dialog.js';
 export function getPepCustomizationService() {
     try {
         return getPepperiServicesOrThrow().customization;
@@ -22,6 +25,30 @@ export function getPepCustomizationService() {
         return undefined;
     }
 }
+export function getPepAddonService() {
+    try {
+        return getPepperiServicesOrThrow().addon;
+    }
+    catch {
+        return undefined;
+    }
+}
+export function getPepColorService() {
+    try {
+        return getPepperiServicesOrThrow().color;
+    }
+    catch {
+        return undefined;
+    }
+}
+export function getPepLoaderService() {
+    try {
+        return getPepperiServicesOrThrow().loader;
+    }
+    catch {
+        return undefined;
+    }
+}
 function getPepperiServicesOrThrow() {
     const w = (typeof window !== 'undefined' ? window : globalThis);
     const pep = w === null || w === void 0 ? void 0 : w.pepperi;
@@ -50,6 +77,22 @@ export function getPepSessionService() {
         return undefined;
     }
 }
+export function getPepTranslateService() {
+    try {
+        return getPepperiServicesOrThrow().translate;
+    }
+    catch {
+        return undefined;
+    }
+}
+export function getPepDialogService() {
+    try {
+        return getPepperiServicesOrThrow().dialog;
+    }
+    catch {
+        return undefined;
+    }
+}
 function requirePepHttpService() {
     const http = getPepHttpService();
     if (!http) {
@@ -71,6 +114,41 @@ function requirePepCustomizationService() {
     }
     return customization;
 }
+function requirePepTranslateService() {
+    const translate = getPepTranslateService();
+    if (!translate) {
+        throw new Error('PepTranslateService is not available on window.pepperi.services.translate. Ensure Elements bundle is loaded and services bridge is initialized.');
+    }
+    return translate;
+}
+function requirePepAddonService() {
+    const addon = getPepAddonService();
+    if (!addon) {
+        throw new Error('PepAddonService is not available on window.pepperi.services.addon. Ensure Elements bundle is loaded and services bridge is initialized.');
+    }
+    return addon;
+}
+function requirePepColorService() {
+    const color = getPepColorService();
+    if (!color) {
+        throw new Error('PepColorService is not available on window.pepperi.services.color. Ensure Elements bundle is loaded and services bridge is initialized.');
+    }
+    return color;
+}
+function requirePepLoaderService() {
+    const loader = getPepLoaderService();
+    if (!loader) {
+        throw new Error('PepLoaderService is not available on window.pepperi.services.loader. Ensure Elements bundle is loaded and services bridge is initialized.');
+    }
+    return loader;
+}
+function requirePepDialogService() {
+    const dialog = getPepDialogService();
+    if (!dialog) {
+        throw new Error('PepDialogService is not available on window.pepperi.services.dialog. Ensure Elements bundle is loaded and services bridge is initialized.');
+    }
+    return dialog;
+}
 // -----------------------------------------------------------------------------
 // Internal: convert RxJS-like Observable to Promise without importing rxjs
 // -----------------------------------------------------------------------------
@@ -186,4 +264,155 @@ export function pepHideSettings() {
 export function pepShowSettings() {
     requirePepCustomizationService().showSettings();
 }
+// -----------------------------------------------------------------------------
+// Convenience helpers for PepTranslateService (i18n)
+// -----------------------------------------------------------------------------
+export function pepTranslateInstant(key, interpolateParams) {
+    return requirePepTranslateService().instant(key, interpolateParams);
+}
+export async function pepTranslateGet(key, interpolateParams) {
+    const translate = requirePepTranslateService();
+    return observableToPromise(translate.get(key, interpolateParams));
+}
+export async function pepTranslateUse(lang) {
+    const translate = requirePepTranslateService();
+    await observableToPromise(translate.use(lang));
+}
+export function pepTranslateGetDefaultLang() {
+    return requirePepTranslateService().getDefaultLang();
+}
+export function pepTranslateGetCurrentLang() {
+    return requirePepTranslateService().getCurrentLang();
+}
+// -----------------------------------------------------------------------------
+// Convenience helpers for PepAddonService (addons & CPI)
+// -----------------------------------------------------------------------------
+export async function pepAddonGetApi(addonUUID, fileName, functionName, httpOptions, isAsync) {
+    const addon = requirePepAddonService();
+    return observableToPromise(addon.getAddonApiCall(addonUUID, fileName, functionName, httpOptions, isAsync));
+}
+export async function pepAddonPostApi(addonUUID, fileName, functionName, body, httpOptions, isAsync) {
+    const addon = requirePepAddonService();
+    return observableToPromise(addon.postAddonApiCall(addonUUID, fileName, functionName, body, httpOptions, isAsync));
+}
+export function pepAddonGetCpi(addonUUID, url) {
+    const addon = requirePepAddonService();
+    return addon.getAddonCPICall(addonUUID, url);
+}
+export function pepAddonPostCpi(addonUUID, url, body) {
+    const addon = requirePepAddonService();
+    return addon.postAddonCPICall(addonUUID, url, body);
+}
+export function pepAddonGetServerBaseUrl(addonUUID, fileName, isAsync, localhostPort) {
+    return requirePepAddonService().getServerBaseUrl(addonUUID, fileName, isAsync, localhostPort);
+}
+export function pepAddonGetStaticFolder(addonUUID) {
+    return requirePepAddonService().getAddonStaticFolder(addonUUID);
+}
+export function pepAddonSetStaticFolder(path, addonUUID) {
+    requirePepAddonService().setAddonStaticFolder(path, addonUUID);
+}
+// -----------------------------------------------------------------------------
+// Convenience helpers for PepColorService (color utilities)
+// -----------------------------------------------------------------------------
+export function pepFindClosestAccessibleColor(adjustableColor, otherColor, contrastRatio) {
+    return requirePepColorService().findClosestAccessibleColor(adjustableColor, otherColor, contrastRatio);
+}
+export function pepLightOrDark(color) {
+    return requirePepColorService().lightOrDark(color);
+}
+// -----------------------------------------------------------------------------
+// Convenience helpers for PepLoaderService (global loader)
+// -----------------------------------------------------------------------------
+export function pepLoaderShow() {
+    requirePepLoaderService().show();
+}
+export function pepLoaderHide() {
+    requirePepLoaderService().hide();
+}
+// -----------------------------------------------------------------------------
+// Convenience helpers for PepDialogService (dialogs)
+// -----------------------------------------------------------------------------
+export async function pepOpenDefaultDialog(options) {
+    const dialog = requirePepDialogService();
+    const ref = dialog.openDefaultDialog(options);
+    if (!ref || typeof ref.afterClosed !== 'function') {
+        throw new Error('PepDialogService bridge did not return a dialogRef with afterClosed(). Ensure Elements bundle is loaded and dialog bridge is initialized.');
+    }
+    return observableToPromise(ref.afterClosed());
+}
+export async function pepOpenColorPickerDialog(options) {
+    const dialog = requirePepDialogService();
+    if (!dialog.openColorPicker) {
+        throw new Error('PepDialogService bridge does not expose openColorPicker.');
+    }
+    const ref = dialog.openColorPicker(options);
+    if (!ref || typeof ref.afterClosed !== 'function') {
+        throw new Error('PepDialogService color picker bridge did not return a dialogRef with afterClosed(). Ensure Elements bundle is loaded and dialog bridge is initialized.');
+    }
+    return observableToPromise(ref.afterClosed());
+}
+export function openReactPepDialog(options) {
+    if (typeof document === 'undefined') {
+        return Promise.reject(new Error('openReactPepDialog can only be used in a browser environment.'));
+    }
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const useCreateRoot = typeof ReactDOM.createRoot === 'function';
+    let root = null;
+    return new Promise((resolve) => {
+        var _a, _b, _c;
+        const close = (result) => {
+            try {
+                if (useCreateRoot && root && typeof root.unmount === 'function') {
+                    root.unmount();
+                }
+                else if (!useCreateRoot &&
+                    typeof ReactDOM.unmountComponentAtNode === 'function') {
+                    ReactDOM.unmountComponentAtNode(host);
+                }
+            }
+            catch {
+                // noop
+            }
+            if (host.parentNode) {
+                host.parentNode.removeChild(host);
+            }
+            resolve(result);
+        };
+        const overlay = React.createElement('div', {
+            style: {
+                position: 'fixed',
+                inset: 0,
+                background: 'rgba(0, 0, 0, 0.4)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 1100,
+            },
+        }, React.createElement('div', {
+            className: 'cdk-overlay-pane pep-dialog',
+        }, React.createElement('div', {
+            className: 'mat-dialog-container pep-dialog' +
+                ((options === null || options === void 0 ? void 0 : options.size) ? ` ${options.size}` : ''),
+        }, React.createElement(PepDialog, {
+            title: options === null || options === void 0 ? void 0 : options.title,
+            showHeader: (_a = options === null || options === void 0 ? void 0 : options.showHeader) !== null && _a !== void 0 ? _a : true,
+            showFooter: (_b = options === null || options === void 0 ? void 0 : options.showFooter) !== null && _b !== void 0 ? _b : true,
+            showClose: (_c = options === null || options === void 0 ? void 0 : options.showClose) !== null && _c !== void 0 ? _c : true,
+            onClose: () => close(undefined),
+        }, (options === null || options === void 0 ? void 0 : options.renderContent) ? options.renderContent(close) : null))));
+        if (useCreateRoot) {
+            root = ReactDOM.createRoot(host);
+            root.render(overlay);
+        }
+        else if (typeof ReactDOM.render === 'function') {
+            ReactDOM.render(overlay, host);
+        }
+        else {
+            // If we cannot render the overlay for some reason, resolve immediately.
+            close(undefined);
+        }
+    });
+}
 //# sourceMappingURL=services.js.map