@antscorp/antsomi-ui 1.3.3-beta.35 → 1.3.3-beta.36

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

@@ -1,334 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-// Libraries
-import React, { useState, useLayoutEffect, useEffect, useRef, useCallback, } from 'react';
-import classnames from 'classnames';
-// Components
-import CaretPositioning from './EditCaretPositioning';
-import { WrapperInputStyle, TooltipHover } from './styled';
-import { PopupShortLink } from './PopupShortLink';
-import Icon from '@antscorp/icons';
-// Utils
-import { getObjectPropSafely, random, safeParse } from '@antscorp/antsomi-ui/es/utils';
-import { convertBreakTag, convertDivToBreakTag, convertHtmlText, genShortLinkValue, getInsertLinkPatternWithAppendSpaceEnd, handleUpdateInputPersonalization, initialValue, pasteHtmlAtCaret, removeHtmlTag, spacingNonTracking, validateHTMLTags, } from './utils';
-// Hooks
-import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
-var PATH = 'src/components/atoms/InputDynamic/InputDynamic.tsx';
-var defaultProps = {
-    value: '',
-    isViewMode: false,
-    errors: [],
-    canMultipleLine: false,
-    onError: function () { },
-    onChange: function () { },
-    addMessageToQueue: function () { },
-};
-export var InputDynamic = function (props) {
-    var value = props.value, isViewMode = props.isViewMode, errors = props.errors, disabledOpts = props.disabledOpts, canMultipleLine = props.canMultipleLine, onError = props.onError, onChange = props.onChange, addMessageToQueue = props.addMessageToQueue;
-    // States
-    var _a = useState(initialValue(value)), textValue = _a[0], setTextValue = _a[1];
-    var _b = useState({
-        keyTag: 'shortlink_static',
-        link: '',
-        urlDetected: '',
-    }), initSelectedProperties = _b[0], setInitSelectedProperties = _b[1];
-    var _c = useState(false), popoverOpenShortLink = _c[0], setPopoverOpenShortLink = _c[1];
-    var _d = useDebounce({ x: 0, y: 0 }, 200), tooltipHoverDebounce = _d[0], _tooltipHover = _d[1], setTooltipHover = _d[2];
-    // Refs
-    var caretPositionRef = useRef(null);
-    var personalizationInputRef = useRef(null);
-    var onTriggerChange = function (event) {
-        var _a;
-        if (event === void 0) { event = null; }
-        try {
-            var tmp = (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
-            if (event !== null) {
-                caretPositionRef.current = CaretPositioning.saveSelection(event.currentTarget);
-                tmp = event.currentTarget.innerHTML;
-            }
-            tmp = tmp === null || tmp === void 0 ? void 0 : tmp.replace(
-            // replace old non tracking url to detect url
-            /<button(?=[^>]*class="insert-word")[^>]*value=['"]#(?:{nontrackurl\()?(https?:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)(?:\)})?['"][^>]*>.*?<\/button>/g, function (match) {
-                var url = match.match(/(https?:\/\/[0-9a-zA-Z-\./?_=&%:#*@;]+)/);
-                if (url) {
-                    return "<span id=\"".concat(random(5), "\" class=\"detect-url\">").concat(url[1], "</span>");
-                }
-                return match; // If no match found, return the original string
-            }).replace(
-            // replace url to detect url
-            /((?<!class="detect-url">|#{shortlink(?:_static)?\(|<span style="line-height: 20px;margin-right: 8px;pointer-events:none;">)\bhttps*:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)/g, function (match) { return "<span id=\"".concat(random(5), "\" class=\"detect-url\">").concat(match, "</span>"); });
-            tmp = convertDivToBreakTag(tmp);
-            setTextValue(tmp);
-            var text = convertHtmlText(tmp, 'raw', {}, {}, 'input', 'add');
-            var textConverted = convertBreakTag(text);
-            onChange(removeHtmlTag(textConverted));
-        }
-        catch (error) {
-            if (typeof addMessageToQueue === 'function') {
-                addMessageToQueue({
-                    path: 'app/containers/UIDev/UIEditorPersonalization/Input/index.jsx',
-                    func: 'onTriggerChange',
-                    data: error,
-                });
-            }
-            // eslint-disable-next-line no-console
-            console.error(error);
-        }
-    };
-    var callback = function (type, data) {
-        var _a, _b;
-        switch (type) {
-            case 'REPLACE_DETECTED_URL': {
-                var innerHTML = getObjectPropSafely(function () { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML; }, '');
-                if (innerHTML) {
-                    // remove span url và focus vào vị trí remove để add tag shortlink vào vị trí này.
-                    var index = Array.from((_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.childNodes).findIndex(function (element) { return element.id === data.id; });
-                    var range = document.createRange(); // Tạo một đối tượng Range
-                    var sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
-                    range.setStart((_b = personalizationInputRef.current) === null || _b === void 0 ? void 0 : _b.childNodes[index], 0); // Đặt điểm bắt đầu của Range
-                    range.collapse(true); // Thu gọn Range để tập trung vào điểm bắt đầu
-                    sel === null || sel === void 0 ? void 0 : sel.removeAllRanges(); // Xóa tất cả các Range hiện có
-                    sel === null || sel === void 0 ? void 0 : sel.addRange(range); // Thêm Range mới vào Selection
-                    caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
-                    var newDataUpdate = innerHTML.replace(data.outerHTML, '');
-                    personalizationInputRef.current.innerHTML = newDataUpdate;
-                }
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    var onPaste = function (e) {
-        // cancel paste
-        e.preventDefault();
-        // get text representation of clipboard
-        var text = (e.originalEvent || e).clipboardData.getData('text/plain');
-        // insert text manually
-        document.execCommand('insertHTML', false, text);
-    };
-    var handleInsertSortLink = function (url, type) {
-        try {
-            var _a = genShortLinkValue(url, type), id = _a.id, linkValue = _a.value, linkLabel = _a.label;
-            setPopoverOpenShortLink(false);
-            if (personalizationInputRef.current instanceof HTMLElement) {
-                CaretPositioning.restoreSelection(personalizationInputRef.current, caretPositionRef.current);
-                pasteHtmlAtCaret(getInsertLinkPatternWithAppendSpaceEnd(id, linkValue, linkLabel), null);
-                onTriggerChange();
-                caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
-            }
-            setInitSelectedProperties({ link: '', keyTag: 'shortlink_static', urlDetected: '' });
-        }
-        catch (err) {
-            if (typeof addMessageToQueue === 'function') {
-                addMessageToQueue({
-                    path: 'app/containers/UIDev/UIEditorPersonalization/Input/index.jsx',
-                    func: 'handleInsertText',
-                    data: err,
-                });
-            }
-        }
-    };
-    var handleKeyPress = function (e) {
-        if (canMultipleLine)
-            return;
-        if (+e.charCode === 13) {
-            e.preventDefault();
-        }
-    };
-    var getDangerouslySetInnerHTML = function (text) {
-        if (text) {
-            var regex = /<[^<>]+>/g;
-            var tag = void 0;
-            // eslint-disable-next-line no-cond-assign
-            while ((tag = regex.exec(text))) {
-                if (!validateHTMLTags.isValidTag(tag[0])) {
-                    var finalTag = tag[0].replace('<', '&#60').replace('>', '&#62');
-                    text = text.replace(tag[0], finalTag);
-                }
-            }
-            text = text.replaceAll('\n', '<br>');
-            if (spacingNonTracking(text)) {
-                return text;
-            }
-            return safeParse(text, '').concat('<br />');
-        }
-        return '';
-    };
-    var toggleShortLinkModal = useCallback(function () {
-        setPopoverOpenShortLink(!popoverOpenShortLink);
-    }, [popoverOpenShortLink]);
-    /**
-     * [NOTE:open shortlink modal to edit]
-     */
-    useEffect(function () {
-        var handleClickTag = function (e) {
-            try {
-                e.stopPropagation();
-                if (e.target) {
-                    var _a = e.target.value, value_1 = _a === void 0 ? '' : _a;
-                    var shortLink_1 = value_1.replace(/#|{|}|/g, '').split('(');
-                    if (shortLink_1 && shortLink_1.length >= 2) {
-                        var link_1 = shortLink_1[1].substring(0, shortLink_1[1].length - 1) || '';
-                        setInitSelectedProperties(function (prev) { return (__assign(__assign({}, prev), { link: link_1, keyTag: shortLink_1[0], urlDetected: e.currentTarget })); });
-                        toggleShortLinkModal();
-                    }
-                }
-            }
-            catch (err) {
-                // eslint-disable-next-line no-console
-                console.log('err', err);
-            }
-        };
-        var listTags = Array.from(document.querySelectorAll('#ants-ui-input-personalization .input-personal .insert-word'));
-        if (listTags && listTags.length > 0) {
-            listTags.forEach(function (tag) {
-                tag.addEventListener('click', handleClickTag);
-            });
-        }
-        return function () {
-            listTags.forEach(function (tag) {
-                tag.removeEventListener('click', handleClickTag);
-            });
-        };
-    }, [textValue, toggleShortLinkModal]);
-    /** Anchor tooltip */
-    useEffect(function () {
-        var listElement = [];
-        var handleMouseOver = function (e, targetRect) {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-            var viewportTop = window.pageYOffset;
-            var viewportLeft = window.pageXOffset;
-            var offsetWidth = targetRect.width / 2;
-            var offsetHeight = targetRect.height / 2;
-            var tooltipHeight = 16;
-            var x = targetRect.left - viewportLeft + offsetWidth;
-            var y = targetRect.top - viewportTop - offsetHeight - tooltipHeight;
-            setTooltipHover({
-                x: x,
-                y: y,
-            });
-        };
-        var handleMouseOut = function (e) {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-            setTooltipHover({ x: 0, y: 0 });
-        };
-        var handleClickDetectUrl = function (e) {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-            setInitSelectedProperties(function (prev) {
-                var _a;
-                return (__assign(__assign({}, prev), { link: ((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.textContent) || '', urlDetected: e === null || e === void 0 ? void 0 : e.currentTarget }));
-            });
-            toggleShortLinkModal();
-        };
-        if (!isViewMode) {
-            var elements = document.querySelectorAll('#ants-ui-input-personalization .detect-url');
-            listElement = Array.from(elements);
-            if (listElement.length) {
-                listElement.forEach(function (element) {
-                    element.addEventListener('mouseover', function (e) {
-                        return handleMouseOver(e, element.getBoundingClientRect());
-                    });
-                    element.addEventListener('mouseout', handleMouseOut);
-                    /** Open shortlink modal */
-                    element.addEventListener('click', handleClickDetectUrl);
-                });
-            }
-        }
-        return function () {
-            listElement.forEach(function (element) {
-                element.removeEventListener('mouseover', handleMouseOver);
-                element.removeEventListener('mouseout', handleMouseOut);
-            });
-        };
-    }, [textValue, isViewMode, setTooltipHover, toggleShortLinkModal]);
-    /** Style & remove for tag shortlink button & icon remove */
-    useLayoutEffect(function () {
-        // get button Els [x] to create hover and style it
-        var iconRemoveEls = document.querySelectorAll('.editor-icon-remove');
-        var listIconRemove = iconRemoveEls && Array.from(iconRemoveEls);
-        // get button elements
-        var buttonElement = document.querySelectorAll('.insert-word');
-        var listBtnElement = buttonElement && Array.from(buttonElement);
-        var handleRemoveTag = function (e) {
-            var _a, _b, _c, _d, _e;
-            if (e && ((_a = e.target) === null || _a === void 0 ? void 0 : _a.nodeName) === 'EM' && ((_b = e.target) === null || _b === void 0 ? void 0 : _b.className) === 'editor-icon-remove') {
-                e.stopPropagation();
-                (_d = (_c = e.target) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.remove();
-                setTextValue(personalizationInputRef && ((_e = personalizationInputRef.current) === null || _e === void 0 ? void 0 : _e.innerHTML));
-            }
-        };
-        listIconRemove.forEach(function (eachIcon) {
-            eachIcon.addEventListener('click', handleRemoveTag);
-        });
-        handleUpdateInputPersonalization(listIconRemove, listBtnElement);
-        return function () {
-            listIconRemove.forEach(function (eachIcon) {
-                eachIcon.removeEventListener('click', handleRemoveTag);
-            });
-        };
-    }, [textValue]);
-    useLayoutEffect(function () {
-        try {
-            // save caret position
-            if (!personalizationInputRef.current) {
-                return;
-            }
-            // Perhaps React (whose VDOM gets outdated because we often prevent
-            // rerendering) did not update the DOM. So we update it manually now.
-            if (caretPositionRef && caretPositionRef.current) {
-                CaretPositioning.restoreSelection(personalizationInputRef.current, caretPositionRef.current);
-            }
-        }
-        catch (error) {
-            if (typeof addMessageToQueue === 'function') {
-                addMessageToQueue({
-                    path: PATH,
-                    func: 'useLayoutEffect',
-                    data: error,
-                });
-            }
-            if (typeof onError === 'function') {
-                onError(error, {
-                    component: PATH,
-                    action: 'useLayoutEffect saved caret position',
-                    args: {},
-                });
-            }
-        }
-    }, [addMessageToQueue, onError, textValue]);
-    return (React.createElement(WrapperInputStyle, { id: "ants-ui-input-personalization" },
-        React.createElement("div", { className: classnames({
-                'input-wrapper-outter': true,
-                'styles-input-wrapper': !isViewMode,
-                'input-error': (errors === null || errors === void 0 ? void 0 : errors.length) && (errors === null || errors === void 0 ? void 0 : errors.length) > 0,
-            }), style: __assign(__assign({}, (isViewMode && {
-                padding: 0,
-                minHeight: 0,
-                fontSize: 12,
-                border: 'none',
-            })), { width: '100%' }), onClick: function () { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
-            React.createElement("div", { className: "input-personal", style: {
-                    display: textValue && textValue !== '<br>' ? 'inline-block' : undefined,
-                }, contentEditable: !isViewMode, onBlur: onTriggerChange, onKeyPress: handleKeyPress, ref: personalizationInputRef, 
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML: {
-                    __html: getDangerouslySetInnerHTML(textValue),
-                }, onPaste: onPaste }),
-            React.createElement(Icon, { type: "icon-ants-search-2", onClick: function (e) {
-                    e.stopPropagation();
-                    toggleShortLinkModal();
-                }, className: "customize-antsomi-profile", style: { width: 24, height: 24 } })),
-        React.createElement(TooltipHover, { isShow: tooltipHoverDebounce.x > 0 && tooltipHoverDebounce.y > 0, top: tooltipHoverDebounce.y, left: tooltipHoverDebounce.x }, "Click on the link to convert it to a shortlink"),
-        popoverOpenShortLink && (React.createElement(PopupShortLink, { open: popoverOpenShortLink, disabledOpts: disabledOpts, onOk: handleInsertSortLink, onClose: toggleShortLinkModal, initSelectedProperties: initSelectedProperties, callback: callback }))));
-};
-InputDynamic.defaultProps = defaultProps;

package/es/components/atoms/InputDynamic/PopupShortLink.d.ts

@@ -1,16 +0,0 @@
-import { FC } from 'react';
-import type { SelectedPropertiesProps } from './InputDynamic';
-type PopupShortLinkProps = {
-    open: any;
-    onClose: Function;
-    onOk: Function;
-    disabledOpts?: DisableShortLinkTypeProps;
-    initSelectedProperties: SelectedPropertiesProps;
-    callback: Function;
-};
-export type ShortLinkType = 'individual' | 'general';
-export type DisableShortLinkTypeProps = {
-    [key in ShortLinkType]?: boolean;
-};
-export declare const PopupShortLink: FC<PopupShortLinkProps>;
-export {};

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

@@ -1,99 +0,0 @@
-// Libraries
-import React, { useEffect } from 'react';
-import { Col, Row } from 'antd';
-import { useImmer } from 'use-immer';
-// Molecules
-import { Modal } from '../../molecules';
-// Components
-import { Radio } from '../Radio';
-// Styled
-import { InputShortLink, InputWrapper } from './styled';
-// Utils
-import { validateURL } from './utils';
-var OPTIONS = [
-    {
-        value: 'individual',
-        label: 'Individual',
-    },
-    {
-        value: 'general',
-        label: 'General',
-    },
-];
-export var PopupShortLink = function (props) {
-    var open = props.open, onClose = props.onClose, onOk = props.onOk, disabledOpts = props.disabledOpts, initSelectedProperties = props.initSelectedProperties, callback = props.callback;
-    var _a = useImmer({
-        link: '',
-        type: 'individual',
-        error: '',
-    }), state = _a[0], setState = _a[1];
-    useEffect(function () {
-        var type = 'individual';
-        if (initSelectedProperties && initSelectedProperties.keyTag) {
-            type = initSelectedProperties.keyTag === 'shortlink' ? 'individual' : 'general';
-        }
-        setState(function (draft) {
-            draft.link = initSelectedProperties.link;
-            draft.type = type;
-        });
-    }, [initSelectedProperties, setState]);
-    var handleClose = function () {
-        setState(function (draft) {
-            draft.link = '';
-            draft.error = '';
-        });
-        if (onClose)
-            onClose();
-    };
-    var handleValidate = function (_a) {
-        var _b = _a.urlString, urlString = _b === void 0 ? state.link : _b, afterValidate = _a.afterValidate;
-        var isValid = validateURL(urlString);
-        setState(function (draft) {
-            draft.error = isValid ? '' : 'Invalid URL';
-        });
-        if (typeof afterValidate === 'function')
-            afterValidate(isValid);
-    };
-    var handleOnChange = function (value) {
-        if (state.error)
-            handleValidate({ urlString: value });
-        setState(function (draft) {
-            draft.link = value;
-        });
-    };
-    var handleOnOK = function () {
-        handleValidate({
-            afterValidate: function (isValid) {
-                if (isValid && onOk) {
-                    if (initSelectedProperties.urlDetected) {
-                        callback('REPLACE_DETECTED_URL', initSelectedProperties.urlDetected);
-                    }
-                    onOk(state.link, state.type);
-                    handleClose();
-                }
-            },
-        });
-    };
-    var onChangeType = function (event) {
-        setState(function (draft) {
-            draft.type = event.target.value;
-        });
-    };
-    return (React.createElement(Modal, { open: open, onCancel: handleClose, title: React.createElement("div", { style: { color: 'rgba(0, 0, 0, 0.87)', fontWeight: 'normal', fontSize: '16px' } }, "Add Short Link"), okText: "OK", cancelText: "Cancel", closable: false, onOk: handleOnOK, okButtonProps: {
-            disabled: !validateURL(state.link),
-            type: !validateURL(state.link) ? 'default' : 'primary',
-        } },
-        React.createElement(Row, null,
-            React.createElement(Col, { span: 6 },
-                React.createElement("span", { style: { fontSize: 12, color: '#000' } }, "Short link type")),
-            React.createElement(Col, { span: 18 },
-                React.createElement(Radio.Group, { onChange: onChangeType, value: state.type }, OPTIONS.map(function (each) { return (React.createElement(Radio, { key: each.value, disabled: disabledOpts && disabledOpts[each.value], name: "shortlink-type", value: each.value }, each.label)); })))),
-        React.createElement(Row, null,
-            React.createElement(Col, { span: 24 },
-                React.createElement(InputWrapper, null,
-                    React.createElement(InputShortLink, { required: true, isReverseMask: true, isHideErrMessage: true, labelColor: "#000000", id: "input-short-link-url", label: "Your URL", value: state.link, onAfterChange: handleOnChange })))),
-        !!state.error && (React.createElement(Row, null,
-            React.createElement(Col, { span: 6 }),
-            React.createElement(Col, { span: 18 },
-                React.createElement("div", null, state.error))))));
-};

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

@@ -1,2 +0,0 @@
-export { InputDynamic } from './InputDynamic';
-export type { InputDynamicProps } from './InputDynamic';

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

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

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

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export declare const WrapperInputStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SpanIcon: import("styled-components").StyledComponent<"span", any, {
-    isDisabled?: boolean | undefined;
-}, never>;
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof JSX.IntrinsicElements, any, import("../Input/Input").InputProps, any>;
-export declare const TooltipHover: import("styled-components").StyledComponent<"div", any, {
-    top: number;
-    left: number;
-    isShow: boolean;
-}, never>;

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

@@ -1,19 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-// Libraries
-import styled from 'styled-components';
-import { Input } from '../Input/Input';
-// Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export var WrapperInputStyle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  position: relative;\n\n  .input-wrapper-outter {\n    position: relative;\n    max-width: 100%;\n    min-height: 22px;\n    max-height: 6rem;\n    overflow: auto;\n    padding: 5px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .customize-antsomi-profile {\n    position: absolute;\n    font-size: 20px;\n    right: 4px;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: rgb(0, 94, 184);\n  }\n\n  .styles-input-wrapper {\n    border-bottom: 1px solid ", " !important;\n    :hover {\n      cursor: text;\n      background-color: ", ";\n      border-bottom: 1px solid ", ";\n    }\n    :focus-within {\n      background-color: ", ";\n      border-bottom: 1px solid rgb(0, 94, 184);\n    }\n    :active {\n      background-color: ", ";\n      border-bottom: 1px solid rgb(0, 94, 184);\n    }\n  }\n\n  .input-error {\n    border-bottom-color: rgb(239, 51, 64);\n  }\n\n  .customize-antsomi-profile-outter {\n    position: absolute;\n    font-size: 20px;\n    right: 2.8rem;\n    top: 2.3rem;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: ", ";\n  }\n\n  .input-personal {\n    padding: 0px 4px;\n    padding-right: 32px;\n    outline: none;\n    overflow-wrap: normal;\n    overflow: hidden;\n    text-overflow: unset;\n    white-space: normal;\n    // display: inline-block;\n\n    .detect-url {\n      background-color: #e8feca;\n      display: inline;\n      position: relative;\n      cursor: pointer;\n    }\n  }\n  /*\n  $base-color: ", ";\n  $bg-base-color: #fff;\n  $border-base-color: ", ";\n  $bg-btn-base-color: #f4f6f8; */\n\n  .antsomi-wrapper-personalization {\n    width: 100%;\n    height: 100%;\n    background: $bg-base-color;\n    border: 1px solid $border-base-color;\n    border-radius: ", "px;\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    font-family: Roboto, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;\n    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n    .header {\n      padding: 13px 20px;\n      position: relative;\n\n      .title {\n        font-size: 20px;\n        font-weight: bold;\n        color: $base-color;\n      }\n\n      &:before {\n        content: '';\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        height: 15px;\n        width: 95%;\n        border-bottom: 1px solid $border-base-color;\n      }\n    }\n\n    .body {\n      overflow: auto;\n      flex-grow: 1;\n      padding: 0 5px;\n\n      table {\n        width: 100%;\n        height: 100%;\n        table-layout: fixed;\n        border-collapse: collapse;\n        border-spacing: 0;\n        th,\n        td {\n          text-align: left;\n          padding: 0 15px;\n        }\n      }\n    }\n\n    .footer {\n      display: flex;\n      padding: 15px 25px;\n      justify-content: flex-end;\n    }\n  }\n\n  .btn {\n    min-width: 100px;\n    min-height: 40px;\n    border-radius: ", "px;\n    outline: none;\n    border: none;\n    cursor: pointer;\n\n    &:focus {\n      outline: none !important;\n    }\n  }\n\n  .group-btn {\n    width: 222px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .btn-default {\n    background-color: $bg-btn-base-color;\n    color: $base-color;\n    border: 1px solid #d7dfe8;\n\n    &:hover {\n      background-color: #e3e9ef;\n    }\n  }\n\n  .btn-blue {\n    background-color: $base-color;\n    color: $bg-base-color;\n    border: 1px solid #707070;\n    opacity: 0.9;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  .input-outline {\n    border-top-style: hidden;\n    border-right-style: hidden;\n    border-left-style: hidden;\n    height: 27px;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.4);\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .insert-word {\n    padding: 5px 8px;\n    color: white;\n    border: 1px solid;\n    border-radius: 20px;\n    height: 30px;\n    cursor: pointer;\n    line-height: 1px;\n    background: #bbefbe;\n\n    &.blue {\n      background: #3c39ba;\n    }\n\n    &.orange {\n      background: #fbac00;\n    }\n\n    &.violet-pc {\n      background: #6750a7;\n    }\n\n    &.disabled {\n      background: #ccc;\n    }\n    &.custom {\n      background: #bbefbe;\n      // border: 1px solid #BBEFBE;\n    }\n\n    em {\n      color: white;\n      font-style: normal;\n      font-size: 13px;\n      opacity: 0;\n      user-select: none;\n    }\n\n    &:hover {\n      em {\n        opacity: 1;\n      }\n    }\n  }\n"], ["\n  color: ", ";\n  position: relative;\n\n  .input-wrapper-outter {\n    position: relative;\n    max-width: 100%;\n    min-height: 22px;\n    max-height: 6rem;\n    overflow: auto;\n    padding: 5px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .customize-antsomi-profile {\n    position: absolute;\n    font-size: 20px;\n    right: 4px;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: rgb(0, 94, 184);\n  }\n\n  .styles-input-wrapper {\n    border-bottom: 1px solid ", " !important;\n    :hover {\n      cursor: text;\n      background-color: ", ";\n      border-bottom: 1px solid ", ";\n    }\n    :focus-within {\n      background-color: ", ";\n      border-bottom: 1px solid rgb(0, 94, 184);\n    }\n    :active {\n      background-color: ", ";\n      border-bottom: 1px solid rgb(0, 94, 184);\n    }\n  }\n\n  .input-error {\n    border-bottom-color: rgb(239, 51, 64);\n  }\n\n  .customize-antsomi-profile-outter {\n    position: absolute;\n    font-size: 20px;\n    right: 2.8rem;\n    top: 2.3rem;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: ", ";\n  }\n\n  .input-personal {\n    padding: 0px 4px;\n    padding-right: 32px;\n    outline: none;\n    overflow-wrap: normal;\n    overflow: hidden;\n    text-overflow: unset;\n    white-space: normal;\n    // display: inline-block;\n\n    .detect-url {\n      background-color: #e8feca;\n      display: inline;\n      position: relative;\n      cursor: pointer;\n    }\n  }\n  /*\n  $base-color: ", ";\n  $bg-base-color: #fff;\n  $border-base-color: ", ";\n  $bg-btn-base-color: #f4f6f8; */\n\n  .antsomi-wrapper-personalization {\n    width: 100%;\n    height: 100%;\n    background: $bg-base-color;\n    border: 1px solid $border-base-color;\n    border-radius: ", "px;\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    font-family: Roboto, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;\n    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n    .header {\n      padding: 13px 20px;\n      position: relative;\n\n      .title {\n        font-size: 20px;\n        font-weight: bold;\n        color: $base-color;\n      }\n\n      &:before {\n        content: '';\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        height: 15px;\n        width: 95%;\n        border-bottom: 1px solid $border-base-color;\n      }\n    }\n\n    .body {\n      overflow: auto;\n      flex-grow: 1;\n      padding: 0 5px;\n\n      table {\n        width: 100%;\n        height: 100%;\n        table-layout: fixed;\n        border-collapse: collapse;\n        border-spacing: 0;\n        th,\n        td {\n          text-align: left;\n          padding: 0 15px;\n        }\n      }\n    }\n\n    .footer {\n      display: flex;\n      padding: 15px 25px;\n      justify-content: flex-end;\n    }\n  }\n\n  .btn {\n    min-width: 100px;\n    min-height: 40px;\n    border-radius: ", "px;\n    outline: none;\n    border: none;\n    cursor: pointer;\n\n    &:focus {\n      outline: none !important;\n    }\n  }\n\n  .group-btn {\n    width: 222px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .btn-default {\n    background-color: $bg-btn-base-color;\n    color: $base-color;\n    border: 1px solid #d7dfe8;\n\n    &:hover {\n      background-color: #e3e9ef;\n    }\n  }\n\n  .btn-blue {\n    background-color: $base-color;\n    color: $bg-base-color;\n    border: 1px solid #707070;\n    opacity: 0.9;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  .input-outline {\n    border-top-style: hidden;\n    border-right-style: hidden;\n    border-left-style: hidden;\n    height: 27px;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.4);\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .insert-word {\n    padding: 5px 8px;\n    color: white;\n    border: 1px solid;\n    border-radius: 20px;\n    height: 30px;\n    cursor: pointer;\n    line-height: 1px;\n    background: #bbefbe;\n\n    &.blue {\n      background: #3c39ba;\n    }\n\n    &.orange {\n      background: #fbac00;\n    }\n\n    &.violet-pc {\n      background: #6750a7;\n    }\n\n    &.disabled {\n      background: #ccc;\n    }\n    &.custom {\n      background: #bbefbe;\n      // border: 1px solid #BBEFBE;\n    }\n\n    em {\n      color: white;\n      font-style: normal;\n      font-size: 13px;\n      opacity: 0;\n      user-select: none;\n    }\n\n    &:hover {\n      em {\n        opacity: 1;\n      }\n    }\n  }\n"])), (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText, (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1, (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue1, (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue, (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1, (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw0, (_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw0, (_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue7, (_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue7, (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw3_5, (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.borderRadius, (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.borderRadius);
-export var SpanIcon = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  font-size: 20px;\n"], ["\n  ", "\n  font-size: 20px;\n"])), function (_a) {
-    var isDisabled = _a.isDisabled;
-    return isDisabled && "cursor: not-allowed !important; opacity: 0.5;";
-});
-export var InputWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .input__wrapper {\n    display: flex;\n    align-items: center;\n\n    div.--default {\n      min-width: 120px;\n    }\n  }\n"], ["\n  .input__wrapper {\n    display: flex;\n    align-items: center;\n\n    div.--default {\n      min-width: 120px;\n    }\n  }\n"])));
-export var InputShortLink = styled(Input)(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
-export var TooltipHover = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: fixed;\n  left: ", ";\n  top: ", ";\n\n  display: ", ";\n  justify-content: center;\n  align-items: center;\n\n  background: rgba(0, 0, 0, 0.62);\n  transition: opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n    transform 124ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  color: #fff;\n  font-size: 12px;\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n    0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  height: 24px;\n  width: auto;\n  z-index: 999;\n  padding: 5px 10px;\n  user-select: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  box-sizing: border-box;\n"], ["\n  position: fixed;\n  left: ", ";\n  top: ", ";\n\n  display: ", ";\n  justify-content: center;\n  align-items: center;\n\n  background: rgba(0, 0, 0, 0.62);\n  transition: opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n    transform 124ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  color: #fff;\n  font-size: 12px;\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n    0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  height: 24px;\n  width: auto;\n  z-index: 999;\n  padding: 5px 10px;\n  user-select: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  box-sizing: border-box;\n"])), function (props) { return "".concat(props.left, "px"); }, function (props) { return "".concat(props.top, "px"); }, function (props) { return (props.isShow ? 'flex' : 'none'); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/es/components/atoms/InputDynamic/utils.d.ts

@@ -1,22 +0,0 @@
-export declare function validateURL(string: string): boolean;
-export declare const getInsertPatternWithAppendSpaceEnd: (id: any, code: any, label: any, bgColor: any) => string;
-export declare const genShortLinkValue: (url: string, type?: string) => {
-    id: string;
-    value: string;
-    label: string;
-};
-export declare const getInsertPattern: (id: any, code: any, label: any, bgColor: any) => string;
-export declare const convertHtmlText: (htmlText: string, format: string | undefined, state: any, objectWidgetInput?: {}, type?: string, init?: string) => string;
-export declare const handleUpdateInputPersonalization: (listIconRemove: any, listBtnElement: any) => void;
-export declare function removeHtmlTag(text: any): string;
-export declare function convertBreakTag(text: any): any;
-export declare function convertDivToBreakTag(text: any): any;
-export declare const pasteHtmlAtCaret: (html: any, selectPastedContent: any, callback?: any) => void;
-export declare const getInsertLinkPatternWithAppendSpaceEnd: (id: string | number, value: string, label: string) => string;
-export declare const validateHTMLTags: {
-    escapeCustomTags(t: any): any;
-    isCustomTag(t: any): boolean;
-    isValidTag(t: any): boolean;
-};
-export declare const spacingNonTracking: (data: any) => boolean;
-export declare const initialValue: (initValue: string) => string | undefined;