@daffodil/design 0.83.0 → 0.84.0

package/fesm2022/daffodil-design.mjs

@@ -1,15 +1,12 @@
-import * as i2 from '@angular/common';
-import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, HostBinding, Input, ContentChild, ChangeDetectionStrategy, NgModule, Optional, Self, HostListener, EventEmitter, ElementRef, ViewChild, Output, Directive, ContentChildren, Injectable, InjectionToken, inject, PLATFORM_ID, Inject, makeEnvironmentProviders, provideAppInitializer, isDevMode } from '@angular/core';
-import * as i2$1 from '@fortawesome/angular-fontawesome';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { 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 * 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 { Subject, of, fromEventPattern, merge, fromEvent, EMPTY, combineLatest } from 'rxjs';
-import { takeUntil, startWith, map, catchError, filter, shareReplay } from 'rxjs/operators';
+import { takeUntil, startWith, map as map$1, catchError, filter, shareReplay } from 'rxjs/operators';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { DaffServerSafePersistenceServiceToken } from '@daffodil/core';
 
@@ -19,6 +16,56 @@ class DaffErrorStateMatcher {
     }
 }
 
+/**
+ *
+ * Prefix can be used to place content before another piece of content in components like
+ * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ */
+class DaffPrefixDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffPrefix]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-prefix']
+            }] } });
+
+/**
+ *
+ * Prefix can be used to place content after another piece of content in components like
+ * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ */
+class DaffSuffixDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffSuffix]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-suffix']
+            }] } });
+
 /**
  *
  * The class that a form control must **implement** in order to be
@@ -31,33 +78,53 @@ class DaffErrorStateMatcher {
  * be used for the necessary dependency injection.
  */
 class DaffFormFieldControl {
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        this._stateChanges = new BehaviorSubject({
+            focused: false,
+            filled: false,
+            disabled: false,
+            error: false,
+            valid: true,
+        });
+    }
+    get state() {
+        return {
+            focused: this.focused,
+            filled: !!this.value,
+            disabled: this.ngControl?.disabled,
+            error: this.ngControl?.errors && (this.ngControl?.dirty || this.ngControl?.touched),
+            valid: !this.ngControl?.errors && (this.ngControl?.dirty || this.ngControl?.touched),
+        };
+    }
+    emitState() {
+        this._stateChanges.next(this.state);
+    }
 }
 ;
 
 const DaffFormFieldMissingControlMessage = 'A DaffFormFieldComponent must contain a DaffFormFieldControl';
 
-// ChangeDetection is ignored because this component needs to be refactored
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 class DaffFormFieldComponent {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.faChevronDown = faChevronDown;
+    /** @docs-private */
+    get isSelectField() {
+        return this._control.controlType === 'native-select';
+    }
+    constructor(cd) {
+        this.cd = cd;
+        /** @docs-private */
         this.class = true;
-        /**
-         * The tracking property used to determine if the parent form has been submitted,
-         * and thus show an error message (even if the field hasn't been touched).
-         *
-         * @deprecated Deprecated in version 0.78.0. Will be removed in version 1.0.0.
-         */
-        // eslint-disable-next-line @typescript-eslint/no-inferrable-types
-        this.formSubmitted = false;
         /**
          * Tracking property to keep a record of whether or not the
          * form field should be marked as error.
          */
         this.isError = false;
+        /**
+         * Tracking property to keep a record of whether or not the
+         * form field contains any user input.
+         */
+        this.isFilled = false;
+        this.isDisabled = false;
         /**
          * Tracking property to keep a record of whether or not the
          * form field should be marked as valid.
@@ -65,30 +132,13 @@ class DaffFormFieldComponent {
         this.isValid = false;
     }
     /**
-     * @docs
-     *
      * Determines whether or not the form field should display its focused state.
      */
     get isFocused() {
         return this._control?.focused;
     }
     /**
-     * Keeps the state of the form field consistent with its child DaffFormControl
-     *
-     * TODO: consider whether or not this can be refactored to some kind of
-     * observable to remove unnecessary change detection.
-     *
-     * @docs-private
-     */
-    ngDoCheck() {
-        if (this._control?.ngControl) {
-            this.isError = this._control.ngControl.errors && (this._control.ngControl.touched);
-            this.isValid = !this._control.ngControl.errors && this._control.ngControl.touched;
-        }
-    }
-    /**
-     * Validate whether or not the FormField is in
-     * a "usable" state.
+     * Validate whether or not the FormField is in a "usable" state.
      */
     _validateFormControl() {
         if (!this._control) {
@@ -104,6 +154,13 @@ class DaffFormFieldComponent {
      */
     ngAfterContentInit() {
         this._validateFormControl();
+        this._control.stateChanges?.subscribe(({ focused, filled, disabled, error, valid }) => {
+            this.isFilled = filled;
+            this.isError = error;
+            this.isDisabled = disabled;
+            this.isValid = valid;
+            this.cd.markForCheck();
+        });
     }
     /**
      * Life cycle hook to verify that the form field has an acceptable
@@ -115,17 +172,21 @@ class DaffFormFieldComponent {
     ngAfterContentChecked() {
         this._validateFormControl();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffFormFieldComponent, isStandalone: false, selector: "daff-form-field", inputs: { formSubmitted: "formSubmitted" }, host: { properties: { "class.daff-form-field": "this.class" } }, queries: [{ propertyName: "_control", first: true, predicate: DaffFormFieldControl, descendants: true }], ngImport: i0, template: "<div class=\"daff-form-field__control\" [class.daff-error]=\"isError\" [class.daff-valid]=\"isValid\" [class.daff-focus]=\"isFocused\">\n  <ng-content></ng-content>\n  <div class=\"daff-form-field__icon\" *ngIf=\"_control.controlType === 'native-select'\">\n    <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n  </div>\n</div>\n<ng-content select=\"daff-error-message\"></ng-content>\n", styles: [".daff-form-field{display:block;position:relative}.daff-form-field__control{border-radius:3px;display:inline-block;font-size:1rem;height:inherit;line-height:1.5rem;padding:10px 15px;width:100%}.daff-form-field__icon{display:inline-block;pointer-events:none;position:absolute;right:15px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-form-field', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"daff-form-field__control\" [class.daff-error]=\"isError\" [class.daff-valid]=\"isValid\" [class.daff-focus]=\"isFocused\">\n  <ng-content></ng-content>\n  <div class=\"daff-form-field__icon\" *ngIf=\"_control.controlType === 'native-select'\">\n    <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n  </div>\n</div>\n<ng-content select=\"daff-error-message\"></ng-content>\n", styles: [".daff-form-field{display:block;position:relative}.daff-form-field__control{border-radius:3px;display:inline-block;font-size:1rem;height:inherit;line-height:1.5rem;padding:10px 15px;width:100%}.daff-form-field__icon{display:inline-block;pointer-events:none;position:absolute;right:15px}\n"] }]
-        }], propDecorators: { class: [{
+            args: [{ selector: 'daff-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-form-field']
-            }], formSubmitted: [{
-                type: Input
+            }], _prefix: [{
+                type: ContentChild,
+                args: [DaffPrefixDirective]
+            }], _suffix: [{
+                type: ContentChild,
+                args: [DaffSuffixDirective]
             }], _control: [{
                 type: ContentChild,
                 args: [DaffFormFieldControl]
@@ -133,22 +194,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
 class DaffErrorMessageComponent {
     constructor() {
+        /**
+         * @docs-private
+         */
         this.class = true;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffErrorMessageComponent, isStandalone: false, selector: "daff-error-message", host: { properties: { "class.daff-error-message": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;font-size:.875rem;margin-top:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵ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, standalone: false, styles: [":host{display:block;font-size:.875rem;margin-top:5px}\n"] }]
+            args: [{ selector: 'daff-error-message', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;font-size:.875rem}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-error-message']
             }] } });
 
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
+ */
 class DaffErrorMessageModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffErrorMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffErrorMessageModule, declarations: [DaffErrorMessageComponent], exports: [DaffErrorMessageComponent] }); }
+    /** @nocollapse */ static { this.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffErrorMessageModule, decorators: [{
@@ -157,86 +224,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     exports: [
                         DaffErrorMessageComponent,
                     ],
-                    declarations: [
+                    imports: [
                         DaffErrorMessageComponent,
                     ],
                 }]
         }] });
 
+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, declarations: [DaffFormFieldComponent], imports: [CommonModule,
-            FontAwesomeModule,
-            DaffErrorMessageModule], exports: [DaffFormFieldComponent,
-            DaffErrorMessageModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormFieldModule, imports: [CommonModule,
-            FontAwesomeModule,
-            DaffErrorMessageModule, DaffErrorMessageModule] }); }
+    /** @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: [
-                        CommonModule,
-                        FontAwesomeModule,
+                        DaffFormFieldComponent,
                         DaffErrorMessageModule,
+                        DaffFormLabelModule,
                     ],
                     exports: [
                         DaffFormFieldComponent,
                         DaffErrorMessageModule,
-                    ],
-                    declarations: [
-                        DaffFormFieldComponent,
+                        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 {
-    /**
-     * @docs-private
-     */
+class DaffInputComponent extends DaffFormFieldControl {
+    /** @docs-private */
     focus() {
         this.focused = true;
+        this.emitState();
     }
-    /**
-     * @docs-private
-     */
+    /** @docs-private */
     blur() {
         this.focused = false;
+        this.emitState();
     }
     constructor(
-    /**
-     * @docs-private
-     */
+    /** @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: false, selector: "input[daff-input]", inputs: { formSubmitted: "formSubmitted" }, host: { listeners: { "focus": "focus()", "blur": "blur()" } }, providers: [
+    /** @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 },
-        ], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{border:none;border-radius:4px;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;padding:0;width:100%;box-sizing:border-box}:host:focus{border:none;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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 },
-                    ], standalone: false, styles: [":host{border:none;border-radius:4px;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;padding:0;width:100%;box-sizing:border-box}:host:focus{border:none;box-shadow:none;outline:none}\n"] }]
+                    ], 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: { formSubmitted: [{
-                type: Input
+                }] }, { type: i0.ElementRef }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-input']
             }], focus: [{
                 type: HostListener,
                 args: ['focus']
@@ -245,61 +394,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 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, declarations: [DaffInputComponent], imports: [CommonModule], exports: [DaffInputComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffInputModule, imports: [CommonModule] }); }
+    /** @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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                    ],
-                    exports: [
                         DaffInputComponent,
                     ],
-                    declarations: [
+                    exports: [
                         DaffInputComponent,
                     ],
                 }]
         }] });
 
-class DaffNativeSelectComponent {
+class DaffNativeSelectComponent extends DaffFormFieldControl {
     /**
      * @docs-private
      */
     focus() {
         this.focused = true;
+        this.emitState();
     }
     /**
      * @docs-private
      */
     blur() {
         this.focused = false;
+        this.emitState();
     }
     constructor(
     /**
      * @docs-private
      */
     ngControl, _elementRef) {
+        super(ngControl);
         this.ngControl = ngControl;
         this._elementRef = _elementRef;
         /**
          * @docs-private
          */
         this.controlType = 'native-select';
+        /**
+         * @docs-private
+         */
         this.class = true;
         this.focused = false;
     }
     onFocus() {
         this._elementRef.nativeElement.focus();
     }
+    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: [
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
             { provide: DaffFormFieldControl, useExisting: DaffNativeSelectComponent },
-        ], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".daff-native-select{appearance:none;background:transparent;background-clip:padding-box;border:0;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;min-width:45px;width:100%}.daff-native-select:focus{border:0;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".daff-native-select{appearance:none;background:transparent;background-clip:padding-box;border:0;box-shadow:none;font-size:1rem;line-height:1.5rem;margin:0;min-width:45px;width:100%}.daff-native-select:focus{border:0;box-shadow:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffNativeSelectComponent, decorators: [{
             type: Component,
@@ -498,6 +656,9 @@ class DaffCheckboxControlValueAccessorDirective {
     /**
      * A lifecycle method called when the directive is initialized.
      */
+    /**
+     * @docs-private
+     */
     ngOnInit() {
         // See the note about `writeValue` usage.
         this.writeValue(this._control.value);
@@ -678,6 +839,9 @@ class DaffQuantityInputComponent {
         this._inputControl = new UntypedFormControl();
         this._destroyed = new Subject();
     }
+    /**
+     * @docs-private
+     */
     ngOnInit() {
         this._inputControl.patchValue(this.ngControl.control.value);
         this.setInputDisabled();
@@ -714,7 +878,7 @@ class DaffQuantityInputComponent {
             : this._inputControl.enable();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantityInputComponent, deps: [{ token: i1.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffQuantityInputComponent, isStandalone: false, selector: "daff-quantity-input", inputs: { min: "min", max: "max" }, viewQueries: [{ propertyName: "input", first: true, predicate: DaffInputComponent, descendants: true }], ngImport: i0, template: "<input daff-input\n  type=\"number\"\n  [attr.max]=\"max\"\n  [attr.min]=\"min\"\n  [attr.step]=\"1\"\n  (focus)=\"onFocus()\"\n  (blur)=\"onBlur()\"\n  (change)=\"onValueChange($event)\"\n  [formControl]=\"_inputControl\"\n>\n", dependencies: [{ kind: "component", type: DaffInputComponent, selector: "input[daff-input]", inputs: ["formSubmitted"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @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,
@@ -805,7 +969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }] } });
 
-class DaffQuantityFieldComponent {
+class DaffQuantityFieldComponent extends DaffFormFieldControl {
     get focused() {
         return !!(this.input?.focused || this.select?.focused);
     }
@@ -840,6 +1004,7 @@ class DaffQuantityFieldComponent {
         return !this.showInputField;
     }
     constructor(ngControl, cd) {
+        super(ngControl);
         this.ngControl = ngControl;
         this.cd = cd;
         /**
@@ -893,6 +1058,14 @@ class DaffQuantityFieldComponent {
             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: [
             {
@@ -900,7 +1073,7 @@ class DaffQuantityFieldComponent {
                 // eslint-disable-next-line @typescript-eslint/no-use-before-define
                 useExisting: DaffQuantityFieldComponent,
             },
-        ], viewQueries: [{ propertyName: "input", first: true, predicate: DaffQuantityInputComponent, descendants: true }, { propertyName: "select", first: true, predicate: DaffQuantitySelectComponent, descendants: true }], ngImport: i0, template: "<daff-quantity-select\n  *ngIf=\"showSelectField\"\n  [min]=\"min\"\n  [max]=\"_maxFloor\"\n  [extendable]=\"max > selectMax\"\n  [id]=\"id\">\n</daff-quantity-select>\n<daff-quantity-input\n  *ngIf=\"showInputField\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [id]=\"id\">\n</daff-quantity-input>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DaffQuantityInputComponent, selector: "daff-quantity-input", inputs: ["min", "max"] }, { kind: "component", type: DaffQuantitySelectComponent, selector: "daff-quantity-select", inputs: ["min", "max", "extendable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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,
@@ -937,14 +1110,14 @@ class DaffQuantityFieldModule {
             DaffQuantityInputComponent,
             DaffQuantitySelectComponent], imports: [CommonModule,
             DaffNativeSelectModule,
-            DaffInputModule,
-            ReactiveFormsModule], exports: [DaffQuantityFieldComponent,
+            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,
-            DaffInputModule,
-            ReactiveFormsModule] }); }
+            ReactiveFormsModule,
+            DaffInputModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffQuantityFieldModule, decorators: [{
             type: NgModule,
@@ -957,8 +1130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     imports: [
                         CommonModule,
                         DaffNativeSelectModule,
-                        DaffInputModule,
                         ReactiveFormsModule,
+                        DaffInputModule,
                     ],
                     exports: [
                         DaffQuantityFieldComponent,
@@ -1180,6 +1353,9 @@ class DaffRadioControlValueAccessorDirective {
             this._control.valueAccessor = this;
         }
     }
+    /**
+     * @docs-private
+     */
     ngOnInit() {
         this.writeValue(this._control.value);
         this._registry.add(this._control, this);
@@ -1278,90 +1454,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 }]
         }] });
 
-class DaffFormLabelDirective {
-    constructor() {
-        this.class = true;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffFormLabelDirective, isStandalone: false, selector: "[daffFormLabel]", host: { properties: { "class.daff-form-label": "this.class" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormLabelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[daffFormLabel]',
-                    standalone: false,
-                }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-form-label']
-            }] } });
-
-class DaffFormLabelModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffFormLabelModule, declarations: [DaffFormLabelDirective], exports: [DaffFormLabelDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormLabelModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffFormLabelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        DaffFormLabelDirective,
-                    ],
-                    declarations: [
-                        DaffFormLabelDirective,
-                    ],
-                }]
-        }] });
-
-/**
- *
- * Prefix can be used to place content before another piece of content in components like
- * `daff-form-field`, `daff-solo-field`, and `daff-list`.
- */
-class DaffPrefixDirective {
-    constructor() {
-        this.class = true;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffPrefixDirective, isStandalone: false, selector: "[daffPrefix]", host: { properties: { "class.daff-prefix": "this.class" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffPrefixDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[daffPrefix]',
-                    standalone: false,
-                }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-prefix']
-            }] } });
-
-/**
- *
- * Prefix can be used to place content after another piece of content in components like
- * `daff-form-field`, `daff-solo-field`, and `daff-list`.
- */
-class DaffSuffixDirective {
-    constructor() {
-        this.class = true;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffSuffixDirective, isStandalone: false, selector: "[daffSuffix]", host: { properties: { "class.daff-suffix": "this.class" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffSuffixDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[daffSuffix]',
-                    standalone: false,
-                }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-suffix']
-            }] } });
-
 class DaffPrefixSuffixModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffPrefixSuffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffPrefixSuffixModule, declarations: [DaffPrefixDirective,
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", 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 }); }
@@ -1369,58 +1464,17 @@ class DaffPrefixSuffixModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffPrefixSuffixModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [],
-                    exports: [
+                    imports: [
                         DaffPrefixDirective,
                         DaffSuffixDirective,
                     ],
-                    declarations: [
+                    exports: [
                         DaffPrefixDirective,
                         DaffSuffixDirective,
                     ],
                 }]
         }] });
 
-/**
- * A mixin for giving a component the ability to place content after another piece of content.
- */
-function daffSuffixableMixin(Base) {
-    class SuffixableDirective extends Base {
-        constructor(...args) {
-            super(...args);
-        }
-        /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: SuffixableDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-        /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: SuffixableDirective, isStandalone: true, queries: [{ propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
-    }
-    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: SuffixableDirective, decorators: [{
-                type: Directive
-            }], ctorParameters: () => [{ type: undefined }], propDecorators: { _suffix: [{
-                    type: ContentChild,
-                    args: [DaffSuffixDirective, { static: true }]
-                }] } });
-    return SuffixableDirective;
-}
-
-/**
- * A mixin for giving a component the ability to place content before another piece of content.
- */
-function daffPrefixableMixin(Base) {
-    class PrefixableDirective extends Base {
-        constructor(...args) {
-            super(...args);
-        }
-        /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PrefixableDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-        /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: PrefixableDirective, isStandalone: true, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
-    }
-    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: PrefixableDirective, decorators: [{
-                type: Directive
-            }], ctorParameters: () => [{ type: undefined }], propDecorators: { _prefix: [{
-                    type: ContentChild,
-                    args: [DaffPrefixDirective, { static: true }]
-                }] } });
-    return PrefixableDirective;
-}
-
 /**
  * Enumerates the available color palette options for a component.
  * These values can be used to apply specific color styles to components within the application.
@@ -1554,11 +1608,17 @@ class DaffColorableDirective {
             'daff-white': this.color === DaffPaletteEnum.White,
         };
     }
+    /**
+     * @docs-private
+     */
     ngOnChanges(changes) {
         if (!changes.color.currentValue) {
             this.color = this.defaultColor;
         }
     }
+    /**
+     * @docs-private
+     */
     ngOnInit() {
         validateColor(this.color);
         if (!this.color) {
@@ -1572,7 +1632,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             type: Directive,
             args: [{
                     selector: '[daffColorable]',
-                    standalone: true,
                 }]
         }], propDecorators: { class: [{
                 type: HostBinding,
@@ -1837,6 +1896,9 @@ class DaffTextAlignableDirective {
             'daff-right': this.textAlignment === DaffTextAlignmentEnum.Right,
         };
     }
+    /**
+     * @docs-private
+     */
     ngOnChanges(changes) {
         if (!changes.textAlignment?.currentValue) {
             this.textAlignment = this.defaultAlignment;
@@ -1982,6 +2044,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  */
 class DaffManageContainerLayoutDirective {
     constructor() {
+        /**
+         * @docs-private
+         */
         this.class = true;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffManageContainerLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -2024,6 +2089,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  */
 class DaffArticleEncapsulatedDirective {
     constructor() {
+        /**
+         * @docs-private
+         */
         this.class = true;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffArticleEncapsulatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -2071,7 +2139,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((e) => e.matches), map((prefersDark) => prefersDark ? DaffTheme.Dark : DaffTheme.Light))
+                .pipe(startWith(this.doc.defaultView?.matchMedia(mediaQueryDarkPreference)), map$1((e) => e.matches), map$1((prefersDark) => prefersDark ? DaffTheme.Dark : DaffTheme.Light))
             : of(DaffTheme.None);
     }
     /**
@@ -2114,7 +2182,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((e) => coerceValue(e.newValue)), shareReplay(1));
+            : of(storageEventBuilder(this.storage.getItem(THEME_STORAGE_KEY)))).pipe(filter((e) => e.key === THEME_STORAGE_KEY), map$1((e) => coerceValue(e.newValue)), shareReplay(1));
     }
     /**
      * Given that Safari doesn't respect in-tab storage events, we have to manually
@@ -2180,7 +2248,7 @@ class DaffThemingService {
         this.theme$ = combineLatest([
             this.osTheme.getThemePreference(),
             this.themeStorage.getThemeAsObservable(),
-        ]).pipe(map(([osPreference, storedPreference]) => daffComputeThemeSetting(osPreference, storedPreference)));
+        ]).pipe(map$1(([osPreference, storedPreference]) => daffComputeThemeSetting(osPreference, storedPreference)));
         this.theme$.subscribe((theme) => {
             this.theme = theme;
         });
@@ -2427,11 +2495,17 @@ class DaffSizableDirective {
             'daff-xl': this.size === DaffSizableEnum.XLarge,
         };
     }
+    /**
+     * @docs-private
+     */
     ngOnChanges(changes) {
         if (!changes.size?.currentValue) {
             this.size = this.defaultSize;
         }
     }
+    /**
+     * @docs-private
+     */
     ngOnInit() {
         if (!this.size) {
             this.size = this.defaultSize;
@@ -2546,6 +2620,9 @@ class DaffOpenableDirective {
         this._setOpen(state);
         this.toggled.emit(state);
     }
+    /**
+     * @docs-private
+     */
     ngOnChanges(changes) {
         /**
          * Throw an error if open is set in a component that is not stateless
@@ -2630,5 +2707,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffColorableDirective, DaffCompactableDirective, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFocusStackService, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffInputComponent, DaffInputModule, DaffManageContainerLayoutDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffOpenableDirective, DaffPrefixDirective, DaffPrefixSuffixModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector, daffPrefixableMixin, daffSuffixableMixin };
+export { DAFF_FORM_FIELD_COMPONENTS, DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffColorableDirective, DaffCompactableDirective, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFocusStackService, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffHintComponent, 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 };
 //# sourceMappingURL=daffodil-design.mjs.map