@progress/kendo-angular-common 16.0.1-develop.1 → 16.1.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/esm2020/toggle-button-tab-stop/toggle-button-tab-stop.directive.mjs +47 -4
- package/esm2020/toggle-button-tab-stop/toggle-button-tab-stop.mjs +9 -0
- package/esm2020/toggle-button-tab-stop.mjs +1 -0
- package/fesm2015/progress-kendo-angular-common.mjs +51 -6
- package/fesm2020/progress-kendo-angular-common.mjs +50 -6
- package/package.json +2 -2
- package/toggle-button-tab-stop/toggle-button-tab-stop.d.ts +11 -0
- package/toggle-button-tab-stop/toggle-button-tab-stop.directive.d.ts +8 -1
- package/toggle-button-tab-stop.d.ts +1 -0
|
@@ -2,9 +2,14 @@
|
|
|
2
2
|
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Directive, ElementRef, Input, NgZone, Renderer2, isDevMode } from "@angular/core";
|
|
5
|
+
import { Directive, ElementRef, EventEmitter, Input, NgZone, Renderer2, isDevMode } from "@angular/core";
|
|
6
6
|
import { isDocumentAvailable } from "../utils";
|
|
7
|
+
import { MultiTabStop } from "./toggle-button-tab-stop";
|
|
8
|
+
import { Subscription } from "rxjs";
|
|
9
|
+
import { take } from "rxjs/operators";
|
|
10
|
+
import { Keys } from "../enums";
|
|
7
11
|
import * as i0 from "@angular/core";
|
|
12
|
+
import * as i1 from "./toggle-button-tab-stop";
|
|
8
13
|
const tags = ['kendo-splitbutton', 'kendo-combobox', 'kendo-multicolumncombobox', 'kendo-datepicker', 'kendo-timepicker', 'kendo-datetimepicker'];
|
|
9
14
|
/**
|
|
10
15
|
* Includes the button that toggles the Popup in the tab sequence when applied
|
|
@@ -29,22 +34,29 @@ export class ToggleButtonTabStopDirective {
|
|
|
29
34
|
/**
|
|
30
35
|
* @hidden
|
|
31
36
|
*/
|
|
32
|
-
constructor(hostEl, renderer, zone) {
|
|
37
|
+
constructor(hostEl, renderer, zone, hostComponent) {
|
|
33
38
|
this.hostEl = hostEl;
|
|
34
39
|
this.renderer = renderer;
|
|
35
40
|
this.zone = zone;
|
|
41
|
+
this.hostComponent = hostComponent;
|
|
36
42
|
/**
|
|
37
43
|
* Defines the value of the `aria-label` attribute of the toggle button when active.
|
|
38
44
|
*
|
|
39
45
|
* @default "toggle popup"
|
|
40
46
|
*/
|
|
41
47
|
this.toggleButtonAriaLabel = 'toggle popup';
|
|
48
|
+
this.sub = new Subscription();
|
|
42
49
|
this.onFocus = () => {
|
|
43
50
|
this.renderer.setStyle(this.button, 'box-shadow', 'inset 0 0 0 1px rgba(0, 0, 0, 0.08)');
|
|
44
51
|
};
|
|
45
52
|
this.onBlur = () => {
|
|
46
53
|
this.renderer.removeStyle(this.button, 'box-shadow');
|
|
47
54
|
};
|
|
55
|
+
this.onClick = (e) => {
|
|
56
|
+
const splitButtonToggleEnter = e instanceof KeyboardEvent && e.keyCode === Keys.Enter;
|
|
57
|
+
const isClick = e instanceof PointerEvent;
|
|
58
|
+
(splitButtonToggleEnter || isClick) && (this.focusButton = true);
|
|
59
|
+
};
|
|
48
60
|
if (isDevMode() && tags.indexOf(hostEl.nativeElement.tagName.toLowerCase()) === -1) {
|
|
49
61
|
console.warn(`The kendoToggleButtonTabStop directive can be applied to the following components only: ${tags}`);
|
|
50
62
|
}
|
|
@@ -56,9 +68,29 @@ export class ToggleButtonTabStopDirective {
|
|
|
56
68
|
if (!isDocumentAvailable()) {
|
|
57
69
|
return;
|
|
58
70
|
}
|
|
71
|
+
this.isSplitButton = this.hostEl.nativeElement.classList.contains('k-split-button');
|
|
59
72
|
if (this.active) {
|
|
60
73
|
this.activateButton();
|
|
61
74
|
}
|
|
75
|
+
if (this.hostComponent?.escape instanceof EventEmitter) {
|
|
76
|
+
this.sub = this.hostComponent?.escape.subscribe(() => {
|
|
77
|
+
if (this.isSplitButton) {
|
|
78
|
+
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
79
|
+
this.focusToggleButton();
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
this.focusToggleButton();
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
this.sub.add(this.hostComponent.close.subscribe(() => {
|
|
87
|
+
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
88
|
+
this.zone.runOutsideAngular(() => {
|
|
89
|
+
setTimeout(() => this.focusButton = false);
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
}));
|
|
93
|
+
}
|
|
62
94
|
}
|
|
63
95
|
ngOnChanges(changes) {
|
|
64
96
|
if (!isDocumentAvailable()) {
|
|
@@ -73,6 +105,7 @@ export class ToggleButtonTabStopDirective {
|
|
|
73
105
|
}
|
|
74
106
|
ngOnDestroy() {
|
|
75
107
|
this.removeListeners();
|
|
108
|
+
this.sub.unsubscribe();
|
|
76
109
|
}
|
|
77
110
|
activateButton() {
|
|
78
111
|
const el = this.hostEl.nativeElement;
|
|
@@ -80,11 +113,13 @@ export class ToggleButtonTabStopDirective {
|
|
|
80
113
|
this.button = el.querySelector('.k-input-button, .k-split-button-arrow');
|
|
81
114
|
this.button && this.renderer.setAttribute(this.button, 'tabindex', tabindex);
|
|
82
115
|
this.button && this.renderer.setAttribute(this.button, 'aria-label', this.toggleButtonAriaLabel);
|
|
116
|
+
this.button && this.renderer.removeAttribute(this.button, 'aria-hidden');
|
|
83
117
|
this.removeListeners();
|
|
84
118
|
this.addListeners();
|
|
85
119
|
}
|
|
86
120
|
deactivateButton() {
|
|
87
121
|
this.button && this.renderer.setAttribute(this.button, 'tabindex', '-1');
|
|
122
|
+
this.button && this.renderer.setAttribute(this.button, 'aria-hidden', 'true');
|
|
88
123
|
this.button && this.renderer.removeAttribute(this.button, 'aria-label');
|
|
89
124
|
this.removeListeners();
|
|
90
125
|
}
|
|
@@ -92,23 +127,31 @@ export class ToggleButtonTabStopDirective {
|
|
|
92
127
|
if (this.button) {
|
|
93
128
|
this.zone.runOutsideAngular(() => this.button.addEventListener('focus', this.onFocus));
|
|
94
129
|
this.zone.runOutsideAngular(() => this.button.addEventListener('blur', this.onBlur));
|
|
130
|
+
this.zone.runOutsideAngular(() => this.button.addEventListener('click', this.onClick));
|
|
131
|
+
this.isSplitButton && this.zone.runOutsideAngular(() => this.button.addEventListener('keyup', this.onClick));
|
|
95
132
|
}
|
|
96
133
|
}
|
|
97
134
|
removeListeners() {
|
|
98
135
|
if (this.button) {
|
|
99
136
|
this.zone.runOutsideAngular(() => this.button.removeEventListener('focus', this.onFocus));
|
|
100
137
|
this.zone.runOutsideAngular(() => this.button.removeEventListener('blur', this.onBlur));
|
|
138
|
+
this.zone.runOutsideAngular(() => this.button.removeEventListener('click', this.onClick));
|
|
139
|
+
this.isSplitButton && this.zone.runOutsideAngular(() => this.button.removeEventListener('keyup', this.onClick));
|
|
101
140
|
}
|
|
102
141
|
}
|
|
142
|
+
focusToggleButton() {
|
|
143
|
+
this.focusButton && this.zone.runOutsideAngular(() => this.button.focus());
|
|
144
|
+
this.focusButton = false;
|
|
145
|
+
}
|
|
103
146
|
}
|
|
104
|
-
ToggleButtonTabStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
147
|
+
ToggleButtonTabStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.MultiTabStop }], target: i0.ɵɵFactoryTarget.Directive });
|
|
105
148
|
ToggleButtonTabStopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToggleButtonTabStopDirective, selector: "[kendoToggleButtonTabStop]", inputs: { active: ["kendoToggleButtonTabStop", "active"], toggleButtonAriaLabel: "toggleButtonAriaLabel" }, usesOnChanges: true, ngImport: i0 });
|
|
106
149
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToggleButtonTabStopDirective, decorators: [{
|
|
107
150
|
type: Directive,
|
|
108
151
|
args: [{
|
|
109
152
|
selector: '[kendoToggleButtonTabStop]'
|
|
110
153
|
}]
|
|
111
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { active: [{
|
|
154
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.MultiTabStop }]; }, propDecorators: { active: [{
|
|
112
155
|
type: Input,
|
|
113
156
|
args: ['kendoToggleButtonTabStop']
|
|
114
157
|
}], toggleButtonAriaLabel: [{
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
/**
|
|
6
|
+
* @hidden
|
|
7
|
+
*/
|
|
8
|
+
export class MultiTabStop {
|
|
9
|
+
}
|
|
@@ -4,3 +4,4 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
export { ToggleButtonTabStopModule } from './toggle-button-tab-stop/toggle-button-tab-stop.module';
|
|
6
6
|
export { ToggleButtonTabStopDirective } from './toggle-button-tab-stop/toggle-button-tab-stop.directive';
|
|
7
|
+
export { MultiTabStop } from './toggle-button-tab-stop/toggle-button-tab-stop';
|
|
@@ -8,8 +8,8 @@ import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
|
|
|
8
8
|
import { Draggable } from '@progress/kendo-draggable';
|
|
9
9
|
import * as i1 from '@angular/common';
|
|
10
10
|
import { CommonModule } from '@angular/common';
|
|
11
|
-
import { auditTime } from 'rxjs/operators';
|
|
12
|
-
import { merge, fromEvent, from } from 'rxjs';
|
|
11
|
+
import { auditTime, take } from 'rxjs/operators';
|
|
12
|
+
import { merge, fromEvent, from, Subscription } from 'rxjs';
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* @hidden
|
|
@@ -1274,6 +1274,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1274
1274
|
}]
|
|
1275
1275
|
}], ctorParameters: function () { return []; } });
|
|
1276
1276
|
|
|
1277
|
+
/**
|
|
1278
|
+
* @hidden
|
|
1279
|
+
*/
|
|
1280
|
+
class MultiTabStop {
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1277
1283
|
const tags = ['kendo-splitbutton', 'kendo-combobox', 'kendo-multicolumncombobox', 'kendo-datepicker', 'kendo-timepicker', 'kendo-datetimepicker'];
|
|
1278
1284
|
/**
|
|
1279
1285
|
* Includes the button that toggles the Popup in the tab sequence when applied
|
|
@@ -1298,22 +1304,29 @@ class ToggleButtonTabStopDirective {
|
|
|
1298
1304
|
/**
|
|
1299
1305
|
* @hidden
|
|
1300
1306
|
*/
|
|
1301
|
-
constructor(hostEl, renderer, zone) {
|
|
1307
|
+
constructor(hostEl, renderer, zone, hostComponent) {
|
|
1302
1308
|
this.hostEl = hostEl;
|
|
1303
1309
|
this.renderer = renderer;
|
|
1304
1310
|
this.zone = zone;
|
|
1311
|
+
this.hostComponent = hostComponent;
|
|
1305
1312
|
/**
|
|
1306
1313
|
* Defines the value of the `aria-label` attribute of the toggle button when active.
|
|
1307
1314
|
*
|
|
1308
1315
|
* @default "toggle popup"
|
|
1309
1316
|
*/
|
|
1310
1317
|
this.toggleButtonAriaLabel = 'toggle popup';
|
|
1318
|
+
this.sub = new Subscription();
|
|
1311
1319
|
this.onFocus = () => {
|
|
1312
1320
|
this.renderer.setStyle(this.button, 'box-shadow', 'inset 0 0 0 1px rgba(0, 0, 0, 0.08)');
|
|
1313
1321
|
};
|
|
1314
1322
|
this.onBlur = () => {
|
|
1315
1323
|
this.renderer.removeStyle(this.button, 'box-shadow');
|
|
1316
1324
|
};
|
|
1325
|
+
this.onClick = (e) => {
|
|
1326
|
+
const splitButtonToggleEnter = e instanceof KeyboardEvent && e.keyCode === Keys.Enter;
|
|
1327
|
+
const isClick = e instanceof PointerEvent;
|
|
1328
|
+
(splitButtonToggleEnter || isClick) && (this.focusButton = true);
|
|
1329
|
+
};
|
|
1317
1330
|
if (isDevMode() && tags.indexOf(hostEl.nativeElement.tagName.toLowerCase()) === -1) {
|
|
1318
1331
|
console.warn(`The kendoToggleButtonTabStop directive can be applied to the following components only: ${tags}`);
|
|
1319
1332
|
}
|
|
@@ -1322,12 +1335,33 @@ class ToggleButtonTabStopDirective {
|
|
|
1322
1335
|
this.active = true;
|
|
1323
1336
|
}
|
|
1324
1337
|
ngAfterViewInit() {
|
|
1338
|
+
var _a, _b;
|
|
1325
1339
|
if (!isDocumentAvailable()) {
|
|
1326
1340
|
return;
|
|
1327
1341
|
}
|
|
1342
|
+
this.isSplitButton = this.hostEl.nativeElement.classList.contains('k-split-button');
|
|
1328
1343
|
if (this.active) {
|
|
1329
1344
|
this.activateButton();
|
|
1330
1345
|
}
|
|
1346
|
+
if (((_a = this.hostComponent) === null || _a === void 0 ? void 0 : _a.escape) instanceof EventEmitter) {
|
|
1347
|
+
this.sub = (_b = this.hostComponent) === null || _b === void 0 ? void 0 : _b.escape.subscribe(() => {
|
|
1348
|
+
if (this.isSplitButton) {
|
|
1349
|
+
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
1350
|
+
this.focusToggleButton();
|
|
1351
|
+
});
|
|
1352
|
+
}
|
|
1353
|
+
else {
|
|
1354
|
+
this.focusToggleButton();
|
|
1355
|
+
}
|
|
1356
|
+
});
|
|
1357
|
+
this.sub.add(this.hostComponent.close.subscribe(() => {
|
|
1358
|
+
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
1359
|
+
this.zone.runOutsideAngular(() => {
|
|
1360
|
+
setTimeout(() => this.focusButton = false);
|
|
1361
|
+
});
|
|
1362
|
+
});
|
|
1363
|
+
}));
|
|
1364
|
+
}
|
|
1331
1365
|
}
|
|
1332
1366
|
ngOnChanges(changes) {
|
|
1333
1367
|
if (!isDocumentAvailable()) {
|
|
@@ -1342,6 +1376,7 @@ class ToggleButtonTabStopDirective {
|
|
|
1342
1376
|
}
|
|
1343
1377
|
ngOnDestroy() {
|
|
1344
1378
|
this.removeListeners();
|
|
1379
|
+
this.sub.unsubscribe();
|
|
1345
1380
|
}
|
|
1346
1381
|
activateButton() {
|
|
1347
1382
|
var _a;
|
|
@@ -1350,11 +1385,13 @@ class ToggleButtonTabStopDirective {
|
|
|
1350
1385
|
this.button = el.querySelector('.k-input-button, .k-split-button-arrow');
|
|
1351
1386
|
this.button && this.renderer.setAttribute(this.button, 'tabindex', tabindex);
|
|
1352
1387
|
this.button && this.renderer.setAttribute(this.button, 'aria-label', this.toggleButtonAriaLabel);
|
|
1388
|
+
this.button && this.renderer.removeAttribute(this.button, 'aria-hidden');
|
|
1353
1389
|
this.removeListeners();
|
|
1354
1390
|
this.addListeners();
|
|
1355
1391
|
}
|
|
1356
1392
|
deactivateButton() {
|
|
1357
1393
|
this.button && this.renderer.setAttribute(this.button, 'tabindex', '-1');
|
|
1394
|
+
this.button && this.renderer.setAttribute(this.button, 'aria-hidden', 'true');
|
|
1358
1395
|
this.button && this.renderer.removeAttribute(this.button, 'aria-label');
|
|
1359
1396
|
this.removeListeners();
|
|
1360
1397
|
}
|
|
@@ -1362,23 +1399,31 @@ class ToggleButtonTabStopDirective {
|
|
|
1362
1399
|
if (this.button) {
|
|
1363
1400
|
this.zone.runOutsideAngular(() => this.button.addEventListener('focus', this.onFocus));
|
|
1364
1401
|
this.zone.runOutsideAngular(() => this.button.addEventListener('blur', this.onBlur));
|
|
1402
|
+
this.zone.runOutsideAngular(() => this.button.addEventListener('click', this.onClick));
|
|
1403
|
+
this.isSplitButton && this.zone.runOutsideAngular(() => this.button.addEventListener('keyup', this.onClick));
|
|
1365
1404
|
}
|
|
1366
1405
|
}
|
|
1367
1406
|
removeListeners() {
|
|
1368
1407
|
if (this.button) {
|
|
1369
1408
|
this.zone.runOutsideAngular(() => this.button.removeEventListener('focus', this.onFocus));
|
|
1370
1409
|
this.zone.runOutsideAngular(() => this.button.removeEventListener('blur', this.onBlur));
|
|
1410
|
+
this.zone.runOutsideAngular(() => this.button.removeEventListener('click', this.onClick));
|
|
1411
|
+
this.isSplitButton && this.zone.runOutsideAngular(() => this.button.removeEventListener('keyup', this.onClick));
|
|
1371
1412
|
}
|
|
1372
1413
|
}
|
|
1414
|
+
focusToggleButton() {
|
|
1415
|
+
this.focusButton && this.zone.runOutsideAngular(() => this.button.focus());
|
|
1416
|
+
this.focusButton = false;
|
|
1417
|
+
}
|
|
1373
1418
|
}
|
|
1374
|
-
ToggleButtonTabStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1419
|
+
ToggleButtonTabStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: MultiTabStop }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1375
1420
|
ToggleButtonTabStopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToggleButtonTabStopDirective, selector: "[kendoToggleButtonTabStop]", inputs: { active: ["kendoToggleButtonTabStop", "active"], toggleButtonAriaLabel: "toggleButtonAriaLabel" }, usesOnChanges: true, ngImport: i0 });
|
|
1376
1421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToggleButtonTabStopDirective, decorators: [{
|
|
1377
1422
|
type: Directive,
|
|
1378
1423
|
args: [{
|
|
1379
1424
|
selector: '[kendoToggleButtonTabStop]'
|
|
1380
1425
|
}]
|
|
1381
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { active: [{
|
|
1426
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: MultiTabStop }]; }, propDecorators: { active: [{
|
|
1382
1427
|
type: Input,
|
|
1383
1428
|
args: ['kendoToggleButtonTabStop']
|
|
1384
1429
|
}], toggleButtonAriaLabel: [{
|
|
@@ -1403,5 +1448,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1403
1448
|
* Generated bundle index. Do not edit.
|
|
1404
1449
|
*/
|
|
1405
1450
|
|
|
1406
|
-
export { AdornmentsModule, DraggableDirective, DraggableModule, EventsModule, EventsOutsideAngularDirective, KendoInput, Keys, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ResizeSensorModule, ScrollbarWidthService, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective, ToggleButtonTabStopModule, WatermarkModule, WatermarkOverlayComponent, anyChanged, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, focusableSelector, guid, hasClasses, hasObservers, isChanged, isControlRequired, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isObjectPresent, isPresent, isSafari, isString, isVisible, matchesClasses, matchesNodeName, parseAttributes, parseCSSClassNames, removeHTMLAttributes, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, shouldShowValidationUI, splitStringToArray };
|
|
1451
|
+
export { AdornmentsModule, DraggableDirective, DraggableModule, EventsModule, EventsOutsideAngularDirective, KendoInput, Keys, MultiTabStop, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ResizeSensorModule, ScrollbarWidthService, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective, ToggleButtonTabStopModule, WatermarkModule, WatermarkOverlayComponent, anyChanged, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, focusableSelector, guid, hasClasses, hasObservers, isChanged, isControlRequired, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isObjectPresent, isPresent, isSafari, isString, isVisible, matchesClasses, matchesNodeName, parseAttributes, parseCSSClassNames, removeHTMLAttributes, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, shouldShowValidationUI, splitStringToArray };
|
|
1407
1452
|
|
|
@@ -8,8 +8,8 @@ import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
|
|
|
8
8
|
import { Draggable } from '@progress/kendo-draggable';
|
|
9
9
|
import * as i1 from '@angular/common';
|
|
10
10
|
import { CommonModule } from '@angular/common';
|
|
11
|
-
import { auditTime } from 'rxjs/operators';
|
|
12
|
-
import { merge, fromEvent, from } from 'rxjs';
|
|
11
|
+
import { auditTime, take } from 'rxjs/operators';
|
|
12
|
+
import { merge, fromEvent, from, Subscription } from 'rxjs';
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* @hidden
|
|
@@ -1265,6 +1265,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1265
1265
|
}]
|
|
1266
1266
|
}], ctorParameters: function () { return []; } });
|
|
1267
1267
|
|
|
1268
|
+
/**
|
|
1269
|
+
* @hidden
|
|
1270
|
+
*/
|
|
1271
|
+
class MultiTabStop {
|
|
1272
|
+
}
|
|
1273
|
+
|
|
1268
1274
|
const tags = ['kendo-splitbutton', 'kendo-combobox', 'kendo-multicolumncombobox', 'kendo-datepicker', 'kendo-timepicker', 'kendo-datetimepicker'];
|
|
1269
1275
|
/**
|
|
1270
1276
|
* Includes the button that toggles the Popup in the tab sequence when applied
|
|
@@ -1289,22 +1295,29 @@ class ToggleButtonTabStopDirective {
|
|
|
1289
1295
|
/**
|
|
1290
1296
|
* @hidden
|
|
1291
1297
|
*/
|
|
1292
|
-
constructor(hostEl, renderer, zone) {
|
|
1298
|
+
constructor(hostEl, renderer, zone, hostComponent) {
|
|
1293
1299
|
this.hostEl = hostEl;
|
|
1294
1300
|
this.renderer = renderer;
|
|
1295
1301
|
this.zone = zone;
|
|
1302
|
+
this.hostComponent = hostComponent;
|
|
1296
1303
|
/**
|
|
1297
1304
|
* Defines the value of the `aria-label` attribute of the toggle button when active.
|
|
1298
1305
|
*
|
|
1299
1306
|
* @default "toggle popup"
|
|
1300
1307
|
*/
|
|
1301
1308
|
this.toggleButtonAriaLabel = 'toggle popup';
|
|
1309
|
+
this.sub = new Subscription();
|
|
1302
1310
|
this.onFocus = () => {
|
|
1303
1311
|
this.renderer.setStyle(this.button, 'box-shadow', 'inset 0 0 0 1px rgba(0, 0, 0, 0.08)');
|
|
1304
1312
|
};
|
|
1305
1313
|
this.onBlur = () => {
|
|
1306
1314
|
this.renderer.removeStyle(this.button, 'box-shadow');
|
|
1307
1315
|
};
|
|
1316
|
+
this.onClick = (e) => {
|
|
1317
|
+
const splitButtonToggleEnter = e instanceof KeyboardEvent && e.keyCode === Keys.Enter;
|
|
1318
|
+
const isClick = e instanceof PointerEvent;
|
|
1319
|
+
(splitButtonToggleEnter || isClick) && (this.focusButton = true);
|
|
1320
|
+
};
|
|
1308
1321
|
if (isDevMode() && tags.indexOf(hostEl.nativeElement.tagName.toLowerCase()) === -1) {
|
|
1309
1322
|
console.warn(`The kendoToggleButtonTabStop directive can be applied to the following components only: ${tags}`);
|
|
1310
1323
|
}
|
|
@@ -1316,9 +1329,29 @@ class ToggleButtonTabStopDirective {
|
|
|
1316
1329
|
if (!isDocumentAvailable()) {
|
|
1317
1330
|
return;
|
|
1318
1331
|
}
|
|
1332
|
+
this.isSplitButton = this.hostEl.nativeElement.classList.contains('k-split-button');
|
|
1319
1333
|
if (this.active) {
|
|
1320
1334
|
this.activateButton();
|
|
1321
1335
|
}
|
|
1336
|
+
if (this.hostComponent?.escape instanceof EventEmitter) {
|
|
1337
|
+
this.sub = this.hostComponent?.escape.subscribe(() => {
|
|
1338
|
+
if (this.isSplitButton) {
|
|
1339
|
+
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
1340
|
+
this.focusToggleButton();
|
|
1341
|
+
});
|
|
1342
|
+
}
|
|
1343
|
+
else {
|
|
1344
|
+
this.focusToggleButton();
|
|
1345
|
+
}
|
|
1346
|
+
});
|
|
1347
|
+
this.sub.add(this.hostComponent.close.subscribe(() => {
|
|
1348
|
+
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
1349
|
+
this.zone.runOutsideAngular(() => {
|
|
1350
|
+
setTimeout(() => this.focusButton = false);
|
|
1351
|
+
});
|
|
1352
|
+
});
|
|
1353
|
+
}));
|
|
1354
|
+
}
|
|
1322
1355
|
}
|
|
1323
1356
|
ngOnChanges(changes) {
|
|
1324
1357
|
if (!isDocumentAvailable()) {
|
|
@@ -1333,6 +1366,7 @@ class ToggleButtonTabStopDirective {
|
|
|
1333
1366
|
}
|
|
1334
1367
|
ngOnDestroy() {
|
|
1335
1368
|
this.removeListeners();
|
|
1369
|
+
this.sub.unsubscribe();
|
|
1336
1370
|
}
|
|
1337
1371
|
activateButton() {
|
|
1338
1372
|
const el = this.hostEl.nativeElement;
|
|
@@ -1340,11 +1374,13 @@ class ToggleButtonTabStopDirective {
|
|
|
1340
1374
|
this.button = el.querySelector('.k-input-button, .k-split-button-arrow');
|
|
1341
1375
|
this.button && this.renderer.setAttribute(this.button, 'tabindex', tabindex);
|
|
1342
1376
|
this.button && this.renderer.setAttribute(this.button, 'aria-label', this.toggleButtonAriaLabel);
|
|
1377
|
+
this.button && this.renderer.removeAttribute(this.button, 'aria-hidden');
|
|
1343
1378
|
this.removeListeners();
|
|
1344
1379
|
this.addListeners();
|
|
1345
1380
|
}
|
|
1346
1381
|
deactivateButton() {
|
|
1347
1382
|
this.button && this.renderer.setAttribute(this.button, 'tabindex', '-1');
|
|
1383
|
+
this.button && this.renderer.setAttribute(this.button, 'aria-hidden', 'true');
|
|
1348
1384
|
this.button && this.renderer.removeAttribute(this.button, 'aria-label');
|
|
1349
1385
|
this.removeListeners();
|
|
1350
1386
|
}
|
|
@@ -1352,23 +1388,31 @@ class ToggleButtonTabStopDirective {
|
|
|
1352
1388
|
if (this.button) {
|
|
1353
1389
|
this.zone.runOutsideAngular(() => this.button.addEventListener('focus', this.onFocus));
|
|
1354
1390
|
this.zone.runOutsideAngular(() => this.button.addEventListener('blur', this.onBlur));
|
|
1391
|
+
this.zone.runOutsideAngular(() => this.button.addEventListener('click', this.onClick));
|
|
1392
|
+
this.isSplitButton && this.zone.runOutsideAngular(() => this.button.addEventListener('keyup', this.onClick));
|
|
1355
1393
|
}
|
|
1356
1394
|
}
|
|
1357
1395
|
removeListeners() {
|
|
1358
1396
|
if (this.button) {
|
|
1359
1397
|
this.zone.runOutsideAngular(() => this.button.removeEventListener('focus', this.onFocus));
|
|
1360
1398
|
this.zone.runOutsideAngular(() => this.button.removeEventListener('blur', this.onBlur));
|
|
1399
|
+
this.zone.runOutsideAngular(() => this.button.removeEventListener('click', this.onClick));
|
|
1400
|
+
this.isSplitButton && this.zone.runOutsideAngular(() => this.button.removeEventListener('keyup', this.onClick));
|
|
1361
1401
|
}
|
|
1362
1402
|
}
|
|
1403
|
+
focusToggleButton() {
|
|
1404
|
+
this.focusButton && this.zone.runOutsideAngular(() => this.button.focus());
|
|
1405
|
+
this.focusButton = false;
|
|
1406
|
+
}
|
|
1363
1407
|
}
|
|
1364
|
-
ToggleButtonTabStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1408
|
+
ToggleButtonTabStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: MultiTabStop }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1365
1409
|
ToggleButtonTabStopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToggleButtonTabStopDirective, selector: "[kendoToggleButtonTabStop]", inputs: { active: ["kendoToggleButtonTabStop", "active"], toggleButtonAriaLabel: "toggleButtonAriaLabel" }, usesOnChanges: true, ngImport: i0 });
|
|
1366
1410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToggleButtonTabStopDirective, decorators: [{
|
|
1367
1411
|
type: Directive,
|
|
1368
1412
|
args: [{
|
|
1369
1413
|
selector: '[kendoToggleButtonTabStop]'
|
|
1370
1414
|
}]
|
|
1371
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { active: [{
|
|
1415
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: MultiTabStop }]; }, propDecorators: { active: [{
|
|
1372
1416
|
type: Input,
|
|
1373
1417
|
args: ['kendoToggleButtonTabStop']
|
|
1374
1418
|
}], toggleButtonAriaLabel: [{
|
|
@@ -1393,5 +1437,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1393
1437
|
* Generated bundle index. Do not edit.
|
|
1394
1438
|
*/
|
|
1395
1439
|
|
|
1396
|
-
export { AdornmentsModule, DraggableDirective, DraggableModule, EventsModule, EventsOutsideAngularDirective, KendoInput, Keys, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ResizeSensorModule, ScrollbarWidthService, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective, ToggleButtonTabStopModule, WatermarkModule, WatermarkOverlayComponent, anyChanged, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, focusableSelector, guid, hasClasses, hasObservers, isChanged, isControlRequired, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isObjectPresent, isPresent, isSafari, isString, isVisible, matchesClasses, matchesNodeName, parseAttributes, parseCSSClassNames, removeHTMLAttributes, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, shouldShowValidationUI, splitStringToArray };
|
|
1440
|
+
export { AdornmentsModule, DraggableDirective, DraggableModule, EventsModule, EventsOutsideAngularDirective, KendoInput, Keys, MultiTabStop, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ResizeSensorModule, ScrollbarWidthService, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective, ToggleButtonTabStopModule, WatermarkModule, WatermarkOverlayComponent, anyChanged, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, focusableSelector, guid, hasClasses, hasObservers, isChanged, isControlRequired, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isObjectPresent, isPresent, isSafari, isString, isVisible, matchesClasses, matchesNodeName, parseAttributes, parseCSSClassNames, removeHTMLAttributes, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, shouldShowValidationUI, splitStringToArray };
|
|
1397
1441
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-common",
|
|
3
|
-
"version": "16.0
|
|
3
|
+
"version": "16.1.0-develop.1",
|
|
4
4
|
"description": "Kendo UI for Angular - Utility Package",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"@progress/kendo-common": "^0.2.1",
|
|
24
24
|
"@progress/kendo-draggable": "^3.0.2",
|
|
25
25
|
"tslib": "^2.3.1",
|
|
26
|
-
"@progress/kendo-angular-schematics": "16.0
|
|
26
|
+
"@progress/kendo-angular-schematics": "16.1.0-develop.1"
|
|
27
27
|
},
|
|
28
28
|
"publishConfig": {
|
|
29
29
|
"access": "public"
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
import { EventEmitter } from "@angular/core";
|
|
6
|
+
/**
|
|
7
|
+
* @hidden
|
|
8
|
+
*/
|
|
9
|
+
export declare abstract class MultiTabStop {
|
|
10
|
+
escape: EventEmitter<any>;
|
|
11
|
+
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { ElementRef, NgZone, Renderer2, SimpleChanges } from "@angular/core";
|
|
6
|
+
import { MultiTabStop } from "./toggle-button-tab-stop";
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
7
8
|
/**
|
|
8
9
|
* Includes the button that toggles the Popup in the tab sequence when applied
|
|
@@ -27,6 +28,7 @@ export declare class ToggleButtonTabStopDirective {
|
|
|
27
28
|
private hostEl;
|
|
28
29
|
private renderer;
|
|
29
30
|
private zone;
|
|
31
|
+
private hostComponent;
|
|
30
32
|
/**
|
|
31
33
|
* @hidden
|
|
32
34
|
*
|
|
@@ -42,10 +44,13 @@ export declare class ToggleButtonTabStopDirective {
|
|
|
42
44
|
*/
|
|
43
45
|
toggleButtonAriaLabel: string;
|
|
44
46
|
private button;
|
|
47
|
+
private sub;
|
|
48
|
+
private focusButton;
|
|
49
|
+
private isSplitButton;
|
|
45
50
|
/**
|
|
46
51
|
* @hidden
|
|
47
52
|
*/
|
|
48
|
-
constructor(hostEl: ElementRef, renderer: Renderer2, zone: NgZone);
|
|
53
|
+
constructor(hostEl: ElementRef, renderer: Renderer2, zone: NgZone, hostComponent: MultiTabStop);
|
|
49
54
|
ngOnInit(): void;
|
|
50
55
|
ngAfterViewInit(): void;
|
|
51
56
|
ngOnChanges(changes: SimpleChanges): void;
|
|
@@ -54,8 +59,10 @@ export declare class ToggleButtonTabStopDirective {
|
|
|
54
59
|
private deactivateButton;
|
|
55
60
|
private onFocus;
|
|
56
61
|
private onBlur;
|
|
62
|
+
private onClick;
|
|
57
63
|
private addListeners;
|
|
58
64
|
private removeListeners;
|
|
65
|
+
private focusToggleButton;
|
|
59
66
|
static ɵfac: i0.ɵɵFactoryDeclaration<ToggleButtonTabStopDirective, never>;
|
|
60
67
|
static ɵdir: i0.ɵɵDirectiveDeclaration<ToggleButtonTabStopDirective, "[kendoToggleButtonTabStop]", never, { "active": "kendoToggleButtonTabStop"; "toggleButtonAriaLabel": "toggleButtonAriaLabel"; }, {}, never, never, false, never>;
|
|
61
68
|
}
|
|
@@ -4,3 +4,4 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
export { ToggleButtonTabStopModule } from './toggle-button-tab-stop/toggle-button-tab-stop.module';
|
|
6
6
|
export { ToggleButtonTabStopDirective } from './toggle-button-tab-stop/toggle-button-tab-stop.directive';
|
|
7
|
+
export { MultiTabStop } from './toggle-button-tab-stop/toggle-button-tab-stop';
|