@daffodil/design 0.87.1 → 0.88.1
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/accordion/accordion-item/accordion-item.component.d.ts +1 -9
- package/accordion/accordion/accordion-item-title/accordion-item-title.directive.d.ts +0 -4
- package/article/article/article.component.d.ts +0 -8
- package/article/article-meta/article-meta.directive.d.ts +0 -4
- package/atoms/form/form-field/form-field/form-field.component.d.ts +3 -2
- package/atoms/form/form-field/form-field-control.d.ts +3 -1
- package/atoms/form/native-select/native-select.component.d.ts +11 -0
- package/breadcrumb/breadcrumb/breadcrumb.component.d.ts +0 -4
- package/breadcrumb/breadcrumb-item/breadcrumb-item.directive.d.ts +0 -12
- package/button/button/basic/button.component.d.ts +0 -4
- package/button/button/button-base.directive.d.ts +0 -18
- package/button/button/flat/flat.component.d.ts +0 -4
- package/button/button/icon/icon.component.d.ts +0 -4
- package/button/button/stroked/stroked.component.d.ts +0 -4
- package/button/button/underline/underline.component.d.ts +0 -4
- package/button/src/button/button-base.scss +3 -3
- package/callout/README.md +38 -40
- package/callout/callout/callout.component.d.ts +13 -5
- package/callout/callout-body/callout-body.directive.d.ts +9 -4
- package/callout/callout-icon/callout-icon.directive.d.ts +9 -4
- package/callout/callout-subtitle/callout-subtitle.directive.d.ts +8 -4
- package/callout/callout-tagline/callout-tagline.directive.d.ts +8 -4
- package/callout/callout-title/callout-title.directive.d.ts +8 -4
- package/card/README.md +52 -44
- package/card/card/basic/basic.component.d.ts +18 -4
- package/card/card/raised/raised.component.d.ts +3 -4
- package/card/card/stroked/stroked.component.d.ts +18 -4
- package/card/card-actions/card-actions.directive.d.ts +8 -4
- package/card/card-base.directive.d.ts +8 -16
- package/card/card-content/card-content.directive.d.ts +9 -4
- package/card/card-icon/card-icon.directive.d.ts +8 -4
- package/card/card-image/card-image.directive.d.ts +8 -4
- package/card/card-tagline/card-tagline.directive.d.ts +8 -4
- package/card/card-title/card-title.directive.d.ts +8 -4
- package/card/card.d.ts +1 -0
- package/card/examples/elevated-card/elevated-card.component.d.ts +5 -0
- package/card/examples/public_api.d.ts +3 -3
- package/card/helpers/card-orientation.d.ts +17 -0
- package/card/public_api.d.ts +9 -8
- package/card/src/card-base-theme.scss +40 -58
- package/container/container/container.component.d.ts +0 -4
- package/core/public_api.d.ts +1 -0
- package/core/sticky/public_api.d.ts +1 -0
- package/core/sticky/sticky-tracker.directive.d.ts +23 -0
- package/fesm2022/daffodil-design-accordion.mjs +13 -55
- package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
- package/fesm2022/daffodil-design-article.mjs +14 -32
- package/fesm2022/daffodil-design-article.mjs.map +1 -1
- package/fesm2022/daffodil-design-breadcrumb.mjs +15 -38
- package/fesm2022/daffodil-design-breadcrumb.mjs.map +1 -1
- package/fesm2022/daffodil-design-button.mjs +41 -108
- package/fesm2022/daffodil-design-button.mjs.map +1 -1
- package/fesm2022/daffodil-design-callout.mjs +91 -73
- package/fesm2022/daffodil-design-callout.mjs.map +1 -1
- package/fesm2022/daffodil-design-card-examples.mjs +17 -32
- package/fesm2022/daffodil-design-card-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-card.mjs +167 -145
- package/fesm2022/daffodil-design-card.mjs.map +1 -1
- package/fesm2022/daffodil-design-container.mjs +7 -13
- package/fesm2022/daffodil-design-container.mjs.map +1 -1
- package/fesm2022/daffodil-design-form-field-examples.mjs +7 -7
- package/fesm2022/daffodil-design-form-field-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-hero-examples.mjs +18 -1
- package/fesm2022/daffodil-design-hero-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-hero.mjs +102 -71
- package/fesm2022/daffodil-design-hero.mjs.map +1 -1
- package/fesm2022/daffodil-design-image.mjs +5 -12
- package/fesm2022/daffodil-design-image.mjs.map +1 -1
- package/fesm2022/daffodil-design-input-examples.mjs +6 -6
- package/fesm2022/daffodil-design-input-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-input.mjs +60 -35
- package/fesm2022/daffodil-design-input.mjs.map +1 -1
- package/fesm2022/daffodil-design-list-examples.mjs +14 -10
- package/fesm2022/daffodil-design-list-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-list.mjs +111 -98
- package/fesm2022/daffodil-design-list.mjs.map +1 -1
- package/fesm2022/daffodil-design-media-gallery.mjs +7 -17
- package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
- package/fesm2022/daffodil-design-menu.mjs +26 -63
- package/fesm2022/daffodil-design-menu.mjs.map +1 -1
- package/fesm2022/daffodil-design-modal.mjs +63 -130
- package/fesm2022/daffodil-design-modal.mjs.map +1 -1
- package/fesm2022/daffodil-design-navbar.mjs +7 -20
- package/fesm2022/daffodil-design-navbar.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification-examples.mjs +16 -41
- package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification.mjs +112 -116
- package/fesm2022/daffodil-design-notification.mjs.map +1 -1
- package/fesm2022/daffodil-design-paginator.mjs +8 -21
- package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
- package/fesm2022/daffodil-design-progress-bar-examples.mjs +6 -6
- package/fesm2022/daffodil-design-progress-bar-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-progress-bar.mjs +74 -115
- package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
- package/fesm2022/daffodil-design-quantity-field.mjs +11 -3
- package/fesm2022/daffodil-design-quantity-field.mjs.map +1 -1
- package/fesm2022/daffodil-design-select-examples.mjs +4 -4
- package/fesm2022/daffodil-design-select-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-select.mjs +50 -117
- package/fesm2022/daffodil-design-select.mjs.map +1 -1
- package/fesm2022/daffodil-design-sidebar-examples.mjs +29 -3
- package/fesm2022/daffodil-design-sidebar-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-sidebar.mjs +39 -78
- package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
- package/fesm2022/daffodil-design-sticky-examples.mjs +25 -0
- package/fesm2022/daffodil-design-sticky-examples.mjs.map +1 -0
- package/fesm2022/daffodil-design-tabs.mjs +54 -131
- package/fesm2022/daffodil-design-tabs.mjs.map +1 -1
- package/fesm2022/daffodil-design-text-snippet.mjs +17 -8
- package/fesm2022/daffodil-design-text-snippet.mjs.map +1 -1
- package/fesm2022/daffodil-design-textarea-examples.mjs +3 -3
- package/fesm2022/daffodil-design-textarea-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-textarea.mjs +49 -25
- package/fesm2022/daffodil-design-textarea.mjs.map +1 -1
- package/fesm2022/daffodil-design-toast.mjs +42 -128
- package/fesm2022/daffodil-design-toast.mjs.map +1 -1
- package/fesm2022/daffodil-design-tree.mjs +26 -70
- package/fesm2022/daffodil-design-tree.mjs.map +1 -1
- package/fesm2022/daffodil-design.mjs +164 -17
- package/fesm2022/daffodil-design.mjs.map +1 -1
- package/hero/README.md +39 -25
- package/hero/examples/basic-hero/basic-hero.component.d.ts +6 -0
- package/hero/examples/public_api.d.ts +1 -0
- package/hero/hero/hero.component.d.ts +21 -4
- package/hero/hero-body/hero-body.directive.d.ts +10 -4
- package/hero/hero-icon/hero-icon.directive.d.ts +10 -4
- package/hero/hero-subtitle/hero-subtitle.directive.d.ts +8 -4
- package/hero/hero-tagline/hero-tagline.directive.d.ts +8 -4
- package/hero/hero-title/hero-title.directive.d.ts +8 -4
- package/image/image/image.component.d.ts +0 -4
- package/input/input.component.d.ts +29 -9
- package/list/README.md +43 -13
- package/list/examples/multiline-list/multiline-list.component.d.ts +1 -0
- package/list/list/list.component.d.ts +12 -24
- package/list/list-item/list-item.component.d.ts +13 -20
- package/list/list-item-title/list-item-title.directive.d.ts +13 -0
- package/list/list.d.ts +8 -2
- package/list/list.module.d.ts +4 -3
- package/list/nav-list/nav-list.component.d.ts +17 -0
- package/list/public_api.d.ts +5 -2
- package/list/src/list-base.scss +40 -0
- package/list/src/list-theme.scss +5 -0
- package/media-gallery/media-gallery/media-gallery.component.d.ts +0 -6
- package/menu/menu/menu.component.d.ts +0 -12
- package/menu/menu-activator/menu-activator.component.d.ts +4 -5
- package/menu/menu-item/menu-item.component.d.ts +0 -10
- package/modal/modal/modal.component.d.ts +12 -33
- package/modal/modal-actions/modal-actions.component.d.ts +0 -4
- package/modal/modal-close/modal-close.directive.d.ts +1 -8
- package/modal/modal-content/modal-content.component.d.ts +0 -4
- package/modal/modal-header/modal-header.component.d.ts +0 -4
- package/modal/modal-title/modal-title.directive.d.ts +0 -11
- package/navbar/navbar/navbar.component.d.ts +0 -8
- package/navbar/src/navbar-theme.scss +2 -1
- package/notification/README.md +39 -24
- package/notification/examples/default-notification/default-notification.component.d.ts +0 -2
- package/notification/examples/public_api.d.ts +1 -5
- package/notification/helpers/notification-orientation.d.ts +17 -0
- package/notification/notification/notification.component.d.ts +39 -23
- package/notification/notification-actions/notification-actions.directive.d.ts +11 -4
- package/notification/notification-message/notification-message.directive.d.ts +9 -4
- package/notification/notification-subtitle/notification-subtitle.directive.d.ts +3 -4
- package/notification/notification-title/notification-title.directive.d.ts +8 -4
- package/notification/public_api.d.ts +6 -5
- package/package.json +1 -1
- package/paginator/paginator/paginator.component.d.ts +0 -11
- package/progress-bar/README.md +31 -8
- package/progress-bar/progress-bar-label/progress-bar-label.directive.d.ts +9 -5
- package/progress-bar/progress-bar.component.d.ts +39 -35
- package/progress-bar/public_api.d.ts +2 -2
- package/quantity-field/quantity-field.component.d.ts +10 -0
- package/scss/global.scss +0 -1
- package/select/select/select.component.d.ts +13 -25
- package/select/select.d.ts +1 -2
- package/sidebar/README.md +67 -72
- package/sidebar/examples/over-and-under-sidebars/over-and-under-sidebars.component.d.ts +0 -1
- package/sidebar/examples/sidebar-sides/sidebar-sides.component.d.ts +11 -0
- package/sidebar/sidebar/sidebar.component.d.ts +0 -9
- package/sidebar/sidebar-footer/sidebar-footer.component.d.ts +0 -4
- package/sidebar/sidebar-header/sidebar-header-action/sidebar-header-action.directive.d.ts +3 -0
- package/sidebar/sidebar-header/sidebar-header.component.d.ts +0 -4
- package/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts +0 -17
- package/sticky/examples/basic-sticky/basic-sticky.component.d.ts +5 -0
- package/sticky/examples/index.d.ts +1 -0
- package/sticky/examples/public_api.d.ts +2 -0
- package/tabs/README.md +38 -14
- package/tabs/tabs/tab/tab.component.d.ts +4 -16
- package/tabs/tabs/tab-activator/tab-activator.component.d.ts +6 -27
- package/tabs/tabs/tab-label/tab-label.component.d.ts +5 -2
- package/tabs/tabs/tab-panel/tab-panel.component.d.ts +7 -24
- package/tabs/tabs/tabs.component.d.ts +5 -11
- package/text-snippet/README.md +31 -3
- package/text-snippet/text-snippet.component.d.ts +17 -2
- package/textarea/textarea.component.d.ts +25 -5
- package/toast/README.md +47 -21
- package/toast/interfaces/toast-action.d.ts +4 -5
- package/toast/interfaces/toast-options.d.ts +3 -1
- package/toast/interfaces/toast.d.ts +22 -7
- package/toast/service/toast.service.d.ts +3 -3
- package/toast/toast/toast-config.d.ts +7 -3
- package/toast/toast/toast-template.component.d.ts +1 -1
- package/toast/toast/toast.component.d.ts +0 -2
- package/toast/toast-actions/toast-actions.directive.d.ts +0 -4
- package/toast/toast-message/toast-message.directive.d.ts +0 -4
- package/toast/toast-title/toast-title.directive.d.ts +0 -4
- package/tree/tree/tree.component.d.ts +0 -6
- package/tree/tree-item/tree-item.directive.d.ts +7 -35
- package/accordion/accordion/animation/accordion-animation-state.d.ts +0 -1
- package/accordion/accordion/animation/accordion-animation.d.ts +0 -4
- package/card/examples/raised-card/raised-card.component.d.ts +0 -11
- package/notification/examples/notification-with-actions/notification-with-actions.component.d.ts +0 -8
- package/progress-bar/animation/progress-bar-animation.d.ts +0 -4
- package/select/animation/select-animation-state.d.ts +0 -7
- package/select/animation/select-animation.d.ts +0 -4
- package/select/animation/state.enum.d.ts +0 -4
@@ -27,23 +27,6 @@ export declare class DaffSidebarViewportComponent implements AfterContentChecked
|
|
27
27
|
private bodyScroll;
|
28
28
|
private parentViewport;
|
29
29
|
private scroll;
|
30
|
-
/**
|
31
|
-
* @docs-private
|
32
|
-
*/
|
33
|
-
hostClass: boolean;
|
34
|
-
/**
|
35
|
-
* @docs-private
|
36
|
-
*/
|
37
|
-
get classes(): {
|
38
|
-
[x: string]: boolean;
|
39
|
-
'daff-sidebar-viewport': boolean;
|
40
|
-
'pad-left': boolean;
|
41
|
-
'pad-right': boolean;
|
42
|
-
};
|
43
|
-
/**
|
44
|
-
* @docs-private
|
45
|
-
*/
|
46
|
-
get isNavOnSide(): boolean;
|
47
30
|
/**
|
48
31
|
* @docs-private
|
49
32
|
*/
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class BasicStickyComponent {
|
3
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BasicStickyComponent, never>;
|
4
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BasicStickyComponent, "basic-sticky", never, {}, {}, never, never, true, never>;
|
5
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './public_api';
|
package/tabs/README.md
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
# Tabs
|
2
|
-
Tabs provide a way to navigate between panels that display related content.
|
2
|
+
Tabs provide a way to navigate between panels that display related content without leaving the page.
|
3
3
|
|
4
4
|
## Overview
|
5
|
-
Tabs
|
5
|
+
Tabs are useful for displaying related content in a compact space, like within [Modals](/libs/design/modal/README.md) or [Cards](/libs/design/card/README.md). They allow users to switch between sections without navigating away from the current view.
|
6
6
|
|
7
7
|
## Usage
|
8
8
|
|
9
9
|
### Within a standalone component
|
10
|
-
To use
|
10
|
+
To use tabs in a standalone component, import `DAFF_TABS_COMPONENTS` directly into your custom component:
|
11
11
|
|
12
12
|
```ts
|
13
13
|
import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
|
@@ -22,10 +22,25 @@ import { DAFF_TABS_COMPONENTS } from '@daffodil/design/tabs';
|
|
22
22
|
export class CustomComponent {}
|
23
23
|
```
|
24
24
|
|
25
|
-
##
|
25
|
+
## Anatomy
|
26
|
+
`<daff-tabs>` is composed of the following elements:
|
26
27
|
|
27
|
-
|
28
|
-
|
28
|
+
**Tab**\
|
29
|
+
Represents a single tab in a tablist and is used to group the label of a tab panel and the tab panel together. Use the `<daff-tab>` selector.
|
30
|
+
|
31
|
+
**Tab label**\
|
32
|
+
The clicakble label that activates its corresponding tab panel. Labels can contain text, icons, or both. Use the `<daff-tab-label>` selector.
|
33
|
+
|
34
|
+
**Icon**\
|
35
|
+
Use the `[daffPrefix]` or `[daffSuffix]` directive to add a decorative icon before or after the label text. This can be used to provide quick visual cues about the tab’s purpose.
|
36
|
+
|
37
|
+
**Tab panel**\
|
38
|
+
The content area displayed when a tab is active. Use the `<daff-tab-panel>` selector.
|
39
|
+
|
40
|
+
## Link mode
|
41
|
+
Tabs in link mode replace the tab buttons with anchors, allowing the selected tab to be connected to a URL.
|
42
|
+
|
43
|
+
By default, the current URL and `tab` query param will be used. These can be overriden with the `url` and `queryParam` inputs, respectively.
|
29
44
|
|
30
45
|
```html
|
31
46
|
<daff-tabs [linkMode]="true">
|
@@ -33,20 +48,29 @@ Tabs in link mode replaces the tab buttons with anchors. This allows the selecte
|
|
33
48
|
```
|
34
49
|
|
35
50
|
## Accessbility
|
36
|
-
Tabs follow the [ARIA
|
51
|
+
Tabs follow the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/), using `tablist`, `tab`, and `tabpanel` elements with the appropriate roles and integrated keyboard interactions.
|
52
|
+
|
53
|
+
Each `<daff-tab>` is automatically assigned a unique `id`. This id is referenced by the corresponding `<daff-tab-panel>` via its `aria-labelledby` attribute, ensuring the panel is associated with its label. You can override the autogenerated `id` by setting a custom `id` on `<daff-tab>`:
|
54
|
+
|
55
|
+
```html
|
56
|
+
<daff-tab id="custom tab id">
|
57
|
+
</daff-tab>
|
58
|
+
```
|
59
|
+
|
60
|
+
### Best practices
|
61
|
+
To ensure full accessibility compliance with the WAI-ARIA design pattern:
|
37
62
|
|
38
|
-
|
39
|
-
A meaningful `aria-label` should be set on `<daff-tabs>` by using the `aria-label` property. This will set the `aria-label` on the `tablist` element.
|
63
|
+
- A meaningful `aria-label` should be set on `<daff-tabs>` using the `aria-label` attribute.
|
40
64
|
|
41
65
|
```html
|
42
66
|
<daff-tabs aria-label="Custom aria label">
|
43
67
|
</daff-tabs>
|
44
68
|
```
|
45
69
|
|
46
|
-
### Keyboard
|
70
|
+
### Keyboard interactions
|
47
71
|
| Key | Action |
|
48
72
|
| --- | ------ |
|
49
|
-
| Left Arrow | Moves focus and activates previous tab. If focus is on the first tab, moves
|
50
|
-
| Right Arrow | Moves focus and activates next tab. If focus is on the last tab, moves
|
51
|
-
| Home | Moves focus and activates first tab. |
|
52
|
-
| End | Moves focus and activates last tab. |
|
73
|
+
| `Left Arrow` | Moves focus and activates the previous tab. If focus is on the first tab, focus moves to the last tab. |
|
74
|
+
| `Right Arrow` | Moves focus and activates the next tab. If focus is on the last tab, focus moves to the first tab. |
|
75
|
+
| `Home` | Moves focus and activates the first tab. |
|
76
|
+
| `End` | Moves focus and activates the last tab. |
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import { TemplateRef } from '@angular/core';
|
2
2
|
import * as i0 from "@angular/core";
|
3
3
|
/**
|
4
|
-
*
|
4
|
+
* Tab is a single tab in the tablist that is used to group the label of a tab panel and the tab panel together.
|
5
5
|
*
|
6
6
|
* A `<daff-tab>` should include the DaffTabLabelComponent and DaffTabPanelComponent components in order to properly structure the UI.
|
7
7
|
*
|
8
|
-
* @example
|
8
|
+
* @example
|
9
9
|
* ```html
|
10
10
|
* <daff-tab>
|
11
11
|
* <daff-tab-label>
|
@@ -21,12 +21,6 @@ import * as i0 from "@angular/core";
|
|
21
21
|
export declare class DaffTabComponent {
|
22
22
|
/**
|
23
23
|
* Whether the tab is disabled.
|
24
|
-
*
|
25
|
-
* @example Using the `disabled` property
|
26
|
-
* ```html
|
27
|
-
* <daff-tab [disabled]="true">
|
28
|
-
* </daff-tab>
|
29
|
-
* ```
|
30
24
|
*/
|
31
25
|
disabled: boolean;
|
32
26
|
/**
|
@@ -38,14 +32,8 @@ export declare class DaffTabComponent {
|
|
38
32
|
*/
|
39
33
|
labelRef: TemplateRef<any>;
|
40
34
|
/**
|
41
|
-
* A unique id for the tab component.
|
42
|
-
*
|
43
|
-
* The `id` is automatically generated by linking the prefix 'daff-tab-' with an incrementing `tabId`. This value can be customized by passing a different `id` value via the component's `id` input.
|
44
|
-
*
|
45
|
-
* @example Using the `id` property
|
46
|
-
* ```html
|
47
|
-
* <daff-tab [id]="'custom-id'"></daff-tab>
|
48
|
-
* ```
|
35
|
+
* A unique id for the tab component. Defaults to an autogenerated value. When using this,
|
36
|
+
* it's your responsibility to ensure that the id for each tab is unique.
|
49
37
|
*/
|
50
38
|
id: string;
|
51
39
|
/**
|
@@ -1,39 +1,22 @@
|
|
1
|
-
import {
|
1
|
+
import { ElementRef } from '@angular/core';
|
2
2
|
import { DaffSelectableDirective } from '@daffodil/design';
|
3
3
|
import * as i0 from "@angular/core";
|
4
4
|
import * as i1 from "@daffodil/design";
|
5
|
-
export declare class DaffTabActivatorComponent
|
5
|
+
export declare class DaffTabActivatorComponent {
|
6
6
|
private el;
|
7
7
|
private selectableDirective;
|
8
8
|
/**
|
9
9
|
* @docs-private
|
10
|
-
|
11
|
-
class: boolean;
|
12
|
-
/**
|
13
|
-
* Sets the `role` to tab.
|
14
|
-
*/
|
15
|
-
/**
|
16
|
-
* @docs-private
|
17
|
-
*/
|
18
|
-
role: string;
|
19
|
-
/**
|
10
|
+
*
|
20
11
|
* Sets `aria-selected` to true if the component is selected and false if it's not selected.
|
21
12
|
*/
|
22
|
-
/**
|
23
|
-
* @docs-private
|
24
|
-
*/
|
25
13
|
get ariaSelected(): boolean;
|
26
|
-
/**
|
27
|
-
* Sets `tabindex` to `0` if the component is selected and `-1` if it's not selected.
|
28
|
-
*/
|
29
14
|
/**
|
30
15
|
* @docs-private
|
16
|
+
*
|
17
|
+
* Sets `tabindex` to `0` if the component is selected and `-1` if it's not selected.
|
31
18
|
*/
|
32
19
|
get tabIndex(): "0" | "-1";
|
33
|
-
/**
|
34
|
-
* @docs-private
|
35
|
-
*/
|
36
|
-
ariaControls: string;
|
37
20
|
constructor(el: ElementRef, selectableDirective: DaffSelectableDirective);
|
38
21
|
/**
|
39
22
|
* The html id of the tab activator component
|
@@ -41,11 +24,7 @@ export declare class DaffTabActivatorComponent implements OnInit {
|
|
41
24
|
tabActivatorId: string;
|
42
25
|
panelId: string;
|
43
26
|
/**
|
44
|
-
*
|
45
|
-
*/
|
46
|
-
ngOnInit(): void;
|
47
|
-
/**
|
48
|
-
* Sets focus to the native element of the component
|
27
|
+
* Sets focus to the native element of the component.
|
49
28
|
*/
|
50
29
|
focus(): void;
|
51
30
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabActivatorComponent, never>;
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import { DaffPrefixDirective, DaffSuffixDirective } from '@daffodil/design';
|
2
2
|
import * as i0 from "@angular/core";
|
3
3
|
/**
|
4
|
-
*
|
4
|
+
* Tab label is the clicakble label that activates its corresponding tab panel. Labels can contain text, icons, or both.
|
5
5
|
*
|
6
|
-
* @example
|
6
|
+
* @example
|
7
7
|
* ```html
|
8
8
|
* <daff-tab-label>
|
9
9
|
* <div daffPrefix></div>
|
@@ -13,6 +13,9 @@ import * as i0 from "@angular/core";
|
|
13
13
|
* ```
|
14
14
|
*/
|
15
15
|
export declare class DaffTabLabelComponent {
|
16
|
+
/**
|
17
|
+
* @docs-private
|
18
|
+
*/
|
16
19
|
_prefix: DaffPrefixDirective;
|
17
20
|
/**
|
18
21
|
* @docs-private
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import { DaffTabComponent } from '../tab/tab.component';
|
2
2
|
import * as i0 from "@angular/core";
|
3
3
|
/**
|
4
|
-
*
|
4
|
+
* Tab panel is the content area displayed when a tab is active.
|
5
5
|
*
|
6
|
-
* @example
|
6
|
+
* @example
|
7
7
|
* ```html
|
8
8
|
* <daff-tab-panel>
|
9
9
|
* <!-- Tab panel content goes here -->
|
@@ -12,28 +12,6 @@ import * as i0 from "@angular/core";
|
|
12
12
|
*/
|
13
13
|
export declare class DaffTabPanelComponent {
|
14
14
|
private tab;
|
15
|
-
/**
|
16
|
-
* @docs-private
|
17
|
-
*/
|
18
|
-
private class;
|
19
|
-
/**
|
20
|
-
* @docs-private
|
21
|
-
*
|
22
|
-
* Sets the `role` to tabpanel.
|
23
|
-
*/
|
24
|
-
role: string;
|
25
|
-
/**
|
26
|
-
* @docs-private
|
27
|
-
*
|
28
|
-
* `aria-labelledby` for the tab.
|
29
|
-
*/
|
30
|
-
ariaLabelledBy: string;
|
31
|
-
/**
|
32
|
-
* @docs-private
|
33
|
-
*
|
34
|
-
* Sets the `tabindex` to 0.
|
35
|
-
*/
|
36
|
-
tabIndex: string;
|
37
15
|
private _id;
|
38
16
|
/**
|
39
17
|
* @docs-private
|
@@ -41,6 +19,11 @@ export declare class DaffTabPanelComponent {
|
|
41
19
|
* Dynamically binds the tab panel's id to a unique value generated from the associated tab's panelId.
|
42
20
|
*/
|
43
21
|
get tabPanelId(): string;
|
22
|
+
private _ariaLabelledBy;
|
23
|
+
/**
|
24
|
+
* @docs-private
|
25
|
+
*/
|
26
|
+
get ariaLabelledBy(): string;
|
44
27
|
constructor(tab: DaffTabComponent);
|
45
28
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabPanelComponent, never>;
|
46
29
|
static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabPanelComponent, "daff-tab-panel", never, {}, {}, never, ["*"], true, never>;
|
@@ -6,9 +6,9 @@ import { DaffTabActivatorComponent } from './tab-activator/tab-activator.compone
|
|
6
6
|
import { DaffTabLabelComponent } from './tab-label/tab-label.component';
|
7
7
|
import * as i0 from "@angular/core";
|
8
8
|
/**
|
9
|
-
* Tabs provide a way to navigate between panels that display related content.
|
9
|
+
* Tabs provide a way to navigate between panels that display related content without leaving the page.
|
10
10
|
*
|
11
|
-
* @example
|
11
|
+
* @example
|
12
12
|
* ```html
|
13
13
|
* <daff-tabs aria-label="List of tabs">
|
14
14
|
* <daff-tab>
|
@@ -35,10 +35,6 @@ import * as i0 from "@angular/core";
|
|
35
35
|
export declare class DaffTabsComponent implements AfterContentInit, OnInit {
|
36
36
|
private cdRef;
|
37
37
|
private location;
|
38
|
-
/**
|
39
|
-
* @docs-private
|
40
|
-
*/
|
41
|
-
private class;
|
42
38
|
/**
|
43
39
|
* @docs-private
|
44
40
|
*
|
@@ -49,16 +45,14 @@ export declare class DaffTabsComponent implements AfterContentInit, OnInit {
|
|
49
45
|
* The tab that is selected on initial load. If it's not used, the first tab in the tablist will be selected by default.
|
50
46
|
*/
|
51
47
|
initiallySelected: string;
|
52
|
-
/**
|
53
|
-
* aria-label for the tab.
|
54
|
-
*/
|
55
48
|
/**
|
56
49
|
* @docs-private
|
50
|
+
*
|
51
|
+
* aria-label for the tab.
|
57
52
|
*/
|
58
53
|
private externalAriaLabel;
|
59
54
|
/**
|
60
|
-
*
|
61
|
-
*
|
55
|
+
* `aria-label` to label the tablist.
|
62
56
|
*/
|
63
57
|
ariaLabel: string;
|
64
58
|
/**
|
package/text-snippet/README.md
CHANGED
@@ -1,5 +1,10 @@
|
|
1
|
-
# Text
|
2
|
-
|
1
|
+
# Text snippet
|
2
|
+
Text snippet is used to display a section of text, with the ability to show or hide content beyond one line of text.
|
3
|
+
|
4
|
+
## Overview
|
5
|
+
Text snippet is useful for showing previews of long content while allowing the user to expand and read the full text. It can be used to truncate long text blocks such as product descriptions, reviews, or articles. By default, the condensed mode is displayed with a toggle button to expand or collapse the full text.
|
6
|
+
|
7
|
+
<design-land-example-viewer-container example="basic-text-snippet"></design-land-example-viewer-container>
|
3
8
|
|
4
9
|
## Usage
|
5
10
|
|
@@ -17,4 +22,27 @@ import { DaffTextSnippetComponent } from '@daffodil/design/text-snippet';
|
|
17
22
|
],
|
18
23
|
})
|
19
24
|
export class CustomComponent {}
|
20
|
-
```
|
25
|
+
```
|
26
|
+
|
27
|
+
## Content options
|
28
|
+
Text snippet supports two ways of providing content.
|
29
|
+
|
30
|
+
- For text managed in a CMS or returned from an API, pass the content through the `html` input:
|
31
|
+
|
32
|
+
```html
|
33
|
+
<daff-text-snippet [html]="categoryDescription"></daff-text-snippet>
|
34
|
+
```
|
35
|
+
|
36
|
+
- For text written directly in a template, place the content inside the component:
|
37
|
+
|
38
|
+
```html
|
39
|
+
<daff-text-snippet>
|
40
|
+
Category description
|
41
|
+
</daff-text-snippet>
|
42
|
+
```
|
43
|
+
|
44
|
+
## Accessibility
|
45
|
+
Text snippet provides built-in support for assistive technologies:
|
46
|
+
|
47
|
+
- The toggle button includes the `aria-expanded` attribute, which reflects whether the snippet is currently expanded (`true`) or condensed (`false`).
|
48
|
+
- The button label dynamically switches between "Show More" and "Show Less" to provide clear context for screen reader users.
|
@@ -2,17 +2,32 @@ import { EventEmitter, ElementRef } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
3
3
|
export declare class DaffTextSnippetComponent {
|
4
4
|
/**
|
5
|
-
*
|
6
|
-
* should render a condensed version of the content.
|
5
|
+
* Whether or not the component should render a condensed version of the content.
|
7
6
|
*/
|
8
7
|
condensed: boolean;
|
8
|
+
/**
|
9
|
+
* The HTML content to render inside the snippet.
|
10
|
+
*/
|
9
11
|
html: string;
|
12
|
+
/**
|
13
|
+
* @docs-private
|
14
|
+
*/
|
15
|
+
ariaExpanded(): boolean;
|
16
|
+
/**
|
17
|
+
* @docs-private
|
18
|
+
*/
|
10
19
|
contentRef: ElementRef;
|
20
|
+
/**
|
21
|
+
* @docs-private
|
22
|
+
*/
|
11
23
|
htmlRef: ElementRef;
|
12
24
|
/**
|
13
25
|
* An output event that can be used to track the state of the component externally.
|
14
26
|
*/
|
15
27
|
toggle: EventEmitter<boolean>;
|
28
|
+
/**
|
29
|
+
* @docs-private
|
30
|
+
*/
|
16
31
|
toggleSnippet(): void;
|
17
32
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffTextSnippetComponent, never>;
|
18
33
|
static ɵcmp: i0.ɵɵComponentDeclaration<DaffTextSnippetComponent, "daff-text-snippet", never, { "condensed": { "alias": "condensed"; "required": false; }; "html": { "alias": "html"; "required": false; }; }, { "toggle": "toggle"; }, never, ["*"], true, never>;
|
@@ -14,10 +14,6 @@ export declare class DaffTextareaComponent extends DaffFormFieldControl<string>
|
|
14
14
|
private formField;
|
15
15
|
/** @docs-private */
|
16
16
|
controlType: string;
|
17
|
-
/**
|
18
|
-
* @docs-private
|
19
|
-
*/
|
20
|
-
class: boolean;
|
21
17
|
/**
|
22
18
|
* @docs-private
|
23
19
|
*/
|
@@ -27,6 +23,28 @@ export declare class DaffTextareaComponent extends DaffFormFieldControl<string>
|
|
27
23
|
* @docs-private
|
28
24
|
*/
|
29
25
|
get internalId(): string;
|
26
|
+
/**
|
27
|
+
* @docs-private
|
28
|
+
*/
|
29
|
+
get disabledAttribute(): true;
|
30
|
+
/**
|
31
|
+
* @docs-private
|
32
|
+
*
|
33
|
+
* Implemented as part of DaffFormFieldControl.
|
34
|
+
*/
|
35
|
+
disabled: boolean;
|
36
|
+
private _required;
|
37
|
+
/**
|
38
|
+
* @docs-private
|
39
|
+
*
|
40
|
+
* Implemented as part of DaffFormFieldControl.
|
41
|
+
*/
|
42
|
+
get required(): boolean;
|
43
|
+
set required(value: boolean);
|
44
|
+
/**
|
45
|
+
* @docs-private
|
46
|
+
*/
|
47
|
+
get requiredAttribute(): true;
|
30
48
|
/**
|
31
49
|
* @docs-private
|
32
50
|
*/
|
@@ -55,5 +73,7 @@ export declare class DaffTextareaComponent extends DaffFormFieldControl<string>
|
|
55
73
|
*/
|
56
74
|
get value(): string;
|
57
75
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffTextareaComponent, [{ optional: true; self: true; }, null, null]>;
|
58
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DaffTextareaComponent, "textarea[daff-textarea]", never, {}, {}, never, ["*"], true, never>;
|
76
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DaffTextareaComponent, "textarea[daff-textarea]", never, { "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, {}, never, ["*"], true, never>;
|
77
|
+
static ngAcceptInputType_disabled: unknown;
|
78
|
+
static ngAcceptInputType_required: unknown;
|
59
79
|
}
|
package/toast/README.md
CHANGED
@@ -1,14 +1,15 @@
|
|
1
1
|
# Toast
|
2
|
-
Toasts are
|
2
|
+
Toasts are notifications that provide application-level information. They are designed to mimic push notifications and appear temporarily on the screen.
|
3
3
|
|
4
4
|
## Overview
|
5
|
-
Toasts
|
5
|
+
Toasts communicate updates about actions or events that require attention but are not directly tied to specific page content.
|
6
|
+
|
7
|
+
For short messages tied to page-level content or actions, use the [Notification](/libs/design/notification/README.md) component.
|
6
8
|
|
7
|
-
## Basic toast
|
8
9
|
<design-land-example-viewer-container example="default-toast"></design-land-example-viewer-container>
|
9
10
|
|
10
|
-
##
|
11
|
-
`provideDaffToast()`
|
11
|
+
## Usage
|
12
|
+
Add `provideDaffToast()` to the root provider of your application to enable toast functionality:
|
12
13
|
|
13
14
|
```ts
|
14
15
|
import { provideDaffToast } from '@daffodil/design/toast';
|
@@ -22,37 +23,62 @@ import { provideDaffToast } from '@daffodil/design/toast';
|
|
22
23
|
export class AppModule {}
|
23
24
|
```
|
24
25
|
|
26
|
+
## Anatomy
|
27
|
+
When opening a toast with the `DaffToastService`, you can provide a `title`, `message`, and `actions` to define its content.
|
28
|
+
|
29
|
+
**Title**\
|
30
|
+
The primary text that summarizes the purpose of the toast.
|
31
|
+
|
32
|
+
**Message**\
|
33
|
+
Provides additional details or context about the toast. Keep this brief—ideally one to two short sentences.
|
34
|
+
|
35
|
+
**Actions**\
|
36
|
+
Include actionable buttons related to the toast. **A maximum of two buttons is recommended** to keep the toast concise.
|
37
|
+
|
38
|
+
```ts
|
39
|
+
open() {
|
40
|
+
this.toast = this.toastService.open({
|
41
|
+
title: 'Update Available' + ' ' + this.count++,
|
42
|
+
message: 'A new version of this page is available.',
|
43
|
+
actions: [
|
44
|
+
{ content: 'Update', color: 'theme-contrast', size: 'sm', eventEmitter: this.update },
|
45
|
+
{ content: 'Remind me later', type: 'flat', size: 'sm', eventEmitter: this.closeToast },
|
46
|
+
],
|
47
|
+
});
|
48
|
+
}
|
49
|
+
```
|
50
|
+
|
25
51
|
## Dismissal
|
26
|
-
|
52
|
+
Toasts can be dismissed automatically via a timed duration or manually with a close button.
|
27
53
|
|
28
|
-
|
54
|
+
`duration` and `dismissible` can be configured when opening a toast with the `DaffToastService`.
|
29
55
|
|
30
56
|
### Timed duration
|
31
|
-
|
57
|
+
By default, toasts without actions dismiss automatically after `5000ms`. Toasts with actions remain visible until dismissed manually or until an action is taken.
|
32
58
|
|
33
|
-
> Actionable toasts should
|
59
|
+
> Actionable toasts should remain persistent. If a duration is required, make sure it is long enough for users to engage with the actions.
|
34
60
|
|
35
61
|
<design-land-example-viewer-container example="toast-with-custom-duration"></design-land-example-viewer-container>
|
36
62
|
|
37
63
|
### Close button
|
38
|
-
The close button is hidden by default
|
64
|
+
The close button is hidden by default. When a toast contains actions, the `dismissible` property is ignored.
|
65
|
+
|
66
|
+
For non-actionable toasts, the close button can be displayed by setting `dismissible: true`.
|
39
67
|
|
40
68
|
<design-land-example-viewer-container example="dismissible-toast"></design-land-example-viewer-container>
|
41
69
|
|
42
70
|
## Stacking
|
43
|
-
A maximum of three toasts can be
|
71
|
+
A maximum of three toasts can be displayed at once. Toasts stack vertically with the most recent toast at the top.
|
44
72
|
|
45
73
|
## Statuses
|
46
|
-
|
74
|
+
Toast status can be set when opening a toast through the `DaffToastService` by using a `DaffStatus` value.
|
47
75
|
|
48
76
|
<design-land-example-viewer-container example="toast-status"></design-land-example-viewer-container>
|
49
77
|
|
50
78
|
## Positions
|
51
|
-
|
79
|
+
On desktop, toasts appear in the top-right corner by default.
|
52
80
|
|
53
|
-
You can customize
|
54
|
-
|
55
|
-
To customize toast positions, configure the `position` property in the `provideDaffToast` provider of your root component:
|
81
|
+
You can customize their position using the `position` property in `provideDaffToast()`:
|
56
82
|
|
57
83
|
```ts
|
58
84
|
providers: [
|
@@ -65,14 +91,14 @@ providers: [
|
|
65
91
|
],
|
66
92
|
```
|
67
93
|
|
68
|
-
> Note: On mobile
|
94
|
+
> Note: On mobile, toasts always appear in the bottom-center position, regardless of configuration settings.
|
69
95
|
|
70
96
|
## Accessibility
|
71
|
-
|
72
|
-
|
73
|
-
|
97
|
+
Toasts announce their messages using appropriate ARIA roles:
|
98
|
+
- `role="status"` (default): Equivalent to `aria-live="polite"`, announcing messages without interrupting the user.
|
99
|
+
- role="alertdialog": Used when a toast contains actions. The toast will be focus trapped, and focus immediately moves to the actions.
|
74
100
|
|
75
|
-
Avoid setting a duration on toasts
|
101
|
+
Avoid setting a duration on actionable toasts, as they may disappear before the user can interact with them.
|
76
102
|
|
77
103
|
### Keyboard Interactions
|
78
104
|
| Key | Action |
|
@@ -2,8 +2,7 @@ import { EventEmitter } from '@angular/core';
|
|
2
2
|
import { DaffPalette, DaffStatus } from '@daffodil/design';
|
3
3
|
import { DaffToastActionButtonSize, DaffToastActionButtonType } from './toast-action.type';
|
4
4
|
/**
|
5
|
-
*
|
6
|
-
* displayed using the {@link DaffButtonComponent}.
|
5
|
+
* Configuration for an action button inside a toast. Actions are rendered using {@link DaffButtonComponent}.
|
7
6
|
*/
|
8
7
|
export interface DaffToastAction {
|
9
8
|
/**
|
@@ -17,13 +16,13 @@ export interface DaffToastAction {
|
|
17
16
|
*/
|
18
17
|
content: string;
|
19
18
|
/**
|
20
|
-
* The size
|
19
|
+
* The button size.
|
21
20
|
*
|
22
21
|
* Matches one of the predefined sizes supported by {@link DaffButtonComponent}.
|
23
22
|
*/
|
24
23
|
size?: DaffToastActionButtonSize;
|
25
24
|
/**
|
26
|
-
* The color
|
25
|
+
* The button color.
|
27
26
|
*
|
28
27
|
* Do not use both `color` and `status` simultaneously.
|
29
28
|
*/
|
@@ -39,7 +38,7 @@ export interface DaffToastAction {
|
|
39
38
|
*/
|
40
39
|
data?: Record<string, any>;
|
41
40
|
/**
|
42
|
-
*
|
41
|
+
* Emits when the action is triggered.
|
43
42
|
*/
|
44
43
|
eventEmitter?: EventEmitter<DaffToastAction>;
|
45
44
|
}
|
@@ -11,7 +11,9 @@ export interface DaffToastOptions {
|
|
11
11
|
* The position of all toasts.
|
12
12
|
*/
|
13
13
|
position: DaffToastPosition;
|
14
|
-
/**
|
14
|
+
/**
|
15
|
+
* @docs-private
|
16
|
+
*/
|
15
17
|
useParent?: boolean;
|
16
18
|
}
|
17
19
|
export declare const daffToastDefaultOptions: DaffToastOptions;
|