diff --git a/docs/app/documentation/component-docs/badge-label/badge-label-docs.component.html b/docs/app/documentation/component-docs/badge-label/badge-label-docs.component.html
index 4249ed0ec7c..4ba8d8254cc 100644
--- a/docs/app/documentation/component-docs/badge-label/badge-label-docs.component.html
+++ b/docs/app/documentation/component-docs/badge-label/badge-label-docs.component.html
@@ -62,23 +62,24 @@
Badges and labels are used to indicate status. Colors, generally in combination with text, are used to easily
highlight
@@ -11,4 +11,4 @@
-
+
\ No newline at end of file
diff --git a/docs/app/documentation/component-docs/badge-label/examples/badge-default-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/badge-default-example.component.html
index 59bc51d08c6..1fa76cecb07 100644
--- a/docs/app/documentation/component-docs/badge-label/examples/badge-default-example.component.html
+++ b/docs/app/documentation/component-docs/badge-label/examples/badge-default-example.component.html
@@ -1,4 +1,4 @@
-Default
-Default
-Default
-Default
\ No newline at end of file
+Default
+Default
+Default
+Default
\ No newline at end of file
diff --git a/docs/app/documentation/component-docs/badge-label/examples/badge-filled-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/badge-filled-example.component.html
index 7588cabe8fb..7f712562760 100644
--- a/docs/app/documentation/component-docs/badge-label/examples/badge-filled-example.component.html
+++ b/docs/app/documentation/component-docs/badge-label/examples/badge-filled-example.component.html
@@ -1,4 +1,4 @@
-Default
-Default
-Default
-Default
\ No newline at end of file
+Default
+Default
+Default
+Default
\ No newline at end of file
diff --git a/docs/app/documentation/component-docs/badge-label/examples/badge-pill-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/badge-pill-example.component.html
index dd75ade223f..587974f99ac 100644
--- a/docs/app/documentation/component-docs/badge-label/examples/badge-pill-example.component.html
+++ b/docs/app/documentation/component-docs/badge-label/examples/badge-pill-example.component.html
@@ -1,4 +1,4 @@
-Default
-Default
-Default
-Default
\ No newline at end of file
+Default
+Default
+Default
+Default
\ No newline at end of file
diff --git a/docs/app/documentation/component-docs/badge-label/examples/label-build-status-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/label-build-status-example.component.html
index a598573c2da..a32e4f24fcc 100644
--- a/docs/app/documentation/component-docs/badge-label/examples/label-build-status-example.component.html
+++ b/docs/app/documentation/component-docs/badge-label/examples/label-build-status-example.component.html
@@ -1,4 +1,4 @@
-Available
-Away
-Busy
-Appear Offline
\ No newline at end of file
+Available
+Away
+Busy
+Appear Offline
\ No newline at end of file
diff --git a/docs/app/documentation/component-docs/badge-label/examples/label-default-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/label-default-example.component.html
index 95369991e7c..e34af6dcf41 100644
--- a/docs/app/documentation/component-docs/badge-label/examples/label-default-example.component.html
+++ b/docs/app/documentation/component-docs/badge-label/examples/label-default-example.component.html
@@ -1,4 +1,4 @@
-Default
-Success
-Warning
-Error
\ No newline at end of file
+Default
+Success
+Warning
+Error
\ No newline at end of file
diff --git a/docs/app/documentation/component-docs/badge-label/examples/label-icon-status-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/label-icon-status-example.component.html
index afbbf5f29d6..518bffaf060 100644
--- a/docs/app/documentation/component-docs/badge-label/examples/label-icon-status-example.component.html
+++ b/docs/app/documentation/component-docs/badge-label/examples/label-icon-status-example.component.html
@@ -1,4 +1,4 @@
-Custom Icon
-Success
-Warning
-Error
\ No newline at end of file
+Custom Icon
+Success
+Warning
+Error
\ No newline at end of file
diff --git a/docs/app/documentation/component-docs/badge-label/examples/label-status-colors-example.component.html b/docs/app/documentation/component-docs/badge-label/examples/label-status-colors-example.component.html
index 95c7ae5df4d..255d263e445 100644
--- a/docs/app/documentation/component-docs/badge-label/examples/label-status-colors-example.component.html
+++ b/docs/app/documentation/component-docs/badge-label/examples/label-status-colors-example.component.html
@@ -1,4 +1,4 @@
-Default
-Success
-Warning
-Error
\ No newline at end of file
+Default
+Success
+Warning
+Error
\ No newline at end of file
diff --git a/docs/app/documentation/core-helpers/documentation/documentation.component.ts b/docs/app/documentation/core-helpers/documentation/documentation.component.ts
index 5ef38c598e9..6a0449e5dc6 100644
--- a/docs/app/documentation/core-helpers/documentation/documentation.component.ts
+++ b/docs/app/documentation/core-helpers/documentation/documentation.component.ts
@@ -17,7 +17,7 @@ export class DocumentationComponent implements OnInit {
components = [
{ url: 'action-bar', name: 'Action Bar' },
{ url: 'alert', name: 'Alert' },
- { url: 'badgeLabel', name: 'Badge' },
+ { url: 'badgeLabel', name: 'Status Indicator' },
{ url: 'breadcrumb', name: 'Breadcrumb' },
{ url: 'button', name: 'Button' },
{ url: 'buttonGroup', name: 'Button Group' },
diff --git a/docs/app/documentation/utilities/api-files.ts b/docs/app/documentation/utilities/api-files.ts
index 9b998642c93..c23861e6311 100644
--- a/docs/app/documentation/utilities/api-files.ts
+++ b/docs/app/documentation/utilities/api-files.ts
@@ -22,9 +22,9 @@ export const API_FILES = {
'AlertService'
],
badgeLabel: [
- 'BadgeComponent',
+ 'BadgeDirective',
'BadgeLabelComponent',
- 'LabelComponent'
+ 'LabelDirective'
],
breadcrumb: [
'BreadcrumbDirective',
diff --git a/library/src/lib/badge-label/badge-label.component.html b/library/src/lib/badge-label/badge-label.component.html
deleted file mode 100644
index d59aea5b949..00000000000
--- a/library/src/lib/badge-label/badge-label.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/library/src/lib/badge-label/badge-label.module.ts b/library/src/lib/badge-label/badge-label.module.ts
index bd44d2d820d..6fb8804e088 100644
--- a/library/src/lib/badge-label/badge-label.module.ts
+++ b/library/src/lib/badge-label/badge-label.module.ts
@@ -1,12 +1,12 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
-import { BadgeComponent } from './badge.component';
-import { LabelComponent } from './label.component';
+import { BadgeDirective } from './badge.directive';
+import { LabelDirective } from './label.directive';
@NgModule({
imports: [CommonModule],
- exports: [BadgeComponent, LabelComponent],
- declarations: [BadgeComponent, LabelComponent]
+ exports: [BadgeDirective, LabelDirective],
+ declarations: [BadgeDirective, LabelDirective]
})
-export class BadgeLabelModule {}
+export class BadgeLabelModule { }
diff --git a/library/src/lib/badge-label/badge.component.spec.ts b/library/src/lib/badge-label/badge.component.spec.ts
deleted file mode 100644
index ddce7ad5b90..00000000000
--- a/library/src/lib/badge-label/badge.component.spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BadgeComponent } from './badge.component';
-
-describe('BadgeComponent', () => {
- let component: BadgeComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [BadgeComponent]
- }).compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(BadgeComponent);
- component = fixture.componentInstance;
- component.status = 'someStatus';
- component.modifier = 'someModifier';
- fixture.detectChanges();
-
- spyOn(component, '_setProperties').and.callThrough();
- spyOn(component, '_addClassToElement');
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- component.ngOnInit();
- expect(component._setProperties).toHaveBeenCalled();
- expect(component._addClassToElement).toHaveBeenCalledWith('fd-badge');
- expect(component._addClassToElement).toHaveBeenCalledWith('fd-badge--someStatus');
- expect(component._addClassToElement).toHaveBeenCalledWith('fd-badge--someModifier');
- });
-});
diff --git a/library/src/lib/badge-label/badge.directive.spec.ts b/library/src/lib/badge-label/badge.directive.spec.ts
new file mode 100644
index 00000000000..862785ac774
--- /dev/null
+++ b/library/src/lib/badge-label/badge.directive.spec.ts
@@ -0,0 +1,53 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { BadgeDirective } from './badge.directive';
+
+@Component({
+ template: `
+ Fd-badge test
+ `
+})
+export class TestComponent { }
+
+describe('BadgeDirective', () => {
+ let component: TestComponent,
+ fixture: ComponentFixture,
+ debugElement: DebugElement,
+ element: HTMLElement;
+
+ let directive, directiveInstance;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [BadgeDirective, TestComponent]
+ });
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TestComponent);
+ component = fixture.componentInstance;
+ debugElement = fixture.debugElement;
+ element = debugElement.nativeElement;
+
+ fixture.detectChanges();
+ directive = debugElement.query(By.directive(BadgeDirective));
+ directiveInstance = directive.injector.get(BadgeDirective);
+ fixture = TestBed.createComponent(TestComponent);
+
+ spyOn(directiveInstance, '_setProperties').and.callThrough();
+ spyOn(directiveInstance, '_addClassToElement');
+ });
+
+ it('should create', () => {
+ expect(directive).toBeTruthy();
+
+ directiveInstance.status = 'someStatus';
+ directiveInstance.modifier = 'someModifier';
+
+ directiveInstance.ngOnInit();
+ expect(directiveInstance._setProperties).toHaveBeenCalled();
+ expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-badge--someStatus');
+ expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-badge--someModifier');
+ });
+});
diff --git a/library/src/lib/badge-label/badge.component.ts b/library/src/lib/badge-label/badge.directive.ts
similarity index 63%
rename from library/src/lib/badge-label/badge.component.ts
rename to library/src/lib/badge-label/badge.directive.ts
index 8d4f3c9e473..6ac224f3951 100644
--- a/library/src/lib/badge-label/badge.component.ts
+++ b/library/src/lib/badge-label/badge.directive.ts
@@ -1,25 +1,26 @@
-import { Input, Component, Inject, ElementRef, ViewEncapsulation } from '@angular/core';
+import { Input, Component, Directive, Inject, ElementRef, ViewEncapsulation, HostBinding } from '@angular/core';
import { AbstractFdNgxClass } from '../utils/abstract-fd-ngx-class';
/**
- * Badge component, used to indicate status.
+ * Badge directive, used to indicate status.
* Colors, generally in combination with text, are used to easily highlight the state of an object.
*/
-@Component({
- selector: 'fd-badge',
- templateUrl: './badge-label.component.html',
- encapsulation: ViewEncapsulation.None
+@Directive({
+ selector: '[fd-badge]'
})
-export class BadgeComponent extends AbstractFdNgxClass {
+export class BadgeDirective extends AbstractFdNgxClass {
/** Color coded status for the badge. Options are 'success', 'warning', and 'error'. Leave empty for default badge. */
@Input() status;
/** Modifier for the badge. Options are 'pill' and 'filled'. Leave empty for normal. */
@Input() modifier;
+ /** @hidden */
+ @HostBinding('class.fd-badge')
+ fdBadgeClass: boolean = true;
+
/** @hidden */
_setProperties() {
- this._addClassToElement('fd-badge');
if (this.status) {
this._addClassToElement('fd-badge--' + this.status);
}
@@ -29,7 +30,7 @@ export class BadgeComponent extends AbstractFdNgxClass {
}
/** @hidden */
- constructor(@Inject(ElementRef) elementRef: ElementRef) {
+ constructor(private elementRef: ElementRef) {
super(elementRef);
}
}
diff --git a/library/src/lib/badge-label/label.component.spec.ts b/library/src/lib/badge-label/label.component.spec.ts
deleted file mode 100644
index eb0be4d6e52..00000000000
--- a/library/src/lib/badge-label/label.component.spec.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { LabelComponent } from './label.component';
-
-describe('LabelComponent', () => {
- let component: LabelComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [LabelComponent]
- }).compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(LabelComponent);
- component = fixture.componentInstance;
-
- fixture.detectChanges();
-
- spyOn(component, '_setProperties').and.callThrough();
- spyOn(component, '_addClassToElement');
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-
- it('should add status labels', () => {
- component.isStatusLabel = true;
- component.status = 'someStatus';
- component.statusIcon = 'someStatusIcon';
- component.icon = 'someIcon';
- component.ngOnInit();
- expect(component._setProperties).toHaveBeenCalled();
- expect(component._addClassToElement).toHaveBeenCalledWith('fd-status-label');
- expect(component._addClassToElement).toHaveBeenCalledWith('fd-status-label--someStatus');
- expect(component._addClassToElement).toHaveBeenCalledWith('fd-status-label--someStatusIcon');
- expect(component._addClassToElement).toHaveBeenCalledWith('sap-icon--someIcon');
- });
-
- it('should add non-status labels', () => {
- component.isStatusLabel = false;
- component.status = 'someStatus';
- component.ngOnInit();
- expect(component._setProperties).toHaveBeenCalled();
- expect(component._addClassToElement).toHaveBeenCalledWith('fd-label');
- expect(component._addClassToElement).toHaveBeenCalledWith('fd-label--someStatus');
- });
-});
diff --git a/library/src/lib/badge-label/label.directive.spec.ts b/library/src/lib/badge-label/label.directive.spec.ts
new file mode 100644
index 00000000000..f16ecdcee2f
--- /dev/null
+++ b/library/src/lib/badge-label/label.directive.spec.ts
@@ -0,0 +1,68 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { LabelDirective } from './label.directive';
+
+@Component({
+ template: `
+ Fd-badge test
+ `
+})
+
+export class TestComponent { }
+
+describe('LabelDirective', () => {
+ let component: TestComponent,
+ fixture: ComponentFixture,
+ debugElement: DebugElement,
+ element: HTMLElement;
+
+ let directive, directiveInstance;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [LabelDirective, TestComponent]
+ });
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TestComponent);
+ component = fixture.componentInstance;
+ debugElement = fixture.debugElement;
+ element = debugElement.nativeElement;
+
+ fixture.detectChanges();
+ directive = debugElement.query(By.directive(LabelDirective));
+ directiveInstance = directive.injector.get(LabelDirective);
+
+
+ spyOn(directiveInstance, '_setProperties').and.callThrough();
+ spyOn(directiveInstance, '_addClassToElement');
+ });
+
+ it('should create', () => {
+ expect(directive).toBeTruthy();
+ });
+
+ it('should add status labels', () => {
+ directiveInstance.isStatusLabel = true;
+ directiveInstance.status = 'someStatus';
+ directiveInstance.statusIcon = 'someStatusIcon';
+ directiveInstance.icon = 'someIcon';
+ directiveInstance.ngOnInit();
+ expect(directiveInstance._setProperties).toHaveBeenCalled();
+ expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-status-label');
+ expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-status-label--someStatus');
+ expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-status-label--someStatusIcon');
+ expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('sap-icon--someIcon');
+ });
+
+ it('should add non-status labels', () => {
+ directiveInstance.isStatusLabel = false;
+ directiveInstance.status = 'someStatus';
+ directiveInstance.ngOnInit();
+ expect(directiveInstance._setProperties).toHaveBeenCalled();
+ expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-label');
+ expect(directiveInstance._addClassToElement).toHaveBeenCalledWith('fd-label--someStatus');
+ });
+});
diff --git a/library/src/lib/badge-label/label.component.ts b/library/src/lib/badge-label/label.directive.ts
similarity index 82%
rename from library/src/lib/badge-label/label.component.ts
rename to library/src/lib/badge-label/label.directive.ts
index cdf457c2e00..7dff5510b74 100644
--- a/library/src/lib/badge-label/label.component.ts
+++ b/library/src/lib/badge-label/label.directive.ts
@@ -1,16 +1,14 @@
-import { Component, ElementRef, Inject, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Directive, ElementRef, Inject, Input, ViewEncapsulation, HostBinding } from '@angular/core';
import { AbstractFdNgxClass } from '../utils/abstract-fd-ngx-class';
/**
* Badge component, used to indicate status.
* Colors, generally in combination with text, are used to easily highlight the state of an object.
*/
-@Component({
- selector: 'fd-label',
- templateUrl: './badge-label.component.html',
- encapsulation: ViewEncapsulation.None
+@Directive({
+ selector: '[fd-label]'
})
-export class LabelComponent extends AbstractFdNgxClass {
+export class LabelDirective extends AbstractFdNgxClass {
/** Color coded status for the label. Options are 'success', 'warning', and 'error'. Leave empty for default label. */
@Input() status: string = '';
@@ -45,7 +43,7 @@ export class LabelComponent extends AbstractFdNgxClass {
}
/** @hidden */
- constructor(@Inject(ElementRef) elementRef: ElementRef) {
+ constructor(private elementRef: ElementRef) {
super(elementRef);
}
}