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

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 (12) hide show
  1. package/esm2022/common/dom-queries.mjs +1 -1
  2. package/esm2022/package-metadata.mjs +2 -2
  3. package/esm2022/tabstrip/tabstrip-scroll.service.mjs +8 -25
  4. package/esm2022/tilelayout/keyboard-navigation.service.mjs +29 -67
  5. package/esm2022/tilelayout/tilelayout-item.component.mjs +1 -7
  6. package/esm2022/tilelayout/tilelayout.component.mjs +0 -14
  7. package/fesm2022/progress-kendo-angular-layout.mjs +41 -112
  8. package/package.json +10 -10
  9. package/tabstrip/tabstrip-scroll.service.d.ts +1 -3
  10. package/tilelayout/keyboard-navigation.service.d.ts +1 -7
  11. package/tilelayout/tilelayout-item.component.d.ts +0 -4
  12. 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: 1738318289,
14
+ version: '18.1.0-develop.4',
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/tabstrip/tabstrip-scroll.service.mjs CHANGED
@@ -7,15 +7,12 @@ import { Injectable, NgZone } from '@angular/core';
7
7
  import { isDocumentAvailable } from '@progress/kendo-angular-common';
8
8
  import { Subject } from 'rxjs';
9
9
  import { getActiveTab, isTablistHorizontal } from './util';
10
- import { LocalizationService } from '@progress/kendo-angular-l10n';
11
10
  import * as i0 from "@angular/core";
12
- import * as i1 from "@progress/kendo-angular-l10n";
13
11
  /**
14
12
  * @hidden
15
13
  */
16
14
  export class ScrollService {
17
15
  ngZone;
18
- localization;
19
16
  owner;
20
17
  position = 0;
21
18
  scrollButtonActiveStateChange = new Subject();
@@ -40,9 +37,8 @@ export class ScrollService {
40
37
  get tabsOverflow() {
41
38
  return this.tablistOverflowSize > 0;
42
39
  }
43
- constructor(ngZone, localization) {
40
+ constructor(ngZone) {
44
41
  this.ngZone = ngZone;
45
- this.localization = localization;
46
42
  }
47
43
  toggleScrollButtonsState() {
48
44
  const tabStrip = this.owner;
@@ -51,10 +47,8 @@ export class ScrollService {
51
47
  }
52
48
  const currentPrevButtonActive = !this.isDisabled('prev');
53
49
  const currentNextButtonActive = !this.isDisabled('next');
54
- const isHorizontal = isTablistHorizontal(this.owner.tabPosition);
55
- const rtlDelta = this.localization.rtl && isHorizontal ? -1 : 1;
56
- const calculatedPrevButtonActive = (this.position * rtlDelta) > 0 && this.tablistOverflowSize > 0;
57
- const calculatedNextButtonActive = (this.position * rtlDelta) < this.tablistOverflowSize && this.tablistOverflowSize > 0;
50
+ const calculatedPrevButtonActive = this.position > 0 && this.tablistOverflowSize > 0;
51
+ const calculatedNextButtonActive = this.position < this.tablistOverflowSize && this.tablistOverflowSize > 0;
58
52
  if (calculatedPrevButtonActive !== currentPrevButtonActive) {
59
53
  this.ngZone.run(() => this.toggleButtonActiveState('prev', calculatedPrevButtonActive));
60
54
  }
@@ -133,26 +127,15 @@ export class ScrollService {
133
127
  this.toggleScrollButtonsState();
134
128
  }
135
129
  calculateListPosition(direction, scrollSpeed) {
136
- const isHorizontal = isTablistHorizontal(this.owner.tabPosition);
137
- if (direction === 'prev') {
138
- if (this.localization.rtl && isHorizontal) {
139
- this.position = this.position + scrollSpeed >= 0 ? 0 : this.position + scrollSpeed;
140
- }
141
- else {
142
- this.position = this.position - scrollSpeed <= 0 ? 0 : this.position - scrollSpeed;
143
- }
130
+ if (direction === 'prev' && this.position > 0) {
131
+ this.position = this.position - scrollSpeed <= 0 ? 0 : this.position - scrollSpeed;
144
132
  }
145
133
  else if (direction === 'next' && this.position < this.tablistOverflowSize) {
146
134
  if (this.position + scrollSpeed > this.tablistOverflowSize) {
147
135
  this.position = this.tablistOverflowSize;
148
136
  return;
149
137
  }
150
- if (this.localization.rtl && isHorizontal) {
151
- this.position -= scrollSpeed;
152
- }
153
- else {
154
- this.position += scrollSpeed;
155
- }
138
+ this.position += scrollSpeed;
156
139
  }
157
140
  }
158
141
  restoreScrollPosition() {
@@ -168,9 +151,9 @@ export class ScrollService {
168
151
  this.scrollButtonActiveStateChange.next({ buttonType, active });
169
152
  }
170
153
  isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`]?.host.nativeElement.classList.contains('k-disabled');
171
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
154
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
172
155
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService });
173
156
  }
174
157
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, decorators: [{
175
158
  type: Injectable
176
- }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }]; } });
159
+ }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
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: 1738318289,
33
+ version: '18.1.0-develop.4',
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)) {
@@ -3334,7 +3334,6 @@ const DEFAULT_SCROLL_BEHAVIOR = 'smooth';
3334
3334
  */
3335
3335
  class ScrollService {
3336
3336
  ngZone;
3337
- localization;
3338
3337
  owner;
3339
3338
  position = 0;
3340
3339
  scrollButtonActiveStateChange = new Subject();
@@ -3359,9 +3358,8 @@ class ScrollService {
3359
3358
  get tabsOverflow() {
3360
3359
  return this.tablistOverflowSize > 0;
3361
3360
  }
3362
- constructor(ngZone, localization) {
3361
+ constructor(ngZone) {
3363
3362
  this.ngZone = ngZone;
3364
- this.localization = localization;
3365
3363
  }
3366
3364
  toggleScrollButtonsState() {
3367
3365
  const tabStrip = this.owner;
@@ -3370,10 +3368,8 @@ class ScrollService {
3370
3368
  }
3371
3369
  const currentPrevButtonActive = !this.isDisabled('prev');
3372
3370
  const currentNextButtonActive = !this.isDisabled('next');
3373
- const isHorizontal = isTablistHorizontal(this.owner.tabPosition);
3374
- const rtlDelta = this.localization.rtl && isHorizontal ? -1 : 1;
3375
- const calculatedPrevButtonActive = (this.position * rtlDelta) > 0 && this.tablistOverflowSize > 0;
3376
- const calculatedNextButtonActive = (this.position * rtlDelta) < this.tablistOverflowSize && this.tablistOverflowSize > 0;
3371
+ const calculatedPrevButtonActive = this.position > 0 && this.tablistOverflowSize > 0;
3372
+ const calculatedNextButtonActive = this.position < this.tablistOverflowSize && this.tablistOverflowSize > 0;
3377
3373
  if (calculatedPrevButtonActive !== currentPrevButtonActive) {
3378
3374
  this.ngZone.run(() => this.toggleButtonActiveState('prev', calculatedPrevButtonActive));
3379
3375
  }
@@ -3452,26 +3448,15 @@ class ScrollService {
3452
3448
  this.toggleScrollButtonsState();
3453
3449
  }
3454
3450
  calculateListPosition(direction, scrollSpeed) {
3455
- const isHorizontal = isTablistHorizontal(this.owner.tabPosition);
3456
- if (direction === 'prev') {
3457
- if (this.localization.rtl && isHorizontal) {
3458
- this.position = this.position + scrollSpeed >= 0 ? 0 : this.position + scrollSpeed;
3459
- }
3460
- else {
3461
- this.position = this.position - scrollSpeed <= 0 ? 0 : this.position - scrollSpeed;
3462
- }
3451
+ if (direction === 'prev' && this.position > 0) {
3452
+ this.position = this.position - scrollSpeed <= 0 ? 0 : this.position - scrollSpeed;
3463
3453
  }
3464
3454
  else if (direction === 'next' && this.position < this.tablistOverflowSize) {
3465
3455
  if (this.position + scrollSpeed > this.tablistOverflowSize) {
3466
3456
  this.position = this.tablistOverflowSize;
3467
3457
  return;
3468
3458
  }
3469
- if (this.localization.rtl && isHorizontal) {
3470
- this.position -= scrollSpeed;
3471
- }
3472
- else {
3473
- this.position += scrollSpeed;
3474
- }
3459
+ this.position += scrollSpeed;
3475
3460
  }
3476
3461
  }
3477
3462
  restoreScrollPosition() {
@@ -3487,12 +3472,12 @@ class ScrollService {
3487
3472
  this.scrollButtonActiveStateChange.next({ buttonType, active });
3488
3473
  }
3489
3474
  isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`]?.host.nativeElement.classList.contains('k-disabled');
3490
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
3475
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
3491
3476
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService });
3492
3477
  }
3493
3478
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, decorators: [{
3494
3479
  type: Injectable
3495
- }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }]; } });
3480
+ }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
3496
3481
 
3497
3482
  /**
3498
3483
  * @hidden
@@ -9633,11 +9618,8 @@ class TileLayoutKeyboardNavigationService {
9633
9618
  renderer;
9634
9619
  localization;
9635
9620
  navigable = new BehaviorSubject(false);
9636
- owner;
9637
- mousedown;
9638
9621
  localizationSubscription;
9639
9622
  rtl;
9640
- lastFocused;
9641
9623
  constructor(zone, renderer, localization) {
9642
9624
  this.zone = zone;
9643
9625
  this.renderer = renderer;
@@ -9652,8 +9634,6 @@ class TileLayoutKeyboardNavigationService {
9652
9634
  const isTileFocused = document.activeElement === elem;
9653
9635
  const focusedTile = settings.items.find(item => item.elem.nativeElement === elem);
9654
9636
  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
9637
  if (keyCode === Keys.Enter && isTileFocused && focusableItems.length > 0) {
9658
9638
  this.changeTabIndex('0', elem, focusableItems);
9659
9639
  focusableItems[0].focus();
@@ -9662,39 +9642,19 @@ class TileLayoutKeyboardNavigationService {
9662
9642
  this.changeTabIndex('-1', elem, focusableItems);
9663
9643
  elem.focus();
9664
9644
  }
9665
- else if (isArrow && (event.ctrlKey || event.metaKey) && isTileFocused && focusedTile.isResizable) {
9645
+ else if ((event.ctrlKey || event.metaKey) && isTileFocused && focusedTile.isResizable) {
9666
9646
  event.preventDefault();
9667
9647
  this.zone.run(() => {
9668
9648
  this.resizeItem(keyCode, focusedTile, settings, col);
9669
9649
  });
9670
9650
  }
9671
- else if (isArrow && event.shiftKey && isTileFocused && focusedTile.isReorderable) {
9651
+ else if (event.shiftKey && isTileFocused && focusedTile.isReorderable) {
9672
9652
  this.zone.run(() => {
9673
9653
  this.reorderItem(keyCode, focusedTile, settings, col);
9674
9654
  });
9675
9655
  }
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
- }
9656
+ else if (keyCode === Keys.Tab && !isTileFocused) {
9657
+ this.keepFocusWithinComponent(event, elem);
9698
9658
  }
9699
9659
  }
9700
9660
  onFocusOut(event, elem, focusableItems) {
@@ -9705,10 +9665,8 @@ class TileLayoutKeyboardNavigationService {
9705
9665
  event.relatedTarget?.focus();
9706
9666
  }
9707
9667
  }
9708
- onMousedown(event, elem, focusableItems, tile) {
9709
- this.mousedown = true;
9668
+ onClick(event, elem, focusableItems) {
9710
9669
  const isTargetFocusable = focusableItems.includes(event.target);
9711
- this.lastFocused = tile;
9712
9670
  if (isTargetFocusable) {
9713
9671
  this.changeTabIndex('0', elem, focusableItems);
9714
9672
  event.target.focus();
@@ -9723,51 +9681,42 @@ class TileLayoutKeyboardNavigationService {
9723
9681
  getAllFocusableChildren(parent) {
9724
9682
  return Array.from(parent.querySelectorAll(focusableSelector)).filter((element) => element.offsetParent !== null);
9725
9683
  }
9726
- returnFocus() {
9727
- this.lastFocused ? this.lastFocused.focus() : this.owner.items.find(item => item.order === 0).focus();
9728
- }
9729
9684
  resizeItem(keyCode, focusedTile, settings, col) {
9730
9685
  const { resizeRight, resizeLeft, resizeDown, resizeUp } = shouldResize(keyCode, col, focusedTile, settings);
9731
9686
  const resizeHorizontal = resizeLeft || resizeRight;
9732
9687
  const resizeVertical = resizeDown || resizeUp;
9733
9688
  const resizeDir = resizeLeft || resizeUp ? -1 : 1;
9734
- if (!(resizeHorizontal || resizeVertical)) {
9735
- return;
9689
+ if (resizeHorizontal) {
9690
+ focusedTile.colSpan += resizeDir;
9736
9691
  }
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
- }
9692
+ else if (resizeVertical) {
9693
+ focusedTile.rowSpan += resizeDir;
9746
9694
  }
9747
9695
  }
9748
9696
  reorderItem(keyCode, focusedTile, settings, col) {
9749
9697
  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
- }
9698
+ const onReorderRight = () => {
9699
+ const nextTile = this.targetTile(focusedTile, settings.items, 1);
9700
+ if (nextTile) {
9701
+ focusedTile.order += 1;
9702
+ nextTile.order -= 1;
9703
+ }
9704
+ };
9705
+ const onReorderLeft = () => {
9706
+ const prevTile = this.targetTile(focusedTile, settings.items, -1);
9707
+ if (prevTile) {
9708
+ focusedTile.order -= 1;
9709
+ prevTile.order += 1;
9764
9710
  }
9765
9711
  };
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);
9712
+ if (reorderRight || reorderLeft) {
9713
+ const reorderDir = reorderRight ? 1 : -1;
9714
+ if (focusedTile.col) {
9715
+ focusedTile.col += reorderDir;
9716
+ }
9717
+ else {
9718
+ reorderRight ? onReorderRight() : onReorderLeft();
9719
+ }
9771
9720
  }
9772
9721
  }
9773
9722
  keepFocusWithinComponent(event, wrapper) {
@@ -10031,7 +9980,7 @@ class TileLayoutItemComponent {
10031
9980
  this.zone.runOutsideAngular(() => {
10032
9981
  keyboardNavigation.changeTabIndex('-1', elem, this.focusableItems);
10033
9982
  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)));
9983
+ this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'click', event => keyboardNavigation.onClick(event, elem, this.focusableItems)));
10035
9984
  this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'focusout', event => keyboardNavigation.onFocusOut(event, elem, this.focusableItems)));
10036
9985
  });
10037
9986
  }
@@ -10058,12 +10007,6 @@ class TileLayoutItemComponent {
10058
10007
  this.keyboardNavigationSubs.unsubscribe();
10059
10008
  }
10060
10009
  }
10061
- /**
10062
- * @hidden
10063
- */
10064
- focus() {
10065
- this.elem.nativeElement.focus();
10066
- }
10067
10010
  toggleCursorClass(isReorderable) {
10068
10011
  const headerEl = this.elem.nativeElement.querySelector('.k-tilelayout-item-header');
10069
10012
  if (!headerEl) {
@@ -10305,7 +10248,6 @@ class TileLayoutComponent {
10305
10248
  this.applyRowStyling();
10306
10249
  this.draggingService.reorderable.next(this.reorderable);
10307
10250
  this.draggingService.resizable.next(this.resizable);
10308
- this.navigationService.owner = this;
10309
10251
  this.navigationService.navigable.next(this.navigable);
10310
10252
  if (hasObservers(this.reorder)) {
10311
10253
  this.subs.add(this.draggingService.reorder.subscribe(e => this.reorder.emit(e)));
@@ -10334,9 +10276,6 @@ class TileLayoutComponent {
10334
10276
  this.setItemsOrder();
10335
10277
  this.draggingService.tileLayoutSettings.items = this.items.toArray();
10336
10278
  });
10337
- this.zone.runOutsideAngular(() => {
10338
- this.elem.nativeElement.addEventListener('focusin', this.onFocusIn);
10339
- });
10340
10279
  }
10341
10280
  ngAfterContentInit() {
10342
10281
  this.setItemsOrder();
@@ -10369,7 +10308,6 @@ class TileLayoutComponent {
10369
10308
  this.draggable.destroy();
10370
10309
  }
10371
10310
  this.subs.unsubscribe();
10372
- this.elem.nativeElement.removeEventListener('focusin', this.onFocusIn);
10373
10311
  }
10374
10312
  handlePress({ originalEvent }) {
10375
10313
  this.draggingService.handlePress(originalEvent);
@@ -10424,15 +10362,6 @@ class TileLayoutComponent {
10424
10362
  }
10425
10363
  });
10426
10364
  }
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
10365
  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
10366
  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
10367
  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.4",
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": 1738318289,
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.4",
49
+ "@progress/kendo-angular-l10n": "18.1.0-develop.4",
50
+ "@progress/kendo-angular-progressbar": "18.1.0-develop.4",
51
+ "@progress/kendo-angular-icons": "18.1.0-develop.4",
52
+ "@progress/kendo-angular-buttons": "18.1.0-develop.4",
53
+ "@progress/kendo-angular-intl": "18.1.0-develop.4",
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.4",
59
59
  "@progress/kendo-draggable": "^3.0.2"
60
60
  },
61
61
  "schematics": "./schematics/collection.json",
package/tabstrip/tabstrip-scroll.service.d.ts CHANGED
@@ -6,14 +6,12 @@ import { ScrollButtonActiveStateChange } from './models/button-state-change';
6
6
  import { NgZone } from '@angular/core';
7
7
  import { Subject } from 'rxjs';
8
8
  import { TabStripComponent } from './tabstrip.component';
9
- import { LocalizationService } from '@progress/kendo-angular-l10n';
10
9
  import * as i0 from "@angular/core";
11
10
  /**
12
11
  * @hidden
13
12
  */
14
13
  export declare class ScrollService {
15
14
  private ngZone;
16
- private localization;
17
15
  owner: TabStripComponent;
18
16
  position: number;
19
17
  scrollButtonActiveStateChange: Subject<ScrollButtonActiveStateChange>;
@@ -21,7 +19,7 @@ export declare class ScrollService {
21
19
  get tabstripSize(): number;
22
20
  get tablistOverflowSize(): number;
23
21
  get tabsOverflow(): boolean;
24
- constructor(ngZone: NgZone, localization: LocalizationService);
22
+ constructor(ngZone: NgZone);
25
23
  toggleScrollButtonsState(): void;
26
24
  scrollToSelectedTab(): void;
27
25
  getScrollOffset(activeIndex: number): number;
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
  }