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