@authhero/widget 0.7.2 → 0.8.0

package/hydrate/index.mjs

@@ -5614,8 +5614,43 @@ class AuthheroWidget {
     /**
      * 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;
+    /**
+     * 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.
@@ -5640,10 +5675,21 @@ class AuthheroWidget {
      * @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.
      */
@@ -5690,12 +5736,12 @@ class AuthheroWidget {
      */
     screenChange;
     watchScreen(newValue) {
-        if (typeof newValue === 'string') {
+        if (typeof newValue === "string") {
             try {
                 this._screen = JSON.parse(newValue);
             }
             catch {
-                console.error('Failed to parse screen JSON');
+                console.error("Failed to parse screen JSON");
             }
         }
         else {
@@ -5706,12 +5752,12 @@ class AuthheroWidget {
         }
     }
     watchBranding(newValue) {
-        if (typeof newValue === 'string') {
+        if (typeof newValue === "string") {
             try {
                 this._branding = JSON.parse(newValue);
             }
             catch {
-                console.error('Failed to parse branding JSON');
+                console.error("Failed to parse branding JSON");
             }
         }
         else {
@@ -5720,12 +5766,12 @@ class AuthheroWidget {
         this.applyThemeStyles();
     }
     watchTheme(newValue) {
-        if (typeof newValue === 'string') {
+        if (typeof newValue === "string") {
             try {
                 this._theme = JSON.parse(newValue);
             }
             catch {
-                console.error('Failed to parse theme JSON');
+                console.error("Failed to parse theme JSON");
             }
         }
         else {
@@ -5733,6 +5779,19 @@ class AuthheroWidget {
         }
         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
      */
@@ -5740,36 +5799,164 @@ class AuthheroWidget {
         const vars = mergeThemeVars(this._branding, this._theme);
         applyCssVars(this.el, vars);
     }
+    /**
+     * 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
+            }
+        }
+    }
     async componentWillLoad() {
         // Parse initial props
         this.watchScreen(this.screen);
         this.watchBranding(this.branding);
         this.watchTheme(this.theme);
+        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();
+            await this.fetchScreen(this.screenId);
         }
     }
-    async fetchScreen() {
+    /**
+     * 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;
+        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.apiUrl, {
-                credentials: 'include',
+            const response = await fetch(this.buildUrl(urlObj.pathname + urlObj.search), {
+                credentials: "include",
                 headers: {
-                    Accept: 'application/json',
+                    Accept: "application/json",
                 },
             });
             if (response.ok) {
-                this._screen = await response.json();
+                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.screenChange.emit(this._screen);
+                    this.persistState();
                 }
             }
+            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);
+            console.error("Failed to fetch screen:", error);
+            this.flowError.emit({
+                message: error instanceof Error ? error.message : "Failed to fetch screen",
+            });
         }
         finally {
             this.loading = false;
@@ -5797,17 +5984,17 @@ class AuthheroWidget {
         // Submit to the server
         this.loading = true;
         try {
-            const response = await fetch(this._screen.action, {
+            const response = await fetch(this.buildUrl(this._screen.action), {
                 method: this._screen.method,
-                credentials: 'include',
+                credentials: "include",
                 headers: {
-                    'Content-Type': 'application/json',
-                    Accept: 'application/json',
+                    "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 contentType = response.headers.get("content-type");
+            if (contentType?.includes("application/json")) {
                 const result = await response.json();
                 // Handle different response types
                 if (result.redirect) {
@@ -5815,17 +6002,31 @@ class AuthheroWidget {
                     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 (result.screen) {
                     // Next screen
                     this._screen = result.screen;
                     this.formData = {};
                     this.screenChange.emit(result.screen);
+                    // Update screenId if returned in response
+                    if (result.screenId) {
+                        this.screenId = result.screenId;
+                    }
+                    this.persistState();
                     // 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();
+                    }
                 }
                 else if (result.complete) {
                     // Flow complete without redirect
@@ -5839,9 +6040,9 @@ class AuthheroWidget {
             }
         }
         catch (err) {
-            console.error('Form submission failed:', err);
+            console.error("Form submission failed:", err);
             this.flowError.emit({
-                message: err instanceof Error ? err.message : 'Form submission failed',
+                message: err instanceof Error ? err.message : "Form submission failed",
             });
         }
         finally {
@@ -5850,14 +6051,79 @@ class AuthheroWidget {
     };
     handleButtonClick = (detail) => {
         // If this is a submit button click, trigger form submission
-        if (detail.type === 'submit') {
+        if (detail.type === "submit") {
             // Create a synthetic submit event and call handleSubmit
             const syntheticEvent = { preventDefault: () => { } };
             this.handleSubmit(syntheticEvent);
             return;
         }
+        // Always emit the event
         this.buttonClick.emit(detail);
+        // Handle social login if autoNavigate is enabled
+        if (detail.type === "SOCIAL" && detail.value && this.shouldAutoNavigate) {
+            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);
+        }
+    }
     handleLinkClick = (e, link) => {
         // Emit the event so the consuming app can handle it
         this.linkClick.emit({
@@ -5865,9 +6131,9 @@ class AuthheroWidget {
             href: link.href,
             text: link.text,
         });
-        // If autoSubmit is enabled, let the browser handle the navigation
+        // If autoNavigate is enabled, let the browser handle the navigation
         // Otherwise, prevent default and let the app decide
-        if (!this.autoSubmit) {
+        if (!this.shouldAutoNavigate) {
             e.preventDefault();
         }
     };
@@ -5875,13 +6141,13 @@ class AuthheroWidget {
      * Get error messages from the screen-level messages array.
      */
     getScreenErrors() {
-        return this._screen?.messages?.filter((m) => m.type === 'error') || [];
+        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') || [];
+        return this._screen?.messages?.filter((m) => m.type === "success") || [];
     }
     /**
      * Sort components by order.
@@ -5899,13 +6165,13 @@ class AuthheroWidget {
     isSocialComponent(component) {
         // Check the type property directly - FormComponent has a 'type' field
         // SocialField has type 'SOCIAL'
-        return component.type === 'SOCIAL';
+        return component.type === "SOCIAL";
     }
     /**
      * Check if a component is a divider.
      */
     isDividerComponent(component) {
-        return component.type === 'DIVIDER';
+        return component.type === "DIVIDER";
     }
     render() {
         if (this.loading && !this._screen) {
@@ -5918,12 +6184,22 @@ class AuthheroWidget {
         const screenSuccesses = this.getScreenSuccesses();
         const components = this.getOrderedComponents();
         // 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 hasDivider = components.some(c => this.isDividerComponent(c));
+        const socialComponents = components.filter((c) => this.isSocialComponent(c));
+        const fieldComponents = components.filter((c) => !this.isSocialComponent(c) && !this.isDividerComponent(c));
+        const hasDivider = components.some((c) => this.isDividerComponent(c));
         // Get logo URL from theme.widget (takes precedence) or branding
         const logoUrl = this._theme?.widget?.logo_url || this._branding?.logo_url;
-        return (hAsync("div", { class: "widget-container", part: "container" }, hAsync("header", { class: "widget-header", part: "header" }, logoUrl && (hAsync("div", { class: "logo-wrapper", part: "logo-wrapper" }, hAsync("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), this._screen.title && (hAsync("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (hAsync("p", { class: "description", part: "description" }, this._screen.description))), hAsync("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (hAsync("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (hAsync("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), hAsync("form", { onSubmit: this.handleSubmit, part: "form" }, hAsync("div", { class: "form-content" }, socialComponents.length > 0 && (hAsync("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (hAsync("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 }))))), socialComponents.length > 0 && fieldComponents.length > 0 && hasDivider && (hAsync("div", { class: "divider", part: "divider" }, hAsync("span", { class: "divider-text" }, "Or"))), hAsync("div", { class: "fields-section", part: "fields-section" }, fieldComponents.map((component) => (hAsync("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 && (hAsync("div", { class: "links", part: "links" }, this._screen.links.map((link) => (hAsync("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (hAsync("span", null, link.text, ' ', hAsync("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))) : (hAsync("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, { id: link.id, href: link.href, text: link.text }) }, link.text))))))))));
+        return (hAsync("div", { class: "widget-container", part: "container" }, hAsync("header", { class: "widget-header", part: "header" }, logoUrl && (hAsync("div", { class: "logo-wrapper", part: "logo-wrapper" }, hAsync("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }))), this._screen.title && (hAsync("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (hAsync("p", { class: "description", part: "description" }, this._screen.description))), hAsync("div", { class: "widget-body", part: "body" }, screenErrors.map((err) => (hAsync("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (hAsync("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), hAsync("form", { onSubmit: this.handleSubmit, part: "form" }, hAsync("div", { class: "form-content" }, socialComponents.length > 0 && (hAsync("div", { class: "social-section", part: "social-section" }, socialComponents.map((component) => (hAsync("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 }))))), socialComponents.length > 0 &&
+            fieldComponents.length > 0 &&
+            hasDivider && (hAsync("div", { class: "divider", part: "divider" }, hAsync("span", { class: "divider-text" }, "Or"))), hAsync("div", { class: "fields-section", part: "fields-section" }, fieldComponents.map((component) => (hAsync("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 && (hAsync("div", { class: "links", part: "links" }, this._screen.links.map((link) => (hAsync("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (hAsync("span", null, link.text, " ", hAsync("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))) : (hAsync("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 watchers() { return {
         "screen": [{
@@ -5934,6 +6210,9 @@ class AuthheroWidget {
             }],
         "theme": [{
                 "watchTheme": 0
+            }],
+        "authParams": [{
+                "watchAuthParams": 0
             }]
     }; }
     static get style() { return authheroWidgetCss(); }
@@ -5943,11 +6222,19 @@ class AuthheroWidget {
         "$members$": {
             "screen": [1],
             "apiUrl": [1, "api-url"],
+            "baseUrl": [1, "base-url"],
+            "state": [1025],
+            "screenId": [1025, "screen-id"],
+            "authParams": [1, "auth-params"],
+            "statePersistence": [1, "state-persistence"],
+            "storageKey": [1, "storage-key"],
             "branding": [1],
             "theme": [1],
             "loading": [1028],
             "autoSubmit": [4, "auto-submit"],
+            "autoNavigate": [4, "auto-navigate"],
             "_screen": [32],
+            "_authParams": [32],
             "_branding": [32],
             "_theme": [32],
             "formData": [32]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authhero/widget",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Server-Driven UI widget for AuthHero authentication flows",
   "repository": {
     "type": "git",

package/dist/authhero-widget/p-ea2660b2.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,g as e,h as r}from"./p-BzFenraS.js";function s(t,i){if(void 0!==i)return`${i}px`;switch(t){case"pill":return"9999px";case"rounded":return"8px";case"sharp":return"0";default:return}}function a(t){if(!t)return{};const i={};if(t.colors?.primary&&(i["--ah-color-primary"]=t.colors.primary,i["--ah-color-primary-hover"]=t.colors.primary),t.colors?.page_background){const e=t.colors.page_background;"solid"===e.type&&e.start?i["--ah-page-bg"]=e.start:"gradient"===e.type&&e.start&&e.end&&(i["--ah-page-bg"]=`linear-gradient(${e.angle_deg??180}deg, ${e.start}, ${e.end})`)}return t.logo_url&&(i["--ah-logo-url"]=`url(${t.logo_url})`),t.font?.url&&(i["--ah-font-url"]=t.font.url),i}function o(t){if(!t)return{};const i={};if(t.borders){const e=t.borders;void 0!==e.widget_corner_radius&&(i["--ah-widget-radius"]=`${e.widget_corner_radius}px`),void 0!==e.widget_border_weight&&(i["--ah-widget-border-width"]=`${e.widget_border_weight}px`),!1===e.show_widget_shadow&&(i["--ah-widget-shadow"]="none");const r=s(e.buttons_style,e.button_border_radius);r&&(i["--ah-btn-radius"]=r),void 0!==e.button_border_weight&&(i["--ah-btn-border-width"]=`${e.button_border_weight}px`);const a=s(e.inputs_style,e.input_border_radius);a&&(i["--ah-input-radius"]=a),void 0!==e.input_border_weight&&(i["--ah-input-border-width"]=`${e.input_border_weight}px`)}if(t.colors){const e=t.colors;e.primary_button&&(i["--ah-color-primary"]=e.primary_button,i["--ah-color-primary-hover"]=e.primary_button),e.primary_button_label&&(i["--ah-btn-primary-text"]=e.primary_button_label),e.secondary_button_border&&(i["--ah-btn-secondary-border"]=e.secondary_button_border),e.secondary_button_label&&(i["--ah-btn-secondary-text"]=e.secondary_button_label),e.body_text&&(i["--ah-color-text"]=e.body_text),e.header&&(i["--ah-color-text-header"]=e.header),e.input_labels_placeholders&&(i["--ah-color-text-label"]=e.input_labels_placeholders,i["--ah-color-text-muted"]=e.input_labels_placeholders),e.input_filled_text&&(i["--ah-color-input-text"]=e.input_filled_text),e.widget_background&&(i["--ah-color-bg"]=e.widget_background),e.input_background&&(i["--ah-color-input-bg"]=e.input_background),e.widget_border&&(i["--ah-widget-border-color"]=e.widget_border),e.input_border&&(i["--ah-color-border"]=e.input_border),e.links_focused_components&&(i["--ah-color-link"]=e.links_focused_components),e.base_focus_color&&(i["--ah-color-focus-ring"]=e.base_focus_color),e.base_hover_color&&(i["--ah-color-primary-hover"]=e.base_hover_color),e.error&&(i["--ah-color-error"]=e.error),e.success&&(i["--ah-color-success"]=e.success),e.icons&&(i["--ah-color-icon"]=e.icons)}if(t.fonts){const e=t.fonts,r=e.reference_text_size||16;if(e.font_url&&(i["--ah-font-url"]=e.font_url),e.reference_text_size&&(i["--ah-font-size-base"]=`${e.reference_text_size}px`),e.title?.size){const t=Math.round(e.title.size/100*r);i["--ah-font-size-title"]=`${t}px`}if(e.subtitle?.size){const t=Math.round(e.subtitle.size/100*r);i["--ah-font-size-subtitle"]=`${t}px`}if(e.body_text?.size){const t=Math.round(e.body_text.size/100*r);i["--ah-font-size-body"]=`${t}px`}if(e.input_labels?.size){const t=Math.round(e.input_labels.size/100*r);i["--ah-font-size-label"]=`${t}px`}if(e.buttons_text?.size){const t=Math.round(e.buttons_text.size/100*r);i["--ah-font-size-btn"]=`${t}px`}if(e.links?.size){const t=Math.round(e.links.size/100*r);i["--ah-font-size-link"]=`${t}px`}"underlined"===e.links_style&&(i["--ah-link-decoration"]="underline"),void 0!==e.title?.bold&&(i["--ah-font-weight-title"]=e.title.bold?"700":"400"),void 0!==e.subtitle?.bold&&(i["--ah-font-weight-subtitle"]=e.subtitle.bold?"700":"400"),void 0!==e.body_text?.bold&&(i["--ah-font-weight-body"]=e.body_text.bold?"700":"400"),void 0!==e.input_labels?.bold&&(i["--ah-font-weight-label"]=e.input_labels.bold?"700":"400"),void 0!==e.buttons_text?.bold&&(i["--ah-font-weight-btn"]=e.buttons_text.bold?"600":"400"),void 0!==e.links?.bold&&(i["--ah-font-weight-link"]=e.links.bold?"700":"400")}if(t.widget){const e=t.widget;if(e.header_text_alignment&&(i["--ah-title-align"]=e.header_text_alignment),e.logo_height&&(i["--ah-logo-height"]=`${e.logo_height}px`),e.logo_position){const t={center:"center",left:"flex-start",right:"flex-end"};"none"===e.logo_position?i["--ah-logo-display"]="none":i["--ah-logo-align"]=t[e.logo_position]??"center"}e.social_buttons_layout&&("top"===e.social_buttons_layout?(i["--ah-social-order"]="0",i["--ah-divider-order"]="1",i["--ah-fields-order"]="2"):(i["--ah-social-order"]="2",i["--ah-divider-order"]="1",i["--ah-fields-order"]="0"))}if(t.page_background){const e=t.page_background;e.background_color&&(i["--ah-page-bg"]=e.background_color),e.background_image_url&&(i["--ah-page-bg-image"]=`url(${e.background_image_url})`)}return i}const n=class{constructor(e){t(this,e),this.formSubmit=i(this,"formSubmit"),this.buttonClick=i(this,"buttonClick"),this.linkClick=i(this,"linkClick"),this.navigate=i(this,"navigate"),this.flowComplete=i(this,"flowComplete"),this.flowError=i(this,"flowError"),this.screenChange=i(this,"screenChange")}get el(){return e(this)}screen;apiUrl;branding;theme;loading=!1;autoSubmit=!1;_screen;_branding;_theme;formData={};formSubmit;buttonClick;linkClick;navigate;flowComplete;flowError;screenChange;watchScreen(t){if("string"==typeof t)try{this._screen=JSON.parse(t)}catch{console.error("Failed to parse screen JSON")}else this._screen=t;this._screen&&this.screenChange.emit(this._screen)}watchBranding(t){if("string"==typeof t)try{this._branding=JSON.parse(t)}catch{console.error("Failed to parse branding JSON")}else this._branding=t;this.applyThemeStyles()}watchTheme(t){if("string"==typeof t)try{this._theme=JSON.parse(t)}catch{console.error("Failed to parse theme JSON")}else this._theme=t;this.applyThemeStyles()}applyThemeStyles(){const t=(i=this._theme,{...a(this._branding),...o(i)});var i;!function(t,i){Object.entries(i).forEach((([i,e])=>{t.style.setProperty(i,e)}))}(this.el,t)}async componentWillLoad(){this.watchScreen(this.screen),this.watchBranding(this.branding),this.watchTheme(this.theme),this.apiUrl&&!this._screen&&await this.fetchScreen()}async fetchScreen(){if(this.apiUrl){this.loading=!0;try{const t=await fetch(this.apiUrl,{credentials:"include",headers:{Accept:"application/json"}});t.ok&&(this._screen=await t.json(),this._screen&&this.screenChange.emit(this._screen))}catch(t){console.error("Failed to fetch screen:",t)}finally{this.loading=!1}}}handleInputChange=(t,i)=>{this.formData={...this.formData,[t]:i}};handleSubmit=async t=>{if(t.preventDefault(),this._screen&&(this.formSubmit.emit({screen:this._screen,data:this.formData}),this.autoSubmit)){this.loading=!0;try{const t=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})}),i=t.headers.get("content-type");if(i?.includes("application/json")){const i=await t.json();i.redirect?(this.flowComplete.emit({redirectUrl:i.redirect}),this.navigate.emit({url:i.redirect})):i.screen?(this._screen=i.screen,this.formData={},this.screenChange.emit(i.screen),i.branding&&(this._branding=i.branding,this.applyThemeStyles())):i.complete&&this.flowComplete.emit({}),!t.ok&&i.screen&&(this._screen=i.screen,this.screenChange.emit(i.screen))}}catch(t){console.error("Form submission failed:",t),this.flowError.emit({message:t instanceof Error?t.message:"Form submission failed"})}finally{this.loading=!1}}};handleButtonClick=t=>{"submit"!==t.type?this.buttonClick.emit(t):this.handleSubmit({preventDefault:()=>{}})};handleLinkClick=(t,i)=>{this.linkClick.emit({id:i.id,href:i.href,text:i.text}),this.autoSubmit||t.preventDefault()};getScreenErrors(){return this._screen?.messages?.filter((t=>"error"===t.type))||[]}getScreenSuccesses(){return this._screen?.messages?.filter((t=>"success"===t.type))||[]}getOrderedComponents(){return this._screen?[...this._screen.components].filter((t=>!1!==t.visible)).sort(((t,i)=>(t.order??0)-(i.order??0))):[]}isSocialComponent(t){return"SOCIAL"===t.type}isDividerComponent(t){return"DIVIDER"===t.type}render(){if(this.loading&&!this._screen)return r("div",{class:"widget-container"},r("div",{class:"loading-spinner"}));if(!this._screen)return r("div",{class:"widget-container"},r("div",{class:"error-message"},"No screen configuration provided"));const t=this.getScreenErrors(),i=this.getScreenSuccesses(),e=this.getOrderedComponents(),s=e.filter((t=>this.isSocialComponent(t))),a=e.filter((t=>!this.isSocialComponent(t)&&!this.isDividerComponent(t))),o=e.some((t=>this.isDividerComponent(t))),n=this._theme?.widget?.logo_url||this._branding?.logo_url;return r("div",{class:"widget-container",part:"container"},r("header",{class:"widget-header",part:"header"},n&&r("div",{class:"logo-wrapper",part:"logo-wrapper"},r("img",{class:"logo",part:"logo",src:n,alt:"Logo"})),this._screen.title&&r("h1",{class:"title",part:"title"},this._screen.title),this._screen.description&&r("p",{class:"description",part:"description"},this._screen.description)),r("div",{class:"widget-body",part:"body"},t.map((t=>r("div",{class:"message message-error",part:"message message-error",key:t.id??t.text},t.text))),i.map((t=>r("div",{class:"message message-success",part:"message message-success",key:t.id??t.text},t.text))),r("form",{onSubmit:this.handleSubmit,part:"form"},r("div",{class:"form-content"},s.length>0&&r("div",{class:"social-section",part:"social-section"},s.map((t=>r("authhero-node",{key:t.id,component:t,value:this.formData[t.id],onFieldChange:t=>this.handleInputChange(t.detail.id,t.detail.value),onButtonClick:t=>this.handleButtonClick(t.detail),disabled:this.loading})))),s.length>0&&a.length>0&&o&&r("div",{class:"divider",part:"divider"},r("span",{class:"divider-text"},"Or")),r("div",{class:"fields-section",part:"fields-section"},a.map((t=>r("authhero-node",{key:t.id,component:t,value:this.formData[t.id],onFieldChange:t=>this.handleInputChange(t.detail.id,t.detail.value),onButtonClick:t=>this.handleButtonClick(t.detail),disabled:this.loading})))))),this._screen.links&&this._screen.links.length>0&&r("div",{class:"links",part:"links"},this._screen.links.map((t=>r("span",{class:"link-wrapper",part:"link-wrapper",key:t.id??t.href},t.linkText?r("span",null,t.text," ",r("a",{href:t.href,class:"link",part:"link",onClick:i=>this.handleLinkClick(i,{id:t.id,href:t.href,text:t.linkText||t.text})},t.linkText)):r("a",{href:t.href,class:"link",part:"link",onClick:i=>this.handleLinkClick(i,{id:t.id,href:t.href,text:t.text})},t.text)))))))}static get watchers(){return{screen:[{watchScreen:0}],branding:[{watchBranding:0}],theme:[{watchTheme:0}]}}};n.style=":host{display:block;font-family:var(--ah-font-family, 'ulp-font', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif);font-size:var(--ah-font-size-base, 14px);line-height:var(--ah-line-height-base, 1.5);color:var(--ah-color-text, #1e212a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.widget-container{max-width:var(--ah-widget-max-width, 400px);width:100%;margin:0 auto;background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 5px);box-shadow:var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));box-sizing:border-box}.widget-header{padding:var(--ah-header-padding, 40px 48px 24px)}.widget-body{padding:var(--ah-body-padding, 0 48px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center);margin-bottom:8px}.logo{display:block;height:var(--ah-logo-height, 52px);max-width:100%;width:auto;object-fit:contain}.title{font-size:var(--ah-font-size-title, 24px);font-weight:var(--ah-font-weight-title, 700);text-align:var(--ah-title-align, center);margin:var(--ah-title-margin, 24px 0 8px);color:var(--ah-color-header, #1e212a);line-height:1.2}.description{font-size:var(--ah-font-size-description, 14px);text-align:var(--ah-title-align, center);margin:var(--ah-description-margin, 0 0 8px);color:var(--ah-color-text, #1e212a);line-height:1.5}.message{padding:12px 16px;border-radius:4px;margin-bottom:16px;font-size:14px;line-height:1.5}.message-error{background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38)}.message-success{background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769)}form{display:flex;flex-direction:column}.form-content{display:flex;flex-direction:column}.social-section{display:flex;flex-direction:column;gap:8px;order:var(--ah-social-order, 2)}.fields-section{display:flex;flex-direction:column;order:var(--ah-fields-order, 0)}.divider{display:flex;align-items:center;text-align:center;margin:16px 0;order:var(--ah-divider-order, 1)}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0}.links{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}.link-wrapper{font-size:14px;color:var(--ah-color-text, #1e212a)}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:14px;font-weight:var(--ah-font-weight-link, 400);transition:color 150ms ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-link, #635dff);outline-offset:2px;border-radius:2px}.loading-spinner{width:32px;height:32px;margin:24px auto;border:3px solid var(--ah-color-border-muted, #e0e1e3);border-top-color:var(--ah-color-primary, #635dff);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;color:var(--ah-color-error, #d03c38);padding:16px;font-size:14px}@media (max-width: 480px){:host{display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}.widget-container{box-shadow:none;border-radius:0;max-width:none;width:100%;margin:0}.widget-header{padding:24px 16px 16px}.widget-body{padding:0 16px 24px}}";export{n as authhero_widget}