@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.
288 lines (282 loc) • 13.7 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, ChangeDetectorRef, ChangeDetectionStrategy, Component, HostBinding, Input, ContentChildren, NgModule } from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { debounceTime, takeUntil, startWith } from 'rxjs/operators';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { MatIcon } from '@angular/material/icon';
const _c0$1 = ["*"];
function TdBreadcrumbComponent_mat_icon_1_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "mat-icon", 1);
i0.ɵɵlistener("click", function TdBreadcrumbComponent_mat_icon_1_Template_mat_icon_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1._handleIconClick($event)); });
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵstyleProp("cursor", "default");
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r1.separatorIcon);
} }
class TdBreadcrumbComponent {
_elementRef = inject(ElementRef);
_changeDetectorRef = inject(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';
}
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 = function TdBreadcrumbComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdBreadcrumbComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdBreadcrumbComponent, selectors: [["td-breadcrumb"], ["a", "td-breadcrumb", ""]], hostVars: 6, hostBindings: function TdBreadcrumbComponent_HostBindings(rf, ctx) { if (rf & 2) {
i0.ɵɵstyleProp("display", ctx.displayBinding);
i0.ɵɵclassProp("mdc-button", ctx.matButtonClass)("td-breadcrumb", ctx.tdBreadCrumbClass);
} }, ngContentSelectors: _c0$1, decls: 2, vars: 1, consts: [["class", "td-breadcrumb-separator-icon", 3, "cursor", "click", 4, "ngIf"], [1, "td-breadcrumb-separator-icon", 3, "click"]], template: function TdBreadcrumbComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef();
i0.ɵɵprojection(0);
i0.ɵɵtemplate(1, TdBreadcrumbComponent_mat_icon_1_Template, 2, 3, "mat-icon", 0);
} if (rf & 2) {
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.displayIcon);
} }, dependencies: [CommonModule, i1.NgIf, MatIcon], styles: [".td-breadcrumb[_nghost-%COMP%]{display:inline-flex;box-sizing:border-box;flex-direction:row;align-items:center;align-content:center;flex-shrink:0;justify-content:flex-end}.td-breadcrumb[_nghost-%COMP%] >*{margin:0 10px}[_nghost-%COMP%] mat-icon[_ngcontent-%COMP%]{font-size:16px;width:16px;height:16px}.mdc-button[_nghost-%COMP%]{min-width:0;padding:0}"], changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdBreadcrumbComponent, [{
type: Component,
args: [{ selector: 'td-breadcrumb, a[td-breadcrumb]', imports: [CommonModule, MatIcon], 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"] }]
}], null, { matButtonClass: [{
type: HostBinding,
args: ['class.mdc-button']
}], tdBreadCrumbClass: [{
type: HostBinding,
args: ['class.td-breadcrumb']
}], displayBinding: [{
type: HostBinding,
args: ['style.display']
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdBreadcrumbComponent, { className: "TdBreadcrumbComponent", filePath: "breadcrumb/breadcrumb.component.ts", lineNumber: 20 }); })();
const _c0 = ["*"];
class TdBreadcrumbsComponent {
_elementRef = inject(ElementRef);
_changeDetectorRef = inject(ChangeDetectorRef);
_resizing = false;
_separatorIcon = 'chevron_right';
_destroy$ = new Subject();
tdBreadCrumbsClass = true;
// all the sub components, which are the individual breadcrumbs
_breadcrumbs;
// the list of hidden breadcrumbs not shown right now (responsive)
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);
}
});
}
ngAfterViewInit() {
this._waitToCalculateVisibility();
}
ngAfterContentInit() {
this._breadcrumbs.changes
.pipe(startWith(this._breadcrumbs), takeUntil(this._destroy$))
.subscribe(() => {
this._waitToCalculateVisibility();
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();
}
_waitToCalculateVisibility() {
setTimeout(() => {
this._calculateVisibility();
});
}
static ɵfac = function TdBreadcrumbsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdBreadcrumbsComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdBreadcrumbsComponent, selectors: [["td-breadcrumbs"]], contentQueries: function TdBreadcrumbsComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
i0.ɵɵcontentQuery(dirIndex, TdBreadcrumbComponent, 5);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._breadcrumbs = _t);
} }, hostVars: 2, hostBindings: function TdBreadcrumbsComponent_HostBindings(rf, ctx) { if (rf & 2) {
i0.ɵɵclassProp("td-breadcrumbs", ctx.tdBreadCrumbsClass);
} }, inputs: { separatorIcon: "separatorIcon" }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function TdBreadcrumbsComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef();
i0.ɵɵprojection(0);
} }, styles: ["[_nghost-%COMP%]{display:flex;align-items:center}.td-breadcrumbs[_nghost-%COMP%]{white-space:nowrap}"], changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdBreadcrumbsComponent, [{
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"] }]
}], null, { tdBreadCrumbsClass: [{
type: HostBinding,
args: ['class.td-breadcrumbs']
}], _breadcrumbs: [{
type: ContentChildren,
args: [TdBreadcrumbComponent, { descendants: true }]
}], separatorIcon: [{
type: Input
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdBreadcrumbsComponent, { className: "TdBreadcrumbsComponent", filePath: "breadcrumbs.component.ts", lineNumber: 28 }); })();
/**
* @deprecated This module is deprecated and will be removed in future versions.
* Please migrate to using standalone components as soon as possible.
*/
class CovalentBreadcrumbsModule {
static ɵfac = function CovalentBreadcrumbsModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentBreadcrumbsModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CovalentBreadcrumbsModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [TdBreadcrumbComponent] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentBreadcrumbsModule, [{
type: NgModule,
args: [{
imports: [TdBreadcrumbsComponent, TdBreadcrumbComponent],
exports: [TdBreadcrumbsComponent, TdBreadcrumbComponent],
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentBreadcrumbsModule, { imports: [TdBreadcrumbsComponent, TdBreadcrumbComponent], exports: [TdBreadcrumbsComponent, TdBreadcrumbComponent] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { CovalentBreadcrumbsModule, TdBreadcrumbComponent, TdBreadcrumbsComponent };
//# sourceMappingURL=covalent-core-breadcrumbs.mjs.map