import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { I as IMask } from './index2.js';
import { b as inputInvalid, c as inputDisabled, d as inputFocused, e as input, l as label } from './parts.js';
import { F as FormControlErrorText } from './form-control-error-text.js';
import './justifi-details2.js';
import './event-types.js';
import './justifi-radio-list-item2.js';
import { d as defineCustomElement$2 } from './custom-popper2.js';
import { d as defineCustomElement$1 } from './form-control-tooltip2.js';

const FormControlNumberMasked = /*@__PURE__*/ proxyCustomElement(class FormControlNumberMasked extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.formControlInput = createEvent(this, "formControlInput", 7);
        this.formControlBlur = createEvent(this, "formControlBlur", 7);
        this.imask = null;
        this.isFocused = false;
        this.inputHandler = () => { };
        this.disabled = false;
        this.initializeIMask = () => {
            if (!this.textInput)
                return;
            this.imask = IMask(this.textInput, {
                mask: this.mask,
            });
            this.imask.on('accept', () => {
                var _a;
                const rawValue = (_a = this.imask) === null || _a === void 0 ? void 0 : _a.unmaskedValue;
                if (rawValue !== undefined) {
                    this.inputHandler(this.name, rawValue);
                }
            });
            this.textInput.addEventListener('blur', () => this.formControlBlur.emit());
        };
        this.handleFormControlInput = (event) => {
            var _a;
            const target = event.target;
            const name = target.getAttribute('name');
            const rawValue = ((_a = this.imask) === null || _a === void 0 ? void 0 : _a.unmaskedValue) || target.value;
            this.formControlInput.emit({ name: name, value: rawValue });
        };
        this.updateInput = (newValue) => {
            if (this.imask && newValue) {
                this.imask.value = String(newValue);
            }
        };
    }
    handleDefaultValueChange(newValue) {
        this.initializeIMask();
        this.updateInput(newValue);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
    }
    componentDidLoad() {
        if (this.textInput) {
            this.initializeIMask();
            this.updateInput(this.defaultValue);
        }
    }
    get part() {
        if (this.errorText) {
            return inputInvalid;
        }
        if (this.disabled) {
            return inputDisabled;
        }
        if (this.isFocused) {
            return inputFocused;
        }
        return input;
    }
    render() {
        return (h(Host, { key: '0ff6ce9901d9e804d1b82f9e8830a6d2a4cab67f' }, h("div", { key: '1846069b3d0682c1c1059a9a6192610dc6ac7e66', class: "form-group d-flex flex-column" }, h("div", { key: '2739a42086660392c2c508c37cdb387303efe592', class: "d-flex align-items-start gap-2" }, h("label", { key: 'e2e8149f7284cdfc0548131afa0c0a1d8f2e9385', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'ed0552645fd9929fa10ccd56dae495f27283c168', helpText: this.helpText })), h("input", { key: '1f52622e4724ac43f8b430f4742b6f9ed0a5ccf6', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
                this.isFocused = false;
                this.formControlBlur.emit();
            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '2cce6d31bf2ff20a8c32e1e3d28e1cb8040b192b', errorText: this.errorText, name: this.name }))));
    }
    static get watchers() { return {
        "defaultValue": ["handleDefaultValueChange"]
    }; }
}, [256, "form-control-number-masked", {
        "label": [1],
        "name": [8],
        "helpText": [1, "help-text"],
        "errorText": [1, "error-text"],
        "defaultValue": [1, "default-value"],
        "inputHandler": [16],
        "mask": [1],
        "disabled": [4],
        "isFocused": [32]
    }, undefined, {
        "defaultValue": ["handleDefaultValueChange"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["form-control-number-masked", "custom-popper", "form-control-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "form-control-number-masked":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, FormControlNumberMasked);
            }
            break;
        case "custom-popper":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "form-control-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { FormControlNumberMasked as F, defineCustomElement as d };
