@ndwnu/design-system 5.1.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (358) hide show
  1. package/assets/icons.ts +83 -0
  2. package/fesm2022/ndwnu-design-system.mjs +1052 -1000
  3. package/fesm2022/ndwnu-design-system.mjs.map +1 -1
  4. package/index.d.ts +2 -5
  5. package/lib/components/alert/alert.model.d.ts +1 -0
  6. package/lib/components/banner/banner.model.d.ts +1 -0
  7. package/lib/components/card/card-header/card-header.component.d.ts +11 -0
  8. package/lib/components/card/card.animation.d.ts +1 -0
  9. package/lib/components/card/card.component.d.ts +19 -0
  10. package/{components → lib/components}/dropdown/dropdown.component.d.ts +1 -1
  11. package/{components → lib/components}/form-field/autosuggest/autosuggest-add-option/autosuggest-add-option.component.d.ts +3 -3
  12. package/lib/components/form-field/autosuggest/autosuggest-option/autosuggest-option.component.d.ts +19 -0
  13. package/lib/components/form-field/autosuggest/autosuggest-option/autosuggest-option.model.d.ts +5 -0
  14. package/{components → lib/components}/form-field/autosuggest/autosuggest-option/base-autosuggest-option.component.d.ts +5 -6
  15. package/{components → lib/components}/form-field/autosuggest/autosuggest-panel/autosuggest-panel.component.d.ts +12 -14
  16. package/{components → lib/components}/form-field/autosuggest/autosuggest.directive.d.ts +7 -8
  17. package/{components → lib/components}/form-field/checkbox/checkbox.component.d.ts +3 -2
  18. package/{components → lib/components}/form-field/clear-search-button/clear-search-button.component.d.ts +3 -2
  19. package/lib/components/form-field/clear-search-button/index.d.ts +1 -0
  20. package/{components → lib/components}/form-field/file-upload/file-upload.component.d.ts +8 -7
  21. package/{components → lib/components}/form-field/form-field.component.d.ts +2 -1
  22. package/lib/components/form-field/input/input.model.d.ts +1 -0
  23. package/{components → lib/components}/form-field/input-button/input-button.component.d.ts +1 -1
  24. package/{components → lib/components}/form-field/month-input/month-input.component.d.ts +8 -7
  25. package/{components → lib/components}/form-field/option-group/option-group.component.d.ts +7 -4
  26. package/lib/components/form-field/picker-button/index.d.ts +1 -0
  27. package/{components → lib/components}/form-field/picker-button/picker-button.component.d.ts +1 -2
  28. package/{components → lib/components}/form-field/textarea/auto-grow.directive.d.ts +6 -3
  29. package/{components → lib/components}/form-field/textarea/index.d.ts +1 -0
  30. package/lib/components/form-field/textarea/max-char.directive.d.ts +15 -0
  31. package/{components → lib/components}/icon/action-icon/action-icon.component.d.ts +3 -3
  32. package/lib/components/icon/icon.component.d.ts +6 -0
  33. package/{components → lib/components}/layout/layout.component.d.ts +2 -2
  34. package/{components → lib/components}/main-navigation/main-navigation.component.d.ts +2 -10
  35. package/{components → lib/components}/main-navigation/main-navigation.model.d.ts +1 -4
  36. package/{components → lib/components}/modal/modal.component.d.ts +1 -2
  37. package/{components → lib/components}/multi-select/multi-select.component.d.ts +3 -3
  38. package/lib/components/pill/pill.model.d.ts +1 -0
  39. package/{components → lib/components}/router-breadcrumbs/router-breadcrumbs.component.d.ts +2 -2
  40. package/lib/components/tab/tab.component.d.ts +17 -0
  41. package/{components → lib/components}/tab-group/tab-group.component.d.ts +7 -5
  42. package/{components → lib/components}/tag/tag.component.d.ts +2 -2
  43. package/{components → lib/components}/toast/toast.component.d.ts +4 -4
  44. package/package.json +14 -10
  45. package/styles/base/_colors.scss +234 -0
  46. package/styles/base/_typography.scss +135 -0
  47. package/styles/base/_variables.scss +79 -0
  48. package/styles/base/colors.stories.model.ts +143 -0
  49. package/styles/base/colors.stories.ts +14 -0
  50. package/styles/base/colors.stories.utils.ts +58 -0
  51. package/styles/base/index.scss +3 -0
  52. package/styles/base/typography.stories.ts +116 -0
  53. package/styles/components/_button.scss +133 -0
  54. package/styles/components/_card.scss +3 -0
  55. package/styles/components/_divider.scss +12 -0
  56. package/styles/components/_dropdown.scss +8 -0
  57. package/styles/components/_filter-button.scss +39 -0
  58. package/styles/components/_input.scss +198 -0
  59. package/styles/components/_label.scss +23 -0
  60. package/styles/components/_link.scss +35 -0
  61. package/styles/components/_menu-button.scss +38 -0
  62. package/styles/components/_popover.scss +19 -0
  63. package/styles/components/_summary-card.scss +227 -0
  64. package/styles/components/divider.stories.ts +80 -0
  65. package/styles/components/index.scss +11 -0
  66. package/styles/components/link.stories.ts +154 -0
  67. package/styles/index.scss +4 -0
  68. package/styles/layout/_grid.scss +57 -0
  69. package/styles/layout/_overlay.scss +7 -0
  70. package/styles/layout/grid.stories.ts +117 -0
  71. package/styles/layout/index.scss +2 -0
  72. package/styles/storybook/_core.scss +60 -0
  73. package/styles/storybook/_reset.scss +20 -0
  74. package/styles/storybook/index.scss +17 -0
  75. package/styles/storybook/overrides/_buttons.scss +95 -0
  76. package/styles/storybook/overrides/_code-previews.scss +97 -0
  77. package/styles/storybook/overrides/_content.scss +24 -0
  78. package/styles/storybook/overrides/_headers.scss +31 -0
  79. package/styles/storybook/overrides/_layout.scss +44 -0
  80. package/styles/storybook/overrides/_table.scss +112 -0
  81. package/styles/storybook/overrides/index.scss +6 -0
  82. package/styles/storybook/overrides.css +343 -0
  83. package/styles/utils/_screenreader.scss +18 -0
  84. package/styles/utils/index.scss +1 -0
  85. package/assets/fonts/ObjectSans-Bold.woff2 +0 -0
  86. package/assets/fonts/ObjectSans-Regular.woff2 +0 -0
  87. package/components/alert/alert.model.d.ts +0 -6
  88. package/components/banner/banner.model.d.ts +0 -4
  89. package/components/card/card-header/card-header.component.d.ts +0 -5
  90. package/components/card/card.component.d.ts +0 -5
  91. package/components/form-field/autosuggest/autosuggest-option/autosuggest-option.component.d.ts +0 -19
  92. package/components/form-field/autosuggest/autosuggest-option/autosuggest-option.model.d.ts +0 -2
  93. package/components/form-field/input/input.model.d.ts +0 -11
  94. package/components/icon/icon.component.d.ts +0 -13
  95. package/components/pill/pill.model.d.ts +0 -8
  96. package/components/tab/tab.component.d.ts +0 -9
  97. package/core/style/styles.css +0 -1360
  98. package/core/style/styles.scss +0 -1360
  99. package/esm2022/components/accordion/accordion.component.mjs +0 -32
  100. package/esm2022/components/accordion/accordion.service.mjs +0 -17
  101. package/esm2022/components/accordion/index.mjs +0 -3
  102. package/esm2022/components/alert/alert.component.mjs +0 -42
  103. package/esm2022/components/alert/alert.model.mjs +0 -8
  104. package/esm2022/components/alert/index.mjs +0 -3
  105. package/esm2022/components/badge/badge.component.mjs +0 -21
  106. package/esm2022/components/badge/index.mjs +0 -2
  107. package/esm2022/components/banner/banner.component.mjs +0 -61
  108. package/esm2022/components/banner/banner.model.mjs +0 -6
  109. package/esm2022/components/banner/index.mjs +0 -3
  110. package/esm2022/components/breadcrumb/breadcrumb.component.mjs +0 -15
  111. package/esm2022/components/breadcrumb/index.mjs +0 -2
  112. package/esm2022/components/breadcrumb-group/breadcrumb-group.component.mjs +0 -21
  113. package/esm2022/components/breadcrumb-group/index.mjs +0 -2
  114. package/esm2022/components/button/button.directive.mjs +0 -37
  115. package/esm2022/components/button/index.mjs +0 -2
  116. package/esm2022/components/card/card-content/card-content.component.mjs +0 -11
  117. package/esm2022/components/card/card-content/index.mjs +0 -2
  118. package/esm2022/components/card/card-footer/card-footer.component.mjs +0 -11
  119. package/esm2022/components/card/card-footer/index.mjs +0 -2
  120. package/esm2022/components/card/card-header/card-header.component.mjs +0 -11
  121. package/esm2022/components/card/card-header/index.mjs +0 -2
  122. package/esm2022/components/card/card.component.mjs +0 -11
  123. package/esm2022/components/card/index.mjs +0 -15
  124. package/esm2022/components/collapsible/collapsible.animation.mjs +0 -26
  125. package/esm2022/components/collapsible/collapsible.component.mjs +0 -34
  126. package/esm2022/components/collapsible/index.mjs +0 -2
  127. package/esm2022/components/dashboard-card/dashboard-card.component.mjs +0 -32
  128. package/esm2022/components/dashboard-card/index.mjs +0 -2
  129. package/esm2022/components/dropdown/dropdown.component.mjs +0 -57
  130. package/esm2022/components/dropdown/index.mjs +0 -2
  131. package/esm2022/components/form-field/autosuggest/autosuggest-add-option/autosuggest-add-option.component.mjs +0 -29
  132. package/esm2022/components/form-field/autosuggest/autosuggest-add-option/index.mjs +0 -2
  133. package/esm2022/components/form-field/autosuggest/autosuggest-option/autosuggest-option.component.mjs +0 -45
  134. package/esm2022/components/form-field/autosuggest/autosuggest-option/autosuggest-option.model.mjs +0 -2
  135. package/esm2022/components/form-field/autosuggest/autosuggest-option/base-autosuggest-option.component.mjs +0 -85
  136. package/esm2022/components/form-field/autosuggest/autosuggest-option/index.mjs +0 -3
  137. package/esm2022/components/form-field/autosuggest/autosuggest-panel/autosuggest-panel.component.mjs +0 -82
  138. package/esm2022/components/form-field/autosuggest/autosuggest.directive.mjs +0 -411
  139. package/esm2022/components/form-field/autosuggest/index.mjs +0 -6
  140. package/esm2022/components/form-field/autosuggest/match-bold.pipe.mjs +0 -21
  141. package/esm2022/components/form-field/checkbox/checkbox.component.mjs +0 -62
  142. package/esm2022/components/form-field/checkbox/index.mjs +0 -2
  143. package/esm2022/components/form-field/checkbox-group/checkbox-group.component.mjs +0 -15
  144. package/esm2022/components/form-field/checkbox-group/index.mjs +0 -2
  145. package/esm2022/components/form-field/clear-search-button/clear-search-button.component.mjs +0 -37
  146. package/esm2022/components/form-field/error/error.component.mjs +0 -12
  147. package/esm2022/components/form-field/error/index.mjs +0 -2
  148. package/esm2022/components/form-field/file-upload/file-upload-text.interface.mjs +0 -2
  149. package/esm2022/components/form-field/file-upload/file-upload.component.mjs +0 -172
  150. package/esm2022/components/form-field/file-upload/index.mjs +0 -3
  151. package/esm2022/components/form-field/form-field.component.mjs +0 -81
  152. package/esm2022/components/form-field/form-field.constant.mjs +0 -2
  153. package/esm2022/components/form-field/form-field.model.mjs +0 -8
  154. package/esm2022/components/form-field/index.mjs +0 -17
  155. package/esm2022/components/form-field/info/index.mjs +0 -2
  156. package/esm2022/components/form-field/info/info.component.mjs +0 -11
  157. package/esm2022/components/form-field/input/index.mjs +0 -3
  158. package/esm2022/components/form-field/input/input.directive.mjs +0 -68
  159. package/esm2022/components/form-field/input/input.model.mjs +0 -13
  160. package/esm2022/components/form-field/input-button/index.mjs +0 -2
  161. package/esm2022/components/form-field/input-button/input-button.component.mjs +0 -23
  162. package/esm2022/components/form-field/input-icon/index.mjs +0 -2
  163. package/esm2022/components/form-field/input-icon/input-icon.component.mjs +0 -12
  164. package/esm2022/components/form-field/month-input/index.mjs +0 -2
  165. package/esm2022/components/form-field/month-input/month-input-utils.mjs +0 -13
  166. package/esm2022/components/form-field/month-input/month-input.component.mjs +0 -154
  167. package/esm2022/components/form-field/option-group/index.mjs +0 -4
  168. package/esm2022/components/form-field/option-group/option-group.component.mjs +0 -64
  169. package/esm2022/components/form-field/option-group/option-group.model.mjs +0 -2
  170. package/esm2022/components/form-field/option-group/option.component.mjs +0 -22
  171. package/esm2022/components/form-field/picker-button/picker-button.component.mjs +0 -50
  172. package/esm2022/components/form-field/radio-button/index.mjs +0 -2
  173. package/esm2022/components/form-field/radio-button/radio-button.component.mjs +0 -63
  174. package/esm2022/components/form-field/radio-group/index.mjs +0 -2
  175. package/esm2022/components/form-field/radio-group/radio-group.component.mjs +0 -70
  176. package/esm2022/components/form-field/success/index.mjs +0 -2
  177. package/esm2022/components/form-field/success/success.component.mjs +0 -12
  178. package/esm2022/components/form-field/textarea/auto-grow.directive.mjs +0 -45
  179. package/esm2022/components/form-field/textarea/index.mjs +0 -2
  180. package/esm2022/components/icon/action-icon/action-icon.component.mjs +0 -40
  181. package/esm2022/components/icon/action-icon/index.mjs +0 -2
  182. package/esm2022/components/icon/icon.component.mjs +0 -36
  183. package/esm2022/components/icon/index.mjs +0 -3
  184. package/esm2022/components/index.mjs +0 -29
  185. package/esm2022/components/layout/index.mjs +0 -2
  186. package/esm2022/components/layout/layout.component.mjs +0 -23
  187. package/esm2022/components/layout-banners/index.mjs +0 -2
  188. package/esm2022/components/layout-banners/layout-banners.component.mjs +0 -11
  189. package/esm2022/components/loader/index.mjs +0 -2
  190. package/esm2022/components/loader/loader.component.mjs +0 -11
  191. package/esm2022/components/main-navigation/index.mjs +0 -3
  192. package/esm2022/components/main-navigation/main-navigation.component.mjs +0 -165
  193. package/esm2022/components/main-navigation/main-navigation.imports.mjs +0 -20
  194. package/esm2022/components/main-navigation/main-navigation.model.mjs +0 -6
  195. package/esm2022/components/main-navigation-menu/index.mjs +0 -2
  196. package/esm2022/components/main-navigation-menu/main-navigation-menu.component.mjs +0 -20
  197. package/esm2022/components/modal/index.mjs +0 -16
  198. package/esm2022/components/modal/modal-content/index.mjs +0 -2
  199. package/esm2022/components/modal/modal-content/modal-content.component.mjs +0 -11
  200. package/esm2022/components/modal/modal-footer/index.mjs +0 -2
  201. package/esm2022/components/modal/modal-footer/modal-footer.component.mjs +0 -11
  202. package/esm2022/components/modal/modal-header/index.mjs +0 -2
  203. package/esm2022/components/modal/modal-header/modal-header.component.mjs +0 -18
  204. package/esm2022/components/modal/modal-ref.mjs +0 -4
  205. package/esm2022/components/modal/modal.component.mjs +0 -19
  206. package/esm2022/components/modal/modal.service.mjs +0 -31
  207. package/esm2022/components/multi-select/checkbox-data.interface.mjs +0 -2
  208. package/esm2022/components/multi-select/index.mjs +0 -4
  209. package/esm2022/components/multi-select/multi-select.component.mjs +0 -76
  210. package/esm2022/components/multi-select/select-all-text.interface.mjs +0 -2
  211. package/esm2022/components/pill/index.mjs +0 -3
  212. package/esm2022/components/pill/pill.component.mjs +0 -26
  213. package/esm2022/components/pill/pill.model.mjs +0 -10
  214. package/esm2022/components/popover/index.mjs +0 -2
  215. package/esm2022/components/popover/popover-trigger.directive.mjs +0 -182
  216. package/esm2022/components/router-breadcrumbs/index.mjs +0 -2
  217. package/esm2022/components/router-breadcrumbs/router-breadcrumbs.component.mjs +0 -37
  218. package/esm2022/components/summary-card/index.mjs +0 -11
  219. package/esm2022/components/summary-card/summary-card-action/summary-card-action.component.mjs +0 -23
  220. package/esm2022/components/summary-card/summary-card-actions/summary-card-actions.component.mjs +0 -26
  221. package/esm2022/components/summary-card/summary-card-avatar/summary-card-avatar.component.mjs +0 -25
  222. package/esm2022/components/summary-card/summary-card-content/summary-card-content.component.mjs +0 -19
  223. package/esm2022/components/summary-card/summary-card-header/summary-card-header.component.mjs +0 -13
  224. package/esm2022/components/summary-card/summary-card-subtitle/summary-card-subtitle.component.mjs +0 -11
  225. package/esm2022/components/summary-card/summary-card-tag/summary-card-tag.component.mjs +0 -20
  226. package/esm2022/components/summary-card/summary-card-tags/summary-card-tags.component.mjs +0 -20
  227. package/esm2022/components/summary-card/summary-card.component.mjs +0 -14
  228. package/esm2022/components/summary-card/summary-card.model.mjs +0 -2
  229. package/esm2022/components/tab/index.mjs +0 -2
  230. package/esm2022/components/tab/tab.component.mjs +0 -32
  231. package/esm2022/components/tab-group/index.mjs +0 -2
  232. package/esm2022/components/tab-group/tab-group.component.mjs +0 -34
  233. package/esm2022/components/tag/index.mjs +0 -2
  234. package/esm2022/components/tag/tag.component.mjs +0 -29
  235. package/esm2022/components/toast/index.mjs +0 -3
  236. package/esm2022/components/toast/toast.component.mjs +0 -77
  237. package/esm2022/components/toast/toast.service.mjs +0 -43
  238. package/esm2022/components/tooltip/index.mjs +0 -3
  239. package/esm2022/components/tooltip/tooltip.component.mjs +0 -16
  240. package/esm2022/components/tooltip/tooltip.directive.mjs +0 -89
  241. package/esm2022/models/aria.model.mjs +0 -2
  242. package/esm2022/models/index.mjs +0 -2
  243. package/esm2022/ndwnu-design-system.mjs +0 -5
  244. package/esm2022/public-api.mjs +0 -5
  245. package/public-api.d.ts +0 -1
  246. package/assets/images/{ndw-logo-short.svg → logos/ndw-logo-short.svg} +0 -0
  247. package/assets/images/{ndw-logo.svg → logos/ndw-logo.svg} +0 -0
  248. package/assets/images/{nwb-logo-short.svg → logos/nwb-logo-short.svg} +0 -0
  249. package/assets/images/{nwb-logo.svg → logos/nwb-logo.svg} +0 -0
  250. package/{components → lib/components}/accordion/accordion.component.d.ts +0 -0
  251. package/{components → lib/components}/accordion/accordion.service.d.ts +0 -0
  252. package/{components → lib/components}/accordion/index.d.ts +0 -0
  253. package/{components → lib/components}/alert/alert.component.d.ts +0 -0
  254. package/{components → lib/components}/alert/index.d.ts +0 -0
  255. package/{components → lib/components}/badge/badge.component.d.ts +0 -0
  256. package/{components → lib/components}/badge/index.d.ts +0 -0
  257. package/{components → lib/components}/banner/banner.component.d.ts +0 -0
  258. package/{components → lib/components}/banner/index.d.ts +0 -0
  259. package/{components → lib/components}/breadcrumb/breadcrumb.component.d.ts +0 -0
  260. package/{components → lib/components}/breadcrumb/index.d.ts +0 -0
  261. package/{components → lib/components}/breadcrumb-group/breadcrumb-group.component.d.ts +0 -0
  262. package/{components → lib/components}/breadcrumb-group/index.d.ts +0 -0
  263. package/{components → lib/components}/button/button.directive.d.ts +0 -0
  264. package/{components → lib/components}/button/index.d.ts +0 -0
  265. package/{components → lib/components}/card/card-content/card-content.component.d.ts +0 -0
  266. package/{components → lib/components}/card/card-content/index.d.ts +0 -0
  267. package/{components → lib/components}/card/card-footer/card-footer.component.d.ts +0 -0
  268. package/{components → lib/components}/card/card-footer/index.d.ts +0 -0
  269. package/{components → lib/components}/card/card-header/index.d.ts +0 -0
  270. package/{components → lib/components}/card/index.d.ts +0 -0
  271. package/{components → lib/components}/collapsible/collapsible.animation.d.ts +0 -0
  272. package/{components → lib/components}/collapsible/collapsible.component.d.ts +0 -0
  273. package/{components → lib/components}/collapsible/index.d.ts +0 -0
  274. package/{components → lib/components}/dashboard-card/dashboard-card.component.d.ts +0 -0
  275. package/{components → lib/components}/dashboard-card/index.d.ts +0 -0
  276. package/{components → lib/components}/dropdown/index.d.ts +0 -0
  277. package/{components → lib/components}/form-field/autosuggest/autosuggest-add-option/index.d.ts +0 -0
  278. package/{components → lib/components}/form-field/autosuggest/autosuggest-option/index.d.ts +0 -0
  279. package/{components → lib/components}/form-field/autosuggest/index.d.ts +0 -0
  280. package/{components → lib/components}/form-field/autosuggest/match-bold.pipe.d.ts +0 -0
  281. package/{components → lib/components}/form-field/checkbox/index.d.ts +0 -0
  282. package/{components → lib/components}/form-field/checkbox-group/checkbox-group.component.d.ts +0 -0
  283. package/{components → lib/components}/form-field/checkbox-group/index.d.ts +0 -0
  284. package/{components → lib/components}/form-field/error/error.component.d.ts +0 -0
  285. package/{components → lib/components}/form-field/error/index.d.ts +0 -0
  286. package/{components → lib/components}/form-field/file-upload/file-upload-text.interface.d.ts +0 -0
  287. package/{components → lib/components}/form-field/file-upload/index.d.ts +0 -0
  288. package/{components → lib/components}/form-field/form-field.constant.d.ts +0 -0
  289. package/{components → lib/components}/form-field/form-field.model.d.ts +0 -0
  290. package/{components → lib/components}/form-field/index.d.ts +0 -0
  291. package/{components → lib/components}/form-field/info/index.d.ts +0 -0
  292. package/{components → lib/components}/form-field/info/info.component.d.ts +0 -0
  293. package/{components → lib/components}/form-field/input/index.d.ts +0 -0
  294. package/{components → lib/components}/form-field/input/input.directive.d.ts +0 -0
  295. package/{components → lib/components}/form-field/input-button/index.d.ts +0 -0
  296. package/{components → lib/components}/form-field/input-icon/index.d.ts +0 -0
  297. package/{components → lib/components}/form-field/input-icon/input-icon.component.d.ts +0 -0
  298. package/{components → lib/components}/form-field/month-input/index.d.ts +0 -0
  299. package/{components → lib/components}/form-field/month-input/month-input-utils.d.ts +0 -0
  300. package/{components → lib/components}/form-field/option-group/index.d.ts +0 -0
  301. package/{components → lib/components}/form-field/option-group/option-group.model.d.ts +0 -0
  302. package/{components → lib/components}/form-field/option-group/option.component.d.ts +0 -0
  303. package/{components → lib/components}/form-field/radio-button/index.d.ts +0 -0
  304. package/{components → lib/components}/form-field/radio-button/radio-button.component.d.ts +0 -0
  305. package/{components → lib/components}/form-field/radio-group/index.d.ts +0 -0
  306. package/{components → lib/components}/form-field/radio-group/radio-group.component.d.ts +0 -0
  307. package/{components → lib/components}/form-field/success/index.d.ts +0 -0
  308. package/{components → lib/components}/form-field/success/success.component.d.ts +0 -0
  309. package/{components → lib/components}/icon/action-icon/index.d.ts +0 -0
  310. package/{components → lib/components}/icon/index.d.ts +0 -0
  311. package/{components → lib/components}/index.d.ts +0 -0
  312. package/{components → lib/components}/layout/index.d.ts +0 -0
  313. package/{components → lib/components}/layout-banners/index.d.ts +0 -0
  314. package/{components → lib/components}/layout-banners/layout-banners.component.d.ts +0 -0
  315. package/{components → lib/components}/loader/index.d.ts +0 -0
  316. package/{components → lib/components}/loader/loader.component.d.ts +0 -0
  317. package/{components → lib/components}/main-navigation/index.d.ts +0 -0
  318. package/{components → lib/components}/main-navigation/main-navigation.imports.d.ts +0 -0
  319. package/{components → lib/components}/main-navigation-menu/index.d.ts +0 -0
  320. package/{components → lib/components}/main-navigation-menu/main-navigation-menu.component.d.ts +0 -0
  321. package/{components → lib/components}/modal/index.d.ts +0 -0
  322. package/{components → lib/components}/modal/modal-content/index.d.ts +0 -0
  323. package/{components → lib/components}/modal/modal-content/modal-content.component.d.ts +0 -0
  324. package/{components → lib/components}/modal/modal-footer/index.d.ts +0 -0
  325. package/{components → lib/components}/modal/modal-footer/modal-footer.component.d.ts +0 -0
  326. package/{components → lib/components}/modal/modal-header/index.d.ts +0 -0
  327. package/{components → lib/components}/modal/modal-header/modal-header.component.d.ts +0 -0
  328. package/{components → lib/components}/modal/modal-ref.d.ts +0 -0
  329. package/{components → lib/components}/modal/modal.service.d.ts +0 -0
  330. package/{components → lib/components}/multi-select/checkbox-data.interface.d.ts +0 -0
  331. package/{components → lib/components}/multi-select/index.d.ts +0 -0
  332. package/{components → lib/components}/multi-select/select-all-text.interface.d.ts +0 -0
  333. package/{components → lib/components}/pill/index.d.ts +0 -0
  334. package/{components → lib/components}/pill/pill.component.d.ts +0 -0
  335. package/{components → lib/components}/popover/index.d.ts +0 -0
  336. package/{components → lib/components}/popover/popover-trigger.directive.d.ts +0 -0
  337. package/{components → lib/components}/router-breadcrumbs/index.d.ts +0 -0
  338. package/{components → lib/components}/summary-card/index.d.ts +0 -0
  339. package/{components → lib/components}/summary-card/summary-card-action/summary-card-action.component.d.ts +0 -0
  340. package/{components → lib/components}/summary-card/summary-card-actions/summary-card-actions.component.d.ts +1 -1
  341. package/{components → lib/components}/summary-card/summary-card-avatar/summary-card-avatar.component.d.ts +0 -0
  342. package/{components → lib/components}/summary-card/summary-card-content/summary-card-content.component.d.ts +0 -0
  343. package/{components → lib/components}/summary-card/summary-card-header/summary-card-header.component.d.ts +0 -0
  344. package/{components → lib/components}/summary-card/summary-card-subtitle/summary-card-subtitle.component.d.ts +0 -0
  345. package/{components → lib/components}/summary-card/summary-card-tag/summary-card-tag.component.d.ts +0 -0
  346. package/{components → lib/components}/summary-card/summary-card-tags/summary-card-tags.component.d.ts +0 -0
  347. package/{components → lib/components}/summary-card/summary-card.component.d.ts +0 -0
  348. package/{components → lib/components}/summary-card/summary-card.model.d.ts +0 -0
  349. package/{components → lib/components}/tab/index.d.ts +0 -0
  350. package/{components → lib/components}/tab-group/index.d.ts +0 -0
  351. package/{components → lib/components}/tag/index.d.ts +0 -0
  352. package/{components → lib/components}/toast/index.d.ts +0 -0
  353. package/{components → lib/components}/toast/toast.service.d.ts +0 -0
  354. package/{components → lib/components}/tooltip/index.d.ts +0 -0
  355. package/{components → lib/components}/tooltip/tooltip.component.d.ts +0 -0
  356. package/{components → lib/components}/tooltip/tooltip.directive.d.ts +1 -1
  357. /package/{models → lib/models}/aria.model.d.ts +0 -0
  358. /package/{models → lib/models}/index.d.ts +0 -0
@@ -1,1360 +0,0 @@
1
- @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=block");
2
- :root {
3
- /* Colors */
4
- --_grey-700: 195, 100%, 10%;
5
- --_grey-600: 196, 13%, 29%;
6
- --_grey-500: 197, 7%, 40%;
7
- --_grey-400: 204, 2%, 54%;
8
- --_grey-300: 192, 5%, 82%;
9
- --_grey-200: 204, 11%, 91%;
10
- --_grey-100: 200, 16%, 96%;
11
- --_white: 0, 0%, 100%;
12
- --ndw-color-grey-700: hsl(var(--_grey-700));
13
- --ndw-color-grey-600: hsl(var(--_grey-600));
14
- --ndw-color-grey-500: hsl(var(--_grey-500));
15
- --ndw-color-grey-400: hsl(var(--_grey-400));
16
- --ndw-color-grey-300: hsl(var(--_grey-300));
17
- --ndw-color-grey-200: hsl(var(--_grey-200));
18
- --ndw-color-grey-100: hsl(var(--_grey-100));
19
- --ndw-color-white: hsl(var(--_white));
20
- --_primary: 19, 100%;
21
- --_primary-050: var(--_primary), 95%;
22
- --_primary-100: var(--_primary), 80%;
23
- --_primary-200: var(--_primary), 73%;
24
- --_primary-300: var(--_primary), 62%;
25
- --_primary-400: var(--_primary), 50%;
26
- --_primary-500: var(--_primary), 40%;
27
- --_primary-600: var(--_primary), 35%;
28
- --_primary-700: var(--_primary), 27%;
29
- --_primary-800: var(--_primary), 15%;
30
- --ndw-color-primary-050: hsl(var(--_primary-050));
31
- --ndw-color-primary-100: hsl(var(--_primary-100));
32
- --ndw-color-primary-200: hsl(var(--_primary-200));
33
- --ndw-color-primary-300: hsl(var(--_primary-300));
34
- --ndw-color-primary-400: hsl(var(--_primary-400));
35
- --ndw-color-primary-500: hsl(var(--_primary-500));
36
- --ndw-color-primary-600: hsl(var(--_primary-600));
37
- --ndw-color-primary-700: hsl(var(--_primary-700));
38
- --ndw-color-primary-800: hsl(var(--_primary-800));
39
- --ndw-color-primary: var(--ndw-color-primary-500);
40
- --ndw-color-primary-hover: var(--ndw-color-primary-600);
41
- --ndw-color-primary-active: var(--ndw-color-primary-700);
42
- --_secondary-050: 209, 100%, 96%;
43
- --_secondary-100: 209, 85%, 91%;
44
- --_secondary-200: 209, 85%, 78%;
45
- --_secondary-300: 209, 85%, 69%;
46
- --_secondary-400: 208, 100%, 46%;
47
- --_secondary-500: 208, 100%, 41%;
48
- --_secondary-600: 209, 100%, 32%;
49
- --_secondary-700: 209, 100%, 18%;
50
- --ndw-color-secondary-050: hsl(var(--_secondary-050));
51
- --ndw-color-secondary-100: hsl(var(--_secondary-100));
52
- --ndw-color-secondary-200: hsl(var(--_secondary-200));
53
- --ndw-color-secondary-300: hsl(var(--_secondary-300));
54
- --ndw-color-secondary-400: hsl(var(--_secondary-400));
55
- --ndw-color-secondary-500: hsl(var(--_secondary-500));
56
- --ndw-color-secondary-600: hsl(var(--_secondary-600));
57
- --ndw-color-secondary-700: hsl(var(--_secondary-700));
58
- --ndw-color-secondary: var(--ndw-color-secondary-500);
59
- --ndw-color-secondary-hover: var(--ndw-color-secondary-600);
60
- --ndw-color-secondary-active: var(--ndw-color-secondary-700);
61
- --_tertiary-400: 43, 100%, 50%;
62
- --_tertiary-500: 42, 100%, 43%;
63
- --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
64
- --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
65
- --_link: 208, 100%;
66
- --_link-400: var(--_link), 41%;
67
- --_link-500: var(--_link), 32%;
68
- --ndw-color-link-400: hsl(var(--_link-400));
69
- --ndw-color-link-500: hsl(var(--_link-500));
70
- --_positive: 133, 92%;
71
- --_positive-100: 117, 56%, 92%;
72
- --_positive-500: var(--_positive), 33%;
73
- --_positive-600: var(--_positive), 24%;
74
- --_warning: 43, 93%;
75
- --_warning-100: 44, 100%, 94%;
76
- --_warning-500: var(--_warning), 43%;
77
- --_warning-600: 42, 83%, 32%;
78
- --_alternative: 292, 100%;
79
- --_alternative-100: var(--_alternative), 95%;
80
- --_alternative-500: 292, 95%, 33%;
81
- --_critical: 0, 100%;
82
- --_critical-100: var(--_critical), 98%;
83
- --_critical-200: var(--_critical), 95%;
84
- --_critical-300: var(--_critical), 90%;
85
- --_critical-500: var(--_critical), 46%;
86
- --_info-100: 210, 100%, 96%;
87
- --_info-200: 210, 86%, 91%;
88
- --_info-500: 208, 100%, 41%;
89
- --ndw-color-positive-100: hsl(var(--_positive-100));
90
- --ndw-color-positive-500: hsl(var(--_positive-500));
91
- --ndw-color-positive-600: hsl(var(--_positive-600));
92
- --ndw-color-warning-100: hsl(var(--_warning-100));
93
- --ndw-color-warning-500: hsl(var(--_warning-500));
94
- --ndw-color-warning-600: hsl(var(--_warning-600));
95
- --ndw-color-alternative-100: hsl(var(--_alternative-100));
96
- --ndw-color-alternative-500: hsl(var(--_alternative-500));
97
- --ndw-color-critical-100: hsl(var(--_critical-100));
98
- --ndw-color-critical-200: hsl(var(--_critical-200));
99
- --ndw-color-critical-300: hsl(var(--_critical-300));
100
- --ndw-color-critical-500: hsl(var(--_critical-500));
101
- --ndw-color-info-100: hsl(var(--_info-100));
102
- --ndw-color-info-200: hsl(var(--_info-200));
103
- --ndw-color-info-500: hsl(var(--_info-500));
104
- --ndw-color-notification: hsl(19, 100%, 35%);
105
- --_data-a-500: 133, 100%, 21%;
106
- --_data-a-100: 101, 61%, 81%;
107
- --_data-b-500: 0, 0%, 27%;
108
- --_data-b-100: 0, 0%, 87%;
109
- --_data-c-500: 209, 97%, 38%;
110
- --_data-c-100: 194, 95%, 84%;
111
- --_data-d-500: 292, 95%, 33%;
112
- --_data-d-100: 292, 100%, 87%;
113
- --_data-e-500: 51, 95%, 23%;
114
- --_data-e-100: 54, 89%, 79%;
115
- --_data-f-500: 0, 97%, 35%;
116
- --_data-f-100: 0, 100%, 94%;
117
- --ndw-color-data-a-500: hsl(var(--_data-a-500));
118
- --ndw-color-data-a-100: hsl(var(--_data-a-100));
119
- --ndw-color-data-b-500: hsl(var(--_data-b-500));
120
- --ndw-color-data-b-100: hsl(var(--_data-b-100));
121
- --ndw-color-data-c-500: hsl(var(--_data-c-500));
122
- --ndw-color-data-c-100: hsl(var(--_data-c-100));
123
- --ndw-color-data-d-500: hsl(var(--_data-d-500));
124
- --ndw-color-data-d-100: hsl(var(--_data-d-100));
125
- --ndw-color-data-e-500: hsl(var(--_data-e-500));
126
- --ndw-color-data-e-100: hsl(var(--_data-e-100));
127
- --ndw-color-data-f-500: hsl(var(--_data-f-500));
128
- --ndw-color-data-f-100: hsl(var(--_data-f-100));
129
- --_alpha-black: 0, 0%, 0%;
130
- --_alpha-007: 0.07;
131
- --_alpha-015: 0.15;
132
- --_alpha-040: 0.4;
133
- --ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));
134
- --ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));
135
- --ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));
136
- --ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));
137
- --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
138
- --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
139
- --ndw-color-background: var(--ndw-color-primary);
140
- --ndw-color-background-hover: var(--ndw-color-primary-hover);
141
- --ndw-color-background-active: var(--ndw-color-primary-active);
142
- --ndw-color-background-disabled: var(--ndw-color-grey-300);
143
- --ndw-color-foreground: var(--ndw-color-white);
144
- --ndw-color-foreground-hover: var(--ndw-color-white);
145
- --ndw-color-foreground-active: var(--ndw-color-white);
146
- --ndw-color-text: var(--ndw-color-grey-700);
147
- }
148
-
149
- [data-theme=ntm] {
150
- /* Colors */
151
- --_primary-050: 197, 35%, 92%;
152
- --_primary-100: 197, 35%, 92%;
153
- --_primary-200: 197, 35%, 92%;
154
- --_primary-300: 197, 35%, 92%;
155
- --_primary-400: 197, 35%, 92%;
156
- --_primary-500: 203, 100%, 17%;
157
- --_primary-600: 203, 100%, 17%;
158
- --_primary-700: 203, 100%, 17%;
159
- --_primary-800: 203, 100%, 17%;
160
- --ndw-color-primary-050: hsl(var(--_primary-050));
161
- --ndw-color-primary-100: hsl(var(--_primary-100));
162
- --ndw-color-primary-200: hsl(var(--_primary-200));
163
- --ndw-color-primary-300: hsl(var(--_primary-300));
164
- --ndw-color-primary-400: hsl(var(--_primary-400));
165
- --ndw-color-primary-500: hsl(var(--_primary-500));
166
- --ndw-color-primary-600: hsl(var(--_primary-600));
167
- --ndw-color-primary-700: hsl(var(--_primary-700));
168
- --ndw-color-primary-800: hsl(var(--_primary-800));
169
- --_secondary: 146, 49%;
170
- --_secondary-050: var(--_secondary), 96%;
171
- --_secondary-100: var(--_secondary), 91%;
172
- --_secondary-200: var(--_secondary), 78%;
173
- --_secondary-300: var(--_secondary), 69%;
174
- --_secondary-400: var(--_secondary), 57%;
175
- --_secondary-500: var(--_secondary), 46%;
176
- --_secondary-600: var(--_secondary), 41%;
177
- --_secondary-700: var(--_secondary), 32%;
178
- --ndw-color-secondary-050: hsl(var(--_secondary-050));
179
- --ndw-color-secondary-100: hsl(var(--_secondary-100));
180
- --ndw-color-secondary-200: hsl(var(--_secondary-200));
181
- --ndw-color-secondary-300: hsl(var(--_secondary-300));
182
- --ndw-color-secondary-400: hsl(var(--_secondary-400));
183
- --ndw-color-secondary-500: hsl(var(--_secondary-500));
184
- --ndw-color-secondary-600: hsl(var(--_secondary-600));
185
- --ndw-color-secondary-700: hsl(var(--_secondary-700));
186
- --_tertiary: 36, 100%;
187
- --_tertiary-400: var(--_tertiary), 57%;
188
- --_tertiary-500: var(--_tertiary), 50%;
189
- --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
190
- --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
191
- --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
192
- --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
193
- --ndw-color-background: var(--ndw-color-primary);
194
- --ndw-color-background-hover: var(--ndw-color-secondary);
195
- --ndw-color-background-active: var(--ndw-color-secondary-active);
196
- --ndw-color-background-disabled: var(--ndw-color-grey-200);
197
- --ndw-color-foreground: var(--ndw-color-white);
198
- --ndw-color-foreground-hover: var(--ndw-color-white);
199
- --ndw-color-foreground-active: var(--ndw-color-white);
200
- --ndw-color-text: var(--ndw-color-primary);
201
- }
202
-
203
- [data-theme=nwb] {
204
- /* Colors */
205
- --_primary-050: 176, 44%, 95%;
206
- --_primary-100: 176, 44%, 82%;
207
- --_primary-200: 176, 44%, 73%;
208
- --_primary-300: 176, 50%, 60%;
209
- --_primary-400: 176, 55%, 48%;
210
- --_primary-500: 176, 58%, 41%;
211
- --_primary-600: 176, 60%, 34%;
212
- --_primary-700: 176, 68%, 21%;
213
- --_primary-800: 176, 68%, 13%;
214
- --ndw-color-primary-050: hsl(var(--_primary-050));
215
- --ndw-color-primary-100: hsl(var(--_primary-100));
216
- --ndw-color-primary-200: hsl(var(--_primary-200));
217
- --ndw-color-primary-300: hsl(var(--_primary-300));
218
- --ndw-color-primary-400: hsl(var(--_primary-400));
219
- --ndw-color-primary-500: hsl(var(--_primary-500));
220
- --ndw-color-primary-600: hsl(var(--_primary-600));
221
- --ndw-color-primary-700: hsl(var(--_primary-700));
222
- --ndw-color-primary-800: hsl(var(--_primary-800));
223
- --_secondary-050: 0, 100%, 95%;
224
- --_secondary-100: 0, 100%, 90%;
225
- --_secondary-200: 0, 100%, 82%;
226
- --_secondary-300: 0, 100%, 74%;
227
- --_secondary-400: 0, 100%, 66%;
228
- --_secondary-500: 0, 100%, 58%;
229
- --_secondary-600: 0, 75%, 42%;
230
- --_secondary-700: 0, 79%, 26%;
231
- --ndw-color-secondary-050: hsl(var(--_secondary-050));
232
- --ndw-color-secondary-100: hsl(var(--_secondary-100));
233
- --ndw-color-secondary-200: hsl(var(--_secondary-200));
234
- --ndw-color-secondary-300: hsl(var(--_secondary-300));
235
- --ndw-color-secondary-400: hsl(var(--_secondary-400));
236
- --ndw-color-secondary-500: hsl(var(--_secondary-500));
237
- --ndw-color-secondary-600: hsl(var(--_secondary-600));
238
- --ndw-color-secondary-700: hsl(var(--_secondary-700));
239
- --_tertiary-400: 309, 29%, 36%;
240
- --_tertiary-500: 309, 29%, 18%;
241
- --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
242
- --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
243
- --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
244
- --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
245
- }
246
-
247
- .cdk-visually-hidden {
248
- border: 0;
249
- clip: rect(0 0 0 0);
250
- height: 1px;
251
- margin: -1px;
252
- overflow: hidden;
253
- padding: 0;
254
- position: absolute;
255
- width: 1px;
256
- white-space: nowrap;
257
- outline: 0;
258
- -webkit-appearance: none;
259
- -moz-appearance: none;
260
- left: 0;
261
- }
262
-
263
- [dir=rtl] .cdk-visually-hidden {
264
- left: auto;
265
- right: 0;
266
- }
267
-
268
- .cdk-overlay-container, .cdk-global-overlay-wrapper {
269
- pointer-events: none;
270
- top: 0;
271
- left: 0;
272
- height: 100%;
273
- width: 100%;
274
- }
275
-
276
- .cdk-overlay-container {
277
- position: fixed;
278
- z-index: 1000;
279
- }
280
-
281
- .cdk-overlay-container:empty {
282
- display: none;
283
- }
284
-
285
- .cdk-global-overlay-wrapper {
286
- display: flex;
287
- position: absolute;
288
- z-index: 1000;
289
- }
290
-
291
- .cdk-overlay-pane {
292
- position: absolute;
293
- pointer-events: auto;
294
- box-sizing: border-box;
295
- z-index: 1000;
296
- display: flex;
297
- max-width: 100%;
298
- max-height: 100%;
299
- }
300
-
301
- .cdk-overlay-backdrop {
302
- position: absolute;
303
- top: 0;
304
- bottom: 0;
305
- left: 0;
306
- right: 0;
307
- z-index: 1000;
308
- pointer-events: auto;
309
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
310
- transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
311
- opacity: 0;
312
- }
313
-
314
- .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
315
- opacity: 1;
316
- }
317
-
318
- .cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
319
- opacity: 0.6;
320
- }
321
-
322
- .cdk-overlay-dark-backdrop {
323
- background: rgba(0, 0, 0, 0.32);
324
- }
325
-
326
- .cdk-overlay-transparent-backdrop {
327
- transition: visibility 1ms linear, opacity 1ms linear;
328
- visibility: hidden;
329
- opacity: 1;
330
- }
331
-
332
- .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
333
- opacity: 0;
334
- visibility: visible;
335
- }
336
-
337
- .cdk-overlay-backdrop-noop-animation {
338
- transition: none;
339
- }
340
-
341
- .cdk-overlay-connected-position-bounding-box {
342
- position: absolute;
343
- z-index: 1000;
344
- display: flex;
345
- flex-direction: column;
346
- min-width: 1px;
347
- min-height: 1px;
348
- }
349
-
350
- .cdk-global-scrollblock {
351
- position: fixed;
352
- width: 100%;
353
- overflow-y: scroll;
354
- }
355
-
356
- :root {
357
- /* Spacing */
358
- --ndw-spacing-3xs: 0.125rem;
359
- --ndw-spacing-2xs: 0.25rem;
360
- --ndw-spacing-xs: 0.5rem;
361
- --ndw-spacing-sm: 0.75rem;
362
- --ndw-spacing-md: 1rem;
363
- --ndw-spacing-lg: 1.5rem;
364
- --ndw-spacing-xl: 2rem;
365
- --ndw-spacing-2xl: 2.5rem;
366
- --ndw-spacing-3xl: 3rem;
367
- --ndw-spacing-4xl: 5rem;
368
- --ndw-spacing-5xl: 8rem;
369
- /* Border */
370
- --ndw-border-size-sm: 1px;
371
- --ndw-border-size-md: 2px;
372
- --ndw-border-size-lg: 3px;
373
- /* Radius */
374
- --ndw-border-radius-xs: 0.125rem;
375
- --ndw-border-radius-sm: 0.25rem;
376
- --ndw-border-radius-md: 0.5rem;
377
- --ndw-border-radius-lg: 1.5rem;
378
- /* Elevation */
379
- --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_link-500), 0.25);
380
- --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
381
- --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
382
- --ndw-elevation-popover: 0 0.5rem 1.25rem hsla(var(--_grey-600), 0.125);
383
- --ndw-backdrop-color: var(--ndw-alpha-black-040);
384
- /* Animation */
385
- --ndw-animation-speed-very-fast: 100ms;
386
- --ndw-animation-speed-fast: 200ms;
387
- --ndw-animation-speed-default: 300ms;
388
- --ndw-animation-speed-slow: 500ms;
389
- /* Icon Size */
390
- --ndw-icon-size-md: 1rem;
391
- --ndw-icon-size-lg: 1.5rem;
392
- /* Mult-select Size */
393
- --multi-select-default-width: 18.75rem;
394
- /* Typography */
395
- --ndw-font-family-body: "Nunito Sans", sans-serif;
396
- --ndw-font-family-heading: "DM Sans", sans-serif;
397
- --ndw-base-font-size: 16px;
398
- --ndw-font-size-2xs: 0.5625rem;
399
- --ndw-font-size-xs: 0.6875rem;
400
- --ndw-font-size-sm: 0.8125rem;
401
- --ndw-font-size-md: 1.125rem;
402
- --ndw-font-size-lg: 1.25rem;
403
- --ndw-font-size-xl: 1.5rem;
404
- --ndw-font-weight-regular: 400;
405
- --ndw-font-weight-bold: 650;
406
- --ndw-line-height-sm: 1.375rem;
407
- --ndw-line-height-md: 1.5rem;
408
- /* Transform */
409
- --ndw-rotate-half: rotate(180deg);
410
- /* Modal */
411
- --ndw-modal-width-sm: 31.25rem;
412
- --ndw-modal-width-md: 45rem;
413
- }
414
-
415
- [data-theme=ntm] {
416
- /* Spacing */
417
- --ndw-spacing-3xs: 0.125rem;
418
- --ndw-spacing-2xs: 0.5rem;
419
- --ndw-spacing-xs: 1rem;
420
- --ndw-spacing-sm: 1.25rem;
421
- --ndw-spacing-md: 1rem;
422
- --ndw-spacing-lg: 2rem;
423
- --ndw-spacing-xl: 2.5rem;
424
- --ndw-spacing-2xl: 3rem;
425
- --ndw-spacing-3xl: 3rem;
426
- --ndw-spacing-4xl: 5rem;
427
- --ndw-spacing-5xl: 8rem;
428
- /* Typography */
429
- --ndw-font-family-body: "Roboto Flex", sans-serif;
430
- --ndw-font-family-heading: "Roboto Flex", sans-serif;
431
- --ndw-font-size-2xs: 0.5625rem;
432
- --ndw-font-size-xs: 0.6875rem;
433
- --ndw-font-size-sm: 1.125rem;
434
- --ndw-font-size-md: 1.125rem;
435
- --ndw-font-size-lg: 1.25rem;
436
- --ndw-font-size-xl: 1.5rem;
437
- }
438
-
439
- /* Screen sizes */
440
- /**
441
- Utilities for improving accessibility with screen readers.
442
- */
443
- .sr-only {
444
- position: absolute;
445
- overflow: hidden;
446
- width: 1px;
447
- height: 1px;
448
- padding: 0;
449
- margin: -1px;
450
- border-width: 0;
451
- white-space: nowrap;
452
- clip: rect(0, 0, 0, 0);
453
- }
454
-
455
- /* Mixins */
456
- /* Classes */
457
- .ndw-heading-xl {
458
- font-family: var(--ndw-font-family-heading);
459
- font-size: 2.5rem;
460
- font-weight: var(--ndw-font-weight-bold);
461
- line-height: 150%;
462
- }
463
-
464
- .ndw-heading-lg {
465
- font-family: var(--ndw-font-family-heading);
466
- font-size: 2rem;
467
- font-weight: var(--ndw-font-weight-bold);
468
- line-height: 150%;
469
- }
470
-
471
- .ndw-heading-md {
472
- font-family: var(--ndw-font-family-heading);
473
- font-size: 1.5rem;
474
- font-weight: var(--ndw-font-weight-bold);
475
- line-height: 150%;
476
- }
477
-
478
- .ndw-heading-sm {
479
- font-family: var(--ndw-font-family-heading);
480
- font-size: 1.25rem;
481
- font-weight: var(--ndw-font-weight-bold);
482
- line-height: 150%;
483
- }
484
-
485
- .ndw-paragraph-bold-xl {
486
- font-family: var(--ndw-font-family-body);
487
- font-size: 1.125rem;
488
- font-weight: var(--ndw-font-weight-bold);
489
- line-height: 150%;
490
- }
491
-
492
- .ndw-paragraph-xl {
493
- font-family: var(--ndw-font-family-body);
494
- font-size: 1.125rem;
495
- font-weight: var(--ndw-font-weight-regular);
496
- line-height: 150%;
497
- }
498
-
499
- .ndw-paragraph-bold-lg {
500
- font-family: var(--ndw-font-family-body);
501
- font-size: 1rem;
502
- font-weight: var(--ndw-font-weight-bold);
503
- line-height: 150%;
504
- }
505
-
506
- .ndw-paragraph-lg {
507
- font-family: var(--ndw-font-family-body);
508
- font-size: 1rem;
509
- font-weight: var(--ndw-font-weight-regular);
510
- line-height: 150%;
511
- }
512
-
513
- .ndw-paragraph-bold-md {
514
- font-family: var(--ndw-font-family-body);
515
- font-size: 0.8125rem;
516
- font-weight: var(--ndw-font-weight-bold);
517
- line-height: 150%;
518
- }
519
-
520
- .ndw-paragraph-md {
521
- font-family: var(--ndw-font-family-body);
522
- font-size: 0.8125rem;
523
- font-weight: var(--ndw-font-weight-regular);
524
- line-height: 150%;
525
- }
526
-
527
- .ndw-paragraph-bold-sm {
528
- font-family: var(--ndw-font-family-body);
529
- font-size: 0.6875rem;
530
- font-weight: var(--ndw-font-weight-bold);
531
- line-height: 150%;
532
- }
533
-
534
- .ndw-paragraph-sm {
535
- font-family: var(--ndw-font-family-body);
536
- font-size: 0.6875rem;
537
- font-weight: var(--ndw-font-weight-regular);
538
- line-height: 150%;
539
- }
540
-
541
- .grid {
542
- display: grid;
543
- justify-items: stretch;
544
- grid-template-columns: repeat(var(--grid-columns), minmax(1rem, 1fr));
545
- gap: var(--grid-spacing);
546
- padding: 0 var(--grid-spacing);
547
- margin: 0 auto;
548
- width: 100%;
549
- min-width: min-content;
550
- max-width: 1440px;
551
- }
552
- .grid .column-1 {
553
- grid-column: span min(1, var(--grid-columns));
554
- }
555
- .grid .column-2 {
556
- grid-column: span min(2, var(--grid-columns));
557
- }
558
- .grid .column-3 {
559
- grid-column: span min(3, var(--grid-columns));
560
- }
561
- .grid .column-4 {
562
- grid-column: span min(4, var(--grid-columns));
563
- }
564
- .grid .column-5 {
565
- grid-column: span min(5, var(--grid-columns));
566
- }
567
- .grid .column-6 {
568
- grid-column: span min(6, var(--grid-columns));
569
- }
570
- .grid .column-7 {
571
- grid-column: span min(7, var(--grid-columns));
572
- }
573
- .grid .column-8 {
574
- grid-column: span min(8, var(--grid-columns));
575
- }
576
- .grid .column-9 {
577
- grid-column: span min(9, var(--grid-columns));
578
- }
579
- .grid .column-10 {
580
- grid-column: span min(10, var(--grid-columns));
581
- }
582
- .grid .column-11 {
583
- grid-column: span min(11, var(--grid-columns));
584
- }
585
- .grid .column-12 {
586
- grid-column: span min(12, var(--grid-columns));
587
- }
588
- @media screen and (max-width: 1024px) {
589
- .grid {
590
- --grid-columns: 6;
591
- --grid-spacing: var(--ndw-spacing-md);
592
- }
593
- .grid .column-md-1 {
594
- display: none;
595
- }
596
- .grid .column-md-2 {
597
- display: none;
598
- }
599
- .grid .column-md-3 {
600
- display: none;
601
- }
602
- .grid .column-md-4 {
603
- display: none;
604
- }
605
- .grid .column-md-5 {
606
- display: none;
607
- }
608
- .grid .column-md-6 {
609
- display: none;
610
- }
611
- .grid .column-md-7 {
612
- display: none;
613
- }
614
- .grid .column-md-8 {
615
- display: none;
616
- }
617
- .grid .column-md-9 {
618
- display: none;
619
- }
620
- .grid .column-md-10 {
621
- display: none;
622
- }
623
- .grid .column-md-11 {
624
- display: none;
625
- }
626
- .grid .column-md-12 {
627
- display: none;
628
- }
629
- .grid .column-sm-1 {
630
- grid-column: span 1;
631
- display: initial;
632
- }
633
- .grid .column-sm-2 {
634
- grid-column: span 2;
635
- display: initial;
636
- }
637
- .grid .column-sm-3 {
638
- grid-column: span 3;
639
- display: initial;
640
- }
641
- .grid .column-sm-4 {
642
- grid-column: span 4;
643
- display: initial;
644
- }
645
- .grid .column-sm-5 {
646
- grid-column: span 5;
647
- display: initial;
648
- }
649
- .grid .column-sm-6 {
650
- grid-column: span 6;
651
- display: initial;
652
- }
653
- }
654
- @media screen and (min-width: 1025px) {
655
- .grid {
656
- --grid-columns: 12;
657
- --grid-spacing: var(--ndw-spacing-lg);
658
- }
659
- .grid .column-md-1 {
660
- grid-column: span 1;
661
- display: initial;
662
- }
663
- .grid .column-md-2 {
664
- grid-column: span 2;
665
- display: initial;
666
- }
667
- .grid .column-md-3 {
668
- grid-column: span 3;
669
- display: initial;
670
- }
671
- .grid .column-md-4 {
672
- grid-column: span 4;
673
- display: initial;
674
- }
675
- .grid .column-md-5 {
676
- grid-column: span 5;
677
- display: initial;
678
- }
679
- .grid .column-md-6 {
680
- grid-column: span 6;
681
- display: initial;
682
- }
683
- .grid .column-md-7 {
684
- grid-column: span 7;
685
- display: initial;
686
- }
687
- .grid .column-md-8 {
688
- grid-column: span 8;
689
- display: initial;
690
- }
691
- .grid .column-md-9 {
692
- grid-column: span 9;
693
- display: initial;
694
- }
695
- .grid .column-md-10 {
696
- grid-column: span 10;
697
- display: initial;
698
- }
699
- .grid .column-md-11 {
700
- grid-column: span 11;
701
- display: initial;
702
- }
703
- .grid .column-md-12 {
704
- grid-column: span 12;
705
- display: initial;
706
- }
707
- }
708
-
709
- .ndw-overlay-backdrop {
710
- background-color: var(--ndw-backdrop-color);
711
- }
712
-
713
- .cdk-overlay-pane:has(> ndw-modal) {
714
- max-height: 90vh;
715
- }
716
-
717
- button:not(:disabled) {
718
- cursor: pointer;
719
- }
720
-
721
- [ndwButton] {
722
- align-items: center;
723
- background-color: var(--ndw-color-background);
724
- border: var(--ndw-border-size-sm) solid var(--ndw-color-background);
725
- border-radius: var(--ndw-border-radius-sm);
726
- box-sizing: border-box;
727
- color: var(--ndw-color-foreground);
728
- cursor: pointer;
729
- display: flex;
730
- font-family: var(--ndw-font-family-body);
731
- font-size: var(--ndw-font-size-sm);
732
- font-weight: var(--ndw-font-weight-regular);
733
- gap: var(--ndw-spacing-2xs);
734
- height: var(--ndw-spacing-xl);
735
- justify-content: center;
736
- padding: var(--ndw-spacing-2xs) var(--ndw-spacing-xs);
737
- text-align: start;
738
- text-decoration: none;
739
- transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
740
- width: fit-content;
741
- }
742
- [ndwButton] ndw-icon {
743
- font-size: var(--ndw-spacing-md);
744
- }
745
- [ndwButton] ndw-loader {
746
- height: var(--ndw-spacing-md);
747
- width: var(--ndw-spacing-md);
748
- }
749
- [ndwButton]:hover {
750
- background-color: var(--ndw-color-background-hover);
751
- border-color: var(--ndw-color-background-hover);
752
- color: var(--ndw-color-foreground-hover);
753
- }
754
- [ndwButton]:active {
755
- background-color: var(--ndw-color-background-active);
756
- border-color: var(--ndw-color-background-active);
757
- color: var(--ndw-color-foreground-active);
758
- }
759
- [ndwButton][secondary], [ndwButton][tertiary] {
760
- background-color: transparent;
761
- color: var(--ndw-color-background);
762
- }
763
- [ndwButton][secondary]:hover, [ndwButton][tertiary]:hover {
764
- color: var(--ndw-color-background);
765
- }
766
- [ndwButton][secondary]:active, [ndwButton][tertiary]:active {
767
- color: var(--ndw-color-background);
768
- }
769
- [ndwButton][secondary][alternative], [ndwButton][tertiary][alternative] {
770
- color: var(--ndw-color-text);
771
- }
772
- [ndwButton][secondary][alternative]:hover, [ndwButton][tertiary][alternative]:hover {
773
- background-color: var(--ndw-alpha-black-007);
774
- }
775
- [ndwButton][secondary][alternative]:active, [ndwButton][tertiary][alternative]:active {
776
- background-color: var(--ndw-alpha-black-015);
777
- }
778
- [ndwButton][secondary] {
779
- border-color: var(--ndw-color-background);
780
- }
781
- [ndwButton][secondary]:hover {
782
- background-color: var(--ndw-alpha-primary-007);
783
- border-color: var(--ndw-color-background-hover);
784
- }
785
- [ndwButton][secondary]:active {
786
- background-color: var(--ndw-alpha-primary-015);
787
- border-color: var(--ndw-color-background-active);
788
- }
789
- [ndwButton][secondary][alternative] {
790
- border-color: var(--ndw-color-grey-300);
791
- }
792
- [ndwButton][secondary][alternative]:hover {
793
- border-color: var(--ndw-color-grey-500);
794
- }
795
- [ndwButton][secondary][alternative]:active {
796
- border-color: var(--ndw-color-grey-700);
797
- }
798
- [ndwButton][tertiary] {
799
- border-color: transparent;
800
- border-radius: var(--button-ter-border-radius, var(--ndw-border-radius-sm));
801
- border-width: var(--button-ter-border-width, var(--ndw-spacing-3xs));
802
- padding-inline: var(--button-ter-padding-inline, var(--ndw-spacing-xs));
803
- }
804
- [ndwButton][tertiary]:hover {
805
- background-color: var(--button-ter-bg-color-hover, var(--ndw-alpha-primary-007));
806
- border-color: var(--button-ter-border-color-hover, transparent);
807
- }
808
- [ndwButton][tertiary]:active {
809
- background-color: var(--button-ter-bg-color-active, var(--ndw-alpha-primary-015));
810
- border-color: var(--button-ter-border-color-active, transparent);
811
- }
812
- [ndwButton][extra-small] {
813
- height: var(--ndw-spacing-lg);
814
- padding-inline: var(--ndw-spacing-2xs);
815
- }
816
- [ndwButton][large] {
817
- height: var(--ndw-spacing-2xl);
818
- padding-inline: var(--ndw-spacing-sm);
819
- }
820
- [ndwButton][disabled] {
821
- background-color: var(--ndw-color-background-disabled);
822
- border-color: var(--ndw-color-background-disabled);
823
- color: var(--ndw-color-text);
824
- pointer-events: none;
825
- user-select: none;
826
- }
827
-
828
- [data-theme=ntm] [ndwButton][secondary]:hover, [data-theme=ntm] [ndwButton][tertiary]:hover {
829
- color: var(--ndw-color-secondary);
830
- }
831
- [data-theme=ntm] [ndwButton][secondary]:active, [data-theme=ntm] [ndwButton][tertiary]:active {
832
- color: var(--ndw-color-secondary-hover);
833
- }
834
- [data-theme=ntm] [ndwButton][secondary]:hover {
835
- background-color: transparent;
836
- border-color: var(--ndw-color-secondary);
837
- }
838
- [data-theme=ntm] [ndwButton][secondary]:active {
839
- background-color: var(--ndw-alpha-primary-007);
840
- border-color: var(--ndw-color-secondary-hover);
841
- }
842
- [data-theme=ntm] [ndwButton][tertiary] {
843
- border-radius: 0;
844
- border-width: 0 0 var(--ndw-spacing-3xs);
845
- padding-inline: 0;
846
- }
847
- [data-theme=ntm] [ndwButton][tertiary]:hover {
848
- background-color: transparent;
849
- border-color: transparent;
850
- border-bottom-color: var(--ndw-color-secondary);
851
- }
852
- [data-theme=ntm] [ndwButton][tertiary]:active {
853
- background-color: transparent;
854
- border-color: transparent;
855
- border-bottom-color: var(--ndw-color-secondary-hover);
856
- }
857
- [data-theme=ntm] [ndwButton][disabled] {
858
- border-color: var(--ndw-color-grey-400);
859
- color: var(--ndw-color-grey-400);
860
- }
861
- [data-theme=ntm] [ndwButton][disabled][tertiary] {
862
- background-color: transparent;
863
- }
864
-
865
- hr[ndwDivider] {
866
- background-color: var(--ndw-color-grey-300);
867
- border: none;
868
- height: var(--ndw-border-size-sm);
869
- margin: var(--ndw-spacing-xs) 0;
870
- }
871
- hr[noMargin] {
872
- margin-block: 0;
873
- }
874
-
875
- @keyframes show {
876
- from {
877
- opacity: 0;
878
- }
879
- to {
880
- opacity: 1;
881
- }
882
- }
883
- [ndwButton][filter] {
884
- background-color: var(--ndw-color-white);
885
- border-color: var(--ndw-color-grey-300);
886
- color: var(--ndw-color-grey-700);
887
- height: var(--ndw-spacing-2xl);
888
- }
889
- [ndwButton][filter] ndw-icon.button-icon {
890
- color: var(--ndw-color-primary);
891
- }
892
- [ndwButton][filter] ndw-icon.prefix-icon {
893
- color: var(--ndw-color-grey-300);
894
- }
895
- [ndwButton][filter]:hover {
896
- border-color: var(--ndw-color-primary);
897
- }
898
- [ndwButton][filter]:active, [ndwButton][filter]:focus, [ndwButton][filter]:focus-visible {
899
- border-color: var(--ndw-color-info-500);
900
- box-shadow: var(--ndw-elevation-info);
901
- outline-color: var(--ndw-color-info-500);
902
- }
903
- [ndwButton][filter][disabled] {
904
- background-color: var(--ndw-color-grey-100);
905
- color: var(--ndw-color-grey-500);
906
- pointer-events: none;
907
- user-select: none;
908
- }
909
- [ndwButton][filter][disabled] ndw-icon {
910
- color: var(--ndw-color-grey-500);
911
- }
912
-
913
- .input-container:has(> [ndwInput]) {
914
- display: flex;
915
- align-items: center;
916
- background-color: var(--ndw-color-white);
917
- border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
918
- border-radius: var(--ndw-border-radius-sm);
919
- box-sizing: border-box;
920
- outline: var(--ndw-border-size-sm) solid transparent;
921
- outline-offset: calc(var(--ndw-border-size-sm) * -1);
922
- transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, outline-color 150ms ease-in-out;
923
- padding-inline: var(--ndw-spacing-xs);
924
- gap: var(--ndw-spacing-xs);
925
- }
926
- .input-container:has(> [ndwInput]):has([ndwInput]:hover) {
927
- border-color: var(--ndw-color-grey-400);
928
- }
929
- .input-container:has(> [ndwInput]):has([ndwInput]:active), .input-container:has(> [ndwInput]):has([ndwInput]:focus), .input-container:has(> [ndwInput]):has([ndwInput]:focus-visible) {
930
- border-color: transparent;
931
- box-shadow: var(--ndw-elevation-info);
932
- outline-color: var(--ndw-color-info-500);
933
- }
934
- .input-container:has(> [ndwInput])[success] {
935
- background-color: var(--ndw-color-positive-100);
936
- border-color: var(--ndw-color-positive-500);
937
- }
938
- .input-container:has(> [ndwInput])[success]:hover {
939
- border-color: var(--ndw-color-grey-300);
940
- }
941
- .input-container:has(> [ndwInput])[success]:active, .input-container:has(> [ndwInput])[success]:focus, .input-container:has(> [ndwInput])[success]:focus-visible {
942
- background-color: var(--ndw-color-white);
943
- border-color: transparent;
944
- outline-color: var(--ndw-color-secondary-500);
945
- }
946
- .input-container:has(> [ndwInput])[error] {
947
- background-color: var(--ndw-color-critical-100);
948
- border-color: var(--ndw-color-critical-500);
949
- }
950
- .input-container:has(> [ndwInput])[error]:hover {
951
- border-color: var(--ndw-color-grey-300);
952
- }
953
- .input-container:has(> [ndwInput])[error]:active, .input-container:has(> [ndwInput])[error]:focus, .input-container:has(> [ndwInput])[error]:focus-visible {
954
- background-color: var(--ndw-color-white);
955
- border-color: transparent;
956
- outline-color: var(--ndw-color-secondary-500);
957
- }
958
- .input-container:has(> [ndwInput])[disabled], .input-container:has(> [ndwInput])[readonly] {
959
- background-color: var(--ndw-color-grey-100);
960
- border-color: var(--ndw-color-grey-300);
961
- color: var(--ndw-color-grey-500);
962
- pointer-events: none;
963
- }
964
- .input-container:has(> [ndwInput])[disabled] ndw-icon, .input-container:has(> [ndwInput])[readonly] ndw-icon {
965
- color: var(--ndw-color-grey-300);
966
- }
967
- .input-container:has(> [ndwInput]) > *:has(~ [ndwInput]) {
968
- color: var(--ndw-color-grey-400);
969
- }
970
- .input-container:has(> [ndwInput]) * + [ndwInput] {
971
- padding-inline-start: 0;
972
- }
973
- .input-container:has(> [ndwInput]) [ndwInput]:has(+ *) {
974
- padding-inline-end: 0;
975
- }
976
- .input-container:has(> [ndwInput]) select[ndwInput]:has(+ *) {
977
- padding-inline-end: var(--ndw-spacing-sm);
978
- }
979
- .input-container:has(> [ndwInput]) [ndwInput] {
980
- border: none;
981
- outline: none;
982
- }
983
- .input-container:has(> [ndwInput]) [ndwInput]:hover, .input-container:has(> [ndwInput]) [ndwInput]:active, .input-container:has(> [ndwInput]) [ndwInput]:focus, .input-container:has(> [ndwInput]) [ndwInput]:focus-visible {
984
- border: none;
985
- outline: none;
986
- }
987
-
988
- [ndwInput] {
989
- display: flex;
990
- align-items: center;
991
- background-color: var(--ndw-color-white);
992
- border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
993
- border-radius: var(--ndw-border-radius-sm);
994
- box-sizing: border-box;
995
- outline: var(--ndw-border-size-sm) solid transparent;
996
- outline-offset: calc(var(--ndw-border-size-sm) * -1);
997
- transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, outline-color 150ms ease-in-out;
998
- width: 100%;
999
- padding-inline: var(--ndw-spacing-sm);
1000
- color: var(--ndw-color-grey-700);
1001
- font-family: var(--ndw-font-family-body);
1002
- font-size: var(--ndw-font-size-sm);
1003
- height: var(--ndw-spacing-2xl);
1004
- line-height: var(--ndw-line-height-md);
1005
- border-radius: var(--ndw-border-radius-sm);
1006
- text-overflow: ellipsis;
1007
- white-space: nowrap;
1008
- }
1009
- [ndwInput]:has([ndwInput]:hover) {
1010
- border-color: var(--ndw-color-grey-400);
1011
- }
1012
- [ndwInput]:has([ndwInput]:active), [ndwInput]:has([ndwInput]:focus), [ndwInput]:has([ndwInput]:focus-visible) {
1013
- border-color: transparent;
1014
- box-shadow: var(--ndw-elevation-info);
1015
- outline-color: var(--ndw-color-info-500);
1016
- }
1017
- [ndwInput][success] {
1018
- background-color: var(--ndw-color-positive-100);
1019
- border-color: var(--ndw-color-positive-500);
1020
- }
1021
- [ndwInput][success]:hover {
1022
- border-color: var(--ndw-color-grey-300);
1023
- }
1024
- [ndwInput][success]:active, [ndwInput][success]:focus, [ndwInput][success]:focus-visible {
1025
- background-color: var(--ndw-color-white);
1026
- border-color: transparent;
1027
- outline-color: var(--ndw-color-secondary-500);
1028
- }
1029
- [ndwInput][error] {
1030
- background-color: var(--ndw-color-critical-100);
1031
- border-color: var(--ndw-color-critical-500);
1032
- }
1033
- [ndwInput][error]:hover {
1034
- border-color: var(--ndw-color-grey-300);
1035
- }
1036
- [ndwInput][error]:active, [ndwInput][error]:focus, [ndwInput][error]:focus-visible {
1037
- background-color: var(--ndw-color-white);
1038
- border-color: transparent;
1039
- outline-color: var(--ndw-color-secondary-500);
1040
- }
1041
- [ndwInput][disabled], [ndwInput][readonly] {
1042
- background-color: var(--ndw-color-grey-100);
1043
- border-color: var(--ndw-color-grey-300);
1044
- color: var(--ndw-color-grey-500);
1045
- pointer-events: none;
1046
- }
1047
- [ndwInput][disabled] ndw-icon, [ndwInput][readonly] ndw-icon {
1048
- color: var(--ndw-color-grey-300);
1049
- }
1050
- [ndwInput]::placeholder {
1051
- color: var(--ndw-color-grey-400);
1052
- }
1053
- [ndwInput][type=search]::-webkit-search-decoration, [ndwInput][type=search]::-webkit-search-cancel-button, [ndwInput][type=search]::-webkit-search-results-button, [ndwInput][type=search]::-webkit-search-results-decoration {
1054
- display: none;
1055
- }
1056
- [ndwInput][type=date]::-webkit-calendar-picker-indicator, [ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator, [ndwInput][type=month]::-webkit-calendar-picker-indicator, [ndwInput][type=time]::-webkit-calendar-picker-indicator, [ndwInput][type=week]::-webkit-calendar-picker-indicator {
1057
- cursor: pointer;
1058
- opacity: 0;
1059
- }
1060
-
1061
- select[ndwInput] {
1062
- appearance: none;
1063
- cursor: pointer;
1064
- }
1065
- select[ndwInput][ndw-placeholder],
1066
- select[ndwInput] option[disabled] {
1067
- color: var(--ndw-color-grey-400);
1068
- }
1069
- select[ndwInput] option:not([disabled]) {
1070
- color: var(--ndw-color-grey-700);
1071
- }
1072
-
1073
- textarea[ndwInput] {
1074
- min-height: 4rem;
1075
- padding-block: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
1076
- resize: vertical;
1077
- }
1078
-
1079
- [ndwLabel] {
1080
- align-content: center;
1081
- align-items: center;
1082
- display: grid;
1083
- font-family: var(--ndw-font-family-body);
1084
- font-size: var(--ndw-font-size-sm);
1085
- font-weight: var(--ndw-font-weight-bold);
1086
- gap: var(--ndw-spacing-3xs);
1087
- grid-template-columns: repeat(3, auto);
1088
- justify-content: start;
1089
- line-height: 100%;
1090
- margin-bottom: var(--ndw-spacing-2xs);
1091
- }
1092
- [ndwLabel] ndw-icon {
1093
- color: var(--ndw-color-grey-400);
1094
- font-size: var(--ndw-icon-size-md);
1095
- margin-top: calc(var(--ndw-spacing-3xs) * -1);
1096
- }
1097
- [ndwLabel] .required {
1098
- color: var(--ndw-color-grey-400);
1099
- }
1100
-
1101
- [ndwLink] {
1102
- display: inline-flex;
1103
- align-items: baseline;
1104
- gap: var(--ndw-spacing-2xs);
1105
- padding: 0;
1106
- border: 0;
1107
- font-size: inherit;
1108
- text-decoration: underline var(--ndw-border-size-sm) transparent;
1109
- text-underline-offset: var(--ndw-border-size-md);
1110
- color: var(--ndw-color-link-400);
1111
- background-color: transparent;
1112
- transition: text-decoration-color var(--ndw-animation-speed-fast) ease-in-out;
1113
- }
1114
- [ndwLink] > * {
1115
- align-self: center;
1116
- }
1117
- [ndwLink] ndw-icon {
1118
- font-size: 1.25em;
1119
- overflow: hidden;
1120
- }
1121
- [ndwLink]:hover {
1122
- color: var(--ndw-color-link-500);
1123
- text-decoration-color: var(--ndw-color-link-500);
1124
- }
1125
- [ndwLink][disabled] {
1126
- color: var(--ndw-color-grey-400);
1127
- pointer-events: none;
1128
- user-select: none;
1129
- }
1130
-
1131
- [ndwButton][menu] {
1132
- background-color: transparent;
1133
- border-color: transparent;
1134
- border-radius: 0;
1135
- color: var(--ndw-color-grey-400);
1136
- gap: var(--ndw-spacing-xs);
1137
- height: 2.625rem;
1138
- padding-inline: 0;
1139
- position: relative;
1140
- width: 100%;
1141
- cursor: default;
1142
- }
1143
- [ndwButton][menu]:hover, [ndwButton][menu]:active, [ndwButton][menu][active], [ndwButton][menu][selected] {
1144
- color: var(--ndw-color-white);
1145
- cursor: pointer;
1146
- }
1147
- [ndwButton][menu]:active, [ndwButton][menu][selected] {
1148
- background-color: transparent;
1149
- border-color: transparent;
1150
- }
1151
- [ndwButton][menu]:hover, [ndwButton][menu][active] {
1152
- background-color: var(--ndw-color-grey-600);
1153
- border-color: var(--ndw-color-grey-600);
1154
- }
1155
- [ndwButton][menu]:not([clickable]) {
1156
- cursor: default;
1157
- }
1158
-
1159
- @keyframes show {
1160
- from {
1161
- opacity: 0;
1162
- }
1163
- to {
1164
- opacity: 1;
1165
- }
1166
- }
1167
- .cdk-overlay-pane.ndw-popover-panel {
1168
- animation: show var(--ndw-animation-speed-fast) ease-out;
1169
- background-color: var(--ndw-color-white);
1170
- border-radius: var(--ndw-border-radius-md);
1171
- box-shadow: var(--ndw-elevation-popover);
1172
- display: grid;
1173
- padding: var(--ndw-spacing-sm);
1174
- }
1175
-
1176
- .ndw-summary-card {
1177
- display: block;
1178
- }
1179
- .ndw-summary-card__wrapper {
1180
- position: relative;
1181
- overflow: hidden;
1182
- display: grid;
1183
- gap: var(--ndw-spacing-md);
1184
- height: 100%;
1185
- align-items: start;
1186
- box-sizing: border-box;
1187
- }
1188
- .ndw-summary-card__wrapper:has(ndw-summary-card-avatar) {
1189
- grid-template-columns: max-content 1fr;
1190
- }
1191
- .ndw-summary-card__wrapper:has(a:focus:not(:active)) {
1192
- outline: var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500);
1193
- }
1194
- .ndw-summary-card__content {
1195
- display: grid;
1196
- gap: var(--ndw-spacing-xs);
1197
- }
1198
- .ndw-summary-card .ndw-summary-card-tags {
1199
- display: flex;
1200
- flex-wrap: wrap;
1201
- gap: var(--ndw-spacing-xs);
1202
- }
1203
- .ndw-summary-card .ndw-summary-card-tag {
1204
- display: flex;
1205
- flex-wrap: nowrap;
1206
- gap: var(--ndw-spacing-2xs);
1207
- align-items: center;
1208
- border: 1px solid var(--ndw-color-grey-100);
1209
- border-radius: var(--ndw-border-radius-xs);
1210
- padding: var(--ndw-spacing-2xs);
1211
- color: var(--ndw-color-grey-500);
1212
- font-size: var(--ndw-font-size-xs);
1213
- }
1214
- .ndw-summary-card .ndw-summary-card-tag ndw-icon {
1215
- font-size: var(--ndw-font-size-sm);
1216
- }
1217
- .ndw-summary-card .ndw-summary-card-tag img {
1218
- display: block;
1219
- height: var(--ndw-font-size-sm);
1220
- }
1221
- .ndw-summary-card .ndw-summary-card-subtitle {
1222
- display: grid;
1223
- grid-template-columns: max-content 1fr;
1224
- align-items: center;
1225
- gap: var(--ndw-spacing-3xs);
1226
- color: var(--ndw-color-grey-500);
1227
- font-size: var(--ndw-font-size-xs);
1228
- }
1229
- .ndw-summary-card .ndw-summary-card-subtitle ndw-icon {
1230
- font-size: var(--ndw-font-size-sm);
1231
- }
1232
- .ndw-summary-card .ndw-summary-card-subtitle__text {
1233
- overflow: hidden;
1234
- text-overflow: ellipsis;
1235
- white-space: nowrap;
1236
- }
1237
- .ndw-summary-card .ndw-summary-card-header {
1238
- display: flex;
1239
- gap: var(--ndw-spacing-xs);
1240
- }
1241
- .ndw-summary-card .ndw-summary-card-header__wrapper {
1242
- display: grid;
1243
- gap: var(--ndw-spacing-2xs);
1244
- justify-items: left;
1245
- }
1246
- .ndw-summary-card .ndw-summary-card-header__title {
1247
- width: 100%;
1248
- white-space: nowrap;
1249
- overflow: hidden;
1250
- text-overflow: ellipsis;
1251
- margin: 0;
1252
- font-size: var(--ndw-base-font-size);
1253
- font-weight: var(--ndw-font-weight-bold);
1254
- font-family: var(--ndw-font-family-heading);
1255
- }
1256
- .ndw-summary-card .ndw-summary-card-header__title a {
1257
- color: inherit;
1258
- text-decoration: none;
1259
- font-family: var(--ndw-font-family-heading);
1260
- }
1261
- .ndw-summary-card .ndw-summary-card-header__title a:hover {
1262
- text-decoration: underline;
1263
- }
1264
- .ndw-summary-card .ndw-summary-card-header__title a:after {
1265
- content: "";
1266
- position: absolute;
1267
- inset: 0;
1268
- }
1269
- .ndw-summary-card .ndw-summary-card-header__title a:focus {
1270
- outline: 0;
1271
- }
1272
- .ndw-summary-card .ndw-summary-card-content {
1273
- overflow: hidden;
1274
- text-overflow: ellipsis;
1275
- display: -webkit-box;
1276
- -webkit-line-clamp: 2;
1277
- -webkit-box-orient: vertical;
1278
- font-family: var(--ndw-font-family-body);
1279
- font-size: var(--ndw-font-size-sm);
1280
- color: var(--ndw-color-grey-500);
1281
- }
1282
- .ndw-summary-card .ndw-summary-card-avatar {
1283
- display: grid;
1284
- place-content: center;
1285
- position: relative;
1286
- width: 30px;
1287
- aspect-ratio: 1/1;
1288
- border-radius: 50%;
1289
- font-size: var(--ndw-font-size-sm);
1290
- }
1291
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--default {
1292
- color: var(--ndw-color-grey-700);
1293
- background-color: var(--ndw-color-grey-300);
1294
- }
1295
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--orange {
1296
- color: var(--ndw-color-primary-700);
1297
- background-color: var(--ndw-color-primary-050);
1298
- }
1299
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--blue {
1300
- color: var(--ndw-color-info-500);
1301
- background-color: var(--ndw-color-info-100);
1302
- }
1303
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--green {
1304
- color: var(--ndw-color-positive-500);
1305
- background-color: var(--ndw-color-positive-100);
1306
- }
1307
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--red {
1308
- color: var(--ndw-color-critical-500);
1309
- background-color: var(--ndw-color-critical-100);
1310
- }
1311
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--yellow {
1312
- color: var(--ndw-color-warning-500);
1313
- background-color: var(--ndw-color-warning-100);
1314
- }
1315
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--purple {
1316
- color: var(--ndw-color-alternative-500);
1317
- background-color: var(--ndw-color-alternative-100);
1318
- }
1319
- .ndw-summary-card .ndw-summary-card-avatar > img {
1320
- display: block;
1321
- width: 100%;
1322
- height: 100%;
1323
- object-fit: cover;
1324
- border-radius: 50%;
1325
- }
1326
- .ndw-summary-card .ndw-summary-card-avatar ndw-icon {
1327
- font-size: var(--ndw-font-size-lg);
1328
- }
1329
- .ndw-summary-card .ndw-summary-card-actions {
1330
- flex: 1;
1331
- justify-items: right;
1332
- }
1333
- .ndw-summary-card .ndw-summary-card-actions--auto {
1334
- container-type: inline-size;
1335
- }
1336
- .ndw-summary-card .ndw-summary-card-actions .actions {
1337
- gap: var(--ndw-spacing-2xs);
1338
- }
1339
- .ndw-summary-card .ndw-summary-card-actions .actions--popover {
1340
- display: grid;
1341
- }
1342
- .ndw-summary-card .ndw-summary-card-actions .actions--visible, .ndw-summary-card .ndw-summary-card-actions .actions--auto {
1343
- display: flex;
1344
- }
1345
- .ndw-summary-card .ndw-summary-card-actions .popover-wrapper {
1346
- display: block;
1347
- }
1348
- @container (width > 140px) {
1349
- .ndw-summary-card .ndw-summary-card-actions .popover-wrapper {
1350
- display: none;
1351
- }
1352
- }
1353
- .ndw-summary-card .ndw-summary-card-actions .regular-wrapper {
1354
- display: none;
1355
- }
1356
- @container (width > 140px) {
1357
- .ndw-summary-card .ndw-summary-card-actions .regular-wrapper {
1358
- display: block;
1359
- }
1360
- }