@daffodil/design 0.92.3 → 0.93.1

package/fesm2022/daffodil-design.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, NgModule, isDevMode, Input, Injectable, InjectionToken, inject, PLATFORM_ID, DOCUMENT, Inject, makeEnvironmentProviders, provideAppInitializer, EventEmitter, Output, afterNextRender, signal, input, computed, effect, forwardRef, Optional, SkipSelf } from '@angular/core';
+import { HostBinding, Directive, NgModule, isDevMode, Input, Injectable, InjectionToken, inject, PLATFORM_ID, DOCUMENT, Inject, makeEnvironmentProviders, provideAppInitializer, model, EventEmitter, Output, afterNextRender, signal, input, computed, effect, forwardRef, Optional, SkipSelf } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { isPlatformBrowser } from '@angular/common';
 import { of, fromEventPattern, Subject, merge, fromEvent, EMPTY, combineLatest } from 'rxjs';
@@ -18,10 +18,10 @@ class DaffFormLabelDirective {
          */
         this.class = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffFormLabelDirective, isStandalone: true, selector: "[daffFormLabel]", host: { properties: { "class.daff-form-label": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffFormLabelDirective, isStandalone: true, selector: "[daffFormLabel]", host: { properties: { "class.daff-form-label": "this.class" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFormLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffFormLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffFormLabel]',
@@ -35,11 +35,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
  */
 class DaffFormLabelModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFormLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: DaffFormLabelModule, imports: [DaffFormLabelDirective], exports: [DaffFormLabelDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFormLabelModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffFormLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: DaffFormLabelModule, imports: [DaffFormLabelDirective], exports: [DaffFormLabelDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffFormLabelModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFormLabelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffFormLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -56,10 +56,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * in components like `DaffFormFieldComponent` or `DaffListComponent`.
  */
 class DaffPrefixDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffPrefixDirective, isStandalone: true, selector: "[daffPrefix]", host: { classAttribute: "daff-prefix" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffPrefixDirective, isStandalone: true, selector: "[daffPrefix]", host: { classAttribute: "daff-prefix" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffPrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffPrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffPrefix]',
@@ -74,10 +74,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * in components like `DaffFormFieldComponent` or `DaffListComponent`.
  */
 class DaffSuffixDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffSuffixDirective, isStandalone: true, selector: "[daffSuffix]", host: { classAttribute: "daff-suffix" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffSuffixDirective, isStandalone: true, selector: "[daffSuffix]", host: { classAttribute: "daff-suffix" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSuffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffSuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSuffix]',
@@ -91,13 +91,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * @deprecated in favor of standalone components. Deprecated in version 0.91.0. Will be removed in version 1.0.0.
  */
 class DaffPrefixSuffixModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffPrefixSuffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: DaffPrefixSuffixModule, imports: [DaffPrefixDirective,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffPrefixSuffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: DaffPrefixSuffixModule, imports: [DaffPrefixDirective,
             DaffSuffixDirective], exports: [DaffPrefixDirective,
             DaffSuffixDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffPrefixSuffixModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffPrefixSuffixModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffPrefixSuffixModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffPrefixSuffixModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -189,10 +189,10 @@ class DaffColorableDirective {
             this.color = this.defaultColor;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffColorableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffColorableDirective, isStandalone: true, selector: "[daffColorable]", inputs: { color: "color" }, host: { properties: { "class.daff-primary": "color === \"primary\"", "class.daff-secondary": "color === \"secondary\"", "class.daff-tertiary": "color === \"tertiary\"", "class.daff-light": "color === \"light\"", "class.daff-dark": "color === \"dark\"", "class.daff-theme": "color === \"theme\"", "class.daff-theme-contrast": "color === \"theme-contrast\"", "class.daff-black": "color === \"black\"", "class.daff-white": "color === \"white\"" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffColorableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffColorableDirective, isStandalone: true, selector: "[daffColorable]", inputs: { color: "color" }, host: { properties: { "class.daff-primary": "color === \"primary\"", "class.daff-secondary": "color === \"secondary\"", "class.daff-tertiary": "color === \"tertiary\"", "class.daff-light": "color === \"light\"", "class.daff-dark": "color === \"dark\"", "class.daff-theme": "color === \"theme\"", "class.daff-theme-contrast": "color === \"theme-contrast\"", "class.daff-black": "color === \"black\"", "class.daff-white": "color === \"white\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffColorableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffColorableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffColorable]',
@@ -254,10 +254,10 @@ class NoopBreakpointObserver {
     observe(value) {
         return of();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NoopBreakpointObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NoopBreakpointObserver, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NoopBreakpointObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NoopBreakpointObserver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NoopBreakpointObserver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NoopBreakpointObserver, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -359,10 +359,10 @@ class DaffStatusableDirective {
             this.status = this.defaultStatus;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffStatusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class.daff-info": "status === \"info\"", "class.daff-warn": "status === \"warn\"", "class.daff-critical": "status === \"critical\"", "class.daff-success": "status === \"success\"" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffStatusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class.daff-info": "status === \"info\"", "class.daff-warn": "status === \"warn\"", "class.daff-critical": "status === \"critical\"", "class.daff-success": "status === \"success\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffStatusableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffStatusableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffStatusable]',
@@ -425,10 +425,10 @@ class DaffSkeletonableDirective {
          */
         this.skeleton = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSkeletonableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffSkeletonableDirective, isStandalone: true, selector: "[daffSkeletonable]", inputs: { skeleton: "skeleton" }, host: { properties: { "class.daff-skeleton": "skeleton" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffSkeletonableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffSkeletonableDirective, isStandalone: true, selector: "[daffSkeletonable]", inputs: { skeleton: "skeleton" }, host: { properties: { "class.daff-skeleton": "skeleton" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSkeletonableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffSkeletonableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSkeletonable]',
@@ -441,6 +441,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 
 /**
+ * @deprecated Deprecated in version 0.93.0. Will be removed in version 0.96.0.
+ *
  * This enum will be removed from the public api in v1.0.0.
  */
 var DaffTextAlignmentEnum;
@@ -479,10 +481,10 @@ class DaffTextAlignableDirective {
             this.textAlignment = this.defaultAlignment;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTextAlignableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffTextAlignableDirective, isStandalone: true, selector: "[daffTextAlignable]", inputs: { textAlignment: "textAlignment" }, host: { properties: { "class.daff-left": "textAlignment === \"left\"", "class.daff-center": "textAlignment === \"center\"", "class.daff-right": "textAlignment === \"right\"" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffTextAlignableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffTextAlignableDirective, isStandalone: true, selector: "[daffTextAlignable]", inputs: { textAlignment: "textAlignment" }, host: { properties: { "class.daff-left": "textAlignment === \"left\"", "class.daff-center": "textAlignment === \"center\"", "class.daff-right": "textAlignment === \"right\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffTextAlignableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffTextAlignableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffTextAlignable]',
@@ -506,10 +508,10 @@ class DaffCompactableDirective {
          */
         this.compact = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffCompactableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffCompactableDirective, isStandalone: true, selector: "[daffCompactable]", inputs: { compact: "compact" }, host: { properties: { "class.daff-compact": "compact" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffCompactableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffCompactableDirective, isStandalone: true, selector: "[daffCompactable]", inputs: { compact: "compact" }, host: { properties: { "class.daff-compact": "compact" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffCompactableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffCompactableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffCompactable]',
@@ -579,10 +581,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * This directive will apply the `daff-manage-container-layout` class to your component, ensuring that the styles set on `:host` are passed down to the container.
  */
 class DaffManageContainerLayoutDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffManageContainerLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffManageContainerLayoutDirective, isStandalone: true, selector: "[daffManageContainerLayout]", host: { classAttribute: "daff-manage-container-layout" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffManageContainerLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffManageContainerLayoutDirective, isStandalone: true, selector: "[daffManageContainerLayout]", host: { classAttribute: "daff-manage-container-layout" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffManageContainerLayoutDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffManageContainerLayoutDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffManageContainerLayout]',
@@ -596,10 +598,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * The `DaffArticleEncapsulatedDirective` prevents {@link DaffArticleComponent } styles from bleeding into custom components nested within an article.
  */
 class DaffArticleEncapsulatedDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffArticleEncapsulatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffArticleEncapsulatedDirective, isStandalone: true, selector: "[daffArticleEncapsulated]", host: { classAttribute: "daff-ae" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffArticleEncapsulatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffArticleEncapsulatedDirective, isStandalone: true, selector: "[daffArticleEncapsulated]", host: { classAttribute: "daff-ae" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffArticleEncapsulatedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffArticleEncapsulatedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffArticleEncapsulated]',
@@ -616,7 +618,7 @@ var DaffTheme;
 (function (DaffTheme) {
     DaffTheme["Light"] = "light";
     DaffTheme["Dark"] = "dark";
-    DaffTheme["None"] = "none";
+    DaffTheme["System"] = "system";
 })(DaffTheme || (DaffTheme = {}));
 
 const mediaQueryDarkPreference = '(prefers-color-scheme: dark)';
@@ -641,7 +643,7 @@ class DaffOsThemeService {
         this.preference$ = this.doc.defaultView?.matchMedia
             ? fromEventPattern(addHandlerFactory(this.doc.defaultView), removeHandlerFactory(this.doc.defaultView))
                 .pipe(startWith(this.doc.defaultView?.matchMedia(mediaQueryDarkPreference)), map((e) => e.matches), map((prefersDark) => prefersDark ? DaffTheme.Dark : DaffTheme.Light))
-            : of(DaffTheme.None);
+            : of(DaffTheme.System);
     }
     /**
      * Get the operating system's theme preference.
@@ -649,10 +651,10 @@ class DaffOsThemeService {
     getThemePreference() {
         return this.preference$;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOsThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOsThemeService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffOsThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffOsThemeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOsThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffOsThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -665,13 +667,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 const THEME_STORAGE_KEY = 'DAFF_THEME';
 const coerceValue = (val) => val === DaffTheme.Dark || val === DaffTheme.Light
     ? val
-    : DaffTheme.None;
+    : DaffTheme.System;
 /**
  * Generate a StorageEvent
  */
 const storageEventBuilder = (value) => ({
     key: THEME_STORAGE_KEY,
-    newValue: coerceValue(value) !== DaffTheme.None ? value : null,
+    newValue: coerceValue(value) !== DaffTheme.System ? value : null,
 });
 /**
  * A service for retrieving and managing the application's stored theme.
@@ -703,13 +705,13 @@ class DaffThemeStorageService {
         this.storage.setItem(THEME_STORAGE_KEY, theme);
     }
     removeThemeSetting() {
-        this.progressStorageEvent(DaffTheme.None);
+        this.progressStorageEvent(DaffTheme.System);
         this.storage.removeItem(THEME_STORAGE_KEY);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemeStorageService, deps: [{ token: DaffServerSafePersistenceServiceToken }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemeStorageService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffThemeStorageService, deps: [{ token: DaffServerSafePersistenceServiceToken }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffThemeStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemeStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffThemeStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -727,7 +729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  * It cascades from `storedPreference` to `osPreference` to `defaultTheme`.
  */
 const daffComputeThemeSetting = (osPreference, storedPreference, defaultTheme = DaffTheme.Dark) => {
-    if (storedPreference) {
+    if (storedPreference && storedPreference !== DaffTheme.System) {
         return storedPreference;
     }
     if (osPreference === 'dark') {
@@ -760,6 +762,13 @@ class DaffThemingService {
     getTheme() {
         return this.theme$;
     }
+    /**
+     * Get the user's stored theme preference. Emits `DaffTheme.System` when no
+     * preference is stored and the theme follows the operating system.
+     */
+    getThemePreference() {
+        return this.themeStorage.getThemeAsObservable();
+    }
     /**
      * Set the theme to dark mode.
      */
@@ -773,17 +782,15 @@ class DaffThemingService {
         this.themeStorage.setTheme(DaffTheme.Light);
     }
     /**
-     * Switch between themes.
+     * Follow the operating system's theme preference by clearing any stored theme.
      */
-    switchTheme() {
-        return this.theme === DaffTheme.Dark
-            ? this.lightMode()
-            : this.darkMode();
+    systemMode() {
+        this.themeStorage.removeThemeSetting();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemingService, deps: [{ token: DaffOsThemeService }, { token: DaffThemeStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemingService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffThemingService, deps: [{ token: DaffOsThemeService }, { token: DaffThemeStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffThemingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffThemingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -826,10 +833,10 @@ class DaffThemeClassSetterService {
         this.renderer.removeClass(this.doc.body, DAFF_THEME_LIGHT_CSS_CLASS);
         this.renderer.removeClass(this.doc.body, DAFF_THEME_DARK_CSS_CLASS);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemeClassSetterService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }, { token: DaffThemingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemeClassSetterService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffThemeClassSetterService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }, { token: DaffThemingService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffThemeClassSetterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffThemeClassSetterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffThemeClassSetterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -910,10 +917,10 @@ class DaffFocusStackService {
         this.document.activeElement.blur();
         return this.document.activeElement;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFocusStackService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFocusStackService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffFocusStackService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffFocusStackService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffFocusStackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffFocusStackService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -922,7 +929,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }] }] });
 
 /**
- * Interfaces that gives a component the ability to customize sizing for component specific UI.
+ * @deprecated Deprecated in version 0.92.1. Will be removed in version 1.0.0.
+ */
+/**
+ * @deprecated Deprecated in version 0.93.0. Will be removed in version 0.96.0.
+ *
+ * This enum will be removed from the public api in v1.0.0.
  */
 var DaffSizableEnum;
 (function (DaffSizableEnum) {
@@ -934,53 +946,7 @@ var DaffSizableEnum;
 })(DaffSizableEnum || (DaffSizableEnum = {}));
 
 /**
- * `DaffSizableDirective` allows for dynamic sizing of a component by setting
- * CSS classes based on the specified size.
- *
- * @example Implementing it as an attribute directive
- *
- * ```html
- * <div daffSizable [size]="small">Sized content</div>
- * ```
- * In this example, the `daff-small` class is applied to the `div` element, allowing you to
- * use the class to style the `div`.
- *
- * @example Implementing it as an Angular host directive
- *
- * ```ts
- * @Component({
- *  standalone: true,
- *  selector: 'custom-component',
- *  template: 'custom-component.html',
- *  hostDirectives: [
- *    {
- *      directive: DaffSizableDirective,
- *      inputs: ['size'],
- *    },
- *  ],
- * })
- * export class CustomComponent { }
- * ```
- *
- * ```scss
- * :host {
- *  &.daff-sm {
- *    width: 24px;
- *  }
- *
- *  &.daff-md {
- *    width: 32px;
- *  }
- * }
- * ```
- *
- * The directive applies the following CSS classes to the component based on the size:
- *
- * - `daff-xs`: Applied when the size is `xs`.
- * - `daff-sm`: Applied when the size is `sm`.
- * - `daff-md`: Applied when the size is `md`.
- * - `daff-lg`: Applied when the size is `lg`.
- * - `daff-xl`: Applied when the size is `xl`.
+ * `DaffSizableDirective` enforces consistent use of sizes across components.
  */
 class DaffSizableDirective {
     /**
@@ -999,10 +965,10 @@ class DaffSizableDirective {
             this.size = this.defaultSize;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffSizableDirective, isStandalone: true, selector: "[daffSizable]", inputs: { size: "size" }, host: { properties: { "class.daff-xs": "size === \"xs\"", "class.daff-sm": "size === \"sm\"", "class.daff-md": "size === \"md\"", "class.daff-lg": "size === \"lg\"", "class.daff-xl": "size === \"xl\"" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffSizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffSizableDirective, isStandalone: true, selector: "[daffSizable]", inputs: { size: "size" }, host: { properties: { "class.daff-xs": "size === \"xs\"", "class.daff-sm": "size === \"sm\"", "class.daff-md": "size === \"md\"", "class.daff-lg": "size === \"lg\"", "class.daff-xl": "size === \"xl\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffSizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSizable]',
@@ -1068,7 +1034,7 @@ const DaffOpenableStateError = '`open` cannot be set as an input property on the
 class DaffOpenableDirective {
     constructor() {
         /** Controls whether the component is open. */
-        this.open = false;
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         /** Whether or not a component should handle state
          *
          * @example Setting the `stateless` property on a component
@@ -1086,7 +1052,7 @@ class DaffOpenableDirective {
     }
     _setOpen(v) {
         if (!this.stateless) {
-            this.open = v;
+            this.open.set(v);
         }
     }
     /**
@@ -1107,7 +1073,7 @@ class DaffOpenableDirective {
      * Open or close the component, depending on if it's currently open or not
      */
     toggle() {
-        const state = !this.open;
+        const state = !this.open();
         this._setOpen(state);
         this.toggled.emit(state);
     }
@@ -1119,30 +1085,30 @@ class DaffOpenableDirective {
          * Throw an error if open is set in a component that is not stateless
          */
         if (changes.open.currentValue && !this.stateless) {
-            this.open = changes.open.previousValue;
+            this.open.set(changes.open.previousValue);
             if (isDevMode()) {
                 throw new Error(DaffOpenableStateError);
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOpenableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffOpenableDirective, isStandalone: true, selector: "[daffOpenable]", inputs: { open: "open" }, outputs: { toggled: "toggled" }, host: { properties: { "class.daff-open": "open" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffOpenableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: DaffOpenableDirective, isStandalone: true, selector: "[daffOpenable]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", toggled: "toggled" }, host: { properties: { "class.daff-open": "open()" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOpenableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffOpenableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffOpenable]',
                     host: {
-                        '[class.daff-open]': 'open',
+                        '[class.daff-open]': 'open()',
                     },
                 }]
-        }], propDecorators: { open: [{
-                type: Input
-            }], toggled: [{
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], toggled: [{
                 type: Output
             }] } });
 
 /**
+ * @deprecated Deprecated in version 0.93.0. Will be removed in version 0.96.0.
+ *
  * This enum will be removed from the public api in v1.0.0.
  */
 var DaffOrientationEnum;
@@ -1180,10 +1146,10 @@ class DaffOrientableDirective {
             this.orientation = this.defaultOrientation;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOrientableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffOrientableDirective, isStandalone: true, selector: "[daffOrientable]", inputs: { orientation: "orientation" }, host: { properties: { "class.daff-horizontal": "orientation === \"horizontal\"", "class.daff-vertical": "orientation === \"vertical\"" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffOrientableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffOrientableDirective, isStandalone: true, selector: "[daffOrientable]", inputs: { orientation: "orientation" }, host: { properties: { "class.daff-horizontal": "orientation === \"horizontal\"", "class.daff-vertical": "orientation === \"vertical\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffOrientableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffOrientableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffOrientable]',
@@ -1225,10 +1191,10 @@ class DaffSelectableDirective {
         this.cd.markForCheck();
         return this;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSelectableDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffSelectableDirective, isStandalone: true, selector: "[daffSelected]", inputs: { selected: "selected" }, outputs: { becameSelected: "becameSelected" }, host: { properties: { "class.daff-selected": "selected" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffSelectableDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffSelectableDirective, isStandalone: true, selector: "[daffSelected]", inputs: { selected: "selected" }, outputs: { becameSelected: "becameSelected" }, host: { properties: { "class.daff-selected": "selected" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffSelectableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffSelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSelected]',
@@ -1362,10 +1328,10 @@ class DaffStickyTrackerDirective {
             this.renderer.removeChild(this.sentinelElement.parentElement, this.sentinelElement);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffStickyTrackerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffStickyTrackerDirective, isStandalone: true, selector: "[daffStickyTracker]", inputs: { sticky: "sticky" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffStickyTrackerDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffStickyTrackerDirective, isStandalone: true, selector: "[daffStickyTracker]", inputs: { sticky: "sticky" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffStickyTrackerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffStickyTrackerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffStickyTracker]',
@@ -1387,10 +1353,10 @@ class DaffDisableableDirective {
          */
         this.disabled = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffDisableableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffDisableableDirective, isStandalone: true, selector: "[daffDisableable]", inputs: { disabled: "disabled" }, host: { properties: { "class.daff-disabled": "disabled" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffDisableableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffDisableableDirective, isStandalone: true, selector: "[daffDisableable]", inputs: { disabled: "disabled" }, host: { properties: { "class.daff-disabled": "disabled" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffDisableableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffDisableableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffDisableable]',
@@ -1452,10 +1418,10 @@ class DaffLoadableDirective {
     constructor() {
         this.loading = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffLoadableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: DaffLoadableDirective, isStandalone: true, selector: "[daffLoadable]", inputs: { loading: "loading" }, host: { properties: { "class.daff-loading": "loading" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffLoadableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DaffLoadableDirective, isStandalone: true, selector: "[daffLoadable]", inputs: { loading: "loading" }, host: { properties: { "class.daff-loading": "loading" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffLoadableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffLoadableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffLoadable]',
@@ -1471,7 +1437,7 @@ class DaffRovingTabIndexService {
     constructor(document) {
         this.document = document;
         this._hierarchy = [];
-        this._group = signal('', ...(ngDevMode ? [{ debugName: "_group" }] : []));
+        this._group = signal('', ...(ngDevMode ? [{ debugName: "_group" }] : /* istanbul ignore next */ []));
         this.group = this._group.asReadonly();
     }
     enter(group) {
@@ -1536,10 +1502,10 @@ class DaffRovingTabIndexService {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffRovingTabIndexService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffRovingTabIndexService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffRovingTabIndexService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1570,11 +1536,11 @@ class DaffRovingTabIndexBoundaryDirective {
          * The name of the group for which that this element will act as boundary.
          * Optional, will be autogenerated to a unique name if omitted.
          */
-        this.rtiBoundary = input(null, ...(ngDevMode ? [{ debugName: "rtiBoundary" }] : []));
+        this.rtiBoundary = input(null, ...(ngDevMode ? [{ debugName: "rtiBoundary" }] : /* istanbul ignore next */ []));
         /**
          * The name of the group defined by this boundary.
          */
-        this.effectiveBoundary = computed(() => this.rtiBoundary() || this._uniqueId, ...(ngDevMode ? [{ debugName: "effectiveBoundary" }] : []));
+        this.effectiveBoundary = computed(() => this.rtiBoundary() || this._uniqueId, ...(ngDevMode ? [{ debugName: "effectiveBoundary" }] : /* istanbul ignore next */ []));
         effect(() => {
             this.focusTrap.enabled = this.effectiveBoundary() === this.groupService.group();
         });
@@ -1587,10 +1553,10 @@ class DaffRovingTabIndexBoundaryDirective {
         evt.stopPropagation();
         this.groupService.enter(this.effectiveBoundary());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexBoundaryDirective, deps: [{ token: DaffRovingTabIndexService }, { token: i2.CdkTrapFocus }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: DaffRovingTabIndexBoundaryDirective, isStandalone: true, selector: "[rtiBoundary]", inputs: { rtiBoundary: { classPropertyName: "rtiBoundary", publicName: "rtiBoundary", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.space": "enterGroup($event)" }, properties: { "attr.data-rti-boundary": "effectiveBoundary()" } }, hostDirectives: [{ directive: i2.CdkTrapFocus }, { directive: i0.forwardRef(() => DaffRovingTabIndexDirective) }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffRovingTabIndexBoundaryDirective, deps: [{ token: DaffRovingTabIndexService }, { token: i2.CdkTrapFocus }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: DaffRovingTabIndexBoundaryDirective, isStandalone: true, selector: "[rtiBoundary]", inputs: { rtiBoundary: { classPropertyName: "rtiBoundary", publicName: "rtiBoundary", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.space": "enterGroup($event)" }, properties: { "attr.data-rti-boundary": "effectiveBoundary()" } }, hostDirectives: [{ directive: i2.CdkTrapFocus }, { directive: i0.forwardRef(() => DaffRovingTabIndexDirective) }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexBoundaryDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffRovingTabIndexBoundaryDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1619,18 +1585,18 @@ class DaffRovingTabIndexDirective {
          * By default it will be the nearest ancestor or the default root group if no boundary ancestor exists.
          * @see {@link DaffRovingTabIndexBoundaryDirective}.
          */
-        this.rti = input('', ...(ngDevMode ? [{ debugName: "rti" }] : []));
+        this.rti = input('', ...(ngDevMode ? [{ debugName: "rti" }] : /* istanbul ignore next */ []));
         /**
          * The group in which this RTI target resides.
          * See {@link DaffRovingTabIndexBoundaryDirective} to make an element act as the boundary of an RTI group.
          */
-        this.group = computed(() => this.rti() || this.parent?.effectiveBoundary() || '', ...(ngDevMode ? [{ debugName: "group" }] : []));
+        this.group = computed(() => this.rti() || this.parent?.effectiveBoundary() || '', ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
         /**
          * @docs-private
          */
         this.tabindex = computed(() => this.service.group() === this.group()
             ? 0
-            : -1, ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
+            : -1, ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
     }
     /**
      * @docs-private
@@ -1653,10 +1619,10 @@ class DaffRovingTabIndexDirective {
         evt.stopPropagation();
         this.service.previous();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexDirective, deps: [{ token: DaffRovingTabIndexService }, { token: DaffRovingTabIndexBoundaryDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.18", type: DaffRovingTabIndexDirective, isStandalone: true, selector: "[rti],a,button", inputs: { rti: { classPropertyName: "rti", publicName: "rti", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "leaveGroup($event)", "keydown.arrowup": "previous($event)", "keydown.arrowdown": "next($event)" }, properties: { "attr.tabindex": "tabindex()", "attr.data-rti": "group()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffRovingTabIndexDirective, deps: [{ token: DaffRovingTabIndexService }, { token: DaffRovingTabIndexBoundaryDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: DaffRovingTabIndexDirective, isStandalone: true, selector: "[rti],a,button", inputs: { rti: { classPropertyName: "rti", publicName: "rti", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "leaveGroup($event)", "keydown.arrowup": "previous($event)", "keydown.arrowdown": "next($event)" }, properties: { "attr.tabindex": "tabindex()", "attr.data-rti": "group()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DaffRovingTabIndexDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffRovingTabIndexDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector