feat(design): implement daffArticleEncapsulatedMixin (#1917)

apps/design-land/src/app/core/article-encapsulated/article-encapsulated.component.ts

@@ -0,0 +1,26 @@
+import {
+  Component,
+  ElementRef,
+  Renderer2,
+} from '@angular/core';
+
+import { daffArticleEncapsulatedMixin } from '@daffodil/design';
+
+/**
+ * An _elementRef and an instance of renderer2 are needed for the link set mixins
+ */
+class DesignLandArticleEncapsulatedBase {
+  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
+}
+
+const _designLandArticleEncapsulatedBase = daffArticleEncapsulatedMixin((DesignLandArticleEncapsulatedBase));
+
+@Component({
+  selector: 'design-land-article-encapsulated',
+  template: '<ng-content></ng-content>',
+})
+export class DesignLandArticleEncapsulatedComponent extends _designLandArticleEncapsulatedBase {
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
+    super(elementRef, renderer);
+  }
+}

apps/design-land/src/app/core/article-encapsulated/article-encapsulated.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { DesignLandArticleEncapsulatedComponent } from './article-encapsulated.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    DesignLandArticleEncapsulatedComponent,
+  ],
+  exports: [
+    DesignLandArticleEncapsulatedComponent,
+  ],
+})
+export class DesignLandArticleEncapsulatedModule { }

libs/design/src/atoms/button/button.component.ts

@@ -9,6 +9,7 @@ import {
   Renderer2,
 } from '@angular/core';
 
+import { daffArticleEncapsulatedMixin } from '../../core/article-encapsulated/public_api';
 import {
   daffColorMixin,
   DaffColorable,
@@ -47,7 +48,7 @@ class DaffButtonBase{
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffButtonBase = daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin(daffSizeMixin<DaffButtonSize>(DaffButtonBase, 'md')))));
+const _daffButtonBase = daffArticleEncapsulatedMixin(daffPrefixableMixin(daffSuffixableMixin(daffColorMixin(daffStatusMixin(daffSizeMixin<DaffButtonSize>(DaffButtonBase, 'md'))))));
 
 export type DaffButtonType = 'daff-button' | 'daff-stroked-button' | 'daff-raised-button' | 'daff-icon-button' | 'daff-underline-button' | undefined;
 

libs/design/src/molecules/accordion/accordion/accordion.component.ts

@@ -1,15 +1,30 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ElementRef,
+  Renderer2,
 } from '@angular/core';
 
+import { daffArticleEncapsulatedMixin } from '../../../core/article-encapsulated/public_api';
+
+/**
+ * An _elementRef and an instance of renderer2 are needed for the link set mixins
+ */
+class DaffAccordionBase {
+  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
+}
+
+const _daffAccordionBase = daffArticleEncapsulatedMixin((DaffAccordionBase));
+
 @Component({
   selector: 'daff-accordion',
   templateUrl: './accordion.component.html',
   styleUrls: ['./accordion.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
-export class DaffAccordionComponent {
-
+export class DaffAccordionComponent extends _daffAccordionBase {
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
+    super(elementRef, renderer);
+  }
 }

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

@@ -8,7 +8,7 @@ import {
   Renderer2,
 } from '@angular/core';
 
-
+import { daffArticleEncapsulatedMixin } from '../../../core/article-encapsulated/public_api';
 import {
   DaffColorable,
   daffColorMixin,
@@ -44,7 +44,7 @@ class DaffCalloutBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffCalloutBase = daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left'))));
+const _daffCalloutBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffCalloutBase, 'left')))));
 
 /**
  * @inheritdoc

libs/design/src/molecules/card/card/card.component.ts

@@ -9,6 +9,7 @@ import {
   OnInit,
 } from '@angular/core';
 
+import { daffArticleEncapsulatedMixin } from '../../../core/article-encapsulated/public_api';
 import {
   DaffColorable,
   daffColorMixin,
@@ -37,7 +38,7 @@ class DaffCardBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffCardBase = daffColorMixin(DaffCardBase);
+const _daffCardBase = daffArticleEncapsulatedMixin(daffColorMixin(DaffCardBase));
 
 /**
  * @inheritdoc

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

@@ -8,7 +8,7 @@ import {
   Renderer2,
 } from '@angular/core';
 
-
+import { daffArticleEncapsulatedMixin } from '../../../core/article-encapsulated/public_api';
 import {
   daffColorMixin,
   DaffColorable,
@@ -39,13 +39,13 @@ export enum DaffHeroSizeEnum {
 }
 
 /**
- * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
+ * An _elementRef and an instance of renderer2 are needed for the hero mixins
  */
 class DaffHeroBase {
   constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
 }
 
-const _daffHeroBase = daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left'))));
+const _daffHeroBase = daffArticleEncapsulatedMixin(daffManageContainerLayoutMixin(daffColorMixin(daffCompactableMixin(daffTextAlignmentMixin(DaffHeroBase, 'left')))));
 
 /**
  * @inheritdoc

libs/design/src/molecules/link-set/link-set/link-set.component.ts

@@ -2,10 +2,22 @@ import {
   Component,
   HostBinding,
   ViewEncapsulation,
-  Input,
   ChangeDetectionStrategy,
+  ElementRef,
+  Renderer2,
 } from '@angular/core';
 
+import { daffArticleEncapsulatedMixin } from '../../../core/article-encapsulated/public_api';
+
+/**
+ * An _elementRef and an instance of renderer2 are needed for the link set mixins
+ */
+class DaffLinkSetBase {
+  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
+}
+
+const _daffLinkSetBase = daffArticleEncapsulatedMixin((DaffLinkSetBase));
+
 /**
  * DaffLinkSetComponent is a component for displaying a two or more links.
  */
@@ -16,10 +28,14 @@ import {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DaffLinkSetComponent {
+export class DaffLinkSetComponent extends _daffLinkSetBase {
 
   /**
    * @docs-private
    */
   @HostBinding('class.daff-link-set') class = true;
+
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
+    super(elementRef, renderer);
+  }
 }

libs/design/src/molecules/list/list/list.component.ts

@@ -5,8 +5,11 @@ import {
   Input,
   HostBinding,
   ElementRef,
+  Renderer2,
 } from '@angular/core';
 
+import { daffArticleEncapsulatedMixin } from '../../../core/article-encapsulated/public_api';
+
 /**
  * @deprecated
  * DaffListMode will be completely deprecated in v1.0.0
@@ -25,6 +28,15 @@ enum DaffListTypeEnum {
   Nav = 'daff-nav-list'
 }
 
+/**
+ * An _elementRef and an instance of renderer2 are needed for the list mixins
+ */
+class DaffListBase {
+  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
+}
+
+const _daffListBase = daffArticleEncapsulatedMixin((DaffListBase));
+
 @Component({
   selector:
     'daff-list' + ',' +
@@ -35,7 +47,7 @@ enum DaffListTypeEnum {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
-export class DaffListComponent {
+export class DaffListComponent extends _daffListBase {
   /**
    * @deprecated
    * */
@@ -79,7 +91,9 @@ export class DaffListComponent {
     return this._getHostElement().localName;
   }
 
-  constructor(private elementRef: ElementRef) {}
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
+    super(elementRef, renderer);
+  }
 
   /**
    * @docs-private

libs/design/src/molecules/media-gallery/media-gallery.component.ts

@@ -5,14 +5,26 @@ import {
   Input,
   OnInit,
   OnDestroy,
+  ElementRef,
+  Renderer2,
 } from '@angular/core';
 
+import { daffArticleEncapsulatedMixin } from '../../core/article-encapsulated/public_api';
 import { DaffMediaGalleryRegistration } from './media-gallery-registration.interface';
 import { DAFF_MEDIA_GALLERY_TOKEN } from './media-gallery-token';
 import { DaffMediaGalleryRegistry } from './registry/media-gallery.registry';
 
 let uniqueGalleryId = 0;
 
+/**
+ * An _elementRef and an instance of renderer2 are needed for the link set mixins
+ */
+class DaffMediaGalleryBase {
+  constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {}
+}
+
+const _daffMediaGalleryBase = daffArticleEncapsulatedMixin((DaffMediaGalleryBase));
+
 @Component({
   selector: 'daff-media-gallery',
   templateUrl: './media-gallery.component.html',
@@ -23,7 +35,7 @@ let uniqueGalleryId = 0;
     { provide: DAFF_MEDIA_GALLERY_TOKEN, useExisting: DaffMediaGalleryComponent },
   ],
 })
-export class DaffMediaGalleryComponent implements DaffMediaGalleryRegistration, OnInit, OnDestroy {
+export class DaffMediaGalleryComponent extends _daffMediaGalleryBase implements DaffMediaGalleryRegistration, OnInit, OnDestroy {
 	/**
 	 * Adds a class for styling the media gallery
 	 */
@@ -34,8 +46,13 @@ export class DaffMediaGalleryComponent implements DaffMediaGalleryRegistration,
 	 */
 	@Input() name = `${uniqueGalleryId}`;
 
-	constructor(private registry: DaffMediaGalleryRegistry) {
-	  uniqueGalleryId++;
+	constructor(
+		private elementRef: ElementRef,
+		private renderer: Renderer2,
+		private registry: DaffMediaGalleryRegistry,
+	) {
+	  	super(elementRef, renderer);
+	  	uniqueGalleryId++;
 	}
 
 	ngOnInit() {