@dereekb/dbx-firebase 13.5.0 → 13.5.1

package/fesm2022/dereekb-dbx-firebase.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { inject, Injectable, provideAppInitializer, makeEnvironmentProviders, InjectionToken, Component, model, computed, ChangeDetectionStrategy, signal, Directive, EventEmitter, input, output, Injector, viewChild, HostListener, NgModule, ElementRef, forwardRef, effect, DestroyRef, Inject, Optional, Pipe } from '@angular/core';
 import { DbxAnalyticsService } from '@dereekb/dbx-analytics';
 import { asObservable, timeoutStartWith, filterMaybe, isNot, SubscriptionObject, lazyFrom, switchMapWhileTrue, loadingStateFromObs, distinctUntilKeysChange, cleanupDestroyable, iterationHasNextAndCanLoadMore, pageItemAccumulatorCurrentPage, accumulatorFlattenPageListLoadingState, useFirst, itemAccumulatorNextPageUntilResultsCount, iteratorNextPageUntilPage, iteratorNextPageUntilMaxPageLoadLimit, pageLoadingStateFromObs, useAsObservable, filterMaybeArray, mapEachAsync, invertObservableDecision, filterItemsWithObservableDecision, switchMapMaybe, beginLoading, mapLoadingStateValueWithOperator, valueFromFinishedLoadingState, skipInitialMaybe, distinctUntilModelKeyChange, successResult, errorResult, isLoadingStateLoading, cleanup, mapLoadingState, throwErrorFromLoadingStateError, maybeValueFromObservableOrValue, distinctUntilHasDifferentValues, MultiSubscriptionObject, startWithBeginLoading, skipAllInitialMaybe } from '@dereekb/rxjs';
-import { switchMap, of, shareReplay, map, distinctUntilChanged, EMPTY, catchError, firstValueFrom, BehaviorSubject, combineLatest, first, from, tap, interval, exhaustMap, filter, take, startWith, Subject, throttleTime, NEVER, defaultIfEmpty, combineLatestWith, mergeMap, Observable } from 'rxjs';
+import { switchMap, of, shareReplay, map, Subject, merge, distinctUntilChanged, EMPTY, catchError, firstValueFrom, tap, BehaviorSubject, combineLatest, first, from, interval, exhaustMap, filter, take, startWith, throttleTime, NEVER, defaultIfEmpty, combineLatestWith, mergeMap, Observable } from 'rxjs';
 import * as i2 from '@dereekb/dbx-core';
 import { loggedInObsFromIsLoggedIn, loggedOutObsFromIsLoggedIn, authUserIdentifier, DbxInjectionContext, DBX_INJECTION_COMPONENT_DATA, DbxInjectionComponent, AbstractForwardDbxInjectionContextDirective, DbxInjectionContextDirective, DbxAuthService, DbxActionButtonDirective, completeOnDestroy, cleanSubscription, DbxActionDirective, DbxActionEnforceModifiedDirective, DbxActionHandlerDirective, DbxActionAutoTriggerDirective, clean, cleanLoadingContext, provideDbxRouteModelIdDirectiveDelegate, provideDbxRouteModelKeyDirectiveDelegate, AbstractIfDirective, LockSetComponentStore, newWithInjector, CutTextPipe, DbxActionContextStoreSourceInstance, DbxActionHandlerInstance, cleanSubscriptionWithLockSet, SimpleStorageAccessorFactory, dbxRouteParamReaderInstance, DbxRouteParamDefaultRedirectInstance } from '@dereekb/dbx-core';
 import { Auth, authState, idToken, signInWithPopup, linkWithPopup, linkWithCredential, unlink, createUserWithEmailAndPassword, signInWithEmailAndPassword, signInAnonymously, reauthenticateWithPopup, OAuthProvider, FacebookAuthProvider, GithubAuthProvider, GoogleAuthProvider, TwitterAuthProvider, provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
@@ -141,7 +141,14 @@ class DbxFirebaseAuthService {
     firebaseAuth = inject(Auth);
     delegate = inject(DbxFirebaseAuthServiceDelegate, { optional: true }) ?? DEFAULT_DBX_FIREBASE_AUTH_SERVICE_DELEGATE;
     _authState$ = authState(this.firebaseAuth);
-    currentAuthUser$ = this._authState$.pipe(timeoutStartWith(null, 1000), distinctUntilChanged(), shareReplay(1));
+    /**
+     * Subject that triggers a re-emission of the current auth user.
+     *
+     * Useful after operations that mutate the {@link User} object in place (e.g., linking/unlinking providers)
+     * without triggering a new {@link authState} emission.
+     */
+    _authUpdate$ = new Subject();
+    currentAuthUser$ = merge(this._authState$, this._authUpdate$.pipe(map(() => this.firebaseAuth.currentUser))).pipe(timeoutStartWith(null, 1000), shareReplay(1));
     currentAuthUserInfo$ = this.currentAuthUser$.pipe(map((x) => (x ? authUserInfoFromAuthUser(x) : undefined)));
     authUser$ = this.currentAuthUser$.pipe(filterMaybe());
     authUserInfo$ = this.authUser$.pipe(map(authUserInfoFromAuthUser));
@@ -250,7 +257,7 @@ class DbxFirebaseAuthService {
             else {
                 throw new Error('User is not logged in currently.');
             }
-        })));
+        }), tap(() => this._authUpdate$.next())));
     }
     /**
      * Links a credential to the current user. Useful for merging accounts
@@ -272,7 +279,7 @@ class DbxFirebaseAuthService {
             else {
                 throw new Error('User is not logged in currently.');
             }
-        })));
+        }), tap(() => this._authUpdate$.next())));
     }
     /**
      * Unlinks an authentication provider from the current user.
@@ -293,7 +300,7 @@ class DbxFirebaseAuthService {
             else {
                 throw new Error('User is not logged in currently.');
             }
-        })));
+        }), tap(() => this._authUpdate$.next())));
     }
     registerWithEmailAndPassword(email, password) {
         return createUserWithEmailAndPassword(this.firebaseAuth, email, password);
@@ -726,6 +733,73 @@ const OAUTH_FIREBASE_LOGIN_METHOD_CATEGORY = 'oauth';
 class DbxFirebaseLoginContext extends DbxInjectionContext {
 }
 
+/**
+ * Map of Firebase provider IDs to known login method types.
+ *
+ * @example
+ * ```ts
+ * FIREBASE_PROVIDER_ID_TO_LOGIN_METHOD_TYPE_MAP['google.com']; // 'google'
+ * ```
+ */
+const FIREBASE_PROVIDER_ID_TO_LOGIN_METHOD_TYPE_MAP = {
+    'google.com': 'google',
+    'facebook.com': 'facebook',
+    'github.com': 'github',
+    'twitter.com': 'twitter',
+    'apple.com': 'apple',
+    'microsoft.com': 'microsoft',
+    phone: 'phone',
+    password: 'email'
+};
+/**
+ * Map of known login method types to Firebase provider IDs.
+ *
+ * @example
+ * ```ts
+ * LOGIN_METHOD_TYPE_TO_FIREBASE_PROVIDER_ID_MAP['google']; // 'google.com'
+ * ```
+ */
+const LOGIN_METHOD_TYPE_TO_FIREBASE_PROVIDER_ID_MAP = {
+    google: 'google.com',
+    facebook: 'facebook.com',
+    github: 'github.com',
+    twitter: 'twitter.com',
+    apple: 'apple.com',
+    microsoft: 'microsoft.com',
+    phone: 'phone',
+    email: 'password'
+};
+/**
+ * Converts a Firebase provider ID (e.g., 'google.com') to its corresponding login method type (e.g., 'google').
+ *
+ * @param providerId - The Firebase provider ID.
+ * @returns The matching login method type, or undefined if unknown.
+ *
+ * @example
+ * ```ts
+ * firebaseProviderIdToLoginMethodType('google.com'); // 'google'
+ * firebaseProviderIdToLoginMethodType('unknown.com'); // undefined
+ * ```
+ */
+function firebaseProviderIdToLoginMethodType(providerId) {
+    return FIREBASE_PROVIDER_ID_TO_LOGIN_METHOD_TYPE_MAP[providerId];
+}
+/**
+ * Converts a login method type (e.g., 'google') to its corresponding Firebase provider ID (e.g., 'google.com').
+ *
+ * @param type - The login method type.
+ * @returns The matching Firebase provider ID, or undefined if unknown.
+ *
+ * @example
+ * ```ts
+ * loginMethodTypeToFirebaseProviderId('google'); // 'google.com'
+ * loginMethodTypeToFirebaseProviderId('unknown'); // undefined
+ * ```
+ */
+function loginMethodTypeToFirebaseProviderId(type) {
+    return LOGIN_METHOD_TYPE_TO_FIREBASE_PROVIDER_ID_MAP[type];
+}
+
 /**
  * Renders a styled login button that triggers a login action handler on click.
  *
@@ -737,8 +811,10 @@ class DbxFirebaseLoginButtonComponent {
     iconSignal = computed(() => this.config()?.icon, ...(ngDevMode ? [{ debugName: "iconSignal" }] : /* istanbul ignore next */ []));
     iconFilterSignal = computed(() => this.config()?.iconFilter, ...(ngDevMode ? [{ debugName: "iconFilterSignal" }] : /* istanbul ignore next */ []));
     textSignal = computed(() => this.config()?.text ?? '', ...(ngDevMode ? [{ debugName: "textSignal" }] : /* istanbul ignore next */ []));
-    buttonColorSignal = computed(() => this.config()?.buttonColor ?? 'transparent', ...(ngDevMode ? [{ debugName: "buttonColorSignal" }] : /* istanbul ignore next */ []));
+    buttonColorSignal = computed(() => this.config()?.buttonColor ?? (this.config()?.color ? undefined : 'transparent'), ...(ngDevMode ? [{ debugName: "buttonColorSignal" }] : /* istanbul ignore next */ []));
     buttonTextColorSignal = computed(() => this.config()?.buttonTextColor, ...(ngDevMode ? [{ debugName: "buttonTextColorSignal" }] : /* istanbul ignore next */ []));
+    colorSignal = computed(() => this.config()?.color, ...(ngDevMode ? [{ debugName: "colorSignal" }] : /* istanbul ignore next */ []));
+    confirmConfigSignal = computed(() => this.config()?.confirmConfig, ...(ngDevMode ? [{ debugName: "confirmConfigSignal" }] : /* istanbul ignore next */ []));
     setConfig(config) {
         this.config.set(config);
     }
@@ -757,8 +833,8 @@ class DbxFirebaseLoginButtonComponent {
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFirebaseLoginButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFirebaseLoginButtonComponent, isStandalone: true, selector: "dbx-firebase-login-button", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, host: { classAttribute: "dbx-firebase-login-button" }, ngImport: i0, template: `
-    <ng-container dbxAction [dbxActionHandler]="handleAction" dbxActionValue [dbxActionSuccessHandler]="onActionSuccess">
-      <dbx-button dbxActionButton [customTextColor]="buttonTextColorSignal()" [customButtonColor]="buttonColorSignal()" [raised]="true">
+    <ng-container dbxAction [dbxActionHandler]="handleAction" [dbxActionSuccessHandler]="onActionSuccess" [dbxActionConfirm]="confirmConfigSignal()" [dbxActionConfirmSkip]="!confirmConfigSignal()">
+      <dbx-button dbxActionButton [customTextColor]="buttonTextColorSignal()" [customButtonColor]="buttonColorSignal()" [raised]="true" [color]="colorSignal()">
         <div class="dbx-firebase-login-button-content">
           <span class="dbx-firebase-login-button-icon dbx-icon-spacer">
             @if (iconUrlSignal()) {
@@ -772,15 +848,15 @@ class DbxFirebaseLoginButtonComponent {
         </div>
       </dbx-button>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i2.DbxActionSuccessHandlerDirective, selector: "[dbxActionSuccessHandler]", inputs: ["dbxActionSuccessHandler"] }, { kind: "directive", type: i2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i2.DbxActionSuccessHandlerDirective, selector: "[dbxActionSuccessHandler]", inputs: ["dbxActionSuccessHandler"] }, { kind: "directive", type: i2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "directive", type: i1$1.DbxActionConfirmDirective, selector: "[dbxActionConfirm]", inputs: ["dbxActionConfirm", "dbxActionConfirmSkip"] }, { kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFirebaseLoginButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-firebase-login-button',
                     template: `
-    <ng-container dbxAction [dbxActionHandler]="handleAction" dbxActionValue [dbxActionSuccessHandler]="onActionSuccess">
-      <dbx-button dbxActionButton [customTextColor]="buttonTextColorSignal()" [customButtonColor]="buttonColorSignal()" [raised]="true">
+    <ng-container dbxAction [dbxActionHandler]="handleAction" [dbxActionSuccessHandler]="onActionSuccess" [dbxActionConfirm]="confirmConfigSignal()" [dbxActionConfirmSkip]="!confirmConfigSignal()">
+      <dbx-button dbxActionButton [customTextColor]="buttonTextColorSignal()" [customButtonColor]="buttonColorSignal()" [raised]="true" [color]="colorSignal()">
         <div class="dbx-firebase-login-button-content">
           <span class="dbx-firebase-login-button-icon dbx-icon-spacer">
             @if (iconUrlSignal()) {
@@ -876,13 +952,16 @@ class AbstractConfiguredDbxFirebaseLoginButtonDirective {
     ngOnInit() {
         const assets = this.assetConfig;
         const text = this._textForMode(assets);
+        const isUnlink = this.effectiveLoginMode === 'unlink';
         this._config.set({
             text,
-            icon: assets.loginIcon,
-            iconUrl: assets.logoUrl,
-            iconFilter: assets.logoFilter,
-            buttonColor: assets.backgroundColor,
-            buttonTextColor: assets.textColor,
+            icon: isUnlink ? 'link_off' : assets.loginIcon,
+            iconUrl: isUnlink ? undefined : assets.logoUrl,
+            iconFilter: isUnlink ? undefined : assets.logoFilter,
+            buttonColor: isUnlink ? undefined : assets.backgroundColor,
+            buttonTextColor: isUnlink ? undefined : assets.textColor,
+            color: isUnlink ? 'warn' : undefined,
+            confirmConfig: isUnlink ? { title: `Disconnect ${assets.providerName ?? 'Provider'}`, prompt: `Are you sure you want to disconnect ${assets.providerName ?? 'this provider'}?` } : undefined,
             handleLogin: () => this._handleAction()
         });
     }
@@ -895,6 +974,19 @@ class AbstractConfiguredDbxFirebaseLoginButtonDirective {
     handleLink() {
         throw new Error(`Linking is not supported for the "${this.loginProvider}" provider.`);
     }
+    /**
+     * Handles the unlink action by removing the provider from the current user.
+     * Uses the {@link LOGIN_METHOD_TYPE_TO_FIREBASE_PROVIDER_ID_MAP} to resolve the Firebase provider ID.
+     *
+     * @returns A promise that resolves when the unlink action completes.
+     */
+    handleUnlink() {
+        const providerId = loginMethodTypeToFirebaseProviderId(this.loginProvider);
+        if (!providerId) {
+            throw new Error(`Unknown provider ID for login method type "${this.loginProvider}".`);
+        }
+        return this.dbxFirebaseAuthService.unlinkProvider(providerId);
+    }
     get providerConfig() {
         return this.dbxFirebaseAuthLoginService.getLoginProvider(this.loginProvider);
     }
@@ -906,21 +998,31 @@ class AbstractConfiguredDbxFirebaseLoginButtonDirective {
     }
     _textForMode(assets) {
         let text;
-        if (this.effectiveLoginMode === 'link') {
-            text = assets.linkText ?? (assets.providerName ? `Connect ${assets.providerName}` : '<linkText not configured>');
-        }
-        else {
-            text = assets.loginText ?? '<loginText not configured>';
+        switch (this.effectiveLoginMode) {
+            case 'link':
+                text = assets.linkText ?? (assets.providerName ? `Connect ${assets.providerName}` : '<linkText not configured>');
+                break;
+            case 'unlink':
+                text = assets.unlinkText ?? (assets.providerName ? `Disconnect ${assets.providerName}` : '<unlinkText not configured>');
+                break;
+            default:
+                text = assets.loginText ?? '<loginText not configured>';
+                break;
         }
         return text;
     }
     _handleAction() {
         let promise;
-        if (this.effectiveLoginMode === 'link') {
-            promise = this.handleLink();
-        }
-        else {
-            promise = this.handleLogin();
+        switch (this.effectiveLoginMode) {
+            case 'link':
+                promise = this.handleLink();
+                break;
+            case 'unlink':
+                promise = this.handleUnlink();
+                break;
+            default:
+                promise = this.handleLogin();
+                break;
         }
         return promise.catch((error) => {
             throw firebaseAuthErrorToReadableError(error);
@@ -1432,6 +1534,14 @@ function provideDbxFirebaseLogin(config) {
  */
 class DbxFirebaseLoginListComponent {
     dbxFirebaseAuthLoginService = inject(DbxFirebaseAuthLoginService);
+    dbxFirebaseAuthService = inject(DbxFirebaseAuthService);
+    _linkedProviderIds = toSignal(this.dbxFirebaseAuthService.currentLinkedProviderIds$, { initialValue: [] });
+    /**
+     * The login method types currently linked to the authenticated user.
+     */
+    linkedMethodTypesSignal = computed(() => {
+        return filterMaybeArrayValues(this._linkedProviderIds().map(firebaseProviderIdToLoginMethodType));
+    }, ...(ngDevMode ? [{ debugName: "linkedMethodTypesSignal" }] : /* istanbul ignore next */ []));
     loginMode = input('login', ...(ngDevMode ? [{ debugName: "loginMode" }] : /* istanbul ignore next */ []));
     providerTypes = input(...(ngDevMode ? [undefined, { debugName: "providerTypes" }] : /* istanbul ignore next */ []));
     omitProviderTypes = input(...(ngDevMode ? [undefined, { debugName: "omitProviderTypes" }] : /* istanbul ignore next */ []));
@@ -1439,7 +1549,15 @@ class DbxFirebaseLoginListComponent {
     providerTypesSignal = computed(() => {
         const providerTypes = this.providerTypes();
         const omitProviderTypes = this.omitProviderTypes();
-        const baseTypes = providerTypes ? asArray(providerTypes) : this.dbxFirebaseAuthLoginService.getEnabledTypes();
+        const loginMode = this.loginMode();
+        let baseTypes;
+        if (loginMode === 'unlink') {
+            // In unlink mode, show only currently linked providers
+            baseTypes = this.linkedMethodTypesSignal();
+        }
+        else {
+            baseTypes = providerTypes ? asArray(providerTypes) : this.dbxFirebaseAuthLoginService.getEnabledTypes();
+        }
         return omitProviderTypes ? excludeValuesFromArray(baseTypes, asArray(omitProviderTypes)) : baseTypes;
     }, ...(ngDevMode ? [{ debugName: "providerTypesSignal" }] : /* istanbul ignore next */ []));
     providersSignal = computed(() => {
@@ -1464,6 +1582,10 @@ class DbxFirebaseLoginListComponent {
                 providers = providers.filter((x) => x.allowLinking !== false);
                 mapFn = (x) => ({ componentClass: x.componentClass, loginMethodType: x.loginMethodType, data: { loginMode } });
                 break;
+            case 'unlink':
+                providers = providers.filter((x) => x.allowLinking !== false);
+                mapFn = (x) => ({ componentClass: x.componentClass, loginMethodType: x.loginMethodType, data: { loginMode } });
+                break;
             default:
                 mapFn = (x) => ({ componentClass: x.componentClass, loginMethodType: x.loginMethodType, data: { loginMode } });
                 break;
@@ -1471,7 +1593,7 @@ class DbxFirebaseLoginListComponent {
         return providers.map(mapFn);
     }, ...(ngDevMode ? [{ debugName: "providersInjectionConfigsSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFirebaseLoginListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFirebaseLoginListComponent, isStandalone: true, selector: "dbx-firebase-login-list", inputs: { loginMode: { classPropertyName: "loginMode", publicName: "loginMode", isSignal: true, isRequired: false, transformFunction: null }, providerTypes: { classPropertyName: "providerTypes", publicName: "providerTypes", isSignal: true, isRequired: false, transformFunction: null }, omitProviderTypes: { classPropertyName: "omitProviderTypes", publicName: "omitProviderTypes", isSignal: true, isRequired: false, transformFunction: null }, providerCategories: { classPropertyName: "providerCategories", publicName: "providerCategories", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-firebase-login-list" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFirebaseLoginListComponent, isStandalone: true, selector: "dbx-firebase-login-list", inputs: { loginMode: { classPropertyName: "loginMode", publicName: "loginMode", isSignal: true, isRequired: false, transformFunction: null }, providerTypes: { classPropertyName: "providerTypes", publicName: "providerTypes", isSignal: true, isRequired: false, transformFunction: null }, omitProviderTypes: { classPropertyName: "omitProviderTypes", publicName: "omitProviderTypes", isSignal: true, isRequired: false, transformFunction: null }, providerCategories: { classPropertyName: "providerCategories", publicName: "providerCategories", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dbx-firebase-login-list dbx-button-column" }, ngImport: i0, template: `
     @for (config of providersInjectionConfigsSignal(); track config.loginMethodType) {
       <div class="dbx-firebase-login-item">
         <dbx-injection [config]="config"></dbx-injection>
@@ -1491,7 +1613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
     }
   `,
                     host: {
-                        class: 'dbx-firebase-login-list'
+                        class: 'dbx-firebase-login-list dbx-button-column'
                     },
                     standalone: true,
                     imports: [DbxInjectionComponent]
@@ -1638,73 +1760,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                 }]
         }] });
 
-/**
- * Map of Firebase provider IDs to known login method types.
- *
- * @example
- * ```ts
- * FIREBASE_PROVIDER_ID_TO_LOGIN_METHOD_TYPE_MAP['google.com']; // 'google'
- * ```
- */
-const FIREBASE_PROVIDER_ID_TO_LOGIN_METHOD_TYPE_MAP = {
-    'google.com': 'google',
-    'facebook.com': 'facebook',
-    'github.com': 'github',
-    'twitter.com': 'twitter',
-    'apple.com': 'apple',
-    'microsoft.com': 'microsoft',
-    phone: 'phone',
-    password: 'email'
-};
-/**
- * Map of known login method types to Firebase provider IDs.
- *
- * @example
- * ```ts
- * LOGIN_METHOD_TYPE_TO_FIREBASE_PROVIDER_ID_MAP['google']; // 'google.com'
- * ```
- */
-const LOGIN_METHOD_TYPE_TO_FIREBASE_PROVIDER_ID_MAP = {
-    google: 'google.com',
-    facebook: 'facebook.com',
-    github: 'github.com',
-    twitter: 'twitter.com',
-    apple: 'apple.com',
-    microsoft: 'microsoft.com',
-    phone: 'phone',
-    email: 'password'
-};
-/**
- * Converts a Firebase provider ID (e.g., 'google.com') to its corresponding login method type (e.g., 'google').
- *
- * @param providerId - The Firebase provider ID.
- * @returns The matching login method type, or undefined if unknown.
- *
- * @example
- * ```ts
- * firebaseProviderIdToLoginMethodType('google.com'); // 'google'
- * firebaseProviderIdToLoginMethodType('unknown.com'); // undefined
- * ```
- */
-function firebaseProviderIdToLoginMethodType(providerId) {
-    return FIREBASE_PROVIDER_ID_TO_LOGIN_METHOD_TYPE_MAP[providerId];
-}
-/**
- * Converts a login method type (e.g., 'google') to its corresponding Firebase provider ID (e.g., 'google.com').
- *
- * @param type - The login method type.
- * @returns The matching Firebase provider ID, or undefined if unknown.
- *
- * @example
- * ```ts
- * loginMethodTypeToFirebaseProviderId('google'); // 'google.com'
- * loginMethodTypeToFirebaseProviderId('unknown'); // undefined
- * ```
- */
-function loginMethodTypeToFirebaseProviderId(type) {
-    return LOGIN_METHOD_TYPE_TO_FIREBASE_PROVIDER_ID_MAP[type];
-}
-
 /**
  * Component for managing linked authentication providers on a user account.
  *
@@ -1721,47 +1776,19 @@ class DbxFirebaseManageAuthProvidersComponent {
     dbxFirebaseAuthService = inject(DbxFirebaseAuthService);
     dbxFirebaseAuthLoginService = inject(DbxFirebaseAuthLoginService);
     _linkedProviderIds = toSignal(this.dbxFirebaseAuthService.currentLinkedProviderIds$, { initialValue: [] });
-    linkedProvidersSignal = computed(() => {
-        const providerIds = this._linkedProviderIds();
-        return providerIds.map((providerId) => {
-            const loginMethodType = firebaseProviderIdToLoginMethodType(providerId);
-            const assets = loginMethodType ? this.dbxFirebaseAuthLoginService.getProviderAssets(loginMethodType) : undefined;
-            const providerName = assets?.providerName ?? providerId;
-            const unlinkText = assets?.unlinkText ?? `Disconnect ${providerName}`;
-            return { providerId, loginMethodType, providerName, unlinkText, assets };
-        });
-    }, ...(ngDevMode ? [{ debugName: "linkedProvidersSignal" }] : /* istanbul ignore next */ []));
     linkedMethodTypesSignal = computed(() => {
-        return filterMaybeArrayValues(this.linkedProvidersSignal().map((p) => p.loginMethodType));
+        return filterMaybeArrayValues(this._linkedProviderIds().map(firebaseProviderIdToLoginMethodType));
     }, ...(ngDevMode ? [{ debugName: "linkedMethodTypesSignal" }] : /* istanbul ignore next */ []));
     showLinkSectionSignal = computed(() => {
         const linkedTypes = new Set(this.linkedMethodTypesSignal());
         const oauthProviders = this.dbxFirebaseAuthLoginService.getLinkProviders(this.dbxFirebaseAuthLoginService.getEnabledTypes());
         return oauthProviders.some((p) => p.category === OAUTH_FIREBASE_LOGIN_METHOD_CATEGORY && !linkedTypes.has(p.loginMethodType));
     }, ...(ngDevMode ? [{ debugName: "showLinkSectionSignal" }] : /* istanbul ignore next */ []));
-    /**
-     * Creates a work handler for unlinking a specific provider.
-     *
-     * @param providerId - The Firebase provider ID to unlink (e.g., 'google.com').
-     * @returns A {@link WorkUsingContext} handler that unlinking the provider on execution.
-     */
-    makeUnlinkHandler(providerId) {
-        return (_, context) => {
-            const promise = this.dbxFirebaseAuthService.unlinkProvider(providerId);
-            context.startWorkingWithPromise(promise);
-        };
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFirebaseManageAuthProvidersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFirebaseManageAuthProvidersComponent, isStandalone: true, selector: "dbx-firebase-manage-auth-providers", host: { classAttribute: "d-block dbx-firebase-manage-auth-providers" }, ngImport: i0, template: `
-    @if (linkedProvidersSignal().length) {
+    @if (linkedMethodTypesSignal().length) {
       <dbx-section header="Connected Providers">
-        @for (provider of linkedProvidersSignal(); track provider.providerId) {
-          <div class="dbx-firebase-manage-provider-item">
-            <ng-container dbxAction [dbxActionHandler]="makeUnlinkHandler(provider.providerId)" dbxActionValue>
-              <dbx-button dbxActionButton [text]="provider.unlinkText" icon="link_off" color="warn"></dbx-button>
-            </ng-container>
-          </div>
-        }
+        <dbx-firebase-login loginMode="unlink" providerCategories="oauth"></dbx-firebase-login>
       </dbx-section>
     }
     @if (showLinkSectionSignal()) {
@@ -1769,24 +1796,18 @@ class DbxFirebaseManageAuthProvidersComponent {
         <dbx-firebase-login loginMode="link" [omitProviderTypes]="linkedMethodTypesSignal()" providerCategories="oauth"></dbx-firebase-login>
       </dbx-section>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxFirebaseLoginComponent, selector: "dbx-firebase-login", inputs: ["loginMode", "providerTypes", "omitProviderTypes", "providerCategories"] }, { kind: "component", type: DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxFirebaseLoginComponent, selector: "dbx-firebase-login", inputs: ["loginMode", "providerTypes", "omitProviderTypes", "providerCategories"] }, { kind: "component", type: DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFirebaseManageAuthProvidersComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-firebase-manage-auth-providers',
                     standalone: true,
-                    imports: [DbxFirebaseLoginComponent, DbxSectionComponent, MatIconModule, DbxActionModule, DbxButtonModule],
+                    imports: [DbxFirebaseLoginComponent, DbxSectionComponent],
                     template: `
-    @if (linkedProvidersSignal().length) {
+    @if (linkedMethodTypesSignal().length) {
       <dbx-section header="Connected Providers">
-        @for (provider of linkedProvidersSignal(); track provider.providerId) {
-          <div class="dbx-firebase-manage-provider-item">
-            <ng-container dbxAction [dbxActionHandler]="makeUnlinkHandler(provider.providerId)" dbxActionValue>
-              <dbx-button dbxActionButton [text]="provider.unlinkText" icon="link_off" color="warn"></dbx-button>
-            </ng-container>
-          </div>
-        }
+        <dbx-firebase-login loginMode="unlink" providerCategories="oauth"></dbx-firebase-login>
       </dbx-section>
     }
     @if (showLinkSectionSignal()) {
@@ -4196,7 +4217,7 @@ class DbxFirebaseDocumentStoreContextStore extends ComponentStore {
     lastStoresChangeAt$ = this.select((state) => state.lastStoresChangeAt).pipe(distinctUntilChanged(isSameDate), shareReplay(1));
     entriesGroupedByIdentity$ = this.stores$.pipe(switchMap((stores) => {
         let entriesObs;
-        const allEntries = [...stores.values()];
+        const allEntries = Array.from(stores.values());
         const { included: hasIdentity, excluded: noIdentity } = separateValues(allEntries, (x) => x.modelIdentity != null);
         if (noIdentity.length > 0) {
             entriesObs = combineLatest(noIdentity.map((entryWithoutCachedIdentity) => entryWithoutCachedIdentity.store.modelIdentity$.pipe(first(), map((z) => {