@covalent/core
Version:
Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.
244 lines (238 loc) • 12.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, HostBinding, ContentChildren, Input, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { Subject, fromEvent } from 'rxjs';
import { debounceTime, takeUntil, startWith } from 'rxjs/operators';
class TdBreadcrumbComponent {
constructor(_elementRef, _changeDetectorRef) {
this._elementRef = _elementRef;
this._changeDetectorRef = _changeDetectorRef;
this._displayCrumb = true;
this._width = 0;
this._displayIcon = true;
this._separatorIcon = 'chevron_right';
this.matButtonClass = true;
this.tdBreadCrumbClass = true;
}
// Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'
get separatorIcon() {
return this._separatorIcon;
}
set separatorIcon(separatorIcon) {
this._separatorIcon = separatorIcon;
setTimeout(() => {
this._changeDetectorRef.markForCheck();
});
}
// Should show the right chevron or not before the label
get displayIcon() {
return this._displayIcon;
}
set displayIcon(displayIcon) {
this._displayIcon = displayIcon;
setTimeout(() => {
this._changeDetectorRef.markForCheck();
});
}
get displayCrumb() {
return this._displayCrumb;
}
/**
* Whether to display the crumb or not
*/
set displayCrumb(shouldDisplay) {
this._displayCrumb = shouldDisplay;
setTimeout(() => {
this._changeDetectorRef.markForCheck();
});
}
/**
* Width of the DOM element of the crumb
*/
get width() {
return this._width;
}
/**
* Gets the display style of the crumb
*/
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';
}
ngAfterViewInit() {
// set the width from the actual rendered DOM element
setTimeout(() => {
this._width = (this._elementRef.nativeElement).getBoundingClientRect().width;
this._changeDetectorRef.markForCheck();
});
}
/**
* Stop click propagation when clicking on icon
*/
_handleIconClick(event) {
event.stopPropagation();
event.preventDefault();
}
}
TdBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdBreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
TdBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdBreadcrumbComponent, selector: "td-breadcrumb, a[td-breadcrumb]", host: { properties: { "class.mat-button": "this.matButtonClass", "class.td-breadcrumb": "this.tdBreadCrumbClass", "style.display": "this.displayBinding" } }, ngImport: i0, template: "<ng-content></ng-content>\n<mat-icon\n *ngIf=\"displayIcon\"\n class=\"td-breadcrumb-separator-icon\"\n [style.cursor]=\"'default'\"\n (click)=\"_handleIconClick($event)\"\n >{{ separatorIcon }}</mat-icon\n>\n", styles: [":host.td-breadcrumb{display:inline-block;box-sizing:border-box;flex-direction:row;align-items:center;align-content:center;max-width:100%;justify-content:flex-end}:host.td-breadcrumb ::ng-deep>*{margin:0 10px}:host .td-breadcrumb-separator-icon{display:inline-flex;vertical-align:middle}:host.mat-button{min-width:0;padding:0}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdBreadcrumbComponent, decorators: [{
type: Component,
args: [{ selector: 'td-breadcrumb, a[td-breadcrumb]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<mat-icon\n *ngIf=\"displayIcon\"\n class=\"td-breadcrumb-separator-icon\"\n [style.cursor]=\"'default'\"\n (click)=\"_handleIconClick($event)\"\n >{{ separatorIcon }}</mat-icon\n>\n", styles: [":host.td-breadcrumb{display:inline-block;box-sizing:border-box;flex-direction:row;align-items:center;align-content:center;max-width:100%;justify-content:flex-end}:host.td-breadcrumb ::ng-deep>*{margin:0 10px}:host .td-breadcrumb-separator-icon{display:inline-flex;vertical-align:middle}:host.mat-button{min-width:0;padding:0}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { matButtonClass: [{
type: HostBinding,
args: ['class.mat-button']
}], tdBreadCrumbClass: [{
type: HostBinding,
args: ['class.td-breadcrumb']
}], displayBinding: [{
type: HostBinding,
args: ['style.display']
}] } });
class TdBreadcrumbsComponent {
constructor(_elementRef, _changeDetectorRef) {
this._elementRef = _elementRef;
this._changeDetectorRef = _changeDetectorRef;
this._resizing = false;
this._separatorIcon = 'chevron_right';
this._destroy$ = new Subject();
this.tdBreadCrumbsClass = true;
// the list of hidden breadcrumbs not shown right now (responsive)
this.hiddenBreadcrumbs = [];
}
/**
* Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.
*/
set separatorIcon(separatorIcon) {
this._separatorIcon = separatorIcon;
this.setCrumbIcons();
}
get separatorIcon() {
return this._separatorIcon;
}
ngOnInit() {
fromEvent(window, 'resize')
.pipe(debounceTime(10), takeUntil(this._destroy$))
.subscribe(() => {
if (!this._resizing) {
this._resizing = true;
setTimeout(() => {
this._calculateVisibility();
this._resizing = false;
this._changeDetectorRef.markForCheck();
}, 100);
}
});
}
ngAfterContentInit() {
// Note: doesn't need to unsubscribe since `QueryList.changes`
// gets completed by Angular when the view is destroyed.
this._breadcrumbs.changes
.pipe(startWith(this._breadcrumbs))
.subscribe(() => {
this.setCrumbIcons();
this._changeDetectorRef.markForCheck();
});
}
ngOnDestroy() {
this._destroy$.next();
}
/*
* Current width of the element container
*/
get nativeElementWidth() {
const element = this._elementRef.nativeElement;
// Need to take into account border, margin and padding that might be around all the crumbs
const style = window.getComputedStyle(element);
const borderLeft = parseInt(style.borderLeft, 10);
const borderRight = parseInt(style.borderRight, 10);
const marginLeft = parseInt(style.marginLeft, 10);
const marginRight = parseInt(style.marginRight, 10);
const paddingLeft = parseInt(style.paddingLeft, 10);
const paddingRight = parseInt(style.paddingRight, 10);
return (element.getBoundingClientRect().width -
borderLeft -
borderRight -
marginLeft -
marginRight -
paddingLeft -
paddingRight);
}
/**
* The total count of individual breadcrumbs
*/
get count() {
return this._breadcrumbs ? this._breadcrumbs.length : 0;
}
/**
* Set the crumb icon separators
*/
setCrumbIcons() {
if (this._breadcrumbs) {
const breadcrumbArray = this._breadcrumbs.toArray();
breadcrumbArray.forEach((breadcrumb, index) => {
breadcrumb.separatorIcon = this.separatorIcon;
// don't show the icon on the last breadcrumb
breadcrumb.displayIcon = index < breadcrumbArray.length - 1;
});
}
}
_calculateVisibility() {
const crumbsArray = this._breadcrumbs.toArray();
let crumbWidthSum = 0;
const hiddenCrumbs = [];
// loop through crumbs in reverse order to calculate which ones should be removed
for (let i = crumbsArray.length - 1; i >= 0; i--) {
const 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdBreadcrumbsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
TdBreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdBreadcrumbsComponent, selector: "td-breadcrumbs", inputs: { separatorIcon: "separatorIcon" }, host: { properties: { "class.td-breadcrumbs": "this.tdBreadCrumbsClass" } }, queries: [{ propertyName: "_breadcrumbs", predicate: TdBreadcrumbComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center}:host.td-breadcrumbs{white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdBreadcrumbsComponent, decorators: [{
type: Component,
args: [{ selector: 'td-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center}:host.td-breadcrumbs{white-space:nowrap}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tdBreadCrumbsClass: [{
type: HostBinding,
args: ['class.td-breadcrumbs']
}], _breadcrumbs: [{
type: ContentChildren,
args: [TdBreadcrumbComponent, { descendants: true }]
}], separatorIcon: [{
type: Input
}] } });
class CovalentBreadcrumbsModule {
}
CovalentBreadcrumbsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CovalentBreadcrumbsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentBreadcrumbsModule, declarations: [TdBreadcrumbsComponent, TdBreadcrumbComponent], imports: [CommonModule, MatIconModule], exports: [TdBreadcrumbsComponent, TdBreadcrumbComponent] });
CovalentBreadcrumbsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentBreadcrumbsModule, imports: [[CommonModule, MatIconModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentBreadcrumbsModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, MatIconModule],
declarations: [TdBreadcrumbsComponent, TdBreadcrumbComponent],
exports: [TdBreadcrumbsComponent, TdBreadcrumbComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CovalentBreadcrumbsModule, TdBreadcrumbComponent, TdBreadcrumbsComponent };
//# sourceMappingURL=covalent-core-breadcrumbs.mjs.map