@antscorp/antsomi-ui 1.3.3-beta.86 → 1.3.3-beta.87

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

@@ -0,0 +1,2 @@
+export * from './AddDynamicContent';
+export * from './types';

package/es/components/molecules/AddDynamicContent/index.js

@@ -0,0 +1,2 @@
+export * from './AddDynamicContent';
+export * from './types';

package/es/components/molecules/AddDynamicContent/styled.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const InputSuggestion: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").AutoCompleteProps<ValueType, OptionType> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+    Option: import("rc-select/lib/Option").OptionFC;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
+}, any, {}, never>;
+export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Modal/styled").CustomModalProps, any>;
+export declare const ButtonCustom: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;

package/es/components/molecules/AddDynamicContent/styled.js

@@ -0,0 +1,30 @@
+// Libraries
+import { AutoComplete, Button } from 'antd';
+import styled from 'styled-components';
+import { Modal } from '../Modal';
+export const InputSuggestion = styled(AutoComplete) `
+  .antsomi-select-selector {
+    border-right: none !important;
+    border-left: none !important;
+    border-top: none !important;
+    border-bottom: 1px solid #d9d9d9 !important;
+  }
+`;
+export const ModalCustom = styled(Modal) `
+  .antsomi-modal-body {
+    overflow: auto;
+    max-height: 500px;
+  }
+`;
+export const ButtonCustom = styled(Button) `
+  width: 64px;
+  background-color: rgb(191 219 254);
+
+  &:hover {
+    background-color: rgb(147 197 253);
+  }
+
+  &:focus {
+    background-color: rgb(147 197 253);
+  }
+`;

package/es/components/molecules/AddDynamicContent/types.d.ts

@@ -0,0 +1,13 @@
+import { DYNAMIC_CONTENT_TYPE_KEY } from './constants';
+export type TDataType = 'string' | 'number' | 'datetime' | 'array' | 'boolean' | 'object' | 'text' | 'array_string' | 'array_number' | 'array_datetime' | 'array_text' | 'suggestion' | 'date' | 'object_id' | 'unique' | null;
+export type APIConfig = {
+    domain: string;
+    slug: string;
+    token: string;
+    userId: string;
+    accountId: string;
+};
+export type APIParams = {
+    url: string;
+} & Record<string, any>;
+export type DynamicContentType = (typeof DYNAMIC_CONTENT_TYPE_KEY)[keyof typeof DYNAMIC_CONTENT_TYPE_KEY];

package/es/components/molecules/AddDynamicContent/types.js

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

package/es/components/molecules/AddDynamicContent/utils.d.ts

@@ -0,0 +1,41 @@
+import dayjs from 'dayjs';
+import type { TDatetimeFormatSetting, TNumberFormatSettings } from './components';
+import { LabeledTreeValue, LabeledValue } from './AddDynamicContent';
+export declare function getStringFormatDateDF(formatSettings: TDatetimeFormatSetting): string;
+export declare function formatDatetimeDF(date: string | number | dayjs.Dayjs | Date, formatSettings: TDatetimeFormatSetting): string;
+export declare function formatNumberDF(number: number, fType: 'number' | 'percentage' | 'currency', fOptions?: Omit<TNumberFormatSettings, 'type'>): string;
+export declare function getAvailableAttrs(listAttribute: any[]): any[];
+export declare const regexCSType: RegExp;
+export declare const serilizeBOAttr: (data: any, additionalAttrProperties?: string[]) => LabeledValue[];
+export declare const serializeCSSelectedString: (value?: string) => {
+    contentSourceKey: string;
+    groupId: string;
+    itemTypeId: number;
+};
+export declare const serilizeDynamicContentAttr: (attrs: any[] | undefined, language: any, additionalAttrProperties?: string[]) => {
+    label: any;
+    value: any;
+    dataType: any;
+    disabled: boolean;
+    status: any;
+}[];
+export declare const serilizeEventAttr: (attrs: any[] | undefined, language: any, additionalAttrProperties?: string[]) => LabeledTreeValue[];
+export declare const serilizePromotionPool: (data: any, additionalAttrProperties?: string[]) => LabeledValue[];
+export declare const CUSTOM_TYPE: {
+    index: number;
+    label: string;
+    value: string;
+};
+export declare const buildOptionAttrArchive: (list: any[], selected: any) => any[];
+export declare const checkStatusAttr: ({ listBO, itemTypeId, listAttribute, field, }: {
+    listBO?: any[] | undefined;
+    itemTypeId?: number | undefined;
+    listAttribute?: any[] | undefined;
+    field?: string | undefined;
+}) => {
+    errorMessage: string;
+    isDisable: boolean;
+};
+export declare function serializeLabelToCode(name: string): string;
+export declare const buildMappingFields: (dynamicItem: any, isFormatNumber?: boolean, key?: string) => string;
+export declare const transformDateFormat: (dateParseFormat: any, dateParseOption: any) => string;

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

@@ -0,0 +1,396 @@
+/* eslint-disable prefer-regex-literals */
+// Libraries
+import dayjs from 'dayjs';
+import currencyFormatter from 'currency-formatter';
+import { has, get, set } from 'lodash';
+// Json
+import Currencies from './currencies.json';
+// Constants
+import { ATTRIBUTE_STATUS, BO_STATUS, DYNAMIC_CONTENT_TYPE } from './constants';
+// Models
+import { ListAttribute } from '@antscorp/antsomi-ui/es/models/BusinessObject';
+export function getStringFormatDateDF(formatSettings) {
+    const { hasDateFormat, hasTimeFormat, timeParseFormat, dateParseFormat, timeParseOption, dateParseOption, } = formatSettings;
+    let dateFormat = '';
+    let timeFormat = '';
+    if (hasDateFormat) {
+        switch (dateParseFormat) {
+            case 'MM/DD/YYYY':
+                if (dateParseOption === 'short')
+                    dateFormat = 'MM/DD/YYYY';
+                if (dateParseOption === 'medium')
+                    dateFormat = 'MMM DD, YYYY';
+                if (dateParseOption === 'long')
+                    dateFormat = 'MMMM DD, YYYY';
+                break;
+            case 'DD/MM/YYYY':
+                if (dateParseOption === 'short')
+                    dateFormat = 'DD/MM/YYYY';
+                if (dateParseOption === 'medium')
+                    dateFormat = 'DD MMM, YYYY';
+                if (dateParseOption === 'long')
+                    dateFormat = 'DD MMMM, YYYY';
+                break;
+            case 'YYYY/MM/DD':
+                if (dateParseOption === 'short')
+                    dateFormat = 'YYYY/MM/DD';
+                if (dateParseOption === 'medium')
+                    dateFormat = 'YYYY, MMM DD';
+                if (dateParseOption === 'long')
+                    dateFormat = 'YYYY, MMMM DD';
+                break;
+            default:
+                break;
+        }
+    }
+    if (hasTimeFormat) {
+        if (timeParseFormat === '12hour') {
+            if (timeParseOption === 'short')
+                timeFormat = 'h:mm A';
+            if (timeParseOption === 'medium')
+                timeFormat = 'h:mm:ss A';
+            if (timeParseOption === 'long')
+                timeFormat = 'h:mm:ss A [GMT]';
+        }
+        else {
+            if (timeParseOption === 'short')
+                timeFormat = 'H:mm';
+            if (timeParseOption === 'medium')
+                timeFormat = 'H:mm:ss';
+            if (timeParseOption === 'long')
+                timeFormat = 'H:mm:ss [GMT]';
+        }
+    }
+    return `${dateFormat} ${timeFormat}`;
+}
+export function formatDatetimeDF(date, formatSettings) {
+    var _a, _b;
+    let formatedDate = '';
+    const timezone = Math.round(dayjs(date).utcOffset() / 60);
+    const prefix = timezone > 0 ? '+' : '';
+    if (dayjs(date).isValid()) {
+        formatedDate = dayjs(date)
+            .locale(formatSettings.language || 'en')
+            .format(getStringFormatDateDF(formatSettings));
+        return (_a = formatedDate.replace(/\W*(GMT)\W*/, ` GMT ${prefix}${timezone}`)) === null || _a === void 0 ? void 0 : _a.trim();
+    }
+    return (_b = date.toString()) === null || _b === void 0 ? void 0 : _b.trim();
+}
+export function formatNumberDF(number, fType, fOptions = {
+    grouping: ',',
+    decimal: '.',
+    decimalPlaces: 0,
+    isCompact: false,
+    currencyCode: 'USD',
+    prefixType: 'code',
+}) {
+    const { grouping, decimal, decimalPlaces, isCompact, currencyCode, prefixType } = fOptions;
+    const result = {
+        textNumberFormated: String(number),
+        hasSymbol: false,
+        symbol: '',
+        symbolOnLeft: false,
+    };
+    if (isCompact) {
+        // 1234.56 => 1.23K
+        const lookup = [
+            { value: 1, symbol: '' },
+            { value: 1e3, symbol: 'K' },
+            { value: 1e6, symbol: 'M' },
+            { value: 1e9, symbol: 'G' },
+            { value: 1e12, symbol: 'T' },
+            { value: 1e15, symbol: 'P' },
+            { value: 1e18, symbol: 'E' },
+        ];
+        const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+        const item = lookup
+            .slice()
+            .reverse()
+            .find(item => {
+            if (number >= 0) {
+                return number >= item.value;
+            }
+            return number <= item.value * -1;
+        });
+        let formatedCompactNumber;
+        if (item) {
+            const compactNumber = (number / item.value).toFixed(decimalPlaces).replace(rx, '$1');
+            formatedCompactNumber =
+                currencyFormatter.format(Number(compactNumber), {
+                    decimal,
+                    precision: decimalPlaces,
+                }) + item.symbol;
+        }
+        else {
+            formatedCompactNumber = '0';
+        }
+        // 1.23K => 1.23K | 1.23% | 1.23K USD | $1.23K
+        result.textNumberFormated = formatedCompactNumber;
+    }
+    else {
+        result.textNumberFormated = currencyFormatter.format(number, {
+            thousand: grouping === 'none' ? '' : grouping,
+            decimal,
+            precision: decimalPlaces,
+        });
+    }
+    switch (fType) {
+        case 'percentage':
+            result.hasSymbol = true;
+            result.symbol = '%';
+            break;
+        case 'currency': {
+            result.hasSymbol = true;
+            switch (prefixType) {
+                case 'symbol': {
+                    const currency = Currencies[currencyCode];
+                    if (currency) {
+                        result.symbol = currency.symbol;
+                        result.symbolOnLeft = currency.symbolOnLeft;
+                    }
+                    break;
+                }
+                case 'code': {
+                    result.symbol = ` ${currencyCode}`;
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    let html = result.textNumberFormated;
+    if (result.hasSymbol) {
+        if (result.symbolOnLeft) {
+            html = `${result.symbol}${html}`;
+        }
+        else {
+            html = `${html}${result.symbol}`;
+        }
+    }
+    return html;
+}
+export function getAvailableAttrs(listAttribute) {
+    return (listAttribute === null || listAttribute === void 0 ? void 0 : listAttribute.filter(({ status }) => !ATTRIBUTE_STATUS[+status])) || [];
+}
+export const regexCSType = new RegExp(/^content-source::.*/);
+export const serilizeBOAttr = (data, additionalAttrProperties) => {
+    var _a;
+    const { rows = [] } = data || {};
+    return (((_a = rows[0]) === null || _a === void 0 ? void 0 : _a.properties.map((item) => {
+        const temp = {
+            value: item.itemPropertyName,
+            label: item.translateLabel,
+            status: item.status,
+            disabled: parseInt(item.status) === 4,
+            dataType: item.dataType,
+        };
+        additionalAttrProperties === null || additionalAttrProperties === void 0 ? void 0 : additionalAttrProperties.forEach(propName => {
+            if (has(item, propName)) {
+                temp[propName] = item[propName];
+            }
+        });
+        return temp;
+    })) || []);
+};
+export const serializeCSSelectedString = (value = '') => {
+    const [contentSourceKey = '', groupId = '', itemTypeId] = value.split('::');
+    return {
+        contentSourceKey,
+        groupId,
+        itemTypeId: Number(itemTypeId),
+    };
+};
+export const serilizeDynamicContentAttr = (attrs = [], language, additionalAttrProperties) => attrs.map(attr => {
+    const temp = {
+        label: attr.label[language && language.toUpperCase()] ||
+            attr.label[get(attr, 'label.DEFAULT_LANG')] ||
+            attr.defaultLabel,
+        value: attr.value,
+        dataType: attr.dataType,
+        disabled: parseInt(attr.status) === 4,
+        status: attr.status,
+    };
+    additionalAttrProperties === null || additionalAttrProperties === void 0 ? void 0 : additionalAttrProperties.forEach(propName => {
+        if (has(attr, propName))
+            temp[propName] = attr[propName];
+    });
+    return temp;
+});
+export const serilizeEventAttr = (attrs = [], language, additionalAttrProperties) => attrs.map(row => {
+    var _a;
+    const event = new ListAttribute(row);
+    const temp = {
+        value: `${event.id}`,
+        itemTypeId: event.itemTypeId,
+        propertyName: event.eventPropertyName,
+        label: event.eventPropertyDisplay,
+        status: 1,
+        dataType: event.dataType,
+        type: event.propertyType,
+        children: [],
+    };
+    const tempChildren = (_a = event.items) === null || _a === void 0 ? void 0 : _a.map((child) => {
+        const tempChildrenItem = {
+            value: `${event.id}.${child.itemPropertyName}`,
+            itemTypeId: child.itemTypeId,
+            itemTypeName: event.itemTypeName,
+            propertyName: child.itemPropertyName,
+            eventPropertySyntax: child.eventPropertySyntax,
+            label: child.propertyDisplayMultilang[language] ||
+                child.propertyDisplayMultilang[get(child, "propertyDisplayMultilang['DEFAULT_LANG']")] ||
+                child.itemPropertyDisplay,
+            children: [],
+            status: +child.status,
+            type: +child.type,
+            dataType: child.dataType,
+        };
+        additionalAttrProperties === null || additionalAttrProperties === void 0 ? void 0 : additionalAttrProperties.forEach(propName => {
+            if (has(child, propName))
+                set(tempChildrenItem, propName, child[propName]);
+        });
+        return tempChildrenItem;
+    });
+    additionalAttrProperties === null || additionalAttrProperties === void 0 ? void 0 : additionalAttrProperties.forEach(propName => {
+        if (has(event, propName))
+            set(temp, propName, event[propName]);
+    });
+    set(temp, 'children', tempChildren);
+    return temp;
+});
+export const serilizePromotionPool = (data, additionalAttrProperties) => data.rows.map((pool) => {
+    const temp = {
+        label: pool.name,
+        value: pool.code,
+    };
+    additionalAttrProperties === null || additionalAttrProperties === void 0 ? void 0 : additionalAttrProperties.forEach(propName => {
+        if (has(pool, propName))
+            temp[propName] = pool[propName];
+    });
+    return temp;
+});
+export const CUSTOM_TYPE = {
+    index: 0,
+    label: 'Custom Function',
+    value: 'custom',
+};
+export const buildOptionAttrArchive = (list, selected) => {
+    const arrSelected = Array.isArray(selected) ? selected : [selected];
+    const result = (list === null || list === void 0 ? void 0 : list.filter(each => parseInt(each.status) !== 4 || arrSelected.includes(each.value))) || [];
+    return result;
+};
+export const checkStatusAttr = ({ listBO, itemTypeId, listAttribute, field, }) => {
+    let errorMessage = '';
+    let isDisable = false;
+    const isEmptyField = !field || (Array.isArray(field) && !field.length);
+    // If field is empty, listAttribute is empty array then return empty errorMessage
+    if (isEmptyField || !(listAttribute === null || listAttribute === void 0 ? void 0 : listAttribute.length)) {
+        return {
+            errorMessage: '',
+            isDisable: false,
+        };
+    }
+    const selectedAttrs = listAttribute === null || listAttribute === void 0 ? void 0 : listAttribute.filter(bo => Array.isArray(field) ? field.includes(bo.value) : bo.value === field);
+    if (!(selectedAttrs === null || selectedAttrs === void 0 ? void 0 : selectedAttrs.length)) {
+        errorMessage = ATTRIBUTE_STATUS.DELETE.errorMessage;
+    }
+    else {
+        if (selectedAttrs.some(selectedAttr => ATTRIBUTE_STATUS[selectedAttr.status])) {
+            errorMessage = ATTRIBUTE_STATUS[4].errorMessage;
+        }
+    }
+    if (Array.isArray(listBO) && !!itemTypeId) {
+        const selectedBO = listBO === null || listBO === void 0 ? void 0 : listBO.find(bo => bo.value === itemTypeId);
+        if (!selectedBO) {
+            errorMessage = BO_STATUS.DELETE.errorMessage;
+            isDisable = true;
+        }
+        else {
+            if (BO_STATUS[selectedBO.status]) {
+                errorMessage = BO_STATUS[selectedBO.status].errorMessage;
+                isDisable = true;
+            }
+        }
+    }
+    return { errorMessage, isDisable };
+};
+export function serializeLabelToCode(name) {
+    // console.log('name', name);
+    return name
+        .toLocaleLowerCase()
+        .replace(/ /g, '_')
+        .replace(/[^\w]/g, '')
+        .replace(/^(\d|aud|sgmt|_)+/g, '');
+}
+export const buildMappingFields = (dynamicItem, isFormatNumber = false, key = '') => {
+    if (!dynamicItem || !dynamicItem.type) {
+        return '';
+    }
+    const { type, attribute, index, pool } = dynamicItem;
+    if (attribute === null || attribute === void 0 ? void 0 : attribute.value) {
+        const keySurfix = isFormatNumber ? `.format("${key}")` : '';
+        switch (true) {
+            case type === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value:
+                if (index != null) {
+                    return `event.${attribute.itemTypeName}[${index}].${attribute.propertyName}${keySurfix}`;
+                }
+                return `event.${attribute.value}${keySurfix}`;
+            case type === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value:
+                return `visitor.${attribute.value}${keySurfix}`;
+            case type === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value:
+                return `customer.${attribute.value}${keySurfix}`;
+            case type === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value:
+                return pool ? `promotion_code.${pool}.${attribute.value}${keySurfix}` : '';
+            case regexCSType.test(type): {
+                const { groupId } = serializeCSSelectedString(type);
+                return index || index === 0
+                    ? `groups.${groupId}[${index}].${attribute.value}${keySurfix}`
+                    : '';
+            }
+            case type === DYNAMIC_CONTENT_TYPE.BO_SETTINGS.value:
+                return index || index === 0 ? `items[${index}].${attribute.value}${keySurfix}` : '';
+            case type === 'custom':
+                return `#{custom.${attribute.value}}`;
+            default:
+                return '';
+        }
+    }
+    return '';
+};
+export const transformDateFormat = (dateParseFormat, dateParseOption) => {
+    let dateFormat = '';
+    switch (dateParseFormat) {
+        case 'MM/DD/YYYY':
+            if (dateParseOption === 'short')
+                dateFormat = 'MM/DD/YYYY';
+            if (dateParseOption === 'medium')
+                dateFormat = 'MMM DD, YYYY';
+            if (dateParseOption === 'long')
+                dateFormat = 'MMMM DD, YYYY';
+            break;
+        case 'DD/MM/YYYY':
+            if (dateParseOption === 'short')
+                dateFormat = 'DD/MM/YYYY';
+            if (dateParseOption === 'medium')
+                dateFormat = 'DD MMM, YYYY';
+            if (dateParseOption === 'long')
+                dateFormat = 'DD MMMM, YYYY';
+            break;
+        case 'YYYY/MM/DD':
+            if (dateParseOption === 'short')
+                dateFormat = 'YYYY/MM/DD';
+            if (dateParseOption === 'medium')
+                dateFormat = 'YYYY, MMM DD';
+            if (dateParseOption === 'long')
+                dateFormat = 'YYYY, MMMM DD';
+            break;
+        default:
+            break;
+    }
+    return dateFormat;
+};

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

@@ -1,19 +1,19 @@
-import React from 'react';
-export type TAlign = 'left' | 'center' | 'right' | undefined;
-export interface AlignEditProps {
-    className?: string;
-    align?: TAlign;
-    onChange?: (align: TAlign) => void;
-    style?: Object;
-}
-export interface AlignSettingProps extends AlignEditProps {
-    label?: string;
-    labelClassName?: string;
-}
-export declare const ALIGN_TYPE: {
-    LEFT: string;
-    CENTER: string;
-    RIGHT: string;
-};
-export declare const AlignEdit: React.FC<AlignEditProps>;
-export declare const AlignSetting: React.FC<AlignSettingProps>;
+import React from 'react';
+export type TAlign = 'left' | 'center' | 'right' | undefined;
+export interface AlignEditProps {
+    className?: string;
+    align?: TAlign;
+    onChange?: (align: TAlign) => void;
+    style?: Object;
+}
+export interface AlignSettingProps extends AlignEditProps {
+    label?: string;
+    labelClassName?: string;
+}
+export declare const ALIGN_TYPE: {
+    LEFT: string;
+    CENTER: string;
+    RIGHT: string;
+};
+export declare const AlignEdit: React.FC<AlignEditProps>;
+export declare const AlignSetting: React.FC<AlignSettingProps>;

package/es/components/molecules/AlignSetting/index.js

@@ -1,52 +1,52 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// Libraries
-import React from 'react';
-// Atoms
-import { Button, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
-// Molecules
-import { SettingWrapper } from '../SettingWrapper';
-// Styled
-import { AlignSettingWrapper } from './styled';
-export const ALIGN_TYPE = {
-    LEFT: 'left',
-    CENTER: 'center',
-    RIGHT: 'right',
-};
-export const AlignEdit = props => {
-    const { className, style, onChange, align } = props;
-    return (React.createElement(AlignSettingWrapper, { className: className, style: style },
-        React.createElement(Button, { style: {
-                aspectRatio: 1 / 1,
-                width: 25,
-                color: align !== ALIGN_TYPE.LEFT ? '#aaaaaa' : 'inherit',
-            }, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(ALIGN_TYPE.LEFT) },
-            React.createElement(Icon, { type: "icon-ants-align-left" })),
-        React.createElement(Button, { style: {
-                aspectRatio: 1 / 1,
-                width: 25,
-                color: align !== ALIGN_TYPE.CENTER ? '#aaaaaa' : 'inherit',
-            }, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(ALIGN_TYPE.CENTER) },
-            React.createElement(Icon, { type: "icon-ants-align-center" })),
-        React.createElement(Button, { style: {
-                aspectRatio: 1 / 1,
-                width: 25,
-                color: align !== ALIGN_TYPE.RIGHT ? '#aaaaaa' : 'inherit',
-            }, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(ALIGN_TYPE.RIGHT) },
-            React.createElement(Icon, { type: "icon-ants-align-right" }))));
-};
-export const AlignSetting = props => {
-    // Props
-    const { label, labelClassName } = props, restOf = __rest(props, ["label", "labelClassName"]);
-    return (React.createElement(SettingWrapper, { label: label || 'Align', labelClassName: labelClassName },
-        React.createElement(AlignEdit, Object.assign({}, restOf))));
-};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+// Atoms
+import { Button, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+// Molecules
+import { SettingWrapper } from '../SettingWrapper';
+// Styled
+import { AlignSettingWrapper } from './styled';
+export const ALIGN_TYPE = {
+    LEFT: 'left',
+    CENTER: 'center',
+    RIGHT: 'right',
+};
+export const AlignEdit = props => {
+    const { className, style, onChange, align } = props;
+    return (React.createElement(AlignSettingWrapper, { className: className, style: style },
+        React.createElement(Button, { style: {
+                aspectRatio: 1 / 1,
+                width: 25,
+                color: align !== ALIGN_TYPE.LEFT ? '#aaaaaa' : 'inherit',
+            }, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(ALIGN_TYPE.LEFT) },
+            React.createElement(Icon, { type: "icon-ants-align-left" })),
+        React.createElement(Button, { style: {
+                aspectRatio: 1 / 1,
+                width: 25,
+                color: align !== ALIGN_TYPE.CENTER ? '#aaaaaa' : 'inherit',
+            }, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(ALIGN_TYPE.CENTER) },
+            React.createElement(Icon, { type: "icon-ants-align-center" })),
+        React.createElement(Button, { style: {
+                aspectRatio: 1 / 1,
+                width: 25,
+                color: align !== ALIGN_TYPE.RIGHT ? '#aaaaaa' : 'inherit',
+            }, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(ALIGN_TYPE.RIGHT) },
+            React.createElement(Icon, { type: "icon-ants-align-right" }))));
+};
+export const AlignSetting = props => {
+    // Props
+    const { label, labelClassName } = props, restOf = __rest(props, ["label", "labelClassName"]);
+    return (React.createElement(SettingWrapper, { label: label || 'Align', labelClassName: labelClassName },
+        React.createElement(AlignEdit, Object.assign({}, restOf))));
+};

package/es/components/molecules/AlignSetting/styled.d.ts

@@ -1 +1 @@
-export declare const AlignSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AlignSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/AlignSetting/styled.js

@@ -1,7 +1,7 @@
-// Libraries
-import styled from 'styled-components';
-export const AlignSettingWrapper = styled.div `
-  display: flex;
-  gap: 10px;
-  align-items: center;
-`;
+// Libraries
+import styled from 'styled-components';
+export const AlignSettingWrapper = styled.div `
+  display: flex;
+  gap: 10px;
+  align-items: center;
+`;