@progress/kendo-angular-filter 2.2.3-dev.202210120943 → 2.3.0

package/esm2015/navigation.service.js

@@ -0,0 +1,159 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 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 { Keys } from '@progress/kendo-angular-common';
+import { selectors } from './util';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class NavigationService {
+    constructor(cdr, renderer) {
+        this.cdr = cdr;
+        this.renderer = renderer;
+        this.hierarchicalFilterItems = [];
+        this.flattenFilterItems = [];
+        this.currentToolbarItemIndex = 0;
+        this.currentToolbarItemChildrenIndex = 0;
+        this.isInnerNavigationActivated = false;
+        this.isFilterExpressionComponentFocused = false;
+    }
+    processKeyDown(key, event) {
+        switch (key) {
+            case Keys.ArrowUp:
+                event.preventDefault();
+                if (!this.isInnerNavigationActivated) {
+                    this.currentToolbarItemIndex > 0 ? this.currentToolbarItemIndex-- : this.currentToolbarItemIndex;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].toolbarElement;
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            case Keys.ArrowDown:
+                event.preventDefault();
+                if (!this.isInnerNavigationActivated) {
+                    this.currentToolbarItemIndex < this.flattenFilterItems.length - 1 ? this.currentToolbarItemIndex++ : this.currentToolbarItemIndex;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].toolbarElement;
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            case Keys.Enter:
+                const isEventTargetFilterToolbar = event.target.closest(selectors.kendoToolbar);
+                if (!this.isInnerNavigationActivated && isEventTargetFilterToolbar) {
+                    event.preventDefault();
+                    this.isInnerNavigationActivated = true;
+                    this.currentToolbarItemChildrenIndex = 0;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    this.focusCurrentElement(elementToFocus);
+                }
+                const isEventTargetKendoFilterToolbarItem = event.target.closest(selectors.kendoFilterToolbarItem);
+                const isEventTargetButton = event.target.closest(selectors.kendoButton);
+                if (this.isInnerNavigationActivated &&
+                    !this.isFilterExpressionComponentFocused &&
+                    isEventTargetKendoFilterToolbarItem &&
+                    !isEventTargetButton) {
+                    event.preventDefault();
+                    this.isFilterExpressionComponentFocused = true;
+                    const focusableElement = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    const elementToFocus = focusableElement.querySelector(selectors.KendoDropDownListComponent) ||
+                        focusableElement.querySelector(selectors.kendoInputInner) ||
+                        focusableElement.querySelector(selectors.inputElement) ||
+                        focusableElement.querySelector(selectors.textAreaElement);
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            case Keys.Escape:
+                if (this.isInnerNavigationActivated && !this.isFilterExpressionComponentFocused) {
+                    event.preventDefault();
+                    this.isInnerNavigationActivated = false;
+                    this.currentToolbarItemChildrenIndex = 0;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].toolbarElement;
+                    this.focusCurrentElement(elementToFocus);
+                }
+                if (this.isFilterExpressionComponentFocused) {
+                    event.preventDefault();
+                    this.isFilterExpressionComponentFocused = false;
+                    this.isInnerNavigationActivated = true;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            case Keys.ArrowRight:
+                if (this.isInnerNavigationActivated && !this.isFilterExpressionComponentFocused) {
+                    event.preventDefault();
+                    this.currentToolbarItemChildrenIndex < this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren.length - 1 ? this.currentToolbarItemChildrenIndex++ : this.currentToolbarItemChildrenIndex;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            case Keys.ArrowLeft:
+                if (this.isInnerNavigationActivated && !this.isFilterExpressionComponentFocused) {
+                    event.preventDefault();
+                    this.currentToolbarItemChildrenIndex > 0 ? this.currentToolbarItemChildrenIndex-- : this.currentToolbarItemChildrenIndex;
+                    const elementToFocus = this.flattenFilterItems[this.currentToolbarItemIndex].focusableChildren[this.currentToolbarItemChildrenIndex];
+                    this.focusCurrentElement(elementToFocus);
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    focusCurrentElement(element, isOnMouseDown) {
+        this.renderer.setAttribute(this.currentlyFocusedElement, 'tabindex', '-1');
+        this.currentlyFocusedElement = element;
+        if (element) {
+            this.renderer.setAttribute(this.currentlyFocusedElement, 'tabindex', '0');
+            if (!isOnMouseDown) {
+                this.currentlyFocusedElement.focus();
+            }
+        }
+    }
+    flattenHierarchicalFilterItems(filterItems) {
+        filterItems.forEach((filterRow) => {
+            var _a, _b;
+            let flattenItem = { component: filterRow, isGroup: false, toolbarElement: filterRow.toolbarElement, focusableChildren: [] };
+            this.flattenFilterItems.push(flattenItem);
+            if ((filterRow['operators'] && ((_a = filterRow['filterItems']) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
+                this.setGroupItemChildren(flattenItem, filterRow);
+                this.flattenHierarchicalFilterItems(filterRow['filterItems']);
+            }
+            else if (filterRow['operators'] && ((_b = filterRow['filterItems']) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+                this.setGroupItemChildren(flattenItem, filterRow);
+            }
+            else {
+                flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.filterFieldWrapper));
+                if (filterRow.toolbarElement.querySelector('.k-filter-operator')) {
+                    flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.filterOperatorWrapper));
+                }
+                flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.filterValueEditorWrapper));
+                flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.removeButton));
+            }
+        });
+    }
+    setGroupItemChildren(flattenItem, filterRow) {
+        flattenItem.isGroup = true;
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.andButton));
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.orButton));
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.addFilterButton));
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.addGroupButton));
+        flattenItem.focusableChildren.push(filterRow.toolbarElement.querySelector(selectors.removeButton));
+    }
+    setItemIndexes() {
+        this.flattenFilterItems.forEach((item, index) => {
+            item.component['itemNumber'] = index;
+        });
+        this.cdr.detectChanges();
+    }
+    reset(items) {
+        this.flattenFilterItems = [];
+        this.hierarchicalFilterItems = items;
+        this.flattenHierarchicalFilterItems(items);
+        this.setItemIndexes();
+    }
+}
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; } });

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-filter',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1665567772,
+    publishDate: 1666694566,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/util.js

@@ -2,6 +2,8 @@
 * Copyright © 2021 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 * as i0 from "@angular/core";
 /**
  * @hidden
  */
@@ -138,3 +140,34 @@ export const localizeOperators = operators => localization => Object.keys(operat
  * @hidden
  */
 export const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ */
+export class FilterItem {
+}
+FilterItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItem, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FilterItem.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItem });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterItem, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * @hidden
+ */
+export const selectors = {
+    andButton: `button.k-group-start`,
+    orButton: `button.k-group-end`,
+    addFilterButton: `button[icon="filter-add-expression"]`,
+    addGroupButton: `button[icon="filter-add-group"]`,
+    removeButton: `button[icon="x"]`,
+    filterFieldWrapper: `.k-filter-field`,
+    filterOperatorWrapper: `.k-filter-operator`,
+    filterValueEditorWrapper: `.k-filter-value`,
+    kendoDropDownListComponent: `kendo-dropdownlist`,
+    kendoInput: `.k-input`,
+    kendoInputInner: `.k-input-inner`,
+    inputElement: `input`,
+    textAreaElement: `textarea`,
+    kendoToolbar: `.k-toolbar`,
+    kendoButton: `.k-button`,
+    kendoFilterToolbarItem: `.k-filter-toolbar-item`
+};