@daffodil/design 0.78.0 → 0.79.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 (264) hide show
  1. package/atoms/form/form-field/form-field/form-field.component.d.ts +1 -1
  2. package/button/README.md +3 -3
  3. package/button/button/basic/button.component.d.ts +28 -0
  4. package/button/button/button-base.directive.d.ts +51 -0
  5. package/button/button/flat/flat.component.d.ts +28 -0
  6. package/button/button/icon/icon.component.d.ts +24 -0
  7. package/button/button/raised/raised.component.d.ts +28 -0
  8. package/button/button/stroked/stroked.component.d.ts +28 -0
  9. package/button/button/underline/underline.component.d.ts +28 -0
  10. package/button/button.d.ts +7 -2
  11. package/button/button.module.d.ts +8 -3
  12. package/button/public_api.d.ts +6 -1
  13. package/button/src/button/basic/button-theme.scss +145 -0
  14. package/button/src/button/button-base.scss +79 -0
  15. package/button/src/button/flat/flat-theme.scss +143 -0
  16. package/button/src/button/icon/icon-theme.scss +141 -0
  17. package/button/src/button/raised/raised-theme.scss +120 -0
  18. package/button/src/button/stroked/stroked-theme.scss +158 -0
  19. package/button/src/button/underline/underline-theme.scss +93 -0
  20. package/card/card.module.d.ts +1 -1
  21. package/container/container.module.d.ts +1 -1
  22. package/core/statusable/statusable.d.ts +5 -3
  23. package/core/statusable/statusable.directive.d.ts +6 -4
  24. package/esm2022/accordion/accordion/animation/accordion-animation.mjs +1 -4
  25. package/esm2022/atoms/form/form-field/form-field/form-field.component.mjs +2 -2
  26. package/esm2022/button/button/basic/button.component.mjs +48 -0
  27. package/esm2022/button/button/button-base.directive.mjs +105 -0
  28. package/esm2022/button/button/flat/flat.component.mjs +48 -0
  29. package/esm2022/button/button/icon/icon.component.mjs +44 -0
  30. package/esm2022/button/button/raised/raised.component.mjs +48 -0
  31. package/esm2022/button/button/stroked/stroked.component.mjs +48 -0
  32. package/esm2022/button/button/underline/underline.component.mjs +48 -0
  33. package/esm2022/button/button.mjs +12 -2
  34. package/esm2022/button/button.module.mjs +34 -4
  35. package/esm2022/button/examples/basic-button/basic-button.component.mjs +4 -6
  36. package/esm2022/button/examples/flat-button/flat-button.component.mjs +4 -6
  37. package/esm2022/button/examples/icon-button/icon-button.component.mjs +4 -6
  38. package/esm2022/button/examples/raised-button/raised-button.component.mjs +4 -6
  39. package/esm2022/button/examples/sizeable-button/sizeable-button.component.mjs +2 -2
  40. package/esm2022/button/examples/statusable-button/statusable-button.component.mjs +3 -3
  41. package/esm2022/button/examples/stroked-button/stroked-button.component.mjs +4 -6
  42. package/esm2022/button/examples/underline-button/underline-button.component.mjs +4 -6
  43. package/esm2022/button/public_api.mjs +7 -2
  44. package/esm2022/callout/examples/callout-text-alignment/callout-text-alignment.component.mjs +5 -7
  45. package/esm2022/callout/examples/callout-theming/callout-theming.component.mjs +5 -7
  46. package/esm2022/callout/examples/callout-with-grid/callout-with-grid.component.mjs +5 -6
  47. package/esm2022/callout/examples/compact-callout/compact-callout.component.mjs +4 -6
  48. package/esm2022/card/card.module.mjs +2 -2
  49. package/esm2022/card/examples/basic-card/basic-card.component.mjs +4 -6
  50. package/esm2022/card/examples/card-orientation/card-orientation.component.mjs +5 -7
  51. package/esm2022/checkbox/examples/basic-checkbox/basic-checkbox.component.mjs +4 -5
  52. package/esm2022/checkbox/examples/checkbox-set/checkbox-set.component.mjs +4 -5
  53. package/esm2022/container/container.module.mjs +2 -2
  54. package/esm2022/core/statusable/statusable.directive.mjs +7 -5
  55. package/esm2022/core/statusable/statusable.mjs +3 -2
  56. package/esm2022/hero/examples/compact-hero/compact-hero.component.mjs +4 -6
  57. package/esm2022/hero/examples/hero-text-alignment/hero-text-alignment.component.mjs +5 -7
  58. package/esm2022/hero/examples/hero-theming/hero-theming.component.mjs +5 -7
  59. package/esm2022/hero/examples/hero-with-grid/hero-with-grid.component.mjs +4 -6
  60. package/esm2022/hero/hero.module.mjs +2 -2
  61. package/esm2022/image/image.module.mjs +2 -2
  62. package/esm2022/link-set/link-set.module.mjs +2 -2
  63. package/esm2022/list/list.module.mjs +2 -2
  64. package/esm2022/loading-icon/examples/examples.mjs +1 -3
  65. package/esm2022/loading-icon/examples/loading-icon-color/loading-icon-color.component.mjs +2 -2
  66. package/esm2022/loading-icon/loading-icon/loading-icon.component.mjs +5 -20
  67. package/esm2022/loading-icon/loading-icon.module.mjs +2 -2
  68. package/esm2022/media-gallery/helpers/media-gallery-token.mjs +7 -3
  69. package/esm2022/media-gallery/media-gallery.module.mjs +2 -2
  70. package/esm2022/media-gallery/thumbnail/thumbnail-compat.token.mjs +8 -3
  71. package/esm2022/menu/examples/basic-menu/basic-menu.component.mjs +5 -7
  72. package/esm2022/modal/examples/basic-modal/basic-modal.component.mjs +4 -6
  73. package/esm2022/modal/examples/basic-modal/modal-content.component.mjs +4 -6
  74. package/esm2022/modal/modal-header/modal-header.component.mjs +4 -6
  75. package/esm2022/modal/modal.module.mjs +2 -2
  76. package/esm2022/navbar/examples/basic-navbar/basic-navbar.component.mjs +4 -6
  77. package/esm2022/navbar/examples/contained-navbar/contained-navbar.component.mjs +4 -6
  78. package/esm2022/navbar/examples/navbar-theming/navbar-theming.component.mjs +5 -7
  79. package/esm2022/navbar/examples/raised-navbar/raised-navbar.component.mjs +4 -6
  80. package/esm2022/navbar/navbar.module.mjs +2 -2
  81. package/esm2022/notification/examples/default-notification/default-notification.component.mjs +1 -3
  82. package/esm2022/notification/examples/notification-orientations/notification-orientations.component.mjs +1 -3
  83. package/esm2022/notification/examples/notification-status/notification-status.component.mjs +3 -5
  84. package/esm2022/notification/examples/notification-with-actions/notification-with-actions.component.mjs +4 -5
  85. package/esm2022/notification/notification/notification.component.mjs +3 -3
  86. package/esm2022/notification/notification.module.mjs +2 -2
  87. package/esm2022/paginator/paginator.module.mjs +2 -2
  88. package/esm2022/progress-bar/progress-bar.module.mjs +2 -2
  89. package/esm2022/sidebar/examples/over-and-under-sidebars/over-and-under-sidebars.component.mjs +5 -6
  90. package/esm2022/sidebar/sidebar-viewport/scroll-token/scroll.token.mjs +9 -3
  91. package/esm2022/sidebar/sidebar-viewport/sidebar-viewport.component.mjs +3 -3
  92. package/esm2022/sidebar/sidebar.module.mjs +2 -2
  93. package/esm2022/tabs/daffodil-design-tabs.mjs +5 -0
  94. package/esm2022/tabs/examples/basic-tabs/basic-tabs.component.mjs +22 -0
  95. package/esm2022/tabs/examples/custom-select-tabs/custom-select-tabs.component.mjs +34 -0
  96. package/esm2022/tabs/examples/daffodil-design-tabs-examples.mjs +5 -0
  97. package/esm2022/tabs/examples/disabled-tabs/disabled-tabs.component.mjs +22 -0
  98. package/esm2022/tabs/examples/index.mjs +2 -0
  99. package/esm2022/tabs/examples/initially-select-tab/initially-select-tab.component.mjs +22 -0
  100. package/esm2022/tabs/examples/public_api.mjs +11 -0
  101. package/esm2022/tabs/index.mjs +2 -0
  102. package/esm2022/tabs/public_api.mjs +6 -0
  103. package/esm2022/tabs/tabs/tab/tab.component.mjs +86 -0
  104. package/esm2022/tabs/tabs/tab-activator/tab-activator.component.mjs +83 -0
  105. package/esm2022/tabs/tabs/tab-label/tab-label.component.mjs +33 -0
  106. package/esm2022/tabs/tabs/tab-panel/tab-panel.component.mjs +68 -0
  107. package/esm2022/tabs/tabs/tabs.component.mjs +161 -0
  108. package/esm2022/tabs/tabs.mjs +13 -0
  109. package/esm2022/text-snippet/daffodil-design-text-snippet.mjs +5 -0
  110. package/esm2022/text-snippet/examples/basic-text-snippet/basic-text-snippet.component.mjs +14 -0
  111. package/esm2022/text-snippet/examples/daffodil-design-text-snippet-examples.mjs +5 -0
  112. package/esm2022/text-snippet/examples/index.mjs +2 -0
  113. package/esm2022/text-snippet/examples/public_api.mjs +5 -0
  114. package/esm2022/text-snippet/index.mjs +2 -0
  115. package/esm2022/text-snippet/public_api.mjs +2 -0
  116. package/esm2022/text-snippet/text-snippet.component.mjs +46 -0
  117. package/esm2022/toast/examples/default-toast/default-toast.component.mjs +4 -6
  118. package/esm2022/toast/examples/toast-positions/toast-positions.component.mjs +4 -6
  119. package/esm2022/toast/examples/toast-status/toast-status.component.mjs +8 -10
  120. package/esm2022/toast/examples/toast-with-custom-duration/toast-with-custom-duration.component.mjs +4 -6
  121. package/esm2022/toast/options/daff-toast-options.mjs +7 -7
  122. package/esm2022/toast/toast/toast-provider.mjs +2 -2
  123. package/esm2022/toast/toast/toast-template.component.mjs +2 -2
  124. package/esm2022/toast/toast.module.mjs +2 -2
  125. package/esm2022/tree/tree.module.mjs +2 -2
  126. package/fesm2022/daffodil-design-accordion.mjs +0 -3
  127. package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
  128. package/fesm2022/daffodil-design-button-examples.mjs +16 -16
  129. package/fesm2022/daffodil-design-button-examples.mjs.map +1 -1
  130. package/fesm2022/daffodil-design-button.mjs +305 -131
  131. package/fesm2022/daffodil-design-button.mjs.map +1 -1
  132. package/fesm2022/daffodil-design-callout-examples.mjs +12 -13
  133. package/fesm2022/daffodil-design-callout-examples.mjs.map +1 -1
  134. package/fesm2022/daffodil-design-card-examples.mjs +10 -12
  135. package/fesm2022/daffodil-design-card-examples.mjs.map +1 -1
  136. package/fesm2022/daffodil-design-card.mjs +1 -1
  137. package/fesm2022/daffodil-design-card.mjs.map +1 -1
  138. package/fesm2022/daffodil-design-checkbox-examples.mjs +5 -6
  139. package/fesm2022/daffodil-design-checkbox-examples.mjs.map +1 -1
  140. package/fesm2022/daffodil-design-container.mjs +1 -1
  141. package/fesm2022/daffodil-design-container.mjs.map +1 -1
  142. package/fesm2022/daffodil-design-hero-examples.mjs +11 -13
  143. package/fesm2022/daffodil-design-hero-examples.mjs.map +1 -1
  144. package/fesm2022/daffodil-design-hero.mjs +1 -1
  145. package/fesm2022/daffodil-design-hero.mjs.map +1 -1
  146. package/fesm2022/daffodil-design-image.mjs +1 -1
  147. package/fesm2022/daffodil-design-image.mjs.map +1 -1
  148. package/fesm2022/daffodil-design-link-set.mjs +1 -1
  149. package/fesm2022/daffodil-design-link-set.mjs.map +1 -1
  150. package/fesm2022/daffodil-design-list.mjs +1 -1
  151. package/fesm2022/daffodil-design-list.mjs.map +1 -1
  152. package/fesm2022/daffodil-design-loading-icon-examples.mjs +1 -13
  153. package/fesm2022/daffodil-design-loading-icon-examples.mjs.map +1 -1
  154. package/fesm2022/daffodil-design-loading-icon.mjs +5 -20
  155. package/fesm2022/daffodil-design-loading-icon.mjs.map +1 -1
  156. package/fesm2022/daffodil-design-media-gallery.mjs +14 -4
  157. package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
  158. package/fesm2022/daffodil-design-menu-examples.mjs +3 -5
  159. package/fesm2022/daffodil-design-menu-examples.mjs.map +1 -1
  160. package/fesm2022/daffodil-design-modal-examples.mjs +5 -7
  161. package/fesm2022/daffodil-design-modal-examples.mjs.map +1 -1
  162. package/fesm2022/daffodil-design-modal.mjs +4 -5
  163. package/fesm2022/daffodil-design-modal.mjs.map +1 -1
  164. package/fesm2022/daffodil-design-navbar-examples.mjs +11 -13
  165. package/fesm2022/daffodil-design-navbar-examples.mjs.map +1 -1
  166. package/fesm2022/daffodil-design-navbar.mjs +1 -1
  167. package/fesm2022/daffodil-design-navbar.mjs.map +1 -1
  168. package/fesm2022/daffodil-design-notification-examples.mjs +5 -9
  169. package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
  170. package/fesm2022/daffodil-design-notification.mjs +3 -3
  171. package/fesm2022/daffodil-design-notification.mjs.map +1 -1
  172. package/fesm2022/daffodil-design-paginator.mjs +1 -1
  173. package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
  174. package/fesm2022/daffodil-design-progress-bar.mjs +1 -1
  175. package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
  176. package/fesm2022/daffodil-design-sidebar-examples.mjs +4 -5
  177. package/fesm2022/daffodil-design-sidebar-examples.mjs.map +1 -1
  178. package/fesm2022/daffodil-design-sidebar.mjs +11 -5
  179. package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
  180. package/fesm2022/daffodil-design-tabs-examples.mjs +93 -0
  181. package/fesm2022/daffodil-design-tabs-examples.mjs.map +1 -0
  182. package/fesm2022/daffodil-design-tabs.mjs +431 -0
  183. package/fesm2022/daffodil-design-tabs.mjs.map +1 -0
  184. package/fesm2022/daffodil-design-text-snippet-examples.mjs +25 -0
  185. package/fesm2022/daffodil-design-text-snippet-examples.mjs.map +1 -0
  186. package/fesm2022/daffodil-design-text-snippet.mjs +53 -0
  187. package/fesm2022/daffodil-design-text-snippet.mjs.map +1 -0
  188. package/fesm2022/daffodil-design-toast-examples.mjs +13 -15
  189. package/fesm2022/daffodil-design-toast-examples.mjs.map +1 -1
  190. package/fesm2022/daffodil-design-toast.mjs +11 -10
  191. package/fesm2022/daffodil-design-toast.mjs.map +1 -1
  192. package/fesm2022/daffodil-design-tree.mjs +1 -1
  193. package/fesm2022/daffodil-design-tree.mjs.map +1 -1
  194. package/fesm2022/daffodil-design.mjs +9 -6
  195. package/fesm2022/daffodil-design.mjs.map +1 -1
  196. package/hero/hero.module.d.ts +1 -1
  197. package/image/README.md +4 -1
  198. package/image/image.module.d.ts +1 -1
  199. package/link-set/README.md +1 -1
  200. package/link-set/link-set.module.d.ts +1 -1
  201. package/list/list.module.d.ts +1 -1
  202. package/loading-icon/README.md +0 -5
  203. package/loading-icon/examples/examples.d.ts +2 -2
  204. package/loading-icon/loading-icon/loading-icon.component.d.ts +1 -9
  205. package/loading-icon/loading-icon.module.d.ts +1 -1
  206. package/media-gallery/README.md +4 -1
  207. package/media-gallery/helpers/media-gallery-token.d.ts +1 -2
  208. package/media-gallery/media-gallery.module.d.ts +1 -1
  209. package/media-gallery/thumbnail/thumbnail-compat.token.d.ts +1 -5
  210. package/modal/modal.module.d.ts +1 -1
  211. package/navbar/navbar.module.d.ts +1 -1
  212. package/notification/README.md +2 -2
  213. package/notification/notification/notification.component.d.ts +1 -1
  214. package/notification/notification.module.d.ts +1 -1
  215. package/notification/src/notification-theme.scss +17 -13
  216. package/package.json +1 -1
  217. package/paginator/paginator.module.d.ts +1 -1
  218. package/progress-bar/progress-bar.module.d.ts +1 -1
  219. package/scss/theme.scss +13 -1
  220. package/scss/theming/_configure-theme.scss +60 -2
  221. package/scss/theming/_theme-css-variables.scss +1 -1
  222. package/sidebar/sidebar-viewport/scroll-token/scroll.token.d.ts +1 -7
  223. package/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts +1 -1
  224. package/sidebar/sidebar.module.d.ts +1 -1
  225. package/tabs/README.md +19 -0
  226. package/tabs/examples/basic-tabs/basic-tabs.component.d.ts +6 -0
  227. package/tabs/examples/custom-select-tabs/custom-select-tabs.component.d.ts +11 -0
  228. package/tabs/examples/disabled-tabs/disabled-tabs.component.d.ts +6 -0
  229. package/tabs/examples/index.d.ts +1 -0
  230. package/tabs/examples/initially-select-tab/initially-select-tab.component.d.ts +6 -0
  231. package/tabs/examples/public_api.d.ts +2 -0
  232. package/tabs/index.d.ts +1 -0
  233. package/tabs/public_api.d.ts +5 -0
  234. package/tabs/src/tabs-theme.scss +22 -0
  235. package/tabs/tabs/tab/tab.component.d.ts +57 -0
  236. package/tabs/tabs/tab-activator/tab-activator.component.d.ts +37 -0
  237. package/tabs/tabs/tab-label/tab-label.component.d.ts +19 -0
  238. package/tabs/tabs/tab-panel/tab-panel.component.d.ts +38 -0
  239. package/tabs/tabs/tabs.component.d.ts +104 -0
  240. package/tabs/tabs.d.ts +6 -0
  241. package/text-snippet/README.md +2 -0
  242. package/text-snippet/examples/basic-text-snippet/basic-text-snippet.component.d.ts +5 -0
  243. package/text-snippet/examples/index.d.ts +1 -0
  244. package/text-snippet/examples/public_api.d.ts +2 -0
  245. package/text-snippet/index.d.ts +1 -0
  246. package/text-snippet/public_api.d.ts +1 -0
  247. package/text-snippet/text-snippet.component.d.ts +19 -0
  248. package/toast/README.md +5 -5
  249. package/toast/options/daff-toast-options.d.ts +1 -3
  250. package/toast/src/toast-theme.scss +14 -10
  251. package/toast/toast/toast-provider.d.ts +1 -1
  252. package/toast/toast.module.d.ts +1 -1
  253. package/tree/tree.module.d.ts +1 -1
  254. package/button/button/button.component.d.ts +0 -80
  255. package/button/src/button-theme-variants/button.scss +0 -26
  256. package/button/src/button-theme-variants/flat.scss +0 -25
  257. package/button/src/button-theme-variants/icon.scss +0 -21
  258. package/button/src/button-theme-variants/raised.scss +0 -36
  259. package/button/src/button-theme-variants/stroked.scss +0 -28
  260. package/button/src/button-theme-variants/underline.scss +0 -9
  261. package/button/src/button-theme.scss +0 -574
  262. package/esm2022/button/button/button.component.mjs +0 -212
  263. package/esm2022/loading-icon/examples/loading-icon-diameter/loading-icon-diameter.component.mjs +0 -15
  264. package/loading-icon/examples/loading-icon-diameter/loading-icon-diameter.component.d.ts +0 -5
@@ -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: map.get($theme, primary);
7
+ $secondary: map.get($theme, secondary);
8
+ $tertiary: map.get($theme, tertiary);
9
+ $neutral: core.daff-map-deep-get($theme, 'core.neutral');
10
+ $base: core.daff-map-deep-get($theme, 'core.base');
11
+ $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
12
+ $white: core.daff-map-deep-get($theme, 'core.white');
13
+ $black: core.daff-map-deep-get($theme, 'core.black');
14
+
15
+ .daff-tab-activator {
16
+ border-bottom: 2px solid theming.daff-illuminate($base, $neutral, 2);
17
+
18
+ &.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
+ }
@@ -0,0 +1,37 @@
1
+ import { OnInit, ElementRef } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ export declare class DaffTabActivatorComponent implements OnInit {
4
+ private el;
5
+ /**
6
+ * @docs-private
7
+ */
8
+ class: boolean;
9
+ /**
10
+ * Sets the `role` to tab.
11
+ */
12
+ role: string;
13
+ /** Whether or not a tab is selected */
14
+ selected: boolean;
15
+ /**
16
+ * Sets `aria-selected` to true if the component is selected and false if it's not selected.
17
+ */
18
+ get ariaSelected(): boolean;
19
+ /**
20
+ * Sets `tabindex` to `0` if the component is selected and `-1` if it's not selected.
21
+ */
22
+ get tabIndex(): "0" | "-1";
23
+ ariaControls: string;
24
+ /**
25
+ * The html id of the tab activator component
26
+ */
27
+ tabActivatorId: string;
28
+ panelId: string;
29
+ ngOnInit(): void;
30
+ constructor(el: ElementRef);
31
+ /**
32
+ * Sets focus to the native element of the component
33
+ */
34
+ focus(): void;
35
+ static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabActivatorComponent, never>;
36
+ static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabActivatorComponent, "button[daff-tab-activator],a[daff-tab-activator]", never, { "selected": { "alias": "selected"; "required": false; }; "tabActivatorId": { "alias": "tabActivatorId"; "required": false; }; "panelId": { "alias": "panelId"; "required": false; }; }, {}, never, ["*"], true, never>;
37
+ }
@@ -0,0 +1,19 @@
1
+ import { DaffPrefixDirective, DaffSuffixDirective, DaffPrefixable, DaffSuffixable } from '@daffodil/design';
2
+ import * as i0 from "@angular/core";
3
+ /**
4
+ * DaffTabLabelComponent is used to display the label of a tab panel. Labels may optionally contain a `daffPrefix` or `daffSuffix` to add icons or badges.
5
+ *
6
+ * ```html
7
+ * <daff-tab-label>
8
+ * <div daffPrefix></div>
9
+ * Label
10
+ * <div daffSuffix></div
11
+ * </daff-tab-Label>
12
+ * ```
13
+ */
14
+ export declare class DaffTabLabelComponent implements DaffPrefixable, DaffSuffixable {
15
+ _prefix: DaffPrefixDirective;
16
+ _suffix: DaffSuffixDirective;
17
+ static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabLabelComponent, never>;
18
+ static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabLabelComponent, "daff-tab-label", never, {}, {}, ["_prefix", "_suffix"], ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
19
+ }
@@ -0,0 +1,38 @@
1
+ import { DaffTabComponent } from '../tab/tab.component';
2
+ import * as i0 from "@angular/core";
3
+ /**
4
+ * DaffTabPanelComponent is used to display the content panel of a tab.
5
+ *
6
+ * ```html
7
+ * <daff-tab-panel>
8
+ * <!-- Tab panel content goes here -->
9
+ * </daff-tab-panel>
10
+ * ```
11
+ */
12
+ export declare class DaffTabPanelComponent {
13
+ private tab;
14
+ /**
15
+ * @docs-private
16
+ */
17
+ private class;
18
+ /**
19
+ * Sets the `role` to tabpanel.
20
+ */
21
+ role: string;
22
+ /**
23
+ * `aria-labelledby` for the tab.
24
+ */
25
+ ariaLabelledBy: string;
26
+ /**
27
+ * Sets the `tabindex` to 0.
28
+ */
29
+ tabIndex: string;
30
+ private _id;
31
+ /**
32
+ * Dynamically binds the tab panel's id to a unique value generated from the associated tab's panelId.
33
+ */
34
+ get tabPanelId(): string;
35
+ constructor(tab: DaffTabComponent);
36
+ static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabPanelComponent, never>;
37
+ static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabPanelComponent, "daff-tab-panel", never, {}, {}, never, ["*"], true, never>;
38
+ }
@@ -0,0 +1,104 @@
1
+ import { QueryList, AfterContentInit, EventEmitter, ChangeDetectorRef } from '@angular/core';
2
+ import { DaffTabComponent } from './tab/tab.component';
3
+ import { DaffTabActivatorComponent } from './tab-activator/tab-activator.component';
4
+ import { DaffTabLabelComponent } from './tab-label/tab-label.component';
5
+ import * as i0 from "@angular/core";
6
+ import * as i1 from "@daffodil/design";
7
+ /**
8
+ * Tabs provide a way to navigate between panels that display related content.
9
+ *
10
+ * ## Usage
11
+ * ```html
12
+ * <daff-tabs aria-label="List of tabs">
13
+ * <daff-tab>
14
+ * <daff-tab-label>
15
+ * <fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
16
+ * Tab 1
17
+ * </daff-tab-label>
18
+ * <daff-tab-panel>
19
+ * Tab 1 Panel
20
+ * </daff-tab-panel>
21
+ * </daff-tab>
22
+ * <daff-tab>
23
+ * <daff-tab-label>
24
+ * Tab 2
25
+ * <fa-icon [icon]="faInfoCircle" daffSuffix></fa-icon>
26
+ * </daff-tab-label>
27
+ * <daff-tab-panel>
28
+ * Tab 2 Panel
29
+ * </daff-tab-panel>
30
+ * </daff-tab>
31
+ * </daff-tabs>
32
+ * ```
33
+ */
34
+ export declare class DaffTabsComponent implements AfterContentInit {
35
+ private cdRef;
36
+ /**
37
+ * @docs-private
38
+ */
39
+ private class;
40
+ /**
41
+ * The currently selected tab. This property is dynamically updated when a user selects a tab
42
+ */
43
+ selectedTab: string;
44
+ /**
45
+ * The tab that is initially selected on initial load. If it's not used, the first tab in the tablist will be selected by default.
46
+ */
47
+ initiallySelected: string;
48
+ /**
49
+ * @docs-private
50
+ */
51
+ private externalAriaLabel;
52
+ /**
53
+ * aria-label for the tab.
54
+ */
55
+ ariaLabel: string;
56
+ /**
57
+ * Event emitted when tab selection changes.
58
+ */
59
+ tabChange: EventEmitter<string>;
60
+ /**
61
+ * @docs-private
62
+ */
63
+ _labels: QueryList<DaffTabLabelComponent>;
64
+ /**
65
+ * @docs-private
66
+ */
67
+ _tabs: QueryList<DaffTabComponent>;
68
+ /**
69
+ * @docs-private
70
+ */
71
+ _tabActivators: QueryList<DaffTabActivatorComponent>;
72
+ constructor(cdRef: ChangeDetectorRef);
73
+ /**
74
+ * @docs-private
75
+ */
76
+ ngAfterContentInit(): void;
77
+ /**
78
+ * Selects a tab and sets focus on the selected tab.
79
+ */
80
+ select(tabId: string): void;
81
+ /**
82
+ * Navigates through the tabs based on the given offset.
83
+ * Moves forward or backward in the tab array, wrapping around when necessary.
84
+ */
85
+ private navigateTabs;
86
+ /**
87
+ * Selects the previous tab and wraps around to the last tab if the first tab is currently selected.
88
+ */
89
+ previous(): void;
90
+ /**
91
+ * Selects the next tab and wraps around to the first tab if the last tab is currently selected.
92
+ */
93
+ next(): void;
94
+ /**
95
+ * Selects the first tab.
96
+ */
97
+ selectFirst(event: KeyboardEvent | null): void;
98
+ /**
99
+ * Selects the last tab.
100
+ */
101
+ selectLast(event: KeyboardEvent | null): void;
102
+ static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabsComponent, never>;
103
+ static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabsComponent, "daff-tabs", never, { "initiallySelected": { "alias": "initiallySelected"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; }, { "tabChange": "tabChange"; }, ["_labels", "_tabs"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }]>;
104
+ }
package/tabs/tabs.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { DaffPrefixSuffixModule } from '@daffodil/design';
2
+ import { DaffTabComponent } from './tabs/tab/tab.component';
3
+ import { DaffTabLabelComponent } from './tabs/tab-label/tab-label.component';
4
+ import { DaffTabPanelComponent } from './tabs/tab-panel/tab-panel.component';
5
+ import { DaffTabsComponent } from './tabs/tabs.component';
6
+ export declare const DAFF_TABS_COMPONENTS: readonly [typeof DaffTabsComponent, typeof DaffTabLabelComponent, typeof DaffTabPanelComponent, typeof DaffPrefixSuffixModule, typeof DaffTabComponent];
@@ -0,0 +1,2 @@
1
+ # Text Snippet
2
+ The text snippet component shows a snippet of text, with the ability to show or hide content beyond one line of text.
@@ -0,0 +1,5 @@
1
+ import * as i0 from "@angular/core";
2
+ export declare class BasicTextSnippetComponent {
3
+ static ɵfac: i0.ɵɵFactoryDeclaration<BasicTextSnippetComponent, never>;
4
+ static ɵcmp: i0.ɵɵComponentDeclaration<BasicTextSnippetComponent, "basic-text-snippet", never, {}, {}, never, never, true, never>;
5
+ }
@@ -0,0 +1 @@
1
+ export * from './public_api';
@@ -0,0 +1,2 @@
1
+ import { BasicTextSnippetComponent } from './basic-text-snippet/basic-text-snippet.component';
2
+ export declare const TEXT_SNIPPET_EXAMPLES: (typeof BasicTextSnippetComponent)[];
@@ -0,0 +1 @@
1
+ export * from './public_api';
@@ -0,0 +1 @@
1
+ export * from './text-snippet.component';
@@ -0,0 +1,19 @@
1
+ import { EventEmitter, ElementRef } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ export declare class DaffTextSnippetComponent {
4
+ /**
5
+ * A property to track whether or not the component
6
+ * should render a condensed version of the content.
7
+ */
8
+ condensed: boolean;
9
+ html: string;
10
+ contentRef: ElementRef;
11
+ htmlRef: ElementRef;
12
+ /**
13
+ * An output event that can be used to track the state of the component externally.
14
+ */
15
+ toggle: EventEmitter<boolean>;
16
+ toggleSnippet(): void;
17
+ static ɵfac: i0.ɵɵFactoryDeclaration<DaffTextSnippetComponent, never>;
18
+ static ɵcmp: i0.ɵɵComponentDeclaration<DaffTextSnippetComponent, "daff-text-snippet", never, { "condensed": { "alias": "condensed"; "required": false; }; "html": { "alias": "html"; "required": false; }; }, { "toggle": "toggle"; }, never, ["*"], true, never>;
19
+ }
package/toast/README.md CHANGED
@@ -8,14 +8,14 @@ Toasts should be used to display temporary messages about actions or events that
8
8
  <design-land-example-viewer-container example="default-toast"></design-land-example-viewer-container>
9
9
 
10
10
  ## Setting up the component
11
- `daffProviderToast()` should be added as a provider either in your application's root component for global use or in a specific feature component.
11
+ `provideDaffToast()` should be added as a provider either in your application's root component for global use or in a specific feature component.
12
12
 
13
13
  ```ts
14
- import { daffProvideToast } from '@daffodil/design/toast';
14
+ import { provideDaffToast } from '@daffodil/design/toast';
15
15
 
16
16
  @NgModule({
17
17
  providers: [
18
- daffProvideToast(),
18
+ provideDaffToast(),
19
19
  ]
20
20
  )}
21
21
 
@@ -48,7 +48,7 @@ export class CustomToastComponent {
48
48
  private toast: DaffToast;
49
49
 
50
50
  constructor(private toastService: DaffToastService) {}
51
-
51
+
52
52
  open() {
53
53
  this.toast = this.toastService.open({
54
54
  title: 'Update Complete',
@@ -153,7 +153,7 @@ A maximum of three toasts can be shown at a time. Toasts are stacked vertically,
153
153
  ## Statuses
154
154
  The status color of a toast can be updated by using the `status` property.
155
155
 
156
- Supported statuses: `warn | danger | success`
156
+ Supported statuses: `warn | critical | success`
157
157
 
158
158
  ### Toast with statuses
159
159
  <design-land-example-viewer-container example="toast-status"></design-land-example-viewer-container>
@@ -1,4 +1,3 @@
1
- import { InjectionToken, ValueProvider } from '@angular/core';
2
1
  export interface VerticalPositionTypes {
3
2
  vertical: 'top' | 'bottom';
4
3
  }
@@ -11,5 +10,4 @@ export interface DaffToastOptions {
11
10
  useParent: boolean;
12
11
  }
13
12
  export declare const daffToastDefaultOptions: DaffToastOptions;
14
- export declare const DAFF_TOAST_OPTIONS: InjectionToken<DaffToastOptions>;
15
- export declare const provideDaffToastOptions: (options: DaffToastOptions) => ValueProvider;
13
+ export declare const DAFF_TOAST_OPTIONS: import("@angular/core").InjectionToken<DaffToastOptions>, provideDaffToastOptions: <R extends DaffToastOptions = DaffToastOptions>(config: Partial<R> | import("@angular/core").InjectionToken<Partial<R>>) => import("@angular/core").FactoryProvider;
@@ -6,6 +6,10 @@
6
6
  $primary: map.get($theme, primary);
7
7
  $secondary: map.get($theme, secondary);
8
8
  $tertiary: map.get($theme, tertiary);
9
+ $info: map.get($theme, info);
10
+ $warn: map.get($theme, warn);
11
+ $critical: map.get($theme, critical);
12
+ $success: map.get($theme, success);
9
13
  $neutral: core.daff-map-deep-get($theme, 'core.neutral');
10
14
  $base: core.daff-map-deep-get($theme, 'core.base');
11
15
  $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
@@ -22,41 +26,41 @@
22
26
  }
23
27
 
24
28
  &.daff-success {
25
- background: theming.daff-color(theming.$daff-green, 10);
29
+ background: theming.daff-color($success, 10);
26
30
  color: $black;
27
31
 
28
32
  .daff-prefix {
29
- color: theming.daff-color(theming.$daff-green, 60);
33
+ color: theming.daff-color($success);
30
34
  }
31
35
 
32
36
  &:before {
33
- background: theming.daff-color(theming.$daff-green, 60);
37
+ background: theming.daff-color($success);
34
38
  }
35
39
  }
36
40
 
37
41
  &.daff-warn {
38
- background: theming.daff-color(theming.$daff-bronze, 10);
42
+ background: theming.daff-color($warn, 10);
39
43
  color: $black;
40
44
 
41
45
  .daff-prefix {
42
- color: theming.daff-color(theming.$daff-bronze, 60);
46
+ color: theming.daff-color($warn);
43
47
  }
44
48
 
45
49
  &:before {
46
- background: theming.daff-color(theming.$daff-bronze, 60);
50
+ background: theming.daff-color($warn);
47
51
  }
48
52
  }
49
53
 
50
- &.daff-danger {
51
- background: theming.daff-color(theming.$daff-red, 10);
54
+ &.daff-critical {
55
+ background: theming.daff-color($critical, 10);
52
56
  color: $black;
53
57
 
54
58
  .daff-prefix {
55
- color: theming.daff-color(theming.$daff-red, 60);
59
+ color: theming.daff-color($critical);
56
60
  }
57
61
 
58
62
  &:before {
59
- background: theming.daff-color(theming.$daff-red, 60);
63
+ background: theming.daff-color($critical);
60
64
  }
61
65
  }
62
66
  }
@@ -1,2 +1,2 @@
1
1
  import { Provider } from '@angular/core';
2
- export declare const daffProvideToast: () => Provider[];
2
+ export declare const provideDaffToast: () => Provider[];
@@ -10,7 +10,7 @@ import * as i8 from "./toast-actions/toast-actions.directive";
10
10
  import * as i9 from "./toast-title/toast-title.directive";
11
11
  import * as i10 from "./toast-message/toast-message.directive";
12
12
  /**
13
- * @deprecated in favor of {@link daffProvideToast}
13
+ * @deprecated in favor of {@link provideDaffToast} Deprecated in version 0.78.0. Will be removed in version 0.81.0.
14
14
  */
15
15
  export declare class DaffToastModule {
16
16
  static ɵfac: i0.ɵɵFactoryDeclaration<DaffToastModule, never>;
@@ -3,7 +3,7 @@ import * as i1 from "@angular/common";
3
3
  import * as i2 from "./tree/tree.component";
4
4
  import * as i3 from "./tree-item/tree-item.directive";
5
5
  /**
6
- * @deprecated in favor of {@link DAFF_TREE_COMPONENTS}
6
+ * @deprecated in favor of {@link DAFF_TREE_COMPONENTS} Deprecated in version 0.78.0. Will be removed in version 0.81.0.
7
7
  */
8
8
  export declare class DaffTreeModule {
9
9
  static ɵfac: i0.ɵɵFactoryDeclaration<DaffTreeModule, never>;
@@ -1,80 +0,0 @@
1
- import { OnInit, ElementRef, Renderer2 } from '@angular/core';
2
- import { DaffPrefixable, DaffSuffixable } from '@daffodil/design';
3
- import { DaffButtonSizableDirective } from './button-sizable.directive';
4
- import * as i0 from "@angular/core";
5
- import * as i1 from "@daffodil/design";
6
- import * as i2 from "./button-sizable.directive";
7
- /**
8
- * An _elementRef and an instance of renderer2 are needed for the button mixins
9
- */
10
- declare class DaffButtonBase {
11
- _elementRef: ElementRef;
12
- _renderer: Renderer2;
13
- constructor(_elementRef: ElementRef, _renderer: Renderer2);
14
- }
15
- declare const _daffButtonBase: (new (...args: any[]) => {
16
- [x: string]: any;
17
- _prefix: import("@daffodil/design").DaffPrefixDirective;
18
- }) & (new (...args: any[]) => {
19
- [x: string]: any;
20
- _suffix: import("@daffodil/design").DaffSuffixDirective;
21
- }) & typeof DaffButtonBase;
22
- export type DaffButtonType = 'daff-button' | 'daff-stroked-button' | 'daff-raised-button' | 'daff-flat-button' | 'daff-icon-button' | 'daff-underline-button' | undefined;
23
- /**
24
- * @inheritdoc
25
- */
26
- export declare class DaffButtonComponent extends _daffButtonBase implements OnInit, DaffPrefixable, DaffSuffixable {
27
- private elementRef;
28
- private renderer;
29
- private size;
30
- private buttonType;
31
- constructor(elementRef: ElementRef, renderer: Renderer2, size: DaffButtonSizableDirective);
32
- /**
33
- * @docs-private
34
- */
35
- ngOnInit(): void;
36
- /**
37
- * @docs-private
38
- */
39
- get button(): boolean;
40
- /**
41
- * @docs-private
42
- */
43
- get stroked(): boolean;
44
- /**
45
- * @docs-private
46
- */
47
- get raised(): boolean;
48
- /**
49
- * @docs-private
50
- */
51
- get flat(): boolean;
52
- /**
53
- * @docs-private
54
- */
55
- get icon(): boolean;
56
- /**
57
- * @docs-private
58
- */
59
- get underline(): boolean;
60
- get disabledClass(): any;
61
- loading: boolean;
62
- tabindex: number;
63
- _disabled: boolean;
64
- /**
65
- * The disabled state of the button.
66
- */
67
- get disabled(): any;
68
- set disabled(value: any);
69
- get disabledAttribute(): boolean;
70
- get ariaDisabled(): boolean;
71
- get disabledTabIndex(): number;
72
- private _getHostElement;
73
- /**
74
- * Gets whether the button has one of the given attributes.
75
- * */
76
- private _hasHostAttributes;
77
- static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonComponent, never>;
78
- static ɵcmp: i0.ɵɵComponentDeclaration<DaffButtonComponent, "button[daff-button],button[daff-stroked-button],button[daff-raised-button],button[daff-flat-button],button[daff-icon-button],button[daff-underline-button],a[daff-button],a[daff-stroked-button],a[daff-raised-button],a[daff-flat-button],a[daff-icon-button],a[daff-underline-button]", never, { "loading": { "alias": "loading"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
79
- }
80
- export {};
@@ -1,26 +0,0 @@
1
- @use '../../../scss/theming';
2
-
3
- @mixin daff-button-theme-variant(
4
- $base-color,
5
- $hover-color,
6
- $active-color: $hover-color
7
- ) {
8
- background-color: $base-color;
9
- color: theming.daff-text-contrast($base-color);
10
-
11
- &:after {
12
- background: $hover-color;
13
- }
14
-
15
- &:hover {
16
- color: theming.daff-text-contrast($hover-color);
17
- }
18
-
19
- &:active {
20
- color: theming.daff-text-contrast($active-color);
21
-
22
- &:after {
23
- background: $active-color;
24
- }
25
- }
26
- }
@@ -1,25 +0,0 @@
1
- @use 'sass:map';
2
- @use '../../../scss/theming';
3
-
4
- @mixin daff-flat-button-theme-variant(
5
- $base-color,
6
- $active-color
7
- ) {
8
- color: $base-color;
9
-
10
- &:after {
11
- background-color: $base-color;
12
- }
13
-
14
- &:hover {
15
- color: theming.daff-text-contrast($base-color);
16
- }
17
-
18
- &:active {
19
- color: theming.daff-text-contrast($active-color);
20
-
21
- &:after {
22
- background-color: $active-color;
23
- }
24
- }
25
- }
@@ -1,21 +0,0 @@
1
- @mixin daff-icon-button-theme-variant(
2
- $base-color: currentColor,
3
- $hover-color: currentColor,
4
- $active-color: $hover-color
5
- ) {
6
- color: $base-color;
7
-
8
- &:hover {
9
- color: $hover-color;
10
- @if $base-color == currentColor {
11
- opacity: 0.8;
12
- }
13
- @else {
14
- opacity: 1;
15
- }
16
- }
17
-
18
- &:active {
19
- color: $active-color;
20
- }
21
- }