@progress/kendo-angular-layout 21.4.1 → 22.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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,515 +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 { AnimationBuilder } from '@angular/animations';
6
- import { isFocusable, hasClass } from './../common/dom-queries';
7
- import { Component, ContentChild, EventEmitter, HostBinding, Input, Output, ElementRef, Renderer2, NgZone, ViewChild, isDevMode } from '@angular/core';
8
- import { ExpansionPanelTitleDirective } from './expansionpanel-title.directive';
9
- import { collapse, expand } from './animations';
10
- import { isPresent } from '../common/util';
11
- import { Subscription } from 'rxjs';
12
- import { Keys } from '@progress/kendo-angular-common';
13
- import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
14
- import { validatePackage } from '@progress/kendo-licensing';
15
- import { packageMetadata } from '../package-metadata';
16
- import { ExpansionPanelActionEvent } from './events/action-event';
17
- import { take } from 'rxjs/operators';
18
- import { chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
19
- import { IconWrapperComponent } from '@progress/kendo-angular-icons';
20
- import { NgTemplateOutlet } from '@angular/common';
21
- import * as i0 from "@angular/core";
22
- import * as i1 from "@progress/kendo-angular-l10n";
23
- import * as i2 from "@angular/animations";
24
- const DEFAULT_DURATION = 200;
25
- const CONTENT_HIDDEN_CLASS = 'k-hidden';
26
- let incrementingId = 0;
27
- /**
28
- * Represents the Kendo UI ExpansionPanel component for Angular. Provides an expandable and collapsible content container with customizable header and animation ([see overview]({% slug overview_expansionpanel %})).
29
- *
30
- * @example
31
- * ```html
32
- * <kendo-expansionpanel
33
- * title="Chile"
34
- * subtitle="South America"
35
- * [expanded]="isExpanded">
36
- * There are various theories about the origin of the word Chile.
37
- * </kendo-expansionpanel>
38
- * ```
39
- */
40
- export class ExpansionPanelComponent {
41
- renderer;
42
- hostElement;
43
- ngZone;
44
- localizationService;
45
- builder;
46
- /**
47
- * Specifies the primary text in the header of the ExpansionPanel
48
- * ([see example](slug:title_expansionpanel#toc-titles-and-subtitles)).
49
- */
50
- title = '';
51
- /**
52
- * Specifies the secondary text in the header of the ExpansionPanel, which renders next to the collapse/expand icon
53
- * ([see example](slug:title_expansionpanel#toc-titles-and-subtitles)).
54
- */
55
- subtitle = '';
56
- /**
57
- * Specifies whether the ExpansionPanel is disabled. If disabled, the ExpansionPanel can be neither expanded nor collapsed
58
- * ([see example]({% slug disabled_expansionpanel %})).
59
- *
60
- * @default false
61
- */
62
- disabled = false;
63
- /**
64
- * Specifies whether the ExpansionPanel is expanded. The property supports two-way binding
65
- * ([see example]({% slug interaction_expansionpanel %}#toc-setting-the-initial-state)).
66
- *
67
- * @default false
68
- */
69
- set expanded(value) {
70
- if (value === this.expanded) {
71
- return;
72
- }
73
- this._expanded = value;
74
- if (this.expanded) {
75
- this.removeContentHiddenClass();
76
- }
77
- else {
78
- this.addContentHiddenClass();
79
- }
80
- }
81
- get expanded() {
82
- return this._expanded;
83
- }
84
- /**
85
- * Defines an SVG icon for the expanded state of the component.
86
- * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
87
- */
88
- set svgExpandIcon(icon) {
89
- if (isDevMode() && icon && this.expandIcon) {
90
- throw new Error('Setting both expandIcon/svgExpandIcon options at the same time is not supported.');
91
- }
92
- this._svgExpandIcon = icon;
93
- }
94
- get svgExpandIcon() {
95
- return this._svgExpandIcon;
96
- }
97
- /**
98
- * Defines an SVG icon for the collapsed state of the component.
99
- * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
100
- */
101
- set svgCollapseIcon(icon) {
102
- if (isDevMode() && icon && this.collapseIcon) {
103
- throw new Error('Setting both collapseIcon/svgCollapseIcon options at the same time is not supported.');
104
- }
105
- this._svgCollapseIcon = icon;
106
- }
107
- get svgCollapseIcon() {
108
- return this._svgCollapseIcon;
109
- }
110
- /**
111
- * Sets a custom icon via CSS class(es) for the collapsed state of the component
112
- * ([see example]({% slug icons_expansionpanel %}#toc-icons)).
113
- */
114
- expandIcon;
115
- /**
116
- * Sets a custom icon via CSS class(es) for the expanded state of the component
117
- * ([see example]({% slug icons_expansionpanel %}#toc-icons)).
118
- */
119
- collapseIcon;
120
- /**
121
- * Specifies the animation settings of the ExpansionPanel
122
- * ([see example]({% slug animations_expansionpanel %})).
123
- *
124
- * @default true
125
- */
126
- animation = true;
127
- /**
128
- * Fires when the `expanded` property of the component is updated.
129
- * Used to provide a two-way binding for the `expanded` property
130
- * ([see example](slug:events_expansionpanel)).
131
- */
132
- expandedChange = new EventEmitter();
133
- /**
134
- * Fires when the expanded state of the ExpansionPanel is about to change. This event is preventable
135
- * ([see example](slug:events_expansionpanel)).
136
- */
137
- action = new EventEmitter();
138
- /**
139
- * Fires when the ExpansionPanel is expanded. If there is animation it fires when the animation is complete
140
- * ([see example](slug:events_expansionpanel)).
141
- */
142
- expand = new EventEmitter();
143
- /**
144
- * Fires when the ExpansionPanel is collapsed. If there is animation it fires when the animation is complete
145
- * ([see example](slug:events_expansionpanel)).
146
- */
147
- collapse = new EventEmitter();
148
- /**
149
- * @hidden
150
- */
151
- titleTemplate;
152
- content;
153
- header;
154
- hostClass = true;
155
- get expandedClass() {
156
- return this.expanded && !this.disabled;
157
- }
158
- direction;
159
- /**
160
- * @hidden
161
- */
162
- focused = false;
163
- animationEnd = new EventEmitter();
164
- subscriptions = new Subscription();
165
- _expanded = false;
166
- _svgExpandIcon = chevronDownIcon;
167
- _svgCollapseIcon = chevronUpIcon;
168
- nextId = incrementingId++;
169
- constructor(renderer, hostElement, ngZone, localizationService, builder) {
170
- this.renderer = renderer;
171
- this.hostElement = hostElement;
172
- this.ngZone = ngZone;
173
- this.localizationService = localizationService;
174
- this.builder = builder;
175
- validatePackage(packageMetadata);
176
- this.direction = localizationService.rtl ? 'rtl' : 'ltr';
177
- }
178
- ngOnInit() {
179
- this.renderer.removeAttribute(this.hostElement.nativeElement, 'title');
180
- this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; });
181
- const elem = this.hostElement.nativeElement;
182
- const header = this.header.nativeElement;
183
- this.subscriptions.add(this.renderer.listen(header, 'focus', () => this.focusExpansionPanel(elem)));
184
- this.subscriptions.add(this.renderer.listen(header, 'blur', () => this.blurExpansionPanel(elem)));
185
- }
186
- ngAfterViewInit() {
187
- this.initDomEvents();
188
- if (!this.expanded) {
189
- this.renderer.addClass(this.content.nativeElement, CONTENT_HIDDEN_CLASS);
190
- }
191
- }
192
- ngOnDestroy() {
193
- this.subscriptions.unsubscribe();
194
- }
195
- /**
196
- * @hidden
197
- */
198
- initDomEvents() {
199
- if (!this.hostElement) {
200
- return;
201
- }
202
- this.ngZone.runOutsideAngular(() => {
203
- const elem = this.hostElement.nativeElement;
204
- this.subscriptions.add(this.renderer.listen(elem, 'keydown', this.keyDownHandler.bind(this)));
205
- });
206
- }
207
- /**
208
- * @hidden
209
- */
210
- keyDownHandler(ev) {
211
- const isEnterOrSpace = ev.code === Keys.Enter || ev.code === Keys.NumpadEnter || ev.code === Keys.Space;
212
- if (this.disabled || !isEnterOrSpace) {
213
- return;
214
- }
215
- if (hasClass(ev.target, 'k-expander-header')) {
216
- ev.preventDefault();
217
- this.ngZone.run(() => {
218
- this.onHeaderAction();
219
- });
220
- }
221
- }
222
- /**
223
- * @hidden
224
- */
225
- onHeaderClick(ev) {
226
- const header = this.header.nativeElement;
227
- if (!isFocusable(ev.target) || (ev.target === header) && !this.disabled) {
228
- this.onHeaderAction();
229
- }
230
- }
231
- /**
232
- * @hidden
233
- */
234
- onHeaderAction() {
235
- const eventArgs = new ExpansionPanelActionEvent();
236
- eventArgs.action = this.expanded ? 'collapse' : 'expand';
237
- this.action.emit(eventArgs);
238
- if (!eventArgs.isDefaultPrevented()) {
239
- this.setExpanded(!this.expanded);
240
- if (this.expanded) {
241
- this.removeContentHiddenClass();
242
- }
243
- if (this.animation) {
244
- this.animateContent();
245
- return;
246
- }
247
- if (!this.expanded) {
248
- this.addContentHiddenClass();
249
- }
250
- this.emitExpandCollapseEvent();
251
- }
252
- }
253
- /**
254
- * @hidden
255
- */
256
- get contentWrapperId() {
257
- return `k-expansion-panel-content-wrapper-${this.nextId}`;
258
- }
259
- /**
260
- * @hidden
261
- */
262
- get expanderIndicatorClasses() {
263
- if (this.expanded) {
264
- return !this.collapseIcon ? `chevron-up` : '';
265
- }
266
- else {
267
- return !this.expandIcon ? `chevron-down` : '';
268
- }
269
- }
270
- /**
271
- * @hidden
272
- */
273
- get customExpanderIndicatorClasses() {
274
- if (this.expanded) {
275
- return this.collapseIcon ? this.collapseIcon : '';
276
- }
277
- else {
278
- return this.expandIcon ? this.expandIcon : '';
279
- }
280
- }
281
- /**
282
- * @hidden
283
- */
284
- get expanderSvgIcon() {
285
- return this.expanded ? this.svgCollapseIcon : this.svgExpandIcon;
286
- }
287
- /**
288
- * Toggles the visibility of the ExpansionPanel
289
- * ([see example](slug:interaction_expansionpanel#toggling-between-states)).
290
- *
291
- * @param expanded Specifies whether the ExpansionPanel will be expanded or collapsed.
292
- */
293
- toggle(expanded) {
294
- const previous = this.expanded;
295
- const current = isPresent(expanded) ? expanded : !previous;
296
- if (current === previous) {
297
- return;
298
- }
299
- this.setExpanded(current);
300
- if (this.expanded) {
301
- this.removeContentHiddenClass();
302
- }
303
- if (this.animation) {
304
- this.animateContent();
305
- return;
306
- }
307
- if (!this.expanded) {
308
- this.addContentHiddenClass();
309
- }
310
- this.emitExpandCollapseEvent();
311
- }
312
- focusExpansionPanel(el) {
313
- if (!this.focused) {
314
- this.focused = true;
315
- this.renderer.addClass(el, 'k-focus');
316
- }
317
- }
318
- blurExpansionPanel(el) {
319
- if (this.focused) {
320
- this.focused = false;
321
- this.renderer.removeClass(el, 'k-focus');
322
- }
323
- }
324
- setExpanded(value) {
325
- this._expanded = value;
326
- this.expandedChange.emit(value);
327
- }
328
- animateContent() {
329
- const duration = typeof this.animation === 'boolean' ? DEFAULT_DURATION : this.animation;
330
- const contentHeight = getComputedStyle(this.content.nativeElement).height;
331
- const animation = this.expanded ? expand(duration, contentHeight) : collapse(duration, contentHeight);
332
- const player = this.createPlayer(animation, this.content.nativeElement);
333
- this.animationEnd.pipe(take(1)).subscribe(() => {
334
- if (!this.expanded) {
335
- this.addContentHiddenClass();
336
- }
337
- this.emitExpandCollapseEvent();
338
- });
339
- player.play();
340
- }
341
- createPlayer(animation, animatedElement) {
342
- const factory = this.builder.build(animation);
343
- let player = factory.create(animatedElement);
344
- player.onDone(() => {
345
- if (player) {
346
- this.animationEnd.emit();
347
- player.destroy();
348
- player = null;
349
- }
350
- });
351
- return player;
352
- }
353
- emitExpandCollapseEvent() {
354
- this[this.expanded ? 'expand' : 'collapse'].emit();
355
- }
356
- addContentHiddenClass() {
357
- this.renderer.addClass(this.content.nativeElement, CONTENT_HIDDEN_CLASS);
358
- }
359
- removeContentHiddenClass() {
360
- this.renderer.removeClass(this.content.nativeElement, CONTENT_HIDDEN_CLASS);
361
- }
362
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
363
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ExpansionPanelComponent, isStandalone: true, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", svgExpandIcon: "svgExpandIcon", svgCollapseIcon: "svgCollapseIcon", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
364
- LocalizationService,
365
- {
366
- provide: L10N_PREFIX,
367
- useValue: 'kendo.expansionpanel'
368
- }
369
- ], queries: [{ propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleDirective, descendants: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true, static: true }], exportAs: ["kendoExpansionPanel"], ngImport: i0, template: `
370
- <div
371
- #header
372
- [class.k-expander-header]="true"
373
- [class.k-disabled]="disabled"
374
- [attr.aria-disabled]="disabled"
375
- [attr.aria-expanded]="expanded && !disabled"
376
- role="button"
377
- tabindex="0"
378
- [attr.aria-controls]="contentWrapperId"
379
- (click)="onHeaderClick($event)"
380
- >
381
- @if (!titleTemplate) {
382
- @if (title) {
383
- <div class="k-expander-title">{{ title }}</div>
384
- }
385
- <span class="k-spacer"></span>
386
- @if (subtitle) {
387
- <div class="k-expander-sub-title">
388
- {{ subtitle }}
389
- </div>
390
- }
391
- }
392
- @if (titleTemplate) {
393
- <ng-template
394
- [ngTemplateOutlet]="titleTemplate?.templateRef">
395
- </ng-template>
396
- }
397
- <span class="k-expander-indicator">
398
- <kendo-icon-wrapper
399
- [name]="expanderIndicatorClasses"
400
- [customFontClass]="customExpanderIndicatorClasses"
401
- [svgIcon]="expanderSvgIcon"
402
- >
403
- </kendo-icon-wrapper>
404
- </span>
405
- </div>
406
- <div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
407
- <div class="k-expander-content" [attr.aria-hidden]="!expanded">
408
- <ng-content></ng-content>
409
- </div>
410
- </div>
411
- `, 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"] }] });
412
- }
413
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
414
- type: Component,
415
- args: [{
416
- exportAs: 'kendoExpansionPanel',
417
- providers: [
418
- LocalizationService,
419
- {
420
- provide: L10N_PREFIX,
421
- useValue: 'kendo.expansionpanel'
422
- }
423
- ],
424
- selector: 'kendo-expansionpanel',
425
- template: `
426
- <div
427
- #header
428
- [class.k-expander-header]="true"
429
- [class.k-disabled]="disabled"
430
- [attr.aria-disabled]="disabled"
431
- [attr.aria-expanded]="expanded && !disabled"
432
- role="button"
433
- tabindex="0"
434
- [attr.aria-controls]="contentWrapperId"
435
- (click)="onHeaderClick($event)"
436
- >
437
- @if (!titleTemplate) {
438
- @if (title) {
439
- <div class="k-expander-title">{{ title }}</div>
440
- }
441
- <span class="k-spacer"></span>
442
- @if (subtitle) {
443
- <div class="k-expander-sub-title">
444
- {{ subtitle }}
445
- </div>
446
- }
447
- }
448
- @if (titleTemplate) {
449
- <ng-template
450
- [ngTemplateOutlet]="titleTemplate?.templateRef">
451
- </ng-template>
452
- }
453
- <span class="k-expander-indicator">
454
- <kendo-icon-wrapper
455
- [name]="expanderIndicatorClasses"
456
- [customFontClass]="customExpanderIndicatorClasses"
457
- [svgIcon]="expanderSvgIcon"
458
- >
459
- </kendo-icon-wrapper>
460
- </span>
461
- </div>
462
- <div #content [id]="contentWrapperId" class="k-expander-content-wrapper">
463
- <div class="k-expander-content" [attr.aria-hidden]="!expanded">
464
- <ng-content></ng-content>
465
- </div>
466
- </div>
467
- `,
468
- standalone: true,
469
- imports: [NgTemplateOutlet, IconWrapperComponent]
470
- }]
471
- }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i2.AnimationBuilder }], propDecorators: { title: [{
472
- type: Input
473
- }], subtitle: [{
474
- type: Input
475
- }], disabled: [{
476
- type: Input
477
- }], expanded: [{
478
- type: Input
479
- }], svgExpandIcon: [{
480
- type: Input
481
- }], svgCollapseIcon: [{
482
- type: Input
483
- }], expandIcon: [{
484
- type: Input
485
- }], collapseIcon: [{
486
- type: Input
487
- }], animation: [{
488
- type: Input
489
- }], expandedChange: [{
490
- type: Output
491
- }], action: [{
492
- type: Output
493
- }], expand: [{
494
- type: Output
495
- }], collapse: [{
496
- type: Output
497
- }], titleTemplate: [{
498
- type: ContentChild,
499
- args: [ExpansionPanelTitleDirective, { static: false }]
500
- }], content: [{
501
- type: ViewChild,
502
- args: ['content', { static: true }]
503
- }], header: [{
504
- type: ViewChild,
505
- args: ['header', { static: true }]
506
- }], hostClass: [{
507
- type: HostBinding,
508
- args: ['class.k-expander']
509
- }], expandedClass: [{
510
- type: HostBinding,
511
- args: ['class.k-expanded']
512
- }], direction: [{
513
- type: HostBinding,
514
- args: ['attr.dir']
515
- }] } });
@@ -1,38 +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 { NgModule } from '@angular/core';
6
- import { KENDO_EXPANSIONPANEL } from './directives';
7
- import * as i0 from "@angular/core";
8
- import * as i1 from "./expansionpanel/expansionpanel.component";
9
- import * as i2 from "./expansionpanel/expansionpanel-title.directive";
10
- // IMPORTANT: NgModule export kept for backwards compatibility
11
- /**
12
- * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the ExpansionPanel component.
13
- *
14
- * Use this module to add the ExpansionPanel component to your NgModule-based Angular application.
15
- *
16
- * @example
17
- * ```typescript
18
- * import { ExpansionPanelModule } from '@progress/kendo-angular-layout';
19
- * import { NgModule } from '@angular/core';
20
- *
21
- * @NgModule({
22
- * imports: [ExpansionPanelModule]
23
- * })
24
- * export class AppModule { }
25
- * ```
26
- */
27
- export class ExpansionPanelModule {
28
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
29
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelModule, imports: [i1.ExpansionPanelComponent, i2.ExpansionPanelTitleDirective], exports: [i1.ExpansionPanelComponent, i2.ExpansionPanelTitleDirective] });
30
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelModule, imports: [i1.ExpansionPanelComponent] });
31
- }
32
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExpansionPanelModule, decorators: [{
33
- type: NgModule,
34
- args: [{
35
- exports: [...KENDO_EXPANSIONPANEL],
36
- imports: [...KENDO_EXPANSIONPANEL]
37
- }]
38
- }] });
@@ -1,38 +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 { NgModule } from '@angular/core';
6
- import { KENDO_GRIDLAYOUT } from './directives';
7
- import * as i0 from "@angular/core";
8
- import * as i1 from "./layouts/grid-layout.component";
9
- import * as i2 from "./layouts/gridlayout-item.component";
10
- // IMPORTANT: NgModule export kept for backwards compatibility
11
- /**
12
- * Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the GridLayout component.
13
- *
14
- * Use this module to add the GridLayout component to your NgModule-based Angular application.
15
- *
16
- * @example
17
- * ```typescript
18
- * import { GridLayoutModule } from '@progress/kendo-angular-layout';
19
- * import { NgModule } from '@angular/core';
20
- *
21
- * @NgModule({
22
- * imports: [GridLayoutModule]
23
- * })
24
- * export class AppModule { }
25
- * ```
26
- */
27
- export class GridLayoutModule {
28
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
29
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: GridLayoutModule, imports: [i1.GridLayoutComponent, i2.GridLayoutItemComponent], exports: [i1.GridLayoutComponent, i2.GridLayoutItemComponent] });
30
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridLayoutModule });
31
- }
32
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridLayoutModule, decorators: [{
33
- type: NgModule,
34
- args: [{
35
- exports: [...KENDO_GRIDLAYOUT],
36
- imports: [...KENDO_GRIDLAYOUT]
37
- }]
38
- }] });
package/esm2022/index.mjs DELETED
@@ -1,89 +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
- export { PanelBarComponent } from './panelbar/panelbar.component';
6
- export { PanelBarItemComponent } from './panelbar/panelbar-item.component';
7
- export { PanelBarContentDirective } from './panelbar/panelbar-content.directive';
8
- export { PanelBarItemTemplateDirective } from './panelbar/panelbar-item-template.directive';
9
- export { PanelBarItemTitleDirective } from './panelbar/panelbar-item-title.directive';
10
- export { PanelBarExpandMode } from './panelbar/panelbar-expand-mode';
11
- export * from './panelbar/events';
12
- export { SplitterComponent } from './splitter/splitter.component';
13
- export { SplitterPaneComponent } from './splitter/splitter-pane.component';
14
- // TabStrip exports
15
- export { TabStripComponent } from './tabstrip/tabstrip.component';
16
- export { TabStripTabComponent } from './tabstrip/models/tabstrip-tab.component';
17
- export { TabContentDirective } from './tabstrip/directives/tab-content.directive';
18
- export { TabTitleDirective } from './tabstrip/directives/tab-title.directive';
19
- export { LocalizedTabStripMessagesDirective } from './tabstrip/localization/localized-messages.directive';
20
- export { TabStripCustomMessagesComponent } from './tabstrip/localization/custom-messages.component';
21
- export { TabTemplateDirective } from './tabstrip/directives/tab.directive';
22
- export * from './tabstrip/events';
23
- // Drawer exports
24
- export { DrawerComponent } from './drawer/drawer.component';
25
- export { DrawerContainerComponent } from './drawer/drawer-container.component';
26
- export { DrawerContentComponent } from './drawer/drawer-content.component';
27
- export { DrawerSelectEvent } from './drawer/events/select-event';
28
- export * from './drawer/template-directives';
29
- // Stepper exports
30
- export { StepperComponent } from './stepper/stepper.component';
31
- export { StepperActivateEvent } from './stepper/events/activate-event';
32
- export { StepperCustomMessagesComponent } from './stepper/localization/custom-messages.component';
33
- export { LocalizedStepperMessagesDirective } from './stepper/localization/localized-messages.directive';
34
- export * from './stepper/template-directives';
35
- export * from './stepper/types';
36
- // Avatar exports
37
- export { AvatarComponent } from './avatar/avatar.component';
38
- export { AvatarCustomMessagesComponent } from './avatar/l10n/custom-messages.component';
39
- export { LocalizedAvatarMessagesDirective } from './avatar/l10n/localized-messages.directive';
40
- // Card exports
41
- export { CardComponent } from './card/card.component';
42
- export { CardHeaderComponent } from './card/card-header.component';
43
- export { CardBodyComponent } from './card/card-body.component';
44
- export { CardFooterComponent } from './card/card-footer.component';
45
- export { CardActionsComponent } from './card/card-actions.component';
46
- export { CardSeparatorDirective } from './card/directives/card-separator.directive';
47
- export { CardTitleDirective } from './card/directives/card-title.directive';
48
- export { CardSubtitleDirective } from './card/directives/card-subtitle.directive';
49
- export { CardMediaDirective } from './card/directives/card-media.directive';
50
- export { CardAction } from './card/models/card-action';
51
- //ExpansionPanel
52
- export { ExpansionPanelComponent } from './expansionpanel/expansionpanel.component';
53
- export { ExpansionPanelTitleDirective } from './expansionpanel/expansionpanel-title.directive';
54
- export { ExpansionPanelActionEvent } from './expansionpanel/events/action-event';
55
- // TileLayout exports
56
- export { TileLayoutComponent } from './tilelayout/tilelayout.component';
57
- export { TileLayoutItemComponent } from './tilelayout/tilelayout-item.component';
58
- export { TileLayoutItemBodyComponent } from './tilelayout/tilelayout-item-body.component';
59
- export { TileLayoutItemHeaderComponent } from './tilelayout/tilelayout-item-header.component';
60
- export { TileLayoutReorderEvent } from './tilelayout/reorder-event';
61
- export { TileLayoutResizeEvent } from './tilelayout/resize-event';
62
- export { AvatarModule } from './avatar.module';
63
- export { CardModule } from './card.module';
64
- export { DrawerModule } from './drawer.module';
65
- export { LayoutModule } from './layout.module';
66
- export { PanelBarModule } from './panelbar.module';
67
- export { SplitterModule } from './splitter.module';
68
- export { StepperModule } from './stepper.module';
69
- export { TabStripModule } from './tabstrip.module';
70
- export { ExpansionPanelModule } from './expansionpanel.module';
71
- export { TileLayoutModule } from './tilelayout.module';
72
- export { StackLayoutModule } from './stacklayout.module';
73
- export { GridLayoutModule } from './gridlayout.module';
74
- export { TimelineModule } from './timeline.module';
75
- // StackLayout exports
76
- export { StackLayoutComponent } from './layouts/stack-layout.component';
77
- // GridLayout exports
78
- export { GridLayoutComponent } from './layouts/grid-layout.component';
79
- export { GridLayoutItemComponent } from './layouts/gridlayout-item.component';
80
- // error NG3001: Unsupported private class
81
- export { TabComponent } from './tabstrip/rendering/tab.component';
82
- export { TileLayoutResizeHandleDirective } from './tilelayout/tilelayout-resize-handle.directive';
83
- // Timeline exports
84
- export { TimelineComponent } from './timeline/timeline.component';
85
- export { TimelineCardHeaderTemplateDirective } from "./timeline/templates/timeline-card-header.directive";
86
- export { TimelineCardBodyTemplateDirective } from "./timeline/templates/timeline-card-body.directive";
87
- export { TimelineCardActionsTemplateDirective } from "./timeline/templates/timeline-card-actions.directive";
88
- export { TimelineCustomMessagesComponent } from './timeline/localization/custom-messages.component';
89
- export * from './directives';