import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { i as iframeInputStylesSet } from './iframe-input-styles-state.js';
import { v as inputInvalidAndFocused, b as inputInvalid, d as inputFocused, e as input } from './parts.js';

const HiddenInput = /*@__PURE__*/ proxyCustomElement(class HiddenInput extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.isFocused = false;
        this.errorText = '';
    }
    focusWithoutPageScroll(input) {
        if (!input)
            return;
        try {
            // Use preventScroll where supported
            input.focus({ preventScroll: true });
        }
        catch (_e) {
            // Fallback for older browsers
            const { scrollX, scrollY } = window;
            input.focus();
            window.scrollTo(scrollX, scrollY);
        }
    }
    async componentDidLoad() {
        const fontStyles = await this.getBaseFontStyles();
        iframeInputStylesSet('fontStyles', fontStyles);
        const focusedStyles = await this.getFocusedStyles();
        iframeInputStylesSet('focused', focusedStyles);
        const focusedAndInvalidStyles = await this.getFocusedAndInvalidStyles();
        iframeInputStylesSet('focusedAndInvalid', focusedAndInvalidStyles);
    }
    async getBaseFontStyles() {
        return new Promise((resolve, _reject) => {
            setTimeout(() => {
                const computedStyles = getComputedStyle(this.hiddenInput);
                const styles = {
                    fontFamily: computedStyles.fontFamily,
                    fontSize: computedStyles.fontSize,
                    fontWeight: computedStyles.fontWeight,
                    lineHeight: computedStyles.lineHeight,
                    margin: computedStyles.margin,
                    padding: computedStyles.padding,
                    color: computedStyles.color,
                };
                resolve(styles);
            }, 500);
        });
    }
    ;
    async getFocusedStyles() {
        return new Promise((resolve, _reject) => {
            this.focusWithoutPageScroll(this.hiddenInput);
            setTimeout(() => {
                this.hiddenInput.blur();
                const computedStyles = getComputedStyle(this.hiddenInput);
                resolve({
                    boxShadow: computedStyles.boxShadow,
                    border: computedStyles.border,
                });
            }, 500);
        });
    }
    async getFocusedAndInvalidStyles() {
        return new Promise((resolve, _reject) => {
            this.focusWithoutPageScroll(this.hiddenInput);
            this.errorText = 'Error';
            setTimeout(() => {
                const computedStyles = getComputedStyle(this.hiddenInput);
                const styles = {
                    boxShadow: computedStyles.boxShadow,
                    border: computedStyles.border,
                };
                this.hiddenInput.blur();
                resolve(styles);
            }, 500);
        });
    }
    get part() {
        if (this.isFocused && this.errorText) {
            return inputInvalidAndFocused;
        }
        if (this.errorText) {
            return inputInvalid;
        }
        if (this.isFocused) {
            return inputFocused;
        }
        return input;
    }
    render() {
        return (h(Host, { key: 'c3b2f0cb5160d888b3ecbaca95285749c0b71002' }, h("input", { key: 'f6d0ad00733d086dfa09b646f7599d60f91e5f50', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
    }
}, [256, "hidden-input", {
        "isFocused": [32],
        "errorText": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["hidden-input"];
    components.forEach(tagName => { switch (tagName) {
        case "hidden-input":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, HiddenInput);
            }
            break;
    } });
}
defineCustomElement();

export { HiddenInput as H, defineCustomElement as d };
