@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
149 lines (148 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
*-------------------------------------------------------------------------------------------*/
import { Directive, ElementRef, Inject, Input, Optional, Renderer2, SkipSelf } from '@angular/core';
import { DefaultFocusableElement } from './default-focusable-element';
import { CELL_CONTEXT } from '../rendering/common/cell-context';
import { ContextService } from '../common/provider.service';
import * as i0 from "@angular/core";
import * as i1 from "../common/provider.service";
/**
* A directive that controls the way focusable elements receive
* [focus in a navigable Grid]({% slug keyboard_navigation_grid %}).
*
* @example
* ```html
* <kendo-grid [data]="data" [navigable]="true">
* <kendo-grid-column>
* <ng-template kendoGridCellTemplate let-dataItem>
* <!-- The first focusable element will be focused when pressing Enter on the cell -->
* <input type="text" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
* <button kendoGridFocusable>Update</button>
* </ng-template>
* </kendo-grid-column>
* </kendo-grid>
* ```
*/
export class FocusableDirective {
cellContext;
hostElement;
renderer;
ctx;
active = true;
group;
element;
_enabled = true;
/**
* @hidden
*/
set enabled(value) {
if (value === '') {
value = true;
}
else {
value = Boolean(value);
}
if (value !== this.enabled) {
this._enabled = value;
if (this.element) {
this.element.toggle(this.active && value);
}
}
}
get enabled() {
return this._enabled;
}
constructor(cellContext, hostElement, renderer, ctx) {
this.cellContext = cellContext;
this.hostElement = hostElement;
this.renderer = renderer;
this.ctx = ctx;
if (this.cellContext) {
this.group = this.cellContext.focusGroup;
}
if (this.group) {
this.group.registerElement(this);
}
}
ngAfterViewInit() {
if (!this.element && this.ctx.navigable) {
this.element = new DefaultFocusableElement(this.hostElement, this.renderer);
}
if (this.group && this.element) {
this.toggle(this.group.isActive);
}
}
ngOnDestroy() {
if (this.group) {
this.group.unregisterElement(this);
}
}
/**
* @hidden
*/
toggle(active) {
if (this.element && active !== this.active) {
this.element.toggle(this.enabled && active);
this.active = 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: CELL_CONTEXT, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FocusableDirective, isStandalone: true, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: { enabled: ["kendoGridFocusable", "enabled"] }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusableDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoGridFocusable]' + `,
[kendoGridEditCommand],
[kendoGridRemoveCommand],
[kendoGridSaveCommand],
[kendoGridCancelCommand],
[kendoGridSelectionCheckbox]
`,
standalone: true
}]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [CELL_CONTEXT]
}, {
type: SkipSelf
}] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ContextService }]; }, propDecorators: { enabled: [{
type: Input,
args: ['kendoGridFocusable']
}] } });