@progress/kendo-angular-layout 21.4.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,423 +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 { Component, HostBinding, Input, Output, EventEmitter, ContentChild, Renderer2, ElementRef } from '@angular/core';
6
- import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
7
- import { StepperStepTemplateDirective } from './template-directives/step-template.directive';
8
- import { StepperLabelTemplateDirective } from './template-directives/label-template.directive';
9
- import { isPresent } from '../common/util';
10
- import { StepperIndicatorTemplateDirective } from './template-directives/indicator-template.directive';
11
- import { StepperService } from './stepper.service';
12
- import { ProgressBarComponent } from '@progress/kendo-angular-progressbar';
13
- import { NgStyle } from '@angular/common';
14
- import { StepperListComponent } from './list.component';
15
- import { LocalizedStepperMessagesDirective } from './localization/localized-messages.directive';
16
- import * as i0 from "@angular/core";
17
- import * as i1 from "@progress/kendo-angular-l10n";
18
- import * as i2 from "./stepper.service";
19
- const DEFAULT_ANIMATION_DURATION = 400;
20
- /**
21
- * Represents the [Kendo UI Stepper component for Angular]({% slug overview_stepper %}).
22
- *
23
- * @example
24
- * ```ts
25
- * @Component({
26
- * selector: 'my-app',
27
- * template: `
28
- * <kendo-stepper [steps]="steps">
29
- * </kendo-stepper>
30
- * `
31
- * })
32
- * class AppComponent {
33
- * public steps: Array<StepperStep> = [
34
- * { label: 'Step One' }, { label: 'Step Two' }, { label: 'Step Three' }
35
- * ];
36
- * }
37
- * ```
38
- * @remarks
39
- * Supported children components are: {@link StepperCustomMessagesComponent}.
40
- */
41
- export class StepperComponent {
42
- renderer;
43
- elem;
44
- localization;
45
- stepperService;
46
- hostClasses = true;
47
- get linearClass() {
48
- return this.linear;
49
- }
50
- ariaRole = 'navigation';
51
- direction;
52
- displayStyle = 'grid';
53
- /**
54
- * Specifies the type of the steps in the Stepper.
55
- *
56
- * @default 'indicator'
57
- */
58
- stepType = 'indicator';
59
- /**
60
- * Specifies the linear flow of the Stepper.
61
- *
62
- * @default true
63
- */
64
- linear = true;
65
- /**
66
- * Specifies the orientation of the Stepper
67
- * ([see example]({% slug orientation_stepper %})).
68
- *
69
- * @default 'horizontal'
70
- */
71
- orientation = 'horizontal';
72
- /**
73
- * Specifies the index of the current step.
74
- */
75
- set currentStep(value) {
76
- this.stepperService.currentStep = value;
77
- }
78
- get currentStep() {
79
- return this.stepperService.currentStep;
80
- }
81
- /**
82
- * Specifies the collection of steps that will be rendered in the Stepper
83
- * ([see example]({% slug step_appearance_stepper %})).
84
- */
85
- set steps(steps) {
86
- if (isPresent(steps) && steps.length > 0) {
87
- this._steps = steps;
88
- }
89
- }
90
- get steps() {
91
- return this._steps;
92
- }
93
- /**
94
- * Specifies an SVG icon to be rendered inside the step indicator instead of the default numeric or text content.
95
- * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
96
- */
97
- set svgIcon(icon) {
98
- this._svgIcon = icon;
99
- }
100
- get svgIcon() {
101
- return this._svgIcon;
102
- }
103
- /**
104
- * Specifies an SVG icon to be rendered for the success icon.
105
- * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
106
- */
107
- successSVGIcon;
108
- /**
109
- * Specifies an SVG icon to be rendered for the error icon.
110
- * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
111
- */
112
- errorSVGIcon;
113
- /**
114
- * Specifies an SVG icon that will be rendered inside the step for valid previous steps.
115
- * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
116
- */
117
- successIcon;
118
- /**
119
- * Specifies an SVG icon that will be rendered inside the step for invalid previous steps.
120
- * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
121
- */
122
- errorIcon;
123
- /**
124
- * Specifies the duration of the progress indicator animation in milliseconds.
125
- *
126
- * @default true
127
- */
128
- animation = true;
129
- /**
130
- * Fires when a step is about to be activated. You can prevent this event.
131
- */
132
- activate = new EventEmitter();
133
- /**
134
- * Fires when the `currentStep` property of the component was updated.
135
- * Use this event to provide a two-way binding for the `currentStep` property.
136
- */
137
- currentStepChange = new EventEmitter();
138
- /**
139
- * @hidden
140
- */
141
- stepTemplate;
142
- /**
143
- * @hidden
144
- */
145
- labelTemplate;
146
- /**
147
- * @hidden
148
- */
149
- indicatorTemplate;
150
- dynamicRTLSubscription;
151
- _steps = [];
152
- _successSVGIcon;
153
- _errorSVGIcon;
154
- _svgIcon;
155
- constructor(renderer, elem, localization, stepperService) {
156
- this.renderer = renderer;
157
- this.elem = elem;
158
- this.localization = localization;
159
- this.stepperService = stepperService;
160
- this.dynamicRTLSubscription = this.localization.changes.subscribe(({ rtl }) => {
161
- this.direction = rtl ? 'rtl' : 'ltr';
162
- });
163
- this.stepperService.owner = this;
164
- }
165
- ngOnInit() {
166
- this.applyHostStyling();
167
- }
168
- ngOnChanges(changes) {
169
- if (changes['steps'] && !changes['steps'].firstChange) {
170
- this.applyHostStyling();
171
- }
172
- if (changes['orientation']) {
173
- this.resetHostStyling();
174
- this.applyHostStyling();
175
- }
176
- }
177
- ngOnDestroy() {
178
- if (this.dynamicRTLSubscription) {
179
- this.dynamicRTLSubscription.unsubscribe();
180
- }
181
- }
182
- /**
183
- * Manually triggers the validity check configured by the [isValid]({% slug api_layout_stepperstep %}#toc-isvalid) property of the steps ([see example]({% slug step_validation_stepper %}#toc-triggering-the-validation)).
184
- *
185
- * Steps that have their [validate]({% slug api_layout_stepperstep %}#toc-validate) property set to `false`, will not be validated.
186
- */
187
- validateSteps() {
188
- this.stepperService.validateSteps();
189
- }
190
- applyHostStyling() {
191
- const stepFramesStyle = this.orientation === 'horizontal' ? 'grid-template-columns' : 'grid-template-rows';
192
- const stepFramesValue = `repeat(${this.steps.length * 2}, 1fr)`;
193
- this.renderer.setStyle(this.elem.nativeElement, stepFramesStyle, stepFramesValue);
194
- }
195
- resetHostStyling() {
196
- this.renderer.removeStyle(this.elem.nativeElement, 'grid-template-columns');
197
- this.renderer.removeStyle(this.elem.nativeElement, 'grid-template-rows');
198
- }
199
- /**
200
- * @hidden
201
- */
202
- get progressAnimation() {
203
- return { duration: this.animationDuration };
204
- }
205
- /**
206
- * @hidden
207
- */
208
- get animationDuration() {
209
- if (typeof this.animation === 'number') {
210
- return this.animation;
211
- }
212
- if (typeof this.animation === 'boolean' && this.animation) {
213
- return DEFAULT_ANIMATION_DURATION;
214
- }
215
- return 0;
216
- }
217
- /**
218
- * @hidden
219
- */
220
- get stepsListStyling() {
221
- if (this.orientation === 'horizontal') {
222
- return { 'grid-column-start': 1, 'grid-column-end': -1 };
223
- }
224
- return { 'grid-row-start': 1, 'grid-row-end': -1 };
225
- }
226
- /**
227
- * @hidden
228
- */
229
- get progressBarStyling() {
230
- if (this.orientation === 'horizontal') {
231
- return {
232
- 'grid-column-start': 2,
233
- 'grid-column-end': this.steps.length * 2
234
- };
235
- }
236
- return {
237
- 'grid-row-start': 2,
238
- 'grid-row-end': this.steps.length * 2
239
- };
240
- }
241
- /**
242
- * @hidden
243
- */
244
- onListKeydown(e) {
245
- this.stepperService.keydown(e);
246
- }
247
- /**
248
- * @hidden
249
- */
250
- onListClick(e) {
251
- if (e.stepIdx === e.currentStep) {
252
- this.stepperService.focus(e.stepIdx);
253
- return;
254
- }
255
- if (e.linear && this.stepperService.isPrevOrNextStep(e.stepIdx) === false) {
256
- return;
257
- }
258
- this.stepperService.onActivate(e.stepIdx, e.originalEvent);
259
- }
260
- /**
261
- * @hidden
262
- */
263
- get isHorizontal() {
264
- return this.orientation === 'horizontal';
265
- }
266
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.StepperService }], target: i0.ɵɵFactoryTarget.Component });
267
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StepperComponent, isStandalone: true, selector: "kendo-stepper", inputs: { stepType: "stepType", linear: "linear", orientation: "orientation", currentStep: "currentStep", steps: "steps", svgIcon: "svgIcon", successSVGIcon: "successSVGIcon", errorSVGIcon: "errorSVGIcon", successIcon: "successIcon", errorIcon: "errorIcon", animation: "animation" }, outputs: { activate: "activate", currentStepChange: "currentStepChange" }, host: { properties: { "class.k-stepper": "this.hostClasses", "class.k-stepper-linear": "this.linearClass", "attr.role": "this.ariaRole", "attr.dir": "this.direction", "style.display": "this.displayStyle" } }, providers: [
268
- LocalizationService,
269
- StepperService,
270
- {
271
- provide: L10N_PREFIX,
272
- useValue: 'kendo.stepper'
273
- }
274
- ], queries: [{ propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true }, { propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true }], exportAs: ["kendoStepper"], usesOnChanges: true, ngImport: i0, template: `
275
- <ng-container kendoStepperLocalizedMessages
276
- i18n-optional="kendo.stepper.optional|The text for the optional segment of the step label"
277
- optional="Optional"
278
- >
279
- </ng-container>
280
- <ol kendoStepperList
281
- [stepType]='stepType'
282
- [linear]='linear'
283
- [orientation]='orientation'
284
- [steps]='steps'
285
- [currentStep]='currentStep'
286
- [successIcon]='successIcon'
287
- [successSVGIcon]='successSVGIcon'
288
- [errorIcon]='errorIcon'
289
- [errorSVGIcon]='errorSVGIcon'
290
- [svgIcon]="svgIcon"
291
- [indicatorTemplate]='indicatorTemplate?.templateRef'
292
- [labelTemplate]='labelTemplate?.templateRef'
293
- [stepTemplate]='stepTemplate?.templateRef'
294
- class='k-step-list'
295
- [class.k-step-list-horizontal]='isHorizontal'
296
- [class.k-step-list-vertical]='!isHorizontal'
297
- [ngStyle]='stepsListStyling'
298
- (listKeydown)="onListKeydown($event)"
299
- (listClick)="onListClick($event)">
300
- </ol>
301
-
302
- @if (steps.length > 0) {
303
- <kendo-progressbar
304
- [attr.aria-hidden]='true'
305
- [animation]='progressAnimation'
306
- [max]='steps.length - 1'
307
- [label]='{position: "start", visible: false}'
308
- [orientation]='orientation'
309
- [reverse]='!isHorizontal'
310
- [value]='currentStep'
311
- [ngStyle]='progressBarStyling'>
312
- </kendo-progressbar>
313
- }
314
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedStepperMessagesDirective, selector: "\n [kendoStepperLocalizedMessages]\n " }, { kind: "component", type: StepperListComponent, selector: "[kendoStepperList]", inputs: ["linear", "stepType", "orientation", "currentStep", "steps", "successIcon", "successSVGIcon", "errorIcon", "errorSVGIcon", "svgIcon", "indicatorTemplate", "labelTemplate", "stepTemplate"], outputs: ["listKeydown", "listClick"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }] });
315
- }
316
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperComponent, decorators: [{
317
- type: Component,
318
- args: [{
319
- exportAs: 'kendoStepper',
320
- providers: [
321
- LocalizationService,
322
- StepperService,
323
- {
324
- provide: L10N_PREFIX,
325
- useValue: 'kendo.stepper'
326
- }
327
- ],
328
- selector: 'kendo-stepper',
329
- template: `
330
- <ng-container kendoStepperLocalizedMessages
331
- i18n-optional="kendo.stepper.optional|The text for the optional segment of the step label"
332
- optional="Optional"
333
- >
334
- </ng-container>
335
- <ol kendoStepperList
336
- [stepType]='stepType'
337
- [linear]='linear'
338
- [orientation]='orientation'
339
- [steps]='steps'
340
- [currentStep]='currentStep'
341
- [successIcon]='successIcon'
342
- [successSVGIcon]='successSVGIcon'
343
- [errorIcon]='errorIcon'
344
- [errorSVGIcon]='errorSVGIcon'
345
- [svgIcon]="svgIcon"
346
- [indicatorTemplate]='indicatorTemplate?.templateRef'
347
- [labelTemplate]='labelTemplate?.templateRef'
348
- [stepTemplate]='stepTemplate?.templateRef'
349
- class='k-step-list'
350
- [class.k-step-list-horizontal]='isHorizontal'
351
- [class.k-step-list-vertical]='!isHorizontal'
352
- [ngStyle]='stepsListStyling'
353
- (listKeydown)="onListKeydown($event)"
354
- (listClick)="onListClick($event)">
355
- </ol>
356
-
357
- @if (steps.length > 0) {
358
- <kendo-progressbar
359
- [attr.aria-hidden]='true'
360
- [animation]='progressAnimation'
361
- [max]='steps.length - 1'
362
- [label]='{position: "start", visible: false}'
363
- [orientation]='orientation'
364
- [reverse]='!isHorizontal'
365
- [value]='currentStep'
366
- [ngStyle]='progressBarStyling'>
367
- </kendo-progressbar>
368
- }
369
- `,
370
- standalone: true,
371
- imports: [LocalizedStepperMessagesDirective, StepperListComponent, NgStyle, ProgressBarComponent]
372
- }]
373
- }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i2.StepperService }], propDecorators: { hostClasses: [{
374
- type: HostBinding,
375
- args: ['class.k-stepper']
376
- }], linearClass: [{
377
- type: HostBinding,
378
- args: ['class.k-stepper-linear']
379
- }], ariaRole: [{
380
- type: HostBinding,
381
- args: ['attr.role']
382
- }], direction: [{
383
- type: HostBinding,
384
- args: ['attr.dir']
385
- }], displayStyle: [{
386
- type: HostBinding,
387
- args: ['style.display']
388
- }], stepType: [{
389
- type: Input
390
- }], linear: [{
391
- type: Input
392
- }], orientation: [{
393
- type: Input
394
- }], currentStep: [{
395
- type: Input
396
- }], steps: [{
397
- type: Input
398
- }], svgIcon: [{
399
- type: Input
400
- }], successSVGIcon: [{
401
- type: Input
402
- }], errorSVGIcon: [{
403
- type: Input
404
- }], successIcon: [{
405
- type: Input
406
- }], errorIcon: [{
407
- type: Input
408
- }], animation: [{
409
- type: Input
410
- }], activate: [{
411
- type: Output
412
- }], currentStepChange: [{
413
- type: Output
414
- }], stepTemplate: [{
415
- type: ContentChild,
416
- args: [StepperStepTemplateDirective, { static: false }]
417
- }], labelTemplate: [{
418
- type: ContentChild,
419
- args: [StepperLabelTemplateDirective, { static: false }]
420
- }], indicatorTemplate: [{
421
- type: ContentChild,
422
- args: [StepperIndicatorTemplateDirective, { static: false }]
423
- }] } });
@@ -1,186 +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 { Injectable, NgZone, ChangeDetectorRef, EventEmitter } from '@angular/core';
6
- import { hasObservers, Keys, normalizeKeys, PreventableEvent } from '@progress/kendo-angular-common';
7
- import { LocalizationService } from '@progress/kendo-angular-l10n';
8
- import { isPresent } from '../common/util';
9
- import * as i0 from "@angular/core";
10
- import * as i1 from "@progress/kendo-angular-l10n";
11
- const DEFAULT_CURRENT_STEP = 0;
12
- const handlers = {};
13
- handlers[Keys.ArrowLeft] = 'left';
14
- handlers[Keys.ArrowRight] = 'right';
15
- handlers[Keys.ArrowUp] = 'up';
16
- handlers[Keys.ArrowDown] = 'down';
17
- handlers[Keys.Home] = 'home';
18
- handlers[Keys.End] = 'end';
19
- handlers[Keys.Enter] = 'enter';
20
- handlers[Keys.NumpadEnter] = 'enter';
21
- handlers[Keys.Space] = 'enter';
22
- const handlersRTL = Object.assign({}, handlers);
23
- handlersRTL[Keys.ArrowLeft] = 'right';
24
- handlersRTL[Keys.ArrowRight] = 'left';
25
- // error NG3003: One or more import cycles would need to be created to compile this component,
26
- // which is not supported by the current compiler configuration
27
- /**
28
- * @hidden
29
- */
30
- class StepperActivateEvent extends PreventableEvent {
31
- /**
32
- * Specifies the index of the activated step in the `steps` collection.
33
- */
34
- index;
35
- /**
36
- * Specifies the activated step.
37
- */
38
- step;
39
- /**
40
- * Specifies the DOM event that triggered the step activation.
41
- */
42
- originalEvent;
43
- /**
44
- * Specifies the Stepper that triggered the event.
45
- */
46
- sender;
47
- /**
48
- * @hidden
49
- */
50
- constructor(args) {
51
- super();
52
- Object.assign(this, args);
53
- }
54
- }
55
- /**
56
- * @hidden
57
- */
58
- export class StepperService {
59
- localization;
60
- ngZone;
61
- changeDetector;
62
- owner;
63
- currentStep = DEFAULT_CURRENT_STEP;
64
- focusedStep;
65
- triggerValidation = new EventEmitter();
66
- focusedStepChange = new EventEmitter();
67
- get handlers() {
68
- return this.localization.rtl ? handlersRTL : handlers;
69
- }
70
- constructor(localization, ngZone, changeDetector) {
71
- this.localization = localization;
72
- this.ngZone = ngZone;
73
- this.changeDetector = changeDetector;
74
- }
75
- emit(event, eventArgs) {
76
- const stepper = this.owner;
77
- if (hasObservers(stepper[event])) {
78
- stepper[event].emit(eventArgs);
79
- }
80
- return eventArgs.isDefaultPrevented();
81
- }
82
- onActivate(currentIdx, originalEvent) {
83
- const eventArgs = new StepperActivateEvent({
84
- index: currentIdx,
85
- step: this.owner.steps[currentIdx],
86
- originalEvent: originalEvent,
87
- sender: this.owner
88
- });
89
- this.ngZone.run(() => {
90
- if (!this.emit('activate', eventArgs)) {
91
- this.currentStep = currentIdx;
92
- this.owner['currentStepChange'].emit(currentIdx);
93
- this.changeDetector.detectChanges();
94
- }
95
- });
96
- }
97
- validateSteps() {
98
- this.triggerValidation.emit();
99
- }
100
- keydown(e) {
101
- const current = this.focusedStep || this.currentStep;
102
- // on some keyboards arrow keys, PageUp/Down, and Home/End are mapped to Numpad keys
103
- const code = normalizeKeys(e);
104
- const handler = this.handlers[code];
105
- if (!isPresent(current)) {
106
- return;
107
- }
108
- if (handler) {
109
- e.preventDefault();
110
- this[handler](e);
111
- }
112
- }
113
- left() {
114
- if (!this.isHorizontal) {
115
- return;
116
- }
117
- this.focusPrevStep();
118
- }
119
- right() {
120
- if (!this.isHorizontal) {
121
- return;
122
- }
123
- this.focusNextStep();
124
- }
125
- up() {
126
- if (this.isHorizontal) {
127
- return;
128
- }
129
- this.focusPrevStep();
130
- }
131
- down() {
132
- if (this.isHorizontal) {
133
- return;
134
- }
135
- this.focusNextStep();
136
- }
137
- home() {
138
- this.focusedStep = 0;
139
- this.focusedStepChange.emit();
140
- }
141
- end() {
142
- this.focusedStep = this.owner.steps.length - 1;
143
- this.focusedStepChange.emit();
144
- }
145
- enter(event) {
146
- if (this.focusedStep === this.currentStep) {
147
- return;
148
- }
149
- if (this.isStepDisabled(this.focusedStep)) {
150
- return;
151
- }
152
- if (this.owner.linear && this.isPrevOrNextStep(this.focusedStep) === false) {
153
- return;
154
- }
155
- this.onActivate(this.focusedStep, event);
156
- }
157
- focus(focusedIdx) {
158
- this.focusedStep = focusedIdx;
159
- }
160
- focusNextStep() {
161
- if (this.focusedStep < this.owner.steps.length) {
162
- this.focusedStep += 1;
163
- this.focusedStepChange.emit();
164
- }
165
- }
166
- focusPrevStep() {
167
- if (this.focusedStep > 0) {
168
- this.focusedStep -= 1;
169
- this.focusedStepChange.emit();
170
- }
171
- }
172
- isStepDisabled(index) {
173
- return this.owner.steps[index].disabled;
174
- }
175
- isPrevOrNextStep(index) {
176
- return index === this.currentStep + 1 || index === this.currentStep - 1;
177
- }
178
- get isHorizontal() {
179
- return this.owner.orientation === 'horizontal';
180
- }
181
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
182
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperService });
183
- }
184
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperService, decorators: [{
185
- type: Injectable
186
- }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }] });
@@ -1,37 +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 { Directive, Optional, TemplateRef } from '@angular/core';
6
- import * as i0 from "@angular/core";
7
- /**
8
- * Use this template to define custom content for the step indicator.
9
- * To define the template, nest an `<ng-template>` tag
10
- * with the `kendoStepperIndicatorTemplate` directive inside the `<kendo-stepper>` tag.
11
- *
12
- * @example
13
- * ```html
14
- * <kendo-stepper>
15
- * <ng-template kendoStepperIndicatorTemplate let-step="step" let-index="index">
16
- * <span>{{ index + 1 }}</span>
17
- * </ng-template>
18
- * </kendo-stepper>
19
- * ```
20
- */
21
- export class StepperIndicatorTemplateDirective {
22
- templateRef;
23
- constructor(templateRef) {
24
- this.templateRef = templateRef;
25
- }
26
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
27
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: StepperIndicatorTemplateDirective, isStandalone: true, selector: "[kendoStepperIndicatorTemplate]", ngImport: i0 });
28
- }
29
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperIndicatorTemplateDirective, decorators: [{
30
- type: Directive,
31
- args: [{
32
- selector: '[kendoStepperIndicatorTemplate]',
33
- standalone: true
34
- }]
35
- }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
36
- type: Optional
37
- }] }] });
@@ -1,37 +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 { Directive, Optional, TemplateRef } from '@angular/core';
6
- import * as i0 from "@angular/core";
7
- /**
8
- * Use this template to define custom content for the step label.
9
- * To define the template, nest an `<ng-template>` tag
10
- * with the `kendoStepperLabelTemplate` directive inside the `<kendo-stepper>` tag.
11
- *
12
- * @example
13
- * ```html
14
- * <kendo-stepper>
15
- * <ng-template kendoStepperLabelTemplate let-step="step" let-index="index">
16
- * <span class="custom-label">{{ step.label }}</span>
17
- * </ng-template>
18
- * </kendo-stepper>
19
- * ```
20
- */
21
- export class StepperLabelTemplateDirective {
22
- templateRef;
23
- constructor(templateRef) {
24
- this.templateRef = templateRef;
25
- }
26
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperLabelTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
27
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: StepperLabelTemplateDirective, isStandalone: true, selector: "[kendoStepperLabelTemplate]", ngImport: i0 });
28
- }
29
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StepperLabelTemplateDirective, decorators: [{
30
- type: Directive,
31
- args: [{
32
- selector: '[kendoStepperLabelTemplate]',
33
- standalone: true
34
- }]
35
- }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
36
- type: Optional
37
- }] }] });