@xlabs-store/core 0.0.1 → 0.0.3

package/dist/collection/components/x-login/x-login.js

@@ -0,0 +1,706 @@
+import { Host, h } from "@stencil/core";
+const DEFAULT_CONFIG = {
+    brandName: 'Acme Inc.',
+    title: 'Login to your account',
+    description: 'Enter your email below to login to your account',
+    emailPlaceholder: 'name@example.com',
+    passwordPlaceholder: '',
+    submitLabel: 'Login',
+    emailLabel: 'Email',
+    passwordLabel: 'Password',
+    showForgotPassword: true,
+    showSignUpLink: true,
+    showRememberMe: false,
+    showSocialLogin: false,
+    showTerms: false,
+};
+const DEFAULT_SOCIAL_PROVIDERS = [
+    { name: 'google', label: 'Login with Google' },
+    { name: 'github', label: 'Login with GitHub' },
+];
+/**
+ * Login page layout component with 5 ready-to-use variants.
+ *
+ * Composes existing xlabs components (x-form-builder, x-checkbox, x-divider)
+ * into complete login page layouts inspired by shadcn/ui login blocks.
+ *
+ * @example
+ * <x-login variant="simple"></x-login>
+ *
+ * @example
+ * <x-login
+ *   variant="split-image"
+ *   config={{ brandName: 'My App', coverImage: '/cover.jpg', showSocialLogin: true }}
+ * ></x-login>
+ */
+export class XLogin {
+    el;
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Login page layout variant.
+     * @example
+     * <x-login variant="split-image"></x-login>
+     */
+    variant = 'simple';
+    /**
+     * Configuration object for customizing labels, links, and features.
+     * @example
+     * <x-login config={{ brandName: 'My App', showSocialLogin: true }}></x-login>
+     */
+    config = {};
+    /**
+     * Show loading state on the submit button.
+     * @example
+     * <x-login loading></x-login>
+     */
+    loading = false;
+    /**
+     * Disable the entire form.
+     * @example
+     * <x-login disabled></x-login>
+     */
+    disabled = false;
+    /**
+     * Error message to display (e.g., "Invalid credentials").
+     * @example
+     * <x-login error="Invalid email or password"></x-login>
+     */
+    error = '';
+    /**
+     * Optional custom form schema for x-form-builder.
+     * If not provided, a default login schema is generated from the config.
+     * @example
+     * <x-login formSchema={myCustomSchema}></x-login>
+     */
+    formSchema;
+    // ========================================
+    // STATE
+    // ========================================
+    email = '';
+    password = '';
+    rememberMe = false;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when the login form is submitted.
+     * @example
+     * <x-login onXSubmit={(ev) => console.log(ev.detail)}></x-login>
+     */
+    xSubmit;
+    /**
+     * Emitted when a social login button is clicked.
+     * @example
+     * <x-login onXSocialLogin={(ev) => console.log(ev.detail.provider)}></x-login>
+     */
+    xSocialLogin;
+    /**
+     * Emitted when "Forgot password?" is clicked (if no forgotPasswordUrl is set).
+     * @example
+     * <x-login onXForgotPassword={() => navigateTo('/forgot')}></x-login>
+     */
+    xForgotPassword;
+    /**
+     * Emitted when "Sign up" link is clicked (if no signUpUrl is set).
+     * @example
+     * <x-login onXSignUp={() => navigateTo('/register')}></x-login>
+     */
+    xSignUp;
+    // ========================================
+    // HELPERS
+    // ========================================
+    get cfg() {
+        return { ...DEFAULT_CONFIG, ...this.config };
+    }
+    get socialProviders() {
+        return this.cfg.socialProviders || DEFAULT_SOCIAL_PROVIDERS;
+    }
+    get socialLayout() {
+        return this.cfg.socialLayout || 'bottom';
+    }
+    capitalize(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+    get forgotPasswordPos() {
+        return this.cfg.forgotPasswordPosition || 'top-right';
+    }
+    isIconUrl(icon) {
+        if (!icon)
+            return false;
+        return icon.startsWith('http://') || icon.startsWith('https://') || icon.startsWith('/') || icon.startsWith('data:image/');
+    }
+    /**
+     * Build the default login form schema from config props.
+     * Used when no custom `formSchema` is provided.
+     */
+    buildDefaultLoginSchema(submitLabel) {
+        const cfg = this.cfg;
+        const isEmailOnly = this.variant === 'email-only';
+        const elements = [
+            {
+                type: 'grid',
+                name: 'login_grid',
+                columns: 12,
+                gap: 16,
+                disabled: this.disabled,
+                elements: [
+                    // Email field
+                    {
+                        id: 'login-email',
+                        type: 'email',
+                        label: cfg.emailLabel,
+                        name: 'email',
+                        placeholder: cfg.emailPlaceholder,
+                        span: 12,
+                        size: 'large',
+                        defaultValue: this.email,
+                        validators: [{ type: 'required' }, { type: 'email' }],
+                        validationMessages: {
+                            required: cfg.emailRequiredError || 'Email is required',
+                            email: cfg.emailFormatError || 'Please enter a valid email address',
+                        },
+                    },
+                    // Password field (not shown for email-only variant)
+                    ...(!isEmailOnly
+                        ? [
+                            {
+                                id: 'login-password',
+                                type: 'password',
+                                label: cfg.passwordLabel,
+                                name: 'password',
+                                placeholder: cfg.passwordPlaceholder,
+                                span: 12,
+                                size: 'large',
+                                defaultValue: this.password,
+                                validators: [{ type: 'required' }],
+                                validationMessages: {
+                                    required: cfg.passwordRequiredError || 'Password is required',
+                                },
+                            },
+                        ]
+                        : []),
+                    // Remember me checkbox (only when enabled)
+                    ...(cfg.showRememberMe
+                        ? [
+                            {
+                                id: 'login-remember-me',
+                                type: 'checkbox',
+                                label: '',
+                                name: 'rememberMe',
+                                span: 12,
+                                options: [{ label: 'Remember me', value: true }],
+                                defaultValue: this.rememberMe ? [true] : [],
+                                disabled: this.disabled,
+                            },
+                        ]
+                        : []),
+                    // Submit button
+                    {
+                        id: 'login-submit',
+                        type: 'button',
+                        name: 'submit_btn',
+                        content: submitLabel || cfg.submitLabel,
+                        buttonType: 'primary',
+                        htmlType: 'submit',
+                        shape: 'default',
+                        span: 12,
+                        block: true,
+                        loading: this.loading,
+                        disabled: this.disabled,
+                        size: 'large',
+                        align: 'left',
+                    },
+                ],
+            },
+        ];
+        return {
+            id: 'login-form-schema',
+            layout: { type: 'vertical', labelAlign: 'left' },
+            elements,
+        };
+    }
+    // ========================================
+    // EVENT HANDLERS
+    // ========================================
+    handleFormSubmit = (e) => {
+        if (this.disabled || this.loading)
+            return;
+        const formValue = e.detail?.value || {};
+        this.email = formValue.email || '';
+        this.password = formValue.password || '';
+        // Extract rememberMe from form value (checkbox returns array of selected values)
+        const rememberMeValue = formValue.rememberMe;
+        this.rememberMe = Array.isArray(rememberMeValue) ? rememberMeValue.includes(true) : !!rememberMeValue;
+        const isEmailOnly = this.variant === 'email-only';
+        this.xSubmit.emit({
+            email: this.email,
+            password: isEmailOnly ? undefined : this.password,
+            rememberMe: this.rememberMe,
+        });
+    };
+    handleSocialClick = (provider) => {
+        this.xSocialLogin.emit({ provider });
+    };
+    // TODO: Temporarily disabled – re-enable with renderForgotPassword
+    // private handleForgotPassword = (e: Event) => {
+    //   if (!this.cfg.forgotPasswordUrl) {
+    //     e.preventDefault();
+    //     this.xForgotPassword.emit();
+    //   }
+    // };
+    handleSignUp = (e) => {
+        if (!this.cfg.signUpUrl) {
+            e.preventDefault();
+            this.xSignUp.emit();
+        }
+    };
+    // ========================================
+    // SHARED RENDER HELPERS
+    // ========================================
+    renderBrand() {
+        const { brandName, brandLogo } = this.cfg;
+        return (h("div", { class: "x-login-brand" }, h("slot", { name: "brand" }, brandLogo ? h("img", { class: "x-login-brand-logo", src: brandLogo, alt: brandName }) : h("div", { class: "x-login-brand-icon" }, brandName?.charAt(0)?.toUpperCase() || 'A'), h("span", null, brandName))));
+    }
+    renderHeader(titleOverride, descOverride) {
+        const title = titleOverride || this.cfg.title;
+        const desc = descOverride || this.cfg.description;
+        return (h("div", { class: "x-login-header" }, h("slot", { name: "header" }, h("h1", { class: "x-login-title" }, title), desc && h("p", { class: "x-login-description" }, desc))));
+    }
+    renderError() {
+        if (!this.error)
+            return null;
+        return (h("div", { class: "x-login-error" }, h("slot", { name: "error" }, this.error)));
+    }
+    // TODO: Temporarily hidden – re-enable when ready
+    renderForgotPassword() {
+        return null;
+        // const { showForgotPassword, forgotPasswordUrl } = this.cfg;
+        // if (!showForgotPassword) return null;
+        // return (
+        //   <a class="x-login-link" href={forgotPasswordUrl || '#'} onClick={this.handleForgotPassword}>
+        //     Forgot your password?
+        //   </a>
+        // );
+    }
+    renderFormOptions() {
+        const pos = this.forgotPasswordPos;
+        const hasBottomForgot = pos === 'bottom-right' && this.cfg.showForgotPassword;
+        if (!hasBottomForgot)
+            return null;
+        return h("div", { class: "x-login-options-row x-login-options-row--right" }, this.renderForgotPassword());
+    }
+    /**
+     * Render the login form using x-form-builder.
+     * If a custom `formSchema` prop is provided, it takes priority.
+     * Otherwise, a default schema is generated from the login config.
+     */
+    renderFormBuilder(submitLabel) {
+        const schema = this.formSchema || this.buildDefaultLoginSchema(submitLabel);
+        return (h("div", { class: "x-login-form" }, this.forgotPasswordPos === 'top-right' && this.cfg.showForgotPassword && h("div", { class: "x-login-field-row x-login-field-row--right" }, this.renderForgotPassword()), h("x-form-builder", { schema: schema, onFormSubmit: this.handleFormSubmit }), this.renderFormOptions()));
+    }
+    renderDivider(isVertical) {
+        const textConfig = this.cfg.socialDividerText;
+        const text = textConfig === undefined ? 'Or continue with' : textConfig;
+        const hasText = text.trim().length > 0;
+        return (h("div", { class: {
+                'x-login-layout-divider': true,
+                'x-login-layout-divider--vertical': !!isVertical,
+                'x-login-layout-divider--horizontal': !isVertical,
+                'x-login-layout-divider--has-text': hasText,
+            } }, hasText && h("span", { class: "x-login-layout-divider-text" }, text)));
+    }
+    renderSocialButtons() {
+        if (!this.cfg.showSocialLogin || this.socialLayout === 'side')
+            return null;
+        if (this.socialLayout === 'icon-grid') {
+            return this.renderSocialIconGrid();
+        }
+        const providers = this.socialProviders;
+        return (h("div", { class: "x-login-social" }, this.renderDivider(false), h("div", { class: "x-login-social-grid" }, providers.map(p => (h("x-button", { type: "default", block: true, disabled: this.disabled, onClick: () => this.handleSocialClick(p.name) }, p.icon && (this.isIconUrl(p.icon) ? h("img", { slot: "icon", src: p.icon, alt: "", class: "x-login-social-img-icon" }) : h("x-icon", { slot: "icon", name: p.icon })), p.label || `Login with ${this.capitalize(p.name)}`))))));
+    }
+    /**
+     * Render social buttons as compact icon-only grid.
+     */
+    renderSocialIconGrid() {
+        if (!this.cfg.showSocialLogin)
+            return null;
+        const providers = this.socialProviders;
+        return (h("div", { class: "x-login-social" }, this.renderDivider(false), h("div", { class: "x-login-social-icon-grid" }, providers.map(p => (h("button", { class: "x-login-social-icon-btn", type: "button", title: p.label || this.capitalize(p.name), disabled: this.disabled, onClick: () => this.handleSocialClick(p.name) }, p.icon ? (this.isIconUrl(p.icon) ? (h("img", { src: p.icon, alt: "", class: "x-login-social-img-icon" })) : (h("x-icon", { name: p.icon }))) : (h("span", { class: "x-login-social-icon-letter" }, p.name.charAt(0).toUpperCase()))))))));
+    }
+    /**
+     * Render the social side panel (used when socialLayout='side').
+     */
+    renderSocialSidePanel() {
+        if (!this.cfg.showSocialLogin || this.socialLayout !== 'side')
+            return null;
+        const providers = this.socialProviders;
+        const title = this.cfg.socialSideTitle || 'Sign in with Your Social Account';
+        return (h("div", { class: "x-login-social-side" }, h("div", { class: "x-login-social-side-header" }, title), h("div", { class: "x-login-social-side-list" }, providers.map(p => (h("x-button", { type: "default", block: true, disabled: this.disabled, onClick: () => this.handleSocialClick(p.name) }, p.icon && (this.isIconUrl(p.icon) ? h("img", { slot: "icon", src: p.icon, alt: "", class: "x-login-social-img-icon" }) : h("x-icon", { slot: "icon", name: p.icon })), p.label || `Login with ${this.capitalize(p.name)}`))))));
+    }
+    /**
+     * Wraps form content in a card, optionally with a social side panel.
+     */
+    renderWrappedCard(formContent) {
+        const isSide = this.socialLayout === 'side' && this.cfg.showSocialLogin;
+        if (isSide) {
+            return (h("div", { class: "x-login-card x-login-card--with-side" }, h("div", { class: "x-login-card-main" }, formContent), this.renderDivider(true), this.renderSocialSidePanel()));
+        }
+        return h("div", { class: "x-login-card" }, formContent);
+    }
+    renderSignUpLink() {
+        if (!this.cfg.showSignUpLink)
+            return null;
+        const { signUpUrl } = this.cfg;
+        return (h("slot", { name: "signup-link" }, h("div", { class: "x-login-signup" }, "Don't have an account?", ' ', h("a", { class: "x-login-link x-login-link--inline", href: signUpUrl || '#', onClick: this.handleSignUp }, "Sign up"))));
+    }
+    renderTerms() {
+        if (!this.cfg.showTerms)
+            return null;
+        const { termsUrl, privacyUrl } = this.cfg;
+        return (h("slot", { name: "terms" }, h("div", { class: "x-login-terms" }, "By clicking continue, you agree to our", ' ', h("a", { class: "x-login-link", href: termsUrl || '#' }, "Terms of Service"), ' ', "and", ' ', h("a", { class: "x-login-link", href: privacyUrl || '#' }, "Privacy Policy"), ".")));
+    }
+    // ========================================
+    // VARIANT RENDERS
+    // ========================================
+    /**
+     * Variant 1: Simple centered login card
+     */
+    renderSimple() {
+        const formContent = [this.renderHeader(), this.renderError(), this.renderFormBuilder(), this.renderSocialButtons(), this.renderSignUpLink()];
+        return (h("div", { class: "x-login-simple" }, h("div", { class: "x-login-simple-inner" }, this.renderWrappedCard(formContent))));
+    }
+    renderSplitImage() {
+        const { coverImage } = this.cfg;
+        const isSide = this.socialLayout === 'side' && this.cfg.showSocialLogin;
+        // The form portion
+        const formContent = (h("div", { class: { 'x-login-split-form-wrapper': true, 'x-login-wrapper--with-side': isSide } }, this.renderHeader(), this.renderError(), h("slot", { name: "form-before" }), this.renderFormBuilder(), h("slot", { name: "form-after" }), this.renderSocialButtons(), this.renderSignUpLink()));
+        return (h("div", { class: "x-login-split-image" }, h("div", { class: "x-login-split-form-side" }, h("div", { class: "x-login-split-brand" }, this.renderBrand()), h("div", { class: "x-login-split-form-center" }, isSide ? (h("div", { class: "x-login-card--with-side" }, h("div", { class: "x-login-card-main" }, formContent), this.renderDivider(true), this.renderSocialSidePanel())) : (formContent))), h("div", { class: "x-login-split-image-side" }, h("slot", { name: "cover-image" }, coverImage && h("img", { src: coverImage, alt: "Cover" })))));
+    }
+    /**
+     * Variant 3: Card on muted background with brand above
+     */
+    renderMutedBg() {
+        const formContent = [
+            this.renderHeader(),
+            this.renderError(),
+            h("slot", { name: "form-before" }),
+            this.renderFormBuilder(),
+            h("slot", { name: "form-after" }),
+            this.renderSocialButtons(),
+            this.renderSignUpLink(),
+        ];
+        return (h("div", { class: "x-login-muted-bg" }, h("div", { class: "x-login-muted-inner" }, this.renderBrand(), this.renderWrappedCard(formContent))));
+    }
+    renderCardImage() {
+        const { coverImage, brandName } = this.cfg;
+        const isSide = this.socialLayout === 'side' && this.cfg.showSocialLogin;
+        const formContent = (h("div", { class: { 'x-login-card-image-form': true, 'x-login-wrapper--with-side': isSide } }, this.renderHeader('Welcome back', `Login to your ${brandName} account`), this.renderError(), h("slot", { name: "form-before" }), this.renderFormBuilder(), h("slot", { name: "form-after" }), this.renderSocialButtons(), this.renderSignUpLink(), this.renderTerms()));
+        return (h("div", { class: "x-login-card-image" }, h("div", { class: { 'x-login-card-image-container': true, 'x-login-container--with-side': isSide } }, h("div", { class: { 'x-login-card-image-grid': true, 'x-login-grid--with-side': isSide } }, h("div", { class: "x-login-card-image-cover" }, h("slot", { name: "cover-image" }, coverImage && h("img", { src: coverImage, alt: "Cover" }))), isSide ? (h("div", { class: "x-login-card--with-side" }, formContent, this.renderDivider(true), this.renderSocialSidePanel())) : (formContent)))));
+    }
+    /**
+     * Variant 5: Email-only minimal login
+     */
+    renderEmailOnly() {
+        const { brandName } = this.cfg;
+        return (h("div", { class: "x-login-email-only" }, h("div", { class: "x-login-email-inner" }, this.renderBrand(), this.renderHeader(`Welcome to ${brandName}`, undefined), this.renderError(), h("slot", { name: "form-before" }), this.renderFormBuilder('Login with Email'), h("slot", { name: "form-after" }), this.renderSocialButtons(), this.renderSignUpLink(), this.renderTerms())));
+    }
+    // ========================================
+    // MAIN RENDER
+    // ========================================
+    render() {
+        let content;
+        switch (this.variant) {
+            case 'split-image':
+                content = this.renderSplitImage();
+                break;
+            case 'muted-bg':
+                content = this.renderMutedBg();
+                break;
+            case 'card-image':
+                content = this.renderCardImage();
+                break;
+            case 'email-only':
+                content = this.renderEmailOnly();
+                break;
+            case 'simple':
+            default:
+                content = this.renderSimple();
+                break;
+        }
+        return (h(Host, { key: 'ce2e6931dcdb6762ed778ce8f04512f71bd652f1', class: {
+                'x-login': true,
+                [`x-login-variant-${this.variant}`]: true,
+                'x-login-loading': this.loading,
+                'x-login-disabled': this.disabled,
+            } }, content));
+    }
+    static get is() { return "x-login"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-login.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-login.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoginVariant",
+                    "resolved": "\"card-image\" | \"email-only\" | \"muted-bg\" | \"simple\" | \"split-image\"",
+                    "references": {
+                        "LoginVariant": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-login/types.ts::LoginVariant",
+                            "referenceLocation": "LoginVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-login variant=\"split-image\"></x-login>"
+                        }],
+                    "text": "Login page layout variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'simple'"
+            },
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LoginConfig",
+                    "resolved": "LoginConfig",
+                    "references": {
+                        "LoginConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-login/types.ts::LoginConfig",
+                            "referenceLocation": "LoginConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-login config={{ brandName: 'My App', showSocialLogin: true }}></x-login>"
+                        }],
+                    "text": "Configuration object for customizing labels, links, and features."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-login loading></x-login>"
+                        }],
+                    "text": "Show loading state on the submit button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-login disabled></x-login>"
+                        }],
+                    "text": "Disable the entire form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-login error=\"Invalid email or password\"></x-login>"
+                        }],
+                    "text": "Error message to display (e.g., \"Invalid credentials\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error",
+                "defaultValue": "''"
+            },
+            "formSchema": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Schema",
+                    "resolved": "Schema",
+                    "references": {
+                        "Schema": {
+                            "location": "import",
+                            "path": "../x-form-builder/types",
+                            "id": "src/components/x-form-builder/types/index.ts::Schema",
+                            "referenceLocation": "Schema"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-login formSchema={myCustomSchema}></x-login>"
+                        }],
+                    "text": "Optional custom form schema for x-form-builder.\nIf not provided, a default login schema is generated from the config."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "email": {},
+            "password": {},
+            "rememberMe": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xSubmit",
+                "name": "xSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-login onXSubmit={(ev) => console.log(ev.detail)}></x-login>"
+                        }],
+                    "text": "Emitted when the login form is submitted."
+                },
+                "complexType": {
+                    "original": "LoginSubmitEventDetail",
+                    "resolved": "LoginSubmitEventDetail",
+                    "references": {
+                        "LoginSubmitEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-login/types.ts::LoginSubmitEventDetail",
+                            "referenceLocation": "LoginSubmitEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xSocialLogin",
+                "name": "xSocialLogin",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-login onXSocialLogin={(ev) => console.log(ev.detail.provider)}></x-login>"
+                        }],
+                    "text": "Emitted when a social login button is clicked."
+                },
+                "complexType": {
+                    "original": "LoginSocialEventDetail",
+                    "resolved": "LoginSocialEventDetail",
+                    "references": {
+                        "LoginSocialEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-login/types.ts::LoginSocialEventDetail",
+                            "referenceLocation": "LoginSocialEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xForgotPassword",
+                "name": "xForgotPassword",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-login onXForgotPassword={() => navigateTo('/forgot')}></x-login>"
+                        }],
+                    "text": "Emitted when \"Forgot password?\" is clicked (if no forgotPasswordUrl is set)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xSignUp",
+                "name": "xSignUp",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-login onXSignUp={() => navigateTo('/register')}></x-login>"
+                        }],
+                    "text": "Emitted when \"Sign up\" link is clicked (if no signUpUrl is set)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}