Ensured that it is possible to set custom class on fa-layers element

Fixes #98
FortAwesome · Oct 1, 2018 · 4b04f40 · 4b04f40
1 parent 4d3dbe2
commit 4b04f40
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 30 deletions.
diff --git a/src/lib/layers/layers.component.spec.ts b/src/lib/layers/layers.component.spec.ts
@@ -82,7 +82,6 @@ describe('FaLayersCompoennt', () => {
     expect(queryByCss(fixture, '.fa-fw')).toBeTruthy();
   });
 
-
   it('should not include fixed width', () => {
     @Component({
       selector: 'fa-host',
@@ -101,5 +100,31 @@ describe('FaLayersCompoennt', () => {
     fixture.detectChanges();
     expect(queryByCss(fixture, '.fa-fw')).toBeFalsy();
   });
+
+  it('should allow setting custom class on the host element', () => {
+    @Component({
+      selector: 'fa-host',
+      template: `
+        <fa-layers class="custom-class" [fixedWidth]="fixedWidth" [size]="size"></fa-layers>
+        <fa-layers [class.custom-class]="true" [fixedWidth]="fixedWidth" [size]="size"></fa-layers>
+        <fa-layers [ngClass]="{'custom-class': true}" [fixedWidth]="fixedWidth" [size]="size"></fa-layers>
+        <fa-layers [fixedWidth]="fixedWidth" [size]="size" class="custom-class"></fa-layers>
+        <fa-layers [fixedWidth]="fixedWidth" [size]="size" [class.custom-class]="true"></fa-layers>
+        <fa-layers [fixedWidth]="fixedWidth" [size]="size" [ngClass]="{'custom-class': true}"></fa-layers>
+      `
+    })
+    class HostComponent {
+      fixedWidth = true;
+      size = '4x';
+    }
+
+    const fixture = initTest(HostComponent);
+
+    fixture.detectChanges();
+    const elements = fixture.debugElement.queryAll(By.css('fa-layers'));
+    for (const element of elements) {
+      expect(element.nativeElement.className).toContain('custom-class');
+    }
+  });
 });
 
diff --git a/src/lib/layers/layers.component.ts b/src/lib/layers/layers.component.ts
@@ -1,7 +1,5 @@
-import { Component, Input, SimpleChanges, OnChanges, OnInit, HostBinding } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core';
 import { SizeProp } from '@fortawesome/fontawesome-svg-core';
-import { faLayerClassList } from '../shared/utils/classlist.util';
-import { FaProps } from '../shared/models/props.model';
 
 /**
  * Fontawesome layers.
@@ -12,27 +10,29 @@ import { FaProps } from '../shared/models/props.model';
 })
 export class FaLayersComponent implements OnInit, OnChanges {
   @Input() size?: SizeProp;
-  @Input() fixedWidth?: boolean;
 
-  @HostBinding('class')
-  hostClass = 'fa-layers';
+  @Input()
+  @HostBinding('class.fa-fw')
+  fixedWidth?: boolean;
+
+  constructor(
+    private renderer: Renderer2,
+    private elementRef: ElementRef,
+  ) {
+  }
 
   ngOnInit() {
-    this.updateClasses();
+    this.renderer.addClass(this.elementRef.nativeElement, 'fa-layers');
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes) {
-      this.updateClasses();
+    if ('size' in changes) {
+      if (changes.size.currentValue != null) {
+        this.renderer.addClass(this.elementRef.nativeElement, `fa-${changes.size.currentValue}`);
+      }
+      if (changes.size.previousValue != null) {
+        this.renderer.removeClass(this.elementRef.nativeElement, `fa-${changes.size.previousValue}`);
+      }
     }
   }
-
-  updateClasses() {
-    const classOpts: FaProps = {
-      size: this.size || null,
-      fixedWidth: this.fixedWidth,
-    };
-    this.hostClass = `fa-layers ${faLayerClassList(classOpts).join(' ')}`;
-  }
-
 }
diff --git a/src/lib/shared/utils/classlist.util.ts b/src/lib/shared/utils/classlist.util.ts
@@ -24,14 +24,3 @@ export const faClassList = (props: FaProps): string[] => {
     .map(key => (classes[key] ? key : null))
     .filter(key => key);
 };
-
-export const faLayerClassList = (props: FaProps): string[] => {
-  const classes = {
-    'fa-fw': props.fixedWidth,
-    [`fa-${props.size}`]: props.size !== null,
-  };
-
-  return Object.keys(classes)
-    .map(key => (classes[key] ? key : null))
-    .filter(key => key);
-};