@progress/kendo-angular-layout 18.1.0-develop.9 → 18.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/common/dom-queries.mjs +1 -1
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/tilelayout/keyboard-navigation.service.mjs +67 -29
- package/esm2022/tilelayout/tilelayout-item.component.mjs +7 -1
- package/esm2022/tilelayout/tilelayout.component.mjs +14 -0
- package/fesm2022/progress-kendo-angular-layout.mjs +89 -33
- package/package.json +10 -10
- package/tilelayout/keyboard-navigation.service.d.ts +7 -1
- package/tilelayout/tilelayout-item.component.d.ts +4 -0
- package/tilelayout/tilelayout.component.d.ts +1 -0
|
@@ -11,7 +11,7 @@ const toClassList = (classNames) => String(classNames).trim().split(' ');
|
|
|
11
11
|
export const isFocusable = (element) => {
|
|
12
12
|
if (element.tagName) {
|
|
13
13
|
const tagName = element.tagName.toLowerCase();
|
|
14
|
-
const tabIndex = element.getAttribute('
|
|
14
|
+
const tabIndex = element.getAttribute('tabindex');
|
|
15
15
|
const skipTab = tabIndex === '-1';
|
|
16
16
|
let focusable = tabIndex !== null && !skipTab;
|
|
17
17
|
if (focusableRegex.test(tagName)) {
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '18.1.0
|
|
13
|
+
publishDate: 1739287104,
|
|
14
|
+
version: '18.1.0',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
16
16
|
};
|
|
@@ -9,6 +9,8 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
9
9
|
import { BehaviorSubject } from 'rxjs';
|
|
10
10
|
import { focusableSelector } from '@progress/kendo-angular-common';
|
|
11
11
|
import { getCurrentCol, shouldReorder, shouldResize } from './util';
|
|
12
|
+
import { TileLayoutResizeEvent } from './resize-event';
|
|
13
|
+
import { TileLayoutReorderEvent } from './reorder-event';
|
|
12
14
|
import * as i0 from "@angular/core";
|
|
13
15
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
14
16
|
/**
|
|
@@ -19,8 +21,11 @@ export class TileLayoutKeyboardNavigationService {
|
|
|
19
21
|
renderer;
|
|
20
22
|
localization;
|
|
21
23
|
navigable = new BehaviorSubject(false);
|
|
24
|
+
owner;
|
|
25
|
+
mousedown;
|
|
22
26
|
localizationSubscription;
|
|
23
27
|
rtl;
|
|
28
|
+
lastFocused;
|
|
24
29
|
constructor(zone, renderer, localization) {
|
|
25
30
|
this.zone = zone;
|
|
26
31
|
this.renderer = renderer;
|
|
@@ -35,6 +40,8 @@ export class TileLayoutKeyboardNavigationService {
|
|
|
35
40
|
const isTileFocused = document.activeElement === elem;
|
|
36
41
|
const focusedTile = settings.items.find(item => item.elem.nativeElement === elem);
|
|
37
42
|
const col = getCurrentCol(focusedTile, settings, this.rtl);
|
|
43
|
+
const isArrow = [Keys.ArrowLeft, Keys.ArrowRight, Keys.ArrowDown, Keys.ArrowUp].some(key => key === event.keyCode);
|
|
44
|
+
this.lastFocused = focusedTile;
|
|
38
45
|
if (keyCode === Keys.Enter && isTileFocused && focusableItems.length > 0) {
|
|
39
46
|
this.changeTabIndex('0', elem, focusableItems);
|
|
40
47
|
focusableItems[0].focus();
|
|
@@ -43,19 +50,39 @@ export class TileLayoutKeyboardNavigationService {
|
|
|
43
50
|
this.changeTabIndex('-1', elem, focusableItems);
|
|
44
51
|
elem.focus();
|
|
45
52
|
}
|
|
46
|
-
else if ((event.ctrlKey || event.metaKey) && isTileFocused && focusedTile.isResizable) {
|
|
53
|
+
else if (isArrow && (event.ctrlKey || event.metaKey) && isTileFocused && focusedTile.isResizable) {
|
|
47
54
|
event.preventDefault();
|
|
48
55
|
this.zone.run(() => {
|
|
49
56
|
this.resizeItem(keyCode, focusedTile, settings, col);
|
|
50
57
|
});
|
|
51
58
|
}
|
|
52
|
-
else if (event.shiftKey && isTileFocused && focusedTile.isReorderable) {
|
|
59
|
+
else if (isArrow && event.shiftKey && isTileFocused && focusedTile.isReorderable) {
|
|
53
60
|
this.zone.run(() => {
|
|
54
61
|
this.reorderItem(keyCode, focusedTile, settings, col);
|
|
55
62
|
});
|
|
56
63
|
}
|
|
57
|
-
else if (keyCode === Keys.Tab
|
|
58
|
-
|
|
64
|
+
else if (keyCode === Keys.Tab) {
|
|
65
|
+
if (!isTileFocused) {
|
|
66
|
+
this.keepFocusWithinComponent(event, elem);
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
const dir = event.shiftKey ? -1 : 1;
|
|
70
|
+
const nextFocusableTileOrder = focusedTile.order + dir;
|
|
71
|
+
if (nextFocusableTileOrder < 0 || nextFocusableTileOrder >= settings.items.length) {
|
|
72
|
+
const first = settings.items[0];
|
|
73
|
+
const last = settings.items[settings.items.length - 1];
|
|
74
|
+
if (dir > 0) {
|
|
75
|
+
last.focus();
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
first.focus();
|
|
79
|
+
}
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
this.lastFocused = settings.items.find(item => item.order === nextFocusableTileOrder);
|
|
84
|
+
this.lastFocused?.focus();
|
|
85
|
+
}
|
|
59
86
|
}
|
|
60
87
|
}
|
|
61
88
|
onFocusOut(event, elem, focusableItems) {
|
|
@@ -66,8 +93,10 @@ export class TileLayoutKeyboardNavigationService {
|
|
|
66
93
|
event.relatedTarget?.focus();
|
|
67
94
|
}
|
|
68
95
|
}
|
|
69
|
-
|
|
96
|
+
onMousedown(event, elem, focusableItems, tile) {
|
|
97
|
+
this.mousedown = true;
|
|
70
98
|
const isTargetFocusable = focusableItems.includes(event.target);
|
|
99
|
+
this.lastFocused = tile;
|
|
71
100
|
if (isTargetFocusable) {
|
|
72
101
|
this.changeTabIndex('0', elem, focusableItems);
|
|
73
102
|
event.target.focus();
|
|
@@ -82,42 +111,51 @@ export class TileLayoutKeyboardNavigationService {
|
|
|
82
111
|
getAllFocusableChildren(parent) {
|
|
83
112
|
return Array.from(parent.querySelectorAll(focusableSelector)).filter((element) => element.offsetParent !== null);
|
|
84
113
|
}
|
|
114
|
+
returnFocus() {
|
|
115
|
+
this.lastFocused ? this.lastFocused.focus() : this.owner.items.find(item => item.order === 0).focus();
|
|
116
|
+
}
|
|
85
117
|
resizeItem(keyCode, focusedTile, settings, col) {
|
|
86
118
|
const { resizeRight, resizeLeft, resizeDown, resizeUp } = shouldResize(keyCode, col, focusedTile, settings);
|
|
87
119
|
const resizeHorizontal = resizeLeft || resizeRight;
|
|
88
120
|
const resizeVertical = resizeDown || resizeUp;
|
|
89
121
|
const resizeDir = resizeLeft || resizeUp ? -1 : 1;
|
|
90
|
-
if (resizeHorizontal) {
|
|
91
|
-
|
|
122
|
+
if (!(resizeHorizontal || resizeVertical)) {
|
|
123
|
+
return;
|
|
92
124
|
}
|
|
93
|
-
|
|
94
|
-
|
|
125
|
+
const resizeEvent = new TileLayoutResizeEvent(focusedTile, this.owner.items ? this.owner.items.toArray() : [], focusedTile.rowSpan + resizeDir, focusedTile.rowSpan, focusedTile.colSpan + resizeDir, focusedTile.colSpan);
|
|
126
|
+
this.owner.resize.emit(resizeEvent);
|
|
127
|
+
if (!resizeEvent.isDefaultPrevented()) {
|
|
128
|
+
if (resizeHorizontal) {
|
|
129
|
+
focusedTile.colSpan += resizeDir;
|
|
130
|
+
}
|
|
131
|
+
else if (resizeVertical) {
|
|
132
|
+
focusedTile.rowSpan += resizeDir;
|
|
133
|
+
}
|
|
95
134
|
}
|
|
96
135
|
}
|
|
97
136
|
reorderItem(keyCode, focusedTile, settings, col) {
|
|
98
137
|
const { reorderLeft, reorderRight } = shouldReorder(keyCode, col, focusedTile, settings);
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
focusedTile.order
|
|
110
|
-
|
|
138
|
+
if (!(reorderLeft || reorderRight)) {
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
const reorder = (dir) => {
|
|
142
|
+
const relatedTile = this.targetTile(focusedTile, settings.items, dir);
|
|
143
|
+
if (relatedTile) {
|
|
144
|
+
relatedTile.order -= dir;
|
|
145
|
+
if (relatedTile.col) {
|
|
146
|
+
relatedTile.col -= dir;
|
|
147
|
+
}
|
|
148
|
+
focusedTile.order += dir;
|
|
149
|
+
if (focusedTile.col) {
|
|
150
|
+
focusedTile.col += dir;
|
|
151
|
+
}
|
|
111
152
|
}
|
|
112
153
|
};
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
else {
|
|
119
|
-
reorderRight ? onReorderRight() : onReorderLeft();
|
|
120
|
-
}
|
|
154
|
+
const reorderDir = reorderRight ? 1 : -1;
|
|
155
|
+
const reorderEvent = new TileLayoutReorderEvent(focusedTile, this.owner.items ? this.owner.items.toArray() : [], focusedTile.order + reorderDir, focusedTile.order, focusedTile.col ? focusedTile.col + reorderDir : undefined, focusedTile.col, focusedTile.row, focusedTile.row);
|
|
156
|
+
this.owner.reorder.next(reorderEvent);
|
|
157
|
+
if (!reorderEvent.isDefaultPrevented()) {
|
|
158
|
+
reorder(reorderDir);
|
|
121
159
|
}
|
|
122
160
|
}
|
|
123
161
|
keepFocusWithinComponent(event, wrapper) {
|
|
@@ -165,7 +165,7 @@ export class TileLayoutItemComponent {
|
|
|
165
165
|
this.zone.runOutsideAngular(() => {
|
|
166
166
|
keyboardNavigation.changeTabIndex('-1', elem, this.focusableItems);
|
|
167
167
|
this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'keydown', event => keyboardNavigation.onKeyDown(event, elem, this.focusableItems, this.draggingService.tileLayoutSettings)));
|
|
168
|
-
this.keyboardNavigationSubs.add(this.renderer.listen(elem, '
|
|
168
|
+
this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'mousedown', event => keyboardNavigation.onMousedown(event, elem, this.focusableItems, this)));
|
|
169
169
|
this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'focusout', event => keyboardNavigation.onFocusOut(event, elem, this.focusableItems)));
|
|
170
170
|
});
|
|
171
171
|
}
|
|
@@ -192,6 +192,12 @@ export class TileLayoutItemComponent {
|
|
|
192
192
|
this.keyboardNavigationSubs.unsubscribe();
|
|
193
193
|
}
|
|
194
194
|
}
|
|
195
|
+
/**
|
|
196
|
+
* @hidden
|
|
197
|
+
*/
|
|
198
|
+
focus() {
|
|
199
|
+
this.elem.nativeElement.focus();
|
|
200
|
+
}
|
|
195
201
|
toggleCursorClass(isReorderable) {
|
|
196
202
|
const headerEl = this.elem.nativeElement.querySelector('.k-tilelayout-item-header');
|
|
197
203
|
if (!headerEl) {
|
|
@@ -151,6 +151,7 @@ export class TileLayoutComponent {
|
|
|
151
151
|
this.applyRowStyling();
|
|
152
152
|
this.draggingService.reorderable.next(this.reorderable);
|
|
153
153
|
this.draggingService.resizable.next(this.resizable);
|
|
154
|
+
this.navigationService.owner = this;
|
|
154
155
|
this.navigationService.navigable.next(this.navigable);
|
|
155
156
|
if (hasObservers(this.reorder)) {
|
|
156
157
|
this.subs.add(this.draggingService.reorder.subscribe(e => this.reorder.emit(e)));
|
|
@@ -179,6 +180,9 @@ export class TileLayoutComponent {
|
|
|
179
180
|
this.setItemsOrder();
|
|
180
181
|
this.draggingService.tileLayoutSettings.items = this.items.toArray();
|
|
181
182
|
});
|
|
183
|
+
this.zone.runOutsideAngular(() => {
|
|
184
|
+
this.elem.nativeElement.addEventListener('focusin', this.onFocusIn);
|
|
185
|
+
});
|
|
182
186
|
}
|
|
183
187
|
ngAfterContentInit() {
|
|
184
188
|
this.setItemsOrder();
|
|
@@ -211,6 +215,7 @@ export class TileLayoutComponent {
|
|
|
211
215
|
this.draggable.destroy();
|
|
212
216
|
}
|
|
213
217
|
this.subs.unsubscribe();
|
|
218
|
+
this.elem.nativeElement.removeEventListener('focusin', this.onFocusIn);
|
|
214
219
|
}
|
|
215
220
|
handlePress({ originalEvent }) {
|
|
216
221
|
this.draggingService.handlePress(originalEvent);
|
|
@@ -265,6 +270,15 @@ export class TileLayoutComponent {
|
|
|
265
270
|
}
|
|
266
271
|
});
|
|
267
272
|
}
|
|
273
|
+
onFocusIn = (e) => {
|
|
274
|
+
if (!this.navigable || this.navigationService.mousedown || !e.relatedTarget) {
|
|
275
|
+
this.navigationService.mousedown = false;
|
|
276
|
+
return;
|
|
277
|
+
}
|
|
278
|
+
if (!(this.elem.nativeElement.compareDocumentPosition(e.relatedTarget) & Node.DOCUMENT_POSITION_CONTAINED_BY)) {
|
|
279
|
+
this.navigationService.returnFocus();
|
|
280
|
+
}
|
|
281
|
+
};
|
|
268
282
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.TileLayoutDraggingService }, { token: i3.TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
269
283
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TileLayoutComponent, isStandalone: true, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow", navigable: "navigable" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-tilelayout": "this.hostClass", "attr.role": "this.hostRole", "style.gap": "this.gapStyle", "style.padding": "this.gapStyle", "attr.dir": "this.direction" } }, providers: [
|
|
270
284
|
LocalizationService,
|
|
@@ -29,8 +29,8 @@ const packageMetadata = {
|
|
|
29
29
|
productName: 'Kendo UI for Angular',
|
|
30
30
|
productCode: 'KENDOUIANGULAR',
|
|
31
31
|
productCodes: ['KENDOUIANGULAR'],
|
|
32
|
-
publishDate:
|
|
33
|
-
version: '18.1.0
|
|
32
|
+
publishDate: 1739287104,
|
|
33
|
+
version: '18.1.0',
|
|
34
34
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
35
35
|
};
|
|
36
36
|
|
|
@@ -261,7 +261,7 @@ const toClassList = (classNames) => String(classNames).trim().split(' ');
|
|
|
261
261
|
const isFocusable = (element) => {
|
|
262
262
|
if (element.tagName) {
|
|
263
263
|
const tagName = element.tagName.toLowerCase();
|
|
264
|
-
const tabIndex = element.getAttribute('
|
|
264
|
+
const tabIndex = element.getAttribute('tabindex');
|
|
265
265
|
const skipTab = tabIndex === '-1';
|
|
266
266
|
let focusable = tabIndex !== null && !skipTab;
|
|
267
267
|
if (focusableRegex.test(tagName)) {
|
|
@@ -9633,8 +9633,11 @@ class TileLayoutKeyboardNavigationService {
|
|
|
9633
9633
|
renderer;
|
|
9634
9634
|
localization;
|
|
9635
9635
|
navigable = new BehaviorSubject(false);
|
|
9636
|
+
owner;
|
|
9637
|
+
mousedown;
|
|
9636
9638
|
localizationSubscription;
|
|
9637
9639
|
rtl;
|
|
9640
|
+
lastFocused;
|
|
9638
9641
|
constructor(zone, renderer, localization) {
|
|
9639
9642
|
this.zone = zone;
|
|
9640
9643
|
this.renderer = renderer;
|
|
@@ -9649,6 +9652,8 @@ class TileLayoutKeyboardNavigationService {
|
|
|
9649
9652
|
const isTileFocused = document.activeElement === elem;
|
|
9650
9653
|
const focusedTile = settings.items.find(item => item.elem.nativeElement === elem);
|
|
9651
9654
|
const col = getCurrentCol(focusedTile, settings, this.rtl);
|
|
9655
|
+
const isArrow = [Keys.ArrowLeft, Keys.ArrowRight, Keys.ArrowDown, Keys.ArrowUp].some(key => key === event.keyCode);
|
|
9656
|
+
this.lastFocused = focusedTile;
|
|
9652
9657
|
if (keyCode === Keys.Enter && isTileFocused && focusableItems.length > 0) {
|
|
9653
9658
|
this.changeTabIndex('0', elem, focusableItems);
|
|
9654
9659
|
focusableItems[0].focus();
|
|
@@ -9657,19 +9662,39 @@ class TileLayoutKeyboardNavigationService {
|
|
|
9657
9662
|
this.changeTabIndex('-1', elem, focusableItems);
|
|
9658
9663
|
elem.focus();
|
|
9659
9664
|
}
|
|
9660
|
-
else if ((event.ctrlKey || event.metaKey) && isTileFocused && focusedTile.isResizable) {
|
|
9665
|
+
else if (isArrow && (event.ctrlKey || event.metaKey) && isTileFocused && focusedTile.isResizable) {
|
|
9661
9666
|
event.preventDefault();
|
|
9662
9667
|
this.zone.run(() => {
|
|
9663
9668
|
this.resizeItem(keyCode, focusedTile, settings, col);
|
|
9664
9669
|
});
|
|
9665
9670
|
}
|
|
9666
|
-
else if (event.shiftKey && isTileFocused && focusedTile.isReorderable) {
|
|
9671
|
+
else if (isArrow && event.shiftKey && isTileFocused && focusedTile.isReorderable) {
|
|
9667
9672
|
this.zone.run(() => {
|
|
9668
9673
|
this.reorderItem(keyCode, focusedTile, settings, col);
|
|
9669
9674
|
});
|
|
9670
9675
|
}
|
|
9671
|
-
else if (keyCode === Keys.Tab
|
|
9672
|
-
|
|
9676
|
+
else if (keyCode === Keys.Tab) {
|
|
9677
|
+
if (!isTileFocused) {
|
|
9678
|
+
this.keepFocusWithinComponent(event, elem);
|
|
9679
|
+
}
|
|
9680
|
+
else {
|
|
9681
|
+
const dir = event.shiftKey ? -1 : 1;
|
|
9682
|
+
const nextFocusableTileOrder = focusedTile.order + dir;
|
|
9683
|
+
if (nextFocusableTileOrder < 0 || nextFocusableTileOrder >= settings.items.length) {
|
|
9684
|
+
const first = settings.items[0];
|
|
9685
|
+
const last = settings.items[settings.items.length - 1];
|
|
9686
|
+
if (dir > 0) {
|
|
9687
|
+
last.focus();
|
|
9688
|
+
}
|
|
9689
|
+
else {
|
|
9690
|
+
first.focus();
|
|
9691
|
+
}
|
|
9692
|
+
return;
|
|
9693
|
+
}
|
|
9694
|
+
event.preventDefault();
|
|
9695
|
+
this.lastFocused = settings.items.find(item => item.order === nextFocusableTileOrder);
|
|
9696
|
+
this.lastFocused?.focus();
|
|
9697
|
+
}
|
|
9673
9698
|
}
|
|
9674
9699
|
}
|
|
9675
9700
|
onFocusOut(event, elem, focusableItems) {
|
|
@@ -9680,8 +9705,10 @@ class TileLayoutKeyboardNavigationService {
|
|
|
9680
9705
|
event.relatedTarget?.focus();
|
|
9681
9706
|
}
|
|
9682
9707
|
}
|
|
9683
|
-
|
|
9708
|
+
onMousedown(event, elem, focusableItems, tile) {
|
|
9709
|
+
this.mousedown = true;
|
|
9684
9710
|
const isTargetFocusable = focusableItems.includes(event.target);
|
|
9711
|
+
this.lastFocused = tile;
|
|
9685
9712
|
if (isTargetFocusable) {
|
|
9686
9713
|
this.changeTabIndex('0', elem, focusableItems);
|
|
9687
9714
|
event.target.focus();
|
|
@@ -9696,42 +9723,51 @@ class TileLayoutKeyboardNavigationService {
|
|
|
9696
9723
|
getAllFocusableChildren(parent) {
|
|
9697
9724
|
return Array.from(parent.querySelectorAll(focusableSelector)).filter((element) => element.offsetParent !== null);
|
|
9698
9725
|
}
|
|
9726
|
+
returnFocus() {
|
|
9727
|
+
this.lastFocused ? this.lastFocused.focus() : this.owner.items.find(item => item.order === 0).focus();
|
|
9728
|
+
}
|
|
9699
9729
|
resizeItem(keyCode, focusedTile, settings, col) {
|
|
9700
9730
|
const { resizeRight, resizeLeft, resizeDown, resizeUp } = shouldResize(keyCode, col, focusedTile, settings);
|
|
9701
9731
|
const resizeHorizontal = resizeLeft || resizeRight;
|
|
9702
9732
|
const resizeVertical = resizeDown || resizeUp;
|
|
9703
9733
|
const resizeDir = resizeLeft || resizeUp ? -1 : 1;
|
|
9704
|
-
if (resizeHorizontal) {
|
|
9705
|
-
|
|
9734
|
+
if (!(resizeHorizontal || resizeVertical)) {
|
|
9735
|
+
return;
|
|
9706
9736
|
}
|
|
9707
|
-
|
|
9708
|
-
|
|
9737
|
+
const resizeEvent = new TileLayoutResizeEvent(focusedTile, this.owner.items ? this.owner.items.toArray() : [], focusedTile.rowSpan + resizeDir, focusedTile.rowSpan, focusedTile.colSpan + resizeDir, focusedTile.colSpan);
|
|
9738
|
+
this.owner.resize.emit(resizeEvent);
|
|
9739
|
+
if (!resizeEvent.isDefaultPrevented()) {
|
|
9740
|
+
if (resizeHorizontal) {
|
|
9741
|
+
focusedTile.colSpan += resizeDir;
|
|
9742
|
+
}
|
|
9743
|
+
else if (resizeVertical) {
|
|
9744
|
+
focusedTile.rowSpan += resizeDir;
|
|
9745
|
+
}
|
|
9709
9746
|
}
|
|
9710
9747
|
}
|
|
9711
9748
|
reorderItem(keyCode, focusedTile, settings, col) {
|
|
9712
9749
|
const { reorderLeft, reorderRight } = shouldReorder(keyCode, col, focusedTile, settings);
|
|
9713
|
-
|
|
9714
|
-
|
|
9715
|
-
|
|
9716
|
-
|
|
9717
|
-
|
|
9718
|
-
|
|
9719
|
-
|
|
9720
|
-
|
|
9721
|
-
|
|
9722
|
-
|
|
9723
|
-
focusedTile.order
|
|
9724
|
-
|
|
9750
|
+
if (!(reorderLeft || reorderRight)) {
|
|
9751
|
+
return;
|
|
9752
|
+
}
|
|
9753
|
+
const reorder = (dir) => {
|
|
9754
|
+
const relatedTile = this.targetTile(focusedTile, settings.items, dir);
|
|
9755
|
+
if (relatedTile) {
|
|
9756
|
+
relatedTile.order -= dir;
|
|
9757
|
+
if (relatedTile.col) {
|
|
9758
|
+
relatedTile.col -= dir;
|
|
9759
|
+
}
|
|
9760
|
+
focusedTile.order += dir;
|
|
9761
|
+
if (focusedTile.col) {
|
|
9762
|
+
focusedTile.col += dir;
|
|
9763
|
+
}
|
|
9725
9764
|
}
|
|
9726
9765
|
};
|
|
9727
|
-
|
|
9728
|
-
|
|
9729
|
-
|
|
9730
|
-
|
|
9731
|
-
|
|
9732
|
-
else {
|
|
9733
|
-
reorderRight ? onReorderRight() : onReorderLeft();
|
|
9734
|
-
}
|
|
9766
|
+
const reorderDir = reorderRight ? 1 : -1;
|
|
9767
|
+
const reorderEvent = new TileLayoutReorderEvent(focusedTile, this.owner.items ? this.owner.items.toArray() : [], focusedTile.order + reorderDir, focusedTile.order, focusedTile.col ? focusedTile.col + reorderDir : undefined, focusedTile.col, focusedTile.row, focusedTile.row);
|
|
9768
|
+
this.owner.reorder.next(reorderEvent);
|
|
9769
|
+
if (!reorderEvent.isDefaultPrevented()) {
|
|
9770
|
+
reorder(reorderDir);
|
|
9735
9771
|
}
|
|
9736
9772
|
}
|
|
9737
9773
|
keepFocusWithinComponent(event, wrapper) {
|
|
@@ -9995,7 +10031,7 @@ class TileLayoutItemComponent {
|
|
|
9995
10031
|
this.zone.runOutsideAngular(() => {
|
|
9996
10032
|
keyboardNavigation.changeTabIndex('-1', elem, this.focusableItems);
|
|
9997
10033
|
this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'keydown', event => keyboardNavigation.onKeyDown(event, elem, this.focusableItems, this.draggingService.tileLayoutSettings)));
|
|
9998
|
-
this.keyboardNavigationSubs.add(this.renderer.listen(elem, '
|
|
10034
|
+
this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'mousedown', event => keyboardNavigation.onMousedown(event, elem, this.focusableItems, this)));
|
|
9999
10035
|
this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'focusout', event => keyboardNavigation.onFocusOut(event, elem, this.focusableItems)));
|
|
10000
10036
|
});
|
|
10001
10037
|
}
|
|
@@ -10022,6 +10058,12 @@ class TileLayoutItemComponent {
|
|
|
10022
10058
|
this.keyboardNavigationSubs.unsubscribe();
|
|
10023
10059
|
}
|
|
10024
10060
|
}
|
|
10061
|
+
/**
|
|
10062
|
+
* @hidden
|
|
10063
|
+
*/
|
|
10064
|
+
focus() {
|
|
10065
|
+
this.elem.nativeElement.focus();
|
|
10066
|
+
}
|
|
10025
10067
|
toggleCursorClass(isReorderable) {
|
|
10026
10068
|
const headerEl = this.elem.nativeElement.querySelector('.k-tilelayout-item-header');
|
|
10027
10069
|
if (!headerEl) {
|
|
@@ -10263,6 +10305,7 @@ class TileLayoutComponent {
|
|
|
10263
10305
|
this.applyRowStyling();
|
|
10264
10306
|
this.draggingService.reorderable.next(this.reorderable);
|
|
10265
10307
|
this.draggingService.resizable.next(this.resizable);
|
|
10308
|
+
this.navigationService.owner = this;
|
|
10266
10309
|
this.navigationService.navigable.next(this.navigable);
|
|
10267
10310
|
if (hasObservers(this.reorder)) {
|
|
10268
10311
|
this.subs.add(this.draggingService.reorder.subscribe(e => this.reorder.emit(e)));
|
|
@@ -10291,6 +10334,9 @@ class TileLayoutComponent {
|
|
|
10291
10334
|
this.setItemsOrder();
|
|
10292
10335
|
this.draggingService.tileLayoutSettings.items = this.items.toArray();
|
|
10293
10336
|
});
|
|
10337
|
+
this.zone.runOutsideAngular(() => {
|
|
10338
|
+
this.elem.nativeElement.addEventListener('focusin', this.onFocusIn);
|
|
10339
|
+
});
|
|
10294
10340
|
}
|
|
10295
10341
|
ngAfterContentInit() {
|
|
10296
10342
|
this.setItemsOrder();
|
|
@@ -10323,6 +10369,7 @@ class TileLayoutComponent {
|
|
|
10323
10369
|
this.draggable.destroy();
|
|
10324
10370
|
}
|
|
10325
10371
|
this.subs.unsubscribe();
|
|
10372
|
+
this.elem.nativeElement.removeEventListener('focusin', this.onFocusIn);
|
|
10326
10373
|
}
|
|
10327
10374
|
handlePress({ originalEvent }) {
|
|
10328
10375
|
this.draggingService.handlePress(originalEvent);
|
|
@@ -10377,6 +10424,15 @@ class TileLayoutComponent {
|
|
|
10377
10424
|
}
|
|
10378
10425
|
});
|
|
10379
10426
|
}
|
|
10427
|
+
onFocusIn = (e) => {
|
|
10428
|
+
if (!this.navigable || this.navigationService.mousedown || !e.relatedTarget) {
|
|
10429
|
+
this.navigationService.mousedown = false;
|
|
10430
|
+
return;
|
|
10431
|
+
}
|
|
10432
|
+
if (!(this.elem.nativeElement.compareDocumentPosition(e.relatedTarget) & Node.DOCUMENT_POSITION_CONTAINED_BY)) {
|
|
10433
|
+
this.navigationService.returnFocus();
|
|
10434
|
+
}
|
|
10435
|
+
};
|
|
10380
10436
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: TileLayoutDraggingService }, { token: TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10381
10437
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TileLayoutComponent, isStandalone: true, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow", navigable: "navigable" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-tilelayout": "this.hostClass", "attr.role": "this.hostRole", "style.gap": "this.gapStyle", "style.padding": "this.gapStyle", "attr.dir": "this.direction" } }, providers: [
|
|
10382
10438
|
LocalizationService,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-layout",
|
|
3
|
-
"version": "18.1.0
|
|
3
|
+
"version": "18.1.0",
|
|
4
4
|
"description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"package": {
|
|
36
36
|
"productName": "Kendo UI for Angular",
|
|
37
37
|
"productCode": "KENDOUIANGULAR",
|
|
38
|
-
"publishDate":
|
|
38
|
+
"publishDate": 1739287104,
|
|
39
39
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
|
|
40
40
|
}
|
|
41
41
|
},
|
|
@@ -44,18 +44,18 @@
|
|
|
44
44
|
"@angular/common": "16 - 19",
|
|
45
45
|
"@angular/core": "16 - 19",
|
|
46
46
|
"@angular/platform-browser": "16 - 19",
|
|
47
|
-
"@progress/kendo-licensing": "^1.0
|
|
48
|
-
"@progress/kendo-angular-common": "18.1.0
|
|
49
|
-
"@progress/kendo-angular-l10n": "18.1.0
|
|
50
|
-
"@progress/kendo-angular-progressbar": "18.1.0
|
|
51
|
-
"@progress/kendo-angular-icons": "18.1.0
|
|
52
|
-
"@progress/kendo-angular-buttons": "18.1.0
|
|
53
|
-
"@progress/kendo-angular-intl": "18.1.0
|
|
47
|
+
"@progress/kendo-licensing": "^1.4.0",
|
|
48
|
+
"@progress/kendo-angular-common": "18.1.0",
|
|
49
|
+
"@progress/kendo-angular-l10n": "18.1.0",
|
|
50
|
+
"@progress/kendo-angular-progressbar": "18.1.0",
|
|
51
|
+
"@progress/kendo-angular-icons": "18.1.0",
|
|
52
|
+
"@progress/kendo-angular-buttons": "18.1.0",
|
|
53
|
+
"@progress/kendo-angular-intl": "18.1.0",
|
|
54
54
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
57
|
"tslib": "^2.3.1",
|
|
58
|
-
"@progress/kendo-angular-schematics": "18.1.0
|
|
58
|
+
"@progress/kendo-angular-schematics": "18.1.0",
|
|
59
59
|
"@progress/kendo-draggable": "^3.0.2"
|
|
60
60
|
},
|
|
61
61
|
"schematics": "./schematics/collection.json",
|
|
@@ -6,6 +6,8 @@ import { NgZone, Renderer2 } from '@angular/core';
|
|
|
6
6
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
7
|
import { BehaviorSubject } from 'rxjs';
|
|
8
8
|
import { DraggingServiceConfig } from './models/dragging-config.interface';
|
|
9
|
+
import { TileLayoutItemComponent } from './tilelayout-item.component';
|
|
10
|
+
import { TileLayoutComponent } from './tilelayout.component';
|
|
9
11
|
import * as i0 from "@angular/core";
|
|
10
12
|
/**
|
|
11
13
|
* @hidden
|
|
@@ -15,15 +17,19 @@ export declare class TileLayoutKeyboardNavigationService {
|
|
|
15
17
|
private renderer;
|
|
16
18
|
private localization;
|
|
17
19
|
navigable: BehaviorSubject<boolean>;
|
|
20
|
+
owner: TileLayoutComponent;
|
|
21
|
+
mousedown: boolean;
|
|
18
22
|
private localizationSubscription;
|
|
19
23
|
private rtl;
|
|
24
|
+
private lastFocused;
|
|
20
25
|
constructor(zone: NgZone, renderer: Renderer2, localization: LocalizationService);
|
|
21
26
|
ngOnDestroy(): void;
|
|
22
27
|
onKeyDown(event: any, elem: HTMLElement, focusableItems: Array<HTMLElement>, settings: DraggingServiceConfig): void;
|
|
23
28
|
onFocusOut(event: any, elem: HTMLElement, focusableItems: Array<HTMLElement>): void;
|
|
24
|
-
|
|
29
|
+
onMousedown(event: any, elem: HTMLElement, focusableItems: Array<HTMLElement>, tile: TileLayoutItemComponent): void;
|
|
25
30
|
changeTabIndex(tabIndex: string, elem: HTMLElement, focusableItems: Array<HTMLElement>): void;
|
|
26
31
|
getAllFocusableChildren(parent: any): Array<any>;
|
|
32
|
+
returnFocus(): void;
|
|
27
33
|
private resizeItem;
|
|
28
34
|
private reorderItem;
|
|
29
35
|
private keepFocusWithinComponent;
|
|
@@ -101,6 +101,10 @@ export declare class TileLayoutItemComponent implements AfterViewInit, OnDestroy
|
|
|
101
101
|
ngAfterViewInit(): void;
|
|
102
102
|
ngOnChanges(changes: SimpleChanges): void;
|
|
103
103
|
ngOnDestroy(): void;
|
|
104
|
+
/**
|
|
105
|
+
* @hidden
|
|
106
|
+
*/
|
|
107
|
+
focus(): void;
|
|
104
108
|
private toggleCursorClass;
|
|
105
109
|
static ɵfac: i0.ɵɵFactoryDeclaration<TileLayoutItemComponent, never>;
|
|
106
110
|
static ɵcmp: i0.ɵɵComponentDeclaration<TileLayoutItemComponent, "kendo-tilelayout-item", never, { "title": { "alias": "title"; "required": false; }; "rowSpan": { "alias": "rowSpan"; "required": false; }; "colSpan": { "alias": "colSpan"; "required": false; }; "order": { "alias": "order"; "required": false; }; "col": { "alias": "col"; "required": false; }; "row": { "alias": "row"; "required": false; }; "reorderable": { "alias": "reorderable"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; }, {}, ["headers"], ["*"], true, never>;
|
|
@@ -122,6 +122,7 @@ export declare class TileLayoutComponent implements OnInit, AfterViewInit, After
|
|
|
122
122
|
private initializeDraggable;
|
|
123
123
|
private applyAutoFlow;
|
|
124
124
|
private setItemsOrder;
|
|
125
|
+
private onFocusIn;
|
|
125
126
|
static ɵfac: i0.ɵɵFactoryDeclaration<TileLayoutComponent, never>;
|
|
126
127
|
static ɵcmp: i0.ɵɵComponentDeclaration<TileLayoutComponent, "kendo-tilelayout", never, { "columns": { "alias": "columns"; "required": false; }; "columnWidth": { "alias": "columnWidth"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "reorderable": { "alias": "reorderable"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "autoFlow": { "alias": "autoFlow"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; }, { "reorder": "reorder"; "resize": "resize"; }, ["items"], ["*"], true, never>;
|
|
127
128
|
}
|