import { h, } from "@stencil/core";
import { countries, getCountryByCode, } from "../../utils/country-data";
export class AuthheroNode {
    /**
     * The component configuration to render.
     * Follows Auth0 Forms component schema.
     */
    component;
    /**
     * Current value for field components.
     */
    value;
    /**
     * Whether the component is disabled.
     */
    disabled = false;
    /**
     * Whether the password field is visible.
     */
    passwordVisible = false;
    /**
     * Selected country for TEL input with country selector.
     */
    selectedCountry = getCountryByCode("US");
    /**
     * Local phone number (without dial code) for TEL input.
     */
    localPhoneNumber = "";
    /**
     * Whether the country dropdown is open.
     */
    countryDropdownOpen = false;
    /**
     * Whether the TEL field is currently in email mode (allow_email config).
     * When true, the value is emitted as-is without dial code prefix.
     */
    telEmailMode = false;
    /**
     * Emitted when a field value changes.
     */
    fieldChange;
    /**
     * Emitted when a button is clicked.
     */
    buttonClick;
    componentChanged() {
        this.initCountryFromConfig();
        this.initTelValue();
    }
    valueChanged() {
        this.initTelValue();
    }
    componentWillLoad() {
        this.initCountryFromConfig();
        this.initTelValue();
    }
    initCountryFromConfig() {
        if (this.component?.type === "TEL") {
            const config = this.component.config;
            const defaultCountry = config?.default_country;
            if (defaultCountry) {
                this.selectedCountry = getCountryByCode(defaultCountry);
            }
            // For allow_email mode, start in email/text mode (no country picker)
            // until the user starts typing digits
            if (config?.allow_email === true) {
                this.telEmailMode = true;
            }
        }
    }
    /**
     * Hydrate localPhoneNumber (and selectedCountry) from the effective value
     * for TEL fields. The full value is stored as `{dialCode}{localNumber}`,
     * e.g. "+15551234567".
     */
    initTelValue() {
        if (this.component?.type !== "TEL")
            return;
        const config = this.component.config;
        const allowEmail = config?.allow_email === true;
        const fullValue = this.getEffectiveValue();
        if (!fullValue) {
            this.localPhoneNumber = "";
            if (allowEmail) {
                this.telEmailMode = true;
            }
            return;
        }
        // Try to match a country by dial code (longest match first)
        if (fullValue.startsWith("+")) {
            const sorted = [...countries].sort((a, b) => b.dialCode.length - a.dialCode.length);
            for (const country of sorted) {
                if (fullValue.startsWith(country.dialCode)) {
                    this.selectedCountry = country;
                    this.localPhoneNumber = fullValue.slice(country.dialCode.length);
                    if (allowEmail) {
                        this.telEmailMode = false;
                    }
                    return;
                }
            }
        }
        // No dial code match — check if it looks like an email or a phone number
        this.localPhoneNumber = fullValue;
        if (allowEmail) {
            const looksLikePhone = /^[+\d]/.test(fullValue);
            this.telEmailMode = !looksLikePhone;
        }
    }
    handleCountryChange = (e) => {
        const target = e.target;
        this.selectedCountry = getCountryByCode(target.value);
        // Re-emit the full phone number with new dial code
        const fullNumber = this.localPhoneNumber
            ? `${this.selectedCountry.dialCode}${this.localPhoneNumber}`
            : "";
        this.fieldChange.emit({ id: this.component.id, value: fullNumber });
    };
    /**
     * Try to detect a dial code prefix in the raw input (e.g. "+46", "0046")
     * and update selectedCountry accordingly. Returns the local number portion
     * (after the dial code) if a match was found, or null if no match.
     */
    detectDialCodeFromInput(raw) {
        // Normalise "00" international prefix to "+"
        const normalized = raw.startsWith("00") ? "+" + raw.slice(2) : raw;
        if (!normalized.startsWith("+"))
            return null;
        // Match longest dial code first
        const sorted = [...countries].sort((a, b) => b.dialCode.length - a.dialCode.length);
        for (const country of sorted) {
            if (normalized.startsWith(country.dialCode)) {
                this.selectedCountry = country;
                return normalized.slice(country.dialCode.length);
            }
        }
        return null;
    }
    /**
     * Shared phone-input cleaning logic. Detects dial codes, strips non-phone
     * characters, updates the input value, and emits the full number.
     * @param allowPlus When true, uses a two-pass clean that first keeps '+'
     *   then strips it (for combined tel+email fields). When false, strips '+'
     *   in a single pass (phone-only fields where the picker provides the prefix).
     */
    processPhoneInput(target, value, allowPlus) {
        const dialLocal = this.detectDialCodeFromInput(value);
        if (dialLocal !== null) {
            const cleanedLocal = allowPlus
                ? dialLocal.replace(/[^+\d\s\-()]/g, "").replace(/\+/g, "")
                : dialLocal.replace(/[^\d\s\-()]/g, "");
            target.value = cleanedLocal;
            this.localPhoneNumber = cleanedLocal;
            const fullNumber = `${this.selectedCountry.dialCode}${cleanedLocal}`;
            this.fieldChange.emit({ id: this.component.id, value: fullNumber });
        }
        else {
            const cleaned = allowPlus
                ? value.replace(/[^+\d\s\-()]/g, "").replace(/\+/g, "")
                : value.replace(/[^\d\s\-()]/g, "");
            if (cleaned !== value) {
                target.value = cleaned;
            }
            this.localPhoneNumber = cleaned;
            const fullNumber = cleaned
                ? `${this.selectedCountry.dialCode}${cleaned}`
                : "";
            this.fieldChange.emit({ id: this.component.id, value: fullNumber });
        }
    }
    handlePhoneInput = (e) => {
        const target = e.target;
        const value = target.value;
        const config = this.component.config;
        const allowEmail = config?.allow_email === true;
        if (allowEmail) {
            // Detect phone mode: value starts with digit or '+', and no '@'.
            // When the field is empty, revert to neutral (email) mode so the
            // country picker disappears and the user can start fresh.
            const looksLikePhone = value.length > 0 && /^[+\d]/.test(value) && !value.includes("@");
            this.telEmailMode = !looksLikePhone;
            if (!this.telEmailMode) {
                this.processPhoneInput(target, value, true);
            }
            else {
                // Email or text — emit as-is
                this.localPhoneNumber = value;
                this.fieldChange.emit({ id: this.component.id, value });
            }
            return;
        }
        // Standard phone-only mode
        this.processPhoneInput(target, value, false);
    };
    handleInput = (e) => {
        const target = e.target;
        this.fieldChange.emit({ id: this.component.id, value: target.value });
    };
    handleKeyDown = (e) => {
        if (e.key === "Enter") {
            e.preventDefault();
            this.buttonClick.emit({ id: "submit", type: "submit", value: "next" });
        }
        // In combined TEL+email mode, backspace on an empty field exits phone mode
        if (e.key === "Backspace" && !this.telEmailMode) {
            const target = e.target;
            const config = this.component.config;
            if (config?.allow_email === true && target.value.length === 0) {
                this.telEmailMode = true;
                this.localPhoneNumber = "";
                this.fieldChange.emit({ id: this.component.id, value: "" });
            }
        }
    };
    handleCheckbox = (e) => {
        const target = e.target;
        this.fieldChange.emit({
            id: this.component.id,
            value: target.checked ? "true" : "false",
        });
    };
    /**
     * Returns the effective value for the field: uses `this.value` if set,
     * otherwise falls back to `config.default_value` (resolved by the server).
     */
    getEffectiveValue() {
        if (this.value !== undefined && this.value !== null) {
            return this.value;
        }
        const comp = this.component;
        if (comp.config && "default_value" in comp.config) {
            const dv = comp.config.default_value;
            if (typeof dv === "string" && dv !== "") {
                return dv;
            }
        }
        return undefined;
    }
    /**
     * Sanitize a string for use in CSS class names and part tokens.
     * Replaces spaces and special characters with hyphens, converts to lowercase.
     */
    sanitizeForCssToken(value) {
        return value
            .toLowerCase()
            .replace(/[^a-z0-9-]/g, "-") // Replace non-alphanumeric chars with hyphen
            .replace(/-+/g, "-") // Collapse multiple hyphens
            .replace(/^-|-$/g, ""); // Remove leading/trailing hyphens
    }
    handleButtonClick = (e, type, value) => {
        // Always prevent default to avoid double submissions
        // The parent widget handles the actual form submission
        e.preventDefault();
        this.buttonClick.emit({ id: this.component.id, type, value });
    };
    togglePasswordVisibility = () => {
        this.passwordVisible = !this.passwordVisible;
    };
    /**
     * Get error messages from the component.
     */
    getErrors() {
        const runtimeComp = this.component;
        return (runtimeComp.messages?.filter((m) => m.type === "error") || []);
    }
    /**
     * Render a floating label for a field.
     */
    renderFloatingLabel(text, inputId, required, hasValue) {
        if (!text)
            return null;
        // Use string class instead of object to avoid hydration mismatch
        const labelClass = hasValue ? "input-label floating" : "input-label";
        return (h("label", { class: labelClass, part: "label", htmlFor: inputId }, text, required && h("span", { class: "required" }, "*")));
    }
    /**
     * Render a label for a field (non-floating version for checkboxes etc).
     */
    renderLabel(text, inputId, required) {
        if (!text)
            return null;
        return (h("label", { class: "input-label", part: "label", htmlFor: inputId }, text, required && h("span", { class: "required" }, "*")));
    }
    /**
     * Get the input field class string.
     * Uses string instead of object to avoid hydration mismatch.
     */
    getInputFieldClass(hasError) {
        return hasError ? "input-field has-error" : "input-field";
    }
    /**
     * Render the eye icon for password visibility toggle.
     */
    renderPasswordToggle() {
        if (this.passwordVisible) {
            // Eye-off icon (password is visible, click to hide)
            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }), h("line", { x1: "1", y1: "1", x2: "23", y2: "23" })));
        }
        // Eye icon (password is hidden, click to show)
        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), h("circle", { cx: "12", cy: "12", r: "3" })));
    }
    /**
     * Render error messages.
     */
    renderErrors() {
        const errors = this.getErrors();
        return errors.map((err) => (h("span", { class: "error-text", part: "error-text", key: err.id ?? err.text }, err.text)));
    }
    /**
     * Render hint text.
     */
    renderHint(hint) {
        if (!hint)
            return null;
        return (h("span", { class: "helper-text", part: "helper-text" }, hint));
    }
    // ===========================================================================
    // BLOCK Component Renderers
    // ===========================================================================
    renderDivider() {
        return h("hr", { class: "divider", part: "divider" });
    }
    renderHtml(component) {
        return (h("div", { class: "html-content", part: "html-content", innerHTML: component.config?.content ?? "" }));
    }
    renderImage(component) {
        const { src, alt, width, height } = component.config ?? {};
        if (!src)
            return null;
        return (h("img", { class: "image", part: "image", src: src, alt: alt ?? "", width: width, height: height, loading: "lazy" }));
    }
    renderRichText(component) {
        return (h("div", { class: "rich-text", part: "rich-text", innerHTML: component.config?.content ?? "" }));
    }
    renderNextButton(component) {
        return (h("button", { type: "submit", class: "btn btn-primary", part: "button button-primary", "data-primary-action-button": true, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "submit", "next") }, component.config.text ?? "Continue"));
    }
    renderPreviousButton(component) {
        return (h("button", { type: "button", class: "btn btn-secondary", part: "button button-secondary", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "previous", "back") }, component.config.text ?? "Back"));
    }
    renderJumpButton(component) {
        return (h("button", { type: "button", class: "btn btn-link", part: "button button-link", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "jump", component.config.target_step) }, component.config.text ?? "Go"));
    }
    renderResendButton(component) {
        return (h("button", { type: "button", class: "btn btn-link", part: "button button-link", disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "resend", component.config.resend_action) }, component.config.text ?? "Resend"));
    }
    // ===========================================================================
    // FIELD Component Renderers
    // ===========================================================================
    renderTextField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const { multiline, max_length, autocomplete } = component.config ?? {};
        const effectiveValue = this.getEffectiveValue();
        const hasValue = !!(effectiveValue && effectiveValue.length > 0);
        if (multiline) {
            return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("textarea", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input textarea", name: component.id, placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, onInput: this.handleInput }, effectiveValue ?? ""), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
        }
        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: component.sensitive ? "password" : "text", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, maxLength: max_length, autoComplete: autocomplete, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderEmailField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const effectiveValue = this.getEffectiveValue();
        const hasValue = !!(effectiveValue && effectiveValue.length > 0);
        const { autocomplete } = (component.config ?? {});
        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "email", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: autocomplete || "email", onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderPasswordField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const effectiveValue = this.getEffectiveValue();
        const hasValue = !!(effectiveValue && effectiveValue.length > 0);
        const forgotPasswordLink = component.config?.forgot_password_link;
        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container password-container" }, h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: this.passwordVisible ? "text" : "password", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, minLength: component.config?.min_length, autocomplete: "current-password", onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue), h("button", { type: "button", class: "password-toggle", part: "password-toggle", onClick: this.togglePasswordVisibility, "aria-label": "Toggle password visibility", "aria-pressed": this.passwordVisible ? "true" : "false" }, this.renderPasswordToggle())), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint), forgotPasswordLink && (h("div", { class: "field-link", part: "field-link" }, h("a", { href: forgotPasswordLink, class: "link", part: "link" }, "Forgot password?")))));
    }
    renderNumberField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const { placeholder, min, max, step } = component.config ?? {};
        const effectiveValue = this.getEffectiveValue();
        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "number", name: component.id, value: effectiveValue ?? "", placeholder: placeholder, required: component.required, disabled: this.disabled, min: min, max: max, step: step, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderTelField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const config = component.config;
        const allowEmail = config?.allow_email === true;
        const hasValue = this.localPhoneNumber.length > 0;
        // In allow_email mode, show the country picker only when the user is typing a phone number
        const showCountryPicker = allowEmail ? !this.telEmailMode : true;
        // Calculate dynamic width: flag + space + dial code + small padding for dropdown arrow
        const selectedText = `${this.selectedCountry.flag} ${this.selectedCountry.dialCode}`;
        const selectWidth = `${selectedText.length + 1}ch`;
        const countrySelect = showCountryPicker ? (h("select", { class: "country-select", part: "country-select", style: { width: selectWidth, minWidth: "0" }, onChange: this.handleCountryChange, disabled: this.disabled, "aria-label": "Country code" }, countries.map((country) => (h("option", { value: country.code, selected: this.selectedCountry.code === country.code, key: country.code }, `${country.flag} ${country.dialCode}`))))) : null;
        const inputType = allowEmail && this.telEmailMode ? "text" : "tel";
        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: showCountryPicker ? "phone-input-wrapper" : "", part: "phone-input-wrapper" }, countrySelect, h("div", { class: "input-container" }, h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: inputType, name: component.id, "data-input-name": component.id, value: this.localPhoneNumber, placeholder: " ", required: component.required, disabled: this.disabled, autocomplete: allowEmail && this.telEmailMode ? "email" : "tel-national", onInput: this.handlePhoneInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderUrlField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const effectiveValue = this.getEffectiveValue();
        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, this.renderLabel(component.label, inputId, component.required), h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "url", name: component.id, value: effectiveValue ?? "", placeholder: component.config?.placeholder, required: component.required, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderDateField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const { min, max } = component.config ?? {};
        // Date fields always have a value (even if placeholder format), so always float the label
        const hasValue = true;
        const effectiveValue = this.getEffectiveValue();
        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input", type: "date", name: component.id, "data-input-name": component.id, value: effectiveValue ?? "", placeholder: " ", required: component.required, disabled: this.disabled, min: min, max: max, onInput: this.handleInput, onKeyDown: this.handleKeyDown }), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderBooleanField(component) {
        return (h("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, h("input", { type: "checkbox", part: "checkbox", name: component.id, checked: this.value === "true" || component.config?.default_value === true, required: component.required, disabled: this.disabled, onChange: this.handleCheckbox }), h("span", { class: "checkbox-label", part: "checkbox-label" }, component.label)));
    }
    renderLegalField(component) {
        const text = component.config?.text ?? component.label ?? "";
        const isHtml = component.config?.html === true;
        return (h("label", { class: "checkbox-wrapper", part: "checkbox-wrapper" }, h("input", { type: "checkbox", part: "checkbox", name: component.id, checked: this.value === "true", required: component.required, disabled: this.disabled, onChange: this.handleCheckbox }), isHtml ? (h("span", { class: "checkbox-label", part: "checkbox-label", innerHTML: text })) : (h("span", { class: "checkbox-label", part: "checkbox-label" }, text))));
    }
    renderCountryField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const { placeholder } = component.config ?? {};
        const hasValue = true;
        const effectiveValue = this.getEffectiveValue();
        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("select", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input select", name: component.id, required: component.required, disabled: this.disabled, onChange: this.handleInput }, placeholder && (h("option", { value: "", disabled: true, selected: !effectiveValue }, placeholder)), countries.map((c) => (h("option", { value: c.code, selected: effectiveValue === c.code, key: c.code }, c.flag, " ", c.name)))), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderDropdownField(component) {
        const inputId = `input-${component.id}`;
        const errors = this.getErrors();
        const { options, placeholder } = component.config ?? {};
        // Dropdown always has visual content (selected option), so always float the label
        const hasValue = true;
        const effectiveValue = this.getEffectiveValue();
        return (h("div", { class: "input-wrapper", part: "input-wrapper" }, h("div", { class: "input-container" }, h("select", { id: inputId, class: this.getInputFieldClass(errors.length > 0), part: "input select", name: component.id, required: component.required, disabled: this.disabled, onChange: this.handleInput }, placeholder && (h("option", { value: "", disabled: true, selected: !effectiveValue }, placeholder)), options?.map((opt) => (h("option", { value: opt.value, selected: effectiveValue === opt.value, key: opt.value }, opt.label)))), this.renderFloatingLabel(component.label, inputId, component.required, hasValue)), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderChoiceField(component) {
        const errors = this.getErrors();
        const { options, display } = component.config ?? {};
        const isCheckbox = display === "checkbox";
        const inputType = isCheckbox ? "checkbox" : "radio";
        return (h("div", { class: "choice-wrapper", part: "choice-wrapper" }, component.label && (h("span", { class: "choice-label", part: "choice-label" }, component.label, component.required && h("span", { class: "required" }, "*"))), h("div", { class: "choice-options", part: "choice-options" }, options?.map((opt) => (h("label", { class: "choice-option", part: "choice-option", key: opt.value }, h("input", { type: inputType, part: inputType, name: component.id, value: opt.value, checked: this.getEffectiveValue() === opt.value, required: component.required && !isCheckbox, disabled: this.disabled, onChange: this.handleInput }), h("span", null, opt.label))))), this.renderErrors(), errors.length === 0 && this.renderHint(component.hint)));
    }
    renderSocialField(component) {
        const providers = component.config?.providers ?? [];
        const providerDetails = component.config?.provider_details;
        // Create a map of provider details for quick lookup
        const detailsMap = new Map(providerDetails?.map((d) => [d.name, d]) ?? []);
        // Get button text from provider_details (already contains the full button text from server)
        const getButtonText = (provider) => {
            const details = detailsMap.get(provider);
            if (details?.display_name) {
                return details.display_name;
            }
            // Fallback: use provider name with basic formatting
            return provider
                .split("-")
                .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
                .join(" ");
        };
        // Get provider icon from provider_details icon_url
        const getProviderIcon = (provider) => {
            const details = detailsMap.get(provider);
            const safeProvider = this.sanitizeForCssToken(provider);
            if (details?.icon_url) {
                return (h("img", { class: "social-icon", part: `social-icon social-icon-${safeProvider}`, src: details.icon_url, alt: details.display_name || provider }));
            }
            // No icon provided - return null (button will just show text)
            return null;
        };
        // Get strategy from provider details
        const getProviderStrategy = (provider) => {
            const details = detailsMap.get(provider);
            return details?.strategy ?? provider;
        };
        return (h("div", { class: "social-buttons", part: "social-buttons" }, providers.map((provider) => {
            const safeProvider = this.sanitizeForCssToken(provider);
            const strategy = getProviderStrategy(provider);
            const icon = getProviderIcon(provider);
            const details = detailsMap.get(provider);
            const btnClass = `btn btn-secondary btn-social btn-social-${safeProvider}${icon ? "" : " no-icon"}`;
            const btnPart = `button button-secondary button-social button-social-${safeProvider}`;
            const content = [
                icon,
                h("span", { class: "btn-social-content", part: `button-social-content button-social-content-${safeProvider}` }, h("span", { part: `button-social-text button-social-text-${safeProvider}` }, getButtonText(provider)), h("span", { class: "btn-social-subtitle", part: `button-social-subtitle button-social-subtitle-${safeProvider}` })),
            ];
            if (details?.href) {
                return (h("a", { href: this.disabled ? undefined : details.href, class: btnClass, part: btnPart, "data-connection-name": provider, "data-strategy": strategy, key: provider, "aria-disabled": this.disabled ? "true" : undefined, tabindex: this.disabled ? -1 : undefined, onClick: (e) => {
                        if (this.disabled) {
                            e.preventDefault();
                        }
                    } }, content));
            }
            return (h("button", { type: "button", class: btnClass, part: btnPart, "data-connection-name": provider, "data-strategy": strategy, disabled: this.disabled, onClick: (e) => this.handleButtonClick(e, "SOCIAL", provider), key: provider }, content));
        })));
    }
    // ===========================================================================
    // Main Render
    // ===========================================================================
    render() {
        if (!this.component) {
            return null;
        }
        // Hidden components
        if (this.component.visible === false) {
            return null;
        }
        switch (this.component.type) {
            // BLOCK components
            case "DIVIDER":
                return this.renderDivider();
            case "HTML":
                return this.renderHtml(this.component);
            case "IMAGE":
                return this.renderImage(this.component);
            case "RICH_TEXT":
                return this.renderRichText(this.component);
            case "NEXT_BUTTON":
                return this.renderNextButton(this.component);
            case "PREVIOUS_BUTTON":
                return this.renderPreviousButton(this.component);
            case "JUMP_BUTTON":
                return this.renderJumpButton(this.component);
            case "RESEND_BUTTON":
                return this.renderResendButton(this.component);
            // FIELD components
            case "TEXT":
                return this.renderTextField(this.component);
            case "EMAIL":
                return this.renderEmailField(this.component);
            case "PASSWORD":
                return this.renderPasswordField(this.component);
            case "NUMBER":
                return this.renderNumberField(this.component);
            case "TEL":
                return this.renderTelField(this.component);
            case "URL":
                return this.renderUrlField(this.component);
            case "DATE":
                return this.renderDateField(this.component);
            case "BOOLEAN":
                return this.renderBooleanField(this.component);
            case "LEGAL":
                return this.renderLegalField(this.component);
            case "COUNTRY":
                return this.renderCountryField(this.component);
            case "DROPDOWN":
                return this.renderDropdownField(this.component);
            case "CHOICE":
                return this.renderChoiceField(this.component);
            case "SOCIAL":
                return this.renderSocialField(this.component);
            // WIDGET components (not yet implemented)
            case "AUTH0_VERIFIABLE_CREDENTIALS":
            case "GMAPS_ADDRESS":
            case "RECAPTCHA":
                console.warn(`Widget component "${this.component.type}" not yet implemented`);
                return null;
            // Other FIELD components (not yet implemented)
            case "CARDS":
            case "CUSTOM":
            case "FILE":
            case "PAYMENT":
                console.warn(`Component "${this.component.type}" not yet implemented`);
                return null;
            default:
                console.warn(`Unknown component type: ${this.component.type}`);
                return null;
        }
    }
    static get is() { return "authhero-node"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["authhero-node.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["authhero-node.css"]
        };
    }
    static get properties() {
        return {
            "component": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "FormComponent | RuntimeComponent",
                    "resolved": "{ id: string; visible: boolean; type: \"AUTH0_VERIFIABLE_CREDENTIALS\"; config: { credential_type?: string | undefined; }; order?: number | undefined; category?: \"WIDGET\" | undefined; label?: string | undefined; hint?: string | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; } | { id: string; visible: boolean; type: \"AUTH0_VERIFIABLE_CREDENTIALS\"; config: { credential_type?: string | undefined; }; order?: number | undefined; category?: \"WIDGET\" | undefined; label?: string | undefined; hint?: string | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"BOOLEAN\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { default_value?: boolean | undefined; } | undefined; } | { id: string; visible: boolean; type: \"BOOLEAN\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { default_value?: boolean | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"CARDS\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { options?: { value: string; label: string; description?: string | undefined; image?: string | undefined; }[] | undefined; multi_select?: boolean | undefined; } | undefined; } | { id: string; visible: boolean; type: \"CARDS\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { options?: { value: string; label: string; description?: string | undefined; image?: string | undefined; }[] | undefined; multi_select?: boolean | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"CHOICE\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { options?: { value: string; label: string; }[] | undefined; display?: \"radio\" | \"checkbox\" | undefined; multiple?: boolean | undefined; default_value?: string | string[] | undefined; } | undefined; } | { id: string; visible: boolean; type: \"CHOICE\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { options?: { value: string; label: string; }[] | undefined; display?: \"radio\" | \"checkbox\" | undefined; multiple?: boolean | undefined; default_value?: string | string[] | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"COUNTRY\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"COUNTRY\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"CUSTOM\"; config: { component?: string | undefined; props?: Record<string, any> | undefined; schema?: Record<string, any> | undefined; code?: string | undefined; }; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; } | { id: string; visible: boolean; type: \"CUSTOM\"; config: { component?: string | undefined; props?: Record<string, any> | undefined; schema?: Record<string, any> | undefined; code?: string | undefined; }; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"DATE\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: string | undefined; default_value?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"DATE\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: string | undefined; default_value?: string | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"DIVIDER\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { text?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"DIVIDER\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { text?: string | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"DROPDOWN\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { options?: { value: string; label: string; }[] | undefined; placeholder?: string | undefined; searchable?: boolean | undefined; multiple?: boolean | undefined; default_value?: string | string[] | undefined; } | undefined; } | { id: string; visible: boolean; type: \"DROPDOWN\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { options?: { value: string; label: string; }[] | undefined; placeholder?: string | undefined; searchable?: boolean | undefined; multiple?: boolean | undefined; default_value?: string | string[] | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"EMAIL\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"EMAIL\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"FILE\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { accept?: string | undefined; max_size?: number | undefined; multiple?: boolean | undefined; } | undefined; } | { id: string; visible: boolean; type: \"FILE\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { accept?: string | undefined; max_size?: number | undefined; multiple?: boolean | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"GMAPS_ADDRESS\"; config: { api_key?: string | undefined; }; order?: number | undefined; category?: \"WIDGET\" | undefined; label?: string | undefined; hint?: string | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; } | { id: string; visible: boolean; type: \"GMAPS_ADDRESS\"; config: { api_key?: string | undefined; }; order?: number | undefined; category?: \"WIDGET\" | undefined; label?: string | undefined; hint?: string | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"HTML\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"HTML\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"IMAGE\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { src?: string | undefined; alt?: string | undefined; width?: number | undefined; height?: number | undefined; } | undefined; } | { id: string; visible: boolean; type: \"IMAGE\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { src?: string | undefined; alt?: string | undefined; width?: number | undefined; height?: number | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"JUMP_BUTTON\"; config: { text?: string | undefined; target_step?: string | undefined; }; order?: number | undefined; category?: \"BLOCK\" | undefined; } | { id: string; visible: boolean; type: \"JUMP_BUTTON\"; config: { text?: string | undefined; target_step?: string | undefined; }; order?: number | undefined; category?: \"BLOCK\" | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"LEGAL\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { text: string; html?: boolean | undefined; } | undefined; } | { id: string; visible: boolean; type: \"LEGAL\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { text: string; html?: boolean | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"NEXT_BUTTON\"; config: { text?: string | undefined; }; order?: number | undefined; category?: \"BLOCK\" | undefined; } | { id: string; visible: boolean; type: \"NEXT_BUTTON\"; config: { text?: string | undefined; }; order?: number | undefined; category?: \"BLOCK\" | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"NUMBER\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; min?: number | undefined; max?: number | undefined; step?: number | undefined; default_value?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"NUMBER\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; min?: number | undefined; max?: number | undefined; step?: number | undefined; default_value?: string | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"PASSWORD\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; show_toggle?: boolean | undefined; forgot_password_link?: string | undefined; default_value?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"PASSWORD\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; show_toggle?: boolean | undefined; forgot_password_link?: string | undefined; default_value?: string | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"PAYMENT\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { provider?: string | undefined; currency?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"PAYMENT\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { provider?: string | undefined; currency?: string | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"PREVIOUS_BUTTON\"; config: { text?: string | undefined; }; order?: number | undefined; category?: \"BLOCK\" | undefined; } | { id: string; visible: boolean; type: \"PREVIOUS_BUTTON\"; config: { text?: string | undefined; }; order?: number | undefined; category?: \"BLOCK\" | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"RECAPTCHA\"; config: { site_key?: string | undefined; }; order?: number | undefined; category?: \"WIDGET\" | undefined; label?: string | undefined; hint?: string | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; } | { id: string; visible: boolean; type: \"RECAPTCHA\"; config: { site_key?: string | undefined; }; order?: number | undefined; category?: \"WIDGET\" | undefined; label?: string | undefined; hint?: string | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"RESEND_BUTTON\"; config: { text?: string | undefined; resend_action?: string | undefined; }; order?: number | undefined; category?: \"BLOCK\" | undefined; } | { id: string; visible: boolean; type: \"RESEND_BUTTON\"; config: { text?: string | undefined; resend_action?: string | undefined; }; order?: number | undefined; category?: \"BLOCK\" | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"RICH_TEXT\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"RICH_TEXT\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"SOCIAL\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { providers?: string[] | undefined; provider_details?: { name: string; strategy?: string | undefined; display_name?: string | undefined; icon_url?: string | undefined; href?: string | undefined; }[] | undefined; } | undefined; } | { id: string; visible: boolean; type: \"SOCIAL\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { providers?: string[] | undefined; provider_details?: { name: string; strategy?: string | undefined; display_name?: string | undefined; icon_url?: string | undefined; href?: string | undefined; }[] | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"TEL\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; default_country?: string | undefined; default_value?: string | undefined; allow_email?: boolean | undefined; } | undefined; } | { id: string; visible: boolean; type: \"TEL\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; default_country?: string | undefined; default_value?: string | undefined; allow_email?: boolean | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"TEXT\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; multiline?: boolean | undefined; max_length?: number | undefined; default_value?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"TEXT\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; multiline?: boolean | undefined; max_length?: number | undefined; default_value?: string | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; } | { id: string; visible: boolean; type: \"URL\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"URL\"; order?: number | undefined; category?: \"FIELD\" | undefined; label?: string | undefined; hint?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; required?: boolean | undefined; sensitive?: boolean | undefined; config?: { placeholder?: string | undefined; default_value?: string | undefined; } | undefined; } & { messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; }",
                    "references": {
                        "FormComponent": {
                            "location": "import",
                            "path": "../../types/components",
                            "id": "src/types/components.ts::FormNodeComponent",
                            "referenceLocation": "FormComponent"
                        },
                        "RuntimeComponent": {
                            "location": "import",
                            "path": "../../types/components",
                            "id": "src/types/components.ts::RuntimeComponent",
                            "referenceLocation": "RuntimeComponent"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The component configuration to render.\nFollows Auth0 Forms component schema."
                },
                "getter": false,
                "setter": false
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Current value for field components."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether the component is disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "passwordVisible": {},
            "selectedCountry": {},
            "localPhoneNumber": {},
            "countryDropdownOpen": {},
            "telEmailMode": {}
        };
    }
    static get events() {
        return [{
                "method": "fieldChange",
                "name": "fieldChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a field value changes."
                },
                "complexType": {
                    "original": "{ id: string; value: string }",
                    "resolved": "{ id: string; value: string; }",
                    "references": {}
                }
            }, {
                "method": "buttonClick",
                "name": "buttonClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a button is clicked."
                },
                "complexType": {
                    "original": "{\n    id: string;\n    type: string;\n    value?: string;\n  }",
                    "resolved": "{ id: string; type: string; value?: string | undefined; }",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "component",
                "methodName": "componentChanged"
            }, {
                "propName": "value",
                "methodName": "valueChanged"
            }];
    }
}
