feat(design)!: change daffManageContainerLayoutMixin to a directive (#2919)

BREAKING CHANGE: daffManageContainerLayoutMixin has been removed in favor of DaffManageContainerLayoutDirective. Update usage by using the hostDirective feature.

Author: xelaint

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

@@ -13,7 +13,7 @@ import {
   daffColorMixin,
   DaffCompactable,
   daffCompactableMixin,
-  daffManageContainerLayoutMixin,
+  DaffManageContainerLayoutDirective,
   DaffTextAlignable,
   daffTextAlignmentMixin,
 } from '@daffodil/design';
@@ -25,7 +25,7 @@ class DaffCalloutBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffCalloutBase = daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left'))));
+const _daffCalloutBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left')));
 
 /**
  * @inheritdoc
@@ -38,9 +38,10 @@ const _daffCalloutBase = daffManageContainerLayoutMixin(daffColorMixin(daffCompa
   //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'],
-  hostDirectives: [{
-    directive: DaffArticleEncapsulatedDirective,
-  }],
+  hostDirectives: [
+    { directive: DaffArticleEncapsulatedDirective },
+    { directive: DaffManageContainerLayoutDirective },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffCalloutComponent extends _daffCalloutBase implements DaffColorable, DaffTextAlignable, DaffCompactable {

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

@@ -13,7 +13,7 @@ import {
   daffColorMixin,
   DaffCompactable,
   daffCompactableMixin,
-  daffManageContainerLayoutMixin,
+  DaffManageContainerLayoutDirective,
   DaffTextAlignable,
   daffTextAlignmentMixin,
 } from '@daffodil/design';
@@ -25,7 +25,7 @@ class DaffHeroBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffHeroBase = daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left'))));
+const _daffHeroBase = daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left')));
 
 /**
  * @inheritdoc
@@ -38,9 +38,10 @@ const _daffHeroBase = daffManageContainerLayoutMixin(daffColorMixin(daffCompacta
   //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'],
-  hostDirectives: [{
-    directive: DaffArticleEncapsulatedDirective,
-  }],
+  hostDirectives: [
+    { directive: DaffArticleEncapsulatedDirective },
+    { directive: DaffManageContainerLayoutDirective },
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffHeroComponent extends _daffHeroBase implements DaffColorable, DaffTextAlignable, DaffCompactable {

libs/design/navbar/src/navbar/navbar.component.ts

@@ -9,8 +9,8 @@ import {
 
 import {
   DaffColorable,
+  DaffManageContainerLayoutDirective,
   daffColorMixin,
-  daffManageContainerLayoutMixin,
 } from '@daffodil/design';
 
 /**
@@ -20,7 +20,7 @@ class DaffNavbarBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffNavbarBase = daffManageContainerLayoutMixin(daffColorMixin(DaffNavbarBase));
+const _daffNavbarBase = daffColorMixin(DaffNavbarBase);
 
 /**
  * @inheritdoc
@@ -33,6 +33,9 @@ const _daffNavbarBase = daffManageContainerLayoutMixin(daffColorMixin(DaffNavbar
   //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'],
+  hostDirectives: [{
+    directive: DaffManageContainerLayoutDirective,
+  }],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffNavbarComponent extends _daffNavbarBase implements DaffColorable {

libs/design/src/core/manage-container-layout/manage-container-layout-mixin.ts

@@ -0,0 +1,57 @@
+import {
+  Component,
+  DebugElement,
+} from '@angular/core';
+import {
+  waitForAsync,
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { DaffManageContainerLayoutDirective } from './manage-container-layout.directive';
+
+@Component({
+  template: `
+		<div daffManageContainerLayout></div>`,
+})
+
+class WrapperComponent {}
+
+describe('@daffodil/design | DaffManageContainerLayoutDirective', () => {
+  let wrapper: WrapperComponent;
+  let de: DebugElement;
+  let fixture: ComponentFixture<WrapperComponent>;
+  let directive: DaffManageContainerLayoutDirective;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        WrapperComponent,
+      ],
+      imports: [
+        DaffManageContainerLayoutDirective,
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WrapperComponent);
+    wrapper = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('[daffManageContainerLayout]'));
+    directive = de.injector.get(DaffManageContainerLayoutDirective);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(wrapper).toBeTruthy();
+    expect(directive).toBeTruthy();
+  });
+
+  it('should add a class of "daff-manage-container-layout" to the host element', () => {
+    expect(de.classes).toEqual(jasmine.objectContaining({
+      'daff-manage-container-layout': true,
+    }));
+  });
+});

libs/design/src/core/manage-container-layout/manage-container-layout.directive.spec.ts

@@ -0,0 +1,35 @@
+import {
+  Directive,
+  HostBinding,
+} 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).
+ */
+@Directive({
+  selector: '[daffManageContainerLayout]',
+  standalone: true,
+})
+export class DaffManageContainerLayoutDirective {
+  @HostBinding('class.daff-manage-container-layout') class = true;
+}

libs/design/src/core/manage-container-layout/manage-container-layout.directive.ts

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