@pepperi-addons/ngx-composite-lib-react 0.0.4 → 0.5.0

package/pep-padding-settings.d.ts

@@ -1,4 +1,12 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepPaddingSettings: import("react").ForwardRefExoticComponent<Pick<Record<string, any> & {
-    children?: import("react").ReactNode;
-}, string> & import("react").RefAttributes<HTMLElement & Record<string, any>>>;
+import React from 'react';
+export interface PepPaddingSettings {
+    IsUniform?: boolean;
+    PaddingValue?: string;
+}
+export interface PepPaddingSettingsProps {
+    padding?: PepPaddingSettings;
+    onPaddingChange?: (value: PepPaddingSettings) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepPaddingSettings: React.FC<PepPaddingSettingsProps>;

package/pep-padding-settings.js

@@ -1,3 +1,24 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepPaddingSettings = createPepWrapper('pep-padding-settings', 'PepPaddingSettings');
+import React, { useEffect, useRef } from 'react';
+export const PepPaddingSettings = ({ padding, onPaddingChange, className, style, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (padding !== undefined)
+            el.padding = padding;
+    }, [padding]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => {
+            const ce = e;
+            onPaddingChange?.(ce.detail ?? ref.current?.padding);
+        };
+        el.addEventListener('paddingChange', handler);
+        return () => el.removeEventListener('paddingChange', handler);
+    }, [onPaddingChange]);
+    return React.createElement('pep-padding-settings-element', { ref, class: className, style });
+};
 //# sourceMappingURL=pep-padding-settings.js.map

package/pep-rich-text.d.ts

@@ -1,4 +1,47 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepRichText: import("react").ForwardRefExoticComponent<Pick<Record<string, any> & {
-    children?: import("react").ReactNode;
-}, string> & import("react").RefAttributes<HTMLElement & Record<string, any>>>;
+import React from 'react';
+export declare type PepHorizontalAlignment = 'start' | 'center' | 'end' | 'space-between' | string;
+export declare type PepLayoutType = 'form' | 'card' | 'table' | string;
+export interface PepToolbarImageOptions {
+    useAssetsABI?: boolean;
+}
+export interface IPepRichHtmlTextareaToolbarOptions {
+    font?: boolean;
+    size?: boolean;
+    header?: boolean;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strike?: boolean;
+    link?: boolean;
+    image?: boolean | PepToolbarImageOptions;
+    ordered?: boolean;
+    bullet?: boolean;
+    color?: boolean;
+    background?: boolean;
+    align?: boolean;
+}
+export interface PepRichTextProps {
+    keyProp?: string;
+    value?: string;
+    label?: string;
+    mandatory?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    maxFieldCharacters?: number;
+    xAlignment?: PepHorizontalAlignment;
+    sanitize?: boolean;
+    rowSpan?: number;
+    visible?: boolean;
+    isActive?: boolean;
+    showTitle?: boolean;
+    renderTitle?: boolean;
+    renderEnlargeButton?: boolean;
+    layoutType?: PepLayoutType;
+    inlineMode?: boolean;
+    useAssetsForImages?: boolean;
+    toolbarOptions?: IPepRichHtmlTextareaToolbarOptions;
+    onValueChange?: (val: any) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepRichText: React.FC<PepRichTextProps>;

package/pep-rich-text.js

@@ -1,3 +1,77 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepRichText = createPepWrapper('pep-rich-text', 'PepRichText');
+import React, { useEffect, useRef } from 'react';
+export const PepRichText = ({ keyProp, value, label, mandatory, disabled, readonly, maxFieldCharacters, xAlignment, sanitize, rowSpan, visible, isActive, showTitle, renderTitle, renderEnlargeButton, layoutType, inlineMode, useAssetsForImages, toolbarOptions, onValueChange, className, style, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (keyProp !== undefined)
+            el.key = keyProp;
+        if (value !== undefined)
+            el.value = value;
+        if (label !== undefined)
+            el.label = label;
+        if (mandatory !== undefined)
+            el.mandatory = mandatory;
+        if (disabled !== undefined)
+            el.disabled = disabled;
+        if (readonly !== undefined)
+            el.readonly = readonly;
+        if (maxFieldCharacters !== undefined)
+            el.maxFieldCharacters = maxFieldCharacters;
+        if (xAlignment !== undefined)
+            el.xAlignment = xAlignment;
+        if (sanitize !== undefined)
+            el.sanitize = sanitize;
+        if (rowSpan !== undefined)
+            el.rowSpan = rowSpan;
+        if (visible !== undefined)
+            el.visible = visible;
+        if (isActive !== undefined)
+            el.isActive = isActive;
+        if (showTitle !== undefined)
+            el.showTitle = showTitle;
+        if (renderTitle !== undefined)
+            el.renderTitle = renderTitle;
+        if (renderEnlargeButton !== undefined)
+            el.renderEnlargeButton = renderEnlargeButton;
+        if (layoutType !== undefined)
+            el.layoutType = layoutType;
+        if (inlineMode !== undefined)
+            el.inlineMode = inlineMode;
+        if (useAssetsForImages !== undefined)
+            el.useAssetsForImages = useAssetsForImages;
+        if (toolbarOptions !== undefined)
+            el.toolbarOptions = toolbarOptions;
+    }, [
+        keyProp,
+        value,
+        label,
+        mandatory,
+        disabled,
+        readonly,
+        maxFieldCharacters,
+        xAlignment,
+        sanitize,
+        rowSpan,
+        visible,
+        isActive,
+        showTitle,
+        renderTitle,
+        renderEnlargeButton,
+        layoutType,
+        inlineMode,
+        useAssetsForImages,
+        toolbarOptions,
+    ]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onValueChange?.(e.detail ?? ref.current?.value);
+        el.addEventListener('valueChange', handler);
+        return () => el.removeEventListener('valueChange', handler);
+    }, [onValueChange]);
+    return React.createElement('pep-rich-text-element', { ref, class: className, style });
+};
 //# sourceMappingURL=pep-rich-text.js.map

package/pep-shadow-settings.d.ts

@@ -1,4 +1,15 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepShadowSettings: import("react").ForwardRefExoticComponent<Pick<Record<string, any> & {
-    children?: import("react").ReactNode;
-}, string> & import("react").RefAttributes<HTMLElement & Record<string, any>>>;
+import React from 'react';
+export declare type PepSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
+export interface PepShadowSettings {
+    use?: boolean;
+    size?: PepSizeType;
+    intensity?: 'soft' | 'regular' | 'hard' | string;
+}
+export interface PepShadowSettingsProps {
+    titleSize?: PepSizeType;
+    shadow?: PepShadowSettings;
+    onShadowChange?: (value: PepShadowSettings) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepShadowSettings: React.FC<PepShadowSettingsProps>;

package/pep-shadow-settings.js

@@ -1,3 +1,23 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepShadowSettings = createPepWrapper('pep-shadow-settings', 'PepShadowSettings');
+import React, { useEffect, useRef } from 'react';
+export const PepShadowSettings = ({ titleSize, shadow, onShadowChange, className, style, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (titleSize !== undefined)
+            el.titleSize = titleSize;
+        if (shadow !== undefined)
+            el.shadow = shadow;
+    }, [titleSize, shadow]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handler = (e) => onShadowChange?.(e.detail ?? ref.current?.shadow);
+        el.addEventListener('shadowChange', handler);
+        return () => el.removeEventListener('shadowChange', handler);
+    }, [onShadowChange]);
+    return React.createElement('pep-shadow-settings-element', { ref, class: className, style });
+};
 //# sourceMappingURL=pep-shadow-settings.js.map

package/pep-show-if-badge.d.ts

@@ -1,4 +1,10 @@
-/// <reference types="react" resolution-mode="require"/>
-export declare const PepShowIfBadge: import("react").ForwardRefExoticComponent<Pick<Record<string, any> & {
-    children?: import("react").ReactNode;
-}, string> & import("react").RefAttributes<HTMLElement & Record<string, any>>>;
+import React from 'react';
+export declare type PepIconType = string;
+export interface PepShowIfBadgeProps {
+    showIf?: boolean;
+    iconName?: PepIconType;
+    backgroundColor?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PepShowIfBadge: React.FC<PepShowIfBadgeProps>;

package/pep-show-if-badge.js

@@ -1,3 +1,17 @@
-import { createPepWrapper } from './utils/create-wrapper.js';
-export const PepShowIfBadge = createPepWrapper('pep-show-if-badge', 'PepShowIfBadge');
+import React, { useEffect, useRef } from 'react';
+export const PepShowIfBadge = ({ showIf, iconName, backgroundColor, className, style, }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (showIf !== undefined)
+            el.showIf = showIf;
+        if (iconName !== undefined)
+            el.iconName = iconName;
+        if (backgroundColor !== undefined)
+            el.backgroundColor = backgroundColor;
+    }, [showIf, iconName, backgroundColor]);
+    return React.createElement('pep-show-if-badge-element', { ref, class: className, style });
+};
 //# sourceMappingURL=pep-show-if-badge.js.map

package/components/PepGroupButtonsSettings.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" resolution-mode="require"/>
-export interface PepGroupButtonsSettingsProps {
-    pepResetConfigurationField?: string;
-    hideReset?: boolean;
-    resetHostEvents?: (evt: any) => void;
-    groupType: 'sizes' | 'custom' | 'vertical-align' | 'left-right-arrows' | 'horizontal-align' | 'font-weight' | 'width-sizes' | 'boolean';
-    subHeader?: string;
-    btnKey?: string;
-    useNone?: boolean;
-    excludeKeys?: string[];
-    btnsArray?: any[];
-    onBtnKeyChange?: (e: any) => void;
-}
-export declare function PepGroupButtonsSettings(props: PepGroupButtonsSettingsProps): JSX.Element;

package/components/PepGroupButtonsSettings.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-// Runtime import; types are shimed locally to avoid adding a build-time dependency
-// Consumers must have '@pepperi-addons/ngx-lib-react' installed (peerDependency)
-import { PepGroupButtons } from '@pepperi-addons/ngx-lib-react';
-export function PepGroupButtonsSettings(props) {
-    const { pepResetConfigurationField, hideReset, resetHostEvents, groupType, subHeader, btnKey, useNone, excludeKeys, btnsArray, onBtnKeyChange, } = props;
-    const onReset = React.useCallback(() => {
-        if (pepResetConfigurationField && typeof resetHostEvents === 'function') {
-            resetHostEvents({
-                action: 'set-configuration-field',
-                key: pepResetConfigurationField,
-                value: undefined,
-            });
-        }
-    }, [pepResetConfigurationField, resetHostEvents]);
-    return (_jsxs("div", { children: [subHeader ? _jsx("div", { className: "pep-subheader", children: subHeader }) : null, _jsx(PepGroupButtons, { ...{ groupType, btnKey, useNone, excludeKeys, btnsArray }, onBtnKeyChange: onBtnKeyChange }), !hideReset ? (_jsx("button", { type: "button", onClick: onReset, children: "Reset" })) : null] }));
-}
-//# sourceMappingURL=PepGroupButtonsSettings.js.map

package/components/PepGroupButtonsSettingsReact.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export interface PepGroupButtonsSettingsReactProps {
-    pepResetConfigurationField?: string;
-    hideReset?: boolean;
-    resetHostEvents?: (evt: any) => void;
-    groupType: 'sizes' | 'custom' | 'vertical-align' | 'left-right-arrows' | 'horizontal-align' | 'font-weight' | 'width-sizes' | 'boolean';
-    subHeader?: string;
-    btnKey?: string;
-    useNone?: boolean;
-    excludeKeys?: string[];
-    btnsArray?: any[];
-    onBtnKeyChange?: (e: any) => void;
-}
-export declare function PepGroupButtonsSettingsReact(props: PepGroupButtonsSettingsReactProps): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/components/PepGroupButtonsSettingsReact.js

@@ -1,104 +0,0 @@
-import React from 'react';
-export function PepGroupButtonsSettingsReact(props) {
-    const { pepResetConfigurationField, hideReset, resetHostEvents, groupType, subHeader, btnKey, useNone, excludeKeys, btnsArray, onBtnKeyChange, } = props;
-    const onReset = React.useCallback(() => {
-        if (pepResetConfigurationField && typeof resetHostEvents === 'function') {
-            resetHostEvents({
-                action: 'set-configuration-field',
-                key: pepResetConfigurationField,
-                value: undefined,
-            });
-        }
-    }, [pepResetConfigurationField, resetHostEvents]);
-    // Build items for the settings element (we will pass as custom group)
-    const computedItems = React.useMemo(() => {
-        const arr = [];
-        switch (groupType) {
-            case 'custom':
-                (btnsArray || []).forEach((b) => {
-                    if (!b)
-                        return;
-                    if (typeof b === 'string')
-                        arr.push({ key: b, value: b });
-                    else
-                        arr.push(b);
-                });
-                break;
-            case 'sizes':
-                arr.push({ key: 'xs', value: 'XS' }, { key: 'sm', value: 'SM' }, { key: 'md', value: 'MD' }, { key: 'lg', value: 'LG' }, { key: 'xl', value: 'XL' }, { key: '2xl', value: '2XL' });
-                break;
-            case 'vertical-align':
-                arr.push({ key: 'start', value: 'Top' }, { key: 'middle', value: 'Middle' }, { key: 'end', value: 'Bottom' });
-                break;
-            case 'left-right-arrows':
-                arr.push({ key: 'left', iconName: 'arrow_left_alt' }, { key: 'right', iconName: 'arrow_right_alt' });
-                break;
-            case 'horizontal-align':
-                arr.push({ key: 'left', iconName: 'text_align_right' }, { key: 'center', iconName: 'text_align_center' }, { key: 'right', iconName: 'text_align_left' });
-                break;
-            case 'font-weight':
-                arr.push({ key: 'regular', value: 'Regular' }, { key: 'bold', value: 'Bold' }, { key: 'bolder', value: 'Bolder' });
-                break;
-            case 'width-sizes':
-                arr.push({ key: 'narrow', value: 'Narrow' }, { key: 'regular', value: 'Regular' }, { key: 'wide', value: 'Wide' });
-                break;
-            case 'boolean':
-                arr.push({ key: 'true', value: 'True' }, { key: 'false', value: 'False' });
-                break;
-            default:
-                break;
-        }
-        let filtered = Array.isArray(excludeKeys) && excludeKeys.length
-            ? arr.filter((i) => !excludeKeys.includes(i.key))
-            : arr;
-        if (useNone) {
-            filtered = [{ key: 'none', value: 'None' }, ...filtered];
-        }
-        return filtered;
-    }, [groupType, btnsArray, excludeKeys, useNone]);
-    const hostRef = React.useRef(null);
-    const elRef = React.useRef(null);
-    React.useLayoutEffect(() => {
-        const host = hostRef.current;
-        if (!host)
-            return () => { };
-        let el = elRef.current;
-        if (!el) {
-            el = document.createElement('pep-group-buttons-settings');
-            elRef.current = el;
-        }
-        const listeners = [];
-        // Set properties BEFORE connecting to the DOM
-        const propsToSet = {
-            pepResetConfigurationField,
-            hideReset,
-            resetHostEvents,
-            groupType: 'custom',
-            subHeader,
-            btnKey,
-            useNone,
-            excludeKeys,
-            btnsArray: computedItems,
-        };
-        Object.entries(propsToSet).forEach(([k, v]) => {
-            if (typeof v === 'undefined')
-                return;
-            try {
-                el[k] = v;
-            }
-            catch { }
-        });
-        if (typeof onBtnKeyChange === 'function') {
-            const handler = (e) => onBtnKeyChange(e);
-            el.addEventListener('btnkeyChange', handler);
-            listeners.push(['btnkeyChange', handler]);
-        }
-        if (!el.isConnected)
-            host.appendChild(el);
-        return () => {
-            listeners.forEach(([n, h]) => el.removeEventListener(n, h));
-        };
-    }, [pepResetConfigurationField, hideReset, resetHostEvents, subHeader, btnKey, useNone, excludeKeys, computedItems, onBtnKeyChange]);
-    return React.createElement('div', { ref: hostRef });
-}
-//# sourceMappingURL=PepGroupButtonsSettingsReact.js.map

package/elements/register.auto.d.ts

@@ -1 +0,0 @@
-// Side-effect module: registering elements automatically on import