@progress/kendo-angular-buttons 14.0.2-develop.11 → 14.0.2-develop.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/buttongroup/buttongroup.component.d.ts +4 -3
- package/esm2020/buttongroup/buttongroup.component.mjs +28 -32
- package/esm2020/package-metadata.mjs +2 -2
- package/fesm2015/progress-kendo-angular-buttons.mjs +29 -33
- package/fesm2020/progress-kendo-angular-buttons.mjs +29 -33
- package/package.json +6 -6
|
@@ -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 { ButtonComponent } from '../button/button.component';
|
|
6
|
-
import { EventEmitter, QueryList, OnInit, OnDestroy, AfterContentChecked, AfterViewChecked, AfterContentInit, ElementRef, SimpleChanges } from '@angular/core';
|
|
6
|
+
import { EventEmitter, QueryList, OnInit, OnDestroy, AfterContentChecked, AfterViewChecked, AfterContentInit, ElementRef, SimpleChanges, Renderer2 } from '@angular/core';
|
|
7
7
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
8
|
import { ButtonGroupSelection } from '../button/selection-settings';
|
|
9
9
|
import { KendoButtonService } from '../button/button.service';
|
|
@@ -14,6 +14,7 @@ import * as i0 from "@angular/core";
|
|
|
14
14
|
*/
|
|
15
15
|
export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterContentChecked, AfterViewChecked, AfterContentInit {
|
|
16
16
|
private service;
|
|
17
|
+
private renderer;
|
|
17
18
|
private element;
|
|
18
19
|
/**
|
|
19
20
|
* By default, the ButtonGroup is enabled.
|
|
@@ -61,6 +62,7 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
|
|
|
61
62
|
buttons: QueryList<ButtonComponent>;
|
|
62
63
|
private _tabIndex;
|
|
63
64
|
private currentTabIndex;
|
|
65
|
+
private lastFocusedIndex;
|
|
64
66
|
private direction;
|
|
65
67
|
private subs;
|
|
66
68
|
get wrapperClass(): boolean;
|
|
@@ -71,7 +73,7 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
|
|
|
71
73
|
get ariaDisabled(): boolean;
|
|
72
74
|
get wrapperWidth(): string;
|
|
73
75
|
get wrapperTabIndex(): number;
|
|
74
|
-
constructor(service: KendoButtonService, localization: LocalizationService, element: ElementRef);
|
|
76
|
+
constructor(service: KendoButtonService, localization: LocalizationService, renderer: Renderer2, element: ElementRef);
|
|
75
77
|
ngOnInit(): void;
|
|
76
78
|
ngOnChanges(changes: SimpleChanges): void;
|
|
77
79
|
ngAfterContentInit(): void;
|
|
@@ -85,7 +87,6 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
|
|
|
85
87
|
protected focus(buttons: Array<ButtonComponent>): void;
|
|
86
88
|
private verifySettings;
|
|
87
89
|
private isSelectionSingle;
|
|
88
|
-
private setButtonsTabIndex;
|
|
89
90
|
private handleSubs;
|
|
90
91
|
private focusHandler;
|
|
91
92
|
static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
|
|
@@ -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 { ButtonComponent } from '../button/button.component';
|
|
6
|
-
import { Component, EventEmitter, Output, Input, ContentChildren, QueryList, HostBinding, isDevMode, ElementRef } from '@angular/core';
|
|
6
|
+
import { Component, EventEmitter, Output, Input, ContentChildren, QueryList, HostBinding, isDevMode, ElementRef, Renderer2 } from '@angular/core';
|
|
7
7
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
8
8
|
import { isChanged, Keys } from '@progress/kendo-angular-common';
|
|
9
9
|
import { KendoButtonService } from '../button/button.service';
|
|
@@ -24,8 +24,9 @@ const tabindex = 'tabindex';
|
|
|
24
24
|
* Represents the Kendo UI ButtonGroup component for Angular.
|
|
25
25
|
*/
|
|
26
26
|
export class ButtonGroupComponent {
|
|
27
|
-
constructor(service, localization, element) {
|
|
27
|
+
constructor(service, localization, renderer, element) {
|
|
28
28
|
this.service = service;
|
|
29
|
+
this.renderer = renderer;
|
|
29
30
|
this.element = element;
|
|
30
31
|
/**
|
|
31
32
|
* The selection mode of the ButtonGroup.
|
|
@@ -47,12 +48,14 @@ export class ButtonGroupComponent {
|
|
|
47
48
|
this.navigate = new EventEmitter();
|
|
48
49
|
this._tabIndex = 0;
|
|
49
50
|
this.currentTabIndex = 0;
|
|
51
|
+
this.lastFocusedIndex = -1;
|
|
50
52
|
this.subs = new Subscription();
|
|
51
53
|
this.role = 'group';
|
|
52
54
|
this.focusHandler = () => {
|
|
53
55
|
this.currentTabIndex = -1;
|
|
54
|
-
|
|
55
|
-
const
|
|
56
|
+
this.defocus(this.buttons.toArray());
|
|
57
|
+
const firstFocusableIndex = this.buttons.toArray().findIndex(current => !current.disabled);
|
|
58
|
+
const index = this.lastFocusedIndex === -1 ? firstFocusableIndex : this.lastFocusedIndex;
|
|
56
59
|
this.focus(this.buttons.filter((_current, i) => {
|
|
57
60
|
return i === index;
|
|
58
61
|
}));
|
|
@@ -108,12 +111,14 @@ export class ButtonGroupComponent {
|
|
|
108
111
|
button.setSelected(newSelectionValue);
|
|
109
112
|
}
|
|
110
113
|
if (this.navigable) {
|
|
111
|
-
|
|
114
|
+
this.currentTabIndex = -1;
|
|
115
|
+
this.renderer.setAttribute(button, tabindex, '0');
|
|
112
116
|
}
|
|
113
117
|
}));
|
|
114
118
|
this.handleSubs('focus', () => this.navigable, this.focusHandler);
|
|
115
119
|
this.handleSubs('keydown', () => this.navigable && !this.disabled, (event) => this.navigateFocus(event));
|
|
116
120
|
this.handleSubs('focusout', (event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement, () => {
|
|
121
|
+
this.lastFocusedIndex = this.buttons.toArray().findIndex(button => button.tabIndex !== -1);
|
|
117
122
|
this.defocus(this.buttons.toArray());
|
|
118
123
|
this.currentTabIndex = this.tabIndex;
|
|
119
124
|
});
|
|
@@ -134,12 +139,12 @@ export class ButtonGroupComponent {
|
|
|
134
139
|
}
|
|
135
140
|
if (isChanged('navigable', changes)) {
|
|
136
141
|
if (changes['navigable'].currentValue) {
|
|
137
|
-
this.
|
|
142
|
+
this.defocus(this.buttons.toArray());
|
|
138
143
|
this.currentTabIndex = 0;
|
|
139
144
|
}
|
|
140
145
|
else {
|
|
141
146
|
this.currentTabIndex = -1;
|
|
142
|
-
this.buttons.forEach((button) =>
|
|
147
|
+
this.buttons.forEach((button) => this.renderer.setAttribute(button, tabindex, '0'));
|
|
143
148
|
}
|
|
144
149
|
}
|
|
145
150
|
}
|
|
@@ -147,12 +152,12 @@ export class ButtonGroupComponent {
|
|
|
147
152
|
if (!this.navigable) {
|
|
148
153
|
return;
|
|
149
154
|
}
|
|
150
|
-
this.
|
|
155
|
+
this.defocus(this.buttons.toArray());
|
|
151
156
|
}
|
|
152
157
|
ngAfterViewChecked() {
|
|
153
158
|
if (this.buttons.length) {
|
|
154
|
-
this.
|
|
155
|
-
this.
|
|
159
|
+
this.renderer.addClass(this.buttons.first.element, 'k-group-start');
|
|
160
|
+
this.renderer.addClass(this.buttons.last.element, 'k-group-end');
|
|
156
161
|
}
|
|
157
162
|
}
|
|
158
163
|
ngOnDestroy() {
|
|
@@ -162,15 +167,16 @@ export class ButtonGroupComponent {
|
|
|
162
167
|
this.verifySettings();
|
|
163
168
|
}
|
|
164
169
|
navigateFocus(event) {
|
|
165
|
-
const
|
|
170
|
+
const navigationButtons = this.buttons.toArray().filter(button => !button.disabled);
|
|
171
|
+
const focusedIndex = navigationButtons.findIndex(current => current.element.tabIndex !== -1);
|
|
166
172
|
const firstIndex = 0;
|
|
167
|
-
const lastIndex =
|
|
173
|
+
const lastIndex = navigationButtons.length - 1;
|
|
168
174
|
const eventArgs = new PreventableEvent();
|
|
169
175
|
if (event.keyCode === Keys.ArrowRight && focusedIndex < lastIndex) {
|
|
170
176
|
this.navigate.emit(eventArgs);
|
|
171
177
|
if (!eventArgs.isDefaultPrevented()) {
|
|
172
|
-
this.defocus(
|
|
173
|
-
this.focus(
|
|
178
|
+
this.defocus(navigationButtons);
|
|
179
|
+
this.focus(navigationButtons.filter((_current, index) => {
|
|
174
180
|
return index === focusedIndex + 1;
|
|
175
181
|
}));
|
|
176
182
|
}
|
|
@@ -178,8 +184,8 @@ export class ButtonGroupComponent {
|
|
|
178
184
|
if (event.keyCode === Keys.ArrowLeft && focusedIndex > firstIndex) {
|
|
179
185
|
this.navigate.emit(eventArgs);
|
|
180
186
|
if (!eventArgs.isDefaultPrevented()) {
|
|
181
|
-
this.defocus(
|
|
182
|
-
this.focus(
|
|
187
|
+
this.defocus(navigationButtons);
|
|
188
|
+
this.focus(navigationButtons.filter((_current, index) => {
|
|
183
189
|
return index === focusedIndex - 1;
|
|
184
190
|
}));
|
|
185
191
|
}
|
|
@@ -189,7 +195,7 @@ export class ButtonGroupComponent {
|
|
|
189
195
|
buttons.forEach((button) => {
|
|
190
196
|
button.setSelected(false);
|
|
191
197
|
if (this.navigable) {
|
|
192
|
-
|
|
198
|
+
this.renderer.setAttribute(button, tabindex, '-1');
|
|
193
199
|
}
|
|
194
200
|
});
|
|
195
201
|
}
|
|
@@ -197,19 +203,19 @@ export class ButtonGroupComponent {
|
|
|
197
203
|
buttons.forEach((button) => {
|
|
198
204
|
button.setSelected(true);
|
|
199
205
|
if (this.navigable) {
|
|
200
|
-
|
|
206
|
+
this.renderer.setAttribute(button, tabindex, '0');
|
|
201
207
|
}
|
|
202
208
|
button.focus();
|
|
203
209
|
});
|
|
204
210
|
}
|
|
205
211
|
defocus(buttons) {
|
|
206
212
|
buttons.forEach((button) => {
|
|
207
|
-
|
|
213
|
+
this.renderer.setAttribute(button, tabindex, '-1');
|
|
208
214
|
});
|
|
209
215
|
}
|
|
210
216
|
focus(buttons) {
|
|
211
217
|
buttons.forEach((button) => {
|
|
212
|
-
|
|
218
|
+
this.renderer.setAttribute(button, tabindex, '0');
|
|
213
219
|
button.focus();
|
|
214
220
|
});
|
|
215
221
|
}
|
|
@@ -223,23 +229,13 @@ export class ButtonGroupComponent {
|
|
|
223
229
|
isSelectionSingle() {
|
|
224
230
|
return this.selection === 'single';
|
|
225
231
|
}
|
|
226
|
-
setButtonsTabIndex() {
|
|
227
|
-
this.buttons.forEach((button) => {
|
|
228
|
-
if (button.selected) {
|
|
229
|
-
button.setAttribute(tabindex, '0');
|
|
230
|
-
}
|
|
231
|
-
else {
|
|
232
|
-
button.setAttribute(tabindex, '-1');
|
|
233
|
-
}
|
|
234
|
-
});
|
|
235
|
-
}
|
|
236
232
|
handleSubs(eventName, predicate, handler) {
|
|
237
233
|
this.subs.add(fromEvent(this.element.nativeElement, eventName)
|
|
238
234
|
.pipe(filter(predicate))
|
|
239
235
|
.subscribe(handler));
|
|
240
236
|
}
|
|
241
237
|
}
|
|
242
|
-
ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1.KendoButtonService }, { token: i2.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
238
|
+
ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i1.KendoButtonService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
243
239
|
ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
|
|
244
240
|
KendoButtonService,
|
|
245
241
|
LocalizationService,
|
|
@@ -267,7 +263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
267
263
|
<ng-content select="[kendoButton], kendo-button"></ng-content>
|
|
268
264
|
`
|
|
269
265
|
}]
|
|
270
|
-
}], ctorParameters: function () { return [{ type: i1.KendoButtonService }, { type: i2.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
|
|
266
|
+
}], ctorParameters: function () { return [{ type: i1.KendoButtonService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
|
|
271
267
|
type: Input,
|
|
272
268
|
args: ['disabled']
|
|
273
269
|
}], selection: [{
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-buttons',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '14.0.2-develop.
|
|
12
|
+
publishDate: 1698244217,
|
|
13
|
+
version: '14.0.2-develop.13',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -28,8 +28,8 @@ const packageMetadata = {
|
|
|
28
28
|
name: '@progress/kendo-angular-buttons',
|
|
29
29
|
productName: 'Kendo UI for Angular',
|
|
30
30
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
31
|
-
publishDate:
|
|
32
|
-
version: '14.0.2-develop.
|
|
31
|
+
publishDate: 1698244217,
|
|
32
|
+
version: '14.0.2-develop.13',
|
|
33
33
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
34
34
|
};
|
|
35
35
|
|
|
@@ -728,8 +728,9 @@ const tabindex = 'tabindex';
|
|
|
728
728
|
* Represents the Kendo UI ButtonGroup component for Angular.
|
|
729
729
|
*/
|
|
730
730
|
class ButtonGroupComponent {
|
|
731
|
-
constructor(service, localization, element) {
|
|
731
|
+
constructor(service, localization, renderer, element) {
|
|
732
732
|
this.service = service;
|
|
733
|
+
this.renderer = renderer;
|
|
733
734
|
this.element = element;
|
|
734
735
|
/**
|
|
735
736
|
* The selection mode of the ButtonGroup.
|
|
@@ -751,12 +752,14 @@ class ButtonGroupComponent {
|
|
|
751
752
|
this.navigate = new EventEmitter();
|
|
752
753
|
this._tabIndex = 0;
|
|
753
754
|
this.currentTabIndex = 0;
|
|
755
|
+
this.lastFocusedIndex = -1;
|
|
754
756
|
this.subs = new Subscription();
|
|
755
757
|
this.role = 'group';
|
|
756
758
|
this.focusHandler = () => {
|
|
757
759
|
this.currentTabIndex = -1;
|
|
758
|
-
|
|
759
|
-
const
|
|
760
|
+
this.defocus(this.buttons.toArray());
|
|
761
|
+
const firstFocusableIndex = this.buttons.toArray().findIndex(current => !current.disabled);
|
|
762
|
+
const index = this.lastFocusedIndex === -1 ? firstFocusableIndex : this.lastFocusedIndex;
|
|
760
763
|
this.focus(this.buttons.filter((_current, i) => {
|
|
761
764
|
return i === index;
|
|
762
765
|
}));
|
|
@@ -812,12 +815,14 @@ class ButtonGroupComponent {
|
|
|
812
815
|
button.setSelected(newSelectionValue);
|
|
813
816
|
}
|
|
814
817
|
if (this.navigable) {
|
|
815
|
-
|
|
818
|
+
this.currentTabIndex = -1;
|
|
819
|
+
this.renderer.setAttribute(button, tabindex, '0');
|
|
816
820
|
}
|
|
817
821
|
}));
|
|
818
822
|
this.handleSubs('focus', () => this.navigable, this.focusHandler);
|
|
819
823
|
this.handleSubs('keydown', () => this.navigable && !this.disabled, (event) => this.navigateFocus(event));
|
|
820
824
|
this.handleSubs('focusout', (event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement, () => {
|
|
825
|
+
this.lastFocusedIndex = this.buttons.toArray().findIndex(button => button.tabIndex !== -1);
|
|
821
826
|
this.defocus(this.buttons.toArray());
|
|
822
827
|
this.currentTabIndex = this.tabIndex;
|
|
823
828
|
});
|
|
@@ -838,12 +843,12 @@ class ButtonGroupComponent {
|
|
|
838
843
|
}
|
|
839
844
|
if (isChanged('navigable', changes)) {
|
|
840
845
|
if (changes['navigable'].currentValue) {
|
|
841
|
-
this.
|
|
846
|
+
this.defocus(this.buttons.toArray());
|
|
842
847
|
this.currentTabIndex = 0;
|
|
843
848
|
}
|
|
844
849
|
else {
|
|
845
850
|
this.currentTabIndex = -1;
|
|
846
|
-
this.buttons.forEach((button) =>
|
|
851
|
+
this.buttons.forEach((button) => this.renderer.setAttribute(button, tabindex, '0'));
|
|
847
852
|
}
|
|
848
853
|
}
|
|
849
854
|
}
|
|
@@ -851,12 +856,12 @@ class ButtonGroupComponent {
|
|
|
851
856
|
if (!this.navigable) {
|
|
852
857
|
return;
|
|
853
858
|
}
|
|
854
|
-
this.
|
|
859
|
+
this.defocus(this.buttons.toArray());
|
|
855
860
|
}
|
|
856
861
|
ngAfterViewChecked() {
|
|
857
862
|
if (this.buttons.length) {
|
|
858
|
-
this.
|
|
859
|
-
this.
|
|
863
|
+
this.renderer.addClass(this.buttons.first.element, 'k-group-start');
|
|
864
|
+
this.renderer.addClass(this.buttons.last.element, 'k-group-end');
|
|
860
865
|
}
|
|
861
866
|
}
|
|
862
867
|
ngOnDestroy() {
|
|
@@ -866,15 +871,16 @@ class ButtonGroupComponent {
|
|
|
866
871
|
this.verifySettings();
|
|
867
872
|
}
|
|
868
873
|
navigateFocus(event) {
|
|
869
|
-
const
|
|
874
|
+
const navigationButtons = this.buttons.toArray().filter(button => !button.disabled);
|
|
875
|
+
const focusedIndex = navigationButtons.findIndex(current => current.element.tabIndex !== -1);
|
|
870
876
|
const firstIndex = 0;
|
|
871
|
-
const lastIndex =
|
|
877
|
+
const lastIndex = navigationButtons.length - 1;
|
|
872
878
|
const eventArgs = new PreventableEvent();
|
|
873
879
|
if (event.keyCode === Keys.ArrowRight && focusedIndex < lastIndex) {
|
|
874
880
|
this.navigate.emit(eventArgs);
|
|
875
881
|
if (!eventArgs.isDefaultPrevented()) {
|
|
876
|
-
this.defocus(
|
|
877
|
-
this.focus(
|
|
882
|
+
this.defocus(navigationButtons);
|
|
883
|
+
this.focus(navigationButtons.filter((_current, index) => {
|
|
878
884
|
return index === focusedIndex + 1;
|
|
879
885
|
}));
|
|
880
886
|
}
|
|
@@ -882,8 +888,8 @@ class ButtonGroupComponent {
|
|
|
882
888
|
if (event.keyCode === Keys.ArrowLeft && focusedIndex > firstIndex) {
|
|
883
889
|
this.navigate.emit(eventArgs);
|
|
884
890
|
if (!eventArgs.isDefaultPrevented()) {
|
|
885
|
-
this.defocus(
|
|
886
|
-
this.focus(
|
|
891
|
+
this.defocus(navigationButtons);
|
|
892
|
+
this.focus(navigationButtons.filter((_current, index) => {
|
|
887
893
|
return index === focusedIndex - 1;
|
|
888
894
|
}));
|
|
889
895
|
}
|
|
@@ -893,7 +899,7 @@ class ButtonGroupComponent {
|
|
|
893
899
|
buttons.forEach((button) => {
|
|
894
900
|
button.setSelected(false);
|
|
895
901
|
if (this.navigable) {
|
|
896
|
-
|
|
902
|
+
this.renderer.setAttribute(button, tabindex, '-1');
|
|
897
903
|
}
|
|
898
904
|
});
|
|
899
905
|
}
|
|
@@ -901,19 +907,19 @@ class ButtonGroupComponent {
|
|
|
901
907
|
buttons.forEach((button) => {
|
|
902
908
|
button.setSelected(true);
|
|
903
909
|
if (this.navigable) {
|
|
904
|
-
|
|
910
|
+
this.renderer.setAttribute(button, tabindex, '0');
|
|
905
911
|
}
|
|
906
912
|
button.focus();
|
|
907
913
|
});
|
|
908
914
|
}
|
|
909
915
|
defocus(buttons) {
|
|
910
916
|
buttons.forEach((button) => {
|
|
911
|
-
|
|
917
|
+
this.renderer.setAttribute(button, tabindex, '-1');
|
|
912
918
|
});
|
|
913
919
|
}
|
|
914
920
|
focus(buttons) {
|
|
915
921
|
buttons.forEach((button) => {
|
|
916
|
-
|
|
922
|
+
this.renderer.setAttribute(button, tabindex, '0');
|
|
917
923
|
button.focus();
|
|
918
924
|
});
|
|
919
925
|
}
|
|
@@ -927,23 +933,13 @@ class ButtonGroupComponent {
|
|
|
927
933
|
isSelectionSingle() {
|
|
928
934
|
return this.selection === 'single';
|
|
929
935
|
}
|
|
930
|
-
setButtonsTabIndex() {
|
|
931
|
-
this.buttons.forEach((button) => {
|
|
932
|
-
if (button.selected) {
|
|
933
|
-
button.setAttribute(tabindex, '0');
|
|
934
|
-
}
|
|
935
|
-
else {
|
|
936
|
-
button.setAttribute(tabindex, '-1');
|
|
937
|
-
}
|
|
938
|
-
});
|
|
939
|
-
}
|
|
940
936
|
handleSubs(eventName, predicate, handler) {
|
|
941
937
|
this.subs.add(fromEvent(this.element.nativeElement, eventName)
|
|
942
938
|
.pipe(filter(predicate))
|
|
943
939
|
.subscribe(handler));
|
|
944
940
|
}
|
|
945
941
|
}
|
|
946
|
-
ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
942
|
+
ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
947
943
|
ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
|
|
948
944
|
KendoButtonService,
|
|
949
945
|
LocalizationService,
|
|
@@ -971,7 +967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
971
967
|
<ng-content select="[kendoButton], kendo-button"></ng-content>
|
|
972
968
|
`
|
|
973
969
|
}]
|
|
974
|
-
}], ctorParameters: function () { return [{ type: KendoButtonService }, { type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
|
|
970
|
+
}], ctorParameters: function () { return [{ type: KendoButtonService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
|
|
975
971
|
type: Input,
|
|
976
972
|
args: ['disabled']
|
|
977
973
|
}], selection: [{
|
|
@@ -46,8 +46,8 @@ const packageMetadata = {
|
|
|
46
46
|
name: '@progress/kendo-angular-buttons',
|
|
47
47
|
productName: 'Kendo UI for Angular',
|
|
48
48
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
49
|
-
publishDate:
|
|
50
|
-
version: '14.0.2-develop.
|
|
49
|
+
publishDate: 1698244217,
|
|
50
|
+
version: '14.0.2-develop.13',
|
|
51
51
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
52
52
|
};
|
|
53
53
|
|
|
@@ -726,8 +726,9 @@ const tabindex = 'tabindex';
|
|
|
726
726
|
* Represents the Kendo UI ButtonGroup component for Angular.
|
|
727
727
|
*/
|
|
728
728
|
class ButtonGroupComponent {
|
|
729
|
-
constructor(service, localization, element) {
|
|
729
|
+
constructor(service, localization, renderer, element) {
|
|
730
730
|
this.service = service;
|
|
731
|
+
this.renderer = renderer;
|
|
731
732
|
this.element = element;
|
|
732
733
|
/**
|
|
733
734
|
* The selection mode of the ButtonGroup.
|
|
@@ -749,12 +750,14 @@ class ButtonGroupComponent {
|
|
|
749
750
|
this.navigate = new EventEmitter();
|
|
750
751
|
this._tabIndex = 0;
|
|
751
752
|
this.currentTabIndex = 0;
|
|
753
|
+
this.lastFocusedIndex = -1;
|
|
752
754
|
this.subs = new Subscription();
|
|
753
755
|
this.role = 'group';
|
|
754
756
|
this.focusHandler = () => {
|
|
755
757
|
this.currentTabIndex = -1;
|
|
756
|
-
|
|
757
|
-
const
|
|
758
|
+
this.defocus(this.buttons.toArray());
|
|
759
|
+
const firstFocusableIndex = this.buttons.toArray().findIndex(current => !current.disabled);
|
|
760
|
+
const index = this.lastFocusedIndex === -1 ? firstFocusableIndex : this.lastFocusedIndex;
|
|
758
761
|
this.focus(this.buttons.filter((_current, i) => {
|
|
759
762
|
return i === index;
|
|
760
763
|
}));
|
|
@@ -810,12 +813,14 @@ class ButtonGroupComponent {
|
|
|
810
813
|
button.setSelected(newSelectionValue);
|
|
811
814
|
}
|
|
812
815
|
if (this.navigable) {
|
|
813
|
-
|
|
816
|
+
this.currentTabIndex = -1;
|
|
817
|
+
this.renderer.setAttribute(button, tabindex, '0');
|
|
814
818
|
}
|
|
815
819
|
}));
|
|
816
820
|
this.handleSubs('focus', () => this.navigable, this.focusHandler);
|
|
817
821
|
this.handleSubs('keydown', () => this.navigable && !this.disabled, (event) => this.navigateFocus(event));
|
|
818
822
|
this.handleSubs('focusout', (event) => this.navigable && event.relatedTarget && event.relatedTarget.parentNode !== this.element.nativeElement, () => {
|
|
823
|
+
this.lastFocusedIndex = this.buttons.toArray().findIndex(button => button.tabIndex !== -1);
|
|
819
824
|
this.defocus(this.buttons.toArray());
|
|
820
825
|
this.currentTabIndex = this.tabIndex;
|
|
821
826
|
});
|
|
@@ -836,12 +841,12 @@ class ButtonGroupComponent {
|
|
|
836
841
|
}
|
|
837
842
|
if (isChanged('navigable', changes)) {
|
|
838
843
|
if (changes['navigable'].currentValue) {
|
|
839
|
-
this.
|
|
844
|
+
this.defocus(this.buttons.toArray());
|
|
840
845
|
this.currentTabIndex = 0;
|
|
841
846
|
}
|
|
842
847
|
else {
|
|
843
848
|
this.currentTabIndex = -1;
|
|
844
|
-
this.buttons.forEach((button) =>
|
|
849
|
+
this.buttons.forEach((button) => this.renderer.setAttribute(button, tabindex, '0'));
|
|
845
850
|
}
|
|
846
851
|
}
|
|
847
852
|
}
|
|
@@ -849,12 +854,12 @@ class ButtonGroupComponent {
|
|
|
849
854
|
if (!this.navigable) {
|
|
850
855
|
return;
|
|
851
856
|
}
|
|
852
|
-
this.
|
|
857
|
+
this.defocus(this.buttons.toArray());
|
|
853
858
|
}
|
|
854
859
|
ngAfterViewChecked() {
|
|
855
860
|
if (this.buttons.length) {
|
|
856
|
-
this.
|
|
857
|
-
this.
|
|
861
|
+
this.renderer.addClass(this.buttons.first.element, 'k-group-start');
|
|
862
|
+
this.renderer.addClass(this.buttons.last.element, 'k-group-end');
|
|
858
863
|
}
|
|
859
864
|
}
|
|
860
865
|
ngOnDestroy() {
|
|
@@ -864,15 +869,16 @@ class ButtonGroupComponent {
|
|
|
864
869
|
this.verifySettings();
|
|
865
870
|
}
|
|
866
871
|
navigateFocus(event) {
|
|
867
|
-
const
|
|
872
|
+
const navigationButtons = this.buttons.toArray().filter(button => !button.disabled);
|
|
873
|
+
const focusedIndex = navigationButtons.findIndex(current => current.element.tabIndex !== -1);
|
|
868
874
|
const firstIndex = 0;
|
|
869
|
-
const lastIndex =
|
|
875
|
+
const lastIndex = navigationButtons.length - 1;
|
|
870
876
|
const eventArgs = new PreventableEvent();
|
|
871
877
|
if (event.keyCode === Keys.ArrowRight && focusedIndex < lastIndex) {
|
|
872
878
|
this.navigate.emit(eventArgs);
|
|
873
879
|
if (!eventArgs.isDefaultPrevented()) {
|
|
874
|
-
this.defocus(
|
|
875
|
-
this.focus(
|
|
880
|
+
this.defocus(navigationButtons);
|
|
881
|
+
this.focus(navigationButtons.filter((_current, index) => {
|
|
876
882
|
return index === focusedIndex + 1;
|
|
877
883
|
}));
|
|
878
884
|
}
|
|
@@ -880,8 +886,8 @@ class ButtonGroupComponent {
|
|
|
880
886
|
if (event.keyCode === Keys.ArrowLeft && focusedIndex > firstIndex) {
|
|
881
887
|
this.navigate.emit(eventArgs);
|
|
882
888
|
if (!eventArgs.isDefaultPrevented()) {
|
|
883
|
-
this.defocus(
|
|
884
|
-
this.focus(
|
|
889
|
+
this.defocus(navigationButtons);
|
|
890
|
+
this.focus(navigationButtons.filter((_current, index) => {
|
|
885
891
|
return index === focusedIndex - 1;
|
|
886
892
|
}));
|
|
887
893
|
}
|
|
@@ -891,7 +897,7 @@ class ButtonGroupComponent {
|
|
|
891
897
|
buttons.forEach((button) => {
|
|
892
898
|
button.setSelected(false);
|
|
893
899
|
if (this.navigable) {
|
|
894
|
-
|
|
900
|
+
this.renderer.setAttribute(button, tabindex, '-1');
|
|
895
901
|
}
|
|
896
902
|
});
|
|
897
903
|
}
|
|
@@ -899,19 +905,19 @@ class ButtonGroupComponent {
|
|
|
899
905
|
buttons.forEach((button) => {
|
|
900
906
|
button.setSelected(true);
|
|
901
907
|
if (this.navigable) {
|
|
902
|
-
|
|
908
|
+
this.renderer.setAttribute(button, tabindex, '0');
|
|
903
909
|
}
|
|
904
910
|
button.focus();
|
|
905
911
|
});
|
|
906
912
|
}
|
|
907
913
|
defocus(buttons) {
|
|
908
914
|
buttons.forEach((button) => {
|
|
909
|
-
|
|
915
|
+
this.renderer.setAttribute(button, tabindex, '-1');
|
|
910
916
|
});
|
|
911
917
|
}
|
|
912
918
|
focus(buttons) {
|
|
913
919
|
buttons.forEach((button) => {
|
|
914
|
-
|
|
920
|
+
this.renderer.setAttribute(button, tabindex, '0');
|
|
915
921
|
button.focus();
|
|
916
922
|
});
|
|
917
923
|
}
|
|
@@ -925,23 +931,13 @@ class ButtonGroupComponent {
|
|
|
925
931
|
isSelectionSingle() {
|
|
926
932
|
return this.selection === 'single';
|
|
927
933
|
}
|
|
928
|
-
setButtonsTabIndex() {
|
|
929
|
-
this.buttons.forEach((button) => {
|
|
930
|
-
if (button.selected) {
|
|
931
|
-
button.setAttribute(tabindex, '0');
|
|
932
|
-
}
|
|
933
|
-
else {
|
|
934
|
-
button.setAttribute(tabindex, '-1');
|
|
935
|
-
}
|
|
936
|
-
});
|
|
937
|
-
}
|
|
938
934
|
handleSubs(eventName, predicate, handler) {
|
|
939
935
|
this.subs.add(fromEvent(this.element.nativeElement, eventName)
|
|
940
936
|
.pipe(filter(predicate))
|
|
941
937
|
.subscribe(handler));
|
|
942
938
|
}
|
|
943
939
|
}
|
|
944
|
-
ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
940
|
+
ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
945
941
|
ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
|
|
946
942
|
KendoButtonService,
|
|
947
943
|
LocalizationService,
|
|
@@ -969,7 +965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
969
965
|
<ng-content select="[kendoButton], kendo-button"></ng-content>
|
|
970
966
|
`
|
|
971
967
|
}]
|
|
972
|
-
}], ctorParameters: function () { return [{ type: KendoButtonService }, { type: i1.LocalizationService }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
|
|
968
|
+
}], ctorParameters: function () { return [{ type: KendoButtonService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
|
|
973
969
|
type: Input,
|
|
974
970
|
args: ['disabled']
|
|
975
971
|
}], selection: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-buttons",
|
|
3
|
-
"version": "14.0.2-develop.
|
|
3
|
+
"version": "14.0.2-develop.13",
|
|
4
4
|
"description": "Buttons Package for Angular",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -25,15 +25,15 @@
|
|
|
25
25
|
"@angular/core": "13 - 16",
|
|
26
26
|
"@angular/platform-browser": "13 - 16",
|
|
27
27
|
"@progress/kendo-licensing": "^1.0.2",
|
|
28
|
-
"@progress/kendo-angular-common": "14.0.2-develop.
|
|
29
|
-
"@progress/kendo-angular-l10n": "14.0.2-develop.
|
|
30
|
-
"@progress/kendo-angular-popup": "14.0.2-develop.
|
|
31
|
-
"@progress/kendo-angular-icons": "14.0.2-develop.
|
|
28
|
+
"@progress/kendo-angular-common": "14.0.2-develop.13",
|
|
29
|
+
"@progress/kendo-angular-l10n": "14.0.2-develop.13",
|
|
30
|
+
"@progress/kendo-angular-popup": "14.0.2-develop.13",
|
|
31
|
+
"@progress/kendo-angular-icons": "14.0.2-develop.13",
|
|
32
32
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"tslib": "^2.3.1",
|
|
36
|
-
"@progress/kendo-angular-schematics": "14.0.2-develop.
|
|
36
|
+
"@progress/kendo-angular-schematics": "14.0.2-develop.13",
|
|
37
37
|
"@progress/kendo-common": "^0.2.1"
|
|
38
38
|
},
|
|
39
39
|
"schematics": "./schematics/collection.json",
|