@ptsecurity/mosaic 12.0.2 → 12.2.2

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 (336) hide show
  1. package/_theming.scss +475 -101
  2. package/_visual.scss +131 -13
  3. package/bundles/ptsecurity-mosaic-autocomplete.umd.js +18 -20
  4. package/bundles/ptsecurity-mosaic-autocomplete.umd.js.map +1 -1
  5. package/bundles/ptsecurity-mosaic-button-toggle.umd.js +15 -17
  6. package/bundles/ptsecurity-mosaic-button-toggle.umd.js.map +1 -1
  7. package/bundles/ptsecurity-mosaic-button.umd.js +17 -19
  8. package/bundles/ptsecurity-mosaic-button.umd.js.map +1 -1
  9. package/bundles/ptsecurity-mosaic-card.umd.js +11 -13
  10. package/bundles/ptsecurity-mosaic-card.umd.js.map +1 -1
  11. package/bundles/ptsecurity-mosaic-checkbox.umd.js +14 -16
  12. package/bundles/ptsecurity-mosaic-checkbox.umd.js.map +1 -1
  13. package/bundles/ptsecurity-mosaic-core.umd.js +259 -172
  14. package/bundles/ptsecurity-mosaic-core.umd.js.map +1 -1
  15. package/bundles/ptsecurity-mosaic-datepicker.umd.js +47 -48
  16. package/bundles/ptsecurity-mosaic-datepicker.umd.js.map +1 -1
  17. package/bundles/ptsecurity-mosaic-design-tokens.umd.js +231 -26
  18. package/bundles/ptsecurity-mosaic-design-tokens.umd.js.map +1 -1
  19. package/bundles/ptsecurity-mosaic-divider.umd.js +11 -13
  20. package/bundles/ptsecurity-mosaic-divider.umd.js.map +1 -1
  21. package/bundles/ptsecurity-mosaic-dropdown.umd.js +67 -59
  22. package/bundles/ptsecurity-mosaic-dropdown.umd.js.map +1 -1
  23. package/bundles/ptsecurity-mosaic-form-field.umd.js +737 -738
  24. package/bundles/ptsecurity-mosaic-form-field.umd.js.map +1 -1
  25. package/bundles/ptsecurity-mosaic-icon.umd.js +14 -16
  26. package/bundles/ptsecurity-mosaic-icon.umd.js.map +1 -1
  27. package/bundles/ptsecurity-mosaic-input.umd.js +45 -33
  28. package/bundles/ptsecurity-mosaic-input.umd.js.map +1 -1
  29. package/bundles/ptsecurity-mosaic-link.umd.js +11 -13
  30. package/bundles/ptsecurity-mosaic-link.umd.js.map +1 -1
  31. package/bundles/ptsecurity-mosaic-list.umd.js +177 -89
  32. package/bundles/ptsecurity-mosaic-list.umd.js.map +1 -1
  33. package/bundles/ptsecurity-mosaic-modal.umd.js +52 -44
  34. package/bundles/ptsecurity-mosaic-modal.umd.js.map +1 -1
  35. package/bundles/ptsecurity-mosaic-navbar.umd.js +46 -43
  36. package/bundles/ptsecurity-mosaic-navbar.umd.js.map +1 -1
  37. package/bundles/ptsecurity-mosaic-popover.umd.js +215 -34
  38. package/bundles/ptsecurity-mosaic-popover.umd.js.map +1 -1
  39. package/bundles/ptsecurity-mosaic-progress-bar.umd.js +12 -14
  40. package/bundles/ptsecurity-mosaic-progress-bar.umd.js.map +1 -1
  41. package/bundles/ptsecurity-mosaic-progress-spinner.umd.js +12 -14
  42. package/bundles/ptsecurity-mosaic-progress-spinner.umd.js.map +1 -1
  43. package/bundles/ptsecurity-mosaic-radio.umd.js +14 -16
  44. package/bundles/ptsecurity-mosaic-radio.umd.js.map +1 -1
  45. package/bundles/ptsecurity-mosaic-select.umd.js +22 -24
  46. package/bundles/ptsecurity-mosaic-select.umd.js.map +1 -1
  47. package/bundles/ptsecurity-mosaic-sidebar.umd.js +17 -19
  48. package/bundles/ptsecurity-mosaic-sidebar.umd.js.map +1 -1
  49. package/bundles/ptsecurity-mosaic-sidepanel.umd.js +62 -58
  50. package/bundles/ptsecurity-mosaic-sidepanel.umd.js.map +1 -1
  51. package/bundles/ptsecurity-mosaic-splitter.umd.js +31 -21
  52. package/bundles/ptsecurity-mosaic-splitter.umd.js.map +1 -1
  53. package/bundles/ptsecurity-mosaic-table.umd.js +11 -13
  54. package/bundles/ptsecurity-mosaic-table.umd.js.map +1 -1
  55. package/bundles/ptsecurity-mosaic-tabs.umd.js +150 -74
  56. package/bundles/ptsecurity-mosaic-tabs.umd.js.map +1 -1
  57. package/bundles/ptsecurity-mosaic-tags.umd.js +28 -29
  58. package/bundles/ptsecurity-mosaic-tags.umd.js.map +1 -1
  59. package/bundles/ptsecurity-mosaic-textarea.umd.js +12 -14
  60. package/bundles/ptsecurity-mosaic-textarea.umd.js.map +1 -1
  61. package/bundles/ptsecurity-mosaic-timepicker.umd.js +16 -17
  62. package/bundles/ptsecurity-mosaic-timepicker.umd.js.map +1 -1
  63. package/bundles/ptsecurity-mosaic-toggle.umd.js +11 -13
  64. package/bundles/ptsecurity-mosaic-toggle.umd.js.map +1 -1
  65. package/bundles/ptsecurity-mosaic-tooltip.umd.js +72 -23
  66. package/bundles/ptsecurity-mosaic-tooltip.umd.js.map +1 -1
  67. package/bundles/ptsecurity-mosaic-tree-select.umd.js +24 -29
  68. package/bundles/ptsecurity-mosaic-tree-select.umd.js.map +1 -1
  69. package/bundles/ptsecurity-mosaic-tree.umd.js +1018 -261
  70. package/bundles/ptsecurity-mosaic-tree.umd.js.map +1 -1
  71. package/bundles/ptsecurity-mosaic.umd.js +2 -2
  72. package/core/option/action.d.ts +42 -0
  73. package/core/option/index.d.ts +1 -0
  74. package/core/option/option-module.d.ts +4 -3
  75. package/core/pop-up/pop-up-trigger.d.ts +9 -12
  76. package/design-tokens/style-dictionary/build.js +6 -0
  77. package/design-tokens/style-dictionary/configs/index.js +2 -1
  78. package/design-tokens/tokens/components/badge.json5 +177 -7
  79. package/design-tokens/tokens/components/list.json5 +0 -4
  80. package/design-tokens/tokens/components/tree.json5 +3 -3
  81. package/design-tokens/tokens/properties/globals.json5 +1 -1
  82. package/design-tokens/tokens/properties/typography.json5 +16 -0
  83. package/design-tokens/tokens.d.ts +115 -13
  84. package/dropdown/dropdown-item.component.d.ts +1 -0
  85. package/dropdown/dropdown-trigger.directive.d.ts +3 -8
  86. package/dropdown/dropdown.component.d.ts +1 -0
  87. package/esm2015/autocomplete/autocomplete-origin.directive.js +4 -4
  88. package/esm2015/autocomplete/autocomplete-trigger.directive.js +4 -4
  89. package/esm2015/autocomplete/autocomplete.component.js +4 -4
  90. package/esm2015/autocomplete/autocomplete.module.js +5 -5
  91. package/esm2015/button/button.component.js +10 -10
  92. package/esm2015/button/button.module.js +5 -5
  93. package/esm2015/button-toggle/button-toggle.component.js +7 -7
  94. package/esm2015/button-toggle/button-toggle.module.js +5 -5
  95. package/esm2015/card/card.component.js +4 -4
  96. package/esm2015/card/card.module.js +5 -5
  97. package/esm2015/checkbox/checkbox-module.js +5 -5
  98. package/esm2015/checkbox/checkbox-required-validator.js +4 -4
  99. package/esm2015/checkbox/checkbox.js +4 -4
  100. package/esm2015/core/common-behaviors/common-module.js +5 -5
  101. package/esm2015/core/error/error-options.js +7 -7
  102. package/esm2015/core/formatters/date/formatter.js +6 -5
  103. package/esm2015/core/formatters/index.js +5 -5
  104. package/esm2015/core/formatters/number/formatter.js +5 -5
  105. package/esm2015/core/forms/forms-module.js +5 -5
  106. package/esm2015/core/forms/forms.directive.js +7 -7
  107. package/esm2015/core/highlight/highlight.pipe.js +4 -4
  108. package/esm2015/core/highlight/index.js +5 -5
  109. package/esm2015/core/line/line.js +8 -8
  110. package/esm2015/core/option/action.js +131 -0
  111. package/esm2015/core/option/index.js +2 -1
  112. package/esm2015/core/option/optgroup.js +4 -4
  113. package/esm2015/core/option/option-module.js +8 -7
  114. package/esm2015/core/option/option.js +4 -4
  115. package/esm2015/core/pop-up/pop-up-trigger.js +32 -64
  116. package/esm2015/core/pop-up/pop-up.js +4 -4
  117. package/esm2015/core/selection/pseudo-checkbox/pseudo-checkbox.js +4 -4
  118. package/esm2015/core/selection/pseudo-checkbox/pseudo-checkbox.module.js +5 -5
  119. package/esm2015/core/services/measure-scrollbar.service.js +4 -4
  120. package/esm2015/datepicker/calendar-body.component.js +4 -4
  121. package/esm2015/datepicker/calendar.component.js +7 -7
  122. package/esm2015/datepicker/datepicker-input.directive.js +6 -5
  123. package/esm2015/datepicker/datepicker-intl.js +4 -4
  124. package/esm2015/datepicker/datepicker-module.js +5 -5
  125. package/esm2015/datepicker/datepicker-toggle.component.js +7 -7
  126. package/esm2015/datepicker/datepicker.component.js +7 -7
  127. package/esm2015/datepicker/month-view.component.js +4 -4
  128. package/esm2015/datepicker/multi-year-view.component.js +4 -4
  129. package/esm2015/datepicker/year-view.component.js +4 -4
  130. package/esm2015/design-tokens/tokens.js +116 -14
  131. package/esm2015/divider/divider.component.js +4 -4
  132. package/esm2015/divider/divider.module.js +5 -5
  133. package/esm2015/dropdown/dropdown-content.directive.js +4 -4
  134. package/esm2015/dropdown/dropdown-item.component.js +11 -4
  135. package/esm2015/dropdown/dropdown-trigger.directive.js +39 -39
  136. package/esm2015/dropdown/dropdown.component.js +9 -5
  137. package/esm2015/dropdown/dropdown.module.js +5 -5
  138. package/esm2015/form-field/cleaner.js +9 -5
  139. package/esm2015/form-field/form-field.js +7 -7
  140. package/esm2015/form-field/form-field.module.js +5 -5
  141. package/esm2015/form-field/hint.js +4 -4
  142. package/esm2015/form-field/prefix.js +4 -4
  143. package/esm2015/form-field/stepper.js +4 -4
  144. package/esm2015/form-field/suffix.js +4 -4
  145. package/esm2015/icon/icon.component.js +7 -7
  146. package/esm2015/icon/icon.module.js +5 -5
  147. package/esm2015/input/input-number-validators.js +28 -14
  148. package/esm2015/input/input-number.js +4 -4
  149. package/esm2015/input/input.js +7 -7
  150. package/esm2015/input/input.module.js +5 -5
  151. package/esm2015/link/link.component.js +4 -4
  152. package/esm2015/link/link.module.js +5 -5
  153. package/esm2015/list/list-selection.component.js +155 -66
  154. package/esm2015/list/list.component.js +7 -7
  155. package/esm2015/list/list.module.js +5 -5
  156. package/esm2015/modal/css-unit.pipe.js +4 -4
  157. package/esm2015/modal/modal-control.service.js +4 -4
  158. package/esm2015/modal/modal.component.js +6 -4
  159. package/esm2015/modal/modal.directive.js +13 -13
  160. package/esm2015/modal/modal.module.js +9 -7
  161. package/esm2015/modal/modal.service.js +16 -9
  162. package/esm2015/navbar/navbar-item.component.js +21 -21
  163. package/esm2015/navbar/navbar.component.js +7 -7
  164. package/esm2015/navbar/navbar.module.js +5 -5
  165. package/esm2015/navbar/vertical-navbar.component.js +14 -9
  166. package/esm2015/popover/popover-confirm.component.js +116 -0
  167. package/esm2015/popover/popover.component.js +63 -20
  168. package/esm2015/popover/popover.module.js +13 -10
  169. package/esm2015/popover/public-api.js +2 -1
  170. package/esm2015/progress-bar/progress-bar.component.js +4 -4
  171. package/esm2015/progress-bar/progress-bar.module.js +5 -5
  172. package/esm2015/progress-spinner/progress-spinner.component.js +4 -4
  173. package/esm2015/progress-spinner/progress-spinner.module.js +5 -5
  174. package/esm2015/radio/radio.component.js +7 -7
  175. package/esm2015/radio/radio.module.js +5 -5
  176. package/esm2015/select/select.component.js +14 -14
  177. package/esm2015/select/select.module.js +5 -5
  178. package/esm2015/sidebar/sidebar.component.js +10 -10
  179. package/esm2015/sidebar/sidebar.module.js +5 -5
  180. package/esm2015/sidepanel/sidepanel-container.component.js +14 -13
  181. package/esm2015/sidepanel/sidepanel-directives.js +22 -18
  182. package/esm2015/sidepanel/sidepanel.module.js +12 -8
  183. package/esm2015/sidepanel/sidepanel.service.js +6 -5
  184. package/esm2015/splitter/splitter.component.js +24 -13
  185. package/esm2015/splitter/splitter.module.js +5 -5
  186. package/esm2015/table/table.component.js +4 -4
  187. package/esm2015/table/table.module.js +5 -5
  188. package/esm2015/tabs/paginated-tab-header.js +5 -5
  189. package/esm2015/tabs/tab-body.component.js +7 -7
  190. package/esm2015/tabs/tab-content.directive.js +4 -4
  191. package/esm2015/tabs/tab-group.component.js +56 -26
  192. package/esm2015/tabs/tab-header.component.js +4 -4
  193. package/esm2015/tabs/tab-label-wrapper.directive.js +21 -6
  194. package/esm2015/tabs/tab-label.directive.js +4 -4
  195. package/esm2015/tabs/tab-nav-bar/tab-nav-bar.js +7 -7
  196. package/esm2015/tabs/tab.component.js +36 -13
  197. package/esm2015/tabs/tabs.module.js +5 -5
  198. package/esm2015/tags/tag-input.js +4 -4
  199. package/esm2015/tags/tag-list.component.js +4 -4
  200. package/esm2015/tags/tag.component.js +14 -13
  201. package/esm2015/tags/tag.module.js +5 -5
  202. package/esm2015/textarea/textarea.component.js +4 -4
  203. package/esm2015/textarea/textarea.module.js +5 -5
  204. package/esm2015/timepicker/timepicker.directive.js +9 -8
  205. package/esm2015/timepicker/timepicker.module.js +5 -5
  206. package/esm2015/toggle/toggle.component.js +4 -4
  207. package/esm2015/toggle/toggle.module.js +5 -5
  208. package/esm2015/tooltip/tooltip.component.js +55 -16
  209. package/esm2015/tooltip/tooltip.module.js +5 -5
  210. package/esm2015/tree/control/base-tree-control.js +60 -0
  211. package/esm2015/tree/control/flat-tree-control.js +123 -0
  212. package/esm2015/tree/control/nested-tree-control.js +41 -0
  213. package/esm2015/tree/control/tree-control.js +2 -0
  214. package/esm2015/tree/data-source/flat-data-source.js +1 -1
  215. package/esm2015/tree/node.js +31 -0
  216. package/esm2015/tree/outlet.js +15 -0
  217. package/esm2015/tree/padding.directive.js +90 -23
  218. package/esm2015/tree/public-api.js +9 -2
  219. package/esm2015/tree/toggle.js +46 -52
  220. package/esm2015/tree/tree-base.js +243 -0
  221. package/esm2015/tree/tree-errors.js +36 -0
  222. package/esm2015/tree/tree-option.component.js +75 -32
  223. package/esm2015/tree/tree-selection.component.js +122 -73
  224. package/esm2015/tree/tree.js +23 -0
  225. package/esm2015/tree/tree.module.js +24 -13
  226. package/esm2015/tree-select/tree-select.component.js +11 -12
  227. package/esm2015/tree-select/tree-select.module.js +5 -9
  228. package/fesm2015/ptsecurity-mosaic-autocomplete.js +13 -13
  229. package/fesm2015/ptsecurity-mosaic-autocomplete.js.map +1 -1
  230. package/fesm2015/ptsecurity-mosaic-button-toggle.js +10 -10
  231. package/fesm2015/ptsecurity-mosaic-button-toggle.js.map +1 -1
  232. package/fesm2015/ptsecurity-mosaic-button.js +13 -13
  233. package/fesm2015/ptsecurity-mosaic-button.js.map +1 -1
  234. package/fesm2015/ptsecurity-mosaic-card.js +7 -7
  235. package/fesm2015/ptsecurity-mosaic-card.js.map +1 -1
  236. package/fesm2015/ptsecurity-mosaic-checkbox.js +10 -10
  237. package/fesm2015/ptsecurity-mosaic-checkbox.js.map +1 -1
  238. package/fesm2015/ptsecurity-mosaic-core.js +231 -140
  239. package/fesm2015/ptsecurity-mosaic-core.js.map +1 -1
  240. package/fesm2015/ptsecurity-mosaic-datepicker.js +42 -41
  241. package/fesm2015/ptsecurity-mosaic-datepicker.js.map +1 -1
  242. package/fesm2015/ptsecurity-mosaic-design-tokens.js +116 -14
  243. package/fesm2015/ptsecurity-mosaic-design-tokens.js.map +1 -1
  244. package/fesm2015/ptsecurity-mosaic-divider.js +7 -7
  245. package/fesm2015/ptsecurity-mosaic-divider.js.map +1 -1
  246. package/fesm2015/ptsecurity-mosaic-dropdown.js +63 -52
  247. package/fesm2015/ptsecurity-mosaic-dropdown.js.map +1 -1
  248. package/fesm2015/ptsecurity-mosaic-form-field.js +30 -27
  249. package/fesm2015/ptsecurity-mosaic-form-field.js.map +1 -1
  250. package/fesm2015/ptsecurity-mosaic-icon.js +10 -10
  251. package/fesm2015/ptsecurity-mosaic-icon.js.map +1 -1
  252. package/fesm2015/ptsecurity-mosaic-input.js +40 -26
  253. package/fesm2015/ptsecurity-mosaic-input.js.map +1 -1
  254. package/fesm2015/ptsecurity-mosaic-link.js +7 -7
  255. package/fesm2015/ptsecurity-mosaic-link.js.map +1 -1
  256. package/fesm2015/ptsecurity-mosaic-list.js +164 -76
  257. package/fesm2015/ptsecurity-mosaic-list.js.map +1 -1
  258. package/fesm2015/ptsecurity-mosaic-modal.js +46 -35
  259. package/fesm2015/ptsecurity-mosaic-modal.js.map +1 -1
  260. package/fesm2015/ptsecurity-mosaic-navbar.js +43 -38
  261. package/fesm2015/ptsecurity-mosaic-navbar.js.map +1 -1
  262. package/fesm2015/ptsecurity-mosaic-popover.js +179 -30
  263. package/fesm2015/ptsecurity-mosaic-popover.js.map +1 -1
  264. package/fesm2015/ptsecurity-mosaic-progress-bar.js +7 -7
  265. package/fesm2015/ptsecurity-mosaic-progress-bar.js.map +1 -1
  266. package/fesm2015/ptsecurity-mosaic-progress-spinner.js +7 -7
  267. package/fesm2015/ptsecurity-mosaic-progress-spinner.js.map +1 -1
  268. package/fesm2015/ptsecurity-mosaic-radio.js +10 -10
  269. package/fesm2015/ptsecurity-mosaic-radio.js.map +1 -1
  270. package/fesm2015/ptsecurity-mosaic-select.js +17 -17
  271. package/fesm2015/ptsecurity-mosaic-select.js.map +1 -1
  272. package/fesm2015/ptsecurity-mosaic-sidebar.js +13 -13
  273. package/fesm2015/ptsecurity-mosaic-sidebar.js.map +1 -1
  274. package/fesm2015/ptsecurity-mosaic-sidepanel.js +50 -41
  275. package/fesm2015/ptsecurity-mosaic-sidepanel.js.map +1 -1
  276. package/fesm2015/ptsecurity-mosaic-splitter.js +27 -16
  277. package/fesm2015/ptsecurity-mosaic-splitter.js.map +1 -1
  278. package/fesm2015/ptsecurity-mosaic-table.js +7 -7
  279. package/fesm2015/ptsecurity-mosaic-table.js.map +1 -1
  280. package/fesm2015/ptsecurity-mosaic-tabs.js +240 -174
  281. package/fesm2015/ptsecurity-mosaic-tabs.js.map +1 -1
  282. package/fesm2015/ptsecurity-mosaic-tags.js +23 -22
  283. package/fesm2015/ptsecurity-mosaic-tags.js.map +1 -1
  284. package/fesm2015/ptsecurity-mosaic-textarea.js +7 -7
  285. package/fesm2015/ptsecurity-mosaic-textarea.js.map +1 -1
  286. package/fesm2015/ptsecurity-mosaic-timepicker.js +12 -11
  287. package/fesm2015/ptsecurity-mosaic-timepicker.js.map +1 -1
  288. package/fesm2015/ptsecurity-mosaic-toggle.js +7 -7
  289. package/fesm2015/ptsecurity-mosaic-toggle.js.map +1 -1
  290. package/fesm2015/ptsecurity-mosaic-tooltip.js +57 -18
  291. package/fesm2015/ptsecurity-mosaic-tooltip.js.map +1 -1
  292. package/fesm2015/ptsecurity-mosaic-tree-select.js +14 -18
  293. package/fesm2015/ptsecurity-mosaic-tree-select.js.map +1 -1
  294. package/fesm2015/ptsecurity-mosaic-tree.js +874 -190
  295. package/fesm2015/ptsecurity-mosaic-tree.js.map +1 -1
  296. package/form-field/cleaner.d.ts +2 -0
  297. package/input/input-number-validators.d.ts +2 -2
  298. package/list/list-selection.component.d.ts +28 -6
  299. package/modal/modal.component.d.ts +2 -0
  300. package/modal/modal.module.d.ts +1 -1
  301. package/package.json +5 -5
  302. package/popover/popover-confirm.component.d.ts +33 -0
  303. package/popover/popover.component.d.ts +14 -4
  304. package/popover/popover.module.d.ts +6 -3
  305. package/popover/public-api.d.ts +1 -0
  306. package/prebuilt-themes/dark-theme.css +1 -1
  307. package/prebuilt-themes/default-theme.css +1 -1
  308. package/prebuilt-visual/default-visual.css +1 -1
  309. package/select/select.component.d.ts +2 -7
  310. package/sidepanel/sidepanel-directives.d.ts +2 -0
  311. package/sidepanel/sidepanel.module.d.ts +2 -1
  312. package/splitter/splitter.component.d.ts +6 -3
  313. package/tabs/tab-group.component.d.ts +11 -4
  314. package/tabs/tab-label-wrapper.directive.d.ts +7 -1
  315. package/tabs/tab.component.d.ts +10 -4
  316. package/tooltip/tooltip.component.d.ts +12 -3
  317. package/tree/control/base-tree-control.d.ts +40 -0
  318. package/tree/control/flat-tree-control.d.ts +48 -0
  319. package/tree/control/nested-tree-control.d.ts +19 -0
  320. package/tree/control/tree-control.d.ts +44 -0
  321. package/tree/data-source/flat-data-source.d.ts +2 -1
  322. package/tree/node.d.ts +34 -0
  323. package/tree/outlet.d.ts +9 -0
  324. package/tree/padding.directive.d.ts +35 -7
  325. package/tree/public-api.d.ts +8 -1
  326. package/tree/toggle.d.ts +17 -17
  327. package/tree/tree-base.d.ts +97 -0
  328. package/tree/tree-errors.d.ts +25 -0
  329. package/tree/tree-option.component.d.ts +13 -5
  330. package/tree/tree-selection.component.d.ts +32 -13
  331. package/tree/tree.d.ts +6 -0
  332. package/tree/tree.module.d.ts +10 -8
  333. package/tree-select/tree-select.component.d.ts +2 -7
  334. package/tree-select/tree-select.module.d.ts +5 -6
  335. package/esm2015/tree/node.directive.js +0 -19
  336. package/tree/node.directive.d.ts +0 -7
@@ -1,48 +1,377 @@
1
- import * as i2 from '@angular/common';
1
+ import * as i2$1 from '@angular/common';
2
2
  import { CommonModule } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { Directive, Input, Component, ViewEncapsulation, InjectionToken, EventEmitter, ChangeDetectionStrategy, Inject, Output, forwardRef, QueryList, Attribute, ViewChild, ContentChildren, NgModule } from '@angular/core';
5
- import * as i1 from '@ptsecurity/cdk/tree';
6
- import { CdkTreeNodeDef, CdkTreeNodePadding, CdkTreeNode, CdkTree, CdkTreeNodeOutlet, CdkTreeModule } from '@ptsecurity/cdk/tree';
7
- import * as i1$1 from '@ptsecurity/mosaic/core';
8
- import { MultipleMode, getMcSelectNonArrayValueError, McPseudoCheckboxModule } from '@ptsecurity/mosaic/core';
9
- import { map, take, takeUntil, delay } from 'rxjs/operators';
10
- import { coerceBooleanProperty } from '@angular/cdk/coercion';
11
- import { hasModifierKey, PAGE_DOWN, PAGE_UP, END, HOME, ENTER, SPACE, RIGHT_ARROW, LEFT_ARROW, UP_ARROW, DOWN_ARROW } from '@ptsecurity/cdk/keycodes';
12
- import { Subject, merge, BehaviorSubject } from 'rxjs';
4
+ import { Directive, Input, ViewChild, ContentChildren, forwardRef, Inject, Optional, Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, EventEmitter, ContentChild, Output, QueryList, Attribute, NgModule } from '@angular/core';
5
+ import * as i1 from '@ptsecurity/mosaic/core';
6
+ import { mixinDisabled, MC_OPTION_ACTION_PARENT, McOptionActionComponent, MultipleMode, getMcSelectNonArrayValueError, McPseudoCheckboxModule } from '@ptsecurity/mosaic/core';
7
+ import * as i2 from '@angular/cdk/bidi';
8
+ import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
9
+ import { TreeSizePaddingLeft } from '@ptsecurity/mosaic/design-tokens';
10
+ import { BehaviorSubject, Subject, Observable, of, merge } from 'rxjs';
11
+ import { takeUntil, map, take, delay } from 'rxjs/operators';
12
+ import { TAB, hasModifierKey, SPACE, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, DOWN_ARROW, UP_ARROW, ENTER, HOME, END, PAGE_UP, PAGE_DOWN } from '@ptsecurity/cdk/keycodes';
13
+ import { McDropdownTrigger } from '@ptsecurity/mosaic/dropdown';
14
+ import { McTooltipTrigger } from '@ptsecurity/mosaic/tooltip';
15
+ import * as i1$1 from '@angular/cdk/clipboard';
13
16
  import { SelectionModel, DataSource } from '@angular/cdk/collections';
14
17
  import { NG_VALUE_ACCESSOR } from '@angular/forms';
15
18
  import { FocusKeyManager } from '@ptsecurity/cdk/a11y';
16
19
 
17
- class McTreeNodeDef extends CdkTreeNodeDef {
20
+ /** Context provided to the tree node component. */
21
+ class McTreeNodeOutletContext {
22
+ constructor(data) {
23
+ this.$implicit = data;
24
+ }
25
+ }
26
+ /**
27
+ * Data node definition for the McTree.
28
+ * Captures the node's template and a when predicate that describes when this node should be used.
29
+ */
30
+ class McTreeNodeDef {
31
+ /** @docs-private */
32
+ constructor(template) {
33
+ this.template = template;
34
+ }
18
35
  }
19
- /** @nocollapse */ McTreeNodeDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeNodeDef, deps: null, target: i0.ɵɵFactoryTarget.Directive });
20
- /** @nocollapse */ McTreeNodeDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: McTreeNodeDef, selector: "[mcTreeNodeDef]", inputs: { when: ["mcTreeNodeDefWhen", "when"], data: ["mcTreeNode", "data"] }, providers: [{ provide: CdkTreeNodeDef, useExisting: McTreeNodeDef }], usesInheritance: true, ngImport: i0 });
21
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeNodeDef, decorators: [{
36
+ /** @nocollapse */ McTreeNodeDef.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
37
+ /** @nocollapse */ McTreeNodeDef.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNodeDef, selector: "[mcTreeNodeDef]", inputs: { when: ["mcTreeNodeDefWhen", "when"], data: ["mcTreeNode", "data"] }, ngImport: i0 });
38
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeDef, decorators: [{
22
39
  type: Directive,
23
40
  args: [{
24
41
  selector: '[mcTreeNodeDef]',
25
- inputs: ['when: mcTreeNodeDefWhen'],
26
- providers: [{ provide: CdkTreeNodeDef, useExisting: McTreeNodeDef }]
42
+ inputs: ['when: mcTreeNodeDefWhen']
27
43
  }]
28
- }], propDecorators: { data: [{
44
+ }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { data: [{
29
45
  type: Input,
30
46
  args: ['mcTreeNode']
31
47
  }] } });
32
48
 
33
- class McTreeNodePadding extends CdkTreeNodePadding {
34
- constructor() {
35
- super(...arguments);
36
- this.baseLeftPadding = 12;
37
- this.iconWidth = 20;
49
+ class McTreeNodeOutlet {
50
+ constructor(viewContainer, changeDetectorRef) {
51
+ this.viewContainer = viewContainer;
52
+ this.changeDetectorRef = changeDetectorRef;
53
+ }
54
+ }
55
+ /** @nocollapse */ McTreeNodeOutlet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeOutlet, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
56
+ /** @nocollapse */ McTreeNodeOutlet.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNodeOutlet, selector: "[mcTreeNodeOutlet]", ngImport: i0 });
57
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeOutlet, decorators: [{
58
+ type: Directive,
59
+ args: [{ selector: '[mcTreeNodeOutlet]' }]
60
+ }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
61
+
62
+ /**
63
+ * Returns an error to be thrown when there is no usable data.
64
+ * @docs-private
65
+ */
66
+ function getTreeNoValidDataSourceError() {
67
+ return Error(`A valid data source must be provided.`);
68
+ }
69
+ /**
70
+ * Returns an error to be thrown when there are multiple nodes that are missing a when function.
71
+ * @docs-private
72
+ */
73
+ function getTreeMultipleDefaultNodeDefsError() {
74
+ return Error(`There can only be one default row without a when predicate function.`);
75
+ }
76
+ /**
77
+ * Returns an error to be thrown when there are no matching node defs for a particular set of data.
78
+ * @docs-private
79
+ */
80
+ function getTreeMissingMatchingNodeDefError() {
81
+ return Error(`Could not find a matching node definition for the provided node data.`);
82
+ }
83
+ /**
84
+ * Returns an error to be thrown when there are tree control.
85
+ * @docs-private
86
+ */
87
+ function getTreeControlMissingError() {
88
+ return Error(`Could not find a tree control for the tree.`);
89
+ }
90
+ /**
91
+ * Returns an error to be thrown when tree control did not implement functions for flat/nested node.
92
+ * @docs-private
93
+ */
94
+ function getTreeControlFunctionsMissingError() {
95
+ return Error(`Could not find functions for nested/flat tree in tree control.`);
96
+ }
97
+
98
+ class McTreeBase {
99
+ constructor(differs, changeDetectorRef) {
100
+ this.differs = differs;
101
+ this.changeDetectorRef = changeDetectorRef;
102
+ // TODO(tinayuangao): Setup a listener for scrolling, emit the calculated view to viewChange.
103
+ // Remove the MAX_VALUE in viewChange
104
+ /**
105
+ * Stream containing the latest information on what rows are being displayed on screen.
106
+ * Can be used by the data source to as a heuristic of what data should be provided.
107
+ */
108
+ this.viewChange = new BehaviorSubject({ start: 0, end: Number.MAX_VALUE });
109
+ /** Subject that emits when the component has been destroyed. */
110
+ this.onDestroy = new Subject();
111
+ /** Level of nodes */
112
+ this.levels = new Map();
113
+ }
114
+ /**
115
+ * Provides a stream containing the latest data array to render. Influenced by the tree's
116
+ * stream of view window (what dataNodes are currently on screen).
117
+ * Data source can be an observable of data array, or a dara array to render.
118
+ */
119
+ get dataSource() {
120
+ return this._dataSource;
121
+ }
122
+ set dataSource(dataSource) {
123
+ if (this._dataSource !== dataSource) {
124
+ this.switchDataSource(dataSource);
125
+ }
126
+ }
127
+ ngOnInit() {
128
+ this.dataDiffer = this.differs.find([]).create(this.trackBy);
129
+ if (!this.treeControl) {
130
+ throw getTreeControlMissingError();
131
+ }
132
+ }
133
+ ngOnDestroy() {
134
+ this.nodeOutlet.viewContainer.clear();
135
+ this.onDestroy.next();
136
+ this.onDestroy.complete();
137
+ // tslint:disable-next-line:no-unbound-method
138
+ if (this._dataSource && typeof this.dataSource.disconnect === 'function') {
139
+ this.dataSource.disconnect(this);
140
+ }
141
+ if (this.dataSubscription) {
142
+ this.dataSubscription.unsubscribe();
143
+ this.dataSubscription = null;
144
+ }
145
+ }
146
+ ngAfterContentChecked() {
147
+ const defaultNodeDefs = this.nodeDefs.filter((def) => !def.when);
148
+ if (defaultNodeDefs.length > 1) {
149
+ throw getTreeMultipleDefaultNodeDefsError();
150
+ }
151
+ this.defaultNodeDef = defaultNodeDefs[0];
152
+ if (this.dataSource && this.nodeDefs && !this.dataSubscription) {
153
+ this.observeRenderChanges();
154
+ }
155
+ }
156
+ /** Check for changes made in the data and render each change (node added/removed/moved). */
157
+ renderNodeChanges(data, dataDiffer = this.dataDiffer, viewContainer = this.nodeOutlet.viewContainer, parentData) {
158
+ const changes = dataDiffer.diff(data);
159
+ if (!changes) {
160
+ return;
161
+ }
162
+ changes.forEachOperation((item, adjustedPreviousIndex, currentIndex) => {
163
+ if (item.previousIndex == null) {
164
+ this.insertNode(data[currentIndex], currentIndex, viewContainer, parentData);
165
+ }
166
+ else if (currentIndex == null) {
167
+ viewContainer.remove(adjustedPreviousIndex);
168
+ this.levels.delete(item.item);
169
+ }
170
+ else {
171
+ const view = viewContainer.get(adjustedPreviousIndex);
172
+ viewContainer.move(view, currentIndex);
173
+ }
174
+ });
175
+ this.changeDetectorRef.detectChanges();
176
+ }
177
+ /**
178
+ * Finds the matching node definition that should be used for this node data. If there is only
179
+ * one node definition, it is returned. Otherwise, find the node definition that has a when
180
+ * predicate that returns true with the data. If none return true, return the default node
181
+ * definition.
182
+ */
183
+ getNodeDef(data, i) {
184
+ if (this.nodeDefs.length === 1) {
185
+ return this.nodeDefs.first;
186
+ }
187
+ const nodeDef = this.nodeDefs.find((def) => def.when && def.when(i, data)) || this.defaultNodeDef;
188
+ if (!nodeDef) {
189
+ throw getTreeMissingMatchingNodeDefError();
190
+ }
191
+ return nodeDef;
192
+ }
193
+ /**
194
+ * Create the embedded view for the data node template and place it in the correct index location
195
+ * within the data node view container.
196
+ */
197
+ insertNode(nodeData, index, viewContainer, parentData) {
198
+ const node = this.getNodeDef(nodeData, index);
199
+ // Node context that will be provided to created embedded view
200
+ const context = new McTreeNodeOutletContext(nodeData);
201
+ // If the tree is flat tree, then use the `getLevel` function in flat tree control
202
+ // Otherwise, use the level of parent node.
203
+ if (this.treeControl.getLevel) {
204
+ context.level = this.treeControl.getLevel(nodeData);
205
+ /* tslint:disable-next-line:no-typeof-undefined */
206
+ }
207
+ else if (typeof parentData !== 'undefined' && this.levels.has(parentData)) {
208
+ context.level = this.levels.get(parentData) + 1;
209
+ }
210
+ else {
211
+ context.level = 0;
212
+ }
213
+ this.levels.set(nodeData, context.level);
214
+ // Use default tree nodeOutlet, or nested node's nodeOutlet
215
+ const container = viewContainer ? viewContainer : this.nodeOutlet.viewContainer;
216
+ container.createEmbeddedView(node.template, context, index);
217
+ // Set the data to just created `McTreeNode`.
218
+ // The `McTreeNode` created from `createEmbeddedView` will be saved in static variable
219
+ // `mostRecentTreeNode`. We get it from static variable and pass the node data to it.
220
+ if (McTreeNode.mostRecentTreeNode) {
221
+ McTreeNode.mostRecentTreeNode.data = nodeData;
222
+ }
223
+ }
224
+ /** Set up a subscription for the data provided by the data source. */
225
+ observeRenderChanges() {
226
+ let dataStream;
227
+ // Cannot use `instanceof DataSource` since the data source could be a literal with
228
+ // `connect` function and may not extends DataSource.
229
+ // tslint:disable-next-line:no-unbound-method
230
+ if (typeof this._dataSource.connect === 'function') {
231
+ dataStream = this._dataSource.connect(this);
232
+ }
233
+ else if (this._dataSource instanceof Observable) {
234
+ dataStream = this._dataSource;
235
+ }
236
+ else if (Array.isArray(this._dataSource)) {
237
+ dataStream = of(this._dataSource);
238
+ }
239
+ if (dataStream) {
240
+ this.dataSubscription = dataStream
241
+ .pipe(takeUntil(this.onDestroy))
242
+ .subscribe((data) => this.renderNodeChanges(data));
243
+ }
244
+ else {
245
+ throw getTreeNoValidDataSourceError();
246
+ }
247
+ }
248
+ /**
249
+ * Switch to the provided data source by resetting the data and unsubscribing from the current
250
+ * render change subscription if one exists. If the data source is null, interpret this by
251
+ * clearing the node outlet. Otherwise start listening for new data.
252
+ */
253
+ switchDataSource(dataSource) {
254
+ // tslint:disable-next-line:no-unbound-method
255
+ if (this._dataSource && typeof this._dataSource.disconnect === 'function') {
256
+ this.dataSource.disconnect(this);
257
+ }
258
+ if (this.dataSubscription) {
259
+ this.dataSubscription.unsubscribe();
260
+ this.dataSubscription = null;
261
+ }
262
+ // Remove the all dataNodes if there is now no data source
263
+ if (!dataSource) {
264
+ this.nodeOutlet.viewContainer.clear();
265
+ }
266
+ this._dataSource = dataSource;
267
+ if (this.nodeDefs) {
268
+ this.observeRenderChanges();
269
+ }
270
+ }
271
+ }
272
+ /** @nocollapse */ McTreeBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeBase, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
273
+ /** @nocollapse */ McTreeBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeBase, inputs: { treeControl: "treeControl", trackBy: "trackBy", dataSource: "dataSource" }, queries: [{ propertyName: "nodeDefs", predicate: McTreeNodeDef }], viewQueries: [{ propertyName: "nodeOutlet", first: true, predicate: McTreeNodeOutlet, descendants: true, static: true }], ngImport: i0 });
274
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeBase, decorators: [{
275
+ type: Directive
276
+ }], ctorParameters: function () { return [{ type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { treeControl: [{
277
+ type: Input
278
+ }], trackBy: [{
279
+ type: Input
280
+ }], nodeOutlet: [{
281
+ type: ViewChild,
282
+ args: [McTreeNodeOutlet, { static: true }]
283
+ }], nodeDefs: [{
284
+ type: ContentChildren,
285
+ args: [McTreeNodeDef]
286
+ }], dataSource: [{
287
+ type: Input
288
+ }] } });
289
+ class McTreeNode {
290
+ constructor(elementRef, tree) {
291
+ this.elementRef = elementRef;
292
+ this.tree = tree;
293
+ this.destroyed = new Subject();
294
+ McTreeNode.mostRecentTreeNode = this;
295
+ }
296
+ get data() {
297
+ return this._data;
298
+ }
299
+ set data(value) {
300
+ this._data = value;
301
+ }
302
+ get isExpanded() {
303
+ return this.tree.treeControl.isExpanded(this.data);
304
+ }
305
+ get level() {
306
+ return this.tree.treeControl.getLevel ? this.tree.treeControl.getLevel(this._data) : 0;
307
+ }
308
+ ngOnDestroy() {
309
+ this.destroyed.next();
310
+ this.destroyed.complete();
311
+ }
312
+ focus() {
313
+ this.elementRef.nativeElement.focus();
314
+ }
315
+ }
316
+ /**
317
+ * The most recently created `McTreeNode`. We save it in static variable so we can retrieve it
318
+ * in `McTree` and set the data to it.
319
+ */
320
+ McTreeNode.mostRecentTreeNode = null;
321
+ /** @nocollapse */ McTreeNode.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNode, deps: [{ token: i0.ElementRef }, { token: forwardRef(() => McTreeBase) }], target: i0.ɵɵFactoryTarget.Directive });
322
+ /** @nocollapse */ McTreeNode.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNode, selector: "mc-tree-node", exportAs: ["mcTreeNode"], ngImport: i0 });
323
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNode, decorators: [{
324
+ type: Directive,
325
+ args: [{
326
+ selector: 'mc-tree-node',
327
+ exportAs: 'mcTreeNode'
328
+ }]
329
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: McTreeBase, decorators: [{
330
+ type: Inject,
331
+ args: [forwardRef(() => McTreeBase)]
332
+ }] }]; } });
333
+
334
+ /** Regex used to split a string on its CSS units. */
335
+ const cssUnitPattern = /([A-Za-z%]+)$/;
336
+ class McTreeNodePadding {
337
+ constructor(treeNode, tree, renderer, element, dir) {
338
+ var _a, _b;
339
+ this.treeNode = treeNode;
340
+ this.tree = tree;
341
+ this.renderer = renderer;
342
+ this.element = element;
343
+ this.dir = dir;
344
+ this._indent = 20;
345
+ /** CSS units used for the indentation value. */
346
+ this.indentUnits = 'px';
347
+ this.baseLeftPadding = parseInt(TreeSizePaddingLeft);
348
+ this.iconWidth = 24;
349
+ this.destroyed = new Subject();
350
+ (_b = (_a = this.dir) === null || _a === void 0 ? void 0 : _a.change) === null || _b === void 0 ? void 0 : _b.pipe(takeUntil(this.destroyed)).subscribe(() => this.setPadding());
351
+ }
352
+ get level() {
353
+ return this._level;
354
+ }
355
+ set level(value) {
356
+ this.setLevelInput(value);
357
+ }
358
+ get indent() {
359
+ return this._indent;
360
+ }
361
+ set indent(indent) {
362
+ this.setIndentInput(indent);
38
363
  }
39
- get level() { return this._level; }
40
- set level(value) { this.setLevelInput(value); }
41
- get indent() { return this._indent; }
42
- set indent(indent) { this.setIndentInput(indent); }
43
364
  get leftPadding() {
44
365
  return (this.withIcon ? 0 : this.iconWidth) + this.baseLeftPadding;
45
366
  }
367
+ ngOnInit() {
368
+ this.withIcon = this.tree.treeControl.isExpandable(this.treeNode.data);
369
+ this.setPadding();
370
+ }
371
+ ngOnDestroy() {
372
+ this.destroyed.next();
373
+ this.destroyed.complete();
374
+ }
46
375
  paddingIndent() {
47
376
  const nodeLevel = (this.treeNode.data && this.tree.treeControl.getLevel)
48
377
  ? this.tree.treeControl.getLevel(this.treeNode.data)
@@ -50,32 +379,69 @@ class McTreeNodePadding extends CdkTreeNodePadding {
50
379
  const level = this.level || nodeLevel;
51
380
  return level > 0 ? `${(level * this._indent) + this.leftPadding}px` : `${this.leftPadding}px`;
52
381
  }
53
- ngOnInit() {
54
- this.withIcon = this.tree.treeControl.isExpandable(this.treeNode.data);
382
+ /**
383
+ * This has been extracted to a util because of TS 4 and VE.
384
+ * View Engine doesn't support property rename inheritance.
385
+ * TS 4.0 doesn't allow properties to override accessors or vice-versa.
386
+ * @docs-private
387
+ */
388
+ setLevelInput(value) {
389
+ // Set to null as the fallback value so that _setPadding can fall back to the node level if the
390
+ // consumer set the directive as `mcTreeNodePadding=""`. We still want to take this value if
391
+ // they set 0 explicitly.
392
+ this._level = coerceNumberProperty(value, null);
393
+ this.setPadding();
394
+ }
395
+ /**
396
+ * This has been extracted to a util because of TS 4 and VE.
397
+ * View Engine doesn't support property rename inheritance.
398
+ * TS 4.0 doesn't allow properties to override accessors or vice-versa.
399
+ * @docs-private
400
+ */
401
+ setIndentInput(indent) {
402
+ let value = indent;
403
+ let units = 'px';
404
+ if (typeof indent === 'string') {
405
+ const parts = indent.split(cssUnitPattern);
406
+ value = parts[0];
407
+ units = parts[1] || units;
408
+ }
409
+ this.indentUnits = units;
410
+ this._indent = coerceNumberProperty(value);
55
411
  this.setPadding();
56
412
  }
413
+ setPadding() {
414
+ var _a;
415
+ const padding = this.paddingIndent();
416
+ const paddingProp = ((_a = this.dir) === null || _a === void 0 ? void 0 : _a.value) === 'rtl' ? 'paddingRight' : 'paddingLeft';
417
+ this.renderer.setStyle(this.element.nativeElement, paddingProp, padding);
418
+ }
57
419
  }
58
- /** @nocollapse */ McTreeNodePadding.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeNodePadding, deps: null, target: i0.ɵɵFactoryTarget.Directive });
59
- /** @nocollapse */ McTreeNodePadding.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: McTreeNodePadding, selector: "[mcTreeNodePadding]", inputs: { level: ["mcTreeNodePadding", "level"], indent: ["mcTreeNodePaddingIndent", "indent"] }, providers: [{ provide: CdkTreeNodePadding, useExisting: McTreeNodePadding }], usesInheritance: true, ngImport: i0 });
60
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeNodePadding, decorators: [{
420
+ /** @nocollapse */ McTreeNodePadding.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodePadding, deps: [{ token: McTreeNode }, { token: McTreeBase }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
421
+ /** @nocollapse */ McTreeNodePadding.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNodePadding, selector: "[mcTreeNodePadding]", inputs: { indent: ["mcTreeNodePaddingIndent", "indent"] }, exportAs: ["mcTreeNodePadding"], ngImport: i0 });
422
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodePadding, decorators: [{
61
423
  type: Directive,
62
424
  args: [{
63
425
  selector: '[mcTreeNodePadding]',
64
- providers: [{ provide: CdkTreeNodePadding, useExisting: McTreeNodePadding }]
426
+ exportAs: 'mcTreeNodePadding'
65
427
  }]
66
- }], propDecorators: { level: [{
67
- type: Input,
68
- args: ['mcTreeNodePadding']
69
- }], indent: [{
428
+ }], ctorParameters: function () { return [{ type: McTreeNode }, { type: McTreeBase }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.Directionality, decorators: [{
429
+ type: Optional
430
+ }] }]; }, propDecorators: { indent: [{
70
431
  type: Input,
71
432
  args: ['mcTreeNodePaddingIndent']
72
433
  }] } });
73
434
 
74
- class McTreeNodeToggleComponent {
435
+ class McTreeNodeToggleBase {
436
+ }
437
+ // tslint:disable-next-line:naming-convention
438
+ const McTreeNodeToggleMixinBase = mixinDisabled(McTreeNodeToggleBase);
439
+ /** @docs-private */
440
+ class McTreeNodeToggleBaseDirective extends McTreeNodeToggleMixinBase {
75
441
  constructor(tree, treeNode) {
442
+ super();
76
443
  this.tree = tree;
77
444
  this.treeNode = treeNode;
78
- this.disabled = false;
79
445
  this._recursive = false;
80
446
  this.tree.treeControl.filterValue
81
447
  .pipe(map((value) => (value === null || value === void 0 ? void 0 : value.length) > 0))
@@ -85,81 +451,87 @@ class McTreeNodeToggleComponent {
85
451
  return this._recursive;
86
452
  }
87
453
  set recursive(value) {
88
- this._recursive = value;
454
+ this._recursive = coerceBooleanProperty(value);
89
455
  }
90
456
  get iconState() {
91
- return this.disabled || this.tree.treeControl.isExpanded(this.node);
457
+ return this.tree.treeControl.isExpanded(this.node);
92
458
  }
93
459
  toggle(event) {
460
+ if (this.disabled) {
461
+ return;
462
+ }
94
463
  this.recursive
95
464
  ? this.tree.treeControl.toggleDescendants(this.treeNode.data)
96
465
  : this.tree.treeControl.toggle(this.treeNode.data);
97
466
  event.stopPropagation();
98
467
  }
99
468
  }
100
- /** @nocollapse */ McTreeNodeToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeNodeToggleComponent, deps: [{ token: i1.CdkTree }, { token: i1.CdkTreeNode }], target: i0.ɵɵFactoryTarget.Component });
101
- /** @nocollapse */ McTreeNodeToggleComponentcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: McTreeNodeToggleComponent, selector: "mc-tree-node-toggle", inputs: { node: "node", recursive: ["cdkTreeNodeToggleRecursive", "recursive"] }, host: { listeners: { "click": "toggle($event)" }, properties: { "class.mc-opened": "iconState", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-node-toggle" }, ngImport: i0, template: `
102
- <i class="mc mc-icon mc-angle-down-S_16"></i>
103
- `, isInline: true, encapsulation: i0.ViewEncapsulation.None });
104
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeNodeToggleComponent, decorators: [{
469
+ /** @nocollapse */ McTreeNodeToggleBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeToggleBaseDirective, deps: [{ token: McTreeBase }, { token: McTreeNode }], target: i0.ɵɵFactoryTarget.Directive });
470
+ /** @nocollapse */ McTreeNodeToggleBaseDirectivedir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNodeToggleBaseDirective, inputs: { node: "node", recursive: ["mcTreeNodeToggleRecursive", "recursive"] }, usesInheritance: true, ngImport: i0 });
471
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeToggleBaseDirective, decorators: [{
472
+ type: Directive
473
+ }], ctorParameters: function () { return [{ type: McTreeBase }, { type: McTreeNode }]; }, propDecorators: { node: [{
474
+ type: Input
475
+ }], recursive: [{
476
+ type: Input,
477
+ args: ['mcTreeNodeToggleRecursive']
478
+ }] } });
479
+ class McTreeNodeToggleComponent extends McTreeNodeToggleBaseDirective {
480
+ }
481
+ /** @nocollapse */ McTreeNodeToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
482
+ /** @nocollapse */ McTreeNodeToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNodeToggleComponent, selector: "mc-tree-node-toggle", inputs: { disabled: "disabled" }, host: { listeners: { "click": "toggle($event)" }, properties: { "class.mc-opened": "iconState", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-node-toggle" }, exportAs: ["mcTreeNodeToggle"], usesInheritance: true, ngImport: i0, template: `<i class="mc mc-icon mc-angle-down-S_16"></i>`, isInline: true, styles: [".mc-tree-node-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:100%;cursor:pointer}.mc-tree-node-toggle .mc-icon{transform:rotate(-90deg)}.mc-tree-node-toggle.mc-opened .mc-icon{transform:rotate(0)}.mc-tree-node-toggle[disabled]{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
483
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeToggleComponent, decorators: [{
105
484
  type: Component,
106
485
  args: [{
107
486
  selector: 'mc-tree-node-toggle',
108
- template: `
109
- <i class="mc mc-icon mc-angle-down-S_16"></i>
110
- `,
487
+ exportAs: 'mcTreeNodeToggle',
488
+ template: `<i class="mc mc-icon mc-angle-down-S_16"></i>`,
489
+ styleUrls: ['./toggle.scss'],
111
490
  host: {
112
491
  class: 'mc-tree-node-toggle',
113
492
  '[class.mc-opened]': 'iconState',
114
493
  '[attr.disabled]': 'disabled || null',
115
494
  '(click)': 'toggle($event)'
116
495
  },
117
- encapsulation: ViewEncapsulation.None
496
+ inputs: ['disabled'],
497
+ encapsulation: ViewEncapsulation.None,
498
+ changeDetection: ChangeDetectionStrategy.OnPush
118
499
  }]
119
- }], ctorParameters: function () { return [{ type: i1.CdkTree }, { type: i1.CdkTreeNode }]; }, propDecorators: { node: [{
120
- type: Input
121
- }], recursive: [{
122
- type: Input,
123
- args: ['cdkTreeNodeToggleRecursive']
124
- }] } });
125
- class McTreeNodeToggleDirective {
126
- constructor(tree, treeNode) {
127
- this.tree = tree;
128
- this.treeNode = treeNode;
129
- this.disabled = false;
130
- this._recursive = false;
131
- this.tree.treeControl.filterValue
132
- .pipe(map((value) => value.length > 0))
133
- .subscribe((state) => this.disabled = state);
134
- }
135
- get recursive() {
136
- return this._recursive;
137
- }
138
- set recursive(value) {
139
- this._recursive = value;
140
- }
141
- toggle(event) {
142
- this.recursive
143
- ? this.tree.treeControl.toggleDescendants(this.treeNode.data)
144
- : this.tree.treeControl.toggle(this.treeNode.data);
145
- event.stopPropagation();
146
- }
500
+ }] });
501
+ class McTreeNodeToggleDirective extends McTreeNodeToggleBaseDirective {
147
502
  }
148
- /** @nocollapse */ McTreeNodeToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeNodeToggleDirective, deps: [{ token: i1.CdkTree }, { token: i1.CdkTreeNode }], target: i0.ɵɵFactoryTarget.Directive });
149
- /** @nocollapse */ McTreeNodeToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: McTreeNodeToggleDirective, selector: "[mcTreeNodeToggle]", inputs: { recursive: ["cdkTreeNodeToggleRecursive", "recursive"] }, host: { listeners: { "click": "toggle($event)" }, properties: { "attr.disabled": "disabled || null" } }, ngImport: i0 });
150
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeNodeToggleDirective, decorators: [{
503
+ /** @nocollapse */ McTreeNodeToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeToggleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
504
+ /** @nocollapse */ McTreeNodeToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McTreeNodeToggleDirective, selector: "[mcTreeNodeToggle]", host: { listeners: { "click": "toggle($event)" }, properties: { "attr.disabled": "disabled || null" } }, exportAs: ["mcTreeNodeToggle"], usesInheritance: true, ngImport: i0 });
505
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeNodeToggleDirective, decorators: [{
151
506
  type: Directive,
152
507
  args: [{
153
508
  selector: '[mcTreeNodeToggle]',
509
+ exportAs: 'mcTreeNodeToggle',
154
510
  host: {
155
511
  '[attr.disabled]': 'disabled || null',
156
512
  '(click)': 'toggle($event)'
157
513
  }
158
514
  }]
159
- }], ctorParameters: function () { return [{ type: i1.CdkTree }, { type: i1.CdkTreeNode }]; }, propDecorators: { recursive: [{
160
- type: Input,
161
- args: ['cdkTreeNodeToggleRecursive']
162
- }] } });
515
+ }] });
516
+
517
+ class McTree extends McTreeBase {
518
+ }
519
+ /** @nocollapse */ McTree.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTree, deps: null, target: i0.ɵɵFactoryTarget.Component });
520
+ /** @nocollapse */ McTree.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTree, selector: "mc-tree", host: { classAttribute: "mc-tree" }, exportAs: ["mcTree"], usesInheritance: true, ngImport: i0, template: `<ng-container mcTreeNodeOutlet></ng-container>`, isInline: true, styles: [".mc-tree{display:block}\n"], directives: [{ type: McTreeNodeOutlet, selector: "[mcTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
521
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTree, decorators: [{
522
+ type: Component,
523
+ args: [{
524
+ selector: 'mc-tree',
525
+ exportAs: 'mcTree',
526
+ template: `<ng-container mcTreeNodeOutlet></ng-container>`,
527
+ styleUrls: ['./tree.scss'],
528
+ host: {
529
+ class: 'mc-tree'
530
+ },
531
+ encapsulation: ViewEncapsulation.None,
532
+ changeDetection: ChangeDetectionStrategy.OnPush
533
+ }]
534
+ }] });
163
535
 
164
536
  /**
165
537
  * Injection token used to provide the parent component to options.
@@ -172,7 +544,7 @@ class McTreeOptionChange {
172
544
  }
173
545
  }
174
546
  let uniqueIdCounter = 0;
175
- class McTreeOption extends CdkTreeNode {
547
+ class McTreeOption extends McTreeNode {
176
548
  constructor(elementRef, changeDetectorRef, ngZone, tree) {
177
549
  super(elementRef, tree);
178
550
  this.changeDetectorRef = changeDetectorRef;
@@ -193,7 +565,7 @@ class McTreeOption extends CdkTreeNode {
193
565
  this._value = value;
194
566
  }
195
567
  get disabled() {
196
- return this._disabled || (this.tree && this.tree.disabled);
568
+ return this._disabled || this.tree.disabled;
197
569
  }
198
570
  set disabled(value) {
199
571
  const newValue = coerceBooleanProperty(value);
@@ -219,13 +591,14 @@ class McTreeOption extends CdkTreeNode {
219
591
  get id() {
220
592
  return this._id;
221
593
  }
222
- get multiple() {
223
- return this.tree.multiple;
224
- }
225
594
  get viewValue() {
226
595
  // TODO: Add input property alternative for node envs.
227
596
  return (this.getHostElement().textContent || '').trim();
228
597
  }
598
+ get isExpandable() {
599
+ var _a;
600
+ return !((_a = this.toggleElement) === null || _a === void 0 ? void 0 : _a.disabled) && this.tree.treeControl.isExpandable(this.data);
601
+ }
229
602
  ngAfterContentInit() {
230
603
  this.value = this.tree.treeControl.getValue(this.data);
231
604
  }
@@ -246,10 +619,11 @@ class McTreeOption extends CdkTreeNode {
246
619
  this.changeDetectorRef.markForCheck();
247
620
  }
248
621
  focus(focusOrigin) {
622
+ var _a;
249
623
  if (focusOrigin === 'program') {
250
624
  return;
251
625
  }
252
- if (this.disabled || this.hasFocus) {
626
+ if (this.disabled || this.hasFocus || ((_a = this.actionButton) === null || _a === void 0 ? void 0 : _a.hasFocus)) {
253
627
  return;
254
628
  }
255
629
  this.elementRef.nativeElement.focus();
@@ -269,7 +643,11 @@ class McTreeOption extends CdkTreeNode {
269
643
  .pipe(take(1))
270
644
  .subscribe(() => {
271
645
  this.ngZone.run(() => {
646
+ var _a;
272
647
  this.hasFocus = false;
648
+ if ((_a = this.actionButton) === null || _a === void 0 ? void 0 : _a.hasFocus) {
649
+ return;
650
+ }
273
651
  this.onBlur.next({ option: this });
274
652
  });
275
653
  });
@@ -282,26 +660,38 @@ class McTreeOption extends CdkTreeNode {
282
660
  return 0;
283
661
  }
284
662
  select() {
285
- if (!this._selected) {
286
- this._selected = true;
287
- this.changeDetectorRef.markForCheck();
288
- this.emitSelectionChangeEvent();
663
+ if (this._selected) {
664
+ return;
289
665
  }
666
+ this._selected = true;
667
+ this.changeDetectorRef.markForCheck();
668
+ this.emitSelectionChangeEvent();
290
669
  }
291
670
  deselect() {
292
- if (this._selected) {
293
- this._selected = false;
294
- this.changeDetectorRef.markForCheck();
671
+ if (!this._selected) {
672
+ return;
673
+ }
674
+ this._selected = false;
675
+ this.changeDetectorRef.markForCheck();
676
+ }
677
+ onKeydown($event) {
678
+ if (!this.actionButton) {
679
+ return;
680
+ }
681
+ if ($event.keyCode === TAB && !$event.shiftKey && !this.actionButton.hasFocus) {
682
+ this.actionButton.focus();
683
+ $event.preventDefault();
295
684
  }
296
685
  }
297
686
  selectViaInteraction($event) {
298
- if (!this.disabled) {
299
- this.changeDetectorRef.markForCheck();
300
- this.emitSelectionChangeEvent(true);
301
- const shiftKey = $event ? hasModifierKey($event, 'shiftKey') : false;
302
- const ctrlKey = $event ? hasModifierKey($event, 'ctrlKey') : false;
303
- this.tree.setSelectedOptionsByClick(this, shiftKey, ctrlKey);
687
+ if (this.disabled) {
688
+ return;
304
689
  }
690
+ this.changeDetectorRef.markForCheck();
691
+ this.emitSelectionChangeEvent(true);
692
+ const shiftKey = $event ? hasModifierKey($event, 'shiftKey') : false;
693
+ const ctrlKey = $event ? hasModifierKey($event, 'ctrlKey') : false;
694
+ this.tree.setSelectedOptionsByClick(this, shiftKey, ctrlKey);
305
695
  }
306
696
  emitSelectionChangeEvent(isUserInput = false) {
307
697
  this.onSelectionChange.emit(new McTreeOptionChange(this, isUserInput));
@@ -313,33 +703,54 @@ class McTreeOption extends CdkTreeNode {
313
703
  this.changeDetectorRef.markForCheck();
314
704
  }
315
705
  }
316
- /** @nocollapse */ McTreeOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: MC_TREE_OPTION_PARENT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component });
317
- /** @nocollapse */ McTreeOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: McTreeOption, selector: "mc-tree-option", inputs: { disabled: "disabled", showCheckbox: "showCheckbox" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "focusin": "focus()", "blur": "blur()", "click": "selectViaInteraction($event)" }, properties: { "attr.id": "id", "attr.tabindex": "-1", "attr.disabled": "disabled || null", "class.mc-selected": "selected", "class.mc-focused": "hasFocus" }, classAttribute: "mc-tree-option" }, providers: [{ provide: CdkTreeNode, useExisting: McTreeOption }], exportAs: ["mcTreeOption"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[mc-icon]\"></ng-content>\n\n<ng-content select=\"mc-tree-node-toggle\"></ng-content>\n\n<mc-pseudo-checkbox\n *ngIf=\"showCheckbox\"\n [state]=\"selected ? 'checked' : 'unchecked'\"\n [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<span class=\"mc-option-text mc-no-select\"><ng-content></ng-content></span>\n\n<div class=\"mc-option-overlay\"></div>\n", components: [{ type: i1$1.McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["state", "disabled"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
318
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeOption, decorators: [{
706
+ /** @nocollapse */ McTreeOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: MC_TREE_OPTION_PARENT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component });
707
+ /** @nocollapse */ McTreeOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTreeOption, selector: "mc-tree-option", inputs: { disabled: "disabled", showCheckbox: "showCheckbox" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "focusin": "focus()", "blur": "blur()", "click": "selectViaInteraction($event)", "keydown": "onKeydown($event)" }, properties: { "class.mc-selected": "selected", "class.mc-focused": "hasFocus", "class.mc-action-button-focused": "actionButton?.active", "attr.id": "id", "attr.tabindex": "-1", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-option" }, providers: [
708
+ { provide: McTreeNode, useExisting: McTreeOption },
709
+ { provide: MC_OPTION_ACTION_PARENT, useExisting: McTreeOption }
710
+ ], queries: [{ propertyName: "toggleElement", first: true, predicate: ["mcTreeNodeToggle"], descendants: true }, { propertyName: "actionButton", first: true, predicate: McOptionActionComponent, descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: McTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: McDropdownTrigger, descendants: true }], exportAs: ["mcTreeOption"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"mc-tree-node-toggle\"></ng-content>\n\n<mc-pseudo-checkbox\n *ngIf=\"showCheckbox\"\n [state]=\"selected ? 'checked' : 'unchecked'\"\n [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<ng-content select=\"mc-checkbox\"></ng-content>\n\n<ng-content select=\"[mc-icon]\"></ng-content>\n\n<span class=\"mc-option-text mc-no-select\"><ng-content></ng-content></span>\n\n<ng-content select=\"mc-option-action\"></ng-content>\n\n<div class=\"mc-option-overlay\"></div>\n", styles: [".mc-tree-option{box-sizing:border-box;display:flex;align-items:center;height:32px;height:var(--mc-tree-size-node-height, 32px);word-wrap:break-word;border:2px solid transparent}.mc-tree-option .mc-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:16px;margin-right:var(--mc-tree-size-padding-right, 16px)}.mc-tree-option>.mc-icon{margin-right:8px;cursor:pointer}.mc-tree-option:focus{outline:none}.mc-tree-option:not([disabled]){cursor:pointer}.mc-tree-option>.mc-pseudo-checkbox,.mc-tree-option>.mc-checkbox{margin-right:8px}.mc-tree-option .mc-option-action{display:none}.mc-tree-option:not([disabled]):hover .mc-option-action,.mc-tree-option:not([disabled]).mc-focused .mc-option-action,.mc-tree-option:not([disabled]).mc-action-button-focused .mc-option-action{display:flex}\n"], components: [{ type: i1.McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["state", "disabled"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
711
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeOption, decorators: [{
319
712
  type: Component,
320
713
  args: [{
321
714
  selector: 'mc-tree-option',
322
715
  exportAs: 'mcTreeOption',
323
716
  templateUrl: './tree-option.html',
717
+ styleUrls: ['./tree-option.scss'],
324
718
  host: {
325
- '[attr.id]': 'id',
326
- '[attr.tabindex]': '-1',
327
- '[attr.disabled]': 'disabled || null',
328
719
  class: 'mc-tree-option',
329
720
  '[class.mc-selected]': 'selected',
330
721
  '[class.mc-focused]': 'hasFocus',
722
+ '[class.mc-action-button-focused]': 'actionButton?.active',
723
+ '[attr.id]': 'id',
724
+ '[attr.tabindex]': '-1',
725
+ '[attr.disabled]': 'disabled || null',
331
726
  '(focusin)': 'focus()',
332
727
  '(blur)': 'blur()',
333
- '(click)': 'selectViaInteraction($event)'
728
+ '(click)': 'selectViaInteraction($event)',
729
+ '(keydown)': 'onKeydown($event)'
334
730
  },
335
731
  changeDetection: ChangeDetectionStrategy.OnPush,
336
732
  encapsulation: ViewEncapsulation.None,
337
- providers: [{ provide: CdkTreeNode, useExisting: McTreeOption }]
733
+ providers: [
734
+ { provide: McTreeNode, useExisting: McTreeOption },
735
+ { provide: MC_OPTION_ACTION_PARENT, useExisting: McTreeOption }
736
+ ]
338
737
  }]
339
738
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
340
739
  type: Inject,
341
740
  args: [MC_TREE_OPTION_PARENT_COMPONENT]
342
- }] }]; }, propDecorators: { disabled: [{
741
+ }] }]; }, propDecorators: { toggleElement: [{
742
+ type: ContentChild,
743
+ args: ['mcTreeNodeToggle']
744
+ }], actionButton: [{
745
+ type: ContentChild,
746
+ args: [McOptionActionComponent]
747
+ }], tooltipTrigger: [{
748
+ type: ContentChild,
749
+ args: [McTooltipTrigger]
750
+ }], dropdownTrigger: [{
751
+ type: ContentChild,
752
+ args: [McDropdownTrigger]
753
+ }], disabled: [{
343
754
  type: Input
344
755
  }], showCheckbox: [{
345
756
  type: Input
@@ -347,12 +758,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
347
758
  type: Output
348
759
  }] } });
349
760
 
761
+ /** Base tree control. It has basic toggle/expand/collapse operations on a single data node. */
762
+ /* tslint:disable-next-line:naming-convention */
763
+ class BaseTreeControl {
764
+ constructor() {
765
+ /** A selection model with multi-selection to track expansion status. */
766
+ this.expansionModel = new SelectionModel(true);
767
+ this.filterModel = new SelectionModel(true);
768
+ this.filterValue = new BehaviorSubject('');
769
+ }
770
+ /** Toggles one single data node's expanded/collapsed state. */
771
+ toggle(dataNode) {
772
+ if (this.filterValue.value) {
773
+ return;
774
+ }
775
+ this.expansionModel.toggle(dataNode);
776
+ }
777
+ /** Expands one single data node. */
778
+ expand(dataNode) {
779
+ if (this.filterValue.value) {
780
+ return;
781
+ }
782
+ this.expansionModel.select(dataNode);
783
+ }
784
+ /** Collapses one single data node. */
785
+ collapse(dataNode) {
786
+ if (this.filterValue.value) {
787
+ return;
788
+ }
789
+ this.expansionModel.deselect(dataNode);
790
+ }
791
+ /** Whether a given data node is expanded or not. Returns true if the data node is expanded. */
792
+ isExpanded(dataNode) {
793
+ return this.expansionModel.isSelected(dataNode);
794
+ }
795
+ /** Toggles a subtree rooted at `node` recursively. */
796
+ toggleDescendants(dataNode) {
797
+ this.expansionModel.isSelected(dataNode)
798
+ ? this.collapseDescendants(dataNode)
799
+ : this.expandDescendants(dataNode);
800
+ }
801
+ /** Collapse all dataNodes in the tree. */
802
+ collapseAll() {
803
+ this.expansionModel.clear();
804
+ }
805
+ /** Expands a subtree rooted at given data node recursively. */
806
+ expandDescendants(dataNode) {
807
+ const toBeProcessed = [dataNode];
808
+ toBeProcessed.push(...this.getDescendants(dataNode));
809
+ this.expansionModel.select(...toBeProcessed);
810
+ }
811
+ /** Collapses a subtree rooted at given data node recursively. */
812
+ collapseDescendants(dataNode) {
813
+ const toBeProcessed = [dataNode];
814
+ toBeProcessed.push(...this.getDescendants(dataNode));
815
+ this.expansionModel.deselect(...toBeProcessed);
816
+ }
817
+ }
818
+
819
+ function defaultCompareValues(firstValue, secondValue) {
820
+ return firstValue === secondValue;
821
+ }
822
+ function defaultCompareViewValues(firstViewValue, secondViewValue) {
823
+ return RegExp(secondViewValue, 'gi').test(firstViewValue);
824
+ }
825
+ /** Flat tree control. Able to expand/collapse a subtree recursively for flattened tree. */
826
+ class FlatTreeControl extends BaseTreeControl {
827
+ /** Construct with flat tree data node functions getLevel, isExpandable, getValue and getViewValue. */
828
+ constructor(getLevel, isExpandable,
829
+ /** getValue will be used to determine if the tree contains value or not. Used in method hasValue */
830
+ getValue,
831
+ /** getViewValue will be used for filter nodes. Returned value will be first argument in filterNodesFunction */
832
+ getViewValue,
833
+ /** compareValues will be used to comparing values. */
834
+ compareValues = defaultCompareValues,
835
+ /** compareValues will be used to comparing values. */
836
+ compareViewValues = defaultCompareViewValues) {
837
+ super();
838
+ this.getLevel = getLevel;
839
+ this.isExpandable = isExpandable;
840
+ this.getValue = getValue;
841
+ this.getViewValue = getViewValue;
842
+ this.compareValues = compareValues;
843
+ this.compareViewValues = compareViewValues;
844
+ }
845
+ /**
846
+ * Gets a list of the data node's subtree of descendent data nodes.
847
+ *
848
+ * To make this working, the `dataNodes` of the TreeControl must be flattened tree nodes
849
+ * with correct levels.
850
+ */
851
+ getDescendants(dataNode) {
852
+ const startIndex = this.dataNodes.indexOf(dataNode);
853
+ const results = [];
854
+ // Goes through flattened tree nodes in the `dataNodes` array, and get all descendants.
855
+ // The level of descendants of a tree node must be greater than the level of the given
856
+ // tree node.
857
+ // If we reach a node whose level is equal to the level of the tree node, we hit a sibling.
858
+ // If we reach a node whose level is greater than the level of the tree node, we hit a
859
+ // sibling of an ancestor.
860
+ for (let i = startIndex + 1; i < this.dataNodes.length && this.getLevel(dataNode) < this.getLevel(this.dataNodes[i]); i++) {
861
+ results.push(this.dataNodes[i]);
862
+ }
863
+ return results;
864
+ }
865
+ /**
866
+ * Expands all data nodes in the tree.
867
+ *
868
+ * To make this working, the `dataNodes` variable of the TreeControl must be set to all flattened
869
+ * data nodes of the tree.
870
+ */
871
+ expandAll() {
872
+ this.expansionModel.select(...this.dataNodes);
873
+ }
874
+ getParents(node, result) {
875
+ if (node.parent) {
876
+ result.unshift(node.parent);
877
+ return this.getParents(node.parent, result);
878
+ }
879
+ else {
880
+ return result;
881
+ }
882
+ }
883
+ hasValue(value) {
884
+ return this.dataNodes.find((node) => this.compareValues(this.getValue(node), value));
885
+ }
886
+ filterNodes(value) {
887
+ this.saveExpansionState();
888
+ this.filterModel.clear();
889
+ this.expansionModel.clear();
890
+ const filteredNodes = this.dataNodes
891
+ .filter((node) => this.compareViewValues(this.getViewValue(node), value));
892
+ const filteredNodesWithTheirParents = new Set();
893
+ filteredNodes.forEach((filteredNode) => {
894
+ this.getParents(filteredNode, [])
895
+ .forEach((node) => {
896
+ filteredNodesWithTheirParents.add(node);
897
+ this.expandDataNode(node);
898
+ });
899
+ filteredNodesWithTheirParents.add(filteredNode);
900
+ this.expandDataNode(filteredNode);
901
+ if (this.isExpandable(filteredNode)) {
902
+ const childNodeLevel = this.getLevel(filteredNode) + 1;
903
+ this.getDescendants(filteredNode)
904
+ .filter((childNode) => this.getLevel(childNode) === childNodeLevel)
905
+ .filter((childNode) => !this.isExpandable(childNode) || !this.hasFilteredDescendant(childNode, filteredNodes))
906
+ .forEach((childNode) => {
907
+ filteredNodesWithTheirParents.add(childNode);
908
+ this.expandDataNode(childNode);
909
+ });
910
+ }
911
+ });
912
+ this.filterModel.select(...Array.from(filteredNodesWithTheirParents));
913
+ this.filterValue.next(value);
914
+ this.restoreExpansionState();
915
+ }
916
+ expandDataNode(dataNode) {
917
+ if (this.isExpandable(dataNode)) {
918
+ this.expansionModel.select(dataNode);
919
+ }
920
+ }
921
+ saveExpansionState() {
922
+ if (this.filterValue.value === '') {
923
+ this.expandedItemsBeforeFiltration = this.expansionModel.selected;
924
+ }
925
+ }
926
+ restoreExpansionState() {
927
+ if (this.filterValue.value === '') {
928
+ this.expansionModel.clear();
929
+ this.expansionModel.select(...this.expandedItemsBeforeFiltration);
930
+ }
931
+ }
932
+ hasFilteredDescendant(dataNode, filteredNodes) {
933
+ const filteredViewValues = filteredNodes
934
+ .map((node) => this.getViewValue(node));
935
+ return this.getDescendants(dataNode)
936
+ .filter((node) => filteredViewValues.includes(this.getViewValue(node)))
937
+ .length > 0;
938
+ }
939
+ }
940
+
350
941
  /* tslint:disable:no-empty */
351
942
  const MC_SELECTION_TREE_VALUE_ACCESSOR = {
352
943
  provide: NG_VALUE_ACCESSOR,
353
944
  useExisting: forwardRef(() => McTreeSelection),
354
945
  multi: true
355
946
  };
947
+ class McTreeSelectAllEvent {
948
+ constructor(source, options) {
949
+ this.source = source;
950
+ this.options = options;
951
+ }
952
+ }
953
+ class McTreeCopyEvent {
954
+ constructor(source, option) {
955
+ this.source = source;
956
+ this.option = option;
957
+ }
958
+ }
356
959
  class McTreeNavigationChange {
357
960
  constructor(source, option) {
358
961
  this.source = source;
@@ -365,16 +968,19 @@ class McTreeSelectionChange {
365
968
  this.option = option;
366
969
  }
367
970
  }
368
- class McTreeSelection extends CdkTree {
369
- constructor(elementRef, differs, changeDetectorRef, multiple) {
971
+ class McTreeSelection extends McTreeBase {
972
+ constructor(elementRef, differs, changeDetectorRef, multiple, clipboard) {
370
973
  super(differs, changeDetectorRef);
371
974
  this.elementRef = elementRef;
975
+ this.clipboard = clipboard;
372
976
  this.renderedOptions = new QueryList();
373
977
  this.resetFocusedItemOnBlur = true;
374
- this.navigationChange = new EventEmitter();
375
- this.selectionChange = new EventEmitter();
376
978
  this.multipleMode = null;
377
979
  this.userTabIndex = null;
980
+ this.navigationChange = new EventEmitter();
981
+ this.selectionChange = new EventEmitter();
982
+ this.onSelectAll = new EventEmitter();
983
+ this.onCopy = new EventEmitter();
378
984
  this.sortedNodes = [];
379
985
  this._autoSelect = true;
380
986
  this._noUnselectLast = true;
@@ -395,6 +1001,7 @@ class McTreeSelection extends CdkTree {
395
1001
  });
396
1002
  this.renderedOptions.reset(orderedOptions);
397
1003
  this.renderedOptions.notifyOnChanges();
1004
+ this.updateScrollSize();
398
1005
  };
399
1006
  if (multiple === MultipleMode.CHECKBOX || multiple === MultipleMode.KEYBOARD) {
400
1007
  this.multipleMode = multiple;
@@ -500,7 +1107,9 @@ class McTreeSelection extends CdkTree {
500
1107
  if (this.renderedOptions.length === 0 || this.isFocusReceivedFromNestedOption($event)) {
501
1108
  return;
502
1109
  }
1110
+ this.keyManager.setFocusOrigin('keyboard');
503
1111
  this.keyManager.setFirstItemActive();
1112
+ this.keyManager.setFocusOrigin('program');
504
1113
  }
505
1114
  blur() {
506
1115
  if (!this.hasFocusedOption() && this.resetFocusedItemOnBlur) {
@@ -510,51 +1119,54 @@ class McTreeSelection extends CdkTree {
510
1119
  this.changeDetectorRef.markForCheck();
511
1120
  }
512
1121
  onKeyDown(event) {
1122
+ var _a, _b;
513
1123
  this.keyManager.setFocusOrigin('keyboard');
514
1124
  // tslint:disable-next-line: deprecation
515
1125
  const keyCode = event.keyCode;
516
- switch (keyCode) {
517
- case DOWN_ARROW:
518
- this.keyManager.setNextItemActive();
519
- break;
520
- case UP_ARROW:
521
- this.keyManager.setPreviousItemActive();
522
- break;
523
- case LEFT_ARROW:
524
- if (this.keyManager.activeItem) {
525
- this.treeControl.collapse(this.keyManager.activeItem.data);
526
- }
527
- event.preventDefault();
528
- return;
529
- case RIGHT_ARROW:
530
- if (this.keyManager.activeItem) {
531
- this.treeControl.expand(this.keyManager.activeItem.data);
532
- }
533
- event.preventDefault();
534
- return;
535
- case SPACE:
536
- case ENTER:
537
- this.toggleFocusedOption();
538
- event.preventDefault();
539
- break;
540
- case HOME:
541
- this.keyManager.setFirstItemActive();
542
- event.preventDefault();
543
- break;
544
- case END:
545
- this.keyManager.setLastItemActive();
546
- event.preventDefault();
547
- break;
548
- case PAGE_UP:
549
- this.keyManager.setPreviousPageItemActive();
550
- event.preventDefault();
551
- break;
552
- case PAGE_DOWN:
553
- this.keyManager.setNextPageItemActive();
554
- event.preventDefault();
555
- break;
556
- default:
557
- return;
1126
+ if ([SPACE, LEFT_ARROW, RIGHT_ARROW].includes(keyCode) || isVerticalMovement(event)) {
1127
+ event.preventDefault();
1128
+ }
1129
+ if (this.multiple && isSelectAll(event)) {
1130
+ this.selectAllOptions();
1131
+ return;
1132
+ }
1133
+ else if (isCopy(event)) {
1134
+ this.copyActiveOption();
1135
+ return;
1136
+ }
1137
+ else if (keyCode === TAB) {
1138
+ this.keyManager.tabOut.next();
1139
+ return;
1140
+ }
1141
+ else if (keyCode === LEFT_ARROW && ((_a = this.keyManager.activeItem) === null || _a === void 0 ? void 0 : _a.isExpandable)) {
1142
+ this.treeControl.collapse(this.keyManager.activeItem.data);
1143
+ return;
1144
+ }
1145
+ else if (keyCode === RIGHT_ARROW && ((_b = this.keyManager.activeItem) === null || _b === void 0 ? void 0 : _b.isExpandable)) {
1146
+ this.treeControl.expand(this.keyManager.activeItem.data);
1147
+ return;
1148
+ }
1149
+ else if (keyCode === DOWN_ARROW) {
1150
+ this.keyManager.setNextItemActive();
1151
+ }
1152
+ else if (keyCode === UP_ARROW) {
1153
+ this.keyManager.setPreviousItemActive();
1154
+ }
1155
+ else if ([SPACE, ENTER].includes(keyCode)) {
1156
+ this.toggleFocusedOption();
1157
+ return;
1158
+ }
1159
+ else if (keyCode === HOME) {
1160
+ this.keyManager.setFirstItemActive();
1161
+ }
1162
+ else if (keyCode === END) {
1163
+ this.keyManager.setLastItemActive();
1164
+ }
1165
+ else if (keyCode === PAGE_UP) {
1166
+ this.keyManager.setPreviousPageItemActive();
1167
+ }
1168
+ else if (keyCode === PAGE_DOWN) {
1169
+ this.keyManager.setNextPageItemActive();
558
1170
  }
559
1171
  if (this.keyManager.activeItem) {
560
1172
  this.setSelectedOptionsByKey(this.keyManager.activeItem, hasModifierKey(event, 'shiftKey'), hasModifierKey(event, 'ctrlKey'));
@@ -639,25 +1251,29 @@ class McTreeSelection extends CdkTree {
639
1251
  renderNodeChanges(data, dataDiffer = this.dataDiffer, viewContainer = this.nodeOutlet.viewContainer, parentData) {
640
1252
  super.renderNodeChanges(data, dataDiffer, viewContainer, parentData);
641
1253
  this.sortedNodes = this.getSortedNodes(viewContainer);
642
- this.updateScrollSize();
643
1254
  this.nodeOutlet.changeDetectorRef.detectChanges();
644
1255
  }
645
- getHeight() {
646
- const clientRects = this.elementRef.nativeElement.getClientRects();
647
- if (clientRects.length) {
648
- return clientRects[0].height;
649
- }
650
- return 0;
651
- }
652
- getItemHeight() {
653
- return this.renderedOptions.first ? this.renderedOptions.first.getHeight() : 0;
654
- }
655
1256
  emitNavigationEvent(option) {
656
1257
  this.navigationChange.emit(new McTreeNavigationChange(this, option));
657
1258
  }
658
1259
  emitChangeEvent(option) {
659
1260
  this.selectionChange.emit(new McTreeNavigationChange(this, option));
660
1261
  }
1262
+ selectAllOptions() {
1263
+ const optionsToSelect = this.renderedOptions
1264
+ .filter((option) => !option.disabled);
1265
+ optionsToSelect
1266
+ .forEach((option) => option.setSelected(true));
1267
+ this.onSelectAll.emit(new McTreeSelectAllEvent(this, optionsToSelect));
1268
+ }
1269
+ copyActiveOption() {
1270
+ if (this.onCopy.observers.length) {
1271
+ this.onCopy.emit(new McTreeCopyEvent(this, this.keyManager.activeItem));
1272
+ }
1273
+ else {
1274
+ this.onCopyDefaultHandler();
1275
+ }
1276
+ }
661
1277
  writeValue(value) {
662
1278
  if (this.multiple && value && !Array.isArray(value)) {
663
1279
  throw getMcSelectNonArrayValueError();
@@ -692,6 +1308,20 @@ class McTreeSelection extends CdkTree {
692
1308
  getSelectedValues() {
693
1309
  return this.selectionModel.selected.map((selected) => this.treeControl.getValue(selected));
694
1310
  }
1311
+ getItemHeight() {
1312
+ return this.renderedOptions.first ? this.renderedOptions.first.getHeight() : 0;
1313
+ }
1314
+ onCopyDefaultHandler() {
1315
+ var _a;
1316
+ (_a = this.clipboard) === null || _a === void 0 ? void 0 : _a.copy(this.keyManager.activeItem.value);
1317
+ }
1318
+ getHeight() {
1319
+ const clientRects = this.elementRef.nativeElement.getClientRects();
1320
+ if (clientRects.length) {
1321
+ return clientRects[0].height;
1322
+ }
1323
+ return 0;
1324
+ }
695
1325
  updateTabIndex() {
696
1326
  this._tabIndex = this.renderedOptions.length === 0 ? -1 : 0;
697
1327
  }
@@ -770,19 +1400,19 @@ class McTreeSelection extends CdkTree {
770
1400
  return $event.relatedTarget.classList.contains('mc-tree-option');
771
1401
  }
772
1402
  }
773
- /** @nocollapse */ McTreeSelection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeSelection, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: 'multiple', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
774
- /** @nocollapse */ McTreeSelection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: McTreeSelection, selector: "mc-tree-selection", inputs: { treeControl: "treeControl", autoSelect: "autoSelect", noUnselectLast: "noUnselectLast", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { navigationChange: "navigationChange", selectionChange: "selectionChange" }, host: { listeners: { "blur": "blur()", "focus": "focus($event)", "keydown": "onKeyDown($event)", "window:resize": "updateScrollSize()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-selection" }, providers: [
1403
+ /** @nocollapse */ McTreeSelection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeSelection, deps: [{ token: i0.ElementRef }, { token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: 'multiple', attribute: true }, { token: i1$1.Clipboard, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1404
+ /** @nocollapse */ McTreeSelection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McTreeSelection, selector: "mc-tree-selection", inputs: { treeControl: "treeControl", autoSelect: "autoSelect", noUnselectLast: "noUnselectLast", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { navigationChange: "navigationChange", selectionChange: "selectionChange", onSelectAll: "onSelectAll", onCopy: "onCopy" }, host: { listeners: { "blur": "blur()", "focus": "focus($event)", "keydown": "onKeyDown($event)", "window:resize": "updateScrollSize()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "mc-tree-selection" }, providers: [
775
1405
  MC_SELECTION_TREE_VALUE_ACCESSOR,
776
1406
  { provide: MC_TREE_OPTION_PARENT_COMPONENT, useExisting: McTreeSelection },
777
- { provide: CdkTree, useExisting: McTreeSelection }
778
- ], queries: [{ propertyName: "unorderedOptions", predicate: McTreeOption }], viewQueries: [{ propertyName: "nodeOutlet", first: true, predicate: CdkTreeNodeOutlet, descendants: true, static: true }], exportAs: ["mcTreeSelection"], usesInheritance: true, ngImport: i0, template: '<ng-container cdkTreeNodeOutlet></ng-container>', isInline: true, styles: [".mc-tree-selection{display:block}.mc-tree-option{display:flex;align-items:center;padding-right:16px;padding-right:var(--mc-tree-size-padding-right, 16px);height:28px;height:var(--mc-tree-size-node-height, 28px);word-wrap:break-word;border:2px solid transparent;border:var(--mc-tree-size-border-width, 2px) solid transparent}.mc-tree-option>.mc-icon{margin-right:4px;cursor:pointer}.mc-tree-option:focus{outline:none}.mc-tree-option:not([disabled]){cursor:pointer}.mc-tree-option .mc-pseudo-checkbox{margin-right:8px}.mc-tree-node-toggle{margin-right:4px;cursor:pointer}.mc-tree-node-toggle .mc-icon{transform:rotate(-90deg)}.mc-tree-node-toggle.mc-opened .mc-icon{transform:rotate(0)}.mc-tree-node-toggle[disabled]{cursor:default}\n"], directives: [{ type: i1.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
779
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeSelection, decorators: [{
1407
+ { provide: McTreeBase, useExisting: McTreeSelection }
1408
+ ], queries: [{ propertyName: "unorderedOptions", predicate: McTreeOption }], viewQueries: [{ propertyName: "nodeOutlet", first: true, predicate: McTreeNodeOutlet, descendants: true, static: true }], exportAs: ["mcTreeSelection"], usesInheritance: true, ngImport: i0, template: '<ng-container mcTreeNodeOutlet></ng-container>', isInline: true, styles: [".mc-tree-selection{display:block}\n"], directives: [{ type: McTreeNodeOutlet, selector: "[mcTreeNodeOutlet]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1409
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeSelection, decorators: [{
780
1410
  type: Component,
781
1411
  args: [{
782
1412
  selector: 'mc-tree-selection',
783
1413
  exportAs: 'mcTreeSelection',
784
- template: '<ng-container cdkTreeNodeOutlet></ng-container>',
785
- styleUrls: ['./tree.scss'],
1414
+ template: '<ng-container mcTreeNodeOutlet></ng-container>',
1415
+ styleUrls: ['./tree-selection.scss'],
786
1416
  host: {
787
1417
  class: 'mc-tree-selection',
788
1418
  '[attr.tabindex]': 'tabIndex',
@@ -797,15 +1427,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
797
1427
  providers: [
798
1428
  MC_SELECTION_TREE_VALUE_ACCESSOR,
799
1429
  { provide: MC_TREE_OPTION_PARENT_COMPONENT, useExisting: McTreeSelection },
800
- { provide: CdkTree, useExisting: McTreeSelection }
1430
+ { provide: McTreeBase, useExisting: McTreeSelection }
801
1431
  ]
802
1432
  }]
803
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }, { type: i1$1.MultipleMode, decorators: [{
1433
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }, { type: i1.MultipleMode, decorators: [{
804
1434
  type: Attribute,
805
1435
  args: ['multiple']
1436
+ }] }, { type: i1$1.Clipboard, decorators: [{
1437
+ type: Optional
806
1438
  }] }]; }, propDecorators: { nodeOutlet: [{
807
1439
  type: ViewChild,
808
- args: [CdkTreeNodeOutlet, { static: true }]
1440
+ args: [McTreeNodeOutlet, { static: true }]
809
1441
  }], unorderedOptions: [{
810
1442
  type: ContentChildren,
811
1443
  args: [McTreeOption]
@@ -815,6 +1447,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
815
1447
  type: Output
816
1448
  }], selectionChange: [{
817
1449
  type: Output
1450
+ }], onSelectAll: [{
1451
+ type: Output
1452
+ }], onCopy: [{
1453
+ type: Output
818
1454
  }], autoSelect: [{
819
1455
  type: Input
820
1456
  }], noUnselectLast: [{
@@ -826,37 +1462,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
826
1462
  }] } });
827
1463
 
828
1464
  const MC_TREE_DIRECTIVES = [
829
- McTreeSelection,
830
- McTreeOption,
1465
+ McTreeNodeOutlet,
831
1466
  McTreeNodeDef,
1467
+ McTreeNode,
832
1468
  McTreeNodePadding,
1469
+ McTree,
1470
+ McTreeSelection,
1471
+ McTreeOption,
833
1472
  McTreeNodeToggleComponent,
834
1473
  McTreeNodeToggleDirective
835
1474
  ];
836
1475
  class McTreeModule {
837
1476
  }
838
- /** @nocollapse */ McTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
839
- /** @nocollapse */ McTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeModule, declarations: [McTreeSelection,
840
- McTreeOption,
1477
+ /** @nocollapse */ McTreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1478
+ /** @nocollapse */ McTreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeModule, declarations: [McTreeNodeOutlet,
841
1479
  McTreeNodeDef,
1480
+ McTreeNode,
842
1481
  McTreeNodePadding,
843
- McTreeNodeToggleComponent,
844
- McTreeNodeToggleDirective], imports: [CommonModule, CdkTreeModule, McPseudoCheckboxModule], exports: [McTreeSelection,
1482
+ McTree,
1483
+ McTreeSelection,
845
1484
  McTreeOption,
1485
+ McTreeNodeToggleComponent,
1486
+ McTreeNodeToggleDirective], imports: [CommonModule, McPseudoCheckboxModule], exports: [McTreeNodeOutlet,
846
1487
  McTreeNodeDef,
1488
+ McTreeNode,
847
1489
  McTreeNodePadding,
1490
+ McTree,
1491
+ McTreeSelection,
1492
+ McTreeOption,
848
1493
  McTreeNodeToggleComponent,
849
1494
  McTreeNodeToggleDirective] });
850
- /** @nocollapse */ McTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeModule, imports: [[CommonModule, CdkTreeModule, McPseudoCheckboxModule]] });
851
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: McTreeModule, decorators: [{
1495
+ /** @nocollapse */ McTreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeModule, imports: [[CommonModule, McPseudoCheckboxModule]] });
1496
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McTreeModule, decorators: [{
852
1497
  type: NgModule,
853
1498
  args: [{
854
- imports: [CommonModule, CdkTreeModule, McPseudoCheckboxModule],
1499
+ imports: [CommonModule, McPseudoCheckboxModule],
855
1500
  exports: MC_TREE_DIRECTIVES,
856
1501
  declarations: MC_TREE_DIRECTIVES
857
1502
  }]
858
1503
  }] });
859
1504
 
1505
+ /** Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type. */
1506
+ class NestedTreeControl extends BaseTreeControl {
1507
+ /** Construct with nested tree function getChildren. */
1508
+ constructor(getChildren) {
1509
+ super();
1510
+ this.getChildren = getChildren;
1511
+ }
1512
+ /**
1513
+ * Expands all dataNodes in the tree.
1514
+ *
1515
+ * To make this working, the `dataNodes` variable of the TreeControl must be set to all root level
1516
+ * data nodes of the tree.
1517
+ */
1518
+ expandAll() {
1519
+ this.expansionModel.clear();
1520
+ const allNodes = this.dataNodes.reduce((accumulator, dataNode) => [...accumulator, ...this.getDescendants(dataNode), dataNode], []);
1521
+ this.expansionModel.select(...allNodes);
1522
+ }
1523
+ /** Gets a list of descendant dataNodes of a subtree rooted at given data node recursively. */
1524
+ getDescendants(dataNode) {
1525
+ const descendants = [];
1526
+ this._getDescendants(descendants, dataNode);
1527
+ return descendants.splice(1);
1528
+ }
1529
+ /** A helper function to get descendants recursively. */
1530
+ // todo нужно придумать другое название и понять в чем отличие между getDescendants и _getDescendants
1531
+ /* tslint:disable-next-line:naming-convention */
1532
+ _getDescendants(descendants, dataNode) {
1533
+ descendants.push(dataNode);
1534
+ this.getChildren(dataNode)
1535
+ .pipe(take(1))
1536
+ .subscribe((children) => {
1537
+ if (children && children.length > 0) {
1538
+ children.forEach((child) => this._getDescendants(descendants, child));
1539
+ }
1540
+ });
1541
+ }
1542
+ }
1543
+
860
1544
  /**
861
1545
  * Tree flattener to convert a normal type of node to node with children & level information.
862
1546
  * Transform nested nodes of type `T` to flattened nodes of type `F`.
@@ -1047,5 +1731,5 @@ class McTreeNestedDataSource extends DataSource {
1047
1731
  * Generated bundle index. Do not edit.
1048
1732
  */
1049
1733
 
1050
- export { MC_SELECTION_TREE_VALUE_ACCESSOR, MC_TREE_OPTION_PARENT_COMPONENT, McTreeFlatDataSource, McTreeFlattener, McTreeModule, McTreeNavigationChange, McTreeNestedDataSource, McTreeNodeDef, McTreeNodePadding, McTreeNodeToggleComponent, McTreeNodeToggleDirective, McTreeOption, McTreeOptionChange, McTreeSelection, McTreeSelectionChange };
1734
+ export { BaseTreeControl, FlatTreeControl, MC_SELECTION_TREE_VALUE_ACCESSOR, MC_TREE_OPTION_PARENT_COMPONENT, McTree, McTreeBase, McTreeCopyEvent, McTreeFlatDataSource, McTreeFlattener, McTreeModule, McTreeNavigationChange, McTreeNestedDataSource, McTreeNode, McTreeNodeDef, McTreeNodeOutlet, McTreeNodeOutletContext, McTreeNodePadding, McTreeNodeToggleBase, McTreeNodeToggleBaseDirective, McTreeNodeToggleComponent, McTreeNodeToggleDirective, McTreeNodeToggleMixinBase, McTreeOption, McTreeOptionChange, McTreeSelectAllEvent, McTreeSelection, McTreeSelectionChange, NestedTreeControl, defaultCompareValues, defaultCompareViewValues };
1051
1735
  //# sourceMappingURL=ptsecurity-mosaic-tree.js.map