@progress/kendo-angular-navigation
Version:
Kendo UI Navigation for Angular
187 lines (180 loc) • 8.22 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 { 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: "18.2.14", ngImport: i0, type: BreadCrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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>
@if (collapseMode === 'wrap') {
<ng-container *ngTemplateOutlet="separator"></ng-container>
}
@if (!item.context.collapsed) {
@if (!itemTemplate) {
<span
[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"
>
@if (item.data.imageUrl) {
<img (load)="onImageLoad()" [src]="item.data.imageUrl" class="k-image" role="presentation" />
}
@if (item.data.icon || item.data.iconClass || item.data.svgIcon) {
<kendo-icon-wrapper
[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>
}
@if (itemTemplate) {
<ng-template
[ngTemplateOutlet]="itemTemplate"
[ngTemplateOutletContext]="{
$implicit: item.data,
index: index
}"
></ng-template>
}
}
@if (collapseMode !== 'wrap') {
<ng-container *ngTemplateOutlet="separator"></ng-container>
}
`, isInline: true, dependencies: [{ 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: "18.2.14", 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>
@if (collapseMode === 'wrap') {
<ng-container *ngTemplateOutlet="separator"></ng-container>
}
@if (!item.context.collapsed) {
@if (!itemTemplate) {
<span
[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"
>
@if (item.data.imageUrl) {
<img (load)="onImageLoad()" [src]="item.data.imageUrl" class="k-image" role="presentation" />
}
@if (item.data.icon || item.data.iconClass || item.data.svgIcon) {
<kendo-icon-wrapper
[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>
}
@if (itemTemplate) {
<ng-template
[ngTemplateOutlet]="itemTemplate"
[ngTemplateOutletContext]="{
$implicit: item.data,
index: index
}"
></ng-template>
}
}
@if (collapseMode !== 'wrap') {
<ng-container *ngTemplateOutlet="separator"></ng-container>
}
`,
standalone: true,
imports: [NgTemplateOutlet, NgClass, IconWrapperComponent]
}]
}], ctorParameters: () => [{ 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']
}] } });