@authhero/widget 0.2.2 → 0.4.0

package/dist/collection/components/authhero-widget/authhero-widget.js

@@ -0,0 +1,628 @@
+import { h } from "@stencil/core";
+import { mergeThemeVars, applyCssVars } from "../../utils/branding";
+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.
+     */
+    apiUrl;
+    /**
+     * 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;
+    /**
+     * Internal parsed screen state.
+     */
+    _screen;
+    /**
+     * Internal parsed branding state.
+     */
+    _branding;
+    /**
+     * Internal parsed theme state.
+     */
+    _theme;
+    /**
+     * Form data collected from inputs.
+     */
+    formData = {};
+    /**
+     * 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) {
+        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.screenChange.emit(this._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();
+    }
+    /**
+     * Apply branding and theme as CSS custom properties
+     */
+    applyThemeStyles() {
+        const vars = mergeThemeVars(this._branding, this._theme);
+        applyCssVars(this.el, vars);
+    }
+    async componentWillLoad() {
+        // Parse initial props
+        this.watchScreen(this.screen);
+        this.watchBranding(this.branding);
+        this.watchTheme(this.theme);
+        // Fetch screen from API if URL provided and no screen prop
+        if (this.apiUrl && !this._screen) {
+            await this.fetchScreen();
+        }
+    }
+    async fetchScreen() {
+        if (!this.apiUrl)
+            return;
+        this.loading = true;
+        try {
+            const response = await fetch(this.apiUrl, {
+                credentials: 'include',
+                headers: {
+                    Accept: 'application/json',
+                },
+            });
+            if (response.ok) {
+                this._screen = await response.json();
+                if (this._screen) {
+                    this.screenChange.emit(this._screen);
+                }
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch screen:', error);
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    handleInputChange = (name, value) => {
+        this.formData = {
+            ...this.formData,
+            [name]: value,
+        };
+    };
+    handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!this._screen)
+            return;
+        // Always emit the submit event
+        this.formSubmit.emit({
+            screen: this._screen,
+            data: this.formData,
+        });
+        // If autoSubmit is disabled, let the consuming app handle it
+        if (!this.autoSubmit) {
+            return;
+        }
+        // Submit to the server
+        this.loading = true;
+        try {
+            const response = await fetch(this._screen.action, {
+                method: this._screen.method,
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Accept: 'application/json',
+                },
+                body: JSON.stringify({ data: this.formData }),
+            });
+            const contentType = response.headers.get('content-type');
+            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 });
+                }
+                else if (result.screen) {
+                    // Next screen
+                    this._screen = result.screen;
+                    this.formData = {};
+                    this.screenChange.emit(result.screen);
+                    // Apply branding if included
+                    if (result.branding) {
+                        this._branding = result.branding;
+                        this.applyThemeStyles();
+                    }
+                }
+                else if (result.complete) {
+                    // Flow complete without redirect
+                    this.flowComplete.emit({});
+                }
+                // Handle validation errors (400 response)
+                if (!response.ok && result.screen) {
+                    this._screen = result.screen;
+                    this.screenChange.emit(result.screen);
+                }
+            }
+        }
+        catch (err) {
+            console.error('Form submission failed:', err);
+            this.flowError.emit({
+                message: err instanceof Error ? err.message : 'Form submission failed',
+            });
+        }
+        finally {
+            this.loading = false;
+        }
+    };
+    handleButtonClick = (detail) => {
+        this.buttonClick.emit(detail);
+    };
+    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 autoSubmit is enabled, let the browser handle the navigation
+        // Otherwise, prevent default and let the app decide
+        if (!this.autoSubmit) {
+            e.preventDefault();
+        }
+    };
+    /**
+     * Get error messages from the screen-level messages array.
+     */
+    getScreenErrors() {
+        return this._screen?.messages?.filter((m) => m.type === 'error') || [];
+    }
+    /**
+     * Get success messages from the screen-level messages array.
+     */
+    getScreenSuccesses() {
+        return this._screen?.messages?.filter((m) => m.type === 'success') || [];
+    }
+    /**
+     * Sort components by order.
+     */
+    getOrderedComponents() {
+        if (!this._screen)
+            return [];
+        return [...this._screen.components]
+            .filter((c) => c.visible !== false)
+            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    }
+    render() {
+        if (this.loading && !this._screen) {
+            return (h("div", { class: "widget-container" }, h("div", { class: "loading-spinner" })));
+        }
+        if (!this._screen) {
+            return (h("div", { class: "widget-container" }, h("div", { class: "error-message" }, "No screen configuration provided")));
+        }
+        const screenErrors = this.getScreenErrors();
+        const screenSuccesses = this.getScreenSuccesses();
+        const components = this.getOrderedComponents();
+        // Get logo URL from branding props
+        const logoUrl = this._branding?.logo_url;
+        return (h("div", { class: "widget-container", part: "container" }, logoUrl && h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }), this._screen.title && (h("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (h("p", { class: "description", part: "description" }, this._screen.description)), 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, part: "form" }, components.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 })))), this._screen.links && this._screen.links.length > 0 && (h("div", { class: "links", part: "links" }, this._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)))))))));
+    }
+    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; components: ({ type: \"DIVIDER\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: {} | undefined; order?: number | undefined; } | { type: \"HTML\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } | { type: \"IMAGE\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { src?: string | undefined; alt?: string | undefined; width?: number | undefined; height?: number | undefined; } | undefined; order?: number | undefined; } | { type: \"JUMP_BUTTON\"; id: string; config: { text?: string | undefined; target_step?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"RESEND_BUTTON\"; id: string; config: { text?: string | undefined; resend_action?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"NEXT_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"PREVIOUS_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"RICH_TEXT\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } | { type: \"AUTH0_VERIFIABLE_CREDENTIALS\"; id: string; config: { credential_type?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"GMAPS_ADDRESS\"; id: string; config: { api_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"RECAPTCHA\"; id: string; config: { site_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"BOOLEAN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { default_value?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"CARDS\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; description?: string | undefined; image?: string | undefined; }[] | undefined; multi_select?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"CHOICE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; display?: \"radio\" | \"checkbox\" | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"CUSTOM\"; id: string; config: { component?: string | undefined; props?: Record<string, any> | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"DATE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"DROPDOWN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; placeholder?: string | undefined; searchable?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"EMAIL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"FILE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { accept?: string | undefined; max_size?: number | undefined; multiple?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"LEGAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { text: string; html?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"NUMBER\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min?: number | undefined; max?: number | undefined; step?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"PASSWORD\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; show_toggle?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"PAYMENT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { provider?: string | undefined; currency?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"SOCIAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { providers?: string[] | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"TEL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_country?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"TEXT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; multiline?: boolean | undefined; max_length?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"URL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; })[]; method: \"POST\" | \"GET\"; description?: string | undefined; title?: string | undefined; links?: { text: string; href: string; id?: string | undefined; linkText?: string | undefined; }[] | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | 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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "api-url"
+            },
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_screen": {},
+            "_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; components: ({ type: \"DIVIDER\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: {} | undefined; order?: number | undefined; } | { type: \"HTML\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } | { type: \"IMAGE\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { src?: string | undefined; alt?: string | undefined; width?: number | undefined; height?: number | undefined; } | undefined; order?: number | undefined; } | { type: \"JUMP_BUTTON\"; id: string; config: { text?: string | undefined; target_step?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"RESEND_BUTTON\"; id: string; config: { text?: string | undefined; resend_action?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"NEXT_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"PREVIOUS_BUTTON\"; id: string; config: { text?: string | undefined; }; visible: boolean; category?: \"BLOCK\" | undefined; order?: number | undefined; } | { type: \"RICH_TEXT\"; id: string; visible: boolean; category?: \"BLOCK\" | undefined; config?: { content?: string | undefined; } | undefined; order?: number | undefined; } | { type: \"AUTH0_VERIFIABLE_CREDENTIALS\"; id: string; config: { credential_type?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"GMAPS_ADDRESS\"; id: string; config: { api_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"RECAPTCHA\"; id: string; config: { site_key?: string | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"WIDGET\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"BOOLEAN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { default_value?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"CARDS\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; description?: string | undefined; image?: string | undefined; }[] | undefined; multi_select?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"CHOICE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; display?: \"radio\" | \"checkbox\" | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"CUSTOM\"; id: string; config: { component?: string | undefined; props?: Record<string, any> | undefined; }; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"DATE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { format?: string | undefined; min?: string | undefined; max?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"DROPDOWN\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { options?: { value: string; label: string; }[] | undefined; placeholder?: string | undefined; searchable?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"EMAIL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"FILE\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { accept?: string | undefined; max_size?: number | undefined; multiple?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"LEGAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { text: string; html?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"NUMBER\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min?: number | undefined; max?: number | undefined; step?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"PASSWORD\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; min_length?: number | undefined; show_toggle?: boolean | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"PAYMENT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { provider?: string | undefined; currency?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"SOCIAL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { providers?: string[] | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"TEL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; default_country?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"TEXT\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; multiline?: boolean | undefined; max_length?: number | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; } | { type: \"URL\"; id: string; visible: boolean; required?: boolean | undefined; category?: \"FIELD\" | undefined; config?: { placeholder?: string | undefined; } | undefined; sensitive?: boolean | undefined; label?: string | undefined; order?: number | undefined; hint?: string | undefined; })[]; method: \"POST\" | \"GET\"; description?: string | undefined; title?: string | undefined; links?: { text: string; href: string; id?: string | undefined; linkText?: string | undefined; }[] | undefined; messages?: { type: \"info\" | \"error\" | \"success\" | \"warning\"; text: string; id?: number | undefined; }[] | 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": "screen",
+                "methodName": "watchScreen"
+            }, {
+                "propName": "branding",
+                "methodName": "watchBranding"
+            }, {
+                "propName": "theme",
+                "methodName": "watchTheme"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1,2 @@
+// Export types for consumers
+export * from './types/components';