@daffodil/design 0.81.0 → 0.82.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 (243) hide show
  1. package/accordion/README.md +44 -29
  2. package/accordion/accordion/accordion/accordion.component.d.ts +3 -0
  3. package/accordion/accordion/accordion-item/accordion-item.component.d.ts +23 -12
  4. package/accordion/accordion/accordion-item-title/accordion-item-title.directive.d.ts +3 -0
  5. package/accordion/accordion.d.ts +5 -0
  6. package/accordion/examples/disabled-accordion/disabled-accordion.component.d.ts +5 -0
  7. package/accordion/examples/initially-expanded-accordion/initially-expanded-accordion.component.d.ts +5 -0
  8. package/accordion/examples/public_api.d.ts +2 -0
  9. package/article/README.md +4 -3
  10. package/article/article.d.ts +3 -0
  11. package/article/src/article-theme.scss +25 -2
  12. package/breadcrumb/README.md +38 -28
  13. package/breadcrumb/breadcrumb/breadcrumb.component.d.ts +15 -2
  14. package/breadcrumb/breadcrumb-item/breadcrumb-item.directive.d.ts +18 -4
  15. package/breadcrumb/breadcrumb.d.ts +3 -0
  16. package/breadcrumb/examples/iterated-breadcrumb/iterated-breadcrumb.component.d.ts +6 -0
  17. package/breadcrumb/public_api.d.ts +2 -2
  18. package/button/README.md +43 -23
  19. package/button/button/basic/button.component.d.ts +5 -1
  20. package/button/button/button-base.directive.d.ts +11 -3
  21. package/button/button/button-sizable.directive.d.ts +1 -1
  22. package/button/button/raised/raised.component.d.ts +2 -0
  23. package/button/button/stroked/stroked.component.d.ts +5 -1
  24. package/button/button.d.ts +4 -2
  25. package/button/button.module.d.ts +1 -2
  26. package/button/examples/elevated-button/elevated-button.component.d.ts +6 -0
  27. package/button/examples/examples.d.ts +2 -1
  28. package/button/examples/public_api.d.ts +1 -0
  29. package/button/public_api.d.ts +0 -1
  30. package/button/src/button/basic/button-theme.scss +180 -80
  31. package/button/src/button/button-base.scss +26 -15
  32. package/button/src/button/flat/flat-theme.scss +144 -85
  33. package/button/src/button/raised/raised-theme.scss +2 -7
  34. package/button/src/button/stroked/stroked-theme.scss +126 -92
  35. package/button/src/button/underline/underline-theme.scss +112 -44
  36. package/callout/README.md +4 -3
  37. package/callout/callout.d.ts +3 -0
  38. package/card/README.md +6 -3
  39. package/card/card/basic/basic.component.d.ts +7 -0
  40. package/card/card/raised/raised.component.d.ts +7 -0
  41. package/card/card/stroked/stroked.component.d.ts +7 -0
  42. package/card/card-base.directive.d.ts +25 -0
  43. package/card/card.d.ts +18 -1
  44. package/card/card.module.d.ts +10 -8
  45. package/card/public_api.d.ts +6 -1
  46. package/card/src/card/raised/raised-theme.scss +30 -0
  47. package/card/src/card/stroked/stroked-theme.scss +46 -0
  48. package/card/src/card-base-theme.scss +126 -0
  49. package/card/src/card-base.scss +134 -0
  50. package/container/README.md +5 -3
  51. package/container/container.d.ts +3 -0
  52. package/core/colorable/colorable.d.ts +20 -14
  53. package/core/colorable/colorable.directive.d.ts +9 -6
  54. package/fesm2022/daffodil-design-accordion-examples.mjs +28 -4
  55. package/fesm2022/daffodil-design-accordion-examples.mjs.map +1 -1
  56. package/fesm2022/daffodil-design-accordion.mjs +56 -29
  57. package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
  58. package/fesm2022/daffodil-design-article-examples.mjs +30 -30
  59. package/fesm2022/daffodil-design-article.mjs +14 -11
  60. package/fesm2022/daffodil-design-article.mjs.map +1 -1
  61. package/fesm2022/daffodil-design-breadcrumb-examples.mjs +24 -4
  62. package/fesm2022/daffodil-design-breadcrumb-examples.mjs.map +1 -1
  63. package/fesm2022/daffodil-design-breadcrumb.mjs +78 -40
  64. package/fesm2022/daffodil-design-breadcrumb.mjs.map +1 -1
  65. package/fesm2022/daffodil-design-button-examples.mjs +55 -33
  66. package/fesm2022/daffodil-design-button-examples.mjs.map +1 -1
  67. package/fesm2022/daffodil-design-button.mjs +79 -69
  68. package/fesm2022/daffodil-design-button.mjs.map +1 -1
  69. package/fesm2022/daffodil-design-callout-examples.mjs +12 -12
  70. package/fesm2022/daffodil-design-callout-examples.mjs.map +1 -1
  71. package/fesm2022/daffodil-design-callout.mjs +25 -22
  72. package/fesm2022/daffodil-design-callout.mjs.map +1 -1
  73. package/fesm2022/daffodil-design-card-examples.mjs +23 -21
  74. package/fesm2022/daffodil-design-card-examples.mjs.map +1 -1
  75. package/fesm2022/daffodil-design-card.mjs +140 -86
  76. package/fesm2022/daffodil-design-card.mjs.map +1 -1
  77. package/fesm2022/daffodil-design-checkbox-examples.mjs +6 -6
  78. package/fesm2022/daffodil-design-checkbox-examples.mjs.map +1 -1
  79. package/fesm2022/daffodil-design-container-examples.mjs +3 -3
  80. package/fesm2022/daffodil-design-container.mjs +10 -7
  81. package/fesm2022/daffodil-design-container.mjs.map +1 -1
  82. package/fesm2022/daffodil-design-hero-examples.mjs +12 -12
  83. package/fesm2022/daffodil-design-hero-examples.mjs.map +1 -1
  84. package/fesm2022/daffodil-design-hero.mjs +25 -22
  85. package/fesm2022/daffodil-design-hero.mjs.map +1 -1
  86. package/fesm2022/daffodil-design-image-examples.mjs +9 -9
  87. package/fesm2022/daffodil-design-image.mjs +36 -19
  88. package/fesm2022/daffodil-design-image.mjs.map +1 -1
  89. package/fesm2022/daffodil-design-input-examples.mjs +12 -12
  90. package/fesm2022/daffodil-design-link-set.mjs +19 -16
  91. package/fesm2022/daffodil-design-link-set.mjs.map +1 -1
  92. package/fesm2022/daffodil-design-list-examples.mjs +12 -12
  93. package/fesm2022/daffodil-design-list.mjs +13 -10
  94. package/fesm2022/daffodil-design-list.mjs.map +1 -1
  95. package/fesm2022/daffodil-design-loading-icon-examples.mjs +4 -4
  96. package/fesm2022/daffodil-design-loading-icon-examples.mjs.map +1 -1
  97. package/fesm2022/daffodil-design-loading-icon.mjs +11 -8
  98. package/fesm2022/daffodil-design-loading-icon.mjs.map +1 -1
  99. package/fesm2022/daffodil-design-media-gallery-examples.mjs +62 -13
  100. package/fesm2022/daffodil-design-media-gallery-examples.mjs.map +1 -1
  101. package/fesm2022/daffodil-design-media-gallery.mjs +165 -250
  102. package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
  103. package/fesm2022/daffodil-design-menu-examples.mjs +6 -6
  104. package/fesm2022/daffodil-design-menu-examples.mjs.map +1 -1
  105. package/fesm2022/daffodil-design-menu.mjs +16 -16
  106. package/fesm2022/daffodil-design-modal-examples.mjs +7 -7
  107. package/fesm2022/daffodil-design-modal-examples.mjs.map +1 -1
  108. package/fesm2022/daffodil-design-modal.mjs +28 -25
  109. package/fesm2022/daffodil-design-modal.mjs.map +1 -1
  110. package/fesm2022/daffodil-design-navbar-examples.mjs +12 -12
  111. package/fesm2022/daffodil-design-navbar-examples.mjs.map +1 -1
  112. package/fesm2022/daffodil-design-navbar.mjs +10 -7
  113. package/fesm2022/daffodil-design-navbar.mjs.map +1 -1
  114. package/fesm2022/daffodil-design-notification-examples.mjs +15 -15
  115. package/fesm2022/daffodil-design-notification.mjs +22 -19
  116. package/fesm2022/daffodil-design-notification.mjs.map +1 -1
  117. package/fesm2022/daffodil-design-paginator-examples.mjs +6 -6
  118. package/fesm2022/daffodil-design-paginator.mjs +13 -7
  119. package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
  120. package/fesm2022/daffodil-design-progress-bar-examples.mjs +9 -9
  121. package/fesm2022/daffodil-design-progress-bar.mjs +13 -10
  122. package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
  123. package/fesm2022/daffodil-design-quantity-field-examples.mjs +12 -12
  124. package/fesm2022/daffodil-design-radio-examples.mjs +3 -3
  125. package/fesm2022/daffodil-design-sidebar-examples.mjs +14 -14
  126. package/fesm2022/daffodil-design-sidebar-examples.mjs.map +1 -1
  127. package/fesm2022/daffodil-design-sidebar.mjs +147 -53
  128. package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
  129. package/fesm2022/daffodil-design-switch-examples.mjs +15 -15
  130. package/fesm2022/daffodil-design-switch-examples.mjs.map +1 -1
  131. package/fesm2022/daffodil-design-switch.mjs +6 -3
  132. package/fesm2022/daffodil-design-switch.mjs.map +1 -1
  133. package/fesm2022/daffodil-design-tabs-examples.mjs +23 -17
  134. package/fesm2022/daffodil-design-tabs-examples.mjs.map +1 -1
  135. package/fesm2022/daffodil-design-tabs.mjs +66 -34
  136. package/fesm2022/daffodil-design-tabs.mjs.map +1 -1
  137. package/fesm2022/daffodil-design-text-snippet-examples.mjs +3 -3
  138. package/fesm2022/daffodil-design-text-snippet.mjs +4 -5
  139. package/fesm2022/daffodil-design-text-snippet.mjs.map +1 -1
  140. package/fesm2022/daffodil-design-toast-examples.mjs +40 -15
  141. package/fesm2022/daffodil-design-toast-examples.mjs.map +1 -1
  142. package/fesm2022/daffodil-design-toast.mjs +301 -245
  143. package/fesm2022/daffodil-design-toast.mjs.map +1 -1
  144. package/fesm2022/daffodil-design-tree-examples.mjs +6 -6
  145. package/fesm2022/daffodil-design-tree.mjs +13 -10
  146. package/fesm2022/daffodil-design-tree.mjs.map +1 -1
  147. package/fesm2022/daffodil-design-youtube-player.mjs +104 -0
  148. package/fesm2022/daffodil-design-youtube-player.mjs.map +1 -0
  149. package/fesm2022/daffodil-design.mjs +167 -155
  150. package/fesm2022/daffodil-design.mjs.map +1 -1
  151. package/hero/README.md +4 -3
  152. package/hero/hero.d.ts +3 -0
  153. package/image/README.md +4 -3
  154. package/image/image/image.component.d.ts +22 -1
  155. package/image/image.d.ts +3 -0
  156. package/link-set/README.md +4 -3
  157. package/link-set/link-set.d.ts +3 -0
  158. package/list/README.md +4 -3
  159. package/list/list.d.ts +3 -0
  160. package/loading-icon/README.md +10 -7
  161. package/loading-icon/loading-icon.d.ts +3 -0
  162. package/loading-icon/src/loading-icon-theme.scss +66 -38
  163. package/media-gallery/README.md +17 -8
  164. package/media-gallery/examples/iterated-media-gallery/iterated-media-gallery.component.d.ts +13 -0
  165. package/media-gallery/examples/media-gallery-with-video/media-gallery-with-video.component.d.ts +5 -0
  166. package/media-gallery/examples/public_api.d.ts +2 -0
  167. package/media-gallery/helpers/media-gallery-registration.interface.d.ts +1 -1
  168. package/media-gallery/media-gallery/media-gallery.component.d.ts +73 -11
  169. package/media-gallery/media-gallery.d.ts +4 -2
  170. package/media-gallery/media-gallery.module.d.ts +1 -2
  171. package/media-gallery/public_api.d.ts +0 -1
  172. package/media-gallery/src/media-gallery-theme.scss +30 -4
  173. package/media-gallery/thumbnail/thumbnail.directive.d.ts +29 -23
  174. package/menu/README.md +1 -2
  175. package/modal/README.md +3 -2
  176. package/modal/modal.d.ts +3 -0
  177. package/navbar/README.md +3 -2
  178. package/navbar/navbar.d.ts +3 -0
  179. package/notification/README.md +5 -4
  180. package/notification/notification.d.ts +3 -0
  181. package/package.json +1 -1
  182. package/paginator/README.md +3 -2
  183. package/paginator/paginator/paginator.component.d.ts +3 -0
  184. package/paginator/paginator.d.ts +3 -0
  185. package/progress-bar/README.md +3 -2
  186. package/progress-bar/progress-bar.d.ts +3 -0
  187. package/scss/theme.scss +36 -17
  188. package/scss/theming/_configure-theme.scss +2 -0
  189. package/scss/theming/_index.scss +1 -0
  190. package/scss/theming/_light-dark.scss +45 -0
  191. package/sidebar/README.md +20 -21
  192. package/sidebar/helper/sidebar-mode.d.ts +9 -15
  193. package/sidebar/sidebar/sidebar.component.d.ts +22 -7
  194. package/sidebar/sidebar-footer/sidebar-footer.component.d.ts +11 -0
  195. package/sidebar/sidebar-header/sidebar-header-title/sidebar-header-title.directive.d.ts +8 -0
  196. package/sidebar/sidebar-header/sidebar-header.component.d.ts +19 -1
  197. package/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts +36 -15
  198. package/sidebar/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.d.ts +17 -0
  199. package/sidebar/sidebar.d.ts +3 -0
  200. package/switch/README.md +3 -2
  201. package/switch/switch.d.ts +3 -0
  202. package/tabs/README.md +33 -3
  203. package/tabs/tabs/tab/tab.component.d.ts +1 -1
  204. package/tabs/tabs/tab-label/tab-label.component.d.ts +6 -0
  205. package/tabs/tabs/tab-panel/tab-panel.component.d.ts +8 -0
  206. package/tabs/tabs/tabs.component.d.ts +21 -4
  207. package/tabs/tabs.d.ts +8 -2
  208. package/text-snippet/README.md +19 -1
  209. package/toast/README.md +21 -151
  210. package/toast/examples/dismissible-toast/dismissible-toast.component.d.ts +11 -0
  211. package/toast/examples/public_api.d.ts +2 -1
  212. package/toast/interfaces/toast-action.d.ts +22 -11
  213. package/toast/interfaces/toast-action.type.d.ts +10 -0
  214. package/toast/interfaces/toast.d.ts +11 -5
  215. package/toast/options/daff-toast-options.d.ts +2 -1
  216. package/toast/public_api.d.ts +2 -6
  217. package/toast/service/position.service.d.ts +9 -1
  218. package/toast/service/toast.service.d.ts +63 -0
  219. package/toast/toast/toast-config.d.ts +24 -1
  220. package/toast/toast/toast-provider.d.ts +16 -0
  221. package/toast/toast/toast-template.component.d.ts +1 -3
  222. package/toast/toast/toast.component.d.ts +20 -1
  223. package/toast/toast-actions/toast-actions.directive.d.ts +3 -0
  224. package/toast/toast-message/toast-message.directive.d.ts +3 -0
  225. package/toast/toast-title/toast-title.directive.d.ts +3 -0
  226. package/tree/README.md +6 -10
  227. package/tree/tree.d.ts +3 -0
  228. package/youtube-player/index.d.ts +1 -0
  229. package/youtube-player/public_api.d.ts +3 -0
  230. package/youtube-player/safe-url.pipe.d.ts +10 -0
  231. package/youtube-player/youtube-player.component.d.ts +23 -0
  232. package/youtube-player/youtube-player.d.ts +6 -0
  233. package/card/card/card.component.d.ts +0 -48
  234. package/card/src/card-theme-variants/basic-card.scss +0 -6
  235. package/card/src/card-theme-variants/linkable-card.scss +0 -16
  236. package/card/src/card-theme-variants/stroked-card.scss +0 -3
  237. package/card/src/card-theme.scss +0 -170
  238. package/media-gallery/media-renderer/media-renderer.component.d.ts +0 -29
  239. package/media-gallery/registry/media-gallery.registry.d.ts +0 -34
  240. package/media-gallery/thumbnail/thumbnail-compat.token.d.ts +0 -1
  241. package/media-gallery/thumbnail/thumbnail-registration.interface.d.ts +0 -9
  242. package/scss/theming/prebuilt/internal-theme.scss +0 -13
  243. package/toast/toast.module.d.ts +0 -19
package/tabs/tabs.d.ts CHANGED
@@ -1,6 +1,12 @@
1
- import { DaffPrefixSuffixModule } from '@daffodil/design';
2
1
  import { DaffTabComponent } from './tabs/tab/tab.component';
3
2
  import { DaffTabLabelComponent } from './tabs/tab-label/tab-label.component';
4
3
  import { DaffTabPanelComponent } from './tabs/tab-panel/tab-panel.component';
5
4
  import { DaffTabsComponent } from './tabs/tabs.component';
6
- export declare const DAFF_TABS_COMPONENTS: readonly [typeof DaffTabsComponent, typeof DaffTabLabelComponent, typeof DaffTabPanelComponent, typeof DaffPrefixSuffixModule, typeof DaffTabComponent];
5
+ /**
6
+ * @docs-private
7
+ *
8
+ * ```ts
9
+ * import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
10
+ * ```
11
+ */
12
+ export declare const DAFF_TABS_COMPONENTS: readonly [typeof DaffTabsComponent, typeof DaffTabLabelComponent, typeof DaffTabPanelComponent, typeof DaffTabComponent];
@@ -1,2 +1,20 @@
1
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.
2
+ The text snippet component shows a snippet of text, with the ability to show or hide content beyond one line of text.
3
+
4
+ ## Usage
5
+
6
+ ### Within a standalone component
7
+ To use a text snippet in a standalone component, import `DaffTextSnippetComponent` directly into your custom component:
8
+
9
+ ```ts
10
+ import { DaffTextSnippetComponent } from '@daffodil/design/text-snippet';
11
+
12
+ @Component({
13
+ selector: 'custom-component',
14
+ templateUrl: './custom-component.component.html',
15
+ imports: [
16
+ DaffTextSnippetComponent,
17
+ ],
18
+ })
19
+ export class CustomComponent {}
20
+ ```
package/toast/README.md CHANGED
@@ -4,187 +4,57 @@ Toasts are small messages designed to mimic push notifications. They are used to
4
4
  ## Overview
5
5
  Toasts should be used to display temporary messages about actions or events that occured or in need of attention, with no relation to content on a page. For messaging that provide context in close promixity to a piece of content within a page, use the [Notification](/libs/design/notification/README.md) component.
6
6
 
7
- ## Basic Toast
7
+ ## Basic toast
8
8
  <design-land-example-viewer-container example="default-toast"></design-land-example-viewer-container>
9
9
 
10
10
  ## Setting up the 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.
11
+ `provideDaffToast()` must be added as a provider in your application's root component for global use or in a specific feature component for the toast functionality to work properly.
12
12
 
13
13
  ```ts
14
14
  import { provideDaffToast } from '@daffodil/design/toast';
15
15
 
16
16
  @NgModule({
17
- providers: [
18
- provideDaffToast(),
19
- ]
17
+ providers: [
18
+ provideDaffToast(),
19
+ ]
20
20
  )}
21
21
 
22
22
  export class AppModule {}
23
23
  ```
24
24
 
25
- ### Configurations
26
- Toast can be configured by using the `DaffToastService`.
27
-
28
- The following is an example of a toast with a duration:
29
-
30
- ```ts
31
- import {
32
- ChangeDetectionStrategy,
33
- Component,
34
- } from '@angular/core';
35
-
36
- import {
37
- DaffToast
38
- DaffToastService,
39
- } from '@daffodil/design/toast';
40
-
41
- @Component({
42
- selector: 'custom-toast',
43
- templateUrl: './custom-toast.component.html',
44
- changeDetection: ChangeDetectionStrategy.OnPush,
45
- standalone: true,
46
- })
47
- export class CustomToastComponent {
48
- private toast: DaffToast;
49
-
50
- constructor(private toastService: DaffToastService) {}
51
-
52
- open() {
53
- this.toast = this.toastService.open({
54
- title: 'Update Complete',
55
- message: 'This page has been updated to the newest version.',
56
- },
57
- {
58
- duration: 5000,
59
- });
60
- }
61
- }
62
- ```
63
-
64
- The following is an example of a toast with actions:
65
-
66
- ```ts
67
- import {
68
- ChangeDetectionStrategy,
69
- Component,
70
- EventEmitter,
71
- OnInit,
72
- } from '@angular/core';
73
-
74
- import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
75
- import {
76
- DaffToast,
77
- DaffToastAction,
78
- DaffToastService,
79
- } from '@daffodil/design/toast';
80
-
81
- @Component({
82
- selector: 'action-toast',
83
- templateUrl: './action-toast.component.html',
84
- changeDetection: ChangeDetectionStrategy.OnPush,
85
- standalone: true,
86
- imports: [
87
- DAFF_BUTTON_COMPONENTS,
88
- ],
89
- })
90
- export class ActionToastComponent implements OnInit {
91
- private toast: DaffToast;
92
-
93
- constructor(private toastService: DaffToastService) {}
94
-
95
- update = new EventEmitter<DaffToastAction>();
96
-
97
- closeToast = new EventEmitter<DaffToastAction>();
98
-
99
- open() {
100
- this.toast = this.toastService.open({
101
- title: 'Update Available',
102
- message: 'A new version of this page is available.',
103
- actions: [
104
- { content: 'Update', color: 'theme-contrast', size: 'sm', eventEmitter: this.update },
105
- { content: 'Remind me later', type: 'flat', size: 'sm', eventEmitter: this.closeToast },
106
- ]
107
- });
108
- }
109
-
110
- ngOnInit() {
111
- this.update.subscribe(() => {
112
- });
113
-
114
- this.closeToast.subscribe(() => {
115
- this.toastService.close(this.toast);
116
- });
117
- }
118
- }
119
- ```
120
-
121
- The following configurations are available in the `DaffToastService`:
122
-
123
- | Property | Type | Description | Default |
124
- | -------- | ------ | ------------------------------- | ------- |
125
- | title | string | A quick overview of the toast | -- |
126
- | message | string | Additional details about the message that should be limited to one or two sentences | -- |
127
- | actions | `DaffToastAction` | Adds a `daff-button` that allow users to perform an action related to the message. Actions should be limited to two buttons. | -- |
128
- | dismissible | boolean | Allows a toast to be dismissible via a close button | true |
129
- | duration | number | The duration in milliseconds that a toast is visible before it's dismissed | 5000 |
130
-
131
- The `actions` configurations are based on the properties of the `DaffButtonComponent` (view [Button Documentation](/libs/design/button/README.md)) with the addition of `data` and `eventEmitter`.
132
-
133
25
  ## Dismissal
134
- A toast can be dismissed via a timed duration, a close button, or the `ESC` key.
26
+ A toast can be dismissed via a timed duration or a close button.
27
+
28
+ The `duration` and `dismissible` properties can be updated when you open it with the `DaffToastService`.
135
29
 
136
30
  ### Timed duration
137
- A toast with actions will persist until one of the actions have been interacted with, or is dismissed by the close button or the `ESC` key. Actionable toasts should be persistent, but a duration is allowed to be set. If duration must be set, make sure it's long enough for users to engage with the actions.
31
+ A toast with actions will persist until one of the actions have been interacted with or dismissed by the close button. By default, a toast without actions will be dismissed after `5000ms`.
138
32
 
139
- By default, a toast without actions will be dismissed after `5000ms`. This can be updated by setting `duration` through the `DaffToastService`.
33
+ > Actionable toasts should be persistent, but a duration is allowed to be set. If duration must be set, make sure it's long enough for users to engage with the actions.
140
34
 
141
- #### Toast with custom duration
142
35
  <design-land-example-viewer-container example="toast-with-custom-duration"></design-land-example-viewer-container>
143
36
 
144
37
  ### Close button
145
- The close button is shown by default but can be hidden by setting `dismissible: false` through the `DaffToastService`.
38
+ The close button is hidden by default, and dismissible is ignored when there are actions in a toast. You can change the visibility of the close button via the `dismissible` property.
146
39
 
147
- ### Escape Key
148
- A toast can be dismissed by using the `ESC` key if it has actions and is focus trapped.
40
+ <design-land-example-viewer-container example="dismissible-toast"></design-land-example-viewer-container>
149
41
 
150
42
  ## Stacking
151
43
  A maximum of three toasts can be shown at a time. Toasts are stacked vertically, with the most recent toast displayed on top.
152
44
 
153
45
  ## Statuses
154
- The status color of a toast can be updated by using the `status` property.
155
-
156
- Supported statuses: `warn | critical | success`
46
+ You can set the status of a toast when opening it with `DaffToastService`, using values defined by `DaffStatus`.
157
47
 
158
- ### Toast with statuses
159
48
  <design-land-example-viewer-container example="toast-status"></design-land-example-viewer-container>
160
49
 
161
- ## Positions
162
-
163
- | Property | Value | Default |
164
- | ------------ | ------------------------ | ------- |
165
- | `vertical` | `top | bottom` | top |
166
- | `horizontal` | `left | center | right ` | right |
167
-
168
- To change the horizontal and vertical position of a toast, add the `provideDaffToastOptions` dependency key to the `providers` key in the module as shown below:
169
-
170
- ```ts
171
- providers: [
172
- provideDaffToastOptions({
173
- position: {
174
- vertical: 'bottom',
175
- horizontal: 'center',
176
- }
177
- useParent: false,
178
- })
179
- ]
180
- ```
181
-
182
- The position of a toast on a mobile device will always be on the bottom center.
50
+ ## Accessibility
51
+ By default, toasts use a `role="status"` to announce messages. It's the equivalent of `aria-live="polite"`, which does not interrupt a user's current activity and waits until they are idle to make the announcement.
183
52
 
184
- ### Toast with configurable positions
185
- <design-land-example-viewer-container example="toast-positions"></design-land-example-viewer-container>
53
+ `role="alertdialog"` is used when a toast has action. The toast will be focus trapped and focus immediately moves to the actions.
186
54
 
187
- ## Accessibility
188
- By default, toasts use a `role="status"` to announce messages. It's the equivalent of `aria-live="polite"`, which does not interrupt a user's current activity and waits until they are idle to make the announcement. When a toast has actions, a `role="alertdialog"` is used. The toast will be focus trapped and focus immediately moves to the actions.
55
+ Avoid setting a duration on toasts with actions because they will disappear automatically, making it difficult for users to interact with the actions.
189
56
 
190
- Avoid setting a duration on toasts with actions because they will disappear automatically, making it difficult for users to interact with the actions.
57
+ ### Keyboard Interactions
58
+ | Key | Action |
59
+ | ----- | ------ |
60
+ | `ESC` | Dismisses a toast if it has actions and is focus trapped. |
@@ -0,0 +1,11 @@
1
+ import { DaffToastService } from '@daffodil/design/toast';
2
+ import * as i0 from "@angular/core";
3
+ export declare class DismissibleToastComponent {
4
+ private toastService;
5
+ private toast;
6
+ constructor(toastService: DaffToastService);
7
+ open(): void;
8
+ private count;
9
+ static ɵfac: i0.ɵɵFactoryDeclaration<DismissibleToastComponent, never>;
10
+ static ɵcmp: i0.ɵɵComponentDeclaration<DismissibleToastComponent, "dismissible-toast", never, {}, {}, never, never, true, never>;
11
+ }
@@ -1,5 +1,6 @@
1
1
  import { DefaultToastComponent } from './default-toast/default-toast.component';
2
+ import { DismissibleToastComponent } from './dismissible-toast/dismissible-toast.component';
2
3
  import { ToastPositionsComponent } from './toast-positions/toast-positions.component';
3
4
  import { ToastStatusComponent } from './toast-status/toast-status.component';
4
5
  import { ToastWithCustomDurationComponent } from './toast-with-custom-duration/toast-with-custom-duration.component';
5
- export declare const TOAST_EXAMPLES: (typeof DefaultToastComponent | typeof ToastPositionsComponent | typeof ToastStatusComponent | typeof ToastWithCustomDurationComponent)[];
6
+ export declare const TOAST_EXAMPLES: (typeof DefaultToastComponent | typeof DismissibleToastComponent | typeof ToastPositionsComponent | typeof ToastStatusComponent | typeof ToastWithCustomDurationComponent)[];
@@ -1,34 +1,45 @@
1
1
  import { EventEmitter } from '@angular/core';
2
2
  import { DaffPalette, DaffStatus } from '@daffodil/design';
3
+ import { DaffToastActionButtonSize, DaffToastActionButtonType } from './toast-action.type';
3
4
  /**
4
- * An interface for properties of actions, specifically the DaffButtonComponent, placed inside of the toast.
5
+ * The configurations for an action button rendered inside a toast
6
+ * displayed using the {@link DaffButtonComponent}.
5
7
  */
6
8
  export interface DaffToastAction {
7
9
  /**
8
- * The types of buttons available to be used, as defined in the {@link DaffButtonComponent}.
10
+ * The type of button.
11
+ *
12
+ * Matches one of the predefined types supported by {@link DaffButtonComponent}.
9
13
  */
10
- type?: 'raised' | 'underline' | 'stroked' | 'flat' | undefined;
14
+ type?: DaffToastActionButtonType;
11
15
  /**
12
- * The text for the button
16
+ * The text displayed on the button.
13
17
  */
14
18
  content: string;
15
19
  /**
16
- * The size of the button, as defined in the {@link DaffButtonComponent}.
20
+ * The size of the button.
21
+ *
22
+ * Matches one of the predefined sizes supported by {@link DaffButtonComponent}.
17
23
  */
18
- size?: 'sm' | 'md' | 'lg' | undefined;
24
+ size?: DaffToastActionButtonSize;
19
25
  /**
20
- * The color of the button, as defined in the {@link DaffButtonComponent}.
21
- * Color and status should not be used simultaneously.
26
+ * The color of the button.
27
+ *
28
+ * Do not use both `color` and `status` simultaneously.
22
29
  */
23
30
  color?: DaffPalette;
24
31
  /**
25
- * The status of the button, as defined in the {@link DaffButtonComponent}.
26
- * Color and status should not be used simultaneously.
32
+ * The button status.
33
+ *
34
+ * Do not use both `color` and `status` simultaneously.
27
35
  */
28
36
  status?: DaffStatus;
37
+ /**
38
+ * Data associated with the action.
39
+ */
29
40
  data?: Record<string, any>;
30
41
  /**
31
- * Sets an EventEmitter on a DaffToastAction
42
+ * An event emitter that fires when the action is triggered.
32
43
  */
33
44
  eventEmitter?: EventEmitter<DaffToastAction>;
34
45
  }
@@ -0,0 +1,10 @@
1
+ /**
2
+ * The available button styles that can be used in {@link DaffToastAction}.
3
+ * These correspond to the types supported by {@link DaffButtonComponent}.
4
+ */
5
+ export type DaffToastActionButtonType = 'raised' | 'underline' | 'stroked' | 'flat' | undefined;
6
+ /**
7
+ * The available button sizes that can be used in {@link DaffToastAction}.
8
+ * These correspond to the types supported by {@link DaffButtonComponent}.
9
+ */
10
+ export type DaffToastActionButtonSize = 'sm' | 'md' | 'lg' | undefined;
@@ -3,18 +3,24 @@ import { DaffStatus } from '@daffodil/design';
3
3
  import { DaffToastAction } from './toast-action';
4
4
  /** Possible data that can be shown on a toast */
5
5
  export interface DaffToastData {
6
- /** A title that provides a quick oveview of the toast */
6
+ /** A title that provides a quick oveview of the toast. */
7
7
  title: string;
8
- /** A short message used to provide additional details about the toast */
8
+ /** A short message used to provide additional details about the toast. */
9
9
  message?: string;
10
- /** Sets a status on the toast */
10
+ /** Sets a status on the toast. */
11
11
  status?: DaffStatus;
12
- /** Used to display actions in the toast */
12
+ /** Used to display actions in the toast. */
13
13
  actions?: DaffToastAction[];
14
- /** Whether or not the toast is dismissible */
14
+ /** Whether or not the toast is dismissible. */
15
15
  dismissible?: boolean;
16
16
  }
17
17
  export interface DaffToast extends DaffToastData {
18
+ /**
19
+ * Closes the toast.
20
+ */
18
21
  dismiss: () => void;
22
+ /**
23
+ * The observable that emits when the toast is closed.
24
+ */
19
25
  dismissalStream: Observable<void | number>;
20
26
  }
@@ -10,4 +10,5 @@ export interface DaffToastOptions {
10
10
  useParent: boolean;
11
11
  }
12
12
  export declare const daffToastDefaultOptions: DaffToastOptions;
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;
13
+ export declare const provideDaffToastOptions: <R extends DaffToastOptions = DaffToastOptions>(config: Partial<R> | import("@angular/core").InjectionToken<Partial<R>>) => import("@angular/core").FactoryProvider;
14
+ export declare const DAFF_TOAST_OPTIONS: import("@angular/core").InjectionToken<DaffToastOptions>;
@@ -1,12 +1,8 @@
1
1
  export { DaffToastPositionService } from './service/position.service';
2
- export { DaffToastModule } from './toast.module';
3
2
  export { DaffToastService } from './service/toast.service';
4
3
  export { DaffToastConfiguration } from './toast/toast-config';
5
4
  export { DaffToast, DaffToastData, } from './interfaces/toast';
6
5
  export { DaffToastAction } from './interfaces/toast-action';
7
6
  export { DAFF_TOAST_OPTIONS, provideDaffToastOptions, } from './options/daff-toast-options';
8
- export * from './toast/toast.component';
9
- export * from './toast-actions/toast-actions.directive';
10
- export * from './toast-title/toast-title.directive';
11
- export * from './toast-message/toast-message.directive';
12
- export * from './toast/toast-provider';
7
+ export { provideDaffToast } from './toast/toast-provider';
8
+ export { DaffToastActionButtonSize, DaffToastActionButtonType, } from './interfaces/toast-action.type';
@@ -7,8 +7,16 @@ export declare class DaffToastPositionService {
7
7
  constructor(options: DaffToastOptions, mediaQuery: BreakpointObserver);
8
8
  private _config;
9
9
  private _position;
10
+ /**
11
+ * Reads the current position of the toast. Defaults to bottom center on mobile devices.
12
+ */
10
13
  get config(): DaffToastPosition;
11
- set config(val: DaffToastPosition);
14
+ private set config(value);
15
+ /**
16
+ * Changes the position of the toast.
17
+ *
18
+ * @param position The position of the toast.
19
+ */
12
20
  setPosition(position: DaffToastPosition): void;
13
21
  static ɵfac: i0.ɵɵFactoryDeclaration<DaffToastPositionService, never>;
14
22
  static ɵprov: i0.ɵɵInjectableDeclaration<DaffToastPositionService>;
@@ -7,6 +7,55 @@ import { DaffToast, DaffToastData } from '../interfaces/toast';
7
7
  import { DaffToastOptions } from '../options/daff-toast-options';
8
8
  import { DaffToastConfiguration } from '../toast/toast-config';
9
9
  import * as i0 from "@angular/core";
10
+ /**
11
+ * Service to display toasts.
12
+ *
13
+ * @example
14
+ * ```ts
15
+ * import {
16
+ * ChangeDetectionStrategy,
17
+ * Component,
18
+ * EventEmitter,
19
+ * OnInit,
20
+ * } from '@angular/core';
21
+ *
22
+ * import {
23
+ * DaffToast,
24
+ * DaffToastAction,
25
+ * DaffToastService,
26
+ * } from '@daffodil/design/toast';
27
+ *
28
+ * @Component({
29
+ * selector: 'default-toast',
30
+ * templateUrl: './default-toast.component.html',
31
+ * styles: [],
32
+ * changeDetection: ChangeDetectionStrategy.OnPush,
33
+ * })
34
+ * export class DefaultToastComponent implements OnInit {
35
+ * private toast: DaffToast;
36
+ *
37
+ * constructor(private toastService: DaffToastService) {}
38
+ *
39
+ * closeToast = new EventEmitter<DaffToastAction>();
40
+ *
41
+ * open() {
42
+ * this.toast = this.toastService.open({
43
+ * title: 'Update Available',
44
+ * message: 'A new version of this page is available.',
45
+ * actions: [
46
+ * { content: 'Remind me later', type: 'flat', size: 'sm', eventEmitter: this.closeToast },
47
+ * ],
48
+ * });
49
+ * }
50
+ *
51
+ * ngOnInit() {
52
+ * this.closeToast.subscribe(() => {
53
+ * this.toastService.close(this.toast);
54
+ * });
55
+ * }
56
+ * }
57
+ * ```
58
+ */
10
59
  export declare class DaffToastService implements OnDestroy {
11
60
  private overlay;
12
61
  private options;
@@ -20,10 +69,24 @@ export declare class DaffToastService implements OnDestroy {
20
69
  private _overlayRef?;
21
70
  private _template?;
22
71
  constructor(overlay: Overlay, options: DaffToastOptions, _parentToast: DaffToastService, mediaQuery: BreakpointObserver, toastPosition: DaffToastPositionService, focusStack: DaffFocusStackService, injector: Injector);
72
+ /**
73
+ * @docs-private
74
+ */
23
75
  ngOnDestroy(): void;
24
76
  private _attachToastTemplate;
25
77
  private _createOverlayRef;
78
+ /**
79
+ * Opens the toast.
80
+ *
81
+ * @param toast Data that can be shown on a toast.
82
+ * @param configuration Additional configuration options such as duration. The default duration is set to 5000ms.
83
+ */
26
84
  open(toast: DaffToastData, configuration?: Partial<DaffToastConfiguration>): DaffToast;
85
+ /**
86
+ * Closes the toast.
87
+ *
88
+ * @param toast The instance of toast that you wish to close.
89
+ */
27
90
  close(toast: DaffToast): void;
28
91
  static ɵfac: i0.ɵɵFactoryDeclaration<DaffToastService, [null, null, { optional: true; skipSelf: true; }, null, null, null, null]>;
29
92
  static ɵprov: i0.ɵɵInjectableDeclaration<DaffToastService>;
@@ -1,6 +1,29 @@
1
1
  export interface DaffToastConfiguration {
2
2
  /**
3
- * The duration (in milliseconds) that a toast is visible before it's dismissed.
3
+ * The duration (in milliseconds) for which a toast remains visible before dismissal.
4
+ *
5
+ * While you can set a duration for toasts with actions, it's generally not recommended,
6
+ * as users should have ample time to interact with them.
7
+ *
8
+ * @usage
9
+ * ```
10
+ * export class CustomComponent {
11
+ * private toast: DaffToast;
12
+ *
13
+ * constructor(private toastService: DaffToastService) {}
14
+ *
15
+ * open() {
16
+ * this.toast = this.toastService.open({
17
+ * title: 'Update Complete',
18
+ * message: 'This page has been updated to the newest version.',
19
+ * status: 'success',
20
+ * },
21
+ * {
22
+ * duration: 7000,
23
+ * });
24
+ * }
25
+ * }
26
+ * ```
4
27
  */
5
28
  duration?: number;
6
29
  }
@@ -1,2 +1,18 @@
1
1
  import { Provider } from '@angular/core';
2
+ /**
3
+ * Registers the `DaffToastService` and `DaffToastPositionService` for displaying a toast. This provider ensures
4
+ * toasts function correctly within your application.
5
+ *
6
+ * ```ts
7
+ * import { provideDaffToast } from '@daffodil/design/toast';
8
+ *
9
+ * @NgModule({
10
+ * providers: [
11
+ * provideDaffToast(),
12
+ * ]
13
+ * )}
14
+ *
15
+ * export class AppModule {}
16
+ * ```
17
+ */
2
18
  export declare const provideDaffToast: () => Provider[];
@@ -1,15 +1,13 @@
1
1
  import { ChangeDetectorRef, EventEmitter } from '@angular/core';
2
2
  import { DaffToast } from '../interfaces/toast';
3
- import { DaffToastOptions } from '../options/daff-toast-options';
4
3
  import { DaffToastPositionService } from '../service/position.service';
5
4
  import * as i0 from "@angular/core";
6
5
  export declare class DaffToastTemplateComponent {
7
6
  private cd;
8
- private options;
9
7
  private toastPosition;
10
8
  faTimes: import("@fortawesome/fontawesome-common-types").IconDefinition;
11
9
  private _items;
12
- constructor(cd: ChangeDetectorRef, options: DaffToastOptions, toastPosition: DaffToastPositionService);
10
+ constructor(cd: ChangeDetectorRef, toastPosition: DaffToastPositionService);
13
11
  closeToast: EventEmitter<void>;
14
12
  onCloseToast(event: Event): void;
15
13
  get slideAnimation(): any;
@@ -6,6 +6,8 @@ import { DaffToastActionsDirective } from '../toast-actions/toast-actions.direct
6
6
  import * as i0 from "@angular/core";
7
7
  import * as i1 from "@daffodil/design";
8
8
  /**
9
+ * @docs-private
10
+ *
9
11
  * DaffToastComponent provides a way to display and
10
12
  * communicate information for user actions or system updates.
11
13
  */
@@ -13,9 +15,17 @@ export declare class DaffToastComponent implements DaffPrefixable, AfterContentI
13
15
  private _elementRef;
14
16
  private _focusTrapFactory;
15
17
  private _focusStack;
16
- /** @docs-private */
18
+ /**
19
+ * @docs-private
20
+ */
17
21
  class: boolean;
22
+ /**
23
+ * @docs-private
24
+ */
18
25
  _actions: DaffToastActionsDirective;
26
+ /**
27
+ * @docs-private
28
+ */
19
29
  _prefix: DaffPrefixDirective;
20
30
  toast: DaffToast;
21
31
  /**
@@ -24,8 +34,17 @@ export declare class DaffToastComponent implements DaffPrefixable, AfterContentI
24
34
  onEscape(): void;
25
35
  private _focusTrap;
26
36
  constructor(_elementRef: ElementRef, _focusTrapFactory: ConfigurableFocusTrapFactory, _focusStack: DaffFocusStackService);
37
+ /**
38
+ * @docs-private
39
+ */
27
40
  ngAfterContentInit(): void;
41
+ /**
42
+ * @docs-private
43
+ */
28
44
  ngAfterViewInit(): void;
45
+ /**
46
+ * @docs-private
47
+ */
29
48
  ngOnDestroy(): void;
30
49
  static ɵfac: i0.ɵɵFactoryDeclaration<DaffToastComponent, never>;
31
50
  static ɵcmp: i0.ɵɵComponentDeclaration<DaffToastComponent, "daff-toast", never, { "toast": { "alias": "toast"; "required": false; }; }, {}, ["_actions", "_prefix"], ["[daffPrefix]", "[daffToastTitle]", "[daffToastMessage]", "[daffToastActions]", "*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }]>;
@@ -1,5 +1,8 @@
1
1
  import * as i0 from "@angular/core";
2
2
  export declare class DaffToastActionsDirective {
3
+ /**
4
+ * @docs-private
5
+ */
3
6
  class: boolean;
4
7
  static ɵfac: i0.ɵɵFactoryDeclaration<DaffToastActionsDirective, never>;
5
8
  static ɵdir: i0.ɵɵDirectiveDeclaration<DaffToastActionsDirective, "[daffToastActions]", never, {}, {}, never, never, true, never>;
@@ -1,5 +1,8 @@
1
1
  import * as i0 from "@angular/core";
2
2
  export declare class DaffToastMessageDirective {
3
+ /**
4
+ * @docs-private
5
+ */
3
6
  class: boolean;
4
7
  static ɵfac: i0.ɵɵFactoryDeclaration<DaffToastMessageDirective, never>;
5
8
  static ɵdir: i0.ɵɵDirectiveDeclaration<DaffToastMessageDirective, "[daffToastMessage]", never, {}, {}, never, never, true, never>;
@@ -1,5 +1,8 @@
1
1
  import * as i0 from "@angular/core";
2
2
  export declare class DaffToastTitleDirective {
3
+ /**
4
+ * @docs-private
5
+ */
3
6
  class: boolean;
4
7
  static ɵfac: i0.ɵɵFactoryDeclaration<DaffToastTitleDirective, never>;
5
8
  static ɵdir: i0.ɵɵDirectiveDeclaration<DaffToastTitleDirective, "[daffToastTitle]", never, {}, {}, never, never, true, never>;