@antscorp/antsomi-ui 1.3.4 → 1.3.5-alpha.1

package/es/components/atoms/InputDynamic/utils.js

@@ -0,0 +1,874 @@
+/* eslint-disable array-callback-return */
+/* eslint-disable no-sequences */
+/* eslint-disable no-cond-assign */
+/* eslint-disable no-var */
+/* eslint-disable eqeqeq */
+/* eslint-disable vars-on-top */
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable block-scoped-var */
+/* eslint-disable prefer-destructuring */
+// Libraries
+import { get } from 'lodash';
+import { decode } from 'html-entities';
+// Utils
+import { getObjectPropSafely, random } from '@antscorp/antsomi-ui/es/utils';
+import { getStringFormatDateDF } from '../../molecules/AddDynamicContent/utils';
+// Constants
+import { AllowDynamicType } from './InputDynamic';
+import { DATE_AND_TIME_DEFAULT, MAP_DATA_TYPE } from './constants';
+import { DYNAMIC_CONTENT_TYPE_KEY } from '../../molecules/AddDynamicContent/constants';
+export function validateURL(string) {
+    // eslint-disable-next-line no-useless-escape
+    const regexp = /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
+    return regexp.test(string);
+}
+export const getInsertPatternWithAppendSpaceEnd = (id, code, label, bgColor) => `<button id="${id}" contenteditable="false" class="insert-word" style="position: relative; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 2px 3px 8px; color: rgb(0, 0, 0); font-size: inherit; outline: none; border: 1px solid transparent; border-radius: 1.2rem; cursor: pointer; background: ${bgColor}; height: auto;" value=${code
+    .replace(/\s/gm, '&nbsp;')
+    .replace(/"/gm, '&quot;')}><span style="line-height: 20px;margin-right: 8px;pointer-events:none;">${label}</span><em class="editor-icon-remove" style="position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%); color: rgb(48, 95, 184); background-color: rgb(255, 255, 255); font-style: normal; margin-top: 1px; z-index: 1; font-size: 13px; font-weight: bold; margin-left: -12px; line-height: 18px; padding: 0px 3px; border-radius: 50%;">✕</em></button>&nbsp;`;
+export const genShortLinkValue = (url, type) => {
+    const id = random(5);
+    let keyTag = 'shortlink';
+    if (type === 'general') {
+        keyTag = 'shortlink_static';
+    }
+    return {
+        id,
+        value: `#{${keyTag}(${url})}`,
+        label: `https://ants.ly/${id}`,
+    };
+};
+export const getInsertPattern = (id, code, label, bgColor) => `<button id="${id}" contenteditable="false" class="insert-word" style="padding: 5px 8px; color: white; font-size: inherit; outline: none; border: 1px solid transparent; border-radius: 1.2rem; height: auto; margin-top: 2px; cursor: pointer; background: ${bgColor}" value=${code
+    .replace(/\s/gm, '&nbsp;')
+    .replace(/"/gm, '&quot;')}><span style="line-height: 20px;margin-right: 8px;pointer-events:none;">${label}</span><em class="editor-icon-remove" style="color: white;font-style: normal; marign-left: 4px; position: relative; z-index: 1;font-size: 1rem;font-weight: bold">x</em></button>`;
+export const convertHtmlText = (htmlText, format = 'raw', state, objectWidgetInput = {}, type = '', init = '') => {
+    const result = htmlText;
+    try {
+        if (format && format.toLowerCase() === 'raw') {
+            // pattern find all button insert word
+            const regexInsertPattern = type === 'input'
+                ? /<button .*?class="insert-word.*?".*? value="([^"]*?)".*?>(.*?)<\/button>/gim
+                : /<button .*?class="insert-word.*?".*? value=(.*?)>(.*?)<\/button>/gim;
+            // pattern find all symbol `"`
+            const regexQuot = /&quot;/gm;
+            const regexSpace = /&nbsp;/gm;
+            const regexSpaceV2 = /nbsp;/gm;
+            const regexShortLink = /#{shortlink\(.*?\)}/;
+            const regexShortLinkStatic = /#{shortlink_static\(.*?\)}/;
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const replacer = (match, p1, p2, p3, offset, string) => {
+                const newPlacer = p1
+                    .replace(/"/gm, '')
+                    .replace(regexQuot, '"')
+                    .replace(regexSpace, ' ')
+                    .replace(regexSpaceV2, ' ');
+                if (!regexShortLink.test(newPlacer) || !regexShortLinkStatic.test(newPlacer)) {
+                    return newPlacer.replace(/&amp;/gm, '');
+                }
+                return newPlacer;
+            };
+            // replace `"` from value -> replace &quot; -> replace &nbsp;
+            if (result === null || result === undefined) {
+                return htmlText;
+            }
+            try {
+                return result.replace(regexInsertPattern, replacer);
+            }
+            catch (error) {
+                // eslint-disable-next-line no-console
+                console.log('error', error);
+                return htmlText;
+            }
+        }
+        if (format && format.toLowerCase() === 'html') {
+            const insertPattern = /#{.*?}/gm;
+            if (insertPattern.test(htmlText)) {
+                const htmlReplacer = (matcher) => {
+                    // const regex = /(\w+.\w+)|(\(\w+)\)|"(.*?)"/gmi;
+                    // const regex = /(\w+.\w+)|(\(\w+)\)|"(.*?)"/gim;
+                    // const regex = /(\w+)|(\(\w+)\)|"(.*?)"/gim;
+                    // const found = matcher.match(regex);
+                    const found = matcher.replace(/#|{|}|/g, '').split('.');
+                    const foundLink = found[0].split('(');
+                    if (found && found.length) {
+                        let bgColor = '#ccc';
+                        // console.log(found);
+                        if (found[0] === 'customer') {
+                            bgColor = '#3C39BA';
+                        }
+                        else if (found[0] === 'visitor') {
+                            bgColor = '#009000';
+                        }
+                        else if (found[0] === 'event') {
+                            bgColor = '#FBAC00';
+                        }
+                        else if (found[0] === 'objectWidget') {
+                            bgColor = '#24abb9';
+                        }
+                        else if (found[0] === 'productTemplate') {
+                            bgColor = '#9238b5';
+                        }
+                        else if (foundLink[0] === 'nontrackurl' ||
+                            foundLink[0] === 'shortlink' ||
+                            foundLink[0] === 'shortlink_static') {
+                            bgColor = '#cae5fe';
+                        }
+                        else if (found[0] === 'promotion_code') {
+                            bgColor = '#6750A7';
+                        }
+                        else if (found[0] === 'custom') {
+                            bgColor = '#BBEFBE';
+                        }
+                        let label = getObjectPropSafely(() => {
+                            const foundAttribute = '';
+                            let codeTag = '';
+                            if (found.length === 2) {
+                                if (found[0] === 'objectWidget' && found[1].startsWith('custom_')) {
+                                    bgColor = '#1890F0';
+                                    const contentWidget = found[1].substring(7);
+                                    // remove custom_ for get right content
+                                    if (contentWidget.length > 0) {
+                                        if (objectWidgetInput[contentWidget] !== undefined) {
+                                            return objectWidgetInput[contentWidget].name;
+                                        }
+                                        bgColor = '#ccc';
+                                        // return contentWidget;
+                                        return 'Unknow Widget';
+                                    }
+                                }
+                                else {
+                                    codeTag = found[1].split('||')[0];
+                                }
+                            }
+                            else if (found.length === 3) {
+                                if (found[0] === 'promotion_code') {
+                                    codeTag = found[1];
+                                }
+                                else {
+                                    const splitString = found[2].split('||');
+                                    codeTag = `${found[1]}.${splitString[0]}`;
+                                }
+                            }
+                            // console.log('foundAttribute', found, foundAttribute, codeTag);
+                            if (foundAttribute) {
+                                return foundAttribute.label;
+                            }
+                            // bgColor = '#ccc';
+                            // return `${found[0]}.${codeTag}`;
+                            return `${codeTag}`;
+                        });
+                        if (foundLink[0] === 'nontrackurl') {
+                            label = 'Non tracking Link';
+                        }
+                        if (foundLink[0] === 'shortlink' || foundLink[0] === 'shortlink_static') {
+                            const url = get(matcher.match(/\((.*?)\)/), '.1', '');
+                            label = genShortLinkValue(url).label;
+                        }
+                        // console.log(type);
+                        if (type === 'input') {
+                            if (init === 'add') {
+                                return getInsertPatternWithAppendSpaceEnd(random(8), matcher, label || found[0], bgColor);
+                            }
+                            return getInsertPattern(random(8), matcher, label || found[0], bgColor);
+                        }
+                        return getInsertPattern(random(8), matcher, label || found[0], bgColor);
+                    }
+                    return matcher;
+                };
+                try {
+                    return `${result.replace(insertPattern, htmlReplacer)}`;
+                }
+                catch (error) {
+                    // eslint-disable-next-line no-console
+                    console.log(error);
+                    return htmlText;
+                }
+            }
+        }
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.log('error', error);
+    }
+    return result;
+};
+export const handleUpdateInputPersonalization = (listIconRemove, listBtnElement) => {
+    listIconRemove.forEach((each) => {
+        each.innerHTML = '';
+        each.innerHTML = '&#x2715';
+        const styleBtnRemove = each.style;
+        styleBtnRemove.fontSize = '13px';
+        styleBtnRemove.color = '#305FB8';
+        styleBtnRemove.marginLeft = '-12px';
+        styleBtnRemove.marginTop = '1px';
+        styleBtnRemove.lineHeight = '18px';
+        styleBtnRemove.position = 'absolute';
+        styleBtnRemove.backgroundColor = '#fff';
+        styleBtnRemove.padding = '0 3px';
+        styleBtnRemove.borderRadius = '50%';
+        styleBtnRemove.top = '50%';
+        styleBtnRemove.transform = 'translate(-50%, -50%)';
+        styleBtnRemove.left = '100%';
+    });
+    listBtnElement.forEach((each) => {
+        const styleBtnElement = each.style;
+        styleBtnElement.position = 'relative';
+        styleBtnElement.color = '#000';
+        styleBtnElement.padding = '3px 8px';
+        styleBtnElement.paddingRight = '2px';
+        if (each.value.includes('shortlink_static')) {
+            styleBtnElement.backgroundColor = '#CAE5FE';
+        }
+    });
+};
+export function removeHtmlTag(text) {
+    text = `${text}`.replace(/(<([^>]+)>)/gi, '');
+    text = text.replace(/&nbsp;/gm, ' ');
+    return decode(text.trim());
+}
+export function convertBreakTag(text) {
+    return text.replace(/(<|&lt;)br\s*\/*(>|&gt;)/g, '\n');
+}
+export function convertDivToBreakTag(text) {
+    return text.replace(/<div>/gi, '<br>').replace(/<\/div>/gi, '');
+}
+export const pasteHtmlAtCaret = (html, selectPastedContent, callback) => {
+    try {
+        // console.log('callback', callback, typeof callback);
+        if (typeof callback === 'function') {
+            callback();
+        }
+        let sel;
+        let range;
+        if (window.getSelection) {
+            // IE9 and non-IE
+            sel = window.getSelection();
+            if (sel.getRangeAt && sel.rangeCount) {
+                range = sel.getRangeAt(0);
+                range.deleteContents();
+                // Range.createContextualFragment() would be useful here but is
+                // only relatively recently standardized and is not supported in
+                // some browsers (IE9, for one)
+                const el = document.createElement('div');
+                el.innerHTML = html;
+                const frag = document.createDocumentFragment();
+                let node;
+                let lastNode;
+                // eslint-disable-next-line no-cond-assign
+                while ((node = el.firstChild)) {
+                    lastNode = frag.appendChild(node);
+                }
+                const firstNode = frag.firstChild;
+                range.insertNode(frag);
+                // Preserve the selection
+                if (lastNode) {
+                    range = range.cloneRange();
+                    range.setStartAfter(lastNode);
+                    if (selectPastedContent) {
+                        range.setStartBefore(firstNode);
+                    }
+                    else {
+                        range.collapse(true);
+                    }
+                    sel.removeAllRanges();
+                    sel.addRange(range);
+                }
+            }
+            // eslint-disable-next-line no-cond-assign
+        }
+        else if ((sel = document.selection) && sel.type !== 'Control') {
+            // IE < 9
+            const originalRange = sel.createRange();
+            originalRange.collapse(true);
+            sel.createRange().pasteHTML(html);
+            if (selectPastedContent) {
+                range = sel.createRange();
+                range.setEndPoint('StartToStart', originalRange);
+                range.select();
+            }
+        }
+    }
+    catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+    }
+};
+export const getInsertLinkPatternWithAppendSpaceEnd = (id, value, label) => `<button id="${id}" contenteditable="false" class="insert-word" style="padding: 5px 8px; color: #000; font-size: inherit; outline: none; border: 1px solid transparent; border-radius: 1.2rem; margin-top: 2px; cursor: pointer; height: auto; background-color: #CAE5FE" value=${value
+    .replace(/\s/gm, '&nbsp;')
+    .replace(/"/gm, '&quot;')}><span style="line-height: 20px;margin-right: 8px;pointer-events:none;">${label}</span><em class="editor-icon-remove" style="color: white;font-style: normal; marign-left: 4px; position: relative; z-index: 999;font-size: 1rem;font-weight: bold">x</em></button>&nbsp;`;
+// eslint-disable-next-line func-names
+export const validateHTMLTags = (function () {
+    const e = [
+        '<a ',
+        '<a>',
+        '</a>',
+        '<abbr>',
+        '<abbr ',
+        '</abbr>',
+        '<acronym>',
+        '<acronym ',
+        '</acronym>',
+        '<address>',
+        '<address ',
+        '</address>',
+        '<applet>',
+        '<applet ',
+        '</applet>',
+        '<area>',
+        '<area ',
+        '</area>',
+        '<article>',
+        '</article>',
+        '<article ',
+        '<aside>',
+        '<aside ',
+        '</aside>',
+        '<audio>',
+        '<audio ',
+        '</audio>',
+        '<b>',
+        '</b>',
+        '<base>',
+        '<base ',
+        '</base>',
+        '<basefont>',
+        '<basefont ',
+        '</basefont>',
+        '<bdi>',
+        '</bdi>',
+        '<bdi ',
+        '<bdo>',
+        '</bdo>',
+        '<bdo ',
+        '<big>',
+        '<big ',
+        '</big>',
+        '<blockquote>',
+        '<blockquote ',
+        '</blockquote>',
+        '<body>',
+        '<body ',
+        '</body>',
+        '<br ',
+        '<br />',
+        '<br>',
+        '<br/>',
+        '</br>',
+        '<button>',
+        '<button ',
+        '</button>',
+        '<canvas>',
+        '</canvas>',
+        '<canvas ',
+        '<caption>',
+        '<caption ',
+        '</caption>',
+        '<center>',
+        '<center ',
+        '</center>',
+        '<cite>',
+        '<cite ',
+        '</cite>',
+        '<code>',
+        '<code ',
+        '</code>',
+        '<col>',
+        '<col ',
+        '</col>',
+        '<colgroup>',
+        '<colgroup ',
+        '</colgroup>',
+        '<datalist>',
+        '<datalist ',
+        '</datalist>',
+        '<dd>',
+        '</dd>',
+        '<dd ',
+        '<del>',
+        '<del ',
+        '</del>',
+        '<details>',
+        '<details ',
+        '</details>',
+        '<dfn>',
+        '</dfn>',
+        '<dfn ',
+        '<dialog>',
+        '<dialog ',
+        '</dialog>',
+        '<dir>',
+        '</dir>',
+        '<dir ',
+        '<div>',
+        '<div ',
+        '</div>',
+        '<dl>',
+        '</dl>',
+        '<dl ',
+        '<dt>',
+        '</dt>',
+        '<dt ',
+        '<em>',
+        '<em ',
+        '</em>',
+        '<embed>',
+        '</embed>',
+        '<embed ',
+        '<fieldset>',
+        '<fieldset ',
+        '</fieldset>',
+        '<figcaption>',
+        '</figcaption>',
+        '<figcaption ',
+        '<figure>',
+        '<figure ',
+        '</figure>',
+        '<font ',
+        '</font>',
+        '<font>',
+        '<footer>',
+        '</footer>',
+        '<footer ',
+        '<form>',
+        '</form>',
+        '<form ',
+        '<frame>',
+        '</frame>',
+        '<frame ',
+        '<frameset>',
+        '<frameset ',
+        '</frameset>',
+        '<h1>',
+        '</h1>',
+        '<h1 ',
+        '<h2>',
+        '</h2>',
+        '<h2 ',
+        '<h3>',
+        '</h3>',
+        '<h3 ',
+        '<h4>',
+        '</h4>',
+        '<h4 ',
+        '<h5>',
+        '</h5>',
+        '<h5 ',
+        '<h6>',
+        '</h6>',
+        '<h6 ',
+        '<head>',
+        '</head>',
+        '<head ',
+        '<header>',
+        '<header ',
+        '</header>',
+        '<hr>',
+        '<hr ',
+        '</hr>',
+        '<html>',
+        '</html>',
+        '<html ',
+        '<i>',
+        '</i>',
+        '<iframe>',
+        '<iframe ',
+        '</iframe>',
+        '<img>',
+        '</img>',
+        '<img ',
+        '<input>',
+        '</input>',
+        '<input ',
+        '<ins>',
+        '<ins ',
+        '</ins>',
+        '</kbd>',
+        '<kbd>',
+        '<kbd ',
+        '<label>',
+        '<label ',
+        '</label>',
+        '<legend>',
+        '<legend ',
+        '</legend>',
+        '<li ',
+        '<li>',
+        '</li>',
+        '<link>',
+        '<link ',
+        '</link>',
+        '<main>',
+        '<main ',
+        '</main>',
+        '<map>',
+        '</map>',
+        '<map ',
+        '<mark>',
+        '</mark>',
+        '<mark ',
+        '<meta>',
+        '</meta>',
+        '<meta ',
+        '<meter>',
+        '</meter>',
+        '<meter ',
+        '<nav>',
+        '</nav>',
+        '<nav ',
+        '<noframes>',
+        '</noframes>',
+        '<noframes ',
+        '<noscript>',
+        '<noscript ',
+        '</noscript>',
+        '<object>',
+        '<object ',
+        '</object>',
+        '<ol>',
+        '</ol>',
+        '<ol ',
+        '<optgroup>',
+        '</optgroup>',
+        '<optgroup ',
+        '<option>',
+        '</option>',
+        '<option ',
+        '<output>',
+        '<output ',
+        '</output>',
+        '<p>',
+        '</p>',
+        '<p ',
+        '<param>',
+        '<param ',
+        '</param>',
+        '<pre>',
+        '</pre>',
+        '<pre ',
+        '<progress>',
+        '<progress ',
+        '</progress>',
+        '<q>',
+        '</q>',
+        '<q ',
+        '<rp>',
+        '</rp>',
+        '<rp ',
+        '<rt>',
+        '<rt ',
+        '</rt>',
+        '<ruby>',
+        '</ruby>',
+        '<ruby ',
+        '<s>',
+        '</s>',
+        '<s ',
+        '<samp>',
+        '</samp>',
+        '<samp ',
+        '<section>',
+        '</section>',
+        '<section ',
+        '<select>',
+        '</select>',
+        '<select ',
+        '<small>',
+        '<small ',
+        '</small>',
+        '<source>',
+        '</source>',
+        '<source ',
+        '<span>',
+        '<span ',
+        '</span>',
+        '<strike>',
+        '</strike>',
+        '<strike ',
+        '<strong>',
+        '<strong ',
+        '</strong>',
+        '<style>',
+        '</style>',
+        '<style ',
+        '<sub>',
+        '<sub ',
+        '</sub>',
+        '<summary>',
+        '</summary>',
+        '<summary ',
+        '<sup>',
+        '<sup ',
+        '</sup>',
+        '<table ',
+        '<table>',
+        '</table>',
+        '<tbody>',
+        '</tbody>',
+        '<tbody ',
+        '<td>',
+        '<td ',
+        '</td>',
+        '<textarea>',
+        '<textarea ',
+        '</textarea>',
+        '<tfoot>',
+        '</tfoot>',
+        '<tfoot ',
+        '<th>',
+        '</th>',
+        '<th ',
+        '<thead>',
+        '</thead>',
+        '<thead ',
+        '<time>',
+        '<time ',
+        '</time>',
+        '<title>',
+        '</title>',
+        '<title ',
+        '<tr>',
+        '<tr ',
+        '</tr>',
+        '<track>',
+        '</track>',
+        '<track ',
+        '<tt>',
+        '</tt>',
+        '<tt ',
+        '<u>',
+        '</u>',
+        '<ul ',
+        '<ul>',
+        '</ul>',
+        '<var>',
+        '<var ',
+        '</var>',
+        '<video>',
+        '</video>',
+        '<video ',
+        '<wbr>',
+        '<wbr ',
+        '</wbr>',
+    ];
+    const t = {
+        escapeCustomTags(t) {
+            if (!t || typeof t !== 'string')
+                return t;
+            for (var r = 0, a = [], i = [], o = [], s = t, n = 0; n <= t.length; n++)
+                t[n] == '<'
+                    ? i.push({ index: n, type: 'lt' })
+                    : t[n] == '>' && i.push({ index: n, type: 'gt' });
+            for (n = 0; n <= t.length; n++) {
+                var d = t.indexOf('<', r);
+                if (d === -1)
+                    break;
+                const l = t.indexOf(' ', d + 1);
+                const p = t.indexOf('/>', d + 1);
+                var u = t.indexOf('>', d + 1);
+                const b = [];
+                l != -1 && b.push(l), p != -1 && b.push(p), u != -1 && b.push(u);
+                var f;
+                const m = Math.min(...b);
+                var h = t.substring(d, m + 1);
+                (f = e.some(e => {
+                    if (h === e)
+                        return a.push({ index: d, type: 'lt' }, { index: u, type: 'gt' }), !0;
+                })),
+                    (n = m),
+                    f ? (r = m) : (r += 1);
+            }
+            for (n = 0; n < i.length; n++) {
+                a.some((e) => e.index === i[n].index) || o.push(i[n]);
+            }
+            for (n = o.length - 1; n >= 0; n--)
+                o[n].type == 'lt'
+                    ? (s = `${s.substring(0, o[n].index)}&lt;${s.substring(o[n].index + 1)}`)
+                    : o[n].type == 'gt' &&
+                        (s = `${s.substring(0, o[n].index)}&gt;${s.substring(o[n].index + 1)}`);
+            return s;
+        },
+        isCustomTag(t) {
+            if (!t || typeof t !== 'string')
+                return !1;
+            for (var r = !1, a = 0, i = 0; i <= t.length;) {
+                const o = t.indexOf('<', a);
+                if (o == -1)
+                    break;
+                const s = t.indexOf(' ', o + 1);
+                const n = t.indexOf('/>', o + 1);
+                const d = t.indexOf('>', o + 1);
+                const l = [];
+                s != -1 && l.push(s), n != -1 && l.push(n), d != -1 && l.push(d);
+                const p = Math.min(...l);
+                var u = t.substring(o, p + 1);
+                if ((e.some((t, a) => {
+                    if (u === t)
+                        return !0;
+                    a + 1 == e.length && (r = !0);
+                }),
+                    r))
+                    break;
+                (i = p), (a = p);
+            }
+            return r;
+        },
+        isValidTag(t) {
+            if (!t || typeof t !== 'string')
+                return !1;
+            for (var r = !1, a = 0, i = 0; i <= t.length;) {
+                const o = t.indexOf('<', a);
+                if (o == -1)
+                    break;
+                const s = t.indexOf(' ', o + 1);
+                const n = t.indexOf('/>', o + 1);
+                const d = t.indexOf('>', o + 1);
+                const l = [];
+                s != -1 && l.push(s), n != -1 && l.push(n), d != -1 && l.push(d);
+                const p = Math.min(...l);
+                var u = t.substring(o, p + 1);
+                if ((r = e.some(e => u === e)))
+                    break;
+                (i = p), r ? (a = p) : (a += 1);
+            }
+            return r;
+        },
+    };
+    return t;
+})();
+// Fix bug con trỏ input check text Value đã có thẻ <br/>
+export const spacingNonTracking = (data) => {
+    // eslint-disable-next-line prefer-regex-literals
+    const regexHasBannedPrefix = new RegExp(/<br\s*\/?>/gi);
+    if (typeof data === 'string' && regexHasBannedPrefix.test(data)) {
+        return true;
+    }
+    return false;
+};
+export const initialValue = (initValue) => {
+    try {
+        const newTextValue = convertHtmlText(initValue, 'html', {}, {}, 'input', '');
+        if (newTextValue && !newTextValue.endsWith('&nbsp;')) {
+            return `${newTextValue}&nbsp;`;
+        }
+        return newTextValue;
+    }
+    catch (err) {
+        // eslint-disable-next-line no-console
+        console.log(err);
+    }
+};
+export const mapLabelPersonalization = (type) => ({
+    [AllowDynamicType.SHORTLINK]: 'Add short link',
+    [AllowDynamicType.ADDPERSONALIZATION]: 'Add Personalization',
+}[type]);
+export const createElement = (element, attribute, inner) => {
+    try {
+        if (typeof element === 'undefined') {
+            return false;
+        }
+        if (typeof inner === 'undefined') {
+            inner = '';
+        }
+        const el = document.createElement(element);
+        if (typeof attribute === 'object') {
+            for (const key in attribute) {
+                el.setAttribute(key, attribute[key]);
+            }
+        }
+        if (!Array.isArray(inner)) {
+            inner = [inner];
+        }
+        for (let k = 0; k < inner.length; k++) {
+            if (inner[k].tagName) {
+                el.appendChild(inner[k]);
+            }
+            else {
+                el.appendChild(document.createTextNode(inner[k]));
+            }
+        }
+        return el;
+    }
+    catch (error) {
+        console.log('error', error);
+    }
+};
+export const DATA_ATTR_WITH_TYPE = [MAP_DATA_TYPE.number.value, MAP_DATA_TYPE.datetime.value];
+export const mapDataFormatAttribute = (dataIn) => {
+    const dataOut = {
+        attribute: {
+            settingsFe: dataIn,
+        },
+    };
+    if (dataIn.dataType === 'datetime') {
+        const format = dataIn.format && Object.keys(dataIn.format.config).length > 0
+            ? dataIn.format
+            : DATE_AND_TIME_DEFAULT;
+        const hasDateFormat = format.config.date && format.config.date.check;
+        const hasTimeFormat = format.config.time && format.config.time.check;
+        const dateParseFormat = format.config.format;
+        const dateParseOption = format.config.date && format.config.date.value;
+        const timeParseOption = format.config.time && format.config.time.value;
+        const timeParseFormat = format.config.time && format.config.time.timeFormat;
+        dataOut.attribute = Object.assign(Object.assign({}, dataOut.attribute), { dataType: dataIn.dataType, datetimeFormatSettings: {
+                hasDateFormat,
+                hasTimeFormat,
+                dateParseFormat,
+                dateParseOption,
+                timeParseOption,
+                timeParseFormat,
+                dateFormatString: getStringFormatDateDF({
+                    hasDateFormat,
+                    hasTimeFormat,
+                    dateParseFormat,
+                    dateParseOption,
+                    timeParseOption,
+                    timeParseFormat,
+                }),
+                type: dataIn.format.type.toLowerCase(),
+            } });
+    }
+    else if (dataIn.dataType === 'number') {
+        dataOut.attribute = Object.assign(Object.assign({}, dataOut.attribute), { dataType: dataIn.dataType, numberFormatSettings: {
+                currencyCode: dataIn.format.config.currency,
+                decimalPlaces: dataIn.format.config.decimalPlace || 0,
+                grouping: dataIn.format.config.group === 'space' ? ' ' : dataIn.format.config.group || ',',
+                decimal: dataIn.format.config.decimal || '.',
+                isCompact: dataIn.format.config.isCompactNumber || false,
+                prefixType: dataIn.format.config.prefixType,
+                type: dataIn.format.type.toLowerCase(),
+            } });
+    }
+    return dataOut;
+};
+export const regexAttrFormat = /#|{|}|".+?"|\||"/g;
+export const getBgColorByContentSourceType = (type) => {
+    let bgColor = '#E8FECA';
+    switch (type) {
+        case DYNAMIC_CONTENT_TYPE_KEY.BO_SETTINGS: {
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.VISITOR_ATTRIBUTE: {
+            bgColor = '#CAFEDD';
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.CUSTOMER_ATTRIBUTE: {
+            bgColor = '#CAE5FE';
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.EVENT_ATTRIBUTE: {
+            bgColor = '#FECACA';
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.PROMOTION_CODE: {
+            bgColor = '#D8CAFE';
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.CUSTOM_FUNCTION: {
+            bgColor = '#BBEFBE';
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    return bgColor;
+};