@antscorp/antsomi-ui 2.0.59 → 2.0.61-staging.1

package/es/components/atoms/SelectAssociatedTag/SelectAssociatedTag.d.ts

@@ -0,0 +1,5 @@
+import type { SelectAssociatedTagProps } from './types';
+export declare const SelectAssociatedTag: {
+    (props: SelectAssociatedTagProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: SelectAssociatedTagProps;
+};

package/es/components/atoms/SelectAssociatedTag/SelectAssociatedTag.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Components
+import { StyledSpace } from './styled';
+import { Divider } from 'antd';
+import { Select } from '../../molecules';
+import SelectTag from './SelectTag';
+// Constants
+import { defaultProps } from './constants';
+export const SelectAssociatedTag = (props) => {
+    // Props
+    const { tagConfigs, style, status, selected, disabled, options, children, onSelect } = props;
+    const { tag, value } = selected || {};
+    return (_jsxs(StyledSpace, { className: `select-associated-tag ${status}`, style: style, children: [_jsx(SelectTag, { ...tagConfigs, selectedTag: tag }), _jsx(Divider, { type: "vertical", style: { margin: '0px 1px 0px 6px' }, className: "antsomi-divider-between-select" }), children ?? (_jsx(Select, { style: { width: '100%', height: '100%' }, value: value, disabled: disabled, options: options, onChange: onSelect }))] }));
+};
+SelectAssociatedTag.defaultProps = defaultProps;

package/es/components/atoms/SelectAssociatedTag/SelectTag.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TagConfigProps } from './types';
+declare const _default: import("react").MemoExoticComponent<(props: TagConfigProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/es/components/atoms/SelectAssociatedTag/SelectTag.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
+import { memo, useMemo, useState } from 'react';
+import { keyBy } from 'lodash';
+// Components
+import { Flex, Typography } from 'antd';
+import { Popover } from '../Popover';
+import { SelectedTag } from './styled';
+const SelectTag = (props) => {
+    // Props
+    const { selectedTag, disabled, title, options, onSelect } = props;
+    // State
+    const [open, setOpen] = useState(false);
+    // Memoized
+    const mapOptsMemo = useMemo(() => keyBy(options, 'value'), [options]);
+    const selectedItem = useMemo(() => mapOptsMemo?.[selectedTag] || {}, [selectedTag, mapOptsMemo]);
+    const handleOpenChange = () => {
+        setOpen(!open);
+    };
+    const handleClick = (item) => {
+        setOpen(false);
+        onSelect(item);
+    };
+    return (_jsx(Popover, { open: open && !disabled, title: _jsx(Typography.Text, { style: { fontWeight: '400', maxWidth: 130 }, ellipsis: { tooltip: title }, children: title }), content: _jsx(Flex, { wrap: "wrap", gap: 6, style: { padding: '10px 0px' }, children: options?.map(item => (_jsx(SelectedTag, { "$color": item.color, "$background": item.background, ellipsis: { tooltip: item.label }, onClick: () => handleClick(item), children: item.label }, item.value))) }), placement: "bottomLeft", trigger: "click", overlayInnerStyle: { padding: 10, maxWidth: 150 }, onOpenChange: handleOpenChange, children: _jsx(SelectedTag, { "$color": selectedItem?.color, "$background": selectedItem?.background, ellipsis: { tooltip: selectedItem?.label }, children: selectedItem?.label }) }));
+};
+export default memo(SelectTag);

package/es/components/atoms/SelectAssociatedTag/constants.d.ts

@@ -0,0 +1,11 @@
+import type { SelectAssociatedTagProps, TagItem } from './types';
+export declare const DEFAULT_TAGS: {
+    readonly RAW: "RAW";
+    readonly md5: "md5";
+    readonly sha_256: "sha_256";
+    readonly MD5: "MD5";
+    readonly SHA_256: "SHA_256";
+};
+export declare const DEFAULT_TAGS_OPTS: Record<string, TagItem>;
+export declare const DEFAULT_TAGS_LIST: TagItem[];
+export declare const defaultProps: SelectAssociatedTagProps;

package/es/components/atoms/SelectAssociatedTag/constants.js

@@ -0,0 +1,42 @@
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Locales
+import { translations, translate } from '@antscorp/antsomi-locales';
+export const DEFAULT_TAGS = {
+    RAW: 'RAW',
+    md5: 'md5',
+    sha_256: 'sha_256',
+    MD5: 'MD5',
+    SHA_256: 'SHA_256',
+};
+export const DEFAULT_TAGS_OPTS = {
+    RAW: { label: 'RAW', value: DEFAULT_TAGS.RAW, color: globalToken?.bw0, background: '#4CB4C9' },
+    md5: { label: 'md5', value: DEFAULT_TAGS.md5, color: globalToken?.bw0, background: '#3B8FDE' },
+    sha_256: {
+        label: 'sha-256',
+        value: DEFAULT_TAGS.sha_256,
+        color: globalToken?.bw0,
+        background: '#12B800',
+    },
+    MD5: { label: 'MD5', value: DEFAULT_TAGS.MD5, color: globalToken?.bw0, background: '#3B8FDE' },
+    SHA_265: {
+        label: 'SHA-256',
+        value: DEFAULT_TAGS.SHA_256,
+        color: globalToken?.bw0,
+        background: '#12B800',
+    },
+};
+export const DEFAULT_TAGS_LIST = Object.values(DEFAULT_TAGS_OPTS);
+export const defaultProps = {
+    tagConfigs: {
+        options: DEFAULT_TAGS_LIST,
+        title: translate(translations._INFO_STORY_WAIT_FOR_HASH, 'Hash Method'),
+        onSelect: () => { },
+    },
+    selected: {
+        tag: DEFAULT_TAGS.RAW,
+        value: DEFAULT_TAGS.SHA_256,
+    },
+    options: DEFAULT_TAGS_LIST,
+    onSelect: () => { },
+};

package/es/components/atoms/SelectAssociatedTag/index.d.ts

@@ -0,0 +1,3 @@
+export { SelectAssociatedTag } from './SelectAssociatedTag';
+export type { SelectAssociatedTagProps } from './types';
+export * from './constants';

package/es/components/atoms/SelectAssociatedTag/index.js

@@ -0,0 +1,2 @@
+export { SelectAssociatedTag } from './SelectAssociatedTag';
+export * from './constants';

package/es/components/atoms/SelectAssociatedTag/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { TagItem } from './types';
+export declare const StyledSpace: import("styled-components").StyledComponent<import("react").FC<import("antd/es/space/Compact").SpaceCompactProps>, any, {}, never>;
+export declare const SelectedTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    $background: TagItem['background'];
+    $color: TagItem['color'];
+}, never>;

package/es/components/atoms/SelectAssociatedTag/styled.js

@@ -0,0 +1,60 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Space } from '../Space';
+import { Typography } from 'antd';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const StyledSpace = styled(Space.Compact) `
+  width: 100%;
+  height: 30px;
+  padding-left: 5px;
+  align-items: center;
+
+  border-bottom: 1px solid ${globalToken?.blue1};
+
+  &.select-associated-tag {
+    &.warning {
+      border-bottom-color: ${globalToken?.colorWarning};
+    }
+
+    &.error {
+      border-bottom-color: ${globalToken?.colorError};
+    }
+
+    &.success {
+      border-bottom-color: ${globalToken?.colorSuccess};
+    }
+  }
+
+  > div:last-child {
+    width: 100%;
+  }
+
+  .antsomi-divider.antsomi-divider-vertical {
+    height: 20px;
+  }
+
+  .antsomi-select-selector {
+    border: none !important;
+  }
+`;
+export const SelectedTag = styled(Typography.Text) `
+  border-radius: 3px;
+  height: 16px;
+  line-height: 16px;
+  padding-left: 3px;
+  padding-right: 3px;
+  flex-shrink: 0;
+  cursor: pointer;
+
+  background: ${props => props.$background};
+
+  &.antsomi-typography {
+    color: ${props => props.$color};
+
+    &.antsomi-typography-ellipsis {
+      max-width: 70px;
+    }
+  }
+`;

package/es/components/atoms/SelectAssociatedTag/types.d.ts

@@ -0,0 +1,76 @@
+import { Dictionary } from 'lodash';
+import { CSSProperties, ReactNode } from 'react';
+export type TagItem = {
+    label: string;
+    value: string;
+    background: CSSProperties['background'];
+    color: CSSProperties['color'];
+};
+export type Status = 'error' | 'warning' | 'success';
+export interface TagConfigProps {
+    selectedTag: TagItem['value'];
+    title?: string;
+    disabled?: boolean;
+    options: TagItem[];
+    onSelect: (newItem: TagItem) => void;
+}
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+/**
+ * Properties for the SelectAssociatedTag component.
+ */
+export interface SelectAssociatedTagProps {
+    /**
+     * Configuration properties for tag options, excluding the selected tag.
+     * @type {Omit<TagConfigProps, 'selectedTag'>}
+     */
+    tagConfigs: Omit<TagConfigProps, 'selectedTag'>;
+    /**
+     * The currently selected tag and its associated value.
+     * @type {{ tag: string; value: string; }}
+     */
+    selected: {
+        /**
+         * The identifier for the selected tag.
+         * @type {string}
+         */
+        tag: string;
+        /**
+         * The value associated with the selected tag.
+         * @type {Dictionary<SelectOption>}
+         */
+        value: Dictionary<SelectOption>;
+    };
+    /**
+     * Whether the SelectAssociatedTag is disabled.
+     * @type {boolean}
+     */
+    disabled?: boolean;
+    /**
+     * The status of the SelectAssociatedTag, if any.
+     * @type {'error' | 'warning' | 'success' }
+     */
+    status?: Status;
+    /**
+     * A list of selectable options.
+     * @type {SelectOption[]}
+     */
+    options: SelectOption[];
+    /**
+     * The style object for the SelectAssociatedTag component.
+     * @type {CSSProperties}
+     */
+    style?: CSSProperties;
+    /**
+     * The children to be rendered inside the SelectAssociatedTag component.
+     * @type {ReactNode}
+     */
+    children?: ReactNode;
+    /**
+     * Callback function called when an option is selected.
+     * @type {(value: Dictionary<SelectOption>, option: SelectOption | SelectOption[]) => void}
+     */
+    onSelect: (value: Dictionary<SelectOption>, option: SelectOption | SelectOption[]) => void;
+}

package/es/components/atoms/SelectAssociatedTag/types.js

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

package/es/components/atoms/Typography/EllipsisMiddle.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const EllipsisMiddle: React.FC<{
+    suffixCount: number;
+    children: string;
+    tooltip?: string;
+    style?: React.CSSProperties;
+}>;

package/es/components/atoms/Typography/EllipsisMiddle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from 'antd';
+export const EllipsisMiddle = ({ suffixCount, children, tooltip = false, style }) => {
+    if (children.length <= suffixCount)
+        return _jsx(Typography.Text, { style: style, children: children });
+    const start = children.slice(0, children.length - suffixCount);
+    const suffix = children.slice(-suffixCount);
+    return (_jsx(Typography.Text, { style: style, ellipsis: { tooltip: tooltip ? _jsx("bdo", { dir: "ltr", children: tooltip }) : false, suffix }, children: start }));
+};

package/es/components/atoms/Typography/index.d.ts

@@ -1 +1,2 @@
 export { Typography } from './Text';
+export { EllipsisMiddle } from './EllipsisMiddle';

package/es/components/atoms/Typography/index.js

@@ -1 +1,2 @@
 export { Typography } from './Text';
+export { EllipsisMiddle } from './EllipsisMiddle';

package/es/components/atoms/index.d.ts

@@ -6,7 +6,7 @@ export { Radio, RadioGroupSub, RadioButton } from './Radio';
 export { Space } from './Space';
 export { Tag } from './Tag';
 export { Tooltip } from './Tooltip';
-export { Typography } from './Typography';
+export { Typography, EllipsisMiddle } from './Typography';
 export { Checkbox } from './Checkbox';
 export { message } from './Message';
 export { Segmented } from './Segmented';
@@ -46,6 +46,7 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './SelectAssociatedTag';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -6,7 +6,7 @@ export { Radio, RadioGroupSub, RadioButton } from './Radio';
 export { Space } from './Space';
 export { Tag } from './Tag';
 export { Tooltip } from './Tooltip';
-export { Typography } from './Typography';
+export { Typography, EllipsisMiddle } from './Typography';
 export { Checkbox } from './Checkbox';
 export { message } from './Message';
 export { Segmented } from './Segmented';
@@ -46,3 +46,4 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './SelectAssociatedTag';

package/es/components/molecules/DisplayFormat/DisplayFormatSettings.js

@@ -1,20 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // Libraries
 import { useEffect, useState } from 'react';
 import { translate, translations } from '@antscorp/antsomi-locales';
 // Components
 import { FormatDatetime, FormatNumber, } from './components';
 import { EditIcon } from '../../icons';
-import { Button, Text } from '../../atoms';
+import { Button, EllipsisMiddle, Typography } from '../../atoms';
 // Utils
 import { formatDatetimeDF, formatNumberDF } from './utils';
 // Constants
 import { DATE_TIME_EXAMPLE, DATETIME_SETTINGS_DEFAULT, NUMBER_SETTINGS_DEFAULT, NUMBER_EXAMPLE, } from './constants';
+// Json
+import Currencies from './currencies.json';
 export const DisplayFormatSettings = props => {
     const { infos, url, displayFormatType, formatSettings, dynamicContentType, onSettingsChange, disabled, ...rest } = props;
     const [settings, setSettings] = useState(formatSettings ??
         (displayFormatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT));
     const [showDetailEdit, setShowDetailEdit] = useState(false);
+    const [prefixSymbol, setPrefixSymbol] = useState(undefined);
     useEffect(() => {
         setSettings(displayFormatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT);
     }, [displayFormatType]);
@@ -22,6 +25,14 @@ export const DisplayFormatSettings = props => {
         if (Object.keys(formatSettings).length > 0) {
             setSettings(formatSettings);
         }
+        if (displayFormatType === 'currency' &&
+            formatSettings.prefixType === 'symbol' &&
+            Currencies[formatSettings.currencyCode].symbolOnLeft) {
+            setPrefixSymbol(Currencies[formatSettings.currencyCode].symbol);
+        }
+        else {
+            setPrefixSymbol(undefined);
+        }
     }, [formatSettings]);
     const handleChangeFormat = (updatedSettings) => {
         if (onSettingsChange) {
@@ -43,15 +54,40 @@ export const DisplayFormatSettings = props => {
         if (displayFormatType === 'datetime') {
             formatDFValue = formatDatetimeDF(DATE_TIME_EXAMPLE, settings);
         }
-        return (_jsxs("div", { className: "ants-flex ants-flex-wrap ants-items-center ants-mt-1 ants-gap-2 ant-flex-row", style: { display: 'flex', alignItems: 'end', gap: '8px', marginBottom: '5px' }, ...rest, children: [_jsx(Text, { size: 11, className: "ants-flex", color: "#7F7F7F", dangerouslySetInnerHTML: {
-                        __html: `${translate(translations._ACT_PREVIEW)}: &nbsp;<bdo dir='ltr'>${formatDFValue}</bdo>`,
-                    } }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", style: {
-                        marginTop: '1px',
-                        backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
-                        border: 'none',
-                        boxShadow: 'none',
-                        borderRadius: '5px',
-                    }, onClick: () => setShowDetailEdit(prevShow => !prevShow) })] }));
+        return (_jsxs("div", { className: "ants-flex ants-items-center ant-flex-row", style: {
+                display: 'flex',
+                alignItems: 'center',
+                marginBottom: '5px',
+                flexShrink: 0,
+                width: '100%',
+                flexWrap: 'nowrap',
+                marginTop: '5px',
+            }, ...rest, children: [_jsxs(Typography.Text, { className: "ants-flex", style: {
+                        color: '#7F7F7F',
+                        fontSize: '11px',
+                        whiteSpace: 'nowrap',
+                        maxWidth: '100%',
+                    }, children: [translate(translations._ACT_PREVIEW), ": \u00A0"] }), prefixSymbol && (_jsx("bdo", { dir: "ltr", style: { color: '#7F7F7F', fontSize: '11px' }, children: prefixSymbol })), _jsxs("div", { style: { display: 'inline-flex', maxWidth: '100%', alignItems: 'center' }, dir: "ltr", children: [_jsx(EllipsisMiddle, { style: {
+                                color: '#7F7F7F',
+                                fontSize: '11px',
+                                whiteSpace: 'nowrap',
+                                flexShrink: 0,
+                                width: displayFormatType === 'datetime'
+                                    ? '100%'
+                                    : `calc(100% - (2px + ${translate(translations._ACT_PREVIEW).length * 0.35}px))`,
+                                flexGrow: 1,
+                                maxWidth: displayFormatType === 'datetime'
+                                    ? '100%'
+                                    : prefixSymbol
+                                        ? `calc(99% - (${prefixSymbol.length * 0.1}px + 1px))`
+                                        : `calc(100% - 2.5px)`,
+                            }, suffixCount: 7, tooltip: prefixSymbol ? `${prefixSymbol}${formatDFValue}` : formatDFValue, children: formatDFValue }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", style: {
+                                backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
+                                border: 'none',
+                                boxShadow: 'none',
+                                borderRadius: '5px',
+                                flexShrink: 0,
+                            }, onClick: () => setShowDetailEdit(prevShow => !prevShow) })] })] }));
     };
     const renderFormatSetting = () => {
         switch (displayFormatType) {

package/es/components/molecules/DisplayFormat/components/FormatNumber.js

@@ -112,18 +112,18 @@ export const FormatNumber = (props) => {
                             ...settingValues,
                             isCompact: checked,
                         });
-                    }, children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.compact) }) }), _jsx(Form.Item, { label: decimalPlacesLabel, style: { marginBottom: 12 }, colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsxs("div", { style: { display: 'flex', marginLeft: '55px', gap: '15px' }, children: [_jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle({
+                    }, children: translate(translations._TITL_EDIT_NUMBER_COMPACT) }) }), _jsx(Form.Item, { label: decimalPlacesLabel, style: { marginBottom: 12 }, colon: false, labelCol: { span: 12 }, wrapperCol: { span: 12 }, children: _jsxs("div", { style: { display: 'flex', marginLeft: '55px', gap: '15px' }, children: [_jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle({
                                 ...settingValues,
                                 decimalPlaces: decimalPlaces - 1,
                             }), size: "small", icon: _jsx(DecreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) }), _jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, onClick: () => onChangeSettingsHandle({
                                 ...settingValues,
                                 decimalPlaces: decimalPlaces + 1,
-                            }), size: "small", icon: _jsx(IncreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) })] }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_GROUPING) }), _jsx(Tooltip, { placement: "top", title: t(translations.dynamicContent.modal.label.formNumberDisplayFormat
-                                .groupingIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsx(Select, { style: { width: 100 }, value: grouping, onChange: value => onChangeSettingsHandle({
+                            }), 
+                            // disabled={decimalPlaces >= 100}
+                            size: "small", icon: _jsx(IncreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) })] }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_GROUPING) }), _jsx(Tooltip, { placement: "top", title: translate(translations._TOOLTIP__DISPLAY_DECIMAL), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsx(Select, { style: { width: 100 }, value: grouping, onChange: value => onChangeSettingsHandle({
                         ...settingValues,
                         grouping: value,
-                    }), options: listGroupingSeparatorOptions }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_DECIMAL) }), _jsx(Tooltip, { placement: "top", title: t(translations.dynamicContent.modal.label.formNumberDisplayFormat
-                                .decimalIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), labelCol: { span: 10 }, wrapperCol: { span: 14 }, colon: false, children: _jsx(Select, { style: { width: 100 }, value: decimal, onChange: value => onChangeSettingsHandle({
+                    }), options: listGroupingSeparatorOptions }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_DECIMAL) }), _jsx(Tooltip, { placement: "top", title: translate(translations._TOOLTIP__DISPLAY_GROUPING), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), labelCol: { span: 10 }, wrapperCol: { span: 14 }, colon: false, children: _jsx(Select, { style: { width: 100 }, value: decimal, onChange: value => onChangeSettingsHandle({
                         ...settingValues,
                         decimal: value,
                     }), options: listDecimalSeparatorOptions }) })] }));

package/es/components/molecules/DisplayFormat/constants.d.ts

@@ -149,3 +149,24 @@ export declare const DYNAMIC_CONTENT_DF_FORMAT_TYPE: {
     number: string;
     datetime: string;
 };
+export declare const TYPE_FORMAT_OPTIONS: {
+    SHORT: string;
+    MEDIUM: string;
+    LONG: string;
+};
+export declare const DATE_FORMAT_LIST_TEST: {
+    [x: string]: {
+        [x: string]: {
+            label: string;
+            value: string;
+        };
+    };
+};
+export declare const TIME_FORMAT_LIST_TEST: {
+    [x: string]: {
+        [x: string]: {
+            label: string;
+            value: string;
+        };
+    };
+};

package/es/components/molecules/DisplayFormat/constants.js

@@ -239,3 +239,68 @@ export const DYNAMIC_CONTENT_DF_FORMAT_TYPE = {
     number: 'number',
     datetime: 'datetime',
 };
+export const TYPE_FORMAT_OPTIONS = {
+    SHORT: 'short',
+    MEDIUM: 'medium',
+    LONG: 'long',
+};
+export const DATE_FORMAT_LIST_TEST = {
+    [DATE_FORMAT_OPTIONS[0].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._DATE_SHORT_FORMAT1),
+            value: 'MM/DD/YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._DATE_MEDIUM_FORMAT1),
+            value: 'MMM DD, YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._DATE_LONG_FORMAT1),
+            value: 'MMMM DD, YYYY',
+        },
+    },
+    [DATE_FORMAT_OPTIONS[1].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._DATE_SHORT_FORMAT2),
+            value: 'DD/MM/YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._DATE_MEDIUM_FORMAT2),
+            value: 'DD MMM, YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._DATE_LONG_FORMAT2),
+            value: 'DD MMMM, YYYY',
+        },
+    },
+};
+export const TIME_FORMAT_LIST_TEST = {
+    [TIME_FORMAT_OPTIONS[0].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._TIME_SHORT_FOTMAT1),
+            value: 'h:mm A',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._TIME_MEDIUM_FORMAT1),
+            value: 'h:mm:ss A',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._TIME_LONG_FORMAT1),
+            value: 'h:mm:ss A [GMT]',
+        },
+    },
+    [TIME_FORMAT_OPTIONS[1].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._TIME_SHORT_FOTMAT2),
+            value: 'H:mm',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._TIME_MEDIUM_FORMAT2),
+            value: 'H:mm:ss',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._TIME_LONG_FORMAT2),
+            value: 'H:mm:ss [GMT]',
+        },
+    },
+};

package/es/components/molecules/DisplayFormat/utils.js

@@ -1,9 +1,9 @@
 /* eslint-disable prefer-regex-literals */
 // Libraries
 import dayjs from 'dayjs';
-import currencyFormatter from 'currency-formatter';
 import { has, get, set } from 'lodash';
 import 'dayjs/locale/vi';
+import BigNumber from 'bignumber.js';
 // Json
 import Currencies from './currencies.json';
 // Constants
@@ -114,12 +114,15 @@ export function formatNumberDF(number, fType, fOptions = {
         });
         let formatedCompactNumber;
         if (item) {
-            const compactNumber = (number / item.value).toFixed(decimalPlaces).replace(rx, '$1');
+            const bigNum = new BigNumber(number);
+            const divisor = new BigNumber(item.value);
+            const numString = bigNum.div(divisor).toFixed(decimalPlaces);
+            const [integerPart, decimalPart] = numString.split('.');
+            const formattedInteger = new Intl.NumberFormat('en-US').format(Number(integerPart));
             formatedCompactNumber =
-                currencyFormatter.format(Number(compactNumber), {
-                    decimal,
-                    precision: decimalPlaces,
-                }) + item.symbol;
+                formattedInteger.replace(/,/g, grouping !== 'none' ? grouping || '' : '') +
+                    (decimalPart ? decimal + decimalPart : '') +
+                    item.symbol;
         }
         else {
             formatedCompactNumber = '0';
@@ -128,11 +131,13 @@ export function formatNumberDF(number, fType, fOptions = {
         result.textNumberFormated = formatedCompactNumber;
     }
     else {
-        result.textNumberFormated = currencyFormatter.format(number, {
-            thousand: grouping === 'none' ? '' : grouping,
-            decimal,
-            precision: decimalPlaces,
-        });
+        const bigNum = new BigNumber(number);
+        const numString = bigNum.toFixed(decimalPlaces);
+        const [integerPart, decimalPart] = numString.split('.');
+        const formattedInteger = new Intl.NumberFormat('en-US').format(Number(integerPart));
+        result.textNumberFormated =
+            formattedInteger.replace(/,/g, grouping !== 'none' ? grouping || '' : '') +
+                (decimalPart ? decimal + decimalPart : '');
     }
     switch (fType) {
         case 'percentage':
@@ -167,7 +172,7 @@ export function formatNumberDF(number, fType, fOptions = {
     let html = result.textNumberFormated;
     if (result.hasSymbol) {
         if (result.symbolOnLeft) {
-            html = `${result.symbol}${html}`;
+            html = `${html}`;
         }
         else {
             html = `${html}${result.symbol}`;

package/es/components/molecules/InputSelectAttribute/index.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export type ValueType = 'input' | 'select';
+type Value = {
+    source: string;
+    code: any;
+} | string;
+type Option = {
+    [key: string]: any;
+    label: string;
+    value: string;
+};
+export interface InputSelectAttributeProps {
+    sourceOptions: Option[];
+    mapCodeOptions: Record<string, Option[]>;
+    label?: string;
+    isErrorTag?: boolean;
+    errorMsg?: string;
+    value: Value;
+    onChange: (newValueData: {
+        value: Value;
+        valueType: ValueType;
+    }) => void;
+}
+declare const _default: import("react").MemoExoticComponent<(props: InputSelectAttributeProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;