@antscorp/antsomi-ui 1.3.5-beta.72 → 1.3.5-beta.721

package/es/utils/portal.d.ts

@@ -0,0 +1,74 @@
+export declare const PORTAL_KEYS: {
+    CURRENCY: string;
+    USER_LANGUAGE: string;
+    PORTAL_LANGUAGE: string;
+    TIME_ZONE: string;
+    CURRENCY_FORMAT: string;
+    DATE_TIME_FORMAT: string;
+    DATE_TIME_FORMAT_LONG: string;
+    NUMBER_FORMAT: string;
+    PERCENTAGE_FORMAT: string;
+    VERSION: string;
+    AVATAR: string;
+};
+export declare const initDateAndTimeFormat: {
+    format: string;
+    date: {
+        check: boolean;
+        value: string;
+    };
+    time: {
+        check: boolean;
+        value: string;
+        timeFormat: string;
+    };
+};
+export declare const MAP_FORMAT_DATE: {
+    'DD/MM/YYYY-short-true': string;
+    'DD/MM/YYYY-short-false': string;
+    'DD/MM/YYYY-medium-true': string;
+    'DD/MM/YYYY-medium-false': string;
+    'DD/MM/YYYY-long-true': string;
+    'DD/MM/YYYY-long-false': string;
+    'MM/DD/YYYY-short-true': string;
+    'MM/DD/YYYY-short-false': string;
+    'MM/DD/YYYY-medium-true': string;
+    'MM/DD/YYYY-medium-false': string;
+    'MM/DD/YYYY-long-true': string;
+    'MM/DD/YYYY-long-false': string;
+};
+export declare const convertDateTimeToFormatLong: (formatDatetime: Record<string, any>) => string;
+export declare const initNumberFormat: {
+    group: string;
+    decimal: string;
+    decimalPlace: number;
+};
+export declare const initPercentageFormat: {
+    group: string;
+    decimal: string;
+    decimalPlace: number;
+};
+export declare const initIdFormat: {
+    group: string;
+    decimal: string;
+    decimalPlace: number;
+};
+export declare const initCurrencyFormat: {
+    currency: string;
+    group: string;
+    decimal: string;
+    decimalPlace: number;
+};
+export declare function getUserInfoPortal(data: Record<string, any>): {
+    defaultConfig: any;
+};
+export declare const UserAndPortalDefaultConfig: {
+    set: (portal: Record<string, any>, user: Record<string, any>) => Record<string, any>;
+    getByKey: (key: string) => any;
+};
+export declare function getPortalFormatDateTimeLong(): any;
+export declare function getPortalTimeZone(): any;
+export declare function getUserLocaleLanguage(): any;
+export declare function getPortalFormatCurrency(): any;
+export declare function getPortalCurrency(): any;
+export declare function safeParseDisplayFormatCurrency(value: number, displayFormat?: Record<string, any>): string;

package/es/utils/portal.js

@@ -0,0 +1,139 @@
+import { convertNumberByDisplayFormat, safeParse } from './common';
+export const PORTAL_KEYS = {
+    CURRENCY: 'p_currency',
+    USER_LANGUAGE: 'user_language',
+    PORTAL_LANGUAGE: 'p_language',
+    TIME_ZONE: 'p_timezone',
+    CURRENCY_FORMAT: 'p_f_currency',
+    DATE_TIME_FORMAT: 'p_f_datetime',
+    DATE_TIME_FORMAT_LONG: 'p_f_longdatetime',
+    NUMBER_FORMAT: 'p_f_number',
+    PERCENTAGE_FORMAT: 'p_f_percentage',
+    VERSION: '_ver',
+    AVATAR: 'avatar',
+};
+export const initDateAndTimeFormat = {
+    format: 'MM/DD/YYYY',
+    date: {
+        check: true,
+        value: 'medium',
+    },
+    time: {
+        check: true,
+        value: 'medium',
+        timeFormat: '12',
+    },
+};
+export const MAP_FORMAT_DATE = {
+    'DD/MM/YYYY-short-true': 'DD/MM',
+    'DD/MM/YYYY-short-false': 'DD MMM',
+    'DD/MM/YYYY-medium-true': 'DD MMM',
+    'DD/MM/YYYY-medium-false': 'DD MMM',
+    'DD/MM/YYYY-long-true': 'DD MMMM',
+    'DD/MM/YYYY-long-false': 'DD MMM',
+    'MM/DD/YYYY-short-true': 'MM/DD',
+    'MM/DD/YYYY-short-false': 'MMM DD',
+    'MM/DD/YYYY-medium-true': 'MMM DD',
+    'MM/DD/YYYY-medium-false': 'MMM DD',
+    'MM/DD/YYYY-long-true': 'MMMM DD',
+    'MM/DD/YYYY-long-false': 'MMM DD',
+};
+const MAP_FORMAT_TIME = {
+    '12': 'h:mm:ss A',
+    '24': 'HH:mm:ss',
+};
+export const convertDateTimeToFormatLong = (formatDatetime) => {
+    let dataDateTime = formatDatetime;
+    if (Object.keys(dataDateTime).length === 0) {
+        dataDateTime = initDateAndTimeFormat;
+    }
+    const formatDate = `${dataDateTime.format}-${dataDateTime.date.value}-${dataDateTime.date.check}`;
+    const formatString = `${MAP_FORMAT_DATE[formatDate]} [at] ${MAP_FORMAT_TIME[dataDateTime.time.timeFormat]}`;
+    return formatString;
+};
+function getLanguageLocale(lang = 'EN') {
+    return lang.toLowerCase();
+}
+export const initNumberFormat = {
+    group: ',',
+    decimal: '.',
+    decimalPlace: 2,
+};
+export const initPercentageFormat = {
+    group: ',',
+    decimal: '.',
+    decimalPlace: 2,
+};
+export const initIdFormat = {
+    group: '',
+    decimal: '',
+    decimalPlace: 0,
+};
+export const initCurrencyFormat = {
+    currency: 'USD',
+    group: ',',
+    decimal: '.',
+    decimalPlace: 2,
+};
+function initDefaultConfig() {
+    return {
+        language: 'EN',
+        timeZone: 'Asia/Ho_Chi_Minh',
+        dateAndTimeFormat: initDateAndTimeFormat,
+        numberFormat: initNumberFormat,
+        currencyFormat: initCurrencyFormat,
+        percentageFormat: initPercentageFormat,
+        // VERSION: 'DEV',
+    };
+}
+export function getUserInfoPortal(data) {
+    const defaultConfig = Object.assign(Object.assign({}, initDefaultConfig()), data.defaultConfig);
+    return Object.assign(Object.assign({}, data), { defaultConfig });
+}
+export const UserAndPortalDefaultConfig = (() => {
+    const APP_CACHE_PARAMS = {};
+    return {
+        set: (portal, user) => {
+            const portalConfig = getUserInfoPortal(portal).defaultConfig;
+            function setValue(name, value) {
+                APP_CACHE_PARAMS[name] = value;
+            }
+            // info user and portal
+            setValue('user_email', user.email);
+            setValue('p_name', portal.portalName);
+            setValue(PORTAL_KEYS.CURRENCY, portalConfig.currencyFormat.currency);
+            setValue(PORTAL_KEYS.DATE_TIME_FORMAT, portalConfig.dateAndTimeFormat);
+            setValue(PORTAL_KEYS.CURRENCY_FORMAT, portalConfig.currencyFormat);
+            setValue(PORTAL_KEYS.NUMBER_FORMAT, portalConfig.numberFormat);
+            setValue(PORTAL_KEYS.PERCENTAGE_FORMAT, portalConfig.percentageFormat);
+            setValue(PORTAL_KEYS.PORTAL_LANGUAGE, getLanguageLocale(portalConfig.language));
+            setValue(PORTAL_KEYS.TIME_ZONE, portalConfig.timeZone);
+            setValue(PORTAL_KEYS.DATE_TIME_FORMAT_LONG, convertDateTimeToFormatLong(portalConfig.dateAndTimeFormat));
+            return APP_CACHE_PARAMS;
+        },
+        getByKey: (key) => APP_CACHE_PARAMS[key],
+    };
+})();
+export function getPortalFormatDateTimeLong() {
+    return (UserAndPortalDefaultConfig.getByKey(PORTAL_KEYS.DATE_TIME_FORMAT_LONG) ||
+        'ddd, MMM D, YYYY h:mm A');
+}
+export function getPortalTimeZone() {
+    return UserAndPortalDefaultConfig.getByKey(PORTAL_KEYS.TIME_ZONE) || 'Asia/Ho_Chi_Minh';
+}
+export function getUserLocaleLanguage() {
+    return UserAndPortalDefaultConfig.getByKey(PORTAL_KEYS.USER_LANGUAGE) || 'EN';
+}
+export function getPortalFormatCurrency() {
+    return UserAndPortalDefaultConfig.getByKey(PORTAL_KEYS.CURRENCY_FORMAT);
+}
+export function getPortalCurrency() {
+    return safeParse(UserAndPortalDefaultConfig.getByKey(PORTAL_KEYS.CURRENCY), 'USD');
+}
+export function safeParseDisplayFormatCurrency(value, displayFormat = {}) {
+    if (Object.keys(displayFormat).length === 0) {
+        displayFormat = getPortalFormatCurrency();
+    }
+    const temp = convertNumberByDisplayFormat(value, displayFormat.group, displayFormat.decimal, displayFormat.decimalPlace);
+    return `${temp} ${displayFormat.currency}`;
+}

package/es/utils/styles.d.ts

@@ -0,0 +1,2 @@
+export declare function styleToCssString(rules: any, important?: boolean): string;
+export default styleToCssString;

package/es/utils/styles.js

@@ -0,0 +1,175 @@
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
+const isUnitlessNumber = {
+    boxFlex: true,
+    boxFlexGroup: true,
+    columnCount: true,
+    flex: true,
+    flexGrow: true,
+    flexPositive: true,
+    flexShrink: true,
+    flexNegative: true,
+    fontWeight: true,
+    lineClamp: true,
+    lineHeight: true,
+    opacity: true,
+    order: true,
+    orphans: true,
+    widows: true,
+    zIndex: true,
+    zoom: true,
+    // SVG-related properties
+    fillOpacity: true,
+    strokeDashoffset: true,
+    strokeOpacity: true,
+    strokeWidth: true,
+};
+/**
+ * @param {string} prefix vendor-specific prefix, eg: Webkit
+ * @param {string} key style name, eg: transitionDuration
+ * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+ * WebkitTransitionDuration
+ */
+function prefixKey(prefix, key) {
+    return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+}
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+const prefixes = ['Webkit', 'ms', 'Moz', 'O'];
+// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+// infinite loop, because it iterates over the newly added props too.
+Object.keys(isUnitlessNumber).forEach(prop => {
+    prefixes.forEach(prefix => {
+        isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+    });
+});
+/**
+ * Most style properties can be unset by doing .style[prop] = '' but IE8
+ * doesn't like doing that with shorthand properties so for the properties that
+ * IE8 breaks on, which are listed here, we instead unset each of the
+ * individual properties. See http://bugs.jquery.com/ticket/12385.
+ * The 4-value 'clock' properties like margin, padding, border-width seem to
+ * behave without any problems. Curiously, list-style works too without any
+ * special prodding.
+ */
+const shorthandPropertyExpansions = {
+    background: {
+        backgroundImage: true,
+        backgroundPosition: true,
+        backgroundRepeat: true,
+        backgroundColor: true,
+    },
+    border: {
+        borderWidth: true,
+        borderStyle: true,
+        borderColor: true,
+    },
+    borderBottom: {
+        borderBottomWidth: true,
+        borderBottomStyle: true,
+        borderBottomColor: true,
+    },
+    borderLeft: {
+        borderLeftWidth: true,
+        borderLeftStyle: true,
+        borderLeftColor: true,
+    },
+    borderRight: {
+        borderRightWidth: true,
+        borderRightStyle: true,
+        borderRightColor: true,
+    },
+    borderTop: {
+        borderTopWidth: true,
+        borderTopStyle: true,
+        borderTopColor: true,
+    },
+    font: {
+        fontStyle: true,
+        fontconstiant: true,
+        fontWeight: true,
+        fontSize: true,
+        lineHeight: true,
+        fontFamily: true,
+    },
+};
+const CSSProperty = {
+    isUnitlessNumber,
+    shorthandPropertyExpansions,
+};
+/* eslint-disable no-underscore-dangle */
+const msPattern = /^ms-/;
+const _uppercasePattern = /([A-Z])/g;
+/**
+ * Hyphenates a camelcased string, for example:
+ *
+ *   > hyphenate('backgroundColor')
+ *   < "background-color"
+ *
+ * For CSS style names, use `hyphenateStyleName` instead which works properly
+ * with all vendor prefixes, including `ms`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+function hyphenate(string) {
+    return string.replace(_uppercasePattern, '-$1').toLowerCase();
+}
+/**
+ * Hyphenates a camelcased CSS property name, for example:
+ *
+ *   > hyphenateStyleName('backgroundColor')
+ *   < "background-color"
+ *   > hyphenateStyleName('MozTransition')
+ *   < "-moz-transition"
+ *   > hyphenateStyleName('msTransition')
+ *   < "-ms-transition"
+ *
+ * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
+ * is converted to `-ms-`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+function hyphenateStyleName(string) {
+    return hyphenate(string).replace(msPattern, '-ms-');
+}
+const { isArray } = Array;
+const { keys } = Object;
+const counter = 1;
+// Follows syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/content,
+// including multiple space separated values.
+const unquotedContentValueRegex = /^(normal|none|(\b(url\([^)]*\)|chapter_counter|attr\([^)]*\)|(no-)?(open|close)-quote|inherit)((\b\s*)|$|\s+))+)$/;
+function buildRule(key, value, important = false) {
+    if (!isUnitlessNumber[key] && typeof value === 'number') {
+        value = `${value}px`;
+    }
+    else if (key === 'content' && !unquotedContentValueRegex.test(value)) {
+        value = `'${value.replace(/'/g, "\\'")}'`;
+    }
+    return `${hyphenateStyleName(key)}: ${value} ${important ? '!important' : ''};  `;
+}
+export function styleToCssString(rules, important = false) {
+    let result = '';
+    if (!rules || keys(rules).length === 0) {
+        return result;
+    }
+    const styleKeys = keys(rules);
+    for (let j = 0, l = styleKeys.length; j < l; j++) {
+        const styleKey = styleKeys[j];
+        const value = rules[styleKey];
+        if (isArray(value)) {
+            for (let i = 0, len = value.length; i < len; i++) {
+                result += buildRule(styleKey, value[i], important);
+            }
+        }
+        else {
+            result += buildRule(styleKey, value, important);
+        }
+    }
+    return result;
+}
+export default styleToCssString;

package/es/utils/templateListing.d.ts

@@ -1,2 +1,3 @@
-import { ObjectTemplate } from '../models/ObjectTemplate';
-export declare const getCategoriesFromObjectTemplate: (objectTemplate: ObjectTemplate) => {};
+import { ObjectTemplate, TObjectTemplate } from '../models/ObjectTemplate';
+export declare const getCategoriesFromObjectTemplate: (objectTemplate: ObjectTemplate | TObjectTemplate) => {};
+export declare const checkShowSkeletonBaseUrl: (url?: string) => boolean;

package/es/utils/templateListing.js

@@ -2,11 +2,31 @@
 import { TEMPLATE_CATEGORY_KEYS } from '../constants';
 export const getCategoriesFromObjectTemplate = (objectTemplate) => {
     const categories = {};
+    const cloneObjectTemplate = (objectTemplate.model
+        ? objectTemplate.model
+        : objectTemplate) || {};
     Object.values(TEMPLATE_CATEGORY_KEYS).forEach(key => {
-        var _a, _b, _c;
-        if (((_a = objectTemplate.model) === null || _a === void 0 ? void 0 : _a[key]) && ((_c = (_b = objectTemplate.model) === null || _b === void 0 ? void 0 : _b[key]) === null || _c === void 0 ? void 0 : _c.length)) {
-            categories[key] = objectTemplate.model[key];
+        var _a;
+        if (cloneObjectTemplate[key] && ((_a = cloneObjectTemplate[key]) === null || _a === void 0 ? void 0 : _a.length)) {
+            categories[key] = cloneObjectTemplate[key];
         }
     });
     return categories;
 };
+export const checkShowSkeletonBaseUrl = (url = '') => {
+    if (url.includes('type')) {
+        switch (true) {
+            case url.includes('type=media'):
+                return true;
+            case url.includes('type=email'):
+                return false;
+            case url.includes('type=tactic'):
+            default:
+                return false;
+        }
+    }
+    else {
+        return (`${url || ''}`.includes('base64-img') &&
+            ['jn_thumb_', 'v_thumb_'].every(prefix => !`${url || ''}`.includes(prefix)));
+    }
+};

package/es/utils/variables.d.ts

@@ -0,0 +1 @@
+export declare const breakdownMd: (style: any) => import("styled-components").FlattenSimpleInterpolation;

package/es/utils/variables.js

@@ -0,0 +1,9 @@
+import { css } from 'styled-components';
+export const breakdownMd = style => css `
+  /* @media (max-width: 1600px) {
+    ${style};
+  } */
+  ${style}/* @media (max-width: 1500px) {
+    ${style};
+  } */
+`;