@progress/kendo-angular-navigation
Version:
Kendo UI Navigation for Angular
111 lines (110 loc) • 5.63 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, HostBinding, Input } from '@angular/core';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import { BottomNavigationItemTemplateDirective } from './templates/item-template.directive';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import * as i0 from "@angular/core";
/**
* @hidden
*/
export class BottomNavigationItemComponent {
itemTemplate;
item;
index;
disabledComponent;
selectedIdx;
orientation;
get disabledClass() {
return this.item.disabled;
}
get label() {
return this.item.text ? this.item.text : null;
}
get tabindex() {
return this.item.tabIndex ? this.item.tabIndex : 0;
}
get selectedClass() {
return this.selectedIdx ? this.selectedIdx === this.index : this.item.selected;
}
get itemIcon() {
return Boolean(this.item.icon || this.item.iconClass || this.item.svgIcon);
}
get iconClasses() {
const kendoIcon = this.item.icon ? `k-icon k-i-${this.item.icon}` : '';
const customIcon = this.item.iconClass ? this.item.iconClass : '';
return `${kendoIcon} ${customIcon}`;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BottomNavigationItemComponent, isStandalone: true, selector: "[kendoBottomNavigationItem]", inputs: { itemTemplate: "itemTemplate", item: "item", index: "index", disabledComponent: "disabledComponent", selectedIdx: "selectedIdx", orientation: "orientation" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-label": "this.label", "attr.tabindex": "this.tabindex", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass" } }, ngImport: i0, template: `
<ng-container *ngIf="!itemTemplate">
<kendo-icon-wrapper *ngIf="itemIcon"
innerCssClass="k-bottom-nav-item-icon"
size="xlarge"
[name]="item.icon"
[customFontClass]="item.iconClass"
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
<span *ngIf="item.text" class="k-bottom-nav-item-text">{{item.text}}</span>
</ng-container>
<ng-template *ngIf="itemTemplate"
[ngTemplateOutlet]="itemTemplate?.templateRef"
[ngTemplateOutletContext]="{ $implicit: item }">
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: '[kendoBottomNavigationItem]',
template: `
<ng-container *ngIf="!itemTemplate">
<kendo-icon-wrapper *ngIf="itemIcon"
innerCssClass="k-bottom-nav-item-icon"
size="xlarge"
[name]="item.icon"
[customFontClass]="item.iconClass"
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
<span *ngIf="item.text" class="k-bottom-nav-item-text">{{item.text}}</span>
</ng-container>
<ng-template *ngIf="itemTemplate"
[ngTemplateOutlet]="itemTemplate?.templateRef"
[ngTemplateOutletContext]="{ $implicit: item }">
</ng-template>
`,
standalone: true,
imports: [NgIf, IconWrapperComponent, NgTemplateOutlet]
}]
}], propDecorators: { itemTemplate: [{
type: Input
}], item: [{
type: Input
}], index: [{
type: Input
}], disabledComponent: [{
type: Input
}], selectedIdx: [{
type: Input
}], orientation: [{
type: Input
}], disabledClass: [{
type: HostBinding,
args: ['attr.aria-disabled']
}, {
type: HostBinding,
args: ['class.k-disabled']
}], label: [{
type: HostBinding,
args: ['attr.aria-label']
}], tabindex: [{
type: HostBinding,
args: ['attr.tabindex']
}], selectedClass: [{
type: HostBinding,
args: ['attr.aria-current']
}, {
type: HostBinding,
args: ['class.k-selected']
}] } });