@hermes-ui/angular 0.1.4

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 (539) hide show
  1. package/README.md +52 -0
  2. package/accordion/_accordion.clarity.scss +81 -0
  3. package/accordion/_properties.accordion.scss +45 -0
  4. package/accordion/_variables.accordion.scss +91 -0
  5. package/addons/a11y/README.md +157 -0
  6. package/addons/a11y/forms/required-field-legend.component.scss +17 -0
  7. package/addons/card-container/card/appfx-card.component.scss +137 -0
  8. package/addons/card-container/container/appfx-card-container.component.scss +17 -0
  9. package/addons/card-container/settings/appfx-card-container-settings.component.scss +62 -0
  10. package/addons/certificate-viewer/certificate-viewer/certificate-viewer.component.scss +69 -0
  11. package/addons/certificate-viewer/certificate-viewer-details/certificate-viewer-details.component.scss +49 -0
  12. package/addons/certificate-viewer/certificate-viewer-general/certificate-viewer-general.component.scss +38 -0
  13. package/addons/datagrid/README.md +289 -0
  14. package/addons/datagrid/addons/action-bar/datagrid-action-bar.component.scss +81 -0
  15. package/addons/datagrid/addons/column-toggle/datagrid-column-toggle.component.scss +99 -0
  16. package/addons/datagrid/addons/export/export-datagrid.component.scss +9 -0
  17. package/addons/datagrid/datagrid.component.scss +339 -0
  18. package/addons/datagrid-filters/README.md +223 -0
  19. package/addons/datagrid-filters/advanced-filters/date-time-filter.component.scss +10 -0
  20. package/addons/datagrid-filters/advanced-filters/enum-filter.component.scss +40 -0
  21. package/addons/datagrid-filters/advanced-filters/users-filter.component.scss +11 -0
  22. package/addons/datagrid-filters/common-styles.scss +98 -0
  23. package/addons/datagrid-filters/composite-filters.component.scss +26 -0
  24. package/addons/datagrid-filters/datagrid-filters.component.scss +22 -0
  25. package/addons/datagrid-filters/manage-filters/manage-filter.component.scss +42 -0
  26. package/addons/dialog/README.md +112 -0
  27. package/addons/dialog/multi-page-dialog.a11y.scss +203 -0
  28. package/addons/dialog/multi-page-dialog.component.scss +102 -0
  29. package/addons/dialog/toggle-component/toggle.component.scss +15 -0
  30. package/addons/drag-and-drop/README.md +48 -0
  31. package/addons/menu/menu.component.scss +120 -0
  32. package/addons/property-view/components/property-view-category.component.scss +38 -0
  33. package/addons/property-view/components/property-view-message.component.scss +48 -0
  34. package/addons/property-view/components/property-view-property.component.scss +122 -0
  35. package/addons/property-view/components/property-view-section.component.scss +59 -0
  36. package/addons/property-view/components/property-view.component.scss +23 -0
  37. package/addons/stepper/stepper.component.scss +53 -0
  38. package/addons/tabs/tab-links/tab-links.component.scss +61 -0
  39. package/addons/tabs/tabs.a11y.scss +26 -0
  40. package/addons/tabs/tabs.component.scss +95 -0
  41. package/addons/theme-builder/README.md +70 -0
  42. package/addons/theme-builder/theme-builder.component.scss +194 -0
  43. package/addons/translate/README.md +124 -0
  44. package/addons/var/debug/workflow-model-monitor.component.scss +50 -0
  45. package/addons/var/error/error.component.scss +38 -0
  46. package/addons/var/spinner/spinner.component.scss +33 -0
  47. package/addons/wizard/summary/summary.component.scss +22 -0
  48. package/addons/wizard/wizard.component.scss +251 -0
  49. package/button/_buttons.clarity.scss +388 -0
  50. package/button/_mixins.buttons.scss +241 -0
  51. package/button/_properties.buttons.scss +387 -0
  52. package/button/_properties.toggles.scss +35 -0
  53. package/button/_variables.buttons.scss +905 -0
  54. package/button/_variables.toggles.scss +41 -0
  55. package/button/button-group/_button-group.clarity.scss +202 -0
  56. package/collapsible-panel/_mixins.collapsible-panel.scss +189 -0
  57. package/collapsible-panel/_properties.collapsible-panel.scss +42 -0
  58. package/collapsible-panel/_variables.collapsible-panel.scss +40 -0
  59. package/data/_mixins.tables.scss +114 -0
  60. package/data/_properties.tables.scss +77 -0
  61. package/data/_tables.clarity.scss +120 -0
  62. package/data/_variables.tables.scss +42 -0
  63. package/data/datagrid/_datagrid.clarity.scss +1871 -0
  64. package/data/datagrid/_mixins.datagrid.scss +102 -0
  65. package/data/datagrid/_properties.datagrid.scss +98 -0
  66. package/data/datagrid/_variables.datagrid.scss +98 -0
  67. package/data/stack-view/_properties.stack-view.scss +50 -0
  68. package/data/stack-view/_stack-view.clarity.scss +267 -0
  69. package/data/stack-view/_variables.stack-view.scss +32 -0
  70. package/data/tree-view/_properties.tree-view.scss +41 -0
  71. package/data/tree-view/_tree-view.clarity.scss +281 -0
  72. package/data/tree-view/_variables.tree-view.scss +51 -0
  73. package/emphasis/alert/_alert.clarity.scss +467 -0
  74. package/emphasis/alert/_mixins.alert.scss +96 -0
  75. package/emphasis/alert/_properties.alert.scss +183 -0
  76. package/emphasis/alert/_variables.alert.scss +502 -0
  77. package/emphasis/badge/_badges.clarity.scss +61 -0
  78. package/emphasis/badge/_mixins.bades.scss +34 -0
  79. package/emphasis/badge/_properties.badges.scss +82 -0
  80. package/emphasis/badge/_variables.badges.scss +160 -0
  81. package/emphasis/label/_labels.clarity.scss +179 -0
  82. package/emphasis/label/_mixins.label.scss +77 -0
  83. package/emphasis/label/_properties.label.scss +105 -0
  84. package/emphasis/label/_variables.label.scss +181 -0
  85. package/fesm2022/hermes-ui-angular-accordion.mjs +355 -0
  86. package/fesm2022/hermes-ui-angular-accordion.mjs.map +1 -0
  87. package/fesm2022/hermes-ui-angular-addons-a11y.mjs +544 -0
  88. package/fesm2022/hermes-ui-angular-addons-a11y.mjs.map +1 -0
  89. package/fesm2022/hermes-ui-angular-addons-card-container.mjs +1082 -0
  90. package/fesm2022/hermes-ui-angular-addons-card-container.mjs.map +1 -0
  91. package/fesm2022/hermes-ui-angular-addons-certificate-viewer.mjs +2520 -0
  92. package/fesm2022/hermes-ui-angular-addons-certificate-viewer.mjs.map +1 -0
  93. package/fesm2022/hermes-ui-angular-addons-datagrid-filters.mjs +2818 -0
  94. package/fesm2022/hermes-ui-angular-addons-datagrid-filters.mjs.map +1 -0
  95. package/fesm2022/hermes-ui-angular-addons-datagrid.mjs +3131 -0
  96. package/fesm2022/hermes-ui-angular-addons-datagrid.mjs.map +1 -0
  97. package/fesm2022/hermes-ui-angular-addons-dialog.mjs +386 -0
  98. package/fesm2022/hermes-ui-angular-addons-dialog.mjs.map +1 -0
  99. package/fesm2022/hermes-ui-angular-addons-drag-and-drop.mjs +78 -0
  100. package/fesm2022/hermes-ui-angular-addons-drag-and-drop.mjs.map +1 -0
  101. package/fesm2022/hermes-ui-angular-addons-menu.mjs +559 -0
  102. package/fesm2022/hermes-ui-angular-addons-menu.mjs.map +1 -0
  103. package/fesm2022/hermes-ui-angular-addons-property-view.mjs +1142 -0
  104. package/fesm2022/hermes-ui-angular-addons-property-view.mjs.map +1 -0
  105. package/fesm2022/hermes-ui-angular-addons-stepper.mjs +716 -0
  106. package/fesm2022/hermes-ui-angular-addons-stepper.mjs.map +1 -0
  107. package/fesm2022/hermes-ui-angular-addons-tabs.mjs +539 -0
  108. package/fesm2022/hermes-ui-angular-addons-tabs.mjs.map +1 -0
  109. package/fesm2022/hermes-ui-angular-addons-testing.mjs +2010 -0
  110. package/fesm2022/hermes-ui-angular-addons-testing.mjs.map +1 -0
  111. package/fesm2022/hermes-ui-angular-addons-theme-builder.mjs +922 -0
  112. package/fesm2022/hermes-ui-angular-addons-theme-builder.mjs.map +1 -0
  113. package/fesm2022/hermes-ui-angular-addons-translate.mjs +295 -0
  114. package/fesm2022/hermes-ui-angular-addons-translate.mjs.map +1 -0
  115. package/fesm2022/hermes-ui-angular-addons-var.mjs +2028 -0
  116. package/fesm2022/hermes-ui-angular-addons-var.mjs.map +1 -0
  117. package/fesm2022/hermes-ui-angular-addons-wizard.mjs +610 -0
  118. package/fesm2022/hermes-ui-angular-addons-wizard.mjs.map +1 -0
  119. package/fesm2022/hermes-ui-angular-addons-workflow-strings.mjs +121 -0
  120. package/fesm2022/hermes-ui-angular-addons-workflow-strings.mjs.map +1 -0
  121. package/fesm2022/hermes-ui-angular-addons-workflow.mjs +88 -0
  122. package/fesm2022/hermes-ui-angular-addons-workflow.mjs.map +1 -0
  123. package/fesm2022/hermes-ui-angular-button.mjs +719 -0
  124. package/fesm2022/hermes-ui-angular-button.mjs.map +1 -0
  125. package/fesm2022/hermes-ui-angular-collapsible-panel.mjs +201 -0
  126. package/fesm2022/hermes-ui-angular-collapsible-panel.mjs.map +1 -0
  127. package/fesm2022/hermes-ui-angular-data-datagrid.mjs +8045 -0
  128. package/fesm2022/hermes-ui-angular-data-datagrid.mjs.map +1 -0
  129. package/fesm2022/hermes-ui-angular-data-stack-view.mjs +442 -0
  130. package/fesm2022/hermes-ui-angular-data-stack-view.mjs.map +1 -0
  131. package/fesm2022/hermes-ui-angular-data-tree-view.mjs +1106 -0
  132. package/fesm2022/hermes-ui-angular-data-tree-view.mjs.map +1 -0
  133. package/fesm2022/hermes-ui-angular-data.mjs +40 -0
  134. package/fesm2022/hermes-ui-angular-data.mjs.map +1 -0
  135. package/fesm2022/hermes-ui-angular-emphasis-alert.mjs +624 -0
  136. package/fesm2022/hermes-ui-angular-emphasis-alert.mjs.map +1 -0
  137. package/fesm2022/hermes-ui-angular-emphasis-badge.mjs +69 -0
  138. package/fesm2022/hermes-ui-angular-emphasis-badge.mjs.map +1 -0
  139. package/fesm2022/hermes-ui-angular-emphasis-common.mjs +25 -0
  140. package/fesm2022/hermes-ui-angular-emphasis-common.mjs.map +1 -0
  141. package/fesm2022/hermes-ui-angular-emphasis-label.mjs +105 -0
  142. package/fesm2022/hermes-ui-angular-emphasis-label.mjs.map +1 -0
  143. package/fesm2022/hermes-ui-angular-emphasis.mjs +41 -0
  144. package/fesm2022/hermes-ui-angular-emphasis.mjs.map +1 -0
  145. package/fesm2022/hermes-ui-angular-forms-checkbox.mjs +279 -0
  146. package/fesm2022/hermes-ui-angular-forms-checkbox.mjs.map +1 -0
  147. package/fesm2022/hermes-ui-angular-forms-combobox.mjs +1775 -0
  148. package/fesm2022/hermes-ui-angular-forms-combobox.mjs.map +1 -0
  149. package/fesm2022/hermes-ui-angular-forms-common.mjs +1251 -0
  150. package/fesm2022/hermes-ui-angular-forms-common.mjs.map +1 -0
  151. package/fesm2022/hermes-ui-angular-forms-datalist.mjs +263 -0
  152. package/fesm2022/hermes-ui-angular-forms-datalist.mjs.map +1 -0
  153. package/fesm2022/hermes-ui-angular-forms-datepicker.mjs +3274 -0
  154. package/fesm2022/hermes-ui-angular-forms-datepicker.mjs.map +1 -0
  155. package/fesm2022/hermes-ui-angular-forms-file-input.mjs +826 -0
  156. package/fesm2022/hermes-ui-angular-forms-file-input.mjs.map +1 -0
  157. package/fesm2022/hermes-ui-angular-forms-input.mjs +153 -0
  158. package/fesm2022/hermes-ui-angular-forms-input.mjs.map +1 -0
  159. package/fesm2022/hermes-ui-angular-forms-native-select.mjs +153 -0
  160. package/fesm2022/hermes-ui-angular-forms-native-select.mjs.map +1 -0
  161. package/fesm2022/hermes-ui-angular-forms-number-input.mjs +236 -0
  162. package/fesm2022/hermes-ui-angular-forms-number-input.mjs.map +1 -0
  163. package/fesm2022/hermes-ui-angular-forms-password.mjs +233 -0
  164. package/fesm2022/hermes-ui-angular-forms-password.mjs.map +1 -0
  165. package/fesm2022/hermes-ui-angular-forms-radio.mjs +224 -0
  166. package/fesm2022/hermes-ui-angular-forms-radio.mjs.map +1 -0
  167. package/fesm2022/hermes-ui-angular-forms-range.mjs +186 -0
  168. package/fesm2022/hermes-ui-angular-forms-range.mjs.map +1 -0
  169. package/fesm2022/hermes-ui-angular-forms-select.mjs +606 -0
  170. package/fesm2022/hermes-ui-angular-forms-select.mjs.map +1 -0
  171. package/fesm2022/hermes-ui-angular-forms-textarea.mjs +136 -0
  172. package/fesm2022/hermes-ui-angular-forms-textarea.mjs.map +1 -0
  173. package/fesm2022/hermes-ui-angular-forms.mjs +105 -0
  174. package/fesm2022/hermes-ui-angular-forms.mjs.map +1 -0
  175. package/fesm2022/hermes-ui-angular-icon.mjs +7413 -0
  176. package/fesm2022/hermes-ui-angular-icon.mjs.map +1 -0
  177. package/fesm2022/hermes-ui-angular-layout-breadcrumbs.mjs +120 -0
  178. package/fesm2022/hermes-ui-angular-layout-breadcrumbs.mjs.map +1 -0
  179. package/fesm2022/hermes-ui-angular-layout-main-container.mjs +100 -0
  180. package/fesm2022/hermes-ui-angular-layout-main-container.mjs.map +1 -0
  181. package/fesm2022/hermes-ui-angular-layout-nav.mjs +582 -0
  182. package/fesm2022/hermes-ui-angular-layout-nav.mjs.map +1 -0
  183. package/fesm2022/hermes-ui-angular-layout-tabs.mjs +807 -0
  184. package/fesm2022/hermes-ui-angular-layout-tabs.mjs.map +1 -0
  185. package/fesm2022/hermes-ui-angular-layout-vertical-nav.mjs +507 -0
  186. package/fesm2022/hermes-ui-angular-layout-vertical-nav.mjs.map +1 -0
  187. package/fesm2022/hermes-ui-angular-layout.mjs +44 -0
  188. package/fesm2022/hermes-ui-angular-layout.mjs.map +1 -0
  189. package/fesm2022/hermes-ui-angular-modal.mjs +619 -0
  190. package/fesm2022/hermes-ui-angular-modal.mjs.map +1 -0
  191. package/fesm2022/hermes-ui-angular-popover-common.mjs +1371 -0
  192. package/fesm2022/hermes-ui-angular-popover-common.mjs.map +1 -0
  193. package/fesm2022/hermes-ui-angular-popover-dropdown.mjs +492 -0
  194. package/fesm2022/hermes-ui-angular-popover-dropdown.mjs.map +1 -0
  195. package/fesm2022/hermes-ui-angular-popover-signpost.mjs +494 -0
  196. package/fesm2022/hermes-ui-angular-popover-signpost.mjs.map +1 -0
  197. package/fesm2022/hermes-ui-angular-popover-tooltip.mjs +293 -0
  198. package/fesm2022/hermes-ui-angular-popover-tooltip.mjs.map +1 -0
  199. package/fesm2022/hermes-ui-angular-popover.mjs +41 -0
  200. package/fesm2022/hermes-ui-angular-popover.mjs.map +1 -0
  201. package/fesm2022/hermes-ui-angular-progress-progress-bars.mjs +217 -0
  202. package/fesm2022/hermes-ui-angular-progress-progress-bars.mjs.map +1 -0
  203. package/fesm2022/hermes-ui-angular-progress-spinner.mjs +132 -0
  204. package/fesm2022/hermes-ui-angular-progress-spinner.mjs.map +1 -0
  205. package/fesm2022/hermes-ui-angular-stepper.mjs +694 -0
  206. package/fesm2022/hermes-ui-angular-stepper.mjs.map +1 -0
  207. package/fesm2022/hermes-ui-angular-timeline.mjs +316 -0
  208. package/fesm2022/hermes-ui-angular-timeline.mjs.map +1 -0
  209. package/fesm2022/hermes-ui-angular-toast.mjs +373 -0
  210. package/fesm2022/hermes-ui-angular-toast.mjs.map +1 -0
  211. package/fesm2022/hermes-ui-angular-utils-conditional.mjs +351 -0
  212. package/fesm2022/hermes-ui-angular-utils-conditional.mjs.map +1 -0
  213. package/fesm2022/hermes-ui-angular-utils-loading.mjs +107 -0
  214. package/fesm2022/hermes-ui-angular-utils-loading.mjs.map +1 -0
  215. package/fesm2022/hermes-ui-angular-utils.mjs +2086 -0
  216. package/fesm2022/hermes-ui-angular-utils.mjs.map +1 -0
  217. package/fesm2022/hermes-ui-angular-wizard.mjs +3074 -0
  218. package/fesm2022/hermes-ui-angular-wizard.mjs.map +1 -0
  219. package/fesm2022/hermes-ui-angular.mjs +130 -0
  220. package/fesm2022/hermes-ui-angular.mjs.map +1 -0
  221. package/forms/combobox/_combobox.clarity.scss +330 -0
  222. package/forms/combobox/_properties.combobox.scss +46 -0
  223. package/forms/combobox/_variables.combobox.scss +32 -0
  224. package/forms/datepicker/_datepicker.clarity.scss +259 -0
  225. package/forms/datepicker/_mixins.datepicker.scss +89 -0
  226. package/forms/datepicker/_properties.datepicker.scss +46 -0
  227. package/forms/datepicker/_variables.datepicker.scss +74 -0
  228. package/forms/styles/_checkbox.clarity.scss +193 -0
  229. package/forms/styles/_containers.clarity.scss +230 -0
  230. package/forms/styles/_datalist.clarity.scss +47 -0
  231. package/forms/styles/_file-input.clarity.scss +134 -0
  232. package/forms/styles/_file.clarity.scss +52 -0
  233. package/forms/styles/_form.clarity.scss +87 -0
  234. package/forms/styles/_input-group.clarity.scss +126 -0
  235. package/forms/styles/_input.clarity.scss +83 -0
  236. package/forms/styles/_mixins.forms.scss +193 -0
  237. package/forms/styles/_native-select.clarity.scss +178 -0
  238. package/forms/styles/_number-input.clarity.scss +58 -0
  239. package/forms/styles/_password.clarity.scss +26 -0
  240. package/forms/styles/_properties.forms.scss +180 -0
  241. package/forms/styles/_radio.clarity.scss +120 -0
  242. package/forms/styles/_range.clarity.scss +124 -0
  243. package/forms/styles/_select.clarity.scss +158 -0
  244. package/forms/styles/_textarea.clarity.scss +71 -0
  245. package/forms/styles/_toggles.clarity.scss +209 -0
  246. package/forms/styles/_variables.forms.scss +156 -0
  247. package/hermes-ui.scss +7 -0
  248. package/icon/icon.component.scss +247 -0
  249. package/image/_icons.clarity.scss +101 -0
  250. package/image/_images.clarity.scss +42 -0
  251. package/image/_mixins.images.scss +11 -0
  252. package/layout/_card.clarity.scss +318 -0
  253. package/layout/_login.clarity.scss +240 -0
  254. package/layout/_properties.card.scss +39 -0
  255. package/layout/_properties.login.scss +32 -0
  256. package/layout/_variables.card.scss +24 -0
  257. package/layout/_variables.login.scss +22 -0
  258. package/layout/breadcrumbs/_breadcrumbs.clarity.scss +60 -0
  259. package/layout/breadcrumbs/_properties.breadcrumbs.scss +18 -0
  260. package/layout/breadcrumbs/_variables.breadcrumbs.scss +11 -0
  261. package/layout/grid/_grid.scss +23 -0
  262. package/layout/grid/grid/_grid.scss +39 -0
  263. package/layout/grid/mixins/_breakpoint.scss +83 -0
  264. package/layout/grid/mixins/_clearfix.scss +13 -0
  265. package/layout/grid/mixins/_grid-framework.scss +91 -0
  266. package/layout/grid/mixins/_grid.scss +39 -0
  267. package/layout/grid/utilities/_align.scss +30 -0
  268. package/layout/grid/utilities/_clearfix.scss +12 -0
  269. package/layout/grid/utilities/_display.scss +18 -0
  270. package/layout/grid/utilities/_flex.scss +222 -0
  271. package/layout/grid/utilities/_float.scss +26 -0
  272. package/layout/grid/utilities/_visibility.scss +60 -0
  273. package/layout/main-container/_layout.clarity.scss +87 -0
  274. package/layout/main-container/_properties.header.scss +55 -0
  275. package/layout/main-container/_variables.header.scss +32 -0
  276. package/layout/nav/_header.clarity.scss +40 -0
  277. package/layout/nav/_links.clarity.scss +84 -0
  278. package/layout/nav/_mixins.header.scss +332 -0
  279. package/layout/nav/_mixins.responsive-nav.scss +75 -0
  280. package/layout/nav/_nav.clarity.scss +100 -0
  281. package/layout/nav/_properties.nav.scss +27 -0
  282. package/layout/nav/_properties.responsive-nav.scss +23 -0
  283. package/layout/nav/_properties.subnav.scss +19 -0
  284. package/layout/nav/_responsive-nav.clarity.scss +490 -0
  285. package/layout/nav/_subnav.clarity.scss +48 -0
  286. package/layout/nav/_variables.nav.scss +13 -0
  287. package/layout/nav/_variables.responsive-nav.scss +28 -0
  288. package/layout/nav/_variables.subnav.scss +21 -0
  289. package/layout/tabs/_mixins.tabs.scss +41 -0
  290. package/layout/tabs/_properties.tabs.scss +25 -0
  291. package/layout/tabs/_tabs.clarity.scss +110 -0
  292. package/layout/tabs/_variables.tabs.scss +17 -0
  293. package/layout/vertical-nav/_mixins.vertical-nav.scss +52 -0
  294. package/layout/vertical-nav/_properties.vertical-nav.scss +73 -0
  295. package/layout/vertical-nav/_variables.vertical-nav.scss +52 -0
  296. package/layout/vertical-nav/_vertical-nav.clarity.scss +469 -0
  297. package/main.scss +14 -0
  298. package/modal/_modal.clarity.scss +379 -0
  299. package/modal/_properties.modal.scss +57 -0
  300. package/modal/_variables.modal.scss +41 -0
  301. package/package.json +325 -0
  302. package/popover/common/README.md +112 -0
  303. package/popover/common/_popover.clarity.scss +28 -0
  304. package/popover/dropdown/_dropdown.clarity.scss +326 -0
  305. package/popover/dropdown/_menu-mixins.clarity.scss +132 -0
  306. package/popover/dropdown/_properties.dropdown.scss +50 -0
  307. package/popover/dropdown/_variables.dropdown.scss +36 -0
  308. package/popover/signpost/_properties.signpost.scss +34 -0
  309. package/popover/signpost/_signposts.clarity.scss +414 -0
  310. package/popover/signpost/_variables.signpost.scss +21 -0
  311. package/popover/tooltip/_mixins.tooltip.scss +186 -0
  312. package/popover/tooltip/_properties.tooltip.scss +28 -0
  313. package/popover/tooltip/_tooltips.clarity.scss +122 -0
  314. package/popover/tooltip/_variables.tooltip.scss +20 -0
  315. package/progress/progress-bars/_progress-bars.clarity.scss +616 -0
  316. package/progress/progress-bars/_properties.progress-bars.scss +24 -0
  317. package/progress/progress-bars/_variables.progress-bars.scss +15 -0
  318. package/progress/progress-bars/utils/_mixins.clarity.scss +18 -0
  319. package/progress/spinner/_mixins.spinner.scss +30 -0
  320. package/progress/spinner/_properties.spinner.scss +37 -0
  321. package/progress/spinner/_spinner.clarity.scss +148 -0
  322. package/progress/spinner/_variables.spinner.scss +25 -0
  323. package/schematics/collection.json +14 -0
  324. package/stepper/_properties.stepper.scss +29 -0
  325. package/stepper/_stepper.clarity.scss +184 -0
  326. package/stepper/_variables.stepper.scss +13 -0
  327. package/styles/_a11y.scss +14 -0
  328. package/styles/_close.clarity.scss +60 -0
  329. package/styles/_components.clarity.scss +189 -0
  330. package/styles/_mixins.scss +460 -0
  331. package/styles/_normalize.scss +292 -0
  332. package/styles/_reboot.clarity.scss +374 -0
  333. package/styles/_variables.clarity.scss +139 -0
  334. package/styles/core/base/base.element.scss +97 -0
  335. package/styles/core/global.scss +12 -0
  336. package/styles/core/layout/_alignments.scss +18 -0
  337. package/styles/core/layout/_container.scss +29 -0
  338. package/styles/core/layout/_display.scss +58 -0
  339. package/styles/core/layout/_optimize.scss +60 -0
  340. package/styles/core/layout/_shadow-dom.scss +47 -0
  341. package/styles/core/layout/_spacing.scss +31 -0
  342. package/styles/core/layout/_type-grid.scss +66 -0
  343. package/styles/core/layout/_type-horizontal.scss +33 -0
  344. package/styles/core/layout/_type-vertical.scss +26 -0
  345. package/styles/core/layout/mixins/_mixins.alignment.scss +35 -0
  346. package/styles/core/layout/mixins/_mixins.display.scss +23 -0
  347. package/styles/core/layout/mixins/_mixins.grid.scss +105 -0
  348. package/styles/core/layout/mixins/_mixins.scss +106 -0
  349. package/styles/core/layout/mixins/_mixins.shadow-dom.scss +106 -0
  350. package/styles/core/layout/mixins/_mixins.type-horizontal.scss +113 -0
  351. package/styles/core/layout/mixins/_mixins.type-vertical.scss +108 -0
  352. package/styles/core/module.layout.scss +22 -0
  353. package/styles/core/module.reset.scss +48 -0
  354. package/styles/core/module.typography.scss +9 -0
  355. package/styles/core/theme.dark.scss +298 -0
  356. package/styles/core/theme.high-contrast.scss +42 -0
  357. package/styles/core/theme.low-motion.scss +20 -0
  358. package/styles/core/tokens/_alias-interaction.scss +74 -0
  359. package/styles/core/tokens/_alias-object-background.scss +29 -0
  360. package/styles/core/tokens/_alias-object-border.scss +21 -0
  361. package/styles/core/tokens/_alias-object-container.scss +20 -0
  362. package/styles/core/tokens/_alias-object-opacity.scss +15 -0
  363. package/styles/core/tokens/_alias-object-shadow.scss +17 -0
  364. package/styles/core/tokens/_alias-primary.scss +21 -0
  365. package/styles/core/tokens/_alias-status.scss +40 -0
  366. package/styles/core/tokens/_alias-typography.scss +107 -0
  367. package/styles/core/tokens/_alias-utility.scss +42 -0
  368. package/styles/core/tokens/_alias-viz-colors.scss +170 -0
  369. package/styles/core/tokens/_global-animation.scss +32 -0
  370. package/styles/core/tokens/_global-colors.scss +249 -0
  371. package/styles/core/tokens/_global-space.scss +52 -0
  372. package/styles/core/tokens/_internal-scale.scss +14 -0
  373. package/styles/core/tokens/_properties.tokens.scss +22 -0
  374. package/styles/core/tokens/_variables.tokens.scss +787 -0
  375. package/styles/core/typography/_legacy-typography.scss +328 -0
  376. package/styles/core/typography/_mixins.typography.scss +18 -0
  377. package/styles/core/typography/_typography.scss +328 -0
  378. package/styles/variables/_properties.density.scss +225 -0
  379. package/styles/variables/_properties.global.scss +51 -0
  380. package/styles/variables/_properties.layout.scss +21 -0
  381. package/styles/variables/_properties.scss +11 -0
  382. package/styles/variables/_properties.typography.scss +164 -0
  383. package/styles/variables/_variables.density.scss +116 -0
  384. package/styles/variables/_variables.global.scss +87 -0
  385. package/styles/variables/_variables.layout.scss +37 -0
  386. package/styles/variables/_variables.scss +11 -0
  387. package/styles/variables/_variables.typography.scss +156 -0
  388. package/timeline/_properties.timeline.scss +38 -0
  389. package/timeline/_timeline.clarity.scss +172 -0
  390. package/timeline/_variables.timeline.scss +29 -0
  391. package/toast/README.md +65 -0
  392. package/toast/_properties.toast.scss +56 -0
  393. package/toast/_toast.clarity.scss +190 -0
  394. package/toast/_variables.toast.scss +33 -0
  395. package/types/hermes-ui-angular-accordion.d.ts +101 -0
  396. package/types/hermes-ui-angular-accordion.d.ts.map +1 -0
  397. package/types/hermes-ui-angular-addons-a11y.d.ts +187 -0
  398. package/types/hermes-ui-angular-addons-a11y.d.ts.map +1 -0
  399. package/types/hermes-ui-angular-addons-card-container.d.ts +482 -0
  400. package/types/hermes-ui-angular-addons-card-container.d.ts.map +1 -0
  401. package/types/hermes-ui-angular-addons-certificate-viewer.d.ts +404 -0
  402. package/types/hermes-ui-angular-addons-certificate-viewer.d.ts.map +1 -0
  403. package/types/hermes-ui-angular-addons-datagrid-filters.d.ts +911 -0
  404. package/types/hermes-ui-angular-addons-datagrid-filters.d.ts.map +1 -0
  405. package/types/hermes-ui-angular-addons-datagrid.d.ts +1529 -0
  406. package/types/hermes-ui-angular-addons-datagrid.d.ts.map +1 -0
  407. package/types/hermes-ui-angular-addons-dialog.d.ts +233 -0
  408. package/types/hermes-ui-angular-addons-dialog.d.ts.map +1 -0
  409. package/types/hermes-ui-angular-addons-drag-and-drop.d.ts +35 -0
  410. package/types/hermes-ui-angular-addons-drag-and-drop.d.ts.map +1 -0
  411. package/types/hermes-ui-angular-addons-menu.d.ts +197 -0
  412. package/types/hermes-ui-angular-addons-menu.d.ts.map +1 -0
  413. package/types/hermes-ui-angular-addons-property-view.d.ts +387 -0
  414. package/types/hermes-ui-angular-addons-property-view.d.ts.map +1 -0
  415. package/types/hermes-ui-angular-addons-stepper.d.ts +298 -0
  416. package/types/hermes-ui-angular-addons-stepper.d.ts.map +1 -0
  417. package/types/hermes-ui-angular-addons-tabs.d.ts +173 -0
  418. package/types/hermes-ui-angular-addons-tabs.d.ts.map +1 -0
  419. package/types/hermes-ui-angular-addons-testing.d.ts +592 -0
  420. package/types/hermes-ui-angular-addons-testing.d.ts.map +1 -0
  421. package/types/hermes-ui-angular-addons-theme-builder.d.ts +200 -0
  422. package/types/hermes-ui-angular-addons-theme-builder.d.ts.map +1 -0
  423. package/types/hermes-ui-angular-addons-translate.d.ts +149 -0
  424. package/types/hermes-ui-angular-addons-translate.d.ts.map +1 -0
  425. package/types/hermes-ui-angular-addons-var.d.ts +923 -0
  426. package/types/hermes-ui-angular-addons-var.d.ts.map +1 -0
  427. package/types/hermes-ui-angular-addons-wizard.d.ts +241 -0
  428. package/types/hermes-ui-angular-addons-wizard.d.ts.map +1 -0
  429. package/types/hermes-ui-angular-addons-workflow-strings.d.ts +124 -0
  430. package/types/hermes-ui-angular-addons-workflow-strings.d.ts.map +1 -0
  431. package/types/hermes-ui-angular-addons-workflow.d.ts +15 -0
  432. package/types/hermes-ui-angular-addons-workflow.d.ts.map +1 -0
  433. package/types/hermes-ui-angular-button.d.ts +170 -0
  434. package/types/hermes-ui-angular-button.d.ts.map +1 -0
  435. package/types/hermes-ui-angular-collapsible-panel.d.ts +74 -0
  436. package/types/hermes-ui-angular-collapsible-panel.d.ts.map +1 -0
  437. package/types/hermes-ui-angular-data-datagrid.d.ts +1938 -0
  438. package/types/hermes-ui-angular-data-datagrid.d.ts.map +1 -0
  439. package/types/hermes-ui-angular-data-stack-view.d.ts +88 -0
  440. package/types/hermes-ui-angular-data-stack-view.d.ts.map +1 -0
  441. package/types/hermes-ui-angular-data-tree-view.d.ts +230 -0
  442. package/types/hermes-ui-angular-data-tree-view.d.ts.map +1 -0
  443. package/types/hermes-ui-angular-data.d.ts +16 -0
  444. package/types/hermes-ui-angular-data.d.ts.map +1 -0
  445. package/types/hermes-ui-angular-emphasis-alert.d.ts +176 -0
  446. package/types/hermes-ui-angular-emphasis-alert.d.ts.map +1 -0
  447. package/types/hermes-ui-angular-emphasis-badge.d.ts +26 -0
  448. package/types/hermes-ui-angular-emphasis-badge.d.ts.map +1 -0
  449. package/types/hermes-ui-angular-emphasis-common.d.ts +7 -0
  450. package/types/hermes-ui-angular-emphasis-common.d.ts.map +1 -0
  451. package/types/hermes-ui-angular-emphasis-label.d.ts +30 -0
  452. package/types/hermes-ui-angular-emphasis-label.d.ts.map +1 -0
  453. package/types/hermes-ui-angular-emphasis.d.ts +16 -0
  454. package/types/hermes-ui-angular-emphasis.d.ts.map +1 -0
  455. package/types/hermes-ui-angular-forms-checkbox.d.ts +73 -0
  456. package/types/hermes-ui-angular-forms-checkbox.d.ts.map +1 -0
  457. package/types/hermes-ui-angular-forms-combobox.d.ts +354 -0
  458. package/types/hermes-ui-angular-forms-combobox.d.ts.map +1 -0
  459. package/types/hermes-ui-angular-forms-common.d.ts +340 -0
  460. package/types/hermes-ui-angular-forms-common.d.ts.map +1 -0
  461. package/types/hermes-ui-angular-forms-datalist.d.ts +60 -0
  462. package/types/hermes-ui-angular-forms-datalist.d.ts.map +1 -0
  463. package/types/hermes-ui-angular-forms-datepicker.d.ts +987 -0
  464. package/types/hermes-ui-angular-forms-datepicker.d.ts.map +1 -0
  465. package/types/hermes-ui-angular-forms-file-input.d.ts +194 -0
  466. package/types/hermes-ui-angular-forms-file-input.d.ts.map +1 -0
  467. package/types/hermes-ui-angular-forms-input.d.ts +30 -0
  468. package/types/hermes-ui-angular-forms-input.d.ts.map +1 -0
  469. package/types/hermes-ui-angular-forms-native-select.d.ts +37 -0
  470. package/types/hermes-ui-angular-forms-native-select.d.ts.map +1 -0
  471. package/types/hermes-ui-angular-forms-number-input.d.ts +44 -0
  472. package/types/hermes-ui-angular-forms-number-input.d.ts.map +1 -0
  473. package/types/hermes-ui-angular-forms-password.d.ts +53 -0
  474. package/types/hermes-ui-angular-forms-password.d.ts.map +1 -0
  475. package/types/hermes-ui-angular-forms-radio.d.ts +50 -0
  476. package/types/hermes-ui-angular-forms-radio.d.ts.map +1 -0
  477. package/types/hermes-ui-angular-forms-range.d.ts +38 -0
  478. package/types/hermes-ui-angular-forms-range.d.ts.map +1 -0
  479. package/types/hermes-ui-angular-forms-select.d.ts +211 -0
  480. package/types/hermes-ui-angular-forms-select.d.ts.map +1 -0
  481. package/types/hermes-ui-angular-forms-textarea.d.ts +30 -0
  482. package/types/hermes-ui-angular-forms-textarea.d.ts.map +1 -0
  483. package/types/hermes-ui-angular-forms.d.ts +39 -0
  484. package/types/hermes-ui-angular-forms.d.ts.map +1 -0
  485. package/types/hermes-ui-angular-icon.d.ts +1504 -0
  486. package/types/hermes-ui-angular-icon.d.ts.map +1 -0
  487. package/types/hermes-ui-angular-layout-breadcrumbs.d.ts +46 -0
  488. package/types/hermes-ui-angular-layout-breadcrumbs.d.ts.map +1 -0
  489. package/types/hermes-ui-angular-layout-main-container.d.ts +29 -0
  490. package/types/hermes-ui-angular-layout-main-container.d.ts.map +1 -0
  491. package/types/hermes-ui-angular-layout-nav.d.ts +143 -0
  492. package/types/hermes-ui-angular-layout-nav.d.ts.map +1 -0
  493. package/types/hermes-ui-angular-layout-tabs.d.ts +159 -0
  494. package/types/hermes-ui-angular-layout-tabs.d.ts.map +1 -0
  495. package/types/hermes-ui-angular-layout-vertical-nav.d.ts +129 -0
  496. package/types/hermes-ui-angular-layout-vertical-nav.d.ts.map +1 -0
  497. package/types/hermes-ui-angular-layout.d.ts +20 -0
  498. package/types/hermes-ui-angular-layout.d.ts.map +1 -0
  499. package/types/hermes-ui-angular-modal.d.ts +161 -0
  500. package/types/hermes-ui-angular-modal.d.ts.map +1 -0
  501. package/types/hermes-ui-angular-popover-common.d.ts +317 -0
  502. package/types/hermes-ui-angular-popover-common.d.ts.map +1 -0
  503. package/types/hermes-ui-angular-popover-dropdown.d.ts +124 -0
  504. package/types/hermes-ui-angular-popover-dropdown.d.ts.map +1 -0
  505. package/types/hermes-ui-angular-popover-signpost.d.ts +158 -0
  506. package/types/hermes-ui-angular-popover-signpost.d.ts.map +1 -0
  507. package/types/hermes-ui-angular-popover-tooltip.d.ts +84 -0
  508. package/types/hermes-ui-angular-popover-tooltip.d.ts.map +1 -0
  509. package/types/hermes-ui-angular-popover.d.ts +17 -0
  510. package/types/hermes-ui-angular-popover.d.ts.map +1 -0
  511. package/types/hermes-ui-angular-progress-progress-bars.d.ts +58 -0
  512. package/types/hermes-ui-angular-progress-progress-bars.d.ts.map +1 -0
  513. package/types/hermes-ui-angular-progress-spinner.d.ts +45 -0
  514. package/types/hermes-ui-angular-progress-spinner.d.ts.map +1 -0
  515. package/types/hermes-ui-angular-stepper.d.ts +180 -0
  516. package/types/hermes-ui-angular-stepper.d.ts.map +1 -0
  517. package/types/hermes-ui-angular-timeline.d.ts +87 -0
  518. package/types/hermes-ui-angular-timeline.d.ts.map +1 -0
  519. package/types/hermes-ui-angular-toast.d.ts +131 -0
  520. package/types/hermes-ui-angular-toast.d.ts.map +1 -0
  521. package/types/hermes-ui-angular-utils-conditional.d.ts +133 -0
  522. package/types/hermes-ui-angular-utils-conditional.d.ts.map +1 -0
  523. package/types/hermes-ui-angular-utils-loading.d.ts +39 -0
  524. package/types/hermes-ui-angular-utils-loading.d.ts.map +1 -0
  525. package/types/hermes-ui-angular-utils.d.ts +914 -0
  526. package/types/hermes-ui-angular-utils.d.ts.map +1 -0
  527. package/types/hermes-ui-angular-wizard.d.ts +1509 -0
  528. package/types/hermes-ui-angular-wizard.d.ts.map +1 -0
  529. package/types/hermes-ui-angular.d.ts +44 -0
  530. package/types/hermes-ui-angular.d.ts.map +1 -0
  531. package/typography/_code.scss +36 -0
  532. package/typography/_font-metropolis.scss +45 -0
  533. package/typography/_lists.scss +81 -0
  534. package/typography/_typography.scss +322 -0
  535. package/utils/animations/_animations.clarity.scss +44 -0
  536. package/utils/animations/_mixins.animations.scss +33 -0
  537. package/wizard/_properties.wizard.scss +54 -0
  538. package/wizard/_variables.wizard.scss +59 -0
  539. package/wizard/_wizard.clarity.scss +692 -0
package/README.md ADDED
@@ -0,0 +1,52 @@
1
+ ## Installing Hermes Angular
2
+
3
+ 1. Install Hermes packages through npm:
4
+
5
+ ```
6
+ npm install @hermes/angular
7
+ ```
8
+
9
+ 2. Import the HermesModule into your Angular application's module. Your application's main module might look like this:
10
+
11
+ ```
12
+ import { NgModule } from '@angular/core';
13
+ import { BrowserModule } from '@angular/platform-browser';
14
+ import { HermesModule } from '@hermes/angular';
15
+ import { AppComponent } from './app.component';
16
+
17
+ @NgModule({
18
+ imports: [
19
+ BrowserModule,
20
+ HermesModule,
21
+ ....
22
+ ],
23
+ declarations: [ AppComponent ],
24
+ bootstrap: [ AppComponent ]
25
+ })
26
+ export class AppModule { }
27
+ ```
28
+
29
+ 3. Include the necessary styles in the build. You can do this by either including the compiled/minified css in your angular.json
30
+ file or by importing the scss/css directly in your top level styles.scss/css file.
31
+
32
+ ```
33
+ //...
34
+ "styles": [
35
+ "node_modules/@hermes/angular/hermes-ui.min.css",
36
+ //... any other styles
37
+ ]
38
+ //...
39
+ ```
40
+
41
+ ```scss
42
+ @use '@hermes/angular/hermes-ui';
43
+ ```
44
+
45
+ 4. Set the Theme
46
+ Add the `hermes-theme="light"` attribute to the body element in your main HTML file:
47
+
48
+ ```
49
+ <body hermes-theme="light" />
50
+ ```
51
+
52
+ You can toggle to dark theme by setting hermes-theme="dark".
package/accordion/_accordion.clarity.scss ADDED
@@ -0,0 +1,81 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ @use 'sass:meta';
9
+ @use '../styles/mixins';
10
+ @use 'variables.accordion' as accordion-variables;
11
+ @use '../styles/variables/variables.density' as density;
12
+ @use '../collapsible-panel/mixins.collapsible-panel' as collapsible-panel;
13
+
14
+ @include meta.load-css('properties.accordion');
15
+ @include mixins.exports('accordion.clarity') {
16
+ @include collapsible-panel.collapsible-panel('hermes-accordion', accordion-variables.$hermes-accordion-theme...);
17
+
18
+ .hermes-accordion {
19
+ display: block;
20
+ margin-bottom: density.$hermes-base-vertical-offset-xl;
21
+
22
+ .hermes-accordion-panel .hermes-accordion-header {
23
+ border-radius: accordion-variables.$hermes-accordion-border-radius;
24
+
25
+ & + .hermes-accordion-content-region > .hermes-accordion-content {
26
+ border-bottom-left-radius: accordion-variables.$hermes-accordion-border-radius;
27
+ border-bottom-right-radius: accordion-variables.$hermes-accordion-border-radius;
28
+ }
29
+ }
30
+
31
+ .hermes-accordion-panel + .hermes-accordion-panel > div[class*='hermes-accordion-panel-'] > .hermes-accordion-header {
32
+ border-top-left-radius: unset;
33
+ border-top-right-radius: unset;
34
+ }
35
+
36
+ .hermes-accordion-panel:not(:last-child) > div[class*='hermes-accordion-panel-'] > .hermes-accordion-header {
37
+ &,
38
+ & + .hermes-accordion-content-region > .hermes-accordion-content {
39
+ border-bottom-left-radius: unset;
40
+ border-bottom-right-radius: unset;
41
+ }
42
+ }
43
+
44
+ .hermes-accordion-panel-open > .hermes-accordion-header {
45
+ border-bottom-left-radius: 0;
46
+ border-bottom-right-radius: 0;
47
+ }
48
+
49
+ .hermes-accordion-header-button {
50
+ align-items: center;
51
+ padding: density.$hermes-base-vertical-offset-m density.$hermes-base-horizontal-offset-l;
52
+ }
53
+
54
+ .hermes-accordion-inner-content {
55
+ padding: density.$hermes-base-vertical-offset-m density.$hermes-base-horizontal-offset-l
56
+ density.$hermes-base-vertical-offset-m
57
+ calc(
58
+ density.$hermes-base-horizontal-offset-l + density.$hermes-base-icon-size-s + density.$hermes-base-horizontal-offset-m
59
+ );
60
+ color: accordion-variables.$hermes-accordion-content-color;
61
+
62
+ @include mixins.generate-typography-token('SECONDARY-13-RG-STD');
63
+ }
64
+
65
+ .hermes-accordion-panel-disabled .hermes-accordion-inner-content {
66
+ color: accordion-variables.$hermes-accordion-panel-disabled-color;
67
+ cursor: not-allowed;
68
+ }
69
+
70
+ .hermes-accordion-status {
71
+ width: auto;
72
+
73
+ hermes-icon,
74
+ hermes-icon {
75
+ &:not([size]) {
76
+ @include mixins.min-equilateral(density.$hermes-base-icon-size-s);
77
+ }
78
+ }
79
+ }
80
+ }
81
+ }
package/accordion/_properties.accordion.scss ADDED
@@ -0,0 +1,45 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ @use 'sass:meta';
9
+ @use '../styles/mixins';
10
+
11
+ // The base collapsible-panel properties are loaded first. Accordion properties
12
+ // alias them so consumers can override per-component via --hermes-accordion-* or
13
+ // globally via --hermes-collapsible-panel-*. The base mixin styles resolve
14
+ // --hermes-collapsible-panel-* directly; accordion-only styles use --hermes-accordion-*.
15
+ @include meta.load-css('../collapsible-panel/properties.collapsible-panel');
16
+ @include mixins.exports('accordion.properties') {
17
+ @include mixins.root-or-host() {
18
+ &,
19
+ [hermes-theme] {
20
+ --hermes-accordion-text-color: var(--hermes-collapsible-panel-text-color);
21
+ --hermes-accordion-text-color-hover: var(--hermes-collapsible-panel-text-color-hover);
22
+ --hermes-accordion-text-color-active: var(--hermes-collapsible-panel-text-color-active);
23
+ --hermes-accordion-panel-disabled-color: var(--hermes-collapsible-panel-panel-disabled-color);
24
+ --hermes-accordion-content-background-color: var(--hermes-collapsible-panel-content-background-color);
25
+ --hermes-accordion-content-color: var(--hermes-collapsible-panel-content-color);
26
+ --hermes-accordion-header-background-color: var(--hermes-collapsible-panel-header-background-color);
27
+ --hermes-accordion-header-disabled-background-color: var(--hermes-collapsible-panel-header-disabled-background-color);
28
+ --hermes-accordion-header-hover-background-color: var(--hermes-collapsible-panel-header-hover-background-color);
29
+ --hermes-accordion-header-active-background-color: var(--hermes-collapsible-panel-header-active-background-color);
30
+ --hermes-accordion-header-open-background-color: var(--hermes-collapsible-panel-header-open-background-color);
31
+ --hermes-accordion-header-open-active-background-color: var(
32
+ --hermes-collapsible-panel-header-open-active-background-color
33
+ );
34
+ --hermes-accordion-header-open-hover-background-color: var(
35
+ --hermes-collapsible-panel-header-open-hover-background-color
36
+ );
37
+ --hermes-accordion-border-color: var(--hermes-collapsible-panel-border-color);
38
+ }
39
+
40
+ &,
41
+ [hermes-density] {
42
+ --hermes-accordion-border-radius: var(--hermes-collapsible-panel-border-radius);
43
+ }
44
+ }
45
+ }
package/accordion/_variables.accordion.scss ADDED
@@ -0,0 +1,91 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ @use '../collapsible-panel/variables.collapsible-panel' as panel-variables;
9
+
10
+ $hermes-accordion-text-color: var(
11
+ --hermes-accordion-text-color,
12
+ #{panel-variables.$hermes-collapsible-panel-text-color}
13
+ ) !default;
14
+ $hermes-accordion-text-color-hover: var(
15
+ --hermes-accordion-text-color-hover,
16
+ #{panel-variables.$hermes-collapsible-panel-text-color-hover}
17
+ ) !default;
18
+ $hermes-accordion-text-color-active: var(
19
+ --hermes-accordion-text-color-active,
20
+ #{panel-variables.$hermes-collapsible-panel-text-color-active}
21
+ ) !default;
22
+ $hermes-accordion-panel-disabled-color: var(
23
+ --hermes-accordion-panel-disabled-color,
24
+ #{panel-variables.$hermes-collapsible-panel-panel-disabled-color}
25
+ ) !default;
26
+ $hermes-accordion-content-background-color: var(
27
+ --hermes-accordion-content-background-color,
28
+ #{panel-variables.$hermes-collapsible-panel-content-background-color}
29
+ ) !default;
30
+ $hermes-accordion-header-background-color: var(
31
+ --hermes-accordion-header-background-color,
32
+ #{panel-variables.$hermes-collapsible-panel-header-background-color}
33
+ ) !default;
34
+ $hermes-accordion-header-disabled-background-color: var(
35
+ --hermes-accordion-header-disabled-background-color,
36
+ #{panel-variables.$hermes-collapsible-panel-header-disabled-background-color}
37
+ ) !default;
38
+ $hermes-accordion-header-hover-background-color: var(
39
+ --hermes-accordion-header-hover-background-color,
40
+ #{panel-variables.$hermes-collapsible-panel-header-hover-background-color}
41
+ ) !default;
42
+ $hermes-accordion-header-active-background-color: var(
43
+ --hermes-accordion-header-active-background-color,
44
+ #{panel-variables.$hermes-collapsible-panel-header-active-background-color}
45
+ ) !default;
46
+ $hermes-accordion-header-open-background-color: var(
47
+ --hermes-accordion-header-open-background-color,
48
+ #{panel-variables.$hermes-collapsible-panel-header-open-background-color}
49
+ ) !default;
50
+ $hermes-accordion-header-open-active-background-color: var(
51
+ --hermes-accordion-header-open-active-background-color,
52
+ #{panel-variables.$hermes-collapsible-panel-header-open-active-background-color}
53
+ ) !default;
54
+ $hermes-accordion-header-open-hover-background-color: var(
55
+ --hermes-accordion-header-open-hover-background-color,
56
+ #{panel-variables.$hermes-collapsible-panel-header-open-hover-background-color}
57
+ ) !default;
58
+
59
+ $hermes-accordion-content-color: var(
60
+ --hermes-accordion-content-color,
61
+ #{panel-variables.$hermes-collapsible-panel-content-color}
62
+ ) !default;
63
+
64
+ $hermes-accordion-responsive-breakpoint: panel-variables.$hermes-collapsible-panel-responsive-breakpoint !default;
65
+
66
+ $hermes-accordion-border-color: var(
67
+ --hermes-accordion-border-color,
68
+ #{panel-variables.$hermes-collapsible-panel-border-color}
69
+ ) !default;
70
+ $hermes-accordion-border-radius: var(
71
+ --hermes-accordion-border-radius,
72
+ #{panel-variables.$hermes-collapsible-panel-border-radius}
73
+ ) !default;
74
+
75
+ $hermes-accordion-theme: (
76
+ text-color: $hermes-accordion-text-color,
77
+ text-color-hover: $hermes-accordion-text-color-hover,
78
+ text-color-active: $hermes-accordion-text-color-active,
79
+ panel-disabled-color: $hermes-accordion-panel-disabled-color,
80
+ content-background-color: $hermes-accordion-content-background-color,
81
+ header-background-color: $hermes-accordion-header-background-color,
82
+ header-disabled-background-color: $hermes-accordion-header-disabled-background-color,
83
+ header-hover-background-color: $hermes-accordion-header-hover-background-color,
84
+ header-active-background-color: $hermes-accordion-header-active-background-color,
85
+ header-open-background-color: $hermes-accordion-header-open-background-color,
86
+ header-open-active-background-color: $hermes-accordion-header-open-active-background-color,
87
+ header-open-hover-background-color: $hermes-accordion-header-open-hover-background-color,
88
+ border-color: $hermes-accordion-border-color,
89
+ content-color: $hermes-accordion-content-color,
90
+ responsive-breakpoint: $hermes-accordion-responsive-breakpoint,
91
+ );
package/addons/a11y/README.md ADDED
@@ -0,0 +1,157 @@
1
+ ## Overview
2
+
3
+ The `@hermes/angular/addons/a11y` package contains a number of components, directives and services to improve accessibility.
4
+
5
+ You'll need to import the AppfxA11yModule in your module to be able to use them.
6
+
7
+ Code example for importing the AppfxA11yModule in a custom module:
8
+
9
+ ```ts
10
+ import { AppfxA11yModule } from '@hermes/angular/addons/a11y';
11
+
12
+ @NgModule({
13
+ imports: [AppfxA11yModule],
14
+ })
15
+ export class MyModule {}
16
+ ```
17
+
18
+ ### Tabs Overflow Directive
19
+
20
+ Automatically include the tab links in overflow if there is not enough width. You'll need to add the directive **appfxOverflowTabs** to your **`<hermes-tabs>`** clarity tab to activate the automatic overflow detection as shown in the example below.
21
+
22
+ ![Overflow example](assets/appfx/appfx-overflow-tabs.png)
23
+
24
+ Compatible with both:
25
+
26
+ - [Appfx Tabs] (https://localhost:4200/@hermes/angular/addons/tabs/overview), It's supported by default, no need to add any flags or directives to an existing `appfx-tabs` tag.
27
+ - [Clarity Tabs] (https://clarity.design/documentation/tabs)
28
+
29
+ #### Clarity Example
30
+
31
+ ```html
32
+ <div>
33
+ <hermes-tabs appfxOverflowTabs>
34
+ <hermes-tab>
35
+ <button hermesTabLink>Tab 1</button>
36
+ <hermes-tab-content>Content 1</hermes-tab-content>
37
+ </hermes-tab>
38
+
39
+ <hermes-tab>
40
+ <button hermesTabLink>Tab 2</button>
41
+ <hermes-tab-content>Content 2</hermes-tab-content>
42
+ </hermes-tab>
43
+
44
+ <hermes-tab>
45
+ <button hermesTabLink>Tab 3</button>
46
+ <hermes-tab-content>Content 3</hermes-tab-content>
47
+ </hermes-tab>
48
+
49
+ <hermes-tab>
50
+ <button hermesTabLink>Tab 4</button>
51
+ <hermes-tab-content>Content 4</hermes-tab-content>
52
+ </hermes-tab>
53
+ </hermes-tabs>
54
+ </div>
55
+ ```
56
+
57
+ ### Required Field Legend
58
+
59
+ A generic required field legend to be used with forms. To use the Required Field Legend, simply use the appfx-required-field-legend component inside the form.
60
+
61
+ ![Required field legend example](assets/appfx/required-field-legend.png)
62
+
63
+ #### Localization support
64
+
65
+ Consumers of the appfx-required-field-legend can use the [TranslateService] (@hermes/angular/addons/translate/overview) to sync the locale with their application locale.
66
+
67
+ #### Example Usage
68
+
69
+ ```html
70
+ <form hermesForm [formGroup]="myFormGroup">
71
+ <appfx-required-field-legend></appfx-required-field-legend>
72
+ <hermes-input-container hermesInline>
73
+ <label class="hermes-required-mark">Label</label>
74
+ <input hermesInput type="text" formControlName="myValue" />
75
+ </hermes-input-container>
76
+ </form>
77
+ ```
78
+
79
+ ### Zoom Level Indicator Directive
80
+
81
+ #### Breakpoints and Bootstrap compatibility notes:
82
+
83
+ Supported zoom levels are 200% and 400% with breakpoints based on Bootstrap responsive breakpoints:
84
+ https://getbootstrap.com/docs/4.5/layout/overview/
85
+
86
+ The mapping between zoom levels and Bootstrap breakpoints is:
87
+
88
+ - **400%** = Bootstrap XS - <576px
89
+ - **200%** = Bootstrap SM | MD | L - ≥576px
90
+ - **none** (no-zoom) = Bootstrap XL - ≥1200px
91
+
92
+ #### Example Usage
93
+
94
+ ```html
95
+ <div class="my-component" zoomLevelIndicator>...</div>
96
+ ```
97
+
98
+ ```css
99
+ .my-component {
100
+ &.no-zoom {
101
+ flex-direction: row;
102
+ }
103
+
104
+ &.zoom2x,
105
+ &.zoom4x {
106
+ // reflow direction of a div
107
+ flex-direction: column;
108
+ }
109
+ }
110
+ ```
111
+
112
+ ### Zoom Indicator service
113
+
114
+ A service for detecting zoom level based on document body size. Uses ResizeObserver for detecting body size changes.
115
+
116
+ #### Example Usage
117
+
118
+ ```ts
119
+ import { ZoomLevel, ZoomLevelService } from "@hermes/angular/addons/a11y";
120
+
121
+ ...
122
+
123
+ export class MyComponent implements OnInit, OnDestroy {
124
+
125
+ private subscription: Subscription;
126
+
127
+ public constructor(...
128
+ private zoomLevelService: ZoomLevelService ) {
129
+ }
130
+
131
+ public ngOnInit() {
132
+ if (this.zoomLevelService) {
133
+ this.subscription = this.zoomLevelService.onChange.subscribe((zoom) => {
134
+ switch (zoom) {
135
+ case ZoomLevel.none:
136
+ // do something when no zoom is detected
137
+ break;
138
+
139
+ case ZoomLevel.x2:
140
+ // do something when zoom 200% is detected
141
+ break;
142
+
143
+ case ZoomLevel.x4:
144
+ // do something when zoom 400% is detected
145
+ break;
146
+ }
147
+ });
148
+ }
149
+ }
150
+
151
+ public ngOnDestroy() {
152
+ if (this.subscription) {
153
+ this.subscription.unsubscribe();
154
+ }
155
+ }
156
+ }
157
+ ```
package/addons/a11y/forms/required-field-legend.component.scss ADDED
@@ -0,0 +1,17 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ .legend-wrapper {
9
+ display: inline-block;
10
+ position: relative;
11
+ height: 1.5rem;
12
+ font-style: italic;
13
+
14
+ .icon-margin {
15
+ margin-right: 0.3rem;
16
+ }
17
+ }
package/addons/card-container/card/appfx-card.component.scss ADDED
@@ -0,0 +1,137 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ $cool-grey: var(--hermes-global-color-cool-gray-500);
9
+ $neutral-grey: var(--hermes-global-color-construction-400);
10
+ $purple-dark: var(--hermes-global-color-lavender-400);
11
+ $purple-medium: var(--hermes-global-color-lavender-300);
12
+ $purple-light: var(--hermes-global-color-lavender-100);
13
+ $card-container-card-margin: 7px;
14
+ $card-container-card-border-width: 2px;
15
+ $card-container-card-shadow-offset: 2px;
16
+ $card-container-card-shadow-blur: 10px;
17
+ $card-container-selected-card-opacity: 0.4;
18
+
19
+ @mixin drop-indicator-solid {
20
+ border-right: $card-container-card-border-width solid $purple-medium;
21
+ position: relative;
22
+
23
+ &::before {
24
+ content: '\25CF';
25
+ color: $purple-medium;
26
+ position: absolute;
27
+ right: -5px;
28
+ top: -10px;
29
+ }
30
+ }
31
+ @mixin drop-indicator-dashed {
32
+ border-right: $card-container-card-border-width dashed $purple-light;
33
+ }
34
+
35
+ .draggable {
36
+ /* stylelint-disable-next-line declaration-property-value-no-unknown */
37
+ margin: 0 $card-container-card-margin;
38
+ position: relative;
39
+
40
+ .drag-handler-button {
41
+ position: absolute;
42
+ right: 0;
43
+ border: none;
44
+ margin: unset;
45
+ z-index: 1;
46
+
47
+ .drag-handle-icon {
48
+ position: absolute;
49
+ right: 0;
50
+ color: $neutral-grey;
51
+ cursor: grab;
52
+
53
+ &:hover {
54
+ color: $purple-dark;
55
+ }
56
+ }
57
+ }
58
+
59
+ ::ng-deep {
60
+ .card {
61
+ margin-top: 0;
62
+ }
63
+
64
+ .card-header {
65
+ border-bottom: none;
66
+ }
67
+ }
68
+ }
69
+
70
+ ::ng-deep {
71
+ .draggable.cdk-drag-preview {
72
+ .card {
73
+ box-shadow: $card-container-card-shadow-offset $card-container-card-shadow-offset $card-container-card-shadow-blur
74
+ 0 $cool-grey;
75
+ }
76
+
77
+ .draggable {
78
+ margin: 0;
79
+ }
80
+
81
+ .drag-handle-icon {
82
+ // Ignore pointer events on the dragged element to allow drop zone calculation.
83
+ pointer-events: none;
84
+ // FIXME: not working because ot the pointer-events.
85
+ cursor: grabbing;
86
+
87
+ :focus {
88
+ color: $purple-dark;
89
+ }
90
+ }
91
+ }
92
+ }
93
+
94
+ .droppable {
95
+ margin: $card-container-card-margin 0;
96
+ border: $card-container-card-border-width solid transparent;
97
+
98
+ &.cdk-drop-list-receiving {
99
+ @include drop-indicator-dashed;
100
+ }
101
+
102
+ &.cdk-drop-list-dragging {
103
+ @include drop-indicator-solid;
104
+
105
+ .draggable:not(.cdk-drag-placeholder, .cdk-drag-preview) {
106
+ // Override the transform that Angular CDK is adding to the element via JS as a direct style.
107
+ // The transform is meant to rearrange the targets so it makes space for the dragged item
108
+ // but our UX uses a border that shows where the item will be dropped instead of a placeholder item.
109
+ transform: unset !important;
110
+ }
111
+ }
112
+
113
+ // Used by the a11y service for keyboard navigation.
114
+ &.draggable-over {
115
+ @include drop-indicator-solid;
116
+ }
117
+ }
118
+
119
+ // Remove the placeholder item so it prevents the card rearrangement during drag.
120
+ .custom-placeholder {
121
+ height: 0;
122
+ width: 0;
123
+ }
124
+
125
+ // Used by the a11y service for keyboard navigation.
126
+ .selected-card {
127
+ opacity: $card-container-selected-card-opacity;
128
+ transition: 0.2s linear all;
129
+
130
+ &.draggable:focus {
131
+ outline: none;
132
+
133
+ .card {
134
+ box-shadow: none;
135
+ }
136
+ }
137
+ }
package/addons/card-container/container/appfx-card-container.component.scss ADDED
@@ -0,0 +1,17 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ // to remove margin added by cards on left and right
9
+ // so that card container can use fill width
10
+ $card-container-margin-reset: -5px;
11
+
12
+ .card-container {
13
+ display: flex;
14
+ flex-wrap: wrap;
15
+ /* stylelint-disable-next-line declaration-property-value-no-unknown */
16
+ margin: auto $card-container-margin-reset;
17
+ }
package/addons/card-container/settings/appfx-card-container-settings.component.scss ADDED
@@ -0,0 +1,62 @@
1
+ /*
2
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
3
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
4
+ * This software is released under MIT license.
5
+ * The full license information can be found in LICENSE in the root directory of this project.
6
+ */
7
+
8
+ $neutral-grey-6: #ccc;
9
+ $container-settings-label-spacing: 18px;
10
+ $container-settings-max-width: 250px;
11
+ $container-settings-list-max-height: 350px;
12
+
13
+ .settings-btn {
14
+ padding: 0;
15
+ }
16
+
17
+ .container-settings {
18
+ margin-top: 7px;
19
+ max-height: $container-settings-list-max-height;
20
+ overflow-y: auto;
21
+
22
+ .disabled-item {
23
+ input[type='checkbox'] + label::before {
24
+ background-color: $neutral-grey-6;
25
+ }
26
+
27
+ label {
28
+ color: $neutral-grey-6;
29
+ cursor: not-allowed;
30
+ }
31
+ }
32
+
33
+ .container-settings-list {
34
+ max-height: $container-settings-list-max-height;
35
+ overflow-y: auto;
36
+ }
37
+
38
+ .dropdown-item {
39
+ .hermes-checkbox-wrapper {
40
+ padding: 0 var(--hermes-global-space-3);
41
+
42
+ label.hermes-control-label {
43
+ padding-left: $container-settings-label-spacing;
44
+ padding-right: $container-settings-label-spacing;
45
+ max-width: $container-settings-max-width;
46
+ flex: 1 1 100%;
47
+ }
48
+ }
49
+ }
50
+ }
51
+
52
+ hermes-dropdown {
53
+ .settings-btn {
54
+ margin-top: 10px;
55
+ padding-right: 0;
56
+ }
57
+ }
58
+
59
+ :host ::ng-deep .dropdown-menu .dropdown-item {
60
+ flex: 1 0;
61
+ padding: 0;
62
+ }