@daffodil/design 0.74.0 → 0.76.0

package/fesm2022/daffodil-design.mjs

@@ -1,15 +1,16 @@
 import * as i2 from '@angular/common';
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, HostBinding, Input, ContentChild, ChangeDetectionStrategy, NgModule, Optional, Self, HostListener, EventEmitter, ElementRef, ViewChild, Output, Directive, ContentChildren, Injectable, Inject, APP_INITIALIZER } from '@angular/core';
+import { Component, ViewEncapsulation, HostBinding, Input, ContentChild, ChangeDetectionStrategy, NgModule, Optional, Self, HostListener, EventEmitter, ElementRef, ViewChild, Output, Directive, ContentChildren, Injectable, InjectionToken, inject, PLATFORM_ID, Inject, APP_INITIALIZER } from '@angular/core';
 import * as i2$1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import * as i1 from '@angular/forms';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
-import { Subject, fromEventPattern, of, merge, fromEvent, EMPTY, combineLatest } from 'rxjs';
+import { Subject, of, fromEventPattern, merge, fromEvent, EMPTY, combineLatest } from 'rxjs';
 import { takeUntil, startWith, map, catchError, filter, shareReplay } from 'rxjs/operators';
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { DaffServerSafePersistenceServiceToken } from '@daffodil/core';
 
 class DaffErrorStateMatcher {
@@ -1415,61 +1416,143 @@ function daffPrefixableMixin(Base) {
     return PrefixableDirective;
 }
 
+/**
+ * Enumerates the available color palette options for a component.
+ * These values can be used to apply specific color styles to components within the
+ * application.
+ */
 var DaffPaletteEnum;
 (function (DaffPaletteEnum) {
-    DaffPaletteEnum["PRIMARY"] = "primary";
-    DaffPaletteEnum["SECONDARY"] = "secondary";
-    DaffPaletteEnum["ACCENT"] = "accent";
-    DaffPaletteEnum["TERTIARY"] = "tertiary";
-    DaffPaletteEnum["BLACK"] = "black";
-    DaffPaletteEnum["WHITE"] = "white";
-    DaffPaletteEnum["THEME"] = "theme";
-    DaffPaletteEnum["THEMECONTRAST"] = "theme-contrast";
+    /**
+     * Your primary color.
+     */
+    DaffPaletteEnum["Primary"] = "primary";
+    /**
+     * Your secondary color.
+     */
+    DaffPaletteEnum["Secondary"] = "secondary";
+    /**
+     * Your tertiary color.
+     */
+    DaffPaletteEnum["Tertiary"] = "tertiary";
+    /**
+     * Black. It's dark.
+     */
+    DaffPaletteEnum["Black"] = "black";
+    /**
+     * White. It's bright.
+     */
+    DaffPaletteEnum["White"] = "white";
+    /**
+     * The default color for your theme.
+     */
+    DaffPaletteEnum["Theme"] = "theme";
+    /**
+     * A color that constrats against your defined theme.
+     */
+    DaffPaletteEnum["ThemeContrast"] = "theme-contrast";
 })(DaffPaletteEnum || (DaffPaletteEnum = {}));
 
-function colorInPalette(color) {
-    return Object.values(DaffPaletteEnum).includes(color);
-}
-
+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');
+    }
+};
 /**
- * This should be a trait, but typescript only supports mixins.
- * See: https://github.com/Microsoft/TypeScript/issues/311
+ * `DaffColorableDirective` allows a component to conditionally apply color-specific
+ * styles by setting CSS classes based on the specified color. This directive is useful
+ * for applying different color palettes to a component in an Angular application.
+ *
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
+ *
+ * ```html
+ * <div daffColorable [color]="componentColor">Colored content</div>
+ * ```
+ *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffColorableDirective,
+ *      inputs: ['color'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
  *
- * Turns out the material team followed the same path with the color mixin.
- * https://github.com/angular/material2/blob/master/src/lib/core/common-behaviors/color.ts
+ * ```scss
+ * .custom-component {
+ *
+ *  &.daff-primary {
+ *    background: daff-color($primary, 10);
+ *    color: daff-color($primary, 90);
+ *  }
+ * }
+ * ```
+ *
+ * ## Styles
+ *
+ * The directive applies the following CSS classes based on the color:
+ *
+ * - `daff-primary`: Applied when the color is `primary`.
+ * - `daff-secondary`: Applied when the color is `secondary`.
+ * - `daff-tertiary`: Applied when the color is `tertiary`.
+ * - `daff-black`: Applied when the color is `black`.
+ * - `daff-white`: Applied when the color is `white`.
+ * - `daff-theme`: Applied when the color is `theme`.
+ * - `daff-theme-contrast`: Applied when the color is `theme-contrast`.
  */
-function daffColorMixin(Base, defaultColor) {
-    class DaffColorableMixinClass extends Base {
-        get color() {
-            return this._color;
-        }
-        set color(value) {
-            //Handle the default color
-            const incomingColor = value || defaultColor;
-            if (incomingColor !== undefined && !colorInPalette(incomingColor)) {
-                throw new TypeError(incomingColor + ' is not a valid color for the DaffPalette');
-            }
-            if (incomingColor !== this._color) { //Only run the dom-render if a change occurs
-                //Remove the old color
-                if (this._color) {
-                    this._renderer.removeClass(this._elementRef.nativeElement, `daff-${this._color}`);
-                }
-                if (incomingColor) {
-                    this._renderer.addClass(this._elementRef.nativeElement, `daff-${incomingColor}`);
-                }
-                this._color = incomingColor;
-            }
+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-black': this.color === DaffPaletteEnum.Black,
+            'daff-white': this.color === DaffPaletteEnum.White,
+            'daff-theme': this.color === DaffPaletteEnum.Theme,
+            'daff-theme-contrast': this.color === DaffPaletteEnum.ThemeContrast,
+        };
+    }
+    ngOnChanges(changes) {
+        if (!changes.color.currentValue) {
+            this.color = this.defaultColor;
         }
-        constructor(...args) {
-            super(...args);
-            this.color = defaultColor;
+    }
+    ngOnInit() {
+        validateColor(this.color);
+        if (!this.color) {
+            this.color = this.defaultColor;
         }
     }
-    ;
-    // TODO: ugly workaround for https://github.com/microsoft/TypeScript/issues/7342#issuecomment-624298133
-    Input()(DaffColorableMixinClass.prototype, 'color');
-    return DaffColorableMixinClass;
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffColorableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffColorableDirective, isStandalone: true, selector: "[daffColorable]", inputs: { color: "color" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffColorableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffColorable]',
+                    standalone: true,
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], color: [{
+                type: Input
+            }] } });
 
 var DaffBreakpoints;
 (function (DaffBreakpoints) {
@@ -1481,12 +1564,46 @@ var DaffBreakpoints;
     DaffBreakpoints["MOBILE"] = "(min-width: 480px)";
 })(DaffBreakpoints || (DaffBreakpoints = {}));
 
+/**
+ * A stubbed out breakpoint observer service.
+ */
+class NoopBreakpointObserver {
+    // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method, @angular-eslint/use-lifecycle-interface
+    ngOnDestroy() { }
+    isMatched(value) {
+        return false;
+    }
+    observe(value) {
+        return of();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NoopBreakpointObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NoopBreakpointObserver, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NoopBreakpointObserver, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Provides a {@link NoopBreakpointObserver} if the platform is not browser.
+ */
+const SERVER_SAFE_BREAKPOINT_OBSERVER = new InjectionToken('SERVER_SAFE_BREAKPOINT_OBSERVER', {
+    factory: () => isPlatformBrowser(inject(PLATFORM_ID))
+        ? inject(BreakpointObserver)
+        : inject(NoopBreakpointObserver),
+});
+
 /**
  * A basic constructor type useful for mixins
  * See https://blog.mariusschulz.com/2017/05/26/typescript-2-2-mixin-classes
  * for a really good explanation of why mixins are useful.
  */
 
+/**
+ * The `DaffStatusEnum` enumerates the possible status values for a component.
+ */
 var DaffStatusEnum;
 (function (DaffStatusEnum) {
     DaffStatusEnum["Warn"] = "warn";
@@ -1494,62 +1611,143 @@ var DaffStatusEnum;
     DaffStatusEnum["Success"] = "success";
 })(DaffStatusEnum || (DaffStatusEnum = {}));
 
-function daffStatusMixin(Base, defaultStatus) {
-    class DaffStatusMixinClass extends Base {
-        get status() {
-            return this._status;
-        }
-        set status(value) {
-            // Handles the default status
-            const incomingStatus = value || defaultStatus;
-            if (incomingStatus === this._status) { // Only run the dom-render if a change occurs
-                return;
-            }
-            // Removes the old status
-            if (this._status) {
-                this._renderer.removeClass(this._elementRef.nativeElement, `daff-${this._status}`);
-            }
-            if (incomingStatus) {
-                this._renderer.addClass(this._elementRef.nativeElement, `daff-${incomingStatus}`);
-            }
-            this._status = incomingStatus;
-        }
-        constructor(...args) {
-            super(...args);
-            this.status = defaultStatus;
-        }
+/**
+ * `DaffStatusableDirective` allows a component to conditionally apply status-specific
+ * styles by setting CSS classes based on the specified status. This directive is useful
+ * for indicating different statuses such as warning, danger, or success states.
+ *
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
+ *
+ * ```html
+ * <div daffStatusable [status]="componentStatus">Status content</div>
+ * ```
+ *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffStatusableDirective,
+ *      inputs: ['status'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ *
+ * ```scss
+ * .custom-component {
+ *
+ *  &.daff-danger {
+ *    background: daff-color($red, 10);
+ *    color: daff-color($red, 90);
+ *  }
+ * }
+ * ```
+ * ## Styles
+ *
+ * The directive applies the following CSS classes based on the status:
+ *
+ * - `daff-warn`: Applied when the status is `warn`.
+ * - `daff-danger`: Applied when the status is `danger`.
+ * - `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-warn': this.status === DaffStatusEnum.Warn,
+            'daff-danger': this.status === DaffStatusEnum.Danger,
+            'daff-success': this.status === DaffStatusEnum.Success,
+        };
     }
-    ;
-    // TODO: ugly workaround for https://github.com/microsoft/TypeScript/issues/7342#issuecomment-624298133
-    Input()(DaffStatusMixinClass.prototype, 'status');
-    return DaffStatusMixinClass;
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffStatusableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffStatusableDirective, isStandalone: true, selector: "[daffStatusable]", inputs: { status: "status" }, host: { properties: { "class": "this.class" } }, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffStatusableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffStatusable]',
+                    standalone: true,
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], status: [{
+                type: Input
+            }] } });
 
-function daffSkeletonableMixin(Base, defaultSkeleton = false) {
-    return class extends Base {
-        get skeleton() {
-            return this._skeleton;
-        }
-        set skeleton(value) {
-            // Handles the default skeleton
-            const incomingSkeleton = value || defaultSkeleton;
-            if (incomingSkeleton === this._skeleton) { // Only run the dom-render if a change occurs
-                return;
-            }
-            if (incomingSkeleton) {
-                this._renderer.addClass(this._elementRef.nativeElement, `daff-skeleton`);
-            }
-            else {
-                this._renderer.removeClass(this._elementRef.nativeElement, `daff-skeleton`);
-            }
-            this._skeleton = incomingSkeleton;
-        }
-        constructor(...args) {
-            super(...args);
-            this.skeleton = defaultSkeleton;
-        }
-    };
+/**
+ * `DaffSkeletonableDirective` allows a component to display a skeleton loading
+ * state 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 skeleton loading state to any component by toggling the `skeleton`
+ * input property. When `skeleton` is `true`, the `daff-skeleton` CSS class
+ * is applied, which should style the component to look like a loading placeholder.
+ *
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
+ *
+ * ```html
+ * <div daffSkeletonable [skeleton]="isLoading">Content</div>
+ * ```
+ *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffSkeletonableDirective,
+ *      inputs: ['skeleton'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * .daff-skeleton {
+ *  @include state.skeleton-screen(48px, 24px);
+ * }
+ * ```
+ *
+ * ## Styles
+ *
+ * The `daff-skeleton` class should be defined in your styles to display the loading
+ * state as desired. It can be used in conjuction with the `skeleton-screen` mixin, which provides predefined loading styles.
+ */
+class DaffSkeletonableDirective {
+    constructor() {
+        this.skeleton = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffSkeletonableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffSkeletonableDirective, isStandalone: true, selector: "[daffSkeletonable]", inputs: { skeleton: "skeleton" }, host: { properties: { "class.daff-skeleton": "this.skeleton" } }, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffSkeletonableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffSkeletonable]',
+                    standalone: true,
+                }]
+        }], propDecorators: { skeleton: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.daff-skeleton']
+            }] } });
 
 var DaffTextAlignmentEnum;
 (function (DaffTextAlignmentEnum) {
@@ -1558,91 +1756,275 @@ var DaffTextAlignmentEnum;
     DaffTextAlignmentEnum["Right"] = "right";
 })(DaffTextAlignmentEnum || (DaffTextAlignmentEnum = {}));
 
-function daffTextAlignmentMixin(Base, defaultTextAlignment) {
-    class DaffTextAlignableMixin extends Base {
-        /**
-         * Controls text alignment for component-specific UI
-         */
-        get textAlignment() {
-            return this._textAlignment;
-        }
-        set textAlignment(value) {
-            // Handles the default text alignment
-            const incomingTextAlignment = value || defaultTextAlignment;
-            if (incomingTextAlignment === this._textAlignment) { // Only run the dom-render if a change occurs
-                return;
-            }
-            // Removes the old text alignment
-            if (this._textAlignment) {
-                this._renderer.removeClass(this._elementRef.nativeElement, `daff-${this._textAlignment}`);
-            }
-            if (incomingTextAlignment) {
-                this._renderer.addClass(this._elementRef.nativeElement, `daff-${incomingTextAlignment}`);
-            }
-            this._textAlignment = incomingTextAlignment;
-        }
-        constructor(...args) {
-            super(...args);
-            this.textAlignment = defaultTextAlignment;
+/**
+ * `DaffTextAlignableDirective` allows for dynamic text alignment of a component by
+ * setting CSS classes based on the specified text alignment. This directive is
+ * useful when text alignment needs to be managed dynamically in an Angular component.
+ *
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
+ *
+ * ```html
+ * <div daffTextAlignable textAlignment="center">Aligned text</div>
+ *
+ * In this example, the `daff-center` class is added to the `div` element, allowing
+ * you to style the `div` as you wish using the class.
+ *
+ * ```
+ *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffTextAlignableDirective,
+ *      inputs: ['textAlignment'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * .custom-component {
+ *  &.daff-left {
+ *    text-align: left;
+ *  }
+ * }
+ * ```
+ *
+ * ## Why not just use CSS?
+ *
+ * While the native CSS `text-align` property can be used for static text alignment,
+ * the `DaffTextAlignableDirective` provides a structured and consistent way to handle
+ * dynamic text alignment within Angular components in more complex use-cases where the
+ * application of `text-align:center` would cause unexpected side effects.
+ */
+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,
+        };
+    }
+    ngOnChanges(changes) {
+        if (!changes.textAlignment?.currentValue) {
+            this.textAlignment = this.defaultAlignment;
         }
     }
-    ;
-    // TODO: ugly workaround for https://github.com/microsoft/TypeScript/issues/7342#issuecomment-624298133
-    Input()(DaffTextAlignableMixin.prototype, 'textAlignment');
-    return DaffTextAlignableMixin;
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffTextAlignableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffTextAlignableDirective, isStandalone: true, selector: "[daffTextAlignable]", inputs: { textAlignment: "textAlignment" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffTextAlignableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffTextAlignable]',
+                    standalone: true,
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], textAlignment: [{
+                type: Input
+            }] } });
 
-function daffCompactableMixin(Base, defaultCompact = false) {
-    return class extends Base {
-        get compact() {
-            return this._compact;
-        }
-        set compact(value) {
-            // Handles the default compact
-            const incomingCompact = value || defaultCompact;
-            if (incomingCompact === this._compact) { // Only run the dom-render if a change occurs
-                return;
-            }
-            if (incomingCompact) {
-                this._renderer.addClass(this._elementRef.nativeElement, `daff-compact`);
-            }
-            else {
-                this._renderer.removeClass(this._elementRef.nativeElement, `daff-compact`);
-            }
-            this._compact = incomingCompact;
-        }
-        constructor(...args) {
-            super(...args);
-            this.compact = defaultCompact;
-        }
-    };
+/**
+ * `DaffCompactableDirective` allows a component to conditionally apply a compact
+ * style by toggling a CSS class. This is useful for creating components that can
+ * switch between regular and compact styles based on the `compact` property.
+ *
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
+ *
+ * ```html
+ * <div daffCompactable [compact]="isCompact">Content goes here</div>
+ * ```
+ *
+ * In this example, the `daff-compact` class is applied to the `div` element when
+ * `isCompact` is `true`, making the `div` display its compact state.
+ *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffCompactableDirective,
+ *      inputs: ['compact'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * .custom-component {
+ *  padding: 8px 16px;
+ *
+ *  &.daff-compact {
+ *    padding: 4px 8px;
+ *  }
+ * }
+ * ```
+ *
+ * ## Styles
+ *
+ * The `daff-compact` class should be defined in your styles to display the compact
+ * state as desired.
+ */
+class DaffCompactableDirective {
+    constructor() {
+        this.compact = false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffCompactableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffCompactableDirective, isStandalone: true, selector: "[daffCompactable]", inputs: { compact: "compact" }, host: { properties: { "class.daff-compact": "this.compact" } }, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffCompactableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffCompactable]',
+                    standalone: true,
+                }]
+        }], propDecorators: { compact: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.daff-compact']
+            }] } });
 
 /**
- * A mixin for giving a component the ability to manage a DaffContainerComponent's layout.
- * It passes predetermined layout styles down to the container. In order for a component to
- * do this, it must implement this mixin.
+ * `DaffManageContainerLayoutDirective` gives a component the ability to manage a `DaffContainerComponent`'s layout.
+ * By including this directive, predetermined layout styles are passed down to the container.
+ *
+ * To understand the motivation for this directive, consider:
+ *
+ * ```html
+ * <daff-container>
+ *  <daff-hero></daff-hero>
+ * </daff-container>
+ * ```
+ * vs.
+ *
+ * ```html
+ * <daff-hero>
+ *   <daff-container></daff-container>
+ * </daff-hero>
+ * ```
+ *
+ * The former may inappropriately constrain the width of its child elements,
+ * while the latter (without `DaffManageContainerLayoutDirective`) may unexpectedly
+ * interfere in the layout features of its parent element (i.e. display: grid, display: flex).
+ *
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
+ *
+ * ```html
+ * <my-custom-component daffManageContainerLayout>
+ *  <daff-container size="lg"></daff-container>
+ * </my-custom-component>
+ * ```
+ *
+ * ```scss
+ * :host {
+ *  display: grid;
+ *  grid-template-columns: 1fr 1fr;
+ * }
+ * ```
+ *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'my-custom-component',
+ *  template: 'my-custom-component.html',
+ *  hostDirectives: [{ directive: DaffManageContainerLayoutDirective }],
+ * })
+ * export class MyCustomComponent { }
+ *
+ * ```scss
+ * :host {
+ *  display: grid;
+ *  grid-template-columns: 1fr 1fr;
+ * }
+ * ```
+ *
+ * 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.
  */
-function daffManageContainerLayoutMixin(Base) {
-    return class extends Base {
-        constructor(...args) {
-            super(...args);
-            this._renderer.addClass(this._elementRef.nativeElement, `daff-manage-container-layout`);
-        }
-    };
+class DaffManageContainerLayoutDirective {
+    constructor() {
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffManageContainerLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffManageContainerLayoutDirective, isStandalone: true, selector: "[daffManageContainerLayout]", host: { properties: { "class.daff-manage-container-layout": "this.class" } }, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffManageContainerLayoutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffManageContainerLayout]',
+                    standalone: true,
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-manage-container-layout']
+            }] } });
 
 /**
- * A mixin for giving a component the ability to prevent article styles from cascading down.
+ * `DaffArticleEncapsulatedDirective` is used to encapsulate custom components within an article,
+ * preventing {@link DaffArticleComponent } styles from bleeding into the component.
+ *
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
+ *
+ * ```html
+ * <my-custom-component daffArticleEncapsulated></my-custom-component>
+ * ```
+ *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [{ directive: DaffArticleEncapsulatedDirective }],
+ * })
+ * export class CustomComponent { }
+ *
+ * This directive will apply the `daff-ae` class to your component, ensuring that it is encapsulated from the article's styles.
  */
-function daffArticleEncapsulatedMixin(Base) {
-    return class extends Base {
-        constructor(...args) {
-            super(...args);
-            this._renderer.addClass(this._elementRef.nativeElement, `daff-ae`);
-        }
-    };
+class DaffArticleEncapsulatedDirective {
+    constructor() {
+        this.class = true;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffArticleEncapsulatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffArticleEncapsulatedDirective, isStandalone: true, selector: "[daffArticleEncapsulated]", host: { properties: { "class.daff-ae": "this.class" } }, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffArticleEncapsulatedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffArticleEncapsulated]',
+                    standalone: true,
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class.daff-ae']
+            }] } });
 
 /**
  * The possible states of a theme.
@@ -1957,8 +2339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                 }] }] });
 
 /**
- * An interface for giving a component the ability to customize sizing for component-specific UI.
- * In order to be sizable, a component class must implement this property.
+ * Interfaces that gives a component the ability to customize sizing for component specific UI.
  */
 var DaffSizableEnum;
 (function (DaffSizableEnum) {
@@ -1969,35 +2350,98 @@ var DaffSizableEnum;
     DaffSizableEnum["XLarge"] = "xl";
 })(DaffSizableEnum || (DaffSizableEnum = {}));
 
-function daffSizeMixin(Base, defaultSize) {
-    class DaffSizeMixinClass extends Base {
-        get size() {
-            return this._size;
-        }
-        set size(value) {
-            // Handles the default size
-            const incomingSize = value || defaultSize;
-            if (incomingSize !== this._size) { //Only run the dom-render if a change occurs
-                //Remove the old size
-                if (this._size) {
-                    this._renderer.removeClass(this._elementRef.nativeElement, `daff-${this._size}`);
-                }
-                if (incomingSize) {
-                    this._renderer.addClass(this._elementRef.nativeElement, `daff-${incomingSize}`);
-                }
-                this._size = incomingSize;
-            }
+/**
+ * `DaffSizableDirective` allows for dynamic sizing of a component by setting
+ * CSS classes based on the specified size.
+ *
+ * ## Usage
+ *
+ * ### Implementing it as an attribute directive
+ *
+ * ```html
+ * <div daffSizable [size]="small">Sized content</div>
+ * ```
+ * In this example, the `daff-small` class is applied to the `div` element, allowing you to
+ * use the class to style the `div`.
+ *
+ * ### Implementing it as an Angular host directive
+ *
+ * ```ts
+ * @Component({
+ *  standalone: true,
+ *  selector: 'custom-component',
+ *  template: 'custom-component.html',
+ *  hostDirectives: [
+ *    {
+ *      directive: DaffSizableDirective,
+ *      inputs: ['size'],
+ *    },
+ *  ],
+ * })
+ * export class CustomComponent { }
+ * ```
+ *
+ * ```scss
+ * .custom-component {
+ *  &.daff-sm {
+ *    width: 24px;
+ *  }
+ *
+ *  &.daff-md {
+ *    width: 32px;
+ *  }
+ * }
+ * ```
+ *
+ * ## Styles
+ *
+ * The directive applies the following CSS classes based on the size:
+ *
+ * - `daff-xs`: Applied when the size is `xs`.
+ * - `daff-sm`: Applied when the size is `sm`.
+ * - `daff-md`: Applied when the size is `md`.
+ * - `daff-lg`: Applied when the size is `lg`.
+ * - `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,
+        };
+    }
+    ngOnChanges(changes) {
+        if (!changes.size?.currentValue) {
+            this.size = this.defaultSize;
         }
-        constructor(...args) {
-            super(...args);
-            this.size = defaultSize;
+    }
+    ngOnInit() {
+        if (!this.size) {
+            this.size = this.defaultSize;
         }
     }
-    ;
-    // TODO: ugly workaround for https://github.com/microsoft/TypeScript/issues/7342#issuecomment-624298133
-    Input()(DaffSizeMixinClass.prototype, 'size');
-    return DaffSizeMixinClass;
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffSizableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: DaffSizableDirective, isStandalone: true, selector: "[daffSizable]", inputs: { size: "size" }, host: { properties: { "class": "this.class" } }, usesOnChanges: true, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DaffSizableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[daffSizable]',
+                    standalone: true,
+                }]
+        }], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], size: [{
+                type: Input
+            }] } });
 
 // Core
 
@@ -2015,5 +2459,5 @@ function daffSizeMixin(Base, defaultSize) {
  * Generated bundle index. Do not edit.
  */
 
-export { DAFF_THEME_INITIALIZER, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFocusStackService, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffInputComponent, DaffInputModule, DaffNativeSelectComponent, DaffNativeSelectModule, DaffPrefixDirective, DaffPrefixSuffixModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSizableEnum, DaffStatusEnum, DaffSuffixDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, daffArticleEncapsulatedMixin, daffColorMixin, daffCompactableMixin, daffFocusableElementsSelector, daffManageContainerLayoutMixin, daffPrefixableMixin, daffSizeMixin, daffSkeletonableMixin, daffStatusMixin, daffSuffixableMixin, daffTextAlignmentMixin };
+export { DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent, DaffColorableDirective, DaffCompactableDirective, DaffErrorMessageComponent, DaffErrorMessageModule, DaffErrorStateMatcher, DaffFocusStackService, DaffFormFieldComponent, DaffFormFieldControl, DaffFormFieldModule, DaffFormLabelDirective, DaffFormLabelModule, DaffInputComponent, DaffInputModule, DaffManageContainerLayoutDirective, DaffNativeSelectComponent, DaffNativeSelectModule, DaffPrefixDirective, DaffPrefixSuffixModule, DaffQuantityFieldComponent, DaffQuantityFieldModule, DaffQuantityInputComponent, DaffQuantitySelectComponent, DaffRadioComponent, DaffRadioControlValueAccessorDirective, DaffRadioModule, DaffRadioSetComponent, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector, daffPrefixableMixin, daffSuffixableMixin };
 //# sourceMappingURL=daffodil-design.mjs.map