| import { CommonModule } from '@angular/common'; |
| import { MatIconModule } from '@angular/material/icon'; |
| import { Subscription, Subject, fromEvent, merge } from 'rxjs'; |
| import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; |
| import { Component, ElementRef, HostBinding, ChangeDetectionStrategy, ChangeDetectorRef, ContentChildren, Input, NgModule } from '@angular/core'; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| class TdBreadcrumbComponent { |
| /** |
| * @param {?} _elementRef |
| * @param {?} _changeDetectorRef |
| */ |
| constructor(_elementRef, _changeDetectorRef) { |
| this._elementRef = _elementRef; |
| this._changeDetectorRef = _changeDetectorRef; |
| this._displayCrumb = true; |
| this._width = 0; |
| // Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right' |
| this.separatorIcon = 'chevron_right'; |
| // Should show the right chevron or not before the label |
| this._displayIcon = true; |
| } |
| /** |
| * @return {?} |
| */ |
| get displayCrumb() { |
| return this._displayCrumb; |
| } |
| /** |
| * Whether to display the crumb or not |
| * @param {?} shouldDisplay |
| * @return {?} |
| */ |
| set displayCrumb(shouldDisplay) { |
| this._displayCrumb = shouldDisplay; |
| this._changeDetectorRef.markForCheck(); |
| } |
| /** |
| * Width of the DOM element of the crumb |
| * @return {?} |
| */ |
| get width() { |
| return this._width; |
| } |
| /** |
| * Gets the display style of the crumb |
| * @return {?} |
| */ |
| get displayBinding() { |
| // Set the display to none on the component, just in case the end user is hiding |
| // and showing them instead of the component doing itself for reasons like responsive |
| return this._displayCrumb ? undefined : 'none'; |
| } |
| /** |
| * @return {?} |
| */ |
| ngAfterViewInit() { |
| // set the width from the actual rendered DOM element |
| setTimeout(() => { |
| this._width = ((/** @type {?} */ (this._elementRef.nativeElement))).getBoundingClientRect().width; |
| this._changeDetectorRef.markForCheck(); |
| }); |
| } |
| /** |
| * Stop click propagation when clicking on icon |
| * @param {?} event |
| * @return {?} |
| */ |
| _handleIconClick(event) { |
| event.stopPropagation(); |
| event.preventDefault(); |
| } |
| } |
| TdBreadcrumbComponent.decorators = [ |
| { type: Component, args: [{ |
| selector: 'td-breadcrumb, a[td-breadcrumb]', |
| template: "<ng-content></ng-content>\n<mat-icon *ngIf=\"_displayIcon\"\n class=\"td-breadcrumb-separator-icon\"\n [style.cursor]=\"'default'\"\n (click)=\"_handleIconClick($event)\">\n {{separatorIcon}}\n</mat-icon>\n", |
| /* tslint:disable-next-line */ |
| host: { |
| class: 'mat-button td-breadcrumb', |
| }, |
| changeDetection: ChangeDetectionStrategy.OnPush, |
| styles: [":host.td-breadcrumb{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}:host.td-breadcrumb ::ng-deep>*{margin:0 10px}:host .td-breadcrumb-separator-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host.mat-button{min-width:0;padding:0}"] |
| }] } |
| ]; |
| /** @nocollapse */ |
| TdBreadcrumbComponent.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: ChangeDetectorRef } |
| ]; |
| TdBreadcrumbComponent.propDecorators = { |
| displayBinding: [{ type: HostBinding, args: ['style.display',] }] |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| class TdBreadcrumbsComponent { |
| /** |
| * @param {?} _elementRef |
| * @param {?} _changeDetectorRef |
| */ |
| constructor(_elementRef, _changeDetectorRef) { |
| this._elementRef = _elementRef; |
| this._changeDetectorRef = _changeDetectorRef; |
| this._resizeSubscription = Subscription.EMPTY; |
| this._widthSubject = new Subject(); |
| this._resizing = false; |
| // the list of hidden breadcrumbs not shown right now (responsive) |
| this.hiddenBreadcrumbs = []; |
| /** |
| * Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'. |
| */ |
| this.separatorIcon = 'chevron_right'; |
| } |
| /** |
| * @return {?} |
| */ |
| ngOnInit() { |
| this._resizeSubscription = merge(fromEvent(window, 'resize').pipe(debounceTime(10)), this._widthSubject.asObservable().pipe(distinctUntilChanged())).subscribe(() => { |
| if (!this._resizing) { |
| this._resizing = true; |
| setTimeout(() => { |
| this._calculateVisibility(); |
| this._resizing = false; |
| this._changeDetectorRef.markForCheck(); |
| }, 100); |
| } |
| }); |
| } |
| /** |
| * @return {?} |
| */ |
| ngDoCheck() { |
| if (this._elementRef && this._elementRef.nativeElement) { |
| this._widthSubject.next(this.nativeElementWidth); |
| } |
| } |
| /** |
| * @return {?} |
| */ |
| ngAfterContentInit() { |
| this.setCrumbIcons(); |
| this._changeDetectorRef.markForCheck(); |
| } |
| /** |
| * @return {?} |
| */ |
| ngOnDestroy() { |
| this._resizeSubscription.unsubscribe(); |
| } |
| /* |
| * Current width of the element container |
| */ |
| /** |
| * @return {?} |
| */ |
| get nativeElementWidth() { |
| /** @type {?} */ |
| let element = ((/** @type {?} */ (this._elementRef.nativeElement))); |
| // Need to take into account border, margin and padding that might be around all the crumbs |
| /** @type {?} */ |
| let style = window.getComputedStyle(element); |
| /** @type {?} */ |
| let borderLeft = parseInt(style.borderLeft, 10); |
| /** @type {?} */ |
| let borderRight = parseInt(style.borderRight, 10); |
| /** @type {?} */ |
| let marginLeft = parseInt(style.marginLeft, 10); |
| /** @type {?} */ |
| let marginRight = parseInt(style.marginRight, 10); |
| /** @type {?} */ |
| let paddingLeft = parseInt(style.paddingLeft, 10); |
| /** @type {?} */ |
| let paddingRight = parseInt(style.paddingRight, 10); |
| return element.getBoundingClientRect().width - borderLeft - borderRight - marginLeft - marginRight - paddingLeft - paddingRight; |
| } |
| /** |
| * The total count of individual breadcrumbs |
| * @return {?} |
| */ |
| get count() { |
| return this._breadcrumbs ? this._breadcrumbs.length : 0; |
| } |
| /** |
| * Set the crumb icon separators |
| * @return {?} |
| */ |
| setCrumbIcons() { |
| /** @type {?} */ |
| let breadcrumbArray = this._breadcrumbs.toArray(); |
| if (breadcrumbArray.length > 0) { |
| // don't show the icon on the last breadcrumb |
| breadcrumbArray[breadcrumbArray.length - 1]._displayIcon = false; |
| } |
| breadcrumbArray.forEach((breadcrumb) => { |
| breadcrumb.separatorIcon = this.separatorIcon; |
| }); |
| } |
| /** |
| * @return {?} |
| */ |
| _calculateVisibility() { |
| /** @type {?} */ |
| let crumbsArray = this._breadcrumbs.toArray(); |
| /** @type {?} */ |
| let crumbWidthSum = 0; |
| /** @type {?} */ |
| let hiddenCrumbs = []; |
| // loop through crumbs in reverse order to calculate which ones should be removed |
| for (let i = crumbsArray.length - 1; i >= 0; i--) { |
| /** @type {?} */ |
| let breadcrumb = crumbsArray[i]; |
| // if crumb exceeds width, then we skip it from the sum and add it into the hiddencrumbs array |
| // and hide it |
| if ((crumbWidthSum + breadcrumb.width) > this.nativeElementWidth) { |
| breadcrumb.displayCrumb = false; |
| hiddenCrumbs.push(breadcrumb); |
| } |
| else { |
| // else we show it |
| breadcrumb.displayCrumb = true; |
| } |
| crumbWidthSum += breadcrumb.width; |
| } |
| this.hiddenBreadcrumbs = hiddenCrumbs; |
| this._changeDetectorRef.markForCheck(); |
| } |
| } |
| TdBreadcrumbsComponent.decorators = [ |
| { type: Component, args: [{ |
| selector: 'td-breadcrumbs', |
| template: "<ng-content></ng-content>\n", |
| /* tslint:disable-next-line */ |
| host: { |
| class: 'td-breadcrumbs', |
| }, |
| changeDetection: ChangeDetectionStrategy.OnPush, |
| styles: [":host{display:block;width:100%}:host.td-breadcrumbs{white-space:nowrap}"] |
| }] } |
| ]; |
| /** @nocollapse */ |
| TdBreadcrumbsComponent.ctorParameters = () => [ |
| { type: ElementRef }, |
| { type: ChangeDetectorRef } |
| ]; |
| TdBreadcrumbsComponent.propDecorators = { |
| _breadcrumbs: [{ type: ContentChildren, args: [TdBreadcrumbComponent,] }], |
| separatorIcon: [{ type: Input, args: ['separatorIcon',] }] |
| }; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| class CovalentBreadcrumbsModule { |
| } |
| CovalentBreadcrumbsModule.decorators = [ |
| { type: NgModule, args: [{ |
| imports: [ |
| CommonModule, |
| MatIconModule, |
| ], |
| declarations: [ |
| TdBreadcrumbsComponent, |
| TdBreadcrumbComponent, |
| ], |
| exports: [ |
| TdBreadcrumbsComponent, |
| TdBreadcrumbComponent, |
| ], |
| },] } |
| ]; |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| |
| /** |
| * @fileoverview added by tsickle |
| * @suppress {checkTypes,extraRequire,missingReturn,uselessCode} checked by tsc |
| */ |
| |
| export { CovalentBreadcrumbsModule, TdBreadcrumbsComponent, TdBreadcrumbComponent as ɵa }; |
| |
| //# sourceMappingURL=covalent-core-breadcrumbs.js.map |
