@daffodil/design 0.73.0 → 0.74.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/README.md +20 -22
- package/container/README.md +11 -8
- package/esm2022/daffodil-design.mjs +2 -2
- package/esm2022/index.mjs +6 -0
- package/esm2022/notification/daffodil-design-notification.mjs +2 -2
- package/esm2022/notification/examples/default-notification/default-notification.component.mjs +12 -7
- package/esm2022/notification/examples/dismissible-notification/dismissible-notification.component.mjs +11 -6
- package/esm2022/notification/examples/notification-orientations/notification-orientations.component.mjs +5 -6
- package/esm2022/notification/examples/notification-status/notification-status.component.mjs +5 -6
- package/esm2022/notification/examples/notification-with-actions/notification-with-actions.component.mjs +24 -0
- package/esm2022/notification/examples/notification-with-actions/notification-with-actions.module.mjs +36 -0
- package/esm2022/notification/examples/public_api.mjs +4 -1
- package/esm2022/notification/index.mjs +2 -0
- package/esm2022/notification/notification/notification.component.mjs +30 -16
- package/esm2022/paginator/daffodil-design-paginator.mjs +2 -2
- package/esm2022/paginator/index.mjs +2 -0
- package/esm2022/progress-bar/daffodil-design-progress-bar.mjs +2 -2
- package/esm2022/progress-bar/index.mjs +2 -0
- package/fesm2022/daffodil-design-notification-examples.mjs +70 -16
- package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification.mjs +46 -33
- package/fesm2022/daffodil-design-notification.mjs.map +1 -1
- package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
- package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
- package/fesm2022/daffodil-design.mjs +5 -0
- package/fesm2022/daffodil-design.mjs.map +1 -1
- package/index.d.ts +2 -2
- package/loading-icon/README.md +1 -1
- package/notification/README.md +49 -23
- package/notification/examples/default-notification/default-notification.component.d.ts +2 -0
- package/notification/examples/dismissible-notification/dismissible-notification.component.d.ts +2 -0
- package/notification/examples/notification-with-actions/notification-with-actions.component.d.ts +8 -0
- package/notification/examples/notification-with-actions/notification-with-actions.module.d.ts +11 -0
- package/notification/index.d.ts +0 -4
- package/notification/notification/notification.component.d.ts +15 -6
- package/package.json +1 -1
- package/paginator/index.d.ts +0 -4
- package/progress-bar/index.d.ts +0 -4
- package/scss/typography/_index.scss +1 -1
- package/scss/typography/utilities/_variables.scss +14 -4
- package/sidebar/README.md +1 -1
- package/toast/README.md +2 -2
package/index.d.ts
CHANGED
package/loading-icon/README.md
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
Loading icons are used as an indicator of an event in progress.
|
3
3
|
|
4
4
|
## Overview
|
5
|
-
Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the [Progress Bar](
|
5
|
+
Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the [Progress Bar](/libs/design/progress-bar/README.md) component instead.
|
6
6
|
|
7
7
|
## Diameter
|
8
8
|
The diameter of a loading icon can be defined by using the `diameter` property. By default, the diameter is set to `60`.
|
package/notification/README.md
CHANGED
@@ -1,23 +1,49 @@
|
|
1
|
-
#
|
2
|
-
Notifications
|
3
|
-
|
4
|
-
##
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
1
|
+
# Notification
|
2
|
+
Notifications provide a way to display and communicate information related to user actions within a page's content.
|
3
|
+
|
4
|
+
## Overview
|
5
|
+
Notifications are used to display short messages that provide context in close promixity to a piece of content. They're often used to provide feedback or to notify users about an action they performed within a page. Notifications should not be used to display app-level alerts. Instead, use the [Toast](/libs/design/toast/README.md) component.
|
6
|
+
|
7
|
+
### Default Notification
|
8
|
+
<design-land-example-viewer-container example="default-notification"></design-land-example-viewer-container>
|
9
|
+
|
10
|
+
## Supported Content Types
|
11
|
+
|
12
|
+
### Icon
|
13
|
+
An icon can be used to give a user a brief overview of what the nofication is about. It can be added before the title and subtitle by using the <code>daffPrefix</code> selector.
|
14
|
+
|
15
|
+
### Title
|
16
|
+
Title gives a quick overview of what the notification is about. It can be added by using the `daffNotificationTitle` selector.
|
17
|
+
|
18
|
+
### Subtitle
|
19
|
+
Subtitle provides additional details about the notification that should be limited to one or two sentences. It can be added by using the `daffNotificationSubtitle` selector.
|
20
|
+
|
21
|
+
### Actions
|
22
|
+
Buttons can be included in notifications to resolve the notification or navigate them to a page with more information. It can be added by using the `daffNotificationActions` selector.
|
23
|
+
|
24
|
+
<design-land-example-viewer-container example="notification-with-actions"></design-land-example-viewer-container>d
|
25
|
+
|
26
|
+
## Properties
|
27
|
+
|
28
|
+
### Statuses
|
29
|
+
The status color of a notification can be updated by using the `status` property.
|
30
|
+
|
31
|
+
Supported statuses: `warn | danger | success`
|
32
|
+
|
33
|
+
#### Notification with statuses
|
34
|
+
<design-land-example-viewer-container example="notification-status"></design-land-example-viewer-container>
|
35
|
+
|
36
|
+
### Orientation
|
37
|
+
Orientation dictates how a notification's content is stacked — `vertical` or `horizontal`. Notifications are oriented vertically by default. The orientation of a notification can be defined or updated by using the `orientation` property.
|
38
|
+
|
39
|
+
<design-land-example-viewer-container example="notification-orientations"></design-land-example-viewer-container>
|
40
|
+
|
41
|
+
### Dismissing a notification
|
42
|
+
Notifications are not dismissible by default. They typically persist on the page until a user takes action that resolves the notification.
|
43
|
+
|
44
|
+
The close button is hidden by default but can be visible by setting the `dismissible` property to `true`. It should remain hidden if a notification has critical information for a user to read or interact with.
|
45
|
+
|
46
|
+
<design-land-example-viewer-container example="dismissible-notification"></design-land-example-viewer-container>
|
47
|
+
|
48
|
+
## Accessibility
|
49
|
+
Notifications with a `danger` or `warn` status have a `role="alert"` so that it can be announced by assistive technologies. See (live region roles)[https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#4._live_region_roles] for more information. All other notifications have a `role="status"`. Notifications have a `tabindex="0"` so users can discover them while tabbing through a page.
|
@@ -1,6 +1,8 @@
|
|
1
1
|
import * as i0 from "@angular/core";
|
2
2
|
export declare class DefaultNotificationComponent {
|
3
3
|
faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
4
|
+
showNotification: boolean;
|
5
|
+
toggleNotification(): void;
|
4
6
|
static ɵfac: i0.ɵɵFactoryDeclaration<DefaultNotificationComponent, never>;
|
5
7
|
static ɵcmp: i0.ɵɵComponentDeclaration<DefaultNotificationComponent, "default-notification", never, {}, {}, never, never, false, never>;
|
6
8
|
}
|
package/notification/examples/dismissible-notification/dismissible-notification.component.d.ts
CHANGED
@@ -1,6 +1,8 @@
|
|
1
1
|
import * as i0 from "@angular/core";
|
2
2
|
export declare class DismissibleNotificationComponent {
|
3
3
|
faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
4
|
+
hidden: boolean;
|
5
|
+
hideNotification(): void;
|
4
6
|
static ɵfac: i0.ɵɵFactoryDeclaration<DismissibleNotificationComponent, never>;
|
5
7
|
static ɵcmp: i0.ɵɵComponentDeclaration<DismissibleNotificationComponent, "dismissible-notification", never, {}, {}, never, never, false, never>;
|
6
8
|
}
|
package/notification/examples/notification-with-actions/notification-with-actions.component.d.ts
ADDED
@@ -0,0 +1,8 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class NotificationWithActionsComponent {
|
3
|
+
faExclamationCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
4
|
+
showNotification: boolean;
|
5
|
+
toggleNotification(): void;
|
6
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NotificationWithActionsComponent, never>;
|
7
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NotificationWithActionsComponent, "notification-with-actions", never, {}, {}, never, never, false, never>;
|
8
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
import * as i1 from "./notification-with-actions.component";
|
3
|
+
import * as i2 from "@angular/common";
|
4
|
+
import * as i3 from "@daffodil/design/notification";
|
5
|
+
import * as i4 from "@fortawesome/angular-fontawesome";
|
6
|
+
import * as i5 from "@daffodil/design/button";
|
7
|
+
export declare class NotificationWithActionsModule {
|
8
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NotificationWithActionsModule, never>;
|
9
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<NotificationWithActionsModule, [typeof i1.NotificationWithActionsComponent], [typeof i2.CommonModule, typeof i3.DaffNotificationModule, typeof i4.FontAwesomeModule, typeof i5.DaffButtonModule], [typeof i1.NotificationWithActionsComponent]>;
|
10
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<NotificationWithActionsModule>;
|
11
|
+
}
|
package/notification/index.d.ts
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
import { ElementRef, Renderer2, EventEmitter } from '@angular/core';
|
2
2
|
import { DaffPrefixable, DaffPrefixDirective, DaffStatusable } from '@daffodil/design';
|
3
|
+
import { DaffNotificationActionsDirective } from '../notification-actions/notification-actions.directive';
|
3
4
|
import * as i0 from "@angular/core";
|
4
5
|
/**
|
5
6
|
* An _elementRef is needed for the core mixins
|
@@ -20,28 +21,36 @@ declare const _daffNotificationBase: (new (...args: any[]) => {
|
|
20
21
|
}) & typeof DaffNotificationBase;
|
21
22
|
export type DaffNotificationOrientation = 'horizontal' | 'vertical';
|
22
23
|
/**
|
23
|
-
* DaffNotificationComponent provides a way to display and
|
24
|
-
*
|
24
|
+
* DaffNotificationComponent provides a way to display and communicate
|
25
|
+
* information related to user actions within a page's content.
|
25
26
|
*/
|
26
27
|
export declare class DaffNotificationComponent extends _daffNotificationBase implements DaffPrefixable, DaffStatusable {
|
27
28
|
private elementRef;
|
28
29
|
private renderer;
|
29
30
|
faTimes: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
31
|
+
_prefix: DaffPrefixDirective;
|
32
|
+
_actions: DaffNotificationActionsDirective;
|
30
33
|
class: boolean;
|
31
34
|
tabindex: string;
|
32
|
-
|
35
|
+
/**
|
36
|
+
* Sets role to alert when `status="warn"` or `status="danger"`.
|
37
|
+
* Sets role to status on all other instances.
|
38
|
+
*/
|
39
|
+
get role(): "status" | "alert";
|
33
40
|
get verticalOrientation(): boolean;
|
34
41
|
get horizontalOrientation(): boolean;
|
35
42
|
/** Whether or not a notification is closable */
|
36
43
|
dismissible: boolean;
|
37
|
-
closeNotification: EventEmitter<void>;
|
38
44
|
private _orientation;
|
39
45
|
get orientation(): DaffNotificationOrientation;
|
40
46
|
set orientation(value: DaffNotificationOrientation);
|
41
47
|
constructor(elementRef: ElementRef, renderer: Renderer2);
|
42
|
-
|
48
|
+
/**
|
49
|
+
* Output event triggered when the close icon is clicked.
|
50
|
+
*/
|
51
|
+
closeNotification: EventEmitter<void>;
|
43
52
|
onCloseNotification(event: Event): void;
|
44
53
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffNotificationComponent, never>;
|
45
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DaffNotificationComponent, "daff-notification", never, { "status": { "alias": "status"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "closeNotification": "closeNotification"; }, ["_prefix"], ["[daffPrefix]", "[daffNotificationTitle]", "[daffNotificationSubtitle]", "[daffNotificationActions]"], false, never>;
|
54
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DaffNotificationComponent, "daff-notification", never, { "status": { "alias": "status"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "closeNotification": "closeNotification"; }, ["_prefix", "_actions"], ["[daffPrefix]", "[daffNotificationTitle]", "[daffNotificationSubtitle]", "[daffNotificationActions]"], false, never>;
|
46
55
|
}
|
47
56
|
export {};
|
package/package.json
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.73.0","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"A consistent, sane api driver that works with different ecommerce systems.","repository":{"type":"git","url":"https://github.com/graycoreio/daffodil"},"peerDependencies":{"@angular/animations":"^17.0.0","@angular/common":"^17.0.0","@angular/core":"^17.0.0","@angular/forms":"^17.0.0","@angular/cdk":"^17.0.0","@daffodil/core":"0.73.0","@fortawesome/angular-fontawesome":"^0.14.1","@fortawesome/fontawesome-svg-core":"^6.4.2","@fortawesome/free-solid-svg-icons":"^6.4.2","@fortawesome/free-brands-svg-icons":"^6.4.2","@fortawesome/free-regular-svg-icons":"^6.4.2","modern-normalize":"^0.5.0","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^7.6.0"},"exports":{"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/typography/classes":{"sass":"./scss/typography/_classes.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/daffodil-design.mjs","esm":"./esm2022/daffodil-design.mjs","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./accordion/index.d.ts","esm2022":"./esm2022/accordion/daffodil-design-accordion.mjs","esm":"./esm2022/accordion/daffodil-design-accordion.mjs","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./article/index.d.ts","esm2022":"./esm2022/article/daffodil-design-article.mjs","esm":"./esm2022/article/daffodil-design-article.mjs","default":"./fesm2022/daffodil-design-article.mjs"},"./button":{"types":"./button/index.d.ts","esm2022":"./esm2022/button/daffodil-design-button.mjs","esm":"./esm2022/button/daffodil-design-button.mjs","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","esm2022":"./esm2022/callout/daffodil-design-callout.mjs","esm":"./esm2022/callout/daffodil-design-callout.mjs","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","esm2022":"./esm2022/card/daffodil-design-card.mjs","esm":"./esm2022/card/daffodil-design-card.mjs","default":"./fesm2022/daffodil-design-card.mjs"},"./container":{"types":"./container/index.d.ts","esm2022":"./esm2022/container/daffodil-design-container.mjs","esm":"./esm2022/container/daffodil-design-container.mjs","default":"./fesm2022/daffodil-design-container.mjs"},"./hero":{"types":"./hero/index.d.ts","esm2022":"./esm2022/hero/daffodil-design-hero.mjs","esm":"./esm2022/hero/daffodil-design-hero.mjs","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","esm2022":"./esm2022/image/daffodil-design-image.mjs","esm":"./esm2022/image/daffodil-design-image.mjs","default":"./fesm2022/daffodil-design-image.mjs"},"./link-set":{"types":"./link-set/index.d.ts","esm2022":"./esm2022/link-set/daffodil-design-link-set.mjs","esm":"./esm2022/link-set/daffodil-design-link-set.mjs","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","esm2022":"./esm2022/list/daffodil-design-list.mjs","esm":"./esm2022/list/daffodil-design-list.mjs","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","esm2022":"./esm2022/loading-icon/daffodil-design-loading-icon.mjs","esm":"./esm2022/loading-icon/daffodil-design-loading-icon.mjs","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","esm2022":"./esm2022/media-gallery/daffodil-design-media-gallery.mjs","esm":"./esm2022/media-gallery/daffodil-design-media-gallery.mjs","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","esm2022":"./esm2022/menu/daffodil-design-menu.mjs","esm":"./esm2022/menu/daffodil-design-menu.mjs","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","esm2022":"./esm2022/modal/daffodil-design-modal.mjs","esm":"./esm2022/modal/daffodil-design-modal.mjs","default":"./fesm2022/daffodil-design-modal.mjs"},"./navbar":{"types":"./navbar/index.d.ts","esm2022":"./esm2022/navbar/daffodil-design-navbar.mjs","esm":"./esm2022/navbar/daffodil-design-navbar.mjs","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","esm2022":"./esm2022/notification/daffodil-design-notification.mjs","esm":"./esm2022/notification/daffodil-design-notification.mjs","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","esm2022":"./esm2022/paginator/daffodil-design-paginator.mjs","esm":"./esm2022/paginator/daffodil-design-paginator.mjs","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./progress-bar/index.d.ts","esm2022":"./esm2022/progress-bar/daffodil-design-progress-bar.mjs","esm":"./esm2022/progress-bar/daffodil-design-progress-bar.mjs","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","esm2022":"./esm2022/sidebar/daffodil-design-sidebar.mjs","esm":"./esm2022/sidebar/daffodil-design-sidebar.mjs","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./toast":{"types":"./toast/index.d.ts","esm2022":"./esm2022/toast/daffodil-design-toast.mjs","esm":"./esm2022/toast/daffodil-design-toast.mjs","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","esm2022":"./esm2022/tree/daffodil-design-tree.mjs","esm":"./esm2022/tree/daffodil-design-tree.mjs","default":"./fesm2022/daffodil-design-tree.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","esm2022":"./esm2022/accordion/examples/daffodil-design-accordion-examples.mjs","esm":"./esm2022/accordion/examples/daffodil-design-accordion-examples.mjs","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","esm2022":"./esm2022/article/examples/daffodil-design-article-examples.mjs","esm":"./esm2022/article/examples/daffodil-design-article-examples.mjs","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","esm2022":"./esm2022/button/examples/daffodil-design-button-examples.mjs","esm":"./esm2022/button/examples/daffodil-design-button-examples.mjs","default":"./fesm2022/daffodil-design-button-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","esm2022":"./esm2022/callout/examples/daffodil-design-callout-examples.mjs","esm":"./esm2022/callout/examples/daffodil-design-callout-examples.mjs","default":"./fesm2022/daffodil-design-callout-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","esm2022":"./esm2022/card/examples/daffodil-design-card-examples.mjs","esm":"./esm2022/card/examples/daffodil-design-card-examples.mjs","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","esm2022":"./esm2022/checkbox/examples/daffodil-design-checkbox-examples.mjs","esm":"./esm2022/checkbox/examples/daffodil-design-checkbox-examples.mjs","default":"./fesm2022/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","esm2022":"./esm2022/container/examples/daffodil-design-container-examples.mjs","esm":"./esm2022/container/examples/daffodil-design-container-examples.mjs","default":"./fesm2022/daffodil-design-container-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","esm2022":"./esm2022/hero/examples/daffodil-design-hero-examples.mjs","esm":"./esm2022/hero/examples/daffodil-design-hero-examples.mjs","default":"./fesm2022/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","esm2022":"./esm2022/image/examples/daffodil-design-image-examples.mjs","esm":"./esm2022/image/examples/daffodil-design-image-examples.mjs","default":"./fesm2022/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","esm2022":"./esm2022/input/examples/daffodil-design-input-examples.mjs","esm":"./esm2022/input/examples/daffodil-design-input-examples.mjs","default":"./fesm2022/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","esm2022":"./esm2022/list/examples/daffodil-design-list-examples.mjs","esm":"./esm2022/list/examples/daffodil-design-list-examples.mjs","default":"./fesm2022/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","esm2022":"./esm2022/loading-icon/examples/daffodil-design-loading-icon-examples.mjs","esm":"./esm2022/loading-icon/examples/daffodil-design-loading-icon-examples.mjs","default":"./fesm2022/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","esm2022":"./esm2022/media-gallery/examples/daffodil-design-media-gallery-examples.mjs","esm":"./esm2022/media-gallery/examples/daffodil-design-media-gallery-examples.mjs","default":"./fesm2022/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","esm2022":"./esm2022/menu/examples/daffodil-design-menu-examples.mjs","esm":"./esm2022/menu/examples/daffodil-design-menu-examples.mjs","default":"./fesm2022/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","esm2022":"./esm2022/modal/examples/daffodil-design-modal-examples.mjs","esm":"./esm2022/modal/examples/daffodil-design-modal-examples.mjs","default":"./fesm2022/daffodil-design-modal-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","esm2022":"./esm2022/navbar/examples/daffodil-design-navbar-examples.mjs","esm":"./esm2022/navbar/examples/daffodil-design-navbar-examples.mjs","default":"./fesm2022/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","esm2022":"./esm2022/notification/examples/daffodil-design-notification-examples.mjs","esm":"./esm2022/notification/examples/daffodil-design-notification-examples.mjs","default":"./fesm2022/daffodil-design-notification-examples.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","esm2022":"./esm2022/paginator/examples/daffodil-design-paginator-examples.mjs","esm":"./esm2022/paginator/examples/daffodil-design-paginator-examples.mjs","default":"./fesm2022/daffodil-design-paginator-examples.mjs"},"./progress-bar/examples":{"types":"./progress-bar/examples/index.d.ts","esm2022":"./esm2022/progress-bar/examples/daffodil-design-progress-bar-examples.mjs","esm":"./esm2022/progress-bar/examples/daffodil-design-progress-bar-examples.mjs","default":"./fesm2022/daffodil-design-progress-bar-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","esm2022":"./esm2022/quantity-field/examples/daffodil-design-quantity-field-examples.mjs","esm":"./esm2022/quantity-field/examples/daffodil-design-quantity-field-examples.mjs","default":"./fesm2022/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","esm2022":"./esm2022/radio/examples/daffodil-design-radio-examples.mjs","esm":"./esm2022/radio/examples/daffodil-design-radio-examples.mjs","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","esm2022":"./esm2022/sidebar/examples/daffodil-design-sidebar-examples.mjs","esm":"./esm2022/sidebar/examples/daffodil-design-sidebar-examples.mjs","default":"./fesm2022/daffodil-design-sidebar-examples.mjs"},"./toast/examples":{"types":"./toast/examples/index.d.ts","esm2022":"./esm2022/toast/examples/daffodil-design-toast-examples.mjs","esm":"./esm2022/toast/examples/daffodil-design-toast-examples.mjs","default":"./fesm2022/daffodil-design-toast-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","esm2022":"./esm2022/tree/examples/daffodil-design-tree-examples.mjs","esm":"./esm2022/tree/examples/daffodil-design-tree-examples.mjs","default":"./fesm2022/daffodil-design-tree-examples.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.3.0"}}
|
1
|
+
{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.74.0","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"A consistent, sane api driver that works with different ecommerce systems.","repository":{"type":"git","url":"https://github.com/graycoreio/daffodil"},"peerDependencies":{"@angular/animations":"^17.0.0","@angular/common":"^17.0.0","@angular/core":"^17.0.0","@angular/forms":"^17.0.0","@angular/cdk":"^17.0.0","@daffodil/core":"0.74.0","@fortawesome/angular-fontawesome":"^0.14.1","@fortawesome/fontawesome-svg-core":"^6.4.2","@fortawesome/free-solid-svg-icons":"^6.4.2","@fortawesome/free-brands-svg-icons":"^6.4.2","@fortawesome/free-regular-svg-icons":"^6.4.2","modern-normalize":"^0.5.0","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^7.6.0"},"exports":{"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/typography":{"sass":"./scss/typography/_index.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/daffodil-design.mjs","esm":"./esm2022/daffodil-design.mjs","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./accordion/index.d.ts","esm2022":"./esm2022/accordion/daffodil-design-accordion.mjs","esm":"./esm2022/accordion/daffodil-design-accordion.mjs","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./article/index.d.ts","esm2022":"./esm2022/article/daffodil-design-article.mjs","esm":"./esm2022/article/daffodil-design-article.mjs","default":"./fesm2022/daffodil-design-article.mjs"},"./button":{"types":"./button/index.d.ts","esm2022":"./esm2022/button/daffodil-design-button.mjs","esm":"./esm2022/button/daffodil-design-button.mjs","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","esm2022":"./esm2022/callout/daffodil-design-callout.mjs","esm":"./esm2022/callout/daffodil-design-callout.mjs","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","esm2022":"./esm2022/card/daffodil-design-card.mjs","esm":"./esm2022/card/daffodil-design-card.mjs","default":"./fesm2022/daffodil-design-card.mjs"},"./container":{"types":"./container/index.d.ts","esm2022":"./esm2022/container/daffodil-design-container.mjs","esm":"./esm2022/container/daffodil-design-container.mjs","default":"./fesm2022/daffodil-design-container.mjs"},"./hero":{"types":"./hero/index.d.ts","esm2022":"./esm2022/hero/daffodil-design-hero.mjs","esm":"./esm2022/hero/daffodil-design-hero.mjs","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","esm2022":"./esm2022/image/daffodil-design-image.mjs","esm":"./esm2022/image/daffodil-design-image.mjs","default":"./fesm2022/daffodil-design-image.mjs"},"./link-set":{"types":"./link-set/index.d.ts","esm2022":"./esm2022/link-set/daffodil-design-link-set.mjs","esm":"./esm2022/link-set/daffodil-design-link-set.mjs","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","esm2022":"./esm2022/list/daffodil-design-list.mjs","esm":"./esm2022/list/daffodil-design-list.mjs","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","esm2022":"./esm2022/loading-icon/daffodil-design-loading-icon.mjs","esm":"./esm2022/loading-icon/daffodil-design-loading-icon.mjs","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","esm2022":"./esm2022/media-gallery/daffodil-design-media-gallery.mjs","esm":"./esm2022/media-gallery/daffodil-design-media-gallery.mjs","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","esm2022":"./esm2022/menu/daffodil-design-menu.mjs","esm":"./esm2022/menu/daffodil-design-menu.mjs","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","esm2022":"./esm2022/modal/daffodil-design-modal.mjs","esm":"./esm2022/modal/daffodil-design-modal.mjs","default":"./fesm2022/daffodil-design-modal.mjs"},"./navbar":{"types":"./navbar/index.d.ts","esm2022":"./esm2022/navbar/daffodil-design-navbar.mjs","esm":"./esm2022/navbar/daffodil-design-navbar.mjs","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","esm2022":"./esm2022/notification/daffodil-design-notification.mjs","esm":"./esm2022/notification/daffodil-design-notification.mjs","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","esm2022":"./esm2022/paginator/daffodil-design-paginator.mjs","esm":"./esm2022/paginator/daffodil-design-paginator.mjs","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./progress-bar/index.d.ts","esm2022":"./esm2022/progress-bar/daffodil-design-progress-bar.mjs","esm":"./esm2022/progress-bar/daffodil-design-progress-bar.mjs","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","esm2022":"./esm2022/sidebar/daffodil-design-sidebar.mjs","esm":"./esm2022/sidebar/daffodil-design-sidebar.mjs","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./toast":{"types":"./toast/index.d.ts","esm2022":"./esm2022/toast/daffodil-design-toast.mjs","esm":"./esm2022/toast/daffodil-design-toast.mjs","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","esm2022":"./esm2022/tree/daffodil-design-tree.mjs","esm":"./esm2022/tree/daffodil-design-tree.mjs","default":"./fesm2022/daffodil-design-tree.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","esm2022":"./esm2022/accordion/examples/daffodil-design-accordion-examples.mjs","esm":"./esm2022/accordion/examples/daffodil-design-accordion-examples.mjs","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","esm2022":"./esm2022/article/examples/daffodil-design-article-examples.mjs","esm":"./esm2022/article/examples/daffodil-design-article-examples.mjs","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","esm2022":"./esm2022/button/examples/daffodil-design-button-examples.mjs","esm":"./esm2022/button/examples/daffodil-design-button-examples.mjs","default":"./fesm2022/daffodil-design-button-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","esm2022":"./esm2022/callout/examples/daffodil-design-callout-examples.mjs","esm":"./esm2022/callout/examples/daffodil-design-callout-examples.mjs","default":"./fesm2022/daffodil-design-callout-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","esm2022":"./esm2022/card/examples/daffodil-design-card-examples.mjs","esm":"./esm2022/card/examples/daffodil-design-card-examples.mjs","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","esm2022":"./esm2022/checkbox/examples/daffodil-design-checkbox-examples.mjs","esm":"./esm2022/checkbox/examples/daffodil-design-checkbox-examples.mjs","default":"./fesm2022/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","esm2022":"./esm2022/container/examples/daffodil-design-container-examples.mjs","esm":"./esm2022/container/examples/daffodil-design-container-examples.mjs","default":"./fesm2022/daffodil-design-container-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","esm2022":"./esm2022/hero/examples/daffodil-design-hero-examples.mjs","esm":"./esm2022/hero/examples/daffodil-design-hero-examples.mjs","default":"./fesm2022/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","esm2022":"./esm2022/image/examples/daffodil-design-image-examples.mjs","esm":"./esm2022/image/examples/daffodil-design-image-examples.mjs","default":"./fesm2022/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","esm2022":"./esm2022/input/examples/daffodil-design-input-examples.mjs","esm":"./esm2022/input/examples/daffodil-design-input-examples.mjs","default":"./fesm2022/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","esm2022":"./esm2022/list/examples/daffodil-design-list-examples.mjs","esm":"./esm2022/list/examples/daffodil-design-list-examples.mjs","default":"./fesm2022/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","esm2022":"./esm2022/loading-icon/examples/daffodil-design-loading-icon-examples.mjs","esm":"./esm2022/loading-icon/examples/daffodil-design-loading-icon-examples.mjs","default":"./fesm2022/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","esm2022":"./esm2022/media-gallery/examples/daffodil-design-media-gallery-examples.mjs","esm":"./esm2022/media-gallery/examples/daffodil-design-media-gallery-examples.mjs","default":"./fesm2022/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","esm2022":"./esm2022/menu/examples/daffodil-design-menu-examples.mjs","esm":"./esm2022/menu/examples/daffodil-design-menu-examples.mjs","default":"./fesm2022/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","esm2022":"./esm2022/modal/examples/daffodil-design-modal-examples.mjs","esm":"./esm2022/modal/examples/daffodil-design-modal-examples.mjs","default":"./fesm2022/daffodil-design-modal-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","esm2022":"./esm2022/navbar/examples/daffodil-design-navbar-examples.mjs","esm":"./esm2022/navbar/examples/daffodil-design-navbar-examples.mjs","default":"./fesm2022/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","esm2022":"./esm2022/notification/examples/daffodil-design-notification-examples.mjs","esm":"./esm2022/notification/examples/daffodil-design-notification-examples.mjs","default":"./fesm2022/daffodil-design-notification-examples.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","esm2022":"./esm2022/paginator/examples/daffodil-design-paginator-examples.mjs","esm":"./esm2022/paginator/examples/daffodil-design-paginator-examples.mjs","default":"./fesm2022/daffodil-design-paginator-examples.mjs"},"./progress-bar/examples":{"types":"./progress-bar/examples/index.d.ts","esm2022":"./esm2022/progress-bar/examples/daffodil-design-progress-bar-examples.mjs","esm":"./esm2022/progress-bar/examples/daffodil-design-progress-bar-examples.mjs","default":"./fesm2022/daffodil-design-progress-bar-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","esm2022":"./esm2022/quantity-field/examples/daffodil-design-quantity-field-examples.mjs","esm":"./esm2022/quantity-field/examples/daffodil-design-quantity-field-examples.mjs","default":"./fesm2022/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","esm2022":"./esm2022/radio/examples/daffodil-design-radio-examples.mjs","esm":"./esm2022/radio/examples/daffodil-design-radio-examples.mjs","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","esm2022":"./esm2022/sidebar/examples/daffodil-design-sidebar-examples.mjs","esm":"./esm2022/sidebar/examples/daffodil-design-sidebar-examples.mjs","default":"./fesm2022/daffodil-design-sidebar-examples.mjs"},"./toast/examples":{"types":"./toast/examples/index.d.ts","esm2022":"./esm2022/toast/examples/daffodil-design-toast-examples.mjs","esm":"./esm2022/toast/examples/daffodil-design-toast-examples.mjs","default":"./fesm2022/daffodil-design-toast-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","esm2022":"./esm2022/tree/examples/daffodil-design-tree-examples.mjs","esm":"./esm2022/tree/examples/daffodil-design-tree-examples.mjs","default":"./fesm2022/daffodil-design-tree-examples.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.3.0"}}
|
package/paginator/index.d.ts
CHANGED
package/progress-bar/index.d.ts
CHANGED
@@ -1,9 +1,19 @@
|
|
1
|
-
$
|
2
|
-
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
1
|
+
$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
|
2
|
+
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !default;
|
3
|
+
$font-family-mono: ui-monospace, 'SFMono-Regular', SF Mono, Menlo, Consolas,
|
4
|
+
'Liberation Mono', monospace !default;
|
5
|
+
|
6
|
+
// these three variables will be deprecated in v1.0.0 in favor of more consistent naming
|
7
|
+
$body-font-family: $font-family-base;
|
3
8
|
$base-font-family: $body-font-family;
|
4
|
-
$monospace-font-family:
|
5
|
-
|
9
|
+
$monospace-font-family: $font-family-mono;
|
10
|
+
|
11
|
+
$font-size-sm: 0.875rem;
|
12
|
+
$font-size-base: 1rem;
|
13
|
+
$font-size-md: 1.25rem;
|
14
|
+
$font-size-lg: 1.5rem;
|
6
15
|
|
16
|
+
// these variables will be deprecated in v1.0.0 in favor of more consistent naming
|
7
17
|
$large-font-size: 1.5rem;
|
8
18
|
$medium-font-size: 1.25rem;
|
9
19
|
$normal-font-size: 1rem;
|
package/sidebar/README.md
CHANGED
@@ -54,7 +54,7 @@ A viewport navigation can either be:
|
|
54
54
|
The `BrowserAnimationsModule` or `NoopAnimationsModule` must be imported in the particular Angular `@NgModule` the sidebar is used in for the sidebar to render and work properly.
|
55
55
|
|
56
56
|
### Header and footer
|
57
|
-
The `<daff-sidebar-header>` includes optional title (`[daffSidebarHeaderTitle]`) and action (`[daffSidebarHeaderAction]`) selectors, and a slot to render custom content. The action selector should be used along with the `<daff-icon-button>` (view [Button Documentation](
|
57
|
+
The `<daff-sidebar-header>` includes optional title (`[daffSidebarHeaderTitle]`) and action (`[daffSidebarHeaderAction]`) selectors, and a slot to render custom content. The action selector should be used along with the `<daff-icon-button>` (view [Button Documentation](/libs/design/button/README.md)) to make sure that the action is positioned correctly and it passes WCAG guidelines.
|
58
58
|
|
59
59
|
The `<daff-sidebar-footer>` is a "holder" component with minimal default styling. Its main purpose is to position the footer at the bottom of the sidebar, allowing the sidebar's content to overflow and scroll while ensuring that the footer remains constantly visible.
|
60
60
|
|
package/toast/README.md
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
Toasts are small messages designed to mimic push notifications. They are used to provide users with application level information.
|
3
3
|
|
4
4
|
## Overview
|
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](
|
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
7
|
### Basic Toast
|
8
8
|
<design-land-article-encapsulated>
|
@@ -53,7 +53,7 @@ The following configurations are available in the `DaffToastService`:
|
|
53
53
|
| dismissible | boolean | Allows a toast to be dismissible via a close button | true |
|
54
54
|
| duration | number | The duration in milliseconds that a toast is visible before it's dismissed | 5000 |
|
55
55
|
|
56
|
-
The `actions` configurations are based on the properties of the `DaffButtonComponent` (view [Button Documentation](
|
56
|
+
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`.
|
57
57
|
|
58
58
|
### Dismissal
|
59
59
|
A toast can be dismissed via a timed duration, a close button, or the `ESC` key.
|