@ukic/canary-web-components 2.0.0-canary.8 → 2.0.0-canary.9
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/date-helpers-c9551119.js +150 -0
- package/dist/cjs/date-helpers-c9551119.js.map +1 -0
- package/dist/cjs/{helpers-b525d45a.js → helpers-7a069459.js} +7 -2
- package/dist/cjs/helpers-7a069459.js.map +1 -0
- package/dist/cjs/{helpers-93c5fc92.js → helpers-f75cf7cf.js} +94 -12
- package/dist/cjs/helpers-f75cf7cf.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 +8 -2
- 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-date-input.cjs.entry.js +1073 -0
- package/dist/cjs/ic-date-input.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-date-picker.cjs.entry.js +1043 -0
- package/dist/cjs/ic-date-picker.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-dialog.cjs.entry.js +1 -1
- package/dist/cjs/ic-divider.cjs.entry.js +1 -1
- package/dist/cjs/ic-empty-state.cjs.entry.js +1 -1
- 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-input-component-container_4.cjs.entry.js +150 -0
- package/dist/cjs/ic-input-component-container_4.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-input-component-container_3.cjs.entry.js → ic-menu.cjs.entry.js} +3 -67
- package/dist/cjs/ic-menu.cjs.entry.js.map +1 -0
- package/dist/cjs/ic-navigation-button.cjs.entry.js +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +1 -1
- package/dist/cjs/ic-navigation-item.cjs.entry.js +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-bar.cjs.entry.js +1 -1
- package/dist/cjs/ic-pagination_4.cjs.entry.js +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 +6 -19
- 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 +1 -1
- package/dist/cjs/ic-typography.cjs.entry.js +1 -1
- package/dist/cjs/index-4cf27b16.js +12 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/assets/calendar.svg +3 -0
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/ic-date-input/ic-date-input.css +560 -0
- package/dist/collection/components/ic-date-input/ic-date-input.js +1668 -0
- package/dist/collection/components/ic-date-input/ic-date-input.js.map +1 -0
- package/dist/collection/components/ic-date-input/story-data.js +28 -0
- package/dist/collection/components/ic-date-input/story-data.js.map +1 -0
- package/dist/collection/components/ic-date-input/test/basic/ic-date-input.spec.js +1156 -0
- package/dist/collection/components/ic-date-input/test/basic/ic-date-input.spec.js.map +1 -0
- package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js +42 -0
- package/dist/collection/components/ic-date-input/test/helpers/ic-date-input.js.map +1 -0
- package/dist/collection/components/ic-date-picker/ic-date-picker.css +878 -0
- package/dist/collection/components/ic-date-picker/ic-date-picker.js +1499 -0
- package/dist/collection/components/ic-date-picker/ic-date-picker.js.map +1 -0
- package/dist/collection/components/ic-date-picker/ic-day-button.js +36 -0
- package/dist/collection/components/ic-date-picker/ic-day-button.js.map +1 -0
- package/dist/collection/components/ic-date-picker/ic-month-picker.js +29 -0
- package/dist/collection/components/ic-date-picker/ic-month-picker.js.map +1 -0
- package/dist/collection/components/ic-date-picker/ic-year-picker.js +39 -0
- package/dist/collection/components/ic-date-picker/ic-year-picker.js.map +1 -0
- package/dist/collection/components/ic-date-picker/story-data.js +143 -0
- package/dist/collection/components/ic-date-picker/story-data.js.map +1 -0
- package/dist/collection/components/ic-date-picker/test/a11y/ic-date-picker.test.a11y.js +13 -0
- package/dist/collection/components/ic-date-picker/test/a11y/ic-date-picker.test.a11y.js.map +1 -0
- package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker-utils.spec.js +207 -0
- package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker-utils.spec.js.map +1 -0
- package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker.spec.js +962 -0
- package/dist/collection/components/ic-date-picker/test/basic/ic-date-picker.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-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 +55 -0
- package/dist/collection/utils/constants.js.map +1 -1
- package/dist/collection/utils/date-helpers.js +133 -0
- package/dist/collection/utils/date-helpers.js.map +1 -0
- package/dist/collection/utils/helpers.js +259 -10
- package/dist/collection/utils/helpers.js.map +1 -1
- package/dist/collection/utils/types.js +45 -0
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/helpers.js +7 -2
- package/dist/components/helpers.js.map +1 -1
- package/dist/components/helpers2.js +91 -12
- package/dist/components/helpers2.js.map +1 -1
- package/dist/components/ic-button2.js +11 -3
- 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 +11 -0
- package/dist/components/ic-date-input.js +8 -0
- package/dist/components/ic-date-input.js.map +1 -0
- package/dist/components/ic-date-input2.js +1301 -0
- package/dist/components/ic-date-input2.js.map +1 -0
- package/dist/components/ic-date-picker.d.ts +11 -0
- package/dist/components/ic-date-picker.js +1164 -0
- package/dist/components/ic-date-picker.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-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-pagination-item2.js +1 -1
- package/dist/components/ic-pagination2.js +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 +1 -14
- 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/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-8b08d8fe.entry.js → p-06ae5bec.entry.js} +2 -2
- package/dist/core/{p-f843da01.entry.js → p-0939ce92.entry.js} +2 -2
- package/dist/core/{p-e0462b23.entry.js → p-16f67397.entry.js} +2 -2
- package/dist/core/{p-db9c03c0.entry.js → p-1832f4b5.entry.js} +2 -2
- package/dist/core/{p-ab09986c.entry.js → p-1b7d426b.entry.js} +2 -2
- package/dist/core/{p-5e0c830b.entry.js → p-1ce75941.entry.js} +2 -2
- package/dist/core/{p-1ca332ca.entry.js → p-2e2e0099.entry.js} +2 -2
- package/dist/core/p-33679c06.entry.js +2 -0
- package/dist/core/p-33679c06.entry.js.map +1 -0
- package/dist/core/{p-4753bac8.entry.js → p-36508aad.entry.js} +2 -2
- package/dist/core/{p-10fb4c46.entry.js → p-3745da83.entry.js} +2 -2
- package/dist/core/{p-3803a5b5.entry.js → p-3f2e77c3.entry.js} +2 -2
- package/dist/core/{p-88d54b72.entry.js → p-47ac6838.entry.js} +2 -2
- package/dist/core/{p-4baa0916.entry.js → p-4f1ffa39.entry.js} +2 -2
- package/dist/core/{p-f7a14c01.entry.js → p-5759d771.entry.js} +2 -2
- package/dist/core/{p-6c3044b6.entry.js → p-5e2e6c3b.entry.js} +2 -2
- package/dist/core/{p-2eac7dcc.entry.js → p-5fe96107.entry.js} +2 -2
- package/dist/core/{p-b82dcc29.entry.js → p-62e22508.entry.js} +2 -2
- package/dist/core/{p-75dac3d1.entry.js → p-6690bc04.entry.js} +2 -2
- package/dist/core/{p-c125b65a.entry.js → p-6c0e2ceb.entry.js} +2 -2
- package/dist/core/{p-a0f8efb2.entry.js → p-76d26018.entry.js} +2 -2
- package/dist/core/{p-4f413fc0.entry.js → p-776671cf.entry.js} +2 -2
- package/dist/core/{p-5ae93c16.entry.js → p-7cecf5d5.entry.js} +2 -2
- package/dist/core/{p-7ef8d616.entry.js → p-85609bdd.entry.js} +2 -2
- package/dist/core/{p-a43c12cd.entry.js → p-86012178.entry.js} +2 -2
- package/dist/core/{p-942282cd.entry.js → p-8a7e7d23.entry.js} +2 -2
- package/dist/core/{p-a50c3b9e.entry.js → p-8c90110a.entry.js} +2 -2
- package/dist/core/{p-045359e1.entry.js → p-8ea47d42.entry.js} +2 -2
- package/dist/core/{p-e834344e.entry.js → p-982a6e88.entry.js} +2 -2
- package/dist/core/{p-d8469ac0.entry.js → p-98448bdb.entry.js} +2 -2
- package/dist/core/{p-6933f8e9.entry.js → p-9d01a7ad.entry.js} +2 -2
- package/dist/core/{p-595be57d.entry.js → p-9d540656.entry.js} +2 -2
- package/dist/core/{p-fde45b29.entry.js → p-9e3178e8.entry.js} +2 -2
- package/dist/core/{p-fde45b29.entry.js.map → p-9e3178e8.entry.js.map} +1 -1
- package/dist/core/{p-81ddc39d.entry.js → p-a0f9b259.entry.js} +2 -2
- package/dist/core/{p-a31031a5.entry.js → p-a42c2f37.entry.js} +2 -2
- package/dist/core/{p-869954a2.entry.js → p-a6447b13.entry.js} +2 -2
- package/dist/core/p-aabab75f.entry.js +2 -0
- package/dist/core/p-aabab75f.entry.js.map +1 -0
- package/dist/core/{p-e3997d60.entry.js → p-ae422058.entry.js} +2 -2
- package/dist/core/{p-a434c3d4.entry.js → p-b306cbc8.entry.js} +2 -2
- package/dist/core/{p-ac4e40a7.entry.js → p-c7590421.entry.js} +2 -2
- package/dist/core/{p-f3c840cd.entry.js → p-c7820c23.entry.js} +2 -2
- package/dist/core/{p-917c5721.entry.js → p-ca8cbd6a.entry.js} +2 -2
- package/dist/core/{p-73be1251.entry.js → p-caf857de.entry.js} +2 -2
- package/dist/core/p-cc7bc438.entry.js +2 -0
- package/dist/core/p-cc7bc438.entry.js.map +1 -0
- package/dist/core/p-cd799087.js +2 -0
- package/dist/core/p-cd799087.js.map +1 -0
- package/dist/core/p-d32692e2.entry.js +2 -0
- package/dist/core/p-d32692e2.entry.js.map +1 -0
- package/dist/core/p-d35c7c18.js +2 -0
- package/dist/core/p-d35c7c18.js.map +1 -0
- package/dist/core/{p-c34848da.entry.js → p-d3856ed3.entry.js} +2 -2
- package/dist/core/{p-204ace96.entry.js → p-d4fdd8c1.entry.js} +2 -2
- package/dist/core/{p-ba86928c.entry.js → p-d5c99ec3.entry.js} +2 -2
- package/dist/core/p-e473bbf8.entry.js +2 -0
- package/dist/core/p-e473bbf8.entry.js.map +1 -0
- package/dist/core/{p-624d4f5f.entry.js → p-e74f1d09.entry.js} +2 -2
- package/dist/core/{p-fc5611e2.entry.js → p-e84b0310.entry.js} +2 -2
- package/dist/core/p-f55ad6ae.entry.js +2 -0
- package/dist/core/{p-f14454b1.entry.js.map → p-f55ad6ae.entry.js.map} +1 -1
- package/dist/core/p-f8cf2978.js +2 -0
- package/dist/core/p-f8cf2978.js.map +1 -0
- package/dist/core/p-f91527a0.entry.js +2 -0
- package/dist/core/p-f91527a0.entry.js.map +1 -0
- package/dist/core/{p-169bfa51.entry.js → p-fbf4e9b7.entry.js} +2 -2
- package/dist/esm/core.js +1 -1
- package/dist/esm/date-helpers-4f432e92.js +136 -0
- package/dist/esm/date-helpers-4f432e92.js.map +1 -0
- package/dist/esm/{helpers-12b4266a.js → helpers-7aa21b0a.js} +7 -2
- package/dist/esm/helpers-7aa21b0a.js.map +1 -0
- package/dist/esm/{helpers-5271897c.js → helpers-f328a7b6.js} +92 -13
- package/dist/esm/helpers-f328a7b6.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 +8 -2
- 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-date-input.entry.js +1069 -0
- package/dist/esm/ic-date-input.entry.js.map +1 -0
- package/dist/esm/ic-date-picker.entry.js +1039 -0
- package/dist/esm/ic-date-picker.entry.js.map +1 -0
- package/dist/esm/ic-dialog.entry.js +1 -1
- package/dist/esm/ic-divider.entry.js +1 -1
- package/dist/esm/ic-empty-state.entry.js +1 -1
- 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-input-component-container_4.entry.js +143 -0
- package/dist/esm/ic-input-component-container_4.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-input-component-container_3.entry.js → ic-menu.entry.js} +5 -67
- package/dist/esm/ic-menu.entry.js.map +1 -0
- package/dist/esm/ic-navigation-button.entry.js +1 -1
- package/dist/esm/ic-navigation-group.entry.js +1 -1
- package/dist/esm/ic-navigation-item.entry.js +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-bar.entry.js +1 -1
- package/dist/esm/ic-pagination_4.entry.js +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 +1 -14
- 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 +1 -1
- package/dist/esm/ic-typography.entry.js +1 -1
- package/dist/esm/index-93509377.js +12 -4
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-date-input/ic-date-input.d.ts +242 -0
- package/dist/types/components/ic-date-input/story-data.d.ts +1 -0
- package/dist/types/components/ic-date-input/test/helpers/ic-date-input.d.ts +23 -0
- package/dist/types/components/ic-date-picker/ic-date-picker.d.ts +251 -0
- package/dist/types/components/ic-date-picker/ic-day-button.d.ts +16 -0
- package/dist/types/components/ic-date-picker/ic-month-picker.d.ts +14 -0
- package/dist/types/components/ic-date-picker/ic-year-picker.d.ts +16 -0
- package/dist/types/components/ic-date-picker/story-data.d.ts +22 -0
- package/dist/types/components/ic-date-picker/test/a11y/ic-date-picker.test.a11y.d.ts +1 -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 +439 -4
- package/dist/types/utils/constants.d.ts +37 -0
- package/dist/types/utils/date-helpers.d.ts +22 -0
- package/dist/types/utils/helpers.d.ts +83 -11
- package/dist/types/utils/types.d.ts +92 -1
- package/hydrate/index.js +2653 -253
- package/package.json +3 -3
- package/dist/cjs/helpers-93c5fc92.js.map +0 -1
- package/dist/cjs/helpers-b525d45a.js.map +0 -1
- package/dist/cjs/ic-input-component-container_3.cjs.entry.js.map +0 -1
- package/dist/cjs/ic-input-label_2.cjs.entry.js +0 -86
- package/dist/cjs/ic-input-label_2.cjs.entry.js.map +0 -1
- package/dist/core/p-21150122.entry.js +0 -2
- package/dist/core/p-21150122.entry.js.map +0 -1
- package/dist/core/p-99cad6c2.js +0 -2
- package/dist/core/p-99cad6c2.js.map +0 -1
- package/dist/core/p-9caf19eb.js +0 -2
- package/dist/core/p-9caf19eb.js.map +0 -1
- package/dist/core/p-e0a94f2d.entry.js +0 -2
- package/dist/core/p-e0a94f2d.entry.js.map +0 -1
- package/dist/core/p-f14454b1.entry.js +0 -2
- package/dist/core/p-f6888309.entry.js +0 -2
- package/dist/core/p-f6888309.entry.js.map +0 -1
- package/dist/core/p-f74a8752.entry.js +0 -2
- package/dist/core/p-f74a8752.entry.js.map +0 -1
- package/dist/esm/helpers-12b4266a.js.map +0 -1
- package/dist/esm/helpers-5271897c.js.map +0 -1
- package/dist/esm/ic-input-component-container_3.entry.js.map +0 -1
- package/dist/esm/ic-input-label_2.entry.js +0 -81
- package/dist/esm/ic-input-label_2.entry.js.map +0 -1
- /package/dist/core/{p-8b08d8fe.entry.js.map → p-06ae5bec.entry.js.map} +0 -0
- /package/dist/core/{p-f843da01.entry.js.map → p-0939ce92.entry.js.map} +0 -0
- /package/dist/core/{p-e0462b23.entry.js.map → p-16f67397.entry.js.map} +0 -0
- /package/dist/core/{p-db9c03c0.entry.js.map → p-1832f4b5.entry.js.map} +0 -0
- /package/dist/core/{p-ab09986c.entry.js.map → p-1b7d426b.entry.js.map} +0 -0
- /package/dist/core/{p-5e0c830b.entry.js.map → p-1ce75941.entry.js.map} +0 -0
- /package/dist/core/{p-1ca332ca.entry.js.map → p-2e2e0099.entry.js.map} +0 -0
- /package/dist/core/{p-4753bac8.entry.js.map → p-36508aad.entry.js.map} +0 -0
- /package/dist/core/{p-10fb4c46.entry.js.map → p-3745da83.entry.js.map} +0 -0
- /package/dist/core/{p-3803a5b5.entry.js.map → p-3f2e77c3.entry.js.map} +0 -0
- /package/dist/core/{p-88d54b72.entry.js.map → p-47ac6838.entry.js.map} +0 -0
- /package/dist/core/{p-4baa0916.entry.js.map → p-4f1ffa39.entry.js.map} +0 -0
- /package/dist/core/{p-f7a14c01.entry.js.map → p-5759d771.entry.js.map} +0 -0
- /package/dist/core/{p-6c3044b6.entry.js.map → p-5e2e6c3b.entry.js.map} +0 -0
- /package/dist/core/{p-2eac7dcc.entry.js.map → p-5fe96107.entry.js.map} +0 -0
- /package/dist/core/{p-b82dcc29.entry.js.map → p-62e22508.entry.js.map} +0 -0
- /package/dist/core/{p-75dac3d1.entry.js.map → p-6690bc04.entry.js.map} +0 -0
- /package/dist/core/{p-c125b65a.entry.js.map → p-6c0e2ceb.entry.js.map} +0 -0
- /package/dist/core/{p-a0f8efb2.entry.js.map → p-76d26018.entry.js.map} +0 -0
- /package/dist/core/{p-4f413fc0.entry.js.map → p-776671cf.entry.js.map} +0 -0
- /package/dist/core/{p-5ae93c16.entry.js.map → p-7cecf5d5.entry.js.map} +0 -0
- /package/dist/core/{p-7ef8d616.entry.js.map → p-85609bdd.entry.js.map} +0 -0
- /package/dist/core/{p-a43c12cd.entry.js.map → p-86012178.entry.js.map} +0 -0
- /package/dist/core/{p-942282cd.entry.js.map → p-8a7e7d23.entry.js.map} +0 -0
- /package/dist/core/{p-a50c3b9e.entry.js.map → p-8c90110a.entry.js.map} +0 -0
- /package/dist/core/{p-045359e1.entry.js.map → p-8ea47d42.entry.js.map} +0 -0
- /package/dist/core/{p-e834344e.entry.js.map → p-982a6e88.entry.js.map} +0 -0
- /package/dist/core/{p-d8469ac0.entry.js.map → p-98448bdb.entry.js.map} +0 -0
- /package/dist/core/{p-6933f8e9.entry.js.map → p-9d01a7ad.entry.js.map} +0 -0
- /package/dist/core/{p-595be57d.entry.js.map → p-9d540656.entry.js.map} +0 -0
- /package/dist/core/{p-81ddc39d.entry.js.map → p-a0f9b259.entry.js.map} +0 -0
- /package/dist/core/{p-a31031a5.entry.js.map → p-a42c2f37.entry.js.map} +0 -0
- /package/dist/core/{p-869954a2.entry.js.map → p-a6447b13.entry.js.map} +0 -0
- /package/dist/core/{p-e3997d60.entry.js.map → p-ae422058.entry.js.map} +0 -0
- /package/dist/core/{p-a434c3d4.entry.js.map → p-b306cbc8.entry.js.map} +0 -0
- /package/dist/core/{p-ac4e40a7.entry.js.map → p-c7590421.entry.js.map} +0 -0
- /package/dist/core/{p-f3c840cd.entry.js.map → p-c7820c23.entry.js.map} +0 -0
- /package/dist/core/{p-917c5721.entry.js.map → p-ca8cbd6a.entry.js.map} +0 -0
- /package/dist/core/{p-73be1251.entry.js.map → p-caf857de.entry.js.map} +0 -0
- /package/dist/core/{p-c34848da.entry.js.map → p-d3856ed3.entry.js.map} +0 -0
- /package/dist/core/{p-204ace96.entry.js.map → p-d4fdd8c1.entry.js.map} +0 -0
- /package/dist/core/{p-ba86928c.entry.js.map → p-d5c99ec3.entry.js.map} +0 -0
- /package/dist/core/{p-624d4f5f.entry.js.map → p-e74f1d09.entry.js.map} +0 -0
- /package/dist/core/{p-fc5611e2.entry.js.map → p-e84b0310.entry.js.map} +0 -0
- /package/dist/core/{p-169bfa51.entry.js.map → p-fbf4e9b7.entry.js.map} +0 -0
package/hydrate/index.js
CHANGED
@@ -7728,7 +7728,12 @@ const renderHiddenInput$1 = (always, container, name, value, disabled) => {
|
|
7728
7728
|
}
|
7729
7729
|
input.disabled = disabled;
|
7730
7730
|
input.name = name;
|
7731
|
-
|
7731
|
+
if (value instanceof Date) {
|
7732
|
+
input.value = value ? value.toISOString() : null;
|
7733
|
+
}
|
7734
|
+
else {
|
7735
|
+
input.value = value || "";
|
7736
|
+
}
|
7732
7737
|
}
|
7733
7738
|
};
|
7734
7739
|
/**
|
@@ -7830,7 +7835,7 @@ const handleHiddenFormButtonClick = (form, button) => {
|
|
7830
7835
|
hiddenFormButton.click();
|
7831
7836
|
hiddenFormButton.remove();
|
7832
7837
|
};
|
7833
|
-
const isEmptyString = (value) => value ? value.trim().length === 0 : true;
|
7838
|
+
const isEmptyString$1 = (value) => value ? value.trim().length === 0 : true;
|
7834
7839
|
// A helper function that checks if a prop has been defined
|
7835
7840
|
const isPropDefined = (prop) => prop !== undefined ? prop : null;
|
7836
7841
|
/**
|
@@ -9016,7 +9021,7 @@ var arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
9016
9021
|
<path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor"/>
|
9017
9022
|
</svg>`;
|
9018
9023
|
|
9019
|
-
const icButtonCss = "/*!@html*/html.sc-ic-button{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-button{margin:0}/*!@main*/main.sc-ic-button{display:block}/*!@h1*/h1.sc-ic-button{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-button{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-button{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-button{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-button{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-button,strong.sc-ic-button{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-button,kbd.sc-ic-button,samp.sc-ic-button{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-button{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-button,sup.sc-ic-button{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-button{bottom:-0.25em}/*!@sup*/sup.sc-ic-button{top:-0.5em}/*!@img*/img.sc-ic-button{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-button,input.sc-ic-button,optgroup.sc-ic-button,select.sc-ic-button,textarea.sc-ic-button{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-button,input.sc-ic-button{overflow:visible}/*!@button,\nselect*/button.sc-ic-button,select.sc-ic-button{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-button,[type=\"button\"].sc-ic-button,[type=\"reset\"].sc-ic-button,[type=\"submit\"].sc-ic-button{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-button::-moz-focus-inner,[type=\"button\"].sc-ic-button::-moz-focus-inner,[type=\"reset\"].sc-ic-button::-moz-focus-inner,[type=\"submit\"].sc-ic-button::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-button:-moz-focusring,[type=\"button\"].sc-ic-button:-moz-focusring,[type=\"reset\"].sc-ic-button:-moz-focusring,[type=\"submit\"].sc-ic-button:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-button{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-button{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-button{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-button{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-button,[type=\"radio\"].sc-ic-button{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-button::-webkit-inner-spin-button,[type=\"number\"].sc-ic-button::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-button{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-button::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-button::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-button{display:block}/*!@summary*/summary.sc-ic-button{display:list-item}/*!@template*/template.sc-ic-button{display:none}/*!@[hidden]*/[hidden].sc-ic-button{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-button,body.sc-ic-button,div.sc-ic-button,span.sc-ic-button,applet.sc-ic-button,object.sc-ic-button,iframe.sc-ic-button,h1.sc-ic-button,h2.sc-ic-button,h3.sc-ic-button,h4.sc-ic-button,h5.sc-ic-button,h6.sc-ic-button,p.sc-ic-button,blockquote.sc-ic-button,pre.sc-ic-button,a.sc-ic-button,abbr.sc-ic-button,acronym.sc-ic-button,address.sc-ic-button,big.sc-ic-button,cite.sc-ic-button,code.sc-ic-button,del.sc-ic-button,dfn.sc-ic-button,em.sc-ic-button,img.sc-ic-button,ins.sc-ic-button,kbd.sc-ic-button,q.sc-ic-button,s.sc-ic-button,samp.sc-ic-button,small.sc-ic-button,strike.sc-ic-button,strong.sc-ic-button,sub.sc-ic-button,sup.sc-ic-button,tt.sc-ic-button,var.sc-ic-button,b.sc-ic-button,u.sc-ic-button,i.sc-ic-button,center.sc-ic-button,dl.sc-ic-button,dt.sc-ic-button,dd.sc-ic-button,ol.sc-ic-button,ul.sc-ic-button,li.sc-ic-button,fieldset.sc-ic-button,form.sc-ic-button,label.sc-ic-button,legend.sc-ic-button,table.sc-ic-button,caption.sc-ic-button,tbody.sc-ic-button,tfoot.sc-ic-button,thead.sc-ic-button,tr.sc-ic-button,th.sc-ic-button,td.sc-ic-button,article.sc-ic-button,aside.sc-ic-button,canvas.sc-ic-button,details.sc-ic-button,embed.sc-ic-button,figure.sc-ic-button,figcaption.sc-ic-button,footer.sc-ic-button,header.sc-ic-button,hgroup.sc-ic-button,menu.sc-ic-button,nav.sc-ic-button,output.sc-ic-button,ruby.sc-ic-button,section.sc-ic-button,summary.sc-ic-button,time.sc-ic-button,mark.sc-ic-button,audio.sc-ic-button,video.sc-ic-button{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-button-h{display:inline-block;position:relative;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--icon-width:100%;--icon-height:100%}/*!@.button,\n::slotted(a)*/.button.sc-ic-button,.sc-ic-button-s>a{font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:0.875rem;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:var(--min-width, 6.25rem);display:inline-flex;flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}/*!@:host(.with-badge) .button*/.with-badge.sc-ic-button-h .button.sc-ic-button{border-radius:0.2188rem}/*!@.button:hover,\n::slotted(a:hover)*/.button.sc-ic-button:hover,.sc-ic-button-s>a:hover{cursor:pointer}/*!@.button:focus,\n:host .button:focus,\n:host(.light) .button:focus,\n::slotted(a:focus)*/.button.sc-ic-button:focus,.sc-ic-button-h .button.sc-ic-button:focus,.light.sc-ic-button-h .button.sc-ic-button:focus,.sc-ic-button-s>a:focus{box-shadow:var(--ic-border-focus)}/*!@.button:focus-visible,\n::slotted(a:focus-visible)*/.button.sc-ic-button:focus-visible,.sc-ic-button-s>a:focus-visible{outline:var(--ic-hc-focus-outline)}/*!@:host(.dark) .button,\n:host(.dark) ::slotted(a)*/.dark.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.dark.sc-ic-button-s>a,.sc-ic-button-h.dark .sc-ic-button-s>a{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}/*!@:host(.light) .button,\n:host(.light) ::slotted(a)*/.light.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.light.sc-ic-button-s>a,.sc-ic-button-h.light .sc-ic-button-s>a{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}/*!@:host(.white-background) .button,\n:host(.white-background) ::slotted(a)*/.white-background.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.white-background.sc-ic-button-s>a,.sc-ic-button-h.white-background .sc-ic-button-s>a{--button-default-background-hover:var(--ic-action-default-bg-hover-no-alpha);--button-default-background-active:var(\n --ic-action-default-bg-active-no-alpha\n );background-color:var(--ic-architectural-white)}/*!@:host(.white-background.dark) .button,\n:host(.white-background.dark) ::slotted(a)*/.white-background.dark.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.white-background.dark.sc-ic-button-s>a,.sc-ic-button-h.white-background.dark .sc-ic-button-s>a{--button-default-background-hover:var(--ic-action-dark-bg-hover-no-alpha);--button-default-background-active:var(--ic-action-dark-bg-active-no-alpha)}/*!@:host(.button-variant-primary.light) .button,\n:host(.button-variant-primary.light) ::slotted(a)*/.button-variant-primary.light.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-primary.light.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.light .sc-ic-button-s>a{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}/*!@:host(.button-variant-primary.dark) .button,\n:host(.button-variant-primary.dark) ::slotted(a)*/.button-variant-primary.dark.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-primary.dark.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.dark .sc-ic-button-s>a{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}/*!@:host(.disabled),\n:host(.disabled) .button,\n:host(.disabled) ::slotted(a),\n:host(.loading),\n:host(.loading) .button*/.disabled.sc-ic-button-h,.disabled.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.disabled.sc-ic-button-s>a,.sc-ic-button-h.disabled .sc-ic-button-s>a,.loading.sc-ic-button-h,.loading.sc-ic-button-h .button.sc-ic-button{pointer-events:none}/*!@:host(.top-icon) .button*/.top-icon.sc-ic-button-h .button.sc-ic-button{flex-direction:column;--height:fit-content}/*!@:host(.top-icon) .button .icon-container*/.top-icon.sc-ic-button-h .button.sc-ic-button .icon-container.sc-ic-button{margin-right:0}/*!@:host(.button-variant-primary) .button,\n:host(.button-variant-primary) ::slotted(a)*/.button-variant-primary.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-primary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary .sc-ic-button-s>a{color:var(--ic-architectural-white);background-color:var(--button-default)}/*!@:host(.button-variant-primary) .button:hover:not(:focus)*/.button-variant-primary.sc-ic-button-h .button.sc-ic-button:hover:not(:focus){background-color:var(--button-default-hover)}/*!@:host(.button-variant-primary) .button:hover:focus*/.button-variant-primary.sc-ic-button-h .button.sc-ic-button:hover:focus{background-color:var(--button-default-hover);border-color:var(--button-default-hover)}/*!@:host(.button-variant-primary:not(.light)) .button:hover:focus,\n:host(.button-variant-primary:not(.light)) ::slotted(a:hover:focus)*/.button-variant-primary.sc-ic-button-h:not(.light) .button.sc-ic-button:hover:focus,.sc-ic-button-h.button-variant-primary:not(.light).sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-primary:not(.light) .sc-ic-button-s>a:hover:focus{color:var(--ic-architectural-white)}/*!@:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button*/.button-variant-primary.sc-ic-button-h .button.sc-ic-button:active:not(:focus),.button-variant-primary.loading.sc-ic-button-h .button.sc-ic-button{background-color:var(--button-default-active)}/*!@:host(.button-variant-primary) .button:active:focus*/.button-variant-primary.sc-ic-button-h .button.sc-ic-button:active:focus{background-color:var(--button-default-active)}/*!@:host(.button-variant-primary) .button:active*/.button-variant-primary.sc-ic-button-h .button.sc-ic-button:active{background-color:var(--button-default-active)}/*!@:host(.button-variant-primary:not(.light)) .button:active,\n:host(.button-variant-primary:not(.light)) ::slotted(a:active)*/.button-variant-primary.sc-ic-button-h:not(.light) .button.sc-ic-button:active,.sc-ic-button-h.button-variant-primary:not(.light).sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-primary:not(.light) .sc-ic-button-s>a:active{color:var(--ic-architectural-white)}/*!@:host(.button-variant-primary.disabled) .button,\n:host(.button-variant-primary.disabled) ::slotted(a)*/.button-variant-primary.disabled.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-primary.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.disabled .sc-ic-button-s>a{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}/*!@:host(.button-variant-primary.light.disabled) .button,\n:host(.button-variant-primary.light.disabled) ::slotted(a)*/.button-variant-primary.light.disabled.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-primary.light.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.light.disabled .sc-ic-button-s>a{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}/*!@:host(.button-variant-secondary) .button,\n:host(.button-variant-secondary) ::slotted(a)*/.button-variant-secondary.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a{border:var(--ic-border-width) solid var(--button-default);color:var(--button-default)}/*!@:host(.button-variant-secondary) .button:hover:not(:focus),\n:host(.button-variant-secondary) .button:hover:focus,\n:host(.button-variant-secondary) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-secondary) ::slotted(a:hover:focus)*/.button-variant-secondary.sc-ic-button-h .button.sc-ic-button:hover:not(:focus),.button-variant-secondary.sc-ic-button-h .button.sc-ic-button:hover:focus,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:hover:focus{background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}/*!@:host(.button-variant-secondary) .button:active:not(:focus),\n:host(.button-variant-secondary) .button:active:focus,\n:host(.button-variant-secondary) .button:active,\n:host(.button-variant-secondary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-secondary) ::slotted(a:active:focus),\n:host(.button-variant-secondary) ::slotted(a:active)*/.button-variant-secondary.sc-ic-button-h .button.sc-ic-button:active:not(:focus),.button-variant-secondary.sc-ic-button-h .button.sc-ic-button:active:focus,.button-variant-secondary.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:active{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}/*!@:host(.button-variant-secondary.loading) .button*/.button-variant-secondary.loading.sc-ic-button-h .button.sc-ic-button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}/*!@:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active,\n:host(.button-variant-secondary.disabled) ::slotted(a),\n:host(.button-variant-secondary.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.disabled) ::slotted(a:active)*/.button-variant-secondary.disabled.sc-ic-button-h .button.sc-ic-button,.button-variant-secondary.disabled.sc-ic-button-h .button.sc-ic-button:hover,.button-variant-secondary.disabled.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-secondary.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-secondary.disabled .sc-ic-button-s>a:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}/*!@:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active,\n:host(.button-variant-secondary.light.disabled) ::slotted(a),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:active)*/.button-variant-secondary.light.disabled.sc-ic-button-h .button.sc-ic-button,.button-variant-secondary.light.disabled.sc-ic-button-h .button.sc-ic-button:hover,.button-variant-secondary.light.disabled.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-secondary.light.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.light.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.light.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.light.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.light.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-secondary.light.disabled .sc-ic-button-s>a:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}/*!@:host(.button-variant-tertiary) .button,\n:host(.button-variant-tertiary) ::slotted(a)*/.button-variant-tertiary.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a{color:var(--button-default)}/*!@:host(.button-variant-tertiary) .button:hover:not(:focus),\n:host(.button-variant-tertiary) .button:hover:focus,\n:host(.button-variant-tertiary) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-tertiary) ::slotted(a:hover:focus)*/.button-variant-tertiary.sc-ic-button-h .button.sc-ic-button:hover:not(:focus),.button-variant-tertiary.sc-ic-button-h .button.sc-ic-button:hover:focus,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:hover:focus{background-color:var(--button-default-background-hover);color:var(--button-default-hover)}/*!@:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary) .button:active:focus,\n:host(.button-variant-tertiary) .button:active,\n:host(.button-variant-tertiary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-tertiary) ::slotted(a:active:focus),\n:host(.button-variant-tertiary) ::slotted(a:active),\n:host(.button-variant-tertiary.loading) .button*/.button-variant-tertiary.sc-ic-button-h .button.sc-ic-button:active:not(:focus),.button-variant-tertiary.sc-ic-button-h .button.sc-ic-button:active:focus,.button-variant-tertiary.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:active,.button-variant-tertiary.loading.sc-ic-button-h .button.sc-ic-button{background-color:var(--button-default-background-active);color:var(--button-default-active)}/*!@:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active,\n:host(.button-variant-tertiary.disabled) ::slotted(a),\n:host(.button-variant-tertiary.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.disabled) ::slotted(a:active)*/.button-variant-tertiary.disabled.sc-ic-button-h .button.sc-ic-button,.button-variant-tertiary.disabled.sc-ic-button-h .button.sc-ic-button:hover,.button-variant-tertiary.disabled.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-tertiary.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary.disabled .sc-ic-button-s>a:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}/*!@:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active,\n:host(.button-variant-tertiary.light.disabled) ::slotted(a),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:active)*/.button-variant-tertiary.light.disabled.sc-ic-button-h .button.sc-ic-button,.button-variant-tertiary.light.disabled.sc-ic-button-h .button.sc-ic-button:hover,.button-variant-tertiary.light.disabled.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-tertiary.light.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.light.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.light.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.light.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.light.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary.light.disabled .sc-ic-button-s>a:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}/*!@:host(.button-variant-icon) .button,\n:host(.button-variant-icon) ::slotted(a)*/.button-variant-icon.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a{color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}/*!@:host(.button-variant-icon) .icon-container*/.button-variant-icon.sc-ic-button-h .icon-container.sc-ic-button{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}/*!@:host(.button-variant-icon) .button:hover:not(:focus),\n:host(.button-variant-icon) .button:hover:focus,\n:host(.button-variant-icon) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-icon) ::slotted(a:hover:focus)*/.button-variant-icon.sc-ic-button-h .button.sc-ic-button:hover:not(:focus),.button-variant-icon.sc-ic-button-h .button.sc-ic-button:hover:focus,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a:hover:focus{background-color:var(--button-default-background-hover);color:var(--button-default-hover)}/*!@:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon) ::slotted(a:active:not(:focus)),\n:host(.button-variant-icon.loading) .button*/.button-variant-icon.sc-ic-button-h .button.sc-ic-button:active:not(:focus),.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a:active:not(:focus),.button-variant-icon.loading.sc-ic-button-h .button.sc-ic-button{background-color:var(--button-default-background-active);color:var(--button-default-active)}/*!@:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active,\n:host(.button-variant-icon.disabled) ::slotted(a),\n:host(.button-variant-icon.disabled) ::slotted(a:hover),\n:host(.button-variant-icon.disabled) ::slotted(a:active)*/.button-variant-icon.disabled.sc-ic-button-h .button.sc-ic-button,.button-variant-icon.disabled.sc-ic-button-h .button.sc-ic-button:hover,.button-variant-icon.disabled.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-icon.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-icon.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-icon.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-icon.disabled .sc-ic-button-s>a:active{color:var(--ic-architectural-300);background:none}/*!@:host(.button-variant-destructive) .button,\n:host(.button-variant-destructive) ::slotted(a)*/.button-variant-destructive.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-destructive.sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive .sc-ic-button-s>a{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}/*!@:host(.button-variant-destructive) .button:hover:not(:focus),\n:host(.button-variant-destructive) .button:hover:focus*/.button-variant-destructive.sc-ic-button-h .button.sc-ic-button:hover:not(:focus),.button-variant-destructive.sc-ic-button-h .button.sc-ic-button:hover:focus{background-color:var(--ic-action-destructive-hover)}/*!@:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive) .button:active:focus,\n:host(.button-variant-destructive.loading) .button*/.button-variant-destructive.sc-ic-button-h .button.sc-ic-button:active:not(:focus),.button-variant-destructive.sc-ic-button-h .button.sc-ic-button:active:focus,.button-variant-destructive.loading.sc-ic-button-h .button.sc-ic-button{background-color:var(--ic-action-destructive-active)}/*!@:host(.button-variant-destructive.disabled) .button,\n:host(.button-variant-destructive.disabled) ::slotted(a)*/.button-variant-destructive.disabled.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-destructive.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive.disabled .sc-ic-button-s>a{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}/*!@:host(.button-size-default) .button*/.button-size-default.sc-ic-button-h .button.sc-ic-button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}/*!@:host(.button-size-small) .button*/.button-size-small.sc-ic-button-h .button.sc-ic-button{height:var(--height, var(--ic-space-xl));padding:var(--ic-space-xxs) var(--ic-space-md)}/*!@:host(.button-size-large) .button*/.button-size-large.sc-ic-button-h .button.sc-ic-button{height:var(--height, var(--ic-space-xxl));padding:var(--ic-space-sm) var(--ic-space-md)}/*!@:host(.button-size-default.button-variant-icon) .button,\n:host(.button-size-default.button-variant-icon) ::slotted(a)*/.button-size-default.button-variant-icon.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-size-default.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-size-default.button-variant-icon .sc-ic-button-s>a{height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}/*!@:host(.button-size-small.button-variant-icon) .button,\n:host(.button-size-small.button-variant-icon) ::slotted(a)*/.button-size-small.button-variant-icon.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-size-small.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-size-small.button-variant-icon .sc-ic-button-s>a{height:var(--height, var(--ic-space-lg));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}/*!@:host(.button-size-large.button-variant-icon) .button,\n:host(.button-size-large.button-variant-icon) ::slotted(a)*/.button-size-large.button-variant-icon.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-size-large.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-size-large.button-variant-icon .sc-ic-button-s>a{height:var(--height, 2.5rem);width:2.5rem;padding:var(--ic-space-xs)}/*!@:host(.full-width),\n:host(.full-width) .button,\n:host(.full-width) ::slotted(a)*/.full-width.sc-ic-button-h,.full-width.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.full-width.sc-ic-button-s>a,.sc-ic-button-h.full-width .sc-ic-button-s>a{width:100%}/*!@div.loading-container*/div.loading-container.sc-ic-button{position:relative;align-items:center;width:100%}/*!@ic-loading-indicator*/ic-loading-indicator.sc-ic-button{--outer-color:transparent}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}/*!@div.icon-container*/div.icon-container.sc-ic-button{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center;margin-right:var(--ic-space-xs)}/*!@div.right-icon*/div.right-icon.sc-ic-button{margin-right:auto;margin-left:var(--ic-space-xs)}/*!@::slotted(:not(ic-badge))*/.sc-ic-button-s>:not(ic-badge){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}/*!@:host(.button-variant-icon) .button .icon-container*/.button-variant-icon.sc-ic-button-h .button.sc-ic-button .icon-container.sc-ic-button{margin:0;pointer-events:none}/*!@:host(.search-submit-button) ::slotted(svg)*/.sc-ic-button-h.search-submit-button .sc-ic-button-s>svg{--icon-height:1.25rem;--icon-width:1.25rem}/*!@:host(.search-submit-button-small) ::slotted(svg)*/.sc-ic-button-h.search-submit-button-small .sc-ic-button-s>svg{--icon-height:1rem;--icon-width:1rem}/*!@:host(.clear-button)*/.clear-button.sc-ic-button-h{margin:0 var(--ic-space-xxs)}/*!@:host(.clear-button) .button:focus*/.clear-button.sc-ic-button-h .button.sc-ic-button:focus{box-shadow:none}/*!@:host(.search-submit-button) .button:focus*/.search-submit-button.sc-ic-button-h .button.sc-ic-button:focus{box-shadow:none}/*!@:host(.search-submit-button) .button:not(:active):focus*/.search-submit-button.sc-ic-button-h .button.sc-ic-button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}/*!@:host(.search-submit-button)*/.search-submit-button.sc-ic-button-h{display:flex;align-items:center;margin:0 var(--ic-space-xxs)}/*!@:host(.menu-close-button) ::slotted(svg)*/.sc-ic-button-h.menu-close-button .sc-ic-button-s>svg{--icon-height:0.875rem;--icon-width:0.875rem}/*!@:host(.popout-menu-button) .button*/.popout-menu-button.sc-ic-button-h .button.sc-ic-button{height:var(--height);justify-content:left;border-radius:0;white-space:pre-line;text-align:start}/*!@:host(.popout-menu-button) div.icon-container*/.popout-menu-button.sc-ic-button-h div.icon-container.sc-ic-button{flex:none}/*!@:host(.popout-menu-button) .button:focus*/.popout-menu-button.sc-ic-button-h .button.sc-ic-button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}/*!@.ic-button-describedby*/.ic-button-describedby.sc-ic-button{display:none}/*!@:host .ic-tooltip*/.sc-ic-button-h .ic-tooltip.sc-ic-button{display:block}/*!@:host .arrow-dropdown*/.sc-ic-button-h .arrow-dropdown.sc-ic-button{margin-top:auto}/*!@:host .dropdown-expanded*/.sc-ic-button-h .dropdown-expanded.sc-ic-button{transform:rotate(180deg);margin-bottom:var(--ic-space-xxxs)}/*!@:host(.dropdown-no-icon) .button*/.dropdown-no-icon.sc-ic-button-h .button.sc-ic-button{padding-right:var(--ic-space-xs)}/*!@slot[name=\"router-item\"]::slotted(a)*/slot[name=\"router-item\"].sc-ic-button-s>a{pointer-events:all}/*!@::slotted(a)*/.sc-ic-button-s>a{font-size:0.875rem !important;border:none !important;vertical-align:middle !important}/*!@:host(.white-background) ::slotted(a)*/.sc-ic-button-h.white-background.sc-ic-button-s>a,.sc-ic-button-h.white-background .sc-ic-button-s>a{background-color:var(--ic-architectural-white) !important}/*!@:host(.button-variant-primary) ::slotted(a)*/.sc-ic-button-h.button-variant-primary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary .sc-ic-button-s>a{background-color:var(--button-default) !important}/*!@:host(.button-variant-primary) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-primary) ::slotted(a:hover:focus)*/.sc-ic-button-h.button-variant-primary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-primary.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-primary .sc-ic-button-s>a:hover:focus{background-color:var(--button-default-hover) !important}/*!@:host(.button-variant-primary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-primary) ::slotted(a:active),\n:host(.button-variant-primary) ::sloted(a:active:focus)*/.sc-ic-button-h.button-variant-primary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-primary .sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-primary .sc-ic-button-s>a:active,.button-variant-primary.sc-ic-button-h .sc-ic-button::sloted(a:active:focus){background-color:var(--button-default-active) !important}/*!@:host(.button-variant-primary.disabled) ::slotted(a),\n:host(.button-variant-destructive.disabled) ::slotted(a)*/.sc-ic-button-h.button-variant-primary.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive.disabled .sc-ic-button-s>a{background:var(--ic-architectural-200) !important}/*!@:host(.button-variant-primary.light.disabled) ::slotted(a)*/.sc-ic-button-h.button-variant-primary.light.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.light.disabled .sc-ic-button-s>a{background:var(--ic-architectural-600) !important}/*!@:host(.button-variant-secondary) ::slotted(a)*/.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a{border:var(--ic-border-width) solid var(--button-default) !important}/*!@:host(.button-variant-secondary) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-secondary) ::slotted(a:hover:focus)*/.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:hover:focus{background-color:var(--button-default-background-hover) !important;border-color:var(--button-default-hover) !important}/*!@:host(.button-variant-secondary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-secondary) ::slotted(a:active:focus),\n:host(.button-variant-secondary) ::slotted(a:active)*/.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:active{border-color:var(--button-default-active) !important;background-color:var(--button-default-background-active) !important}/*!@:host(.button-variant-secondary.disabled) ::slotted(a),\n:host(.button-variant-secondary.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.disabled) ::slotted(a:active),\n:host(.button-variant-tertiary.disabled) ::slotted(a),\n:host(.button-variant-tertiary.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.disabled) ::slotted(a:active)*/.sc-ic-button-h.button-variant-secondary.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-secondary.disabled .sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary.disabled .sc-ic-button-s>a:active{border-color:var(--ic-architectural-300) !important;background:none !important}/*!@:host(.button-variant-secondary.light.disabled) ::slotted(a),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:active),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:active)*/.sc-ic-button-h.button-variant-secondary.light.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.light.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.light.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.light.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.light.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-secondary.light.disabled .sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary.light.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.light.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.light.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.light.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.light.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary.light.disabled .sc-ic-button-s>a:active{border-color:var(--ic-architectural-500) !important;background:none !important}/*!@:host(.button-variant-tertiary) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-tertiary) ::slotted(a:hover:focus),\n:host(.button-variant-icon) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-icon) ::slotted(a:hover:focus)*/.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a:hover:focus{background-color:var(--button-default-background-hover) !important}/*!@:host(.button-variant-tertiary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-tertiary) ::slotted(a:active:focus),\n:host(.button-variant-tertiary) ::slotted(a:active),\n:host(.button-variant-icon) ::slotted(a:active:not(:focus))*/.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a:active:not(:focus){background-color:var(--button-default-background-active) !important}/*!@:host(.button-variant-icon.disabled) ::slotted(a),\n:host(.button-variant-icon.disabled) ::slotted(a:hover),\n:host(.button-variant-icon.disabled) ::slotted(a:active)*/.sc-ic-button-h.button-variant-icon.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-icon.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-icon.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-icon.disabled .sc-ic-button-s>a:active{background:none !important}/*!@:host(.button-variant-destructive) ::slotted(a)*/.sc-ic-button-h.button-variant-destructive.sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive .sc-ic-button-s>a{background-color:var(--ic-action-destructive) !important}/*!@:host(.button-variant-destructive) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-destructive) ::slotted(a:hover:focus)*/.sc-ic-button-h.button-variant-destructive.sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-destructive.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-destructive .sc-ic-button-s>a:hover:focus{background-color:var(--ic-action-destructive-hover) !important}/*!@:host(.button-variant-destructive) ::slotted(a:active:not(:focus)),\n:host(.button-variant-destructive) ::slotted(a:active:focus)*/.sc-ic-button-h.button-variant-destructive.sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive .sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-destructive.sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-destructive .sc-ic-button-s>a:active:focus{background-color:var(--ic-action-destructive-active) !important}/*!@:host(.button-size-default) ::slotted(a)*/.sc-ic-button-h.button-size-default .sc-ic-button-s>a{height:var(--height, 2.5rem) !important;padding:var(--ic-space-xs) var(--ic-space-md) !important}/*!@:host(.button-size-small) ::slotted(a)*/.sc-ic-button-h.button-size-small .sc-ic-button-s>a{height:var(--height, var(--ic-space-xl)) !important;padding:var(--ic-space-xxs) var(--ic-space-md) !important}/*!@:host(.button-size-large) ::slotted(a)*/.sc-ic-button-h.button-size-large .sc-ic-button-s>a{height:var(--height, var(--ic-space-xxl)) !important;padding:var(--ic-space-sm) var(--ic-space-md) !important}/*!@:host(.button-size-default.button-variant-icon) ::slotted(a)*/.sc-ic-button-h.button-size-default.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-size-default.button-variant-icon .sc-ic-button-s>a{height:var(--height, var(--ic-space-xl)) !important;padding:0.375rem !important}/*!@:host(.button-size-small.button-variant-icon) ::slotted(a)*/.sc-ic-button-h.button-size-small.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-size-small.button-variant-icon .sc-ic-button-s>a{padding:var(--ic-space-xxs) !important}/*!@:host(.button-size-large.button-variant-icon) ::slotted(a)*/.sc-ic-button-h.button-size-large.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-size-large.button-variant-icon .sc-ic-button-s>a{padding:var(--ic-space-xs) !important}@media (forced-colors: active){/*!@.button,\n ::slotted(a)*/.button.sc-ic-button,.sc-ic-button-s>a{border:0.125rem solid transparent !important}}/*!@:host(.flip) ::slotted(svg)*/.sc-ic-button-h.flip .sc-ic-button-s>svg{transform:scaleX(-1)}";
|
9024
|
+
const icButtonCss = "/*!@html*/html.sc-ic-button{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-button{margin:0}/*!@main*/main.sc-ic-button{display:block}/*!@h1*/h1.sc-ic-button{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-button{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-button{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-button{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-button{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-button,strong.sc-ic-button{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-button,kbd.sc-ic-button,samp.sc-ic-button{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-button{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-button,sup.sc-ic-button{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-button{bottom:-0.25em}/*!@sup*/sup.sc-ic-button{top:-0.5em}/*!@img*/img.sc-ic-button{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-button,input.sc-ic-button,optgroup.sc-ic-button,select.sc-ic-button,textarea.sc-ic-button{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-button,input.sc-ic-button{overflow:visible}/*!@button,\nselect*/button.sc-ic-button,select.sc-ic-button{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-button,[type=\"button\"].sc-ic-button,[type=\"reset\"].sc-ic-button,[type=\"submit\"].sc-ic-button{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-button::-moz-focus-inner,[type=\"button\"].sc-ic-button::-moz-focus-inner,[type=\"reset\"].sc-ic-button::-moz-focus-inner,[type=\"submit\"].sc-ic-button::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-button:-moz-focusring,[type=\"button\"].sc-ic-button:-moz-focusring,[type=\"reset\"].sc-ic-button:-moz-focusring,[type=\"submit\"].sc-ic-button:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-button{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-button{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-button{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-button{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-button,[type=\"radio\"].sc-ic-button{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-button::-webkit-inner-spin-button,[type=\"number\"].sc-ic-button::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-button{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-button::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-button::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-button{display:block}/*!@summary*/summary.sc-ic-button{display:list-item}/*!@template*/template.sc-ic-button{display:none}/*!@[hidden]*/[hidden].sc-ic-button{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-button,body.sc-ic-button,div.sc-ic-button,span.sc-ic-button,applet.sc-ic-button,object.sc-ic-button,iframe.sc-ic-button,h1.sc-ic-button,h2.sc-ic-button,h3.sc-ic-button,h4.sc-ic-button,h5.sc-ic-button,h6.sc-ic-button,p.sc-ic-button,blockquote.sc-ic-button,pre.sc-ic-button,a.sc-ic-button,abbr.sc-ic-button,acronym.sc-ic-button,address.sc-ic-button,big.sc-ic-button,cite.sc-ic-button,code.sc-ic-button,del.sc-ic-button,dfn.sc-ic-button,em.sc-ic-button,img.sc-ic-button,ins.sc-ic-button,kbd.sc-ic-button,q.sc-ic-button,s.sc-ic-button,samp.sc-ic-button,small.sc-ic-button,strike.sc-ic-button,strong.sc-ic-button,sub.sc-ic-button,sup.sc-ic-button,tt.sc-ic-button,var.sc-ic-button,b.sc-ic-button,u.sc-ic-button,i.sc-ic-button,center.sc-ic-button,dl.sc-ic-button,dt.sc-ic-button,dd.sc-ic-button,ol.sc-ic-button,ul.sc-ic-button,li.sc-ic-button,fieldset.sc-ic-button,form.sc-ic-button,label.sc-ic-button,legend.sc-ic-button,table.sc-ic-button,caption.sc-ic-button,tbody.sc-ic-button,tfoot.sc-ic-button,thead.sc-ic-button,tr.sc-ic-button,th.sc-ic-button,td.sc-ic-button,article.sc-ic-button,aside.sc-ic-button,canvas.sc-ic-button,details.sc-ic-button,embed.sc-ic-button,figure.sc-ic-button,figcaption.sc-ic-button,footer.sc-ic-button,header.sc-ic-button,hgroup.sc-ic-button,menu.sc-ic-button,nav.sc-ic-button,output.sc-ic-button,ruby.sc-ic-button,section.sc-ic-button,summary.sc-ic-button,time.sc-ic-button,mark.sc-ic-button,audio.sc-ic-button,video.sc-ic-button{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-button-h{display:inline-block;position:relative;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--icon-width:100%;--icon-height:100%}/*!@.button,\n::slotted(a)*/.button.sc-ic-button,.sc-ic-button-s>a{font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:0.875rem;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:var(--min-width, 6.25rem);display:inline-flex;flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}/*!@:host(.with-badge) .button*/.with-badge.sc-ic-button-h .button.sc-ic-button{border-radius:0.2188rem}/*!@.button:hover,\n::slotted(a:hover)*/.button.sc-ic-button:hover,.sc-ic-button-s>a:hover{cursor:pointer}/*!@.button:focus,\n:host .button:focus,\n:host(.light) .button:focus,\n::slotted(a:focus)*/.button.sc-ic-button:focus,.sc-ic-button-h .button.sc-ic-button:focus,.light.sc-ic-button-h .button.sc-ic-button:focus,.sc-ic-button-s>a:focus{box-shadow:var(--ic-border-focus)}/*!@.button:focus-visible,\n::slotted(a:focus-visible)*/.button.sc-ic-button:focus-visible,.sc-ic-button-s>a:focus-visible{outline:var(--ic-hc-focus-outline)}/*!@:host(.dark) .button,\n:host(.dark) ::slotted(a)*/.dark.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.dark.sc-ic-button-s>a,.sc-ic-button-h.dark .sc-ic-button-s>a{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}/*!@:host(.light) .button,\n:host(.light) ::slotted(a)*/.light.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.light.sc-ic-button-s>a,.sc-ic-button-h.light .sc-ic-button-s>a{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}/*!@:host(.white-background) .button,\n:host(.white-background) ::slotted(a)*/.white-background.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.white-background.sc-ic-button-s>a,.sc-ic-button-h.white-background .sc-ic-button-s>a{--button-default-background-hover:var(--ic-action-default-bg-hover-no-alpha);--button-default-background-active:var(\n --ic-action-default-bg-active-no-alpha\n );background-color:var(--ic-architectural-white)}/*!@:host(.white-background.dark) .button,\n:host(.white-background.dark) ::slotted(a)*/.white-background.dark.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.white-background.dark.sc-ic-button-s>a,.sc-ic-button-h.white-background.dark .sc-ic-button-s>a{--button-default-background-hover:var(--ic-action-dark-bg-hover-no-alpha);--button-default-background-active:var(--ic-action-dark-bg-active-no-alpha)}/*!@:host(.button-variant-primary.light) .button,\n:host(.button-variant-primary.light) ::slotted(a)*/.button-variant-primary.light.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-primary.light.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.light .sc-ic-button-s>a{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}/*!@:host(.button-variant-primary.dark) .button,\n:host(.button-variant-primary.dark) ::slotted(a)*/.button-variant-primary.dark.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-primary.dark.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.dark .sc-ic-button-s>a{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}/*!@:host(.disabled),\n:host(.disabled) .button,\n:host(.disabled) ::slotted(a),\n:host(.loading),\n:host(.loading) .button*/.disabled.sc-ic-button-h,.disabled.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.disabled.sc-ic-button-s>a,.sc-ic-button-h.disabled .sc-ic-button-s>a,.loading.sc-ic-button-h,.loading.sc-ic-button-h .button.sc-ic-button{pointer-events:none}/*!@:host(.top-icon) .button*/.top-icon.sc-ic-button-h .button.sc-ic-button{flex-direction:column;--height:fit-content}/*!@:host(.top-icon) .button .icon-container*/.top-icon.sc-ic-button-h .button.sc-ic-button .icon-container.sc-ic-button{margin-right:0}/*!@:host(.button-variant-primary) .button,\n:host(.button-variant-primary) ::slotted(a)*/.button-variant-primary.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-primary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary .sc-ic-button-s>a{color:var(--ic-architectural-white);background-color:var(--button-default)}/*!@:host(.button-variant-primary) .button:hover:not(:focus)*/.button-variant-primary.sc-ic-button-h .button.sc-ic-button:hover:not(:focus){background-color:var(--button-default-hover)}/*!@:host(.button-variant-primary) .button:hover:focus*/.button-variant-primary.sc-ic-button-h .button.sc-ic-button:hover:focus{background-color:var(--button-default-hover);border-color:var(--button-default-hover)}/*!@:host(.button-variant-primary:not(.light)) .button:hover:focus,\n:host(.button-variant-primary:not(.light)) ::slotted(a:hover:focus)*/.button-variant-primary.sc-ic-button-h:not(.light) .button.sc-ic-button:hover:focus,.sc-ic-button-h.button-variant-primary:not(.light).sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-primary:not(.light) .sc-ic-button-s>a:hover:focus{color:var(--ic-architectural-white)}/*!@:host(.button-variant-primary) .button:active:not(:focus),\n:host(.button-variant-primary.loading) .button*/.button-variant-primary.sc-ic-button-h .button.sc-ic-button:active:not(:focus),.button-variant-primary.loading.sc-ic-button-h .button.sc-ic-button{background-color:var(--button-default-active)}/*!@:host(.button-variant-primary) .button:active:focus*/.button-variant-primary.sc-ic-button-h .button.sc-ic-button:active:focus{background-color:var(--button-default-active)}/*!@:host(.button-variant-primary) .button:active*/.button-variant-primary.sc-ic-button-h .button.sc-ic-button:active{background-color:var(--button-default-active)}/*!@:host(.button-variant-primary:not(.light)) .button:active,\n:host(.button-variant-primary:not(.light)) ::slotted(a:active)*/.button-variant-primary.sc-ic-button-h:not(.light) .button.sc-ic-button:active,.sc-ic-button-h.button-variant-primary:not(.light).sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-primary:not(.light) .sc-ic-button-s>a:active{color:var(--ic-architectural-white)}/*!@:host(.button-variant-primary.disabled) .button,\n:host(.button-variant-primary.disabled) ::slotted(a)*/.button-variant-primary.disabled.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-primary.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.disabled .sc-ic-button-s>a{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}/*!@:host(.button-variant-primary.light.disabled) .button,\n:host(.button-variant-primary.light.disabled) ::slotted(a)*/.button-variant-primary.light.disabled.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-primary.light.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.light.disabled .sc-ic-button-s>a{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}/*!@:host(.button-variant-secondary) .button,\n:host(.button-variant-secondary) ::slotted(a)*/.button-variant-secondary.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a{border:var(--ic-border-width) solid var(--button-default);color:var(--button-default)}/*!@:host(.button-variant-secondary) .button:hover:not(:focus),\n:host(.button-variant-secondary) .button:hover:focus,\n:host(.button-variant-secondary) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-secondary) ::slotted(a:hover:focus)*/.button-variant-secondary.sc-ic-button-h .button.sc-ic-button:hover:not(:focus),.button-variant-secondary.sc-ic-button-h .button.sc-ic-button:hover:focus,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:hover:focus{background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}/*!@:host(.button-variant-secondary) .button:active:not(:focus),\n:host(.button-variant-secondary) .button:active:focus,\n:host(.button-variant-secondary) .button:active,\n:host(.button-variant-secondary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-secondary) ::slotted(a:active:focus),\n:host(.button-variant-secondary) ::slotted(a:active)*/.button-variant-secondary.sc-ic-button-h .button.sc-ic-button:active:not(:focus),.button-variant-secondary.sc-ic-button-h .button.sc-ic-button:active:focus,.button-variant-secondary.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:active{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}/*!@:host(.button-variant-secondary.loading) .button*/.button-variant-secondary.loading.sc-ic-button-h .button.sc-ic-button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}/*!@:host(.button-variant-secondary.disabled) .button,\n:host(.button-variant-secondary.disabled) .button:hover,\n:host(.button-variant-secondary.disabled) .button:active,\n:host(.button-variant-secondary.disabled) ::slotted(a),\n:host(.button-variant-secondary.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.disabled) ::slotted(a:active)*/.button-variant-secondary.disabled.sc-ic-button-h .button.sc-ic-button,.button-variant-secondary.disabled.sc-ic-button-h .button.sc-ic-button:hover,.button-variant-secondary.disabled.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-secondary.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-secondary.disabled .sc-ic-button-s>a:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}/*!@:host(.button-variant-secondary.light.disabled) .button,\n:host(.button-variant-secondary.light.disabled) .button:hover,\n:host(.button-variant-secondary.light.disabled) .button:active,\n:host(.button-variant-secondary.light.disabled) ::slotted(a),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:active)*/.button-variant-secondary.light.disabled.sc-ic-button-h .button.sc-ic-button,.button-variant-secondary.light.disabled.sc-ic-button-h .button.sc-ic-button:hover,.button-variant-secondary.light.disabled.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-secondary.light.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.light.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.light.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.light.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.light.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-secondary.light.disabled .sc-ic-button-s>a:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}/*!@:host(.button-variant-tertiary) .button,\n:host(.button-variant-tertiary) ::slotted(a)*/.button-variant-tertiary.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a{color:var(--button-default)}/*!@:host(.button-variant-tertiary) .button:hover:not(:focus),\n:host(.button-variant-tertiary) .button:hover:focus,\n:host(.button-variant-tertiary) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-tertiary) ::slotted(a:hover:focus)*/.button-variant-tertiary.sc-ic-button-h .button.sc-ic-button:hover:not(:focus),.button-variant-tertiary.sc-ic-button-h .button.sc-ic-button:hover:focus,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:hover:focus{background-color:var(--button-default-background-hover);color:var(--button-default-hover)}/*!@:host(.button-variant-tertiary) .button:active:not(:focus),\n:host(.button-variant-tertiary) .button:active:focus,\n:host(.button-variant-tertiary) .button:active,\n:host(.button-variant-tertiary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-tertiary) ::slotted(a:active:focus),\n:host(.button-variant-tertiary) ::slotted(a:active),\n:host(.button-variant-tertiary.loading) .button*/.button-variant-tertiary.sc-ic-button-h .button.sc-ic-button:active:not(:focus),.button-variant-tertiary.sc-ic-button-h .button.sc-ic-button:active:focus,.button-variant-tertiary.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:active,.button-variant-tertiary.loading.sc-ic-button-h .button.sc-ic-button{background-color:var(--button-default-background-active);color:var(--button-default-active)}/*!@:host(.button-variant-tertiary.disabled) .button,\n:host(.button-variant-tertiary.disabled) .button:hover,\n:host(.button-variant-tertiary.disabled) .button:active,\n:host(.button-variant-tertiary.disabled) ::slotted(a),\n:host(.button-variant-tertiary.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.disabled) ::slotted(a:active)*/.button-variant-tertiary.disabled.sc-ic-button-h .button.sc-ic-button,.button-variant-tertiary.disabled.sc-ic-button-h .button.sc-ic-button:hover,.button-variant-tertiary.disabled.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-tertiary.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary.disabled .sc-ic-button-s>a:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}/*!@:host(.button-variant-tertiary.light.disabled) .button,\n:host(.button-variant-tertiary.light.disabled) .button:hover,\n:host(.button-variant-tertiary.light.disabled) .button:active,\n:host(.button-variant-tertiary.light.disabled) ::slotted(a),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:active)*/.button-variant-tertiary.light.disabled.sc-ic-button-h .button.sc-ic-button,.button-variant-tertiary.light.disabled.sc-ic-button-h .button.sc-ic-button:hover,.button-variant-tertiary.light.disabled.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-tertiary.light.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.light.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.light.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.light.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.light.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary.light.disabled .sc-ic-button-s>a:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}/*!@:host(.button-variant-icon) .button,\n:host(.button-variant-icon) ::slotted(a)*/.button-variant-icon.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a{color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}/*!@:host(.button-variant-icon) .icon-container*/.button-variant-icon.sc-ic-button-h .icon-container.sc-ic-button{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}/*!@:host(.button-variant-icon) .button:hover:not(:focus),\n:host(.button-variant-icon) .button:hover:focus,\n:host(.button-variant-icon) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-icon) ::slotted(a:hover:focus)*/.button-variant-icon.sc-ic-button-h .button.sc-ic-button:hover:not(:focus),.button-variant-icon.sc-ic-button-h .button.sc-ic-button:hover:focus,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a:hover:focus{background-color:var(--button-default-background-hover);color:var(--button-default-hover)}/*!@:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon) ::slotted(a:active:not(:focus)),\n:host(.button-variant-icon.loading) .button*/.button-variant-icon.sc-ic-button-h .button.sc-ic-button:active:not(:focus),.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a:active:not(:focus),.button-variant-icon.loading.sc-ic-button-h .button.sc-ic-button{background-color:var(--button-default-background-active);color:var(--button-default-active)}/*!@:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) .button:hover,\n:host(.button-variant-icon.disabled) .button:active,\n:host(.button-variant-icon.disabled) ::slotted(a),\n:host(.button-variant-icon.disabled) ::slotted(a:hover),\n:host(.button-variant-icon.disabled) ::slotted(a:active)*/.button-variant-icon.disabled.sc-ic-button-h .button.sc-ic-button,.button-variant-icon.disabled.sc-ic-button-h .button.sc-ic-button:hover,.button-variant-icon.disabled.sc-ic-button-h .button.sc-ic-button:active,.sc-ic-button-h.button-variant-icon.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-icon.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-icon.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-icon.disabled .sc-ic-button-s>a:active{color:var(--ic-architectural-300);background:none}/*!@:host(.button-variant-destructive) .button,\n:host(.button-variant-destructive) ::slotted(a)*/.button-variant-destructive.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-destructive.sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive .sc-ic-button-s>a{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}/*!@:host(.button-variant-destructive) .button:hover:not(:focus),\n:host(.button-variant-destructive) .button:hover:focus*/.button-variant-destructive.sc-ic-button-h .button.sc-ic-button:hover:not(:focus),.button-variant-destructive.sc-ic-button-h .button.sc-ic-button:hover:focus{background-color:var(--ic-action-destructive-hover)}/*!@:host(.button-variant-destructive) .button:active:not(:focus),\n:host(.button-variant-destructive) .button:active:focus,\n:host(.button-variant-destructive.loading) .button*/.button-variant-destructive.sc-ic-button-h .button.sc-ic-button:active:not(:focus),.button-variant-destructive.sc-ic-button-h .button.sc-ic-button:active:focus,.button-variant-destructive.loading.sc-ic-button-h .button.sc-ic-button{background-color:var(--ic-action-destructive-active)}/*!@:host(.button-variant-destructive.disabled) .button,\n:host(.button-variant-destructive.disabled) ::slotted(a)*/.button-variant-destructive.disabled.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-variant-destructive.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive.disabled .sc-ic-button-s>a{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}/*!@:host(.button-size-default) .button*/.button-size-default.sc-ic-button-h .button.sc-ic-button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}/*!@:host(.button-size-small) .button*/.button-size-small.sc-ic-button-h .button.sc-ic-button{height:var(--height, var(--ic-space-xl));padding:var(--ic-space-xxs) var(--ic-space-md)}/*!@:host(.button-size-large) .button*/.button-size-large.sc-ic-button-h .button.sc-ic-button{height:var(--height, var(--ic-space-xxl));padding:var(--ic-space-sm) var(--ic-space-md)}/*!@:host(.button-size-default.button-variant-icon) .button,\n:host(.button-size-default.button-variant-icon) ::slotted(a)*/.button-size-default.button-variant-icon.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-size-default.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-size-default.button-variant-icon .sc-ic-button-s>a{height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}/*!@:host(.button-size-small.button-variant-icon) .button,\n:host(.button-size-small.button-variant-icon) ::slotted(a)*/.button-size-small.button-variant-icon.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-size-small.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-size-small.button-variant-icon .sc-ic-button-s>a{height:var(--height, var(--ic-space-lg));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}/*!@:host(.button-size-large.button-variant-icon) .button,\n:host(.button-size-large.button-variant-icon) ::slotted(a)*/.button-size-large.button-variant-icon.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.button-size-large.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-size-large.button-variant-icon .sc-ic-button-s>a{height:var(--height, 2.5rem);width:2.5rem;padding:var(--ic-space-xs)}/*!@:host(.full-width),\n:host(.full-width) .button,\n:host(.full-width) ::slotted(a)*/.full-width.sc-ic-button-h,.full-width.sc-ic-button-h .button.sc-ic-button,.sc-ic-button-h.full-width.sc-ic-button-s>a,.sc-ic-button-h.full-width .sc-ic-button-s>a{width:100%}/*!@div.loading-container*/div.loading-container.sc-ic-button{position:relative;align-items:center;width:100%}/*!@ic-loading-indicator*/ic-loading-indicator.sc-ic-button{--outer-color:transparent}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}/*!@div.icon-container*/div.icon-container.sc-ic-button{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center;margin-right:var(--ic-space-xs)}/*!@div.right-icon*/div.right-icon.sc-ic-button{margin-right:auto;margin-left:var(--ic-space-xs)}/*!@::slotted(:not(ic-badge))*/.sc-ic-button-s>:not(ic-badge){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}/*!@:host(.button-variant-icon) .button .icon-container*/.button-variant-icon.sc-ic-button-h .button.sc-ic-button .icon-container.sc-ic-button{margin:0;pointer-events:none}/*!@:host(.search-submit-button) ::slotted(svg)*/.sc-ic-button-h.search-submit-button .sc-ic-button-s>svg{--icon-height:1.25rem;--icon-width:1.25rem}/*!@:host(.search-submit-button-small) ::slotted(svg)*/.sc-ic-button-h.search-submit-button-small .sc-ic-button-s>svg{--icon-height:1rem;--icon-width:1rem}/*!@:host(.clear-button)*/.clear-button.sc-ic-button-h{margin:0 var(--ic-space-xxs)}/*!@:host(.clear-button) .button:focus,\n:host(.calendar-button) .button:focus*/.clear-button.sc-ic-button-h .button.sc-ic-button:focus,.calendar-button.sc-ic-button-h .button.sc-ic-button:focus{box-shadow:none}/*!@:host(.search-submit-button) .button:focus*/.search-submit-button.sc-ic-button-h .button.sc-ic-button:focus{box-shadow:none}/*!@:host(.search-submit-button) .button:not(:active):focus*/.search-submit-button.sc-ic-button-h .button.sc-ic-button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}/*!@:host(.search-submit-button)*/.search-submit-button.sc-ic-button-h{display:flex;align-items:center;margin:0 var(--ic-space-xxs)}/*!@:host(.menu-close-button) ::slotted(svg)*/.sc-ic-button-h.menu-close-button .sc-ic-button-s>svg{--icon-height:0.875rem;--icon-width:0.875rem}/*!@:host(.popout-menu-button) .button*/.popout-menu-button.sc-ic-button-h .button.sc-ic-button{height:var(--height);justify-content:left;border-radius:0;white-space:pre-line;text-align:start}/*!@:host(.popout-menu-button) div.icon-container*/.popout-menu-button.sc-ic-button-h div.icon-container.sc-ic-button{flex:none}/*!@:host(.popout-menu-button) .button:focus*/.popout-menu-button.sc-ic-button-h .button.sc-ic-button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}/*!@.ic-button-describedby*/.ic-button-describedby.sc-ic-button{display:none}/*!@:host .ic-tooltip*/.sc-ic-button-h .ic-tooltip.sc-ic-button{display:block}/*!@:host .arrow-dropdown*/.sc-ic-button-h .arrow-dropdown.sc-ic-button{margin-top:auto}/*!@:host .dropdown-expanded*/.sc-ic-button-h .dropdown-expanded.sc-ic-button{transform:rotate(180deg);margin-bottom:var(--ic-space-xxxs)}/*!@:host(.dropdown-no-icon) .button*/.dropdown-no-icon.sc-ic-button-h .button.sc-ic-button{padding-right:var(--ic-space-xs)}/*!@slot[name=\"router-item\"]::slotted(a)*/slot[name=\"router-item\"].sc-ic-button-s>a{pointer-events:all}/*!@::slotted(a)*/.sc-ic-button-s>a{font-size:0.875rem !important;border:none !important;vertical-align:middle !important}/*!@:host(.white-background) ::slotted(a)*/.sc-ic-button-h.white-background.sc-ic-button-s>a,.sc-ic-button-h.white-background .sc-ic-button-s>a{background-color:var(--ic-architectural-white) !important}/*!@:host(.button-variant-primary) ::slotted(a)*/.sc-ic-button-h.button-variant-primary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary .sc-ic-button-s>a{background-color:var(--button-default) !important}/*!@:host(.button-variant-primary) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-primary) ::slotted(a:hover:focus)*/.sc-ic-button-h.button-variant-primary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-primary.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-primary .sc-ic-button-s>a:hover:focus{background-color:var(--button-default-hover) !important}/*!@:host(.button-variant-primary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-primary) ::slotted(a:active),\n:host(.button-variant-primary) ::sloted(a:active:focus)*/.sc-ic-button-h.button-variant-primary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-primary .sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-primary .sc-ic-button-s>a:active,.button-variant-primary.sc-ic-button-h .sc-ic-button::sloted(a:active:focus){background-color:var(--button-default-active) !important}/*!@:host(.button-variant-primary.disabled) ::slotted(a),\n:host(.button-variant-destructive.disabled) ::slotted(a)*/.sc-ic-button-h.button-variant-primary.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive.disabled .sc-ic-button-s>a{background:var(--ic-architectural-200) !important}/*!@:host(.button-variant-primary.light.disabled) ::slotted(a)*/.sc-ic-button-h.button-variant-primary.light.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-primary.light.disabled .sc-ic-button-s>a{background:var(--ic-architectural-600) !important}/*!@:host(.button-variant-secondary) ::slotted(a)*/.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a{border:var(--ic-border-width) solid var(--button-default) !important}/*!@:host(.button-variant-secondary) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-secondary) ::slotted(a:hover:focus)*/.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:hover:focus{background-color:var(--button-default-background-hover) !important;border-color:var(--button-default-hover) !important}/*!@:host(.button-variant-secondary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-secondary) ::slotted(a:active:focus),\n:host(.button-variant-secondary) ::slotted(a:active)*/.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-secondary.sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-secondary .sc-ic-button-s>a:active{border-color:var(--button-default-active) !important;background-color:var(--button-default-background-active) !important}/*!@:host(.button-variant-secondary.disabled) ::slotted(a),\n:host(.button-variant-secondary.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.disabled) ::slotted(a:active),\n:host(.button-variant-tertiary.disabled) ::slotted(a),\n:host(.button-variant-tertiary.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.disabled) ::slotted(a:active)*/.sc-ic-button-h.button-variant-secondary.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-secondary.disabled .sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary.disabled .sc-ic-button-s>a:active{border-color:var(--ic-architectural-300) !important;background:none !important}/*!@:host(.button-variant-secondary.light.disabled) ::slotted(a),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-secondary.light.disabled) ::slotted(a:active),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:hover),\n:host(.button-variant-tertiary.light.disabled) ::slotted(a:active)*/.sc-ic-button-h.button-variant-secondary.light.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.light.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-secondary.light.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.light.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-secondary.light.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-secondary.light.disabled .sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary.light.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.light.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.light.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.light.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-tertiary.light.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary.light.disabled .sc-ic-button-s>a:active{border-color:var(--ic-architectural-500) !important;background:none !important}/*!@:host(.button-variant-tertiary) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-tertiary) ::slotted(a:hover:focus),\n:host(.button-variant-icon) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-icon) ::slotted(a:hover:focus)*/.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a:hover:focus{background-color:var(--button-default-background-hover) !important}/*!@:host(.button-variant-tertiary) ::slotted(a:active:not(:focus)),\n:host(.button-variant-tertiary) ::slotted(a:active:focus),\n:host(.button-variant-tertiary) ::slotted(a:active),\n:host(.button-variant-icon) ::slotted(a:active:not(:focus))*/.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a,.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-tertiary.sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-tertiary .sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-icon .sc-ic-button-s>a:active:not(:focus){background-color:var(--button-default-background-active) !important}/*!@:host(.button-variant-icon.disabled) ::slotted(a),\n:host(.button-variant-icon.disabled) ::slotted(a:hover),\n:host(.button-variant-icon.disabled) ::slotted(a:active)*/.sc-ic-button-h.button-variant-icon.disabled.sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.disabled .sc-ic-button-s>a,.sc-ic-button-h.button-variant-icon.disabled.sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-icon.disabled .sc-ic-button-s>a:hover,.sc-ic-button-h.button-variant-icon.disabled.sc-ic-button-s>a:active,.sc-ic-button-h.button-variant-icon.disabled .sc-ic-button-s>a:active{background:none !important}/*!@:host(.button-variant-destructive) ::slotted(a)*/.sc-ic-button-h.button-variant-destructive.sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive .sc-ic-button-s>a{background-color:var(--ic-action-destructive) !important}/*!@:host(.button-variant-destructive) ::slotted(a:hover:not(:focus)),\n:host(.button-variant-destructive) ::slotted(a:hover:focus)*/.sc-ic-button-h.button-variant-destructive.sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive .sc-ic-button-s>a:hover:not(:focus),.sc-ic-button-h.button-variant-destructive.sc-ic-button-s>a:hover:focus,.sc-ic-button-h.button-variant-destructive .sc-ic-button-s>a:hover:focus{background-color:var(--ic-action-destructive-hover) !important}/*!@:host(.button-variant-destructive) ::slotted(a:active:not(:focus)),\n:host(.button-variant-destructive) ::slotted(a:active:focus)*/.sc-ic-button-h.button-variant-destructive.sc-ic-button-s>a,.sc-ic-button-h.button-variant-destructive .sc-ic-button-s>a:active:not(:focus),.sc-ic-button-h.button-variant-destructive.sc-ic-button-s>a:active:focus,.sc-ic-button-h.button-variant-destructive .sc-ic-button-s>a:active:focus{background-color:var(--ic-action-destructive-active) !important}/*!@:host(.button-size-default) ::slotted(a)*/.sc-ic-button-h.button-size-default .sc-ic-button-s>a{height:var(--height, 2.5rem) !important;padding:var(--ic-space-xs) var(--ic-space-md) !important}/*!@:host(.button-size-small) ::slotted(a)*/.sc-ic-button-h.button-size-small .sc-ic-button-s>a{height:var(--height, var(--ic-space-xl)) !important;padding:var(--ic-space-xxs) var(--ic-space-md) !important}/*!@:host(.button-size-large) ::slotted(a)*/.sc-ic-button-h.button-size-large .sc-ic-button-s>a{height:var(--height, var(--ic-space-xxl)) !important;padding:var(--ic-space-sm) var(--ic-space-md) !important}/*!@:host(.button-size-default.button-variant-icon) ::slotted(a)*/.sc-ic-button-h.button-size-default.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-size-default.button-variant-icon .sc-ic-button-s>a{height:var(--height, var(--ic-space-xl)) !important;padding:0.375rem !important}/*!@:host(.button-size-small.button-variant-icon) ::slotted(a)*/.sc-ic-button-h.button-size-small.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-size-small.button-variant-icon .sc-ic-button-s>a{padding:var(--ic-space-xxs) !important}/*!@:host(.button-size-large.button-variant-icon) ::slotted(a)*/.sc-ic-button-h.button-size-large.button-variant-icon.sc-ic-button-s>a,.sc-ic-button-h.button-size-large.button-variant-icon .sc-ic-button-s>a{padding:var(--ic-space-xs) !important}@media (forced-colors: active){/*!@.button,\n ::slotted(a)*/.button.sc-ic-button,.sc-ic-button-s>a{border:0.125rem solid transparent !important}}/*!@:host(.flip) ::slotted(svg)*/.sc-ic-button-h.flip .sc-ic-button-s>svg{transform:scaleX(-1)}";
|
9020
9025
|
|
9021
9026
|
var __rest = (undefined && undefined.__rest) || function (s, e) {
|
9022
9027
|
var t = {};
|
@@ -9156,6 +9161,9 @@ class Button {
|
|
9156
9161
|
this.type = "button";
|
9157
9162
|
this.variant = "primary";
|
9158
9163
|
}
|
9164
|
+
watchDisabledHandler() {
|
9165
|
+
removeDisabledFalse$1(this.disabled, this.el);
|
9166
|
+
}
|
9159
9167
|
disconnectedCallback() {
|
9160
9168
|
if (this.mutationObserver !== null && this.mutationObserver !== undefined) {
|
9161
9169
|
this.mutationObserver.disconnect();
|
@@ -9353,6 +9361,9 @@ class Button {
|
|
9353
9361
|
}
|
9354
9362
|
static get delegatesFocus() { return true; }
|
9355
9363
|
get el() { return getElement(this); }
|
9364
|
+
static get watchers() { return {
|
9365
|
+
"disabled": ["watchDisabledHandler"]
|
9366
|
+
}; }
|
9356
9367
|
static get style() { return icButtonCss; }
|
9357
9368
|
static get cmpMeta() { return {
|
9358
9369
|
"$flags$": 25,
|
@@ -10300,32 +10311,2640 @@ class DataTable {
|
|
10300
10311
|
get el() { return getElement(this); }
|
10301
10312
|
static get style() { return icDataTableCss; }
|
10302
10313
|
static get cmpMeta() { return {
|
10303
|
-
"$flags$": 9,
|
10304
|
-
"$tagName$": "ic-data-table",
|
10314
|
+
"$flags$": 9,
|
10315
|
+
"$tagName$": "ic-data-table",
|
10316
|
+
"$members$": {
|
10317
|
+
"caption": [1],
|
10318
|
+
"columns": [16],
|
10319
|
+
"data": [16],
|
10320
|
+
"density": [1],
|
10321
|
+
"embedded": [4],
|
10322
|
+
"hideColumnHeaders": [4, "hide-column-headers"],
|
10323
|
+
"paginationOptions": [16],
|
10324
|
+
"showPagination": [4, "show-pagination"],
|
10325
|
+
"sortable": [4],
|
10326
|
+
"sortOptions": [16],
|
10327
|
+
"stickyColumnHeaders": [4, "sticky-column-headers"],
|
10328
|
+
"stickyRowHeaders": [4, "sticky-row-headers"],
|
10329
|
+
"fromRow": [32],
|
10330
|
+
"previousRowsPerPage": [32],
|
10331
|
+
"rowsPerPage": [32],
|
10332
|
+
"scrollable": [32],
|
10333
|
+
"scrollOffset": [32],
|
10334
|
+
"selectedRow": [32],
|
10335
|
+
"sortedColumn": [32],
|
10336
|
+
"sortedColumnOrder": [32],
|
10337
|
+
"toRow": [32]
|
10338
|
+
},
|
10339
|
+
"$listeners$": [[0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icPageChange", "handlePageChange"], [8, "click", "clickListener"]],
|
10340
|
+
"$lazyBundleId$": "-",
|
10341
|
+
"$attrsToReflect$": []
|
10342
|
+
}; }
|
10343
|
+
}
|
10344
|
+
|
10345
|
+
var IcInformationStatus;
|
10346
|
+
(function (IcInformationStatus) {
|
10347
|
+
IcInformationStatus["Warning"] = "warning";
|
10348
|
+
IcInformationStatus["Error"] = "error";
|
10349
|
+
IcInformationStatus["Success"] = "success";
|
10350
|
+
})(IcInformationStatus || (IcInformationStatus = {}));
|
10351
|
+
var IcThemeForegroundEnum;
|
10352
|
+
(function (IcThemeForegroundEnum) {
|
10353
|
+
IcThemeForegroundEnum["Default"] = "default";
|
10354
|
+
IcThemeForegroundEnum["Dark"] = "dark";
|
10355
|
+
IcThemeForegroundEnum["Light"] = "light";
|
10356
|
+
})(IcThemeForegroundEnum || (IcThemeForegroundEnum = {}));
|
10357
|
+
var IcDateInputMonths;
|
10358
|
+
(function (IcDateInputMonths) {
|
10359
|
+
IcDateInputMonths[IcDateInputMonths["January"] = 0] = "January";
|
10360
|
+
IcDateInputMonths[IcDateInputMonths["February"] = 1] = "February";
|
10361
|
+
IcDateInputMonths[IcDateInputMonths["March"] = 2] = "March";
|
10362
|
+
IcDateInputMonths[IcDateInputMonths["April"] = 3] = "April";
|
10363
|
+
IcDateInputMonths[IcDateInputMonths["May"] = 4] = "May";
|
10364
|
+
IcDateInputMonths[IcDateInputMonths["June"] = 5] = "June";
|
10365
|
+
IcDateInputMonths[IcDateInputMonths["July"] = 6] = "July";
|
10366
|
+
IcDateInputMonths[IcDateInputMonths["August"] = 7] = "August";
|
10367
|
+
IcDateInputMonths[IcDateInputMonths["September"] = 8] = "September";
|
10368
|
+
IcDateInputMonths[IcDateInputMonths["October"] = 9] = "October";
|
10369
|
+
IcDateInputMonths[IcDateInputMonths["November"] = 10] = "November";
|
10370
|
+
IcDateInputMonths[IcDateInputMonths["December"] = 11] = "December";
|
10371
|
+
})(IcDateInputMonths || (IcDateInputMonths = {}));
|
10372
|
+
var IcShortDayNames;
|
10373
|
+
(function (IcShortDayNames) {
|
10374
|
+
IcShortDayNames[IcShortDayNames["Sun"] = 0] = "Sun";
|
10375
|
+
IcShortDayNames[IcShortDayNames["Mon"] = 1] = "Mon";
|
10376
|
+
IcShortDayNames[IcShortDayNames["Tue"] = 2] = "Tue";
|
10377
|
+
IcShortDayNames[IcShortDayNames["Wed"] = 3] = "Wed";
|
10378
|
+
IcShortDayNames[IcShortDayNames["Thu"] = 4] = "Thu";
|
10379
|
+
IcShortDayNames[IcShortDayNames["Fri"] = 5] = "Fri";
|
10380
|
+
IcShortDayNames[IcShortDayNames["Sat"] = 6] = "Sat";
|
10381
|
+
})(IcShortDayNames || (IcShortDayNames = {}));
|
10382
|
+
var IcDayNames;
|
10383
|
+
(function (IcDayNames) {
|
10384
|
+
IcDayNames[IcDayNames["Sunday"] = 0] = "Sunday";
|
10385
|
+
IcDayNames[IcDayNames["Monday"] = 1] = "Monday";
|
10386
|
+
IcDayNames[IcDayNames["Tuesday"] = 2] = "Tuesday";
|
10387
|
+
IcDayNames[IcDayNames["Wednesday"] = 3] = "Wednesday";
|
10388
|
+
IcDayNames[IcDayNames["Thursday"] = 4] = "Thursday";
|
10389
|
+
IcDayNames[IcDayNames["Friday"] = 5] = "Friday";
|
10390
|
+
IcDayNames[IcDayNames["Saturday"] = 6] = "Saturday";
|
10391
|
+
})(IcDayNames || (IcDayNames = {}));
|
10392
|
+
var IcWeekDays;
|
10393
|
+
(function (IcWeekDays) {
|
10394
|
+
IcWeekDays[IcWeekDays["Sunday"] = 0] = "Sunday";
|
10395
|
+
IcWeekDays[IcWeekDays["Monday"] = 1] = "Monday";
|
10396
|
+
IcWeekDays[IcWeekDays["Tuesday"] = 2] = "Tuesday";
|
10397
|
+
IcWeekDays[IcWeekDays["Wednesday"] = 3] = "Wednesday";
|
10398
|
+
IcWeekDays[IcWeekDays["Thursday"] = 4] = "Thursday";
|
10399
|
+
IcWeekDays[IcWeekDays["Friday"] = 5] = "Friday";
|
10400
|
+
IcWeekDays[IcWeekDays["Saturday"] = 6] = "Saturday";
|
10401
|
+
})(IcWeekDays || (IcWeekDays = {}));
|
10402
|
+
|
10403
|
+
const isMonthFirstFormat = (dateString) => {
|
10404
|
+
const monthFirstFormat = /^(0[1-9]|1[0-2])(\/|-)(0[1-9]|[12][0-9]|3[01])(\/|-)\d{4}$/;
|
10405
|
+
return monthFirstFormat.test(dateString);
|
10406
|
+
};
|
10407
|
+
const isDayFirstFormat = (dateString) => {
|
10408
|
+
const dayFirstFormat = /^(0[1-9]|[12][0-9]|3[01])(\/|-)(0[1-9]|1[0-2])(\/|-)\d{4}$/;
|
10409
|
+
return dayFirstFormat.test(dateString);
|
10410
|
+
};
|
10411
|
+
const createDate = (date, dateFormat) => {
|
10412
|
+
let newDate;
|
10413
|
+
if (isDateOrEpoch(date)) {
|
10414
|
+
newDate = typeof date === "string" ? new Date(date) : date;
|
10415
|
+
}
|
10416
|
+
else if (typeof date === "string") {
|
10417
|
+
const dateArray = splitStringDate(date, dateFormat);
|
10418
|
+
const year = Number(dateArray[0]);
|
10419
|
+
const month = Number(dateArray[1]) - 1;
|
10420
|
+
const day = Number(dateArray[2]);
|
10421
|
+
newDate = new Date(year, month, day);
|
10422
|
+
}
|
10423
|
+
return newDate;
|
10424
|
+
};
|
10425
|
+
const isDateOrEpoch = (date) => {
|
10426
|
+
return date instanceof Date || !isNaN(+new Date(+date));
|
10427
|
+
};
|
10428
|
+
const extractDateFromZuluDateTime = (zuluDateTime) => zuluDateTime.slice(0, zuluDateTime.indexOf("T"));
|
10429
|
+
const splitStringDate = (date, dateFormat) => {
|
10430
|
+
// returns an array where item 1 is year, item 2 is month, item 3 is day
|
10431
|
+
if (date.includes("T") && date.includes("Z")) {
|
10432
|
+
const nextDate = extractDateFromZuluDateTime(date);
|
10433
|
+
return nextDate.split("-");
|
10434
|
+
}
|
10435
|
+
let newDate = [];
|
10436
|
+
const dateWithSlashes = date.replace(/-/g, "/");
|
10437
|
+
if (dateWithSlashes.split("/").length > 1) {
|
10438
|
+
const dateParts = dateWithSlashes.split("/");
|
10439
|
+
// pad any values to 2 characters
|
10440
|
+
dateParts.forEach((d, i) => {
|
10441
|
+
if (d.length === 1) {
|
10442
|
+
dateParts[i] = convertToDoubleDigits(d);
|
10443
|
+
}
|
10444
|
+
});
|
10445
|
+
if (dateParts[0].length === 4) {
|
10446
|
+
newDate = [dateParts[0], dateParts[1], dateParts[2]];
|
10447
|
+
}
|
10448
|
+
else {
|
10449
|
+
const newDateStr = dateParts.join("/");
|
10450
|
+
const validDayFirst = isDayFirstFormat(newDateStr);
|
10451
|
+
const validMonthFirst = isMonthFirstFormat(newDateStr);
|
10452
|
+
if (validDayFirst && validMonthFirst) {
|
10453
|
+
if (dateFormat.charAt(0) === "M") {
|
10454
|
+
newDate = [dateParts[2], dateParts[0], dateParts[1]];
|
10455
|
+
}
|
10456
|
+
else {
|
10457
|
+
newDate = [dateParts[2], dateParts[1], dateParts[0]];
|
10458
|
+
}
|
10459
|
+
}
|
10460
|
+
else if (validMonthFirst) {
|
10461
|
+
newDate = [dateParts[2], dateParts[0], dateParts[1]];
|
10462
|
+
}
|
10463
|
+
else {
|
10464
|
+
newDate = [dateParts[2], dateParts[1], dateParts[0]];
|
10465
|
+
}
|
10466
|
+
}
|
10467
|
+
}
|
10468
|
+
return newDate;
|
10469
|
+
};
|
10470
|
+
const convertToDoubleDigits = (value) => {
|
10471
|
+
if (+value < 10) {
|
10472
|
+
return `0${value}`;
|
10473
|
+
}
|
10474
|
+
return value.toString();
|
10475
|
+
};
|
10476
|
+
const getWeekStart = (date, startDay) => {
|
10477
|
+
const tmpDate = new Date(date);
|
10478
|
+
const day = tmpDate.getDay();
|
10479
|
+
const diff = (day < startDay ? 7 : 0) + day - startDay;
|
10480
|
+
tmpDate.setDate(tmpDate.getDate() - diff);
|
10481
|
+
return tmpDate;
|
10482
|
+
};
|
10483
|
+
const getWeekEnd = (date, startDay) => {
|
10484
|
+
const d = new Date(date);
|
10485
|
+
const day = d.getDay();
|
10486
|
+
const diff = (day < startDay ? -7 : 0) + 6 - (day - startDay);
|
10487
|
+
d.setDate(d.getDate() + diff);
|
10488
|
+
return d;
|
10489
|
+
};
|
10490
|
+
const getMonthStart = (date) => {
|
10491
|
+
return new Date(date.getFullYear(), date.getMonth(), 1);
|
10492
|
+
};
|
10493
|
+
const getMonthEnd = (date) => {
|
10494
|
+
return new Date(date.getFullYear(), date.getMonth() + 1, 0);
|
10495
|
+
};
|
10496
|
+
/**
|
10497
|
+
* Compare if two dates are equal exactly equal
|
10498
|
+
*/
|
10499
|
+
const dateMatches = (a, b) => {
|
10500
|
+
if (a === null || b === null) {
|
10501
|
+
return false;
|
10502
|
+
}
|
10503
|
+
return (a.getFullYear() === b.getFullYear() &&
|
10504
|
+
a.getMonth() === b.getMonth() &&
|
10505
|
+
a.getDate() === b.getDate());
|
10506
|
+
};
|
10507
|
+
const clampDate = (date, min, max) => {
|
10508
|
+
const time = date.getTime();
|
10509
|
+
if (min !== null && time < min.getTime()) {
|
10510
|
+
return min;
|
10511
|
+
}
|
10512
|
+
if (max !== null && time > max.getTime()) {
|
10513
|
+
return max;
|
10514
|
+
}
|
10515
|
+
return date;
|
10516
|
+
};
|
10517
|
+
/**
|
10518
|
+
* Compare if date is within specified range
|
10519
|
+
*/
|
10520
|
+
const dateInRange = (date, min, max) => {
|
10521
|
+
return clampDate(date, min, max) === date;
|
10522
|
+
};
|
10523
|
+
const yearInRange = (year, min, max) => {
|
10524
|
+
let allowed = true;
|
10525
|
+
if (year !== null) {
|
10526
|
+
if (min !== null && year < min.getFullYear()) {
|
10527
|
+
allowed = false;
|
10528
|
+
}
|
10529
|
+
if (allowed && max !== null && year > max.getFullYear()) {
|
10530
|
+
allowed = false;
|
10531
|
+
}
|
10532
|
+
}
|
10533
|
+
return allowed;
|
10534
|
+
};
|
10535
|
+
|
10536
|
+
// Global ARIA attributes
|
10537
|
+
const IC_INHERITED_ARIA = [
|
10538
|
+
"aria-atomic",
|
10539
|
+
"aria-autocomplete",
|
10540
|
+
"aria-busy",
|
10541
|
+
"aria-controls",
|
10542
|
+
"aria-current",
|
10543
|
+
"aria-describedby",
|
10544
|
+
"aria-description",
|
10545
|
+
"aria-details",
|
10546
|
+
"aria-disabled",
|
10547
|
+
"aria-dropeffect",
|
10548
|
+
"aria-errormessage",
|
10549
|
+
"aria-expanded",
|
10550
|
+
"aria-flowto",
|
10551
|
+
"aria-grabbed",
|
10552
|
+
"aria-haspopup",
|
10553
|
+
"aria-hidden",
|
10554
|
+
"aria-invalid",
|
10555
|
+
"aria-keyshortcuts",
|
10556
|
+
"aria-label",
|
10557
|
+
"aria-labelledby",
|
10558
|
+
"aria-live",
|
10559
|
+
"aria-owns",
|
10560
|
+
"aria-relevant",
|
10561
|
+
"aria-roledescription",
|
10562
|
+
];
|
10563
|
+
|
10564
|
+
/**
|
10565
|
+
* converts an enum of strings into an array of strings
|
10566
|
+
*/
|
10567
|
+
const stringEnumToArray = (theEnum) => {
|
10568
|
+
const arr = [];
|
10569
|
+
Object.values(theEnum).forEach((val) => {
|
10570
|
+
if (isNaN(Number(val))) {
|
10571
|
+
const str = val;
|
10572
|
+
arr.push(str);
|
10573
|
+
}
|
10574
|
+
});
|
10575
|
+
return arr;
|
10576
|
+
};
|
10577
|
+
/**
|
10578
|
+
* Used to inherit global attributes set on the host. Called in componentWillLoad and assigned
|
10579
|
+
* to a variable that is later used in the render function.
|
10580
|
+
*
|
10581
|
+
* This does not need to be reactive as changing attributes on the host element
|
10582
|
+
* does not trigger a re-render.
|
10583
|
+
*/
|
10584
|
+
const inheritAttributes = (element, attributes = []) => {
|
10585
|
+
const attributeObject = {};
|
10586
|
+
attributes.forEach((attr) => {
|
10587
|
+
if (element.hasAttribute(attr)) {
|
10588
|
+
const value = element.getAttribute(attr);
|
10589
|
+
if (value !== null) {
|
10590
|
+
attributeObject[attr] = element.getAttribute(attr);
|
10591
|
+
}
|
10592
|
+
element.removeAttribute(attr);
|
10593
|
+
}
|
10594
|
+
});
|
10595
|
+
return attributeObject;
|
10596
|
+
};
|
10597
|
+
/**
|
10598
|
+
* This method is used to add a hidden input to a host element that contains
|
10599
|
+
* a Shadow DOM. It does not add the input inside of the Shadow root which
|
10600
|
+
* allows it to be picked up inside of forms. It should contain the same
|
10601
|
+
* values as the host element.
|
10602
|
+
*
|
10603
|
+
* @param always Add a hidden input even if the container does not use Shadow
|
10604
|
+
* @param container The element where the input will be added
|
10605
|
+
* @param name The name of the input
|
10606
|
+
* @param value The value of the input
|
10607
|
+
* @param disabled If true, the input is disabled
|
10608
|
+
*/
|
10609
|
+
const renderHiddenInput = (always, container, name, value, disabled) => {
|
10610
|
+
if (name !== undefined && (always || hasShadowDom(container))) {
|
10611
|
+
const inputs = container.querySelectorAll("input.ic-input");
|
10612
|
+
const inputEls = Array.from(inputs);
|
10613
|
+
const filtered = inputEls.filter((el) => container === el.parentElement);
|
10614
|
+
let input = filtered[0];
|
10615
|
+
if (input === null || input === undefined) {
|
10616
|
+
input = container.ownerDocument.createElement("input");
|
10617
|
+
input.type = "hidden";
|
10618
|
+
input.classList.add("ic-input");
|
10619
|
+
container.appendChild(input);
|
10620
|
+
}
|
10621
|
+
input.disabled = disabled;
|
10622
|
+
input.name = name;
|
10623
|
+
if (value instanceof Date) {
|
10624
|
+
input.value = value ? value.toISOString() : null;
|
10625
|
+
}
|
10626
|
+
else {
|
10627
|
+
input.value = value || "";
|
10628
|
+
}
|
10629
|
+
}
|
10630
|
+
};
|
10631
|
+
const isEmptyString = (value) => value ? value.trim().length === 0 : true;
|
10632
|
+
const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
|
10633
|
+
({
|
10634
|
+
XS: Number(getCssProperty("--ic-breakpoint-xs").replace("px", "")),
|
10635
|
+
S: Number(getCssProperty("--ic-breakpoint-sm").replace("px", "")),
|
10636
|
+
M: Number(getCssProperty("--ic-breakpoint-md").replace("px", "")),
|
10637
|
+
L: Number(getCssProperty("--ic-breakpoint-lg").replace("px", "")),
|
10638
|
+
XL: Number(getCssProperty("--ic-breakpoint-xl").replace("px", "")),
|
10639
|
+
UNDEFINED: 1200,
|
10640
|
+
});
|
10641
|
+
const hasShadowDom = (el) => !!el.shadowRoot && !!el.attachShadow;
|
10642
|
+
const getInputHelperTextID = (id) => id + "-helper-text";
|
10643
|
+
const getInputValidationTextID = (id) => id + "-validation-text";
|
10644
|
+
const getInputDescribedByText = (inputId, helperText, validationText) => `${helperText ? getInputHelperTextID(inputId) : ""} ${validationText ? getInputValidationTextID(inputId) : ""}`.trim();
|
10645
|
+
const isMobileOrTablet = () => "maxTouchPoints" in navigator ? navigator.maxTouchPoints > 0 : false;
|
10646
|
+
/**
|
10647
|
+
* Extracts the label using the value from an object. Requires the object to have a label and value property.
|
10648
|
+
* @param value - value from object
|
10649
|
+
* @param options - list of menu items
|
10650
|
+
* @returns - label corresponding to value
|
10651
|
+
*/
|
10652
|
+
const getLabelFromValue = (value, options, valueField = "value", labelField = "label") => {
|
10653
|
+
const ungroupedOptions = [];
|
10654
|
+
if (options.length > 0 && options.map) {
|
10655
|
+
options.map((option) => {
|
10656
|
+
if (option.children) {
|
10657
|
+
option.children.map((option) => ungroupedOptions.push(option));
|
10658
|
+
}
|
10659
|
+
else {
|
10660
|
+
ungroupedOptions.push(option);
|
10661
|
+
}
|
10662
|
+
});
|
10663
|
+
const matchingValue = ungroupedOptions.find((option) => option[valueField] === value);
|
10664
|
+
if (matchingValue !== undefined)
|
10665
|
+
return matchingValue[labelField];
|
10666
|
+
}
|
10667
|
+
return undefined;
|
10668
|
+
};
|
10669
|
+
/**
|
10670
|
+
* Filters the options based on the search string.
|
10671
|
+
* @param options - array of options
|
10672
|
+
* @param includeDescriptions - determines whether option descriptions are included when filtering options
|
10673
|
+
* @param searchString - string used to filter the options
|
10674
|
+
* @param position - whether the search string matches the start of or anywhere in the options
|
10675
|
+
* @returns filtered array of options
|
10676
|
+
*/
|
10677
|
+
const getFilteredMenuOptions = (options, includeDescriptions, searchString, position, labelField = "label") => options.filter((option) => {
|
10678
|
+
var _a;
|
10679
|
+
const label = option[labelField].toLowerCase();
|
10680
|
+
const description = (_a = option.description) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
10681
|
+
const lowerSearchString = searchString.toLowerCase();
|
10682
|
+
return position === "anywhere"
|
10683
|
+
? includeDescriptions
|
10684
|
+
? label.includes(lowerSearchString) ||
|
10685
|
+
(description === null || description === void 0 ? void 0 : description.includes(lowerSearchString))
|
10686
|
+
: label.includes(lowerSearchString)
|
10687
|
+
: includeDescriptions
|
10688
|
+
? label.startsWith(lowerSearchString) ||
|
10689
|
+
(description === null || description === void 0 ? void 0 : description.startsWith(lowerSearchString))
|
10690
|
+
: label.startsWith(lowerSearchString);
|
10691
|
+
});
|
10692
|
+
/**
|
10693
|
+
* Gets count of options where only group title "parent" options have been removed.
|
10694
|
+
* Disabled options are included in the count.
|
10695
|
+
* @param options - array of options
|
10696
|
+
* @returns number of options not including group titles
|
10697
|
+
*/
|
10698
|
+
const getOptionsWithoutGroupTitlesCount = (options) => {
|
10699
|
+
const optionsWithoutGroupTitles = [];
|
10700
|
+
if (options.length > 0 && options.map) {
|
10701
|
+
options.map((option) => {
|
10702
|
+
if (option.children) {
|
10703
|
+
option.children.map((option) => optionsWithoutGroupTitles.push(option));
|
10704
|
+
}
|
10705
|
+
else {
|
10706
|
+
optionsWithoutGroupTitles.push(option);
|
10707
|
+
}
|
10708
|
+
});
|
10709
|
+
}
|
10710
|
+
return optionsWithoutGroupTitles.length;
|
10711
|
+
};
|
10712
|
+
const isNumeric = (value) => {
|
10713
|
+
return /^-?\d+$/.test(value);
|
10714
|
+
};
|
10715
|
+
const hasValidationStatus = (status, disabled) => {
|
10716
|
+
return status !== "" && !disabled;
|
10717
|
+
};
|
10718
|
+
const onComponentRequiredPropUndefined = (props, component) => {
|
10719
|
+
for (let i = 0; i < props.length; i++) {
|
10720
|
+
const { prop, propName } = props[i];
|
10721
|
+
if (prop === null || prop === undefined) {
|
10722
|
+
console.error(`No ${propName} specified for ${component} component - prop '${propName}' (web components) / '${kebabToCamelCase(propName)}' (react) required`);
|
10723
|
+
}
|
10724
|
+
}
|
10725
|
+
};
|
10726
|
+
const kebabToCamelCase = (kebabCase) => {
|
10727
|
+
kebabCase = kebabCase.toLowerCase();
|
10728
|
+
const individualWords = kebabCase.split("-");
|
10729
|
+
let camelCase = individualWords[0];
|
10730
|
+
for (let i = 1; i < individualWords.length; i++) {
|
10731
|
+
camelCase +=
|
10732
|
+
individualWords[i].substring(0, 1).toUpperCase() +
|
10733
|
+
individualWords[i].substring(1);
|
10734
|
+
}
|
10735
|
+
return camelCase;
|
10736
|
+
};
|
10737
|
+
const checkResizeObserver = (callbackFn) => {
|
10738
|
+
if (typeof window !== "undefined" &&
|
10739
|
+
typeof window.ResizeObserver !== "undefined") {
|
10740
|
+
callbackFn();
|
10741
|
+
}
|
10742
|
+
};
|
10743
|
+
const getForm = (el) => el.closest("FORM");
|
10744
|
+
const addFormResetListener = (el, callbackFn) => {
|
10745
|
+
const form = getForm(el);
|
10746
|
+
if (form !== null) {
|
10747
|
+
form.addEventListener("reset", callbackFn);
|
10748
|
+
}
|
10749
|
+
};
|
10750
|
+
const removeFormResetListener = (el, callbackFn) => {
|
10751
|
+
const form = getForm(el);
|
10752
|
+
if (form !== null) {
|
10753
|
+
form.removeEventListener("reset", callbackFn);
|
10754
|
+
}
|
10755
|
+
};
|
10756
|
+
const removeDisabledFalse = (disabled, element) => {
|
10757
|
+
if (!disabled) {
|
10758
|
+
element.removeAttribute("disabled");
|
10759
|
+
}
|
10760
|
+
};
|
10761
|
+
const isMacDevice = () => {
|
10762
|
+
return window.navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
|
10763
|
+
};
|
10764
|
+
|
10765
|
+
var Clear$2 = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
10766
|
+
<path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>
|
10767
|
+
</svg>
|
10768
|
+
`;
|
10769
|
+
|
10770
|
+
var Calendar = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
10771
|
+
<path d="M16.6667 2.50004H15.8334V0.833374H14.1667V2.50004H5.83342V0.833374H4.16675V2.50004H3.33341C2.41675 2.50004 1.66675 3.25004 1.66675 4.16671V17.5C1.66675 18.4167 2.41675 19.1667 3.33341 19.1667H16.6667C17.5834 19.1667 18.3334 18.4167 18.3334 17.5V4.16671C18.3334 3.25004 17.5834 2.50004 16.6667 2.50004ZM16.6667 17.5H3.33341V6.66671H16.6667V17.5Z" fill="currentColor"/>
|
10772
|
+
</svg>`;
|
10773
|
+
|
10774
|
+
const icDateInputCss = "/*!@html*/html.sc-ic-date-input{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-date-input{margin:0}/*!@main*/main.sc-ic-date-input{display:block}/*!@h1*/h1.sc-ic-date-input{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-date-input{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-date-input{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-date-input{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-date-input{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-date-input,strong.sc-ic-date-input{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-date-input,kbd.sc-ic-date-input,samp.sc-ic-date-input{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-date-input{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-date-input,sup.sc-ic-date-input{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-date-input{bottom:-0.25em}/*!@sup*/sup.sc-ic-date-input{top:-0.5em}/*!@img*/img.sc-ic-date-input{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-date-input,input.sc-ic-date-input,optgroup.sc-ic-date-input,select.sc-ic-date-input,textarea.sc-ic-date-input{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-date-input,input.sc-ic-date-input{overflow:visible}/*!@button,\nselect*/button.sc-ic-date-input,select.sc-ic-date-input{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-date-input,[type=\"button\"].sc-ic-date-input,[type=\"reset\"].sc-ic-date-input,[type=\"submit\"].sc-ic-date-input{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-date-input::-moz-focus-inner,[type=\"button\"].sc-ic-date-input::-moz-focus-inner,[type=\"reset\"].sc-ic-date-input::-moz-focus-inner,[type=\"submit\"].sc-ic-date-input::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-date-input:-moz-focusring,[type=\"button\"].sc-ic-date-input:-moz-focusring,[type=\"reset\"].sc-ic-date-input:-moz-focusring,[type=\"submit\"].sc-ic-date-input:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-date-input{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-date-input{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-date-input{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-date-input{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-date-input,[type=\"radio\"].sc-ic-date-input{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-date-input::-webkit-inner-spin-button,[type=\"number\"].sc-ic-date-input::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-date-input{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-date-input::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-date-input::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-date-input{display:block}/*!@summary*/summary.sc-ic-date-input{display:list-item}/*!@template*/template.sc-ic-date-input{display:none}/*!@[hidden]*/[hidden].sc-ic-date-input{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-date-input,body.sc-ic-date-input,div.sc-ic-date-input,span.sc-ic-date-input,applet.sc-ic-date-input,object.sc-ic-date-input,iframe.sc-ic-date-input,h1.sc-ic-date-input,h2.sc-ic-date-input,h3.sc-ic-date-input,h4.sc-ic-date-input,h5.sc-ic-date-input,h6.sc-ic-date-input,p.sc-ic-date-input,blockquote.sc-ic-date-input,pre.sc-ic-date-input,a.sc-ic-date-input,abbr.sc-ic-date-input,acronym.sc-ic-date-input,address.sc-ic-date-input,big.sc-ic-date-input,cite.sc-ic-date-input,code.sc-ic-date-input,del.sc-ic-date-input,dfn.sc-ic-date-input,em.sc-ic-date-input,img.sc-ic-date-input,ins.sc-ic-date-input,kbd.sc-ic-date-input,q.sc-ic-date-input,s.sc-ic-date-input,samp.sc-ic-date-input,small.sc-ic-date-input,strike.sc-ic-date-input,strong.sc-ic-date-input,sub.sc-ic-date-input,sup.sc-ic-date-input,tt.sc-ic-date-input,var.sc-ic-date-input,b.sc-ic-date-input,u.sc-ic-date-input,i.sc-ic-date-input,center.sc-ic-date-input,dl.sc-ic-date-input,dt.sc-ic-date-input,dd.sc-ic-date-input,ol.sc-ic-date-input,ul.sc-ic-date-input,li.sc-ic-date-input,fieldset.sc-ic-date-input,form.sc-ic-date-input,label.sc-ic-date-input,legend.sc-ic-date-input,table.sc-ic-date-input,caption.sc-ic-date-input,tbody.sc-ic-date-input,tfoot.sc-ic-date-input,thead.sc-ic-date-input,tr.sc-ic-date-input,th.sc-ic-date-input,td.sc-ic-date-input,article.sc-ic-date-input,aside.sc-ic-date-input,canvas.sc-ic-date-input,details.sc-ic-date-input,embed.sc-ic-date-input,figure.sc-ic-date-input,figcaption.sc-ic-date-input,footer.sc-ic-date-input,header.sc-ic-date-input,hgroup.sc-ic-date-input,menu.sc-ic-date-input,nav.sc-ic-date-input,output.sc-ic-date-input,ruby.sc-ic-date-input,section.sc-ic-date-input,summary.sc-ic-date-input,time.sc-ic-date-input,mark.sc-ic-date-input,audio.sc-ic-date-input,video.sc-ic-date-input{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@input*/input.sc-ic-date-input{border:0;height:100%;padding:0;outline:none;background:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}/*!@input::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button*/input.sc-ic-date-input::-webkit-outer-spin-button,input.sc-ic-date-input::-webkit-inner-spin-button{-webkit-appearance:none}/*!@ic-input-component-container*/ic-input-component-container.sc-ic-date-input{cursor:text}/*!@ic-input-component-container,\nic-input-component-container:hover*/ic-input-component-container.sc-ic-date-input,ic-input-component-container.sc-ic-date-input:hover{color:var(--ic-color-tertiary-text)}/*!@.focus-indicator*/.focus-indicator.sc-ic-date-input{padding:var(--ic-space-xxxs) var(--ic-space-xs);align-items:center}/*!@.day-input*/.day-input.sc-ic-date-input{width:1.438rem}/*!@.month-input*/.month-input.sc-ic-date-input{width:1.813rem}/*!@.year-input,\n.year-input.fit-to-value*/.year-input.sc-ic-date-input,.year-input.fit-to-value.sc-ic-date-input{width:2.313rem}/*!@.fit-to-value*/.fit-to-value.sc-ic-date-input{width:1.25rem}/*!@.sr-only*/.sr-only.sc-ic-date-input{position:absolute;left:-9999px}/*!@.input-container*/.input-container.sc-ic-date-input{width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}/*!@.action-buttons*/.action-buttons.sc-ic-date-input{display:flex;align-items:center}/*!@.show-calendar-button-wrapper*/.show-calendar-button-wrapper.sc-ic-date-input{display:flex;justify-content:center;align-items:center}/*!@.clear-button,\n.calendar-button*/.clear-button.sc-ic-date-input,.calendar-button.sc-ic-date-input{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n border-radius var(--ic-easing-transition);margin:0}/*!@.clear-button.hidden*/.clear-button.hidden.sc-ic-date-input{display:none}/*!@.clear-button:focus,\n.calendar-button:focus,\n.clear-button:active,\n.calendar-button:active*/.clear-button.sc-ic-date-input:focus,.calendar-button.sc-ic-date-input:focus,.clear-button.sc-ic-date-input:active,.calendar-button.sc-ic-date-input:active{background-color:var(--ic-focus-blue) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow) !important;border-radius:0.25rem}/*!@.clear-button:focus,\n.calendar-button:focus,\n.clear-button:active *,\n.calendar-button:active **/.clear-button.sc-ic-date-input:focus,.calendar-button.sc-ic-date-input:focus,.clear-button.sc-ic-date-input:active *.sc-ic-date-input,.calendar-button.sc-ic-date-input:active *.sc-ic-date-input{fill:var(--ic-architectural-white)}/*!@.divider*/.divider.sc-ic-date-input{margin:0 var(--ic-space-xxs);width:var(--ic-space-1px);background-color:var(--ic-architectural-400);border-radius:var(--ic-space-1px)}/*!@.divider.small*/.divider.small.sc-ic-date-input{height:var(--ic-space-md)}/*!@.divider.default*/.divider.default.sc-ic-date-input{height:calc(var(--ic-space-sm) + var(--ic-space-xs))}/*!@.divider.large*/.divider.large.sc-ic-date-input{height:var(--ic-space-lg)}";
|
10775
|
+
|
10776
|
+
let inputIds$5 = 0;
|
10777
|
+
class DateInput {
|
10778
|
+
constructor(hostRef) {
|
10779
|
+
registerInstance(this, hostRef);
|
10780
|
+
this.calendarButtonClicked = createEvent(this, "calendarButtonClicked", 7);
|
10781
|
+
this.icBlur = createEvent(this, "icBlur", 7);
|
10782
|
+
this.icChange = createEvent(this, "icChange", 7);
|
10783
|
+
this.icFocus = createEvent(this, "icFocus", 7);
|
10784
|
+
this.ARIA_INVALID = "aria-invalid";
|
10785
|
+
this.ARIA_LABEL = "aria-label";
|
10786
|
+
this.ARIA_LABELLED_BY = "aria-labelledby";
|
10787
|
+
this.EVENT_OBJECT_STRING = "[object Event]";
|
10788
|
+
this.FIT_TO_VALUE = "fit-to-value";
|
10789
|
+
this.initialValue = this.value;
|
10790
|
+
this.INPUT_EVENT_OBJECT_STRING = "[object InputEvent]";
|
10791
|
+
this.inputsInOrder = [];
|
10792
|
+
this.isAfterMax = false;
|
10793
|
+
this.isBeforeMin = false;
|
10794
|
+
this.isDateSetFromKeyboardEvent = false;
|
10795
|
+
this.isDisabledDate = false;
|
10796
|
+
this.isValidDay = true;
|
10797
|
+
this.isValidMonth = true;
|
10798
|
+
this.isValidDate = true;
|
10799
|
+
this.isZuluTime = false;
|
10800
|
+
this.KEYBOARD_EVENT_OBJECT_STRING = "[object KeyboardEvent]";
|
10801
|
+
this.MAX_DAY = 31;
|
10802
|
+
this.MAX_MONTH = 12;
|
10803
|
+
this.previousSelectedDate = null;
|
10804
|
+
this.selectedDate = null;
|
10805
|
+
this.setInputPasteValue = (input, pastedValue) => {
|
10806
|
+
const inputEl = input;
|
10807
|
+
inputEl.value = pastedValue;
|
10808
|
+
inputEl.classList.add(this.FIT_TO_VALUE);
|
10809
|
+
};
|
10810
|
+
this.checkSingleCopiedValueIsValid = (input, pastedValue) => {
|
10811
|
+
let isValid = false;
|
10812
|
+
const value = Number(pastedValue);
|
10813
|
+
switch (input) {
|
10814
|
+
case this.dayInputEl:
|
10815
|
+
isValid = value >= 1 && value <= this.MAX_DAY;
|
10816
|
+
break;
|
10817
|
+
case this.monthInputEl:
|
10818
|
+
isValid = value >= 1 && value <= this.MAX_MONTH;
|
10819
|
+
break;
|
10820
|
+
case this.yearInputEl:
|
10821
|
+
isValid = true;
|
10822
|
+
break;
|
10823
|
+
default:
|
10824
|
+
isValid = false;
|
10825
|
+
break;
|
10826
|
+
}
|
10827
|
+
return isValid;
|
10828
|
+
};
|
10829
|
+
/**
|
10830
|
+
* Using Object.prototype.string to determine type if event from user
|
10831
|
+
* @param event - event object used to differentiate keyboard, generic or input event
|
10832
|
+
* @returns boolean
|
10833
|
+
*/
|
10834
|
+
this.isKeyboardOrEvent = (event) => {
|
10835
|
+
return (Object.prototype.toString.call(event) === this.EVENT_OBJECT_STRING ||
|
10836
|
+
Object.prototype.toString.call(event) ===
|
10837
|
+
this.KEYBOARD_EVENT_OBJECT_STRING);
|
10838
|
+
};
|
10839
|
+
this.setDateValidity = () => {
|
10840
|
+
if (!isEmptyString(this.day)) {
|
10841
|
+
this.isValidDay = +this.day > this.MAX_DAY ? false : true;
|
10842
|
+
}
|
10843
|
+
else {
|
10844
|
+
this.isValidDay = true;
|
10845
|
+
}
|
10846
|
+
if (!isEmptyString(this.month)) {
|
10847
|
+
this.isValidMonth = +this.month > this.MAX_MONTH ? false : true;
|
10848
|
+
}
|
10849
|
+
else {
|
10850
|
+
this.isValidMonth = true;
|
10851
|
+
}
|
10852
|
+
};
|
10853
|
+
this.handleInput = (event) => {
|
10854
|
+
const inputEvent = event;
|
10855
|
+
const input = event.target;
|
10856
|
+
if (input !== this.yearInputEl) {
|
10857
|
+
// Only auto-format if input event is not a character being deleted
|
10858
|
+
// and not as user is changing value using up / down keys
|
10859
|
+
if (inputEvent.inputType !== "deleteContentBackward" &&
|
10860
|
+
!this.preventAutoFormatting) {
|
10861
|
+
if (input.value.length === 1 &&
|
10862
|
+
((input === this.dayInputEl && +input.value >= 4) ||
|
10863
|
+
(input === this.monthInputEl && +input.value >= 2)) &&
|
10864
|
+
+input.value <= 9) {
|
10865
|
+
this.setInputValue(input);
|
10866
|
+
this.notifyScreenReader(input, event);
|
10867
|
+
this.moveToNextInput(input);
|
10868
|
+
}
|
10869
|
+
if (input.value.length === 2) {
|
10870
|
+
if (+input.value === 0) {
|
10871
|
+
input.value = "01";
|
10872
|
+
}
|
10873
|
+
this.setInputValue(input);
|
10874
|
+
this.setPreventInput(input, true);
|
10875
|
+
this.notifyScreenReader(input, event);
|
10876
|
+
this.moveToNextInput(input);
|
10877
|
+
}
|
10878
|
+
else {
|
10879
|
+
this.setPreventInput(input, false);
|
10880
|
+
}
|
10881
|
+
}
|
10882
|
+
else if (this.preventAutoFormatting) {
|
10883
|
+
/**
|
10884
|
+
* Using arrow keys prevents auto formatting so need to deal with
|
10885
|
+
* switching from arrow keys to inputting numbers
|
10886
|
+
**/
|
10887
|
+
if (input.value.length === 2 && !this.isKeyboardOrEvent(event)) {
|
10888
|
+
this.setInputValue(input);
|
10889
|
+
this.setPreventInput(input, true);
|
10890
|
+
this.moveToNextInput(input);
|
10891
|
+
}
|
10892
|
+
else {
|
10893
|
+
this.setInputValue(input);
|
10894
|
+
}
|
10895
|
+
}
|
10896
|
+
if (input.value.length !== 2) {
|
10897
|
+
this.setPreventInput(input, false);
|
10898
|
+
}
|
10899
|
+
}
|
10900
|
+
else {
|
10901
|
+
if (input.value.length === 4) {
|
10902
|
+
this.setInputValue(input);
|
10903
|
+
if (Object.prototype.toString.call(event) !== this.EVENT_OBJECT_STRING) {
|
10904
|
+
this.moveToNextInput(input);
|
10905
|
+
}
|
10906
|
+
this.setPreventInput(input, true);
|
10907
|
+
}
|
10908
|
+
else {
|
10909
|
+
this.setInputValue(input, true);
|
10910
|
+
this.setPreventInput(input, false);
|
10911
|
+
}
|
10912
|
+
}
|
10913
|
+
// Add / remove class to make input width match size of value i.e. 2 digits' width for day / month, 4 for year
|
10914
|
+
this.setFitToValueStyling(input);
|
10915
|
+
if (input.value.length === 0) {
|
10916
|
+
this.setInputValue(input, true);
|
10917
|
+
this.setValidationMessage();
|
10918
|
+
}
|
10919
|
+
this.notifyScreenReader(input, event);
|
10920
|
+
};
|
10921
|
+
this.handleKeyDown = (event, isInputPrevented) => {
|
10922
|
+
const input = event.target;
|
10923
|
+
const eventKey = event.key.toLowerCase();
|
10924
|
+
// Regex required due to FF allowing all characters as values for number text field.
|
10925
|
+
const regex = /-?\d*\.?\d+(e[-+]?\d+)?|[/-]|arrowup|arrowdown|arrowleft|arrowright|shift|tab|backspace|delete/;
|
10926
|
+
if (!regex.test(eventKey) &&
|
10927
|
+
!((event.ctrlKey || event.metaKey) &&
|
10928
|
+
(eventKey === "v" || eventKey === "c"))) {
|
10929
|
+
event.preventDefault();
|
10930
|
+
}
|
10931
|
+
switch (eventKey) {
|
10932
|
+
case "/":
|
10933
|
+
case "-":
|
10934
|
+
case ".":
|
10935
|
+
event.preventDefault();
|
10936
|
+
this.setPasteInvalidText();
|
10937
|
+
this.moveToNextInput(input);
|
10938
|
+
break;
|
10939
|
+
case "arrowright":
|
10940
|
+
case "arrowleft":
|
10941
|
+
event.preventDefault();
|
10942
|
+
this.handleLeftRightArrowKeyPress(input, eventKey);
|
10943
|
+
break;
|
10944
|
+
case "arrowup":
|
10945
|
+
case "arrowdown":
|
10946
|
+
this.preventAutoFormatting = true;
|
10947
|
+
this.handleUpDownArrowKeyPress(input, event);
|
10948
|
+
break;
|
10949
|
+
}
|
10950
|
+
this.preventInput(event, isInputPrevented);
|
10951
|
+
this.isDateSetFromKeyboardEvent = true;
|
10952
|
+
};
|
10953
|
+
this.handleFocus = (event) => {
|
10954
|
+
// Highlight / select all characters in input for easy replacement
|
10955
|
+
const input = event.target;
|
10956
|
+
input.select();
|
10957
|
+
};
|
10958
|
+
this.handleBlur = (event) => {
|
10959
|
+
const input = event.target;
|
10960
|
+
this.setPasteInvalidText();
|
10961
|
+
this.autocompleteInput(input);
|
10962
|
+
};
|
10963
|
+
this.handleLeftRightArrowKeyPress = (input, key) => {
|
10964
|
+
if (key === "arrowright") {
|
10965
|
+
this.moveToNextInput(input);
|
10966
|
+
}
|
10967
|
+
else {
|
10968
|
+
this.moveToPreviousInput(input);
|
10969
|
+
}
|
10970
|
+
this.setPasteInvalidText();
|
10971
|
+
};
|
10972
|
+
this.notifyScreenReaderSelectedDate = () => {
|
10973
|
+
const dayNames = stringEnumToArray(IcDayNames);
|
10974
|
+
const months = stringEnumToArray(IcDateInputMonths);
|
10975
|
+
this.selectedDateInfoEl.textContent = `Selected date: ${dayNames[this.selectedDate.getDay()]}, ${this.selectedDate.getDate()} ${months[this.selectedDate.getMonth()]} ${this.selectedDate.getFullYear()}`;
|
10976
|
+
};
|
10977
|
+
this.handleUpDownArrowKeyPress = (input, event) => {
|
10978
|
+
const minValue = input === this.yearInputEl ? 0 : 1;
|
10979
|
+
let maxValue;
|
10980
|
+
switch (input) {
|
10981
|
+
case this.dayInputEl:
|
10982
|
+
maxValue = this.MAX_DAY;
|
10983
|
+
break;
|
10984
|
+
case this.monthInputEl:
|
10985
|
+
maxValue = this.MAX_MONTH;
|
10986
|
+
break;
|
10987
|
+
case this.yearInputEl:
|
10988
|
+
maxValue = 9999;
|
10989
|
+
}
|
10990
|
+
// Make value loop round when min / max reached
|
10991
|
+
if (input === null || input === void 0 ? void 0 : input.value) {
|
10992
|
+
if (event.key === "ArrowUp") {
|
10993
|
+
if (+input.value === maxValue) {
|
10994
|
+
event.preventDefault();
|
10995
|
+
input.value = `0${minValue}`;
|
10996
|
+
}
|
10997
|
+
else {
|
10998
|
+
input.value =
|
10999
|
+
+input.value + 1 < 10
|
11000
|
+
? `0${+input.value + 1}`
|
11001
|
+
: (+input.value + 1).toString();
|
11002
|
+
}
|
11003
|
+
this.notifyScreenReader(input, event);
|
11004
|
+
}
|
11005
|
+
if (event.key === "ArrowDown") {
|
11006
|
+
if (+input.value === minValue) {
|
11007
|
+
event.preventDefault();
|
11008
|
+
input.value = maxValue.toString();
|
11009
|
+
}
|
11010
|
+
else {
|
11011
|
+
input.value =
|
11012
|
+
+input.value - 1 < 10
|
11013
|
+
? `0${+input.value - 1}`
|
11014
|
+
: (+input.value - 1).toString();
|
11015
|
+
}
|
11016
|
+
this.notifyScreenReader(input, event);
|
11017
|
+
}
|
11018
|
+
}
|
11019
|
+
else {
|
11020
|
+
if (event.key === "ArrowDown") {
|
11021
|
+
event.preventDefault();
|
11022
|
+
if (input === this.yearInputEl) {
|
11023
|
+
input.value = new Date().getFullYear().toString();
|
11024
|
+
}
|
11025
|
+
else {
|
11026
|
+
input.value = maxValue.toString();
|
11027
|
+
}
|
11028
|
+
this.notifyScreenReader(input, event);
|
11029
|
+
}
|
11030
|
+
else if (event.key === "ArrowUp") {
|
11031
|
+
event.preventDefault();
|
11032
|
+
if (input === this.yearInputEl) {
|
11033
|
+
input.value = new Date().getFullYear().toString();
|
11034
|
+
}
|
11035
|
+
else {
|
11036
|
+
input.value = `0${minValue}`;
|
11037
|
+
}
|
11038
|
+
this.notifyScreenReader(input, event);
|
11039
|
+
}
|
11040
|
+
}
|
11041
|
+
this.setInputValue(input);
|
11042
|
+
this.setFitToValueStyling(input);
|
11043
|
+
};
|
11044
|
+
this.handleDateChange = (force) => {
|
11045
|
+
// Prevent icChange being emitted when each individual input is changed
|
11046
|
+
// This method is used within componentWillUpdate instead of using @Watch('value');
|
11047
|
+
if (force || this.selectedDate !== this.previousSelectedDate) {
|
11048
|
+
if (this.value) {
|
11049
|
+
this.inputsInOrder.forEach((input) => {
|
11050
|
+
input.classList.add(this.FIT_TO_VALUE);
|
11051
|
+
});
|
11052
|
+
}
|
11053
|
+
if (this.day && this.month && this.year && this.invalidDateText === "") {
|
11054
|
+
this.setValueAndEmitChange(this.selectedDate);
|
11055
|
+
this.notifyScreenReaderSelectedDate();
|
11056
|
+
}
|
11057
|
+
else {
|
11058
|
+
this.setValueAndEmitChange(null);
|
11059
|
+
this.selectedDateInfoEl.textContent = "";
|
11060
|
+
}
|
11061
|
+
this.previousSelectedDate = this.selectedDate;
|
11062
|
+
if (!this.isDateSetFromKeyboardEvent) {
|
11063
|
+
this.updateInputValues(this.day, this.month, this.year);
|
11064
|
+
}
|
11065
|
+
}
|
11066
|
+
};
|
11067
|
+
this.slicePastedDate = (valueLength, datePart) => {
|
11068
|
+
return datePart.length > valueLength
|
11069
|
+
? datePart.slice(0, valueLength)
|
11070
|
+
: datePart;
|
11071
|
+
};
|
11072
|
+
this.isPastedStringDateValid = (value) => {
|
11073
|
+
if (/\d+-\d+-\d+$/.test(value) ||
|
11074
|
+
/\d+\/\d+\/\d+/.test(value) ||
|
11075
|
+
/\d+\.\d+\.\d+/.test(value)) {
|
11076
|
+
return true;
|
11077
|
+
}
|
11078
|
+
if (/[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}(?::[0-9]{2}(?:\.\d+)?)?Z/.test(value)) {
|
11079
|
+
this.isZuluTime = true;
|
11080
|
+
return true;
|
11081
|
+
}
|
11082
|
+
return false;
|
11083
|
+
};
|
11084
|
+
// Set value of each input to value of pasted date part
|
11085
|
+
// Allows formats separated by '-' or '/'
|
11086
|
+
this.handlePaste = (event) => {
|
11087
|
+
event.preventDefault();
|
11088
|
+
const pastedValue = event.clipboardData.getData("Text");
|
11089
|
+
const isValidDate = this.isPastedStringDateValid(pastedValue);
|
11090
|
+
this.setPastedValueAndValidation(isValidDate, pastedValue, event);
|
11091
|
+
};
|
11092
|
+
this.setDate = (date) => {
|
11093
|
+
if (date === null || date === "" || date === undefined) {
|
11094
|
+
this.day = null;
|
11095
|
+
this.month = null;
|
11096
|
+
this.year = null;
|
11097
|
+
this.inputsInOrder.forEach((input) => {
|
11098
|
+
input.classList.remove(this.FIT_TO_VALUE);
|
11099
|
+
this.setPreventInput(input, false);
|
11100
|
+
});
|
11101
|
+
this.handleDateChange(true);
|
11102
|
+
}
|
11103
|
+
else {
|
11104
|
+
if (isDateOrEpoch(date)) {
|
11105
|
+
let newDate;
|
11106
|
+
if (typeof date === "string") {
|
11107
|
+
// Checking if epoch date time
|
11108
|
+
newDate = new Date(+date);
|
11109
|
+
}
|
11110
|
+
else {
|
11111
|
+
newDate = date;
|
11112
|
+
}
|
11113
|
+
this.day = convertToDoubleDigits(newDate.getDate());
|
11114
|
+
this.month = convertToDoubleDigits(newDate.getMonth() + 1);
|
11115
|
+
this.year = newDate.getFullYear().toString();
|
11116
|
+
}
|
11117
|
+
else if (typeof date === "string") {
|
11118
|
+
const defaultDateArray = splitStringDate(date, this.dateFormat);
|
11119
|
+
this.year = defaultDateArray[0];
|
11120
|
+
this.month = defaultDateArray[1];
|
11121
|
+
this.day = defaultDateArray[2];
|
11122
|
+
}
|
11123
|
+
}
|
11124
|
+
this.setValidationMessage();
|
11125
|
+
};
|
11126
|
+
this.formatMinMax = (date) => {
|
11127
|
+
let formattedDate;
|
11128
|
+
const day = convertToDoubleDigits(date.getDate());
|
11129
|
+
const month = convertToDoubleDigits(date.getMonth() + 1);
|
11130
|
+
const year = date.getFullYear();
|
11131
|
+
switch (this.dateFormat) {
|
11132
|
+
case "DD/MM/YYYY":
|
11133
|
+
formattedDate = `${day}/${month}/${year}`;
|
11134
|
+
break;
|
11135
|
+
case "MM/DD/YYYY":
|
11136
|
+
formattedDate = `${month}/${day}/${year}`;
|
11137
|
+
break;
|
11138
|
+
case "YYYY/MM/DD":
|
11139
|
+
formattedDate = `${year}/${month}/${day}`;
|
11140
|
+
break;
|
11141
|
+
}
|
11142
|
+
return formattedDate;
|
11143
|
+
};
|
11144
|
+
this.updateInputValues = (day, month, year) => {
|
11145
|
+
this.dayInputEl.value = day;
|
11146
|
+
this.monthInputEl.value = month;
|
11147
|
+
this.yearInputEl.value = year;
|
11148
|
+
};
|
11149
|
+
// Set value in state based on input
|
11150
|
+
this.setInputValue = (input, clear = false) => {
|
11151
|
+
const newValue = clear ? "" : input.value;
|
11152
|
+
switch (input) {
|
11153
|
+
case this.dayInputEl:
|
11154
|
+
this.day = newValue;
|
11155
|
+
break;
|
11156
|
+
case this.monthInputEl:
|
11157
|
+
this.month = newValue;
|
11158
|
+
break;
|
11159
|
+
case this.yearInputEl:
|
11160
|
+
if (this.year !== newValue) {
|
11161
|
+
this.year = newValue;
|
11162
|
+
}
|
11163
|
+
}
|
11164
|
+
this.setValidationMessage();
|
11165
|
+
};
|
11166
|
+
this.setValidationMessage = () => {
|
11167
|
+
this.setDateValidity();
|
11168
|
+
if (!isEmptyString(this.day) &&
|
11169
|
+
!isEmptyString(this.month) &&
|
11170
|
+
!isEmptyString(this.year)) {
|
11171
|
+
// Check whether date actually exists
|
11172
|
+
// (used https://www.hectane.com/blog/javascript-date-validation-with-leap-year)
|
11173
|
+
this.selectedDate = this.convertToDate(this.year, this.month, this.day);
|
11174
|
+
this.isValidDate =
|
11175
|
+
+this.selectedDate !== 0 && this.selectedDate.getDate() == +this.day;
|
11176
|
+
this.isDisabledDate = this.isSelectedDateDisabled();
|
11177
|
+
if (!this.isValidDate || this.isDisabledDate) {
|
11178
|
+
this.inputsInOrder.forEach((input) => input.setAttribute(this.ARIA_INVALID, "true"));
|
11179
|
+
}
|
11180
|
+
else {
|
11181
|
+
this.inputsInOrder.forEach((input) => input.removeAttribute(this.ARIA_INVALID));
|
11182
|
+
}
|
11183
|
+
}
|
11184
|
+
else {
|
11185
|
+
this.selectedDate = null;
|
11186
|
+
}
|
11187
|
+
if (!(this.isValidDay && this.isValidMonth && this.isValidDate)) {
|
11188
|
+
this.invalidDateText = "Please enter a valid date.";
|
11189
|
+
}
|
11190
|
+
else if (this.isDisabledDate && this.selectedDate !== null) {
|
11191
|
+
if (this.isBeforeMin) {
|
11192
|
+
if (this.disablePast) {
|
11193
|
+
this.invalidDateText = this.disablePastMessage;
|
11194
|
+
}
|
11195
|
+
else {
|
11196
|
+
this.invalidDateText = `Please enter a date after ${this.formatMinMax(this.minDate)}.`;
|
11197
|
+
}
|
11198
|
+
}
|
11199
|
+
else if (this.isAfterMax) {
|
11200
|
+
if (this.disableFuture) {
|
11201
|
+
this.invalidDateText = this.disableFutureMessage;
|
11202
|
+
}
|
11203
|
+
else {
|
11204
|
+
this.invalidDateText = `Please enter a date before ${this.formatMinMax(this.maxDate)}.`;
|
11205
|
+
}
|
11206
|
+
}
|
11207
|
+
else if (this.disableDays.length !== 0) {
|
11208
|
+
this.invalidDateText = this.disableDaysMessage;
|
11209
|
+
}
|
11210
|
+
else {
|
11211
|
+
if (this.disablePast) {
|
11212
|
+
this.invalidDateText = this.disablePastMessage;
|
11213
|
+
}
|
11214
|
+
if (this.disableFuture) {
|
11215
|
+
this.invalidDateText = this.disableFutureMessage;
|
11216
|
+
}
|
11217
|
+
}
|
11218
|
+
}
|
11219
|
+
else {
|
11220
|
+
this.invalidDateText = "";
|
11221
|
+
}
|
11222
|
+
};
|
11223
|
+
// Set refs to the input elements in the order they are displayed (based on the dateFormat)
|
11224
|
+
this.setInputsInOrder = () => {
|
11225
|
+
const inputs = this.el.shadowRoot.querySelectorAll("input");
|
11226
|
+
inputs.forEach((input) => this.inputsInOrder.push(input));
|
11227
|
+
};
|
11228
|
+
// Includes text usually added using aria-describedby
|
11229
|
+
// (which doesn't work on input component container)
|
11230
|
+
this.setAriaLabelledBy = () => {
|
11231
|
+
var _a;
|
11232
|
+
if (this.disabled &&
|
11233
|
+
!isEmptyString((_a = this.inputCompContainerEl) === null || _a === void 0 ? void 0 : _a.getAttribute(this.ARIA_LABELLED_BY))) {
|
11234
|
+
this.removeAriaLabelledBy();
|
11235
|
+
return;
|
11236
|
+
}
|
11237
|
+
if (this.disabled) {
|
11238
|
+
return;
|
11239
|
+
}
|
11240
|
+
const labelEl = this.el.shadowRoot.querySelector("label");
|
11241
|
+
const labelId = `${this.inputId}-label`;
|
11242
|
+
if (labelEl !== null && labelEl !== undefined) {
|
11243
|
+
labelEl.id = labelId;
|
11244
|
+
const hasValidation = (!isEmptyString(this.validationStatus) &&
|
11245
|
+
!isEmptyString(this.validationText)) ||
|
11246
|
+
!isEmptyString(this.invalidDateText);
|
11247
|
+
const labelledBy = `${labelId} ${this.screenReaderInfoId} ${getInputDescribedByText(this.inputId, this.helperText !== "" && this.helperText !== this.defaultHelperText, hasValidation)} ${this.selectedDate ? this.selectedDateInfoId : ""} ${this.assistiveHintId}`;
|
11248
|
+
this.inputCompContainerEl.setAttribute(this.ARIA_LABELLED_BY, labelledBy);
|
11249
|
+
}
|
11250
|
+
};
|
11251
|
+
// Sets boolean for each input, used to limit the number of characters within each field (2 for day / month, 4 for year)
|
11252
|
+
this.setPreventInput = (input, isPrevented) => {
|
11253
|
+
switch (input) {
|
11254
|
+
case this.dayInputEl:
|
11255
|
+
this.preventDayInput = isPrevented;
|
11256
|
+
break;
|
11257
|
+
case this.monthInputEl:
|
11258
|
+
this.preventMonthInput = isPrevented;
|
11259
|
+
break;
|
11260
|
+
case this.yearInputEl:
|
11261
|
+
this.preventYearInput = isPrevented;
|
11262
|
+
}
|
11263
|
+
};
|
11264
|
+
// Get input based on letter representing each date part ("D", "M" or "Y")
|
11265
|
+
// (retrieved from dateFormat)
|
11266
|
+
this.getInputFromDatePart = (datePart) => {
|
11267
|
+
const dayInput = (hAsync("input", { class: "day-input", id: "day-input", ref: (el) => (this.dayInputEl = el), "aria-label": "day", placeholder: "DD", disabled: this.disabled, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventDayInput) }));
|
11268
|
+
const monthInput = (hAsync("input", { id: "month-input", class: "month-input", ref: (el) => (this.monthInputEl = el), "aria-label": "month", placeholder: "MM", disabled: this.disabled, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventMonthInput) }));
|
11269
|
+
const yearInput = (hAsync("input", { id: "year-input", class: "year-input", ref: (el) => (this.yearInputEl = el), "aria-label": "year", placeholder: "YYYY", maxLength: 4, disabled: this.disabled, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventYearInput) }));
|
11270
|
+
let input;
|
11271
|
+
switch (datePart) {
|
11272
|
+
case "D":
|
11273
|
+
input = dayInput;
|
11274
|
+
break;
|
11275
|
+
case "M":
|
11276
|
+
input = monthInput;
|
11277
|
+
break;
|
11278
|
+
case "Y":
|
11279
|
+
input = yearInput;
|
11280
|
+
}
|
11281
|
+
return input;
|
11282
|
+
};
|
11283
|
+
// Get input elements in order of chosen date format
|
11284
|
+
this.getInputsInOrder = () => {
|
11285
|
+
const dateParts = this.dateFormat.split("/");
|
11286
|
+
const inputsInOrder = [];
|
11287
|
+
dateParts.forEach((part) => {
|
11288
|
+
inputsInOrder.push(this.getInputFromDatePart(part.substring(0, 1)));
|
11289
|
+
});
|
11290
|
+
return inputsInOrder;
|
11291
|
+
};
|
11292
|
+
// To add to the end of assistive hint to make it clearer that each date part has its own input
|
11293
|
+
// that can be changed individually
|
11294
|
+
this.getDescOfInputsOrder = () => {
|
11295
|
+
let description;
|
11296
|
+
switch (this.dateFormat) {
|
11297
|
+
case "DD/MM/YYYY":
|
11298
|
+
description = "day, month, and year";
|
11299
|
+
break;
|
11300
|
+
case "MM/DD/YYYY":
|
11301
|
+
description = "month, day, and year";
|
11302
|
+
break;
|
11303
|
+
case "YYYY/MM/DD":
|
11304
|
+
description = "year, month, and day";
|
11305
|
+
}
|
11306
|
+
return description;
|
11307
|
+
};
|
11308
|
+
// Add 'required' or 'invalid data' to span used in aria-labelledby
|
11309
|
+
// Many ARIA attributes aren't read out by screen reader when on the input component container
|
11310
|
+
this.getScreenReaderInfo = (validationStatus) => {
|
11311
|
+
let inputDescriptors = "";
|
11312
|
+
if (this.required) {
|
11313
|
+
inputDescriptors += "required";
|
11314
|
+
}
|
11315
|
+
if (validationStatus === IcInformationStatus.Error) {
|
11316
|
+
inputDescriptors += " invalid data";
|
11317
|
+
}
|
11318
|
+
return inputDescriptors === "" ? "" : inputDescriptors + ", ";
|
11319
|
+
};
|
11320
|
+
// Prevent non-number characters being entered
|
11321
|
+
// ('e' or '.' - which are usually allowed in <input type="number">)
|
11322
|
+
// And limit the number of characters within each field (2 for day / month, 4 for year)
|
11323
|
+
// (because 'maxlength' doesn't work on <input type="number">)
|
11324
|
+
this.preventInput = (event, isInputPrevented) => {
|
11325
|
+
const key = event.key;
|
11326
|
+
const input = event.target;
|
11327
|
+
let selectedString;
|
11328
|
+
if (input) {
|
11329
|
+
selectedString = input.value.substring(input.selectionStart, input.selectionEnd);
|
11330
|
+
}
|
11331
|
+
if (key === "e" ||
|
11332
|
+
key === "." ||
|
11333
|
+
key === "-" ||
|
11334
|
+
(event.key >= "0" &&
|
11335
|
+
event.key <= "9" &&
|
11336
|
+
isInputPrevented &&
|
11337
|
+
!selectedString)) {
|
11338
|
+
event.preventDefault();
|
11339
|
+
}
|
11340
|
+
};
|
11341
|
+
// Get whether date has been disabled using disableFuture or disablePast prop, but always allow current day
|
11342
|
+
// Consider using dateClamp and inDateRange
|
11343
|
+
this.isSelectedDateDisabled = () => {
|
11344
|
+
const currentDate = new Date();
|
11345
|
+
this.isAfterMax = false;
|
11346
|
+
this.isBeforeMin = false;
|
11347
|
+
let disabled = false;
|
11348
|
+
const isNotToday = this.selectedDate.toDateString() !== currentDate.toDateString();
|
11349
|
+
if (this.minDate && this.selectedDate < this.minDate && isNotToday) {
|
11350
|
+
this.isBeforeMin = true;
|
11351
|
+
disabled = true;
|
11352
|
+
}
|
11353
|
+
if (this.maxDate && this.selectedDate > this.maxDate && isNotToday) {
|
11354
|
+
this.isAfterMax = true;
|
11355
|
+
disabled = true;
|
11356
|
+
}
|
11357
|
+
if (this.disableDays.includes(this.selectedDate.getDay())) {
|
11358
|
+
disabled = true;
|
11359
|
+
}
|
11360
|
+
if (((this.disablePast && this.selectedDate < currentDate) ||
|
11361
|
+
(this.disableFuture && this.selectedDate > currentDate)) &&
|
11362
|
+
isNotToday) {
|
11363
|
+
disabled = true;
|
11364
|
+
}
|
11365
|
+
return disabled;
|
11366
|
+
};
|
11367
|
+
this.moveToNextInput = (currentInput) => {
|
11368
|
+
const currentInputPos = this.inputsInOrder.findIndex((input) => input === currentInput);
|
11369
|
+
const nextInput = this.inputsInOrder[currentInputPos + 1];
|
11370
|
+
this.preventAutoFormatting = false;
|
11371
|
+
if (nextInput) {
|
11372
|
+
nextInput.focus();
|
11373
|
+
}
|
11374
|
+
};
|
11375
|
+
this.moveToPreviousInput = (currentInput) => {
|
11376
|
+
const currentInputPos = this.inputsInOrder.findIndex((input) => input === currentInput);
|
11377
|
+
this.preventAutoFormatting = false;
|
11378
|
+
if (this.inputsInOrder[currentInputPos - 1]) {
|
11379
|
+
this.inputsInOrder[currentInputPos - 1].focus();
|
11380
|
+
}
|
11381
|
+
};
|
11382
|
+
this.autocompleteInput = (input) => {
|
11383
|
+
if (input === this.yearInputEl) {
|
11384
|
+
this.autocompleteYear();
|
11385
|
+
}
|
11386
|
+
else {
|
11387
|
+
const inputValue = input.value;
|
11388
|
+
// Autocomplete input as 2 characters (leading zero) when only 1 character entered (for day and month)
|
11389
|
+
if (inputValue.length === 1) {
|
11390
|
+
if (+inputValue === 0) {
|
11391
|
+
input.value = "01";
|
11392
|
+
}
|
11393
|
+
else {
|
11394
|
+
input.value = `0${inputValue}`;
|
11395
|
+
}
|
11396
|
+
}
|
11397
|
+
}
|
11398
|
+
if (input.value) {
|
11399
|
+
this.setInputValue(input);
|
11400
|
+
}
|
11401
|
+
};
|
11402
|
+
// Autocomplete year as current millennium when fewer than 4 characters entered
|
11403
|
+
this.autocompleteYear = () => {
|
11404
|
+
const inputValue = this.yearInputEl.value;
|
11405
|
+
const yearNumbers = ["2", "0", "0"];
|
11406
|
+
let autocompletedInput = "";
|
11407
|
+
if (inputValue) {
|
11408
|
+
yearNumbers.forEach((number, index) => {
|
11409
|
+
if (inputValue.length + index <= 3) {
|
11410
|
+
autocompletedInput += number;
|
11411
|
+
}
|
11412
|
+
});
|
11413
|
+
this.yearInputEl.value = `${autocompletedInput}${inputValue}`;
|
11414
|
+
}
|
11415
|
+
};
|
11416
|
+
this.convertToDate = (year, month, day) => {
|
11417
|
+
if (!isEmptyString(year) && !isEmptyString(month) && !isEmptyString(day)) {
|
11418
|
+
return new Date(+year, +month - 1, +day);
|
11419
|
+
}
|
11420
|
+
else {
|
11421
|
+
return null;
|
11422
|
+
}
|
11423
|
+
};
|
11424
|
+
this.handleHostBlur = () => {
|
11425
|
+
this.removeLabelledBy = false;
|
11426
|
+
this.icBlur.emit({ value: this.selectedDate });
|
11427
|
+
};
|
11428
|
+
this.handleHostFocus = () => {
|
11429
|
+
if (this.el.shadowRoot.activeElement.id.match(/(day|month|year)-input$/)) {
|
11430
|
+
this.removeLabelledBy = false;
|
11431
|
+
}
|
11432
|
+
else {
|
11433
|
+
this.removeLabelledBy = true;
|
11434
|
+
}
|
11435
|
+
this.icFocus.emit({ value: this.selectedDate });
|
11436
|
+
};
|
11437
|
+
this.handleFormReset = () => {
|
11438
|
+
// Get the initial value and populate day, month and year again.
|
11439
|
+
this.setDate(this.initialValue);
|
11440
|
+
this.setValidationMessage();
|
11441
|
+
this.handleDateChange(false);
|
11442
|
+
};
|
11443
|
+
this.getAriaLabel = (input) => {
|
11444
|
+
return input.getAttribute(this.ARIA_LABEL);
|
11445
|
+
};
|
11446
|
+
this.notifyScreenReaderArrowKeys = (input) => {
|
11447
|
+
const liveRegion = this.el.shadowRoot.querySelector("#live-region");
|
11448
|
+
let announcement = "";
|
11449
|
+
const ariaLabel = this.getAriaLabel(input);
|
11450
|
+
if (liveRegion && input.value) {
|
11451
|
+
if (input === this.monthInputEl &&
|
11452
|
+
!!IcDateInputMonths[+input.value - 1]) {
|
11453
|
+
announcement = `${input.value} - ${IcDateInputMonths[+input.value - 1]}, ${ariaLabel}`;
|
11454
|
+
}
|
11455
|
+
if (input === this.dayInputEl || input === this.yearInputEl) {
|
11456
|
+
announcement = `${input.value}, ${ariaLabel}`;
|
11457
|
+
}
|
11458
|
+
liveRegion.textContent = announcement;
|
11459
|
+
}
|
11460
|
+
};
|
11461
|
+
this.notifyScreenReaderInput = (input, liveRegion) => {
|
11462
|
+
let announcement = "";
|
11463
|
+
const ariaLabel = this.getAriaLabel(input);
|
11464
|
+
if (input === this.dayInputEl || input === this.monthInputEl) {
|
11465
|
+
if (input.value.length === 2) {
|
11466
|
+
if (input === this.monthInputEl &&
|
11467
|
+
!!IcDateInputMonths[+input.value - 1] &&
|
11468
|
+
this.isValidMonth) {
|
11469
|
+
announcement = `${input.value} - ${IcDateInputMonths[+input.value - 1]}, ${ariaLabel}`;
|
11470
|
+
}
|
11471
|
+
if (input === this.dayInputEl && this.isValidDay) {
|
11472
|
+
announcement = `${input.value}, ${ariaLabel}`;
|
11473
|
+
}
|
11474
|
+
}
|
11475
|
+
else {
|
11476
|
+
announcement = "";
|
11477
|
+
}
|
11478
|
+
}
|
11479
|
+
else {
|
11480
|
+
if (input.value.length === 4) {
|
11481
|
+
announcement = `${input.value}, ${ariaLabel}`;
|
11482
|
+
}
|
11483
|
+
else {
|
11484
|
+
announcement = "";
|
11485
|
+
}
|
11486
|
+
}
|
11487
|
+
liveRegion.textContent = announcement;
|
11488
|
+
};
|
11489
|
+
this.setFitToValueStyling = (input) => {
|
11490
|
+
if (input.value) {
|
11491
|
+
input.classList.add(this.FIT_TO_VALUE);
|
11492
|
+
}
|
11493
|
+
else {
|
11494
|
+
input.classList.remove(this.FIT_TO_VALUE);
|
11495
|
+
}
|
11496
|
+
};
|
11497
|
+
this.setAriaInvalid = (validDay, validMonth, validDate, disabledDate) => {
|
11498
|
+
if (this.inputsInOrder.length) {
|
11499
|
+
this.inputsInOrder.forEach((input) => {
|
11500
|
+
input.removeAttribute(this.ARIA_INVALID);
|
11501
|
+
});
|
11502
|
+
if (!validDay) {
|
11503
|
+
this.dayInputEl.setAttribute(this.ARIA_INVALID, "true");
|
11504
|
+
}
|
11505
|
+
if (!validMonth) {
|
11506
|
+
this.monthInputEl.setAttribute(this.ARIA_INVALID, "true");
|
11507
|
+
}
|
11508
|
+
if (!validDate || disabledDate) {
|
11509
|
+
this.inputsInOrder.forEach((input) => {
|
11510
|
+
input.setAttribute(this.ARIA_INVALID, "true");
|
11511
|
+
});
|
11512
|
+
}
|
11513
|
+
}
|
11514
|
+
};
|
11515
|
+
this.handleClear = () => {
|
11516
|
+
this.inputsInOrder.forEach((input) => {
|
11517
|
+
input.classList.remove(this.FIT_TO_VALUE);
|
11518
|
+
this.setInputValue(input, true);
|
11519
|
+
this.setPreventInput(input, false);
|
11520
|
+
});
|
11521
|
+
this.isDateSetFromKeyboardEvent = false;
|
11522
|
+
this.setValueAndEmitChange(null);
|
11523
|
+
this.setValidationMessage();
|
11524
|
+
this.handleDateChange(true);
|
11525
|
+
this.inputsInOrder[0].focus();
|
11526
|
+
};
|
11527
|
+
this.handleCalendarOpen = (ev) => {
|
11528
|
+
ev.stopImmediatePropagation();
|
11529
|
+
this.calendarButtonEl.shadowRoot
|
11530
|
+
.querySelector("ic-tooltip")
|
11531
|
+
.displayTooltip(false);
|
11532
|
+
this.calendarButtonClicked.emit({ value: this.selectedDate });
|
11533
|
+
this.calendarButtonEl.shadowRoot
|
11534
|
+
.querySelector("ic-tooltip")
|
11535
|
+
.displayTooltip(false);
|
11536
|
+
this.isDateSetFromKeyboardEvent = false;
|
11537
|
+
};
|
11538
|
+
this.setValueAndEmitChange = (value) => {
|
11539
|
+
if (this.value !== value) {
|
11540
|
+
this.icChange.emit({ value: value });
|
11541
|
+
this.value = value;
|
11542
|
+
}
|
11543
|
+
};
|
11544
|
+
this.handleCalendarFocus = () => {
|
11545
|
+
this.calendarFocused = true;
|
11546
|
+
};
|
11547
|
+
this.handleCalendarBlur = () => {
|
11548
|
+
this.calendarFocused = false;
|
11549
|
+
};
|
11550
|
+
this.handleClearFocus = () => {
|
11551
|
+
this.removeLabelledBy = true;
|
11552
|
+
this.clearButtonFocused = true;
|
11553
|
+
};
|
11554
|
+
this.handleClearBlur = (ev) => {
|
11555
|
+
this.clearButtonFocused = false;
|
11556
|
+
if (ev.relatedTarget.id.match(/(day|year)-input$/)) {
|
11557
|
+
this.removeLabelledBy = false;
|
11558
|
+
return;
|
11559
|
+
}
|
11560
|
+
this.removeLabelledBy = true;
|
11561
|
+
};
|
11562
|
+
this.day = "";
|
11563
|
+
this.invalidDateText = undefined;
|
11564
|
+
this.maxDate = undefined;
|
11565
|
+
this.minDate = undefined;
|
11566
|
+
this.month = "";
|
11567
|
+
this.year = "";
|
11568
|
+
this.calendarFocused = false;
|
11569
|
+
this.clearButtonFocused = false;
|
11570
|
+
this.removeLabelledBy = false;
|
11571
|
+
this.dateFormat = "DD/MM/YYYY";
|
11572
|
+
this.disabled = false;
|
11573
|
+
this.disableDays = [];
|
11574
|
+
this.disableDaysMessage = "The date you have selected is on a day of the week that is not allowed. Please select another date.";
|
11575
|
+
this.disableFuture = false;
|
11576
|
+
this.disableFutureMessage = "Dates in the future are not allowed. Please select a date in the past.";
|
11577
|
+
this.disablePast = false;
|
11578
|
+
this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
|
11579
|
+
this.helperText = undefined;
|
11580
|
+
this.inputId = `ic-date-input-${inputIds$5++}`;
|
11581
|
+
this.label = undefined;
|
11582
|
+
this.max = "";
|
11583
|
+
this.min = "";
|
11584
|
+
this.name = this.inputId;
|
11585
|
+
this.required = false;
|
11586
|
+
this.showCalendarButton = false;
|
11587
|
+
this.showClearButton = true;
|
11588
|
+
this.size = "default";
|
11589
|
+
this.value = "";
|
11590
|
+
this.validationStatus = "";
|
11591
|
+
this.validationText = "";
|
11592
|
+
}
|
11593
|
+
watchMaxHandler() {
|
11594
|
+
if (this.disableFuture) {
|
11595
|
+
this.maxDate = new Date();
|
11596
|
+
}
|
11597
|
+
else {
|
11598
|
+
this.maxDate = createDate(this.max, this.dateFormat);
|
11599
|
+
}
|
11600
|
+
}
|
11601
|
+
watchMinHandler() {
|
11602
|
+
if (this.disablePast) {
|
11603
|
+
this.minDate = new Date();
|
11604
|
+
}
|
11605
|
+
else {
|
11606
|
+
this.minDate = createDate(this.min, this.dateFormat);
|
11607
|
+
}
|
11608
|
+
}
|
11609
|
+
disconnectedCallback() {
|
11610
|
+
removeFormResetListener(this.el, this.handleFormReset);
|
11611
|
+
}
|
11612
|
+
componentWillLoad() {
|
11613
|
+
this.defaultHelperText = `Use format ${this.dateFormat}`;
|
11614
|
+
if (isEmptyString(this.helperText)) {
|
11615
|
+
this.helperText = this.defaultHelperText;
|
11616
|
+
}
|
11617
|
+
this.watchMinHandler();
|
11618
|
+
this.watchMaxHandler();
|
11619
|
+
if (this.value) {
|
11620
|
+
this.setDate(this.value);
|
11621
|
+
}
|
11622
|
+
this.screenReaderInfoId = `${this.inputId}-screen-reader-info`;
|
11623
|
+
this.assistiveHintId = `${this.inputId}-assistive-hint`;
|
11624
|
+
this.selectedDateInfoId = `${this.inputId}-selected-date-info`;
|
11625
|
+
addFormResetListener(this.el, this.handleFormReset);
|
11626
|
+
}
|
11627
|
+
componentDidLoad() {
|
11628
|
+
this.setInputsInOrder();
|
11629
|
+
onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Date Input");
|
11630
|
+
if (this.value) {
|
11631
|
+
this.updateInputValues(this.day, this.month, this.year);
|
11632
|
+
this.inputsInOrder.forEach((input) => {
|
11633
|
+
input.classList.add(this.FIT_TO_VALUE);
|
11634
|
+
});
|
11635
|
+
}
|
11636
|
+
this.setAriaInvalid(this.isValidDay, this.isValidMonth, this.isValidDate, this.isDisabledDate);
|
11637
|
+
if (this.value) {
|
11638
|
+
this.notifyScreenReaderSelectedDate();
|
11639
|
+
}
|
11640
|
+
this.inputsInOrder.forEach((input) => {
|
11641
|
+
input.addEventListener("input", this.handleInput);
|
11642
|
+
input.addEventListener("focus", this.handleFocus);
|
11643
|
+
input.addEventListener("blur", this.handleBlur);
|
11644
|
+
});
|
11645
|
+
// Prevent asterisk being read out after the label by screen reader (by applying aria-hidden)
|
11646
|
+
// Needed because label is included in 'aria-labelledby' instead of using 'aria-label'
|
11647
|
+
const labelEl = this.el.shadowRoot.querySelector("label");
|
11648
|
+
if (this.required) {
|
11649
|
+
const asteriskSpan = document.createElement("span");
|
11650
|
+
asteriskSpan.setAttribute("aria-hidden", "true");
|
11651
|
+
asteriskSpan.textContent = " *";
|
11652
|
+
labelEl === null || labelEl === void 0 ? void 0 : labelEl.appendChild(asteriskSpan);
|
11653
|
+
}
|
11654
|
+
}
|
11655
|
+
componentWillUpdate() {
|
11656
|
+
if (!this.isDateSetFromKeyboardEvent) {
|
11657
|
+
this.setDate(this.value);
|
11658
|
+
}
|
11659
|
+
this.setAriaInvalid(this.isValidDay, this.isValidMonth, this.isValidDate, this.isDisabledDate);
|
11660
|
+
this.handleDateChange(false);
|
11661
|
+
this.isDateSetFromKeyboardEvent = false;
|
11662
|
+
}
|
11663
|
+
componentDidRender() {
|
11664
|
+
if (this.removeLabelledBy) {
|
11665
|
+
this.removeAriaLabelledBy();
|
11666
|
+
return;
|
11667
|
+
}
|
11668
|
+
this.setAriaLabelledBy();
|
11669
|
+
}
|
11670
|
+
/**
|
11671
|
+
* Returns the value as a Date object
|
11672
|
+
* @returns Date
|
11673
|
+
*/
|
11674
|
+
async getDate() {
|
11675
|
+
return this.selectedDate;
|
11676
|
+
}
|
11677
|
+
/**
|
11678
|
+
* @internal Sets focus on the calendar button.
|
11679
|
+
*/
|
11680
|
+
async setCalendarFocus() {
|
11681
|
+
if (this.calendarButtonEl) {
|
11682
|
+
this.calendarButtonEl.focus();
|
11683
|
+
}
|
11684
|
+
}
|
11685
|
+
/**
|
11686
|
+
* @internal Used to pass disabledDays from parent component.
|
11687
|
+
*/
|
11688
|
+
async setDisableDays(days) {
|
11689
|
+
this.disableDays = days;
|
11690
|
+
}
|
11691
|
+
removeAriaLabelledBy() {
|
11692
|
+
this.inputCompContainerEl.removeAttribute(this.ARIA_LABELLED_BY);
|
11693
|
+
}
|
11694
|
+
setPastedValueAndValidation(isValidDate, pastedValue, event) {
|
11695
|
+
switch (true) {
|
11696
|
+
case isValidDate: {
|
11697
|
+
const nextParsedValue = this.isZuluTime
|
11698
|
+
? extractDateFromZuluDateTime(pastedValue)
|
11699
|
+
: pastedValue;
|
11700
|
+
const dateParts = nextParsedValue.split(/-|\/|\./);
|
11701
|
+
this.inputsInOrder.forEach((input, index) => {
|
11702
|
+
input.classList.add(this.FIT_TO_VALUE);
|
11703
|
+
if (this.isZuluTime) {
|
11704
|
+
this.pasteZuluDateTime(dateParts, index);
|
11705
|
+
}
|
11706
|
+
else {
|
11707
|
+
let dateValue;
|
11708
|
+
if (input === this.dayInputEl || input === this.monthInputEl) {
|
11709
|
+
dateValue = this.slicePastedDate(2, dateParts[index]);
|
11710
|
+
}
|
11711
|
+
else {
|
11712
|
+
dateValue = this.slicePastedDate(4, dateParts[index]);
|
11713
|
+
}
|
11714
|
+
input.value = dateValue;
|
11715
|
+
this.setInputValue(input);
|
11716
|
+
this.autocompleteInput(input);
|
11717
|
+
}
|
11718
|
+
});
|
11719
|
+
this.isZuluTime = false;
|
11720
|
+
break;
|
11721
|
+
}
|
11722
|
+
case (pastedValue.length === 1 ||
|
11723
|
+
pastedValue.length === 2 ||
|
11724
|
+
pastedValue.length === 4) &&
|
11725
|
+
isNumeric(pastedValue):
|
11726
|
+
if (this.checkSingleCopiedValueIsValid(event.target, pastedValue)) {
|
11727
|
+
// Check if copied value can be pasted into input
|
11728
|
+
this.setInputPasteValue(event.target, pastedValue);
|
11729
|
+
this.setInputValue(event.target);
|
11730
|
+
}
|
11731
|
+
else {
|
11732
|
+
this.displayPastedValidation(event);
|
11733
|
+
}
|
11734
|
+
break;
|
11735
|
+
case pastedValue.length === 3 && isNumeric(pastedValue):
|
11736
|
+
if (event.target !== this.yearInputEl) {
|
11737
|
+
this.displayPastedValidation(event);
|
11738
|
+
}
|
11739
|
+
else {
|
11740
|
+
this.setInputPasteValue(event.target, pastedValue);
|
11741
|
+
this.setInputValue(event.target);
|
11742
|
+
}
|
11743
|
+
break;
|
11744
|
+
case pastedValue.length >= 5 && isNumeric(pastedValue):
|
11745
|
+
this.displayPastedValidation(event);
|
11746
|
+
}
|
11747
|
+
}
|
11748
|
+
pasteZuluDateTime(dateParts, index) {
|
11749
|
+
// ['YYYY', 'MM', 'DD']
|
11750
|
+
if (index === 0) {
|
11751
|
+
const dateValue = this.slicePastedDate(4, dateParts[index]);
|
11752
|
+
this.yearInputEl.value = dateValue;
|
11753
|
+
this.setInputValue(this.yearInputEl);
|
11754
|
+
}
|
11755
|
+
else if (index === 1) {
|
11756
|
+
// The month value is the second item in the array
|
11757
|
+
const dateValue = this.slicePastedDate(2, dateParts[index]);
|
11758
|
+
this.monthInputEl.value = dateValue;
|
11759
|
+
this.setInputValue(this.monthInputEl);
|
11760
|
+
}
|
11761
|
+
else {
|
11762
|
+
const dateValue = this.slicePastedDate(2, dateParts[index]);
|
11763
|
+
this.dayInputEl.value = dateValue;
|
11764
|
+
this.setInputValue(this.dayInputEl);
|
11765
|
+
}
|
11766
|
+
}
|
11767
|
+
displayPastedValidation(event) {
|
11768
|
+
var _a;
|
11769
|
+
if (((_a = this.invalidDateText) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
11770
|
+
this.previousInvalidDateTest = this.invalidDateText;
|
11771
|
+
}
|
11772
|
+
this.invalidDateText = `Please paste a valid ${this.getAriaLabel(event.target)}`;
|
11773
|
+
this.validationStatus = IcInformationStatus.Error;
|
11774
|
+
this.isPasteValidationDisplayed = true;
|
11775
|
+
}
|
11776
|
+
setPasteInvalidText() {
|
11777
|
+
var _a;
|
11778
|
+
if (this.isPasteValidationDisplayed) {
|
11779
|
+
this.invalidDateText = (_a = this.previousInvalidDateTest) !== null && _a !== void 0 ? _a : "";
|
11780
|
+
this.isPasteValidationDisplayed = false;
|
11781
|
+
// This is to prevent setDate from triggering within componentWillUpdate
|
11782
|
+
this.isDateSetFromKeyboardEvent = true;
|
11783
|
+
}
|
11784
|
+
}
|
11785
|
+
notifyScreenReader(input, event) {
|
11786
|
+
const liveRegion = this.el.shadowRoot.querySelector("#live-region");
|
11787
|
+
if (liveRegion) {
|
11788
|
+
if (this.isKeyboardOrEvent(event)) {
|
11789
|
+
this.notifyScreenReaderArrowKeys(input);
|
11790
|
+
}
|
11791
|
+
else if (Object.prototype.toString.call(event) === this.INPUT_EVENT_OBJECT_STRING) {
|
11792
|
+
this.notifyScreenReaderInput(input, liveRegion);
|
11793
|
+
}
|
11794
|
+
}
|
11795
|
+
}
|
11796
|
+
render() {
|
11797
|
+
const { inputId, label, disabled, helperText, showClearButton, showCalendarButton, size, } = this;
|
11798
|
+
const hasCustomValidation = !isEmptyString(this.validationStatus) &&
|
11799
|
+
!isEmptyString(this.validationText);
|
11800
|
+
const validationStatus = hasCustomValidation
|
11801
|
+
? this.validationStatus
|
11802
|
+
: !isEmptyString(this.invalidDateText)
|
11803
|
+
? IcInformationStatus.Error
|
11804
|
+
: "";
|
11805
|
+
const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
|
11806
|
+
renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
|
11807
|
+
return (hAsync(Host, { onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, hAsync("ic-input-container", { disabled: disabled }, hAsync("ic-input-label", { for: inputId, label: label, helperText: helperText, disabled: disabled }), hAsync("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), `${this.defaultHelperText}.`), hAsync("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), hAsync("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("ic-input-component-container", { id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group" }, hAsync("div", { class: "input-container" }, hAsync("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), hAsync("div", { class: "action-buttons" }, showClearButton && (hAsync("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
|
11808
|
+
["clear-button"]: true,
|
11809
|
+
["hidden"]: isEmptyString(this.day) &&
|
11810
|
+
isEmptyString(this.month) &&
|
11811
|
+
isEmptyString(this.year),
|
11812
|
+
}, disabled: this.disabled, innerHTML: Clear$2, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon", appearance: this.clearButtonFocused
|
11813
|
+
? IcThemeForegroundEnum.Light
|
11814
|
+
: IcThemeForegroundEnum.Dark, size: size })), showCalendarButton && (hAsync("div", { class: "show-calendar-button-wrapper" }, hAsync("div", { class: { divider: true, [size]: true } }), hAsync("ic-button", { id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, appearance: this.calendarFocused
|
11815
|
+
? IcThemeForegroundEnum.Light
|
11816
|
+
: IcThemeForegroundEnum.Default })))))), hAsync("span", { id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, hAsync("span", { ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (hAsync("ic-input-validation", { status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
|
11817
|
+
}
|
11818
|
+
static get delegatesFocus() { return true; }
|
11819
|
+
get el() { return getElement(this); }
|
11820
|
+
static get watchers() { return {
|
11821
|
+
"max": ["watchMaxHandler"],
|
11822
|
+
"min": ["watchMinHandler"]
|
11823
|
+
}; }
|
11824
|
+
static get style() { return icDateInputCss; }
|
11825
|
+
static get cmpMeta() { return {
|
11826
|
+
"$flags$": 25,
|
11827
|
+
"$tagName$": "ic-date-input",
|
11828
|
+
"$members$": {
|
11829
|
+
"dateFormat": [1, "date-format"],
|
11830
|
+
"disabled": [4],
|
11831
|
+
"disableDays": [1040],
|
11832
|
+
"disableDaysMessage": [1, "disable-days-message"],
|
11833
|
+
"disableFuture": [4, "disable-future"],
|
11834
|
+
"disableFutureMessage": [1, "disable-future-message"],
|
11835
|
+
"disablePast": [4, "disable-past"],
|
11836
|
+
"disablePastMessage": [1, "disable-past-message"],
|
11837
|
+
"helperText": [1025, "helper-text"],
|
11838
|
+
"inputId": [1, "input-id"],
|
11839
|
+
"label": [1],
|
11840
|
+
"max": [1],
|
11841
|
+
"min": [1],
|
11842
|
+
"name": [1],
|
11843
|
+
"required": [4],
|
11844
|
+
"showCalendarButton": [4, "show-calendar-button"],
|
11845
|
+
"showClearButton": [4, "show-clear-button"],
|
11846
|
+
"size": [1],
|
11847
|
+
"value": [1025],
|
11848
|
+
"validationStatus": [1025, "validation-status"],
|
11849
|
+
"validationText": [1, "validation-text"],
|
11850
|
+
"day": [32],
|
11851
|
+
"invalidDateText": [32],
|
11852
|
+
"maxDate": [32],
|
11853
|
+
"minDate": [32],
|
11854
|
+
"month": [32],
|
11855
|
+
"year": [32],
|
11856
|
+
"calendarFocused": [32],
|
11857
|
+
"clearButtonFocused": [32],
|
11858
|
+
"removeLabelledBy": [32],
|
11859
|
+
"getDate": [64],
|
11860
|
+
"setCalendarFocus": [64],
|
11861
|
+
"setDisableDays": [64]
|
11862
|
+
},
|
11863
|
+
"$listeners$": undefined,
|
11864
|
+
"$lazyBundleId$": "-",
|
11865
|
+
"$attrsToReflect$": []
|
11866
|
+
}; }
|
11867
|
+
}
|
11868
|
+
|
11869
|
+
var chevron = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
11870
|
+
<path d="M9.70687 6L8.29688 7.41L12.8769 12L8.29688 16.59L9.70687 18L15.7069 12L9.70687 6Z" fill="currentColor"/>
|
11871
|
+
</svg>
|
11872
|
+
`;
|
11873
|
+
|
11874
|
+
const DayButton = ({ focussed, today, day, monthInView, onFocusDay, onBlurDay, onSelectDay, selected, focussedDayRef, inRange, showDaysOutsideMonth, disableDay, }) => {
|
11875
|
+
const handleDayClick = () => {
|
11876
|
+
onSelectDay(day);
|
11877
|
+
};
|
11878
|
+
const handleDayFocus = () => {
|
11879
|
+
onFocusDay();
|
11880
|
+
};
|
11881
|
+
const handleDayBlur = () => {
|
11882
|
+
onBlurDay();
|
11883
|
+
};
|
11884
|
+
const dayNames = stringEnumToArray(IcDayNames);
|
11885
|
+
const months = stringEnumToArray(IcDateInputMonths);
|
11886
|
+
const outsideRange = !inRange || disableDay;
|
11887
|
+
const outsideMonth = monthInView !== day.getMonth();
|
11888
|
+
const disabled = outsideRange || (outsideMonth && !showDaysOutsideMonth);
|
11889
|
+
return (hAsync("div", { class: "day-button-container" },
|
11890
|
+
hAsync("button", { class: {
|
11891
|
+
"day-button": true,
|
11892
|
+
"outside-month": outsideMonth,
|
11893
|
+
"outside-range": outsideRange,
|
11894
|
+
hidden: outsideMonth && !showDaysOutsideMonth,
|
11895
|
+
disabled: disabled,
|
11896
|
+
today: today,
|
11897
|
+
selected: selected,
|
11898
|
+
focussed: focussed,
|
11899
|
+
}, tabIndex: focussed ? 0 : -1, "aria-hidden": outsideMonth ? "true" : "false", "aria-disabled": disabled ? "true" : "false", "aria-current": today ? "date" : undefined, "aria-label": disabled || outsideMonth || outsideRange
|
11900
|
+
? undefined
|
11901
|
+
: `Choose ${dayNames[day.getDay()]}, ${day.getDate()} ${months[day.getMonth()]} ${day.getFullYear()}`, disabled: disabled, onClick: handleDayClick, onBlur: handleDayBlur, onFocus: handleDayFocus, ref: (el) => {
|
11902
|
+
if (focussed && el && focussedDayRef) {
|
11903
|
+
focussedDayRef(el);
|
11904
|
+
}
|
11905
|
+
} }, (!outsideMonth || (outsideMonth && showDaysOutsideMonth)) && (hAsync("ic-typography", { variant: "subtitle-small", italic: outsideMonth }, day.getDate())))));
|
11906
|
+
};
|
11907
|
+
|
11908
|
+
const MonthPicker = ({ size, focussedMonth, monthInView, onSelectMonth, onKeyDown, focussedMonthRef, minDate, maxDate, yearInView, }) => {
|
11909
|
+
const handleMonthClick = (ev) => {
|
11910
|
+
const button = ev.target;
|
11911
|
+
onSelectMonth(Number(button.getAttribute("data-month")));
|
11912
|
+
};
|
11913
|
+
const monthNames = stringEnumToArray(IcDateInputMonths);
|
11914
|
+
return (hAsync("div", { class: {
|
11915
|
+
"month-picker": true,
|
11916
|
+
}, role: "list" }, monthNames.map((month, index) => {
|
11917
|
+
const current = monthInView === index;
|
11918
|
+
const focussed = focussedMonth === index;
|
11919
|
+
const outsideRange = !dateInRange(new Date(yearInView, index, 1), minDate ? getMonthStart(minDate) : null, maxDate ? getMonthEnd(maxDate) : null);
|
11920
|
+
return (hAsync("ic-button", { role: "listitem", class: {
|
11921
|
+
"month-button": true,
|
11922
|
+
selected: current,
|
11923
|
+
focussed: focussed,
|
11924
|
+
disabled: outsideRange,
|
11925
|
+
}, "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) => {
|
11926
|
+
if (focussed && el) {
|
11927
|
+
focussedMonthRef(el);
|
11928
|
+
}
|
11929
|
+
} }, month));
|
11930
|
+
})));
|
11931
|
+
};
|
11932
|
+
|
11933
|
+
const YearPicker = ({ decadeView, size, focussedYear, yearInView, onSelectYear, onFocusYear, onBlurYear, onKeyDown, minDate, maxDate, focussedYearRef, }) => {
|
11934
|
+
const handleYearClick = (ev) => {
|
11935
|
+
const button = ev.target;
|
11936
|
+
onSelectYear(Number(button.getAttribute("data-year")));
|
11937
|
+
};
|
11938
|
+
const handleYearFocus = () => {
|
11939
|
+
onFocusYear();
|
11940
|
+
};
|
11941
|
+
const handleYearBlur = () => {
|
11942
|
+
onBlurYear();
|
11943
|
+
};
|
11944
|
+
const navButtonMouseDownHandler = (ev) => {
|
11945
|
+
ev.preventDefault();
|
11946
|
+
};
|
11947
|
+
const prevDecade = decadeView[0];
|
11948
|
+
const nextDecade = decadeView[11];
|
11949
|
+
const years = decadeView.slice(1, 11);
|
11950
|
+
return (hAsync("div", { class: "year-picker", role: "list" },
|
11951
|
+
hAsync("div", { class: "prev-decade", "aria-hidden": "true" },
|
11952
|
+
hAsync("ic-button", { id: "prev-decade-button", class: {
|
11953
|
+
"year-button": true,
|
11954
|
+
}, disabled: !yearInRange(prevDecade, minDate, maxDate), "data-year": prevDecade, tabIndex: -1, variant: "tertiary", onClick: handleYearClick, onMouseDown: navButtonMouseDownHandler, "aria-hidden": "true", size: size },
|
11955
|
+
`${prevDecade - 9}s`,
|
11956
|
+
hAsync("svg", { slot: "left-icon", width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
11957
|
+
hAsync("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" })))),
|
11958
|
+
years.map((yr) => {
|
11959
|
+
const current = yearInView === yr;
|
11960
|
+
const focussed = focussedYear === yr;
|
11961
|
+
return (hAsync("ic-button", { class: {
|
11962
|
+
"year-button": true,
|
11963
|
+
selected: current,
|
11964
|
+
focussed: focussed,
|
11965
|
+
}, 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) => {
|
11966
|
+
if (focussed && el) {
|
11967
|
+
focussedYearRef(el);
|
11968
|
+
}
|
11969
|
+
} }, yr));
|
11970
|
+
}),
|
11971
|
+
hAsync("div", { class: "next-decade", "aria-hidden": "true" },
|
11972
|
+
hAsync("ic-button", { id: "next-decade-button", class: {
|
11973
|
+
"year-button": true,
|
11974
|
+
flip: true,
|
11975
|
+
}, disabled: !yearInRange(nextDecade, minDate, maxDate), "data-year": nextDecade, tabIndex: -1, variant: "tertiary", onClick: handleYearClick, onMouseDown: navButtonMouseDownHandler, "aria-hidden": "true", size: size },
|
11976
|
+
`${nextDecade}s`,
|
11977
|
+
hAsync("svg", { slot: "right-icon", width: "12", height: "12", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
11978
|
+
hAsync("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" }))))));
|
11979
|
+
};
|
11980
|
+
|
11981
|
+
const icDatePickerCss = "/*!@html*/html.sc-ic-date-picker{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-date-picker{margin:0}/*!@main*/main.sc-ic-date-picker{display:block}/*!@h1*/h1.sc-ic-date-picker{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-date-picker{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-date-picker{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-date-picker{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-date-picker{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-date-picker,strong.sc-ic-date-picker{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-date-picker,kbd.sc-ic-date-picker,samp.sc-ic-date-picker{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-date-picker{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-date-picker,sup.sc-ic-date-picker{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-date-picker{bottom:-0.25em}/*!@sup*/sup.sc-ic-date-picker{top:-0.5em}/*!@img*/img.sc-ic-date-picker{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-date-picker,input.sc-ic-date-picker,optgroup.sc-ic-date-picker,select.sc-ic-date-picker,textarea.sc-ic-date-picker{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-date-picker,input.sc-ic-date-picker{overflow:visible}/*!@button,\nselect*/button.sc-ic-date-picker,select.sc-ic-date-picker{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-date-picker,[type=\"button\"].sc-ic-date-picker,[type=\"reset\"].sc-ic-date-picker,[type=\"submit\"].sc-ic-date-picker{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-date-picker::-moz-focus-inner,[type=\"button\"].sc-ic-date-picker::-moz-focus-inner,[type=\"reset\"].sc-ic-date-picker::-moz-focus-inner,[type=\"submit\"].sc-ic-date-picker::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-date-picker:-moz-focusring,[type=\"button\"].sc-ic-date-picker:-moz-focusring,[type=\"reset\"].sc-ic-date-picker:-moz-focusring,[type=\"submit\"].sc-ic-date-picker:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-date-picker{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-date-picker{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-date-picker{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-date-picker{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-date-picker,[type=\"radio\"].sc-ic-date-picker{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-date-picker::-webkit-inner-spin-button,[type=\"number\"].sc-ic-date-picker::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-date-picker{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-date-picker::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-date-picker::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-date-picker{display:block}/*!@summary*/summary.sc-ic-date-picker{display:list-item}/*!@template*/template.sc-ic-date-picker{display:none}/*!@[hidden]*/[hidden].sc-ic-date-picker{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-date-picker,body.sc-ic-date-picker,div.sc-ic-date-picker,span.sc-ic-date-picker,applet.sc-ic-date-picker,object.sc-ic-date-picker,iframe.sc-ic-date-picker,h1.sc-ic-date-picker,h2.sc-ic-date-picker,h3.sc-ic-date-picker,h4.sc-ic-date-picker,h5.sc-ic-date-picker,h6.sc-ic-date-picker,p.sc-ic-date-picker,blockquote.sc-ic-date-picker,pre.sc-ic-date-picker,a.sc-ic-date-picker,abbr.sc-ic-date-picker,acronym.sc-ic-date-picker,address.sc-ic-date-picker,big.sc-ic-date-picker,cite.sc-ic-date-picker,code.sc-ic-date-picker,del.sc-ic-date-picker,dfn.sc-ic-date-picker,em.sc-ic-date-picker,img.sc-ic-date-picker,ins.sc-ic-date-picker,kbd.sc-ic-date-picker,q.sc-ic-date-picker,s.sc-ic-date-picker,samp.sc-ic-date-picker,small.sc-ic-date-picker,strike.sc-ic-date-picker,strong.sc-ic-date-picker,sub.sc-ic-date-picker,sup.sc-ic-date-picker,tt.sc-ic-date-picker,var.sc-ic-date-picker,b.sc-ic-date-picker,u.sc-ic-date-picker,i.sc-ic-date-picker,center.sc-ic-date-picker,dl.sc-ic-date-picker,dt.sc-ic-date-picker,dd.sc-ic-date-picker,ol.sc-ic-date-picker,ul.sc-ic-date-picker,li.sc-ic-date-picker,fieldset.sc-ic-date-picker,form.sc-ic-date-picker,label.sc-ic-date-picker,legend.sc-ic-date-picker,table.sc-ic-date-picker,caption.sc-ic-date-picker,tbody.sc-ic-date-picker,tfoot.sc-ic-date-picker,thead.sc-ic-date-picker,tr.sc-ic-date-picker,th.sc-ic-date-picker,td.sc-ic-date-picker,article.sc-ic-date-picker,aside.sc-ic-date-picker,canvas.sc-ic-date-picker,details.sc-ic-date-picker,embed.sc-ic-date-picker,figure.sc-ic-date-picker,figcaption.sc-ic-date-picker,footer.sc-ic-date-picker,header.sc-ic-date-picker,hgroup.sc-ic-date-picker,menu.sc-ic-date-picker,nav.sc-ic-date-picker,output.sc-ic-date-picker,ruby.sc-ic-date-picker,section.sc-ic-date-picker,summary.sc-ic-date-picker,time.sc-ic-date-picker,mark.sc-ic-date-picker,audio.sc-ic-date-picker,video.sc-ic-date-picker{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-date-picker-h{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)*/.large.sc-ic-date-picker-h{--month-button-width:6.3125rem;--input-field-width:var(--input-width, 21.125rem)}/*!@:host(.small)*/.small.sc-ic-date-picker-h{--month-button-width:6.25rem;--input-field-width:var(--input-width, 17.125rem)}/*!@:host .date-input-container*/.sc-ic-date-picker-h .date-input-container.sc-ic-date-picker{position:relative}/*!@ic-date-input*/ic-date-input.sc-ic-date-picker{--input-width:var(--input-field-width)}/*!@:host .calendar-container*/.sc-ic-date-picker-h .calendar-container.sc-ic-date-picker{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*/.small.sc-ic-date-picker-h .calendar-container.sc-ic-date-picker{min-width:17rem;max-width:21.5rem}/*!@:host(.large) .calendar-container*/.large.sc-ic-date-picker-h .calendar-container.sc-ic-date-picker{min-width:21rem;max-width:25.5rem}/*!@:host .calendar-container.above*/.sc-ic-date-picker-h .calendar-container.above.sc-ic-date-picker{bottom:calc(var(--ic-space-xxl) - var(--ic-space-xxs))}/*!@:host .month-year-nav-container*/.sc-ic-date-picker-h .month-year-nav-container.sc-ic-date-picker{display:flex;justify-content:space-between;align-items:center;align-self:stretch}/*!@:host .month-year-nav-container.hidden*/.sc-ic-date-picker-h .month-year-nav-container.hidden.sc-ic-date-picker{display:none}/*!@:host .month-year-nav*/.sc-ic-date-picker-h .month-year-nav.sc-ic-date-picker{display:flex;justify-content:space-between;align-items:center;flex:1 0 0}/*!@:host .month-picker,\n:host .year-picker*/.sc-ic-date-picker-h .month-picker.sc-ic-date-picker,.sc-ic-date-picker-h .year-picker.sc-ic-date-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,\n:host(.small) .year-picker*/.small.sc-ic-date-picker-h .month-picker.sc-ic-date-picker,.small.sc-ic-date-picker-h .year-picker.sc-ic-date-picker{width:13.125rem}/*!@:host(.large) .month-picker,\n:host(.large) .year-picker*/.large.sc-ic-date-picker-h .month-picker.sc-ic-date-picker,.large.sc-ic-date-picker-h .year-picker.sc-ic-date-picker{width:20rem}/*!@:host .month-picker-button,\n:host .year-picker-button*/.sc-ic-date-picker-h .month-picker-button.sc-ic-date-picker,.sc-ic-date-picker-h .year-picker-button.sc-ic-date-picker{width:5rem;--min-width:5rem}/*!@:host .month-button,\n:host .year-button*/.sc-ic-date-picker-h .month-button.sc-ic-date-picker,.sc-ic-date-picker-h .year-button.sc-ic-date-picker{width:var(--month-button-width)}/*!@:host .month-button.focussed,\n:host .year-button.focussed*/.sc-ic-date-picker-h .month-button.focussed.sc-ic-date-picker,.sc-ic-date-picker-h .year-button.focussed.sc-ic-date-picker{z-index:1}/*!@:host .month-button::part(button),\n:host .year-button::part(button)*/.sc-ic-date-picker-h .month-button.sc-ic-date-picker::part(button),.sc-ic-date-picker-h .year-button.sc-ic-date-picker::part(button){min-width:var(--month-button-width)}/*!@:host .prev-decade .year-button svg*/.sc-ic-date-picker-h .prev-decade.sc-ic-date-picker .year-button.sc-ic-date-picker svg.sc-ic-date-picker{margin-right:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}/*!@:host .prev-decade .year-button::part(button)*/.sc-ic-date-picker-h .prev-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button){padding-left:0;padding-right:var(--ic-space-lg)}/*!@:host(.small) .prev-decade .year-button::part(button)*/.small.sc-ic-date-picker-h .prev-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button){padding-left:0;padding-right:calc(var(--ic-space-lg) + var(--ic-space-xxs))}/*!@:host .next-decade .year-button svg*/.sc-ic-date-picker-h .next-decade.sc-ic-date-picker .year-button.sc-ic-date-picker svg.sc-ic-date-picker{margin-left:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}/*!@:host .next-decade .year-button::part(button)*/.sc-ic-date-picker-h .next-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button){padding-right:0;padding-left:var(--ic-space-lg)}/*!@:host(.small) .next-decade .year-button::part(button),\n:host(.large) .next-decade .year-button::part(button)*/.small.sc-ic-date-picker-h .next-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button),.large.sc-ic-date-picker-h .next-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button){padding-left:var(--ic-space-xl)}/*!@:host .bottom-buttons*/.sc-ic-date-picker-h .bottom-buttons.sc-ic-date-picker{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*/.small.sc-ic-date-picker-h .bottom-buttons.sc-ic-date-picker{padding-top:var(--ic-space-xxs)}/*!@:host .bottom-buttons.no-today*/.sc-ic-date-picker-h .bottom-buttons.no-today.sc-ic-date-picker{align-items:flex-end;flex-direction:column}/*!@:host .bottom-buttons.hidden*/.sc-ic-date-picker-h .bottom-buttons.hidden.sc-ic-date-picker{display:none}/*!@:host .calendar*/.sc-ic-date-picker-h .calendar.sc-ic-date-picker{display:flex;flex-direction:column;align-items:flex-start;width:15.75rem;animation:fade-in-buttons var(--ic-transition-duration-slow)}/*!@:host(.large) .calendar*/.large.sc-ic-date-picker-h .calendar.sc-ic-date-picker{width:19.25rem}/*!@:host(.small) .calendar*/.small.sc-ic-date-picker-h .calendar.sc-ic-date-picker{padding-bottom:var(--ic-space-xxs);width:14rem}/*!@:host .hidden*/.sc-ic-date-picker-h .hidden.sc-ic-date-picker{display:none}/*!@:host .weekdays*/.sc-ic-date-picker-h .weekdays.sc-ic-date-picker{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--ic-space-xs);align-self:stretch}/*!@:host .calendar-days-container*/.sc-ic-date-picker-h .calendar-days-container.sc-ic-date-picker{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*/.small.sc-ic-date-picker-h .calendar-days-container.sc-ic-date-picker{padding:var(--ic-space-xxxs) 0}/*!@:host(.large) .calendar-days-container*/.large.sc-ic-date-picker-h .calendar-days-container.sc-ic-date-picker{padding:var(--ic-space-xs) 0}/*!@:host .calendar-day-header*/.sc-ic-date-picker-h .calendar-day-header.sc-ic-date-picker{display:flex;width:2rem;padding:var(--ic-space-xxs) 0;justify-content:center;align-items:center}/*!@:host(.small) .calendar-day-header,\n:host(.large) .calendar-day-header*/.small.sc-ic-date-picker-h .calendar-day-header.sc-ic-date-picker,.large.sc-ic-date-picker-h .calendar-day-header.sc-ic-date-picker{padding:var(--ic-space-xxs)}/*!@:host .calendar-day-header ic-typography*/.sc-ic-date-picker-h .calendar-day-header.sc-ic-date-picker ic-typography.sc-ic-date-picker{color:var(--ic-color-tertiary-text);text-align:center}/*!@:host .day-button-container*/.sc-ic-date-picker-h .day-button-container.sc-ic-date-picker{display:flex;justify-content:center;align-items:center;width:2.25rem;height:2.25rem}/*!@:host(.small) .day-button-container*/.small.sc-ic-date-picker-h .day-button-container.sc-ic-date-picker{width:2rem;height:2rem}/*!@:host(.large) .day-button-container*/.large.sc-ic-date-picker-h .day-button-container.sc-ic-date-picker{width:2.5rem;height:2.5rem}/*!@:host .day-button*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker{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*/.sc-ic-date-picker-h .day-button.disabled.sc-ic-date-picker{cursor:default}/*!@:host(.large) .day-button*/.large.sc-ic-date-picker-h .day-button.sc-ic-date-picker{width:2.25rem;height:2.25rem}/*!@:host(.small) .day-button*/.small.sc-ic-date-picker-h .day-button.sc-ic-date-picker{width:1.75rem;height:1.75rem}/*!@:host .day-button ic-typography*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker ic-typography.sc-ic-date-picker{width:1.75rem;color:var(--ic-color-primary-text)}/*!@:host .day-button.outside-range ic-typography*/.sc-ic-date-picker-h .day-button.outside-range.sc-ic-date-picker ic-typography.sc-ic-date-picker{color:var(--ic-architectural-400)}/*!@:host .day-button.outside-month ic-typography*/.sc-ic-date-picker-h .day-button.outside-month.sc-ic-date-picker ic-typography.sc-ic-date-picker{font-weight:var(--ic-font-weight-regular) !important}/*!@:host\n .day-button.outside-month:not(.outside-range):not(.selected)\n ic-typography*/.sc-ic-date-picker-h .day-button.outside-month.sc-ic-date-picker:not(.outside-range):not(.selected) ic-typography.sc-ic-date-picker{color:var(--ic-color-primary-text)}/*!@:host .day-button:hover:not(.disabled)*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker:hover:not(.disabled){background-color:var(--ic-action-dark-bg-hover)}/*!@:host .day-button:active:not(.disabled)*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker: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),\n :host .day-button:active:not(.disabled):not(.focussed)*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker:hover:not(.disabled):not(.focussed),.sc-ic-date-picker-h .day-button.sc-ic-date-picker:active:not(.disabled):not(.focussed){transition:background-color var(--ic-transition-duration-slow) ease-in-out}}/*!@:host .day-button.selected:not(.hidden)*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker:not(.hidden){background-color:var(--ic-action-default)}/*!@:host .day-button.selected ic-typography*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker ic-typography.sc-ic-date-picker{color:var(--ic-color-white-text)}/*!@:host .day-button.selected:not(.hidden):hover*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker:not(.hidden):hover{background-color:var(--ic-action-default-hover)}/*!@:host .day-button.selected:not(.hidden):active*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker:not(.hidden):active{background-color:var(--ic-action-default-active)}/*!@:host .day-button.focussed*/.sc-ic-date-picker-h .day-button.focussed.sc-ic-date-picker{z-index:1}/*!@:host .day-button:focus*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker:focus{outline:none}/*!@:host .day-button.focussed:focus*/.sc-ic-date-picker-h .day-button.focussed.sc-ic-date-picker:focus{box-shadow:var(--ic-border-focus)}/*!@:host .day-button.today:not(.hidden)::after*/.sc-ic-date-picker-h .day-button.today.sc-ic-date-picker: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*/.small.sc-ic-date-picker-h .day-button.today.sc-ic-date-picker::after{bottom:0.35rem}/*!@:host(.large) .day-button.today::after*/.large.sc-ic-date-picker-h .day-button.today.sc-ic-date-picker::after{width:1rem}/*!@:host .day-button.today.selected::after*/.sc-ic-date-picker-h .day-button.today.selected.sc-ic-date-picker::after{background-color:var(--ic-architectural-white)}/*!@:host #select-month-hint,\n:host #select-year-hint*/.sc-ic-date-picker-h #select-month-hint.sc-ic-date-picker,.sc-ic-date-picker-h #select-year-hint.sc-ic-date-picker{display:none}/*!@.sr-only*/.sr-only.sc-ic-date-picker{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){/*!@:host .calendar-container,\n :host .calendar,\n :host .bottom-buttons*/.sc-ic-date-picker-h .calendar-container.sc-ic-date-picker,.sc-ic-date-picker-h .calendar.sc-ic-date-picker,.sc-ic-date-picker-h .bottom-buttons.sc-ic-date-picker{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*/.sc-ic-date-picker-h .day-button.today.sc-ic-date-picker:not(.hidden)::after{background-color:highlight}/*!@:host .day-button.selected:not(.hidden)*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker:not(.hidden){background-color:highlight}/*!@:host .day-button.focussed:focus*/.sc-ic-date-picker-h .day-button.focussed.sc-ic-date-picker:focus{border:var(--ic-hc-border)}/*!@:host .month-button.selected::part(button),\n :host .year-button.selected::part(button)*/.sc-ic-date-picker-h .month-button.selected.sc-ic-date-picker::part(button),.sc-ic-date-picker-h .year-button.selected.sc-ic-date-picker::part(button){background-color:highlight}}";
|
11982
|
+
|
11983
|
+
const DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
|
11984
|
+
const DEFAULT_DISABLE_DATES_FROM_NOW_MSG = "Dates in the future are not allowed. Please select a date in the past.";
|
11985
|
+
const DEFAULT_DISABLE_DATES_UNTIL_NOW_MSG = "Dates in the past are not allowed. Please select a date in the future.";
|
11986
|
+
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.";
|
11987
|
+
const FOCUS_TIMER = 100;
|
11988
|
+
const PICKER_HEIGHT_SMALL = 360;
|
11989
|
+
const PICKER_HEIGHT_DEFAULT = 400;
|
11990
|
+
const PICKER_HEIGHT_LARGE = 440;
|
11991
|
+
class DatePicker {
|
11992
|
+
constructor(hostRef) {
|
11993
|
+
registerInstance(this, hostRef);
|
11994
|
+
this.icChange = createEvent(this, "icChange", 7);
|
11995
|
+
this.clearButtonEl = null;
|
11996
|
+
this.daysOfWeek = [];
|
11997
|
+
this.dayButtonFocussed = false;
|
11998
|
+
this.dayPickerKeyboardNav = false;
|
11999
|
+
this.dialogDescription = "";
|
12000
|
+
this.focusDay = true;
|
12001
|
+
this.liveRegionEl = null;
|
12002
|
+
this.monthNames = [];
|
12003
|
+
this.monthInViewUpdateHandled = false;
|
12004
|
+
this.myCalendarButtonClicked = false;
|
12005
|
+
this.showPickerAbove = false;
|
12006
|
+
this.today = new Date();
|
12007
|
+
this.todayButtonEl = null;
|
12008
|
+
this.yearButtonFocussed = false;
|
12009
|
+
this.setDecadeView = (start) => {
|
12010
|
+
let currYear = start - 1;
|
12011
|
+
const decadeArr = [];
|
12012
|
+
while (currYear <= start + 10) {
|
12013
|
+
decadeArr.push(currYear);
|
12014
|
+
currYear++;
|
12015
|
+
}
|
12016
|
+
this.decadeView = decadeArr;
|
12017
|
+
this.decadeStart = decadeArr[1];
|
12018
|
+
this.decadeEnd = decadeArr[10];
|
12019
|
+
};
|
12020
|
+
this.setSelectedDate = (d) => {
|
12021
|
+
this.selectedDate = d;
|
12022
|
+
this.value = d === null ? "" : d;
|
12023
|
+
};
|
12024
|
+
this.handleCalendarMouseDown = (event) => {
|
12025
|
+
const target = event.target;
|
12026
|
+
if (target.tagName !== "IC-BUTTON") {
|
12027
|
+
event.preventDefault();
|
12028
|
+
}
|
12029
|
+
};
|
12030
|
+
this.handleCalendarClick = (event) => {
|
12031
|
+
this.clearDialogDescription();
|
12032
|
+
event.stopImmediatePropagation();
|
12033
|
+
};
|
12034
|
+
this.handleDocumentClick = () => {
|
12035
|
+
this.calendarOpen = false;
|
12036
|
+
};
|
12037
|
+
this.keyDownHandler = (event) => {
|
12038
|
+
if (event.key === "Escape") {
|
12039
|
+
this.closeButtonClickHandler();
|
12040
|
+
this.inputEl.setCalendarFocus();
|
12041
|
+
}
|
12042
|
+
else {
|
12043
|
+
this.clearDialogDescription();
|
12044
|
+
}
|
12045
|
+
event.stopImmediatePropagation();
|
12046
|
+
};
|
12047
|
+
this.closeButtonClickHandler = () => {
|
12048
|
+
this.calendarOpen = false;
|
12049
|
+
};
|
12050
|
+
this.focusFirstElement = () => {
|
12051
|
+
this.monthButtonEl.setFocus();
|
12052
|
+
};
|
12053
|
+
this.focusLastElement = () => {
|
12054
|
+
if (this.showPickerClearButton && !this.clearButtonEl.disabled) {
|
12055
|
+
this.clearButtonEl.setFocus();
|
12056
|
+
}
|
12057
|
+
else if (this.showPickerTodayButton && !this.todayButtonEl.disabled) {
|
12058
|
+
this.todayButtonEl.setFocus();
|
12059
|
+
}
|
12060
|
+
else if (this.monthPickerVisible) {
|
12061
|
+
this.focussedMonthEl.setFocus();
|
12062
|
+
}
|
12063
|
+
else if (this.yearPickerVisible) {
|
12064
|
+
this.focussedYearEl.setFocus();
|
12065
|
+
}
|
12066
|
+
else {
|
12067
|
+
this.focussedDayEl.focus();
|
12068
|
+
}
|
12069
|
+
};
|
12070
|
+
this.focusFocussedDay = () => {
|
12071
|
+
this.focussedDayEl.focus();
|
12072
|
+
};
|
12073
|
+
this.monthButtonClickHandler = () => {
|
12074
|
+
this.yearPickerVisible = false;
|
12075
|
+
this.focusDay = false;
|
12076
|
+
this.monthPickerVisible = !this.monthPickerVisible;
|
12077
|
+
if (this.monthPickerVisible) {
|
12078
|
+
this.setAriaLiveRegionText("Month picker view open");
|
12079
|
+
}
|
12080
|
+
else {
|
12081
|
+
this.setMonthSelectedLiveRegionText();
|
12082
|
+
}
|
12083
|
+
};
|
12084
|
+
this.yearButtonClickHandler = () => {
|
12085
|
+
this.monthPickerVisible = false;
|
12086
|
+
this.focusDay = false;
|
12087
|
+
this.yearPickerVisible = !this.yearPickerVisible;
|
12088
|
+
if (this.yearPickerVisible) {
|
12089
|
+
this.setAriaLiveRegionText(`Year picker view open. ${this.getDecadeInViewText()}`);
|
12090
|
+
}
|
12091
|
+
else {
|
12092
|
+
this.setYearSelectedLiveRegionText();
|
12093
|
+
}
|
12094
|
+
};
|
12095
|
+
this.todayButtonClickHandler = () => {
|
12096
|
+
this.yearPickerVisible = false;
|
12097
|
+
this.monthPickerVisible = false;
|
12098
|
+
this.setFocussedDate(new Date());
|
12099
|
+
this.setAriaLiveRegionText(this.getMonthInViewText());
|
12100
|
+
setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
|
12101
|
+
};
|
12102
|
+
this.todayButtonKeyDownHandler = (ev) => {
|
12103
|
+
if (ev.key === "Tab" && !ev.shiftKey && this.clearButtonEl.disabled) {
|
12104
|
+
this.focusFirstElement();
|
12105
|
+
ev.preventDefault();
|
12106
|
+
}
|
12107
|
+
};
|
12108
|
+
this.clearButtonClickHandler = () => {
|
12109
|
+
this.setSelectedDate(null);
|
12110
|
+
let text = "Selected date cleared.";
|
12111
|
+
if (!this.monthPickerVisible && !this.yearPickerVisible) {
|
12112
|
+
text += ` ${this.getMonthInViewText()}`;
|
12113
|
+
}
|
12114
|
+
if (this.monthPickerVisible) {
|
12115
|
+
this.focussedMonthEl.setFocus();
|
12116
|
+
}
|
12117
|
+
else if (this.yearPickerVisible) {
|
12118
|
+
this.focussedYearEl.setFocus();
|
12119
|
+
}
|
12120
|
+
else {
|
12121
|
+
this.focusFocussedDay();
|
12122
|
+
}
|
12123
|
+
this.setAriaLiveRegionText(text);
|
12124
|
+
};
|
12125
|
+
this.setMonthSelectedLiveRegionText = () => {
|
12126
|
+
this.setAriaLiveRegionText(`${this.monthNames[this.monthInView]} selected. ${this.getMonthInViewText()}`);
|
12127
|
+
};
|
12128
|
+
this.setYearSelectedLiveRegionText = () => {
|
12129
|
+
this.setAriaLiveRegionText(`${this.yearInView} selected. ${this.getMonthInViewText()}`);
|
12130
|
+
};
|
12131
|
+
this.getMonthInViewText = () => {
|
12132
|
+
return `${this.monthNames[this.monthInView]} ${this.yearInView} currently in view.`;
|
12133
|
+
};
|
12134
|
+
this.getDecadeInViewText = () => {
|
12135
|
+
return `${this.decadeStart} to ${this.decadeEnd} currently in view.`;
|
12136
|
+
};
|
12137
|
+
this.setAriaLiveRegionText = (text) => {
|
12138
|
+
this.liveRegionEl.innerText = text;
|
12139
|
+
};
|
12140
|
+
this.clearDialogDescription = () => {
|
12141
|
+
this.dialogDescription = "";
|
12142
|
+
};
|
12143
|
+
this.clearButtonKeyDownHandler = (ev) => {
|
12144
|
+
if (ev.key === "Tab" && !ev.shiftKey) {
|
12145
|
+
this.focusFirstElement();
|
12146
|
+
ev.preventDefault();
|
12147
|
+
}
|
12148
|
+
};
|
12149
|
+
this.goToPreviousMonth = (focusDay = false) => {
|
12150
|
+
this.focusDay = focusDay;
|
12151
|
+
this.moveMonths(-1);
|
12152
|
+
};
|
12153
|
+
this.goToNextMonth = (focusDay = false) => {
|
12154
|
+
this.focusDay = focusDay;
|
12155
|
+
this.moveMonths(1);
|
12156
|
+
};
|
12157
|
+
this.goToPreviousYear = (focusDay = false) => {
|
12158
|
+
if (this.isPrevYearAllowed()) {
|
12159
|
+
this.focusDay = focusDay;
|
12160
|
+
this.moveYears(-1);
|
12161
|
+
}
|
12162
|
+
};
|
12163
|
+
this.goToNextYear = (focusDay = false) => {
|
12164
|
+
if (this.isNextYearAllowed()) {
|
12165
|
+
this.focusDay = focusDay;
|
12166
|
+
this.moveYears(1);
|
12167
|
+
}
|
12168
|
+
};
|
12169
|
+
this.navButtonMouseDownHandler = (ev) => {
|
12170
|
+
ev.preventDefault();
|
12171
|
+
};
|
12172
|
+
this.renderMonthYearNavButton = (id, flip, disabled) => {
|
12173
|
+
const buttonSize = this.size;
|
12174
|
+
return (hAsync("div", { "aria-hidden": "true" }, hAsync("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 })));
|
12175
|
+
};
|
12176
|
+
this.monthYearNavClickHandler = (ev) => {
|
12177
|
+
const target = ev.target;
|
12178
|
+
switch (target.id) {
|
12179
|
+
case "previous-month-button":
|
12180
|
+
this.goToPreviousMonth(this.dayButtonFocussed);
|
12181
|
+
break;
|
12182
|
+
case "next-month-button":
|
12183
|
+
this.goToNextMonth(this.dayButtonFocussed);
|
12184
|
+
break;
|
12185
|
+
case "previous-year-button":
|
12186
|
+
this.goToPreviousYear(this.dayButtonFocussed);
|
12187
|
+
break;
|
12188
|
+
case "next-year-button":
|
12189
|
+
this.goToNextYear(this.dayButtonFocussed);
|
12190
|
+
break;
|
12191
|
+
}
|
12192
|
+
};
|
12193
|
+
this.previousMonthButton = () => {
|
12194
|
+
let disabled = false;
|
12195
|
+
if (this.focussedDate !== null && this.minDate !== null) {
|
12196
|
+
const yearMatch = this.focussedDate.getFullYear() === this.minDate.getFullYear();
|
12197
|
+
if (yearMatch) {
|
12198
|
+
disabled = this.monthInView - 1 < this.minDate.getMonth();
|
12199
|
+
}
|
12200
|
+
}
|
12201
|
+
return this.renderMonthYearNavButton("previous-month-button", true, disabled);
|
12202
|
+
};
|
12203
|
+
this.nextMonthButton = () => {
|
12204
|
+
let disabled = false;
|
12205
|
+
if (this.focussedDate !== null && this.maxDate !== null) {
|
12206
|
+
const yearMatch = this.focussedDate.getFullYear() === this.maxDate.getFullYear();
|
12207
|
+
if (yearMatch) {
|
12208
|
+
disabled = this.monthInView + 1 > this.maxDate.getMonth();
|
12209
|
+
}
|
12210
|
+
}
|
12211
|
+
return this.renderMonthYearNavButton("next-month-button", false, disabled);
|
12212
|
+
};
|
12213
|
+
this.previousYearButton = () => {
|
12214
|
+
return this.renderMonthYearNavButton("previous-year-button", true, !this.isPrevYearAllowed());
|
12215
|
+
};
|
12216
|
+
this.nextYearButton = () => {
|
12217
|
+
return this.renderMonthYearNavButton("next-year-button", false, !this.isNextYearAllowed());
|
12218
|
+
};
|
12219
|
+
this.isPrevYearAllowed = () => {
|
12220
|
+
return this.isYearAllowed(this.yearInView - 1);
|
12221
|
+
};
|
12222
|
+
this.isNextYearAllowed = () => {
|
12223
|
+
return this.isYearAllowed(this.yearInView + 1);
|
12224
|
+
};
|
12225
|
+
this.isYearAllowed = (yr) => {
|
12226
|
+
return yearInRange(yr, this.minDate, this.maxDate);
|
12227
|
+
};
|
12228
|
+
this.getMonthView = (date) => {
|
12229
|
+
const start = getWeekStart(getMonthStart(date), this.startOfWeek);
|
12230
|
+
const end = getWeekEnd(getMonthEnd(date), this.startOfWeek);
|
12231
|
+
const days = [];
|
12232
|
+
let current = start;
|
12233
|
+
while (!dateMatches(current, end)) {
|
12234
|
+
days.push(current);
|
12235
|
+
current = new Date(current);
|
12236
|
+
current.setDate(current.getDate() + 1);
|
12237
|
+
}
|
12238
|
+
days.push(current);
|
12239
|
+
return days;
|
12240
|
+
};
|
12241
|
+
this.isCurrentMonth = () => {
|
12242
|
+
const d = new Date();
|
12243
|
+
return (d.getFullYear() === this.yearInView && d.getMonth() === this.monthInView);
|
12244
|
+
};
|
12245
|
+
this.updateMonthInView = () => {
|
12246
|
+
this.currMonthView = this.getMonthView(this.focussedDate);
|
12247
|
+
this.focussedDay = this.focussedDate.getDate();
|
12248
|
+
this.monthInView = this.focussedDate.getMonth();
|
12249
|
+
this.yearInView = this.focussedDate.getFullYear();
|
12250
|
+
if (this.dayPickerKeyboardNav) {
|
12251
|
+
this.monthInViewUpdateHandled = true;
|
12252
|
+
this.setAriaLiveRegionText(this.getMonthInViewText());
|
12253
|
+
this.dayPickerKeyboardNav = false;
|
12254
|
+
}
|
12255
|
+
};
|
12256
|
+
this.handleSelectDay = (day) => {
|
12257
|
+
this.setSelectedDate(day);
|
12258
|
+
this.calendarOpen = false;
|
12259
|
+
this.inputEl.setCalendarFocus();
|
12260
|
+
};
|
12261
|
+
this.handleSelectMonth = (month) => {
|
12262
|
+
this.moveMonths(month - this.monthInView);
|
12263
|
+
setTimeout(() => {
|
12264
|
+
this.monthButtonEl.setFocus();
|
12265
|
+
this.monthPickerVisible = false;
|
12266
|
+
this.setMonthSelectedLiveRegionText();
|
12267
|
+
}, FOCUS_TIMER);
|
12268
|
+
};
|
12269
|
+
this.handleSelectYear = (year) => {
|
12270
|
+
const yrPos = this.decadeView.indexOf(year);
|
12271
|
+
if (yrPos > 0 && yrPos < this.decadeView.length - 1) {
|
12272
|
+
this.moveYears(year - this.yearInView);
|
12273
|
+
this.focusDay = false;
|
12274
|
+
const monthName = this.monthNames[this.monthInView];
|
12275
|
+
this.setAriaLiveRegionText(`${year} selected. ${monthName} ${year} currently in view.`);
|
12276
|
+
setTimeout(() => {
|
12277
|
+
this.yearButtonEl.setFocus();
|
12278
|
+
this.yearPickerVisible = false;
|
12279
|
+
}, FOCUS_TIMER);
|
12280
|
+
}
|
12281
|
+
else {
|
12282
|
+
const moveYears = year - this.focussedYear > 0 ? 10 : -10;
|
12283
|
+
this.updateFocussedYear(moveYears, this.yearButtonFocussed);
|
12284
|
+
this.setAriaLiveRegionText(this.getDecadeInViewText());
|
12285
|
+
}
|
12286
|
+
};
|
12287
|
+
this.monthPickerKeyDownHandler = (ev) => {
|
12288
|
+
let handled = true;
|
12289
|
+
switch (ev.key) {
|
12290
|
+
case "ArrowUp":
|
12291
|
+
case "ArrowLeft":
|
12292
|
+
this.updateFocussedMonth(-1);
|
12293
|
+
break;
|
12294
|
+
case "ArrowDown":
|
12295
|
+
case "ArrowRight":
|
12296
|
+
this.updateFocussedMonth(1);
|
12297
|
+
break;
|
12298
|
+
case "Home":
|
12299
|
+
this.updateFocussedMonth(-this.focussedMonth);
|
12300
|
+
break;
|
12301
|
+
case "End":
|
12302
|
+
this.updateFocussedMonth(11 - this.focussedMonth);
|
12303
|
+
break;
|
12304
|
+
case "Tab":
|
12305
|
+
handled = this.calendarTabHandler(ev);
|
12306
|
+
break;
|
12307
|
+
case "Escape":
|
12308
|
+
ev.stopImmediatePropagation();
|
12309
|
+
this.monthPickerVisible = false;
|
12310
|
+
setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
|
12311
|
+
break;
|
12312
|
+
default:
|
12313
|
+
handled = false;
|
12314
|
+
}
|
12315
|
+
if (handled) {
|
12316
|
+
ev.preventDefault();
|
12317
|
+
}
|
12318
|
+
};
|
12319
|
+
this.yearPickerKeyDownHandler = (ev) => {
|
12320
|
+
let handled = true;
|
12321
|
+
switch (ev.key) {
|
12322
|
+
case "ArrowUp":
|
12323
|
+
case "ArrowLeft":
|
12324
|
+
this.updateFocussedYear(-1);
|
12325
|
+
break;
|
12326
|
+
case "ArrowDown":
|
12327
|
+
case "ArrowRight":
|
12328
|
+
this.updateFocussedYear(1);
|
12329
|
+
break;
|
12330
|
+
case "Home":
|
12331
|
+
if (this.focussedYear > this.decadeStart) {
|
12332
|
+
this.updateFocussedYear(this.decadeStart - this.focussedYear);
|
12333
|
+
}
|
12334
|
+
break;
|
12335
|
+
case "End":
|
12336
|
+
if (this.focussedYear < this.decadeEnd) {
|
12337
|
+
this.updateFocussedYear(this.decadeEnd - this.focussedYear);
|
12338
|
+
}
|
12339
|
+
break;
|
12340
|
+
case "PageUp":
|
12341
|
+
this.updateFocussedYear(-10);
|
12342
|
+
break;
|
12343
|
+
case "PageDown":
|
12344
|
+
this.updateFocussedYear(10);
|
12345
|
+
break;
|
12346
|
+
case "Tab":
|
12347
|
+
handled = this.calendarTabHandler(ev);
|
12348
|
+
break;
|
12349
|
+
case "Escape":
|
12350
|
+
ev.stopImmediatePropagation();
|
12351
|
+
this.yearPickerVisible = false;
|
12352
|
+
setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
|
12353
|
+
break;
|
12354
|
+
default:
|
12355
|
+
handled = false;
|
12356
|
+
}
|
12357
|
+
if (handled) {
|
12358
|
+
ev.preventDefault();
|
12359
|
+
}
|
12360
|
+
};
|
12361
|
+
this.onYearButtonFocusHandler = () => {
|
12362
|
+
this.yearButtonFocussed = true;
|
12363
|
+
};
|
12364
|
+
this.onYearButtonBlurHandler = () => {
|
12365
|
+
this.yearButtonFocussed = false;
|
12366
|
+
};
|
12367
|
+
this.monthButtonKeyDownHandler = (ev) => {
|
12368
|
+
let handled = false;
|
12369
|
+
switch (ev.key) {
|
12370
|
+
case "ArrowLeft":
|
12371
|
+
case "ArrowUp":
|
12372
|
+
handled = true;
|
12373
|
+
this.goToPreviousMonth();
|
12374
|
+
break;
|
12375
|
+
case "ArrowRight":
|
12376
|
+
case "ArrowDown":
|
12377
|
+
handled = true;
|
12378
|
+
this.goToNextMonth();
|
12379
|
+
break;
|
12380
|
+
case "Home":
|
12381
|
+
handled = true;
|
12382
|
+
this.focusDay = false;
|
12383
|
+
this.moveMonths(-this.monthInView);
|
12384
|
+
break;
|
12385
|
+
case "End":
|
12386
|
+
handled = true;
|
12387
|
+
this.focusDay = false;
|
12388
|
+
this.moveMonths(11 - this.monthInView);
|
12389
|
+
break;
|
12390
|
+
case "Tab":
|
12391
|
+
if (ev.shiftKey) {
|
12392
|
+
handled = true;
|
12393
|
+
this.focusLastElement();
|
12394
|
+
}
|
12395
|
+
break;
|
12396
|
+
case "Escape":
|
12397
|
+
if (this.monthPickerVisible) {
|
12398
|
+
this.monthPickerVisible = false;
|
12399
|
+
ev.stopImmediatePropagation();
|
12400
|
+
}
|
12401
|
+
break;
|
12402
|
+
}
|
12403
|
+
if (handled) {
|
12404
|
+
ev.preventDefault();
|
12405
|
+
}
|
12406
|
+
};
|
12407
|
+
this.yearButtonKeyDownHandler = (ev) => {
|
12408
|
+
let handled = false;
|
12409
|
+
switch (ev.key) {
|
12410
|
+
case "ArrowLeft":
|
12411
|
+
case "ArrowUp":
|
12412
|
+
handled = true;
|
12413
|
+
this.goToPreviousYear();
|
12414
|
+
break;
|
12415
|
+
case "ArrowRight":
|
12416
|
+
case "ArrowDown":
|
12417
|
+
handled = true;
|
12418
|
+
this.goToNextYear();
|
12419
|
+
break;
|
12420
|
+
case "Home":
|
12421
|
+
if (this.yearPickerVisible && this.yearInView > this.decadeStart) {
|
12422
|
+
handled = true;
|
12423
|
+
this.moveYears(this.decadeStart - this.yearInView);
|
12424
|
+
}
|
12425
|
+
break;
|
12426
|
+
case "End":
|
12427
|
+
if (this.yearPickerVisible && this.yearInView < this.decadeEnd) {
|
12428
|
+
handled = true;
|
12429
|
+
this.moveYears(this.decadeEnd - this.focussedYear);
|
12430
|
+
}
|
12431
|
+
break;
|
12432
|
+
case "PageUp":
|
12433
|
+
handled = true;
|
12434
|
+
this.focusDay = false;
|
12435
|
+
this.moveYears(-10);
|
12436
|
+
break;
|
12437
|
+
case "PageDown":
|
12438
|
+
handled = true;
|
12439
|
+
this.focusDay = false;
|
12440
|
+
this.moveYears(10);
|
12441
|
+
break;
|
12442
|
+
case "Escape":
|
12443
|
+
if (this.yearPickerVisible) {
|
12444
|
+
this.yearPickerVisible = false;
|
12445
|
+
ev.stopImmediatePropagation();
|
12446
|
+
}
|
12447
|
+
break;
|
12448
|
+
}
|
12449
|
+
if (handled) {
|
12450
|
+
ev.preventDefault();
|
12451
|
+
}
|
12452
|
+
};
|
12453
|
+
this.handleCalendarKeyDown = (ev) => {
|
12454
|
+
let handled = true;
|
12455
|
+
switch (ev.key) {
|
12456
|
+
case "ArrowDown":
|
12457
|
+
this.dayPickerKeyboardNav = true;
|
12458
|
+
this.moveDays(7);
|
12459
|
+
break;
|
12460
|
+
case "ArrowUp":
|
12461
|
+
this.dayPickerKeyboardNav = true;
|
12462
|
+
this.moveDays(-7);
|
12463
|
+
break;
|
12464
|
+
case "ArrowLeft":
|
12465
|
+
this.dayPickerKeyboardNav = true;
|
12466
|
+
this.moveDays(-1 * this.getNextDayToFocus(this.focussedDate, false));
|
12467
|
+
break;
|
12468
|
+
case "ArrowRight":
|
12469
|
+
this.dayPickerKeyboardNav = true;
|
12470
|
+
this.moveDays(this.getNextDayToFocus(this.focussedDate, true));
|
12471
|
+
break;
|
12472
|
+
case "PageUp":
|
12473
|
+
this.dayPickerKeyboardNav = true;
|
12474
|
+
ev.shiftKey ? this.moveYears(-1) : this.moveMonths(-1);
|
12475
|
+
break;
|
12476
|
+
case "PageDown":
|
12477
|
+
this.dayPickerKeyboardNav = true;
|
12478
|
+
ev.shiftKey ? this.moveYears(1) : this.moveMonths(1);
|
12479
|
+
break;
|
12480
|
+
case "Home":
|
12481
|
+
this.dayPickerKeyboardNav = true;
|
12482
|
+
this.setFocussedDate(new Date(this.focussedYear, this.focussedMonth, 1));
|
12483
|
+
break;
|
12484
|
+
case "End":
|
12485
|
+
this.dayPickerKeyboardNav = true;
|
12486
|
+
this.setFocussedDate(new Date(this.focussedYear, this.focussedMonth + 1, 0));
|
12487
|
+
break;
|
12488
|
+
case "Tab":
|
12489
|
+
handled = this.calendarTabHandler(ev);
|
12490
|
+
break;
|
12491
|
+
default:
|
12492
|
+
handled = false;
|
12493
|
+
break;
|
12494
|
+
}
|
12495
|
+
if (handled) {
|
12496
|
+
ev.preventDefault();
|
12497
|
+
}
|
12498
|
+
};
|
12499
|
+
this.calendarTabHandler = (ev) => {
|
12500
|
+
let handled = false;
|
12501
|
+
if (!ev.shiftKey &&
|
12502
|
+
(!this.showPickerTodayButton || this.isCurrentMonth()) &&
|
12503
|
+
(!this.showPickerClearButton || this.clearButtonEl.disabled)) {
|
12504
|
+
this.focusFirstElement();
|
12505
|
+
handled = true;
|
12506
|
+
}
|
12507
|
+
else if (ev.shiftKey) {
|
12508
|
+
this.yearButtonEl.setFocus();
|
12509
|
+
handled = true;
|
12510
|
+
}
|
12511
|
+
return handled;
|
12512
|
+
};
|
12513
|
+
this.onDayButtonFocusHandler = () => {
|
12514
|
+
this.dayButtonFocussed = true;
|
12515
|
+
};
|
12516
|
+
this.onDayButtonBlurHandler = () => {
|
12517
|
+
this.dayButtonFocussed = false;
|
12518
|
+
};
|
12519
|
+
this.getNextDayToFocus = (currDay, forward, level = 1) => {
|
12520
|
+
const move = forward ? 1 : -1;
|
12521
|
+
const nextDay = new Date(currDay);
|
12522
|
+
nextDay.setDate(nextDay.getDate() + move);
|
12523
|
+
const nextDayNum = Number(nextDay.getDay());
|
12524
|
+
if (this.disableDays.includes(nextDayNum)) {
|
12525
|
+
return this.getNextDayToFocus(nextDay, forward, level + 1);
|
12526
|
+
}
|
12527
|
+
else {
|
12528
|
+
return level;
|
12529
|
+
}
|
12530
|
+
};
|
12531
|
+
this.moveDays = (numDays) => {
|
12532
|
+
const d = new Date(this.focussedDate);
|
12533
|
+
d.setDate(d.getDate() + numDays);
|
12534
|
+
this.setFocussedDate(d);
|
12535
|
+
};
|
12536
|
+
this.moveMonths = (numMonths) => {
|
12537
|
+
const newMonth = this.focussedDate.getMonth() + numMonths;
|
12538
|
+
const min = new Date(new Date(getMonthStart(this.focussedDate)).setMonth(newMonth));
|
12539
|
+
const max = getMonthEnd(min);
|
12540
|
+
const newDate = new Date(new Date(this.focussedDate).setMonth(newMonth));
|
12541
|
+
this.setFocussedDate(clampDate(newDate, min, max));
|
12542
|
+
if (this.monthPickerVisible === false &&
|
12543
|
+
this.yearPickerVisible === false &&
|
12544
|
+
this.monthInViewUpdateHandled === false) {
|
12545
|
+
this.setAriaLiveRegionText(this.getMonthInViewText());
|
12546
|
+
}
|
12547
|
+
this.monthInViewUpdateHandled = false;
|
12548
|
+
};
|
12549
|
+
this.moveYears = (numYears) => {
|
12550
|
+
const newYear = this.focussedDate.getFullYear() + numYears;
|
12551
|
+
const min = new Date(new Date(getMonthStart(this.focussedDate)).setFullYear(newYear));
|
12552
|
+
const max = getMonthEnd(min);
|
12553
|
+
const newDate = new Date(new Date(this.focussedDate).setFullYear(newYear));
|
12554
|
+
this.setFocussedDate(clampDate(newDate, min, max));
|
12555
|
+
if (this.monthPickerVisible === false &&
|
12556
|
+
this.yearPickerVisible === false &&
|
12557
|
+
this.monthInViewUpdateHandled === false) {
|
12558
|
+
this.setAriaLiveRegionText(this.getMonthInViewText());
|
12559
|
+
}
|
12560
|
+
this.monthInViewUpdateHandled = false;
|
12561
|
+
};
|
12562
|
+
this.updateFocussedMonth = (adjust) => {
|
12563
|
+
const d = new Date(this.focussedYear, this.focussedMonth, 1);
|
12564
|
+
d.setMonth(this.focussedMonth + adjust);
|
12565
|
+
const newDate = clampDate(d, this.minDate, this.maxDate);
|
12566
|
+
this.focussedMonth = newDate.getMonth();
|
12567
|
+
setTimeout(() => this.focussedMonthEl.setFocus(), FOCUS_TIMER);
|
12568
|
+
};
|
12569
|
+
this.updateFocussedYear = (adjust, focusYear = true) => {
|
12570
|
+
const d = new Date(new Date().setFullYear(this.focussedYear + adjust));
|
12571
|
+
const newDate = clampDate(d, this.minDate, this.maxDate);
|
12572
|
+
this.setFocussedYear(newDate.getFullYear(), focusYear);
|
12573
|
+
};
|
12574
|
+
this.setFocussedDate = (d) => {
|
12575
|
+
this.focussedDate = clampDate(d, this.minDate, this.maxDate);
|
12576
|
+
};
|
12577
|
+
this.setFocussedDayEl = (element) => {
|
12578
|
+
this.focussedDayEl = element;
|
12579
|
+
};
|
12580
|
+
this.setFocussedMonthEl = (element) => {
|
12581
|
+
this.focussedMonthEl = element;
|
12582
|
+
};
|
12583
|
+
this.setFocussedYearEl = (element) => {
|
12584
|
+
this.focussedYearEl = element;
|
12585
|
+
};
|
12586
|
+
this.setFocussedYear = (newYear, focus = true) => {
|
12587
|
+
const prevYear = this.focussedYear;
|
12588
|
+
this.focussedYear = newYear;
|
12589
|
+
if (this.yearPickerVisible) {
|
12590
|
+
const newDecade = Math.floor(newYear / 10) * 10;
|
12591
|
+
const oldDecade = Math.floor(prevYear / 10) * 10;
|
12592
|
+
if (newDecade !== oldDecade) {
|
12593
|
+
this.setDecadeView(newDecade);
|
12594
|
+
this.setAriaLiveRegionText(this.getDecadeInViewText());
|
12595
|
+
}
|
12596
|
+
if (focus) {
|
12597
|
+
setTimeout(() => {
|
12598
|
+
if (this.focussedYearEl !== null)
|
12599
|
+
this.focussedYearEl.setFocus();
|
12600
|
+
}, FOCUS_TIMER);
|
12601
|
+
}
|
12602
|
+
}
|
12603
|
+
else {
|
12604
|
+
this.setDecadeView(Math.floor(newYear / 10) * 10);
|
12605
|
+
}
|
12606
|
+
};
|
12607
|
+
this.setDateInputProps = () => {
|
12608
|
+
const untilNowMsg = !this.disablePast ||
|
12609
|
+
this.disablePastMessage === DEFAULT_DISABLE_DATES_UNTIL_NOW_MSG
|
12610
|
+
? ""
|
12611
|
+
: this.disablePastMessage;
|
12612
|
+
const fromNowMsg = !this.disableFuture ||
|
12613
|
+
this.disableFutureMessage === DEFAULT_DISABLE_DATES_FROM_NOW_MSG
|
12614
|
+
? ""
|
12615
|
+
: this.disableFutureMessage;
|
12616
|
+
const disableDaysMsg = !this.disableDays.length ||
|
12617
|
+
this.disableDaysMessage === DEFAULT_DISABLE_DAYS_MSG
|
12618
|
+
? ""
|
12619
|
+
: this.disableDaysMessage;
|
12620
|
+
if (this.dateFormat !== DEFAULT_DATE_FORMAT) {
|
12621
|
+
this.dateInputProps.dateFormat = this.dateFormat;
|
12622
|
+
}
|
12623
|
+
if (this.disableFuture) {
|
12624
|
+
this.dateInputProps.disableFuture = this.disableFuture;
|
12625
|
+
if (fromNowMsg !== "") {
|
12626
|
+
this.dateInputProps.disableFutureMessage = fromNowMsg;
|
12627
|
+
}
|
12628
|
+
}
|
12629
|
+
if (this.disablePast) {
|
12630
|
+
this.dateInputProps.disablePast = this.disablePast;
|
12631
|
+
if (untilNowMsg !== "") {
|
12632
|
+
this.dateInputProps.disablePastMessage = untilNowMsg;
|
12633
|
+
}
|
12634
|
+
}
|
12635
|
+
if (this.disableDays.length > 0) {
|
12636
|
+
this.dateInputProps.disableDays = this.disableDays;
|
12637
|
+
if (disableDaysMsg !== "") {
|
12638
|
+
this.dateInputProps.disableDaysMessage = disableDaysMsg;
|
12639
|
+
}
|
12640
|
+
}
|
12641
|
+
this.dateInputProps.label = this.label;
|
12642
|
+
if (this.max !== null && this.max !== "") {
|
12643
|
+
this.dateInputProps.max = this.maxDate;
|
12644
|
+
}
|
12645
|
+
if (this.min !== null && this.min !== "") {
|
12646
|
+
this.dateInputProps.min = this.minDate;
|
12647
|
+
}
|
12648
|
+
if (this.helperText !== undefined) {
|
12649
|
+
this.dateInputProps.helperText = this.helperText;
|
12650
|
+
}
|
12651
|
+
if (this.inputId !== undefined) {
|
12652
|
+
this.dateInputProps.inputId = this.inputId;
|
12653
|
+
}
|
12654
|
+
if (this.name !== undefined) {
|
12655
|
+
this.dateInputProps.name = this.name;
|
12656
|
+
}
|
12657
|
+
this.dateInputProps.showClearButton = true;
|
12658
|
+
this.dateInputProps.showCalendarButton = true;
|
12659
|
+
if (this.disabled) {
|
12660
|
+
this.dateInputProps.disabled = this.disabled;
|
12661
|
+
}
|
12662
|
+
if (this.required) {
|
12663
|
+
this.dateInputProps.required = this.required;
|
12664
|
+
}
|
12665
|
+
if (this.size !== "default") {
|
12666
|
+
this.dateInputProps.size = this.size;
|
12667
|
+
}
|
12668
|
+
if (this.validationStatus !== "") {
|
12669
|
+
this.dateInputProps.validationStatus = this.validationStatus;
|
12670
|
+
}
|
12671
|
+
if (this.validationText !== "") {
|
12672
|
+
this.dateInputProps.validationText = this.validationText;
|
12673
|
+
}
|
12674
|
+
this.dateInputProps.value = this.value;
|
12675
|
+
};
|
12676
|
+
this.calendarOpen = false;
|
12677
|
+
this.currMonthView = [];
|
12678
|
+
this.currYearPickerView = [];
|
12679
|
+
this.dateInputProps = { label: "" };
|
12680
|
+
this.decadeView = [];
|
12681
|
+
this.focussedDate = null;
|
12682
|
+
this.focussedDay = undefined;
|
12683
|
+
this.focussedDayEl = undefined;
|
12684
|
+
this.focussedMonth = undefined;
|
12685
|
+
this.focussedMonthEl = undefined;
|
12686
|
+
this.focussedYear = undefined;
|
12687
|
+
this.maxDate = null;
|
12688
|
+
this.minDate = null;
|
12689
|
+
this.monthInView = undefined;
|
12690
|
+
this.monthPickerVisible = false;
|
12691
|
+
this.orderedDaysOfWeek = [];
|
12692
|
+
this.selectedDate = null;
|
12693
|
+
this.yearInView = undefined;
|
12694
|
+
this.yearPickerVisible = false;
|
12695
|
+
this.dateFormat = "DD/MM/YYYY";
|
12696
|
+
this.disabled = false;
|
12697
|
+
this.disableDays = [];
|
12698
|
+
this.disableDaysMessage = "The date you have selected is on a day of the week that is not allowed. Please select another date.";
|
12699
|
+
this.disableFuture = false;
|
12700
|
+
this.disableFutureMessage = "Dates in the future are not allowed. Please select a date in the past.";
|
12701
|
+
this.disablePast = false;
|
12702
|
+
this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
|
12703
|
+
this.helperText = undefined;
|
12704
|
+
this.inputId = undefined;
|
12705
|
+
this.label = undefined;
|
12706
|
+
this.max = "";
|
12707
|
+
this.min = "";
|
12708
|
+
this.name = undefined;
|
12709
|
+
this.openAtDate = "";
|
12710
|
+
this.required = false;
|
12711
|
+
this.showDaysOutsideMonth = true;
|
12712
|
+
this.showPickerClearButton = true;
|
12713
|
+
this.showPickerTodayButton = true;
|
12714
|
+
this.size = "default";
|
12715
|
+
this.startOfWeek = IcWeekDays.Monday;
|
12716
|
+
this.validationStatus = "";
|
12717
|
+
this.validationText = "";
|
12718
|
+
this.value = "";
|
12719
|
+
}
|
12720
|
+
watchMaxHandler() {
|
12721
|
+
if (this.disableFuture) {
|
12722
|
+
this.maxDate = new Date();
|
12723
|
+
}
|
12724
|
+
else {
|
12725
|
+
this.maxDate = createDate(this.max, this.dateFormat);
|
12726
|
+
}
|
12727
|
+
}
|
12728
|
+
watchMinHandler() {
|
12729
|
+
if (this.disablePast) {
|
12730
|
+
this.minDate = new Date();
|
12731
|
+
}
|
12732
|
+
else {
|
12733
|
+
this.minDate = createDate(this.min, this.dateFormat);
|
12734
|
+
}
|
12735
|
+
}
|
12736
|
+
watchOpenHandler() {
|
12737
|
+
if (this.calendarOpen) {
|
12738
|
+
if (this.inputEl) {
|
12739
|
+
let pickerHeight = PICKER_HEIGHT_DEFAULT;
|
12740
|
+
if (this.size === "small") {
|
12741
|
+
pickerHeight = PICKER_HEIGHT_SMALL;
|
12742
|
+
}
|
12743
|
+
else if (this.size === "large") {
|
12744
|
+
pickerHeight = PICKER_HEIGHT_LARGE;
|
12745
|
+
}
|
12746
|
+
if (this.el.offsetTop + this.inputEl.offsetHeight + pickerHeight >
|
12747
|
+
window.innerHeight &&
|
12748
|
+
this.el.offsetTop > pickerHeight) {
|
12749
|
+
this.showPickerAbove = true;
|
12750
|
+
}
|
12751
|
+
else {
|
12752
|
+
this.showPickerAbove = false;
|
12753
|
+
}
|
12754
|
+
}
|
12755
|
+
if (this.selectedDate === null ||
|
12756
|
+
!dateInRange(this.selectedDate, this.minDate, this.maxDate)) {
|
12757
|
+
let openAt = new Date();
|
12758
|
+
if (this.openAtDate !== "") {
|
12759
|
+
openAt = createDate(this.openAtDate, this.dateFormat);
|
12760
|
+
}
|
12761
|
+
this.setFocussedDate(openAt);
|
12762
|
+
}
|
12763
|
+
else {
|
12764
|
+
this.setFocussedDate(this.selectedDate);
|
12765
|
+
}
|
12766
|
+
let dialogDesc = this.getMonthInViewText();
|
12767
|
+
if (this.selectedDate === null) {
|
12768
|
+
dialogDesc += " No date selected.";
|
12769
|
+
}
|
12770
|
+
dialogDesc +=
|
12771
|
+
" Use arrow keys to change day. Press enter or space to select a date or press escape to close the picker";
|
12772
|
+
this.dialogDescription = dialogDesc;
|
12773
|
+
setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
|
12774
|
+
document.addEventListener("click", this.handleDocumentClick);
|
12775
|
+
}
|
12776
|
+
else {
|
12777
|
+
document.removeEventListener("click", this.handleDocumentClick);
|
12778
|
+
this.monthPickerVisible = false;
|
12779
|
+
this.yearPickerVisible = false;
|
12780
|
+
}
|
12781
|
+
}
|
12782
|
+
watchFocussedDateHandler(current, previous) {
|
12783
|
+
if (previous === null ||
|
12784
|
+
!(previous.getFullYear() === current.getFullYear() &&
|
12785
|
+
previous.getMonth() === current.getMonth())) {
|
12786
|
+
this.updateMonthInView();
|
12787
|
+
}
|
12788
|
+
}
|
12789
|
+
watchMonthInViewHandler() {
|
12790
|
+
this.focussedMonth = this.monthInView;
|
12791
|
+
}
|
12792
|
+
watchYearInViewHandler() {
|
12793
|
+
this.setFocussedYear(this.yearInView, false);
|
12794
|
+
}
|
12795
|
+
watchYearPickerVisibleHandler() {
|
12796
|
+
if (!this.yearPickerVisible) {
|
12797
|
+
this.setFocussedYear(this.yearInView);
|
12798
|
+
}
|
12799
|
+
}
|
12800
|
+
watchMonthPickerVisibleHandler() {
|
12801
|
+
if (!this.monthPickerVisible) {
|
12802
|
+
this.focussedMonth = this.monthInView;
|
12803
|
+
}
|
12804
|
+
}
|
12805
|
+
watchFocussedDayEl() {
|
12806
|
+
if (this.focusDay) {
|
12807
|
+
setTimeout(() => this.focusFocussedDay(), FOCUS_TIMER);
|
12808
|
+
}
|
12809
|
+
this.focusDay = true;
|
12810
|
+
}
|
12811
|
+
componentWillLoad() {
|
12812
|
+
onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Date Picker");
|
12813
|
+
this.monthNames = stringEnumToArray(IcDateInputMonths);
|
12814
|
+
this.daysOfWeek = stringEnumToArray(IcShortDayNames);
|
12815
|
+
this.orderedDaysOfWeek = this.daysOfWeek
|
12816
|
+
.splice(this.startOfWeek, this.daysOfWeek.length)
|
12817
|
+
.concat(this.daysOfWeek.splice(0, this.startOfWeek));
|
12818
|
+
this.watchMaxHandler();
|
12819
|
+
this.watchMinHandler();
|
12820
|
+
}
|
12821
|
+
localCalendarButtonClickHandler(ev) {
|
12822
|
+
this.myCalendarButtonClicked = true;
|
12823
|
+
if (!this.calendarOpen) {
|
12824
|
+
this.setSelectedDate(ev.detail.value);
|
12825
|
+
}
|
12826
|
+
this.calendarOpen = !this.calendarOpen;
|
12827
|
+
}
|
12828
|
+
calendarButtonClickHandler() {
|
12829
|
+
//closes this picker if calendar button in another clicked
|
12830
|
+
if (!this.myCalendarButtonClicked) {
|
12831
|
+
this.calendarOpen = false;
|
12832
|
+
}
|
12833
|
+
this.myCalendarButtonClicked = false;
|
12834
|
+
}
|
12835
|
+
render() {
|
12836
|
+
const { calendarOpen, dateInputProps, monthNames, size, focussedMonth, focussedYear, monthInView, yearInView, monthPickerVisible, yearPickerVisible, orderedDaysOfWeek, decadeView, minDate, maxDate, showPickerClearButton, showPickerTodayButton, dialogDescription, } = this;
|
12837
|
+
let monthButtonText = "";
|
12838
|
+
if (monthPickerVisible) {
|
12839
|
+
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.`;
|
12840
|
+
}
|
12841
|
+
else {
|
12842
|
+
monthButtonText = `Press Enter or Space to open month picker view or use the arrow keys to change month.`;
|
12843
|
+
}
|
12844
|
+
let yearButtonText = "";
|
12845
|
+
if (yearPickerVisible) {
|
12846
|
+
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.`;
|
12847
|
+
}
|
12848
|
+
else {
|
12849
|
+
yearButtonText = `Press Enter or Space to open year picker view or use the arrow keys to change the selected year.`;
|
12850
|
+
}
|
12851
|
+
this.setDateInputProps();
|
12852
|
+
const dialogLabel = "choose date";
|
12853
|
+
const monthLabel = monthNames && monthNames[monthInView]
|
12854
|
+
? monthNames[monthInView]
|
12855
|
+
: "Open month picker";
|
12856
|
+
const yearLabel = this.yearInView ? this.yearInView : "Open year picker";
|
12857
|
+
let minDay = minDate;
|
12858
|
+
if (this.disablePast) {
|
12859
|
+
const yesterday = new Date(minDate);
|
12860
|
+
yesterday.setDate(minDate.getDate() - 1);
|
12861
|
+
minDay = yesterday;
|
12862
|
+
}
|
12863
|
+
return (hAsync(Host, { onKeyDown: this.keyDownHandler, class: size }, hAsync("div", { class: "date-input-container" }, hAsync("ic-date-input", Object.assign({ ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (hAsync("div", null, hAsync("span", { id: "dialog-description", class: "sr-only" }, dialogDescription), hAsync("div", { role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
|
12864
|
+
"calendar-container": true,
|
12865
|
+
above: this.showPickerAbove,
|
12866
|
+
}, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, hAsync("span", { ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("div", { class: {
|
12867
|
+
"month-year-nav-container": true,
|
12868
|
+
} }, hAsync("div", { class: "month-year-nav" }, this.previousMonthButton(), hAsync("span", { id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), hAsync("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()), hAsync("div", { class: "month-year-nav" }, this.previousYearButton(), hAsync("span", { id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), hAsync("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) && (hAsync("div", { class: {
|
12869
|
+
calendar: true,
|
12870
|
+
hidden: monthPickerVisible || yearPickerVisible,
|
12871
|
+
}, onKeyDown: this.handleCalendarKeyDown }, hAsync("div", { class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
|
12872
|
+
const header = size === "small" ? dayName.charAt(0) : dayName;
|
12873
|
+
return (hAsync("div", { class: "calendar-day-header" }, hAsync("ic-typography", { variant: "caption" }, header)));
|
12874
|
+
})), hAsync("div", { class: "calendar-days-container" }, this.currMonthView.map((day) => (hAsync(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 })))))), hAsync("div", { class: {
|
12875
|
+
"month-picker-container": true,
|
12876
|
+
hidden: !monthPickerVisible,
|
12877
|
+
} }, monthPickerVisible && (hAsync(MonthPicker, { size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), hAsync("div", { class: {
|
12878
|
+
"year-picker-container": true,
|
12879
|
+
hidden: !yearPickerVisible,
|
12880
|
+
} }, yearPickerVisible && (hAsync(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 }))), hAsync("div", { class: {
|
12881
|
+
"bottom-buttons": true,
|
12882
|
+
"no-today": !showPickerTodayButton,
|
12883
|
+
} }, showPickerTodayButton && (hAsync("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 && (hAsync("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 === "" }, "Clear"))))))));
|
12884
|
+
}
|
12885
|
+
static get delegatesFocus() { return true; }
|
12886
|
+
get el() { return getElement(this); }
|
12887
|
+
static get watchers() { return {
|
12888
|
+
"max": ["watchMaxHandler"],
|
12889
|
+
"min": ["watchMinHandler"],
|
12890
|
+
"calendarOpen": ["watchOpenHandler"],
|
12891
|
+
"focussedDate": ["watchFocussedDateHandler"],
|
12892
|
+
"monthInView": ["watchMonthInViewHandler"],
|
12893
|
+
"yearInView": ["watchYearInViewHandler"],
|
12894
|
+
"yearPickerVisible": ["watchYearPickerVisibleHandler"],
|
12895
|
+
"monthPickerVisible": ["watchMonthPickerVisibleHandler"],
|
12896
|
+
"focussedDayEl": ["watchFocussedDayEl"]
|
12897
|
+
}; }
|
12898
|
+
static get style() { return icDatePickerCss; }
|
12899
|
+
static get cmpMeta() { return {
|
12900
|
+
"$flags$": 25,
|
12901
|
+
"$tagName$": "ic-date-picker",
|
10305
12902
|
"$members$": {
|
10306
|
-
"
|
10307
|
-
"
|
10308
|
-
"
|
10309
|
-
"
|
10310
|
-
"
|
10311
|
-
"
|
10312
|
-
"
|
10313
|
-
"
|
10314
|
-
"
|
10315
|
-
"
|
10316
|
-
"
|
10317
|
-
"
|
10318
|
-
"
|
10319
|
-
"
|
10320
|
-
"
|
10321
|
-
"
|
10322
|
-
"
|
10323
|
-
"
|
10324
|
-
"
|
10325
|
-
"
|
10326
|
-
"
|
12903
|
+
"dateFormat": [1, "date-format"],
|
12904
|
+
"disabled": [4],
|
12905
|
+
"disableDays": [16],
|
12906
|
+
"disableDaysMessage": [1, "disable-days-message"],
|
12907
|
+
"disableFuture": [4, "disable-future"],
|
12908
|
+
"disableFutureMessage": [1, "disable-future-message"],
|
12909
|
+
"disablePast": [4, "disable-past"],
|
12910
|
+
"disablePastMessage": [1, "disable-past-message"],
|
12911
|
+
"helperText": [1, "helper-text"],
|
12912
|
+
"inputId": [1, "input-id"],
|
12913
|
+
"label": [1],
|
12914
|
+
"max": [1],
|
12915
|
+
"min": [1],
|
12916
|
+
"name": [1],
|
12917
|
+
"openAtDate": [1, "open-at-date"],
|
12918
|
+
"required": [4],
|
12919
|
+
"showDaysOutsideMonth": [4, "show-days-outside-month"],
|
12920
|
+
"showPickerClearButton": [4, "show-picker-clear-button"],
|
12921
|
+
"showPickerTodayButton": [4, "show-picker-today-button"],
|
12922
|
+
"size": [1],
|
12923
|
+
"startOfWeek": [2, "start-of-week"],
|
12924
|
+
"validationStatus": [1, "validation-status"],
|
12925
|
+
"validationText": [1, "validation-text"],
|
12926
|
+
"value": [1025],
|
12927
|
+
"calendarOpen": [32],
|
12928
|
+
"currMonthView": [32],
|
12929
|
+
"currYearPickerView": [32],
|
12930
|
+
"dateInputProps": [32],
|
12931
|
+
"decadeView": [32],
|
12932
|
+
"focussedDate": [32],
|
12933
|
+
"focussedDay": [32],
|
12934
|
+
"focussedDayEl": [32],
|
12935
|
+
"focussedMonth": [32],
|
12936
|
+
"focussedMonthEl": [32],
|
12937
|
+
"focussedYear": [32],
|
12938
|
+
"maxDate": [32],
|
12939
|
+
"minDate": [32],
|
12940
|
+
"monthInView": [32],
|
12941
|
+
"monthPickerVisible": [32],
|
12942
|
+
"orderedDaysOfWeek": [32],
|
12943
|
+
"selectedDate": [32],
|
12944
|
+
"yearInView": [32],
|
12945
|
+
"yearPickerVisible": [32]
|
10327
12946
|
},
|
10328
|
-
"$listeners$": [[0, "
|
12947
|
+
"$listeners$": [[0, "calendarButtonClicked", "localCalendarButtonClickHandler"], [4, "calendarButtonClicked", "calendarButtonClickHandler"]],
|
10329
12948
|
"$lazyBundleId$": "-",
|
10330
12949
|
"$attrsToReflect$": []
|
10331
12950
|
}; }
|
@@ -11375,7 +13994,7 @@ class InputComponentContainer {
|
|
11375
13994
|
["multiline"]: multiLine,
|
11376
13995
|
["fullwidth"]: fullWidth,
|
11377
13996
|
["dark"]: dark || appearance === "dark",
|
11378
|
-
} }, hAsync("div", { class: {
|
13997
|
+
}, "aria-disabled": disabled && `${disabled}` }, hAsync("div", { class: {
|
11379
13998
|
"focus-indicator": true,
|
11380
13999
|
dark: dark || appearance === "dark",
|
11381
14000
|
} }, isSlotUsed(this.el, "left-icon") && (hAsync("div", { class: {
|
@@ -16114,186 +18733,6 @@ var Check = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/
|
|
16114
18733
|
</svg>
|
16115
18734
|
`;
|
16116
18735
|
|
16117
|
-
// Build does not recognise these functions being passed via @ukic/web-components so they have been added locally
|
16118
|
-
/**
|
16119
|
-
* Used to inherit global attributes set on the host. Called in componentWillLoad and assigned
|
16120
|
-
* to a variable that is later used in the render function.
|
16121
|
-
*
|
16122
|
-
* This does not need to be reactive as changing attributes on the host element
|
16123
|
-
* does not trigger a re-render.
|
16124
|
-
*/
|
16125
|
-
const inheritAttributes = (element, attributes = []) => {
|
16126
|
-
const attributeObject = {};
|
16127
|
-
attributes.forEach((attr) => {
|
16128
|
-
if (element.hasAttribute(attr)) {
|
16129
|
-
const value = element.getAttribute(attr);
|
16130
|
-
if (value !== null) {
|
16131
|
-
attributeObject[attr] = element.getAttribute(attr);
|
16132
|
-
}
|
16133
|
-
element.removeAttribute(attr);
|
16134
|
-
}
|
16135
|
-
});
|
16136
|
-
return attributeObject;
|
16137
|
-
};
|
16138
|
-
/**
|
16139
|
-
* This method is used to add a hidden input to a host element that contains
|
16140
|
-
* a Shadow DOM. It does not add the input inside of the Shadow root which
|
16141
|
-
* allows it to be picked up inside of forms. It should contain the same
|
16142
|
-
* values as the host element.
|
16143
|
-
*
|
16144
|
-
* @param always Add a hidden input even if the container does not use Shadow
|
16145
|
-
* @param container The element where the input will be added
|
16146
|
-
* @param name The name of the input
|
16147
|
-
* @param value The value of the input
|
16148
|
-
* @param disabled If true, the input is disabled
|
16149
|
-
*/
|
16150
|
-
const renderHiddenInput = (always, container, name, value, disabled) => {
|
16151
|
-
if (name !== undefined && (always || hasShadowDom(container))) {
|
16152
|
-
const inputs = container.querySelectorAll("input.ic-input");
|
16153
|
-
const inputEls = Array.from(inputs);
|
16154
|
-
const filtered = inputEls.filter((el) => container === el.parentElement);
|
16155
|
-
let input = filtered[0];
|
16156
|
-
if (input === null || input === undefined) {
|
16157
|
-
input = container.ownerDocument.createElement("input");
|
16158
|
-
input.type = "hidden";
|
16159
|
-
input.classList.add("ic-input");
|
16160
|
-
container.appendChild(input);
|
16161
|
-
}
|
16162
|
-
input.disabled = disabled;
|
16163
|
-
input.name = name;
|
16164
|
-
input.value = value || "";
|
16165
|
-
}
|
16166
|
-
};
|
16167
|
-
const hasShadowDom = (el) => !!el.shadowRoot && !!el.attachShadow;
|
16168
|
-
const getInputHelperTextID = (id) => id + "-helper-text";
|
16169
|
-
const getInputValidationTextID = (id) => id + "-validation-text";
|
16170
|
-
const getInputDescribedByText = (inputId, helperText, validationText) => `${helperText ? getInputHelperTextID(inputId) : ""} ${validationText ? getInputValidationTextID(inputId) : ""}`.trim();
|
16171
|
-
const isMobileOrTablet = () => "maxTouchPoints" in navigator ? navigator.maxTouchPoints > 0 : false;
|
16172
|
-
/**
|
16173
|
-
* Extracts the label using the value from an object. Requires the object to have a label and value property.
|
16174
|
-
* @param value - value from object
|
16175
|
-
* @param options - list of menu items
|
16176
|
-
* @returns - label corresponding to value
|
16177
|
-
*/
|
16178
|
-
const getLabelFromValue = (value, options, valueField = "value", labelField = "label") => {
|
16179
|
-
const ungroupedOptions = [];
|
16180
|
-
if (options.length > 0 && options.map) {
|
16181
|
-
options.map((option) => {
|
16182
|
-
if (option.children) {
|
16183
|
-
option.children.map((option) => ungroupedOptions.push(option));
|
16184
|
-
}
|
16185
|
-
else {
|
16186
|
-
ungroupedOptions.push(option);
|
16187
|
-
}
|
16188
|
-
});
|
16189
|
-
const matchingValue = ungroupedOptions.find((option) => option[valueField] === value);
|
16190
|
-
if (matchingValue !== undefined)
|
16191
|
-
return matchingValue[labelField];
|
16192
|
-
}
|
16193
|
-
return undefined;
|
16194
|
-
};
|
16195
|
-
/**
|
16196
|
-
* Filters the options based on the search string.
|
16197
|
-
* @param options - array of options
|
16198
|
-
* @param includeDescriptions - determines whether option descriptions are included when filtering options
|
16199
|
-
* @param searchString - string used to filter the options
|
16200
|
-
* @param position - whether the search string matches the start of or anywhere in the options
|
16201
|
-
* @returns filtered array of options
|
16202
|
-
*/
|
16203
|
-
const getFilteredMenuOptions = (options, includeDescriptions, searchString, position, labelField = "label") => options.filter((option) => {
|
16204
|
-
var _a;
|
16205
|
-
const label = option[labelField].toLowerCase();
|
16206
|
-
const description = (_a = option.description) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
16207
|
-
const lowerSearchString = searchString.toLowerCase();
|
16208
|
-
return position === "anywhere"
|
16209
|
-
? includeDescriptions
|
16210
|
-
? label.includes(lowerSearchString) ||
|
16211
|
-
(description === null || description === void 0 ? void 0 : description.includes(lowerSearchString))
|
16212
|
-
: label.includes(lowerSearchString)
|
16213
|
-
: includeDescriptions
|
16214
|
-
? label.startsWith(lowerSearchString) ||
|
16215
|
-
(description === null || description === void 0 ? void 0 : description.startsWith(lowerSearchString))
|
16216
|
-
: label.startsWith(lowerSearchString);
|
16217
|
-
});
|
16218
|
-
/**
|
16219
|
-
* Gets count of options where only group title "parent" options have been removed.
|
16220
|
-
* Disabled options are included in the count.
|
16221
|
-
* @param options - array of options
|
16222
|
-
* @returns number of options not including group titles
|
16223
|
-
*/
|
16224
|
-
const getOptionsWithoutGroupTitlesCount = (options) => {
|
16225
|
-
const optionsWithoutGroupTitles = [];
|
16226
|
-
if (options.length > 0 && options.map) {
|
16227
|
-
options.map((option) => {
|
16228
|
-
if (option.children) {
|
16229
|
-
option.children.map((option) => optionsWithoutGroupTitles.push(option));
|
16230
|
-
}
|
16231
|
-
else {
|
16232
|
-
optionsWithoutGroupTitles.push(option);
|
16233
|
-
}
|
16234
|
-
});
|
16235
|
-
}
|
16236
|
-
return optionsWithoutGroupTitles.length;
|
16237
|
-
};
|
16238
|
-
const getCssProperty = (cssVar) => getComputedStyle(document.documentElement).getPropertyValue(cssVar);
|
16239
|
-
({
|
16240
|
-
XS: Number(getCssProperty("--ic-breakpoint-xs").replace("px", "")),
|
16241
|
-
S: Number(getCssProperty("--ic-breakpoint-sm").replace("px", "")),
|
16242
|
-
M: Number(getCssProperty("--ic-breakpoint-md").replace("px", "")),
|
16243
|
-
L: Number(getCssProperty("--ic-breakpoint-lg").replace("px", "")),
|
16244
|
-
XL: Number(getCssProperty("--ic-breakpoint-xl").replace("px", "")),
|
16245
|
-
UNDEFINED: 1200,
|
16246
|
-
});
|
16247
|
-
const hasValidationStatus = (status, disabled) => {
|
16248
|
-
return status !== "" && !disabled;
|
16249
|
-
};
|
16250
|
-
const onComponentRequiredPropUndefined = (props, component) => {
|
16251
|
-
for (let i = 0; i < props.length; i++) {
|
16252
|
-
const { prop, propName } = props[i];
|
16253
|
-
if (prop === null || prop === undefined) {
|
16254
|
-
console.error(`No ${propName} specified for ${component} component - prop '${propName}' (web components) / '${kebabToCamelCase(propName)}' (react) required`);
|
16255
|
-
}
|
16256
|
-
}
|
16257
|
-
};
|
16258
|
-
const kebabToCamelCase = (kebabCase) => {
|
16259
|
-
kebabCase = kebabCase.toLowerCase();
|
16260
|
-
const individualWords = kebabCase.split("-");
|
16261
|
-
let camelCase = individualWords[0];
|
16262
|
-
for (let i = 1; i < individualWords.length; i++) {
|
16263
|
-
camelCase +=
|
16264
|
-
individualWords[i].substring(0, 1).toUpperCase() +
|
16265
|
-
individualWords[i].substring(1);
|
16266
|
-
}
|
16267
|
-
return camelCase;
|
16268
|
-
};
|
16269
|
-
const checkResizeObserver = (callbackFn) => {
|
16270
|
-
if (typeof window !== "undefined" &&
|
16271
|
-
typeof window.ResizeObserver !== "undefined") {
|
16272
|
-
callbackFn();
|
16273
|
-
}
|
16274
|
-
};
|
16275
|
-
const getForm = (el) => el.closest("FORM");
|
16276
|
-
const addFormResetListener = (el, callbackFn) => {
|
16277
|
-
const form = getForm(el);
|
16278
|
-
if (form !== null) {
|
16279
|
-
form.addEventListener("reset", callbackFn);
|
16280
|
-
}
|
16281
|
-
};
|
16282
|
-
const removeFormResetListener = (el, callbackFn) => {
|
16283
|
-
const form = getForm(el);
|
16284
|
-
if (form !== null) {
|
16285
|
-
form.removeEventListener("reset", callbackFn);
|
16286
|
-
}
|
16287
|
-
};
|
16288
|
-
const removeDisabledFalse = (disabled, element) => {
|
16289
|
-
if (!disabled) {
|
16290
|
-
element.removeAttribute("disabled");
|
16291
|
-
}
|
16292
|
-
};
|
16293
|
-
const isMacDevice = () => {
|
16294
|
-
return window.navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
|
16295
|
-
};
|
16296
|
-
|
16297
18736
|
const icMenuCss = "html.sc-ic-menu-with-multi{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu-with-multi{margin:0}main.sc-ic-menu-with-multi{display:block}h1.sc-ic-menu-with-multi{font-size:2em;margin:0.67em 0}hr.sc-ic-menu-with-multi{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu-with-multi{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu-with-multi{background-color:transparent}abbr[title].sc-ic-menu-with-multi{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu-with-multi,strong.sc-ic-menu-with-multi{font-weight:bolder}code.sc-ic-menu-with-multi,kbd.sc-ic-menu-with-multi,samp.sc-ic-menu-with-multi{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu-with-multi{font-size:80%}sub.sc-ic-menu-with-multi,sup.sc-ic-menu-with-multi{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu-with-multi{bottom:-0.25em}sup.sc-ic-menu-with-multi{top:-0.5em}img.sc-ic-menu-with-multi{border-style:none}button.sc-ic-menu-with-multi,input.sc-ic-menu-with-multi,optgroup.sc-ic-menu-with-multi,select.sc-ic-menu-with-multi,textarea.sc-ic-menu-with-multi{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu-with-multi,input.sc-ic-menu-with-multi{overflow:visible}button.sc-ic-menu-with-multi,select.sc-ic-menu-with-multi{text-transform:none}button.sc-ic-menu-with-multi,[type=\"button\"].sc-ic-menu-with-multi,[type=\"reset\"].sc-ic-menu-with-multi,[type=\"submit\"].sc-ic-menu-with-multi{-webkit-appearance:button}button.sc-ic-menu-with-multi::-moz-focus-inner,[type=\"button\"].sc-ic-menu-with-multi::-moz-focus-inner,[type=\"reset\"].sc-ic-menu-with-multi::-moz-focus-inner,[type=\"submit\"].sc-ic-menu-with-multi::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu-with-multi:-moz-focusring,[type=\"button\"].sc-ic-menu-with-multi:-moz-focusring,[type=\"reset\"].sc-ic-menu-with-multi:-moz-focusring,[type=\"submit\"].sc-ic-menu-with-multi:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu-with-multi{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu-with-multi{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu-with-multi{vertical-align:baseline}textarea.sc-ic-menu-with-multi{overflow:auto}[type=\"checkbox\"].sc-ic-menu-with-multi,[type=\"radio\"].sc-ic-menu-with-multi{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu-with-multi::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu-with-multi::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu-with-multi{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu-with-multi::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu-with-multi::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu-with-multi{display:block}summary.sc-ic-menu-with-multi{display:list-item}template.sc-ic-menu-with-multi{display:none}[hidden].sc-ic-menu-with-multi{display:none}html.sc-ic-menu-with-multi,body.sc-ic-menu-with-multi,div.sc-ic-menu-with-multi,span.sc-ic-menu-with-multi,applet.sc-ic-menu-with-multi,object.sc-ic-menu-with-multi,iframe.sc-ic-menu-with-multi,h1.sc-ic-menu-with-multi,h2.sc-ic-menu-with-multi,h3.sc-ic-menu-with-multi,h4.sc-ic-menu-with-multi,h5.sc-ic-menu-with-multi,h6.sc-ic-menu-with-multi,p.sc-ic-menu-with-multi,blockquote.sc-ic-menu-with-multi,pre.sc-ic-menu-with-multi,a.sc-ic-menu-with-multi,abbr.sc-ic-menu-with-multi,acronym.sc-ic-menu-with-multi,address.sc-ic-menu-with-multi,big.sc-ic-menu-with-multi,cite.sc-ic-menu-with-multi,code.sc-ic-menu-with-multi,del.sc-ic-menu-with-multi,dfn.sc-ic-menu-with-multi,em.sc-ic-menu-with-multi,img.sc-ic-menu-with-multi,ins.sc-ic-menu-with-multi,kbd.sc-ic-menu-with-multi,q.sc-ic-menu-with-multi,s.sc-ic-menu-with-multi,samp.sc-ic-menu-with-multi,small.sc-ic-menu-with-multi,strike.sc-ic-menu-with-multi,strong.sc-ic-menu-with-multi,sub.sc-ic-menu-with-multi,sup.sc-ic-menu-with-multi,tt.sc-ic-menu-with-multi,var.sc-ic-menu-with-multi,b.sc-ic-menu-with-multi,u.sc-ic-menu-with-multi,i.sc-ic-menu-with-multi,center.sc-ic-menu-with-multi,dl.sc-ic-menu-with-multi,dt.sc-ic-menu-with-multi,dd.sc-ic-menu-with-multi,ol.sc-ic-menu-with-multi,ul.sc-ic-menu-with-multi,li.sc-ic-menu-with-multi,fieldset.sc-ic-menu-with-multi,form.sc-ic-menu-with-multi,label.sc-ic-menu-with-multi,legend.sc-ic-menu-with-multi,table.sc-ic-menu-with-multi,caption.sc-ic-menu-with-multi,tbody.sc-ic-menu-with-multi,tfoot.sc-ic-menu-with-multi,thead.sc-ic-menu-with-multi,tr.sc-ic-menu-with-multi,th.sc-ic-menu-with-multi,td.sc-ic-menu-with-multi,article.sc-ic-menu-with-multi,aside.sc-ic-menu-with-multi,canvas.sc-ic-menu-with-multi,details.sc-ic-menu-with-multi,embed.sc-ic-menu-with-multi,figure.sc-ic-menu-with-multi,figcaption.sc-ic-menu-with-multi,footer.sc-ic-menu-with-multi,header.sc-ic-menu-with-multi,hgroup.sc-ic-menu-with-multi,menu.sc-ic-menu-with-multi,nav.sc-ic-menu-with-multi,output.sc-ic-menu-with-multi,ruby.sc-ic-menu-with-multi,section.sc-ic-menu-with-multi,summary.sc-ic-menu-with-multi,time.sc-ic-menu-with-multi,mark.sc-ic-menu-with-multi,audio.sc-ic-menu-with-multi,video.sc-ic-menu-with-multi{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.open.sc-ic-menu-with-multi-h .menu.sc-ic-menu-with-multi{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-with-multi-h{max-height:0;width:var(--menu-width, var(--input-width, 20rem));min-width:20rem;color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:var(--ic-border-radius)}.open.sc-ic-menu-with-multi-h:not(.no-focus):focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}.select-all-focused.sc-ic-menu-with-multi-h{box-shadow:var(--ic-elevation-overlay) !important}#retry-button.sc-ic-menu-with-multi::part(button){height:var(--ic-space-lg)}.small.sc-ic-menu-with-multi #retry-button.sc-ic-menu-with-multi::part(button){height:var(--ic-space-md)}.on-dialog.sc-ic-menu-with-multi-h{inset:auto !important}.menu.sc-ic-menu-with-multi{text-decoration:none;list-style-type:none;border-radius:1px;background-color:var(--ic-architectural-white);visibility:hidden;max-height:0;overflow-y:hidden}.menu.sc-ic-menu-with-multi:has(+.option-bar).sc-ic-menu-with-multi{border-radius:0 0 1px 1px}.menu-scroll.sc-ic-menu-with-multi{overflow-y:auto}.menu.sc-ic-menu-with-multi:focus-visible{outline:none}.open.sc-ic-menu-with-multi-h{max-height:none;display:flex;flex-direction:column-reverse;border:var(--ic-border-width) solid var(--ic-architectural-400);transition:box-shadow var(--ic-easing-transition-fast)}.open.sc-ic-menu-with-multi-h .menu.sc-ic-menu-with-multi{visibility:visible;max-height:calc(var(--ic-space-xl) * 10 + var(--ic-space-xxxs))}.open.sc-ic-menu-with-multi-h .option-bar.sc-ic-menu-with-multi{visibility:visible}.open.sc-ic-menu-with-multi-h .select-all-button.sc-ic-menu-with-multi{display:block}.full-width.sc-ic-menu-with-multi-h{width:100%}.option.sc-ic-menu-with-multi{padding:var(--ic-space-xs) calc(var(--ic-space-xs) - var(--ic-space-1px));cursor:pointer;display:flex;align-items:center}.loading-option.sc-ic-menu-with-multi p.sc-ic-menu-with-multi{margin-bottom:0 !important}.option.sc-ic-menu-with-multi:not(.loading-option){justify-content:space-between}.small.sc-ic-menu-with-multi-h .option.sc-ic-menu-with-multi{padding:var(--ic-space-xxs) calc(var(--ic-space-xs) - var(--ic-space-1px))}.large.sc-ic-menu-with-multi-h .option.sc-ic-menu-with-multi{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))}.option.sc-ic-menu-with-multi:last-child{border-radius:0 0 1px 1px}.sc-ic-menu-with-multi:not(.menu:has(+.option-bar)).sc-ic-menu-with-multi .option.sc-ic-menu-with-multi:first-child{border-radius:1px 1px 0 0}.option.sc-ic-menu-with-multi:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option.sc-ic-menu-with-multi:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option.sc-ic-menu-with-multi:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu-with-multi:not(.disabled-option) .option-description.sc-ic-menu-with-multi{color:var(--ic-color-secondary-text)}.option.sc-ic-menu-with-multi .option-label.sc-ic-menu-with-multi{display:flex;flex-direction:row;align-items:top}.option.sc-ic-menu-with-multi .option-element.sc-ic-menu-with-multi{margin-top:var(--ic-space-xxs)}.option.sc-ic-menu-with-multi .option-icon.sc-ic-menu-with-multi{height:var(--ic-space-md);width:var(--ic-space-md);margin-top:var(--ic-space-xxs);margin-right:var(--ic-space-xxxs)}.option-text-container.sc-ic-menu-with-multi{pointer-events:none;max-width:calc(var(--ic-space-lg) * 10 + var(--ic-space-xl))}.option.loading-option.sc-ic-menu-with-multi .option-text-container.sc-ic-menu-with-multi{margin-left:calc(var(--ic-space-xs) + var(--ic-space-xxxs));color:var(--ic-color-secondary-text)}.error-icon-svg.sc-ic-menu-with-multi{height:var(--ic-space-md);width:var(--ic-space-md);fill:var(--ic-status-error);align-self:center;display:flex;margin-right:calc(var(--ic-space-xxs) * 1.2)}.loading-error-info.sc-ic-menu-with-multi{display:flex}.check-icon.sc-ic-menu-with-multi{height:var(--ic-space-lg);min-width:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-xs);pointer-events:none}.focused-option.sc-ic-menu-with-multi .check-icon.sc-ic-menu-with-multi *.sc-ic-menu-with-multi{fill:currentcolor}.option-group-title.sc-ic-menu-with-multi{padding:var(--ic-space-lg) calc(var(--ic-space-xs) - var(--ic-space-1px))\n var(--ic-space-xs);color:var(--ic-color-tertiary-text)}.small.sc-ic-menu-with-multi-h .option-group-title.sc-ic-menu-with-multi{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))\n var(--ic-space-xxs)}.last-recommended-option.sc-ic-menu-with-multi{border-bottom:var(--ic-border-default)}.disabled-option.sc-ic-menu-with-multi{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option.sc-ic-menu-with-multi,.focused-option.sc-ic-menu-with-multi .option-description.sc-ic-menu-with-multi{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}.no-results.sc-ic-menu-with-multi-h li.sc-ic-menu-with-multi{cursor:no-drop}.no-results.sc-ic-menu-with-multi-h li.sc-ic-menu-with-multi:hover{background-color:transparent}.option-bar.sc-ic-menu-with-multi{padding:var(--ic-space-xxs) var(--ic-space-xs);display:flex;align-items:center;justify-content:space-between;background-color:var(--ic-architectural-40);visibility:hidden;border-bottom:var(--ic-border-width) solid var(--ic-architectural-400);border-radius:1px 1px 0 0}.option-bar.sc-ic-menu-with-multi p.sc-ic-menu-with-multi{margin-bottom:0 !important}.large.sc-ic-menu-with-multi-h .option-bar.sc-ic-menu-with-multi{padding:var(--ic-space-xs)}.select-all-button.sc-ic-menu-with-multi{display:none}.select-all-button.sc-ic-menu-with-multi:focus{z-index:calc(var(--ic-z-index-menu) + 1)}@media (forced-colors: active){.focused-option.sc-ic-menu-with-multi:focus{outline:none;border:0.125rem solid transparent}}";
|
16298
18737
|
|
16299
18738
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
@@ -20705,47 +23144,6 @@ class Select$1 {
|
|
20705
23144
|
}; }
|
20706
23145
|
}
|
20707
23146
|
|
20708
|
-
// Global ARIA attributes
|
20709
|
-
const IC_INHERITED_ARIA = [
|
20710
|
-
"aria-atomic",
|
20711
|
-
"aria-autocomplete",
|
20712
|
-
"aria-busy",
|
20713
|
-
"aria-controls",
|
20714
|
-
"aria-current",
|
20715
|
-
"aria-describedby",
|
20716
|
-
"aria-description",
|
20717
|
-
"aria-details",
|
20718
|
-
"aria-disabled",
|
20719
|
-
"aria-dropeffect",
|
20720
|
-
"aria-errormessage",
|
20721
|
-
"aria-expanded",
|
20722
|
-
"aria-flowto",
|
20723
|
-
"aria-grabbed",
|
20724
|
-
"aria-haspopup",
|
20725
|
-
"aria-hidden",
|
20726
|
-
"aria-invalid",
|
20727
|
-
"aria-keyshortcuts",
|
20728
|
-
"aria-label",
|
20729
|
-
"aria-labelledby",
|
20730
|
-
"aria-live",
|
20731
|
-
"aria-owns",
|
20732
|
-
"aria-relevant",
|
20733
|
-
"aria-roledescription",
|
20734
|
-
];
|
20735
|
-
|
20736
|
-
var IcInformationStatus;
|
20737
|
-
(function (IcInformationStatus) {
|
20738
|
-
IcInformationStatus["Warning"] = "warning";
|
20739
|
-
IcInformationStatus["Error"] = "error";
|
20740
|
-
IcInformationStatus["Success"] = "success";
|
20741
|
-
})(IcInformationStatus || (IcInformationStatus = {}));
|
20742
|
-
var IcThemeForegroundEnum;
|
20743
|
-
(function (IcThemeForegroundEnum) {
|
20744
|
-
IcThemeForegroundEnum["Default"] = "default";
|
20745
|
-
IcThemeForegroundEnum["Dark"] = "dark";
|
20746
|
-
IcThemeForegroundEnum["Light"] = "light";
|
20747
|
-
})(IcThemeForegroundEnum || (IcThemeForegroundEnum = {}));
|
20748
|
-
|
20749
23147
|
var Expand = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
20750
23148
|
<path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor" />
|
20751
23149
|
</svg>
|
@@ -21849,7 +24247,7 @@ class SideNavigation {
|
|
21849
24247
|
this.el.parentElement.style.setProperty("padding-left", value);
|
21850
24248
|
};
|
21851
24249
|
this.renderAppTitle = (isAppNameSubtitleVariant) => {
|
21852
|
-
const displayShortAppTitle = this.deviceSize <= DEVICE_SIZES.S && !isEmptyString(this.shortAppTitle);
|
24250
|
+
const displayShortAppTitle = this.deviceSize <= DEVICE_SIZES.S && !isEmptyString$1(this.shortAppTitle);
|
21853
24251
|
return (hAsync("ic-typography", { variant: displayShortAppTitle || isAppNameSubtitleVariant
|
21854
24252
|
? "subtitle-small"
|
21855
24253
|
: "h3", "aria-label": displayShortAppTitle
|
@@ -23358,8 +25756,8 @@ class TextField {
|
|
23358
25756
|
["no-resize"]: resize === false || readonly,
|
23359
25757
|
["no-left-pad"]: !this.showLeftIcon && readonly,
|
23360
25758
|
["readonly"]: readonly,
|
23361
|
-
}, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholderText, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (hAsync("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (hAsync("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && hAsync("slot", { name: "menu" }), (!isEmptyString(validationStatus) ||
|
23362
|
-
!isEmptyString(validationText) ||
|
25759
|
+
}, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholderText, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : null, minlength: minCharactersUnattained ? minCharacters : null }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (hAsync("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (hAsync("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && hAsync("slot", { name: "menu" }), (!isEmptyString$1(validationStatus) ||
|
25760
|
+
!isEmptyString$1(validationText) ||
|
23363
25761
|
maxNumChars > 0 ||
|
23364
25762
|
maxValueExceeded ||
|
23365
25763
|
maxCharactersError ||
|
@@ -24444,7 +26842,7 @@ class TopNavigation {
|
|
24444
26842
|
["fullwidth-searchbar"]: this.hasFullWidthSearchBar,
|
24445
26843
|
[IcThemeForegroundEnum$1.Dark]: this.foregroundColor === IcThemeForegroundEnum$1.Dark,
|
24446
26844
|
} }, hAsync("div", { class: "top-navigation" }, hAsync("ic-section-container", { aligned: this.contentAligned, "full-height": true }, hAsync("header", { role: "banner" }, hAsync("div", { class: "top-panel-container" }, hAsync("div", { class: "app-details-container" }, (hasTitle || isSlotUsed(this.el, "app-title")) && (hAsync(Component, Object.assign({ class: "title-link" }, attrs), this.hasAppIcon && (hAsync("div", { class: "app-icon-container" }, hAsync("slot", { name: "app-icon" }))), this.deviceSize <= DEVICE_SIZES.S &&
|
24447
|
-
(!isEmptyString(this.shortAppTitle) ||
|
26845
|
+
(!isEmptyString$1(this.shortAppTitle) ||
|
24448
26846
|
shortAppTitleSlot) ? (hAsync("ic-typography", { variant: "subtitle-small", "aria-label": (!isSlotUsed(this.el, "app-title") ||
|
24449
26847
|
!shortAppTitleSlot) &&
|
24450
26848
|
`${this.appTitle} (${this.shortAppTitle})` }, hAsync("h1", null, shortAppTitleSlot ? (hAsync("slot", { name: "short-app-title" })) : (this.shortAppTitle)))) : (hAsync("ic-typography", { variant: appTitleVariant }, hAsync("h1", { class: "title-wrap" }, isSlotUsed(this.el, "app-title") ? (hAsync("slot", { name: "app-title" })) : (this.appTitle)))))), this.status !== "" && (hAsync("div", { class: "app-status" }, hAsync("ic-typography", { "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, this.status))), this.version !== "" && (hAsync("div", { class: "app-version" }, hAsync("ic-typography", { variant: "label", class: "app-version-text", "aria-label": "app version" }, this.version)))), (this.hasSearchSlotContent || hasMenuContent) && (hAsync("div", { class: "search-menu-container" }, hAsync("div", { class: "search-actions-container" }, this.deviceSize > DEVICE_SIZES.L && (hAsync("slot", { name: "search" })), this.hasSearchSlotContent &&
|
@@ -24646,6 +27044,8 @@ registerComponents([
|
|
24646
27044
|
DataEntity,
|
24647
27045
|
DataRow,
|
24648
27046
|
DataTable,
|
27047
|
+
DateInput,
|
27048
|
+
DatePicker,
|
24649
27049
|
Dialog,
|
24650
27050
|
Divider,
|
24651
27051
|
EmptyState,
|