import { h } from "@stencil/core";
import classNames from "classnames";
import { v4 as uuidv4 } from "uuid";
import { getIconElementProps } from "../../utils/icon-utils";
import { INTERNAL_CURRENCY_LIST } from "./constants";
import { floatingElementAutoUpdate } from "../../utils/position-utils";
import { getValidSeparator } from "./helpers";
import { applyStyles } from "../../utils/style-utils";
import { renderHint } from "../../utils/hint-utils";
/**
 * The TkCurrencyInput component allows users to input phone numbers with country selection and validation.
 * @react `import { TkCurrencyInput } from '@takeoff-ui/react'`
 * @vue `import { TkCurrencyInput } from '@takeoff-ui/vue'`
 * @angular `import { TkCurrencyInput } from '@takeoff-ui/angular'`
 */
export class TkCurrencyInput {
    constructor() {
        this.uniqueId = uuidv4();
        /**
         * The value displayed in the input field, formatted as a currency string.
         * This is updated based on the current numeric value and selected currency.
         */
        this.displayValue = '';
        /**
         * Indicates whether the dropdown for currency selection is open.
         */
        this.isDropdownOpen = false;
        /**
         * Current numeric value of the input, used for calculations and formatting.
         * This is updated based on user input and can be used in form submissions.
         */
        this.currentNumericValue = 0;
        /**
         * The value of the input.
         */
        this.value = 0;
        /**
         * Disables the input field if set to true.
         */
        this.disabled = false;
        /**
         * Marks the input field as invalid if set to true.
         */
        this.invalid = false;
        /**
         * Makes the input field read-only if set to true.
         */
        this.readonly = false;
        /**
         * Sets size for the component.
         */
        this.size = 'base';
        /**
         * Displays a red asterisk (*) next to the label for visual emphasis.
         */
        this.showAsterisk = false;
        /**
         * Disables the currency field if set to true.
         */
        this.currencyDisabled = false;
        /**
         * The number of decimal places to display in the formatted currency value.
         * Default is 2, which is common for most currencies.
         */
        this.precision = 2;
        /**
         * The default currency to use when the component is initialized.
         * Default is 'TRY'.
         */
        this.defaultCurrency = 'TRY';
        /**
         * Allows negative values to be entered if set to true.
         */
        this.allowNegative = false;
        /**
         * Hides the currency flag icon in the dropdown button and list.
         * @default false
         */
        this.hideFlag = false;
        /**
         * Allows the value to be set to null.
         * @default false
         */
        this.allowEmptyValue = false;
        /**
         * Determines the width of the dropdown. Accepts values like 'match-parent', 'auto', or a specific width in '300px'.
         * @defaultValue match-parent
         */
        this.dropdownWidthMode = 'match-parent';
        this.closeDropdown = (event) => {
            var _a;
            if (event.composedPath().includes(this.el) || !this.isDropdownOpen) {
                return;
            }
            const target = event.target;
            if (this.dropdownEl && this.dropdownEl.contains(target)) {
                return;
            }
            const hostElement = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.closest('tk-currency-input');
            if (hostElement && hostElement.contains(target)) {
                return;
            }
            this.isDropdownOpen = false;
        };
        this.toggleDropdown = (event) => {
            event.stopPropagation();
            event.preventDefault();
            if (!this.disabled && !this.readonly && !this.currencyDisabled) {
                this.isDropdownOpen = !this.isDropdownOpen;
            }
        };
        this.handleInput = (event) => {
            var _a;
            const target = event.target;
            const inputValue = target.value;
            const cursorPosition = (_a = target.selectionStart) !== null && _a !== void 0 ? _a : 0;
            // Use custom separators if provided, otherwise fall back to currency defaults
            const decimalSeparator = this.getDecimalSeparator();
            const thousandsSeparator = this.getThousandsSeparator();
            // Check if decimal separator was deleted
            if (this.displayValue.includes(decimalSeparator) && !inputValue.includes(decimalSeparator)) {
                const expectedValueWithoutSeparator = this.displayValue.replace(decimalSeparator, '');
                if (inputValue === expectedValueWithoutSeparator) {
                    target.value = this.displayValue;
                    const commaIndex = this.displayValue.indexOf(decimalSeparator);
                    target.setSelectionRange(commaIndex, commaIndex);
                    return;
                }
            }
            // Allow negative sign if allowNegative is true
            const negativePattern = this.allowNegative ? '\\-' : '';
            const allowedChars = new RegExp(`[0-9\\${decimalSeparator}\\${thousandsSeparator}${negativePattern}]`);
            let filteredValue = '';
            let hasNegativeSign = false;
            const parts = inputValue.split(decimalSeparator);
            if (parts.length > 2) {
                const firstSeparatorIndex = inputValue.indexOf(decimalSeparator);
                const newIntegerPart = inputValue.substring(0, firstSeparatorIndex);
                const displayParts = this.displayValue.split(decimalSeparator);
                const oldDecimalPart = displayParts.length > 1 ? displayParts[1] : '';
                filteredValue = newIntegerPart + decimalSeparator + oldDecimalPart;
            }
            else {
                for (let i = 0; i < inputValue.length; i++) {
                    const char = inputValue[i];
                    // Handle negative sign - only allow it at the beginning
                    if (char === '-' && this.allowNegative && i === 0 && !hasNegativeSign) {
                        filteredValue += char;
                        hasNegativeSign = true;
                    }
                    else if (char === '-' && this.allowNegative && hasNegativeSign) {
                        // Remove duplicate negative signs
                    }
                    else if (allowedChars.test(char) && char !== '-') {
                        filteredValue += char;
                    }
                }
            }
            // Truncate decimal digits if they exceed precision
            if (this.precision >= 0) {
                const parts = filteredValue.split(decimalSeparator);
                if (parts.length > 1) {
                    const integerPart = parts[0];
                    const decimalPart = parts[1];
                    if (decimalPart.length > this.precision) {
                        filteredValue = integerPart + decimalSeparator + decimalPart.substring(0, this.precision);
                    }
                }
            }
            const numericValue = this.parseFormattedValue(filteredValue);
            if ((this.allowEmptyValue && cursorPosition === 0) || numericValue === null) {
                this.currentNumericValue = null;
                this.displayValue = '';
                target.value = '';
                this.tkChange.emit({
                    value: null,
                    currency: this.selectedCurrency,
                    formattedValue: '',
                });
                return;
            }
            this.currentNumericValue = numericValue;
            const formattedValue = this.formatCurrency(numericValue);
            this.displayValue = formattedValue;
            target.value = formattedValue;
            const newCursorPosition = this.calculateNewCursorPosition(inputValue, formattedValue, cursorPosition);
            target.setSelectionRange(newCursorPosition, newCursorPosition);
            const eventData = {
                value: numericValue,
                currency: this.selectedCurrency,
                formattedValue: formattedValue,
            };
            this.tkChange.emit(eventData);
        };
        this.handleKeyDown = (event) => {
            const decimalSeparator = this.getDecimalSeparator();
            if (event.key === '.' && decimalSeparator !== '.') {
                event.preventDefault();
            }
        };
        this.handleFocus = () => {
            this.tkFocus.emit();
        };
        this.handleBlur = () => {
            const target = this.inputElement;
            if (!target)
                return;
            const numericValue = this.parseFormattedValue(target.value);
            this.currentNumericValue = numericValue;
            if (numericValue === null) {
                target.value = '';
                this.displayValue = '';
            }
            else {
                const formattedValue = this.formatCurrency(numericValue);
                target.value = formattedValue;
                this.displayValue = formattedValue;
            }
            this.tkBlur.emit();
        };
        this.handleSelectCurrency = (currencyCode, event) => {
            event.stopPropagation();
            event.preventDefault();
            const currencies = this.getCurrencies();
            const currency = currencies.find(c => c.code.toUpperCase() === currencyCode.toUpperCase());
            if (currency) {
                this.selectedCurrency = currency;
                this.updateDisplayValue();
                this.isDropdownOpen = false;
                if (this.inputElement) {
                    this.inputElement.value = this.displayValue;
                }
                const eventData = {
                    value: this.currentNumericValue,
                    currency: this.selectedCurrency,
                    formattedValue: this.displayValue,
                };
                this.tkChange.emit(eventData);
            }
        };
    }
    valueChanged() {
        if (this.value !== this.currentNumericValue) {
            this.currentNumericValue = this.normalizeNumericValue(this.value);
            this.updateDisplayValue();
        }
    }
    disabledChanged(newValue) {
        if (newValue)
            this.isDropdownOpen = false;
    }
    defaultCurrencyChanged() {
        const currencies = this.getCurrencies();
        const currency = currencies.find(c => c.code.toUpperCase() === this.defaultCurrency.toUpperCase());
        if (currency) {
            this.selectedCurrency = currency;
            this.updateDisplayValue();
            if (this.inputElement) {
                this.inputElement.value = this.displayValue;
            }
            const eventData = {
                value: this.currentNumericValue,
                currency: this.selectedCurrency,
                formattedValue: this.displayValue,
            };
            this.tkChange.emit(eventData);
        }
    }
    /**
     * Initialize the component before it is rendered.
     */
    componentWillLoad() {
        this.setSelectedCurrency(this.defaultCurrency);
    }
    /**
     * Update the component when properties change.
     */
    componentDidUpdate() {
        var _a, _b, _c;
        // Handle separator changes
        this.updateDisplayValue();
        // Handle dropdown positioning
        if (this.isDropdownOpen) {
            // Clean up old floating UI listeners before setting up new ones
            (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
            this.updatePosition();
        }
        else {
            // Remove floating UI listeners when dropdown closes
            (_b = this.cleanup) === null || _b === void 0 ? void 0 : _b.call(this);
            // Clear reference to allow garbage collection
            this.cleanup = null;
            (_c = this.dropdownEl) === null || _c === void 0 ? void 0 : _c.remove();
        }
    }
    connectedCallback() {
        document.addEventListener('click', this.closeDropdown);
    }
    disconnectedCallback() {
        var _a;
        // Clean up floating UI listeners on component unmount
        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
        // Clear reference to allow garbage collection
        this.cleanup = null;
        document.removeEventListener('click', this.closeDropdown);
    }
    updatePosition() {
        const dropdownWidthMode = this.dropdownWidthMode;
        const tkInputRootEl = this.el.querySelector('.tk-currency-input-wrapper');
        this.cleanup = floatingElementAutoUpdate(tkInputRootEl, this.dropdownEl, undefined, {
            placement: 'bottom-start',
            size: {
                apply({ rects, elements }) {
                    if (dropdownWidthMode === 'match-parent') {
                        applyStyles(elements.floating, {
                            width: `${rects.reference.width}px`,
                        });
                    }
                    else if (dropdownWidthMode !== 'auto' && dropdownWidthMode.length > 0) {
                        applyStyles(elements.floating, {
                            width: dropdownWidthMode,
                        });
                    }
                },
            },
        });
    }
    /**
     * Get the currencies list - either from prop or use internal default
     */
    getCurrencies() {
        return this.currencyList || INTERNAL_CURRENCY_LIST;
    }
    setSelectedCurrency(currencyCode) {
        const currencies = this.getCurrencies();
        const currency = currencies.find(c => c.code.toUpperCase() === currencyCode.toUpperCase());
        this.selectedCurrency = currency || currencies[0];
        this.currentNumericValue = this.normalizeNumericValue(this.value);
        this.updateDisplayValue();
    }
    normalizeNumericValue(value) {
        if (this.allowEmptyValue && value === null) {
            return null;
        }
        return value !== null && value !== void 0 ? value : 0;
    }
    updateDisplayValue() {
        if (this.currentNumericValue === null || this.currentNumericValue === undefined || isNaN(this.currentNumericValue)) {
            this.displayValue = '';
            return;
        }
        this.displayValue = this.formatCurrency(this.currentNumericValue);
    }
    /**
     * Get the decimal separator to use - custom prop takes priority over currency default
     */
    getDecimalSeparator() {
        var _a, _b;
        return getValidSeparator(this.decimalSeparator, this.thousandsSeparator, (_a = this.selectedCurrency) === null || _a === void 0 ? void 0 : _a.decimalSeparator, (_b = this.selectedCurrency) === null || _b === void 0 ? void 0 : _b.thousandsSeparator, '.');
    }
    /**
     * Get the thousands separator to use - custom prop takes priority over currency default
     */
    getThousandsSeparator() {
        var _a, _b;
        return getValidSeparator(this.thousandsSeparator, this.decimalSeparator, (_a = this.selectedCurrency) === null || _a === void 0 ? void 0 : _a.thousandsSeparator, (_b = this.selectedCurrency) === null || _b === void 0 ? void 0 : _b.decimalSeparator, ',');
    }
    formatCurrency(amount) {
        if (isNaN(amount))
            return '';
        // Use custom separators if provided, otherwise fall back to currency defaults
        const decimalSeparator = this.getDecimalSeparator();
        const thousandsSeparator = this.getThousandsSeparator();
        const isNegative = amount < 0 || Object.is(amount, -0);
        const absoluteAmount = Math.abs(amount);
        // Format the number with the specified precision
        const fixedAmount = Number(absoluteAmount).toFixed(this.precision);
        const [integerPart, decimalPart] = fixedAmount.split('.');
        // Add thousands separators
        const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
        // Combine with decimal part if precision > 0
        let result = formattedInteger;
        if (this.precision > 0 && decimalPart) {
            result += decimalSeparator + decimalPart;
        }
        // Add negative sign if needed and allowed
        if (isNegative && this.allowNegative) {
            result = '-' + result;
        }
        return result;
    }
    parseFormattedValue(formattedValue) {
        if (!formattedValue) {
            if (this.allowEmptyValue)
                return null;
            return 0;
        }
        // Use custom separators if provided, otherwise fall back to currency defaults
        const decimalSeparator = this.getDecimalSeparator();
        const thousandsSeparator = this.getThousandsSeparator();
        const isNegative = formattedValue.startsWith('-') && this.allowNegative;
        // Remove negative sign temporarily for processing
        let cleanValue = formattedValue.replace('-', '');
        // Remove thousands separators
        if (thousandsSeparator) {
            cleanValue = cleanValue.replace(new RegExp('\\' + thousandsSeparator, 'g'), '');
        }
        // Handle decimal separator: split by separator, keep first part as integer, join rest as decimal
        const parts = cleanValue.split(decimalSeparator);
        if (parts.length > 1) {
            cleanValue = parts[0] + '.' + parts.slice(1).join('');
        }
        // Remove non-numeric characters except decimal point
        cleanValue = cleanValue.replace(/[^0-9.]/g, '');
        const numericValue = parseFloat(cleanValue);
        const result = isNaN(numericValue) ? 0 : numericValue;
        return isNegative ? -result : result;
    }
    calculateNewCursorPosition(inputValue, formattedValue, oldCursorPosition) {
        const decimalSeparator = this.getDecimalSeparator();
        // Find decimal separator positions
        const inputDecimalIndex = inputValue.indexOf(decimalSeparator);
        const formattedDecimalIndex = formattedValue.indexOf(decimalSeparator);
        // If no decimal separator in formatted value (precision 0), treat end as decimal point
        const targetDecimalIndex = formattedDecimalIndex === -1 ? formattedValue.length : formattedDecimalIndex;
        // If no decimal separator in input, treat end as decimal point
        const sourceDecimalIndex = inputDecimalIndex === -1 ? inputValue.length : inputDecimalIndex;
        // Helper to count digits in a range
        const countDigits = (str, start, end) => {
            let count = 0;
            for (let i = Math.min(start, end); i < Math.max(start, end); i++) {
                if (str[i] >= '0' && str[i] <= '9') {
                    count++;
                }
            }
            return count;
        };
        // Calculate logical distance (number of digits) from decimal separator
        const isCursorAfterDecimal = oldCursorPosition > sourceDecimalIndex;
        const logicalDist = countDigits(inputValue, oldCursorPosition, sourceDecimalIndex);
        if (logicalDist === 0) {
            return isCursorAfterDecimal ? targetDecimalIndex + 1 : targetDecimalIndex;
        }
        // Traverse formatted value to find new position
        let currentDist = 0;
        if (isCursorAfterDecimal) {
            // Moving right from decimal separator
            for (let i = targetDecimalIndex + 1; i < formattedValue.length; i++) {
                if (currentDist >= logicalDist) {
                    return i;
                }
                if (formattedValue[i] >= '0' && formattedValue[i] <= '9') {
                    currentDist++;
                }
            }
            return formattedValue.length;
        }
        else {
            // Moving left from decimal separator
            for (let i = targetDecimalIndex - 1; i >= 0; i--) {
                if (formattedValue[i] >= '0' && formattedValue[i] <= '9') {
                    currentDist++;
                }
                if (currentDist > logicalDist) {
                    // Use > because we want to be *after* the digit that completes the count
                    return i + 1;
                }
            }
            // If we run out of digits, go to start, but respect negative sign
            const hasNegative = formattedValue.startsWith('-');
            return hasNegative ? 1 : 0;
        }
    }
    renderLabel() {
        if (this.label) {
            return (h("label", { class: "tk-currency-input-label", htmlFor: this.uniqueId }, h("span", { class: "tk-currency-input-label-title" }, this.label), this.showAsterisk && h("span", { class: "tk-currency-input-label-asterisk" }, "*")));
        }
        return null;
    }
    renderCurrencyInput() {
        return (h("input", { id: this.uniqueId, ref: el => (this.inputElement = el), type: "text", class: "tk-currency-input-input", autoComplete: "off", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, name: this.name, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }));
    }
    renderCurrencySelector() {
        return (h("div", { class: "tk-currency-input-dropdown" }, this.renderDropdownButton(), this.isDropdownOpen && (h("div", { class: "tk-currency-input-dropdown-menu", role: "listbox", ref: el => (this.dropdownEl = el) }, this.renderCurrencyList()))));
    }
    /**
     * Get the flag class based on the currency's ID.
     */
    getFlagClass(currency) {
        return classNames('flag', (currency === null || currency === void 0 ? void 0 : currency.id) ? `flag-${currency === null || currency === void 0 ? void 0 : currency.id.toLowerCase()}` : 'flag-none');
    }
    renderDropdownButton() {
        var _a;
        return (h("button", { type: "button", class: "tk-currency-input-dropdown-button", onClick: event => this.toggleDropdown(event), disabled: this.currencyDisabled || this.disabled, "aria-disabled": this.currencyDisabled || this.disabled }, h("div", { class: "tk-currency-input-dropdown-button-selected" }, !this.hideFlag && this.renderFlag(this.selectedCurrency), h("span", { class: "tk-currency-input-dropdown-button-currency-code" }, (_a = this.selectedCurrency) === null || _a === void 0 ? void 0 : _a.code), !this.currencyDisabled && h("tk-icon", Object.assign({}, getIconElementProps('keyboard_arrow_down', { variant: null, size: 'large' }, 'rounded', 'span'))))));
    }
    renderCurrencyList() {
        const currencies = this.getCurrencies();
        return (h("ul", { class: "tk-currency-input-dropdown-menu-list" }, currencies.map(currency => (h("li", { class: "tk-currency-input-dropdown-menu-list-item", key: currency.code, role: "option", onClick: event => this.handleSelectCurrency(currency.code, event), "aria-selected": this.selectedCurrency.code === currency.code }, !this.hideFlag && this.renderFlag(currency), h("span", { class: "tk-currency-input-dropdown-menu-list-country-label" }, currency.symbol), h("span", { class: "tk-currency-input-dropdown-menu-list-dial-id" }, currency.name))))));
    }
    /**
     * Render the flag element for a currency. Shows a close icon for currencies without a matching currency ID.
     */
    renderFlag(currency) {
        const flagClass = this.getFlagClass(currency);
        return (currency === null || currency === void 0 ? void 0 : currency.id) ? (h("div", { class: flagClass, "aria-label": `${currency.code} flag` })) : (h("div", { class: flagClass }, h("tk-icon", Object.assign({}, getIconElementProps('close', { color: 'var(--static-white)' })))));
    }
    render() {
        return (h("div", { key: '9719d00968adfba58e4f0eff8c1bbd5dbfcdddbc', class: classNames('tk-currency-input-container', `tk-currency-input-container-${this.size}`), "aria-invalid": this.invalid, "aria-disabled": this.disabled, "aria-readonly": this.readonly }, this.renderLabel(), h("div", { key: '19750f8dd6ddde85b364da27c10fe501667c57c3', class: "tk-currency-input-wrapper" }, this.renderCurrencyInput(), this.renderCurrencySelector()), renderHint(this.hint, this.error, this.invalid)));
    }
    static get is() { return "tk-currency-input"; }
    static get formAssociated() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["tk-currency-input.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["tk-currency-input.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number | null",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value",
                "defaultValue": "0"
            },
            "currencyList": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ICurrency[]",
                    "resolved": "ICurrency[]",
                    "references": {
                        "ICurrency": {
                            "location": "import",
                            "path": "./types",
                            "id": "src/components/tk-currency-input/types.ts::ICurrency",
                            "referenceLocation": "ICurrency"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "List of available currencies.\nIf not provided, it defaults to the internal currency list."
                },
                "getter": false,
                "setter": false
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Placeholder text for the input field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Disables the input field if set to true."
                },
                "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": [],
                    "text": "Marks the input field as invalid if set to true."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Makes the input field read-only if set to true."
                },
                "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": [],
                    "text": "Sets size for the component."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "'base'"
            },
            "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"
            },
            "currencyDisabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Disables the currency field if set to true."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "currency-disabled",
                "defaultValue": "false"
            },
            "precision": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The number of decimal places to display in the formatted currency value.\nDefault is 2, which is common for most currencies."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "precision",
                "defaultValue": "2"
            },
            "defaultCurrency": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The default currency to use when the component is initialized.\nDefault is 'TRY'."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "default-currency",
                "defaultValue": "'TRY'"
            },
            "allowNegative": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Allows negative values to be entered if set to true."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "allow-negative",
                "defaultValue": "false"
            },
            "decimalSeparator": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Separator",
                    "resolved": "\" \" | \",\" | \".\"",
                    "references": {
                        "Separator": {
                            "location": "import",
                            "path": "./types",
                            "id": "src/components/tk-currency-input/types.ts::Separator",
                            "referenceLocation": "Separator"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Custom decimal separator to use for formatting.\nIf provided, this will override the currency's default decimal separator.\nExample: \".\" for USD style, \",\" for EUR style"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "decimal-separator"
            },
            "thousandsSeparator": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Separator",
                    "resolved": "\" \" | \",\" | \".\"",
                    "references": {
                        "Separator": {
                            "location": "import",
                            "path": "./types",
                            "id": "src/components/tk-currency-input/types.ts::Separator",
                            "referenceLocation": "Separator"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Custom thousands separator to use for formatting.\nIf provided, this will override the currency's default thousands separator.\nExample: \",\" for USD style, \".\" for EUR style, \" \" for some European styles"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "thousands-separator"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The label for the input field.\nIf provided, it will be displayed above the input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name attribute for the input element.\nUseful for form submissions."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "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"
            },
            "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"
            },
            "hideFlag": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "Hides the currency flag icon in the dropdown button and list."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hide-flag",
                "defaultValue": "false"
            },
            "allowEmptyValue": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "Allows the value to be set to null."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "allow-empty-value",
                "defaultValue": "false"
            },
            "dropdownWidthMode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'match-parent' | 'auto' | string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "match-parent"
                        }],
                    "text": "Determines the width of the dropdown. Accepts values like 'match-parent', 'auto', or a specific width in '300px'."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "dropdown-width-mode",
                "defaultValue": "'match-parent'"
            }
        };
    }
    static get states() {
        return {
            "selectedCurrency": {},
            "displayValue": {},
            "isDropdownOpen": {},
            "currentNumericValue": {}
        };
    }
    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": "tkBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the input loses focus."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "tkFocus",
                "name": "tkFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the input has focus."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "valueChanged"
            }, {
                "propName": "disabled",
                "methodName": "disabledChanged"
            }, {
                "propName": "defaultCurrency",
                "methodName": "defaultCurrencyChanged"
            }];
    }
}
