@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.
- package/atoms/progress-indicator/progress-indicator.component.d.ts +2 -1
- package/esm2022/atoms/progress-indicator/progress-indicator.component.mjs +3 -2
- package/esm2022/progress-bar/animation/progress-bar-animation.mjs +9 -0
- package/esm2022/progress-bar/daffodil-design-progress-bar.mjs +5 -0
- package/esm2022/progress-bar/examples/daffodil-design-progress-bar-examples.mjs +5 -0
- package/esm2022/progress-bar/examples/index.mjs +2 -0
- package/esm2022/progress-bar/examples/progress-bar-default/progress-bar-default.component.mjs +12 -0
- package/esm2022/progress-bar/examples/progress-bar-default/progress-bar-default.module.mjs +24 -0
- package/esm2022/progress-bar/examples/progress-bar-indeterminate/progress-bar-indeterminate.component.mjs +12 -0
- package/esm2022/progress-bar/examples/progress-bar-indeterminate/progress-bar-indeterminate.module.mjs +24 -0
- package/esm2022/progress-bar/examples/progress-bar-themes/progress-bar-themes.component.mjs +18 -0
- package/esm2022/progress-bar/examples/progress-bar-themes/progress-bar-themes.module.mjs +28 -0
- package/esm2022/progress-bar/examples/public_api.mjs +12 -0
- package/esm2022/progress-bar/progress-bar.component.mjs +142 -0
- package/esm2022/progress-bar/progress-bar.module.mjs +24 -0
- package/esm2022/progress-bar/public_api.mjs +3 -0
- package/fesm2022/daffodil-design-progress-bar-examples.mjs +113 -0
- package/fesm2022/daffodil-design-progress-bar-examples.mjs.map +1 -0
- package/fesm2022/daffodil-design-progress-bar.mjs +178 -0
- package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -0
- package/fesm2022/daffodil-design.mjs +2 -1
- package/fesm2022/daffodil-design.mjs.map +1 -1
- package/package.json +1 -1
- package/progress-bar/README.md +27 -0
- package/progress-bar/animation/progress-bar-animation.d.ts +4 -0
- package/progress-bar/examples/index.d.ts +1 -0
- package/progress-bar/examples/progress-bar-default/progress-bar-default.component.d.ts +5 -0
- package/progress-bar/examples/progress-bar-default/progress-bar-default.module.d.ts +8 -0
- package/progress-bar/examples/progress-bar-indeterminate/progress-bar-indeterminate.component.d.ts +5 -0
- package/progress-bar/examples/progress-bar-indeterminate/progress-bar-indeterminate.module.d.ts +8 -0
- package/progress-bar/examples/progress-bar-themes/progress-bar-themes.component.d.ts +9 -0
- package/progress-bar/examples/progress-bar-themes/progress-bar-themes.module.d.ts +9 -0
- package/progress-bar/examples/public_api.d.ts +2 -0
- package/progress-bar/index.d.ts +5 -0
- package/progress-bar/progress-bar.component.d.ts +76 -0
- package/progress-bar/progress-bar.module.d.ts +8 -0
- package/progress-bar/public_api.d.ts +2 -0
- package/progress-bar/src/progress-bar-theme.scss +68 -0
- 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 @@
|
|
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
|
+
}
|
package/progress-bar/examples/progress-bar-indeterminate/progress-bar-indeterminate.component.d.ts
ADDED
@@ -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
|
+
}
|
package/progress-bar/examples/progress-bar-indeterminate/progress-bar-indeterminate.module.d.ts
ADDED
@@ -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,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,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);
|