@progress/kendo-angular-listbox 21.4.1-develop.1 → 22.0.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/progress-kendo-angular-listbox.mjs +34 -34
- package/localization/messages.d.ts +1 -1
- package/package.json +9 -17
- package/schematics/ngAdd/index.js +4 -4
- package/esm2022/constants.mjs +0 -73
- package/esm2022/data-binding.directive.mjs +0 -294
- package/esm2022/directives.mjs +0 -19
- package/esm2022/index.mjs +0 -12
- package/esm2022/item-selectable.directive.mjs +0 -47
- package/esm2022/item-template.directive.mjs +0 -42
- package/esm2022/keyboard-navigation.service.mjs +0 -389
- package/esm2022/listbox.component.mjs +0 -792
- package/esm2022/listbox.module.mjs +0 -32
- package/esm2022/localization/custom-messages.component.mjs +0 -58
- package/esm2022/localization/localized-messages.directive.mjs +0 -39
- package/esm2022/localization/messages.mjs +0 -66
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/progress-kendo-angular-listbox.mjs +0 -8
- package/esm2022/selection-mode.mjs +0 -5
- package/esm2022/selection.service.mjs +0 -166
- package/esm2022/size.mjs +0 -5
- package/esm2022/toolbar.mjs +0 -5
- package/esm2022/util.mjs +0 -38
package/esm2022/directives.mjs
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { DataBindingDirective } from "./data-binding.directive";
|
|
6
|
-
import { ItemSelectableDirective } from "./item-selectable.directive";
|
|
7
|
-
import { ItemTemplateDirective } from "./item-template.directive";
|
|
8
|
-
import { ListBoxComponent } from "./listbox.component";
|
|
9
|
-
import { CustomMessagesComponent } from "./localization/custom-messages.component";
|
|
10
|
-
/**
|
|
11
|
-
* Utility array that contains all `@progress/kendo-angular-listbox` related components and directives
|
|
12
|
-
*/
|
|
13
|
-
export const KENDO_LISTBOX = [
|
|
14
|
-
ListBoxComponent,
|
|
15
|
-
ItemTemplateDirective,
|
|
16
|
-
ItemSelectableDirective,
|
|
17
|
-
DataBindingDirective,
|
|
18
|
-
CustomMessagesComponent,
|
|
19
|
-
];
|
package/esm2022/index.mjs
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export { ListBoxComponent } from './listbox.component';
|
|
6
|
-
export { ListBoxModule } from './listbox.module';
|
|
7
|
-
export { DataBindingDirective } from './data-binding.directive';
|
|
8
|
-
export { ItemTemplateDirective } from './item-template.directive';
|
|
9
|
-
export { ItemSelectableDirective } from './item-selectable.directive';
|
|
10
|
-
export { CustomMessagesComponent } from './localization/custom-messages.component';
|
|
11
|
-
export { LocalizedMessagesDirective } from "./localization/localized-messages.directive";
|
|
12
|
-
export * from './directives';
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Directive, Input, HostBinding, HostListener } from '@angular/core';
|
|
6
|
-
import { ListBoxSelectionService } from './selection.service';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
import * as i1 from "./selection.service";
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export class ItemSelectableDirective {
|
|
13
|
-
selectionService;
|
|
14
|
-
index;
|
|
15
|
-
constructor(selectionService) {
|
|
16
|
-
this.selectionService = selectionService;
|
|
17
|
-
}
|
|
18
|
-
get selectedClassName() {
|
|
19
|
-
return this.selectionService.isSelected(this.index);
|
|
20
|
-
}
|
|
21
|
-
onClick(event) {
|
|
22
|
-
event.stopPropagation();
|
|
23
|
-
const ctrlKey = event.ctrlKey || event.metaKey;
|
|
24
|
-
const shiftKey = event.shiftKey;
|
|
25
|
-
if (shiftKey) {
|
|
26
|
-
event.preventDefault();
|
|
27
|
-
}
|
|
28
|
-
this.selectionService.select(this.index, ctrlKey, shiftKey);
|
|
29
|
-
}
|
|
30
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: i1.ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
31
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ItemSelectableDirective, isStandalone: true, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "mousedown": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
|
|
32
|
-
}
|
|
33
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemSelectableDirective, decorators: [{
|
|
34
|
-
type: Directive,
|
|
35
|
-
args: [{
|
|
36
|
-
selector: '[kendoListBoxItemSelectable]',
|
|
37
|
-
standalone: true
|
|
38
|
-
}]
|
|
39
|
-
}], ctorParameters: () => [{ type: i1.ListBoxSelectionService }], propDecorators: { index: [{
|
|
40
|
-
type: Input
|
|
41
|
-
}], selectedClassName: [{
|
|
42
|
-
type: HostBinding,
|
|
43
|
-
args: ['class.k-selected']
|
|
44
|
-
}], onClick: [{
|
|
45
|
-
type: HostListener,
|
|
46
|
-
args: ['mousedown', ['$event']]
|
|
47
|
-
}] } });
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Directive, TemplateRef } from '@angular/core';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
/**
|
|
8
|
-
* Allows you to customize the rendering of each item in the Kendo UI ListBox for Angular.
|
|
9
|
-
*
|
|
10
|
-
* Place an `<ng-template>` with the `kendoListBoxItemTemplate` directive inside your `<kendo-listbox>` component.
|
|
11
|
-
* The template context exposes the current data item as `let-dataItem`.
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* ```typescript
|
|
15
|
-
* @Component({
|
|
16
|
-
* selector: 'my-app',
|
|
17
|
-
* template: `
|
|
18
|
-
* <kendo-listbox [data]="listBoxItems">
|
|
19
|
-
* <ng-template kendoListBoxItemTemplate let-dataItem>
|
|
20
|
-
* <span>{{ dataItem }} item</span>
|
|
21
|
-
* </ng-template>
|
|
22
|
-
* </kendo-listbox>
|
|
23
|
-
* `
|
|
24
|
-
* })
|
|
25
|
-
* export class AppComponent { }
|
|
26
|
-
* ```
|
|
27
|
-
*/
|
|
28
|
-
export class ItemTemplateDirective {
|
|
29
|
-
templateRef;
|
|
30
|
-
constructor(templateRef) {
|
|
31
|
-
this.templateRef = templateRef;
|
|
32
|
-
}
|
|
33
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
34
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoListBoxItemTemplate]", ngImport: i0 });
|
|
35
|
-
}
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemTemplateDirective, decorators: [{
|
|
37
|
-
type: Directive,
|
|
38
|
-
args: [{
|
|
39
|
-
selector: '[kendoListBoxItemTemplate]',
|
|
40
|
-
standalone: true
|
|
41
|
-
}]
|
|
42
|
-
}], ctorParameters: () => [{ type: i0.TemplateRef }] });
|
|
@@ -1,389 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
/* eslint-disable @typescript-eslint/no-inferrable-types */
|
|
6
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
7
|
-
import { EventEmitter, Injectable, NgZone, Renderer2 } from "@angular/core";
|
|
8
|
-
import { Keys, normalizeKeys } from "@progress/kendo-angular-common";
|
|
9
|
-
import { take } from "rxjs/operators";
|
|
10
|
-
import * as i0 from "@angular/core";
|
|
11
|
-
/**
|
|
12
|
-
* @hidden
|
|
13
|
-
*/
|
|
14
|
-
export class KeyboardNavigationService {
|
|
15
|
-
renderer;
|
|
16
|
-
zone;
|
|
17
|
-
selectedListboxItemIndex = 0;
|
|
18
|
-
focusedListboxItemIndex = 0;
|
|
19
|
-
focusedToolIndex = 0;
|
|
20
|
-
onDeleteEvent = new EventEmitter();
|
|
21
|
-
onMoveSelectedItem = new EventEmitter();
|
|
22
|
-
onTransferAllEvent = new EventEmitter();
|
|
23
|
-
onShiftSelectedItem = new EventEmitter();
|
|
24
|
-
onSelectionChange = new EventEmitter();
|
|
25
|
-
onSelectAll = new EventEmitter();
|
|
26
|
-
onSelectToEnd = new EventEmitter();
|
|
27
|
-
constructor(renderer, zone) {
|
|
28
|
-
this.renderer = renderer;
|
|
29
|
-
this.zone = zone;
|
|
30
|
-
}
|
|
31
|
-
onKeyDown(event, toolsRef, toolbar, childListbox, parentListbox, listboxItems, currentListbox) {
|
|
32
|
-
const target = event.target;
|
|
33
|
-
const keyCode = normalizeKeys(event);
|
|
34
|
-
const ctrlOrMetaKey = event.ctrlKey || event.metaKey;
|
|
35
|
-
const parentListboxToolbar = parentListbox?.selectedTools;
|
|
36
|
-
const tool = toolsRef.find(elem => elem.element === target);
|
|
37
|
-
const activeToolbar = toolbar.length > 0 ? toolbar : parentListboxToolbar;
|
|
38
|
-
if (toolsRef.length > 0 || parentListbox?.tools.toArray().length > 0) {
|
|
39
|
-
const focusNextTool = (keyCode === Keys.ArrowDown || keyCode === Keys.ArrowRight);
|
|
40
|
-
const focusPrevTool = (keyCode === Keys.ArrowUp || keyCode === Keys.ArrowLeft);
|
|
41
|
-
if ((focusNextTool || focusPrevTool) && tool) {
|
|
42
|
-
const dir = focusPrevTool ? 'up' : 'down';
|
|
43
|
-
this.handleToolbarArrows(toolsRef, dir);
|
|
44
|
-
}
|
|
45
|
-
else if (keyCode === Keys.F10) {
|
|
46
|
-
event.preventDefault();
|
|
47
|
-
this.onF10Key(toolsRef);
|
|
48
|
-
}
|
|
49
|
-
else if (keyCode === Keys.Delete && activeToolbar.some(tool => tool.name === 'remove')) {
|
|
50
|
-
this.onDeleteEvent.emit(this.selectedListboxItemIndex);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
if (ctrlOrMetaKey && (event.key === 'a' || event.key === 'A')) {
|
|
54
|
-
event.preventDefault();
|
|
55
|
-
this.onSelectAll.emit();
|
|
56
|
-
return;
|
|
57
|
-
}
|
|
58
|
-
if (ctrlOrMetaKey && event.shiftKey && (keyCode === Keys.Home || keyCode === Keys.End)) {
|
|
59
|
-
event.preventDefault();
|
|
60
|
-
const direction = keyCode === Keys.Home ? 'home' : 'end';
|
|
61
|
-
this.onSelectToEnd.emit({ direction });
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
const isTargetListboxItem = listboxItems.find(elem => elem.nativeElement === target);
|
|
65
|
-
if (isTargetListboxItem) {
|
|
66
|
-
let isTransferToolVisible;
|
|
67
|
-
if (activeToolbar) {
|
|
68
|
-
isTransferToolVisible = activeToolbar.some(tool => tool.name.startsWith('transfer'));
|
|
69
|
-
}
|
|
70
|
-
if ((keyCode === Keys.ArrowRight || keyCode === Keys.ArrowLeft) && ctrlOrMetaKey && isTransferToolVisible) {
|
|
71
|
-
this.onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems, currentListbox);
|
|
72
|
-
}
|
|
73
|
-
else if ((keyCode === Keys.ArrowUp || keyCode === Keys.ArrowDown)) {
|
|
74
|
-
this.onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems);
|
|
75
|
-
}
|
|
76
|
-
else if ((event.metaKey && keyCode === Keys.Enter) || (event.ctrlKey && keyCode === Keys.Space)) {
|
|
77
|
-
this.onSelectChange(event, listboxItems);
|
|
78
|
-
}
|
|
79
|
-
else if (keyCode === Keys.Space) {
|
|
80
|
-
this.onSpaceKey(event, listboxItems);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
changeTabindex(previousItem, currentItem, shouldBlur = true) {
|
|
85
|
-
if (previousItem) {
|
|
86
|
-
this.renderer.setAttribute(previousItem, 'tabindex', '-1');
|
|
87
|
-
if (shouldBlur) {
|
|
88
|
-
previousItem.blur();
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
if (currentItem) {
|
|
92
|
-
this.renderer.setAttribute(currentItem, 'tabindex', '0');
|
|
93
|
-
currentItem.focus();
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
handleToolbarArrows(toolsRef, dir) {
|
|
97
|
-
const topReached = dir === 'up' && this.focusedToolIndex <= 0;
|
|
98
|
-
const bottomReached = dir === 'down' && this.focusedToolIndex >= toolsRef.length - 1;
|
|
99
|
-
if (topReached || bottomReached) {
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
const offset = dir === 'up' ? -1 : 1;
|
|
103
|
-
this.focusedToolIndex += offset;
|
|
104
|
-
const prevItem = toolsRef[this.focusedToolIndex + (offset * -1)]?.element;
|
|
105
|
-
const currentItem = toolsRef[this.focusedToolIndex]?.element;
|
|
106
|
-
this.changeTabindex(prevItem, currentItem);
|
|
107
|
-
}
|
|
108
|
-
onSpaceKey(event, listboxItems) {
|
|
109
|
-
event.stopImmediatePropagation();
|
|
110
|
-
event.preventDefault();
|
|
111
|
-
event.stopPropagation();
|
|
112
|
-
const ctrlKey = event.ctrlKey || event.metaKey;
|
|
113
|
-
const shiftKey = event.shiftKey;
|
|
114
|
-
if (this.selectedListboxItemIndex !== this.focusedListboxItemIndex) {
|
|
115
|
-
const previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
116
|
-
const currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
|
|
117
|
-
if (this.isItemDisabled(currentItem)) {
|
|
118
|
-
return;
|
|
119
|
-
}
|
|
120
|
-
this.changeTabindex(previousItem, currentItem);
|
|
121
|
-
}
|
|
122
|
-
this.onSelectionChange.emit({
|
|
123
|
-
index: this.focusedListboxItemIndex,
|
|
124
|
-
prevIndex: this.selectedListboxItemIndex,
|
|
125
|
-
ctrlKey,
|
|
126
|
-
shiftKey
|
|
127
|
-
});
|
|
128
|
-
this.selectedListboxItemIndex = this.focusedListboxItemIndex;
|
|
129
|
-
}
|
|
130
|
-
onArrowUpOrDown(keyCode, ctrlOrMetaKey, event, activeToolbar, listboxItems) {
|
|
131
|
-
event.preventDefault();
|
|
132
|
-
const dir = keyCode === Keys.ArrowUp ? 'moveUp' : 'moveDown';
|
|
133
|
-
if (ctrlOrMetaKey) {
|
|
134
|
-
let isMoveToolVisible;
|
|
135
|
-
if (activeToolbar) {
|
|
136
|
-
isMoveToolVisible = activeToolbar.some(tool => tool.name.startsWith('move'));
|
|
137
|
-
}
|
|
138
|
-
if (event.shiftKey && isMoveToolVisible) {
|
|
139
|
-
this.onMoveSelectedItem.emit(dir);
|
|
140
|
-
return;
|
|
141
|
-
}
|
|
142
|
-
this.changeFocusedItem(dir, listboxItems);
|
|
143
|
-
return;
|
|
144
|
-
}
|
|
145
|
-
if (event.shiftKey) {
|
|
146
|
-
this.onShiftArrow(dir, listboxItems);
|
|
147
|
-
return;
|
|
148
|
-
}
|
|
149
|
-
dir === 'moveUp' ? this.onArrowUp(listboxItems) : this.onArrowDown(listboxItems);
|
|
150
|
-
if (this.selectedListboxItemIndex !== this.focusedListboxItemIndex) {
|
|
151
|
-
this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex: this.focusedListboxItemIndex });
|
|
152
|
-
this.focusedListboxItemIndex = this.selectedListboxItemIndex;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
onArrowLeftOrRight(keyCode, parentListbox, childListbox, event, listboxItems, currentListbox) {
|
|
156
|
-
event.preventDefault();
|
|
157
|
-
if (event.shiftKey) {
|
|
158
|
-
this.transferAllItems(keyCode, childListbox, parentListbox);
|
|
159
|
-
return;
|
|
160
|
-
}
|
|
161
|
-
const isArrowRight = keyCode === Keys.ArrowRight;
|
|
162
|
-
const sourceListbox = isArrowRight ? currentListbox : childListbox || parentListbox?.childListbox;
|
|
163
|
-
const hasSelection = sourceListbox?.selectedIndices && sourceListbox.selectedIndices.length > 0;
|
|
164
|
-
if (hasSelection) {
|
|
165
|
-
this.transferItem(keyCode, childListbox, parentListbox, listboxItems);
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
onSelectChange(event, listboxItems) {
|
|
169
|
-
event.stopImmediatePropagation();
|
|
170
|
-
event.preventDefault();
|
|
171
|
-
const areIndexesEqual = this.selectedListboxItemIndex === this.focusedListboxItemIndex;
|
|
172
|
-
const canDeselect = (this.selectedListboxItemIndex || this.selectedListboxItemIndex === 0) && areIndexesEqual;
|
|
173
|
-
let previousItem;
|
|
174
|
-
let currentItem;
|
|
175
|
-
let prevIndex;
|
|
176
|
-
if (canDeselect) {
|
|
177
|
-
previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
178
|
-
this.selectedListboxItemIndex = null;
|
|
179
|
-
}
|
|
180
|
-
else {
|
|
181
|
-
previousItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
182
|
-
currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
|
|
183
|
-
if (this.isItemDisabled(currentItem)) {
|
|
184
|
-
return;
|
|
185
|
-
}
|
|
186
|
-
prevIndex = this.selectedListboxItemIndex;
|
|
187
|
-
this.selectedListboxItemIndex = this.focusedListboxItemIndex;
|
|
188
|
-
}
|
|
189
|
-
this.changeTabindex(previousItem, currentItem, !!currentItem);
|
|
190
|
-
const ctrlKey = event.ctrlKey || event.metaKey;
|
|
191
|
-
this.onSelectionChange.emit({ index: this.selectedListboxItemIndex, prevIndex, ctrlKey });
|
|
192
|
-
}
|
|
193
|
-
onF10Key(tools) {
|
|
194
|
-
if (this.focusedToolIndex && this.focusedToolIndex > -1) {
|
|
195
|
-
if (this.focusedToolIndex >= tools.length) {
|
|
196
|
-
tools[tools.length - 1].element.focus();
|
|
197
|
-
}
|
|
198
|
-
else {
|
|
199
|
-
tools[this.focusedToolIndex].element.focus();
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
else {
|
|
203
|
-
tools[0]?.element.focus();
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
transferAllItems(keyCode, childListbox, parentListbox) {
|
|
207
|
-
const isArrowRight = keyCode === Keys.ArrowRight;
|
|
208
|
-
const actionToPerform = isArrowRight ? 'transferAllTo' : 'transferAllFrom';
|
|
209
|
-
this.onTransferAllEvent.emit(actionToPerform);
|
|
210
|
-
const adjustTabindex = (items) => {
|
|
211
|
-
items.forEach(item => {
|
|
212
|
-
if (item.nativeElement.getAttribute('tabindex') === '0') {
|
|
213
|
-
this.changeTabindex(item.nativeElement, null);
|
|
214
|
-
}
|
|
215
|
-
});
|
|
216
|
-
};
|
|
217
|
-
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
218
|
-
const childListboxNav = childListbox?.keyboardNavigationService || parentListbox?.childListbox.keyboardNavigationService;
|
|
219
|
-
let currentItem;
|
|
220
|
-
if (isArrowRight) {
|
|
221
|
-
if (childListbox) {
|
|
222
|
-
const childListBoxItems = childListbox.listboxItems.toArray();
|
|
223
|
-
const childListboxItemsLength = childListBoxItems.length - 1;
|
|
224
|
-
currentItem = childListBoxItems[childListboxItemsLength].nativeElement;
|
|
225
|
-
childListboxNav.focusedListboxItemIndex = childListboxItemsLength;
|
|
226
|
-
childListboxNav.selectedListboxItemIndex = childListboxItemsLength;
|
|
227
|
-
this.focusedListboxItemIndex = 0;
|
|
228
|
-
this.selectedListboxItemIndex = 0;
|
|
229
|
-
adjustTabindex(childListBoxItems);
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
else {
|
|
233
|
-
if (parentListbox) {
|
|
234
|
-
const parentListboxNav = parentListbox.keyboardNavigationService;
|
|
235
|
-
const parentListBoxItems = parentListbox.listboxItems.toArray();
|
|
236
|
-
const parentListboxItemsLength = parentListBoxItems.length - 1;
|
|
237
|
-
currentItem = parentListBoxItems[parentListboxItemsLength].nativeElement;
|
|
238
|
-
parentListboxNav.focusedListboxItemIndex = parentListboxItemsLength;
|
|
239
|
-
parentListboxNav.selectedListboxItemIndex = parentListboxItemsLength;
|
|
240
|
-
childListboxNav.focusedListboxItemIndex = 0;
|
|
241
|
-
childListboxNav.selectedListboxItemIndex = 0;
|
|
242
|
-
adjustTabindex(parentListBoxItems);
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
this.changeTabindex(null, currentItem);
|
|
246
|
-
});
|
|
247
|
-
}
|
|
248
|
-
transferItem(keyCode, childListbox, parentListbox, listboxItems) {
|
|
249
|
-
const isArrowRight = keyCode === Keys.ArrowRight;
|
|
250
|
-
const actionToPerform = isArrowRight ? 'transferTo' : 'transferFrom';
|
|
251
|
-
this.onShiftSelectedItem.emit(actionToPerform);
|
|
252
|
-
const adjustTabindex = (items, firstItem, currentItem) => {
|
|
253
|
-
items.forEach(item => {
|
|
254
|
-
if (item.nativeElement.getAttribute('tabindex') === '0') {
|
|
255
|
-
this.changeTabindex(item.nativeElement, firstItem);
|
|
256
|
-
}
|
|
257
|
-
});
|
|
258
|
-
this.changeTabindex(null, currentItem);
|
|
259
|
-
};
|
|
260
|
-
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
261
|
-
if (isArrowRight) {
|
|
262
|
-
if (childListbox) {
|
|
263
|
-
const childListBoxItems = childListbox.listboxItems.toArray();
|
|
264
|
-
const childListboxNav = childListbox.keyboardNavigationService;
|
|
265
|
-
const childListboxItemsLength = childListbox.listboxItems.length - 1;
|
|
266
|
-
const parentListboxFirstItem = listboxItems[0].nativeElement;
|
|
267
|
-
const currentItem = childListBoxItems[childListboxItemsLength].nativeElement;
|
|
268
|
-
childListboxNav.focusedListboxItemIndex = childListboxItemsLength;
|
|
269
|
-
childListboxNav.selectedListboxItemIndex = childListboxItemsLength;
|
|
270
|
-
this.focusedListboxItemIndex = 0;
|
|
271
|
-
this.selectedListboxItemIndex = 0;
|
|
272
|
-
adjustTabindex(childListBoxItems, parentListboxFirstItem, currentItem);
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
else {
|
|
276
|
-
if (parentListbox) {
|
|
277
|
-
const parentListBoxItems = parentListbox.listboxItems.toArray();
|
|
278
|
-
const childListboxNav = parentListbox.childListbox.keyboardNavigationService;
|
|
279
|
-
const parentListboxNav = parentListbox.keyboardNavigationService;
|
|
280
|
-
const parentListboxItemsLength = parentListbox.listboxItems.length - 1;
|
|
281
|
-
const childListboxFirstItem = listboxItems[0].nativeElement;
|
|
282
|
-
const currentItem = parentListBoxItems[parentListboxItemsLength].nativeElement;
|
|
283
|
-
parentListboxNav.focusedListboxItemIndex = parentListboxItemsLength;
|
|
284
|
-
parentListboxNav.selectedListboxItemIndex = parentListboxItemsLength;
|
|
285
|
-
childListboxNav.focusedListboxItemIndex = 0;
|
|
286
|
-
childListboxNav.selectedListboxItemIndex = 0;
|
|
287
|
-
adjustTabindex(parentListBoxItems, childListboxFirstItem, currentItem);
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
});
|
|
291
|
-
}
|
|
292
|
-
changeFocusedItem(dir, listboxItems) {
|
|
293
|
-
const previousIndex = this.focusedListboxItemIndex;
|
|
294
|
-
const previousItem = listboxItems[previousIndex].nativeElement;
|
|
295
|
-
if (this.focusedListboxItemIndex > 0 && dir === 'moveUp') {
|
|
296
|
-
this.focusedListboxItemIndex -= 1;
|
|
297
|
-
}
|
|
298
|
-
else if (this.focusedListboxItemIndex < listboxItems.length - 1 && dir === 'moveDown') {
|
|
299
|
-
this.focusedListboxItemIndex += 1;
|
|
300
|
-
}
|
|
301
|
-
const currentItem = listboxItems[this.focusedListboxItemIndex].nativeElement;
|
|
302
|
-
this.changeTabindex(previousItem, currentItem);
|
|
303
|
-
}
|
|
304
|
-
onShiftArrow(dir, listboxItems) {
|
|
305
|
-
const previousFocusIndex = this.focusedListboxItemIndex;
|
|
306
|
-
if (dir === 'moveUp' && this.focusedListboxItemIndex > 0) {
|
|
307
|
-
this.focusedListboxItemIndex -= 1;
|
|
308
|
-
}
|
|
309
|
-
else if (dir === 'moveDown' && this.focusedListboxItemIndex < listboxItems.length - 1) {
|
|
310
|
-
this.focusedListboxItemIndex += 1;
|
|
311
|
-
}
|
|
312
|
-
if (previousFocusIndex !== this.focusedListboxItemIndex) {
|
|
313
|
-
const previousItem = listboxItems[previousFocusIndex]?.nativeElement;
|
|
314
|
-
let currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
|
|
315
|
-
if (this.isItemDisabled(currentItem)) {
|
|
316
|
-
const step = dir === 'moveDown' ? 1 : -1;
|
|
317
|
-
const nextEnabledIndex = this.findNextEnabledIndex(this.focusedListboxItemIndex, listboxItems, step);
|
|
318
|
-
if (nextEnabledIndex === -1) {
|
|
319
|
-
this.focusedListboxItemIndex = previousFocusIndex;
|
|
320
|
-
return;
|
|
321
|
-
}
|
|
322
|
-
this.focusedListboxItemIndex = nextEnabledIndex;
|
|
323
|
-
currentItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
|
|
324
|
-
}
|
|
325
|
-
this.changeTabindex(previousItem, currentItem);
|
|
326
|
-
this.onSelectionChange.emit({
|
|
327
|
-
index: this.focusedListboxItemIndex,
|
|
328
|
-
prevIndex: this.selectedListboxItemIndex,
|
|
329
|
-
shiftKey: true
|
|
330
|
-
});
|
|
331
|
-
this.selectedListboxItemIndex = this.focusedListboxItemIndex;
|
|
332
|
-
}
|
|
333
|
-
}
|
|
334
|
-
onArrowDown(listboxItems) {
|
|
335
|
-
if (this.focusedListboxItemIndex < listboxItems.length - 1) {
|
|
336
|
-
this.selectedListboxItemIndex = this.focusedListboxItemIndex + 1;
|
|
337
|
-
const previousItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
|
|
338
|
-
let currentItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
339
|
-
if (this.isItemDisabled(currentItem)) {
|
|
340
|
-
currentItem = this.calculateNextActiveItem(listboxItems, 1);
|
|
341
|
-
if (!currentItem) {
|
|
342
|
-
return;
|
|
343
|
-
}
|
|
344
|
-
}
|
|
345
|
-
this.changeTabindex(previousItem, currentItem);
|
|
346
|
-
}
|
|
347
|
-
}
|
|
348
|
-
onArrowUp(listboxItems) {
|
|
349
|
-
if (this.focusedListboxItemIndex > 0) {
|
|
350
|
-
this.selectedListboxItemIndex = this.focusedListboxItemIndex - 1;
|
|
351
|
-
const previousItem = listboxItems[this.focusedListboxItemIndex]?.nativeElement;
|
|
352
|
-
let currentItem = listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
353
|
-
if (this.isItemDisabled(currentItem)) {
|
|
354
|
-
currentItem = this.calculateNextActiveItem(listboxItems, -1);
|
|
355
|
-
if (!currentItem) {
|
|
356
|
-
return;
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
this.changeTabindex(previousItem, currentItem);
|
|
360
|
-
}
|
|
361
|
-
}
|
|
362
|
-
isItemDisabled(item) {
|
|
363
|
-
return item.getAttribute('aria-disabled') === 'true';
|
|
364
|
-
}
|
|
365
|
-
findNextEnabledIndex(startIndex, listboxItems, step) {
|
|
366
|
-
let index = startIndex;
|
|
367
|
-
while (index >= 0 && index < listboxItems.length) {
|
|
368
|
-
const item = listboxItems[index]?.nativeElement;
|
|
369
|
-
if (!this.isItemDisabled(item)) {
|
|
370
|
-
return index;
|
|
371
|
-
}
|
|
372
|
-
index += step;
|
|
373
|
-
}
|
|
374
|
-
return -1;
|
|
375
|
-
}
|
|
376
|
-
calculateNextActiveItem(listboxItems, step) {
|
|
377
|
-
this.selectedListboxItemIndex = this.findNextEnabledIndex(this.selectedListboxItemIndex, listboxItems, step);
|
|
378
|
-
if (this.selectedListboxItemIndex === -1) {
|
|
379
|
-
this.selectedListboxItemIndex = this.focusedListboxItemIndex;
|
|
380
|
-
return null;
|
|
381
|
-
}
|
|
382
|
-
return listboxItems[this.selectedListboxItemIndex]?.nativeElement;
|
|
383
|
-
}
|
|
384
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KeyboardNavigationService, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
385
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KeyboardNavigationService });
|
|
386
|
-
}
|
|
387
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KeyboardNavigationService, decorators: [{
|
|
388
|
-
type: Injectable
|
|
389
|
-
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.NgZone }] });
|