@progress/kendo-angular-treelist 3.1.3-dev.202110041229

package/dist/es2015/navigation/default-focusable-element.d.ts

@@ -0,0 +1,22 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, Renderer2 } from '@angular/core';
+import { FocusableElement } from './focusable-element.interface';
+/**
+ * @hidden
+ */
+export declare class DefaultFocusableElement implements FocusableElement {
+    private renderer;
+    private readonly enabled;
+    private readonly visible;
+    private element;
+    private focusable;
+    constructor(host: ElementRef, renderer: Renderer2);
+    isNavigable(): boolean;
+    toggle(active: boolean): void;
+    focus(): void;
+    canFocus(): boolean;
+    hasFocus(): boolean;
+}

package/dist/es2015/navigation/default-focusable-element.js

@@ -0,0 +1,46 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { closest, findFocusable, isVisible, matchesNodeName } from '../rendering/common/dom-queries';
+const isButton = matchesNodeName('button');
+const isInputTag = matchesNodeName('input');
+const navigableRegex = /(button|checkbox|color|file|radio|reset|submit)/i;
+const isNavigableInput = element => isInputTag(element) && navigableRegex.test(element.type);
+const ɵ0 = isNavigableInput;
+const isNavigable = element => !element.disabled && (isButton(element) || isNavigableInput(element));
+const ɵ1 = isNavigable;
+/**
+ * @hidden
+ */
+export class DefaultFocusableElement {
+    constructor(host, renderer) {
+        this.renderer = renderer;
+        this.element = host.nativeElement;
+        this.focusable = findFocusable(this.element, false) || this.element;
+    }
+    get enabled() {
+        return this.focusable && !this.focusable.disabled;
+    }
+    get visible() {
+        return this.focusable && isVisible(this.focusable);
+    }
+    isNavigable() {
+        return this.canFocus() && isNavigable(this.element);
+    }
+    toggle(active) {
+        this.renderer.setAttribute(this.focusable, 'tabIndex', active ? '0' : '-1');
+    }
+    focus() {
+        if (this.focusable) {
+            this.focusable.focus();
+        }
+    }
+    canFocus() {
+        return this.visible && this.enabled;
+    }
+    hasFocus() {
+        return document.activeElement !== this.element && closest(document.activeElement, e => e === this.element);
+    }
+}
+export { ɵ0, ɵ1 };

package/dist/es2015/navigation/focus-group.d.ts

@@ -0,0 +1,63 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { FocusableElement } from "./focusable-element.interface";
+import { FocusRoot } 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 declare class FocusGroup {
+    private root;
+    private active;
+    private children;
+    private readonly focusableChildren;
+    readonly isActive: boolean;
+    /**
+     * @hidden
+     */
+    constructor(root: FocusRoot);
+    ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    registerElement(element: FocusableElement): void;
+    /**
+     * @hidden
+     */
+    unregisterElement(element: FocusableElement): void;
+    /**
+     * 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(): boolean;
+    /**
+     * 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(): boolean;
+    /**
+     * Focuses the first focusable component, if any.
+     */
+    focus(): void;
+    /**
+     * @hidden
+     */
+    activate(): void;
+    /**
+     * @hidden
+     */
+    deactivate(): void;
+    private hasFocus;
+    private toggleState;
+}

package/dist/es2015/navigation/focus-group.js

@@ -0,0 +1,102 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Injectable } from '@angular/core';
+import { FocusRoot } 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
+ */
+let FocusGroup = class FocusGroup {
+    /**
+     * @hidden
+     */
+    constructor(root) {
+        this.root = root;
+        this.active = true;
+        this.children = [];
+        this.root.registerGroup(this);
+    }
+    get focusableChildren() {
+        return this.children.filter(el => el.canFocus());
+    }
+    get isActive() {
+        return this.active;
+    }
+    ngOnDestroy() {
+        this.root.unregisterGroup(this);
+    }
+    /**
+     * @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));
+        }
+    }
+};
+FocusGroup = tslib_1.__decorate([
+    Injectable(),
+    tslib_1.__metadata("design:paramtypes", [FocusRoot])
+], FocusGroup);
+export { FocusGroup };

package/dist/es2015/navigation/focus-root.d.ts

@@ -0,0 +1,16 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { FocusGroup } from './focus-group';
+/**
+ * @hidden
+ */
+export declare class FocusRoot {
+    alive: boolean;
+    private groups;
+    registerGroup(group: FocusGroup): void;
+    unregisterGroup(group: FocusGroup): void;
+    activate(): any;
+    deactivate(): any;
+}

package/dist/es2015/navigation/focus-root.js

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Injectable } from '@angular/core';
+/**
+ * @hidden
+ */
+let FocusRoot = class FocusRoot {
+    /**
+     * @hidden
+     */
+    constructor() {
+        this.groups = new Set();
+    }
+    registerGroup(group) {
+        if (this.alive) {
+            this.groups.add(group);
+        }
+    }
+    unregisterGroup(group) {
+        if (this.alive) {
+            this.groups.delete(group);
+        }
+    }
+    activate() {
+        if (this.alive) {
+            this.groups.forEach(f => f.activate());
+        }
+    }
+    deactivate() {
+        if (this.alive) {
+            this.groups.forEach(f => f.deactivate());
+        }
+    }
+};
+FocusRoot = tslib_1.__decorate([
+    Injectable()
+], FocusRoot);
+export { FocusRoot };

package/dist/es2015/navigation/focusable-element.interface.d.ts

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export interface FocusableElement {
+    /**
+     * Focuses the element.
+     */
+    focus(): void;
+    /**
+     * Includes or excludes the element from the tab sequence.
+     *
+     * @param active If true, the element should receive a tabIndex of 0 (or greater). If false, the tabIndex should be set to -1.
+     */
+    toggle(active: boolean): void;
+    /**
+     * Returns true if the element can be focused at the moment, false otherwise.
+     *
+     * @returns true if the element can be focused at the moment, false otherwise.
+     */
+    canFocus(): boolean;
+    /**
+     * Focuses the element.
+     */
+    hasFocus(): boolean;
+    /**
+     * Returns true if the element can receive the focus during cursor navigation.
+     *
+     * For example, if a cell contains a single button, the focus should be placed directly on it.
+     * This allows the user to activate the button directly with Enter.
+     *
+     * The focus will remain on the cell if it contains more than one navigable element.
+     */
+    isNavigable(): boolean;
+}

package/dist/es2015/navigation/focusable-element.interface.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/navigation/focusable.directive.d.ts

@@ -0,0 +1,80 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { AfterViewInit, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { FocusGroup } from './focus-group';
+import { FocusableElement } from './focusable-element.interface';
+/**
+ * A directive that controls the way focusable cell elements receive
+ * [focus in a navigable TreeList]({% slug keyboard_navigation_treelist %}).
+ *
+ * The directive takes as input the `cellContext` from the cell template.
+ *
+ * ```ts-no-run
+ * <kendo-treelist-column>
+ *   <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
+ *     <input type="button" class="k-button" [kendoTreeListFocusable]="cellContext" value="Focus me!" />
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
+ */
+export declare class FocusableDirective implements AfterViewInit, FocusableElement, OnInit, OnDestroy {
+    private hostElement;
+    private renderer;
+    private group;
+    /**
+     * The cell context provided by the template.
+     */
+    cellContext: any;
+    /**
+     * @hidden
+     */
+    addCellContext: any;
+    /**
+     * @hidden
+     */
+    editCellContext: any;
+    /**
+     * @hidden
+     */
+    removeCellContext: any;
+    /**
+     * @hidden
+     */
+    saveCellContext: any;
+    /**
+     * @hidden
+     */
+    cancelCellContext: any;
+    private active;
+    private element;
+    constructor(hostElement: ElementRef, renderer: Renderer2, group: FocusGroup);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    toggle(active: boolean): void;
+    /**
+     * @hidden
+     */
+    canFocus(): boolean;
+    /**
+     * @hidden
+     */
+    isNavigable(): boolean;
+    /**
+     * @hidden
+     */
+    focus(): void;
+    /**
+     * @hidden
+     */
+    hasFocus(): boolean;
+    /**
+     * @hidden
+     */
+    registerElement(element: FocusableElement): void;
+}

package/dist/es2015/navigation/focusable.directive.js

@@ -0,0 +1,158 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, ElementRef, Input, Optional, Renderer2 } from '@angular/core';
+import { DefaultFocusableElement } from './default-focusable-element';
+import { FocusGroup } from './focus-group';
+/**
+ * A directive that controls the way focusable cell elements receive
+ * [focus in a navigable TreeList]({% slug keyboard_navigation_treelist %}).
+ *
+ * The directive takes as input the `cellContext` from the cell template.
+ *
+ * ```ts-no-run
+ * <kendo-treelist-column>
+ *   <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
+ *     <input type="button" class="k-button" [kendoTreeListFocusable]="cellContext" value="Focus me!" />
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
+ */
+let FocusableDirective = class FocusableDirective {
+    constructor(hostElement, renderer, group) {
+        this.hostElement = hostElement;
+        this.renderer = renderer;
+        this.group = group;
+        this.active = true;
+    }
+    /**
+     * @hidden
+     */
+    set addCellContext(value) { this.cellContext = value; }
+    /**
+     * @hidden
+     */
+    set editCellContext(value) { this.cellContext = value; }
+    /**
+     * @hidden
+     */
+    set removeCellContext(value) { this.cellContext = value; }
+    /**
+     * @hidden
+     */
+    set saveCellContext(value) { this.cellContext = value; }
+    /**
+     * @hidden
+     */
+    set cancelCellContext(value) { this.cellContext = value; }
+    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(active);
+        }
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return this.element && this.element.canFocus();
+    }
+    /**
+     * @hidden
+     */
+    isNavigable() {
+        return this.element && this.element.isNavigable();
+    }
+    /**
+     * @hidden
+     */
+    focus() {
+        if (this.element) {
+            this.element.focus();
+        }
+    }
+    /**
+     * @hidden
+     */
+    hasFocus() {
+        return this.element && this.element.hasFocus();
+    }
+    /**
+     * @hidden
+     */
+    registerElement(element) {
+        this.element = element;
+    }
+};
+tslib_1.__decorate([
+    Input('kendoTreeListFocusable'),
+    tslib_1.__metadata("design:type", Object)
+], FocusableDirective.prototype, "cellContext", void 0);
+tslib_1.__decorate([
+    Input('kendoTreeListAddCommand'),
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], FocusableDirective.prototype, "addCellContext", null);
+tslib_1.__decorate([
+    Input('kendoTreeListEditCommand'),
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], FocusableDirective.prototype, "editCellContext", null);
+tslib_1.__decorate([
+    Input('kendoTreeListRemoveCommand'),
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], FocusableDirective.prototype, "removeCellContext", null);
+tslib_1.__decorate([
+    Input('kendoTreeListSaveCommand'),
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], FocusableDirective.prototype, "saveCellContext", null);
+tslib_1.__decorate([
+    Input('kendoTreeListCancelCommand'),
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], FocusableDirective.prototype, "cancelCellContext", null);
+FocusableDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoTreeListFocusable]' + `,
+        [kendoTreeListAddCommand],
+        [kendoTreeListEditCommand],
+        [kendoTreeListRemoveCommand],
+        [kendoTreeListSaveCommand],
+        [kendoTreeListCancelCommand]
+    `
+    }),
+    tslib_1.__param(2, Optional()),
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        Renderer2,
+        FocusGroup])
+], FocusableDirective);
+export { FocusableDirective };

package/dist/es2015/navigation/item-map.d.ts

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare class ItemMap {
+    count: number;
+    items: any;
+    readonly first: any;
+    readonly last: any;
+    removeItem(key: any): void;
+    setItem(key: any, item: any): void;
+    getItem(key: any): any;
+    toArray(): any[];
+    forEach(callback: any): any;
+    find(callback: any): any;
+}

package/dist/es2015/navigation/item-map.js

@@ -0,0 +1,61 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export class ItemMap {
+    constructor() {
+        this.count = 0;
+        this.items = {};
+    }
+    get first() {
+        if (this.count > 0) {
+            let result;
+            this.forEach(item => {
+                result = item;
+                return true;
+            });
+            return result;
+        }
+    }
+    get last() {
+        if (this.count > 0) {
+            const keys = Object.keys(this.items);
+            return this.items[keys[keys.length - 1]];
+        }
+    }
+    removeItem(key) {
+        if (this.items[key]) {
+            delete this.items[key];
+            this.count--;
+        }
+    }
+    setItem(key, item) {
+        if (!this.items[key]) {
+            this.count++;
+        }
+        this.items[key] = item;
+    }
+    getItem(key) {
+        return this.items[key];
+    }
+    toArray() {
+        const result = [];
+        this.forEach(item => {
+            result.push(item);
+        });
+        return result;
+    }
+    forEach(callback) {
+        for (let key in this.items) {
+            if (this.items.hasOwnProperty(key) && callback(this.items[key])) {
+                return this.items[key];
+            }
+        }
+    }
+    find(callback) {
+        return this.forEach(callback);
+    }
+}