@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.
Files changed (42) hide show
  1. package/README.md +20 -22
  2. package/container/README.md +11 -8
  3. package/esm2022/daffodil-design.mjs +2 -2
  4. package/esm2022/index.mjs +6 -0
  5. package/esm2022/notification/daffodil-design-notification.mjs +2 -2
  6. package/esm2022/notification/examples/default-notification/default-notification.component.mjs +12 -7
  7. package/esm2022/notification/examples/dismissible-notification/dismissible-notification.component.mjs +11 -6
  8. package/esm2022/notification/examples/notification-orientations/notification-orientations.component.mjs +5 -6
  9. package/esm2022/notification/examples/notification-status/notification-status.component.mjs +5 -6
  10. package/esm2022/notification/examples/notification-with-actions/notification-with-actions.component.mjs +24 -0
  11. package/esm2022/notification/examples/notification-with-actions/notification-with-actions.module.mjs +36 -0
  12. package/esm2022/notification/examples/public_api.mjs +4 -1
  13. package/esm2022/notification/index.mjs +2 -0
  14. package/esm2022/notification/notification/notification.component.mjs +30 -16
  15. package/esm2022/paginator/daffodil-design-paginator.mjs +2 -2
  16. package/esm2022/paginator/index.mjs +2 -0
  17. package/esm2022/progress-bar/daffodil-design-progress-bar.mjs +2 -2
  18. package/esm2022/progress-bar/index.mjs +2 -0
  19. package/fesm2022/daffodil-design-notification-examples.mjs +70 -16
  20. package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
  21. package/fesm2022/daffodil-design-notification.mjs +46 -33
  22. package/fesm2022/daffodil-design-notification.mjs.map +1 -1
  23. package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
  24. package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
  25. package/fesm2022/daffodil-design.mjs +5 -0
  26. package/fesm2022/daffodil-design.mjs.map +1 -1
  27. package/index.d.ts +2 -2
  28. package/loading-icon/README.md +1 -1
  29. package/notification/README.md +49 -23
  30. package/notification/examples/default-notification/default-notification.component.d.ts +2 -0
  31. package/notification/examples/dismissible-notification/dismissible-notification.component.d.ts +2 -0
  32. package/notification/examples/notification-with-actions/notification-with-actions.component.d.ts +8 -0
  33. package/notification/examples/notification-with-actions/notification-with-actions.module.d.ts +11 -0
  34. package/notification/index.d.ts +0 -4
  35. package/notification/notification/notification.component.d.ts +15 -6
  36. package/package.json +1 -1
  37. package/paginator/index.d.ts +0 -4
  38. package/progress-bar/index.d.ts +0 -4
  39. package/scss/typography/_index.scss +1 -1
  40. package/scss/typography/utilities/_variables.scss +14 -4
  41. package/sidebar/README.md +1 -1
  42. package/toast/README.md +2 -2
package/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Generated bundle index. Do not edit.
2
+ * This is a filler file for making the
3
+ * demo work in dev mode.
3
4
  */
4
- /// <amd-module name="@daffodil/design" />
5
5
  export * from './public_api';
@@ -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](../progress-bar/README.md) component instead.
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`.
@@ -1,23 +1,49 @@
1
- # Notifications
2
- Notifications provides a way to display and communicate information for user actions or system updates. There are two main types of notifications — inline or toast.
3
-
4
- ## Usage
5
- ```
6
- <h4>Default Message Bar</h4>
7
- <daff-notification>
8
- Default Message Bar
9
- </daff-notification>
10
-
11
- <h4>Message Bar Statuses</h4>
12
- <daff-notification status="warn">
13
- Message Bar - Primary Color
14
- </daff-notification>
15
-
16
- <daff-notification status="error">
17
- Message Bar - Secondary Color
18
- </daff-notification>
19
-
20
- <daff-notification status="success">
21
- Message Bar - Secondary Color
22
- </daff-notification>
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
  }
@@ -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
  }
@@ -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
+ }
@@ -1,5 +1 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- /// <amd-module name="@daffodil/design/notification" />
5
1
  export * from './public_api';
@@ -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
- * communicate information for user actions or system updates.
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
- ariaLive: string;
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
- _prefix: DaffPrefixDirective;
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"}}
@@ -1,5 +1 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- /// <amd-module name="@daffodil/design/paginator" />
5
1
  export * from './public_api';
@@ -1,5 +1 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- /// <amd-module name="@daffodil/design/progress-bar" />
5
1
  export * from './public_api';
@@ -1,4 +1,4 @@
1
+ @forward 'utilities';
1
2
  @forward 'mixins/font-weight';
2
3
  @forward 'mixins/sizes';
3
4
  @forward 'mixins/text-truncate';
4
- @forward 'utilities';
@@ -1,9 +1,19 @@
1
- $body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
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: ui-monospace, 'SFMono-Regular', SF Mono, Menlo, Consolas,
5
- 'Liberation Mono', monospace;
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](../../atoms//button//README.md)) to make sure that the action is positioned correctly and it passes WCAG guidelines.
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](../notification/README.md) component.
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](../src/atoms/button/README.md)) with the addition of `data` and `eventEmitter`.
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.