@daffodil/design 0.69.0 → 0.70.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 (39) hide show
  1. package/atoms/progress-indicator/progress-indicator.component.d.ts +2 -1
  2. package/esm2022/atoms/progress-indicator/progress-indicator.component.mjs +3 -2
  3. package/esm2022/progress-bar/animation/progress-bar-animation.mjs +9 -0
  4. package/esm2022/progress-bar/daffodil-design-progress-bar.mjs +5 -0
  5. package/esm2022/progress-bar/examples/daffodil-design-progress-bar-examples.mjs +5 -0
  6. package/esm2022/progress-bar/examples/index.mjs +2 -0
  7. package/esm2022/progress-bar/examples/progress-bar-default/progress-bar-default.component.mjs +12 -0
  8. package/esm2022/progress-bar/examples/progress-bar-default/progress-bar-default.module.mjs +24 -0
  9. package/esm2022/progress-bar/examples/progress-bar-indeterminate/progress-bar-indeterminate.component.mjs +12 -0
  10. package/esm2022/progress-bar/examples/progress-bar-indeterminate/progress-bar-indeterminate.module.mjs +24 -0
  11. package/esm2022/progress-bar/examples/progress-bar-themes/progress-bar-themes.component.mjs +18 -0
  12. package/esm2022/progress-bar/examples/progress-bar-themes/progress-bar-themes.module.mjs +28 -0
  13. package/esm2022/progress-bar/examples/public_api.mjs +12 -0
  14. package/esm2022/progress-bar/progress-bar.component.mjs +142 -0
  15. package/esm2022/progress-bar/progress-bar.module.mjs +24 -0
  16. package/esm2022/progress-bar/public_api.mjs +3 -0
  17. package/fesm2022/daffodil-design-progress-bar-examples.mjs +113 -0
  18. package/fesm2022/daffodil-design-progress-bar-examples.mjs.map +1 -0
  19. package/fesm2022/daffodil-design-progress-bar.mjs +178 -0
  20. package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -0
  21. package/fesm2022/daffodil-design.mjs +2 -1
  22. package/fesm2022/daffodil-design.mjs.map +1 -1
  23. package/package.json +1 -1
  24. package/progress-bar/README.md +27 -0
  25. package/progress-bar/animation/progress-bar-animation.d.ts +4 -0
  26. package/progress-bar/examples/index.d.ts +1 -0
  27. package/progress-bar/examples/progress-bar-default/progress-bar-default.component.d.ts +5 -0
  28. package/progress-bar/examples/progress-bar-default/progress-bar-default.module.d.ts +8 -0
  29. package/progress-bar/examples/progress-bar-indeterminate/progress-bar-indeterminate.component.d.ts +5 -0
  30. package/progress-bar/examples/progress-bar-indeterminate/progress-bar-indeterminate.module.d.ts +8 -0
  31. package/progress-bar/examples/progress-bar-themes/progress-bar-themes.component.d.ts +9 -0
  32. package/progress-bar/examples/progress-bar-themes/progress-bar-themes.module.d.ts +9 -0
  33. package/progress-bar/examples/public_api.d.ts +2 -0
  34. package/progress-bar/index.d.ts +5 -0
  35. package/progress-bar/progress-bar.component.d.ts +76 -0
  36. package/progress-bar/progress-bar.module.d.ts +8 -0
  37. package/progress-bar/public_api.d.ts +2 -0
  38. package/progress-bar/src/progress-bar-theme.scss +68 -0
  39. package/scss/theme.scss +2 -0
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.69.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.69.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/daff-global":{"sass":"./scss/daff-global.scss"},"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/daff-util":{"sass":"./scss/daff-util.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/daff-typography":{"sass":"./scss/daff-typography.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"},"./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"},"./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.70.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.70.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/daff-global":{"sass":"./scss/daff-global.scss"},"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/daff-util":{"sass":"./scss/daff-util.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/daff-typography":{"sass":"./scss/daff-typography.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"},"./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"},"./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"},"./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"}}
@@ -0,0 +1,27 @@
1
+ # Progress Bar
2
+ A progress bar provides visual feedback about the duration or progress of a task or operation.
3
+
4
+ ## Types
5
+ There are two types of progress bars: `determinate` and `indeterminate`. They are `determinate` by default.
6
+
7
+ ### Determinate
8
+ Determinate progress bars should be used when the percentage of a task or operation is known.
9
+
10
+ <design-land-example-viewer-container example="progress-bar-default"></design-land-example-viewer-container>
11
+
12
+ ### Indeterminate
13
+ Indeterminate progress bars should be used when the loading percentage of a task or operation is unknown or cannot be calculated.
14
+
15
+ <design-land-example-viewer-container example="progress-bar-indeterminate"></design-land-example-viewer-container>
16
+
17
+ ## Theming
18
+ The progress bar color is defined by using the `color` property. By default, the color is set to `primary`. This can be changed to one of the supported colors.
19
+
20
+ Supported colors: `primary | secondary | tertiary | theme | theme-contrast | white | black`
21
+
22
+ > `theme`, `theme-contrast`, `white`, and `black` should be used with caution to ensure that there is sufficient contrast.
23
+
24
+ <design-land-example-viewer-container example="progress-bar-themes"></design-land-example-viewer-container>
25
+
26
+ ## Accessibility
27
+ The progress bar component works with the ARIA `role="progressbar"` to provide an accessible experience. A Label should always be provided by using `label[daffFormLabel]`, `aria-label`, or `aria-labelledby`.
@@ -0,0 +1,4 @@
1
+ import { AnimationTriggerMetadata } from '@angular/animations';
2
+ export declare const daffProgressBarAnimation: {
3
+ readonly fill: AnimationTriggerMetadata;
4
+ };
@@ -0,0 +1 @@
1
+ export * from './public_api';
@@ -0,0 +1,5 @@
1
+ import * as i0 from "@angular/core";
2
+ export declare class ProgressBarDefaultComponent {
3
+ static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarDefaultComponent, never>;
4
+ static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarDefaultComponent, "progress-bar-default", never, {}, {}, never, never, false, never>;
5
+ }
@@ -0,0 +1,8 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./progress-bar-default.component";
3
+ import * as i2 from "@daffodil/design/progress-bar";
4
+ export declare class ProgressBarDefaultComponentModule {
5
+ static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarDefaultComponentModule, never>;
6
+ static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarDefaultComponentModule, [typeof i1.ProgressBarDefaultComponent], [typeof i2.DaffProgressBarModule], [typeof i1.ProgressBarDefaultComponent]>;
7
+ static ɵinj: i0.ɵɵInjectorDeclaration<ProgressBarDefaultComponentModule>;
8
+ }
@@ -0,0 +1,5 @@
1
+ import * as i0 from "@angular/core";
2
+ export declare class ProgressBarIndeterminateComponent {
3
+ static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarIndeterminateComponent, never>;
4
+ static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarIndeterminateComponent, "progress-bar-indeterminate", never, {}, {}, never, never, false, never>;
5
+ }
@@ -0,0 +1,8 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./progress-bar-indeterminate.component";
3
+ import * as i2 from "@daffodil/design/progress-bar";
4
+ export declare class ProgressBarIndeterminateComponentModule {
5
+ static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarIndeterminateComponentModule, never>;
6
+ static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarIndeterminateComponentModule, [typeof i1.ProgressBarIndeterminateComponent], [typeof i2.DaffProgressBarModule], [typeof i1.ProgressBarIndeterminateComponent]>;
7
+ static ɵinj: i0.ɵɵInjectorDeclaration<ProgressBarIndeterminateComponentModule>;
8
+ }
@@ -0,0 +1,9 @@
1
+ import { FormControl } from '@angular/forms';
2
+ import { DaffPalette } from '@daffodil/design';
3
+ import * as i0 from "@angular/core";
4
+ export declare class ProgressBarThemesComponent {
5
+ color: DaffPalette;
6
+ colorControl: FormControl;
7
+ static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarThemesComponent, never>;
8
+ static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarThemesComponent, "progress-bar-themes", never, {}, {}, never, never, false, never>;
9
+ }
@@ -0,0 +1,9 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./progress-bar-themes.component";
3
+ import * as i2 from "@daffodil/design/progress-bar";
4
+ import * as i3 from "@angular/forms";
5
+ export declare class ProgressBarThemesComponentModule {
6
+ static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarThemesComponentModule, never>;
7
+ static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarThemesComponentModule, [typeof i1.ProgressBarThemesComponent], [typeof i2.DaffProgressBarModule, typeof i3.ReactiveFormsModule], [typeof i1.ProgressBarThemesComponent]>;
8
+ static ɵinj: i0.ɵɵInjectorDeclaration<ProgressBarThemesComponentModule>;
9
+ }
@@ -0,0 +1,2 @@
1
+ import { ComponentExample } from '@daffodil/design';
2
+ export declare const PROGRESS_BAR_EXAMPLES: ComponentExample[];
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ /// <amd-module name="@daffodil/design/progress-bar" />
5
+ export * from './public_api';
@@ -0,0 +1,76 @@
1
+ import { AnimationEvent } from '@angular/animations';
2
+ import { ElementRef, EventEmitter, Renderer2, ChangeDetectorRef } from '@angular/core';
3
+ import { DaffColorable } from '@daffodil/design';
4
+ import * as i0 from "@angular/core";
5
+ /**
6
+ * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
7
+ */
8
+ declare class DaffProgressBarBase {
9
+ _elementRef: ElementRef;
10
+ _renderer: Renderer2;
11
+ constructor(_elementRef: ElementRef, _renderer: Renderer2);
12
+ }
13
+ declare const _daffProgressBarBase: (new (...args: any[]) => {
14
+ _color: import("@daffodil/design").DaffPalette;
15
+ color: import("@daffodil/design").DaffPalette;
16
+ _elementRef: ElementRef<any>;
17
+ _renderer: Renderer2;
18
+ }) & typeof DaffProgressBarBase;
19
+ export declare const clamp: (number: number, min: number, max: number) => number;
20
+ /**
21
+ * @inheritdoc
22
+ */
23
+ export declare class DaffProgressBarComponent extends _daffProgressBarBase implements DaffColorable {
24
+ private _changeDetectorRef;
25
+ private elementRef;
26
+ private renderer;
27
+ /**
28
+ * @docs-private
29
+ */
30
+ class: boolean;
31
+ /**
32
+ * @docs-private
33
+ */
34
+ get indeterminateClass(): boolean;
35
+ get role(): string;
36
+ get ariaLabel(): string;
37
+ ariaValueMin: string;
38
+ ariaValueMax: string;
39
+ get ariaValueNow(): number;
40
+ constructor(_changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, renderer: Renderer2);
41
+ private _percentage;
42
+ private _indeterminate;
43
+ /**
44
+ * Sets the percentage completion of the progression,
45
+ * expressed as a whole number between 0 and 100.
46
+ *
47
+ */
48
+ get percentage(): number;
49
+ set percentage(val: number);
50
+ /**
51
+ * Property to set the animation of a progress bar to
52
+ * run for an indefinite amount of time.
53
+ *
54
+ * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
55
+ **/
56
+ get indeterminate(): any;
57
+ set indeterminate(value: any);
58
+ /**
59
+ * An event that emits each time the progression reaches 100%
60
+ * and the animation is finished
61
+ */
62
+ finished: EventEmitter<void>;
63
+ /**
64
+ * Calculates when the progress animation is fully completed
65
+ *
66
+ * @param event: AnimationEvent
67
+ */
68
+ onAnimationComplete(event: AnimationEvent): void;
69
+ /**
70
+ * @docs-private
71
+ */
72
+ get fillState(): any;
73
+ static ɵfac: i0.ɵɵFactoryDeclaration<DaffProgressBarComponent, never>;
74
+ static ɵcmp: i0.ɵɵComponentDeclaration<DaffProgressBarComponent, "daff-progress-bar", never, { "color": { "alias": "color"; "required": false; }; "percentage": { "alias": "percentage"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "finished": "finished"; }, never, ["label[daffProgressBarLabel]"], false, never>;
75
+ }
76
+ export {};
@@ -0,0 +1,8 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./progress-bar.component";
3
+ import * as i2 from "@angular/common";
4
+ export declare class DaffProgressBarModule {
5
+ static ɵfac: i0.ɵɵFactoryDeclaration<DaffProgressBarModule, never>;
6
+ static ɵmod: i0.ɵɵNgModuleDeclaration<DaffProgressBarModule, [typeof i1.DaffProgressBarComponent], [typeof i2.CommonModule], [typeof i1.DaffProgressBarComponent]>;
7
+ static ɵinj: i0.ɵɵInjectorDeclaration<DaffProgressBarModule>;
8
+ }
@@ -0,0 +1,2 @@
1
+ export { DaffProgressBarModule } from './progress-bar.module';
2
+ export * from './progress-bar.component';
@@ -0,0 +1,68 @@
1
+ @use 'sass:map';
2
+ @use '../../scss/core';
3
+ @use '../../scss/theming';
4
+
5
+ @mixin daff-progress-bar-theme($theme) {
6
+ $primary: map.get($theme, primary);
7
+ $secondary: map.get($theme, secondary);
8
+ $tertiary: map.get($theme, tertiary);
9
+ $base: core.daff-map-deep-get($theme, 'core.base');
10
+ $base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
11
+ $white: core.daff-map-deep-get($theme, 'core.white');
12
+ $black: core.daff-map-deep-get($theme, 'core.black');
13
+ $neutral: core.daff-map-deep-get($theme, 'core.neutral');
14
+
15
+ .daff-progress-bar {
16
+ $root: '.daff-progress-bar';
17
+
18
+ #{$root}__label {
19
+ color: theming.daff-illuminate($base-contrast, $neutral, 2);
20
+ }
21
+
22
+ #{$root}__track {
23
+ background: theming.daff-illuminate($base, $neutral, 2);
24
+ }
25
+
26
+ &.daff-primary {
27
+ #{$root}__fill {
28
+ background: theming.daff-illuminate($base, $primary, 6);
29
+ }
30
+ }
31
+
32
+ &.daff-secondary {
33
+ #{$root}__fill {
34
+ background: theming.daff-illuminate($base, $secondary, 6);
35
+ }
36
+ }
37
+
38
+ &.daff-tertiary {
39
+ #{$root}__fill {
40
+ background: theming.daff-illuminate($base, $tertiary, 6);
41
+ }
42
+ }
43
+
44
+ &.daff-theme {
45
+ #{$root}__fill {
46
+ background: $base;
47
+ }
48
+ }
49
+
50
+ &.daff-theme-contrast {
51
+ #{$root}__fill {
52
+ background: $base-contrast;
53
+ }
54
+ }
55
+
56
+ &.daff-white {
57
+ #{$root}__fill {
58
+ background: $white;
59
+ }
60
+ }
61
+
62
+ &.daff-black {
63
+ #{$root}__fill {
64
+ background: $black;
65
+ }
66
+ }
67
+ }
68
+ }
package/scss/theme.scss CHANGED
@@ -38,6 +38,7 @@
38
38
  @use '../notification/src/notification-theme' as notification;
39
39
  @use '../paginator/src/paginator-theme' as paginator;
40
40
  @use '../sidebar/src/sidebar-theme' as sidebar;
41
+ @use '../progress-bar/src/progress-bar-theme' as progress-bar;
41
42
  @use '../scss/state/skeleton/mixins' as skeleton;
42
43
  @use '../tree/src/tree-theme' as tree;
43
44
  @use '../toast/src/toast-theme' as toast;
@@ -66,6 +67,7 @@
66
67
  @include native-select.daff-native-select-theme($theme);
67
68
  @include loading-icon.daff-loading-icon-theme($theme);
68
69
  @include progress-indicator.daff-progress-indicator-theme($theme);
70
+ @include progress-bar.daff-progress-bar-theme($theme);
69
71
 
70
72
  // Molecules
71
73
  @include accordion.daff-accordion-theme($theme);