@progress/kendo-angular-inputs 13.1.1-develop.1 → 13.2.0-develop.2
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 +2 -0
- package/esm2020/package-metadata.mjs +2 -2
- package/esm2020/switch/events/blur-event.mjs +9 -0
- package/esm2020/switch/events/focus-event.mjs +9 -0
- package/esm2020/switch/switch.component.mjs +65 -50
- package/fesm2015/progress-kendo-angular-inputs.mjs +80 -51
- package/fesm2020/progress-kendo-angular-inputs.mjs +80 -51
- package/index.d.ts +2 -0
- package/package.json +10 -10
- package/switch/events/blur-event.d.ts +13 -0
- package/switch/events/focus-event.d.ts +13 -0
- package/switch/switch.component.d.ts +16 -9
package/esm2020/index.mjs
CHANGED
|
@@ -22,6 +22,8 @@ export { TextBoxModule } from './textbox.module';
|
|
|
22
22
|
export { TextAreaModule } from './textarea.module';
|
|
23
23
|
export { CheckBoxModule } from './checkbox.module';
|
|
24
24
|
export { RadioButtonModule } from './radiobutton.module';
|
|
25
|
+
export { SwitchBlurEvent } from './switch/events/blur-event';
|
|
26
|
+
export { SwitchFocusEvent } from './switch/events/focus-event';
|
|
25
27
|
// All ColorPicker Components
|
|
26
28
|
export { ColorPickerComponent } from './colorpicker/colorpicker.component';
|
|
27
29
|
export { ColorPaletteComponent } from './colorpicker/color-palette.component';
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-inputs',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '13.
|
|
12
|
+
publishDate: 1688401227,
|
|
13
|
+
version: '13.2.0-develop.2',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
/**
|
|
6
|
+
* Arguments for the `blur` event of the Switch component.
|
|
7
|
+
*/
|
|
8
|
+
export class SwitchBlurEvent {
|
|
9
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
/**
|
|
6
|
+
* Arguments for the `focus` event of the Switch component.
|
|
7
|
+
*/
|
|
8
|
+
export class SwitchFocusEvent {
|
|
9
|
+
}
|
|
@@ -9,13 +9,11 @@ import { hasObservers, guid, Keys, KendoInput } from '@progress/kendo-angular-co
|
|
|
9
9
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
10
|
import { packageMetadata } from '../package-metadata';
|
|
11
11
|
import { requiresZoneOnBlur, getStylingClasses } from '../common/utils';
|
|
12
|
-
import { Subscription } from "rxjs";
|
|
13
12
|
import { skip, take } from "rxjs/operators";
|
|
14
13
|
import { browser } from '@progress/kendo-common';
|
|
15
14
|
import * as i0 from "@angular/core";
|
|
16
15
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
17
16
|
import * as i2 from "./localization/localized-switch-messages.directive";
|
|
18
|
-
import * as i3 from "@progress/kendo-angular-common";
|
|
19
17
|
const FOCUSED = 'k-focus';
|
|
20
18
|
const DEFAULT_SIZE = 'medium';
|
|
21
19
|
const DEFAULT_THUMB_ROUNDED = 'full';
|
|
@@ -31,10 +29,6 @@ export class SwitchComponent {
|
|
|
31
29
|
this.injector = injector;
|
|
32
30
|
this.changeDetector = changeDetector;
|
|
33
31
|
this.ngZone = ngZone;
|
|
34
|
-
/**
|
|
35
|
-
* @hidden
|
|
36
|
-
*/
|
|
37
|
-
this.focusableId = `k-${guid()}`;
|
|
38
32
|
/**
|
|
39
33
|
* Determines whether the Switch is disabled ([see example]({% slug disabled_switch %})).
|
|
40
34
|
*/
|
|
@@ -48,23 +42,24 @@ export class SwitchComponent {
|
|
|
48
42
|
*/
|
|
49
43
|
this.tabindex = 0;
|
|
50
44
|
/**
|
|
51
|
-
* Fires each time the
|
|
45
|
+
* Fires each time the Switch component is focused as a result of user interaction.
|
|
52
46
|
*/
|
|
53
47
|
this.onFocus = new EventEmitter();
|
|
54
48
|
/**
|
|
55
|
-
* Fires each time the
|
|
49
|
+
* Fires each time the Switch component is blurred as a result of user interaction.
|
|
56
50
|
*/
|
|
57
51
|
this.onBlur = new EventEmitter();
|
|
58
52
|
/**
|
|
59
53
|
* Fires each time the user selects a new value.
|
|
60
54
|
*/
|
|
61
55
|
this.valueChange = new EventEmitter();
|
|
56
|
+
this.hostRole = 'switch';
|
|
62
57
|
this.hostClasses = true;
|
|
63
58
|
/**
|
|
64
59
|
* @hidden
|
|
65
60
|
*/
|
|
66
61
|
this.initialized = false;
|
|
67
|
-
this.
|
|
62
|
+
this.domSubscriptions = [];
|
|
68
63
|
this._checked = false;
|
|
69
64
|
this._size = 'medium';
|
|
70
65
|
this._trackRounded = 'full';
|
|
@@ -74,14 +69,16 @@ export class SwitchComponent {
|
|
|
74
69
|
/**
|
|
75
70
|
* @hidden
|
|
76
71
|
*/
|
|
77
|
-
this.handleFocus = () => {
|
|
72
|
+
this.handleFocus = (event) => {
|
|
78
73
|
if (this.isFocused) {
|
|
79
74
|
return;
|
|
80
75
|
}
|
|
76
|
+
event.stopImmediatePropagation();
|
|
81
77
|
this.focused = true;
|
|
82
78
|
if (hasObservers(this.onFocus)) {
|
|
83
79
|
this.ngZone.run(() => {
|
|
84
|
-
|
|
80
|
+
const eventArgs = { originalEvent: event };
|
|
81
|
+
this.onFocus.emit(eventArgs);
|
|
85
82
|
});
|
|
86
83
|
}
|
|
87
84
|
};
|
|
@@ -93,12 +90,14 @@ export class SwitchComponent {
|
|
|
93
90
|
if (this.hostElement.nativeElement.contains(relatedTarget)) {
|
|
94
91
|
return;
|
|
95
92
|
}
|
|
93
|
+
event.stopImmediatePropagation();
|
|
96
94
|
this.changeDetector.markForCheck();
|
|
97
95
|
this.focused = false;
|
|
98
96
|
if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
|
|
99
97
|
this.ngZone.run(() => {
|
|
100
98
|
this.ngTouched();
|
|
101
|
-
|
|
99
|
+
const eventArgs = { originalEvent: event };
|
|
100
|
+
this.onBlur.emit(eventArgs);
|
|
102
101
|
});
|
|
103
102
|
}
|
|
104
103
|
};
|
|
@@ -107,6 +106,15 @@ export class SwitchComponent {
|
|
|
107
106
|
this.keyDownHandler = this.keyDownHandler.bind(this);
|
|
108
107
|
this.clickHandler = this.clickHandler.bind(this);
|
|
109
108
|
}
|
|
109
|
+
/**
|
|
110
|
+
* @hidden
|
|
111
|
+
*/
|
|
112
|
+
get focusableId() {
|
|
113
|
+
if (this.hostElement.nativeElement.hasAttribute('id')) {
|
|
114
|
+
return this.hostElement.nativeElement.getAttribute('id');
|
|
115
|
+
}
|
|
116
|
+
return `k-${guid()}`;
|
|
117
|
+
}
|
|
110
118
|
/**
|
|
111
119
|
* Sets the value of the Switch when it is initially displayed.
|
|
112
120
|
*/
|
|
@@ -182,6 +190,18 @@ export class SwitchComponent {
|
|
|
182
190
|
get ieClass() {
|
|
183
191
|
return browser && browser.msie;
|
|
184
192
|
}
|
|
193
|
+
get hostId() {
|
|
194
|
+
return this.focusableId;
|
|
195
|
+
}
|
|
196
|
+
get ariaChecked() {
|
|
197
|
+
return this.checked;
|
|
198
|
+
}
|
|
199
|
+
get ariaInvalid() {
|
|
200
|
+
return this.isControlInvalid ? true : undefined;
|
|
201
|
+
}
|
|
202
|
+
get hostTabIndex() {
|
|
203
|
+
return this.disabled ? undefined : this.tabIndex;
|
|
204
|
+
}
|
|
185
205
|
get ariaDisabled() {
|
|
186
206
|
return this.disabled ? true : undefined;
|
|
187
207
|
}
|
|
@@ -222,21 +242,22 @@ export class SwitchComponent {
|
|
|
222
242
|
}
|
|
223
243
|
ngAfterViewInit() {
|
|
224
244
|
const wrapper = this.hostElement.nativeElement;
|
|
225
|
-
this.attachHostClickHandler();
|
|
226
245
|
if (!this.checked && !wrapper.classList.contains('k-switch-off')) {
|
|
227
246
|
this.renderer.addClass(wrapper, 'k-switch-off');
|
|
228
247
|
}
|
|
229
248
|
this.handleClasses(this.size, 'size');
|
|
230
249
|
this.handleTrackClasses(this.trackRounded);
|
|
231
250
|
this.handleThumbClasses(this.thumbRounded);
|
|
251
|
+
this.attachHostHandlers();
|
|
232
252
|
}
|
|
233
253
|
ngOnDestroy() {
|
|
234
254
|
if (this.localizationChangeSubscription) {
|
|
235
255
|
this.localizationChangeSubscription.unsubscribe();
|
|
236
256
|
}
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
257
|
+
this.domSubscriptions.forEach(subscription => subscription());
|
|
258
|
+
const wrapper = this.hostElement.nativeElement;
|
|
259
|
+
wrapper.removeEventListener('focus', this.handleFocus, true);
|
|
260
|
+
wrapper.removeEventListener('blur', this.handleBlur, true);
|
|
240
261
|
}
|
|
241
262
|
/**
|
|
242
263
|
* Focuses the Switch.
|
|
@@ -254,19 +275,19 @@ export class SwitchComponent {
|
|
|
254
275
|
* ```
|
|
255
276
|
*/
|
|
256
277
|
focus() {
|
|
257
|
-
if (!this.
|
|
278
|
+
if (!this.hostElement) {
|
|
258
279
|
return;
|
|
259
280
|
}
|
|
260
|
-
this.
|
|
281
|
+
this.hostElement.nativeElement.focus();
|
|
261
282
|
}
|
|
262
283
|
/**
|
|
263
284
|
* Blurs the Switch.
|
|
264
285
|
*/
|
|
265
286
|
blur() {
|
|
266
|
-
if (!this.
|
|
287
|
+
if (!this.hostElement) {
|
|
267
288
|
return;
|
|
268
289
|
}
|
|
269
|
-
this.
|
|
290
|
+
this.hostElement.nativeElement.blur();
|
|
270
291
|
}
|
|
271
292
|
/**
|
|
272
293
|
* @hidden
|
|
@@ -349,9 +370,12 @@ export class SwitchComponent {
|
|
|
349
370
|
this.isFocused = value;
|
|
350
371
|
}
|
|
351
372
|
}
|
|
352
|
-
|
|
373
|
+
attachHostHandlers() {
|
|
353
374
|
this.ngZone.runOutsideAngular(() => {
|
|
354
|
-
this.
|
|
375
|
+
const wrapper = this.hostElement.nativeElement;
|
|
376
|
+
this.domSubscriptions.push(this.renderer.listen(wrapper, 'click', this.clickHandler), this.renderer.listen(wrapper, 'keydown', this.keyDownHandler));
|
|
377
|
+
wrapper.addEventListener('focus', this.handleFocus, true);
|
|
378
|
+
wrapper.addEventListener('blur', this.handleBlur, true);
|
|
355
379
|
});
|
|
356
380
|
}
|
|
357
381
|
setHostClasses(value) {
|
|
@@ -406,7 +430,7 @@ export class SwitchComponent {
|
|
|
406
430
|
}
|
|
407
431
|
}
|
|
408
432
|
SwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
409
|
-
SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SwitchComponent, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-ie": "this.ieClass", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
|
|
433
|
+
SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SwitchComponent, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-ie": "this.ieClass", "attr.role": "this.hostRole", "attr.id": "this.hostId", "attr.aria-checked": "this.ariaChecked", "attr.aria-invalid": "this.ariaInvalid", "attr.tabindex": "this.hostTabIndex", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
|
|
410
434
|
LocalizationService,
|
|
411
435
|
{ provide: L10N_PREFIX, useValue: 'kendo.switch' },
|
|
412
436
|
{
|
|
@@ -429,29 +453,17 @@ SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
429
453
|
<span
|
|
430
454
|
#track
|
|
431
455
|
class="k-switch-track"
|
|
432
|
-
[id]="focusableId"
|
|
433
|
-
role="switch"
|
|
434
456
|
[style.transitionDuration]="initialized ? '200ms' : '0ms'"
|
|
435
|
-
[attr.aria-checked]="checked"
|
|
436
|
-
[attr.tabindex]="(disabled ? undefined : tabIndex)"
|
|
437
|
-
[attr.aria-disabled]="disabled"
|
|
438
|
-
[attr.aria-invalid]="isControlInvalid"
|
|
439
|
-
[kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
|
|
440
457
|
>
|
|
441
458
|
<span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>
|
|
442
459
|
<span class="k-switch-label-off" [attr.aria-hidden]="true">{{offLabelMessage}}</span>
|
|
443
460
|
</span>
|
|
444
461
|
<span
|
|
445
462
|
class="k-switch-thumb-wrap"
|
|
446
|
-
|
|
447
|
-
[style.transitionDuration]="initialized ? '200ms' : '0ms'" [kendoEventsOutsideAngular]="{
|
|
448
|
-
keydown: keyDownHandler,
|
|
449
|
-
focus: handleFocus,
|
|
450
|
-
blur: handleBlur
|
|
451
|
-
}">
|
|
463
|
+
[style.transitionDuration]="initialized ? '200ms' : '0ms'">
|
|
452
464
|
<span #thumb class="k-switch-thumb"></span>
|
|
453
465
|
</span>
|
|
454
|
-
`, isInline: true, directives: [{ type: i2.LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]" }
|
|
466
|
+
`, isInline: true, directives: [{ type: i2.LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]" }] });
|
|
455
467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
456
468
|
type: Component,
|
|
457
469
|
args: [{
|
|
@@ -481,26 +493,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
481
493
|
<span
|
|
482
494
|
#track
|
|
483
495
|
class="k-switch-track"
|
|
484
|
-
[id]="focusableId"
|
|
485
|
-
role="switch"
|
|
486
496
|
[style.transitionDuration]="initialized ? '200ms' : '0ms'"
|
|
487
|
-
[attr.aria-checked]="checked"
|
|
488
|
-
[attr.tabindex]="(disabled ? undefined : tabIndex)"
|
|
489
|
-
[attr.aria-disabled]="disabled"
|
|
490
|
-
[attr.aria-invalid]="isControlInvalid"
|
|
491
|
-
[kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
|
|
492
497
|
>
|
|
493
498
|
<span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>
|
|
494
499
|
<span class="k-switch-label-off" [attr.aria-hidden]="true">{{offLabelMessage}}</span>
|
|
495
500
|
</span>
|
|
496
501
|
<span
|
|
497
502
|
class="k-switch-thumb-wrap"
|
|
498
|
-
|
|
499
|
-
[style.transitionDuration]="initialized ? '200ms' : '0ms'" [kendoEventsOutsideAngular]="{
|
|
500
|
-
keydown: keyDownHandler,
|
|
501
|
-
focus: handleFocus,
|
|
502
|
-
blur: handleBlur
|
|
503
|
-
}">
|
|
503
|
+
[style.transitionDuration]="initialized ? '200ms' : '0ms'">
|
|
504
504
|
<span #thumb class="k-switch-thumb"></span>
|
|
505
505
|
</span>
|
|
506
506
|
`
|
|
@@ -541,6 +541,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
541
541
|
}], ieClass: [{
|
|
542
542
|
type: HostBinding,
|
|
543
543
|
args: ['class.k-ie']
|
|
544
|
+
}], hostRole: [{
|
|
545
|
+
type: HostBinding,
|
|
546
|
+
args: ['attr.role']
|
|
547
|
+
}], hostId: [{
|
|
548
|
+
type: HostBinding,
|
|
549
|
+
args: ['attr.id']
|
|
550
|
+
}], ariaChecked: [{
|
|
551
|
+
type: HostBinding,
|
|
552
|
+
args: ['attr.aria-checked']
|
|
553
|
+
}], ariaInvalid: [{
|
|
554
|
+
type: HostBinding,
|
|
555
|
+
args: ['attr.aria-invalid']
|
|
556
|
+
}], hostTabIndex: [{
|
|
557
|
+
type: HostBinding,
|
|
558
|
+
args: ['attr.tabindex']
|
|
544
559
|
}], ariaDisabled: [{
|
|
545
560
|
type: HostBinding,
|
|
546
561
|
args: ['attr.aria-disabled']
|
|
@@ -539,8 +539,8 @@ const packageMetadata = {
|
|
|
539
539
|
name: '@progress/kendo-angular-inputs',
|
|
540
540
|
productName: 'Kendo UI for Angular',
|
|
541
541
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
542
|
-
publishDate:
|
|
543
|
-
version: '13.
|
|
542
|
+
publishDate: 1688401227,
|
|
543
|
+
version: '13.2.0-develop.2',
|
|
544
544
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
545
545
|
};
|
|
546
546
|
|
|
@@ -2360,10 +2360,6 @@ class SwitchComponent {
|
|
|
2360
2360
|
this.injector = injector;
|
|
2361
2361
|
this.changeDetector = changeDetector;
|
|
2362
2362
|
this.ngZone = ngZone;
|
|
2363
|
-
/**
|
|
2364
|
-
* @hidden
|
|
2365
|
-
*/
|
|
2366
|
-
this.focusableId = `k-${guid()}`;
|
|
2367
2363
|
/**
|
|
2368
2364
|
* Determines whether the Switch is disabled ([see example]({% slug disabled_switch %})).
|
|
2369
2365
|
*/
|
|
@@ -2377,23 +2373,24 @@ class SwitchComponent {
|
|
|
2377
2373
|
*/
|
|
2378
2374
|
this.tabindex = 0;
|
|
2379
2375
|
/**
|
|
2380
|
-
* Fires each time the
|
|
2376
|
+
* Fires each time the Switch component is focused as a result of user interaction.
|
|
2381
2377
|
*/
|
|
2382
2378
|
this.onFocus = new EventEmitter();
|
|
2383
2379
|
/**
|
|
2384
|
-
* Fires each time the
|
|
2380
|
+
* Fires each time the Switch component is blurred as a result of user interaction.
|
|
2385
2381
|
*/
|
|
2386
2382
|
this.onBlur = new EventEmitter();
|
|
2387
2383
|
/**
|
|
2388
2384
|
* Fires each time the user selects a new value.
|
|
2389
2385
|
*/
|
|
2390
2386
|
this.valueChange = new EventEmitter();
|
|
2387
|
+
this.hostRole = 'switch';
|
|
2391
2388
|
this.hostClasses = true;
|
|
2392
2389
|
/**
|
|
2393
2390
|
* @hidden
|
|
2394
2391
|
*/
|
|
2395
2392
|
this.initialized = false;
|
|
2396
|
-
this.
|
|
2393
|
+
this.domSubscriptions = [];
|
|
2397
2394
|
this._checked = false;
|
|
2398
2395
|
this._size = 'medium';
|
|
2399
2396
|
this._trackRounded = 'full';
|
|
@@ -2403,14 +2400,16 @@ class SwitchComponent {
|
|
|
2403
2400
|
/**
|
|
2404
2401
|
* @hidden
|
|
2405
2402
|
*/
|
|
2406
|
-
this.handleFocus = () => {
|
|
2403
|
+
this.handleFocus = (event) => {
|
|
2407
2404
|
if (this.isFocused) {
|
|
2408
2405
|
return;
|
|
2409
2406
|
}
|
|
2407
|
+
event.stopImmediatePropagation();
|
|
2410
2408
|
this.focused = true;
|
|
2411
2409
|
if (hasObservers(this.onFocus)) {
|
|
2412
2410
|
this.ngZone.run(() => {
|
|
2413
|
-
|
|
2411
|
+
const eventArgs = { originalEvent: event };
|
|
2412
|
+
this.onFocus.emit(eventArgs);
|
|
2414
2413
|
});
|
|
2415
2414
|
}
|
|
2416
2415
|
};
|
|
@@ -2422,12 +2421,14 @@ class SwitchComponent {
|
|
|
2422
2421
|
if (this.hostElement.nativeElement.contains(relatedTarget)) {
|
|
2423
2422
|
return;
|
|
2424
2423
|
}
|
|
2424
|
+
event.stopImmediatePropagation();
|
|
2425
2425
|
this.changeDetector.markForCheck();
|
|
2426
2426
|
this.focused = false;
|
|
2427
2427
|
if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
|
|
2428
2428
|
this.ngZone.run(() => {
|
|
2429
2429
|
this.ngTouched();
|
|
2430
|
-
|
|
2430
|
+
const eventArgs = { originalEvent: event };
|
|
2431
|
+
this.onBlur.emit(eventArgs);
|
|
2431
2432
|
});
|
|
2432
2433
|
}
|
|
2433
2434
|
};
|
|
@@ -2436,6 +2437,15 @@ class SwitchComponent {
|
|
|
2436
2437
|
this.keyDownHandler = this.keyDownHandler.bind(this);
|
|
2437
2438
|
this.clickHandler = this.clickHandler.bind(this);
|
|
2438
2439
|
}
|
|
2440
|
+
/**
|
|
2441
|
+
* @hidden
|
|
2442
|
+
*/
|
|
2443
|
+
get focusableId() {
|
|
2444
|
+
if (this.hostElement.nativeElement.hasAttribute('id')) {
|
|
2445
|
+
return this.hostElement.nativeElement.getAttribute('id');
|
|
2446
|
+
}
|
|
2447
|
+
return `k-${guid()}`;
|
|
2448
|
+
}
|
|
2439
2449
|
/**
|
|
2440
2450
|
* Sets the value of the Switch when it is initially displayed.
|
|
2441
2451
|
*/
|
|
@@ -2511,6 +2521,18 @@ class SwitchComponent {
|
|
|
2511
2521
|
get ieClass() {
|
|
2512
2522
|
return browser && browser.msie;
|
|
2513
2523
|
}
|
|
2524
|
+
get hostId() {
|
|
2525
|
+
return this.focusableId;
|
|
2526
|
+
}
|
|
2527
|
+
get ariaChecked() {
|
|
2528
|
+
return this.checked;
|
|
2529
|
+
}
|
|
2530
|
+
get ariaInvalid() {
|
|
2531
|
+
return this.isControlInvalid ? true : undefined;
|
|
2532
|
+
}
|
|
2533
|
+
get hostTabIndex() {
|
|
2534
|
+
return this.disabled ? undefined : this.tabIndex;
|
|
2535
|
+
}
|
|
2514
2536
|
get ariaDisabled() {
|
|
2515
2537
|
return this.disabled ? true : undefined;
|
|
2516
2538
|
}
|
|
@@ -2551,21 +2573,22 @@ class SwitchComponent {
|
|
|
2551
2573
|
}
|
|
2552
2574
|
ngAfterViewInit() {
|
|
2553
2575
|
const wrapper = this.hostElement.nativeElement;
|
|
2554
|
-
this.attachHostClickHandler();
|
|
2555
2576
|
if (!this.checked && !wrapper.classList.contains('k-switch-off')) {
|
|
2556
2577
|
this.renderer.addClass(wrapper, 'k-switch-off');
|
|
2557
2578
|
}
|
|
2558
2579
|
this.handleClasses(this.size, 'size');
|
|
2559
2580
|
this.handleTrackClasses(this.trackRounded);
|
|
2560
2581
|
this.handleThumbClasses(this.thumbRounded);
|
|
2582
|
+
this.attachHostHandlers();
|
|
2561
2583
|
}
|
|
2562
2584
|
ngOnDestroy() {
|
|
2563
2585
|
if (this.localizationChangeSubscription) {
|
|
2564
2586
|
this.localizationChangeSubscription.unsubscribe();
|
|
2565
2587
|
}
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2588
|
+
this.domSubscriptions.forEach(subscription => subscription());
|
|
2589
|
+
const wrapper = this.hostElement.nativeElement;
|
|
2590
|
+
wrapper.removeEventListener('focus', this.handleFocus, true);
|
|
2591
|
+
wrapper.removeEventListener('blur', this.handleBlur, true);
|
|
2569
2592
|
}
|
|
2570
2593
|
/**
|
|
2571
2594
|
* Focuses the Switch.
|
|
@@ -2583,19 +2606,19 @@ class SwitchComponent {
|
|
|
2583
2606
|
* ```
|
|
2584
2607
|
*/
|
|
2585
2608
|
focus() {
|
|
2586
|
-
if (!this.
|
|
2609
|
+
if (!this.hostElement) {
|
|
2587
2610
|
return;
|
|
2588
2611
|
}
|
|
2589
|
-
this.
|
|
2612
|
+
this.hostElement.nativeElement.focus();
|
|
2590
2613
|
}
|
|
2591
2614
|
/**
|
|
2592
2615
|
* Blurs the Switch.
|
|
2593
2616
|
*/
|
|
2594
2617
|
blur() {
|
|
2595
|
-
if (!this.
|
|
2618
|
+
if (!this.hostElement) {
|
|
2596
2619
|
return;
|
|
2597
2620
|
}
|
|
2598
|
-
this.
|
|
2621
|
+
this.hostElement.nativeElement.blur();
|
|
2599
2622
|
}
|
|
2600
2623
|
/**
|
|
2601
2624
|
* @hidden
|
|
@@ -2678,9 +2701,12 @@ class SwitchComponent {
|
|
|
2678
2701
|
this.isFocused = value;
|
|
2679
2702
|
}
|
|
2680
2703
|
}
|
|
2681
|
-
|
|
2704
|
+
attachHostHandlers() {
|
|
2682
2705
|
this.ngZone.runOutsideAngular(() => {
|
|
2683
|
-
this.
|
|
2706
|
+
const wrapper = this.hostElement.nativeElement;
|
|
2707
|
+
this.domSubscriptions.push(this.renderer.listen(wrapper, 'click', this.clickHandler), this.renderer.listen(wrapper, 'keydown', this.keyDownHandler));
|
|
2708
|
+
wrapper.addEventListener('focus', this.handleFocus, true);
|
|
2709
|
+
wrapper.addEventListener('blur', this.handleBlur, true);
|
|
2684
2710
|
});
|
|
2685
2711
|
}
|
|
2686
2712
|
setHostClasses(value) {
|
|
@@ -2737,7 +2763,7 @@ class SwitchComponent {
|
|
|
2737
2763
|
}
|
|
2738
2764
|
}
|
|
2739
2765
|
SwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2740
|
-
SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SwitchComponent, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-ie": "this.ieClass", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
|
|
2766
|
+
SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SwitchComponent, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-ie": "this.ieClass", "attr.role": "this.hostRole", "attr.id": "this.hostId", "attr.aria-checked": "this.ariaChecked", "attr.aria-invalid": "this.ariaInvalid", "attr.tabindex": "this.hostTabIndex", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
|
|
2741
2767
|
LocalizationService,
|
|
2742
2768
|
{ provide: L10N_PREFIX, useValue: 'kendo.switch' },
|
|
2743
2769
|
{
|
|
@@ -2760,29 +2786,17 @@ SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
2760
2786
|
<span
|
|
2761
2787
|
#track
|
|
2762
2788
|
class="k-switch-track"
|
|
2763
|
-
[id]="focusableId"
|
|
2764
|
-
role="switch"
|
|
2765
2789
|
[style.transitionDuration]="initialized ? '200ms' : '0ms'"
|
|
2766
|
-
[attr.aria-checked]="checked"
|
|
2767
|
-
[attr.tabindex]="(disabled ? undefined : tabIndex)"
|
|
2768
|
-
[attr.aria-disabled]="disabled"
|
|
2769
|
-
[attr.aria-invalid]="isControlInvalid"
|
|
2770
|
-
[kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
|
|
2771
2790
|
>
|
|
2772
2791
|
<span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>
|
|
2773
2792
|
<span class="k-switch-label-off" [attr.aria-hidden]="true">{{offLabelMessage}}</span>
|
|
2774
2793
|
</span>
|
|
2775
2794
|
<span
|
|
2776
2795
|
class="k-switch-thumb-wrap"
|
|
2777
|
-
|
|
2778
|
-
[style.transitionDuration]="initialized ? '200ms' : '0ms'" [kendoEventsOutsideAngular]="{
|
|
2779
|
-
keydown: keyDownHandler,
|
|
2780
|
-
focus: handleFocus,
|
|
2781
|
-
blur: handleBlur
|
|
2782
|
-
}">
|
|
2796
|
+
[style.transitionDuration]="initialized ? '200ms' : '0ms'">
|
|
2783
2797
|
<span #thumb class="k-switch-thumb"></span>
|
|
2784
2798
|
</span>
|
|
2785
|
-
`, isInline: true, directives: [{ type: LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]" }
|
|
2799
|
+
`, isInline: true, directives: [{ type: LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]" }] });
|
|
2786
2800
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
2787
2801
|
type: Component,
|
|
2788
2802
|
args: [{
|
|
@@ -2812,26 +2826,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
2812
2826
|
<span
|
|
2813
2827
|
#track
|
|
2814
2828
|
class="k-switch-track"
|
|
2815
|
-
[id]="focusableId"
|
|
2816
|
-
role="switch"
|
|
2817
2829
|
[style.transitionDuration]="initialized ? '200ms' : '0ms'"
|
|
2818
|
-
[attr.aria-checked]="checked"
|
|
2819
|
-
[attr.tabindex]="(disabled ? undefined : tabIndex)"
|
|
2820
|
-
[attr.aria-disabled]="disabled"
|
|
2821
|
-
[attr.aria-invalid]="isControlInvalid"
|
|
2822
|
-
[kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
|
|
2823
2830
|
>
|
|
2824
2831
|
<span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>
|
|
2825
2832
|
<span class="k-switch-label-off" [attr.aria-hidden]="true">{{offLabelMessage}}</span>
|
|
2826
2833
|
</span>
|
|
2827
2834
|
<span
|
|
2828
2835
|
class="k-switch-thumb-wrap"
|
|
2829
|
-
|
|
2830
|
-
[style.transitionDuration]="initialized ? '200ms' : '0ms'" [kendoEventsOutsideAngular]="{
|
|
2831
|
-
keydown: keyDownHandler,
|
|
2832
|
-
focus: handleFocus,
|
|
2833
|
-
blur: handleBlur
|
|
2834
|
-
}">
|
|
2836
|
+
[style.transitionDuration]="initialized ? '200ms' : '0ms'">
|
|
2835
2837
|
<span #thumb class="k-switch-thumb"></span>
|
|
2836
2838
|
</span>
|
|
2837
2839
|
`
|
|
@@ -2872,6 +2874,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
2872
2874
|
}], ieClass: [{
|
|
2873
2875
|
type: HostBinding,
|
|
2874
2876
|
args: ['class.k-ie']
|
|
2877
|
+
}], hostRole: [{
|
|
2878
|
+
type: HostBinding,
|
|
2879
|
+
args: ['attr.role']
|
|
2880
|
+
}], hostId: [{
|
|
2881
|
+
type: HostBinding,
|
|
2882
|
+
args: ['attr.id']
|
|
2883
|
+
}], ariaChecked: [{
|
|
2884
|
+
type: HostBinding,
|
|
2885
|
+
args: ['attr.aria-checked']
|
|
2886
|
+
}], ariaInvalid: [{
|
|
2887
|
+
type: HostBinding,
|
|
2888
|
+
args: ['attr.aria-invalid']
|
|
2889
|
+
}], hostTabIndex: [{
|
|
2890
|
+
type: HostBinding,
|
|
2891
|
+
args: ['attr.tabindex']
|
|
2875
2892
|
}], ariaDisabled: [{
|
|
2876
2893
|
type: HostBinding,
|
|
2877
2894
|
args: ['attr.aria-disabled']
|
|
@@ -15053,9 +15070,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
15053
15070
|
}]
|
|
15054
15071
|
}] });
|
|
15055
15072
|
|
|
15073
|
+
/**
|
|
15074
|
+
* Arguments for the `blur` event of the Switch component.
|
|
15075
|
+
*/
|
|
15076
|
+
class SwitchBlurEvent {
|
|
15077
|
+
}
|
|
15078
|
+
|
|
15079
|
+
/**
|
|
15080
|
+
* Arguments for the `focus` event of the Switch component.
|
|
15081
|
+
*/
|
|
15082
|
+
class SwitchFocusEvent {
|
|
15083
|
+
}
|
|
15084
|
+
|
|
15056
15085
|
/**
|
|
15057
15086
|
* Generated bundle index. Do not edit.
|
|
15058
15087
|
*/
|
|
15059
15088
|
|
|
15060
|
-
export { ActiveColorClickEvent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchComponent, SwitchCustomMessagesComponent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
|
|
15089
|
+
export { ActiveColorClickEvent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
|
|
15061
15090
|
|
|
@@ -538,8 +538,8 @@ const packageMetadata = {
|
|
|
538
538
|
name: '@progress/kendo-angular-inputs',
|
|
539
539
|
productName: 'Kendo UI for Angular',
|
|
540
540
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
541
|
-
publishDate:
|
|
542
|
-
version: '13.
|
|
541
|
+
publishDate: 1688401227,
|
|
542
|
+
version: '13.2.0-develop.2',
|
|
543
543
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
544
544
|
};
|
|
545
545
|
|
|
@@ -2357,10 +2357,6 @@ class SwitchComponent {
|
|
|
2357
2357
|
this.injector = injector;
|
|
2358
2358
|
this.changeDetector = changeDetector;
|
|
2359
2359
|
this.ngZone = ngZone;
|
|
2360
|
-
/**
|
|
2361
|
-
* @hidden
|
|
2362
|
-
*/
|
|
2363
|
-
this.focusableId = `k-${guid()}`;
|
|
2364
2360
|
/**
|
|
2365
2361
|
* Determines whether the Switch is disabled ([see example]({% slug disabled_switch %})).
|
|
2366
2362
|
*/
|
|
@@ -2374,23 +2370,24 @@ class SwitchComponent {
|
|
|
2374
2370
|
*/
|
|
2375
2371
|
this.tabindex = 0;
|
|
2376
2372
|
/**
|
|
2377
|
-
* Fires each time the
|
|
2373
|
+
* Fires each time the Switch component is focused as a result of user interaction.
|
|
2378
2374
|
*/
|
|
2379
2375
|
this.onFocus = new EventEmitter();
|
|
2380
2376
|
/**
|
|
2381
|
-
* Fires each time the
|
|
2377
|
+
* Fires each time the Switch component is blurred as a result of user interaction.
|
|
2382
2378
|
*/
|
|
2383
2379
|
this.onBlur = new EventEmitter();
|
|
2384
2380
|
/**
|
|
2385
2381
|
* Fires each time the user selects a new value.
|
|
2386
2382
|
*/
|
|
2387
2383
|
this.valueChange = new EventEmitter();
|
|
2384
|
+
this.hostRole = 'switch';
|
|
2388
2385
|
this.hostClasses = true;
|
|
2389
2386
|
/**
|
|
2390
2387
|
* @hidden
|
|
2391
2388
|
*/
|
|
2392
2389
|
this.initialized = false;
|
|
2393
|
-
this.
|
|
2390
|
+
this.domSubscriptions = [];
|
|
2394
2391
|
this._checked = false;
|
|
2395
2392
|
this._size = 'medium';
|
|
2396
2393
|
this._trackRounded = 'full';
|
|
@@ -2400,14 +2397,16 @@ class SwitchComponent {
|
|
|
2400
2397
|
/**
|
|
2401
2398
|
* @hidden
|
|
2402
2399
|
*/
|
|
2403
|
-
this.handleFocus = () => {
|
|
2400
|
+
this.handleFocus = (event) => {
|
|
2404
2401
|
if (this.isFocused) {
|
|
2405
2402
|
return;
|
|
2406
2403
|
}
|
|
2404
|
+
event.stopImmediatePropagation();
|
|
2407
2405
|
this.focused = true;
|
|
2408
2406
|
if (hasObservers(this.onFocus)) {
|
|
2409
2407
|
this.ngZone.run(() => {
|
|
2410
|
-
|
|
2408
|
+
const eventArgs = { originalEvent: event };
|
|
2409
|
+
this.onFocus.emit(eventArgs);
|
|
2411
2410
|
});
|
|
2412
2411
|
}
|
|
2413
2412
|
};
|
|
@@ -2419,12 +2418,14 @@ class SwitchComponent {
|
|
|
2419
2418
|
if (this.hostElement.nativeElement.contains(relatedTarget)) {
|
|
2420
2419
|
return;
|
|
2421
2420
|
}
|
|
2421
|
+
event.stopImmediatePropagation();
|
|
2422
2422
|
this.changeDetector.markForCheck();
|
|
2423
2423
|
this.focused = false;
|
|
2424
2424
|
if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
|
|
2425
2425
|
this.ngZone.run(() => {
|
|
2426
2426
|
this.ngTouched();
|
|
2427
|
-
|
|
2427
|
+
const eventArgs = { originalEvent: event };
|
|
2428
|
+
this.onBlur.emit(eventArgs);
|
|
2428
2429
|
});
|
|
2429
2430
|
}
|
|
2430
2431
|
};
|
|
@@ -2433,6 +2434,15 @@ class SwitchComponent {
|
|
|
2433
2434
|
this.keyDownHandler = this.keyDownHandler.bind(this);
|
|
2434
2435
|
this.clickHandler = this.clickHandler.bind(this);
|
|
2435
2436
|
}
|
|
2437
|
+
/**
|
|
2438
|
+
* @hidden
|
|
2439
|
+
*/
|
|
2440
|
+
get focusableId() {
|
|
2441
|
+
if (this.hostElement.nativeElement.hasAttribute('id')) {
|
|
2442
|
+
return this.hostElement.nativeElement.getAttribute('id');
|
|
2443
|
+
}
|
|
2444
|
+
return `k-${guid()}`;
|
|
2445
|
+
}
|
|
2436
2446
|
/**
|
|
2437
2447
|
* Sets the value of the Switch when it is initially displayed.
|
|
2438
2448
|
*/
|
|
@@ -2508,6 +2518,18 @@ class SwitchComponent {
|
|
|
2508
2518
|
get ieClass() {
|
|
2509
2519
|
return browser && browser.msie;
|
|
2510
2520
|
}
|
|
2521
|
+
get hostId() {
|
|
2522
|
+
return this.focusableId;
|
|
2523
|
+
}
|
|
2524
|
+
get ariaChecked() {
|
|
2525
|
+
return this.checked;
|
|
2526
|
+
}
|
|
2527
|
+
get ariaInvalid() {
|
|
2528
|
+
return this.isControlInvalid ? true : undefined;
|
|
2529
|
+
}
|
|
2530
|
+
get hostTabIndex() {
|
|
2531
|
+
return this.disabled ? undefined : this.tabIndex;
|
|
2532
|
+
}
|
|
2511
2533
|
get ariaDisabled() {
|
|
2512
2534
|
return this.disabled ? true : undefined;
|
|
2513
2535
|
}
|
|
@@ -2548,21 +2570,22 @@ class SwitchComponent {
|
|
|
2548
2570
|
}
|
|
2549
2571
|
ngAfterViewInit() {
|
|
2550
2572
|
const wrapper = this.hostElement.nativeElement;
|
|
2551
|
-
this.attachHostClickHandler();
|
|
2552
2573
|
if (!this.checked && !wrapper.classList.contains('k-switch-off')) {
|
|
2553
2574
|
this.renderer.addClass(wrapper, 'k-switch-off');
|
|
2554
2575
|
}
|
|
2555
2576
|
this.handleClasses(this.size, 'size');
|
|
2556
2577
|
this.handleTrackClasses(this.trackRounded);
|
|
2557
2578
|
this.handleThumbClasses(this.thumbRounded);
|
|
2579
|
+
this.attachHostHandlers();
|
|
2558
2580
|
}
|
|
2559
2581
|
ngOnDestroy() {
|
|
2560
2582
|
if (this.localizationChangeSubscription) {
|
|
2561
2583
|
this.localizationChangeSubscription.unsubscribe();
|
|
2562
2584
|
}
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2585
|
+
this.domSubscriptions.forEach(subscription => subscription());
|
|
2586
|
+
const wrapper = this.hostElement.nativeElement;
|
|
2587
|
+
wrapper.removeEventListener('focus', this.handleFocus, true);
|
|
2588
|
+
wrapper.removeEventListener('blur', this.handleBlur, true);
|
|
2566
2589
|
}
|
|
2567
2590
|
/**
|
|
2568
2591
|
* Focuses the Switch.
|
|
@@ -2580,19 +2603,19 @@ class SwitchComponent {
|
|
|
2580
2603
|
* ```
|
|
2581
2604
|
*/
|
|
2582
2605
|
focus() {
|
|
2583
|
-
if (!this.
|
|
2606
|
+
if (!this.hostElement) {
|
|
2584
2607
|
return;
|
|
2585
2608
|
}
|
|
2586
|
-
this.
|
|
2609
|
+
this.hostElement.nativeElement.focus();
|
|
2587
2610
|
}
|
|
2588
2611
|
/**
|
|
2589
2612
|
* Blurs the Switch.
|
|
2590
2613
|
*/
|
|
2591
2614
|
blur() {
|
|
2592
|
-
if (!this.
|
|
2615
|
+
if (!this.hostElement) {
|
|
2593
2616
|
return;
|
|
2594
2617
|
}
|
|
2595
|
-
this.
|
|
2618
|
+
this.hostElement.nativeElement.blur();
|
|
2596
2619
|
}
|
|
2597
2620
|
/**
|
|
2598
2621
|
* @hidden
|
|
@@ -2675,9 +2698,12 @@ class SwitchComponent {
|
|
|
2675
2698
|
this.isFocused = value;
|
|
2676
2699
|
}
|
|
2677
2700
|
}
|
|
2678
|
-
|
|
2701
|
+
attachHostHandlers() {
|
|
2679
2702
|
this.ngZone.runOutsideAngular(() => {
|
|
2680
|
-
this.
|
|
2703
|
+
const wrapper = this.hostElement.nativeElement;
|
|
2704
|
+
this.domSubscriptions.push(this.renderer.listen(wrapper, 'click', this.clickHandler), this.renderer.listen(wrapper, 'keydown', this.keyDownHandler));
|
|
2705
|
+
wrapper.addEventListener('focus', this.handleFocus, true);
|
|
2706
|
+
wrapper.addEventListener('blur', this.handleBlur, true);
|
|
2681
2707
|
});
|
|
2682
2708
|
}
|
|
2683
2709
|
setHostClasses(value) {
|
|
@@ -2732,7 +2758,7 @@ class SwitchComponent {
|
|
|
2732
2758
|
}
|
|
2733
2759
|
}
|
|
2734
2760
|
SwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2735
|
-
SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SwitchComponent, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-ie": "this.ieClass", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
|
|
2761
|
+
SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SwitchComponent, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-ie": "this.ieClass", "attr.role": "this.hostRole", "attr.id": "this.hostId", "attr.aria-checked": "this.ariaChecked", "attr.aria-invalid": "this.ariaInvalid", "attr.tabindex": "this.hostTabIndex", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
|
|
2736
2762
|
LocalizationService,
|
|
2737
2763
|
{ provide: L10N_PREFIX, useValue: 'kendo.switch' },
|
|
2738
2764
|
{
|
|
@@ -2755,29 +2781,17 @@ SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
2755
2781
|
<span
|
|
2756
2782
|
#track
|
|
2757
2783
|
class="k-switch-track"
|
|
2758
|
-
[id]="focusableId"
|
|
2759
|
-
role="switch"
|
|
2760
2784
|
[style.transitionDuration]="initialized ? '200ms' : '0ms'"
|
|
2761
|
-
[attr.aria-checked]="checked"
|
|
2762
|
-
[attr.tabindex]="(disabled ? undefined : tabIndex)"
|
|
2763
|
-
[attr.aria-disabled]="disabled"
|
|
2764
|
-
[attr.aria-invalid]="isControlInvalid"
|
|
2765
|
-
[kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
|
|
2766
2785
|
>
|
|
2767
2786
|
<span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>
|
|
2768
2787
|
<span class="k-switch-label-off" [attr.aria-hidden]="true">{{offLabelMessage}}</span>
|
|
2769
2788
|
</span>
|
|
2770
2789
|
<span
|
|
2771
2790
|
class="k-switch-thumb-wrap"
|
|
2772
|
-
|
|
2773
|
-
[style.transitionDuration]="initialized ? '200ms' : '0ms'" [kendoEventsOutsideAngular]="{
|
|
2774
|
-
keydown: keyDownHandler,
|
|
2775
|
-
focus: handleFocus,
|
|
2776
|
-
blur: handleBlur
|
|
2777
|
-
}">
|
|
2791
|
+
[style.transitionDuration]="initialized ? '200ms' : '0ms'">
|
|
2778
2792
|
<span #thumb class="k-switch-thumb"></span>
|
|
2779
2793
|
</span>
|
|
2780
|
-
`, isInline: true, directives: [{ type: LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]" }
|
|
2794
|
+
`, isInline: true, directives: [{ type: LocalizedSwitchMessagesDirective, selector: "[kendoSwitchLocalizedMessages]" }] });
|
|
2781
2795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
2782
2796
|
type: Component,
|
|
2783
2797
|
args: [{
|
|
@@ -2807,26 +2821,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
2807
2821
|
<span
|
|
2808
2822
|
#track
|
|
2809
2823
|
class="k-switch-track"
|
|
2810
|
-
[id]="focusableId"
|
|
2811
|
-
role="switch"
|
|
2812
2824
|
[style.transitionDuration]="initialized ? '200ms' : '0ms'"
|
|
2813
|
-
[attr.aria-checked]="checked"
|
|
2814
|
-
[attr.tabindex]="(disabled ? undefined : tabIndex)"
|
|
2815
|
-
[attr.aria-disabled]="disabled"
|
|
2816
|
-
[attr.aria-invalid]="isControlInvalid"
|
|
2817
|
-
[kendoEventsOutsideAngular]="{ keydown: keyDownHandler, focus: handleFocus, blur: handleBlur }"
|
|
2818
2825
|
>
|
|
2819
2826
|
<span class="k-switch-label-on" [attr.aria-hidden]="true" >{{onLabelMessage}}</span>
|
|
2820
2827
|
<span class="k-switch-label-off" [attr.aria-hidden]="true">{{offLabelMessage}}</span>
|
|
2821
2828
|
</span>
|
|
2822
2829
|
<span
|
|
2823
2830
|
class="k-switch-thumb-wrap"
|
|
2824
|
-
|
|
2825
|
-
[style.transitionDuration]="initialized ? '200ms' : '0ms'" [kendoEventsOutsideAngular]="{
|
|
2826
|
-
keydown: keyDownHandler,
|
|
2827
|
-
focus: handleFocus,
|
|
2828
|
-
blur: handleBlur
|
|
2829
|
-
}">
|
|
2831
|
+
[style.transitionDuration]="initialized ? '200ms' : '0ms'">
|
|
2830
2832
|
<span #thumb class="k-switch-thumb"></span>
|
|
2831
2833
|
</span>
|
|
2832
2834
|
`
|
|
@@ -2867,6 +2869,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
2867
2869
|
}], ieClass: [{
|
|
2868
2870
|
type: HostBinding,
|
|
2869
2871
|
args: ['class.k-ie']
|
|
2872
|
+
}], hostRole: [{
|
|
2873
|
+
type: HostBinding,
|
|
2874
|
+
args: ['attr.role']
|
|
2875
|
+
}], hostId: [{
|
|
2876
|
+
type: HostBinding,
|
|
2877
|
+
args: ['attr.id']
|
|
2878
|
+
}], ariaChecked: [{
|
|
2879
|
+
type: HostBinding,
|
|
2880
|
+
args: ['attr.aria-checked']
|
|
2881
|
+
}], ariaInvalid: [{
|
|
2882
|
+
type: HostBinding,
|
|
2883
|
+
args: ['attr.aria-invalid']
|
|
2884
|
+
}], hostTabIndex: [{
|
|
2885
|
+
type: HostBinding,
|
|
2886
|
+
args: ['attr.tabindex']
|
|
2870
2887
|
}], ariaDisabled: [{
|
|
2871
2888
|
type: HostBinding,
|
|
2872
2889
|
args: ['attr.aria-disabled']
|
|
@@ -15018,9 +15035,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
15018
15035
|
}]
|
|
15019
15036
|
}] });
|
|
15020
15037
|
|
|
15038
|
+
/**
|
|
15039
|
+
* Arguments for the `blur` event of the Switch component.
|
|
15040
|
+
*/
|
|
15041
|
+
class SwitchBlurEvent {
|
|
15042
|
+
}
|
|
15043
|
+
|
|
15044
|
+
/**
|
|
15045
|
+
* Arguments for the `focus` event of the Switch component.
|
|
15046
|
+
*/
|
|
15047
|
+
class SwitchFocusEvent {
|
|
15048
|
+
}
|
|
15049
|
+
|
|
15021
15050
|
/**
|
|
15022
15051
|
* Generated bundle index. Do not edit.
|
|
15023
15052
|
*/
|
|
15024
15053
|
|
|
15025
|
-
export { ActiveColorClickEvent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchComponent, SwitchCustomMessagesComponent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
|
|
15054
|
+
export { ActiveColorClickEvent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
|
|
15026
15055
|
|
package/index.d.ts
CHANGED
|
@@ -23,6 +23,8 @@ export { TextBoxModule } from './textbox.module';
|
|
|
23
23
|
export { TextAreaModule } from './textarea.module';
|
|
24
24
|
export { CheckBoxModule } from './checkbox.module';
|
|
25
25
|
export { RadioButtonModule } from './radiobutton.module';
|
|
26
|
+
export { SwitchBlurEvent } from './switch/events/blur-event';
|
|
27
|
+
export { SwitchFocusEvent } from './switch/events/focus-event';
|
|
26
28
|
export { InputRounded, CheckBoxRounded, InputFillMode, InputSize } from './common/models';
|
|
27
29
|
export { ColorPickerComponent } from './colorpicker/colorpicker.component';
|
|
28
30
|
export { ColorPaletteComponent } from './colorpicker/color-palette.component';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-inputs",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.2.0-develop.2",
|
|
4
4
|
"description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -33,19 +33,19 @@
|
|
|
33
33
|
"@angular/platform-browser": "13 - 16",
|
|
34
34
|
"@progress/kendo-drawing": "^1.17.2",
|
|
35
35
|
"@progress/kendo-licensing": "^1.0.2",
|
|
36
|
-
"@progress/kendo-angular-buttons": "13.
|
|
37
|
-
"@progress/kendo-angular-common": "13.
|
|
38
|
-
"@progress/kendo-angular-dialog": "13.
|
|
39
|
-
"@progress/kendo-angular-intl": "13.
|
|
40
|
-
"@progress/kendo-angular-l10n": "13.
|
|
41
|
-
"@progress/kendo-angular-popup": "13.
|
|
42
|
-
"@progress/kendo-angular-icons": "13.
|
|
36
|
+
"@progress/kendo-angular-buttons": "13.2.0-develop.2",
|
|
37
|
+
"@progress/kendo-angular-common": "13.2.0-develop.2",
|
|
38
|
+
"@progress/kendo-angular-dialog": "13.2.0-develop.2",
|
|
39
|
+
"@progress/kendo-angular-intl": "13.2.0-develop.2",
|
|
40
|
+
"@progress/kendo-angular-l10n": "13.2.0-develop.2",
|
|
41
|
+
"@progress/kendo-angular-popup": "13.2.0-develop.2",
|
|
42
|
+
"@progress/kendo-angular-icons": "13.2.0-develop.2",
|
|
43
43
|
"rxjs": "^6.5.3 || ^7.0.0",
|
|
44
|
-
"@progress/kendo-angular-upload": "13.
|
|
44
|
+
"@progress/kendo-angular-upload": "13.2.0-develop.2"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"tslib": "^2.3.1",
|
|
48
|
-
"@progress/kendo-angular-schematics": "13.
|
|
48
|
+
"@progress/kendo-angular-schematics": "13.2.0-develop.2",
|
|
49
49
|
"@progress/kendo-common": "^0.2.2",
|
|
50
50
|
"@progress/kendo-draggable": "^3.0.0",
|
|
51
51
|
"@progress/kendo-inputs-common": "^3.1.0"
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
/**
|
|
6
|
+
* Arguments for the `blur` event of the Switch component.
|
|
7
|
+
*/
|
|
8
|
+
export declare class SwitchBlurEvent {
|
|
9
|
+
/**
|
|
10
|
+
* The original DOM [`blur`](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) event.
|
|
11
|
+
*/
|
|
12
|
+
originalEvent: FocusEvent;
|
|
13
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**-----------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright © 2023 Progress Software Corporation. All rights reserved.
|
|
3
|
+
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
+
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
/**
|
|
6
|
+
* Arguments for the `focus` event of the Switch component.
|
|
7
|
+
*/
|
|
8
|
+
export declare class SwitchFocusEvent {
|
|
9
|
+
/**
|
|
10
|
+
* The original DOM [`focus`](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) event.
|
|
11
|
+
*/
|
|
12
|
+
originalEvent: FocusEvent;
|
|
13
|
+
}
|
|
@@ -7,6 +7,8 @@ import { ControlValueAccessor, NgControl } from '@angular/forms';
|
|
|
7
7
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
8
|
import { Subscription } from "rxjs";
|
|
9
9
|
import { InputRounded, InputSize } from '../common/models';
|
|
10
|
+
import { SwitchFocusEvent } from './events/focus-event';
|
|
11
|
+
import { SwitchBlurEvent } from './events/blur-event';
|
|
10
12
|
import * as i0 from "@angular/core";
|
|
11
13
|
/**
|
|
12
14
|
* Represents the [Kendo UI Switch component for Angular]({% slug overview_switch %}).
|
|
@@ -21,7 +23,7 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
|
|
|
21
23
|
/**
|
|
22
24
|
* @hidden
|
|
23
25
|
*/
|
|
24
|
-
focusableId: string;
|
|
26
|
+
get focusableId(): string;
|
|
25
27
|
/**
|
|
26
28
|
* Changes the **On** label so that it can be localized ([see example]({% slug labels_switch %})).
|
|
27
29
|
*/
|
|
@@ -88,19 +90,24 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
|
|
|
88
90
|
set tabIndex(tabIndex: number);
|
|
89
91
|
get tabIndex(): number;
|
|
90
92
|
/**
|
|
91
|
-
* Fires each time the
|
|
93
|
+
* Fires each time the Switch component is focused as a result of user interaction.
|
|
92
94
|
*/
|
|
93
|
-
onFocus: EventEmitter<
|
|
95
|
+
onFocus: EventEmitter<SwitchFocusEvent>;
|
|
94
96
|
/**
|
|
95
|
-
* Fires each time the
|
|
97
|
+
* Fires each time the Switch component is blurred as a result of user interaction.
|
|
96
98
|
*/
|
|
97
|
-
onBlur: EventEmitter<
|
|
99
|
+
onBlur: EventEmitter<SwitchBlurEvent>;
|
|
98
100
|
/**
|
|
99
101
|
* Fires each time the user selects a new value.
|
|
100
102
|
*/
|
|
101
103
|
valueChange: EventEmitter<any>;
|
|
102
104
|
direction: string;
|
|
103
105
|
get ieClass(): boolean;
|
|
106
|
+
hostRole: string;
|
|
107
|
+
get hostId(): string;
|
|
108
|
+
get ariaChecked(): boolean;
|
|
109
|
+
get ariaInvalid(): boolean;
|
|
110
|
+
get hostTabIndex(): number;
|
|
104
111
|
get ariaDisabled(): boolean;
|
|
105
112
|
get ariaReadonly(): boolean;
|
|
106
113
|
hostClasses: boolean;
|
|
@@ -114,7 +121,7 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
|
|
|
114
121
|
protected localizationChangeSubscription: Subscription;
|
|
115
122
|
protected isFocused: boolean;
|
|
116
123
|
protected control: NgControl;
|
|
117
|
-
private
|
|
124
|
+
private domSubscriptions;
|
|
118
125
|
private _checked;
|
|
119
126
|
private _size;
|
|
120
127
|
private _trackRounded;
|
|
@@ -163,11 +170,11 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
|
|
|
163
170
|
/**
|
|
164
171
|
* @hidden
|
|
165
172
|
*/
|
|
166
|
-
handleFocus: () => void;
|
|
173
|
+
handleFocus: (event: FocusEvent) => void;
|
|
167
174
|
/**
|
|
168
175
|
* @hidden
|
|
169
176
|
*/
|
|
170
|
-
handleBlur: (event:
|
|
177
|
+
handleBlur: (event: FocusEvent) => void;
|
|
171
178
|
/**
|
|
172
179
|
* @hidden
|
|
173
180
|
*/
|
|
@@ -199,7 +206,7 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
|
|
|
199
206
|
isEmpty(): boolean;
|
|
200
207
|
private changeValue;
|
|
201
208
|
private set focused(value);
|
|
202
|
-
private
|
|
209
|
+
private attachHostHandlers;
|
|
203
210
|
private setHostClasses;
|
|
204
211
|
private handleClasses;
|
|
205
212
|
private handleTrackClasses;
|