@progress/kendo-angular-listbox 11.4.0-develop.1 → 11.4.0-develop.11

package/data-binding.directive.d.ts

@@ -17,6 +17,7 @@ export declare class DataBindingDirective implements OnChanges, OnDestroy {
     connectedWith: ListBoxComponent;
     private actionClickSub;
     private selectedBoxSub;
+    private connectedWithSub;
     private selectedBox;
     constructor(listbox: ListBoxComponent);
     /**

package/esm2020/constants.mjs

@@ -25,13 +25,13 @@ export const allTools = [
     },
     {
         name: 'transferTo',
-        label: 'Transfer From',
+        label: 'Transfer To',
         icon: 'caret-alt-left',
         svgIcon: caretAltLeftIcon
     },
     {
         name: 'transferFrom',
-        label: 'Transfer To',
+        label: 'Transfer From',
         icon: 'caret-alt-right',
         svgIcon: caretAltRightIcon
     },

package/esm2020/data-binding.directive.mjs

@@ -17,7 +17,11 @@ export class DataBindingDirective {
         this.listbox = listbox;
         this.actionClickSub = new Subscription();
         this.selectedBoxSub = new Subscription();
+        this.connectedWithSub = new Subscription();
         this.selectedBox = this.listbox;
+        this.connectedWithSub.add(this.listbox.getChildListbox.subscribe(() => {
+            this.listbox.childListbox = this.connectedWith;
+        }));
         this.actionClickSub.add(this.listbox.actionClick.subscribe((actionName) => {
             switch (actionName) {
                 case 'moveUp': {
@@ -99,7 +103,7 @@ export class DataBindingDirective {
         const newIndex = dir === 'up' ? index - 1 : index + 1;
         // ES6 Destructuring swap
         [this.selectedBox.data[newIndex], this.selectedBox.data[index]] = [this.selectedBox.data[index], this.selectedBox.data[newIndex]];
-        this.selectedBox.selectionService.select(newIndex);
+        this.selectedBox.selectionService.select(newIndex, dir);
     }
     removeItem() {
         const index = this.selectedBox.selectedIndex;

package/esm2020/keyboard-navigation.service.mjs

@@ -0,0 +1,262 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { EventEmitter, Injectable, NgZone, Renderer2 } from "@angular/core";
+import { Keys } from "@progress/kendo-angular-common";
+import { take } from "rxjs/operators";
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class KeyboardNavigationService {
+    constructor(renderer, zone) {
+        this.renderer = renderer;
+        this.zone = zone;
+        this.selectedListboxItemIndex = 0;
+        this.focusedListboxItemIndex = 0;
+        this.focusedToolIndex = 0;
+        this.onDeleteEvent = new EventEmitter();
+        this.onSelectionChange = new EventEmitter();
+        this.onMoveSelectedItem = new EventEmitter();
+        this.onTransferAllEvent = new EventEmitter();
+        this.onShiftSelectedItem = new EventEmitter();
+    }
+    onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox) {
+        const target = event.target;
+        const keyCode = event.keyCode;
+        const ctrlOrMetaKey = event.ctrlKey || event.metaKey;
+        const parentListboxToolbar = parentListbox?.selectedTools;
+        const tool = toolsRef.find(elem => elem.element === target);
+        const activeToolbar = toolbar.length > 0 ? toolbar : parentListboxToolbar;
+        if (toolsRef.length > 0 || parentListbox?.tools.toArray().length > 0) {
+            const focusNextTool = (keyCode === Keys.ArrowDown || keyCode === Keys.ArrowRight);
+            const focusPrevTool = (keyCode === Keys.ArrowUp || keyCode === Keys.ArrowLeft);
+            if ((focusNextTool || focusPrevTool) && tool) {
+                const dir = focusPrevTool ? 'up' : 'down';
+                this.handleToolbarArrows(toolsRef, dir);
+            }
+            else if (keyCode === Keys.F10) {
+                event.preventDefault();
+                this.onF10Key(toolsRef);
+            }
+            else if (keyCode === Keys.Delete && activeToolbar.some(tool => tool.name === 'remove')) {
+                this.onDeleteEvent.emit(this.selectedListboxItemIndex);
+            }
+        }
+        const isTargetListboxItem = this.listboxItems.find(elem => elem === target);
+        if (isTargetListboxItem) {
+            let isTransferToolVisible;
+            if (activeToolbar) {
+                isTransferToolVisible = activeToolbar.some(tool => tool.name.startsWith('transfer'));
+            }
+            if ((keyCode === Keys.ArrowRight || keyCode === Keys.ArrowLeft) && ctrlOrMetaKey && isTransferToolVisible) {
+                this.onArrowLeftOrRight(keyCode, parentListbox, childListbox, event);
+            }
+            else if ((keyCode === Keys.ArrowUp || keyCode === Keys.ArrowDown)) {
+                this.onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar);
+            }
+            else if ((event.metaKey && keyCode === Keys.Enter) || (event.ctrlKey && keyCode === Keys.Space)) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                this.onSelectChange();
+            }
+            else if (keyCode === Keys.Space) {
+                if (this.selectedListboxItemIndex !== this.focusedListboxItemIndex) {
+                    const items = this.listboxItems;
+                    this.changeTabindex(items[this.selectedListboxItemIndex], items[this.focusedListboxItemIndex]);
+                    this.selectedListboxItemIndex = this.focusedListboxItemIndex;
+                    this.onSelectionChange.emit(this.selectedListboxItemIndex);
+                }
+            }
+        }
+    }
+    changeTabindex(previousItem, currentItem) {
+        if (previousItem) {
+            this.renderer.setAttribute(previousItem, 'tabindex', '-1');
+            previousItem.blur();
+        }
+        ;
+        if (currentItem) {
+            this.renderer.setAttribute(currentItem, 'tabindex', '0');
+            currentItem.focus();
+        }
+    }
+    onFocusIn() {
+        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+    }
+    handleToolbarArrows(toolsRef, dir) {
+        const topReached = dir === 'up' && this.focusedToolIndex <= 0;
+        const bottomReached = dir === 'down' && this.focusedToolIndex >= toolsRef.length - 1;
+        if (topReached || bottomReached) {
+            return;
+        }
+        const offset = dir === 'up' ? -1 : 1;
+        this.focusedToolIndex += offset;
+        const prevItem = toolsRef[this.focusedToolIndex + (offset * -1)].element;
+        const currentItem = toolsRef[this.focusedToolIndex].element;
+        this.changeTabindex(prevItem, currentItem);
+    }
+    onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar) {
+        event.preventDefault();
+        const dir = keyCode === Keys.ArrowUp ? 'moveUp' : 'moveDown';
+        if (ctrlOrMetaKey) {
+            let isMoveToolVisible;
+            if (activeToolbar) {
+                isMoveToolVisible = activeToolbar.some(tool => tool.name.startsWith('move'));
+            }
+            if (event.shiftKey && isMoveToolVisible) {
+                this.onMoveSelectedItem.emit(dir);
+                return;
+            }
+            this.changeFocusedItem(dir);
+            return;
+        }
+        dir === 'moveUp' ? this.onArrowUp() : this.onArrowDown();
+        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+        this.focusedListboxItemIndex = this.selectedListboxItemIndex;
+    }
+    onArrowLeftOrRight(keyCode, parentListbox, childListbox, event) {
+        event.preventDefault();
+        if (event.shiftKey) {
+            this.transferAllItems(keyCode, childListbox, parentListbox);
+            return;
+        }
+        if (this.selectedListboxItemIndex >= 0) {
+            this.transferItem(keyCode, childListbox, parentListbox);
+        }
+    }
+    onSelectChange() {
+        const canDeslect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && this.selectedListboxItemIndex === this.focusedListboxItemIndex;
+        if (canDeslect) {
+            this.selectedListboxItemIndex = null;
+        }
+        else {
+            const items = this.listboxItems;
+            this.changeTabindex(items[this.selectedListboxItemIndex], items[this.focusedListboxItemIndex]);
+            this.selectedListboxItemIndex = this.focusedListboxItemIndex;
+        }
+        this.onSelectionChange.emit(this.selectedListboxItemIndex);
+    }
+    onF10Key(tools) {
+        if (this.focusedToolIndex && this.focusedToolIndex > -1) {
+            if (this.focusedToolIndex >= tools.length) {
+                tools[tools.length - 1].element.focus();
+            }
+            else {
+                tools[this.focusedToolIndex].element.focus();
+            }
+        }
+        else {
+            tools[0].element.focus();
+        }
+    }
+    transferAllItems(keyCode, childListbox, parentListbox) {
+        const isArrowRight = keyCode === Keys.ArrowRight;
+        const actionToPerform = isArrowRight ? 'transferAllTo' : 'transferAllFrom';
+        this.onTransferAllEvent.emit(actionToPerform);
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            const childListboxNav = childListbox?.keyboardNavigationService || parentListbox?.childListbox.keyboardNavigationService;
+            let currentItem;
+            if (isArrowRight) {
+                if (childListbox) {
+                    const childListboxItemsLength = childListboxNav.listboxItems.length - 1;
+                    currentItem = childListboxNav.listboxItems[childListboxItemsLength];
+                    childListboxNav.focusedListboxItemIndex = childListboxItemsLength;
+                    childListboxNav.selectedListboxItemIndex = childListboxItemsLength;
+                    this.focusedListboxItemIndex = 0;
+                    this.selectedListboxItemIndex = 0;
+                }
+            }
+            else {
+                if (parentListbox) {
+                    const parentListboxNav = parentListbox.keyboardNavigationService;
+                    const parentListboxItemsLength = parentListboxNav.listboxItems.length - 1;
+                    currentItem = parentListboxNav.listboxItems[parentListboxItemsLength];
+                    parentListboxNav.focusedListboxItemIndex = parentListboxItemsLength;
+                    parentListboxNav.selectedListboxItemIndex = parentListboxItemsLength;
+                    childListboxNav.focusedListboxItemIndex = 0;
+                    childListboxNav.selectedListboxItemIndex = 0;
+                }
+            }
+            this.changeTabindex(null, currentItem);
+        });
+    }
+    transferItem(keyCode, childListbox, parentListbox) {
+        const isArrowRight = keyCode === Keys.ArrowRight;
+        const actionToPerform = isArrowRight ? 'transferFrom' : 'transferTo';
+        this.onShiftSelectedItem.emit(actionToPerform);
+        const adjustTabindex = (items, firstItem, currentItem) => {
+            items.listboxItems.forEach(item => {
+                if (item.getAttribute('tabindex') === '0') {
+                    this.changeTabindex(item, firstItem);
+                }
+            });
+            this.changeTabindex(null, currentItem);
+        };
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            if (isArrowRight) {
+                if (childListbox) {
+                    const childListboxNav = childListbox.keyboardNavigationService;
+                    const childListboxItemsLength = childListboxNav.listboxItems.length - 1;
+                    const currentItem = childListboxNav.listboxItems[childListboxItemsLength];
+                    const parentListboxFirstItem = this.listboxItems[0];
+                    childListboxNav.focusedListboxItemIndex = childListboxItemsLength;
+                    childListboxNav.selectedListboxItemIndex = childListboxItemsLength;
+                    this.focusedListboxItemIndex = 0;
+                    this.selectedListboxItemIndex = 0;
+                    adjustTabindex(childListboxNav, parentListboxFirstItem, currentItem);
+                }
+            }
+            else {
+                if (parentListbox) {
+                    const childListboxNav = parentListbox.childListbox.keyboardNavigationService;
+                    const parentListboxNav = parentListbox.keyboardNavigationService;
+                    const parentListboxItemsLength = parentListboxNav.listboxItems.length - 1;
+                    const currentItem = parentListboxNav.listboxItems[parentListboxItemsLength];
+                    const childListboxFirstItem = childListboxNav.listboxItems[0];
+                    parentListboxNav.focusedListboxItemIndex = parentListboxItemsLength;
+                    parentListboxNav.selectedListboxItemIndex = parentListboxItemsLength;
+                    childListboxNav.focusedListboxItemIndex = 0;
+                    childListboxNav.selectedListboxItemIndex = 0;
+                    adjustTabindex(parentListboxNav, childListboxFirstItem, currentItem);
+                }
+            }
+        });
+    }
+    changeFocusedItem(dir) {
+        this.listboxItems[this.focusedListboxItemIndex].blur();
+        if (this.focusedListboxItemIndex > 0 && dir === 'moveUp') {
+            this.focusedListboxItemIndex -= 1;
+        }
+        else if (this.focusedListboxItemIndex < this.listboxItems.length - 1 && dir === 'moveDown') {
+            this.focusedListboxItemIndex += 1;
+        }
+        this.listboxItems[this.focusedListboxItemIndex].focus();
+    }
+    onArrowDown() {
+        if (this.selectedListboxItemIndex < this.listboxItems.length - 1) {
+            const offset = this.selectedListboxItemIndex ? this.selectedListboxItemIndex : this.focusedListboxItemIndex;
+            this.selectedListboxItemIndex = offset + 1;
+            const previousItem = this.listboxItems[this.selectedListboxItemIndex - 1];
+            const currentItem = this.listboxItems[this.selectedListboxItemIndex];
+            this.changeTabindex(previousItem, currentItem);
+        }
+    }
+    onArrowUp() {
+        if (this.selectedListboxItemIndex > 0 || this.focusedListboxItemIndex > 0) {
+            const offset = this.selectedListboxItemIndex ? this.selectedListboxItemIndex : this.focusedListboxItemIndex;
+            this.selectedListboxItemIndex = offset - 1;
+            const previousItem = this.listboxItems[this.selectedListboxItemIndex + 1];
+            const currentItem = this.listboxItems[this.selectedListboxItemIndex];
+            this.changeTabindex(previousItem, currentItem);
+        }
+    }
+}
+KeyboardNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: KeyboardNavigationService, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+KeyboardNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: KeyboardNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: KeyboardNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }]; } });