@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.
106 lines (105 loc) • 3.62 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 { Injectable } from '@angular/core';
import { FocusRoot } from './focus-root';
import * as i0 from "@angular/core";
import * as i1 from "./focus-root";
/**
* Represents group of components that can be activated or focused.
*
* A focus group may contain focusable elements, such as rows, cells and input elements.
*
* Elements are added to the focus group by tagging them with the `kendoTreeListFocusable` directive.
* See [Controlling the Focus]({% slug keyboard_navigation_treelist %}#toc-controlling-the-focus).
*
* @hidden
*/
export class FocusGroup {
root;
active = true;
children = [];
get focusableChildren() {
return this.children.filter(el => el.canFocus());
}
get isActive() {
return this.active;
}
/**
* @hidden
*/
constructor(root) {
this.root = root;
this.root.registerGroup(this);
}
ngOnDestroy() {
this.root.unregisterGroup(this);
this.active = true;
}
/**
* @hidden
*/
registerElement(element) {
this.unregisterElement(element);
this.children.push(element);
}
/**
* @hidden
*/
unregisterElement(element) {
this.children = this.children.filter(f => f !== element);
}
/**
* Returns a boolean value which indicates if the group will receive focus when the cell is focused.
* Evaluates to `true` when the focus group has a single focusable element such as a button or a checkbox.
*
* @returns A boolean value which indicates if the group will receive focus when the cell is focused.
*/
isNavigable() {
const focusable = this.focusableChildren;
return focusable.length === 1 && focusable[0].isNavigable();
}
/**
* Returns a boolean value which indicates if the focus group contains focusable component.
*
* @returns A boolean value which indicates if the focus group contains focusable component.
*/
canFocus() {
return this.focusableChildren.length > 0;
}
/**
* Focuses the first focusable component, if any.
*/
focus() {
if (this.canFocus() && !this.hasFocus()) {
this.focusableChildren[0].focus();
}
}
/**
* @hidden
*/
activate() {
this.toggleState(true);
}
/**
* @hidden
*/
deactivate() {
this.toggleState(false);
}
hasFocus() {
return this.children.reduce((focused, element) => focused || element.hasFocus(), false);
}
toggleState(active) {
if (this.active !== active) {
this.active = active;
this.children.forEach(f => f.toggle(active));
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusGroup, deps: [{ token: i1.FocusRoot }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusGroup });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusGroup, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i1.FocusRoot }]; } });