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

package/index.d.ts

@@ -11,3 +11,6 @@ export * from './pep-color.js';
 export * from './pep-slider.js';
 export * from './pep-group-buttons.js';
 export * from './pep-menu.js';
+export * from './pep-separator.js';
+export * from './pep-draggable-item.js';
+export * from './pep-checkbox.js';

package/index.js

@@ -11,4 +11,7 @@ export * from './pep-color.js';
 export * from './pep-slider.js';
 export * from './pep-group-buttons.js';
 export * from './pep-menu.js';
+export * from './pep-separator.js';
+export * from './pep-draggable-item.js';
+export * from './pep-checkbox.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pepperi-addons/ngx-lib-react",
-  "version": "0.0.4",
+  "version": "0.5.0",
   "description": "Thin React wrappers for Pepperi Angular Elements (Web Components) to improve DX in React.",
   "license": "MIT",
   "author": "Pepperi",
@@ -34,8 +34,6 @@
       "types": "./index.d.ts",
       "default": "./index.js"
     },
-    "./elements/register.js": "./elements/register.js",
-    "./elements/register.auto.js": "./elements/register.auto.js",
     "./elements/styles.css": "./elements/styles.css",
     "./elements/main.js": "./elements/main.js",
     "./elements/runtime.js": "./elements/runtime.js",

package/pep-button.js

@@ -30,6 +30,6 @@ export const PepButton = ({ value, styleType, styleStateType, sizeType, disabled
         el.addEventListener('buttonClick', handler);
         return () => el.removeEventListener('buttonClick', handler);
     }, [onButtonClick]);
-    return (_jsx("pep-button", { ref: ref, value: value, "style-type": styleType, "style-state-type": styleStateType, "size-type": sizeType, className: className, ...rest }));
+    return (_jsx("pep-button-element", { ref: ref, value: value, "style-type": styleType, "style-state-type": styleStateType, "size-type": sizeType, className: className, ...rest }));
 };
 //# sourceMappingURL=pep-button.js.map

package/pep-checkbox.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare type PepCheckboxFieldType = 'checkbox' | 'booleanText';
+export declare type PepHorizontalAlignment = 'start' | 'center' | 'end' | string;
+export interface PepCheckboxProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
+    value?: boolean;
+    label?: string;
+    type?: PepCheckboxFieldType;
+    mandatory?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    xAlignment?: PepHorizontalAlignment;
+    rowSpan?: number;
+    additionalValue?: any;
+    visible?: boolean;
+    onValueChange?: (value: boolean) => void;
+    onValidationChange?: (isValid: boolean) => void;
+    className?: string;
+}
+export declare const PepCheckbox: React.FC<PepCheckboxProps>;

package/pep-checkbox.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepCheckbox = ({ keyProp, value, label, type, mandatory, disabled, readonly, xAlignment, rowSpan, additionalValue, visible, onValueChange, onValidationChange, className, ...rest }) => {
+    const ref = useRef(null);
+    // Sync props as properties on the custom element
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof keyProp !== 'undefined')
+            el.key = keyProp;
+        if (typeof value !== 'undefined')
+            el.value = !!value;
+        if (typeof mandatory !== 'undefined')
+            el.mandatory = !!mandatory;
+        if (typeof disabled !== 'undefined')
+            el.disabled = !!disabled;
+        if (typeof readonly !== 'undefined')
+            el.readonly = !!readonly;
+        if (typeof xAlignment !== 'undefined')
+            el.xAlignment = xAlignment;
+        if (typeof rowSpan !== 'undefined')
+            el.rowSpan = rowSpan;
+        if (typeof additionalValue !== 'undefined')
+            el.additionalValue = additionalValue;
+        if (typeof visible !== 'undefined')
+            el.visible = !!visible;
+        if (typeof type !== 'undefined')
+            el.type = type;
+    }, [
+        keyProp,
+        value,
+        mandatory,
+        disabled,
+        readonly,
+        xAlignment,
+        rowSpan,
+        additionalValue,
+        visible,
+        type,
+    ]);
+    // Wire events
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handlers = [];
+        if (onValueChange)
+            handlers.push(['valueChange', (e) => { var _a, _b; return onValueChange(!!((_a = e.detail) !== null && _a !== void 0 ? _a : (_b = e.target) === null || _b === void 0 ? void 0 : _b.value)); }]);
+        if (onValidationChange)
+            handlers.push(['validationChange', (e) => { var _a; return onValidationChange(!!((_a = e.detail) !== null && _a !== void 0 ? _a : e)); }]);
+        handlers.forEach(([n, h]) => el.addEventListener(n, h));
+        return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
+    }, [onValueChange, onValidationChange]);
+    return (_jsx("pep-checkbox-element", { ref: ref, className: className, label: label, type: type, ...rest }));
+};
+//# sourceMappingURL=pep-checkbox.js.map

package/pep-chips.js

@@ -37,6 +37,6 @@ export const PepChips = ({ chips, label, inline, orientation, styleType, multiSe
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onFieldClick, onSelectionChange]);
-    return (_jsx("pep-chips", { ref: ref, className: className, label: label, placeholder: placeholder, ...rest }));
+    return (_jsx("pep-chips-element", { ref: ref, className: className, label: label, placeholder: placeholder, ...rest }));
 };
 //# sourceMappingURL=pep-chips.js.map

package/pep-color.js

@@ -27,6 +27,6 @@ export const PepColor = ({ value, label, disabled, type, showAAComplient, checkA
         el.addEventListener('valueChange', h);
         return () => el.removeEventListener('valueChange', h);
     }, [onValueChange]);
-    return (_jsx("pep-color", { ref: ref, className: className, label: label, ...rest }));
+    return (_jsx("pep-color-element", { ref: ref, className: className, label: label, ...rest }));
 };
 //# sourceMappingURL=pep-color.js.map

package/pep-date.js

@@ -10,6 +10,6 @@ export const PepDate = ({ onValueChange, className, ...rest }) => {
         el.addEventListener('valueChange', h);
         return () => el.removeEventListener('valueChange', h);
     }, [onValueChange]);
-    return _jsx("pep-date", { ref: ref, className: className, ...rest });
+    return _jsx("pep-date-element", { ref: ref, className: className, ...rest });
 };
 //# sourceMappingURL=pep-date.js.map

package/pep-draggable-item.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+declare type PepStyleType = 'weak' | 'regular' | 'strong';
+interface PepMenuItem {
+    [key: string]: any;
+}
+export interface PepDraggableItemProps extends React.HTMLAttributes<HTMLElement> {
+    title?: string;
+    titlePrefix?: string;
+    titleClassNames?: string;
+    data?: any;
+    disabled?: boolean;
+    shadow?: boolean;
+    styleType?: PepStyleType;
+    toggleContent?: boolean;
+    isToggleContentOpen?: boolean;
+    actionsMenu?: PepMenuItem[] | null;
+    menuStyleType?: PepStyleType;
+    onContentToggle?: (open: boolean) => void;
+    onActionsMenuItemClick?: (e: any) => void;
+    className?: string;
+}
+export declare const PepDraggableItem: React.FC<PepDraggableItemProps>;
+export {};

package/pep-draggable-item.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepDraggableItem = ({ title, titlePrefix, titleClassNames, data, disabled, shadow, styleType, toggleContent, isToggleContentOpen, actionsMenu, menuStyleType, onContentToggle, onActionsMenuItemClick, className, ...rest }) => {
+    const ref = useRef(null);
+    // Sync complex/boolean props as properties
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof title !== 'undefined')
+            el.title = title;
+        if (typeof titlePrefix !== 'undefined')
+            el.titlePrefix = titlePrefix;
+        if (typeof titleClassNames !== 'undefined')
+            el.titleClassNames = titleClassNames;
+        if (typeof data !== 'undefined')
+            el.data = data;
+        if (typeof disabled !== 'undefined')
+            el.disabled = !!disabled;
+        if (typeof shadow !== 'undefined')
+            el.shadow = !!shadow;
+        if (typeof styleType !== 'undefined')
+            el.styleType = styleType;
+        if (typeof toggleContent !== 'undefined')
+            el.toggleContent = !!toggleContent;
+        if (typeof isToggleContentOpen !== 'undefined')
+            el.isToggleContentOpen = !!isToggleContentOpen;
+        if (typeof actionsMenu !== 'undefined')
+            el.actionsMenu = actionsMenu;
+        if (typeof menuStyleType !== 'undefined')
+            el.menuStyleType = menuStyleType;
+    }, [
+        title,
+        titlePrefix,
+        titleClassNames,
+        data,
+        disabled,
+        shadow,
+        styleType,
+        toggleContent,
+        isToggleContentOpen,
+        actionsMenu,
+        menuStyleType,
+    ]);
+    // Wire events
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handlers = [];
+        if (onContentToggle)
+            handlers.push(['contentToggle', (e) => { var _a; return onContentToggle(!!((_a = e.detail) !== null && _a !== void 0 ? _a : e)); }]);
+        if (onActionsMenuItemClick)
+            handlers.push(['actionsMenuItemClick', (e) => { var _a; return onActionsMenuItemClick((_a = e.detail) !== null && _a !== void 0 ? _a : e); }]);
+        handlers.forEach(([n, h]) => el.addEventListener(n, h));
+        return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
+    }, [onContentToggle, onActionsMenuItemClick]);
+    return (_jsx("pep-draggable-item-element", { ref: ref, className: className, 
+        // simple string attributes for initial render
+        title: title, "title-prefix": titlePrefix, "title-class-names": titleClassNames, "style-type": styleType, "menu-style-type": menuStyleType, ...rest }));
+};
+//# sourceMappingURL=pep-draggable-item.js.map

package/pep-files-uploader.js

@@ -47,6 +47,6 @@ export const PepFilesUploader = ({ keyProp, src, label, mandatory, disabled, xAl
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onChooseFile, onFileChange, onElementClick]);
-    return (_jsx("pep-files-uploader", { ref: ref, className: className, label: label, ...rest }, keyProp));
+    return (_jsx("pep-files-uploader-element", { ref: ref, className: className, label: label, ...rest }, keyProp));
 };
 //# sourceMappingURL=pep-files-uploader.js.map

package/pep-group-buttons.js

@@ -31,6 +31,6 @@ export const PepGroupButtons = ({ viewType, styleType, sizeType, buttons, button
         el.addEventListener('buttonClick', h);
         return () => el.removeEventListener('buttonClick', h);
     }, [onButtonClick]);
-    return (_jsx("pep-group-buttons", { ref: ref, className: className, "view-type": viewType, "style-type": styleType, "size-type": sizeType, ...rest }));
+    return (_jsx("pep-group-buttons-element", { ref: ref, className: className, "view-type": viewType, "style-type": styleType, "size-type": sizeType, ...rest }));
 };
 //# sourceMappingURL=pep-group-buttons.js.map

package/pep-link.js

@@ -37,6 +37,6 @@ export const PepLink = ({ keyProp, value, label, placeholder, mandatory, disable
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onValueChange, onElementClick, onKeyup, onValidationChange]);
-    return (_jsx("pep-link", { ref: ref, className: className, value: value, label: label, placeholder: placeholder, ...rest }));
+    return (_jsx("pep-link-element", { ref: ref, className: className, value: value, label: label, placeholder: placeholder, ...rest }));
 };
 //# sourceMappingURL=pep-link.js.map

package/pep-menu.js

@@ -45,6 +45,6 @@ export const PepMenu = ({ text, iconName, iconPosition, type, styleType, sizeTyp
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onStateChange, onMenuItemClick, onMenuClick]);
-    return (_jsx("pep-menu", { ref: ref, className: className, text: text, "icon-name": iconName, "icon-position": iconPosition, type: type, "style-type": styleType, "size-type": sizeType, "x-position": xPosition, ...rest }));
+    return (_jsx("pep-menu-element", { ref: ref, className: className, text: text, "icon-name": iconName, "icon-position": iconPosition, type: type, "style-type": styleType, "size-type": sizeType, "x-position": xPosition, ...rest }));
 };
 //# sourceMappingURL=pep-menu.js.map

package/pep-quantity-selector.js

@@ -55,6 +55,6 @@ export const PepQuantitySelector = ({ keyProp, value, label, type, mandatory, di
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onValueChange, onElementClick, onValidationChange]);
-    return (_jsx("pep-quantity-selector", { ref: ref, className: className, label: label, type: type, ...rest }));
+    return (_jsx("pep-quantity-selector-element", { ref: ref, className: className, label: label, type: type, ...rest }));
 };
 //# sourceMappingURL=pep-quantity-selector.js.map

package/pep-select.js

@@ -33,7 +33,7 @@ export const PepSelect = ({ keyProp, value, label, placeholder, type, disabled,
         el.addEventListener('valueChange', handler);
         return () => el.removeEventListener('valueChange', handler);
     }, [onValueChange]);
-    return (_jsx("pep-select", { ref: ref, 
+    return (_jsx("pep-select-element", { ref: ref, 
         // attributes (strings)
         value: value, label: label, placeholder: placeholder, type: type, ...rest }, keyProp));
 };

package/pep-separator.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface PepSeparatorProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
+    label?: string;
+    xAlignment?: 'start' | 'center' | 'end' | string;
+    visible?: boolean;
+}
+export declare const PepSeparator: React.FC<PepSeparatorProps>;

package/pep-separator.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepSeparator = ({ keyProp, label, xAlignment, visible, className, ...rest }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof keyProp !== 'undefined')
+            el.key = keyProp;
+        if (typeof xAlignment !== 'undefined')
+            el.xAlignment = xAlignment;
+        if (typeof visible !== 'undefined')
+            el.visible = !!visible;
+    }, [keyProp, xAlignment, visible]);
+    return (_jsx("pep-separator-element", { ref: ref, className: className, label: label, ...rest }));
+};
+//# sourceMappingURL=pep-separator.js.map

package/pep-slider.js

@@ -35,6 +35,6 @@ export const PepSlider = ({ label, disabled, hint, background, step, minValue, m
         handlers.forEach(([n, h]) => el.addEventListener(n, h));
         return () => handlers.forEach(([n, h]) => el.removeEventListener(n, h));
     }, [onValueChange, onInputChange]);
-    return (_jsx("pep-slider", { ref: ref, className: className, label: label, ...rest }));
+    return (_jsx("pep-slider-element", { ref: ref, className: className, label: label, ...rest }));
 };
 //# sourceMappingURL=pep-slider.js.map

package/pep-textarea.js

@@ -23,6 +23,6 @@ export const PepTextarea = ({ value, label, placeholder, disabled, readonly, row
         el.addEventListener('valueChange', h);
         return () => el.removeEventListener('valueChange', h);
     }, [onValueChange]);
-    return (_jsx("pep-textarea", { ref: ref, className: className, value: value, label: label, placeholder: placeholder, ...rest }));
+    return (_jsx("pep-textarea-element", { ref: ref, className: className, value: value, label: label, placeholder: placeholder, ...rest }));
 };
 //# sourceMappingURL=pep-textarea.js.map

package/pep-textbox.js

@@ -60,6 +60,6 @@ export const PepTextbox = ({ keyProp, value, label, placeholder, type, accessory
         handlers.forEach(([name, h]) => el.addEventListener(name, h));
         return () => handlers.forEach(([name, h]) => el.removeEventListener(name, h));
     }, [onValueChange, onKeyup, onValidationChange]);
-    return (_jsx("pep-textbox", { ref: ref, value: value, label: label, placeholder: placeholder, type: type, ...rest }, keyProp));
+    return (_jsx("pep-textbox-element", { ref: ref, value: value, label: label, placeholder: placeholder, type: type, ...rest }, keyProp));
 };
 //# sourceMappingURL=pep-textbox.js.map