@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
162 lines (160 loc) • 8.69 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 { Subscription } from 'rxjs';
import { Component, ElementRef, Input, NgZone, Renderer2, TemplateRef, Output, EventEmitter, ViewChildren, QueryList } from "@angular/core";
import { closestItem, itemIndex } from '../common/dom-queries';
import { DRAWER_ITEM_INDEX } from './models/constants';
import { DrawerService } from './drawer.service';
import { Keys } from '@progress/kendo-angular-common';
import { ACTIVE_NESTED_LINK_SELECTOR, nestedLink } from './util';
import { DrawerListSelectEvent } from './events/drawer-list-select.event';
import { DrawerItemComponent } from './item.component';
import { NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "./drawer.service";
/**
* @hidden
*/
export class DrawerListComponent {
drawerService;
renderer;
ngZone;
element;
itemTemplate;
mini;
expanded;
view = [];
select = new EventEmitter();
items;
subscriptions = new Subscription();
constructor(drawerService, renderer, ngZone, element) {
this.drawerService = drawerService;
this.renderer = renderer;
this.ngZone = ngZone;
this.element = element;
}
ngOnInit() {
this.initDomEvents();
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
identifyItem(_index, viewItem) {
return viewItem.item.id ?? viewItem.index;
}
initDomEvents() {
if (!this.element) {
return;
}
this.ngZone.runOutsideAngular(() => {
const nativeElement = this.element.nativeElement;
this.subscriptions.add(this.renderer.listen(nativeElement, 'click', this.clickHandler.bind(this)));
this.subscriptions.add(this.renderer.listen(nativeElement, 'keydown', (e) => {
const isEnterOrSpace = e.keyCode === Keys.Enter || e.keyCode === Keys.Space;
const isArrowUpOrDown = e.keyCode === Keys.ArrowUp || e.keyCode === Keys.ArrowDown;
if (isEnterOrSpace) {
this.onEnterOrSpaceKeyDown(e);
}
else if (isArrowUpOrDown) {
if (e.target.classList.contains('k-drawer-item')) {
e.preventDefault();
const keyName = e.keyCode === Keys.ArrowUp ? 'arrowUp' : 'arrowDown';
this.drawerService.changeFocusedItem(this.items, keyName, this.renderer);
}
}
}));
});
}
clickHandler(e) {
const viewItemIdx = this.getDrawerItemIndex(e.target);
const viewItem = this.view[viewItemIdx];
const filterItems = this.view.filter(items => !items.item.separator);
const selectedItemIndex = filterItems.findIndex(item => item.index === viewItemIdx);
if (!viewItem) {
return;
}
if (viewItem.item.disabled) {
e.preventDefault();
return;
}
const args = {
index: viewItem.index,
item: viewItem.item,
originalEvent: e
};
this.ngZone.run(() => {
const event = new DrawerListSelectEvent(args);
this.select.emit(event);
if (!event.isDefaultPrevented()) {
this.drawerService.focusIndex = selectedItemIndex;
this.drawerService.onSelect(viewItemIdx);
this.drawerService.init();
this.view = this.drawerService.view;
}
});
}
onEnterOrSpaceKeyDown(e) {
this.clickHandler(e);
const link = nestedLink(this.element.nativeElement, ACTIVE_NESTED_LINK_SELECTOR);
if (link) {
link.click();
}
return false;
}
getDrawerItemIndex(target) {
const item = closestItem(target, DRAWER_ITEM_INDEX, this.element.nativeElement);
if (item) {
return itemIndex(item, DRAWER_ITEM_INDEX);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerListComponent, deps: [{ token: i1.DrawerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrawerListComponent, isStandalone: true, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "items", predicate: DrawerItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "\n <ng-container *ngFor=\"let v of view; trackBy:identifyItem; let idx = index\">\n <li *ngIf=\"!v.item.separator\" kendoDrawerItem\n class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n role=\"menuitem\"\n [viewItem]=\"v\"\n [index]=\"idx\"\n [mini]=\"mini\"\n [expanded]=\"expanded\"\n [itemTemplate]=\"itemTemplate\"\n [attr.data-kendo-drawer-index]=\"v.index\"\n [ngClass]=\"v.item.cssClass\"\n [ngStyle]=\"v.item.cssStyle\"\n [tabindex]=\"v.index === 0 ? '0' : '-1'\">\n </li>\n\n <li *ngIf=\"v.item.separator\"\n role=\"separator\"\n class=\"k-drawer-item k-drawer-separator\"\n [ngClass]=\"v.item.cssClass\"\n [ngStyle]=\"v.item.cssStyle\">\n \n </li>\n </ng-container>\n ", isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerListComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: '[kendoDrawerList]',
template: `
<ng-container *ngFor="let v of view; trackBy:identifyItem; let idx = index">
<li *ngIf="!v.item.separator" kendoDrawerItem
class="k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}"
role="menuitem"
[viewItem]="v"
[index]="idx"
[mini]="mini"
[expanded]="expanded"
[itemTemplate]="itemTemplate"
[attr.${DRAWER_ITEM_INDEX}]="v.index"
[ngClass]="v.item.cssClass"
[ngStyle]="v.item.cssStyle"
[tabindex]="v.index === 0 ? '0' : '-1'">
</li>
<li *ngIf="v.item.separator"
role="separator"
class="k-drawer-item k-drawer-separator"
[ngClass]="v.item.cssClass"
[ngStyle]="v.item.cssStyle">
</li>
</ng-container>
`,
standalone: true,
imports: [NgFor, NgIf, DrawerItemComponent, NgClass, NgStyle]
}]
}], ctorParameters: function () { return [{ type: i1.DrawerService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { itemTemplate: [{
type: Input
}], mini: [{
type: Input
}], expanded: [{
type: Input
}], view: [{
type: Input
}], select: [{
type: Output
}], items: [{
type: ViewChildren,
args: [DrawerItemComponent, { read: ElementRef }]
}] } });