@progress/kendo-angular-common 15.4.0-develop.1 → 15.4.0-develop.3
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/index.mjs +1 -0
- package/esm2020/toggle-button-tab-stop/toggle-button-tab-stop.directive.mjs +116 -0
- package/esm2020/toggle-button-tab-stop/toggle-button-tab-stop.module.mjs +20 -0
- package/esm2020/toggle-button-tab-stop.mjs +6 -0
- package/fesm2015/progress-kendo-angular-common.mjs +127 -2
- package/fesm2020/progress-kendo-angular-common.mjs +126 -2
- package/index.d.ts +1 -0
- package/package.json +2 -2
- package/toggle-button-tab-stop/toggle-button-tab-stop.directive.d.ts +61 -0
- package/toggle-button-tab-stop/toggle-button-tab-stop.module.d.ts +11 -0
- package/toggle-button-tab-stop.d.ts +6 -0
package/esm2020/index.mjs
CHANGED
|
@@ -0,0 +1,116 @@
|
|
|
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 { Directive, ElementRef, Input, NgZone, Renderer2, isDevMode } from "@angular/core";
|
|
6
|
+
import { isDocumentAvailable } from "../utils";
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
const tags = ['kendo-splitbutton', 'kendo-combobox', 'kendo-multicolumncombobox', 'kendo-datepicker', 'kendo-timepicker', 'kendo-datetimepicker'];
|
|
9
|
+
/**
|
|
10
|
+
* Includes the button that toggles the Popup in the tab sequence when applied
|
|
11
|
+
* to a SplitButton, ComboBox, MultiComboBox, DatePicker, TimePicker, and DateTimePicker component.
|
|
12
|
+
* ```ts-no-run
|
|
13
|
+
* _@Component({
|
|
14
|
+
* selector: 'my-app',
|
|
15
|
+
* template: `
|
|
16
|
+
* <kendo-combobox [data]="data"
|
|
17
|
+
* kendoToggleButtonTabStop>
|
|
18
|
+
* </kendo-combobox>
|
|
19
|
+
*
|
|
20
|
+
* <kendo-datepicker [(ngModel)]="value"
|
|
21
|
+
* kendoToggleButtonTabStop>
|
|
22
|
+
* </kendo-datepicker>
|
|
23
|
+
* `
|
|
24
|
+
* })
|
|
25
|
+
* class AppComponent {}
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export class ToggleButtonTabStopDirective {
|
|
29
|
+
/**
|
|
30
|
+
* @hidden
|
|
31
|
+
*/
|
|
32
|
+
constructor(hostEl, renderer, zone) {
|
|
33
|
+
this.hostEl = hostEl;
|
|
34
|
+
this.renderer = renderer;
|
|
35
|
+
this.zone = zone;
|
|
36
|
+
/**
|
|
37
|
+
* Defines the value of the `aria-label` attribute of the toggle button when active.
|
|
38
|
+
*
|
|
39
|
+
* @default "toggle popup"
|
|
40
|
+
*/
|
|
41
|
+
this.toggleButtonAriaLabel = 'toggle popup';
|
|
42
|
+
this.onFocus = () => {
|
|
43
|
+
this.renderer.setStyle(this.button, 'box-shadow', 'inset 0 0 0 1px rgba(0, 0, 0, 0.08)');
|
|
44
|
+
};
|
|
45
|
+
this.onBlur = () => {
|
|
46
|
+
this.renderer.removeStyle(this.button, 'box-shadow');
|
|
47
|
+
};
|
|
48
|
+
if (isDevMode() && tags.indexOf(hostEl.nativeElement.tagName.toLowerCase()) === -1) {
|
|
49
|
+
console.warn(`The kendoToggleButtonTabStop directive can be applied to the following components only: ${tags}`);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
ngOnInit() {
|
|
53
|
+
this.active = true;
|
|
54
|
+
}
|
|
55
|
+
ngAfterViewInit() {
|
|
56
|
+
if (!isDocumentAvailable()) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
if (this.active) {
|
|
60
|
+
this.activateButton();
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
ngOnChanges(changes) {
|
|
64
|
+
if (!isDocumentAvailable()) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
if (changes['active']) {
|
|
68
|
+
changes['active'].currentValue ? this.activateButton() : this.deactivateButton();
|
|
69
|
+
}
|
|
70
|
+
if (changes['toggleButtonAriaLabel']) {
|
|
71
|
+
this.button && this.renderer.setAttribute(this.button, 'aria-label', changes['toggleButtonAriaLabel'].currentValue);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
ngOnDestroy() {
|
|
75
|
+
this.removeListeners();
|
|
76
|
+
}
|
|
77
|
+
activateButton() {
|
|
78
|
+
const el = this.hostEl.nativeElement;
|
|
79
|
+
const tabindex = el.querySelector('button:not([tabindex^="-"]), input:not([tabindex^="-"]')?.getAttribute('tabindex');
|
|
80
|
+
this.button = el.querySelector('.k-input-button, .k-split-button-arrow');
|
|
81
|
+
this.button && this.renderer.setAttribute(this.button, 'tabindex', tabindex);
|
|
82
|
+
this.button && this.renderer.setAttribute(this.button, 'aria-label', this.toggleButtonAriaLabel);
|
|
83
|
+
this.removeListeners();
|
|
84
|
+
this.addListeners();
|
|
85
|
+
}
|
|
86
|
+
deactivateButton() {
|
|
87
|
+
this.button && this.renderer.setAttribute(this.button, 'tabindex', '-1');
|
|
88
|
+
this.button && this.renderer.removeAttribute(this.button, 'aria-label');
|
|
89
|
+
this.removeListeners();
|
|
90
|
+
}
|
|
91
|
+
addListeners() {
|
|
92
|
+
if (this.button) {
|
|
93
|
+
this.zone.runOutsideAngular(() => this.button.addEventListener('focus', this.onFocus));
|
|
94
|
+
this.zone.runOutsideAngular(() => this.button.addEventListener('blur', this.onBlur));
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
removeListeners() {
|
|
98
|
+
if (this.button) {
|
|
99
|
+
this.zone.runOutsideAngular(() => this.button.removeEventListener('focus', this.onFocus));
|
|
100
|
+
this.zone.runOutsideAngular(() => this.button.removeEventListener('blur', this.onBlur));
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
ToggleButtonTabStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
105
|
+
ToggleButtonTabStopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ToggleButtonTabStopDirective, selector: "[kendoToggleButtonTabStop]", inputs: { active: ["kendoToggleButtonTabStop", "active"], toggleButtonAriaLabel: "toggleButtonAriaLabel" }, usesOnChanges: true, ngImport: i0 });
|
|
106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopDirective, decorators: [{
|
|
107
|
+
type: Directive,
|
|
108
|
+
args: [{
|
|
109
|
+
selector: '[kendoToggleButtonTabStop]'
|
|
110
|
+
}]
|
|
111
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { active: [{
|
|
112
|
+
type: Input,
|
|
113
|
+
args: ['kendoToggleButtonTabStop']
|
|
114
|
+
}], toggleButtonAriaLabel: [{
|
|
115
|
+
type: Input
|
|
116
|
+
}] } });
|
|
@@ -0,0 +1,20 @@
|
|
|
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 { NgModule } from '@angular/core';
|
|
6
|
+
import { ToggleButtonTabStopDirective } from './toggle-button-tab-stop.directive';
|
|
7
|
+
import * as i0 from "@angular/core";
|
|
8
|
+
export class ToggleButtonTabStopModule {
|
|
9
|
+
}
|
|
10
|
+
ToggleButtonTabStopModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
11
|
+
ToggleButtonTabStopModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopModule, declarations: [ToggleButtonTabStopDirective], exports: [ToggleButtonTabStopDirective] });
|
|
12
|
+
ToggleButtonTabStopModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopModule, imports: [[]] });
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopModule, decorators: [{
|
|
14
|
+
type: NgModule,
|
|
15
|
+
args: [{
|
|
16
|
+
imports: [],
|
|
17
|
+
declarations: [ToggleButtonTabStopDirective],
|
|
18
|
+
exports: [ToggleButtonTabStopDirective]
|
|
19
|
+
}]
|
|
20
|
+
}] });
|
|
@@ -0,0 +1,6 @@
|
|
|
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
|
+
export { ToggleButtonTabStopModule } from './toggle-button-tab-stop/toggle-button-tab-stop.module';
|
|
6
|
+
export { ToggleButtonTabStopDirective } from './toggle-button-tab-stop/toggle-button-tab-stop.directive';
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { EventEmitter, Directive, Input, Output, NgModule, Injectable, Component, HostBinding, ViewChild, Optional } from '@angular/core';
|
|
6
|
+
import { EventEmitter, Directive, Input, Output, NgModule, Injectable, Component, HostBinding, ViewChild, Optional, isDevMode } from '@angular/core';
|
|
7
7
|
import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
|
|
8
8
|
import { Draggable } from '@progress/kendo-draggable';
|
|
9
9
|
import * as i1 from '@angular/common';
|
|
@@ -1237,9 +1237,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
1237
1237
|
}]
|
|
1238
1238
|
}], ctorParameters: function () { return []; } });
|
|
1239
1239
|
|
|
1240
|
+
const tags = ['kendo-splitbutton', 'kendo-combobox', 'kendo-multicolumncombobox', 'kendo-datepicker', 'kendo-timepicker', 'kendo-datetimepicker'];
|
|
1241
|
+
/**
|
|
1242
|
+
* Includes the button that toggles the Popup in the tab sequence when applied
|
|
1243
|
+
* to a SplitButton, ComboBox, MultiComboBox, DatePicker, TimePicker, and DateTimePicker component.
|
|
1244
|
+
* ```ts-no-run
|
|
1245
|
+
* _@Component({
|
|
1246
|
+
* selector: 'my-app',
|
|
1247
|
+
* template: `
|
|
1248
|
+
* <kendo-combobox [data]="data"
|
|
1249
|
+
* kendoToggleButtonTabStop>
|
|
1250
|
+
* </kendo-combobox>
|
|
1251
|
+
*
|
|
1252
|
+
* <kendo-datepicker [(ngModel)]="value"
|
|
1253
|
+
* kendoToggleButtonTabStop>
|
|
1254
|
+
* </kendo-datepicker>
|
|
1255
|
+
* `
|
|
1256
|
+
* })
|
|
1257
|
+
* class AppComponent {}
|
|
1258
|
+
* ```
|
|
1259
|
+
*/
|
|
1260
|
+
class ToggleButtonTabStopDirective {
|
|
1261
|
+
/**
|
|
1262
|
+
* @hidden
|
|
1263
|
+
*/
|
|
1264
|
+
constructor(hostEl, renderer, zone) {
|
|
1265
|
+
this.hostEl = hostEl;
|
|
1266
|
+
this.renderer = renderer;
|
|
1267
|
+
this.zone = zone;
|
|
1268
|
+
/**
|
|
1269
|
+
* Defines the value of the `aria-label` attribute of the toggle button when active.
|
|
1270
|
+
*
|
|
1271
|
+
* @default "toggle popup"
|
|
1272
|
+
*/
|
|
1273
|
+
this.toggleButtonAriaLabel = 'toggle popup';
|
|
1274
|
+
this.onFocus = () => {
|
|
1275
|
+
this.renderer.setStyle(this.button, 'box-shadow', 'inset 0 0 0 1px rgba(0, 0, 0, 0.08)');
|
|
1276
|
+
};
|
|
1277
|
+
this.onBlur = () => {
|
|
1278
|
+
this.renderer.removeStyle(this.button, 'box-shadow');
|
|
1279
|
+
};
|
|
1280
|
+
if (isDevMode() && tags.indexOf(hostEl.nativeElement.tagName.toLowerCase()) === -1) {
|
|
1281
|
+
console.warn(`The kendoToggleButtonTabStop directive can be applied to the following components only: ${tags}`);
|
|
1282
|
+
}
|
|
1283
|
+
}
|
|
1284
|
+
ngOnInit() {
|
|
1285
|
+
this.active = true;
|
|
1286
|
+
}
|
|
1287
|
+
ngAfterViewInit() {
|
|
1288
|
+
if (!isDocumentAvailable()) {
|
|
1289
|
+
return;
|
|
1290
|
+
}
|
|
1291
|
+
if (this.active) {
|
|
1292
|
+
this.activateButton();
|
|
1293
|
+
}
|
|
1294
|
+
}
|
|
1295
|
+
ngOnChanges(changes) {
|
|
1296
|
+
if (!isDocumentAvailable()) {
|
|
1297
|
+
return;
|
|
1298
|
+
}
|
|
1299
|
+
if (changes['active']) {
|
|
1300
|
+
changes['active'].currentValue ? this.activateButton() : this.deactivateButton();
|
|
1301
|
+
}
|
|
1302
|
+
if (changes['toggleButtonAriaLabel']) {
|
|
1303
|
+
this.button && this.renderer.setAttribute(this.button, 'aria-label', changes['toggleButtonAriaLabel'].currentValue);
|
|
1304
|
+
}
|
|
1305
|
+
}
|
|
1306
|
+
ngOnDestroy() {
|
|
1307
|
+
this.removeListeners();
|
|
1308
|
+
}
|
|
1309
|
+
activateButton() {
|
|
1310
|
+
var _a;
|
|
1311
|
+
const el = this.hostEl.nativeElement;
|
|
1312
|
+
const tabindex = (_a = el.querySelector('button:not([tabindex^="-"]), input:not([tabindex^="-"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('tabindex');
|
|
1313
|
+
this.button = el.querySelector('.k-input-button, .k-split-button-arrow');
|
|
1314
|
+
this.button && this.renderer.setAttribute(this.button, 'tabindex', tabindex);
|
|
1315
|
+
this.button && this.renderer.setAttribute(this.button, 'aria-label', this.toggleButtonAriaLabel);
|
|
1316
|
+
this.removeListeners();
|
|
1317
|
+
this.addListeners();
|
|
1318
|
+
}
|
|
1319
|
+
deactivateButton() {
|
|
1320
|
+
this.button && this.renderer.setAttribute(this.button, 'tabindex', '-1');
|
|
1321
|
+
this.button && this.renderer.removeAttribute(this.button, 'aria-label');
|
|
1322
|
+
this.removeListeners();
|
|
1323
|
+
}
|
|
1324
|
+
addListeners() {
|
|
1325
|
+
if (this.button) {
|
|
1326
|
+
this.zone.runOutsideAngular(() => this.button.addEventListener('focus', this.onFocus));
|
|
1327
|
+
this.zone.runOutsideAngular(() => this.button.addEventListener('blur', this.onBlur));
|
|
1328
|
+
}
|
|
1329
|
+
}
|
|
1330
|
+
removeListeners() {
|
|
1331
|
+
if (this.button) {
|
|
1332
|
+
this.zone.runOutsideAngular(() => this.button.removeEventListener('focus', this.onFocus));
|
|
1333
|
+
this.zone.runOutsideAngular(() => this.button.removeEventListener('blur', this.onBlur));
|
|
1334
|
+
}
|
|
1335
|
+
}
|
|
1336
|
+
}
|
|
1337
|
+
ToggleButtonTabStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1338
|
+
ToggleButtonTabStopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ToggleButtonTabStopDirective, selector: "[kendoToggleButtonTabStop]", inputs: { active: ["kendoToggleButtonTabStop", "active"], toggleButtonAriaLabel: "toggleButtonAriaLabel" }, usesOnChanges: true, ngImport: i0 });
|
|
1339
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopDirective, decorators: [{
|
|
1340
|
+
type: Directive,
|
|
1341
|
+
args: [{
|
|
1342
|
+
selector: '[kendoToggleButtonTabStop]'
|
|
1343
|
+
}]
|
|
1344
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { active: [{
|
|
1345
|
+
type: Input,
|
|
1346
|
+
args: ['kendoToggleButtonTabStop']
|
|
1347
|
+
}], toggleButtonAriaLabel: [{
|
|
1348
|
+
type: Input
|
|
1349
|
+
}] } });
|
|
1350
|
+
|
|
1351
|
+
class ToggleButtonTabStopModule {
|
|
1352
|
+
}
|
|
1353
|
+
ToggleButtonTabStopModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1354
|
+
ToggleButtonTabStopModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopModule, declarations: [ToggleButtonTabStopDirective], exports: [ToggleButtonTabStopDirective] });
|
|
1355
|
+
ToggleButtonTabStopModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopModule, imports: [[]] });
|
|
1356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopModule, decorators: [{
|
|
1357
|
+
type: NgModule,
|
|
1358
|
+
args: [{
|
|
1359
|
+
imports: [],
|
|
1360
|
+
declarations: [ToggleButtonTabStopDirective],
|
|
1361
|
+
exports: [ToggleButtonTabStopDirective]
|
|
1362
|
+
}]
|
|
1363
|
+
}] });
|
|
1364
|
+
|
|
1240
1365
|
/**
|
|
1241
1366
|
* Generated bundle index. Do not edit.
|
|
1242
1367
|
*/
|
|
1243
1368
|
|
|
1244
|
-
export { AdornmentsModule, DraggableDirective, DraggableModule, EventsModule, EventsOutsideAngularDirective, KendoInput, Keys, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ResizeSensorModule, ScrollbarWidthService, SeparatorComponent, SuffixTemplateDirective, WatermarkModule, WatermarkOverlayComponent, anyChanged, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, focusableSelector, guid, hasClasses, hasObservers, isChanged, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isPresent, isSafari, isString, isVisible, matchesClasses, matchesNodeName, parseCSSClassNames, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, shouldShowValidationUI, splitStringToArray };
|
|
1369
|
+
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, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isPresent, isSafari, isString, isVisible, matchesClasses, matchesNodeName, parseCSSClassNames, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, shouldShowValidationUI, splitStringToArray };
|
|
1245
1370
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { EventEmitter, Directive, Input, Output, NgModule, Injectable, Component, HostBinding, ViewChild, Optional } from '@angular/core';
|
|
6
|
+
import { EventEmitter, Directive, Input, Output, NgModule, Injectable, Component, HostBinding, ViewChild, Optional, isDevMode } from '@angular/core';
|
|
7
7
|
import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
|
|
8
8
|
import { Draggable } from '@progress/kendo-draggable';
|
|
9
9
|
import * as i1 from '@angular/common';
|
|
@@ -1229,9 +1229,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
1229
1229
|
}]
|
|
1230
1230
|
}], ctorParameters: function () { return []; } });
|
|
1231
1231
|
|
|
1232
|
+
const tags = ['kendo-splitbutton', 'kendo-combobox', 'kendo-multicolumncombobox', 'kendo-datepicker', 'kendo-timepicker', 'kendo-datetimepicker'];
|
|
1233
|
+
/**
|
|
1234
|
+
* Includes the button that toggles the Popup in the tab sequence when applied
|
|
1235
|
+
* to a SplitButton, ComboBox, MultiComboBox, DatePicker, TimePicker, and DateTimePicker component.
|
|
1236
|
+
* ```ts-no-run
|
|
1237
|
+
* _@Component({
|
|
1238
|
+
* selector: 'my-app',
|
|
1239
|
+
* template: `
|
|
1240
|
+
* <kendo-combobox [data]="data"
|
|
1241
|
+
* kendoToggleButtonTabStop>
|
|
1242
|
+
* </kendo-combobox>
|
|
1243
|
+
*
|
|
1244
|
+
* <kendo-datepicker [(ngModel)]="value"
|
|
1245
|
+
* kendoToggleButtonTabStop>
|
|
1246
|
+
* </kendo-datepicker>
|
|
1247
|
+
* `
|
|
1248
|
+
* })
|
|
1249
|
+
* class AppComponent {}
|
|
1250
|
+
* ```
|
|
1251
|
+
*/
|
|
1252
|
+
class ToggleButtonTabStopDirective {
|
|
1253
|
+
/**
|
|
1254
|
+
* @hidden
|
|
1255
|
+
*/
|
|
1256
|
+
constructor(hostEl, renderer, zone) {
|
|
1257
|
+
this.hostEl = hostEl;
|
|
1258
|
+
this.renderer = renderer;
|
|
1259
|
+
this.zone = zone;
|
|
1260
|
+
/**
|
|
1261
|
+
* Defines the value of the `aria-label` attribute of the toggle button when active.
|
|
1262
|
+
*
|
|
1263
|
+
* @default "toggle popup"
|
|
1264
|
+
*/
|
|
1265
|
+
this.toggleButtonAriaLabel = 'toggle popup';
|
|
1266
|
+
this.onFocus = () => {
|
|
1267
|
+
this.renderer.setStyle(this.button, 'box-shadow', 'inset 0 0 0 1px rgba(0, 0, 0, 0.08)');
|
|
1268
|
+
};
|
|
1269
|
+
this.onBlur = () => {
|
|
1270
|
+
this.renderer.removeStyle(this.button, 'box-shadow');
|
|
1271
|
+
};
|
|
1272
|
+
if (isDevMode() && tags.indexOf(hostEl.nativeElement.tagName.toLowerCase()) === -1) {
|
|
1273
|
+
console.warn(`The kendoToggleButtonTabStop directive can be applied to the following components only: ${tags}`);
|
|
1274
|
+
}
|
|
1275
|
+
}
|
|
1276
|
+
ngOnInit() {
|
|
1277
|
+
this.active = true;
|
|
1278
|
+
}
|
|
1279
|
+
ngAfterViewInit() {
|
|
1280
|
+
if (!isDocumentAvailable()) {
|
|
1281
|
+
return;
|
|
1282
|
+
}
|
|
1283
|
+
if (this.active) {
|
|
1284
|
+
this.activateButton();
|
|
1285
|
+
}
|
|
1286
|
+
}
|
|
1287
|
+
ngOnChanges(changes) {
|
|
1288
|
+
if (!isDocumentAvailable()) {
|
|
1289
|
+
return;
|
|
1290
|
+
}
|
|
1291
|
+
if (changes['active']) {
|
|
1292
|
+
changes['active'].currentValue ? this.activateButton() : this.deactivateButton();
|
|
1293
|
+
}
|
|
1294
|
+
if (changes['toggleButtonAriaLabel']) {
|
|
1295
|
+
this.button && this.renderer.setAttribute(this.button, 'aria-label', changes['toggleButtonAriaLabel'].currentValue);
|
|
1296
|
+
}
|
|
1297
|
+
}
|
|
1298
|
+
ngOnDestroy() {
|
|
1299
|
+
this.removeListeners();
|
|
1300
|
+
}
|
|
1301
|
+
activateButton() {
|
|
1302
|
+
const el = this.hostEl.nativeElement;
|
|
1303
|
+
const tabindex = el.querySelector('button:not([tabindex^="-"]), input:not([tabindex^="-"]')?.getAttribute('tabindex');
|
|
1304
|
+
this.button = el.querySelector('.k-input-button, .k-split-button-arrow');
|
|
1305
|
+
this.button && this.renderer.setAttribute(this.button, 'tabindex', tabindex);
|
|
1306
|
+
this.button && this.renderer.setAttribute(this.button, 'aria-label', this.toggleButtonAriaLabel);
|
|
1307
|
+
this.removeListeners();
|
|
1308
|
+
this.addListeners();
|
|
1309
|
+
}
|
|
1310
|
+
deactivateButton() {
|
|
1311
|
+
this.button && this.renderer.setAttribute(this.button, 'tabindex', '-1');
|
|
1312
|
+
this.button && this.renderer.removeAttribute(this.button, 'aria-label');
|
|
1313
|
+
this.removeListeners();
|
|
1314
|
+
}
|
|
1315
|
+
addListeners() {
|
|
1316
|
+
if (this.button) {
|
|
1317
|
+
this.zone.runOutsideAngular(() => this.button.addEventListener('focus', this.onFocus));
|
|
1318
|
+
this.zone.runOutsideAngular(() => this.button.addEventListener('blur', this.onBlur));
|
|
1319
|
+
}
|
|
1320
|
+
}
|
|
1321
|
+
removeListeners() {
|
|
1322
|
+
if (this.button) {
|
|
1323
|
+
this.zone.runOutsideAngular(() => this.button.removeEventListener('focus', this.onFocus));
|
|
1324
|
+
this.zone.runOutsideAngular(() => this.button.removeEventListener('blur', this.onBlur));
|
|
1325
|
+
}
|
|
1326
|
+
}
|
|
1327
|
+
}
|
|
1328
|
+
ToggleButtonTabStopDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1329
|
+
ToggleButtonTabStopDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ToggleButtonTabStopDirective, selector: "[kendoToggleButtonTabStop]", inputs: { active: ["kendoToggleButtonTabStop", "active"], toggleButtonAriaLabel: "toggleButtonAriaLabel" }, usesOnChanges: true, ngImport: i0 });
|
|
1330
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopDirective, decorators: [{
|
|
1331
|
+
type: Directive,
|
|
1332
|
+
args: [{
|
|
1333
|
+
selector: '[kendoToggleButtonTabStop]'
|
|
1334
|
+
}]
|
|
1335
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { active: [{
|
|
1336
|
+
type: Input,
|
|
1337
|
+
args: ['kendoToggleButtonTabStop']
|
|
1338
|
+
}], toggleButtonAriaLabel: [{
|
|
1339
|
+
type: Input
|
|
1340
|
+
}] } });
|
|
1341
|
+
|
|
1342
|
+
class ToggleButtonTabStopModule {
|
|
1343
|
+
}
|
|
1344
|
+
ToggleButtonTabStopModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1345
|
+
ToggleButtonTabStopModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopModule, declarations: [ToggleButtonTabStopDirective], exports: [ToggleButtonTabStopDirective] });
|
|
1346
|
+
ToggleButtonTabStopModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopModule, imports: [[]] });
|
|
1347
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToggleButtonTabStopModule, decorators: [{
|
|
1348
|
+
type: NgModule,
|
|
1349
|
+
args: [{
|
|
1350
|
+
imports: [],
|
|
1351
|
+
declarations: [ToggleButtonTabStopDirective],
|
|
1352
|
+
exports: [ToggleButtonTabStopDirective]
|
|
1353
|
+
}]
|
|
1354
|
+
}] });
|
|
1355
|
+
|
|
1232
1356
|
/**
|
|
1233
1357
|
* Generated bundle index. Do not edit.
|
|
1234
1358
|
*/
|
|
1235
1359
|
|
|
1236
|
-
export { AdornmentsModule, DraggableDirective, DraggableModule, EventsModule, EventsOutsideAngularDirective, KendoInput, Keys, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ResizeSensorModule, ScrollbarWidthService, SeparatorComponent, SuffixTemplateDirective, WatermarkModule, WatermarkOverlayComponent, anyChanged, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, focusableSelector, guid, hasClasses, hasObservers, isChanged, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isPresent, isSafari, isString, isVisible, matchesClasses, matchesNodeName, parseCSSClassNames, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, shouldShowValidationUI, splitStringToArray };
|
|
1360
|
+
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, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isPresent, isSafari, isString, isVisible, matchesClasses, matchesNodeName, parseCSSClassNames, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, shouldShowValidationUI, splitStringToArray };
|
|
1237
1361
|
|
package/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-common",
|
|
3
|
-
"version": "15.4.0-develop.
|
|
3
|
+
"version": "15.4.0-develop.3",
|
|
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": "15.4.0-develop.
|
|
26
|
+
"@progress/kendo-angular-schematics": "15.4.0-develop.3"
|
|
27
27
|
},
|
|
28
28
|
"publishConfig": {
|
|
29
29
|
"access": "public"
|
|
@@ -0,0 +1,61 @@
|
|
|
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 { ElementRef, NgZone, Renderer2, SimpleChanges } from "@angular/core";
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
/**
|
|
8
|
+
* Includes the button that toggles the Popup in the tab sequence when applied
|
|
9
|
+
* to a SplitButton, ComboBox, MultiComboBox, DatePicker, TimePicker, and DateTimePicker component.
|
|
10
|
+
* ```ts-no-run
|
|
11
|
+
* _@Component({
|
|
12
|
+
* selector: 'my-app',
|
|
13
|
+
* template: `
|
|
14
|
+
* <kendo-combobox [data]="data"
|
|
15
|
+
* kendoToggleButtonTabStop>
|
|
16
|
+
* </kendo-combobox>
|
|
17
|
+
*
|
|
18
|
+
* <kendo-datepicker [(ngModel)]="value"
|
|
19
|
+
* kendoToggleButtonTabStop>
|
|
20
|
+
* </kendo-datepicker>
|
|
21
|
+
* `
|
|
22
|
+
* })
|
|
23
|
+
* class AppComponent {}
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
export declare class ToggleButtonTabStopDirective {
|
|
27
|
+
private hostEl;
|
|
28
|
+
private renderer;
|
|
29
|
+
private zone;
|
|
30
|
+
/**
|
|
31
|
+
* @hidden
|
|
32
|
+
*
|
|
33
|
+
* Allows setting the interactive state of the toggle button.
|
|
34
|
+
*
|
|
35
|
+
* @default true
|
|
36
|
+
*/
|
|
37
|
+
active: any;
|
|
38
|
+
/**
|
|
39
|
+
* Defines the value of the `aria-label` attribute of the toggle button when active.
|
|
40
|
+
*
|
|
41
|
+
* @default "toggle popup"
|
|
42
|
+
*/
|
|
43
|
+
toggleButtonAriaLabel: string;
|
|
44
|
+
private button;
|
|
45
|
+
/**
|
|
46
|
+
* @hidden
|
|
47
|
+
*/
|
|
48
|
+
constructor(hostEl: ElementRef, renderer: Renderer2, zone: NgZone);
|
|
49
|
+
ngOnInit(): void;
|
|
50
|
+
ngAfterViewInit(): void;
|
|
51
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
52
|
+
ngOnDestroy(): void;
|
|
53
|
+
private activateButton;
|
|
54
|
+
private deactivateButton;
|
|
55
|
+
private onFocus;
|
|
56
|
+
private onBlur;
|
|
57
|
+
private addListeners;
|
|
58
|
+
private removeListeners;
|
|
59
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ToggleButtonTabStopDirective, never>;
|
|
60
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ToggleButtonTabStopDirective, "[kendoToggleButtonTabStop]", never, { "active": "kendoToggleButtonTabStop"; "toggleButtonAriaLabel": "toggleButtonAriaLabel"; }, {}, never>;
|
|
61
|
+
}
|
|
@@ -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 * as i0 from "@angular/core";
|
|
6
|
+
import * as i1 from "./toggle-button-tab-stop.directive";
|
|
7
|
+
export declare class ToggleButtonTabStopModule {
|
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ToggleButtonTabStopModule, never>;
|
|
9
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<ToggleButtonTabStopModule, [typeof i1.ToggleButtonTabStopDirective], never, [typeof i1.ToggleButtonTabStopDirective]>;
|
|
10
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<ToggleButtonTabStopModule>;
|
|
11
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
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
|
+
export { ToggleButtonTabStopModule } from './toggle-button-tab-stop/toggle-button-tab-stop.module';
|
|
6
|
+
export { ToggleButtonTabStopDirective } from './toggle-button-tab-stop/toggle-button-tab-stop.directive';
|