@daffodil/design 0.85.0 → 0.86.0

package/fesm2022/daffodil-design.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, Input, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule, HostListener, Optional, Self, EventEmitter, ElementRef, Output, ViewChild, ContentChildren, Injectable, InjectionToken, inject, PLATFORM_ID, Inject, makeEnvironmentProviders, provideAppInitializer, isDevMode } from '@angular/core';
+import { 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 { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
@@ -107,6 +107,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  */
 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 }); }
@@ -116,7 +119,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
             type: Directive,
             args: [{
                     selector: '[daffSkeletonable]',
-                    standalone: true,
                 }]
         }], propDecorators: { skeleton: [{
                 type: Input
@@ -125,6 +127,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 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
@@ -143,6 +222,7 @@ class DaffFormFieldControl {
     ;
     constructor(ngControl) {
         this.ngControl = ngControl;
+        this.supportsAutoLabelling = true;
         this._stateChanges = new BehaviorSubject({
             focused: false,
             filled: false,
@@ -168,51 +248,93 @@ 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() {
         return this._control.controlType === 'native-select';
     }
-    /**
-     * @docs-private
-     */
-    get errorClass() {
-        return this.isError;
-    }
-    /**
-     * @docs-private
-     */
-    get disabledClass() {
-        return this.isDisabled;
-    }
-    /**
-     * @docs-private
-     */
-    get validClass() {
-        return this.isValid;
-    }
     constructor(cd) {
         this.cd = cd;
         /** @docs-private */
         this.class = true;
         /**
+         * @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() {
@@ -231,7 +353,46 @@ class DaffFormFieldComponent {
         return this._control?.raised || this.isFilled;
     }
     /**
-     * Validate whether or not the FormField is in a "usable" state.
+     * @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) {
@@ -239,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();
@@ -256,17 +417,17 @@ 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.2.11", ngImport: i0, type: DaffFormFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: DaffFormFieldComponent, isStandalone: true, selector: "daff-form-field", host: { properties: { "class.daff-form-field": "this.class", "class.daff-error": "this.errorClass", "class.daff-disabled": "this.disabledClass", "class.daff-valid": "this.validClass", "class.daff-focused": "this.focusedClass", "class.daff-raised": "this.raisedClass" } }, queries: [{ propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }, { propertyName: "_suffix", first: true, predicate: DaffSuffixDirective, descendants: true }, { propertyName: "_control", first: true, predicate: DaffFormFieldControl, descendants: true }], hostDirectives: [{ directive: DaffSkeletonableDirective, inputs: ["skeleton", "skeleton"] }], ngImport: i0, template: "<div class=\"daff-form-field__control\">\n\t@if (_prefix) {\n\t\t<ng-content select=\"[daffPrefix]\"></ng-content>\n\t}\n\t<div class=\"daff-form-field__form-wrapper\">\n\t\t<ng-content select=\"label[daffFormLabel]\"></ng-content>\n\t\t<ng-content></ng-content>\n\t\t@if (isSelectField) {\n\t\t\t<div class=\"daff-form-field__icon\"></div>\n\t\t}\n\t</div>\n  @if (_suffix) {\n\t\t<ng-content select=\"[daffSuffix]\"></ng-content>\n\t}\n</div>\n<ng-content select=\"daff-hint\"></ng-content>\n<ng-content select=\"daff-error-message\"></ng-content>", styles: [".daff-form-field{display:block;position:relative}.daff-form-field .daff-hint,.daff-form-field .daff-error-message{margin-top:.25rem}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;font-size:1rem;line-height:1rem;position:relative;width:100%}.daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field__control input,.daff-form-field__control textarea,.daff-form-field__control select{font-size:1rem;line-height:1.5rem;padding:1rem}.daff-form-field__control .daff-form-label{position:absolute;left:1rem;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s}.daff-form-field__control .daff-form-label+input,.daff-form-field__control .daff-form-label+textarea,.daff-form-field__control .daff-form-label+select{padding:1.5rem 1rem .5rem}.daff-form-field__control+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field.daff-raised .daff-form-label{transform:translateY(-75%) scale(.75)}.daff-form-field.daff-raised * ::-webkit-input-placeholder{opacity:1}.daff-form-field.daff-disabled{cursor:not-allowed;opacity:.5}.daff-form-field__icon{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-form-field__form-wrapper{flex-grow:1;position:relative}.daff-form-field .daff-prefix{padding-left:1rem}.daff-form-field .daff-suffix{padding-right:1rem}.daff-form-field.daff-skeleton{display:flex;position:relative}.daff-form-field.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:3.5rem;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}.daff-form-field.daff-skeleton>*{visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @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.2.11", ngImport: i0, type: DaffFormFieldComponent, decorators: [{
             type: Component,
@@ -275,7 +436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                             directive: DaffSkeletonableDirective,
                             inputs: ['skeleton'],
                         },
-                    ], template: "<div class=\"daff-form-field__control\">\n\t@if (_prefix) {\n\t\t<ng-content select=\"[daffPrefix]\"></ng-content>\n\t}\n\t<div class=\"daff-form-field__form-wrapper\">\n\t\t<ng-content select=\"label[daffFormLabel]\"></ng-content>\n\t\t<ng-content></ng-content>\n\t\t@if (isSelectField) {\n\t\t\t<div class=\"daff-form-field__icon\"></div>\n\t\t}\n\t</div>\n  @if (_suffix) {\n\t\t<ng-content select=\"[daffSuffix]\"></ng-content>\n\t}\n</div>\n<ng-content select=\"daff-hint\"></ng-content>\n<ng-content select=\"daff-error-message\"></ng-content>", styles: [".daff-form-field{display:block;position:relative}.daff-form-field .daff-hint,.daff-form-field .daff-error-message{margin-top:.25rem}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;font-size:1rem;line-height:1rem;position:relative;width:100%}.daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field__control input,.daff-form-field__control textarea,.daff-form-field__control select{font-size:1rem;line-height:1.5rem;padding:1rem}.daff-form-field__control .daff-form-label{position:absolute;left:1rem;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s}.daff-form-field__control .daff-form-label+input,.daff-form-field__control .daff-form-label+textarea,.daff-form-field__control .daff-form-label+select{padding:1.5rem 1rem .5rem}.daff-form-field__control+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field.daff-raised .daff-form-label{transform:translateY(-75%) scale(.75)}.daff-form-field.daff-raised * ::-webkit-input-placeholder{opacity:1}.daff-form-field.daff-disabled{cursor:not-allowed;opacity:.5}.daff-form-field__icon{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-form-field__form-wrapper{flex-grow:1;position:relative}.daff-form-field .daff-prefix{padding-left:1rem}.daff-form-field .daff-suffix{padding-right:1rem}.daff-form-field.daff-skeleton{display:flex;position:relative}.daff-form-field.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:3.5rem;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}.daff-form-field.daff-skeleton>*{visibility:hidden}\n"] }]
+                    ], 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']
@@ -288,6 +449,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
             }], _control: [{
                 type: ContentChild,
                 args: [DaffFormFieldControl]
+            }], _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']
@@ -303,24 +476,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
             }], raisedClass: [{
                 type: HostBinding,
                 args: ['class.daff-raised']
-            }] } });
-
-class DaffErrorMessageComponent {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffErrorMessageComponent, isStandalone: true, selector: "daff-error-message", host: { properties: { "class.daff-error-message": "this.class" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;font-size:.875rem;line-height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.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']
+            }], id: [{
+                type: Input
             }] } });
 
 /**
@@ -343,26 +500,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 }]
         }] });
 
-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']
-            }] } });
-
 /**
  * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
  */
@@ -413,33 +550,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 }]
         }] });
 
-class DaffHintComponent {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-        /**
-         * Whether or not the hint has been validated
-         * */
-        this.validated = false;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DaffHintComponent, isStandalone: true, selector: "daff-hint", inputs: { validated: "validated" }, host: { properties: { "class.daff-hint": "this.class", "class.validated": "this.validated" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;gap:.25rem;font-size:.875rem;line-height:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffHintComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-hint', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:flex;gap:.25rem;font-size:.875rem;line-height:1rem}\n"] }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-hint']
-            }], validated: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.validated']
-            }] } });
-
 /**
  * @docs-private
  */
@@ -450,6 +560,7 @@ const DAFF_FORM_FIELD_COMPONENTS = [
     DaffHintComponent,
     DaffPrefixDirective,
     DaffSuffixDirective,
+    DaffFormFieldLabelDirective,
 ];
 
 class DaffNativeSelectComponent extends DaffFormFieldControl {
@@ -1475,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
@@ -1540,6 +1657,15 @@ class DaffTextAlignableDirective {
             this.textAlignment = this.defaultAlignment;
         }
     }
+    /**
+     * @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 }); }
 }
@@ -1547,7 +1673,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
             type: Directive,
             args: [{
                     selector: '[daffTextAlignable]',
-                    standalone: true,
                 }]
         }], propDecorators: { class: [{
                 type: HostBinding,
@@ -1602,6 +1727,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  */
 class DaffCompactableDirective {
     constructor() {
+        /**
+         * Controls whether the component is compact.
+         */
         this.compact = false;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffCompactableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -2212,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
          *
@@ -2291,7 +2419,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
 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.
@@ -2343,5 +2473,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  * 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, 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 };
+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