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