@authhero/widget 0.4.0 → 0.5.0

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

@@ -246,6 +246,13 @@ export class AuthheroWidget {
         }
     };
     handleButtonClick = (detail) => {
+        // If this is a submit button click, trigger form submission
+        if (detail.type === 'submit') {
+            // Create a synthetic submit event and call handleSubmit
+            const syntheticEvent = { preventDefault: () => { } };
+            this.handleSubmit(syntheticEvent);
+            return;
+        }
         this.buttonClick.emit(detail);
     };
     handleLinkClick = (e, link) => {
@@ -283,6 +290,20 @@ export class AuthheroWidget {
             .filter((c) => c.visible !== false)
             .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
     }
+    /**
+     * 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() {
         if (this.loading && !this._screen) {
             return (h("div", { class: "widget-container" }, h("div", { class: "loading-spinner" })));
@@ -293,9 +314,13 @@ export class AuthheroWidget {
         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)))))))));
+        // 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));
+        // 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" }, 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" }))), this._screen.title && (h("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (h("p", { class: "description", part: "description" }, this._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, part: "form" }, 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 }))))), socialComponents.length > 0 && fieldComponents.length > 0 && hasDivider && (h("div", { class: "divider", part: "divider" }, h("span", { class: "divider-text" }, "Or"))), 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 })))))), 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"; }
@@ -316,7 +341,7 @@ export class AuthheroWidget {
                 "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; }",
+                    "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; forgot_password_link?: string | 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",
@@ -600,7 +625,7 @@ export class AuthheroWidget {
                 },
                 "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; }",
+                    "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; forgot_password_link?: string | 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",

package/dist/collection/utils/branding.js

@@ -163,39 +163,60 @@ export function themeToCssVars(theme) {
     // Fonts
     if (theme.fonts) {
         const f = theme.fonts;
+        // reference_text_size is the base font size in pixels (default 16px)
+        const baseSize = f.reference_text_size || 16;
         if (f.font_url) {
             vars['--ah-font-url'] = f.font_url;
         }
         if (f.reference_text_size) {
             vars['--ah-font-size-base'] = `${f.reference_text_size}px`;
         }
+        // Title, subtitle, etc. sizes are percentages of the base size
         if (f.title?.size) {
-            vars['--ah-font-size-title'] = `${f.title.size}px`;
+            const titlePx = Math.round((f.title.size / 100) * baseSize);
+            vars['--ah-font-size-title'] = `${titlePx}px`;
         }
         if (f.subtitle?.size) {
-            vars['--ah-font-size-subtitle'] = `${f.subtitle.size}px`;
+            const subtitlePx = Math.round((f.subtitle.size / 100) * baseSize);
+            vars['--ah-font-size-subtitle'] = `${subtitlePx}px`;
         }
         if (f.body_text?.size) {
-            vars['--ah-font-size-body'] = `${f.body_text.size}px`;
+            const bodyPx = Math.round((f.body_text.size / 100) * baseSize);
+            vars['--ah-font-size-body'] = `${bodyPx}px`;
         }
         if (f.input_labels?.size) {
-            vars['--ah-font-size-label'] = `${f.input_labels.size}px`;
+            const labelPx = Math.round((f.input_labels.size / 100) * baseSize);
+            vars['--ah-font-size-label'] = `${labelPx}px`;
         }
         if (f.buttons_text?.size) {
-            vars['--ah-font-size-btn'] = `${f.buttons_text.size}px`;
+            const btnPx = Math.round((f.buttons_text.size / 100) * baseSize);
+            vars['--ah-font-size-btn'] = `${btnPx}px`;
         }
         if (f.links?.size) {
-            vars['--ah-font-size-link'] = `${f.links.size}px`;
+            const linkPx = Math.round((f.links.size / 100) * baseSize);
+            vars['--ah-font-size-link'] = `${linkPx}px`;
         }
         if (f.links_style === 'underlined') {
             vars['--ah-link-decoration'] = 'underline';
         }
-        // Font weights
-        if (f.title?.bold) {
-            vars['--ah-font-weight-title'] = '700';
+        // Font weights - bold option sets font-weight to 700
+        if (f.title?.bold !== undefined) {
+            vars['--ah-font-weight-title'] = f.title.bold ? '700' : '400';
         }
-        if (f.buttons_text?.bold) {
-            vars['--ah-font-weight-btn'] = '600';
+        if (f.subtitle?.bold !== undefined) {
+            vars['--ah-font-weight-subtitle'] = f.subtitle.bold ? '700' : '400';
+        }
+        if (f.body_text?.bold !== undefined) {
+            vars['--ah-font-weight-body'] = f.body_text.bold ? '700' : '400';
+        }
+        if (f.input_labels?.bold !== undefined) {
+            vars['--ah-font-weight-label'] = f.input_labels.bold ? '700' : '400';
+        }
+        if (f.buttons_text?.bold !== undefined) {
+            vars['--ah-font-weight-btn'] = f.buttons_text.bold ? '600' : '400';
+        }
+        if (f.links?.bold !== undefined) {
+            vars['--ah-font-weight-link'] = f.links.bold ? '700' : '400';
         }
     }
     // Widget settings
@@ -212,9 +233,27 @@ export function themeToCssVars(theme) {
                 center: 'center',
                 left: 'flex-start',
                 right: 'flex-end',
-                none: 'none',
             };
-            vars['--ah-logo-align'] = positionMap[w.logo_position] ?? 'center';
+            if (w.logo_position === 'none') {
+                vars['--ah-logo-display'] = 'none';
+            }
+            else {
+                vars['--ah-logo-align'] = positionMap[w.logo_position] ?? 'center';
+            }
+        }
+        if (w.social_buttons_layout) {
+            // 'top' means social buttons above fields, 'bottom' means below
+            // Divider is always order 1 (middle)
+            if (w.social_buttons_layout === 'top') {
+                vars['--ah-social-order'] = '0';
+                vars['--ah-divider-order'] = '1';
+                vars['--ah-fields-order'] = '2';
+            }
+            else {
+                vars['--ah-social-order'] = '2';
+                vars['--ah-divider-order'] = '1';
+                vars['--ah-fields-order'] = '0';
+            }
         }
     }
     // Page background

package/dist/components/authhero-node.js

@@ -1 +1 @@
-import{A as o,d as s}from"./p-DS6y_iDJ.js";const p=o,r=s;export{p as AuthheroNode,r as defineCustomElement}
+import{A as o,d as s}from"./p-uIy4ySa4.js";const a=o,p=s;export{a as AuthheroNode,p as defineCustomElement}

package/dist/components/authhero-widget.js

@@ -1 +1 @@
-import{t as e,p as t,H as r,c as i,h as s}from"./p-086EZrPM.js";import{d as a}from"./p-DS6y_iDJ.js";function o(e,t){if(void 0!==t)return t+"px";switch(e){case"pill":return"9999px";case"rounded":return"8px";case"sharp":return"0";default:return}}function n(e){if(!e)return{};const t={};if(e.colors?.primary&&(t["--ah-color-primary"]=e.colors.primary,t["--ah-color-primary-hover"]=e.colors.primary),e.colors?.page_background){const r=e.colors.page_background;"solid"===r.type&&r.start?t["--ah-page-bg"]=r.start:"gradient"===r.type&&r.start&&r.end&&(t["--ah-page-bg"]=`linear-gradient(${r.angle_deg??180}deg, ${r.start}, ${r.end})`)}return e.logo_url&&(t["--ah-logo-url"]=`url(${e.logo_url})`),e.font?.url&&(t["--ah-font-url"]=e.font.url),t}function c(e){if(!e)return{};const t={};if(e.borders){const r=e.borders;void 0!==r.widget_corner_radius&&(t["--ah-widget-radius"]=r.widget_corner_radius+"px"),void 0!==r.widget_border_weight&&(t["--ah-widget-border-width"]=r.widget_border_weight+"px"),!1===r.show_widget_shadow&&(t["--ah-widget-shadow"]="none");const i=o(r.buttons_style,r.button_border_radius);i&&(t["--ah-btn-radius"]=i),void 0!==r.button_border_weight&&(t["--ah-btn-border-width"]=r.button_border_weight+"px");const s=o(r.inputs_style,r.input_border_radius);s&&(t["--ah-input-radius"]=s),void 0!==r.input_border_weight&&(t["--ah-input-border-width"]=r.input_border_weight+"px")}if(e.colors){const r=e.colors;r.primary_button&&(t["--ah-color-primary"]=r.primary_button,t["--ah-color-primary-hover"]=r.primary_button),r.primary_button_label&&(t["--ah-btn-primary-text"]=r.primary_button_label),r.secondary_button_border&&(t["--ah-btn-secondary-border"]=r.secondary_button_border),r.secondary_button_label&&(t["--ah-btn-secondary-text"]=r.secondary_button_label),r.body_text&&(t["--ah-color-text"]=r.body_text),r.header&&(t["--ah-color-text-header"]=r.header),r.input_labels_placeholders&&(t["--ah-color-text-label"]=r.input_labels_placeholders,t["--ah-color-text-muted"]=r.input_labels_placeholders),r.input_filled_text&&(t["--ah-color-input-text"]=r.input_filled_text),r.widget_background&&(t["--ah-color-bg"]=r.widget_background),r.input_background&&(t["--ah-color-input-bg"]=r.input_background),r.widget_border&&(t["--ah-widget-border-color"]=r.widget_border),r.input_border&&(t["--ah-color-border"]=r.input_border),r.links_focused_components&&(t["--ah-color-link"]=r.links_focused_components),r.base_focus_color&&(t["--ah-color-focus-ring"]=r.base_focus_color),r.base_hover_color&&(t["--ah-color-primary-hover"]=r.base_hover_color),r.error&&(t["--ah-color-error"]=r.error),r.success&&(t["--ah-color-success"]=r.success),r.icons&&(t["--ah-color-icon"]=r.icons)}if(e.fonts){const r=e.fonts;r.font_url&&(t["--ah-font-url"]=r.font_url),r.reference_text_size&&(t["--ah-font-size-base"]=r.reference_text_size+"px"),r.title?.size&&(t["--ah-font-size-title"]=r.title.size+"px"),r.subtitle?.size&&(t["--ah-font-size-subtitle"]=r.subtitle.size+"px"),r.body_text?.size&&(t["--ah-font-size-body"]=r.body_text.size+"px"),r.input_labels?.size&&(t["--ah-font-size-label"]=r.input_labels.size+"px"),r.buttons_text?.size&&(t["--ah-font-size-btn"]=r.buttons_text.size+"px"),r.links?.size&&(t["--ah-font-size-link"]=r.links.size+"px"),"underlined"===r.links_style&&(t["--ah-link-decoration"]="underline"),r.title?.bold&&(t["--ah-font-weight-title"]="700"),r.buttons_text?.bold&&(t["--ah-font-weight-btn"]="600")}if(e.widget){const r=e.widget;r.header_text_alignment&&(t["--ah-title-align"]=r.header_text_alignment),r.logo_height&&(t["--ah-logo-height"]=r.logo_height+"px"),r.logo_position&&(t["--ah-logo-align"]={center:"center",left:"flex-start",right:"flex-end",none:"none"}[r.logo_position]??"center")}if(e.page_background){const r=e.page_background;r.background_color&&(t["--ah-page-bg"]=r.background_color),r.background_image_url&&(t["--ah-page-bg-image"]=`url(${r.background_image_url})`)}return t}const h=t(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),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 this}screen;apiUrl;branding;theme;loading=!1;autoSubmit=!1;_screen;_branding;_theme;formData={};formSubmit;buttonClick;linkClick;navigate;flowComplete;flowError;screenChange;watchScreen(e){if("string"==typeof e)try{this._screen=JSON.parse(e)}catch{console.error("Failed to parse screen JSON")}else this._screen=e;this._screen&&this.screenChange.emit(this._screen)}watchBranding(e){if("string"==typeof e)try{this._branding=JSON.parse(e)}catch{console.error("Failed to parse branding JSON")}else this._branding=e;this.applyThemeStyles()}watchTheme(e){if("string"==typeof e)try{this._theme=JSON.parse(e)}catch{console.error("Failed to parse theme JSON")}else this._theme=e;this.applyThemeStyles()}applyThemeStyles(){const e=function(e,t){return{...n(e),...c(t)}}(this._branding,this._theme);!function(e,t){Object.entries(t).forEach((([t,r])=>{e.style.setProperty(t,r)}))}(this.el,e)}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 e=await fetch(this.apiUrl,{credentials:"include",headers:{Accept:"application/json"}});e.ok&&(this._screen=await e.json(),this._screen&&this.screenChange.emit(this._screen))}catch(e){console.error("Failed to fetch screen:",e)}finally{this.loading=!1}}}handleInputChange=(e,t)=>{this.formData={...this.formData,[e]:t}};handleSubmit=async e=>{if(e.preventDefault(),this._screen&&(this.formSubmit.emit({screen:this._screen,data:this.formData}),this.autoSubmit)){this.loading=!0;try{const e=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})}),t=e.headers.get("content-type");if(t?.includes("application/json")){const t=await e.json();t.redirect?(this.flowComplete.emit({redirectUrl:t.redirect}),this.navigate.emit({url:t.redirect})):t.screen?(this._screen=t.screen,this.formData={},this.screenChange.emit(t.screen),t.branding&&(this._branding=t.branding,this.applyThemeStyles())):t.complete&&this.flowComplete.emit({}),!e.ok&&t.screen&&(this._screen=t.screen,this.screenChange.emit(t.screen))}}catch(e){console.error("Form submission failed:",e),this.flowError.emit({message:e instanceof Error?e.message:"Form submission failed"})}finally{this.loading=!1}}};handleButtonClick=e=>{this.buttonClick.emit(e)};handleLinkClick=(e,t)=>{this.linkClick.emit({id:t.id,href:t.href,text:t.text}),this.autoSubmit||e.preventDefault()};getScreenErrors(){return this._screen?.messages?.filter((e=>"error"===e.type))||[]}getScreenSuccesses(){return this._screen?.messages?.filter((e=>"success"===e.type))||[]}getOrderedComponents(){return this._screen?[...this._screen.components].filter((e=>!1!==e.visible)).sort(((e,t)=>(e.order??0)-(t.order??0))):[]}render(){if(this.loading&&!this._screen)return s("div",{class:"widget-container"},s("div",{class:"loading-spinner"}));if(!this._screen)return s("div",{class:"widget-container"},s("div",{class:"error-message"},"No screen configuration provided"));const e=this.getScreenErrors(),t=this.getScreenSuccesses(),r=this.getOrderedComponents(),i=this._branding?.logo_url;return s("div",{class:"widget-container",part:"container"},i&&s("img",{class:"logo",part:"logo",src:i,alt:"Logo"}),this._screen.title&&s("h1",{class:"title",part:"title"},this._screen.title),this._screen.description&&s("p",{class:"description",part:"description"},this._screen.description),e.map((e=>s("div",{class:"message message-error",part:"message message-error",key:e.id??e.text},e.text))),t.map((e=>s("div",{class:"message message-success",part:"message message-success",key:e.id??e.text},e.text))),s("form",{onSubmit:this.handleSubmit,part:"form"},r.map((e=>s("authhero-node",{key:e.id,component:e,value:this.formData[e.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&&s("div",{class:"links",part:"links"},this._screen.links.map((e=>s("span",{class:"link-wrapper",part:"link-wrapper",key:e.id??e.href},e.linkText?s("span",null,e.text," ",s("a",{href:e.href,class:"link",part:"link",onClick:t=>this.handleLinkClick(t,{id:e.id,href:e.href,text:e.linkText||e.text})},e.linkText)):s("a",{href:e.href,class:"link",part:"link",onClick:t=>this.handleLinkClick(t,{id:e.id,href:e.href,text:e.text})},e.text))))))}static get watchers(){return{screen:[{watchScreen:0}],branding:[{watchBranding:0}],theme:[{watchTheme:0}]}}static get style(){return":host{display:block;font-family:var(--ah-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif)}.widget-container{max-width:var(--ah-widget-max-width, 400px);margin:0 auto;padding:var(--ah-widget-padding, 2rem);background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 8px);box-shadow:var(--ah-widget-shadow, 0 2px 10px rgba(0, 0, 0, 0.1))}.logo{display:block;width:var(--ah-logo-size, 48px);height:var(--ah-logo-size, 48px);margin:0 auto var(--ah-space-6, 1.5rem);object-fit:contain;border-radius:var(--ah-logo-radius, 8px)}.title{font-size:var(--ah-font-size-2xl, 1.5rem);font-weight:var(--ah-font-weight-semibold, 600);text-align:center;margin:0 0 var(--ah-space-8, 2rem);color:var(--ah-color-text, #111827);line-height:var(--ah-line-height-tight, 1.25)}.message{padding:var(--ah-space-3, 0.75rem) var(--ah-space-4, 1rem);border-radius:var(--ah-radius-md, 4px);margin-bottom:var(--ah-space-4, 1rem);font-size:var(--ah-font-size-sm, 0.875rem);line-height:var(--ah-line-height-normal, 1.5)}.message-error{background-color:var(--ah-color-error-bg, #fee2e2);color:var(--ah-color-error, #dc2626);border:1px solid var(--ah-color-error-border, #fecaca)}.message-success{background-color:var(--ah-color-success-bg, #dcfce7);color:var(--ah-color-success, #16a34a);border:1px solid var(--ah-color-success-border, #bbf7d0)}form{display:flex;flex-direction:column;gap:var(--ah-space-4, 1rem)}.links{display:flex;flex-direction:column;align-items:center;gap:var(--ah-space-2, 0.5rem);margin-top:var(--ah-space-6, 1.5rem);padding-top:var(--ah-space-4, 1rem)}.link-wrapper{font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-muted, #6b7280)}.link{color:var(--ah-color-primary, #0066cc);text-decoration:none;font-size:var(--ah-font-size-sm, 0.875rem);transition:color var(--ah-transition-fast, 150ms ease)}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-primary, #0066cc);outline-offset:2px}.divider{display:flex;align-items:center;text-align:center;margin:var(--ah-space-2, 0.5rem) 0}.divider::before,.divider::after{content:'';flex:1;border-bottom:1px solid var(--ah-color-border-muted, #e5e7eb)}.divider-text{padding:0 var(--ah-space-4, 1rem);font-size:var(--ah-font-size-sm, 0.875rem);color:var(--ah-color-text-muted, #9ca3af);text-transform:uppercase;letter-spacing:0.05em}.loading-spinner{width:40px;height:40px;margin:var(--ah-space-8, 2rem) auto;border:3px solid var(--ah-color-border-muted, #f3f3f3);border-top:3px solid var(--ah-color-primary, #0066cc);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;color:var(--ah-color-error, #dc2626);padding:var(--ah-space-4, 1rem)}"}},[513,"authhero-widget",{screen:[1],apiUrl:[1,"api-url"],branding:[1],theme:[1],loading:[1028],autoSubmit:[4,"auto-submit"],_screen:[32],_branding:[32],_theme:[32],formData:[32]},void 0,{screen:[{watchScreen:0}],branding:[{watchBranding:0}],theme:[{watchTheme:0}]}]);function l(){"undefined"!=typeof customElements&&["authhero-widget","authhero-node"].forEach((t=>{switch(t){case"authhero-widget":customElements.get(e(t))||customElements.define(e(t),h);break;case"authhero-node":customElements.get(e(t))||a()}}))}l();const d=h,p=l;export{d as AuthheroWidget,p as defineCustomElement}
+import{t,p as e,H as i,c as r,h as s}from"./p-pupmqprs.js";import{d as a}from"./p-uIy4ySa4.js";function o(t,e){if(void 0!==e)return e+"px";switch(t){case"pill":return"9999px";case"rounded":return"8px";case"sharp":return"0";default:return}}function n(t){if(!t)return{};const e={};if(t.colors?.primary&&(e["--ah-color-primary"]=t.colors.primary,e["--ah-color-primary-hover"]=t.colors.primary),t.colors?.page_background){const i=t.colors.page_background;"solid"===i.type&&i.start?e["--ah-page-bg"]=i.start:"gradient"===i.type&&i.start&&i.end&&(e["--ah-page-bg"]=`linear-gradient(${i.angle_deg??180}deg, ${i.start}, ${i.end})`)}return t.logo_url&&(e["--ah-logo-url"]=`url(${t.logo_url})`),t.font?.url&&(e["--ah-font-url"]=t.font.url),e}function h(t){if(!t)return{};const e={};if(t.borders){const i=t.borders;void 0!==i.widget_corner_radius&&(e["--ah-widget-radius"]=i.widget_corner_radius+"px"),void 0!==i.widget_border_weight&&(e["--ah-widget-border-width"]=i.widget_border_weight+"px"),!1===i.show_widget_shadow&&(e["--ah-widget-shadow"]="none");const r=o(i.buttons_style,i.button_border_radius);r&&(e["--ah-btn-radius"]=r),void 0!==i.button_border_weight&&(e["--ah-btn-border-width"]=i.button_border_weight+"px");const s=o(i.inputs_style,i.input_border_radius);s&&(e["--ah-input-radius"]=s),void 0!==i.input_border_weight&&(e["--ah-input-border-width"]=i.input_border_weight+"px")}if(t.colors){const i=t.colors;i.primary_button&&(e["--ah-color-primary"]=i.primary_button,e["--ah-color-primary-hover"]=i.primary_button),i.primary_button_label&&(e["--ah-btn-primary-text"]=i.primary_button_label),i.secondary_button_border&&(e["--ah-btn-secondary-border"]=i.secondary_button_border),i.secondary_button_label&&(e["--ah-btn-secondary-text"]=i.secondary_button_label),i.body_text&&(e["--ah-color-text"]=i.body_text),i.header&&(e["--ah-color-text-header"]=i.header),i.input_labels_placeholders&&(e["--ah-color-text-label"]=i.input_labels_placeholders,e["--ah-color-text-muted"]=i.input_labels_placeholders),i.input_filled_text&&(e["--ah-color-input-text"]=i.input_filled_text),i.widget_background&&(e["--ah-color-bg"]=i.widget_background),i.input_background&&(e["--ah-color-input-bg"]=i.input_background),i.widget_border&&(e["--ah-widget-border-color"]=i.widget_border),i.input_border&&(e["--ah-color-border"]=i.input_border),i.links_focused_components&&(e["--ah-color-link"]=i.links_focused_components),i.base_focus_color&&(e["--ah-color-focus-ring"]=i.base_focus_color),i.base_hover_color&&(e["--ah-color-primary-hover"]=i.base_hover_color),i.error&&(e["--ah-color-error"]=i.error),i.success&&(e["--ah-color-success"]=i.success),i.icons&&(e["--ah-color-icon"]=i.icons)}if(t.fonts){const i=t.fonts,r=i.reference_text_size||16;i.font_url&&(e["--ah-font-url"]=i.font_url),i.reference_text_size&&(e["--ah-font-size-base"]=i.reference_text_size+"px"),i.title?.size&&(e["--ah-font-size-title"]=Math.round(i.title.size/100*r)+"px"),i.subtitle?.size&&(e["--ah-font-size-subtitle"]=Math.round(i.subtitle.size/100*r)+"px"),i.body_text?.size&&(e["--ah-font-size-body"]=Math.round(i.body_text.size/100*r)+"px"),i.input_labels?.size&&(e["--ah-font-size-label"]=Math.round(i.input_labels.size/100*r)+"px"),i.buttons_text?.size&&(e["--ah-font-size-btn"]=Math.round(i.buttons_text.size/100*r)+"px"),i.links?.size&&(e["--ah-font-size-link"]=Math.round(i.links.size/100*r)+"px"),"underlined"===i.links_style&&(e["--ah-link-decoration"]="underline"),void 0!==i.title?.bold&&(e["--ah-font-weight-title"]=i.title.bold?"700":"400"),void 0!==i.subtitle?.bold&&(e["--ah-font-weight-subtitle"]=i.subtitle.bold?"700":"400"),void 0!==i.body_text?.bold&&(e["--ah-font-weight-body"]=i.body_text.bold?"700":"400"),void 0!==i.input_labels?.bold&&(e["--ah-font-weight-label"]=i.input_labels.bold?"700":"400"),void 0!==i.buttons_text?.bold&&(e["--ah-font-weight-btn"]=i.buttons_text.bold?"600":"400"),void 0!==i.links?.bold&&(e["--ah-font-weight-link"]=i.links.bold?"700":"400")}if(t.widget){const i=t.widget;if(i.header_text_alignment&&(e["--ah-title-align"]=i.header_text_alignment),i.logo_height&&(e["--ah-logo-height"]=i.logo_height+"px"),i.logo_position){const t={center:"center",left:"flex-start",right:"flex-end"};"none"===i.logo_position?e["--ah-logo-display"]="none":e["--ah-logo-align"]=t[i.logo_position]??"center"}i.social_buttons_layout&&("top"===i.social_buttons_layout?(e["--ah-social-order"]="0",e["--ah-divider-order"]="1",e["--ah-fields-order"]="2"):(e["--ah-social-order"]="2",e["--ah-divider-order"]="1",e["--ah-fields-order"]="0"))}if(t.page_background){const i=t.page_background;i.background_color&&(e["--ah-page-bg"]=i.background_color),i.background_image_url&&(e["--ah-page-bg-image"]=`url(${i.background_image_url})`)}return e}const c=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.formSubmit=r(this,"formSubmit"),this.buttonClick=r(this,"buttonClick"),this.linkClick=r(this,"linkClick"),this.navigate=r(this,"navigate"),this.flowComplete=r(this,"flowComplete"),this.flowError=r(this,"flowError"),this.screenChange=r(this,"screenChange")}get el(){return 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=function(t,e){return{...n(t),...h(e)}}(this._branding,this._theme);!function(t,e){Object.entries(e).forEach((([e,i])=>{t.style.setProperty(e,i)}))}(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,e)=>{this.formData={...this.formData,[t]:e}};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})}),e=t.headers.get("content-type");if(e?.includes("application/json")){const e=await t.json();e.redirect?(this.flowComplete.emit({redirectUrl:e.redirect}),this.navigate.emit({url:e.redirect})):e.screen?(this._screen=e.screen,this.formData={},this.screenChange.emit(e.screen),e.branding&&(this._branding=e.branding,this.applyThemeStyles())):e.complete&&this.flowComplete.emit({}),!t.ok&&e.screen&&(this._screen=e.screen,this.screenChange.emit(e.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,e)=>{this.linkClick.emit({id:e.id,href:e.href,text:e.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,e)=>(t.order??0)-(e.order??0))):[]}isSocialComponent(t){return"SOCIAL"===t.type}isDividerComponent(t){return"DIVIDER"===t.type}render(){if(this.loading&&!this._screen)return s("div",{class:"widget-container"},s("div",{class:"loading-spinner"}));if(!this._screen)return s("div",{class:"widget-container"},s("div",{class:"error-message"},"No screen configuration provided"));const t=this.getScreenErrors(),e=this.getScreenSuccesses(),i=this.getOrderedComponents(),r=i.filter((t=>this.isSocialComponent(t))),a=i.filter((t=>!this.isSocialComponent(t)&&!this.isDividerComponent(t))),o=i.some((t=>this.isDividerComponent(t))),n=this._theme?.widget?.logo_url||this._branding?.logo_url;return s("div",{class:"widget-container",part:"container"},s("header",{class:"widget-header",part:"header"},n&&s("div",{class:"logo-wrapper",part:"logo-wrapper"},s("img",{class:"logo",part:"logo",src:n,alt:"Logo"})),this._screen.title&&s("h1",{class:"title",part:"title"},this._screen.title),this._screen.description&&s("p",{class:"description",part:"description"},this._screen.description)),s("div",{class:"widget-body",part:"body"},t.map((t=>s("div",{class:"message message-error",part:"message message-error",key:t.id??t.text},t.text))),e.map((t=>s("div",{class:"message message-success",part:"message message-success",key:t.id??t.text},t.text))),s("form",{onSubmit:this.handleSubmit,part:"form"},s("div",{class:"form-content"},r.length>0&&s("div",{class:"social-section",part:"social-section"},r.map((t=>s("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})))),r.length>0&&a.length>0&&o&&s("div",{class:"divider",part:"divider"},s("span",{class:"divider-text"},"Or")),s("div",{class:"fields-section",part:"fields-section"},a.map((t=>s("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&&s("div",{class:"links",part:"links"},this._screen.links.map((t=>s("span",{class:"link-wrapper",part:"link-wrapper",key:t.id??t.href},t.linkText?s("span",null,t.text," ",s("a",{href:t.href,class:"link",part:"link",onClick:e=>this.handleLinkClick(e,{id:t.id,href:t.href,text:t.linkText||t.text})},t.linkText)):s("a",{href:t.href,class:"link",part:"link",onClick:e=>this.handleLinkClick(e,{id:t.id,href:t.href,text:t.text})},t.text)))))))}static get watchers(){return{screen:[{watchScreen:0}],branding:[{watchBranding:0}],theme:[{watchTheme:0}]}}static get style(){return":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 40px 24px)}.widget-body{padding:var(--ah-body-padding, 0 40px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center)}.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 16px);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);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}"}},[513,"authhero-widget",{screen:[1],apiUrl:[1,"api-url"],branding:[1],theme:[1],loading:[1028],autoSubmit:[4,"auto-submit"],_screen:[32],_branding:[32],_theme:[32],formData:[32]},void 0,{screen:[{watchScreen:0}],branding:[{watchBranding:0}],theme:[{watchTheme:0}]}]);function l(){"undefined"!=typeof customElements&&["authhero-widget","authhero-node"].forEach((e=>{switch(e){case"authhero-widget":customElements.get(t(e))||customElements.define(t(e),c);break;case"authhero-node":customElements.get(t(e))||a()}}))}l();const d=c,p=l;export{d as AuthheroWidget,p as defineCustomElement}