@daffodil/design 0.78.0 → 0.80.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/accordion/accordion.module.d.ts +3 -1
- package/accordion/src/accordion-theme.scss +4 -4
- package/article/README.md +5 -6
- package/article/article.module.d.ts +3 -1
- package/article/src/article-theme.scss +8 -8
- package/atoms/form/form-field/form-field/form-field.component.d.ts +1 -1
- package/breadcrumb/breadcrumb.module.d.ts +3 -1
- package/breadcrumb/src/breadcrumb-theme.scss +3 -3
- package/button/README.md +3 -3
- package/button/button/basic/button.component.d.ts +28 -0
- package/button/button/button-base.directive.d.ts +51 -0
- package/button/button/flat/flat.component.d.ts +28 -0
- package/button/button/icon/icon.component.d.ts +24 -0
- package/button/button/raised/raised.component.d.ts +28 -0
- package/button/button/stroked/stroked.component.d.ts +28 -0
- package/button/button/underline/underline.component.d.ts +28 -0
- package/button/button.d.ts +7 -2
- package/button/button.module.d.ts +11 -4
- package/button/public_api.d.ts +6 -1
- package/button/src/button/basic/button-theme.scss +145 -0
- package/button/src/button/button-base.scss +79 -0
- package/button/src/button/flat/flat-theme.scss +142 -0
- package/button/src/button/icon/icon-theme.scss +140 -0
- package/button/src/button/raised/raised-theme.scss +107 -0
- package/button/src/button/stroked/stroked-theme.scss +155 -0
- package/button/src/button/underline/underline-theme.scss +89 -0
- package/callout/callout.module.d.ts +3 -1
- package/callout/src/callout-theme.scss +11 -17
- package/card/card.module.d.ts +1 -1
- package/card/src/card-theme-variants/linkable-card.scss +1 -1
- package/card/src/card-theme.scss +9 -9
- package/container/container.module.d.ts +1 -1
- package/core/public_api.d.ts +1 -0
- package/core/selectable/public_api.d.ts +2 -0
- package/core/selectable/selectable.d.ts +7 -0
- package/core/selectable/selectable.directive.d.ts +17 -0
- package/core/statusable/statusable.d.ts +5 -3
- package/core/statusable/statusable.directive.d.ts +6 -4
- package/esm2022/accordion/accordion/animation/accordion-animation.mjs +1 -4
- package/esm2022/accordion/accordion.module.mjs +4 -2
- package/esm2022/article/article.module.mjs +4 -2
- package/esm2022/atoms/form/checkbox/checkbox.component.mjs +2 -2
- package/esm2022/atoms/form/checkbox-set/checkbox-set.component.mjs +2 -2
- package/esm2022/atoms/form/form-field/form-field/form-field.component.mjs +2 -2
- package/esm2022/atoms/form/radio/radio.component.mjs +2 -2
- package/esm2022/atoms/form/radio-set/radio-set.component.mjs +2 -2
- package/esm2022/breadcrumb/breadcrumb.module.mjs +4 -2
- package/esm2022/button/button/basic/button.component.mjs +48 -0
- package/esm2022/button/button/button-base.directive.mjs +105 -0
- package/esm2022/button/button/flat/flat.component.mjs +48 -0
- package/esm2022/button/button/icon/icon.component.mjs +44 -0
- package/esm2022/button/button/raised/raised.component.mjs +48 -0
- package/esm2022/button/button/stroked/stroked.component.mjs +48 -0
- package/esm2022/button/button/underline/underline.component.mjs +48 -0
- package/esm2022/button/button.mjs +12 -2
- package/esm2022/button/button.module.mjs +37 -5
- package/esm2022/button/examples/basic-button/basic-button.component.mjs +4 -6
- package/esm2022/button/examples/flat-button/flat-button.component.mjs +4 -6
- package/esm2022/button/examples/icon-button/icon-button.component.mjs +4 -6
- package/esm2022/button/examples/raised-button/raised-button.component.mjs +4 -6
- package/esm2022/button/examples/sizeable-button/sizeable-button.component.mjs +2 -2
- package/esm2022/button/examples/statusable-button/statusable-button.component.mjs +3 -3
- package/esm2022/button/examples/stroked-button/stroked-button.component.mjs +4 -6
- package/esm2022/button/examples/underline-button/underline-button.component.mjs +4 -6
- package/esm2022/button/public_api.mjs +7 -2
- package/esm2022/callout/callout.module.mjs +4 -2
- package/esm2022/callout/examples/callout-text-alignment/callout-text-alignment.component.mjs +5 -7
- package/esm2022/callout/examples/callout-theming/callout-theming.component.mjs +5 -7
- package/esm2022/callout/examples/callout-with-grid/callout-with-grid.component.mjs +5 -6
- package/esm2022/callout/examples/compact-callout/compact-callout.component.mjs +4 -6
- package/esm2022/card/card.module.mjs +2 -2
- package/esm2022/card/examples/basic-card/basic-card.component.mjs +4 -6
- package/esm2022/card/examples/card-orientation/card-orientation.component.mjs +5 -7
- package/esm2022/checkbox/examples/basic-checkbox/basic-checkbox.component.mjs +4 -5
- package/esm2022/checkbox/examples/checkbox-set/checkbox-set.component.mjs +4 -5
- package/esm2022/container/container/container.component.mjs +2 -2
- package/esm2022/container/container.module.mjs +2 -2
- package/esm2022/core/public_api.mjs +2 -1
- package/esm2022/core/selectable/public_api.mjs +2 -0
- package/esm2022/core/selectable/selectable.directive.mjs +41 -0
- package/esm2022/core/selectable/selectable.mjs +2 -0
- package/esm2022/core/statusable/statusable.directive.mjs +7 -5
- package/esm2022/core/statusable/statusable.mjs +3 -2
- package/esm2022/hero/examples/compact-hero/compact-hero.component.mjs +4 -6
- package/esm2022/hero/examples/hero-text-alignment/hero-text-alignment.component.mjs +5 -7
- package/esm2022/hero/examples/hero-theming/hero-theming.component.mjs +5 -7
- package/esm2022/hero/examples/hero-with-grid/hero-with-grid.component.mjs +4 -6
- package/esm2022/hero/hero.module.mjs +2 -2
- package/esm2022/image/image.module.mjs +2 -2
- package/esm2022/link-set/link-set.module.mjs +2 -2
- package/esm2022/list/examples/basic-list/basic-list.component.mjs +1 -1
- package/esm2022/list/examples/icon-list/icon-list.component.mjs +2 -2
- package/esm2022/list/examples/multiline-list/multiline-list.component.mjs +1 -1
- package/esm2022/list/examples/nav-list/nav-list.component.mjs +2 -2
- package/esm2022/list/list/list.component.mjs +2 -2
- package/esm2022/list/list-item/list-item.component.mjs +10 -3
- package/esm2022/list/list.module.mjs +2 -2
- package/esm2022/loading-icon/examples/examples.mjs +1 -3
- package/esm2022/loading-icon/examples/loading-icon-color/loading-icon-color.component.mjs +2 -2
- package/esm2022/loading-icon/loading-icon/loading-icon.component.mjs +5 -20
- package/esm2022/loading-icon/loading-icon.module.mjs +2 -2
- package/esm2022/media-gallery/examples/basic-media-gallery/basic-media-gallery.component.mjs +1 -1
- package/esm2022/media-gallery/examples/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.mjs +1 -1
- package/esm2022/media-gallery/examples/skeleton-media-gallery/skeleton-media-gallery.component.mjs +1 -1
- package/esm2022/media-gallery/helpers/media-gallery-token.mjs +7 -3
- package/esm2022/media-gallery/media-gallery.module.mjs +2 -2
- package/esm2022/media-gallery/thumbnail/thumbnail-compat.token.mjs +8 -3
- package/esm2022/media-gallery/thumbnail/thumbnail.directive.mjs +26 -39
- package/esm2022/menu/examples/basic-menu/basic-menu.component.mjs +5 -7
- package/esm2022/modal/examples/basic-modal/basic-modal.component.mjs +4 -6
- package/esm2022/modal/examples/basic-modal/modal-content.component.mjs +4 -6
- package/esm2022/modal/modal-header/modal-header.component.mjs +4 -6
- package/esm2022/modal/modal.module.mjs +2 -2
- package/esm2022/navbar/examples/basic-navbar/basic-navbar.component.mjs +4 -6
- package/esm2022/navbar/examples/contained-navbar/contained-navbar.component.mjs +4 -6
- package/esm2022/navbar/examples/navbar-theming/navbar-theming.component.mjs +5 -7
- package/esm2022/navbar/examples/raised-navbar/raised-navbar.component.mjs +4 -6
- package/esm2022/navbar/navbar.module.mjs +2 -2
- package/esm2022/notification/examples/default-notification/default-notification.component.mjs +1 -3
- package/esm2022/notification/examples/notification-orientations/notification-orientations.component.mjs +1 -3
- package/esm2022/notification/examples/notification-status/notification-status.component.mjs +3 -5
- package/esm2022/notification/examples/notification-with-actions/notification-with-actions.component.mjs +4 -5
- package/esm2022/notification/notification/notification.component.mjs +3 -3
- package/esm2022/notification/notification.module.mjs +2 -2
- package/esm2022/paginator/paginator.module.mjs +2 -2
- package/esm2022/progress-bar/progress-bar.module.mjs +2 -2
- package/esm2022/sidebar/examples/over-and-under-sidebars/over-and-under-sidebars.component.mjs +5 -6
- package/esm2022/sidebar/sidebar-viewport/scroll-token/scroll.token.mjs +9 -3
- package/esm2022/sidebar/sidebar-viewport/sidebar-viewport.component.mjs +3 -3
- package/esm2022/sidebar/sidebar.module.mjs +2 -2
- package/esm2022/switch/daffodil-design-switch.mjs +5 -0
- package/esm2022/switch/examples/basic-switch/basic-switch.component.mjs +23 -0
- package/esm2022/switch/examples/daffodil-design-switch-examples.mjs +5 -0
- package/esm2022/switch/examples/disabled-switch/disabled-switch.component.mjs +20 -0
- package/esm2022/switch/examples/examples.mjs +13 -0
- package/esm2022/switch/examples/index.mjs +2 -0
- package/esm2022/switch/examples/loading-switch/loading-switch.component.mjs +20 -0
- package/esm2022/switch/examples/public_api.mjs +7 -0
- package/esm2022/switch/examples/switch-error/switch-error.component.mjs +22 -0
- package/esm2022/switch/examples/switch-label-positions/switch-label-positions.component.mjs +31 -0
- package/esm2022/switch/index.mjs +2 -0
- package/esm2022/switch/public_api.mjs +3 -0
- package/esm2022/switch/switch/label-position.mjs +11 -0
- package/esm2022/switch/switch/switch.component.mjs +126 -0
- package/esm2022/switch/switch.mjs +7 -0
- package/esm2022/tabs/daffodil-design-tabs.mjs +5 -0
- package/esm2022/tabs/examples/basic-tabs/basic-tabs.component.mjs +22 -0
- package/esm2022/tabs/examples/custom-select-tabs/custom-select-tabs.component.mjs +34 -0
- package/esm2022/tabs/examples/daffodil-design-tabs-examples.mjs +5 -0
- package/esm2022/tabs/examples/disabled-tabs/disabled-tabs.component.mjs +22 -0
- package/esm2022/tabs/examples/index.mjs +2 -0
- package/esm2022/tabs/examples/initially-select-tab/initially-select-tab.component.mjs +22 -0
- package/esm2022/tabs/examples/public_api.mjs +11 -0
- package/esm2022/tabs/index.mjs +2 -0
- package/esm2022/tabs/public_api.mjs +6 -0
- package/esm2022/tabs/tabs/tab/tab.component.mjs +86 -0
- package/esm2022/tabs/tabs/tab-activator/tab-activator.component.mjs +84 -0
- package/esm2022/tabs/tabs/tab-label/tab-label.component.mjs +33 -0
- package/esm2022/tabs/tabs/tab-panel/tab-panel.component.mjs +68 -0
- package/esm2022/tabs/tabs/tabs.component.mjs +157 -0
- package/esm2022/tabs/tabs.mjs +13 -0
- package/esm2022/text-snippet/daffodil-design-text-snippet.mjs +5 -0
- package/esm2022/text-snippet/examples/basic-text-snippet/basic-text-snippet.component.mjs +14 -0
- package/esm2022/text-snippet/examples/daffodil-design-text-snippet-examples.mjs +5 -0
- package/esm2022/text-snippet/examples/index.mjs +2 -0
- package/esm2022/text-snippet/examples/public_api.mjs +5 -0
- package/esm2022/text-snippet/index.mjs +2 -0
- package/esm2022/text-snippet/public_api.mjs +2 -0
- package/esm2022/text-snippet/text-snippet.component.mjs +46 -0
- package/esm2022/toast/examples/default-toast/default-toast.component.mjs +4 -6
- package/esm2022/toast/examples/toast-positions/toast-positions.component.mjs +4 -6
- package/esm2022/toast/examples/toast-status/toast-status.component.mjs +8 -10
- package/esm2022/toast/examples/toast-with-custom-duration/toast-with-custom-duration.component.mjs +4 -6
- package/esm2022/toast/options/daff-toast-options.mjs +7 -7
- package/esm2022/toast/toast/toast-provider.mjs +2 -2
- package/esm2022/toast/toast/toast-template.component.mjs +2 -2
- package/esm2022/toast/toast/toast.component.mjs +3 -3
- package/esm2022/toast/toast.module.mjs +2 -2
- package/esm2022/tree/tree.module.mjs +2 -2
- package/fesm2022/daffodil-design-accordion.mjs +3 -4
- package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
- package/fesm2022/daffodil-design-article.mjs +3 -1
- package/fesm2022/daffodil-design-article.mjs.map +1 -1
- package/fesm2022/daffodil-design-breadcrumb.mjs +3 -1
- package/fesm2022/daffodil-design-breadcrumb.mjs.map +1 -1
- package/fesm2022/daffodil-design-button-examples.mjs +16 -16
- package/fesm2022/daffodil-design-button-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-button.mjs +308 -132
- package/fesm2022/daffodil-design-button.mjs.map +1 -1
- package/fesm2022/daffodil-design-callout-examples.mjs +12 -13
- package/fesm2022/daffodil-design-callout-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-callout.mjs +3 -1
- package/fesm2022/daffodil-design-callout.mjs.map +1 -1
- package/fesm2022/daffodil-design-card-examples.mjs +10 -12
- package/fesm2022/daffodil-design-card-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-card.mjs +1 -1
- package/fesm2022/daffodil-design-card.mjs.map +1 -1
- package/fesm2022/daffodil-design-checkbox-examples.mjs +5 -6
- package/fesm2022/daffodil-design-checkbox-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-container.mjs +3 -3
- package/fesm2022/daffodil-design-container.mjs.map +1 -1
- package/fesm2022/daffodil-design-hero-examples.mjs +11 -13
- package/fesm2022/daffodil-design-hero-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-hero.mjs +1 -1
- package/fesm2022/daffodil-design-hero.mjs.map +1 -1
- package/fesm2022/daffodil-design-image.mjs +1 -1
- package/fesm2022/daffodil-design-image.mjs.map +1 -1
- package/fesm2022/daffodil-design-link-set.mjs +1 -1
- package/fesm2022/daffodil-design-link-set.mjs.map +1 -1
- package/fesm2022/daffodil-design-list-examples.mjs +4 -4
- package/fesm2022/daffodil-design-list-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-list.mjs +12 -5
- package/fesm2022/daffodil-design-list.mjs.map +1 -1
- package/fesm2022/daffodil-design-loading-icon-examples.mjs +1 -13
- package/fesm2022/daffodil-design-loading-icon-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-loading-icon.mjs +5 -20
- package/fesm2022/daffodil-design-loading-icon.mjs.map +1 -1
- package/fesm2022/daffodil-design-media-gallery-examples.mjs +3 -3
- package/fesm2022/daffodil-design-media-gallery-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-media-gallery.mjs +37 -42
- package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
- package/fesm2022/daffodil-design-menu-examples.mjs +3 -5
- package/fesm2022/daffodil-design-menu-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-modal-examples.mjs +5 -7
- package/fesm2022/daffodil-design-modal-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-modal.mjs +4 -5
- package/fesm2022/daffodil-design-modal.mjs.map +1 -1
- package/fesm2022/daffodil-design-navbar-examples.mjs +11 -13
- package/fesm2022/daffodil-design-navbar-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-navbar.mjs +1 -1
- package/fesm2022/daffodil-design-navbar.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification-examples.mjs +5 -9
- package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification.mjs +3 -3
- package/fesm2022/daffodil-design-notification.mjs.map +1 -1
- package/fesm2022/daffodil-design-paginator.mjs +1 -1
- package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
- package/fesm2022/daffodil-design-progress-bar.mjs +1 -1
- package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
- package/fesm2022/daffodil-design-sidebar-examples.mjs +4 -5
- package/fesm2022/daffodil-design-sidebar-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-sidebar.mjs +11 -5
- package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
- package/fesm2022/daffodil-design-switch-examples.mjs +109 -0
- package/fesm2022/daffodil-design-switch-examples.mjs.map +1 -0
- package/fesm2022/daffodil-design-switch.mjs +148 -0
- package/fesm2022/daffodil-design-switch.mjs.map +1 -0
- package/fesm2022/daffodil-design-tabs-examples.mjs +93 -0
- package/fesm2022/daffodil-design-tabs-examples.mjs.map +1 -0
- package/fesm2022/daffodil-design-tabs.mjs +428 -0
- package/fesm2022/daffodil-design-tabs.mjs.map +1 -0
- package/fesm2022/daffodil-design-text-snippet-examples.mjs +25 -0
- package/fesm2022/daffodil-design-text-snippet-examples.mjs.map +1 -0
- package/fesm2022/daffodil-design-text-snippet.mjs +53 -0
- package/fesm2022/daffodil-design-text-snippet.mjs.map +1 -0
- package/fesm2022/daffodil-design-toast-examples.mjs +13 -15
- package/fesm2022/daffodil-design-toast-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-toast.mjs +13 -12
- package/fesm2022/daffodil-design-toast.mjs.map +1 -1
- package/fesm2022/daffodil-design-tree.mjs +1 -1
- package/fesm2022/daffodil-design-tree.mjs.map +1 -1
- package/fesm2022/daffodil-design.mjs +53 -11
- package/fesm2022/daffodil-design.mjs.map +1 -1
- package/hero/hero.module.d.ts +1 -1
- package/hero/src/hero-theme.scss +11 -17
- package/image/README.md +4 -1
- package/image/image.module.d.ts +1 -1
- package/link-set/README.md +1 -1
- package/link-set/link-set.module.d.ts +1 -1
- package/list/list-item/list-item.component.d.ts +3 -1
- package/list/list.module.d.ts +1 -1
- package/list/src/list-theme.scss +13 -9
- package/loading-icon/README.md +0 -5
- package/loading-icon/examples/examples.d.ts +2 -2
- package/loading-icon/loading-icon/loading-icon.component.d.ts +1 -9
- package/loading-icon/loading-icon.module.d.ts +1 -1
- package/loading-icon/src/loading-icon-theme.scss +7 -7
- package/media-gallery/README.md +4 -1
- package/media-gallery/helpers/media-gallery-token.d.ts +1 -2
- package/media-gallery/media-gallery.module.d.ts +1 -1
- package/media-gallery/src/media-gallery-theme.scss +3 -3
- package/media-gallery/thumbnail/thumbnail-compat.token.d.ts +1 -5
- package/media-gallery/thumbnail/thumbnail.directive.d.ts +9 -18
- package/menu/src/menu-theme.scss +5 -5
- package/modal/modal.module.d.ts +1 -1
- package/modal/src/modal-theme.scss +1 -1
- package/navbar/navbar.module.d.ts +1 -1
- package/navbar/src/navbar-theme.scss +8 -8
- package/notification/README.md +2 -2
- package/notification/notification/notification.component.d.ts +1 -1
- package/notification/notification.module.d.ts +1 -1
- package/notification/src/notification-theme.scss +25 -21
- package/package.json +1 -1
- package/paginator/paginator.module.d.ts +1 -1
- package/paginator/src/paginator-theme.scss +11 -10
- package/progress-bar/progress-bar.module.d.ts +1 -1
- package/progress-bar/src/progress-bar-theme.scss +10 -10
- package/scss/accessibility/_index.scss +1 -1
- package/scss/core/_index.scss +1 -2
- package/scss/core/error/error-to-string.scss +13 -0
- package/scss/core/map/map-deep-check/map-deep-check.scss +2 -1
- package/scss/core/map/map-deep-get/map-deep-get.scss +1 -0
- package/scss/core/map/map-get/map-get.scss +23 -0
- package/scss/core/map/map-get/map-get.spec.scss +65 -0
- package/scss/core/string/split/string-split.scss +10 -7
- package/scss/global.scss +1 -0
- package/scss/interactions/_index.scss +1 -1
- package/scss/layout/_index.scss +1 -1
- package/scss/state/skeleton/_mixins.scss +2 -2
- package/scss/theme.scss +15 -1
- package/scss/theming/_configure-theme.scss +60 -2
- package/scss/theming/_daff-theme.scss +14 -4
- package/scss/theming/_index.scss +1 -1
- package/scss/theming/_theme-css-variables.scss +15 -13
- package/scss/theming/contrast/luminance/luminance.scss +8 -6
- package/scss/theming/illuminate/illuminate.scss +20 -17
- package/scss/typography/utilities/_index.scss +1 -1
- package/scss/typography/utilities/_variables.scss +1 -1
- package/sidebar/sidebar-viewport/scroll-token/scroll.token.d.ts +1 -7
- package/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts +1 -1
- package/sidebar/sidebar.module.d.ts +1 -1
- package/sidebar/src/sidebar-theme.scss +3 -3
- package/src/atoms/form/form-field/form-field/form-field-theme.scss +6 -6
- package/src/atoms/form/input/input-theme.scss +2 -2
- package/src/atoms/form/native-select/native-select-theme.scss +3 -3
- package/switch/README.md +61 -0
- package/switch/examples/basic-switch/basic-switch.component.d.ts +8 -0
- package/switch/examples/disabled-switch/disabled-switch.component.d.ts +7 -0
- package/switch/examples/examples.d.ts +5 -0
- package/switch/examples/index.d.ts +1 -0
- package/switch/examples/loading-switch/loading-switch.component.d.ts +7 -0
- package/switch/examples/public_api.d.ts +6 -0
- package/switch/examples/switch-error/switch-error.component.d.ts +7 -0
- package/switch/examples/switch-label-positions/switch-label-positions.component.d.ts +12 -0
- package/switch/index.d.ts +1 -0
- package/switch/public_api.d.ts +2 -0
- package/switch/src/switch-theme.scss +31 -0
- package/switch/switch/label-position.d.ts +10 -0
- package/switch/switch/switch.component.d.ts +53 -0
- package/switch/switch.d.ts +3 -0
- package/tabs/README.md +19 -0
- package/tabs/examples/basic-tabs/basic-tabs.component.d.ts +6 -0
- package/tabs/examples/custom-select-tabs/custom-select-tabs.component.d.ts +11 -0
- package/tabs/examples/disabled-tabs/disabled-tabs.component.d.ts +6 -0
- package/tabs/examples/index.d.ts +1 -0
- package/tabs/examples/initially-select-tab/initially-select-tab.component.d.ts +6 -0
- package/tabs/examples/public_api.d.ts +2 -0
- package/tabs/index.d.ts +1 -0
- package/tabs/public_api.d.ts +5 -0
- package/tabs/src/tabs-theme.scss +22 -0
- package/tabs/tabs/tab/tab.component.d.ts +57 -0
- package/tabs/tabs/tab-activator/tab-activator.component.d.ts +38 -0
- package/tabs/tabs/tab-label/tab-label.component.d.ts +19 -0
- package/tabs/tabs/tab-panel/tab-panel.component.d.ts +38 -0
- package/tabs/tabs/tabs.component.d.ts +103 -0
- package/tabs/tabs.d.ts +6 -0
- package/text-snippet/README.md +2 -0
- package/text-snippet/examples/basic-text-snippet/basic-text-snippet.component.d.ts +5 -0
- package/text-snippet/examples/index.d.ts +1 -0
- package/text-snippet/examples/public_api.d.ts +2 -0
- package/text-snippet/index.d.ts +1 -0
- package/text-snippet/public_api.d.ts +1 -0
- package/text-snippet/text-snippet.component.d.ts +19 -0
- package/toast/README.md +5 -5
- package/toast/options/daff-toast-options.d.ts +1 -3
- package/toast/src/toast-theme.scss +28 -24
- package/toast/toast/toast-provider.d.ts +1 -1
- package/toast/toast.module.d.ts +1 -1
- package/tree/src/tree-theme.scss +11 -11
- package/tree/tree.module.d.ts +1 -1
- package/button/button/button.component.d.ts +0 -80
- package/button/src/button-theme-variants/button.scss +0 -26
- package/button/src/button-theme-variants/flat.scss +0 -25
- package/button/src/button-theme-variants/icon.scss +0 -21
- package/button/src/button-theme-variants/raised.scss +0 -36
- package/button/src/button-theme-variants/stroked.scss +0 -28
- package/button/src/button-theme-variants/underline.scss +0 -9
- package/button/src/button-theme.scss +0 -574
- package/esm2022/button/button/button.component.mjs +0 -212
- package/esm2022/loading-icon/examples/loading-icon-diameter/loading-icon-diameter.component.mjs +0 -15
- package/loading-icon/examples/loading-icon-diameter/loading-icon-diameter.component.d.ts +0 -5
- package/scss/core/map/map-deep-check/map-deep-check.spec.scss +0 -43
- package/scss/core/map/map-deep-get/map-deep-get.spec.scss +0 -25
- package/scss/theming/contrast/contrast-ratio/contrast-ratio.spec.scss +0 -0
- package/scss/theming/contrast/text-contrast/text-contrast.spec.scss +0 -0
- package/src/atoms/form/radio/radio.scss +0 -0
@@ -1,3 +1,5 @@
|
|
1
|
+
@use 'sass:color';
|
2
|
+
@use 'sass:list';
|
1
3
|
@use 'variables' as v;
|
2
4
|
|
3
5
|
// Calculate the luminance of a color.
|
@@ -8,12 +10,12 @@
|
|
8
10
|
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
9
11
|
|
10
12
|
@function daff-luminance($color) {
|
11
|
-
$red-index: red($color) + 1;
|
12
|
-
$green-index: green($color) + 1;
|
13
|
-
$blue-index: blue($color) + 1;
|
13
|
+
$red-index: color.red($color) + 1;
|
14
|
+
$green-index: color.green($color) + 1;
|
15
|
+
$blue-index: color.blue($color) + 1;
|
14
16
|
|
15
|
-
$red: nth(v.$linear-channel-values, $red-index);
|
16
|
-
$green: nth(v.$linear-channel-values, $green-index);
|
17
|
-
$blue: nth(v.$linear-channel-values, $blue-index);
|
17
|
+
$red: list.nth(v.$linear-channel-values, $red-index);
|
18
|
+
$green: list.nth(v.$linear-channel-values, $green-index);
|
19
|
+
$blue: list.nth(v.$linear-channel-values, $blue-index);
|
18
20
|
@return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
|
19
21
|
}
|
@@ -1,4 +1,7 @@
|
|
1
|
+
@use 'sass:list';
|
1
2
|
@use 'sass:map';
|
3
|
+
@use 'sass:math';
|
4
|
+
@use 'sass:meta';
|
2
5
|
@use '../contrast/luminance/luminance';
|
3
6
|
|
4
7
|
// @docs
|
@@ -13,21 +16,21 @@
|
|
13
16
|
$values: ();
|
14
17
|
|
15
18
|
@each $key, $val in $map {
|
16
|
-
$keys: append($keys, $key);
|
17
|
-
$values: append($values, $val);
|
19
|
+
$keys: list.append($keys, $key);
|
20
|
+
$values: list.append($values, $val);
|
18
21
|
}
|
19
22
|
|
20
|
-
$list: zip($keys, $values);
|
23
|
+
$list: list.zip($keys, $values);
|
21
24
|
|
22
25
|
$sorted-map: ();
|
23
26
|
|
24
|
-
@while length($list) > 0 {
|
27
|
+
@while list.length($list) > 0 {
|
25
28
|
// Find smallest pair
|
26
|
-
$smallest-pair: nth($list, 1);
|
29
|
+
$smallest-pair: list.nth($list, 1);
|
27
30
|
|
28
31
|
@each $pair in $list {
|
29
|
-
$value: nth($pair, 2);
|
30
|
-
$smallest-value: nth($smallest-pair, 2);
|
32
|
+
$value: list.nth($pair, 2);
|
33
|
+
$smallest-value: list.nth($smallest-pair, 2);
|
31
34
|
|
32
35
|
@if $value < $smallest-value {
|
33
36
|
$smallest-pair: $pair;
|
@@ -35,8 +38,8 @@
|
|
35
38
|
}
|
36
39
|
|
37
40
|
// Add smallest pair to sorted map
|
38
|
-
$key: nth($smallest-pair, 1);
|
39
|
-
$value: nth($smallest-pair, 2);
|
41
|
+
$key: list.nth($smallest-pair, 1);
|
42
|
+
$value: list.nth($smallest-pair, 2);
|
40
43
|
$sorted-map: map.merge(
|
41
44
|
$sorted-map,
|
42
45
|
(
|
@@ -45,12 +48,12 @@
|
|
45
48
|
);
|
46
49
|
|
47
50
|
// Remove from list smallest pair
|
48
|
-
$smallest-pair-index: index($list, $smallest-pair);
|
51
|
+
$smallest-pair-index: list.index($list, $smallest-pair);
|
49
52
|
$new-list: ();
|
50
53
|
|
51
|
-
@for $i from 1 through length($list) {
|
54
|
+
@for $i from 1 through list.length($list) {
|
52
55
|
@if $i != $smallest-pair-index {
|
53
|
-
$new-list: append($new-list, nth($list, $i), 'space');
|
56
|
+
$new-list: list.append($new-list, list.nth($list, $i), 'space');
|
54
57
|
}
|
55
58
|
}
|
56
59
|
|
@@ -67,12 +70,12 @@
|
|
67
70
|
// @param $nth: nth steps away from zero
|
68
71
|
@function _daff-illuminate-get-key($map, $nth: 1) {
|
69
72
|
//Cap off "nth" to prevent going out-of-bounds.
|
70
|
-
@if ($nth > length($map)) {
|
71
|
-
$nth: length(map);
|
73
|
+
@if ($nth > list.length($map)) {
|
74
|
+
$nth: list.length(map);
|
72
75
|
}
|
73
76
|
|
74
77
|
$map: _daff-illuminate-sort($map);
|
75
|
-
@return nth(nth($map, $nth), 1);
|
78
|
+
@return list.nth(list.nth($map, $nth), 1);
|
76
79
|
}
|
77
80
|
|
78
81
|
// Takes a $color and palette and returns the color in
|
@@ -88,7 +91,7 @@
|
|
88
91
|
|
89
92
|
//Validate
|
90
93
|
@each $key, $palette-color in $palette {
|
91
|
-
@if (type-of($key) == 'string') {
|
94
|
+
@if (meta.type-of($key) == 'string') {
|
92
95
|
$palette: map.remove($palette, $key);
|
93
96
|
}
|
94
97
|
}
|
@@ -124,7 +127,7 @@
|
|
124
127
|
$darker-colors: map.merge(
|
125
128
|
$darker-colors,
|
126
129
|
(
|
127
|
-
$key: abs($luminance)
|
130
|
+
$key: math.abs($luminance)
|
128
131
|
)
|
129
132
|
);
|
130
133
|
}
|
@@ -1 +1 @@
|
|
1
|
-
@forward 'variables';
|
1
|
+
@forward 'variables';
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { InjectionToken } from '@angular/core';
|
2
1
|
/**
|
3
2
|
* An interface that enables a user to enable or disable scrolling on sidebars.
|
4
3
|
*
|
@@ -8,12 +7,7 @@ export interface DaffSidebarScroll {
|
|
8
7
|
enable(): void;
|
9
8
|
disable(): void;
|
10
9
|
}
|
11
|
-
|
12
|
-
* An injection token that can be used within a sidebar to determine
|
13
|
-
* what to do enabling and disabling scrolling. By default, the body
|
14
|
-
* is the element where scrolling is controlled.
|
15
|
-
*/
|
16
|
-
export declare const DAFF_SIDEBAR_SCROLL_TOKEN: InjectionToken<DaffSidebarScroll>;
|
10
|
+
export declare const DAFF_SIDEBAR_SCROLL_TOKEN: import("@angular/core").InjectionToken<DaffSidebarScroll>, provideDaffSidebarScrollToken: <R extends DaffSidebarScroll = DaffSidebarScroll>(value: R) => import("@angular/core").ValueProvider;
|
17
11
|
/**
|
18
12
|
* A factory function that return a DaffSidebarScroll
|
19
13
|
* for the current sidebar viewport.
|
@@ -85,5 +85,5 @@ export declare class DaffSidebarViewportComponent implements AfterContentChecked
|
|
85
85
|
*/
|
86
86
|
_backdropClicked(): void;
|
87
87
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarViewportComponent, [null, null, { skipSelf: true; }, { optional: true; skipSelf: true; }, null]>;
|
88
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarViewportComponent, "daff-sidebar-viewport", never, { "navPlacement": { "alias": "navPlacement"; "required": false; }; }, { "backdropClicked": "backdropClicked"; }, ["sidebars"], ["daff-sidebar:not([side=right])", "
|
88
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarViewportComponent, "daff-sidebar-viewport", never, { "navPlacement": { "alias": "navPlacement"; "required": false; }; }, { "backdropClicked": "backdropClicked"; }, ["sidebars"], ["[daff-sidebar-viewport-nav]", "daff-sidebar:not([side=right])", "*", "daff-sidebar[side=right]"], true, never>;
|
89
89
|
}
|
@@ -9,7 +9,7 @@ import * as i7 from "./sidebar-header/sidebar-header-title/sidebar-header-title.
|
|
9
9
|
import * as i8 from "./sidebar-header/sidebar-header-action/sidebar-header-action.directive";
|
10
10
|
import * as i9 from "./sidebar-viewport-backdrop/sidebar-viewport-backdrop.component";
|
11
11
|
/**
|
12
|
-
* @deprecated in favor of {@link DAFF_SIDEBAR_COMPONENTS}
|
12
|
+
* @deprecated in favor of {@link DAFF_SIDEBAR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
|
13
13
|
*/
|
14
14
|
export declare class DaffSidebarModule {
|
15
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarModule, never>;
|
@@ -1,9 +1,9 @@
|
|
1
1
|
@use '../../scss/core';
|
2
2
|
|
3
3
|
@mixin daff-sidebar-theme($theme) {
|
4
|
-
$base: core.daff-map-
|
5
|
-
$base-contrast: core.daff-map-
|
6
|
-
$font-color: core.daff-map-
|
4
|
+
$base: core.daff-map-get($theme, 'core', 'base');
|
5
|
+
$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
|
6
|
+
$font-color: core.daff-map-get($theme, 'core', 'font-color');
|
7
7
|
|
8
8
|
.daff-sidebar {
|
9
9
|
background: $base;
|
@@ -3,12 +3,12 @@
|
|
3
3
|
@use '../../../../../scss/theming';
|
4
4
|
|
5
5
|
@mixin daff-form-field-theme($theme) {
|
6
|
-
$primary: map
|
7
|
-
$secondary: map
|
8
|
-
$tertiary: map
|
9
|
-
$base: core.daff-map-
|
10
|
-
$base-contrast: core.daff-map-
|
11
|
-
$neutral: core.daff-map-
|
6
|
+
$primary: core.daff-map-get($theme, primary);
|
7
|
+
$secondary: core.daff-map-get($theme, secondary);
|
8
|
+
$tertiary: core.daff-map-get($theme, tertiary);
|
9
|
+
$base: core.daff-map-get($theme, 'core', 'base');
|
10
|
+
$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
|
11
|
+
$neutral: core.daff-map-get($theme, 'core', 'neutral');
|
12
12
|
|
13
13
|
.daff-form-field {
|
14
14
|
&__control {
|
@@ -2,8 +2,8 @@
|
|
2
2
|
@use '../../../../scss/theming';
|
3
3
|
|
4
4
|
@mixin daff-input-theme($theme) {
|
5
|
-
$base: core.daff-map-
|
6
|
-
$base-contrast: core.daff-map-
|
5
|
+
$base: core.daff-map-get($theme, 'core', 'base');
|
6
|
+
$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
|
7
7
|
|
8
8
|
:host {
|
9
9
|
background: $base;
|
@@ -3,9 +3,9 @@
|
|
3
3
|
@use '../../../../scss/theming';
|
4
4
|
|
5
5
|
@mixin daff-native-select-theme($theme) {
|
6
|
-
$neutral: core.daff-map-
|
7
|
-
$base-contrast: core.daff-map-
|
8
|
-
$black: core.daff-map-
|
6
|
+
$neutral: core.daff-map-get($theme, 'core', 'neutral');
|
7
|
+
$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
|
8
|
+
$black: core.daff-map-get($theme, 'core', 'black');
|
9
9
|
|
10
10
|
.daff-native-select {
|
11
11
|
color: theming.daff-illuminate($base-contrast, $neutral, 4);
|
package/switch/README.md
ADDED
@@ -0,0 +1,61 @@
|
|
1
|
+
# Switch
|
2
|
+
A switch allows users to toggle the state of a single setting.
|
3
|
+
|
4
|
+
## Overview
|
5
|
+
Switches provide a way to toggle between two states with a visual indicator of the current state. A label can be positioned on the left, right, top, or bottom of the switch. The switch can be set to a disabled state, display a loading indicator, or show a custom error message.
|
6
|
+
|
7
|
+
## Usage
|
8
|
+
|
9
|
+
### Within a standalone component
|
10
|
+
To use a switch in a standalone component, import it directly into your custom component:
|
11
|
+
|
12
|
+
```ts
|
13
|
+
@Component({
|
14
|
+
selector: 'custom-component',
|
15
|
+
templateUrl: './custom-component.component.html',
|
16
|
+
standalone: true,
|
17
|
+
imports: [
|
18
|
+
DAFF_SWITCH_COMPONENTS,
|
19
|
+
],
|
20
|
+
})
|
21
|
+
export class CustomComponent {}
|
22
|
+
```
|
23
|
+
|
24
|
+
## Examples
|
25
|
+
|
26
|
+
### Basic Switch
|
27
|
+
A basic switch can be toggled by setting the `checked` property to `true` or `false`. By default, this is set to `false`.
|
28
|
+
|
29
|
+
<design-land-example-viewer-container example="basic-switch"></design-land-example-viewer-container>
|
30
|
+
|
31
|
+
### Disabled Switch
|
32
|
+
A switch with the `disabled` property will be non-interactive.
|
33
|
+
|
34
|
+
<design-land-example-viewer-container example="disabled-switch"></design-land-example-viewer-container>
|
35
|
+
|
36
|
+
### Loading Switch
|
37
|
+
A switch can display a loading state by setting `loading` to `true`. This will also disable the switch.
|
38
|
+
|
39
|
+
<design-land-example-viewer-container example="loading-switch"></design-land-example-viewer-container>
|
40
|
+
|
41
|
+
### Switch with Error
|
42
|
+
An error message can be displayed by setting `error` to `true` and including a `daff-error-message` to show the message text.
|
43
|
+
|
44
|
+
<design-land-example-viewer-container example="switch-error"></design-land-example-viewer-container>
|
45
|
+
|
46
|
+
### Changing Label Position
|
47
|
+
The label position can be changed by setting the `labelPosition` property. The default position is `left`.
|
48
|
+
|
49
|
+
Supported positions: `left | right | top | bottom`
|
50
|
+
|
51
|
+
<design-land-example-viewer-container example="switch-label-positions"></design-land-example-viewer-container>
|
52
|
+
|
53
|
+
|
54
|
+
## Accessibility
|
55
|
+
Switches follow the [ARIA Switch design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
|
56
|
+
|
57
|
+
### Keyboard Interactions
|
58
|
+
| Key | Action |
|
59
|
+
| --- | ------ |
|
60
|
+
| Space | Toggles the switch to the opposite state. |
|
61
|
+
| Tab | Moves to next component on the page. |
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class BasicSwitchComponent {
|
3
|
+
checked: boolean;
|
4
|
+
disabled: boolean;
|
5
|
+
loading: boolean;
|
6
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BasicSwitchComponent, never>;
|
7
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BasicSwitchComponent, "basic-switch", never, {}, {}, never, never, true, never>;
|
8
|
+
}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class DisabledSwitchComponent {
|
3
|
+
checked: boolean;
|
4
|
+
disabled: boolean;
|
5
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DisabledSwitchComponent, never>;
|
6
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DisabledSwitchComponent, "disabled-switch", never, {}, {}, never, never, true, never>;
|
7
|
+
}
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import { DisabledSwitchComponent } from './disabled-switch/disabled-switch.component';
|
2
|
+
import { LoadingSwitchComponent } from './loading-switch/loading-switch.component';
|
3
|
+
import { SwitchErrorComponent } from './switch-error/switch-error.component';
|
4
|
+
import { SwitchLabelPositionsComponent } from './switch-label-positions/switch-label-positions.component';
|
5
|
+
export declare const SWITCH_EXAMPLES: (typeof DisabledSwitchComponent | typeof LoadingSwitchComponent | typeof SwitchErrorComponent | typeof SwitchLabelPositionsComponent)[];
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './public_api';
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class LoadingSwitchComponent {
|
3
|
+
checked: boolean;
|
4
|
+
loading: boolean;
|
5
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LoadingSwitchComponent, never>;
|
6
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LoadingSwitchComponent, "loading-switch", never, {}, {}, never, never, true, never>;
|
7
|
+
}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
export { SWITCH_EXAMPLES } from './examples';
|
2
|
+
export { BasicSwitchComponent } from './basic-switch/basic-switch.component';
|
3
|
+
export { DisabledSwitchComponent } from './disabled-switch/disabled-switch.component';
|
4
|
+
export { LoadingSwitchComponent } from './loading-switch/loading-switch.component';
|
5
|
+
export { SwitchErrorComponent } from './switch-error/switch-error.component';
|
6
|
+
export { SwitchLabelPositionsComponent } from './switch-label-positions/switch-label-positions.component';
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class SwitchErrorComponent {
|
3
|
+
checked: boolean;
|
4
|
+
error: boolean;
|
5
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SwitchErrorComponent, never>;
|
6
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SwitchErrorComponent, "switch-error", never, {}, {}, never, never, true, never>;
|
7
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import { UntypedFormControl } from '@angular/forms';
|
2
|
+
import * as i0 from "@angular/core";
|
3
|
+
export declare class SwitchLabelPositionsComponent {
|
4
|
+
labelSwitchExample: UntypedFormControl;
|
5
|
+
labelPositionControl: UntypedFormControl;
|
6
|
+
options: {
|
7
|
+
value: string;
|
8
|
+
label: string;
|
9
|
+
}[];
|
10
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SwitchLabelPositionsComponent, never>;
|
11
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SwitchLabelPositionsComponent, "switch-label-positions", never, {}, {}, never, never, true, never>;
|
12
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './public_api';
|
@@ -0,0 +1,31 @@
|
|
1
|
+
@use 'sass:map';
|
2
|
+
@use '../../scss/core';
|
3
|
+
@use '../../scss/theming';
|
4
|
+
|
5
|
+
@mixin daff-switch-theme($theme) {
|
6
|
+
$primary: core.daff-map-get($theme, primary);
|
7
|
+
$base: core.daff-map-get($theme, 'core', 'base');
|
8
|
+
$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
|
9
|
+
$white: core.daff-map-get($theme, 'core', 'white');
|
10
|
+
$black: core.daff-map-get($theme, 'core', 'black');
|
11
|
+
$neutral: core.daff-map-get($theme, 'core', 'neutral');
|
12
|
+
|
13
|
+
.daff-switch {
|
14
|
+
&__toggle {
|
15
|
+
background-color: theming.daff-illuminate($base, $neutral, 3);
|
16
|
+
border: 2px solid transparent;
|
17
|
+
|
18
|
+
&:focus-within {
|
19
|
+
border: 2px solid theming.daff-illuminate($base, $neutral, 2);
|
20
|
+
}
|
21
|
+
|
22
|
+
&.daff-checked {
|
23
|
+
background-color: theming.daff-color($primary);
|
24
|
+
}
|
25
|
+
|
26
|
+
&::before {
|
27
|
+
background-color: $base;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
}
|
31
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
export type DaffLabelPosition = 'daff-left' | 'daff-right' | 'daff-top' | 'daff-bottom';
|
2
|
+
/**
|
3
|
+
* The position of the label relative to the switch.
|
4
|
+
*/
|
5
|
+
export declare enum DaffLabelPositionEnum {
|
6
|
+
LEFT = "daff-left",
|
7
|
+
RIGHT = "daff-right",
|
8
|
+
TOP = "daff-top",
|
9
|
+
BOTTOM = "daff-bottom"
|
10
|
+
}
|
@@ -0,0 +1,53 @@
|
|
1
|
+
import { EventEmitter } from '@angular/core';
|
2
|
+
import { DaffLabelPosition } from './label-position';
|
3
|
+
import * as i0 from "@angular/core";
|
4
|
+
/**
|
5
|
+
* The switch component provides a way to toggle between two settings.
|
6
|
+
*
|
7
|
+
* ## Usage
|
8
|
+
* <daff-switch [checked]="checked" loading="loading" [error]="true" [labelPosition]="daff-left">
|
9
|
+
* Label
|
10
|
+
* <daff-error-message>Error message</daff-error-message>
|
11
|
+
* </daff-switch>
|
12
|
+
*/
|
13
|
+
export declare class DaffSwitchComponent {
|
14
|
+
/**
|
15
|
+
* Whether the switch is disabled and/or loading.
|
16
|
+
*/
|
17
|
+
get disabled(): any;
|
18
|
+
set disabled(value: any);
|
19
|
+
get disabledAttribute(): boolean;
|
20
|
+
get ariaDisabled(): boolean;
|
21
|
+
get classes(): string;
|
22
|
+
/**
|
23
|
+
* Whether the switch is loading.
|
24
|
+
*/
|
25
|
+
loading: boolean;
|
26
|
+
/**
|
27
|
+
* Current state of switch (on/off).
|
28
|
+
*/
|
29
|
+
checked: boolean;
|
30
|
+
/**
|
31
|
+
* The position of the label relative to the switch. Defaults to 'daff-left'.
|
32
|
+
*/
|
33
|
+
labelPosition: DaffLabelPosition;
|
34
|
+
/**
|
35
|
+
* Whether the switch shows an error.
|
36
|
+
*/
|
37
|
+
error: boolean;
|
38
|
+
_disabled: boolean;
|
39
|
+
handleKeydown(event: KeyboardEvent): void;
|
40
|
+
/**
|
41
|
+
* @docs-private
|
42
|
+
*/
|
43
|
+
private externalAriaLabel;
|
44
|
+
/**
|
45
|
+
* aria-label for the switch.
|
46
|
+
*/
|
47
|
+
ariaLabel: string;
|
48
|
+
id: string;
|
49
|
+
toggled: EventEmitter<boolean>;
|
50
|
+
onToggle(): void;
|
51
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffSwitchComponent, never>;
|
52
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DaffSwitchComponent, "daff-switch", never, { "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "error": { "alias": "error"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "toggled": "toggled"; }, never, ["*", "daff-error-message"], true, never>;
|
53
|
+
}
|
package/tabs/README.md
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
# Tabs
|
2
|
+
Tabs provide a way to navigate between panels that display related content.
|
3
|
+
|
4
|
+
## Overview
|
5
|
+
Tabs allow for users to navigate between related content without having to leave the page. They can be used within components like modals or cards.
|
6
|
+
|
7
|
+
## Accessbility
|
8
|
+
Tabs follow the [ARIA Tabs design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). Tabs compose of `tablist`, `tab`, and `tabpanel` elements, each with its appropriate role and integrated keyboard interactions.
|
9
|
+
|
10
|
+
### Label
|
11
|
+
A meaningful `aria-label` should be set on `<daff-tabs>` by using the `aria-label` property. This will set the `aria-label` on the `tablist` element.
|
12
|
+
|
13
|
+
### Keyboard Interactions
|
14
|
+
| Key | Action |
|
15
|
+
| --- | ------ |
|
16
|
+
| Left Arrow | Moves focus and activates previous tab. If focus is on the first tab, moves focus to the last tab. |
|
17
|
+
| Right Arrow | Moves focus and activates next tab. If focus is on the last tab, moves focus to the first tab. |
|
18
|
+
| Home | Moves focus and activates first tab. |
|
19
|
+
| End | Moves focus and activates last tab. |
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class BasicTabsComponent {
|
3
|
+
faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
4
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BasicTabsComponent, never>;
|
5
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<BasicTabsComponent, "basic-tabs", never, {}, {}, never, never, true, never>;
|
6
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { DaffTabsComponent } from '@daffodil/design/tabs';
|
2
|
+
import * as i0 from "@angular/core";
|
3
|
+
export declare class CustomSelectTabsComponent {
|
4
|
+
faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
5
|
+
selectedTab: string;
|
6
|
+
_tab: DaffTabsComponent;
|
7
|
+
selectTabThree(): void;
|
8
|
+
selectTabFive(): void;
|
9
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<CustomSelectTabsComponent, never>;
|
10
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CustomSelectTabsComponent, "custom-select-tabs", never, {}, {}, never, never, true, never>;
|
11
|
+
}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class DisabledTabsComponent {
|
3
|
+
faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
4
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DisabledTabsComponent, never>;
|
5
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DisabledTabsComponent, "disabled-tabs", never, {}, {}, never, never, true, never>;
|
6
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './public_api';
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class InitiallySelectTabComponent {
|
3
|
+
faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
4
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<InitiallySelectTabComponent, never>;
|
5
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<InitiallySelectTabComponent, "initially-select-tab", never, {}, {}, never, never, true, never>;
|
6
|
+
}
|
package/tabs/index.d.ts
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
export * from './public_api';
|
@@ -0,0 +1,5 @@
|
|
1
|
+
export { DAFF_TABS_COMPONENTS } from './tabs';
|
2
|
+
export { DaffTabsComponent } from './tabs/tabs.component';
|
3
|
+
export { DaffTabPanelComponent } from './tabs/tab-panel/tab-panel.component';
|
4
|
+
export { DaffTabComponent } from './tabs/tab/tab.component';
|
5
|
+
export { DaffTabLabelComponent } from './tabs/tab-label/tab-label.component';
|
@@ -0,0 +1,22 @@
|
|
1
|
+
@use 'sass:map';
|
2
|
+
@use '../../scss/core';
|
3
|
+
@use '../../scss/theming';
|
4
|
+
|
5
|
+
@mixin daff-tabs-theme($theme) {
|
6
|
+
$primary: core.daff-map-get($theme, primary);
|
7
|
+
$secondary: core.daff-map-get($theme, secondary);
|
8
|
+
$tertiary: core.daff-map-get($theme, tertiary);
|
9
|
+
$neutral: core.daff-map-get($theme, 'core', 'neutral');
|
10
|
+
$base: core.daff-map-get($theme, 'core', 'base');
|
11
|
+
$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
|
12
|
+
$white: core.daff-map-get($theme, 'core', 'white');
|
13
|
+
$black: core.daff-map-get($theme, 'core', 'black');
|
14
|
+
|
15
|
+
.daff-tab-activator {
|
16
|
+
border-bottom: 2px solid theming.daff-illuminate($base, $neutral, 2);
|
17
|
+
|
18
|
+
&.daff-selected {
|
19
|
+
border-bottom: 2px solid theming.daff-color($primary);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
}
|
@@ -0,0 +1,57 @@
|
|
1
|
+
import { TemplateRef } from '@angular/core';
|
2
|
+
import * as i0 from "@angular/core";
|
3
|
+
/**
|
4
|
+
* `DaffTabComponet` is an element in the tab list that is used as a content container to group the label of a tab panel and the tab panel together.
|
5
|
+
*
|
6
|
+
* ## Template Structure
|
7
|
+
* A `<daff-tab>` should include the {@link DaffTabLabelComponent} and {@link DaffTabPanelComponent} components in order to properly structure the UI.
|
8
|
+
*
|
9
|
+
* ## Usage
|
10
|
+
* ```html
|
11
|
+
* <daff-tab>
|
12
|
+
* <daff-tab-label>
|
13
|
+
* <fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
|
14
|
+
* Tab 1
|
15
|
+
* </daff-tab-label>
|
16
|
+
* <daff-tab-panel>
|
17
|
+
* Tab 1 Panel
|
18
|
+
* </daff-tab-panel>
|
19
|
+
* </daff-tab>
|
20
|
+
* ```
|
21
|
+
*/
|
22
|
+
export declare class DaffTabComponent {
|
23
|
+
/**
|
24
|
+
* Whether the tab is disabled.
|
25
|
+
*
|
26
|
+
* ```html
|
27
|
+
* <daff-tab [disabled]="true">
|
28
|
+
* </daff-tab>
|
29
|
+
* ```
|
30
|
+
*/
|
31
|
+
disabled: boolean;
|
32
|
+
/**
|
33
|
+
* @docs-private
|
34
|
+
*/
|
35
|
+
contentRef: TemplateRef<any>;
|
36
|
+
/**
|
37
|
+
* @docs-private
|
38
|
+
*/
|
39
|
+
labelRef: TemplateRef<any>;
|
40
|
+
/**
|
41
|
+
* A unique id for the tab component.
|
42
|
+
*
|
43
|
+
* The `id` is automatically generated by linking the prefix 'daff-tab-' with an incrementing `tabId`. This value can be customized by passing a different `id` value via the component's `id` input.
|
44
|
+
*
|
45
|
+
* ```html
|
46
|
+
* <daff-tab [id]="'custom-id'"></daff-tab>
|
47
|
+
* ```
|
48
|
+
*/
|
49
|
+
id: string;
|
50
|
+
/**
|
51
|
+
* @docs-private
|
52
|
+
*/
|
53
|
+
panelId: string;
|
54
|
+
constructor();
|
55
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabComponent, never>;
|
56
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabComponent, "daff-tab", never, { "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, ["daff-tab-label", "daff-tab-panel"], true, never>;
|
57
|
+
}
|