@ionic/core 7.6.2-dev.11702924017.193c825c → 7.6.2-dev.11702926577.1a448647
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/action-sheet.js +4 -4
- package/components/backdrop.js +12 -0
- package/components/button-active.js +1 -1
- package/components/button.js +2 -2
- package/components/data.js +1 -1
- package/components/gesture-controller.js +1 -1
- package/components/ion-content.js +1 -1
- package/components/ion-datetime.js +64 -40
- package/components/ion-picker-column-internal.d.ts +11 -0
- package/components/ion-picker-column-internal.js +9 -0
- package/components/ion-picker-column.js +2 -2
- package/components/{ion-picker-legacy.d.ts → ion-picker-internal.d.ts} +4 -4
- package/components/ion-picker-internal.js +9 -0
- package/components/ion-picker.js +309 -1
- package/components/overlays.js +4 -11
- package/components/picker-column-internal.js +390 -0
- package/components/picker-column.js +322 -351
- package/components/{picker.js → picker-internal.js} +22 -29
- package/dist/cjs/{button-active-466dfc8a.js → button-active-962fe442.js} +2 -2
- package/dist/cjs/{data-e2bf21de.js → data-a5109f09.js} +1 -1
- package/dist/cjs/{gesture-controller-9436f482.js → gesture-controller-c40c045a.js} +0 -1
- package/dist/cjs/{index-ee07ed59.js → index-d1b59ffa.js} +1 -1
- package/dist/cjs/index.cjs.js +3 -3
- package/dist/cjs/ion-action-sheet.cjs.entry.js +8 -8
- package/dist/cjs/ion-alert.cjs.entry.js +4 -4
- package/dist/cjs/ion-app_8.cjs.entry.js +2 -2
- package/dist/cjs/ion-backdrop.cjs.entry.js +12 -0
- package/dist/cjs/ion-button_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-datetime-button.cjs.entry.js +1 -1
- package/dist/cjs/ion-datetime_3.cjs.entry.js +56 -36
- package/dist/cjs/ion-item-option_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-loading.cjs.entry.js +1 -2
- package/dist/cjs/ion-menu_3.cjs.entry.js +3 -3
- package/dist/cjs/ion-modal.cjs.entry.js +3 -3
- package/dist/cjs/ion-nav_2.cjs.entry.js +1 -1
- package/dist/cjs/{ion-picker-column.cjs.entry.js → ion-picker-column-internal.cjs.entry.js} +87 -104
- package/dist/cjs/{ion-picker.cjs.entry.js → ion-picker-internal.cjs.entry.js} +19 -26
- package/dist/cjs/ion-popover.cjs.entry.js +1 -2
- package/dist/cjs/ion-range.cjs.entry.js +1 -1
- package/dist/cjs/ion-refresher_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-reorder_2.cjs.entry.js +1 -1
- package/dist/cjs/ion-segment_2.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +1 -2
- package/dist/cjs/ion-toast.cjs.entry.js +3 -3
- package/dist/cjs/ion-toggle.cjs.entry.js +1 -1
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{overlays-7773cbe1.js → overlays-e77cc023.js} +4 -11
- package/dist/cjs/{swipe-back-b8f2330b.js → swipe-back-2a858bbd.js} +2 -2
- package/dist/collection/collection-manifest.json +6 -7
- package/dist/collection/components/action-sheet/action-sheet.ios.css +2 -9
- package/dist/collection/components/action-sheet/action-sheet.js +2 -2
- package/dist/collection/components/action-sheet/action-sheet.md.css +2 -9
- package/dist/collection/components/action-sheet/test/basic/action-sheet-rendering.e2e.js +0 -20
- package/dist/collection/components/backdrop/backdrop.js +12 -0
- package/dist/collection/components/button/button.ios.css +1 -1
- package/dist/collection/components/button/button.md.css +1 -1
- package/dist/collection/components/button/test/wrap/button.e2e.js +24 -12
- package/dist/collection/components/content/content.css +4 -0
- package/dist/collection/components/datetime/datetime.ios.css +38 -91
- package/dist/collection/components/datetime/datetime.js +36 -24
- package/dist/collection/components/datetime/datetime.md.css +38 -96
- package/dist/collection/components/datetime/test/a11y/datetime.e2e.js +1 -1
- package/dist/collection/components/datetime/test/a11y/datetime.spec.js +9 -6
- package/dist/collection/components/datetime/test/basic/datetime.e2e.js +0 -10
- package/dist/collection/components/datetime/test/datetime.e2e.js +2 -2
- package/dist/collection/components/datetime/test/disabled/datetime.spec.js +4 -4
- package/dist/collection/components/datetime/test/locale/datetime.e2e.js +2 -2
- package/dist/collection/components/datetime/test/minmax/datetime.e2e.js +6 -6
- package/dist/collection/components/datetime/test/month-year-picker/datetime.e2e.js +1 -1
- package/dist/collection/components/datetime/test/prefer-wheel/datetime.e2e.js +41 -43
- package/dist/collection/components/datetime/test/presentation/datetime.e2e.js +1 -1
- package/dist/collection/components/datetime/test/readonly/datetime.e2e.js +4 -4
- package/dist/collection/components/datetime/test/values/datetime.e2e.js +12 -15
- package/dist/collection/components/datetime/utils/data.js +1 -1
- package/dist/collection/components/picker/picker.ios.css +211 -112
- package/dist/collection/components/picker/picker.js +744 -472
- package/dist/collection/components/picker/picker.md.css +198 -108
- package/dist/collection/components/picker/test/basic/picker.e2e.js +13 -99
- package/dist/collection/components/{picker-legacy → picker}/test/is-open/picker.e2e.js +4 -4
- package/dist/collection/components/{picker-legacy → picker}/test/picker-id.spec.js +5 -5
- package/dist/collection/components/{picker-legacy → picker}/test/trigger/picker.e2e.js +1 -1
- package/dist/collection/components/picker-column/picker-column.js +335 -497
- package/dist/collection/components/{picker-legacy-column → picker-column}/test/picker-column-aria.spec.js +3 -3
- package/dist/collection/components/{picker-legacy-column → picker-column}/test/picker-column-dynamic.spec.js +2 -2
- package/dist/collection/components/{picker-legacy-column → picker-column}/test/picker-column.spec.js +2 -2
- package/dist/collection/components/{picker-legacy-column → picker-column}/test/standalone/picker-column.e2e.js +3 -3
- package/dist/collection/components/{picker-column-option/picker-column-option.md.css → picker-column-internal/picker-column-internal.ios.css} +53 -6
- package/dist/collection/components/picker-column-internal/picker-column-internal.js +565 -0
- package/dist/collection/components/{picker-column/picker-column.css → picker-column-internal/picker-column-internal.md.css} +83 -96
- package/dist/collection/components/{picker-column/test/basic/picker-column.e2e.js → picker-column-internal/test/basic/picker-column-internal.e2e.js} +8 -8
- package/dist/collection/components/picker-column-internal/test/disabled/picker-column-internal.e2e.js +162 -0
- package/dist/collection/components/{picker-legacy/picker.md.css → picker-internal/picker-internal.ios.css} +100 -192
- package/dist/collection/components/picker-internal/picker-internal.js +544 -0
- package/dist/collection/components/{picker-legacy/picker.ios.css → picker-internal/picker-internal.md.css} +98 -207
- package/dist/collection/components/{picker/test/a11y/picker.e2e.js → picker-internal/test/a11y/picker-internal.e2e.js} +2 -2
- package/dist/collection/components/picker-internal/test/basic/picker-internal.e2e.js +118 -0
- package/dist/collection/components/{picker/test/keyboard-entry/picker.e2e.js → picker-internal/test/keyboard-entry/picker-internal.e2e.js} +32 -63
- package/dist/collection/utils/gesture/button-active.js +1 -1
- package/dist/collection/utils/gesture/gesture-controller.js +1 -1
- package/dist/collection/utils/overlays.js +4 -11
- package/dist/docs.json +42 -484
- package/dist/esm/{button-active-2758ff14.js → button-active-308d3edd.js} +2 -2
- package/dist/esm/{data-6a31d701.js → data-775093f5.js} +1 -1
- package/dist/esm/{gesture-controller-314a54f6.js → gesture-controller-1bf57181.js} +1 -1
- package/dist/esm/{index-39782642.js → index-2cf77112.js} +2 -2
- package/dist/esm/index.js +3 -3
- package/dist/esm/ion-action-sheet.entry.js +8 -8
- package/dist/esm/ion-alert.entry.js +4 -4
- package/dist/esm/ion-app_8.entry.js +2 -2
- package/dist/esm/ion-backdrop.entry.js +12 -0
- package/dist/esm/ion-button_2.entry.js +2 -2
- package/dist/esm/ion-datetime-button.entry.js +1 -1
- package/dist/esm/ion-datetime_3.entry.js +55 -35
- package/dist/esm/ion-item-option_3.entry.js +1 -1
- package/dist/esm/ion-loading.entry.js +1 -2
- package/dist/esm/ion-menu_3.entry.js +3 -3
- package/dist/esm/ion-modal.entry.js +3 -3
- package/dist/esm/ion-nav_2.entry.js +1 -1
- package/dist/esm/{ion-picker-column.entry.js → ion-picker-column-internal.entry.js} +87 -104
- package/dist/esm/{ion-picker.entry.js → ion-picker-internal.entry.js} +19 -26
- package/dist/esm/ion-popover.entry.js +1 -2
- package/dist/esm/ion-range.entry.js +1 -1
- package/dist/esm/ion-refresher_2.entry.js +3 -3
- package/dist/esm/ion-reorder_2.entry.js +1 -1
- package/dist/esm/ion-segment_2.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +1 -2
- package/dist/esm/ion-toast.entry.js +3 -3
- package/dist/esm/ion-toggle.entry.js +1 -1
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{overlays-94dac1cb.js → overlays-b33f6bca.js} +4 -11
- package/dist/esm/{swipe-back-a8ca7f93.js → swipe-back-a6f386fc.js} +2 -2
- package/dist/esm-es5/button-active-308d3edd.js +4 -0
- package/dist/esm-es5/{gesture-controller-314a54f6.js → gesture-controller-1bf57181.js} +1 -1
- package/dist/esm-es5/{index-39782642.js → index-2cf77112.js} +1 -1
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
- package/dist/esm-es5/ion-alert.entry.js +1 -1
- package/dist/esm-es5/ion-app_8.entry.js +1 -1
- package/dist/esm-es5/ion-backdrop.entry.js +1 -1
- package/dist/esm-es5/ion-button_2.entry.js +1 -1
- package/dist/esm-es5/ion-datetime-button.entry.js +1 -1
- package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
- package/dist/esm-es5/ion-item-option_3.entry.js +1 -1
- package/dist/esm-es5/ion-loading.entry.js +1 -1
- package/dist/esm-es5/ion-menu_3.entry.js +1 -1
- package/dist/esm-es5/ion-modal.entry.js +1 -1
- package/dist/esm-es5/ion-nav_2.entry.js +1 -1
- package/dist/esm-es5/ion-picker-column-internal.entry.js +4 -0
- package/dist/esm-es5/ion-picker-internal.entry.js +4 -0
- package/dist/esm-es5/ion-popover.entry.js +1 -1
- package/dist/esm-es5/ion-range.entry.js +1 -1
- package/dist/esm-es5/ion-refresher_2.entry.js +1 -1
- package/dist/esm-es5/ion-reorder_2.entry.js +1 -1
- package/dist/esm-es5/ion-segment_2.entry.js +1 -1
- package/dist/esm-es5/ion-select_3.entry.js +1 -1
- package/dist/esm-es5/ion-toast.entry.js +1 -1
- package/dist/esm-es5/ion-toggle.entry.js +1 -1
- package/dist/esm-es5/ionic.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/overlays-b33f6bca.js +4 -0
- package/dist/esm-es5/swipe-back-a6f386fc.js +4 -0
- package/dist/html.html-data.json +1 -152
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-0235067a.js +4 -0
- package/dist/ionic/{p-f6cae0b2.system.entry.js → p-06abe918.system.entry.js} +1 -1
- package/dist/ionic/{p-5ff211d0.system.entry.js → p-10ec9af7.system.entry.js} +1 -1
- package/dist/ionic/{p-10339dcc.entry.js → p-11786dc7.entry.js} +1 -1
- package/dist/ionic/{p-1b14f0f8.entry.js → p-11a3973f.entry.js} +1 -1
- package/dist/ionic/p-12a62500.entry.js +4 -0
- package/dist/ionic/p-19d9ceb8.system.js +1 -1
- package/dist/ionic/{p-642ac927.entry.js → p-1b27ac67.entry.js} +1 -1
- package/dist/ionic/p-1c249831.entry.js +4 -0
- package/dist/ionic/{p-e2737fef.system.entry.js → p-22827063.system.entry.js} +1 -1
- package/dist/ionic/{p-d2634efe.system.entry.js → p-28740823.system.entry.js} +1 -1
- package/dist/ionic/{p-c01803db.entry.js → p-2894d5f6.entry.js} +1 -1
- package/dist/ionic/{p-b2b5d761.entry.js → p-2a583966.entry.js} +1 -1
- package/dist/ionic/{p-beed2450.system.entry.js → p-2df97906.system.entry.js} +1 -1
- package/dist/ionic/{p-3e1e14d9.system.js → p-31b2326e.system.js} +1 -1
- package/dist/ionic/p-35ce400e.system.js +4 -0
- package/dist/ionic/p-3671f1b9.system.js +4 -0
- package/dist/ionic/{p-bb3fd397.entry.js → p-3e8d5e53.entry.js} +1 -1
- package/dist/ionic/p-47bb15a1.entry.js +4 -0
- package/dist/ionic/p-4d145435.entry.js +4 -0
- package/dist/ionic/p-507ddbfe.system.entry.js +4 -0
- package/dist/ionic/p-648ad047.system.entry.js +4 -0
- package/dist/ionic/p-6a6477b2.js +4 -0
- package/dist/ionic/p-6ab03751.js +4 -0
- package/dist/ionic/{p-25312768.system.entry.js → p-6b0ce9b4.system.entry.js} +1 -1
- package/dist/ionic/p-6c277fa2.system.entry.js +4 -0
- package/dist/ionic/p-6fba0ce1.system.entry.js +4 -0
- package/dist/ionic/{p-3af5faf8.system.entry.js → p-745e3339.system.entry.js} +1 -1
- package/dist/ionic/{p-ba5d9e27.entry.js → p-767f1a92.entry.js} +1 -1
- package/dist/ionic/p-7dc892f8.entry.js +4 -0
- package/dist/ionic/p-85f48531.entry.js +4 -0
- package/dist/ionic/p-8f301ac5.system.entry.js +4 -0
- package/dist/ionic/p-932f2259.system.entry.js +4 -0
- package/dist/ionic/{p-0e908476.system.entry.js → p-96d4814f.system.entry.js} +1 -1
- package/dist/ionic/{p-964dcdb2.system.entry.js → p-9fda6824.system.entry.js} +1 -1
- package/dist/ionic/{p-bec6ae40.entry.js → p-a3ca2e64.entry.js} +1 -1
- package/dist/ionic/{p-4793c14c.system.entry.js → p-a42ef163.system.entry.js} +1 -1
- package/dist/ionic/{p-6e4c7340.system.entry.js → p-a821750c.system.entry.js} +1 -1
- package/dist/ionic/{p-ed8402d6.entry.js → p-aee39e06.entry.js} +1 -1
- package/dist/ionic/{p-1ab2642a.system.js → p-afa9f205.system.js} +1 -1
- package/dist/ionic/p-b1f29949.system.entry.js +4 -0
- package/dist/ionic/p-b7a2ffc9.system.entry.js +4 -0
- package/dist/ionic/{p-92bfb607.entry.js → p-b964aba3.entry.js} +1 -1
- package/dist/ionic/{p-9b97df10.js → p-bb3615f7.js} +1 -1
- package/dist/ionic/{p-3dc1b0f9.entry.js → p-c1701827.entry.js} +1 -1
- package/dist/ionic/{p-20755eb0.entry.js → p-c5acfeb1.entry.js} +1 -1
- package/dist/ionic/{p-20d469d0.system.js → p-c7c8429a.system.js} +1 -1
- package/dist/ionic/p-cd1b920b.entry.js +4 -0
- package/dist/ionic/p-da5e2652.entry.js +4 -0
- package/dist/ionic/{p-3b434dee.system.entry.js → p-dc71e4ef.system.entry.js} +1 -1
- package/dist/ionic/{p-db05ecb6.system.entry.js → p-ddd48faf.system.entry.js} +1 -1
- package/dist/ionic/p-ec652bc0.system.entry.js +4 -0
- package/dist/ionic/{p-13d4dfe7.entry.js → p-f2bfd3d7.entry.js} +1 -1
- package/dist/ionic/{p-8ededb41.js → p-f5d2dc9b.js} +1 -1
- package/dist/ionic/p-f6e9c227.system.js +4 -0
- package/dist/ionic/p-f894e0ad.entry.js +4 -0
- package/dist/types/components/action-sheet/action-sheet-interface.d.ts +0 -1
- package/dist/types/components/backdrop/backdrop.d.ts +3 -0
- package/dist/types/components/datetime/datetime.d.ts +1 -0
- package/dist/types/components/datetime/utils/data.d.ts +7 -11
- package/dist/types/components/menu/menu.d.ts +1 -1
- package/dist/types/components/picker/picker.d.ts +129 -75
- package/dist/types/components/picker-column/picker-column.d.ts +39 -99
- package/dist/types/components/picker-column-internal/picker-column-internal-interfaces.d.ts +5 -0
- package/dist/types/components/picker-column-internal/picker-column-internal.d.ts +102 -0
- package/dist/types/components/picker-internal/picker-internal-interfaces.d.ts +8 -0
- package/dist/types/components/picker-internal/picker-internal.d.ts +102 -0
- package/dist/types/components.d.ts +122 -154
- package/dist/types/interface.d.ts +1 -1
- package/dist/types/utils/config.d.ts +2 -2
- package/dist/types/utils/gesture/gesture-controller.d.ts +0 -1
- package/dist/types/utils/overlays.d.ts +2 -5
- package/hydrate/index.js +1199 -1300
- package/package.json +2 -2
- package/components/ion-picker-column-option.d.ts +0 -11
- package/components/ion-picker-column-option.js +0 -9
- package/components/ion-picker-legacy-column.d.ts +0 -11
- package/components/ion-picker-legacy-column.js +0 -9
- package/components/ion-picker-legacy.js +0 -309
- package/components/picker-column-option.js +0 -122
- package/components/picker-column2.js +0 -379
- package/dist/cjs/ion-picker-column-option.cjs.entry.js +0 -104
- package/dist/collection/components/picker/test/custom/picker.e2e.js +0 -85
- package/dist/collection/components/picker-column/test/disabled/picker-column.e2e.js +0 -91
- package/dist/collection/components/picker-column/test/slots/picker-column.e2e.js +0 -39
- package/dist/collection/components/picker-column-option/picker-column-option.ios.css +0 -87
- package/dist/collection/components/picker-column-option/picker-column-option.js +0 -173
- package/dist/collection/components/picker-column-option/test/a11y/picker-column-option.e2e.js +0 -18
- package/dist/collection/components/picker-column-option/test/basic/picker-column-option.e2e.js +0 -37
- package/dist/collection/components/picker-column-option/test/picker-column-option.spec.js +0 -29
- package/dist/collection/components/picker-legacy/picker.js +0 -817
- package/dist/collection/components/picker-legacy/test/basic/picker.e2e.js +0 -25
- package/dist/collection/components/picker-legacy-column/picker-column.js +0 -419
- package/dist/collection/utils/test/overlays/overlays-scroll-blocking.spec.js +0 -65
- package/dist/esm/ion-picker-column-option.entry.js +0 -100
- package/dist/esm-es5/button-active-2758ff14.js +0 -4
- package/dist/esm-es5/ion-picker-column-option.entry.js +0 -4
- package/dist/esm-es5/ion-picker-column.entry.js +0 -4
- package/dist/esm-es5/ion-picker.entry.js +0 -4
- package/dist/esm-es5/overlays-94dac1cb.js +0 -4
- package/dist/esm-es5/swipe-back-a8ca7f93.js +0 -4
- package/dist/ionic/p-26ff1180.entry.js +0 -4
- package/dist/ionic/p-2f449cdf.system.entry.js +0 -4
- package/dist/ionic/p-3717e641.system.entry.js +0 -4
- package/dist/ionic/p-51abefb7.system.js +0 -4
- package/dist/ionic/p-71483cbb.entry.js +0 -4
- package/dist/ionic/p-73fbf18d.entry.js +0 -4
- package/dist/ionic/p-75a3e35b.entry.js +0 -4
- package/dist/ionic/p-77d78f68.system.entry.js +0 -4
- package/dist/ionic/p-7c0d778d.system.js +0 -4
- package/dist/ionic/p-80ad9792.system.js +0 -4
- package/dist/ionic/p-85a67421.system.entry.js +0 -4
- package/dist/ionic/p-8ad6d643.entry.js +0 -4
- package/dist/ionic/p-9164a09d.entry.js +0 -4
- package/dist/ionic/p-a1bd098f.system.entry.js +0 -4
- package/dist/ionic/p-a41eaff2.system.entry.js +0 -4
- package/dist/ionic/p-a60a1ce5.js +0 -4
- package/dist/ionic/p-c001b24f.entry.js +0 -4
- package/dist/ionic/p-c19bf524.entry.js +0 -4
- package/dist/ionic/p-c6176849.system.entry.js +0 -4
- package/dist/ionic/p-cf350317.entry.js +0 -4
- package/dist/ionic/p-d3525765.js +0 -4
- package/dist/ionic/p-dc63dccb.system.entry.js +0 -4
- package/dist/ionic/p-f0717d98.js +0 -4
- package/dist/ionic/p-f0dea903.system.entry.js +0 -4
- package/dist/ionic/p-f60807dd.system.entry.js +0 -4
- package/dist/ionic/p-f8c5008f.entry.js +0 -4
- package/dist/types/components/picker/picker-interfaces.d.ts +0 -8
- package/dist/types/components/picker-column/picker-column-interfaces.d.ts +0 -4
- package/dist/types/components/picker-column-option/picker-column-option.d.ts +0 -66
- package/dist/types/components/picker-legacy/picker.d.ts +0 -158
- package/dist/types/components/picker-legacy-column/picker-column.d.ts +0 -46
- /package/dist/collection/components/{picker-legacy → picker}/animations/ios.enter.js +0 -0
- /package/dist/collection/components/{picker-legacy → picker}/animations/ios.leave.js +0 -0
- /package/dist/collection/components/picker/{picker-interfaces.js → picker-interface.js} +0 -0
- /package/dist/collection/components/{picker-legacy-column → picker-column}/picker-column.ios.css +0 -0
- /package/dist/collection/components/{picker-legacy-column → picker-column}/picker-column.md.css +0 -0
- /package/dist/collection/components/{picker-legacy-column → picker-column}/test/test.utils.js +0 -0
- /package/dist/collection/components/{picker-column/picker-column-interfaces.js → picker-column-internal/picker-column-internal-interfaces.js} +0 -0
- /package/dist/collection/components/{picker-legacy/picker-interface.js → picker-internal/picker-internal-interfaces.js} +0 -0
- /package/dist/esm-es5/{data-6a31d701.js → data-775093f5.js} +0 -0
- /package/dist/ionic/{p-a64accf5.js → p-18cae04f.js} +0 -0
- /package/dist/ionic/{p-7ff4359e.system.js → p-87bb3735.system.js} +0 -0
- /package/dist/types/components/{picker-legacy → picker}/animations/ios.enter.d.ts +0 -0
- /package/dist/types/components/{picker-legacy → picker}/animations/ios.leave.d.ts +0 -0
- /package/dist/types/components/{picker-legacy → picker}/picker-interface.d.ts +0 -0
- /package/dist/types/components/{picker-legacy-column → picker-column}/test/test.utils.d.ts +0 -0
package/hydrate/index.js
CHANGED
|
@@ -7976,7 +7976,7 @@ const createButtonActiveGesture = (el, isButton) => {
|
|
|
7976
7976
|
return;
|
|
7977
7977
|
}
|
|
7978
7978
|
const target = document.elementFromPoint(x, y);
|
|
7979
|
-
if (!target || !isButton(target)
|
|
7979
|
+
if (!target || !isButton(target)) {
|
|
7980
7980
|
clearActiveButton();
|
|
7981
7981
|
return;
|
|
7982
7982
|
}
|
|
@@ -8334,7 +8334,7 @@ const focusLastDescendant = (ref, overlay) => {
|
|
|
8334
8334
|
* Should NOT include: Toast
|
|
8335
8335
|
*/
|
|
8336
8336
|
const trapKeyboardFocus = (ev, doc) => {
|
|
8337
|
-
const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker
|
|
8337
|
+
const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
|
|
8338
8338
|
const target = ev.target;
|
|
8339
8339
|
/**
|
|
8340
8340
|
* If no active overlay, ignore this event.
|
|
@@ -8519,7 +8519,7 @@ const dismissOverlay = (doc, data, role, overlayTag, id) => {
|
|
|
8519
8519
|
*/
|
|
8520
8520
|
const getOverlays = (doc, selector) => {
|
|
8521
8521
|
if (selector === undefined) {
|
|
8522
|
-
selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker
|
|
8522
|
+
selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
|
|
8523
8523
|
}
|
|
8524
8524
|
return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
|
|
8525
8525
|
};
|
|
@@ -8585,7 +8585,6 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
8585
8585
|
return;
|
|
8586
8586
|
}
|
|
8587
8587
|
setRootAriaHidden(true);
|
|
8588
|
-
document.body.classList.add(BACKDROP_NO_SCROLL);
|
|
8589
8588
|
overlay.presented = true;
|
|
8590
8589
|
overlay.willPresent.emit();
|
|
8591
8590
|
(_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
|
|
@@ -8648,14 +8647,12 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
|
|
|
8648
8647
|
if (!overlay.presented) {
|
|
8649
8648
|
return false;
|
|
8650
8649
|
}
|
|
8651
|
-
const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
|
|
8652
8650
|
/**
|
|
8653
8651
|
* If this is the last visible overlay then
|
|
8654
8652
|
* we want to re-add the root to the accessibility tree.
|
|
8655
8653
|
*/
|
|
8656
|
-
if (
|
|
8654
|
+
if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
|
|
8657
8655
|
setRootAriaHidden(false);
|
|
8658
|
-
document.body.classList.remove(BACKDROP_NO_SCROLL);
|
|
8659
8656
|
}
|
|
8660
8657
|
overlay.presented = false;
|
|
8661
8658
|
try {
|
|
@@ -10065,9 +10062,9 @@ const mdLeaveAnimation$5 = (baseEl) => {
|
|
|
10065
10062
|
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
10066
10063
|
};
|
|
10067
10064
|
|
|
10068
|
-
const actionSheetIosCss = ".sc-ion-action-sheet-ios-h{--color:initial;--button-color-activated:var(--button-color);--button-color-focused:var(--button-color);--button-color-hover:var(--button-color);--button-color-selected:var(--button-color);--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--height:auto;--max-height:calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:block;position:fixed;outline:none;font-family:var(--ion-font-family, inherit);-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}.overlay-hidden.sc-ion-action-sheet-ios-h{display:none}.action-sheet-wrapper.sc-ion-action-sheet-ios{left:0;right:0;bottom:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:block;position:absolute;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);z-index:10;pointer-events:none}.action-sheet-button.sc-ion-action-sheet-ios{display:block;position:relative;width:100%;border:0;outline:none;background:var(--button-background);color:var(--button-color);font-family:inherit;overflow:hidden}.action-sheet-button
|
|
10065
|
+
const actionSheetIosCss = ".sc-ion-action-sheet-ios-h{--color:initial;--button-color-activated:var(--button-color);--button-color-focused:var(--button-color);--button-color-hover:var(--button-color);--button-color-selected:var(--button-color);--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--height:auto;--max-height:calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:block;position:fixed;outline:none;font-family:var(--ion-font-family, inherit);-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}.overlay-hidden.sc-ion-action-sheet-ios-h{display:none}.action-sheet-wrapper.sc-ion-action-sheet-ios{left:0;right:0;bottom:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:block;position:absolute;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);z-index:10;pointer-events:none}.action-sheet-button.sc-ion-action-sheet-ios{display:block;position:relative;width:100%;border:0;outline:none;background:var(--button-background);color:var(--button-color);font-family:inherit;overflow:hidden}.action-sheet-button-inner.sc-ion-action-sheet-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;pointer-events:none;width:100%;height:100%;z-index:1}.action-sheet-container.sc-ion-action-sheet-ios{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:end;justify-content:flex-end;height:100%;max-height:calc(100vh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));max-height:calc(100dvh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)))}.action-sheet-group.sc-ion-action-sheet-ios{-ms-flex-negative:2;flex-shrink:2;overscroll-behavior-y:contain;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:all;background:var(--background)}@media (any-pointer: coarse){.action-sheet-group.sc-ion-action-sheet-ios::-webkit-scrollbar{display:none}}.action-sheet-group-cancel.sc-ion-action-sheet-ios{-ms-flex-negative:0;flex-shrink:0;overflow:hidden}.action-sheet-button.sc-ion-action-sheet-ios::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.action-sheet-selected.sc-ion-action-sheet-ios{color:var(--button-color-selected)}.action-sheet-selected.sc-ion-action-sheet-ios::after{background:var(--button-background-selected);opacity:var(--button-background-selected-opacity)}.action-sheet-button.ion-activated.sc-ion-action-sheet-ios{color:var(--button-color-activated)}.action-sheet-button.ion-activated.sc-ion-action-sheet-ios::after{background:var(--button-background-activated);opacity:var(--button-background-activated-opacity)}.action-sheet-button.ion-focused.sc-ion-action-sheet-ios{color:var(--button-color-focused)}.action-sheet-button.ion-focused.sc-ion-action-sheet-ios::after{background:var(--button-background-focused);opacity:var(--button-background-focused-opacity)}@media (any-hover: hover){.action-sheet-button.sc-ion-action-sheet-ios:hover{color:var(--button-color-hover)}.action-sheet-button.sc-ion-action-sheet-ios:hover::after{background:var(--button-background-hover);opacity:var(--button-background-hover-opacity)}}.sc-ion-action-sheet-ios-h{--background:var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9));--backdrop-opacity:var(--ion-backdrop-opacity, 0.4);--button-background:linear-gradient(0deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08), rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 50%, transparent 50%) bottom/100% 1px no-repeat transparent;--button-background-activated:var(--ion-text-color, #000);--button-background-activated-opacity:.08;--button-background-hover:currentColor;--button-background-hover-opacity:.04;--button-background-focused:currentColor;--button-background-focused-opacity:.12;--button-background-selected:var(--ion-color-step-150, var(--ion-background-color, #fff));--button-background-selected-opacity:1;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-400, #999999);text-align:center}.action-sheet-wrapper.sc-ion-action-sheet-ios{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:var(--ion-safe-area-top, 0);margin-bottom:var(--ion-safe-area-bottom, 0)}.action-sheet-container.sc-ion-action-sheet-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0}.action-sheet-group.sc-ion-action-sheet-ios{border-radius:13px;margin-bottom:8px}.action-sheet-group.sc-ion-action-sheet-ios:first-child{margin-top:10px}.action-sheet-group.sc-ion-action-sheet-ios:last-child{margin-bottom:10px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-group.sc-ion-action-sheet-ios{background-color:transparent;-webkit-backdrop-filter:saturate(280%) blur(20px);backdrop-filter:saturate(280%) blur(20px)}.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-title.sc-ion-action-sheet-ios,.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-button.sc-ion-action-sheet-ios{background-color:transparent;background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8))), -webkit-gradient(linear, left bottom, left top, from(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.4)), color-stop(50%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.4)), color-stop(50%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background-image:linear-gradient(0deg, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8), rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%), linear-gradient(0deg, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.4), rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.4) 50%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 50%);background-repeat:no-repeat;background-position:top, bottom;background-size:100% calc(100% - 1px), 100% 1px;-webkit-backdrop-filter:saturate(120%);backdrop-filter:saturate(120%)}.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-button.ion-activated.sc-ion-action-sheet-ios{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.7);background-image:none}.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-cancel.sc-ion-action-sheet-ios{background:var(--button-background-selected)}}.action-sheet-title.sc-ion-action-sheet-ios{background:-webkit-gradient(linear, left bottom, left top, from(rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)), color-stop(50%, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)), color-stop(50%, transparent)) bottom/100% 1px no-repeat transparent;background:linear-gradient(0deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08), rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 50%, transparent 50%) bottom/100% 1px no-repeat transparent}.action-sheet-title.sc-ion-action-sheet-ios{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:14px;padding-bottom:13px;color:var(--color, var(--ion-color-step-400, #999999));font-size:max(13px, 0.8125rem);font-weight:400;text-align:center}.action-sheet-title.action-sheet-has-sub-title.sc-ion-action-sheet-ios{font-weight:600}.action-sheet-sub-title.sc-ion-action-sheet-ios{padding-left:0;padding-right:0;padding-top:6px;padding-bottom:0;font-size:max(13px, 0.8125rem);font-weight:400}.action-sheet-button.sc-ion-action-sheet-ios{-webkit-padding-start:14px;padding-inline-start:14px;-webkit-padding-end:14px;padding-inline-end:14px;padding-top:14px;padding-bottom:14px;min-height:56px;font-size:max(20px, 1.25rem);contain:content}.action-sheet-button.sc-ion-action-sheet-ios .action-sheet-icon.sc-ion-action-sheet-ios{-webkit-margin-end:0.3em;margin-inline-end:0.3em;font-size:max(28px, 1.75rem);pointer-events:none}.action-sheet-button.sc-ion-action-sheet-ios:last-child{background-image:none}.action-sheet-selected.sc-ion-action-sheet-ios{font-weight:bold}.action-sheet-cancel.sc-ion-action-sheet-ios{font-weight:600}.action-sheet-cancel.sc-ion-action-sheet-ios::after{background:var(--button-background-selected);opacity:var(--button-background-selected-opacity)}.action-sheet-destructive.sc-ion-action-sheet-ios,.action-sheet-destructive.ion-activated.sc-ion-action-sheet-ios,.action-sheet-destructive.ion-focused.sc-ion-action-sheet-ios{color:var(--ion-color-danger, #eb445a)}@media (any-hover: hover){.action-sheet-destructive.sc-ion-action-sheet-ios:hover{color:var(--ion-color-danger, #eb445a)}}";
|
|
10069
10066
|
|
|
10070
|
-
const actionSheetMdCss = ".sc-ion-action-sheet-md-h{--color:initial;--button-color-activated:var(--button-color);--button-color-focused:var(--button-color);--button-color-hover:var(--button-color);--button-color-selected:var(--button-color);--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--height:auto;--max-height:calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:block;position:fixed;outline:none;font-family:var(--ion-font-family, inherit);-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}.overlay-hidden.sc-ion-action-sheet-md-h{display:none}.action-sheet-wrapper.sc-ion-action-sheet-md{left:0;right:0;bottom:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:block;position:absolute;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);z-index:10;pointer-events:none}.action-sheet-button.sc-ion-action-sheet-md{display:block;position:relative;width:100%;border:0;outline:none;background:var(--button-background);color:var(--button-color);font-family:inherit;overflow:hidden}.action-sheet-button
|
|
10067
|
+
const actionSheetMdCss = ".sc-ion-action-sheet-md-h{--color:initial;--button-color-activated:var(--button-color);--button-color-focused:var(--button-color);--button-color-hover:var(--button-color);--button-color-selected:var(--button-color);--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--height:auto;--max-height:calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:block;position:fixed;outline:none;font-family:var(--ion-font-family, inherit);-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}.overlay-hidden.sc-ion-action-sheet-md-h{display:none}.action-sheet-wrapper.sc-ion-action-sheet-md{left:0;right:0;bottom:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:block;position:absolute;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);z-index:10;pointer-events:none}.action-sheet-button.sc-ion-action-sheet-md{display:block;position:relative;width:100%;border:0;outline:none;background:var(--button-background);color:var(--button-color);font-family:inherit;overflow:hidden}.action-sheet-button-inner.sc-ion-action-sheet-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;pointer-events:none;width:100%;height:100%;z-index:1}.action-sheet-container.sc-ion-action-sheet-md{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:end;justify-content:flex-end;height:100%;max-height:calc(100vh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)));max-height:calc(100dvh - (var(--ion-safe-area-top, 0) + var(--ion-safe-area-bottom, 0)))}.action-sheet-group.sc-ion-action-sheet-md{-ms-flex-negative:2;flex-shrink:2;overscroll-behavior-y:contain;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:all;background:var(--background)}@media (any-pointer: coarse){.action-sheet-group.sc-ion-action-sheet-md::-webkit-scrollbar{display:none}}.action-sheet-group-cancel.sc-ion-action-sheet-md{-ms-flex-negative:0;flex-shrink:0;overflow:hidden}.action-sheet-button.sc-ion-action-sheet-md::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.action-sheet-selected.sc-ion-action-sheet-md{color:var(--button-color-selected)}.action-sheet-selected.sc-ion-action-sheet-md::after{background:var(--button-background-selected);opacity:var(--button-background-selected-opacity)}.action-sheet-button.ion-activated.sc-ion-action-sheet-md{color:var(--button-color-activated)}.action-sheet-button.ion-activated.sc-ion-action-sheet-md::after{background:var(--button-background-activated);opacity:var(--button-background-activated-opacity)}.action-sheet-button.ion-focused.sc-ion-action-sheet-md{color:var(--button-color-focused)}.action-sheet-button.ion-focused.sc-ion-action-sheet-md::after{background:var(--button-background-focused);opacity:var(--button-background-focused-opacity)}@media (any-hover: hover){.action-sheet-button.sc-ion-action-sheet-md:hover{color:var(--button-color-hover)}.action-sheet-button.sc-ion-action-sheet-md:hover::after{background:var(--button-background-hover);opacity:var(--button-background-hover-opacity)}}.sc-ion-action-sheet-md-h{--background:var(--ion-overlay-background-color, var(--ion-background-color, #fff));--backdrop-opacity:var(--ion-backdrop-opacity, 0.32);--button-background:transparent;--button-background-selected:currentColor;--button-background-selected-opacity:0;--button-background-activated:transparent;--button-background-activated-opacity:0;--button-background-hover:currentColor;--button-background-hover-opacity:.04;--button-background-focused:currentColor;--button-background-focused-opacity:.12;--button-color:var(--ion-color-step-850, #262626);--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54)}.action-sheet-wrapper.sc-ion-action-sheet-md{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:var(--ion-safe-area-top, 0);margin-bottom:0}.action-sheet-title.sc-ion-action-sheet-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:20px;padding-bottom:17px;min-height:60px;color:var(--color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54));font-size:1rem;text-align:start}.action-sheet-sub-title.sc-ion-action-sheet-md{padding-left:0;padding-right:0;padding-top:16px;padding-bottom:0;font-size:0.875rem}.action-sheet-group.sc-ion-action-sheet-md:first-child{padding-top:0}.action-sheet-group.sc-ion-action-sheet-md:last-child{padding-bottom:var(--ion-safe-area-bottom)}.action-sheet-button.sc-ion-action-sheet-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;position:relative;min-height:52px;font-size:1rem;text-align:start;contain:content;overflow:hidden}.action-sheet-icon.sc-ion-action-sheet-md{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:0;margin-bottom:0;color:var(--color);font-size:1.5rem}.action-sheet-button-inner.sc-ion-action-sheet-md{-ms-flex-pack:start;justify-content:flex-start}.action-sheet-selected.sc-ion-action-sheet-md{font-weight:bold}";
|
|
10071
10068
|
|
|
10072
10069
|
/**
|
|
10073
10070
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
@@ -10258,7 +10255,7 @@ class ActionSheet {
|
|
|
10258
10255
|
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { tappable: this.backdropDismiss }), hAsync("div", { tabindex: "0" }), hAsync("div", { class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { class: "action-sheet-container" }, hAsync("div", { class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (hAsync("div", { id: headerID, class: {
|
|
10259
10256
|
'action-sheet-title': true,
|
|
10260
10257
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
10261
|
-
} }, header, this.subHeader && hAsync("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (hAsync("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass$3(b), onClick: () => this.buttonClick(b)
|
|
10258
|
+
} }, header, this.subHeader && hAsync("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (hAsync("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass$3(b), onClick: () => this.buttonClick(b) }), hAsync("span", { class: "action-sheet-button-inner" }, b.icon && hAsync("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && hAsync("ion-ripple-effect", null))))), cancelButton && (hAsync("div", { class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({}, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", null)))))), hAsync("div", { tabindex: "0" })));
|
|
10262
10259
|
}
|
|
10263
10260
|
get el() { return getElement(this); }
|
|
10264
10261
|
static get watchers() { return {
|
|
@@ -10300,7 +10297,7 @@ class ActionSheet {
|
|
|
10300
10297
|
}; }
|
|
10301
10298
|
}
|
|
10302
10299
|
const buttonClass$3 = (button) => {
|
|
10303
|
-
return Object.assign({ 'action-sheet-button': true, 'ion-activatable':
|
|
10300
|
+
return Object.assign({ 'action-sheet-button': true, 'ion-activatable': true, 'ion-focusable': true, [`action-sheet-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
|
|
10304
10301
|
};
|
|
10305
10302
|
|
|
10306
10303
|
const ENABLE_HTML_CONTENT_DEFAULT = false;
|
|
@@ -11173,10 +11170,21 @@ class Backdrop {
|
|
|
11173
11170
|
constructor(hostRef) {
|
|
11174
11171
|
registerInstance(this, hostRef);
|
|
11175
11172
|
this.ionBackdropTap = createEvent(this, "ionBackdropTap", 7);
|
|
11173
|
+
this.blocker = GESTURE_CONTROLLER.createBlocker({
|
|
11174
|
+
disableScroll: true,
|
|
11175
|
+
});
|
|
11176
11176
|
this.visible = true;
|
|
11177
11177
|
this.tappable = true;
|
|
11178
11178
|
this.stopPropagation = true;
|
|
11179
11179
|
}
|
|
11180
|
+
connectedCallback() {
|
|
11181
|
+
if (this.stopPropagation) {
|
|
11182
|
+
this.blocker.block();
|
|
11183
|
+
}
|
|
11184
|
+
}
|
|
11185
|
+
disconnectedCallback() {
|
|
11186
|
+
this.blocker.unblock();
|
|
11187
|
+
}
|
|
11180
11188
|
onMouseDown(ev) {
|
|
11181
11189
|
this.emitTap(ev);
|
|
11182
11190
|
}
|
|
@@ -11505,9 +11513,9 @@ class Breadcrumbs {
|
|
|
11505
11513
|
}; }
|
|
11506
11514
|
}
|
|
11507
11515
|
|
|
11508
|
-
const buttonIosCss = "/*!@:host*/.sc-ion-button-ios-h{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}/*!@:host(.button-disabled)*/.button-disabled.sc-ion-button-ios-h{cursor:default;opacity:0.5;pointer-events:none}/*!@:host(.button-solid)*/.button-solid.sc-ion-button-ios-h{--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}/*!@:host(.button-outline)*/.button-outline.sc-ion-button-ios-h{--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}/*!@:host(.button-clear)*/.button-clear.sc-ion-button-ios-h{--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}/*!@:host(.button-block)*/.button-block.sc-ion-button-ios-h{display:block}/*!@:host(.button-block) .button-native*/.button-block.sc-ion-button-ios-h .button-native.sc-ion-button-ios{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}/*!@:host(.button-block) .button-native::after*/.button-block.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{clear:both}/*!@:host(.button-full)*/.button-full.sc-ion-button-ios-h{display:block}/*!@:host(.button-full) .button-native*/.button-full.sc-ion-button-ios-h .button-native.sc-ion-button-ios{margin-left:0;margin-right:0;width:100%;contain:content}/*!@:host(.button-full:not(.button-round)) .button-native*/.button-full.sc-ion-button-ios-h:not(.button-round) .button-native.sc-ion-button-ios{border-radius:0;border-right-width:0;border-left-width:0}/*!@.button-native*/.button-native.sc-ion-button-ios{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@.button-native::-moz-focus-inner*/.button-native.sc-ion-button-ios::-moz-focus-inner{border:0}/*!@.button-inner*/.button-inner.sc-ion-button-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}/*!@::slotted([slot=start]),\n::slotted([slot=end])*/.sc-ion-button-ios-s>[slot=start],.sc-ion-button-ios-s>[slot=end]{-ms-flex-negative:0;flex-shrink:0}/*!@::slotted(ion-icon)*/.sc-ion-button-ios-s>ion-icon{font-size:1.35em;pointer-events:none}/*!@::slotted(ion-icon[slot=start])*/.sc-ion-button-ios-s>ion-icon[slot=start]{-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}/*!@::slotted(ion-icon[slot=end])*/.sc-ion-button-ios-s>ion-icon[slot=end]{-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}/*!@::slotted(ion-icon[slot=icon-only])*/.sc-ion-button-ios-s>ion-icon[slot=icon-only]{font-size:1.8em}/*!@ion-ripple-effect*/ion-ripple-effect.sc-ion-button-ios{color:var(--ripple-color)}/*!@.button-native::after*/.button-native.sc-ion-button-ios::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}/*!@:host(.ion-focused)*/.ion-focused.sc-ion-button-ios-h{color:var(--color-focused)}/*!@:host(.ion-focused) .button-native::after*/.ion-focused.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){/*!@:host(:hover)*/.sc-ion-button-ios-h:hover{color:var(--color-hover)}/*!@:host(:hover) .button-native::after*/.sc-ion-button-ios-h:hover .button-native.sc-ion-button-ios::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}/*!@:host(.ion-activated)*/.ion-activated.sc-ion-button-ios-h{color:var(--color-activated)}/*!@:host(.ion-activated) .button-native::after*/.ion-activated.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}/*!@:host(.button-solid.ion-color) .button-native*/.button-solid.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@:host(.button-outline.ion-color) .button-native*/.button-outline.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}/*!@:host(.button-clear.ion-color) .button-native*/.button-clear.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios{background:transparent;color:var(--ion-color-base)}/*!@:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.in-toolbar.sc-ion-button-ios-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-ios{color:var(--ion-toolbar-color, var(--color))}/*!@:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.button-outline.in-toolbar.sc-ion-button-ios-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-ios{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}/*!@:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.button-solid.in-toolbar.sc-ion-button-ios-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-ios{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}/*!@:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.button-outline.ion-activated.in-toolbar.sc-ion-button-ios-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-ios{background:var(--ion-toolbar-color, var(--color));color:var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff))}/*!@:host*/.sc-ion-button-ios-h{--border-radius:14px;--padding-top:13px;--padding-bottom:13px;--padding-start:1em;--padding-end:1em;--transition:background-color, opacity 100ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:3.1em;font-size:min(1rem, 48px);font-weight:500;letter-spacing:0}/*!@:host(.button-solid)*/.button-solid.sc-ion-button-ios-h{--background-activated:var(--ion-color-primary-shade, #3171e0);--background-focused:var(--ion-color-primary-shade, #3171e0);--background-hover:var(--ion-color-primary-tint, #4c8dff);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1}/*!@:host(.button-outline)*/.button-outline.sc-ion-button-ios-h{--border-radius:14px;--border-width:1px;--border-style:solid;--background-activated:var(--ion-color-primary, #3880ff);--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;--color-activated:var(--ion-color-primary-contrast, #fff)}/*!@:host(.button-clear)*/.button-clear.sc-ion-button-ios-h{--background-activated:transparent;--background-activated-opacity:0;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;font-size:min(1.0625rem, 51px);font-weight:normal}/*!@:host(.in-buttons)*/.in-buttons.sc-ion-button-ios-h{font-size:clamp(17px, 1.0625rem, 21.08px);font-weight:400}/*!@:host(.button-large)*/.button-large.sc-ion-button-ios-h{--border-radius:16px;--padding-top:17px;--padding-start:1em;--padding-end:1em;--padding-bottom:17px;min-height:3.1em;font-size:min(1.25rem, 60px)}/*!@:host(.button-small)*/.button-small.sc-ion-button-ios-h{--border-radius:6px;--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:min(0.8125rem, 39px)}/*!@:host(.button-has-icon-only)*/.button-has-icon-only.sc-ion-button-ios-h{--padding-top:0;--padding-bottom:0}/*!@:host(.button-round)*/.button-round.sc-ion-button-ios-h{--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}/*!@:host(.button-strong)*/.button-strong.sc-ion-button-ios-h{font-weight:600}/*!@:host(.button-outline.ion-focused.ion-color) .button-native,\n:host(.button-clear.ion-focused.ion-color) .button-native*/.button-outline.ion-focused.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios,.button-clear.ion-focused.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios{color:var(--ion-color-base)}/*!@:host(.button-outline.ion-focused.ion-color) .button-native::after,\n:host(.button-clear.ion-focused.ion-color) .button-native::after*/.button-outline.ion-focused.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after,.button-clear.ion-focused.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{background:var(--ion-color-base)}/*!@:host(.button-solid.ion-color.ion-focused) .button-native::after*/.button-solid.ion-color.ion-focused.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{background:var(--ion-color-shade)}@media (any-hover: hover){/*!@:host(.button-clear:not(.ion-activated):hover),\n :host(.button-outline:not(.ion-activated):hover)*/.button-clear.sc-ion-button-ios-h:not(.ion-activated):hover,.button-outline.sc-ion-button-ios-h:not(.ion-activated):hover{opacity:0.6}/*!@:host(.button-clear.ion-color:hover) .button-native,\n :host(.button-outline.ion-color:hover) .button-native*/.button-clear.ion-color.sc-ion-button-ios-h:hover .button-native.sc-ion-button-ios,.button-outline.ion-color.sc-ion-button-ios-h:hover .button-native.sc-ion-button-ios{color:var(--ion-color-base)}/*!@:host(.button-clear.ion-color:hover) .button-native::after,\n :host(.button-outline.ion-color:hover) .button-native::after*/.button-clear.ion-color.sc-ion-button-ios-h:hover .button-native.sc-ion-button-ios::after,.button-outline.ion-color.sc-ion-button-ios-h:hover .button-native.sc-ion-button-ios::after{background:transparent}/*!@:host(.button-solid.ion-color:hover) .button-native::after*/.button-solid.ion-color.sc-ion-button-ios-h:hover .button-native.sc-ion-button-ios::after{background:var(--ion-color-tint)}/*!@:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after*/.sc-ion-button-ios-h:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated) .button-native.sc-ion-button-ios::after{background:#fff;opacity:0.1}}/*!@:host(.button-clear.ion-activated)*/.button-clear.ion-activated.sc-ion-button-ios-h{opacity:0.4}/*!@:host(.button-outline.ion-activated.ion-color) .button-native*/.button-outline.ion-activated.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios{color:var(--ion-color-contrast)}/*!@:host(.button-outline.ion-activated.ion-color) .button-native::after*/.button-outline.ion-activated.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{background:var(--ion-color-base)}/*!@:host(.button-solid.ion-color.ion-activated) .button-native::after*/.button-solid.ion-color.ion-activated.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{background:var(--ion-color-shade)}";
|
|
11516
|
+
const buttonIosCss = "/*!@:host*/.sc-ion-button-ios-h{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}/*!@:host(.button-disabled)*/.button-disabled.sc-ion-button-ios-h{cursor:default;opacity:0.5;pointer-events:none}/*!@:host(.button-solid)*/.button-solid.sc-ion-button-ios-h{--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}/*!@:host(.button-outline)*/.button-outline.sc-ion-button-ios-h{--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}/*!@:host(.button-clear)*/.button-clear.sc-ion-button-ios-h{--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}/*!@:host(.button-block)*/.button-block.sc-ion-button-ios-h{display:block}/*!@:host(.button-block) .button-native*/.button-block.sc-ion-button-ios-h .button-native.sc-ion-button-ios{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}/*!@:host(.button-block) .button-native::after*/.button-block.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{clear:both}/*!@:host(.button-full)*/.button-full.sc-ion-button-ios-h{display:block}/*!@:host(.button-full) .button-native*/.button-full.sc-ion-button-ios-h .button-native.sc-ion-button-ios{margin-left:0;margin-right:0;width:100%;contain:content}/*!@:host(.button-full:not(.button-round)) .button-native*/.button-full.sc-ion-button-ios-h:not(.button-round) .button-native.sc-ion-button-ios{border-radius:0;border-right-width:0;border-left-width:0}/*!@.button-native*/.button-native.sc-ion-button-ios{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@.button-native::-moz-focus-inner*/.button-native.sc-ion-button-ios::-moz-focus-inner{border:0}/*!@.button-inner*/.button-inner.sc-ion-button-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}/*!@::slotted([slot=start]),\n::slotted([slot=end])*/.sc-ion-button-ios-s>[slot=start],.sc-ion-button-ios-s>[slot=end]{-ms-flex-negative:0;flex-shrink:0}/*!@::slotted(ion-icon)*/.sc-ion-button-ios-s>ion-icon{font-size:1.35em;pointer-events:none}/*!@::slotted(ion-icon[slot=start])*/.sc-ion-button-ios-s>ion-icon[slot=start]{-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}/*!@::slotted(ion-icon[slot=end])*/.sc-ion-button-ios-s>ion-icon[slot=end]{-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}/*!@::slotted(ion-icon[slot=icon-only])*/.sc-ion-button-ios-s>ion-icon[slot=icon-only]{font-size:1.8em}/*!@ion-ripple-effect*/ion-ripple-effect.sc-ion-button-ios{color:var(--ripple-color)}/*!@.button-native::after*/.button-native.sc-ion-button-ios::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}/*!@:host(.ion-focused)*/.ion-focused.sc-ion-button-ios-h{color:var(--color-focused)}/*!@:host(.ion-focused) .button-native::after*/.ion-focused.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){/*!@:host(:hover)*/.sc-ion-button-ios-h:hover{color:var(--color-hover)}/*!@:host(:hover) .button-native::after*/.sc-ion-button-ios-h:hover .button-native.sc-ion-button-ios::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}/*!@:host(.ion-activated)*/.ion-activated.sc-ion-button-ios-h{color:var(--color-activated)}/*!@:host(.ion-activated) .button-native::after*/.ion-activated.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}/*!@:host(.button-solid.ion-color) .button-native*/.button-solid.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@:host(.button-outline.ion-color) .button-native*/.button-outline.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}/*!@:host(.button-clear.ion-color) .button-native*/.button-clear.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios{background:transparent;color:var(--ion-color-base)}/*!@:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.in-toolbar.sc-ion-button-ios-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-ios{color:var(--ion-toolbar-color, var(--color))}/*!@:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.button-outline.in-toolbar.sc-ion-button-ios-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-ios{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}/*!@:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.button-solid.in-toolbar.sc-ion-button-ios-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-ios{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}/*!@:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.button-outline.ion-activated.in-toolbar.sc-ion-button-ios-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-ios{background:var(--ion-toolbar-color, var(--color));color:var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff))}/*!@:host*/.sc-ion-button-ios-h{--border-radius:14px;--padding-top:13px;--padding-bottom:13px;--padding-start:1em;--padding-end:1em;--transition:background-color, opacity 100ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:3.1em;font-size:min(1rem, 48px);font-weight:500;letter-spacing:0}/*!@:host(.button-solid)*/.button-solid.sc-ion-button-ios-h{--background-activated:var(--ion-color-primary-shade, #3171e0);--background-focused:var(--ion-color-primary-shade, #3171e0);--background-hover:var(--ion-color-primary-tint, #4c8dff);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1}/*!@:host(.button-outline)*/.button-outline.sc-ion-button-ios-h{--border-radius:14px;--border-width:1px;--border-style:solid;--background-activated:var(--ion-color-primary, #3880ff);--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;--color-activated:var(--ion-color-primary-contrast, #fff)}/*!@:host(.button-clear)*/.button-clear.sc-ion-button-ios-h{--background-activated:transparent;--background-activated-opacity:0;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:transparent;--background-focused-opacity:.1;font-size:min(1.0625rem, 51px);font-weight:normal}/*!@:host(.in-buttons)*/.in-buttons.sc-ion-button-ios-h{font-size:clamp(17px, 1.0625rem, 21.08px);font-weight:400}/*!@:host(.button-large)*/.button-large.sc-ion-button-ios-h{--border-radius:16px;--padding-top:17px;--padding-start:1em;--padding-end:1em;--padding-bottom:17px;min-height:3.1em;font-size:min(1.25rem, 60px)}/*!@:host(.button-small)*/.button-small.sc-ion-button-ios-h{--border-radius:6px;--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:min(0.8125rem, 39px)}/*!@:host(.button-has-icon-only)*/.button-has-icon-only.sc-ion-button-ios-h{--padding-top:0;--padding-bottom:0}/*!@:host(.button-round)*/.button-round.sc-ion-button-ios-h{--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}/*!@:host(.button-strong)*/.button-strong.sc-ion-button-ios-h{font-weight:600}/*!@:host(.button-outline.ion-focused.ion-color) .button-native,\n:host(.button-clear.ion-focused.ion-color) .button-native*/.button-outline.ion-focused.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios,.button-clear.ion-focused.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios{color:var(--ion-color-base)}/*!@:host(.button-outline.ion-focused.ion-color) .button-native::after,\n:host(.button-clear.ion-focused.ion-color) .button-native::after*/.button-outline.ion-focused.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after,.button-clear.ion-focused.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{background:var(--ion-color-base)}/*!@:host(.button-solid.ion-color.ion-focused) .button-native::after*/.button-solid.ion-color.ion-focused.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{background:var(--ion-color-shade)}@media (any-hover: hover){/*!@:host(.button-clear:not(.ion-activated):hover),\n :host(.button-outline:not(.ion-activated):hover)*/.button-clear.sc-ion-button-ios-h:not(.ion-activated):hover,.button-outline.sc-ion-button-ios-h:not(.ion-activated):hover{opacity:0.6}/*!@:host(.button-clear.ion-color:hover) .button-native,\n :host(.button-outline.ion-color:hover) .button-native*/.button-clear.ion-color.sc-ion-button-ios-h:hover .button-native.sc-ion-button-ios,.button-outline.ion-color.sc-ion-button-ios-h:hover .button-native.sc-ion-button-ios{color:var(--ion-color-base)}/*!@:host(.button-clear.ion-color:hover) .button-native::after,\n :host(.button-outline.ion-color:hover) .button-native::after*/.button-clear.ion-color.sc-ion-button-ios-h:hover .button-native.sc-ion-button-ios::after,.button-outline.ion-color.sc-ion-button-ios-h:hover .button-native.sc-ion-button-ios::after{background:transparent}/*!@:host(.button-solid.ion-color:hover) .button-native::after*/.button-solid.ion-color.sc-ion-button-ios-h:hover .button-native.sc-ion-button-ios::after{background:var(--ion-color-tint)}/*!@:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after*/.sc-ion-button-ios-h:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated) .button-native.sc-ion-button-ios::after{background:#fff;opacity:0.1}}/*!@:host(.button-clear.ion-activated)*/.button-clear.ion-activated.sc-ion-button-ios-h{opacity:0.4}/*!@:host(.button-outline.ion-activated.ion-color) .button-native*/.button-outline.ion-activated.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios{color:var(--ion-color-contrast)}/*!@:host(.button-outline.ion-activated.ion-color) .button-native::after*/.button-outline.ion-activated.ion-color.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{background:var(--ion-color-base)}/*!@:host(.button-solid.ion-color.ion-activated) .button-native::after*/.button-solid.ion-color.ion-activated.sc-ion-button-ios-h .button-native.sc-ion-button-ios::after{background:var(--ion-color-shade)}";
|
|
11509
11517
|
|
|
11510
|
-
const buttonMdCss = "/*!@:host*/.sc-ion-button-md-h{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}/*!@:host(.button-disabled)*/.button-disabled.sc-ion-button-md-h{cursor:default;opacity:0.5;pointer-events:none}/*!@:host(.button-solid)*/.button-solid.sc-ion-button-md-h{--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}/*!@:host(.button-outline)*/.button-outline.sc-ion-button-md-h{--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}/*!@:host(.button-clear)*/.button-clear.sc-ion-button-md-h{--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}/*!@:host(.button-block)*/.button-block.sc-ion-button-md-h{display:block}/*!@:host(.button-block) .button-native*/.button-block.sc-ion-button-md-h .button-native.sc-ion-button-md{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}/*!@:host(.button-block) .button-native::after*/.button-block.sc-ion-button-md-h .button-native.sc-ion-button-md::after{clear:both}/*!@:host(.button-full)*/.button-full.sc-ion-button-md-h{display:block}/*!@:host(.button-full) .button-native*/.button-full.sc-ion-button-md-h .button-native.sc-ion-button-md{margin-left:0;margin-right:0;width:100%;contain:content}/*!@:host(.button-full:not(.button-round)) .button-native*/.button-full.sc-ion-button-md-h:not(.button-round) .button-native.sc-ion-button-md{border-radius:0;border-right-width:0;border-left-width:0}/*!@.button-native*/.button-native.sc-ion-button-md{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@.button-native::-moz-focus-inner*/.button-native.sc-ion-button-md::-moz-focus-inner{border:0}/*!@.button-inner*/.button-inner.sc-ion-button-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}/*!@::slotted([slot=start]),\n::slotted([slot=end])*/.sc-ion-button-md-s>[slot=start],.sc-ion-button-md-s>[slot=end]{-ms-flex-negative:0;flex-shrink:0}/*!@::slotted(ion-icon)*/.sc-ion-button-md-s>ion-icon{font-size:1.35em;pointer-events:none}/*!@::slotted(ion-icon[slot=start])*/.sc-ion-button-md-s>ion-icon[slot=start]{-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}/*!@::slotted(ion-icon[slot=end])*/.sc-ion-button-md-s>ion-icon[slot=end]{-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}/*!@::slotted(ion-icon[slot=icon-only])*/.sc-ion-button-md-s>ion-icon[slot=icon-only]{font-size:1.8em}/*!@ion-ripple-effect*/ion-ripple-effect.sc-ion-button-md{color:var(--ripple-color)}/*!@.button-native::after*/.button-native.sc-ion-button-md::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}/*!@:host(.ion-focused)*/.ion-focused.sc-ion-button-md-h{color:var(--color-focused)}/*!@:host(.ion-focused) .button-native::after*/.ion-focused.sc-ion-button-md-h .button-native.sc-ion-button-md::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){/*!@:host(:hover)*/.sc-ion-button-md-h:hover{color:var(--color-hover)}/*!@:host(:hover) .button-native::after*/.sc-ion-button-md-h:hover .button-native.sc-ion-button-md::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}/*!@:host(.ion-activated)*/.ion-activated.sc-ion-button-md-h{color:var(--color-activated)}/*!@:host(.ion-activated) .button-native::after*/.ion-activated.sc-ion-button-md-h .button-native.sc-ion-button-md::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}/*!@:host(.button-solid.ion-color) .button-native*/.button-solid.ion-color.sc-ion-button-md-h .button-native.sc-ion-button-md{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@:host(.button-outline.ion-color) .button-native*/.button-outline.ion-color.sc-ion-button-md-h .button-native.sc-ion-button-md{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}/*!@:host(.button-clear.ion-color) .button-native*/.button-clear.ion-color.sc-ion-button-md-h .button-native.sc-ion-button-md{background:transparent;color:var(--ion-color-base)}/*!@:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.in-toolbar.sc-ion-button-md-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-md{color:var(--ion-toolbar-color, var(--color))}/*!@:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.button-outline.in-toolbar.sc-ion-button-md-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-md{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}/*!@:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.button-solid.in-toolbar.sc-ion-button-md-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-md{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}/*!@:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.button-outline.ion-activated.in-toolbar.sc-ion-button-md-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-md{background:var(--ion-toolbar-color, var(--color));color:var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff))}/*!@:host*/.sc-ion-button-md-h{--border-radius:4px;--padding-top:8px;--padding-bottom:8px;--padding-start:1.1em;--padding-end:1.1em;--transition:box-shadow 280ms cubic-bezier(.4, 0, .2, 1),\n background-color 15ms linear,\n color 15ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:36px;font-size:0.875rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase}/*!@:host(.button-solid)*/.button-solid.sc-ion-button-md-h{--background-activated:transparent;--background-hover:var(--ion-color-primary-contrast, #fff);--background-focused:var(--ion-color-primary-contrast, #fff);--background-activated-opacity:0;--background-focused-opacity:.24;--background-hover-opacity:.08;--box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}/*!@:host(.button-solid.ion-activated)*/.button-solid.ion-activated.sc-ion-button-md-h{--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)}/*!@:host(.button-outline)*/.button-outline.sc-ion-button-md-h{--border-width:2px;--border-style:solid;--box-shadow:none;--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}/*!@:host(.button-outline.ion-activated.ion-color) .button-native*/.button-outline.ion-activated.ion-color.sc-ion-button-md-h .button-native.sc-ion-button-md{background:transparent}/*!@:host(.button-clear)*/.button-clear.sc-ion-button-md-h{--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}/*!@:host(.button-round)*/.button-round.sc-ion-button-md-h{--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}/*!@:host(.button-large)*/.button-large.sc-ion-button-md-h{--padding-top:14px;--padding-start:1em;--padding-end:1em;--padding-bottom:14px;min-height:2.8em;font-size:1.25rem}/*!@:host(.button-small)*/.button-small.sc-ion-button-md-h{--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:0.8125rem}/*!@:host(.button-has-icon-only)*/.button-has-icon-only.sc-ion-button-md-h{--padding-top:0;--padding-bottom:0}/*!@:host(.button-strong)*/.button-strong.sc-ion-button-md-h{font-weight:bold}/*!@::slotted(ion-icon[slot=icon-only])*/.sc-ion-button-md-s>ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host(.button-solid.ion-color.ion-focused) .button-native::after*/.button-solid.ion-color.ion-focused.sc-ion-button-md-h .button-native.sc-ion-button-md::after{background:var(--ion-color-contrast)}/*!@:host(.button-clear.ion-color.ion-focused) .button-native::after,\n:host(.button-outline.ion-color.ion-focused) .button-native::after*/.button-clear.ion-color.ion-focused.sc-ion-button-md-h .button-native.sc-ion-button-md::after,.button-outline.ion-color.ion-focused.sc-ion-button-md-h .button-native.sc-ion-button-md::after{background:var(--ion-color-base)}@media (any-hover: hover){/*!@:host(.button-solid.ion-color:hover) .button-native::after*/.button-solid.ion-color.sc-ion-button-md-h:hover .button-native.sc-ion-button-md::after{background:var(--ion-color-contrast)}/*!@:host(.button-clear.ion-color:hover) .button-native::after,\n :host(.button-outline.ion-color:hover) .button-native::after*/.button-clear.ion-color.sc-ion-button-md-h:hover .button-native.sc-ion-button-md::after,.button-outline.ion-color.sc-ion-button-md-h:hover .button-native.sc-ion-button-md::after{background:var(--ion-color-base)}}";
|
|
11518
|
+
const buttonMdCss = "/*!@:host*/.sc-ion-button-md-h{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}/*!@:host(.button-disabled)*/.button-disabled.sc-ion-button-md-h{cursor:default;opacity:0.5;pointer-events:none}/*!@:host(.button-solid)*/.button-solid.sc-ion-button-md-h{--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff)}/*!@:host(.button-outline)*/.button-outline.sc-ion-button-md-h{--border-color:var(--ion-color-primary, #3880ff);--background:transparent;--color:var(--ion-color-primary, #3880ff)}/*!@:host(.button-clear)*/.button-clear.sc-ion-button-md-h{--border-width:0;--background:transparent;--color:var(--ion-color-primary, #3880ff)}/*!@:host(.button-block)*/.button-block.sc-ion-button-md-h{display:block}/*!@:host(.button-block) .button-native*/.button-block.sc-ion-button-md-h .button-native.sc-ion-button-md{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}/*!@:host(.button-block) .button-native::after*/.button-block.sc-ion-button-md-h .button-native.sc-ion-button-md::after{clear:both}/*!@:host(.button-full)*/.button-full.sc-ion-button-md-h{display:block}/*!@:host(.button-full) .button-native*/.button-full.sc-ion-button-md-h .button-native.sc-ion-button-md{margin-left:0;margin-right:0;width:100%;contain:content}/*!@:host(.button-full:not(.button-round)) .button-native*/.button-full.sc-ion-button-md-h:not(.button-round) .button-native.sc-ion-button-md{border-radius:0;border-right-width:0;border-left-width:0}/*!@.button-native*/.button-native.sc-ion-button-md{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@.button-native::-moz-focus-inner*/.button-native.sc-ion-button-md::-moz-focus-inner{border:0}/*!@.button-inner*/.button-inner.sc-ion-button-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}/*!@::slotted([slot=start]),\n::slotted([slot=end])*/.sc-ion-button-md-s>[slot=start],.sc-ion-button-md-s>[slot=end]{-ms-flex-negative:0;flex-shrink:0}/*!@::slotted(ion-icon)*/.sc-ion-button-md-s>ion-icon{font-size:1.35em;pointer-events:none}/*!@::slotted(ion-icon[slot=start])*/.sc-ion-button-md-s>ion-icon[slot=start]{-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}/*!@::slotted(ion-icon[slot=end])*/.sc-ion-button-md-s>ion-icon[slot=end]{-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}/*!@::slotted(ion-icon[slot=icon-only])*/.sc-ion-button-md-s>ion-icon[slot=icon-only]{font-size:1.8em}/*!@ion-ripple-effect*/ion-ripple-effect.sc-ion-button-md{color:var(--ripple-color)}/*!@.button-native::after*/.button-native.sc-ion-button-md::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}/*!@:host(.ion-focused)*/.ion-focused.sc-ion-button-md-h{color:var(--color-focused)}/*!@:host(.ion-focused) .button-native::after*/.ion-focused.sc-ion-button-md-h .button-native.sc-ion-button-md::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){/*!@:host(:hover)*/.sc-ion-button-md-h:hover{color:var(--color-hover)}/*!@:host(:hover) .button-native::after*/.sc-ion-button-md-h:hover .button-native.sc-ion-button-md::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}/*!@:host(.ion-activated)*/.ion-activated.sc-ion-button-md-h{color:var(--color-activated)}/*!@:host(.ion-activated) .button-native::after*/.ion-activated.sc-ion-button-md-h .button-native.sc-ion-button-md::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}/*!@:host(.button-solid.ion-color) .button-native*/.button-solid.ion-color.sc-ion-button-md-h .button-native.sc-ion-button-md{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@:host(.button-outline.ion-color) .button-native*/.button-outline.ion-color.sc-ion-button-md-h .button-native.sc-ion-button-md{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}/*!@:host(.button-clear.ion-color) .button-native*/.button-clear.ion-color.sc-ion-button-md-h .button-native.sc-ion-button-md{background:transparent;color:var(--ion-color-base)}/*!@:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.in-toolbar.sc-ion-button-md-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-md{color:var(--ion-toolbar-color, var(--color))}/*!@:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.button-outline.in-toolbar.sc-ion-button-md-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-md{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}/*!@:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.button-solid.in-toolbar.sc-ion-button-md-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-md{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}/*!@:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native*/.button-outline.ion-activated.in-toolbar.sc-ion-button-md-h:not(.ion-color):not(.in-toolbar-color) .button-native.sc-ion-button-md{background:var(--ion-toolbar-color, var(--color));color:var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff))}/*!@:host*/.sc-ion-button-md-h{--border-radius:4px;--padding-top:8px;--padding-bottom:8px;--padding-start:1.1em;--padding-end:1.1em;--transition:box-shadow 280ms cubic-bezier(.4, 0, .2, 1),\n background-color 15ms linear,\n color 15ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:36px;font-size:0.875rem;font-weight:500;letter-spacing:0.06em;text-transform:uppercase}/*!@:host(.button-solid)*/.button-solid.sc-ion-button-md-h{--background-activated:transparent;--background-hover:var(--ion-color-primary-contrast, #fff);--background-focused:var(--ion-color-primary-contrast, #fff);--background-activated-opacity:0;--background-focused-opacity:.24;--background-hover-opacity:.08;--box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)}/*!@:host(.button-solid.ion-activated)*/.button-solid.ion-activated.sc-ion-button-md-h{--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)}/*!@:host(.button-outline)*/.button-outline.sc-ion-button-md-h{--border-width:2px;--border-style:solid;--box-shadow:none;--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}/*!@:host(.button-outline.ion-activated.ion-color) .button-native*/.button-outline.ion-activated.ion-color.sc-ion-button-md-h .button-native.sc-ion-button-md{background:transparent}/*!@:host(.button-clear)*/.button-clear.sc-ion-button-md-h{--background-activated:transparent;--background-focused:var(--ion-color-primary, #3880ff);--background-hover:var(--ion-color-primary, #3880ff);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04}/*!@:host(.button-round)*/.button-round.sc-ion-button-md-h{--border-radius:64px;--padding-top:0;--padding-start:26px;--padding-end:26px;--padding-bottom:0}/*!@:host(.button-large)*/.button-large.sc-ion-button-md-h{--padding-top:14px;--padding-start:1em;--padding-end:1em;--padding-bottom:14px;min-height:2.8em;font-size:1.25rem}/*!@:host(.button-small)*/.button-small.sc-ion-button-md-h{--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:0.8125rem}/*!@:host(.button-has-icon-only)*/.button-has-icon-only.sc-ion-button-md-h{--padding-top:0;--padding-bottom:0}/*!@:host(.button-strong)*/.button-strong.sc-ion-button-md-h{font-weight:bold}/*!@::slotted(ion-icon[slot=icon-only])*/.sc-ion-button-md-s>ion-icon[slot=icon-only]{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host(.button-solid.ion-color.ion-focused) .button-native::after*/.button-solid.ion-color.ion-focused.sc-ion-button-md-h .button-native.sc-ion-button-md::after{background:var(--ion-color-contrast)}/*!@:host(.button-clear.ion-color.ion-focused) .button-native::after,\n:host(.button-outline.ion-color.ion-focused) .button-native::after*/.button-clear.ion-color.ion-focused.sc-ion-button-md-h .button-native.sc-ion-button-md::after,.button-outline.ion-color.ion-focused.sc-ion-button-md-h .button-native.sc-ion-button-md::after{background:var(--ion-color-base)}@media (any-hover: hover){/*!@:host(.button-solid.ion-color:hover) .button-native::after*/.button-solid.ion-color.sc-ion-button-md-h:hover .button-native.sc-ion-button-md::after{background:var(--ion-color-contrast)}/*!@:host(.button-clear.ion-color:hover) .button-native::after,\n :host(.button-outline.ion-color:hover) .button-native::after*/.button-clear.ion-color.sc-ion-button-md-h:hover .button-native.sc-ion-button-md::after,.button-outline.ion-color.sc-ion-button-md-h:hover .button-native.sc-ion-button-md::after{background:var(--ion-color-base)}}";
|
|
11511
11519
|
|
|
11512
11520
|
/**
|
|
11513
11521
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
@@ -12667,7 +12675,7 @@ const isRTL$1 = (hostEl) => {
|
|
|
12667
12675
|
return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
|
|
12668
12676
|
};
|
|
12669
12677
|
|
|
12670
|
-
const contentCss = "/*!@:host*/.sc-ion-content-h{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}/*!@:host(.ion-color) .inner-scroll*/.ion-color.sc-ion-content-h .inner-scroll.sc-ion-content{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@#background-content*/#background-content.sc-ion-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}/*!@.inner-scroll*/.inner-scroll.sc-ion-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}/*!@.scroll-y,\n.scroll-x*/.scroll-y.sc-ion-content,.scroll-x.sc-ion-content{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}/*!@.scroll-y*/.scroll-y.sc-ion-content{overflow-y:var(--overflow);overscroll-behavior-y:contain}/*!@.scroll-x*/.scroll-x.sc-ion-content{overflow-x:var(--overflow);overscroll-behavior-x:contain}/*!@.overscroll::before,\n.overscroll::after*/.overscroll.sc-ion-content::before,.overscroll.sc-ion-content::after{position:absolute;width:1px;height:1px;content:\"\"}/*!@.overscroll::before*/.overscroll.sc-ion-content::before{bottom:-1px}/*!@.overscroll::after*/.overscroll.sc-ion-content::after{top:-1px}/*!@:host(.content-sizing)*/.content-sizing.sc-ion-content-h{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}/*!@:host(.content-sizing) .inner-scroll*/.content-sizing.sc-ion-content-h .inner-scroll.sc-ion-content{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}/*!@.transition-effect*/.transition-effect.sc-ion-content{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}/*!@:host(.content-ltr) .transition-effect*/.content-ltr.sc-ion-content-h .transition-effect.sc-ion-content{left:-100%}/*!@:host(.content-rtl) .transition-effect*/.content-rtl.sc-ion-content-h .transition-effect.sc-ion-content{right:-100%}/*!@.transition-cover*/.transition-cover.sc-ion-content{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}/*!@.transition-shadow*/.transition-shadow.sc-ion-content{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}/*!@:host(.content-ltr) .transition-shadow*/.content-ltr.sc-ion-content-h .transition-shadow.sc-ion-content{right:0}/*!@:host(.content-rtl) .transition-shadow*/.content-rtl.sc-ion-content-h .transition-shadow.sc-ion-content{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}/*!@::slotted([slot=fixed])*/.sc-ion-content-s>[slot=fixed]{position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
|
|
12678
|
+
const contentCss = "/*!@:host*/.sc-ion-content-h{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}/*!@:host(.ion-color) .inner-scroll*/.ion-color.sc-ion-content-h .inner-scroll.sc-ion-content{background:var(--ion-color-base);color:var(--ion-color-contrast)}/*!@:host(.outer-content)*/.outer-content.sc-ion-content-h{--background:var(--ion-color-step-50, #f2f2f2)}/*!@#background-content*/#background-content.sc-ion-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}/*!@.inner-scroll*/.inner-scroll.sc-ion-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}/*!@.scroll-y,\n.scroll-x*/.scroll-y.sc-ion-content,.scroll-x.sc-ion-content{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}/*!@.scroll-y*/.scroll-y.sc-ion-content{overflow-y:var(--overflow);overscroll-behavior-y:contain}/*!@.scroll-x*/.scroll-x.sc-ion-content{overflow-x:var(--overflow);overscroll-behavior-x:contain}/*!@.overscroll::before,\n.overscroll::after*/.overscroll.sc-ion-content::before,.overscroll.sc-ion-content::after{position:absolute;width:1px;height:1px;content:\"\"}/*!@.overscroll::before*/.overscroll.sc-ion-content::before{bottom:-1px}/*!@.overscroll::after*/.overscroll.sc-ion-content::after{top:-1px}/*!@:host(.content-sizing)*/.content-sizing.sc-ion-content-h{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}/*!@:host(.content-sizing) .inner-scroll*/.content-sizing.sc-ion-content-h .inner-scroll.sc-ion-content{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}/*!@.transition-effect*/.transition-effect.sc-ion-content{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}/*!@:host(.content-ltr) .transition-effect*/.content-ltr.sc-ion-content-h .transition-effect.sc-ion-content{left:-100%}/*!@:host(.content-rtl) .transition-effect*/.content-rtl.sc-ion-content-h .transition-effect.sc-ion-content{right:-100%}/*!@.transition-cover*/.transition-cover.sc-ion-content{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}/*!@.transition-shadow*/.transition-shadow.sc-ion-content{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}/*!@:host(.content-ltr) .transition-shadow*/.content-ltr.sc-ion-content-h .transition-shadow.sc-ion-content{right:0}/*!@:host(.content-rtl) .transition-shadow*/.content-rtl.sc-ion-content-h .transition-shadow.sc-ion-content{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}/*!@::slotted([slot=fixed])*/.sc-ion-content-s>[slot=fixed]{position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}";
|
|
12671
12679
|
|
|
12672
12680
|
/**
|
|
12673
12681
|
* @slot - Content is placed in the scrollable area if provided without a slot.
|
|
@@ -14589,7 +14597,7 @@ const getMonthColumnData = (locale, refParts, minParts, maxParts, monthValues, f
|
|
|
14589
14597
|
* @param minParts The minimum bound on the date that can be returned
|
|
14590
14598
|
* @param maxParts The maximum bound on the date that can be returned
|
|
14591
14599
|
* @param dayValues The allowed date values
|
|
14592
|
-
* @returns Date data to be used in ion-picker-column
|
|
14600
|
+
* @returns Date data to be used in ion-picker-column-internal
|
|
14593
14601
|
*/
|
|
14594
14602
|
const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues, formatOptions = {
|
|
14595
14603
|
day: 'numeric',
|
|
@@ -14936,9 +14944,9 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
|
|
|
14936
14944
|
return undefined;
|
|
14937
14945
|
};
|
|
14938
14946
|
|
|
14939
|
-
const datetimeIosCss = "/*!@:host*/.sc-ion-datetime-ios-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-ios-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-ios-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-ios-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-ios-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-ios{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .day-column.sc-ion-datetime-ios{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .month-column.sc-ion-datetime-ios{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .year-column.sc-ion-datetime-ios{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-ios-h .datetime-calendar.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}/*!@:host(.show-month-and-year) .datetime-year*/.show-month-and-year.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios not.sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .datetime-time,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-ios-h .datetime-footer.sc-ion-datetime-ios{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.datetime-disabled.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-button[disabled].sc-ion-datetime-ios{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-ios-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-ios{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-ios .datetime-action-buttons-container.sc-ion-datetime-ios{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{--background:transparent}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}/*!@:host .calendar-body*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}/*!@:host .calendar-body .calendar-month*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}/*!@:host .calendar-body .calendar-month-disabled*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-disabled.sc-ion-datetime-ios{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}/*!@:host .calendar-day[disabled]*/.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-ios:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .datetime-time*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-ios-h ion-popover.sc-ion-datetime-ios{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-ios-h .time-header.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-ios-h .time-body.sc-ion-datetime-ios{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@:host .time-body-active*/.sc-ion-datetime-ios-h .time-body-active.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-ios-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios .calendar-month-year-toggle.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@.calendar-month-year*/.calendar-month-year.sc-ion-datetime-ios{min-width:0}/*!@.calendar-month-year-toggle*/.calendar-month-year-toggle.sc-ion-datetime-ios{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}/*!@.calendar-month-year-toggle::after*/.calendar-month-year-toggle.sc-ion-datetime-ios::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}/*!@.calendar-month-year-toggle.ion-focused::after*/.calendar-month-year-toggle.ion-focused.sc-ion-datetime-ios::after{background:currentColor}/*!@.calendar-month-year-toggle:disabled*/.calendar-month-year-toggle.sc-ion-datetime-ios:disabled{opacity:0.3;pointer-events:none}/*!@.calendar-month-year-toggle ion-icon*/.calendar-month-year-toggle.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}/*!@.calendar-month-year-toggle #toggle-wrapper*/.calendar-month-year-toggle.sc-ion-datetime-ios #toggle-wrapper.sc-ion-datetime-ios{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}/*!@ion-picker*/ion-picker.sc-ion-datetime-ios{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}/*!@:host*/.sc-ion-datetime-ios-h{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #666666)}/*!@:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),\n:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),\n:host(.datetime-presentation-date:not(.datetime-prefer-wheel))*/.datetime-presentation-date-time.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-time-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){min-height:350px}/*!@:host .datetime-header*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, #cccccc);font-size:min(0.875rem, 22.4px)}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{color:var(--title-color)}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-selected-date.sc-ion-datetime-ios{margin-top:10px}/*!@.calendar-month-year-toggle*/.calendar-month-year-toggle.sc-ion-datetime-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-height:44px;font-size:min(1rem, 25.6px);font-weight:600}/*!@.calendar-month-year-toggle.ion-focused::after*/.calendar-month-year-toggle.ion-focused.sc-ion-datetime-ios::after{opacity:0.15}/*!@.calendar-month-year-toggle #toggle-wrapper*/.calendar-month-year-toggle.sc-ion-datetime-ios #toggle-wrapper.sc-ion-datetime-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}/*!@:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,\n:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios .calendar-month-year-toggle.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}/*!@:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, #b3b3b3);font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:auto;height:auto;overflow:initial}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:32px}}/*!@:host .calendar-body .calendar-month .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}/*!@:host .calendar-day*/.sc-ion-datetime-ios-h .calendar-day.sc-ion-datetime-ios{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-ios{background:rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-base);font-weight:600}/*!@:host .calendar-day.calendar-day-today.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-contrast)}/*!@:host .datetime-time*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}/*!@:host .datetime-time .time-header*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios .time-header.sc-ion-datetime-ios{font-weight:600}/*!@:host .datetime-buttons*/.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, #cccccc)}/*!@:host .datetime-buttons ::slotted(ion-buttons),\n:host .datetime-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-buttons .sc-ion-datetime-ios-s>ion-buttons,.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .datetime-action-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios{width:100%}";
|
|
14947
|
+
const datetimeIosCss = "/*!@:host*/.sc-ion-datetime-ios-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@ion-picker-column-internal*/ion-picker-column-internal.sc-ion-datetime-ios{min-width:26px}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-ios-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-ios-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-ios-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-ios-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-ios{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .day-column.sc-ion-datetime-ios{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .month-column.sc-ion-datetime-ios{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-ios-h .wheel-order-year-first.sc-ion-datetime-ios .year-column.sc-ion-datetime-ios{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-ios-h .datetime-calendar.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}/*!@:host(.show-month-and-year) .datetime-year*/.show-month-and-year.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-ios not.sc-ion-datetime-ios (inset-inline-start.sc-ion-datetime-ios: 0).sc-ion-datetime-ios{.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .calendar-body,.sc-ion-datetime-ios-h[dir=rtl].sc-ion-datetime-ios-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.sc-ion-datetime-ios-h.show-month-and-year .datetime-time,.sc-ion-datetime-ios-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-ios-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-ios-h.show-month-and-year:dir(rtl) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-next-prev.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.show-month-and-year.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-ios-h .datetime-footer.sc-ion-datetime-ios{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios,.datetime-disabled.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-ios-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios,.datetime-readonly.sc-ion-datetime-ios-h .datetime-year.sc-ion-datetime-ios{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-button[disabled].sc-ion-datetime-ios{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-ios-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-ios{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-ios .datetime-action-buttons-container.sc-ion-datetime-ios{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-item,\n:host .calendar-action-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{--background:translucent}/*!@:host .calendar-action-buttons ion-item ion-label*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios ion-label.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:auto}/*!@:host .calendar-action-buttons ion-item ion-icon*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}/*!@:host .calendar-body*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}/*!@:host .calendar-body .calendar-month*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}/*!@:host .calendar-body .calendar-month-disabled*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-disabled.sc-ion-datetime-ios{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}/*!@:host .calendar-day[disabled]*/.sc-ion-datetime-ios-h .calendar-day[disabled].sc-ion-datetime-ios{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-ios:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .datetime-time*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-ios-h ion-popover.sc-ion-datetime-ios{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-ios-h .time-header.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-ios-h .time-body.sc-ion-datetime-ios{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@:host .time-body-active*/.sc-ion-datetime-ios-h .time-body-active.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-ios-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons ion-item*/.show-month-and-year.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios{--color:var(--ion-color-base)}/*!@:host*/.sc-ion-datetime-ios-h{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #666666)}/*!@:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),\n:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),\n:host(.datetime-presentation-date:not(.datetime-prefer-wheel))*/.datetime-presentation-date-time.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-time-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel),.datetime-presentation-date.sc-ion-datetime-ios-h:not(.datetime-prefer-wheel){min-height:350px}/*!@:host .datetime-header*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, #cccccc);font-size:min(0.875rem, 22.4px)}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-title.sc-ion-datetime-ios{color:var(--title-color)}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-ios-h .datetime-header.sc-ion-datetime-ios .datetime-selected-date.sc-ion-datetime-ios{margin-top:10px}/*!@:host .calendar-action-buttons ion-item*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:min(1rem, 25.6px);font-weight:600}/*!@:host .calendar-action-buttons ion-item ion-icon,\n:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-item.sc-ion-datetime-ios ion-icon.sc-ion-datetime-ios,.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-action-buttons ion-buttons*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}/*!@:host .calendar-action-buttons ion-buttons ion-button*/.sc-ion-datetime-ios-h .calendar-action-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios ion-button.sc-ion-datetime-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-ios-h .calendar-days-of-week.sc-ion-datetime-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, #b3b3b3);font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-ios .day-of-week.sc-ion-datetime-ios{width:auto;height:auto;overflow:initial}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-ios{border-radius:32px}}/*!@:host .calendar-body .calendar-month .calendar-month-grid*/.sc-ion-datetime-ios-h .calendar-body.sc-ion-datetime-ios .calendar-month.sc-ion-datetime-ios .calendar-month-grid.sc-ion-datetime-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-ios-h .calendar-day-wrapper.sc-ion-datetime-ios{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}/*!@:host .calendar-day*/.sc-ion-datetime-ios-h .calendar-day.sc-ion-datetime-ios{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-ios{background:rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.sc-ion-datetime-ios{color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-base);font-weight:600}/*!@:host .calendar-day.calendar-day-today.calendar-day-active*/.sc-ion-datetime-ios-h .calendar-day.calendar-day-today.calendar-day-active.sc-ion-datetime-ios{color:var(--ion-color-contrast)}/*!@:host .datetime-time*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}/*!@:host .datetime-time .time-header*/.sc-ion-datetime-ios-h .datetime-time.sc-ion-datetime-ios .time-header.sc-ion-datetime-ios{font-weight:600}/*!@:host .datetime-buttons*/.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, #cccccc)}/*!@:host .datetime-buttons ::slotted(ion-buttons),\n:host .datetime-buttons ion-buttons*/.sc-ion-datetime-ios-h .datetime-buttons .sc-ion-datetime-ios-s>ion-buttons,.sc-ion-datetime-ios-h .datetime-buttons.sc-ion-datetime-ios ion-buttons.sc-ion-datetime-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .datetime-action-buttons*/.sc-ion-datetime-ios-h .datetime-action-buttons.sc-ion-datetime-ios{width:100%}";
|
|
14940
14948
|
|
|
14941
|
-
const datetimeMdCss = "/*!@:host*/.sc-ion-datetime-md-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-md-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-md-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-md-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-md-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-md-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-md{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .day-column.sc-ion-datetime-md{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .month-column.sc-ion-datetime-md{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .year-column.sc-ion-datetime-md{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-md-h .datetime-calendar.sc-ion-datetime-md,.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}/*!@:host(.show-month-and-year) .datetime-year*/.show-month-and-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-md-h .calendar-next-prev.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-md (inset-inline-start.sc-ion-datetime-md: 0).sc-ion-datetime-md{.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-md not.sc-ion-datetime-md (inset-inline-start.sc-ion-datetime-md: 0).sc-ion-datetime-md{.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .datetime-time,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-md-h .calendar-next-prev.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-md-h .datetime-footer.sc-ion-datetime-md{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-md-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.datetime-disabled.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-md-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md,.datetime-readonly.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.datetime-readonly.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-md-h .calendar-day[disabled].sc-ion-datetime-md:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-md-h .datetime-action-buttons.sc-ion-datetime-md ion-button[disabled].sc-ion-datetime-md{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-title.sc-ion-datetime-md{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-md-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-md{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-md-h .datetime-action-buttons.sc-ion-datetime-md ion-buttons.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-md .datetime-action-buttons-container.sc-ion-datetime-md{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-button*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-button.sc-ion-datetime-md{--background:transparent}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-md .day-of-week.sc-ion-datetime-md{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}/*!@:host .calendar-body*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}/*!@:host .calendar-body .calendar-month*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}/*!@:host .calendar-body .calendar-month-disabled*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month-disabled.sc-ion-datetime-md{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month-grid.sc-ion-datetime-md{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-md-h .calendar-day-wrapper.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-md{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}/*!@:host .calendar-day[disabled]*/.sc-ion-datetime-md-h .calendar-day[disabled].sc-ion-datetime-md{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-md:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .datetime-time*/.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-md-h ion-popover.sc-ion-datetime-md{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-md-h .time-header.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-md-h .time-body.sc-ion-datetime-md{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@:host .time-body-active*/.sc-ion-datetime-md-h .time-body-active.sc-ion-datetime-md{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-md-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle*/.show-month-and-year.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md .calendar-month-year-toggle.sc-ion-datetime-md{color:var(--ion-color-base)}/*!@.calendar-month-year*/.calendar-month-year.sc-ion-datetime-md{min-width:0}/*!@.calendar-month-year-toggle*/.calendar-month-year-toggle.sc-ion-datetime-md{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}/*!@.calendar-month-year-toggle::after*/.calendar-month-year-toggle.sc-ion-datetime-md::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}/*!@.calendar-month-year-toggle.ion-focused::after*/.calendar-month-year-toggle.ion-focused.sc-ion-datetime-md::after{background:currentColor}/*!@.calendar-month-year-toggle:disabled*/.calendar-month-year-toggle.sc-ion-datetime-md:disabled{opacity:0.3;pointer-events:none}/*!@.calendar-month-year-toggle ion-icon*/.calendar-month-year-toggle.sc-ion-datetime-md ion-icon.sc-ion-datetime-md{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}/*!@.calendar-month-year-toggle #toggle-wrapper*/.calendar-month-year-toggle.sc-ion-datetime-md #toggle-wrapper.sc-ion-datetime-md{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}/*!@ion-picker*/ion-picker.sc-ion-datetime-md{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}/*!@:host*/.sc-ion-datetime-md-h{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}/*!@:host .datetime-header*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-title.sc-ion-datetime-md{font-size:0.75rem;text-transform:uppercase}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-selected-date.sc-ion-datetime-md{margin-top:30px;font-size:2.125rem}/*!@:host .calendar-action-buttons ion-button*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-button.sc-ion-datetime-md{--color:var(--ion-color-step-650, #595959)}/*!@.calendar-month-year-toggle*/.calendar-month-year-toggle.sc-ion-datetime-md{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;min-height:48px;background:transparent;color:var(--ion-color-step-650, #595959);z-index:1}/*!@.calendar-month-year-toggle.ion-focused::after*/.calendar-month-year-toggle.ion-focused.sc-ion-datetime-md::after{opacity:0.04}/*!@.calendar-month-year-toggle ion-ripple-effect*/.calendar-month-year-toggle.sc-ion-datetime-md ion-ripple-effect.sc-ion-datetime-md{color:currentColor}@media (any-hover: hover){/*!@.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after*/.calendar-month-year-toggle.ion-activatable.sc-ion-datetime-md:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, gray);font-size:0.875rem;line-height:36px}/*!@:host .calendar-body .calendar-month .calendar-month-grid*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month.sc-ion-datetime-md .calendar-month-grid.sc-ion-datetime-md{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}/*!@:host .calendar-day*/.sc-ion-datetime-md-h .calendar-day.sc-ion-datetime-md{width:42px;min-width:42px;height:42px;font-size:0.875rem}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-md-h .calendar-day.calendar-day-today.sc-ion-datetime-md{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-md-h .calendar-day.calendar-day-active.sc-ion-datetime-md{color:var(--ion-color-contrast)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-md{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}/*!@:host .datetime-time*/.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}/*!@:host .time-header*/.sc-ion-datetime-md-h .time-header.sc-ion-datetime-md{color:var(--ion-color-step-650, #595959)}/*!@:host(.datetime-presentation-month) .datetime-year,\n:host(.datetime-presentation-year) .datetime-year,\n:host(.datetime-presentation-month-year) .datetime-year*/.datetime-presentation-month.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md,.datetime-presentation-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md,.datetime-presentation-month-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{margin-top:20px;margin-bottom:20px}/*!@:host .datetime-buttons*/.sc-ion-datetime-md-h .datetime-buttons.sc-ion-datetime-md{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}";
|
|
14949
|
+
const datetimeMdCss = "/*!@:host*/.sc-ion-datetime-md-h{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}/*!@ion-picker-column-internal*/ion-picker-column-internal.sc-ion-datetime-md{min-width:26px}/*!@:host(.datetime-size-fixed)*/.datetime-size-fixed.sc-ion-datetime-md-h{width:auto;height:auto}/*!@:host(.datetime-size-fixed:not(.datetime-prefer-wheel))*/.datetime-size-fixed.sc-ion-datetime-md-h:not(.datetime-prefer-wheel){max-width:350px}/*!@:host(.datetime-size-fixed.datetime-prefer-wheel)*/.datetime-size-fixed.datetime-prefer-wheel.sc-ion-datetime-md-h{min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}/*!@:host(.datetime-size-cover)*/.datetime-size-cover.sc-ion-datetime-md-h{width:100%}/*!@:host .calendar-body,\n:host .datetime-year*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{opacity:0}/*!@:host(:not(.datetime-ready)) .datetime-year*/.sc-ion-datetime-md-h:not(.datetime-ready) .datetime-year.sc-ion-datetime-md{position:absolute;pointer-events:none}/*!@:host(.datetime-ready) .calendar-body*/.datetime-ready.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md{opacity:1}/*!@:host(.datetime-ready) .datetime-year*/.datetime-ready.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:none;opacity:1}/*!@:host .wheel-order-year-first .day-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .day-column.sc-ion-datetime-md{-ms-flex-order:3;order:3;text-align:end}/*!@:host .wheel-order-year-first .month-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .month-column.sc-ion-datetime-md{-ms-flex-order:2;order:2;text-align:end}/*!@:host .wheel-order-year-first .year-column*/.sc-ion-datetime-md-h .wheel-order-year-first.sc-ion-datetime-md .year-column.sc-ion-datetime-md{-ms-flex-order:1;order:1;text-align:start}/*!@:host .datetime-calendar,\n:host .datetime-year*/.sc-ion-datetime-md-h .datetime-calendar.sc-ion-datetime-md,.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}/*!@:host(.show-month-and-year) .datetime-year*/.show-month-and-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{display:-ms-flexbox;display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-md-h .calendar-next-prev.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{position:absolute;visibility:hidden;pointer-events:none}/*!@@supports (inset-inline-start: 0)*/@supports .sc-ion-datetime-md (inset-inline-start.sc-ion-datetime-md: 0).sc-ion-datetime-md{.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h.show-month-and-year .datetime-time{inset-inline-start:-99999px}}/*!@@supports not (inset-inline-start: 0)*/@supports .sc-ion-datetime-md not.sc-ion-datetime-md (inset-inline-start.sc-ion-datetime-md: 0).sc-ion-datetime-md{.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h.show-month-and-year .datetime-time{left:-99999px}.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-next-prev,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-next-prev,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-days-of-week,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-days-of-week,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .calendar-body,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .calendar-body,.sc-ion-datetime-md-h[dir=rtl].sc-ion-datetime-md-h.show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-md-h.sc-ion-datetime-md-h.show-month-and-year .datetime-time,.sc-ion-datetime-md-h[dir=rtl].show-month-and-year .datetime-time,[dir=rtl] .sc-ion-datetime-md-h.show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}@supports selector(:dir(rtl)){.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-next-prev,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-days-of-week,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .calendar-body,.sc-ion-datetime-md-h.show-month-and-year:dir(rtl) .datetime-time{left:unset;right:unset;right:-99999px}}}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){/*!@:host(.show-month-and-year) .calendar-next-prev,\n :host(.show-month-and-year) .calendar-days-of-week,\n :host(.show-month-and-year) .calendar-body,\n :host(.show-month-and-year) .datetime-time*/.show-month-and-year.sc-ion-datetime-md-h .calendar-next-prev.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.show-month-and-year.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{display:none}}/*!@:host(.month-year-picker-open) .datetime-footer*/.month-year-picker-open.sc-ion-datetime-md-h .datetime-footer.sc-ion-datetime-md{display:none}/*!@:host(.datetime-disabled)*/.datetime-disabled.sc-ion-datetime-md-h{pointer-events:none}/*!@:host(.datetime-disabled) .calendar-days-of-week,\n:host(.datetime-disabled) .datetime-time*/.datetime-disabled.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md,.datetime-disabled.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{opacity:0.4}/*!@:host(.datetime-readonly)*/.datetime-readonly.sc-ion-datetime-md-h{pointer-events:none}/*!@:host(.datetime-readonly) .calendar-action-buttons,\n:host(.datetime-readonly) .calendar-body,\n:host(.datetime-readonly) .datetime-year*/.datetime-readonly.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md,.datetime-readonly.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md,.datetime-readonly.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{pointer-events:initial}/*!@:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),\n:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]*/.datetime-readonly.sc-ion-datetime-md-h .calendar-day[disabled].sc-ion-datetime-md:not(.calendar-day-constrained),.datetime-readonly.sc-ion-datetime-md-h .datetime-action-buttons.sc-ion-datetime-md ion-button[disabled].sc-ion-datetime-md{opacity:1}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-title.sc-ion-datetime-md{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@:host .datetime-action-buttons.has-clear-button*/.sc-ion-datetime-md-h .datetime-action-buttons.has-clear-button.sc-ion-datetime-md{width:100%}/*!@:host .datetime-action-buttons ion-buttons*/.sc-ion-datetime-md-h .datetime-action-buttons.sc-ion-datetime-md ion-buttons.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@.datetime-action-buttons .datetime-action-buttons-container*/.datetime-action-buttons.sc-ion-datetime-md .datetime-action-buttons-container.sc-ion-datetime-md{display:-ms-flexbox;display:flex}/*!@:host .calendar-action-buttons*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host .calendar-action-buttons ion-item,\n:host .calendar-action-buttons ion-button*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md,.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-button.sc-ion-datetime-md{--background:translucent}/*!@:host .calendar-action-buttons ion-item ion-label*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md ion-label.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:auto}/*!@:host .calendar-action-buttons ion-item ion-icon*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md ion-icon.sc-ion-datetime-md{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}/*!@.calendar-days-of-week .day-of-week*/.calendar-days-of-week.sc-ion-datetime-md .day-of-week.sc-ion-datetime-md{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}/*!@:host .calendar-body*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}/*!@:host .calendar-body .calendar-month*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}/*!@:host .calendar-body .calendar-month-disabled*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month-disabled.sc-ion-datetime-md{scroll-snap-align:none}/*!@:host .calendar-body::-webkit-scrollbar*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md::-webkit-scrollbar{display:none}/*!@:host .calendar-body .calendar-month-grid*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month-grid.sc-ion-datetime-md{display:grid;grid-template-columns:repeat(7, 1fr)}/*!@:host .calendar-day-wrapper*/.sc-ion-datetime-md-h .calendar-day-wrapper.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}/*!@.calendar-day*/.calendar-day.sc-ion-datetime-md{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}/*!@:host .calendar-day[disabled]*/.sc-ion-datetime-md-h .calendar-day[disabled].sc-ion-datetime-md{pointer-events:none;opacity:0.4}/*!@.calendar-day:focus*/.calendar-day.sc-ion-datetime-md:focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}/*!@:host .datetime-time*/.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}/*!@:host(.datetime-presentation-time) .datetime-time*/.datetime-presentation-time.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}/*!@:host ion-popover*/.sc-ion-datetime-md-h ion-popover.sc-ion-datetime-md{--height:200px}/*!@:host .time-header*/.sc-ion-datetime-md-h .time-header.sc-ion-datetime-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}/*!@:host .time-body*/.sc-ion-datetime-md-h .time-body.sc-ion-datetime-md{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@:host .time-body-active*/.sc-ion-datetime-md-h .time-body-active.sc-ion-datetime-md{color:var(--ion-color-base)}/*!@:host(.in-item)*/.in-item.sc-ion-datetime-md-h{position:static}/*!@:host(.show-month-and-year) .calendar-action-buttons ion-item*/.show-month-and-year.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md{--color:var(--ion-color-base)}/*!@:host*/.sc-ion-datetime-md-h{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}/*!@:host .datetime-header*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}/*!@:host .datetime-header .datetime-title*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-title.sc-ion-datetime-md{font-size:0.75rem;text-transform:uppercase}/*!@:host .datetime-header .datetime-selected-date*/.sc-ion-datetime-md-h .datetime-header.sc-ion-datetime-md .datetime-selected-date.sc-ion-datetime-md{margin-top:30px;font-size:2.125rem}/*!@:host .datetime-calendar .calendar-action-buttons ion-item*/.sc-ion-datetime-md-h .datetime-calendar.sc-ion-datetime-md .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md{--padding-start:20px}/*!@:host .calendar-action-buttons ion-item,\n:host .calendar-action-buttons ion-button*/.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-item.sc-ion-datetime-md,.sc-ion-datetime-md-h .calendar-action-buttons.sc-ion-datetime-md ion-button.sc-ion-datetime-md{--color:var(--ion-color-step-650, #595959)}/*!@:host .calendar-days-of-week*/.sc-ion-datetime-md-h .calendar-days-of-week.sc-ion-datetime-md{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, gray);font-size:0.875rem;line-height:36px}/*!@:host .calendar-body .calendar-month .calendar-month-grid*/.sc-ion-datetime-md-h .calendar-body.sc-ion-datetime-md .calendar-month.sc-ion-datetime-md .calendar-month-grid.sc-ion-datetime-md{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}/*!@:host .calendar-day*/.sc-ion-datetime-md-h .calendar-day.sc-ion-datetime-md{width:42px;min-width:42px;height:42px;font-size:0.875rem}/*!@:host .calendar-day.calendar-day-today*/.sc-ion-datetime-md-h .calendar-day.calendar-day-today.sc-ion-datetime-md{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}/*!@:host .calendar-day.calendar-day-active*/.sc-ion-datetime-md-h .calendar-day.calendar-day-active.sc-ion-datetime-md{color:var(--ion-color-contrast)}/*!@.calendar-day.calendar-day-active*/.calendar-day.calendar-day-active.sc-ion-datetime-md{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}/*!@:host .datetime-time*/.sc-ion-datetime-md-h .datetime-time.sc-ion-datetime-md{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}/*!@:host .time-header*/.sc-ion-datetime-md-h .time-header.sc-ion-datetime-md{color:var(--ion-color-step-650, #595959)}/*!@:host(.datetime-presentation-month) .datetime-year,\n:host(.datetime-presentation-year) .datetime-year,\n:host(.datetime-presentation-month-year) .datetime-year*/.datetime-presentation-month.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md,.datetime-presentation-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md,.datetime-presentation-month-year.sc-ion-datetime-md-h .datetime-year.sc-ion-datetime-md{margin-top:20px;margin-bottom:20px}/*!@:host .datetime-buttons*/.sc-ion-datetime-md-h .datetime-buttons.sc-ion-datetime-md{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}";
|
|
14942
14950
|
|
|
14943
14951
|
/**
|
|
14944
14952
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
@@ -15928,7 +15936,7 @@ class Datetime {
|
|
|
15928
15936
|
const renderArray = forcePresentation === 'time-date'
|
|
15929
15937
|
? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
|
|
15930
15938
|
: [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
|
|
15931
|
-
return hAsync("ion-picker", null, renderArray);
|
|
15939
|
+
return hAsync("ion-picker-internal", null, renderArray);
|
|
15932
15940
|
}
|
|
15933
15941
|
renderDatePickerColumns(forcePresentation) {
|
|
15934
15942
|
return forcePresentation === 'date-time' || forcePresentation === 'time-date'
|
|
@@ -15987,7 +15995,7 @@ class Datetime {
|
|
|
15987
15995
|
const todayString = workingParts.day !== null
|
|
15988
15996
|
? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
|
|
15989
15997
|
: `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
|
|
15990
|
-
return (hAsync("ion-picker-column", { class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
|
|
15998
|
+
return (hAsync("ion-picker-column-internal", { class: "date-column", color: this.color, disabled: disabled, items: items, value: todayString, onIonChange: (ev) => {
|
|
15991
15999
|
// TODO(FW-1823) Remove this when iOS 14 support is dropped.
|
|
15992
16000
|
// Due to a Safari 14 issue we need to destroy
|
|
15993
16001
|
// the scroll listener before we update state
|
|
@@ -16003,7 +16011,7 @@ class Datetime {
|
|
|
16003
16011
|
// the working parts have been updated.
|
|
16004
16012
|
this.initializeCalendarListener();
|
|
16005
16013
|
ev.stopPropagation();
|
|
16006
|
-
} }
|
|
16014
|
+
} }));
|
|
16007
16015
|
}
|
|
16008
16016
|
renderIndividualDatePickerColumns(forcePresentation) {
|
|
16009
16017
|
const { workingParts, isDateEnabled } = this;
|
|
@@ -16071,8 +16079,7 @@ class Datetime {
|
|
|
16071
16079
|
}
|
|
16072
16080
|
const { disabled, workingParts } = this;
|
|
16073
16081
|
const activePart = this.getActivePartsWithFallback();
|
|
16074
|
-
|
|
16075
|
-
return (hAsync("ion-picker-column", { class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
|
|
16082
|
+
return (hAsync("ion-picker-column-internal", { class: "day-column", color: this.color, disabled: disabled, items: days, value: (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined, onIonChange: (ev) => {
|
|
16076
16083
|
// TODO(FW-1823) Remove this when iOS 14 support is dropped.
|
|
16077
16084
|
// Due to a Safari 14 issue we need to destroy
|
|
16078
16085
|
// the scroll listener before we update state
|
|
@@ -16086,7 +16093,7 @@ class Datetime {
|
|
|
16086
16093
|
// the working parts have been updated.
|
|
16087
16094
|
this.initializeCalendarListener();
|
|
16088
16095
|
ev.stopPropagation();
|
|
16089
|
-
} }
|
|
16096
|
+
} }));
|
|
16090
16097
|
}
|
|
16091
16098
|
renderMonthPickerColumn(months) {
|
|
16092
16099
|
if (months.length === 0) {
|
|
@@ -16094,7 +16101,7 @@ class Datetime {
|
|
|
16094
16101
|
}
|
|
16095
16102
|
const { disabled, workingParts } = this;
|
|
16096
16103
|
const activePart = this.getActivePartsWithFallback();
|
|
16097
|
-
return (hAsync("ion-picker-column", { class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
|
|
16104
|
+
return (hAsync("ion-picker-column-internal", { class: "month-column", color: this.color, disabled: disabled, items: months, value: workingParts.month, onIonChange: (ev) => {
|
|
16098
16105
|
// TODO(FW-1823) Remove this when iOS 14 support is dropped.
|
|
16099
16106
|
// Due to a Safari 14 issue we need to destroy
|
|
16100
16107
|
// the scroll listener before we update state
|
|
@@ -16108,7 +16115,7 @@ class Datetime {
|
|
|
16108
16115
|
// the working parts have been updated.
|
|
16109
16116
|
this.initializeCalendarListener();
|
|
16110
16117
|
ev.stopPropagation();
|
|
16111
|
-
} }
|
|
16118
|
+
} }));
|
|
16112
16119
|
}
|
|
16113
16120
|
renderYearPickerColumn(years) {
|
|
16114
16121
|
if (years.length === 0) {
|
|
@@ -16116,7 +16123,7 @@ class Datetime {
|
|
|
16116
16123
|
}
|
|
16117
16124
|
const { disabled, workingParts } = this;
|
|
16118
16125
|
const activePart = this.getActivePartsWithFallback();
|
|
16119
|
-
return (hAsync("ion-picker-column", { class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
|
|
16126
|
+
return (hAsync("ion-picker-column-internal", { class: "year-column", color: this.color, disabled: disabled, items: years, value: workingParts.year, onIonChange: (ev) => {
|
|
16120
16127
|
// TODO(FW-1823) Remove this when iOS 14 support is dropped.
|
|
16121
16128
|
// Due to a Safari 14 issue we need to destroy
|
|
16122
16129
|
// the scroll listener before we update state
|
|
@@ -16130,7 +16137,7 @@ class Datetime {
|
|
|
16130
16137
|
// the working parts have been updated.
|
|
16131
16138
|
this.initializeCalendarListener();
|
|
16132
16139
|
ev.stopPropagation();
|
|
16133
|
-
} }
|
|
16140
|
+
} }));
|
|
16134
16141
|
}
|
|
16135
16142
|
renderTimePickerColumns(forcePresentation) {
|
|
16136
16143
|
if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
|
|
@@ -16159,22 +16166,22 @@ class Datetime {
|
|
|
16159
16166
|
if (hoursData.length === 0)
|
|
16160
16167
|
return [];
|
|
16161
16168
|
const activePart = this.getActivePartsWithFallback();
|
|
16162
|
-
return (hAsync("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
|
|
16169
|
+
return (hAsync("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.hour, items: hoursData, numericInput: true, onIonChange: (ev) => {
|
|
16163
16170
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
|
|
16164
16171
|
this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value }));
|
|
16165
16172
|
ev.stopPropagation();
|
|
16166
|
-
} }
|
|
16173
|
+
} }));
|
|
16167
16174
|
}
|
|
16168
16175
|
renderMinutePickerColumn(minutesData) {
|
|
16169
16176
|
const { disabled, workingParts } = this;
|
|
16170
16177
|
if (minutesData.length === 0)
|
|
16171
16178
|
return [];
|
|
16172
16179
|
const activePart = this.getActivePartsWithFallback();
|
|
16173
|
-
return (hAsync("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
|
|
16180
|
+
return (hAsync("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.minute, items: minutesData, numericInput: true, onIonChange: (ev) => {
|
|
16174
16181
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
|
|
16175
16182
|
this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value }));
|
|
16176
16183
|
ev.stopPropagation();
|
|
16177
|
-
} }
|
|
16184
|
+
} }));
|
|
16178
16185
|
}
|
|
16179
16186
|
renderDayPeriodPickerColumn(dayPeriodData) {
|
|
16180
16187
|
const { disabled, workingParts } = this;
|
|
@@ -16183,12 +16190,12 @@ class Datetime {
|
|
|
16183
16190
|
}
|
|
16184
16191
|
const activePart = this.getActivePartsWithFallback();
|
|
16185
16192
|
const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
|
|
16186
|
-
return (hAsync("ion-picker-column", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
|
|
16193
|
+
return (hAsync("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, items: dayPeriodData, onIonChange: (ev) => {
|
|
16187
16194
|
const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
|
|
16188
16195
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
|
|
16189
16196
|
this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));
|
|
16190
16197
|
ev.stopPropagation();
|
|
16191
|
-
} }
|
|
16198
|
+
} }));
|
|
16192
16199
|
}
|
|
16193
16200
|
renderWheelView(forcePresentation) {
|
|
16194
16201
|
const { locale } = this;
|
|
@@ -16209,11 +16216,26 @@ class Datetime {
|
|
|
16209
16216
|
const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
|
|
16210
16217
|
// don't use the inheritAttributes util because it removes dir from the host, and we still need that
|
|
16211
16218
|
const hostDir = this.el.getAttribute('dir') || undefined;
|
|
16212
|
-
return (hAsync("div", { class: "calendar-header" }, hAsync("div", { class: "calendar-action-buttons" }, hAsync("div", { class: "calendar-month-year" }, hAsync("
|
|
16213
|
-
|
|
16214
|
-
|
|
16215
|
-
|
|
16216
|
-
|
|
16219
|
+
return (hAsync("div", { class: "calendar-header" }, hAsync("div", { class: "calendar-action-buttons" }, hAsync("div", { class: "calendar-month-year" }, hAsync("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", disabled: disabled, onClick: () => {
|
|
16220
|
+
var _a;
|
|
16221
|
+
this.toggleMonthAndYearView();
|
|
16222
|
+
/**
|
|
16223
|
+
* TODO: FW-3547
|
|
16224
|
+
*
|
|
16225
|
+
* Currently there is not a way to set the aria-label on the inner button
|
|
16226
|
+
* on the `ion-item` and have it be reactive to changes. This is a workaround
|
|
16227
|
+
* until we either refactor `ion-item` to a button or Stencil adds a way to
|
|
16228
|
+
* have reactive props for built-in properties, such as `aria-label`.
|
|
16229
|
+
*/
|
|
16230
|
+
const { monthYearToggleItemRef } = this;
|
|
16231
|
+
if (monthYearToggleItemRef) {
|
|
16232
|
+
const btn = (_a = monthYearToggleItemRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-native');
|
|
16233
|
+
if (btn) {
|
|
16234
|
+
const monthYearAriaLabel = this.showMonthAndYear ? 'Hide year picker' : 'Show year picker';
|
|
16235
|
+
btn.setAttribute('aria-label', monthYearAriaLabel);
|
|
16236
|
+
}
|
|
16237
|
+
}
|
|
16238
|
+
} }, hAsync("ion-label", null, getMonthAndYear(this.locale, this.workingParts), hAsync("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })))), hAsync("div", { class: "calendar-next-prev" }, hAsync("ion-buttons", null, hAsync("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), hAsync("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), hAsync("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
|
|
16217
16239
|
return hAsync("div", { class: "day-of-week" }, d);
|
|
16218
16240
|
}))));
|
|
16219
16241
|
}
|
|
@@ -16374,7 +16396,7 @@ class Datetime {
|
|
|
16374
16396
|
* This will correctly scroll the element position to the correct time value,
|
|
16375
16397
|
* before the popover is fully presented.
|
|
16376
16398
|
*/
|
|
16377
|
-
const cols = ev.target.querySelectorAll('ion-picker-column');
|
|
16399
|
+
const cols = ev.target.querySelectorAll('ion-picker-column-internal');
|
|
16378
16400
|
// TODO (FW-615): Potentially remove this when intersection observers are fixed in picker column
|
|
16379
16401
|
cols.forEach((col) => col.scrollActiveItemIntoView());
|
|
16380
16402
|
}, style: {
|
|
@@ -16568,8 +16590,6 @@ class Datetime {
|
|
|
16568
16590
|
}; }
|
|
16569
16591
|
}
|
|
16570
16592
|
let datetimeIds = 0;
|
|
16571
|
-
const WHEEL_ITEM_PART = 'wheel-item';
|
|
16572
|
-
const WHEEL_ITEM_ACTIVE_PART = `active`;
|
|
16573
16593
|
|
|
16574
16594
|
const iosDatetimeButtonCss = "/*!@:host*/.sc-ion-datetime-button-ios-h{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}/*!@:host button*/.sc-ion-datetime-button-ios-h button.sc-ion-datetime-button-ios{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}/*!@:host(.time-active) #time-button,\n:host(.date-active) #date-button*/.time-active.sc-ion-datetime-button-ios-h #time-button.sc-ion-datetime-button-ios,.date-active.sc-ion-datetime-button-ios-h #date-button.sc-ion-datetime-button-ios{color:var(--ion-color-base)}/*!@:host(.datetime-button-disabled)*/.datetime-button-disabled.sc-ion-datetime-button-ios-h{pointer-events:none}/*!@:host(.datetime-button-disabled) button*/.datetime-button-disabled.sc-ion-datetime-button-ios-h button.sc-ion-datetime-button-ios{opacity:0.4}";
|
|
16575
16595
|
|
|
@@ -24667,786 +24687,664 @@ class Note {
|
|
|
24667
24687
|
}; }
|
|
24668
24688
|
}
|
|
24669
24689
|
|
|
24670
|
-
|
|
24690
|
+
/**
|
|
24691
|
+
* iOS Picker Enter Animation
|
|
24692
|
+
*/
|
|
24693
|
+
const iosEnterAnimation$2 = (baseEl) => {
|
|
24694
|
+
const baseAnimation = createAnimation();
|
|
24695
|
+
const backdropAnimation = createAnimation();
|
|
24696
|
+
const wrapperAnimation = createAnimation();
|
|
24697
|
+
backdropAnimation
|
|
24698
|
+
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
24699
|
+
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
24700
|
+
.beforeStyles({
|
|
24701
|
+
'pointer-events': 'none',
|
|
24702
|
+
})
|
|
24703
|
+
.afterClearStyles(['pointer-events']);
|
|
24704
|
+
wrapperAnimation
|
|
24705
|
+
.addElement(baseEl.querySelector('.picker-wrapper'))
|
|
24706
|
+
.fromTo('transform', 'translateY(100%)', 'translateY(0%)');
|
|
24707
|
+
return baseAnimation
|
|
24708
|
+
.addElement(baseEl)
|
|
24709
|
+
.easing('cubic-bezier(.36,.66,.04,1)')
|
|
24710
|
+
.duration(400)
|
|
24711
|
+
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
24712
|
+
};
|
|
24713
|
+
|
|
24714
|
+
/**
|
|
24715
|
+
* iOS Picker Leave Animation
|
|
24716
|
+
*/
|
|
24717
|
+
const iosLeaveAnimation$2 = (baseEl) => {
|
|
24718
|
+
const baseAnimation = createAnimation();
|
|
24719
|
+
const backdropAnimation = createAnimation();
|
|
24720
|
+
const wrapperAnimation = createAnimation();
|
|
24721
|
+
backdropAnimation
|
|
24722
|
+
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
24723
|
+
.fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
|
|
24724
|
+
wrapperAnimation
|
|
24725
|
+
.addElement(baseEl.querySelector('.picker-wrapper'))
|
|
24726
|
+
.fromTo('transform', 'translateY(0%)', 'translateY(100%)');
|
|
24727
|
+
return baseAnimation
|
|
24728
|
+
.addElement(baseEl)
|
|
24729
|
+
.easing('cubic-bezier(.36,.66,.04,1)')
|
|
24730
|
+
.duration(400)
|
|
24731
|
+
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
24732
|
+
};
|
|
24733
|
+
|
|
24734
|
+
const pickerIosCss = ".sc-ion-picker-ios-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}@supports (inset-inline-start: 0){.sc-ion-picker-ios-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){.sc-ion-picker-ios-h{left:0}[dir=rtl].sc-ion-picker-ios-h,[dir=rtl] .sc-ion-picker-ios-h{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.sc-ion-picker-ios-h:dir(rtl){left:unset;right:unset;right:0}}}.overlay-hidden.sc-ion-picker-ios-h{display:none}.picker-wrapper.sc-ion-picker-ios{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-ios{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-ios{border:0;font-family:inherit}.picker-button.sc-ion-picker-ios:active,.picker-button.sc-ion-picker-ios:focus{outline:none}.picker-columns.sc-ion-picker-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-ios,.picker-below-highlight.sc-ion-picker-ios{display:none;pointer-events:none}.sc-ion-picker-ios-h{--background:var(--ion-background-color, #fff);--border-width:1px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-ios{display:-ms-flexbox;display:flex;height:44px;border-bottom:0.55px solid var(--border-color)}.picker-toolbar-button.sc-ion-picker-ios{-ms-flex:1;flex:1;text-align:end}.picker-toolbar-button.sc-ion-picker-ios:last-child .picker-button.sc-ion-picker-ios{font-weight:600}.picker-toolbar-button.sc-ion-picker-ios:first-child{font-weight:normal;text-align:start}.picker-button.sc-ion-picker-ios,.picker-button.ion-activated.sc-ion-picker-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1em;padding-inline-start:1em;-webkit-padding-end:1em;padding-inline-end:1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:16px}.picker-columns.sc-ion-picker-ios{height:215px;-webkit-perspective:1000px;perspective:1000px}.picker-above-highlight.sc-ion-picker-ios{top:0;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);display:block;position:absolute;width:100%;height:81px;border-bottom:1px solid var(--border-color);background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:10}@supports (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-ios{left:0}[dir=rtl].sc-ion-picker-ios-h .picker-above-highlight.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-above-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-ios .picker-above-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-above-highlight.sc-ion-picker-ios:dir(rtl){left:unset;right:unset;right:0}}}.picker-below-highlight.sc-ion-picker-ios{top:115px;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);display:block;position:absolute;width:100%;height:119px;border-top:1px solid var(--border-color);background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:11}@supports (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-ios{left:0}[dir=rtl].sc-ion-picker-ios-h .picker-below-highlight.sc-ion-picker-ios,[dir=rtl] .sc-ion-picker-ios-h .picker-below-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-ios .picker-below-highlight.sc-ion-picker-ios{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-below-highlight.sc-ion-picker-ios:dir(rtl){left:unset;right:unset;right:0}}}";
|
|
24671
24735
|
|
|
24672
|
-
const pickerMdCss
|
|
24736
|
+
const pickerMdCss = ".sc-ion-picker-md-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}@supports (inset-inline-start: 0){.sc-ion-picker-md-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){.sc-ion-picker-md-h{left:0}[dir=rtl].sc-ion-picker-md-h,[dir=rtl] .sc-ion-picker-md-h{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.sc-ion-picker-md-h:dir(rtl){left:unset;right:unset;right:0}}}.overlay-hidden.sc-ion-picker-md-h{display:none}.picker-wrapper.sc-ion-picker-md{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-md{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-md{border:0;font-family:inherit}.picker-button.sc-ion-picker-md:active,.picker-button.sc-ion-picker-md:focus{outline:none}.picker-columns.sc-ion-picker-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-md,.picker-below-highlight.sc-ion-picker-md{display:none;pointer-events:none}.sc-ion-picker-md-h{--background:var(--ion-background-color, #fff);--border-width:0.55px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-md{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;height:44px}.picker-button.sc-ion-picker-md,.picker-button.ion-activated.sc-ion-picker-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1.1em;padding-inline-start:1.1em;-webkit-padding-end:1.1em;padding-inline-end:1.1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #3880ff);font-size:14px;font-weight:500;text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none}.picker-columns.sc-ion-picker-md{height:216px;-webkit-perspective:1800px;perspective:1800px}.picker-above-highlight.sc-ion-picker-md{top:0;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);position:absolute;width:100%;height:81px;border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:10}@supports (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-above-highlight.sc-ion-picker-md{left:0}[dir=rtl].sc-ion-picker-md-h .picker-above-highlight.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-above-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-md .picker-above-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-above-highlight.sc-ion-picker-md:dir(rtl){left:unset;right:unset;right:0}}}.picker-below-highlight.sc-ion-picker-md{top:115px;-webkit-transform:translate3d(0, 0, 90px);transform:translate3d(0, 0, 90px);position:absolute;width:100%;height:119px;border-top:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:11}@supports (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-below-highlight.sc-ion-picker-md{left:0}[dir=rtl].sc-ion-picker-md-h .picker-below-highlight.sc-ion-picker-md,[dir=rtl] .sc-ion-picker-md-h .picker-below-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}[dir=rtl].sc-ion-picker-md .picker-below-highlight.sc-ion-picker-md{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-below-highlight.sc-ion-picker-md:dir(rtl){left:unset;right:unset;right:0}}}";
|
|
24673
24737
|
|
|
24738
|
+
// TODO(FW-2832): types
|
|
24674
24739
|
/**
|
|
24675
24740
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
24676
24741
|
*/
|
|
24677
|
-
class Picker
|
|
24742
|
+
class Picker {
|
|
24678
24743
|
constructor(hostRef) {
|
|
24679
24744
|
registerInstance(this, hostRef);
|
|
24680
|
-
this.
|
|
24681
|
-
this.
|
|
24682
|
-
this.
|
|
24683
|
-
|
|
24684
|
-
|
|
24685
|
-
|
|
24686
|
-
|
|
24687
|
-
|
|
24688
|
-
|
|
24689
|
-
|
|
24690
|
-
|
|
24691
|
-
|
|
24692
|
-
|
|
24693
|
-
const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
|
|
24694
|
-
if (outsideX || outsideY) {
|
|
24695
|
-
return false;
|
|
24696
|
-
}
|
|
24697
|
-
return true;
|
|
24698
|
-
};
|
|
24699
|
-
/**
|
|
24700
|
-
* If we are no longer focused
|
|
24701
|
-
* on a picker column, then we should
|
|
24702
|
-
* exit input mode. An exception is made
|
|
24703
|
-
* for the input in the picker since having
|
|
24704
|
-
* that focused means we are still in input mode.
|
|
24705
|
-
*/
|
|
24706
|
-
this.onFocusOut = (ev) => {
|
|
24707
|
-
// TODO(FW-2832): type
|
|
24708
|
-
const { relatedTarget } = ev;
|
|
24709
|
-
if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN' && relatedTarget !== this.inputEl)) {
|
|
24710
|
-
this.exitInputMode();
|
|
24711
|
-
}
|
|
24745
|
+
this.didPresent = createEvent(this, "ionPickerDidPresent", 7);
|
|
24746
|
+
this.willPresent = createEvent(this, "ionPickerWillPresent", 7);
|
|
24747
|
+
this.willDismiss = createEvent(this, "ionPickerWillDismiss", 7);
|
|
24748
|
+
this.didDismiss = createEvent(this, "ionPickerDidDismiss", 7);
|
|
24749
|
+
this.didPresentShorthand = createEvent(this, "didPresent", 7);
|
|
24750
|
+
this.willPresentShorthand = createEvent(this, "willPresent", 7);
|
|
24751
|
+
this.willDismissShorthand = createEvent(this, "willDismiss", 7);
|
|
24752
|
+
this.didDismissShorthand = createEvent(this, "didDismiss", 7);
|
|
24753
|
+
this.delegateController = createDelegateController(this);
|
|
24754
|
+
this.lockController = createLockController();
|
|
24755
|
+
this.triggerController = createTriggerController();
|
|
24756
|
+
this.onBackdropTap = () => {
|
|
24757
|
+
this.dismiss(undefined, BACKDROP);
|
|
24712
24758
|
};
|
|
24713
|
-
|
|
24714
|
-
|
|
24715
|
-
|
|
24716
|
-
|
|
24717
|
-
|
|
24718
|
-
this.onFocusIn = (ev) => {
|
|
24719
|
-
// TODO(FW-2832): type
|
|
24720
|
-
const { target } = ev;
|
|
24721
|
-
/**
|
|
24722
|
-
* Due to browser differences in how/when focus
|
|
24723
|
-
* is dispatched on certain elements, we need to
|
|
24724
|
-
* make sure that this function only ever runs when
|
|
24725
|
-
* focusing a picker column.
|
|
24726
|
-
*/
|
|
24727
|
-
if (target.tagName !== 'ION-PICKER-COLUMN') {
|
|
24728
|
-
return;
|
|
24729
|
-
}
|
|
24730
|
-
/**
|
|
24731
|
-
* If we have actionOnClick
|
|
24732
|
-
* then this means the user focused
|
|
24733
|
-
* a picker column via mouse or
|
|
24734
|
-
* touch (i.e. a PointerEvent). As a result,
|
|
24735
|
-
* we should not enter/exit input mode
|
|
24736
|
-
* until the click event has fired, which happens
|
|
24737
|
-
* after the `focusin` event.
|
|
24738
|
-
*
|
|
24739
|
-
* Otherwise, the user likely focused
|
|
24740
|
-
* the column using their keyboard and
|
|
24741
|
-
* we should enter/exit input mode automatically.
|
|
24742
|
-
*/
|
|
24743
|
-
if (!this.actionOnClick) {
|
|
24744
|
-
const columnEl = target;
|
|
24745
|
-
const allowInput = columnEl.numericInput;
|
|
24746
|
-
if (allowInput) {
|
|
24747
|
-
this.enterInputMode(columnEl, false);
|
|
24748
|
-
}
|
|
24749
|
-
else {
|
|
24750
|
-
this.exitInputMode();
|
|
24751
|
-
}
|
|
24759
|
+
this.dispatchCancelHandler = (ev) => {
|
|
24760
|
+
const role = ev.detail.role;
|
|
24761
|
+
if (isCancel(role)) {
|
|
24762
|
+
const cancelButton = this.buttons.find((b) => b.role === 'cancel');
|
|
24763
|
+
this.callButtonHandler(cancelButton);
|
|
24752
24764
|
}
|
|
24753
24765
|
};
|
|
24766
|
+
this.presented = false;
|
|
24767
|
+
this.overlayIndex = undefined;
|
|
24768
|
+
this.delegate = undefined;
|
|
24769
|
+
this.hasController = false;
|
|
24770
|
+
this.keyboardClose = true;
|
|
24771
|
+
this.enterAnimation = undefined;
|
|
24772
|
+
this.leaveAnimation = undefined;
|
|
24773
|
+
this.buttons = [];
|
|
24774
|
+
this.columns = [];
|
|
24775
|
+
this.cssClass = undefined;
|
|
24776
|
+
this.duration = 0;
|
|
24777
|
+
this.showBackdrop = true;
|
|
24778
|
+
this.backdropDismiss = true;
|
|
24779
|
+
this.animated = true;
|
|
24780
|
+
this.htmlAttributes = undefined;
|
|
24781
|
+
this.isOpen = false;
|
|
24782
|
+
this.trigger = undefined;
|
|
24783
|
+
}
|
|
24784
|
+
onIsOpenChange(newValue, oldValue) {
|
|
24785
|
+
if (newValue === true && oldValue === false) {
|
|
24786
|
+
this.present();
|
|
24787
|
+
}
|
|
24788
|
+
else if (newValue === false && oldValue === true) {
|
|
24789
|
+
this.dismiss();
|
|
24790
|
+
}
|
|
24791
|
+
}
|
|
24792
|
+
triggerChanged() {
|
|
24793
|
+
const { trigger, el, triggerController } = this;
|
|
24794
|
+
if (trigger) {
|
|
24795
|
+
triggerController.addClickListener(el, trigger);
|
|
24796
|
+
}
|
|
24797
|
+
}
|
|
24798
|
+
connectedCallback() {
|
|
24799
|
+
prepareOverlay(this.el);
|
|
24800
|
+
this.triggerChanged();
|
|
24801
|
+
}
|
|
24802
|
+
disconnectedCallback() {
|
|
24803
|
+
this.triggerController.removeClickListener();
|
|
24804
|
+
}
|
|
24805
|
+
componentWillLoad() {
|
|
24806
|
+
setOverlayId(this.el);
|
|
24807
|
+
}
|
|
24808
|
+
componentDidLoad() {
|
|
24754
24809
|
/**
|
|
24755
|
-
*
|
|
24756
|
-
*
|
|
24757
|
-
* so that we enter/exit input mode correctly.
|
|
24810
|
+
* If picker was rendered with isOpen="true"
|
|
24811
|
+
* then we should open picker immediately.
|
|
24758
24812
|
*/
|
|
24759
|
-
this.
|
|
24760
|
-
|
|
24761
|
-
|
|
24762
|
-
actionOnClick();
|
|
24763
|
-
this.actionOnClick = undefined;
|
|
24764
|
-
}
|
|
24765
|
-
};
|
|
24813
|
+
if (this.isOpen === true) {
|
|
24814
|
+
raf(() => this.present());
|
|
24815
|
+
}
|
|
24766
24816
|
/**
|
|
24767
|
-
*
|
|
24768
|
-
*
|
|
24769
|
-
*
|
|
24770
|
-
*
|
|
24771
|
-
*
|
|
24772
|
-
*
|
|
24773
|
-
*
|
|
24817
|
+
* When binding values in frameworks such as Angular
|
|
24818
|
+
* it is possible for the value to be set after the Web Component
|
|
24819
|
+
* initializes but before the value watcher is set up in Stencil.
|
|
24820
|
+
* As a result, the watcher callback may not be fired.
|
|
24821
|
+
* We work around this by manually calling the watcher
|
|
24822
|
+
* callback when the component has loaded and the watcher
|
|
24823
|
+
* is configured.
|
|
24774
24824
|
*/
|
|
24775
|
-
this.
|
|
24776
|
-
const { useInputMode, inputModeColumn, el } = this;
|
|
24777
|
-
if (this.isInHighlightBounds(ev)) {
|
|
24778
|
-
/**
|
|
24779
|
-
* If we were already in
|
|
24780
|
-
* input mode, then we should determine
|
|
24781
|
-
* if we tapped a particular column and
|
|
24782
|
-
* should switch to input mode for
|
|
24783
|
-
* that specific column.
|
|
24784
|
-
*/
|
|
24785
|
-
if (useInputMode) {
|
|
24786
|
-
/**
|
|
24787
|
-
* If we tapped a picker column
|
|
24788
|
-
* then we should either switch to input
|
|
24789
|
-
* mode for that column or all columns.
|
|
24790
|
-
* Otherwise we should exit input mode
|
|
24791
|
-
* since we just tapped the highlight and
|
|
24792
|
-
* not a column.
|
|
24793
|
-
*/
|
|
24794
|
-
if (ev.target.tagName === 'ION-PICKER-COLUMN') {
|
|
24795
|
-
/**
|
|
24796
|
-
* If user taps 2 different columns
|
|
24797
|
-
* then we should just switch to input mode
|
|
24798
|
-
* for the new column rather than switching to
|
|
24799
|
-
* input mode for all columns.
|
|
24800
|
-
*/
|
|
24801
|
-
if (inputModeColumn && inputModeColumn === ev.target) {
|
|
24802
|
-
this.actionOnClick = () => {
|
|
24803
|
-
this.enterInputMode();
|
|
24804
|
-
};
|
|
24805
|
-
}
|
|
24806
|
-
else {
|
|
24807
|
-
this.actionOnClick = () => {
|
|
24808
|
-
this.enterInputMode(ev.target);
|
|
24809
|
-
};
|
|
24810
|
-
}
|
|
24811
|
-
}
|
|
24812
|
-
else {
|
|
24813
|
-
this.actionOnClick = () => {
|
|
24814
|
-
this.exitInputMode();
|
|
24815
|
-
};
|
|
24816
|
-
}
|
|
24817
|
-
/**
|
|
24818
|
-
* If we were not already in
|
|
24819
|
-
* input mode, then we should
|
|
24820
|
-
* enter input mode for all columns.
|
|
24821
|
-
*/
|
|
24822
|
-
}
|
|
24823
|
-
else {
|
|
24824
|
-
/**
|
|
24825
|
-
* If there is only 1 numeric input column
|
|
24826
|
-
* then we should skip multi column input.
|
|
24827
|
-
*/
|
|
24828
|
-
const columns = el.querySelectorAll('ion-picker-column.picker-column-numeric-input');
|
|
24829
|
-
const columnEl = columns.length === 1 ? ev.target : undefined;
|
|
24830
|
-
this.actionOnClick = () => {
|
|
24831
|
-
this.enterInputMode(columnEl);
|
|
24832
|
-
};
|
|
24833
|
-
}
|
|
24834
|
-
return;
|
|
24835
|
-
}
|
|
24836
|
-
this.actionOnClick = () => {
|
|
24837
|
-
this.exitInputMode();
|
|
24838
|
-
};
|
|
24839
|
-
};
|
|
24840
|
-
/**
|
|
24841
|
-
* Enters input mode to allow
|
|
24842
|
-
* for text entry of numeric values.
|
|
24843
|
-
* If on mobile, we focus a hidden input
|
|
24844
|
-
* field so that the on screen keyboard
|
|
24845
|
-
* is brought up. When tabbing using a
|
|
24846
|
-
* keyboard, picker columns receive an outline
|
|
24847
|
-
* to indicate they are focused. As a result,
|
|
24848
|
-
* we should not focus the hidden input as it
|
|
24849
|
-
* would cause the outline to go away, preventing
|
|
24850
|
-
* users from having any visual indication of which
|
|
24851
|
-
* column is focused.
|
|
24852
|
-
*/
|
|
24853
|
-
this.enterInputMode = (columnEl, focusInput = true) => {
|
|
24854
|
-
const { inputEl, el } = this;
|
|
24855
|
-
if (!inputEl) {
|
|
24856
|
-
return;
|
|
24857
|
-
}
|
|
24858
|
-
/**
|
|
24859
|
-
* Only active input mode if there is at
|
|
24860
|
-
* least one column that accepts numeric input.
|
|
24861
|
-
*/
|
|
24862
|
-
const hasInputColumn = el.querySelector('ion-picker-column.picker-column-numeric-input');
|
|
24863
|
-
if (!hasInputColumn) {
|
|
24864
|
-
return;
|
|
24865
|
-
}
|
|
24866
|
-
/**
|
|
24867
|
-
* If columnEl is undefined then
|
|
24868
|
-
* it is assumed that all numeric pickers
|
|
24869
|
-
* are eligible for text entry.
|
|
24870
|
-
* (i.e. hour and minute columns)
|
|
24871
|
-
*/
|
|
24872
|
-
this.useInputMode = true;
|
|
24873
|
-
this.inputModeColumn = columnEl;
|
|
24874
|
-
/**
|
|
24875
|
-
* Users with a keyboard and mouse can
|
|
24876
|
-
* activate input mode where the input is
|
|
24877
|
-
* focused as well as when it is not focused,
|
|
24878
|
-
* so we need to make sure we clean up any
|
|
24879
|
-
* old listeners.
|
|
24880
|
-
*/
|
|
24881
|
-
if (focusInput) {
|
|
24882
|
-
if (this.destroyKeypressListener) {
|
|
24883
|
-
this.destroyKeypressListener();
|
|
24884
|
-
this.destroyKeypressListener = undefined;
|
|
24885
|
-
}
|
|
24886
|
-
inputEl.focus();
|
|
24887
|
-
}
|
|
24888
|
-
else {
|
|
24889
|
-
el.addEventListener('keypress', this.onKeyPress);
|
|
24890
|
-
this.destroyKeypressListener = () => {
|
|
24891
|
-
el.removeEventListener('keypress', this.onKeyPress);
|
|
24892
|
-
};
|
|
24893
|
-
}
|
|
24894
|
-
this.emitInputModeChange();
|
|
24895
|
-
};
|
|
24896
|
-
this.onKeyPress = (ev) => {
|
|
24897
|
-
const { inputEl } = this;
|
|
24898
|
-
if (!inputEl) {
|
|
24899
|
-
return;
|
|
24900
|
-
}
|
|
24901
|
-
const parsedValue = parseInt(ev.key, 10);
|
|
24902
|
-
/**
|
|
24903
|
-
* Only numbers should be allowed
|
|
24904
|
-
*/
|
|
24905
|
-
if (!Number.isNaN(parsedValue)) {
|
|
24906
|
-
inputEl.value += ev.key;
|
|
24907
|
-
this.onInputChange();
|
|
24908
|
-
}
|
|
24909
|
-
};
|
|
24910
|
-
this.selectSingleColumn = () => {
|
|
24911
|
-
const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
|
|
24912
|
-
if (!inputEl || !inputModeColumn) {
|
|
24913
|
-
return;
|
|
24914
|
-
}
|
|
24915
|
-
const options = Array.from(inputModeColumn.querySelectorAll('ion-picker-column-option')).filter((el) => el.disabled !== true);
|
|
24916
|
-
/**
|
|
24917
|
-
* If users pause for a bit, the search
|
|
24918
|
-
* value should be reset similar to how a
|
|
24919
|
-
* <select> behaves. So typing "34", waiting,
|
|
24920
|
-
* then typing "5" should select "05".
|
|
24921
|
-
*/
|
|
24922
|
-
if (singleColumnSearchTimeout) {
|
|
24923
|
-
clearTimeout(singleColumnSearchTimeout);
|
|
24924
|
-
}
|
|
24925
|
-
this.singleColumnSearchTimeout = setTimeout(() => {
|
|
24926
|
-
inputEl.value = '';
|
|
24927
|
-
this.singleColumnSearchTimeout = undefined;
|
|
24928
|
-
}, 1000);
|
|
24929
|
-
/**
|
|
24930
|
-
* For values that are longer than 2 digits long
|
|
24931
|
-
* we should shift the value over 1 character
|
|
24932
|
-
* to the left. So typing "456" would result in "56".
|
|
24933
|
-
* TODO: If we want to support more than just
|
|
24934
|
-
* time entry, we should update this value to be
|
|
24935
|
-
* the max length of all of the picker items.
|
|
24936
|
-
*/
|
|
24937
|
-
if (inputEl.value.length >= 3) {
|
|
24938
|
-
const startIndex = inputEl.value.length - 2;
|
|
24939
|
-
const newString = inputEl.value.substring(startIndex);
|
|
24940
|
-
inputEl.value = newString;
|
|
24941
|
-
this.selectSingleColumn();
|
|
24942
|
-
return;
|
|
24943
|
-
}
|
|
24944
|
-
/**
|
|
24945
|
-
* Checking the value of the input gets priority
|
|
24946
|
-
* first. For example, if the value of the input
|
|
24947
|
-
* is "1" and we entered "2", then the complete value
|
|
24948
|
-
* is "12" and we should select hour 12.
|
|
24949
|
-
*
|
|
24950
|
-
* Regex removes any leading zeros from values like "02",
|
|
24951
|
-
* but it keeps a single zero if there are only zeros in the string.
|
|
24952
|
-
* 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
|
|
24953
|
-
* 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
|
|
24954
|
-
*/
|
|
24955
|
-
const findItemFromCompleteValue = options.find(({ textContent }) => {
|
|
24956
|
-
/**
|
|
24957
|
-
* Keyboard entry is currently only used inside of Datetime
|
|
24958
|
-
* where we guarantee textContent is set.
|
|
24959
|
-
* If we end up exposing this feature publicly we should revisit this assumption.
|
|
24960
|
-
*/
|
|
24961
|
-
const parsedText = textContent.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
|
|
24962
|
-
return parsedText === inputEl.value;
|
|
24963
|
-
});
|
|
24964
|
-
if (findItemFromCompleteValue) {
|
|
24965
|
-
inputModeColumn.setValue(findItemFromCompleteValue.value);
|
|
24966
|
-
return;
|
|
24967
|
-
}
|
|
24968
|
-
/**
|
|
24969
|
-
* If we typed "56" to get minute 56, then typed "7",
|
|
24970
|
-
* we should select "07" as "567" is not a valid minute.
|
|
24971
|
-
*/
|
|
24972
|
-
if (inputEl.value.length === 2) {
|
|
24973
|
-
const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
|
|
24974
|
-
inputEl.value = changedCharacter;
|
|
24975
|
-
this.selectSingleColumn();
|
|
24976
|
-
}
|
|
24977
|
-
};
|
|
24978
|
-
/**
|
|
24979
|
-
* Searches a list of column items for a particular
|
|
24980
|
-
* value. This is currently used for numeric values.
|
|
24981
|
-
* The zeroBehavior can be set to account for leading
|
|
24982
|
-
* or trailing zeros when looking at the item text.
|
|
24983
|
-
*/
|
|
24984
|
-
this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
|
|
24985
|
-
const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
|
|
24986
|
-
const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => {
|
|
24987
|
-
return el.disabled !== true && el.textContent.replace(behavior, '') === value;
|
|
24988
|
-
});
|
|
24989
|
-
if (option) {
|
|
24990
|
-
colEl.setValue(option.value);
|
|
24991
|
-
}
|
|
24992
|
-
};
|
|
24993
|
-
this.selectMultiColumn = () => {
|
|
24994
|
-
const { inputEl, el } = this;
|
|
24995
|
-
if (!inputEl) {
|
|
24996
|
-
return;
|
|
24997
|
-
}
|
|
24998
|
-
const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);
|
|
24999
|
-
const firstColumn = numericPickers[0];
|
|
25000
|
-
const lastColumn = numericPickers[1];
|
|
25001
|
-
let value = inputEl.value;
|
|
25002
|
-
let minuteValue;
|
|
25003
|
-
switch (value.length) {
|
|
25004
|
-
case 1:
|
|
25005
|
-
this.searchColumn(firstColumn, value);
|
|
25006
|
-
break;
|
|
25007
|
-
case 2:
|
|
25008
|
-
/**
|
|
25009
|
-
* If the first character is `0` or `1` it is
|
|
25010
|
-
* possible that users are trying to type `09`
|
|
25011
|
-
* or `11` into the hour field, so we should look
|
|
25012
|
-
* at that first.
|
|
25013
|
-
*/
|
|
25014
|
-
const firstCharacter = inputEl.value.substring(0, 1);
|
|
25015
|
-
value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
|
|
25016
|
-
this.searchColumn(firstColumn, value);
|
|
25017
|
-
/**
|
|
25018
|
-
* If only checked the first value,
|
|
25019
|
-
* we can check the second value
|
|
25020
|
-
* for a match in the minutes column
|
|
25021
|
-
*/
|
|
25022
|
-
if (value.length === 1) {
|
|
25023
|
-
minuteValue = inputEl.value.substring(inputEl.value.length - 1);
|
|
25024
|
-
this.searchColumn(lastColumn, minuteValue, 'end');
|
|
25025
|
-
}
|
|
25026
|
-
break;
|
|
25027
|
-
case 3:
|
|
25028
|
-
/**
|
|
25029
|
-
* If the first character is `0` or `1` it is
|
|
25030
|
-
* possible that users are trying to type `09`
|
|
25031
|
-
* or `11` into the hour field, so we should look
|
|
25032
|
-
* at that first.
|
|
25033
|
-
*/
|
|
25034
|
-
const firstCharacterAgain = inputEl.value.substring(0, 1);
|
|
25035
|
-
value =
|
|
25036
|
-
firstCharacterAgain === '0' || firstCharacterAgain === '1'
|
|
25037
|
-
? inputEl.value.substring(0, 2)
|
|
25038
|
-
: firstCharacterAgain;
|
|
25039
|
-
this.searchColumn(firstColumn, value);
|
|
25040
|
-
/**
|
|
25041
|
-
* If only checked the first value,
|
|
25042
|
-
* we can check the second value
|
|
25043
|
-
* for a match in the minutes column
|
|
25044
|
-
*/
|
|
25045
|
-
minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
|
|
25046
|
-
this.searchColumn(lastColumn, minuteValue, 'end');
|
|
25047
|
-
break;
|
|
25048
|
-
case 4:
|
|
25049
|
-
/**
|
|
25050
|
-
* If the first character is `0` or `1` it is
|
|
25051
|
-
* possible that users are trying to type `09`
|
|
25052
|
-
* or `11` into the hour field, so we should look
|
|
25053
|
-
* at that first.
|
|
25054
|
-
*/
|
|
25055
|
-
const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
|
|
25056
|
-
value =
|
|
25057
|
-
firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
|
|
25058
|
-
? inputEl.value.substring(0, 2)
|
|
25059
|
-
: firstCharacterAgainAgain;
|
|
25060
|
-
this.searchColumn(firstColumn, value);
|
|
25061
|
-
/**
|
|
25062
|
-
* If only checked the first value,
|
|
25063
|
-
* we can check the second value
|
|
25064
|
-
* for a match in the minutes column
|
|
25065
|
-
*/
|
|
25066
|
-
const minuteValueAgain = value.length === 1
|
|
25067
|
-
? inputEl.value.substring(1, inputEl.value.length)
|
|
25068
|
-
: inputEl.value.substring(2, inputEl.value.length);
|
|
25069
|
-
this.searchColumn(lastColumn, minuteValueAgain, 'end');
|
|
25070
|
-
break;
|
|
25071
|
-
default:
|
|
25072
|
-
const startIndex = inputEl.value.length - 4;
|
|
25073
|
-
const newString = inputEl.value.substring(startIndex);
|
|
25074
|
-
inputEl.value = newString;
|
|
25075
|
-
this.selectMultiColumn();
|
|
25076
|
-
break;
|
|
25077
|
-
}
|
|
25078
|
-
};
|
|
25079
|
-
/**
|
|
25080
|
-
* Searches the value of the active column
|
|
25081
|
-
* to determine which value users are trying
|
|
25082
|
-
* to select
|
|
25083
|
-
*/
|
|
25084
|
-
this.onInputChange = () => {
|
|
25085
|
-
const { useInputMode, inputEl, inputModeColumn } = this;
|
|
25086
|
-
if (!useInputMode || !inputEl) {
|
|
25087
|
-
return;
|
|
25088
|
-
}
|
|
25089
|
-
if (inputModeColumn) {
|
|
25090
|
-
this.selectSingleColumn();
|
|
25091
|
-
}
|
|
25092
|
-
else {
|
|
25093
|
-
this.selectMultiColumn();
|
|
25094
|
-
}
|
|
25095
|
-
};
|
|
25096
|
-
/**
|
|
25097
|
-
* Emit ionInputModeChange. Picker columns
|
|
25098
|
-
* listen for this event to determine whether
|
|
25099
|
-
* or not their column is "active" for text input.
|
|
25100
|
-
*/
|
|
25101
|
-
this.emitInputModeChange = () => {
|
|
25102
|
-
const { useInputMode, inputModeColumn } = this;
|
|
25103
|
-
this.ionInputModeChange.emit({
|
|
25104
|
-
useInputMode,
|
|
25105
|
-
inputModeColumn,
|
|
25106
|
-
});
|
|
25107
|
-
};
|
|
24825
|
+
this.triggerChanged();
|
|
25108
24826
|
}
|
|
25109
24827
|
/**
|
|
25110
|
-
*
|
|
25111
|
-
* we need to prevent touchstart so other
|
|
25112
|
-
* gestures do not fire. For example,
|
|
25113
|
-
* scrolling on the wheel picker
|
|
25114
|
-
* in ion-datetime should not cause
|
|
25115
|
-
* a card modal to swipe to close.
|
|
24828
|
+
* Present the picker overlay after it has been created.
|
|
25116
24829
|
*/
|
|
25117
|
-
|
|
25118
|
-
|
|
24830
|
+
async present() {
|
|
24831
|
+
const unlock = await this.lockController.lock();
|
|
24832
|
+
await this.delegateController.attachViewToDom();
|
|
24833
|
+
await present(this, 'pickerEnter', iosEnterAnimation$2, iosEnterAnimation$2, undefined);
|
|
24834
|
+
if (this.duration > 0) {
|
|
24835
|
+
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
|
|
24836
|
+
}
|
|
24837
|
+
unlock();
|
|
25119
24838
|
}
|
|
25120
|
-
|
|
25121
|
-
|
|
25122
|
-
|
|
24839
|
+
/**
|
|
24840
|
+
* Dismiss the picker overlay after it has been presented.
|
|
24841
|
+
*
|
|
24842
|
+
* @param data Any data to emit in the dismiss events.
|
|
24843
|
+
* @param role The role of the element that is dismissing the picker.
|
|
24844
|
+
* This can be useful in a button handler for determining which button was
|
|
24845
|
+
* clicked to dismiss the picker.
|
|
24846
|
+
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
|
24847
|
+
*/
|
|
24848
|
+
async dismiss(data, role) {
|
|
24849
|
+
const unlock = await this.lockController.lock();
|
|
24850
|
+
if (this.durationTimeout) {
|
|
24851
|
+
clearTimeout(this.durationTimeout);
|
|
24852
|
+
}
|
|
24853
|
+
const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation$2, iosLeaveAnimation$2);
|
|
24854
|
+
if (dismissed) {
|
|
24855
|
+
this.delegateController.removeViewFromDom();
|
|
24856
|
+
}
|
|
24857
|
+
unlock();
|
|
24858
|
+
return dismissed;
|
|
25123
24859
|
}
|
|
25124
24860
|
/**
|
|
25125
|
-
*
|
|
25126
|
-
* Exits text entry mode for the picker
|
|
25127
|
-
* This method blurs the hidden input
|
|
25128
|
-
* and cause the keyboard to dismiss.
|
|
24861
|
+
* Returns a promise that resolves when the picker did dismiss.
|
|
25129
24862
|
*/
|
|
25130
|
-
|
|
25131
|
-
|
|
25132
|
-
|
|
25133
|
-
|
|
24863
|
+
onDidDismiss() {
|
|
24864
|
+
return eventMethod(this.el, 'ionPickerDidDismiss');
|
|
24865
|
+
}
|
|
24866
|
+
/**
|
|
24867
|
+
* Returns a promise that resolves when the picker will dismiss.
|
|
24868
|
+
*/
|
|
24869
|
+
onWillDismiss() {
|
|
24870
|
+
return eventMethod(this.el, 'ionPickerWillDismiss');
|
|
24871
|
+
}
|
|
24872
|
+
/**
|
|
24873
|
+
* Get the column that matches the specified name.
|
|
24874
|
+
*
|
|
24875
|
+
* @param name The name of the column.
|
|
24876
|
+
*/
|
|
24877
|
+
getColumn(name) {
|
|
24878
|
+
return Promise.resolve(this.columns.find((column) => column.name === name));
|
|
24879
|
+
}
|
|
24880
|
+
async buttonClick(button) {
|
|
24881
|
+
const role = button.role;
|
|
24882
|
+
if (isCancel(role)) {
|
|
24883
|
+
return this.dismiss(undefined, role);
|
|
25134
24884
|
}
|
|
25135
|
-
|
|
25136
|
-
|
|
25137
|
-
|
|
25138
|
-
|
|
25139
|
-
|
|
25140
|
-
|
|
25141
|
-
|
|
24885
|
+
const shouldDismiss = await this.callButtonHandler(button);
|
|
24886
|
+
if (shouldDismiss) {
|
|
24887
|
+
return this.dismiss(this.getSelected(), button.role);
|
|
24888
|
+
}
|
|
24889
|
+
return Promise.resolve();
|
|
24890
|
+
}
|
|
24891
|
+
async callButtonHandler(button) {
|
|
24892
|
+
if (button) {
|
|
24893
|
+
// a handler has been provided, execute it
|
|
24894
|
+
// pass the handler the values from the inputs
|
|
24895
|
+
const rtn = await safeCall(button.handler, this.getSelected());
|
|
24896
|
+
if (rtn === false) {
|
|
24897
|
+
// if the return value of the handler is false then do not dismiss
|
|
24898
|
+
return false;
|
|
24899
|
+
}
|
|
25142
24900
|
}
|
|
25143
|
-
|
|
24901
|
+
return true;
|
|
24902
|
+
}
|
|
24903
|
+
getSelected() {
|
|
24904
|
+
const selected = {};
|
|
24905
|
+
this.columns.forEach((col, index) => {
|
|
24906
|
+
const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined;
|
|
24907
|
+
selected[col.name] = {
|
|
24908
|
+
text: selectedColumn ? selectedColumn.text : undefined,
|
|
24909
|
+
value: selectedColumn ? selectedColumn.value : undefined,
|
|
24910
|
+
columnIndex: index,
|
|
24911
|
+
};
|
|
24912
|
+
});
|
|
24913
|
+
return selected;
|
|
25144
24914
|
}
|
|
25145
24915
|
render() {
|
|
25146
|
-
|
|
24916
|
+
const { htmlAttributes } = this;
|
|
24917
|
+
const mode = getIonMode$1(this);
|
|
24918
|
+
return (hAsync(Host, Object.assign({ "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
|
|
24919
|
+
zIndex: `${20000 + this.overlayIndex}`,
|
|
24920
|
+
}, class: Object.assign({ [mode]: true,
|
|
24921
|
+
// Used internally for styling
|
|
24922
|
+
[`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { tabindex: "0" }), hAsync("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { class: "picker-columns" }, hAsync("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-column", { col: c })), hAsync("div", { class: "picker-below-highlight" }))), hAsync("div", { tabindex: "0" })));
|
|
25147
24923
|
}
|
|
25148
24924
|
get el() { return getElement(this); }
|
|
24925
|
+
static get watchers() { return {
|
|
24926
|
+
"isOpen": ["onIsOpenChange"],
|
|
24927
|
+
"trigger": ["triggerChanged"]
|
|
24928
|
+
}; }
|
|
25149
24929
|
static get style() { return {
|
|
25150
|
-
ios: pickerIosCss
|
|
25151
|
-
md: pickerMdCss
|
|
24930
|
+
ios: pickerIosCss,
|
|
24931
|
+
md: pickerMdCss
|
|
25152
24932
|
}; }
|
|
25153
24933
|
static get cmpMeta() { return {
|
|
25154
|
-
"$flags$":
|
|
24934
|
+
"$flags$": 34,
|
|
25155
24935
|
"$tagName$": "ion-picker",
|
|
25156
24936
|
"$members$": {
|
|
25157
|
-
"
|
|
24937
|
+
"overlayIndex": [2, "overlay-index"],
|
|
24938
|
+
"delegate": [16],
|
|
24939
|
+
"hasController": [4, "has-controller"],
|
|
24940
|
+
"keyboardClose": [4, "keyboard-close"],
|
|
24941
|
+
"enterAnimation": [16],
|
|
24942
|
+
"leaveAnimation": [16],
|
|
24943
|
+
"buttons": [16],
|
|
24944
|
+
"columns": [16],
|
|
24945
|
+
"cssClass": [1, "css-class"],
|
|
24946
|
+
"duration": [2],
|
|
24947
|
+
"showBackdrop": [4, "show-backdrop"],
|
|
24948
|
+
"backdropDismiss": [4, "backdrop-dismiss"],
|
|
24949
|
+
"animated": [4],
|
|
24950
|
+
"htmlAttributes": [16],
|
|
24951
|
+
"isOpen": [4, "is-open"],
|
|
24952
|
+
"trigger": [1],
|
|
24953
|
+
"presented": [32],
|
|
24954
|
+
"present": [64],
|
|
24955
|
+
"dismiss": [64],
|
|
24956
|
+
"onDidDismiss": [64],
|
|
24957
|
+
"onWillDismiss": [64],
|
|
24958
|
+
"getColumn": [64]
|
|
25158
24959
|
},
|
|
25159
|
-
"$listeners$":
|
|
24960
|
+
"$listeners$": undefined,
|
|
25160
24961
|
"$lazyBundleId$": "-",
|
|
25161
24962
|
"$attrsToReflect$": []
|
|
25162
24963
|
}; }
|
|
25163
24964
|
}
|
|
25164
|
-
|
|
25165
|
-
|
|
25166
|
-
|
|
25167
|
-
|
|
25168
|
-
|
|
25169
|
-
const baseAnimation = createAnimation();
|
|
25170
|
-
const backdropAnimation = createAnimation();
|
|
25171
|
-
const wrapperAnimation = createAnimation();
|
|
25172
|
-
backdropAnimation
|
|
25173
|
-
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
25174
|
-
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
25175
|
-
.beforeStyles({
|
|
25176
|
-
'pointer-events': 'none',
|
|
25177
|
-
})
|
|
25178
|
-
.afterClearStyles(['pointer-events']);
|
|
25179
|
-
wrapperAnimation
|
|
25180
|
-
.addElement(baseEl.querySelector('.picker-wrapper'))
|
|
25181
|
-
.fromTo('transform', 'translateY(100%)', 'translateY(0%)');
|
|
25182
|
-
return baseAnimation
|
|
25183
|
-
.addElement(baseEl)
|
|
25184
|
-
.easing('cubic-bezier(.36,.66,.04,1)')
|
|
25185
|
-
.duration(400)
|
|
25186
|
-
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
24965
|
+
const buttonWrapperClass = (button) => {
|
|
24966
|
+
return {
|
|
24967
|
+
[`picker-toolbar-${button.role}`]: button.role !== undefined,
|
|
24968
|
+
'picker-toolbar-button': true,
|
|
24969
|
+
};
|
|
25187
24970
|
};
|
|
25188
|
-
|
|
25189
|
-
|
|
25190
|
-
* iOS Picker Leave Animation
|
|
25191
|
-
*/
|
|
25192
|
-
const iosLeaveAnimation$2 = (baseEl) => {
|
|
25193
|
-
const baseAnimation = createAnimation();
|
|
25194
|
-
const backdropAnimation = createAnimation();
|
|
25195
|
-
const wrapperAnimation = createAnimation();
|
|
25196
|
-
backdropAnimation
|
|
25197
|
-
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
25198
|
-
.fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
|
|
25199
|
-
wrapperAnimation
|
|
25200
|
-
.addElement(baseEl.querySelector('.picker-wrapper'))
|
|
25201
|
-
.fromTo('transform', 'translateY(0%)', 'translateY(100%)');
|
|
25202
|
-
return baseAnimation
|
|
25203
|
-
.addElement(baseEl)
|
|
25204
|
-
.easing('cubic-bezier(.36,.66,.04,1)')
|
|
25205
|
-
.duration(400)
|
|
25206
|
-
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
24971
|
+
const buttonClass$1 = (button) => {
|
|
24972
|
+
return Object.assign({ 'picker-button': true, 'ion-activatable': true }, getClassMap(button.cssClass));
|
|
25207
24973
|
};
|
|
25208
24974
|
|
|
25209
|
-
const
|
|
24975
|
+
const pickerColumnIosCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-transform-origin:center center;transform-origin:center center;height:46px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}:host-context([dir=rtl]) .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}";
|
|
25210
24976
|
|
|
25211
|
-
const
|
|
24977
|
+
const pickerColumnMdCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #3880ff)}";
|
|
25212
24978
|
|
|
25213
|
-
// TODO(FW-2832): types
|
|
25214
24979
|
/**
|
|
25215
|
-
* @
|
|
24980
|
+
* @internal
|
|
25216
24981
|
*/
|
|
25217
|
-
class
|
|
24982
|
+
class PickerColumnCmp {
|
|
25218
24983
|
constructor(hostRef) {
|
|
25219
24984
|
registerInstance(this, hostRef);
|
|
25220
|
-
this.
|
|
25221
|
-
this.
|
|
25222
|
-
this.
|
|
25223
|
-
this.
|
|
25224
|
-
this.
|
|
25225
|
-
this.
|
|
25226
|
-
this.
|
|
25227
|
-
|
|
25228
|
-
|
|
25229
|
-
|
|
25230
|
-
this.
|
|
25231
|
-
|
|
25232
|
-
|
|
25233
|
-
|
|
25234
|
-
this.
|
|
25235
|
-
|
|
25236
|
-
|
|
25237
|
-
|
|
25238
|
-
|
|
24985
|
+
this.ionPickerColChange = createEvent(this, "ionPickerColChange", 7);
|
|
24986
|
+
this.optHeight = 0;
|
|
24987
|
+
this.rotateFactor = 0;
|
|
24988
|
+
this.scaleFactor = 1;
|
|
24989
|
+
this.velocity = 0;
|
|
24990
|
+
this.y = 0;
|
|
24991
|
+
this.noAnimate = true;
|
|
24992
|
+
// `colDidChange` is a flag that gets set when the column is changed
|
|
24993
|
+
// dynamically. When this flag is set, the column will refresh
|
|
24994
|
+
// after the component re-renders to incorporate the new column data.
|
|
24995
|
+
// This is necessary because `this.refresh` queries for the option elements,
|
|
24996
|
+
// so it needs to wait for the latest elements to be available in the DOM.
|
|
24997
|
+
// Ex: column is created with 3 options. User updates the column data
|
|
24998
|
+
// to have 5 options. The column will still think it only has 3 options.
|
|
24999
|
+
this.colDidChange = false;
|
|
25000
|
+
this.col = undefined;
|
|
25001
|
+
}
|
|
25002
|
+
colChanged() {
|
|
25003
|
+
this.colDidChange = true;
|
|
25004
|
+
}
|
|
25005
|
+
async connectedCallback() {
|
|
25006
|
+
let pickerRotateFactor = 0;
|
|
25007
|
+
let pickerScaleFactor = 0.81;
|
|
25008
|
+
const mode = getIonMode$1(this);
|
|
25009
|
+
if (mode === 'ios') {
|
|
25010
|
+
pickerRotateFactor = -0.46;
|
|
25011
|
+
pickerScaleFactor = 1;
|
|
25012
|
+
}
|
|
25013
|
+
this.rotateFactor = pickerRotateFactor;
|
|
25014
|
+
this.scaleFactor = pickerScaleFactor;
|
|
25015
|
+
this.gesture = (await Promise.resolve().then(function () { return index; })).createGesture({
|
|
25016
|
+
el: this.el,
|
|
25017
|
+
gestureName: 'picker-swipe',
|
|
25018
|
+
gesturePriority: 100,
|
|
25019
|
+
threshold: 0,
|
|
25020
|
+
passive: false,
|
|
25021
|
+
onStart: (ev) => this.onStart(ev),
|
|
25022
|
+
onMove: (ev) => this.onMove(ev),
|
|
25023
|
+
onEnd: (ev) => this.onEnd(ev),
|
|
25024
|
+
});
|
|
25025
|
+
this.gesture.enable();
|
|
25026
|
+
// Options have not been initialized yet
|
|
25027
|
+
// Animation must be disabled through the `noAnimate` flag
|
|
25028
|
+
// Otherwise, the options will render
|
|
25029
|
+
// at the top of the column and transition down
|
|
25030
|
+
this.tmrId = setTimeout(() => {
|
|
25031
|
+
this.noAnimate = false;
|
|
25032
|
+
// After initialization, `refresh()` will be called
|
|
25033
|
+
// At this point, animation will be enabled. The options will
|
|
25034
|
+
// animate as they are being selected.
|
|
25035
|
+
this.refresh(true);
|
|
25036
|
+
}, 250);
|
|
25037
|
+
}
|
|
25038
|
+
componentDidLoad() {
|
|
25039
|
+
this.onDomChange();
|
|
25040
|
+
}
|
|
25041
|
+
componentDidUpdate() {
|
|
25042
|
+
// Options may have changed since last update.
|
|
25043
|
+
if (this.colDidChange) {
|
|
25044
|
+
// Animation must be disabled through the `onDomChange` parameter.
|
|
25045
|
+
// Otherwise, the recently added options will render
|
|
25046
|
+
// at the top of the column and transition down
|
|
25047
|
+
this.onDomChange(true, false);
|
|
25048
|
+
this.colDidChange = false;
|
|
25049
|
+
}
|
|
25050
|
+
}
|
|
25051
|
+
disconnectedCallback() {
|
|
25052
|
+
if (this.rafId !== undefined)
|
|
25053
|
+
cancelAnimationFrame(this.rafId);
|
|
25054
|
+
if (this.tmrId)
|
|
25055
|
+
clearTimeout(this.tmrId);
|
|
25056
|
+
if (this.gesture) {
|
|
25057
|
+
this.gesture.destroy();
|
|
25058
|
+
this.gesture = undefined;
|
|
25059
|
+
}
|
|
25060
|
+
}
|
|
25061
|
+
emitColChange() {
|
|
25062
|
+
this.ionPickerColChange.emit(this.col);
|
|
25063
|
+
}
|
|
25064
|
+
setSelected(selectedIndex, duration) {
|
|
25065
|
+
// if there is a selected index, then figure out it's y position
|
|
25066
|
+
// if there isn't a selected index, then just use the top y position
|
|
25067
|
+
const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
|
|
25068
|
+
this.velocity = 0;
|
|
25069
|
+
// set what y position we're at
|
|
25070
|
+
if (this.rafId !== undefined)
|
|
25071
|
+
cancelAnimationFrame(this.rafId);
|
|
25072
|
+
this.update(y, duration, true);
|
|
25073
|
+
this.emitColChange();
|
|
25074
|
+
}
|
|
25075
|
+
update(y, duration, saveY) {
|
|
25076
|
+
if (!this.optsEl) {
|
|
25077
|
+
return;
|
|
25078
|
+
}
|
|
25079
|
+
// ensure we've got a good round number :)
|
|
25080
|
+
let translateY = 0;
|
|
25081
|
+
let translateZ = 0;
|
|
25082
|
+
const { col, rotateFactor } = this;
|
|
25083
|
+
const prevSelected = col.selectedIndex;
|
|
25084
|
+
const selectedIndex = (col.selectedIndex = this.indexForY(-y));
|
|
25085
|
+
const durationStr = duration === 0 ? '' : duration + 'ms';
|
|
25086
|
+
const scaleStr = `scale(${this.scaleFactor})`;
|
|
25087
|
+
const children = this.optsEl.children;
|
|
25088
|
+
for (let i = 0; i < children.length; i++) {
|
|
25089
|
+
const button = children[i];
|
|
25090
|
+
const opt = col.options[i];
|
|
25091
|
+
const optOffset = i * this.optHeight + y;
|
|
25092
|
+
let transform = '';
|
|
25093
|
+
if (rotateFactor !== 0) {
|
|
25094
|
+
const rotateX = optOffset * rotateFactor;
|
|
25095
|
+
if (Math.abs(rotateX) <= 90) {
|
|
25096
|
+
translateY = 0;
|
|
25097
|
+
translateZ = 90;
|
|
25098
|
+
transform = `rotateX(${rotateX}deg) `;
|
|
25099
|
+
}
|
|
25100
|
+
else {
|
|
25101
|
+
translateY = -9999;
|
|
25102
|
+
}
|
|
25103
|
+
}
|
|
25104
|
+
else {
|
|
25105
|
+
translateZ = 0;
|
|
25106
|
+
translateY = optOffset;
|
|
25107
|
+
}
|
|
25108
|
+
const selected = selectedIndex === i;
|
|
25109
|
+
transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
|
|
25110
|
+
if (this.scaleFactor !== 1 && !selected) {
|
|
25111
|
+
transform += scaleStr;
|
|
25112
|
+
}
|
|
25113
|
+
// Update transition duration
|
|
25114
|
+
if (this.noAnimate) {
|
|
25115
|
+
opt.duration = 0;
|
|
25116
|
+
button.style.transitionDuration = '';
|
|
25117
|
+
}
|
|
25118
|
+
else if (duration !== opt.duration) {
|
|
25119
|
+
opt.duration = duration;
|
|
25120
|
+
button.style.transitionDuration = durationStr;
|
|
25121
|
+
}
|
|
25122
|
+
// Update transform
|
|
25123
|
+
if (transform !== opt.transform) {
|
|
25124
|
+
opt.transform = transform;
|
|
25125
|
+
}
|
|
25126
|
+
button.style.transform = transform;
|
|
25127
|
+
/**
|
|
25128
|
+
* Ensure that the select column
|
|
25129
|
+
* item has the selected class
|
|
25130
|
+
*/
|
|
25131
|
+
opt.selected = selected;
|
|
25132
|
+
if (selected) {
|
|
25133
|
+
button.classList.add(PICKER_OPT_SELECTED);
|
|
25134
|
+
}
|
|
25135
|
+
else {
|
|
25136
|
+
button.classList.remove(PICKER_OPT_SELECTED);
|
|
25239
25137
|
}
|
|
25240
|
-
};
|
|
25241
|
-
this.presented = false;
|
|
25242
|
-
this.overlayIndex = undefined;
|
|
25243
|
-
this.delegate = undefined;
|
|
25244
|
-
this.hasController = false;
|
|
25245
|
-
this.keyboardClose = true;
|
|
25246
|
-
this.enterAnimation = undefined;
|
|
25247
|
-
this.leaveAnimation = undefined;
|
|
25248
|
-
this.buttons = [];
|
|
25249
|
-
this.columns = [];
|
|
25250
|
-
this.cssClass = undefined;
|
|
25251
|
-
this.duration = 0;
|
|
25252
|
-
this.showBackdrop = true;
|
|
25253
|
-
this.backdropDismiss = true;
|
|
25254
|
-
this.animated = true;
|
|
25255
|
-
this.htmlAttributes = undefined;
|
|
25256
|
-
this.isOpen = false;
|
|
25257
|
-
this.trigger = undefined;
|
|
25258
|
-
}
|
|
25259
|
-
onIsOpenChange(newValue, oldValue) {
|
|
25260
|
-
if (newValue === true && oldValue === false) {
|
|
25261
|
-
this.present();
|
|
25262
25138
|
}
|
|
25263
|
-
|
|
25264
|
-
|
|
25139
|
+
this.col.prevSelected = prevSelected;
|
|
25140
|
+
if (saveY) {
|
|
25141
|
+
this.y = y;
|
|
25265
25142
|
}
|
|
25266
|
-
|
|
25267
|
-
|
|
25268
|
-
|
|
25269
|
-
|
|
25270
|
-
triggerController.addClickListener(el, trigger);
|
|
25143
|
+
if (this.lastIndex !== selectedIndex) {
|
|
25144
|
+
// have not set a last index yet
|
|
25145
|
+
hapticSelectionChanged();
|
|
25146
|
+
this.lastIndex = selectedIndex;
|
|
25271
25147
|
}
|
|
25272
25148
|
}
|
|
25273
|
-
|
|
25274
|
-
|
|
25275
|
-
|
|
25276
|
-
|
|
25277
|
-
|
|
25278
|
-
|
|
25149
|
+
decelerate() {
|
|
25150
|
+
if (this.velocity !== 0) {
|
|
25151
|
+
// still decelerating
|
|
25152
|
+
this.velocity *= DECELERATION_FRICTION;
|
|
25153
|
+
// do not let it go slower than a velocity of 1
|
|
25154
|
+
this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
|
|
25155
|
+
let y = this.y + this.velocity;
|
|
25156
|
+
if (y > this.minY) {
|
|
25157
|
+
// whoops, it's trying to scroll up farther than the options we have!
|
|
25158
|
+
y = this.minY;
|
|
25159
|
+
this.velocity = 0;
|
|
25160
|
+
}
|
|
25161
|
+
else if (y < this.maxY) {
|
|
25162
|
+
// gahh, it's trying to scroll down farther than we can!
|
|
25163
|
+
y = this.maxY;
|
|
25164
|
+
this.velocity = 0;
|
|
25165
|
+
}
|
|
25166
|
+
this.update(y, 0, true);
|
|
25167
|
+
const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1;
|
|
25168
|
+
if (notLockedIn) {
|
|
25169
|
+
// isn't locked in yet, keep decelerating until it is
|
|
25170
|
+
this.rafId = requestAnimationFrame(() => this.decelerate());
|
|
25171
|
+
}
|
|
25172
|
+
else {
|
|
25173
|
+
this.velocity = 0;
|
|
25174
|
+
this.emitColChange();
|
|
25175
|
+
hapticSelectionEnd();
|
|
25176
|
+
}
|
|
25177
|
+
}
|
|
25178
|
+
else if (this.y % this.optHeight !== 0) {
|
|
25179
|
+
// needs to still get locked into a position so options line up
|
|
25180
|
+
const currentPos = Math.abs(this.y % this.optHeight);
|
|
25181
|
+
// create a velocity in the direction it needs to scroll
|
|
25182
|
+
this.velocity = currentPos > this.optHeight / 2 ? 1 : -1;
|
|
25183
|
+
this.decelerate();
|
|
25184
|
+
}
|
|
25279
25185
|
}
|
|
25280
|
-
|
|
25281
|
-
|
|
25186
|
+
indexForY(y) {
|
|
25187
|
+
return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
|
|
25282
25188
|
}
|
|
25283
|
-
|
|
25284
|
-
|
|
25285
|
-
|
|
25286
|
-
|
|
25287
|
-
|
|
25288
|
-
|
|
25289
|
-
if (this.isOpen === true) {
|
|
25290
|
-
raf(() => this.present());
|
|
25189
|
+
onStart(detail) {
|
|
25190
|
+
// We have to prevent default in order to block scrolling under the picker
|
|
25191
|
+
// but we DO NOT have to stop propagation, since we still want
|
|
25192
|
+
// some "click" events to capture
|
|
25193
|
+
if (detail.event.cancelable) {
|
|
25194
|
+
detail.event.preventDefault();
|
|
25291
25195
|
}
|
|
25292
|
-
|
|
25293
|
-
|
|
25294
|
-
|
|
25295
|
-
|
|
25296
|
-
|
|
25297
|
-
const
|
|
25298
|
-
|
|
25299
|
-
|
|
25300
|
-
|
|
25301
|
-
|
|
25196
|
+
detail.event.stopPropagation();
|
|
25197
|
+
hapticSelectionStart();
|
|
25198
|
+
// reset everything
|
|
25199
|
+
if (this.rafId !== undefined)
|
|
25200
|
+
cancelAnimationFrame(this.rafId);
|
|
25201
|
+
const options = this.col.options;
|
|
25202
|
+
let minY = options.length - 1;
|
|
25203
|
+
let maxY = 0;
|
|
25204
|
+
for (let i = 0; i < options.length; i++) {
|
|
25205
|
+
if (!options[i].disabled) {
|
|
25206
|
+
minY = Math.min(minY, i);
|
|
25207
|
+
maxY = Math.max(maxY, i);
|
|
25208
|
+
}
|
|
25302
25209
|
}
|
|
25303
|
-
|
|
25210
|
+
this.minY = -(minY * this.optHeight);
|
|
25211
|
+
this.maxY = -(maxY * this.optHeight);
|
|
25304
25212
|
}
|
|
25305
|
-
|
|
25306
|
-
|
|
25307
|
-
|
|
25308
|
-
* @param data Any data to emit in the dismiss events.
|
|
25309
|
-
* @param role The role of the element that is dismissing the picker.
|
|
25310
|
-
* This can be useful in a button handler for determining which button was
|
|
25311
|
-
* clicked to dismiss the picker.
|
|
25312
|
-
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
|
25313
|
-
*/
|
|
25314
|
-
async dismiss(data, role) {
|
|
25315
|
-
const unlock = await this.lockController.lock();
|
|
25316
|
-
if (this.durationTimeout) {
|
|
25317
|
-
clearTimeout(this.durationTimeout);
|
|
25213
|
+
onMove(detail) {
|
|
25214
|
+
if (detail.event.cancelable) {
|
|
25215
|
+
detail.event.preventDefault();
|
|
25318
25216
|
}
|
|
25319
|
-
|
|
25320
|
-
|
|
25321
|
-
|
|
25217
|
+
detail.event.stopPropagation();
|
|
25218
|
+
// update the scroll position relative to pointer start position
|
|
25219
|
+
let y = this.y + detail.deltaY;
|
|
25220
|
+
if (y > this.minY) {
|
|
25221
|
+
// scrolling up higher than scroll area
|
|
25222
|
+
y = Math.pow(y, 0.8);
|
|
25223
|
+
this.bounceFrom = y;
|
|
25322
25224
|
}
|
|
25323
|
-
|
|
25324
|
-
|
|
25325
|
-
|
|
25326
|
-
|
|
25327
|
-
|
|
25328
|
-
|
|
25329
|
-
|
|
25330
|
-
|
|
25331
|
-
|
|
25332
|
-
/**
|
|
25333
|
-
* Returns a promise that resolves when the picker will dismiss.
|
|
25334
|
-
*/
|
|
25335
|
-
onWillDismiss() {
|
|
25336
|
-
return eventMethod(this.el, 'ionPickerWillDismiss');
|
|
25225
|
+
else if (y < this.maxY) {
|
|
25226
|
+
// scrolling down below scroll area
|
|
25227
|
+
y += Math.pow(this.maxY - y, 0.9);
|
|
25228
|
+
this.bounceFrom = y;
|
|
25229
|
+
}
|
|
25230
|
+
else {
|
|
25231
|
+
this.bounceFrom = 0;
|
|
25232
|
+
}
|
|
25233
|
+
this.update(y, 0, false);
|
|
25337
25234
|
}
|
|
25338
|
-
|
|
25339
|
-
|
|
25340
|
-
|
|
25341
|
-
|
|
25342
|
-
|
|
25343
|
-
|
|
25344
|
-
|
|
25235
|
+
onEnd(detail) {
|
|
25236
|
+
if (this.bounceFrom > 0) {
|
|
25237
|
+
// bounce back up
|
|
25238
|
+
this.update(this.minY, 100, true);
|
|
25239
|
+
this.emitColChange();
|
|
25240
|
+
return;
|
|
25241
|
+
}
|
|
25242
|
+
else if (this.bounceFrom < 0) {
|
|
25243
|
+
// bounce back down
|
|
25244
|
+
this.update(this.maxY, 100, true);
|
|
25245
|
+
this.emitColChange();
|
|
25246
|
+
return;
|
|
25247
|
+
}
|
|
25248
|
+
this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
|
|
25249
|
+
if (this.velocity === 0 && detail.deltaY === 0) {
|
|
25250
|
+
const opt = detail.event.target.closest('.picker-opt');
|
|
25251
|
+
if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) {
|
|
25252
|
+
this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
|
|
25253
|
+
}
|
|
25254
|
+
}
|
|
25255
|
+
else {
|
|
25256
|
+
this.y += detail.deltaY;
|
|
25257
|
+
if (Math.abs(detail.velocityY) < 0.05) {
|
|
25258
|
+
const isScrollingUp = detail.deltaY > 0;
|
|
25259
|
+
const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
|
|
25260
|
+
if (isScrollingUp && optHeightFraction > 0.5) {
|
|
25261
|
+
this.velocity = Math.abs(this.velocity) * -1;
|
|
25262
|
+
}
|
|
25263
|
+
else if (!isScrollingUp && optHeightFraction <= 0.5) {
|
|
25264
|
+
this.velocity = Math.abs(this.velocity);
|
|
25265
|
+
}
|
|
25266
|
+
}
|
|
25267
|
+
this.decelerate();
|
|
25268
|
+
}
|
|
25345
25269
|
}
|
|
25346
|
-
|
|
25347
|
-
|
|
25348
|
-
|
|
25349
|
-
|
|
25270
|
+
refresh(forceRefresh, animated) {
|
|
25271
|
+
var _a;
|
|
25272
|
+
let min = this.col.options.length - 1;
|
|
25273
|
+
let max = 0;
|
|
25274
|
+
const options = this.col.options;
|
|
25275
|
+
for (let i = 0; i < options.length; i++) {
|
|
25276
|
+
if (!options[i].disabled) {
|
|
25277
|
+
min = Math.min(min, i);
|
|
25278
|
+
max = Math.max(max, i);
|
|
25279
|
+
}
|
|
25280
|
+
}
|
|
25281
|
+
/**
|
|
25282
|
+
* Only update selected value if column has a
|
|
25283
|
+
* velocity of 0. If it does not, then the
|
|
25284
|
+
* column is animating might land on
|
|
25285
|
+
* a value different than the value at
|
|
25286
|
+
* selectedIndex
|
|
25287
|
+
*/
|
|
25288
|
+
if (this.velocity !== 0) {
|
|
25289
|
+
return;
|
|
25350
25290
|
}
|
|
25351
|
-
const
|
|
25352
|
-
if (
|
|
25353
|
-
|
|
25291
|
+
const selectedIndex = clamp(min, (_a = this.col.selectedIndex) !== null && _a !== void 0 ? _a : 0, max);
|
|
25292
|
+
if (this.col.prevSelected !== selectedIndex || forceRefresh) {
|
|
25293
|
+
const y = selectedIndex * this.optHeight * -1;
|
|
25294
|
+
const duration = animated ? TRANSITION_DURATION : 0;
|
|
25295
|
+
this.velocity = 0;
|
|
25296
|
+
this.update(y, duration, true);
|
|
25354
25297
|
}
|
|
25355
|
-
return Promise.resolve();
|
|
25356
25298
|
}
|
|
25357
|
-
|
|
25358
|
-
|
|
25359
|
-
|
|
25360
|
-
//
|
|
25361
|
-
|
|
25362
|
-
|
|
25363
|
-
// if the return value of the handler is false then do not dismiss
|
|
25364
|
-
return false;
|
|
25365
|
-
}
|
|
25299
|
+
onDomChange(forceRefresh, animated) {
|
|
25300
|
+
const colEl = this.optsEl;
|
|
25301
|
+
if (colEl) {
|
|
25302
|
+
// DOM READ
|
|
25303
|
+
// We perfom a DOM read over a rendered item, this needs to happen after the first render or after the the column has changed
|
|
25304
|
+
this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
|
|
25366
25305
|
}
|
|
25367
|
-
|
|
25368
|
-
}
|
|
25369
|
-
getSelected() {
|
|
25370
|
-
const selected = {};
|
|
25371
|
-
this.columns.forEach((col, index) => {
|
|
25372
|
-
const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined;
|
|
25373
|
-
selected[col.name] = {
|
|
25374
|
-
text: selectedColumn ? selectedColumn.text : undefined,
|
|
25375
|
-
value: selectedColumn ? selectedColumn.value : undefined,
|
|
25376
|
-
columnIndex: index,
|
|
25377
|
-
};
|
|
25378
|
-
});
|
|
25379
|
-
return selected;
|
|
25306
|
+
this.refresh(forceRefresh, animated);
|
|
25380
25307
|
}
|
|
25381
25308
|
render() {
|
|
25382
|
-
const
|
|
25309
|
+
const col = this.col;
|
|
25383
25310
|
const mode = getIonMode$1(this);
|
|
25384
|
-
return (hAsync(Host, Object.assign({
|
|
25385
|
-
|
|
25386
|
-
}, class:
|
|
25387
|
-
// Used internally for styling
|
|
25388
|
-
[`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { tabindex: "0" }), hAsync("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { class: "picker-columns" }, hAsync("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { class: "picker-below-highlight" }))), hAsync("div", { tabindex: "0" })));
|
|
25311
|
+
return (hAsync(Host, { class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
|
|
25312
|
+
'max-width': this.col.columnWidth,
|
|
25313
|
+
} }, col.prefix && (hAsync("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
|
|
25389
25314
|
}
|
|
25390
25315
|
get el() { return getElement(this); }
|
|
25391
25316
|
static get watchers() { return {
|
|
25392
|
-
"
|
|
25393
|
-
"trigger": ["triggerChanged"]
|
|
25317
|
+
"col": ["colChanged"]
|
|
25394
25318
|
}; }
|
|
25395
25319
|
static get style() { return {
|
|
25396
|
-
ios:
|
|
25397
|
-
md:
|
|
25320
|
+
ios: pickerColumnIosCss,
|
|
25321
|
+
md: pickerColumnMdCss
|
|
25398
25322
|
}; }
|
|
25399
25323
|
static get cmpMeta() { return {
|
|
25400
|
-
"$flags$":
|
|
25401
|
-
"$tagName$": "ion-picker-
|
|
25324
|
+
"$flags$": 32,
|
|
25325
|
+
"$tagName$": "ion-picker-column",
|
|
25402
25326
|
"$members$": {
|
|
25403
|
-
"
|
|
25404
|
-
"delegate": [16],
|
|
25405
|
-
"hasController": [4, "has-controller"],
|
|
25406
|
-
"keyboardClose": [4, "keyboard-close"],
|
|
25407
|
-
"enterAnimation": [16],
|
|
25408
|
-
"leaveAnimation": [16],
|
|
25409
|
-
"buttons": [16],
|
|
25410
|
-
"columns": [16],
|
|
25411
|
-
"cssClass": [1, "css-class"],
|
|
25412
|
-
"duration": [2],
|
|
25413
|
-
"showBackdrop": [4, "show-backdrop"],
|
|
25414
|
-
"backdropDismiss": [4, "backdrop-dismiss"],
|
|
25415
|
-
"animated": [4],
|
|
25416
|
-
"htmlAttributes": [16],
|
|
25417
|
-
"isOpen": [4, "is-open"],
|
|
25418
|
-
"trigger": [1],
|
|
25419
|
-
"presented": [32],
|
|
25420
|
-
"present": [64],
|
|
25421
|
-
"dismiss": [64],
|
|
25422
|
-
"onDidDismiss": [64],
|
|
25423
|
-
"onWillDismiss": [64],
|
|
25424
|
-
"getColumn": [64]
|
|
25327
|
+
"col": [16]
|
|
25425
25328
|
},
|
|
25426
25329
|
"$listeners$": undefined,
|
|
25427
25330
|
"$lazyBundleId$": "-",
|
|
25428
25331
|
"$attrsToReflect$": []
|
|
25429
25332
|
}; }
|
|
25430
25333
|
}
|
|
25431
|
-
const
|
|
25432
|
-
|
|
25433
|
-
|
|
25434
|
-
|
|
25435
|
-
};
|
|
25436
|
-
};
|
|
25437
|
-
const buttonClass$1 = (button) => {
|
|
25438
|
-
return Object.assign({ 'picker-button': true, 'ion-activatable': true }, getClassMap(button.cssClass));
|
|
25439
|
-
};
|
|
25334
|
+
const PICKER_OPT_SELECTED = 'picker-opt-selected';
|
|
25335
|
+
const DECELERATION_FRICTION = 0.97;
|
|
25336
|
+
const MAX_PICKER_SPEED = 90;
|
|
25337
|
+
const TRANSITION_DURATION = 150;
|
|
25440
25338
|
|
|
25441
|
-
const
|
|
25339
|
+
const pickerColumnInternalIosCss = "/*!@:host*/.sc-ion-picker-column-internal-ios-h{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}/*!@:host::-webkit-scrollbar*/.sc-ion-picker-column-internal-ios-h::-webkit-scrollbar{display:none}/*!@:host .picker-item*/.sc-ion-picker-column-internal-ios-h .picker-item.sc-ion-picker-column-internal-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}/*!@:host .picker-item-empty,\n:host .picker-item[disabled]*/.sc-ion-picker-column-internal-ios-h .picker-item-empty.sc-ion-picker-column-internal-ios,.sc-ion-picker-column-internal-ios-h .picker-item[disabled].sc-ion-picker-column-internal-ios{cursor:default}/*!@:host .picker-item-empty,\n:host(:not([disabled])) .picker-item[disabled]*/.sc-ion-picker-column-internal-ios-h .picker-item-empty.sc-ion-picker-column-internal-ios,.sc-ion-picker-column-internal-ios-h:not([disabled]) .picker-item[disabled].sc-ion-picker-column-internal-ios{scroll-snap-align:none}/*!@:host([disabled])*/[disabled].sc-ion-picker-column-internal-ios-h{overflow-y:hidden}/*!@:host .picker-item[disabled]*/.sc-ion-picker-column-internal-ios-h .picker-item[disabled].sc-ion-picker-column-internal-ios{opacity:0.4}/*!@:host(.picker-column-active) .picker-item.picker-item-active*/.picker-column-active.sc-ion-picker-column-internal-ios-h .picker-item.picker-item-active.sc-ion-picker-column-internal-ios{color:var(--ion-color-base)}@media (any-hover: hover){/*!@:host(:focus)*/.sc-ion-picker-column-internal-ios-h:focus{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
|
|
25340
|
+
|
|
25341
|
+
const pickerColumnInternalMdCss = "/*!@:host*/.sc-ion-picker-column-internal-md-h{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;height:200px;outline:none;font-size:22px;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none;text-align:center}/*!@:host::-webkit-scrollbar*/.sc-ion-picker-column-internal-md-h::-webkit-scrollbar{display:none}/*!@:host .picker-item*/.sc-ion-picker-column-internal-md-h .picker-item.sc-ion-picker-column-internal-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden;scroll-snap-align:center}/*!@:host .picker-item-empty,\n:host .picker-item[disabled]*/.sc-ion-picker-column-internal-md-h .picker-item-empty.sc-ion-picker-column-internal-md,.sc-ion-picker-column-internal-md-h .picker-item[disabled].sc-ion-picker-column-internal-md{cursor:default}/*!@:host .picker-item-empty,\n:host(:not([disabled])) .picker-item[disabled]*/.sc-ion-picker-column-internal-md-h .picker-item-empty.sc-ion-picker-column-internal-md,.sc-ion-picker-column-internal-md-h:not([disabled]) .picker-item[disabled].sc-ion-picker-column-internal-md{scroll-snap-align:none}/*!@:host([disabled])*/[disabled].sc-ion-picker-column-internal-md-h{overflow-y:hidden}/*!@:host .picker-item[disabled]*/.sc-ion-picker-column-internal-md-h .picker-item[disabled].sc-ion-picker-column-internal-md{opacity:0.4}/*!@:host(.picker-column-active) .picker-item.picker-item-active*/.picker-column-active.sc-ion-picker-column-internal-md-h .picker-item.picker-item-active.sc-ion-picker-column-internal-md{color:var(--ion-color-base)}@media (any-hover: hover){/*!@:host(:focus)*/.sc-ion-picker-column-internal-md-h:focus{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}/*!@:host .picker-item-active*/.sc-ion-picker-column-internal-md-h .picker-item-active.sc-ion-picker-column-internal-md{color:var(--ion-color-base)}";
|
|
25442
25342
|
|
|
25443
25343
|
/**
|
|
25444
25344
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
25445
|
-
*
|
|
25446
|
-
* @slot prefix - Content to show on the left side of the picker options.
|
|
25447
|
-
* @slot suffix - Content to show on the right side of the picker options.
|
|
25345
|
+
* @internal
|
|
25448
25346
|
*/
|
|
25449
|
-
class
|
|
25347
|
+
class PickerColumnInternal {
|
|
25450
25348
|
constructor(hostRef) {
|
|
25451
25349
|
registerInstance(this, hostRef);
|
|
25452
25350
|
this.ionChange = createEvent(this, "ionChange", 7);
|
|
@@ -25454,11 +25352,11 @@ class PickerColumn {
|
|
|
25454
25352
|
this.isColumnVisible = false;
|
|
25455
25353
|
this.canExitInputMode = true;
|
|
25456
25354
|
this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
|
|
25457
|
-
const {
|
|
25458
|
-
if (isColumnVisible
|
|
25355
|
+
const { el, isColumnVisible } = this;
|
|
25356
|
+
if (isColumnVisible) {
|
|
25459
25357
|
// (Vertical offset from parent) - (three empty picker rows) + (half the height of the target to ensure the scroll triggers)
|
|
25460
25358
|
const top = target.offsetTop - 3 * target.clientHeight + target.clientHeight / 2;
|
|
25461
|
-
if (
|
|
25359
|
+
if (el.scrollTop !== top) {
|
|
25462
25360
|
/**
|
|
25463
25361
|
* Setting this flag prevents input
|
|
25464
25362
|
* mode from exiting in the picker column's
|
|
@@ -25467,7 +25365,7 @@ class PickerColumn {
|
|
|
25467
25365
|
* of these can cause a scroll to occur.
|
|
25468
25366
|
*/
|
|
25469
25367
|
this.canExitInputMode = canExitInputMode;
|
|
25470
|
-
|
|
25368
|
+
el.scroll({
|
|
25471
25369
|
top,
|
|
25472
25370
|
left: 0,
|
|
25473
25371
|
behavior: smooth ? 'smooth' : undefined,
|
|
@@ -25478,9 +25376,11 @@ class PickerColumn {
|
|
|
25478
25376
|
this.setPickerItemActiveState = (item, isActive) => {
|
|
25479
25377
|
if (isActive) {
|
|
25480
25378
|
item.classList.add(PICKER_ITEM_ACTIVE_CLASS);
|
|
25379
|
+
item.part.add(PICKER_ITEM_ACTIVE_PART);
|
|
25481
25380
|
}
|
|
25482
25381
|
else {
|
|
25483
25382
|
item.classList.remove(PICKER_ITEM_ACTIVE_CLASS);
|
|
25383
|
+
item.part.remove(PICKER_ITEM_ACTIVE_PART);
|
|
25484
25384
|
}
|
|
25485
25385
|
};
|
|
25486
25386
|
/**
|
|
@@ -25534,13 +25434,11 @@ class PickerColumn {
|
|
|
25534
25434
|
* be disabled on Android.
|
|
25535
25435
|
*/
|
|
25536
25436
|
const enableHaptics = isPlatform('ios');
|
|
25537
|
-
const { el
|
|
25437
|
+
const { el } = this;
|
|
25538
25438
|
let timeout;
|
|
25539
25439
|
let activeEl = this.activeItem;
|
|
25540
25440
|
const scrollCallback = () => {
|
|
25541
25441
|
raf(() => {
|
|
25542
|
-
if (!scrollEl)
|
|
25543
|
-
return;
|
|
25544
25442
|
if (timeout) {
|
|
25545
25443
|
clearTimeout(timeout);
|
|
25546
25444
|
timeout = undefined;
|
|
@@ -25553,54 +25451,21 @@ class PickerColumn {
|
|
|
25553
25451
|
* Select item in the center of the column
|
|
25554
25452
|
* which is the month/year that we want to select
|
|
25555
25453
|
*/
|
|
25556
|
-
const bbox =
|
|
25454
|
+
const bbox = el.getBoundingClientRect();
|
|
25557
25455
|
const centerX = bbox.x + bbox.width / 2;
|
|
25558
25456
|
const centerY = bbox.y + bbox.height / 2;
|
|
25559
|
-
|
|
25560
|
-
|
|
25561
|
-
* This means that if an ion-backdrop is overlaying the
|
|
25562
|
-
* picker then the appropriate picker column option will
|
|
25563
|
-
* not be selected. To account for this, we use elementsFromPoint
|
|
25564
|
-
* and use an Array.find to find the appropriate column option
|
|
25565
|
-
* at that point.
|
|
25566
|
-
*
|
|
25567
|
-
* Additionally, the picker column could be used in the
|
|
25568
|
-
* Shadow DOM (i.e. in ion-datetime) so we need to make
|
|
25569
|
-
* sure we are choosing the correct host otherwise
|
|
25570
|
-
* the elements returns by elementsFromPoint will be
|
|
25571
|
-
* retargeted. To account for this, we check to see
|
|
25572
|
-
* if the picker column has a parent shadow root. If
|
|
25573
|
-
* so, we use that shadow root when doing elementsFromPoint.
|
|
25574
|
-
* Otherwise, we just use the document.
|
|
25575
|
-
*/
|
|
25576
|
-
const rootNode = el.getRootNode();
|
|
25577
|
-
const hasParentShadow = rootNode instanceof ShadowRoot;
|
|
25578
|
-
const referenceNode = hasParentShadow ? rootNode : doc;
|
|
25579
|
-
/**
|
|
25580
|
-
* If the reference node is undefined
|
|
25581
|
-
* then it's likely that doc is undefined
|
|
25582
|
-
* due to being in an SSR environment.
|
|
25583
|
-
*/
|
|
25584
|
-
if (referenceNode === undefined) {
|
|
25585
|
-
return;
|
|
25586
|
-
}
|
|
25587
|
-
const elementsAtPoint = referenceNode.elementsFromPoint(centerX, centerY);
|
|
25588
|
-
/**
|
|
25589
|
-
* elementsFromPoint can returns multiple elements
|
|
25590
|
-
* so find the relevant picker column option if one exists.
|
|
25591
|
-
*/
|
|
25592
|
-
const newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
|
|
25593
|
-
if (activeEl !== undefined) {
|
|
25457
|
+
const activeElement = el.shadowRoot.elementFromPoint(centerX, centerY);
|
|
25458
|
+
if (activeEl !== null) {
|
|
25594
25459
|
this.setPickerItemActiveState(activeEl, false);
|
|
25595
25460
|
}
|
|
25596
|
-
if (
|
|
25461
|
+
if (activeElement === null || activeElement.disabled) {
|
|
25597
25462
|
return;
|
|
25598
25463
|
}
|
|
25599
25464
|
/**
|
|
25600
25465
|
* If we are selecting a new value,
|
|
25601
25466
|
* we need to run haptics again.
|
|
25602
25467
|
*/
|
|
25603
|
-
if (
|
|
25468
|
+
if (activeElement !== activeEl) {
|
|
25604
25469
|
enableHaptics && hapticSelectionChanged();
|
|
25605
25470
|
if (this.canExitInputMode) {
|
|
25606
25471
|
/**
|
|
@@ -25617,8 +25482,8 @@ class PickerColumn {
|
|
|
25617
25482
|
this.exitInputMode();
|
|
25618
25483
|
}
|
|
25619
25484
|
}
|
|
25620
|
-
activeEl =
|
|
25621
|
-
this.setPickerItemActiveState(
|
|
25485
|
+
activeEl = activeElement;
|
|
25486
|
+
this.setPickerItemActiveState(activeElement, true);
|
|
25622
25487
|
timeout = setTimeout(() => {
|
|
25623
25488
|
this.isScrolling = false;
|
|
25624
25489
|
enableHaptics && hapticSelectionEnd();
|
|
@@ -25640,7 +25505,20 @@ class PickerColumn {
|
|
|
25640
25505
|
* case, we should exit input mode.
|
|
25641
25506
|
*/
|
|
25642
25507
|
this.canExitInputMode = true;
|
|
25643
|
-
|
|
25508
|
+
const dataIndex = activeElement.getAttribute('data-index');
|
|
25509
|
+
/**
|
|
25510
|
+
* If no value it is
|
|
25511
|
+
* possible we hit one of the
|
|
25512
|
+
* empty padding columns.
|
|
25513
|
+
*/
|
|
25514
|
+
if (dataIndex === null) {
|
|
25515
|
+
return;
|
|
25516
|
+
}
|
|
25517
|
+
const index = parseInt(dataIndex, 10);
|
|
25518
|
+
const selectedItem = this.items[index];
|
|
25519
|
+
if (selectedItem.value !== this.value) {
|
|
25520
|
+
this.setValue(selectedItem.value);
|
|
25521
|
+
}
|
|
25644
25522
|
}, 250);
|
|
25645
25523
|
});
|
|
25646
25524
|
};
|
|
@@ -25649,11 +25527,9 @@ class PickerColumn {
|
|
|
25649
25527
|
* does not fire when component is initially shown.
|
|
25650
25528
|
*/
|
|
25651
25529
|
raf(() => {
|
|
25652
|
-
|
|
25653
|
-
return;
|
|
25654
|
-
scrollEl.addEventListener('scroll', scrollCallback);
|
|
25530
|
+
el.addEventListener('scroll', scrollCallback);
|
|
25655
25531
|
this.destroyScrollListener = () => {
|
|
25656
|
-
|
|
25532
|
+
el.removeEventListener('scroll', scrollCallback);
|
|
25657
25533
|
};
|
|
25658
25534
|
});
|
|
25659
25535
|
};
|
|
@@ -25681,6 +25557,7 @@ class PickerColumn {
|
|
|
25681
25557
|
};
|
|
25682
25558
|
this.isActive = false;
|
|
25683
25559
|
this.disabled = false;
|
|
25560
|
+
this.items = [];
|
|
25684
25561
|
this.value = undefined;
|
|
25685
25562
|
this.color = 'primary';
|
|
25686
25563
|
this.numericInput = false;
|
|
@@ -25691,7 +25568,7 @@ class PickerColumn {
|
|
|
25691
25568
|
* Only scroll the active item into view when the picker column
|
|
25692
25569
|
* is actively visible to the user.
|
|
25693
25570
|
*/
|
|
25694
|
-
this.scrollActiveItemIntoView(
|
|
25571
|
+
this.scrollActiveItemIntoView();
|
|
25695
25572
|
}
|
|
25696
25573
|
}
|
|
25697
25574
|
/**
|
|
@@ -25729,574 +25606,597 @@ class PickerColumn {
|
|
|
25729
25606
|
}
|
|
25730
25607
|
};
|
|
25731
25608
|
new IntersectionObserver(visibleCallback, { threshold: 0.001 }).observe(this.el);
|
|
25732
|
-
const parentEl = (this.parentEl = this.el.closest('ion-picker'));
|
|
25609
|
+
const parentEl = (this.parentEl = this.el.closest('ion-picker-internal'));
|
|
25733
25610
|
if (parentEl !== null) {
|
|
25734
25611
|
// TODO(FW-2832): type
|
|
25735
25612
|
parentEl.addEventListener('ionInputModeChange', (ev) => this.inputModeChange(ev));
|
|
25736
25613
|
}
|
|
25737
25614
|
}
|
|
25738
25615
|
componentDidRender() {
|
|
25739
|
-
|
|
25740
|
-
|
|
25741
|
-
|
|
25742
|
-
|
|
25743
|
-
|
|
25744
|
-
* does not match the first item in the picker column, that means
|
|
25745
|
-
* the value is out of bounds. In this case, we assign the value to the
|
|
25746
|
-
* first item to match the scroll position of the column.
|
|
25747
|
-
*
|
|
25748
|
-
*/
|
|
25749
|
-
if (firstOption !== null && firstOption.value !== value) {
|
|
25750
|
-
this.setValue(firstOption.value);
|
|
25751
|
-
}
|
|
25752
|
-
}
|
|
25753
|
-
}
|
|
25754
|
-
/** @internal */
|
|
25755
|
-
async scrollActiveItemIntoView(smooth = false) {
|
|
25756
|
-
const activeEl = this.activeItem;
|
|
25757
|
-
if (activeEl) {
|
|
25758
|
-
this.centerPickerItemInView(activeEl, smooth, false);
|
|
25759
|
-
}
|
|
25760
|
-
}
|
|
25761
|
-
/**
|
|
25762
|
-
* Sets the value prop and fires the ionChange event.
|
|
25763
|
-
* This is used when we need to fire ionChange from
|
|
25764
|
-
* user-generated events that cannot be caught with normal
|
|
25765
|
-
* input/change event listeners.
|
|
25766
|
-
* @internal
|
|
25767
|
-
*/
|
|
25768
|
-
async setValue(value) {
|
|
25769
|
-
if (this.disabled === true || this.value === value) {
|
|
25770
|
-
return;
|
|
25771
|
-
}
|
|
25772
|
-
this.value = value;
|
|
25773
|
-
this.ionChange.emit({ value });
|
|
25774
|
-
}
|
|
25775
|
-
/**
|
|
25776
|
-
* Sets focus on the scrollable container within the picker column.
|
|
25777
|
-
* Use this method instead of the global `pickerColumn.focus()`.
|
|
25778
|
-
*/
|
|
25779
|
-
async setFocus() {
|
|
25780
|
-
if (this.scrollEl) {
|
|
25781
|
-
this.scrollEl.focus();
|
|
25782
|
-
}
|
|
25783
|
-
}
|
|
25784
|
-
get activeItem() {
|
|
25785
|
-
const { value } = this;
|
|
25786
|
-
const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
|
|
25787
|
-
return options.find((option) => {
|
|
25788
|
-
/**
|
|
25789
|
-
* If the whole picker column is disabled, the current value should appear active
|
|
25790
|
-
* If the current value item is specifically disabled, it should not appear active
|
|
25791
|
-
*/
|
|
25792
|
-
if (!this.disabled && option.disabled) {
|
|
25793
|
-
return false;
|
|
25616
|
+
var _a;
|
|
25617
|
+
const { activeItem, items, isColumnVisible, value } = this;
|
|
25618
|
+
if (isColumnVisible) {
|
|
25619
|
+
if (activeItem) {
|
|
25620
|
+
this.scrollActiveItemIntoView();
|
|
25794
25621
|
}
|
|
25795
|
-
|
|
25796
|
-
|
|
25797
|
-
|
|
25798
|
-
|
|
25799
|
-
|
|
25800
|
-
|
|
25801
|
-
|
|
25802
|
-
|
|
25803
|
-
[
|
|
25804
|
-
|
|
25805
|
-
|
|
25806
|
-
}) }, hAsync("slot", { name: "prefix" }), hAsync("div", { class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
|
|
25807
|
-
this.scrollEl = el;
|
|
25808
|
-
} }, hAsync("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", null), hAsync("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { name: "suffix" })));
|
|
25809
|
-
}
|
|
25810
|
-
get el() { return getElement(this); }
|
|
25811
|
-
static get watchers() { return {
|
|
25812
|
-
"value": ["valueChange"]
|
|
25813
|
-
}; }
|
|
25814
|
-
static get style() { return pickerColumnCss; }
|
|
25815
|
-
static get cmpMeta() { return {
|
|
25816
|
-
"$flags$": 9,
|
|
25817
|
-
"$tagName$": "ion-picker-column",
|
|
25818
|
-
"$members$": {
|
|
25819
|
-
"disabled": [4],
|
|
25820
|
-
"value": [1032],
|
|
25821
|
-
"color": [513],
|
|
25822
|
-
"numericInput": [4, "numeric-input"],
|
|
25823
|
-
"isActive": [32],
|
|
25824
|
-
"scrollActiveItemIntoView": [64],
|
|
25825
|
-
"setValue": [64],
|
|
25826
|
-
"setFocus": [64]
|
|
25827
|
-
},
|
|
25828
|
-
"$listeners$": undefined,
|
|
25829
|
-
"$lazyBundleId$": "-",
|
|
25830
|
-
"$attrsToReflect$": [["color", "color"]]
|
|
25831
|
-
}; }
|
|
25832
|
-
}
|
|
25833
|
-
const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
|
|
25834
|
-
|
|
25835
|
-
const pickerColumnIosCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-transform-origin:center center;transform-origin:center center;height:46px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}:host-context([dir=rtl]) .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}";
|
|
25836
|
-
|
|
25837
|
-
const pickerColumnMdCss = ".picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}@supports (inset-inline-start: 0){.picker-opt{inset-inline-start:0}}@supports not (inset-inline-start: 0){.picker-opt{left:0}:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}[dir=rtl] .picker-opt{left:unset;right:unset;right:0}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){left:unset;right:unset;right:0}}}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #3880ff)}";
|
|
25838
|
-
|
|
25839
|
-
/**
|
|
25840
|
-
* @internal
|
|
25841
|
-
*/
|
|
25842
|
-
class PickerColumnCmp {
|
|
25843
|
-
constructor(hostRef) {
|
|
25844
|
-
registerInstance(this, hostRef);
|
|
25845
|
-
this.ionPickerColChange = createEvent(this, "ionPickerColChange", 7);
|
|
25846
|
-
this.optHeight = 0;
|
|
25847
|
-
this.rotateFactor = 0;
|
|
25848
|
-
this.scaleFactor = 1;
|
|
25849
|
-
this.velocity = 0;
|
|
25850
|
-
this.y = 0;
|
|
25851
|
-
this.noAnimate = true;
|
|
25852
|
-
// `colDidChange` is a flag that gets set when the column is changed
|
|
25853
|
-
// dynamically. When this flag is set, the column will refresh
|
|
25854
|
-
// after the component re-renders to incorporate the new column data.
|
|
25855
|
-
// This is necessary because `this.refresh` queries for the option elements,
|
|
25856
|
-
// so it needs to wait for the latest elements to be available in the DOM.
|
|
25857
|
-
// Ex: column is created with 3 options. User updates the column data
|
|
25858
|
-
// to have 5 options. The column will still think it only has 3 options.
|
|
25859
|
-
this.colDidChange = false;
|
|
25860
|
-
this.col = undefined;
|
|
25861
|
-
}
|
|
25862
|
-
colChanged() {
|
|
25863
|
-
this.colDidChange = true;
|
|
25864
|
-
}
|
|
25865
|
-
async connectedCallback() {
|
|
25866
|
-
let pickerRotateFactor = 0;
|
|
25867
|
-
let pickerScaleFactor = 0.81;
|
|
25868
|
-
const mode = getIonMode$1(this);
|
|
25869
|
-
if (mode === 'ios') {
|
|
25870
|
-
pickerRotateFactor = -0.46;
|
|
25871
|
-
pickerScaleFactor = 1;
|
|
25872
|
-
}
|
|
25873
|
-
this.rotateFactor = pickerRotateFactor;
|
|
25874
|
-
this.scaleFactor = pickerScaleFactor;
|
|
25875
|
-
this.gesture = (await Promise.resolve().then(function () { return index; })).createGesture({
|
|
25876
|
-
el: this.el,
|
|
25877
|
-
gestureName: 'picker-swipe',
|
|
25878
|
-
gesturePriority: 100,
|
|
25879
|
-
threshold: 0,
|
|
25880
|
-
passive: false,
|
|
25881
|
-
onStart: (ev) => this.onStart(ev),
|
|
25882
|
-
onMove: (ev) => this.onMove(ev),
|
|
25883
|
-
onEnd: (ev) => this.onEnd(ev),
|
|
25884
|
-
});
|
|
25885
|
-
this.gesture.enable();
|
|
25886
|
-
// Options have not been initialized yet
|
|
25887
|
-
// Animation must be disabled through the `noAnimate` flag
|
|
25888
|
-
// Otherwise, the options will render
|
|
25889
|
-
// at the top of the column and transition down
|
|
25890
|
-
this.tmrId = setTimeout(() => {
|
|
25891
|
-
this.noAnimate = false;
|
|
25892
|
-
// After initialization, `refresh()` will be called
|
|
25893
|
-
// At this point, animation will be enabled. The options will
|
|
25894
|
-
// animate as they are being selected.
|
|
25895
|
-
this.refresh(true);
|
|
25896
|
-
}, 250);
|
|
25897
|
-
}
|
|
25898
|
-
componentDidLoad() {
|
|
25899
|
-
this.onDomChange();
|
|
25622
|
+
else if (((_a = items[0]) === null || _a === void 0 ? void 0 : _a.value) !== value) {
|
|
25623
|
+
/**
|
|
25624
|
+
* If the picker column does not have an active item and the current value
|
|
25625
|
+
* does not match the first item in the picker column, that means
|
|
25626
|
+
* the value is out of bounds. In this case, we assign the value to the
|
|
25627
|
+
* first item to match the scroll position of the column.
|
|
25628
|
+
*
|
|
25629
|
+
*/
|
|
25630
|
+
this.setValue(items[0].value);
|
|
25631
|
+
}
|
|
25632
|
+
}
|
|
25900
25633
|
}
|
|
25901
|
-
|
|
25902
|
-
|
|
25903
|
-
|
|
25904
|
-
|
|
25905
|
-
|
|
25906
|
-
// at the top of the column and transition down
|
|
25907
|
-
this.onDomChange(true, false);
|
|
25908
|
-
this.colDidChange = false;
|
|
25634
|
+
/** @internal */
|
|
25635
|
+
async scrollActiveItemIntoView() {
|
|
25636
|
+
const activeEl = this.activeItem;
|
|
25637
|
+
if (activeEl) {
|
|
25638
|
+
this.centerPickerItemInView(activeEl, false, false);
|
|
25909
25639
|
}
|
|
25910
25640
|
}
|
|
25911
|
-
|
|
25912
|
-
|
|
25913
|
-
|
|
25914
|
-
|
|
25915
|
-
|
|
25916
|
-
|
|
25917
|
-
|
|
25918
|
-
|
|
25641
|
+
/**
|
|
25642
|
+
* Sets the value prop and fires the ionChange event.
|
|
25643
|
+
* This is used when we need to fire ionChange from
|
|
25644
|
+
* user-generated events that cannot be caught with normal
|
|
25645
|
+
* input/change event listeners.
|
|
25646
|
+
* @internal
|
|
25647
|
+
*/
|
|
25648
|
+
async setValue(value) {
|
|
25649
|
+
const { items } = this;
|
|
25650
|
+
this.value = value;
|
|
25651
|
+
const findItem = items.find((item) => item.value === value && item.disabled !== true);
|
|
25652
|
+
if (findItem) {
|
|
25653
|
+
this.ionChange.emit(findItem);
|
|
25919
25654
|
}
|
|
25920
25655
|
}
|
|
25921
|
-
|
|
25922
|
-
|
|
25656
|
+
get activeItem() {
|
|
25657
|
+
// If the whole picker column is disabled, the current value should appear active
|
|
25658
|
+
// If the current value item is specifically disabled, it should not appear active
|
|
25659
|
+
const selector = `.picker-item[data-value="${this.value}"]${this.disabled ? '' : ':not([disabled])'}`;
|
|
25660
|
+
return getElementRoot(this.el).querySelector(selector);
|
|
25923
25661
|
}
|
|
25924
|
-
|
|
25925
|
-
|
|
25926
|
-
|
|
25927
|
-
|
|
25928
|
-
|
|
25929
|
-
|
|
25930
|
-
|
|
25931
|
-
|
|
25932
|
-
|
|
25933
|
-
|
|
25662
|
+
render() {
|
|
25663
|
+
const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
|
|
25664
|
+
const mode = getIonMode$1(this);
|
|
25665
|
+
/**
|
|
25666
|
+
* exportparts is needed so ion-datetime can expose the parts
|
|
25667
|
+
* from two layers of shadow nesting. If this causes problems,
|
|
25668
|
+
* the attribute can be moved to datetime.tsx and set on every
|
|
25669
|
+
* instance of ion-picker-column-internal there instead.
|
|
25670
|
+
*/
|
|
25671
|
+
return (hAsync(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses$1(color, {
|
|
25672
|
+
[mode]: true,
|
|
25673
|
+
['picker-column-active']: isActive,
|
|
25674
|
+
['picker-column-numeric-input']: numericInput,
|
|
25675
|
+
}) }, hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
|
|
25676
|
+
const isItemDisabled = pickerDisabled || item.disabled || false;
|
|
25677
|
+
return (hAsync("button", { tabindex: "-1", class: {
|
|
25678
|
+
'picker-item': true,
|
|
25679
|
+
}, "data-value": item.value, "data-index": index, onClick: (ev) => {
|
|
25680
|
+
this.centerPickerItemInView(ev.target, true);
|
|
25681
|
+
}, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
|
|
25682
|
+
}), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
|
|
25934
25683
|
}
|
|
25935
|
-
|
|
25936
|
-
|
|
25937
|
-
|
|
25938
|
-
|
|
25939
|
-
|
|
25940
|
-
|
|
25941
|
-
|
|
25942
|
-
|
|
25943
|
-
|
|
25944
|
-
|
|
25945
|
-
|
|
25946
|
-
|
|
25947
|
-
|
|
25948
|
-
|
|
25949
|
-
|
|
25950
|
-
|
|
25951
|
-
|
|
25952
|
-
|
|
25953
|
-
|
|
25954
|
-
|
|
25955
|
-
|
|
25956
|
-
|
|
25957
|
-
|
|
25958
|
-
|
|
25684
|
+
get el() { return getElement(this); }
|
|
25685
|
+
static get watchers() { return {
|
|
25686
|
+
"value": ["valueChange"]
|
|
25687
|
+
}; }
|
|
25688
|
+
static get style() { return {
|
|
25689
|
+
ios: pickerColumnInternalIosCss,
|
|
25690
|
+
md: pickerColumnInternalMdCss
|
|
25691
|
+
}; }
|
|
25692
|
+
static get cmpMeta() { return {
|
|
25693
|
+
"$flags$": 41,
|
|
25694
|
+
"$tagName$": "ion-picker-column-internal",
|
|
25695
|
+
"$members$": {
|
|
25696
|
+
"disabled": [4],
|
|
25697
|
+
"items": [16],
|
|
25698
|
+
"value": [1032],
|
|
25699
|
+
"color": [513],
|
|
25700
|
+
"numericInput": [4, "numeric-input"],
|
|
25701
|
+
"isActive": [32],
|
|
25702
|
+
"scrollActiveItemIntoView": [64],
|
|
25703
|
+
"setValue": [64]
|
|
25704
|
+
},
|
|
25705
|
+
"$listeners$": undefined,
|
|
25706
|
+
"$lazyBundleId$": "-",
|
|
25707
|
+
"$attrsToReflect$": [["color", "color"]]
|
|
25708
|
+
}; }
|
|
25709
|
+
}
|
|
25710
|
+
const PICKER_ITEM_ACTIVE_CLASS = 'picker-item-active';
|
|
25711
|
+
const PICKER_ITEM_PART = 'wheel-item';
|
|
25712
|
+
const PICKER_ITEM_ACTIVE_PART = 'active';
|
|
25713
|
+
|
|
25714
|
+
const pickerInternalIosCss = "/*!@:host*/.sc-ion-picker-internal-ios-h{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}/*!@:host .picker-before,\n:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios,.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}/*!@:host .picker-before*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{top:0;height:83px}@supports (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{left:0}/*!@:host-context([dir=rtl]) .picker-before*/[dir=rtl].sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios,[dir=rtl] .sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-internal-ios selector(.sc-ion-picker-internal-ios:dir(rtl)){.sc-ion-picker-internal-ios-h:dir(rtl) .picker-before{left:unset;right:unset;right:0}}}/*!@:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{top:116px;height:84px}@supports (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{left:0}/*!@:host-context([dir=rtl]) .picker-after*/[dir=rtl].sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios,[dir=rtl] .sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-internal-ios selector(.sc-ion-picker-internal-ios:dir(rtl)){.sc-ion-picker-internal-ios-h:dir(rtl) .picker-after{left:unset;right:unset;right:0}}}/*!@:host .picker-highlight*/.sc-ion-picker-internal-ios-h .picker-highlight.sc-ion-picker-internal-ios{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}/*!@:host input*/.sc-ion-picker-internal-ios-h input.sc-ion-picker-internal-ios{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}/*!@:host ::slotted(ion-picker-column-internal:first-of-type)*/.sc-ion-picker-internal-ios-h .sc-ion-picker-internal-ios-s>ion-picker-column-internal:first-of-type{text-align:start}/*!@:host ::slotted(ion-picker-column-internal:last-of-type)*/.sc-ion-picker-internal-ios-h .sc-ion-picker-internal-ios-s>ion-picker-column-internal:last-of-type{text-align:end}/*!@:host ::slotted(ion-picker-column-internal:only-child)*/.sc-ion-picker-internal-ios-h .sc-ion-picker-internal-ios-s>ion-picker-column-internal:only-child{text-align:center}/*!@:host .picker-before*/.sc-ion-picker-internal-ios-h .picker-before.sc-ion-picker-internal-ios{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}/*!@:host .picker-after*/.sc-ion-picker-internal-ios-h .picker-after.sc-ion-picker-internal-ios{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}/*!@:host .picker-highlight*/.sc-ion-picker-internal-ios-h .picker-highlight.sc-ion-picker-internal-ios{background:var(--wheel-highlight-background, var(--ion-color-step-150, #eeeeef))}";
|
|
25715
|
+
|
|
25716
|
+
const pickerInternalMdCss = "/*!@:host*/.sc-ion-picker-internal-md-h{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}/*!@:host .picker-before,\n:host .picker-after*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md,.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}/*!@:host .picker-before*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{top:0;height:83px}@supports (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-before*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{left:0}/*!@:host-context([dir=rtl]) .picker-before*/[dir=rtl].sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md,[dir=rtl] .sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-internal-md selector(.sc-ion-picker-internal-md:dir(rtl)){.sc-ion-picker-internal-md-h:dir(rtl) .picker-before{left:unset;right:unset;right:0}}}/*!@:host .picker-after*/.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{top:116px;height:84px}@supports (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host .picker-after*/.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{left:0}/*!@:host-context([dir=rtl]) .picker-after*/[dir=rtl].sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md,[dir=rtl] .sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-picker-internal-md selector(.sc-ion-picker-internal-md:dir(rtl)){.sc-ion-picker-internal-md-h:dir(rtl) .picker-after{left:unset;right:unset;right:0}}}/*!@:host .picker-highlight*/.sc-ion-picker-internal-md-h .picker-highlight.sc-ion-picker-internal-md{border-radius:8px;left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--wheel-highlight-background);z-index:-1}/*!@:host input*/.sc-ion-picker-internal-md-h input.sc-ion-picker-internal-md{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}/*!@:host ::slotted(ion-picker-column-internal:first-of-type)*/.sc-ion-picker-internal-md-h .sc-ion-picker-internal-md-s>ion-picker-column-internal:first-of-type{text-align:start}/*!@:host ::slotted(ion-picker-column-internal:last-of-type)*/.sc-ion-picker-internal-md-h .sc-ion-picker-internal-md-s>ion-picker-column-internal:last-of-type{text-align:end}/*!@:host ::slotted(ion-picker-column-internal:only-child)*/.sc-ion-picker-internal-md-h .sc-ion-picker-internal-md-s>ion-picker-column-internal:only-child{text-align:center}/*!@:host .picker-before*/.sc-ion-picker-internal-md-h .picker-before.sc-ion-picker-internal-md{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}/*!@:host .picker-after*/.sc-ion-picker-internal-md-h .picker-after.sc-ion-picker-internal-md{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--wheel-fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}";
|
|
25717
|
+
|
|
25718
|
+
/**
|
|
25719
|
+
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
25720
|
+
* @internal
|
|
25721
|
+
*/
|
|
25722
|
+
class PickerInternal {
|
|
25723
|
+
constructor(hostRef) {
|
|
25724
|
+
registerInstance(this, hostRef);
|
|
25725
|
+
this.ionInputModeChange = createEvent(this, "ionInputModeChange", 7);
|
|
25726
|
+
this.useInputMode = false;
|
|
25727
|
+
this.isInHighlightBounds = (ev) => {
|
|
25728
|
+
const { highlightEl } = this;
|
|
25729
|
+
if (!highlightEl) {
|
|
25730
|
+
return false;
|
|
25731
|
+
}
|
|
25732
|
+
const bbox = highlightEl.getBoundingClientRect();
|
|
25733
|
+
/**
|
|
25734
|
+
* Check to see if the user clicked
|
|
25735
|
+
* outside the bounds of the highlight.
|
|
25736
|
+
*/
|
|
25737
|
+
const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
|
|
25738
|
+
const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
|
|
25739
|
+
if (outsideX || outsideY) {
|
|
25740
|
+
return false;
|
|
25741
|
+
}
|
|
25742
|
+
return true;
|
|
25743
|
+
};
|
|
25744
|
+
/**
|
|
25745
|
+
* If we are no longer focused
|
|
25746
|
+
* on a picker column, then we should
|
|
25747
|
+
* exit input mode. An exception is made
|
|
25748
|
+
* for the input in the picker since having
|
|
25749
|
+
* that focused means we are still in input mode.
|
|
25750
|
+
*/
|
|
25751
|
+
this.onFocusOut = (ev) => {
|
|
25752
|
+
// TODO(FW-2832): type
|
|
25753
|
+
const { relatedTarget } = ev;
|
|
25754
|
+
if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
|
|
25755
|
+
this.exitInputMode();
|
|
25756
|
+
}
|
|
25757
|
+
};
|
|
25758
|
+
/**
|
|
25759
|
+
* When picker columns receive focus
|
|
25760
|
+
* the parent picker needs to determine
|
|
25761
|
+
* whether to enter/exit input mode.
|
|
25762
|
+
*/
|
|
25763
|
+
this.onFocusIn = (ev) => {
|
|
25764
|
+
// TODO(FW-2832): type
|
|
25765
|
+
const { target } = ev;
|
|
25766
|
+
/**
|
|
25767
|
+
* Due to browser differences in how/when focus
|
|
25768
|
+
* is dispatched on certain elements, we need to
|
|
25769
|
+
* make sure that this function only ever runs when
|
|
25770
|
+
* focusing a picker column.
|
|
25771
|
+
*/
|
|
25772
|
+
if (target.tagName !== 'ION-PICKER-COLUMN-INTERNAL') {
|
|
25773
|
+
return;
|
|
25774
|
+
}
|
|
25775
|
+
/**
|
|
25776
|
+
* If we have actionOnClick
|
|
25777
|
+
* then this means the user focused
|
|
25778
|
+
* a picker column via mouse or
|
|
25779
|
+
* touch (i.e. a PointerEvent). As a result,
|
|
25780
|
+
* we should not enter/exit input mode
|
|
25781
|
+
* until the click event has fired, which happens
|
|
25782
|
+
* after the `focusin` event.
|
|
25783
|
+
*
|
|
25784
|
+
* Otherwise, the user likely focused
|
|
25785
|
+
* the column using their keyboard and
|
|
25786
|
+
* we should enter/exit input mode automatically.
|
|
25787
|
+
*/
|
|
25788
|
+
if (!this.actionOnClick) {
|
|
25789
|
+
const columnEl = target;
|
|
25790
|
+
const allowInput = columnEl.numericInput;
|
|
25791
|
+
if (allowInput) {
|
|
25792
|
+
this.enterInputMode(columnEl, false);
|
|
25959
25793
|
}
|
|
25960
25794
|
else {
|
|
25961
|
-
|
|
25795
|
+
this.exitInputMode();
|
|
25796
|
+
}
|
|
25797
|
+
}
|
|
25798
|
+
};
|
|
25799
|
+
/**
|
|
25800
|
+
* On click we need to run an actionOnClick
|
|
25801
|
+
* function that has been set in onPointerDown
|
|
25802
|
+
* so that we enter/exit input mode correctly.
|
|
25803
|
+
*/
|
|
25804
|
+
this.onClick = () => {
|
|
25805
|
+
const { actionOnClick } = this;
|
|
25806
|
+
if (actionOnClick) {
|
|
25807
|
+
actionOnClick();
|
|
25808
|
+
this.actionOnClick = undefined;
|
|
25809
|
+
}
|
|
25810
|
+
};
|
|
25811
|
+
/**
|
|
25812
|
+
* Clicking a column also focuses the column on
|
|
25813
|
+
* certain browsers, so we use onPointerDown
|
|
25814
|
+
* to tell the onFocusIn function that users
|
|
25815
|
+
* are trying to click the column rather than
|
|
25816
|
+
* focus the column using the keyboard. When the
|
|
25817
|
+
* user completes the click, the onClick function
|
|
25818
|
+
* runs and runs the actionOnClick callback.
|
|
25819
|
+
*/
|
|
25820
|
+
this.onPointerDown = (ev) => {
|
|
25821
|
+
const { useInputMode, inputModeColumn, el } = this;
|
|
25822
|
+
if (this.isInHighlightBounds(ev)) {
|
|
25823
|
+
/**
|
|
25824
|
+
* If we were already in
|
|
25825
|
+
* input mode, then we should determine
|
|
25826
|
+
* if we tapped a particular column and
|
|
25827
|
+
* should switch to input mode for
|
|
25828
|
+
* that specific column.
|
|
25829
|
+
*/
|
|
25830
|
+
if (useInputMode) {
|
|
25831
|
+
/**
|
|
25832
|
+
* If we tapped a picker column
|
|
25833
|
+
* then we should either switch to input
|
|
25834
|
+
* mode for that column or all columns.
|
|
25835
|
+
* Otherwise we should exit input mode
|
|
25836
|
+
* since we just tapped the highlight and
|
|
25837
|
+
* not a column.
|
|
25838
|
+
*/
|
|
25839
|
+
if (ev.target.tagName === 'ION-PICKER-COLUMN-INTERNAL') {
|
|
25840
|
+
/**
|
|
25841
|
+
* If user taps 2 different columns
|
|
25842
|
+
* then we should just switch to input mode
|
|
25843
|
+
* for the new column rather than switching to
|
|
25844
|
+
* input mode for all columns.
|
|
25845
|
+
*/
|
|
25846
|
+
if (inputModeColumn && inputModeColumn === ev.target) {
|
|
25847
|
+
this.actionOnClick = () => {
|
|
25848
|
+
this.enterInputMode();
|
|
25849
|
+
};
|
|
25850
|
+
}
|
|
25851
|
+
else {
|
|
25852
|
+
this.actionOnClick = () => {
|
|
25853
|
+
this.enterInputMode(ev.target);
|
|
25854
|
+
};
|
|
25855
|
+
}
|
|
25856
|
+
}
|
|
25857
|
+
else {
|
|
25858
|
+
this.actionOnClick = () => {
|
|
25859
|
+
this.exitInputMode();
|
|
25860
|
+
};
|
|
25861
|
+
}
|
|
25862
|
+
/**
|
|
25863
|
+
* If we were not already in
|
|
25864
|
+
* input mode, then we should
|
|
25865
|
+
* enter input mode for all columns.
|
|
25866
|
+
*/
|
|
25867
|
+
}
|
|
25868
|
+
else {
|
|
25869
|
+
/**
|
|
25870
|
+
* If there is only 1 numeric input column
|
|
25871
|
+
* then we should skip multi column input.
|
|
25872
|
+
*/
|
|
25873
|
+
const columns = el.querySelectorAll('ion-picker-column-internal.picker-column-numeric-input');
|
|
25874
|
+
const columnEl = columns.length === 1 ? ev.target : undefined;
|
|
25875
|
+
this.actionOnClick = () => {
|
|
25876
|
+
this.enterInputMode(columnEl);
|
|
25877
|
+
};
|
|
25962
25878
|
}
|
|
25879
|
+
return;
|
|
25963
25880
|
}
|
|
25964
|
-
|
|
25965
|
-
|
|
25966
|
-
|
|
25881
|
+
this.actionOnClick = () => {
|
|
25882
|
+
this.exitInputMode();
|
|
25883
|
+
};
|
|
25884
|
+
};
|
|
25885
|
+
/**
|
|
25886
|
+
* Enters input mode to allow
|
|
25887
|
+
* for text entry of numeric values.
|
|
25888
|
+
* If on mobile, we focus a hidden input
|
|
25889
|
+
* field so that the on screen keyboard
|
|
25890
|
+
* is brought up. When tabbing using a
|
|
25891
|
+
* keyboard, picker columns receive an outline
|
|
25892
|
+
* to indicate they are focused. As a result,
|
|
25893
|
+
* we should not focus the hidden input as it
|
|
25894
|
+
* would cause the outline to go away, preventing
|
|
25895
|
+
* users from having any visual indication of which
|
|
25896
|
+
* column is focused.
|
|
25897
|
+
*/
|
|
25898
|
+
this.enterInputMode = (columnEl, focusInput = true) => {
|
|
25899
|
+
const { inputEl, el } = this;
|
|
25900
|
+
if (!inputEl) {
|
|
25901
|
+
return;
|
|
25967
25902
|
}
|
|
25968
|
-
|
|
25969
|
-
|
|
25970
|
-
|
|
25971
|
-
|
|
25903
|
+
/**
|
|
25904
|
+
* Only active input mode if there is at
|
|
25905
|
+
* least one column that accepts numeric input.
|
|
25906
|
+
*/
|
|
25907
|
+
const hasInputColumn = el.querySelector('ion-picker-column-internal.picker-column-numeric-input');
|
|
25908
|
+
if (!hasInputColumn) {
|
|
25909
|
+
return;
|
|
25972
25910
|
}
|
|
25973
|
-
|
|
25974
|
-
|
|
25975
|
-
|
|
25976
|
-
|
|
25911
|
+
/**
|
|
25912
|
+
* If columnEl is undefined then
|
|
25913
|
+
* it is assumed that all numeric pickers
|
|
25914
|
+
* are eligible for text entry.
|
|
25915
|
+
* (i.e. hour and minute columns)
|
|
25916
|
+
*/
|
|
25917
|
+
this.useInputMode = true;
|
|
25918
|
+
this.inputModeColumn = columnEl;
|
|
25919
|
+
/**
|
|
25920
|
+
* Users with a keyboard and mouse can
|
|
25921
|
+
* activate input mode where the input is
|
|
25922
|
+
* focused as well as when it is not focused,
|
|
25923
|
+
* so we need to make sure we clean up any
|
|
25924
|
+
* old listeners.
|
|
25925
|
+
*/
|
|
25926
|
+
if (focusInput) {
|
|
25927
|
+
if (this.destroyKeypressListener) {
|
|
25928
|
+
this.destroyKeypressListener();
|
|
25929
|
+
this.destroyKeypressListener = undefined;
|
|
25930
|
+
}
|
|
25931
|
+
inputEl.focus();
|
|
25977
25932
|
}
|
|
25978
|
-
else
|
|
25979
|
-
|
|
25980
|
-
|
|
25933
|
+
else {
|
|
25934
|
+
el.addEventListener('keypress', this.onKeyPress);
|
|
25935
|
+
this.destroyKeypressListener = () => {
|
|
25936
|
+
el.removeEventListener('keypress', this.onKeyPress);
|
|
25937
|
+
};
|
|
25981
25938
|
}
|
|
25982
|
-
|
|
25983
|
-
|
|
25984
|
-
|
|
25939
|
+
this.emitInputModeChange();
|
|
25940
|
+
};
|
|
25941
|
+
this.onKeyPress = (ev) => {
|
|
25942
|
+
const { inputEl } = this;
|
|
25943
|
+
if (!inputEl) {
|
|
25944
|
+
return;
|
|
25985
25945
|
}
|
|
25986
|
-
|
|
25946
|
+
const parsedValue = parseInt(ev.key, 10);
|
|
25987
25947
|
/**
|
|
25988
|
-
*
|
|
25989
|
-
* item has the selected class
|
|
25948
|
+
* Only numbers should be allowed
|
|
25990
25949
|
*/
|
|
25991
|
-
|
|
25992
|
-
|
|
25993
|
-
|
|
25994
|
-
}
|
|
25995
|
-
else {
|
|
25996
|
-
button.classList.remove(PICKER_OPT_SELECTED);
|
|
25950
|
+
if (!Number.isNaN(parsedValue)) {
|
|
25951
|
+
inputEl.value += ev.key;
|
|
25952
|
+
this.onInputChange();
|
|
25997
25953
|
}
|
|
25998
|
-
}
|
|
25999
|
-
this.
|
|
26000
|
-
|
|
26001
|
-
|
|
26002
|
-
|
|
26003
|
-
if (this.lastIndex !== selectedIndex) {
|
|
26004
|
-
// have not set a last index yet
|
|
26005
|
-
hapticSelectionChanged();
|
|
26006
|
-
this.lastIndex = selectedIndex;
|
|
26007
|
-
}
|
|
26008
|
-
}
|
|
26009
|
-
decelerate() {
|
|
26010
|
-
if (this.velocity !== 0) {
|
|
26011
|
-
// still decelerating
|
|
26012
|
-
this.velocity *= DECELERATION_FRICTION;
|
|
26013
|
-
// do not let it go slower than a velocity of 1
|
|
26014
|
-
this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
|
|
26015
|
-
let y = this.y + this.velocity;
|
|
26016
|
-
if (y > this.minY) {
|
|
26017
|
-
// whoops, it's trying to scroll up farther than the options we have!
|
|
26018
|
-
y = this.minY;
|
|
26019
|
-
this.velocity = 0;
|
|
25954
|
+
};
|
|
25955
|
+
this.selectSingleColumn = () => {
|
|
25956
|
+
const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
|
|
25957
|
+
if (!inputEl || !inputModeColumn) {
|
|
25958
|
+
return;
|
|
26020
25959
|
}
|
|
26021
|
-
|
|
26022
|
-
|
|
26023
|
-
|
|
26024
|
-
|
|
25960
|
+
const values = inputModeColumn.items.filter((item) => item.disabled !== true);
|
|
25961
|
+
/**
|
|
25962
|
+
* If users pause for a bit, the search
|
|
25963
|
+
* value should be reset similar to how a
|
|
25964
|
+
* <select> behaves. So typing "34", waiting,
|
|
25965
|
+
* then typing "5" should select "05".
|
|
25966
|
+
*/
|
|
25967
|
+
if (singleColumnSearchTimeout) {
|
|
25968
|
+
clearTimeout(singleColumnSearchTimeout);
|
|
26025
25969
|
}
|
|
26026
|
-
this.
|
|
26027
|
-
|
|
26028
|
-
|
|
26029
|
-
|
|
26030
|
-
|
|
25970
|
+
this.singleColumnSearchTimeout = setTimeout(() => {
|
|
25971
|
+
inputEl.value = '';
|
|
25972
|
+
this.singleColumnSearchTimeout = undefined;
|
|
25973
|
+
}, 1000);
|
|
25974
|
+
/**
|
|
25975
|
+
* For values that are longer than 2 digits long
|
|
25976
|
+
* we should shift the value over 1 character
|
|
25977
|
+
* to the left. So typing "456" would result in "56".
|
|
25978
|
+
* TODO: If we want to support more than just
|
|
25979
|
+
* time entry, we should update this value to be
|
|
25980
|
+
* the max length of all of the picker items.
|
|
25981
|
+
*/
|
|
25982
|
+
if (inputEl.value.length >= 3) {
|
|
25983
|
+
const startIndex = inputEl.value.length - 2;
|
|
25984
|
+
const newString = inputEl.value.substring(startIndex);
|
|
25985
|
+
inputEl.value = newString;
|
|
25986
|
+
this.selectSingleColumn();
|
|
25987
|
+
return;
|
|
26031
25988
|
}
|
|
26032
|
-
|
|
26033
|
-
|
|
26034
|
-
|
|
26035
|
-
|
|
25989
|
+
/**
|
|
25990
|
+
* Checking the value of the input gets priority
|
|
25991
|
+
* first. For example, if the value of the input
|
|
25992
|
+
* is "1" and we entered "2", then the complete value
|
|
25993
|
+
* is "12" and we should select hour 12.
|
|
25994
|
+
*
|
|
25995
|
+
* Regex removes any leading zeros from values like "02",
|
|
25996
|
+
* but it keeps a single zero if there are only zeros in the string.
|
|
25997
|
+
* 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
|
|
25998
|
+
* 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
|
|
25999
|
+
*/
|
|
26000
|
+
const findItemFromCompleteValue = values.find(({ text }) => {
|
|
26001
|
+
const parsedText = text.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
|
|
26002
|
+
return parsedText === inputEl.value;
|
|
26003
|
+
});
|
|
26004
|
+
if (findItemFromCompleteValue) {
|
|
26005
|
+
inputModeColumn.setValue(findItemFromCompleteValue.value);
|
|
26006
|
+
return;
|
|
26036
26007
|
}
|
|
26037
|
-
|
|
26038
|
-
|
|
26039
|
-
|
|
26040
|
-
|
|
26041
|
-
|
|
26042
|
-
|
|
26043
|
-
|
|
26044
|
-
|
|
26045
|
-
}
|
|
26046
|
-
indexForY(y) {
|
|
26047
|
-
return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
|
|
26048
|
-
}
|
|
26049
|
-
onStart(detail) {
|
|
26050
|
-
// We have to prevent default in order to block scrolling under the picker
|
|
26051
|
-
// but we DO NOT have to stop propagation, since we still want
|
|
26052
|
-
// some "click" events to capture
|
|
26053
|
-
if (detail.event.cancelable) {
|
|
26054
|
-
detail.event.preventDefault();
|
|
26055
|
-
}
|
|
26056
|
-
detail.event.stopPropagation();
|
|
26057
|
-
hapticSelectionStart();
|
|
26058
|
-
// reset everything
|
|
26059
|
-
if (this.rafId !== undefined)
|
|
26060
|
-
cancelAnimationFrame(this.rafId);
|
|
26061
|
-
const options = this.col.options;
|
|
26062
|
-
let minY = options.length - 1;
|
|
26063
|
-
let maxY = 0;
|
|
26064
|
-
for (let i = 0; i < options.length; i++) {
|
|
26065
|
-
if (!options[i].disabled) {
|
|
26066
|
-
minY = Math.min(minY, i);
|
|
26067
|
-
maxY = Math.max(maxY, i);
|
|
26008
|
+
/**
|
|
26009
|
+
* If we typed "56" to get minute 56, then typed "7",
|
|
26010
|
+
* we should select "07" as "567" is not a valid minute.
|
|
26011
|
+
*/
|
|
26012
|
+
if (inputEl.value.length === 2) {
|
|
26013
|
+
const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
|
|
26014
|
+
inputEl.value = changedCharacter;
|
|
26015
|
+
this.selectSingleColumn();
|
|
26068
26016
|
}
|
|
26069
|
-
}
|
|
26070
|
-
|
|
26071
|
-
|
|
26072
|
-
|
|
26073
|
-
|
|
26074
|
-
|
|
26075
|
-
|
|
26076
|
-
|
|
26077
|
-
|
|
26078
|
-
|
|
26079
|
-
|
|
26080
|
-
|
|
26081
|
-
// scrolling up higher than scroll area
|
|
26082
|
-
y = Math.pow(y, 0.8);
|
|
26083
|
-
this.bounceFrom = y;
|
|
26084
|
-
}
|
|
26085
|
-
else if (y < this.maxY) {
|
|
26086
|
-
// scrolling down below scroll area
|
|
26087
|
-
y += Math.pow(this.maxY - y, 0.9);
|
|
26088
|
-
this.bounceFrom = y;
|
|
26089
|
-
}
|
|
26090
|
-
else {
|
|
26091
|
-
this.bounceFrom = 0;
|
|
26092
|
-
}
|
|
26093
|
-
this.update(y, 0, false);
|
|
26094
|
-
}
|
|
26095
|
-
onEnd(detail) {
|
|
26096
|
-
if (this.bounceFrom > 0) {
|
|
26097
|
-
// bounce back up
|
|
26098
|
-
this.update(this.minY, 100, true);
|
|
26099
|
-
this.emitColChange();
|
|
26100
|
-
return;
|
|
26101
|
-
}
|
|
26102
|
-
else if (this.bounceFrom < 0) {
|
|
26103
|
-
// bounce back down
|
|
26104
|
-
this.update(this.maxY, 100, true);
|
|
26105
|
-
this.emitColChange();
|
|
26106
|
-
return;
|
|
26107
|
-
}
|
|
26108
|
-
this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
|
|
26109
|
-
if (this.velocity === 0 && detail.deltaY === 0) {
|
|
26110
|
-
const opt = detail.event.target.closest('.picker-opt');
|
|
26111
|
-
if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) {
|
|
26112
|
-
this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
|
|
26017
|
+
};
|
|
26018
|
+
/**
|
|
26019
|
+
* Searches a list of column items for a particular
|
|
26020
|
+
* value. This is currently used for numeric values.
|
|
26021
|
+
* The zeroBehavior can be set to account for leading
|
|
26022
|
+
* or trailing zeros when looking at the item text.
|
|
26023
|
+
*/
|
|
26024
|
+
this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
|
|
26025
|
+
const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
|
|
26026
|
+
const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
|
|
26027
|
+
if (item) {
|
|
26028
|
+
colEl.setValue(item.value);
|
|
26113
26029
|
}
|
|
26114
|
-
}
|
|
26115
|
-
|
|
26116
|
-
|
|
26117
|
-
if (
|
|
26118
|
-
|
|
26119
|
-
const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
|
|
26120
|
-
if (isScrollingUp && optHeightFraction > 0.5) {
|
|
26121
|
-
this.velocity = Math.abs(this.velocity) * -1;
|
|
26122
|
-
}
|
|
26123
|
-
else if (!isScrollingUp && optHeightFraction <= 0.5) {
|
|
26124
|
-
this.velocity = Math.abs(this.velocity);
|
|
26125
|
-
}
|
|
26030
|
+
};
|
|
26031
|
+
this.selectMultiColumn = () => {
|
|
26032
|
+
const { inputEl, el } = this;
|
|
26033
|
+
if (!inputEl) {
|
|
26034
|
+
return;
|
|
26126
26035
|
}
|
|
26127
|
-
|
|
26128
|
-
|
|
26129
|
-
|
|
26130
|
-
|
|
26131
|
-
|
|
26132
|
-
|
|
26133
|
-
|
|
26134
|
-
|
|
26135
|
-
|
|
26136
|
-
|
|
26137
|
-
|
|
26138
|
-
|
|
26036
|
+
const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter((col) => col.numericInput);
|
|
26037
|
+
const firstColumn = numericPickers[0];
|
|
26038
|
+
const lastColumn = numericPickers[1];
|
|
26039
|
+
let value = inputEl.value;
|
|
26040
|
+
let minuteValue;
|
|
26041
|
+
switch (value.length) {
|
|
26042
|
+
case 1:
|
|
26043
|
+
this.searchColumn(firstColumn, value);
|
|
26044
|
+
break;
|
|
26045
|
+
case 2:
|
|
26046
|
+
/**
|
|
26047
|
+
* If the first character is `0` or `1` it is
|
|
26048
|
+
* possible that users are trying to type `09`
|
|
26049
|
+
* or `11` into the hour field, so we should look
|
|
26050
|
+
* at that first.
|
|
26051
|
+
*/
|
|
26052
|
+
const firstCharacter = inputEl.value.substring(0, 1);
|
|
26053
|
+
value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
|
|
26054
|
+
this.searchColumn(firstColumn, value);
|
|
26055
|
+
/**
|
|
26056
|
+
* If only checked the first value,
|
|
26057
|
+
* we can check the second value
|
|
26058
|
+
* for a match in the minutes column
|
|
26059
|
+
*/
|
|
26060
|
+
if (value.length === 1) {
|
|
26061
|
+
minuteValue = inputEl.value.substring(inputEl.value.length - 1);
|
|
26062
|
+
this.searchColumn(lastColumn, minuteValue, 'end');
|
|
26063
|
+
}
|
|
26064
|
+
break;
|
|
26065
|
+
case 3:
|
|
26066
|
+
/**
|
|
26067
|
+
* If the first character is `0` or `1` it is
|
|
26068
|
+
* possible that users are trying to type `09`
|
|
26069
|
+
* or `11` into the hour field, so we should look
|
|
26070
|
+
* at that first.
|
|
26071
|
+
*/
|
|
26072
|
+
const firstCharacterAgain = inputEl.value.substring(0, 1);
|
|
26073
|
+
value =
|
|
26074
|
+
firstCharacterAgain === '0' || firstCharacterAgain === '1'
|
|
26075
|
+
? inputEl.value.substring(0, 2)
|
|
26076
|
+
: firstCharacterAgain;
|
|
26077
|
+
this.searchColumn(firstColumn, value);
|
|
26078
|
+
/**
|
|
26079
|
+
* If only checked the first value,
|
|
26080
|
+
* we can check the second value
|
|
26081
|
+
* for a match in the minutes column
|
|
26082
|
+
*/
|
|
26083
|
+
minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
|
|
26084
|
+
this.searchColumn(lastColumn, minuteValue, 'end');
|
|
26085
|
+
break;
|
|
26086
|
+
case 4:
|
|
26087
|
+
/**
|
|
26088
|
+
* If the first character is `0` or `1` it is
|
|
26089
|
+
* possible that users are trying to type `09`
|
|
26090
|
+
* or `11` into the hour field, so we should look
|
|
26091
|
+
* at that first.
|
|
26092
|
+
*/
|
|
26093
|
+
const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
|
|
26094
|
+
value =
|
|
26095
|
+
firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
|
|
26096
|
+
? inputEl.value.substring(0, 2)
|
|
26097
|
+
: firstCharacterAgainAgain;
|
|
26098
|
+
this.searchColumn(firstColumn, value);
|
|
26099
|
+
/**
|
|
26100
|
+
* If only checked the first value,
|
|
26101
|
+
* we can check the second value
|
|
26102
|
+
* for a match in the minutes column
|
|
26103
|
+
*/
|
|
26104
|
+
const minuteValueAgain = value.length === 1
|
|
26105
|
+
? inputEl.value.substring(1, inputEl.value.length)
|
|
26106
|
+
: inputEl.value.substring(2, inputEl.value.length);
|
|
26107
|
+
this.searchColumn(lastColumn, minuteValueAgain, 'end');
|
|
26108
|
+
break;
|
|
26109
|
+
default:
|
|
26110
|
+
const startIndex = inputEl.value.length - 4;
|
|
26111
|
+
const newString = inputEl.value.substring(startIndex);
|
|
26112
|
+
inputEl.value = newString;
|
|
26113
|
+
this.selectMultiColumn();
|
|
26114
|
+
break;
|
|
26139
26115
|
}
|
|
26140
|
-
}
|
|
26116
|
+
};
|
|
26141
26117
|
/**
|
|
26142
|
-
*
|
|
26143
|
-
*
|
|
26144
|
-
*
|
|
26145
|
-
* a value different than the value at
|
|
26146
|
-
* selectedIndex
|
|
26118
|
+
* Searches the value of the active column
|
|
26119
|
+
* to determine which value users are trying
|
|
26120
|
+
* to select
|
|
26147
26121
|
*/
|
|
26148
|
-
|
|
26149
|
-
|
|
26150
|
-
|
|
26151
|
-
|
|
26152
|
-
|
|
26153
|
-
|
|
26154
|
-
|
|
26155
|
-
|
|
26156
|
-
|
|
26157
|
-
|
|
26158
|
-
|
|
26159
|
-
|
|
26160
|
-
const colEl = this.optsEl;
|
|
26161
|
-
if (colEl) {
|
|
26162
|
-
// DOM READ
|
|
26163
|
-
// We perfom a DOM read over a rendered item, this needs to happen after the first render or after the the column has changed
|
|
26164
|
-
this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
|
|
26165
|
-
}
|
|
26166
|
-
this.refresh(forceRefresh, animated);
|
|
26167
|
-
}
|
|
26168
|
-
render() {
|
|
26169
|
-
const col = this.col;
|
|
26170
|
-
const mode = getIonMode$1(this);
|
|
26171
|
-
return (hAsync(Host, { class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
|
|
26172
|
-
'max-width': this.col.columnWidth,
|
|
26173
|
-
} }, col.prefix && (hAsync("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
|
|
26174
|
-
}
|
|
26175
|
-
get el() { return getElement(this); }
|
|
26176
|
-
static get watchers() { return {
|
|
26177
|
-
"col": ["colChanged"]
|
|
26178
|
-
}; }
|
|
26179
|
-
static get style() { return {
|
|
26180
|
-
ios: pickerColumnIosCss,
|
|
26181
|
-
md: pickerColumnMdCss
|
|
26182
|
-
}; }
|
|
26183
|
-
static get cmpMeta() { return {
|
|
26184
|
-
"$flags$": 32,
|
|
26185
|
-
"$tagName$": "ion-picker-legacy-column",
|
|
26186
|
-
"$members$": {
|
|
26187
|
-
"col": [16]
|
|
26188
|
-
},
|
|
26189
|
-
"$listeners$": undefined,
|
|
26190
|
-
"$lazyBundleId$": "-",
|
|
26191
|
-
"$attrsToReflect$": []
|
|
26192
|
-
}; }
|
|
26193
|
-
}
|
|
26194
|
-
const PICKER_OPT_SELECTED = 'picker-opt-selected';
|
|
26195
|
-
const DECELERATION_FRICTION = 0.97;
|
|
26196
|
-
const MAX_PICKER_SPEED = 90;
|
|
26197
|
-
const TRANSITION_DURATION = 150;
|
|
26198
|
-
|
|
26199
|
-
const pickerColumnOptionIosCss = "/*!@button*/button.sc-ion-picker-column-option-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}/*!@:host(.option-disabled)*/.option-disabled.sc-ion-picker-column-option-ios-h{opacity:0.4}/*!@:host(.option-disabled) button*/.option-disabled.sc-ion-picker-column-option-ios-h button.sc-ion-picker-column-option-ios{cursor:default}";
|
|
26200
|
-
|
|
26201
|
-
const pickerColumnOptionMdCss = "/*!@button*/button.sc-ion-picker-column-option-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}/*!@:host(.option-disabled)*/.option-disabled.sc-ion-picker-column-option-md-h{opacity:0.4}/*!@:host(.option-disabled) button*/.option-disabled.sc-ion-picker-column-option-md-h button.sc-ion-picker-column-option-md{cursor:default}/*!@:host(.option-active)*/.option-active.sc-ion-picker-column-option-md-h{color:var(--ion-color-base)}";
|
|
26202
|
-
|
|
26203
|
-
class PickerColumnOption {
|
|
26204
|
-
constructor(hostRef) {
|
|
26205
|
-
registerInstance(this, hostRef);
|
|
26122
|
+
this.onInputChange = () => {
|
|
26123
|
+
const { useInputMode, inputEl, inputModeColumn } = this;
|
|
26124
|
+
if (!useInputMode || !inputEl) {
|
|
26125
|
+
return;
|
|
26126
|
+
}
|
|
26127
|
+
if (inputModeColumn) {
|
|
26128
|
+
this.selectSingleColumn();
|
|
26129
|
+
}
|
|
26130
|
+
else {
|
|
26131
|
+
this.selectMultiColumn();
|
|
26132
|
+
}
|
|
26133
|
+
};
|
|
26206
26134
|
/**
|
|
26207
|
-
*
|
|
26208
|
-
*
|
|
26209
|
-
*
|
|
26135
|
+
* Emit ionInputModeChange. Picker columns
|
|
26136
|
+
* listen for this event to determine whether
|
|
26137
|
+
* or not their column is "active" for text input.
|
|
26210
26138
|
*/
|
|
26211
|
-
this.
|
|
26212
|
-
|
|
26213
|
-
|
|
26214
|
-
|
|
26215
|
-
|
|
26139
|
+
this.emitInputModeChange = () => {
|
|
26140
|
+
const { useInputMode, inputModeColumn } = this;
|
|
26141
|
+
this.ionInputModeChange.emit({
|
|
26142
|
+
useInputMode,
|
|
26143
|
+
inputModeColumn,
|
|
26144
|
+
});
|
|
26145
|
+
};
|
|
26216
26146
|
}
|
|
26217
26147
|
/**
|
|
26218
|
-
*
|
|
26219
|
-
*
|
|
26220
|
-
*
|
|
26221
|
-
*
|
|
26148
|
+
* When the picker is interacted with
|
|
26149
|
+
* we need to prevent touchstart so other
|
|
26150
|
+
* gestures do not fire. For example,
|
|
26151
|
+
* scrolling on the wheel picker
|
|
26152
|
+
* in ion-datetime should not cause
|
|
26153
|
+
* a card modal to swipe to close.
|
|
26222
26154
|
*/
|
|
26223
|
-
|
|
26224
|
-
|
|
26155
|
+
preventTouchStartPropagation(ev) {
|
|
26156
|
+
ev.stopPropagation();
|
|
26225
26157
|
}
|
|
26226
26158
|
componentWillLoad() {
|
|
26227
|
-
|
|
26228
|
-
|
|
26229
|
-
* The initial value of `aria-label` needs to be set for
|
|
26230
|
-
* the first render.
|
|
26231
|
-
|
|
26232
|
-
*/
|
|
26233
|
-
this.ariaLabel = inheritedAttributes['aria-label'] || null;
|
|
26234
|
-
}
|
|
26235
|
-
connectedCallback() {
|
|
26236
|
-
this.pickerColumn = this.el.closest('ion-picker-column');
|
|
26237
|
-
}
|
|
26238
|
-
disconnectedCallback() {
|
|
26239
|
-
this.pickerColumn = null;
|
|
26159
|
+
getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
|
|
26160
|
+
getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
|
|
26240
26161
|
}
|
|
26241
26162
|
/**
|
|
26242
|
-
*
|
|
26243
|
-
*
|
|
26244
|
-
*
|
|
26245
|
-
*
|
|
26246
|
-
* centered in the view.
|
|
26247
|
-
*
|
|
26248
|
-
* We intentionally run this for every
|
|
26249
|
-
* option. If we only ran this from
|
|
26250
|
-
* the selected option then if the newly
|
|
26251
|
-
* loaded options were not selected then
|
|
26252
|
-
* scrollActiveItemIntoView would not be called.
|
|
26163
|
+
* @internal
|
|
26164
|
+
* Exits text entry mode for the picker
|
|
26165
|
+
* This method blurs the hidden input
|
|
26166
|
+
* and cause the keyboard to dismiss.
|
|
26253
26167
|
*/
|
|
26254
|
-
|
|
26255
|
-
const {
|
|
26256
|
-
if (
|
|
26257
|
-
|
|
26168
|
+
async exitInputMode() {
|
|
26169
|
+
const { inputEl, useInputMode } = this;
|
|
26170
|
+
if (!useInputMode || !inputEl) {
|
|
26171
|
+
return;
|
|
26258
26172
|
}
|
|
26259
|
-
|
|
26260
|
-
|
|
26261
|
-
|
|
26262
|
-
|
|
26263
|
-
|
|
26264
|
-
|
|
26265
|
-
|
|
26266
|
-
onClick() {
|
|
26267
|
-
const { pickerColumn } = this;
|
|
26268
|
-
if (pickerColumn !== null) {
|
|
26269
|
-
pickerColumn.setValue(this.value);
|
|
26173
|
+
this.useInputMode = false;
|
|
26174
|
+
this.inputModeColumn = undefined;
|
|
26175
|
+
inputEl.blur();
|
|
26176
|
+
inputEl.value = '';
|
|
26177
|
+
if (this.destroyKeypressListener) {
|
|
26178
|
+
this.destroyKeypressListener();
|
|
26179
|
+
this.destroyKeypressListener = undefined;
|
|
26270
26180
|
}
|
|
26181
|
+
this.emitInputModeChange();
|
|
26271
26182
|
}
|
|
26272
26183
|
render() {
|
|
26273
|
-
|
|
26274
|
-
const mode = getIonMode$1(this);
|
|
26275
|
-
return (hAsync(Host, { class: createColorClasses$1(color, {
|
|
26276
|
-
[mode]: true,
|
|
26277
|
-
['option-disabled']: disabled,
|
|
26278
|
-
}) }, hAsync("button", { tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", null))));
|
|
26184
|
+
return (hAsync(Host, { onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { class: "picker-before" }), hAsync("div", { class: "picker-after" }), hAsync("div", { class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", null)));
|
|
26279
26185
|
}
|
|
26280
26186
|
get el() { return getElement(this); }
|
|
26281
|
-
static get watchers() { return {
|
|
26282
|
-
"aria-label": ["onAriaLabelChange"]
|
|
26283
|
-
}; }
|
|
26284
26187
|
static get style() { return {
|
|
26285
|
-
ios:
|
|
26286
|
-
md:
|
|
26188
|
+
ios: pickerInternalIosCss,
|
|
26189
|
+
md: pickerInternalMdCss
|
|
26287
26190
|
}; }
|
|
26288
26191
|
static get cmpMeta() { return {
|
|
26289
26192
|
"$flags$": 41,
|
|
26290
|
-
"$tagName$": "ion-picker-
|
|
26193
|
+
"$tagName$": "ion-picker-internal",
|
|
26291
26194
|
"$members$": {
|
|
26292
|
-
"
|
|
26293
|
-
"value": [8],
|
|
26294
|
-
"color": [513],
|
|
26295
|
-
"ariaLabel": [32]
|
|
26195
|
+
"exitInputMode": [64]
|
|
26296
26196
|
},
|
|
26297
|
-
"$listeners$":
|
|
26197
|
+
"$listeners$": [[1, "touchstart", "preventTouchStartPropagation"]],
|
|
26298
26198
|
"$lazyBundleId$": "-",
|
|
26299
|
-
"$attrsToReflect$": [
|
|
26199
|
+
"$attrsToReflect$": []
|
|
26300
26200
|
}; }
|
|
26301
26201
|
}
|
|
26302
26202
|
|
|
@@ -35718,11 +35618,10 @@ registerComponents([
|
|
|
35718
35618
|
Nav,
|
|
35719
35619
|
NavLink,
|
|
35720
35620
|
Note,
|
|
35721
|
-
Picker$1,
|
|
35722
35621
|
Picker,
|
|
35723
|
-
PickerColumn,
|
|
35724
35622
|
PickerColumnCmp,
|
|
35725
|
-
|
|
35623
|
+
PickerColumnInternal,
|
|
35624
|
+
PickerInternal,
|
|
35726
35625
|
Popover,
|
|
35727
35626
|
ProgressBar,
|
|
35728
35627
|
Radio,
|