@pepperi-addons/ngx-lib-react 0.5.8 → 0.5.10

package/index.d.ts

@@ -27,6 +27,7 @@ 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 { PepListChooser } from './pep-list-chooser.js';
 export * from './pep-color-picker.js';
 export { PepRichHtmlTextarea } from './pep-rich-html-textarea.js';
 export * from './services.js';

package/index.js

@@ -27,6 +27,7 @@ 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 { PepListChooser } from './pep-list-chooser.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)

package/package.json

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

package/pep-attachment.js

@@ -40,7 +40,6 @@ export const PepAttachment = ({ keyProp, src, label, mandatory, disabled, readon
                 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(() => {

package/pep-bread-crumbs.js

@@ -14,7 +14,6 @@ export const PepBreadCrumbs = ({ items, displayType, addSpacing, onItemClick, })
                 element.displayType = displayType;
             if (addSpacing !== undefined)
                 element.addSpacing = addSpacing;
-            console.log('PepBreadCrumbs properties set:', { items, displayType, addSpacing });
         }, 0);
     }, [items, displayType, addSpacing]);
     useEffect(() => {

package/pep-button.d.ts

@@ -16,6 +16,7 @@ export interface PepButtonProps extends React.HTMLAttributes<HTMLElement> {
     iconName?: string;
     iconPosition?: PepIconPosition;
     className?: string;
+    classNames?: string;
     onButtonClick?: (e: PepButtonClickEvent) => void;
 }
 export declare const PepButton: React.FC<PepButtonProps>;

package/pep-button.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-export const PepButton = ({ value, styleType, styleStateType, sizeType, disabled, iconName, iconPosition, className, onButtonClick, ...rest }) => {
+export const PepButton = ({ value, styleType, styleStateType, sizeType, disabled, iconName, iconPosition, className, classNames, onButtonClick, ...rest }) => {
     const ref = useRef(null);
     // Sync non-string/boolean props as properties
     useEffect(() => {
@@ -20,7 +20,9 @@ export const PepButton = ({ value, styleType, styleStateType, sizeType, disabled
             el.styleStateType = styleStateType;
         if (typeof sizeType !== 'undefined')
             el.sizeType = sizeType;
-    }, [disabled, iconName, iconPosition, styleType, styleStateType, sizeType]);
+        if (typeof classNames !== 'undefined')
+            el.classNames = classNames;
+    }, [disabled, iconName, iconPosition, styleType, styleStateType, sizeType, classNames]);
     // Attach events
     useEffect(() => {
         const el = ref.current;

package/pep-images-filmstrip.js

@@ -32,7 +32,6 @@ export const PepImagesFilmstrip = ({ keyProp, value, label, xAlignment, rowSpan,
                 element.currIndex = currIndex;
             if (showThumbnails !== undefined)
                 element.showThumbnails = showThumbnails;
-            console.log('PepImagesFilmstrip properties set:', { value, label, showThumbnails, currIndex, showTitle, renderTitle });
         }, 0);
     }, [keyProp, value, label, xAlignment, rowSpan, form, uid, showTitle, renderTitle, layoutType, currIndex, showThumbnails]);
     return _jsx("pep-images-filmstrip-element", { ref: elementRef });

package/pep-list-chooser.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export interface PepListChooserOption {
+    key: string;
+    text: string;
+}
+export interface PepListChooserChangeEvent {
+    source: PepListChooserOption;
+}
+export interface PepListChooserProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    options?: PepListChooserOption[];
+    currentList?: PepListChooserOption | null;
+    sizeType?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    onChange?: (event: PepListChooserChangeEvent) => void;
+}
+export declare const PepListChooser: React.FC<PepListChooserProps>;

package/pep-list-chooser.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepListChooser = ({ options, currentList, sizeType, onChange, ...rest }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) {
+            return;
+        }
+        if (typeof options !== 'undefined') {
+            el.options = options;
+        }
+        if (typeof currentList !== 'undefined') {
+            el.currentList = currentList;
+        }
+        if (typeof sizeType !== 'undefined') {
+            el.sizeType = sizeType;
+        }
+    }, [options, currentList, sizeType]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !onChange) {
+            return;
+        }
+        const handler = (event) => {
+            var _a;
+            onChange((_a = event.detail) !== null && _a !== void 0 ? _a : event);
+        };
+        el.addEventListener('change', handler);
+        return () => {
+            el.removeEventListener('change', handler);
+        };
+    }, [onChange]);
+    return _jsx("pep-list-chooser-element", { ref: ref, ...rest });
+};
+//# sourceMappingURL=pep-list-chooser.js.map

package/pep-snack-bar.js

@@ -12,7 +12,6 @@ export const PepSnackBar = ({ snackBarRef, title, onCloseClick, }) => {
                 element.snackBarRef = snackBarRef;
             if (title !== undefined)
                 element.title = title;
-            console.log('PepSnackBar properties set:', { snackBarRef, title });
         }, 0);
     }, [snackBarRef, title]);
     useEffect(() => {

package/services.js

@@ -384,11 +384,11 @@ export function openReactPepDialog(options) {
             style: {
                 position: 'fixed',
                 inset: 0,
-                background: 'rgba(0, 0, 0, 0.4)',
+                background: 'rgba(0, 0, 0, 0.32)',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                zIndex: 1100,
+                zIndex: 1000,
             },
         }, React.createElement('div', {
             className: 'cdk-overlay-pane pep-dialog',