@daffodil/design 0.81.1 → 0.83.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 (258) 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/accordion/src/accordion-theme.scss +28 -6
  10. package/article/README.md +4 -3
  11. package/article/article.d.ts +3 -0
  12. package/article/src/article-theme.scss +128 -51
  13. package/breadcrumb/README.md +38 -28
  14. package/breadcrumb/breadcrumb/breadcrumb.component.d.ts +15 -2
  15. package/breadcrumb/breadcrumb-item/breadcrumb-item.directive.d.ts +18 -4
  16. package/breadcrumb/breadcrumb.d.ts +3 -0
  17. package/breadcrumb/examples/iterated-breadcrumb/iterated-breadcrumb.component.d.ts +6 -0
  18. package/breadcrumb/public_api.d.ts +2 -2
  19. package/button/README.md +43 -23
  20. package/button/button/basic/button.component.d.ts +5 -1
  21. package/button/button/button-base.directive.d.ts +11 -3
  22. package/button/button/button-sizable.directive.d.ts +1 -1
  23. package/button/button/raised/raised.component.d.ts +2 -0
  24. package/button/button/stroked/stroked.component.d.ts +5 -1
  25. package/button/button.d.ts +4 -2
  26. package/button/button.module.d.ts +1 -2
  27. package/button/examples/elevated-button/elevated-button.component.d.ts +6 -0
  28. package/button/examples/examples.d.ts +2 -1
  29. package/button/examples/public_api.d.ts +1 -0
  30. package/button/public_api.d.ts +0 -1
  31. package/button/src/button/basic/button-theme.scss +185 -80
  32. package/button/src/button/button-base.scss +41 -16
  33. package/button/src/button/flat/flat-theme.scss +144 -85
  34. package/button/src/button/icon/icon-theme.scss +183 -79
  35. package/button/src/button/raised/raised-theme.scss +2 -7
  36. package/button/src/button/stroked/stroked-theme.scss +128 -94
  37. package/button/src/button/underline/underline-theme.scss +112 -44
  38. package/callout/README.md +4 -3
  39. package/callout/callout.d.ts +3 -0
  40. package/card/README.md +6 -3
  41. package/card/card/basic/basic.component.d.ts +7 -0
  42. package/card/card/raised/raised.component.d.ts +7 -0
  43. package/card/card/stroked/stroked.component.d.ts +7 -0
  44. package/card/card-base.directive.d.ts +25 -0
  45. package/card/card.d.ts +18 -1
  46. package/card/card.module.d.ts +10 -8
  47. package/card/examples/card-theming/card-theming.component.d.ts +2 -1
  48. package/card/examples/public_api.d.ts +1 -1
  49. package/card/public_api.d.ts +6 -1
  50. package/card/src/card/raised/raised-theme.scss +30 -0
  51. package/card/src/card/stroked/stroked-theme.scss +135 -0
  52. package/card/src/card-base-theme.scss +197 -0
  53. package/card/src/card-base.scss +134 -0
  54. package/container/README.md +5 -3
  55. package/container/container.d.ts +3 -0
  56. package/core/colorable/colorable.d.ts +20 -14
  57. package/core/colorable/colorable.directive.d.ts +9 -6
  58. package/fesm2022/daffodil-design-accordion-examples.mjs +28 -4
  59. package/fesm2022/daffodil-design-accordion-examples.mjs.map +1 -1
  60. package/fesm2022/daffodil-design-accordion.mjs +56 -29
  61. package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
  62. package/fesm2022/daffodil-design-article-examples.mjs +30 -30
  63. package/fesm2022/daffodil-design-article.mjs +14 -11
  64. package/fesm2022/daffodil-design-article.mjs.map +1 -1
  65. package/fesm2022/daffodil-design-breadcrumb-examples.mjs +24 -4
  66. package/fesm2022/daffodil-design-breadcrumb-examples.mjs.map +1 -1
  67. package/fesm2022/daffodil-design-breadcrumb.mjs +78 -40
  68. package/fesm2022/daffodil-design-breadcrumb.mjs.map +1 -1
  69. package/fesm2022/daffodil-design-button-examples.mjs +55 -33
  70. package/fesm2022/daffodil-design-button-examples.mjs.map +1 -1
  71. package/fesm2022/daffodil-design-button.mjs +79 -69
  72. package/fesm2022/daffodil-design-button.mjs.map +1 -1
  73. package/fesm2022/daffodil-design-callout-examples.mjs +12 -12
  74. package/fesm2022/daffodil-design-callout-examples.mjs.map +1 -1
  75. package/fesm2022/daffodil-design-callout.mjs +25 -22
  76. package/fesm2022/daffodil-design-callout.mjs.map +1 -1
  77. package/fesm2022/daffodil-design-card-examples.mjs +35 -31
  78. package/fesm2022/daffodil-design-card-examples.mjs.map +1 -1
  79. package/fesm2022/daffodil-design-card.mjs +140 -86
  80. package/fesm2022/daffodil-design-card.mjs.map +1 -1
  81. package/fesm2022/daffodil-design-checkbox-examples.mjs +6 -6
  82. package/fesm2022/daffodil-design-checkbox-examples.mjs.map +1 -1
  83. package/fesm2022/daffodil-design-container-examples.mjs +3 -3
  84. package/fesm2022/daffodil-design-container.mjs +10 -7
  85. package/fesm2022/daffodil-design-container.mjs.map +1 -1
  86. package/fesm2022/daffodil-design-hero-examples.mjs +12 -12
  87. package/fesm2022/daffodil-design-hero-examples.mjs.map +1 -1
  88. package/fesm2022/daffodil-design-hero.mjs +25 -22
  89. package/fesm2022/daffodil-design-hero.mjs.map +1 -1
  90. package/fesm2022/daffodil-design-image-examples.mjs +9 -9
  91. package/fesm2022/daffodil-design-image.mjs +36 -19
  92. package/fesm2022/daffodil-design-image.mjs.map +1 -1
  93. package/fesm2022/daffodil-design-input-examples.mjs +12 -12
  94. package/fesm2022/daffodil-design-link-set.mjs +19 -16
  95. package/fesm2022/daffodil-design-link-set.mjs.map +1 -1
  96. package/fesm2022/daffodil-design-list-examples.mjs +12 -12
  97. package/fesm2022/daffodil-design-list.mjs +13 -10
  98. package/fesm2022/daffodil-design-list.mjs.map +1 -1
  99. package/fesm2022/daffodil-design-loading-icon-examples.mjs +4 -4
  100. package/fesm2022/daffodil-design-loading-icon-examples.mjs.map +1 -1
  101. package/fesm2022/daffodil-design-loading-icon.mjs +11 -8
  102. package/fesm2022/daffodil-design-loading-icon.mjs.map +1 -1
  103. package/fesm2022/daffodil-design-media-gallery-examples.mjs +62 -13
  104. package/fesm2022/daffodil-design-media-gallery-examples.mjs.map +1 -1
  105. package/fesm2022/daffodil-design-media-gallery.mjs +204 -250
  106. package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
  107. package/fesm2022/daffodil-design-menu-examples.mjs +6 -6
  108. package/fesm2022/daffodil-design-menu-examples.mjs.map +1 -1
  109. package/fesm2022/daffodil-design-menu.mjs +16 -16
  110. package/fesm2022/daffodil-design-modal-examples.mjs +7 -7
  111. package/fesm2022/daffodil-design-modal-examples.mjs.map +1 -1
  112. package/fesm2022/daffodil-design-modal.mjs +28 -25
  113. package/fesm2022/daffodil-design-modal.mjs.map +1 -1
  114. package/fesm2022/daffodil-design-navbar-examples.mjs +12 -12
  115. package/fesm2022/daffodil-design-navbar-examples.mjs.map +1 -1
  116. package/fesm2022/daffodil-design-navbar.mjs +10 -7
  117. package/fesm2022/daffodil-design-navbar.mjs.map +1 -1
  118. package/fesm2022/daffodil-design-notification-examples.mjs +17 -16
  119. package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
  120. package/fesm2022/daffodil-design-notification.mjs +23 -20
  121. package/fesm2022/daffodil-design-notification.mjs.map +1 -1
  122. package/fesm2022/daffodil-design-paginator-examples.mjs +6 -6
  123. package/fesm2022/daffodil-design-paginator.mjs +13 -7
  124. package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
  125. package/fesm2022/daffodil-design-progress-bar-examples.mjs +10 -10
  126. package/fesm2022/daffodil-design-progress-bar-examples.mjs.map +1 -1
  127. package/fesm2022/daffodil-design-progress-bar.mjs +13 -13
  128. package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
  129. package/fesm2022/daffodil-design-quantity-field-examples.mjs +12 -12
  130. package/fesm2022/daffodil-design-radio-examples.mjs +3 -3
  131. package/fesm2022/daffodil-design-sidebar-examples.mjs +14 -14
  132. package/fesm2022/daffodil-design-sidebar-examples.mjs.map +1 -1
  133. package/fesm2022/daffodil-design-sidebar.mjs +150 -61
  134. package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
  135. package/fesm2022/daffodil-design-switch-examples.mjs +15 -15
  136. package/fesm2022/daffodil-design-switch-examples.mjs.map +1 -1
  137. package/fesm2022/daffodil-design-switch.mjs +38 -10
  138. package/fesm2022/daffodil-design-switch.mjs.map +1 -1
  139. package/fesm2022/daffodil-design-tabs-examples.mjs +23 -17
  140. package/fesm2022/daffodil-design-tabs-examples.mjs.map +1 -1
  141. package/fesm2022/daffodil-design-tabs.mjs +67 -35
  142. package/fesm2022/daffodil-design-tabs.mjs.map +1 -1
  143. package/fesm2022/daffodil-design-text-snippet-examples.mjs +3 -3
  144. package/fesm2022/daffodil-design-text-snippet.mjs +4 -5
  145. package/fesm2022/daffodil-design-text-snippet.mjs.map +1 -1
  146. package/fesm2022/daffodil-design-toast-examples.mjs +40 -15
  147. package/fesm2022/daffodil-design-toast-examples.mjs.map +1 -1
  148. package/fesm2022/daffodil-design-toast.mjs +296 -239
  149. package/fesm2022/daffodil-design-toast.mjs.map +1 -1
  150. package/fesm2022/daffodil-design-tree-examples.mjs +6 -6
  151. package/fesm2022/daffodil-design-tree.mjs +15 -12
  152. package/fesm2022/daffodil-design-tree.mjs.map +1 -1
  153. package/fesm2022/daffodil-design-youtube-player.mjs +104 -0
  154. package/fesm2022/daffodil-design-youtube-player.mjs.map +1 -0
  155. package/fesm2022/daffodil-design.mjs +167 -155
  156. package/fesm2022/daffodil-design.mjs.map +1 -1
  157. package/hero/README.md +4 -3
  158. package/hero/hero.d.ts +3 -0
  159. package/image/README.md +4 -3
  160. package/image/image/image.component.d.ts +22 -1
  161. package/image/image.d.ts +3 -0
  162. package/link-set/README.md +4 -3
  163. package/link-set/link-set.d.ts +3 -0
  164. package/list/README.md +4 -3
  165. package/list/list.d.ts +3 -0
  166. package/loading-icon/README.md +10 -7
  167. package/loading-icon/loading-icon.d.ts +3 -0
  168. package/loading-icon/src/loading-icon-theme.scss +66 -38
  169. package/media-gallery/README.md +19 -10
  170. package/media-gallery/examples/iterated-media-gallery/iterated-media-gallery.component.d.ts +13 -0
  171. package/media-gallery/examples/media-gallery-with-video/media-gallery-with-video.component.d.ts +5 -0
  172. package/media-gallery/examples/public_api.d.ts +2 -0
  173. package/media-gallery/helpers/media-gallery-registration.interface.d.ts +1 -1
  174. package/media-gallery/media-gallery/media-gallery.component.d.ts +89 -11
  175. package/media-gallery/media-gallery.d.ts +4 -2
  176. package/media-gallery/media-gallery.module.d.ts +1 -2
  177. package/media-gallery/public_api.d.ts +3 -4
  178. package/media-gallery/src/media-gallery-theme.scss +30 -4
  179. package/media-gallery/thumbnail/thumbnail.directive.d.ts +45 -22
  180. package/menu/README.md +1 -2
  181. package/modal/README.md +3 -2
  182. package/modal/modal.d.ts +3 -0
  183. package/navbar/README.md +3 -2
  184. package/navbar/navbar.d.ts +3 -0
  185. package/notification/README.md +5 -4
  186. package/notification/notification.d.ts +3 -0
  187. package/notification/src/notification-theme.scss +62 -23
  188. package/package.json +1 -1
  189. package/paginator/README.md +3 -2
  190. package/paginator/paginator/paginator.component.d.ts +3 -0
  191. package/paginator/paginator.d.ts +3 -0
  192. package/progress-bar/README.md +5 -6
  193. package/progress-bar/progress-bar.component.d.ts +0 -3
  194. package/progress-bar/progress-bar.d.ts +3 -0
  195. package/progress-bar/src/progress-bar-theme.scss +17 -8
  196. package/scss/theme.scss +36 -17
  197. package/scss/theming/_configure-theme.scss +2 -0
  198. package/scss/theming/_index.scss +1 -0
  199. package/scss/theming/_light-dark.scss +45 -0
  200. package/sidebar/README.md +20 -21
  201. package/sidebar/helper/sidebar-mode.d.ts +9 -15
  202. package/sidebar/public_api.d.ts +10 -11
  203. package/sidebar/sidebar/sidebar.component.d.ts +22 -7
  204. package/sidebar/sidebar-footer/sidebar-footer.component.d.ts +11 -0
  205. package/sidebar/sidebar-header/sidebar-header-title/sidebar-header-title.directive.d.ts +8 -0
  206. package/sidebar/sidebar-header/sidebar-header.component.d.ts +19 -1
  207. package/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts +36 -15
  208. package/sidebar/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.d.ts +17 -0
  209. package/sidebar/sidebar.d.ts +4 -2
  210. package/sidebar/sidebar.module.d.ts +1 -2
  211. package/switch/README.md +3 -2
  212. package/switch/src/switch-theme.scss +29 -10
  213. package/switch/switch/switch.component.d.ts +31 -6
  214. package/switch/switch.d.ts +3 -0
  215. package/tabs/README.md +33 -3
  216. package/tabs/src/tabs-theme.scss +31 -13
  217. package/tabs/tabs/tab/tab.component.d.ts +1 -1
  218. package/tabs/tabs/tab-label/tab-label.component.d.ts +6 -0
  219. package/tabs/tabs/tab-panel/tab-panel.component.d.ts +8 -0
  220. package/tabs/tabs/tabs.component.d.ts +21 -4
  221. package/tabs/tabs.d.ts +8 -2
  222. package/text-snippet/README.md +19 -1
  223. package/toast/README.md +21 -151
  224. package/toast/examples/dismissible-toast/dismissible-toast.component.d.ts +11 -0
  225. package/toast/examples/public_api.d.ts +2 -1
  226. package/toast/interfaces/toast-action.d.ts +22 -11
  227. package/toast/interfaces/toast-action.type.d.ts +10 -0
  228. package/toast/interfaces/toast.d.ts +11 -5
  229. package/toast/options/daff-toast-options.d.ts +2 -1
  230. package/toast/public_api.d.ts +2 -6
  231. package/toast/service/position.service.d.ts +9 -1
  232. package/toast/service/toast.service.d.ts +63 -0
  233. package/toast/src/toast-theme.scss +80 -33
  234. package/toast/toast/toast-config.d.ts +24 -1
  235. package/toast/toast/toast-provider.d.ts +16 -0
  236. package/toast/toast/toast.component.d.ts +20 -1
  237. package/toast/toast-actions/toast-actions.directive.d.ts +3 -0
  238. package/toast/toast-message/toast-message.directive.d.ts +3 -0
  239. package/toast/toast-title/toast-title.directive.d.ts +3 -0
  240. package/tree/README.md +6 -10
  241. package/tree/src/tree-theme.scss +39 -13
  242. package/tree/tree.d.ts +3 -0
  243. package/youtube-player/index.d.ts +1 -0
  244. package/youtube-player/public_api.d.ts +3 -0
  245. package/youtube-player/safe-url.pipe.d.ts +10 -0
  246. package/youtube-player/youtube-player.component.d.ts +23 -0
  247. package/youtube-player/youtube-player.d.ts +6 -0
  248. package/card/card/card.component.d.ts +0 -48
  249. package/card/src/card-theme-variants/basic-card.scss +0 -6
  250. package/card/src/card-theme-variants/linkable-card.scss +0 -16
  251. package/card/src/card-theme-variants/stroked-card.scss +0 -3
  252. package/card/src/card-theme.scss +0 -170
  253. package/media-gallery/media-renderer/media-renderer.component.d.ts +0 -29
  254. package/media-gallery/registry/media-gallery.registry.d.ts +0 -34
  255. package/media-gallery/thumbnail/thumbnail-compat.token.d.ts +0 -1
  256. package/media-gallery/thumbnail/thumbnail-registration.interface.d.ts +0 -9
  257. package/scss/theming/prebuilt/internal-theme.scss +0 -13
  258. package/toast/toast.module.d.ts +0 -19
@@ -1,21 +1,21 @@
1
1
  import * as i1 from '@angular/cdk/layout';
2
2
  import * as i0 from '@angular/core';
3
- import { Injectable, Inject, Directive, HostBinding, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChild, Input, HostListener, NgModule, EventEmitter, Output, Optional, SkipSelf } from '@angular/core';
3
+ import { Injectable, Inject, Directive, HostBinding, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChild, Input, HostListener, EventEmitter, Output, Optional, SkipSelf } from '@angular/core';
4
4
  import * as i2 from '@daffodil/design';
5
- import { DaffBreakpoints, DaffPrefixDirective, DaffArticleEncapsulatedDirective, DaffStatusableDirective, DaffPrefixSuffixModule } from '@daffodil/design';
5
+ import { DaffBreakpoints, DaffPrefixDirective, DaffArticleEncapsulatedDirective, DaffStatusableDirective } from '@daffodil/design';
6
6
  import { createConfigInjectionToken } from '@daffodil/core';
7
7
  import * as i1$2 from '@angular/cdk/overlay';
8
- import { OverlayModule, GlobalPositionStrategy } from '@angular/cdk/overlay';
9
- import { PortalModule, ComponentPortal } from '@angular/cdk/portal';
10
- import { NgIf, CommonModule, NgSwitch, NgFor, NgSwitchCase, NgSwitchDefault, SlicePipe, NgTemplateOutlet } from '@angular/common';
11
- import { FontAwesomeModule, FaIconComponent } from '@fortawesome/angular-fontawesome';
12
- import * as i2$1 from '@daffodil/design/button';
13
- import { DaffButtonModule, DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
14
- import * as i1$1 from '@angular/cdk/a11y';
8
+ import { GlobalPositionStrategy } from '@angular/cdk/overlay';
9
+ import { ComponentPortal } from '@angular/cdk/portal';
15
10
  import { merge, of, EMPTY } from 'rxjs';
16
11
  import { filter, map, tap, delay, take } from 'rxjs/operators';
17
12
  import { trigger, transition, style, animate } from '@angular/animations';
13
+ import { NgIf, NgFor, SlicePipe, NgTemplateOutlet } from '@angular/common';
14
+ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
18
15
  import { faTimes } from '@fortawesome/free-solid-svg-icons';
16
+ import * as i2$1 from '@daffodil/design/button';
17
+ import { DAFF_BUTTON_COMPONENTS } from '@daffodil/design/button';
18
+ import * as i1$1 from '@angular/cdk/a11y';
19
19
 
20
20
  ;
21
21
  ;
@@ -26,11 +26,16 @@ const daffToastDefaultOptions = {
26
26
  },
27
27
  useParent: true,
28
28
  };
29
- const { token: DAFF_TOAST_OPTIONS,
30
- /**
31
- * Provider function for {@link DAFF_TOAST_OPTIONS}.
32
- */
33
- provider: provideDaffToastOptions, } = createConfigInjectionToken(daffToastDefaultOptions, 'DAFF_TOAST_OPTIONS');
29
+ const result = createConfigInjectionToken(daffToastDefaultOptions, 'DAFF_TOAST_OPTIONS');
30
+ const provideDaffToastOptions = result.provider;
31
+ const DAFF_TOAST_OPTIONS = result.token;
32
+ // export const {
33
+ // token: DAFF_TOAST_OPTIONS,
34
+ // /**
35
+ // * Provider function for {@link DAFF_TOAST_OPTIONS}.
36
+ // */
37
+ // provider: provideDaffToastOptions,
38
+ // } = createConfigInjectionToken<DaffToastOptions>(daffToastDefaultOptions, 'DAFF_TOAST_OPTIONS');
34
39
 
35
40
  class DaffToastPositionService {
36
41
  constructor(options, mediaQuery) {
@@ -38,6 +43,9 @@ class DaffToastPositionService {
38
43
  this.mediaQuery = mediaQuery;
39
44
  this._config = options.position;
40
45
  }
46
+ /**
47
+ * Reads the current position of the toast. Defaults to bottom center on mobile devices.
48
+ */
41
49
  get config() {
42
50
  return this.mediaQuery.isMatched(DaffBreakpoints.MOBILE)
43
51
  ? this._position ?? this._config
@@ -46,13 +54,18 @@ class DaffToastPositionService {
46
54
  set config(val) {
47
55
  this._config = val;
48
56
  }
57
+ /**
58
+ * Changes the position of the toast.
59
+ *
60
+ * @param position The position of the toast.
61
+ */
49
62
  setPosition(position) {
50
63
  this._position = position;
51
64
  }
52
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastPositionService, deps: [{ token: DAFF_TOAST_OPTIONS }, { token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable }); }
53
- /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastPositionService }); }
65
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastPositionService, deps: [{ token: DAFF_TOAST_OPTIONS }, { token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable }); }
66
+ /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastPositionService }); }
54
67
  }
55
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastPositionService, decorators: [{
68
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastPositionService, decorators: [{
56
69
  type: Injectable
57
70
  }], ctorParameters: () => [{ type: undefined, decorators: [{
58
71
  type: Inject,
@@ -61,18 +74,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
61
74
 
62
75
  const daffToastChangesFocus = (toast) => toast.actions?.length > 0;
63
76
 
77
+ const createPositionStrategy = (position) => {
78
+ const strat = new GlobalPositionStrategy();
79
+ switch (position.horizontal) {
80
+ case 'left':
81
+ strat.left('48px');
82
+ break;
83
+ case 'right':
84
+ strat.right('48px');
85
+ break;
86
+ case 'center':
87
+ strat.centerHorizontally();
88
+ break;
89
+ default:
90
+ strat.right('48px');
91
+ }
92
+ switch (position.vertical) {
93
+ case 'top':
94
+ strat.top('80px');
95
+ break;
96
+ case 'bottom':
97
+ strat.bottom('48px');
98
+ break;
99
+ default:
100
+ strat.top('80px');
101
+ }
102
+ return strat;
103
+ };
104
+
105
+ const daffDefaultToastConfiguration = {};
106
+
64
107
  class DaffToastActionsDirective {
65
108
  constructor() {
109
+ /**
110
+ * @docs-private
111
+ */
66
112
  this.class = true;
67
113
  }
68
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
69
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: DaffToastActionsDirective, isStandalone: true, selector: "[daffToastActions]", host: { properties: { "class.daff-toast__actions": "this.class" } }, ngImport: i0 }); }
114
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
115
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffToastActionsDirective, isStandalone: true, selector: "[daffToastActions]", host: { properties: { "class.daff-toast__actions": "this.class" } }, ngImport: i0 }); }
70
116
  }
71
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastActionsDirective, decorators: [{
117
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastActionsDirective, decorators: [{
72
118
  type: Directive,
73
119
  args: [{
74
120
  selector: '[daffToastActions]',
75
- standalone: true,
76
121
  }]
77
122
  }], propDecorators: { class: [{
78
123
  type: HostBinding,
@@ -80,6 +125,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
80
125
  }] } });
81
126
 
82
127
  /**
128
+ * @docs-private
129
+ *
83
130
  * DaffToastComponent provides a way to display and
84
131
  * communicate information for user actions or system updates.
85
132
  */
@@ -94,29 +141,40 @@ class DaffToastComponent {
94
141
  this._elementRef = _elementRef;
95
142
  this._focusTrapFactory = _focusTrapFactory;
96
143
  this._focusStack = _focusStack;
97
- /** @docs-private */
144
+ /**
145
+ * @docs-private
146
+ */
98
147
  this.class = true;
99
148
  }
149
+ /**
150
+ * @docs-private
151
+ */
100
152
  ngAfterContentInit() {
101
153
  if (daffToastChangesFocus(this.toast)) {
102
154
  this._focusTrap = this._focusTrapFactory.create(this._elementRef.nativeElement);
103
155
  }
104
156
  }
157
+ /**
158
+ * @docs-private
159
+ */
105
160
  ngAfterViewInit() {
106
161
  if (daffToastChangesFocus(this.toast)) {
107
162
  this._focusStack.push();
108
163
  this._focusTrap.focusFirstTabbableElementWhenReady();
109
164
  }
110
165
  }
166
+ /**
167
+ * @docs-private
168
+ */
111
169
  ngOnDestroy() {
112
170
  if (daffToastChangesFocus(this.toast)) {
113
171
  this._focusTrap.destroy();
114
172
  }
115
173
  }
116
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }, { token: i2.DaffFocusStackService }], target: i0.ɵɵFactoryTarget.Component }); }
117
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DaffToastComponent, isStandalone: true, selector: "daff-toast", inputs: { toast: "toast" }, host: { listeners: { "keydown.escape": "onEscape()" }, properties: { "class.daff-toast": "this.class" } }, queries: [{ propertyName: "_actions", first: true, predicate: DaffToastActionsDirective, descendants: true }, { propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }], hostDirectives: [{ directive: i2.DaffArticleEncapsulatedDirective }, { directive: i2.DaffStatusableDirective, inputs: ["status", "status"] }], ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-toast__details\">\n <div class=\"daff-toast__content\">\n <ng-content select=\"[daffToastTitle]\"></ng-content>\n <ng-content select=\"[daffToastMessage]\"></ng-content>\n </div>\n <ng-content select=\"[daffToastActions]\"></ng-content>\n</div>\n<ng-content></ng-content>\n", styles: [".daff-toast{display:flex;border-radius:.25rem;font-size:1rem;line-height:1.5rem;position:relative;min-width:15rem;max-width:90vw}@media (min-width: 480px){.daff-toast{max-width:22rem}}.daff-toast+div+.daff-toast{margin-top:.75rem}.daff-toast+div+div+.daff-toast{margin-top:.75rem}.daff-toast+.daff-toast{margin-top:.75rem}.daff-toast:before{content:\"\";border-radius:.25rem 0 0 .25rem;position:absolute;height:100%;left:0;top:0;width:.25rem}.daff-toast .daff-prefix{padding:1rem 0 1rem 1rem}.daff-toast__close-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border:none;color:currentColor;margin:0;min-height:3rem;height:3rem;min-width:3rem;width:3rem}.daff-toast__details{display:block;font-size:1rem;line-height:1.5rem;width:100%}.daff-toast__content{display:flex;flex-direction:column;gap:.25rem;padding:1rem}.daff-toast__title{font-weight:600}.daff-toast__message{font-weight:400;line-height:1.25rem}.daff-toast__actions{display:flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1rem 1rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
174
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }, { token: i2.DaffFocusStackService }], target: i0.ɵɵFactoryTarget.Component }); }
175
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffToastComponent, isStandalone: true, selector: "daff-toast", inputs: { toast: "toast" }, host: { listeners: { "keydown.escape": "onEscape()" }, properties: { "class.daff-toast": "this.class" } }, queries: [{ propertyName: "_actions", first: true, predicate: DaffToastActionsDirective, descendants: true }, { propertyName: "_prefix", first: true, predicate: DaffPrefixDirective, descendants: true }], hostDirectives: [{ directive: i2.DaffArticleEncapsulatedDirective }, { directive: i2.DaffStatusableDirective, inputs: ["status", "status"] }], ngImport: i0, template: "<ng-container *ngIf=\"_prefix\">\n <ng-content select=\"[daffPrefix]\"></ng-content>\n</ng-container>\n<div class=\"daff-toast__details\">\n <div class=\"daff-toast__content\">\n <ng-content select=\"[daffToastTitle]\"></ng-content>\n <ng-content select=\"[daffToastMessage]\"></ng-content>\n </div>\n <ng-content select=\"[daffToastActions]\"></ng-content>\n</div>\n<ng-content></ng-content>\n", styles: [".daff-toast{display:flex;border-radius:.25rem;font-size:1rem;line-height:1.5rem;position:relative;min-width:15rem;max-width:90vw}@media (min-width: 480px){.daff-toast{max-width:22rem}}.daff-toast+div+.daff-toast{margin-top:.75rem}.daff-toast+div+div+.daff-toast{margin-top:.75rem}.daff-toast+.daff-toast{margin-top:.75rem}.daff-toast:before{content:\"\";border-radius:.25rem 0 0 .25rem;position:absolute;height:100%;left:0;top:0;width:.25rem}.daff-toast .daff-prefix{padding:1rem 0 1rem 1rem}.daff-toast__close-button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;appearance:none;background:none;border:none;color:currentColor;margin:0;min-height:3rem;height:3rem;min-width:3rem;width:3rem}.daff-toast__details{display:block;font-size:1rem;line-height:1.5rem;width:100%}.daff-toast__content{display:flex;flex-direction:column;gap:.25rem;padding:1rem}.daff-toast__title{font-weight:600}.daff-toast__message{font-weight:400;line-height:1.25rem}.daff-toast__actions{display:flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1rem 1rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
118
176
  }
119
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastComponent, decorators: [{
177
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastComponent, decorators: [{
120
178
  type: Component,
121
179
  args: [{ selector: 'daff-toast', hostDirectives: [
122
180
  { directive: DaffArticleEncapsulatedDirective },
@@ -145,16 +203,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
145
203
 
146
204
  class DaffToastMessageDirective {
147
205
  constructor() {
206
+ /**
207
+ * @docs-private
208
+ */
148
209
  this.class = true;
149
210
  }
150
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
151
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: DaffToastMessageDirective, isStandalone: true, selector: "[daffToastMessage]", host: { properties: { "class.daff-toast__message": "this.class" } }, ngImport: i0 }); }
211
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastMessageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
212
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffToastMessageDirective, isStandalone: true, selector: "[daffToastMessage]", host: { properties: { "class.daff-toast__message": "this.class" } }, ngImport: i0 }); }
152
213
  }
153
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastMessageDirective, decorators: [{
214
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastMessageDirective, decorators: [{
154
215
  type: Directive,
155
216
  args: [{
156
217
  selector: '[daffToastMessage]',
157
- standalone: true,
158
218
  }]
159
219
  }], propDecorators: { class: [{
160
220
  type: HostBinding,
@@ -163,108 +223,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
163
223
 
164
224
  class DaffToastTitleDirective {
165
225
  constructor() {
226
+ /**
227
+ * @docs-private
228
+ */
166
229
  this.class = true;
167
230
  }
168
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
169
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: DaffToastTitleDirective, isStandalone: true, selector: "[daffToastTitle]", host: { properties: { "class.daff-toast__title": "this.class" } }, ngImport: i0 }); }
231
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
232
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffToastTitleDirective, isStandalone: true, selector: "[daffToastTitle]", host: { properties: { "class.daff-toast__title": "this.class" } }, ngImport: i0 }); }
170
233
  }
171
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastTitleDirective, decorators: [{
234
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastTitleDirective, decorators: [{
172
235
  type: Directive,
173
236
  args: [{
174
237
  selector: '[daffToastTitle]',
175
- standalone: true,
176
238
  }]
177
239
  }], propDecorators: { class: [{
178
240
  type: HostBinding,
179
241
  args: ['class.daff-toast__title']
180
242
  }] } });
181
243
 
182
- /**
183
- * @deprecated in favor of {@link provideDaffToast}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
184
- */
185
- class DaffToastModule {
186
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
187
- /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: DaffToastModule, imports: [CommonModule,
188
- DaffPrefixSuffixModule,
189
- DaffButtonModule,
190
- FontAwesomeModule,
191
- PortalModule,
192
- OverlayModule,
193
- DaffToastComponent,
194
- DaffToastActionsDirective,
195
- DaffToastTitleDirective,
196
- DaffToastMessageDirective], exports: [DaffToastComponent,
197
- DaffToastActionsDirective,
198
- DaffToastTitleDirective,
199
- DaffToastMessageDirective,
200
- DaffPrefixSuffixModule] }); }
201
- /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastModule, providers: [
202
- DaffToastPositionService,
203
- ], imports: [CommonModule,
204
- DaffPrefixSuffixModule,
205
- DaffButtonModule,
206
- FontAwesomeModule,
207
- PortalModule,
208
- OverlayModule, DaffPrefixSuffixModule] }); }
209
- }
210
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastModule, decorators: [{
211
- type: NgModule,
212
- args: [{
213
- imports: [
214
- CommonModule,
215
- DaffPrefixSuffixModule,
216
- DaffButtonModule,
217
- FontAwesomeModule,
218
- PortalModule,
219
- OverlayModule,
220
- DaffToastComponent,
221
- DaffToastActionsDirective,
222
- DaffToastTitleDirective,
223
- DaffToastMessageDirective,
224
- ],
225
- exports: [
226
- DaffToastComponent,
227
- DaffToastActionsDirective,
228
- DaffToastTitleDirective,
229
- DaffToastMessageDirective,
230
- DaffPrefixSuffixModule,
231
- ],
232
- providers: [
233
- DaffToastPositionService,
234
- ],
235
- }]
236
- }] });
237
-
238
- const createPositionStrategy = (position) => {
239
- const strat = new GlobalPositionStrategy();
240
- switch (position.horizontal) {
241
- case 'left':
242
- strat.left('48px');
243
- break;
244
- case 'right':
245
- strat.right('48px');
246
- break;
247
- case 'center':
248
- strat.centerHorizontally();
249
- break;
250
- default:
251
- strat.right('48px');
252
- }
253
- switch (position.vertical) {
254
- case 'top':
255
- strat.top('80px');
256
- break;
257
- case 'bottom':
258
- strat.bottom('48px');
259
- break;
260
- default:
261
- strat.top('80px');
262
- }
263
- return strat;
264
- };
265
-
266
- const daffDefaultToastConfiguration = {};
267
-
268
244
  class DaffToastTemplateComponent {
269
245
  constructor(cd, options, toastPosition) {
270
246
  this.cd = cd;
@@ -330,8 +306,8 @@ class DaffToastTemplateComponent {
330
306
  this._items = value;
331
307
  this.cd.markForCheck();
332
308
  }
333
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DAFF_TOAST_OPTIONS }, { token: DaffToastPositionService }], target: i0.ɵɵFactoryTarget.Component }); }
334
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DaffToastTemplateComponent, isStandalone: true, selector: "ng-component", inputs: { items: "items" }, outputs: { closeToast: "closeToast" }, ngImport: i0, template: `
309
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DAFF_TOAST_OPTIONS }, { token: DaffToastPositionService }], target: i0.ɵɵFactoryTarget.Component }); }
310
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: DaffToastTemplateComponent, isStandalone: true, selector: "ng-component", inputs: { items: "items" }, outputs: { closeToast: "closeToast" }, ngImport: i0, template: `
335
311
  <daff-toast
336
312
  *ngFor="let item of items | slice:0:3"
337
313
  [toast]="item"
@@ -343,65 +319,68 @@ class DaffToastTemplateComponent {
343
319
  [attr.aria-describedby]="item.actions ? item.message : undefined">
344
320
  <div daffToastTitle>{{ item.title }}</div>
345
321
  <div daffToastMessage>{{ item.message }}</div>
346
- <div daffToastActions *ngIf="item.actions">
347
- <ng-container *ngFor="let action of item.actions">
348
- <ng-container *ngTemplateOutlet="button;context:{ action, item }"></ng-container>
349
- </ng-container>
350
- </div>
351
- <button daff-icon-button color="theme-contrast"
352
- *ngIf="item.dismissible"
353
- aria-label="close button"
354
- [attr.aria-hidden]="item.actions ? undefined : true"
355
- (click)="onCloseToast(item.dismiss())">
356
- <fa-icon [icon]="faTimes" size="sm" [fixedWidth]="true"></fa-icon>
357
- </button>
322
+ @if (item.actions) {
323
+ <div daffToastActions>
324
+ @for (action of item.actions; track action) {
325
+ <ng-container *ngTemplateOutlet="button;context:{ action, item }"></ng-container>
326
+ }
327
+ </div>
328
+ }
329
+ @if (item.dismissible) {
330
+ <button daff-icon-button color="theme-contrast"
331
+ aria-label="Close"
332
+ [attr.aria-hidden]="item.actions ? undefined : true"
333
+ (click)="onCloseToast(item.dismiss())">
334
+ <fa-icon [icon]="faTimes" [fixedWidth]="true"></fa-icon>
335
+ </button>
336
+ }
358
337
  </daff-toast>
359
338
 
360
339
  <ng-template #button let-action="action" let-item="item">
361
- <ng-container [ngSwitch]="action.type">
362
- <button type="button" *ngSwitchDefault daff-button
363
- [status]="action.status"
364
- [color]="action.color"
365
- [size]="action.size"
366
- [attr.aria-label]="action.content"
367
- (click)="action.eventEmitter?.emit({ event: $event, action})">
368
- {{ action.content }}
369
- </button>
370
- <button type="button" *ngSwitchCase="'stroked'" daff-stroked-button
371
- [status]="action.status"
372
- [color]="action.color"
373
- [size]="action.size"
374
- [attr.aria-label]="action.content"
375
- (click)="action.eventEmitter?.emit({ event: $event, action})">
376
- {{ action.content }}
377
- </button>
378
- <button type="button" *ngSwitchCase="'raised'" daff-raised-button
379
- [status]="action.status"
380
- [color]="action.color"
381
- [size]="action.size"
382
- [attr.aria-label]="action.content"
383
- (click)="action.eventEmitter?.emit({ event: $event, action})">
384
- {{ action.content }}
385
- </button>
386
- <button type="button" *ngSwitchCase="'flat'" daff-flat-button
387
- [status]="action.status"
388
- [color]="action.color"
389
- [size]="action.size"
390
- [attr.aria-label]="action.content"
391
- (click)="action.eventEmitter?.emit({ event: $event, action})">
392
- {{ action.content }}
393
- </button>
394
- <button type="button" *ngSwitchCase="'underline'" daff-underline-button
395
- [status]="action.status"
396
- [color]="action.color"
397
- [size]="action.size"
398
- [attr.aria-label]="action.content"
399
- (click)="action.eventEmitter?.emit({ event: $event, action})">
400
- {{ action.content }}
401
- </button>
402
- </ng-container>
340
+ @switch (action.type) {
341
+ @case ('stroked') {
342
+ <button type="button" daff-stroked-button
343
+ [status]="action.status"
344
+ [color]="action.color"
345
+ [size]="action.size"
346
+ [attr.aria-label]="action.content"
347
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
348
+ {{ action.content }}
349
+ </button>
350
+ }
351
+ @case ('flat') {
352
+ <button type="button" daff-flat-button
353
+ [status]="action.status"
354
+ [color]="action.color"
355
+ [size]="action.size"
356
+ [attr.aria-label]="action.content"
357
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
358
+ {{ action.content }}
359
+ </button>
360
+ }
361
+ @case ('underline') {
362
+ <button type="button" daff-underline-button
363
+ [status]="action.status"
364
+ [color]="action.color"
365
+ [size]="action.size"
366
+ [attr.aria-label]="action.content"
367
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
368
+ {{ action.content }}
369
+ </button>
370
+ }
371
+ @default {
372
+ <button type="button" daff-button
373
+ [status]="action.status"
374
+ [color]="action.color"
375
+ [size]="action.size"
376
+ [attr.aria-label]="action.content"
377
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
378
+ {{ action.content }}
379
+ </button>
380
+ }
381
+ }
403
382
  </ng-template>
404
- `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DaffButtonComponent, selector: "button[daff-button],a[daff-button]" }, { kind: "ngmodule", type: i2.DaffPrefixSuffixModule }, { kind: "component", type: i2$1.DaffFlatButtonComponent, selector: "button[daff-flat-button],a[daff-flat-button]" }, { kind: "component", type: i2$1.DaffIconButtonComponent, selector: "button[daff-icon-button],a[daff-icon-button]" }, { kind: "component", type: i2$1.DaffRaisedButtonComponent, selector: "button[daff-raised-button],a[daff-raised-button]" }, { kind: "component", type: i2$1.DaffStrokedButtonComponent, selector: "button[daff-stroked-button],a[daff-stroked-button]" }, { kind: "component", type: i2$1.DaffUnderlineButtonComponent, selector: "button[daff-underline-button],a[daff-underline-button]" }, { kind: "component", type: DaffToastComponent, selector: "daff-toast", inputs: ["toast"] }, { kind: "directive", type: DaffToastActionsDirective, selector: "[daffToastActions]" }, { kind: "directive", type: DaffToastTitleDirective, selector: "[daffToastTitle]" }, { kind: "directive", type: DaffToastMessageDirective, selector: "[daffToastMessage]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
383
+ `, isInline: true, dependencies: [{ kind: "component", type: i2$1.DaffButtonComponent, selector: "button[daff-button],a[daff-button]", inputs: ["elevated"] }, { kind: "component", type: i2$1.DaffFlatButtonComponent, selector: "button[daff-flat-button],a[daff-flat-button]" }, { kind: "component", type: i2$1.DaffIconButtonComponent, selector: "button[daff-icon-button],a[daff-icon-button]" }, { kind: "component", type: i2$1.DaffStrokedButtonComponent, selector: "button[daff-stroked-button],a[daff-stroked-button]", inputs: ["elevated"] }, { kind: "component", type: i2$1.DaffUnderlineButtonComponent, selector: "button[daff-underline-button],a[daff-underline-button]" }, { kind: "component", type: DaffToastComponent, selector: "daff-toast", inputs: ["toast"] }, { kind: "directive", type: DaffToastActionsDirective, selector: "[daffToastActions]" }, { kind: "directive", type: DaffToastTitleDirective, selector: "[daffToastTitle]" }, { kind: "directive", type: DaffToastMessageDirective, selector: "[daffToastMessage]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
405
384
  trigger('slideIn', [
406
385
  transition(':enter', [
407
386
  style({ opacity: '0', transform: 'translate({{startX}}, {{startY}})' }),
@@ -415,7 +394,7 @@ class DaffToastTemplateComponent {
415
394
  ]),
416
395
  ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
417
396
  }
418
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastTemplateComponent, decorators: [{
397
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastTemplateComponent, decorators: [{
419
398
  type: Component,
420
399
  args: [{
421
400
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -431,63 +410,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
431
410
  [attr.aria-describedby]="item.actions ? item.message : undefined">
432
411
  <div daffToastTitle>{{ item.title }}</div>
433
412
  <div daffToastMessage>{{ item.message }}</div>
434
- <div daffToastActions *ngIf="item.actions">
435
- <ng-container *ngFor="let action of item.actions">
436
- <ng-container *ngTemplateOutlet="button;context:{ action, item }"></ng-container>
437
- </ng-container>
438
- </div>
439
- <button daff-icon-button color="theme-contrast"
440
- *ngIf="item.dismissible"
441
- aria-label="close button"
442
- [attr.aria-hidden]="item.actions ? undefined : true"
443
- (click)="onCloseToast(item.dismiss())">
444
- <fa-icon [icon]="faTimes" size="sm" [fixedWidth]="true"></fa-icon>
445
- </button>
413
+ @if (item.actions) {
414
+ <div daffToastActions>
415
+ @for (action of item.actions; track action) {
416
+ <ng-container *ngTemplateOutlet="button;context:{ action, item }"></ng-container>
417
+ }
418
+ </div>
419
+ }
420
+ @if (item.dismissible) {
421
+ <button daff-icon-button color="theme-contrast"
422
+ aria-label="Close"
423
+ [attr.aria-hidden]="item.actions ? undefined : true"
424
+ (click)="onCloseToast(item.dismiss())">
425
+ <fa-icon [icon]="faTimes" [fixedWidth]="true"></fa-icon>
426
+ </button>
427
+ }
446
428
  </daff-toast>
447
429
 
448
430
  <ng-template #button let-action="action" let-item="item">
449
- <ng-container [ngSwitch]="action.type">
450
- <button type="button" *ngSwitchDefault daff-button
451
- [status]="action.status"
452
- [color]="action.color"
453
- [size]="action.size"
454
- [attr.aria-label]="action.content"
455
- (click)="action.eventEmitter?.emit({ event: $event, action})">
456
- {{ action.content }}
457
- </button>
458
- <button type="button" *ngSwitchCase="'stroked'" daff-stroked-button
459
- [status]="action.status"
460
- [color]="action.color"
461
- [size]="action.size"
462
- [attr.aria-label]="action.content"
463
- (click)="action.eventEmitter?.emit({ event: $event, action})">
464
- {{ action.content }}
465
- </button>
466
- <button type="button" *ngSwitchCase="'raised'" daff-raised-button
467
- [status]="action.status"
468
- [color]="action.color"
469
- [size]="action.size"
470
- [attr.aria-label]="action.content"
471
- (click)="action.eventEmitter?.emit({ event: $event, action})">
472
- {{ action.content }}
473
- </button>
474
- <button type="button" *ngSwitchCase="'flat'" daff-flat-button
475
- [status]="action.status"
476
- [color]="action.color"
477
- [size]="action.size"
478
- [attr.aria-label]="action.content"
479
- (click)="action.eventEmitter?.emit({ event: $event, action})">
480
- {{ action.content }}
481
- </button>
482
- <button type="button" *ngSwitchCase="'underline'" daff-underline-button
483
- [status]="action.status"
484
- [color]="action.color"
485
- [size]="action.size"
486
- [attr.aria-label]="action.content"
487
- (click)="action.eventEmitter?.emit({ event: $event, action})">
488
- {{ action.content }}
489
- </button>
490
- </ng-container>
431
+ @switch (action.type) {
432
+ @case ('stroked') {
433
+ <button type="button" daff-stroked-button
434
+ [status]="action.status"
435
+ [color]="action.color"
436
+ [size]="action.size"
437
+ [attr.aria-label]="action.content"
438
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
439
+ {{ action.content }}
440
+ </button>
441
+ }
442
+ @case ('flat') {
443
+ <button type="button" daff-flat-button
444
+ [status]="action.status"
445
+ [color]="action.color"
446
+ [size]="action.size"
447
+ [attr.aria-label]="action.content"
448
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
449
+ {{ action.content }}
450
+ </button>
451
+ }
452
+ @case ('underline') {
453
+ <button type="button" daff-underline-button
454
+ [status]="action.status"
455
+ [color]="action.color"
456
+ [size]="action.size"
457
+ [attr.aria-label]="action.content"
458
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
459
+ {{ action.content }}
460
+ </button>
461
+ }
462
+ @default {
463
+ <button type="button" daff-button
464
+ [status]="action.status"
465
+ [color]="action.color"
466
+ [size]="action.size"
467
+ [attr.aria-label]="action.content"
468
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
469
+ {{ action.content }}
470
+ </button>
471
+ }
472
+ }
491
473
  </ng-template>
492
474
  `,
493
475
  animations: [
@@ -510,11 +492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
510
492
  DaffToastTitleDirective,
511
493
  DaffToastMessageDirective,
512
494
  FaIconComponent,
513
- NgSwitch,
514
495
  NgFor,
515
- NgSwitchCase,
516
- NgSwitchDefault,
517
- NgIf,
518
496
  SlicePipe,
519
497
  NgTemplateOutlet,
520
498
  ],
@@ -528,6 +506,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
528
506
  type: Input
529
507
  }] } });
530
508
 
509
+ /**
510
+ * Service to display toasts.
511
+ *
512
+ * @example
513
+ * ```ts
514
+ * import {
515
+ * ChangeDetectionStrategy,
516
+ * Component,
517
+ * EventEmitter,
518
+ * OnInit,
519
+ * } from '@angular/core';
520
+ *
521
+ * import {
522
+ * DaffToast,
523
+ * DaffToastAction,
524
+ * DaffToastService,
525
+ * } from '@daffodil/design/toast';
526
+ *
527
+ * @Component({
528
+ * selector: 'default-toast',
529
+ * templateUrl: './default-toast.component.html',
530
+ * styles: [],
531
+ * changeDetection: ChangeDetectionStrategy.OnPush,
532
+ * })
533
+ * export class DefaultToastComponent implements OnInit {
534
+ * private toast: DaffToast;
535
+ *
536
+ * constructor(private toastService: DaffToastService) {}
537
+ *
538
+ * closeToast = new EventEmitter<DaffToastAction>();
539
+ *
540
+ * open() {
541
+ * this.toast = this.toastService.open({
542
+ * title: 'Update Available',
543
+ * message: 'A new version of this page is available.',
544
+ * actions: [
545
+ * { content: 'Remind me later', type: 'flat', size: 'sm', eventEmitter: this.closeToast },
546
+ * ],
547
+ * });
548
+ * }
549
+ *
550
+ * ngOnInit() {
551
+ * this.closeToast.subscribe(() => {
552
+ * this.toastService.close(this.toast);
553
+ * });
554
+ * }
555
+ * }
556
+ * ```
557
+ */
531
558
  class DaffToastService {
532
559
  constructor(overlay, options, _parentToast, mediaQuery, toastPosition, focusStack, injector) {
533
560
  this.overlay = overlay;
@@ -540,6 +567,9 @@ class DaffToastService {
540
567
  this._toasts = [];
541
568
  this._sub = this.mediaQuery.observe(DaffBreakpoints.MOBILE).pipe(filter(() => this._overlayRef !== undefined), map((position) => createPositionStrategy(this.toastPosition.config)), tap((strategy) => this._overlayRef.updatePositionStrategy(strategy))).subscribe();
542
569
  }
570
+ /**
571
+ * @docs-private
572
+ */
543
573
  ngOnDestroy() {
544
574
  this._sub.unsubscribe();
545
575
  }
@@ -554,6 +584,12 @@ class DaffToastService {
554
584
  positionStrategy: createPositionStrategy(this.toastPosition.config),
555
585
  });
556
586
  }
587
+ /**
588
+ * Opens the toast.
589
+ *
590
+ * @param toast Data that can be shown on a toast.
591
+ * @param configuration Additional configuration options such as duration. The default duration is set to 5000ms.
592
+ */
557
593
  open(toast, configuration) {
558
594
  if (this._parentToast && this.options.useParent) {
559
595
  return this._parentToast.open(toast, configuration);
@@ -587,6 +623,11 @@ class DaffToastService {
587
623
  this._template.instance.items = this._toasts;
588
624
  return _toastPlus;
589
625
  }
626
+ /**
627
+ * Closes the toast.
628
+ *
629
+ * @param toast The instance of toast that you wish to close.
630
+ */
590
631
  close(toast) {
591
632
  if (this._parentToast && this.options.useParent) {
592
633
  this._parentToast.close(toast);
@@ -611,10 +652,10 @@ class DaffToastService {
611
652
  this._template = undefined;
612
653
  }
613
654
  }
614
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastService, deps: [{ token: i1$2.Overlay }, { token: DAFF_TOAST_OPTIONS }, { token: DaffToastService, optional: true, skipSelf: true }, { token: i1.BreakpointObserver }, { token: DaffToastPositionService }, { token: i2.DaffFocusStackService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
615
- /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastService }); }
655
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastService, deps: [{ token: i1$2.Overlay }, { token: DAFF_TOAST_OPTIONS }, { token: DaffToastService, optional: true, skipSelf: true }, { token: i1.BreakpointObserver }, { token: DaffToastPositionService }, { token: i2.DaffFocusStackService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
656
+ /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastService }); }
616
657
  }
617
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastService, decorators: [{
658
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastService, decorators: [{
618
659
  type: Injectable
619
660
  }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: undefined, decorators: [{
620
661
  type: Inject,
@@ -625,6 +666,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
625
666
  type: SkipSelf
626
667
  }] }, { type: i1.BreakpointObserver }, { type: DaffToastPositionService }, { type: i2.DaffFocusStackService }, { type: i0.Injector }] });
627
668
 
669
+ /**
670
+ * Registers the `DaffToastService` and `DaffToastPositionService` for displaying a toast. This provider ensures
671
+ * toasts function correctly within your application.
672
+ *
673
+ * ```ts
674
+ * import { provideDaffToast } from '@daffodil/design/toast';
675
+ *
676
+ * @NgModule({
677
+ * providers: [
678
+ * provideDaffToast(),
679
+ * ]
680
+ * )}
681
+ *
682
+ * export class AppModule {}
683
+ * ```
684
+ */
628
685
  const provideDaffToast = () => [
629
686
  DaffToastService,
630
687
  DaffToastPositionService,
@@ -634,5 +691,5 @@ const provideDaffToast = () => [
634
691
  * Generated bundle index. Do not edit.
635
692
  */
636
693
 
637
- export { DAFF_TOAST_OPTIONS, DaffToastActionsDirective, DaffToastComponent, DaffToastMessageDirective, DaffToastModule, DaffToastPositionService, DaffToastService, DaffToastTitleDirective, provideDaffToast, provideDaffToastOptions };
694
+ export { DAFF_TOAST_OPTIONS, DaffToastPositionService, DaffToastService, provideDaffToast, provideDaffToastOptions };
638
695
  //# sourceMappingURL=daffodil-design-toast.mjs.map