@ptsecurity/mosaic 13.2.0 → 13.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (345) hide show
  1. package/_theming.scss +241 -64
  2. package/_visual.scss +437 -232
  3. package/button/button.component.d.ts +1 -1
  4. package/core/option/option.d.ts +1 -0
  5. package/core/validation/validation.d.ts +3 -3
  6. package/design-tokens/legacy-2017/tokens/components/alert.json5 +37 -37
  7. package/design-tokens/legacy-2017/tokens/components/autocomplete.json5 +2 -2
  8. package/design-tokens/legacy-2017/tokens/components/badge.json5 +69 -69
  9. package/design-tokens/legacy-2017/tokens/components/button-toggle.json5 +2 -2
  10. package/design-tokens/legacy-2017/tokens/components/button.json5 +55 -56
  11. package/design-tokens/legacy-2017/tokens/components/card.json5 +25 -25
  12. package/design-tokens/legacy-2017/tokens/components/checkbox.json5 +13 -13
  13. package/design-tokens/legacy-2017/tokens/components/datepicker.json5 +12 -12
  14. package/design-tokens/legacy-2017/tokens/components/dl.json5 +8 -8
  15. package/design-tokens/legacy-2017/tokens/components/dropdown.json5 +5 -4
  16. package/design-tokens/legacy-2017/tokens/components/form-field.json5 +27 -26
  17. package/design-tokens/legacy-2017/tokens/components/forms.json5 +14 -14
  18. package/design-tokens/legacy-2017/tokens/components/icon.json5 +104 -0
  19. package/design-tokens/legacy-2017/tokens/components/input.json5 +2 -3
  20. package/design-tokens/legacy-2017/tokens/components/link.json5 +13 -19
  21. package/design-tokens/legacy-2017/tokens/components/list.json5 +3 -5
  22. package/design-tokens/legacy-2017/tokens/components/modal.json5 +17 -15
  23. package/design-tokens/legacy-2017/tokens/components/navbar.json5 +19 -18
  24. package/design-tokens/legacy-2017/tokens/components/option.json5 +2 -2
  25. package/design-tokens/legacy-2017/tokens/components/popover.json5 +23 -23
  26. package/design-tokens/legacy-2017/tokens/components/popup.json5 +8 -8
  27. package/design-tokens/legacy-2017/tokens/components/progress-bar.json5 +3 -3
  28. package/design-tokens/legacy-2017/tokens/components/progress-spinner.json5 +1 -1
  29. package/design-tokens/legacy-2017/tokens/components/radio.json5 +12 -12
  30. package/design-tokens/legacy-2017/tokens/components/select.json5 +6 -7
  31. package/design-tokens/legacy-2017/tokens/components/sidepanel.json5 +7 -5
  32. package/design-tokens/legacy-2017/tokens/components/table.json5 +4 -4
  33. package/design-tokens/legacy-2017/tokens/components/tabs.json5 +32 -32
  34. package/design-tokens/legacy-2017/tokens/components/tags.json5 +56 -57
  35. package/design-tokens/legacy-2017/tokens/components/textarea.json5 +1 -1
  36. package/design-tokens/legacy-2017/tokens/components/timepicker.json5 +1 -1
  37. package/design-tokens/legacy-2017/tokens/components/toggle.json5 +18 -18
  38. package/design-tokens/legacy-2017/tokens/components/tooltip.json5 +27 -27
  39. package/design-tokens/legacy-2017/tokens/components/tree.json5 +6 -3
  40. package/design-tokens/legacy-2017/tokens/properties/colors.json5 +39 -35
  41. package/design-tokens/legacy-2017/tokens/properties/globals.json5 +14 -14
  42. package/design-tokens/legacy-2017/tokens/properties/typography.json5 +70 -35
  43. package/design-tokens/legacy-2017/tokens.d.ts +220 -122
  44. package/design-tokens/pt-2022/tokens/components/alert.json5 +37 -37
  45. package/design-tokens/pt-2022/tokens/components/autocomplete.json5 +2 -2
  46. package/design-tokens/pt-2022/tokens/components/badge.json5 +68 -68
  47. package/design-tokens/pt-2022/tokens/components/button-toggle.json5 +2 -2
  48. package/design-tokens/pt-2022/tokens/components/button.json5 +56 -57
  49. package/design-tokens/pt-2022/tokens/components/card.json5 +25 -25
  50. package/design-tokens/pt-2022/tokens/components/checkbox.json5 +13 -13
  51. package/design-tokens/pt-2022/tokens/components/datepicker.json5 +12 -12
  52. package/design-tokens/pt-2022/tokens/components/dl.json5 +4 -4
  53. package/design-tokens/pt-2022/tokens/components/dropdown.json5 +5 -4
  54. package/design-tokens/pt-2022/tokens/components/form-field.json5 +26 -25
  55. package/design-tokens/pt-2022/tokens/components/forms.json5 +14 -14
  56. package/design-tokens/pt-2022/tokens/components/icon.json5 +104 -0
  57. package/design-tokens/pt-2022/tokens/components/input.json5 +2 -3
  58. package/design-tokens/pt-2022/tokens/components/link.json5 +17 -23
  59. package/design-tokens/pt-2022/tokens/components/list.json5 +2 -4
  60. package/design-tokens/pt-2022/tokens/components/modal.json5 +17 -15
  61. package/design-tokens/pt-2022/tokens/components/navbar.json5 +21 -20
  62. package/design-tokens/pt-2022/tokens/components/option.json5 +2 -2
  63. package/design-tokens/pt-2022/tokens/components/popover.json5 +26 -26
  64. package/design-tokens/pt-2022/tokens/components/popup.json5 +8 -8
  65. package/design-tokens/pt-2022/tokens/components/progress-bar.json5 +2 -2
  66. package/design-tokens/pt-2022/tokens/components/progress-spinner.json5 +1 -1
  67. package/design-tokens/pt-2022/tokens/components/radio.json5 +12 -12
  68. package/design-tokens/pt-2022/tokens/components/select.json5 +6 -7
  69. package/design-tokens/pt-2022/tokens/components/sidepanel.json5 +8 -6
  70. package/design-tokens/pt-2022/tokens/components/table.json5 +4 -4
  71. package/design-tokens/pt-2022/tokens/components/tabs.json5 +32 -32
  72. package/design-tokens/pt-2022/tokens/components/tags.json5 +56 -57
  73. package/design-tokens/pt-2022/tokens/components/textarea.json5 +1 -1
  74. package/design-tokens/pt-2022/tokens/components/timepicker.json5 +1 -1
  75. package/design-tokens/pt-2022/tokens/components/toggle.json5 +19 -19
  76. package/design-tokens/pt-2022/tokens/components/tooltip.json5 +29 -29
  77. package/design-tokens/pt-2022/tokens/components/tree.json5 +6 -3
  78. package/design-tokens/pt-2022/tokens/properties/colors.json5 +41 -37
  79. package/design-tokens/pt-2022/tokens/properties/globals.json5 +14 -14
  80. package/design-tokens/pt-2022/tokens/properties/palette.json5 +7 -0
  81. package/design-tokens/pt-2022/tokens/properties/typography.json5 +69 -34
  82. package/design-tokens/pt-2022/tokens.d.ts +508 -118
  83. package/dropdown/dropdown-trigger.directive.d.ts +4 -3
  84. package/esm2020/autocomplete/autocomplete-origin.directive.mjs +3 -3
  85. package/esm2020/autocomplete/autocomplete-trigger.directive.mjs +3 -3
  86. package/esm2020/autocomplete/autocomplete.component.mjs +5 -5
  87. package/esm2020/autocomplete/autocomplete.module.mjs +4 -4
  88. package/esm2020/button/button.component.mjs +29 -21
  89. package/esm2020/button/button.module.mjs +4 -4
  90. package/esm2020/button-toggle/button-toggle.component.mjs +8 -8
  91. package/esm2020/button-toggle/button-toggle.module.mjs +4 -4
  92. package/esm2020/card/card.component.mjs +3 -3
  93. package/esm2020/card/card.module.mjs +4 -4
  94. package/esm2020/checkbox/checkbox-module.mjs +4 -4
  95. package/esm2020/checkbox/checkbox-required-validator.mjs +3 -3
  96. package/esm2020/checkbox/checkbox.mjs +3 -3
  97. package/esm2020/core/common-behaviors/common-module.mjs +4 -4
  98. package/esm2020/core/error/error-options.mjs +6 -6
  99. package/esm2020/core/formatters/date/formatter.mjs +3 -3
  100. package/esm2020/core/formatters/index.mjs +4 -4
  101. package/esm2020/core/formatters/number/formatter.mjs +4 -4
  102. package/esm2020/core/forms/forms-module.mjs +4 -4
  103. package/esm2020/core/forms/forms.directive.mjs +6 -6
  104. package/esm2020/core/highlight/highlight.pipe.mjs +3 -3
  105. package/esm2020/core/highlight/index.mjs +4 -4
  106. package/esm2020/core/line/line.mjs +7 -7
  107. package/esm2020/core/option/action.mjs +3 -3
  108. package/esm2020/core/option/optgroup.mjs +3 -3
  109. package/esm2020/core/option/option-module.mjs +4 -4
  110. package/esm2020/core/option/option.mjs +10 -7
  111. package/esm2020/core/pop-up/pop-up-trigger.mjs +3 -3
  112. package/esm2020/core/pop-up/pop-up.mjs +3 -3
  113. package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +3 -3
  114. package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox.module.mjs +4 -4
  115. package/esm2020/core/services/measure-scrollbar.service.mjs +3 -3
  116. package/esm2020/core/validation/validation.mjs +10 -5
  117. package/esm2020/datepicker/calendar-body.component.mjs +3 -3
  118. package/esm2020/datepicker/calendar.component.mjs +6 -6
  119. package/esm2020/datepicker/datepicker-input.directive.mjs +3 -3
  120. package/esm2020/datepicker/datepicker-intl.mjs +3 -3
  121. package/esm2020/datepicker/datepicker-module.mjs +4 -4
  122. package/esm2020/datepicker/datepicker-toggle.component.mjs +6 -6
  123. package/esm2020/datepicker/datepicker.component.mjs +6 -6
  124. package/esm2020/datepicker/month-view.component.mjs +3 -3
  125. package/esm2020/datepicker/multi-year-view.component.mjs +3 -3
  126. package/esm2020/datepicker/year-view.component.mjs +3 -3
  127. package/esm2020/design-tokens/legacy-2017/tokens.mjs +221 -123
  128. package/esm2020/design-tokens/pt-2022/tokens.mjs +243 -138
  129. package/esm2020/divider/divider.component.mjs +3 -3
  130. package/esm2020/divider/divider.module.mjs +4 -4
  131. package/esm2020/dl/dl.component.mjs +9 -9
  132. package/esm2020/dl/dl.module.mjs +4 -4
  133. package/esm2020/dropdown/dropdown-content.directive.mjs +3 -3
  134. package/esm2020/dropdown/dropdown-item.component.mjs +5 -5
  135. package/esm2020/dropdown/dropdown-trigger.directive.mjs +11 -7
  136. package/esm2020/dropdown/dropdown.component.mjs +6 -6
  137. package/esm2020/dropdown/dropdown.module.mjs +4 -4
  138. package/esm2020/form-field/cleaner.mjs +3 -3
  139. package/esm2020/form-field/form-field.mjs +7 -7
  140. package/esm2020/form-field/form-field.module.mjs +4 -4
  141. package/esm2020/form-field/hint.mjs +3 -3
  142. package/esm2020/form-field/password-hint.mjs +34 -15
  143. package/esm2020/form-field/prefix.mjs +3 -3
  144. package/esm2020/form-field/stepper.mjs +3 -3
  145. package/esm2020/form-field/suffix.mjs +3 -3
  146. package/esm2020/icon/icon.component.mjs +6 -6
  147. package/esm2020/icon/icon.module.mjs +4 -4
  148. package/esm2020/input/input-number-validators.mjs +6 -6
  149. package/esm2020/input/input-number.mjs +3 -3
  150. package/esm2020/input/input-password.mjs +12 -11
  151. package/esm2020/input/input.mjs +12 -11
  152. package/esm2020/input/input.module.mjs +4 -4
  153. package/esm2020/link/link.component.mjs +3 -3
  154. package/esm2020/link/link.module.mjs +4 -4
  155. package/esm2020/list/list-selection.component.mjs +11 -11
  156. package/esm2020/list/list.component.mjs +7 -7
  157. package/esm2020/list/list.module.mjs +4 -4
  158. package/esm2020/modal/css-unit.pipe.mjs +3 -3
  159. package/esm2020/modal/modal-control.service.mjs +3 -3
  160. package/esm2020/modal/modal.component.mjs +4 -4
  161. package/esm2020/modal/modal.directive.mjs +12 -12
  162. package/esm2020/modal/modal.module.mjs +4 -4
  163. package/esm2020/modal/modal.service.mjs +3 -3
  164. package/esm2020/navbar/navbar-item.component.mjs +81 -82
  165. package/esm2020/navbar/navbar.component.mjs +10 -10
  166. package/esm2020/navbar/navbar.module.mjs +4 -4
  167. package/esm2020/navbar/vertical-navbar.animation.mjs +3 -3
  168. package/esm2020/navbar/vertical-navbar.component.mjs +6 -6
  169. package/esm2020/popover/popover-confirm.component.mjs +8 -8
  170. package/esm2020/popover/popover.component.mjs +8 -8
  171. package/esm2020/popover/popover.module.mjs +4 -4
  172. package/esm2020/progress-bar/progress-bar.component.mjs +3 -3
  173. package/esm2020/progress-bar/progress-bar.module.mjs +4 -4
  174. package/esm2020/progress-spinner/progress-spinner.component.mjs +3 -3
  175. package/esm2020/progress-spinner/progress-spinner.module.mjs +4 -4
  176. package/esm2020/radio/radio.component.mjs +6 -6
  177. package/esm2020/radio/radio.module.mjs +4 -4
  178. package/esm2020/select/public-api.mjs +2 -1
  179. package/esm2020/select/select-option.directive.mjs +65 -0
  180. package/esm2020/select/select.component.mjs +16 -16
  181. package/esm2020/select/select.module.mjs +19 -10
  182. package/esm2020/sidebar/sidebar.component.mjs +9 -9
  183. package/esm2020/sidebar/sidebar.module.mjs +4 -4
  184. package/esm2020/sidepanel/sidepanel-container.component.mjs +5 -5
  185. package/esm2020/sidepanel/sidepanel-directives.mjs +15 -15
  186. package/esm2020/sidepanel/sidepanel.module.mjs +4 -4
  187. package/esm2020/sidepanel/sidepanel.service.mjs +3 -3
  188. package/esm2020/splitter/splitter.component.mjs +12 -12
  189. package/esm2020/splitter/splitter.module.mjs +4 -4
  190. package/esm2020/table/table.component.mjs +3 -3
  191. package/esm2020/table/table.module.mjs +4 -4
  192. package/esm2020/tabs/paginated-tab-header.mjs +3 -3
  193. package/esm2020/tabs/tab-body.component.mjs +6 -6
  194. package/esm2020/tabs/tab-content.directive.mjs +3 -3
  195. package/esm2020/tabs/tab-group.component.mjs +19 -19
  196. package/esm2020/tabs/tab-header.component.mjs +4 -4
  197. package/esm2020/tabs/tab-label-wrapper.directive.mjs +3 -3
  198. package/esm2020/tabs/tab-label.directive.mjs +3 -3
  199. package/esm2020/tabs/tab-nav-bar/tab-nav-bar.mjs +6 -6
  200. package/esm2020/tabs/tab.component.mjs +3 -3
  201. package/esm2020/tabs/tabs.module.mjs +4 -4
  202. package/esm2020/tags/tag-input.mjs +3 -3
  203. package/esm2020/tags/tag-list.component.mjs +6 -6
  204. package/esm2020/tags/tag.component.mjs +67 -69
  205. package/esm2020/tags/tag.module.mjs +4 -4
  206. package/esm2020/textarea/textarea.component.mjs +9 -8
  207. package/esm2020/textarea/textarea.module.mjs +4 -4
  208. package/esm2020/timepicker/timepicker.directive.mjs +3 -3
  209. package/esm2020/timepicker/timepicker.module.mjs +4 -4
  210. package/esm2020/toggle/toggle.component.mjs +3 -3
  211. package/esm2020/toggle/toggle.module.mjs +4 -4
  212. package/esm2020/tooltip/tooltip.component.mjs +15 -14
  213. package/esm2020/tooltip/tooltip.module.mjs +4 -4
  214. package/esm2020/tree/node.mjs +3 -3
  215. package/esm2020/tree/outlet.mjs +3 -3
  216. package/esm2020/tree/padding.directive.mjs +3 -3
  217. package/esm2020/tree/toggle.mjs +10 -10
  218. package/esm2020/tree/tree-base.mjs +6 -6
  219. package/esm2020/tree/tree-option.component.mjs +5 -5
  220. package/esm2020/tree/tree-selection.component.mjs +8 -6
  221. package/esm2020/tree/tree.mjs +3 -3
  222. package/esm2020/tree/tree.module.mjs +4 -4
  223. package/esm2020/tree-select/tree-select.component.mjs +14 -14
  224. package/esm2020/tree-select/tree-select.module.mjs +4 -4
  225. package/fesm2015/ptsecurity-mosaic-autocomplete.mjs +15 -15
  226. package/fesm2015/ptsecurity-mosaic-button-toggle.mjs +12 -12
  227. package/fesm2015/ptsecurity-mosaic-button.mjs +32 -24
  228. package/fesm2015/ptsecurity-mosaic-button.mjs.map +1 -1
  229. package/fesm2015/ptsecurity-mosaic-card.mjs +7 -7
  230. package/fesm2015/ptsecurity-mosaic-checkbox.mjs +10 -10
  231. package/fesm2015/ptsecurity-mosaic-core.mjs +89 -81
  232. package/fesm2015/ptsecurity-mosaic-core.mjs.map +1 -1
  233. package/fesm2015/ptsecurity-mosaic-datepicker.mjs +40 -40
  234. package/fesm2015/ptsecurity-mosaic-design-tokens.mjs +572 -271
  235. package/fesm2015/ptsecurity-mosaic-design-tokens.mjs.map +1 -1
  236. package/fesm2015/ptsecurity-mosaic-divider.mjs +7 -7
  237. package/fesm2015/ptsecurity-mosaic-dl.mjs +13 -13
  238. package/fesm2015/ptsecurity-mosaic-dropdown.mjs +25 -21
  239. package/fesm2015/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  240. package/fesm2015/ptsecurity-mosaic-form-field.mjs +60 -38
  241. package/fesm2015/ptsecurity-mosaic-form-field.mjs.map +1 -1
  242. package/fesm2015/ptsecurity-mosaic-icon.mjs +10 -10
  243. package/fesm2015/ptsecurity-mosaic-input.mjs +33 -31
  244. package/fesm2015/ptsecurity-mosaic-input.mjs.map +1 -1
  245. package/fesm2015/ptsecurity-mosaic-link.mjs +7 -7
  246. package/fesm2015/ptsecurity-mosaic-list.mjs +21 -21
  247. package/fesm2015/ptsecurity-mosaic-list.mjs.map +1 -1
  248. package/fesm2015/ptsecurity-mosaic-modal.mjs +29 -29
  249. package/fesm2015/ptsecurity-mosaic-modal.mjs.map +1 -1
  250. package/fesm2015/ptsecurity-mosaic-navbar.mjs +100 -101
  251. package/fesm2015/ptsecurity-mosaic-navbar.mjs.map +1 -1
  252. package/fesm2015/ptsecurity-mosaic-popover.mjs +18 -18
  253. package/fesm2015/ptsecurity-mosaic-popover.mjs.map +1 -1
  254. package/fesm2015/ptsecurity-mosaic-progress-bar.mjs +7 -7
  255. package/fesm2015/ptsecurity-mosaic-progress-spinner.mjs +7 -7
  256. package/fesm2015/ptsecurity-mosaic-radio.mjs +10 -10
  257. package/fesm2015/ptsecurity-mosaic-select.mjs +99 -33
  258. package/fesm2015/ptsecurity-mosaic-select.mjs.map +1 -1
  259. package/fesm2015/ptsecurity-mosaic-sidebar.mjs +13 -13
  260. package/fesm2015/ptsecurity-mosaic-sidepanel.mjs +26 -26
  261. package/fesm2015/ptsecurity-mosaic-sidepanel.mjs.map +1 -1
  262. package/fesm2015/ptsecurity-mosaic-splitter.mjs +16 -16
  263. package/fesm2015/ptsecurity-mosaic-table.mjs +7 -7
  264. package/fesm2015/ptsecurity-mosaic-tabs.mjs +54 -54
  265. package/fesm2015/ptsecurity-mosaic-tabs.mjs.map +1 -1
  266. package/fesm2015/ptsecurity-mosaic-tags.mjs +81 -83
  267. package/fesm2015/ptsecurity-mosaic-tags.mjs.map +1 -1
  268. package/fesm2015/ptsecurity-mosaic-textarea.mjs +11 -10
  269. package/fesm2015/ptsecurity-mosaic-textarea.mjs.map +1 -1
  270. package/fesm2015/ptsecurity-mosaic-timepicker.mjs +7 -7
  271. package/fesm2015/ptsecurity-mosaic-toggle.mjs +7 -7
  272. package/fesm2015/ptsecurity-mosaic-tooltip.mjs +18 -17
  273. package/fesm2015/ptsecurity-mosaic-tooltip.mjs.map +1 -1
  274. package/fesm2015/ptsecurity-mosaic-tree-select.mjs +17 -17
  275. package/fesm2015/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  276. package/fesm2015/ptsecurity-mosaic-tree.mjs +44 -42
  277. package/fesm2015/ptsecurity-mosaic-tree.mjs.map +1 -1
  278. package/fesm2020/ptsecurity-mosaic-autocomplete.mjs +15 -15
  279. package/fesm2020/ptsecurity-mosaic-button-toggle.mjs +12 -12
  280. package/fesm2020/ptsecurity-mosaic-button.mjs +32 -24
  281. package/fesm2020/ptsecurity-mosaic-button.mjs.map +1 -1
  282. package/fesm2020/ptsecurity-mosaic-card.mjs +7 -7
  283. package/fesm2020/ptsecurity-mosaic-checkbox.mjs +10 -10
  284. package/fesm2020/ptsecurity-mosaic-core.mjs +89 -81
  285. package/fesm2020/ptsecurity-mosaic-core.mjs.map +1 -1
  286. package/fesm2020/ptsecurity-mosaic-datepicker.mjs +40 -40
  287. package/fesm2020/ptsecurity-mosaic-design-tokens.mjs +572 -271
  288. package/fesm2020/ptsecurity-mosaic-design-tokens.mjs.map +1 -1
  289. package/fesm2020/ptsecurity-mosaic-divider.mjs +7 -7
  290. package/fesm2020/ptsecurity-mosaic-dl.mjs +13 -13
  291. package/fesm2020/ptsecurity-mosaic-dropdown.mjs +25 -21
  292. package/fesm2020/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  293. package/fesm2020/ptsecurity-mosaic-form-field.mjs +57 -38
  294. package/fesm2020/ptsecurity-mosaic-form-field.mjs.map +1 -1
  295. package/fesm2020/ptsecurity-mosaic-icon.mjs +10 -10
  296. package/fesm2020/ptsecurity-mosaic-input.mjs +33 -31
  297. package/fesm2020/ptsecurity-mosaic-input.mjs.map +1 -1
  298. package/fesm2020/ptsecurity-mosaic-link.mjs +7 -7
  299. package/fesm2020/ptsecurity-mosaic-list.mjs +21 -21
  300. package/fesm2020/ptsecurity-mosaic-list.mjs.map +1 -1
  301. package/fesm2020/ptsecurity-mosaic-modal.mjs +29 -29
  302. package/fesm2020/ptsecurity-mosaic-modal.mjs.map +1 -1
  303. package/fesm2020/ptsecurity-mosaic-navbar.mjs +100 -101
  304. package/fesm2020/ptsecurity-mosaic-navbar.mjs.map +1 -1
  305. package/fesm2020/ptsecurity-mosaic-popover.mjs +18 -18
  306. package/fesm2020/ptsecurity-mosaic-popover.mjs.map +1 -1
  307. package/fesm2020/ptsecurity-mosaic-progress-bar.mjs +7 -7
  308. package/fesm2020/ptsecurity-mosaic-progress-spinner.mjs +7 -7
  309. package/fesm2020/ptsecurity-mosaic-radio.mjs +10 -10
  310. package/fesm2020/ptsecurity-mosaic-select.mjs +96 -32
  311. package/fesm2020/ptsecurity-mosaic-select.mjs.map +1 -1
  312. package/fesm2020/ptsecurity-mosaic-sidebar.mjs +13 -13
  313. package/fesm2020/ptsecurity-mosaic-sidepanel.mjs +26 -26
  314. package/fesm2020/ptsecurity-mosaic-sidepanel.mjs.map +1 -1
  315. package/fesm2020/ptsecurity-mosaic-splitter.mjs +16 -16
  316. package/fesm2020/ptsecurity-mosaic-table.mjs +7 -7
  317. package/fesm2020/ptsecurity-mosaic-tabs.mjs +54 -54
  318. package/fesm2020/ptsecurity-mosaic-tabs.mjs.map +1 -1
  319. package/fesm2020/ptsecurity-mosaic-tags.mjs +79 -81
  320. package/fesm2020/ptsecurity-mosaic-tags.mjs.map +1 -1
  321. package/fesm2020/ptsecurity-mosaic-textarea.mjs +11 -10
  322. package/fesm2020/ptsecurity-mosaic-textarea.mjs.map +1 -1
  323. package/fesm2020/ptsecurity-mosaic-timepicker.mjs +7 -7
  324. package/fesm2020/ptsecurity-mosaic-toggle.mjs +7 -7
  325. package/fesm2020/ptsecurity-mosaic-tooltip.mjs +18 -17
  326. package/fesm2020/ptsecurity-mosaic-tooltip.mjs.map +1 -1
  327. package/fesm2020/ptsecurity-mosaic-tree-select.mjs +17 -17
  328. package/fesm2020/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  329. package/fesm2020/ptsecurity-mosaic-tree.mjs +44 -42
  330. package/fesm2020/ptsecurity-mosaic-tree.mjs.map +1 -1
  331. package/form-field/password-hint.d.ts +3 -1
  332. package/input/input-password.d.ts +4 -3
  333. package/input/input.d.ts +4 -3
  334. package/list/list-selection.component.d.ts +1 -1
  335. package/navbar/navbar-item.component.d.ts +18 -18
  336. package/package.json +4 -4
  337. package/prebuilt-themes/dark-theme.css +1 -1
  338. package/prebuilt-themes/default-theme.css +1 -1
  339. package/prebuilt-visual/default-visual.css +1 -1
  340. package/select/public-api.d.ts +1 -0
  341. package/select/select-option.directive.d.ts +20 -0
  342. package/select/select.module.d.ts +9 -7
  343. package/tags/tag.component.d.ts +21 -21
  344. package/textarea/textarea.component.d.ts +4 -3
  345. package/toggle/README.md +0 -0
@@ -2,7 +2,7 @@ import { PlatformModule } from '@angular/cdk/platform';
2
2
  import * as i4 from '@angular/common';
3
3
  import { CommonModule } from '@angular/common';
4
4
  import * as i0 from '@angular/core';
5
- import { InjectionToken, Directive, forwardRef, Inject, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, ContentChild, Output, Input, Optional, Self, NgModule } from '@angular/core';
5
+ import { InjectionToken, Directive, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, ContentChild, forwardRef, Output, Input, Inject, Optional, Self, NgModule } from '@angular/core';
6
6
  import { SPACE, BACKSPACE, DELETE, HOME, END, ENTER, TAB, COMMA, hasModifierKey } from '@ptsecurity/cdk/keycodes';
7
7
  import { coerceBooleanProperty } from '@angular/cdk/coercion';
8
8
  import * as i3 from '@angular/forms';
@@ -35,9 +35,9 @@ const TAG_ATTRIBUTE_NAMES = ['mc-basic-tag'];
35
35
  */
36
36
  class McTagAvatar {
37
37
  }
38
- /** @nocollapse */ /** @nocollapse */ McTagAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
39
- /** @nocollapse */ /** @nocollapse */ McTagAvatar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: McTagAvatar, selector: "mc-tag-avatar, [mcTagAvatar]", host: { classAttribute: "mc-tag-avatar" }, ngImport: i0 });
40
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagAvatar, decorators: [{
38
+ /** @nocollapse */ /** @nocollapse */ McTagAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
39
+ /** @nocollapse */ /** @nocollapse */ McTagAvatar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTagAvatar, selector: "mc-tag-avatar, [mcTagAvatar]", host: { classAttribute: "mc-tag-avatar" }, ngImport: i0 });
40
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagAvatar, decorators: [{
41
41
  type: Directive,
42
42
  args: [{
43
43
  selector: 'mc-tag-avatar, [mcTagAvatar]',
@@ -50,64 +50,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
50
50
  */
51
51
  class McTagTrailingIcon {
52
52
  }
53
- /** @nocollapse */ /** @nocollapse */ McTagTrailingIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
54
- /** @nocollapse */ /** @nocollapse */ McTagTrailingIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: McTagTrailingIcon, selector: "mc-tag-trailing-icon, [mcTagTrailingIcon]", host: { classAttribute: "mc-tag-trailing-icon" }, ngImport: i0 });
55
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagTrailingIcon, decorators: [{
53
+ /** @nocollapse */ /** @nocollapse */ McTagTrailingIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
54
+ /** @nocollapse */ /** @nocollapse */ McTagTrailingIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTagTrailingIcon, selector: "mc-tag-trailing-icon, [mcTagTrailingIcon]", host: { classAttribute: "mc-tag-trailing-icon" }, ngImport: i0 });
55
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagTrailingIcon, decorators: [{
56
56
  type: Directive,
57
57
  args: [{
58
58
  selector: 'mc-tag-trailing-icon, [mcTagTrailingIcon]',
59
59
  host: { class: 'mc-tag-trailing-icon' }
60
60
  }]
61
61
  }] });
62
- /**
63
- *
64
- * Example:
65
- *
66
- * `<mc-tag>
67
- * <mc-icon mcTagRemove>cancel</mc-icon>
68
- * </mc-tag>`
69
- *
70
- * You *may* use a custom icon, but you may need to override the `mc-tag-remove` positioning
71
- * styles to properly center the icon within the tag.
72
- */
73
- class McTagRemove {
74
- constructor(parentTag) {
75
- this.parentTag = parentTag;
76
- }
77
- focus($event) {
78
- $event.stopPropagation();
79
- }
80
- /** Calls the parent tag's public `remove()` method if applicable. */
81
- handleClick(event) {
82
- if (this.parentTag.removable) {
83
- this.parentTag.hasFocus = true;
84
- this.parentTag.remove();
85
- }
86
- // We need to stop event propagation because otherwise the event will bubble up to the
87
- // form field and cause the `onContainerClick` method to be invoked. This method would then
88
- // reset the focused tag that has been focused after tag removal. Usually the parent
89
- // the parent click listener of the `McTag` would prevent propagation, but it can happen
90
- // that the tag is being removed before the event bubbles up.
91
- event.stopPropagation();
92
- }
93
- }
94
- /** @nocollapse */ /** @nocollapse */ McTagRemove.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagRemove, deps: [{ token: forwardRef(() => McTag) }], target: i0.ɵɵFactoryTarget.Directive });
95
- /** @nocollapse */ /** @nocollapse */ McTagRemove.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: McTagRemove, selector: "[mcTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "mc-tag-remove mc-tag-trailing-icon" }, ngImport: i0 });
96
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagRemove, decorators: [{
97
- type: Directive,
98
- args: [{
99
- selector: '[mcTagRemove]',
100
- host: {
101
- class: 'mc-tag-remove mc-tag-trailing-icon',
102
- '[attr.tabindex]': '-1',
103
- '(click)': 'handleClick($event)',
104
- '(focus)': 'focus($event)'
105
- }
106
- }]
107
- }], ctorParameters: function () { return [{ type: McTag, decorators: [{
108
- type: Inject,
109
- args: [forwardRef(() => McTag)]
110
- }] }]; } });
111
62
  class McTagBase {
112
63
  // tslint:disable-next-line:naming-convention
113
64
  constructor(_elementRef) {
@@ -205,15 +156,13 @@ class McTag extends McTagMixinBase {
205
156
  const icons = this.contentChildren.map((item) => item._elementRef.nativeElement);
206
157
  if (icons.length === 1) {
207
158
  const iconElement = icons[0];
208
- if (!iconElement.previousElementSibling && !iconElement.nextElementSibling) {
209
- if (iconElement.nextSibling) {
210
- iconElement.classList.add('mc-icon_left');
211
- this.nativeElement.classList.add('mc-left-icon');
212
- }
213
- if (iconElement.previousSibling) {
214
- iconElement.classList.add('mc-icon_right');
215
- this.nativeElement.classList.add('mc-right-icon');
216
- }
159
+ if (iconElement.classList.contains('mc-tag-remove')) {
160
+ iconElement.classList.add('mc-icon_right');
161
+ this.nativeElement.classList.add('mc-right-icon');
162
+ }
163
+ else {
164
+ iconElement.classList.add('mc-icon_left');
165
+ this.nativeElement.classList.add('mc-left-icon');
217
166
  }
218
167
  }
219
168
  else if (icons.length > 1) {
@@ -340,9 +289,9 @@ class McTag extends McTagMixinBase {
340
289
  });
341
290
  }
342
291
  }
343
- /** @nocollapse */ /** @nocollapse */ McTag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTag, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
344
- /** @nocollapse */ /** @nocollapse */ McTag.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: McTag, selector: "mc-tag, [mc-tag], mc-basic-tag, [mc-basic-tag]", inputs: { color: "color", selected: "selected", value: "value", selectable: "selectable", removable: "removable", disabled: "disabled" }, outputs: { selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeydown($event)", "focus": "focus()", "blur": "blur()" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.mc-selected": "selected", "class.mc-focused": "hasFocus", "class.mc-tag-with-avatar": "avatar", "class.mc-tag-with-icon": "contentChildren", "class.mc-tag-with-trailing-icon": "trailingIcon || removeIcon", "class.mc-disabled": "disabled" }, classAttribute: "mc-tag" }, queries: [{ propertyName: "avatar", first: true, predicate: McTagAvatar, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: McTagTrailingIcon, descendants: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(function () { return McTagRemove; }), descendants: true }, { propertyName: "contentChildren", predicate: McIcon }], exportAs: ["mcTag"], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-tag__wrapper\">\n <span class=\"mc-tag__text\"><ng-content></ng-content></span>\n <ng-content select=\"[mc-icon]\"></ng-content>\n <div class=\"mc-tag-overlay\"></div>\n</div>\n", styles: [".mc-tag{position:relative;display:inline-block;overflow:hidden;margin:var(--mc-tags-size-margin, 2px);height:var(--mc-tags-size-height, 24px);border-width:var(--mc-tags-size-border-width, 1px);border-style:solid;border-radius:var(--mc-tags-size-border-radius, 4px);cursor:default;outline:none;box-sizing:border-box}.mc-tag .mc-icon:hover{cursor:pointer}.mc-tag.mc-disabled .mc-icon:hover{cursor:default}.mc-tag.mc-left-icon{padding-left:var(--mc-tags-size-icon-padding, 3px)}.mc-tag.mc-right-icon{padding-right:var(--mc-tags-size-icon-padding, 3px)}.mc-tag .mc-tag__text{margin-left:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px));text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mc-tag:not(.mc-tag-with-icon) .mc-tag__text{margin-right:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}.mc-tag__wrapper .mc-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--mc-tags-size-height, 24px);height:var(--mc-tags-size-height, 24px)}.mc-tag__wrapper .mc-icon_left{margin-right:var(--mc-tags-size-icon-padding, 3px)}.mc-tag__wrapper .mc-icon_right{margin-left:var(--mc-tags-size-icon-padding, 3px)}.mc-tag-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border-radius:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
345
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTag, decorators: [{
292
+ /** @nocollapse */ /** @nocollapse */ McTag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTag, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
293
+ /** @nocollapse */ /** @nocollapse */ McTag.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.7", type: McTag, selector: "mc-tag, [mc-tag], mc-basic-tag, [mc-basic-tag]", inputs: { color: "color", selected: "selected", value: "value", selectable: "selectable", removable: "removable", disabled: "disabled" }, outputs: { selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeydown($event)", "focus": "focus()", "blur": "blur()" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.mc-selected": "selected", "class.mc-focused": "hasFocus", "class.mc-tag-with-avatar": "avatar", "class.mc-tag-with-icon": "contentChildren", "class.mc-tag-with-trailing-icon": "trailingIcon || removeIcon", "class.mc-disabled": "disabled" }, classAttribute: "mc-tag" }, queries: [{ propertyName: "avatar", first: true, predicate: McTagAvatar, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: McTagTrailingIcon, descendants: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(function () { return McTagRemove; }), descendants: true }, { propertyName: "contentChildren", predicate: McIcon }], exportAs: ["mcTag"], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-tag__wrapper\">\n <ng-content select=\"[mc-icon]:not([mcTagRemove])\"></ng-content>\n <span class=\"mc-tag__text\"><ng-content></ng-content></span>\n <ng-content select=\"[mcTagRemove]\"></ng-content>\n</div>\n<div class=\"mc-tag-overlay\"></div> \n", styles: [".mc-tag{position:relative;display:inline-block;overflow:hidden;margin:var(--mc-tags-size-margin, 2px);height:var(--mc-tags-size-height, 24px);border-width:var(--mc-tags-size-border-width, 1px);border-style:solid;border-radius:var(--mc-tags-size-border-radius, 4px);cursor:default;outline:none;box-sizing:border-box}.mc-tag .mc-icon.mc-tag-remove:hover{cursor:pointer}.mc-tag.mc-disabled .mc-icon.mc-tag-remove:hover{cursor:default}.mc-tag .mc-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mc-tag:not(.mc-tag-with-icon) .mc-tag__text{margin-right:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}.mc-tag__wrapper .mc-icon.mc-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:var(--mc-tags-size-height, 24px);padding-left:var(--mc-tags-size-icon-padding, 4px);padding-right:var(--mc-tags-size-icon-padding, 4px)}.mc-tag__wrapper .mc-icon_left{margin-right:var(--mc-tags-size-icon-padding, 4px)}.mc-tag__wrapper>.mc-icon:first-child{margin-left:calc(var(--mc-tags-size-icon-padding, 4px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper>.mc-tag__text:last-child{margin-right:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper>.mc-tag__text:first-child{margin-left:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border-radius:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
294
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTag, decorators: [{
346
295
  type: Component,
347
296
  args: [{ selector: 'mc-tag, [mc-tag], mc-basic-tag, [mc-basic-tag]', exportAs: 'mcTag', inputs: ['color'], host: {
348
297
  class: 'mc-tag',
@@ -358,7 +307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
358
307
  '(keydown)': 'handleKeydown($event)',
359
308
  '(focus)': 'focus()',
360
309
  '(blur)': 'blur()'
361
- }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-tag__wrapper\">\n <span class=\"mc-tag__text\"><ng-content></ng-content></span>\n <ng-content select=\"[mc-icon]\"></ng-content>\n <div class=\"mc-tag-overlay\"></div>\n</div>\n", styles: [".mc-tag{position:relative;display:inline-block;overflow:hidden;margin:var(--mc-tags-size-margin, 2px);height:var(--mc-tags-size-height, 24px);border-width:var(--mc-tags-size-border-width, 1px);border-style:solid;border-radius:var(--mc-tags-size-border-radius, 4px);cursor:default;outline:none;box-sizing:border-box}.mc-tag .mc-icon:hover{cursor:pointer}.mc-tag.mc-disabled .mc-icon:hover{cursor:default}.mc-tag.mc-left-icon{padding-left:var(--mc-tags-size-icon-padding, 3px)}.mc-tag.mc-right-icon{padding-right:var(--mc-tags-size-icon-padding, 3px)}.mc-tag .mc-tag__text{margin-left:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px));text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mc-tag:not(.mc-tag-with-icon) .mc-tag__text{margin-right:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}.mc-tag__wrapper .mc-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--mc-tags-size-height, 24px);height:var(--mc-tags-size-height, 24px)}.mc-tag__wrapper .mc-icon_left{margin-right:var(--mc-tags-size-icon-padding, 3px)}.mc-tag__wrapper .mc-icon_right{margin-left:var(--mc-tags-size-icon-padding, 3px)}.mc-tag-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border-radius:inherit}\n"] }]
310
+ }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-tag__wrapper\">\n <ng-content select=\"[mc-icon]:not([mcTagRemove])\"></ng-content>\n <span class=\"mc-tag__text\"><ng-content></ng-content></span>\n <ng-content select=\"[mcTagRemove]\"></ng-content>\n</div>\n<div class=\"mc-tag-overlay\"></div> \n", styles: [".mc-tag{position:relative;display:inline-block;overflow:hidden;margin:var(--mc-tags-size-margin, 2px);height:var(--mc-tags-size-height, 24px);border-width:var(--mc-tags-size-border-width, 1px);border-style:solid;border-radius:var(--mc-tags-size-border-radius, 4px);cursor:default;outline:none;box-sizing:border-box}.mc-tag .mc-icon.mc-tag-remove:hover{cursor:pointer}.mc-tag.mc-disabled .mc-icon.mc-tag-remove:hover{cursor:default}.mc-tag .mc-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mc-tag:not(.mc-tag-with-icon) .mc-tag__text{margin-right:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}.mc-tag__wrapper .mc-icon.mc-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:var(--mc-tags-size-height, 24px);padding-left:var(--mc-tags-size-icon-padding, 4px);padding-right:var(--mc-tags-size-icon-padding, 4px)}.mc-tag__wrapper .mc-icon_left{margin-right:var(--mc-tags-size-icon-padding, 4px)}.mc-tag__wrapper>.mc-icon:first-child{margin-left:calc(var(--mc-tags-size-icon-padding, 4px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper>.mc-tag__text:last-child{margin-right:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper>.mc-tag__text:first-child{margin-left:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border-radius:inherit}\n"] }]
362
311
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { contentChildren: [{
363
312
  type: ContentChildren,
364
313
  args: [McIcon]
@@ -388,6 +337,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
388
337
  }], disabled: [{
389
338
  type: Input
390
339
  }] } });
340
+ /**
341
+ *
342
+ * Example:
343
+ *
344
+ * `<mc-tag>
345
+ * <mc-icon mcTagRemove>cancel</mc-icon>
346
+ * </mc-tag>`
347
+ *
348
+ * You *may* use a custom icon, but you may need to override the `mc-tag-remove` positioning
349
+ * styles to properly center the icon within the tag.
350
+ */
351
+ class McTagRemove {
352
+ constructor(parentTag) {
353
+ this.parentTag = parentTag;
354
+ }
355
+ focus($event) {
356
+ $event.stopPropagation();
357
+ }
358
+ /** Calls the parent tag's public `remove()` method if applicable. */
359
+ handleClick(event) {
360
+ if (this.parentTag.removable) {
361
+ this.parentTag.hasFocus = true;
362
+ this.parentTag.remove();
363
+ }
364
+ // We need to stop event propagation because otherwise the event will bubble up to the
365
+ // form field and cause the `onContainerClick` method to be invoked. This method would then
366
+ // reset the focused tag that has been focused after tag removal. Usually the parent
367
+ // the parent click listener of the `McTag` would prevent propagation, but it can happen
368
+ // that the tag is being removed before the event bubbles up.
369
+ event.stopPropagation();
370
+ }
371
+ }
372
+ /** @nocollapse */ /** @nocollapse */ McTagRemove.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagRemove, deps: [{ token: forwardRef(() => McTag) }], target: i0.ɵɵFactoryTarget.Directive });
373
+ /** @nocollapse */ /** @nocollapse */ McTagRemove.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTagRemove, selector: "[mcTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "mc-tag-remove mc-tag-trailing-icon" }, ngImport: i0 });
374
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagRemove, decorators: [{
375
+ type: Directive,
376
+ args: [{
377
+ selector: '[mcTagRemove]',
378
+ host: {
379
+ class: 'mc-tag-remove mc-tag-trailing-icon',
380
+ '[attr.tabindex]': '-1',
381
+ '(click)': 'handleClick($event)',
382
+ '(focus)': 'focus($event)'
383
+ }
384
+ }]
385
+ }], ctorParameters: function () { return [{ type: McTag, decorators: [{
386
+ type: Inject,
387
+ args: [forwardRef(() => McTag)]
388
+ }] }]; } });
391
389
 
392
390
  class McTagListBase {
393
391
  constructor(defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl) {
@@ -594,7 +592,7 @@ class McTagList extends McTagListMixinBase {
594
592
  }
595
593
  ngAfterContentInit() {
596
594
  if (this.mcValidation.useValidation) {
597
- setMosaicValidation(this);
595
+ setMosaicValidation(this, this.changeDetectorRef);
598
596
  }
599
597
  this.keyManager = new FocusKeyManager(this.tags)
600
598
  .withVerticalOrientation()
@@ -1015,9 +1013,9 @@ class McTagList extends McTagListMixinBase {
1015
1013
  }
1016
1014
  }
1017
1015
  }
1018
- /** @nocollapse */ /** @nocollapse */ McTagList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ErrorStateMatcher }, { token: NG_VALIDATORS, optional: true }, { token: MC_VALIDATION, optional: true }, { token: i2.Directionality, optional: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }, { token: i3.NgModel, optional: true, self: true }, { token: i3.FormControlName, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
1019
- /** @nocollapse */ /** @nocollapse */ McTagList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: McTagList, selector: "mc-tag-list", inputs: { multiple: "multiple", compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: "disabled", selectable: "selectable", tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher", orientation: "orientation" }, outputs: { valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.mc-disabled": "disabled", "class.mc-invalid": "errorState", "attr.tabindex": "disabled ? null : tabIndex", "id": "uid" }, classAttribute: "mc-tag-list" }, providers: [{ provide: McFormFieldControl, useExisting: McTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["mcTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: McTag, descendants: true }], exportAs: ["mcTagList"], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-tags-list__list-container\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"mc-tags-list__cleaner\"\n *ngIf=\"canShowCleaner\">\n <ng-content select=\"mc-cleaner\"></ng-content>\n</div>\n", styles: [".mc-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.mc-tag-input{border:none;outline:none;background:transparent}.mc-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;min-height:var(--mc-tag-list-size-min-height, 30px);padding:var(--mc-tag-list-size-padding, 1px 6px)}.mc-tags-list__list-container .mc-tag-input{max-width:100%;flex:1 1 auto;height:var(--mc-tag-input-size-height, 22px);margin:var(--mc-tag-input-size-margin, 2px 4px)}.mc-tags-list__cleaner .mc-cleaner{height:30px}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1020
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagList, decorators: [{
1016
+ /** @nocollapse */ /** @nocollapse */ McTagList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ErrorStateMatcher }, { token: NG_VALIDATORS, optional: true }, { token: MC_VALIDATION, optional: true }, { token: i2.Directionality, optional: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }, { token: i3.NgModel, optional: true, self: true }, { token: i3.FormControlName, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
1017
+ /** @nocollapse */ /** @nocollapse */ McTagList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.7", type: McTagList, selector: "mc-tag-list", inputs: { multiple: "multiple", compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: "disabled", selectable: "selectable", tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher", orientation: "orientation" }, outputs: { valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.mc-disabled": "disabled", "class.mc-invalid": "errorState", "attr.tabindex": "disabled ? null : tabIndex", "id": "uid" }, classAttribute: "mc-tag-list" }, providers: [{ provide: McFormFieldControl, useExisting: McTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["mcTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: McTag, descendants: true }], exportAs: ["mcTagList"], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-tags-list__list-container\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"mc-tags-list__cleaner\"\n *ngIf=\"canShowCleaner\">\n <ng-content select=\"mc-cleaner\"></ng-content>\n</div>\n", styles: [".mc-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.mc-tag-input{border:none;outline:none;background:transparent}.mc-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;min-height:calc(var(--mc-form-field-size-height, 32px) - var(--mc-form-field-size-border-width, 1px) * 2);padding:var(--mc-tag-list-size-padding, 1px 12px)}.mc-tags-list__list-container .mc-tag-input{max-width:100%;flex:1 1 auto;height:var(--mc-tag-input-size-height, 22px);margin:var(--mc-tag-input-size-margin, 2px 4px)}.mc-tags-list__cleaner .mc-cleaner{height:30px}\n"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
1018
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagList, decorators: [{
1021
1019
  type: Component,
1022
1020
  args: [{ selector: 'mc-tag-list', exportAs: 'mcTagList', host: {
1023
1021
  class: 'mc-tag-list',
@@ -1028,7 +1026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
1028
1026
  '(focus)': 'focus()',
1029
1027
  '(blur)': 'blur()',
1030
1028
  '(keydown)': 'keydown($event)'
1031
- }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: McFormFieldControl, useExisting: McTagList }], template: "<div class=\"mc-tags-list__list-container\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"mc-tags-list__cleaner\"\n *ngIf=\"canShowCleaner\">\n <ng-content select=\"mc-cleaner\"></ng-content>\n</div>\n", styles: [".mc-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.mc-tag-input{border:none;outline:none;background:transparent}.mc-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;min-height:var(--mc-tag-list-size-min-height, 30px);padding:var(--mc-tag-list-size-padding, 1px 6px)}.mc-tags-list__list-container .mc-tag-input{max-width:100%;flex:1 1 auto;height:var(--mc-tag-input-size-height, 22px);margin:var(--mc-tag-input-size-margin, 2px 4px)}.mc-tags-list__cleaner .mc-cleaner{height:30px}\n"] }]
1029
+ }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: McFormFieldControl, useExisting: McTagList }], template: "<div class=\"mc-tags-list__list-container\">\n <ng-content></ng-content>\n</div>\n\n<div class=\"mc-tags-list__cleaner\"\n *ngIf=\"canShowCleaner\">\n <ng-content select=\"mc-cleaner\"></ng-content>\n</div>\n", styles: [".mc-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.mc-tag-input{border:none;outline:none;background:transparent}.mc-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;min-height:calc(var(--mc-form-field-size-height, 32px) - var(--mc-form-field-size-border-width, 1px) * 2);padding:var(--mc-tag-list-size-padding, 1px 12px)}.mc-tags-list__list-container .mc-tag-input{max-width:100%;flex:1 1 auto;height:var(--mc-tag-input-size-height, 22px);margin:var(--mc-tag-input-size-margin, 2px 4px)}.mc-tags-list__cleaner .mc-cleaner{height:30px}\n"] }]
1032
1030
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ErrorStateMatcher }, { type: undefined, decorators: [{
1033
1031
  type: Optional
1034
1032
  }, {
@@ -1269,9 +1267,9 @@ class McTagInput {
1269
1267
  return this.separatorKeyCodes.indexOf(event.keyCode) > -1;
1270
1268
  }
1271
1269
  }
1272
- /** @nocollapse */ /** @nocollapse */ McTagInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MC_TAGS_DEFAULT_OPTIONS }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
1273
- /** @nocollapse */ /** @nocollapse */ McTagInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: McTagInput, selector: "input[mcTagInputFor]", inputs: { separatorKeyCodes: ["mcTagInputSeparatorKeyCodes", "separatorKeyCodes"], placeholder: "placeholder", id: "id", tagList: ["mcTagInputFor", "tagList"], addOnBlur: ["mcTagInputAddOnBlur", "addOnBlur"], disabled: "disabled" }, outputs: { tagEnd: "mcTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur()", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "mc-tag-input" }, exportAs: ["mcTagInput", "mcTagInputFor"], usesOnChanges: true, ngImport: i0 });
1274
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagInput, decorators: [{
1270
+ /** @nocollapse */ /** @nocollapse */ McTagInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MC_TAGS_DEFAULT_OPTIONS }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
1271
+ /** @nocollapse */ /** @nocollapse */ McTagInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTagInput, selector: "input[mcTagInputFor]", inputs: { separatorKeyCodes: ["mcTagInputSeparatorKeyCodes", "separatorKeyCodes"], placeholder: "placeholder", id: "id", tagList: ["mcTagInputFor", "tagList"], addOnBlur: ["mcTagInputAddOnBlur", "addOnBlur"], disabled: "disabled" }, outputs: { tagEnd: "mcTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur()", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "mc-tag-input" }, exportAs: ["mcTagInput", "mcTagInputFor"], usesOnChanges: true, ngImport: i0 });
1272
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagInput, decorators: [{
1275
1273
  type: Directive,
1276
1274
  args: [{
1277
1275
  selector: 'input[mcTagInputFor]',
@@ -1317,8 +1315,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
1317
1315
 
1318
1316
  class McTagsModule {
1319
1317
  }
1320
- /** @nocollapse */ /** @nocollapse */ McTagsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1321
- /** @nocollapse */ /** @nocollapse */ McTagsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagsModule, declarations: [McTagList,
1318
+ /** @nocollapse */ /** @nocollapse */ McTagsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1319
+ /** @nocollapse */ /** @nocollapse */ McTagsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagsModule, declarations: [McTagList,
1322
1320
  McTag,
1323
1321
  McTagInput,
1324
1322
  McTagTrailingIcon,
@@ -1329,12 +1327,12 @@ class McTagsModule {
1329
1327
  McTagTrailingIcon,
1330
1328
  McTagAvatar,
1331
1329
  McTagRemove] });
1332
- /** @nocollapse */ /** @nocollapse */ McTagsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagsModule, providers: [{
1330
+ /** @nocollapse */ /** @nocollapse */ McTagsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagsModule, providers: [{
1333
1331
  provide: MC_TAGS_DEFAULT_OPTIONS,
1334
1332
  // tslint:disable-next-line: no-object-literal-type-assertion
1335
1333
  useValue: { separatorKeyCodes: [ENTER] }
1336
1334
  }], imports: [[CommonModule, PlatformModule]] });
1337
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagsModule, decorators: [{
1335
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagsModule, decorators: [{
1338
1336
  type: NgModule,
1339
1337
  args: [{
1340
1338
  imports: [CommonModule, PlatformModule],