@progress/kendo-angular-treelist
Version:
Kendo UI TreeList for Angular - Display hierarchical data in an Angular tree grid view that supports sorting, filtering, paging, and much more.
109 lines (108 loc) • 5.28 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-inferrable-types */
import { Component, Input, HostBinding, Renderer2, ElementRef } from '@angular/core';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import { Subscription } from 'rxjs';
import { Keys, isDocumentAvailable } from '@progress/kendo-angular-common';
import { ContextService } from './../../common/provider.service';
import * as i0 from "@angular/core";
import * as i1 from "./../../common/provider.service";
/**
* @hidden
*/
export class ToolbarComponent {
elem;
renderer;
ctx;
hostRole = 'toolbar';
hostClasses = true;
context = {};
set position(value) {
this.context.position = value;
}
navigable;
get toolbarTemplateRef() {
return this.ctx.treelist.toolbarTemplate ? this.ctx.treelist.toolbarTemplate.templateRef : undefined;
}
subs = new Subscription();
navigationService;
constructor(elem, renderer, ctx) {
this.elem = elem;
this.renderer = renderer;
this.ctx = ctx;
this.navigationService = this.ctx[`${this.elem.nativeElement.getAttribute('position')}ToolbarNavigation`];
}
ngAfterViewInit() {
const element = this.elem.nativeElement;
this.subs.add(this.renderer.listen(element, 'keydown', event => this.onKeyDown(event)));
}
ngOnDestroy() {
this.subs.unsubscribe();
}
onKeyDown(event) {
if (this.navigable && isDocumentAvailable() && this.navigationService.navigableElements.length) {
const keyCode = event.keyCode;
if (keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowRight) {
event.preventDefault();
const dir = keyCode === Keys.ArrowLeft ? -1 : 1;
this.changeFocusedItem(dir);
}
}
}
changeFocusedItem(dir) {
this.navigationService.currentActiveIndex += dir;
const bottomRange = this.navigationService.currentActiveIndex < 0;
const topRange = this.navigationService.currentActiveIndex >= this.navigationService.navigableElements.length;
if (bottomRange || topRange) {
this.navigationService.currentActiveIndex = bottomRange ? this.navigationService.navigableElements.length - 1 : 0;
}
this.navigationService.updateFocus();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolbarComponent, isStandalone: true, selector: "kendo-treelist-toolbar", inputs: { position: "position", navigable: "navigable" }, host: { properties: { "attr.role": "this.hostRole", "class.k-grid-toolbar": "this.hostClasses", "class.k-toolbar": "this.hostClasses", "class.k-toolbar-solid": "this.hostClasses", "class.k-toolbar-md": "this.hostClasses" } }, ngImport: i0, template: `
<ng-template
*ngIf="toolbarTemplateRef"
[ngTemplateOutlet]="toolbarTemplateRef"
[ngTemplateOutletContext]="context"
>
</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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-treelist-toolbar',
template: `
<ng-template
*ngIf="toolbarTemplateRef"
[ngTemplateOutlet]="toolbarTemplateRef"
[ngTemplateOutletContext]="context"
>
</ng-template>
`,
standalone: true,
imports: [NgIf, NgTemplateOutlet]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ContextService }]; }, propDecorators: { hostRole: [{
type: HostBinding,
args: ['attr.role']
}], hostClasses: [{
type: HostBinding,
args: ['class.k-grid-toolbar']
}, {
type: HostBinding,
args: ['class.k-toolbar']
}, {
type: HostBinding,
args: ['class.k-toolbar-solid']
}, {
type: HostBinding,
args: ['class.k-toolbar-md']
}], position: [{
type: Input
}], navigable: [{
type: Input
}] } });