@authhero/widget 0.2.2 → 0.4.0

package/dist/esm/authhero-widget.entry.js

@@ -0,0 +1,575 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-Doiemx6o.js';
+
+/**
+ * AuthHero Widget - Branding Utilities
+ *
+ * Converts AuthHero branding and theme configurations to CSS custom properties.
+ */
+/**
+ * Convert a style enum to border radius value
+ */
+function styleToRadius(style, baseRadius) {
+    if (baseRadius !== undefined)
+        return `${baseRadius}px`;
+    switch (style) {
+        case 'pill':
+            return '9999px';
+        case 'rounded':
+            return '8px';
+        case 'sharp':
+            return '0';
+        default:
+            return undefined;
+    }
+}
+/**
+ * Convert branding configuration to CSS custom properties
+ */
+function brandingToCssVars(branding) {
+    if (!branding)
+        return {};
+    const vars = {};
+    // Primary color
+    if (branding.colors?.primary) {
+        vars['--ah-color-primary'] = branding.colors.primary;
+        // Generate hover variant (slightly darker)
+        vars['--ah-color-primary-hover'] = branding.colors.primary;
+    }
+    // Page background
+    if (branding.colors?.page_background) {
+        const bg = branding.colors.page_background;
+        if (bg.type === 'solid' && bg.start) {
+            vars['--ah-page-bg'] = bg.start;
+        }
+        else if (bg.type === 'gradient' && bg.start && bg.end) {
+            const angle = bg.angle_deg ?? 180;
+            vars['--ah-page-bg'] = `linear-gradient(${angle}deg, ${bg.start}, ${bg.end})`;
+        }
+    }
+    // Logo URL (stored for reference, used via prop)
+    if (branding.logo_url) {
+        vars['--ah-logo-url'] = `url(${branding.logo_url})`;
+    }
+    // Font URL
+    if (branding.font?.url) {
+        vars['--ah-font-url'] = branding.font.url;
+    }
+    return vars;
+}
+/**
+ * Convert theme configuration to CSS custom properties
+ */
+function themeToCssVars(theme) {
+    if (!theme)
+        return {};
+    const vars = {};
+    // Border radii
+    if (theme.borders) {
+        const b = theme.borders;
+        // Widget
+        if (b.widget_corner_radius !== undefined) {
+            vars['--ah-widget-radius'] = `${b.widget_corner_radius}px`;
+        }
+        if (b.widget_border_weight !== undefined) {
+            vars['--ah-widget-border-width'] = `${b.widget_border_weight}px`;
+        }
+        if (b.show_widget_shadow === false) {
+            vars['--ah-widget-shadow'] = 'none';
+        }
+        // Buttons
+        const btnRadius = styleToRadius(b.buttons_style, b.button_border_radius);
+        if (btnRadius) {
+            vars['--ah-btn-radius'] = btnRadius;
+        }
+        if (b.button_border_weight !== undefined) {
+            vars['--ah-btn-border-width'] = `${b.button_border_weight}px`;
+        }
+        // Inputs
+        const inputRadius = styleToRadius(b.inputs_style, b.input_border_radius);
+        if (inputRadius) {
+            vars['--ah-input-radius'] = inputRadius;
+        }
+        if (b.input_border_weight !== undefined) {
+            vars['--ah-input-border-width'] = `${b.input_border_weight}px`;
+        }
+    }
+    // Colors
+    if (theme.colors) {
+        const c = theme.colors;
+        // Primary button
+        if (c.primary_button) {
+            vars['--ah-color-primary'] = c.primary_button;
+            vars['--ah-color-primary-hover'] = c.primary_button;
+        }
+        if (c.primary_button_label) {
+            vars['--ah-btn-primary-text'] = c.primary_button_label;
+        }
+        // Secondary button
+        if (c.secondary_button_border) {
+            vars['--ah-btn-secondary-border'] = c.secondary_button_border;
+        }
+        if (c.secondary_button_label) {
+            vars['--ah-btn-secondary-text'] = c.secondary_button_label;
+        }
+        // Text colors
+        if (c.body_text) {
+            vars['--ah-color-text'] = c.body_text;
+        }
+        if (c.header) {
+            vars['--ah-color-text-header'] = c.header;
+        }
+        if (c.input_labels_placeholders) {
+            vars['--ah-color-text-label'] = c.input_labels_placeholders;
+            vars['--ah-color-text-muted'] = c.input_labels_placeholders;
+        }
+        if (c.input_filled_text) {
+            vars['--ah-color-input-text'] = c.input_filled_text;
+        }
+        // Backgrounds
+        if (c.widget_background) {
+            vars['--ah-color-bg'] = c.widget_background;
+        }
+        if (c.input_background) {
+            vars['--ah-color-input-bg'] = c.input_background;
+        }
+        // Borders
+        if (c.widget_border) {
+            vars['--ah-widget-border-color'] = c.widget_border;
+        }
+        if (c.input_border) {
+            vars['--ah-color-border'] = c.input_border;
+        }
+        // Links
+        if (c.links_focused_components) {
+            vars['--ah-color-link'] = c.links_focused_components;
+        }
+        // Focus/hover
+        if (c.base_focus_color) {
+            vars['--ah-color-focus-ring'] = c.base_focus_color;
+        }
+        if (c.base_hover_color) {
+            vars['--ah-color-primary-hover'] = c.base_hover_color;
+        }
+        // Semantic colors
+        if (c.error) {
+            vars['--ah-color-error'] = c.error;
+        }
+        if (c.success) {
+            vars['--ah-color-success'] = c.success;
+        }
+        // Icons
+        if (c.icons) {
+            vars['--ah-color-icon'] = c.icons;
+        }
+    }
+    // Fonts
+    if (theme.fonts) {
+        const f = theme.fonts;
+        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`;
+        }
+        if (f.title?.size) {
+            vars['--ah-font-size-title'] = `${f.title.size}px`;
+        }
+        if (f.subtitle?.size) {
+            vars['--ah-font-size-subtitle'] = `${f.subtitle.size}px`;
+        }
+        if (f.body_text?.size) {
+            vars['--ah-font-size-body'] = `${f.body_text.size}px`;
+        }
+        if (f.input_labels?.size) {
+            vars['--ah-font-size-label'] = `${f.input_labels.size}px`;
+        }
+        if (f.buttons_text?.size) {
+            vars['--ah-font-size-btn'] = `${f.buttons_text.size}px`;
+        }
+        if (f.links?.size) {
+            vars['--ah-font-size-link'] = `${f.links.size}px`;
+        }
+        if (f.links_style === 'underlined') {
+            vars['--ah-link-decoration'] = 'underline';
+        }
+        // Font weights
+        if (f.title?.bold) {
+            vars['--ah-font-weight-title'] = '700';
+        }
+        if (f.buttons_text?.bold) {
+            vars['--ah-font-weight-btn'] = '600';
+        }
+    }
+    // Widget settings
+    if (theme.widget) {
+        const w = theme.widget;
+        if (w.header_text_alignment) {
+            vars['--ah-title-align'] = w.header_text_alignment;
+        }
+        if (w.logo_height) {
+            vars['--ah-logo-height'] = `${w.logo_height}px`;
+        }
+        if (w.logo_position) {
+            const positionMap = {
+                center: 'center',
+                left: 'flex-start',
+                right: 'flex-end',
+                none: 'none',
+            };
+            vars['--ah-logo-align'] = positionMap[w.logo_position] ?? 'center';
+        }
+    }
+    // Page background
+    if (theme.page_background) {
+        const pb = theme.page_background;
+        if (pb.background_color) {
+            vars['--ah-page-bg'] = pb.background_color;
+        }
+        if (pb.background_image_url) {
+            vars['--ah-page-bg-image'] = `url(${pb.background_image_url})`;
+        }
+    }
+    return vars;
+}
+/**
+ * Merge branding and theme into a single CSS variables object
+ */
+function mergeThemeVars(branding, theme) {
+    return {
+        ...brandingToCssVars(branding),
+        ...themeToCssVars(theme),
+    };
+}
+/**
+ * Apply CSS variables to an element's style
+ */
+function applyCssVars(element, vars) {
+    Object.entries(vars).forEach(([key, value]) => {
+        element.style.setProperty(key, value);
+    });
+}
+
+const authheroWidgetCss = () => `: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)}`;
+
+const AuthheroWidget = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.formSubmit = createEvent(this, "formSubmit");
+        this.buttonClick = createEvent(this, "buttonClick");
+        this.linkClick = createEvent(this, "linkClick");
+        this.navigate = createEvent(this, "navigate");
+        this.flowComplete = createEvent(this, "flowComplete");
+        this.flowError = createEvent(this, "flowError");
+        this.screenChange = createEvent(this, "screenChange");
+    }
+    get el() { return getElement(this); }
+    /**
+     * The UI screen configuration from the server.
+     * Can be passed as a JSON string or object.
+     * Follows Auth0 Forms component schema.
+     */
+    screen;
+    /**
+     * API endpoint to fetch the initial screen from.
+     * If provided, the widget will fetch the screen on load.
+     */
+    apiUrl;
+    /**
+     * Branding configuration from AuthHero API.
+     * Controls logo, primary color, and page background.
+     * Can be passed as a JSON string or object.
+     */
+    branding;
+    /**
+     * Theme configuration from AuthHero API.
+     * Controls colors, borders, fonts, and layout.
+     * Can be passed as a JSON string or object.
+     */
+    theme;
+    /**
+     * Whether the widget is in a loading state.
+     */
+    loading = false;
+    /**
+     * Whether the widget should automatically submit forms to the action URL.
+     * When false (default), the widget only emits events and the consuming
+     * application handles all HTTP requests.
+     * When true, the widget handles form submission and screen updates.
+     * @default false
+     */
+    autoSubmit = false;
+    /**
+     * Internal parsed screen state.
+     */
+    _screen;
+    /**
+     * Internal parsed branding state.
+     */
+    _branding;
+    /**
+     * Internal parsed theme state.
+     */
+    _theme;
+    /**
+     * Form data collected from inputs.
+     */
+    formData = {};
+    /**
+     * Emitted when the form is submitted.
+     * The consuming application should handle the submission unless autoSubmit is true.
+     */
+    formSubmit;
+    /**
+     * Emitted when a non-submit button is clicked (social login, back, etc.).
+     * The consuming application decides what to do based on id/type/value.
+     */
+    buttonClick;
+    /**
+     * Emitted when a link is clicked.
+     * The consuming application decides how to handle navigation.
+     */
+    linkClick;
+    /**
+     * Emitted when the widget wants to navigate (e.g., after successful auth).
+     * The consuming application decides how to handle navigation.
+     */
+    navigate;
+    /**
+     * Emitted when auth flow completes with a redirect URL.
+     * The consuming application can redirect or extract the code.
+     */
+    flowComplete;
+    /**
+     * Emitted when an error occurs.
+     */
+    flowError;
+    /**
+     * Emitted when the screen changes.
+     */
+    screenChange;
+    watchScreen(newValue) {
+        if (typeof newValue === 'string') {
+            try {
+                this._screen = JSON.parse(newValue);
+            }
+            catch {
+                console.error('Failed to parse screen JSON');
+            }
+        }
+        else {
+            this._screen = newValue;
+        }
+        if (this._screen) {
+            this.screenChange.emit(this._screen);
+        }
+    }
+    watchBranding(newValue) {
+        if (typeof newValue === 'string') {
+            try {
+                this._branding = JSON.parse(newValue);
+            }
+            catch {
+                console.error('Failed to parse branding JSON');
+            }
+        }
+        else {
+            this._branding = newValue;
+        }
+        this.applyThemeStyles();
+    }
+    watchTheme(newValue) {
+        if (typeof newValue === 'string') {
+            try {
+                this._theme = JSON.parse(newValue);
+            }
+            catch {
+                console.error('Failed to parse theme JSON');
+            }
+        }
+        else {
+            this._theme = newValue;
+        }
+        this.applyThemeStyles();
+    }
+    /**
+     * Apply branding and theme as CSS custom properties
+     */
+    applyThemeStyles() {
+        const vars = mergeThemeVars(this._branding, this._theme);
+        applyCssVars(this.el, vars);
+    }
+    async componentWillLoad() {
+        // Parse initial props
+        this.watchScreen(this.screen);
+        this.watchBranding(this.branding);
+        this.watchTheme(this.theme);
+        // Fetch screen from API if URL provided and no screen prop
+        if (this.apiUrl && !this._screen) {
+            await this.fetchScreen();
+        }
+    }
+    async fetchScreen() {
+        if (!this.apiUrl)
+            return;
+        this.loading = true;
+        try {
+            const response = await fetch(this.apiUrl, {
+                credentials: 'include',
+                headers: {
+                    Accept: 'application/json',
+                },
+            });
+            if (response.ok) {
+                this._screen = await response.json();
+                if (this._screen) {
+                    this.screenChange.emit(this._screen);
+                }
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch screen:', error);
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    handleInputChange = (name, value) => {
+        this.formData = {
+            ...this.formData,
+            [name]: value,
+        };
+    };
+    handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!this._screen)
+            return;
+        // Always emit the submit event
+        this.formSubmit.emit({
+            screen: this._screen,
+            data: this.formData,
+        });
+        // If autoSubmit is disabled, let the consuming app handle it
+        if (!this.autoSubmit) {
+            return;
+        }
+        // Submit to the server
+        this.loading = true;
+        try {
+            const response = await fetch(this._screen.action, {
+                method: this._screen.method,
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Accept: 'application/json',
+                },
+                body: JSON.stringify({ data: this.formData }),
+            });
+            const contentType = response.headers.get('content-type');
+            if (contentType?.includes('application/json')) {
+                const result = await response.json();
+                // Handle different response types
+                if (result.redirect) {
+                    // Auth complete - emit complete event
+                    this.flowComplete.emit({ redirectUrl: result.redirect });
+                    // Also emit navigate for backwards compatibility
+                    this.navigate.emit({ url: result.redirect });
+                }
+                else if (result.screen) {
+                    // Next screen
+                    this._screen = result.screen;
+                    this.formData = {};
+                    this.screenChange.emit(result.screen);
+                    // Apply branding if included
+                    if (result.branding) {
+                        this._branding = result.branding;
+                        this.applyThemeStyles();
+                    }
+                }
+                else if (result.complete) {
+                    // Flow complete without redirect
+                    this.flowComplete.emit({});
+                }
+                // Handle validation errors (400 response)
+                if (!response.ok && result.screen) {
+                    this._screen = result.screen;
+                    this.screenChange.emit(result.screen);
+                }
+            }
+        }
+        catch (err) {
+            console.error('Form submission failed:', err);
+            this.flowError.emit({
+                message: err instanceof Error ? err.message : 'Form submission failed',
+            });
+        }
+        finally {
+            this.loading = false;
+        }
+    };
+    handleButtonClick = (detail) => {
+        this.buttonClick.emit(detail);
+    };
+    handleLinkClick = (e, link) => {
+        // Emit the event so the consuming app can handle it
+        this.linkClick.emit({
+            id: link.id,
+            href: link.href,
+            text: link.text,
+        });
+        // If autoSubmit is enabled, let the browser handle the navigation
+        // Otherwise, prevent default and let the app decide
+        if (!this.autoSubmit) {
+            e.preventDefault();
+        }
+    };
+    /**
+     * Get error messages from the screen-level messages array.
+     */
+    getScreenErrors() {
+        return this._screen?.messages?.filter((m) => m.type === 'error') || [];
+    }
+    /**
+     * Get success messages from the screen-level messages array.
+     */
+    getScreenSuccesses() {
+        return this._screen?.messages?.filter((m) => m.type === 'success') || [];
+    }
+    /**
+     * Sort components by order.
+     */
+    getOrderedComponents() {
+        if (!this._screen)
+            return [];
+        return [...this._screen.components]
+            .filter((c) => c.visible !== false)
+            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    }
+    render() {
+        if (this.loading && !this._screen) {
+            return (h("div", { class: "widget-container" }, h("div", { class: "loading-spinner" })));
+        }
+        if (!this._screen) {
+            return (h("div", { class: "widget-container" }, h("div", { class: "error-message" }, "No screen configuration provided")));
+        }
+        const screenErrors = this.getScreenErrors();
+        const screenSuccesses = this.getScreenSuccesses();
+        const components = this.getOrderedComponents();
+        // Get logo URL from branding props
+        const logoUrl = this._branding?.logo_url;
+        return (h("div", { class: "widget-container", part: "container" }, logoUrl && h("img", { class: "logo", part: "logo", src: logoUrl, alt: "Logo" }), this._screen.title && (h("h1", { class: "title", part: "title" }, this._screen.title)), this._screen.description && (h("p", { class: "description", part: "description" }, this._screen.description)), screenErrors.map((err) => (h("div", { class: "message message-error", part: "message message-error", key: err.id ?? err.text }, err.text))), screenSuccesses.map((msg) => (h("div", { class: "message message-success", part: "message message-success", key: msg.id ?? msg.text }, msg.text))), h("form", { onSubmit: this.handleSubmit, part: "form" }, components.map((component) => (h("authhero-node", { key: component.id, component: component, value: this.formData[component.id], onFieldChange: (e) => this.handleInputChange(e.detail.id, e.detail.value), onButtonClick: (e) => this.handleButtonClick(e.detail), disabled: this.loading })))), this._screen.links && this._screen.links.length > 0 && (h("div", { class: "links", part: "links" }, this._screen.links.map((link) => (h("span", { class: "link-wrapper", part: "link-wrapper", key: link.id ?? link.href }, link.linkText ? (h("span", null, link.text, ' ', h("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, { id: link.id, href: link.href, text: link.linkText || link.text }) }, link.linkText))) : (h("a", { href: link.href, class: "link", part: "link", onClick: (e) => this.handleLinkClick(e, { id: link.id, href: link.href, text: link.text }) }, link.text)))))))));
+    }
+    static get watchers() { return {
+        "screen": [{
+                "watchScreen": 0
+            }],
+        "branding": [{
+                "watchBranding": 0
+            }],
+        "theme": [{
+                "watchTheme": 0
+            }]
+    }; }
+};
+AuthheroWidget.style = authheroWidgetCss();
+
+export { AuthheroWidget as authhero_widget };

package/dist/esm/authhero-widget.js

@@ -0,0 +1,21 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-Doiemx6o.js';
+export { s as setNonce } from './index-Doiemx6o.js';
+import { g as globalScripts } from './app-globals-DQuL1Twl.js';
+
+/*
+ Stencil Client Patch Browser v4.41.0 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["authhero-node",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4]}]]],["authhero-widget",[[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]},null,{"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}]}]]]], options);
+});