@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.
175 lines (174 loc) • 6.39 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 { Directive, ElementRef, Input, Optional, Renderer2 } from '@angular/core';
import { DefaultFocusableElement } from './default-focusable-element';
import { FocusGroup } from './focus-group';
import * as i0 from "@angular/core";
import * as i1 from "./focus-group";
/**
* Represents a directive that controls how focusable cell elements receive focus in a [navigable TreeList]({% slug keyboard_navigation_treelist %}).
*
* Use this directive to manage focus behavior for cell elements. Pass the `cellContext` from the cell template as input.
*
* @example
* ```html
* <kendo-treelist-column>
* <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
* <input [kendoTreeListFocusable]="cellContext" />
* </ng-template>
* </kendo-treelist-column>
* ```
*/
export class FocusableDirective {
hostElement;
renderer;
group;
/**
* Provides the cell context from the template.
*/
cellContext;
/**
* @hidden
*/
set enabled(value) {
if (value !== this.enabled) {
this._enabled = value;
if (this.element) {
this.element.toggle(this.active && value);
}
}
}
get enabled() {
return this._enabled;
}
/**
* @hidden
*/
set addCellContext(value) { this.cellContext = value; this.enabled = true; }
/**
* @hidden
*/
set editCellContext(value) { this.cellContext = value; this.enabled = true; }
/**
* @hidden
*/
set removeCellContext(value) { this.cellContext = value; this.enabled = true; }
/**
* @hidden
*/
set saveCellContext(value) { this.cellContext = value; this.enabled = true; }
/**
* @hidden
*/
set cancelCellContext(value) { this.cellContext = value; this.enabled = true; }
active = true;
_enabled = true;
element;
constructor(hostElement, renderer, group) {
this.hostElement = hostElement;
this.renderer = renderer;
this.group = group;
}
ngOnInit() {
if (this.cellContext && this.cellContext.focusGroup) {
this.group = this.cellContext.focusGroup;
}
if (this.group) {
this.group.registerElement(this);
}
}
ngAfterViewInit() {
if (!this.element) {
this.element = new DefaultFocusableElement(this.hostElement, this.renderer);
}
if (this.group) {
const isActive = this.group.isActive;
this.toggle(isActive);
}
}
ngOnDestroy() {
if (this.group) {
this.group.unregisterElement(this);
}
}
/**
* @hidden
*/
toggle(active) {
if (this.element && active !== this.active) {
this.active = active;
this.element.toggle(this.enabled && active);
}
}
/**
* @hidden
*/
canFocus() {
return this.enabled && this.element && this.element.canFocus();
}
/**
* @hidden
*/
isNavigable() {
return this.enabled && this.element && this.element.isNavigable();
}
/**
* @hidden
*/
focus() {
if (this.enabled && this.element) {
this.element.focus();
}
}
/**
* @hidden
*/
hasFocus() {
return this.enabled && this.element && this.element.hasFocus();
}
/**
* @hidden
*/
registerElement(element) {
this.element = element;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.FocusGroup, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FocusableDirective, isStandalone: true, selector: "[kendoTreeListFocusable],\n [kendoTreeListAddCommand],\n [kendoTreeListEditCommand],\n [kendoTreeListRemoveCommand],\n [kendoTreeListSaveCommand],\n [kendoTreeListCancelCommand]\n ", inputs: { cellContext: ["kendoTreeListFocusable", "cellContext"], enabled: "enabled", addCellContext: ["kendoTreeListAddCommand", "addCellContext"], editCellContext: ["kendoTreeListEditCommand", "editCellContext"], removeCellContext: ["kendoTreeListRemoveCommand", "removeCellContext"], saveCellContext: ["kendoTreeListSaveCommand", "saveCellContext"], cancelCellContext: ["kendoTreeListCancelCommand", "cancelCellContext"] }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusableDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoTreeListFocusable]' + `,
[kendoTreeListAddCommand],
[kendoTreeListEditCommand],
[kendoTreeListRemoveCommand],
[kendoTreeListSaveCommand],
[kendoTreeListCancelCommand]
`,
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.FocusGroup, decorators: [{
type: Optional
}] }]; }, propDecorators: { cellContext: [{
type: Input,
args: ['kendoTreeListFocusable']
}], enabled: [{
type: Input
}], addCellContext: [{
type: Input,
args: ['kendoTreeListAddCommand']
}], editCellContext: [{
type: Input,
args: ['kendoTreeListEditCommand']
}], removeCellContext: [{
type: Input,
args: ['kendoTreeListRemoveCommand']
}], saveCellContext: [{
type: Input,
args: ['kendoTreeListSaveCommand']
}], cancelCellContext: [{
type: Input,
args: ['kendoTreeListCancelCommand']
}] } });