fix(breadcrumb): Include skeleton input

Author: youda97

src/breadcrumb/breadcrumb-item.component.ts

@@ -7,17 +7,25 @@ import {
 @Component({
 	selector: "ibm-breadcrumb-item",
 	template: `
+	<a class="bx--link"
+		href="/#"
+		*ngIf="skeleton">
+		<ng-container *ngTemplateOutlet="content"></ng-container>
+	</a>
+
 	<a class="bx--link"
 		href="{{href}}"
-		*ngIf="href; else content">
+		*ngIf="!skeleton && href; else content">
 		<ng-container *ngTemplateOutlet="content"></ng-container>
 	</a>
 	<ng-template #content>
 		<ng-content></ng-content>
 	</ng-template>`
 })
 export class BreadcrumbItemComponent {
-	@Input() href = "/#";
+	@Input() href: string;
+
+	@Input() skeleton = false;
 
 	@HostBinding("class.bx--breadcrumb-item") itemClass = true;
 }

src/breadcrumb/breadcrumb.component.ts

@@ -1,9 +1,13 @@
 import {
 	Component,
-	Input
+	Input,
+	ContentChildren,
+	QueryList,
+	AfterContentInit
 } from "@angular/core";
 
 import { BreadcrumbItem } from "./breadcrumb-item.interface";
+import { BreadcrumbItemComponent } from "./breadcrumb-item.component";
 
 const MINIMUM_OVERFLOW_THRESHOLD = 4;
 
@@ -51,7 +55,9 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4;
 		</ng-template>
 	</nav>`
 })
-export class Breadcrumb {
+export class Breadcrumb implements AfterContentInit {
+	@ContentChildren(BreadcrumbItemComponent) childs: QueryList<BreadcrumbItemComponent>;
+
 	@Input() items: Array<BreadcrumbItem>;
 
 	@Input() noTrailingSlash = false;
@@ -74,6 +80,10 @@ export class Breadcrumb {
 		return this._threshold;
 	}
 
+	ngAfterContentInit() {
+		this.childs.toArray().forEach(child => child.skeleton = this.skeleton);
+	}
+
 	get shouldShowContent(): boolean {
 		return !this.items;
 	}