@pepperi-addons/ngx-composite-lib-react 0.0.1 → 0.0.3

package/components/PepGroupButtonsSettings.d.ts

@@ -0,0 +1,14 @@
+/// <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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,14 @@
+/// <reference types="react" resolution-mode="require"/>
+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): JSX.Element;

package/components/PepGroupButtonsSettingsReact.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { PepGroupButtons } from '@pepperi-addons/ngx-lib-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 base group-buttons element so the shim can render real visuals
+    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]);
+    return (_jsxs("div", { children: [subHeader ? _jsx("div", { className: "pep-subheader", children: subHeader }) : null, _jsx(PepGroupButtons, { ...{ groupType: 'custom', btnsArray: computedItems, btnKey }, onBtnKeyChange: onBtnKeyChange }), !hideReset ? (_jsx("button", { type: "button", onClick: onReset, children: "Reset" })) : null] }));
+}
+//# sourceMappingURL=PepGroupButtonsSettingsReact.js.map