@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.
92 lines • 12 kB
JavaScript
import { Component, ElementRef, HostBinding, ChangeDetectionStrategy, ChangeDetectorRef, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/icon";
import * as i2 from "@angular/common";
export 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']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvYnJlYWRjcnVtYnMvc3JjL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvYnJlYWRjcnVtYnMvc3JjL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBRVgsdUJBQXVCLEVBQ3ZCLGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQzs7OztBQVF2QixNQUFNLE9BQU8scUJBQXFCO0lBOERoQyxZQUNVLFdBQXVCLEVBQ3ZCLGtCQUFxQztRQURyQyxnQkFBVyxHQUFYLFdBQVcsQ0FBWTtRQUN2Qix1QkFBa0IsR0FBbEIsa0JBQWtCLENBQW1CO1FBL0R2QyxrQkFBYSxHQUFHLElBQUksQ0FBQztRQUNyQixXQUFNLEdBQUcsQ0FBQyxDQUFDO1FBQ1gsaUJBQVksR0FBRyxJQUFJLENBQUM7UUFDcEIsbUJBQWMsR0FBRyxlQUFlLENBQUM7UUFFUixtQkFBYyxHQUFHLElBQUksQ0FBQztRQUNuQixzQkFBaUIsR0FBRyxJQUFJLENBQUM7SUEwRDFELENBQUM7SUF4REosMkVBQTJFO0lBQzNFLElBQVcsYUFBYTtRQUN0QixPQUFPLElBQUksQ0FBQyxjQUFjLENBQUM7SUFDN0IsQ0FBQztJQUNELElBQVcsYUFBYSxDQUFDLGFBQXFCO1FBQzVDLElBQUksQ0FBQyxjQUFjLEdBQUcsYUFBYSxDQUFDO1FBQ3BDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsa0JBQWtCLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDekMsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsd0RBQXdEO0lBQ3hELElBQVcsV0FBVztRQUNwQixPQUFPLElBQUksQ0FBQyxZQUFZLENBQUM7SUFDM0IsQ0FBQztJQUNELElBQVcsV0FBVyxDQUFDLFdBQW9CO1FBQ3pDLElBQUksQ0FBQyxZQUFZLEdBQUcsV0FBVyxDQUFDO1FBQ2hDLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsa0JBQWtCLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDekMsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsSUFBSSxZQUFZO1FBQ2QsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDO0lBQzVCLENBQUM7SUFFRDs7T0FFRztJQUNILElBQUksWUFBWSxDQUFDLGFBQXNCO1FBQ3JDLElBQUksQ0FBQyxhQUFhLEdBQUcsYUFBYSxDQUFDO1FBQ25DLFVBQVUsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsa0JBQWtCLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDekMsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQ7O09BRUc7SUFDSCxJQUFJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQUVEOztPQUVHO0lBQ0gsSUFDSSxjQUFjO1FBQ2hCLGdGQUFnRjtRQUNoRixxRkFBcUY7UUFDckYsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQztJQUNqRCxDQUFDO0lBT0QsZUFBZTtRQUNiLHFEQUFxRDtRQUNyRCxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLE1BQU0sR0FBaUIsQ0FDMUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQzlCLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxLQUFLLENBQUM7WUFDakMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3pDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVEOztPQUVHO0lBQ0gsZ0JBQWdCLENBQUMsS0FBWTtRQUMzQixLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQ3pCLENBQUM7O2tIQW5GVSxxQkFBcUI7c0dBQXJCLHFCQUFxQixxT0NmbEMsd05BUUE7MkZET2EscUJBQXFCO2tCQU5qQyxTQUFTOytCQUNFLGlDQUFpQyxtQkFHMUIsdUJBQXVCLENBQUMsTUFBTTtpSUFRZCxjQUFjO3NCQUE5QyxXQUFXO3VCQUFDLGtCQUFrQjtnQkFDSyxpQkFBaUI7c0JBQXBELFdBQVc7dUJBQUMscUJBQXFCO2dCQWlEOUIsY0FBYztzQkFEakIsV0FBVzt1QkFBQyxlQUFlIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBIb3N0QmluZGluZyxcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGQtYnJlYWRjcnVtYiwgYVt0ZC1icmVhZGNydW1iXScsXG4gIHN0eWxlVXJsczogWycuL2JyZWFkY3J1bWIuY29tcG9uZW50LnNjc3MnXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2JyZWFkY3J1bWIuY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVGRCcmVhZGNydW1iQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gIHByaXZhdGUgX2Rpc3BsYXlDcnVtYiA9IHRydWU7XG4gIHByaXZhdGUgX3dpZHRoID0gMDtcbiAgcHJpdmF0ZSBfZGlzcGxheUljb24gPSB0cnVlO1xuICBwcml2YXRlIF9zZXBhcmF0b3JJY29uID0gJ2NoZXZyb25fcmlnaHQnO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MubWF0LWJ1dHRvbicpIG1hdEJ1dHRvbkNsYXNzID0gdHJ1ZTtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy50ZC1icmVhZGNydW1iJykgdGRCcmVhZENydW1iQ2xhc3MgPSB0cnVlO1xuXG4gIC8vIFNldHMgdGhlIGljb24gdXJsIHNob3duIGJldHdlZW4gYnJlYWRjcnVtYnMuIERlZmF1bHRzIHRvICdjaGV2cm9uX3JpZ2h0J1xuICBwdWJsaWMgZ2V0IHNlcGFyYXRvckljb24oKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5fc2VwYXJhdG9ySWNvbjtcbiAgfVxuICBwdWJsaWMgc2V0IHNlcGFyYXRvckljb24oc2VwYXJhdG9ySWNvbjogc3RyaW5nKSB7XG4gICAgdGhpcy5fc2VwYXJhdG9ySWNvbiA9IHNlcGFyYXRvckljb247XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLl9jaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgICB9KTtcbiAgfVxuXG4gIC8vIFNob3VsZCBzaG93IHRoZSByaWdodCBjaGV2cm9uIG9yIG5vdCBiZWZvcmUgdGhlIGxhYmVsXG4gIHB1YmxpYyBnZXQgZGlzcGxheUljb24oKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX2Rpc3BsYXlJY29uO1xuICB9XG4gIHB1YmxpYyBzZXQgZGlzcGxheUljb24oZGlzcGxheUljb246IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9kaXNwbGF5SWNvbiA9IGRpc3BsYXlJY29uO1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5fY2hhbmdlRGV0ZWN0b3JSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgfSk7XG4gIH1cblxuICBnZXQgZGlzcGxheUNydW1iKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9kaXNwbGF5Q3J1bWI7XG4gIH1cblxuICAvKipcbiAgICogV2hldGhlciB0byBkaXNwbGF5IHRoZSBjcnVtYiBvciBub3RcbiAgICovXG4gIHNldCBkaXNwbGF5Q3J1bWIoc2hvdWxkRGlzcGxheTogYm9vbGVhbikge1xuICAgIHRoaXMuX2Rpc3BsYXlDcnVtYiA9IHNob3VsZERpc3BsYXk7XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLl9jaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgICB9KTtcbiAgfVxuXG4gIC8qKlxuICAgKiBXaWR0aCBvZiB0aGUgRE9NIGVsZW1lbnQgb2YgdGhlIGNydW1iXG4gICAqL1xuICBnZXQgd2lkdGgoKTogbnVtYmVyIHtcbiAgICByZXR1cm4gdGhpcy5fd2lkdGg7XG4gIH1cblxuICAvKipcbiAgICogR2V0cyB0aGUgZGlzcGxheSBzdHlsZSBvZiB0aGUgY3J1bWJcbiAgICovXG4gIEBIb3N0QmluZGluZygnc3R5bGUuZGlzcGxheScpXG4gIGdldCBkaXNwbGF5QmluZGluZygpOiBzdHJpbmcgfCB1bmRlZmluZWQge1xuICAgIC8vIFNldCB0aGUgZGlzcGxheSB0byBub25lIG9uIHRoZSBjb21wb25lbnQsIGp1c3QgaW4gY2FzZSB0aGUgZW5kIHVzZXIgaXMgaGlkaW5nXG4gICAgLy8gYW5kIHNob3dpbmcgdGhlbSBpbnN0ZWFkIG9mIHRoZSBjb21wb25lbnQgZG9pbmcgaXRzZWxmIGZvciByZWFzb25zIGxpa2UgcmVzcG9uc2l2ZVxuICAgIHJldHVybiB0aGlzLl9kaXNwbGF5Q3J1bWIgPyB1bmRlZmluZWQgOiAnbm9uZSc7XG4gIH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgX2NoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZlxuICApIHt9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIC8vIHNldCB0aGUgd2lkdGggZnJvbSB0aGUgYWN0dWFsIHJlbmRlcmVkIERPTSBlbGVtZW50XG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLl93aWR0aCA9ICg8SFRNTEVsZW1lbnQ+KFxuICAgICAgICB0aGlzLl9lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnRcbiAgICAgICkpLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLndpZHRoO1xuICAgICAgdGhpcy5fY2hhbmdlRGV0ZWN0b3JSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgfSk7XG4gIH1cblxuICAvKipcbiAgICogU3RvcCBjbGljayBwcm9wYWdhdGlvbiB3aGVuIGNsaWNraW5nIG9uIGljb25cbiAgICovXG4gIF9oYW5kbGVJY29uQ2xpY2soZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgfVxufVxuIiwiPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPG1hdC1pY29uXG4gICpuZ0lmPVwiZGlzcGxheUljb25cIlxuICBjbGFzcz1cInRkLWJyZWFkY3J1bWItc2VwYXJhdG9yLWljb25cIlxuICBbc3R5bGUuY3Vyc29yXT1cIidkZWZhdWx0J1wiXG4gIChjbGljayk9XCJfaGFuZGxlSWNvbkNsaWNrKCRldmVudClcIlxuICA+e3sgc2VwYXJhdG9ySWNvbiB9fTwvbWF0LWljb25cbj5cbiJdfQ==