diff --git a/src/lib/layers/layers.component.spec.ts b/src/lib/layers/layers.component.spec.ts index f83bfd6..2904767 100644 --- 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,34 @@ 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: ` + + + + + + + ` + }) + 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'); + expect(element.nativeElement.className).toContain('fa-layers'); + expect(element.nativeElement.className).toContain('fa-fw'); + expect(element.nativeElement.className).toContain('fa-4x'); + } + }); }); diff --git a/src/lib/layers/layers.component.ts b/src/lib/layers/layers.component.ts index aff10c0..58682b4 100644 --- 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 index bcc6e51..f3bfd9e 100644 --- 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); -};