@dereekb/dbx-web 12.6.20 → 12.7.0

package/fesm2022/dereekb-dbx-web.mjs

@@ -2,10 +2,10 @@ import * as i0 from '@angular/core';
 import { Injectable, input, inject, effect, Directive, NgModule, Component, output, computed, HostListener, InjectionToken, signal, ChangeDetectionStrategy, ElementRef, Injector, DestroyRef, viewChild, makeEnvironmentProviders, TemplateRef, model, SecurityContext, forwardRef, ViewContainerRef, Optional, Inject, Renderer2, ChangeDetectorRef } from '@angular/core';
 import { DASH_CHARACTER_PREFIX_INSTANCE, asPromise, cssClassesSet, isDefinedAndNotFalse, spaceSeparatedCssClasses, objectHasNoKeys, getValueFromGetter, firstValue, filterUndefinedValues, separateValues, splitFront, asDecisionFunction, SLASH_PATH_FILE_TYPE_SEPARATOR, filterMaybeArrayValues, mapIterable, toReadableError, isDefaultReadableError, MS_IN_SECOND, mergeObjects, build, ServerErrorResponse, UnauthorizedServerErrorResponse, makeTimer, MS_IN_MINUTE, toggleTimerRunning, unixDateTimeSecondsNumberForNow, ModelRelationUtility, encodeModelKeyTypePair, useIterableOrValue, safeCompareEquality, addMilliseconds, isPast, asArray, slashPathDetails, mimeTypeForFileExtension, slashPathDirectoryTree, isMaybeNot, isNotFalse, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, findNext, maybeModifierMapToFunction, makeValuesGroupMap, compareWithMappedValuesFunction, invertMaybeBoolean, splitCommaSeparatedStringToSet, ZIP_FILE_MIME_TYPE, cachedGetter, sortByNumberFunction } from '@dereekb/util';
 import * as i1$2 from '@dereekb/dbx-core';
-import { AbstractSubscriptionDirective, AbstractTransitionWatcherDirective, DbxInjectionComponent, AbstractDbxActionValueGetterDirective, AbstractDbxButtonDirective, provideDbxButton, dbxActionWorkProgress, DbxCoreButtonModule, AbstractDbxActionHandlerDirective, FilterSourceDirective, provideActionStoreSource, isClickableFilterPreset, AbstractDbxAnchorDirective, expandClickableAnchorLinkTrees, DbxCoreFilterModule, DbxButton, DbxActionContextStoreSourceInstance, DBX_INJECTION_COMPONENT_DATA, checkNgContentWrapperHasContent, DbxActionSourceDirective, DbxActionSuccessHandlerDirective, DbxActionDirective, DbxActionValueStreamDirective, transformEmptyStringInputToUndefined, isIdleActionState, canTriggerAction, DbxCoreActionModule, DbxActionButtonDirective, onDbxAppAuth, SimpleStorageAccessorFactory, mergeStaticProviders, asSegueRef, AbstractTransitionDirective, DbxRouterService, AbstractIfDirective, isSegueRefActive, anchorTypeForAnchor } from '@dereekb/dbx-core';
+import { completeOnDestroy, clean, cleanSubscription, AbstractTransitionWatcherDirective, DbxInjectionComponent, AbstractDbxActionValueGetterDirective, AbstractDbxButtonDirective, provideDbxButton, dbxActionWorkProgress, DbxCoreButtonModule, AbstractDbxActionHandlerDirective, FilterSourceDirective, provideActionStoreSource, isClickableFilterPreset, AbstractDbxAnchorDirective, expandClickableAnchorLinkTrees, DbxCoreFilterModule, DbxButton, DbxActionContextStoreSourceInstance, DBX_INJECTION_COMPONENT_DATA, checkNgContentWrapperHasContent, cleanLoadingContext, DbxActionSourceDirective, DbxActionSuccessHandlerDirective, DbxActionDirective, DbxActionValueStreamDirective, transformEmptyStringInputToUndefined, isIdleActionState, canTriggerAction, DbxCoreActionModule, DbxActionButtonDirective, onDbxAppAuth, SimpleStorageAccessorFactory, mergeStaticProviders, asSegueRef, AbstractTransitionDirective, DbxRouterService, AbstractIfDirective, isSegueRefActive, anchorTypeForAnchor } from '@dereekb/dbx-core';
 import { NgPopoverRef, NgOverlayContainerService } from 'ng-overlay-container';
 import { of, map, BehaviorSubject, distinctUntilChanged, shareReplay, delay, switchMap, combineLatest, Subject, first, startWith, filter, throttleTime, skip, defaultIfEmpty, delayWhen, timer, asyncScheduler, from, firstValueFrom, mergeMap, race, tap, catchError, distinct, merge, exhaustMap } from 'rxjs';
-import { filterMaybe, asObservable, LockSet, SubscriptionObject, distinctUntilItemsHaveDifferentValues, skipAllInitialMaybe, maybeValueFromObservableOrValue, switchMapMaybeLoadingContextStream, loadingStateContext, LoadingStateType, loadingStateType, successResult, valueFromFinishedLoadingState, initialize, isNot, mapForEach, switchMapMaybe, listLoadingStateContext, isLoadingStateFinishedLoading, startWithBeginLoading, loadingStateFromObs, errorResult, beginLoading, distinctUntilHasDifferentValues } from '@dereekb/rxjs';
+import { filterMaybe, asObservable, LockSet, distinctUntilItemsHaveDifferentValues, skipAllInitialMaybe, maybeValueFromObservableOrValue, switchMapMaybeLoadingContextStream, LoadingStateType, loadingStateType, SubscriptionObject, successResult, valueFromFinishedLoadingState, loadingStateContext, initialize, isNot, mapForEach, switchMapMaybe, listLoadingStateContext, isLoadingStateFinishedLoading, startWithBeginLoading, loadingStateFromObs, errorResult, beginLoading, distinctUntilHasDifferentValues } from '@dereekb/rxjs';
 import { isBoolean } from 'class-validator';
 import { ComponentStore } from '@ngrx/component-store';
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
@@ -199,11 +199,8 @@ class DbxPopoverController {
  * Used for coordinating popovers and closing/replacing existing ones when a new popover of the same name appears.
  */
 class DbxPopoverCoordinatorService {
-    _popovers = new BehaviorSubject(new Map());
+    _popovers = completeOnDestroy(new BehaviorSubject(new Map()));
     popovers$ = this._popovers.asObservable();
-    ngOnDestroy() {
-        this._popovers.complete();
-    }
     get popovers() {
         return this._popovers.value;
     }
@@ -246,11 +243,9 @@ class DbxPopoverCoordinatorComponent {
     );
     show$ = this.isPopoverForKey$.pipe(delay(0));
     showSignal = toSignal(this.show$);
-    ngOnInit() {
+    constructor() {
         this._service.addPopover(this._popover);
-    }
-    ngOnDestroy() {
-        this._service.removePopover(this._popover.key, this._popover);
+        clean(() => this._service.removePopover(this._popover.key, this._popover));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPopoverCoordinatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxPopoverCoordinatorComponent, isStandalone: true, selector: "dbx-popover-coordinator", ngImport: i0, template: `
@@ -270,7 +265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
   `,
                     standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Binds to the window:keydown event and emits events.
@@ -447,16 +442,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * Used to retrieve the current app styling from the DbxStyleService.
  */
-class DbxStyleDirective extends AbstractSubscriptionDirective {
+class DbxStyleDirective {
     _styleService = inject(DbxStyleService);
     styleClassNameSignal = signal(undefined);
-    ngOnInit() {
-        this.sub = this._styleService.styleClassName$.pipe(delay(0)).subscribe((classes) => {
+    constructor() {
+        cleanSubscription(this._styleService.styleClassName$.pipe(delay(0)).subscribe((classes) => {
             this.styleClassNameSignal.set(classes);
-        });
+        }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxStyleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxStyleDirective, isStandalone: true, selector: "dbx-style, [dbxStyle], .dbx-style", host: { properties: { "class": "styleClassNameSignal()" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxStyleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxStyleDirective, isStandalone: true, selector: "dbx-style, [dbxStyle], .dbx-style", host: { properties: { "class": "styleClassNameSignal()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxStyleDirective, decorators: [{
             type: Directive,
@@ -467,7 +462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     },
                     standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class DbxPopoverComponentController extends DbxPopoverController {
     getClosingValueFn;
@@ -539,14 +534,12 @@ class DbxPopoverComponent extends AbstractTransitionWatcherDirective {
         return this._triggerCloseKeys;
     }
     ngOnInit() {
-        super.ngOnInit();
         if (this.config.closeOnEscape) {
             this._triggerCloseKeys = ['Escape'];
         }
     }
     ngOnDestroy() {
         this.lockSet.destroyOnNextUnlock(() => {
-            super.ngOnDestroy();
             this._closing.complete();
         });
     }
@@ -918,8 +911,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * Abstract class for showing and handling a popover ref.
  */
-class AbstractPopoverRefDirective extends AbstractSubscriptionDirective {
+class AbstractPopoverRefDirective {
     _popoverRef;
+    _popoverSub = cleanSubscription();
     showPopover(origin) {
         if (!this._popoverRef) {
             this._showPopoverRef(origin);
@@ -928,10 +922,10 @@ class AbstractPopoverRefDirective extends AbstractSubscriptionDirective {
     _showPopoverRef(origin) {
         this._popoverRef = this._makePopoverRef(origin);
         this._afterOpened(this._popoverRef);
-        this.sub = this._popoverRef.afterClosed$.subscribe((x) => {
+        this._popoverSub.setSub(this._popoverRef.afterClosed$.subscribe((x) => {
             this._afterClosed(x);
             this._popoverRef = undefined;
-        });
+        }));
     }
     _afterOpened(popoverRef) {
         // Do nothing. Override in parent type
@@ -939,8 +933,8 @@ class AbstractPopoverRefDirective extends AbstractSubscriptionDirective {
     _afterClosed(value) {
         // Do nothing. Override in parent type
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractPopoverRefDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AbstractPopoverRefDirective, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractPopoverRefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AbstractPopoverRefDirective, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractPopoverRefDirective, decorators: [{
             type: Directive
@@ -1290,7 +1284,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 const DEFAULT_FILTER_POPOVER_KEY = 'filter';
 class DbxFilterPopoverComponent extends AbstractPopoverDirective {
-    _closeOnChangeSub = new SubscriptionObject();
     config = this.popover.data;
     icon = this.config.icon ?? 'filter_list';
     header = this.config.header ?? 'Filter';
@@ -1323,9 +1316,9 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
                     filterSource.initWithFilter(initialFilterObs);
                 }
                 if (closeOnFilterChange !== false) {
-                    this._closeOnChangeSub.subscription = filterSource.filter$.pipe(skip(1), filterMaybe(), first(), defaultIfEmpty(undefined)).subscribe(() => {
+                    cleanSubscription(filterSource.filter$.pipe(skip(1), filterMaybe(), first(), defaultIfEmpty(undefined)).subscribe(() => {
                         this.close();
-                    });
+                    }));
                 }
                 // run the next init if provided
                 baseConfig?.init?.(filterSource);
@@ -1358,7 +1351,8 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
             }
         });
     }
-    ngOnInit() {
+    constructor() {
+        super();
         let showPreset = false;
         const { customFilterComponentClass, presetFilterComponentClass, customFilterComponentConfig, presetFilterComponentConfig } = this.config;
         if (customFilterComponentClass || customFilterComponentConfig) {
@@ -1372,22 +1366,19 @@ class DbxFilterPopoverComponent extends AbstractPopoverDirective {
         }
         this.showPresetSignal.set(showPreset);
     }
-    ngOnDestroy() {
-        this._closeOnChangeSub.destroy();
-    }
     showPresets() {
         this.showPresetSignal.set(true);
     }
     showCustom() {
         this.showPresetSignal.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFilterPopoverComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFilterPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFilterPopoverComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header [icon]=\"icon\" [header]=\"header\">\n    @if (showSwitchButtons) {\n      @switch (showPresetSignal()) {\n        @case (true) {\n          <button mat-flat-button color=\"accent\" (click)=\"showCustom()\">{{ customizeButtonText }}</button>\n        }\n        @case (false) {\n          <button mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n        }\n      }\n    }\n    @if (showCloseButton) {\n      @if (showSwitchButtons) {\n        <dbx-button-spacer></dbx-button-spacer>\n      }\n      <button mat-stroked-button color=\"accent\" (click)=\"close()\">{{ closeButtonText }}</button>\n    }\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n", dependencies: [{ kind: "ngmodule", type: DbxPopoverInteractionModule }, { kind: "component", type: DbxPopoverContentComponent, selector: "dbx-popover-content" }, { kind: "component", type: DbxPopoverHeaderComponent, selector: "dbx-popover-header", inputs: ["header", "icon"] }, { kind: "directive", type: DbxPopoverScrollContentDirective, selector: "dbx-popover-scroll-content,[dbxPopoverScrollContent],.dbx-popover-scroll-content" }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFilterPopoverComponent, decorators: [{
             type: Component,
             args: [{ imports: [DbxPopoverInteractionModule, DbxInjectionComponent, MatButtonModule, DbxButtonSpacerDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<dbx-popover-content>\n  <!-- Header -->\n  <dbx-popover-header [icon]=\"icon\" [header]=\"header\">\n    @if (showSwitchButtons) {\n      @switch (showPresetSignal()) {\n        @case (true) {\n          <button mat-flat-button color=\"accent\" (click)=\"showCustom()\">{{ customizeButtonText }}</button>\n        }\n        @case (false) {\n          <button mat-flat-button color=\"accent\" (click)=\"showPresets()\">Presets</button>\n        }\n      }\n    }\n    @if (showCloseButton) {\n      @if (showSwitchButtons) {\n        <dbx-button-spacer></dbx-button-spacer>\n      }\n      <button mat-stroked-button color=\"accent\" (click)=\"close()\">{{ closeButtonText }}</button>\n    }\n  </dbx-popover-header>\n  <!-- Content -->\n  <dbx-popover-scroll-content>\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </dbx-popover-scroll-content>\n</dbx-popover-content>\n" }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class AbstractFilterPopoverButtonDirective extends AbstractPopoverRefDirective {
     popupService = inject(DbxPopoverService);
@@ -1507,7 +1498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 const DBX_PROGRESS_BUTTON_GLOBAL_CONFIG = new InjectionToken('DbxProgressButtonGlobalConfig');
 
-class AbstractProgressButtonDirective extends AbstractSubscriptionDirective {
+class AbstractProgressButtonDirective {
     globalConfig = inject(DBX_PROGRESS_BUTTON_GLOBAL_CONFIG, { optional: true }) ?? [];
     btnClick = output();
     config = input.required();
@@ -1640,8 +1631,8 @@ class AbstractProgressButtonDirective extends AbstractSubscriptionDirective {
             event.stopImmediatePropagation();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractProgressButtonDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: AbstractProgressButtonDirective, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, working: { classPropertyName: "working", publicName: "working", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { btnClick: "btnClick" }, host: { listeners: { "click": "handleClick($event)" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractProgressButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: AbstractProgressButtonDirective, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, working: { classPropertyName: "working", publicName: "working", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { btnClick: "btnClick" }, host: { listeners: { "click": "handleClick($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractProgressButtonDirective, decorators: [{
             type: Directive
@@ -1968,7 +1959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * Action component used to simplify creating a filter form.
  *
- * Provides a DbxAction and configures the action to set the filter on a FilterSourceDirective when triggered.
+ * Provides a ActionContextStoreSource and configures the action to set the filter on a FilterSourceDirective when triggered.
  */
 class DbxFilterWrapperComponent extends AbstractDbxActionHandlerDirective {
     filterSourceDirective = inject((FilterSourceDirective));
@@ -1978,6 +1969,7 @@ class DbxFilterWrapperComponent extends AbstractDbxActionHandlerDirective {
     applyText = input('Filter');
     constructor() {
         super();
+        // TODO: Consider throwing an error if dbxAction is provided at the same time as this, since the source would not be used?
         // configure handler function
         this._dbxActionHandlerInstance.setHandlerFunction((filter, instance) => {
             this.filterSourceDirective.setFilter(filter);
@@ -2427,7 +2419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-class DbxIframeComponent extends AbstractSubscriptionDirective {
+class DbxIframeComponent {
     sanitizer = inject(DomSanitizer);
     iframeLocationChanged = output();
     iframe = viewChild('iframe', { read: ElementRef });
@@ -2444,10 +2436,9 @@ class DbxIframeComponent extends AbstractSubscriptionDirective {
     });
     iframe$ = toObservable(this.iframe);
     contentUrl$ = toObservable(this.contentUrl);
-    retry = new Subject();
+    retry = completeOnDestroy(new Subject());
     constructor() {
-        super();
-        this.sub = combineLatest([this.contentUrl$, this.iframe$])
+        cleanSubscription(() => combineLatest([this.contentUrl$, this.iframe$])
             .pipe(
         // delay retries by 50ms
         switchMap((x) => this.retry.pipe(startWith(undefined), delayWhen((_, i) => timer(i ? 50 : 0, asyncScheduler)), map(() => x))))
@@ -2466,14 +2457,10 @@ class DbxIframeComponent extends AbstractSubscriptionDirective {
             else {
                 this.retry.next(); // queue up another retry for setting the iframe value
             }
-        });
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.retry.complete();
+        }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxIframeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: DbxIframeComponent, isStandalone: true, selector: "dbx-iframe", inputs: { scrolling: { classPropertyName: "scrolling", publicName: "scrolling", isSignal: true, isRequired: false, transformFunction: null }, sanitizeUrl: { classPropertyName: "sanitizeUrl", publicName: "sanitizeUrl", isSignal: true, isRequired: false, transformFunction: null }, contentUrl: { classPropertyName: "contentUrl", publicName: "contentUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { iframeLocationChanged: "iframeLocationChanged", contentUrl: "contentUrlChange" }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: DbxIframeComponent, isStandalone: true, selector: "dbx-iframe", inputs: { scrolling: { classPropertyName: "scrolling", publicName: "scrolling", isSignal: true, isRequired: false, transformFunction: null }, sanitizeUrl: { classPropertyName: "sanitizeUrl", publicName: "sanitizeUrl", isSignal: true, isRequired: false, transformFunction: null }, contentUrl: { classPropertyName: "contentUrl", publicName: "contentUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { iframeLocationChanged: "iframeLocationChanged", contentUrl: "contentUrlChange" }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <iframe #iframe src="about:blank" frameborder="0" [scrolling]="scrolling()" allow="autoplay"></iframe>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -2510,8 +2497,8 @@ function openIframeDialog(matDialog, config) {
     });
 }
 
-class DbxEmbedComponent extends AbstractSubscriptionDirective {
-    _browserObjectUrlRef = browserObjectUrlRef();
+class DbxEmbedComponent {
+    _browserObjectUrlRef = clean(browserObjectUrlRef());
     sanitizer = inject(DomSanitizer);
     root = viewChild('root', { read: ElementRef });
     /**
@@ -2560,8 +2547,7 @@ class DbxEmbedComponent extends AbstractSubscriptionDirective {
     type$ = toObservable(this.typeSignal);
     embedElementName$ = toObservable(this.embedElement);
     constructor() {
-        super();
-        this.sub = combineLatest([this.srcUrl$, this.root$, this.type$, this.embedElementName$])
+        cleanSubscription(combineLatest([this.srcUrl$, this.root$, this.type$, this.embedElementName$])
             .pipe(throttleTime(100, undefined, { leading: true, trailing: true }))
             .subscribe(([srcUrl, root, type, forceEmbedElementName]) => {
             const element = root?.nativeElement;
@@ -2604,14 +2590,10 @@ class DbxEmbedComponent extends AbstractSubscriptionDirective {
                     element.appendChild(embed);
                 }
             }
-        });
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._browserObjectUrlRef.destroy();
+        }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxEmbedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: DbxEmbedComponent, isStandalone: true, selector: "dbx-embed", inputs: { embedElement: { classPropertyName: "embedElement", publicName: "embedElement", isSignal: true, isRequired: false, transformFunction: null }, sanitizeUrl: { classPropertyName: "sanitizeUrl", publicName: "sanitizeUrl", isSignal: true, isRequired: false, transformFunction: null }, srcUrl: { classPropertyName: "srcUrl", publicName: "srcUrl", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { embedElement: "embedElementChange", sanitizeUrl: "sanitizeUrlChange", srcUrl: "srcUrlChange", type: "typeChange", blob: "blobChange" }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: DbxEmbedComponent, isStandalone: true, selector: "dbx-embed", inputs: { embedElement: { classPropertyName: "embedElement", publicName: "embedElement", isSignal: true, isRequired: false, transformFunction: null }, sanitizeUrl: { classPropertyName: "sanitizeUrl", publicName: "sanitizeUrl", isSignal: true, isRequired: false, transformFunction: null }, srcUrl: { classPropertyName: "srcUrl", publicName: "srcUrl", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { embedElement: "embedElementChange", sanitizeUrl: "sanitizeUrlChange", srcUrl: "srcUrlChange", type: "typeChange", blob: "blobChange" }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <span #root></span>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -2712,11 +2694,8 @@ class DbxPopupController {
  * Used for coordinating popups and closing/replacing existing ones when a new popup of the same name appears.
  */
 class DbxPopupCoordinatorService {
-    _popups = new BehaviorSubject(new Map());
+    _popups = completeOnDestroy(new BehaviorSubject(new Map()));
     popups$ = this._popups.asObservable();
-    ngOnDestroy() {
-        this._popups.complete();
-    }
     get popups() {
         return this._popups.value;
     }
@@ -2758,11 +2737,9 @@ class DbxPopupCoordinatorComponent {
     isPopupForKey$ = this._service.popups$.pipe(map((x) => x.get(this._popup.key) === this._popup), shareReplay(1));
     show$ = this.isPopupForKey$.pipe(delay(0));
     showSignal = toSignal(this.show$);
-    ngOnInit() {
+    constructor() {
         this._service.addPopup(this._popup);
-    }
-    ngOnDestroy() {
-        this._service.removePopup(this._popup.key, this._popup);
+        clean(() => this._service.removePopup(this._popup.key, this._popup));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxPopupCoordinatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxPopupCoordinatorComponent, isStandalone: true, selector: "dbx-popup-coordinator", ngImport: i0, template: `
@@ -2783,7 +2760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const APP_POPUP_NORMAL_WIDTH = '700px';
 const APP_POPUP_MINIMIZED_WIDTH = '300px';
@@ -2805,10 +2782,10 @@ class DbxPopupComponent extends AbstractTransitionWatcherDirective {
         componentClass: this.config.componentClass,
         init: this.config.init ? (instance) => this.config.init(instance, this) : undefined
     };
-    closing = new Subject();
+    closing = completeOnDestroy(new Subject());
     isClosing$ = this.closing.pipe(first(), map(() => true), startWith(false), shareReplay(1));
     closing$ = this.isClosing$.pipe(filter((x) => x));
-    _windowState = new BehaviorSubject(DbxPopupWindowState.NORMAL);
+    _windowState = completeOnDestroy(new BehaviorSubject(DbxPopupWindowState.NORMAL));
     windowState$ = this._windowState.asObservable();
     getClosingValueFn;
     constructor() {
@@ -2817,11 +2794,6 @@ class DbxPopupComponent extends AbstractTransitionWatcherDirective {
         this._position = new PopupGlobalPositionStrategy(this.config.position ?? undefined, this.config.offset ?? undefined);
         this.popoverRef.overlay.updatePositionStrategy(this._position);
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.closing.complete();
-        this._windowState.complete();
-    }
     updateForSuccessfulTransition() {
         if (this.config.closeOnTransition !== false) {
             this.close();
@@ -3877,7 +3849,7 @@ class DbxFileUploadAreaComponent extends AbstractDbxFileUploadComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFileUploadAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFileUploadAreaComponent, isStandalone: true, selector: "dbx-file-upload-area", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged", areaClicked: "areaClicked", areaDragActiveChanged: "areaDragActiveChanged" }, host: { listeners: { "click": "onClick($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.dbx-file-upload-area-with-hint": "hintSignal()", "class.dbx-file-upload-area-disabled": "disabledSignal()", "class.dbx-file-upload-area-working": "isWorkingSignal()", "class.dbx-file-upload-area-drag-over": "!disabledSignal() && dragOverStateSignal()" }, classAttribute: "dbx-file-upload-area dbx-block" }, providers: provideDbxFileUploadActionCompatable(DbxFileUploadAreaComponent), usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFileUploadAreaComponent, isStandalone: true, selector: "dbx-file-upload-area", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged", areaClicked: "areaClicked", areaDragActiveChanged: "areaDragActiveChanged" }, host: { listeners: { "click": "onClick($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.dbx-file-upload-area-with-hint": "hintSignal()", "class.dbx-file-upload-area-disabled": "disabledSignal()", "class.dbx-file-upload-area-working": "isWorkingSignal()", "class.dbx-file-upload-area-drag-over": "!disabledSignal() && dragOverStateSignal()" }, classAttribute: "dbx-file-upload-area" }, providers: provideDbxFileUploadActionCompatable(DbxFileUploadAreaComponent), usesInheritance: true, ngImport: i0, template: `
     @if (show()) {
       <div class="dbx-file-upload-area-content">
         <div class="dbx-file-upload-area-content-text">
@@ -3937,7 +3909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
     </ng-template>
   `,
                     host: {
-                        class: 'dbx-file-upload-area dbx-block',
+                        class: 'dbx-file-upload-area',
                         '[class.dbx-file-upload-area-with-hint]': 'hintSignal()',
                         '[class.dbx-file-upload-area-disabled]': 'disabledSignal()',
                         '[class.dbx-file-upload-area-working]': 'isWorkingSignal()',
@@ -4045,6 +4017,7 @@ class DbxFileUploadComponent extends AbstractDbxFileUploadComponent {
     area = viewChild.required('area', { read: DbxFileUploadAreaComponent });
     button = viewChild.required('button', { read: DbxFileUploadButtonComponent });
     buttonStyle = input();
+    buttonDisplay = input();
     mode = input();
     text = input(); // button text
     icon = input(); // button icon
@@ -4071,12 +4044,14 @@ class DbxFileUploadComponent extends AbstractDbxFileUploadComponent {
     buttonTextSignal = computed(() => {
         const config = this.config();
         const text = this.text();
-        return config?.button?.text ?? text;
+        const buttonDisplay = this.buttonDisplay();
+        return config?.button?.text ?? buttonDisplay?.text ?? text;
     });
     buttonIconSignal = computed(() => {
         const config = this.config();
         const icon = this.icon();
-        return config?.button?.icon ?? icon;
+        const buttonDisplay = this.buttonDisplay();
+        return config?.button?.icon ?? buttonDisplay?.icon ?? icon;
     });
     areaTextSignal = computed(() => this.config()?.area?.text);
     areaIconSignal = computed(() => this.config()?.area?.icon);
@@ -4110,7 +4085,7 @@ class DbxFileUploadComponent extends AbstractDbxFileUploadComponent {
         this.filesChanged.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFileUploadComponent, isStandalone: true, selector: "dbx-file-upload", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clickAreaToUpload: { classPropertyName: "clickAreaToUpload", publicName: "clickAreaToUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged" }, providers: provideDbxFileUploadActionCompatable(DbxFileUploadComponent), viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, read: DbxFileUploadAreaComponent, isSignal: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true, read: DbxFileUploadButtonComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxFileUploadComponent, isStandalone: true, selector: "dbx-file-upload", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, buttonStyle: { classPropertyName: "buttonStyle", publicName: "buttonStyle", isSignal: true, isRequired: false, transformFunction: null }, buttonDisplay: { classPropertyName: "buttonDisplay", publicName: "buttonDisplay", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, clickAreaToUpload: { classPropertyName: "clickAreaToUpload", publicName: "clickAreaToUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChanged: "filesChanged" }, providers: provideDbxFileUploadActionCompatable(DbxFileUploadComponent), viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, read: DbxFileUploadAreaComponent, isSignal: true }, { propertyName: "button", first: true, predicate: ["button"], descendants: true, read: DbxFileUploadButtonComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <dbx-file-upload-area #area [show]="showAreaSignal()" [hint]="areaHintSignal()" [text]="areaTextSignal()" [icon]="areaIconSignal()" [accept]="acceptSignal()" [multiple]="multipleSignal()" (filesChanged)="areaFilesChanged($event)" (areaClicked)="areaClicked()" [disabled]="disabledSignal()" [working]="workingSignal()">
       <ng-content></ng-content>
       @if (showButtonSignal()) {
@@ -4152,19 +4127,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class DbxFileUploadActionSyncDirective {
     source = inject(DbxActionContextStoreSourceInstance);
     uploadCompatable = inject(DbxFileUploadActionCompatable);
-    _workingSub = new SubscriptionObject();
-    _disabledSub = new SubscriptionObject();
-    ngOnInit() {
-        this._workingSub.subscription = this.source.isWorkingOrWorkProgress$.subscribe((working) => {
+    constructor() {
+        cleanSubscription(this.source.isWorkingOrWorkProgress$.subscribe((working) => {
             this.uploadCompatable.setWorking(working);
-        });
-        this._disabledSub.subscription = this.source.isDisabled$.subscribe((disabled) => {
+        }));
+        cleanSubscription(this.source.isDisabled$.subscribe((disabled) => {
             this.uploadCompatable.setDisabled(disabled);
-        });
-    }
-    ngOnDestroy() {
-        this._workingSub.destroy();
-        this._disabledSub.destroy();
+        }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFileUploadActionSyncDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxFileUploadActionSyncDirective, isStandalone: true, selector: "[dbxFileUploadActionSync]", ngImport: i0 });
@@ -4175,7 +4144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: '[dbxFileUploadActionSync]',
                     standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class AbstractDbxErrorWidgetComponent {
     data = inject(DBX_INJECTION_COMPONENT_DATA);
@@ -4812,13 +4781,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class DbxActionLoadingContextDirective {
     loadingComponent = inject(DbxLoadingComponent, { host: true });
     source = inject(DbxActionContextStoreSourceInstance);
-    _context = loadingStateContext({ obs: this.source.loadingState$ });
+    _context = cleanLoadingContext({ obs: this.source.loadingState$ });
     constructor() {
         this.loadingComponent.setContext(this._context);
     }
-    ngOnDestroy() {
-        this._context.destroy();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionLoadingContextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxActionLoadingContextDirective, isStandalone: true, selector: "[dbxActionLoadingContext]", ngImport: i0 });
 }
@@ -4862,10 +4828,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * Component for a snackbar that contains an action.
  */
-class DbxActionSnackbarComponent extends AbstractSubscriptionDirective {
+class DbxActionSnackbarComponent {
     snackbarRef = inject((MatSnackBarRef));
     snackbarData = inject(MAT_SNACK_BAR_DATA);
-    _durationTimeout = new Subject();
+    _durationTimeout = completeOnDestroy(new Subject());
     _actionRef = this.snackbarData.action?.reference;
     sourceInstance$ = of(this._actionRef).pipe(filterMaybe(), map((x) => x?.sourceInstance));
     complete$ = this.sourceInstance$.pipe(switchMap((x) => x.isSuccess$), startWith(false), shareReplay(1));
@@ -4894,17 +4860,13 @@ class DbxActionSnackbarComponent extends AbstractSubscriptionDirective {
     hasAction = Boolean(this.action?.reference);
     message = this.snackbarData.message;
     actionConfig = this.snackbarData.action;
-    ngOnInit() {
+    constructor() {
         // Subscribe and close if the duration is up and the action state is idle.
-        this.sub = this._durationTimeout
+        cleanSubscription(this._durationTimeout
             .pipe(switchMap(() => this.loadingStateType$), filter((x) => x === LoadingStateType.IDLE))
             .subscribe(() => {
             this.dismiss();
-        });
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._durationTimeout.complete();
+        }));
     }
     ngAfterViewInit() {
         // Responsible for hiding itself if it has an action.
@@ -4920,13 +4882,13 @@ class DbxActionSnackbarComponent extends AbstractSubscriptionDirective {
     dismiss = () => {
         this.snackbarRef.dismiss();
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionSnackbarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxActionSnackbarComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-action-snackbar\" [ngClass]=\"snackbarStatusClassSignal()\">\n  <span>{{ message }}</span>\n  <dbx-spacer></dbx-spacer>\n  @switch (completeSignal()) {\n    @case (true) {\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"done\" text=\"Success\"></dbx-button>\n    }\n    @case (false) {\n      @if (hasAction) {\n        <dbx-action dbxActionValue [dbxActionSource]=\"sourceInstanceSignal()\" [dbxActionSuccessHandler]=\"dismissAfterActionCompletes\">\n          <dbx-button dbxActionButton color=\"warn\" [text]=\"button\"></dbx-button>\n        </dbx-action>\n        <dbx-button-spacer></dbx-button-spacer>\n      }\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"close\"></dbx-button>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DbxActionSourceDirective, selector: "[dbxActionSource]", inputs: ["dbxActionSource"] }, { kind: "directive", type: DbxActionSuccessHandlerDirective, selector: "[dbxActionSuccessHandler]", inputs: ["dbxActionSuccessHandler"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }, { kind: "directive", type: DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxActionSnackbarComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"dbx-action-snackbar\" [ngClass]=\"snackbarStatusClassSignal()\">\n  <span>{{ message }}</span>\n  <dbx-spacer></dbx-spacer>\n  @switch (completeSignal()) {\n    @case (true) {\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"done\" text=\"Success\"></dbx-button>\n    }\n    @case (false) {\n      @if (hasAction) {\n        <dbx-action dbxActionValue [dbxActionSource]=\"sourceInstanceSignal()\" [dbxActionSuccessHandler]=\"dismissAfterActionCompletes\">\n          <dbx-button dbxActionButton color=\"warn\" [text]=\"button\"></dbx-button>\n        </dbx-action>\n        <dbx-button-spacer></dbx-button-spacer>\n      }\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"close\"></dbx-button>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DbxActionSourceDirective, selector: "[dbxActionSource]", inputs: ["dbxActionSource"] }, { kind: "directive", type: DbxActionSuccessHandlerDirective, selector: "[dbxActionSuccessHandler]", inputs: ["dbxActionSuccessHandler"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "raised", "stroked", "flat", "iconOnly", "fab", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "directive", type: DbxSpacerDirective, selector: "dbx-spacer, [dbxSpacer]" }, { kind: "directive", type: DbxActionDirective, selector: "dbx-action,[dbxAction],dbx-action-context,[dbxActionContext]", exportAs: ["action", "dbxAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionSnackbarComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [NgClass, DbxActionSourceDirective, DbxActionSuccessHandlerDirective, DbxButtonComponent, DbxButtonSpacerDirective, DbxSpacerDirective, DbxActionDirective, DbxActionValueStreamDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dbx-action-snackbar\" [ngClass]=\"snackbarStatusClassSignal()\">\n  <span>{{ message }}</span>\n  <dbx-spacer></dbx-spacer>\n  @switch (completeSignal()) {\n    @case (true) {\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"done\" text=\"Success\"></dbx-button>\n    }\n    @case (false) {\n      @if (hasAction) {\n        <dbx-action dbxActionValue [dbxActionSource]=\"sourceInstanceSignal()\" [dbxActionSuccessHandler]=\"dismissAfterActionCompletes\">\n          <dbx-button dbxActionButton color=\"warn\" [text]=\"button\"></dbx-button>\n        </dbx-action>\n        <dbx-button-spacer></dbx-button-spacer>\n      }\n      <dbx-button (buttonClick)=\"dismiss()\" color=\"accent\" icon=\"close\"></dbx-button>\n    }\n  }\n</div>\n" }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const DBX_ACTION_SNACKBAR_DEFAULTS = {
     create: {
@@ -5148,14 +5110,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * Action directive that displays a snackbar when the action context hits a certain state.
  */
-class DbxActionSnackbarDirective extends AbstractSubscriptionDirective {
+class DbxActionSnackbarDirective {
     source = inject((DbxActionContextStoreSourceInstance), { host: true });
     dbxActionSnackbarService = inject(DbxActionSnackbarService);
     dbxActionSnackbarDefault = input();
     dbxActionSnackbarUndo = input();
     dbxActionSnackbar = input(undefined, { transform: transformEmptyStringInputToUndefined });
+    _sub = cleanSubscription();
     ngOnInit() {
-        this.sub = this.source
+        this._sub.setSub(this.source
             .pipeStore((store) => store.loadingState$)
             .subscribe((loadingState) => {
             const event = { value: loadingState.value, error: loadingState.error, type: loadingStateType(loadingState) };
@@ -5163,7 +5126,7 @@ class DbxActionSnackbarDirective extends AbstractSubscriptionDirective {
             if (config) {
                 this.showSnackbarForConfiguration(config, event);
             }
-        });
+        }));
     }
     buildConfigurationForEvent(event) {
         const input = {
@@ -5176,8 +5139,8 @@ class DbxActionSnackbarDirective extends AbstractSubscriptionDirective {
     showSnackbarForConfiguration(config, event) {
         this.dbxActionSnackbarService.openSnackbar(config);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionSnackbarDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxActionSnackbarDirective, isStandalone: true, selector: "[dbxActionSnackbar]", inputs: { dbxActionSnackbarDefault: { classPropertyName: "dbxActionSnackbarDefault", publicName: "dbxActionSnackbarDefault", isSignal: true, isRequired: false, transformFunction: null }, dbxActionSnackbarUndo: { classPropertyName: "dbxActionSnackbarUndo", publicName: "dbxActionSnackbarUndo", isSignal: true, isRequired: false, transformFunction: null }, dbxActionSnackbar: { classPropertyName: "dbxActionSnackbar", publicName: "dbxActionSnackbar", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionSnackbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxActionSnackbarDirective, isStandalone: true, selector: "[dbxActionSnackbar]", inputs: { dbxActionSnackbarDefault: { classPropertyName: "dbxActionSnackbarDefault", publicName: "dbxActionSnackbarDefault", isSignal: true, isRequired: false, transformFunction: null }, dbxActionSnackbarUndo: { classPropertyName: "dbxActionSnackbarUndo", publicName: "dbxActionSnackbarUndo", isSignal: true, isRequired: false, transformFunction: null }, dbxActionSnackbar: { classPropertyName: "dbxActionSnackbar", publicName: "dbxActionSnackbar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionSnackbarDirective, decorators: [{
             type: Directive,
@@ -5204,16 +5167,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * Context used for linking an ReadableErrorComponent to an ActionContext.
  */
-class DbxActionErrorDirective extends AbstractSubscriptionDirective {
+class DbxActionErrorDirective {
     error = inject(DbxErrorComponent, { host: true });
     source = inject(DbxActionContextStoreSourceInstance);
-    ngOnInit() {
-        this.sub = this.source.error$.subscribe((error) => {
+    constructor() {
+        cleanSubscription(this.source.error$.subscribe((error) => {
             this.error.setError(error);
-        });
+        }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionErrorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxActionErrorDirective, isStandalone: true, selector: "[dbxActionError]", usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxActionErrorDirective, isStandalone: true, selector: "[dbxActionError]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionErrorDirective, decorators: [{
             type: Directive,
@@ -5221,7 +5184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: '[dbxActionError]',
                     standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Dialog that is shown/triggered as part of the DbxActionTransitionSafety
@@ -5558,21 +5521,22 @@ function convertToServerErrorResponse(error) {
  *
  * The error from the context is given to the app error when available.
  */
-class DbxLoadingErrorDirective extends AbstractSubscriptionDirective {
+class DbxLoadingErrorDirective {
     error = inject(DbxErrorComponent, { host: true });
     context = input.required({ alias: 'dbxLoadingError' });
     context$ = toObservable(this.context).pipe(maybeValueFromObservableOrValue(), distinctUntilChanged(), shareReplay(1));
     contextSignal = toSignal(this.context$);
+    _errorEffectSub = cleanSubscription();
     _errorEffect = effect(() => {
         const context = this.contextSignal();
         let subscription;
         if (context) {
             subscription = context.stream$.subscribe((x) => this.error.setError(x.error));
         }
-        this.sub = subscription;
+        this._errorEffectSub.setSub(subscription);
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxLoadingErrorDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxLoadingErrorDirective, isStandalone: true, selector: "[dbxLoadingError]", inputs: { context: { classPropertyName: "context", publicName: "dbxLoadingError", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxLoadingErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxLoadingErrorDirective, isStandalone: true, selector: "[dbxLoadingError]", inputs: { context: { classPropertyName: "context", publicName: "dbxLoadingError", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxLoadingErrorDirective, decorators: [{
             type: Directive,
@@ -5587,26 +5551,22 @@ class DbxErrorSnackbarComponent {
     data = inject(MAT_SNACK_BAR_DATA);
     error = this.data.error;
     _popoverOpen = signal(false);
-    _timer = makeTimer(this.data.duration ?? MS_IN_MINUTE, Boolean(this.data.duration));
+    _timer = clean(makeTimer(this.data.duration ?? MS_IN_MINUTE, Boolean(this.data.duration)));
     _allowAutoDismiss = this.data.duration != null;
     _popoverSyncEffect = effect(() => toggleTimerRunning(this._timer, !this._popoverOpen()));
-    _popoverAfterClosedSub = new SubscriptionObject();
-    _autoDismissSub = new SubscriptionObject();
-    ngOnInit() {
+    _popoverAfterClosedSub = cleanSubscription();
+    _autoDismissSub = cleanSubscription();
+    constructor() {
         if (this._allowAutoDismiss) {
-            this._autoDismissSub.subscription = from(this._timer.promise).subscribe(() => this.dismiss());
+            this._autoDismissSub.setSub(from(this._timer.promise).subscribe(() => this.dismiss()));
         }
         else {
             this._popoverSyncEffect.destroy();
         }
     }
-    ngOnDestroy() {
-        this._autoDismissSub.destroy();
-        this._timer.destroy();
-    }
     onPopoverOpened(popover) {
         this._popoverOpen.set(true);
-        this._popoverAfterClosedSub.subscription = popover.afterClosed$.subscribe(() => this._popoverOpen.set(false));
+        this._popoverAfterClosedSub.setSub(popover.afterClosed$.subscribe(() => this._popoverOpen.set(false)));
     }
     dismiss() {
         this.snackBarRef.dismiss();
@@ -5650,7 +5610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     imports: [CommonModule, MatIconModule, MatButtonModule, DbxErrorViewComponent, DbxErrorComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const DEFAULT_DBX_ERROR_SNACKBAR_CONFIG = {
     politeness: 'polite',
@@ -5690,21 +5650,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * Context used for displaying an error from an ActionContext a snackbar when an ReadableErrorComponent
  */
-class DbxActionSnackbarErrorDirective extends AbstractSubscriptionDirective {
+class DbxActionSnackbarErrorDirective {
     dbxErrorSnackbarService = inject(DbxErrorSnackbarService);
     source = inject(DbxActionContextStoreSourceInstance);
     config = input(undefined, { alias: 'dbxActionSnackbarError' });
     constructor() {
-        super();
-        this.sub = this.source.error$.pipe(filterMaybe()).subscribe((inputError) => {
+        cleanSubscription(this.source.error$.pipe(filterMaybe()).subscribe((inputError) => {
             const config = this.config();
             const error = toReadableError(inputError);
             const snackbarConfig = config ? (typeof config === 'number' ? { duration: config } : config) : undefined;
             this.dbxErrorSnackbarService.showSnackbarError(error, snackbarConfig);
-        });
+        }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionSnackbarErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxActionSnackbarErrorDirective, isStandalone: true, selector: "[dbxActionSnackbarError]", inputs: { config: { classPropertyName: "config", publicName: "dbxActionSnackbarError", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxActionSnackbarErrorDirective, isStandalone: true, selector: "[dbxActionSnackbarError]", inputs: { config: { classPropertyName: "config", publicName: "dbxActionSnackbarError", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxActionSnackbarErrorDirective, decorators: [{
             type: Directive,
@@ -5858,11 +5817,8 @@ class DbxModelViewTrackerStorage {
     static OBJECT_VIEW_TRACKER_STORAGE_LIST_KEY = 'dbxModelViewTrackerEvents';
     static DEFAULT_MAX_EVENTS = 100;
     storageAccessor = inject(DBX_MODEL_VIEW_TRACKER_STORAGE_ACCESSOR_TOKEN);
-    _newEvent = new Subject();
+    _newEvent = completeOnDestroy(new Subject());
     newEvent$ = this._newEvent.asObservable();
-    ngOnDestroy() {
-        this._newEvent.complete();
-    }
     get storageKey() {
         return DbxModelViewTrackerStorage.OBJECT_VIEW_TRACKER_STORAGE_LIST_KEY;
     }
@@ -6085,9 +6041,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * Button used for downloading an arbitrary blob based on the input configuration.
  */
-class DbxDownloadBlobButtonComponent extends AbstractSubscriptionDirective {
+class DbxDownloadBlobButtonComponent {
     _sanitizer = inject(DomSanitizer);
-    _browserObjectUrl = browserObjectUrlRef();
+    _browserObjectUrl = clean(browserObjectUrlRef());
     config = input(undefined);
     downloadButton = viewChild('downloadButton', { read: ElementRef });
     config$ = toObservable(this.config);
@@ -6134,12 +6090,8 @@ class DbxDownloadBlobButtonComponent extends AbstractSubscriptionDirective {
         };
         return style;
     });
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._browserObjectUrl.destroy();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDownloadBlobButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: DbxDownloadBlobButtonComponent, isStandalone: true, selector: "dbx-download-blob-button", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxDownloadBlobButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: DbxDownloadBlobButtonComponent, isStandalone: true, selector: "dbx-download-blob-button", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <a #downloadButton [ngClass]="{ 'pointer-disabled': !downloadReadySignal() }" e [href]="fileUrlSignal()" [attr.download]="fileNameSignal()"><dbx-button [buttonDisplay]="buttonDisplaySignal()" [buttonStyle]="buttonStyleSignal()" [working]="!downloadReadySignal()" [disabled]="!downloadReadySignal()"></dbx-button></a>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: DbxActionModule }, { 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 });
 }
@@ -6323,7 +6275,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * View for previewing and downloading arbitrary text content.
  */
 class DbxDownloadTextViewComponent extends AbstractDbxClipboardDirective {
-    _browserObjectUrl = browserObjectUrlRef();
     downloadButton = viewChild('downloadButton', { read: ElementRef });
     showDownloadButton = input(true);
     loadingText = input(undefined);
@@ -6383,9 +6334,6 @@ class DbxDownloadTextViewComponent extends AbstractDbxClipboardDirective {
             }
         }));
     };
-    ngOnDestroy() {
-        this._browserObjectUrl.destroy();
-    }
     toggleExpandPreview() {
         this.expandPreview.update((value) => !value);
     }
@@ -7120,7 +7068,7 @@ const INITIAL_STATE = {
     minRightWidth: DEFAULT_TWO_COLUMNS_MIN_RIGHT_WIDTH
 };
 class TwoColumnsContextStore extends ComponentStore {
-    _back = new Subject();
+    _back = completeOnDestroy(new Subject());
     constructor() {
         super({ ...INITIAL_STATE });
     }
@@ -7212,11 +7160,6 @@ class TwoColumnsContextStore extends ComponentStore {
     back() {
         this._back.next();
     }
-    // MARK: Internal
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._back.complete();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoColumnsContextStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoColumnsContextStore });
 }
@@ -7239,7 +7182,7 @@ function provideTwoColumnsContext() {
  *
  * Requires a TwoColumnsContextStore to be provided.
  */
-class DbxTwoColumnComponent extends AbstractSubscriptionDirective {
+class DbxTwoColumnComponent {
     _elementRef = inject(ElementRef);
     twoColumnsContextStore = inject(TwoColumnsContextStore);
     reverseSizing = input(false);
@@ -7272,8 +7215,8 @@ class DbxTwoColumnComponent extends AbstractSubscriptionDirective {
         const totalWidth = this._elementRef.nativeElement.clientWidth;
         this.twoColumnsContextStore.setTotalWidth(totalWidth);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTwoColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxTwoColumnComponent, isStandalone: true, selector: "dbx-two-column", inputs: { reverseSizing: { classPropertyName: "reverseSizing", publicName: "reverseSizing", isSignal: true, isRequired: false, transformFunction: null }, inSectionPage: { classPropertyName: "inSectionPage", publicName: "inSectionPage", isSignal: true, isRequired: false, transformFunction: null }, hasRightContent: { classPropertyName: "hasRightContent", publicName: "hasRightContent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClassSignal()" }, classAttribute: "dbx-two-column" }, exportAs: ["columns"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTwoColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxTwoColumnComponent, isStandalone: true, selector: "dbx-two-column", inputs: { reverseSizing: { classPropertyName: "reverseSizing", publicName: "reverseSizing", isSignal: true, isRequired: false, transformFunction: null }, inSectionPage: { classPropertyName: "inSectionPage", publicName: "inSectionPage", isSignal: true, isRequired: false, transformFunction: null }, hasRightContent: { classPropertyName: "hasRightContent", publicName: "hasRightContent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClassSignal()" }, classAttribute: "dbx-two-column" }, exportAs: ["columns"], ngImport: i0, template: `
     <dbx-content-container grow="full" padding="none" class="dbx-content dbx-content-auto-height left-column">
       @if (!hideLeftColumnSignal() && reverseSizingSignal()) {
         <div (dbxResized)="viewResized($event)"></div>
@@ -7379,17 +7322,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * Used with an DbxTwoColumnComponent to help respond to a "back" function.
  */
-class DbxTwoColumnBackDirective extends AbstractSubscriptionDirective {
+class DbxTwoColumnBackDirective {
     twoColumnsContextStore = inject(TwoColumnsContextStore);
     dbxTwoColumnBack = output();
-    ngOnInit() {
-        this.sub = this.twoColumnsContextStore.back$.subscribe(() => this.dbxTwoColumnBack.emit());
+    constructor() {
+        cleanSubscription(this.twoColumnsContextStore.back$.subscribe(() => this.dbxTwoColumnBack.emit()));
     }
     backClicked() {
         this.twoColumnsContextStore.back();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTwoColumnBackDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxTwoColumnBackDirective, isStandalone: true, selector: "[dbxTwoColumnBack]", outputs: { dbxTwoColumnBack: "dbxTwoColumnBack" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTwoColumnBackDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxTwoColumnBackDirective, isStandalone: true, selector: "[dbxTwoColumnBack]", outputs: { dbxTwoColumnBack: "dbxTwoColumnBack" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTwoColumnBackDirective, decorators: [{
             type: Directive,
@@ -7397,7 +7340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     selector: '[dbxTwoColumnBack]',
                     standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Provides a dbxTwoColumnContextStore
@@ -7683,13 +7626,10 @@ function listItemModifier(key, modify) {
  */
 class DbxValueListItemModifierDirective {
     inputModifiers = input(undefined, { alias: 'dbxListItemModifier', transform: transformEmptyStringInputToUndefined });
-    _additionalModifiers = new BehaviorSubject(undefined);
+    _additionalModifiers = completeOnDestroy(new BehaviorSubject(undefined));
     modifiers$ = combineLatest([this._additionalModifiers, toObservable(this.inputModifiers)]).pipe(map(([modifiers, inputModifiers]) => {
         return combineMaps(modifiers, inputModifiers ? addModifiers(inputModifiers) : undefined);
     }), shareReplay(1));
-    ngOnDestroy() {
-        this._additionalModifiers.complete();
-    }
     // MARK: Modifiers
     addModifiers(modifiers) {
         this._additionalModifiers.next(addModifiers(modifiers, this._additionalModifiers.value));
@@ -7714,14 +7654,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class AbstractDbxValueListItemModifierDirective {
     dbxValueListItemModifier = inject((DbxValueListItemModifier));
     _currentLinkedModifiers;
-    _modifiers = new BehaviorSubject(undefined);
+    _modifiers = completeOnDestroy(new BehaviorSubject(undefined));
     modifiers$ = this._modifiers.pipe(maybeValueFromObservableOrValue(), distinctUntilChanged());
-    _modifiersSub = new SubscriptionObject(this.modifiers$.subscribe((modifiers) => {
-        this._linkModifiers(modifiers);
-    }));
-    ngOnDestroy() {
-        this._modifiersSub.destroy();
-        this._unlinkModifiers();
+    constructor() {
+        cleanSubscription(this.modifiers$.subscribe((modifiers) => {
+            this._linkModifiers(modifiers);
+        }));
+        clean(() => this._unlinkModifiers());
     }
     setModifiers(modifiers) {
         this._modifiers.next(modifiers);
@@ -7744,7 +7683,7 @@ class AbstractDbxValueListItemModifierDirective {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxValueListItemModifierDirective, decorators: [{
             type: Directive
-        }] });
+        }], ctorParameters: () => [] });
 
 const DBX_ROUTER_VALUE_LIST_ITEM_MODIFIER_KEY = 'router_anchor';
 class DbxListItemAnchorModifierDirective extends AbstractDbxValueListItemModifierDirective {
@@ -8501,18 +8440,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * Used with a DbxTwoColumnComponent to control showing right when the current route is a child of the backRef.
  */
-class DbxTwoColumnSrefShowRightDirective extends AbstractSubscriptionDirective {
+class DbxTwoColumnSrefShowRightDirective {
     _twoColumnsContextStore = inject(TwoColumnsContextStore);
     _dbxRouterService = inject(DbxRouterService);
     showRight$ = this._twoColumnsContextStore.backRef$.pipe(
     // Only show right when the backRef is not exactly active
     isSegueRefActive({ dbxRouterService: this._dbxRouterService, activeExactly: true }), isNot(), distinctUntilChanged(), shareReplay(1));
     constructor() {
-        super();
-        this.sub = this._twoColumnsContextStore.setShowRight(this.showRight$);
+        cleanSubscription(this._twoColumnsContextStore.setShowRight(this.showRight$));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTwoColumnSrefShowRightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxTwoColumnSrefShowRightDirective, isStandalone: true, selector: "[dbxTwoColumnSrefShowRight]", usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxTwoColumnSrefShowRightDirective, isStandalone: true, selector: "[dbxTwoColumnSrefShowRight]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTwoColumnSrefShowRightDirective, decorators: [{
             type: Directive,
@@ -8771,7 +8709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 /**
  * Used to declare a dbxFlexGroup.
  */
-class DbxFlexGroupDirective extends AbstractSubscriptionDirective {
+class DbxFlexGroupDirective {
     _dbxScreenMediaService = inject(DbxScreenMediaService);
     content = input(true);
     breakToColumn = input(false);
@@ -8779,8 +8717,8 @@ class DbxFlexGroupDirective extends AbstractSubscriptionDirective {
     breakpoint = input('tablet', { transform: (x) => x ?? 'tablet' });
     isSmallScreen$ = this._dbxScreenMediaService.isBreakpointActive(toObservable(this.breakpoint)).pipe(map((x) => !x), distinctUntilChanged(), shareReplay(1));
     smallSignal = toSignal(this.isSmallScreen$, { initialValue: false });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFlexGroupDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxFlexGroupDirective, isStandalone: true, selector: "[dbxFlexGroup]", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, breakToColumn: { classPropertyName: "breakToColumn", publicName: "breakToColumn", isSignal: true, isRequired: false, transformFunction: null }, relative: { classPropertyName: "relative", publicName: "relative", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-flex-group": "content()", "class.dbx-flex-group-break-to-column": "breakToColumn()", "class.dbx-flex-group-relative": "relative()", "class.dbx-flex-group-small": "smallSignal()" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFlexGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxFlexGroupDirective, isStandalone: true, selector: "[dbxFlexGroup]", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, breakToColumn: { classPropertyName: "breakToColumn", publicName: "breakToColumn", isSignal: true, isRequired: false, transformFunction: null }, relative: { classPropertyName: "relative", publicName: "relative", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-flex-group": "content()", "class.dbx-flex-group-break-to-column": "breakToColumn()", "class.dbx-flex-group-relative": "relative()", "class.dbx-flex-group-small": "smallSignal()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxFlexGroupDirective, decorators: [{
             type: Directive,
@@ -9301,14 +9239,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class AbstractDbxListViewDirective {
     valuesArray = input();
     values = input();
-    _trackBy = new BehaviorSubject(undefined);
-    _disabled = new BehaviorSubject(false);
-    _selectionMode = new BehaviorSubject(undefined);
-    _valuesOverride = new BehaviorSubject(undefined);
-    trackBy$ = this._trackBy.asObservable();
+    clickValue = output();
+    _trackBySignal = signal(undefined);
+    _disabledSignal = signal(false);
+    _selectionModeSignal = signal(undefined);
+    _valuesOverrideSignal = signal(undefined);
+    trackBy$ = toObservable(this._trackBySignal);
+    disabled$ = toObservable(this._disabledSignal);
+    selectionMode$ = toObservable(this._selectionModeSignal);
     _inputValuesArray$ = toObservable(this.valuesArray);
     _inputValues$ = toObservable(this.values);
-    _values$ = this._valuesOverride.pipe(switchMap((x) => {
+    _values$ = toObservable(this._valuesOverrideSignal).pipe(switchMap((x) => {
         let valuesObs;
         if (x) {
             valuesObs = asObservable(x);
@@ -9319,14 +9260,6 @@ class AbstractDbxListViewDirective {
         return valuesObs;
     }));
     values$ = this._values$.pipe(maybeValueFromObservableOrValue(), map((x) => x ?? []), distinctUntilChanged(), shareReplay(1));
-    disabled$ = this._disabled.asObservable();
-    selectionMode$ = this._selectionMode.asObservable();
-    clickValue = output();
-    ngOnDestroy() {
-        this._disabled.complete();
-        this._selectionMode.complete();
-        this._valuesOverride.complete();
-    }
     onClickValue(value) {
         this.clickValue.emit(value);
     }
@@ -9334,16 +9267,16 @@ class AbstractDbxListViewDirective {
         this.setValues(state.currentList$);
     }
     setValues(values) {
-        this._valuesOverride.next(values);
+        this._valuesOverrideSignal.set(values);
     }
     setDisabled(disabled) {
-        this._disabled.next(disabled);
+        this._disabledSignal.set(disabled);
     }
     setSelectionMode(selectionMode) {
-        this._selectionMode.next(selectionMode);
+        this._selectionModeSignal.set(selectionMode);
     }
     setTrackBy(trackBy) {
-        this._trackBy.next(trackBy);
+        this._trackBySignal.set(trackBy);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AbstractDbxListViewDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: AbstractDbxListViewDirective, inputs: { valuesArray: { classPropertyName: "valuesArray", publicName: "valuesArray", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickValue: "clickValue" }, ngImport: i0 });
@@ -10458,7 +10391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  *
  * Will update the parent DbxStyleService.
  */
-class DbxSetStyleDirective extends AbstractSubscriptionDirective {
+class DbxSetStyleDirective {
     _styleService = inject(DbxStyleService);
     /**
      * The input DbxStyleName to style the host element with.
@@ -10476,14 +10409,14 @@ class DbxSetStyleDirective extends AbstractSubscriptionDirective {
     suffixes$ = toObservable(this.suffixes).pipe(distinctUntilChanged(), map(splitCommaSeparatedStringToSet));
     config$ = combineLatest([this.style$, this.suffixes$]).pipe(map(([style, suffixes]) => ({ style, suffixes })), shareReplay(1));
     styleClass$ = this._styleService.getStyleClassWithConfig(this.config$);
-    ngOnInit() {
-        this._styleService.setConfig(this.config$);
-        this.sub = this.styleClass$.pipe(delay(0)).subscribe((style) => {
+    constructor() {
+        cleanSubscription(this.styleClass$.pipe(delay(0)).subscribe((style) => {
             this.outputStyleClassSignal.set(style);
-        });
+        }));
+        this._styleService.setConfig(this.config$);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxSetStyleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxSetStyleDirective, isStandalone: true, selector: "[dbxSetStyle]", inputs: { dbxSetStyle: { classPropertyName: "dbxSetStyle", publicName: "dbxSetStyle", isSignal: true, isRequired: false, transformFunction: null }, suffixes: { classPropertyName: "suffixes", publicName: "suffixes", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "outputStyleClassSignal()" }, classAttribute: "dbx-style-root" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxSetStyleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxSetStyleDirective, isStandalone: true, selector: "[dbxSetStyle]", inputs: { dbxSetStyle: { classPropertyName: "dbxSetStyle", publicName: "dbxSetStyle", isSignal: true, isRequired: false, transformFunction: null }, suffixes: { classPropertyName: "suffixes", publicName: "suffixes", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "outputStyleClassSignal()" }, classAttribute: "dbx-style-root" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxSetStyleDirective, decorators: [{
             type: Directive,
@@ -10495,18 +10428,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     },
                     standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Used to style the <body> element of the document document using the style provided by DbxStyleService.
  */
-class DbxStyleBodyDirective extends AbstractSubscriptionDirective {
+class DbxStyleBodyDirective {
     _styleService = inject(DbxStyleService);
     _renderer = inject(Renderer2);
     _styleClassNameSignal = signal(undefined);
     styleClassNameSignal = this._styleClassNameSignal.asReadonly();
-    ngOnInit() {
-        this.sub = this._styleService.styleClassName$.pipe(delay(0)).subscribe((newClassStyleToApply) => {
+    constructor() {
+        cleanSubscription(this._styleService.styleClassName$.pipe(delay(0)).subscribe((newClassStyleToApply) => {
             const currentStyle = this._styleClassNameSignal();
             if (currentStyle) {
                 this._renderer.removeClass(document.body, currentStyle);
@@ -10515,10 +10448,10 @@ class DbxStyleBodyDirective extends AbstractSubscriptionDirective {
                 this._renderer.addClass(document.body, newClassStyleToApply);
             }
             this._styleClassNameSignal.set(newClassStyleToApply);
-        });
+        }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxStyleBodyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxStyleBodyDirective, isStandalone: true, selector: "[dbxStyleBody]", host: { properties: { "class": "styleClassNameSignal()" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxStyleBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxStyleBodyDirective, isStandalone: true, selector: "[dbxStyleBody]", host: { properties: { "class": "styleClassNameSignal()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxStyleBodyDirective, decorators: [{
             type: Directive,
@@ -10529,7 +10462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     },
                     standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Used to apply a background style using a color.
@@ -11279,10 +11212,7 @@ class DbxZipBlobPreviewComponent {
     selectedFileEntry$ = toObservable(this.selectedFileNodeSignal);
     selectedFileEntryBlob$ = this.selectedFileEntry$.pipe(switchMap((x) => (x && x.value.getBlob ? x.value.getBlob() : of(undefined))), shareReplay(1));
     selectedFileEntryBlobSignal = toSignal(this.selectedFileEntryBlob$);
-    context = loadingStateContext({ obs: this.allEntriesLoadingState$ });
-    ngOnDestroy() {
-        this.context.destroy();
-    }
+    context = cleanLoadingContext({ obs: this.allEntriesLoadingState$ });
     makeEntryAnchor = (itemValue) => {
         return {
             onClick: () => {
@@ -11341,10 +11271,7 @@ class DbxZipPreviewComponent {
     }));
     zipFileBlob$ = this.zipFileBlobLoadingState$.pipe(valueFromFinishedLoadingState(), distinctUntilChanged(), shareReplay(1));
     zipFileBlobSignal = toSignal(this.zipFileBlob$);
-    context = loadingStateContext({ obs: this.zipFileBlobLoadingState$ });
-    ngOnDestroy() {
-        this.context.destroy();
-    }
+    context = cleanLoadingContext({ obs: this.zipFileBlobLoadingState$ });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxZipPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DbxZipPreviewComponent, isStandalone: true, selector: "dbx-zip-preview", inputs: { srcUrl: { classPropertyName: "srcUrl", publicName: "srcUrl", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null }, downloadFileName: { classPropertyName: "downloadFileName", publicName: "downloadFileName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { srcUrl: "srcUrlChange", blob: "blobChange", downloadFileName: "downloadFileNameChange" }, ngImport: i0, template: `
     <dbx-loading [context]="context">
@@ -11697,7 +11624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Service that tracks all active help context strings in the current context.
  */
 class DbxHelpContextService {
-    _contextReferences = new BehaviorSubject(new Set());
+    _contextReferences = completeOnDestroy(new BehaviorSubject(new Set()));
     /**
      * Observable of all currently active help context strings.
      */
@@ -11713,9 +11640,6 @@ class DbxHelpContextService {
         referenceSet.delete(reference);
         this._contextReferences.next(referenceSet);
     }
-    ngOnDestroy() {
-        this._contextReferences.complete();
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxHelpContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxHelpContextService });
 }