@acorex/components 21.0.1-next.12 → 21.0.1-next.13

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 (231) hide show
  1. package/accordion/index.d.ts +0 -1
  2. package/action-sheet/index.d.ts +19 -41
  3. package/button-group/index.d.ts +6 -4
  4. package/chips/index.d.ts +3 -8
  5. package/collapse/index.d.ts +4 -6
  6. package/conversation2/README.md +31 -71
  7. package/conversation2/index.d.ts +35 -36
  8. package/data-table/index.d.ts +4 -253
  9. package/dialog/index.d.ts +15 -19
  10. package/dropdown/index.d.ts +4 -3
  11. package/fesm2022/acorex-components-accordion.mjs +8 -13
  12. package/fesm2022/acorex-components-accordion.mjs.map +1 -1
  13. package/fesm2022/acorex-components-action-sheet.mjs +93 -141
  14. package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
  15. package/fesm2022/acorex-components-alert.mjs +6 -6
  16. package/fesm2022/acorex-components-alert.mjs.map +1 -1
  17. package/fesm2022/acorex-components-aspect-ratio.mjs.map +1 -1
  18. package/fesm2022/acorex-components-audio-wave.mjs +5 -4
  19. package/fesm2022/acorex-components-audio-wave.mjs.map +1 -1
  20. package/fesm2022/acorex-components-autocomplete.mjs.map +1 -1
  21. package/fesm2022/acorex-components-avatar.mjs +3 -3
  22. package/fesm2022/acorex-components-avatar.mjs.map +1 -1
  23. package/fesm2022/acorex-components-badge.mjs +3 -3
  24. package/fesm2022/acorex-components-badge.mjs.map +1 -1
  25. package/fesm2022/acorex-components-bottom-navigation.mjs +2 -2
  26. package/fesm2022/acorex-components-bottom-navigation.mjs.map +1 -1
  27. package/fesm2022/acorex-components-breadcrumbs.mjs +2 -2
  28. package/fesm2022/acorex-components-breadcrumbs.mjs.map +1 -1
  29. package/fesm2022/acorex-components-button-group.mjs +15 -11
  30. package/fesm2022/acorex-components-button-group.mjs.map +1 -1
  31. package/fesm2022/acorex-components-button.mjs +5 -5
  32. package/fesm2022/acorex-components-button.mjs.map +1 -1
  33. package/fesm2022/acorex-components-calendar.mjs +4 -4
  34. package/fesm2022/acorex-components-calendar.mjs.map +1 -1
  35. package/fesm2022/acorex-components-check-box.mjs +3 -3
  36. package/fesm2022/acorex-components-check-box.mjs.map +1 -1
  37. package/fesm2022/acorex-components-chips.mjs +6 -8
  38. package/fesm2022/acorex-components-chips.mjs.map +1 -1
  39. package/fesm2022/acorex-components-circular-progress.mjs +6 -4
  40. package/fesm2022/acorex-components-circular-progress.mjs.map +1 -1
  41. package/fesm2022/acorex-components-code-editor.mjs.map +1 -1
  42. package/fesm2022/acorex-components-collapse.mjs +13 -10
  43. package/fesm2022/acorex-components-collapse.mjs.map +1 -1
  44. package/fesm2022/acorex-components-color-box.mjs +2 -2
  45. package/fesm2022/acorex-components-color-box.mjs.map +1 -1
  46. package/fesm2022/acorex-components-color-palette.mjs +2 -2
  47. package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
  48. package/fesm2022/acorex-components-command.mjs +2 -2
  49. package/fesm2022/acorex-components-command.mjs.map +1 -1
  50. package/fesm2022/acorex-components-comment.mjs +8 -8
  51. package/fesm2022/acorex-components-comment.mjs.map +1 -1
  52. package/fesm2022/acorex-components-conversation.mjs +2 -2
  53. package/fesm2022/acorex-components-conversation.mjs.map +1 -1
  54. package/fesm2022/acorex-components-conversation2.mjs +155 -161
  55. package/fesm2022/acorex-components-conversation2.mjs.map +1 -1
  56. package/fesm2022/acorex-components-cron-job.mjs.map +1 -1
  57. package/fesm2022/acorex-components-data-list.mjs.map +1 -1
  58. package/fesm2022/acorex-components-data-pager.mjs +2 -2
  59. package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
  60. package/fesm2022/acorex-components-data-table.mjs +16 -452
  61. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  62. package/fesm2022/acorex-components-datetime-box.mjs +2 -2
  63. package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
  64. package/fesm2022/acorex-components-datetime-input.mjs +2 -2
  65. package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
  66. package/fesm2022/acorex-components-datetime-picker.mjs +10 -12
  67. package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
  68. package/fesm2022/acorex-components-decorators.mjs +20 -13
  69. package/fesm2022/acorex-components-decorators.mjs.map +1 -1
  70. package/fesm2022/acorex-components-dialog.mjs +47 -67
  71. package/fesm2022/acorex-components-dialog.mjs.map +1 -1
  72. package/fesm2022/acorex-components-drawer-legacy.mjs.map +1 -1
  73. package/fesm2022/acorex-components-drawer.mjs +6 -7
  74. package/fesm2022/acorex-components-drawer.mjs.map +1 -1
  75. package/fesm2022/acorex-components-dropdown-button.mjs +2 -2
  76. package/fesm2022/acorex-components-dropdown-button.mjs.map +1 -1
  77. package/fesm2022/acorex-components-dropdown.mjs +13 -12
  78. package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
  79. package/fesm2022/acorex-components-editor.mjs +4 -4
  80. package/fesm2022/acorex-components-editor.mjs.map +1 -1
  81. package/fesm2022/acorex-components-file-explorer.mjs.map +1 -1
  82. package/fesm2022/acorex-components-flow-chart.mjs.map +1 -1
  83. package/fesm2022/acorex-components-form.mjs +17 -9
  84. package/fesm2022/acorex-components-form.mjs.map +1 -1
  85. package/fesm2022/acorex-components-grid-layout-builder.mjs +4 -5
  86. package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
  87. package/fesm2022/acorex-components-image-editor.mjs +18 -18
  88. package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
  89. package/fesm2022/acorex-components-image.mjs +2 -2
  90. package/fesm2022/acorex-components-image.mjs.map +1 -1
  91. package/fesm2022/acorex-components-json-viewer.mjs +2 -2
  92. package/fesm2022/acorex-components-json-viewer.mjs.map +1 -1
  93. package/fesm2022/acorex-components-kanban.mjs +6 -4
  94. package/fesm2022/acorex-components-kanban.mjs.map +1 -1
  95. package/fesm2022/acorex-components-kbd.mjs +25 -7
  96. package/fesm2022/acorex-components-kbd.mjs.map +1 -1
  97. package/fesm2022/acorex-components-label.mjs +2 -2
  98. package/fesm2022/acorex-components-label.mjs.map +1 -1
  99. package/fesm2022/acorex-components-list.mjs +2 -2
  100. package/fesm2022/acorex-components-list.mjs.map +1 -1
  101. package/fesm2022/acorex-components-loading-dialog.mjs +36 -73
  102. package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
  103. package/fesm2022/acorex-components-loading.mjs +8 -8
  104. package/fesm2022/acorex-components-loading.mjs.map +1 -1
  105. package/fesm2022/acorex-components-map.mjs +2 -2
  106. package/fesm2022/acorex-components-map.mjs.map +1 -1
  107. package/fesm2022/acorex-components-media-viewer.mjs +10 -10
  108. package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
  109. package/fesm2022/acorex-components-menu.mjs +6 -27
  110. package/fesm2022/acorex-components-menu.mjs.map +1 -1
  111. package/fesm2022/{acorex-components-modal-acorex-components-modal-Bmoz9DL5.mjs → acorex-components-modal-acorex-components-modal-BnUdtPke.mjs} +5 -29
  112. package/fesm2022/acorex-components-modal-acorex-components-modal-BnUdtPke.mjs.map +1 -0
  113. package/fesm2022/{acorex-components-modal-modal-content.component-CSJU1vRi.mjs → acorex-components-modal-modal-content.component-Cgq-wx_m.mjs} +7 -5
  114. package/fesm2022/acorex-components-modal-modal-content.component-Cgq-wx_m.mjs.map +1 -0
  115. package/fesm2022/acorex-components-modal.mjs +1 -1
  116. package/fesm2022/acorex-components-navbar.mjs +3 -3
  117. package/fesm2022/acorex-components-navbar.mjs.map +1 -1
  118. package/fesm2022/acorex-components-notification.mjs +250 -378
  119. package/fesm2022/acorex-components-notification.mjs.map +1 -1
  120. package/fesm2022/acorex-components-number-box-legacy.mjs +2 -2
  121. package/fesm2022/acorex-components-number-box-legacy.mjs.map +1 -1
  122. package/fesm2022/acorex-components-number-box.mjs +2 -2
  123. package/fesm2022/acorex-components-number-box.mjs.map +1 -1
  124. package/fesm2022/acorex-components-otp.mjs +2 -2
  125. package/fesm2022/acorex-components-otp.mjs.map +1 -1
  126. package/fesm2022/acorex-components-page.mjs.map +1 -1
  127. package/fesm2022/acorex-components-paint.mjs +14 -19
  128. package/fesm2022/acorex-components-paint.mjs.map +1 -1
  129. package/fesm2022/acorex-components-password-box.mjs +4 -4
  130. package/fesm2022/acorex-components-password-box.mjs.map +1 -1
  131. package/fesm2022/acorex-components-pdf-reader.mjs +2 -2
  132. package/fesm2022/acorex-components-pdf-reader.mjs.map +1 -1
  133. package/fesm2022/acorex-components-phone-box.mjs +2 -2
  134. package/fesm2022/acorex-components-phone-box.mjs.map +1 -1
  135. package/fesm2022/acorex-components-picker.mjs +6 -6
  136. package/fesm2022/acorex-components-picker.mjs.map +1 -1
  137. package/fesm2022/acorex-components-popover.mjs +175 -136
  138. package/fesm2022/acorex-components-popover.mjs.map +1 -1
  139. package/fesm2022/acorex-components-popup.mjs +106 -296
  140. package/fesm2022/acorex-components-popup.mjs.map +1 -1
  141. package/fesm2022/acorex-components-progress-bar.mjs +5 -3
  142. package/fesm2022/acorex-components-progress-bar.mjs.map +1 -1
  143. package/fesm2022/acorex-components-qrcode.mjs +2 -2
  144. package/fesm2022/acorex-components-qrcode.mjs.map +1 -1
  145. package/fesm2022/acorex-components-query-builder.mjs +2 -2
  146. package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
  147. package/fesm2022/acorex-components-radio.mjs +2 -2
  148. package/fesm2022/acorex-components-radio.mjs.map +1 -1
  149. package/fesm2022/acorex-components-rail-navigation.mjs +27 -25
  150. package/fesm2022/acorex-components-rail-navigation.mjs.map +1 -1
  151. package/fesm2022/acorex-components-range-slider.mjs +3 -3
  152. package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
  153. package/fesm2022/acorex-components-rate-picker.mjs +14 -29
  154. package/fesm2022/acorex-components-rate-picker.mjs.map +1 -1
  155. package/fesm2022/acorex-components-rest-api-generator.mjs.map +1 -1
  156. package/fesm2022/acorex-components-result.mjs +2 -2
  157. package/fesm2022/acorex-components-result.mjs.map +1 -1
  158. package/fesm2022/acorex-components-routing-progress.mjs +2 -2
  159. package/fesm2022/acorex-components-routing-progress.mjs.map +1 -1
  160. package/fesm2022/acorex-components-rrule.mjs.map +1 -1
  161. package/fesm2022/acorex-components-scheduler-picker.mjs +2 -2
  162. package/fesm2022/acorex-components-scheduler-picker.mjs.map +1 -1
  163. package/fesm2022/acorex-components-scheduler.mjs +18 -18
  164. package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
  165. package/fesm2022/acorex-components-scss.mjs.map +1 -1
  166. package/fesm2022/acorex-components-search-box.mjs +9 -3
  167. package/fesm2022/acorex-components-search-box.mjs.map +1 -1
  168. package/fesm2022/acorex-components-select-box.mjs +4 -2
  169. package/fesm2022/acorex-components-select-box.mjs.map +1 -1
  170. package/fesm2022/acorex-components-selection-list-2.mjs +4 -4
  171. package/fesm2022/acorex-components-selection-list-2.mjs.map +1 -1
  172. package/fesm2022/acorex-components-selection-list.mjs +2 -2
  173. package/fesm2022/acorex-components-selection-list.mjs.map +1 -1
  174. package/fesm2022/acorex-components-side-menu.mjs +63 -14
  175. package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
  176. package/fesm2022/acorex-components-skeleton.mjs +2 -2
  177. package/fesm2022/acorex-components-skeleton.mjs.map +1 -1
  178. package/fesm2022/acorex-components-slider.mjs +5 -5
  179. package/fesm2022/acorex-components-slider.mjs.map +1 -1
  180. package/fesm2022/acorex-components-sliding-item.mjs +2 -2
  181. package/fesm2022/acorex-components-sliding-item.mjs.map +1 -1
  182. package/fesm2022/acorex-components-step-wizard.mjs +2 -2
  183. package/fesm2022/acorex-components-step-wizard.mjs.map +1 -1
  184. package/fesm2022/acorex-components-switch.mjs +4 -4
  185. package/fesm2022/acorex-components-switch.mjs.map +1 -1
  186. package/fesm2022/acorex-components-tabs.mjs +2 -2
  187. package/fesm2022/acorex-components-tabs.mjs.map +1 -1
  188. package/fesm2022/acorex-components-tag-box.mjs +2 -2
  189. package/fesm2022/acorex-components-tag-box.mjs.map +1 -1
  190. package/fesm2022/acorex-components-tag.mjs +3 -3
  191. package/fesm2022/acorex-components-tag.mjs.map +1 -1
  192. package/fesm2022/acorex-components-text-area.mjs +2 -2
  193. package/fesm2022/acorex-components-text-area.mjs.map +1 -1
  194. package/fesm2022/acorex-components-text-box.mjs +2 -2
  195. package/fesm2022/acorex-components-text-box.mjs.map +1 -1
  196. package/fesm2022/acorex-components-time-duration.mjs.map +1 -1
  197. package/fesm2022/acorex-components-time-line.mjs +4 -4
  198. package/fesm2022/acorex-components-time-line.mjs.map +1 -1
  199. package/fesm2022/acorex-components-toast.mjs +125 -233
  200. package/fesm2022/acorex-components-toast.mjs.map +1 -1
  201. package/fesm2022/acorex-components-toolbar.mjs +2 -2
  202. package/fesm2022/acorex-components-toolbar.mjs.map +1 -1
  203. package/fesm2022/acorex-components-tooltip.mjs +12 -12
  204. package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
  205. package/fesm2022/acorex-components-tree-view-legacy.mjs.map +1 -1
  206. package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
  207. package/fesm2022/acorex-components-uploader.mjs +6 -6
  208. package/fesm2022/acorex-components-uploader.mjs.map +1 -1
  209. package/fesm2022/acorex-components-video-player.mjs +2 -2
  210. package/fesm2022/acorex-components-video-player.mjs.map +1 -1
  211. package/fesm2022/acorex-components-wysiwyg.mjs +12 -12
  212. package/fesm2022/acorex-components-wysiwyg.mjs.map +1 -1
  213. package/fesm2022/acorex-components.mjs.map +1 -1
  214. package/grid-layout-builder/index.d.ts +1 -2
  215. package/kbd/index.d.ts +13 -7
  216. package/loading/index.d.ts +1 -1
  217. package/loading-dialog/index.d.ts +15 -31
  218. package/menu/index.d.ts +0 -4
  219. package/modal/index.d.ts +0 -7
  220. package/notification/index.d.ts +30 -47
  221. package/package.json +15 -15
  222. package/paint/index.d.ts +1 -6
  223. package/popover/index.d.ts +27 -20
  224. package/popup/index.d.ts +27 -98
  225. package/rate-picker/index.d.ts +5 -15
  226. package/side-menu/index.d.ts +9 -2
  227. package/slider/index.d.ts +2 -2
  228. package/toast/index.d.ts +18 -24
  229. package/tooltip/index.d.ts +2 -2
  230. package/fesm2022/acorex-components-modal-acorex-components-modal-Bmoz9DL5.mjs.map +0 -1
  231. package/fesm2022/acorex-components-modal-modal-content.component-CSJU1vRi.mjs.map +0 -1
@@ -1,10 +1,11 @@
1
1
  import { MXBaseComponent, AXClosableComponent, AXComponent } from '@acorex/cdk/common';
2
2
  import { AXDecoratorCloseButtonComponent, AXDecoratorModule } from '@acorex/components/decorators';
3
3
  import { AXTranslationService, AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
4
+ import { Dialog, DIALOG_DATA, DialogRef, DialogModule } from '@angular/cdk/dialog';
4
5
  import { AsyncPipe, CommonModule } from '@angular/common';
5
6
  import * as i0 from '@angular/core';
6
- import { InjectionToken, inject, signal, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
7
- import { AXOverlayService } from '@acorex/cdk/overlay';
7
+ import { InjectionToken, inject, signal, Injectable, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
8
+ import { ScrollStrategyOptions, GlobalPositionStrategy } from '@angular/cdk/overlay';
8
9
  import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
9
10
  import { set } from 'lodash-es';
10
11
  import { AXButtonModule } from '@acorex/components/button';
@@ -34,17 +35,18 @@ function toastConfig(config = {}) {
34
35
  return result;
35
36
  }
36
37
 
37
- let toastIdCounter = 0;
38
38
  class AXToastService {
39
39
  constructor() {
40
- this.overlayService = inject(AXOverlayService);
40
+ this.scrollStrategyOptions = inject(ScrollStrategyOptions);
41
+ this.dialog = inject(Dialog);
41
42
  this.defaultConfig = inject(AX_TOAST_CONFIG);
42
43
  this.translationService = inject(AXTranslationService);
43
44
  this.reserveCounter = signal(0, ...(ngDevMode ? [{ debugName: "reserveCounter" }] : []));
44
45
  this.activeToasts = signal([], ...(ngDevMode ? [{ debugName: "activeToasts" }] : []));
45
46
  this.reservedToasts = signal([], ...(ngDevMode ? [{ debugName: "reservedToasts" }] : []));
46
- this.toastCounterRef = signal(null, ...(ngDevMode ? [{ debugName: "toastCounterRef" }] : []));
47
+ this.toastCounterElement = signal(null, ...(ngDevMode ? [{ debugName: "toastCounterElement" }] : []));
47
48
  this.moreToastsConfig = signal({ color: 'primary', location: 'bottom-center' }, ...(ngDevMode ? [{ debugName: "moreToastsConfig" }] : []));
49
+ this.scrollStrategy = this.scrollStrategyOptions.noop();
48
50
  }
49
51
  /**
50
52
  * Shows a primary toast notification.
@@ -146,63 +148,35 @@ class AXToastService {
146
148
  }
147
149
  displayToast(config) {
148
150
  const gap = this.defaultConfig.gap;
149
- const toastData = {
150
- icon: config.icon,
151
- title: config.title,
152
- content: config.content,
153
- location: config.location,
154
- closeButton: config.closeButton ?? true,
155
- color: config.color,
156
- timeOut: config.timeOut,
157
- timeOutProgress: config.timeOutProgress ?? true,
158
- pauseOnHover: config.pauseOnHover,
159
- };
160
- const toastId = `toast-${++toastIdCounter}`;
161
- let internalRef;
162
- const closeToast = () => {
163
- if (internalRef) {
164
- internalRef.overlayRef.dispose();
165
- this.activeToasts.set(this.activeToasts().filter((t) => t.id !== internalRef.id));
166
- this.handleShowReservedToast();
167
- this.handleReservedToastCounter();
168
- setTimeout(() => {
169
- this.reposition(config.location, gap);
170
- });
171
- }
172
- };
173
- this.overlayService
174
- .create(AXToastComponent, {
175
- inputs: {
176
- config: toastData,
177
- onClose: closeToast,
178
- },
179
- centered: false,
180
- panelClass: ['ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
181
- onDispose: () => {
182
- // Clean up when disposed externally
183
- const currentToasts = this.activeToasts();
184
- if (internalRef && currentToasts.find((t) => t.id === internalRef.id)) {
185
- this.activeToasts.set(currentToasts.filter((t) => t.id !== internalRef.id));
186
- this.handleShowReservedToast();
187
- this.handleReservedToastCounter();
188
- }
189
- },
190
- })
191
- .then((overlayRef) => {
192
- internalRef = {
193
- id: toastId,
194
- overlayRef,
195
- config: toastData,
196
- close: closeToast,
197
- };
198
- // Position the toast BEFORE adding to activeToasts (so getPosition calculates correctly)
199
- this.positionToast(overlayRef.overlayElement, config.location, gap);
200
- this.activeToasts.update((prev) => [...prev, internalRef]);
151
+ const pos = this.getPosition(config.location) + gap + 'px';
152
+ const positionStrategy = this.getPositionStrategy(new GlobalPositionStrategy(), config.location, pos, gap);
153
+ const dialogRef = this.dialog.open(AXToastComponent, {
154
+ data: config,
155
+ autoFocus: '__no_element__',
156
+ restoreFocus: true,
157
+ role: 'dialog',
158
+ ariaModal: true,
159
+ closeOnNavigation: true,
160
+ closeOnDestroy: true,
161
+ hasBackdrop: false,
162
+ panelClass: ['animate-fadeIn', 'animate-faster'],
163
+ positionStrategy,
164
+ scrollStrategy: this.scrollStrategy,
165
+ });
166
+ this.activeToasts.update((prev) => [...prev, dialogRef.id]);
167
+ this.handleReservedToastCounter();
168
+ const toastRef = dialogRef.componentInstance;
169
+ dialogRef.closed.subscribe(() => {
170
+ this.activeToasts.set(this.activeToasts().filter((id) => id !== dialogRef.id));
171
+ this.handleShowReservedToast();
201
172
  this.handleReservedToastCounter();
173
+ setTimeout(() => {
174
+ this.reposition(config.location, gap);
175
+ });
202
176
  });
203
177
  return {
204
178
  close: () => {
205
- closeToast();
179
+ toastRef.close();
206
180
  },
207
181
  };
208
182
  }
@@ -212,17 +186,8 @@ class AXToastService {
212
186
  hideAll() {
213
187
  this.reserveCounter.set(0);
214
188
  this.reservedToasts.set([]);
215
- // Close all active toasts
216
- this.activeToasts().forEach((toast) => {
217
- toast.overlayRef.dispose();
218
- });
219
189
  this.activeToasts.set([]);
220
- // Close counter toast if exists
221
- const counterRef = this.toastCounterRef();
222
- if (counterRef) {
223
- counterRef.overlayRef.dispose();
224
- this.toastCounterRef.set(null);
225
- }
190
+ this.dialog.closeAll();
226
191
  this.handleReservedToastCounter();
227
192
  }
228
193
  handleShowReservedToast() {
@@ -230,37 +195,29 @@ class AXToastService {
230
195
  return;
231
196
  if (!this.reservedToasts().length)
232
197
  return;
233
- const reserved = this.reservedToasts()[0];
234
- this.reservedToasts.update((prev) => prev.slice(1));
235
- const displayedRef = this.displayToast(reserved.config);
198
+ const { config, reservedRef } = this.reservedToasts().shift();
199
+ const displayedRef = this.displayToast(config);
236
200
  this.handleReservedToastCounter();
237
- reserved.reservedRef.close = displayedRef.close;
201
+ reservedRef.close = displayedRef.close;
238
202
  }
239
203
  handleReservedToastCounter() {
240
204
  const reservedCount = this.reservedToasts().length;
241
205
  if (reservedCount === this.reserveCounter())
242
206
  return;
243
207
  this.reserveCounter.set(reservedCount);
244
- if (reservedCount === 0 && this.toastCounterRef() !== null) {
245
- this.toastCounterRef().close();
246
- this.toastCounterRef.set(null);
208
+ if (reservedCount === 0 && this.toastCounterElement() !== null) {
209
+ this.toastCounterElement().close();
247
210
  return;
248
211
  }
249
212
  if (reservedCount > 0) {
250
- if (this.toastCounterRef() !== null) {
251
- this.toastCounterRef().close();
252
- this.toastCounterRef.set(null);
253
- }
254
- const firstToast = this.activeToasts()[0];
255
- if (firstToast) {
256
- const toastComponent = firstToast.overlayRef.instance.instance;
257
- const remainingTime = toastComponent.createdDate();
258
- this.createReservedCounterToast(remainingTime);
213
+ if (this.toastCounterElement() !== null) {
214
+ this.toastCounterElement().close();
259
215
  }
216
+ const remainingTime = this.dialog.getDialogById(this.activeToasts()[0]).componentRef.instance.createdDate();
217
+ this.createReservedCounterToast(remainingTime);
260
218
  }
261
219
  }
262
220
  async createReservedCounterToast(remainingTime) {
263
- const gap = this.defaultConfig.gap;
264
221
  const timeOut = Math.min(this.moreToastsConfig().timeOut - (new Date().getTime() - remainingTime), this.moreToastsConfig().timeOut);
265
222
  const opt = {
266
223
  closeButton: false,
@@ -273,156 +230,88 @@ class AXToastService {
273
230
  timeOutProgress: this.moreToastsConfig().timeOutProgress,
274
231
  closeAllButton: true,
275
232
  };
276
- const toastId = `toast-counter-${++toastIdCounter}`;
277
- let counterInternalRef;
278
- const closeCounter = () => {
279
- if (counterInternalRef) {
280
- counterInternalRef.overlayRef.dispose();
281
- if (this.toastCounterRef()?.id === counterInternalRef.id) {
282
- this.toastCounterRef.set(null);
283
- }
284
- }
285
- };
286
- const overlayRef = await this.overlayService.create(AXToastComponent, {
287
- inputs: {
288
- config: opt,
289
- onClose: closeCounter,
290
- },
291
- centered: false,
292
- panelClass: ['ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
233
+ const gap = this.defaultConfig.gap;
234
+ const pos = this.getPosition(opt.location) + gap + 'px';
235
+ const positionStrategy = this.getPositionStrategy(new GlobalPositionStrategy(), opt.location, pos, gap);
236
+ const dialogRef = this.dialog.open(AXToastComponent, {
237
+ data: opt,
238
+ autoFocus: '__no_element__',
239
+ restoreFocus: true,
240
+ role: 'dialog',
241
+ ariaModal: true,
242
+ closeOnNavigation: true,
243
+ closeOnDestroy: true,
244
+ hasBackdrop: false,
245
+ panelClass: ['animate-fadeIn', 'animate-faster'],
246
+ positionStrategy,
247
+ scrollStrategy: this.scrollStrategy,
293
248
  });
294
- counterInternalRef = {
295
- id: toastId,
296
- overlayRef,
297
- config: opt,
298
- close: closeCounter,
299
- };
300
- this.toastCounterRef.set(counterInternalRef);
301
- // Position the counter toast
302
- this.positionToast(overlayRef.overlayElement, opt.location, gap);
249
+ this.toastCounterElement.set(dialogRef.componentInstance);
303
250
  }
304
- positionToast(element, location, gap) {
305
- if (!element)
306
- return;
307
- const pos = this.getPosition(location) + gap;
308
- // Override the centered overlay container styles for toast positioning
309
- element.style.width = 'max-content';
310
- element.style.height = 'auto';
311
- element.style.display = 'block';
312
- element.style.alignItems = '';
313
- element.style.justifyContent = '';
314
- // Reset all positioning styles
315
- element.style.top = '';
316
- element.style.bottom = '';
317
- element.style.left = '';
318
- element.style.right = '';
319
- element.style.transform = '';
320
- // Apply position based on location
251
+ reposition(toastLocation, gap) {
252
+ const list = this.dialog.openDialogs
253
+ .map((c) => c.componentInstance)
254
+ .filter((c) => c.config?.location == toastLocation);
255
+ list.forEach((element, index) => {
256
+ const pos = this.getRepositionPosition(index, gap, list, toastLocation);
257
+ this.getPositionStrategy(element.dialogRef.config.positionStrategy, toastLocation, pos, gap).apply();
258
+ });
259
+ }
260
+ getRepositionPosition(index, gap, list, toastLocation) {
261
+ if (index === 0)
262
+ return gap + 'px';
263
+ const previouseElement = list[index - 1];
264
+ if (toastLocation.split('-')[0] == 'bottom') {
265
+ return window.innerHeight - previouseElement.getHostElement().offsetTop + gap + 'px';
266
+ }
267
+ return previouseElement.getHostElement().offsetTop + previouseElement.getHostElement().offsetHeight + gap + 'px';
268
+ }
269
+ getPosition(location) {
270
+ const list = this.dialog.openDialogs
271
+ .map((c) => c.componentInstance)
272
+ .filter((c) => c.config?.location == location);
273
+ if (list.length == 0)
274
+ return 0;
275
+ if (location.split('-')[0] == 'bottom') {
276
+ return window.innerHeight - list[list.length - 1].getHostElement().offsetTop;
277
+ }
278
+ return list[list.length - 1].getHostElement().offsetTop + list[list.length - 1].getHostElement().offsetHeight;
279
+ }
280
+ getPositionStrategy(positionStrategy, location, pos, gap) {
321
281
  switch (location) {
322
282
  case 'bottom-center':
323
- element.style.bottom = pos + 'px';
324
- element.style.left = '50%';
325
- element.style.transform = 'translateX(-50%)';
283
+ return positionStrategy.bottom(pos).centerHorizontally();
326
284
  break;
327
285
  case 'bottom-end':
328
- element.style.bottom = pos + 'px';
329
- element.style.right = gap + 'px';
286
+ return positionStrategy.bottom(pos).right(gap + 'px');
330
287
  break;
331
288
  case 'bottom-start':
332
- element.style.bottom = pos + 'px';
333
- element.style.left = gap + 'px';
289
+ return positionStrategy.bottom(pos).left(gap + 'px');
334
290
  break;
335
291
  case 'top-center':
336
- element.style.top = pos + 'px';
337
- element.style.left = '50%';
338
- element.style.transform = 'translateX(-50%)';
292
+ return positionStrategy.top(pos).centerHorizontally();
339
293
  break;
340
294
  case 'top-end':
341
- element.style.top = pos + 'px';
342
- element.style.right = gap + 'px';
295
+ return positionStrategy.top(pos).right(gap + 'px');
343
296
  break;
344
297
  case 'top-start':
345
- element.style.top = pos + 'px';
346
- element.style.left = gap + 'px';
298
+ return positionStrategy.top(pos).left(gap + 'px');
347
299
  break;
348
300
  case 'center-start':
349
- element.style.top = '50%';
350
- element.style.left = gap + 'px';
351
- element.style.transform = 'translateY(-50%)';
301
+ return positionStrategy.centerVertically().left(gap + 'px');
352
302
  break;
353
303
  case 'center-end':
354
- element.style.top = '50%';
355
- element.style.right = gap + 'px';
356
- element.style.transform = 'translateY(-50%)';
304
+ return positionStrategy.centerVertically().right(gap + 'px');
357
305
  break;
358
306
  }
359
307
  }
360
- reposition(toastLocation, gap) {
361
- const list = this.activeToasts().filter((t) => t.config?.location === toastLocation);
362
- list.forEach((toast, index) => {
363
- const element = toast.overlayRef.overlayElement;
364
- if (!element)
365
- return;
366
- const pos = this.getRepositionPosition(index, gap, list, toastLocation);
367
- this.applyRepositionPosition(element, toastLocation, pos, gap);
368
- });
369
- }
370
- getRepositionPosition(index, gap, list, toastLocation) {
371
- if (index === 0)
372
- return gap;
373
- const previousToast = list[index - 1];
374
- const previousElement = previousToast.overlayRef.overlayElement;
375
- if (!previousElement)
376
- return gap;
377
- if (toastLocation.split('-')[0] === 'bottom') {
378
- return window.innerHeight - previousElement.offsetTop + gap;
379
- }
380
- return previousElement.offsetTop + previousElement.offsetHeight + gap;
381
- }
382
- applyRepositionPosition(element, location, pos, gap) {
383
- // Reset transform if needed, then apply position
384
- const isVerticalCenter = location === 'center-start' || location === 'center-end';
385
- const isHorizontalCenter = location === 'bottom-center' || location === 'top-center';
386
- if (location.startsWith('bottom')) {
387
- element.style.bottom = pos + 'px';
388
- element.style.top = '';
389
- if (isHorizontalCenter) {
390
- element.style.transform = 'translateX(-50%)';
391
- }
392
- }
393
- else if (location.startsWith('top')) {
394
- element.style.top = pos + 'px';
395
- element.style.bottom = '';
396
- if (isHorizontalCenter) {
397
- element.style.transform = 'translateX(-50%)';
398
- }
399
- }
400
- else if (isVerticalCenter) {
401
- element.style.top = pos + 'px';
402
- element.style.bottom = '';
403
- element.style.transform = '';
404
- }
405
- }
406
- getPosition(location) {
407
- const list = this.activeToasts().filter((t) => t.config?.location === location);
408
- if (list.length === 0)
409
- return 0;
410
- const lastToast = list[list.length - 1];
411
- const element = lastToast.overlayRef.overlayElement;
412
- if (!element)
413
- return 0;
414
- if (location.split('-')[0] === 'bottom') {
415
- return window.innerHeight - element.offsetTop;
416
- }
417
- return element.offsetTop + element.offsetHeight;
418
- }
419
308
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
420
309
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastService, providedIn: 'root' }); }
421
310
  }
422
311
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastService, decorators: [{
423
312
  type: Injectable,
424
313
  args: [{ providedIn: 'root' }]
425
- }] });
314
+ }], ctorParameters: () => [] });
426
315
 
427
316
  /**
428
317
  * The Button is a component which detects user interaction and triggers a corresponding event
@@ -432,10 +321,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
432
321
  class AXToastComponent extends MXBaseComponent {
433
322
  constructor() {
434
323
  super(...arguments);
435
- /** Toast configuration data */
436
- this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
437
- /** @internal Callback function to close the toast */
438
- this.onClose = input(...(ngDevMode ? [undefined, { debugName: "onClose" }] : []));
324
+ this.config = inject(DIALOG_DATA);
325
+ this.dialogRef = inject(DialogRef);
439
326
  this.toastService = inject(AXToastService);
440
327
  this.createdDate = signal(0, ...(ngDevMode ? [{ debugName: "createdDate" }] : []));
441
328
  this.isPaused = signal(false, ...(ngDevMode ? [{ debugName: "isPaused" }] : []));
@@ -449,10 +336,10 @@ class AXToastComponent extends MXBaseComponent {
449
336
  super.ngOnInit();
450
337
  this._initIcon();
451
338
  this.createdDate.set(new Date().getTime());
452
- this.remainingTime.set(this.config().timeOut);
339
+ this.remainingTime.set(this.config.timeOut);
453
340
  this._handleTimeOut();
454
341
  this.getHostElement().addEventListener('pointerenter', () => {
455
- if (!this.config().pauseOnHover)
342
+ if (!this.config.pauseOnHover)
456
343
  return;
457
344
  if (this.isPaused())
458
345
  return;
@@ -461,7 +348,7 @@ class AXToastComponent extends MXBaseComponent {
461
348
  this.pauseAnimation();
462
349
  });
463
350
  this.getHostElement().addEventListener('pointerleave', () => {
464
- if (!this.config().pauseOnHover)
351
+ if (!this.config.pauseOnHover)
465
352
  return;
466
353
  if (!this.isPaused())
467
354
  return;
@@ -474,7 +361,7 @@ class AXToastComponent extends MXBaseComponent {
474
361
  clearInterval(this.intervalId);
475
362
  }
476
363
  _handleTimeOut() {
477
- if (this.config().timeOut) {
364
+ if (this.config.timeOut) {
478
365
  this.intervalId = setInterval(() => {
479
366
  this.remainingTime.update((prev) => prev - this.transitionDuration());
480
367
  if (this.remainingTime() <= 0) {
@@ -485,8 +372,8 @@ class AXToastComponent extends MXBaseComponent {
485
372
  }
486
373
  }
487
374
  _initIcon() {
488
- if (!this.config().icon) {
489
- switch (this.config().color) {
375
+ if (!this.config.icon) {
376
+ switch (this.config.color) {
490
377
  case 'success':
491
378
  this._icon = 'ax-icon ax-icon-check-circle';
492
379
  break;
@@ -497,12 +384,12 @@ class AXToastComponent extends MXBaseComponent {
497
384
  this._icon = 'ax-icon ax-icon-error';
498
385
  break;
499
386
  default:
500
- this._icon = this.config().icon || 'ax-icon ax-icon-info';
387
+ this._icon = this.config.icon || 'ax-icon ax-icon-info';
501
388
  break;
502
389
  }
503
390
  }
504
391
  else {
505
- this._icon = this.config().icon;
392
+ this._icon = this.config.icon;
506
393
  }
507
394
  }
508
395
  /** @ignore */
@@ -511,14 +398,18 @@ class AXToastComponent extends MXBaseComponent {
511
398
  button.onClick({ source: button });
512
399
  }
513
400
  }
401
+ /** @ignore */
402
+ get __hostClass() {
403
+ return `ax-${this.config.color}`;
404
+ }
514
405
  /**
515
406
  * Closes the toast notification.
516
407
  */
517
408
  close() {
518
- const closeCallback = this.onClose();
519
- if (closeCallback) {
520
- closeCallback();
521
- }
409
+ this.dialogRef.close({
410
+ component: this,
411
+ htmlElement: this.getHostElement(),
412
+ });
522
413
  }
523
414
  /**
524
415
  * Closes all toast notifications.
@@ -527,26 +418,27 @@ class AXToastComponent extends MXBaseComponent {
527
418
  this.toastService.hideAll();
528
419
  }
529
420
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
530
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXToastComponent, isStandalone: true, selector: "ax-toast", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, onClose: { classPropertyName: "onClose", publicName: "onClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"ax-\" + config().color" } }, providers: [
421
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXToastComponent, isStandalone: true, selector: "ax-toast", host: { properties: { "class": "this.__hostClass" } }, providers: [
531
422
  { provide: AXClosableComponent, useExisting: AXToastComponent },
532
423
  { provide: AXComponent, useExisting: AXToastComponent },
533
- ], usesInheritance: true, ngImport: i0, template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config().title && config().content\">\n {{ config().title | translate | async }}\n </div>\n <div>{{ config().content | translate | async }}</div>\n</div>\n@if (config().closeButton) {\n <ax-close-button></ax-close-button>\n} @else if (config().closeAllButton) {\n <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config().timeOutProgress && config().timeOut) {\n <div\n class=\"ax-toast-progress\"\n [style.transition-duration]=\"transitionDuration()\"\n [style.width]=\"(remainingTime() * 100) / config().timeOut + '%'\"\n ></div>\n}\n", styles: ["ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-darkest-surface)}.ax-dark ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-lightest-surface)}ax-toast.ax-primary{--ax-comp-toast-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-primary-darker-surface)}ax-toast.ax-secondary{--ax-comp-toast-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-secondary-darker-surface)}ax-toast.ax-success{--ax-comp-toast-bg-color: var(--ax-sys-color-success-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-success-darker-surface)}ax-toast.ax-warning{--ax-comp-toast-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-warning-darker-surface)}ax-toast.ax-danger{--ax-comp-toast-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-danger-darker-surface)}ax-toast.ax-accent1{--ax-comp-toast-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent1-darker-surface)}ax-toast.ax-accent2{--ax-comp-toast-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent2-darker-surface)}ax-toast.ax-accent3{--ax-comp-toast-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent3-darker-surface)}ax-toast.ax-accent4{--ax-comp-toast-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent4-darker-surface)}ax-toast.ax-accent5{--ax-comp-toast-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent5-darker-surface)}ax-toast.ax-accent6{--ax-comp-toast-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent6-darker-surface)}ax-toast.ax-accent7{--ax-comp-toast-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent7-darker-surface)}ax-toast{position:relative;display:flex;width:98vw;overflow:hidden;padding:.75rem 1rem;--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);color:rgba(var(--ax-comp-toast-text-color));background-color:rgba(var(--ax-comp-toast-bg-color));font-size:var(--ax-comp-toast-font-size, .875rem);line-height:var(--ax-comp-toast-line-height, 1.25rem);border-radius:var(--ax-comp-toast-border-radius, var(--ax-sys-border-radius))}@media (min-width: 768px){ax-toast{width:24rem}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem;max-width:fit-content;align-items:start}ax-toast .ax-toast-icon{margin-inline-end:.5rem}ax-toast .ax-toast-content{display:flex;flex:1 1 0%;flex-direction:column}ax-toast .ax-toast-content .ax-toast-title{font-weight:500;line-height:1.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin-top:.75rem;margin-bottom:.75rem;display:flex;gap:.5rem}ax-toast ax-icon-close{height:fit-content}ax-toast ax-icon-close:hover{opacity:.75}ax-toast .ax-toast-progress{width:100%;bottom:0;height:.25rem;position:absolute;inset-inline-end:0px;inset-inline-start:0px;transition-property:width;transition-timing-function:linear;transition-duration:var(--ax-sys-transition-duration);background-color:rgba(var(--ax-comp-toast-progress-bg-color, 255, 255, 255, .46))}\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
424
+ ], usesInheritance: true, ngImport: i0, template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config.title && config.content\">\n {{ config.title | translate | async }}\n </div>\n <div>{{ config.content | translate | async }}</div>\n</div>\n@if (config.closeButton) {\n <ax-close-button></ax-close-button>\n} @else if (config.closeAllButton) {\n <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config.timeOutProgress && config.timeOut) {\n <div\n class=\"ax-toast-progress\"\n [style.transition-duration]=\"transitionDuration()\"\n [style.width]=\"(remainingTime() * 100) / config.timeOut + '%'\"\n ></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-leading:initial;--tw-font-weight:initial}}}@layer components{ax-toast{border-radius:var(--radius-lg,.5rem);background-color:var(--ax-comp-bg,var(--color-lighter));width:98vw;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--ax-comp-text,var(--color-on-lighter));--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:flex;position:relative;overflow:hidden}@media (min-width:48rem){ax-toast{width:24rem}}ax-toast:where(.dark,.dark *){background-color:var(--ax-comp-bg,var(--color-darker));color:var(--ax-comp-text,var(--color-on-darker))}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{max-width:fit-content;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));align-items:flex-start}ax-toast .ax-toast-icon{margin-inline-end:calc(var(--spacing,.25rem)*2)}ax-toast .ax-toast-content{flex-direction:column;flex:1;display:flex}ax-toast .ax-toast-content .ax-toast-title{--tw-leading:calc(var(--spacing,.25rem)*6);line-height:calc(var(--spacing,.25rem)*6);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-toast .ax-toast-content .ax-toast-buttons{margin-block:calc(var(--spacing,.25rem)*3);gap:calc(var(--spacing,.25rem)*2);display:flex}ax-toast ax-icon-close{height:fit-content}@media (hover:hover){ax-toast ax-icon-close:hover{opacity:.75}}ax-toast .ax-toast-progress{inset-inline:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:calc(var(--spacing,.25rem)*1);background-color:var(--ax-comp-bg-darker,var(--color-darkest));width:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));position:absolute}ax-toast .ax-toast-progress:where(.dark,.dark *){background-color:var(--ax-comp-bg-darker,var(--color-lightest))}}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
534
425
  }
535
426
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastComponent, decorators: [{
536
427
  type: Component,
537
- args: [{ selector: 'ax-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
538
- '[class]': '"ax-" + config().color',
539
- }, providers: [
428
+ args: [{ selector: 'ax-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
540
429
  { provide: AXClosableComponent, useExisting: AXToastComponent },
541
430
  { provide: AXComponent, useExisting: AXToastComponent },
542
- ], imports: [AXDecoratorCloseButtonComponent, AsyncPipe, AXTranslatorPipe], template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config().title && config().content\">\n {{ config().title | translate | async }}\n </div>\n <div>{{ config().content | translate | async }}</div>\n</div>\n@if (config().closeButton) {\n <ax-close-button></ax-close-button>\n} @else if (config().closeAllButton) {\n <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config().timeOutProgress && config().timeOut) {\n <div\n class=\"ax-toast-progress\"\n [style.transition-duration]=\"transitionDuration()\"\n [style.width]=\"(remainingTime() * 100) / config().timeOut + '%'\"\n ></div>\n}\n", styles: ["ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-darkest-surface)}.ax-dark ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-lightest-surface)}ax-toast.ax-primary{--ax-comp-toast-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-primary-darker-surface)}ax-toast.ax-secondary{--ax-comp-toast-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-secondary-darker-surface)}ax-toast.ax-success{--ax-comp-toast-bg-color: var(--ax-sys-color-success-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-success-darker-surface)}ax-toast.ax-warning{--ax-comp-toast-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-warning-darker-surface)}ax-toast.ax-danger{--ax-comp-toast-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-danger-darker-surface)}ax-toast.ax-accent1{--ax-comp-toast-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent1-darker-surface)}ax-toast.ax-accent2{--ax-comp-toast-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent2-darker-surface)}ax-toast.ax-accent3{--ax-comp-toast-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent3-darker-surface)}ax-toast.ax-accent4{--ax-comp-toast-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent4-darker-surface)}ax-toast.ax-accent5{--ax-comp-toast-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent5-darker-surface)}ax-toast.ax-accent6{--ax-comp-toast-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent6-darker-surface)}ax-toast.ax-accent7{--ax-comp-toast-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent7-darker-surface)}ax-toast{position:relative;display:flex;width:98vw;overflow:hidden;padding:.75rem 1rem;--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);color:rgba(var(--ax-comp-toast-text-color));background-color:rgba(var(--ax-comp-toast-bg-color));font-size:var(--ax-comp-toast-font-size, .875rem);line-height:var(--ax-comp-toast-line-height, 1.25rem);border-radius:var(--ax-comp-toast-border-radius, var(--ax-sys-border-radius))}@media (min-width: 768px){ax-toast{width:24rem}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem;max-width:fit-content;align-items:start}ax-toast .ax-toast-icon{margin-inline-end:.5rem}ax-toast .ax-toast-content{display:flex;flex:1 1 0%;flex-direction:column}ax-toast .ax-toast-content .ax-toast-title{font-weight:500;line-height:1.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin-top:.75rem;margin-bottom:.75rem;display:flex;gap:.5rem}ax-toast ax-icon-close{height:fit-content}ax-toast ax-icon-close:hover{opacity:.75}ax-toast .ax-toast-progress{width:100%;bottom:0;height:.25rem;position:absolute;inset-inline-end:0px;inset-inline-start:0px;transition-property:width;transition-timing-function:linear;transition-duration:var(--ax-sys-transition-duration);background-color:rgba(var(--ax-comp-toast-progress-bg-color, 255, 255, 255, .46))}\n"] }]
543
- }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], onClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClose", required: false }] }] } });
431
+ ], imports: [AXDecoratorCloseButtonComponent, AsyncPipe, AXTranslatorPipe], template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config.title && config.content\">\n {{ config.title | translate | async }}\n </div>\n <div>{{ config.content | translate | async }}</div>\n</div>\n@if (config.closeButton) {\n <ax-close-button></ax-close-button>\n} @else if (config.closeAllButton) {\n <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config.timeOutProgress && config.timeOut) {\n <div\n class=\"ax-toast-progress\"\n [style.transition-duration]=\"transitionDuration()\"\n [style.width]=\"(remainingTime() * 100) / config.timeOut + '%'\"\n ></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-leading:initial;--tw-font-weight:initial}}}@layer components{ax-toast{border-radius:var(--radius-lg,.5rem);background-color:var(--ax-comp-bg,var(--color-lighter));width:98vw;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*3);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));color:var(--ax-comp-text,var(--color-on-lighter));--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:flex;position:relative;overflow:hidden}@media (min-width:48rem){ax-toast{width:24rem}}ax-toast:where(.dark,.dark *){background-color:var(--ax-comp-bg,var(--color-darker));color:var(--ax-comp-text,var(--color-on-darker))}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{max-width:fit-content;font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)));align-items:flex-start}ax-toast .ax-toast-icon{margin-inline-end:calc(var(--spacing,.25rem)*2)}ax-toast .ax-toast-content{flex-direction:column;flex:1;display:flex}ax-toast .ax-toast-content .ax-toast-title{--tw-leading:calc(var(--spacing,.25rem)*6);line-height:calc(var(--spacing,.25rem)*6);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-toast .ax-toast-content .ax-toast-buttons{margin-block:calc(var(--spacing,.25rem)*3);gap:calc(var(--spacing,.25rem)*2);display:flex}ax-toast ax-icon-close{height:fit-content}@media (hover:hover){ax-toast ax-icon-close:hover{opacity:.75}}ax-toast .ax-toast-progress{inset-inline:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:calc(var(--spacing,.25rem)*1);background-color:var(--ax-comp-bg-darker,var(--color-darkest));width:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));position:absolute}ax-toast .ax-toast-progress:where(.dark,.dark *){background-color:var(--ax-comp-bg-darker,var(--color-lightest))}}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
432
+ }], propDecorators: { __hostClass: [{
433
+ type: HostBinding,
434
+ args: ['class']
435
+ }] } });
544
436
 
545
437
  const COMPONENT = [AXToastComponent];
546
- const MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule];
438
+ const MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, DialogModule, AXTranslationModule];
547
439
  class AXToastModule {
548
440
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
549
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXToastModule, imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule, AXToastComponent], exports: [AXToastComponent] }); }
441
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXToastModule, imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, DialogModule, AXTranslationModule, AXToastComponent], exports: [AXToastComponent] }); }
550
442
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastModule, providers: [AXToastService], imports: [MODULES, COMPONENT] }); }
551
443
  }
552
444
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastModule, decorators: [{