@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.
553 lines (547 loc) • 28.8 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ChangeDetectorRef, ElementRef, ChangeDetectionStrategy, Component, HostBinding, Input, ViewChild, ContentChildren, NgModule } from '@angular/core';
import { Subject, fromEvent } from 'rxjs';
import { debounceTime, takeUntil, startWith } from 'rxjs/operators';
import * as i2$1 from '@angular/material/menu';
import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i4 from '@angular/material/icon';
import { MatIcon, MatIconModule } from '@angular/material/icon';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
const _c0$1 = ["*"];
function TdBreadcrumbComponent_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "mat-icon", 2);
i0.ɵɵlistener("click", function TdBreadcrumbComponent_mat_icon_2_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 {
_changeDetectorRef = inject(ChangeDetectorRef);
_displayCrumb = true;
_width = 0;
_displayIcon = true;
_separatorIcon = 'chevron_right';
_shouldTruncate = false;
_maxWidth;
elementRef = inject(ElementRef);
fullText = '';
flexOrder = 0;
isCurrentPage = false;
get ariaCurrent() {
return this.isCurrentPage ? 'page' : null;
}
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 shouldTruncate() {
return this._shouldTruncate;
}
set shouldTruncate(shouldTruncate) {
this._shouldTruncate = shouldTruncate;
setTimeout(() => {
this._changeDetectorRef.markForCheck();
});
}
get maxWidth() {
return this._maxWidth;
}
set maxWidth(maxWidth) {
this._maxWidth = maxWidth;
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';
}
get maxWidthBinding() {
return this._shouldTruncate ? this._maxWidth : undefined;
}
get orderBinding() {
return this.flexOrder;
}
ngAfterViewInit() {
// set the width from the actual rendered DOM element
setTimeout(() => {
this._width = (this.elementRef.nativeElement).getBoundingClientRect().width;
const textSpan = this.elementRef.nativeElement.querySelector('.td-breadcrumb-text');
if (textSpan) {
this.fullText = textSpan.textContent?.trim() || '';
}
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: 11, hostBindings: function TdBreadcrumbComponent_HostBindings(rf, ctx) { if (rf & 2) {
i0.ɵɵattribute("aria-current", ctx.ariaCurrent);
i0.ɵɵstyleProp("display", ctx.displayBinding)("max-width", ctx.maxWidthBinding, "px")("order", ctx.orderBinding);
i0.ɵɵclassProp("mdc-button", ctx.matButtonClass)("td-breadcrumb", ctx.tdBreadCrumbClass);
} }, ngContentSelectors: _c0$1, decls: 3, vars: 6, consts: [[1, "td-breadcrumb-text", 3, "matTooltip", "matTooltipDisabled"], ["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.ɵɵelementStart(0, "span", 0);
i0.ɵɵprojection(1);
i0.ɵɵelementEnd();
i0.ɵɵtemplate(2, TdBreadcrumbComponent_mat_icon_2_Template, 2, 3, "mat-icon", 1);
} if (rf & 2) {
i0.ɵɵclassProp("td-breadcrumb-truncated", ctx.shouldTruncate);
i0.ɵɵproperty("matTooltip", ctx.shouldTruncate ? ctx.fullText : "")("matTooltipDisabled", !ctx.shouldTruncate);
i0.ɵɵattribute("aria-label", ctx.shouldTruncate ? ctx.fullText : "");
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx.displayIcon);
} }, dependencies: [CommonModule, i1.NgIf, MatIcon, MatTooltipModule, i2.MatTooltip], 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;max-width:100%}.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}.td-breadcrumb-text[_ngcontent-%COMP%]{margin:0;padding:0;flex:1 1 auto;min-width:0}.td-breadcrumb-text.td-breadcrumb-truncated[_ngcontent-%COMP%]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}mat-icon.td-breadcrumb-separator-icon[_ngcontent-%COMP%]{flex-shrink:0}"], changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdBreadcrumbComponent, [{
type: Component,
args: [{ selector: 'td-breadcrumb, a[td-breadcrumb]', standalone: true, imports: [CommonModule, MatIcon, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n class=\"td-breadcrumb-text\"\n [class.td-breadcrumb-truncated]=\"shouldTruncate\"\n [matTooltip]=\"shouldTruncate ? fullText : ''\"\n [matTooltipDisabled]=\"!shouldTruncate\"\n [attr.aria-label]=\"shouldTruncate ? fullText : ''\"\n>\n <ng-content></ng-content>\n</span>\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;max-width:100%}: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}.td-breadcrumb-text{margin:0;padding:0;flex:1 1 auto;min-width:0}.td-breadcrumb-text.td-breadcrumb-truncated{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}mat-icon.td-breadcrumb-separator-icon{flex-shrink:0}\n"] }]
}], null, { ariaCurrent: [{
type: HostBinding,
args: ['attr.aria-current']
}], matButtonClass: [{
type: HostBinding,
args: ['class.mdc-button']
}], tdBreadCrumbClass: [{
type: HostBinding,
args: ['class.td-breadcrumb']
}], displayBinding: [{
type: HostBinding,
args: ['style.display']
}], maxWidthBinding: [{
type: HostBinding,
args: ['style.max-width.px']
}], orderBinding: [{
type: HostBinding,
args: ['style.order']
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdBreadcrumbComponent, { className: "TdBreadcrumbComponent", filePath: "breadcrumb/breadcrumb.component.ts", lineNumber: 22 }); })();
const _c0 = ["*"];
function TdBreadcrumbsComponent_button_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "button", 5)(1, "mat-icon");
i0.ɵɵtext(2, "more_horiz");
i0.ɵɵelementEnd()();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
const overflowMenu_r2 = i0.ɵɵreference(4);
i0.ɵɵstyleProp("order", ctx_r0.overflowButtonOrder);
i0.ɵɵproperty("matMenuTriggerFor", overflowMenu_r2);
i0.ɵɵattribute("aria-label", ctx_r0.overflowButtonAriaLabel)("data-test-id", "breadcrumb-overflow-button");
} }
function TdBreadcrumbsComponent_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "mat-icon", 6);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵstyleProp("order", ctx_r0.overflowButtonOrder);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1(" ", ctx_r0.separatorIcon, "\n");
} }
function TdBreadcrumbsComponent_button_5_Template(rf, ctx) { if (rf & 1) {
const _r3 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "button", 7);
i0.ɵɵlistener("click", function TdBreadcrumbsComponent_button_5_Template_button_click_0_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.handleOverflowItemClick(item_r4)); });
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const item_r4 = ctx.$implicit;
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵattribute("data-test-id", "breadcrumb-overflow-menu-item-" + ctx_r0.getItemText(item_r4))("aria-label", "Navigate to " + ctx_r0.getItemText(item_r4));
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1(" ", ctx_r0.getItemText(item_r4), " ");
} }
class TdBreadcrumbsComponent {
_elementRef = inject(ElementRef);
_changeDetectorRef = inject(ChangeDetectorRef);
_resizing = false;
_separatorIcon = 'chevron_right';
_destroy$ = new Subject();
/**
* Maximum width ratio for the last breadcrumb when truncation is needed.
* Set to 35% of available width to ensure last breadcrumb doesn't dominate the space
* while still being readable.
*/
LAST_BREADCRUMB_MAX_WIDTH_RATIO = 0.35;
tdBreadCrumbsClass = true;
role = 'navigation';
ariaLabel = 'Breadcrumb';
// all the sub components, which are the individual breadcrumbs
_breadcrumbs;
// the list of hidden breadcrumbs not shown right now (responsive)
hiddenBreadcrumbs = [];
overflowMenuItems = [];
showOverflowButton = false;
overflowButtonOrder = 50;
overflowMenuTrigger;
/**
* Sets the icon url shown between breadcrumbs. Defaults to 'chevron_right'.
*/
set separatorIcon(separatorIcon) {
this._separatorIcon = separatorIcon;
this.setCrumbIcons();
}
get separatorIcon() {
return this._separatorIcon;
}
size;
get fontFamily() {
return this.size
? `var(--cv-typography-${this.size}-font-family)`
: undefined;
}
get fontSize() {
return this.size
? `var(--cv-typography-${this.size}-font-size)`
: undefined;
}
get fontWeight() {
return this.size
? `var(--cv-typography-${this.size}-font-weight)`
: undefined;
}
get lineHeight() {
return this.size
? `var(--cv-typography-${this.size}-line-height)`
: undefined;
}
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();
setTimeout(() => {
this.setCrumbIcons();
this._changeDetectorRef.markForCheck();
});
});
}
ngOnDestroy() {
this._destroy$.next();
this._destroy$.complete();
}
/*
* 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;
}
get overflowButtonAriaLabel() {
const count = this.hiddenBreadcrumbs.length;
return `Show ${count} hidden breadcrumb${count > 1 ? 's' : ''}`;
}
handleOverflowItemClick(item) {
const nativeElement = item.elementRef?.nativeElement;
if (nativeElement) {
nativeElement.click();
}
}
getItemText(item) {
return item.fullText || '';
}
/**
* Set the crumb icon separators
*/
setCrumbIcons() {
if (this._breadcrumbs) {
const breadcrumbArray = this._breadcrumbs.toArray();
setTimeout(() => {
breadcrumbArray.forEach((breadcrumb, index) => {
breadcrumb.separatorIcon = this.separatorIcon;
breadcrumb.displayIcon = true;
breadcrumb.isCurrentPage = index === breadcrumbArray.length - 1;
});
this._changeDetectorRef.markForCheck();
});
}
}
_calculateVisibility() {
const crumbsArray = this._breadcrumbs.toArray();
const totalBreadcrumbs = crumbsArray.length;
// Reset all orders when there are 2 or fewer breadcrumbs
if (totalBreadcrumbs <= 2) {
crumbsArray.forEach((breadcrumb) => {
breadcrumb.displayCrumb = true;
breadcrumb.shouldTruncate = false;
breadcrumb.maxWidth = undefined;
breadcrumb.flexOrder = 0; // Default order
});
this.showOverflowButton = false;
this.overflowMenuItems = [];
this.hiddenBreadcrumbs = [];
this._changeDetectorRef.markForCheck();
return;
}
const firstCrumb = crumbsArray[0];
const lastCrumb = crumbsArray[totalBreadcrumbs - 1];
const containerWidth = this.nativeElementWidth;
const totalRequiredWidth = crumbsArray.reduce((sum, crumb) => sum + crumb.width, 0);
if (totalRequiredWidth <= containerWidth) {
crumbsArray.forEach((breadcrumb, index) => {
breadcrumb.displayCrumb = true;
breadcrumb.shouldTruncate = false;
breadcrumb.maxWidth = undefined;
breadcrumb.flexOrder =
index === 0
? 0
: index === totalBreadcrumbs - 1
? 1000
: index * 10; // Assign orders based on index for middle crumbs
});
this.showOverflowButton = false;
this.overflowMenuItems = [];
this.hiddenBreadcrumbs = [];
this._changeDetectorRef.markForCheck();
return;
}
const overflowButtonWidth = 48;
const availableWidth = containerWidth - overflowButtonWidth;
const visibleMiddleCrumbs = [];
let requiredWidth = firstCrumb.width + lastCrumb.width;
// Try to fit breadcrumbs from right to left (favoring more recent items)
for (let i = totalBreadcrumbs - 2; i >= 1; i--) {
const breadcrumb = crumbsArray[i];
if (requiredWidth + breadcrumb.width <= availableWidth) {
requiredWidth += breadcrumb.width;
visibleMiddleCrumbs.unshift(i);
}
}
// Apply visibility and flexbox orders
const hiddenBreadcrumbs = [];
let currentOrder = 10; // Start orders at 10 for middle breadcrumbs
crumbsArray.forEach((breadcrumb, index) => {
if (index === 0) {
// First breadcrumb - always visible, always first
breadcrumb.displayCrumb = true;
breadcrumb.shouldTruncate = false;
breadcrumb.maxWidth = undefined;
breadcrumb.flexOrder = 0;
}
else if (index === totalBreadcrumbs - 1) {
// Last breadcrumb - always visible, always last
breadcrumb.displayCrumb = true;
breadcrumb.shouldTruncate = false;
breadcrumb.flexOrder = 1000;
}
else if (visibleMiddleCrumbs.includes(index)) {
// Visible middle breadcrumbs - assign incremental orders
breadcrumb.displayCrumb = true;
breadcrumb.shouldTruncate = false;
breadcrumb.maxWidth = undefined;
breadcrumb.flexOrder = currentOrder;
currentOrder += 10;
}
else {
// Hidden breadcrumbs
breadcrumb.displayCrumb = false;
breadcrumb.shouldTruncate = false;
breadcrumb.maxWidth = undefined;
breadcrumb.flexOrder = 0; // Doesn't matter, it's hidden
hiddenBreadcrumbs.push(breadcrumb);
}
});
// Overflow button order comes after visible middle breadcrumbs
this.overflowButtonOrder = currentOrder;
// Truncate last breadcrumb if too long
const lastBreadcrumbMaxWidth = availableWidth * this.LAST_BREADCRUMB_MAX_WIDTH_RATIO;
if (lastCrumb.width > lastBreadcrumbMaxWidth) {
lastCrumb.shouldTruncate = true;
lastCrumb.maxWidth = lastBreadcrumbMaxWidth;
}
else {
// Ensure maxWidth is reset if last breadcrumb doesn't need truncation
lastCrumb.maxWidth = undefined;
}
this.showOverflowButton = hiddenBreadcrumbs.length > 0;
this.overflowMenuItems = hiddenBreadcrumbs;
this.hiddenBreadcrumbs = hiddenBreadcrumbs;
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);
} }, viewQuery: function TdBreadcrumbsComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(MatMenuTrigger, 5);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overflowMenuTrigger = _t.first);
} }, hostVars: 12, hostBindings: function TdBreadcrumbsComponent_HostBindings(rf, ctx) { if (rf & 2) {
i0.ɵɵattribute("role", ctx.role)("aria-label", ctx.ariaLabel);
i0.ɵɵstyleProp("font-family", ctx.fontFamily)("font-size", ctx.fontSize)("font-weight", ctx.fontWeight)("line-height", ctx.lineHeight);
i0.ɵɵclassProp("td-breadcrumbs", ctx.tdBreadCrumbsClass);
} }, inputs: { separatorIcon: "separatorIcon", size: "size" }, ngContentSelectors: _c0, decls: 6, vars: 3, consts: [["overflowMenu", "matMenu"], ["mat-icon-button", "", "class", "td-breadcrumbs-overflow-button", 3, "matMenuTriggerFor", "order", 4, "ngIf"], ["class", "td-breadcrumb-separator-icon", "color", "primary", "aria-hidden", "true", 3, "order", 4, "ngIf"], [1, "td-breadcrumb-overflow-menu"], ["mat-menu-item", "", 3, "click", 4, "ngFor", "ngForOf"], ["mat-icon-button", "", 1, "td-breadcrumbs-overflow-button", 3, "matMenuTriggerFor"], ["color", "primary", "aria-hidden", "true", 1, "td-breadcrumb-separator-icon"], ["mat-menu-item", "", 3, "click"]], template: function TdBreadcrumbsComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef();
i0.ɵɵprojection(0);
i0.ɵɵtemplate(1, TdBreadcrumbsComponent_button_1_Template, 3, 5, "button", 1)(2, TdBreadcrumbsComponent_mat_icon_2_Template, 2, 3, "mat-icon", 2);
i0.ɵɵelementStart(3, "mat-menu", 3, 0);
i0.ɵɵtemplate(5, TdBreadcrumbsComponent_button_5_Template, 2, 3, "button", 4);
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.showOverflowButton);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.showOverflowButton);
i0.ɵɵadvance(3);
i0.ɵɵproperty("ngForOf", ctx.overflowMenuItems);
} }, dependencies: [CommonModule, i1.NgForOf, i1.NgIf, MatMenuModule, i2$1.MatMenu, i2$1.MatMenuItem, i2$1.MatMenuTrigger, MatButtonModule, i3.MatIconButton, MatIconModule, i4.MatIcon], styles: ["[_nghost-%COMP%]{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}.td-breadcrumbs[_nghost-%COMP%]{white-space:nowrap}.td-breadcrumbs-overflow-button[_ngcontent-%COMP%]{flex-shrink:0;margin:0 4px}.td-breadcrumbs-overflow-button[_ngcontent-%COMP%] mat-icon[_ngcontent-%COMP%]{font-size:18px;height:18px;width:18px}.td-breadcrumbs-overflow-button[_ngcontent-%COMP%] + .td-breadcrumb-separator-icon[_ngcontent-%COMP%]{order:inherit;font-size:16px;width:16px;height:16px;flex-shrink:0;margin:0 10px}.td-breadcrumb-overflow-menu[_ngcontent-%COMP%]{max-width:300px}.td-breadcrumb-overflow-menu[_ngcontent-%COMP%] button[_ngcontent-%COMP%]{max-width:100%}.td-breadcrumb-overflow-menu[_ngcontent-%COMP%] button[_ngcontent-%COMP%] .mat-mdc-menu-item-text{white-space:normal;line-height:1.4}"], changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdBreadcrumbsComponent, [{
type: Component,
args: [{ selector: 'td-breadcrumbs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatMenuModule, MatButtonModule, MatIconModule], template: "<ng-content></ng-content>\n\n<button\n *ngIf=\"showOverflowButton\"\n mat-icon-button\n [matMenuTriggerFor]=\"overflowMenu\"\n [attr.aria-label]=\"overflowButtonAriaLabel\"\n [style.order]=\"overflowButtonOrder\"\n class=\"td-breadcrumbs-overflow-button\"\n [attr.data-test-id]=\"'breadcrumb-overflow-button'\"\n>\n <mat-icon>more_horiz</mat-icon>\n</button>\n<mat-icon\n *ngIf=\"showOverflowButton\"\n class=\"td-breadcrumb-separator-icon\"\n [style.order]=\"overflowButtonOrder\"\n color=\"primary\"\n aria-hidden=\"true\"\n>\n {{ separatorIcon }}\n</mat-icon>\n\n<mat-menu #overflowMenu=\"matMenu\" class=\"td-breadcrumb-overflow-menu\">\n <button\n *ngFor=\"let item of overflowMenuItems\"\n mat-menu-item\n (click)=\"handleOverflowItemClick(item)\"\n [attr.data-test-id]=\"'breadcrumb-overflow-menu-item-' + getItemText(item)\"\n [attr.aria-label]=\"'Navigate to ' + getItemText(item)\"\n >\n {{ getItemText(item) }}\n </button>\n</mat-menu>\n", styles: [":host{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}:host.td-breadcrumbs{white-space:nowrap}.td-breadcrumbs-overflow-button{flex-shrink:0;margin:0 4px}.td-breadcrumbs-overflow-button mat-icon{font-size:18px;height:18px;width:18px}.td-breadcrumbs-overflow-button+.td-breadcrumb-separator-icon{order:inherit;font-size:16px;width:16px;height:16px;flex-shrink:0;margin:0 10px}.td-breadcrumb-overflow-menu{max-width:300px}.td-breadcrumb-overflow-menu button{max-width:100%}.td-breadcrumb-overflow-menu button ::ng-deep .mat-mdc-menu-item-text{white-space:normal;line-height:1.4}\n"] }]
}], null, { tdBreadCrumbsClass: [{
type: HostBinding,
args: ['class.td-breadcrumbs']
}], role: [{
type: HostBinding,
args: ['attr.role']
}], ariaLabel: [{
type: HostBinding,
args: ['attr.aria-label']
}], _breadcrumbs: [{
type: ContentChildren,
args: [TdBreadcrumbComponent, { descendants: true }]
}], overflowMenuTrigger: [{
type: ViewChild,
args: [MatMenuTrigger]
}], separatorIcon: [{
type: Input
}], size: [{
type: Input
}], fontFamily: [{
type: HostBinding,
args: ['style.font-family']
}], fontSize: [{
type: HostBinding,
args: ['style.font-size']
}], fontWeight: [{
type: HostBinding,
args: ['style.font-weight']
}], lineHeight: [{
type: HostBinding,
args: ['style.line-height']
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdBreadcrumbsComponent, { className: "TdBreadcrumbsComponent", filePath: "breadcrumbs.component.ts", lineNumber: 35 }); })();
/**
* @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: [TdBreadcrumbsComponent, 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