@daffodil/design 0.83.0 → 0.85.0

package/fesm2022/daffodil-design.mjs

@@ -1,16 +1,10 @@
-import * as i2 from '@angular/common';
-import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, HostBinding, Input, ContentChild, ChangeDetectionStrategy, NgModule, Optional, Self, HostListener, EventEmitter, ElementRef, ViewChild, Output, Directive, ContentChildren, Injectable, InjectionToken, inject, PLATFORM_ID, Inject, makeEnvironmentProviders, provideAppInitializer, isDevMode } from '@angular/core';
-import * as i2$1 from '@fortawesome/angular-fontawesome';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { HostBinding, Directive, Input, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule, HostListener, Optional, Self, EventEmitter, ElementRef, Output, ViewChild, ContentChildren, Injectable, InjectionToken, inject, PLATFORM_ID, Inject, makeEnvironmentProviders, provideAppInitializer, isDevMode } from '@angular/core';
+import { BehaviorSubject, of, fromEventPattern, Subject, merge, fromEvent, EMPTY, combineLatest } from 'rxjs';
 import * as i1 from '@angular/forms';
-import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import { coerceNumberProperty } from '@angular/cdk/coercion';
-import { Subject, of, fromEventPattern, merge, fromEvent, EMPTY, combineLatest } from 'rxjs';
-import { takeUntil, startWith, map, catchError, filter, shareReplay } from 'rxjs/operators';
+import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { startWith, map, catchError, filter, shareReplay } from 'rxjs/operators';
 import { DaffServerSafePersistenceServiceToken } from '@daffodil/core';
 
 class DaffErrorStateMatcher {
@@ -19,6 +13,118 @@ class DaffErrorStateMatcher {
     }
 }
 
+/**
+ *
+ * Prefix can be used to place content before another piece of content in components like
+ * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ */
+class DaffPrefixDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffPrefixDirective, isStandalone: true, selector: "[daffPrefix]", host: { properties: { "class.daff-prefix": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffPrefix]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-prefix']
+            }] } });
+
+/**
+ *
+ * Prefix can be used to place content after another piece of content in components like
+ * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ */
+class DaffSuffixDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffSuffixDirective, isStandalone: true, selector: "[daffSuffix]", host: { properties: { "class.daff-suffix": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffSuffix]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-suffix']
+            }] } });
+
+/**
+ * `DaffSkeletonableDirective` allows a component to display a skeleton loading
+ * state by conditionally applying a CSS class. This is useful for indicating to
+ * users that content is loading or being processed. This directive can be used to
+ * apply a skeleton loading state to any component by toggling the `skeleton`
+ * input property. When `skeleton` is `true`, the `daff-skeleton` CSS class
+ * is applied, which should style the component to look like a loading placeholder.
+ *
+ * @example Implementing it as an attribute directive
+ *
+ * ```html
+ * <div daffSkeletonable [skeleton]="isLoading">Content</div>
+ * ```
+ *
+ * @example Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffSkeletonableDirective,
+ *      inputs: ['skeleton'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * :host {
+ *  .daff-skeleton {
+ *    @include state.skeleton-screen(48px, 24px);
+ *  }
+ * }
+ * ```
+ *
+ * The directive applies the `daff-skeleton` class to the component should be defined in your styles to display the loading
+ * state as desired. It can be used in conjuction with the `skeleton-screen` mixin, which provides predefined loading styles.
+ */
+class DaffSkeletonableDirective {
+    constructor() {
+        this.skeleton = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSkeletonableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffSkeletonableDirective, isStandalone: true, selector: "[daffSkeletonable]", inputs: { skeleton: "skeleton" }, host: { properties: { "class.daff-skeleton": "this.skeleton" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSkeletonableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffSkeletonable]',
+                    standalone: true,
+                }]
+        }], propDecorators: { skeleton: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.daff-skeleton']
+            }] } });
+
 /**
  *
  * The class that a form control must **implement** in order to be
@@ -31,33 +137,75 @@ class DaffErrorStateMatcher {
  * be used for the necessary dependency injection.
  */
 class DaffFormFieldControl {
+    get raised() {
+        return this.focused;
+    }
+    ;
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        this._stateChanges = new BehaviorSubject({
+            focused: false,
+            filled: false,
+            disabled: false,
+            error: false,
+            valid: true,
+        });
+    }
+    get state() {
+        return {
+            focused: this.focused,
+            filled: !!this.value,
+            disabled: this.ngControl?.disabled,
+            error: this.ngControl?.errors && (this.ngControl?.dirty || this.ngControl?.touched),
+            valid: !this.ngControl?.errors && (this.ngControl?.dirty || this.ngControl?.touched),
+        };
+    }
+    emitState() {
+        this._stateChanges.next(this.state);
+    }
 }
 ;
 
 const DaffFormFieldMissingControlMessage = 'A DaffFormFieldComponent must contain a DaffFormFieldControl';
 
-// ChangeDetection is ignored because this component needs to be refactored
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 class DaffFormFieldComponent {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.faChevronDown = faChevronDown;
+    /** @docs-private */
+    get isSelectField() {
+        return this._control.controlType === 'native-select';
+    }
+    /**
+     * @docs-private
+     */
+    get errorClass() {
+        return this.isError;
+    }
+    /**
+     * @docs-private
+     */
+    get disabledClass() {
+        return this.isDisabled;
+    }
+    /**
+     * @docs-private
+     */
+    get validClass() {
+        return this.isValid;
+    }
+    constructor(cd) {
+        this.cd = cd;
+        /** @docs-private */
         this.class = true;
-        /**
-         * The tracking property used to determine if the parent form has been submitted,
-         * and thus show an error message (even if the field hasn't been touched).
-         *
-         * @deprecated Deprecated in version 0.78.0. Will be removed in version 1.0.0.
-         */
-        // eslint-disable-next-line @typescript-eslint/no-inferrable-types
-        this.formSubmitted = false;
         /**
          * Tracking property to keep a record of whether or not the
          * form field should be marked as error.
          */
         this.isError = false;
+        /**
+         * Tracking property to keep a record of whether or not the
+         * form field contains any user input.
+         */
+        this.isFilled = false;
+        this.isDisabled = false;
         /**
          * Tracking property to keep a record of whether or not the
          * form field should be marked as valid.
@@ -65,30 +213,25 @@ class DaffFormFieldComponent {
         this.isValid = false;
     }
     /**
-     * @docs
-     *
      * Determines whether or not the form field should display its focused state.
      */
     get isFocused() {
         return this._control?.focused;
     }
     /**
-     * Keeps the state of the form field consistent with its child DaffFormControl
-     *
-     * TODO: consider whether or not this can be refactored to some kind of
-     * observable to remove unnecessary change detection.
-     *
      * @docs-private
      */
-    ngDoCheck() {
-        if (this._control?.ngControl) {
-            this.isError = this._control.ngControl.errors && (this._control.ngControl.touched);
-            this.isValid = !this._control.ngControl.errors && this._control.ngControl.touched;
-        }
+    get focusedClass() {
+        return this.isFocused;
     }
     /**
-     * Validate whether or not the FormField is in
-     * a "usable" state.
+     * @docs-private
+     */
+    get raisedClass() {
+        return this._control?.raised || this.isFilled;
+    }
+    /**
+     * Validate whether or not the FormField is in a "usable" state.
      */
     _validateFormControl() {
         if (!this._control) {
@@ -104,6 +247,13 @@ class DaffFormFieldComponent {
      */
     ngAfterContentInit() {
         this._validateFormControl();
+        this._control.stateChanges?.subscribe(({ focused, filled, disabled, error, valid }) => {
+            this.isFilled = filled;
+            this.isError = error;
+            this.isDisabled = disabled;
+            this.isValid = valid;
+            this.cd.markForCheck();
+        });
     }
     /**
      * Life cycle hook to verify that the form field has an acceptable
@@ -115,193 +265,239 @@ class DaffFormFieldComponent {
     ngAfterContentChecked() {
         this._validateFormControl();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffFormFieldComponent, isStandalone: false, selector: "daff-form-field", inputs: { formSubmitted: "formSubmitted" }, host: { properties: { "class.daff-form-field": "this.class" } }, queries: [{ propertyName: "_control", first: true, predicate: DaffFormFieldControl, descendants: true }], ngImport: i0, template: "<div class=\"daff-form-field__control\" [class.daff-error]=\"isError\" [class.daff-valid]=\"isValid\" [class.daff-focus]=\"isFocused\">\n  <ng-content></ng-content>\n  <div class=\"daff-form-field__icon\" *ngIf=\"_control.controlType === 'native-select'\">\n    <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n  </div>\n</div>\n<ng-content select=\"daff-error-message\"></ng-content>\n", styles: [".daff-form-field{display:block;position:relative}.daff-form-field__control{border-radius:3px;display:inline-block;font-size:1rem;height:inherit;line-height:1.5rem;padding:10px 15px;width:100%}.daff-form-field__icon{display:inline-block;pointer-events:none;position:absolute;right:15px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: DaffFormFieldComponent, isStandalone: true, selector: "daff-form-field", host: { properties: { "class.daff-form-field": "this.class", "class.daff-error": "this.errorClass", "class.daff-disabled": "this.disabledClass", "class.daff-valid": "this.validClass", "class.daff-focused": "this.focusedClass", "class.daff-raised": "this.raisedClass" } }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }, { propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true }, { propertyName: "_control", first: true, predicate: DaffFormFieldControl, descendants: true }], hostDirectives: [{ directive: DaffSkeletonableDirective, inputs: ["skeleton", "skeleton"] }], ngImport: i0, template: "<div class=\"daff-form-field__control\">\n\t@if (_prefix) {\n\t\t<ng-content select=\"[daffPrefix]\"></ng-content>\n\t}\n\t<div class=\"daff-form-field__form-wrapper\">\n\t\t<ng-content select=\"label[daffFormLabel]\"></ng-content>\n\t\t<ng-content></ng-content>\n\t\t@if (isSelectField) {\n\t\t\t<div class=\"daff-form-field__icon\"></div>\n\t\t}\n\t</div>\n  @if (_suffix) {\n\t\t<ng-content select=\"[daffSuffix]\"></ng-content>\n\t}\n</div>\n<ng-content select=\"daff-hint\"></ng-content>\n<ng-content select=\"daff-error-message\"></ng-content>", styles: [".daff-form-field{display:block;position:relative}.daff-form-field .daff-hint,.daff-form-field .daff-error-message{margin-top:.25rem}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;font-size:1rem;line-height:1rem;position:relative;width:100%}.daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field__control input,.daff-form-field__control textarea,.daff-form-field__control select{font-size:1rem;line-height:1.5rem;padding:1rem}.daff-form-field__control .daff-form-label{position:absolute;left:1rem;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s}.daff-form-field__control .daff-form-label+input,.daff-form-field__control .daff-form-label+textarea,.daff-form-field__control .daff-form-label+select{padding:1.5rem 1rem .5rem}.daff-form-field__control+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field.daff-raised .daff-form-label{transform:translateY(-75%) scale(.75)}.daff-form-field.daff-raised * ::-webkit-input-placeholder{opacity:1}.daff-form-field.daff-disabled{cursor:not-allowed;opacity:.5}.daff-form-field__icon{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-form-field__form-wrapper{flex-grow:1;position:relative}.daff-form-field .daff-prefix{padding-left:1rem}.daff-form-field .daff-suffix{padding-right:1rem}.daff-form-field.daff-skeleton{display:flex;position:relative}.daff-form-field.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:3.5rem;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}.daff-form-field.daff-skeleton>*{visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-form-field', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"daff-form-field__control\" [class.daff-error]=\"isError\" [class.daff-valid]=\"isValid\" [class.daff-focus]=\"isFocused\">\n  <ng-content></ng-content>\n  <div class=\"daff-form-field__icon\" *ngIf=\"_control.controlType === 'native-select'\">\n    <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n  </div>\n</div>\n<ng-content select=\"daff-error-message\"></ng-content>\n", styles: [".daff-form-field{display:block;position:relative}.daff-form-field__control{border-radius:3px;display:inline-block;font-size:1rem;height:inherit;line-height:1.5rem;padding:10px 15px;width:100%}.daff-form-field__icon{display:inline-block;pointer-events:none;position:absolute;right:15px}\n"] }]
-        }], propDecorators: { class: [{
+            args: [{ selector: 'daff-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: DaffSkeletonableDirective,
+                            inputs: ['skeleton'],
+                        },
+                    ], template: "<div class=\"daff-form-field__control\">\n\t@if (_prefix) {\n\t\t<ng-content select=\"[daffPrefix]\"></ng-content>\n\t}\n\t<div class=\"daff-form-field__form-wrapper\">\n\t\t<ng-content select=\"label[daffFormLabel]\"></ng-content>\n\t\t<ng-content></ng-content>\n\t\t@if (isSelectField) {\n\t\t\t<div class=\"daff-form-field__icon\"></div>\n\t\t}\n\t</div>\n  @if (_suffix) {\n\t\t<ng-content select=\"[daffSuffix]\"></ng-content>\n\t}\n</div>\n<ng-content select=\"daff-hint\"></ng-content>\n<ng-content select=\"daff-error-message\"></ng-content>", styles: [".daff-form-field{display:block;position:relative}.daff-form-field .daff-hint,.daff-form-field .daff-error-message{margin-top:.25rem}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;font-size:1rem;line-height:1rem;position:relative;width:100%}.daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field__control input,.daff-form-field__control textarea,.daff-form-field__control select{font-size:1rem;line-height:1.5rem;padding:1rem}.daff-form-field__control .daff-form-label{position:absolute;left:1rem;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s}.daff-form-field__control .daff-form-label+input,.daff-form-field__control .daff-form-label+textarea,.daff-form-field__control .daff-form-label+select{padding:1.5rem 1rem .5rem}.daff-form-field__control+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field.daff-raised .daff-form-label{transform:translateY(-75%) scale(.75)}.daff-form-field.daff-raised * ::-webkit-input-placeholder{opacity:1}.daff-form-field.daff-disabled{cursor:not-allowed;opacity:.5}.daff-form-field__icon{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-form-field__form-wrapper{flex-grow:1;position:relative}.daff-form-field .daff-prefix{padding-left:1rem}.daff-form-field .daff-suffix{padding-right:1rem}.daff-form-field.daff-skeleton{display:flex;position:relative}.daff-form-field.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:3.5rem;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}.daff-form-field.daff-skeleton>*{visibility:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-form-field']
-            }], formSubmitted: [{
-                type: Input
+            }], _prefix: [{
+                type: ContentChild,
+                args: [DaffPrefixDirective]
+            }], _suffix: [{
+                type: ContentChild,
+                args: [DaffSuffixDirective]
             }], _control: [{
                 type: ContentChild,
                 args: [DaffFormFieldControl]
+            }], errorClass: [{
+                type: HostBinding,
+                args: ['class.daff-error']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.daff-disabled']
+            }], validClass: [{
+                type: HostBinding,
+                args: ['class.daff-valid']
+            }], focusedClass: [{
+                type: HostBinding,
+                args: ['class.daff-focused']
+            }], raisedClass: [{
+                type: HostBinding,
+                args: ['class.daff-raised']
             }] } });
 
 class DaffErrorMessageComponent {
     constructor() {
+        /**
+         * @docs-private
+         */
         this.class = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffErrorMessageComponent, isStandalone: false, selector: "daff-error-message", host: { properties: { "class.daff-error-message": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;font-size:.875rem;margin-top:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffErrorMessageComponent, isStandalone: true, selector: "daff-error-message", host: { properties: { "class.daff-error-message": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;font-size:.875rem;line-height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffErrorMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffErrorMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-error-message', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{display:block;font-size:.875rem;margin-top:5px}\n"] }]
+            args: [{ selector: 'daff-error-message', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;font-size:.875rem;line-height:1rem}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-error-message']
             }] } });
 
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
+ */
 class DaffErrorMessageModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffErrorMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffErrorMessageModule, declarations: [DaffErrorMessageComponent], exports: [DaffErrorMessageComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffErrorMessageModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffErrorMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: DaffErrorMessageModule, imports: [DaffErrorMessageComponent], exports: [DaffErrorMessageComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffErrorMessageModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffErrorMessageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffErrorMessageModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
                         DaffErrorMessageComponent,
                     ],
-                    declarations: [
+                    imports: [
                         DaffErrorMessageComponent,
                     ],
                 }]
         }] });
 
-class DaffFormFieldModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffFormFieldModule, declarations: [DaffFormFieldComponent], imports: [CommonModule,
-            FontAwesomeModule,
-            DaffErrorMessageModule], exports: [DaffFormFieldComponent,
-            DaffErrorMessageModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormFieldModule, imports: [CommonModule,
-            FontAwesomeModule,
-            DaffErrorMessageModule, DaffErrorMessageModule] }); }
+class DaffFormLabelDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffFormLabelDirective, isStandalone: true, selector: "[daffFormLabel]", host: { properties: { "class.daff-form-label": "this.class" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffFormLabel]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-form-label']
+            }] } });
+
+/**
+ * @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: "19.2.11", ngImport: i0, type: DaffFormLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: DaffFormLabelModule, imports: [DaffFormLabelDirective], exports: [DaffFormLabelDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormLabelModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormLabelModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        FontAwesomeModule,
-                        DaffErrorMessageModule,
-                    ],
                     exports: [
-                        DaffFormFieldComponent,
-                        DaffErrorMessageModule,
+                        DaffFormLabelDirective,
                     ],
-                    declarations: [
-                        DaffFormFieldComponent,
+                    imports: [
+                        DaffFormLabelDirective,
                     ],
                 }]
         }] });
 
 /**
- * DaffInputComponent provides the same functionality as a native `<input>` and contains custom styling and functionality.
+ * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
  */
-class DaffInputComponent {
-    /**
-     * @docs-private
-     */
-    focus() {
-        this.focused = true;
-    }
-    /**
-     * @docs-private
-     */
-    blur() {
-        this.focused = false;
-    }
-    constructor(
-    /**
-     * @docs-private
-     */
-    ngControl, _elementRef) {
-        this.ngControl = ngControl;
-        this._elementRef = _elementRef;
-        this.focused = false;
-    }
-    onFocus() {
-        this._elementRef.nativeElement.focus();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffInputComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffInputComponent, isStandalone: false, selector: "input[daff-input]", inputs: { formSubmitted: "formSubmitted" }, host: { listeners: { "focus": "focus()", "blur": "blur()" } }, providers: [
-            // eslint-disable-next-line @typescript-eslint/no-use-before-define
-            { provide: DaffFormFieldControl, useExisting: DaffInputComponent },
-        ], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{border:none;border-radius:4px;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;padding:0;width:100%;box-sizing:border-box}:host:focus{border:none;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'input[daff-input]', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                        { provide: DaffFormFieldControl, useExisting: DaffInputComponent },
-                    ], standalone: false, styles: [":host{border:none;border-radius:4px;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;padding:0;width:100%;box-sizing:border-box}:host:focus{border:none;box-shadow:none;outline:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i0.ElementRef }], propDecorators: { formSubmitted: [{
-                type: Input
-            }], focus: [{
-                type: HostListener,
-                args: ['focus']
-            }], blur: [{
-                type: HostListener,
-                args: ['blur']
-            }] } });
-
-class DaffInputModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffInputModule, declarations: [DaffInputComponent], imports: [CommonModule], exports: [DaffInputComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffInputModule, imports: [CommonModule] }); }
+class DaffFormFieldModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldModule, imports: [DaffFormFieldComponent,
+            DaffErrorMessageModule,
+            DaffFormLabelModule], exports: [DaffFormFieldComponent,
+            DaffErrorMessageModule,
+            DaffFormLabelModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldModule, imports: [DaffErrorMessageModule,
+            DaffFormLabelModule, DaffErrorMessageModule,
+            DaffFormLabelModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
+                        DaffFormFieldComponent,
+                        DaffErrorMessageModule,
+                        DaffFormLabelModule,
                     ],
                     exports: [
-                        DaffInputComponent,
-                    ],
-                    declarations: [
-                        DaffInputComponent,
+                        DaffFormFieldComponent,
+                        DaffErrorMessageModule,
+                        DaffFormLabelModule,
                     ],
                 }]
         }] });
 
-class DaffNativeSelectComponent {
+class DaffHintComponent {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+        /**
+         * Whether or not the hint has been validated
+         * */
+        this.validated = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffHintComponent, isStandalone: true, selector: "daff-hint", inputs: { validated: "validated" }, host: { properties: { "class.daff-hint": "this.class", "class.validated": "this.validated" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;gap:.25rem;font-size:.875rem;line-height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffHintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-hint', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:flex;gap:.25rem;font-size:.875rem;line-height:1rem}\n"] }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-hint']
+            }], validated: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.validated']
+            }] } });
+
+/**
+ * @docs-private
+ */
+const DAFF_FORM_FIELD_COMPONENTS = [
+    DaffFormFieldComponent,
+    DaffErrorMessageComponent,
+    DaffFormLabelDirective,
+    DaffHintComponent,
+    DaffPrefixDirective,
+    DaffSuffixDirective,
+];
+
+class DaffNativeSelectComponent extends DaffFormFieldControl {
     /**
      * @docs-private
      */
     focus() {
         this.focused = true;
+        this.emitState();
     }
     /**
      * @docs-private
      */
     blur() {
         this.focused = false;
+        this.emitState();
     }
     constructor(
     /**
      * @docs-private
      */
     ngControl, _elementRef) {
+        super(ngControl);
         this.ngControl = ngControl;
         this._elementRef = _elementRef;
         /**
          * @docs-private
          */
         this.controlType = 'native-select';
+        /**
+         * @docs-private
+         */
         this.class = true;
         this.focused = false;
     }
     onFocus() {
         this._elementRef.nativeElement.focus();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffNativeSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffNativeSelectComponent, isStandalone: false, selector: "select[daff-native-select]", inputs: { formSubmitted: "formSubmitted" }, host: { listeners: { "focus": "focus()", "blur": "blur()" }, properties: { "class.daff-native-select": "this.class" } }, providers: [
+    get value() {
+        return this._elementRef.nativeElement.value;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNativeSelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffNativeSelectComponent, isStandalone: false, selector: "select[daff-native-select]", inputs: { formSubmitted: "formSubmitted" }, host: { listeners: { "focus": "focus()", "blur": "blur()" }, properties: { "class.daff-native-select": "this.class" } }, providers: [
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
             { provide: DaffFormFieldControl, useExisting: DaffNativeSelectComponent },
-        ], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".daff-native-select{appearance:none;background:transparent;background-clip:padding-box;border:0;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;min-width:45px;width:100%}.daff-native-select:focus{border:0;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".daff-native-select{appearance:none;background:transparent;background-clip:padding-box;border:0;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;min-width:45px;width:100%}.daff-native-select:focus{border:0;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffNativeSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNativeSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'select[daff-native-select]', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -325,11 +521,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             }] } });
 
 class DaffNativeSelectModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffNativeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffNativeSelectModule, declarations: [DaffNativeSelectComponent], imports: [CommonModule], exports: [DaffNativeSelectComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffNativeSelectModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNativeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: DaffNativeSelectModule, declarations: [DaffNativeSelectComponent], imports: [CommonModule], exports: [DaffNativeSelectComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNativeSelectModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffNativeSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffNativeSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -446,10 +642,10 @@ class DaffCheckboxComponent {
         this.checked = false;
         this._cdRef.markForCheck();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffCheckboxComponent, isStandalone: false, selector: "daff-checkbox", inputs: { name: "name", value: "value", checked: "checked", id: "id", label: ["aria-label", "label"], labeledBy: ["aria-labelledby", "labeledBy"] }, outputs: { becameChecked: "becameChecked", becameUnchecked: "becameUnchecked" }, host: { properties: { "attr.role": "this.role", "class.focused": "this.focusClass", "class.disabled": "this.disabledClass" } }, viewQueries: [{ propertyName: "nativeCheckbox", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<input #inputElement\ntype=\"checkbox\"\n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labeledBy\"\n[attr.checked]=\"checked ? '' : null\"\n[attr.id] = \"id\"\n[attr.value]=\"value\"\n[attr.name]=\"name\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"_onChange($event)\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"\n/>\n<label [attr.for]=\"id\"><ng-content></ng-content></label>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffCheckboxComponent, isStandalone: false, selector: "daff-checkbox", inputs: { name: "name", value: "value", checked: "checked", id: "id", label: ["aria-label", "label"], labeledBy: ["aria-labelledby", "labeledBy"] }, outputs: { becameChecked: "becameChecked", becameUnchecked: "becameUnchecked" }, host: { properties: { "attr.role": "this.role", "class.focused": "this.focusClass", "class.disabled": "this.disabledClass" } }, viewQueries: [{ propertyName: "nativeCheckbox", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<input #inputElement\ntype=\"checkbox\"\n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labeledBy\"\n[attr.checked]=\"checked ? '' : null\"\n[attr.id] = \"id\"\n[attr.value]=\"value\"\n[attr.name]=\"name\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"_onChange($event)\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"\n/>\n<label [attr.for]=\"id\"><ng-content></ng-content></label>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<input #inputElement\ntype=\"checkbox\"\n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labeledBy\"\n[attr.checked]=\"checked ? '' : null\"\n[attr.id] = \"id\"\n[attr.value]=\"value\"\n[attr.name]=\"name\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"_onChange($event)\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"\n/>\n<label [attr.for]=\"id\"><ng-content></ng-content></label>" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { nativeCheckbox: [{
@@ -498,6 +694,9 @@ class DaffCheckboxControlValueAccessorDirective {
     /**
      * A lifecycle method called when the directive is initialized.
      */
+    /**
+     * @docs-private
+     */
     ngOnInit() {
         // See the note about `writeValue` usage.
         this.writeValue(this._control.value);
@@ -523,447 +722,119 @@ class DaffCheckboxControlValueAccessorDirective {
     }
     /**
      * Registers the change handler
-     */
-    registerOnChange(fn) {
-        this._onChange = (val) => {
-            fn(val);
-        };
-    }
-    /**
-     * Registers the touched handler
-     */
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    /**
-     * Sets the disabled state.
-     */
-    setDisabledState(isDisabled) {
-        this._checkbox.disabled = isDisabled;
-    }
-    /**
-     * calls the child checkbox's select function
-     */
-    fireSelect() {
-        this._checkbox.select();
-    }
-    /**
-     * calls the child checkbox's deselect function
-     */
-    fireDeselect() {
-        this._checkbox.deselect();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffCheckboxControlValueAccessorDirective, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DaffCheckboxComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffCheckboxControlValueAccessorDirective, isStandalone: false, selector: "daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]", inputs: { value: "value", name: "name" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffCheckboxControlValueAccessorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]',
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: DaffCheckboxComponent }], propDecorators: { value: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }] } });
-
-class DaffCheckboxSetComponent {
-    constructor() {
-        /**
-         * The role of the component. Set to "checkbox".
-         *
-         * @docs-private
-         */
-        this.role = 'group';
-        this.valueList = new EventEmitter();
-    }
-    getValues() {
-        const checkboxes = this.checkboxes.toArray();
-        return this.formArray.value.map((element, index) => element === true ? checkboxes[index].value : false).filter(element => element !== false);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffCheckboxSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffCheckboxSetComponent, isStandalone: false, selector: "daff-checkbox-set", inputs: { formArray: "formArray", name: "name" }, outputs: { valueList: "valueList" }, host: { properties: { "attr.role": "this.role" } }, queries: [{ propertyName: "checkboxes", predicate: DaffCheckboxComponent }], ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffCheckboxSetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-checkbox-set', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>" }]
-        }], propDecorators: { formArray: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], checkboxes: [{
-                type: ContentChildren,
-                args: [DaffCheckboxComponent]
-            }], valueList: [{
-                type: Output
-            }] } });
-
-class DaffCheckboxModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffCheckboxModule, declarations: [DaffCheckboxComponent,
-            DaffCheckboxSetComponent,
-            DaffCheckboxControlValueAccessorDirective], imports: [CommonModule], exports: [DaffCheckboxComponent,
-            DaffCheckboxSetComponent,
-            DaffCheckboxControlValueAccessorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffCheckboxModule, providers: [
-            DaffCheckboxSetComponent,
-        ], imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffCheckboxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        DaffCheckboxComponent,
-                        DaffCheckboxSetComponent,
-                        DaffCheckboxControlValueAccessorDirective,
-                    ],
-                    declarations: [
-                        DaffCheckboxComponent,
-                        DaffCheckboxSetComponent,
-                        DaffCheckboxControlValueAccessorDirective,
-                    ],
-                    imports: [
-                        CommonModule,
-                    ],
-                    providers: [
-                        DaffCheckboxSetComponent,
-                    ],
-                }]
-        }] });
-
-class DaffQuantityInputComponent {
-    get focused() {
-        return this.input?.focused;
-    }
-    get value() {
-        return this.ngControl.control.value;
-    }
-    set value(value) {
-        const val = Math.min(Math.round(coerceNumberProperty(value)), this.max);
-        this.ngControl.control.patchValue(val);
-        this._inputControl.patchValue(val);
-        this.changeDetectorRef.markForCheck();
-    }
-    get disabled() {
-        return this.ngControl.control.disabled;
-    }
-    constructor(ngControl, changeDetectorRef) {
-        this.ngControl = ngControl;
-        this.changeDetectorRef = changeDetectorRef;
-        /**
-         * @docs
-         * The minimum number for the quantity input field
-         */
-        this.min = 1;
-        /**
-         * @docs
-         * The maximum number for the quantity input field
-         */
-        this.max = 10;
-        /**
-         * A new control for the nested native input.
-         * We don't bind the native input directly to the inherited form control
-         * to avoid triggering updates on the input event.
-         * Instead, we listen for the change event and manually patch form control values.
-         */
-        this._inputControl = new UntypedFormControl();
-        this._destroyed = new Subject();
-    }
-    ngOnInit() {
-        this._inputControl.patchValue(this.ngControl.control.value);
-        this.setInputDisabled();
-        this.ngControl.statusChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
-            this.setInputDisabled();
-        });
-    }
-    ngOnDestroy() {
-        this._destroyed.next(true);
-    }
-    focus() {
-        this.input.focus();
-    }
-    onFocus() {
-        this.ngControl.control.markAsTouched();
-    }
-    onBlur() {
-        if (this.value === null || this.value === undefined) {
-            this.value = 1;
-            this.changeDetectorRef.markForCheck();
-        }
-    }
-    /**
-     * Callback function fired when the value changes.
-     * Used to pass the value back up to the ngControl.
-     */
-    onValueChange(e) {
-        this.value = e.target.value;
-    }
-    setInputDisabled() {
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this.ngControl.disabled
-            ? this._inputControl.disable()
-            : this._inputControl.enable();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantityInputComponent, deps: [{ token: i1.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffQuantityInputComponent, isStandalone: false, selector: "daff-quantity-input", inputs: { min: "min", max: "max" }, viewQueries: [{ propertyName: "input", first: true, predicate: DaffInputComponent, descendants: true }], ngImport: i0, template: "<input daff-input\n  type=\"number\"\n  [attr.max]=\"max\"\n  [attr.min]=\"min\"\n  [attr.step]=\"1\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  (change)=\"onValueChange($event)\"\n  [formControl]=\"_inputControl\"\n>\n", dependencies: [{ kind: "component", type: DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantityInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-quantity-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<input daff-input\n  type=\"number\"\n  [attr.max]=\"max\"\n  [attr.min]=\"min\"\n  [attr.step]=\"1\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  (change)=\"onValueChange($event)\"\n  [formControl]=\"_inputControl\"\n>\n" }]
-        }], ctorParameters: () => [{ type: i1.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
-                type: ViewChild,
-                args: [DaffInputComponent]
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }] } });
-
-/**
- * Create an array of numbers from min to max, not including max.
- */
-const makeValueArray = (min, max, increment) => Array(max - min).fill(0).map((x, i) => (i * increment) + min);
-class DaffQuantitySelectComponent {
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        this._value = value;
-        this.ngControl.control.patchValue(this._value);
-        this.changeDetectorRef.markForCheck();
-    }
-    constructor(ngControl, changeDetectorRef) {
-        this.ngControl = ngControl;
-        this.changeDetectorRef = changeDetectorRef;
-        /**
-         * @docs
-         * The minimum number selectable.
-         */
-        this.min = 1;
-        /**
-         * @docs
-         * The maximum number selectable;
-         */
-        this.max = 10;
-        /**
-         * @docs
-         * Property used to determine whether or not the DaffQuantitySelectComponent is
-         * used in a situation whether the `max` isn't a true max.
-         */
-        this.extendable = true;
-        /**
-         * The amount to increment between "min" and "max".
-         */
-        this.increment = 1;
-        this._value = 1;
-    }
-    /**
-     * Callback function fired when the value changes.
-     * Used to pass the value back up to the ngControl.
-     */
-    onValueChange(e) {
-        this.value = e.target.value;
-    }
-    get focused() {
-        return this.select.focused;
-    }
-    focus() {
-        this.select.focus();
-    }
-    onFocus() {
-        this.ngControl.control.markAsTouched();
-    }
-    /**
-     * A helper function for easily making options for the `select`.
-     */
-    get valueArray() {
-        return makeValueArray(this.min, this.max, this.increment);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantitySelectComponent, deps: [{ token: i1.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffQuantitySelectComponent, isStandalone: false, selector: "daff-quantity-select", inputs: { min: "min", max: "max", extendable: "extendable" }, viewQueries: [{ propertyName: "select", first: true, predicate: DaffNativeSelectComponent, descendants: true }], ngImport: i0, template: "<select daff-native-select\n  [formControl]=\"ngControl.control\"\n  (focus)=\"onFocus()\"\n>\n  <option *ngFor=\"let item of valueArray\" [value]=\"item\">{{ item }}</option>\n  <option [value]=\"max\" *ngIf=\"extendable\">{{ max }}+</option>\n  <option [value]=\"max\" *ngIf=\"!extendable\">{{ max }}</option>\n</select>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DaffNativeSelectComponent, selector: "select[daff-native-select]", inputs: ["formSubmitted"] }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantitySelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-quantity-select', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<select daff-native-select\n  [formControl]=\"ngControl.control\"\n  (focus)=\"onFocus()\"\n>\n  <option *ngFor=\"let item of valueArray\" [value]=\"item\">{{ item }}</option>\n  <option [value]=\"max\" *ngIf=\"extendable\">{{ max }}+</option>\n  <option [value]=\"max\" *ngIf=\"!extendable\">{{ max }}</option>\n</select>\n" }]
-        }], ctorParameters: () => [{ type: i1.NgControl }, { type: i0.ChangeDetectorRef }], propDecorators: { select: [{
-                type: ViewChild,
-                args: [DaffNativeSelectComponent]
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], extendable: [{
-                type: Input
-            }] } });
-
-class DaffQuantityFieldComponent {
-    get focused() {
-        return !!(this.input?.focused || this.select?.focused);
-    }
-    get quantity() {
-        return this._quantity;
-    }
-    set quantity(value) {
-        this._quantity = coerceNumberProperty(value, 1);
-    }
-    /**
-     * Returns the lesser of max and selectMax.
-     */
-    get _maxFloor() {
-        return Math.min(this.max, this.selectMax);
-    }
-    get controlType() {
-        // TODO: use enum
-        return this.showInputField
-            ? 'native-input'
-            : 'native-select';
-    }
-    get showInputField() {
-        const ret = this._inputHasBeenShown || (this.ngControl
-            ? this.ngControl.value >= this.selectMax
-            : this.quantity >= this.selectMax);
-        if (ret) {
-            this._inputHasBeenShown = true;
-        }
-        return ret;
-    }
-    get showSelectField() {
-        return !this.showInputField;
-    }
-    constructor(ngControl, cd) {
-        this.ngControl = ngControl;
-        this.cd = cd;
-        /**
-         * @docs
-         * The minimum valid value of the quantity field.
-         * Must be greater than or equal to 1.
-         */
-        this.min = 1;
-        /**
-         * @docs
-         * The maximum valid value of the quantity field.
-         * Must be greater than min.
-         */
-        this.max = 500;
-        /**
-         * @docs
-         * The range of numbers acceptable in a quantity dropdown
-         * before it becomes an input element.
-         */
-        this.selectMax = 10;
-        this.id = '';
-        this.disabled = false;
-        this._quantity = 1;
-        this._inputHasBeenShown = false;
-        if (this.ngControl != null) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
-    onChange(quantity) { }
-    ;
-    onTouched(quantity) { }
-    ;
-    writeValue(quantity) {
-        this.quantity = quantity;
-        this.cd.markForCheck();
-    }
+     */
     registerOnChange(fn) {
-        this.onChange = fn;
+        this._onChange = (val) => {
+            fn(val);
+        };
     }
+    /**
+     * Registers the touched handler
+     */
     registerOnTouched(fn) {
-        this.onTouched = fn;
+        this._onTouched = fn;
     }
+    /**
+     * Sets the disabled state.
+     */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this._checkbox.disabled = isDisabled;
     }
-    focus() {
-        if (this.select) {
-            this.select.focus();
-        }
-        if (this.input) {
-            this.input.focus();
-        }
+    /**
+     * calls the child checkbox's select function
+     */
+    fireSelect() {
+        this._checkbox.select();
+    }
+    /**
+     * calls the child checkbox's deselect function
+     */
+    fireDeselect() {
+        this._checkbox.deselect();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantityFieldComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffQuantityFieldComponent, isStandalone: false, selector: "daff-quantity-field", inputs: { min: "min", max: "max", selectMax: "selectMax", id: "id" }, providers: [
-            {
-                provide: DaffFormFieldControl,
-                // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                useExisting: DaffQuantityFieldComponent,
-            },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: DaffQuantityInputComponent, descendants: true }, { propertyName: "select", first: true, predicate: DaffQuantitySelectComponent, descendants: true }], ngImport: i0, template: "<daff-quantity-select\n  *ngIf=\"showSelectField\"\n  [min]=\"min\"\n  [max]=\"_maxFloor\"\n  [extendable]=\"max > selectMax\"\n  [id]=\"id\">\n</daff-quantity-select>\n<daff-quantity-input\n  *ngIf=\"showInputField\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [id]=\"id\">\n</daff-quantity-input>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DaffQuantityInputComponent, selector: "daff-quantity-input", inputs: ["min", "max"] }, { kind: "component", type: DaffQuantitySelectComponent, selector: "daff-quantity-select", inputs: ["min", "max", "extendable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCheckboxControlValueAccessorDirective, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DaffCheckboxComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffCheckboxControlValueAccessorDirective, isStandalone: false, selector: "daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]", inputs: { value: "value", name: "name" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantityFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-quantity-field', providers: [
-                        {
-                            provide: DaffFormFieldControl,
-                            // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                            useExisting: DaffQuantityFieldComponent,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<daff-quantity-select\n  *ngIf=\"showSelectField\"\n  [min]=\"min\"\n  [max]=\"_maxFloor\"\n  [extendable]=\"max > selectMax\"\n  [id]=\"id\">\n</daff-quantity-select>\n<daff-quantity-input\n  *ngIf=\"showInputField\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [id]=\"id\">\n</daff-quantity-input>\n" }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCheckboxControlValueAccessorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]',
+                    standalone: false,
+                }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
-                type: ViewChild,
-                args: [DaffQuantityInputComponent]
-            }], select: [{
-                type: ViewChild,
-                args: [DaffQuantitySelectComponent]
-            }], min: [{
+                }] }, { type: DaffCheckboxComponent }], propDecorators: { value: [{
                 type: Input
-            }], max: [{
+            }], name: [{
                 type: Input
-            }], selectMax: [{
+            }] } });
+
+class DaffCheckboxSetComponent {
+    constructor() {
+        /**
+         * The role of the component. Set to "checkbox".
+         *
+         * @docs-private
+         */
+        this.role = 'group';
+        this.valueList = new EventEmitter();
+    }
+    getValues() {
+        const checkboxes = this.checkboxes.toArray();
+        return this.formArray.value.map((element, index) => element === true ? checkboxes[index].value : false).filter(element => element !== false);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCheckboxSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffCheckboxSetComponent, isStandalone: false, selector: "daff-checkbox-set", inputs: { formArray: "formArray", name: "name" }, outputs: { valueList: "valueList" }, host: { properties: { "attr.role": "this.role" } }, queries: [{ propertyName: "checkboxes", predicate: DaffCheckboxComponent }], ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCheckboxSetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'daff-checkbox-set', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>" }]
+        }], propDecorators: { formArray: [{
                 type: Input
-            }], id: [{
+            }], name: [{
                 type: Input
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], checkboxes: [{
+                type: ContentChildren,
+                args: [DaffCheckboxComponent]
+            }], valueList: [{
+                type: Output
             }] } });
 
-class DaffQuantityFieldModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantityFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantityFieldModule, declarations: [DaffQuantityFieldComponent,
-            DaffQuantityInputComponent,
-            DaffQuantitySelectComponent], imports: [CommonModule,
-            DaffNativeSelectModule,
-            DaffInputModule,
-            ReactiveFormsModule], exports: [DaffQuantityFieldComponent,
-            DaffQuantityInputComponent,
-            DaffQuantitySelectComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantityFieldModule, imports: [CommonModule,
-            DaffNativeSelectModule,
-            DaffInputModule,
-            ReactiveFormsModule] }); }
+class DaffCheckboxModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: DaffCheckboxModule, declarations: [DaffCheckboxComponent,
+            DaffCheckboxSetComponent,
+            DaffCheckboxControlValueAccessorDirective], imports: [CommonModule], exports: [DaffCheckboxComponent,
+            DaffCheckboxSetComponent,
+            DaffCheckboxControlValueAccessorDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCheckboxModule, providers: [
+            DaffCheckboxSetComponent,
+        ], imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantityFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
+                    exports: [
+                        DaffCheckboxComponent,
+                        DaffCheckboxSetComponent,
+                        DaffCheckboxControlValueAccessorDirective,
+                    ],
                     declarations: [
-                        DaffQuantityFieldComponent,
-                        DaffQuantityInputComponent,
-                        DaffQuantitySelectComponent,
+                        DaffCheckboxComponent,
+                        DaffCheckboxSetComponent,
+                        DaffCheckboxControlValueAccessorDirective,
                     ],
                     imports: [
                         CommonModule,
-                        DaffNativeSelectModule,
-                        DaffInputModule,
-                        ReactiveFormsModule,
                     ],
-                    exports: [
-                        DaffQuantityFieldComponent,
-                        DaffQuantityInputComponent,
-                        DaffQuantitySelectComponent,
+                    providers: [
+                        DaffCheckboxSetComponent,
                     ],
                 }]
         }] });
@@ -975,10 +846,10 @@ class DaffRadioSetComponent {
          */
         this.role = 'radiogroup';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffRadioSetComponent, isStandalone: false, selector: "daff-radio-set", inputs: { name: "name" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffRadioSetComponent, isStandalone: false, selector: "daff-radio-set", inputs: { name: "name" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioSetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioSetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-radio-set', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>" }]
         }], ctorParameters: () => [], propDecorators: { name: [{
@@ -1081,10 +952,10 @@ class DaffRadioComponent {
         this.select();
     }
     ;
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioComponent, deps: [{ token: DaffRadioSetComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffRadioComponent, isStandalone: false, selector: "daff-radio", inputs: { checked: "checked", value: "value", id: "id", name: "name", label: ["aria-label", "label"], labelledby: ["aria-labelledby", "labelledby"] }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "attr.role": "this.role", "class.focused": "this.focusClass", "class.disabled": "this.disabledClass" } }, ngImport: i0, template: "<input type=\"radio\" \n[attr.checked]=\"checked ? '' : null\" \n[attr.id]=\"id\" \n[attr.name]=\"name\" \n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labelledby\"\n[attr.value]=\"value\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"onChange()\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"/>\n<label [attr.for]=\"id\">\n  <ng-content></ng-content>\n</label>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioComponent, deps: [{ token: DaffRadioSetComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffRadioComponent, isStandalone: false, selector: "daff-radio", inputs: { checked: "checked", value: "value", id: "id", name: "name", label: ["aria-label", "label"], labelledby: ["aria-labelledby", "labelledby"] }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "attr.role": "this.role", "class.focused": "this.focusClass", "class.disabled": "this.disabledClass" } }, ngImport: i0, template: "<input type=\"radio\" \n[attr.checked]=\"checked ? '' : null\" \n[attr.id]=\"id\" \n[attr.name]=\"name\" \n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labelledby\"\n[attr.value]=\"value\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"onChange()\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"/>\n<label [attr.for]=\"id\">\n  <ng-content></ng-content>\n</label>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'daff-radio', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<input type=\"radio\" \n[attr.checked]=\"checked ? '' : null\" \n[attr.id]=\"id\" \n[attr.name]=\"name\" \n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labelledby\"\n[attr.value]=\"value\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"onChange()\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"/>\n<label [attr.for]=\"id\">\n  <ng-content></ng-content>\n</label>" }]
         }], ctorParameters: () => [{ type: DaffRadioSetComponent, decorators: [{
@@ -1160,10 +1031,10 @@ class DaffRadioRegistry {
         return controlPair['control'].control.parent === accessor._control.control.parent
             && controlPair['accessor'].name === accessor.name;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioRegistry, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioRegistry, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioRegistry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioRegistry, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1180,6 +1051,9 @@ class DaffRadioControlValueAccessorDirective {
             this._control.valueAccessor = this;
         }
     }
+    /**
+     * @docs-private
+     */
     ngOnInit() {
         this.writeValue(this._control.value);
         this._registry.add(this._control, this);
@@ -1230,10 +1104,10 @@ class DaffRadioControlValueAccessorDirective {
     fireDeselect() {
         this._radio.deselect();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioControlValueAccessorDirective, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DaffRadioRegistry }, { token: DaffRadioComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffRadioControlValueAccessorDirective, isStandalone: false, selector: "daff-radio[ngModel], daff-radio[formControl], daff-radio[formControlName]", inputs: { value: "value", name: "name" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioControlValueAccessorDirective, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DaffRadioRegistry }, { token: DaffRadioComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffRadioControlValueAccessorDirective, isStandalone: false, selector: "daff-radio[ngModel], daff-radio[formControl], daff-radio[formControlName]", inputs: { value: "value", name: "name" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioControlValueAccessorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioControlValueAccessorDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1251,15 +1125,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             }] } });
 
 class DaffRadioModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioModule, declarations: [DaffRadioControlValueAccessorDirective,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioModule, declarations: [DaffRadioControlValueAccessorDirective,
             DaffRadioComponent,
             DaffRadioSetComponent], imports: [CommonModule], exports: [DaffRadioComponent,
             DaffRadioSetComponent,
             DaffRadioControlValueAccessorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffRadioModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffRadioModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -1278,149 +1152,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-class DaffFormLabelDirective {
-    constructor() {
-        this.class = true;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffFormLabelDirective, isStandalone: false, selector: "[daffFormLabel]", host: { properties: { "class.daff-form-label": "this.class" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormLabelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[daffFormLabel]',
-                    standalone: false,
-                }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-form-label']
-            }] } });
-
-class DaffFormLabelModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffFormLabelModule, declarations: [DaffFormLabelDirective], exports: [DaffFormLabelDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormLabelModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormLabelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        DaffFormLabelDirective,
-                    ],
-                    declarations: [
-                        DaffFormLabelDirective,
-                    ],
-                }]
-        }] });
-
-/**
- *
- * Prefix can be used to place content before another piece of content in components like
- * `daff-form-field`, `daff-solo-field`, and `daff-list`.
- */
-class DaffPrefixDirective {
-    constructor() {
-        this.class = true;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffPrefixDirective, isStandalone: false, selector: "[daffPrefix]", host: { properties: { "class.daff-prefix": "this.class" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffPrefixDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[daffPrefix]',
-                    standalone: false,
-                }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-prefix']
-            }] } });
-
-/**
- *
- * Prefix can be used to place content after another piece of content in components like
- * `daff-form-field`, `daff-solo-field`, and `daff-list`.
- */
-class DaffSuffixDirective {
-    constructor() {
-        this.class = true;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffSuffixDirective, isStandalone: false, selector: "[daffSuffix]", host: { properties: { "class.daff-suffix": "this.class" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSuffixDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[daffSuffix]',
-                    standalone: false,
-                }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-suffix']
-            }] } });
-
 class DaffPrefixSuffixModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffPrefixSuffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffPrefixSuffixModule, declarations: [DaffPrefixDirective,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffPrefixSuffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.11", ngImport: i0, type: DaffPrefixSuffixModule, imports: [DaffPrefixDirective,
             DaffSuffixDirective], exports: [DaffPrefixDirective,
             DaffSuffixDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffPrefixSuffixModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffPrefixSuffixModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffPrefixSuffixModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffPrefixSuffixModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [],
-                    exports: [
+                    imports: [
                         DaffPrefixDirective,
                         DaffSuffixDirective,
                     ],
-                    declarations: [
+                    exports: [
                         DaffPrefixDirective,
                         DaffSuffixDirective,
                     ],
                 }]
         }] });
 
-/**
- * A mixin for giving a component the ability to place content after another piece of content.
- */
-function daffSuffixableMixin(Base) {
-    class SuffixableDirective extends Base {
-        constructor(...args) {
-            super(...args);
-        }
-        /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: SuffixableDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-        /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: SuffixableDirective, isStandalone: true, queries: [{ propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
-    }
-    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: SuffixableDirective, decorators: [{
-                type: Directive
-            }], ctorParameters: () => [{ type: undefined }], propDecorators: { _suffix: [{
-                    type: ContentChild,
-                    args: [DaffSuffixDirective, { static: true }]
-                }] } });
-    return SuffixableDirective;
-}
-
-/**
- * A mixin for giving a component the ability to place content before another piece of content.
- */
-function daffPrefixableMixin(Base) {
-    class PrefixableDirective extends Base {
-        constructor(...args) {
-            super(...args);
-        }
-        /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PrefixableDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-        /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: PrefixableDirective, isStandalone: true, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
-    }
-    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PrefixableDirective, decorators: [{
-                type: Directive
-            }], ctorParameters: () => [{ type: undefined }], propDecorators: { _prefix: [{
-                    type: ContentChild,
-                    args: [DaffPrefixDirective, { static: true }]
-                }] } });
-    return PrefixableDirective;
-}
-
 /**
  * Enumerates the available color palette options for a component.
  * These values can be used to apply specific color styles to components within the application.
@@ -1456,12 +1208,12 @@ var DaffPaletteEnum;
      */
     DaffPaletteEnum["ThemeContrast"] = "theme-contrast";
     /**
-     * @deprecated Deprecated in version 0.82.0. Will be removed in version 0.85.0.
+     * @deprecated Deprecated in version 0.82.0. Will be removed in version 1.0.0.
      * Black. It's dark.
      */
     DaffPaletteEnum["Black"] = "black";
     /**
-     * @deprecated Deprecated in version 0.82.0. Will be removed in version 0.85.0.
+     * @deprecated Deprecated in version 0.82.0. Will be removed in version 1.0.0.
      * White. It's bright.
      */
     DaffPaletteEnum["White"] = "white";
@@ -1554,25 +1306,30 @@ class DaffColorableDirective {
             'daff-white': this.color === DaffPaletteEnum.White,
         };
     }
+    /**
+     * @docs-private
+     */
     ngOnChanges(changes) {
         if (!changes.color.currentValue) {
             this.color = this.defaultColor;
         }
     }
+    /**
+     * @docs-private
+     */
     ngOnInit() {
         validateColor(this.color);
         if (!this.color) {
             this.color = this.defaultColor;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffColorableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffColorableDirective, isStandalone: true, selector: "[daffColorable]", inputs: { color: "color" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffColorableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffColorableDirective, isStandalone: true, selector: "[daffColorable]", inputs: { color: "color" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffColorableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffColorableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffColorable]',
-                    standalone: true,
                 }]
         }], propDecorators: { class: [{
                 type: HostBinding,
@@ -1603,10 +1360,10 @@ class NoopBreakpointObserver {
     observe(value) {
         return of();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NoopBreakpointObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NoopBreakpointObserver, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NoopBreakpointObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NoopBreakpointObserver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NoopBreakpointObserver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NoopBreakpointObserver, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1695,10 +1452,10 @@ class DaffStatusableDirective {
             'daff-success': this.status === DaffStatusEnum.Success,
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffStatusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffStatusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class": "this.class" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffStatusableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffStatusableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffStatusable]',
@@ -1711,68 +1468,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }] } });
 
-/**
- * `DaffSkeletonableDirective` allows a component to display a skeleton loading
- * state by conditionally applying a CSS class. This is useful for indicating to
- * users that content is loading or being processed. This directive can be used to
- * apply a skeleton loading state to any component by toggling the `skeleton`
- * input property. When `skeleton` is `true`, the `daff-skeleton` CSS class
- * is applied, which should style the component to look like a loading placeholder.
- *
- * @example Implementing it as an attribute directive
- *
- * ```html
- * <div daffSkeletonable [skeleton]="isLoading">Content</div>
- * ```
- *
- * @example Implementing it as an Angular host directive
- *
- * ```ts
- * @Component({
- *  standalone: true,
- *  selector: 'custom-component',
- *  template: 'custom-component.html',
- *  hostDirectives: [
- *    {
- *      directive: DaffSkeletonableDirective,
- *      inputs: ['skeleton'],
- *    },
- *  ],
- * })
- * export class CustomComponent { }
- * ```
- *
- * ```scss
- * :host {
- *  .daff-skeleton {
- *    @include state.skeleton-screen(48px, 24px);
- *  }
- * }
- * ```
- *
- * The directive applies the `daff-skeleton` class to the component should be defined in your styles to display the loading
- * state as desired. It can be used in conjuction with the `skeleton-screen` mixin, which provides predefined loading styles.
- */
-class DaffSkeletonableDirective {
-    constructor() {
-        this.skeleton = false;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSkeletonableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffSkeletonableDirective, isStandalone: true, selector: "[daffSkeletonable]", inputs: { skeleton: "skeleton" }, host: { properties: { "class.daff-skeleton": "this.skeleton" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSkeletonableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[daffSkeletonable]',
-                    standalone: true,
-                }]
-        }], propDecorators: { skeleton: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.daff-skeleton']
-            }] } });
-
 var DaffTextAlignmentEnum;
 (function (DaffTextAlignmentEnum) {
     DaffTextAlignmentEnum["Left"] = "left";
@@ -1837,15 +1532,18 @@ class DaffTextAlignableDirective {
             'daff-right': this.textAlignment === DaffTextAlignmentEnum.Right,
         };
     }
+    /**
+     * @docs-private
+     */
     ngOnChanges(changes) {
         if (!changes.textAlignment?.currentValue) {
             this.textAlignment = this.defaultAlignment;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTextAlignableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffTextAlignableDirective, isStandalone: true, selector: "[daffTextAlignable]", inputs: { textAlignment: "textAlignment" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffTextAlignableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffTextAlignableDirective, isStandalone: true, selector: "[daffTextAlignable]", inputs: { textAlignment: "textAlignment" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffTextAlignableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffTextAlignableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffTextAlignable]',
@@ -1906,10 +1604,10 @@ class DaffCompactableDirective {
     constructor() {
         this.compact = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffCompactableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffCompactableDirective, isStandalone: true, selector: "[daffCompactable]", inputs: { compact: "compact" }, host: { properties: { "class.daff-compact": "this.compact" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCompactableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffCompactableDirective, isStandalone: true, selector: "[daffCompactable]", inputs: { compact: "compact" }, host: { properties: { "class.daff-compact": "this.compact" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffCompactableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCompactableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffCompactable]',
@@ -1982,12 +1680,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  */
 class DaffManageContainerLayoutDirective {
     constructor() {
+        /**
+         * @docs-private
+         */
         this.class = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffManageContainerLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffManageContainerLayoutDirective, isStandalone: true, selector: "[daffManageContainerLayout]", host: { properties: { "class.daff-manage-container-layout": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffManageContainerLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffManageContainerLayoutDirective, isStandalone: true, selector: "[daffManageContainerLayout]", host: { properties: { "class.daff-manage-container-layout": "this.class" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffManageContainerLayoutDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffManageContainerLayoutDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffManageContainerLayout]',
@@ -2024,12 +1725,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  */
 class DaffArticleEncapsulatedDirective {
     constructor() {
+        /**
+         * @docs-private
+         */
         this.class = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffArticleEncapsulatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffArticleEncapsulatedDirective, isStandalone: true, selector: "[daffArticleEncapsulated]", host: { properties: { "class.daff-ae": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffArticleEncapsulatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffArticleEncapsulatedDirective, isStandalone: true, selector: "[daffArticleEncapsulated]", host: { properties: { "class.daff-ae": "this.class" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffArticleEncapsulatedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffArticleEncapsulatedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffArticleEncapsulated]',
@@ -2080,10 +1784,10 @@ class DaffOsThemeService {
     getThemePreference() {
         return this.preference$;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffOsThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffOsThemeService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffOsThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffOsThemeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffOsThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffOsThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2137,10 +1841,10 @@ class DaffThemeStorageService {
         this.progressStorageEvent(DaffTheme.None);
         this.storage.removeItem(THEME_STORAGE_KEY);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffThemeStorageService, deps: [{ token: DaffServerSafePersistenceServiceToken }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffThemeStorageService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffThemeStorageService, deps: [{ token: DaffServerSafePersistenceServiceToken }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffThemeStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffThemeStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffThemeStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2211,10 +1915,10 @@ class DaffThemingService {
             ? this.lightMode()
             : this.darkMode();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffThemingService, deps: [{ token: DaffOsThemeService }, { token: DaffThemeStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffThemingService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffThemingService, deps: [{ token: DaffOsThemeService }, { token: DaffThemeStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffThemingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffThemingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffThemingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2257,10 +1961,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: "19.1.5", 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: "19.1.5", ngImport: i0, type: DaffThemeClassSetterService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", 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: "19.2.11", ngImport: i0, type: DaffThemeClassSetterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffThemeClassSetterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffThemeClassSetterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -2341,10 +2045,10 @@ class DaffFocusStackService {
         this.document.activeElement.blur();
         return this.document.activeElement;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFocusStackService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFocusStackService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFocusStackService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFocusStackService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFocusStackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFocusStackService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -2427,20 +2131,26 @@ class DaffSizableDirective {
             'daff-xl': this.size === DaffSizableEnum.XLarge,
         };
     }
+    /**
+     * @docs-private
+     */
     ngOnChanges(changes) {
         if (!changes.size?.currentValue) {
             this.size = this.defaultSize;
         }
     }
+    /**
+     * @docs-private
+     */
     ngOnInit() {
         if (!this.size) {
             this.size = this.defaultSize;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffSizableDirective, isStandalone: true, selector: "[daffSizable]", inputs: { size: "size" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffSizableDirective, isStandalone: true, selector: "[daffSizable]", inputs: { size: "size" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSizableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSizable]',
@@ -2546,6 +2256,9 @@ class DaffOpenableDirective {
         this._setOpen(state);
         this.toggled.emit(state);
     }
+    /**
+     * @docs-private
+     */
     ngOnChanges(changes) {
         /**
          * Throw an error if open is set in a component that is not stateless
@@ -2557,10 +2270,10 @@ class DaffOpenableDirective {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffOpenableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffOpenableDirective, isStandalone: true, selector: "[daffOpenable]", inputs: { open: "open" }, outputs: { toggled: "toggled" }, host: { properties: { "class.daff-open": "this.open" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffOpenableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffOpenableDirective, isStandalone: true, selector: "[daffOpenable]", inputs: { open: "open" }, outputs: { toggled: "toggled" }, host: { properties: { "class.daff-open": "this.open" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffOpenableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffOpenableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffOpenable]',
@@ -2596,10 +2309,10 @@ class DaffSelectableDirective {
         this.cd.markForCheck();
         return this;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSelectableDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffSelectableDirective, isStandalone: true, selector: "[daffSelected]", inputs: { selected: "selected" }, outputs: { becameSelected: "becameSelected" }, host: { properties: { "class.daff-selected": "this.selected" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSelectableDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffSelectableDirective, isStandalone: true, selector: "[daffSelected]", inputs: { selected: "selected" }, outputs: { becameSelected: "becameSelected" }, host: { properties: { "class.daff-selected": "this.selected" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSelectableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSelected]',
@@ -2630,5 +2343,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffColorableDirective, DaffCompactableDirective, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFocusStackService, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffInputComponent, DaffInputModule, DaffManageContainerLayoutDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffOpenableDirective, DaffPrefixDirective, DaffPrefixSuffixModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector, daffPrefixableMixin, daffSuffixableMixin };
+export { DAFF_FORM_FIELD_COMPONENTS, DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffColorableDirective, DaffCompactableDirective, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFocusStackService, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffHintComponent, DaffManageContainerLayoutDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffOpenableDirective, DaffPrefixDirective, DaffPrefixSuffixModule, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector };
 //# sourceMappingURL=daffodil-design.mjs.map