@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.
94 lines • 11.9 kB
JavaScript
import { Component, ElementRef, HostBinding, ChangeDetectionStrategy, ChangeDetectorRef, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/icon";
export class TdBreadcrumbComponent {
_elementRef;
_changeDetectorRef;
_displayCrumb = true;
_width = 0;
_displayIcon = true;
_separatorIcon = 'chevron_right';
matButtonClass = true;
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';
}
constructor(_elementRef, _changeDetectorRef) {
this._elementRef = _elementRef;
this._changeDetectorRef = _changeDetectorRef;
}
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();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdBreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdBreadcrumbComponent, selector: "td-breadcrumb, a[td-breadcrumb]", host: { properties: { "class.mdc-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-flex;box-sizing:border-box;flex-direction:row;align-items:center;align-content:center;flex-shrink:0;justify-content:flex-end}:host.td-breadcrumb ::ng-deep>*{margin:0 10px}:host mat-icon{font-size:16px;width:16px;height:16px}:host.mdc-button{min-width:0;padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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-flex;box-sizing:border-box;flex-direction:row;align-items:center;align-content:center;flex-shrink:0;justify-content:flex-end}:host.td-breadcrumb ::ng-deep>*{margin:0 10px}:host mat-icon{font-size:16px;width:16px;height:16px}:host.mdc-button{min-width:0;padding:0}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { matButtonClass: [{
type: HostBinding,
args: ['class.mdc-button']
}], tdBreadCrumbClass: [{
type: HostBinding,
args: ['class.td-breadcrumb']
}], displayBinding: [{
type: HostBinding,
args: ['style.display']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvYnJlYWRjcnVtYnMvc3JjL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvYnJlYWRjcnVtYnMvc3JjL2JyZWFkY3J1bWIvYnJlYWRjcnVtYi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULFVBQVUsRUFDVixXQUFXLEVBRVgsdUJBQXVCLEVBQ3ZCLGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQzs7OztBQVF2QixNQUFNLE9BQU8scUJBQXFCO0lBK0R0QjtJQUNBO0lBL0RGLGFBQWEsR0FBRyxJQUFJLENBQUM7SUFDckIsTUFBTSxHQUFHLENBQUMsQ0FBQztJQUNYLFlBQVksR0FBRyxJQUFJLENBQUM7SUFDcEIsY0FBYyxHQUFHLGVBQWUsQ0FBQztJQUVSLGNBQWMsR0FBRyxJQUFJLENBQUM7SUFDbkIsaUJBQWlCLEdBQUcsSUFBSSxDQUFDO0lBRTdELDJFQUEyRTtJQUMzRSxJQUFXLGFBQWE7UUFDdEIsT0FBTyxJQUFJLENBQUMsY0FBYyxDQUFDO0lBQzdCLENBQUM7SUFDRCxJQUFXLGFBQWEsQ0FBQyxhQUFxQjtRQUM1QyxJQUFJLENBQUMsY0FBYyxHQUFHLGFBQWEsQ0FBQztRQUNwQyxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3pDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELHdEQUF3RDtJQUN4RCxJQUFXLFdBQVc7UUFDcEIsT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDO0lBQzNCLENBQUM7SUFDRCxJQUFXLFdBQVcsQ0FBQyxXQUFvQjtRQUN6QyxJQUFJLENBQUMsWUFBWSxHQUFHLFdBQVcsQ0FBQztRQUNoQyxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3pDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELElBQUksWUFBWTtRQUNkLE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQztJQUM1QixDQUFDO0lBRUQ7O09BRUc7SUFDSCxJQUFJLFlBQVksQ0FBQyxhQUFzQjtRQUNyQyxJQUFJLENBQUMsYUFBYSxHQUFHLGFBQWEsQ0FBQztRQUNuQyxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3pDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVEOztPQUVHO0lBQ0gsSUFBSSxLQUFLO1FBQ1AsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQ3JCLENBQUM7SUFFRDs7T0FFRztJQUNILElBQ0ksY0FBYztRQUNoQixnRkFBZ0Y7UUFDaEYscUZBQXFGO1FBQ3JGLE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUM7SUFDakQsQ0FBQztJQUVELFlBQ1UsV0FBdUIsRUFDdkIsa0JBQXFDO1FBRHJDLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBQ3ZCLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBbUI7SUFDNUMsQ0FBQztJQUVKLGVBQWU7UUFDYixxREFBcUQ7UUFDckQsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxNQUFNLEdBQWlCLENBQzFCLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUM5QixDQUFDLHFCQUFxQixFQUFFLENBQUMsS0FBSyxDQUFDO1lBQ2pDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUN6QyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRDs7T0FFRztJQUNILGdCQUFnQixDQUFDLEtBQVk7UUFDM0IsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztJQUN6QixDQUFDO3VHQW5GVSxxQkFBcUI7MkZBQXJCLHFCQUFxQixxT0NmbEMsd05BUUE7OzJGRE9hLHFCQUFxQjtrQkFOakMsU0FBUzsrQkFDRSxpQ0FBaUMsbUJBRzFCLHVCQUF1QixDQUFDLE1BQU07K0dBUWQsY0FBYztzQkFBOUMsV0FBVzt1QkFBQyxrQkFBa0I7Z0JBQ0ssaUJBQWlCO3NCQUFwRCxXQUFXO3VCQUFDLHFCQUFxQjtnQkFpRDlCLGNBQWM7c0JBRGpCLFdBQVc7dUJBQUMsZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSG9zdEJpbmRpbmcsXG4gIEFmdGVyVmlld0luaXQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RkLWJyZWFkY3J1bWIsIGFbdGQtYnJlYWRjcnVtYl0nLFxuICBzdHlsZVVybHM6IFsnLi9icmVhZGNydW1iLmNvbXBvbmVudC5zY3NzJ10sXG4gIHRlbXBsYXRlVXJsOiAnLi9icmVhZGNydW1iLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFRkQnJlYWRjcnVtYkNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICBwcml2YXRlIF9kaXNwbGF5Q3J1bWIgPSB0cnVlO1xuICBwcml2YXRlIF93aWR0aCA9IDA7XG4gIHByaXZhdGUgX2Rpc3BsYXlJY29uID0gdHJ1ZTtcbiAgcHJpdmF0ZSBfc2VwYXJhdG9ySWNvbiA9ICdjaGV2cm9uX3JpZ2h0JztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLm1kYy1idXR0b24nKSBtYXRCdXR0b25DbGFzcyA9IHRydWU7XG4gIEBIb3N0QmluZGluZygnY2xhc3MudGQtYnJlYWRjcnVtYicpIHRkQnJlYWRDcnVtYkNsYXNzID0gdHJ1ZTtcblxuICAvLyBTZXRzIHRoZSBpY29uIHVybCBzaG93biBiZXR3ZWVuIGJyZWFkY3J1bWJzLiBEZWZhdWx0cyB0byAnY2hldnJvbl9yaWdodCdcbiAgcHVibGljIGdldCBzZXBhcmF0b3JJY29uKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuX3NlcGFyYXRvckljb247XG4gIH1cbiAgcHVibGljIHNldCBzZXBhcmF0b3JJY29uKHNlcGFyYXRvckljb246IHN0cmluZykge1xuICAgIHRoaXMuX3NlcGFyYXRvckljb24gPSBzZXBhcmF0b3JJY29uO1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5fY2hhbmdlRGV0ZWN0b3JSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgfSk7XG4gIH1cblxuICAvLyBTaG91bGQgc2hvdyB0aGUgcmlnaHQgY2hldnJvbiBvciBub3QgYmVmb3JlIHRoZSBsYWJlbFxuICBwdWJsaWMgZ2V0IGRpc3BsYXlJY29uKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9kaXNwbGF5SWNvbjtcbiAgfVxuICBwdWJsaWMgc2V0IGRpc3BsYXlJY29uKGRpc3BsYXlJY29uOiBib29sZWFuKSB7XG4gICAgdGhpcy5fZGlzcGxheUljb24gPSBkaXNwbGF5SWNvbjtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuX2NoYW5nZURldGVjdG9yUmVmLm1hcmtGb3JDaGVjaygpO1xuICAgIH0pO1xuICB9XG5cbiAgZ2V0IGRpc3BsYXlDcnVtYigpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5fZGlzcGxheUNydW1iO1xuICB9XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgdG8gZGlzcGxheSB0aGUgY3J1bWIgb3Igbm90XG4gICAqL1xuICBzZXQgZGlzcGxheUNydW1iKHNob3VsZERpc3BsYXk6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9kaXNwbGF5Q3J1bWIgPSBzaG91bGREaXNwbGF5O1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5fY2hhbmdlRGV0ZWN0b3JSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgfSk7XG4gIH1cblxuICAvKipcbiAgICogV2lkdGggb2YgdGhlIERPTSBlbGVtZW50IG9mIHRoZSBjcnVtYlxuICAgKi9cbiAgZ2V0IHdpZHRoKCk6IG51bWJlciB7XG4gICAgcmV0dXJuIHRoaXMuX3dpZHRoO1xuICB9XG5cbiAgLyoqXG4gICAqIEdldHMgdGhlIGRpc3BsYXkgc3R5bGUgb2YgdGhlIGNydW1iXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmRpc3BsYXknKVxuICBnZXQgZGlzcGxheUJpbmRpbmcoKTogc3RyaW5nIHwgdW5kZWZpbmVkIHtcbiAgICAvLyBTZXQgdGhlIGRpc3BsYXkgdG8gbm9uZSBvbiB0aGUgY29tcG9uZW50LCBqdXN0IGluIGNhc2UgdGhlIGVuZCB1c2VyIGlzIGhpZGluZ1xuICAgIC8vIGFuZCBzaG93aW5nIHRoZW0gaW5zdGVhZCBvZiB0aGUgY29tcG9uZW50IGRvaW5nIGl0c2VsZiBmb3IgcmVhc29ucyBsaWtlIHJlc3BvbnNpdmVcbiAgICByZXR1cm4gdGhpcy5fZGlzcGxheUNydW1iID8gdW5kZWZpbmVkIDogJ25vbmUnO1xuICB9XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBfZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIF9jaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWZcbiAgKSB7fVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICAvLyBzZXQgdGhlIHdpZHRoIGZyb20gdGhlIGFjdHVhbCByZW5kZXJlZCBET00gZWxlbWVudFxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5fd2lkdGggPSAoPEhUTUxFbGVtZW50PihcbiAgICAgICAgdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50XG4gICAgICApKS5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aDtcbiAgICAgIHRoaXMuX2NoYW5nZURldGVjdG9yUmVmLm1hcmtGb3JDaGVjaygpO1xuICAgIH0pO1xuICB9XG5cbiAgLyoqXG4gICAqIFN0b3AgY2xpY2sgcHJvcGFnYXRpb24gd2hlbiBjbGlja2luZyBvbiBpY29uXG4gICAqL1xuICBfaGFuZGxlSWNvbkNsaWNrKGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gIH1cbn1cbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjxtYXQtaWNvblxuICAqbmdJZj1cImRpc3BsYXlJY29uXCJcbiAgY2xhc3M9XCJ0ZC1icmVhZGNydW1iLXNlcGFyYXRvci1pY29uXCJcbiAgW3N0eWxlLmN1cnNvcl09XCInZGVmYXVsdCdcIlxuICAoY2xpY2spPVwiX2hhbmRsZUljb25DbGljaygkZXZlbnQpXCJcbiAgPnt7IHNlcGFyYXRvckljb24gfX08L21hdC1pY29uXG4+XG4iXX0=