@progress/kendo-angular-buttons 19.3.0-develop.8 → 19.3.0
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/buttongroup/buttongroup.component.d.ts +1 -1
- package/chip/chip-list.component.d.ts +4 -1
- package/esm2022/buttongroup/buttongroup.component.mjs +4 -3
- package/esm2022/chip/chip-list.component.mjs +15 -8
- package/esm2022/chip/chip.component.mjs +4 -3
- package/esm2022/dropdownbutton/dropdownbutton.component.mjs +5 -3
- package/esm2022/floatingactionbutton/floatingactionbutton.component.mjs +4 -4
- package/esm2022/listbutton/list-button.mjs +4 -3
- package/esm2022/navigation/navigation.service.mjs +1 -1
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/speechtotextbutton/models/speechtotextbutton-settings.mjs +5 -0
- package/esm2022/splitbutton/splitbutton.component.mjs +2 -2
- package/fesm2022/progress-kendo-angular-buttons.mjs +36 -24
- package/floatingactionbutton/floatingactionbutton.component.d.ts +1 -1
- package/index.d.ts +2 -0
- package/listbutton/list-button.d.ts +1 -1
- package/package.json +9 -9
- package/speechtotextbutton/models/speechtotextbutton-settings.d.ts +61 -0
|
@@ -84,7 +84,7 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
|
|
|
84
84
|
ngAfterViewChecked(): void;
|
|
85
85
|
ngOnDestroy(): void;
|
|
86
86
|
ngAfterContentChecked(): void;
|
|
87
|
-
protected navigateFocus(event:
|
|
87
|
+
protected navigateFocus(event: KeyboardEvent): void;
|
|
88
88
|
protected deactivate(buttons: Array<ButtonComponent>): void;
|
|
89
89
|
protected activate(buttons: Array<ButtonComponent>): void;
|
|
90
90
|
protected defocus(buttons: Array<ButtonComponent>): void;
|
|
@@ -28,6 +28,9 @@ export declare class ChipListComponent implements OnInit, AfterViewInit, AfterCo
|
|
|
28
28
|
private element;
|
|
29
29
|
private ngZone;
|
|
30
30
|
hostClass: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* @hidden
|
|
33
|
+
*/
|
|
31
34
|
orientation: string;
|
|
32
35
|
/**
|
|
33
36
|
* @hidden
|
|
@@ -98,5 +101,5 @@ export declare class ChipListComponent implements OnInit, AfterViewInit, AfterCo
|
|
|
98
101
|
private normalizeActiveIndex;
|
|
99
102
|
private setChipSize;
|
|
100
103
|
static ɵfac: i0.ɵɵFactoryDeclaration<ChipListComponent, never>;
|
|
101
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ChipListComponent, "kendo-chiplist, kendo-chip-list", never, { "selection": { "alias": "selection"; "required": false; }; "size": { "alias": "size"; "required": false; }; "role": { "alias": "role"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; }, { "selectedChange": "selectedChange"; "remove": "remove"; }, ["chips"], ["*"], true, never>;
|
|
104
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ChipListComponent, "kendo-chiplist, kendo-chip-list", never, { "orientation": { "alias": "orientation"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "size": { "alias": "size"; "required": false; }; "role": { "alias": "role"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; }, { "selectedChange": "selectedChange"; "remove": "remove"; }, ["chips"], ["*"], true, never>;
|
|
102
105
|
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { ButtonComponent } from '../button/button.component';
|
|
6
6
|
import { Component, EventEmitter, Output, Input, ContentChildren, QueryList, HostBinding, isDevMode, ElementRef, Renderer2 } from '@angular/core';
|
|
7
7
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
8
|
-
import { isChanged, Keys } from '@progress/kendo-angular-common';
|
|
8
|
+
import { isChanged, Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
|
|
9
9
|
import { KendoButtonService } from '../button/button.service';
|
|
10
10
|
import { fromEvent, Subscription } from 'rxjs';
|
|
11
11
|
import { filter } from 'rxjs/operators';
|
|
@@ -193,7 +193,8 @@ export class ButtonGroupComponent {
|
|
|
193
193
|
const firstIndex = 0;
|
|
194
194
|
const lastIndex = navigationButtons.length - 1;
|
|
195
195
|
const eventArgs = new PreventableEvent();
|
|
196
|
-
|
|
196
|
+
const code = normalizeNumpadKeys(event);
|
|
197
|
+
if (code === Keys.ArrowRight && focusedIndex < lastIndex) {
|
|
197
198
|
this.navigate.emit(eventArgs);
|
|
198
199
|
if (!eventArgs.isDefaultPrevented()) {
|
|
199
200
|
this.defocus(navigationButtons);
|
|
@@ -202,7 +203,7 @@ export class ButtonGroupComponent {
|
|
|
202
203
|
}));
|
|
203
204
|
}
|
|
204
205
|
}
|
|
205
|
-
if (
|
|
206
|
+
if (code === Keys.ArrowLeft && focusedIndex > firstIndex) {
|
|
206
207
|
this.navigate.emit(eventArgs);
|
|
207
208
|
if (!eventArgs.isDefaultPrevented()) {
|
|
208
209
|
this.defocus(navigationButtons);
|
|
@@ -9,7 +9,7 @@ import { ChipComponent } from './chip.component';
|
|
|
9
9
|
import { closest, getStylingClasses } from '../util';
|
|
10
10
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
11
11
|
import { packageMetadata } from '../package-metadata';
|
|
12
|
-
import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
|
|
12
|
+
import { isDocumentAvailable, Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
14
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
15
15
|
/**
|
|
@@ -31,6 +31,9 @@ export class ChipListComponent {
|
|
|
31
31
|
element;
|
|
32
32
|
ngZone;
|
|
33
33
|
hostClass = true;
|
|
34
|
+
/**
|
|
35
|
+
* @hidden
|
|
36
|
+
*/
|
|
34
37
|
orientation = 'horizontal';
|
|
35
38
|
/**
|
|
36
39
|
* @hidden
|
|
@@ -70,7 +73,7 @@ export class ChipListComponent {
|
|
|
70
73
|
return this.selection === 'single';
|
|
71
74
|
}
|
|
72
75
|
get multiple() {
|
|
73
|
-
return this.selection === 'multiple';
|
|
76
|
+
return this.selection === 'multiple' ? true : undefined;
|
|
74
77
|
}
|
|
75
78
|
/**
|
|
76
79
|
* @hidden
|
|
@@ -188,10 +191,12 @@ export class ChipListComponent {
|
|
|
188
191
|
});
|
|
189
192
|
}
|
|
190
193
|
keyDownHandler(e) {
|
|
191
|
-
|
|
192
|
-
const
|
|
193
|
-
const
|
|
194
|
-
const
|
|
194
|
+
// on some keyboards, arrow keys, page up/down, home/end, Enter are mapped to numpad keys
|
|
195
|
+
const code = normalizeNumpadKeys(e);
|
|
196
|
+
const isEnterOrSpace = code === Keys.Enter || code === Keys.Space;
|
|
197
|
+
const isDeleteOrBackspace = code === Keys.Delete || code === Keys.Backspace;
|
|
198
|
+
const isLeftArrow = code === Keys.ArrowLeft;
|
|
199
|
+
const isRightArrow = code === Keys.ArrowRight;
|
|
195
200
|
if (isEnterOrSpace) {
|
|
196
201
|
const target = e.target;
|
|
197
202
|
const clickedChip = closest(target, '.k-chip');
|
|
@@ -246,7 +251,7 @@ export class ChipListComponent {
|
|
|
246
251
|
this.chips.forEach((chip, idx) => {
|
|
247
252
|
const chipEl = chip.element.nativeElement;
|
|
248
253
|
this.renderer.removeAttribute(chipEl, 'aria-pressed');
|
|
249
|
-
this.renderer.setAttribute(chipEl, 'aria-selected', `${chip.selected}`);
|
|
254
|
+
this.selection !== 'none' && (this.renderer.setAttribute(chipEl, 'aria-selected', `${chip.selected}`));
|
|
250
255
|
this.role === 'listbox' && this.renderer.setAttribute(chipEl, 'role', 'option');
|
|
251
256
|
if (!this.navigable) {
|
|
252
257
|
return;
|
|
@@ -275,7 +280,7 @@ export class ChipListComponent {
|
|
|
275
280
|
!hasSize && (chip.sizeIsSet = false);
|
|
276
281
|
}
|
|
277
282
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
278
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
|
|
283
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { orientation: "orientation", selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
|
|
279
284
|
LocalizationService,
|
|
280
285
|
{
|
|
281
286
|
provide: L10N_PREFIX,
|
|
@@ -307,6 +312,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
307
312
|
}], orientation: [{
|
|
308
313
|
type: HostBinding,
|
|
309
314
|
args: ['attr.aria-orientation']
|
|
315
|
+
}, {
|
|
316
|
+
type: Input
|
|
310
317
|
}], direction: [{
|
|
311
318
|
type: HostBinding,
|
|
312
319
|
args: ['attr.dir']
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Component, HostBinding, Input, Output, EventEmitter, ElementRef, Renderer2, NgZone, isDevMode } from '@angular/core';
|
|
6
6
|
import { Subscription } from 'rxjs';
|
|
7
|
-
import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
|
|
7
|
+
import { isDocumentAvailable, Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
|
|
8
8
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
9
9
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
10
|
import { packageMetadata } from '../package-metadata';
|
|
@@ -345,8 +345,9 @@ export class ChipComponent {
|
|
|
345
345
|
}
|
|
346
346
|
}
|
|
347
347
|
keyDownHandler(e) {
|
|
348
|
-
const
|
|
349
|
-
const
|
|
348
|
+
const code = normalizeNumpadKeys(e);
|
|
349
|
+
const isEnterOrSpace = code === Keys.Enter || code === Keys.Space;
|
|
350
|
+
const isDeleteOrBackspace = code === Keys.Delete || code === Keys.Backspace;
|
|
350
351
|
if (this.disabled) {
|
|
351
352
|
return;
|
|
352
353
|
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core';
|
|
6
6
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
7
7
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
8
|
-
import { isDocumentAvailable, Keys, isPresent } from '@progress/kendo-angular-common';
|
|
8
|
+
import { isDocumentAvailable, Keys, isPresent, normalizeNumpadKeys } from '@progress/kendo-angular-common';
|
|
9
9
|
import { ButtonItemTemplateDirective } from '../listbutton/button-item-template.directive';
|
|
10
10
|
import { closest } from '../util';
|
|
11
11
|
import { ListButton } from '../listbutton/list-button';
|
|
@@ -165,10 +165,12 @@ export class DropDownButtonComponent extends ListButton {
|
|
|
165
165
|
*/
|
|
166
166
|
keydown(event) {
|
|
167
167
|
this.keyDownHandler(event, true);
|
|
168
|
-
|
|
168
|
+
const code = normalizeNumpadKeys(event);
|
|
169
|
+
if (code === Keys.Space) {
|
|
169
170
|
this._active = true;
|
|
170
171
|
}
|
|
171
|
-
if (
|
|
172
|
+
if (code === Keys.Enter) {
|
|
173
|
+
this._active = true;
|
|
172
174
|
event.preventDefault();
|
|
173
175
|
}
|
|
174
176
|
}
|
|
@@ -9,7 +9,7 @@ import { take } from 'rxjs/operators';
|
|
|
9
9
|
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
|
|
10
10
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
11
11
|
import { packageMetadata } from '../package-metadata';
|
|
12
|
-
import { guid, isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
12
|
+
import { guid, isDocumentAvailable, normalizeNumpadKeys } from '@progress/kendo-angular-common';
|
|
13
13
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
14
14
|
import { FocusService } from '../focusable/focus.service';
|
|
15
15
|
import { NavigationAction } from '../navigation/navigation-action';
|
|
@@ -387,11 +387,11 @@ export class FloatingActionButtonComponent {
|
|
|
387
387
|
return;
|
|
388
388
|
}
|
|
389
389
|
const focused = this.focusService.focused || 0;
|
|
390
|
-
const
|
|
390
|
+
const code = normalizeNumpadKeys(event);
|
|
391
391
|
const action = this.navigationService.process({
|
|
392
392
|
altKey: event.altKey,
|
|
393
393
|
current: focused,
|
|
394
|
-
|
|
394
|
+
code: code,
|
|
395
395
|
max: this.dialItems ? this.dialItems.length - 1 : 0,
|
|
396
396
|
min: 0,
|
|
397
397
|
flipNavigation: this.align.vertical === 'bottom'
|
|
@@ -577,7 +577,7 @@ export class FloatingActionButtonComponent {
|
|
|
577
577
|
event.preventDefault();
|
|
578
578
|
});
|
|
579
579
|
});
|
|
580
|
-
this.popupRef.popupAnchorViewportLeave.subscribe(() => this.toggleDialWithEvents(false));
|
|
580
|
+
this.subscriptions.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => this.toggleDialWithEvents(false)));
|
|
581
581
|
}
|
|
582
582
|
closePopup() {
|
|
583
583
|
if (this.isOpen) {
|
|
@@ -9,7 +9,7 @@ import { FocusService } from './../focusable/focus.service';
|
|
|
9
9
|
import { KeyEvents } from './../navigation/key-events';
|
|
10
10
|
import { NavigationService } from './../navigation/navigation.service';
|
|
11
11
|
import { NavigationAction } from './../navigation/navigation-action';
|
|
12
|
-
import { isDocumentAvailable, guid, Keys, isChanged, hasObservers } from '@progress/kendo-angular-common';
|
|
12
|
+
import { isDocumentAvailable, guid, Keys, isChanged, hasObservers, normalizeNumpadKeys } from '@progress/kendo-angular-common';
|
|
13
13
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
14
14
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
15
15
|
import { packageMetadata } from '../package-metadata';
|
|
@@ -283,10 +283,11 @@ export class ListButton extends MultiTabStop {
|
|
|
283
283
|
eventData.stopImmediatePropagation();
|
|
284
284
|
}
|
|
285
285
|
const focused = this.focusService.focused || 0;
|
|
286
|
+
const code = normalizeNumpadKeys(eventData);
|
|
286
287
|
const action = this.navigationService.process({
|
|
287
288
|
altKey: eventData.altKey,
|
|
288
289
|
current: focused,
|
|
289
|
-
|
|
290
|
+
code: code,
|
|
290
291
|
keyEvent: keyEvent,
|
|
291
292
|
max: this._data ? this._data.length - 1 : 0,
|
|
292
293
|
min: 0,
|
|
@@ -295,7 +296,7 @@ export class ListButton extends MultiTabStop {
|
|
|
295
296
|
if (action !== NavigationAction.Undefined &&
|
|
296
297
|
action !== NavigationAction.Tab &&
|
|
297
298
|
(action !== NavigationAction.Enter || (action === NavigationAction.Enter && this.openState))) {
|
|
298
|
-
if (!(
|
|
299
|
+
if (!(code === Keys.Space && action === NavigationAction.EnterUp)) {
|
|
299
300
|
eventData.preventDefault();
|
|
300
301
|
}
|
|
301
302
|
}
|
|
@@ -26,7 +26,7 @@ export class NavigationService {
|
|
|
26
26
|
this.useLeftRightArrows = config.useLeftRightArrows;
|
|
27
27
|
}
|
|
28
28
|
process(args) {
|
|
29
|
-
const keyCode = args.
|
|
29
|
+
const keyCode = args.code;
|
|
30
30
|
const keyEvent = args.keyEvent;
|
|
31
31
|
let index;
|
|
32
32
|
let action = NavigationAction.Undefined;
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '19.3.0
|
|
13
|
+
publishDate: 1755030291,
|
|
14
|
+
version: '19.3.0',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
export {};
|
|
@@ -323,7 +323,7 @@ export class SplitButtonComponent extends ListButton {
|
|
|
323
323
|
*/
|
|
324
324
|
keydown(event) {
|
|
325
325
|
this.keyDownHandler(event, true);
|
|
326
|
-
if (event.
|
|
326
|
+
if (event.code === Keys.Space) {
|
|
327
327
|
this._active = true;
|
|
328
328
|
}
|
|
329
329
|
}
|
|
@@ -332,7 +332,7 @@ export class SplitButtonComponent extends ListButton {
|
|
|
332
332
|
*/
|
|
333
333
|
keyup(event) {
|
|
334
334
|
this._active = false;
|
|
335
|
-
if (event.
|
|
335
|
+
if (event.code !== Keys.Space) {
|
|
336
336
|
this.keyUpHandler(event);
|
|
337
337
|
}
|
|
338
338
|
}
|
|
@@ -6,7 +6,7 @@ import * as i0 from '@angular/core';
|
|
|
6
6
|
import { Injectable, isDevMode, EventEmitter, Component, Optional, Input, Output, HostBinding, HostListener, ContentChildren, Directive, InjectionToken, Inject, ElementRef, ViewContainerRef, ViewChild, ContentChild, forwardRef, NgModule } from '@angular/core';
|
|
7
7
|
import { Subject, Subscription, fromEvent, merge, of, Observable, from } from 'rxjs';
|
|
8
8
|
import * as i12 from '@progress/kendo-angular-common';
|
|
9
|
-
import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, Keys, TemplateContextDirective, MultiTabStop, guid, isPresent as isPresent$1, EventsOutsideAngularDirective, replaceMessagePlaceholder, anyChanged, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
|
|
9
|
+
import { isDocumentAvailable, isFirefox, isSafari, isChanged, hasObservers, normalizeNumpadKeys, Keys, TemplateContextDirective, MultiTabStop, guid, isPresent as isPresent$1, EventsOutsideAngularDirective, replaceMessagePlaceholder, anyChanged, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
|
|
10
10
|
export { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
|
|
11
11
|
import { caretAltDownIcon, xCircleIcon, moreVerticalIcon, microphoneOutlineIcon, stopSmIcon } from '@progress/kendo-svg-icons';
|
|
12
12
|
import * as i1 from '@progress/kendo-angular-l10n';
|
|
@@ -45,8 +45,8 @@ const packageMetadata = {
|
|
|
45
45
|
productName: 'Kendo UI for Angular',
|
|
46
46
|
productCode: 'KENDOUIANGULAR',
|
|
47
47
|
productCodes: ['KENDOUIANGULAR'],
|
|
48
|
-
publishDate:
|
|
49
|
-
version: '19.3.0
|
|
48
|
+
publishDate: 1755030291,
|
|
49
|
+
version: '19.3.0',
|
|
50
50
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
51
51
|
};
|
|
52
52
|
|
|
@@ -877,7 +877,8 @@ class ButtonGroupComponent {
|
|
|
877
877
|
const firstIndex = 0;
|
|
878
878
|
const lastIndex = navigationButtons.length - 1;
|
|
879
879
|
const eventArgs = new PreventableEvent();
|
|
880
|
-
|
|
880
|
+
const code = normalizeNumpadKeys(event);
|
|
881
|
+
if (code === Keys.ArrowRight && focusedIndex < lastIndex) {
|
|
881
882
|
this.navigate.emit(eventArgs);
|
|
882
883
|
if (!eventArgs.isDefaultPrevented()) {
|
|
883
884
|
this.defocus(navigationButtons);
|
|
@@ -886,7 +887,7 @@ class ButtonGroupComponent {
|
|
|
886
887
|
}));
|
|
887
888
|
}
|
|
888
889
|
}
|
|
889
|
-
if (
|
|
890
|
+
if (code === Keys.ArrowLeft && focusedIndex > firstIndex) {
|
|
890
891
|
this.navigate.emit(eventArgs);
|
|
891
892
|
if (!eventArgs.isDefaultPrevented()) {
|
|
892
893
|
this.defocus(navigationButtons);
|
|
@@ -1353,8 +1354,9 @@ class ChipComponent {
|
|
|
1353
1354
|
}
|
|
1354
1355
|
}
|
|
1355
1356
|
keyDownHandler(e) {
|
|
1356
|
-
const
|
|
1357
|
-
const
|
|
1357
|
+
const code = normalizeNumpadKeys(e);
|
|
1358
|
+
const isEnterOrSpace = code === Keys.Enter || code === Keys.Space;
|
|
1359
|
+
const isDeleteOrBackspace = code === Keys.Delete || code === Keys.Backspace;
|
|
1358
1360
|
if (this.disabled) {
|
|
1359
1361
|
return;
|
|
1360
1362
|
}
|
|
@@ -1588,6 +1590,9 @@ class ChipListComponent {
|
|
|
1588
1590
|
element;
|
|
1589
1591
|
ngZone;
|
|
1590
1592
|
hostClass = true;
|
|
1593
|
+
/**
|
|
1594
|
+
* @hidden
|
|
1595
|
+
*/
|
|
1591
1596
|
orientation = 'horizontal';
|
|
1592
1597
|
/**
|
|
1593
1598
|
* @hidden
|
|
@@ -1627,7 +1632,7 @@ class ChipListComponent {
|
|
|
1627
1632
|
return this.selection === 'single';
|
|
1628
1633
|
}
|
|
1629
1634
|
get multiple() {
|
|
1630
|
-
return this.selection === 'multiple';
|
|
1635
|
+
return this.selection === 'multiple' ? true : undefined;
|
|
1631
1636
|
}
|
|
1632
1637
|
/**
|
|
1633
1638
|
* @hidden
|
|
@@ -1745,10 +1750,12 @@ class ChipListComponent {
|
|
|
1745
1750
|
});
|
|
1746
1751
|
}
|
|
1747
1752
|
keyDownHandler(e) {
|
|
1748
|
-
|
|
1749
|
-
const
|
|
1750
|
-
const
|
|
1751
|
-
const
|
|
1753
|
+
// on some keyboards, arrow keys, page up/down, home/end, Enter are mapped to numpad keys
|
|
1754
|
+
const code = normalizeNumpadKeys(e);
|
|
1755
|
+
const isEnterOrSpace = code === Keys.Enter || code === Keys.Space;
|
|
1756
|
+
const isDeleteOrBackspace = code === Keys.Delete || code === Keys.Backspace;
|
|
1757
|
+
const isLeftArrow = code === Keys.ArrowLeft;
|
|
1758
|
+
const isRightArrow = code === Keys.ArrowRight;
|
|
1752
1759
|
if (isEnterOrSpace) {
|
|
1753
1760
|
const target = e.target;
|
|
1754
1761
|
const clickedChip = closest(target, '.k-chip');
|
|
@@ -1803,7 +1810,7 @@ class ChipListComponent {
|
|
|
1803
1810
|
this.chips.forEach((chip, idx) => {
|
|
1804
1811
|
const chipEl = chip.element.nativeElement;
|
|
1805
1812
|
this.renderer.removeAttribute(chipEl, 'aria-pressed');
|
|
1806
|
-
this.renderer.setAttribute(chipEl, 'aria-selected', `${chip.selected}`);
|
|
1813
|
+
this.selection !== 'none' && (this.renderer.setAttribute(chipEl, 'aria-selected', `${chip.selected}`));
|
|
1807
1814
|
this.role === 'listbox' && this.renderer.setAttribute(chipEl, 'role', 'option');
|
|
1808
1815
|
if (!this.navigable) {
|
|
1809
1816
|
return;
|
|
@@ -1832,7 +1839,7 @@ class ChipListComponent {
|
|
|
1832
1839
|
!hasSize && (chip.sizeIsSet = false);
|
|
1833
1840
|
}
|
|
1834
1841
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
1835
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
|
|
1842
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { orientation: "orientation", selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
|
|
1836
1843
|
LocalizationService,
|
|
1837
1844
|
{
|
|
1838
1845
|
provide: L10N_PREFIX,
|
|
@@ -1864,6 +1871,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1864
1871
|
}], orientation: [{
|
|
1865
1872
|
type: HostBinding,
|
|
1866
1873
|
args: ['attr.aria-orientation']
|
|
1874
|
+
}, {
|
|
1875
|
+
type: Input
|
|
1867
1876
|
}], direction: [{
|
|
1868
1877
|
type: HostBinding,
|
|
1869
1878
|
args: ['attr.dir']
|
|
@@ -2023,7 +2032,7 @@ class NavigationService {
|
|
|
2023
2032
|
this.useLeftRightArrows = config.useLeftRightArrows;
|
|
2024
2033
|
}
|
|
2025
2034
|
process(args) {
|
|
2026
|
-
const keyCode = args.
|
|
2035
|
+
const keyCode = args.code;
|
|
2027
2036
|
const keyEvent = args.keyEvent;
|
|
2028
2037
|
let index;
|
|
2029
2038
|
let action = NavigationAction.Undefined;
|
|
@@ -2590,10 +2599,11 @@ class ListButton extends MultiTabStop {
|
|
|
2590
2599
|
eventData.stopImmediatePropagation();
|
|
2591
2600
|
}
|
|
2592
2601
|
const focused = this.focusService.focused || 0;
|
|
2602
|
+
const code = normalizeNumpadKeys(eventData);
|
|
2593
2603
|
const action = this.navigationService.process({
|
|
2594
2604
|
altKey: eventData.altKey,
|
|
2595
2605
|
current: focused,
|
|
2596
|
-
|
|
2606
|
+
code: code,
|
|
2597
2607
|
keyEvent: keyEvent,
|
|
2598
2608
|
max: this._data ? this._data.length - 1 : 0,
|
|
2599
2609
|
min: 0,
|
|
@@ -2602,7 +2612,7 @@ class ListButton extends MultiTabStop {
|
|
|
2602
2612
|
if (action !== NavigationAction.Undefined &&
|
|
2603
2613
|
action !== NavigationAction.Tab &&
|
|
2604
2614
|
(action !== NavigationAction.Enter || (action === NavigationAction.Enter && this.openState))) {
|
|
2605
|
-
if (!(
|
|
2615
|
+
if (!(code === Keys.Space && action === NavigationAction.EnterUp)) {
|
|
2606
2616
|
eventData.preventDefault();
|
|
2607
2617
|
}
|
|
2608
2618
|
}
|
|
@@ -2903,10 +2913,12 @@ class DropDownButtonComponent extends ListButton {
|
|
|
2903
2913
|
*/
|
|
2904
2914
|
keydown(event) {
|
|
2905
2915
|
this.keyDownHandler(event, true);
|
|
2906
|
-
|
|
2916
|
+
const code = normalizeNumpadKeys(event);
|
|
2917
|
+
if (code === Keys.Space) {
|
|
2907
2918
|
this._active = true;
|
|
2908
2919
|
}
|
|
2909
|
-
if (
|
|
2920
|
+
if (code === Keys.Enter) {
|
|
2921
|
+
this._active = true;
|
|
2910
2922
|
event.preventDefault();
|
|
2911
2923
|
}
|
|
2912
2924
|
}
|
|
@@ -3930,11 +3942,11 @@ class FloatingActionButtonComponent {
|
|
|
3930
3942
|
return;
|
|
3931
3943
|
}
|
|
3932
3944
|
const focused = this.focusService.focused || 0;
|
|
3933
|
-
const
|
|
3945
|
+
const code = normalizeNumpadKeys(event);
|
|
3934
3946
|
const action = this.navigationService.process({
|
|
3935
3947
|
altKey: event.altKey,
|
|
3936
3948
|
current: focused,
|
|
3937
|
-
|
|
3949
|
+
code: code,
|
|
3938
3950
|
max: this.dialItems ? this.dialItems.length - 1 : 0,
|
|
3939
3951
|
min: 0,
|
|
3940
3952
|
flipNavigation: this.align.vertical === 'bottom'
|
|
@@ -4120,7 +4132,7 @@ class FloatingActionButtonComponent {
|
|
|
4120
4132
|
event.preventDefault();
|
|
4121
4133
|
});
|
|
4122
4134
|
});
|
|
4123
|
-
this.popupRef.popupAnchorViewportLeave.subscribe(() => this.toggleDialWithEvents(false));
|
|
4135
|
+
this.subscriptions.add(this.popupRef.popupAnchorViewportLeave.subscribe(() => this.toggleDialWithEvents(false)));
|
|
4124
4136
|
}
|
|
4125
4137
|
closePopup() {
|
|
4126
4138
|
if (this.isOpen) {
|
|
@@ -4878,7 +4890,7 @@ class SplitButtonComponent extends ListButton {
|
|
|
4878
4890
|
*/
|
|
4879
4891
|
keydown(event) {
|
|
4880
4892
|
this.keyDownHandler(event, true);
|
|
4881
|
-
if (event.
|
|
4893
|
+
if (event.code === Keys.Space) {
|
|
4882
4894
|
this._active = true;
|
|
4883
4895
|
}
|
|
4884
4896
|
}
|
|
@@ -4887,7 +4899,7 @@ class SplitButtonComponent extends ListButton {
|
|
|
4887
4899
|
*/
|
|
4888
4900
|
keyup(event) {
|
|
4889
4901
|
this._active = false;
|
|
4890
|
-
if (event.
|
|
4902
|
+
if (event.code !== Keys.Space) {
|
|
4891
4903
|
this.keyUpHandler(event);
|
|
4892
4904
|
}
|
|
4893
4905
|
}
|
package/index.d.ts
CHANGED
|
@@ -24,6 +24,7 @@ export { ChipModule } from './chip/chip.module';
|
|
|
24
24
|
export { ChipListSelection } from './chip/models/selection';
|
|
25
25
|
export { ChipRemoveEvent } from './chip/chip-remove-event-args.interface';
|
|
26
26
|
export { ChipListRemoveEvent } from './chip/chip-list-remove-event-args.interface';
|
|
27
|
+
export { ChipContentClickEvent } from './chip/chip-content-click-event-args.interface';
|
|
27
28
|
export { ChipAvatarSettings } from './chip/models/avatar-settings.interface';
|
|
28
29
|
export { FloatingActionButtonModule } from './floatingactionbutton/floatingactionbutton.module';
|
|
29
30
|
export { FloatingActionButtonComponent } from './floatingactionbutton/floatingactionbutton.component';
|
|
@@ -39,6 +40,7 @@ export { SpeechToTextButtonComponent } from './speechtotextbutton/speechtotextbu
|
|
|
39
40
|
export { IntegrationMode } from './speechtotextbutton/models/integration-mode';
|
|
40
41
|
export { SpeechToTextResultEvent } from './speechtotextbutton/models/result-event';
|
|
41
42
|
export { SpeechToTextErrorEvent } from './speechtotextbutton/models/error-event';
|
|
43
|
+
export { SpeechToTextButtonSettings } from './speechtotextbutton/models/speechtotextbutton-settings';
|
|
42
44
|
export { SpeechToTextButtonModule } from './speechtotextbutton/speechtotextbutton.module';
|
|
43
45
|
export { ButtonSize, ChipSize, ButtonRounded, ChipRounded, ButtonFillMode, ChipFillMode, ButtonThemeColor, ChipThemeColor, ArrowIconSettings } from './common/models';
|
|
44
46
|
export { FocusableDirective } from './focusable/focusable.directive';
|
|
@@ -143,7 +143,7 @@ export declare class ListButton extends MultiTabStop implements OnDestroy {
|
|
|
143
143
|
/**
|
|
144
144
|
* @hidden
|
|
145
145
|
*/
|
|
146
|
-
keyHandler(event:
|
|
146
|
+
keyHandler(event: KeyboardEvent, keyEvent?: KeyEvents, isHost?: boolean): void;
|
|
147
147
|
protected emitItemClickHandler(index: number): void;
|
|
148
148
|
protected focusWrapper(): void;
|
|
149
149
|
protected wrapperContains(element: any): boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-buttons",
|
|
3
|
-
"version": "19.3.0
|
|
3
|
+
"version": "19.3.0",
|
|
4
4
|
"description": "Buttons Package for Angular",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"package": {
|
|
22
22
|
"productName": "Kendo UI for Angular",
|
|
23
23
|
"productCode": "KENDOUIANGULAR",
|
|
24
|
-
"publishDate":
|
|
24
|
+
"publishDate": 1755030291,
|
|
25
25
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
26
26
|
}
|
|
27
27
|
},
|
|
@@ -30,18 +30,18 @@
|
|
|
30
30
|
"@angular/common": "16 - 20",
|
|
31
31
|
"@angular/core": "16 - 20",
|
|
32
32
|
"@angular/platform-browser": "16 - 20",
|
|
33
|
-
"@progress/kendo-licensing": "^1.
|
|
34
|
-
"@progress/kendo-angular-common": "19.3.0
|
|
35
|
-
"@progress/kendo-angular-l10n": "19.3.0
|
|
36
|
-
"@progress/kendo-angular-popup": "19.3.0
|
|
37
|
-
"@progress/kendo-angular-icons": "19.3.0
|
|
33
|
+
"@progress/kendo-licensing": "^1.7.0",
|
|
34
|
+
"@progress/kendo-angular-common": "19.3.0",
|
|
35
|
+
"@progress/kendo-angular-l10n": "19.3.0",
|
|
36
|
+
"@progress/kendo-angular-popup": "19.3.0",
|
|
37
|
+
"@progress/kendo-angular-icons": "19.3.0",
|
|
38
38
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"tslib": "^2.3.1",
|
|
42
|
-
"@progress/kendo-angular-schematics": "19.3.0
|
|
42
|
+
"@progress/kendo-angular-schematics": "19.3.0",
|
|
43
43
|
"@progress/kendo-common": "^1.0.1",
|
|
44
|
-
"@progress/kendo-webspeech-common": "1.0.
|
|
44
|
+
"@progress/kendo-webspeech-common": "1.0.1"
|
|
45
45
|
},
|
|
46
46
|
"schematics": "./schematics/collection.json",
|
|
47
47
|
"module": "fesm2022/progress-kendo-angular-buttons.mjs",
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from "../../common/models";
|
|
6
|
+
import { IntegrationMode } from "./integration-mode";
|
|
7
|
+
/**
|
|
8
|
+
* Defines the settings interface for the speech-to-text functionality used in components that integrate the SpeechToTextButton component, such as the AIPrompt ([see example](slug:configuration_aiprompt#enabling-speech-to-text)).
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```typescript
|
|
12
|
+
* const speechSettings: SpeechToTextButtonSettings = {
|
|
13
|
+
* continuous: true,
|
|
14
|
+
* lang: 'en-US',
|
|
15
|
+
* interimResults: false,
|
|
16
|
+
* disabled: false
|
|
17
|
+
* };
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
export interface SpeechToTextButtonSettings {
|
|
21
|
+
/**
|
|
22
|
+
* Specifies whether the component returns continuous results for each recognition, or only a single result once recognition stops.
|
|
23
|
+
*/
|
|
24
|
+
continuous?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* When `true`, disables the SpeechToTextButton and prevents user interaction.
|
|
27
|
+
*/
|
|
28
|
+
disabled?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Sets the background and border styles of the SpeechToTextButton.
|
|
31
|
+
*/
|
|
32
|
+
fillMode?: ButtonFillMode;
|
|
33
|
+
/**
|
|
34
|
+
* Specifies which speech recognition engine or integration the component should use. Allows the component to operate in different environments or use alternative implementations.
|
|
35
|
+
*/
|
|
36
|
+
integrationMode?: IntegrationMode;
|
|
37
|
+
/**
|
|
38
|
+
* Specifies whether the component should return interim results or not. Interim results are results that are not yet final.
|
|
39
|
+
*/
|
|
40
|
+
interimResults?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Specifies a `BCP 47` language tag (e.g., `'en-US'`, `'bg-BG'`) used for speech recognition.
|
|
43
|
+
*/
|
|
44
|
+
lang?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Represents the maximum number of alternative transcriptions to return for each result.
|
|
47
|
+
*/
|
|
48
|
+
maxAlternatives?: number;
|
|
49
|
+
/**
|
|
50
|
+
* Sets the border radius of the SpeechToTextButton.
|
|
51
|
+
*/
|
|
52
|
+
rounded?: ButtonRounded;
|
|
53
|
+
/**
|
|
54
|
+
* Sets the padding of the SpeechToTextButton.
|
|
55
|
+
*/
|
|
56
|
+
size?: ButtonSize;
|
|
57
|
+
/**
|
|
58
|
+
* Sets a predefined theme color for the SpeechToTextButton. The theme color applies as a background and border color and adjusts the text color.
|
|
59
|
+
*/
|
|
60
|
+
themeColor?: ButtonThemeColor;
|
|
61
|
+
}
|