@dereekb/dbx-firebase 13.32.0 → 13.34.0

package/fesm2022/dereekb-dbx-firebase-oidc.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { input, computed, output, ChangeDetectionStrategy, Component, inject, Injectable, signal, effect, Directive, viewChild, provideAppInitializer, makeEnvironmentProviders } from '@angular/core';
 import * as i1 from '@dereekb/dbx-web';
-import { DbxBasicLoadingComponent, DbxErrorComponent, DbxButtonComponent, DbxAvatarComponent, DbxButtonSpacerDirective, DbxActionSnackbarErrorDirective, AbstractDbxSelectionListWrapperDirective, DbxListWrapperComponentImportsModule, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, AbstractDbxSelectionListViewDirective, DbxSelectionValueListViewComponentImportsModule, provideDbxListView, DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, AbstractDbxValueListViewItemComponent, provideDbxListViewWrapper, DbxSpacerDirective, DbxActionConfirmDirective, DbxContentPitDirective, DbxDetailBlockComponent, DbxClickToCopyTextComponent } from '@dereekb/dbx-web';
+import { DbxBasicLoadingComponent, DbxErrorComponent, DbxButtonComponent, DbxAvatarComponent, DbxButtonSpacerDirective, DbxActionSnackbarErrorDirective, AbstractDbxSelectionListWrapperDirective, DbxListWrapperComponentImportsModule, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, AbstractDbxSelectionListViewDirective, DbxSelectionValueListViewComponentImportsModule, provideDbxListView, DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, AbstractDbxValueListViewItemComponent, DbxContentPitDirective, DbxLinkComponent, provideDbxListViewWrapper, DbxSpacerDirective, DbxActionConfirmDirective, DbxDetailBlockComponent, DbxClickToCopyTextComponent } from '@dereekb/dbx-web';
 import { readableError, SPACE_STRING_SPLIT_JOIN, separateValues, generatePkceCodeVerifier, generatePkceCodeChallenge } from '@dereekb/util';
 import { DbxInjectionComponent, DbxActionDirective, DbxActionHandlerDirective, DbxActionValueDirective, DbxActionButtonDirective, DBX_INJECTION_COMPONENT_DATA, DbxRouterService, clean, dbxRouteParamReaderInstance, completeOnDestroy, DbxActionEnforceModifiedDirective, DbxAppAuthRouterService } from '@dereekb/dbx-core';
 import { of, map, first, switchMap, tap, BehaviorSubject } from 'rxjs';
@@ -185,7 +185,7 @@ class DbxFirebaseOAuthConsentViewComponent {
           @if (clientNameSignal()) {
             <p class="dbx-firebase-oauth-consent-prompt">
               <strong>{{ clientNameSignal() }}</strong>
-              is requesting these permissions:
+              wants access to your account.
             </p>
           }
 
@@ -203,7 +203,7 @@ class DbxFirebaseOAuthConsentViewComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [".dbx-firebase-oauth-consent-view .dbx-firebase-oauth-consent-header-info{align-items:center;gap:12px}\n"], dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: DbxAvatarComponent, selector: "dbx-avatar", inputs: ["context", "avatarSelector", "avatarUid", "avatarUrl", "avatarName", "avatarKey", "avatarIcon", "avatarStyle", "avatarSize", "avatarHideOnError"] }, { kind: "component", type: DbxBasicLoadingComponent, selector: "dbx-basic-loading", inputs: ["diameter", "mode", "text", "linear", "show", "loading", "error"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "directive", type: DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "directive", type: DbxActionSnackbarErrorDirective, selector: "[dbxActionSnackbarError]", inputs: ["dbxActionSnackbarError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".dbx-firebase-oauth-consent-view .dbx-firebase-oauth-consent-header-info{align-items:center;gap:12px}\n"], dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "component", type: DbxAvatarComponent, selector: "dbx-avatar", inputs: ["context", "avatarSelector", "avatarUid", "avatarUrl", "avatarName", "avatarKey", "avatarIcon", "avatarStyle", "avatarSize", "avatarHideOnError", "avatarTile", "avatarColor", "avatarColorTone", "avatarImageFit", "avatarImageFilter", "avatarIgnoreDefaultUrl"] }, { kind: "component", type: DbxBasicLoadingComponent, selector: "dbx-basic-loading", inputs: ["diameter", "mode", "text", "linear", "show", "loading", "error"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "directive", type: DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "directive", type: DbxActionSnackbarErrorDirective, selector: "[dbxActionSnackbarError]", inputs: ["dbxActionSnackbarError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFirebaseOAuthConsentViewComponent, decorators: [{
             type: Component,
@@ -233,7 +233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
           @if (clientNameSignal()) {
             <p class="dbx-firebase-oauth-consent-prompt">
               <strong>{{ clientNameSignal() }}</strong>
-              is requesting these permissions:
+              wants access to your account.
             </p>
           }
 
@@ -330,11 +330,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * Selection list view that pairs with `DbxFirebaseOAuthConsentScopeListComponent`.
  * Maps each `OAuthConsentScope` to a `DbxValueListItem` keyed by the scope name
  * and renders it through `DbxFirebaseOAuthConsentScopeListItemComponent`.
+ *
+ * Scopes flagged `required` map to disabled rows so they render selected but cannot be toggled
+ * off — the surrounding `dbxListItemIsSelectedModifier` owns the `selected` flag (driven by the
+ * form value), and only `disabled` is set here.
  */
 class DbxFirebaseOAuthConsentScopeListViewComponent extends AbstractDbxSelectionListViewDirective {
     config = {
         componentClass: DbxFirebaseOAuthConsentScopeListItemComponent,
-        mapValuesToItemValues: (values) => of(values.map((scope) => ({ ...scope, key: scope.name, itemValue: scope })))
+        mapValuesToItemValues: (values) => of(values.map((scope) => ({ ...scope, key: scope.name, itemValue: scope, disabled: scope.required === true })))
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFirebaseOAuthConsentScopeListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFirebaseOAuthConsentScopeListViewComponent, isStandalone: true, selector: "dbx-firebase-oauth-consent-scope-list-view", providers: provideDbxListView(DbxFirebaseOAuthConsentScopeListViewComponent), usesInheritance: true, ngImport: i0, template: "<dbx-selection-list-view [config]=\"config\"></dbx-selection-list-view>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxSelectionValueListViewComponentImportsModule }, { kind: "component", type: i1.DbxSelectionValueListViewComponent, selector: "dbx-selection-list-view" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -355,6 +359,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * row for both selected and unselected scopes — the selection chrome (the
  * leading checkbox/highlight) is provided by the wrapping
  * `dbx-selection-list-view`.
+ *
+ * Required scopes get an extra "Always granted" note so the row explains why its checkbox is
+ * locked on.
  */
 class DbxFirebaseOAuthConsentScopeListItemComponent extends AbstractDbxValueListViewItemComponent {
     get name() {
@@ -363,6 +370,9 @@ class DbxFirebaseOAuthConsentScopeListItemComponent extends AbstractDbxValueList
     get description() {
         return this.itemValue.description;
     }
+    get required() {
+        return this.itemValue.required === true;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFirebaseOAuthConsentScopeListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxFirebaseOAuthConsentScopeListItemComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-list-item-padded dbx-list-item-padded-thick dbx-list-two-line-item">
@@ -371,6 +381,9 @@ class DbxFirebaseOAuthConsentScopeListItemComponent extends AbstractDbxValueList
         @if (description) {
           <div class="item-details">{{ description }}</div>
         }
+        @if (required) {
+          <div class="item-details dbx-hint">Always granted</div>
+        }
       </div>
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -385,6 +398,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         @if (description) {
           <div class="item-details">{{ description }}</div>
         }
+        @if (required) {
+          <div class="item-details dbx-hint">Always granted</div>
+        }
       </div>
     </div>
   `,
@@ -411,20 +427,30 @@ const DEFAULT_OAUTH_CONSENT_SCOPES_REQUIRED_VALIDATOR_MESSAGE = 'Select at least
  * The list renders bare (no Material form-field wrapper) and without the
  * default 300px height cap so it grows to fit the scope list.
  *
+ * Required scopes are seeded into the initial value and rendered as disabled rows, so they cannot
+ * be deselected. Because they are always present in the value, the "select at least one" validator
+ * compares against the required count rather than zero — and is skipped entirely when every
+ * requested scope is required (there would be nothing left to select).
+ *
  * @param config - The consent scopes form fields configuration.
  * @returns A `FormConfig` whose single field selects an `OidcScope[]` of granted scopes.
  */
 function oauthConsentScopesFormConfig(config) {
-    const { optionalScopes, initiallySelected } = config;
-    const value = (initiallySelected ?? optionalScopes.map((scope) => scope.name)).slice();
-    const optionalScopesArray = optionalScopes.slice();
-    const validators = [
-        {
-            type: 'custom',
-            expression: 'fieldValue && fieldValue.length > 0',
-            kind: OAUTH_CONSENT_SCOPES_REQUIRED_VALIDATOR_KIND
-        }
-    ];
+    const { scopes, initiallySelected } = config;
+    const scopesArray = scopes.slice();
+    const requiredScopeNames = scopesArray.filter((scope) => scope.required).map((scope) => scope.name);
+    const selectedScopeNames = initiallySelected ?? scopesArray.map((scope) => scope.name);
+    const value = Array.from(new Set([...requiredScopeNames, ...selectedScopeNames]));
+    const hasOptionalScopes = requiredScopeNames.length < scopesArray.length;
+    const validators = hasOptionalScopes
+        ? [
+            {
+                type: 'custom',
+                expression: `fieldValue && fieldValue.length > ${requiredScopeNames.length}`,
+                kind: OAUTH_CONSENT_SCOPES_REQUIRED_VALIDATOR_KIND
+            }
+        ]
+        : [];
     return {
         fields: [
             dbxForgeListSelectionField({
@@ -437,7 +463,7 @@ function oauthConsentScopesFormConfig(config) {
                 props: {
                     listComponentClass: of(DbxFirebaseOAuthConsentScopeListComponent),
                     readKey: (scope) => scope.name,
-                    state$: of(successResult(optionalScopesArray)),
+                    state$: of(successResult(scopesArray)),
                     wrapped: false,
                     maxHeight: 'none'
                 }
@@ -576,6 +602,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Height cap applied to the scope pit while the selection list is expanded. Bounds a long
+ * scope list so it scrolls inside the pit instead of pushing the consent screen's
+ * Approve/Deny buttons below the fold on small screens.
+ */
+const OAUTH_CONSENT_SCOPES_PIT_SCROLLABLE_HEIGHT = 'medium';
 /**
  * Default consent scope view component.
  *
@@ -587,9 +619,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * form's value participates in the surrounding `dbxAction` (the consent
  * view's outer Approve action).
  *
- * Required scopes are not user-selectable. They are surfaced as an "Always
- * granted" hint above the form because the server enforces them regardless
- * of payload — including them in the selection list would just add noise.
+ * The scopes live inside a `dbx-content-pit` that starts collapsed to a single
+ * underlined summary line ("N permissions are being requested. Click here to
+ * edit requested permissions."). Clicking it expands the pit to reveal the
+ * selection list so the user can customize which scopes they grant. Starting
+ * collapsed keeps the consent screen short enough that Approve/Deny are visible
+ * without scrolling even when a client requests many scopes, and the expanded
+ * pit is height-capped and scrollable for the same reason.
+ *
+ * The form itself is always mounted (hidden rather than removed while
+ * collapsed) so `dbxActionForm` keeps supplying the granted-scope value to the
+ * consent action even when the user never expands the pit.
+ *
+ * Required scopes are listed first and render as selected-and-disabled rows carrying an "Always
+ * granted" note, so their description is visible alongside every other scope while staying
+ * non-deselectable. The server force-grants them regardless of the submitted payload.
  *
  * Apps can override this default via
  * `DbxFirebaseOidcConfig.consentScopeListViewClass` or
@@ -600,51 +644,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 class DbxFirebaseOAuthConsentScopeDefaultViewComponent {
     _oidcConfigService = inject(DbxFirebaseOidcConfigService);
     _data = inject(DBX_INJECTION_COMPONENT_DATA);
+    _customizing = signal(false, ...(ngDevMode ? [{ debugName: "_customizing" }] : /* istanbul ignore next */ []));
+    /**
+     * Every requested scope paired with its human-readable description, required ones first so the
+     * always-granted rows head the list.
+     */
     mappedScopesSignal = computed(() => {
         const availableScopes = this._oidcConfigService.availableScopes;
         const availableScopeValues = new Set(availableScopes.map((s) => s.value));
+        const requiredSet = new Set(this._data.requiredScopes ?? []);
         const { included: knownScopes, excluded: unknownScopes } = separateValues(this._data.scopes, (name) => availableScopeValues.has(name));
-        return [
+        const mappedScopes = [
             ...knownScopes.map((name) => {
                 const details = availableScopes.find((s) => s.value === name);
-                return { name, description: details?.description ?? '' };
+                return { name, description: details?.description ?? '', required: requiredSet.has(name) };
             }),
-            ...unknownScopes.map((name) => ({ name, description: 'unknown' }))
+            ...unknownScopes.map((name) => ({ name, description: 'unknown', required: requiredSet.has(name) }))
         ];
+        const { included: requiredScopes, excluded: optionalScopes } = separateValues(mappedScopes, (scope) => scope.required === true);
+        return [...requiredScopes, ...optionalScopes];
     }, ...(ngDevMode ? [{ debugName: "mappedScopesSignal" }] : /* istanbul ignore next */ []));
-    optionalScopesSignal = computed(() => {
-        const requiredSet = new Set(this._data.requiredScopes ?? []);
-        return this.mappedScopesSignal().filter((scope) => !requiredSet.has(scope.name));
-    }, ...(ngDevMode ? [{ debugName: "optionalScopesSignal" }] : /* istanbul ignore next */ []));
-    alwaysGrantedLabelSignal = computed(() => {
-        const required = this._data.requiredScopes ?? [];
-        return required.length > 0 ? required.join(', ') : null;
-    }, ...(ngDevMode ? [{ debugName: "alwaysGrantedLabelSignal" }] : /* istanbul ignore next */ []));
     formFieldsConfigSignal = computed(() => ({
-        optionalScopes: this.optionalScopesSignal()
+        scopes: this.mappedScopesSignal()
     }), ...(ngDevMode ? [{ debugName: "formFieldsConfigSignal" }] : /* istanbul ignore next */ []));
+    /**
+     * Leading sentence of the collapsed summary — the number of scopes the client is requesting,
+     * counting the always-granted ones since the expanded pit accounts for them too.
+     */
+    requestedScopesSummarySignal = computed(() => {
+        const count = this.mappedScopesSignal().length;
+        return count === 1 ? '1 permission is being requested.' : `${count} permissions are being requested.`;
+    }, ...(ngDevMode ? [{ debugName: "requestedScopesSummarySignal" }] : /* istanbul ignore next */ []));
+    /**
+     * True once the user has expanded the pit to review/customize the requested scopes.
+     */
+    customizingSignal = this._customizing.asReadonly();
+    pitScrollableSignal = computed(() => (this.customizingSignal() ? OAUTH_CONSENT_SCOPES_PIT_SCROLLABLE_HEIGHT : undefined), ...(ngDevMode ? [{ debugName: "pitScrollableSignal" }] : /* istanbul ignore next */ []));
+    customizeAnchor = {
+        onClick: () => this.showScopeCustomization()
+    };
+    showScopeCustomization() {
+        this._customizing.set(true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFirebaseOAuthConsentScopeDefaultViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxFirebaseOAuthConsentScopeDefaultViewComponent, isStandalone: true, selector: "dbx-firebase-oauth-consent-scope-default-view", ngImport: i0, template: `
-    @if (alwaysGrantedLabelSignal(); as label) {
-      <p class="dbx-firebase-oauth-consent-always-granted dbx-hint">Always granted: {{ label }}</p>
-    }
-    <dbx-firebase-oauth-consent-scope-form dbxActionForm [config]="formFieldsConfigSignal()"></dbx-firebase-oauth-consent-scope-form>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxFirebaseOAuthConsentScopeFormComponent, selector: "dbx-firebase-oauth-consent-scope-form" }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    <dbx-content-pit class="dbx-firebase-oauth-consent-scopes-pit" [scrollable]="pitScrollableSignal()">
+      <div class="dbx-content-pit-scrollable-content">
+        @if (!customizingSignal()) {
+          <p class="dbx-firebase-oauth-consent-scopes-summary">
+            <dbx-link [anchor]="customizeAnchor">{{ requestedScopesSummarySignal() }} Click here to edit requested permissions.</dbx-link>
+          </p>
+        }
+        <!-- Hidden rather than removed while collapsed so dbxActionForm keeps supplying the granted scopes even when the pit is never expanded. -->
+        <div [hidden]="!customizingSignal()">
+          <dbx-firebase-oauth-consent-scope-form dbxActionForm [config]="formFieldsConfigSignal()"></dbx-firebase-oauth-consent-scope-form>
+        </div>
+      </div>
+    </dbx-content-pit>
+  `, isInline: true, styles: [".dbx-firebase-oauth-consent-scopes-pit{--mat-list-list-item-disabled-label-text-opacity: 1;--mat-checkbox-disabled-selected-icon-color: var(--mat-sys-on-surface-variant);--mat-checkbox-disabled-selected-checkmark-color: var(--mat-sys-surface)}\n"], dependencies: [{ kind: "component", type: DbxFirebaseOAuthConsentScopeFormComponent, selector: "dbx-firebase-oauth-consent-scope-form" }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }, { kind: "directive", type: DbxContentPitDirective, selector: "dbx-content-pit, [dbxContentPit]", inputs: ["scrollable", "square"] }, { kind: "component", type: DbxLinkComponent, selector: "dbx-link", inputs: ["ref", "href", "anchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFirebaseOAuthConsentScopeDefaultViewComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'dbx-firebase-oauth-consent-scope-default-view',
-                    template: `
-    @if (alwaysGrantedLabelSignal(); as label) {
-      <p class="dbx-firebase-oauth-consent-always-granted dbx-hint">Always granted: {{ label }}</p>
-    }
-    <dbx-firebase-oauth-consent-scope-form dbxActionForm [config]="formFieldsConfigSignal()"></dbx-firebase-oauth-consent-scope-form>
-  `,
-                    imports: [DbxFirebaseOAuthConsentScopeFormComponent, DbxActionFormDirective],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
+            args: [{ selector: 'dbx-firebase-oauth-consent-scope-default-view', template: `
+    <dbx-content-pit class="dbx-firebase-oauth-consent-scopes-pit" [scrollable]="pitScrollableSignal()">
+      <div class="dbx-content-pit-scrollable-content">
+        @if (!customizingSignal()) {
+          <p class="dbx-firebase-oauth-consent-scopes-summary">
+            <dbx-link [anchor]="customizeAnchor">{{ requestedScopesSummarySignal() }} Click here to edit requested permissions.</dbx-link>
+          </p>
+        }
+        <!-- Hidden rather than removed while collapsed so dbxActionForm keeps supplying the granted scopes even when the pit is never expanded. -->
+        <div [hidden]="!customizingSignal()">
+          <dbx-firebase-oauth-consent-scope-form dbxActionForm [config]="formFieldsConfigSignal()"></dbx-firebase-oauth-consent-scope-form>
+        </div>
+      </div>
+    </dbx-content-pit>
+  `, imports: [DbxFirebaseOAuthConsentScopeFormComponent, DbxActionFormDirective, DbxContentPitDirective, DbxLinkComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [".dbx-firebase-oauth-consent-scopes-pit{--mat-list-list-item-disabled-label-text-opacity: 1;--mat-checkbox-disabled-selected-icon-color: var(--mat-sys-on-surface-variant);--mat-checkbox-disabled-selected-checkmark-color: var(--mat-sys-surface)}\n"] }]
         }] });
 
 // MARK: Service