@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.
- package/avatar/l10n/messages.d.ts +1 -1
- package/fesm2022/progress-kendo-angular-layout.mjs +290 -290
- package/package.json +12 -20
- package/stepper/localization/messages.d.ts +1 -1
- package/tabstrip/localization/messages.d.ts +1 -1
- package/timeline/localization/messages.d.ts +1 -1
- package/esm2022/avatar/avatar.component.mjs +0 -406
- package/esm2022/avatar/l10n/custom-messages.component.mjs +0 -53
- package/esm2022/avatar/l10n/localized-messages.directive.mjs +0 -40
- package/esm2022/avatar/l10n/messages.mjs +0 -27
- package/esm2022/avatar/models/fill.mjs +0 -5
- package/esm2022/avatar/models/models.mjs +0 -9
- package/esm2022/avatar/models/rounded.mjs +0 -5
- package/esm2022/avatar/models/shape.mjs +0 -5
- package/esm2022/avatar/models/size.mjs +0 -5
- package/esm2022/avatar/models/theme-color.mjs +0 -5
- package/esm2022/avatar.module.mjs +0 -38
- package/esm2022/card/card-actions.component.mjs +0 -177
- package/esm2022/card/card-body.component.mjs +0 -37
- package/esm2022/card/card-footer.component.mjs +0 -37
- package/esm2022/card/card-header.component.mjs +0 -38
- package/esm2022/card/card.component.mjs +0 -118
- package/esm2022/card/directives/card-media.directive.mjs +0 -33
- package/esm2022/card/directives/card-separator.directive.mjs +0 -61
- package/esm2022/card/directives/card-subtitle.directive.mjs +0 -31
- package/esm2022/card/directives/card-title.directive.mjs +0 -31
- package/esm2022/card/models/actions-layout.mjs +0 -5
- package/esm2022/card/models/card-action.mjs +0 -21
- package/esm2022/card.module.mjs +0 -45
- package/esm2022/common/direction.mjs +0 -5
- package/esm2022/common/dom-queries.mjs +0 -47
- package/esm2022/common/orientation.mjs +0 -5
- package/esm2022/common/preventable-event.mjs +0 -31
- package/esm2022/common/styling-classes.mjs +0 -5
- package/esm2022/common/util.mjs +0 -85
- package/esm2022/directives.mjs +0 -174
- package/esm2022/drawer/animations.mjs +0 -146
- package/esm2022/drawer/drawer-container.component.mjs +0 -135
- package/esm2022/drawer/drawer-content.component.mjs +0 -39
- package/esm2022/drawer/drawer.component.mjs +0 -471
- package/esm2022/drawer/drawer.service.mjs +0 -105
- package/esm2022/drawer/events/drawer-list-select.event.mjs +0 -29
- package/esm2022/drawer/events/select-event.mjs +0 -33
- package/esm2022/drawer/item.component.mjs +0 -210
- package/esm2022/drawer/list.component.mjs +0 -165
- package/esm2022/drawer/models/constants.mjs +0 -8
- package/esm2022/drawer/models/drawer-animation.interface.mjs +0 -5
- package/esm2022/drawer/models/drawer-item-expand.interface.mjs +0 -5
- package/esm2022/drawer/models/drawer-item.interface.mjs +0 -5
- package/esm2022/drawer/models/drawer-view-item.interface.mjs +0 -5
- package/esm2022/drawer/models/mode.mjs +0 -5
- package/esm2022/drawer/models/position.mjs +0 -5
- package/esm2022/drawer/template-directives/drawer-template.directive.mjs +0 -43
- package/esm2022/drawer/template-directives/footer-template.directive.mjs +0 -36
- package/esm2022/drawer/template-directives/header-template.directive.mjs +0 -36
- package/esm2022/drawer/template-directives/item-template.directive.mjs +0 -44
- package/esm2022/drawer/template-directives.mjs +0 -8
- package/esm2022/drawer/types.mjs +0 -5
- package/esm2022/drawer/util.mjs +0 -16
- package/esm2022/drawer.module.mjs +0 -43
- package/esm2022/expansionpanel/animations.mjs +0 -23
- package/esm2022/expansionpanel/events/action-event.mjs +0 -21
- package/esm2022/expansionpanel/expansionpanel-title.directive.mjs +0 -38
- package/esm2022/expansionpanel/expansionpanel.component.mjs +0 -515
- package/esm2022/expansionpanel.module.mjs +0 -38
- package/esm2022/gridlayout.module.mjs +0 -38
- package/esm2022/index.mjs +0 -89
- package/esm2022/layout.module.mjs +0 -89
- package/esm2022/layouts/grid-layout.component.mjs +0 -179
- package/esm2022/layouts/gridlayout-item.component.mjs +0 -82
- package/esm2022/layouts/models/gridlayout-gap-settings.mjs +0 -5
- package/esm2022/layouts/models/gridlayout-row-col-size.mjs +0 -5
- package/esm2022/layouts/models/layout-align-settings.mjs +0 -5
- package/esm2022/layouts/models/layout-horizontal-align.mjs +0 -5
- package/esm2022/layouts/models/layout-vertical-align.mjs +0 -5
- package/esm2022/layouts/models.mjs +0 -10
- package/esm2022/layouts/stack-layout.component.mjs +0 -161
- package/esm2022/layouts/util.mjs +0 -101
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/panelbar/events/collapse-event.mjs +0 -14
- package/esm2022/panelbar/events/expand-event.mjs +0 -14
- package/esm2022/panelbar/events/item-click-event.mjs +0 -17
- package/esm2022/panelbar/events/select-event.mjs +0 -14
- package/esm2022/panelbar/events/state-change-event.mjs +0 -13
- package/esm2022/panelbar/events.mjs +0 -9
- package/esm2022/panelbar/panelbar-content.directive.mjs +0 -36
- package/esm2022/panelbar/panelbar-expand-mode.mjs +0 -29
- package/esm2022/panelbar/panelbar-item-model.mjs +0 -5
- package/esm2022/panelbar/panelbar-item-template.directive.mjs +0 -37
- package/esm2022/panelbar/panelbar-item-title.directive.mjs +0 -42
- package/esm2022/panelbar/panelbar-item.component.mjs +0 -722
- package/esm2022/panelbar/panelbar.component.mjs +0 -705
- package/esm2022/panelbar/panelbar.service.mjs +0 -53
- package/esm2022/panelbar.module.mjs +0 -41
- package/esm2022/progress-kendo-angular-layout.mjs +0 -8
- package/esm2022/splitter/splitter-bar.component.mjs +0 -338
- package/esm2022/splitter/splitter-pane.component.mjs +0 -324
- package/esm2022/splitter/splitter.component.mjs +0 -301
- package/esm2022/splitter/splitter.service.mjs +0 -205
- package/esm2022/splitter/util.mjs +0 -34
- package/esm2022/splitter.module.mjs +0 -38
- package/esm2022/stacklayout.module.mjs +0 -37
- package/esm2022/stepper/events/activate-event.mjs +0 -33
- package/esm2022/stepper/list.component.mjs +0 -185
- package/esm2022/stepper/localization/custom-messages.component.mjs +0 -52
- package/esm2022/stepper/localization/localized-messages.directive.mjs +0 -41
- package/esm2022/stepper/localization/messages.mjs +0 -27
- package/esm2022/stepper/models/constants.mjs +0 -8
- package/esm2022/stepper/models/orientation.mjs +0 -5
- package/esm2022/stepper/models/step-predicate.mjs +0 -5
- package/esm2022/stepper/models/step-type.mjs +0 -5
- package/esm2022/stepper/models/stepper-step.interface.mjs +0 -5
- package/esm2022/stepper/step.component.mjs +0 -396
- package/esm2022/stepper/stepper.component.mjs +0 -423
- package/esm2022/stepper/stepper.service.mjs +0 -186
- package/esm2022/stepper/template-directives/indicator-template.directive.mjs +0 -37
- package/esm2022/stepper/template-directives/label-template.directive.mjs +0 -37
- package/esm2022/stepper/template-directives/step-template.directive.mjs +0 -39
- package/esm2022/stepper/template-directives.mjs +0 -7
- package/esm2022/stepper/types.mjs +0 -5
- package/esm2022/stepper.module.mjs +0 -41
- package/esm2022/tabstrip/constants.mjs +0 -29
- package/esm2022/tabstrip/directives/tab-content.directive.mjs +0 -39
- package/esm2022/tabstrip/directives/tab-title.directive.mjs +0 -37
- package/esm2022/tabstrip/directives/tab.directive.mjs +0 -24
- package/esm2022/tabstrip/events/select-event.mjs +0 -25
- package/esm2022/tabstrip/events/tabclose-event.mjs +0 -23
- package/esm2022/tabstrip/events/tabscroll-event.mjs +0 -23
- package/esm2022/tabstrip/events.mjs +0 -7
- package/esm2022/tabstrip/localization/custom-messages.component.mjs +0 -53
- package/esm2022/tabstrip/localization/localized-messages.directive.mjs +0 -39
- package/esm2022/tabstrip/localization/messages.mjs +0 -39
- package/esm2022/tabstrip/models/button-state-change.mjs +0 -5
- package/esm2022/tabstrip/models/scroll-button-type.mjs +0 -5
- package/esm2022/tabstrip/models/scroll-buttons-visibility.mjs +0 -5
- package/esm2022/tabstrip/models/scrollable-settings.mjs +0 -23
- package/esm2022/tabstrip/models/size.mjs +0 -5
- package/esm2022/tabstrip/models/tab-alignment.mjs +0 -5
- package/esm2022/tabstrip/models/tab-position.mjs +0 -5
- package/esm2022/tabstrip/models/tabstrip-tab.component.mjs +0 -130
- package/esm2022/tabstrip/rendering/tab.component.mjs +0 -182
- package/esm2022/tabstrip/scrollable-button.component.mjs +0 -182
- package/esm2022/tabstrip/tabstrip-scroll.service.mjs +0 -176
- package/esm2022/tabstrip/tabstrip.component.mjs +0 -954
- package/esm2022/tabstrip/tabstrip.service.mjs +0 -155
- package/esm2022/tabstrip/util.mjs +0 -120
- package/esm2022/tabstrip.module.mjs +0 -41
- package/esm2022/tilelayout/constants.mjs +0 -70
- package/esm2022/tilelayout/dragging-service.mjs +0 -421
- package/esm2022/tilelayout/keyboard-navigation.service.mjs +0 -189
- package/esm2022/tilelayout/models/dragging-config.interface.mjs +0 -5
- package/esm2022/tilelayout/models/flowmode.type.mjs +0 -5
- package/esm2022/tilelayout/models/gap.interface.mjs +0 -5
- package/esm2022/tilelayout/models/navigation.interface.mjs +0 -5
- package/esm2022/tilelayout/reorder-event.mjs +0 -43
- package/esm2022/tilelayout/resize-event.mjs +0 -37
- package/esm2022/tilelayout/tilelayout-item-body.component.mjs +0 -45
- package/esm2022/tilelayout/tilelayout-item-header.component.mjs +0 -43
- package/esm2022/tilelayout/tilelayout-item.component.mjs +0 -322
- package/esm2022/tilelayout/tilelayout-resize-handle.directive.mjs +0 -61
- package/esm2022/tilelayout/tilelayout.component.mjs +0 -388
- package/esm2022/tilelayout/util.mjs +0 -138
- package/esm2022/tilelayout.module.mjs +0 -40
- package/esm2022/timeline/events/navigation-direction.mjs +0 -5
- package/esm2022/timeline/localization/custom-messages.component.mjs +0 -43
- package/esm2022/timeline/localization/localized-messages.directive.mjs +0 -39
- package/esm2022/timeline/localization/messages.mjs +0 -33
- package/esm2022/timeline/models/anchor-target.mjs +0 -5
- package/esm2022/timeline/models/default-model-fields.mjs +0 -16
- package/esm2022/timeline/models/events-order.mjs +0 -5
- package/esm2022/timeline/models/model-fields.mjs +0 -5
- package/esm2022/timeline/models/timeline-event.mjs +0 -5
- package/esm2022/timeline/templates/timeline-card-actions.directive.mjs +0 -40
- package/esm2022/timeline/templates/timeline-card-body.directive.mjs +0 -40
- package/esm2022/timeline/templates/timeline-card-header.directive.mjs +0 -41
- package/esm2022/timeline/timeline-card.component.mjs +0 -451
- package/esm2022/timeline/timeline-horizontal.component.mjs +0 -781
- package/esm2022/timeline/timeline-vertical.component.mjs +0 -203
- package/esm2022/timeline/timeline.component.mjs +0 -491
- package/esm2022/timeline/timeline.service.mjs +0 -32
- package/esm2022/timeline/util.mjs +0 -26
- 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 }] });
|