@progress/kendo-angular-layout 21.4.1-develop.1 → 22.0.0-develop.1

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 (182) hide show
  1. package/avatar/l10n/messages.d.ts +1 -1
  2. package/fesm2022/progress-kendo-angular-layout.mjs +290 -290
  3. package/package.json +12 -20
  4. package/stepper/localization/messages.d.ts +1 -1
  5. package/tabstrip/localization/messages.d.ts +1 -1
  6. package/timeline/localization/messages.d.ts +1 -1
  7. package/esm2022/avatar/avatar.component.mjs +0 -406
  8. package/esm2022/avatar/l10n/custom-messages.component.mjs +0 -53
  9. package/esm2022/avatar/l10n/localized-messages.directive.mjs +0 -40
  10. package/esm2022/avatar/l10n/messages.mjs +0 -27
  11. package/esm2022/avatar/models/fill.mjs +0 -5
  12. package/esm2022/avatar/models/models.mjs +0 -9
  13. package/esm2022/avatar/models/rounded.mjs +0 -5
  14. package/esm2022/avatar/models/shape.mjs +0 -5
  15. package/esm2022/avatar/models/size.mjs +0 -5
  16. package/esm2022/avatar/models/theme-color.mjs +0 -5
  17. package/esm2022/avatar.module.mjs +0 -38
  18. package/esm2022/card/card-actions.component.mjs +0 -177
  19. package/esm2022/card/card-body.component.mjs +0 -37
  20. package/esm2022/card/card-footer.component.mjs +0 -37
  21. package/esm2022/card/card-header.component.mjs +0 -38
  22. package/esm2022/card/card.component.mjs +0 -118
  23. package/esm2022/card/directives/card-media.directive.mjs +0 -33
  24. package/esm2022/card/directives/card-separator.directive.mjs +0 -61
  25. package/esm2022/card/directives/card-subtitle.directive.mjs +0 -31
  26. package/esm2022/card/directives/card-title.directive.mjs +0 -31
  27. package/esm2022/card/models/actions-layout.mjs +0 -5
  28. package/esm2022/card/models/card-action.mjs +0 -21
  29. package/esm2022/card.module.mjs +0 -45
  30. package/esm2022/common/direction.mjs +0 -5
  31. package/esm2022/common/dom-queries.mjs +0 -47
  32. package/esm2022/common/orientation.mjs +0 -5
  33. package/esm2022/common/preventable-event.mjs +0 -31
  34. package/esm2022/common/styling-classes.mjs +0 -5
  35. package/esm2022/common/util.mjs +0 -85
  36. package/esm2022/directives.mjs +0 -174
  37. package/esm2022/drawer/animations.mjs +0 -146
  38. package/esm2022/drawer/drawer-container.component.mjs +0 -135
  39. package/esm2022/drawer/drawer-content.component.mjs +0 -39
  40. package/esm2022/drawer/drawer.component.mjs +0 -471
  41. package/esm2022/drawer/drawer.service.mjs +0 -105
  42. package/esm2022/drawer/events/drawer-list-select.event.mjs +0 -29
  43. package/esm2022/drawer/events/select-event.mjs +0 -33
  44. package/esm2022/drawer/item.component.mjs +0 -210
  45. package/esm2022/drawer/list.component.mjs +0 -165
  46. package/esm2022/drawer/models/constants.mjs +0 -8
  47. package/esm2022/drawer/models/drawer-animation.interface.mjs +0 -5
  48. package/esm2022/drawer/models/drawer-item-expand.interface.mjs +0 -5
  49. package/esm2022/drawer/models/drawer-item.interface.mjs +0 -5
  50. package/esm2022/drawer/models/drawer-view-item.interface.mjs +0 -5
  51. package/esm2022/drawer/models/mode.mjs +0 -5
  52. package/esm2022/drawer/models/position.mjs +0 -5
  53. package/esm2022/drawer/template-directives/drawer-template.directive.mjs +0 -43
  54. package/esm2022/drawer/template-directives/footer-template.directive.mjs +0 -36
  55. package/esm2022/drawer/template-directives/header-template.directive.mjs +0 -36
  56. package/esm2022/drawer/template-directives/item-template.directive.mjs +0 -44
  57. package/esm2022/drawer/template-directives.mjs +0 -8
  58. package/esm2022/drawer/types.mjs +0 -5
  59. package/esm2022/drawer/util.mjs +0 -16
  60. package/esm2022/drawer.module.mjs +0 -43
  61. package/esm2022/expansionpanel/animations.mjs +0 -23
  62. package/esm2022/expansionpanel/events/action-event.mjs +0 -21
  63. package/esm2022/expansionpanel/expansionpanel-title.directive.mjs +0 -38
  64. package/esm2022/expansionpanel/expansionpanel.component.mjs +0 -515
  65. package/esm2022/expansionpanel.module.mjs +0 -38
  66. package/esm2022/gridlayout.module.mjs +0 -38
  67. package/esm2022/index.mjs +0 -89
  68. package/esm2022/layout.module.mjs +0 -89
  69. package/esm2022/layouts/grid-layout.component.mjs +0 -179
  70. package/esm2022/layouts/gridlayout-item.component.mjs +0 -82
  71. package/esm2022/layouts/models/gridlayout-gap-settings.mjs +0 -5
  72. package/esm2022/layouts/models/gridlayout-row-col-size.mjs +0 -5
  73. package/esm2022/layouts/models/layout-align-settings.mjs +0 -5
  74. package/esm2022/layouts/models/layout-horizontal-align.mjs +0 -5
  75. package/esm2022/layouts/models/layout-vertical-align.mjs +0 -5
  76. package/esm2022/layouts/models.mjs +0 -10
  77. package/esm2022/layouts/stack-layout.component.mjs +0 -161
  78. package/esm2022/layouts/util.mjs +0 -101
  79. package/esm2022/package-metadata.mjs +0 -16
  80. package/esm2022/panelbar/events/collapse-event.mjs +0 -14
  81. package/esm2022/panelbar/events/expand-event.mjs +0 -14
  82. package/esm2022/panelbar/events/item-click-event.mjs +0 -17
  83. package/esm2022/panelbar/events/select-event.mjs +0 -14
  84. package/esm2022/panelbar/events/state-change-event.mjs +0 -13
  85. package/esm2022/panelbar/events.mjs +0 -9
  86. package/esm2022/panelbar/panelbar-content.directive.mjs +0 -36
  87. package/esm2022/panelbar/panelbar-expand-mode.mjs +0 -29
  88. package/esm2022/panelbar/panelbar-item-model.mjs +0 -5
  89. package/esm2022/panelbar/panelbar-item-template.directive.mjs +0 -37
  90. package/esm2022/panelbar/panelbar-item-title.directive.mjs +0 -42
  91. package/esm2022/panelbar/panelbar-item.component.mjs +0 -722
  92. package/esm2022/panelbar/panelbar.component.mjs +0 -705
  93. package/esm2022/panelbar/panelbar.service.mjs +0 -53
  94. package/esm2022/panelbar.module.mjs +0 -41
  95. package/esm2022/progress-kendo-angular-layout.mjs +0 -8
  96. package/esm2022/splitter/splitter-bar.component.mjs +0 -338
  97. package/esm2022/splitter/splitter-pane.component.mjs +0 -324
  98. package/esm2022/splitter/splitter.component.mjs +0 -301
  99. package/esm2022/splitter/splitter.service.mjs +0 -205
  100. package/esm2022/splitter/util.mjs +0 -34
  101. package/esm2022/splitter.module.mjs +0 -38
  102. package/esm2022/stacklayout.module.mjs +0 -37
  103. package/esm2022/stepper/events/activate-event.mjs +0 -33
  104. package/esm2022/stepper/list.component.mjs +0 -185
  105. package/esm2022/stepper/localization/custom-messages.component.mjs +0 -52
  106. package/esm2022/stepper/localization/localized-messages.directive.mjs +0 -41
  107. package/esm2022/stepper/localization/messages.mjs +0 -27
  108. package/esm2022/stepper/models/constants.mjs +0 -8
  109. package/esm2022/stepper/models/orientation.mjs +0 -5
  110. package/esm2022/stepper/models/step-predicate.mjs +0 -5
  111. package/esm2022/stepper/models/step-type.mjs +0 -5
  112. package/esm2022/stepper/models/stepper-step.interface.mjs +0 -5
  113. package/esm2022/stepper/step.component.mjs +0 -396
  114. package/esm2022/stepper/stepper.component.mjs +0 -423
  115. package/esm2022/stepper/stepper.service.mjs +0 -186
  116. package/esm2022/stepper/template-directives/indicator-template.directive.mjs +0 -37
  117. package/esm2022/stepper/template-directives/label-template.directive.mjs +0 -37
  118. package/esm2022/stepper/template-directives/step-template.directive.mjs +0 -39
  119. package/esm2022/stepper/template-directives.mjs +0 -7
  120. package/esm2022/stepper/types.mjs +0 -5
  121. package/esm2022/stepper.module.mjs +0 -41
  122. package/esm2022/tabstrip/constants.mjs +0 -29
  123. package/esm2022/tabstrip/directives/tab-content.directive.mjs +0 -39
  124. package/esm2022/tabstrip/directives/tab-title.directive.mjs +0 -37
  125. package/esm2022/tabstrip/directives/tab.directive.mjs +0 -24
  126. package/esm2022/tabstrip/events/select-event.mjs +0 -25
  127. package/esm2022/tabstrip/events/tabclose-event.mjs +0 -23
  128. package/esm2022/tabstrip/events/tabscroll-event.mjs +0 -23
  129. package/esm2022/tabstrip/events.mjs +0 -7
  130. package/esm2022/tabstrip/localization/custom-messages.component.mjs +0 -53
  131. package/esm2022/tabstrip/localization/localized-messages.directive.mjs +0 -39
  132. package/esm2022/tabstrip/localization/messages.mjs +0 -39
  133. package/esm2022/tabstrip/models/button-state-change.mjs +0 -5
  134. package/esm2022/tabstrip/models/scroll-button-type.mjs +0 -5
  135. package/esm2022/tabstrip/models/scroll-buttons-visibility.mjs +0 -5
  136. package/esm2022/tabstrip/models/scrollable-settings.mjs +0 -23
  137. package/esm2022/tabstrip/models/size.mjs +0 -5
  138. package/esm2022/tabstrip/models/tab-alignment.mjs +0 -5
  139. package/esm2022/tabstrip/models/tab-position.mjs +0 -5
  140. package/esm2022/tabstrip/models/tabstrip-tab.component.mjs +0 -130
  141. package/esm2022/tabstrip/rendering/tab.component.mjs +0 -182
  142. package/esm2022/tabstrip/scrollable-button.component.mjs +0 -182
  143. package/esm2022/tabstrip/tabstrip-scroll.service.mjs +0 -176
  144. package/esm2022/tabstrip/tabstrip.component.mjs +0 -954
  145. package/esm2022/tabstrip/tabstrip.service.mjs +0 -155
  146. package/esm2022/tabstrip/util.mjs +0 -120
  147. package/esm2022/tabstrip.module.mjs +0 -41
  148. package/esm2022/tilelayout/constants.mjs +0 -70
  149. package/esm2022/tilelayout/dragging-service.mjs +0 -421
  150. package/esm2022/tilelayout/keyboard-navigation.service.mjs +0 -189
  151. package/esm2022/tilelayout/models/dragging-config.interface.mjs +0 -5
  152. package/esm2022/tilelayout/models/flowmode.type.mjs +0 -5
  153. package/esm2022/tilelayout/models/gap.interface.mjs +0 -5
  154. package/esm2022/tilelayout/models/navigation.interface.mjs +0 -5
  155. package/esm2022/tilelayout/reorder-event.mjs +0 -43
  156. package/esm2022/tilelayout/resize-event.mjs +0 -37
  157. package/esm2022/tilelayout/tilelayout-item-body.component.mjs +0 -45
  158. package/esm2022/tilelayout/tilelayout-item-header.component.mjs +0 -43
  159. package/esm2022/tilelayout/tilelayout-item.component.mjs +0 -322
  160. package/esm2022/tilelayout/tilelayout-resize-handle.directive.mjs +0 -61
  161. package/esm2022/tilelayout/tilelayout.component.mjs +0 -388
  162. package/esm2022/tilelayout/util.mjs +0 -138
  163. package/esm2022/tilelayout.module.mjs +0 -40
  164. package/esm2022/timeline/events/navigation-direction.mjs +0 -5
  165. package/esm2022/timeline/localization/custom-messages.component.mjs +0 -43
  166. package/esm2022/timeline/localization/localized-messages.directive.mjs +0 -39
  167. package/esm2022/timeline/localization/messages.mjs +0 -33
  168. package/esm2022/timeline/models/anchor-target.mjs +0 -5
  169. package/esm2022/timeline/models/default-model-fields.mjs +0 -16
  170. package/esm2022/timeline/models/events-order.mjs +0 -5
  171. package/esm2022/timeline/models/model-fields.mjs +0 -5
  172. package/esm2022/timeline/models/timeline-event.mjs +0 -5
  173. package/esm2022/timeline/templates/timeline-card-actions.directive.mjs +0 -40
  174. package/esm2022/timeline/templates/timeline-card-body.directive.mjs +0 -40
  175. package/esm2022/timeline/templates/timeline-card-header.directive.mjs +0 -41
  176. package/esm2022/timeline/timeline-card.component.mjs +0 -451
  177. package/esm2022/timeline/timeline-horizontal.component.mjs +0 -781
  178. package/esm2022/timeline/timeline-vertical.component.mjs +0 -203
  179. package/esm2022/timeline/timeline.component.mjs +0 -491
  180. package/esm2022/timeline/timeline.service.mjs +0 -32
  181. package/esm2022/timeline/util.mjs +0 -26
  182. package/esm2022/timeline.module.mjs +0 -41
@@ -1,182 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { TabStripTabComponent } from '../models/tabstrip-tab.component';
6
- import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
7
- import { LocalizationService } from '@progress/kendo-angular-l10n';
8
- import { TabCloseEvent } from '../events/tabclose-event';
9
- import { xIcon } from '@progress/kendo-svg-icons';
10
- import { NgTemplateOutlet } from '@angular/common';
11
- import { IconWrapperComponent } from '@progress/kendo-angular-icons';
12
- import * as i0 from "@angular/core";
13
- import * as i1 from "@progress/kendo-angular-l10n";
14
- /**
15
- * @hidden
16
- */
17
- export class TabComponent {
18
- localization;
19
- tab;
20
- index;
21
- tabStripClosable;
22
- tabStripCloseIcon;
23
- customTabstripCloseIcon;
24
- closeSVGIcon;
25
- tabClose = new EventEmitter();
26
- hostClasses = true;
27
- get activeClass() {
28
- return this.tab.selected;
29
- }
30
- get disabledClass() {
31
- return this.tab.disabled;
32
- }
33
- get focusedClass() {
34
- return this.tab.focused;
35
- }
36
- get tabIndex() {
37
- return this.tab.selected || this.tab.focused ? 0 : -1;
38
- }
39
- constructor(localization) {
40
- this.localization = localization;
41
- }
42
- get tabClosable() {
43
- if (this.tab.closable !== undefined) {
44
- return this.tab.closable;
45
- }
46
- return this.tabStripClosable;
47
- }
48
- get closeSVGIconClass() {
49
- if (this.customCloseIconClasses) {
50
- return;
51
- }
52
- if (this.tab.closeSVGIcon) {
53
- return this.tab.closeSVGIcon;
54
- }
55
- if (this.closeSVGIcon) {
56
- return this.closeSVGIcon;
57
- }
58
- return xIcon;
59
- }
60
- get closeIconClasses() {
61
- if (!this.customTabstripCloseIcon && this.tabStripCloseIcon && !this.tab.closeIconClass) {
62
- if (this.tab.closeIcon) {
63
- return this.tab.closeIcon;
64
- }
65
- return this.tabStripCloseIcon;
66
- }
67
- }
68
- get customCloseIconClasses() {
69
- if (this.customTabstripCloseIcon || this.tab.closeIconClass) {
70
- if (this.tab.closeIconClass) {
71
- return this.tab.closeIconClass;
72
- }
73
- return this.customTabstripCloseIcon;
74
- }
75
- }
76
- get closeButtonTitle() {
77
- return this.localization.get('closeTitle');
78
- }
79
- closeTab(index) {
80
- const closeArgs = new TabCloseEvent(index, this.tab);
81
- this.tabClose.emit(closeArgs);
82
- }
83
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
84
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-tabstrip-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
85
- @if (!tab.tabTemplate) {
86
- @if (!tab.tabTitle) {
87
- <span class="k-link">
88
- <span class="k-link-text">{{ tab.title }}</span>
89
- </span>
90
- }
91
- @if (tab.tabTitle) {
92
- <span class="k-link">
93
- <ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
94
- </ng-template>
95
- </span>
96
- }
97
- } @else {
98
- <ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
99
- </ng-template>
100
- }
101
-
102
- @if (tabClosable) {
103
- <span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
104
- (click)="closeTab(index)" [title]="closeButtonTitle">
105
- <kendo-icon-wrapper
106
- [svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
107
- innerCssClass="k-button-icon" [customFontClass]="customCloseIconClasses"></kendo-icon-wrapper>
108
- </span>
109
- }
110
- `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
111
- }
112
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, decorators: [{
113
- type: Component,
114
- args: [{
115
- // eslint-disable-next-line @angular-eslint/component-selector
116
- selector: '[kendoTabStripTab]',
117
- template: `
118
- @if (!tab.tabTemplate) {
119
- @if (!tab.tabTitle) {
120
- <span class="k-link">
121
- <span class="k-link-text">{{ tab.title }}</span>
122
- </span>
123
- }
124
- @if (tab.tabTitle) {
125
- <span class="k-link">
126
- <ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
127
- </ng-template>
128
- </span>
129
- }
130
- } @else {
131
- <ng-template #tabTemplate [ngTemplateOutlet]="tab.tabTemplate?.templateRef">
132
- </ng-template>
133
- }
134
-
135
- @if (tabClosable) {
136
- <span class="k-remove-tab k-icon-button k-button k-button-md k-rounded-md k-button-flat-base k-button-flat"
137
- (click)="closeTab(index)" [title]="closeButtonTitle">
138
- <kendo-icon-wrapper
139
- [svgIcon]="closeSVGIconClass" [name]="closeIconClasses"
140
- innerCssClass="k-button-icon" [customFontClass]="customCloseIconClasses"></kendo-icon-wrapper>
141
- </span>
142
- }
143
- `,
144
- standalone: true,
145
- imports: [NgTemplateOutlet, IconWrapperComponent]
146
- }]
147
- }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { tab: [{
148
- type: Input
149
- }], index: [{
150
- type: Input
151
- }], tabStripClosable: [{
152
- type: Input
153
- }], tabStripCloseIcon: [{
154
- type: Input
155
- }], customTabstripCloseIcon: [{
156
- type: Input
157
- }], closeSVGIcon: [{
158
- type: Input
159
- }], tabClose: [{
160
- type: Output
161
- }], hostClasses: [{
162
- type: HostBinding,
163
- args: ['class.k-tabstrip-item']
164
- }], activeClass: [{
165
- type: HostBinding,
166
- args: ['attr.aria-selected']
167
- }, {
168
- type: HostBinding,
169
- args: ['class.k-active']
170
- }], disabledClass: [{
171
- type: HostBinding,
172
- args: ['attr.aria-disabled']
173
- }, {
174
- type: HostBinding,
175
- args: ['class.k-disabled']
176
- }], focusedClass: [{
177
- type: HostBinding,
178
- args: ['class.k-focus']
179
- }], tabIndex: [{
180
- type: HostBinding,
181
- args: ['attr.tabindex']
182
- }] } });
@@ -1,182 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- /* eslint-disable @typescript-eslint/no-explicit-any */
6
- import { Component, ElementRef, HostBinding, Input, Renderer2, NgZone, Output, EventEmitter } from '@angular/core';
7
- import { Subscription } from 'rxjs';
8
- import { DIRECTION_CLASSES, HIDDEN_CLASS } from './constants';
9
- import { isTablistHorizontal } from './util';
10
- import { TabScrollEvent } from './events/tabscroll-event';
11
- import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
12
- import { LocalizationService } from '@progress/kendo-angular-l10n';
13
- import { IconWrapperComponent } from '@progress/kendo-angular-icons';
14
- import * as i0 from "@angular/core";
15
- import * as i1 from "@progress/kendo-angular-l10n";
16
- /**
17
- * @hidden
18
- */
19
- export class TabStripScrollableButtonComponent {
20
- host;
21
- renderer;
22
- ngZone;
23
- localization;
24
- get prevClass() {
25
- return this.prev;
26
- }
27
- get nextClass() {
28
- return !this.prev;
29
- }
30
- prev = false;
31
- tabPosition;
32
- scrollable;
33
- tabScroll = new EventEmitter();
34
- onClick = new EventEmitter();
35
- get hostBoundingClientRect() {
36
- return this.host.nativeElement.getBoundingClientRect();
37
- }
38
- get iconClass() {
39
- return this.scrollButtonIconClass;
40
- }
41
- get customIconClass() {
42
- return this.customScrollButtonIconClass;
43
- }
44
- get svgIcon() {
45
- return this.scrollButtonSVGIcon;
46
- }
47
- caretAltLeftIcon = caretAltLeftIcon;
48
- caretAltRightIcon = caretAltRightIcon;
49
- caretAltUpIcon = caretAltUpIcon;
50
- caretAltDownIcon = caretAltDownIcon;
51
- subs = new Subscription();
52
- constructor(host, renderer, ngZone, localization) {
53
- this.host = host;
54
- this.renderer = renderer;
55
- this.ngZone = ngZone;
56
- this.localization = localization;
57
- }
58
- ngAfterViewInit() {
59
- this.ngZone.runOutsideAngular(() => {
60
- this.subs.add(this.renderer.listen(this.host.nativeElement, 'click', this.clickHandler));
61
- });
62
- }
63
- ngOnDestroy() {
64
- this.subs.unsubscribe();
65
- }
66
- toggle(show) {
67
- this.renderer[show ? 'removeClass' : 'addClass'](this.host.nativeElement, HIDDEN_CLASS);
68
- }
69
- clickHandler = (scrollEvent) => {
70
- const tabStripScrollEvent = this.emitScrollEvent(scrollEvent);
71
- const isTabStripScrollEventPrevented = tabStripScrollEvent.isDefaultPrevented();
72
- if (isTabStripScrollEventPrevented) {
73
- return;
74
- }
75
- const buttonType = this.prev ? 'prev' : 'next';
76
- this.onClick.emit(buttonType);
77
- };
78
- get scrollButtonIconClass() {
79
- const defaultPrevIcon = isTablistHorizontal(this.tabPosition) ?
80
- !this.localization.rtl ?
81
- DIRECTION_CLASSES.left :
82
- DIRECTION_CLASSES.right :
83
- DIRECTION_CLASSES.up;
84
- const defaultNextIcon = isTablistHorizontal(this.tabPosition) ?
85
- !this.localization.rtl ?
86
- DIRECTION_CLASSES.right :
87
- DIRECTION_CLASSES.left :
88
- DIRECTION_CLASSES.down;
89
- if (typeof this.scrollable === 'object') {
90
- const prevIcon = typeof this.scrollable.prevButtonIcon === 'undefined' ? defaultPrevIcon : '';
91
- const nextIcon = typeof this.scrollable.nextButtonIcon === 'undefined' ? defaultNextIcon : '';
92
- if (prevIcon && this.prev) {
93
- return prevIcon;
94
- }
95
- else if (nextIcon && !this.prev) {
96
- return nextIcon;
97
- }
98
- }
99
- }
100
- get customScrollButtonIconClass() {
101
- if (typeof this.scrollable === 'object') {
102
- const prevIcon = this.scrollable.prevButtonIcon;
103
- const nextIcon = this.scrollable.nextButtonIcon;
104
- if (prevIcon && this.prev) {
105
- return `k-icon ${prevIcon}`;
106
- }
107
- if (nextIcon && !this.prev) {
108
- return `k-icon ${nextIcon}`;
109
- }
110
- }
111
- }
112
- get scrollButtonSVGIcon() {
113
- const defaultPrevSVGIcon = isTablistHorizontal(this.tabPosition) ?
114
- !this.localization.rtl ?
115
- this.caretAltLeftIcon :
116
- this.caretAltRightIcon :
117
- this.caretAltUpIcon;
118
- const defaultNextSVGIcon = isTablistHorizontal(this.tabPosition) ?
119
- !this.localization.rtl ?
120
- this.caretAltRightIcon :
121
- this.caretAltLeftIcon :
122
- this.caretAltDownIcon;
123
- if (typeof this.scrollable === 'object') {
124
- const prevIcon = this.scrollable.prevSVGButtonIcon !== undefined ? this.scrollable.prevSVGButtonIcon : defaultPrevSVGIcon;
125
- const nextIcon = this.scrollable.nextSVGButtonIcon !== undefined ? this.scrollable.nextSVGButtonIcon : defaultNextSVGIcon;
126
- if (prevIcon || nextIcon) {
127
- return this.prev ? prevIcon : nextIcon;
128
- }
129
- }
130
- }
131
- emitScrollEvent(event) {
132
- const scrollEvent = new TabScrollEvent({
133
- originalEvent: event
134
- });
135
- this.tabScroll.emit(scrollEvent);
136
- return scrollEvent;
137
- }
138
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabStripScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
139
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TabStripScrollableButtonComponent, isStandalone: true, selector: "[kendoTabStripScrollableButton]", inputs: { prev: "prev", tabPosition: "tabPosition", scrollable: "scrollable" }, outputs: { tabScroll: "tabScroll", onClick: "onClick" }, host: { properties: { "class.k-tabstrip-prev": "this.prevClass", "class.k-tabstrip-next": "this.nextClass" } }, ngImport: i0, template: `
140
- <kendo-icon-wrapper
141
- [name]="iconClass"
142
- [customFontClass]="customIconClass"
143
- [svgIcon]="svgIcon"
144
- innerCssClass="k-button-icon"
145
- >
146
- </kendo-icon-wrapper>
147
- `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
148
- }
149
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabStripScrollableButtonComponent, decorators: [{
150
- type: Component,
151
- args: [{
152
- template: `
153
- <kendo-icon-wrapper
154
- [name]="iconClass"
155
- [customFontClass]="customIconClass"
156
- [svgIcon]="svgIcon"
157
- innerCssClass="k-button-icon"
158
- >
159
- </kendo-icon-wrapper>
160
- `,
161
- // eslint-disable-next-line @angular-eslint/component-selector
162
- selector: '[kendoTabStripScrollableButton]',
163
- standalone: true,
164
- imports: [IconWrapperComponent]
165
- }]
166
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { prevClass: [{
167
- type: HostBinding,
168
- args: ['class.k-tabstrip-prev']
169
- }], nextClass: [{
170
- type: HostBinding,
171
- args: ['class.k-tabstrip-next']
172
- }], prev: [{
173
- type: Input
174
- }], tabPosition: [{
175
- type: Input
176
- }], scrollable: [{
177
- type: Input
178
- }], tabScroll: [{
179
- type: Output
180
- }], onClick: [{
181
- type: Output
182
- }] } });
@@ -1,176 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { DEFAULT_SCROLL_BEHAVIOR } from './constants';
6
- import { Injectable, NgZone } from '@angular/core';
7
- import { isDocumentAvailable } from '@progress/kendo-angular-common';
8
- import { Subject } from 'rxjs';
9
- import { getActiveTab, isTablistHorizontal } from './util';
10
- import { LocalizationService } from '@progress/kendo-angular-l10n';
11
- import * as i0 from "@angular/core";
12
- import * as i1 from "@progress/kendo-angular-l10n";
13
- /**
14
- * @hidden
15
- */
16
- export class ScrollService {
17
- ngZone;
18
- localization;
19
- owner;
20
- position = 0;
21
- scrollButtonActiveStateChange = new Subject();
22
- get tablistElement() {
23
- return this.owner.tablist.nativeElement;
24
- }
25
- get tabstripSize() {
26
- const hostElement = this.owner.wrapper.nativeElement;
27
- const wrapperWidth = parseFloat(getComputedStyle(hostElement).width);
28
- const wrapperHeight = parseFloat(getComputedStyle(hostElement).height);
29
- return isTablistHorizontal(this.owner.tabPosition) ? wrapperWidth : wrapperHeight;
30
- }
31
- get tablistOverflowSize() {
32
- if (!isDocumentAvailable()) {
33
- return 0;
34
- }
35
- const isHorizontal = isTablistHorizontal(this.owner.tabPosition);
36
- const overflowSize = Math.floor(this.tablistElement[isHorizontal ? 'scrollWidth' : 'scrollHeight']
37
- - this.tablistElement.getBoundingClientRect()[isHorizontal ? 'width' : 'height']);
38
- return overflowSize < 0 ? 0 : overflowSize;
39
- }
40
- get tabsOverflow() {
41
- return this.tablistOverflowSize > 0;
42
- }
43
- constructor(ngZone, localization) {
44
- this.ngZone = ngZone;
45
- this.localization = localization;
46
- }
47
- toggleScrollButtonsState() {
48
- const tabStrip = this.owner;
49
- if (!tabStrip.hasScrollButtons) {
50
- return;
51
- }
52
- const currentPrevButtonActive = !this.isDisabled('prev');
53
- 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;
58
- if (calculatedPrevButtonActive !== currentPrevButtonActive) {
59
- this.ngZone.run(() => this.toggleButtonActiveState('prev', calculatedPrevButtonActive));
60
- }
61
- if (calculatedNextButtonActive !== currentNextButtonActive) {
62
- this.ngZone.run(() => this.toggleButtonActiveState('next', calculatedNextButtonActive));
63
- }
64
- }
65
- scrollToSelectedTab() {
66
- if (!this.tabsOverflow) {
67
- return;
68
- }
69
- const { index: activeIndex } = getActiveTab(this.owner.tabs);
70
- if (activeIndex === -1) {
71
- return;
72
- }
73
- this.position += this.getScrollOffset(activeIndex);
74
- if (isTablistHorizontal(this.owner.tabPosition)) {
75
- this.tablistElement.scrollLeft = this.position;
76
- }
77
- else {
78
- this.tablistElement.scrollTop = this.position;
79
- }
80
- this.toggleScrollButtonsState();
81
- const tabStrip = this.owner;
82
- if (!tabStrip.hasScrollButtons) {
83
- return;
84
- }
85
- const isFirstTabActive = activeIndex === 0;
86
- const isLastTabActive = activeIndex === this.owner.tabs.length - 1;
87
- if (isFirstTabActive && !this.isDisabled('prev')) {
88
- this.ngZone.run(() => this.toggleButtonActiveState('prev', false));
89
- }
90
- if (isLastTabActive && !this.isDisabled('next')) {
91
- this.ngZone.run(() => this.toggleButtonActiveState('next', false));
92
- }
93
- }
94
- getScrollOffset(activeIndex) {
95
- if (!isDocumentAvailable()) {
96
- return 0;
97
- }
98
- const isHorizontal = isTablistHorizontal(this.owner.tabPosition);
99
- this.tablistElement[`scroll${isHorizontal ? 'Left' : 'Top'}`] = this.position;
100
- const activeTabRect = this.tablistElement.children[activeIndex].getBoundingClientRect();
101
- const tablistRect = this.tablistElement.getBoundingClientRect();
102
- const end = isHorizontal ? 'right' : 'bottom';
103
- const start = isHorizontal ? 'left' : 'top';
104
- const activeTabStart = activeTabRect[start];
105
- const activeTabEnd = activeTabRect[end];
106
- const tablistStart = tablistRect[start];
107
- const tablistEnd = tablistRect[end];
108
- const tabEndIsInVisibleRange = activeTabEnd <= tablistEnd;
109
- const tabStartIsInVisibleRange = activeTabStart >= tablistStart;
110
- const isWholeTabVisible = tabEndIsInVisibleRange && tabStartIsInVisibleRange;
111
- if (isWholeTabVisible) {
112
- return 0;
113
- }
114
- if (!tabEndIsInVisibleRange) {
115
- return activeTabEnd - tablistEnd;
116
- }
117
- if (!tabStartIsInVisibleRange) {
118
- return activeTabStart - tablistStart;
119
- }
120
- }
121
- onScroll(e) {
122
- this.position = isTablistHorizontal(this.owner.tabPosition) ? e.target.scrollLeft : e.target.scrollTop;
123
- this.toggleScrollButtonsState();
124
- }
125
- scrollTabs(direction) {
126
- this.calculateListPosition(direction, this.owner.scrollable.buttonScrollSpeed);
127
- if (isTablistHorizontal(this.owner.tabPosition) && this.tablistElement) {
128
- this.tablistElement.scrollTo({ left: this.position, behavior: DEFAULT_SCROLL_BEHAVIOR });
129
- }
130
- else {
131
- this.tablistElement.scrollTo({ top: this.position, behavior: DEFAULT_SCROLL_BEHAVIOR });
132
- }
133
- this.toggleScrollButtonsState();
134
- }
135
- 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
- }
144
- }
145
- else if (direction === 'next' && this.position < this.tablistOverflowSize) {
146
- if (this.position + scrollSpeed > this.tablistOverflowSize) {
147
- this.position = this.tablistOverflowSize;
148
- return;
149
- }
150
- if (this.localization.rtl && isHorizontal) {
151
- this.position -= scrollSpeed;
152
- }
153
- else {
154
- this.position += scrollSpeed;
155
- }
156
- }
157
- }
158
- restoreScrollPosition() {
159
- if (isTablistHorizontal(this.owner.tabPosition)) {
160
- this.tablistElement.scrollLeft = this.position;
161
- }
162
- else {
163
- this.tablistElement.scrollTop = this.position;
164
- }
165
- this.toggleScrollButtonsState();
166
- }
167
- toggleButtonActiveState(buttonType, active) {
168
- this.scrollButtonActiveStateChange.next({ buttonType, active });
169
- }
170
- isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`]?.host.nativeElement.classList.contains('k-disabled');
171
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
172
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScrollService });
173
- }
174
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ScrollService, decorators: [{
175
- type: Injectable
176
- }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.LocalizationService }] });