@daffodil/design 0.85.0 → 0.87.0

package/fesm2022/daffodil-design.mjs

@@ -1,8 +1,8 @@
 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 { NgTemplateOutlet, CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { BehaviorSubject, of, fromEventPattern, Subject, merge, fromEvent, EMPTY, combineLatest } from 'rxjs';
 import * as i1 from '@angular/forms';
-import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { startWith, map, catchError, filter, shareReplay } from 'rxjs/operators';
 import { DaffServerSafePersistenceServiceToken } from '@daffodil/core';
@@ -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,103 @@ 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']
+            }] } });
+
+class DaffFormFieldActionDirective {
+    constructor() {
+        /**
+         * @docs-private
+         */
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffFormFieldActionDirective, isStandalone: true, selector: "[daffFormFieldAction]", host: { properties: { "class.daff-form-field-action": "this.class" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffFormFieldActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffFormFieldAction]',
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-form-field-action']
+            }] } });
+
 /**
  *
  * The class that a form control must **implement** in order to be
@@ -143,6 +242,7 @@ class DaffFormFieldControl {
     ;
     constructor(ngControl) {
         this.ngControl = ngControl;
+        this.supportsAutoLabelling = true;
         this._stateChanges = new BehaviorSubject({
             focused: false,
             filled: false,
@@ -168,51 +268,111 @@ 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;
+var DaffFormFieldApperanaceEnum;
+(function (DaffFormFieldApperanaceEnum) {
+    DaffFormFieldApperanaceEnum["Fluid"] = "fluid";
+    DaffFormFieldApperanaceEnum["Fixed"] = "fixed";
+})(DaffFormFieldApperanaceEnum || (DaffFormFieldApperanaceEnum = {}));
 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;
+        this._appearance = DaffFormFieldApperanaceEnum.Fluid;
+        /**
+         * 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 hasPrefixClass() {
+        return this._prefix;
+    }
+    /**
+     * @docs-private
+     */
+    get hasSuffixClass() {
+        return this._suffix || this._action;
+    }
+    /**
+     * @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 +391,83 @@ class DaffFormFieldComponent {
         return this._control?.raised || this.isFilled;
     }
     /**
-     * Validate whether or not the FormField is in a "usable" state.
+     * The appearance style of a form field, whether the label is fluid or fixed.
+     */
+    get appearance() {
+        return this._appearance;
+    }
+    set appearance(value) {
+        if (value === null || value === undefined || value === '') {
+            this._appearance = DaffFormFieldApperanaceEnum.Fluid;
+        }
+        else {
+            this._appearance = value;
+        }
+    }
+    ;
+    /**
+     * @docs-private
+     */
+    get fluidClass() {
+        return this._appearance === DaffFormFieldApperanaceEnum.Fluid;
+    }
+    /**
+     * @docs-private
+     */
+    get fixedClass() {
+        return this._appearance === DaffFormFieldApperanaceEnum.Fixed;
+    }
+    /**
+     * @docs-private
+     */
+    get isFixed() {
+        return this._appearance === DaffFormFieldApperanaceEnum.Fixed;
+    }
+    /**
+     * @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.`);
+            }
+            if (this._suffix && this._action && !this.isFixed) {
+                console.warn(`UI consideration for form field with id "${this.id}":\n\n` + `In a fluid appearance, avoid using suffix alongside an action.`);
+            }
+            ;
+        }
+    }
+    /**
+     * Validates whether or not the form field is in a "usable" state.
      */
     _validateFormControl() {
         if (!this._control) {
@@ -239,11 +475,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,38 +492,61 @@ 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: { appearance: "appearance", id: "id" }, host: { properties: { "class.daff-form-field": "this.class", "class.has-prefix": "this.hasPrefixClass", "class.has-suffix": "this.hasSuffixClass", "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", "class.fluid": "this.fluidClass", "class.fixed": "this.fixedClass" } }, 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: "_action", first: true, predicate: DaffFormFieldActionDirective, 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: "<ng-content />\n\n@if (isFixed) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n}\n<div class=\"daff-form-field__wrapper\">\n\t<div class=\"daff-form-field__control\">\n\t\t@if (_prefix) {\n\t\t\t<ng-content select=\"[daffPrefix]\"></ng-content>\n\t\t}\n\t\t<div class=\"daff-form-field__inner\">\n\t\t\t@if (!isFixed) {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n\t\t\t}\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t\t@if (isSelectField) {\n\t\t\t<div class=\"daff-form-field__icon\"></div>\n\t\t}\n\t\t@if (_suffix) {\n\t\t\t<ng-content select=\"[daffSuffix]\"></ng-content>\n\t\t}\n\t\t@if (_action && !isFixed) {\n\t\t\t<ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n\t\t}\n\t</div>\n\t@if ((_action && isFixed)) {\n\t\t<ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\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}\n\n<ng-template #actionTemplate>\n\t<ng-content select=\"[daffFormFieldAction]\"></ng-content>\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (_formLabelDirective) {\n    <ng-content select=\"label[daffFormLabel]\"></ng-content>\n  } @else if(_formFieldLabelDirective) {\n    <label class=\"daff-form-field__label\"\n      [attr.for]=\"autoLabelId\"\n      [attr.id]=\"customId\">\n      <ng-content select=\"daff-form-label\"></ng-content>\n    </label>\n  } @else {\n    <ng-content select=\"label\"></ng-content>\n  }\n</ng-template>", styles: [".daff-form-field{display:flex;flex-direction:column;gap:.25rem;position:relative}.daff-form-field.has-prefix .daff-form-field__control{padding-left:0}.daff-form-field.has-suffix .daff-form-field__control{padding-right:0}.daff-form-field__hint-wrapper,.daff-form-field__error-wrapper{display:flex;flex-direction:column;gap:.25rem}.daff-form-field__wrapper{display:flex;gap:.25rem}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;font-size:1rem;line-height:1rem;padding:0 1rem;position:relative;width:100%}.daff-form-field__control+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field.fixed input,.daff-form-field.fixed textarea,.daff-form-field.fixed select{font-size:1rem;line-height:1.5rem;padding:calc(.75rem - 1px) 0}.daff-form-field.fixed input * ::-webkit-input-placeholder,.daff-form-field.fixed textarea * ::-webkit-input-placeholder,.daff-form-field.fixed select * ::-webkit-input-placeholder{opacity:1}.daff-form-field.fluid .daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field.fluid .daff-form-field-action{margin-right:.25rem}.daff-form-field.fluid input,.daff-form-field.fluid textarea,.daff-form-field.fluid select{font-size:1rem;line-height:1.5rem;padding:1rem 0}.daff-form-field.fluid label,.daff-form-field.fluid .daff-form-label,.daff-form-field.fluid .daff-form-field__label{position:absolute;left:0;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s;overflow:hidden;white-space:nowrap}.daff-form-field.fluid label+input,.daff-form-field.fluid label+textarea,.daff-form-field.fluid label+select,.daff-form-field.fluid .daff-form-label+input,.daff-form-field.fluid .daff-form-label+textarea,.daff-form-field.fluid .daff-form-label+select,.daff-form-field.fluid .daff-form-field__label+input,.daff-form-field.fluid .daff-form-field__label+textarea,.daff-form-field.fluid .daff-form-field__label+select{padding:calc(1.5rem - 1px) 0 calc(.5rem - 1px)}.daff-form-field.fluid.daff-raised label,.daff-form-field.fluid.daff-raised .daff-form-label,.daff-form-field.fluid.daff-raised .daff-form-field__label{transform:translateY(-75%) scale(.75)}.daff-form-field.fluid.daff-raised * ::-webkit-input-placeholder{opacity:1}.daff-form-field.fluid .daff-prefix,.daff-form-field.fluid .daff-suffix{height:3rem;min-width:3rem}.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__inner{flex-grow:1;position:relative;overflow:hidden}.daff-form-field .daff-prefix,.daff-form-field .daff-suffix{display:flex;align-items:center;justify-content:center;appearance:none;background:none;border:none;height:calc(3rem - 2px);min-width:calc(3rem - 2px)}.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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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,
-            args: [{ selector: 'daff-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+            args: [{ selector: 'daff-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                    ], hostDirectives: [
                         {
                             directive: DaffSkeletonableDirective,
                             inputs: ['skeleton'],
                         },
-                    ], template: "<div class=\"daff-form-field__control\">\n\t@if (_prefix) {\n\t\t<ng-content select=\"[daffPrefix]\"></ng-content>\n\t}\n\t<div class=\"daff-form-field__form-wrapper\">\n\t\t<ng-content select=\"label[daffFormLabel]\"></ng-content>\n\t\t<ng-content></ng-content>\n\t\t@if (isSelectField) {\n\t\t\t<div class=\"daff-form-field__icon\"></div>\n\t\t}\n\t</div>\n  @if (_suffix) {\n\t\t<ng-content select=\"[daffSuffix]\"></ng-content>\n\t}\n</div>\n<ng-content select=\"daff-hint\"></ng-content>\n<ng-content select=\"daff-error-message\"></ng-content>", styles: [".daff-form-field{display:block;position:relative}.daff-form-field .daff-hint,.daff-form-field .daff-error-message{margin-top:.25rem}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;font-size:1rem;line-height:1rem;position:relative;width:100%}.daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field__control input,.daff-form-field__control textarea,.daff-form-field__control select{font-size:1rem;line-height:1.5rem;padding:1rem}.daff-form-field__control .daff-form-label{position:absolute;left:1rem;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s}.daff-form-field__control .daff-form-label+input,.daff-form-field__control .daff-form-label+textarea,.daff-form-field__control .daff-form-label+select{padding:1.5rem 1rem .5rem}.daff-form-field__control+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field.daff-raised .daff-form-label{transform:translateY(-75%) scale(.75)}.daff-form-field.daff-raised * ::-webkit-input-placeholder{opacity:1}.daff-form-field.daff-disabled{cursor:not-allowed;opacity:.5}.daff-form-field__icon{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-form-field__form-wrapper{flex-grow:1;position:relative}.daff-form-field .daff-prefix{padding-left:1rem}.daff-form-field .daff-suffix{padding-right:1rem}.daff-form-field.daff-skeleton{display:flex;position:relative}.daff-form-field.daff-skeleton:before{animation-name:loading;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate;content:\"\";height:3.5rem;width:100%;position:absolute;top:0;left:0}@keyframes loading{0%{opacity:.5}to{opacity:1}}.daff-form-field.daff-skeleton>*{visibility:hidden}\n"] }]
+                    ], template: "<ng-content />\n\n@if (isFixed) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n}\n<div class=\"daff-form-field__wrapper\">\n\t<div class=\"daff-form-field__control\">\n\t\t@if (_prefix) {\n\t\t\t<ng-content select=\"[daffPrefix]\"></ng-content>\n\t\t}\n\t\t<div class=\"daff-form-field__inner\">\n\t\t\t@if (!isFixed) {\n\t\t\t\t<ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n\t\t\t}\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t\t@if (isSelectField) {\n\t\t\t<div class=\"daff-form-field__icon\"></div>\n\t\t}\n\t\t@if (_suffix) {\n\t\t\t<ng-content select=\"[daffSuffix]\"></ng-content>\n\t\t}\n\t\t@if (_action && !isFixed) {\n\t\t\t<ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n\t\t}\n\t</div>\n\t@if ((_action && isFixed)) {\n\t\t<ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\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}\n\n<ng-template #actionTemplate>\n\t<ng-content select=\"[daffFormFieldAction]\"></ng-content>\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (_formLabelDirective) {\n    <ng-content select=\"label[daffFormLabel]\"></ng-content>\n  } @else if(_formFieldLabelDirective) {\n    <label class=\"daff-form-field__label\"\n      [attr.for]=\"autoLabelId\"\n      [attr.id]=\"customId\">\n      <ng-content select=\"daff-form-label\"></ng-content>\n    </label>\n  } @else {\n    <ng-content select=\"label\"></ng-content>\n  }\n</ng-template>", styles: [".daff-form-field{display:flex;flex-direction:column;gap:.25rem;position:relative}.daff-form-field.has-prefix .daff-form-field__control{padding-left:0}.daff-form-field.has-suffix .daff-form-field__control{padding-right:0}.daff-form-field__hint-wrapper,.daff-form-field__error-wrapper{display:flex;flex-direction:column;gap:.25rem}.daff-form-field__wrapper{display:flex;gap:.25rem}.daff-form-field__control{display:flex;align-items:center;border-radius:.25rem;font-size:1rem;line-height:1rem;padding:0 1rem;position:relative;width:100%}.daff-form-field__control+.daff-hint,.daff-form-field__control+.daff-error-message{margin-top:.5rem}.daff-form-field.fixed input,.daff-form-field.fixed textarea,.daff-form-field.fixed select{font-size:1rem;line-height:1.5rem;padding:calc(.75rem - 1px) 0}.daff-form-field.fixed input * ::-webkit-input-placeholder,.daff-form-field.fixed textarea * ::-webkit-input-placeholder,.daff-form-field.fixed select * ::-webkit-input-placeholder{opacity:1}.daff-form-field.fluid .daff-form-field__control * ::-webkit-input-placeholder{opacity:0}.daff-form-field.fluid .daff-form-field-action{margin-right:.25rem}.daff-form-field.fluid input,.daff-form-field.fluid textarea,.daff-form-field.fluid select{font-size:1rem;line-height:1.5rem;padding:1rem 0}.daff-form-field.fluid label,.daff-form-field.fluid .daff-form-label,.daff-form-field.fluid .daff-form-field__label{position:absolute;left:0;top:1.25rem;pointer-events:none;transform-origin:left top;transition:transform .15s;overflow:hidden;white-space:nowrap}.daff-form-field.fluid label+input,.daff-form-field.fluid label+textarea,.daff-form-field.fluid label+select,.daff-form-field.fluid .daff-form-label+input,.daff-form-field.fluid .daff-form-label+textarea,.daff-form-field.fluid .daff-form-label+select,.daff-form-field.fluid .daff-form-field__label+input,.daff-form-field.fluid .daff-form-field__label+textarea,.daff-form-field.fluid .daff-form-field__label+select{padding:calc(1.5rem - 1px) 0 calc(.5rem - 1px)}.daff-form-field.fluid.daff-raised label,.daff-form-field.fluid.daff-raised .daff-form-label,.daff-form-field.fluid.daff-raised .daff-form-field__label{transform:translateY(-75%) scale(.75)}.daff-form-field.fluid.daff-raised * ::-webkit-input-placeholder{opacity:1}.daff-form-field.fluid .daff-prefix,.daff-form-field.fluid .daff-suffix{height:3rem;min-width:3rem}.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__inner{flex-grow:1;position:relative;overflow:hidden}.daff-form-field .daff-prefix,.daff-form-field .daff-suffix{display:flex;align-items:center;justify-content:center;appearance:none;background:none;border:none;height:calc(3rem - 2px);min-width:calc(3rem - 2px)}.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']
             }], _prefix: [{
                 type: ContentChild,
                 args: [DaffPrefixDirective]
+            }], hasPrefixClass: [{
+                type: HostBinding,
+                args: ['class.has-prefix']
             }], _suffix: [{
                 type: ContentChild,
                 args: [DaffSuffixDirective]
+            }], hasSuffixClass: [{
+                type: HostBinding,
+                args: ['class.has-suffix']
             }], _control: [{
                 type: ContentChild,
                 args: [DaffFormFieldControl]
+            }], _formLabelDirective: [{
+                type: ContentChild,
+                args: [DaffFormLabelDirective]
+            }], _formFieldLabelDirective: [{
+                type: ContentChild,
+                args: [DaffFormFieldLabelDirective]
+            }], _action: [{
+                type: ContentChild,
+                args: [DaffFormFieldActionDirective]
+            }], _hint: [{
+                type: ContentChild,
+                args: [DaffHintComponent]
+            }], _error: [{
+                type: ContentChild,
+                args: [DaffErrorMessageComponent]
             }], errorClass: [{
                 type: HostBinding,
                 args: ['class.daff-error']
@@ -303,24 +562,16 @@ 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: [{
+            }], appearance: [{
+                type: Input
+            }], fluidClass: [{
                 type: HostBinding,
-                args: ['class.daff-error-message']
+                args: ['class.fluid']
+            }], fixedClass: [{
+                type: HostBinding,
+                args: ['class.fixed']
+            }], id: [{
+                type: Input
             }] } });
 
 /**
@@ -343,26 +594,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 +644,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 +654,8 @@ const DAFF_FORM_FIELD_COMPONENTS = [
     DaffHintComponent,
     DaffPrefixDirective,
     DaffSuffixDirective,
+    DaffFormFieldLabelDirective,
+    DaffFormFieldActionDirective,
 ];
 
 class DaffNativeSelectComponent extends DaffFormFieldControl {
@@ -1221,8 +1427,10 @@ var DaffPaletteEnum;
 
 const colorInPalette = (color) => Object.values(DaffPaletteEnum).includes(color);
 const validateColor = (color) => {
-    if (color !== undefined && !colorInPalette(color)) {
-        console.warn(color + ' is not a valid color in DaffPalette');
+    if (isDevMode()) {
+        if (color !== undefined && !colorInPalette(color)) {
+            console.warn(color + ' is not a valid color in DaffPalette');
+        }
     }
 };
 /**
@@ -1396,6 +1604,15 @@ var DaffStatusEnum;
     DaffStatusEnum["Success"] = "success";
 })(DaffStatusEnum || (DaffStatusEnum = {}));
 
+const statusValues = (status) => Object.values(DaffStatusEnum).includes(status);
+const validateStatus = (status) => {
+    if (isDevMode()) {
+        if (status !== undefined && !statusValues(status)) {
+            console.warn(`'${status}' is not a valid value of the status property.\n\n` +
+                `The available values are: info, warn, critical, or success.`);
+        }
+    }
+};
 /**
  * `DaffStatusableDirective` allows a component to conditionally apply status-specific
  * styles by setting CSS classes based on the specified status. This directive is useful
@@ -1452,14 +1669,30 @@ class DaffStatusableDirective {
             'daff-success': this.status === DaffStatusEnum.Success,
         };
     }
+    /**
+     * @docs-private
+     */
+    ngOnChanges(changes) {
+        if (!changes.status.currentValue) {
+            this.status = this.defaultStatus;
+        }
+    }
+    /**
+     * @docs-private
+     */
+    ngOnInit() {
+        validateStatus(this.status);
+        if (this.status !== this.defaultStatus && this.defaultStatus) {
+            this.status = this.defaultStatus;
+        }
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffStatusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DaffStatusableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffStatusable]',
-                    standalone: true,
                 }]
         }], propDecorators: { class: [{
                 type: HostBinding,
@@ -1475,6 +1708,14 @@ var DaffTextAlignmentEnum;
     DaffTextAlignmentEnum["Right"] = "right";
 })(DaffTextAlignmentEnum || (DaffTextAlignmentEnum = {}));
 
+const textAlignmentValues = (textAlignment) => Object.values(DaffTextAlignmentEnum).includes(textAlignment);
+const validateTextAlignment = (textAlignment) => {
+    if (isDevMode()) {
+        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 +1781,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 +1797,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 +1851,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 +2464,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 +2543,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 +2597,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, DaffFormFieldActionDirective, 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