@daffodil/design 0.81.1 → 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
@@ -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
- 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';
7
+ import * as i1$3 from '@angular/cdk/overlay';
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 i1$2 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,112 +223,27 @@ 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
- constructor(cd, options, toastPosition) {
245
+ constructor(cd, toastPosition) {
270
246
  this.cd = cd;
271
- this.options = options;
272
247
  this.toastPosition = toastPosition;
273
248
  this.faTimes = faTimes;
274
249
  this._items = [];
@@ -330,8 +305,8 @@ class DaffToastTemplateComponent {
330
305
  this._items = value;
331
306
  this.cd.markForCheck();
332
307
  }
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: `
308
+ /** @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 }], target: i0.ɵɵFactoryTarget.Component }); }
309
+ /** @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
310
  <daff-toast
336
311
  *ngFor="let item of items | slice:0:3"
337
312
  [toast]="item"
@@ -343,65 +318,68 @@ class DaffToastTemplateComponent {
343
318
  [attr.aria-describedby]="item.actions ? item.message : undefined">
344
319
  <div daffToastTitle>{{ item.title }}</div>
345
320
  <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>
321
+ @if (item.actions) {
322
+ <div daffToastActions>
323
+ @for (action of item.actions; track action) {
324
+ <ng-container *ngTemplateOutlet="button;context:{ action, item }"></ng-container>
325
+ }
326
+ </div>
327
+ }
328
+ @if (item.dismissible) {
329
+ <button daff-icon-button color="theme-contrast"
330
+ aria-label="close button"
331
+ [attr.aria-hidden]="item.actions ? undefined : true"
332
+ (click)="onCloseToast(item.dismiss())">
333
+ <fa-icon [icon]="faTimes" size="sm" [fixedWidth]="true"></fa-icon>
334
+ </button>
335
+ }
358
336
  </daff-toast>
359
337
 
360
338
  <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>
339
+ @switch (action.type) {
340
+ @case ('stroked') {
341
+ <button type="button" daff-stroked-button
342
+ [status]="action.status"
343
+ [color]="action.color"
344
+ [size]="action.size"
345
+ [attr.aria-label]="action.content"
346
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
347
+ {{ action.content }}
348
+ </button>
349
+ }
350
+ @case ('flat') {
351
+ <button type="button" daff-flat-button
352
+ [status]="action.status"
353
+ [color]="action.color"
354
+ [size]="action.size"
355
+ [attr.aria-label]="action.content"
356
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
357
+ {{ action.content }}
358
+ </button>
359
+ }
360
+ @case ('underline') {
361
+ <button type="button" daff-underline-button
362
+ [status]="action.status"
363
+ [color]="action.color"
364
+ [size]="action.size"
365
+ [attr.aria-label]="action.content"
366
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
367
+ {{ action.content }}
368
+ </button>
369
+ }
370
+ @default {
371
+ <button type="button" daff-button
372
+ [status]="action.status"
373
+ [color]="action.color"
374
+ [size]="action.size"
375
+ [attr.aria-label]="action.content"
376
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
377
+ {{ action.content }}
378
+ </button>
379
+ }
380
+ }
403
381
  </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: [
382
+ `, isInline: true, dependencies: [{ kind: "component", type: i1$2.DaffButtonComponent, selector: "button[daff-button],a[daff-button]", inputs: ["elevated"] }, { kind: "component", type: i1$2.DaffFlatButtonComponent, selector: "button[daff-flat-button],a[daff-flat-button]" }, { kind: "component", type: i1$2.DaffIconButtonComponent, selector: "button[daff-icon-button],a[daff-icon-button]" }, { kind: "component", type: i1$2.DaffStrokedButtonComponent, selector: "button[daff-stroked-button],a[daff-stroked-button]", inputs: ["elevated"] }, { kind: "component", type: i1$2.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
383
  trigger('slideIn', [
406
384
  transition(':enter', [
407
385
  style({ opacity: '0', transform: 'translate({{startX}}, {{startY}})' }),
@@ -415,7 +393,7 @@ class DaffToastTemplateComponent {
415
393
  ]),
416
394
  ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
417
395
  }
418
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastTemplateComponent, decorators: [{
396
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastTemplateComponent, decorators: [{
419
397
  type: Component,
420
398
  args: [{
421
399
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -431,63 +409,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
431
409
  [attr.aria-describedby]="item.actions ? item.message : undefined">
432
410
  <div daffToastTitle>{{ item.title }}</div>
433
411
  <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>
412
+ @if (item.actions) {
413
+ <div daffToastActions>
414
+ @for (action of item.actions; track action) {
415
+ <ng-container *ngTemplateOutlet="button;context:{ action, item }"></ng-container>
416
+ }
417
+ </div>
418
+ }
419
+ @if (item.dismissible) {
420
+ <button daff-icon-button color="theme-contrast"
421
+ aria-label="close button"
422
+ [attr.aria-hidden]="item.actions ? undefined : true"
423
+ (click)="onCloseToast(item.dismiss())">
424
+ <fa-icon [icon]="faTimes" size="sm" [fixedWidth]="true"></fa-icon>
425
+ </button>
426
+ }
446
427
  </daff-toast>
447
428
 
448
429
  <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>
430
+ @switch (action.type) {
431
+ @case ('stroked') {
432
+ <button type="button" daff-stroked-button
433
+ [status]="action.status"
434
+ [color]="action.color"
435
+ [size]="action.size"
436
+ [attr.aria-label]="action.content"
437
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
438
+ {{ action.content }}
439
+ </button>
440
+ }
441
+ @case ('flat') {
442
+ <button type="button" daff-flat-button
443
+ [status]="action.status"
444
+ [color]="action.color"
445
+ [size]="action.size"
446
+ [attr.aria-label]="action.content"
447
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
448
+ {{ action.content }}
449
+ </button>
450
+ }
451
+ @case ('underline') {
452
+ <button type="button" daff-underline-button
453
+ [status]="action.status"
454
+ [color]="action.color"
455
+ [size]="action.size"
456
+ [attr.aria-label]="action.content"
457
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
458
+ {{ action.content }}
459
+ </button>
460
+ }
461
+ @default {
462
+ <button type="button" daff-button
463
+ [status]="action.status"
464
+ [color]="action.color"
465
+ [size]="action.size"
466
+ [attr.aria-label]="action.content"
467
+ (click)="action.eventEmitter?.emit({ event: $event, action})">
468
+ {{ action.content }}
469
+ </button>
470
+ }
471
+ }
491
472
  </ng-template>
492
473
  `,
493
474
  animations: [
@@ -510,24 +491,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
510
491
  DaffToastTitleDirective,
511
492
  DaffToastMessageDirective,
512
493
  FaIconComponent,
513
- NgSwitch,
514
494
  NgFor,
515
- NgSwitchCase,
516
- NgSwitchDefault,
517
- NgIf,
518
495
  SlicePipe,
519
496
  NgTemplateOutlet,
520
497
  ],
521
498
  }]
522
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
499
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: DaffToastPositionService, decorators: [{
523
500
  type: Inject,
524
501
  args: [DAFF_TOAST_OPTIONS]
525
- }] }, { type: DaffToastPositionService }], propDecorators: { closeToast: [{
502
+ }] }], propDecorators: { closeToast: [{
526
503
  type: Output
527
504
  }], items: [{
528
505
  type: Input
529
506
  }] } });
530
507
 
508
+ /**
509
+ * Service to display toasts.
510
+ *
511
+ * @example
512
+ * ```ts
513
+ * import {
514
+ * ChangeDetectionStrategy,
515
+ * Component,
516
+ * EventEmitter,
517
+ * OnInit,
518
+ * } from '@angular/core';
519
+ *
520
+ * import {
521
+ * DaffToast,
522
+ * DaffToastAction,
523
+ * DaffToastService,
524
+ * } from '@daffodil/design/toast';
525
+ *
526
+ * @Component({
527
+ * selector: 'default-toast',
528
+ * templateUrl: './default-toast.component.html',
529
+ * styles: [],
530
+ * changeDetection: ChangeDetectionStrategy.OnPush,
531
+ * })
532
+ * export class DefaultToastComponent implements OnInit {
533
+ * private toast: DaffToast;
534
+ *
535
+ * constructor(private toastService: DaffToastService) {}
536
+ *
537
+ * closeToast = new EventEmitter<DaffToastAction>();
538
+ *
539
+ * open() {
540
+ * this.toast = this.toastService.open({
541
+ * title: 'Update Available',
542
+ * message: 'A new version of this page is available.',
543
+ * actions: [
544
+ * { content: 'Remind me later', type: 'flat', size: 'sm', eventEmitter: this.closeToast },
545
+ * ],
546
+ * });
547
+ * }
548
+ *
549
+ * ngOnInit() {
550
+ * this.closeToast.subscribe(() => {
551
+ * this.toastService.close(this.toast);
552
+ * });
553
+ * }
554
+ * }
555
+ * ```
556
+ */
531
557
  class DaffToastService {
532
558
  constructor(overlay, options, _parentToast, mediaQuery, toastPosition, focusStack, injector) {
533
559
  this.overlay = overlay;
@@ -540,6 +566,9 @@ class DaffToastService {
540
566
  this._toasts = [];
541
567
  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
568
  }
569
+ /**
570
+ * @docs-private
571
+ */
543
572
  ngOnDestroy() {
544
573
  this._sub.unsubscribe();
545
574
  }
@@ -554,6 +583,12 @@ class DaffToastService {
554
583
  positionStrategy: createPositionStrategy(this.toastPosition.config),
555
584
  });
556
585
  }
586
+ /**
587
+ * Opens the toast.
588
+ *
589
+ * @param toast Data that can be shown on a toast.
590
+ * @param configuration Additional configuration options such as duration. The default duration is set to 5000ms.
591
+ */
557
592
  open(toast, configuration) {
558
593
  if (this._parentToast && this.options.useParent) {
559
594
  return this._parentToast.open(toast, configuration);
@@ -587,6 +622,11 @@ class DaffToastService {
587
622
  this._template.instance.items = this._toasts;
588
623
  return _toastPlus;
589
624
  }
625
+ /**
626
+ * Closes the toast.
627
+ *
628
+ * @param toast The instance of toast that you wish to close.
629
+ */
590
630
  close(toast) {
591
631
  if (this._parentToast && this.options.useParent) {
592
632
  this._parentToast.close(toast);
@@ -611,12 +651,12 @@ class DaffToastService {
611
651
  this._template = undefined;
612
652
  }
613
653
  }
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 }); }
654
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastService, deps: [{ token: i1$3.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 }); }
655
+ /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastService }); }
616
656
  }
617
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffToastService, decorators: [{
657
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffToastService, decorators: [{
618
658
  type: Injectable
619
- }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: undefined, decorators: [{
659
+ }], ctorParameters: () => [{ type: i1$3.Overlay }, { type: undefined, decorators: [{
620
660
  type: Inject,
621
661
  args: [DAFF_TOAST_OPTIONS]
622
662
  }] }, { type: DaffToastService, decorators: [{
@@ -625,6 +665,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
625
665
  type: SkipSelf
626
666
  }] }, { type: i1.BreakpointObserver }, { type: DaffToastPositionService }, { type: i2.DaffFocusStackService }, { type: i0.Injector }] });
627
667
 
668
+ /**
669
+ * Registers the `DaffToastService` and `DaffToastPositionService` for displaying a toast. This provider ensures
670
+ * toasts function correctly within your application.
671
+ *
672
+ * ```ts
673
+ * import { provideDaffToast } from '@daffodil/design/toast';
674
+ *
675
+ * @NgModule({
676
+ * providers: [
677
+ * provideDaffToast(),
678
+ * ]
679
+ * )}
680
+ *
681
+ * export class AppModule {}
682
+ * ```
683
+ */
628
684
  const provideDaffToast = () => [
629
685
  DaffToastService,
630
686
  DaffToastPositionService,
@@ -634,5 +690,5 @@ const provideDaffToast = () => [
634
690
  * Generated bundle index. Do not edit.
635
691
  */
636
692
 
637
- export { DAFF_TOAST_OPTIONS, DaffToastActionsDirective, DaffToastComponent, DaffToastMessageDirective, DaffToastModule, DaffToastPositionService, DaffToastService, DaffToastTitleDirective, provideDaffToast, provideDaffToastOptions };
693
+ export { DAFF_TOAST_OPTIONS, DaffToastPositionService, DaffToastService, provideDaffToast, provideDaffToastOptions };
638
694
  //# sourceMappingURL=daffodil-design-toast.mjs.map