@dereekb/dbx-firebase 13.5.0 → 13.6.0

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()" [attr.aria-label]="textSignal()">
         <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()" [attr.aria-label]="textSignal()">
         <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);
@@ -1124,11 +1226,11 @@ class DbxFirebaseLoginEmailContentComponent {
         this.doneOrCancelled.next(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFirebaseLoginEmailContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFirebaseLoginEmailContentComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"dbx-firebase-login-email-content\">\n  @switch (emailModeSignal()) {\n    @case ('login') {\n      <ng-container *ngTemplateOutlet=\"loginView\"></ng-container>\n    }\n    @case ('recover') {\n      <ng-container *ngTemplateOutlet=\"resetPassword\"></ng-container>\n    }\n    @case ('recoversent') {\n      <ng-container *ngTemplateOutlet=\"resetPasswordSent\"></ng-container>\n    }\n  }\n</div>\n\n<!-- Login View -->\n<ng-template #loginView>\n  <ng-container dbxAction [dbxActionHandler]=\"handleLoginAction\">\n    <dbx-firebase-email-form [config]=\"formConfig\" dbxActionForm [dbxFormSource]=\"emailFormValueSignal()\"></dbx-firebase-email-form>\n    @if (isLoginMode) {\n      <div class=\"dbx-firebase-login-email-forgot-prompt\">\n        <dbx-link [anchor]=\"forgotAnchor\">Forgot Password?</dbx-link>\n      </div>\n    }\n    <div class=\"dbx-flex\">\n      <dbx-button class=\"dbx-button-wide\" [text]=\"buttonText\" [raised]=\"true\" color=\"primary\" dbxActionButton></dbx-button>\n      <dbx-button-spacer></dbx-button-spacer>\n      <span class=\"dbx-spacer\"></span>\n      <button mat-flat-button (click)=\"onCancel()\">Cancel</button>\n    </div>\n    <dbx-error dbxActionError></dbx-error>\n  </ng-container>\n</ng-template>\n\n<!-- Reset Password View -->\n<ng-template #resetPassword>\n  <div class=\"dbx-firebase-login-email-content-recovery\" dbxAction [dbxActionHandler]=\"handleRecoveryAction\" [dbxActionSuccessHandler]=\"handleRecoverySuccess\">\n    <dbx-firebase-email-recovery-form dbxActionForm [dbxFormSource]=\"recoveryFormValueSignal()\"></dbx-firebase-email-recovery-form>\n    <p class=\"dbx-hint\">An email will be sent to the above address to help you reset your password.</p>\n    <div class=\"dbx-flex\">\n      <dbx-button class=\"dbx-button-wide\" text=\"Send Recovery Email\" [raised]=\"true\" color=\"primary\" dbxActionButton></dbx-button>\n      <span class=\"dbx-spacer\"></span>\n      <button mat-flat-button (click)=\"onCancelReset()\">Cancel Recovery</button>\n    </div>\n    <dbx-error dbxActionError></dbx-error>\n  </div>\n</ng-template>\n\n<!-- Reset Password Sent -->\n<ng-template #resetPasswordSent>\n  <div class=\"dbx-firebase-login-email-content-recovery-sent\">\n    <p class=\"dbx-hint\">A recovery email was sent to the specified address. Please check your email for next steps.</p>\n    <button mat-raised-button (click)=\"clickedRecoveryAcknowledged()\">Ok</button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DbxErrorComponent, selector: "dbx-error", inputs: ["error", "iconOnly"], outputs: ["popoverOpened"] }, { kind: "component", type: DbxLinkComponent, selector: "dbx-link", inputs: ["ref", "href", "anchor"] }, { kind: "directive", type: DbxActionErrorDirective, selector: "[dbxActionError]" }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxFirebaseEmailFormComponent, selector: "dbx-firebase-email-form" }, { kind: "component", type: DbxFirebaseEmailRecoveryFormComponent, selector: "dbx-firebase-email-recovery-form" }, { kind: "directive", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFirebaseLoginEmailContentComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"dbx-firebase-login-email-content\" aria-live=\"polite\">\n  @switch (emailModeSignal()) {\n    @case ('login') {\n      <ng-container *ngTemplateOutlet=\"loginView\"></ng-container>\n    }\n    @case ('recover') {\n      <ng-container *ngTemplateOutlet=\"resetPassword\"></ng-container>\n    }\n    @case ('recoversent') {\n      <ng-container *ngTemplateOutlet=\"resetPasswordSent\"></ng-container>\n    }\n  }\n</div>\n\n<!-- Login View -->\n<ng-template #loginView>\n  <ng-container dbxAction [dbxActionHandler]=\"handleLoginAction\">\n    <dbx-firebase-email-form [config]=\"formConfig\" dbxActionForm [dbxFormSource]=\"emailFormValueSignal()\"></dbx-firebase-email-form>\n    @if (isLoginMode) {\n      <div class=\"dbx-firebase-login-email-forgot-prompt\">\n        <dbx-link [anchor]=\"forgotAnchor\">Forgot Password?</dbx-link>\n      </div>\n    }\n    <div class=\"dbx-flex\">\n      <dbx-button class=\"dbx-button-wide\" [text]=\"buttonText\" [raised]=\"true\" color=\"primary\" dbxActionButton></dbx-button>\n      <dbx-button-spacer></dbx-button-spacer>\n      <span class=\"dbx-spacer\"></span>\n      <button mat-flat-button (click)=\"onCancel()\">Cancel</button>\n    </div>\n    <dbx-error dbxActionError></dbx-error>\n  </ng-container>\n</ng-template>\n\n<!-- Reset Password View -->\n<ng-template #resetPassword>\n  <div class=\"dbx-firebase-login-email-content-recovery\" dbxAction [dbxActionHandler]=\"handleRecoveryAction\" [dbxActionSuccessHandler]=\"handleRecoverySuccess\">\n    <dbx-firebase-email-recovery-form dbxActionForm [dbxFormSource]=\"recoveryFormValueSignal()\"></dbx-firebase-email-recovery-form>\n    <p class=\"dbx-hint\">An email will be sent to the above address to help you reset your password.</p>\n    <div class=\"dbx-flex\">\n      <dbx-button class=\"dbx-button-wide\" text=\"Send Recovery Email\" [raised]=\"true\" color=\"primary\" dbxActionButton></dbx-button>\n      <span class=\"dbx-spacer\"></span>\n      <button mat-flat-button (click)=\"onCancelReset()\">Cancel Recovery</button>\n    </div>\n    <dbx-error dbxActionError></dbx-error>\n  </div>\n</ng-template>\n\n<!-- Reset Password Sent -->\n<ng-template #resetPasswordSent>\n  <div class=\"dbx-firebase-login-email-content-recovery-sent\" role=\"status\">\n    <p class=\"dbx-hint\">A recovery email was sent to the specified address. Please check your email for next steps.</p>\n    <button mat-raised-button (click)=\"clickedRecoveryAcknowledged()\">Ok</button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DbxErrorComponent, selector: "dbx-error", inputs: ["error", "iconOnly"], outputs: ["popoverOpened"] }, { kind: "component", type: DbxLinkComponent, selector: "dbx-link", inputs: ["ref", "href", "anchor"] }, { kind: "directive", type: DbxActionErrorDirective, selector: "[dbxActionError]" }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxFirebaseEmailFormComponent, selector: "dbx-firebase-email-form" }, { kind: "component", type: DbxFirebaseEmailRecoveryFormComponent, selector: "dbx-firebase-email-recovery-form" }, { kind: "directive", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFirebaseLoginEmailContentComponent, decorators: [{
             type: Component,
-            args: [{ imports: [NgTemplateOutlet, DbxErrorComponent, DbxLinkComponent, DbxActionErrorDirective, DbxActionFormDirective, MatButtonModule, DbxActionModule, DbxButtonComponent, DbxButtonSpacerDirective, DbxFirebaseEmailFormComponent, DbxFirebaseEmailRecoveryFormComponent, DbxFormSourceDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-firebase-login-email-content\">\n  @switch (emailModeSignal()) {\n    @case ('login') {\n      <ng-container *ngTemplateOutlet=\"loginView\"></ng-container>\n    }\n    @case ('recover') {\n      <ng-container *ngTemplateOutlet=\"resetPassword\"></ng-container>\n    }\n    @case ('recoversent') {\n      <ng-container *ngTemplateOutlet=\"resetPasswordSent\"></ng-container>\n    }\n  }\n</div>\n\n<!-- Login View -->\n<ng-template #loginView>\n  <ng-container dbxAction [dbxActionHandler]=\"handleLoginAction\">\n    <dbx-firebase-email-form [config]=\"formConfig\" dbxActionForm [dbxFormSource]=\"emailFormValueSignal()\"></dbx-firebase-email-form>\n    @if (isLoginMode) {\n      <div class=\"dbx-firebase-login-email-forgot-prompt\">\n        <dbx-link [anchor]=\"forgotAnchor\">Forgot Password?</dbx-link>\n      </div>\n    }\n    <div class=\"dbx-flex\">\n      <dbx-button class=\"dbx-button-wide\" [text]=\"buttonText\" [raised]=\"true\" color=\"primary\" dbxActionButton></dbx-button>\n      <dbx-button-spacer></dbx-button-spacer>\n      <span class=\"dbx-spacer\"></span>\n      <button mat-flat-button (click)=\"onCancel()\">Cancel</button>\n    </div>\n    <dbx-error dbxActionError></dbx-error>\n  </ng-container>\n</ng-template>\n\n<!-- Reset Password View -->\n<ng-template #resetPassword>\n  <div class=\"dbx-firebase-login-email-content-recovery\" dbxAction [dbxActionHandler]=\"handleRecoveryAction\" [dbxActionSuccessHandler]=\"handleRecoverySuccess\">\n    <dbx-firebase-email-recovery-form dbxActionForm [dbxFormSource]=\"recoveryFormValueSignal()\"></dbx-firebase-email-recovery-form>\n    <p class=\"dbx-hint\">An email will be sent to the above address to help you reset your password.</p>\n    <div class=\"dbx-flex\">\n      <dbx-button class=\"dbx-button-wide\" text=\"Send Recovery Email\" [raised]=\"true\" color=\"primary\" dbxActionButton></dbx-button>\n      <span class=\"dbx-spacer\"></span>\n      <button mat-flat-button (click)=\"onCancelReset()\">Cancel Recovery</button>\n    </div>\n    <dbx-error dbxActionError></dbx-error>\n  </div>\n</ng-template>\n\n<!-- Reset Password Sent -->\n<ng-template #resetPasswordSent>\n  <div class=\"dbx-firebase-login-email-content-recovery-sent\">\n    <p class=\"dbx-hint\">A recovery email was sent to the specified address. Please check your email for next steps.</p>\n    <button mat-raised-button (click)=\"clickedRecoveryAcknowledged()\">Ok</button>\n  </div>\n</ng-template>\n" }]
+            args: [{ imports: [NgTemplateOutlet, DbxErrorComponent, DbxLinkComponent, DbxActionErrorDirective, DbxActionFormDirective, MatButtonModule, DbxActionModule, DbxButtonComponent, DbxButtonSpacerDirective, DbxFirebaseEmailFormComponent, DbxFirebaseEmailRecoveryFormComponent, DbxFormSourceDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-firebase-login-email-content\" aria-live=\"polite\">\n  @switch (emailModeSignal()) {\n    @case ('login') {\n      <ng-container *ngTemplateOutlet=\"loginView\"></ng-container>\n    }\n    @case ('recover') {\n      <ng-container *ngTemplateOutlet=\"resetPassword\"></ng-container>\n    }\n    @case ('recoversent') {\n      <ng-container *ngTemplateOutlet=\"resetPasswordSent\"></ng-container>\n    }\n  }\n</div>\n\n<!-- Login View -->\n<ng-template #loginView>\n  <ng-container dbxAction [dbxActionHandler]=\"handleLoginAction\">\n    <dbx-firebase-email-form [config]=\"formConfig\" dbxActionForm [dbxFormSource]=\"emailFormValueSignal()\"></dbx-firebase-email-form>\n    @if (isLoginMode) {\n      <div class=\"dbx-firebase-login-email-forgot-prompt\">\n        <dbx-link [anchor]=\"forgotAnchor\">Forgot Password?</dbx-link>\n      </div>\n    }\n    <div class=\"dbx-flex\">\n      <dbx-button class=\"dbx-button-wide\" [text]=\"buttonText\" [raised]=\"true\" color=\"primary\" dbxActionButton></dbx-button>\n      <dbx-button-spacer></dbx-button-spacer>\n      <span class=\"dbx-spacer\"></span>\n      <button mat-flat-button (click)=\"onCancel()\">Cancel</button>\n    </div>\n    <dbx-error dbxActionError></dbx-error>\n  </ng-container>\n</ng-template>\n\n<!-- Reset Password View -->\n<ng-template #resetPassword>\n  <div class=\"dbx-firebase-login-email-content-recovery\" dbxAction [dbxActionHandler]=\"handleRecoveryAction\" [dbxActionSuccessHandler]=\"handleRecoverySuccess\">\n    <dbx-firebase-email-recovery-form dbxActionForm [dbxFormSource]=\"recoveryFormValueSignal()\"></dbx-firebase-email-recovery-form>\n    <p class=\"dbx-hint\">An email will be sent to the above address to help you reset your password.</p>\n    <div class=\"dbx-flex\">\n      <dbx-button class=\"dbx-button-wide\" text=\"Send Recovery Email\" [raised]=\"true\" color=\"primary\" dbxActionButton></dbx-button>\n      <span class=\"dbx-spacer\"></span>\n      <button mat-flat-button (click)=\"onCancelReset()\">Cancel Recovery</button>\n    </div>\n    <dbx-error dbxActionError></dbx-error>\n  </div>\n</ng-template>\n\n<!-- Reset Password Sent -->\n<ng-template #resetPasswordSent>\n  <div class=\"dbx-firebase-login-email-content-recovery-sent\" role=\"status\">\n    <p class=\"dbx-hint\">A recovery email was sent to the specified address. Please check your email for next steps.</p>\n    <button mat-raised-button (click)=\"clickedRecoveryAcknowledged()\">Ok</button>\n  </div>\n</ng-template>\n" }]
         }] });
 
 /**
@@ -1432,14 +1534,45 @@ 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 */ []));
     providerCategories = input(...(ngDevMode ? [undefined, { debugName: "providerCategories" }] : /* istanbul ignore next */ []));
+    loginModeAriaLabelSignal = computed(() => {
+        switch (this.loginMode()) {
+            case 'register':
+                return 'Registration options';
+            case 'link':
+                return 'Link account options';
+            case 'unlink':
+                return 'Unlink account options';
+            default:
+                return 'Login options';
+        }
+    }, ...(ngDevMode ? [{ debugName: "loginModeAriaLabelSignal" }] : /* istanbul ignore next */ []));
+    get loginModeAriaLabel() {
+        return this.loginModeAriaLabelSignal();
+    }
     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 +1597,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,9 +1608,9 @@ 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: { attributes: { "role": "list" }, properties: { "attr.aria-label": "loginModeAriaLabel" }, classAttribute: "dbx-firebase-login-list dbx-button-column" }, ngImport: i0, template: `
     @for (config of providersInjectionConfigsSignal(); track config.loginMethodType) {
-      <div class="dbx-firebase-login-item">
+      <div class="dbx-firebase-login-item" role="listitem">
         <dbx-injection [config]="config"></dbx-injection>
       </div>
     }
@@ -1485,13 +1622,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
                     selector: 'dbx-firebase-login-list',
                     template: `
     @for (config of providersInjectionConfigsSignal(); track config.loginMethodType) {
-      <div class="dbx-firebase-login-item">
+      <div class="dbx-firebase-login-item" role="listitem">
         <dbx-injection [config]="config"></dbx-injection>
       </div>
     }
   `,
                     host: {
-                        class: 'dbx-firebase-login-list'
+                        class: 'dbx-firebase-login-list dbx-button-column',
+                        role: 'list',
+                        '[attr.aria-label]': 'loginModeAriaLabel'
                     },
                     standalone: true,
                     imports: [DbxInjectionComponent]
@@ -1638,73 +1777,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 +1793,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 +1813,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 +4234,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) => {
@@ -5641,7 +5679,7 @@ class DbxFirebaseNotificationItemListViewItemComponent extends AbstractDbxValueL
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFirebaseNotificationItemListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", type: DbxFirebaseNotificationItemListViewItemComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    <div class="dbx-list-item-padded dbx-list-two-line-item dbx-firebase-notificationitem-list-view-item">
+    <div class="dbx-list-item-padded dbx-list-two-line-item dbx-firebase-notificationitem-list-view-item" role="article" [attr.aria-label]="subject">
       <div class="item-left">
         <span class="notificationitem-subject">{{ subject }}</span>
         <span class="notificationitem-message item-details">{{ message | cutText: 90 }}</span>
@@ -5654,7 +5692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
             type: Component,
             args: [{
                     template: `
-    <div class="dbx-list-item-padded dbx-list-two-line-item dbx-firebase-notificationitem-list-view-item">
+    <div class="dbx-list-item-padded dbx-list-two-line-item dbx-firebase-notificationitem-list-view-item" role="article" [attr.aria-label]="subject">
       <div class="item-left">
         <span class="notificationitem-subject">{{ subject }}</span>
         <span class="notificationitem-message item-details">{{ message | cutText: 90 }}</span>
@@ -5676,11 +5714,11 @@ class DbxFirebaseNotificationItemContentComponent {
     message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : /* istanbul ignore next */ []));
     date = input(...(ngDevMode ? [undefined, { debugName: "date" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFirebaseNotificationItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFirebaseNotificationItemContentComponent, isStandalone: true, selector: "dbx-firebase-notificationitem-content", inputs: { subject: { classPropertyName: "subject", publicName: "subject", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-firebase-notificationitem-content\">\n  <div class=\"notificationitem-header dbx-pb2\">\n    @if (subject()) {\n      <div class=\"notificationitem-subject dbx-pb1\">{{ subject() }}</div>\n    }\n    <ng-content select=\"[header]\"></ng-content>\n    @if (date()) {\n      <div class=\"notificationitem-date dbx-label dbx-small\">{{ date() | date: 'medium' }}</div>\n    }\n  </div>\n  <ng-content select=\"[premessage]\"></ng-content>\n  <div class=\"notificationitem-message\">{{ message() }}</div>\n  <ng-content></ng-content>\n</div>\n", styles: [".dbx-firebase-notificationitem-content .notificationitem-subject{font-size:1.25em}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFirebaseNotificationItemContentComponent, isStandalone: true, selector: "dbx-firebase-notificationitem-content", inputs: { subject: { classPropertyName: "subject", publicName: "subject", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-firebase-notificationitem-content\" role=\"article\" [attr.aria-label]=\"subject()\">\n  <div class=\"notificationitem-header dbx-pb2\">\n    @if (subject()) {\n      <div class=\"notificationitem-subject dbx-pb1\">{{ subject() }}</div>\n    }\n    <ng-content select=\"[header]\"></ng-content>\n    @if (date()) {\n      <div class=\"notificationitem-date dbx-label dbx-small\">{{ date() | date: 'medium' }}</div>\n    }\n  </div>\n  <ng-content select=\"[premessage]\"></ng-content>\n  <div class=\"notificationitem-message\">{{ message() }}</div>\n  <ng-content></ng-content>\n</div>\n", styles: [".dbx-firebase-notificationitem-content .notificationitem-subject{font-size:1.25em}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFirebaseNotificationItemContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-firebase-notificationitem-content', imports: [DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-firebase-notificationitem-content\">\n  <div class=\"notificationitem-header dbx-pb2\">\n    @if (subject()) {\n      <div class=\"notificationitem-subject dbx-pb1\">{{ subject() }}</div>\n    }\n    <ng-content select=\"[header]\"></ng-content>\n    @if (date()) {\n      <div class=\"notificationitem-date dbx-label dbx-small\">{{ date() | date: 'medium' }}</div>\n    }\n  </div>\n  <ng-content select=\"[premessage]\"></ng-content>\n  <div class=\"notificationitem-message\">{{ message() }}</div>\n  <ng-content></ng-content>\n</div>\n", styles: [".dbx-firebase-notificationitem-content .notificationitem-subject{font-size:1.25em}\n"] }]
+            args: [{ selector: 'dbx-firebase-notificationitem-content', imports: [DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-firebase-notificationitem-content\" role=\"article\" [attr.aria-label]=\"subject()\">\n  <div class=\"notificationitem-header dbx-pb2\">\n    @if (subject()) {\n      <div class=\"notificationitem-subject dbx-pb1\">{{ subject() }}</div>\n    }\n    <ng-content select=\"[header]\"></ng-content>\n    @if (date()) {\n      <div class=\"notificationitem-date dbx-label dbx-small\">{{ date() | date: 'medium' }}</div>\n    }\n  </div>\n  <ng-content select=\"[premessage]\"></ng-content>\n  <div class=\"notificationitem-message\">{{ message() }}</div>\n  <ng-content></ng-content>\n</div>\n", styles: [".dbx-firebase-notificationitem-content .notificationitem-subject{font-size:1.25em}\n"] }]
         }], propDecorators: { subject: [{ type: i0.Input, args: [{ isSignal: true, alias: "subject", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }] } });
 
 /**
@@ -5912,7 +5950,7 @@ class DbxFirebaseNotificationItemStorePopoverButtonComponent extends AbstractPop
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFirebaseNotificationItemStorePopoverButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.3", type: DbxFirebaseNotificationItemStorePopoverButtonComponent, isStandalone: true, selector: "dbx-firebase-notification-item-store-popover-button", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <dbx-icon-button #button (buttonClick)="showNotificationsPopover()" icon="notifications"></dbx-icon-button>
+    <dbx-icon-button #button (buttonClick)="showNotificationsPopover()" icon="notifications" aria-label="Notifications"></dbx-icon-button>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxIconButtonComponent, selector: "dbx-icon-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFirebaseNotificationItemStorePopoverButtonComponent, decorators: [{
@@ -5920,7 +5958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImpor
             args: [{
                     selector: 'dbx-firebase-notification-item-store-popover-button',
                     template: `
-    <dbx-icon-button #button (buttonClick)="showNotificationsPopover()" icon="notifications"></dbx-icon-button>
+    <dbx-icon-button #button (buttonClick)="showNotificationsPopover()" icon="notifications" aria-label="Notifications"></dbx-icon-button>
   `,
                     standalone: true,
                     imports: [DbxIconButtonComponent],