@daffodil/design 0.84.0 → 0.86.0

package/fesm2022/daffodil-design.mjs

@@ -1,13 +1,10 @@
 import * as i0 from '@angular/core';
-import { Directive, HostBinding, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChild, NgModule, Optional, Self, HostListener, Input, EventEmitter, ElementRef, ViewChild, Output, ContentChildren, Injectable, InjectionToken, inject, PLATFORM_ID, Inject, makeEnvironmentProviders, provideAppInitializer, isDevMode } from '@angular/core';
-import { BehaviorSubject, merge, of, map, Subject, fromEventPattern, fromEvent, EMPTY, combineLatest } from 'rxjs';
+import { HostBinding, Directive, Input, ChangeDetectionStrategy, Component, isDevMode, ContentChild, ViewEncapsulation, NgModule, HostListener, Optional, Self, EventEmitter, ElementRef, Output, ViewChild, ContentChildren, Injectable, InjectionToken, inject, PLATFORM_ID, Inject, makeEnvironmentProviders, provideAppInitializer } 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 * as i2 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
-import { coerceNumberProperty } from '@angular/cdk/coercion';
-import { takeUntil, startWith, map as map$1, catchError, filter, shareReplay } from 'rxjs/operators';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { startWith, map, catchError, filter, shareReplay } from 'rxjs/operators';
 import { DaffServerSafePersistenceServiceToken } from '@daffodil/core';
 
 class DaffErrorStateMatcher {
@@ -28,10 +25,10 @@ class DaffPrefixDirective {
          */
         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: true, selector: "[daffPrefix]", host: { properties: { "class.daff-prefix": "this.class" } }, ngImport: i0 }); }
+    /** @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.1.5", ngImport: i0, type: DaffPrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffPrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffPrefix]',
@@ -53,10 +50,10 @@ class DaffSuffixDirective {
          */
         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: true, selector: "[daffSuffix]", host: { properties: { "class.daff-suffix": "this.class" } }, ngImport: i0 }); }
+    /** @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.1.5", ngImport: i0, type: DaffSuffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffSuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSuffix]',
@@ -66,6 +63,147 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 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() {
+        /**
+         * Controls whether the component displays a skeleton loading state.
+         */
+        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]',
+                }]
+        }], propDecorators: { skeleton: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.daff-skeleton']
+            }] } });
+
+class DaffErrorMessageComponent {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+        /**
+         * @docs-private
+         *
+         * Sets the aria-live of an error message to polite.
+         */
+        this.ariaLive = 'polite';
+    }
+    /** @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", "attr.aria-live": "this.ariaLive" } }, 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.2.11", ngImport: i0, type: DaffErrorMessageComponent, decorators: [{
+            type: Component,
+            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']
+            }], ariaLive: [{
+                type: HostBinding,
+                args: ['attr.aria-live']
+            }] } });
+
+/**
+ * @deprecated in favor of the {@link DaffFormFieldLabelDirective}. It will be removed in v1.0.0. Deprecated in version 0.86.0. Will be removed in version 0.89.0.
+ */
+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.2.11", ngImport: i0, type: DaffFormLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffFormLabel]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-form-label']
+            }] } });
+
+class DaffHintComponent {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+        /**
+         * Displays a validated hint UI.
+         * */
+        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']
+            }] } });
+
 /**
  *
  * The class that a form control must **implement** in order to be
@@ -78,8 +216,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * be used for the necessary dependency injection.
  */
 class DaffFormFieldControl {
+    get raised() {
+        return this.focused;
+    }
+    ;
     constructor(ngControl) {
         this.ngControl = ngControl;
+        this.supportsAutoLabelling = true;
         this._stateChanges = new BehaviorSubject({
             focused: false,
             filled: false,
@@ -105,6 +248,19 @@ class DaffFormFieldControl {
 
 const DaffFormFieldMissingControlMessage = 'A DaffFormFieldComponent must contain a DaffFormFieldControl';
 
+class DaffFormFieldLabelDirective {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffFormFieldLabelDirective, isStandalone: true, selector: "daff-form-label", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'daff-form-label',
+                }]
+        }] });
+
+let daffFormFieldId = 0;
 class DaffFormFieldComponent {
     /** @docs-private */
     get isSelectField() {
@@ -115,30 +271,128 @@ class DaffFormFieldComponent {
         /** @docs-private */
         this.class = true;
         /**
+         * @docs-private
+         *
          * Tracking property to keep a record of whether or not the
          * form field should be marked as error.
          */
         this.isError = false;
         /**
+         * @docs-private
+         *
          * Tracking property to keep a record of whether or not the
          * form field contains any user input.
          */
         this.isFilled = false;
+        /**
+         * @docs-private
+         *
+         * Tracking property to keep a record of whether or not the
+         * form field should be marked as disabled.
+         */
         this.isDisabled = false;
         /**
+         * @docs-private
+         *
          * Tracking property to keep a record of whether or not the
          * form field should be marked as valid.
          */
         this.isValid = false;
+        /**
+         * The unique id of the form field. Defaults to an autogenerated value. When using this,
+         * it's your responsibility to ensure that the id for each form field is unique.
+         *
+         * It gets assigned to the `for` attribute on the `<label>` inside of the form field.
+         */
+        this.id = 'daff-form-field-' + ++daffFormFieldId;
+        /**
+         * @docs-private
+         */
+        this.hintId = this.id + '-hint';
+        /**
+         * @docs-private
+         */
+        this.errorMessageId = this.id + '-error';
+    }
+    /**
+     * @docs-private
+     */
+    get errorClass() {
+        return this.isError;
+    }
+    /**
+     * @docs-private
+     */
+    get disabledClass() {
+        return this.isDisabled;
+    }
+    /**
+     * @docs-private
+     */
+    get validClass() {
+        return this.isValid;
     }
     /**
+     * @docs-private
+     *
      * Determines whether or not the form field should display its focused state.
      */
     get isFocused() {
         return this._control?.focused;
     }
     /**
-     * Validate whether or not the FormField is in a "usable" state.
+     * @docs-private
+     */
+    get focusedClass() {
+        return this.isFocused;
+    }
+    /**
+     * @docs-private
+     */
+    get raisedClass() {
+        return this._control?.raised || this.isFilled;
+    }
+    /**
+     * @docs-private
+     */
+    hasHint() {
+        return this._hint ? true : false;
+    }
+    /**
+     * @docs-private
+     */
+    hasErrorMessage() {
+        return this._error ? true : false;
+    }
+    /**
+     * @docs-private
+     */
+    get autoLabelId() {
+        return this._control.supportsAutoLabelling ? this.id : null;
+    }
+    /**
+     * @docs-private
+     */
+    get customId() {
+        return this._control.supportsAutoLabelling ? null : this.id;
+    }
+    /**
+     * @docs-private
+     *
+     * Displays a console warning if the `DaffFormFieldLabelDirective` is not used on controls (native HTML control elements) that support auto-labelling.
+     */
+    ngAfterViewInit() {
+        if (isDevMode()) {
+            if (!this._formFieldLabelDirective && this._control.supportsAutoLabelling && !(this._control.id)) {
+                console.warn(`Accessibility Warning: The form field with id "${this.id}" uses a control that supports auto-labelling, but no <daff-form-label> component was found.\n\n` +
+                    `1. Add a <daff-form-label> component (recommended)\n` +
+                    `2. OR manually set an 'id' on your input and matching 'for' attribute on your <label>.\n\n` +
+                    `Why this matters: Proper labelling ensures assistive technologies can identify form fields correctly.`);
+            }
+        }
+    }
+    /**
+     * Validates whether or not the form field is in a "usable" state.
      */
     _validateFormControl() {
         if (!this._control) {
@@ -146,11 +400,11 @@ class DaffFormFieldComponent {
         }
     }
     /**
-     * Life cycle hook to verify that the form field has an acceptable
+     * @docs-private
+     *
+     * Lifecycle hook to verify that the form field has an acceptable
      * child control instance. Mostly useful for development-time
      * validation of usage.
-     *
-     * @docs-private
      */
     ngAfterContentInit() {
         this._validateFormControl();
@@ -163,21 +417,26 @@ class DaffFormFieldComponent {
         });
     }
     /**
-     * Life cycle hook to verify that the form field has an acceptable
+     * @docs-private
+     *
+     * Lifecycle hook to verify that the form field has an acceptable
      * child control instance. Mostly useful for development-time
      * validation of usage.
-     *
-     * @docs-private
      */
     ngAfterContentChecked() {
         this._validateFormControl();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: DaffFormFieldComponent, isStandalone: true, selector: "daff-form-field", host: { properties: { "class.daff-form-field": "this.class" } }, 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 }], ngImport: i0, template: "<div\n\tclass=\"daff-form-field__control\"\n\t[class.daff-focused]=\"isFocused\"\n\t[class.daff-error]=\"isError\"\n\t[class.daff-valid]=\"isValid\"\n\t[class.daff-filled]=\"isFilled\"\n\t[class.daff-disabled]=\"isDisabled\">\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-error-message\"></ng-content>\n<ng-content select=\"daff-hint\"></ng-content>", styles: [".daff-form-field{display:block;position:relative}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;box-sizing:border-box;font-size:1rem;height:3.5rem;line-height:1rem;position:relative;width:100%}.daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field__control .daff-form-label{position:absolute;left:1rem;top:1.25rem;pointer-events:none;transition:all .2s ease}.daff-form-field__control.daff-focused .daff-form-label,.daff-form-field__control.daff-filled .daff-form-label{font-size:.75rem;top:.375rem}.daff-form-field__control.daff-focused * ::-webkit-input-placeholder,.daff-form-field__control.daff-filled * ::-webkit-input-placeholder{opacity:1}.daff-form-field__control.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;padding:1.5rem 1rem .5rem;position:relative}.daff-form-field .daff-hint,.daff-form-field .daff-error-message{margin-top:.25rem}.daff-form-field .daff-prefix{padding-left:1rem}.daff-form-field .daff-suffix{padding-right:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, 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", inputs: { id: "id" }, 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 }, { propertyName: "_formLabelDirective", first: true, predicate: DaffFormLabelDirective, descendants: true }, { propertyName: "_formFieldLabelDirective", first: true, predicate: DaffFormFieldLabelDirective, descendants: true }, { propertyName: "_hint", first: true, predicate: DaffHintComponent, descendants: true }, { propertyName: "_error", first: true, predicate: DaffErrorMessageComponent, 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@if (_formLabelDirective) {\n\t\t\t<ng-content select=\"label[daffFormLabel]\"></ng-content>\n\t\t} @else if(_formFieldLabelDirective) {\n\t\t\t<label class=\"daff-form-field__label\"\n\t\t\t\t[attr.for]=\"autoLabelId\"\n\t\t\t\t[attr.id]=\"customId\">\n\t\t\t\t<ng-content select=\"daff-form-label\"></ng-content>\n\t\t\t</label>\n\t\t} @else {\n\t\t\t<ng-content select=\"label\"></ng-content>\n\t\t}\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@if (hasHint()) {\n\t<div\n\t\tclass=\"daff-form-field__hint-wrapper\"\n\t\t[id]=\"hintId\">\n\t\t<ng-content select=\"daff-hint\"></ng-content>\n\t</div>\n}\n@if (hasErrorMessage()) {\n\t<div\n\t\tclass=\"daff-form-field__error-wrapper\"\n\t\t[id]=\"errorMessageId\">\n\t\t<ng-content select=\"daff-error-message\"></ng-content>\n\t</div>\n}", styles: [".daff-form-field{display:flex;flex-direction:column;gap:.25rem;position:relative}.daff-form-field__hint-wrapper,.daff-form-field__error-wrapper{display:flex;flex-direction:column;gap:.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+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field input,.daff-form-field textarea,.daff-form-field select{font-size:1rem;line-height:1.5rem;padding:1rem}.daff-form-field label,.daff-form-field .daff-form-label,.daff-form-field__label{position:absolute;left:1rem;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s}.daff-form-field label+input,.daff-form-field label+textarea,.daff-form-field label+select,.daff-form-field .daff-form-label+input,.daff-form-field .daff-form-label+textarea,.daff-form-field .daff-form-label+select,.daff-form-field__label+input,.daff-form-field__label+textarea,.daff-form-field__label+select{padding:1.5rem 1rem .5rem}.daff-form-field.daff-raised label,.daff-form-field.daff-raised .daff-form-label,.daff-form-field.daff-raised .daff-form-field__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;overflow:hidden}.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;height:3.5rem;width:100%;border-radius:.25rem}.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, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n\tclass=\"daff-form-field__control\"\n\t[class.daff-focused]=\"isFocused\"\n\t[class.daff-error]=\"isError\"\n\t[class.daff-valid]=\"isValid\"\n\t[class.daff-filled]=\"isFilled\"\n\t[class.daff-disabled]=\"isDisabled\">\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-error-message\"></ng-content>\n<ng-content select=\"daff-hint\"></ng-content>", styles: [".daff-form-field{display:block;position:relative}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;box-sizing:border-box;font-size:1rem;height:3.5rem;line-height:1rem;position:relative;width:100%}.daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field__control .daff-form-label{position:absolute;left:1rem;top:1.25rem;pointer-events:none;transition:all .2s ease}.daff-form-field__control.daff-focused .daff-form-label,.daff-form-field__control.daff-filled .daff-form-label{font-size:.75rem;top:.375rem}.daff-form-field__control.daff-focused * ::-webkit-input-placeholder,.daff-form-field__control.daff-filled * ::-webkit-input-placeholder{opacity:1}.daff-form-field__control.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;padding:1.5rem 1rem .5rem;position:relative}.daff-form-field .daff-hint,.daff-form-field .daff-error-message{margin-top:.25rem}.daff-form-field .daff-prefix{padding-left:1rem}.daff-form-field .daff-suffix{padding-right:1rem}\n"] }]
+            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@if (_formLabelDirective) {\n\t\t\t<ng-content select=\"label[daffFormLabel]\"></ng-content>\n\t\t} @else if(_formFieldLabelDirective) {\n\t\t\t<label class=\"daff-form-field__label\"\n\t\t\t\t[attr.for]=\"autoLabelId\"\n\t\t\t\t[attr.id]=\"customId\">\n\t\t\t\t<ng-content select=\"daff-form-label\"></ng-content>\n\t\t\t</label>\n\t\t} @else {\n\t\t\t<ng-content select=\"label\"></ng-content>\n\t\t}\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@if (hasHint()) {\n\t<div\n\t\tclass=\"daff-form-field__hint-wrapper\"\n\t\t[id]=\"hintId\">\n\t\t<ng-content select=\"daff-hint\"></ng-content>\n\t</div>\n}\n@if (hasErrorMessage()) {\n\t<div\n\t\tclass=\"daff-form-field__error-wrapper\"\n\t\t[id]=\"errorMessageId\">\n\t\t<ng-content select=\"daff-error-message\"></ng-content>\n\t</div>\n}", styles: [".daff-form-field{display:flex;flex-direction:column;gap:.25rem;position:relative}.daff-form-field__hint-wrapper,.daff-form-field__error-wrapper{display:flex;flex-direction:column;gap:.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+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field input,.daff-form-field textarea,.daff-form-field select{font-size:1rem;line-height:1.5rem;padding:1rem}.daff-form-field label,.daff-form-field .daff-form-label,.daff-form-field__label{position:absolute;left:1rem;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s}.daff-form-field label+input,.daff-form-field label+textarea,.daff-form-field label+select,.daff-form-field .daff-form-label+input,.daff-form-field .daff-form-label+textarea,.daff-form-field .daff-form-label+select,.daff-form-field__label+input,.daff-form-field__label+textarea,.daff-form-field__label+select{padding:1.5rem 1rem .5rem}.daff-form-field.daff-raised label,.daff-form-field.daff-raised .daff-form-label,.daff-form-field.daff-raised .daff-form-field__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;overflow:hidden}.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;height:3.5rem;width:100%;border-radius:.25rem}.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']
@@ -190,35 +449,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             }], _control: [{
                 type: ContentChild,
                 args: [DaffFormFieldControl]
-            }] } });
-
-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: 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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffErrorMessageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-error-message', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;font-size:.875rem}\n"] }]
-        }], propDecorators: { class: [{
+            }], _formLabelDirective: [{
+                type: ContentChild,
+                args: [DaffFormLabelDirective]
+            }], _formFieldLabelDirective: [{
+                type: ContentChild,
+                args: [DaffFormFieldLabelDirective]
+            }], _hint: [{
+                type: ContentChild,
+                args: [DaffHintComponent]
+            }], _error: [{
+                type: ContentChild,
+                args: [DaffErrorMessageComponent]
+            }], errorClass: [{
                 type: HostBinding,
-                args: ['class.daff-error-message']
+                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']
+            }], id: [{
+                type: Input
             }] } });
 
 /**
  * @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, imports: [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: [
@@ -230,190 +500,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-class DaffFormLabelDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        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: 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: 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.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, imports: [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,
-                    ],
-                    imports: [
-                        DaffFormLabelDirective,
-                    ],
-                }]
-        }] });
-
-/**
- * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
- */
-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, imports: [DaffFormFieldComponent,
-            DaffErrorMessageModule,
-            DaffFormLabelModule], exports: [DaffFormFieldComponent,
-            DaffErrorMessageModule,
-            DaffFormLabelModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormFieldModule, imports: [DaffErrorMessageModule,
-            DaffFormLabelModule, DaffErrorMessageModule,
-            DaffFormLabelModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        DaffFormFieldComponent,
-                        DaffErrorMessageModule,
-                        DaffFormLabelModule,
-                    ],
-                    exports: [
-                        DaffFormFieldComponent,
-                        DaffErrorMessageModule,
-                        DaffFormLabelModule,
-                    ],
-                }]
-        }] });
-
-class DaffHintComponent {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffHintComponent, isStandalone: true, selector: "daff-hint", host: { properties: { "class.daff-hint": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;font-size:.875rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffHintComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-hint', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:block;font-size:.875rem}\n"] }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-hint']
-            }] } });
-
-/**
- * @docs-private
- */
-const DAFF_FORM_FIELD_COMPONENTS = [
-    DaffFormFieldComponent,
-    DaffErrorMessageComponent,
-    DaffFormLabelDirective,
-    DaffHintComponent,
-    DaffPrefixDirective,
-    DaffSuffixDirective,
-];
-
-/**
- * DaffInputComponent provides the same functionality as a native `<input>` and contains custom styling and functionality.
- */
-class DaffInputComponent 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.class = true;
-        /** @docs-private */
-        this.controlType = 'native-input';
-        this.focused = false;
-    }
-    /** @docs-private */
-    ngOnInit() {
-        this.stateChanges = merge(this._stateChanges.asObservable(), this.ngControl ? this.ngControl.statusChanges : of(undefined)).pipe(map(() => this.state));
-    }
-    /** @docs-private */
-    onFocus() {
-        this._elementRef.nativeElement.focus();
-    }
-    get value() {
-        return this._elementRef.nativeElement.value;
-    }
-    /** @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: true, selector: "input[daff-input]", host: { listeners: { "focus": "focus()", "blur": "blur()" }, properties: { "class.daff-input": "this.class" } }, providers: [
-            // eslint-disable-next-line @typescript-eslint/no-use-before-define
-            { provide: DaffFormFieldControl, useExisting: DaffInputComponent },
-        ], usesInheritance: true, 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}:host:disabled{cursor:not-allowed}\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 },
-                    ], 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}:host:disabled{cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i0.ElementRef }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-input']
-            }], focus: [{
-                type: HostListener,
-                args: ['focus']
-            }], blur: [{
-                type: HostListener,
-                args: ['blur']
-            }] } });
-
 /**
  * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
  */
-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, imports: [DaffInputComponent], exports: [DaffInputComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffInputModule }); }
+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: [{
+                    exports: [
+                        DaffFormLabelDirective,
+                    ],
+                    imports: [
+                        DaffFormLabelDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
+ */
+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: [
-                        DaffInputComponent,
+                        DaffFormFieldComponent,
+                        DaffErrorMessageModule,
+                        DaffFormLabelModule,
                     ],
                     exports: [
-                        DaffInputComponent,
+                        DaffFormFieldComponent,
+                        DaffErrorMessageModule,
+                        DaffFormLabelModule,
                     ],
                 }]
         }] });
 
+/**
+ * @docs-private
+ */
+const DAFF_FORM_FIELD_COMPONENTS = [
+    DaffFormFieldComponent,
+    DaffErrorMessageComponent,
+    DaffFormLabelDirective,
+    DaffHintComponent,
+    DaffPrefixDirective,
+    DaffSuffixDirective,
+    DaffFormFieldLabelDirective,
+];
+
 class DaffNativeSelectComponent extends DaffFormFieldControl {
     /**
      * @docs-private
@@ -453,13 +602,13 @@ class DaffNativeSelectComponent extends DaffFormFieldControl {
     get value() {
         return this._elementRef.nativeElement.value;
     }
-    /** @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: [
+    /** @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 },
         ], 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
@@ -483,11 +632,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: [
@@ -604,10 +753,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: [{
@@ -714,10 +863,10 @@ class DaffCheckboxControlValueAccessorDirective {
     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 }); }
+    /** @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: DaffCheckboxControlValueAccessorDirective, decorators: [{
+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
@@ -748,10 +897,10 @@ class DaffCheckboxSetComponent {
         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 }); }
+    /** @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.1.5", ngImport: i0, type: DaffCheckboxSetComponent, decorators: [{
+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: [{
@@ -769,17 +918,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             }] } });
 
 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,
+    /** @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.1.5", ngImport: i0, type: DaffCheckboxModule, providers: [
+    /** @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: DaffCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -801,346 +950,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-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();
-    }
-    /**
-     * @docs-private
-     */
-    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: "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"] }, { kind: "component", type: DaffInputComponent, selector: "input[daff-input]" }], 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 extends DaffFormFieldControl {
-    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) {
-        super(ngControl);
-        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;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    focus() {
-        if (this.select) {
-            this.select.focus();
-        }
-        if (this.input) {
-            this.input.focus();
-        }
-    }
-    get value() {
-        if (this.select) {
-            return this.select.value;
-        }
-        if (this.input) {
-            return this.input.value;
-        }
-    }
-    /** @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 }], usesInheritance: 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 }); }
-}
-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" }]
-        }], 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: Input
-            }], max: [{
-                type: Input
-            }], selectMax: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }] } });
-
-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,
-            ReactiveFormsModule,
-            DaffInputModule], 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,
-            ReactiveFormsModule,
-            DaffInputModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantityFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        DaffQuantityFieldComponent,
-                        DaffQuantityInputComponent,
-                        DaffQuantitySelectComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        DaffNativeSelectModule,
-                        ReactiveFormsModule,
-                        DaffInputModule,
-                    ],
-                    exports: [
-                        DaffQuantityFieldComponent,
-                        DaffQuantityInputComponent,
-                        DaffQuantitySelectComponent,
-                    ],
-                }]
-        }] });
-
 class DaffRadioSetComponent {
     constructor() {
         /**
@@ -1148,10 +957,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: [{
@@ -1254,10 +1063,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: [{
@@ -1333,10 +1142,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' }]
         }] });
@@ -1406,10 +1215,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
@@ -1427,15 +1236,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: [
@@ -1455,13 +1264,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         }] });
 
 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, imports: [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: [
@@ -1510,12 +1319,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";
@@ -1625,10 +1434,10 @@ class DaffColorableDirective {
             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]',
@@ -1662,10 +1471,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',
@@ -1754,10 +1563,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]',
@@ -1770,68 +1579,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";
@@ -1839,6 +1586,12 @@ var DaffTextAlignmentEnum;
     DaffTextAlignmentEnum["Right"] = "right";
 })(DaffTextAlignmentEnum || (DaffTextAlignmentEnum = {}));
 
+const textAlignmentValues = (textAlignment) => Object.values(DaffTextAlignmentEnum).includes(textAlignment);
+const validateTextAlignment = (textAlignment) => {
+    if (textAlignment !== undefined && !textAlignmentValues(textAlignment)) {
+        console.warn(`'${textAlignment}' is not a valid value of the textAlignment property. The available values are: left, center, or right.`);
+    }
+};
 /**
  * `DaffTextAlignableDirective` allows for dynamic text alignment of a component by
  * setting CSS classes based on the specified text alignment. This directive is
@@ -1904,14 +1657,22 @@ class DaffTextAlignableDirective {
             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 }); }
+    /**
+     * @docs-private
+     */
+    ngOnInit() {
+        validateTextAlignment(this.textAlignment);
+        if (!this.textAlignment) {
+            this.textAlignment = this.defaultAlignment;
+        }
+    }
+    /** @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]',
-                    standalone: true,
                 }]
         }], propDecorators: { class: [{
                 type: HostBinding,
@@ -1966,12 +1727,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  */
 class DaffCompactableDirective {
     constructor() {
+        /**
+         * Controls whether the component is compact.
+         */
         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]',
@@ -2049,10 +1813,10 @@ class DaffManageContainerLayoutDirective {
          */
         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]',
@@ -2094,10 +1858,10 @@ class DaffArticleEncapsulatedDirective {
          */
         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]',
@@ -2139,7 +1903,7 @@ class DaffOsThemeService {
         this.doc = _doc;
         this.preference$ = this.doc.defaultView?.matchMedia
             ? fromEventPattern(addHandlerFactory(this.doc.defaultView), removeHandlerFactory(this.doc.defaultView))
-                .pipe(startWith(this.doc.defaultView?.matchMedia(mediaQueryDarkPreference)), map$1((e) => e.matches), map$1((prefersDark) => prefersDark ? DaffTheme.Dark : DaffTheme.Light))
+                .pipe(startWith(this.doc.defaultView?.matchMedia(mediaQueryDarkPreference)), map((e) => e.matches), map((prefersDark) => prefersDark ? DaffTheme.Dark : DaffTheme.Light))
             : of(DaffTheme.None);
     }
     /**
@@ -2148,10 +1912,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',
@@ -2182,7 +1946,7 @@ class DaffThemeStorageService {
         this.doc = _doc;
         this.theme$ = merge(this.storage$, this.doc.defaultView
             ? fromEvent(this.doc.defaultView, 'storage').pipe(startWith(storageEventBuilder(this.storage.getItem(THEME_STORAGE_KEY))), catchError((e) => EMPTY))
-            : of(storageEventBuilder(this.storage.getItem(THEME_STORAGE_KEY)))).pipe(filter((e) => e.key === THEME_STORAGE_KEY), map$1((e) => coerceValue(e.newValue)), shareReplay(1));
+            : of(storageEventBuilder(this.storage.getItem(THEME_STORAGE_KEY)))).pipe(filter((e) => e.key === THEME_STORAGE_KEY), map((e) => coerceValue(e.newValue)), shareReplay(1));
     }
     /**
      * Given that Safari doesn't respect in-tab storage events, we have to manually
@@ -2205,10 +1969,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',
@@ -2248,7 +2012,7 @@ class DaffThemingService {
         this.theme$ = combineLatest([
             this.osTheme.getThemePreference(),
             this.themeStorage.getThemeAsObservable(),
-        ]).pipe(map$1(([osPreference, storedPreference]) => daffComputeThemeSetting(osPreference, storedPreference)));
+        ]).pipe(map(([osPreference, storedPreference]) => daffComputeThemeSetting(osPreference, storedPreference)));
         this.theme$.subscribe((theme) => {
             this.theme = theme;
         });
@@ -2279,10 +2043,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',
@@ -2325,10 +2089,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,
@@ -2409,10 +2173,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: [{
@@ -2511,10 +2275,10 @@ class DaffSizableDirective {
             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]',
@@ -2576,7 +2340,7 @@ const DaffOpenableStateError = '`open` cannot be set as an input property on the
  */
 class DaffOpenableDirective {
     constructor() {
-        /** Whether or not a component implementing the directive is open */
+        /** Controls whether the component is open. */
         this.open = false;
         /** Whether or not a component should handle state
          *
@@ -2634,10 +2398,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]',
@@ -2655,7 +2419,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 class DaffSelectableDirective {
     constructor(cd) {
         this.cd = cd;
-        /** Whether or not a component implementing the directive is selected */
+        /**
+         * Controls whether the component is selected.
+         */
         this.selected = false;
         /**
          * An event that fires after the media element becomes selected.
@@ -2673,10 +2439,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]',
@@ -2707,5 +2473,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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, 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 };
+export { DAFF_FORM_FIELD_COMPONENTS, DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffColorableDirective, DaffCompactableDirective, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFocusStackService, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldLabelDirective, 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