@progress/kendo-angular-navigation
Version:
Kendo UI Navigation for Angular
175 lines (168 loc) • 8.37 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, Input, ElementRef, TemplateRef, HostBinding } from '@angular/core';
import { isDocumentAvailable } from '@progress/kendo-angular-common';
import { outerWidth } from '../common/util';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { NgIf, NgTemplateOutlet, NgClass } from '@angular/common';
import * as i0 from "@angular/core";
/**
* @hidden
*/
export class BreadCrumbItemComponent {
el;
item;
collapseMode;
index = -1;
itemTemplate;
hostClasses = true;
get isRootItem() {
return this.item.context.isFirst;
}
get isDisabled() {
return this.disabled || null;
}
get isLastItem() {
return this.item.context.isLast;
}
width;
disabled = false;
constructor(el) {
this.el = el;
}
ngOnInit() {
this.disabled = this.item.data && (this.item.data.disabled || this.item.context.isLast);
}
ngAfterViewInit() {
if (isDocumentAvailable()) {
this.width = outerWidth(this.el.nativeElement);
}
}
onImageLoad() {
if (isDocumentAvailable()) {
this.width = outerWidth(this.el.nativeElement);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BreadCrumbItemComponent, isStandalone: true, selector: "[kendoBreadCrumbItem]", inputs: { item: "item", collapseMode: "collapseMode", index: "index", itemTemplate: "itemTemplate" }, host: { properties: { "class.k-breadcrumb-item": "this.hostClasses", "class.k-breadcrumb-root-item": "this.isRootItem", "attr.aria-disabled": "this.isDisabled", "class.k-breadcrumb-last-item": "this.isLastItem" } }, ngImport: i0, template: `
<ng-template #separator>
<ng-content select="[kendoBreadCrumbSeparator]"></ng-content>
</ng-template>
<ng-container *ngIf="collapseMode === 'wrap'">
<ng-container *ngTemplateOutlet="separator"></ng-container>
</ng-container>
<ng-container *ngIf="!item.context.collapsed">
<span
*ngIf="!itemTemplate"
[ngClass]="{
'k-breadcrumb-root-link': item.context.isFirst,
'k-breadcrumb-link': index !== 0,
'k-breadcrumb-icontext-link': (!!item.data.icon || !!item.data.svgIcon) && !!item.data.text,
'k-breadcrumb-icon-link': (!!item.data.icon || !!item.data.svgIcon) && !item.data.text,
'k-disabled': disabled
}"
[title]="item.data.title || ''"
[tabindex]="disabled ? -1 : 0"
[attr.aria-disabled]="disabled"
[attr.aria-current]="item.context.isLast ? 'page' : null"
role="link"
>
<img *ngIf="item.data.imageUrl" (load)="onImageLoad()" [src]="item.data.imageUrl" class="k-image" role="presentation" />
<kendo-icon-wrapper *ngIf="item.data.icon || item.data.iconClass || item.data.svgIcon"
[name]="item.data.icon"
[customFontClass]="item.data.iconClass"
[svgIcon]="item.data.svgIcon"
>
</kendo-icon-wrapper>
<span class="k-breadcrumb-item-text">{{ item.data.text }}</span>
</span>
<ng-template
*ngIf="itemTemplate"
[ngTemplateOutlet]="itemTemplate"
[ngTemplateOutletContext]="{
$implicit: item.data,
index: index
}"
></ng-template>
</ng-container>
<ng-container *ngIf="collapseMode !== 'wrap'">
<ng-container *ngTemplateOutlet="separator"></ng-container>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BreadCrumbItemComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: '[kendoBreadCrumbItem]',
template: `
<ng-template #separator>
<ng-content select="[kendoBreadCrumbSeparator]"></ng-content>
</ng-template>
<ng-container *ngIf="collapseMode === 'wrap'">
<ng-container *ngTemplateOutlet="separator"></ng-container>
</ng-container>
<ng-container *ngIf="!item.context.collapsed">
<span
*ngIf="!itemTemplate"
[ngClass]="{
'k-breadcrumb-root-link': item.context.isFirst,
'k-breadcrumb-link': index !== 0,
'k-breadcrumb-icontext-link': (!!item.data.icon || !!item.data.svgIcon) && !!item.data.text,
'k-breadcrumb-icon-link': (!!item.data.icon || !!item.data.svgIcon) && !item.data.text,
'k-disabled': disabled
}"
[title]="item.data.title || ''"
[tabindex]="disabled ? -1 : 0"
[attr.aria-disabled]="disabled"
[attr.aria-current]="item.context.isLast ? 'page' : null"
role="link"
>
<img *ngIf="item.data.imageUrl" (load)="onImageLoad()" [src]="item.data.imageUrl" class="k-image" role="presentation" />
<kendo-icon-wrapper *ngIf="item.data.icon || item.data.iconClass || item.data.svgIcon"
[name]="item.data.icon"
[customFontClass]="item.data.iconClass"
[svgIcon]="item.data.svgIcon"
>
</kendo-icon-wrapper>
<span class="k-breadcrumb-item-text">{{ item.data.text }}</span>
</span>
<ng-template
*ngIf="itemTemplate"
[ngTemplateOutlet]="itemTemplate"
[ngTemplateOutletContext]="{
$implicit: item.data,
index: index
}"
></ng-template>
</ng-container>
<ng-container *ngIf="collapseMode !== 'wrap'">
<ng-container *ngTemplateOutlet="separator"></ng-container>
</ng-container>
`,
standalone: true,
imports: [NgIf, NgTemplateOutlet, NgClass, IconWrapperComponent]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { item: [{
type: Input
}], collapseMode: [{
type: Input
}], index: [{
type: Input
}], itemTemplate: [{
type: Input
}], hostClasses: [{
type: HostBinding,
args: ['class.k-breadcrumb-item']
}], isRootItem: [{
type: HostBinding,
args: ['class.k-breadcrumb-root-item']
}], isDisabled: [{
type: HostBinding,
args: ['attr.aria-disabled']
}], isLastItem: [{
type: HostBinding,
args: ['class.k-breadcrumb-last-item']
}] } });