@descope/angular-sdk 0.0.0-next-5d0760a4-20240722 → 0.0.0-next-0e292820-20250415

package/{fesm2022 → dist/fesm2022}/descope-angular-sdk.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, EventEmitter, Component, Input, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA, Optional, SkipSelf } from '@angular/core';
 import createSdk from '@descope/web-js-sdk';
-import { from, BehaviorSubject, tap, finalize, of, throwError } from 'rxjs';
+import { from, BehaviorSubject, finalize, tap, of, throwError } from 'rxjs';
 import { Router } from '@angular/router';
 import { switchMap, catchError } from 'rxjs/operators';
 import DescopeWebComponent from '@descope/web-component';
@@ -10,6 +10,7 @@ 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';
 
 function observabilify(value) {
     /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -38,7 +39,7 @@ function observabilify(value) {
 }
 
 const environment = {
-    buildVersion: '0.0.0-next-5d0760a4-20240722'
+    buildVersion: '0.14.11'
 };
 
 const baseHeaders = {
@@ -73,6 +74,7 @@ class DescopeAuthService {
         });
         this.user$ = this.userSubject.asObservable();
         this.descopeSdk.onSessionTokenChange(this.setSession.bind(this));
+        this.descopeSdk.onIsAuthenticatedChange(this.setIsAuthenticated.bind(this));
         this.descopeSdk.onUserChange(this.setUser.bind(this));
     }
     refreshSession() {
@@ -81,23 +83,7 @@ class DescopeAuthService {
             ...beforeRefreshSession,
             isSessionLoading: true
         });
-        return this.descopeSdk.refresh().pipe(tap((data) => {
-            const afterRequestSession = this.sessionSubject.value;
-            if (data.ok && data.data) {
-                this.sessionSubject.next({
-                    ...afterRequestSession,
-                    sessionToken: data.data.sessionJwt,
-                    isAuthenticated: !!data.data.sessionJwt
-                });
-            }
-            else {
-                this.sessionSubject.next({
-                    ...afterRequestSession,
-                    sessionToken: '',
-                    isAuthenticated: false
-                });
-            }
-        }), finalize(() => {
+        return this.descopeSdk.refresh().pipe(finalize(() => {
             const afterRefreshSession = this.sessionSubject.value;
             this.sessionSubject.next({
                 ...afterRefreshSession,
@@ -178,9 +164,15 @@ class DescopeAuthService {
     setSession(sessionToken) {
         const currentSession = this.sessionSubject.value;
         this.sessionSubject.next({
-            sessionToken,
-            isAuthenticated: !!sessionToken,
-            isSessionLoading: currentSession.isSessionLoading
+            ...currentSession,
+            sessionToken
+        });
+    }
+    setIsAuthenticated(isAuthenticated) {
+        const currentSession = this.sessionSubject.value;
+        this.sessionSubject.next({
+            ...currentSession,
+            isAuthenticated
         });
     }
     setUser(user) {
@@ -190,15 +182,15 @@ class DescopeAuthService {
             user
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DescopeAuthService, deps: [{ token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DescopeAuthService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DescopeAuthService, deps: [{ token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DescopeAuthService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DescopeAuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DescopeAuthService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: DescopeAuthConfig }]; } });
+        }], ctorParameters: () => [{ type: DescopeAuthConfig }] });
 
 const descopeAuthGuard = (route) => {
     const authService = inject(DescopeAuthService);
@@ -268,11 +260,13 @@ class DescopeComponent {
         this.projectId = descopeConfig.projectId;
         this.baseUrl = descopeConfig.baseUrl;
         this.baseStaticUrl = descopeConfig.baseStaticUrl;
+        this.baseCdnUrl = descopeConfig.baseCdnUrl;
         this.storeLastAuthenticatedUser = descopeConfig.storeLastAuthenticatedUser;
     }
     ngOnInit() {
         const sdk = this.authService.descopeSdk; // Capture the class context in a variable
-        DescopeWebComponent.sdkConfigOverrides = {
+        const WebComponent = customElements?.get('descope-wc') || DescopeWebComponent;
+        WebComponent.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
@@ -307,6 +301,9 @@ class DescopeComponent {
         if (this.baseStaticUrl) {
             this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
         }
+        if (this.baseCdnUrl) {
+            this.webComponent.setAttribute('base-cdn-url', this.baseCdnUrl);
+        }
         if (this.storeLastAuthenticatedUser) {
             this.webComponent.setAttribute('store-last-authenticated-user', this.storeLastAuthenticatedUser.toString());
         }
@@ -328,15 +325,33 @@ class DescopeComponent {
         if (this.autoFocus) {
             this.webComponent.setAttribute('auto-focus', this.autoFocus.toString());
         }
+        if (this.validateOnBlur) {
+            this.webComponent.setAttribute('validate-on-blur', this.validateOnBlur.toString());
+        }
+        if (this.restartOnError) {
+            this.webComponent.setAttribute('restart-on-error', this.restartOnError.toString());
+        }
         if (this.debug) {
             this.webComponent.setAttribute('debug', this.debug.toString());
         }
+        if (this.styleId) {
+            this.webComponent.setAttribute('style-id', this.styleId);
+        }
         if (this.errorTransformer) {
             this.webComponent.errorTransformer = this.errorTransformer;
         }
+        if (this.onScreenUpdate) {
+            this.webComponent.onScreenUpdate = this.onScreenUpdate;
+        }
         if (this.client) {
             this.webComponent.setAttribute('client', JSON.stringify(this.client));
         }
+        if (this.nonce) {
+            this.webComponent.setAttribute('nonce', JSON.stringify(this.nonce));
+        }
+        if (this.dismissScreenErrorOnInput) {
+            this.webComponent.setAttribute('dismiss-screen-error-on-input', JSON.stringify(this.dismissScreenErrorOnInput));
+        }
         if (this.form) {
             this.webComponent.setAttribute('form', JSON.stringify(this.form));
         }
@@ -363,17 +378,17 @@ class DescopeComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DescopeComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthService }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: DescopeComponent, isStandalone: true, selector: "descope[flowId]", inputs: { flowId: "flowId", locale: "locale", theme: "theme", tenant: "tenant", telemetryKey: "telemetryKey", redirectUrl: "redirectUrl", autoFocus: "autoFocus", debug: "debug", errorTransformer: "errorTransformer", client: "client", form: "form", logger: "logger" }, outputs: { success: "success", error: "error", ready: "ready" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DescopeComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthService }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", 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" }, outputs: { success: "success", error: "error", ready: "ready" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DescopeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DescopeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'descope[flowId]',
                     standalone: true,
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DescopeAuthService }, { type: DescopeAuthConfig }]; }, propDecorators: { flowId: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthService }, { type: DescopeAuthConfig }], propDecorators: { flowId: [{
                 type: Input
             }], locale: [{
                 type: Input
@@ -387,16 +402,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], autoFocus: [{
                 type: Input
+            }], validateOnBlur: [{
+                type: Input
+            }], restartOnError: [{
+                type: Input
             }], debug: [{
                 type: Input
             }], errorTransformer: [{
                 type: Input
+            }], onScreenUpdate: [{
+                type: Input
             }], client: [{
                 type: Input
+            }], nonce: [{
+                type: Input
+            }], dismissScreenErrorOnInput: [{
+                type: Input
             }], form: [{
                 type: Input
             }], logger: [{
                 type: Input
+            }], styleId: [{
+                type: Input
             }], success: [{
                 type: Output
             }], error: [{
@@ -411,13 +438,13 @@ class SignInFlowComponent {
         this.error = new EventEmitter();
         this.projectId = descopeConfig.projectId;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SignInFlowComponent, deps: [{ token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SignInFlowComponent, isStandalone: true, selector: "descope-sign-in-flow", inputs: { locale: "locale", theme: "theme", tenant: "tenant", telemetryKey: "telemetryKey", redirectUrl: "redirectUrl", autoFocus: "autoFocus", debug: "debug", errorTransformer: "errorTransformer", client: "client", form: "form", logger: "logger" }, outputs: { success: "success", error: "error" }, ngImport: i0, template: "<descope\n\t(success)=\"success.emit($event)\"\n\t(error)=\"error.emit($event)\"\n\tflowId=\"sign-in\"\n\t[locale]=\"locale\"\n\t[theme]=\"theme\"\n\t[tenant]=\"tenant\"\n\t[telemetryKey]=\"telemetryKey\"\n\t[redirectUrl]=\"redirectUrl\"\n\t[autoFocus]=\"autoFocus\"\n\t[debug]=\"debug\"\n\t[errorTransformer]=\"errorTransformer\"\n\t[client]=\"client\"\n\t[form]=\"form\"\n\t[logger]=\"logger\"\n>\n</descope>\n", dependencies: [{ kind: "component", type: DescopeComponent, selector: "descope[flowId]", inputs: ["flowId", "locale", "theme", "tenant", "telemetryKey", "redirectUrl", "autoFocus", "debug", "errorTransformer", "client", "form", "logger"], outputs: ["success", "error", "ready"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SignInFlowComponent, deps: [{ token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: SignInFlowComponent, isStandalone: true, selector: "descope-sign-in-flow", inputs: { 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" }, outputs: { success: "success", error: "error" }, ngImport: i0, template: "<descope\n  (success)=\"success.emit($event)\"\n  (error)=\"error.emit($event)\"\n  flowId=\"sign-in\"\n  [locale]=\"locale\"\n  [theme]=\"theme\"\n  [tenant]=\"tenant\"\n  [telemetryKey]=\"telemetryKey\"\n  [redirectUrl]=\"redirectUrl\"\n  [autoFocus]=\"autoFocus\"\n  [validateOnBlur]=\"validateOnBlur\"\n  [restartOnError]=\"restartOnError\"\n  [debug]=\"debug\"\n  [errorTransformer]=\"errorTransformer\"\n  [onScreenUpdate]=\"onScreenUpdate\"\n  [client]=\"client\"\n  [nonce]=\"nonce\"\n  [dismissScreenErrorOnInput]=\"dismissScreenErrorOnInput\"\n  [form]=\"form\"\n  [logger]=\"logger\"\n  [styleId]=\"styleId\"\n>\n</descope>\n", dependencies: [{ kind: "component", type: DescopeComponent, selector: "descope[flowId]", inputs: ["flowId", "locale", "theme", "tenant", "telemetryKey", "redirectUrl", "autoFocus", "validateOnBlur", "restartOnError", "debug", "errorTransformer", "onScreenUpdate", "client", "nonce", "dismissScreenErrorOnInput", "form", "logger", "styleId"], outputs: ["success", "error", "ready"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SignInFlowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SignInFlowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'descope-sign-in-flow', standalone: true, imports: [DescopeComponent], template: "<descope\n\t(success)=\"success.emit($event)\"\n\t(error)=\"error.emit($event)\"\n\tflowId=\"sign-in\"\n\t[locale]=\"locale\"\n\t[theme]=\"theme\"\n\t[tenant]=\"tenant\"\n\t[telemetryKey]=\"telemetryKey\"\n\t[redirectUrl]=\"redirectUrl\"\n\t[autoFocus]=\"autoFocus\"\n\t[debug]=\"debug\"\n\t[errorTransformer]=\"errorTransformer\"\n\t[client]=\"client\"\n\t[form]=\"form\"\n\t[logger]=\"logger\"\n>\n</descope>\n" }]
-        }], ctorParameters: function () { return [{ type: DescopeAuthConfig }]; }, propDecorators: { locale: [{
+            args: [{ selector: 'descope-sign-in-flow', standalone: true, imports: [DescopeComponent], template: "<descope\n  (success)=\"success.emit($event)\"\n  (error)=\"error.emit($event)\"\n  flowId=\"sign-in\"\n  [locale]=\"locale\"\n  [theme]=\"theme\"\n  [tenant]=\"tenant\"\n  [telemetryKey]=\"telemetryKey\"\n  [redirectUrl]=\"redirectUrl\"\n  [autoFocus]=\"autoFocus\"\n  [validateOnBlur]=\"validateOnBlur\"\n  [restartOnError]=\"restartOnError\"\n  [debug]=\"debug\"\n  [errorTransformer]=\"errorTransformer\"\n  [onScreenUpdate]=\"onScreenUpdate\"\n  [client]=\"client\"\n  [nonce]=\"nonce\"\n  [dismissScreenErrorOnInput]=\"dismissScreenErrorOnInput\"\n  [form]=\"form\"\n  [logger]=\"logger\"\n  [styleId]=\"styleId\"\n>\n</descope>\n" }]
+        }], ctorParameters: () => [{ type: DescopeAuthConfig }], propDecorators: { locale: [{
                 type: Input
             }], theme: [{
                 type: Input
@@ -429,16 +456,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], autoFocus: [{
                 type: Input
+            }], validateOnBlur: [{
+                type: Input
+            }], restartOnError: [{
+                type: Input
             }], debug: [{
                 type: Input
             }], errorTransformer: [{
                 type: Input
+            }], onScreenUpdate: [{
+                type: Input
             }], client: [{
                 type: Input
+            }], nonce: [{
+                type: Input
+            }], dismissScreenErrorOnInput: [{
+                type: Input
             }], form: [{
                 type: Input
             }], logger: [{
                 type: Input
+            }], styleId: [{
+                type: Input
             }], success: [{
                 type: Output
             }], error: [{
@@ -451,13 +490,13 @@ class SignUpFlowComponent {
         this.error = new EventEmitter();
         this.projectId = descopeConfig.projectId;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SignUpFlowComponent, deps: [{ token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SignUpFlowComponent, isStandalone: true, selector: "descope-sign-up-flow", inputs: { locale: "locale", theme: "theme", tenant: "tenant", telemetryKey: "telemetryKey", redirectUrl: "redirectUrl", autoFocus: "autoFocus", debug: "debug", errorTransformer: "errorTransformer", client: "client", form: "form", logger: "logger" }, outputs: { success: "success", error: "error" }, ngImport: i0, template: "<descope\n\t(success)=\"success.emit($event)\"\n\t(error)=\"error.emit($event)\"\n\tflowId=\"sign-up\"\n\t[locale]=\"locale\"\n\t[theme]=\"theme\"\n\t[tenant]=\"tenant\"\n\t[telemetryKey]=\"telemetryKey\"\n\t[redirectUrl]=\"redirectUrl\"\n\t[autoFocus]=\"autoFocus\"\n\t[debug]=\"debug\"\n\t[errorTransformer]=\"errorTransformer\"\n\t[client]=\"client\"\n\t[form]=\"form\"\n\t[logger]=\"logger\"\n>\n</descope>\n", dependencies: [{ kind: "component", type: DescopeComponent, selector: "descope[flowId]", inputs: ["flowId", "locale", "theme", "tenant", "telemetryKey", "redirectUrl", "autoFocus", "debug", "errorTransformer", "client", "form", "logger"], outputs: ["success", "error", "ready"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SignUpFlowComponent, deps: [{ token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: SignUpFlowComponent, isStandalone: true, selector: "descope-sign-up-flow", inputs: { 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" }, outputs: { success: "success", error: "error" }, ngImport: i0, template: "<descope\n  (success)=\"success.emit($event)\"\n  (error)=\"error.emit($event)\"\n  flowId=\"sign-up\"\n  [locale]=\"locale\"\n  [theme]=\"theme\"\n  [tenant]=\"tenant\"\n  [telemetryKey]=\"telemetryKey\"\n  [redirectUrl]=\"redirectUrl\"\n  [autoFocus]=\"autoFocus\"\n  [validateOnBlur]=\"validateOnBlur\"\n  [restartOnError]=\"restartOnError\"\n  [debug]=\"debug\"\n  [errorTransformer]=\"errorTransformer\"\n  [onScreenUpdate]=\"onScreenUpdate\"\n  [client]=\"client\"\n  [nonce]=\"nonce\"\n  [dismissScreenErrorOnInput]=\"dismissScreenErrorOnInput\"\n  [form]=\"form\"\n  [logger]=\"logger\"\n  [styleId]=\"styleId\"\n>\n</descope>\n", dependencies: [{ kind: "component", type: DescopeComponent, selector: "descope[flowId]", inputs: ["flowId", "locale", "theme", "tenant", "telemetryKey", "redirectUrl", "autoFocus", "validateOnBlur", "restartOnError", "debug", "errorTransformer", "onScreenUpdate", "client", "nonce", "dismissScreenErrorOnInput", "form", "logger", "styleId"], outputs: ["success", "error", "ready"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SignUpFlowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SignUpFlowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'descope-sign-up-flow', standalone: true, imports: [DescopeComponent], template: "<descope\n\t(success)=\"success.emit($event)\"\n\t(error)=\"error.emit($event)\"\n\tflowId=\"sign-up\"\n\t[locale]=\"locale\"\n\t[theme]=\"theme\"\n\t[tenant]=\"tenant\"\n\t[telemetryKey]=\"telemetryKey\"\n\t[redirectUrl]=\"redirectUrl\"\n\t[autoFocus]=\"autoFocus\"\n\t[debug]=\"debug\"\n\t[errorTransformer]=\"errorTransformer\"\n\t[client]=\"client\"\n\t[form]=\"form\"\n\t[logger]=\"logger\"\n>\n</descope>\n" }]
-        }], ctorParameters: function () { return [{ type: DescopeAuthConfig }]; }, propDecorators: { locale: [{
+            args: [{ selector: 'descope-sign-up-flow', standalone: true, imports: [DescopeComponent], template: "<descope\n  (success)=\"success.emit($event)\"\n  (error)=\"error.emit($event)\"\n  flowId=\"sign-up\"\n  [locale]=\"locale\"\n  [theme]=\"theme\"\n  [tenant]=\"tenant\"\n  [telemetryKey]=\"telemetryKey\"\n  [redirectUrl]=\"redirectUrl\"\n  [autoFocus]=\"autoFocus\"\n  [validateOnBlur]=\"validateOnBlur\"\n  [restartOnError]=\"restartOnError\"\n  [debug]=\"debug\"\n  [errorTransformer]=\"errorTransformer\"\n  [onScreenUpdate]=\"onScreenUpdate\"\n  [client]=\"client\"\n  [nonce]=\"nonce\"\n  [dismissScreenErrorOnInput]=\"dismissScreenErrorOnInput\"\n  [form]=\"form\"\n  [logger]=\"logger\"\n  [styleId]=\"styleId\"\n>\n</descope>\n" }]
+        }], ctorParameters: () => [{ type: DescopeAuthConfig }], propDecorators: { locale: [{
                 type: Input
             }], theme: [{
                 type: Input
@@ -469,16 +508,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], autoFocus: [{
                 type: Input
+            }], validateOnBlur: [{
+                type: Input
+            }], restartOnError: [{
+                type: Input
             }], debug: [{
                 type: Input
             }], errorTransformer: [{
                 type: Input
+            }], onScreenUpdate: [{
+                type: Input
             }], client: [{
                 type: Input
+            }], nonce: [{
+                type: Input
+            }], dismissScreenErrorOnInput: [{
+                type: Input
             }], form: [{
                 type: Input
             }], logger: [{
                 type: Input
+            }], styleId: [{
+                type: Input
             }], success: [{
                 type: Output
             }], error: [{
@@ -491,13 +542,13 @@ class SignUpOrInFlowComponent {
         this.error = new EventEmitter();
         this.projectId = descopeConfig.projectId;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SignUpOrInFlowComponent, deps: [{ token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SignUpOrInFlowComponent, isStandalone: true, selector: "descope-sign-up-or-in-flow", inputs: { locale: "locale", theme: "theme", tenant: "tenant", telemetryKey: "telemetryKey", redirectUrl: "redirectUrl", autoFocus: "autoFocus", debug: "debug", errorTransformer: "errorTransformer", client: "client", form: "form", logger: "logger" }, outputs: { success: "success", error: "error" }, ngImport: i0, template: "<descope\n\t(success)=\"success.emit($event)\"\n\t(error)=\"error.emit($event)\"\n\tflowId=\"sign-up-or-in\"\n\t[locale]=\"locale\"\n\t[theme]=\"theme\"\n\t[tenant]=\"tenant\"\n\t[telemetryKey]=\"telemetryKey\"\n\t[redirectUrl]=\"redirectUrl\"\n\t[autoFocus]=\"autoFocus\"\n\t[debug]=\"debug\"\n\t[errorTransformer]=\"errorTransformer\"\n\t[client]=\"client\"\n\t[form]=\"form\"\n\t[logger]=\"logger\"\n>\n</descope>\n", dependencies: [{ kind: "component", type: DescopeComponent, selector: "descope[flowId]", inputs: ["flowId", "locale", "theme", "tenant", "telemetryKey", "redirectUrl", "autoFocus", "debug", "errorTransformer", "client", "form", "logger"], outputs: ["success", "error", "ready"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SignUpOrInFlowComponent, deps: [{ token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: SignUpOrInFlowComponent, isStandalone: true, selector: "descope-sign-up-or-in-flow", inputs: { 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" }, outputs: { success: "success", error: "error" }, ngImport: i0, template: "<descope\n  (success)=\"success.emit($event)\"\n  (error)=\"error.emit($event)\"\n  flowId=\"sign-up-or-in\"\n  [locale]=\"locale\"\n  [theme]=\"theme\"\n  [tenant]=\"tenant\"\n  [telemetryKey]=\"telemetryKey\"\n  [redirectUrl]=\"redirectUrl\"\n  [autoFocus]=\"autoFocus\"\n  [validateOnBlur]=\"validateOnBlur\"\n  [restartOnError]=\"restartOnError\"\n  [debug]=\"debug\"\n  [errorTransformer]=\"errorTransformer\"\n  [onScreenUpdate]=\"onScreenUpdate\"\n  [client]=\"client\"\n  [nonce]=\"nonce\"\n  [dismissScreenErrorOnInput]=\"dismissScreenErrorOnInput\"\n  [form]=\"form\"\n  [logger]=\"logger\"\n  [styleId]=\"styleId\"\n>\n</descope>\n", dependencies: [{ kind: "component", type: DescopeComponent, selector: "descope[flowId]", inputs: ["flowId", "locale", "theme", "tenant", "telemetryKey", "redirectUrl", "autoFocus", "validateOnBlur", "restartOnError", "debug", "errorTransformer", "onScreenUpdate", "client", "nonce", "dismissScreenErrorOnInput", "form", "logger", "styleId"], outputs: ["success", "error", "ready"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SignUpOrInFlowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SignUpOrInFlowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'descope-sign-up-or-in-flow', standalone: true, imports: [DescopeComponent], template: "<descope\n\t(success)=\"success.emit($event)\"\n\t(error)=\"error.emit($event)\"\n\tflowId=\"sign-up-or-in\"\n\t[locale]=\"locale\"\n\t[theme]=\"theme\"\n\t[tenant]=\"tenant\"\n\t[telemetryKey]=\"telemetryKey\"\n\t[redirectUrl]=\"redirectUrl\"\n\t[autoFocus]=\"autoFocus\"\n\t[debug]=\"debug\"\n\t[errorTransformer]=\"errorTransformer\"\n\t[client]=\"client\"\n\t[form]=\"form\"\n\t[logger]=\"logger\"\n>\n</descope>\n" }]
-        }], ctorParameters: function () { return [{ type: DescopeAuthConfig }]; }, propDecorators: { locale: [{
+            args: [{ selector: 'descope-sign-up-or-in-flow', standalone: true, imports: [DescopeComponent], template: "<descope\n  (success)=\"success.emit($event)\"\n  (error)=\"error.emit($event)\"\n  flowId=\"sign-up-or-in\"\n  [locale]=\"locale\"\n  [theme]=\"theme\"\n  [tenant]=\"tenant\"\n  [telemetryKey]=\"telemetryKey\"\n  [redirectUrl]=\"redirectUrl\"\n  [autoFocus]=\"autoFocus\"\n  [validateOnBlur]=\"validateOnBlur\"\n  [restartOnError]=\"restartOnError\"\n  [debug]=\"debug\"\n  [errorTransformer]=\"errorTransformer\"\n  [onScreenUpdate]=\"onScreenUpdate\"\n  [client]=\"client\"\n  [nonce]=\"nonce\"\n  [dismissScreenErrorOnInput]=\"dismissScreenErrorOnInput\"\n  [form]=\"form\"\n  [logger]=\"logger\"\n  [styleId]=\"styleId\"\n>\n</descope>\n" }]
+        }], ctorParameters: () => [{ type: DescopeAuthConfig }], propDecorators: { locale: [{
                 type: Input
             }], theme: [{
                 type: Input
@@ -509,16 +560,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], autoFocus: [{
                 type: Input
+            }], validateOnBlur: [{
+                type: Input
+            }], restartOnError: [{
+                type: Input
             }], debug: [{
                 type: Input
             }], errorTransformer: [{
                 type: Input
+            }], onScreenUpdate: [{
+                type: Input
             }], client: [{
                 type: Input
+            }], nonce: [{
+                type: Input
+            }], dismissScreenErrorOnInput: [{
+                type: Input
             }], form: [{
                 type: Input
             }], logger: [{
                 type: Input
+            }], styleId: [{
+                type: Input
             }], success: [{
                 type: Output
             }], error: [{
@@ -532,6 +595,7 @@ class UserManagementComponent {
         this.projectId = descopeConfig.projectId;
         this.baseUrl = descopeConfig.baseUrl;
         this.baseStaticUrl = descopeConfig.baseStaticUrl;
+        this.baseCdnUrl = descopeConfig.baseCdnUrl;
     }
     ngOnInit() {
         this.setupWebComponent();
@@ -550,27 +614,33 @@ class UserManagementComponent {
         if (this.baseStaticUrl) {
             this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
         }
+        if (this.baseCdnUrl) {
+            this.webComponent.setAttribute('base-cdn-url', this.baseCdnUrl);
+        }
         if (this.theme) {
             this.webComponent.setAttribute('theme', this.theme);
         }
         if (this.debug) {
             this.webComponent.setAttribute('debug', this.debug.toString());
         }
+        if (this.styleId) {
+            this.webComponent.setAttribute('style-id', this.styleId);
+        }
         if (this.logger) {
             this.webComponent.logger = this.logger;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: UserManagementComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: UserManagementComponent, isStandalone: true, selector: "user-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", type: UserManagementComponent, isStandalone: true, selector: "user-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: UserManagementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: UserManagementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'user-management[tenant]',
                     standalone: true,
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DescopeAuthConfig }]; }, propDecorators: { tenant: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }], propDecorators: { tenant: [{
                 type: Input
             }], widgetId: [{
                 type: Input
@@ -580,6 +650,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], logger: [{
                 type: Input
+            }], styleId: [{
+                type: Input
             }] } });
 
 class RoleManagementComponent {
@@ -589,6 +661,7 @@ class RoleManagementComponent {
         this.projectId = descopeConfig.projectId;
         this.baseUrl = descopeConfig.baseUrl;
         this.baseStaticUrl = descopeConfig.baseStaticUrl;
+        this.baseCdnUrl = descopeConfig.baseCdnUrl;
     }
     ngOnInit() {
         this.setupWebComponent();
@@ -607,27 +680,33 @@ class RoleManagementComponent {
         if (this.baseStaticUrl) {
             this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
         }
+        if (this.baseCdnUrl) {
+            this.webComponent.setAttribute('base-cdn-url', this.baseCdnUrl);
+        }
         if (this.theme) {
             this.webComponent.setAttribute('theme', this.theme);
         }
         if (this.debug) {
             this.webComponent.setAttribute('debug', this.debug.toString());
         }
+        if (this.styleId) {
+            this.webComponent.setAttribute('style-id', this.styleId);
+        }
         if (this.logger) {
             this.webComponent.logger = this.logger;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: RoleManagementComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: RoleManagementComponent, isStandalone: true, selector: "role-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", type: RoleManagementComponent, isStandalone: true, selector: "role-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: RoleManagementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: RoleManagementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'role-management[tenant]',
                     standalone: true,
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DescopeAuthConfig }]; }, propDecorators: { tenant: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }], propDecorators: { tenant: [{
                 type: Input
             }], widgetId: [{
                 type: Input
@@ -637,6 +716,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], logger: [{
                 type: Input
+            }], styleId: [{
+                type: Input
             }] } });
 
 class AccessKeyManagementComponent {
@@ -646,6 +727,7 @@ class AccessKeyManagementComponent {
         this.projectId = descopeConfig.projectId;
         this.baseUrl = descopeConfig.baseUrl;
         this.baseStaticUrl = descopeConfig.baseStaticUrl;
+        this.baseCdnUrl = descopeConfig.baseCdnUrl;
     }
     ngOnInit() {
         this.setupWebComponent();
@@ -664,6 +746,9 @@ class AccessKeyManagementComponent {
         if (this.baseStaticUrl) {
             this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
         }
+        if (this.baseCdnUrl) {
+            this.webComponent.setAttribute('base-cdn-url', this.baseCdnUrl);
+        }
         if (this.theme) {
             this.webComponent.setAttribute('theme', this.theme);
         }
@@ -674,17 +759,17 @@ class AccessKeyManagementComponent {
             this.webComponent.logger = this.logger;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AccessKeyManagementComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AccessKeyManagementComponent, isStandalone: true, selector: "access-key-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", type: AccessKeyManagementComponent, isStandalone: true, selector: "access-key-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AccessKeyManagementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AccessKeyManagementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'access-key-management[tenant]',
                     standalone: true,
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DescopeAuthConfig }]; }, propDecorators: { tenant: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }], propDecorators: { tenant: [{
                 type: Input
             }], widgetId: [{
                 type: Input
@@ -694,6 +779,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], logger: [{
                 type: Input
+            }], styleId: [{
+                type: Input
             }] } });
 
 class AuditManagementComponent {
@@ -703,6 +790,7 @@ class AuditManagementComponent {
         this.projectId = descopeConfig.projectId;
         this.baseUrl = descopeConfig.baseUrl;
         this.baseStaticUrl = descopeConfig.baseStaticUrl;
+        this.baseCdnUrl = descopeConfig.baseCdnUrl;
     }
     ngOnInit() {
         this.setupWebComponent();
@@ -721,27 +809,33 @@ class AuditManagementComponent {
         if (this.baseStaticUrl) {
             this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
         }
+        if (this.baseCdnUrl) {
+            this.webComponent.setAttribute('base-cdn-url', this.baseCdnUrl);
+        }
         if (this.theme) {
             this.webComponent.setAttribute('theme', this.theme);
         }
         if (this.debug) {
             this.webComponent.setAttribute('debug', this.debug.toString());
         }
+        if (this.styleId) {
+            this.webComponent.setAttribute('style-id', this.styleId);
+        }
         if (this.logger) {
             this.webComponent.logger = this.logger;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AuditManagementComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: AuditManagementComponent, isStandalone: true, selector: "audit-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", type: AuditManagementComponent, isStandalone: true, selector: "audit-management[tenant]", inputs: { tenant: "tenant", widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: AuditManagementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AuditManagementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'audit-management[tenant]',
                     standalone: true,
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DescopeAuthConfig }]; }, propDecorators: { tenant: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }], propDecorators: { tenant: [{
                 type: Input
             }], widgetId: [{
                 type: Input
@@ -751,16 +845,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], logger: [{
                 type: Input
+            }], styleId: [{
+                type: Input
             }] } });
 
 class UserProfileComponent {
-    constructor(elementRef, descopeConfig) {
+    constructor(elementRef, descopeConfig, descopeAuthService) {
         this.elementRef = elementRef;
+        this.descopeAuthService = descopeAuthService;
         this.logout = 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();
+    }
+    setupWebComponent() {
+        this.webComponent.setAttribute('project-id', this.projectId);
+        this.webComponent.setAttribute('widget-id', this.widgetId);
+        if (this.baseUrl) {
+            this.webComponent.setAttribute('base-url', this.baseUrl);
+        }
+        if (this.baseStaticUrl) {
+            this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
+        }
+        if (this.baseCdnUrl) {
+            this.webComponent.setAttribute('base-cdn-url', this.baseCdnUrl);
+        }
+        if (this.theme) {
+            this.webComponent.setAttribute('theme', this.theme);
+        }
+        if (this.debug) {
+            this.webComponent.setAttribute('debug', this.debug.toString());
+        }
+        if (this.styleId) {
+            this.webComponent.setAttribute('style-id', this.styleId);
+        }
+        if (this.logger) {
+            this.webComponent.logger = this.logger;
+        }
+        this.webComponent.addEventListener('logout', (e) => {
+            this.logout?.emit(e);
+            this.descopeAuthService.setSession('');
+            this.descopeAuthService.setIsAuthenticated(false);
+            this.descopeAuthService.setUser(null);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", type: UserProfileComponent, isStandalone: true, selector: "user-profile", inputs: { widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { logout: "logout" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: UserProfileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'user-profile',
+                    standalone: true,
+                    template: ''
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }, { type: DescopeAuthService }], propDecorators: { widgetId: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], debug: [{
+                type: Input
+            }], logger: [{
+                type: Input
+            }], styleId: [{
+                type: Input
+            }], logout: [{
+                type: Output
+            }] } });
+
+class ApplicationsPortalComponent {
+    constructor(elementRef, descopeConfig) {
+        this.elementRef = elementRef;
+        this.logout = 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();
@@ -778,6 +948,9 @@ class UserProfileComponent {
         if (this.baseStaticUrl) {
             this.webComponent.setAttribute('base-static-url', this.baseStaticUrl);
         }
+        if (this.baseCdnUrl) {
+            this.webComponent.setAttribute('base-cdn-url', this.baseCdnUrl);
+        }
         if (this.theme) {
             this.webComponent.setAttribute('theme', this.theme);
         }
@@ -787,23 +960,26 @@ class UserProfileComponent {
         if (this.logger) {
             this.webComponent.logger = this.logger;
         }
+        if (this.styleId) {
+            this.webComponent.setAttribute('style-id', this.styleId);
+        }
         if (this.logout) {
             this.webComponent.addEventListener('logout', (e) => {
                 this.logout?.emit(e);
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: UserProfileComponent, deps: [{ token: i0.ElementRef }, { token: DescopeAuthConfig }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: UserProfileComponent, isStandalone: true, selector: "user-profile", inputs: { widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger" }, outputs: { logout: "logout" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", type: ApplicationsPortalComponent, isStandalone: true, selector: "applications-portal", inputs: { widgetId: "widgetId", theme: "theme", debug: "debug", logger: "logger", styleId: "styleId" }, outputs: { logout: "logout" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: UserProfileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ApplicationsPortalComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'user-profile',
+                    selector: 'applications-portal',
                     standalone: true,
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DescopeAuthConfig }]; }, propDecorators: { widgetId: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DescopeAuthConfig }], propDecorators: { widgetId: [{
                 type: Input
             }], theme: [{
                 type: Input
@@ -811,6 +987,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                 type: Input
             }], logger: [{
                 type: Input
+            }], styleId: [{
+                type: Input
             }], logout: [{
                 type: Output
             }] } });
@@ -818,7 +996,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
 class DescopeAuthModule {
     constructor(parentModule) {
         if (parentModule) {
-            throw new Error('DescopeAuthModule is already loaded. Import it only once');
+            // eslint-disable-next-line no-console
+            console.log('DescopeAuthModule is loaded in a child module');
         }
     }
     static forRoot(config) {
@@ -827,8 +1006,8 @@ class DescopeAuthModule {
             providers: [{ provide: DescopeAuthConfig, useValue: config }]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DescopeAuthModule, deps: [{ token: DescopeAuthModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.9", ngImport: i0, type: DescopeAuthModule, imports: [DescopeComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DescopeAuthModule, deps: [{ token: DescopeAuthModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: DescopeAuthModule, imports: [DescopeComponent,
             SignInFlowComponent,
             SignUpFlowComponent,
             SignUpOrInFlowComponent,
@@ -836,7 +1015,8 @@ class DescopeAuthModule {
             RoleManagementComponent,
             AccessKeyManagementComponent,
             AuditManagementComponent,
-            UserProfileComponent], exports: [DescopeComponent,
+            UserProfileComponent,
+            ApplicationsPortalComponent], exports: [DescopeComponent,
             SignInFlowComponent,
             SignUpFlowComponent,
             SignUpOrInFlowComponent,
@@ -844,10 +1024,11 @@ class DescopeAuthModule {
             RoleManagementComponent,
             AccessKeyManagementComponent,
             AuditManagementComponent,
-            UserProfileComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DescopeAuthModule }); }
+            UserProfileComponent,
+            ApplicationsPortalComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DescopeAuthModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: DescopeAuthModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DescopeAuthModule, decorators: [{
             type: NgModule,
             args: [{
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -860,7 +1041,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         RoleManagementComponent,
                         AccessKeyManagementComponent,
                         AuditManagementComponent,
-                        UserProfileComponent
+                        UserProfileComponent,
+                        ApplicationsPortalComponent
                     ],
                     exports: [
                         DescopeComponent,
@@ -871,14 +1053,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
                         RoleManagementComponent,
                         AccessKeyManagementComponent,
                         AuditManagementComponent,
-                        UserProfileComponent
+                        UserProfileComponent,
+                        ApplicationsPortalComponent
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: DescopeAuthModule, decorators: [{
+        }], ctorParameters: () => [{ type: DescopeAuthModule, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }]; } });
+                }] }] });
 
 /*
  * Public API Surface of angular-sdk
@@ -888,5 +1071,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccessKeyManagementComponent, AuditManagementComponent, DescopeAuthConfig, DescopeAuthModule, DescopeAuthService, DescopeComponent, RoleManagementComponent, SignInFlowComponent, SignUpFlowComponent, SignUpOrInFlowComponent, UserManagementComponent, UserProfileComponent, descopeAuthGuard, descopeInterceptor };
+export { AccessKeyManagementComponent, ApplicationsPortalComponent, AuditManagementComponent, DescopeAuthConfig, DescopeAuthModule, DescopeAuthService, DescopeComponent, RoleManagementComponent, SignInFlowComponent, SignUpFlowComponent, SignUpOrInFlowComponent, UserManagementComponent, UserProfileComponent, descopeAuthGuard, descopeInterceptor };
 //# sourceMappingURL=descope-angular-sdk.mjs.map