@progress/kendo-angular-layout 18.0.0-develop.9 → 18.0.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/package-metadata.mjs +4 -3
- package/esm2022/tabstrip/tabstrip-scroll.service.mjs +1 -22
- package/esm2022/tabstrip/tabstrip.component.mjs +14 -34
- package/fesm2022/progress-kendo-angular-layout.mjs +18 -58
- package/package.json +15 -9
- package/tabstrip/models/scrollable-settings.d.ts +3 -3
- package/tabstrip/tabstrip-scroll.service.d.ts +0 -1
- package/tabstrip/tabstrip.component.d.ts +1 -1
|
@@ -8,8 +8,9 @@
|
|
|
8
8
|
export const packageMetadata = {
|
|
9
9
|
name: '@progress/kendo-angular-layout',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
productCode: 'KENDOUIANGULAR',
|
|
12
|
+
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
+
publishDate: 1737465011,
|
|
14
|
+
version: '18.0.0',
|
|
14
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'
|
|
15
16
|
};
|
|
@@ -6,7 +6,7 @@ import { DEFAULT_SCROLL_BEHAVIOR } from './constants';
|
|
|
6
6
|
import { Injectable, NgZone } from '@angular/core';
|
|
7
7
|
import { isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
8
8
|
import { Subject } from 'rxjs';
|
|
9
|
-
import { getActiveTab, isTablistHorizontal
|
|
9
|
+
import { getActiveTab, isTablistHorizontal } from './util';
|
|
10
10
|
import * as i0 from "@angular/core";
|
|
11
11
|
/**
|
|
12
12
|
* @hidden
|
|
@@ -112,27 +112,6 @@ export class ScrollService {
|
|
|
112
112
|
return activeTabStart - tablistStart;
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
|
-
onMouseScroll(event) {
|
|
116
|
-
event.preventDefault();
|
|
117
|
-
if (!mouseScrollEnabled(this.owner.scrollable)) {
|
|
118
|
-
return;
|
|
119
|
-
}
|
|
120
|
-
const isHorizontal = isTablistHorizontal(this.owner.tabPosition);
|
|
121
|
-
const scrollOrientation = isHorizontal ? 'deltaX' : 'deltaY';
|
|
122
|
-
const distance = event[scrollOrientation];
|
|
123
|
-
const direction = distance < 0 ? 'prev' : 'next';
|
|
124
|
-
if (distance === 0) {
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
127
|
-
this.calculateListPosition(direction, this.owner.scrollable.mouseScrollSpeed);
|
|
128
|
-
if (isHorizontal) {
|
|
129
|
-
this.tablistElement.scrollLeft = this.position;
|
|
130
|
-
}
|
|
131
|
-
else {
|
|
132
|
-
this.tablistElement.scrollTop = this.position;
|
|
133
|
-
}
|
|
134
|
-
this.toggleScrollButtonsState();
|
|
135
|
-
}
|
|
136
115
|
onScroll(e) {
|
|
137
116
|
this.position = isTablistHorizontal(this.owner.tabPosition) ? e.target.scrollLeft : e.target.scrollTop;
|
|
138
117
|
this.toggleScrollButtonsState();
|
|
@@ -91,7 +91,7 @@ export class TabStripComponent {
|
|
|
91
91
|
if (this.tablist) {
|
|
92
92
|
this.toggleScrollButtons(this.scrollService.tabsOverflow);
|
|
93
93
|
if (this.isScrollable && this.mouseScrollEnabled) {
|
|
94
|
-
this.
|
|
94
|
+
this.attachTablistScrollHandler(this.tablist.nativeElement);
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
}
|
|
@@ -197,11 +197,9 @@ export class TabStripComponent {
|
|
|
197
197
|
get tabStripScrollable() {
|
|
198
198
|
return this._scrollableSettings.enabled;
|
|
199
199
|
}
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
// return this._scrollableSettings.enabled && !this.hasScrollButtons.visible;
|
|
204
|
-
// }
|
|
200
|
+
get tabStripScrollableOverlay() {
|
|
201
|
+
return this._scrollableSettings.enabled && !this.hasScrollButtons.visible;
|
|
202
|
+
}
|
|
205
203
|
/**
|
|
206
204
|
* A query list of all declared tabs.
|
|
207
205
|
*/
|
|
@@ -279,8 +277,7 @@ export class TabStripComponent {
|
|
|
279
277
|
this.scrollService.toggleScrollButtonsState();
|
|
280
278
|
});
|
|
281
279
|
});
|
|
282
|
-
|
|
283
|
-
// this.isScrollable && !this.hasScrollButtons.visible && this.setScrollableOverlayClasses();
|
|
280
|
+
this.isScrollable && !this.hasScrollButtons.visible && this.setScrollableOverlayClasses();
|
|
284
281
|
}
|
|
285
282
|
ngOnChanges(changes) {
|
|
286
283
|
if (!isDocumentAvailable()) {
|
|
@@ -425,12 +422,8 @@ export class TabStripComponent {
|
|
|
425
422
|
resetTabFocus(this.tabs);
|
|
426
423
|
}));
|
|
427
424
|
if (this.isScrollable && this.mouseScrollEnabled) {
|
|
428
|
-
this.
|
|
425
|
+
this.attachTablistScrollHandler(tablist);
|
|
429
426
|
}
|
|
430
|
-
// To be released in Q2 2025
|
|
431
|
-
// if (this.isScrollable && !this.mouseScrollEnabled) {
|
|
432
|
-
// this.attachTablistScrollHandler(tablist);
|
|
433
|
-
// }
|
|
434
427
|
this.subscriptionsArePresent = true;
|
|
435
428
|
}
|
|
436
429
|
toggleScrollButtons(tabsOverflow) {
|
|
@@ -457,22 +450,6 @@ export class TabStripComponent {
|
|
|
457
450
|
}
|
|
458
451
|
});
|
|
459
452
|
}
|
|
460
|
-
attachWheelHandler(tablist) {
|
|
461
|
-
this.ngZone.runOutsideAngular(() => {
|
|
462
|
-
this.subscriptions.add(this.renderer.listen(tablist, 'wheel', (wheelEvent) => {
|
|
463
|
-
const scrollEvent = new TabScrollEvent({
|
|
464
|
-
originalEvent: wheelEvent
|
|
465
|
-
});
|
|
466
|
-
this.tabScroll.emit(scrollEvent);
|
|
467
|
-
const isTabStripScrollEventPrevented = scrollEvent.isDefaultPrevented();
|
|
468
|
-
if (isTabStripScrollEventPrevented || !this.scrollService.tabsOverflow) {
|
|
469
|
-
return;
|
|
470
|
-
}
|
|
471
|
-
this.scrollService.onMouseScroll(wheelEvent);
|
|
472
|
-
}));
|
|
473
|
-
});
|
|
474
|
-
}
|
|
475
|
-
/* tslint:disable:no-unused-variable */
|
|
476
453
|
attachTablistScrollHandler(tablist) {
|
|
477
454
|
this.ngZone.runOutsideAngular(() => {
|
|
478
455
|
this.subscriptions.add(this.renderer.listen(tablist, 'scroll', (e) => {
|
|
@@ -512,7 +489,7 @@ export class TabStripComponent {
|
|
|
512
489
|
}
|
|
513
490
|
}
|
|
514
491
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.TabStripService }, { token: i3.ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
515
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", size: "size", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-tabstrip-md": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
|
|
492
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", size: "size", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-tabstrip-md": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable", "class.k-tabstrip-scrollable-overlay": "this.tabStripScrollableOverlay" } }, providers: [
|
|
516
493
|
TabStripService,
|
|
517
494
|
ScrollService,
|
|
518
495
|
LocalizationService,
|
|
@@ -546,7 +523,7 @@ export class TabStripComponent {
|
|
|
546
523
|
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
547
524
|
</ng-container>
|
|
548
525
|
<ng-template #heading>
|
|
549
|
-
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="
|
|
526
|
+
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
|
|
550
527
|
<span
|
|
551
528
|
role="button"
|
|
552
529
|
*ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
|
|
@@ -589,7 +566,7 @@ export class TabStripComponent {
|
|
|
589
566
|
'k-tabstrip-items-end': tabAlignment === 'end',
|
|
590
567
|
'k-tabstrip-items-stretched': tabAlignment === 'stretched',
|
|
591
568
|
'k-tabstrip-items-justify': tabAlignment === 'justify',
|
|
592
|
-
'k-tabstrip-items-scroll':
|
|
569
|
+
'k-tabstrip-items-scroll': mouseScrollEnabled
|
|
593
570
|
}"
|
|
594
571
|
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
595
572
|
>
|
|
@@ -729,7 +706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
729
706
|
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
730
707
|
</ng-container>
|
|
731
708
|
<ng-template #heading>
|
|
732
|
-
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="
|
|
709
|
+
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
|
|
733
710
|
<span
|
|
734
711
|
role="button"
|
|
735
712
|
*ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
|
|
@@ -772,7 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
772
749
|
'k-tabstrip-items-end': tabAlignment === 'end',
|
|
773
750
|
'k-tabstrip-items-stretched': tabAlignment === 'stretched',
|
|
774
751
|
'k-tabstrip-items-justify': tabAlignment === 'justify',
|
|
775
|
-
'k-tabstrip-items-scroll':
|
|
752
|
+
'k-tabstrip-items-scroll': mouseScrollEnabled
|
|
776
753
|
}"
|
|
777
754
|
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
778
755
|
>
|
|
@@ -911,6 +888,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
911
888
|
}], tabStripScrollable: [{
|
|
912
889
|
type: HostBinding,
|
|
913
890
|
args: ['class.k-tabstrip-scrollable']
|
|
891
|
+
}], tabStripScrollableOverlay: [{
|
|
892
|
+
type: HostBinding,
|
|
893
|
+
args: ['class.k-tabstrip-scrollable-overlay']
|
|
914
894
|
}], tabs: [{
|
|
915
895
|
type: ContentChildren,
|
|
916
896
|
args: [TabStripTabComponent]
|
|
@@ -27,9 +27,10 @@ import { DatePipe } from '@progress/kendo-angular-intl';
|
|
|
27
27
|
const packageMetadata = {
|
|
28
28
|
name: '@progress/kendo-angular-layout',
|
|
29
29
|
productName: 'Kendo UI for Angular',
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
productCode: 'KENDOUIANGULAR',
|
|
31
|
+
productCodes: ['KENDOUIANGULAR'],
|
|
32
|
+
publishDate: 1737465011,
|
|
33
|
+
version: '18.0.0',
|
|
33
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'
|
|
34
35
|
};
|
|
35
36
|
|
|
@@ -3432,27 +3433,6 @@ class ScrollService {
|
|
|
3432
3433
|
return activeTabStart - tablistStart;
|
|
3433
3434
|
}
|
|
3434
3435
|
}
|
|
3435
|
-
onMouseScroll(event) {
|
|
3436
|
-
event.preventDefault();
|
|
3437
|
-
if (!mouseScrollEnabled(this.owner.scrollable)) {
|
|
3438
|
-
return;
|
|
3439
|
-
}
|
|
3440
|
-
const isHorizontal = isTablistHorizontal(this.owner.tabPosition);
|
|
3441
|
-
const scrollOrientation = isHorizontal ? 'deltaX' : 'deltaY';
|
|
3442
|
-
const distance = event[scrollOrientation];
|
|
3443
|
-
const direction = distance < 0 ? 'prev' : 'next';
|
|
3444
|
-
if (distance === 0) {
|
|
3445
|
-
return;
|
|
3446
|
-
}
|
|
3447
|
-
this.calculateListPosition(direction, this.owner.scrollable.mouseScrollSpeed);
|
|
3448
|
-
if (isHorizontal) {
|
|
3449
|
-
this.tablistElement.scrollLeft = this.position;
|
|
3450
|
-
}
|
|
3451
|
-
else {
|
|
3452
|
-
this.tablistElement.scrollTop = this.position;
|
|
3453
|
-
}
|
|
3454
|
-
this.toggleScrollButtonsState();
|
|
3455
|
-
}
|
|
3456
3436
|
onScroll(e) {
|
|
3457
3437
|
this.position = isTablistHorizontal(this.owner.tabPosition) ? e.target.scrollLeft : e.target.scrollTop;
|
|
3458
3438
|
this.toggleScrollButtonsState();
|
|
@@ -4013,7 +3993,7 @@ class TabStripComponent {
|
|
|
4013
3993
|
if (this.tablist) {
|
|
4014
3994
|
this.toggleScrollButtons(this.scrollService.tabsOverflow);
|
|
4015
3995
|
if (this.isScrollable && this.mouseScrollEnabled) {
|
|
4016
|
-
this.
|
|
3996
|
+
this.attachTablistScrollHandler(this.tablist.nativeElement);
|
|
4017
3997
|
}
|
|
4018
3998
|
}
|
|
4019
3999
|
}
|
|
@@ -4119,11 +4099,9 @@ class TabStripComponent {
|
|
|
4119
4099
|
get tabStripScrollable() {
|
|
4120
4100
|
return this._scrollableSettings.enabled;
|
|
4121
4101
|
}
|
|
4122
|
-
|
|
4123
|
-
|
|
4124
|
-
|
|
4125
|
-
// return this._scrollableSettings.enabled && !this.hasScrollButtons.visible;
|
|
4126
|
-
// }
|
|
4102
|
+
get tabStripScrollableOverlay() {
|
|
4103
|
+
return this._scrollableSettings.enabled && !this.hasScrollButtons.visible;
|
|
4104
|
+
}
|
|
4127
4105
|
/**
|
|
4128
4106
|
* A query list of all declared tabs.
|
|
4129
4107
|
*/
|
|
@@ -4201,8 +4179,7 @@ class TabStripComponent {
|
|
|
4201
4179
|
this.scrollService.toggleScrollButtonsState();
|
|
4202
4180
|
});
|
|
4203
4181
|
});
|
|
4204
|
-
|
|
4205
|
-
// this.isScrollable && !this.hasScrollButtons.visible && this.setScrollableOverlayClasses();
|
|
4182
|
+
this.isScrollable && !this.hasScrollButtons.visible && this.setScrollableOverlayClasses();
|
|
4206
4183
|
}
|
|
4207
4184
|
ngOnChanges(changes) {
|
|
4208
4185
|
if (!isDocumentAvailable()) {
|
|
@@ -4347,12 +4324,8 @@ class TabStripComponent {
|
|
|
4347
4324
|
resetTabFocus(this.tabs);
|
|
4348
4325
|
}));
|
|
4349
4326
|
if (this.isScrollable && this.mouseScrollEnabled) {
|
|
4350
|
-
this.
|
|
4327
|
+
this.attachTablistScrollHandler(tablist);
|
|
4351
4328
|
}
|
|
4352
|
-
// To be released in Q2 2025
|
|
4353
|
-
// if (this.isScrollable && !this.mouseScrollEnabled) {
|
|
4354
|
-
// this.attachTablistScrollHandler(tablist);
|
|
4355
|
-
// }
|
|
4356
4329
|
this.subscriptionsArePresent = true;
|
|
4357
4330
|
}
|
|
4358
4331
|
toggleScrollButtons(tabsOverflow) {
|
|
@@ -4379,22 +4352,6 @@ class TabStripComponent {
|
|
|
4379
4352
|
}
|
|
4380
4353
|
});
|
|
4381
4354
|
}
|
|
4382
|
-
attachWheelHandler(tablist) {
|
|
4383
|
-
this.ngZone.runOutsideAngular(() => {
|
|
4384
|
-
this.subscriptions.add(this.renderer.listen(tablist, 'wheel', (wheelEvent) => {
|
|
4385
|
-
const scrollEvent = new TabScrollEvent({
|
|
4386
|
-
originalEvent: wheelEvent
|
|
4387
|
-
});
|
|
4388
|
-
this.tabScroll.emit(scrollEvent);
|
|
4389
|
-
const isTabStripScrollEventPrevented = scrollEvent.isDefaultPrevented();
|
|
4390
|
-
if (isTabStripScrollEventPrevented || !this.scrollService.tabsOverflow) {
|
|
4391
|
-
return;
|
|
4392
|
-
}
|
|
4393
|
-
this.scrollService.onMouseScroll(wheelEvent);
|
|
4394
|
-
}));
|
|
4395
|
-
});
|
|
4396
|
-
}
|
|
4397
|
-
/* tslint:disable:no-unused-variable */
|
|
4398
4355
|
attachTablistScrollHandler(tablist) {
|
|
4399
4356
|
this.ngZone.runOutsideAngular(() => {
|
|
4400
4357
|
this.subscriptions.add(this.renderer.listen(tablist, 'scroll', (e) => {
|
|
@@ -4434,7 +4391,7 @@ class TabStripComponent {
|
|
|
4434
4391
|
}
|
|
4435
4392
|
}
|
|
4436
4393
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
4437
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", size: "size", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-tabstrip-md": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
|
|
4394
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", size: "size", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-tabstrip-md": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable", "class.k-tabstrip-scrollable-overlay": "this.tabStripScrollableOverlay" } }, providers: [
|
|
4438
4395
|
TabStripService,
|
|
4439
4396
|
ScrollService,
|
|
4440
4397
|
LocalizationService,
|
|
@@ -4468,7 +4425,7 @@ class TabStripComponent {
|
|
|
4468
4425
|
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
4469
4426
|
</ng-container>
|
|
4470
4427
|
<ng-template #heading>
|
|
4471
|
-
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="
|
|
4428
|
+
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
|
|
4472
4429
|
<span
|
|
4473
4430
|
role="button"
|
|
4474
4431
|
*ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
|
|
@@ -4511,7 +4468,7 @@ class TabStripComponent {
|
|
|
4511
4468
|
'k-tabstrip-items-end': tabAlignment === 'end',
|
|
4512
4469
|
'k-tabstrip-items-stretched': tabAlignment === 'stretched',
|
|
4513
4470
|
'k-tabstrip-items-justify': tabAlignment === 'justify',
|
|
4514
|
-
'k-tabstrip-items-scroll':
|
|
4471
|
+
'k-tabstrip-items-scroll': mouseScrollEnabled
|
|
4515
4472
|
}"
|
|
4516
4473
|
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
4517
4474
|
>
|
|
@@ -4651,7 +4608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4651
4608
|
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
4652
4609
|
</ng-container>
|
|
4653
4610
|
<ng-template #heading>
|
|
4654
|
-
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="
|
|
4611
|
+
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
|
|
4655
4612
|
<span
|
|
4656
4613
|
role="button"
|
|
4657
4614
|
*ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
|
|
@@ -4694,7 +4651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4694
4651
|
'k-tabstrip-items-end': tabAlignment === 'end',
|
|
4695
4652
|
'k-tabstrip-items-stretched': tabAlignment === 'stretched',
|
|
4696
4653
|
'k-tabstrip-items-justify': tabAlignment === 'justify',
|
|
4697
|
-
'k-tabstrip-items-scroll':
|
|
4654
|
+
'k-tabstrip-items-scroll': mouseScrollEnabled
|
|
4698
4655
|
}"
|
|
4699
4656
|
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
4700
4657
|
>
|
|
@@ -4833,6 +4790,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4833
4790
|
}], tabStripScrollable: [{
|
|
4834
4791
|
type: HostBinding,
|
|
4835
4792
|
args: ['class.k-tabstrip-scrollable']
|
|
4793
|
+
}], tabStripScrollableOverlay: [{
|
|
4794
|
+
type: HostBinding,
|
|
4795
|
+
args: ['class.k-tabstrip-scrollable-overlay']
|
|
4836
4796
|
}], tabs: [{
|
|
4837
4797
|
type: ContentChildren,
|
|
4838
4798
|
args: [TabStripTabComponent]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-layout",
|
|
3
|
-
"version": "18.0.0
|
|
3
|
+
"version": "18.0.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",
|
|
@@ -31,7 +31,13 @@
|
|
|
31
31
|
"tilelayout"
|
|
32
32
|
],
|
|
33
33
|
"@progress": {
|
|
34
|
-
"friendlyName": "Layout"
|
|
34
|
+
"friendlyName": "Layout",
|
|
35
|
+
"package": {
|
|
36
|
+
"productName": "Kendo UI for Angular",
|
|
37
|
+
"productCode": "KENDOUIANGULAR",
|
|
38
|
+
"publishDate": 1737465011,
|
|
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
|
+
}
|
|
35
41
|
},
|
|
36
42
|
"peerDependencies": {
|
|
37
43
|
"@angular/animations": "16 - 19",
|
|
@@ -39,17 +45,17 @@
|
|
|
39
45
|
"@angular/core": "16 - 19",
|
|
40
46
|
"@angular/platform-browser": "16 - 19",
|
|
41
47
|
"@progress/kendo-licensing": "^1.0.2",
|
|
42
|
-
"@progress/kendo-angular-common": "18.0.0
|
|
43
|
-
"@progress/kendo-angular-l10n": "18.0.0
|
|
44
|
-
"@progress/kendo-angular-progressbar": "18.0.0
|
|
45
|
-
"@progress/kendo-angular-icons": "18.0.0
|
|
46
|
-
"@progress/kendo-angular-buttons": "18.0.0
|
|
47
|
-
"@progress/kendo-angular-intl": "18.0.0
|
|
48
|
+
"@progress/kendo-angular-common": "18.0.0",
|
|
49
|
+
"@progress/kendo-angular-l10n": "18.0.0",
|
|
50
|
+
"@progress/kendo-angular-progressbar": "18.0.0",
|
|
51
|
+
"@progress/kendo-angular-icons": "18.0.0",
|
|
52
|
+
"@progress/kendo-angular-buttons": "18.0.0",
|
|
53
|
+
"@progress/kendo-angular-intl": "18.0.0",
|
|
48
54
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
49
55
|
},
|
|
50
56
|
"dependencies": {
|
|
51
57
|
"tslib": "^2.3.1",
|
|
52
|
-
"@progress/kendo-angular-schematics": "18.0.0
|
|
58
|
+
"@progress/kendo-angular-schematics": "18.0.0",
|
|
53
59
|
"@progress/kendo-draggable": "^3.0.2"
|
|
54
60
|
},
|
|
55
61
|
"schematics": "./schematics/collection.json",
|
|
@@ -21,7 +21,7 @@ export interface TabStripScrollableSettings {
|
|
|
21
21
|
*/
|
|
22
22
|
scrollButtons?: TabStripScrollButtonsVisibility;
|
|
23
23
|
/**
|
|
24
|
-
* Determines whether the TabStrip will be scrolled with the mouse
|
|
24
|
+
* Determines whether the TabStrip will be scrolled with the mouse or other pointer devices such as touchpads and touch screens.
|
|
25
25
|
* @default true
|
|
26
26
|
*/
|
|
27
27
|
mouseScroll?: boolean;
|
|
@@ -31,8 +31,8 @@ export interface TabStripScrollableSettings {
|
|
|
31
31
|
*/
|
|
32
32
|
buttonScrollSpeed?: number;
|
|
33
33
|
/**
|
|
34
|
-
*
|
|
35
|
-
*
|
|
34
|
+
* Deprecated in v.18.0.0 and will be removed in v.19.0.0 of the `@progress/kendo-angular-layout` package.
|
|
35
|
+
* The scroll speed will naturally follow the user behavior and concrete device specifics.
|
|
36
36
|
*/
|
|
37
37
|
mouseScrollSpeed?: number;
|
|
38
38
|
/**
|
|
@@ -23,7 +23,6 @@ export declare class ScrollService {
|
|
|
23
23
|
toggleScrollButtonsState(): void;
|
|
24
24
|
scrollToSelectedTab(): void;
|
|
25
25
|
getScrollOffset(activeIndex: number): number;
|
|
26
|
-
onMouseScroll(event: any): void;
|
|
27
26
|
onScroll(e: Event): void;
|
|
28
27
|
scrollTabs(direction: string): void;
|
|
29
28
|
calculateListPosition(direction: string, scrollSpeed: number): void;
|
|
@@ -129,6 +129,7 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
|
|
|
129
129
|
get tabsAtLeft(): boolean;
|
|
130
130
|
get dir(): string;
|
|
131
131
|
get tabStripScrollable(): boolean;
|
|
132
|
+
get tabStripScrollableOverlay(): boolean;
|
|
132
133
|
/**
|
|
133
134
|
* A query list of all declared tabs.
|
|
134
135
|
*/
|
|
@@ -220,7 +221,6 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
|
|
|
220
221
|
onScrollButtonClick(buttonType: ScrollButtonType): void;
|
|
221
222
|
private initDomEvents;
|
|
222
223
|
private toggleScrollButtons;
|
|
223
|
-
private attachWheelHandler;
|
|
224
224
|
private attachTablistScrollHandler;
|
|
225
225
|
private setScrollableOverlayClasses;
|
|
226
226
|
static ɵfac: i0.ɵɵFactoryDeclaration<TabStripComponent, never>;
|