feat(stylesytem): StyleSystem Support

* Including appliedCssClassNames on Host Comp

* Testcase updated for better coverage

* feat(stylesytem): Supports StyleSystem

Angular SPAs can now take advantage of StyleSystem,
and authoring experience can be enriched.

* feat(stylesytem): Supports StyleSystem

Angular SPAs can now take advantage of StyleSystem, and authoring experience can be enriched.

Co-authored-by: Mahidhar Chaluvadi <mahidhar.chaluvadi@slalom.com>

.gitignore

@@ -3,3 +3,4 @@ dist/
 .scannerwork/
 **/*.log
 *.tgz
+coverage/*

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@adobe/aem-angular-editable-components",
+   "name": "@adobe/aem-angular-editable-components",
   "version": "1.0.5",
   "description": "Provides Angular components and integration layer with Adobe Experience Manager Page Editor.",
   "keywords": [
@@ -95,12 +95,12 @@
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
+        }
+    },
+    "eslintConfig": {
+        "root": true,
+        "extends": [
+            "@adobe/eslint-config-editorxp/angular"
+        ]
     }
-  },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@adobe/eslint-config-editorxp/angular"
-    ]
-  }
 }

src/lib/layout/aem-component.directive.spec.ts

@@ -26,23 +26,19 @@ class AEMDirectiveTestComponent {
   @Input() data;
 }
 
-
 @Component({
+  // tslint:disable-next-line:component-selector
   selector: 'directive-component',
+  // tslint:disable-next-line:no-host-metadata-property
   host: {
       '[attr.attr1]': 'attr1',
-      '[attr.attr2]': 'attr2',
-      '[class]': 'hostClasses'
+      '[attr.attr2]': 'attr2'
   },
   template: `<div></div>`
 })
 class DirectiveComponent extends AbstractMappedComponent {
   @Input() attr1;
   @Input() attr2;
-
-  get hostClasses() {
-    return 'component-class';
-  }
 }
 MapTo<DirectiveComponent>('directive/comp')(DirectiveComponent);
 LazyMapTo<LazyComponentType>('some/lazy/comp')(() => import('../test/lazy-component-wrapper/lazy.component').then((m) => m.LazyComponent));
@@ -94,7 +90,8 @@ describe('AEMComponentDirective', () => {
     const componentData = {
       attr1: 'Some value',
       attr2: 'Another value',
-      ':type': 'directive/comp'
+      ':type': 'directive/comp',
+      appliedCssClassNames: 'applied-css-class1'
     };
 
     component.data = componentData;
@@ -105,7 +102,28 @@ describe('AEMComponentDirective', () => {
 
     expect(dynamicElement.getAttribute('attr1')).toEqual(componentData['attr1']);
     expect(dynamicElement.getAttribute('attr2')).toEqual(componentData['attr2']);
+    expect(dynamicElement.getAttribute('class')).toEqual(componentData['appliedCssClassNames']);
+
   });
+
+  it('should not resolve if incoming type is non existing', () => {
+    const componentData = {
+      attr1: 'Some value',
+      attr2: 'Another value',
+      ':type': 'directive/unknown-comp',
+      appliedCssClassNames: 'applied-css-class1'
+    };
+
+    component.data = componentData;
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement;
+    const dynamicElement = element.firstElementChild;
+
+    expect(dynamicElement).toBeNull();
+
+  });
+
   it('should correctly pass the inputs for lazy component', async() => {
     const componentData = {
       some: 'Some value',
@@ -119,8 +137,6 @@ describe('AEMComponentDirective', () => {
 
   });
 
-
-
   it('should setup the placeholder', () => {
     isInEditorSpy.and.returnValue(true);
     getEditConfigSpy.and.returnValue(TEST_EDIT_CONFIG_EMPTY);

src/lib/layout/aem-component.directive.ts

@@ -91,7 +91,6 @@ export class AEMComponentDirective implements AfterViewInit, OnInit, OnDestroy,
 
   @Input() aemComponent;
 
-
   constructor(
     private renderer: Renderer2,
     private viewContainer: ViewContainerRef,
@@ -188,6 +187,7 @@ export class AEMComponentDirective implements AfterViewInit, OnInit, OnDestroy,
 
     this._component.instance.cqPath = this.cqPath;
     this._component.instance.itemName = this.itemName;
+    this.includeAppliedCSSClasses();
 
     const editConfig = ComponentMapping.getEditConfig(this.type);
 
@@ -198,6 +198,17 @@ export class AEMComponentDirective implements AfterViewInit, OnInit, OnDestroy,
     this._changeDetectorRef.detectChanges();
   }
 
+  /**
+   * Adds the applied css class names in to the element
+   */
+  private includeAppliedCSSClasses() {
+    const appliedCssClassNames = this.cqItem[Constants.APPLIED_CLASS_NAMES] || '';
+
+    if (appliedCssClassNames && this._component) {
+      this.renderer.setAttribute(this._component.location.nativeElement, 'class', appliedCssClassNames);
+    }
+  }
+
   /**
    * Adds the specified item attributes to the element
    */
@@ -248,6 +259,8 @@ export class AEMComponentDirective implements AfterViewInit, OnInit, OnDestroy,
   }
 
   ngOnDestroy(): void {
-    this._component && this._component.destroy();
+    if (this._component) {
+      this._component.destroy();
+    }
   }
 }

src/lib/layout/constants.ts

@@ -20,6 +20,11 @@ export const Constants = {
      */
     NEW_SECTION_CLASS_NAMES: 'new section',
 
+    /**
+     *  CSS Class names applied to a component.
+     */
+    APPLIED_CLASS_NAMES: 'appliedCssClassNames',
+
     TYPE_PROP: PMConstants.TYPE_PROP,
 
     /**