@daffodil/design 0.78.0 → 0.80.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 (386) hide show
  1. package/accordion/accordion.module.d.ts +3 -1
  2. package/accordion/src/accordion-theme.scss +4 -4
  3. package/article/README.md +5 -6
  4. package/article/article.module.d.ts +3 -1
  5. package/article/src/article-theme.scss +8 -8
  6. package/atoms/form/form-field/form-field/form-field.component.d.ts +1 -1
  7. package/breadcrumb/breadcrumb.module.d.ts +3 -1
  8. package/breadcrumb/src/breadcrumb-theme.scss +3 -3
  9. package/button/README.md +3 -3
  10. package/button/button/basic/button.component.d.ts +28 -0
  11. package/button/button/button-base.directive.d.ts +51 -0
  12. package/button/button/flat/flat.component.d.ts +28 -0
  13. package/button/button/icon/icon.component.d.ts +24 -0
  14. package/button/button/raised/raised.component.d.ts +28 -0
  15. package/button/button/stroked/stroked.component.d.ts +28 -0
  16. package/button/button/underline/underline.component.d.ts +28 -0
  17. package/button/button.d.ts +7 -2
  18. package/button/button.module.d.ts +11 -4
  19. package/button/public_api.d.ts +6 -1
  20. package/button/src/button/basic/button-theme.scss +145 -0
  21. package/button/src/button/button-base.scss +79 -0
  22. package/button/src/button/flat/flat-theme.scss +142 -0
  23. package/button/src/button/icon/icon-theme.scss +140 -0
  24. package/button/src/button/raised/raised-theme.scss +107 -0
  25. package/button/src/button/stroked/stroked-theme.scss +155 -0
  26. package/button/src/button/underline/underline-theme.scss +89 -0
  27. package/callout/callout.module.d.ts +3 -1
  28. package/callout/src/callout-theme.scss +11 -17
  29. package/card/card.module.d.ts +1 -1
  30. package/card/src/card-theme-variants/linkable-card.scss +1 -1
  31. package/card/src/card-theme.scss +9 -9
  32. package/container/container.module.d.ts +1 -1
  33. package/core/public_api.d.ts +1 -0
  34. package/core/selectable/public_api.d.ts +2 -0
  35. package/core/selectable/selectable.d.ts +7 -0
  36. package/core/selectable/selectable.directive.d.ts +17 -0
  37. package/core/statusable/statusable.d.ts +5 -3
  38. package/core/statusable/statusable.directive.d.ts +6 -4
  39. package/esm2022/accordion/accordion/animation/accordion-animation.mjs +1 -4
  40. package/esm2022/accordion/accordion.module.mjs +4 -2
  41. package/esm2022/article/article.module.mjs +4 -2
  42. package/esm2022/atoms/form/checkbox/checkbox.component.mjs +2 -2
  43. package/esm2022/atoms/form/checkbox-set/checkbox-set.component.mjs +2 -2
  44. package/esm2022/atoms/form/form-field/form-field/form-field.component.mjs +2 -2
  45. package/esm2022/atoms/form/radio/radio.component.mjs +2 -2
  46. package/esm2022/atoms/form/radio-set/radio-set.component.mjs +2 -2
  47. package/esm2022/breadcrumb/breadcrumb.module.mjs +4 -2
  48. package/esm2022/button/button/basic/button.component.mjs +48 -0
  49. package/esm2022/button/button/button-base.directive.mjs +105 -0
  50. package/esm2022/button/button/flat/flat.component.mjs +48 -0
  51. package/esm2022/button/button/icon/icon.component.mjs +44 -0
  52. package/esm2022/button/button/raised/raised.component.mjs +48 -0
  53. package/esm2022/button/button/stroked/stroked.component.mjs +48 -0
  54. package/esm2022/button/button/underline/underline.component.mjs +48 -0
  55. package/esm2022/button/button.mjs +12 -2
  56. package/esm2022/button/button.module.mjs +37 -5
  57. package/esm2022/button/examples/basic-button/basic-button.component.mjs +4 -6
  58. package/esm2022/button/examples/flat-button/flat-button.component.mjs +4 -6
  59. package/esm2022/button/examples/icon-button/icon-button.component.mjs +4 -6
  60. package/esm2022/button/examples/raised-button/raised-button.component.mjs +4 -6
  61. package/esm2022/button/examples/sizeable-button/sizeable-button.component.mjs +2 -2
  62. package/esm2022/button/examples/statusable-button/statusable-button.component.mjs +3 -3
  63. package/esm2022/button/examples/stroked-button/stroked-button.component.mjs +4 -6
  64. package/esm2022/button/examples/underline-button/underline-button.component.mjs +4 -6
  65. package/esm2022/button/public_api.mjs +7 -2
  66. package/esm2022/callout/callout.module.mjs +4 -2
  67. package/esm2022/callout/examples/callout-text-alignment/callout-text-alignment.component.mjs +5 -7
  68. package/esm2022/callout/examples/callout-theming/callout-theming.component.mjs +5 -7
  69. package/esm2022/callout/examples/callout-with-grid/callout-with-grid.component.mjs +5 -6
  70. package/esm2022/callout/examples/compact-callout/compact-callout.component.mjs +4 -6
  71. package/esm2022/card/card.module.mjs +2 -2
  72. package/esm2022/card/examples/basic-card/basic-card.component.mjs +4 -6
  73. package/esm2022/card/examples/card-orientation/card-orientation.component.mjs +5 -7
  74. package/esm2022/checkbox/examples/basic-checkbox/basic-checkbox.component.mjs +4 -5
  75. package/esm2022/checkbox/examples/checkbox-set/checkbox-set.component.mjs +4 -5
  76. package/esm2022/container/container/container.component.mjs +2 -2
  77. package/esm2022/container/container.module.mjs +2 -2
  78. package/esm2022/core/public_api.mjs +2 -1
  79. package/esm2022/core/selectable/public_api.mjs +2 -0
  80. package/esm2022/core/selectable/selectable.directive.mjs +41 -0
  81. package/esm2022/core/selectable/selectable.mjs +2 -0
  82. package/esm2022/core/statusable/statusable.directive.mjs +7 -5
  83. package/esm2022/core/statusable/statusable.mjs +3 -2
  84. package/esm2022/hero/examples/compact-hero/compact-hero.component.mjs +4 -6
  85. package/esm2022/hero/examples/hero-text-alignment/hero-text-alignment.component.mjs +5 -7
  86. package/esm2022/hero/examples/hero-theming/hero-theming.component.mjs +5 -7
  87. package/esm2022/hero/examples/hero-with-grid/hero-with-grid.component.mjs +4 -6
  88. package/esm2022/hero/hero.module.mjs +2 -2
  89. package/esm2022/image/image.module.mjs +2 -2
  90. package/esm2022/link-set/link-set.module.mjs +2 -2
  91. package/esm2022/list/examples/basic-list/basic-list.component.mjs +1 -1
  92. package/esm2022/list/examples/icon-list/icon-list.component.mjs +2 -2
  93. package/esm2022/list/examples/multiline-list/multiline-list.component.mjs +1 -1
  94. package/esm2022/list/examples/nav-list/nav-list.component.mjs +2 -2
  95. package/esm2022/list/list/list.component.mjs +2 -2
  96. package/esm2022/list/list-item/list-item.component.mjs +10 -3
  97. package/esm2022/list/list.module.mjs +2 -2
  98. package/esm2022/loading-icon/examples/examples.mjs +1 -3
  99. package/esm2022/loading-icon/examples/loading-icon-color/loading-icon-color.component.mjs +2 -2
  100. package/esm2022/loading-icon/loading-icon/loading-icon.component.mjs +5 -20
  101. package/esm2022/loading-icon/loading-icon.module.mjs +2 -2
  102. package/esm2022/media-gallery/examples/basic-media-gallery/basic-media-gallery.component.mjs +1 -1
  103. package/esm2022/media-gallery/examples/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.mjs +1 -1
  104. package/esm2022/media-gallery/examples/skeleton-media-gallery/skeleton-media-gallery.component.mjs +1 -1
  105. package/esm2022/media-gallery/helpers/media-gallery-token.mjs +7 -3
  106. package/esm2022/media-gallery/media-gallery.module.mjs +2 -2
  107. package/esm2022/media-gallery/thumbnail/thumbnail-compat.token.mjs +8 -3
  108. package/esm2022/media-gallery/thumbnail/thumbnail.directive.mjs +26 -39
  109. package/esm2022/menu/examples/basic-menu/basic-menu.component.mjs +5 -7
  110. package/esm2022/modal/examples/basic-modal/basic-modal.component.mjs +4 -6
  111. package/esm2022/modal/examples/basic-modal/modal-content.component.mjs +4 -6
  112. package/esm2022/modal/modal-header/modal-header.component.mjs +4 -6
  113. package/esm2022/modal/modal.module.mjs +2 -2
  114. package/esm2022/navbar/examples/basic-navbar/basic-navbar.component.mjs +4 -6
  115. package/esm2022/navbar/examples/contained-navbar/contained-navbar.component.mjs +4 -6
  116. package/esm2022/navbar/examples/navbar-theming/navbar-theming.component.mjs +5 -7
  117. package/esm2022/navbar/examples/raised-navbar/raised-navbar.component.mjs +4 -6
  118. package/esm2022/navbar/navbar.module.mjs +2 -2
  119. package/esm2022/notification/examples/default-notification/default-notification.component.mjs +1 -3
  120. package/esm2022/notification/examples/notification-orientations/notification-orientations.component.mjs +1 -3
  121. package/esm2022/notification/examples/notification-status/notification-status.component.mjs +3 -5
  122. package/esm2022/notification/examples/notification-with-actions/notification-with-actions.component.mjs +4 -5
  123. package/esm2022/notification/notification/notification.component.mjs +3 -3
  124. package/esm2022/notification/notification.module.mjs +2 -2
  125. package/esm2022/paginator/paginator.module.mjs +2 -2
  126. package/esm2022/progress-bar/progress-bar.module.mjs +2 -2
  127. package/esm2022/sidebar/examples/over-and-under-sidebars/over-and-under-sidebars.component.mjs +5 -6
  128. package/esm2022/sidebar/sidebar-viewport/scroll-token/scroll.token.mjs +9 -3
  129. package/esm2022/sidebar/sidebar-viewport/sidebar-viewport.component.mjs +3 -3
  130. package/esm2022/sidebar/sidebar.module.mjs +2 -2
  131. package/esm2022/switch/daffodil-design-switch.mjs +5 -0
  132. package/esm2022/switch/examples/basic-switch/basic-switch.component.mjs +23 -0
  133. package/esm2022/switch/examples/daffodil-design-switch-examples.mjs +5 -0
  134. package/esm2022/switch/examples/disabled-switch/disabled-switch.component.mjs +20 -0
  135. package/esm2022/switch/examples/examples.mjs +13 -0
  136. package/esm2022/switch/examples/index.mjs +2 -0
  137. package/esm2022/switch/examples/loading-switch/loading-switch.component.mjs +20 -0
  138. package/esm2022/switch/examples/public_api.mjs +7 -0
  139. package/esm2022/switch/examples/switch-error/switch-error.component.mjs +22 -0
  140. package/esm2022/switch/examples/switch-label-positions/switch-label-positions.component.mjs +31 -0
  141. package/esm2022/switch/index.mjs +2 -0
  142. package/esm2022/switch/public_api.mjs +3 -0
  143. package/esm2022/switch/switch/label-position.mjs +11 -0
  144. package/esm2022/switch/switch/switch.component.mjs +126 -0
  145. package/esm2022/switch/switch.mjs +7 -0
  146. package/esm2022/tabs/daffodil-design-tabs.mjs +5 -0
  147. package/esm2022/tabs/examples/basic-tabs/basic-tabs.component.mjs +22 -0
  148. package/esm2022/tabs/examples/custom-select-tabs/custom-select-tabs.component.mjs +34 -0
  149. package/esm2022/tabs/examples/daffodil-design-tabs-examples.mjs +5 -0
  150. package/esm2022/tabs/examples/disabled-tabs/disabled-tabs.component.mjs +22 -0
  151. package/esm2022/tabs/examples/index.mjs +2 -0
  152. package/esm2022/tabs/examples/initially-select-tab/initially-select-tab.component.mjs +22 -0
  153. package/esm2022/tabs/examples/public_api.mjs +11 -0
  154. package/esm2022/tabs/index.mjs +2 -0
  155. package/esm2022/tabs/public_api.mjs +6 -0
  156. package/esm2022/tabs/tabs/tab/tab.component.mjs +86 -0
  157. package/esm2022/tabs/tabs/tab-activator/tab-activator.component.mjs +84 -0
  158. package/esm2022/tabs/tabs/tab-label/tab-label.component.mjs +33 -0
  159. package/esm2022/tabs/tabs/tab-panel/tab-panel.component.mjs +68 -0
  160. package/esm2022/tabs/tabs/tabs.component.mjs +157 -0
  161. package/esm2022/tabs/tabs.mjs +13 -0
  162. package/esm2022/text-snippet/daffodil-design-text-snippet.mjs +5 -0
  163. package/esm2022/text-snippet/examples/basic-text-snippet/basic-text-snippet.component.mjs +14 -0
  164. package/esm2022/text-snippet/examples/daffodil-design-text-snippet-examples.mjs +5 -0
  165. package/esm2022/text-snippet/examples/index.mjs +2 -0
  166. package/esm2022/text-snippet/examples/public_api.mjs +5 -0
  167. package/esm2022/text-snippet/index.mjs +2 -0
  168. package/esm2022/text-snippet/public_api.mjs +2 -0
  169. package/esm2022/text-snippet/text-snippet.component.mjs +46 -0
  170. package/esm2022/toast/examples/default-toast/default-toast.component.mjs +4 -6
  171. package/esm2022/toast/examples/toast-positions/toast-positions.component.mjs +4 -6
  172. package/esm2022/toast/examples/toast-status/toast-status.component.mjs +8 -10
  173. package/esm2022/toast/examples/toast-with-custom-duration/toast-with-custom-duration.component.mjs +4 -6
  174. package/esm2022/toast/options/daff-toast-options.mjs +7 -7
  175. package/esm2022/toast/toast/toast-provider.mjs +2 -2
  176. package/esm2022/toast/toast/toast-template.component.mjs +2 -2
  177. package/esm2022/toast/toast/toast.component.mjs +3 -3
  178. package/esm2022/toast/toast.module.mjs +2 -2
  179. package/esm2022/tree/tree.module.mjs +2 -2
  180. package/fesm2022/daffodil-design-accordion.mjs +3 -4
  181. package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
  182. package/fesm2022/daffodil-design-article.mjs +3 -1
  183. package/fesm2022/daffodil-design-article.mjs.map +1 -1
  184. package/fesm2022/daffodil-design-breadcrumb.mjs +3 -1
  185. package/fesm2022/daffodil-design-breadcrumb.mjs.map +1 -1
  186. package/fesm2022/daffodil-design-button-examples.mjs +16 -16
  187. package/fesm2022/daffodil-design-button-examples.mjs.map +1 -1
  188. package/fesm2022/daffodil-design-button.mjs +308 -132
  189. package/fesm2022/daffodil-design-button.mjs.map +1 -1
  190. package/fesm2022/daffodil-design-callout-examples.mjs +12 -13
  191. package/fesm2022/daffodil-design-callout-examples.mjs.map +1 -1
  192. package/fesm2022/daffodil-design-callout.mjs +3 -1
  193. package/fesm2022/daffodil-design-callout.mjs.map +1 -1
  194. package/fesm2022/daffodil-design-card-examples.mjs +10 -12
  195. package/fesm2022/daffodil-design-card-examples.mjs.map +1 -1
  196. package/fesm2022/daffodil-design-card.mjs +1 -1
  197. package/fesm2022/daffodil-design-card.mjs.map +1 -1
  198. package/fesm2022/daffodil-design-checkbox-examples.mjs +5 -6
  199. package/fesm2022/daffodil-design-checkbox-examples.mjs.map +1 -1
  200. package/fesm2022/daffodil-design-container.mjs +3 -3
  201. package/fesm2022/daffodil-design-container.mjs.map +1 -1
  202. package/fesm2022/daffodil-design-hero-examples.mjs +11 -13
  203. package/fesm2022/daffodil-design-hero-examples.mjs.map +1 -1
  204. package/fesm2022/daffodil-design-hero.mjs +1 -1
  205. package/fesm2022/daffodil-design-hero.mjs.map +1 -1
  206. package/fesm2022/daffodil-design-image.mjs +1 -1
  207. package/fesm2022/daffodil-design-image.mjs.map +1 -1
  208. package/fesm2022/daffodil-design-link-set.mjs +1 -1
  209. package/fesm2022/daffodil-design-link-set.mjs.map +1 -1
  210. package/fesm2022/daffodil-design-list-examples.mjs +4 -4
  211. package/fesm2022/daffodil-design-list-examples.mjs.map +1 -1
  212. package/fesm2022/daffodil-design-list.mjs +12 -5
  213. package/fesm2022/daffodil-design-list.mjs.map +1 -1
  214. package/fesm2022/daffodil-design-loading-icon-examples.mjs +1 -13
  215. package/fesm2022/daffodil-design-loading-icon-examples.mjs.map +1 -1
  216. package/fesm2022/daffodil-design-loading-icon.mjs +5 -20
  217. package/fesm2022/daffodil-design-loading-icon.mjs.map +1 -1
  218. package/fesm2022/daffodil-design-media-gallery-examples.mjs +3 -3
  219. package/fesm2022/daffodil-design-media-gallery-examples.mjs.map +1 -1
  220. package/fesm2022/daffodil-design-media-gallery.mjs +37 -42
  221. package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
  222. package/fesm2022/daffodil-design-menu-examples.mjs +3 -5
  223. package/fesm2022/daffodil-design-menu-examples.mjs.map +1 -1
  224. package/fesm2022/daffodil-design-modal-examples.mjs +5 -7
  225. package/fesm2022/daffodil-design-modal-examples.mjs.map +1 -1
  226. package/fesm2022/daffodil-design-modal.mjs +4 -5
  227. package/fesm2022/daffodil-design-modal.mjs.map +1 -1
  228. package/fesm2022/daffodil-design-navbar-examples.mjs +11 -13
  229. package/fesm2022/daffodil-design-navbar-examples.mjs.map +1 -1
  230. package/fesm2022/daffodil-design-navbar.mjs +1 -1
  231. package/fesm2022/daffodil-design-navbar.mjs.map +1 -1
  232. package/fesm2022/daffodil-design-notification-examples.mjs +5 -9
  233. package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
  234. package/fesm2022/daffodil-design-notification.mjs +3 -3
  235. package/fesm2022/daffodil-design-notification.mjs.map +1 -1
  236. package/fesm2022/daffodil-design-paginator.mjs +1 -1
  237. package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
  238. package/fesm2022/daffodil-design-progress-bar.mjs +1 -1
  239. package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
  240. package/fesm2022/daffodil-design-sidebar-examples.mjs +4 -5
  241. package/fesm2022/daffodil-design-sidebar-examples.mjs.map +1 -1
  242. package/fesm2022/daffodil-design-sidebar.mjs +11 -5
  243. package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
  244. package/fesm2022/daffodil-design-switch-examples.mjs +109 -0
  245. package/fesm2022/daffodil-design-switch-examples.mjs.map +1 -0
  246. package/fesm2022/daffodil-design-switch.mjs +148 -0
  247. package/fesm2022/daffodil-design-switch.mjs.map +1 -0
  248. package/fesm2022/daffodil-design-tabs-examples.mjs +93 -0
  249. package/fesm2022/daffodil-design-tabs-examples.mjs.map +1 -0
  250. package/fesm2022/daffodil-design-tabs.mjs +428 -0
  251. package/fesm2022/daffodil-design-tabs.mjs.map +1 -0
  252. package/fesm2022/daffodil-design-text-snippet-examples.mjs +25 -0
  253. package/fesm2022/daffodil-design-text-snippet-examples.mjs.map +1 -0
  254. package/fesm2022/daffodil-design-text-snippet.mjs +53 -0
  255. package/fesm2022/daffodil-design-text-snippet.mjs.map +1 -0
  256. package/fesm2022/daffodil-design-toast-examples.mjs +13 -15
  257. package/fesm2022/daffodil-design-toast-examples.mjs.map +1 -1
  258. package/fesm2022/daffodil-design-toast.mjs +13 -12
  259. package/fesm2022/daffodil-design-toast.mjs.map +1 -1
  260. package/fesm2022/daffodil-design-tree.mjs +1 -1
  261. package/fesm2022/daffodil-design-tree.mjs.map +1 -1
  262. package/fesm2022/daffodil-design.mjs +53 -11
  263. package/fesm2022/daffodil-design.mjs.map +1 -1
  264. package/hero/hero.module.d.ts +1 -1
  265. package/hero/src/hero-theme.scss +11 -17
  266. package/image/README.md +4 -1
  267. package/image/image.module.d.ts +1 -1
  268. package/link-set/README.md +1 -1
  269. package/link-set/link-set.module.d.ts +1 -1
  270. package/list/list-item/list-item.component.d.ts +3 -1
  271. package/list/list.module.d.ts +1 -1
  272. package/list/src/list-theme.scss +13 -9
  273. package/loading-icon/README.md +0 -5
  274. package/loading-icon/examples/examples.d.ts +2 -2
  275. package/loading-icon/loading-icon/loading-icon.component.d.ts +1 -9
  276. package/loading-icon/loading-icon.module.d.ts +1 -1
  277. package/loading-icon/src/loading-icon-theme.scss +7 -7
  278. package/media-gallery/README.md +4 -1
  279. package/media-gallery/helpers/media-gallery-token.d.ts +1 -2
  280. package/media-gallery/media-gallery.module.d.ts +1 -1
  281. package/media-gallery/src/media-gallery-theme.scss +3 -3
  282. package/media-gallery/thumbnail/thumbnail-compat.token.d.ts +1 -5
  283. package/media-gallery/thumbnail/thumbnail.directive.d.ts +9 -18
  284. package/menu/src/menu-theme.scss +5 -5
  285. package/modal/modal.module.d.ts +1 -1
  286. package/modal/src/modal-theme.scss +1 -1
  287. package/navbar/navbar.module.d.ts +1 -1
  288. package/navbar/src/navbar-theme.scss +8 -8
  289. package/notification/README.md +2 -2
  290. package/notification/notification/notification.component.d.ts +1 -1
  291. package/notification/notification.module.d.ts +1 -1
  292. package/notification/src/notification-theme.scss +25 -21
  293. package/package.json +1 -1
  294. package/paginator/paginator.module.d.ts +1 -1
  295. package/paginator/src/paginator-theme.scss +11 -10
  296. package/progress-bar/progress-bar.module.d.ts +1 -1
  297. package/progress-bar/src/progress-bar-theme.scss +10 -10
  298. package/scss/accessibility/_index.scss +1 -1
  299. package/scss/core/_index.scss +1 -2
  300. package/scss/core/error/error-to-string.scss +13 -0
  301. package/scss/core/map/map-deep-check/map-deep-check.scss +2 -1
  302. package/scss/core/map/map-deep-get/map-deep-get.scss +1 -0
  303. package/scss/core/map/map-get/map-get.scss +23 -0
  304. package/scss/core/map/map-get/map-get.spec.scss +65 -0
  305. package/scss/core/string/split/string-split.scss +10 -7
  306. package/scss/global.scss +1 -0
  307. package/scss/interactions/_index.scss +1 -1
  308. package/scss/layout/_index.scss +1 -1
  309. package/scss/state/skeleton/_mixins.scss +2 -2
  310. package/scss/theme.scss +15 -1
  311. package/scss/theming/_configure-theme.scss +60 -2
  312. package/scss/theming/_daff-theme.scss +14 -4
  313. package/scss/theming/_index.scss +1 -1
  314. package/scss/theming/_theme-css-variables.scss +15 -13
  315. package/scss/theming/contrast/luminance/luminance.scss +8 -6
  316. package/scss/theming/illuminate/illuminate.scss +20 -17
  317. package/scss/typography/utilities/_index.scss +1 -1
  318. package/scss/typography/utilities/_variables.scss +1 -1
  319. package/sidebar/sidebar-viewport/scroll-token/scroll.token.d.ts +1 -7
  320. package/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts +1 -1
  321. package/sidebar/sidebar.module.d.ts +1 -1
  322. package/sidebar/src/sidebar-theme.scss +3 -3
  323. package/src/atoms/form/form-field/form-field/form-field-theme.scss +6 -6
  324. package/src/atoms/form/input/input-theme.scss +2 -2
  325. package/src/atoms/form/native-select/native-select-theme.scss +3 -3
  326. package/switch/README.md +61 -0
  327. package/switch/examples/basic-switch/basic-switch.component.d.ts +8 -0
  328. package/switch/examples/disabled-switch/disabled-switch.component.d.ts +7 -0
  329. package/switch/examples/examples.d.ts +5 -0
  330. package/switch/examples/index.d.ts +1 -0
  331. package/switch/examples/loading-switch/loading-switch.component.d.ts +7 -0
  332. package/switch/examples/public_api.d.ts +6 -0
  333. package/switch/examples/switch-error/switch-error.component.d.ts +7 -0
  334. package/switch/examples/switch-label-positions/switch-label-positions.component.d.ts +12 -0
  335. package/switch/index.d.ts +1 -0
  336. package/switch/public_api.d.ts +2 -0
  337. package/switch/src/switch-theme.scss +31 -0
  338. package/switch/switch/label-position.d.ts +10 -0
  339. package/switch/switch/switch.component.d.ts +53 -0
  340. package/switch/switch.d.ts +3 -0
  341. package/tabs/README.md +19 -0
  342. package/tabs/examples/basic-tabs/basic-tabs.component.d.ts +6 -0
  343. package/tabs/examples/custom-select-tabs/custom-select-tabs.component.d.ts +11 -0
  344. package/tabs/examples/disabled-tabs/disabled-tabs.component.d.ts +6 -0
  345. package/tabs/examples/index.d.ts +1 -0
  346. package/tabs/examples/initially-select-tab/initially-select-tab.component.d.ts +6 -0
  347. package/tabs/examples/public_api.d.ts +2 -0
  348. package/tabs/index.d.ts +1 -0
  349. package/tabs/public_api.d.ts +5 -0
  350. package/tabs/src/tabs-theme.scss +22 -0
  351. package/tabs/tabs/tab/tab.component.d.ts +57 -0
  352. package/tabs/tabs/tab-activator/tab-activator.component.d.ts +38 -0
  353. package/tabs/tabs/tab-label/tab-label.component.d.ts +19 -0
  354. package/tabs/tabs/tab-panel/tab-panel.component.d.ts +38 -0
  355. package/tabs/tabs/tabs.component.d.ts +103 -0
  356. package/tabs/tabs.d.ts +6 -0
  357. package/text-snippet/README.md +2 -0
  358. package/text-snippet/examples/basic-text-snippet/basic-text-snippet.component.d.ts +5 -0
  359. package/text-snippet/examples/index.d.ts +1 -0
  360. package/text-snippet/examples/public_api.d.ts +2 -0
  361. package/text-snippet/index.d.ts +1 -0
  362. package/text-snippet/public_api.d.ts +1 -0
  363. package/text-snippet/text-snippet.component.d.ts +19 -0
  364. package/toast/README.md +5 -5
  365. package/toast/options/daff-toast-options.d.ts +1 -3
  366. package/toast/src/toast-theme.scss +28 -24
  367. package/toast/toast/toast-provider.d.ts +1 -1
  368. package/toast/toast.module.d.ts +1 -1
  369. package/tree/src/tree-theme.scss +11 -11
  370. package/tree/tree.module.d.ts +1 -1
  371. package/button/button/button.component.d.ts +0 -80
  372. package/button/src/button-theme-variants/button.scss +0 -26
  373. package/button/src/button-theme-variants/flat.scss +0 -25
  374. package/button/src/button-theme-variants/icon.scss +0 -21
  375. package/button/src/button-theme-variants/raised.scss +0 -36
  376. package/button/src/button-theme-variants/stroked.scss +0 -28
  377. package/button/src/button-theme-variants/underline.scss +0 -9
  378. package/button/src/button-theme.scss +0 -574
  379. package/esm2022/button/button/button.component.mjs +0 -212
  380. package/esm2022/loading-icon/examples/loading-icon-diameter/loading-icon-diameter.component.mjs +0 -15
  381. package/loading-icon/examples/loading-icon-diameter/loading-icon-diameter.component.d.ts +0 -5
  382. package/scss/core/map/map-deep-check/map-deep-check.spec.scss +0 -43
  383. package/scss/core/map/map-deep-get/map-deep-get.spec.scss +0 -25
  384. package/scss/theming/contrast/contrast-ratio/contrast-ratio.spec.scss +0 -0
  385. package/scss/theming/contrast/text-contrast/text-contrast.spec.scss +0 -0
  386. package/src/atoms/form/radio/radio.scss +0 -0
@@ -1,3 +1,5 @@
1
+ @use 'sass:color';
2
+ @use 'sass:list';
1
3
  @use 'variables' as v;
2
4
 
3
5
  // Calculate the luminance of a color.
@@ -8,12 +10,12 @@
8
10
  // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
9
11
 
10
12
  @function daff-luminance($color) {
11
- $red-index: red($color) + 1;
12
- $green-index: green($color) + 1;
13
- $blue-index: blue($color) + 1;
13
+ $red-index: color.red($color) + 1;
14
+ $green-index: color.green($color) + 1;
15
+ $blue-index: color.blue($color) + 1;
14
16
 
15
- $red: nth(v.$linear-channel-values, $red-index);
16
- $green: nth(v.$linear-channel-values, $green-index);
17
- $blue: nth(v.$linear-channel-values, $blue-index);
17
+ $red: list.nth(v.$linear-channel-values, $red-index);
18
+ $green: list.nth(v.$linear-channel-values, $green-index);
19
+ $blue: list.nth(v.$linear-channel-values, $blue-index);
18
20
  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
19
21
  }
@@ -1,4 +1,7 @@
1
+ @use 'sass:list';
1
2
  @use 'sass:map';
3
+ @use 'sass:math';
4
+ @use 'sass:meta';
2
5
  @use '../contrast/luminance/luminance';
3
6
 
4
7
  // @docs
@@ -13,21 +16,21 @@
13
16
  $values: ();
14
17
 
15
18
  @each $key, $val in $map {
16
- $keys: append($keys, $key);
17
- $values: append($values, $val);
19
+ $keys: list.append($keys, $key);
20
+ $values: list.append($values, $val);
18
21
  }
19
22
 
20
- $list: zip($keys, $values);
23
+ $list: list.zip($keys, $values);
21
24
 
22
25
  $sorted-map: ();
23
26
 
24
- @while length($list) > 0 {
27
+ @while list.length($list) > 0 {
25
28
  // Find smallest pair
26
- $smallest-pair: nth($list, 1);
29
+ $smallest-pair: list.nth($list, 1);
27
30
 
28
31
  @each $pair in $list {
29
- $value: nth($pair, 2);
30
- $smallest-value: nth($smallest-pair, 2);
32
+ $value: list.nth($pair, 2);
33
+ $smallest-value: list.nth($smallest-pair, 2);
31
34
 
32
35
  @if $value < $smallest-value {
33
36
  $smallest-pair: $pair;
@@ -35,8 +38,8 @@
35
38
  }
36
39
 
37
40
  // Add smallest pair to sorted map
38
- $key: nth($smallest-pair, 1);
39
- $value: nth($smallest-pair, 2);
41
+ $key: list.nth($smallest-pair, 1);
42
+ $value: list.nth($smallest-pair, 2);
40
43
  $sorted-map: map.merge(
41
44
  $sorted-map,
42
45
  (
@@ -45,12 +48,12 @@
45
48
  );
46
49
 
47
50
  // Remove from list smallest pair
48
- $smallest-pair-index: index($list, $smallest-pair);
51
+ $smallest-pair-index: list.index($list, $smallest-pair);
49
52
  $new-list: ();
50
53
 
51
- @for $i from 1 through length($list) {
54
+ @for $i from 1 through list.length($list) {
52
55
  @if $i != $smallest-pair-index {
53
- $new-list: append($new-list, nth($list, $i), 'space');
56
+ $new-list: list.append($new-list, list.nth($list, $i), 'space');
54
57
  }
55
58
  }
56
59
 
@@ -67,12 +70,12 @@
67
70
  // @param $nth: nth steps away from zero
68
71
  @function _daff-illuminate-get-key($map, $nth: 1) {
69
72
  //Cap off "nth" to prevent going out-of-bounds.
70
- @if ($nth > length($map)) {
71
- $nth: length(map);
73
+ @if ($nth > list.length($map)) {
74
+ $nth: list.length(map);
72
75
  }
73
76
 
74
77
  $map: _daff-illuminate-sort($map);
75
- @return nth(nth($map, $nth), 1);
78
+ @return list.nth(list.nth($map, $nth), 1);
76
79
  }
77
80
 
78
81
  // Takes a $color and palette and returns the color in
@@ -88,7 +91,7 @@
88
91
 
89
92
  //Validate
90
93
  @each $key, $palette-color in $palette {
91
- @if (type-of($key) == 'string') {
94
+ @if (meta.type-of($key) == 'string') {
92
95
  $palette: map.remove($palette, $key);
93
96
  }
94
97
  }
@@ -124,7 +127,7 @@
124
127
  $darker-colors: map.merge(
125
128
  $darker-colors,
126
129
  (
127
- $key: abs($luminance)
130
+ $key: math.abs($luminance)
128
131
  )
129
132
  );
130
133
  }
@@ -1 +1 @@
1
- @forward 'variables';
1
+ @forward 'variables';
@@ -19,4 +19,4 @@ $medium-font-size: 1.25rem;
19
19
  $normal-font-size: 1rem;
20
20
  $small-font-size: 0.875rem;
21
21
 
22
- $bold-font-weight: bold;
22
+ $bold-font-weight: bold;
@@ -1,4 +1,3 @@
1
- import { InjectionToken } from '@angular/core';
2
1
  /**
3
2
  * An interface that enables a user to enable or disable scrolling on sidebars.
4
3
  *
@@ -8,12 +7,7 @@ export interface DaffSidebarScroll {
8
7
  enable(): void;
9
8
  disable(): void;
10
9
  }
11
- /**
12
- * An injection token that can be used within a sidebar to determine
13
- * what to do enabling and disabling scrolling. By default, the body
14
- * is the element where scrolling is controlled.
15
- */
16
- export declare const DAFF_SIDEBAR_SCROLL_TOKEN: InjectionToken<DaffSidebarScroll>;
10
+ export declare const DAFF_SIDEBAR_SCROLL_TOKEN: import("@angular/core").InjectionToken<DaffSidebarScroll>, provideDaffSidebarScrollToken: <R extends DaffSidebarScroll = DaffSidebarScroll>(value: R) => import("@angular/core").ValueProvider;
17
11
  /**
18
12
  * A factory function that return a DaffSidebarScroll
19
13
  * for the current sidebar viewport.
@@ -85,5 +85,5 @@ export declare class DaffSidebarViewportComponent implements AfterContentChecked
85
85
  */
86
86
  _backdropClicked(): void;
87
87
  static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarViewportComponent, [null, null, { skipSelf: true; }, { optional: true; skipSelf: true; }, null]>;
88
- static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarViewportComponent, "daff-sidebar-viewport", never, { "navPlacement": { "alias": "navPlacement"; "required": false; }; }, { "backdropClicked": "backdropClicked"; }, ["sidebars"], ["daff-sidebar:not([side=right])", "[daff-sidebar-viewport-nav]", "*", "daff-sidebar[side=right]"], true, never>;
88
+ static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarViewportComponent, "daff-sidebar-viewport", never, { "navPlacement": { "alias": "navPlacement"; "required": false; }; }, { "backdropClicked": "backdropClicked"; }, ["sidebars"], ["[daff-sidebar-viewport-nav]", "daff-sidebar:not([side=right])", "*", "daff-sidebar[side=right]"], true, never>;
89
89
  }
@@ -9,7 +9,7 @@ import * as i7 from "./sidebar-header/sidebar-header-title/sidebar-header-title.
9
9
  import * as i8 from "./sidebar-header/sidebar-header-action/sidebar-header-action.directive";
10
10
  import * as i9 from "./sidebar-viewport-backdrop/sidebar-viewport-backdrop.component";
11
11
  /**
12
- * @deprecated in favor of {@link DAFF_SIDEBAR_COMPONENTS}
12
+ * @deprecated in favor of {@link DAFF_SIDEBAR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
13
13
  */
14
14
  export declare class DaffSidebarModule {
15
15
  static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarModule, never>;
@@ -1,9 +1,9 @@
1
1
  @use '../../scss/core';
2
2
 
3
3
  @mixin daff-sidebar-theme($theme) {
4
- $base: core.daff-map-deep-get($theme, 'core.base');
5
- $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
6
- $font-color: core.daff-map-deep-get($theme, 'core.font-color');
4
+ $base: core.daff-map-get($theme, 'core', 'base');
5
+ $base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
6
+ $font-color: core.daff-map-get($theme, 'core', 'font-color');
7
7
 
8
8
  .daff-sidebar {
9
9
  background: $base;
@@ -3,12 +3,12 @@
3
3
  @use '../../../../../scss/theming';
4
4
 
5
5
  @mixin daff-form-field-theme($theme) {
6
- $primary: map.get($theme, primary);
7
- $secondary: map.get($theme, secondary);
8
- $tertiary: map.get($theme, tertiary);
9
- $base: core.daff-map-deep-get($theme, 'core.base');
10
- $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
11
- $neutral: core.daff-map-deep-get($theme, 'core.neutral');
6
+ $primary: core.daff-map-get($theme, primary);
7
+ $secondary: core.daff-map-get($theme, secondary);
8
+ $tertiary: core.daff-map-get($theme, tertiary);
9
+ $base: core.daff-map-get($theme, 'core', 'base');
10
+ $base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
11
+ $neutral: core.daff-map-get($theme, 'core', 'neutral');
12
12
 
13
13
  .daff-form-field {
14
14
  &__control {
@@ -2,8 +2,8 @@
2
2
  @use '../../../../scss/theming';
3
3
 
4
4
  @mixin daff-input-theme($theme) {
5
- $base: core.daff-map-deep-get($theme, 'core.base');
6
- $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
5
+ $base: core.daff-map-get($theme, 'core', 'base');
6
+ $base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
7
7
 
8
8
  :host {
9
9
  background: $base;
@@ -3,9 +3,9 @@
3
3
  @use '../../../../scss/theming';
4
4
 
5
5
  @mixin daff-native-select-theme($theme) {
6
- $neutral: core.daff-map-deep-get($theme, 'core.neutral');
7
- $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
8
- $black: core.daff-map-deep-get($theme, 'core.black');
6
+ $neutral: core.daff-map-get($theme, 'core', 'neutral');
7
+ $base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
8
+ $black: core.daff-map-get($theme, 'core', 'black');
9
9
 
10
10
  .daff-native-select {
11
11
  color: theming.daff-illuminate($base-contrast, $neutral, 4);
@@ -0,0 +1,61 @@
1
+ # Switch
2
+ A switch allows users to toggle the state of a single setting.
3
+
4
+ ## Overview
5
+ Switches provide a way to toggle between two states with a visual indicator of the current state. A label can be positioned on the left, right, top, or bottom of the switch. The switch can be set to a disabled state, display a loading indicator, or show a custom error message.
6
+
7
+ ## Usage
8
+
9
+ ### Within a standalone component
10
+ To use a switch in a standalone component, import it directly into your custom component:
11
+
12
+ ```ts
13
+ @Component({
14
+ selector: 'custom-component',
15
+ templateUrl: './custom-component.component.html',
16
+ standalone: true,
17
+ imports: [
18
+ DAFF_SWITCH_COMPONENTS,
19
+ ],
20
+ })
21
+ export class CustomComponent {}
22
+ ```
23
+
24
+ ## Examples
25
+
26
+ ### Basic Switch
27
+ A basic switch can be toggled by setting the `checked` property to `true` or `false`. By default, this is set to `false`.
28
+
29
+ <design-land-example-viewer-container example="basic-switch"></design-land-example-viewer-container>
30
+
31
+ ### Disabled Switch
32
+ A switch with the `disabled` property will be non-interactive.
33
+
34
+ <design-land-example-viewer-container example="disabled-switch"></design-land-example-viewer-container>
35
+
36
+ ### Loading Switch
37
+ A switch can display a loading state by setting `loading` to `true`. This will also disable the switch.
38
+
39
+ <design-land-example-viewer-container example="loading-switch"></design-land-example-viewer-container>
40
+
41
+ ### Switch with Error
42
+ An error message can be displayed by setting `error` to `true` and including a `daff-error-message` to show the message text.
43
+
44
+ <design-land-example-viewer-container example="switch-error"></design-land-example-viewer-container>
45
+
46
+ ### Changing Label Position
47
+ The label position can be changed by setting the `labelPosition` property. The default position is `left`.
48
+
49
+ Supported positions: `left | right | top | bottom`
50
+
51
+ <design-land-example-viewer-container example="switch-label-positions"></design-land-example-viewer-container>
52
+
53
+
54
+ ## Accessibility
55
+ Switches follow the [ARIA Switch design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
56
+
57
+ ### Keyboard Interactions
58
+ | Key | Action |
59
+ | --- | ------ |
60
+ | Space | Toggles the switch to the opposite state. |
61
+ | Tab | Moves to next component on the page. |
@@ -0,0 +1,8 @@
1
+ import * as i0 from "@angular/core";
2
+ export declare class BasicSwitchComponent {
3
+ checked: boolean;
4
+ disabled: boolean;
5
+ loading: boolean;
6
+ static ɵfac: i0.ɵɵFactoryDeclaration<BasicSwitchComponent, never>;
7
+ static ɵcmp: i0.ɵɵComponentDeclaration<BasicSwitchComponent, "basic-switch", never, {}, {}, never, never, true, never>;
8
+ }
@@ -0,0 +1,7 @@
1
+ import * as i0 from "@angular/core";
2
+ export declare class DisabledSwitchComponent {
3
+ checked: boolean;
4
+ disabled: boolean;
5
+ static ɵfac: i0.ɵɵFactoryDeclaration<DisabledSwitchComponent, never>;
6
+ static ɵcmp: i0.ɵɵComponentDeclaration<DisabledSwitchComponent, "disabled-switch", never, {}, {}, never, never, true, never>;
7
+ }
@@ -0,0 +1,5 @@
1
+ import { DisabledSwitchComponent } from './disabled-switch/disabled-switch.component';
2
+ import { LoadingSwitchComponent } from './loading-switch/loading-switch.component';
3
+ import { SwitchErrorComponent } from './switch-error/switch-error.component';
4
+ import { SwitchLabelPositionsComponent } from './switch-label-positions/switch-label-positions.component';
5
+ export declare const SWITCH_EXAMPLES: (typeof DisabledSwitchComponent | typeof LoadingSwitchComponent | typeof SwitchErrorComponent | typeof SwitchLabelPositionsComponent)[];
@@ -0,0 +1 @@
1
+ export * from './public_api';
@@ -0,0 +1,7 @@
1
+ import * as i0 from "@angular/core";
2
+ export declare class LoadingSwitchComponent {
3
+ checked: boolean;
4
+ loading: boolean;
5
+ static ɵfac: i0.ɵɵFactoryDeclaration<LoadingSwitchComponent, never>;
6
+ static ɵcmp: i0.ɵɵComponentDeclaration<LoadingSwitchComponent, "loading-switch", never, {}, {}, never, never, true, never>;
7
+ }
@@ -0,0 +1,6 @@
1
+ export { SWITCH_EXAMPLES } from './examples';
2
+ export { BasicSwitchComponent } from './basic-switch/basic-switch.component';
3
+ export { DisabledSwitchComponent } from './disabled-switch/disabled-switch.component';
4
+ export { LoadingSwitchComponent } from './loading-switch/loading-switch.component';
5
+ export { SwitchErrorComponent } from './switch-error/switch-error.component';
6
+ export { SwitchLabelPositionsComponent } from './switch-label-positions/switch-label-positions.component';
@@ -0,0 +1,7 @@
1
+ import * as i0 from "@angular/core";
2
+ export declare class SwitchErrorComponent {
3
+ checked: boolean;
4
+ error: boolean;
5
+ static ɵfac: i0.ɵɵFactoryDeclaration<SwitchErrorComponent, never>;
6
+ static ɵcmp: i0.ɵɵComponentDeclaration<SwitchErrorComponent, "switch-error", never, {}, {}, never, never, true, never>;
7
+ }
@@ -0,0 +1,12 @@
1
+ import { UntypedFormControl } from '@angular/forms';
2
+ import * as i0 from "@angular/core";
3
+ export declare class SwitchLabelPositionsComponent {
4
+ labelSwitchExample: UntypedFormControl;
5
+ labelPositionControl: UntypedFormControl;
6
+ options: {
7
+ value: string;
8
+ label: string;
9
+ }[];
10
+ static ɵfac: i0.ɵɵFactoryDeclaration<SwitchLabelPositionsComponent, never>;
11
+ static ɵcmp: i0.ɵɵComponentDeclaration<SwitchLabelPositionsComponent, "switch-label-positions", never, {}, {}, never, never, true, never>;
12
+ }
@@ -0,0 +1 @@
1
+ export * from './public_api';
@@ -0,0 +1,2 @@
1
+ export { DAFF_SWITCH_COMPONENTS } from './switch';
2
+ export { DaffSwitchComponent } from './switch/switch.component';
@@ -0,0 +1,31 @@
1
+ @use 'sass:map';
2
+ @use '../../scss/core';
3
+ @use '../../scss/theming';
4
+
5
+ @mixin daff-switch-theme($theme) {
6
+ $primary: core.daff-map-get($theme, primary);
7
+ $base: core.daff-map-get($theme, 'core', 'base');
8
+ $base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
9
+ $white: core.daff-map-get($theme, 'core', 'white');
10
+ $black: core.daff-map-get($theme, 'core', 'black');
11
+ $neutral: core.daff-map-get($theme, 'core', 'neutral');
12
+
13
+ .daff-switch {
14
+ &__toggle {
15
+ background-color: theming.daff-illuminate($base, $neutral, 3);
16
+ border: 2px solid transparent;
17
+
18
+ &:focus-within {
19
+ border: 2px solid theming.daff-illuminate($base, $neutral, 2);
20
+ }
21
+
22
+ &.daff-checked {
23
+ background-color: theming.daff-color($primary);
24
+ }
25
+
26
+ &::before {
27
+ background-color: $base;
28
+ }
29
+ }
30
+ }
31
+ }
@@ -0,0 +1,10 @@
1
+ export type DaffLabelPosition = 'daff-left' | 'daff-right' | 'daff-top' | 'daff-bottom';
2
+ /**
3
+ * The position of the label relative to the switch.
4
+ */
5
+ export declare enum DaffLabelPositionEnum {
6
+ LEFT = "daff-left",
7
+ RIGHT = "daff-right",
8
+ TOP = "daff-top",
9
+ BOTTOM = "daff-bottom"
10
+ }
@@ -0,0 +1,53 @@
1
+ import { EventEmitter } from '@angular/core';
2
+ import { DaffLabelPosition } from './label-position';
3
+ import * as i0 from "@angular/core";
4
+ /**
5
+ * The switch component provides a way to toggle between two settings.
6
+ *
7
+ * ## Usage
8
+ * <daff-switch [checked]="checked" loading="loading" [error]="true" [labelPosition]="daff-left">
9
+ * Label
10
+ * <daff-error-message>Error message</daff-error-message>
11
+ * </daff-switch>
12
+ */
13
+ export declare class DaffSwitchComponent {
14
+ /**
15
+ * Whether the switch is disabled and/or loading.
16
+ */
17
+ get disabled(): any;
18
+ set disabled(value: any);
19
+ get disabledAttribute(): boolean;
20
+ get ariaDisabled(): boolean;
21
+ get classes(): string;
22
+ /**
23
+ * Whether the switch is loading.
24
+ */
25
+ loading: boolean;
26
+ /**
27
+ * Current state of switch (on/off).
28
+ */
29
+ checked: boolean;
30
+ /**
31
+ * The position of the label relative to the switch. Defaults to 'daff-left'.
32
+ */
33
+ labelPosition: DaffLabelPosition;
34
+ /**
35
+ * Whether the switch shows an error.
36
+ */
37
+ error: boolean;
38
+ _disabled: boolean;
39
+ handleKeydown(event: KeyboardEvent): void;
40
+ /**
41
+ * @docs-private
42
+ */
43
+ private externalAriaLabel;
44
+ /**
45
+ * aria-label for the switch.
46
+ */
47
+ ariaLabel: string;
48
+ id: string;
49
+ toggled: EventEmitter<boolean>;
50
+ onToggle(): void;
51
+ static ɵfac: i0.ɵɵFactoryDeclaration<DaffSwitchComponent, never>;
52
+ static ɵcmp: i0.ɵɵComponentDeclaration<DaffSwitchComponent, "daff-switch", never, { "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "error": { "alias": "error"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "toggled": "toggled"; }, never, ["*", "daff-error-message"], true, never>;
53
+ }
@@ -0,0 +1,3 @@
1
+ import { DaffErrorMessageModule } from '@daffodil/design';
2
+ import { DaffSwitchComponent } from './switch/switch.component';
3
+ export declare const DAFF_SWITCH_COMPONENTS: readonly [typeof DaffSwitchComponent, typeof DaffErrorMessageModule];
package/tabs/README.md ADDED
@@ -0,0 +1,19 @@
1
+ # Tabs
2
+ Tabs provide a way to navigate between panels that display related content.
3
+
4
+ ## Overview
5
+ Tabs allow for users to navigate between related content without having to leave the page. They can be used within components like modals or cards.
6
+
7
+ ## Accessbility
8
+ Tabs follow the [ARIA Tabs design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). Tabs compose of `tablist`, `tab`, and `tabpanel` elements, each with its appropriate role and integrated keyboard interactions.
9
+
10
+ ### Label
11
+ A meaningful `aria-label` should be set on `<daff-tabs>` by using the `aria-label` property. This will set the `aria-label` on the `tablist` element.
12
+
13
+ ### Keyboard Interactions
14
+ | Key | Action |
15
+ | --- | ------ |
16
+ | Left Arrow | Moves focus and activates previous tab. If focus is on the first tab, moves focus to the last tab. |
17
+ | Right Arrow | Moves focus and activates next tab. If focus is on the last tab, moves focus to the first tab. |
18
+ | Home | Moves focus and activates first tab. |
19
+ | End | Moves focus and activates last tab. |
@@ -0,0 +1,6 @@
1
+ import * as i0 from "@angular/core";
2
+ export declare class BasicTabsComponent {
3
+ faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
4
+ static ɵfac: i0.ɵɵFactoryDeclaration<BasicTabsComponent, never>;
5
+ static ɵcmp: i0.ɵɵComponentDeclaration<BasicTabsComponent, "basic-tabs", never, {}, {}, never, never, true, never>;
6
+ }
@@ -0,0 +1,11 @@
1
+ import { DaffTabsComponent } from '@daffodil/design/tabs';
2
+ import * as i0 from "@angular/core";
3
+ export declare class CustomSelectTabsComponent {
4
+ faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
5
+ selectedTab: string;
6
+ _tab: DaffTabsComponent;
7
+ selectTabThree(): void;
8
+ selectTabFive(): void;
9
+ static ɵfac: i0.ɵɵFactoryDeclaration<CustomSelectTabsComponent, never>;
10
+ static ɵcmp: i0.ɵɵComponentDeclaration<CustomSelectTabsComponent, "custom-select-tabs", never, {}, {}, never, never, true, never>;
11
+ }
@@ -0,0 +1,6 @@
1
+ import * as i0 from "@angular/core";
2
+ export declare class DisabledTabsComponent {
3
+ faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
4
+ static ɵfac: i0.ɵɵFactoryDeclaration<DisabledTabsComponent, never>;
5
+ static ɵcmp: i0.ɵɵComponentDeclaration<DisabledTabsComponent, "disabled-tabs", never, {}, {}, never, never, true, never>;
6
+ }
@@ -0,0 +1 @@
1
+ export * from './public_api';
@@ -0,0 +1,6 @@
1
+ import * as i0 from "@angular/core";
2
+ export declare class InitiallySelectTabComponent {
3
+ faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
4
+ static ɵfac: i0.ɵɵFactoryDeclaration<InitiallySelectTabComponent, never>;
5
+ static ɵcmp: i0.ɵɵComponentDeclaration<InitiallySelectTabComponent, "initially-select-tab", never, {}, {}, never, never, true, never>;
6
+ }
@@ -0,0 +1,2 @@
1
+ import { BasicTabsComponent } from './basic-tabs/basic-tabs.component';
2
+ export declare const TABS_EXAMPLES: (typeof BasicTabsComponent)[];
@@ -0,0 +1 @@
1
+ export * from './public_api';
@@ -0,0 +1,5 @@
1
+ export { DAFF_TABS_COMPONENTS } from './tabs';
2
+ export { DaffTabsComponent } from './tabs/tabs.component';
3
+ export { DaffTabPanelComponent } from './tabs/tab-panel/tab-panel.component';
4
+ export { DaffTabComponent } from './tabs/tab/tab.component';
5
+ export { DaffTabLabelComponent } from './tabs/tab-label/tab-label.component';
@@ -0,0 +1,22 @@
1
+ @use 'sass:map';
2
+ @use '../../scss/core';
3
+ @use '../../scss/theming';
4
+
5
+ @mixin daff-tabs-theme($theme) {
6
+ $primary: core.daff-map-get($theme, primary);
7
+ $secondary: core.daff-map-get($theme, secondary);
8
+ $tertiary: core.daff-map-get($theme, tertiary);
9
+ $neutral: core.daff-map-get($theme, 'core', 'neutral');
10
+ $base: core.daff-map-get($theme, 'core', 'base');
11
+ $base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
12
+ $white: core.daff-map-get($theme, 'core', 'white');
13
+ $black: core.daff-map-get($theme, 'core', 'black');
14
+
15
+ .daff-tab-activator {
16
+ border-bottom: 2px solid theming.daff-illuminate($base, $neutral, 2);
17
+
18
+ &.daff-selected {
19
+ border-bottom: 2px solid theming.daff-color($primary);
20
+ }
21
+ }
22
+ }
@@ -0,0 +1,57 @@
1
+ import { TemplateRef } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ /**
4
+ * `DaffTabComponet` is an element in the tab list that is used as a content container to group the label of a tab panel and the tab panel together.
5
+ *
6
+ * ## Template Structure
7
+ * A `<daff-tab>` should include the {@link DaffTabLabelComponent} and {@link DaffTabPanelComponent} components in order to properly structure the UI.
8
+ *
9
+ * ## Usage
10
+ * ```html
11
+ * <daff-tab>
12
+ * <daff-tab-label>
13
+ * <fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
14
+ * Tab 1
15
+ * </daff-tab-label>
16
+ * <daff-tab-panel>
17
+ * Tab 1 Panel
18
+ * </daff-tab-panel>
19
+ * </daff-tab>
20
+ * ```
21
+ */
22
+ export declare class DaffTabComponent {
23
+ /**
24
+ * Whether the tab is disabled.
25
+ *
26
+ * ```html
27
+ * <daff-tab [disabled]="true">
28
+ * </daff-tab>
29
+ * ```
30
+ */
31
+ disabled: boolean;
32
+ /**
33
+ * @docs-private
34
+ */
35
+ contentRef: TemplateRef<any>;
36
+ /**
37
+ * @docs-private
38
+ */
39
+ labelRef: TemplateRef<any>;
40
+ /**
41
+ * A unique id for the tab component.
42
+ *
43
+ * The `id` is automatically generated by linking the prefix 'daff-tab-' with an incrementing `tabId`. This value can be customized by passing a different `id` value via the component's `id` input.
44
+ *
45
+ * ```html
46
+ * <daff-tab [id]="'custom-id'"></daff-tab>
47
+ * ```
48
+ */
49
+ id: string;
50
+ /**
51
+ * @docs-private
52
+ */
53
+ panelId: string;
54
+ constructor();
55
+ static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabComponent, never>;
56
+ static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabComponent, "daff-tab", never, { "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, ["daff-tab-label", "daff-tab-panel"], true, never>;
57
+ }