@progress/kendo-angular-layout 17.0.0-develop.21 → 17.0.0-develop.23

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 (239) hide show
  1. package/avatar/avatar.component.d.ts +1 -1
  2. package/avatar/l10n/messages.d.ts +1 -1
  3. package/avatar/models/fill.d.ts +1 -1
  4. package/avatar/models/rounded.d.ts +1 -1
  5. package/avatar/models/shape.d.ts +2 -2
  6. package/avatar/models/size.d.ts +1 -1
  7. package/avatar/models/theme-color.d.ts +1 -1
  8. package/card/card-actions.component.d.ts +1 -1
  9. package/card/card.component.d.ts +1 -1
  10. package/card/directives/card-separator.directive.d.ts +1 -1
  11. package/card/models/actions-layout.d.ts +1 -1
  12. package/common/direction.d.ts +1 -1
  13. package/common/orientation.d.ts +1 -1
  14. package/drawer/drawer.component.d.ts +1 -1
  15. package/drawer/item.component.d.ts +1 -1
  16. package/drawer/list.component.d.ts +1 -1
  17. package/drawer/models/drawer-item-expand.interface.d.ts +1 -1
  18. package/drawer/models/mode.d.ts +1 -1
  19. package/drawer/models/position.d.ts +1 -1
  20. package/{esm2020 → esm2022}/avatar/avatar.component.mjs +61 -25
  21. package/{esm2020 → esm2022}/avatar/l10n/custom-messages.component.mjs +9 -8
  22. package/{esm2020 → esm2022}/avatar/l10n/localized-messages.directive.mjs +9 -8
  23. package/{esm2020 → esm2022}/avatar/l10n/messages.mjs +7 -3
  24. package/{esm2020 → esm2022}/avatar.module.mjs +4 -4
  25. package/{esm2020 → esm2022}/card/card-actions.component.mjs +37 -31
  26. package/{esm2020 → esm2022}/card/card-body.component.mjs +5 -7
  27. package/{esm2020 → esm2022}/card/card-footer.component.mjs +5 -7
  28. package/{esm2020 → esm2022}/card/card-header.component.mjs +5 -7
  29. package/{esm2020 → esm2022}/card/card.component.mjs +40 -34
  30. package/{esm2020 → esm2022}/card/directives/card-media.directive.mjs +4 -6
  31. package/{esm2020 → esm2022}/card/directives/card-separator.directive.mjs +16 -14
  32. package/{esm2020 → esm2022}/card/directives/card-subtitle.directive.mjs +4 -6
  33. package/{esm2020 → esm2022}/card/directives/card-title.directive.mjs +4 -6
  34. package/{esm2020 → esm2022}/card/models/card-action.mjs +12 -0
  35. package/{esm2020 → esm2022}/card.module.mjs +4 -4
  36. package/{esm2020 → esm2022}/common/preventable-event.mjs +7 -7
  37. package/{esm2020 → esm2022}/drawer/drawer-container.component.mjs +28 -18
  38. package/{esm2020 → esm2022}/drawer/drawer-content.component.mjs +6 -7
  39. package/{esm2020 → esm2022}/drawer/drawer.component.mjs +132 -106
  40. package/{esm2020 → esm2022}/drawer/drawer.service.mjs +10 -10
  41. package/{esm2020 → esm2022}/drawer/events/drawer-list-select.event.mjs +12 -0
  42. package/{esm2020 → esm2022}/drawer/events/select-event.mjs +16 -0
  43. package/{esm2020 → esm2022}/drawer/item.component.mjs +22 -11
  44. package/{esm2020 → esm2022}/drawer/list.component.mjs +14 -6
  45. package/{esm2020 → esm2022}/drawer/template-directives/drawer-template.directive.mjs +4 -3
  46. package/{esm2020 → esm2022}/drawer/template-directives/footer-template.directive.mjs +4 -3
  47. package/{esm2020 → esm2022}/drawer/template-directives/header-template.directive.mjs +4 -3
  48. package/{esm2020 → esm2022}/drawer/template-directives/item-template.directive.mjs +4 -3
  49. package/{esm2020 → esm2022}/drawer.module.mjs +4 -4
  50. package/{esm2020 → esm2022}/expansionpanel/events/action-event.mjs +4 -0
  51. package/{esm2020 → esm2022}/expansionpanel/expansionpanel-title.directive.mjs +4 -3
  52. package/{esm2020 → esm2022}/expansionpanel/expansionpanel.component.mjs +103 -81
  53. package/{esm2020 → esm2022}/expansionpanel.module.mjs +4 -4
  54. package/{esm2020 → esm2022}/gridlayout.module.mjs +4 -4
  55. package/{esm2020 → esm2022}/layout.module.mjs +4 -4
  56. package/{esm2020 → esm2022}/layouts/grid-layout.component.mjs +57 -26
  57. package/{esm2020 → esm2022}/layouts/gridlayout-item.component.mjs +26 -4
  58. package/{esm2020 → esm2022}/layouts/stack-layout.component.mjs +40 -35
  59. package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
  60. package/{esm2020 → esm2022}/panelbar/events/collapse-event.mjs +4 -0
  61. package/{esm2020 → esm2022}/panelbar/events/expand-event.mjs +4 -0
  62. package/{esm2020 → esm2022}/panelbar/events/item-click-event.mjs +8 -0
  63. package/{esm2020 → esm2022}/panelbar/events/select-event.mjs +4 -0
  64. package/{esm2020 → esm2022}/panelbar/events/state-change-event.mjs +4 -0
  65. package/{esm2020 → esm2022}/panelbar/panelbar-content.directive.mjs +4 -3
  66. package/{esm2020 → esm2022}/panelbar/panelbar-item-template.directive.mjs +4 -3
  67. package/{esm2020 → esm2022}/panelbar/panelbar-item-title.directive.mjs +4 -3
  68. package/{esm2020 → esm2022}/panelbar/panelbar-item.component.mjs +99 -64
  69. package/{esm2020 → esm2022}/panelbar/panelbar.component.mjs +109 -98
  70. package/{esm2020 → esm2022}/panelbar/panelbar.service.mjs +23 -13
  71. package/{esm2020 → esm2022}/panelbar.module.mjs +4 -4
  72. package/{esm2020 → esm2022}/splitter/splitter-bar.component.mjs +26 -19
  73. package/{esm2020 → esm2022}/splitter/splitter-pane.component.mjs +78 -56
  74. package/{esm2020 → esm2022}/splitter/splitter.component.mjs +60 -33
  75. package/{esm2020 → esm2022}/splitter/splitter.service.mjs +11 -6
  76. package/{esm2020 → esm2022}/splitter.module.mjs +4 -4
  77. package/{esm2020 → esm2022}/stacklayout.module.mjs +4 -4
  78. package/{esm2020 → esm2022}/stepper/events/activate-event.mjs +16 -0
  79. package/{esm2020 → esm2022}/stepper/list.component.mjs +23 -5
  80. package/{esm2020 → esm2022}/stepper/localization/custom-messages.component.mjs +9 -8
  81. package/{esm2020 → esm2022}/stepper/localization/localized-messages.directive.mjs +9 -8
  82. package/{esm2020 → esm2022}/stepper/localization/messages.mjs +7 -3
  83. package/{esm2020 → esm2022}/stepper/step.component.mjs +25 -8
  84. package/{esm2020 → esm2022}/stepper/stepper.component.mjs +109 -68
  85. package/{esm2020 → esm2022}/stepper/stepper.service.mjs +30 -9
  86. package/{esm2020 → esm2022}/stepper/template-directives/indicator-template.directive.mjs +4 -3
  87. package/{esm2020 → esm2022}/stepper/template-directives/label-template.directive.mjs +4 -3
  88. package/{esm2020 → esm2022}/stepper/template-directives/step-template.directive.mjs +4 -3
  89. package/{esm2020 → esm2022}/stepper.module.mjs +4 -4
  90. package/{esm2020 → esm2022}/tabstrip/directives/tab-content.directive.mjs +4 -3
  91. package/{esm2020 → esm2022}/tabstrip/directives/tab-title.directive.mjs +4 -3
  92. package/{esm2020 → esm2022}/tabstrip/directives/tab.directive.mjs +4 -3
  93. package/{esm2020 → esm2022}/tabstrip/events/select-event.mjs +2 -0
  94. package/{esm2020 → esm2022}/tabstrip/events/tabclose-event.mjs +2 -0
  95. package/{esm2020 → esm2022}/tabstrip/events/tabscroll-event.mjs +4 -0
  96. package/{esm2020 → esm2022}/tabstrip/localization/custom-messages.component.mjs +9 -8
  97. package/{esm2020 → esm2022}/tabstrip/localization/localized-messages.directive.mjs +9 -8
  98. package/{esm2020 → esm2022}/tabstrip/localization/messages.mjs +15 -3
  99. package/esm2022/tabstrip/models/tabstrip-tab.component.mjs +117 -0
  100. package/{esm2020 → esm2022}/tabstrip/rendering/tab.component.mjs +16 -9
  101. package/{esm2020 → esm2022}/tabstrip/scrollable-button.component.mjs +33 -27
  102. package/{esm2020 → esm2022}/tabstrip/tabstrip-scroll.service.mjs +11 -9
  103. package/{esm2020 → esm2022}/tabstrip/tabstrip.component.mjs +141 -107
  104. package/{esm2020 → esm2022}/tabstrip/tabstrip.service.mjs +6 -3
  105. package/{esm2020 → esm2022}/tabstrip.module.mjs +4 -4
  106. package/{esm2020 → esm2022}/tilelayout/dragging-service.mjs +39 -18
  107. package/{esm2020 → esm2022}/tilelayout/keyboard-navigation.service.mjs +9 -4
  108. package/{esm2020 → esm2022}/tilelayout/reorder-event.mjs +8 -0
  109. package/{esm2020 → esm2022}/tilelayout/resize-event.mjs +6 -0
  110. package/{esm2020 → esm2022}/tilelayout/tilelayout-item-body.component.mjs +6 -8
  111. package/{esm2020 → esm2022}/tilelayout/tilelayout-item-header.component.mjs +11 -9
  112. package/{esm2020 → esm2022}/tilelayout/tilelayout-item.component.mjs +78 -48
  113. package/{esm2020 → esm2022}/tilelayout/tilelayout-resize-handle.directive.mjs +7 -3
  114. package/{esm2020 → esm2022}/tilelayout/tilelayout.component.mjs +101 -88
  115. package/{esm2020 → esm2022}/tilelayout.module.mjs +4 -4
  116. package/{esm2020 → esm2022}/timeline/localization/custom-messages.component.mjs +9 -8
  117. package/{esm2020 → esm2022}/timeline/localization/localized-messages.directive.mjs +9 -8
  118. package/{esm2020 → esm2022}/timeline/localization/messages.mjs +11 -3
  119. package/{esm2020 → esm2022}/timeline/templates/timeline-card-actions.directive.mjs +4 -3
  120. package/{esm2020 → esm2022}/timeline/templates/timeline-card-body.directive.mjs +4 -3
  121. package/{esm2020 → esm2022}/timeline/templates/timeline-card-header.directive.mjs +4 -3
  122. package/{esm2020 → esm2022}/timeline/timeline-card.component.mjs +48 -33
  123. package/{esm2020 → esm2022}/timeline/timeline-horizontal.component.mjs +74 -45
  124. package/{esm2020 → esm2022}/timeline/timeline-vertical.component.mjs +20 -6
  125. package/{esm2020 → esm2022}/timeline/timeline.component.mjs +108 -68
  126. package/{esm2020 → esm2022}/timeline/timeline.service.mjs +4 -3
  127. package/{esm2020 → esm2022}/timeline.module.mjs +4 -4
  128. package/expansionpanel/events/action-event.d.ts +1 -1
  129. package/expansionpanel/expansionpanel.component.d.ts +1 -1
  130. package/{fesm2020 → fesm2022}/progress-kendo-angular-layout.mjs +2336 -1528
  131. package/layouts/grid-layout.component.d.ts +1 -1
  132. package/layouts/gridlayout-item.component.d.ts +1 -1
  133. package/layouts/models/layout-horizontal-align.d.ts +1 -1
  134. package/layouts/models/layout-vertical-align.d.ts +1 -1
  135. package/layouts/stack-layout.component.d.ts +1 -1
  136. package/package.json +16 -22
  137. package/panelbar/panelbar-item.component.d.ts +1 -1
  138. package/panelbar/panelbar.component.d.ts +1 -1
  139. package/splitter/splitter-bar.component.d.ts +1 -1
  140. package/splitter/splitter-pane.component.d.ts +1 -1
  141. package/splitter/splitter.component.d.ts +1 -1
  142. package/splitter/splitter.service.d.ts +2 -2
  143. package/stepper/list.component.d.ts +1 -1
  144. package/stepper/localization/messages.d.ts +1 -1
  145. package/stepper/models/orientation.d.ts +1 -1
  146. package/stepper/models/step-predicate.d.ts +1 -1
  147. package/stepper/models/step-type.d.ts +1 -1
  148. package/stepper/step.component.d.ts +1 -1
  149. package/stepper/stepper.component.d.ts +1 -1
  150. package/tabstrip/localization/messages.d.ts +1 -1
  151. package/tabstrip/models/button-state-change.d.ts +1 -1
  152. package/tabstrip/models/scroll-button-type.d.ts +1 -1
  153. package/tabstrip/models/scroll-buttons-visibility.d.ts +1 -1
  154. package/tabstrip/models/tab-alignment.d.ts +1 -1
  155. package/tabstrip/models/tab-position.d.ts +1 -1
  156. package/tabstrip/models/tabstrip-tab.component.d.ts +1 -1
  157. package/tabstrip/rendering/tab.component.d.ts +1 -1
  158. package/tabstrip/scrollable-button.component.d.ts +1 -1
  159. package/tabstrip/tabstrip.component.d.ts +1 -1
  160. package/tilelayout/models/flowmode.type.d.ts +1 -1
  161. package/tilelayout/tilelayout-item-header.component.d.ts +1 -1
  162. package/tilelayout/tilelayout-item.component.d.ts +1 -1
  163. package/tilelayout/tilelayout-resize-handle.directive.d.ts +1 -1
  164. package/tilelayout/tilelayout.component.d.ts +1 -1
  165. package/timeline/events/navigation-direction.d.ts +1 -1
  166. package/timeline/localization/messages.d.ts +1 -1
  167. package/timeline/models/anchor-target.d.ts +1 -1
  168. package/timeline/timeline-card.component.d.ts +1 -1
  169. package/timeline/timeline-horizontal.component.d.ts +1 -1
  170. package/timeline/timeline-vertical.component.d.ts +1 -1
  171. package/timeline/timeline.component.d.ts +1 -1
  172. package/esm2020/tabstrip/models/tabstrip-tab.component.mjs +0 -78
  173. package/fesm2015/progress-kendo-angular-layout.mjs +0 -12495
  174. /package/{esm2020 → esm2022}/avatar/models/fill.mjs +0 -0
  175. /package/{esm2020 → esm2022}/avatar/models/models.mjs +0 -0
  176. /package/{esm2020 → esm2022}/avatar/models/rounded.mjs +0 -0
  177. /package/{esm2020 → esm2022}/avatar/models/shape.mjs +0 -0
  178. /package/{esm2020 → esm2022}/avatar/models/size.mjs +0 -0
  179. /package/{esm2020 → esm2022}/avatar/models/theme-color.mjs +0 -0
  180. /package/{esm2020 → esm2022}/card/models/actions-layout.mjs +0 -0
  181. /package/{esm2020 → esm2022}/common/direction.mjs +0 -0
  182. /package/{esm2020 → esm2022}/common/dom-queries.mjs +0 -0
  183. /package/{esm2020 → esm2022}/common/orientation.mjs +0 -0
  184. /package/{esm2020 → esm2022}/common/styling-classes.mjs +0 -0
  185. /package/{esm2020 → esm2022}/common/util.mjs +0 -0
  186. /package/{esm2020 → esm2022}/directives.mjs +0 -0
  187. /package/{esm2020 → esm2022}/drawer/animations.mjs +0 -0
  188. /package/{esm2020 → esm2022}/drawer/models/constants.mjs +0 -0
  189. /package/{esm2020 → esm2022}/drawer/models/drawer-animation.interface.mjs +0 -0
  190. /package/{esm2020 → esm2022}/drawer/models/drawer-item-expand.interface.mjs +0 -0
  191. /package/{esm2020 → esm2022}/drawer/models/drawer-item.interface.mjs +0 -0
  192. /package/{esm2020 → esm2022}/drawer/models/drawer-view-item.interface.mjs +0 -0
  193. /package/{esm2020 → esm2022}/drawer/models/mode.mjs +0 -0
  194. /package/{esm2020 → esm2022}/drawer/models/position.mjs +0 -0
  195. /package/{esm2020 → esm2022}/drawer/template-directives.mjs +0 -0
  196. /package/{esm2020 → esm2022}/drawer/types.mjs +0 -0
  197. /package/{esm2020 → esm2022}/drawer/util.mjs +0 -0
  198. /package/{esm2020 → esm2022}/expansionpanel/animations.mjs +0 -0
  199. /package/{esm2020 → esm2022}/index.mjs +0 -0
  200. /package/{esm2020 → esm2022}/layouts/models/gridlayout-gap-settings.mjs +0 -0
  201. /package/{esm2020 → esm2022}/layouts/models/gridlayout-row-col-size.mjs +0 -0
  202. /package/{esm2020 → esm2022}/layouts/models/layout-align-settings.mjs +0 -0
  203. /package/{esm2020 → esm2022}/layouts/models/layout-horizontal-align.mjs +0 -0
  204. /package/{esm2020 → esm2022}/layouts/models/layout-vertical-align.mjs +0 -0
  205. /package/{esm2020 → esm2022}/layouts/models.mjs +0 -0
  206. /package/{esm2020 → esm2022}/layouts/util.mjs +0 -0
  207. /package/{esm2020 → esm2022}/panelbar/events.mjs +0 -0
  208. /package/{esm2020 → esm2022}/panelbar/panelbar-expand-mode.mjs +0 -0
  209. /package/{esm2020 → esm2022}/panelbar/panelbar-item-model.mjs +0 -0
  210. /package/{esm2020 → esm2022}/progress-kendo-angular-layout.mjs +0 -0
  211. /package/{esm2020 → esm2022}/splitter/util.mjs +0 -0
  212. /package/{esm2020 → esm2022}/stepper/models/constants.mjs +0 -0
  213. /package/{esm2020 → esm2022}/stepper/models/orientation.mjs +0 -0
  214. /package/{esm2020 → esm2022}/stepper/models/step-predicate.mjs +0 -0
  215. /package/{esm2020 → esm2022}/stepper/models/step-type.mjs +0 -0
  216. /package/{esm2020 → esm2022}/stepper/models/stepper-step.interface.mjs +0 -0
  217. /package/{esm2020 → esm2022}/stepper/template-directives.mjs +0 -0
  218. /package/{esm2020 → esm2022}/stepper/types.mjs +0 -0
  219. /package/{esm2020 → esm2022}/tabstrip/constants.mjs +0 -0
  220. /package/{esm2020 → esm2022}/tabstrip/events.mjs +0 -0
  221. /package/{esm2020 → esm2022}/tabstrip/models/button-state-change.mjs +0 -0
  222. /package/{esm2020 → esm2022}/tabstrip/models/scroll-button-type.mjs +0 -0
  223. /package/{esm2020 → esm2022}/tabstrip/models/scroll-buttons-visibility.mjs +0 -0
  224. /package/{esm2020 → esm2022}/tabstrip/models/scrollable-settings.mjs +0 -0
  225. /package/{esm2020 → esm2022}/tabstrip/models/tab-alignment.mjs +0 -0
  226. /package/{esm2020 → esm2022}/tabstrip/models/tab-position.mjs +0 -0
  227. /package/{esm2020 → esm2022}/tabstrip/util.mjs +0 -0
  228. /package/{esm2020 → esm2022}/tilelayout/constants.mjs +0 -0
  229. /package/{esm2020 → esm2022}/tilelayout/models/dragging-config.interface.mjs +0 -0
  230. /package/{esm2020 → esm2022}/tilelayout/models/flowmode.type.mjs +0 -0
  231. /package/{esm2020 → esm2022}/tilelayout/models/gap.interface.mjs +0 -0
  232. /package/{esm2020 → esm2022}/tilelayout/models/navigation.interface.mjs +0 -0
  233. /package/{esm2020 → esm2022}/tilelayout/util.mjs +0 -0
  234. /package/{esm2020 → esm2022}/timeline/events/navigation-direction.mjs +0 -0
  235. /package/{esm2020 → esm2022}/timeline/models/anchor-target.mjs +0 -0
  236. /package/{esm2020 → esm2022}/timeline/models/default-model-fields.mjs +0 -0
  237. /package/{esm2020 → esm2022}/timeline/models/model-fields.mjs +0 -0
  238. /package/{esm2020 → esm2022}/timeline/models/timeline-event.mjs +0 -0
  239. /package/{esm2020 → esm2022}/timeline/util.mjs +0 -0
@@ -24,93 +24,31 @@ import * as i2 from "@progress/kendo-angular-l10n";
24
24
  */
25
25
  // TODO: add styles as input prop
26
26
  export class PanelBarComponent {
27
- constructor(elementRef, eventService, localization) {
28
- this.localization = localization;
29
- /**
30
- * Sets the expand mode of the PanelBar through the `PanelBarExpandMode` enum ([see example]({% slug expandmodes_panelbar %})).
31
- *
32
- * The available modes are:
33
- * - `"single"`—Expands only one item at a time. Expanding an item collapses the item that was previously expanded.
34
- * - `"multiple"`—The default mode of the PanelBar.
35
- * Expands more than one item at a time. Items can also be toggled.
36
- * - `"full"`—Expands only one item at a time.
37
- * The expanded area occupies the entire height of the PanelBar. Requires you to set the `height` property.
38
- */
39
- this.expandMode = PanelBarExpandMode.Default;
40
- /**
41
- * Allows the PanelBar to modify the selected state of the items.
42
- */
43
- this.selectable = true;
44
- /**
45
- * Sets the animate state of the PanelBar ([see example]({% slug animations_panelbar %})).
46
- */
47
- this.animate = true;
48
- /**
49
- * Sets the height of the component when the `"full"` expand mode is used.
50
- * This option is ignored in the `"multiple"` and `"single"` expand modes.
51
- */
52
- this.height = '400px';
53
- /**
54
- * Fires each time the user interacts with a PanelBar item
55
- * ([see example]({% slug routing_panelbar %}#toc-getting-the-selected-item)).
56
- * The event data contains a collection of all items that are modified.
57
- */
58
- this.stateChange = new EventEmitter();
59
- /**
60
- * Fires when an item is about to be selected.
61
- * ([see example]({% slug events_panelbar %}))
62
- * This event is preventable. If you cancel it, the item will not be selected.
63
- */
64
- this.select = new EventEmitter();
65
- /**
66
- * Fires when an item is about to be expanded.
67
- * ([see example]({% slug events_panelbar %}))
68
- * This event is preventable. If you cancel it, the item will remain collapsed.
69
- */
70
- this.expand = new EventEmitter();
71
- /**
72
- * Fires when an item is about to be collapsed.
73
- * ([see example]({% slug events_panelbar %}))
74
- * This event is preventable. If you cancel it, the item will remain expanded.
75
- */
76
- this.collapse = new EventEmitter();
77
- /**
78
- * Fires when the user clicks an item ([see example]({% slug events_panelbar %})).
79
- */
80
- this.itemClick = new EventEmitter();
81
- this.hostClasses = true;
82
- this.tabIndex = 0;
83
- this.role = 'tree';
84
- this.activeDescendant = '';
85
- /**
86
- * @hidden
87
- */
88
- this.showLicenseWatermark = false;
89
- this.isViewInit = true;
90
- this.focused = false;
91
- this._keepItemContent = false;
92
- this.subs = new Subscription();
93
- this.updateChildrenHeight = () => {
94
- let childrenHeight = 0;
95
- const panelbarHeight = this.elementRef.nativeElement.offsetHeight;
96
- const contentOverflow = this.expandMode === PanelBarExpandMode.Full ? 'auto' : 'visible';
97
- this.childrenItems.forEach(item => {
98
- childrenHeight += item.headerHeight();
99
- });
100
- this.childrenItems.forEach(item => {
101
- item.contentHeight = PanelBarExpandMode.Full === this.expandMode ? (panelbarHeight - childrenHeight) + 'px' : 'auto';
102
- item.contentOverflow = contentOverflow;
103
- });
104
- };
105
- const isValid = validatePackage(packageMetadata);
106
- this.showLicenseWatermark = shouldShowValidationUI(isValid);
107
- /* eslint-disable-line*/
108
- this.keyBindings = this.computedKeys;
109
- this.elementRef = elementRef;
110
- this.eventService = eventService;
111
- this.subs.add(this.eventService.children$.subscribe(event => this.onItemAction(event)));
112
- this.subs.add(this.eventService.itemClick.subscribe(ev => this.itemClick.emit(ev)));
113
- }
27
+ localization;
28
+ /**
29
+ * Sets the expand mode of the PanelBar through the `PanelBarExpandMode` enum ([see example]({% slug expandmodes_panelbar %})).
30
+ *
31
+ * The available modes are:
32
+ * - `"single"`—Expands only one item at a time. Expanding an item collapses the item that was previously expanded.
33
+ * - `"multiple"`—The default mode of the PanelBar.
34
+ * Expands more than one item at a time. Items can also be toggled.
35
+ * - `"full"`—Expands only one item at a time.
36
+ * The expanded area occupies the entire height of the PanelBar. Requires you to set the `height` property.
37
+ */
38
+ expandMode = PanelBarExpandMode.Default;
39
+ /**
40
+ * Allows the PanelBar to modify the selected state of the items.
41
+ */
42
+ selectable = true;
43
+ /**
44
+ * Sets the animate state of the PanelBar ([see example]({% slug animations_panelbar %})).
45
+ */
46
+ animate = true;
47
+ /**
48
+ * Sets the height of the component when the `"full"` expand mode is used.
49
+ * This option is ignored in the `"multiple"` and `"single"` expand modes.
50
+ */
51
+ height = '400px';
114
52
  /**
115
53
  * When set to `true`, the PanelBar renders the content of all items and they are persisted in the DOM
116
54
  * ([see example]({% slug templates_panelbar %}#toc-collections)).
@@ -135,6 +73,38 @@ export class PanelBarComponent {
135
73
  get items() {
136
74
  return this._items;
137
75
  }
76
+ /**
77
+ * Fires each time the user interacts with a PanelBar item
78
+ * ([see example]({% slug routing_panelbar %}#toc-getting-the-selected-item)).
79
+ * The event data contains a collection of all items that are modified.
80
+ */
81
+ stateChange = new EventEmitter();
82
+ /**
83
+ * Fires when an item is about to be selected.
84
+ * ([see example]({% slug events_panelbar %}))
85
+ * This event is preventable. If you cancel it, the item will not be selected.
86
+ */
87
+ select = new EventEmitter();
88
+ /**
89
+ * Fires when an item is about to be expanded.
90
+ * ([see example]({% slug events_panelbar %}))
91
+ * This event is preventable. If you cancel it, the item will remain collapsed.
92
+ */
93
+ expand = new EventEmitter();
94
+ /**
95
+ * Fires when an item is about to be collapsed.
96
+ * ([see example]({% slug events_panelbar %}))
97
+ * This event is preventable. If you cancel it, the item will remain expanded.
98
+ */
99
+ collapse = new EventEmitter();
100
+ /**
101
+ * Fires when the user clicks an item ([see example]({% slug events_panelbar %})).
102
+ */
103
+ itemClick = new EventEmitter();
104
+ hostClasses = true;
105
+ tabIndex = 0;
106
+ role = 'tree';
107
+ activeDescendant = '';
138
108
  get hostHeight() {
139
109
  return this.expandMode === PanelBarExpandMode.Full ? this.height : 'auto';
140
110
  }
@@ -144,6 +114,35 @@ export class PanelBarComponent {
144
114
  get dir() {
145
115
  return this.localization.rtl ? 'rtl' : 'ltr';
146
116
  }
117
+ template;
118
+ contentItems;
119
+ contentChildItems;
120
+ viewChildItems;
121
+ /**
122
+ * @hidden
123
+ */
124
+ showLicenseWatermark = false;
125
+ allItems;
126
+ childrenItems;
127
+ isViewInit = true;
128
+ focused = false;
129
+ _items;
130
+ _keepItemContent = false;
131
+ elementRef;
132
+ eventService;
133
+ keyBindings;
134
+ subs = new Subscription();
135
+ constructor(elementRef, eventService, localization) {
136
+ this.localization = localization;
137
+ const isValid = validatePackage(packageMetadata);
138
+ this.showLicenseWatermark = shouldShowValidationUI(isValid);
139
+ /* eslint-disable-line*/
140
+ this.keyBindings = this.computedKeys;
141
+ this.elementRef = elementRef;
142
+ this.eventService = eventService;
143
+ this.subs.add(this.eventService.children$.subscribe(event => this.onItemAction(event)));
144
+ this.subs.add(this.eventService.itemClick.subscribe(ev => this.itemClick.emit(ev)));
145
+ }
147
146
  /**
148
147
  * @hidden
149
148
  */
@@ -287,6 +286,18 @@ export class PanelBarComponent {
287
286
  }
288
287
  }
289
288
  }
289
+ updateChildrenHeight = () => {
290
+ let childrenHeight = 0;
291
+ const panelbarHeight = this.elementRef.nativeElement.offsetHeight;
292
+ const contentOverflow = this.expandMode === PanelBarExpandMode.Full ? 'auto' : 'visible';
293
+ this.childrenItems.forEach(item => {
294
+ childrenHeight += item.headerHeight();
295
+ });
296
+ this.childrenItems.forEach(item => {
297
+ item.contentHeight = PanelBarExpandMode.Full === this.expandMode ? (panelbarHeight - childrenHeight) + 'px' : 'auto';
298
+ item.contentOverflow = contentOverflow;
299
+ });
300
+ };
290
301
  onItemAction(item) {
291
302
  if (!item) {
292
303
  return;
@@ -489,16 +500,15 @@ export class PanelBarComponent {
489
500
  });
490
501
  return flattedItems;
491
502
  }
492
- }
493
- PanelBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.PanelBarService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
494
- PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PanelBarComponent, isStandalone: true, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse", itemClick: "itemClick" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
495
- PanelBarService,
496
- LocalizationService,
497
- {
498
- provide: L10N_PREFIX,
499
- useValue: 'kendo.panelbar'
500
- }
501
- ], queries: [{ propertyName: "template", first: true, predicate: PanelBarItemTemplateDirective, descendants: true }, { propertyName: "contentItems", predicate: PanelBarItemComponent, descendants: true }, { propertyName: "contentChildItems", predicate: PanelBarItemComponent }], viewQueries: [{ propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbar"], usesOnChanges: true, ngImport: i0, template: `
503
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.PanelBarService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
504
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PanelBarComponent, isStandalone: true, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse", itemClick: "itemClick" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
505
+ PanelBarService,
506
+ LocalizationService,
507
+ {
508
+ provide: L10N_PREFIX,
509
+ useValue: 'kendo.panelbar'
510
+ }
511
+ ], queries: [{ propertyName: "template", first: true, predicate: PanelBarItemTemplateDirective, descendants: true }, { propertyName: "contentItems", predicate: PanelBarItemComponent, descendants: true }, { propertyName: "contentChildItems", predicate: PanelBarItemComponent }], viewQueries: [{ propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbar"], usesOnChanges: true, ngImport: i0, template: `
502
512
  <ng-content *ngIf="contentChildItems && !items" select="kendo-panelbar-item"></ng-content>
503
513
  <ng-template [ngIf]="items?.length">
504
514
  <ng-container *ngFor="let item of items">
@@ -522,7 +532,8 @@ PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
522
532
 
523
533
  <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
524
534
  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
525
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarComponent, decorators: [{
535
+ }
536
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarComponent, decorators: [{
526
537
  type: Component,
527
538
  args: [{
528
539
  exportAs: 'kendoPanelbar',
@@ -13,16 +13,16 @@ let nextPanelbarId = 0;
13
13
  * @hidden
14
14
  */
15
15
  export class PanelBarService {
16
- constructor() {
17
- this.parentSource = new Subject();
18
- this.keepContentSource = new BehaviorSubject(false);
19
- this.childSource = new Subject();
20
- this.itemClick = new Subject();
21
- this.parent$ = this.parentSource.asObservable();
22
- this.children$ = this.childSource.asObservable();
23
- this.keepContent$ = this.keepContentSource.asObservable();
24
- this.pbId = nextPanelbarId++;
25
- }
16
+ children$;
17
+ keepContent$;
18
+ parent$;
19
+ pbId;
20
+ animate;
21
+ expandMode;
22
+ itemClick;
23
+ childSource;
24
+ keepContentSource;
25
+ parentSource;
26
26
  onKeepContent(keepContent) {
27
27
  this.keepContentSource.next(keepContent);
28
28
  }
@@ -35,9 +35,19 @@ export class PanelBarService {
35
35
  onBlur() {
36
36
  this.parentSource.next(false);
37
37
  }
38
+ constructor() {
39
+ this.parentSource = new Subject();
40
+ this.keepContentSource = new BehaviorSubject(false);
41
+ this.childSource = new Subject();
42
+ this.itemClick = new Subject();
43
+ this.parent$ = this.parentSource.asObservable();
44
+ this.children$ = this.childSource.asObservable();
45
+ this.keepContent$ = this.keepContentSource.asObservable();
46
+ this.pbId = nextPanelbarId++;
47
+ }
48
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
49
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarService });
38
50
  }
39
- PanelBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
40
- PanelBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarService });
41
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarService, decorators: [{
51
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarService, decorators: [{
42
52
  type: Injectable
43
53
  }], ctorParameters: function () { return []; } });
@@ -23,11 +23,11 @@ import * as i5 from "./panelbar/panelbar-item-title.directive";
23
23
  * - `PanelBarItemTitleDirective&mdash;The `PanelBarItemTitle` directive.
24
24
  */
25
25
  export class PanelBarModule {
26
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
27
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PanelBarModule, imports: [i1.PanelBarComponent, i2.PanelBarItemComponent, i3.PanelBarContentDirective, i4.PanelBarItemTemplateDirective, i5.PanelBarItemTitleDirective], exports: [i1.PanelBarComponent, i2.PanelBarItemComponent, i3.PanelBarContentDirective, i4.PanelBarItemTemplateDirective, i5.PanelBarItemTitleDirective] });
28
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarModule, imports: [i1.PanelBarComponent, i2.PanelBarItemComponent] });
26
29
  }
27
- PanelBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
28
- PanelBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PanelBarModule, imports: [i1.PanelBarComponent, i2.PanelBarItemComponent, i3.PanelBarContentDirective, i4.PanelBarItemTemplateDirective, i5.PanelBarItemTitleDirective], exports: [i1.PanelBarComponent, i2.PanelBarItemComponent, i3.PanelBarContentDirective, i4.PanelBarItemTemplateDirective, i5.PanelBarItemTitleDirective] });
29
- PanelBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarModule, imports: [i1.PanelBarComponent, i2.PanelBarItemComponent] });
30
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarModule, decorators: [{
30
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarModule, decorators: [{
31
31
  type: NgModule,
32
32
  args: [{
33
33
  exports: [...KENDO_PANELBAR],
@@ -34,21 +34,15 @@ const createMoveStream = (draggable) => mouseDown => draggable.kendoDrag
34
34
  * @hidden
35
35
  */
36
36
  export class SplitterBarComponent {
37
- constructor(draggable, localization, splitterService, element, renderer, cdr) {
38
- this.draggable = draggable;
39
- this.localization = localization;
40
- this.splitterService = splitterService;
41
- this.element = element;
42
- this.renderer = renderer;
43
- this.cdr = cdr;
44
- this.ariaRole = 'separator';
45
- this.ariaLabel = 'Splitter pane';
46
- this.focused = false;
47
- this.orientation = 'horizontal';
48
- this.index = 0;
49
- this.subscriptions = new Subscription();
50
- this.parsedAttributes = {};
51
- }
37
+ draggable;
38
+ localization;
39
+ splitterService;
40
+ element;
41
+ renderer;
42
+ cdr;
43
+ ariaRole = 'separator';
44
+ ariaLabel = 'Splitter pane';
45
+ focused = false;
52
46
  get hostOrientation() {
53
47
  return this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
54
48
  }
@@ -74,6 +68,8 @@ export class SplitterBarComponent {
74
68
  get order() {
75
69
  return 2 * this.index + 1;
76
70
  }
71
+ orientation = 'horizontal';
72
+ index = 0;
77
73
  set htmlAttributes(attributes) {
78
74
  if (isObjectPresent(this.parsedAttributes)) {
79
75
  removeHTMLAttributes(this.parsedAttributes, this.renderer, this.element.nativeElement);
@@ -87,6 +83,9 @@ export class SplitterBarComponent {
87
83
  get htmlAttributes() {
88
84
  return this._htmlAttributes;
89
85
  }
86
+ subscriptions = new Subscription();
87
+ _htmlAttributes;
88
+ parsedAttributes = {};
90
89
  get defaultAttributes() {
91
90
  return {
92
91
  'aria-orientation': this.hostOrientation,
@@ -96,6 +95,14 @@ export class SplitterBarComponent {
96
95
  get mutableAttributes() {
97
96
  return { 'tabindex': this.tabIndex };
98
97
  }
98
+ constructor(draggable, localization, splitterService, element, renderer, cdr) {
99
+ this.draggable = draggable;
100
+ this.localization = localization;
101
+ this.splitterService = splitterService;
102
+ this.element = element;
103
+ this.renderer = renderer;
104
+ this.cdr = cdr;
105
+ }
99
106
  ngOnInit() {
100
107
  let state;
101
108
  const listener = this.draggable.kendoPress.pipe(tap(stopPropagation), filter(() => this.splitterService.isDraggable(this.index)), tap(() => state = this.splitterService.dragState(this.index)), tap(() => this.splitterService.toggleContentOverlay(this.index, true)), switchMap(preventOnDblClick(this.draggable.kendoRelease)), switchMap(createMoveStream(this.draggable))).subscribe(({ pageX, pageY, originalX, originalY }) => {
@@ -246,9 +253,8 @@ export class SplitterBarComponent {
246
253
  const attributesToRender = { ...this.mutableAttributes, ...this.parsedAttributes };
247
254
  setHTMLAttributes(attributesToRender, this.renderer, this.element.nativeElement);
248
255
  }
249
- }
250
- SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1.DraggableDirective, host: true }, { token: i2.LocalizationService }, { token: i3.SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
251
- SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
256
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1.DraggableDirective, host: true }, { token: i2.LocalizationService }, { token: i3.SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
257
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
252
258
  <div *ngIf="shouldShowIcon('prev')" class="k-collapse-prev" (click)="togglePrevious()">
253
259
  <kendo-icon-wrapper
254
260
  size="xsmall"
@@ -265,7 +271,8 @@ SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
265
271
  ></kendo-icon-wrapper>
266
272
  </div>
267
273
  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
268
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterBarComponent, decorators: [{
274
+ }
275
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterBarComponent, decorators: [{
269
276
  type: Component,
270
277
  args: [{
271
278
  selector: 'kendo-splitter-bar',
@@ -11,58 +11,10 @@ import * as i1 from "./splitter.service";
11
11
  * Represents the pane component of the Splitter.
12
12
  */
13
13
  export class SplitterPaneComponent {
14
- constructor(element, renderer, cdr, splitterService) {
15
- this.element = element;
16
- this.renderer = renderer;
17
- this.cdr = cdr;
18
- this.splitterService = splitterService;
19
- /**
20
- * Specifies if the user is allowed to resize the pane and provide space for other panes.
21
- */
22
- this.resizable = true;
23
- /**
24
- * Specifies if the user is allowed to hide the pane and provide space for other panes.
25
- */
26
- this.collapsible = false;
27
- /**
28
- * Specifies if overflowing content is scrollable or hidden.
29
- */
30
- this.scrollable = true;
31
- /**
32
- * Specifies if the pane is initially collapsed.
33
- */
34
- this.collapsed = false;
35
- /**
36
- * @hidden
37
- */
38
- this.orientation = 'horizontal';
39
- /**
40
- * @hidden
41
- */
42
- this.overlayContent = false;
43
- /**
44
- * Fires each time the user resizes the Splitter pane.
45
- * The event data contains the new pane size.
46
- * Allows a two-way binding of the pane `size` property.
47
- */
48
- this.sizeChange = new EventEmitter();
49
- /**
50
- * Fires each time the `collapsed` property changes.
51
- * The event data contains the new property state.
52
- * Allows a two-way binding of the `collapsed` pane property.
53
- */
54
- this.collapsedChange = new EventEmitter();
55
- this.ariaRole = 'group';
56
- this.hostClass = true;
57
- /**
58
- * @hidden
59
- */
60
- this.forceExpand = false;
61
- /**
62
- * @hidden
63
- */
64
- this.isResized = false;
65
- }
14
+ element;
15
+ renderer;
16
+ cdr;
17
+ splitterService;
66
18
  /**
67
19
  * @hidden
68
20
  */
@@ -107,6 +59,41 @@ export class SplitterPaneComponent {
107
59
  get splitterBarAttributes() {
108
60
  return this._splitterBarAttributes;
109
61
  }
62
+ /**
63
+ * The CSS classes that will be rendered on the splitter bar.
64
+ * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
65
+ */
66
+ splitterBarClass;
67
+ /**
68
+ * Sets the minimum possible size of the pane.
69
+ * Accepts units in pixel and percentage values.
70
+ */
71
+ min;
72
+ /**
73
+ * Sets the maximum possible size of the pane.
74
+ * Accepts units in pixel and percentage values.
75
+ */
76
+ max;
77
+ /**
78
+ * Specifies if the user is allowed to resize the pane and provide space for other panes.
79
+ */
80
+ resizable = true;
81
+ /**
82
+ * Specifies if the user is allowed to hide the pane and provide space for other panes.
83
+ */
84
+ collapsible = false;
85
+ /**
86
+ * Specifies if overflowing content is scrollable or hidden.
87
+ */
88
+ scrollable = true;
89
+ /**
90
+ * Specifies if the pane is initially collapsed.
91
+ */
92
+ collapsed = false;
93
+ /**
94
+ * @hidden
95
+ */
96
+ orientation = 'horizontal';
110
97
  /**
111
98
  * @hidden
112
99
  */
@@ -118,9 +105,27 @@ export class SplitterPaneComponent {
118
105
  this.renderer.removeClass(this.nativeElement, 'k-pane-flex');
119
106
  }
120
107
  }
108
+ /**
109
+ * @hidden
110
+ */
111
+ overlayContent = false;
112
+ /**
113
+ * Fires each time the user resizes the Splitter pane.
114
+ * The event data contains the new pane size.
115
+ * Allows a two-way binding of the pane `size` property.
116
+ */
117
+ sizeChange = new EventEmitter();
118
+ /**
119
+ * Fires each time the `collapsed` property changes.
120
+ * The event data contains the new property state.
121
+ * Allows a two-way binding of the `collapsed` pane property.
122
+ */
123
+ collapsedChange = new EventEmitter();
121
124
  get isHidden() {
122
125
  return this.collapsed;
123
126
  }
127
+ ariaRole = 'group';
128
+ hostClass = true;
124
129
  get staticPaneClass() {
125
130
  if (this.forceExpand) {
126
131
  return false;
@@ -133,6 +138,23 @@ export class SplitterPaneComponent {
133
138
  get fixedSize() {
134
139
  return this.size && this.size.length > 0;
135
140
  }
141
+ /**
142
+ * @hidden
143
+ */
144
+ forceExpand = false;
145
+ /**
146
+ * @hidden
147
+ */
148
+ isResized = false;
149
+ _size;
150
+ _order;
151
+ _splitterBarAttributes;
152
+ constructor(element, renderer, cdr, splitterService) {
153
+ this.element = element;
154
+ this.renderer = renderer;
155
+ this.cdr = cdr;
156
+ this.splitterService = splitterService;
157
+ }
136
158
  ngAfterViewChecked() {
137
159
  if (this.isHidden) {
138
160
  this.renderer.addClass(this.nativeElement, 'k-hidden');
@@ -177,13 +199,13 @@ export class SplitterPaneComponent {
177
199
  this.renderer.setStyle(this.nativeElement, '-ms-flex-order', this.order);
178
200
  this.renderer.setStyle(this.nativeElement, 'order', this.order);
179
201
  }
180
- }
181
- SplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.SplitterService }], target: i0.ɵɵFactoryTarget.Component });
182
- SplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", splitterBarAttributes: "splitterBarAttributes", splitterBarClass: "splitterBarClass", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-pane-static": "this.staticPaneClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], ngImport: i0, template: `
202
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.SplitterService }], target: i0.ɵɵFactoryTarget.Component });
203
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", splitterBarAttributes: "splitterBarAttributes", splitterBarClass: "splitterBarClass", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-pane-static": "this.staticPaneClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], ngImport: i0, template: `
183
204
  <ng-container *ngIf="!collapsed"><ng-content></ng-content></ng-container>
184
205
  <div *ngIf="overlayContent" class="k-splitter-overlay k-overlay"></div>
185
206
  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
186
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterPaneComponent, decorators: [{
207
+ }
208
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterPaneComponent, decorators: [{
187
209
  type: Component,
188
210
  args: [{
189
211
  exportAs: 'kendoSplitterPane',