@daffodil/design 0.73.0 → 0.75.0

package/card/examples/public_api.d.ts

@@ -1,14 +1,8 @@
 import { BasicCardComponent } from './basic-card/basic-card.component';
-export { BasicCardModule } from './basic-card/basic-card.module';
 import { CardOrientationComponent } from './card-orientation/card-orientation.component';
-export { CardOrientationModule } from './card-orientation/card-orientation.module';
 import { CardThemingComponent } from './card-theming/card-theming.component';
-export { CardThemingModule } from './card-theming/card-theming.module';
 import { LinkableCardComponent } from './linkable-card/linkable-card.component';
-export { LinkableCardModule } from './linkable-card/linkable-card.module';
 import { RaisedCardComponent } from './raised-card/raised-card.component';
-export { RaisedCardModule } from './raised-card/raised-card.module';
 import { StrokedCardComponent } from './stroked-card/stroked-card.component';
-export { StrokedCardModule } from './stroked-card/stroked-card.module';
 export declare const CARD_EXAMPLES: (typeof BasicCardComponent | typeof CardThemingComponent | typeof LinkableCardComponent)[];
 export { BasicCardComponent, CardThemingComponent, LinkableCardComponent, RaisedCardComponent, StrokedCardComponent, CardOrientationComponent, };

package/card/examples/raised-card/raised-card.component.d.ts

@@ -7,5 +7,5 @@ export declare class RaisedCardComponent {
         label: string;
     }[];
     static ɵfac: i0.ɵɵFactoryDeclaration<RaisedCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RaisedCardComponent, "raised-card", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RaisedCardComponent, "raised-card", never, {}, {}, never, never, true, never>;
 }

package/card/examples/stroked-card/stroked-card.component.d.ts

@@ -7,5 +7,5 @@ export declare class StrokedCardComponent {
         label: string;
     }[];
     static ɵfac: i0.ɵɵFactoryDeclaration<StrokedCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StrokedCardComponent, "stroked-card", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StrokedCardComponent, "stroked-card", never, {}, {}, never, never, true, never>;
 }

package/checkbox/examples/basic-checkbox/basic-checkbox.component.d.ts

@@ -7,5 +7,5 @@ export declare class BasicCheckboxComponent implements OnInit {
     setFalse(): void;
     setTrue(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BasicCheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BasicCheckboxComponent, "basic-checkbox", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicCheckboxComponent, "basic-checkbox", never, {}, {}, never, never, true, never>;
 }

package/checkbox/examples/checkbox-set/checkbox-set.component.d.ts

@@ -8,5 +8,5 @@ export declare class CheckboxSetComponent implements OnInit {
     ngOnInit(): void;
     displayList(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxSetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxSetComponent, "checkbox-set", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxSetComponent, "checkbox-set", never, {}, {}, never, never, true, never>;
 }

package/checkbox/examples/examples.d.ts

@@ -1,5 +1,3 @@
 import { BasicCheckboxComponent } from './basic-checkbox/basic-checkbox.component';
-import { BasicCheckboxModule } from './basic-checkbox/basic-checkbox.module';
 import { CheckboxSetComponent } from './checkbox-set/checkbox-set.component';
 export declare const CHECKBOX_EXAMPLES: (typeof BasicCheckboxComponent | typeof CheckboxSetComponent)[];
-export declare const CHECKBOX_EXAMPLES_MODULES: (typeof BasicCheckboxModule)[];

package/checkbox/examples/public_api.d.ts

@@ -1,2 +1 @@
 export { CHECKBOX_EXAMPLES } from './examples';
-export { CHECKBOX_EXAMPLES_MODULES } from './examples';

package/container/README.md

@@ -1,18 +1,21 @@
 # Container
-Container is a basic structural element that can be used to restrict content to a specific width. Containers are not responsible for providing padding or margin.
+Container is a basic structural element that restricts page content to a specific maximum width.
+
+## Overview
+Container comes with pre-defined sizes that work well with common breakpoints. It's not responsible for providing padding or margin.
 
 ## Size
 The size of a container can be defined by using the `size` property. There is no default size set.
 
 Supported sizes: `xs | sm | md | lg | xl`
 
-| Size        | Syntax | Max wdith |
-| ----------- | ------ | --------- |
-| Extra small | xs     | 640px     |
-| Small       | sm     | 800px     |
-| Medium      | md     | 1040px    |
-| Large       | lg     | 1340px    |
-| Extra large | xl     | 1920px    |
+| Description | Max Width | Value  |
+| ----------- | --------- | ------ |
+| Extra Small | 640px     | xs     |
+| Small       | 800px     | sm     |
+| Medium      | 1040px    | md     |
+| Large       | 1340px    | lg     |
+| Extra Large | 1920px    | xl     |
 
 ## Usage
 <design-land-example-viewer-container example="container-sizes"></design-land-example-viewer-container>

package/container/container/container.component.d.ts

@@ -1,32 +1,13 @@
-import { ElementRef, Renderer2 } from '@angular/core';
-import { DaffSizable, DaffSizeAllType } from '@daffodil/design';
 import * as i0 from "@angular/core";
-/**
- * An _elementRef and an instance of renderer2 are needed for the Sizeable mixin
- */
-declare class DaffContainerBase {
-    _elementRef: ElementRef;
-    _renderer: Renderer2;
-    constructor(_elementRef: ElementRef, _renderer: Renderer2);
-}
-declare const _daffContainerBase: (new (...args: any[]) => {
-    _size: DaffSizeAllType;
-    size: DaffSizeAllType;
-    _elementRef: ElementRef<any>;
-    _renderer: Renderer2;
-}) & typeof DaffContainerBase;
+import * as i1 from "@daffodil/design";
 /**
  * @inheritdoc
  */
-export declare class DaffContainerComponent extends _daffContainerBase implements DaffSizable<DaffSizeAllType> {
-    private elementRef;
-    private renderer;
+export declare class DaffContainerComponent {
     /**
      * @docs-private
      */
     class: boolean;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffContainerComponent, "daff-container", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffContainerComponent, "daff-container", never, {}, {}, never, ["*"], false, [{ directive: typeof i1.DaffSizableDirective; inputs: { "size": "size"; }; outputs: {}; }]>;
 }
-export {};

package/container/examples/container-sizes/container-sizes.component.d.ts

@@ -7,5 +7,5 @@ export declare class ContainerSizesComponent {
         label: string;
     }[];
     static ɵfac: i0.ɵɵFactoryDeclaration<ContainerSizesComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ContainerSizesComponent, "container-sizes", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ContainerSizesComponent, "container-sizes", never, {}, {}, never, never, true, never>;
 }

package/container/examples/public_api.d.ts

@@ -1,3 +1,2 @@
 export { ContainerSizesComponent } from './container-sizes/container-sizes.component';
-export { ContainerSizesModule } from './container-sizes/container-sizes.module';
 export { CONTAINER_EXAMPLES } from './examples';

package/core/article-encapsulated/article-encapsulated.directive.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+/**
+ * The `DaffArticleEncapsulatedDirective` is used to encapsulate custom components
+ * within an article, preventing article styles from bleeding into the component.
+ *
+ * ## Example
+ *
+ * ```html
+ * <my-custom-component daffArticleEncapsulated></my-custom-component>
+ * ```
+ *
+ * This directive will apply the `daff-ae` class to your component, ensuring that it is encapsulated
+ * from the article's styles.
+ */
+export declare class DaffArticleEncapsulatedDirective {
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleEncapsulatedDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffArticleEncapsulatedDirective, "[daffArticleEncapsulated]", never, {}, {}, never, never, true, never>;
+}

package/core/article-encapsulated/public_api.d.ts

@@ -1 +1 @@
-export { daffArticleEncapsulatedMixin } from './article-encapsulated-mixin';
+export { DaffArticleEncapsulatedDirective } from './article-encapsulated.directive';

package/core/breakpoints/noop.service.d.ts

@@ -0,0 +1,13 @@
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * A stubbed out breakpoint observer service.
+ */
+export declare class NoopBreakpointObserver implements Omit<BreakpointObserver, never> {
+    ngOnDestroy(): void;
+    isMatched(value: string | readonly string[]): boolean;
+    observe(value: string | readonly string[]): Observable<BreakpointState>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NoopBreakpointObserver, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NoopBreakpointObserver>;
+}

package/core/breakpoints/provider.d.ts

@@ -0,0 +1,6 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { InjectionToken } from '@angular/core';
+/**
+ * Provides a {@link NoopBreakpointObserver} if the platform is not browser.
+ */
+export declare const SERVER_SAFE_BREAKPOINT_OBSERVER: InjectionToken<Omit<BreakpointObserver, never>>;

package/core/breakpoints/public_api.d.ts

@@ -0,0 +1,3 @@
+export * from './breakpoints';
+export * from './provider';
+export * from './noop.service';

package/core/colorable/colorable.d.ts

@@ -7,5 +7,39 @@ export interface DaffColorable {
 /**
  * These are the valid options that can be passed to a DaffColorable component
  */
-export type DaffPalette = 'primary' | 'secondary' | 'accent' | 'tertiary' | //TODO: damienwebdev Deprecate accent
-'black' | 'white' | 'theme' | 'theme-contrast' | undefined;
+export type DaffPalette = 'primary' | 'secondary' | 'tertiary' | 'black' | 'white' | 'theme' | 'theme-contrast' | undefined;
+/**
+ * Enumerates the available color palette options for a component.
+ * These values can be used to apply specific color styles to components within the
+ * application.
+ */
+export declare enum DaffPaletteEnum {
+    /**
+     * Your primary color.
+     */
+    Primary = "primary",
+    /**
+     * Your secondary color.
+     */
+    Secondary = "secondary",
+    /**
+     * Your tertiary color.
+     */
+    Tertiary = "tertiary",
+    /**
+     * Black. It's dark.
+     */
+    Black = "black",
+    /**
+     * White. It's bright.
+     */
+    White = "white",
+    /**
+     * The default color for your theme.
+     */
+    Theme = "theme",
+    /**
+     * A color that constrats against your defined theme.
+     */
+    ThemeContrast = "theme-contrast"
+}

package/core/colorable/colorable.directive.d.ts

@@ -0,0 +1,55 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { DaffColorable, DaffPalette } from './colorable';
+import * as i0 from "@angular/core";
+/**
+ * The `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
+ *
+ * ## Example
+ *
+ * ```html
+ * <div daffColorable [color]="componentColor">Colored content</div>
+ * ```
+ *
+ * ## 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`.
+ */
+export 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-black': boolean;
+        'daff-white': boolean;
+        'daff-theme': boolean;
+        'daff-theme-contrast': boolean;
+    };
+    /**
+     * Sets the color on a component.
+     */
+    color: DaffPalette;
+    /**
+     * Sets a default color.
+     */
+    defaultColor: DaffPalette;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffColorableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffColorableDirective, "[daffColorable]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+}

package/core/colorable/public_api.d.ts

@@ -1,2 +1,2 @@
 export { DaffPalette, DaffColorable, } from './colorable';
-export { daffColorMixin } from './colorable-mixin';
+export { DaffColorableDirective } from './colorable.directive';

package/core/compactable/compactable.directive.d.ts

@@ -0,0 +1,25 @@
+import * as i0 from "@angular/core";
+/**
+ * The `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.
+ *
+ * ## Example
+ *
+ * ```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.
+ *
+ * ## Styles
+ *
+ * The `daff-compact` class should be defined in your styles to display the compact
+ * state as desired.
+ */
+export declare class DaffCompactableDirective {
+    compact: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffCompactableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCompactableDirective, "[daffCompactable]", never, { "compact": { "alias": "compact"; "required": false; }; }, {}, never, never, true, never>;
+}

package/core/compactable/public_api.d.ts

@@ -1,2 +1,2 @@
 export { DaffCompactable } from './compactable';
-export { daffCompactableMixin } from './compactable-mixin';
+export { DaffCompactableDirective } from './compactable.directive';

package/core/manage-container-layout/manage-container-layout.directive.d.ts

@@ -0,0 +1,29 @@
+import * as i0 from "@angular/core";
+/**
+ * A directive that 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).
+ */
+export declare class DaffManageContainerLayoutDirective {
+    class: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffManageContainerLayoutDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffManageContainerLayoutDirective, "[daffManageContainerLayout]", never, {}, {}, never, never, true, never>;
+}

package/core/manage-container-layout/public_api.d.ts

@@ -1 +1 @@
-export { daffManageContainerLayoutMixin } from './manage-container-layout-mixin';
+export { DaffManageContainerLayoutDirective } from './manage-container-layout.directive';

package/core/public_api.d.ts

@@ -1,7 +1,7 @@
 export * from './animation/animation-state-with-params';
 export * from './prefix-suffix/public_api';
 export * from './colorable/public_api';
-export * from './breakpoints/breakpoints';
+export * from './breakpoints/public_api';
 export * from './constructor/constructor';
 export * from './statusable/public_api';
 export * from './skeletonable/public_api';

package/core/sizable/public_api.d.ts

@@ -1,2 +1,2 @@
 export { DaffSizable, DaffSizeAllType, DaffSizableEnum, DaffSizeXSmallType, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffSizeXLargeType, } from './sizable';
-export { daffSizeMixin } from './sizable-mixin';
+export { DaffSizableDirective } from './sizable.directive';

package/core/sizable/sizable.d.ts

@@ -1,6 +1,5 @@
 /**
- * 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.
  */
 export interface DaffSizable<T extends DaffSizeAllType> {
     size: T;
@@ -13,6 +12,9 @@ export type DaffSizeSmallType = 'sm';
 export type DaffSizeMediumType = 'md';
 export type DaffSizeLargeType = 'lg';
 export type DaffSizeXLargeType = 'xl';
+/**
+ * The a type representing all available sizes.
+ */
 export type DaffSizeAllType = DaffSizeXSmallType | DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType | DaffSizeXLargeType;
 export declare enum DaffSizableEnum {
     XSmall = "xs",

package/core/sizable/sizable.directive.d.ts

@@ -0,0 +1,38 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { DaffSizable, DaffSizeAllType } from './sizable';
+import * as i0 from "@angular/core";
+/**
+ * The `DaffSizableDirective` allows for dynamic sizing of a component by setting
+ * CSS classes based on the specified size.
+ *
+ * ## Example
+ *
+ * ```html
+ * <div daffSizable [size]="componentSize">Sized content</div>
+ * ```
+ */
+export 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 a component.
+     */
+    size: T;
+    /**
+     * Sets a default size when no size is provided.
+     */
+    defaultSize: T;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSizableDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSizableDirective<any>, "[daffSizable]", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+}

package/core/skeletonable/public_api.d.ts

@@ -1,2 +1,2 @@
 export { DaffSkeletonable } from './skeletonable';
-export { daffSkeletonableMixin } from './skeletonable-mixin';
+export { DaffSkeletonableDirective } from './skeletonable.directive';

package/core/skeletonable/skeletonable.d.ts

@@ -1,6 +1,5 @@
 /**
  * An interface for giving a component the ability to display a skeleton/loading UI.
- * In order to be skeletonable, our class must implement this property.
  */
 export interface DaffSkeletonable {
     skeleton: boolean;

package/core/skeletonable/skeletonable.directive.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+/**
+ * The `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.
+ *
+ * The styles for the`daff-skeleton` class should be defined component's
+ * stylesheets to display the loading state as desired.
+ */
+export declare class DaffSkeletonableDirective {
+    skeleton: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSkeletonableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSkeletonableDirective, "[daffSkeletonable]", never, { "skeleton": { "alias": "skeleton"; "required": false; }; }, {}, never, never, true, never>;
+}

package/core/statusable/public_api.d.ts

@@ -1,2 +1,2 @@
 export { DaffStatusable, DaffStatus, DaffStatusEnum, } from './statusable';
-export { daffStatusMixin } from './statusable-mixin';
+export { DaffStatusableDirective } from './statusable.directive';

package/core/statusable/statusable.d.ts

@@ -1,7 +1,23 @@
+/**
+ * The `DaffStatusable` interface defines a component that can have a status.
+ * This status determines the styling or behavior of the component.
+ */
 export interface DaffStatusable {
+    /**
+     * The status of the component.
+     */
     status: DaffStatus;
 }
+/**
+ * The `DaffStatus` type defines the possible status values that a component can have.
+ * - 'warn': Indicates a warning status.
+ * - 'danger': Indicates a danger or error status.
+ * - 'success': Indicates a success status.
+ */
 export type DaffStatus = 'warn' | 'danger' | 'success';
+/**
+ * The `DaffStatusEnum` enumerates the possible status values for a component.
+ */
 export declare enum DaffStatusEnum {
     Warn = "warn",
     Danger = "danger",

package/core/statusable/statusable.directive.d.ts

@@ -0,0 +1,38 @@
+import { DaffStatus, DaffStatusable } from './statusable';
+import * as i0 from "@angular/core";
+/**
+ * The `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 warnings, errors, or success states.
+ *
+ * ## Example
+ *
+ * ```html
+ * <div daffStatusable [status]="componentStatus">Status content</div>
+ * ```
+ *
+ * ## 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`.
+ */
+export declare class DaffStatusableDirective implements DaffStatusable {
+    /**
+     * Dynamically sets the CSS classes based on the status.
+     * @docs-private
+     */
+    get class(): {
+        'daff-warn': boolean;
+        'daff-danger': boolean;
+        'daff-success': boolean;
+    };
+    /**
+     * Sets the status on a component.
+     */
+    status: DaffStatus;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffStatusableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffStatusableDirective, "[daffStatusable]", never, { "status": { "alias": "status"; "required": false; }; }, {}, never, never, true, never>;
+}

package/core/text-alignable/public_api.d.ts

@@ -1,2 +1,2 @@
 export { DaffTextAlignable, DaffTextAlignment, DaffTextAlignmentEnum, } from './text-alignable';
-export { daffTextAlignmentMixin } from './text-alignable-mixin';
+export { DaffTextAlignableDirective } from './text-alignable.directive';

package/core/text-alignable/text-alignable.d.ts

@@ -1,6 +1,5 @@
 /**
- * An interface for giving a component the ability to customize text alignment for component-specific UI.
- * In order to be text alignable, a component class must implement this property.
+ * Interface for giving a component the ability to customize text alignment for component-specific UI.
  */
 export interface DaffTextAlignable {
     textAlignment: DaffTextAlignment;

package/core/text-alignable/text-alignable.directive.d.ts

@@ -0,0 +1,42 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { DaffTextAlignable, DaffTextAlignment } from './text-alignable';
+import * as i0 from "@angular/core";
+/**
+ * The `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.
+ *
+ * ## Example
+ *
+ * ```html
+ * <div daffTextAlignable textAlignment="center">Aligned text</div>
+ * ```
+ *
+ * ## 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
+ * application of `text-align:center` would cause unexpected side effects.
+ */
+export declare class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges {
+    /**
+     * @docs-private
+     */
+    get class(): {
+        'daff-left': boolean;
+        'daff-center': boolean;
+        'daff-right': boolean;
+    };
+    /**
+     * The text-alignment of a component.
+     */
+    textAlignment: DaffTextAlignment;
+    /**
+     * Sets a default textAlignment.
+     */
+    defaultAlignment: DaffTextAlignment;
+    ngOnChanges(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTextAlignableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffTextAlignableDirective, "[daffTextAlignable]", never, { "textAlignment": { "alias": "textAlignment"; "required": false; }; }, {}, never, never, true, never>;
+}