| {"version":3,"sources":["ng://@covalent/core/breadcrumbs/breadcrumb/breadcrumb.component.ts","ng://@covalent/core/breadcrumbs/breadcrumbs.component.ts","ng://@covalent/core/breadcrumbs/breadcrumbs.module.ts"],"names":["TdBreadcrumbComponent","Object","defineProperty","prototype","this","_displayCrumb","shouldDisplay","_changeDetectorRef","markForCheck","_width","undefined","ngAfterViewInit","_this","setTimeout","_elementRef","getBoundingClientRect","width","_handleIconClick","event","stopPropagation","preventDefault","Component","args","selector","template","host","class","changeDetection","ChangeDetectionStrategy","OnPush","ElementRef","ChangeDetectorRef","HostBinding","separatorIcon","_displayIcon","TdBreadcrumbsComponent","ngOnInit","_resizeSubscription","merge","fromEvent","window","pipe","debounceTime","_widthSubject","asObservable","distinctUntilChanged","subscribe","_resizing","_calculateVisibility","ngDoCheck","nativeElement","next","nativeElementWidth","ngAfterContentInit","setCrumbIcons","ngOnDestroy","unsubscribe","element","style","getComputedStyle","borderLeft","parseInt","borderRight","marginLeft","marginRight","paddingLeft","paddingRight","_breadcrumbs","length","breadcrumbArray","toArray","forEach","breadcrumb","crumbsArray","crumbWidthSum","hiddenCrumbs","i","displayCrumb","push","hiddenBreadcrumbs","ContentChildren","Input","Subscription","EMPTY","Subject","CovalentBreadcrumbsModule","NgModule","imports","CommonModule","MatIconModule","declarations","exports"],"mappings":"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","sourcesContent":["import {\n Component,\n ElementRef,\n HostBinding,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n} from '@angular/core';\n\n@Component({\n selector: 'td-breadcrumb, a[td-breadcrumb]',\n styleUrls: ['./breadcrumb.component.scss'],\n templateUrl: './breadcrumb.component.html',\n /* tslint:disable-next-line */\n host: {\n class: 'mat-button td-breadcrumb',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TdBreadcrumbComponent implements AfterViewInit {\n\n private _displayCrumb: boolean = true;\n private _width: number = 0;\n // Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'\n separatorIcon: string = 'chevron_right';\n // Should show the right chevron or not before the label\n _displayIcon: boolean = true;\n\n get displayCrumb(): boolean {\n return this._displayCrumb;\n }\n\n /**\n * Whether to display the crumb or not\n */\n set displayCrumb(shouldDisplay: boolean) {\n this._displayCrumb = shouldDisplay;\n this._changeDetectorRef.markForCheck();\n }\n\n /**\n * Width of the DOM element of the crumb\n */\n get width(): number {\n return this._width;\n }\n\n /**\n * Gets the display style of the crumb\n */\n @HostBinding('style.display')\n get displayBinding(): string {\n // Set the display to none on the component, just in case the end user is hiding\n // and showing them instead of the component doing itself for reasons like responsive\n return this._displayCrumb ? undefined : 'none';\n }\n\n constructor(private _elementRef: ElementRef,\n private _changeDetectorRef: ChangeDetectorRef) {\n }\n\n ngAfterViewInit(): void {\n // set the width from the actual rendered DOM element\n setTimeout(() => {\n this._width = (<HTMLElement>this._elementRef.nativeElement).getBoundingClientRect().width;\n this._changeDetectorRef.markForCheck();\n });\n }\n\n /**\n * Stop click propagation when clicking on icon\n */\n _handleIconClick(event: Event): void {\n event.stopPropagation();\n event.preventDefault();\n }\n\n}\n","import {\n Component,\n ContentChildren,\n QueryList,\n OnInit,\n OnDestroy,\n ChangeDetectionStrategy,\n AfterContentInit,\n DoCheck,\n ChangeDetectorRef,\n ElementRef,\n Input,\n} from '@angular/core';\n\nimport {\n Subscription,\n Subject,\n fromEvent,\n merge,\n} from 'rxjs';\nimport {\n debounceTime,\n distinctUntilChanged,\n} from 'rxjs/operators';\n\nimport { TdBreadcrumbComponent } from './breadcrumb/breadcrumb.component';\n\n@Component({\n selector: 'td-breadcrumbs',\n styleUrls: ['./breadcrumbs.component.scss'],\n templateUrl: './breadcrumbs.component.html',\n /* tslint:disable-next-line */\n host: {\n class: 'td-breadcrumbs',\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TdBreadcrumbsComponent implements OnInit, DoCheck, AfterContentInit, OnDestroy {\n\n private _resizeSubscription: Subscription = Subscription.EMPTY;\n private _widthSubject: Subject<number> = new Subject<number>();\n private _resizing: boolean = false;\n\n // all the sub components, which are the individual breadcrumbs\n @ContentChildren(TdBreadcrumbComponent) _breadcrumbs: QueryList<TdBreadcrumbComponent>;\n // the list of hidden breadcrumbs not shown right now (responsive)\n hiddenBreadcrumbs: TdBreadcrumbComponent[] = [];\n\n /**\n * Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.\n */\n @Input('separatorIcon') separatorIcon: string = 'chevron_right';\n\n constructor(private _elementRef: ElementRef,\n private _changeDetectorRef: ChangeDetectorRef) {\n }\n\n ngOnInit(): void {\n this._resizeSubscription = merge(\n fromEvent(window, 'resize').pipe(\n debounceTime(10),\n ),\n this._widthSubject.asObservable().pipe(\n distinctUntilChanged(),\n ),\n ).subscribe(() => {\n if (!this._resizing) {\n this._resizing = true;\n setTimeout(() => {\n this._calculateVisibility();\n this._resizing = false;\n this._changeDetectorRef.markForCheck();\n }, 100);\n }\n });\n }\n\n ngDoCheck(): void {\n if (this._elementRef && this._elementRef.nativeElement) {\n this._widthSubject.next(this.nativeElementWidth);\n }\n }\n\n ngAfterContentInit(): void {\n this.setCrumbIcons();\n this._changeDetectorRef.markForCheck();\n }\n\n ngOnDestroy(): void {\n this._resizeSubscription.unsubscribe();\n }\n\n /*\n * Current width of the element container\n */\n get nativeElementWidth(): number {\n let element: HTMLElement = (<HTMLElement>this._elementRef.nativeElement);\n // Need to take into account border, margin and padding that might be around all the crumbs\n let style: CSSStyleDeclaration = window.getComputedStyle(element);\n let borderLeft: number = parseInt(style.borderLeft, 10);\n let borderRight: number = parseInt(style.borderRight, 10);\n let marginLeft: number = parseInt(style.marginLeft, 10);\n let marginRight: number = parseInt(style.marginRight, 10);\n let paddingLeft: number = parseInt(style.paddingLeft, 10);\n let paddingRight: number = parseInt(style.paddingRight, 10);\n\n return element.getBoundingClientRect().width - borderLeft - borderRight - marginLeft - marginRight - paddingLeft - paddingRight;\n }\n\n /**\n * The total count of individual breadcrumbs\n */\n get count(): number {\n return this._breadcrumbs ? this._breadcrumbs.length : 0;\n }\n\n /**\n * Set the crumb icon separators\n */\n private setCrumbIcons(): void {\n let breadcrumbArray: TdBreadcrumbComponent[] = this._breadcrumbs.toArray();\n if (breadcrumbArray.length > 0) {\n // don't show the icon on the last breadcrumb\n breadcrumbArray[breadcrumbArray.length - 1]._displayIcon = false;\n }\n breadcrumbArray.forEach((breadcrumb: TdBreadcrumbComponent) => {\n breadcrumb.separatorIcon = this.separatorIcon;\n });\n }\n\n private _calculateVisibility(): void {\n let crumbsArray: TdBreadcrumbComponent[] = this._breadcrumbs.toArray();\n let crumbWidthSum: number = 0;\n let hiddenCrumbs: TdBreadcrumbComponent[] = [];\n // loop through crumbs in reverse order to calculate which ones should be removed\n for (let i: number = crumbsArray.length - 1; i >= 0; i--) {\n let breadcrumb: TdBreadcrumbComponent = crumbsArray[i];\n // if crumb exceeds width, then we skip it from the sum and add it into the hiddencrumbs array\n // and hide it\n if ((crumbWidthSum + breadcrumb.width) > this.nativeElementWidth) {\n breadcrumb.displayCrumb = false;\n hiddenCrumbs.push(breadcrumb);\n } else {\n // else we show it\n breadcrumb.displayCrumb = true;\n }\n crumbWidthSum += breadcrumb.width;\n }\n this.hiddenBreadcrumbs = hiddenCrumbs;\n this._changeDetectorRef.markForCheck();\n }\n\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { TdBreadcrumbsComponent } from './breadcrumbs.component';\nimport { TdBreadcrumbComponent } from './breadcrumb/breadcrumb.component';\n\n@NgModule({\n imports: [\n CommonModule,\n MatIconModule,\n ],\n declarations: [\n TdBreadcrumbsComponent,\n TdBreadcrumbComponent,\n ],\n exports: [\n TdBreadcrumbsComponent,\n TdBreadcrumbComponent,\n ],\n})\nexport class CovalentBreadcrumbsModule {\n\n}\n"]} |