@daffodil/design 0.89.0 → 0.91.0

package/fesm2022/daffodil-design.mjs

@@ -1,630 +1,11 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, HostBinding, Output, Input, ViewChild, ChangeDetectionStrategy, Component, Optional, Self, Directive, ContentChildren, NgModule, Injectable, isDevMode, InjectionToken, inject, PLATFORM_ID, DOCUMENT, Inject, makeEnvironmentProviders, provideAppInitializer, afterNextRender } from '@angular/core';
-import * as i1 from '@angular/forms';
+import { HostBinding, Directive, NgModule, isDevMode, Input, Injectable, InjectionToken, inject, PLATFORM_ID, DOCUMENT, Inject, makeEnvironmentProviders, provideAppInitializer, EventEmitter, Output, afterNextRender } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { isPlatformBrowser } from '@angular/common';
 import { of, fromEventPattern, Subject, merge, fromEvent, EMPTY, combineLatest } from 'rxjs';
 import { startWith, map, catchError, filter, shareReplay } from 'rxjs/operators';
 import { DaffServerSafePersistenceServiceToken } from '@daffodil/core';
 
-class DaffErrorStateMatcher {
-    isErrorState(control, formSubmitted) {
-        return control.errors && (control.touched || formSubmitted);
-    }
-}
-
-let checkboxIdNum = 0;
-class DaffCheckboxComponent {
-    get checked() {
-        return this._checked;
-    }
-    set checked(value) {
-        if (this._checked === value) {
-            return;
-        }
-        if (value === true) {
-            this.nativeCheckbox.nativeElement.checked = true;
-            this.becameChecked.emit(this._checked);
-        }
-        else {
-            this.nativeCheckbox.nativeElement.checked = false;
-            this.becameUnchecked.emit();
-        }
-        this._checked = value;
-    }
-    /**
-     * @docs-private
-     */
-    _onChange(val) {
-        if (val.target.checked) {
-            this.select();
-        }
-        else {
-            this.deselect();
-        }
-    }
-    ;
-    /**
-     * @docs-private
-     */
-    get focusClass() {
-        return this.focused === true;
-    }
-    ;
-    /**
-     * @docs-private
-     */
-    get disabledClass() {
-        return this.disabled === true;
-    }
-    ;
-    /**
-     * Sets focused to false.
-     */
-    onBlur() {
-        this.focused = false;
-    }
-    /**
-     * Sets focused to true.
-     */
-    onFocus() {
-        this.focused = true;
-    }
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-        /**
-         * Boolean value to determine whether or not the checkbox is checked.
-         */
-        this._checked = false;
-        /**
-         * The id of the checkbox. Must be unique. If not entered by a user then it is generated.
-         */
-        this.id = 'daff-checkbox-' + checkboxIdNum;
-        /**
-         * The aria-label of the checkbox.
-         */
-        // eslint-disable-next-line @angular-eslint/no-input-rename
-        this.label = '';
-        /**
-         * Event on whether or not the selection has changed.
-         */
-        this.becameChecked = new EventEmitter();
-        this.becameUnchecked = new EventEmitter();
-        /**
-         * The role of the component. Set to "checkbox".
-         *
-         * @docs-private
-         */
-        this.role = 'checkbox';
-        /**
-         * Increments id number on new checkbox. Gurantees unique ID on generation.
-         */
-        checkboxIdNum++;
-    }
-    /**
-     * Sets checked to true.
-     */
-    select() {
-        this.checked = true;
-        this._cdRef.markForCheck();
-    }
-    /**
-     * Sets checked to false
-     */
-    deselect() {
-        this.checked = false;
-        this._cdRef.markForCheck();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffCheckboxComponent, isStandalone: false, selector: "daff-checkbox", inputs: { name: "name", value: "value", checked: "checked", id: "id", label: ["aria-label", "label"], labeledBy: ["aria-labelledby", "labeledBy"] }, outputs: { becameChecked: "becameChecked", becameUnchecked: "becameUnchecked" }, host: { properties: { "attr.role": "this.role", "class.focused": "this.focusClass", "class.disabled": "this.disabledClass" } }, viewQueries: [{ propertyName: "nativeCheckbox", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<input #inputElement\ntype=\"checkbox\"\n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labeledBy\"\n[attr.checked]=\"checked ? '' : null\"\n[attr.id] = \"id\"\n[attr.value]=\"value\"\n[attr.name]=\"name\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"_onChange($event)\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"\n/>\n<label [attr.for]=\"id\"><ng-content></ng-content></label>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<input #inputElement\ntype=\"checkbox\"\n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labeledBy\"\n[attr.checked]=\"checked ? '' : null\"\n[attr.id] = \"id\"\n[attr.value]=\"value\"\n[attr.name]=\"name\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"_onChange($event)\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"\n/>\n<label [attr.for]=\"id\"><ng-content></ng-content></label>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { nativeCheckbox: [{
-                type: ViewChild,
-                args: ['inputElement', { static: true, read: ElementRef }]
-            }], name: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], label: [{
-                type: Input,
-                args: ['aria-label']
-            }], labeledBy: [{
-                type: Input,
-                args: ['aria-labelledby']
-            }], becameChecked: [{
-                type: Output
-            }], becameUnchecked: [{
-                type: Output
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], focusClass: [{
-                type: HostBinding,
-                args: ['class.focused']
-            }], disabledClass: [{
-                type: HostBinding,
-                args: ['class.disabled']
-            }] } });
-
-/**
- * A directive for binding the DaffCheckboxComponent and the Control Value Accessor.
- */
-class DaffCheckboxControlValueAccessorDirective {
-    constructor(_control, _checkbox) {
-        this._control = _control;
-        this._checkbox = _checkbox;
-        if (this._control != null) {
-            this._control.valueAccessor = this;
-        }
-    }
-    /**
-     * A lifecycle method called when the directive is initialized.
-     */
-    /**
-     * @docs-private
-     */
-    ngOnInit() {
-        // See the note about `writeValue` usage.
-        this.writeValue(this._control.value);
-        // Watch for user events on the component to update the state
-        this._checkbox.becameChecked.subscribe(() => {
-            this._onChange(true);
-        });
-        this._checkbox.becameUnchecked.subscribe(() => {
-            this._onChange(false);
-        });
-    }
-    /**
-     * writes a new value down into the component.
-     */
-    writeValue(value) {
-        value = !!value;
-        if (value === true) {
-            this.fireSelect();
-        }
-        else {
-            this.fireDeselect();
-        }
-    }
-    /**
-     * Registers the change handler
-     */
-    registerOnChange(fn) {
-        this._onChange = (val) => {
-            fn(val);
-        };
-    }
-    /**
-     * Registers the touched handler
-     */
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    /**
-     * Sets the disabled state.
-     */
-    setDisabledState(isDisabled) {
-        this._checkbox.disabled = isDisabled;
-    }
-    /**
-     * calls the child checkbox's select function
-     */
-    fireSelect() {
-        this._checkbox.select();
-    }
-    /**
-     * calls the child checkbox's deselect function
-     */
-    fireDeselect() {
-        this._checkbox.deselect();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxControlValueAccessorDirective, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DaffCheckboxComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffCheckboxControlValueAccessorDirective, isStandalone: false, selector: "daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]", inputs: { value: "value", name: "name" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxControlValueAccessorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]',
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: DaffCheckboxComponent }], propDecorators: { value: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }] } });
-
-class DaffCheckboxSetComponent {
-    constructor() {
-        /**
-         * The role of the component. Set to "checkbox".
-         *
-         * @docs-private
-         */
-        this.role = 'group';
-        this.valueList = new EventEmitter();
-    }
-    getValues() {
-        const checkboxes = this.checkboxes.toArray();
-        return this.formArray.value.map((element, index) => element === true ? checkboxes[index].value : false).filter(element => element !== false);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffCheckboxSetComponent, isStandalone: false, selector: "daff-checkbox-set", inputs: { formArray: "formArray", name: "name" }, outputs: { valueList: "valueList" }, host: { properties: { "attr.role": "this.role" } }, queries: [{ propertyName: "checkboxes", predicate: DaffCheckboxComponent }], ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxSetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-checkbox-set', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>" }]
-        }], propDecorators: { formArray: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], checkboxes: [{
-                type: ContentChildren,
-                args: [DaffCheckboxComponent]
-            }], valueList: [{
-                type: Output
-            }] } });
-
-class DaffCheckboxModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxModule, declarations: [DaffCheckboxComponent,
-            DaffCheckboxSetComponent,
-            DaffCheckboxControlValueAccessorDirective], imports: [CommonModule], exports: [DaffCheckboxComponent,
-            DaffCheckboxSetComponent,
-            DaffCheckboxControlValueAccessorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxModule, providers: [
-            DaffCheckboxSetComponent,
-        ], imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCheckboxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        DaffCheckboxComponent,
-                        DaffCheckboxSetComponent,
-                        DaffCheckboxControlValueAccessorDirective,
-                    ],
-                    declarations: [
-                        DaffCheckboxComponent,
-                        DaffCheckboxSetComponent,
-                        DaffCheckboxControlValueAccessorDirective,
-                    ],
-                    imports: [
-                        CommonModule,
-                    ],
-                    providers: [
-                        DaffCheckboxSetComponent,
-                    ],
-                }]
-        }] });
-
-class DaffRadioSetComponent {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.role = 'radiogroup';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffRadioSetComponent, isStandalone: false, selector: "daff-radio-set", inputs: { name: "name" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0, template: "<ng-content></ng-content>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioSetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-radio-set', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>" }]
-        }], ctorParameters: () => [], propDecorators: { name: [{
-                type: Input
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }] } });
-
-let radioUniqueId = 0;
-class DaffRadioComponent {
-    /**
-     * @docs-private
-     */
-    get focusClass() {
-        return this.focused === true;
-    }
-    ;
-    /**
-     * @docs-private
-     */
-    get disabledClass() {
-        return this.disabled === true;
-    }
-    ;
-    /**
-     * The checked property of the radio
-     */
-    get checked() {
-        return this._checked;
-    }
-    set checked(value) {
-        if (this._checked !== value) {
-            this._checked = value;
-            this.selectionChange.emit(this.value);
-        }
-    }
-    constructor(radioset) {
-        this.radioset = radioset;
-        /**
-         * @docs-private
-         */
-        this.role = 'radio';
-        /**
-         * @docs-private
-         */
-        this._checked = false;
-        /**
-         * Output event of selection being changed
-         */
-        this.selectionChange = new EventEmitter();
-        /**
-         * The id of the radio. It is uniquely generated but can be overwritten by the user. Must be unique.
-         */
-        this.id = 'daff-radio-' + radioUniqueId;
-        /**
-         * Name of the Radio
-         */
-        this.name = '';
-        /**
-         * Used for aria-label. Default to name if user does not input a label.
-         */
-        // eslint-disable-next-line @angular-eslint/no-input-rename
-        this.label = this.name;
-        this.disabled = false;
-        this.focused = false;
-        radioUniqueId++;
-    }
-    /**
-     * @docs-private
-     */
-    ngOnInit() {
-        this.name = this.radioset ? this.radioset.name : this.name;
-    }
-    /**
-     * updates Focus styling
-     */
-    onFocus() {
-        this.focused = true;
-    }
-    /**
-     * updates Blur styling
-     */
-    onBlur() {
-        this.focused = false;
-    }
-    /**
-     * toggles checked attribute on
-     */
-    select() {
-        this.checked = true;
-    }
-    /**
-     * toggles checked attribute off
-     */
-    deselect() {
-        this.checked = false;
-    }
-    onChange() {
-        this.select();
-    }
-    ;
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioComponent, deps: [{ token: DaffRadioSetComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffRadioComponent, isStandalone: false, selector: "daff-radio", inputs: { checked: "checked", value: "value", id: "id", name: "name", label: ["aria-label", "label"], labelledby: ["aria-labelledby", "labelledby"] }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "attr.role": "this.role", "class.focused": "this.focusClass", "class.disabled": "this.disabledClass" } }, ngImport: i0, template: "<input type=\"radio\" \n[attr.checked]=\"checked ? '' : null\" \n[attr.id]=\"id\" \n[attr.name]=\"name\" \n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labelledby\"\n[attr.value]=\"value\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"onChange()\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"/>\n<label [attr.for]=\"id\">\n  <ng-content></ng-content>\n</label>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'daff-radio', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<input type=\"radio\" \n[attr.checked]=\"checked ? '' : null\" \n[attr.id]=\"id\" \n[attr.name]=\"name\" \n[attr.aria-label]=\"label\"\n[attr.aria-labelledby]=\"labelledby\"\n[attr.value]=\"value\"\n[attr.disabled] = \"disabled ? '' : null\" \n(change)=\"onChange()\"\n(blur)=\"onBlur()\"\n(focus)=\"onFocus()\"/>\n<label [attr.for]=\"id\">\n  <ng-content></ng-content>\n</label>" }]
-        }], ctorParameters: () => [{ type: DaffRadioSetComponent, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], focusClass: [{
-                type: HostBinding,
-                args: ['class.focused']
-            }], disabledClass: [{
-                type: HostBinding,
-                args: ['class.disabled']
-            }], selectionChange: [{
-                type: Output
-            }], checked: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], label: [{
-                type: Input,
-                args: ['aria-label']
-            }], labelledby: [{
-                type: Input,
-                args: ['aria-labelledby']
-            }] } });
-
-class DaffRadioRegistry {
-    constructor() {
-        this._accessors = [];
-    }
-    /**
-     * @description
-     * Adds a control to the internal registry.
-     */
-    add(control, accessor) {
-        this._accessors.push({
-            control,
-            accessor,
-        });
-    }
-    /**
-     * @description
-     * Removes a control from the internal registry.
-     */
-    remove(accessor) {
-        for (let i = this._accessors.length - 1; i >= 0; --i) {
-            if (this._accessors[i].accessor === accessor) {
-                this._accessors.splice(i, 1);
-                return;
-            }
-        }
-    }
-    /**
-     * @description
-     * Selects a radio button.
-     */
-    select(accessor) {
-        this._accessors.forEach((c) => {
-            if (this._isSameGroup(c, accessor) && c.accessor !== accessor) {
-                c.accessor.fireDeselect();
-            }
-        });
-    }
-    _isSameGroup(controlPair, accessor) {
-        if (!controlPair.control.control) {
-            return false;
-        }
-        return controlPair.control.control.parent === accessor._control.control.parent
-            && controlPair.accessor.name === accessor.name;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioRegistry, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioRegistry, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-/**
- * ControlValueAccessor functionality for the DaffRadio
- */
-class DaffRadioControlValueAccessorDirective {
-    constructor(_control, _registry, _radio) {
-        this._control = _control;
-        this._registry = _registry;
-        this._radio = _radio;
-        if (this._control != null) {
-            this._control.valueAccessor = this;
-        }
-    }
-    /**
-     * @docs-private
-     */
-    ngOnInit() {
-        this.writeValue(this._control.value);
-        this._registry.add(this._control, this);
-        this._radio.selectionChange.subscribe(value => value ? this._onChange() : null);
-    }
-    /**
-     *
-     * writeValue function from the CVA interface
-     */
-    writeValue(value) {
-        // the this._onChange null check here is necessary because of an ongoing bug in angular forms
-        // where writeValue can be called before the component initializes: https://github.com/angular/angular/issues/29218
-        if (this.value === value && this._onChange) {
-            this._onChange();
-            this.fireSelect();
-        }
-    }
-    /**
-     * registerOnChange implemented from the CVA interface
-     */
-    registerOnChange(fn) {
-        this._onChange = () => {
-            fn(this.value);
-            this._registry.select(this);
-        };
-    }
-    /**
-     * registerOnTouch implemented from the CVA interface
-     */
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    /**
-     * sets the disabled state.
-     */
-    setDisabledState(isDisabled) {
-        this._radio.disabled = isDisabled;
-    }
-    /**
-      calls select function for the radio
-     */
-    fireSelect() {
-        this._radio.select();
-    }
-    /**
-      calls deselect function for the radio
-     */
-    fireDeselect() {
-        this._radio.deselect();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioControlValueAccessorDirective, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DaffRadioRegistry }, { token: DaffRadioComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffRadioControlValueAccessorDirective, isStandalone: false, selector: "daff-radio[ngModel], daff-radio[formControl], daff-radio[formControlName]", inputs: { value: "value", name: "name" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioControlValueAccessorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'daff-radio[ngModel], daff-radio[formControl], daff-radio[formControlName]',
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: DaffRadioRegistry }, { type: DaffRadioComponent }], propDecorators: { value: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }] } });
-
-class DaffRadioModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioModule, declarations: [DaffRadioControlValueAccessorDirective,
-            DaffRadioComponent,
-            DaffRadioSetComponent], imports: [CommonModule], exports: [DaffRadioComponent,
-            DaffRadioSetComponent,
-            DaffRadioControlValueAccessorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffRadioModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        DaffRadioComponent,
-                        DaffRadioSetComponent,
-                        DaffRadioControlValueAccessorDirective,
-                    ],
-                    declarations: [
-                        DaffRadioControlValueAccessorDirective,
-                        DaffRadioComponent,
-                        DaffRadioSetComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                    ],
-                }]
-        }] });
-
 /**
  * @deprecated in favor of the {@link DaffFormFieldLabelDirective}. Deprecated in version 0.86.0. Will be removed in version 1.0.0.
  */
@@ -669,55 +50,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
         }] });
 
 /**
- *
- * Prefix can be used to place content before another piece of content in components like
- * `daff-form-field`, `daff-solo-field`, and `daff-list`.
+ * DaffPrefixDirective can be used to place content before another piece of content
+ * in components like `DaffFormFieldComponent` or `DaffListComponent`.
  */
 class DaffPrefixDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffPrefixDirective, isStandalone: true, selector: "[daffPrefix]", host: { properties: { "class.daff-prefix": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffPrefixDirective, isStandalone: true, selector: "[daffPrefix]", host: { classAttribute: "daff-prefix" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffPrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffPrefix]',
+                    host: {
+                        class: 'daff-prefix',
+                    },
                 }]
-        }], 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`.
+ * DaffSuffixDirective can be used to place content after another piece of content
+ * in components like `DaffFormFieldComponent` or `DaffListComponent`.
  */
 class DaffSuffixDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffSuffixDirective, isStandalone: true, selector: "[daffSuffix]", host: { properties: { "class.daff-suffix": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffSuffixDirective, isStandalone: true, selector: "[daffSuffix]", host: { classAttribute: "daff-suffix" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSuffixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSuffix]',
+                    host: {
+                        class: 'daff-suffix',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-suffix']
-            }] } });
+        }] });
 
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.91.0. Will be removed in version 1.0.0.
+ */
 class DaffPrefixSuffixModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffPrefixSuffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: DaffPrefixSuffixModule, imports: [DaffPrefixDirective,
@@ -739,6 +109,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 }]
         }] });
 
+const DAFF_PREFIX_SUFFIX_DIRECTIVES = [
+    DaffPrefixDirective,
+    DaffSuffixDirective,
+];
+
 /**
  * Enumerates the available color palette options for a component.
  * These values can be used to apply specific color styles to components within the application.
@@ -857,23 +232,6 @@ const validateColor = (color) => {
  * ```
  */
 class DaffColorableDirective {
-    /**
-     * Dynamically sets the CSS classes based on the color.
-     * @docs-private
-     */
-    get class() {
-        return {
-            'daff-primary': this.color === DaffPaletteEnum.Primary,
-            'daff-secondary': this.color === DaffPaletteEnum.Secondary,
-            'daff-tertiary': this.color === DaffPaletteEnum.Tertiary,
-            'daff-light': this.color === DaffPaletteEnum.Light,
-            'daff-dark': this.color === DaffPaletteEnum.Dark,
-            'daff-theme': this.color === DaffPaletteEnum.Theme,
-            'daff-theme-contrast': this.color === DaffPaletteEnum.ThemeContrast,
-            'daff-black': this.color === DaffPaletteEnum.Black,
-            'daff-white': this.color === DaffPaletteEnum.White,
-        };
-    }
     /**
      * @docs-private
      */
@@ -892,17 +250,25 @@ class DaffColorableDirective {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffColorableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffColorableDirective, isStandalone: true, selector: "[daffColorable]", inputs: { color: "color" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffColorableDirective, isStandalone: true, selector: "[daffColorable]", inputs: { color: "color" }, host: { properties: { "class.daff-primary": "color === \"primary\"", "class.daff-secondary": "color === \"secondary\"", "class.daff-tertiary": "color === \"tertiary\"", "class.daff-light": "color === \"light\"", "class.daff-dark": "color === \"dark\"", "class.daff-theme": "color === \"theme\"", "class.daff-theme-contrast": "color === \"theme-contrast\"", "class.daff-black": "color === \"black\"", "class.daff-white": "color === \"white\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffColorableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffColorable]',
+                    host: {
+                        '[class.daff-primary]': 'color === "primary"',
+                        '[class.daff-secondary]': 'color === "secondary"',
+                        '[class.daff-tertiary]': 'color === "tertiary"',
+                        '[class.daff-light]': 'color === "light"',
+                        '[class.daff-dark]': 'color === "dark"',
+                        '[class.daff-theme]': 'color === "theme"',
+                        '[class.daff-theme-contrast]': 'color === "theme-contrast"',
+                        '[class.daff-black]': 'color === "black"',
+                        '[class.daff-white]': 'color === "white"',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], color: [{
+        }], propDecorators: { color: [{
                 type: Input
             }] } });
 
@@ -988,7 +354,6 @@ const validateStatus = (status) => {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -1017,18 +382,6 @@ const validateStatus = (status) => {
  * - `daff-success`: Applied when the status is `success`.
  */
 class DaffStatusableDirective {
-    /**
-     * Dynamically sets the CSS classes based on the status.
-     * @docs-private
-     */
-    get class() {
-        return {
-            'daff-info': this.status === DaffStatusEnum.Info,
-            'daff-warn': this.status === DaffStatusEnum.Warn,
-            'daff-critical': this.status === DaffStatusEnum.Critical,
-            'daff-success': this.status === DaffStatusEnum.Success,
-        };
-    }
     /**
      * @docs-private
      */
@@ -1042,22 +395,25 @@ class DaffStatusableDirective {
      */
     ngOnInit() {
         validateStatus(this.status);
-        if (this.status !== this.defaultStatus && this.defaultStatus) {
+        if (this.defaultStatus && !this.status) {
             this.status = this.defaultStatus;
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffStatusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class.daff-info": "status === \"info\"", "class.daff-warn": "status === \"warn\"", "class.daff-critical": "status === \"critical\"", "class.daff-success": "status === \"success\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffStatusableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffStatusable]',
+                    host: {
+                        '[class.daff-info]': 'status === "info"',
+                        '[class.daff-warn]': 'status === "warn"',
+                        '[class.daff-critical]': 'status === "critical"',
+                        '[class.daff-success]': 'status === "success"',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], status: [{
+        }], propDecorators: { status: [{
                 type: Input
             }] } });
 
@@ -1079,7 +435,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -1111,18 +466,18 @@ class DaffSkeletonableDirective {
         this.skeleton = false;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSkeletonableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffSkeletonableDirective, isStandalone: true, selector: "[daffSkeletonable]", inputs: { skeleton: "skeleton" }, host: { properties: { "class.daff-skeleton": "this.skeleton" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffSkeletonableDirective, isStandalone: true, selector: "[daffSkeletonable]", inputs: { skeleton: "skeleton" }, host: { properties: { "class.daff-skeleton": "skeleton" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSkeletonableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSkeletonable]',
+                    host: {
+                        '[class.daff-skeleton]': 'skeleton',
+                    },
                 }]
         }], propDecorators: { skeleton: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.daff-skeleton']
             }] } });
 
 var DaffTextAlignmentEnum;
@@ -1165,7 +520,6 @@ const validateTextAlignment = (textAlignment) => {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -1187,16 +541,6 @@ const validateTextAlignment = (textAlignment) => {
  * ```
  */
 class DaffTextAlignableDirective {
-    /**
-     * @docs-private
-     */
-    get class() {
-        return {
-            'daff-left': this.textAlignment === DaffTextAlignmentEnum.Left,
-            'daff-center': this.textAlignment === DaffTextAlignmentEnum.Center,
-            'daff-right': this.textAlignment === DaffTextAlignmentEnum.Right,
-        };
-    }
     /**
      * @docs-private
      */
@@ -1215,17 +559,19 @@ class DaffTextAlignableDirective {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTextAlignableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffTextAlignableDirective, isStandalone: true, selector: "[daffTextAlignable]", inputs: { textAlignment: "textAlignment" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffTextAlignableDirective, isStandalone: true, selector: "[daffTextAlignable]", inputs: { textAlignment: "textAlignment" }, host: { properties: { "class.daff-left": "textAlignment === \"left\"", "class.daff-center": "textAlignment === \"center\"", "class.daff-right": "textAlignment === \"right\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffTextAlignableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffTextAlignable]',
+                    host: {
+                        '[class.daff-left]': 'textAlignment === "left"',
+                        '[class.daff-center]': 'textAlignment === "center"',
+                        '[class.daff-right]': 'textAlignment === "right"',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], textAlignment: [{
+        }], propDecorators: { textAlignment: [{
                 type: Input
             }] } });
 
@@ -1247,7 +593,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -1281,19 +626,18 @@ class DaffCompactableDirective {
         this.compact = false;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCompactableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffCompactableDirective, isStandalone: true, selector: "[daffCompactable]", inputs: { compact: "compact" }, host: { properties: { "class.daff-compact": "this.compact" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffCompactableDirective, isStandalone: true, selector: "[daffCompactable]", inputs: { compact: "compact" }, host: { properties: { "class.daff-compact": "compact" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffCompactableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffCompactable]',
-                    standalone: true,
+                    host: {
+                        '[class.daff-compact]': 'compact',
+                    },
                 }]
         }], propDecorators: { compact: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.daff-compact']
             }] } });
 
 /**
@@ -1338,7 +682,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'my-custom-component',
  *  template: 'my-custom-component.html',
  *  hostDirectives: [{ directive: DaffManageContainerLayoutDirective }],
@@ -1355,25 +698,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * This directive will apply the `daff-manage-container-layout` class to your component, ensuring that the styles set on `:host` are passed down to the container.
  */
 class DaffManageContainerLayoutDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffManageContainerLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffManageContainerLayoutDirective, isStandalone: true, selector: "[daffManageContainerLayout]", host: { properties: { "class.daff-manage-container-layout": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffManageContainerLayoutDirective, isStandalone: true, selector: "[daffManageContainerLayout]", host: { classAttribute: "daff-manage-container-layout" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffManageContainerLayoutDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffManageContainerLayout]',
-                    standalone: true,
+                    host: {
+                        class: 'daff-manage-container-layout',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-manage-container-layout']
-            }] } });
+        }] });
 
 /**
  * `DaffArticleEncapsulatedDirective` is used to encapsulate custom components within an article,
@@ -1389,7 +725,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [{ directive: DaffArticleEncapsulatedDirective }],
@@ -1400,25 +735,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * This directive will apply the `daff-ae` class to the component, ensuring that it is encapsulated from the article's styles.
  */
 class DaffArticleEncapsulatedDirective {
-    constructor() {
-        /**
-         * @docs-private
-         */
-        this.class = true;
-    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffArticleEncapsulatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffArticleEncapsulatedDirective, isStandalone: true, selector: "[daffArticleEncapsulated]", host: { properties: { "class.daff-ae": "this.class" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffArticleEncapsulatedDirective, isStandalone: true, selector: "[daffArticleEncapsulated]", host: { classAttribute: "daff-ae" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffArticleEncapsulatedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffArticleEncapsulated]',
-                    standalone: true,
+                    host: {
+                        class: 'daff-ae',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class.daff-ae']
-            }] } });
+        }] });
 
 /**
  * The possible states of a theme.
@@ -1794,19 +1122,6 @@ var DaffSizableEnum;
  * - `daff-xl`: Applied when the size is `xl`.
  */
 class DaffSizableDirective {
-    /**
-     * Dynamically sets the CSS classes based on the size.
-     * @docs-private
-     */
-    get class() {
-        return {
-            'daff-xs': this.size === DaffSizableEnum.XSmall,
-            'daff-sm': this.size === DaffSizableEnum.Small,
-            'daff-md': this.size === DaffSizableEnum.Medium,
-            'daff-lg': this.size === DaffSizableEnum.Large,
-            'daff-xl': this.size === DaffSizableEnum.XLarge,
-        };
-    }
     /**
      * @docs-private
      */
@@ -1824,18 +1139,21 @@ class DaffSizableDirective {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffSizableDirective, isStandalone: true, selector: "[daffSizable]", inputs: { size: "size" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffSizableDirective, isStandalone: true, selector: "[daffSizable]", inputs: { size: "size" }, host: { properties: { "class.daff-xs": "size === \"xs\"", "class.daff-sm": "size === \"sm\"", "class.daff-md": "size === \"md\"", "class.daff-lg": "size === \"lg\"", "class.daff-xl": "size === \"xl\"" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSizableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSizable]',
-                    standalone: true,
+                    host: {
+                        '[class.daff-xs]': 'size === "xs"',
+                        '[class.daff-sm]': 'size === "sm"',
+                        '[class.daff-md]': 'size === "md"',
+                        '[class.daff-lg]': 'size === "lg"',
+                        '[class.daff-xl]': 'size === "xl"',
+                    },
                 }]
-        }], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], size: [{
+        }], propDecorators: { size: [{
                 type: Input
             }] } });
 
@@ -1947,23 +1265,109 @@ class DaffOpenableDirective {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffOpenableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffOpenableDirective, isStandalone: true, selector: "[daffOpenable]", inputs: { open: "open" }, outputs: { toggled: "toggled" }, host: { properties: { "class.daff-open": "this.open" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffOpenableDirective, isStandalone: true, selector: "[daffOpenable]", inputs: { open: "open" }, outputs: { toggled: "toggled" }, host: { properties: { "class.daff-open": "open" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffOpenableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffOpenable]',
-                    standalone: true,
+                    host: {
+                        '[class.daff-open]': 'open',
+                    },
                 }]
         }], propDecorators: { open: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.daff-open']
             }], toggled: [{
                 type: Output
             }] } });
 
+var DaffOrientationEnum;
+(function (DaffOrientationEnum) {
+    DaffOrientationEnum["Horizontal"] = "horizontal";
+    DaffOrientationEnum["Vertical"] = "vertical";
+})(DaffOrientationEnum || (DaffOrientationEnum = {}));
+
+const orientationValues = (orientation) => Object.values(DaffOrientationEnum).includes(orientation);
+const validateOrientation = (orientation) => {
+    if (isDevMode()) {
+        if (orientation !== undefined && !orientationValues(orientation)) {
+            console.warn(`'${orientation}' is not a valid value of the orientation property. The available values are: left, center, or right.`);
+        }
+    }
+};
+/**
+ * `DaffOrientableDirective` allows for dynamic orientation of a component by
+ * setting CSS classes based on the specified orientation. This directive is
+ * useful when orientation needs to be managed dynamically in an Angular component.
+ *
+ * @example Implementing it as an attribute directive
+ *
+ * ```html
+ * <div daffOrientable [orientation]="horizontal"></div>
+ * ```
+ *
+ * In this example, the `daff-horizontal` class is added to the `div` element, allowing
+ * you to style the `div` as you wish using the class.
+ *
+ * @example Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffOrientableDirective,
+ *      inputs: ['orientation'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * .custom-component {
+ *   &.daff-vertical {
+ *     display: flex;
+ *     flex-direction: column;
+ *  }
+ * }
+ * ```
+ */
+class DaffOrientableDirective {
+    /**
+     * @docs-private
+     */
+    ngOnInit() {
+        if (this.defaultOrientation && !this.orientation) {
+            this.orientation = this.defaultOrientation;
+        }
+        validateOrientation(this.orientation);
+    }
+    /**
+     * @docs-private
+     */
+    ngOnChanges(changes) {
+        if (!changes.orientation?.currentValue) {
+            this.orientation = this.defaultOrientation;
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffOrientableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffOrientableDirective, isStandalone: true, selector: "[daffOrientable]", inputs: { orientation: "orientation" }, host: { properties: { "class.daff-horizontal": "orientation === \"horizontal\"", "class.daff-vertical": "orientation === \"vertical\"" } }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffOrientableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffOrientable]',
+                    host: {
+                        '[class.daff-horizontal]': 'orientation === "horizontal"',
+                        '[class.daff-vertical]': 'orientation === "vertical"',
+                    },
+                }]
+        }], propDecorators: { orientation: [{
+                type: Input
+            }] } });
+
 class DaffSelectableDirective {
     constructor(cd) {
         this.cd = cd;
@@ -1972,35 +1376,40 @@ class DaffSelectableDirective {
          */
         this.selected = false;
         /**
-         * An event that fires after the media element becomes selected.
+         * An event that fires after the component becomes selected.
          */
         this.becameSelected = new EventEmitter();
     }
+    /**
+     * Selects the component and emits the `becameSelected` event.
+     */
     select() {
         this.selected = true;
         this.becameSelected.emit();
         this.cd.markForCheck();
         return this;
     }
+    /**
+     * Deselects the component.
+     */
     deselect() {
         this.selected = false;
         this.cd.markForCheck();
         return this;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSelectableDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffSelectableDirective, isStandalone: true, selector: "[daffSelected]", inputs: { selected: "selected" }, outputs: { becameSelected: "becameSelected" }, host: { properties: { "class.daff-selected": "this.selected" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffSelectableDirective, isStandalone: true, selector: "[daffSelected]", inputs: { selected: "selected" }, outputs: { becameSelected: "becameSelected" }, host: { properties: { "class.daff-selected": "selected" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffSelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[daffSelected]',
-                    standalone: true,
+                    host: {
+                        '[class.daff-selected]': 'selected',
+                    },
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selected: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.daff-selected']
             }], becameSelected: [{
                 type: Output
             }] } });
@@ -2140,6 +1549,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
                 type: Input
             }] } });
 
+/**
+ * `DaffDisableableDirective` allows a component to display a disabled UI
+ * by conditionally applying a CSS class. This is useful for indicating to
+ * users that content is loading or being processed. This directive can be used to
+ * apply a disabled UI to any component by toggling the `disabled`
+ * input property. When `disabled` is `true`, the `daff-disabled` CSS class
+ * is applied, which should style the component to look like it's not interactable.
+ *
+ * @example Implementing it as an attribute directive
+ *
+ * ```html
+ * <div daffDisableable [disabled]="isDisabled">Content</div>
+ * ```
+ *
+ * @example Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffDisableableDirective,
+ *      inputs: ['disabled'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * :host {
+ *  .daff-disabled {
+ *    cursor: not-allowed;
+ *    opacity: 0.5;
+ *  }
+ * }
+ * ```
+ *
+ * The directive applies the `daff-disabled` class to the component. The class should be
+ * defined in your styles to display the loading state as desired.
+ */
+class DaffDisableableDirective {
+    constructor() {
+        this.disabled = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffDisableableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.1", type: DaffDisableableDirective, isStandalone: true, selector: "[daffDisableable]", inputs: { disabled: "disabled" }, host: { properties: { "class.daff-disabled": "disabled" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffDisableableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffDisableable]',
+                    host: {
+                        '[class.daff-disabled]': 'disabled',
+                    },
+                }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }] } });
+
+class DaffErrorStateMatcher {
+    isErrorState(control, formSubmitted) {
+        return control.errors && (control.touched || formSubmitted);
+    }
+}
+
 // Core
 
 /*
@@ -2156,5 +1632,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffColorableDirective, DaffCompactableDirective, DaffErrorStateMatcher, DaffFocusStackService, DaffFormLabelDirective, DaffFormLabelModule, DaffManageContainerLayoutDirective, DaffOpenableDirective, DaffPrefixDirective, DaffPrefixSuffixModule, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffStickyTrackerDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector };
+export { DAFF_PREFIX_SUFFIX_DIRECTIVES, DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffColorableDirective, DaffCompactableDirective, DaffDisableableDirective, DaffErrorStateMatcher, DaffFocusStackService, DaffFormLabelDirective, DaffFormLabelModule, DaffManageContainerLayoutDirective, DaffOpenableDirective, DaffOrientableDirective, DaffOrientationEnum, DaffPrefixDirective, DaffPrefixSuffixModule, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffStickyTrackerDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector };
 //# sourceMappingURL=daffodil-design.mjs.map