@pepperi-addons/ngx-lib-react 0.0.2 → 0.0.3

package/pep-menu.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+declare type PepStyleType = 'weak' | 'regular' | 'strong';
+declare type PepSizeType = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type PepMenuType = 'action' | 'select' | 'action-select';
+export interface PepMenuItem {
+    [key: string]: any;
+}
+export interface PepMenuProps extends React.HTMLAttributes<HTMLElement> {
+    text?: string;
+    iconName?: string;
+    iconPosition?: 'before' | 'after';
+    type?: PepMenuType;
+    styleType?: PepStyleType;
+    sizeType?: PepSizeType;
+    classNames?: string;
+    xPosition?: 'before' | 'after';
+    hideOnEmptyItems?: boolean;
+    items?: PepMenuItem[];
+    selectedItem?: PepMenuItem | null;
+    disabled?: boolean;
+    onStateChange?: (e: any) => void;
+    onMenuItemClick?: (e: any) => void;
+    onMenuClick?: () => void;
+}
+export declare const PepMenu: React.FC<PepMenuProps>;
+export {};

package/pep-menu.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepMenu = ({ text, iconName, iconPosition, type, styleType, sizeType, classNames, xPosition, hideOnEmptyItems, items, selectedItem, disabled, onStateChange, onMenuItemClick, onMenuClick, className, ...rest }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof classNames !== 'undefined')
+            el.classNames = classNames;
+        if (typeof hideOnEmptyItems !== 'undefined')
+            el.hideOnEmptyItems = !!hideOnEmptyItems;
+        if (typeof items !== 'undefined')
+            el.items = items;
+        if (typeof selectedItem !== 'undefined')
+            el.selectedItem = selectedItem;
+        if (typeof disabled !== 'undefined')
+            el.disabled = !!disabled;
+        if (typeof styleType !== 'undefined')
+            el.styleType = styleType;
+        if (typeof sizeType !== 'undefined')
+            el.sizeType = sizeType;
+        if (typeof type !== 'undefined')
+            el.type = type;
+        if (typeof iconName !== 'undefined')
+            el.iconName = iconName;
+        if (typeof iconPosition !== 'undefined')
+            el.iconPosition = iconPosition;
+        if (typeof xPosition !== 'undefined')
+            el.xPosition = xPosition;
+        if (typeof text !== 'undefined')
+            el.text = text;
+    }, [classNames, hideOnEmptyItems, items, selectedItem, disabled, styleType, sizeType, type, iconName, iconPosition, xPosition, text]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handlers = [];
+        if (onStateChange)
+            handlers.push(['stateChange', (e) => { var _a; return onStateChange((_a = e.detail) !== null && _a !== void 0 ? _a : e); }]);
+        if (onMenuItemClick)
+            handlers.push(['menuItemClick', (e) => { var _a; return onMenuItemClick((_a = e.detail) !== null && _a !== void 0 ? _a : e); }]);
+        if (onMenuClick)
+            handlers.push(['menuClick', () => onMenuClick()]);
+        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 }));
+};
+//# sourceMappingURL=pep-menu.js.map

package/pep-quantity-selector.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+declare type PepStyleType = 'weak' | 'regular' | 'strong';
+export declare type PepQuantitySelectorFieldType = 'qs' | 'package';
+export interface IPepFieldClickEvent {
+    key?: string;
+    value?: any;
+    controlType?: string;
+    eventWhich?: number;
+    otherData?: any;
+}
+export interface PepQuantitySelectorProps extends React.HTMLAttributes<HTMLElement> {
+    keyProp?: string;
+    value?: string;
+    label?: string;
+    type?: PepQuantitySelectorFieldType;
+    mandatory?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    textColor?: string;
+    xAlignment?: any;
+    rowSpan?: number;
+    allowDecimal?: boolean;
+    minFractionDigits?: number;
+    maxFractionDigits?: number;
+    additionalValue?: string;
+    notificationInfo?: any;
+    isInFocus?: boolean;
+    styleType?: PepStyleType;
+    onValueChange?: (value: string) => void;
+    onElementClick?: (e: IPepFieldClickEvent) => void;
+    onValidationChange?: (isValid: boolean) => void;
+}
+export declare const PepQuantitySelector: React.FC<PepQuantitySelectorProps>;
+export {};

package/pep-quantity-selector.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepQuantitySelector = ({ keyProp, value, label, type, mandatory, disabled, readonly, textColor, xAlignment, rowSpan, allowDecimal, minFractionDigits, maxFractionDigits, additionalValue, notificationInfo, isInFocus, styleType, onValueChange, onElementClick, onValidationChange, className, ...rest }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof keyProp !== 'undefined')
+            el.key = keyProp;
+        if (typeof mandatory !== 'undefined')
+            el.mandatory = !!mandatory;
+        if (typeof disabled !== 'undefined')
+            el.disabled = !!disabled;
+        if (typeof readonly !== 'undefined')
+            el.readonly = !!readonly;
+        if (typeof textColor !== 'undefined')
+            el.textColor = textColor;
+        if (typeof xAlignment !== 'undefined')
+            el.xAlignment = xAlignment;
+        if (typeof rowSpan !== 'undefined')
+            el.rowSpan = rowSpan;
+        if (typeof allowDecimal !== 'undefined')
+            el.allowDecimal = !!allowDecimal;
+        if (typeof minFractionDigits !== 'undefined')
+            el.minFractionDigits = minFractionDigits;
+        if (typeof maxFractionDigits !== 'undefined')
+            el.maxFractionDigits = maxFractionDigits;
+        if (typeof additionalValue !== 'undefined')
+            el.additionalValue = additionalValue;
+        if (typeof notificationInfo !== 'undefined')
+            el.notificationInfo = notificationInfo;
+        if (typeof isInFocus !== 'undefined')
+            el.isInFocus = !!isInFocus;
+        if (typeof styleType !== 'undefined')
+            el.styleType = styleType;
+        if (typeof type !== 'undefined')
+            el.type = type;
+        if (typeof value !== 'undefined')
+            el.value = value;
+        if (typeof label !== 'undefined')
+            el.label = label;
+    }, [keyProp, mandatory, disabled, readonly, textColor, xAlignment, rowSpan, allowDecimal, minFractionDigits, maxFractionDigits, additionalValue, notificationInfo, isInFocus, styleType, type, value, label]);
+    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 (onElementClick)
+            handlers.push(['elementClick', (e) => { var _a; return onElementClick((_a = e.detail) !== null && _a !== void 0 ? _a : e); }]);
+        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, onElementClick, onValidationChange]);
+    return (_jsx("pep-quantity-selector", { ref: ref, className: className, label: label, type: type, ...rest }));
+};
+//# sourceMappingURL=pep-quantity-selector.js.map

package/pep-slider.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface PepSliderProps extends React.HTMLAttributes<HTMLElement> {
+    label?: string;
+    disabled?: boolean;
+    hint?: string;
+    background?: string;
+    step?: number;
+    minValue?: number;
+    maxValue?: number;
+    value?: number;
+    onValueChange?: (value: number) => void;
+    onInputChange?: (value: number) => void;
+}
+export declare const PepSlider: React.FC<PepSliderProps>;

package/pep-slider.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepSlider = ({ label, disabled, hint, background, step, minValue, maxValue, value, onValueChange, onInputChange, className, ...rest }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof disabled !== 'undefined')
+            el.disabled = !!disabled;
+        if (typeof background !== 'undefined')
+            el.background = background;
+        if (typeof step !== 'undefined')
+            el.step = step;
+        if (typeof minValue !== 'undefined')
+            el.minValue = minValue;
+        if (typeof maxValue !== 'undefined')
+            el.maxValue = maxValue;
+        if (typeof hint !== 'undefined')
+            el.hint = hint;
+        if (typeof label !== 'undefined')
+            el.label = label;
+        if (typeof value !== 'undefined')
+            el.value = value;
+    }, [disabled, background, step, minValue, maxValue, hint, label, value]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const handlers = [];
+        if (onValueChange)
+            handlers.push(['valueChange', (e) => { var _a, _b; return onValueChange(Number((_a = e.detail) !== null && _a !== void 0 ? _a : (_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.value)); }]);
+        if (onInputChange)
+            handlers.push(['inputChange', (e) => { var _a, _b; return onInputChange(Number((_a = e.detail) !== null && _a !== void 0 ? _a : (_b = e === null || e === void 0 ? void 0 : e.target) === null || _b === void 0 ? void 0 : _b.value)); }]);
+        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 }));
+};
+//# sourceMappingURL=pep-slider.js.map

package/pep-textarea.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface PepTextareaProps extends React.HTMLAttributes<HTMLElement> {
+    value?: string;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    rows?: number;
+    onValueChange?: (value: any) => void;
+}
+export declare const PepTextarea: React.FC<PepTextareaProps>;

package/pep-textarea.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export const PepTextarea = ({ value, label, placeholder, disabled, readonly, rows, onValueChange, className, ...rest }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (typeof disabled !== 'undefined')
+            el.disabled = !!disabled;
+        if (typeof readonly !== 'undefined')
+            el.readonly = !!readonly;
+        if (typeof rows !== 'undefined')
+            el.rows = rows;
+        if (typeof value !== 'undefined')
+            el.value = value;
+    }, [disabled, readonly, rows, value]);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || !onValueChange)
+            return;
+        const h = (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); };
+        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 }));
+};
+//# sourceMappingURL=pep-textarea.js.map