fix(): Breadcrumbs responsive calculations with border, margin and pa…

…dding (#1251)

* fix(): Breadcrumbs responsive calculations need to take into account border, margin and padding that might be around all the crumbs

* add unit test for breadcrumb with padding in mat-toolbar

src/platform/experimental/breadcrumbs/breadcrumbs.component.scss

@@ -1,4 +1,6 @@
 :host {
+  display: block;
+  width: 100%;
   .td-breadcrumbs {
     white-space: nowrap;
   }

src/platform/experimental/breadcrumbs/breadcrumbs.component.spec.ts

@@ -11,6 +11,7 @@ import {
 } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import {
   CovalentBreadcrumbsModule,
 } from './public-api';
@@ -31,10 +32,12 @@ describe('Component: Breadcrumbs', () => {
     TestBed.configureTestingModule({
       declarations: [
         TdBreadcrumbsTestComponent,
+        TdBreadcrumbsToolbarTestComponent,
         FakeComponent,
       ],
       imports: [
         NoopAnimationsModule,
+        MatToolbarModule,
         RouterTestingModule.withRoutes([
           { path: '', component: FakeComponent },
           { path: 'layouts', component: FakeComponent },
@@ -75,7 +78,7 @@ describe('Component: Breadcrumbs', () => {
       let fixture: ComponentFixture<any> = TestBed.createComponent(TdBreadcrumbsTestComponent);
       fixture.detectChanges();
       fixture.whenStable().then(() => {
-        fixture.debugElement.query(By.directive(TdBreadcrumbsComponent)).nativeElement.parentElement.style.width = '300px';
+        document.body.style.width = '300px';
         window.dispatchEvent(new Event('resize'));
         fixture.detectChanges();
         fixture.whenStable().then(() => {
@@ -85,6 +88,23 @@ describe('Component: Breadcrumbs', () => {
       });
     }),
   ));
+
+  it('should resize window and hide breadcrumbs with breadcrumb in mat-toolbar with padding',
+    async(inject([], () => {
+      let fixture: ComponentFixture<any> = TestBed.createComponent(TdBreadcrumbsToolbarTestComponent);
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        document.body.style.width = '300px';
+        window.dispatchEvent(new Event('resize'));
+        fixture.detectChanges();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          let breadcrumbs: TdBreadcrumbsComponent = fixture.debugElement.query(By.directive(TdBreadcrumbsComponent)).componentInstance;
+          expect(breadcrumbs.hiddenBreadcrumbs.length).toBe(3);
+        });
+      });
+    }),
+    ));
 });
 
 @Component({
@@ -104,3 +124,23 @@ describe('Component: Breadcrumbs', () => {
 class TdBreadcrumbsTestComponent {
   separatorIcon: string = 'motorcycle';
 }
+
+@Component({
+  selector: 'td-breadcrumbs-test-toolbar',
+  template: `
+  <mat-toolbar class="dense-toolbar push-top" color="primary">
+    <mat-toolbar-row>
+      <td-breadcrumbs #breadcrumbsPadded class="pad-left">
+        <a td-breadcrumb routerLink="/">Home</a>
+        <a td-breadcrumb routerLink="/layouts">Layouts</a>
+        <a td-breadcrumb routerLink="/layouts2">Layouts2</a>
+        <a td-breadcrumb routerLink="/layouts3">Layouts3</a>
+        <td-breadcrumb class="tc-grey-500">Manage List</td-breadcrumb>
+      </td-breadcrumbs>
+    </mat-toolbar-row>
+  </mat-toolbar>
+  `,
+})
+class TdBreadcrumbsToolbarTestComponent {
+  separatorIcon: string = 'motorcycle';
+}

src/platform/experimental/breadcrumbs/breadcrumbs.component.ts

@@ -88,7 +88,17 @@ export class TdBreadcrumbsComponent implements OnInit, DoCheck, AfterContentInit
   * Current width of the element container
   */
   get nativeElementWidth(): number {
-    return (<HTMLElement>this._elementRef.nativeElement).getBoundingClientRect().width;
+    let element: HTMLElement = (<HTMLElement>this._elementRef.nativeElement);
+    // Need to take into account border, margin and padding that might be around all the crumbs
+    let style: CSSStyleDeclaration = window.getComputedStyle(element);
+    let borderLeft: number = parseInt(style.borderLeft, 10);
+    let borderRight: number = parseInt(style.borderRight, 10);
+    let marginLeft: number = parseInt(style.marginLeft, 10);
+    let marginRight: number = parseInt(style.marginRight, 10);
+    let paddingLeft: number = parseInt(style.paddingLeft, 10);
+    let paddingRight: number = parseInt(style.paddingRight, 10);
+
+    return element.getBoundingClientRect().width - borderLeft - borderRight - marginLeft - marginRight - paddingLeft - paddingRight;
   }
 
   /**

src/test-bed/sandbox/breadcrumbs/breadcrumbs.component.html

@@ -10,7 +10,7 @@ <h3>Basic Breadcrumbs</h3>
   </td-breadcrumbs>
   <mat-divider></mat-divider>
   <h3>Breadcrumbs with all inputs/outputs</h3>
-  <td-breadcrumbs #breadcrumbs separatorIcon="motorcycle">
+  <td-breadcrumbs #breadcrumbs class="pad-left" separatorIcon="motorcycle">
     <a td-breadcrumb [routerLink]="'/'">Home</a>
     <a td-breadcrumb [routerLink]="'/layouts'">Layouts</a>
     <a td-breadcrumb [routerLink]="'/layouts2'">Layouts2</a>
@@ -30,4 +30,20 @@ <h3>Breadcrumbs with all inputs/outputs</h3>
       <mat-divider></mat-divider>
     </div>
   </ng-template>
-</div>
+</div>
+
+<h3>Breadcrumbs in a mat-toolbar with padding</h3>
+<mat-toolbar class="dense-toolbar push-top" color="primary">
+  <mat-toolbar-row>
+    <td-breadcrumbs #breadcrumbsPadded class="pad-left">
+      <a td-breadcrumb routerLink="/">Home</a>
+      <a td-breadcrumb routerLink="/layouts">Layouts</a>
+      <a td-breadcrumb routerLink="/layouts2">Layouts2</a>
+      <a td-breadcrumb routerLink="/layouts3">Layouts3</a>
+      <td-breadcrumb class="tc-grey-500">Manage List</td-breadcrumb>
+    </td-breadcrumbs>
+  </mat-toolbar-row>
+  <mat-toolbar-row>
+    Display: {{ breadcrumbsPadded.count }} Hidden: {{ breadcrumbsPadded.hiddenBreadcrumbs.length }}
+  </mat-toolbar-row>
+</mat-toolbar>

src/test-bed/test-bed.module.ts

@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { CovalentBreadcrumbsModule } from '../platform/experimental/breadcrumbs/breadcrumbs.module';
 import { CovalentTabSelectModule } from '../platform/experimental/tab-select';
@@ -27,6 +28,7 @@ import { appRoutes, appRoutingProviders } from './test-bed.routes';
     BrowserAnimationsModule,
     FormsModule,
     MatDividerModule,
+    MatToolbarModule,
     appRoutes,
     /** Experimental Modules */
     CovalentBreadcrumbsModule,