feat(design)!: change daffTextAlignmentMixin to a directive

libs/design/callout/src/callout/callout.component.spec.ts

@@ -79,47 +79,7 @@ describe('@daffodil/design/callout | DaffCalloutComponent', () => {
     wrapper.textAlignment = 'left';
     fixture.detectChanges();
 
-    expect(component.textAlignment).toEqual('left');
-  });
-
-  describe('setting the textAlignment', () => {
-    it('should add the class of the defined textAlignment to the host element', () => {
-      wrapper.textAlignment = 'left';
-      fixture.detectChanges();
-
-      expect(de.nativeElement.classList.contains('daff-left')).toEqual(true);
-    });
-
-    it('should set the default textAlignment to left', () => {
-      expect(component.textAlignment).toEqual('left');
-    });
-
-    describe('when textAlignment="left"', () => {
-      it('should add a class of "daff-left" to the host element', () => {
-        wrapper.textAlignment = 'left';
-        fixture.detectChanges();
-
-        expect(de.nativeElement.classList.contains('daff-left')).toBeTruthy();
-      });
-    });
-
-    describe('when textAlignment="center"', () => {
-      it('should add a class of "daff-center" to the host element', () => {
-        wrapper.textAlignment = 'center';
-        fixture.detectChanges();
-
-        expect(de.nativeElement.classList.contains('daff-center')).toBeTruthy();
-      });
-    });
-
-    describe('when textAlignment="right"', () => {
-      it('should add a class of "daff-right" to the host element', () => {
-        wrapper.textAlignment = 'right';
-        fixture.detectChanges();
-
-        expect(de.nativeElement.classList.contains('daff-right')).toBeTruthy();
-      });
-    });
+    expect(de.nativeElement.classList.contains('daff-left')).toEqual(true);
   });
 
   it('should take compact as an input', () => {

libs/design/callout/src/callout/callout.component.ts

@@ -14,8 +14,7 @@ import {
   DaffCompactable,
   daffCompactableMixin,
   DaffManageContainerLayoutDirective,
-  DaffTextAlignable,
-  daffTextAlignmentMixin,
+  DaffTextAlignableDirective,
 } from '@daffodil/design';
 
 /**
@@ -25,7 +24,7 @@ class DaffCalloutBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffCalloutBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left')));
+const _daffCalloutBase = daffColorMixin(daffCompactableMixin(DaffCalloutBase));
 
 /**
  * @inheritdoc
@@ -37,16 +36,26 @@ const _daffCalloutBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMi
   encapsulation: ViewEncapsulation.None,
   //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'compact', 'textAlignment'],
+  inputs: ['color', 'compact'],
   hostDirectives: [
     { directive: DaffArticleEncapsulatedDirective },
     { directive: DaffManageContainerLayoutDirective },
+    {
+      directive: DaffTextAlignableDirective,
+      inputs: ['textAlignment'],
+    },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffCalloutComponent extends _daffCalloutBase implements DaffColorable, DaffTextAlignable, DaffCompactable {
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
+export class DaffCalloutComponent extends _daffCalloutBase implements DaffColorable, DaffCompactable {
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private textAlignable: DaffTextAlignableDirective,
+  ) {
     super(elementRef, renderer);
+
+    this.textAlignable.textAlignment = 'left';
   }
 
   /**

libs/design/hero/src/hero/hero.component.spec.ts

@@ -76,47 +76,7 @@ describe('@daffodil/design/hero | DaffHeroComponent', () => {
     wrapper.textAlignment = 'left';
     fixture.detectChanges();
 
-    expect(component.textAlignment).toEqual('left');
-  });
-
-  describe('setting the textAlignment', () => {
-    it('should add the class of the defined textAlignment to the host element', () => {
-      wrapper.textAlignment = 'left';
-      fixture.detectChanges();
-
-      expect(de.nativeElement.classList.contains('daff-left')).toEqual(true);
-    });
-
-    it('should set the default textAlignment to left', () => {
-      expect(component.textAlignment).toEqual('left');
-    });
-
-    describe('when textAlignment="left"', () => {
-      it('should add a class of "daff-left" to the host element', () => {
-        wrapper.textAlignment = 'left';
-        fixture.detectChanges();
-
-        expect(de.nativeElement.classList.contains('daff-left')).toBeTruthy();
-      });
-    });
-
-    describe('when textAlignment="center"', () => {
-      it('should add a class of "daff-center" to the host element', () => {
-        wrapper.textAlignment = 'center';
-        fixture.detectChanges();
-
-        expect(de.nativeElement.classList.contains('daff-center')).toBeTruthy();
-      });
-    });
-
-    describe('when textAlignment="right"', () => {
-      it('should add a class of "daff-right" to the host element', () => {
-        wrapper.textAlignment = 'right';
-        fixture.detectChanges();
-
-        expect(de.nativeElement.classList.contains('daff-right')).toBeTruthy();
-      });
-    });
+    expect(de.nativeElement.classList.contains('daff-left')).toEqual(true);
   });
 
   it('should take compact as an input', () => {

libs/design/hero/src/hero/hero.component.ts

@@ -5,6 +5,8 @@ import {
   ChangeDetectionStrategy,
   HostBinding,
   Renderer2,
+  SimpleChanges,
+  OnChanges,
 } from '@angular/core';
 
 import {
@@ -14,8 +16,7 @@ import {
   DaffCompactable,
   daffCompactableMixin,
   DaffManageContainerLayoutDirective,
-  DaffTextAlignable,
-  daffTextAlignmentMixin,
+  DaffTextAlignableDirective,
 } from '@daffodil/design';
 
 /**
@@ -25,7 +26,7 @@ class DaffHeroBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffHeroBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left')));
+const _daffHeroBase = daffColorMixin(daffCompactableMixin(DaffHeroBase));
 
 /**
  * @inheritdoc
@@ -37,16 +38,26 @@ const _daffHeroBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin
   encapsulation: ViewEncapsulation.None,
   //todo(damienwebdev): remove once decorators hit stage 3 - https://github.com/microsoft/TypeScript/issues/7342
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'compact', 'textAlignment'],
+  inputs: ['color', 'compact'],
   hostDirectives: [
     { directive: DaffArticleEncapsulatedDirective },
     { directive: DaffManageContainerLayoutDirective },
+    {
+      directive: DaffTextAlignableDirective,
+      inputs: ['textAlignment'],
+    },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffHeroComponent extends _daffHeroBase implements DaffColorable, DaffTextAlignable, DaffCompactable {
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
+export class DaffHeroComponent extends _daffHeroBase implements DaffColorable, DaffCompactable {
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private textAlignable: DaffTextAlignableDirective,
+  ){
     super(elementRef, renderer);
+
+    this.textAlignable.defaultAlignment = 'left';
   }
 
   /**

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

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

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

@@ -0,0 +1,86 @@
+import {
+  Component,
+  DebugElement,
+} from '@angular/core';
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { DaffTextAlignment } from './text-alignable';
+import { DaffTextAlignableDirective } from './text-alignable.directive';
+
+@Component({
+  template: `
+		<div daffTextAlignable [textAlignment]="textAlignment"></div>`,
+})
+
+class WrapperComponent {
+  textAlignment: DaffTextAlignment;
+}
+
+describe('@daffodil/design | DaffTextAlignableDirective', () => {
+  let wrapper: WrapperComponent;
+  let de: DebugElement;
+  let fixture: ComponentFixture<WrapperComponent>;
+  let directive: DaffTextAlignableDirective;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        WrapperComponent,
+      ],
+      imports: [
+        DaffTextAlignableDirective,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('[daffTextAlignable]'));
+
+    directive = de.injector.get(DaffTextAlignableDirective);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(wrapper).toBeTruthy();
+    expect(directive).toBeTruthy();
+  });
+
+  it('should take textAlignment as an input', () => {
+    expect(directive.textAlignment).toEqual(wrapper.textAlignment);
+  });
+
+  it('should add a class of .daff-left to the host element if textAlignment is set to left', () => {
+    wrapper.textAlignment = 'left';
+    fixture.detectChanges();
+
+    expect(directive.class).toEqual(jasmine.objectContaining({
+      'daff-left': true,
+    }));
+  });
+
+  it('should add a class of .daff-center to the host element if textAlignment is set to center', () => {
+    wrapper.textAlignment = 'center';
+    fixture.detectChanges();
+
+    expect(directive.class).toEqual(jasmine.objectContaining({
+      'daff-center': true,
+    }));
+  });
+
+  it('should add a class of .daff-right to the host element if textAlignment is set to right', () => {
+    wrapper.textAlignment = 'right';
+    fixture.detectChanges();
+
+    expect(directive.class).toEqual(jasmine.objectContaining({
+      'daff-right': true,
+    }));
+  });
+});