import { h, } from "@stencil/core";
import { mergeThemeVars, applyCssVars } from "../../utils/branding";
import { sanitizeHtml } from "../../utils/sanitize-html";
export class AuthheroWidget {
    el;
    /**
     * The UI screen configuration from the server.
     * Can be passed as a JSON string or object.
     * Follows Auth0 Forms component schema.
     */
    screen;
    /**
     * API endpoint to fetch the initial screen from.
     * If provided, the widget will fetch the screen on load.
     * Can include {screenId} placeholder which will be replaced with the current screen.
     * Example: "/u2/screen/{screenId}" or "https://auth.example.com/u2/screen/{screenId}"
     */
    apiUrl;
    /**
     * Base URL for all API calls. Used when widget is embedded on a different domain.
     * If not provided, relative URLs are used.
     * Example: "https://auth.example.com"
     */
    baseUrl;
    /**
     * Login session state token. Required for social login and maintaining session.
     */
    state;
    /**
     * Current screen ID. Used with apiUrl to fetch screen configuration.
     * When statePersistence is 'url', this is synced with the URL.
     */
    screenId;
    watchScreenId() {
        this.updateDataScreenAttribute();
    }
    /**
     * OAuth/OIDC parameters for social login redirects.
     * Can be passed as a JSON string or object.
     */
    authParams;
    /**
     * Where to persist state and screen ID.
     * - 'url': Updates URL path/query (default for standalone pages)
     * - 'session': Uses sessionStorage (for embedded widgets)
     * - 'memory': No persistence, state only in memory
     * @default 'memory'
     */
    statePersistence = "memory";
    /**
     * Storage key prefix for session/local storage persistence.
     * @default 'authhero_widget'
     */
    storageKey = "authhero_widget";
    /**
     * Branding configuration from AuthHero API.
     * Controls logo, primary color, and page background.
     * Can be passed as a JSON string or object.
     */
    branding;
    /**
     * Theme configuration from AuthHero API.
     * Controls colors, borders, fonts, and layout.
     * Can be passed as a JSON string or object.
     */
    theme;
    /**
     * Whether the widget is in a loading state.
     */
    loading = false;
    /**
     * Whether the widget should automatically submit forms to the action URL.
     * When false (default), the widget only emits events and the consuming
     * application handles all HTTP requests.
     * When true, the widget handles form submission and screen updates.
     * @default false
     */
    autoSubmit = false;
    /**
     * Whether the widget should handle navigation automatically.
     * When true, social login buttons redirect, links navigate, etc.
     * When false, only events are emitted.
     * @default false (same as autoSubmit when not specified)
     */
    autoNavigate;
    /**
     * Internal parsed screen state.
     */
    _screen;
    /**
     * Internal parsed auth params state.
     */
    _authParams;
    /**
     * Internal parsed branding state.
     */
    _branding;
    /**
     * Internal parsed theme state.
     */
    _theme;
    /**
     * Form data collected from inputs.
     */
    formData = {};
    /**
     * AbortController for an in-flight conditional mediation request.
     * Aborted on screen change or component disconnect.
     */
    conditionalMediationAbort;
    /**
     * Emitted when the form is submitted.
     * The consuming application should handle the submission unless autoSubmit is true.
     */
    formSubmit;
    /**
     * Emitted when a non-submit button is clicked (social login, back, etc.).
     * The consuming application decides what to do based on id/type/value.
     */
    buttonClick;
    /**
     * Emitted when a link is clicked.
     * The consuming application decides how to handle navigation.
     */
    linkClick;
    /**
     * Emitted when the widget wants to navigate (e.g., after successful auth).
     * The consuming application decides how to handle navigation.
     */
    navigate;
    /**
     * Emitted when auth flow completes with a redirect URL.
     * The consuming application can redirect or extract the code.
     */
    flowComplete;
    /**
     * Emitted when an error occurs.
     */
    flowError;
    /**
     * Emitted when the screen changes.
     */
    screenChange;
    watchScreen(newValue) {
        // Abort any in-flight conditional mediation when screen changes
        this.conditionalMediationAbort?.abort();
        this.conditionalMediationAbort = undefined;
        if (typeof newValue === "string") {
            try {
                this._screen = JSON.parse(newValue);
            }
            catch {
                console.error("Failed to parse screen JSON");
            }
        }
        else {
            this._screen = newValue;
        }
        if (this._screen) {
            this.formData = {};
            this.initFormDataFromDefaults(this._screen);
            this.screenChange.emit(this._screen);
            this.updateDataScreenAttribute();
        }
    }
    /**
     * Initialize formData from component default_value configs.
     * This pre-fills form fields with values resolved on the server
     * (e.g. from user profile context).
     */
    initFormDataFromDefaults(screen) {
        const defaults = {};
        for (const comp of screen.components || []) {
            if ("config" in comp &&
                comp.config &&
                "default_value" in comp.config &&
                comp.config.default_value) {
                const val = comp.config.default_value;
                if (typeof val === "string" && val !== "") {
                    defaults[comp.id] = val;
                }
            }
        }
        if (Object.keys(defaults).length > 0) {
            this.formData = { ...defaults, ...this.formData };
        }
    }
    /**
     * Updates the data-screen attribute on the host element and its parent container.
     * This allows external CSS to target different screens using attribute selectors.
     * The parent container (e.g. widget-container div from SSR) is also updated
     * so that page-level CSS selectors work during SPA navigation.
     */
    updateDataScreenAttribute() {
        const screenName = this._screen?.name || this.screenId;
        if (screenName) {
            this.el.setAttribute("data-screen", screenName);
        }
        else {
            this.el.removeAttribute("data-screen");
        }
        // Also update the nearest ancestor widget-container's data-screen
        // (identified by the data-authhero-widget-container marker). We use
        // closest() instead of parentElement because WidgetContent in
        // u2-routes.tsx wraps the widget in an intermediate
        // <div data-screen={screenId}>, so parentElement would hit that wrapper
        // rather than the marked .widget-container. This keeps page-level CSS
        // selectors like .widget-container[data-screen="..."] in sync during
        // client-side navigation without mutating arbitrary consumer-owned
        // elements.
        const container = this.el.closest("[data-authhero-widget-container]");
        if (container) {
            if (screenName) {
                container.setAttribute("data-screen", screenName);
            }
            else {
                container.removeAttribute("data-screen");
            }
        }
    }
    watchBranding(newValue) {
        if (typeof newValue === "string") {
            try {
                this._branding = JSON.parse(newValue);
            }
            catch {
                console.error("Failed to parse branding JSON");
            }
        }
        else {
            this._branding = newValue;
        }
        this.applyThemeStyles();
    }
    watchTheme(newValue) {
        if (typeof newValue === "string") {
            try {
                this._theme = JSON.parse(newValue);
            }
            catch {
                console.error("Failed to parse theme JSON");
            }
        }
        else {
            this._theme = newValue;
        }
        this.applyThemeStyles();
    }
    watchAuthParams(newValue) {
        if (typeof newValue === "string") {
            try {
                this._authParams = JSON.parse(newValue);
            }
            catch {
                console.error("Failed to parse authParams JSON");
            }
        }
        else {
            this._authParams = newValue;
        }
    }
    /**
     * Apply branding and theme as CSS custom properties
     */
    applyThemeStyles() {
        const vars = mergeThemeVars(this._branding, this._theme);
        applyCssVars(this.el, vars);
    }
    /**
     * Focus the first input field in the form.
     * Called after screen changes to ensure keyboard navigation works properly.
     */
    focusFirstInput() {
        // Use requestAnimationFrame to ensure DOM has updated
        requestAnimationFrame(() => {
            const shadowRoot = this.el.shadowRoot;
            if (!shadowRoot)
                return;
            // Find all authhero-node components and look for inputs in their shadow DOMs
            const nodes = shadowRoot.querySelectorAll("authhero-node");
            for (const node of Array.from(nodes)) {
                const nodeShadow = node.shadowRoot;
                if (nodeShadow) {
                    const input = nodeShadow.querySelector('input:not([type="hidden"]):not([type="checkbox"]):not([disabled]), textarea:not([disabled])');
                    if (input) {
                        input.focus();
                        return;
                    }
                }
            }
        });
    }
    /**
     * Get the effective autoNavigate value (defaults to autoSubmit if not set)
     */
    get shouldAutoNavigate() {
        return this.autoNavigate ?? this.autoSubmit;
    }
    /**
     * Build the full URL for API calls
     */
    buildUrl(path) {
        if (this.baseUrl) {
            return new URL(path, this.baseUrl).toString();
        }
        return path;
    }
    /**
     * Load state from URL or storage based on statePersistence setting
     */
    loadPersistedState() {
        if (this.statePersistence === "url") {
            const url = new URL(window.location.href);
            const stateParam = url.searchParams.get("state");
            if (stateParam && !this.state) {
                this.state = stateParam;
            }
        }
        else if (this.statePersistence === "session") {
            try {
                const stored = sessionStorage.getItem(`${this.storageKey}_state`);
                if (stored && !this.state) {
                    this.state = stored;
                }
                const storedScreenId = sessionStorage.getItem(`${this.storageKey}_screenId`);
                if (storedScreenId && !this.screenId) {
                    this.screenId = storedScreenId;
                }
            }
            catch {
                // sessionStorage not available
            }
        }
    }
    /**
     * Save state to URL or storage based on statePersistence setting
     */
    persistState() {
        if (this.statePersistence === "url") {
            const url = new URL(window.location.href);
            if (this.state) {
                url.searchParams.set("state", this.state);
            }
            if (this.screenId) {
                url.searchParams.set("screen", this.screenId);
            }
            window.history.replaceState({}, "", url.toString());
        }
        else if (this.statePersistence === "session") {
            try {
                if (this.state) {
                    sessionStorage.setItem(`${this.storageKey}_state`, this.state);
                }
                if (this.screenId) {
                    sessionStorage.setItem(`${this.storageKey}_screenId`, this.screenId);
                }
            }
            catch {
                // sessionStorage not available
            }
        }
    }
    handlePopState = (event) => {
        if (!this.apiUrl)
            return;
        // Restore the widget state token from history if present
        if (event.state?.state) {
            this.state = event.state.state;
        }
        // Derive screen from history state or from the current URL
        const screen = event.state?.screen ?? this.extractScreenIdFromHref(location.href);
        if (screen) {
            this.fetchScreen(screen);
        }
    };
    connectedCallback() {
        window.addEventListener("popstate", this.handlePopState);
    }
    disconnectedCallback() {
        window.removeEventListener("popstate", this.handlePopState);
        this.conditionalMediationAbort?.abort();
        this.conditionalMediationAbort = undefined;
    }
    async componentWillLoad() {
        // Parse initial props - this prevents unnecessary state changes during hydration that cause flashes
        // Also check the element attribute as a fallback for hydration scenarios
        if (!this._screen) {
            const screenValue = this.screen || this.el?.getAttribute("screen");
            if (screenValue) {
                this.watchScreen(screenValue);
            }
        }
        if (!this._branding) {
            this.watchBranding(this.branding);
        }
        if (!this._theme) {
            this.watchTheme(this.theme);
        }
        if (!this._authParams) {
            this.watchAuthParams(this.authParams);
        }
        // Load persisted state if available
        this.loadPersistedState();
        // Fetch screen from API if URL provided and no screen prop
        if (this.apiUrl && !this._screen) {
            await this.fetchScreen(this.screenId);
        }
    }
    /**
     * Fetch screen configuration from the API
     * @param screenIdOverride Optional screen ID to fetch (overrides this.screenId)
     * @param nodeId Optional node ID for flow navigation
     */
    async fetchScreen(screenIdOverride, nodeId) {
        if (!this.apiUrl)
            return false;
        const currentScreenId = screenIdOverride || this.screenId;
        // Build the API URL, replacing {screenId} placeholder if present
        let url = this.apiUrl;
        if (currentScreenId && url.includes("{screenId}")) {
            url = url.replace("{screenId}", encodeURIComponent(currentScreenId));
        }
        // Add state and nodeId as query params
        const urlObj = new URL(url, this.baseUrl || window.location.origin);
        if (this.state) {
            urlObj.searchParams.set("state", this.state);
        }
        if (nodeId) {
            urlObj.searchParams.set("nodeId", nodeId);
        }
        this.loading = true;
        try {
            const response = await fetch(this.buildUrl(urlObj.pathname + urlObj.search), {
                credentials: "include",
                headers: {
                    Accept: "application/json",
                },
            });
            if (response.ok) {
                const data = await response.json();
                // Handle different response formats
                if (data.screen) {
                    this._screen = data.screen;
                    if (data.branding) {
                        this._branding = data.branding;
                        this.applyThemeStyles();
                    }
                    // Update state if returned
                    if (data.state) {
                        this.state = data.state;
                    }
                    // Update screenId if returned in response
                    if (data.screenId) {
                        this.screenId = data.screenId;
                    }
                }
                else {
                    // Response is the screen itself
                    this._screen = data;
                }
                if (this._screen) {
                    // If we fetched with a screenId override, update our stored screenId
                    if (currentScreenId && currentScreenId !== this.screenId) {
                        this.screenId = currentScreenId;
                    }
                    this.initFormDataFromDefaults(this._screen);
                    this.screenChange.emit(this._screen);
                    this.updateDataScreenAttribute();
                    this.persistState();
                    this.focusFirstInput();
                    // Start WebAuthn ceremony if returned with the screen (e.g. conditional mediation)
                    if (data.ceremony) {
                        this.performWebAuthnCeremony(data.ceremony);
                    }
                    return true;
                }
            }
            else {
                const error = await response
                    .json()
                    .catch(() => ({ message: "Failed to load screen" }));
                this.flowError.emit({
                    message: error.message || "Failed to load screen",
                });
            }
        }
        catch (error) {
            console.error("Failed to fetch screen:", error);
            this.flowError.emit({
                message: error instanceof Error ? error.message : "Failed to fetch screen",
            });
        }
        finally {
            this.loading = false;
        }
        return false;
    }
    handleInputChange = (name, value) => {
        this.formData = {
            ...this.formData,
            [name]: value,
        };
    };
    handleSubmit = async (e, overrideData) => {
        e.preventDefault();
        if (!this._screen || this.loading)
            return;
        let submitData = { ...this.formData, ...(overrideData || {}) };
        // Merge hidden input values from DOM (may have been set programmatically
        // by inline scripts, e.g. passkey management buttons)
        const form = this.el.shadowRoot?.querySelector("form");
        if (form) {
            const hiddenInputs = form.querySelectorAll('input[type="hidden"]');
            hiddenInputs.forEach((input) => {
                if (input.name && input.value) {
                    submitData[input.name] = input.value;
                }
            });
        }
        // Always emit the submit event
        this.formSubmit.emit({
            screen: this._screen,
            data: submitData,
        });
        // If autoSubmit is disabled, let the consuming app handle it
        if (!this.autoSubmit) {
            return;
        }
        // For GET actions (or missing method), navigate directly instead of fetching
        if (!this._screen.method || this._screen.method.toUpperCase() === "GET") {
            window.location.href = this.buildUrl(this._screen.action);
            return;
        }
        // Submit to the server
        this.loading = true;
        try {
            const response = await fetch(this.buildUrl(this._screen.action), {
                method: this._screen.method,
                credentials: "include",
                headers: {
                    "Content-Type": "application/json",
                    Accept: "application/json",
                },
                body: JSON.stringify({ data: submitData }),
            });
            const contentType = response.headers.get("content-type");
            if (contentType?.includes("text/html")) {
                // OAuth 2.0 Form Post Response Mode: the server delivers the
                // authorization response as a self-submitting HTML form (instead
                // of a 302 + Location). The fetch response can't be rendered
                // in-place, so swap our document for it — the form's onload
                // handler then POSTs to the redirect_uri.
                const html = await response.text();
                document.open();
                document.write(html);
                document.close();
                return;
            }
            if (contentType?.includes("application/json")) {
                const result = await response.json();
                // Handle different response types
                if (result.redirect) {
                    // Auth complete - emit complete event
                    this.flowComplete.emit({ redirectUrl: result.redirect });
                    // Also emit navigate for backwards compatibility
                    this.navigate.emit({ url: result.redirect });
                    // Auto-navigate if enabled
                    if (this.shouldAutoNavigate) {
                        window.location.href = result.redirect;
                    }
                }
                else if (!response.ok && result.screen) {
                    // Handle validation errors (400 response) — preserve user input
                    this._screen = result.screen;
                    this.initFormDataFromDefaults(result.screen);
                    this.screenChange.emit(result.screen);
                    this.updateDataScreenAttribute();
                    this.focusFirstInput();
                }
                else if (result.screen) {
                    // Next screen (success)
                    this._screen = result.screen;
                    this.formData = {};
                    this.initFormDataFromDefaults(result.screen);
                    this.screenChange.emit(result.screen);
                    this.updateDataScreenAttribute();
                    // Update screenId if returned in response
                    if (result.screenId) {
                        this.screenId = result.screenId;
                    }
                    // Persist state (especially for session storage mode)
                    this.persistState();
                    // Update URL path if navigateUrl is provided (client-side navigation)
                    if (result.navigateUrl && this.shouldAutoNavigate) {
                        window.history.pushState({ screen: result.screenId, state: this.state }, "", result.navigateUrl);
                    }
                    // Apply branding if included
                    if (result.branding) {
                        this._branding = result.branding;
                        this.applyThemeStyles();
                    }
                    // Update state if returned
                    if (result.state) {
                        this.state = result.state;
                        this.persistState();
                    }
                    // Perform WebAuthn ceremony if present (structured data, not script)
                    if (result.ceremony) {
                        this.performWebAuthnCeremony(result.ceremony);
                    }
                    // Focus first input on new screen
                    this.focusFirstInput();
                }
                else if (result.complete) {
                    // Flow complete without redirect
                    this.flowComplete.emit({});
                }
                else if (!response.ok && result.error) {
                    // Server returned an error without a screen (e.g. 500)
                    // Show the error on the current screen
                    if (this._screen) {
                        this._screen = {
                            ...this._screen,
                            messages: [
                                ...(this._screen.messages || []),
                                { text: result.error, type: "error" },
                            ],
                        };
                    }
                    this.flowError.emit({ message: result.error });
                }
            }
        }
        catch (err) {
            console.error("Form submission failed:", err);
            this.flowError.emit({
                message: err instanceof Error ? err.message : "Form submission failed",
            });
        }
        finally {
            this.loading = false;
        }
    };
    /**
     * Override form.submit() so that scripts (e.g. WebAuthn ceremony) that call
     * form.submit() go through the widget's JSON fetch pipeline instead of a
     * native form-urlencoded POST.
     */
    overrideFormSubmit() {
        const shadowRoot = this.el.shadowRoot;
        if (!shadowRoot)
            return;
        const form = shadowRoot.querySelector("form");
        if (!form)
            return;
        form.submit = () => {
            const formData = new FormData(form);
            const data = {};
            formData.forEach((value, key) => {
                if (typeof value === "string") {
                    data[key] = value;
                }
            });
            const syntheticEvent = { preventDefault: () => { } };
            this.handleSubmit(syntheticEvent, data);
        };
    }
    /**
     * Validate and execute a structured WebAuthn ceremony returned by the server.
     * Instead of injecting arbitrary script content, this parses the ceremony JSON,
     * validates the expected fields, and calls the WebAuthn API natively.
     */
    performWebAuthnCeremony(ceremony) {
        if (!this.isValidWebAuthnCeremony(ceremony)) {
            console.error("Invalid WebAuthn ceremony payload", ceremony);
            return;
        }
        if (ceremony.type === "webauthn-authentication-conditional") {
            // Conditional mediation runs in the background, no requestAnimationFrame needed
            this.executeWebAuthnConditionalMediation(ceremony);
            return;
        }
        requestAnimationFrame(() => {
            this.overrideFormSubmit();
            if (ceremony.type === "webauthn-authentication") {
                this.executeWebAuthnAuthentication(ceremony);
            }
            else {
                this.executeWebAuthnRegistration(ceremony);
            }
        });
    }
    /**
     * Schema validation for WebAuthn ceremony payloads.
     * Checks required fields and types before invoking browser APIs.
     */
    isValidWebAuthnCeremony(data) {
        if (typeof data !== "object" || data === null)
            return false;
        const obj = data;
        if (typeof obj.successAction !== "string")
            return false;
        const opts = obj.options;
        if (typeof opts !== "object" || opts === null)
            return false;
        const o = opts;
        if (typeof o.challenge !== "string")
            return false;
        if (obj.type === "webauthn-registration") {
            const rp = o.rp;
            if (typeof rp !== "object" || rp === null)
                return false;
            if (typeof rp.id !== "string" ||
                typeof rp.name !== "string")
                return false;
            const user = o.user;
            if (typeof user !== "object" || user === null)
                return false;
            const u = user;
            if (typeof u.id !== "string" ||
                typeof u.name !== "string" ||
                typeof u.displayName !== "string")
                return false;
            if (!Array.isArray(o.pubKeyCredParams))
                return false;
            return true;
        }
        if (obj.type === "webauthn-authentication" ||
            obj.type === "webauthn-authentication-conditional") {
            return true;
        }
        return false;
    }
    /**
     * Perform the WebAuthn navigator.credentials.create() ceremony and submit
     * the credential result via the form.
     */
    async executeWebAuthnRegistration(ceremony) {
        const opts = ceremony.options;
        const b64uToBuf = (s) => {
            s = s.replace(/-/g, "+").replace(/_/g, "/");
            while (s.length % 4)
                s += "=";
            const b = atob(s);
            const a = new Uint8Array(b.length);
            for (let i = 0; i < b.length; i++)
                a[i] = b.charCodeAt(i);
            return a.buffer;
        };
        const bufToB64u = (b) => {
            const a = new Uint8Array(b);
            let s = "";
            for (let i = 0; i < a.length; i++)
                s += String.fromCharCode(a[i]);
            return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
        };
        const findForm = () => {
            const shadowRoot = this.el?.shadowRoot;
            if (shadowRoot) {
                const f = shadowRoot.querySelector("form");
                if (f)
                    return f;
            }
            return document.querySelector("form");
        };
        try {
            const publicKey = {
                challenge: b64uToBuf(opts.challenge),
                rp: { id: opts.rp.id, name: opts.rp.name },
                user: {
                    id: b64uToBuf(opts.user.id),
                    name: opts.user.name,
                    displayName: opts.user.displayName,
                },
                pubKeyCredParams: opts.pubKeyCredParams.map((p) => ({
                    alg: p.alg,
                    type: p.type,
                })),
                timeout: opts.timeout,
                attestation: (opts.attestation ||
                    "none"),
                authenticatorSelection: opts.authenticatorSelection
                    ? {
                        residentKey: (opts.authenticatorSelection.residentKey ||
                            "preferred"),
                        userVerification: (opts.authenticatorSelection.userVerification ||
                            "preferred"),
                    }
                    : undefined,
            };
            if (opts.excludeCredentials?.length) {
                publicKey.excludeCredentials = opts.excludeCredentials.map((c) => ({
                    id: b64uToBuf(c.id),
                    type: c.type,
                    transports: (c.transports || []),
                }));
            }
            const cred = (await navigator.credentials.create({
                publicKey,
            }));
            const response = cred.response;
            const resp = {
                id: cred.id,
                rawId: bufToB64u(cred.rawId),
                type: cred.type,
                response: {
                    attestationObject: bufToB64u(response.attestationObject),
                    clientDataJSON: bufToB64u(response.clientDataJSON),
                },
                clientExtensionResults: cred.getClientExtensionResults(),
                authenticatorAttachment: cred.authenticatorAttachment || undefined,
            };
            if (typeof response.getTransports === "function") {
                resp.response.transports =
                    response.getTransports();
            }
            const form = findForm();
            if (form) {
                const cf = form.querySelector('[name="credential-field"]') ||
                    form.querySelector("#credential-field");
                const af = form.querySelector('[name="action-field"]') ||
                    form.querySelector("#action-field");
                if (cf)
                    cf.value = JSON.stringify(resp);
                if (af)
                    af.value = ceremony.successAction;
                form.submit();
            }
        }
        catch (e) {
            console.error("WebAuthn registration error:", e);
            const form = findForm();
            if (form) {
                const af = form.querySelector('[name="action-field"]') ||
                    form.querySelector("#action-field");
                if (af)
                    af.value = "error";
                form.submit();
            }
        }
    }
    /**
     * Perform the WebAuthn navigator.credentials.get() ceremony (explicit modal)
     * and submit the credential result via the form.
     */
    async executeWebAuthnAuthentication(ceremony) {
        const opts = ceremony.options;
        const b64uToBuf = (s) => {
            s = s.replace(/-/g, "+").replace(/_/g, "/");
            while (s.length % 4)
                s += "=";
            const b = atob(s);
            const a = new Uint8Array(b.length);
            for (let i = 0; i < b.length; i++)
                a[i] = b.charCodeAt(i);
            return a.buffer;
        };
        const bufToB64u = (b) => {
            const a = new Uint8Array(b);
            let s = "";
            for (let i = 0; i < a.length; i++)
                s += String.fromCharCode(a[i]);
            return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
        };
        const findForm = () => {
            const shadowRoot = this.el?.shadowRoot;
            if (shadowRoot) {
                const f = shadowRoot.querySelector("form");
                if (f)
                    return f;
            }
            return document.querySelector("form");
        };
        try {
            const publicKey = {
                challenge: b64uToBuf(opts.challenge),
                rpId: opts.rpId,
                timeout: opts.timeout,
                userVerification: opts.userVerification || "preferred",
            };
            if (opts.allowCredentials?.length) {
                publicKey.allowCredentials = opts.allowCredentials.map((c) => ({
                    id: b64uToBuf(c.id),
                    type: c.type,
                    transports: (c.transports || []),
                }));
            }
            const cred = (await navigator.credentials.get({
                publicKey,
            }));
            const response = cred.response;
            const resp = {
                id: cred.id,
                rawId: bufToB64u(cred.rawId),
                type: cred.type,
                response: {
                    authenticatorData: bufToB64u(response.authenticatorData),
                    clientDataJSON: bufToB64u(response.clientDataJSON),
                    signature: bufToB64u(response.signature),
                },
                clientExtensionResults: cred.getClientExtensionResults(),
                authenticatorAttachment: cred.authenticatorAttachment || undefined,
            };
            if (response.userHandle) {
                resp.response.userHandle = bufToB64u(response.userHandle);
            }
            const form = findForm();
            if (form) {
                const cf = form.querySelector('[name="credential-field"]') ||
                    form.querySelector("#credential-field");
                const af = form.querySelector('[name="action-field"]') ||
                    form.querySelector("#action-field");
                if (cf)
                    cf.value = JSON.stringify(resp);
                if (af)
                    af.value = ceremony.successAction;
                form.submit();
            }
        }
        catch (e) {
            console.error("WebAuthn authentication error:", e);
            const form = findForm();
            if (form) {
                const af = form.querySelector('[name="action-field"]') ||
                    form.querySelector("#action-field");
                if (af)
                    af.value = "error";
                form.submit();
            }
        }
    }
    /**
     * Execute WebAuthn conditional mediation (autofill-assisted passkeys).
     * Runs in the background — the browser shows passkey suggestions in the
     * username field's autofill dropdown. Silently ignored if unsupported.
     */
    async executeWebAuthnConditionalMediation(ceremony) {
        // Feature detection
        if (!window.PublicKeyCredential ||
            !PublicKeyCredential.isConditionalMediationAvailable) {
            return;
        }
        const available = await PublicKeyCredential.isConditionalMediationAvailable();
        if (!available)
            return;
        // Abort any previous conditional mediation request
        this.conditionalMediationAbort?.abort();
        const abortController = new AbortController();
        this.conditionalMediationAbort = abortController;
        const opts = ceremony.options;
        const b64uToBuf = (s) => {
            s = s.replace(/-/g, "+").replace(/_/g, "/");
            while (s.length % 4)
                s += "=";
            const b = atob(s);
            const a = new Uint8Array(b.length);
            for (let i = 0; i < b.length; i++)
                a[i] = b.charCodeAt(i);
            return a.buffer;
        };
        const bufToB64u = (b) => {
            const a = new Uint8Array(b);
            let s = "";
            for (let i = 0; i < a.length; i++)
                s += String.fromCharCode(a[i]);
            return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
        };
        try {
            const cred = (await navigator.credentials.get({
                mediation: "conditional",
                signal: abortController.signal,
                publicKey: {
                    challenge: b64uToBuf(opts.challenge),
                    rpId: opts.rpId,
                    timeout: opts.timeout,
                    userVerification: opts.userVerification ||
                        "preferred",
                },
            }));
            const response = cred.response;
            const resp = {
                id: cred.id,
                rawId: bufToB64u(cred.rawId),
                type: cred.type,
                response: {
                    authenticatorData: bufToB64u(response.authenticatorData),
                    clientDataJSON: bufToB64u(response.clientDataJSON),
                    signature: bufToB64u(response.signature),
                },
                clientExtensionResults: cred.getClientExtensionResults(),
                authenticatorAttachment: cred.authenticatorAttachment || undefined,
            };
            if (response.userHandle) {
                resp.response.userHandle = bufToB64u(response.userHandle);
            }
            // Submit via the widget's form handling
            this.formData["credential-field"] = JSON.stringify(resp);
            this.formData["action-field"] = ceremony.successAction;
            // Ensure form submit override is set up, then submit
            this.overrideFormSubmit();
            const shadowRoot = this.el?.shadowRoot;
            const form = shadowRoot?.querySelector("form");
            if (form) {
                // Set the hidden input values directly
                const cf = form.querySelector('[name="credential-field"]') ||
                    form.querySelector("#credential-field");
                const af = form.querySelector('[name="action-field"]') ||
                    form.querySelector("#action-field");
                if (cf)
                    cf.value = JSON.stringify(resp);
                if (af)
                    af.value = ceremony.successAction;
                form.submit();
            }
        }
        catch (e) {
            // Silently ignore AbortError and NotAllowedError
            if (e?.name === "AbortError" || e?.name === "NotAllowedError")
                return;
            console.error("Conditional mediation error:", e);
        }
    }
    handleButtonClick = (detail) => {
        // If this is a submit button click, trigger form submission
        if (detail.type === "submit") {
            // For GET screens (or missing method), navigate directly — no form submission needed
            if ((!this._screen?.method ||
                this._screen.method.toUpperCase() === "GET") &&
                this._screen?.action) {
                window.location.href = this.buildUrl(this._screen.action);
                return;
            }
            // Include the clicked button's ID in form data so the server
            // can identify which button was clicked (e.g. for multi-button screens
            // like mfa-login-options where each factor has its own submit button)
            const submitData = { ...this.formData, [detail.id]: "true" };
            this.formData = submitData;
            // Create a synthetic submit event and call handleSubmit
            // Pass submitData directly to avoid @State() timing issues
            const syntheticEvent = { preventDefault: () => { } };
            this.handleSubmit(syntheticEvent, submitData);
            return;
        }
        // Always emit the event
        this.buttonClick.emit(detail);
        // Handle social login if autoNavigate is enabled
        if (detail.type === "SOCIAL" && detail.value && this.shouldAutoNavigate) {
            // Check if this provider has an href (e.g. passwordless connections)
            const providerHref = this.getProviderHref(detail.value);
            if (providerHref) {
                const screenId = this.extractScreenIdFromHref(providerHref);
                if (screenId && this.apiUrl) {
                    this.navigateToScreen(screenId, providerHref);
                }
                else {
                    window.location.href = providerHref;
                }
                return;
            }
            this.handleSocialLogin(detail.value);
            return;
        }
        // Handle resend button
        if (detail.type === "RESEND_BUTTON" && this.shouldAutoNavigate) {
            this.handleResend();
            return;
        }
    };
    /**
     * Handle social login redirect
     */
    handleSocialLogin(connection) {
        const params = this._authParams || {};
        const queryParams = {
            connection,
        };
        // Add state
        if (this.state) {
            queryParams.state = this.state;
        }
        else if (params.state) {
            queryParams.state = params.state;
        }
        // Add client_id
        if (params.client_id) {
            queryParams.client_id = params.client_id;
        }
        // Add optional params
        if (params.redirect_uri)
            queryParams.redirect_uri = params.redirect_uri;
        if (params.scope)
            queryParams.scope = params.scope;
        if (params.audience)
            queryParams.audience = params.audience;
        if (params.nonce)
            queryParams.nonce = params.nonce;
        if (params.response_type)
            queryParams.response_type = params.response_type;
        const socialUrl = this.buildUrl("/authorize?" + new URLSearchParams(queryParams).toString());
        // Emit navigate event and redirect
        this.navigate.emit({ url: socialUrl });
        window.location.href = socialUrl;
    }
    /**
     * Handle resend button click (e.g., resend OTP code)
     */
    async handleResend() {
        if (!this._screen?.action)
            return;
        try {
            const url = this._screen.action +
                (this._screen.action.includes("?") ? "&" : "?") +
                "action=resend";
            await fetch(this.buildUrl(url), {
                method: "POST",
                credentials: "include",
            });
        }
        catch (error) {
            console.error("Resend failed:", error);
        }
    }
    /**
     * Extract screen ID from a u2 link href.
     * Handles patterns like /u2/login/{screenId}?state=... and /u2/{screenId}?state=...
     * Returns the screen ID or null if the href doesn't match a known pattern.
     */
    extractScreenIdFromHref(href) {
        try {
            const url = new URL(href, window.location.origin);
            const path = url.pathname;
            // Match /u2/login/{screenId} (e.g., /u2/login/identifier)
            const loginMatch = path.match(/\/u2\/login\/([^/]+)$/);
            if (loginMatch)
                return loginMatch[1];
            // Match /u2/{screenId} (e.g., /u2/signup, /u2/enter-password)
            const u2Match = path.match(/\/u2\/([^/]+)$/);
            if (u2Match && u2Match[1] !== "login" && u2Match[1] !== "screen") {
                return u2Match[1];
            }
            return null;
        }
        catch {
            return null;
        }
    }
    handleLinkClick = (e, link) => {
        // Emit the event so the consuming app can handle it
        this.linkClick.emit({
            id: link.id,
            href: link.href,
            text: link.text,
        });
        // If autoNavigate is not enabled, prevent default and let the app decide
        if (!this.shouldAutoNavigate) {
            e.preventDefault();
            return;
        }
        // Try client-side navigation: extract screen ID and fetch via API
        const screenId = this.extractScreenIdFromHref(link.href);
        if (screenId && this.apiUrl) {
            e.preventDefault();
            this.navigateToScreen(screenId, link.href);
            return;
        }
        // Fall back to browser navigation for non-u2 links
    };
    /**
     * Navigate to a screen client-side by fetching it from the API.
     * Updates the widget state and browser URL without a full page reload.
     */
    async navigateToScreen(screenId, displayUrl) {
        const success = await this.fetchScreen(screenId);
        if (success) {
            // Push browser history so back/forward works
            window.history.pushState({ screen: screenId, state: this.state }, "", displayUrl);
        }
        else {
            // On failure, fall back to hard navigation
            window.location.href = displayUrl;
        }
    }
    /**
     * Look up the href for a social provider from the current screen's SOCIAL components.
     * Returns the href if found (e.g. for passwordless connections), or null.
     */
    getProviderHref(connectionName) {
        if (!this._screen)
            return null;
        for (const comp of this._screen.components) {
            const c = comp;
            if (c.type === "SOCIAL" && c.config?.provider_details) {
                const match = c.config.provider_details.find((d) => d.name === connectionName);
                if (match?.href)
                    return match.href;
            }
        }
        return null;
    }
    /**
     * Check if a component is a social button.
     */
    isSocialComponent(component) {
        // Check the type property directly - FormComponent has a 'type' field
        // SocialField has type 'SOCIAL'
        return component.type === "SOCIAL";
    }
    /**
     * Check if a component is a divider.
     */
    isDividerComponent(component) {
        return component.type === "DIVIDER";
    }
    render() {
        const screen = this._screen;
        if (this.loading && !screen) {
            return (h("div", { class: "widget-container" }, h("div", { class: "loading-spinner" })));
        }
        if (!screen) {
            return (h("div", { class: "widget-container" }, h("div", { class: "error-message" }, "No screen configuration provided")));
        }
        // Use the local screen variable for all rendering
        const screenErrors = screen.messages?.filter((m) => m.type === "error") || [];
        const screenSuccesses = screen.messages?.filter((m) => m.type === "success") || [];
        const allComponents = [...(screen.components ?? [])];
        const components = allComponents
            .filter((c) => c.visible !== false)
            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
        const hiddenComponents = allComponents.filter((c) => c.visible === false);
        // Separate social, divider, and field components for layout ordering
        const socialComponents = components.filter((c) => this.isSocialComponent(c));
        const fieldComponents = components.filter((c) => !this.isSocialComponent(c) && !this.isDividerComponent(c));
        const dividerComponent = components.find((c) => this.isDividerComponent(c));
        const hasDivider = !!dividerComponent;
        const dividerText = dividerComponent?.config?.text || "Or";
        // Build dynamic exportparts for social buttons including provider-specific parts
        const getExportParts = (component) => {
            const baseParts = [
                "social-buttons",
                "button",
                "button-secondary",
                "button-social",
                "button-social-content",
                "button-social-text",
                "button-social-subtitle",
                "social-icon",
            ];
            const config = component.config;
            const providers = config?.providers ?? [];
            const providerParts = providers.flatMap((p) => {
                const safe = p.replace(/[^a-zA-Z0-9-]/g, "-");
                return [
                    `button-social-${safe}`,
                    `button-social-content-${safe}`,
                    `button-social-text-${safe}`,
                    `button-social-subtitle-${safe}`,
                    `social-icon-${safe}`,
                ];
            });
            return [...baseParts, ...providerParts].join(", ");
        };
        // Get logo URL from theme.widget (takes precedence) or branding
        const logoUrl = this._theme?.widget?.logo_url || this._branding?.logo_url;
        return (h("div", { class: "widget-container", part: "container", "data-authstack-container": true }, h("header", { class: "widget-header", part: "header" }, logoUrl && (h("div", { class: "logo-wrapper", part: "logo-wrapper" }, h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), screen.title && (h("h1", { class: "title", part: "title", innerHTML: sanitizeHtml(screen.title) })), screen.description && (h("p", { class: "description", part: "description", innerHTML: sanitizeHtml(screen.description) }))), h("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), h("form", { onSubmit: this.handleSubmit, action: screen.action, method: screen.method || "POST", part: "form" }, hiddenComponents.map((c) => (h("input", { type: "hidden", name: c.id, id: c.id, key: c.id, value: this.formData[c.id] || "" }))), h("div", { class: "form-content" }, socialComponents.length > 0 && (h("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading, exportparts: getExportParts(component) }))))), socialComponents.length > 0 &&
            fieldComponents.length > 0 &&
            hasDivider && (h("div", { class: "divider", part: "divider" }, h("span", { class: "divider-text" }, dividerText))), h("div", { class: "fields-section", part: "fields-section" }, fieldComponents.map((component) => (h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading })))))), screen.links && screen.links.length > 0 && (h("div", { class: "links", part: "links" }, screen.links.map((link) => (h("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (h("span", null, link.text, " ", h("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, {
                id: link.id,
                href: link.href,
                text: link.linkText || link.text,
            }) }, link.linkText))) : (h("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, {
                id: link.id,
                href: link.href,
                text: link.text,
            }) }, link.text))))))), screen.footer && (h("div", { class: "widget-footer", part: "footer", innerHTML: sanitizeHtml(screen.footer) })))));
    }
    static get is() { return "authhero-widget"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["authhero-widget.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["authhero-widget.css"]
        };
    }
    static get properties() {
        return {
            "screen": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "UiScreen | string",
                    "resolved": "string | undefined | { action: string; method: \"POST\" | \"GET\"; components: ({ id: string; visible: boolean; type: \"DIVIDER\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { text?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"HTML\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { content?: string | 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: \"JUMP_BUTTON\"; config: { text?: string | undefined; target_step?: 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; } | { id: string; visible: boolean; type: \"NEXT_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; } | { id: string; visible: boolean; type: \"RICH_TEXT\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | 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; } | { 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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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; })[]; name?: string | undefined; title?: string | undefined; description?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; links?: { text: string; href: string; id?: string | undefined; linkText?: string | undefined; }[] | undefined; footer?: string | undefined; }",
                    "references": {
                        "UiScreen": {
                            "location": "import",
                            "path": "../../types/components",
                            "id": "src/types/components.ts::UiScreen",
                            "referenceLocation": "UiScreen"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The UI screen configuration from the server.\nCan be passed as a JSON string or object.\nFollows Auth0 Forms component schema."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "screen"
            },
            "apiUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "API endpoint to fetch the initial screen from.\nIf provided, the widget will fetch the screen on load.\nCan include {screenId} placeholder which will be replaced with the current screen.\nExample: \"/u2/screen/{screenId}\" or \"https://auth.example.com/u2/screen/{screenId}\""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "api-url"
            },
            "baseUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Base URL for all API calls. Used when widget is embedded on a different domain.\nIf not provided, relative URLs are used.\nExample: \"https://auth.example.com\""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "base-url"
            },
            "state": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Login session state token. Required for social login and maintaining session."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "state"
            },
            "screenId": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Current screen ID. Used with apiUrl to fetch screen configuration.\nWhen statePersistence is 'url', this is synced with the URL."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "screen-id"
            },
            "authParams": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "AuthParams | string",
                    "resolved": "AuthParams | string | undefined",
                    "references": {
                        "AuthParams": {
                            "location": "local",
                            "path": "/home/runner/work/authhero/authhero/packages/ui-widget/src/components/authhero-widget/authhero-widget.tsx",
                            "id": "src/components/authhero-widget/authhero-widget.tsx::AuthParams"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "OAuth/OIDC parameters for social login redirects.\nCan be passed as a JSON string or object."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "auth-params"
            },
            "statePersistence": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "StatePersistence",
                    "resolved": "\"memory\" | \"session\" | \"url\"",
                    "references": {
                        "StatePersistence": {
                            "location": "local",
                            "path": "/home/runner/work/authhero/authhero/packages/ui-widget/src/components/authhero-widget/authhero-widget.tsx",
                            "id": "src/components/authhero-widget/authhero-widget.tsx::StatePersistence"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "'memory'"
                        }],
                    "text": "Where to persist state and screen ID.\n- 'url': Updates URL path/query (default for standalone pages)\n- 'session': Uses sessionStorage (for embedded widgets)\n- 'memory': No persistence, state only in memory"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "state-persistence",
                "defaultValue": "\"memory\""
            },
            "storageKey": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "'authhero_widget'"
                        }],
                    "text": "Storage key prefix for session/local storage persistence."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "storage-key",
                "defaultValue": "\"authhero_widget\""
            },
            "branding": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "WidgetBranding | string",
                    "resolved": "WidgetBranding | string | undefined",
                    "references": {
                        "WidgetBranding": {
                            "location": "import",
                            "path": "../../utils/branding",
                            "id": "src/utils/branding.ts::WidgetBranding",
                            "referenceLocation": "WidgetBranding"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Branding configuration from AuthHero API.\nControls logo, primary color, and page background.\nCan be passed as a JSON string or object."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "branding"
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "WidgetTheme | string",
                    "resolved": "WidgetTheme | string | undefined",
                    "references": {
                        "WidgetTheme": {
                            "location": "import",
                            "path": "../../utils/branding",
                            "id": "src/utils/branding.ts::WidgetTheme",
                            "referenceLocation": "WidgetTheme"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Theme configuration from AuthHero API.\nControls colors, borders, fonts, and layout.\nCan be passed as a JSON string or object."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme"
            },
            "loading": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether the widget is in a loading state."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "loading",
                "defaultValue": "false"
            },
            "autoSubmit": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "Whether the widget should automatically submit forms to the action URL.\nWhen false (default), the widget only emits events and the consuming\napplication handles all HTTP requests.\nWhen true, the widget handles form submission and screen updates."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "auto-submit",
                "defaultValue": "false"
            },
            "autoNavigate": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false (same as autoSubmit when not specified)"
                        }],
                    "text": "Whether the widget should handle navigation automatically.\nWhen true, social login buttons redirect, links navigate, etc.\nWhen false, only events are emitted."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "auto-navigate"
            }
        };
    }
    static get states() {
        return {
            "_screen": {},
            "_authParams": {},
            "_branding": {},
            "_theme": {},
            "formData": {}
        };
    }
    static get events() {
        return [{
                "method": "formSubmit",
                "name": "formSubmit",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the form is submitted.\nThe consuming application should handle the submission unless autoSubmit is true."
                },
                "complexType": {
                    "original": "SubmitEventDetail",
                    "resolved": "SubmitEventDetail",
                    "references": {
                        "SubmitEventDetail": {
                            "location": "local",
                            "path": "/home/runner/work/authhero/authhero/packages/ui-widget/src/components/authhero-widget/authhero-widget.tsx",
                            "id": "src/components/authhero-widget/authhero-widget.tsx::SubmitEventDetail"
                        }
                    }
                }
            }, {
                "method": "buttonClick",
                "name": "buttonClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a non-submit button is clicked (social login, back, etc.).\nThe consuming application decides what to do based on id/type/value."
                },
                "complexType": {
                    "original": "ButtonClickEventDetail",
                    "resolved": "ButtonClickEventDetail",
                    "references": {
                        "ButtonClickEventDetail": {
                            "location": "local",
                            "path": "/home/runner/work/authhero/authhero/packages/ui-widget/src/components/authhero-widget/authhero-widget.tsx",
                            "id": "src/components/authhero-widget/authhero-widget.tsx::ButtonClickEventDetail"
                        }
                    }
                }
            }, {
                "method": "linkClick",
                "name": "linkClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a link is clicked.\nThe consuming application decides how to handle navigation."
                },
                "complexType": {
                    "original": "LinkClickEventDetail",
                    "resolved": "LinkClickEventDetail",
                    "references": {
                        "LinkClickEventDetail": {
                            "location": "local",
                            "path": "/home/runner/work/authhero/authhero/packages/ui-widget/src/components/authhero-widget/authhero-widget.tsx",
                            "id": "src/components/authhero-widget/authhero-widget.tsx::LinkClickEventDetail"
                        }
                    }
                }
            }, {
                "method": "navigate",
                "name": "navigate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the widget wants to navigate (e.g., after successful auth).\nThe consuming application decides how to handle navigation."
                },
                "complexType": {
                    "original": "NavigateEventDetail",
                    "resolved": "NavigateEventDetail",
                    "references": {
                        "NavigateEventDetail": {
                            "location": "local",
                            "path": "/home/runner/work/authhero/authhero/packages/ui-widget/src/components/authhero-widget/authhero-widget.tsx",
                            "id": "src/components/authhero-widget/authhero-widget.tsx::NavigateEventDetail"
                        }
                    }
                }
            }, {
                "method": "flowComplete",
                "name": "flowComplete",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when auth flow completes with a redirect URL.\nThe consuming application can redirect or extract the code."
                },
                "complexType": {
                    "original": "CompleteEventDetail",
                    "resolved": "CompleteEventDetail",
                    "references": {
                        "CompleteEventDetail": {
                            "location": "local",
                            "path": "/home/runner/work/authhero/authhero/packages/ui-widget/src/components/authhero-widget/authhero-widget.tsx",
                            "id": "src/components/authhero-widget/authhero-widget.tsx::CompleteEventDetail"
                        }
                    }
                }
            }, {
                "method": "flowError",
                "name": "flowError",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when an error occurs."
                },
                "complexType": {
                    "original": "ErrorEventDetail",
                    "resolved": "ErrorEventDetail",
                    "references": {
                        "ErrorEventDetail": {
                            "location": "local",
                            "path": "/home/runner/work/authhero/authhero/packages/ui-widget/src/components/authhero-widget/authhero-widget.tsx",
                            "id": "src/components/authhero-widget/authhero-widget.tsx::ErrorEventDetail"
                        }
                    }
                }
            }, {
                "method": "screenChange",
                "name": "screenChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the screen changes."
                },
                "complexType": {
                    "original": "UiScreen",
                    "resolved": "{ action: string; method: \"POST\" | \"GET\"; components: ({ id: string; visible: boolean; type: \"DIVIDER\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { text?: string | undefined; } | undefined; } | { id: string; visible: boolean; type: \"HTML\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { content?: string | 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: \"JUMP_BUTTON\"; config: { text?: string | undefined; target_step?: 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; } | { id: string; visible: boolean; type: \"NEXT_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; } | { id: string; visible: boolean; type: \"RICH_TEXT\"; order?: number | undefined; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | 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; } | { 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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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: \"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; })[]; name?: string | undefined; title?: string | undefined; description?: string | undefined; messages?: { text: string; type: \"error\" | \"success\" | \"info\" | \"warning\"; id?: number | undefined; }[] | undefined; links?: { text: string; href: string; id?: string | undefined; linkText?: string | undefined; }[] | undefined; footer?: string | undefined; }",
                    "references": {
                        "UiScreen": {
                            "location": "import",
                            "path": "../../types/components",
                            "id": "src/types/components.ts::UiScreen",
                            "referenceLocation": "UiScreen"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "screenId",
                "methodName": "watchScreenId"
            }, {
                "propName": "screen",
                "methodName": "watchScreen"
            }, {
                "propName": "branding",
                "methodName": "watchBranding"
            }, {
                "propName": "theme",
                "methodName": "watchTheme"
            }, {
                "propName": "authParams",
                "methodName": "watchAuthParams"
            }];
    }
}
