mediacube-ui-v2 0.0.8 → 0.0.9

package/dist/components/elements/McFieldText/McFieldText.vue.js

@@ -0,0 +1,1404 @@
+import { IMaskComponent, IMask } from 'vue-imask';
+import McTitle from '@/components/elements/McTitle/McTitle.vue';
+import McButton from '@/components/elements/McButton/McButton.vue';
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue';
+import McTooltip from '@/components/elements/McTooltip/McTooltip.vue';
+import { Spaces } from '@/types/styles/Spaces';
+import { computed, onMounted, ref, useAttrs, useSlots } from 'vue';
+import { Directions } from '@/enums/ui/Directions';
+import { useFieldErrors } from '@/composables/useFieldErrors';
+import { InputTypes, Autocomplete } from '@/enums/Input';
+import { useTextareaAutosize } from '@vueuse/core';
+import { ButtonSize, ButtonType, HorizontalAlignment, TitleVariations, Weights } from '@/enums';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const { textarea } = useTextareaAutosize();
+const emit = defineEmits(['update:modelValue', 'keydown', 'copy']);
+const slots = useSlots();
+const attrs = useAttrs();
+const props = defineProps({
+    /**
+     *  Значение
+     *
+     */
+    modelValue: {
+        type: [String, Number],
+        default: null
+    },
+    /**
+     *  Тип:
+     * `textarea, textarea-autosize и
+     * нативные как text, password, email и т.д.`
+     *
+     * кастомный num - разрешает ввод только цифр и дробных чисел, без ислчений ввиде буквы 'E'
+     * кастомный int - разрешает ввод только целочисленных значений
+     * кастомный amount_format - форматирует ввод числовых данных разделяя на разряды(1 000 000)
+     * date - добавляет placeholder, маску и ограничения ввода
+     * uppercase\lowercase - форматирует текст согласну значению (верхний\нижний регистр)
+     * phone_number - добавляет '+' к номеру телефона при фокусе без возможности удалить его
+     */
+    type: {
+        type: String,
+        default: InputTypes.Text
+    },
+    /**
+     *  Заголовок поля:
+     *
+     */
+    title: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Маска поля:
+     *
+     * tokens - https://imask.js.org/guide.html
+     *
+     */
+    mask: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Вспомогательный текст под инпутом:
+     *
+     */
+    helpText: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Отключенное состояние
+     *
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Ошибки
+     *
+     */
+    errors: {
+        type: Array,
+        default: null
+    },
+    /**
+     *  Placeholder
+     *
+     */
+    placeholder: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Name
+     *
+     */
+    name: {
+        type: String,
+        required: true
+    },
+    /**
+     *  плейсхолдеры для короткого обозначения даты (для маски dd.mm.yyyy)
+     *  {
+     *      date: 'd',
+     *      month: 'm',
+     *      year: 'y',
+     *  }
+     *
+     */
+    dateMaskPlaceholder: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     *  Максимальная длина строки в инпуте
+     *
+     */
+    maxLength: {
+        type: Number,
+        default: null
+    },
+    /**
+     *  Состояние копирования
+     *
+     */
+    copy: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Автокомплит введённого ранее текста: on, off
+     *
+     */
+    autocomplete: {
+        type: String,
+        default: Autocomplete.On
+    },
+    /**
+     *  только чтение текста
+     *
+     */
+    readOnly: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Атрибут tabindex для главного элемента
+     *
+     */
+    tabindex: {
+        type: [String, Number]
+    },
+    /**
+     * Tooltip для кнопка "показать пароль"
+     *
+     */
+    passwordTooltip: {
+        type: String,
+        default: 'Show/Hide'
+    },
+    /**
+     * Tooltip для кнопка "Скрыть пароль", если не указывать, то будет аналогичен "показать"
+     *
+     */
+    passwordHideTooltip: {
+        type: String,
+        default: null
+    },
+    /**
+     * Очищаем данные от маски на выходе
+     */
+    clearOutput: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Кастомные настройки для маски
+     * См. https://imask.js.org/guide.html
+     *
+     * Например:
+     *  {
+     *   autofix: true,
+     *    blocks: {
+     *      d: {mask: IMask.MaskedRange, placeholderChar: 'd', from: 1, to: 31, maxLength: 2},
+     *      m: {mask: IMask.MaskedRange, placeholderChar: 'm', from: 1, to: 12, maxLength: 2},
+     *      Y: {mask: IMask.MaskedRange, placeholderChar: 'y', from: 1900, to: 2999, maxLength: 4}
+     *    }
+     *  }
+     */
+    maskOptions: {
+        type: Object,
+        default: null
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Для какого языка поле ввода
+     */
+    locale: {
+        type: String,
+        default: null
+    },
+    /**
+     * Мобильное ли разрешение
+     * (Используется для триггера тултипа в кнопке с паролем)
+     */
+    isMobile: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Свойство на ограничение количества символов после точки для числовых типов (num || amount_format)
+     */
+    maxDecimals: {
+        type: Number,
+        default: 2
+    },
+    dir: {
+        type: String,
+        default: Directions.Ltr
+    }
+});
+const prependWidth = ref(0);
+const appendWidth = ref(0);
+const prettyType = ref(props.type);
+const fieldErrors = useFieldErrors(props.errors);
+const isRtl = computed(() => {
+    return props.dir === Directions.Rtl;
+});
+const classes = computed(() => {
+    return {
+        'mc-field-text': true,
+        'mc-field-text--error': !!fieldErrors.errorText.value,
+        'mc-field-text--textarea': isTextarea.value,
+        'mc-field-text--textarea-autosize': isTextareaAutosize.value,
+        'mc-field-text--disabled': props.disabled,
+        'mc-field-text--copy': props.copy,
+        'mc-field-text--rtl': isRtl.value
+    };
+});
+const computedTitle = computed(() => {
+    return `${props.title}${props.required ? ' *' : ''}`;
+});
+const isDate = computed(() => {
+    return prettyType.value === InputTypes.Date;
+});
+const isMaskVisible = computed(() => {
+    return !!props.mask || !!props.maskOptions || isDate.value;
+});
+const isTextarea = computed(() => {
+    return props.type === InputTypes.Textarea;
+});
+const isTextareaAutosize = computed(() => {
+    return props.type === InputTypes.TextareaAutosize;
+});
+const isPassword = computed(() => {
+    return props.type === InputTypes.Password;
+});
+const isAmountFormat = computed(() => {
+    return props.type === InputTypes.AmountFormat;
+});
+const hasCharCounter = computed(() => {
+    return !!props.maxLength && (isTextarea.value || isTextareaAutosize.value);
+});
+const isPasswordType = computed(() => {
+    return prettyType.value === InputTypes.Password;
+});
+const passwordIcon = computed(() => {
+    return isPasswordType.value ? 'visibility' : 'visibility_off';
+});
+const charCounter = computed(() => {
+    return props.modelValue ? String(props.modelValue).length : 0;
+});
+const charCounterTitle = computed(() => {
+    return `${charCounter.value}/${props.maxLength}`;
+});
+const charCounterColor = computed(() => {
+    return props.maxLength < +charCounter.value ? 'red' : 'dark-gray';
+});
+const dateMask = computed(() => {
+    return {
+        mask: Date,
+        autofix: true,
+        blocks: {
+            d: {
+                mask: IMask.MaskedRange,
+                placeholderChar: props.dateMaskPlaceholder.date || 'd',
+                from: 1,
+                to: 31,
+                maxLength: 2
+            },
+            m: {
+                mask: IMask.MaskedRange,
+                placeholderChar: props.dateMaskPlaceholder.month || 'm',
+                from: 1,
+                to: 12,
+                maxLength: 2
+            },
+            Y: {
+                mask: IMask.MaskedRange,
+                placeholderChar: props.dateMaskPlaceholder.year || 'y',
+                from: 1900,
+                to: 2999,
+                maxLength: 4
+            }
+        }
+    };
+});
+const maskInputAttrs = computed(() => {
+    return {
+        ...inputAttrs.value,
+        mask: props.mask,
+        lazy: false,
+        overwrite: false,
+        unmask: props.clearOutput,
+        definitions: {
+            '#': /./
+        },
+        readonly: props.readOnly,
+        maxlength: props.maxLength,
+        type: 'tel',
+        ...attrs,
+        ...(props.maskOptions ?? {}),
+        ...(isDate.value ? dateMask.value : {})
+    };
+});
+const computedValue = computed({
+    get() {
+        if (isAmountFormat.value && !isRtl.value) {
+            return getAmountFormat(String(props.modelValue));
+        }
+        else
+            return props.modelValue;
+    },
+    set(value) {
+        fieldErrors.toggleErrorVisible();
+        emit('update:modelValue', value);
+    }
+});
+const handleInput = (e) => {
+    computedValue.value = getPreparedInputValue(e);
+};
+const inputAttrs = computed(() => {
+    return {
+        style: inputStyles.value,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        name: props.name,
+        id: props.name,
+        autocomplete: props.autocomplete,
+        tabindex: props.tabindex,
+        ...attrs,
+        class: ['mc-field-text__input', attrs.class || ''].join(' ')
+    };
+});
+const inputStyles = computed(() => {
+    const space = parseInt(Spaces['150']);
+    let bottomStyle = {};
+    if (isTextarea.value || isTextareaAutosize.value) {
+        const spaceBottomToken = hasCharCounter.value ? '400' : '150';
+        const spaceBottomValue = Spaces[spaceBottomToken];
+        bottomStyle = { paddingBottom: `${+spaceBottomValue.replace('px', '') - 1}px` };
+    }
+    return {
+        paddingInlineStart: prependWidth.value && `${prependWidth.value + space}px`,
+        paddingInlineEnd: appendWidth.value && `${appendWidth.value + space}px`,
+        ...(!isTextarea.value && !isTextareaAutosize.value ? { boxSizing: 'border-box' } : {}),
+        ...bottomStyle
+    };
+});
+onMounted(() => {
+    calculatePadding();
+});
+const setDecimalsLimit = (val) => {
+    if (val && props.maxDecimals) {
+        const [integerPart, decimalPart] = val.split('.');
+        if (decimalPart?.length > props.maxDecimals) {
+            return `${integerPart}.${decimalPart.slice(0, props.maxDecimals)}`;
+        }
+    }
+    return val;
+};
+/**
+ * Remove leading zero from input if length > 1 && number isn't decimal
+ * */
+const removeLeadingZero = (val) => {
+    let result = val;
+    const [first_char] = val || [];
+    if (val.length > 1 && +first_char === 0 && val.indexOf('.') === -1)
+        result = val.slice(1);
+    return result;
+};
+const getPreparedInputValue = (e) => {
+    const target = e.target;
+    let value = isDate.value && target && target.value ? target.value?.substring(0, 10) : target.value;
+    let cursor_position = getCaretPos(target)?.start;
+    let prepared_value = formattedToNumber(value);
+    switch (props.type) {
+        case InputTypes.Num: {
+            //eslint-disable-next-line
+            let [num] = /-?\d*[\.]?\d*/.exec(String(value)) || [];
+            num = setDecimalsLimit(num);
+            num = removeLeadingZero(num);
+            value = num;
+            target.value = num;
+            break;
+        }
+        case InputTypes.Int: {
+            let [int] = /-?\d*/.exec(String(target.value)) || [];
+            int = removeLeadingZero(int);
+            value = int;
+            target.value = int;
+            break;
+        }
+        case InputTypes.AmountFormat: {
+            value = setDecimalsLimit(value);
+            value = removeLeadingZero(value);
+            prepared_value = formattedToNumber(value);
+            const float_value = parseFloat(prepared_value);
+            const without_spaces_value = prepared_value.replace(/ /gm, '');
+            value = prepared_value
+                ? String(float_value) === without_spaces_value
+                    ? float_value
+                    : without_spaces_value || float_value || prepared_value
+                : null;
+            const formatted_value = getAmountFormat(prepared_value);
+            target.value = isRtl.value ? formatted_value.replace(/ /gm, '') : formatted_value;
+            const space_length = target.value?.slice(0, cursor_position).replace(/[^ ]/gm, '')?.length || 0;
+            setCaretPos(target, cursor_position + space_length, cursor_position + space_length);
+            break;
+        }
+        case InputTypes.Uppercase: {
+            value = value?.toUpperCase();
+            target.value = value;
+            setCaretPos(target, cursor_position, cursor_position);
+            break;
+        }
+        case InputTypes.Lowercase: {
+            value = value?.toLowerCase();
+            target.value = value;
+            setCaretPos(target, cursor_position, cursor_position);
+            break;
+        }
+        case InputTypes.Password:
+            value = value?.replace(/ /gm, '');
+            target.value = value;
+            setCaretPos(target, cursor_position, cursor_position);
+            break;
+        case InputTypes.PhoneNumber:
+            if (value.length === 0)
+                value = '+';
+            if (value.charAt(0) !== '+')
+                value = '+' + value;
+            value = value.replace(/(?!^)\D/g, '');
+            target.value = value;
+            break;
+    }
+    return value;
+};
+const prepareHandleKeyDown = (e) => {
+    switch (props.type) {
+        case InputTypes.AmountFormat:
+        case InputTypes.Num: {
+            if (e.key === '.' && typeof props.modelValue === 'string' && props.modelValue?.includes('.')) {
+                e.preventDefault();
+            }
+            break;
+        }
+    }
+    emit('keydown', e);
+};
+const formattedToNumber = (value) => {
+    if (!value)
+        return value;
+    //eslint-disable-next-line
+    const [first] = /-?\d*[\.]?\d*/.exec(String(value)?.replace(/ /gm, '')?.trim()) || [];
+    return first;
+};
+const setCaretPos = (ctrl, start, end) => {
+    if (ctrl.setSelectionRange) {
+        ctrl.focus();
+        ctrl.setSelectionRange(start, end);
+    }
+};
+const getCaretPos = (ctrl) => {
+    if (ctrl.selectionStart || ctrl.selectionStart === 0) {
+        return { start: ctrl.selectionStart, end: ctrl.selectionEnd };
+    }
+    else {
+        return { start: 0, end: 0 };
+    }
+};
+const getAmountFormat = (value) => {
+    const formatted_number = formattedToNumber(value);
+    const has_fraction = !!String(formatted_number)?.match(/\./);
+    const [int, fraction] = String(formatted_number)
+        //eslint-disable-next-line
+        .replace(/[^\d\.-]/g, '')
+        .replace(/\B(?=(?:\d{3})+(?!\d))/g, ' ')
+        .split('.');
+    const formatted_values = [int, fraction?.replace(/ /gm, '') || ''];
+    if (has_fraction) {
+        return formatted_values.join('.');
+    }
+    return formatted_values.filter((v) => !!v).join('.');
+};
+const calculatePadding = () => {
+    prependWidth.value = +calculateSlotPadding('prepend');
+    appendWidth.value = +calculateSlotPadding('append');
+};
+const calculateSlotPadding = (name) => {
+    const tokenSpace = parseInt(Spaces['50']);
+    let result = slots[name]
+        //@ts-ignore
+        ? (slots[name] || []).reduce((acc) => {
+            return acc + tokenSpace;
+        }, 0) + tokenSpace
+        : tokenSpace;
+    if (name === 'prepend')
+        return result;
+    /**
+     *  Также увеличиваем padding при наличии кнопки копирования и если тип password
+     */
+    const iconSpace = parseInt(Spaces['300']);
+    result = result ? result + tokenSpace : tokenSpace;
+    props.copy && (result += iconSpace);
+    isPassword.value && (result += iconSpace);
+    return result;
+};
+const handlerCopy = () => {
+    /**
+     * Событие по кнопке копирования
+     */
+    emit('copy', props.modelValue);
+};
+const togglePasswordVisibility = () => {
+    prettyType.value = isPasswordType.value ? InputTypes.Text : InputTypes.Password;
+}; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Значение
+         *
+         */
+        modelValue: {
+            type: [String, Number],
+            default: null
+        },
+        /**
+         *  Тип:
+         * `textarea, textarea-autosize и
+         * нативные как text, password, email и т.д.`
+         *
+         * кастомный num - разрешает ввод только цифр и дробных чисел, без ислчений ввиде буквы 'E'
+         * кастомный int - разрешает ввод только целочисленных значений
+         * кастомный amount_format - форматирует ввод числовых данных разделяя на разряды(1 000 000)
+         * date - добавляет placeholder, маску и ограничения ввода
+         * uppercase\lowercase - форматирует текст согласну значению (верхний\нижний регистр)
+         * phone_number - добавляет '+' к номеру телефона при фокусе без возможности удалить его
+         */
+        type: {
+            type: String,
+            default: InputTypes.Text
+        },
+        /**
+         *  Заголовок поля:
+         *
+         */
+        title: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Маска поля:
+         *
+         * tokens - https://imask.js.org/guide.html
+         *
+         */
+        mask: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         *
+         */
+        helpText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: null
+        },
+        /**
+         *  Placeholder
+         *
+         */
+        placeholder: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Name
+         *
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  плейсхолдеры для короткого обозначения даты (для маски dd.mm.yyyy)
+         *  {
+         *      date: 'd',
+         *      month: 'm',
+         *      year: 'y',
+         *  }
+         *
+         */
+        dateMaskPlaceholder: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Максимальная длина строки в инпуте
+         *
+         */
+        maxLength: {
+            type: Number,
+            default: null
+        },
+        /**
+         *  Состояние копирования
+         *
+         */
+        copy: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Автокомплит введённого ранее текста: on, off
+         *
+         */
+        autocomplete: {
+            type: String,
+            default: Autocomplete.On
+        },
+        /**
+         *  только чтение текста
+         *
+         */
+        readOnly: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         *
+         */
+        tabindex: {
+            type: [String, Number]
+        },
+        /**
+         * Tooltip для кнопка "показать пароль"
+         *
+         */
+        passwordTooltip: {
+            type: String,
+            default: 'Show/Hide'
+        },
+        /**
+         * Tooltip для кнопка "Скрыть пароль", если не указывать, то будет аналогичен "показать"
+         *
+         */
+        passwordHideTooltip: {
+            type: String,
+            default: null
+        },
+        /**
+         * Очищаем данные от маски на выходе
+         */
+        clearOutput: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Кастомные настройки для маски
+         * См. https://imask.js.org/guide.html
+         *
+         * Например:
+         *  {
+         *   autofix: true,
+         *    blocks: {
+         *      d: {mask: IMask.MaskedRange, placeholderChar: 'd', from: 1, to: 31, maxLength: 2},
+         *      m: {mask: IMask.MaskedRange, placeholderChar: 'm', from: 1, to: 12, maxLength: 2},
+         *      Y: {mask: IMask.MaskedRange, placeholderChar: 'y', from: 1900, to: 2999, maxLength: 4}
+         *    }
+         *  }
+         */
+        maskOptions: {
+            type: Object,
+            default: null
+        },
+        required: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Для какого языка поле ввода
+         */
+        locale: {
+            type: String,
+            default: null
+        },
+        /**
+         * Мобильное ли разрешение
+         * (Используется для триггера тултипа в кнопке с паролем)
+         */
+        isMobile: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Свойство на ограничение количества символов после точки для числовых типов (num || amount_format)
+         */
+        maxDecimals: {
+            type: Number,
+            default: 2
+        },
+        dir: {
+            type: String,
+            default: Directions.Ltr
+        }
+    },
+    emits: {},
+});
+;
+let __VLS_functionalComponentProps;
+function __VLS_template() {
+    const __VLS_ctx = {};
+    const __VLS_localComponents = {
+        ...{},
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_components;
+    const __VLS_localDirectives = {
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_directives;
+    let __VLS_styleScopedClasses;
+    // CSS variable injection 
+    // CSS variable injection end 
+    let __VLS_resolvedLocalAndGlobalComponents;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ref: ("field"), dir: ((props.dir)), ...{ class: ((__VLS_ctx.classes)) }, });
+    // @ts-ignore navigation for `const field = ref()`
+    __VLS_ctx.field;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.label, __VLS_intrinsicElements.label)({ for: ((__VLS_ctx.name)), ...{ class: ("mc-field-text__header") }, });
+    var __VLS_0 = {};
+    if (__VLS_ctx.title) {
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(McTitle, new McTitle({ maxWidth: ("100%"), weight: ((__VLS_ctx.Weights.Medium)), }));
+        const __VLS_2 = __VLS_1({ maxWidth: ("100%"), weight: ((__VLS_ctx.Weights.Medium)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        (__VLS_ctx.computedTitle);
+        __VLS_nonNullable(__VLS_5.slots).default;
+        var __VLS_5;
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-text__inner") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-text__main") }, });
+    if (__VLS_ctx.$slots.prepend) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-text__prepend") }, });
+        var __VLS_6 = {};
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.label, __VLS_intrinsicElements.label)({ ...{ class: ("mc-field-text__input-wrapper") }, });
+    if (__VLS_ctx.isTextarea) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.textarea)({ ...{ onInput: (__VLS_ctx.handleInput) }, value: ((__VLS_ctx.computedValue)), ...(__VLS_ctx.inputAttrs), maxlength: ((__VLS_ctx.maxLength)), rows: ("1"), });
+    }
+    else if (__VLS_ctx.isTextareaAutosize) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.textarea)({ ...{ onInput: (__VLS_ctx.handleInput) }, value: ((__VLS_ctx.computedValue)), ref: ("textarea"), ...(__VLS_ctx.inputAttrs), });
+        // @ts-ignore navigation for `const textarea = ref()`
+        __VLS_ctx.textarea;
+    }
+    else {
+        if (__VLS_ctx.isMaskVisible) {
+            const __VLS_7 = __VLS_resolvedLocalAndGlobalComponents.IMaskComponent;
+            /** @type { [typeof __VLS_components.IMaskComponent, typeof __VLS_components.iMaskComponent, ] } */
+            // @ts-ignore
+            const __VLS_8 = __VLS_asFunctionalComponent(__VLS_7, new __VLS_7({ ...{ 'onInput': {} }, value: ((__VLS_ctx.computedValue)), ...(__VLS_ctx.maskInputAttrs), }));
+            const __VLS_9 = __VLS_8({ ...{ 'onInput': {} }, value: ((__VLS_ctx.computedValue)), ...(__VLS_ctx.maskInputAttrs), }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+            let __VLS_13;
+            const __VLS_14 = {
+                onInput: (__VLS_ctx.handleInput)
+            };
+            let __VLS_10;
+            let __VLS_11;
+            var __VLS_12;
+        }
+        else {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.input)({ ...{ onKeydown: (__VLS_ctx.prepareHandleKeyDown) }, ...{ onInput: (__VLS_ctx.handleInput) }, value: ((__VLS_ctx.computedValue)), ref: ("input"), ...(__VLS_ctx.inputAttrs), type: ((__VLS_ctx.prettyType)), readonly: ((props.readOnly)), maxlength: ((__VLS_ctx.maxLength)), });
+            // @ts-ignore navigation for `const input = ref()`
+            __VLS_ctx.input;
+        }
+    }
+    if (__VLS_ctx.$slots.append || __VLS_ctx.copy || __VLS_ctx.isPassword) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-text__append") }, ...{ class: (({ 'mc-field-text__append--indent-bottom': __VLS_ctx.hasCharCounter })) }, });
+        var __VLS_15 = {};
+        if (__VLS_ctx.copy) {
+            // @ts-ignore
+            [McButton, McButton,];
+            // @ts-ignore
+            const __VLS_16 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, variation: ("black-link"), size: ((__VLS_ctx.ButtonSize.MCompact)), }));
+            const __VLS_17 = __VLS_16({ ...{ 'onClick': {} }, variation: ("black-link"), size: ((__VLS_ctx.ButtonSize.MCompact)), }, ...__VLS_functionalComponentArgsRest(__VLS_16));
+            let __VLS_21;
+            const __VLS_22 = {
+                onClick: (__VLS_ctx.handlerCopy)
+            };
+            let __VLS_18;
+            let __VLS_19;
+            __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+            {
+                const { "icon-append": __VLS_thisSlot } = __VLS_nonNullable(__VLS_20.slots);
+                // @ts-ignore
+                [McSvgIcon,];
+                // @ts-ignore
+                const __VLS_23 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ("copy"), }));
+                const __VLS_24 = __VLS_23({ name: ("copy"), }, ...__VLS_functionalComponentArgsRest(__VLS_23));
+            }
+            var __VLS_20;
+        }
+        if (__VLS_ctx.isPassword) {
+            // @ts-ignore
+            [McTooltip, McTooltip,];
+            // @ts-ignore
+            const __VLS_28 = __VLS_asFunctionalComponent(McTooltip, new McTooltip({ content: ((__VLS_ctx.isPasswordType ? props.passwordTooltip : props.passwordHideTooltip || props.passwordTooltip)), }));
+            const __VLS_29 = __VLS_28({ content: ((__VLS_ctx.isPasswordType ? props.passwordTooltip : props.passwordHideTooltip || props.passwordTooltip)), }, ...__VLS_functionalComponentArgsRest(__VLS_28));
+            // @ts-ignore
+            [McButton, McButton,];
+            // @ts-ignore
+            const __VLS_33 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, variation: ("black-link"), size: ((__VLS_ctx.ButtonSize.MCompact)), tabindex: ("-1"), type: ((__VLS_ctx.ButtonType.Button)), }));
+            const __VLS_34 = __VLS_33({ ...{ 'onClick': {} }, variation: ("black-link"), size: ((__VLS_ctx.ButtonSize.MCompact)), tabindex: ("-1"), type: ((__VLS_ctx.ButtonType.Button)), }, ...__VLS_functionalComponentArgsRest(__VLS_33));
+            let __VLS_38;
+            const __VLS_39 = {
+                onClick: (__VLS_ctx.togglePasswordVisibility)
+            };
+            let __VLS_35;
+            let __VLS_36;
+            __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+            {
+                const { "icon-append": __VLS_thisSlot } = __VLS_nonNullable(__VLS_37.slots);
+                // @ts-ignore
+                [McSvgIcon,];
+                // @ts-ignore
+                const __VLS_40 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ((__VLS_ctx.passwordIcon)), }));
+                const __VLS_41 = __VLS_40({ name: ((__VLS_ctx.passwordIcon)), }, ...__VLS_functionalComponentArgsRest(__VLS_40));
+            }
+            var __VLS_37;
+            __VLS_nonNullable(__VLS_32.slots).default;
+            var __VLS_32;
+        }
+    }
+    if (__VLS_ctx.hasCharCounter) {
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_45 = __VLS_asFunctionalComponent(McTitle, new McTitle({ ...{ class: ("mc-field-text__char-counter") }, variation: ((__VLS_ctx.TitleVariations.Overline)), textAlign: ((__VLS_ctx.HorizontalAlignment.Right)), color: ((__VLS_ctx.charCounterColor)), }));
+        const __VLS_46 = __VLS_45({ ...{ class: ("mc-field-text__char-counter") }, variation: ((__VLS_ctx.TitleVariations.Overline)), textAlign: ((__VLS_ctx.HorizontalAlignment.Right)), color: ((__VLS_ctx.charCounterColor)), }, ...__VLS_functionalComponentArgsRest(__VLS_45));
+        (__VLS_ctx.charCounterTitle);
+        __VLS_nonNullable(__VLS_49.slots).default;
+        var __VLS_49;
+    }
+    if (__VLS_ctx.$slots.right) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-text__right") }, });
+        var __VLS_50 = {};
+    }
+    if (__VLS_ctx.fieldErrors.errorText.value || props.helpText || __VLS_ctx.$slots.footer) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-text__footer") }, });
+        if (__VLS_ctx.fieldErrors.errorText.value) {
+            // @ts-ignore
+            [McTitle,];
+            // @ts-ignore
+            const __VLS_51 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), ...{ class: ("mc-field-text__error-text") }, htmlData: ((__VLS_ctx.fieldErrors.errorText.value)), }));
+            const __VLS_52 = __VLS_51({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), ...{ class: ("mc-field-text__error-text") }, htmlData: ((__VLS_ctx.fieldErrors.errorText.value)), }, ...__VLS_functionalComponentArgsRest(__VLS_51));
+        }
+        if (__VLS_ctx.fieldErrors.errorText.value) {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.br)({});
+        }
+        var __VLS_56 = {};
+        if (props.helpText) {
+            // @ts-ignore
+            [McTitle, McTitle,];
+            // @ts-ignore
+            const __VLS_57 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }));
+            const __VLS_58 = __VLS_57({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_57));
+            (props.helpText);
+            __VLS_nonNullable(__VLS_61.slots).default;
+            var __VLS_61;
+        }
+    }
+    __VLS_styleScopedClasses['mc-field-text__header'];
+    __VLS_styleScopedClasses['mc-field-text__inner'];
+    __VLS_styleScopedClasses['mc-field-text__main'];
+    __VLS_styleScopedClasses['mc-field-text__prepend'];
+    __VLS_styleScopedClasses['mc-field-text__input-wrapper'];
+    __VLS_styleScopedClasses['mc-field-text__append'];
+    __VLS_styleScopedClasses['mc-field-text__append--indent-bottom'];
+    __VLS_styleScopedClasses['mc-field-text__char-counter'];
+    __VLS_styleScopedClasses['mc-field-text__right'];
+    __VLS_styleScopedClasses['mc-field-text__footer'];
+    __VLS_styleScopedClasses['mc-field-text__error-text'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "field": __VLS_nativeElements['div'],
+        "textarea": __VLS_nativeElements['textarea'],
+        "input": __VLS_nativeElements['input'],
+    };
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            IMaskComponent: IMaskComponent,
+            McTitle: McTitle,
+            McButton: McButton,
+            McSvgIcon: McSvgIcon,
+            McTooltip: McTooltip,
+            ButtonSize: ButtonSize,
+            ButtonType: ButtonType,
+            HorizontalAlignment: HorizontalAlignment,
+            TitleVariations: TitleVariations,
+            Weights: Weights,
+            textarea: textarea,
+            prettyType: prettyType,
+            fieldErrors: fieldErrors,
+            classes: classes,
+            computedTitle: computedTitle,
+            isMaskVisible: isMaskVisible,
+            isTextarea: isTextarea,
+            isTextareaAutosize: isTextareaAutosize,
+            isPassword: isPassword,
+            hasCharCounter: hasCharCounter,
+            isPasswordType: isPasswordType,
+            passwordIcon: passwordIcon,
+            charCounterTitle: charCounterTitle,
+            charCounterColor: charCounterColor,
+            maskInputAttrs: maskInputAttrs,
+            computedValue: computedValue,
+            handleInput: handleInput,
+            inputAttrs: inputAttrs,
+            prepareHandleKeyDown: prepareHandleKeyDown,
+            handlerCopy: handlerCopy,
+            togglePasswordVisibility: togglePasswordVisibility,
+        };
+    },
+    emits: {},
+    props: {
+        /**
+         *  Значение
+         *
+         */
+        modelValue: {
+            type: [String, Number],
+            default: null
+        },
+        /**
+         *  Тип:
+         * `textarea, textarea-autosize и
+         * нативные как text, password, email и т.д.`
+         *
+         * кастомный num - разрешает ввод только цифр и дробных чисел, без ислчений ввиде буквы 'E'
+         * кастомный int - разрешает ввод только целочисленных значений
+         * кастомный amount_format - форматирует ввод числовых данных разделяя на разряды(1 000 000)
+         * date - добавляет placeholder, маску и ограничения ввода
+         * uppercase\lowercase - форматирует текст согласну значению (верхний\нижний регистр)
+         * phone_number - добавляет '+' к номеру телефона при фокусе без возможности удалить его
+         */
+        type: {
+            type: String,
+            default: InputTypes.Text
+        },
+        /**
+         *  Заголовок поля:
+         *
+         */
+        title: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Маска поля:
+         *
+         * tokens - https://imask.js.org/guide.html
+         *
+         */
+        mask: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         *
+         */
+        helpText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: null
+        },
+        /**
+         *  Placeholder
+         *
+         */
+        placeholder: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Name
+         *
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  плейсхолдеры для короткого обозначения даты (для маски dd.mm.yyyy)
+         *  {
+         *      date: 'd',
+         *      month: 'm',
+         *      year: 'y',
+         *  }
+         *
+         */
+        dateMaskPlaceholder: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Максимальная длина строки в инпуте
+         *
+         */
+        maxLength: {
+            type: Number,
+            default: null
+        },
+        /**
+         *  Состояние копирования
+         *
+         */
+        copy: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Автокомплит введённого ранее текста: on, off
+         *
+         */
+        autocomplete: {
+            type: String,
+            default: Autocomplete.On
+        },
+        /**
+         *  только чтение текста
+         *
+         */
+        readOnly: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         *
+         */
+        tabindex: {
+            type: [String, Number]
+        },
+        /**
+         * Tooltip для кнопка "показать пароль"
+         *
+         */
+        passwordTooltip: {
+            type: String,
+            default: 'Show/Hide'
+        },
+        /**
+         * Tooltip для кнопка "Скрыть пароль", если не указывать, то будет аналогичен "показать"
+         *
+         */
+        passwordHideTooltip: {
+            type: String,
+            default: null
+        },
+        /**
+         * Очищаем данные от маски на выходе
+         */
+        clearOutput: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Кастомные настройки для маски
+         * См. https://imask.js.org/guide.html
+         *
+         * Например:
+         *  {
+         *   autofix: true,
+         *    blocks: {
+         *      d: {mask: IMask.MaskedRange, placeholderChar: 'd', from: 1, to: 31, maxLength: 2},
+         *      m: {mask: IMask.MaskedRange, placeholderChar: 'm', from: 1, to: 12, maxLength: 2},
+         *      Y: {mask: IMask.MaskedRange, placeholderChar: 'y', from: 1900, to: 2999, maxLength: 4}
+         *    }
+         *  }
+         */
+        maskOptions: {
+            type: Object,
+            default: null
+        },
+        required: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Для какого языка поле ввода
+         */
+        locale: {
+            type: String,
+            default: null
+        },
+        /**
+         * Мобильное ли разрешение
+         * (Используется для триггера тултипа в кнопке с паролем)
+         */
+        isMobile: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Свойство на ограничение количества символов после точки для числовых типов (num || amount_format)
+         */
+        maxDecimals: {
+            type: Number,
+            default: 2
+        },
+        dir: {
+            type: String,
+            default: Directions.Ltr
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    emits: {},
+    props: {
+        /**
+         *  Значение
+         *
+         */
+        modelValue: {
+            type: [String, Number],
+            default: null
+        },
+        /**
+         *  Тип:
+         * `textarea, textarea-autosize и
+         * нативные как text, password, email и т.д.`
+         *
+         * кастомный num - разрешает ввод только цифр и дробных чисел, без ислчений ввиде буквы 'E'
+         * кастомный int - разрешает ввод только целочисленных значений
+         * кастомный amount_format - форматирует ввод числовых данных разделяя на разряды(1 000 000)
+         * date - добавляет placeholder, маску и ограничения ввода
+         * uppercase\lowercase - форматирует текст согласну значению (верхний\нижний регистр)
+         * phone_number - добавляет '+' к номеру телефона при фокусе без возможности удалить его
+         */
+        type: {
+            type: String,
+            default: InputTypes.Text
+        },
+        /**
+         *  Заголовок поля:
+         *
+         */
+        title: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Маска поля:
+         *
+         * tokens - https://imask.js.org/guide.html
+         *
+         */
+        mask: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         *
+         */
+        helpText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: null
+        },
+        /**
+         *  Placeholder
+         *
+         */
+        placeholder: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Name
+         *
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  плейсхолдеры для короткого обозначения даты (для маски dd.mm.yyyy)
+         *  {
+         *      date: 'd',
+         *      month: 'm',
+         *      year: 'y',
+         *  }
+         *
+         */
+        dateMaskPlaceholder: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Максимальная длина строки в инпуте
+         *
+         */
+        maxLength: {
+            type: Number,
+            default: null
+        },
+        /**
+         *  Состояние копирования
+         *
+         */
+        copy: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Автокомплит введённого ранее текста: on, off
+         *
+         */
+        autocomplete: {
+            type: String,
+            default: Autocomplete.On
+        },
+        /**
+         *  только чтение текста
+         *
+         */
+        readOnly: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         *
+         */
+        tabindex: {
+            type: [String, Number]
+        },
+        /**
+         * Tooltip для кнопка "показать пароль"
+         *
+         */
+        passwordTooltip: {
+            type: String,
+            default: 'Show/Hide'
+        },
+        /**
+         * Tooltip для кнопка "Скрыть пароль", если не указывать, то будет аналогичен "показать"
+         *
+         */
+        passwordHideTooltip: {
+            type: String,
+            default: null
+        },
+        /**
+         * Очищаем данные от маски на выходе
+         */
+        clearOutput: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Кастомные настройки для маски
+         * См. https://imask.js.org/guide.html
+         *
+         * Например:
+         *  {
+         *   autofix: true,
+         *    blocks: {
+         *      d: {mask: IMask.MaskedRange, placeholderChar: 'd', from: 1, to: 31, maxLength: 2},
+         *      m: {mask: IMask.MaskedRange, placeholderChar: 'm', from: 1, to: 12, maxLength: 2},
+         *      Y: {mask: IMask.MaskedRange, placeholderChar: 'y', from: 1900, to: 2999, maxLength: 4}
+         *    }
+         *  }
+         */
+        maskOptions: {
+            type: Object,
+            default: null
+        },
+        required: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Для какого языка поле ввода
+         */
+        locale: {
+            type: String,
+            default: null
+        },
+        /**
+         * Мобильное ли разрешение
+         * (Используется для триггера тултипа в кнопке с паролем)
+         */
+        isMobile: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Свойство на ограничение количества символов после точки для числовых типов (num || amount_format)
+         */
+        maxDecimals: {
+            type: Number,
+            default: 2
+        },
+        dir: {
+            type: String,
+            default: Directions.Ltr
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */