@descope/angular-sdk 0.22.3 → 0.23.1

package/dist/fesm2022/descope-angular-sdk.mjs

@@ -1,16 +1,10 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, EventEmitter, Component, CUSTOM_ELEMENTS_SCHEMA, ViewChild, Input, Output, NgModule, Optional, SkipSelf } from '@angular/core';
+import { Injectable, inject, EventEmitter, PLATFORM_ID, Component, CUSTOM_ELEMENTS_SCHEMA, Inject, ViewChild, Input, Output, Directive, NgModule, Optional, SkipSelf } from '@angular/core';
 import createSdk from '@descope/web-js-sdk';
 import { from, BehaviorSubject, finalize, tap, of, throwError } from 'rxjs';
 import { Router } from '@angular/router';
 import { switchMap, catchError } from 'rxjs/operators';
-import DescopeWc from '@descope/web-component';
-import DescopeUserManagementWidget from '@descope/user-management-widget';
-import DescopeRoleManagementWidget from '@descope/role-management-widget';
-import DescopeAccessKeyManagementWidget from '@descope/access-key-management-widget';
-import DescopeAuditManagementWidget from '@descope/audit-management-widget';
-import DescopeUserProfileWidget from '@descope/user-profile-widget';
-import DescopeApplicationsPortalWidget from '@descope/applications-portal-widget';
+import { isPlatformBrowser } from '@angular/common';
 
 function observabilify(value) {
     /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -39,7 +33,7 @@ function observabilify(value) {
 }
 
 const environment = {
-    buildVersion: '0.22.3'
+    buildVersion: '0.23.1'
 };
 
 const baseHeaders = {
@@ -288,12 +282,14 @@ class DescopeComponent {
             return undefined;
         }
     }
-    constructor(elementRef, authService, descopeConfig) {
+    constructor(elementRef, authService, descopeConfig, platformId) {
         this.elementRef = elementRef;
         this.authService = authService;
+        this.platformId = platformId;
         this.success = new EventEmitter();
         this.error = new EventEmitter();
         this.ready = new EventEmitter();
+        this.isWebComponentLoaded = false;
         this.projectId = descopeConfig.projectId;
         this.baseUrl = descopeConfig.baseUrl;
         this.baseStaticUrl = descopeConfig.baseStaticUrl;
@@ -301,28 +297,48 @@ class DescopeComponent {
         this.storeLastAuthenticatedUser = descopeConfig.storeLastAuthenticatedUser;
         this.customStorage = descopeConfig.customStorage;
     }
-    ngOnInit() {
-        const sdk = this.authService.descopeSdk;
-        DescopeWc.sdkConfigOverrides = {
-            // Overrides the web-component's base headers to indicate usage via the React SDK
-            baseHeaders,
-            // Disables token persistence within the web-component to delegate token management
-            // to the global SDK hooks. This ensures token handling aligns with the SDK's configuration,
-            // and web-component requests leverage the global SDK's beforeRequest hooks for consistency
-            persistTokens: false,
-            hooks: {
-                get beforeRequest() {
-                    // Retrieves the beforeRequest hook from the global SDK, which is initialized
-                    // within the AuthProvider using the desired configuration. This approach ensures
-                    // the web-component utilizes the same beforeRequest hooks as the global SDK
-                    return sdk.httpClient.hooks?.beforeRequest;
-                },
-                set beforeRequest(_) {
-                    // The empty setter prevents runtime errors when attempts are made to assign a value to 'beforeRequest'.
-                    // JavaScript objects default to having both getters and setters
+    async ngOnInit() {
+        // Only load web component in browser environment
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        await this.loadWebComponent();
+    }
+    async loadWebComponent() {
+        if (this.isWebComponentLoaded) {
+            return;
+        }
+        try {
+            // Dynamically import the web component only in browser context
+            const DescopeWcModule = await import('@descope/web-component');
+            const DescopeWc = DescopeWcModule.default;
+            const sdk = this.authService.descopeSdk;
+            DescopeWc.sdkConfigOverrides = {
+                // Overrides the web-component's base headers to indicate usage via the Angular SDK
+                baseHeaders,
+                // Disables token persistence within the web-component to delegate token management
+                // to the global SDK hooks. This ensures token handling aligns with the SDK's configuration,
+                // and web-component requests leverage the global SDK's beforeRequest hooks for consistency
+                persistTokens: false,
+                hooks: {
+                    get beforeRequest() {
+                        // Retrieves the beforeRequest hook from the global SDK, which is initialized
+                        // within the AuthProvider using the desired configuration. This approach ensures
+                        // the web-component utilizes the same beforeRequest hooks as the global SDK
+                        return sdk.httpClient.hooks?.beforeRequest;
+                    },
+                    set beforeRequest(_) {
+                        // The empty setter prevents runtime errors when attempts are made to assign a value to 'beforeRequest'.
+                        // JavaScript objects default to having both getters and setters
+                    }
                 }
-            }
-        };
+            };
+            this.isWebComponentLoaded = true;
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to load Descope web component:', error);
+        }
     }
     ngAfterViewInit() {
         if (!this.descopeWc?.nativeElement)
@@ -373,7 +389,7 @@ class DescopeComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DescopeComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthService }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DescopeComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthService }, { token: DescopeAuthConfig }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: DescopeComponent, isStandalone: true, selector: "descope[flowId]", inputs: { flowId: "flowId", locale: "locale", theme: "theme", tenant: "tenant", telemetryKey: "telemetryKey", redirectUrl: "redirectUrl", autoFocus: "autoFocus", validateOnBlur: "validateOnBlur", restartOnError: "restartOnError", debug: "debug", errorTransformer: "errorTransformer", onScreenUpdate: "onScreenUpdate", client: "client", nonce: "nonce", dismissScreenErrorOnInput: "dismissScreenErrorOnInput", form: "form", logger: "logger", styleId: "styleId", popupOrigin: "popupOrigin" }, outputs: { success: "success", error: "error", ready: "ready" }, viewQueries: [{ propertyName: "descopeWc", first: true, predicate: ["descopeWc"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <descope-wc
       #descopeWc
@@ -440,7 +456,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
     </descope-wc>
   `
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthService }, { type: DescopeAuthConfig }], propDecorators: { descopeWc: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthService }, { type: DescopeAuthConfig }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { descopeWc: [{
                 type: ViewChild,
                 args: ['descopeWc']
             }], flowId: [{
@@ -645,27 +664,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }] } });
 
-class UserManagementComponent {
-    constructor(elementRef, descopeConfig) {
+/**
+ * Abstract base class for widget components that need to be lazily loaded
+ * with SSR support. This class handles the common lifecycle patterns:
+ * - Browser detection for SSR compatibility
+ * - Lazy loading of widgets
+ * - DOM manipulation (appending to element)
+ * - Lifecycle coordination between loading, setup, and event listeners
+ *
+ * Derived components must implement:
+ * - loadWidget(): Dynamic import and instantiation of the specific widget
+ * - setupWebComponent(): Configure attributes and properties on the widget
+ * - setupEventListeners(): Attach event listeners to the widget
+ */
+class BaseLazyWidgetComponent {
+    constructor(elementRef, platformId) {
         this.elementRef = elementRef;
+        this.platformId = platformId;
+    }
+    async ngOnInit() {
+        // Only load widget in browser environment
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const widget = await this.loadWidget();
+        if (widget) {
+            this.webComponent = widget;
+            this.setupWebComponent();
+            this.elementRef.nativeElement.appendChild(this.webComponent);
+            // Set up event listeners after the widget is loaded and appended
+            this.setupEventListeners();
+        }
+    }
+    ngOnChanges() {
+        if (this.webComponent) {
+            this.setupWebComponent();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BaseLazyWidgetComponent, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: BaseLazyWidgetComponent, isStandalone: true, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BaseLazyWidgetComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+class UserManagementComponent extends BaseLazyWidgetComponent {
+    constructor(elementRef, descopeConfig, platformId) {
+        super(elementRef, platformId);
         this.ready = new EventEmitter();
-        this.webComponent = new DescopeUserManagementWidget();
         this.projectId = descopeConfig.projectId;
         this.baseUrl = descopeConfig.baseUrl;
         this.baseStaticUrl = descopeConfig.baseStaticUrl;
         this.baseCdnUrl = descopeConfig.baseCdnUrl;
     }
-    ngOnInit() {
-        this.setupWebComponent();
-        this.elementRef.nativeElement.appendChild(this.webComponent);
-    }
-    ngOnChanges() {
-        this.setupWebComponent();
-    }
-    ngAfterViewInit() {
-        this.setupEventListeners();
+    async loadWidget() {
+        try {
+            const WidgetModule = await import('@descope/user-management-widget');
+            const DescopeUserManagementWidget = WidgetModule.default;
+            return new DescopeUserManagementWidget();
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to load User Management widget:', error);
+            return null;
+        }
     }
     setupWebComponent() {
+        if (!this.webComponent)
+            return;
         this.webComponent.setAttribute('project-id', this.projectId);
         this.webComponent.setAttribute('tenant', this.tenant);
         this.webComponent.setAttribute('widget-id', this.widgetId);
@@ -692,14 +761,16 @@ class UserManagementComponent {
         }
     }
     setupEventListeners() {
+        if (!this.webComponent)
+            return;
         if (this.ready) {
             this.webComponent.addEventListener('ready', () => {
                 this.ready?.emit();
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UserManagementComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: UserManagementComponent, isStandalone: true, selector: "user-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { ready: "ready" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UserManagementComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: UserManagementComponent, isStandalone: true, selector: "user-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { ready: "ready" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UserManagementComponent, decorators: [{
             type: Component,
@@ -709,7 +780,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     template: ''
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }], propDecorators: { tenant: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { tenant: [{
                 type: Input
             }], widgetId: [{
                 type: Input
@@ -725,27 +799,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }] } });
 
-class RoleManagementComponent {
-    constructor(elementRef, descopeConfig) {
-        this.elementRef = elementRef;
+class RoleManagementComponent extends BaseLazyWidgetComponent {
+    constructor(elementRef, descopeConfig, platformId) {
+        super(elementRef, platformId);
         this.ready = new EventEmitter();
-        this.webComponent = new DescopeRoleManagementWidget();
         this.projectId = descopeConfig.projectId;
         this.baseUrl = descopeConfig.baseUrl;
         this.baseStaticUrl = descopeConfig.baseStaticUrl;
         this.baseCdnUrl = descopeConfig.baseCdnUrl;
     }
-    ngOnInit() {
-        this.setupWebComponent();
-        this.elementRef.nativeElement.appendChild(this.webComponent);
-    }
-    ngOnChanges() {
-        this.setupWebComponent();
-    }
-    ngAfterViewInit() {
-        this.setupEventListeners();
+    async loadWidget() {
+        try {
+            const WidgetModule = await import('@descope/role-management-widget');
+            const DescopeRoleManagementWidget = WidgetModule.default;
+            return new DescopeRoleManagementWidget();
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to load Role Management widget:', error);
+            return null;
+        }
     }
     setupWebComponent() {
+        if (!this.webComponent)
+            return;
         this.webComponent.setAttribute('project-id', this.projectId);
         this.webComponent.setAttribute('tenant', this.tenant);
         this.webComponent.setAttribute('widget-id', this.widgetId);
@@ -772,14 +849,16 @@ class RoleManagementComponent {
         }
     }
     setupEventListeners() {
+        if (!this.webComponent)
+            return;
         if (this.ready) {
             this.webComponent.addEventListener('ready', () => {
                 this.ready?.emit();
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RoleManagementComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: RoleManagementComponent, isStandalone: true, selector: "role-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { ready: "ready" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RoleManagementComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: RoleManagementComponent, isStandalone: true, selector: "role-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { ready: "ready" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RoleManagementComponent, decorators: [{
             type: Component,
@@ -789,7 +868,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     template: ''
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }], propDecorators: { tenant: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { tenant: [{
                 type: Input
             }], widgetId: [{
                 type: Input
@@ -805,27 +887,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }] } });
 
-class AccessKeyManagementComponent {
-    constructor(elementRef, descopeConfig) {
-        this.elementRef = elementRef;
+class AccessKeyManagementComponent extends BaseLazyWidgetComponent {
+    constructor(elementRef, descopeConfig, platformId) {
+        super(elementRef, platformId);
         this.ready = new EventEmitter();
-        this.webComponent = new DescopeAccessKeyManagementWidget();
         this.projectId = descopeConfig.projectId;
         this.baseUrl = descopeConfig.baseUrl;
         this.baseStaticUrl = descopeConfig.baseStaticUrl;
         this.baseCdnUrl = descopeConfig.baseCdnUrl;
     }
-    ngOnInit() {
-        this.setupWebComponent();
-        this.elementRef.nativeElement.appendChild(this.webComponent);
-    }
-    ngOnChanges() {
-        this.setupWebComponent();
-    }
-    ngAfterViewInit() {
-        this.setupEventListeners();
+    async loadWidget() {
+        try {
+            const WidgetModule = await import('@descope/access-key-management-widget');
+            const DescopeAccessKeyManagementWidget = WidgetModule.default;
+            return new DescopeAccessKeyManagementWidget();
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to load Access Key Management widget:', error);
+            return null;
+        }
     }
     setupWebComponent() {
+        if (!this.webComponent)
+            return;
         this.webComponent.setAttribute('project-id', this.projectId);
         this.webComponent.setAttribute('tenant', this.tenant);
         this.webComponent.setAttribute('widget-id', this.widgetId);
@@ -849,14 +934,16 @@ class AccessKeyManagementComponent {
         }
     }
     setupEventListeners() {
+        if (!this.webComponent)
+            return;
         if (this.ready) {
             this.webComponent.addEventListener('ready', () => {
                 this.ready?.emit();
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AccessKeyManagementComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AccessKeyManagementComponent, isStandalone: true, selector: "access-key-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { ready: "ready" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AccessKeyManagementComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AccessKeyManagementComponent, isStandalone: true, selector: "access-key-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { ready: "ready" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AccessKeyManagementComponent, decorators: [{
             type: Component,
@@ -866,7 +953,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     template: ''
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }], propDecorators: { tenant: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { tenant: [{
                 type: Input
             }], widgetId: [{
                 type: Input
@@ -882,27 +972,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }] } });
 
-class AuditManagementComponent {
-    constructor(elementRef, descopeConfig) {
-        this.elementRef = elementRef;
+class AuditManagementComponent extends BaseLazyWidgetComponent {
+    constructor(elementRef, descopeConfig, platformId) {
+        super(elementRef, platformId);
         this.ready = new EventEmitter();
-        this.webComponent = new DescopeAuditManagementWidget();
         this.projectId = descopeConfig.projectId;
         this.baseUrl = descopeConfig.baseUrl;
         this.baseStaticUrl = descopeConfig.baseStaticUrl;
         this.baseCdnUrl = descopeConfig.baseCdnUrl;
     }
-    ngOnInit() {
-        this.setupWebComponent();
-        this.elementRef.nativeElement.appendChild(this.webComponent);
-    }
-    ngOnChanges() {
-        this.setupWebComponent();
-    }
-    ngAfterViewInit() {
-        this.setupEventListeners();
+    async loadWidget() {
+        try {
+            const WidgetModule = await import('@descope/audit-management-widget');
+            const DescopeAuditManagementWidget = WidgetModule.default;
+            return new DescopeAuditManagementWidget();
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to load Audit Management widget:', error);
+            return null;
+        }
     }
     setupWebComponent() {
+        if (!this.webComponent)
+            return;
         this.webComponent.setAttribute('project-id', this.projectId);
         this.webComponent.setAttribute('tenant', this.tenant);
         this.webComponent.setAttribute('widget-id', this.widgetId);
@@ -929,14 +1022,16 @@ class AuditManagementComponent {
         }
     }
     setupEventListeners() {
+        if (!this.webComponent)
+            return;
         if (this.ready) {
             this.webComponent.addEventListener('ready', () => {
                 this.ready?.emit();
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AuditManagementComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AuditManagementComponent, isStandalone: true, selector: "audit-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { ready: "ready" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AuditManagementComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: AuditManagementComponent, isStandalone: true, selector: "audit-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { ready: "ready" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AuditManagementComponent, decorators: [{
             type: Component,
@@ -946,7 +1041,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     template: ''
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }], propDecorators: { tenant: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { tenant: [{
                 type: Input
             }], widgetId: [{
                 type: Input
@@ -962,29 +1060,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }] } });
 
-class UserProfileComponent {
-    constructor(elementRef, descopeConfig, descopeAuthService) {
-        this.elementRef = elementRef;
+class UserProfileComponent extends BaseLazyWidgetComponent {
+    constructor(elementRef, descopeConfig, descopeAuthService, platformId) {
+        super(elementRef, platformId);
         this.descopeAuthService = descopeAuthService;
         this.logout = new EventEmitter();
         this.ready = new EventEmitter();
-        this.webComponent = new DescopeUserProfileWidget();
         this.projectId = descopeConfig.projectId;
         this.baseUrl = descopeConfig.baseUrl;
         this.baseStaticUrl = descopeConfig.baseStaticUrl;
         this.baseCdnUrl = descopeConfig.baseCdnUrl;
     }
-    ngOnInit() {
-        this.setupWebComponent();
-        this.elementRef.nativeElement.appendChild(this.webComponent);
-    }
-    ngOnChanges() {
-        this.setupWebComponent();
-    }
-    ngAfterViewInit() {
-        this.setupEventListeners();
+    async loadWidget() {
+        try {
+            const WidgetModule = await import('@descope/user-profile-widget');
+            const DescopeUserProfileWidget = WidgetModule.default;
+            return new DescopeUserProfileWidget();
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to load User Profile widget:', error);
+            return null;
+        }
     }
     setupWebComponent() {
+        if (!this.webComponent)
+            return;
         this.webComponent.setAttribute('project-id', this.projectId);
         this.webComponent.setAttribute('widget-id', this.widgetId);
         if (this.baseUrl) {
@@ -1010,6 +1111,8 @@ class UserProfileComponent {
         }
     }
     setupEventListeners() {
+        if (!this.webComponent)
+            return;
         this.webComponent.addEventListener('logout', (e) => {
             this.logout?.emit(e);
             this.descopeAuthService.setSession('');
@@ -1022,8 +1125,8 @@ class UserProfileComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UserProfileComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }, { token: DescopeAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: UserProfileComponent, isStandalone: true, selector: "user-profile", inputs: { widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { logout: "logout", ready: "ready" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UserProfileComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }, { token: DescopeAuthService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: UserProfileComponent, isStandalone: true, selector: "user-profile", inputs: { widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { logout: "logout", ready: "ready" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
@@ -1032,7 +1135,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     standalone: true,
                     template: ''
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }, { type: DescopeAuthService }], propDecorators: { widgetId: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }, { type: DescopeAuthService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { widgetId: [{
                 type: Input
             }], theme: [{
                 type: Input
@@ -1048,28 +1154,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }] } });
 
-class ApplicationsPortalComponent {
-    constructor(elementRef, descopeConfig) {
-        this.elementRef = elementRef;
+class ApplicationsPortalComponent extends BaseLazyWidgetComponent {
+    constructor(elementRef, descopeConfig, platformId) {
+        super(elementRef, platformId);
         this.logout = new EventEmitter();
         this.ready = new EventEmitter();
-        this.webComponent = new DescopeApplicationsPortalWidget();
         this.projectId = descopeConfig.projectId;
         this.baseUrl = descopeConfig.baseUrl;
         this.baseStaticUrl = descopeConfig.baseStaticUrl;
         this.baseCdnUrl = descopeConfig.baseCdnUrl;
     }
-    ngOnInit() {
-        this.setupWebComponent();
-        this.elementRef.nativeElement.appendChild(this.webComponent);
-    }
-    ngOnChanges() {
-        this.setupWebComponent();
-    }
-    ngAfterViewInit() {
-        this.setupEventListeners();
+    async loadWidget() {
+        try {
+            const WidgetModule = await import('@descope/applications-portal-widget');
+            const DescopeApplicationsPortalWidget = WidgetModule.default;
+            return new DescopeApplicationsPortalWidget();
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Failed to load Applications Portal widget:', error);
+            return null;
+        }
     }
     setupWebComponent() {
+        if (!this.webComponent)
+            return;
         this.webComponent.setAttribute('project-id', this.projectId);
         this.webComponent.setAttribute('widget-id', this.widgetId);
         if (this.baseUrl) {
@@ -1095,6 +1204,8 @@ class ApplicationsPortalComponent {
         }
     }
     setupEventListeners() {
+        if (!this.webComponent)
+            return;
         if (this.logout) {
             this.webComponent.addEventListener('logout', (e) => {
                 this.logout?.emit(e);
@@ -1106,8 +1217,8 @@ class ApplicationsPortalComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ApplicationsPortalComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ApplicationsPortalComponent, isStandalone: true, selector: "applications-portal", inputs: { widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { logout: "logout", ready: "ready" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ApplicationsPortalComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ApplicationsPortalComponent, isStandalone: true, selector: "applications-portal", inputs: { widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { logout: "logout", ready: "ready" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ApplicationsPortalComponent, decorators: [{
             type: Component,
@@ -1116,7 +1227,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     standalone: true,
                     template: ''
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }], propDecorators: { widgetId: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { widgetId: [{
                 type: Input
             }], theme: [{
                 type: Input