@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.
@@ -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 }] });