@progress/kendo-angular-layout 18.0.0-develop.1 → 18.0.0-develop.10
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 +2 -2
- package/esm2022/tabstrip/tabstrip-scroll.service.mjs +1 -16
- package/esm2022/tabstrip/tabstrip.component.mjs +14 -34
- package/fesm2022/progress-kendo-angular-layout.mjs +16 -51
- package/package.json +8 -8
- 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
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-layout',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '18.0.0-develop.
|
|
12
|
+
publishDate: 1736777760,
|
|
13
|
+
version: '18.0.0-develop.10',
|
|
14
14
|
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
15
|
};
|
|
@@ -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,21 +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 direction = event.deltaY < 0 ? 'prev' : 'next';
|
|
121
|
-
this.calculateListPosition(direction, this.owner.scrollable.mouseScrollSpeed);
|
|
122
|
-
if (isTablistHorizontal(this.owner.tabPosition)) {
|
|
123
|
-
this.tablistElement.scrollLeft = this.position;
|
|
124
|
-
}
|
|
125
|
-
else {
|
|
126
|
-
this.tablistElement.scrollTop = this.position;
|
|
127
|
-
}
|
|
128
|
-
this.toggleScrollButtonsState();
|
|
129
|
-
}
|
|
130
115
|
onScroll(e) {
|
|
131
116
|
this.position = isTablistHorizontal(this.owner.tabPosition) ? e.target.scrollLeft : e.target.scrollTop;
|
|
132
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]
|
|
@@ -28,8 +28,8 @@ const packageMetadata = {
|
|
|
28
28
|
name: '@progress/kendo-angular-layout',
|
|
29
29
|
productName: 'Kendo UI for Angular',
|
|
30
30
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
31
|
-
publishDate:
|
|
32
|
-
version: '18.0.0-develop.
|
|
31
|
+
publishDate: 1736777760,
|
|
32
|
+
version: '18.0.0-develop.10',
|
|
33
33
|
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
34
|
};
|
|
35
35
|
|
|
@@ -3432,21 +3432,6 @@ class ScrollService {
|
|
|
3432
3432
|
return activeTabStart - tablistStart;
|
|
3433
3433
|
}
|
|
3434
3434
|
}
|
|
3435
|
-
onMouseScroll(event) {
|
|
3436
|
-
event.preventDefault();
|
|
3437
|
-
if (!mouseScrollEnabled(this.owner.scrollable)) {
|
|
3438
|
-
return;
|
|
3439
|
-
}
|
|
3440
|
-
const direction = event.deltaY < 0 ? 'prev' : 'next';
|
|
3441
|
-
this.calculateListPosition(direction, this.owner.scrollable.mouseScrollSpeed);
|
|
3442
|
-
if (isTablistHorizontal(this.owner.tabPosition)) {
|
|
3443
|
-
this.tablistElement.scrollLeft = this.position;
|
|
3444
|
-
}
|
|
3445
|
-
else {
|
|
3446
|
-
this.tablistElement.scrollTop = this.position;
|
|
3447
|
-
}
|
|
3448
|
-
this.toggleScrollButtonsState();
|
|
3449
|
-
}
|
|
3450
3435
|
onScroll(e) {
|
|
3451
3436
|
this.position = isTablistHorizontal(this.owner.tabPosition) ? e.target.scrollLeft : e.target.scrollTop;
|
|
3452
3437
|
this.toggleScrollButtonsState();
|
|
@@ -4007,7 +3992,7 @@ class TabStripComponent {
|
|
|
4007
3992
|
if (this.tablist) {
|
|
4008
3993
|
this.toggleScrollButtons(this.scrollService.tabsOverflow);
|
|
4009
3994
|
if (this.isScrollable && this.mouseScrollEnabled) {
|
|
4010
|
-
this.
|
|
3995
|
+
this.attachTablistScrollHandler(this.tablist.nativeElement);
|
|
4011
3996
|
}
|
|
4012
3997
|
}
|
|
4013
3998
|
}
|
|
@@ -4113,11 +4098,9 @@ class TabStripComponent {
|
|
|
4113
4098
|
get tabStripScrollable() {
|
|
4114
4099
|
return this._scrollableSettings.enabled;
|
|
4115
4100
|
}
|
|
4116
|
-
|
|
4117
|
-
|
|
4118
|
-
|
|
4119
|
-
// return this._scrollableSettings.enabled && !this.hasScrollButtons.visible;
|
|
4120
|
-
// }
|
|
4101
|
+
get tabStripScrollableOverlay() {
|
|
4102
|
+
return this._scrollableSettings.enabled && !this.hasScrollButtons.visible;
|
|
4103
|
+
}
|
|
4121
4104
|
/**
|
|
4122
4105
|
* A query list of all declared tabs.
|
|
4123
4106
|
*/
|
|
@@ -4195,8 +4178,7 @@ class TabStripComponent {
|
|
|
4195
4178
|
this.scrollService.toggleScrollButtonsState();
|
|
4196
4179
|
});
|
|
4197
4180
|
});
|
|
4198
|
-
|
|
4199
|
-
// this.isScrollable && !this.hasScrollButtons.visible && this.setScrollableOverlayClasses();
|
|
4181
|
+
this.isScrollable && !this.hasScrollButtons.visible && this.setScrollableOverlayClasses();
|
|
4200
4182
|
}
|
|
4201
4183
|
ngOnChanges(changes) {
|
|
4202
4184
|
if (!isDocumentAvailable()) {
|
|
@@ -4341,12 +4323,8 @@ class TabStripComponent {
|
|
|
4341
4323
|
resetTabFocus(this.tabs);
|
|
4342
4324
|
}));
|
|
4343
4325
|
if (this.isScrollable && this.mouseScrollEnabled) {
|
|
4344
|
-
this.
|
|
4326
|
+
this.attachTablistScrollHandler(tablist);
|
|
4345
4327
|
}
|
|
4346
|
-
// To be released in Q2 2025
|
|
4347
|
-
// if (this.isScrollable && !this.mouseScrollEnabled) {
|
|
4348
|
-
// this.attachTablistScrollHandler(tablist);
|
|
4349
|
-
// }
|
|
4350
4328
|
this.subscriptionsArePresent = true;
|
|
4351
4329
|
}
|
|
4352
4330
|
toggleScrollButtons(tabsOverflow) {
|
|
@@ -4373,22 +4351,6 @@ class TabStripComponent {
|
|
|
4373
4351
|
}
|
|
4374
4352
|
});
|
|
4375
4353
|
}
|
|
4376
|
-
attachWheelHandler(tablist) {
|
|
4377
|
-
this.ngZone.runOutsideAngular(() => {
|
|
4378
|
-
this.subscriptions.add(this.renderer.listen(tablist, 'wheel', (wheelEvent) => {
|
|
4379
|
-
const scrollEvent = new TabScrollEvent({
|
|
4380
|
-
originalEvent: wheelEvent
|
|
4381
|
-
});
|
|
4382
|
-
this.tabScroll.emit(scrollEvent);
|
|
4383
|
-
const isTabStripScrollEventPrevented = scrollEvent.isDefaultPrevented();
|
|
4384
|
-
if (isTabStripScrollEventPrevented || !this.scrollService.tabsOverflow) {
|
|
4385
|
-
return;
|
|
4386
|
-
}
|
|
4387
|
-
this.scrollService.onMouseScroll(wheelEvent);
|
|
4388
|
-
}));
|
|
4389
|
-
});
|
|
4390
|
-
}
|
|
4391
|
-
/* tslint:disable:no-unused-variable */
|
|
4392
4354
|
attachTablistScrollHandler(tablist) {
|
|
4393
4355
|
this.ngZone.runOutsideAngular(() => {
|
|
4394
4356
|
this.subscriptions.add(this.renderer.listen(tablist, 'scroll', (e) => {
|
|
@@ -4428,7 +4390,7 @@ class TabStripComponent {
|
|
|
4428
4390
|
}
|
|
4429
4391
|
}
|
|
4430
4392
|
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 });
|
|
4431
|
-
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: [
|
|
4393
|
+
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: [
|
|
4432
4394
|
TabStripService,
|
|
4433
4395
|
ScrollService,
|
|
4434
4396
|
LocalizationService,
|
|
@@ -4462,7 +4424,7 @@ class TabStripComponent {
|
|
|
4462
4424
|
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
4463
4425
|
</ng-container>
|
|
4464
4426
|
<ng-template #heading>
|
|
4465
|
-
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="
|
|
4427
|
+
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
|
|
4466
4428
|
<span
|
|
4467
4429
|
role="button"
|
|
4468
4430
|
*ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
|
|
@@ -4505,7 +4467,7 @@ class TabStripComponent {
|
|
|
4505
4467
|
'k-tabstrip-items-end': tabAlignment === 'end',
|
|
4506
4468
|
'k-tabstrip-items-stretched': tabAlignment === 'stretched',
|
|
4507
4469
|
'k-tabstrip-items-justify': tabAlignment === 'justify',
|
|
4508
|
-
'k-tabstrip-items-scroll':
|
|
4470
|
+
'k-tabstrip-items-scroll': mouseScrollEnabled
|
|
4509
4471
|
}"
|
|
4510
4472
|
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
4511
4473
|
>
|
|
@@ -4645,7 +4607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4645
4607
|
<ng-container *ngTemplateOutlet="heading"></ng-container>
|
|
4646
4608
|
</ng-container>
|
|
4647
4609
|
<ng-template #heading>
|
|
4648
|
-
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="
|
|
4610
|
+
<div class="k-tabstrip-items-wrapper" [class.k-tabstrip-items-wrapper-scroll]="mouseScrollEnabled" [ngClass]="itemsWrapperClass">
|
|
4649
4611
|
<span
|
|
4650
4612
|
role="button"
|
|
4651
4613
|
*ngIf="hasScrollButtons.visible && hasScrollButtons.position !== 'end'"
|
|
@@ -4688,7 +4650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4688
4650
|
'k-tabstrip-items-end': tabAlignment === 'end',
|
|
4689
4651
|
'k-tabstrip-items-stretched': tabAlignment === 'stretched',
|
|
4690
4652
|
'k-tabstrip-items-justify': tabAlignment === 'justify',
|
|
4691
|
-
'k-tabstrip-items-scroll':
|
|
4653
|
+
'k-tabstrip-items-scroll': mouseScrollEnabled
|
|
4692
4654
|
}"
|
|
4693
4655
|
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
4694
4656
|
>
|
|
@@ -4827,6 +4789,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4827
4789
|
}], tabStripScrollable: [{
|
|
4828
4790
|
type: HostBinding,
|
|
4829
4791
|
args: ['class.k-tabstrip-scrollable']
|
|
4792
|
+
}], tabStripScrollableOverlay: [{
|
|
4793
|
+
type: HostBinding,
|
|
4794
|
+
args: ['class.k-tabstrip-scrollable-overlay']
|
|
4830
4795
|
}], tabs: [{
|
|
4831
4796
|
type: ContentChildren,
|
|
4832
4797
|
args: [TabStripTabComponent]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-layout",
|
|
3
|
-
"version": "18.0.0-develop.
|
|
3
|
+
"version": "18.0.0-develop.10",
|
|
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",
|
|
@@ -39,17 +39,17 @@
|
|
|
39
39
|
"@angular/core": "16 - 19",
|
|
40
40
|
"@angular/platform-browser": "16 - 19",
|
|
41
41
|
"@progress/kendo-licensing": "^1.0.2",
|
|
42
|
-
"@progress/kendo-angular-common": "18.0.0-develop.
|
|
43
|
-
"@progress/kendo-angular-l10n": "18.0.0-develop.
|
|
44
|
-
"@progress/kendo-angular-progressbar": "18.0.0-develop.
|
|
45
|
-
"@progress/kendo-angular-icons": "18.0.0-develop.
|
|
46
|
-
"@progress/kendo-angular-buttons": "18.0.0-develop.
|
|
47
|
-
"@progress/kendo-angular-intl": "18.0.0-develop.
|
|
42
|
+
"@progress/kendo-angular-common": "18.0.0-develop.10",
|
|
43
|
+
"@progress/kendo-angular-l10n": "18.0.0-develop.10",
|
|
44
|
+
"@progress/kendo-angular-progressbar": "18.0.0-develop.10",
|
|
45
|
+
"@progress/kendo-angular-icons": "18.0.0-develop.10",
|
|
46
|
+
"@progress/kendo-angular-buttons": "18.0.0-develop.10",
|
|
47
|
+
"@progress/kendo-angular-intl": "18.0.0-develop.10",
|
|
48
48
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"tslib": "^2.3.1",
|
|
52
|
-
"@progress/kendo-angular-schematics": "18.0.0-develop.
|
|
52
|
+
"@progress/kendo-angular-schematics": "18.0.0-develop.10",
|
|
53
53
|
"@progress/kendo-draggable": "^3.0.2"
|
|
54
54
|
},
|
|
55
55
|
"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>;
|