@daffodil/design 0.89.0 → 0.91.0

package/index.d.ts

@@ -1,345 +1,9 @@
-import { UntypedFormControl, UntypedFormArray, ControlValueAccessor, NgControl } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { ElementRef, EventEmitter, ChangeDetectorRef, QueryList, OnInit, OnChanges, SimpleChanges, InjectionToken, Type, OnDestroy, Renderer2 } from '@angular/core';
-import * as i4 from '@angular/common';
+import { OnChanges, OnInit, SimpleChanges, InjectionToken, Type, EventEmitter, ChangeDetectorRef, OnDestroy, ElementRef, Renderer2 } from '@angular/core';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
 import { DaffPersistenceService } from '@daffodil/core';
-
-declare class DaffErrorStateMatcher {
-    isErrorState(control: UntypedFormControl, formSubmitted: boolean): boolean;
-}
-
-declare class DaffCheckboxComponent {
-    private _cdRef;
-    /**
-     * @docs-private
-     */
-    nativeCheckbox: ElementRef<HTMLInputElement>;
-    /**
-     * The name of the checkbox.
-     */
-    name: string;
-    /**
-     * The value of the checkbox.
-     */
-    value: any;
-    /**
-     * Boolean value to determine whether or not the checkbox is checked.
-     */
-    private _checked;
-    get checked(): boolean;
-    set checked(value: boolean);
-    /**
-     * The id of the checkbox. Must be unique. If not entered by a user then it is generated.
-     */
-    id: string;
-    /**
-     * The aria-label of the checkbox.
-     */
-    label: string;
-    /**
-     * The aria-labeledby of the checkbox.
-     */
-    labeledBy: string;
-    /**
-     * Event on whether or not the selection has changed.
-     */
-    becameChecked: EventEmitter<boolean>;
-    becameUnchecked: EventEmitter<void>;
-    /**
-     * Whether the checkbox is focused
-     */
-    focused: boolean;
-    /**
-     * Whether the checkbox is disabled.
-     */
-    disabled: boolean;
-    /**
-     * The role of the component. Set to "checkbox".
-     *
-     * @docs-private
-     */
-    role: string;
-    /**
-     * @docs-private
-     */
-    _onChange(val: Event): void;
-    /**
-     * @docs-private
-     */
-    get focusClass(): boolean;
-    /**
-     * @docs-private
-     */
-    get disabledClass(): boolean;
-    /**
-     * Sets focused to false.
-     */
-    onBlur(): void;
-    /**
-     * Sets focused to true.
-     */
-    onFocus(): void;
-    constructor(_cdRef: ChangeDetectorRef);
-    /**
-     * Sets checked to true.
-     */
-    select(): void;
-    /**
-     * Sets checked to false
-     */
-    deselect(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCheckboxComponent, "daff-checkbox", never, { "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "aria-label"; "required": false; }; "labeledBy": { "alias": "aria-labelledby"; "required": false; }; }, { "becameChecked": "becameChecked"; "becameUnchecked": "becameUnchecked"; }, never, ["*"], false, never>;
-}
-
-declare class DaffCheckboxSetComponent {
-    formArray: UntypedFormArray;
-    /**
-     * The name of the checkbox-set
-     */
-    name: string;
-    /**
-     * The role of the component. Set to "checkbox".
-     *
-     * @docs-private
-     */
-    role: string;
-    /**
-     * The list of checkboxes in the set.
-     *
-     * @docs-private
-     */
-    checkboxes: QueryList<DaffCheckboxComponent>;
-    valueList: EventEmitter<any[]>;
-    getValues(): any[];
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxSetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffCheckboxSetComponent, "daff-checkbox-set", never, { "formArray": { "alias": "formArray"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "valueList": "valueList"; }, ["checkboxes"], ["*"], false, never>;
-}
-
-/**
- * A directive for binding the DaffCheckboxComponent and the Control Value Accessor.
- */
-declare class DaffCheckboxControlValueAccessorDirective implements OnInit, ControlValueAccessor {
-    _control: NgControl;
-    private _checkbox;
-    _onChange: (val: any) => void;
-    _onTouched: () => void;
-    /**
-     * The value of the ControlValueAccessor
-     */
-    value: any;
-    /**
-     * The name of the ControlValueAccessor
-     */
-    name: string;
-    constructor(_control: NgControl, _checkbox: DaffCheckboxComponent);
-    /**
-     * A lifecycle method called when the directive is initialized.
-     */
-    /**
-     * @docs-private
-     */
-    ngOnInit(): void;
-    /**
-     * writes a new value down into the component.
-     */
-    writeValue(value: any): void;
-    /**
-     * Registers the change handler
-     */
-    registerOnChange(fn: any): void;
-    /**
-     * Registers the touched handler
-     */
-    registerOnTouched(fn: any): void;
-    /**
-     * Sets the disabled state.
-     */
-    setDisabledState?(isDisabled: boolean): void;
-    /**
-     * calls the child checkbox's select function
-     */
-    fireSelect(): void;
-    /**
-     * calls the child checkbox's deselect function
-     */
-    fireDeselect(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxControlValueAccessorDirective, [{ optional: true; self: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCheckboxControlValueAccessorDirective, "daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]", never, { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
-}
-
-declare class DaffCheckboxModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCheckboxModule, [typeof DaffCheckboxComponent, typeof DaffCheckboxSetComponent, typeof DaffCheckboxControlValueAccessorDirective], [typeof i4.CommonModule], [typeof DaffCheckboxComponent, typeof DaffCheckboxSetComponent, typeof DaffCheckboxControlValueAccessorDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DaffCheckboxModule>;
-}
-
-declare class DaffRadioSetComponent {
-    name: string;
-    constructor();
-    /**
-     * @docs-private
-     */
-    role: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioSetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffRadioSetComponent, "daff-radio-set", never, { "name": { "alias": "name"; "required": false; }; }, {}, never, ["*"], false, never>;
-}
-
-declare class DaffRadioComponent implements OnInit {
-    private radioset;
-    /**
-     * @docs-private
-     */
-    role: string;
-    /**
-     * @docs-private
-     */
-    get focusClass(): boolean;
-    /**
-     * @docs-private
-     */
-    get disabledClass(): boolean;
-    /**
-     * @docs-private
-     */
-    _checked: boolean;
-    /**
-     * Output event of selection being changed
-     */
-    selectionChange: EventEmitter<boolean>;
-    /**
-     * The checked property of the radio
-     */
-    get checked(): boolean;
-    set checked(value: boolean);
-    /**
-     * The value of the radio
-     */
-    value: any;
-    /**
-     * The id of the radio. It is uniquely generated but can be overwritten by the user. Must be unique.
-     */
-    id: string;
-    /**
-     * Name of the Radio
-     */
-    name: string;
-    /**
-     * Used for aria-label. Default to name if user does not input a label.
-     */
-    label: string;
-    /**
-     * Used for aria-labelledby.
-     */
-    labelledby: string;
-    disabled: boolean;
-    focused: boolean;
-    constructor(radioset: DaffRadioSetComponent);
-    /**
-     * @docs-private
-     */
-    ngOnInit(): void;
-    /**
-     * updates Focus styling
-     */
-    onFocus(): void;
-    /**
-     * updates Blur styling
-     */
-    onBlur(): void;
-    /**
-     * toggles checked attribute on
-     */
-    select(): void;
-    /**
-     * toggles checked attribute off
-     */
-    deselect(): void;
-    onChange(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffRadioComponent, "daff-radio", never, { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "aria-label"; "required": false; }; "labelledby": { "alias": "aria-labelledby"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, ["*"], false, never>;
-}
-
-declare class DaffRadioRegistry {
-    private _accessors;
-    /**
-     * @description
-     * Adds a control to the internal registry.
-     */
-    add(control: NgControl, accessor: DaffRadioControlValueAccessorDirective): void;
-    /**
-     * @description
-     * Removes a control from the internal registry.
-     */
-    remove(accessor: DaffRadioControlValueAccessorDirective): void;
-    /**
-     * @description
-     * Selects a radio button.
-     */
-    select(accessor: DaffRadioControlValueAccessorDirective): void;
-    private _isSameGroup;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioRegistry, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<DaffRadioRegistry>;
-}
-
-/**
- * ControlValueAccessor functionality for the DaffRadio
- */
-declare class DaffRadioControlValueAccessorDirective implements OnInit, ControlValueAccessor {
-    _control: NgControl;
-    private _registry;
-    private _radio;
-    _onChange: () => void;
-    _onTouched: () => void;
-    /**
-     * The value of the ControlValueAccessor
-     */
-    value: any;
-    /**
-     * The name of the ControlValueAccessor
-     */
-    name: string;
-    constructor(_control: NgControl, _registry: DaffRadioRegistry, _radio: DaffRadioComponent);
-    /**
-     * @docs-private
-     */
-    ngOnInit(): void;
-    /**
-     *
-     * writeValue function from the CVA interface
-     */
-    writeValue(value: any): void;
-    /**
-     * registerOnChange implemented from the CVA interface
-     */
-    registerOnChange(fn: any): void;
-    /**
-     * registerOnTouch implemented from the CVA interface
-     */
-    registerOnTouched(fn: any): void;
-    /**
-     * sets the disabled state.
-     */
-    setDisabledState?(isDisabled: boolean): void;
-    /**
-      calls select function for the radio
-     */
-    fireSelect(): void;
-    /**
-      calls deselect function for the radio
-     */
-    fireDeselect(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioControlValueAccessorDirective, [{ optional: true; self: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffRadioControlValueAccessorDirective, "daff-radio[ngModel], daff-radio[formControl], daff-radio[formControlName]", never, { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, false, never>;
-}
-
-declare class DaffRadioModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffRadioModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffRadioModule, [typeof DaffRadioControlValueAccessorDirective, typeof DaffRadioComponent, typeof DaffRadioSetComponent], [typeof i4.CommonModule], [typeof DaffRadioComponent, typeof DaffRadioSetComponent, typeof DaffRadioControlValueAccessorDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DaffRadioModule>;
-}
+import { UntypedFormControl } from '@angular/forms';
 
 /**
  * @deprecated in favor of the {@link DaffFormFieldLabelDirective}. Deprecated in version 0.86.0. Will be removed in version 1.0.0.
@@ -372,39 +36,34 @@ interface AnimationStateWithParams<T = unknown, V = Record<string | number, unkn
 }
 
 /**
- *
- * 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`.
  */
 declare class DaffPrefixDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffPrefixDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffPrefixDirective, "[daffPrefix]", never, {}, {}, never, never, true, never>;
 }
 
 /**
- *
- * 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`.
  */
 declare class DaffSuffixDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSuffixDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSuffixDirective, "[daffSuffix]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.91.0. Will be removed in version 1.0.0.
+ */
 declare class DaffPrefixSuffixModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffPrefixSuffixModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<DaffPrefixSuffixModule, never, [typeof DaffPrefixDirective, typeof DaffSuffixDirective], [typeof DaffPrefixDirective, typeof DaffSuffixDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffPrefixSuffixModule>;
 }
 
+declare const DAFF_PREFIX_SUFFIX_DIRECTIVES: readonly [typeof DaffPrefixDirective, typeof DaffSuffixDirective];
+
 interface DaffColorable {
     color: DaffPalette;
 }
@@ -477,29 +136,19 @@ type DaffPalette = 'primary' | 'secondary' | 'tertiary' | 'light' | 'dark' | 'th
  * ```
  */
 declare class DaffColorableDirective implements DaffColorable, OnChanges, OnInit {
-    /**
-     * Dynamically sets the CSS classes based on the color.
-     * @docs-private
-     */
-    get class(): {
-        'daff-primary': boolean;
-        'daff-secondary': boolean;
-        'daff-tertiary': boolean;
-        'daff-light': boolean;
-        'daff-dark': boolean;
-        'daff-theme': boolean;
-        'daff-theme-contrast': boolean;
-        'daff-black': boolean;
-        'daff-white': boolean;
-    };
     /**
      * Sets the color on a component.
-     *
-     * Default options are: `primary`, `secondary`, `tertiary`, `light`, `dark`, `theme`, and `theme-contrast`.
      */
     color: DaffPalette;
     /**
      * Sets a default color.
+     *
+     * @example
+     * ```ts
+     * constructor(private colorableDirective: DaffColorableDirective) {
+     *  this.colorableDirective.defaultColor = 'theme';
+     * }
+     * ```
      */
     defaultColor: DaffPalette;
     /**
@@ -558,7 +207,7 @@ interface DaffStatusable {
 }
 /**
  * The `DaffStatus` type defines the possible status values that a component can have.
- * - 'info': Indicatea an informational status.
+ * - 'info': Indicates an informational status.
  * - 'warn': Indicates a warning status.
  * - 'critical': Indicates a critical or error status.
  * - 'success': Indicates a success status.
@@ -589,7 +238,6 @@ declare enum DaffStatusEnum {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -618,20 +266,8 @@ declare enum DaffStatusEnum {
  * - `daff-success`: Applied when the status is `success`.
  */
 declare class DaffStatusableDirective implements DaffStatusable, OnChanges, OnInit {
-    /**
-     * Dynamically sets the CSS classes based on the status.
-     * @docs-private
-     */
-    get class(): {
-        'daff-info': boolean;
-        'daff-warn': boolean;
-        'daff-critical': boolean;
-        'daff-success': boolean;
-    };
     /**
      * Sets the status on a component.
-     *
-     * Options are: `info`, `warn`, `critical`, and `success`.
      */
     status: DaffStatus;
     /**
@@ -675,7 +311,6 @@ declare class DaffStatusableDirective implements DaffStatusable, OnChanges, OnIn
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -757,7 +392,6 @@ declare enum DaffTextAlignmentEnum {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -779,22 +413,19 @@ declare enum DaffTextAlignmentEnum {
  * ```
  */
 declare class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges, OnInit {
-    /**
-     * @docs-private
-     */
-    get class(): {
-        'daff-left': boolean;
-        'daff-center': boolean;
-        'daff-right': boolean;
-    };
     /**
      * The text alignment of the component.
-     *
-     * Options are: `left`, `center`, and `right`.
      */
     textAlignment: DaffTextAlignment;
     /**
-     * Sets a default alignment when no text alignment is provided.
+     * Sets a default alignment.
+     *
+     * @example
+     * ```ts
+     * constructor(private textAligmentDirective: DaffTextAlignableDirective) {
+     *  this.textAligmentDirective.defaultAlignent = 'left';
+     * }
+     * ```
      */
     defaultAlignment: DaffTextAlignment;
     /**
@@ -835,7 +466,6 @@ interface DaffCompactable {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [
@@ -912,7 +542,6 @@ declare class DaffCompactableDirective {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'my-custom-component',
  *  template: 'my-custom-component.html',
  *  hostDirectives: [{ directive: DaffManageContainerLayoutDirective }],
@@ -929,10 +558,6 @@ declare class DaffCompactableDirective {
  * 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.
  */
 declare class DaffManageContainerLayoutDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffManageContainerLayoutDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffManageContainerLayoutDirective, "[daffManageContainerLayout]", never, {}, {}, never, never, true, never>;
 }
@@ -951,7 +576,6 @@ declare class DaffManageContainerLayoutDirective {
  *
  * ```ts
  * @Component({
- *  standalone: true,
  *  selector: 'custom-component',
  *  template: 'custom-component.html',
  *  hostDirectives: [{ directive: DaffArticleEncapsulatedDirective }],
@@ -962,10 +586,6 @@ declare class DaffManageContainerLayoutDirective {
  * This directive will apply the `daff-ae` class to the component, ensuring that it is encapsulated from the article's styles.
  */
 declare class DaffArticleEncapsulatedDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleEncapsulatedDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffArticleEncapsulatedDirective, "[daffArticleEncapsulated]", never, {}, {}, never, never, true, never>;
 }
@@ -1173,25 +793,19 @@ declare enum DaffSizableEnum {
  * - `daff-xl`: Applied when the size is `xl`.
  */
 declare class DaffSizableDirective<T extends DaffSizeAllType> implements DaffSizable<T>, OnChanges, OnInit {
-    /**
-     * Dynamically sets the CSS classes based on the size.
-     * @docs-private
-     */
-    get class(): {
-        'daff-xs': boolean;
-        'daff-sm': boolean;
-        'daff-md': boolean;
-        'daff-lg': boolean;
-        'daff-xl': boolean;
-    };
     /**
      * The size of the component.
-     *
-     * Options are: `xs`, `sm`, `md`, `lg`, and `xl`.
      */
     size: T;
     /**
-     * Sets a default size when no size is provided.
+     * Sets a default size.
+     *
+     * @example
+     * ```ts
+     * constructor(private sizableDirective: DaffSizableDirective) {
+     *  this.sizableDirective.defaultSize = 'md';
+     * }
+     * ```
      */
     defaultSize: T;
     /**
@@ -1303,6 +917,90 @@ declare class DaffOpenableDirective implements DaffOpenable, OnChanges {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffOpenableDirective, "[daffOpenable]", never, { "open": { "alias": "open"; "required": false; }; }, { "toggled": "toggled"; }, never, never, true, never>;
 }
 
+/**
+ * Interface for giving a component the ability to customize text alignment for component-specific UI.
+ */
+interface DaffOrientable {
+    orientation: DaffOrientation;
+}
+/**
+ * The possible types that can be passed to a DaffOrientable component
+ */
+type DaffOrientation = 'horizontal' | 'vertical';
+declare enum DaffOrientationEnum {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+
+/**
+ * `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;
+ *  }
+ * }
+ * ```
+ */
+declare class DaffOrientableDirective implements DaffOrientable, OnChanges, OnInit {
+    /**
+     * The orientation of the component.
+     *
+     * Options are: `horizontal` and `vertical`.
+     */
+    orientation: DaffOrientation;
+    /**
+     * Sets a default orientation.
+     *
+     * @example
+     * ```ts
+     * constructor(private orientableDirective: DaffOrientableDirective) {
+     *  this.orientableDirective.defaultOrientation = 'horizontal';
+     * }
+     * ```
+     */
+    defaultOrientation: DaffOrientation;
+    /**
+     * @docs-private
+     */
+    ngOnInit(): void;
+    /**
+     * @docs-private
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffOrientableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffOrientableDirective, "[daffOrientable]", never, { "orientation": { "alias": "orientation"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 /**
  * An interface for giving a component the ability to display a selected UI.
  * In order to be selectable, the class must implement this property.
@@ -1318,11 +1016,17 @@ declare class DaffSelectableDirective implements DaffSelectable {
      */
     selected: boolean;
     /**
-     * An event that fires after the media element becomes selected.
+     * An event that fires after the component becomes selected.
      */
     becameSelected: EventEmitter<void>;
     constructor(cd: ChangeDetectorRef);
+    /**
+     * Selects the component and emits the `becameSelected` event.
+     */
     select(): this;
+    /**
+     * Deselects the component.
+     */
     deselect(): this;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSelectableDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSelectableDirective, "[daffSelected]", never, { "selected": { "alias": "selected"; "required": false; }; }, { "becameSelected": "becameSelected"; }, never, never, true, never>;
@@ -1350,5 +1054,57 @@ declare class DaffStickyTrackerDirective implements OnDestroy {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffStickyTrackerDirective, "[daffStickyTracker]", never, { "sticky": { "alias": "sticky"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-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 type { AnimationStateWithParams, Constructor, DaffColorable, DaffCompactable, DaffLazyComponent, DaffMutable, DaffOpenable, DaffPalette, DaffSelectable, DaffSizable, DaffSizeAllType, DaffSizeLargeType, DaffSizeMediumType, DaffSizeSmallType, DaffSizeXLargeType, DaffSizeXSmallType, DaffStatus, DaffStatusable, DaffTextAlignable, DaffTextAlignment };
+/**
+ * `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.
+ */
+declare class DaffDisableableDirective {
+    disabled: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffDisableableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffDisableableDirective, "[daffDisableable]", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class DaffErrorStateMatcher {
+    isErrorState(control: UntypedFormControl, formSubmitted: boolean): boolean;
+}
+
+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 };
+export type { AnimationStateWithParams, Constructor, DaffColorable, DaffCompactable, DaffLazyComponent, DaffMutable, DaffOpenable, DaffOrientable, DaffOrientation, DaffPalette, DaffSelectable, DaffSizable, DaffSizeAllType, DaffSizeLargeType, DaffSizeMediumType, DaffSizeSmallType, DaffSizeXLargeType, DaffSizeXSmallType, DaffStatus, DaffStatusable, DaffTextAlignable, DaffTextAlignment };