feat(design): deprecate DaffTextAlignableEnum and DaffTextAlignable and update documentation

libs/design/src/core/text-alignable/README.md

@@ -0,0 +1,68 @@
+# Text Alignable
+
+Text alignable enforces consistent use of text alignment across components.
+
+## Overview
+
+`DaffTextAlignableDirective` applies alignment-specific CSS classes and validates the alignment in dev mode. When an alignment is set, the corresponding `daff-[alignment]` class is added.
+
+## Supported alignments
+
+| Alignment | CSS Class |
+|---|---|
+| `left` | `.daff-left` |
+| `center` | `.daff-center` |
+| `right` | `.daff-right` |
+
+## Usage
+
+Use `daffTextAlignable` as an attribute selector:
+
+```html
+<div daffTextAlignable textAlignment="center">Aligned text</div>
+```
+
+Or as an Angular host directive:
+
+```ts
+import { DaffTextAlignableDirective } from '@daffodil/design';
+
+@Component({
+  selector: 'custom-component',
+  template: 'custom-component.html',
+  hostDirectives: [
+    {
+      directive: DaffTextAlignableDirective,
+      inputs: ['textAlignment'],
+    },
+  ],
+})
+export class CustomComponent { }
+```
+
+### Default alignment
+
+Set `defaultAlignment` to apply an alignment when `textAlignment` is not explicitly provided:
+
+```ts
+constructor(private textAlignable: DaffTextAlignableDirective) {
+  this.textAlignable.defaultAlignment = 'left';
+}
+```
+
+## Styles
+
+Use the applied CSS class to style each alignment variant:
+
+```scss
+.custom-component {
+  &.daff-center {
+    text-align: center;
+		margin: 0 auto;
+  }
+}
+```
+
+## Warnings
+
+A console warning is shown in dev mode if a value is not part of the supported alignments.

libs/design/src/core/text-alignable/text-alignable.directive.ts

@@ -24,49 +24,7 @@ const validateTextAlignment = (textAlignment: string) => {
 };
 
 /**
- * `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.
- *
- * ## 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.
- *
- * @example 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.
- *
- * @example Implementing it as an Angular host directive
- *
- * ```ts
- * @Component({
- *  selector: 'custom-component',
- *  template: 'custom-component.html',
- *  hostDirectives: [
- *    {
- *      directive: DaffTextAlignableDirective,
- *      inputs: ['textAlignment'],
- *    },
- *  ],
- * })
- * export class CustomComponent { }
- * ```
- *
- * ```scss
- * .custom-component {
- *  &.daff-left {
- *    text-align: left;
- *  }
- * }
- * ```
+ * `DaffTextAlignableDirective` enforces consistent use of text alignment across components.
  */
 @Directive({
   selector: '[daffTextAlignable]',
@@ -84,14 +42,7 @@ export class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges,
   @Input() textAlignment: DaffTextAlignment;
 
   /**
-   * Sets a default alignment.
-   *
-   * @example
-   * ```ts
-   * constructor(private textAligmentDirective: DaffTextAlignableDirective) {
-   *  this.textAligmentDirective.defaultAlignent = 'left';
-   * }
-   * ```
+   * The default used when no text alignment is set.
    */
   public defaultAlignment: DaffTextAlignment;
 

libs/design/src/core/text-alignable/text-alignable.ts

@@ -1,14 +1,18 @@
 /**
- * Interface for giving a component the ability to customize text alignment for component-specific UI.
+ * @deprecated Deprecated in version 0.92.1. Will be removed in version 1.0.0.
  */
 export interface DaffTextAlignable {
   textAlignment: DaffTextAlignment;
 }
 
 /**
- * The possible types that can be passed to a DaffTextAlignable component
+ *  * The available text alignment options.
  */
 export type DaffTextAlignment = 'left' | 'center' | 'right';
+
+/**
+ * This enum will be removed from the public api in v1.0.0.
+ */
 export enum DaffTextAlignmentEnum {
   Left = 'left',
   Center = 'center',