@ptsecurity/mosaic 15.3.2 → 15.4.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (469) hide show
  1. package/_theming.scss +688 -212
  2. package/_visual.scss +132 -42
  3. package/alert/README.md +0 -0
  4. package/alert/_alert-theme.scss +61 -0
  5. package/alert/alert.component.d.ts +22 -0
  6. package/alert/alert.component.scss +81 -0
  7. package/alert/alert.module.d.ts +10 -0
  8. package/alert/index.d.ts +1 -0
  9. package/alert/public-api.d.ts +2 -0
  10. package/autocomplete/_autocomplete-theme.nvl.scss +21 -0
  11. package/button/_button-base.scss +2 -2
  12. package/button/_button-theme.nvl.scss +180 -0
  13. package/button/_button-theme.scss +0 -2
  14. package/button/button.component.d.ts +12 -3
  15. package/button/button.scss +19 -5
  16. package/button-toggle/_button-toggle-theme.scss +92 -0
  17. package/button-toggle/button-toggle.component.d.ts +6 -2
  18. package/button-toggle/button-toggle.module.d.ts +2 -1
  19. package/button-toggle/button-toggle.scss +110 -82
  20. package/card/_card-theme.nvl.scss +61 -0
  21. package/checkbox/_checkbox-theme.nvl.scss +120 -0
  22. package/checkbox/_checkbox-theme.scss +7 -7
  23. package/checkbox/checkbox.d.ts +2 -1
  24. package/checkbox/checkbox.scss +85 -52
  25. package/code-block/_code-block-theme.nvl.scss +326 -0
  26. package/core/common-behaviors/color.d.ts +13 -2
  27. package/core/common-behaviors/index.d.ts +1 -1
  28. package/core/forms/_forms-theme.nvl.scss +31 -0
  29. package/core/highlight/_highlight-theme.nvl.scss +8 -0
  30. package/core/highlight/_highlight-theme.scss +0 -2
  31. package/core/option/_optgroup-theme.nvl.scss +25 -0
  32. package/core/option/_option-action-theme.nvl.scss +41 -0
  33. package/core/option/_option-theme.nvl.scss +44 -0
  34. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.nvl.scss +48 -0
  35. package/core/selection/pseudo-checkbox/pseudo-checkbox.d.ts +2 -1
  36. package/core/selection/pseudo-checkbox/pseudo-checkbox.scss +26 -6
  37. package/core/styles/_mosaic-theme.nvl.scss +153 -0
  38. package/core/styles/_mosaic-theme.scss +7 -2
  39. package/core/styles/_tokens.scss +4 -4
  40. package/core/styles/theming/_badges-theme.nvl.scss +118 -0
  41. package/core/styles/theming/_badges.nvl.scss +57 -0
  42. package/core/styles/theming/_components-theming.nvl.scss +1185 -0
  43. package/core/styles/theming/_components-theming.scss +92 -0
  44. package/core/styles/theming/_scrollbars-theme.nvl.scss +98 -0
  45. package/core/styles/theming/_scrollbars.nvl.scss +39 -0
  46. package/core/styles/theming/_theming.nvl.scss +137 -0
  47. package/core/styles/theming/prebuilt/dark-theme.nvl.scss +20 -0
  48. package/core/styles/theming/prebuilt/light-theme.nvl.scss +20 -0
  49. package/core/styles/typography/_typography.scss +5 -4
  50. package/core/utils/data-size/config.d.ts +20 -0
  51. package/core/utils/data-size/data-size.pipe.d.ts +13 -0
  52. package/core/utils/data-size/index.d.ts +3 -0
  53. package/core/utils/data-size/size.d.ts +16 -0
  54. package/core/utils/public-api.d.ts +1 -0
  55. package/datepicker/_datepicker-theme.nvl.scss +101 -0
  56. package/datepicker/datepicker-toggle.scss +2 -2
  57. package/divider/_divider-theme.nvl.scss +10 -0
  58. package/divider/_divider-theme.scss +1 -0
  59. package/divider/divider.component.d.ts +4 -1
  60. package/divider/divider.scss +24 -24
  61. package/dl/_dl-theme.nvl.scss +86 -0
  62. package/dl/_dl-theme.scss +0 -1
  63. package/dropdown/_dropdown-theme.nvl.scss +85 -0
  64. package/dropdown/dropdown.scss +3 -3
  65. package/ellipsis-center/ellipsis-center.directive.d.ts +27 -0
  66. package/ellipsis-center/index.d.ts +1 -0
  67. package/ellipsis-center/public-api.d.ts +1 -0
  68. package/esm2020/alert/alert.component.mjs +67 -0
  69. package/esm2020/alert/alert.module.mjs +44 -0
  70. package/esm2020/alert/index.mjs +2 -0
  71. package/esm2020/alert/ptsecurity-mosaic-alert.mjs +5 -0
  72. package/esm2020/alert/public-api.mjs +3 -0
  73. package/esm2020/autocomplete/autocomplete-origin.directive.mjs +3 -3
  74. package/esm2020/autocomplete/autocomplete-trigger.directive.mjs +3 -3
  75. package/esm2020/autocomplete/autocomplete.component.mjs +5 -5
  76. package/esm2020/autocomplete/autocomplete.module.mjs +4 -4
  77. package/esm2020/button/button.component.mjs +37 -19
  78. package/esm2020/button/button.module.mjs +4 -4
  79. package/esm2020/button-toggle/button-toggle.component.mjs +33 -14
  80. package/esm2020/button-toggle/button-toggle.module.mjs +7 -6
  81. package/esm2020/card/card.component.mjs +3 -3
  82. package/esm2020/card/card.module.mjs +4 -4
  83. package/esm2020/checkbox/checkbox-module.mjs +4 -4
  84. package/esm2020/checkbox/checkbox-required-validator.mjs +3 -3
  85. package/esm2020/checkbox/checkbox.mjs +13 -9
  86. package/esm2020/code-block/actionbar.component.mjs +5 -5
  87. package/esm2020/code-block/code-block.component.mjs +4 -4
  88. package/esm2020/code-block/code-block.module.mjs +4 -4
  89. package/esm2020/core/common-behaviors/color.mjs +14 -2
  90. package/esm2020/core/common-behaviors/common-module.mjs +4 -4
  91. package/esm2020/core/common-behaviors/index.mjs +2 -2
  92. package/esm2020/core/error/error-options.mjs +6 -6
  93. package/esm2020/core/formatters/date/formatter.mjs +3 -3
  94. package/esm2020/core/formatters/date/formatter.pipe.mjs +39 -39
  95. package/esm2020/core/formatters/index.mjs +4 -4
  96. package/esm2020/core/formatters/number/formatter.mjs +4 -4
  97. package/esm2020/core/forms/forms-module.mjs +4 -4
  98. package/esm2020/core/forms/forms.directive.mjs +6 -6
  99. package/esm2020/core/highlight/highlight.pipe.mjs +3 -3
  100. package/esm2020/core/highlight/index.mjs +4 -4
  101. package/esm2020/core/line/line.mjs +7 -7
  102. package/esm2020/core/locales/locale-service.mjs +3 -3
  103. package/esm2020/core/locales/locale-service.module.mjs +4 -4
  104. package/esm2020/core/option/action.mjs +3 -3
  105. package/esm2020/core/option/optgroup.mjs +3 -3
  106. package/esm2020/core/option/option-module.mjs +4 -4
  107. package/esm2020/core/option/option.mjs +4 -4
  108. package/esm2020/core/pop-up/pop-up-trigger.mjs +3 -3
  109. package/esm2020/core/pop-up/pop-up.mjs +3 -3
  110. package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +12 -8
  111. package/esm2020/core/selection/pseudo-checkbox/pseudo-checkbox.module.mjs +4 -4
  112. package/esm2020/core/services/measure-scrollbar.service.mjs +3 -3
  113. package/esm2020/core/utils/data-size/config.mjs +22 -0
  114. package/esm2020/core/utils/data-size/data-size.pipe.mjs +32 -0
  115. package/esm2020/core/utils/data-size/index.mjs +4 -0
  116. package/esm2020/core/utils/data-size/size.mjs +50 -0
  117. package/esm2020/core/utils/public-api.mjs +2 -1
  118. package/esm2020/core/version.mjs +2 -2
  119. package/esm2020/datepicker/calendar-body.component.mjs +3 -3
  120. package/esm2020/datepicker/calendar-header.component.mjs +3 -3
  121. package/esm2020/datepicker/calendar.component.mjs +3 -3
  122. package/esm2020/datepicker/datepicker-input.directive.mjs +3 -3
  123. package/esm2020/datepicker/datepicker-intl.mjs +3 -3
  124. package/esm2020/datepicker/datepicker-module.mjs +4 -4
  125. package/esm2020/datepicker/datepicker-toggle.component.mjs +7 -7
  126. package/esm2020/datepicker/datepicker.component.mjs +6 -6
  127. package/esm2020/datepicker/month-view.component.mjs +3 -3
  128. package/esm2020/divider/divider.component.mjs +16 -6
  129. package/esm2020/divider/divider.module.mjs +4 -4
  130. package/esm2020/dl/dl.component.mjs +9 -9
  131. package/esm2020/dl/dl.module.mjs +4 -4
  132. package/esm2020/dropdown/dropdown-content.directive.mjs +3 -3
  133. package/esm2020/dropdown/dropdown-item.component.mjs +5 -5
  134. package/esm2020/dropdown/dropdown-trigger.directive.mjs +3 -3
  135. package/esm2020/dropdown/dropdown.component.mjs +6 -6
  136. package/esm2020/dropdown/dropdown.module.mjs +4 -4
  137. package/esm2020/ellipsis-center/ellipsis-center.directive.mjs +106 -0
  138. package/esm2020/ellipsis-center/index.mjs +2 -0
  139. package/esm2020/ellipsis-center/ptsecurity-mosaic-ellipsis-center.mjs +5 -0
  140. package/esm2020/ellipsis-center/public-api.mjs +2 -0
  141. package/esm2020/file-upload/file-drop.mjs +43 -0
  142. package/esm2020/file-upload/file-upload.mjs +4 -0
  143. package/esm2020/file-upload/file-upload.module.mjs +66 -0
  144. package/esm2020/file-upload/index.mjs +2 -0
  145. package/esm2020/file-upload/multiple-file-upload.component.mjs +161 -0
  146. package/esm2020/file-upload/ptsecurity-mosaic-file-upload.mjs +5 -0
  147. package/esm2020/file-upload/public-api.mjs +6 -0
  148. package/esm2020/file-upload/single-file-upload.component.mjs +130 -0
  149. package/esm2020/form-field/cleaner.mjs +7 -7
  150. package/esm2020/form-field/form-field.mjs +10 -10
  151. package/esm2020/form-field/form-field.module.mjs +4 -4
  152. package/esm2020/form-field/hint.mjs +15 -15
  153. package/esm2020/form-field/password-hint.mjs +4 -4
  154. package/esm2020/form-field/prefix.mjs +3 -3
  155. package/esm2020/form-field/stepper.mjs +3 -3
  156. package/esm2020/form-field/suffix.mjs +3 -3
  157. package/esm2020/form-field/validate.directive.mjs +3 -3
  158. package/esm2020/icon/icon.component.mjs +78 -21
  159. package/esm2020/icon/icon.module.mjs +14 -10
  160. package/esm2020/input/input-number-validators.mjs +6 -6
  161. package/esm2020/input/input-number.mjs +3 -3
  162. package/esm2020/input/input-password.mjs +6 -6
  163. package/esm2020/input/input.mjs +6 -6
  164. package/esm2020/input/input.module.mjs +4 -4
  165. package/esm2020/link/link.component.mjs +14 -4
  166. package/esm2020/link/link.module.mjs +4 -4
  167. package/esm2020/list/list-selection.component.mjs +9 -9
  168. package/esm2020/list/list.component.mjs +7 -7
  169. package/esm2020/list/list.module.mjs +4 -4
  170. package/esm2020/loader-overlay/loader-overlay.component.mjs +12 -12
  171. package/esm2020/loader-overlay/loader-overlay.module.mjs +4 -4
  172. package/esm2020/markdown/markdown.component.mjs +5 -5
  173. package/esm2020/markdown/markdown.module.mjs +4 -4
  174. package/esm2020/markdown/markdown.service.mjs +3 -3
  175. package/esm2020/modal/css-unit.pipe.mjs +3 -3
  176. package/esm2020/modal/modal-control.service.mjs +3 -3
  177. package/esm2020/modal/modal.component.mjs +4 -4
  178. package/esm2020/modal/modal.directive.mjs +12 -12
  179. package/esm2020/modal/modal.module.mjs +4 -4
  180. package/esm2020/modal/modal.service.mjs +3 -3
  181. package/esm2020/navbar/navbar-item.component.mjs +31 -31
  182. package/esm2020/navbar/navbar.component.mjs +9 -9
  183. package/esm2020/navbar/navbar.module.mjs +4 -4
  184. package/esm2020/navbar/vertical-navbar.component.mjs +3 -3
  185. package/esm2020/popover/popover-confirm.component.mjs +8 -8
  186. package/esm2020/popover/popover.component.mjs +7 -7
  187. package/esm2020/popover/popover.module.mjs +4 -4
  188. package/esm2020/progress-bar/progress-bar.component.mjs +3 -3
  189. package/esm2020/progress-bar/progress-bar.module.mjs +4 -4
  190. package/esm2020/progress-spinner/progress-spinner.component.mjs +6 -6
  191. package/esm2020/progress-spinner/progress-spinner.module.mjs +4 -4
  192. package/esm2020/radio/radio.component.mjs +13 -9
  193. package/esm2020/radio/radio.module.mjs +4 -4
  194. package/esm2020/select/select-option.directive.mjs +3 -3
  195. package/esm2020/select/select.component.mjs +22 -22
  196. package/esm2020/select/select.module.mjs +4 -4
  197. package/esm2020/sidebar/sidebar.component.mjs +9 -9
  198. package/esm2020/sidebar/sidebar.module.mjs +4 -4
  199. package/esm2020/sidepanel/sidepanel-container.component.mjs +4 -4
  200. package/esm2020/sidepanel/sidepanel-directives.mjs +17 -17
  201. package/esm2020/sidepanel/sidepanel.module.mjs +4 -4
  202. package/esm2020/sidepanel/sidepanel.service.mjs +3 -3
  203. package/esm2020/splitter/splitter.component.mjs +12 -12
  204. package/esm2020/splitter/splitter.module.mjs +4 -4
  205. package/esm2020/table/table.component.mjs +3 -3
  206. package/esm2020/table/table.module.mjs +4 -4
  207. package/esm2020/tabs/paginated-tab-header.mjs +3 -3
  208. package/esm2020/tabs/tab-body.component.mjs +6 -6
  209. package/esm2020/tabs/tab-content.directive.mjs +3 -3
  210. package/esm2020/tabs/tab-group.component.mjs +18 -18
  211. package/esm2020/tabs/tab-header.component.mjs +4 -4
  212. package/esm2020/tabs/tab-label-wrapper.directive.mjs +3 -3
  213. package/esm2020/tabs/tab-label.directive.mjs +3 -3
  214. package/esm2020/tabs/tab-nav-bar/tab-nav-bar.mjs +7 -7
  215. package/esm2020/tabs/tab.component.mjs +3 -3
  216. package/esm2020/tabs/tabs.module.mjs +4 -4
  217. package/esm2020/tags/tag-input.mjs +3 -3
  218. package/esm2020/tags/tag-list.component.mjs +4 -4
  219. package/esm2020/tags/tag.component.mjs +16 -16
  220. package/esm2020/tags/tag.module.mjs +4 -4
  221. package/esm2020/textarea/textarea.component.mjs +3 -3
  222. package/esm2020/textarea/textarea.module.mjs +4 -4
  223. package/esm2020/timepicker/timepicker.directive.mjs +3 -3
  224. package/esm2020/timepicker/timepicker.module.mjs +4 -4
  225. package/esm2020/timezone/cities-by-filter.pipe.mjs +3 -3
  226. package/esm2020/timezone/timezone-option.component.mjs +3 -3
  227. package/esm2020/timezone/timezone-option.directive.mjs +3 -3
  228. package/esm2020/timezone/timezone-select.component.mjs +8 -8
  229. package/esm2020/timezone/timezone.module.mjs +4 -4
  230. package/esm2020/timezone/utc-offset.pipe.mjs +3 -3
  231. package/esm2020/title/title.directive.mjs +3 -3
  232. package/esm2020/title/title.module.mjs +4 -4
  233. package/esm2020/toast/toast-container.component.mjs +3 -3
  234. package/esm2020/toast/toast.component.mjs +5 -5
  235. package/esm2020/toast/toast.module.mjs +4 -4
  236. package/esm2020/toast/toast.service.mjs +3 -3
  237. package/esm2020/toggle/toggle.component.mjs +17 -13
  238. package/esm2020/toggle/toggle.module.mjs +4 -4
  239. package/esm2020/tooltip/tooltip.component.mjs +26 -17
  240. package/esm2020/tooltip/tooltip.module.mjs +4 -4
  241. package/esm2020/tree/node.mjs +3 -3
  242. package/esm2020/tree/outlet.mjs +3 -3
  243. package/esm2020/tree/padding.directive.mjs +3 -3
  244. package/esm2020/tree/toggle.mjs +9 -9
  245. package/esm2020/tree/tree-base.mjs +6 -6
  246. package/esm2020/tree/tree-option.component.mjs +4 -4
  247. package/esm2020/tree/tree-selection.component.mjs +3 -3
  248. package/esm2020/tree/tree.mjs +3 -3
  249. package/esm2020/tree/tree.module.mjs +4 -4
  250. package/esm2020/tree-select/tree-select.component.mjs +16 -13
  251. package/esm2020/tree-select/tree-select.module.mjs +4 -4
  252. package/fesm2015/ptsecurity-mosaic-alert.mjs +115 -0
  253. package/fesm2015/ptsecurity-mosaic-alert.mjs.map +1 -0
  254. package/fesm2015/ptsecurity-mosaic-autocomplete.mjs +15 -15
  255. package/fesm2015/ptsecurity-mosaic-button-toggle.mjs +38 -18
  256. package/fesm2015/ptsecurity-mosaic-button-toggle.mjs.map +1 -1
  257. package/fesm2015/ptsecurity-mosaic-button.mjs +41 -23
  258. package/fesm2015/ptsecurity-mosaic-button.mjs.map +1 -1
  259. package/fesm2015/ptsecurity-mosaic-card.mjs +7 -7
  260. package/fesm2015/ptsecurity-mosaic-checkbox.mjs +19 -15
  261. package/fesm2015/ptsecurity-mosaic-checkbox.mjs.map +1 -1
  262. package/fesm2015/ptsecurity-mosaic-code-block.mjs +12 -12
  263. package/fesm2015/ptsecurity-mosaic-code-block.mjs.map +1 -1
  264. package/fesm2015/ptsecurity-mosaic-core.mjs +242 -127
  265. package/fesm2015/ptsecurity-mosaic-core.mjs.map +1 -1
  266. package/fesm2015/ptsecurity-mosaic-datepicker.mjs +35 -35
  267. package/fesm2015/ptsecurity-mosaic-datepicker.mjs.map +1 -1
  268. package/fesm2015/ptsecurity-mosaic-divider.mjs +19 -9
  269. package/fesm2015/ptsecurity-mosaic-divider.mjs.map +1 -1
  270. package/fesm2015/ptsecurity-mosaic-dl.mjs +13 -13
  271. package/fesm2015/ptsecurity-mosaic-dropdown.mjs +20 -20
  272. package/fesm2015/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  273. package/fesm2015/ptsecurity-mosaic-ellipsis-center.mjs +113 -0
  274. package/fesm2015/ptsecurity-mosaic-ellipsis-center.mjs.map +1 -0
  275. package/fesm2015/ptsecurity-mosaic-file-upload.mjs +392 -0
  276. package/fesm2015/ptsecurity-mosaic-file-upload.mjs.map +1 -0
  277. package/fesm2015/ptsecurity-mosaic-form-field.mjs +49 -49
  278. package/fesm2015/ptsecurity-mosaic-form-field.mjs.map +1 -1
  279. package/fesm2015/ptsecurity-mosaic-icon.mjs +93 -29
  280. package/fesm2015/ptsecurity-mosaic-icon.mjs.map +1 -1
  281. package/fesm2015/ptsecurity-mosaic-input.mjs +25 -25
  282. package/fesm2015/ptsecurity-mosaic-link.mjs +17 -7
  283. package/fesm2015/ptsecurity-mosaic-link.mjs.map +1 -1
  284. package/fesm2015/ptsecurity-mosaic-list.mjs +20 -20
  285. package/fesm2015/ptsecurity-mosaic-list.mjs.map +1 -1
  286. package/fesm2015/ptsecurity-mosaic-loader-overlay.mjs +16 -16
  287. package/fesm2015/ptsecurity-mosaic-markdown.mjs +12 -12
  288. package/fesm2015/ptsecurity-mosaic-modal.mjs +29 -29
  289. package/fesm2015/ptsecurity-mosaic-modal.mjs.map +1 -1
  290. package/fesm2015/ptsecurity-mosaic-navbar.mjs +47 -47
  291. package/fesm2015/ptsecurity-mosaic-navbar.mjs.map +1 -1
  292. package/fesm2015/ptsecurity-mosaic-popover.mjs +18 -18
  293. package/fesm2015/ptsecurity-mosaic-popover.mjs.map +1 -1
  294. package/fesm2015/ptsecurity-mosaic-progress-bar.mjs +7 -7
  295. package/fesm2015/ptsecurity-mosaic-progress-spinner.mjs +9 -9
  296. package/fesm2015/ptsecurity-mosaic-progress-spinner.mjs.map +1 -1
  297. package/fesm2015/ptsecurity-mosaic-radio.mjs +16 -12
  298. package/fesm2015/ptsecurity-mosaic-radio.mjs.map +1 -1
  299. package/fesm2015/ptsecurity-mosaic-select.mjs +28 -28
  300. package/fesm2015/ptsecurity-mosaic-select.mjs.map +1 -1
  301. package/fesm2015/ptsecurity-mosaic-sidebar.mjs +13 -13
  302. package/fesm2015/ptsecurity-mosaic-sidepanel.mjs +27 -27
  303. package/fesm2015/ptsecurity-mosaic-sidepanel.mjs.map +1 -1
  304. package/fesm2015/ptsecurity-mosaic-splitter.mjs +16 -16
  305. package/fesm2015/ptsecurity-mosaic-table.mjs +7 -7
  306. package/fesm2015/ptsecurity-mosaic-tabs.mjs +54 -54
  307. package/fesm2015/ptsecurity-mosaic-tabs.mjs.map +1 -1
  308. package/fesm2015/ptsecurity-mosaic-tags.mjs +26 -26
  309. package/fesm2015/ptsecurity-mosaic-tags.mjs.map +1 -1
  310. package/fesm2015/ptsecurity-mosaic-textarea.mjs +7 -7
  311. package/fesm2015/ptsecurity-mosaic-timepicker.mjs +7 -7
  312. package/fesm2015/ptsecurity-mosaic-timezone.mjs +24 -24
  313. package/fesm2015/ptsecurity-mosaic-timezone.mjs.map +1 -1
  314. package/fesm2015/ptsecurity-mosaic-title.mjs +7 -7
  315. package/fesm2015/ptsecurity-mosaic-toast.mjs +14 -14
  316. package/fesm2015/ptsecurity-mosaic-toast.mjs.map +1 -1
  317. package/fesm2015/ptsecurity-mosaic-toggle.mjs +21 -17
  318. package/fesm2015/ptsecurity-mosaic-toggle.mjs.map +1 -1
  319. package/fesm2015/ptsecurity-mosaic-tooltip.mjs +29 -20
  320. package/fesm2015/ptsecurity-mosaic-tooltip.mjs.map +1 -1
  321. package/fesm2015/ptsecurity-mosaic-tree-select.mjs +19 -16
  322. package/fesm2015/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  323. package/fesm2015/ptsecurity-mosaic-tree.mjs +38 -38
  324. package/fesm2015/ptsecurity-mosaic-tree.mjs.map +1 -1
  325. package/fesm2020/ptsecurity-mosaic-alert.mjs +115 -0
  326. package/fesm2020/ptsecurity-mosaic-alert.mjs.map +1 -0
  327. package/fesm2020/ptsecurity-mosaic-autocomplete.mjs +15 -15
  328. package/fesm2020/ptsecurity-mosaic-button-toggle.mjs +38 -18
  329. package/fesm2020/ptsecurity-mosaic-button-toggle.mjs.map +1 -1
  330. package/fesm2020/ptsecurity-mosaic-button.mjs +41 -23
  331. package/fesm2020/ptsecurity-mosaic-button.mjs.map +1 -1
  332. package/fesm2020/ptsecurity-mosaic-card.mjs +7 -7
  333. package/fesm2020/ptsecurity-mosaic-checkbox.mjs +19 -15
  334. package/fesm2020/ptsecurity-mosaic-checkbox.mjs.map +1 -1
  335. package/fesm2020/ptsecurity-mosaic-code-block.mjs +12 -12
  336. package/fesm2020/ptsecurity-mosaic-code-block.mjs.map +1 -1
  337. package/fesm2020/ptsecurity-mosaic-core.mjs +242 -127
  338. package/fesm2020/ptsecurity-mosaic-core.mjs.map +1 -1
  339. package/fesm2020/ptsecurity-mosaic-datepicker.mjs +36 -35
  340. package/fesm2020/ptsecurity-mosaic-datepicker.mjs.map +1 -1
  341. package/fesm2020/ptsecurity-mosaic-divider.mjs +19 -9
  342. package/fesm2020/ptsecurity-mosaic-divider.mjs.map +1 -1
  343. package/fesm2020/ptsecurity-mosaic-dl.mjs +13 -13
  344. package/fesm2020/ptsecurity-mosaic-dropdown.mjs +20 -20
  345. package/fesm2020/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  346. package/fesm2020/ptsecurity-mosaic-ellipsis-center.mjs +111 -0
  347. package/fesm2020/ptsecurity-mosaic-ellipsis-center.mjs.map +1 -0
  348. package/fesm2020/ptsecurity-mosaic-file-upload.mjs +388 -0
  349. package/fesm2020/ptsecurity-mosaic-file-upload.mjs.map +1 -0
  350. package/fesm2020/ptsecurity-mosaic-form-field.mjs +49 -49
  351. package/fesm2020/ptsecurity-mosaic-form-field.mjs.map +1 -1
  352. package/fesm2020/ptsecurity-mosaic-icon.mjs +89 -29
  353. package/fesm2020/ptsecurity-mosaic-icon.mjs.map +1 -1
  354. package/fesm2020/ptsecurity-mosaic-input.mjs +25 -25
  355. package/fesm2020/ptsecurity-mosaic-link.mjs +17 -7
  356. package/fesm2020/ptsecurity-mosaic-link.mjs.map +1 -1
  357. package/fesm2020/ptsecurity-mosaic-list.mjs +20 -20
  358. package/fesm2020/ptsecurity-mosaic-list.mjs.map +1 -1
  359. package/fesm2020/ptsecurity-mosaic-loader-overlay.mjs +16 -16
  360. package/fesm2020/ptsecurity-mosaic-markdown.mjs +12 -12
  361. package/fesm2020/ptsecurity-mosaic-modal.mjs +29 -29
  362. package/fesm2020/ptsecurity-mosaic-modal.mjs.map +1 -1
  363. package/fesm2020/ptsecurity-mosaic-navbar.mjs +47 -47
  364. package/fesm2020/ptsecurity-mosaic-navbar.mjs.map +1 -1
  365. package/fesm2020/ptsecurity-mosaic-popover.mjs +18 -18
  366. package/fesm2020/ptsecurity-mosaic-popover.mjs.map +1 -1
  367. package/fesm2020/ptsecurity-mosaic-progress-bar.mjs +7 -7
  368. package/fesm2020/ptsecurity-mosaic-progress-spinner.mjs +9 -9
  369. package/fesm2020/ptsecurity-mosaic-progress-spinner.mjs.map +1 -1
  370. package/fesm2020/ptsecurity-mosaic-radio.mjs +16 -12
  371. package/fesm2020/ptsecurity-mosaic-radio.mjs.map +1 -1
  372. package/fesm2020/ptsecurity-mosaic-select.mjs +28 -28
  373. package/fesm2020/ptsecurity-mosaic-select.mjs.map +1 -1
  374. package/fesm2020/ptsecurity-mosaic-sidebar.mjs +13 -13
  375. package/fesm2020/ptsecurity-mosaic-sidepanel.mjs +27 -27
  376. package/fesm2020/ptsecurity-mosaic-sidepanel.mjs.map +1 -1
  377. package/fesm2020/ptsecurity-mosaic-splitter.mjs +16 -16
  378. package/fesm2020/ptsecurity-mosaic-table.mjs +7 -7
  379. package/fesm2020/ptsecurity-mosaic-tabs.mjs +54 -54
  380. package/fesm2020/ptsecurity-mosaic-tabs.mjs.map +1 -1
  381. package/fesm2020/ptsecurity-mosaic-tags.mjs +26 -26
  382. package/fesm2020/ptsecurity-mosaic-tags.mjs.map +1 -1
  383. package/fesm2020/ptsecurity-mosaic-textarea.mjs +7 -7
  384. package/fesm2020/ptsecurity-mosaic-timepicker.mjs +7 -7
  385. package/fesm2020/ptsecurity-mosaic-timezone.mjs +24 -24
  386. package/fesm2020/ptsecurity-mosaic-timezone.mjs.map +1 -1
  387. package/fesm2020/ptsecurity-mosaic-title.mjs +7 -7
  388. package/fesm2020/ptsecurity-mosaic-toast.mjs +14 -14
  389. package/fesm2020/ptsecurity-mosaic-toast.mjs.map +1 -1
  390. package/fesm2020/ptsecurity-mosaic-toggle.mjs +21 -17
  391. package/fesm2020/ptsecurity-mosaic-toggle.mjs.map +1 -1
  392. package/fesm2020/ptsecurity-mosaic-tooltip.mjs +29 -20
  393. package/fesm2020/ptsecurity-mosaic-tooltip.mjs.map +1 -1
  394. package/fesm2020/ptsecurity-mosaic-tree-select.mjs +19 -16
  395. package/fesm2020/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  396. package/fesm2020/ptsecurity-mosaic-tree.mjs +38 -38
  397. package/fesm2020/ptsecurity-mosaic-tree.mjs.map +1 -1
  398. package/file-upload/README.md +0 -0
  399. package/file-upload/_file-upload-theme.scss +174 -0
  400. package/file-upload/file-drop.d.ts +11 -0
  401. package/file-upload/file-upload.d.ts +22 -0
  402. package/file-upload/file-upload.module.d.ts +18 -0
  403. package/file-upload/file-upload.scss +46 -0
  404. package/file-upload/index.d.ts +1 -0
  405. package/file-upload/multiple-file-upload.component.d.ts +51 -0
  406. package/file-upload/multiple-file-upload.component.scss +148 -0
  407. package/file-upload/public-api.d.ts +5 -0
  408. package/file-upload/single-file-upload.component.d.ts +34 -0
  409. package/file-upload/single-file-upload.component.scss +60 -0
  410. package/form-field/_form-field-theme.nvl.scss +111 -0
  411. package/form-field/_hint-theme.nvl.scss +67 -0
  412. package/form-field/cleaner.d.ts +2 -2
  413. package/form-field/hint.d.ts +2 -1
  414. package/form-field/hint.scss +15 -0
  415. package/icon/_icon-theme.nvl.scss +267 -0
  416. package/icon/icon.component.d.ts +22 -6
  417. package/icon/icon.module.d.ts +1 -1
  418. package/icon/icon.scss +39 -0
  419. package/input/_input-theme.nvl.scss +56 -0
  420. package/link/_link-theme.nvl.scss +178 -0
  421. package/link/_link-theme.scss +2 -3
  422. package/link/link.component.d.ts +4 -1
  423. package/list/_list-theme.nvl.scss +47 -0
  424. package/loader-overlay/_loader-overlay-theme.nvl.scss +34 -0
  425. package/loader-overlay/_loader-overlay-theme.scss +0 -1
  426. package/markdown/_markdown-theme.nvl.scss +142 -0
  427. package/modal/_modal-theme.nvl.scss +90 -0
  428. package/navbar/_navbar-theme.nvl.scss +123 -0
  429. package/package.json +26 -2
  430. package/popover/_popover-theme.nvl.scss +111 -0
  431. package/prebuilt-themes/dark-theme.css +1 -1
  432. package/prebuilt-themes/dark-theme.nvl.css +1 -0
  433. package/prebuilt-themes/default-theme.css +1 -1
  434. package/prebuilt-themes/light-theme.nvl.css +1 -0
  435. package/progress-bar/_progress-bar-theme.nvl.scss +28 -0
  436. package/progress-spinner/_progress-spinner-theme.nvl.scss +24 -0
  437. package/radio/_radio-theme.nvl.scss +95 -0
  438. package/radio/_radio-theme.scss +1 -1
  439. package/radio/radio.component.d.ts +2 -1
  440. package/radio/radio.scss +60 -27
  441. package/select/_select-theme.nvl.scss +55 -0
  442. package/select/_select-theme.scss +6 -0
  443. package/select/select.component.d.ts +1 -1
  444. package/select/select.scss +13 -0
  445. package/sidepanel/_sidepanel-theme.nvl.scss +67 -0
  446. package/splitter/_splitter-theme.nvl.scss +31 -0
  447. package/table/_table-theme.nvl.scss +65 -0
  448. package/table/_table-theme.scss +0 -1
  449. package/tabs/_tabs-theme.nvl.scss +240 -0
  450. package/tags/_tag-theme.nvl.scss +100 -0
  451. package/tags/_tag-theme.scss +0 -1
  452. package/tags/tag-list.scss +23 -7
  453. package/tags/tag.scss +21 -69
  454. package/textarea/_textarea-theme.nvl.scss +37 -0
  455. package/timezone/_timezone-option-theme.nvl.scss +34 -0
  456. package/toast/_toast-theme.nvl.scss +61 -0
  457. package/toggle/_toggle-theme.nvl.scss +98 -0
  458. package/toggle/_toggle-theme.scss +0 -3
  459. package/toggle/toggle.component.d.ts +2 -1
  460. package/toggle/toggle.scss +51 -76
  461. package/tooltip/_tooltip-theme.nvl.scss +49 -0
  462. package/tooltip/tooltip.component.d.ts +5 -2
  463. package/tooltip/tooltip.scss +10 -39
  464. package/tree/_tree-theme.nvl.scss +69 -0
  465. package/tree-select/_tree-select-theme.nvl.scss +41 -0
  466. package/tree-select/_tree-select-theme.scss +6 -0
  467. package/tree-select/tree-select.component.d.ts +2 -2
  468. package/tree-select/tree-select.scss +13 -0
  469. package/core/styles/theming/_alerts.scss +0 -166
@@ -0,0 +1,67 @@
1
+ @use 'sass:meta';
2
+ @use 'sass:map';
3
+
4
+ @use '../core/styles/typography/typography-utils' as *;
5
+
6
+
7
+ @mixin nvl-mc-sidepanel-theme($theme) {
8
+ $background: map.get($theme, background);
9
+
10
+ $sidepanel: map.get(map.get($theme, components), sidepanel);
11
+ $popup: map.get(map.get($theme, components), popup);
12
+
13
+ .mc-sidepanel-content {
14
+ background-color: map.get($background, background);
15
+ }
16
+
17
+ .mc-sidepanel-container_shadowed {
18
+ &.mc-sidepanel-container_right {
19
+ .mc-sidepanel-content {
20
+ box-shadow: 0 0 0 1px map.get($sidepanel, border), -6px 0 12px 0 rgba(0, 0, 0, 0.24);
21
+ }
22
+ }
23
+
24
+ &.mc-sidepanel-container_left {
25
+ .mc-sidepanel-content {
26
+ box-shadow: 0 0 0 1px map.get($sidepanel, border), 6px 0 12px 0 rgba(0, 0, 0, 0.24);
27
+ }
28
+ }
29
+
30
+ &.mc-sidepanel-container_bottom {
31
+ .mc-sidepanel-content {
32
+ box-shadow: 0 0 0 1px map.get($sidepanel, border), 0 -6px 12px 0 rgba(0, 0, 0, 0.24);
33
+ }
34
+ }
35
+
36
+ &.mc-sidepanel-container_top {
37
+ .mc-sidepanel-content {
38
+ box-shadow: 0 0 0 1px map.get($sidepanel, border), 0 6px 12px 0 rgba(0, 0, 0, 0.24);
39
+ }
40
+ }
41
+ }
42
+
43
+ .mc-sidepanel-header {
44
+ border-bottom: 1px solid map.get($sidepanel, header-border);
45
+ }
46
+
47
+ .mc-sidepanel-footer {
48
+ border-top: 1px solid map.get($sidepanel, footer-border);
49
+ background-color: map.get($popup, footer-background);
50
+ }
51
+ }
52
+
53
+ @mixin nvl-mc-sidepanel-typography($config) {
54
+ $tokens: map.get($config, tokens);
55
+
56
+ .mc-sidepanel-title {
57
+ @include mc-typography-level-to-styles($config, map.get($tokens, sidepanel-header-font-default));
58
+ }
59
+
60
+ .mc-sidepanel-container {
61
+ @include mc-typography-level-to-styles($config, map.get($tokens, sidepanel-font-default));
62
+ }
63
+
64
+ .mc-sidepanel-footer {
65
+ @include mc-typography-level-to-styles($config, map.get($tokens, sidepanel-footer-font-default));
66
+ }
67
+ }
@@ -0,0 +1,31 @@
1
+ @use 'sass:map';
2
+
3
+ @use '../core/styles/theming/theming' as *;
4
+
5
+
6
+ @mixin nvl-mc-splitter-theme($theme) {
7
+ $background: map.get($theme, background);
8
+
9
+ .mc-gutter {
10
+ cursor: col-resize;
11
+
12
+ &:hover,
13
+ &.mc-gutter_dragged {
14
+ background-color: map.get($background, background-disabled);
15
+ }
16
+
17
+ &.mc-gutter_vertical {
18
+ cursor: row-resize;
19
+ }
20
+
21
+ &[disabled] {
22
+ background-color: mc-color($background, overlay-disabled);
23
+
24
+ cursor: default;
25
+ }
26
+ }
27
+
28
+ .mc-gutter-ghost {
29
+ background: mc-color($background, overlay-disabled);
30
+ }
31
+ }
@@ -0,0 +1,65 @@
1
+ @use 'sass:meta';
2
+ @use 'sass:map';
3
+
4
+ @use '../core/styles/typography/typography-utils' as *;
5
+
6
+
7
+ @mixin nvl-mc-table-theme($theme) {
8
+ $foreground: map.get($theme, foreground);
9
+ $background: map.get($theme, background);
10
+
11
+ .mc-table {
12
+ & > thead {
13
+ color: map.get($foreground, text-less-contrast);
14
+
15
+ & > tr > th {
16
+ border-color: map.get($foreground, divider);
17
+ }
18
+ }
19
+
20
+ & > tbody {
21
+ & > tr {
22
+ &:hover {
23
+ background-color: map.get($background, overlay-hover);
24
+ }
25
+
26
+ & > th,
27
+ & > td {
28
+ color: map.get($foreground, text);
29
+ }
30
+ }
31
+ }
32
+
33
+ &.mc-table_bordered {
34
+ & > tbody > tr {
35
+ & th,
36
+ & td {
37
+ border-bottom-color: map.get($foreground, divider);
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
43
+
44
+ @mixin nvl-mc-table-typography($config) {
45
+ $tokens: map.get($config, tokens);
46
+
47
+ .mc-table {
48
+ & > thead {
49
+ & > tr > th {
50
+ font-weight: normal;
51
+ }
52
+
53
+ @include mc-typography-level-to-styles($config, map.get($tokens, table-font-header));
54
+ }
55
+
56
+ & > tbody {
57
+ & > tr > th {
58
+ font-weight: normal;
59
+ }
60
+
61
+ @include mc-typography-level-to-styles($config, map.get($tokens, table-font-body));
62
+ }
63
+ }
64
+ }
65
+
@@ -64,4 +64,3 @@ $tokens: meta.module-variables(tokens) !default;
64
64
  }
65
65
  }
66
66
  }
67
-
@@ -0,0 +1,240 @@
1
+ @use 'sass:meta';
2
+ @use 'sass:map';
3
+
4
+ @use '../core/styles/typography/typography-utils' as *;
5
+
6
+
7
+ //noinspection ALL
8
+ @mixin nvl-mc-tabs-theme($theme) {
9
+ $foreground: map.get($theme, foreground);
10
+ $background: map.get($theme, background);
11
+
12
+ $states: map.get($theme, states);
13
+
14
+ $tabs: map.get(map.get($theme, components), tabs);
15
+ $vertical-tabs: map.get(map.get($theme, components), vertical-tabs);
16
+
17
+ .mc-tab-group_vertical .mc-tab-header__content {
18
+ border-right-color: map.get($foreground, divider);
19
+ }
20
+
21
+ .mc-tab-header__pagination {
22
+ border-bottom-color: map.get($tabs, border);
23
+
24
+ &:hover {
25
+ background: map.get($background, overlay-hover);
26
+
27
+ & .mc-icon {
28
+ color: map.get($foreground, text);
29
+ }
30
+ }
31
+
32
+ &:active {
33
+ background: map.get($foreground, divider);
34
+ }
35
+
36
+ &.mc-tab-header__pagination_before {
37
+ border-right-color: map.get($foreground, divider);
38
+ }
39
+
40
+ &.mc-tab-header__pagination_after {
41
+ border-left-color: map.get($foreground, divider);
42
+ }
43
+
44
+ &[disabled],
45
+ &.mc-disabled {
46
+ pointer-events: none;
47
+
48
+ & .mc-icon {
49
+ color: map.get($foreground, text-disabled);
50
+ }
51
+ }
52
+ }
53
+
54
+ /* stylelint-disable no-descending-specificity */
55
+ .mc-tab-label_old {
56
+ color: map.get($foreground, text);
57
+
58
+ border-top-color: transparent;
59
+ border-bottom-color: map.get($tabs, border);
60
+
61
+ &.cdk-keyboard-focused:after {
62
+ border-color: map.get(map.get($theme, states), focused-color);
63
+ border-bottom-color: transparent;
64
+ }
65
+
66
+ &.mc-tab-label_empty {
67
+ color: map.get($tabs, state-empty-text);
68
+
69
+ & .mc-icon {
70
+ color: map.get($tabs, state-empty-icon);
71
+ }
72
+ }
73
+
74
+ &:hover {
75
+ background: map.get($background, overlay-hover);
76
+
77
+ color: map.get($tabs, state-hover-text);
78
+
79
+ & .mc-icon {
80
+ color: map.get($tabs, state-hover-icon);
81
+ }
82
+ }
83
+
84
+ &.mc-active {
85
+ border: {
86
+ color: map.get($tabs, border);
87
+ bottom-color: transparent;
88
+ }
89
+ }
90
+
91
+ &[disabled],
92
+ &.mc-disabled {
93
+ cursor: default;
94
+
95
+ color: map.get($tabs, state-disabled-text);
96
+
97
+ & .mc-icon {
98
+ color: map.get($tabs, state-disabled-icon);
99
+ }
100
+ }
101
+ }
102
+
103
+ .mc-tab-link,
104
+ .mc-tab-label_horizontal {
105
+ color: map.get($tabs, state-normal-text);
106
+
107
+ & .mc-icon {
108
+ color: map.get($tabs, state-normal-icon);
109
+ }
110
+
111
+ border-bottom-color: map.get($tabs, border);
112
+
113
+ &.cdk-keyboard-focused:after {
114
+ border-color: map.get(map.get($theme, states), focused-color);
115
+ border-bottom-color: transparent;
116
+ }
117
+
118
+ &.mc-tab-label_empty {
119
+ color: map.get($tabs, state-empty-text);
120
+
121
+ & .mc-icon {
122
+ color: map.get($tabs, state-empty-icon);
123
+ }
124
+ }
125
+
126
+ &.mc-active {
127
+ border-bottom-color: transparent;
128
+
129
+ color: map.get($tabs, state-normal-text);
130
+
131
+ & .mc-icon {
132
+ color: map.get($tabs, state-normal-icon);
133
+ }
134
+
135
+ &:before {
136
+ background-color: map.get($tabs, state-active-marker);
137
+ }
138
+ }
139
+
140
+ &:hover {
141
+ background: map.get($background, overlay-hover);
142
+
143
+ color: map.get($tabs, state-hover-text);
144
+
145
+ & .mc-icon {
146
+ color: map.get($tabs, state-hover-icon);
147
+ }
148
+ }
149
+
150
+ &[disabled],
151
+ &.mc-disabled {
152
+ cursor: default;
153
+
154
+ color: map.get($tabs, state-disabled-text);
155
+
156
+ &:before {
157
+ opacity: map.get($tabs, state-disabled-marker-opacity);
158
+ }
159
+
160
+ & .mc-icon {
161
+ color: map.get($tabs, state-disabled-icon);
162
+ }
163
+ }
164
+ }
165
+
166
+ .mc-tab-label_vertical {
167
+ background: map.get($vertical-tabs, state-normal-background);
168
+ color: map.get($tabs, state-normal-text);
169
+
170
+ & .mc-icon {
171
+ color: map.get($tabs, state-normal-icon);
172
+ }
173
+
174
+ &.cdk-keyboard-focused:after {
175
+ border-color: map.get(map.get($theme, states), focused-color);
176
+ }
177
+
178
+ &.mc-tab-label_empty {
179
+ color: map.get($tabs, state-empty-text);
180
+
181
+ & .mc-icon {
182
+ color: map.get($tabs, state-empty-icon);
183
+ }
184
+ }
185
+
186
+ &:hover {
187
+ background: map.get($vertical-tabs, state-hover-background);
188
+
189
+ color: map.get($tabs, state-hover-text);
190
+
191
+ & .mc-icon {
192
+ color: map.get($tabs, state-hover-icon);
193
+ }
194
+ }
195
+
196
+ &.mc-active {
197
+ color: map.get($tabs, state-normal-text);
198
+ background: map.get($states, selected-color);
199
+
200
+ & .mc-icon {
201
+ color: map.get($tabs, state-normal-icon);
202
+ }
203
+
204
+ &:before {
205
+ background-color: map.get($tabs, state-active-marker);
206
+ }
207
+
208
+ &:hover {
209
+ background: map.get($vertical-tabs, state-hover-selected-background);
210
+
211
+ & .mc-icon {
212
+ color: map.get($tabs, state-hover-icon);
213
+ }
214
+ }
215
+ }
216
+
217
+ &[disabled],
218
+ &.mc-disabled {
219
+ cursor: default;
220
+ background: map.get($vertical-tabs, state-normal-background);
221
+
222
+ color: map.get($tabs, state-disabled-text);
223
+
224
+ & .mc-icon {
225
+ color: map.get($tabs, state-disabled-icon);
226
+ }
227
+ }
228
+ }
229
+ /* stylelint-enable no-descending-specificity */
230
+ }
231
+
232
+ @mixin nvl-mc-tabs-typography($config) {
233
+ $tokens: map.get($config, tokens);
234
+
235
+ .mc-tab-label,
236
+ .mc-tab-label_old,
237
+ .mc-tab-link {
238
+ @include mc-typography-level-to-styles($config, map.get($tokens, tabs-font-default));
239
+ }
240
+ }
@@ -0,0 +1,100 @@
1
+ @use 'sass:meta';
2
+ @use 'sass:map';
3
+
4
+ @use '../core/styles/theming/theming' as *;
5
+ @use '../core/styles/typography/typography-utils' as *;
6
+
7
+
8
+ @mixin nvl-mc-tag-state($state) {
9
+ background: map.get($state, background);
10
+
11
+ & .mc-icon {
12
+ color: map.get($state, icon);
13
+ }
14
+
15
+ & .mc-tag__text {
16
+ color: map.get($state, text);
17
+ }
18
+ }
19
+
20
+ @mixin nvl-mc-tag-color($tag) {
21
+ $default: map.get($tag, default);
22
+
23
+ @include nvl-mc-tag-state($default);
24
+
25
+ &:hover,
26
+ &.mc-hovered {
27
+ $hover: map.get($tag, hover);
28
+
29
+ @include nvl-mc-tag-state($hover);
30
+ }
31
+
32
+ &.mc-focused {
33
+ $focus: map.get($tag, focus);
34
+
35
+ @include nvl-mc-tag-state($focus);
36
+
37
+ box-shadow: inset 0 0 0 1px map.get($focus, outline), 0 0 0 1px map.get($focus, outline);
38
+ }
39
+
40
+ &.mc-disabled {
41
+ $disabled: map.get($tag, disabled);
42
+
43
+ @include nvl-mc-tag-state($disabled);
44
+ }
45
+ }
46
+
47
+ @mixin nvl-mc-tag-theme($theme) {
48
+ $tag: map.get(map.get($theme, components), tag);
49
+
50
+ .mc-tag {
51
+ &.mc-theme {
52
+ @include nvl-mc-tag-color(map.get($tag, theme-fade-on));
53
+ }
54
+
55
+ &.mc-contrast {
56
+ @include nvl-mc-tag-color(map.get($tag, contrast-fade-on));
57
+ }
58
+
59
+ &.mc-error {
60
+ @include nvl-mc-tag-color(map.get($tag, error-fade-on));
61
+ }
62
+
63
+ //&.mc-disabled {
64
+ // color: map.get($foreground, text-disabled);
65
+ //
66
+ // border-color: transparent;
67
+ //
68
+ // background-color: map.get($background, background-disabled);
69
+ //}
70
+ }
71
+
72
+ //.mc-tag-input {
73
+ // color: map.get($foreground, text);
74
+ //
75
+ // &::placeholder {
76
+ // color: map.get($foreground, text-disabled);
77
+ // }
78
+ //
79
+ // &::-ms-input-placeholder {
80
+ // color: map.get($foreground, text-disabled);
81
+ // }
82
+ //
83
+ // &::-webkit-input-placeholder {
84
+ // color: map.get($foreground, text-disabled);
85
+ // }
86
+ //}
87
+ }
88
+
89
+ @mixin nvl-mc-tag-typography($config) {
90
+ $tokens: map.get($config, tokens);
91
+
92
+ .mc-tag {
93
+ @include mc-typography-level-to-styles($config, map.get($tokens, tag-font-default));
94
+ }
95
+
96
+ .mc-tag-input {
97
+ @include mc-typography-level-to-styles($config, map.get($tokens, tag-input-font-default));
98
+ }
99
+ }
100
+
@@ -119,4 +119,3 @@ $tokens: meta.module-variables(tokens) !default;
119
119
  @include mc-typography-level-to-styles($config, map.get($tokens, tag-input-font-default));
120
120
  }
121
121
  }
122
-
@@ -17,6 +17,8 @@ $tokens: meta.module-variables(tokens) !default;
17
17
  border: none;
18
18
  outline: none;
19
19
  background: transparent;
20
+
21
+ min-height: 22px;
20
22
  }
21
23
 
22
24
  .mc-tags-list__list-container {
@@ -28,12 +30,7 @@ $tokens: meta.module-variables(tokens) !default;
28
30
 
29
31
  min-width: 0;
30
32
 
31
- min-height: calc(
32
- var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) -
33
- (var(--mc-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
34
- );
35
-
36
- padding: var(--mc-tag-list-size-padding, map.get($tokens, tag-list-size-padding));
33
+ gap: var(--mc-tag-list-size-content-gap, map.get($tokens, tag-list-size-content-gap));
37
34
 
38
35
  & .mc-tag-input {
39
36
  max-width: 100%;
@@ -41,7 +38,7 @@ $tokens: meta.module-variables(tokens) !default;
41
38
  flex: 1 1 auto;
42
39
 
43
40
  height: var(--mc-tag-input-size-height, map.get($tokens, tag-input-size-height));
44
- margin: var(--mc-tag-input-size-margin, map.get($tokens, tag-input-size-margin));
41
+ margin-left: var(--mc-tag-input-size-content-gap, map.get($tokens, tag-input-size-content-gap));
45
42
  }
46
43
  }
47
44
 
@@ -50,3 +47,22 @@ $tokens: meta.module-variables(tokens) !default;
50
47
  height: 30px;
51
48
  }
52
49
  }
50
+
51
+ .mc-form-field-type-tag-list {
52
+ & .mc-tags-list__list-container {
53
+ padding-top: calc(
54
+ var(--mc-tag-input-size-vertical-padding, map.get($tokens, tag-input-size-vertical-padding)) -
55
+ var(--mc-size-border-width, map.get($tokens, size-border-width))
56
+ );
57
+ padding-bottom: calc(
58
+ var(--mc-tag-input-size-vertical-padding, map.get($tokens, tag-input-size-vertical-padding)) -
59
+ var(--mc-size-border-width, map.get($tokens, size-border-width))
60
+ );
61
+ padding-left: var(
62
+ --mc-tag-input-size-horizontal-padding-left, map.get($tokens, tag-input-size-horizontal-padding-left)
63
+ );
64
+ padding-right: var(
65
+ --mc-tag-input-size-horizontal-padding-right, map.get($tokens, tag-input-size-horizontal-padding-right)
66
+ );
67
+ }
68
+ }
package/tags/tag.scss CHANGED
@@ -13,15 +13,11 @@ $tokens: meta.module-variables(tokens) !default;
13
13
 
14
14
  max-width: 100%;
15
15
 
16
- margin: var(--mc-tags-size-margin, map.get($tokens, tags-size-margin));
16
+ padding:
17
+ var(--mc-tag-size-padding-vertical, map.get($tokens, tag-size-padding-vertical))
18
+ var(--mc-tag-size-padding-horizontal, map.get($tokens, tag-size-padding-horizontal));
17
19
 
18
- height: var(--mc-tags-size-height, map.get($tokens, tags-size-height));
19
-
20
- border: {
21
- width: var(--mc-tags-size-border-width, map.get($tokens, tags-size-border-width));
22
- style: solid;
23
- radius: var(--mc-tags-size-border-radius, map.get($tokens, tags-size-border-radius));
24
- }
20
+ border-radius: 4px;
25
21
 
26
22
  cursor: default;
27
23
 
@@ -29,8 +25,19 @@ $tokens: meta.module-variables(tokens) !default;
29
25
 
30
26
  box-sizing: border-box;
31
27
 
32
- & .mc-icon.mc-tag-remove:hover {
33
- cursor: pointer;
28
+ & .mc-icon.mc-tag-remove {
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+
33
+ flex-shrink: 0;
34
+
35
+ margin-right:
36
+ var(--mc-tag-size-close-button-margin-right, map.get($tokens, tag-size-close-button-margin-right));
37
+
38
+ &:hover {
39
+ cursor: pointer;
40
+ }
34
41
  }
35
42
 
36
43
  &.mc-disabled .mc-icon.mc-tag-remove:hover {
@@ -41,13 +48,12 @@ $tokens: meta.module-variables(tokens) !default;
41
48
  text-overflow: ellipsis;
42
49
  white-space: nowrap;
43
50
  overflow: hidden;
51
+
52
+ margin: 0 var(--mc-tag-size-content-gap-horizontal, map.get($tokens, tag-size-content-gap-horizontal));
44
53
  }
45
54
 
46
- &:not(.mc-tag-with-icon) .mc-tag__text {
47
- margin-right: calc(
48
- var(--mc-tags-size-text-margin, #{map.get($tokens, tags-size-text-margin)}) -
49
- var(--mc-tags-size-border-width, #{map.get($tokens, tags-size-border-width)})
50
- );
55
+ & .mc-icon_left {
56
+ margin-left: var(--mc-tag-size-icon-margin-left, map.get($tokens, tag-size-icon-margin-left));
51
57
  }
52
58
  }
53
59
 
@@ -58,58 +64,4 @@ $tokens: meta.module-variables(tokens) !default;
58
64
  height: 100%;
59
65
 
60
66
  flex: 1 1 100%;
61
-
62
- /* stylelint-disable no-descending-specificity */
63
- .mc-icon.mc-tag-remove {
64
- display: flex;
65
- align-items: center;
66
- justify-content: center;
67
-
68
- flex-shrink: 0;
69
-
70
- height: var(--mc-tags-size-height, map.get($tokens, tags-size-height));
71
-
72
- padding-left: var(--mc-tags-size-icon-padding, map.get($tokens, tags-size-icon-padding));
73
- padding-right: var(--mc-tags-size-icon-padding, map.get($tokens, tags-size-icon-padding));
74
- }
75
- /* stylelint-enable no-descending-specificity */
76
-
77
- .mc-icon_left {
78
- margin-right: var(--mc-tags-size-icon-padding, map.get($tokens, tags-size-icon-padding));
79
- }
80
-
81
- & > .mc-icon:first-child {
82
- margin-left: calc(
83
- var(--mc-tags-size-icon-padding, #{map.get($tokens, tags-size-icon-padding)}) -
84
- var(--mc-tags-size-border-width, #{map.get($tokens, tags-size-border-width)})
85
- );
86
- }
87
-
88
- & > .mc-tag__text:last-child {
89
- margin-right: calc(
90
- var(--mc-tags-size-text-margin, #{map.get($tokens, tags-size-text-margin)}) -
91
- var(--mc-tags-size-border-width, #{map.get($tokens, tags-size-border-width)})
92
- );
93
- }
94
-
95
- & > .mc-tag__text:first-child {
96
- margin-left: calc(
97
- var(--mc-tags-size-text-margin, #{map.get($tokens, tags-size-text-margin)}) -
98
- var(--mc-tags-size-border-width, #{map.get($tokens, tags-size-border-width)})
99
- );
100
- }
101
- }
102
-
103
- .mc-tag-overlay {
104
- position: absolute;
105
-
106
- top: -1px;
107
- left: -1px;
108
- right: -1px;
109
- bottom: -1px;
110
-
111
- pointer-events: none;
112
- border-radius: inherit;
113
67
  }
114
-
115
-