@pepperi-addons/ngx-lib-react 0.5.2 → 0.5.4

package/index.d.ts

@@ -26,6 +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';
-export * from './http-helpers.js';

package/index.js

@@ -26,9 +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 all services
+export { PepRichHtmlTextarea } from './pep-rich-html-textarea.js';
+// Export all service helpers (bridge-based access to Angular 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.2",
+  "version": "0.5.4",
   "description": "Thin React wrappers for Pepperi Angular Elements (Web Components) to improve DX in React.",
   "license": "MIT",
   "author": "Pepperi",

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,4 +14,153 @@
  * If you absolutely need Angular service functionality, you must use the Angular library
  * directly in an Angular application, not in a React application.
  */
-export {};
+/// <reference types="react" />
+export interface PepHttpServiceBridge {
+    getHttpCall(url: string, httpOptions?: any): any;
+    postHttpCall(url: string, body: any | null, httpOptions?: any): any;
+    getWapiApiCall(url: string, httpOptions?: any): any;
+    postWapiApiCall(url: string, body: any | null, httpOptions?: any): any;
+    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;
+    getPapiBaseUrl(): string | null;
+    getObject<T = any>(key: string): T | null;
+    setObject<T>(key: string, object: T): void;
+    removeObject(key: string): void;
+}
+export interface PepCustomizationServiceBridge {
+    getThemeVariables(): any;
+    setThemeVariables(themeVariablesToSet?: any): void;
+    getThemeVariable(key: string): string;
+    getBrandingTheme(): string;
+    getLoadingSpinnerColor(): string;
+    getBrandingMainColor(): string;
+    getTopBarHeight(): number;
+    hideFooter(): void;
+    showFooter(): void;
+    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>;
+export declare function pepHttpPostWapi<T = any>(relativeUrl: string, body: any | null, httpOptions?: any): Promise<T>;
+export declare function pepHttpGetPapi<T = any>(relativeUrl: string, httpOptions?: any): Promise<T>;
+export declare function pepHttpPostPapi<T = any>(relativeUrl: string, body: any | null, httpOptions?: any): Promise<T>;
+export declare function pepGetIdpToken(): string | null;
+export declare function pepGetWapiBaseUrl(): string | null;
+export declare function pepGetPapiBaseUrl(): string | null;
+export declare function pepSessionGetObject<T = any>(key: string): T | null;
+export declare function pepSessionSetObject<T>(key: string, object: T): void;
+export declare function pepSessionRemoveObject(key: string): void;
+export declare function pepGetBrandingTheme(): string;
+export declare function pepGetThemeVariables(): any;
+export declare function pepSetThemeVariables(themeVariablesToSet?: any): void;
+export declare function pepGetThemeVariable(key: string): string;
+export declare function pepGetLoadingSpinnerColor(): string;
+export declare function pepGetBrandingMainColor(): string;
+export declare function pepGetTopBarHeight(): number;
+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>;