@3ddv/software-division-components 2.0.0 → 2.0.2
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/fesm2022/3ddv-software-division-components-generic-carousel.mjs +354 -0
- package/fesm2022/3ddv-software-division-components-generic-carousel.mjs.map +1 -0
- package/package.json +47 -67
- package/styles.css +2 -46
- package/types/3ddv-software-division-components-generic-carousel.d.ts +53 -0
- package/.postcssrc.json +0 -5
- package/.storybook/main.ts +0 -78
- package/.storybook/manager-head.html +0 -1
- package/.storybook/preview.ts +0 -30
- package/.storybook/tsconfig.json +0 -25
- package/.storybook/typings.d.ts +0 -4
- package/CHANGELOG.md +0 -8
- package/LICENSE.md +0 -21
- package/backoffice/checkbox/checkbox.component.css +0 -193
- package/backoffice/checkbox/checkbox.component.html +0 -23
- package/backoffice/checkbox/checkbox.component.ts +0 -252
- package/backoffice/checkbox/index.ts +0 -1
- package/backoffice/checkbox/ng-package.json +0 -1
- package/backoffice/checkbox/public-api.ts +0 -1
- package/backoffice/checkbox/story/checkbox.stories.ts +0 -304
- package/backoffice/datepicker/datepicker.component.css +0 -262
- package/backoffice/datepicker/datepicker.component.html +0 -40
- package/backoffice/datepicker/datepicker.component.ts +0 -366
- package/backoffice/datepicker/index.ts +0 -1
- package/backoffice/datepicker/ng-package.json +0 -1
- package/backoffice/datepicker/public-api.ts +0 -2
- package/backoffice/datepicker/story/datepicker.stories.ts +0 -32
- package/backoffice/datepicker/ui/ui-calendar-helm/src/index.ts +0 -14
- package/backoffice/datepicker/ui/ui-calendar-helm/src/lib/hlm-calendar-multi.ts +0 -183
- package/backoffice/datepicker/ui/ui-calendar-helm/src/lib/hlm-calendar.ts +0 -171
- package/backoffice/datepicker/ui/ui-date-picker-helm/src/index.ts +0 -16
- package/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker-multi.token.ts +0 -43
- package/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker-multi.ts +0 -177
- package/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker.token.ts +0 -43
- package/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker.ts +0 -167
- package/backoffice/datepicker/ui/ui-icon-helm/src/index.ts +0 -11
- package/backoffice/datepicker/ui/ui-icon-helm/src/lib/hlm-icon.token.ts +0 -20
- package/backoffice/datepicker/ui/ui-icon-helm/src/lib/hlm-icon.ts +0 -35
- package/backoffice/datepicker/ui/ui-popover-helm/src/index.ts +0 -15
- package/backoffice/datepicker/ui/ui-popover-helm/src/lib/hlm-popover-close.ts +0 -19
- package/backoffice/datepicker/ui/ui-popover-helm/src/lib/hlm-popover-content.ts +0 -30
- package/backoffice/index.ts +0 -1
- package/backoffice/input/index.ts +0 -1
- package/backoffice/input/input.component.css +0 -319
- package/backoffice/input/input.component.html +0 -51
- package/backoffice/input/input.component.ts +0 -497
- package/backoffice/input/ng-package.json +0 -1
- package/backoffice/input/public-api.ts +0 -2
- package/backoffice/input/story/input.stories.ts +0 -243
- package/backoffice/radio/index.ts +0 -1
- package/backoffice/radio/ng-package.json +0 -1
- package/backoffice/radio/public-api.ts +0 -1
- package/backoffice/radio/radio.component.css +0 -143
- package/backoffice/radio/radio.component.html +0 -15
- package/backoffice/radio/radio.component.ts +0 -154
- package/backoffice/radio/story/radio.stories.ts +0 -287
- package/backoffice/table/_components/pagination/pagination.component.css +0 -117
- package/backoffice/table/_components/pagination/pagination.component.html +0 -55
- package/backoffice/table/_components/pagination/pagination.component.ts +0 -79
- package/backoffice/table/_components/selection-table-head/selection-table-head.component.css +0 -0
- package/backoffice/table/_components/selection-table-head/selection-table-head.component.html +0 -6
- package/backoffice/table/_components/selection-table-head/selection-table-head.component.ts +0 -36
- package/backoffice/table/_components/selection-table-row/selection-table-row.component.css +0 -0
- package/backoffice/table/_components/selection-table-row/selection-table-row.component.html +0 -5
- package/backoffice/table/_components/selection-table-row/selection-table-row.component.ts +0 -12
- package/backoffice/table/_components/sort-header-button/sort-header-button.component.css +0 -14
- package/backoffice/table/_components/sort-header-button/sort-header-button.component.html +0 -11
- package/backoffice/table/_components/sort-header-button/sort-header-button.component.ts +0 -55
- package/backoffice/table/index.ts +0 -1
- package/backoffice/table/ng-package.json +0 -1
- package/backoffice/table/public-api.ts +0 -6
- package/backoffice/table/story/table.stories.ts +0 -364
- package/backoffice/table/table.component.css +0 -172
- package/backoffice/table/table.component.html +0 -53
- package/backoffice/table/table.component.ts +0 -347
- package/backoffice/table/ui/ui-icon-helm/src/index.ts +0 -11
- package/backoffice/table/ui/ui-icon-helm/src/lib/hlm-icon.token.ts +0 -20
- package/backoffice/table/ui/ui-icon-helm/src/lib/hlm-icon.ts +0 -35
- package/backoffice/table/ui/ui-table-helm/src/index.ts +0 -13
- package/backoffice/table/ui/ui-table-helm/src/lib/hlm-table.ts +0 -220
- package/components.json +0 -3
- package/dist/styles.css +0 -2
- package/documentation.json +0 -30473
- package/dvm/cart/cart.component.css +0 -103
- package/dvm/cart/cart.component.html +0 -31
- package/dvm/cart/cart.component.ts +0 -49
- package/dvm/cart/cart.stories.ts +0 -370
- package/dvm/cart/cart.types.ts +0 -8
- package/dvm/cart/index.ts +0 -2
- package/dvm/cart/ng-package.json +0 -1
- package/dvm/cart/public-api.ts +0 -8
- package/dvm/cart/seat-list.component.css +0 -281
- package/dvm/cart/seat-list.component.html +0 -85
- package/dvm/cart/seat-list.component.ts +0 -76
- package/dvm/cart/seat-list.stories.ts +0 -337
- package/dvm/cart-item/cart-item.component.html +0 -1
- package/dvm/cart-item/cart-item.component.ts +0 -8
- package/dvm/cart-item/cart-item.service.ts +0 -8
- package/dvm/cart-item/cart.stories.ts +0 -31
- package/dvm/cart-item/index.ts +0 -1
- package/dvm/cart-item/ng-package.json +0 -1
- package/dvm/cart-item/public-api.ts +0 -6
- package/dvm/index.ts +0 -1
- package/dvm/legend/index.ts +0 -1
- package/dvm/legend/legend.component.css +0 -49
- package/dvm/legend/legend.component.html +0 -8
- package/dvm/legend/legend.component.ts +0 -41
- package/dvm/legend/legend.stories.ts +0 -16
- package/dvm/legend/ng-package.json +0 -1
- package/dvm/legend/public-api.ts +0 -7
- package/dvm/legend/types.ts +0 -6
- package/dvm/legend/ui/legend-elements/index.ts +0 -1
- package/dvm/legend/ui/legend-elements/legend-elements.component.css +0 -49
- package/dvm/legend/ui/legend-elements/legend-elements.component.html +0 -8
- package/dvm/legend/ui/legend-elements/legend-elements.component.ts +0 -41
- package/dvm/loader/index.ts +0 -1
- package/dvm/loader/loader.component.html +0 -1
- package/dvm/loader/loader.component.ts +0 -8
- package/dvm/loader/loader.service.ts +0 -8
- package/dvm/loader/loader.stories.ts +0 -31
- package/dvm/loader/ng-package.json +0 -1
- package/dvm/loader/public-api.ts +0 -6
- package/dvm/map-loader/index.ts +0 -1
- package/dvm/map-loader/map-loader.component.css +0 -91
- package/dvm/map-loader/map-loader.component.html +0 -23
- package/dvm/map-loader/map-loader.component.ts +0 -187
- package/dvm/map-loader/map-loader.stories.ts +0 -16
- package/dvm/map-loader/ng-package.json +0 -1
- package/dvm/map-loader/public-api.ts +0 -5
- package/dvm/neighbors/index.ts +0 -1
- package/dvm/neighbors/neighbors.component.css +0 -158
- package/dvm/neighbors/neighbors.component.html +0 -45
- package/dvm/neighbors/neighbors.component.ts +0 -218
- package/dvm/neighbors/ng-package.json +0 -1
- package/dvm/neighbors/public-api.ts +0 -2
- package/dvm/neighbors/story/arrow-left-black-icon.svg +0 -3
- package/dvm/neighbors/story/mock-data.ts +0 -15
- package/dvm/neighbors/story/neighbours.stories.css +0 -12
- package/dvm/neighbors/story/neighbours.stories.ts +0 -117
- package/dvm/neighbors/types.ts +0 -14
- package/dvm/popover/base-popover.component.ts +0 -70
- package/dvm/popover/index.ts +0 -1
- package/dvm/popover/ng-package.json +0 -1
- package/dvm/popover/popover.component.css +0 -227
- package/dvm/popover/popover.component.html +0 -27
- package/dvm/popover/popover.component.ts +0 -236
- package/dvm/popover/popover.config.ts +0 -30
- package/dvm/popover/popover.service.ts +0 -627
- package/dvm/popover/popover.stories.ts +0 -873
- package/dvm/popover/public-api.ts +0 -14
- package/dvm/popover/seat-popover/seat-popover.component.css +0 -89
- package/dvm/popover/seat-popover/seat-popover.component.html +0 -40
- package/dvm/popover/seat-popover/seat-popover.component.ts +0 -74
- package/dvm/popover/section-popover/section-popover.component.css +0 -157
- package/dvm/popover/section-popover/section-popover.component.html +0 -58
- package/dvm/popover/section-popover/section-popover.component.ts +0 -106
- package/dvm/popover/services/dvm-popover-positioner.service.ts +0 -73
- package/dvm/popover/services/popover-manager.service.ts +0 -88
- package/dvm/popover/transformers/base-popover-data-transformer.ts +0 -36
- package/dvm/popover/types.ts +0 -104
- package/dvm/stepper/index.ts +0 -1
- package/dvm/stepper/ng-package.json +0 -1
- package/dvm/stepper/public-api.ts +0 -5
- package/dvm/stepper/stepper.component.css +0 -142
- package/dvm/stepper/stepper.component.html +0 -9
- package/dvm/stepper/stepper.component.ts +0 -101
- package/dvm/stepper/types.ts +0 -6
- package/dvm/ticket-info-item/index.ts +0 -1
- package/dvm/ticket-info-item/ng-package.json +0 -1
- package/dvm/ticket-info-item/public-api.ts +0 -6
- package/dvm/ticket-info-item/ticket-info-item.component.html +0 -1
- package/dvm/ticket-info-item/ticket-info-item.component.ts +0 -8
- package/dvm/ticket-info-item/ticket-info-item.service.ts +0 -8
- package/dvm/ticket-info-item/ticket-info-item.stories.ts +0 -31
- package/generic/add-digital-wallet/add-digital-wallet.component.css +0 -76
- package/generic/add-digital-wallet/add-digital-wallet.component.html +0 -46
- package/generic/add-digital-wallet/add-digital-wallet.component.ts +0 -44
- package/generic/add-digital-wallet/index.ts +0 -1
- package/generic/add-digital-wallet/ng-package.json +0 -1
- package/generic/add-digital-wallet/public-api.ts +0 -1
- package/generic/braintree/braintree.component.css +0 -7
- package/generic/braintree/braintree.component.ts +0 -134
- package/generic/braintree/index.ts +0 -1
- package/generic/braintree/ng-package.json +0 -1
- package/generic/braintree/public-api.ts +0 -6
- package/generic/braintree/story/braintree.stories.css +0 -3
- package/generic/braintree/story/braintree.stories.ts +0 -27
- package/generic/braintree/types.ts +0 -28
- package/generic/button/button.component.css +0 -305
- package/generic/button/button.component.html +0 -10
- package/generic/button/button.component.ts +0 -353
- package/generic/button/index.ts +0 -1
- package/generic/button/ng-package.json +0 -1
- package/generic/button/public-api.ts +0 -6
- package/generic/button/story/button.stories.ts +0 -384
- package/generic/button/ui/ui-button-helm/src/index.ts +0 -10
- package/generic/button/ui/ui-button-helm/src/lib/hlm-button.token.ts +0 -22
- package/generic/button/ui/ui-button-helm/src/lib/hlm-button.ts +0 -62
- package/generic/carousel/carousel-item.component.ts +0 -15
- package/generic/carousel/carousel-item.directive.ts +0 -14
- package/generic/carousel/carousel.component.css +0 -90
- package/generic/carousel/carousel.component.html +0 -13
- package/generic/carousel/carousel.component.ts +0 -44
- package/generic/carousel/index.ts +0 -1
- package/generic/carousel/public-api.ts +0 -2
- package/generic/carousel/ui/ui-carousel-helm/src/index.ts +0 -29
- package/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-content.ts +0 -23
- package/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-item.ts +0 -25
- package/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-next.ts +0 -58
- package/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-previous.ts +0 -61
- package/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel-slide-display.ts +0 -36
- package/generic/carousel/ui/ui-carousel-helm/src/lib/hlm-carousel.ts +0 -105
- package/generic/dialog/dialog.component.css +0 -5
- package/generic/dialog/dialog.component.html +0 -3
- package/generic/dialog/dialog.component.ts +0 -20
- package/generic/dialog/dialog.stories.ts +0 -14
- package/generic/dialog/index.ts +0 -1
- package/generic/dialog/libs/ui-dialog-helm/src/index.ts +0 -37
- package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-close.ts +0 -20
- package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-content.ts +0 -56
- package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-description.ts +0 -17
- package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-footer.ts +0 -19
- package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-header.ts +0 -19
- package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-overlay.ts +0 -23
- package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog-title.ts +0 -19
- package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog.service.ts +0 -59
- package/generic/dialog/libs/ui-dialog-helm/src/lib/hlm-dialog.ts +0 -31
- package/generic/dialog/ng-package.json +0 -1
- package/generic/dialog/public-api.ts +0 -7
- package/generic/dialog/tsconfig.json +0 -7
- package/generic/dialog/ui/dialog-close-button/dialog-close-button.component.css +0 -0
- package/generic/dialog/ui/dialog-close-button/dialog-close-button.component.html +0 -1
- package/generic/dialog/ui/dialog-close-button/dialog-close-button.component.ts +0 -17
- package/generic/dialog/ui/dialog-footer/dialog-footer.component.css +0 -0
- package/generic/dialog/ui/dialog-footer/dialog-footer.component.html +0 -3
- package/generic/dialog/ui/dialog-footer/dialog-footer.component.ts +0 -11
- package/generic/dialog/ui/dialog-header/dialog-header.component.css +0 -0
- package/generic/dialog/ui/dialog-header/dialog-header.component.html +0 -8
- package/generic/dialog/ui/dialog-header/dialog-header.component.ts +0 -18
- package/generic/drawer/drawer.component.html +0 -1
- package/generic/drawer/drawer.component.ts +0 -8
- package/generic/drawer/drawer.service.ts +0 -8
- package/generic/drawer/drawer.stories.ts +0 -31
- package/generic/drawer/index.ts +0 -1
- package/generic/drawer/ng-package.json +0 -1
- package/generic/drawer/public-api.ts +0 -6
- package/generic/icon/icon.component.css +0 -7
- package/generic/icon/icon.component.html +0 -3
- package/generic/icon/icon.component.ts +0 -86
- package/generic/icon/icon.stories.ts +0 -16
- package/generic/icon/index.ts +0 -1
- package/generic/icon/lib/ui-icon-helm/src/index.ts +0 -11
- package/generic/icon/lib/ui-icon-helm/src/lib/hlm-icon.token.ts +0 -20
- package/generic/icon/lib/ui-icon-helm/src/lib/hlm-icon.ts +0 -36
- package/generic/icon/ng-package.json +0 -1
- package/generic/icon/public-api.ts +0 -6
- package/generic/icon/tsconfig.json +0 -7
- package/generic/index.ts +0 -1
- package/generic/select/index.ts +0 -1
- package/generic/select/lib/hlm-select-content.ts +0 -29
- package/generic/select/lib/hlm-select-group.ts +0 -17
- package/generic/select/lib/hlm-select-label.ts +0 -26
- package/generic/select/lib/hlm-select-option.ts +0 -37
- package/generic/select/lib/hlm-select-scroll-down.ts +0 -24
- package/generic/select/lib/hlm-select-scroll-up.ts +0 -23
- package/generic/select/lib/hlm-select-trigger.ts +0 -53
- package/generic/select/lib/hlm-select-value.ts +0 -17
- package/generic/select/lib/hlm-select.ts +0 -15
- package/generic/select/lib/index.ts +0 -38
- package/generic/select/ng-package.json +0 -1
- package/generic/select/public-api.ts +0 -3
- package/generic/select/select.component.css +0 -65
- package/generic/select/select.component.html +0 -19
- package/generic/select/select.component.ts +0 -25
- package/generic/select/types.ts +0 -4
- package/ng-package.json +0 -10
- package/public/3ddv-logo.jpg +0 -0
- package/public/neighbours-after.png +0 -0
- package/public/neighbours-before.png +0 -0
- package/shared/apply-theme-variables/apply-theme-variables.ts +0 -35
- package/shared/apply-theme-variables/index.ts +0 -1
- package/shared/format-value.pipe.ts +0 -23
- package/shared/index.ts +0 -1
- package/shared/lib-provider/config-token.ts +0 -4
- package/shared/lib-provider/index.ts +0 -1
- package/shared/lib-provider/provide-sdc.ts +0 -24
- package/shared/lib-provider/public-api.ts +0 -1
- package/shared/ng-package.json +0 -1
- package/shared/public-api.ts +0 -6
- package/shared/screen-observer/index.ts +0 -2
- package/shared/screen-observer/provide-screen-observer.ts +0 -17
- package/shared/screen-observer/screen-observer.ts +0 -56
- package/shared/screen-observer/sizable-base.ts +0 -70
- package/shared/theme-provider/generic-theme.ts +0 -1
- package/shared/theme-provider/index.ts +0 -1
- package/shared/theme-provider/public-api.ts +0 -1
- package/shared/theme-provider/theme-provider.directive.ts +0 -17
- package/shared/themes/sdc.css +0 -153
- package/shared/types.ts +0 -18
- package/src/private-exports.ts +0 -1
- package/src/public-api.ts +0 -20
- package/tsconfig.json +0 -50
- package/tsconfig.lib.prod.json +0 -6
- package/tsconfig.spec.json +0 -15
- package/tsconfig.temp.json +0 -1
- package/utils/index.ts +0 -1
- package/utils/ng-package.json +0 -1
- package/utils/public-api.ts +0 -1
- package/utils/validate-styles-for-component.ts +0 -39
- /package/{dist/README.md → README.md} +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-backoffice-checkbox.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-backoffice-checkbox.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-backoffice-datepicker.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-backoffice-datepicker.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-backoffice-input.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-backoffice-input.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-backoffice-radio.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-backoffice-radio.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-backoffice-table.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-backoffice-table.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-cart-item.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-cart-item.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-cart.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-cart.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-legend.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-legend.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-loader.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-loader.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-map-loader.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-map-loader.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-neighbors.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-neighbors.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-popover.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-popover.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-stepper.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-stepper.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-ticket-info-item.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-dvm-ticket-info-item.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-add-digital-wallet.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-add-digital-wallet.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-braintree.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-braintree.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-button.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-button.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-dialog.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-dialog.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-drawer.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-drawer.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-icon.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-icon.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-select.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-generic-select.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-shared.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-shared.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-utils.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components-utils.mjs.map +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components.mjs +0 -0
- /package/{dist/fesm2022 → fesm2022}/3ddv-software-division-components.mjs.map +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-backoffice-checkbox.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-backoffice-datepicker.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-backoffice-input.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-backoffice-radio.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-backoffice-table.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-dvm-cart-item.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-dvm-cart.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-dvm-legend.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-dvm-loader.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-dvm-map-loader.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-dvm-neighbors.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-dvm-popover.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-dvm-stepper.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-dvm-ticket-info-item.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-generic-add-digital-wallet.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-generic-braintree.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-generic-button.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-generic-dialog.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-generic-drawer.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-generic-icon.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-generic-select.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-shared.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components-utils.d.ts +0 -0
- /package/{dist/types → types}/3ddv-software-division-components.d.ts +0 -0
|
@@ -1,262 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* This dialog in rendered at the root of the DOM.
|
|
3
|
-
* For the styles to apply to the dialog, we need to apply the theme-sdc class
|
|
4
|
-
* to the dialog container located here:
|
|
5
|
-
* /src/backoffice/datepicker/ui/ui-date-picker-helm/src/lib/hlm-date-picker.ts
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
.sdc-datepicker {
|
|
9
|
-
--sdc-datepicker-label-color: var(--color-neutral-700);
|
|
10
|
-
--sdc-datepicker-label-size: var(--text-base);
|
|
11
|
-
--sdc-datepicker-label-weight: var(--font-semibold);
|
|
12
|
-
--sdc-datepicker-label-gap: var(--space-6);
|
|
13
|
-
--sdc-datepicker-label-width: auto;
|
|
14
|
-
--sdc-datepicker-input-width: 100%;
|
|
15
|
-
--sdc-datepicker-input-background: var(--color-pure-white);
|
|
16
|
-
--sdc-datepicker-input-border-color: var(--color-neutral-300);
|
|
17
|
-
--sdc-datepicker-input-border-width: var(--border-default);
|
|
18
|
-
--sdc-datepicker-input-border-radius: var(--radius-full);
|
|
19
|
-
--sdc-datepicker-input-padding-vertical: var(--space-2);
|
|
20
|
-
--sdc-datepicker-input-padding-horizontal: var(--space-3);
|
|
21
|
-
--sdc-datepicker-input-text-color: var(--color-neutral-900);
|
|
22
|
-
--sdc-datepicker-input-text-size: var(--text-base);
|
|
23
|
-
--sdc-datepicker-input-text-weight: var(--font-medium);
|
|
24
|
-
--sdc-datepicker-input-border-hover: var(--color-neutral-500);
|
|
25
|
-
--sdc-datepicker-input-focus-ring-width: var(--border-default);
|
|
26
|
-
--sdc-datepicker-input-focus-ring-color: var(--color-primary);
|
|
27
|
-
--sdc-datepicker-input-focus-ring-offset: var(--border-2);
|
|
28
|
-
--sdc-datepicker-placeholder-color: var(--color-neutral-500);
|
|
29
|
-
--sdc-datepicker-placeholder-size: var(--text-sm);
|
|
30
|
-
--sdc-datepicker-placeholder-weight: var(--font-medium);
|
|
31
|
-
--sdc-datepicker-hint-color: var(--color-neutral-600);
|
|
32
|
-
--sdc-datepicker-hint-size: var(--text-xs);
|
|
33
|
-
--sdc-datepicker-error-color: var(--color-danger);
|
|
34
|
-
--sdc-datepicker-error-size: var(--text-xs);
|
|
35
|
-
--sdc-datepicker-calendar-background: var(--color-pure-white);
|
|
36
|
-
--sdc-datepicker-calendar-border-color: var(--color-neutral-200);
|
|
37
|
-
--sdc-datepicker-calendar-border-width: var(--border-default);
|
|
38
|
-
--sdc-datepicker-calendar-border-radius: var(--radius-lg);
|
|
39
|
-
--sdc-datepicker-calendar-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
40
|
-
--sdc-datepicker-calendar-padding: var(--space-4);
|
|
41
|
-
--sdc-datepicker-month-year-text-color: var(--color-neutral-900);
|
|
42
|
-
--sdc-datepicker-month-year-text-size: var(--text-base);
|
|
43
|
-
--sdc-datepicker-month-year-text-weight: var(--font-semibold);
|
|
44
|
-
--sdc-datepicker-month-year-hover-text-color: var(--color-neutral-900);
|
|
45
|
-
--sdc-datepicker-month-year-padding: var(--space-2);
|
|
46
|
-
--sdc-datepicker-month-year-button-background: var(--color-pure-white);
|
|
47
|
-
--sdc-datepicker-month-year-button-text-color-hover: var(--color-pure-white);
|
|
48
|
-
--sdc-datepicker-month-year-button-background-hover: var(--color-neutral-900);
|
|
49
|
-
--sdc-datepicker-day-button-disabled-background: transparent;
|
|
50
|
-
--sdc-datepicker-day-button-disabled-text-color: var(--color-neutral-300);
|
|
51
|
-
--sdc-datepicker-day-button-background: transparent;
|
|
52
|
-
--sdc-datepicker-day-button-text-color: var(--color-neutral-900);
|
|
53
|
-
--sdc-datepicker-day-button-text-size: var(--text-sm);
|
|
54
|
-
--sdc-datepicker-day-button-text-weight: var(--font-semibold);
|
|
55
|
-
--sdc-datepicker-day-button-border-radius: var(--radius-md);
|
|
56
|
-
--sdc-datepicker-day-button-padding: var(--space-2);
|
|
57
|
-
--sdc-datepicker-day-button-hover-background: var(--color-secondary);
|
|
58
|
-
--sdc-datepicker-day-button-hover-text-color: var(--color-pure-white);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.component-container {
|
|
62
|
-
display: flex;
|
|
63
|
-
flex-direction: column;
|
|
64
|
-
gap: var(--sdc-datepicker-label-gap);
|
|
65
|
-
width: var(--sdc-datepicker-input-width);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.component-container hlm-date-picker {
|
|
69
|
-
width: var(--sdc-datepicker-input-width);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/* Label styles */
|
|
73
|
-
.sdc-datepicker-label {
|
|
74
|
-
font-weight: var(--sdc-datepicker-label-weight);
|
|
75
|
-
font-size: var(--sdc-datepicker-label-size);
|
|
76
|
-
color: hsl(var(--sdc-datepicker-label-color));
|
|
77
|
-
width: var(--sdc-datepicker-label-width);
|
|
78
|
-
padding-left: var(--sdc-datepicker-input-padding-horizontal);
|
|
79
|
-
line-height: 1.25rem;
|
|
80
|
-
display: block;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.component-container:has(.sdc-datepicker-label.left) {
|
|
84
|
-
padding-left: 0;
|
|
85
|
-
flex-direction: row;
|
|
86
|
-
align-items: center;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
/* Date picker input styles */
|
|
90
|
-
.sdc-datepicker button[brnpopovertrigger] {
|
|
91
|
-
width: var(--sdc-datepicker-input-width);
|
|
92
|
-
background: var(--sdc-datepicker-input-background);
|
|
93
|
-
border: var(--sdc-datepicker-input-border-width) solid hsl(var(--sdc-datepicker-input-border-color));
|
|
94
|
-
border-radius: var(--sdc-datepicker-input-border-radius);
|
|
95
|
-
padding: var(--sdc-datepicker-input-padding-vertical) var(--sdc-datepicker-input-padding-horizontal);
|
|
96
|
-
color: hsl(var(--sdc-datepicker-input-text-color));
|
|
97
|
-
font-size: var(--sdc-datepicker-input-text-size);
|
|
98
|
-
font-weight: var(--sdc-datepicker-input-text-weight);
|
|
99
|
-
cursor: pointer;
|
|
100
|
-
outline: none;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.sdc-datepicker-placeholder {
|
|
104
|
-
color: hsl(var(--sdc-datepicker-placeholder-color));
|
|
105
|
-
font-size: var(--sdc-datepicker-placeholder-size);
|
|
106
|
-
font-weight: var(--sdc-datepicker-placeholder-weight);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
/* Focus and hover state */
|
|
110
|
-
.sdc-datepicker button[brnpopovertrigger]:hover:not(:disabled) {
|
|
111
|
-
border-color: hsl(var(--sdc-datepicker-input-border-hover));
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.sdc-datepicker button[brnpopovertrigger][data-state='open'] {
|
|
115
|
-
outline: var(--sdc-datepicker-input-focus-ring-width) solid hsl(var(--sdc-datepicker-input-focus-ring-color));
|
|
116
|
-
outline-offset: var(--sdc-datepicker-input-focus-ring-offset);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/* Disabled state */
|
|
120
|
-
.sdc-datepicker button[brnpopovertrigger]:disabled {
|
|
121
|
-
opacity: 0.6;
|
|
122
|
-
cursor: not-allowed;
|
|
123
|
-
background: hsl(var(--color-neutral-100));
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
/* Error state */
|
|
127
|
-
.sdc-datepicker-error {
|
|
128
|
-
color: hsl(var(--sdc-datepicker-error-color));
|
|
129
|
-
font-size: var(--sdc-datepicker-error-size);
|
|
130
|
-
line-height: 1rem;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
/* Hint message styles */
|
|
134
|
-
.sdc-datepicker-hint {
|
|
135
|
-
color: hsl(var(--sdc-datepicker-hint-color));
|
|
136
|
-
font-size: var(--sdc-datepicker-hint-size);
|
|
137
|
-
line-height: 1rem;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
/* Calendar styles */
|
|
141
|
-
.sdc-datepicker div[brncalendar] {
|
|
142
|
-
background: hsl(var(--sdc-datepicker-calendar-background));
|
|
143
|
-
border: var(--sdc-datepicker-calendar-border-width) solid hsl(var(--sdc-datepicker-calendar-border-color));
|
|
144
|
-
border-radius: var(--sdc-datepicker-calendar-border-radius);
|
|
145
|
-
box-shadow: var(--sdc-datepicker-calendar-shadow);
|
|
146
|
-
padding: var(--sdc-datepicker-calendar-padding);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
/* Month/Year selector styles */
|
|
150
|
-
.sdc-datepicker div[brncalendarheader] {
|
|
151
|
-
color: hsl(var(--sdc-datepicker-month-year-text-color));
|
|
152
|
-
font-size: var(--sdc-datepicker-month-year-text-size);
|
|
153
|
-
font-weight: var(--sdc-datepicker-month-year-text-weight);
|
|
154
|
-
padding: var(--sdc-datepicker-month-year-padding);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.sdc-datepicker button[brncalendarpreviousbutton],
|
|
158
|
-
.sdc-datepicker button[brncalendarnextbutton] {
|
|
159
|
-
cursor: pointer;
|
|
160
|
-
color: hsl(var(--sdc-datepicker-month-year-text-color));
|
|
161
|
-
background: hsl(var(--sdc-datepicker-month-year-button-background));
|
|
162
|
-
transition: all 0.2s ease;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.sdc-datepicker button[brncalendarpreviousbutton]:disabled,
|
|
166
|
-
.sdc-datepicker button[brncalendarnextbutton]:disabled {
|
|
167
|
-
opacity: 0.6;
|
|
168
|
-
cursor: not-allowed;
|
|
169
|
-
color: hsl(var(--color-neutral-100));
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.sdc-datepicker button[brncalendarpreviousbutton]:hover:not(:disabled),
|
|
173
|
-
.sdc-datepicker button[brncalendarnextbutton]:hover:not(:disabled) {
|
|
174
|
-
color: hsl(var(--sdc-datepicker-month-year-button-text-color-hover));
|
|
175
|
-
background: hsl(var(--sdc-datepicker-month-year-button-background-hover));
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
/* Day button styles */
|
|
179
|
-
.sdc-datepicker button[brncalendarcellbutton] {
|
|
180
|
-
background: hsl(var(--sdc-datepicker-day-button-background));
|
|
181
|
-
color: hsl(var(--sdc-datepicker-day-button-text-color));
|
|
182
|
-
font-size: var(--sdc-datepicker-day-button-text-size);
|
|
183
|
-
font-weight: var(--sdc-datepicker-day-button-text-weight);
|
|
184
|
-
border-radius: var(--sdc-datepicker-day-button-border-radius);
|
|
185
|
-
padding: var(--sdc-datepicker-day-button-padding);
|
|
186
|
-
transition: all 0.2s ease;
|
|
187
|
-
cursor: pointer;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
.sdc-datepicker button[brncalendarcellbutton]:hover:not(:disabled) {
|
|
191
|
-
background-color: hsl(var(--sdc-datepicker-day-button-hover-background));
|
|
192
|
-
color: hsl(var(--sdc-datepicker-day-button-hover-text-color));
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
/* .sdc-datepicker button[brncalendarcellbutton][data-selected] {
|
|
196
|
-
background-color: hsl(var(--sdc-datepicker-day-button-selected-background));
|
|
197
|
-
color: hsl(var(--sdc-datepicker-day-button-selected-text-color));
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
.sdc-datepicker button[brncalendarcellbutton][data-today] {
|
|
201
|
-
background-color: hsl(var(--sdc-datepicker-day-button-today-background));
|
|
202
|
-
color: hsl(var(--sdc-datepicker-day-button-today-text-color));
|
|
203
|
-
border: var(--sdc-datepicker-day-button-today-border-width) solid
|
|
204
|
-
hsl(var(--sdc-datepicker-day-button-today-border-color));
|
|
205
|
-
} */
|
|
206
|
-
|
|
207
|
-
.sdc-datepicker button[brncalendarcellbutton]:disabled {
|
|
208
|
-
background-color: hsl(var(--sdc-datepicker-day-button-disabled-background));
|
|
209
|
-
color: hsl(var(--sdc-datepicker-day-button-disabled-text-color));
|
|
210
|
-
cursor: not-allowed;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
/* Variant styles */
|
|
214
|
-
.variant-primary.sdc-datepicker {
|
|
215
|
-
--sdc-datepicker-day-button-hover-background: var(--color-primary);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.variant-secondary.sdc-datepicker {
|
|
219
|
-
--sdc-datepicker-day-button-hover-background: var(--color-secondary);
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
.variant-alternative.sdc-datepicker {
|
|
223
|
-
--sdc-datepicker-day-button-hover-background: var(--color-alternative);
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
.variant-success.sdc-datepicker {
|
|
227
|
-
--sdc-datepicker-day-button-hover-background: var(--color-success);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.variant-warning.sdc-datepicker {
|
|
231
|
-
--sdc-datepicker-day-button-hover-background: var(--color-warning);
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
.variant-danger.sdc-datepicker {
|
|
235
|
-
--sdc-datepicker-day-button-hover-background: var(--color-danger);
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
/* Radius variations */
|
|
239
|
-
.radius-default.sdc-datepicker {
|
|
240
|
-
--sdc-datepicker-input-border-radius: var(--radius-default);
|
|
241
|
-
--sdc-datepicker-day-button-border-radius: var(--radius-default);
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
.radius-sm.sdc-datepicker {
|
|
245
|
-
--sdc-datepicker-input-border-radius: var(--radius-sm);
|
|
246
|
-
--sdc-datepicker-day-button-border-radius: var(--radius-sm);
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.radius-md.sdc-datepicker {
|
|
250
|
-
--sdc-datepicker-input-border-radius: var(--radius-md);
|
|
251
|
-
--sdc-datepicker-day-button-border-radius: var(--radius-md);
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
.radius-lg.sdc-datepicker {
|
|
255
|
-
--sdc-datepicker-input-border-radius: var(--radius-lg);
|
|
256
|
-
--sdc-datepicker-day-button-border-radius: var(--radius-lg);
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
.radius-xl.sdc-datepicker {
|
|
260
|
-
--sdc-datepicker-input-border-radius: var(--radius-xl);
|
|
261
|
-
--sdc-datepicker-day-button-border-radius: var(--radius-xl);
|
|
262
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
<div [class]="computedClass()">
|
|
2
|
-
<div class="component-container">
|
|
3
|
-
<!-- Label positioned above or to the left -->
|
|
4
|
-
@if (showLabel()) {
|
|
5
|
-
<label [class]="labelClass()" [for]="name()">
|
|
6
|
-
{{ label() }}
|
|
7
|
-
</label>
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
<!-- The styleClass is applied to the date picker's dialog -->
|
|
11
|
-
<hlm-date-picker
|
|
12
|
-
[styleClass]="computedClass()"
|
|
13
|
-
[id]="name()"
|
|
14
|
-
[min]="minDate()!"
|
|
15
|
-
[max]="maxDate()!"
|
|
16
|
-
[date]="safeDate()"
|
|
17
|
-
[formatDate]="formatDate()"
|
|
18
|
-
[autoCloseOnSelect]="autoCloseOnSelect()"
|
|
19
|
-
[disabled]="disabled()"
|
|
20
|
-
(changed)="handleDateChange($event)">
|
|
21
|
-
@if (placeholder()) {
|
|
22
|
-
<span class="sdc-datepicker-placeholder">{{ placeholder() }}</span>
|
|
23
|
-
}
|
|
24
|
-
</hlm-date-picker>
|
|
25
|
-
</div>
|
|
26
|
-
|
|
27
|
-
<!-- Error message -->
|
|
28
|
-
@if (showError()) {
|
|
29
|
-
<div class="sdc-datepicker-error">
|
|
30
|
-
{{ currentErrorMessage() }}
|
|
31
|
-
</div>
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
<!-- Hint message -->
|
|
35
|
-
@if (hint() && hint().trim().length > 0 && !showError()) {
|
|
36
|
-
<div class="sdc-datepicker-hint">
|
|
37
|
-
{{ hint() }}
|
|
38
|
-
</div>
|
|
39
|
-
}
|
|
40
|
-
</div>
|
|
@@ -1,366 +0,0 @@
|
|
|
1
|
-
import { ThemeClass } from '@3ddv/software-division-components/shared';
|
|
2
|
-
import { Component, computed, input, OnDestroy, OnInit, output, signal } from '@angular/core';
|
|
3
|
-
import {
|
|
4
|
-
AbstractControl,
|
|
5
|
-
FormControl,
|
|
6
|
-
FormSubmittedEvent,
|
|
7
|
-
PristineChangeEvent,
|
|
8
|
-
ReactiveFormsModule,
|
|
9
|
-
TouchedChangeEvent,
|
|
10
|
-
ValidationErrors,
|
|
11
|
-
} from '@angular/forms';
|
|
12
|
-
import { BrnNativeDateAdapter, provideDateAdapter } from '@spartan-ng/brain/date-time';
|
|
13
|
-
import { Subscription } from 'rxjs';
|
|
14
|
-
import { HlmDatePicker } from './ui/ui-date-picker-helm/src';
|
|
15
|
-
|
|
16
|
-
export type DatePickerStyleClasses = ReturnType<(typeof DatePickerComponent.prototype)['styleClass']>;
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* A customizable datepicker component built on Spartan UI datepicker component.
|
|
20
|
-
*
|
|
21
|
-
* This component supports various configurations and exposes all native datepicker functionality.
|
|
22
|
-
* All HTML datepicker attributes and events are automatically forwarded to the inner datepicker element.
|
|
23
|
-
*
|
|
24
|
-
* @since 1.0.0-alpha.1
|
|
25
|
-
*/
|
|
26
|
-
@Component({
|
|
27
|
-
standalone: true,
|
|
28
|
-
selector: 'sdc-datepicker',
|
|
29
|
-
styleUrls: ['./datepicker.component.css'],
|
|
30
|
-
templateUrl: './datepicker.component.html',
|
|
31
|
-
imports: [ReactiveFormsModule, HlmDatePicker],
|
|
32
|
-
providers: [provideDateAdapter(BrnNativeDateAdapter)],
|
|
33
|
-
})
|
|
34
|
-
export class DatePickerComponent implements OnInit, OnDestroy {
|
|
35
|
-
private readonly allowedVariants = [
|
|
36
|
-
'variant-primary',
|
|
37
|
-
'variant-secondary',
|
|
38
|
-
'variant-alternative',
|
|
39
|
-
'variant-success',
|
|
40
|
-
'variant-warning',
|
|
41
|
-
'variant-danger',
|
|
42
|
-
] as const;
|
|
43
|
-
private readonly allowedRadius = ['radius-default', 'radius-sm', 'radius-md', 'radius-lg', 'radius-xl'] as const;
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* The current theme applied to the component.
|
|
47
|
-
*/
|
|
48
|
-
public readonly theme = input<ThemeClass>('theme-sdc');
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* Predefined styles to apply to the component.
|
|
52
|
-
* Can be a single class or multiple classes from different categories.
|
|
53
|
-
*/
|
|
54
|
-
public readonly styleClass = input<((typeof this.allowedVariants)[number] | (typeof this.allowedRadius)[number])[]>(
|
|
55
|
-
[]
|
|
56
|
-
);
|
|
57
|
-
|
|
58
|
-
// Computed signal that validates and filters the styleClass datepicker
|
|
59
|
-
private readonly _validatedStyleClass = computed(() => {
|
|
60
|
-
const value = this.styleClass();
|
|
61
|
-
|
|
62
|
-
if (!Array.isArray(value)) {
|
|
63
|
-
return [];
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
const validValues = value.filter(style => {
|
|
67
|
-
return (
|
|
68
|
-
(this.allowedVariants as readonly string[]).includes(style) ||
|
|
69
|
-
(this.allowedRadius as readonly string[]).includes(style)
|
|
70
|
-
);
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
const invalidValues = value.filter(style => {
|
|
74
|
-
return (
|
|
75
|
-
!(this.allowedVariants as readonly string[]).includes(style) &&
|
|
76
|
-
!(this.allowedRadius as readonly string[]).includes(style)
|
|
77
|
-
);
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
if (invalidValues.length > 0) {
|
|
81
|
-
throw new Error(
|
|
82
|
-
`DatePickerComponent: Invalid styleClass values ignored: ${invalidValues.join(', ')}. Allowed values: ${[
|
|
83
|
-
...this.allowedVariants,
|
|
84
|
-
...this.allowedRadius,
|
|
85
|
-
].join(', ')}`
|
|
86
|
-
);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
return validValues;
|
|
90
|
-
});
|
|
91
|
-
|
|
92
|
-
/**
|
|
93
|
-
* Additional CSS classes to apply to the component.
|
|
94
|
-
*/
|
|
95
|
-
public readonly className = input<string>('');
|
|
96
|
-
|
|
97
|
-
/**
|
|
98
|
-
* The label text to be displayed.
|
|
99
|
-
* Only visible when a value is provided.
|
|
100
|
-
*/
|
|
101
|
-
public readonly label = input<string>('');
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* The position of the label relative to the datepicker.
|
|
105
|
-
* 'top' places the label above the datepicker, 'left' places it to the left.
|
|
106
|
-
*/
|
|
107
|
-
public readonly labelPosition = input<'top' | 'left'>('top');
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* The placeholder text for the datepicker.
|
|
111
|
-
*/
|
|
112
|
-
public readonly placeholder = input<string>('');
|
|
113
|
-
|
|
114
|
-
/**
|
|
115
|
-
* Whether the component is disabled.
|
|
116
|
-
*/
|
|
117
|
-
public readonly disabled = input<boolean>(false);
|
|
118
|
-
|
|
119
|
-
/**
|
|
120
|
-
* The hint text for the datepicker.
|
|
121
|
-
*/
|
|
122
|
-
public readonly hint = input<string>('');
|
|
123
|
-
|
|
124
|
-
/**
|
|
125
|
-
* The name of the form control.
|
|
126
|
-
*/
|
|
127
|
-
public readonly name = input<string>('');
|
|
128
|
-
|
|
129
|
-
/**
|
|
130
|
-
* The maximum date for the datepicker.
|
|
131
|
-
*/
|
|
132
|
-
public readonly maxDate = input<Date | null>(null);
|
|
133
|
-
|
|
134
|
-
/**
|
|
135
|
-
* The minimum date for the datepicker.
|
|
136
|
-
*/
|
|
137
|
-
public readonly minDate = input<Date | null>(null);
|
|
138
|
-
|
|
139
|
-
/**
|
|
140
|
-
* Whether the datepicker should close when a date is selected.
|
|
141
|
-
*/
|
|
142
|
-
public readonly autoCloseOnSelect = input<boolean>(false);
|
|
143
|
-
|
|
144
|
-
/**
|
|
145
|
-
* Custom error message to override the validator's error message.
|
|
146
|
-
*/
|
|
147
|
-
public readonly errorMessage = input<string>('');
|
|
148
|
-
|
|
149
|
-
/**
|
|
150
|
-
* Controls when errors are displayed.
|
|
151
|
-
* - 'after-submit': Show errors only after form submission (default)
|
|
152
|
-
* - 'always': Show errors immediately when validation fails
|
|
153
|
-
*/
|
|
154
|
-
public readonly errorDisplayMode = input<'always' | 'after-submit'>('after-submit');
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* The FormControl instance to bind to this datepicker.
|
|
158
|
-
* This allows the component to access form state without circular dependencies.
|
|
159
|
-
*/
|
|
160
|
-
public readonly control = input<AbstractControl<null | undefined> | FormControl | null>(null);
|
|
161
|
-
|
|
162
|
-
/**
|
|
163
|
-
* Callback function to format the date display.
|
|
164
|
-
* Receives a Date object and returns a formatted string.
|
|
165
|
-
*/
|
|
166
|
-
public readonly formatDate = input<(date: Date) => string>(this.defaultFormatDate);
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* Component subscriptions.
|
|
170
|
-
*/
|
|
171
|
-
private subscriptions: (Subscription | undefined)[] = [];
|
|
172
|
-
|
|
173
|
-
/**
|
|
174
|
-
* The current selected date value.
|
|
175
|
-
*/
|
|
176
|
-
public readonly date = signal<Date | undefined>(undefined);
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* Computed signal that ensures the date is always either a valid Date object or undefined.
|
|
180
|
-
* This prevents null values from being passed to the Spartan calendar component.
|
|
181
|
-
*/
|
|
182
|
-
protected readonly safeDate = computed(() => {
|
|
183
|
-
if (this.date() instanceof Date || this.date() === undefined) {
|
|
184
|
-
return this.date();
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
throw new Error('DatePickerComponent: date must be a valid Date object or undefined');
|
|
188
|
-
});
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
* The state of the form control.
|
|
192
|
-
*/
|
|
193
|
-
public readonly controlState = signal<{
|
|
194
|
-
invalid: boolean;
|
|
195
|
-
touched: boolean;
|
|
196
|
-
dirty: boolean;
|
|
197
|
-
errors: ValidationErrors | null | undefined;
|
|
198
|
-
value: Date | undefined;
|
|
199
|
-
isFormSubmitted: boolean;
|
|
200
|
-
}>({ invalid: false, touched: false, dirty: false, errors: null, value: undefined, isFormSubmitted: false });
|
|
201
|
-
|
|
202
|
-
/**
|
|
203
|
-
* Event emitted when the date value changes.
|
|
204
|
-
*/
|
|
205
|
-
public readonly dateChange = output<Date | null>();
|
|
206
|
-
|
|
207
|
-
/**
|
|
208
|
-
* Computed class string that combines theme and user classes.
|
|
209
|
-
*/
|
|
210
|
-
protected readonly computedClass = computed(() => {
|
|
211
|
-
const themeClass = this.theme();
|
|
212
|
-
const styleClass = this._validatedStyleClass();
|
|
213
|
-
const className = this.className();
|
|
214
|
-
const errorClass = this.showError() ? 'has-error' : '';
|
|
215
|
-
|
|
216
|
-
return ['sdc-datepicker', themeClass, ...styleClass, className, errorClass].filter(Boolean).join(' ');
|
|
217
|
-
});
|
|
218
|
-
|
|
219
|
-
/**
|
|
220
|
-
* Computed class string for the label positioning.
|
|
221
|
-
*/
|
|
222
|
-
protected readonly labelClass = computed(() => {
|
|
223
|
-
const position = this.labelPosition();
|
|
224
|
-
return position === 'left' ? 'sdc-datepicker-label left' : 'sdc-datepicker-label top';
|
|
225
|
-
});
|
|
226
|
-
|
|
227
|
-
/**
|
|
228
|
-
* Computed signal to determine if the label should be visible.
|
|
229
|
-
*/
|
|
230
|
-
protected readonly showLabel = computed(() => {
|
|
231
|
-
return this.label() && this.label().trim().length > 0;
|
|
232
|
-
});
|
|
233
|
-
|
|
234
|
-
/**
|
|
235
|
-
* Computed signal to get the current error message.
|
|
236
|
-
*/
|
|
237
|
-
protected readonly currentErrorMessage = computed(() => {
|
|
238
|
-
const customMessage = this.errorMessage();
|
|
239
|
-
const hasErrors = Object.keys(this.controlState()?.errors ?? {}).length > 0;
|
|
240
|
-
|
|
241
|
-
if (hasErrors && customMessage && customMessage.trim().length > 0) {
|
|
242
|
-
return customMessage;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
// If no custom message, try to get validation error from the form control state
|
|
246
|
-
if (hasErrors) {
|
|
247
|
-
const firstErrorKey = Object.keys(this.controlState()?.errors ?? {})[0];
|
|
248
|
-
const firstErrorValue = this.controlState()?.errors?.[firstErrorKey];
|
|
249
|
-
return this.getValidatorErrorMessage(firstErrorKey, firstErrorValue);
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
return '';
|
|
253
|
-
});
|
|
254
|
-
|
|
255
|
-
/**
|
|
256
|
-
* Computed signal to determine if there's an error to display.
|
|
257
|
-
*/
|
|
258
|
-
protected readonly showError = computed(() => {
|
|
259
|
-
const errorMode = this.errorDisplayMode();
|
|
260
|
-
|
|
261
|
-
// For validation errors, respect the error display mode
|
|
262
|
-
if (this.controlState()?.invalid) {
|
|
263
|
-
if (errorMode === 'always') {
|
|
264
|
-
// Show errors when component is touched and invalid
|
|
265
|
-
return this.controlState()?.touched || this.controlState()?.dirty || this.controlState()?.isFormSubmitted;
|
|
266
|
-
} else if (errorMode === 'after-submit') {
|
|
267
|
-
// Show errors when form is submitted, regardless of touch/focus state
|
|
268
|
-
return this.controlState()?.isFormSubmitted;
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
return false;
|
|
273
|
-
});
|
|
274
|
-
|
|
275
|
-
ngOnInit(): void {
|
|
276
|
-
// Validate the name datepicker
|
|
277
|
-
if ((this.control() || this.showLabel()) && !this.name()) {
|
|
278
|
-
throw new Error('DatePickerComponent: name is required when control or label inputs are present');
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
// Initialize the date value from the form control if it exists
|
|
282
|
-
if (this.control()) {
|
|
283
|
-
const initialValue = this.control()?.value;
|
|
284
|
-
// Ensure we start with undefined, if no value is provided
|
|
285
|
-
this.date.set(initialValue instanceof Date ? initialValue : undefined);
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
const formEventsSubscription = this.control()?.parent?.events.subscribe(event => {
|
|
289
|
-
// We do not reset this signal because it is used to show the errors
|
|
290
|
-
// When a form is submitted at least once, we want to show the errors
|
|
291
|
-
if (event instanceof FormSubmittedEvent) {
|
|
292
|
-
this.controlState.set({ ...this.controlState(), isFormSubmitted: true });
|
|
293
|
-
|
|
294
|
-
// We add this because the statusChanges event is not triggered when the form is submitted
|
|
295
|
-
if (event.source.status === 'INVALID') {
|
|
296
|
-
this.controlState.set({ ...this.controlState(), invalid: true });
|
|
297
|
-
}
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
if (event instanceof TouchedChangeEvent) {
|
|
301
|
-
this.controlState.set({ ...this.controlState(), touched: event.touched });
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
if (event instanceof PristineChangeEvent) {
|
|
305
|
-
this.controlState.set({ ...this.controlState(), dirty: !event.pristine });
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
this.controlState.set({ ...this.controlState(), errors: this.control()?.errors });
|
|
309
|
-
});
|
|
310
|
-
|
|
311
|
-
const statusChangesSubscription = this.control()?.statusChanges.subscribe(status => {
|
|
312
|
-
if (status === 'INVALID') {
|
|
313
|
-
this.controlState.set({ ...this.controlState(), invalid: true });
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
this.controlState.set({ ...this.controlState(), errors: this.control()?.errors });
|
|
317
|
-
});
|
|
318
|
-
|
|
319
|
-
this.subscriptions.push(formEventsSubscription, statusChangesSubscription);
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
ngOnDestroy(): void {
|
|
323
|
-
this.subscriptions.forEach(subscription => subscription?.unsubscribe());
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
private defaultFormatDate(date: Date): string {
|
|
327
|
-
return date.toLocaleDateString('en-GB', {
|
|
328
|
-
day: '2-digit',
|
|
329
|
-
month: '2-digit',
|
|
330
|
-
year: 'numeric',
|
|
331
|
-
});
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
/**
|
|
335
|
-
* Handles date change events from the Spartan date picker.
|
|
336
|
-
*/
|
|
337
|
-
protected handleDateChange(date: Date | null): void {
|
|
338
|
-
// Convert null to undefined for the signal to prevent null values
|
|
339
|
-
const dateValue = date instanceof Date ? date : undefined;
|
|
340
|
-
this.date.set(dateValue);
|
|
341
|
-
this.dateChange.emit(date);
|
|
342
|
-
|
|
343
|
-
// Update the form control value if it exists
|
|
344
|
-
const control = this.control();
|
|
345
|
-
if (control) {
|
|
346
|
-
control.setValue(date);
|
|
347
|
-
control.markAsDirty();
|
|
348
|
-
control.markAsTouched();
|
|
349
|
-
this.controlState.set({ ...this.controlState(), value: dateValue });
|
|
350
|
-
}
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
/**
|
|
354
|
-
* Gets the error message for a specific validator error.
|
|
355
|
-
*/
|
|
356
|
-
private getValidatorErrorMessage(errorKey: string, errorValue: any): string {
|
|
357
|
-
switch (errorKey) {
|
|
358
|
-
case 'required':
|
|
359
|
-
return 'This field is required.';
|
|
360
|
-
case 'pattern':
|
|
361
|
-
return 'Please enter a valid value.';
|
|
362
|
-
default:
|
|
363
|
-
return 'Please enter a valid value.';
|
|
364
|
-
}
|
|
365
|
-
}
|
|
366
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './public-api';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{ "lib": { "entryFile": "public-api.ts" } }
|