@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
201 lines (196 loc) • 8.94 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Component, Input, TemplateRef, HostBinding, ElementRef, Renderer2 } from "@angular/core";
import { chevronDownIcon, chevronUpIcon } from "@progress/kendo-svg-icons";
import { DrawerService } from './drawer.service';
import { nestedLink, DRAWER_LINK_SELECTOR } from './util';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { NgIf, NgTemplateOutlet } from "@angular/common";
import * as i0 from "@angular/core";
import * as i1 from "./drawer.service";
/**
* @hidden
*/
export class DrawerItemComponent {
drawerService;
element;
renderer;
viewItem;
index;
itemTemplate;
mini;
expanded;
disabled;
cssClass;
cssStyle;
get disabledClass() {
return this.item.disabled;
}
get selectedClass() {
return this.drawerService.selectedIndices.indexOf(this.index) >= 0;
}
get label() {
return this.item.text ? this.item.text : null;
}
arrowUpIcon = chevronUpIcon;
arrowDownIcon = chevronDownIcon;
constructor(drawerService, element, renderer) {
this.drawerService = drawerService;
this.element = element;
this.renderer = renderer;
}
ngAfterViewInit() {
const elem = this.element.nativeElement;
const link = nestedLink(elem, DRAWER_LINK_SELECTOR);
if (link) {
this.renderer.removeAttribute(link, 'tabindex');
}
}
get iconClasses() {
if (this.item.icon) {
const stripIcon = this.item.icon.replace('k-i-', '');
return `${stripIcon}`;
}
}
get innerCssClasses() {
if (this.item.iconClass && this.item.icon) {
return `${this.item.iconClass}`;
}
}
get customIconClasses() {
if (!this.item.icon && this.item.iconClass) {
return this.item.iconClass;
}
}
get item() {
return this.viewItem.item;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerItemComponent, deps: [{ token: i1.DrawerService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawerItemComponent, isStandalone: true, selector: "[kendoDrawerItem]", inputs: { viewItem: "viewItem", index: "index", itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass", "attr.aria-label": "this.label" } }, ngImport: i0, template: `
<ng-template *ngIf="itemTemplate; else defaultTemplate"
[ngTemplateOutlet]="itemTemplate"
[ngTemplateOutletContext]="{
$implicit: item,
isItemExpanded: viewItem.isExpanded,
hasChildren: viewItem.hasChildren,
level: viewItem.level
}">
</ng-template>
<ng-template #defaultTemplate>
<ng-container *ngIf="expanded">
<kendo-icon-wrapper
*ngIf="item.icon || item.iconClass || item.svgIcon"
[name]="iconClasses"
[customFontClass]="customIconClasses"
[svgIcon]="item.svgIcon"
[innerCssClass]="innerCssClasses"
>
</kendo-icon-wrapper>
<span class="k-item-text">{{ item.text }}</span>
<span *ngIf="viewItem.hasChildren" class="k-spacer"></span>
<kendo-icon-wrapper
*ngIf="viewItem.hasChildren"
[name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
innerCssClass="k-drawer-toggle"
[svgIcon]="viewItem.isExpanded ? arrowUpIcon : arrowDownIcon"
>
</kendo-icon-wrapper>
</ng-container>
<ng-container *ngIf="mini && !expanded">
<kendo-icon-wrapper
*ngIf="item.icon || item.iconClass || item.svgIcon"
[name]="iconClasses"
[customFontClass]="customIconClasses"
[svgIcon]="item.svgIcon"
[innerCssClass]="innerCssClasses"
>
</kendo-icon-wrapper>
</ng-container>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: DrawerItemComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: '[kendoDrawerItem]',
template: `
<ng-template *ngIf="itemTemplate; else defaultTemplate"
[ngTemplateOutlet]="itemTemplate"
[ngTemplateOutletContext]="{
$implicit: item,
isItemExpanded: viewItem.isExpanded,
hasChildren: viewItem.hasChildren,
level: viewItem.level
}">
</ng-template>
<ng-template #defaultTemplate>
<ng-container *ngIf="expanded">
<kendo-icon-wrapper
*ngIf="item.icon || item.iconClass || item.svgIcon"
[name]="iconClasses"
[customFontClass]="customIconClasses"
[svgIcon]="item.svgIcon"
[innerCssClass]="innerCssClasses"
>
</kendo-icon-wrapper>
<span class="k-item-text">{{ item.text }}</span>
<span *ngIf="viewItem.hasChildren" class="k-spacer"></span>
<kendo-icon-wrapper
*ngIf="viewItem.hasChildren"
[name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
innerCssClass="k-drawer-toggle"
[svgIcon]="viewItem.isExpanded ? arrowUpIcon : arrowDownIcon"
>
</kendo-icon-wrapper>
</ng-container>
<ng-container *ngIf="mini && !expanded">
<kendo-icon-wrapper
*ngIf="item.icon || item.iconClass || item.svgIcon"
[name]="iconClasses"
[customFontClass]="customIconClasses"
[svgIcon]="item.svgIcon"
[innerCssClass]="innerCssClasses"
>
</kendo-icon-wrapper>
</ng-container>
</ng-template>
`,
standalone: true,
imports: [NgIf, NgTemplateOutlet, IconWrapperComponent]
}]
}], ctorParameters: function () { return [{ type: i1.DrawerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { viewItem: [{
type: Input
}], index: [{
type: Input
}], itemTemplate: [{
type: Input
}], mini: [{
type: Input
}], expanded: [{
type: Input
}], disabled: [{
type: Input
}], cssClass: [{
type: Input
}], cssStyle: [{
type: Input
}], disabledClass: [{
type: HostBinding,
args: ['attr.aria-disabled']
}, {
type: HostBinding,
args: ['class.k-disabled']
}], selectedClass: [{
type: HostBinding,
args: ['attr.aria-current']
}, {
type: HostBinding,
args: ['class.k-selected']
}], label: [{
type: HostBinding,
args: ['attr.aria-label']
}] } });