@ukic/canary-web-components 2.0.0-canary.10 → 2.0.0-canary.12
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/{helpers-7a069459.js → helpers-b525d45a.js} +2 -7
- package/dist/cjs/helpers-b525d45a.js.map +1 -0
- package/dist/cjs/{helpers-f75cf7cf.js → helpers-c4444a7e.js} +48 -94
- package/dist/cjs/helpers-c4444a7e.js.map +1 -0
- package/dist/cjs/ic-accordion.cjs.entry.js +1 -1
- package/dist/cjs/ic-alert.cjs.entry.js +1 -1
- package/dist/cjs/ic-back-to-top.cjs.entry.js +1 -1
- package/dist/cjs/ic-badge.cjs.entry.js +1 -1
- package/dist/cjs/ic-breadcrumb-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/ic-button_3.cjs.entry.js +2 -8
- package/dist/cjs/ic-button_3.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-card.cjs.entry.js +1 -1
- package/dist/cjs/ic-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/ic-chip.cjs.entry.js +1 -1
- package/dist/cjs/ic-data-row.cjs.entry.js +1 -1
- package/dist/cjs/ic-data-table-title-bar.cjs.entry.js +57 -0
- package/dist/cjs/ic-data-table-title-bar.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-data-table.cjs.entry.js +308 -43
- package/dist/cjs/ic-data-table.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-dialog.cjs.entry.js +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +1 -1
- package/dist/cjs/{ic-pagination-bar.cjs.entry.js → ic-empty-state_2.cjs.entry.js} +34 -4
- package/dist/cjs/ic-empty-state_2.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-footer-link-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-footer-link.cjs.entry.js +1 -1
- package/dist/cjs/ic-footer.cjs.entry.js +1 -1
- package/dist/cjs/ic-hero.cjs.entry.js +1 -1
- package/dist/cjs/ic-horizontal-scroll.cjs.entry.js +1 -1
- package/dist/cjs/{ic-menu.cjs.entry.js → ic-input-component-container_3.cjs.entry.js} +69 -5
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-input-label_2.cjs.entry.js +86 -0
- package/dist/cjs/ic-input-label_2.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-link.cjs.entry.js +1 -1
- package/dist/cjs/ic-menu-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/ic-menu-with-multi.cjs.entry.js +1 -1
- package/dist/cjs/ic-menu-with-multi.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-button.cjs.entry.js +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +13 -16
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +32 -28
- package/dist/cjs/ic-navigation-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-menu.cjs.entry.js +1 -1
- package/dist/cjs/ic-page-header.cjs.entry.js +1 -1
- package/dist/cjs/ic-pagination_4.cjs.entry.js +5 -5
- package/dist/cjs/ic-pagination_4.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-popover-menu.cjs.entry.js +1 -1
- package/dist/cjs/ic-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-radio-option.cjs.entry.js +1 -1
- package/dist/cjs/ic-search-bar.cjs.entry.js +1 -1
- package/dist/cjs/ic-select-with-multi.cjs.entry.js +19 -6
- package/dist/cjs/ic-select-with-multi.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-side-navigation.cjs.entry.js +1 -1
- package/dist/cjs/ic-status-tag.cjs.entry.js +1 -1
- package/dist/cjs/ic-step.cjs.entry.js +1 -1
- package/dist/cjs/ic-stepper.cjs.entry.js +1 -1
- package/dist/cjs/ic-switch.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/ic-tab.cjs.entry.js +1 -1
- package/dist/cjs/ic-theme.cjs.entry.js +1 -1
- package/dist/cjs/ic-toast.cjs.entry.js +1 -1
- package/dist/cjs/ic-toggle-button.cjs.entry.js +1 -1
- package/dist/cjs/ic-top-navigation.cjs.entry.js +60 -46
- package/dist/cjs/ic-top-navigation.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js +35 -11
- package/dist/cjs/ic-typography.cjs.entry.js.map +1 -1
- package/dist/cjs/index-4cf27b16.js +10 -18
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -2
- package/dist/collection/components/ic-data-table/ic-data-table.css +82 -7
- package/dist/collection/components/ic-data-table/ic-data-table.js +535 -44
- package/dist/collection/components/ic-data-table/ic-data-table.js.map +1 -1
- package/dist/collection/components/ic-data-table/ic-data-table.types.js.map +1 -1
- package/dist/collection/components/ic-data-table/story-data.js +386 -11
- package/dist/collection/components/ic-data-table/story-data.js.map +1 -1
- package/dist/collection/components/ic-data-table/test/basic/ic-data-table.e2e.js +217 -0
- package/dist/collection/components/ic-data-table/test/basic/ic-data-table.e2e.js.map +1 -0
- package/dist/collection/components/ic-data-table/test/basic/ic-data-table.spec.js +319 -0
- package/dist/collection/components/ic-data-table/test/basic/ic-data-table.spec.js.map +1 -1
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.css +87 -0
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js +160 -0
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js.map +1 -0
- package/dist/collection/components/{ic-date-picker/test/a11y/ic-date-picker.test.a11y.js → ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js} +3 -5
- package/dist/collection/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js.map +1 -0
- package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js +70 -0
- package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js.map +1 -0
- package/dist/collection/components/ic-menu-with-multi/ic-menu.js +2 -2
- package/dist/collection/components/ic-menu-with-multi/ic-menu.js.map +1 -1
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js +1 -1
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.js.map +1 -1
- package/dist/collection/components/ic-select-with-multi/ic-select.js +2 -2
- package/dist/collection/components/ic-select-with-multi/ic-select.js.map +1 -1
- package/dist/collection/utils/constants.js +0 -55
- package/dist/collection/utils/constants.js.map +1 -1
- package/dist/collection/utils/helpers.js +43 -259
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/types.js +0 -45
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/helpers.js +2 -7
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/helpers2.js +45 -91
- package/dist/components/helpers2.js.map +1 -1
- package/dist/components/ic-button2.js +3 -11
- package/dist/components/ic-button2.js.map +1 -1
- package/dist/components/ic-card.js +1 -1
- package/dist/components/ic-checkbox-group.js +1 -1
- package/dist/components/ic-checkbox.js +1 -1
- package/dist/components/ic-chip.js +1 -1
- package/dist/components/{ic-date-input.d.ts → ic-data-table-title-bar.d.ts} +4 -4
- package/dist/components/ic-data-table-title-bar.js +136 -0
- package/dist/components/ic-data-table-title-bar.js.map +1 -0
- package/dist/components/ic-data-table.js +334 -49
- package/dist/components/ic-data-table.js.map +1 -1
- package/dist/components/ic-empty-state.js +1 -57
- package/dist/components/ic-empty-state.js.map +1 -1
- package/dist/{esm/ic-empty-state.entry.js → components/ic-empty-state2.js} +38 -11
- package/dist/components/ic-empty-state2.js.map +1 -0
- package/dist/components/ic-input-component-container2.js +1 -1
- package/dist/components/ic-input-component-container2.js.map +1 -1
- package/dist/components/ic-link2.js +1 -1
- package/dist/components/ic-menu-item2.js +1 -1
- package/dist/components/ic-menu2.js +2 -2
- package/dist/components/ic-menu2.js.map +1 -1
- package/dist/components/ic-menu3.js +1 -1
- package/dist/components/ic-menu3.js.map +1 -1
- package/dist/components/ic-navigation-button.js +1 -1
- package/dist/components/ic-navigation-group.js +12 -15
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/components/ic-navigation-item.js +32 -28
- package/dist/components/ic-navigation-item.js.map +1 -1
- package/dist/components/ic-pagination-bar2.js +1 -1
- package/dist/components/ic-pagination-bar2.js.map +1 -1
- package/dist/components/ic-pagination-item2.js +1 -1
- package/dist/components/ic-pagination2.js +5 -5
- package/dist/components/ic-pagination2.js.map +1 -1
- package/dist/components/ic-radio-group.js +1 -1
- package/dist/components/ic-radio-option.js +1 -1
- package/dist/components/ic-search-bar.js +1 -1
- package/dist/components/ic-select-with-multi.js +14 -1
- package/dist/components/ic-select-with-multi.js.map +1 -1
- package/dist/components/ic-select2.js +1 -1
- package/dist/components/ic-switch.js +1 -1
- package/dist/components/ic-tab.js +1 -1
- package/dist/components/ic-text-field2.js +1 -1
- package/dist/components/ic-toggle-button.js +1 -1
- package/dist/components/ic-top-navigation.js +61 -47
- package/dist/components/ic-top-navigation.js.map +1 -1
- package/dist/components/ic-typography2.js +38 -12
- package/dist/components/ic-typography2.js.map +1 -1
- package/dist/core/core.css +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/{p-8ea47d42.entry.js → p-045359e1.entry.js} +2 -2
- package/dist/core/{p-3745da83.entry.js → p-10fb4c46.entry.js} +2 -2
- package/dist/core/p-169bfa51.entry.js +2 -0
- package/dist/core/p-169bfa51.entry.js.map +1 -0
- package/dist/core/{p-2e2e0099.entry.js → p-1ca332ca.entry.js} +2 -2
- package/dist/core/p-1e91f540.entry.js +2 -0
- package/dist/core/p-1e91f540.entry.js.map +1 -0
- package/dist/core/{p-d4fdd8c1.entry.js → p-204ace96.entry.js} +2 -2
- package/dist/core/{p-5fe96107.entry.js → p-2eac7dcc.entry.js} +2 -2
- package/dist/core/p-347e8dab.entry.js +2 -0
- package/dist/core/p-347e8dab.entry.js.map +1 -0
- package/dist/core/p-3803a5b5.entry.js +2 -0
- package/dist/core/p-3803a5b5.entry.js.map +1 -0
- package/dist/core/{p-36508aad.entry.js → p-4753bac8.entry.js} +2 -2
- package/dist/core/{p-4f1ffa39.entry.js → p-4baa0916.entry.js} +2 -2
- package/dist/core/{p-776671cf.entry.js → p-4f413fc0.entry.js} +2 -2
- package/dist/core/p-5171169f.entry.js +2 -0
- package/dist/core/p-5171169f.entry.js.map +1 -0
- package/dist/core/{p-9d540656.entry.js → p-595be57d.entry.js} +2 -2
- package/dist/core/{p-7cecf5d5.entry.js → p-5ae93c16.entry.js} +2 -2
- package/dist/core/{p-1ce75941.entry.js → p-5e0c830b.entry.js} +2 -2
- package/dist/core/p-5ee4319c.entry.js +2 -0
- package/dist/core/p-5ee4319c.entry.js.map +1 -0
- package/dist/core/p-5f4e96ec.entry.js +2 -0
- package/dist/core/p-5f4e96ec.entry.js.map +1 -0
- package/dist/core/{p-e74f1d09.entry.js → p-624d4f5f.entry.js} +2 -2
- package/dist/core/{p-9d01a7ad.entry.js → p-6933f8e9.entry.js} +2 -2
- package/dist/core/{p-5e2e6c3b.entry.js → p-6c3044b6.entry.js} +2 -2
- package/dist/core/p-7267fe19.entry.js +2 -0
- package/dist/core/p-7267fe19.entry.js.map +1 -0
- package/dist/core/{p-6690bc04.entry.js → p-75dac3d1.entry.js} +2 -2
- package/dist/core/{p-85609bdd.entry.js → p-7ef8d616.entry.js} +2 -2
- package/dist/core/{p-a0f9b259.entry.js → p-81ddc39d.entry.js} +2 -2
- package/dist/core/{p-a6447b13.entry.js → p-869954a2.entry.js} +2 -2
- package/dist/core/{p-47ac6838.entry.js → p-88d54b72.entry.js} +2 -2
- package/dist/core/{p-06ae5bec.entry.js → p-8b08d8fe.entry.js} +2 -2
- package/dist/core/{p-ca8cbd6a.entry.js → p-917c5721.entry.js} +2 -2
- package/dist/core/p-942282cd.entry.js +2 -0
- package/dist/core/p-942282cd.entry.js.map +1 -0
- package/dist/core/p-96b3e7e2.js +2 -0
- package/dist/core/p-96b3e7e2.js.map +1 -0
- package/dist/core/p-9caf19eb.js +2 -0
- package/dist/core/p-9caf19eb.js.map +1 -0
- package/dist/core/{p-76d26018.entry.js → p-a0f8efb2.entry.js} +2 -2
- package/dist/core/{p-a42c2f37.entry.js → p-a31031a5.entry.js} +2 -2
- package/dist/core/{p-b306cbc8.entry.js → p-a434c3d4.entry.js} +2 -2
- package/dist/core/{p-86012178.entry.js → p-a43c12cd.entry.js} +2 -2
- package/dist/core/{p-8c90110a.entry.js → p-a50c3b9e.entry.js} +2 -2
- package/dist/core/p-aac4185b.entry.js +2 -0
- package/dist/core/p-aac4185b.entry.js.map +1 -0
- package/dist/core/{p-1b7d426b.entry.js → p-ab09986c.entry.js} +2 -2
- package/dist/core/{p-9e3178e8.entry.js → p-b6639e4a.entry.js} +2 -2
- package/dist/core/{p-9e3178e8.entry.js.map → p-b6639e4a.entry.js.map} +1 -1
- package/dist/core/{p-62e22508.entry.js → p-b82dcc29.entry.js} +2 -2
- package/dist/core/{p-d5c99ec3.entry.js → p-ba86928c.entry.js} +2 -2
- package/dist/core/{p-d3856ed3.entry.js → p-c34848da.entry.js} +2 -2
- package/dist/core/{p-98448bdb.entry.js → p-d8469ac0.entry.js} +2 -2
- package/dist/core/{p-1832f4b5.entry.js → p-db9c03c0.entry.js} +2 -2
- package/dist/core/{p-ae422058.entry.js → p-e3997d60.entry.js} +2 -2
- package/dist/core/{p-982a6e88.entry.js → p-e834344e.entry.js} +2 -2
- package/dist/core/p-f14454b1.entry.js +2 -0
- package/dist/core/{p-f55ad6ae.entry.js.map → p-f14454b1.entry.js.map} +1 -1
- package/dist/core/{p-c7820c23.entry.js → p-f3c840cd.entry.js} +2 -2
- package/dist/core/p-f6888309.entry.js +2 -0
- package/dist/core/p-f6888309.entry.js.map +1 -0
- package/dist/core/p-f74a8752.entry.js +2 -0
- package/dist/core/p-f74a8752.entry.js.map +1 -0
- package/dist/core/{p-5759d771.entry.js → p-f7a14c01.entry.js} +2 -2
- package/dist/core/{p-0939ce92.entry.js → p-f843da01.entry.js} +2 -2
- package/dist/core/{p-e84b0310.entry.js → p-fc5611e2.entry.js} +2 -2
- package/dist/esm/core.js +1 -1
- package/dist/esm/{helpers-7aa21b0a.js → helpers-12b4266a.js} +2 -7
- package/dist/esm/helpers-12b4266a.js.map +1 -0
- package/dist/esm/{helpers-f328a7b6.js → helpers-1f07eb61.js} +46 -92
- package/dist/esm/helpers-1f07eb61.js.map +1 -0
- package/dist/esm/ic-accordion.entry.js +1 -1
- package/dist/esm/ic-alert.entry.js +1 -1
- package/dist/esm/ic-back-to-top.entry.js +1 -1
- package/dist/esm/ic-badge.entry.js +1 -1
- package/dist/esm/ic-breadcrumb-group.entry.js +1 -1
- package/dist/esm/ic-breadcrumb.entry.js +1 -1
- package/dist/esm/ic-button_3.entry.js +2 -8
- package/dist/esm/ic-button_3.entry.js.map +1 -1
- package/dist/esm/ic-card.entry.js +1 -1
- package/dist/esm/ic-checkbox-group.entry.js +1 -1
- package/dist/esm/ic-checkbox.entry.js +1 -1
- package/dist/esm/ic-chip.entry.js +1 -1
- package/dist/esm/ic-data-row.entry.js +1 -1
- package/dist/esm/ic-data-table-title-bar.entry.js +53 -0
- package/dist/esm/ic-data-table-title-bar.entry.js.map +1 -0
- package/dist/esm/ic-data-table.entry.js +309 -44
- package/dist/esm/ic-data-table.entry.js.map +1 -1
- package/dist/esm/ic-dialog.entry.js +1 -1
- package/dist/esm/ic-divider.entry.js +1 -1
- package/dist/esm/{ic-pagination-bar.entry.js → ic-empty-state_2.entry.js} +34 -5
- package/dist/esm/ic-empty-state_2.entry.js.map +1 -0
- package/dist/esm/ic-footer-link-group.entry.js +1 -1
- package/dist/esm/ic-footer-link.entry.js +1 -1
- package/dist/esm/ic-footer.entry.js +1 -1
- package/dist/esm/ic-hero.entry.js +1 -1
- package/dist/esm/ic-horizontal-scroll.entry.js +1 -1
- package/dist/esm/{ic-menu.entry.js → ic-input-component-container_3.entry.js} +69 -7
- package/dist/esm/ic-input-component-container_3.entry.js.map +1 -0
- package/dist/esm/ic-input-label_2.entry.js +81 -0
- package/dist/esm/ic-input-label_2.entry.js.map +1 -0
- package/dist/esm/ic-link.entry.js +1 -1
- package/dist/esm/ic-menu-group.entry.js +1 -1
- package/dist/esm/ic-menu-item.entry.js +1 -1
- package/dist/esm/ic-menu-with-multi.entry.js +1 -1
- package/dist/esm/ic-menu-with-multi.entry.js.map +1 -1
- package/dist/esm/ic-navigation-button.entry.js +1 -1
- package/dist/esm/ic-navigation-group.entry.js +13 -16
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/ic-navigation-item.entry.js +32 -28
- package/dist/esm/ic-navigation-item.entry.js.map +1 -1
- package/dist/esm/ic-navigation-menu.entry.js +1 -1
- package/dist/esm/ic-page-header.entry.js +1 -1
- package/dist/esm/ic-pagination_4.entry.js +5 -5
- package/dist/esm/ic-pagination_4.entry.js.map +1 -1
- package/dist/esm/ic-popover-menu.entry.js +1 -1
- package/dist/esm/ic-radio-group.entry.js +1 -1
- package/dist/esm/ic-radio-option.entry.js +1 -1
- package/dist/esm/ic-search-bar.entry.js +1 -1
- package/dist/esm/ic-select-with-multi.entry.js +14 -1
- package/dist/esm/ic-select-with-multi.entry.js.map +1 -1
- package/dist/esm/ic-side-navigation.entry.js +1 -1
- package/dist/esm/ic-status-tag.entry.js +1 -1
- package/dist/esm/ic-step.entry.js +1 -1
- package/dist/esm/ic-stepper.entry.js +1 -1
- package/dist/esm/ic-switch.entry.js +1 -1
- package/dist/esm/ic-tab-group.entry.js +1 -1
- package/dist/esm/ic-tab-panel.entry.js +1 -1
- package/dist/esm/ic-tab.entry.js +1 -1
- package/dist/esm/ic-theme.entry.js +1 -1
- package/dist/esm/ic-toast.entry.js +1 -1
- package/dist/esm/ic-toggle-button.entry.js +1 -1
- package/dist/esm/ic-top-navigation.entry.js +60 -46
- package/dist/esm/ic-top-navigation.entry.js.map +1 -1
- package/dist/esm/ic-typography.entry.js +36 -12
- package/dist/esm/ic-typography.entry.js.map +1 -1
- package/dist/esm/index-93509377.js +10 -18
- package/dist/esm/loader.js +1 -1
- package/dist/esm/polyfills/core-js.js +0 -0
- package/dist/esm/polyfills/dom.js +0 -0
- package/dist/esm/polyfills/es5-html-element.js +0 -0
- package/dist/esm/polyfills/index.js +0 -0
- package/dist/esm/polyfills/system.js +0 -0
- package/dist/types/components/ic-data-table/ic-data-table.d.ts +96 -1
- package/dist/types/components/ic-data-table/ic-data-table.types.d.ts +11 -0
- package/dist/types/components/ic-data-table/story-data.d.ts +99 -0
- package/dist/types/components/ic-data-table-title-bar/ic-data-table-title-bar.d.ts +36 -0
- package/dist/types/components/ic-menu-with-multi/ic-menu.d.ts +2 -2
- package/dist/types/components/ic-select-with-multi/ic-select.d.ts +2 -2
- package/dist/types/components.d.ts +141 -389
- package/dist/types/utils/constants.d.ts +0 -37
- package/dist/types/utils/helpers.d.ts +16 -83
- package/dist/types/utils/types.d.ts +1 -92
- package/hydrate/index.js +945 -2932
- package/package.json +3 -4
- package/dist/cjs/date-helpers-c9551119.js +0 -150
- package/dist/cjs/date-helpers-c9551119.js.map +0 -1
- package/dist/cjs/helpers-7a069459.js.map +0 -1
- package/dist/cjs/helpers-f75cf7cf.js.map +0 -1
- package/dist/cjs/ic-date-input.cjs.entry.js +0 -1073
- package/dist/cjs/ic-date-input.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-date-picker.cjs.entry.js +0 -1050
- package/dist/cjs/ic-date-picker.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-empty-state.cjs.entry.js +0 -38
- package/dist/cjs/ic-empty-state.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-input-component-container_4.cjs.entry.js +0 -150
- package/dist/cjs/ic-input-component-container_4.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-menu.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-pagination-bar.cjs.entry.js.map +0 -1
- package/dist/collection/assets/calendar.svg +0 -3
- package/dist/collection/components/ic-date-input/ic-date-input.css +0 -560
- package/dist/collection/components/ic-date-input/ic-date-input.js +0 -1668
- package/dist/collection/components/ic-date-input/ic-date-input.js.map +0 -1
- package/dist/collection/components/ic-date-input/story-data.js +0 -28
- package/dist/collection/components/ic-date-input/story-data.js.map +0 -1
- package/dist/collection/components/ic-date-input/test/basic/ic-date-input.spec.js +0 -1156
- package/dist/collection/components/ic-date-input/test/basic/ic-date-input.spec.js.map +0 -1
- package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js +0 -42
- package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js.map +0 -1
- package/dist/collection/components/ic-date-picker/ic-date-picker.css +0 -878
- package/dist/collection/components/ic-date-picker/ic-date-picker.js +0 -1506
- package/dist/collection/components/ic-date-picker/ic-date-picker.js.map +0 -1
- package/dist/collection/components/ic-date-picker/ic-day-button.js +0 -36
- package/dist/collection/components/ic-date-picker/ic-day-button.js.map +0 -1
- package/dist/collection/components/ic-date-picker/ic-month-picker.js +0 -29
- package/dist/collection/components/ic-date-picker/ic-month-picker.js.map +0 -1
- package/dist/collection/components/ic-date-picker/ic-year-picker.js +0 -39
- package/dist/collection/components/ic-date-picker/ic-year-picker.js.map +0 -1
- package/dist/collection/components/ic-date-picker/story-data.js +0 -147
- package/dist/collection/components/ic-date-picker/story-data.js.map +0 -1
- package/dist/collection/components/ic-date-picker/test/a11y/ic-date-picker.test.a11y.js.map +0 -1
- package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker-utils.spec.js +0 -207
- package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker-utils.spec.js.map +0 -1
- package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker.spec.js +0 -962
- package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker.spec.js.map +0 -1
- package/dist/collection/utils/date-helpers.js +0 -133
- package/dist/collection/utils/date-helpers.js.map +0 -1
- package/dist/components/ic-date-input.js +0 -8
- package/dist/components/ic-date-input.js.map +0 -1
- package/dist/components/ic-date-input2.js +0 -1301
- package/dist/components/ic-date-input2.js.map +0 -1
- package/dist/components/ic-date-picker.d.ts +0 -11
- package/dist/components/ic-date-picker.js +0 -1171
- package/dist/components/ic-date-picker.js.map +0 -1
- package/dist/core/p-16f67397.entry.js +0 -2
- package/dist/core/p-16f67397.entry.js.map +0 -1
- package/dist/core/p-2c1fecb9.entry.js +0 -2
- package/dist/core/p-2c1fecb9.entry.js.map +0 -1
- package/dist/core/p-33679c06.entry.js +0 -2
- package/dist/core/p-33679c06.entry.js.map +0 -1
- package/dist/core/p-33dd24eb.js +0 -2
- package/dist/core/p-33dd24eb.js.map +0 -1
- package/dist/core/p-5392bca0.entry.js +0 -2
- package/dist/core/p-5392bca0.entry.js.map +0 -1
- package/dist/core/p-550a5674.entry.js +0 -2
- package/dist/core/p-550a5674.entry.js.map +0 -1
- package/dist/core/p-6c0e2ceb.entry.js +0 -2
- package/dist/core/p-6c0e2ceb.entry.js.map +0 -1
- package/dist/core/p-8ab12a15.entry.js +0 -2
- package/dist/core/p-8ab12a15.entry.js.map +0 -1
- package/dist/core/p-aabab75f.entry.js +0 -2
- package/dist/core/p-aabab75f.entry.js.map +0 -1
- package/dist/core/p-c7590421.entry.js +0 -2
- package/dist/core/p-c7590421.entry.js.map +0 -1
- package/dist/core/p-caf857de.entry.js +0 -2
- package/dist/core/p-caf857de.entry.js.map +0 -1
- package/dist/core/p-cd799087.js +0 -2
- package/dist/core/p-cd799087.js.map +0 -1
- package/dist/core/p-d32692e2.entry.js +0 -2
- package/dist/core/p-d32692e2.entry.js.map +0 -1
- package/dist/core/p-d35c7c18.js +0 -2
- package/dist/core/p-d35c7c18.js.map +0 -1
- package/dist/core/p-e189f1d0.entry.js +0 -2
- package/dist/core/p-e189f1d0.entry.js.map +0 -1
- package/dist/core/p-e5d76564.entry.js +0 -2
- package/dist/core/p-e5d76564.entry.js.map +0 -1
- package/dist/core/p-f55ad6ae.entry.js +0 -2
- package/dist/core/p-f91527a0.entry.js +0 -2
- package/dist/core/p-f91527a0.entry.js.map +0 -1
- package/dist/esm/date-helpers-0e5e32a7.js +0 -136
- package/dist/esm/date-helpers-0e5e32a7.js.map +0 -1
- package/dist/esm/helpers-7aa21b0a.js.map +0 -1
- package/dist/esm/helpers-f328a7b6.js.map +0 -1
- package/dist/esm/ic-date-input.entry.js +0 -1069
- package/dist/esm/ic-date-input.entry.js.map +0 -1
- package/dist/esm/ic-date-picker.entry.js +0 -1046
- package/dist/esm/ic-date-picker.entry.js.map +0 -1
- package/dist/esm/ic-empty-state.entry.js.map +0 -1
- package/dist/esm/ic-input-component-container_4.entry.js +0 -143
- package/dist/esm/ic-input-component-container_4.entry.js.map +0 -1
- package/dist/esm/ic-menu.entry.js.map +0 -1
- package/dist/esm/ic-pagination-bar.entry.js.map +0 -1
- package/dist/types/components/ic-date-input/ic-date-input.d.ts +0 -242
- package/dist/types/components/ic-date-input/story-data.d.ts +0 -1
- package/dist/types/components/ic-date-input/test/helpers/ic-date-input.d.ts +0 -23
- package/dist/types/components/ic-date-picker/ic-date-picker.d.ts +0 -251
- package/dist/types/components/ic-date-picker/ic-day-button.d.ts +0 -16
- package/dist/types/components/ic-date-picker/ic-month-picker.d.ts +0 -14
- package/dist/types/components/ic-date-picker/ic-year-picker.d.ts +0 -16
- package/dist/types/components/ic-date-picker/story-data.d.ts +0 -22
- package/dist/types/utils/date-helpers.d.ts +0 -22
- /package/dist/core/{p-8ea47d42.entry.js.map → p-045359e1.entry.js.map} +0 -0
- /package/dist/core/{p-3745da83.entry.js.map → p-10fb4c46.entry.js.map} +0 -0
- /package/dist/core/{p-2e2e0099.entry.js.map → p-1ca332ca.entry.js.map} +0 -0
- /package/dist/core/{p-d4fdd8c1.entry.js.map → p-204ace96.entry.js.map} +0 -0
- /package/dist/core/{p-5fe96107.entry.js.map → p-2eac7dcc.entry.js.map} +0 -0
- /package/dist/core/{p-36508aad.entry.js.map → p-4753bac8.entry.js.map} +0 -0
- /package/dist/core/{p-4f1ffa39.entry.js.map → p-4baa0916.entry.js.map} +0 -0
- /package/dist/core/{p-776671cf.entry.js.map → p-4f413fc0.entry.js.map} +0 -0
- /package/dist/core/{p-9d540656.entry.js.map → p-595be57d.entry.js.map} +0 -0
- /package/dist/core/{p-7cecf5d5.entry.js.map → p-5ae93c16.entry.js.map} +0 -0
- /package/dist/core/{p-1ce75941.entry.js.map → p-5e0c830b.entry.js.map} +0 -0
- /package/dist/core/{p-e74f1d09.entry.js.map → p-624d4f5f.entry.js.map} +0 -0
- /package/dist/core/{p-9d01a7ad.entry.js.map → p-6933f8e9.entry.js.map} +0 -0
- /package/dist/core/{p-5e2e6c3b.entry.js.map → p-6c3044b6.entry.js.map} +0 -0
- /package/dist/core/{p-6690bc04.entry.js.map → p-75dac3d1.entry.js.map} +0 -0
- /package/dist/core/{p-85609bdd.entry.js.map → p-7ef8d616.entry.js.map} +0 -0
- /package/dist/core/{p-a0f9b259.entry.js.map → p-81ddc39d.entry.js.map} +0 -0
- /package/dist/core/{p-a6447b13.entry.js.map → p-869954a2.entry.js.map} +0 -0
- /package/dist/core/{p-47ac6838.entry.js.map → p-88d54b72.entry.js.map} +0 -0
- /package/dist/core/{p-06ae5bec.entry.js.map → p-8b08d8fe.entry.js.map} +0 -0
- /package/dist/core/{p-ca8cbd6a.entry.js.map → p-917c5721.entry.js.map} +0 -0
- /package/dist/core/{p-76d26018.entry.js.map → p-a0f8efb2.entry.js.map} +0 -0
- /package/dist/core/{p-a42c2f37.entry.js.map → p-a31031a5.entry.js.map} +0 -0
- /package/dist/core/{p-b306cbc8.entry.js.map → p-a434c3d4.entry.js.map} +0 -0
- /package/dist/core/{p-86012178.entry.js.map → p-a43c12cd.entry.js.map} +0 -0
- /package/dist/core/{p-8c90110a.entry.js.map → p-a50c3b9e.entry.js.map} +0 -0
- /package/dist/core/{p-1b7d426b.entry.js.map → p-ab09986c.entry.js.map} +0 -0
- /package/dist/core/{p-62e22508.entry.js.map → p-b82dcc29.entry.js.map} +0 -0
- /package/dist/core/{p-d5c99ec3.entry.js.map → p-ba86928c.entry.js.map} +0 -0
- /package/dist/core/{p-d3856ed3.entry.js.map → p-c34848da.entry.js.map} +0 -0
- /package/dist/core/{p-98448bdb.entry.js.map → p-d8469ac0.entry.js.map} +0 -0
- /package/dist/core/{p-1832f4b5.entry.js.map → p-db9c03c0.entry.js.map} +0 -0
- /package/dist/core/{p-ae422058.entry.js.map → p-e3997d60.entry.js.map} +0 -0
- /package/dist/core/{p-982a6e88.entry.js.map → p-e834344e.entry.js.map} +0 -0
- /package/dist/core/{p-c7820c23.entry.js.map → p-f3c840cd.entry.js.map} +0 -0
- /package/dist/core/{p-5759d771.entry.js.map → p-f7a14c01.entry.js.map} +0 -0
- /package/dist/core/{p-0939ce92.entry.js.map → p-f843da01.entry.js.map} +0 -0
- /package/dist/core/{p-e84b0310.entry.js.map → p-fc5611e2.entry.js.map} +0 -0
- /package/dist/types/components/{ic-date-picker/test/a11y/ic-date-picker.test.a11y.d.ts → ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.d.ts} +0 -0
@@ -1,1046 +0,0 @@
|
|
1
|
-
import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-93509377.js';
|
2
|
-
import { d as dateInRange, g as getMonthEnd, a as getMonthStart, y as yearInRange, b as dateMatches, c as getWeekStart, e as getWeekEnd, f as clampDate, h as createDate } from './date-helpers-0e5e32a7.js';
|
3
|
-
import { s as stringEnumToArray, I as IcDayNames, a as IcDateInputMonths, b as IcWeekDays, o as onComponentRequiredPropUndefined, c as IcShortDayNames } from './helpers-f328a7b6.js';
|
4
|
-
|
5
|
-
const chevron = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
6
|
-
<path d="M9.70687 6L8.29688 7.41L12.8769 12L8.29688 16.59L9.70687 18L15.7069 12L9.70687 6Z" fill="currentColor"/>
|
7
|
-
</svg>
|
8
|
-
`;
|
9
|
-
|
10
|
-
const DayButton = ({ focussed, today, day, monthInView, onFocusDay, onBlurDay, onSelectDay, selected, focussedDayRef, inRange, showDaysOutsideMonth, disableDay, }) => {
|
11
|
-
const handleDayClick = () => {
|
12
|
-
onSelectDay(day);
|
13
|
-
};
|
14
|
-
const handleDayFocus = () => {
|
15
|
-
onFocusDay();
|
16
|
-
};
|
17
|
-
const handleDayBlur = () => {
|
18
|
-
onBlurDay();
|
19
|
-
};
|
20
|
-
const dayNames = stringEnumToArray(IcDayNames);
|
21
|
-
const months = stringEnumToArray(IcDateInputMonths);
|
22
|
-
const outsideRange = !inRange || disableDay;
|
23
|
-
const outsideMonth = monthInView !== day.getMonth();
|
24
|
-
const disabled = outsideRange || (outsideMonth && !showDaysOutsideMonth);
|
25
|
-
return (h("div", { class: "day-button-container" },
|
26
|
-
h("button", { class: {
|
27
|
-
"day-button": true,
|
28
|
-
"outside-month": outsideMonth,
|
29
|
-
"outside-range": outsideRange,
|
30
|
-
hidden: outsideMonth && !showDaysOutsideMonth,
|
31
|
-
disabled: disabled,
|
32
|
-
today: today,
|
33
|
-
selected: selected,
|
34
|
-
focussed: focussed,
|
35
|
-
}, tabIndex: focussed ? 0 : -1, "aria-hidden": outsideMonth ? "true" : "false", "aria-disabled": disabled ? "true" : "false", "aria-current": today ? "date" : undefined, "aria-label": disabled || outsideMonth || outsideRange
|
36
|
-
? undefined
|
37
|
-
: `Choose ${dayNames[day.getDay()]}, ${day.getDate()} ${months[day.getMonth()]} ${day.getFullYear()}`, disabled: disabled, onClick: handleDayClick, onBlur: handleDayBlur, onFocus: handleDayFocus, ref: (el) => {
|
38
|
-
if (focussed && el && focussedDayRef) {
|
39
|
-
focussedDayRef(el);
|
40
|
-
}
|
41
|
-
} }, (!outsideMonth || (outsideMonth && showDaysOutsideMonth)) && (h("ic-typography", { variant: "subtitle-small", italic: outsideMonth }, day.getDate())))));
|
42
|
-
};
|
43
|
-
|
44
|
-
const MonthPicker = ({ size, focussedMonth, monthInView, onSelectMonth, onKeyDown, focussedMonthRef, minDate, maxDate, yearInView, }) => {
|
45
|
-
const handleMonthClick = (ev) => {
|
46
|
-
const button = ev.target;
|
47
|
-
onSelectMonth(Number(button.getAttribute("data-month")));
|
48
|
-
};
|
49
|
-
const monthNames = stringEnumToArray(IcDateInputMonths);
|
50
|
-
return (h("div", { class: {
|
51
|
-
"month-picker": true,
|
52
|
-
}, role: "list" }, monthNames.map((month, index) => {
|
53
|
-
const current = monthInView === index;
|
54
|
-
const focussed = focussedMonth === index;
|
55
|
-
const outsideRange = !dateInRange(new Date(yearInView, index, 1), minDate ? getMonthStart(minDate) : null, maxDate ? getMonthEnd(maxDate) : null);
|
56
|
-
return (h("ic-button", { role: "listitem", class: {
|
57
|
-
"month-button": true,
|
58
|
-
selected: current,
|
59
|
-
focussed: focussed,
|
60
|
-
disabled: outsideRange,
|
61
|
-
}, "full-width": true, disabled: outsideRange, variant: current ? "primary" : "tertiary", "data-month": index, size: size, tabIndex: focussed ? 0 : -1, "aria-current": current ? "true" : "false", "aria-label": current ? "" : `select ${month}`, onClick: handleMonthClick, onKeyDown: onKeyDown, ref: (el) => {
|
62
|
-
if (focussed && el) {
|
63
|
-
focussedMonthRef(el);
|
64
|
-
}
|
65
|
-
} }, month));
|
66
|
-
})));
|
67
|
-
};
|
68
|
-
|
69
|
-
const YearPicker = ({ decadeView, size, focussedYear, yearInView, onSelectYear, onFocusYear, onBlurYear, onKeyDown, minDate, maxDate, focussedYearRef, }) => {
|
70
|
-
const handleYearClick = (ev) => {
|
71
|
-
const button = ev.target;
|
72
|
-
onSelectYear(Number(button.getAttribute("data-year")));
|
73
|
-
};
|
74
|
-
const handleYearFocus = () => {
|
75
|
-
onFocusYear();
|
76
|
-
};
|
77
|
-
const handleYearBlur = () => {
|
78
|
-
onBlurYear();
|
79
|
-
};
|
80
|
-
const navButtonMouseDownHandler = (ev) => {
|
81
|
-
ev.preventDefault();
|
82
|
-
};
|
83
|
-
const prevDecade = decadeView[0];
|
84
|
-
const nextDecade = decadeView[11];
|
85
|
-
const years = decadeView.slice(1, 11);
|
86
|
-
return (h("div", { class: "year-picker", role: "list" },
|
87
|
-
h("div", { class: "prev-decade", "aria-hidden": "true" },
|
88
|
-
h("ic-button", { id: "prev-decade-button", class: {
|
89
|
-
"year-button": true,
|
90
|
-
}, disabled: !yearInRange(prevDecade, minDate, maxDate), "data-year": prevDecade, tabIndex: -1, variant: "tertiary", onClick: handleYearClick, onMouseDown: navButtonMouseDownHandler, "aria-hidden": "true", size: size },
|
91
|
-
`${prevDecade - 9}s`,
|
92
|
-
h("svg", { slot: "left-icon", width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
93
|
-
h("path", { d: "M11.3333 5.33341H3.21996L6.94663 1.60675L5.99996 0.666748L0.666626 6.00008L5.99996 11.3334L6.93996 10.3934L3.21996 6.66675H11.3333V5.33341Z", fill: "currentColor" })))),
|
94
|
-
years.map((yr) => {
|
95
|
-
const current = yearInView === yr;
|
96
|
-
const focussed = focussedYear === yr;
|
97
|
-
return (h("ic-button", { class: {
|
98
|
-
"year-button": true,
|
99
|
-
selected: current,
|
100
|
-
focussed: focussed,
|
101
|
-
}, disabled: !yearInRange(yr, minDate, maxDate), "data-year": yr, tabIndex: focussed ? 0 : -1, variant: current ? "primary" : "tertiary", onClick: handleYearClick, "aria-label": current ? "" : `select ${yr}`, role: "listitem", "aria-current": current ? "true" : "false", onKeyDown: onKeyDown, onFocus: handleYearFocus, onBlur: handleYearBlur, size: size, ref: (el) => {
|
102
|
-
if (focussed && el) {
|
103
|
-
focussedYearRef(el);
|
104
|
-
}
|
105
|
-
} }, yr));
|
106
|
-
}),
|
107
|
-
h("div", { class: "next-decade", "aria-hidden": "true" },
|
108
|
-
h("ic-button", { id: "next-decade-button", class: {
|
109
|
-
"year-button": true,
|
110
|
-
flip: true,
|
111
|
-
}, disabled: !yearInRange(nextDecade, minDate, maxDate), "data-year": nextDecade, tabIndex: -1, variant: "tertiary", onClick: handleYearClick, onMouseDown: navButtonMouseDownHandler, "aria-hidden": "true", size: size },
|
112
|
-
`${nextDecade}s`,
|
113
|
-
h("svg", { slot: "right-icon", width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
114
|
-
h("path", { d: "M11.3333 5.33341H3.21996L6.94663 1.60675L5.99996 0.666748L0.666626 6.00008L5.99996 11.3334L6.93996 10.3934L3.21996 6.66675H11.3333V5.33341Z", fill: "currentColor" }))))));
|
115
|
-
};
|
116
|
-
|
117
|
-
const icDatePickerCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;position:relative;--month-year-picker-button-width:5rem;--month-button-width:5.5rem;--input-field-width:var(--input-width, 19.125rem)}:host(.large){--month-button-width:6.3125rem;--input-field-width:var(--input-width, 21.125rem)}:host(.small){--month-button-width:6.25rem;--input-field-width:var(--input-width, 17.125rem)}:host .date-input-container{position:relative}ic-date-input{--input-width:var(--input-field-width)}:host .calendar-container{min-width:19rem;max-width:23.5rem;width:var(--input-width);display:flex;flex-direction:column;gap:var(--ic-space-xs);position:absolute;border:var(--ic-border-default);border-radius:var(--ic-border-radius);align-items:center;background-color:var(--ic-architectural-white);z-index:var(--ic-z-index-date-picker);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);margin-top:var(--ic-space-xxxs);padding:var(--ic-space-xs);animation:fade-in-calendar var(--ic-transition-duration-slow)}:host(.small) .calendar-container{min-width:17rem;max-width:21.5rem}:host(.large) .calendar-container{min-width:21rem;max-width:25.5rem}:host .calendar-container.above{bottom:calc(var(--ic-space-xxl) - var(--ic-space-xxs))}:host .month-year-nav-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch}:host .month-year-nav-container.hidden{display:none}:host .month-year-nav{display:flex;justify-content:space-between;align-items:center;flex:1 0 0}:host .month-picker,:host .year-picker{flex-wrap:wrap;display:inline-flex;align-items:center;width:17.5rem;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs);row-gap:var(--ic-space-xxs)}:host(.small) .month-picker,:host(.small) .year-picker{width:13.125rem}:host(.large) .month-picker,:host(.large) .year-picker{width:20rem}:host .month-picker-button,:host .year-picker-button{width:5rem;--min-width:5rem}:host .month-button,:host .year-button{width:var(--month-button-width)}:host .month-button.focussed,:host .year-button.focussed{z-index:1}:host .month-button::part(button),:host .year-button::part(button){min-width:var(--month-button-width)}:host .prev-decade .year-button svg{margin-right:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}:host .prev-decade .year-button::part(button){padding-left:0;padding-right:var(--ic-space-lg)}:host(.small) .prev-decade .year-button::part(button){padding-left:0;padding-right:calc(var(--ic-space-lg) + var(--ic-space-xxs))}:host .next-decade .year-button svg{margin-left:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}:host .next-decade .year-button::part(button){padding-right:0;padding-left:var(--ic-space-lg)}:host(.small) .next-decade .year-button::part(button),:host(.large) .next-decade .year-button::part(button){padding-left:var(--ic-space-xl)}:host .bottom-buttons{padding-top:var(--ic-space-xs);display:flex;justify-content:space-between;align-items:center;align-self:stretch;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.small) .bottom-buttons{padding-top:var(--ic-space-xxs)}:host .bottom-buttons.no-today{align-items:flex-end;flex-direction:column}:host .bottom-buttons.hidden{display:none}:host .calendar{display:flex;flex-direction:column;align-items:flex-start;width:15.75rem;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.large) .calendar{width:19.25rem}:host(.small) .calendar{padding-bottom:var(--ic-space-xxs);width:14rem}:host .hidden{display:none}:host .weekdays{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--ic-space-xs);align-self:stretch}:host .calendar-days-container{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:var(--ic-space-xs);padding:var(--ic-space-xxs) 0}:host(.small) .calendar-days-container{padding:var(--ic-space-xxxs) 0}:host(.large) .calendar-days-container{padding:var(--ic-space-xs) 0}:host .calendar-day-header{display:flex;width:2rem;padding:var(--ic-space-xxs) 0;justify-content:center;align-items:center}:host(.small) .calendar-day-header,:host(.large) .calendar-day-header{padding:var(--ic-space-xxs)}:host .calendar-day-header ic-typography{color:var(--ic-color-tertiary-text);text-align:center}:host .day-button-container{display:flex;justify-content:center;align-items:center;width:2.25rem;height:2.25rem}:host(.small) .day-button-container{width:2rem;height:2rem}:host(.large) .day-button-container{width:2.5rem;height:2.5rem}:host .day-button{display:flex;position:relative;justify-content:center;align-items:center;border:0;border-radius:2rem;background-color:var(--ic-architectural-white);width:2rem;height:2rem;cursor:pointer;transition:var(--ic-easing-transition-fast);z-index:0}:host .day-button.disabled{cursor:default}:host(.large) .day-button{width:2.25rem;height:2.25rem}:host(.small) .day-button{width:1.75rem;height:1.75rem}:host .day-button ic-typography{width:1.75rem;color:var(--ic-color-primary-text)}:host .day-button.outside-range ic-typography{color:var(--ic-architectural-400)}:host .day-button.outside-month ic-typography{font-weight:var(--ic-font-weight-regular) !important}:host .day-button.outside-month:not(.outside-range):not(.selected) ic-typography{color:var(--ic-color-primary-text)}:host .day-button:hover:not(.disabled){background-color:var(--ic-action-dark-bg-hover)}:host .day-button:active:not(.disabled){background-color:var(--ic-action-dark-bg-active)}@media (prefers-reduced-motion: no-preference){:host .day-button:hover:not(.disabled):not(.focussed),:host .day-button:active:not(.disabled):not(.focussed){transition:background-color var(--ic-transition-duration-slow) ease-in-out}}:host .day-button.selected:not(.hidden){background-color:var(--ic-action-default)}:host .day-button.selected ic-typography{color:var(--ic-color-white-text)}:host .day-button.selected:not(.hidden):hover{background-color:var(--ic-action-default-hover)}:host .day-button.selected:not(.hidden):active{background-color:var(--ic-action-default-active)}:host .day-button.focussed{z-index:1}:host .day-button:focus{outline:none}:host .day-button.focussed:focus{box-shadow:var(--ic-border-focus)}:host .day-button.today:not(.hidden)::after{content:\"\";position:absolute;width:0.875rem;height:0.125rem;bottom:0.4rem;border-radius:var(--ic-border-radius);background-color:var(--ic-action-default)}:host(.small) .day-button.today::after{bottom:0.35rem}:host(.large) .day-button.today::after{width:1rem}:host .day-button.today.selected::after{background-color:var(--ic-architectural-white)}:host #select-month-hint,:host #select-year-hint{display:none}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){:host .calendar-container,:host .calendar,:host .bottom-buttons{animation:none}}@keyframes fade-in-buttons{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes fade-in-calendar{0%{display:flex;max-height:0}100%{display:flex;max-height:600px}}@media (forced-colors: active){:host .day-button.today:not(.hidden)::after{background-color:highlight}:host .day-button.selected:not(.hidden){background-color:highlight}:host .day-button.focussed:focus{border:var(--ic-hc-border)}:host .month-button.selected::part(button),:host .year-button.selected::part(button){background-color:highlight}}";
|
118
|
-
|
119
|
-
const DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
|
120
|
-
const DEFAULT_DISABLE_DATES_FROM_NOW_MSG = "Dates in the future are not allowed. Please select a date in the past.";
|
121
|
-
const DEFAULT_DISABLE_DATES_UNTIL_NOW_MSG = "Dates in the past are not allowed. Please select a date in the future.";
|
122
|
-
const DEFAULT_DISABLE_DAYS_MSG = "The date you have selected is on a day of the week that is not allowed. Please select another date.";
|
123
|
-
const FOCUS_TIMER = 100;
|
124
|
-
const PICKER_HEIGHT_SMALL = 360;
|
125
|
-
const PICKER_HEIGHT_DEFAULT = 400;
|
126
|
-
const PICKER_HEIGHT_LARGE = 440;
|
127
|
-
const DatePicker = class {
|
128
|
-
constructor(hostRef) {
|
129
|
-
registerInstance(this, hostRef);
|
130
|
-
this.icChange = createEvent(this, "icChange", 7);
|
131
|
-
this.clearButtonEl = null;
|
132
|
-
this.daysOfWeek = [];
|
133
|
-
this.dayButtonFocussed = false;
|
134
|
-
this.dayPickerKeyboardNav = false;
|
135
|
-
this.dialogDescription = "";
|
136
|
-
this.focusDay = true;
|
137
|
-
this.liveRegionEl = null;
|
138
|
-
this.monthNames = [];
|
139
|
-
this.monthInViewUpdateHandled = false;
|
140
|
-
this.myCalendarButtonClicked = false;
|
141
|
-
this.showPickerAbove = false;
|
142
|
-
this.today = new Date();
|
143
|
-
this.todayButtonEl = null;
|
144
|
-
this.yearButtonFocussed = false;
|
145
|
-
this.setDecadeView = (start) => {
|
146
|
-
let currYear = start - 1;
|
147
|
-
const decadeArr = [];
|
148
|
-
while (currYear <= start + 10) {
|
149
|
-
decadeArr.push(currYear);
|
150
|
-
currYear++;
|
151
|
-
}
|
152
|
-
this.decadeView = decadeArr;
|
153
|
-
this.decadeStart = decadeArr[1];
|
154
|
-
this.decadeEnd = decadeArr[10];
|
155
|
-
};
|
156
|
-
this.setSelectedDate = (d, emit = true) => {
|
157
|
-
if (d === null || !dateMatches(d, this.selectedDate)) {
|
158
|
-
this.selectedDate = d;
|
159
|
-
this.value = d;
|
160
|
-
if (emit) {
|
161
|
-
this.icChange.emit({ value: d });
|
162
|
-
}
|
163
|
-
}
|
164
|
-
};
|
165
|
-
this.handleCalendarMouseDown = (event) => {
|
166
|
-
const target = event.target;
|
167
|
-
if (target.tagName !== "IC-BUTTON") {
|
168
|
-
event.preventDefault();
|
169
|
-
}
|
170
|
-
};
|
171
|
-
this.handleCalendarClick = (event) => {
|
172
|
-
this.clearDialogDescription();
|
173
|
-
event.stopImmediatePropagation();
|
174
|
-
};
|
175
|
-
this.handleDocumentClick = () => {
|
176
|
-
this.calendarOpen = false;
|
177
|
-
};
|
178
|
-
this.keyDownHandler = (event) => {
|
179
|
-
if (event.key === "Escape") {
|
180
|
-
this.closeButtonClickHandler();
|
181
|
-
this.inputEl.setCalendarFocus();
|
182
|
-
}
|
183
|
-
else {
|
184
|
-
this.clearDialogDescription();
|
185
|
-
}
|
186
|
-
event.stopImmediatePropagation();
|
187
|
-
};
|
188
|
-
this.closeButtonClickHandler = () => {
|
189
|
-
this.calendarOpen = false;
|
190
|
-
};
|
191
|
-
this.focusFirstElement = () => {
|
192
|
-
this.monthButtonEl.setFocus();
|
193
|
-
};
|
194
|
-
this.focusLastElement = () => {
|
195
|
-
if (this.showPickerClearButton && !this.clearButtonEl.disabled) {
|
196
|
-
this.clearButtonEl.setFocus();
|
197
|
-
}
|
198
|
-
else if (this.showPickerTodayButton && !this.todayButtonEl.disabled) {
|
199
|
-
this.todayButtonEl.setFocus();
|
200
|
-
}
|
201
|
-
else if (this.monthPickerVisible) {
|
202
|
-
this.focussedMonthEl.setFocus();
|
203
|
-
}
|
204
|
-
else if (this.yearPickerVisible) {
|
205
|
-
this.focussedYearEl.setFocus();
|
206
|
-
}
|
207
|
-
else {
|
208
|
-
this.focussedDayEl.focus();
|
209
|
-
}
|
210
|
-
};
|
211
|
-
this.focusFocussedDay = () => {
|
212
|
-
this.focussedDayEl.focus();
|
213
|
-
};
|
214
|
-
this.monthButtonClickHandler = () => {
|
215
|
-
this.yearPickerVisible = false;
|
216
|
-
this.focusDay = false;
|
217
|
-
this.monthPickerVisible = !this.monthPickerVisible;
|
218
|
-
if (this.monthPickerVisible) {
|
219
|
-
this.setAriaLiveRegionText("Month picker view open");
|
220
|
-
}
|
221
|
-
else {
|
222
|
-
this.setMonthSelectedLiveRegionText();
|
223
|
-
}
|
224
|
-
};
|
225
|
-
this.yearButtonClickHandler = () => {
|
226
|
-
this.monthPickerVisible = false;
|
227
|
-
this.focusDay = false;
|
228
|
-
this.yearPickerVisible = !this.yearPickerVisible;
|
229
|
-
if (this.yearPickerVisible) {
|
230
|
-
this.setAriaLiveRegionText(`Year picker view open. ${this.getDecadeInViewText()}`);
|
231
|
-
}
|
232
|
-
else {
|
233
|
-
this.setYearSelectedLiveRegionText();
|
234
|
-
}
|
235
|
-
};
|
236
|
-
this.todayButtonClickHandler = () => {
|
237
|
-
this.yearPickerVisible = false;
|
238
|
-
this.monthPickerVisible = false;
|
239
|
-
this.setFocussedDate(new Date());
|
240
|
-
this.setAriaLiveRegionText(this.getMonthInViewText());
|
241
|
-
setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
|
242
|
-
};
|
243
|
-
this.todayButtonKeyDownHandler = (ev) => {
|
244
|
-
if (ev.key === "Tab" && !ev.shiftKey && this.clearButtonEl.disabled) {
|
245
|
-
this.focusFirstElement();
|
246
|
-
ev.preventDefault();
|
247
|
-
}
|
248
|
-
};
|
249
|
-
this.clearButtonClickHandler = () => {
|
250
|
-
this.setSelectedDate(null, false);
|
251
|
-
let text = "Selected date cleared.";
|
252
|
-
if (!this.monthPickerVisible && !this.yearPickerVisible) {
|
253
|
-
text += ` ${this.getMonthInViewText()}`;
|
254
|
-
}
|
255
|
-
if (this.monthPickerVisible) {
|
256
|
-
this.focussedMonthEl.setFocus();
|
257
|
-
}
|
258
|
-
else if (this.yearPickerVisible) {
|
259
|
-
this.focussedYearEl.setFocus();
|
260
|
-
}
|
261
|
-
else {
|
262
|
-
this.focusFocussedDay();
|
263
|
-
}
|
264
|
-
this.setAriaLiveRegionText(text);
|
265
|
-
};
|
266
|
-
this.setMonthSelectedLiveRegionText = () => {
|
267
|
-
this.setAriaLiveRegionText(`${this.monthNames[this.monthInView]} selected. ${this.getMonthInViewText()}`);
|
268
|
-
};
|
269
|
-
this.setYearSelectedLiveRegionText = () => {
|
270
|
-
this.setAriaLiveRegionText(`${this.yearInView} selected. ${this.getMonthInViewText()}`);
|
271
|
-
};
|
272
|
-
this.getMonthInViewText = () => {
|
273
|
-
return `${this.monthNames[this.monthInView]} ${this.yearInView} currently in view.`;
|
274
|
-
};
|
275
|
-
this.getDecadeInViewText = () => {
|
276
|
-
return `${this.decadeStart} to ${this.decadeEnd} currently in view.`;
|
277
|
-
};
|
278
|
-
this.setAriaLiveRegionText = (text) => {
|
279
|
-
this.liveRegionEl.innerText = text;
|
280
|
-
};
|
281
|
-
this.clearDialogDescription = () => {
|
282
|
-
this.dialogDescription = "";
|
283
|
-
};
|
284
|
-
this.clearButtonKeyDownHandler = (ev) => {
|
285
|
-
if (ev.key === "Tab" && !ev.shiftKey) {
|
286
|
-
this.focusFirstElement();
|
287
|
-
ev.preventDefault();
|
288
|
-
}
|
289
|
-
};
|
290
|
-
this.goToPreviousMonth = (focusDay = false) => {
|
291
|
-
this.focusDay = focusDay;
|
292
|
-
this.moveMonths(-1);
|
293
|
-
};
|
294
|
-
this.goToNextMonth = (focusDay = false) => {
|
295
|
-
this.focusDay = focusDay;
|
296
|
-
this.moveMonths(1);
|
297
|
-
};
|
298
|
-
this.goToPreviousYear = (focusDay = false) => {
|
299
|
-
if (this.isPrevYearAllowed()) {
|
300
|
-
this.focusDay = focusDay;
|
301
|
-
this.moveYears(-1);
|
302
|
-
}
|
303
|
-
};
|
304
|
-
this.goToNextYear = (focusDay = false) => {
|
305
|
-
if (this.isNextYearAllowed()) {
|
306
|
-
this.focusDay = focusDay;
|
307
|
-
this.moveYears(1);
|
308
|
-
}
|
309
|
-
};
|
310
|
-
this.navButtonMouseDownHandler = (ev) => {
|
311
|
-
ev.preventDefault();
|
312
|
-
};
|
313
|
-
this.renderMonthYearNavButton = (id, flip, disabled) => {
|
314
|
-
const buttonSize = this.size;
|
315
|
-
return (h("div", { "aria-hidden": "true" }, h("ic-button", { id: id, disableTooltip: true, disabled: disabled, onClick: this.monthYearNavClickHandler, class: { flip: flip }, variant: "icon", innerHTML: chevron, size: buttonSize, tabIndex: -1, "aria-hidden": "true", onMouseDown: this.navButtonMouseDownHandler })));
|
316
|
-
};
|
317
|
-
this.monthYearNavClickHandler = (ev) => {
|
318
|
-
const target = ev.target;
|
319
|
-
switch (target.id) {
|
320
|
-
case "previous-month-button":
|
321
|
-
this.goToPreviousMonth(this.dayButtonFocussed);
|
322
|
-
break;
|
323
|
-
case "next-month-button":
|
324
|
-
this.goToNextMonth(this.dayButtonFocussed);
|
325
|
-
break;
|
326
|
-
case "previous-year-button":
|
327
|
-
this.goToPreviousYear(this.dayButtonFocussed);
|
328
|
-
break;
|
329
|
-
case "next-year-button":
|
330
|
-
this.goToNextYear(this.dayButtonFocussed);
|
331
|
-
break;
|
332
|
-
}
|
333
|
-
};
|
334
|
-
this.previousMonthButton = () => {
|
335
|
-
let disabled = false;
|
336
|
-
if (this.focussedDate !== null && this.minDate !== null) {
|
337
|
-
const yearMatch = this.focussedDate.getFullYear() === this.minDate.getFullYear();
|
338
|
-
if (yearMatch) {
|
339
|
-
disabled = this.monthInView - 1 < this.minDate.getMonth();
|
340
|
-
}
|
341
|
-
}
|
342
|
-
return this.renderMonthYearNavButton("previous-month-button", true, disabled);
|
343
|
-
};
|
344
|
-
this.nextMonthButton = () => {
|
345
|
-
let disabled = false;
|
346
|
-
if (this.focussedDate !== null && this.maxDate !== null) {
|
347
|
-
const yearMatch = this.focussedDate.getFullYear() === this.maxDate.getFullYear();
|
348
|
-
if (yearMatch) {
|
349
|
-
disabled = this.monthInView + 1 > this.maxDate.getMonth();
|
350
|
-
}
|
351
|
-
}
|
352
|
-
return this.renderMonthYearNavButton("next-month-button", false, disabled);
|
353
|
-
};
|
354
|
-
this.previousYearButton = () => {
|
355
|
-
return this.renderMonthYearNavButton("previous-year-button", true, !this.isPrevYearAllowed());
|
356
|
-
};
|
357
|
-
this.nextYearButton = () => {
|
358
|
-
return this.renderMonthYearNavButton("next-year-button", false, !this.isNextYearAllowed());
|
359
|
-
};
|
360
|
-
this.isPrevYearAllowed = () => {
|
361
|
-
return this.isYearAllowed(this.yearInView - 1);
|
362
|
-
};
|
363
|
-
this.isNextYearAllowed = () => {
|
364
|
-
return this.isYearAllowed(this.yearInView + 1);
|
365
|
-
};
|
366
|
-
this.isYearAllowed = (yr) => {
|
367
|
-
return yearInRange(yr, this.minDate, this.maxDate);
|
368
|
-
};
|
369
|
-
this.getMonthView = (date) => {
|
370
|
-
const start = getWeekStart(getMonthStart(date), this.startOfWeek);
|
371
|
-
const end = getWeekEnd(getMonthEnd(date), this.startOfWeek);
|
372
|
-
const days = [];
|
373
|
-
let current = start;
|
374
|
-
while (!dateMatches(current, end)) {
|
375
|
-
days.push(current);
|
376
|
-
current = new Date(current);
|
377
|
-
current.setDate(current.getDate() + 1);
|
378
|
-
}
|
379
|
-
days.push(current);
|
380
|
-
return days;
|
381
|
-
};
|
382
|
-
this.isCurrentMonth = () => {
|
383
|
-
const d = new Date();
|
384
|
-
return (d.getFullYear() === this.yearInView && d.getMonth() === this.monthInView);
|
385
|
-
};
|
386
|
-
this.updateMonthInView = () => {
|
387
|
-
this.currMonthView = this.getMonthView(this.focussedDate);
|
388
|
-
this.focussedDay = this.focussedDate.getDate();
|
389
|
-
this.monthInView = this.focussedDate.getMonth();
|
390
|
-
this.yearInView = this.focussedDate.getFullYear();
|
391
|
-
if (this.dayPickerKeyboardNav) {
|
392
|
-
this.monthInViewUpdateHandled = true;
|
393
|
-
this.setAriaLiveRegionText(this.getMonthInViewText());
|
394
|
-
this.dayPickerKeyboardNav = false;
|
395
|
-
}
|
396
|
-
};
|
397
|
-
this.handleSelectDay = (day) => {
|
398
|
-
this.setSelectedDate(day);
|
399
|
-
this.calendarOpen = false;
|
400
|
-
this.inputEl.setCalendarFocus();
|
401
|
-
};
|
402
|
-
this.handleSelectMonth = (month) => {
|
403
|
-
this.moveMonths(month - this.monthInView);
|
404
|
-
setTimeout(() => {
|
405
|
-
this.monthButtonEl.setFocus();
|
406
|
-
this.monthPickerVisible = false;
|
407
|
-
this.setMonthSelectedLiveRegionText();
|
408
|
-
}, FOCUS_TIMER);
|
409
|
-
};
|
410
|
-
this.handleSelectYear = (year) => {
|
411
|
-
const yrPos = this.decadeView.indexOf(year);
|
412
|
-
if (yrPos > 0 && yrPos < this.decadeView.length - 1) {
|
413
|
-
this.moveYears(year - this.yearInView);
|
414
|
-
this.focusDay = false;
|
415
|
-
const monthName = this.monthNames[this.monthInView];
|
416
|
-
this.setAriaLiveRegionText(`${year} selected. ${monthName} ${year} currently in view.`);
|
417
|
-
setTimeout(() => {
|
418
|
-
this.yearButtonEl.setFocus();
|
419
|
-
this.yearPickerVisible = false;
|
420
|
-
}, FOCUS_TIMER);
|
421
|
-
}
|
422
|
-
else {
|
423
|
-
const moveYears = year - this.focussedYear > 0 ? 10 : -10;
|
424
|
-
this.updateFocussedYear(moveYears, this.yearButtonFocussed);
|
425
|
-
this.setAriaLiveRegionText(this.getDecadeInViewText());
|
426
|
-
}
|
427
|
-
};
|
428
|
-
this.monthPickerKeyDownHandler = (ev) => {
|
429
|
-
let handled = true;
|
430
|
-
switch (ev.key) {
|
431
|
-
case "ArrowUp":
|
432
|
-
case "ArrowLeft":
|
433
|
-
this.updateFocussedMonth(-1);
|
434
|
-
break;
|
435
|
-
case "ArrowDown":
|
436
|
-
case "ArrowRight":
|
437
|
-
this.updateFocussedMonth(1);
|
438
|
-
break;
|
439
|
-
case "Home":
|
440
|
-
this.updateFocussedMonth(-this.focussedMonth);
|
441
|
-
break;
|
442
|
-
case "End":
|
443
|
-
this.updateFocussedMonth(11 - this.focussedMonth);
|
444
|
-
break;
|
445
|
-
case "Tab":
|
446
|
-
handled = this.calendarTabHandler(ev);
|
447
|
-
break;
|
448
|
-
case "Escape":
|
449
|
-
ev.stopImmediatePropagation();
|
450
|
-
this.monthPickerVisible = false;
|
451
|
-
setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
|
452
|
-
break;
|
453
|
-
default:
|
454
|
-
handled = false;
|
455
|
-
}
|
456
|
-
if (handled) {
|
457
|
-
ev.preventDefault();
|
458
|
-
}
|
459
|
-
};
|
460
|
-
this.yearPickerKeyDownHandler = (ev) => {
|
461
|
-
let handled = true;
|
462
|
-
switch (ev.key) {
|
463
|
-
case "ArrowUp":
|
464
|
-
case "ArrowLeft":
|
465
|
-
this.updateFocussedYear(-1);
|
466
|
-
break;
|
467
|
-
case "ArrowDown":
|
468
|
-
case "ArrowRight":
|
469
|
-
this.updateFocussedYear(1);
|
470
|
-
break;
|
471
|
-
case "Home":
|
472
|
-
if (this.focussedYear > this.decadeStart) {
|
473
|
-
this.updateFocussedYear(this.decadeStart - this.focussedYear);
|
474
|
-
}
|
475
|
-
break;
|
476
|
-
case "End":
|
477
|
-
if (this.focussedYear < this.decadeEnd) {
|
478
|
-
this.updateFocussedYear(this.decadeEnd - this.focussedYear);
|
479
|
-
}
|
480
|
-
break;
|
481
|
-
case "PageUp":
|
482
|
-
this.updateFocussedYear(-10);
|
483
|
-
break;
|
484
|
-
case "PageDown":
|
485
|
-
this.updateFocussedYear(10);
|
486
|
-
break;
|
487
|
-
case "Tab":
|
488
|
-
handled = this.calendarTabHandler(ev);
|
489
|
-
break;
|
490
|
-
case "Escape":
|
491
|
-
ev.stopImmediatePropagation();
|
492
|
-
this.yearPickerVisible = false;
|
493
|
-
setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
|
494
|
-
break;
|
495
|
-
default:
|
496
|
-
handled = false;
|
497
|
-
}
|
498
|
-
if (handled) {
|
499
|
-
ev.preventDefault();
|
500
|
-
}
|
501
|
-
};
|
502
|
-
this.onYearButtonFocusHandler = () => {
|
503
|
-
this.yearButtonFocussed = true;
|
504
|
-
};
|
505
|
-
this.onYearButtonBlurHandler = () => {
|
506
|
-
this.yearButtonFocussed = false;
|
507
|
-
};
|
508
|
-
this.monthButtonKeyDownHandler = (ev) => {
|
509
|
-
let handled = false;
|
510
|
-
switch (ev.key) {
|
511
|
-
case "ArrowLeft":
|
512
|
-
case "ArrowUp":
|
513
|
-
handled = true;
|
514
|
-
this.goToPreviousMonth();
|
515
|
-
break;
|
516
|
-
case "ArrowRight":
|
517
|
-
case "ArrowDown":
|
518
|
-
handled = true;
|
519
|
-
this.goToNextMonth();
|
520
|
-
break;
|
521
|
-
case "Home":
|
522
|
-
handled = true;
|
523
|
-
this.focusDay = false;
|
524
|
-
this.moveMonths(-this.monthInView);
|
525
|
-
break;
|
526
|
-
case "End":
|
527
|
-
handled = true;
|
528
|
-
this.focusDay = false;
|
529
|
-
this.moveMonths(11 - this.monthInView);
|
530
|
-
break;
|
531
|
-
case "Tab":
|
532
|
-
if (ev.shiftKey) {
|
533
|
-
handled = true;
|
534
|
-
this.focusLastElement();
|
535
|
-
}
|
536
|
-
break;
|
537
|
-
case "Escape":
|
538
|
-
if (this.monthPickerVisible) {
|
539
|
-
this.monthPickerVisible = false;
|
540
|
-
ev.stopImmediatePropagation();
|
541
|
-
}
|
542
|
-
break;
|
543
|
-
}
|
544
|
-
if (handled) {
|
545
|
-
ev.preventDefault();
|
546
|
-
}
|
547
|
-
};
|
548
|
-
this.yearButtonKeyDownHandler = (ev) => {
|
549
|
-
let handled = false;
|
550
|
-
switch (ev.key) {
|
551
|
-
case "ArrowLeft":
|
552
|
-
case "ArrowUp":
|
553
|
-
handled = true;
|
554
|
-
this.goToPreviousYear();
|
555
|
-
break;
|
556
|
-
case "ArrowRight":
|
557
|
-
case "ArrowDown":
|
558
|
-
handled = true;
|
559
|
-
this.goToNextYear();
|
560
|
-
break;
|
561
|
-
case "Home":
|
562
|
-
if (this.yearPickerVisible && this.yearInView > this.decadeStart) {
|
563
|
-
handled = true;
|
564
|
-
this.moveYears(this.decadeStart - this.yearInView);
|
565
|
-
}
|
566
|
-
break;
|
567
|
-
case "End":
|
568
|
-
if (this.yearPickerVisible && this.yearInView < this.decadeEnd) {
|
569
|
-
handled = true;
|
570
|
-
this.moveYears(this.decadeEnd - this.focussedYear);
|
571
|
-
}
|
572
|
-
break;
|
573
|
-
case "PageUp":
|
574
|
-
handled = true;
|
575
|
-
this.focusDay = false;
|
576
|
-
this.moveYears(-10);
|
577
|
-
break;
|
578
|
-
case "PageDown":
|
579
|
-
handled = true;
|
580
|
-
this.focusDay = false;
|
581
|
-
this.moveYears(10);
|
582
|
-
break;
|
583
|
-
case "Escape":
|
584
|
-
if (this.yearPickerVisible) {
|
585
|
-
this.yearPickerVisible = false;
|
586
|
-
ev.stopImmediatePropagation();
|
587
|
-
}
|
588
|
-
break;
|
589
|
-
}
|
590
|
-
if (handled) {
|
591
|
-
ev.preventDefault();
|
592
|
-
}
|
593
|
-
};
|
594
|
-
this.handleCalendarKeyDown = (ev) => {
|
595
|
-
let handled = true;
|
596
|
-
switch (ev.key) {
|
597
|
-
case "ArrowDown":
|
598
|
-
this.dayPickerKeyboardNav = true;
|
599
|
-
this.moveDays(7);
|
600
|
-
break;
|
601
|
-
case "ArrowUp":
|
602
|
-
this.dayPickerKeyboardNav = true;
|
603
|
-
this.moveDays(-7);
|
604
|
-
break;
|
605
|
-
case "ArrowLeft":
|
606
|
-
this.dayPickerKeyboardNav = true;
|
607
|
-
this.moveDays(-1 * this.getNextDayToFocus(this.focussedDate, false));
|
608
|
-
break;
|
609
|
-
case "ArrowRight":
|
610
|
-
this.dayPickerKeyboardNav = true;
|
611
|
-
this.moveDays(this.getNextDayToFocus(this.focussedDate, true));
|
612
|
-
break;
|
613
|
-
case "PageUp":
|
614
|
-
this.dayPickerKeyboardNav = true;
|
615
|
-
ev.shiftKey ? this.moveYears(-1) : this.moveMonths(-1);
|
616
|
-
break;
|
617
|
-
case "PageDown":
|
618
|
-
this.dayPickerKeyboardNav = true;
|
619
|
-
ev.shiftKey ? this.moveYears(1) : this.moveMonths(1);
|
620
|
-
break;
|
621
|
-
case "Home":
|
622
|
-
this.dayPickerKeyboardNav = true;
|
623
|
-
this.setFocussedDate(new Date(this.focussedYear, this.focussedMonth, 1));
|
624
|
-
break;
|
625
|
-
case "End":
|
626
|
-
this.dayPickerKeyboardNav = true;
|
627
|
-
this.setFocussedDate(new Date(this.focussedYear, this.focussedMonth + 1, 0));
|
628
|
-
break;
|
629
|
-
case "Tab":
|
630
|
-
handled = this.calendarTabHandler(ev);
|
631
|
-
break;
|
632
|
-
default:
|
633
|
-
handled = false;
|
634
|
-
break;
|
635
|
-
}
|
636
|
-
if (handled) {
|
637
|
-
ev.preventDefault();
|
638
|
-
}
|
639
|
-
};
|
640
|
-
this.calendarTabHandler = (ev) => {
|
641
|
-
let handled = false;
|
642
|
-
if (!ev.shiftKey &&
|
643
|
-
(!this.showPickerTodayButton || this.isCurrentMonth()) &&
|
644
|
-
(!this.showPickerClearButton || this.clearButtonEl.disabled)) {
|
645
|
-
this.focusFirstElement();
|
646
|
-
handled = true;
|
647
|
-
}
|
648
|
-
else if (ev.shiftKey) {
|
649
|
-
this.yearButtonEl.setFocus();
|
650
|
-
handled = true;
|
651
|
-
}
|
652
|
-
return handled;
|
653
|
-
};
|
654
|
-
this.onDayButtonFocusHandler = () => {
|
655
|
-
this.dayButtonFocussed = true;
|
656
|
-
};
|
657
|
-
this.onDayButtonBlurHandler = () => {
|
658
|
-
this.dayButtonFocussed = false;
|
659
|
-
};
|
660
|
-
this.getNextDayToFocus = (currDay, forward, level = 1) => {
|
661
|
-
const move = forward ? 1 : -1;
|
662
|
-
const nextDay = new Date(currDay);
|
663
|
-
nextDay.setDate(nextDay.getDate() + move);
|
664
|
-
const nextDayNum = Number(nextDay.getDay());
|
665
|
-
if (this.disableDays.includes(nextDayNum)) {
|
666
|
-
return this.getNextDayToFocus(nextDay, forward, level + 1);
|
667
|
-
}
|
668
|
-
else {
|
669
|
-
return level;
|
670
|
-
}
|
671
|
-
};
|
672
|
-
this.moveDays = (numDays) => {
|
673
|
-
const d = new Date(this.focussedDate);
|
674
|
-
d.setDate(d.getDate() + numDays);
|
675
|
-
this.setFocussedDate(d);
|
676
|
-
};
|
677
|
-
this.moveMonths = (numMonths) => {
|
678
|
-
const newMonth = this.focussedDate.getMonth() + numMonths;
|
679
|
-
const min = new Date(new Date(getMonthStart(this.focussedDate)).setMonth(newMonth));
|
680
|
-
const max = getMonthEnd(min);
|
681
|
-
const newDate = new Date(new Date(this.focussedDate).setMonth(newMonth));
|
682
|
-
this.setFocussedDate(clampDate(newDate, min, max));
|
683
|
-
if (this.monthPickerVisible === false &&
|
684
|
-
this.yearPickerVisible === false &&
|
685
|
-
this.monthInViewUpdateHandled === false) {
|
686
|
-
this.setAriaLiveRegionText(this.getMonthInViewText());
|
687
|
-
}
|
688
|
-
this.monthInViewUpdateHandled = false;
|
689
|
-
};
|
690
|
-
this.moveYears = (numYears) => {
|
691
|
-
const newYear = this.focussedDate.getFullYear() + numYears;
|
692
|
-
const min = new Date(new Date(getMonthStart(this.focussedDate)).setFullYear(newYear));
|
693
|
-
const max = getMonthEnd(min);
|
694
|
-
const newDate = new Date(new Date(this.focussedDate).setFullYear(newYear));
|
695
|
-
this.setFocussedDate(clampDate(newDate, min, max));
|
696
|
-
if (this.monthPickerVisible === false &&
|
697
|
-
this.yearPickerVisible === false &&
|
698
|
-
this.monthInViewUpdateHandled === false) {
|
699
|
-
this.setAriaLiveRegionText(this.getMonthInViewText());
|
700
|
-
}
|
701
|
-
this.monthInViewUpdateHandled = false;
|
702
|
-
};
|
703
|
-
this.updateFocussedMonth = (adjust) => {
|
704
|
-
const d = new Date(this.focussedYear, this.focussedMonth, 1);
|
705
|
-
d.setMonth(this.focussedMonth + adjust);
|
706
|
-
const newDate = clampDate(d, this.minDate, this.maxDate);
|
707
|
-
this.focussedMonth = newDate.getMonth();
|
708
|
-
setTimeout(() => this.focussedMonthEl.setFocus(), FOCUS_TIMER);
|
709
|
-
};
|
710
|
-
this.updateFocussedYear = (adjust, focusYear = true) => {
|
711
|
-
const d = new Date(new Date().setFullYear(this.focussedYear + adjust));
|
712
|
-
const newDate = clampDate(d, this.minDate, this.maxDate);
|
713
|
-
this.setFocussedYear(newDate.getFullYear(), focusYear);
|
714
|
-
};
|
715
|
-
this.setFocussedDate = (d) => {
|
716
|
-
this.focussedDate = clampDate(d, this.minDate, this.maxDate);
|
717
|
-
};
|
718
|
-
this.setFocussedDayEl = (element) => {
|
719
|
-
this.focussedDayEl = element;
|
720
|
-
};
|
721
|
-
this.setFocussedMonthEl = (element) => {
|
722
|
-
this.focussedMonthEl = element;
|
723
|
-
};
|
724
|
-
this.setFocussedYearEl = (element) => {
|
725
|
-
this.focussedYearEl = element;
|
726
|
-
};
|
727
|
-
this.setFocussedYear = (newYear, focus = true) => {
|
728
|
-
const prevYear = this.focussedYear;
|
729
|
-
this.focussedYear = newYear;
|
730
|
-
if (this.yearPickerVisible) {
|
731
|
-
const newDecade = Math.floor(newYear / 10) * 10;
|
732
|
-
const oldDecade = Math.floor(prevYear / 10) * 10;
|
733
|
-
if (newDecade !== oldDecade) {
|
734
|
-
this.setDecadeView(newDecade);
|
735
|
-
this.setAriaLiveRegionText(this.getDecadeInViewText());
|
736
|
-
}
|
737
|
-
if (focus) {
|
738
|
-
setTimeout(() => {
|
739
|
-
if (this.focussedYearEl !== null)
|
740
|
-
this.focussedYearEl.setFocus();
|
741
|
-
}, FOCUS_TIMER);
|
742
|
-
}
|
743
|
-
}
|
744
|
-
else {
|
745
|
-
this.setDecadeView(Math.floor(newYear / 10) * 10);
|
746
|
-
}
|
747
|
-
};
|
748
|
-
this.setDateInputProps = () => {
|
749
|
-
const untilNowMsg = !this.disablePast ||
|
750
|
-
this.disablePastMessage === DEFAULT_DISABLE_DATES_UNTIL_NOW_MSG
|
751
|
-
? ""
|
752
|
-
: this.disablePastMessage;
|
753
|
-
const fromNowMsg = !this.disableFuture ||
|
754
|
-
this.disableFutureMessage === DEFAULT_DISABLE_DATES_FROM_NOW_MSG
|
755
|
-
? ""
|
756
|
-
: this.disableFutureMessage;
|
757
|
-
const disableDaysMsg = !this.disableDays.length ||
|
758
|
-
this.disableDaysMessage === DEFAULT_DISABLE_DAYS_MSG
|
759
|
-
? ""
|
760
|
-
: this.disableDaysMessage;
|
761
|
-
if (this.dateFormat !== DEFAULT_DATE_FORMAT) {
|
762
|
-
this.dateInputProps.dateFormat = this.dateFormat;
|
763
|
-
}
|
764
|
-
if (this.disableFuture) {
|
765
|
-
this.dateInputProps.disableFuture = this.disableFuture;
|
766
|
-
if (fromNowMsg !== "") {
|
767
|
-
this.dateInputProps.disableFutureMessage = fromNowMsg;
|
768
|
-
}
|
769
|
-
}
|
770
|
-
if (this.disablePast) {
|
771
|
-
this.dateInputProps.disablePast = this.disablePast;
|
772
|
-
if (untilNowMsg !== "") {
|
773
|
-
this.dateInputProps.disablePastMessage = untilNowMsg;
|
774
|
-
}
|
775
|
-
}
|
776
|
-
if (this.disableDays.length > 0) {
|
777
|
-
this.dateInputProps.disableDays = this.disableDays;
|
778
|
-
if (disableDaysMsg !== "") {
|
779
|
-
this.dateInputProps.disableDaysMessage = disableDaysMsg;
|
780
|
-
}
|
781
|
-
}
|
782
|
-
this.dateInputProps.label = this.label;
|
783
|
-
if (this.max !== null && this.max !== "") {
|
784
|
-
this.dateInputProps.max = this.maxDate;
|
785
|
-
}
|
786
|
-
if (this.min !== null && this.min !== "") {
|
787
|
-
this.dateInputProps.min = this.minDate;
|
788
|
-
}
|
789
|
-
if (this.helperText !== undefined) {
|
790
|
-
this.dateInputProps.helperText = this.helperText;
|
791
|
-
}
|
792
|
-
if (this.inputId !== undefined) {
|
793
|
-
this.dateInputProps.inputId = this.inputId;
|
794
|
-
}
|
795
|
-
if (this.name !== undefined) {
|
796
|
-
this.dateInputProps.name = this.name;
|
797
|
-
}
|
798
|
-
this.dateInputProps.showClearButton = true;
|
799
|
-
this.dateInputProps.showCalendarButton = true;
|
800
|
-
if (this.disabled) {
|
801
|
-
this.dateInputProps.disabled = this.disabled;
|
802
|
-
}
|
803
|
-
if (this.required) {
|
804
|
-
this.dateInputProps.required = this.required;
|
805
|
-
}
|
806
|
-
if (this.size !== "default") {
|
807
|
-
this.dateInputProps.size = this.size;
|
808
|
-
}
|
809
|
-
if (this.validationStatus !== "") {
|
810
|
-
this.dateInputProps.validationStatus = this.validationStatus;
|
811
|
-
}
|
812
|
-
if (this.validationText !== "") {
|
813
|
-
this.dateInputProps.validationText = this.validationText;
|
814
|
-
}
|
815
|
-
this.dateInputProps.value = this.value;
|
816
|
-
};
|
817
|
-
this.calendarOpen = false;
|
818
|
-
this.currMonthView = [];
|
819
|
-
this.currYearPickerView = [];
|
820
|
-
this.dateInputProps = { label: "" };
|
821
|
-
this.decadeView = [];
|
822
|
-
this.focussedDate = null;
|
823
|
-
this.focussedDay = undefined;
|
824
|
-
this.focussedDayEl = undefined;
|
825
|
-
this.focussedMonth = undefined;
|
826
|
-
this.focussedMonthEl = undefined;
|
827
|
-
this.focussedYear = undefined;
|
828
|
-
this.maxDate = null;
|
829
|
-
this.minDate = null;
|
830
|
-
this.monthInView = undefined;
|
831
|
-
this.monthPickerVisible = false;
|
832
|
-
this.orderedDaysOfWeek = [];
|
833
|
-
this.selectedDate = null;
|
834
|
-
this.yearInView = undefined;
|
835
|
-
this.yearPickerVisible = false;
|
836
|
-
this.dateFormat = "DD/MM/YYYY";
|
837
|
-
this.disabled = false;
|
838
|
-
this.disableDays = [];
|
839
|
-
this.disableDaysMessage = "The date you have selected is on a day of the week that is not allowed. Please select another date.";
|
840
|
-
this.disableFuture = false;
|
841
|
-
this.disableFutureMessage = "Dates in the future are not allowed. Please select a date in the past.";
|
842
|
-
this.disablePast = false;
|
843
|
-
this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
|
844
|
-
this.helperText = undefined;
|
845
|
-
this.inputId = undefined;
|
846
|
-
this.label = undefined;
|
847
|
-
this.max = "";
|
848
|
-
this.min = "";
|
849
|
-
this.name = undefined;
|
850
|
-
this.openAtDate = "";
|
851
|
-
this.required = false;
|
852
|
-
this.showDaysOutsideMonth = true;
|
853
|
-
this.showPickerClearButton = true;
|
854
|
-
this.showPickerTodayButton = true;
|
855
|
-
this.size = "default";
|
856
|
-
this.startOfWeek = IcWeekDays.Monday;
|
857
|
-
this.validationStatus = "";
|
858
|
-
this.validationText = "";
|
859
|
-
this.value = "";
|
860
|
-
}
|
861
|
-
watchMaxHandler() {
|
862
|
-
if (this.disableFuture) {
|
863
|
-
this.maxDate = new Date();
|
864
|
-
}
|
865
|
-
else {
|
866
|
-
this.maxDate = createDate(this.max, this.dateFormat);
|
867
|
-
}
|
868
|
-
}
|
869
|
-
watchMinHandler() {
|
870
|
-
if (this.disablePast) {
|
871
|
-
this.minDate = new Date();
|
872
|
-
}
|
873
|
-
else {
|
874
|
-
this.minDate = createDate(this.min, this.dateFormat);
|
875
|
-
}
|
876
|
-
}
|
877
|
-
watchOpenHandler() {
|
878
|
-
if (this.calendarOpen) {
|
879
|
-
if (this.inputEl) {
|
880
|
-
let pickerHeight = PICKER_HEIGHT_DEFAULT;
|
881
|
-
if (this.size === "small") {
|
882
|
-
pickerHeight = PICKER_HEIGHT_SMALL;
|
883
|
-
}
|
884
|
-
else if (this.size === "large") {
|
885
|
-
pickerHeight = PICKER_HEIGHT_LARGE;
|
886
|
-
}
|
887
|
-
if (this.el.offsetTop + this.inputEl.offsetHeight + pickerHeight >
|
888
|
-
window.innerHeight &&
|
889
|
-
this.el.offsetTop > pickerHeight) {
|
890
|
-
this.showPickerAbove = true;
|
891
|
-
}
|
892
|
-
else {
|
893
|
-
this.showPickerAbove = false;
|
894
|
-
}
|
895
|
-
}
|
896
|
-
if (this.selectedDate === null ||
|
897
|
-
!dateInRange(this.selectedDate, this.minDate, this.maxDate)) {
|
898
|
-
let openAt = new Date();
|
899
|
-
if (this.openAtDate !== "") {
|
900
|
-
openAt = createDate(this.openAtDate, this.dateFormat);
|
901
|
-
}
|
902
|
-
this.setFocussedDate(openAt);
|
903
|
-
}
|
904
|
-
else {
|
905
|
-
this.setFocussedDate(this.selectedDate);
|
906
|
-
}
|
907
|
-
let dialogDesc = this.getMonthInViewText();
|
908
|
-
if (this.selectedDate === null) {
|
909
|
-
dialogDesc += " No date selected.";
|
910
|
-
}
|
911
|
-
dialogDesc +=
|
912
|
-
" Use arrow keys to change day. Press enter or space to select a date or press escape to close the picker";
|
913
|
-
this.dialogDescription = dialogDesc;
|
914
|
-
setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
|
915
|
-
document.addEventListener("click", this.handleDocumentClick);
|
916
|
-
}
|
917
|
-
else {
|
918
|
-
document.removeEventListener("click", this.handleDocumentClick);
|
919
|
-
this.monthPickerVisible = false;
|
920
|
-
this.yearPickerVisible = false;
|
921
|
-
}
|
922
|
-
}
|
923
|
-
watchFocussedDateHandler(current, previous) {
|
924
|
-
if (previous === null ||
|
925
|
-
!(previous.getFullYear() === current.getFullYear() &&
|
926
|
-
previous.getMonth() === current.getMonth())) {
|
927
|
-
this.updateMonthInView();
|
928
|
-
}
|
929
|
-
}
|
930
|
-
watchMonthInViewHandler() {
|
931
|
-
this.focussedMonth = this.monthInView;
|
932
|
-
}
|
933
|
-
watchYearInViewHandler() {
|
934
|
-
this.setFocussedYear(this.yearInView, false);
|
935
|
-
}
|
936
|
-
watchYearPickerVisibleHandler() {
|
937
|
-
if (!this.yearPickerVisible) {
|
938
|
-
this.setFocussedYear(this.yearInView);
|
939
|
-
}
|
940
|
-
}
|
941
|
-
watchMonthPickerVisibleHandler() {
|
942
|
-
if (!this.monthPickerVisible) {
|
943
|
-
this.focussedMonth = this.monthInView;
|
944
|
-
}
|
945
|
-
}
|
946
|
-
watchFocussedDayEl() {
|
947
|
-
if (this.focusDay) {
|
948
|
-
setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
|
949
|
-
}
|
950
|
-
this.focusDay = true;
|
951
|
-
}
|
952
|
-
componentWillLoad() {
|
953
|
-
onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Date Picker");
|
954
|
-
this.monthNames = stringEnumToArray(IcDateInputMonths);
|
955
|
-
this.daysOfWeek = stringEnumToArray(IcShortDayNames);
|
956
|
-
this.orderedDaysOfWeek = this.daysOfWeek
|
957
|
-
.splice(this.startOfWeek, this.daysOfWeek.length)
|
958
|
-
.concat(this.daysOfWeek.splice(0, this.startOfWeek));
|
959
|
-
this.watchMaxHandler();
|
960
|
-
this.watchMinHandler();
|
961
|
-
}
|
962
|
-
localCalendarButtonClickHandler(ev) {
|
963
|
-
this.myCalendarButtonClicked = true;
|
964
|
-
if (!this.calendarOpen) {
|
965
|
-
this.setSelectedDate(ev.detail.value, false);
|
966
|
-
}
|
967
|
-
this.calendarOpen = !this.calendarOpen;
|
968
|
-
}
|
969
|
-
calendarButtonClickHandler() {
|
970
|
-
//closes this picker if calendar button in another clicked
|
971
|
-
if (!this.myCalendarButtonClicked) {
|
972
|
-
this.calendarOpen = false;
|
973
|
-
}
|
974
|
-
this.myCalendarButtonClicked = false;
|
975
|
-
}
|
976
|
-
render() {
|
977
|
-
const { calendarOpen, dateInputProps, monthNames, size, focussedMonth, focussedYear, monthInView, yearInView, monthPickerVisible, yearPickerVisible, orderedDaysOfWeek, decadeView, minDate, maxDate, showPickerClearButton, showPickerTodayButton, dialogDescription, } = this;
|
978
|
-
let monthButtonText = "";
|
979
|
-
if (monthPickerVisible) {
|
980
|
-
monthButtonText = `Use the arrow keys to change the selected month. To return to day picker view, press Enter or Space to select a month, or press Escape.`;
|
981
|
-
}
|
982
|
-
else {
|
983
|
-
monthButtonText = `Press Enter or Space to open month picker view or use the arrow keys to change month.`;
|
984
|
-
}
|
985
|
-
let yearButtonText = "";
|
986
|
-
if (yearPickerVisible) {
|
987
|
-
yearButtonText = `Use the arrow keys to change the selected year. To return to day picker view, press Enter or Space to select a year, or press Escape.`;
|
988
|
-
}
|
989
|
-
else {
|
990
|
-
yearButtonText = `Press Enter or Space to open year picker view or use the arrow keys to change the selected year.`;
|
991
|
-
}
|
992
|
-
this.setDateInputProps();
|
993
|
-
const dialogLabel = "choose date";
|
994
|
-
const monthLabel = monthNames && monthNames[monthInView]
|
995
|
-
? monthNames[monthInView]
|
996
|
-
: "Open month picker";
|
997
|
-
const yearLabel = this.yearInView ? this.yearInView : "Open year picker";
|
998
|
-
let minDay = minDate;
|
999
|
-
if (this.disablePast) {
|
1000
|
-
const yesterday = new Date(minDate);
|
1001
|
-
yesterday.setDate(minDate.getDate() - 1);
|
1002
|
-
minDay = yesterday;
|
1003
|
-
}
|
1004
|
-
return (h(Host, { onKeyDown: this.keyDownHandler, class: size }, h("div", { class: "date-input-container" }, h("ic-date-input", Object.assign({ ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (h("div", null, h("span", { id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
|
1005
|
-
"calendar-container": true,
|
1006
|
-
above: this.showPickerAbove,
|
1007
|
-
}, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { class: {
|
1008
|
-
"month-year-nav-container": true,
|
1009
|
-
} }, h("div", { class: "month-year-nav" }, this.previousMonthButton(), h("span", { id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), h("div", { class: "month-year-nav" }, this.previousYearButton(), h("span", { id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (h("div", { class: {
|
1010
|
-
calendar: true,
|
1011
|
-
hidden: monthPickerVisible || yearPickerVisible,
|
1012
|
-
}, onKeyDown: this.handleCalendarKeyDown }, h("div", { class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
|
1013
|
-
const header = size === "small" ? dayName.charAt(0) : dayName;
|
1014
|
-
return (h("div", { class: "calendar-day-header" }, h("ic-typography", { variant: "caption" }, header)));
|
1015
|
-
})), h("div", { class: "calendar-days-container" }, this.currMonthView.map((day) => (h(DayButton, { day: day, disableDay: this.disableDays.includes(Number(day.getDay())), today: dateMatches(day, this.today), selected: dateMatches(day, this.selectedDate), focussed: dateMatches(day, this.focussedDate), inRange: dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth })))))), h("div", { class: {
|
1016
|
-
"month-picker-container": true,
|
1017
|
-
hidden: !monthPickerVisible,
|
1018
|
-
} }, monthPickerVisible && (h(MonthPicker, { size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { class: {
|
1019
|
-
"year-picker-container": true,
|
1020
|
-
hidden: !yearPickerVisible,
|
1021
|
-
} }, yearPickerVisible && (h(YearPicker, { decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), h("div", { class: {
|
1022
|
-
"bottom-buttons": true,
|
1023
|
-
"no-today": !showPickerTodayButton,
|
1024
|
-
} }, showPickerTodayButton && (h("ic-button", { id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showPickerClearButton && (h("ic-button", { id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
|
1025
|
-
this.value === null ||
|
1026
|
-
this.value === undefined }, "Clear"))))))));
|
1027
|
-
}
|
1028
|
-
static get delegatesFocus() { return true; }
|
1029
|
-
get el() { return getElement(this); }
|
1030
|
-
static get watchers() { return {
|
1031
|
-
"max": ["watchMaxHandler"],
|
1032
|
-
"min": ["watchMinHandler"],
|
1033
|
-
"calendarOpen": ["watchOpenHandler"],
|
1034
|
-
"focussedDate": ["watchFocussedDateHandler"],
|
1035
|
-
"monthInView": ["watchMonthInViewHandler"],
|
1036
|
-
"yearInView": ["watchYearInViewHandler"],
|
1037
|
-
"yearPickerVisible": ["watchYearPickerVisibleHandler"],
|
1038
|
-
"monthPickerVisible": ["watchMonthPickerVisibleHandler"],
|
1039
|
-
"focussedDayEl": ["watchFocussedDayEl"]
|
1040
|
-
}; }
|
1041
|
-
};
|
1042
|
-
DatePicker.style = icDatePickerCss;
|
1043
|
-
|
1044
|
-
export { DatePicker as ic_date_picker };
|
1045
|
-
|
1046
|
-
//# sourceMappingURL=ic-date-picker.entry.js.map
|