@dereekb/dbx-firebase 12.6.15 → 12.6.16

package/fesm2022/dereekb-dbx-firebase.mjs

@@ -6,13 +6,13 @@ import { switchMap, of, shareReplay, map, distinctUntilChanged, EMPTY, catchErro
 import * as i2 from '@dereekb/dbx-core';
 import { loggedInObsFromIsLoggedIn, loggedOutObsFromIsLoggedIn, authUserIdentifier, DbxInjectionContext, DbxInjectionComponent, AbstractForwardDbxInjectionContextDirective, DbxInjectionContextDirective, DBX_INJECTION_COMPONENT_DATA, DbxAuthService, DbxActionButtonDirective, DbxActionDirective, DbxActionEnforceModifiedDirective, DbxActionHandlerDirective, DbxActionAutoTriggerDirective, provideDbxRouteModelIdDirectiveDelegate, provideDbxRouteModelKeyDirectiveDelegate, AbstractSubscriptionDirective, AbstractIfDirective, LockSetComponentStore, newWithInjector, CutTextPipe, DbxActionContextStoreSourceInstance, DbxActionHandlerInstance, SimpleStorageAccessorFactory, dbxRouteParamReaderInstance, DbxRouteParamDefaultRedirectInstance } from '@dereekb/dbx-core';
 import { Auth, authState, idToken, GoogleAuthProvider, FacebookAuthProvider, TwitterAuthProvider, GithubAuthProvider, signInWithPopup, createUserWithEmailAndPassword, signInWithEmailAndPassword, signInAnonymously, reauthenticateWithPopup, provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth';
-import { AUTH_ADMIN_ROLE, cachedGetter, urlWithoutParameters, addToSet, removeFromSet, filterMaybeArrayValues, mapIterable, asArray, excludeValuesFromArray, containsStringAnyCase, addToSetCopy, iterableToArray, runAsyncTasksForValues, pushArrayItemsIntoArray, forEachKeyValue, countAllInNestedArray, invertDecision, separateValues, sortByNumberFunction, readableError, isMaybeSo, firstValue, splitJoinRemainder, MS_IN_HOUR, SECONDS_IN_MINUTE, MS_IN_DAY, unixDateTimeSecondsNumberForNow, MS_IN_MINUTE, addMilliseconds, unixDateTimeSecondsNumberFromDate, dateFromDateOrTimeSecondsNumber, MS_IN_SECOND, isPast } from '@dereekb/util';
+import { AUTH_ADMIN_ROLE, cachedGetter, urlWithoutParameters, addToSet, removeFromSet, filterMaybeArrayValues, mapIterable, asArray, excludeValuesFromArray, containsStringAnyCase, addToSetCopy, iterableToArray, runAsyncTasksForValues, pushArrayItemsIntoArray, forEachKeyValue, countAllInNestedArray, invertDecision, filterUniqueValues, reverseCompareFn, sortByNumberFunction, separateValues, readableError, isMaybeSo, firstValue, splitJoinRemainder, MS_IN_HOUR, SECONDS_IN_MINUTE, MS_IN_DAY, unixDateTimeSecondsNumberForNow, MS_IN_MINUTE, addMilliseconds, unixDateTimeSecondsNumberFromDate, dateFromDateOrTimeSecondsNumber, MS_IN_SECOND, isPast } from '@dereekb/util';
 import { safeFormatToISO8601DateString, msToSeconds, isSameDate } from '@dereekb/date';
 import { sendPasswordResetEmail } from 'firebase/auth';
 import { getToken, initializeAppCheck, ReCaptchaV3Provider } from 'firebase/app-check';
 import { AppCheck, provideAppCheck } from '@angular/fire/app-check';
 import * as i1$1 from '@dereekb/dbx-web';
-import { DbxLinkComponent, DbxActionModule, DbxButtonModule, DbxErrorComponent, DbxActionErrorDirective, DbxButtonComponent, DbxButtonSpacerDirective, DbxRouterAnchorModule, DbxWidgetService, AbstractDbxSelectionListWrapperDirective, provideDbxListViewWrapper, DbxListWrapperComponentImportsModule, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, AbstractDbxSelectionListViewDirective, provideDbxListView, DbxSelectionValueListViewComponentImportsModule, DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, AbstractDbxValueListViewItemComponent, TwoColumnsContextStore, DbxAnchorComponent, DbxTwoColumnFullLeftDirective, DbxWidgetViewComponent, DbxTwoColumnComponent, DbxTwoBlockComponent, DbxTwoColumnRightComponent, AbstractPopupDirective, DbxPopupService, DbxPopupContentComponent, DbxPopupControlsComponent, DbxModelTypesService, DbxModelTrackerService, allDbxModelViewTrackerEventModelKeys, DbxListItemAnchorModifierDirective, DbxValueListItemModifierDirective, AbstractPopoverDirective, DbxPopoverContentComponent, DbxPopoverHeaderComponent, DbxPopoverScrollContentDirective, DbxListEmptyContentComponent, AbstractPopoverRefDirective, DbxPopoverService, DbxIconButtonComponent, DbxLoadingComponent, DbxDetailBlockComponent, DbxClickToCopyTextComponent, DbxContentPitDirective, DbxModelObjectStateService, DbxListViewWrapper, AbstractDbxWidgetComponent, DbxPopoverInteractionModule, DbxListModifierModule, DbxWebFilePreviewService, DbxActionSnackbarErrorDirective, DbxActionDialogDirective, DbxFileUploadComponent, DbxActionLoadingContextDirective, DbxFileUploadActionSyncDirective } from '@dereekb/dbx-web';
+import { DbxLinkComponent, DbxActionModule, DbxButtonModule, DbxErrorComponent, DbxActionErrorDirective, DbxButtonComponent, DbxButtonSpacerDirective, DbxRouterAnchorModule, DbxWidgetService, AbstractDbxSelectionListWrapperDirective, provideDbxListViewWrapper, DbxListWrapperComponentImportsModule, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, AbstractDbxSelectionListViewDirective, provideDbxListView, DbxSelectionValueListViewComponentImportsModule, DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, AbstractDbxValueListViewItemComponent, TwoColumnsContextStore, DbxAnchorComponent, DbxTwoColumnFullLeftDirective, DbxWidgetViewComponent, DbxTwoColumnComponent, DbxTwoBlockComponent, DbxTwoColumnRightComponent, AbstractPopupDirective, DbxPopupService, DbxPopupContentComponent, DbxPopupControlsComponent, DbxModelTypesService, DbxModelTrackerService, allDbxModelViewTrackerEventModelKeys, DbxListItemAnchorModifierDirective, DbxValueListItemModifierDirective, AbstractPopoverDirective, DbxPopoverContentComponent, DbxPopoverHeaderComponent, DbxPopoverScrollContentDirective, DbxListEmptyContentComponent, AbstractPopoverRefDirective, DbxPopoverService, DbxIconButtonComponent, DbxLoadingComponent, DbxDetailBlockComponent, DbxClickToCopyTextComponent, DbxDownloadTextViewComponent, DbxContentPitDirective, DbxModelObjectStateService, DbxListViewWrapper, AbstractDbxWidgetComponent, DbxPopoverInteractionModule, DbxListModifierModule, DbxWebFilePreviewService, DbxActionSnackbarErrorDirective, DbxActionDialogDirective, DbxFileUploadComponent, DbxActionLoadingContextDirective, DbxFileUploadActionSyncDirective } from '@dereekb/dbx-web';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i1$2 from '@dereekb/dbx-form';
@@ -3506,6 +3506,9 @@ class DbxFirebaseModelEntitiesWidgetService {
     _commonComponentClass;
     _debugComponentClass;
     _entries = new Map();
+    _sortPriorityMap = cachedGetter(() => {
+        return new Map(mapIterable(this._entries.values(), (entry) => [entry.identity, entry.sortPriority ?? -1]));
+    });
     constructor(initialConfig) {
         this._commonComponentClass = initialConfig?.commonComponentClass;
         this._debugComponentClass = initialConfig?.debugComponentClass;
@@ -3540,6 +3543,8 @@ class DbxFirebaseModelEntitiesWidgetService {
                 this._entries.set(entry.identity, entry);
             }
         });
+        // Invalidate the cache
+        this._sortPriorityMap.reset();
     }
     // MARK: Get
     getAllRegisteredWidgetIdentities() {
@@ -3562,6 +3567,9 @@ class DbxFirebaseModelEntitiesWidgetService {
     getWidgetEntries(identities) {
         return filterMaybeArrayValues(mapIterable(identities ?? [], (x) => this.getWidgetEntry(x)));
     }
+    getSortPriorityMap() {
+        return this._sortPriorityMap();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFirebaseModelEntitiesWidgetService, deps: [{ token: DbxFirebaseModelEntitiesWidgetServiceConfig, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFirebaseModelEntitiesWidgetService });
 }
@@ -3685,24 +3693,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class DbxFirebaseModelEntitiesComponent {
+    entitiesWidgetService = inject(DbxFirebaseModelEntitiesWidgetService);
     /**
      * Whether the accordion should allow multiple expanded panels.
      */
     multi = input(true);
     entities = input();
     entities$ = toObservable(this.entities).pipe(switchMapMaybe(), map((x) => x ?? beginLoading()), shareReplay(1));
-    entitiesWithKeysState$ = this.entities$.pipe(mapLoadingStateValueWithOperator(switchMap((entities) => {
+    allEntitiesWithKeysState$ = this.entities$.pipe(mapLoadingStateValueWithOperator(switchMap((entities) => {
+        const sortPriorityMap = this.entitiesWidgetService.getSortPriorityMap();
         const entitiesWithStore = (entities ?? []).filter((x) => Boolean(x.store));
         const entitiesWithKeys = combineLatest(entitiesWithStore.map((x) => {
-            const obs = x.store.currentKey$.pipe(map((key) => (key ? { key, ...x } : null)));
+            const sortPriorityMapEntry = sortPriorityMap.get(x.modelIdentity);
+            const isKnownType = sortPriorityMapEntry != null;
+            const sortPriority = sortPriorityMapEntry ?? -2;
+            const obs = x.store.currentKey$.pipe(map((key) => (key ? { key, ...x, sortPriority, isKnownType } : null)));
             return obs;
         }));
-        return entitiesWithKeys.pipe(filterMaybeArray(), defaultIfEmpty([]));
+        return entitiesWithKeys.pipe(filterMaybeArray(), map((entities) => {
+            return filterUniqueValues(entities, (x) => x.key).sort(reverseCompareFn(sortByNumberFunction((x) => x.sortPriority)));
+        }), defaultIfEmpty([]));
     })), shareReplay(1));
-    entitiesWithKeys$ = this.entitiesWithKeysState$.pipe(valueFromFinishedLoadingState(), shareReplay(1));
+    entitiesWithKeys$ = this.allEntitiesWithKeysState$.pipe(valueFromFinishedLoadingState(), shareReplay(1));
     entitiesWithKeysSignal = toSignal(this.entitiesWithKeys$, { initialValue: [] });
     hasNoEntitiesSignal = computed(() => !this.entitiesWithKeysSignal()?.length);
-    context = loadingStateContext({ obs: this.entitiesWithKeysState$ });
+    context = loadingStateContext({ obs: this.allEntitiesWithKeysState$ });
     ngOnDestroy() {
         this.context.destroy();
     }
@@ -3784,6 +3799,11 @@ class DbxFirebaseModelEntitiesPopoverButtonComponent extends AbstractPopoverRefD
     entitiesSource = inject(DbxFirebaseModelEntitiesSource);
     buttonElement = viewChild.required('button', { read: ElementRef });
     config = input();
+    buttonDisplaySignal = computed(() => {
+        const config = this.config();
+        return config?.buttonDisplay ?? { icon: config?.icon ?? 'data_object' };
+    });
+    buttonStyleSignal = computed(() => this.config()?.buttonStyle);
     _makePopoverRef(origin) {
         if (!origin) {
             throw new Error('Missing origin.');
@@ -3802,18 +3822,18 @@ class DbxFirebaseModelEntitiesPopoverButtonComponent extends AbstractPopoverRefD
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFirebaseModelEntitiesPopoverButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: DbxFirebaseModelEntitiesPopoverButtonComponent, isStandalone: true, selector: "dbx-firebase-model-entities-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)="showEntitiesPopover()" icon="data_object"></dbx-icon-button>
-  `, isInline: true, dependencies: [{ kind: "component", type: DbxIconButtonComponent, selector: "dbx-icon-button" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    <dbx-button #button (buttonClick)="showEntitiesPopover()" [buttonStyle]="buttonStyleSignal()" [buttonDisplay]="buttonDisplaySignal()"></dbx-button>
+  `, isInline: true, dependencies: [{ kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFirebaseModelEntitiesPopoverButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-firebase-model-entities-popover-button',
                     template: `
-    <dbx-icon-button #button (buttonClick)="showEntitiesPopover()" icon="data_object"></dbx-icon-button>
+    <dbx-button #button (buttonClick)="showEntitiesPopover()" [buttonStyle]="buttonStyleSignal()" [buttonDisplay]="buttonDisplaySignal()"></dbx-button>
   `,
                     standalone: true,
-                    imports: [DbxIconButtonComponent],
+                    imports: [DbxButtonComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
@@ -3995,11 +4015,11 @@ class DbxFirebaseModelKeyComponent {
     sref$ = this.modelTypeInstance$.pipe(switchMap((x) => x?.segueRef$ ?? of(undefined)));
     srefSignal = toSignal(this.sref$);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFirebaseModelKeyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFirebaseModelKeyComponent, isStandalone: true, selector: "dbx-firebase-model-key", inputs: { modelKey: { classPropertyName: "modelKey", publicName: "modelKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-firebase-model-key\">\n  @if (modelKey(); as key) {\n    <!-- Key Data -->\n    <dbx-detail-block icon=\"key\" header=\"Model Key\">\n      <dbx-click-to-copy-text [highlighted]=\"true\" class=\"dbx-block\">{{ key }}</dbx-click-to-copy-text>\n      <dbx-click-to-copy-text [highlighted]=\"true\" class=\"dbx-block\" [copyText]=\"oneWayFlatModelKey()\">(Flat) {{ oneWayFlatModelKey() }}</dbx-click-to-copy-text>\n      <dbx-click-to-copy-text [highlighted]=\"true\" class=\"dbx-block\" [copyText]=\"twoWayFlatModelKey()\">(Encoded Flat) {{ twoWayFlatModelKey() }}</dbx-click-to-copy-text>\n    </dbx-detail-block>\n\n    <!-- Type Info -->\n    @if (typeInfoSignal(); as typeInfo) {\n      <!-- Model Meta Data -->\n      <div>\n        <dbx-detail-block [icon]=\"typeInfo.icon\" header=\"Model Type\">\n          <dbx-click-to-copy-text class=\"dbx-block\">{{ typeInfo.modelType }}</dbx-click-to-copy-text>\n          @if (typeInfo.icon) {\n            <dbx-click-to-copy-text [copyText]=\"typeInfo.icon\" class=\"dbx-block\">\n              Icon:\n              <span class=\"dbx-u\">{{ typeInfo.icon }}</span>\n            </dbx-click-to-copy-text>\n          } @else {\n            <span class=\"dbx-notice\">No Icon For Type</span>\n          }\n        </dbx-detail-block>\n        <dbx-detail-block icon=\"dataset\" header=\"Collection Name\">\n          <dbx-click-to-copy-text class=\"dbx-block\">{{ typeInfo.identity.collectionName }}</dbx-click-to-copy-text>\n        </dbx-detail-block>\n      </div>\n\n      <!-- Segue Info -->\n      @if (typeCanSegueToView()) {\n        <dbx-detail-block icon=\"arrow_forward\" header=\"Segue To View\">\n          <div class=\"dbx-hint dbx-small\">This model has a unique view within the app.</div>\n          <dbx-anchor [anchor]=\"srefSignal()\"><dbx-button>Go To View</dbx-button></dbx-anchor>\n        </dbx-detail-block>\n      } @else {\n        <dbx-detail-block class=\"dbx-warn\" icon=\"warning\" header=\"No Segue View\">\n          <span>This type provides no information for segue directly.</span>\n        </dbx-detail-block>\n      }\n    } @else {\n      <dbx-detail-block class=\"dbx-warn\" icon=\"warning\" header=\"No Type Info\">\n        <span>There is no type info registered for this model type.</span>\n      </dbx-detail-block>\n    }\n  } @else {\n    <div class=\"dbx-firebase-model-key-empty\">No model key provided</div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: DbxDetailBlockComponent, selector: "dbx-detail-block", inputs: ["icon", "header", "alignHeader", "bigHeader"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "component", type: DbxClickToCopyTextComponent, selector: "dbx-click-to-copy-text", inputs: ["copyText", "highlighted", "clipboardSnackbarMessagesConfig", "clipboardSnackbarMessagesEnabled", "clickToCopyIcon", "clickIconToCopyOnly"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFirebaseModelKeyComponent, isStandalone: true, selector: "dbx-firebase-model-key", inputs: { modelKey: { classPropertyName: "modelKey", publicName: "modelKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-firebase-model-key\">\n  @if (modelKey(); as key) {\n    <!-- Key Data -->\n    <dbx-detail-block icon=\"key\" header=\"Model Key\">\n      <dbx-click-to-copy-text [highlighted]=\"true\" class=\"dbx-block\">{{ key }}</dbx-click-to-copy-text>\n      <dbx-click-to-copy-text [highlighted]=\"true\" class=\"dbx-block\" [copyText]=\"oneWayFlatModelKey()\">(Flat) {{ oneWayFlatModelKey() }}</dbx-click-to-copy-text>\n      <dbx-click-to-copy-text [highlighted]=\"true\" class=\"dbx-block\" [copyText]=\"twoWayFlatModelKey()\">(Encoded Flat) {{ twoWayFlatModelKey() }}</dbx-click-to-copy-text>\n    </dbx-detail-block>\n\n    <!-- Type Info -->\n    @if (typeInfoSignal(); as typeInfo) {\n      <!-- Model Meta Data -->\n      <div>\n        <dbx-detail-block [icon]=\"typeInfo.icon\" header=\"Model Type\">\n          <dbx-click-to-copy-text class=\"dbx-block\">{{ typeInfo.modelType }}</dbx-click-to-copy-text>\n          @if (typeInfo.icon) {\n            <dbx-click-to-copy-text [copyText]=\"typeInfo.icon\" class=\"dbx-block\">\n              Icon:\n              <span class=\"dbx-u\">{{ typeInfo.icon }}</span>\n            </dbx-click-to-copy-text>\n          } @else {\n            <span class=\"dbx-notice\">No Icon For Type</span>\n          }\n        </dbx-detail-block>\n        <dbx-detail-block icon=\"dataset\" header=\"Collection Name\">\n          <dbx-click-to-copy-text class=\"dbx-block\">{{ typeInfo.identity.collectionName }}</dbx-click-to-copy-text>\n        </dbx-detail-block>\n      </div>\n\n      <!-- Segue Info -->\n      @if (typeCanSegueToView()) {\n        <dbx-detail-block icon=\"arrow_forward\" header=\"Segue To View\">\n          <div class=\"dbx-hint dbx-small\">This model has a unique view within the app.</div>\n          <dbx-anchor [anchor]=\"srefSignal()\"><dbx-button text=\"Go To View\"></dbx-button></dbx-anchor>\n        </dbx-detail-block>\n      } @else {\n        <dbx-detail-block class=\"dbx-warn\" icon=\"warning\" header=\"No Segue View\">\n          <span>This type provides no information for segue directly.</span>\n        </dbx-detail-block>\n      }\n    } @else {\n      <dbx-detail-block class=\"dbx-warn\" icon=\"warning\" header=\"No Type Info\">\n        <span>There is no type info registered for this model type.</span>\n      </dbx-detail-block>\n    }\n  } @else {\n    <div class=\"dbx-firebase-model-key-empty\">No model key provided</div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: DbxDetailBlockComponent, selector: "dbx-detail-block", inputs: ["icon", "header", "alignHeader", "bigHeader"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "component", type: DbxClickToCopyTextComponent, selector: "dbx-click-to-copy-text", inputs: ["copyText", "highlighted", "clipboardSnackbarMessagesConfig", "clipboardSnackbarMessagesEnabled", "clickToCopyIcon", "clickIconToCopyOnly"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFirebaseModelKeyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-firebase-model-key', standalone: true, imports: [MatIcon, DbxDetailBlockComponent, DbxButtonComponent, DbxClickToCopyTextComponent, DbxAnchorComponent], template: "<div class=\"dbx-firebase-model-key\">\n  @if (modelKey(); as key) {\n    <!-- Key Data -->\n    <dbx-detail-block icon=\"key\" header=\"Model Key\">\n      <dbx-click-to-copy-text [highlighted]=\"true\" class=\"dbx-block\">{{ key }}</dbx-click-to-copy-text>\n      <dbx-click-to-copy-text [highlighted]=\"true\" class=\"dbx-block\" [copyText]=\"oneWayFlatModelKey()\">(Flat) {{ oneWayFlatModelKey() }}</dbx-click-to-copy-text>\n      <dbx-click-to-copy-text [highlighted]=\"true\" class=\"dbx-block\" [copyText]=\"twoWayFlatModelKey()\">(Encoded Flat) {{ twoWayFlatModelKey() }}</dbx-click-to-copy-text>\n    </dbx-detail-block>\n\n    <!-- Type Info -->\n    @if (typeInfoSignal(); as typeInfo) {\n      <!-- Model Meta Data -->\n      <div>\n        <dbx-detail-block [icon]=\"typeInfo.icon\" header=\"Model Type\">\n          <dbx-click-to-copy-text class=\"dbx-block\">{{ typeInfo.modelType }}</dbx-click-to-copy-text>\n          @if (typeInfo.icon) {\n            <dbx-click-to-copy-text [copyText]=\"typeInfo.icon\" class=\"dbx-block\">\n              Icon:\n              <span class=\"dbx-u\">{{ typeInfo.icon }}</span>\n            </dbx-click-to-copy-text>\n          } @else {\n            <span class=\"dbx-notice\">No Icon For Type</span>\n          }\n        </dbx-detail-block>\n        <dbx-detail-block icon=\"dataset\" header=\"Collection Name\">\n          <dbx-click-to-copy-text class=\"dbx-block\">{{ typeInfo.identity.collectionName }}</dbx-click-to-copy-text>\n        </dbx-detail-block>\n      </div>\n\n      <!-- Segue Info -->\n      @if (typeCanSegueToView()) {\n        <dbx-detail-block icon=\"arrow_forward\" header=\"Segue To View\">\n          <div class=\"dbx-hint dbx-small\">This model has a unique view within the app.</div>\n          <dbx-anchor [anchor]=\"srefSignal()\"><dbx-button>Go To View</dbx-button></dbx-anchor>\n        </dbx-detail-block>\n      } @else {\n        <dbx-detail-block class=\"dbx-warn\" icon=\"warning\" header=\"No Segue View\">\n          <span>This type provides no information for segue directly.</span>\n        </dbx-detail-block>\n      }\n    } @else {\n      <dbx-detail-block class=\"dbx-warn\" icon=\"warning\" header=\"No Type Info\">\n        <span>There is no type info registered for this model type.</span>\n      </dbx-detail-block>\n    }\n  } @else {\n    <div class=\"dbx-firebase-model-key-empty\">No model key provided</div>\n  }\n</div>\n" }]
+            args: [{ selector: 'dbx-firebase-model-key', standalone: true, imports: [MatIcon, DbxDetailBlockComponent, DbxButtonComponent, DbxClickToCopyTextComponent, DbxAnchorComponent], template: "<div class=\"dbx-firebase-model-key\">\n  @if (modelKey(); as key) {\n    <!-- Key Data -->\n    <dbx-detail-block icon=\"key\" header=\"Model Key\">\n      <dbx-click-to-copy-text [highlighted]=\"true\" class=\"dbx-block\">{{ key }}</dbx-click-to-copy-text>\n      <dbx-click-to-copy-text [highlighted]=\"true\" class=\"dbx-block\" [copyText]=\"oneWayFlatModelKey()\">(Flat) {{ oneWayFlatModelKey() }}</dbx-click-to-copy-text>\n      <dbx-click-to-copy-text [highlighted]=\"true\" class=\"dbx-block\" [copyText]=\"twoWayFlatModelKey()\">(Encoded Flat) {{ twoWayFlatModelKey() }}</dbx-click-to-copy-text>\n    </dbx-detail-block>\n\n    <!-- Type Info -->\n    @if (typeInfoSignal(); as typeInfo) {\n      <!-- Model Meta Data -->\n      <div>\n        <dbx-detail-block [icon]=\"typeInfo.icon\" header=\"Model Type\">\n          <dbx-click-to-copy-text class=\"dbx-block\">{{ typeInfo.modelType }}</dbx-click-to-copy-text>\n          @if (typeInfo.icon) {\n            <dbx-click-to-copy-text [copyText]=\"typeInfo.icon\" class=\"dbx-block\">\n              Icon:\n              <span class=\"dbx-u\">{{ typeInfo.icon }}</span>\n            </dbx-click-to-copy-text>\n          } @else {\n            <span class=\"dbx-notice\">No Icon For Type</span>\n          }\n        </dbx-detail-block>\n        <dbx-detail-block icon=\"dataset\" header=\"Collection Name\">\n          <dbx-click-to-copy-text class=\"dbx-block\">{{ typeInfo.identity.collectionName }}</dbx-click-to-copy-text>\n        </dbx-detail-block>\n      </div>\n\n      <!-- Segue Info -->\n      @if (typeCanSegueToView()) {\n        <dbx-detail-block icon=\"arrow_forward\" header=\"Segue To View\">\n          <div class=\"dbx-hint dbx-small\">This model has a unique view within the app.</div>\n          <dbx-anchor [anchor]=\"srefSignal()\"><dbx-button text=\"Go To View\"></dbx-button></dbx-anchor>\n        </dbx-detail-block>\n      } @else {\n        <dbx-detail-block class=\"dbx-warn\" icon=\"warning\" header=\"No Segue View\">\n          <span>This type provides no information for segue directly.</span>\n        </dbx-detail-block>\n      }\n    } @else {\n      <dbx-detail-block class=\"dbx-warn\" icon=\"warning\" header=\"No Type Info\">\n        <span>There is no type info registered for this model type.</span>\n      </dbx-detail-block>\n    }\n  } @else {\n    <div class=\"dbx-firebase-model-key-empty\">No model key provided</div>\n  }\n</div>\n" }]
         }] });
 
 /**
@@ -4009,16 +4029,29 @@ class DbxFirebaseModelEntitiesDebugWidgetComponent extends AbstractDbxFirebaseMo
     // Convert store observables to signals for template usage
     currentKey = toSignal(this.store.currentKey$);
     currentData = toSignal(this.data$);
+    contentSignal = computed(() => {
+        const key = this.currentKey();
+        const data = this.currentData();
+        let content;
+        if (key && data) {
+            const flattenKey = twoWayFlatFirestoreModelKey(key);
+            content = {
+                content: JSON.stringify(data, null, 2),
+                name: `${flattenKey}.json`
+            };
+        }
+        return content;
+    });
     context = loadingStateContext(this.store.dataLoadingState$);
     ngOnDestroy() {
         this.context.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFirebaseModelEntitiesDebugWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFirebaseModelEntitiesDebugWidgetComponent, isStandalone: true, selector: "dbx-firebase-model-entities-debug-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-firebase-model-entities-debug-widget\">\n  <!-- Model Key Section -->\n  <div class=\"dbx-debug-section\">\n    <h4>Model Key Information</h4>\n    @if (currentKey(); as key) {\n      <dbx-firebase-model-key [modelKey]=\"key\"></dbx-firebase-model-key>\n    }\n  </div>\n\n  <!-- Document Data Section -->\n  <div class=\"dbx-debug-section\">\n    <h4>Document Data</h4>\n    <dbx-loading [context]=\"context\">\n      @if (currentData(); as data) {\n        <dbx-content-pit [rounded]=\"true\">\n          <div class=\"dbx-json\">\n            <dbx-click-to-copy-text>{{ data | json }}</dbx-click-to-copy-text>\n          </div>\n        </dbx-content-pit>\n      } @else {\n        <p class=\"dbx-empty\">No data available</p>\n      }\n    </dbx-loading>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: DbxFirebaseModelKeyComponent, selector: "dbx-firebase-model-key", inputs: ["modelKey"] }, { kind: "component", type: DbxClickToCopyTextComponent, selector: "dbx-click-to-copy-text", inputs: ["copyText", "highlighted", "clipboardSnackbarMessagesConfig", "clipboardSnackbarMessagesEnabled", "clickToCopyIcon", "clickIconToCopyOnly"] }, { kind: "directive", type: DbxContentPitDirective, selector: "dbx-content-pit, [dbxContentPit]", inputs: ["scrollable", "rounded"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "pipe", type: JsonPipe, name: "json" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFirebaseModelEntitiesDebugWidgetComponent, isStandalone: true, selector: "dbx-firebase-model-entities-debug-widget", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-firebase-model-entities-debug-widget\">\n  <!-- Model Key Section -->\n  <div class=\"dbx-debug-section\">\n    <h4>Model Key Information</h4>\n    @if (currentKey(); as key) {\n      <dbx-firebase-model-key [modelKey]=\"key\"></dbx-firebase-model-key>\n    }\n  </div>\n\n  <!-- Document Data Section -->\n  <div class=\"dbx-debug-section\">\n    <h4>Document Data</h4>\n    <dbx-loading [context]=\"context\">\n      @if (currentData(); as data) {\n        <dbx-download-text-view [content]=\"contentSignal()\"></dbx-download-text-view>\n      } @else {\n        <p class=\"dbx-empty\">No data available</p>\n      }\n    </dbx-loading>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: DbxFirebaseModelKeyComponent, selector: "dbx-firebase-model-key", inputs: ["modelKey"] }, { kind: "component", type: DbxDownloadTextViewComponent, selector: "dbx-download-text-view", inputs: ["showDownloadButton", "loadingText", "linear", "showTitle", "showPreview", "showExpandPreviewButton", "expandPreview", "content", "contentState"], outputs: ["expandPreviewChange"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFirebaseModelEntitiesDebugWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-firebase-model-entities-debug-widget', standalone: true, imports: [DbxFirebaseModelKeyComponent, DbxClickToCopyTextComponent, DbxContentPitDirective, DbxLoadingComponent, JsonPipe], template: "<div class=\"dbx-firebase-model-entities-debug-widget\">\n  <!-- Model Key Section -->\n  <div class=\"dbx-debug-section\">\n    <h4>Model Key Information</h4>\n    @if (currentKey(); as key) {\n      <dbx-firebase-model-key [modelKey]=\"key\"></dbx-firebase-model-key>\n    }\n  </div>\n\n  <!-- Document Data Section -->\n  <div class=\"dbx-debug-section\">\n    <h4>Document Data</h4>\n    <dbx-loading [context]=\"context\">\n      @if (currentData(); as data) {\n        <dbx-content-pit [rounded]=\"true\">\n          <div class=\"dbx-json\">\n            <dbx-click-to-copy-text>{{ data | json }}</dbx-click-to-copy-text>\n          </div>\n        </dbx-content-pit>\n      } @else {\n        <p class=\"dbx-empty\">No data available</p>\n      }\n    </dbx-loading>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'dbx-firebase-model-entities-debug-widget', standalone: true, imports: [DbxFirebaseModelKeyComponent, DbxClickToCopyTextComponent, DbxContentPitDirective, DbxDownloadTextViewComponent, DbxLoadingComponent, JsonPipe], template: "<div class=\"dbx-firebase-model-entities-debug-widget\">\n  <!-- Model Key Section -->\n  <div class=\"dbx-debug-section\">\n    <h4>Model Key Information</h4>\n    @if (currentKey(); as key) {\n      <dbx-firebase-model-key [modelKey]=\"key\"></dbx-firebase-model-key>\n    }\n  </div>\n\n  <!-- Document Data Section -->\n  <div class=\"dbx-debug-section\">\n    <h4>Document Data</h4>\n    <dbx-loading [context]=\"context\">\n      @if (currentData(); as data) {\n        <dbx-download-text-view [content]=\"contentSignal()\"></dbx-download-text-view>\n      } @else {\n        <p class=\"dbx-empty\">No data available</p>\n      }\n    </dbx-loading>\n  </div>\n</div>\n" }]
         }] });
 
 /**