import { h } from "@stencil/core";
import classNames from "classnames";
import Cleave from "cleave.js";
import { v4 as uuidv4 } from "uuid";
import { isEqual, isNil } from "lodash-es";
import { renderIcons, getIconElementProps } from "../../utils/icon-utils";
import { getNestedValue } from "../../utils/object-utils";
import { renderHint } from "../../utils/hint-utils";
import { getDataTestId } from "../../utils/test-id-utils";
/**
 * The TkInput component is used to capture text input from the user.
 * @react `import { TkInput } from '@takeoff-ui/react'`
 * @vue `import { TkInput } from '@takeoff-ui/vue'`
 * @angular `import { TkInput } from '@takeoff-ui/angular'`
 */
export class TkInput {
    constructor() {
        this.uniqueId = uuidv4();
        this.readOnly = false;
        this.editable = true;
        this.hasFocus = false;
        this.isCounter = false;
        this.isPassword = false;
        this.passwordStrength = 0;
        /**
         * the user cannot interact with the input.
         */
        this.disabled = false;
        /**
         * Indicates whether the input is in an invalid state
         * @defaultValue false
         */
        this.invalid = false;
        /**
         * Indicates whether the input can be cleared
         * @defaultValue false
         */
        this.clearable = false;
        /**
         * Defines the position of the icon.
         * @defaultValue left
         */
        this.iconPosition = 'left';
        /**
         * If `true`, the user cannot modify the value.
         * @defaultValue false
         */
        this.readonly = false;
        /**
         * Sets size for the component.
         * @defaultValue base
         */
        this.size = 'base';
        /**
         * if type = password safety status bar visible
         */
        this.showSafetyStatus = false;
        /**
         * Displays a red asterisk (*) next to the label for visual emphasis.
         */
        this.showAsterisk = false;
        /**
         * The key to use for option labels
         * @defaultValue label
         */
        this.chipLabelKey = 'label';
        /**
         * input type
         */
        this.mode = 'text';
        /**
         * Shows a loading spinner on the right side of the input.
         * @defaultValue false
         */
        this.loading = false;
        /**
         * Hides the password lock icon.
         * @defaultValue false
         */
        this.hidePasswordIcon = false;
        this.clampValueByLimit = (value, operation) => {
            if (value === null || value === undefined || isNaN(value)) {
                return null;
            }
            const numValue = Number(value);
            if (this.min !== null && this.min !== undefined && numValue < Number(this.min)) {
                if (operation === 'increment') {
                    return Number(this.min) + 1;
                }
                return Number(this.min);
            }
            if (this.max !== null && this.max !== undefined && numValue > Number(this.max)) {
                if (operation === 'decrement') {
                    return Number(this.max) - 1;
                }
                return Number(this.max);
            }
            return numValue;
        };
        this.handleInput = (ev) => {
            var _a, _b, _c;
            if (this.mode != 'chips') {
                const input = ev.target;
                let _value;
                if (this.mode == 'number' || this.mode == 'counter') {
                    _value = input.value ? Number(input.value) : null;
                }
                else {
                    _value = input.value || '';
                }
                if (this.maskOptions) {
                    // Custom regex mask
                    if (((_a = this.maskOptions) === null || _a === void 0 ? void 0 : _a.regex) && this.mode === 'text') {
                        const regex = typeof this.maskOptions.regex === 'string' ? new RegExp(this.maskOptions.regex, 'g') : new RegExp(this.maskOptions.regex.source, 'g');
                        // Regex'e uyan karakterleri filtrele
                        const matches = _value.match(regex);
                        _value = matches ? matches.join('') : '';
                        input.value = _value;
                    }
                    else {
                        if (this.maskOptions.letterOnly) {
                            // If letterOnly option is enabled, filter out non-letters
                            _value = _value.replace(/[^a-zA-Z]/g, '');
                            input.value = _value;
                        }
                        if (this.cleaveInstance) {
                            // Re-apply the current raw value to force Cleave to re-sync its internal state before reading formatted output.
                            const rawValue = this.cleaveInstance.getRawValue();
                            (_b = this.cleaveInstance) === null || _b === void 0 ? void 0 : _b.setRawValue(rawValue);
                            _value = (_c = this.cleaveInstance) === null || _c === void 0 ? void 0 : _c.getFormattedValue();
                        }
                    }
                }
                if (!isEqual(this.value, _value)) {
                    this.value = _value;
                    this.tkChange.emit(_value);
                }
            }
            if (this.mode == 'password' && this.showSafetyStatus) {
                this.passwordStrength = this.calculatePasswordStrength(String(this.value));
            }
        };
        this.handleInputKeyUp = (ev) => {
            var _a, _b;
            const newInput = ev.target;
            if (this.mode === 'counter' && newInput) {
                if (newInput.value === '') {
                    this.nativeInput.value = '';
                }
                else {
                    this.nativeInput.value = (_b = (_a = this.clampValueByLimit(Number(newInput.value))) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
                }
            }
        };
        this.handleInputBlur = () => {
            this.hasFocus = false;
            this.validateMinMax();
            this.tkBlur.emit();
        };
        // for add chip
        this.handleInputKeyDown = (e) => {
            // --- Cleave.js maske ayırıcı karakterlerinin silinmesi için genel çözüm ---
            if (this.maskOptions && this.cleaveInstance && this.mode == 'text' && (e.key === 'Backspace' || e.key === 'Delete')) {
                const input = this.nativeInput;
                const value = input.value;
                const selectionStart = input.selectionStart;
                const selectionEnd = input.selectionEnd;
                // Sadece imleç varsa (seçili alan yoksa) işle
                if (selectionStart === selectionEnd) {
                    let charToCheck;
                    let posToRemove = -1;
                    if (e.key === 'Backspace' && selectionStart > 0) {
                        charToCheck = value[selectionStart - 1];
                        posToRemove = selectionStart - 1;
                    }
                    else if (e.key === 'Delete' && selectionStart < value.length) {
                        charToCheck = value[selectionStart];
                        posToRemove = selectionStart;
                    }
                    // Eğer karakter bir ayırıcı ise (rakam/harf değilse)
                    if (this.isMaskDelimiterCharacter(charToCheck)) {
                        e.preventDefault();
                        // Ayırıcıyı ve öncesindeki (Backspace) veya sonrasındaki (Delete) karakteri sil
                        let newValue;
                        let newCaretPos;
                        if (e.key === 'Backspace') {
                            // Ayırıcının öncesindeki karakteri sil
                            newValue = value.slice(0, posToRemove - 1) + value.slice(posToRemove + 1);
                            newCaretPos = posToRemove - 1;
                        }
                        else {
                            // Ayırıcının sonrasındaki karakteri sil
                            newValue = value.slice(0, posToRemove) + value.slice(posToRemove + 2);
                            newCaretPos = posToRemove;
                        }
                        this.cleaveInstance.setRawValue(newValue);
                        const formattedValue = this.cleaveInstance.getFormattedValue();
                        input.value = formattedValue;
                        this.value = formattedValue;
                        this.tkChange.emit(this.value);
                        // DOM güncellendikten sonra imleç pozisyonunu ayarla
                        setTimeout(() => {
                            input.setSelectionRange(newCaretPos, newCaretPos);
                        }, 0);
                        return; // Daha fazla işlem yapma
                    }
                }
            }
            if (e.key == 'Enter' &&
                this.nativeInput.value.trim() &&
                this.mode == 'chips' &&
                // (!this.value || (this.value as string[])?.indexOf(this.nativeInput.value) == -1) &&
                (this.el.classList.contains('allow-custom-value-select') || !this.el.classList.contains('tk-select-input'))) {
                if (this.value) {
                    this.value = [...this.value, this.nativeInput.value];
                    this.tkChange.emit(this.value);
                }
                else {
                    this.value = [this.nativeInput.value];
                    this.tkChange.emit([this.nativeInput.value]);
                }
                this.nativeInput.value = '';
            }
        };
        this.handleClearButtonClick = (e) => {
            if (this.readonly || this.disabled)
                return;
            e.stopPropagation();
            this.handleFormReset();
            this.tkClearClick.emit();
        };
        this.handleClearButtonKeyDown = (e) => {
            // Make clear button accessible via Space and Enter keys
            if (e.key === 'Enter') {
                e.preventDefault();
                e.stopPropagation();
                this.handleFormReset();
                this.tkClearClick.emit();
            }
        };
        this.handleInputFocus = () => {
            this.hasFocus = true;
            this.tkFocus.emit();
        };
        this.handleMouseDown = (event) => {
            this.visiblePassword(event, true);
        };
        this.handleMouseUp = (event) => {
            this.visiblePassword(event, false);
        };
        /**
         * Handles label click:
         * - preventDefault() stops the browser from dispatching a synthetic click
         *   on the associated <input> (caused by htmlFor).
         * - Manual focus() preserves the label-click-to-focus UX.
         */
        this.handleLabelClick = (e) => {
            var _a;
            e.preventDefault();
            (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
        };
    }
    maskOptionsChanged(newValue, oldValue) {
        var _a;
        if (!isEqual(newValue, oldValue)) {
            (_a = this.cleaveInstance) === null || _a === void 0 ? void 0 : _a.destroy();
            this.cleaveInstance = new Cleave(this.nativeInput, Object.assign({}, this.maskOptions));
        }
    }
    valueChanged(newValue, oldValue) {
        if (!isEqual(newValue, oldValue) && this.mode !== 'chips') {
            if (typeof newValue === 'object' && typeof oldValue === 'object') {
                this.nativeInput.value = getNestedValue(newValue, this.chipLabelKey);
            }
            else {
                this.nativeInput.value = newValue;
            }
        }
    }
    componentWillLoad() {
        // If the tk-input has a tabindex attribute we get the value
        // and pass it down to the native input, then remove it from the
        // tk-input to avoid causing tabbing twice on the same element
        if (this.el.hasAttribute('tabindex')) {
            const tabindex = this.el.getAttribute('tabindex');
            this.tabindex = tabindex !== null ? tabindex : undefined;
            this.el.removeAttribute('tabindex');
        }
        if (this.mode == 'text') {
            this.inputType = 'text';
        }
        else if (this.mode == 'number') {
            this.inputType = 'number';
        }
        else if (this.mode == 'password') {
            this.inputType = 'password';
            this.isPassword = true;
        }
        else if (this.mode == 'counter') {
            this.inputType = 'number';
            this.isCounter = true;
        }
    }
    componentDidLoad() {
        var _a, _b;
        this.nativeInput = this.el.querySelector('input');
        if (this.mode === 'counter') {
            this.nativeInput.value = (_b = (_a = this.clampValueByLimit(this.value)) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
        }
        if (this.mode == 'text' && this.maskOptions) {
            this.cleaveInstance = new Cleave(this.nativeInput, Object.assign({}, this.maskOptions));
        }
    }
    componentDidUpdate() {
        var _a, _b;
        if (this.mode === 'counter') {
            this.nativeInput.value = (_b = (_a = this.clampValueByLimit(this.value)) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
        }
    }
    formResetCallback() {
        this.handleFormReset();
    }
    /**
     * Sets focus on the specified `tk-input`. Use this method instead of the global
     * `input.focus()`.
     */
    async setFocus() {
        var _a;
        (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
    }
    validateMinMax() {
        if (this.min === undefined && this.max === undefined)
            return;
        const numValue = parseFloat(this.value);
        if (isNaN(numValue))
            return;
        if (this.min !== undefined && numValue < Number(this.min)) {
            this.value = this.mode === 'counter' ? Number(this.min) : this.min.toString();
            this.tkChange.emit(this.value);
        }
        else if (this.max !== undefined && numValue > Number(this.max)) {
            this.value = this.mode === 'counter' ? Number(this.max) : this.max.toString();
            this.tkChange.emit(this.value);
        }
    }
    /**
     * Toggles the visibility of the password input field.
     *
     * This method is called when the user interacts with the visibility toggle icon.
     *
     * @param event The mouse event triggered by the user interaction.
     * @param val A boolean value indicating whether to show or hide the password.
     */
    visiblePassword(event, val) {
        if (val) {
            this.nativeInput.type = 'text';
            event.target.innerHTML = 'visibility_off';
        }
        else {
            this.nativeInput.type = 'password';
            event.target.innerHTML = 'visibility';
        }
    }
    /**
     * Calculates the strength of a given password.
     *
     * The password strength is determined based on the following criteria:
     * - Length of at least 8 characters
     * - Presence of uppercase letters
     * - Presence of lowercase letters
     * - Presence of numbers
     * - Presence of special characters
     *
     * Each met criterion increases the strength by 1. The maximum strength is 5.
     *
     * @param password The password to be evaluated.
     * @returns A number representing the password strength.
     */
    calculatePasswordStrength(password) {
        let strength = 0;
        if (password.length >= 8)
            strength++;
        if (/[A-Z]/.test(password))
            strength++;
        if (/[a-z]/.test(password))
            strength++;
        if (/[0-9]/.test(password))
            strength++;
        if (/[^A-Za-z0-9]/.test(password))
            strength++;
        return strength;
    }
    isMaskDelimiterCharacter(charToCheck) {
        var _a;
        const delimiterChars = new Set();
        if (typeof this.maskOptions.delimiter === 'string' && this.maskOptions.delimiter.length > 0) {
            delimiterChars.add(this.maskOptions.delimiter);
        }
        if (Array.isArray(this.maskOptions.delimiters)) {
            this.maskOptions.delimiters.forEach(delimiter => {
                if (typeof delimiter === 'string' && delimiter.length > 0) {
                    delimiterChars.add(delimiter);
                }
            });
        }
        const decimalMark = (_a = this.maskOptions.numeralDecimalMark) !== null && _a !== void 0 ? _a : '.';
        const isConfiguredDelimiter = !!charToCheck && delimiterChars.has(charToCheck);
        const isNumericThousandsDelimiterFallback = !!charToCheck && !!this.maskOptions.numeral && delimiterChars.size === 0 && /[^0-9]/.test(charToCheck) && charToCheck !== decimalMark;
        return !!charToCheck && (isConfiguredDelimiter || isNumericThousandsDelimiterFallback) && charToCheck !== decimalMark;
    }
    handleFormReset() {
        if (this.mode === 'chips' && this.chipDisabled && Array.isArray(this.value)) {
            this.value = this.value.filter(item => this.chipDisabled(item));
        }
        else {
            this.value = null;
        }
        this.tkChange.emit(this.value);
    }
    handleMinusButtonClick() {
        if (!this.disabled) {
            const currentValue = Number(this.value) || 0;
            const newValue = this.clampValueByLimit(currentValue - 1, 'decrement');
            if (newValue !== null && newValue !== Number(this.value)) {
                this.value = newValue;
                this.tkChange.emit(newValue);
            }
        }
    }
    handlePlusButtonClick() {
        if (!this.disabled) {
            let currentValue;
            if (this.value === '' || this.value === null || this.value === undefined) {
                currentValue = !isNil(this.min) ? Number(this.min) : 0;
            }
            else {
                currentValue = Number(this.value);
            }
            const newValue = this.clampValueByLimit(currentValue + 1, 'increment');
            if (newValue !== null && newValue !== Number(this.value)) {
                this.value = newValue;
                this.tkChange.emit(newValue);
            }
        }
    }
    handleChipsRemove(index) {
        if (this.readonly || this.disabled)
            return;
        const chipsArr = [...this.value];
        if (index >= 0 && index < chipsArr.length) {
            chipsArr.splice(index, 1);
            this.value = chipsArr;
            this.tkChange.emit(chipsArr);
        }
    }
    /**
     * Renders the password strength indicator lines.
     *
     * The strength lines visually indicate the password strength:
     * - 1 or 2 filled lines: Weak (red color)
     * - 3 filled lines: Medium (yellow color)
     * - 4 filled lines: Strong (green color)
     *
     * The method creates four lines and assigns a CSS class based on the current password strength.
     *
     * @returns An array of JSX elements representing the strength indicator lines.
     */
    renderStrengthLines() {
        const lines = [];
        for (let i = 0; i < 4; i++) {
            let className = 'line';
            if (i < this.passwordStrength) {
                if (this.passwordStrength < 3)
                    className += ' weak';
                else if (this.passwordStrength < 4)
                    className += ' medium';
                else
                    className += ' strong';
            }
            lines.push(h("span", { class: className, "data-testid": getDataTestId(this.dataTestid, 'strength-line', i.toString()) }, "\u00A0"));
        }
        return lines;
    }
    renderChips() {
        var _a;
        if (this.mode == 'chips' && typeof this.value == 'object' && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0) {
            return this.value.map((item, index) => {
                var _a, _b, _c, _d;
                const itemChipOptions = this.chipOptions || {};
                let isRemovable;
                if (((_a = this.chipDisabled) === null || _a === void 0 ? void 0 : _a.call(this, item)) || this.disabled) {
                    isRemovable = false;
                }
                else if (typeof item === 'object' && item !== null && item.hasOwnProperty('removable')) {
                    isRemovable = item.removable;
                }
                else {
                    isRemovable = true;
                }
                const baseProps = Object.assign(Object.assign({}, itemChipOptions), { removable: isRemovable, key: index, autoSelfDestroy: false, value: item, variant: ((_b = itemChipOptions.variant) !== null && _b !== void 0 ? _b : 'neutral'), type: ((_c = itemChipOptions.type) !== null && _c !== void 0 ? _c : 'outlined'), size: ((_d = itemChipOptions.size) !== null && _d !== void 0 ? _d : 'small'), disabled: this.disabled });
                const label = typeof item === 'object' && item !== null && item.__isOthersIndicator ? item.label : typeof item === 'object' ? getNestedValue(item, this.chipLabelKey) : String(item);
                return (h("tk-chips", Object.assign({ label: label, "onTk-remove": () => this.handleChipsRemove(index) }, baseProps, { dataTestid: getDataTestId(this.dataTestid, 'chips', index.toString()) })));
            });
        }
    }
    renderInput() {
        return (h("input", { id: this.uniqueId, ref: el => (this.nativeInput = el), disabled: this.disabled, autoComplete: "off", type: this.inputType, name: this.name, min: this.min, max: this.max, step: this.step, placeholder: this.placeholder || '', readOnly: this.readOnly || !this.editable, tabindex: this.tabindex, value: this.mode === 'chips' ? undefined : typeof this.value === 'object' && this.value !== null ? getNestedValue(this.value, this.chipLabelKey) : this.value, onInput: this.handleInput, onBlur: this.handleInputBlur, onFocus: this.handleInputFocus, onKeyDown: this.handleInputKeyDown, onKeyUp: this.handleInputKeyUp, "data-testid": getDataTestId(this.dataTestid, 'native-input') }));
    }
    renderLabel() {
        var _a;
        let label;
        if (((_a = this.label) === null || _a === void 0 ? void 0 : _a.length) > 0) {
            const asterisk = (h("span", { class: "asterisk", "data-testid": getDataTestId(this.dataTestid, 'label-asterisk') }, "*"));
            label = (h("label", { htmlFor: this.uniqueId, class: "label", onClick: this.handleLabelClick, "data-testid": getDataTestId(this.dataTestid, 'label') }, this.label, this.showAsterisk ? asterisk : ''));
        }
        return label;
    }
    renderAlignmentButtons() {
        let leftButton;
        let rightButton;
        if (this.isCounter) {
            leftButton = (h("tk-icon", Object.assign({}, getIconElementProps('remove', {
                class: classNames('counter-icon clickable', { disabled: this.disabled || Number(this.value) <= Number(this.min) }),
                onClick: this.handleMinusButtonClick.bind(this),
            }, undefined, 'span'), { dataTestid: getDataTestId(this.dataTestid, 'counter-decrease-icon') })));
            rightButton = (h("tk-icon", Object.assign({}, getIconElementProps('add', {
                class: classNames('counter-icon clickable', { disabled: this.disabled || Number(this.value) >= Number(this.max) }),
                onClick: this.handlePlusButtonClick.bind(this),
            }, undefined, 'span'), { dataTestid: getDataTestId(this.dataTestid, 'counter-increase-icon') })));
        }
        return { left: leftButton, right: rightButton };
    }
    renderPasswordIcons() {
        let passwordLeftIcon;
        let passwordRightIcon;
        if (this.inputType == 'password') {
            if (!this.hidePasswordIcon) {
                passwordLeftIcon = (h("tk-icon", Object.assign({}, getIconElementProps('lock', {
                    color: 'var(--icon-base)',
                }), { dataTestid: getDataTestId(this.dataTestid, 'password-lock-icon') })));
            }
            passwordRightIcon = (h("tk-icon", Object.assign({}, getIconElementProps('visibility', {
                class: 'clickable',
                color: 'var(--icon-base)',
                onMouseDown: this.handleMouseDown,
                onMouseUp: this.handleMouseUp,
            }), { dataTestid: getDataTestId(this.dataTestid, 'password-visibility-icon') })));
        }
        return { left: passwordLeftIcon, right: passwordRightIcon };
    }
    render() {
        var _a;
        let _leftIcon;
        let _rightIcon;
        let safetyStatus;
        if (this.showSafetyStatus) {
            safetyStatus = (h("div", { key: 'c24cc9089d371c0154413a0f04d487fce7d2bce6', class: "safety-status", "data-testid": getDataTestId(this.dataTestid, 'safety-status') }, this.renderStrengthLines()));
        }
        const rootClasses = classNames('tk-input-container', this.size, { focus: this.hasFocus, counter: this.isCounter, chips: this.mode == 'chips' });
        const prefixClass = classNames('tk-input-prefix-container', this.size);
        // Handle icon rendering using utility function
        if (this.icon && !this.isCounter) {
            const { leftIcon, rightIcon } = renderIcons(this.icon, { additionalProps: { color: 'var(--icon-base)' }, dataTestid: this.dataTestid }, this.iconPosition);
            _leftIcon = leftIcon;
            _rightIcon = rightIcon;
        }
        const showClearButton = this.clearable && !this.readonly && ((this.mode !== 'chips' && this.value) || (this.mode === 'chips' && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0));
        if (this.el.classList.contains('tk-select-input')) {
            this.readOnly = this.el.classList.contains('readonly-select');
            // readOnly hides clear button and makes input readOnly(disables input), editable only impacts input readOnly
            this.editable = this.el.classList.contains('editable-select');
        }
        else {
            this.readOnly = this.readonly;
        }
        return (h("div", { key: '0f96098e6d6da0cecc77898e9c47faf3f8324b82', "aria-readonly": this.readonly, "aria-disabled": this.disabled, "aria-invalid": this.invalid, class: rootClasses, "data-testid": getDataTestId(this.dataTestid, 'container') }, this.renderLabel(), h("div", { key: '0767a2945f3cc4a3e669086108196352bbc9651e', class: "tk-input", "data-testid": getDataTestId(this.dataTestid, 'control') }, this.renderChips(), !_leftIcon && this.renderPasswordIcons().left, _leftIcon, this.renderAlignmentButtons().left, this.pre && (h("div", { key: '5b7acfa827c16c8f5db7107633bcf90059474478', class: prefixClass, "data-testid": getDataTestId(this.dataTestid, 'prefix') }, h("span", { key: '8c70f2ed181d8772403c8942acb45661c0d74d3b', class: "tk-input-prefix-text", "data-testid": getDataTestId(this.dataTestid, 'prefix-text') }, this.pre), h("span", { key: '144ddff7c0da91b78ec11ad565cd1e66563c7604', class: "tk-input-divider", "data-testid": getDataTestId(this.dataTestid, 'prefix-divider') }))), this.renderInput(), this.loading && (h("tk-spinner", { key: 'e766f1a4d9619c527e2c7c225984a3b2edc0f7ce', size: this.size === 'large' ? 'small' : this.size === 'base' ? 'xsmall' : 'xxsmall', dataTestid: getDataTestId(this.dataTestid, 'loading-spinner') })), showClearButton && (h("tk-icon", Object.assign({ key: '43f4efe6390a697b9a8669ae7705f31f34dae594' }, getIconElementProps('close', {
            class: classNames('tk-input-clear-button clickable', { disabled: this.disabled || this.readonly }),
            color: 'var(--icon-base)',
            onClick: this.handleClearButtonClick,
            onKeyDown: this.handleClearButtonKeyDown,
            tabindex: this.disabled || this.readonly ? -1 : 0,
        }), { dataTestid: getDataTestId(this.dataTestid, 'clear-icon') }))), _rightIcon, !_rightIcon && this.renderPasswordIcons().right, this.renderAlignmentButtons().right), safetyStatus, renderHint(this.hint, this.error, this.invalid, this.dataTestid)));
    }
    static get is() { return "tk-input"; }
    static get formAssociated() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["tk-input.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["tk-input.css"]
        };
    }
    static get properties() {
        return {
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "the user cannot interact with the input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Indicates whether the input is in an invalid state"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "clearable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Indicates whether the input can be cleared"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "clearable",
                "defaultValue": "false"
            },
            "error": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "This is the error message that will be displayed."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error"
            },
            "hint": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Provided a hint or additional information about the input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hint"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | IIconOptions | IMultiIconOptions",
                    "resolved": "IIconOptions | IMultiIconOptions | string",
                    "references": {
                        "IIconOptions": {
                            "location": "import",
                            "path": "../../global/interfaces/IIconOptions",
                            "id": "src/global/interfaces/IIconOptions.ts::IIconOptions",
                            "referenceLocation": "IIconOptions"
                        },
                        "IMultiIconOptions": {
                            "location": "import",
                            "path": "../../global/interfaces/IIconOptions",
                            "id": "src/global/interfaces/IIconOptions.ts::IMultiIconOptions",
                            "referenceLocation": "IMultiIconOptions"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Specifies a material icon name to be displayed."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "iconPosition": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'left' | 'right'",
                    "resolved": "\"left\" | \"right\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "left"
                        }],
                    "text": "Defines the position of the icon."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon-position",
                "defaultValue": "'left'"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the label for the input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "pre": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the prefix of the input;"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "pre"
            },
            "maskOptions": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IInputMaskOptions",
                    "resolved": "IInputMaskOptions",
                    "references": {
                        "IInputMaskOptions": {
                            "location": "import",
                            "path": "./types",
                            "id": "src/components/tk-input/types.ts::IInputMaskOptions",
                            "referenceLocation": "IInputMaskOptions"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The maskOptions prop is used to define masking configurations supported by the Cleave.js library. With this prop, you can specify any masking options described in the Cleave.js documentation (https://nosir.github.io/cleave.js/). For example, you can configure it for formatting dates, phone numbers, or credit card numbers as needed."
                },
                "getter": false,
                "setter": false
            },
            "max": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Maximum value for number inputs"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max"
            },
            "min": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Minimum value for number inputs"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "min"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name of the control, which is submitted with the form data."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Placeholder text displayed when the input is empty."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "If `true`, the user cannot modify the value."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "readonly",
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'large' | 'base' | 'small'",
                    "resolved": "\"base\" | \"large\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "base"
                        }],
                    "text": "Sets size for the component."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "'base'"
            },
            "showSafetyStatus": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "if type = password safety status bar visible"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-safety-status",
                "defaultValue": "false"
            },
            "showAsterisk": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displays a red asterisk (*) next to the label for visual emphasis."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-asterisk",
                "defaultValue": "false"
            },
            "chipLabelKey": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "label"
                        }],
                    "text": "The key to use for option labels"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "chip-label-key",
                "defaultValue": "'label'"
            },
            "chipOptions": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IChipOptions",
                    "resolved": "IChipOptions",
                    "references": {
                        "IChipOptions": {
                            "location": "import",
                            "path": "../tk-chips/types",
                            "id": "src/components/tk-chips/types.ts::IChipOptions",
                            "referenceLocation": "IChipOptions"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets options for all chips rendered in chips mode."
                },
                "getter": false,
                "setter": false
            },
            "mode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'text' | 'password' | 'counter' | 'number' | 'chips'",
                    "resolved": "\"chips\" | \"counter\" | \"number\" | \"password\" | \"text\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "input type"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "mode",
                "defaultValue": "'text'"
            },
            "step": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets step for decimal value with mode number"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "step"
            },
            "chipDisabled": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Function",
                    "resolved": "Function",
                    "references": {
                        "Function": {
                            "location": "global",
                            "id": "global::Function"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A function that determines whether a chip is disabled."
                },
                "getter": false,
                "setter": false
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Shows a loading spinner on the right side of the input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "loading",
                "defaultValue": "false"
            },
            "hidePasswordIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Hides the password lock icon."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hide-password-icon",
                "defaultValue": "false"
            },
            "value": {
                "type": "any",
                "mutable": true,
                "complexType": {
                    "original": "string | string[] | number | any[]",
                    "resolved": "any[] | number | string | string[]",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The value of the input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            },
            "dataTestid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the data-testid attribute on the root container element."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "data-testid"
            }
        };
    }
    static get states() {
        return {
            "hasFocus": {},
            "inputType": {},
            "isCounter": {},
            "isPassword": {},
            "passwordStrength": {}
        };
    }
    static get events() {
        return [{
                "method": "tkChange",
                "name": "tk-change",
                "bubbles": true,
                "cancelable": true,
                "composed": false,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the value has changed."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "tkBlur",
                "name": "tk-blur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the input loses focus."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "tkFocus",
                "name": "tk-focus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the input has focus."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "tkClearClick",
                "name": "tk-clear-click",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the clear button has click."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the specified `tk-input`. Use this method instead of the global\n`input.focus()`.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "maskOptions",
                "methodName": "maskOptionsChanged"
            }, {
                "propName": "value",
                "methodName": "valueChanged"
            }];
    }
    static get attachInternalsMemberName() { return "internals"; }
}
