@progress/kendo-angular-layout 18.1.0-develop.30 → 18.1.0-develop.5

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.
Files changed (10) hide show
  1. package/esm2022/common/dom-queries.mjs +1 -1
  2. package/esm2022/package-metadata.mjs +2 -2
  3. package/esm2022/tilelayout/keyboard-navigation.service.mjs +29 -67
  4. package/esm2022/tilelayout/tilelayout-item.component.mjs +1 -7
  5. package/esm2022/tilelayout/tilelayout.component.mjs +0 -14
  6. package/fesm2022/progress-kendo-angular-layout.mjs +33 -89
  7. package/package.json +10 -10
  8. package/tilelayout/keyboard-navigation.service.d.ts +1 -7
  9. package/tilelayout/tilelayout-item.component.d.ts +0 -4
  10. package/tilelayout/tilelayout.component.d.ts +0 -1
package/esm2022/common/dom-queries.mjs CHANGED
@@ -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('tabindex');
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)) {
package/esm2022/package-metadata.mjs CHANGED
@@ -10,7 +10,7 @@ export const packageMetadata = {
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCode: 'KENDOUIANGULAR',
12
12
  productCodes: ['KENDOUIANGULAR'],
13
- publishDate: 1738962031,
14
- version: '18.1.0-develop.30',
13
+ publishDate: 1738324900,
14
+ version: '18.1.0-develop.5',
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
  };
package/esm2022/tilelayout/keyboard-navigation.service.mjs CHANGED
@@ -9,8 +9,6 @@ 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';
14
12
  import * as i0 from "@angular/core";
15
13
  import * as i1 from "@progress/kendo-angular-l10n";
16
14
  /**
@@ -21,11 +19,8 @@ export class TileLayoutKeyboardNavigationService {
21
19
  renderer;
22
20
  localization;
23
21
  navigable = new BehaviorSubject(false);
24
- owner;
25
- mousedown;
26
22
  localizationSubscription;
27
23
  rtl;
28
- lastFocused;
29
24
  constructor(zone, renderer, localization) {
30
25
  this.zone = zone;
31
26
  this.renderer = renderer;
@@ -40,8 +35,6 @@ export class TileLayoutKeyboardNavigationService {
40
35
  const isTileFocused = document.activeElement === elem;
41
36
  const focusedTile = settings.items.find(item => item.elem.nativeElement === elem);
42
37
  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;
45
38
  if (keyCode === Keys.Enter && isTileFocused && focusableItems.length > 0) {
46
39
  this.changeTabIndex('0', elem, focusableItems);
47
40
  focusableItems[0].focus();
@@ -50,39 +43,19 @@ export class TileLayoutKeyboardNavigationService {
50
43
  this.changeTabIndex('-1', elem, focusableItems);
51
44
  elem.focus();
52
45
  }
53
- else if (isArrow && (event.ctrlKey || event.metaKey) && isTileFocused && focusedTile.isResizable) {
46
+ else if ((event.ctrlKey || event.metaKey) && isTileFocused && focusedTile.isResizable) {
54
47
  event.preventDefault();
55
48
  this.zone.run(() => {
56
49
  this.resizeItem(keyCode, focusedTile, settings, col);
57
50
  });
58
51
  }
59
- else if (isArrow && event.shiftKey && isTileFocused && focusedTile.isReorderable) {
52
+ else if (event.shiftKey && isTileFocused && focusedTile.isReorderable) {
60
53
  this.zone.run(() => {
61
54
  this.reorderItem(keyCode, focusedTile, settings, col);
62
55
  });
63
56
  }
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
- }
57
+ else if (keyCode === Keys.Tab && !isTileFocused) {
58
+ this.keepFocusWithinComponent(event, elem);
86
59
  }
87
60
  }
88
61
  onFocusOut(event, elem, focusableItems) {
@@ -93,10 +66,8 @@ export class TileLayoutKeyboardNavigationService {
93
66
  event.relatedTarget?.focus();
94
67
  }
95
68
  }
96
- onMousedown(event, elem, focusableItems, tile) {
97
- this.mousedown = true;
69
+ onClick(event, elem, focusableItems) {
98
70
  const isTargetFocusable = focusableItems.includes(event.target);
99
- this.lastFocused = tile;
100
71
  if (isTargetFocusable) {
101
72
  this.changeTabIndex('0', elem, focusableItems);
102
73
  event.target.focus();
@@ -111,51 +82,42 @@ export class TileLayoutKeyboardNavigationService {
111
82
  getAllFocusableChildren(parent) {
112
83
  return Array.from(parent.querySelectorAll(focusableSelector)).filter((element) => element.offsetParent !== null);
113
84
  }
114
- returnFocus() {
115
- this.lastFocused ? this.lastFocused.focus() : this.owner.items.find(item => item.order === 0).focus();
116
- }
117
85
  resizeItem(keyCode, focusedTile, settings, col) {
118
86
  const { resizeRight, resizeLeft, resizeDown, resizeUp } = shouldResize(keyCode, col, focusedTile, settings);
119
87
  const resizeHorizontal = resizeLeft || resizeRight;
120
88
  const resizeVertical = resizeDown || resizeUp;
121
89
  const resizeDir = resizeLeft || resizeUp ? -1 : 1;
122
- if (!(resizeHorizontal || resizeVertical)) {
123
- return;
90
+ if (resizeHorizontal) {
91
+ focusedTile.colSpan += resizeDir;
124
92
  }
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
- }
93
+ else if (resizeVertical) {
94
+ focusedTile.rowSpan += resizeDir;
134
95
  }
135
96
  }
136
97
  reorderItem(keyCode, focusedTile, settings, col) {
137
98
  const { reorderLeft, reorderRight } = shouldReorder(keyCode, col, focusedTile, settings);
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
- }
99
+ const onReorderRight = () => {
100
+ const nextTile = this.targetTile(focusedTile, settings.items, 1);
101
+ if (nextTile) {
102
+ focusedTile.order += 1;
103
+ nextTile.order -= 1;
104
+ }
105
+ };
106
+ const onReorderLeft = () => {
107
+ const prevTile = this.targetTile(focusedTile, settings.items, -1);
108
+ if (prevTile) {
109
+ focusedTile.order -= 1;
110
+ prevTile.order += 1;
152
111
  }
153
112
  };
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);
113
+ if (reorderRight || reorderLeft) {
114
+ const reorderDir = reorderRight ? 1 : -1;
115
+ if (focusedTile.col) {
116
+ focusedTile.col += reorderDir;
117
+ }
118
+ else {
119
+ reorderRight ? onReorderRight() : onReorderLeft();
120
+ }
159
121
  }
160
122
  }
161
123
  keepFocusWithinComponent(event, wrapper) {
package/esm2022/tilelayout/tilelayout-item.component.mjs CHANGED
@@ -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, 'mousedown', event => keyboardNavigation.onMousedown(event, elem, this.focusableItems, this)));
168
+ this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'click', event => keyboardNavigation.onClick(event, elem, this.focusableItems)));
169
169
  this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'focusout', event => keyboardNavigation.onFocusOut(event, elem, this.focusableItems)));
170
170
  });
171
171
  }
@@ -192,12 +192,6 @@ export class TileLayoutItemComponent {
192
192
  this.keyboardNavigationSubs.unsubscribe();
193
193
  }
194
194
  }
195
- /**
196
- * @hidden
197
- */
198
- focus() {
199
- this.elem.nativeElement.focus();
200
- }
201
195
  toggleCursorClass(isReorderable) {
202
196
  const headerEl = this.elem.nativeElement.querySelector('.k-tilelayout-item-header');
203
197
  if (!headerEl) {
package/esm2022/tilelayout/tilelayout.component.mjs CHANGED
@@ -151,7 +151,6 @@ 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;
155
154
  this.navigationService.navigable.next(this.navigable);
156
155
  if (hasObservers(this.reorder)) {
157
156
  this.subs.add(this.draggingService.reorder.subscribe(e => this.reorder.emit(e)));
@@ -180,9 +179,6 @@ export class TileLayoutComponent {
180
179
  this.setItemsOrder();
181
180
  this.draggingService.tileLayoutSettings.items = this.items.toArray();
182
181
  });
183
- this.zone.runOutsideAngular(() => {
184
- this.elem.nativeElement.addEventListener('focusin', this.onFocusIn);
185
- });
186
182
  }
187
183
  ngAfterContentInit() {
188
184
  this.setItemsOrder();
@@ -215,7 +211,6 @@ export class TileLayoutComponent {
215
211
  this.draggable.destroy();
216
212
  }
217
213
  this.subs.unsubscribe();
218
- this.elem.nativeElement.removeEventListener('focusin', this.onFocusIn);
219
214
  }
220
215
  handlePress({ originalEvent }) {
221
216
  this.draggingService.handlePress(originalEvent);
@@ -270,15 +265,6 @@ export class TileLayoutComponent {
270
265
  }
271
266
  });
272
267
  }
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
- };
282
268
  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 });
283
269
  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: [
284
270
  LocalizationService,
package/fesm2022/progress-kendo-angular-layout.mjs CHANGED
@@ -29,8 +29,8 @@ const packageMetadata = {
29
29
  productName: 'Kendo UI for Angular',
30
30
  productCode: 'KENDOUIANGULAR',
31
31
  productCodes: ['KENDOUIANGULAR'],
32
- publishDate: 1738962031,
33
- version: '18.1.0-develop.30',
32
+ publishDate: 1738324900,
33
+ version: '18.1.0-develop.5',
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('tabindex');
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,11 +9633,8 @@ class TileLayoutKeyboardNavigationService {
9633
9633
  renderer;
9634
9634
  localization;
9635
9635
  navigable = new BehaviorSubject(false);
9636
- owner;
9637
- mousedown;
9638
9636
  localizationSubscription;
9639
9637
  rtl;
9640
- lastFocused;
9641
9638
  constructor(zone, renderer, localization) {
9642
9639
  this.zone = zone;
9643
9640
  this.renderer = renderer;
@@ -9652,8 +9649,6 @@ class TileLayoutKeyboardNavigationService {
9652
9649
  const isTileFocused = document.activeElement === elem;
9653
9650
  const focusedTile = settings.items.find(item => item.elem.nativeElement === elem);
9654
9651
  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;
9657
9652
  if (keyCode === Keys.Enter && isTileFocused && focusableItems.length > 0) {
9658
9653
  this.changeTabIndex('0', elem, focusableItems);
9659
9654
  focusableItems[0].focus();
@@ -9662,39 +9657,19 @@ class TileLayoutKeyboardNavigationService {
9662
9657
  this.changeTabIndex('-1', elem, focusableItems);
9663
9658
  elem.focus();
9664
9659
  }
9665
- else if (isArrow && (event.ctrlKey || event.metaKey) && isTileFocused && focusedTile.isResizable) {
9660
+ else if ((event.ctrlKey || event.metaKey) && isTileFocused && focusedTile.isResizable) {
9666
9661
  event.preventDefault();
9667
9662
  this.zone.run(() => {
9668
9663
  this.resizeItem(keyCode, focusedTile, settings, col);
9669
9664
  });
9670
9665
  }
9671
- else if (isArrow && event.shiftKey && isTileFocused && focusedTile.isReorderable) {
9666
+ else if (event.shiftKey && isTileFocused && focusedTile.isReorderable) {
9672
9667
  this.zone.run(() => {
9673
9668
  this.reorderItem(keyCode, focusedTile, settings, col);
9674
9669
  });
9675
9670
  }
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
- }
9671
+ else if (keyCode === Keys.Tab && !isTileFocused) {
9672
+ this.keepFocusWithinComponent(event, elem);
9698
9673
  }
9699
9674
  }
9700
9675
  onFocusOut(event, elem, focusableItems) {
@@ -9705,10 +9680,8 @@ class TileLayoutKeyboardNavigationService {
9705
9680
  event.relatedTarget?.focus();
9706
9681
  }
9707
9682
  }
9708
- onMousedown(event, elem, focusableItems, tile) {
9709
- this.mousedown = true;
9683
+ onClick(event, elem, focusableItems) {
9710
9684
  const isTargetFocusable = focusableItems.includes(event.target);
9711
- this.lastFocused = tile;
9712
9685
  if (isTargetFocusable) {
9713
9686
  this.changeTabIndex('0', elem, focusableItems);
9714
9687
  event.target.focus();
@@ -9723,51 +9696,42 @@ class TileLayoutKeyboardNavigationService {
9723
9696
  getAllFocusableChildren(parent) {
9724
9697
  return Array.from(parent.querySelectorAll(focusableSelector)).filter((element) => element.offsetParent !== null);
9725
9698
  }
9726
- returnFocus() {
9727
- this.lastFocused ? this.lastFocused.focus() : this.owner.items.find(item => item.order === 0).focus();
9728
- }
9729
9699
  resizeItem(keyCode, focusedTile, settings, col) {
9730
9700
  const { resizeRight, resizeLeft, resizeDown, resizeUp } = shouldResize(keyCode, col, focusedTile, settings);
9731
9701
  const resizeHorizontal = resizeLeft || resizeRight;
9732
9702
  const resizeVertical = resizeDown || resizeUp;
9733
9703
  const resizeDir = resizeLeft || resizeUp ? -1 : 1;
9734
- if (!(resizeHorizontal || resizeVertical)) {
9735
- return;
9704
+ if (resizeHorizontal) {
9705
+ focusedTile.colSpan += resizeDir;
9736
9706
  }
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
- }
9707
+ else if (resizeVertical) {
9708
+ focusedTile.rowSpan += resizeDir;
9746
9709
  }
9747
9710
  }
9748
9711
  reorderItem(keyCode, focusedTile, settings, col) {
9749
9712
  const { reorderLeft, reorderRight } = shouldReorder(keyCode, col, focusedTile, settings);
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
- }
9713
+ const onReorderRight = () => {
9714
+ const nextTile = this.targetTile(focusedTile, settings.items, 1);
9715
+ if (nextTile) {
9716
+ focusedTile.order += 1;
9717
+ nextTile.order -= 1;
9718
+ }
9719
+ };
9720
+ const onReorderLeft = () => {
9721
+ const prevTile = this.targetTile(focusedTile, settings.items, -1);
9722
+ if (prevTile) {
9723
+ focusedTile.order -= 1;
9724
+ prevTile.order += 1;
9764
9725
  }
9765
9726
  };
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);
9727
+ if (reorderRight || reorderLeft) {
9728
+ const reorderDir = reorderRight ? 1 : -1;
9729
+ if (focusedTile.col) {
9730
+ focusedTile.col += reorderDir;
9731
+ }
9732
+ else {
9733
+ reorderRight ? onReorderRight() : onReorderLeft();
9734
+ }
9771
9735
  }
9772
9736
  }
9773
9737
  keepFocusWithinComponent(event, wrapper) {
@@ -10031,7 +9995,7 @@ class TileLayoutItemComponent {
10031
9995
  this.zone.runOutsideAngular(() => {
10032
9996
  keyboardNavigation.changeTabIndex('-1', elem, this.focusableItems);
10033
9997
  this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'keydown', event => keyboardNavigation.onKeyDown(event, elem, this.focusableItems, this.draggingService.tileLayoutSettings)));
10034
- this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'mousedown', event => keyboardNavigation.onMousedown(event, elem, this.focusableItems, this)));
9998
+ this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'click', event => keyboardNavigation.onClick(event, elem, this.focusableItems)));
10035
9999
  this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'focusout', event => keyboardNavigation.onFocusOut(event, elem, this.focusableItems)));
10036
10000
  });
10037
10001
  }
@@ -10058,12 +10022,6 @@ class TileLayoutItemComponent {
10058
10022
  this.keyboardNavigationSubs.unsubscribe();
10059
10023
  }
10060
10024
  }
10061
- /**
10062
- * @hidden
10063
- */
10064
- focus() {
10065
- this.elem.nativeElement.focus();
10066
- }
10067
10025
  toggleCursorClass(isReorderable) {
10068
10026
  const headerEl = this.elem.nativeElement.querySelector('.k-tilelayout-item-header');
10069
10027
  if (!headerEl) {
@@ -10305,7 +10263,6 @@ class TileLayoutComponent {
10305
10263
  this.applyRowStyling();
10306
10264
  this.draggingService.reorderable.next(this.reorderable);
10307
10265
  this.draggingService.resizable.next(this.resizable);
10308
- this.navigationService.owner = this;
10309
10266
  this.navigationService.navigable.next(this.navigable);
10310
10267
  if (hasObservers(this.reorder)) {
10311
10268
  this.subs.add(this.draggingService.reorder.subscribe(e => this.reorder.emit(e)));
@@ -10334,9 +10291,6 @@ class TileLayoutComponent {
10334
10291
  this.setItemsOrder();
10335
10292
  this.draggingService.tileLayoutSettings.items = this.items.toArray();
10336
10293
  });
10337
- this.zone.runOutsideAngular(() => {
10338
- this.elem.nativeElement.addEventListener('focusin', this.onFocusIn);
10339
- });
10340
10294
  }
10341
10295
  ngAfterContentInit() {
10342
10296
  this.setItemsOrder();
@@ -10369,7 +10323,6 @@ class TileLayoutComponent {
10369
10323
  this.draggable.destroy();
10370
10324
  }
10371
10325
  this.subs.unsubscribe();
10372
- this.elem.nativeElement.removeEventListener('focusin', this.onFocusIn);
10373
10326
  }
10374
10327
  handlePress({ originalEvent }) {
10375
10328
  this.draggingService.handlePress(originalEvent);
@@ -10424,15 +10377,6 @@ class TileLayoutComponent {
10424
10377
  }
10425
10378
  });
10426
10379
  }
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
- };
10436
10380
  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 });
10437
10381
  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: [
10438
10382
  LocalizationService,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-layout",
3
- "version": "18.1.0-develop.30",
3
+ "version": "18.1.0-develop.5",
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": 1738962031,
38
+ "publishDate": 1738324900,
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.4.0",
48
- "@progress/kendo-angular-common": "18.1.0-develop.30",
49
- "@progress/kendo-angular-l10n": "18.1.0-develop.30",
50
- "@progress/kendo-angular-progressbar": "18.1.0-develop.30",
51
- "@progress/kendo-angular-icons": "18.1.0-develop.30",
52
- "@progress/kendo-angular-buttons": "18.1.0-develop.30",
53
- "@progress/kendo-angular-intl": "18.1.0-develop.30",
47
+ "@progress/kendo-licensing": "^1.0.2",
48
+ "@progress/kendo-angular-common": "18.1.0-develop.5",
49
+ "@progress/kendo-angular-l10n": "18.1.0-develop.5",
50
+ "@progress/kendo-angular-progressbar": "18.1.0-develop.5",
51
+ "@progress/kendo-angular-icons": "18.1.0-develop.5",
52
+ "@progress/kendo-angular-buttons": "18.1.0-develop.5",
53
+ "@progress/kendo-angular-intl": "18.1.0-develop.5",
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-develop.30",
58
+ "@progress/kendo-angular-schematics": "18.1.0-develop.5",
59
59
  "@progress/kendo-draggable": "^3.0.2"
60
60
  },
61
61
  "schematics": "./schematics/collection.json",
package/tilelayout/keyboard-navigation.service.d.ts CHANGED
@@ -6,8 +6,6 @@ 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';
11
9
  import * as i0 from "@angular/core";
12
10
  /**
13
11
  * @hidden
@@ -17,19 +15,15 @@ export declare class TileLayoutKeyboardNavigationService {
17
15
  private renderer;
18
16
  private localization;
19
17
  navigable: BehaviorSubject<boolean>;
20
- owner: TileLayoutComponent;
21
- mousedown: boolean;
22
18
  private localizationSubscription;
23
19
  private rtl;
24
- private lastFocused;
25
20
  constructor(zone: NgZone, renderer: Renderer2, localization: LocalizationService);
26
21
  ngOnDestroy(): void;
27
22
  onKeyDown(event: any, elem: HTMLElement, focusableItems: Array<HTMLElement>, settings: DraggingServiceConfig): void;
28
23
  onFocusOut(event: any, elem: HTMLElement, focusableItems: Array<HTMLElement>): void;
29
- onMousedown(event: any, elem: HTMLElement, focusableItems: Array<HTMLElement>, tile: TileLayoutItemComponent): void;
24
+ onClick(event: any, elem: HTMLElement, focusableItems: Array<HTMLElement>): void;
30
25
  changeTabIndex(tabIndex: string, elem: HTMLElement, focusableItems: Array<HTMLElement>): void;
31
26
  getAllFocusableChildren(parent: any): Array<any>;
32
- returnFocus(): void;
33
27
  private resizeItem;
34
28
  private reorderItem;
35
29
  private keepFocusWithinComponent;
package/tilelayout/tilelayout-item.component.d.ts CHANGED
@@ -101,10 +101,6 @@ 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;
108
104
  private toggleCursorClass;
109
105
  static ɵfac: i0.ɵɵFactoryDeclaration<TileLayoutItemComponent, never>;
110
106
  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>;
package/tilelayout/tilelayout.component.d.ts CHANGED
@@ -122,7 +122,6 @@ export declare class TileLayoutComponent implements OnInit, AfterViewInit, After
122
122
  private initializeDraggable;
123
123
  private applyAutoFlow;
124
124
  private setItemsOrder;
125
- private onFocusIn;
126
125
  static ɵfac: i0.ɵɵFactoryDeclaration<TileLayoutComponent, never>;
127
126
  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>;
128
127
  }