@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/form-engine/components/inputs/time-input/TimeInput.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Input } from '../../../../components';
+const TimeInput = React.forwardRef(({ field, error, ...props }, ref) => (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsx(Input, { type: "time", ...props, ref: ref, id: field.name, disabled: field.disabled, className: `mt-1 block w-full p-2 border ${error ? 'border-red-500' : 'border-gray-300'} rounded-md shadow-sm disabled:text-gray-400 disabled:bg-gray-50` }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] })));
+export default TimeInput;

package/lib/form-engine/components/inputs/time-input/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TimeInput';

package/lib/form-engine/components/inputs/time-input/index.js

@@ -0,0 +1 @@
+export { default } from './TimeInput';

package/lib/form-engine/components/inputs/toggle-switch-input/ToggleSwitchInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputSwitchProps } from '../../../types';
+declare const ToggleSwitchInput: React.ForwardRefExoticComponent<InputSwitchProps & React.RefAttributes<HTMLInputElement>>;
+export default ToggleSwitchInput;

package/lib/form-engine/components/inputs/toggle-switch-input/ToggleSwitchInput.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Switch } from '../../../../components';
+const ToggleSwitchInput = React.forwardRef(({ field, error, value, onChange, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: "flex flex-row  flex-nowrap items-center justify-between", children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsx(Switch, { ...props, checked: value || false, onChange: onChange, disabled: field.disabled, className: `react-switch ${error ? 'border-red-500' : 'border-gray-300'} disabled:text-gray-400 disabled:bg-gray-50`, id: field.name }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] }));
+});
+export default ToggleSwitchInput;

package/lib/form-engine/components/inputs/toggle-switch-input/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ToggleSwitchInput';

package/lib/form-engine/components/inputs/toggle-switch-input/index.js

@@ -0,0 +1 @@
+export { default } from './ToggleSwitchInput';

package/lib/form-engine/components/inputs/upload-field/UploadFieldForm.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputProps } from '../../../types';
+declare const UploadFieldForm: React.ForwardRefExoticComponent<Omit<InputProps & React.InputHTMLAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default UploadFieldForm;

package/lib/form-engine/components/inputs/upload-field/UploadFieldForm.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+import ImageComponent from '../../../../components/ui/ImageComponent';
+import UploadField from '../../../../components/ui/UploadField';
+const UploadFieldForm = forwardRef(({ field, error, ...props }, ref) => {
+    const [preview, setPreview] = useState({
+        src: null,
+        type: null,
+    });
+    useEffect(() => {
+        if (props.value && typeof props.value === 'string' && props.value.length > 0) {
+            const lower = props.value.toLowerCase();
+            const isPdf = lower.endsWith('.pdf');
+            setPreview({
+                src: props.value,
+                type: isPdf ? 'pdf' : 'image',
+            });
+        }
+    }, [props.value]);
+    const handleFileChange = (file) => {
+        if (!file) {
+            setPreview({ src: null, type: null });
+            props.onChange('');
+            return;
+        }
+        const isPdf = file.type === 'application/pdf';
+        const isImage = file.type.startsWith('image/');
+        if (isPdf || isImage) {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                setPreview({
+                    src: reader.result,
+                    type: isPdf ? 'pdf' : 'image',
+                });
+            };
+            // Same action for both PDFs and images
+            reader.readAsDataURL(file);
+        }
+        else {
+            setPreview({ src: null, type: null });
+        }
+        props.onChange(file);
+    };
+    const previewElement = useMemo(() => {
+        if (!preview.src)
+            return _jsx("span", { className: "text-gray-500", children: "No file uploaded." });
+        if (preview.type === 'image') {
+            return (_jsx(ImageComponent, { src: preview.src, alt: field.name, className: "w-24 h-24 object-cover rounded-md" }, `${field.name}-image`));
+        }
+        if (preview.type === 'pdf') {
+            return (_jsx("iframe", { title: `${field.name}-pdf-preview`, src: preview.src, className: "w-full h-64 border-0 rounded-md" }));
+        }
+        return _jsx("span", { className: "text-gray-500", children: "File uploaded." });
+    }, [preview, field.name]);
+    const previewLabel = preview.type === 'pdf' ? 'Uploaded PDF:' : 'Uploaded Image:';
+    return (_jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("label", { htmlFor: field.name, className: "text-sm font-medium text-gray-700", children: field.label }), _jsx(UploadField, { ...props, id: field.name, ref: ref, value: props.value || null, onChange: handleFileChange, className: "w-full p-2 border border-gray-300 rounded-md", hideUploadButton: field.hideUploadButton, allowedFileTypes: field.allowedFileTypes, helperText: field.fileUploadHelperText }), error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: error.message })] }), field.showFileUploadPreview && (_jsxs("div", { className: "mt-4", children: [_jsx("label", { htmlFor: `${field.name}-preview`, className: "text-sm font-medium text-gray-700", children: previewLabel }), _jsx("div", { className: "mt-2 flex flex-col items-center p-4 border border-gray-300 rounded-md", children: previewElement })] }))] }));
+});
+UploadFieldForm.displayName = 'UploadFieldForm';
+export default UploadFieldForm;

package/lib/form-engine/components/inputs/upload-field/index.d.ts

@@ -0,0 +1 @@
+export { default } from './UploadFieldForm';

package/lib/form-engine/components/inputs/upload-field/index.js

@@ -0,0 +1 @@
+export { default } from './UploadFieldForm';

package/lib/form-engine/hooks/useFormPersistence.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook for form persistence functionality
+ * Provides methods to save, restore, and clear form data
+ */
+export declare const useFormPersistence: (formKey?: string) => {
+    saveFormData: (data: Record<string, any>, isDirty?: boolean) => void;
+    restoreFormData: () => Record<string, any> | null;
+    clearPersistedData: () => void;
+    hasPersistedData: () => boolean;
+    getPersistedDataInfo: () => import("..").FormPersistenceData | null;
+};

package/lib/form-engine/hooks/useFormPersistence.js

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+import { useMultiFormEngineDrawer } from '../../context/MultiFormEngineDrawerProvider';
+/**
+ * Hook for form persistence functionality
+ * Provides methods to save, restore, and clear form data
+ */
+export const useFormPersistence = (formKey) => {
+    const { getFormData, setFormData, clearFormData, hasFormData } = useMultiFormEngineDrawer();
+    const saveFormData = useCallback((data, isDirty = true) => {
+        if (!formKey)
+            return;
+        setFormData(formKey, {
+            values: data,
+            lastUpdated: Date.now(),
+            isDirty,
+        });
+    }, [formKey, setFormData]);
+    const restoreFormData = useCallback(() => {
+        if (!formKey)
+            return null;
+        const persistedData = getFormData(formKey);
+        return persistedData?.values || null;
+    }, [formKey, getFormData]);
+    const clearPersistedData = useCallback(() => {
+        if (!formKey)
+            return;
+        clearFormData(formKey);
+    }, [formKey, clearFormData]);
+    const hasPersistedData = useCallback(() => {
+        if (!formKey)
+            return false;
+        return hasFormData(formKey);
+    }, [formKey, hasFormData]);
+    const getPersistedDataInfo = useCallback(() => {
+        if (!formKey)
+            return null;
+        return getFormData(formKey);
+    }, [formKey, getFormData]);
+    return {
+        saveFormData,
+        restoreFormData,
+        clearPersistedData,
+        hasPersistedData,
+        getPersistedDataInfo,
+    };
+};

package/lib/form-engine/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './types';
+export { default as FormEngine } from './FormEngine';
+export { default as FormEngineForm } from './Form';
+export { useFormPersistence } from './hooks/useFormPersistence';

package/lib/form-engine/index.js

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './types';
+export { default as FormEngine } from './FormEngine';
+export { default as FormEngineForm } from './Form';
+export { useFormPersistence } from './hooks/useFormPersistence';

package/lib/form-engine/registry/RegisterComponents.d.ts

@@ -0,0 +1 @@
+export declare const setupInputRegistry: () => void;

package/lib/form-engine/registry/RegisterComponents.js

@@ -0,0 +1,35 @@
+import { PhoneInput } from '../../components';
+import CardExpiryInput from '../components/inputs/card-expiry-input/CardExpiryInput';
+import CheckboxInput from '../components/inputs/checkbox-input/CheckboxInput';
+import CreditCardInput from '../components/inputs/credit-card-input/CreditCardInput';
+import DateInput from '../components/inputs/date-input/DateInput';
+import EmailInput from '../components/inputs/email-input/EmailInput';
+import LabelInput from '../components/inputs/label-input/LabelInput';
+import MultiSelectInputComponent from '../components/inputs/multi-select-input/MultiSelectInput';
+import NumberInput from '../components/inputs/number-input/NumberInput';
+import PasswordInput from '../components/inputs/password-input/PasswordInput';
+import RadioInput from '../components/inputs/radio-button/RadioInput';
+import SelectInput from '../components/inputs/select/SelectInput';
+import TextareaInputFW from '../components/inputs/textarea-input/TextareaInput';
+import TimeInput from '../components/inputs/time-input/TimeInput';
+import ToggleSwitchInput from '../components/inputs/toggle-switch-input/ToggleSwitchInput';
+import UploadFieldForm from '../components/inputs/upload-field/UploadFieldForm';
+import { registerInput } from './Registry';
+export const setupInputRegistry = () => {
+    registerInput('card-expiry-input', CardExpiryInput);
+    registerInput('checkbox', CheckboxInput);
+    registerInput('credit-card', CreditCardInput);
+    registerInput('date', DateInput);
+    registerInput('email', EmailInput);
+    registerInput('file', UploadFieldForm);
+    registerInput('multi-select', MultiSelectInputComponent);
+    registerInput('number', NumberInput);
+    registerInput('password', PasswordInput);
+    registerInput('radio', RadioInput);
+    registerInput('select', SelectInput);
+    registerInput('switch', ToggleSwitchInput);
+    registerInput('tel', PhoneInput);
+    registerInput('text', LabelInput);
+    registerInput('textarea', TextareaInputFW);
+    registerInput('time', TimeInput);
+};

package/lib/form-engine/registry/Registry.d.ts

@@ -0,0 +1,5 @@
+import type React from 'react';
+import type { BaseInputProps } from '../types';
+export type InputComponent = React.ForwardRefExoticComponent<BaseInputProps & React.RefAttributes<any>>;
+export declare const registerInput: (type: string, component: InputComponent) => InputComponent;
+export declare const getInputComponent: (type: string) => InputComponent | undefined;

package/lib/form-engine/registry/Registry.js

@@ -0,0 +1,13 @@
+const InputRegistry = {};
+// Register a new input component
+export const registerInput = (type, component) => {
+    return (InputRegistry[type] = component);
+};
+// Retrieve an input component from the registry
+export const getInputComponent = (type) => {
+    const component = InputRegistry[type];
+    if (!component) {
+        console.warn(`No input component found for type: ${type}`);
+    }
+    return component;
+};

package/lib/form-engine/registry/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Registry';
+export * from './RegisterComponents';

package/lib/form-engine/registry/index.js

@@ -0,0 +1,2 @@
+export * from './Registry';
+export * from './RegisterComponents';

package/lib/form-engine/types/index.d.ts

@@ -0,0 +1,311 @@
+import type { Control, FieldErrors, FieldValues, RegisterOptions } from 'react-hook-form';
+import type React from 'react';
+export interface ActionProps {
+    field: string;
+    options?: SelectOption[] | string[];
+    value?: any;
+    label?: string;
+    hideField?: boolean;
+    fieldInnitialData?: Field;
+    validation?: ValidationRule;
+}
+export interface SelectOption {
+    label: string;
+    value: string;
+    id?: number;
+}
+export interface BaseInputProps {
+    field: Field;
+    error?: {
+        message?: string;
+    };
+    value?: any;
+    options?: Array<SelectOption | string>;
+    onChange: (value: any) => void;
+    onBlur?: () => void;
+    name: string;
+    ref?: React.Ref<any>;
+    control?: Control<any>;
+}
+/**
+ * Represents the state of a form, including validation errors and optional message
+ */
+export type FormState = {
+    errors?: {
+        name?: string[];
+        email?: string[];
+        password?: string[];
+    };
+    message?: string;
+} | undefined;
+/**
+ * Defines the structure of control fields used in authentication forms
+ */
+export type ControlFields = {
+    username: string;
+    password: string;
+    emailAddress?: string;
+    profile?: string;
+    role?: string;
+};
+/**
+ * Reference object exposing form control methods
+ */
+export interface FormRef {
+    reset: () => void;
+    setValue?: (name: string, value: any) => void;
+}
+/**
+ * Props for the FormEngine component which handles form rendering and submission
+ */
+export interface FormEngineProps<T extends Record<string, any>> {
+    /** Array of field definitions that make up the form */
+    fields: Field[];
+    /** Callback function called when the form is submitted */
+    onSubmit: (data: any) => Promise<void>;
+    /** Layout direction of the form */
+    layout?: 'vertical' | 'horizontal';
+    /** Initial values for form fields */
+    initialValues?: any;
+    /** Custom tailwind class for the Form Engine */
+    className?: string;
+    /** Custom tailwind class for the submit button */
+    submitButtonClass?: string;
+    /** Flag to disable automatic form submission trigger */
+    isNotTrigger?: boolean;
+    /** Flag to show or hide the cancel button */
+    showCancelButton?: boolean;
+    /** Flag dynamic display submit button text */
+    submitButtonText?: string;
+    /** Show submitting indicator text */
+    showSubmittingText?: boolean;
+    /** Callback function called when form cancellation is requested */
+    onCancel: () => void;
+    /** Callback function called whenever a field value changes */
+    getFieldValues?: (fields: T) => void;
+    /** Optional persistence key for form data */
+    persistenceKey?: string;
+    /**
+     * Optional ref to expose form control methods.
+     * When not provided, the form will automatically reset after successful submission.
+     * When provided, the parent component controls form reset behavior.
+     */
+    formRef?: React.MutableRefObject<FormRef | undefined>;
+}
+/**
+ * Defines validation rules that can be applied to form fields
+ */
+export type ValidationRule = {
+    /** Required field validation with optional custom message */
+    required?: string | {
+        value: boolean;
+        message: string;
+    };
+    /** Minimum value/length validation with message */
+    min?: {
+        value: string | number;
+        message: string;
+    };
+    /** Pattern validation with message */
+    pattern?: {
+        value: RegExp;
+        message: string;
+    };
+    /** Custom validation function */
+    validate?: (value: any) => boolean | string;
+    /** Dependency validation - applies validation based on another field's value */
+    dependency?: DependencyValidation | DependencyValidation[];
+};
+/**
+ * Defines a dependency validation rule
+ */
+export interface DependencyValidation {
+    /** The field this validation depends on */
+    field: string;
+    /** Condition function that determines if validation should be applied */
+    condition: (value: any) => boolean;
+    /** Validation rules to apply when condition is true */
+    validationToApply: Omit<ValidationRule, 'dependency'>;
+}
+/**
+ * Available field types supported by the form engine
+ */
+export type FieldType = 'card-expiry-input' | 'checkbox' | 'credit-card' | 'date' | 'email' | 'file' | 'multi-select' | 'number' | 'password' | 'radio' | 'searchable-multi-select' | 'select' | 'switch' | 'tel' | 'text' | 'textarea' | 'time';
+/**
+ * Defines the structure of a form field
+ */
+export interface Field {
+    /** Field identifier */
+    name: string;
+    /** Display label for the field */
+    label: string;
+    /** Type of input field */
+    type: FieldType;
+    /** Placeholder text for the field */
+    placeholder?: string;
+    /** Number of grids a field will span */
+    gridSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    /** Whether the field is checked (for checkbox/switch types) */
+    checked?: boolean;
+    /** To hide or show the upload button when the field is type file */
+    hideUploadButton?: boolean;
+    /** To validate file types say .png, .pdf etc */
+    allowedFileTypes?: string[];
+    /** To hide or show a preview of uploaded image */
+    showFileUploadPreview?: boolean;
+    /** To display file upload helper text */
+    fileUploadHelperText?: string;
+    /** Default country for phone input */
+    defaultCountry?: string;
+    /** Disables the field */
+    disabled?: boolean;
+    /** Validation rules for the field */
+    validation?: ValidationRule;
+    /** Options for select, multi-select, and radio fields */
+    options?: Array<SelectOption | string>;
+    /** callback for searchable select, multi-select */
+    onSearch?: (value: string) => void;
+    /** callback for onChange event */
+    onChange?: (value: string) => void;
+    isHidden?: boolean;
+}
+export interface DependentFieldUpdate {
+    field: string;
+    dependencies?: string[];
+    action: (value: any, isInitialLoad?: boolean) => Promise<ActionProps> | ActionProps;
+}
+/**
+ * Props for the Form component wrapper
+ */
+export interface FormProps {
+    /** Array of field definitions */
+    fieldDefinitions: Field[];
+    /** Form submission handler */
+    onFormSubmit: (data: any) => void;
+    /** Initial form values */
+    initialValues?: any;
+    /** Form layout direction */
+    layout?: 'vertical' | 'horizontal';
+    /** Flag to disable automatic form submission */
+    isNotTrigger?: boolean;
+    /** Flag to hide or show the cancel button */
+    showCancelButton?: boolean;
+    /** Form cancellation handler */
+    onFormCancel: () => void;
+}
+/**
+ * Props for the FieldWrapper component that provides layout and error handling
+ */
+export interface FieldWrapperProps {
+    /** Field definition */
+    field: Field;
+    /** React Hook Form control object */
+    control: Control;
+    /** Form validation errors */
+    errors: FieldErrors;
+    /** Layout direction */
+    layout: 'vertical' | 'horizontal';
+    /** All field values for dependency tracking */
+    allFieldValues?: Record<string, any>;
+    /** Field update callbacks */
+    onFieldUpdate?: Record<string, DependentFieldUpdate[]>;
+    /** Update field options callback */
+    updateFieldOptions?: (field: string, options: Array<SelectOption | string>) => void;
+    /** Update field label callback */
+    updateFieldLabel?: (fieldName: string, newLabelName: string) => void;
+    /** Hide field callback */
+    hideInputField?: (fieldName: string, hidden: boolean) => void;
+    /** Add new field callback */
+    addField?: (field: Field) => void;
+    /** Set value function from useForm */
+    setValue?: (name: string, value: any) => void;
+    /** Clear errors function from useForm */
+    clearErrors?: (field: string) => void;
+    /** Get values function from useForm */
+    getValues?: () => Record<string, any>;
+}
+/**
+ * Props for basic input components
+ */
+export interface InputProps extends BaseInputProps {
+    /** Field configuration */
+    field: Field;
+    /** Validation error if any */
+    error?: {
+        message: string;
+    };
+}
+/**
+ * Props for input components with options (select, radio, etc.)
+ */
+export interface InputOptionsProps {
+    /** Field configuration including validation rules */
+    field: {
+        validation: Omit<RegisterOptions<FieldValues, string>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'> | undefined;
+        name: string;
+        label: string;
+        options: SelectOption[] | string[];
+        disabled?: boolean;
+    };
+    /** Validation error if any */
+    error?: {
+        message: string;
+    };
+    /** React Hook Form control object */
+    control: Control<any>;
+}
+/**
+ * Props for select input components
+ */
+export interface InputSelectProps extends BaseInputProps {
+    /** Validation error if any */
+    error?: {
+        message: string;
+    };
+}
+/**
+ * Props for switch/toggle input components
+ */
+export interface InputSwitchProps {
+    /** Field configuration */
+    field: any;
+    /** Validation error if any */
+    error?: {
+        message: string;
+    };
+    value?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+/**
+ * Option structure for the searchable multi-select
+ */
+export interface SearchableMultiSelectOption {
+    value: string;
+    label: string;
+}
+/**
+ * Form persistence context data structure
+ */
+export interface FormPersistenceData {
+    /** Form field values */
+    values: Record<string, any>;
+    /** Timestamp when the data was last updated */
+    lastUpdated: number;
+    /** Whether the form is dirty (has changes) */
+    isDirty: boolean;
+}
+/**
+ * Form persistence context type
+ */
+export interface FormPersistenceContextType {
+    /** Get persisted form data by key */
+    getFormData: (key: string) => FormPersistenceData | null;
+    /** Set persisted form data by key */
+    setFormData: (key: string, data: Partial<FormPersistenceData>) => void;
+    /** Clear persisted form data by key */
+    clearFormData: (key: string) => void;
+    /** Clear all persisted form data */
+    clearAllFormData: () => void;
+    /** Check if form has persisted data */
+    hasFormData: (key: string) => boolean;
+}

package/lib/form-engine/types/index.js

@@ -0,0 +1 @@
+export {};

package/lib/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './validations';

package/lib/helpers/index.js

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './validations';

package/lib/helpers/utils.d.ts

@@ -0,0 +1,37 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Formats a number as currency using en-US locale standards.
+ *
+ * @param {number} price - The numeric value to format as currency
+ * @param {string} [currency="ZAR"] - ISO 4217 currency code (default: "ZAR")
+ * @param {number} [minimumFractionDigits=2] - Minimum fraction digits (default: 2)
+ * @param {number} [maximumFractionDigits] - Optional maximum fraction digits
+ * @param {string} [displaySymbol] - Optional custom symbol to display instead of ISO code
+ * @returns {string} Formatted currency string
+ *
+ * @example
+ * // Basic usage with ZAR (South African Rand)
+ * formatPrice(1234.56); // Returns "ZAR 1,234.56"
+ *
+ * @example
+ * // USD with 2 decimal places
+ * formatPrice(1234.56, "USD"); // Returns "$1,234.56"
+ *
+ * @example
+ * // Euro with standard formatting
+ * formatPrice(1234.56, "EUR"); // Returns "€1,234.56"
+ *
+ * @example
+ * // Custom display symbol for ZAR
+ * formatPrice(1234.56, "ZAR", 2, undefined, "R"); // Returns "R 1,234.56"
+ *
+ * @example
+ * // Custom decimal places (clamping)
+ * formatPrice(1234.5678, "GBP", 2, 3); // Returns "£1,234.568"
+ *
+ * @example
+ * // Fallback behavior with invalid currency
+ * formatPrice(1234.56, "XYZ"); // Returns "XYZ 1,234.56"
+ */
+export declare const formatPrice: (price: number, currency?: string, minimumFractionDigits?: number, maximumFractionDigits?: number, displaySymbol?: string) => string;