From 3816ec12f578dce4e7f199a2cebc66033cd74c18 Mon Sep 17 00:00:00 2001 From: friendlymahi <34920377+friendlymahi@users.noreply.github.com> Date: Thu, 2 Sep 2021 01:11:36 -0500 Subject: [PATCH] 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 --- .gitignore | 1 + package.json | 16 ++++----- .../layout/aem-component.directive.spec.ts | 36 +++++++++++++------ src/lib/layout/aem-component.directive.ts | 17 +++++++-- src/lib/layout/constants.ts | 5 +++ 5 files changed, 55 insertions(+), 20 deletions(-) diff --git a/.gitignore b/.gitignore index 0ea9de3..0b603ad 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ dist/ .scannerwork/ **/*.log *.tgz +coverage/* diff --git a/package.json b/package.json index 0aeda3a..81e63fb 100644 --- a/package.json +++ b/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" - ] - } } diff --git a/src/lib/layout/aem-component.directive.spec.ts b/src/lib/layout/aem-component.directive.spec.ts index 44bfd8d..a98de50 100644 --- a/src/lib/layout/aem-component.directive.spec.ts +++ b/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: `
` }) class DirectiveComponent extends AbstractMappedComponent { @Input() attr1; @Input() attr2; - - get hostClasses() { - return 'component-class'; - } } MapTo('directive/comp')(DirectiveComponent); LazyMapTo('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); diff --git a/src/lib/layout/aem-component.directive.ts b/src/lib/layout/aem-component.directive.ts index e1f81db..4c18be3 100644 --- a/src/lib/layout/aem-component.directive.ts +++ b/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(); + } } } diff --git a/src/lib/layout/constants.ts b/src/lib/layout/constants.ts index 154d5a9..5b9ea58 100644 --- a/src/lib/layout/constants.ts +++ b/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, /**