@ionic/core 8.8.14-dev.11783984044.10eaba06 → 8.8.14-dev.11784037956.17449639
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/index.js +1 -1
- package/components/ion-action-sheet.js +1 -1
- package/components/ion-alert.js +1 -1
- package/components/ion-back-button.js +1 -1
- package/components/ion-button.js +1 -1
- package/components/ion-card.js +1 -1
- package/components/ion-chip.js +1 -1
- package/components/ion-datetime-button.js +1 -1
- package/components/ion-datetime.js +1 -1
- package/components/ion-fab-button.js +1 -1
- package/components/ion-img.js +1 -1
- package/components/ion-infinite-scroll-content.js +1 -1
- package/components/ion-input-password-toggle.js +1 -1
- package/components/ion-input.js +1 -1
- package/components/ion-item-option.js +1 -1
- package/components/ion-item.js +1 -1
- package/components/ion-loading.js +1 -1
- package/components/ion-menu-button.js +1 -1
- package/components/ion-menu.js +1 -1
- package/components/ion-modal.js +1 -1
- package/components/ion-picker-legacy-column.d.ts +11 -0
- package/components/ion-picker-legacy-column.js +4 -0
- package/components/ion-picker-legacy.d.ts +11 -0
- package/components/ion-picker-legacy.js +4 -0
- package/components/ion-popover.js +1 -1
- package/components/ion-progress-bar.js +1 -1
- package/components/ion-radio.js +1 -1
- package/components/ion-range.js +1 -1
- package/components/ion-refresher-content.js +1 -1
- package/components/ion-refresher.js +1 -1
- package/components/ion-reorder-group.js +1 -1
- package/components/ion-reorder.js +1 -1
- package/components/ion-ripple-effect.js +1 -1
- package/components/ion-router-link.js +1 -1
- package/components/ion-router-outlet.js +1 -1
- package/components/ion-row.js +1 -1
- package/components/ion-searchbar.js +1 -1
- package/components/ion-segment-button.js +1 -1
- package/components/ion-segment-content.js +1 -1
- package/components/ion-segment-view.js +1 -1
- package/components/ion-segment.js +1 -1
- package/components/ion-select-modal.js +1 -1
- package/components/ion-select-option.js +1 -1
- package/components/ion-select-popover.js +1 -1
- package/components/ion-select.js +1 -1
- package/components/ion-skeleton-text.js +1 -1
- package/components/ion-spinner.js +1 -1
- package/components/ion-split-pane.js +1 -1
- package/components/ion-tab-bar.js +1 -1
- package/components/ion-tab-button.js +1 -1
- package/components/ion-tab.js +1 -1
- package/components/ion-tabs.js +1 -1
- package/components/ion-text.js +1 -1
- package/components/ion-textarea.js +1 -1
- package/components/ion-thumbnail.js +1 -1
- package/components/ion-title.js +1 -1
- package/components/ion-toast.js +1 -1
- package/components/ion-toggle.js +1 -1
- package/components/ion-toolbar.js +1 -1
- package/components/{p-DpV-p5Xs.js → p-5bE_Wz4Y.js} +1 -1
- package/components/p-B1BWKArA.js +4 -0
- package/components/p-B4PlLGHT.js +4 -0
- package/components/{p-r0aq7dpt.js → p-B60hm8Qv.js} +1 -1
- package/components/p-BFsEcwW9.js +4 -0
- package/components/{p-Buf_7zcy.js → p-BHrrc-3d.js} +1 -1
- package/components/{p-XJWMAP8m.js → p-BLmJ0zRm.js} +1 -1
- package/components/{p-DhkITZ-y.js → p-BSEgsdFI.js} +1 -1
- package/components/p-CFRyvUvJ.js +4 -0
- package/components/p-CU5rbWAW.js +4 -0
- package/components/{p-Dz74mwlk.js → p-Cfx4M1Bn.js} +1 -1
- package/components/p-CgLiHbz0.js +4 -0
- package/components/p-MLyEeL3Q.js +4 -0
- package/components/p-PgMVWD8U.js +4 -0
- package/components/p-k_E4tX5Z.js +4 -0
- package/components/{p-wk2QqrAo.js → p-rCa2eL0j.js} +1 -1
- package/dist/cjs/config-xninhj0J.js +201 -0
- package/dist/cjs/index.cjs.js +6 -6
- package/dist/cjs/ion-action-sheet.cjs.entry.js +7 -27
- package/dist/cjs/ion-alert.cjs.entry.js +25 -64
- package/dist/cjs/ion-app_8.cjs.entry.js +9 -23
- package/dist/cjs/ion-avatar_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-col_3.cjs.entry.js +1 -1
- package/dist/cjs/{ion-datetime.cjs.entry.js → ion-datetime_3.cjs.entry.js} +639 -1
- package/dist/cjs/ion-img.cjs.entry.js +1 -3
- package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js +2 -3
- package/dist/cjs/ion-input.cjs.entry.js +4 -4
- package/dist/cjs/ion-item_8.cjs.entry.js +2 -2
- package/dist/cjs/ion-loading.cjs.entry.js +5 -10
- package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-modal.cjs.entry.js +33 -23
- package/dist/cjs/ion-popover.cjs.entry.js +5 -9
- package/dist/cjs/ion-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/ion-radio_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-range.cjs.entry.js +3 -3
- package/dist/cjs/ion-refresher_2.cjs.entry.js +5 -6
- package/dist/cjs/ion-reorder_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-ripple-effect.cjs.entry.js +1 -1
- package/dist/cjs/ion-route_4.cjs.entry.js +2 -2
- package/dist/cjs/ion-searchbar.cjs.entry.js +5 -5
- package/dist/cjs/ion-segment-content.cjs.entry.js +1 -1
- package/dist/cjs/ion-segment-view.cjs.entry.js +2 -2
- package/dist/cjs/ion-segment_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-select-modal.cjs.entry.js +30 -84
- package/dist/cjs/ion-select_3.cjs.entry.js +49 -407
- package/dist/cjs/ion-spinner.cjs.entry.js +1 -1
- package/dist/cjs/ion-split-pane.cjs.entry.js +2 -2
- package/dist/cjs/ion-tab-bar_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-tab_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-text.cjs.entry.js +2 -2
- package/dist/cjs/ion-textarea.cjs.entry.js +2 -2
- package/dist/cjs/ion-toast.cjs.entry.js +5 -6
- package/dist/cjs/ion-toggle.cjs.entry.js +3 -3
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{overlays-DSmSrd_4.js → overlays-B9UiYZ4R.js} +30 -27
- package/dist/collection/collection-manifest.json +10 -6
- package/dist/collection/components/action-sheet/action-sheet.ios.css +2 -229
- package/dist/collection/components/action-sheet/action-sheet.js +5 -24
- package/dist/collection/components/action-sheet/action-sheet.md.css +2 -175
- package/dist/collection/components/alert/alert.ios.css +10 -280
- package/dist/collection/components/alert/alert.js +21 -59
- package/dist/collection/components/alert/alert.md.css +20 -269
- package/dist/collection/components/img/img.js +1 -6
- package/dist/collection/components/input/input.js +8 -8
- package/dist/collection/components/loading/loading.js +3 -7
- package/dist/collection/components/modal/gestures/sheet.js +8 -0
- package/dist/collection/components/modal/gestures/swipe-to-close.js +8 -0
- package/dist/collection/components/modal/modal.ios.css +8 -0
- package/dist/collection/components/modal/modal.js +17 -23
- package/dist/collection/components/modal/modal.md.css +8 -0
- package/dist/collection/components/picker-legacy/animations/ios.enter.js +27 -0
- package/dist/collection/components/picker-legacy/animations/ios.leave.js +23 -0
- package/dist/collection/components/picker-legacy/picker-interface.js +1 -0
- package/dist/collection/components/picker-legacy/picker.ios.css +300 -0
- package/dist/collection/components/picker-legacy/picker.js +890 -0
- package/dist/collection/components/picker-legacy/picker.md.css +287 -0
- package/dist/collection/components/picker-legacy-column/picker-column.ios.css +231 -0
- package/dist/collection/components/picker-legacy-column/picker-column.js +422 -0
- package/dist/collection/components/picker-legacy-column/picker-column.md.css +222 -0
- package/dist/collection/components/picker-legacy-column/test/test.utils.js +43 -0
- package/dist/collection/components/popover/popover.ios.css +0 -15
- package/dist/collection/components/popover/popover.js +3 -7
- package/dist/collection/components/popover/popover.md.css +0 -15
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/radio/radio.js +4 -4
- package/dist/collection/components/range/range.js +3 -3
- package/dist/collection/components/refresher/refresher.js +1 -1
- package/dist/collection/components/refresher-content/refresher-content.js +1 -1
- package/dist/collection/components/reorder/reorder.js +1 -1
- package/dist/collection/components/reorder-group/reorder-group.js +1 -1
- package/dist/collection/components/ripple-effect/ripple-effect.js +1 -1
- package/dist/collection/components/router-link/router-link.js +2 -2
- package/dist/collection/components/router-outlet/router-outlet.js +5 -38
- package/dist/collection/components/row/row.js +1 -1
- package/dist/collection/components/searchbar/searchbar.js +9 -9
- package/dist/collection/components/segment/segment.js +2 -2
- package/dist/collection/components/segment-button/segment-button.js +2 -2
- package/dist/collection/components/segment-content/segment-content.js +1 -1
- package/dist/collection/components/segment-view/segment-view.js +2 -2
- package/dist/collection/components/select/select.ios.css +0 -33
- package/dist/collection/components/select/select.js +16 -323
- package/dist/collection/components/select/select.md.css +0 -33
- package/dist/collection/components/select-modal/select-modal.ios.css +0 -219
- package/dist/collection/components/select-modal/select-modal.js +26 -79
- package/dist/collection/components/select-modal/select-modal.md.css +0 -165
- package/dist/collection/components/select-option/select-option.js +3 -67
- package/dist/collection/components/select-popover/select-popover.ios.css +0 -219
- package/dist/collection/components/select-popover/select-popover.js +26 -78
- package/dist/collection/components/select-popover/select-popover.md.css +0 -165
- package/dist/collection/components/skeleton-text/skeleton-text.js +2 -2
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/split-pane/split-pane.js +2 -2
- package/dist/collection/components/tab/tab.js +2 -2
- package/dist/collection/components/tab-bar/tab-bar.js +2 -2
- package/dist/collection/components/tab-button/tab-button.js +2 -2
- package/dist/collection/components/tabs/tabs.js +1 -1
- package/dist/collection/components/text/text.js +2 -2
- package/dist/collection/components/textarea/textarea.js +2 -2
- package/dist/collection/components/thumbnail/thumbnail.js +1 -1
- package/dist/collection/components/title/title.js +2 -2
- package/dist/collection/components/toast/toast.js +2 -2
- package/dist/collection/components/toggle/toggle.js +3 -3
- package/dist/collection/components/toolbar/toolbar.js +2 -2
- package/dist/collection/index.js +1 -1
- package/dist/collection/utils/overlays.js +29 -26
- package/dist/collection/utils/sanitization/index.js +18 -274
- package/dist/docs.json +1177 -485
- package/dist/esm/config-DQCONYYp.js +195 -0
- package/dist/esm/{index-AlrZKoWR.js → index-DV3sJJW8.js} +1 -1
- package/dist/esm/index.js +2 -3
- package/dist/esm/ion-accordion_2.entry.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +7 -27
- package/dist/esm/ion-alert.entry.js +24 -63
- package/dist/esm/ion-app_8.entry.js +9 -23
- package/dist/esm/ion-avatar_3.entry.js +1 -1
- package/dist/esm/ion-back-button.entry.js +1 -1
- package/dist/esm/ion-breadcrumb_2.entry.js +1 -1
- package/dist/esm/ion-col_3.entry.js +1 -1
- package/dist/esm/{ion-datetime.entry.js → ion-datetime_3.entry.js} +641 -5
- package/dist/esm/ion-fab_3.entry.js +1 -1
- package/dist/esm/ion-img.entry.js +2 -4
- package/dist/esm/ion-infinite-scroll_2.entry.js +1 -2
- package/dist/esm/ion-input-password-toggle.entry.js +1 -1
- package/dist/esm/ion-input.entry.js +5 -5
- package/dist/esm/ion-item_8.entry.js +3 -3
- package/dist/esm/ion-loading.entry.js +4 -9
- package/dist/esm/ion-menu_3.entry.js +2 -2
- package/dist/esm/ion-modal.entry.js +33 -23
- package/dist/esm/ion-popover.entry.js +5 -9
- package/dist/esm/ion-progress-bar.entry.js +1 -1
- package/dist/esm/ion-radio_2.entry.js +3 -3
- package/dist/esm/ion-range.entry.js +3 -3
- package/dist/esm/ion-refresher_2.entry.js +4 -5
- package/dist/esm/ion-reorder_2.entry.js +3 -3
- package/dist/esm/ion-ripple-effect.entry.js +1 -1
- package/dist/esm/ion-route_4.entry.js +2 -2
- package/dist/esm/ion-searchbar.entry.js +6 -6
- package/dist/esm/ion-segment-content.entry.js +1 -1
- package/dist/esm/ion-segment-view.entry.js +2 -2
- package/dist/esm/ion-segment_2.entry.js +4 -4
- package/dist/esm/ion-select-modal.entry.js +30 -84
- package/dist/esm/ion-select_3.entry.js +52 -410
- package/dist/esm/ion-spinner.entry.js +1 -1
- package/dist/esm/ion-split-pane.entry.js +2 -2
- package/dist/esm/ion-tab-bar_2.entry.js +4 -4
- package/dist/esm/ion-tab_2.entry.js +3 -3
- package/dist/esm/ion-text.entry.js +2 -2
- package/dist/esm/ion-textarea.entry.js +2 -2
- package/dist/esm/ion-toast.entry.js +4 -5
- package/dist/esm/ion-toggle.entry.js +4 -4
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{overlays-DLNOHWNc.js → overlays-Bmfhux69.js} +31 -28
- package/dist/html.html-data.json +79 -51
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-01f81ea5.entry.js +4 -0
- package/dist/ionic/p-02473803.entry.js +4 -0
- package/dist/ionic/{p-fe4aa1db.entry.js → p-0fa9c382.entry.js} +1 -1
- package/dist/ionic/p-20b1a044.entry.js +4 -0
- package/dist/ionic/p-21eb76d5.entry.js +4 -0
- package/dist/ionic/p-27d30585.entry.js +4 -0
- package/dist/ionic/p-2bb2cb18.entry.js +4 -0
- package/dist/ionic/p-2f529a55.entry.js +4 -0
- package/dist/ionic/{p-80b44b3c.entry.js → p-3353c229.entry.js} +1 -1
- package/dist/ionic/{p-a7628bc7.entry.js → p-37e720da.entry.js} +1 -1
- package/dist/ionic/{p-9177f4ac.entry.js → p-390ca786.entry.js} +1 -1
- package/dist/ionic/{p-259d0d98.entry.js → p-3a126bca.entry.js} +1 -1
- package/dist/ionic/{p-4502a274.entry.js → p-3a7d1e91.entry.js} +1 -1
- package/dist/ionic/{p-627fabd9.entry.js → p-3ae5f277.entry.js} +1 -1
- package/dist/ionic/{p-a5213260.entry.js → p-4858af1f.entry.js} +1 -1
- package/dist/ionic/p-485fda23.entry.js +4 -0
- package/dist/ionic/p-48fa7fb1.entry.js +4 -0
- package/dist/ionic/p-4baa5b82.entry.js +4 -0
- package/dist/ionic/p-4d9181c7.entry.js +4 -0
- package/dist/ionic/p-50e1194a.entry.js +4 -0
- package/dist/ionic/p-532eb373.entry.js +4 -0
- package/dist/ionic/{p-76e92a84.entry.js → p-5d1da0a2.entry.js} +1 -1
- package/dist/ionic/{p-d2c7f046.entry.js → p-75dc25ba.entry.js} +1 -1
- package/dist/ionic/{p-b9ac1fe0.entry.js → p-84d5ce05.entry.js} +1 -1
- package/dist/ionic/{p-51cd1643.entry.js → p-874b4bd8.entry.js} +1 -1
- package/dist/ionic/{p-ef93ca92.entry.js → p-8eb8ee76.entry.js} +1 -1
- package/dist/ionic/{p-14095ba5.entry.js → p-8fce95d5.entry.js} +1 -1
- package/dist/ionic/{p-db1b6738.entry.js → p-9a65ac7f.entry.js} +1 -1
- package/dist/ionic/{p-7a37b3ce.entry.js → p-9f1103ce.entry.js} +1 -1
- package/dist/ionic/p-B0zdMdR0.js +4 -0
- package/dist/ionic/{p-AlrZKoWR.js → p-DV3sJJW8.js} +1 -1
- package/dist/ionic/p-DzWaWHGc.js +4 -0
- package/dist/ionic/p-a21add2f.entry.js +4 -0
- package/dist/ionic/p-ab60b48a.entry.js +4 -0
- package/dist/ionic/{p-d8387b99.entry.js → p-c4d8641b.entry.js} +1 -1
- package/dist/ionic/{p-c93553d2.entry.js → p-cf91e738.entry.js} +1 -1
- package/dist/ionic/{p-629e4703.entry.js → p-e0be05c5.entry.js} +1 -1
- package/dist/ionic/p-ec090e0a.entry.js +4 -0
- package/dist/ionic/{p-b1599fca.entry.js → p-ef4c3bee.entry.js} +1 -1
- package/dist/ionic/p-f994dc44.entry.js +4 -0
- package/dist/ionic/{p-341032b3.entry.js → p-fabcce6c.entry.js} +1 -1
- package/dist/ionic/p-fd76f647.entry.js +4 -0
- package/dist/ionic/p-fda60562.entry.js +4 -0
- package/dist/types/components/img/img.d.ts +0 -2
- package/dist/types/components/input/input.d.ts +1 -1
- package/dist/types/components/modal/modal.d.ts +4 -11
- package/dist/types/components/picker-legacy/animations/ios.enter.d.ts +5 -0
- package/dist/types/components/picker-legacy/animations/ios.leave.d.ts +5 -0
- package/dist/types/components/picker-legacy/picker-interface.d.ts +52 -0
- package/dist/types/components/picker-legacy/picker.d.ts +158 -0
- package/dist/types/components/picker-legacy-column/picker-column.d.ts +46 -0
- package/dist/types/components/picker-legacy-column/test/test.utils.d.ts +9 -0
- package/dist/types/components/router-outlet/router-outlet.d.ts +0 -7
- package/dist/types/components/searchbar/searchbar.d.ts +1 -1
- package/dist/types/components/select/select-interface.d.ts +0 -31
- package/dist/types/components/select/select.d.ts +0 -18
- package/dist/types/components/select-option/select-option.d.ts +1 -42
- package/dist/types/components.d.ts +288 -72
- package/dist/types/index.d.ts +1 -1
- package/dist/types/interface.d.ts +1 -0
- package/dist/types/utils/config.d.ts +8 -0
- package/dist/types/utils/overlays.d.ts +9 -11
- package/dist/types/utils/sanitization/index.d.ts +2 -58
- package/hydrate/index.js +1188 -1407
- package/hydrate/index.mjs +1188 -1407
- package/package.json +5 -37
- package/components/p-279dFMvg.js +0 -4
- package/components/p-BSQPZ79H.js +0 -4
- package/components/p-BwKpO3Is.js +0 -4
- package/components/p-C-Rx1zny.js +0 -4
- package/components/p-CHzfYZbv.js +0 -4
- package/components/p-D4h1H_hh.js +0 -4
- package/components/p-LMGfIvTf.js +0 -4
- package/components/p-_lHSumhG.js +0 -4
- package/components/p-j9Da6cYO.js +0 -4
- package/components/p-jOtMJMv8.js +0 -4
- package/components/p-uTR_dEqg.js +0 -4
- package/dist/cjs/config-DWdFbSNK.js +0 -35
- package/dist/cjs/index-Cueg3U4w.js +0 -429
- package/dist/cjs/overlay-control-label-D2sdL2O8.js +0 -50
- package/dist/cjs/select-option-render-DTF50t5r.js +0 -124
- package/dist/collection/utils/overlay-control-label.js +0 -45
- package/dist/collection/utils/select-option-render.js +0 -119
- package/dist/esm/config-BwKpO3Is.js +0 -31
- package/dist/esm/index-DQSkZyOJ.js +0 -424
- package/dist/esm/overlay-control-label-BSQPZ79H.js +0 -47
- package/dist/esm/select-option-render-B8nWZRnd.js +0 -122
- package/dist/ionic/p-038eb991.entry.js +0 -4
- package/dist/ionic/p-4621c387.entry.js +0 -4
- package/dist/ionic/p-4ace7762.entry.js +0 -4
- package/dist/ionic/p-4bb3eb60.entry.js +0 -4
- package/dist/ionic/p-4e9ec5c5.entry.js +0 -4
- package/dist/ionic/p-5c3ec490.entry.js +0 -4
- package/dist/ionic/p-5d1ac2c7.entry.js +0 -4
- package/dist/ionic/p-700795f6.entry.js +0 -4
- package/dist/ionic/p-79a36078.entry.js +0 -4
- package/dist/ionic/p-913b218a.entry.js +0 -4
- package/dist/ionic/p-BDtODLZ4.js +0 -4
- package/dist/ionic/p-BSQPZ79H.js +0 -4
- package/dist/ionic/p-BwKpO3Is.js +0 -4
- package/dist/ionic/p-Cg5-OQYy.js +0 -4
- package/dist/ionic/p-DCOvXkOm.js +0 -4
- package/dist/ionic/p-a9a33367.entry.js +0 -4
- package/dist/ionic/p-ad728198.entry.js +0 -4
- package/dist/ionic/p-bfc8c629.entry.js +0 -4
- package/dist/ionic/p-c08e666a.entry.js +0 -4
- package/dist/ionic/p-ce7992c4.entry.js +0 -4
- package/dist/ionic/p-ed797c72.entry.js +0 -4
- package/dist/ionic/p-f09f9642.entry.js +0 -4
- package/dist/ionic/p-f1c06f82.entry.js +0 -4
- package/dist/ionic/p-f718fccb.entry.js +0 -4
- package/dist/types/utils/overlay-control-label.d.ts +0 -32
- package/dist/types/utils/select-option-render.d.ts +0 -53
package/hydrate/index.js
CHANGED
|
@@ -8041,7 +8041,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
|
|
|
8041
8041
|
* Should NOT include: Toast
|
|
8042
8042
|
*/
|
|
8043
8043
|
const trapKeyboardFocus = (ev, doc) => {
|
|
8044
|
-
const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover');
|
|
8044
|
+
const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
|
|
8045
8045
|
const target = ev.target;
|
|
8046
8046
|
/**
|
|
8047
8047
|
* If no active overlay, ignore this event.
|
|
@@ -8275,7 +8275,7 @@ const dismissOverlay = (doc, data, role, overlayTag, id) => {
|
|
|
8275
8275
|
*/
|
|
8276
8276
|
const getOverlays = (doc, selector) => {
|
|
8277
8277
|
if (selector === undefined) {
|
|
8278
|
-
selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover,ion-toast';
|
|
8278
|
+
selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
|
|
8279
8279
|
}
|
|
8280
8280
|
return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
|
|
8281
8281
|
};
|
|
@@ -8337,29 +8337,6 @@ const setRootAriaHidden = (hidden = false) => {
|
|
|
8337
8337
|
viewContainer.removeAttribute('aria-hidden');
|
|
8338
8338
|
}
|
|
8339
8339
|
};
|
|
8340
|
-
/**
|
|
8341
|
-
* Cleans up root `aria-hidden` and `backdrop-no-scroll` when
|
|
8342
|
-
* an overlay is removed from the DOM without going through
|
|
8343
|
-
* the `dismiss()` flow (e.g., when a framework unmounts the
|
|
8344
|
-
* overlay during a route change).
|
|
8345
|
-
*
|
|
8346
|
-
* Should be called from an overlay's `disconnectedCallback`
|
|
8347
|
-
* when the overlay was still presented at the time of removal.
|
|
8348
|
-
*/
|
|
8349
|
-
const cleanupRootFocusTrapAccessibility = () => {
|
|
8350
|
-
if (typeof document === 'undefined') {
|
|
8351
|
-
return;
|
|
8352
|
-
}
|
|
8353
|
-
const remainingOverlays = getPresentedOverlays(document);
|
|
8354
|
-
const hasRemainingLocking = remainingOverlays.some((o) => {
|
|
8355
|
-
const el = o;
|
|
8356
|
-
return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
|
|
8357
|
-
});
|
|
8358
|
-
if (!hasRemainingLocking) {
|
|
8359
|
-
setRootAriaHidden(false);
|
|
8360
|
-
document.body.classList.remove(BACKDROP_NO_SCROLL);
|
|
8361
|
-
}
|
|
8362
|
-
};
|
|
8363
8340
|
const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
|
|
8364
8341
|
var _a, _b;
|
|
8365
8342
|
if (overlay.presented) {
|
|
@@ -8425,7 +8402,29 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
8425
8402
|
* to the overlay container.
|
|
8426
8403
|
*/
|
|
8427
8404
|
if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
|
|
8428
|
-
|
|
8405
|
+
/**
|
|
8406
|
+
* Some overlays (e.g. modal) put the dialog role and label on the
|
|
8407
|
+
* `.ion-overlay-wrapper` rather than the host. Screen readers need
|
|
8408
|
+
* focus on the element with role="dialog" to properly announce and
|
|
8409
|
+
* navigate the dialog. The `[tabindex]` qualifier ensures we only
|
|
8410
|
+
* target such a wrapper when it is actually focusable; otherwise
|
|
8411
|
+
* (e.g. picker-legacy, whose role="dialog" wrapper has no tabindex)
|
|
8412
|
+
* `focus()` would be a no-op, so we fall back to the host.
|
|
8413
|
+
*/
|
|
8414
|
+
const overlayWrapper = getElementRoot(overlay.el).querySelector('[role="dialog"][tabindex]');
|
|
8415
|
+
const focusTarget = overlayWrapper !== null && overlayWrapper !== void 0 ? overlayWrapper : overlay.el;
|
|
8416
|
+
/**
|
|
8417
|
+
* `preventScroll` keeps this a pure focus move so the viewport does not
|
|
8418
|
+
* jump when the wrapper is partially off-screen (e.g. a sheet modal).
|
|
8419
|
+
* Guard the options call so an older engine that mishandles it can never
|
|
8420
|
+
* reject present(); we fall back to a plain focus() in that case.
|
|
8421
|
+
*/
|
|
8422
|
+
try {
|
|
8423
|
+
focusTarget.focus({ preventScroll: true });
|
|
8424
|
+
}
|
|
8425
|
+
catch (_c) {
|
|
8426
|
+
focusTarget.focus();
|
|
8427
|
+
}
|
|
8429
8428
|
}
|
|
8430
8429
|
/**
|
|
8431
8430
|
* If this overlay was previously dismissed without being
|
|
@@ -8761,539 +8760,6 @@ const createTriggerController = () => {
|
|
|
8761
8760
|
};
|
|
8762
8761
|
const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
|
|
8763
8762
|
|
|
8764
|
-
/**
|
|
8765
|
-
* Sanitize an untrusted HTML string.
|
|
8766
|
-
*
|
|
8767
|
-
* Parses the string into a detached DOM, removes blocked tags, strips
|
|
8768
|
-
* attributes outside the narrow `domStringAllowedAttributes` list (refer
|
|
8769
|
-
* `sanitizeElement`), and scrubs script-scheme URLs. Returns the sanitized
|
|
8770
|
-
* HTML string.
|
|
8771
|
-
*
|
|
8772
|
-
* Use this when you have an HTML string from an unknown source and need to
|
|
8773
|
-
* render it via `innerHTML`. Use `sanitizeDOMTree` instead when you already
|
|
8774
|
-
* have a DOM tree and want to sanitize it in place without a string round
|
|
8775
|
-
* trip. The two apply the same dangerous-vector scrubbing but different
|
|
8776
|
-
* attribute allowlists: this path stays narrow so existing consumers
|
|
8777
|
-
* (toast, loading, alert message, etc.) are unaffected, while
|
|
8778
|
-
* `sanitizeDOMTree` uses the wider rich-content allowlist.
|
|
8779
|
-
*
|
|
8780
|
-
* @param untrustedString - The HTML string to sanitize. Pass an
|
|
8781
|
-
* `IonicSafeString` to bypass sanitization, or `undefined` to short-circuit.
|
|
8782
|
-
* @returns The sanitized HTML string, or `undefined` if the input was
|
|
8783
|
-
* `undefined`. Returns `''` if sanitization fails or the input contains
|
|
8784
|
-
* an inline `onload=` handler.
|
|
8785
|
-
*/
|
|
8786
|
-
const sanitizeDOMString = (untrustedString) => {
|
|
8787
|
-
try {
|
|
8788
|
-
if (untrustedString instanceof IonicSafeString) {
|
|
8789
|
-
return untrustedString.value;
|
|
8790
|
-
}
|
|
8791
|
-
if (!isSanitizerEnabled() || typeof untrustedString !== 'string' || untrustedString === '') {
|
|
8792
|
-
return untrustedString;
|
|
8793
|
-
}
|
|
8794
|
-
/**
|
|
8795
|
-
* onload is fired when appending to a document
|
|
8796
|
-
* fragment in Chrome. If a string
|
|
8797
|
-
* contains onload then we should not
|
|
8798
|
-
* attempt to add this to the fragment.
|
|
8799
|
-
*/
|
|
8800
|
-
if (untrustedString.includes('onload=')) {
|
|
8801
|
-
return '';
|
|
8802
|
-
}
|
|
8803
|
-
/**
|
|
8804
|
-
* Create a document fragment
|
|
8805
|
-
* separate from the main DOM,
|
|
8806
|
-
* create a div to do our work in
|
|
8807
|
-
*/
|
|
8808
|
-
const documentFragment = document.createDocumentFragment();
|
|
8809
|
-
const workingDiv = document.createElement('div');
|
|
8810
|
-
documentFragment.appendChild(workingDiv);
|
|
8811
|
-
workingDiv.innerHTML = untrustedString;
|
|
8812
|
-
/**
|
|
8813
|
-
* Remove any elements
|
|
8814
|
-
* that are blocked
|
|
8815
|
-
*/
|
|
8816
|
-
blockedTags.forEach((blockedTag) => {
|
|
8817
|
-
const getElementsToRemove = documentFragment.querySelectorAll(blockedTag);
|
|
8818
|
-
for (let elementIndex = getElementsToRemove.length - 1; elementIndex >= 0; elementIndex--) {
|
|
8819
|
-
const element = getElementsToRemove[elementIndex];
|
|
8820
|
-
if (element.parentNode) {
|
|
8821
|
-
element.parentNode.removeChild(element);
|
|
8822
|
-
}
|
|
8823
|
-
else {
|
|
8824
|
-
documentFragment.removeChild(element);
|
|
8825
|
-
}
|
|
8826
|
-
/**
|
|
8827
|
-
* We still need to sanitize
|
|
8828
|
-
* the children of this element
|
|
8829
|
-
* as they are left behind
|
|
8830
|
-
*/
|
|
8831
|
-
const childElements = getElementChildren(element);
|
|
8832
|
-
/* eslint-disable-next-line */
|
|
8833
|
-
for (let childIndex = 0; childIndex < childElements.length; childIndex++) {
|
|
8834
|
-
sanitizeElement(childElements[childIndex], domStringAllowedAttributes);
|
|
8835
|
-
}
|
|
8836
|
-
}
|
|
8837
|
-
});
|
|
8838
|
-
/**
|
|
8839
|
-
* Go through remaining elements and remove
|
|
8840
|
-
* non-allowed attribs
|
|
8841
|
-
*/
|
|
8842
|
-
// IE does not support .children on document fragments, only .childNodes
|
|
8843
|
-
const dfChildren = getElementChildren(documentFragment);
|
|
8844
|
-
/* eslint-disable-next-line */
|
|
8845
|
-
for (let childIndex = 0; childIndex < dfChildren.length; childIndex++) {
|
|
8846
|
-
sanitizeElement(dfChildren[childIndex], domStringAllowedAttributes);
|
|
8847
|
-
}
|
|
8848
|
-
// Append document fragment to div
|
|
8849
|
-
const fragmentDiv = document.createElement('div');
|
|
8850
|
-
fragmentDiv.appendChild(documentFragment);
|
|
8851
|
-
// First child is always the div we did our work in
|
|
8852
|
-
const getInnerDiv = fragmentDiv.querySelector('div');
|
|
8853
|
-
return getInnerDiv !== null ? getInnerDiv.innerHTML : fragmentDiv.innerHTML;
|
|
8854
|
-
}
|
|
8855
|
-
catch (err) {
|
|
8856
|
-
printIonError('sanitizeDOMString', err);
|
|
8857
|
-
return '';
|
|
8858
|
-
}
|
|
8859
|
-
};
|
|
8860
|
-
/**
|
|
8861
|
-
* Sanitize an entire trusted DOM tree in place.
|
|
8862
|
-
*
|
|
8863
|
-
* Removes blocked tags (`script`, `iframe`, etc.) from the subtree and
|
|
8864
|
-
* then sanitizes attributes on every remaining element using the wider
|
|
8865
|
-
* `richContentAllowedAttributes` allowlist (refer `sanitizeElement`).
|
|
8866
|
-
* Component presentational attributes (`size`, `color`, `shape`, inline
|
|
8867
|
-
* SVG, `aria-*`, `data-*`) are preserved; `style`, event handlers (`on*`),
|
|
8868
|
-
* form/navigation-hijack attributes, script-scheme URLs, and non-image
|
|
8869
|
-
* `data:` URLs are stripped.
|
|
8870
|
-
*
|
|
8871
|
-
* Use this when you have a DOM tree the developer controls (e.g.
|
|
8872
|
-
* cloned slot content from a component) and you need to render it
|
|
8873
|
-
* elsewhere safely.
|
|
8874
|
-
*
|
|
8875
|
-
* @param root - The root element whose subtree will be sanitized in
|
|
8876
|
-
* place. No-op when the sanitizer is disabled via `Ionic.config`.
|
|
8877
|
-
*/
|
|
8878
|
-
const sanitizeDOMTree = (root) => {
|
|
8879
|
-
if (!isSanitizerEnabled()) {
|
|
8880
|
-
return;
|
|
8881
|
-
}
|
|
8882
|
-
blockedTags.forEach((tag) => {
|
|
8883
|
-
const matches = root.querySelectorAll(tag);
|
|
8884
|
-
for (let i = matches.length - 1; i >= 0; i--) {
|
|
8885
|
-
matches[i].remove();
|
|
8886
|
-
}
|
|
8887
|
-
});
|
|
8888
|
-
sanitizeElement(root, richContentAllowedAttributes, richContentAllowedAttributePrefixes);
|
|
8889
|
-
};
|
|
8890
|
-
/**
|
|
8891
|
-
* Clean up current element based on allowed attributes
|
|
8892
|
-
* and then recursively dig down into any child elements to
|
|
8893
|
-
* clean those up as well
|
|
8894
|
-
*/
|
|
8895
|
-
// TODO(FW-2832): type (using Element triggers other type errors as well)
|
|
8896
|
-
const sanitizeElement = (element, allowedAttributes, allowedAttributePrefixes = []) => {
|
|
8897
|
-
// IE uses childNodes, so ignore nodes that are not elements
|
|
8898
|
-
if (element.nodeType && element.nodeType !== 1) {
|
|
8899
|
-
return;
|
|
8900
|
-
}
|
|
8901
|
-
/**
|
|
8902
|
-
* If attributes is not a NamedNodeMap
|
|
8903
|
-
* then we should remove the element entirely.
|
|
8904
|
-
* This helps avoid DOM Clobbering attacks where
|
|
8905
|
-
* attributes is overridden.
|
|
8906
|
-
*/
|
|
8907
|
-
if (typeof NamedNodeMap !== 'undefined' && !(element.attributes instanceof NamedNodeMap)) {
|
|
8908
|
-
element.remove();
|
|
8909
|
-
return;
|
|
8910
|
-
}
|
|
8911
|
-
/**
|
|
8912
|
-
* Always strip `style` (CSS injection, `background:url()` beaconing, UI
|
|
8913
|
-
* spoofing). It is never on the allowlist, but it is removed explicitly
|
|
8914
|
-
* here because some engines (e.g. jsdom) don't enumerate the CSSOM-backed
|
|
8915
|
-
* `style` attribute in `element.attributes`, which would let the loop
|
|
8916
|
-
* below skip over it.
|
|
8917
|
-
*/
|
|
8918
|
-
element.removeAttribute('style');
|
|
8919
|
-
for (let i = element.attributes.length - 1; i >= 0; i--) {
|
|
8920
|
-
const attribute = element.attributes.item(i);
|
|
8921
|
-
const attributeName = attribute.name;
|
|
8922
|
-
const lowerName = attributeName.toLowerCase();
|
|
8923
|
-
/**
|
|
8924
|
-
* Remove any attribute that is not on the allowlist. This drops event
|
|
8925
|
-
* handlers (`on*`), `style`, the form/navigation-hijack attributes
|
|
8926
|
-
* (`formaction`, `action`, `target`), namespaced attributes like
|
|
8927
|
-
* `xlink:href`, and anything else not explicitly known to be safe.
|
|
8928
|
-
*/
|
|
8929
|
-
if (!isAttributeAllowed(lowerName, allowedAttributes, allowedAttributePrefixes)) {
|
|
8930
|
-
element.removeAttribute(attributeName);
|
|
8931
|
-
continue;
|
|
8932
|
-
}
|
|
8933
|
-
// clean up any allowed attribs
|
|
8934
|
-
// that attempt to do any JS funny-business
|
|
8935
|
-
const attributeValue = attribute.value;
|
|
8936
|
-
if (attributeValue == null) {
|
|
8937
|
-
continue;
|
|
8938
|
-
}
|
|
8939
|
-
/**
|
|
8940
|
-
* Scrub dangerous schemes from the value. The value is normalized first
|
|
8941
|
-
* (whitespace and ASCII control characters removed) so entity-obfuscated
|
|
8942
|
-
* payloads such as `java	script:`, which the parser decodes to
|
|
8943
|
-
* `java\tscript:`, are still caught. Normalizing the value also covers
|
|
8944
|
-
* namespaced attributes, where the previous `element[attributeName]`
|
|
8945
|
-
* property reflection returned `undefined` and let them slip through.
|
|
8946
|
-
*/
|
|
8947
|
-
const normalizedValue = attributeValue.replace(controlCharactersAndWhitespace, '').toLowerCase();
|
|
8948
|
-
// Script schemes are never allowed, on any attribute.
|
|
8949
|
-
if (normalizedValue.includes('javascript:') || normalizedValue.includes('vbscript:')) {
|
|
8950
|
-
element.removeAttribute(attributeName);
|
|
8951
|
-
continue;
|
|
8952
|
-
}
|
|
8953
|
-
/**
|
|
8954
|
-
* For URL-bearing attributes, allow `data:` URIs only for raster
|
|
8955
|
-
* images. Document-bearing types (`text/html`, `image/svg+xml`,
|
|
8956
|
-
* `application/*`, etc.) can carry markup or script when navigated to
|
|
8957
|
-
* or rendered, so they are stripped, while safe image types are kept so
|
|
8958
|
-
* inline images keep working.
|
|
8959
|
-
*/
|
|
8960
|
-
if (urlAttributes.includes(lowerName) &&
|
|
8961
|
-
normalizedValue.startsWith('data:') &&
|
|
8962
|
-
!safeDataImageUri.test(normalizedValue)) {
|
|
8963
|
-
element.removeAttribute(attributeName);
|
|
8964
|
-
}
|
|
8965
|
-
}
|
|
8966
|
-
/**
|
|
8967
|
-
* Sanitize any nested children
|
|
8968
|
-
*/
|
|
8969
|
-
const childElements = getElementChildren(element);
|
|
8970
|
-
/* eslint-disable-next-line */
|
|
8971
|
-
for (let i = 0; i < childElements.length; i++) {
|
|
8972
|
-
sanitizeElement(childElements[i], allowedAttributes, allowedAttributePrefixes);
|
|
8973
|
-
}
|
|
8974
|
-
};
|
|
8975
|
-
/**
|
|
8976
|
-
* IE doesn't always support .children
|
|
8977
|
-
* so we revert to .childNodes instead
|
|
8978
|
-
*/
|
|
8979
|
-
// TODO(FW-2832): type
|
|
8980
|
-
const getElementChildren = (el) => {
|
|
8981
|
-
return el.children != null ? el.children : el.childNodes;
|
|
8982
|
-
};
|
|
8983
|
-
const isSanitizerEnabled = () => {
|
|
8984
|
-
var _a;
|
|
8985
|
-
const win = window;
|
|
8986
|
-
const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
|
|
8987
|
-
if (config) {
|
|
8988
|
-
if (config.get) {
|
|
8989
|
-
return config.get('sanitizerEnabled', true);
|
|
8990
|
-
}
|
|
8991
|
-
else {
|
|
8992
|
-
return config.sanitizerEnabled === true || config.sanitizerEnabled === undefined;
|
|
8993
|
-
}
|
|
8994
|
-
}
|
|
8995
|
-
return true;
|
|
8996
|
-
};
|
|
8997
|
-
/**
|
|
8998
|
-
* Mirror known custom-element DOM properties onto attributes so they
|
|
8999
|
-
* survive `cloneNode`. Call this on a DOM subtree before cloning it for
|
|
9000
|
-
* rendering elsewhere (e.g. cloning slotted option content into an
|
|
9001
|
-
* overlay).
|
|
9002
|
-
*
|
|
9003
|
-
* Only sets the attribute when the property holds a non-empty string
|
|
9004
|
-
* and the attribute isn't already present, so existing attributes
|
|
9005
|
-
* take precedence.
|
|
9006
|
-
*
|
|
9007
|
-
* @param root - The root element whose subtree (and itself) will be
|
|
9008
|
-
* inspected.
|
|
9009
|
-
*/
|
|
9010
|
-
const reflectPropertiesToAttributes = (root) => {
|
|
9011
|
-
const candidates = [];
|
|
9012
|
-
if (root.tagName in elementPropsToReflect) {
|
|
9013
|
-
candidates.push(root);
|
|
9014
|
-
}
|
|
9015
|
-
for (const tagName of Object.keys(elementPropsToReflect)) {
|
|
9016
|
-
candidates.push(...Array.from(root.querySelectorAll(tagName.toLowerCase())));
|
|
9017
|
-
}
|
|
9018
|
-
for (const el of candidates) {
|
|
9019
|
-
if (!(el.tagName in elementPropsToReflect)) {
|
|
9020
|
-
continue;
|
|
9021
|
-
}
|
|
9022
|
-
const props = elementPropsToReflect[el.tagName];
|
|
9023
|
-
for (const prop of props) {
|
|
9024
|
-
const value = el[prop];
|
|
9025
|
-
if (typeof value === 'string' && value.length > 0 && !el.hasAttribute(prop)) {
|
|
9026
|
-
el.setAttribute(prop, value);
|
|
9027
|
-
}
|
|
9028
|
-
}
|
|
9029
|
-
}
|
|
9030
|
-
};
|
|
9031
|
-
/**
|
|
9032
|
-
* Attribute allowlist for `sanitizeDOMString`. Intentionally narrow: this
|
|
9033
|
-
* path sanitizes developer HTML strings rendered via `innerHTML` by
|
|
9034
|
-
* `ion-toast`, `ion-loading`, the `ion-alert` message,
|
|
9035
|
-
* `ion-refresher-content`, and `ion-infinite-scroll-content`, so the list
|
|
9036
|
-
* is kept to the minimum those have always needed. Broadening it here would
|
|
9037
|
-
* change sanitization output for all of those consumers, so the wider
|
|
9038
|
-
* rich-content allowlist below is deliberately scoped to `sanitizeDOMTree`
|
|
9039
|
-
* instead.
|
|
9040
|
-
*/
|
|
9041
|
-
const domStringAllowedAttributes = ['class', 'id', 'href', 'src', 'name', 'slot'];
|
|
9042
|
-
/**
|
|
9043
|
-
* Attribute allowlist for `sanitizeDOMTree` (the select rich-content path).
|
|
9044
|
-
* Covers global HTML attributes, the Ionic component presentational props
|
|
9045
|
-
* that cloned rich content (e.g. `ion-select-option` markup) relies on, and
|
|
9046
|
-
* the inert SVG presentation attributes used by inline icons.
|
|
9047
|
-
*
|
|
9048
|
-
* `aria-*` and `data-*` are allowed separately by prefix (refer
|
|
9049
|
-
* `richContentAllowedAttributePrefixes`) since they are inert and not worth
|
|
9050
|
-
* enumerating. URL-bearing names (`href`, `src`) are allowed here, but
|
|
9051
|
-
* their values are still scrubbed for script schemes in `sanitizeElement`.
|
|
9052
|
-
*
|
|
9053
|
-
* Notably absent: `style`, event handlers (`on*`), and the
|
|
9054
|
-
* form/navigation-hijack attributes (`formaction`, `action`, `target`),
|
|
9055
|
-
* which are therefore stripped.
|
|
9056
|
-
*/
|
|
9057
|
-
const richContentAllowedAttributes = [
|
|
9058
|
-
// Global / structural
|
|
9059
|
-
'class',
|
|
9060
|
-
'id',
|
|
9061
|
-
'slot',
|
|
9062
|
-
'name',
|
|
9063
|
-
'title',
|
|
9064
|
-
'alt',
|
|
9065
|
-
'lang',
|
|
9066
|
-
'dir',
|
|
9067
|
-
'role',
|
|
9068
|
-
'type',
|
|
9069
|
-
'value',
|
|
9070
|
-
'disabled',
|
|
9071
|
-
'width',
|
|
9072
|
-
'height',
|
|
9073
|
-
'href',
|
|
9074
|
-
'src',
|
|
9075
|
-
// Ionic component presentational props
|
|
9076
|
-
'color',
|
|
9077
|
-
'size',
|
|
9078
|
-
'shape',
|
|
9079
|
-
'fill',
|
|
9080
|
-
'expand',
|
|
9081
|
-
'mode',
|
|
9082
|
-
'theme',
|
|
9083
|
-
'icon',
|
|
9084
|
-
'label',
|
|
9085
|
-
'label-placement',
|
|
9086
|
-
'justify',
|
|
9087
|
-
'inset',
|
|
9088
|
-
'lines',
|
|
9089
|
-
'ios',
|
|
9090
|
-
'md',
|
|
9091
|
-
// SVG presentation attributes (compared lowercased, e.g. `viewBox`)
|
|
9092
|
-
'xmlns',
|
|
9093
|
-
'viewbox',
|
|
9094
|
-
'preserveaspectratio',
|
|
9095
|
-
'stroke',
|
|
9096
|
-
'stroke-width',
|
|
9097
|
-
'stroke-linecap',
|
|
9098
|
-
'stroke-linejoin',
|
|
9099
|
-
'stroke-opacity',
|
|
9100
|
-
'stroke-dasharray',
|
|
9101
|
-
'fill-rule',
|
|
9102
|
-
'fill-opacity',
|
|
9103
|
-
'clip-rule',
|
|
9104
|
-
'd',
|
|
9105
|
-
'points',
|
|
9106
|
-
'cx',
|
|
9107
|
-
'cy',
|
|
9108
|
-
'r',
|
|
9109
|
-
'rx',
|
|
9110
|
-
'ry',
|
|
9111
|
-
'x',
|
|
9112
|
-
'y',
|
|
9113
|
-
'x1',
|
|
9114
|
-
'y1',
|
|
9115
|
-
'x2',
|
|
9116
|
-
'y2',
|
|
9117
|
-
'transform',
|
|
9118
|
-
'opacity',
|
|
9119
|
-
];
|
|
9120
|
-
/**
|
|
9121
|
-
* Attribute-name prefixes that are always safe to keep in the rich-content
|
|
9122
|
-
* path. `aria-*` and `data-*` attributes cannot execute script or load
|
|
9123
|
-
* resources, so they are allowed wholesale rather than enumerated by name.
|
|
9124
|
-
*/
|
|
9125
|
-
const richContentAllowedAttributePrefixes = ['aria-', 'data-'];
|
|
9126
|
-
/**
|
|
9127
|
-
* Whether an attribute name (already lowercased) is safe to keep, by exact
|
|
9128
|
-
* match or by an allowed prefix.
|
|
9129
|
-
*/
|
|
9130
|
-
const isAttributeAllowed = (lowerName, allowedAttributes, allowedAttributePrefixes) => {
|
|
9131
|
-
if (allowedAttributes.includes(lowerName)) {
|
|
9132
|
-
return true;
|
|
9133
|
-
}
|
|
9134
|
-
return allowedAttributePrefixes.some((prefix) => lowerName.startsWith(prefix));
|
|
9135
|
-
};
|
|
9136
|
-
/**
|
|
9137
|
-
* Matches ASCII control characters and whitespace (including the
|
|
9138
|
-
* non-breaking space). Used to normalize attribute values before matching
|
|
9139
|
-
* a URL scheme so entity-obfuscated payloads such as `java	script:`
|
|
9140
|
-
* (decoded by the parser to `java\tscript:`) can't smuggle a scheme past
|
|
9141
|
-
* the check.
|
|
9142
|
-
*/
|
|
9143
|
-
// eslint-disable-next-line no-control-regex -- matching control characters is the point
|
|
9144
|
-
const controlCharactersAndWhitespace = /[\u0000-\u0020\u007f-\u00a0]/g;
|
|
9145
|
-
/**
|
|
9146
|
-
* Attributes whose values are URLs. Their values are scheme-checked in
|
|
9147
|
-
* `sanitizeElement` (e.g. `data:` filtering) beyond the script-scheme scrub
|
|
9148
|
-
* applied to every attribute.
|
|
9149
|
-
*/
|
|
9150
|
-
const urlAttributes = ['href', 'src'];
|
|
9151
|
-
/**
|
|
9152
|
-
* Matches a `data:` URI for a raster image type that cannot carry script.
|
|
9153
|
-
* `image/svg+xml` is deliberately excluded (SVG can execute script), as are
|
|
9154
|
-
* document types like `text/html` and `application/*`. The value is already
|
|
9155
|
-
* lowercased and whitespace-stripped before this is tested.
|
|
9156
|
-
*/
|
|
9157
|
-
const safeDataImageUri = /^data:image\/(?:png|jpe?g|gif|webp|bmp|avif|x-icon|vnd\.microsoft\.icon)[;,]/;
|
|
9158
|
-
/**
|
|
9159
|
-
* Tags removed entirely (with their subtree) before attribute sanitization.
|
|
9160
|
-
* Exported so tests can assert the set without hardcoding it.
|
|
9161
|
-
*/
|
|
9162
|
-
const blockedTags = ['script', 'style', 'iframe', 'meta', 'link', 'object', 'embed', 'base'];
|
|
9163
|
-
/**
|
|
9164
|
-
* Properties on custom elements that frameworks (Vue, Angular) often
|
|
9165
|
-
* set as DOM properties rather than attributes. `cloneNode` only copies
|
|
9166
|
-
* attributes, so these values are lost when slotted content is cloned
|
|
9167
|
-
* into an overlay. For each known custom element, we mirror the listed
|
|
9168
|
-
* properties onto attributes so the cloned copy still has the data it
|
|
9169
|
-
* needs to render.
|
|
9170
|
-
*
|
|
9171
|
-
* Keyed by uppercased tagName so the lookup matches `Element.tagName`.
|
|
9172
|
-
*/
|
|
9173
|
-
const elementPropsToReflect = {
|
|
9174
|
-
'ION-ICON': ['icon', 'name', 'src', 'ios', 'md'],
|
|
9175
|
-
};
|
|
9176
|
-
class IonicSafeString {
|
|
9177
|
-
constructor(value) {
|
|
9178
|
-
this.value = value;
|
|
9179
|
-
}
|
|
9180
|
-
}
|
|
9181
|
-
|
|
9182
|
-
/**
|
|
9183
|
-
* Converts a DOM node into a Stencil VNode (or text string) so the
|
|
9184
|
-
* resulting tree is rendered through the component's normal render
|
|
9185
|
-
* path. Rendering through Stencil ensures that scoped CSS classes
|
|
9186
|
-
* (e.g. `sc-ion-action-sheet-ionic`) are applied to every element.
|
|
9187
|
-
*
|
|
9188
|
-
* Highly recommended to pre-sanitize the source DOM (see
|
|
9189
|
-
* `getOptionContent` in select.tsx). This function performs pure
|
|
9190
|
-
* structural conversion — no security filtering.
|
|
9191
|
-
*
|
|
9192
|
-
* Preserves attributes only — properties set imperatively on the source
|
|
9193
|
-
* element (e.g. `input.value` after a user types) won't carry through.
|
|
9194
|
-
* In practice this isn't a concern: interactive controls shouldn't
|
|
9195
|
-
* appear in select-option rich content since they'd nest inside the
|
|
9196
|
-
* overlay's button/radio/checkbox wrapper, which is invalid HTML and
|
|
9197
|
-
* an accessibility issue.
|
|
9198
|
-
*
|
|
9199
|
-
* @param node - The DOM node to convert. Text nodes become strings,
|
|
9200
|
-
* element nodes become VNodes, and any other node types are skipped.
|
|
9201
|
-
* @param keyPrefix - String prefix used to build a stable VNode key,
|
|
9202
|
-
* so Stencil's diff can preserve elements across re-renders.
|
|
9203
|
-
* @param index - Position of this node among its siblings. Combined
|
|
9204
|
-
* with `keyPrefix` to form the final unique key.
|
|
9205
|
-
* @returns The converted VNode, a text string, or `null` if the node
|
|
9206
|
-
* type isn't supported.
|
|
9207
|
-
*
|
|
9208
|
-
* @internal Exported only so it can be unit tested; not part of the
|
|
9209
|
-
* public API.
|
|
9210
|
-
*/
|
|
9211
|
-
const cloneToVNode = (node, keyPrefix, index) => {
|
|
9212
|
-
var _a;
|
|
9213
|
-
if (node.nodeType === Node.TEXT_NODE) {
|
|
9214
|
-
return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
|
|
9215
|
-
}
|
|
9216
|
-
if (node.nodeType !== Node.ELEMENT_NODE) {
|
|
9217
|
-
return null;
|
|
9218
|
-
}
|
|
9219
|
-
const el = node;
|
|
9220
|
-
const tag = el.tagName.toLowerCase();
|
|
9221
|
-
const key = `${keyPrefix}-${index}`;
|
|
9222
|
-
const attrs = { key };
|
|
9223
|
-
for (let i = 0; i < el.attributes.length; i++) {
|
|
9224
|
-
const attr = el.attributes.item(i);
|
|
9225
|
-
attrs[attr.name] = attr.value;
|
|
9226
|
-
}
|
|
9227
|
-
const children = Array.from(el.childNodes)
|
|
9228
|
-
.map((child, i) => cloneToVNode(child, key, i))
|
|
9229
|
-
.filter((c) => c !== null);
|
|
9230
|
-
return hAsync(tag, attrs, children);
|
|
9231
|
-
};
|
|
9232
|
-
/**
|
|
9233
|
-
* Renders cloned DOM content as Stencil JSX. Walking the source DOM
|
|
9234
|
-
* into VNodes (rather than injecting it via innerHTML) keeps the
|
|
9235
|
-
* content inside Stencil's render path, so scoped CSS classes are
|
|
9236
|
-
* applied automatically and component attributes like `size` or
|
|
9237
|
-
* `color` survive intact.
|
|
9238
|
-
*
|
|
9239
|
-
* Span elements should be used when this content renders within buttons,
|
|
9240
|
-
* depending on the select interface. Buttons can only have phrasing
|
|
9241
|
-
* content to prevent accessibility issues.
|
|
9242
|
-
*
|
|
9243
|
-
* @param id - Unique identifier for generating stable virtual DOM keys.
|
|
9244
|
-
* @param content - The HTMLElement container whose child nodes will be cloned.
|
|
9245
|
-
* @param className - CSS class applied to the wrapper element.
|
|
9246
|
-
* @param useSpan - Whether to use a span element instead of a div for the wrapper.
|
|
9247
|
-
*/
|
|
9248
|
-
const renderClonedContent = (id, content, className, useSpan = false) => {
|
|
9249
|
-
const Tag = useSpan ? 'span' : 'div';
|
|
9250
|
-
const keyPrefix = `${className}-${id}`;
|
|
9251
|
-
/**
|
|
9252
|
-
* Do not remove. This is the only sanitization pass for callers that pass
|
|
9253
|
-
* an `HTMLElement` straight to `renderOptionLabel` (e.g. vanilla JS)
|
|
9254
|
-
* without going through `getOptionContent`, which sanitizes upstream.
|
|
9255
|
-
* `cloneToVNode` does pure structural conversion and no security
|
|
9256
|
-
* filtering, so dropping this call would reopen an XSS hole on the
|
|
9257
|
-
* direct `HTMLElement` path.
|
|
9258
|
-
*/
|
|
9259
|
-
sanitizeDOMTree(content);
|
|
9260
|
-
return (hAsync(Tag, { class: className, key: keyPrefix }, Array.from(content.childNodes).map((child, i) => cloneToVNode(child, keyPrefix, i))));
|
|
9261
|
-
};
|
|
9262
|
-
/**
|
|
9263
|
-
* Renders the label content for a select option within an overlay
|
|
9264
|
-
* interface based on the presence of rich content.
|
|
9265
|
-
*
|
|
9266
|
-
* Span elements should be used when this content renders within buttons,
|
|
9267
|
-
* depending on the select interface. Buttons can only have phrasing
|
|
9268
|
-
* content to prevent accessibility issues.
|
|
9269
|
-
*
|
|
9270
|
-
* @param option - The content option data containing label, slots,
|
|
9271
|
-
* and description.
|
|
9272
|
-
* @param className - The base CSS class for the label element.
|
|
9273
|
-
* @param useSpan - Whether to use a span element instead of a div for the label.
|
|
9274
|
-
*/
|
|
9275
|
-
const renderOptionLabel = (option, className, useSpan = false) => {
|
|
9276
|
-
const { id, label, startContent, endContent, description } = option;
|
|
9277
|
-
const hasRichContent = !!startContent || !!endContent || !!description;
|
|
9278
|
-
const Tag = useSpan ? 'span' : 'div';
|
|
9279
|
-
// Render simple string label if there is no rich content to display
|
|
9280
|
-
if (!hasRichContent && (typeof label === 'string' || !label)) {
|
|
9281
|
-
return (hAsync(Tag, { class: className, key: `${className}-${id}` }, label));
|
|
9282
|
-
}
|
|
9283
|
-
// Render the main label
|
|
9284
|
-
const labelEl = typeof label === 'string' || !label ? (
|
|
9285
|
-
// Label is a simple string or undefined
|
|
9286
|
-
hAsync(Tag, { key: `${className}-label-${id}` }, label)) : (
|
|
9287
|
-
// Label is an HTMLElement with potential rich content
|
|
9288
|
-
renderClonedContent(id, label, `${className}-text`, useSpan));
|
|
9289
|
-
// No rich content, render just the label
|
|
9290
|
-
if (!hasRichContent) {
|
|
9291
|
-
return (hAsync(Tag, { class: className, key: `${className}-${id}` }, labelEl));
|
|
9292
|
-
}
|
|
9293
|
-
// Render label with rich content (start, end, description)
|
|
9294
|
-
return (hAsync(Tag, { class: `${className} ${className}-has-rich-content`, key: `${className}-${id}` }, startContent && renderClonedContent(id, startContent, 'select-option-start', useSpan), hAsync(Tag, { class: "select-option-content", key: `${className}-content-${id}` }, labelEl, description && (hAsync(Tag, { class: "select-option-description", key: `${className}-desc-${id}` }, description))), endContent && renderClonedContent(id, endContent, 'select-option-end', useSpan)));
|
|
9295
|
-
};
|
|
9296
|
-
|
|
9297
8763
|
const hostContext = (selector, el) => {
|
|
9298
8764
|
return el.closest(selector) !== null;
|
|
9299
8765
|
};
|
|
@@ -10149,7 +9615,7 @@ const createAnimation = (animationId) => {
|
|
|
10149
9615
|
/**
|
|
10150
9616
|
* iOS Action Sheet Enter Animation
|
|
10151
9617
|
*/
|
|
10152
|
-
const iosEnterAnimation$
|
|
9618
|
+
const iosEnterAnimation$6 = (baseEl) => {
|
|
10153
9619
|
const baseAnimation = createAnimation();
|
|
10154
9620
|
const backdropAnimation = createAnimation();
|
|
10155
9621
|
const wrapperAnimation = createAnimation();
|
|
@@ -10173,7 +9639,7 @@ const iosEnterAnimation$5 = (baseEl) => {
|
|
|
10173
9639
|
/**
|
|
10174
9640
|
* iOS Action Sheet Leave Animation
|
|
10175
9641
|
*/
|
|
10176
|
-
const iosLeaveAnimation$
|
|
9642
|
+
const iosLeaveAnimation$6 = (baseEl) => {
|
|
10177
9643
|
const baseAnimation = createAnimation();
|
|
10178
9644
|
const backdropAnimation = createAnimation();
|
|
10179
9645
|
const wrapperAnimation = createAnimation();
|
|
@@ -10230,9 +9696,9 @@ const mdLeaveAnimation$5 = (baseEl) => {
|
|
|
10230
9696
|
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
10231
9697
|
};
|
|
10232
9698
|
|
|
10233
|
-
const actionSheetIosCss = () => `.action-sheet-button-label-has-rich-content.sc-ion-action-sheet-ios,.alert-radio-label-has-rich-content.sc-ion-action-sheet-ios,.alert-checkbox-label-has-rich-content.sc-ion-action-sheet-ios,.select-option-label-has-rich-content.sc-ion-action-sheet-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}.action-sheet-button-label-has-rich-content.sc-ion-action-sheet-ios,.alert-radio-label-has-rich-content.sc-ion-action-sheet-ios,.alert-checkbox-label-has-rich-content.sc-ion-action-sheet-ios,.select-option-content.sc-ion-action-sheet-ios{-ms-flex:1;flex:1}.action-sheet-button-label-text.sc-ion-action-sheet-ios,.alert-checkbox-label-text.sc-ion-action-sheet-ios,.alert-radio-label-text.sc-ion-action-sheet-ios,.select-option-label-text.sc-ion-action-sheet-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}.select-option-start.sc-ion-action-sheet-ios,.select-option-end.sc-ion-action-sheet-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.select-option-description.sc-ion-action-sheet-ios{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}.select-option-label.sc-ion-action-sheet-ios:not(.select-option-label-has-rich-content){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-option-label-has-rich-content.sc-ion-action-sheet-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ion-radio.select-option-has-rich-content.sc-ion-action-sheet-ios::part(label),ion-radio.select-option-has-rich-content.sc-ion-action-sheet-ios [part~="label"],ion-checkbox.select-option-has-rich-content.sc-ion-action-sheet-ios::part(label),ion-checkbox.select-option-has-rich-content.sc-ion-action-sheet-ios [part~="label"],.select-option-content.sc-ion-action-sheet-ios{-ms-flex:1;flex:1;white-space:normal}.select-option-start.sc-ion-action-sheet-ios>ion-avatar.sc-ion-action-sheet-ios,.select-option-start.sc-ion-action-sheet-ios>ion-img.sc-ion-action-sheet-ios,.select-option-start.sc-ion-action-sheet-ios>ion-thumbnail.sc-ion-action-sheet-ios,.select-option-start.sc-ion-action-sheet-ios>img.sc-ion-action-sheet-ios,.select-option-start.sc-ion-action-sheet-ios>svg.sc-ion-action-sheet-ios,.select-option-end.sc-ion-action-sheet-ios>ion-avatar.sc-ion-action-sheet-ios,.select-option-end.sc-ion-action-sheet-ios>ion-img.sc-ion-action-sheet-ios,.select-option-end.sc-ion-action-sheet-ios>ion-thumbnail.sc-ion-action-sheet-ios,.select-option-end.sc-ion-action-sheet-ios>img.sc-ion-action-sheet-ios,.select-option-end.sc-ion-action-sheet-ios>svg.sc-ion-action-sheet-ios{width:44px;height:44px}.select-option-start.sc-ion-action-sheet-ios>ion-icon.sc-ion-action-sheet-ios,.select-option-end.sc-ion-action-sheet-ios>ion-icon.sc-ion-action-sheet-ios{width:28px;height:28px}.action-sheet-button-label-text.sc-ion-action-sheet-ios{-ms-flex-pack:center;justify-content:center}.select-option-has-rich-content.sc-ion-action-sheet-ios{-webkit-padding-end:16px;padding-inline-end:16px}.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.sc-ion-action-sheet-ios:disabled{color:var(--button-color-disabled);opacity:0.4}.action-sheet-button.sc-ion-action-sheet-ios:disabled ion-icon.sc-ion-action-sheet-ios{color:currentColor}.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:not(.ion-activated){color:var(--button-color-focused)}.action-sheet-button.ion-focused.sc-ion-action-sheet-ios:not(.ion-activated)::after{background:var(--button-background-focused);opacity:var(--button-background-focused-opacity)}.action-sheet-button.ion-focused.sc-ion-action-sheet-ios:not(.ion-activated).action-sheet-selected::after{background:var(--button-background-focused, var(--button-background-selected));opacity:var(--button-background-focused-opacity, var(--button-background-selected-opacity))}@media (any-hover: hover){.action-sheet-button.sc-ion-action-sheet-ios:not(:disabled):hover{color:var(--button-color-hover)}.action-sheet-button.sc-ion-action-sheet-ios:not(:disabled):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, var(--ion-background-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-step-150, var(--ion-background-color, #fff)));--button-background-selected-opacity:1;--button-color:var(--ion-color-primary, #0054e9);--button-color-disabled:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));--color:var(--ion-color-step-400, var(--ion-text-color-step-600, #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);padding-bottom:var(--ion-safe-area-bottom, 0);-webkit-box-sizing:content-box;box-sizing:content-box}.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, var(--ion-text-color-step-600, #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, #c5000f)}@media (any-hover: hover){.action-sheet-destructive.sc-ion-action-sheet-ios:hover{color:var(--ion-color-danger, #c5000f)}}`;
|
|
9699
|
+
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.sc-ion-action-sheet-ios:disabled{color:var(--button-color-disabled);opacity:0.4}.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:not(:disabled):hover{color:var(--button-color-hover)}.action-sheet-button.sc-ion-action-sheet-ios:not(:disabled):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, var(--ion-background-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-step-150, var(--ion-background-color, #fff)));--button-background-selected-opacity:1;--button-color:var(--ion-color-primary, #0054e9);--button-color-disabled:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));--color:var(--ion-color-step-400, var(--ion-text-color-step-600, #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);padding-bottom:var(--ion-safe-area-bottom, 0);-webkit-box-sizing:content-box;box-sizing:content-box}.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, var(--ion-text-color-step-600, #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, #c5000f)}@media (any-hover: hover){.action-sheet-destructive.sc-ion-action-sheet-ios:hover{color:var(--ion-color-danger, #c5000f)}}`;
|
|
10234
9700
|
|
|
10235
|
-
const actionSheetMdCss = () => `.
|
|
9701
|
+
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.sc-ion-action-sheet-md:disabled{color:var(--button-color-disabled);opacity:0.4}.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:not(:disabled):hover{color:var(--button-color-hover)}.action-sheet-button.sc-ion-action-sheet-md:not(:disabled):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, var(--ion-text-color-step-150, #262626));--button-color-disabled:var(--button-color);--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}`;
|
|
10236
9702
|
|
|
10237
9703
|
/**
|
|
10238
9704
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
@@ -10329,7 +9795,7 @@ class ActionSheet {
|
|
|
10329
9795
|
async present() {
|
|
10330
9796
|
const unlock = await this.lockController.lock();
|
|
10331
9797
|
await this.delegateController.attachViewToDom();
|
|
10332
|
-
await present(this, 'actionSheetEnter', iosEnterAnimation$
|
|
9798
|
+
await present(this, 'actionSheetEnter', iosEnterAnimation$6, mdEnterAnimation$5);
|
|
10333
9799
|
unlock();
|
|
10334
9800
|
}
|
|
10335
9801
|
/**
|
|
@@ -10346,7 +9812,7 @@ class ActionSheet {
|
|
|
10346
9812
|
*/
|
|
10347
9813
|
async dismiss(data, role) {
|
|
10348
9814
|
const unlock = await this.lockController.lock();
|
|
10349
|
-
const dismissed = await dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation$
|
|
9815
|
+
const dismissed = await dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation$6, mdLeaveAnimation$5);
|
|
10350
9816
|
if (dismissed) {
|
|
10351
9817
|
this.delegateController.removeViewFromDom();
|
|
10352
9818
|
}
|
|
@@ -10515,10 +9981,6 @@ class ActionSheet {
|
|
|
10515
9981
|
this.gesture = undefined;
|
|
10516
9982
|
}
|
|
10517
9983
|
this.triggerController.removeClickListener();
|
|
10518
|
-
// Clean up aria-hidden if removed without dismiss() being called
|
|
10519
|
-
if (this.presented) {
|
|
10520
|
-
cleanupRootFocusTrapAccessibility();
|
|
10521
|
-
}
|
|
10522
9984
|
}
|
|
10523
9985
|
componentWillLoad() {
|
|
10524
9986
|
var _a;
|
|
@@ -10607,26 +10069,12 @@ class ActionSheet {
|
|
|
10607
10069
|
if (isRadio) {
|
|
10608
10070
|
htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
|
|
10609
10071
|
}
|
|
10610
|
-
|
|
10611
|
-
* Cast to `SelectActionSheetButton` to access rich content
|
|
10612
|
-
* fields (`startContent`, `endContent`, `description`)
|
|
10613
|
-
* that are passed through from `ion-select` but not
|
|
10614
|
-
* part of the public `ActionSheetButton` interface.
|
|
10615
|
-
*/
|
|
10616
|
-
const richButton = b;
|
|
10617
|
-
const optionLabelOptions = {
|
|
10618
|
-
id: buttonId,
|
|
10619
|
-
label: richButton.text,
|
|
10620
|
-
startContent: richButton.startContent,
|
|
10621
|
-
endContent: richButton.endContent,
|
|
10622
|
-
description: richButton.description,
|
|
10623
|
-
};
|
|
10624
|
-
return (hAsync("button", Object.assign({}, htmlAttrs, { role: isRadio ? 'radio' : undefined, type: "button", id: buttonId, class: Object.assign(Object.assign({}, buttonClass$2(b)), (isRadio && { 'action-sheet-selected': isActiveRadio })), onClick: () => {
|
|
10072
|
+
return (hAsync("button", Object.assign({}, htmlAttrs, { role: isRadio ? 'radio' : undefined, type: "button", id: buttonId, class: Object.assign(Object.assign({}, buttonClass$3(b)), (isRadio && { 'action-sheet-selected': isActiveRadio })), onClick: () => {
|
|
10625
10073
|
if (isRadio) {
|
|
10626
10074
|
this.selectRadioButton(b);
|
|
10627
10075
|
}
|
|
10628
10076
|
this.buttonClick(b);
|
|
10629
|
-
}, disabled: b.disabled, tabIndex: tabIndex }), hAsync("span", { class: "action-sheet-button-inner" }, b.icon && hAsync("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }),
|
|
10077
|
+
}, disabled: b.disabled, tabIndex: tabIndex }), 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)));
|
|
10630
10078
|
});
|
|
10631
10079
|
}
|
|
10632
10080
|
render() {
|
|
@@ -10636,12 +10084,12 @@ class ActionSheet {
|
|
|
10636
10084
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
10637
10085
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
10638
10086
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
10639
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
10087
|
+
return (hAsync(Host, Object.assign({ key: '48b63b870f2816b4cad3c606f3d9956854cee79a', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
10640
10088
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
10641
|
-
}, 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", { key: '
|
|
10089
|
+
}, 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", { key: '41dd5781f139d26b3feea33ab387451aeafacd51', tappable: this.backdropDismiss }), hAsync("div", { key: 'f797c2657782e4e83adf90d2d796108e857a1fc0', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '8e74209321fc5e8712e3e293c91a6fa036ea45ab', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: 'c811860be2eed0b6c73fc2cc5a59cb94db2e8912', class: "action-sheet-container" }, hAsync("div", { key: 'd36ee14b70d73eb5cd69e0c57bc5cc31daf86ab3', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("div", { key: '922695de191edc86451eed2552acc4f54993ea52', id: headerID, class: {
|
|
10642
10090
|
'action-sheet-title': true,
|
|
10643
10091
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
10644
|
-
} }, header, this.subHeader && hAsync("div", { key: '
|
|
10092
|
+
} }, header, this.subHeader && hAsync("div", { key: 'a119d4a93668e829f7106f11cbbdd437310f3e80', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: '1d27f36d09bedd2e4c61fea9dd9d05f8f9271aef', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'ed13658176c54cc45808a54a0331c297430d9bc6' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: '5208e3e3535b775a443cef6fb1decd790db69b0c', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: 'b7ba489e1ee50524a5b4af670eef787844a16286', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: 'b3f88898114855853259f0001def26b4bd6e4a98' })))))), hAsync("div", { key: '0dfd0fcdc633bf565990eaa06679608e749cf8f9', tabindex: "0", "aria-hidden": "true" })));
|
|
10645
10093
|
}
|
|
10646
10094
|
get el() { return getElement(this); }
|
|
10647
10095
|
static get watchers() { return {
|
|
@@ -10690,59 +10138,178 @@ class ActionSheet {
|
|
|
10690
10138
|
"$attrsToReflect$": []
|
|
10691
10139
|
}; }
|
|
10692
10140
|
}
|
|
10693
|
-
const buttonClass$
|
|
10141
|
+
const buttonClass$3 = (button) => {
|
|
10694
10142
|
return Object.assign({ 'action-sheet-button': true, 'ion-activatable': !button.disabled, 'ion-focusable': !button.disabled, [`action-sheet-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
|
|
10695
10143
|
};
|
|
10696
10144
|
|
|
10697
10145
|
const ENABLE_HTML_CONTENT_DEFAULT = false;
|
|
10698
10146
|
|
|
10699
|
-
// TODO(FW-6886, FW-6892, FW-6891): Remove this file in favor of the Modular Ionic component config. Each overlay will be able to select its own defaults for label placement and justify based on the interface and mode, so this utility will no longer be necessary.
|
|
10700
10147
|
/**
|
|
10701
|
-
*
|
|
10702
|
-
*
|
|
10703
|
-
|
|
10704
|
-
|
|
10705
|
-
|
|
10706
|
-
|
|
10707
|
-
|
|
10708
|
-
|
|
10709
|
-
|
|
10710
|
-
|
|
10711
|
-
|
|
10712
|
-
|
|
10713
|
-
|
|
10148
|
+
* Does a simple sanitization of all elements
|
|
10149
|
+
* in an untrusted string
|
|
10150
|
+
*/
|
|
10151
|
+
const sanitizeDOMString = (untrustedString) => {
|
|
10152
|
+
try {
|
|
10153
|
+
if (untrustedString instanceof IonicSafeString) {
|
|
10154
|
+
return untrustedString.value;
|
|
10155
|
+
}
|
|
10156
|
+
if (!isSanitizerEnabled() || typeof untrustedString !== 'string' || untrustedString === '') {
|
|
10157
|
+
return untrustedString;
|
|
10158
|
+
}
|
|
10159
|
+
/**
|
|
10160
|
+
* onload is fired when appending to a document
|
|
10161
|
+
* fragment in Chrome. If a string
|
|
10162
|
+
* contains onload then we should not
|
|
10163
|
+
* attempt to add this to the fragment.
|
|
10164
|
+
*/
|
|
10165
|
+
if (untrustedString.includes('onload=')) {
|
|
10166
|
+
return '';
|
|
10167
|
+
}
|
|
10168
|
+
/**
|
|
10169
|
+
* Create a document fragment
|
|
10170
|
+
* separate from the main DOM,
|
|
10171
|
+
* create a div to do our work in
|
|
10172
|
+
*/
|
|
10173
|
+
const documentFragment = document.createDocumentFragment();
|
|
10174
|
+
const workingDiv = document.createElement('div');
|
|
10175
|
+
documentFragment.appendChild(workingDiv);
|
|
10176
|
+
workingDiv.innerHTML = untrustedString;
|
|
10177
|
+
/**
|
|
10178
|
+
* Remove any elements
|
|
10179
|
+
* that are blocked
|
|
10180
|
+
*/
|
|
10181
|
+
blockedTags.forEach((blockedTag) => {
|
|
10182
|
+
const getElementsToRemove = documentFragment.querySelectorAll(blockedTag);
|
|
10183
|
+
for (let elementIndex = getElementsToRemove.length - 1; elementIndex >= 0; elementIndex--) {
|
|
10184
|
+
const element = getElementsToRemove[elementIndex];
|
|
10185
|
+
if (element.parentNode) {
|
|
10186
|
+
element.parentNode.removeChild(element);
|
|
10187
|
+
}
|
|
10188
|
+
else {
|
|
10189
|
+
documentFragment.removeChild(element);
|
|
10190
|
+
}
|
|
10191
|
+
/**
|
|
10192
|
+
* We still need to sanitize
|
|
10193
|
+
* the children of this element
|
|
10194
|
+
* as they are left behind
|
|
10195
|
+
*/
|
|
10196
|
+
const childElements = getElementChildren(element);
|
|
10197
|
+
/* eslint-disable-next-line */
|
|
10198
|
+
for (let childIndex = 0; childIndex < childElements.length; childIndex++) {
|
|
10199
|
+
sanitizeElement(childElements[childIndex]);
|
|
10200
|
+
}
|
|
10201
|
+
}
|
|
10202
|
+
});
|
|
10203
|
+
/**
|
|
10204
|
+
* Go through remaining elements and remove
|
|
10205
|
+
* non-allowed attribs
|
|
10206
|
+
*/
|
|
10207
|
+
// IE does not support .children on document fragments, only .childNodes
|
|
10208
|
+
const dfChildren = getElementChildren(documentFragment);
|
|
10209
|
+
/* eslint-disable-next-line */
|
|
10210
|
+
for (let childIndex = 0; childIndex < dfChildren.length; childIndex++) {
|
|
10211
|
+
sanitizeElement(dfChildren[childIndex]);
|
|
10212
|
+
}
|
|
10213
|
+
// Append document fragment to div
|
|
10214
|
+
const fragmentDiv = document.createElement('div');
|
|
10215
|
+
fragmentDiv.appendChild(documentFragment);
|
|
10216
|
+
// First child is always the div we did our work in
|
|
10217
|
+
const getInnerDiv = fragmentDiv.querySelector('div');
|
|
10218
|
+
return getInnerDiv !== null ? getInnerDiv.innerHTML : fragmentDiv.innerHTML;
|
|
10219
|
+
}
|
|
10220
|
+
catch (err) {
|
|
10221
|
+
printIonError('sanitizeDOMString', err);
|
|
10222
|
+
return '';
|
|
10223
|
+
}
|
|
10224
|
+
};
|
|
10225
|
+
/**
|
|
10226
|
+
* Clean up current element based on allowed attributes
|
|
10227
|
+
* and then recursively dig down into any child elements to
|
|
10228
|
+
* clean those up as well
|
|
10714
10229
|
*/
|
|
10715
|
-
|
|
10716
|
-
|
|
10717
|
-
|
|
10230
|
+
// TODO(FW-2832): type (using Element triggers other type errors as well)
|
|
10231
|
+
const sanitizeElement = (element) => {
|
|
10232
|
+
// IE uses childNodes, so ignore nodes that are not elements
|
|
10233
|
+
if (element.nodeType && element.nodeType !== 1) {
|
|
10234
|
+
return;
|
|
10235
|
+
}
|
|
10236
|
+
/**
|
|
10237
|
+
* If attributes is not a NamedNodeMap
|
|
10238
|
+
* then we should remove the element entirely.
|
|
10239
|
+
* This helps avoid DOM Clobbering attacks where
|
|
10240
|
+
* attributes is overridden.
|
|
10241
|
+
*/
|
|
10242
|
+
if (typeof NamedNodeMap !== 'undefined' && !(element.attributes instanceof NamedNodeMap)) {
|
|
10243
|
+
element.remove();
|
|
10244
|
+
return;
|
|
10245
|
+
}
|
|
10246
|
+
for (let i = element.attributes.length - 1; i >= 0; i--) {
|
|
10247
|
+
const attribute = element.attributes.item(i);
|
|
10248
|
+
const attributeName = attribute.name;
|
|
10249
|
+
// remove non-allowed attribs
|
|
10250
|
+
if (!allowedAttributes.includes(attributeName.toLowerCase())) {
|
|
10251
|
+
element.removeAttribute(attributeName);
|
|
10252
|
+
continue;
|
|
10253
|
+
}
|
|
10254
|
+
// clean up any allowed attribs
|
|
10255
|
+
// that attempt to do any JS funny-business
|
|
10256
|
+
const attributeValue = attribute.value;
|
|
10257
|
+
/**
|
|
10258
|
+
* We also need to check the property value
|
|
10259
|
+
* as javascript: can allow special characters
|
|
10260
|
+
* such as 	 and still be valid (i.e. java	script)
|
|
10261
|
+
*/
|
|
10262
|
+
const propertyValue = element[attributeName];
|
|
10263
|
+
/* eslint-disable */
|
|
10264
|
+
if ((attributeValue != null && attributeValue.toLowerCase().includes('javascript:')) ||
|
|
10265
|
+
(propertyValue != null && propertyValue.toLowerCase().includes('javascript:'))) {
|
|
10266
|
+
element.removeAttribute(attributeName);
|
|
10267
|
+
}
|
|
10268
|
+
/* eslint-enable */
|
|
10269
|
+
}
|
|
10270
|
+
/**
|
|
10271
|
+
* Sanitize any nested children
|
|
10272
|
+
*/
|
|
10273
|
+
const childElements = getElementChildren(element);
|
|
10274
|
+
/* eslint-disable-next-line */
|
|
10275
|
+
for (let i = 0; i < childElements.length; i++) {
|
|
10276
|
+
sanitizeElement(childElements[i]);
|
|
10718
10277
|
}
|
|
10719
|
-
return 'end';
|
|
10720
10278
|
};
|
|
10721
10279
|
/**
|
|
10722
|
-
*
|
|
10723
|
-
*
|
|
10724
|
-
* - `ios`: `"space-between"` for radio in `alert` and `popover`. The
|
|
10725
|
-
* `modal` interface falls back to `"start"`. Checkbox is always `"start"`
|
|
10726
|
-
* on iOS.
|
|
10727
|
-
* - everything else (e.g. `md`): `"start"`.
|
|
10728
|
-
*
|
|
10729
|
-
* `interfaceType` is optional; only `"modal"` changes the result, so
|
|
10730
|
-
* callers that aren't a modal can omit it.
|
|
10731
|
-
*
|
|
10732
|
-
* Used by `select-popover` and `select-modal` as the fallback when an
|
|
10733
|
-
* option doesn't explicitly set `justify`.
|
|
10280
|
+
* IE doesn't always support .children
|
|
10281
|
+
* so we revert to .childNodes instead
|
|
10734
10282
|
*/
|
|
10735
|
-
|
|
10736
|
-
|
|
10737
|
-
|
|
10283
|
+
// TODO(FW-2832): type
|
|
10284
|
+
const getElementChildren = (el) => {
|
|
10285
|
+
return el.children != null ? el.children : el.childNodes;
|
|
10286
|
+
};
|
|
10287
|
+
const isSanitizerEnabled = () => {
|
|
10288
|
+
var _a;
|
|
10289
|
+
const win = window;
|
|
10290
|
+
const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
|
|
10291
|
+
if (config) {
|
|
10292
|
+
if (config.get) {
|
|
10293
|
+
return config.get('sanitizerEnabled', true);
|
|
10294
|
+
}
|
|
10295
|
+
else {
|
|
10296
|
+
return config.sanitizerEnabled === true || config.sanitizerEnabled === undefined;
|
|
10297
|
+
}
|
|
10738
10298
|
}
|
|
10739
|
-
return
|
|
10299
|
+
return true;
|
|
10740
10300
|
};
|
|
10301
|
+
const allowedAttributes = ['class', 'id', 'href', 'src', 'name', 'slot'];
|
|
10302
|
+
const blockedTags = ['script', 'style', 'iframe', 'meta', 'link', 'object', 'embed'];
|
|
10303
|
+
class IonicSafeString {
|
|
10304
|
+
constructor(value) {
|
|
10305
|
+
this.value = value;
|
|
10306
|
+
}
|
|
10307
|
+
}
|
|
10741
10308
|
|
|
10742
10309
|
/**
|
|
10743
10310
|
* iOS Alert Enter Animation
|
|
10744
10311
|
*/
|
|
10745
|
-
const iosEnterAnimation$
|
|
10312
|
+
const iosEnterAnimation$5 = (baseEl) => {
|
|
10746
10313
|
const baseAnimation = createAnimation();
|
|
10747
10314
|
const backdropAnimation = createAnimation();
|
|
10748
10315
|
const wrapperAnimation = createAnimation();
|
|
@@ -10767,7 +10334,7 @@ const iosEnterAnimation$4 = (baseEl) => {
|
|
|
10767
10334
|
/**
|
|
10768
10335
|
* iOS Alert Leave Animation
|
|
10769
10336
|
*/
|
|
10770
|
-
const iosLeaveAnimation$
|
|
10337
|
+
const iosLeaveAnimation$5 = (baseEl) => {
|
|
10771
10338
|
const baseAnimation = createAnimation();
|
|
10772
10339
|
const backdropAnimation = createAnimation();
|
|
10773
10340
|
const wrapperAnimation = createAnimation();
|
|
@@ -10824,9 +10391,9 @@ const mdLeaveAnimation$4 = (baseEl) => {
|
|
|
10824
10391
|
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
10825
10392
|
};
|
|
10826
10393
|
|
|
10827
|
-
const alertIosCss = () => `.action-sheet-button-label-has-rich-content.sc-ion-alert-ios,.alert-radio-label-has-rich-content.sc-ion-alert-ios,.alert-checkbox-label-has-rich-content.sc-ion-alert-ios,.select-option-label-has-rich-content.sc-ion-alert-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}.action-sheet-button-label-has-rich-content.sc-ion-alert-ios,.alert-radio-label-has-rich-content.sc-ion-alert-ios,.alert-checkbox-label-has-rich-content.sc-ion-alert-ios,.select-option-content.sc-ion-alert-ios{-ms-flex:1;flex:1}.action-sheet-button-label-text.sc-ion-alert-ios,.alert-checkbox-label-text.sc-ion-alert-ios,.alert-radio-label-text.sc-ion-alert-ios,.select-option-label-text.sc-ion-alert-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}.select-option-start.sc-ion-alert-ios,.select-option-end.sc-ion-alert-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.select-option-description.sc-ion-alert-ios{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}.select-option-label.sc-ion-alert-ios:not(.select-option-label-has-rich-content){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-option-label-has-rich-content.sc-ion-alert-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ion-radio.select-option-has-rich-content.sc-ion-alert-ios::part(label),ion-radio.select-option-has-rich-content.sc-ion-alert-ios [part~="label"],ion-checkbox.select-option-has-rich-content.sc-ion-alert-ios::part(label),ion-checkbox.select-option-has-rich-content.sc-ion-alert-ios [part~="label"],.select-option-content.sc-ion-alert-ios{-ms-flex:1;flex:1;white-space:normal}.select-option-start.sc-ion-alert-ios>ion-avatar.sc-ion-alert-ios,.select-option-start.sc-ion-alert-ios>ion-img.sc-ion-alert-ios,.select-option-start.sc-ion-alert-ios>ion-thumbnail.sc-ion-alert-ios,.select-option-start.sc-ion-alert-ios>img.sc-ion-alert-ios,.select-option-start.sc-ion-alert-ios>svg.sc-ion-alert-ios,.select-option-end.sc-ion-alert-ios>ion-avatar.sc-ion-alert-ios,.select-option-end.sc-ion-alert-ios>ion-img.sc-ion-alert-ios,.select-option-end.sc-ion-alert-ios>ion-thumbnail.sc-ion-alert-ios,.select-option-end.sc-ion-alert-ios>img.sc-ion-alert-ios,.select-option-end.sc-ion-alert-ios>svg.sc-ion-alert-ios{width:44px;height:44px}.select-option-start.sc-ion-alert-ios>ion-icon.sc-ion-alert-ios,.select-option-end.sc-ion-alert-ios>ion-icon.sc-ion-alert-ios{width:28px;height:28px}.action-sheet-button-label-text.sc-ion-alert-ios{-ms-flex-pack:center;justify-content:center}.select-option-has-rich-content.sc-ion-alert-ios{-webkit-padding-end:16px;padding-inline-end:16px}.sc-ion-alert-ios-h{--min-width:250px;--width:auto;--min-height:auto;--height:auto;--max-height:90%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-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-alert-ios-h{display:none}.alert-top.sc-ion-alert-ios-h{padding-top:50px;-ms-flex-align:start;align-items:flex-start}.alert-wrapper.sc-ion-alert-ios{display:-ms-flexbox;display:flex;-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);background:var(--background);contain:content;opacity:0;z-index:10}.alert-title.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.alert-sub-title.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-weight:normal}.alert-message.sc-ion-alert-ios,.alert-input-group.sc-ion-alert-ios{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-overflow-scrolling:touch;overflow-y:auto;overscroll-behavior-y:contain}.alert-checkbox-label.sc-ion-alert-ios,.alert-radio-label.sc-ion-alert-ios{overflow-wrap:anywhere}@media (any-pointer: coarse){.alert-checkbox-group.sc-ion-alert-ios::-webkit-scrollbar,.alert-radio-group.sc-ion-alert-ios::-webkit-scrollbar,.alert-message.sc-ion-alert-ios::-webkit-scrollbar{display:none}}.alert-input.sc-ion-alert-ios{padding-left:0;padding-right:0;padding-top:10px;padding-bottom:10px;width:100%;border:0;background:inherit;font:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.alert-button-group.sc-ion-alert-ios{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%}.alert-button-group-vertical.sc-ion-alert-ios{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.alert-button.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;border:0;font-size:0.875rem;line-height:1.25rem;z-index:0}.alert-button.ion-focused.sc-ion-alert-ios,.alert-tappable.ion-focused.sc-ion-alert-ios{background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.alert-button-inner.sc-ion-alert-ios{display:-ms-flexbox;display:flex;-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%;min-height:inherit}.radio-label-placement-start.sc-ion-alert-ios,.checkbox-label-placement-start.sc-ion-alert-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.radio-label-placement-end.sc-ion-alert-ios,.checkbox-label-placement-end.sc-ion-alert-ios{-ms-flex-direction:row;flex-direction:row}.radio-justify-start.sc-ion-alert-ios,.checkbox-justify-start.sc-ion-alert-ios{-ms-flex-pack:start;justify-content:start}.radio-justify-end.sc-ion-alert-ios,.checkbox-justify-end.sc-ion-alert-ios{-ms-flex-pack:end;justify-content:end}.radio-justify-space-between.sc-ion-alert-ios,.checkbox-justify-space-between.sc-ion-alert-ios{-ms-flex-pack:justify;justify-content:space-between}.alert-input-disabled.sc-ion-alert-ios,.alert-checkbox-button-disabled.sc-ion-alert-ios .alert-button-inner.sc-ion-alert-ios,.alert-radio-button-disabled.sc-ion-alert-ios .alert-button-inner.sc-ion-alert-ios{cursor:default;opacity:0.5;pointer-events:none}.alert-tappable.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:-ms-flexbox;display:flex;width:100%;border:0;background:transparent;font-size:inherit;line-height:initial;text-align:start;-webkit-appearance:none;-moz-appearance:none;appearance:none;contain:content}.alert-button.sc-ion-alert-ios,.alert-checkbox.sc-ion-alert-ios,.alert-input.sc-ion-alert-ios,.alert-radio.sc-ion-alert-ios{outline:none}.alert-radio-icon.sc-ion-alert-ios,.alert-checkbox-icon.sc-ion-alert-ios,.alert-checkbox-inner.sc-ion-alert-ios{-webkit-box-sizing:border-box;box-sizing:border-box}textarea.alert-input.sc-ion-alert-ios{min-height:37px;resize:none}.sc-ion-alert-ios-h{--background:var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)));--max-width:clamp(270px, 16.875rem, 324px);--backdrop-opacity:var(--ion-backdrop-opacity, 0.3);font-size:max(14px, 0.875rem)}.alert-wrapper.sc-ion-alert-ios{border-radius:13px;-webkit-box-shadow:none;box-shadow:none;overflow:hidden}.alert-button.sc-ion-alert-ios .alert-button-inner.sc-ion-alert-ios{pointer-events:none}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.alert-translucent.sc-ion-alert-ios-h .alert-wrapper.sc-ion-alert-ios{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.9);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.alert-head.sc-ion-alert-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:7px;text-align:center}.alert-title.sc-ion-alert-ios{margin-top:8px;color:var(--ion-text-color, #000);font-size:max(17px, 1.0625rem);font-weight:600}.alert-sub-title.sc-ion-alert-ios{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));font-size:max(14px, 0.875rem)}.alert-message.sc-ion-alert-ios,.alert-input-group.sc-ion-alert-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:21px;color:var(--ion-text-color, #000);font-size:max(13px, 0.8125rem);text-align:center}.alert-message.sc-ion-alert-ios{max-height:240px}.alert-message.sc-ion-alert-ios:empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:12px}.alert-input.sc-ion-alert-ios{border-radius:7px;margin-top:10px;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px;padding-top:7px;padding-bottom:7px;border:0.55px solid var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf));background-color:var(--ion-background-color, #fff);-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:1rem}.alert-input.sc-ion-alert-ios::-webkit-input-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-ios::-moz-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-ios:-ms-input-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-ios::-ms-input-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-ios::placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-ios::-ms-clear{display:none}.alert-input.sc-ion-alert-ios::-webkit-date-and-time-value{height:18px}.alert-radio-group.sc-ion-alert-ios,.alert-checkbox-group.sc-ion-alert-ios{-ms-scroll-chaining:none;overscroll-behavior:contain;max-height:240px;border-top:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);overflow-y:auto;-webkit-overflow-scrolling:touch}.alert-tappable.sc-ion-alert-ios{min-height:44px}.alert-radio-label.sc-ion-alert-ios{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px;padding-top:13px;padding-bottom:13px;color:var(--ion-text-color, #000)}[aria-checked=true].sc-ion-alert-ios .alert-radio-label.sc-ion-alert-ios{color:var(--ion-color-primary, #0054e9)}.alert-radio-icon.sc-ion-alert-ios{position:relative;-ms-flex-negative:0;flex-shrink:0;min-width:30px}[aria-checked=true].sc-ion-alert-ios .alert-radio-inner.sc-ion-alert-ios{top:-7px;position:absolute;width:6px;height:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:2px;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--ion-color-primary, #0054e9)}[aria-checked=true].sc-ion-alert-ios .radio-label-placement-end.sc-ion-alert-ios .alert-radio-inner.sc-ion-alert-ios{inset-inline-end:7px}[aria-checked=true].sc-ion-alert-ios .radio-label-placement-start.sc-ion-alert-ios .alert-radio-inner.sc-ion-alert-ios{inset-inline-start:7px}.alert-checkbox-label.sc-ion-alert-ios{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px;padding-top:13px;padding-bottom:13px;color:var(--ion-text-color, #000)}.alert-checkbox-icon.sc-ion-alert-ios{border-radius:50%;margin-top:10px;margin-bottom:10px;position:relative;-ms-flex-negative:0;flex-shrink:0;width:min(1.375rem, 55.836px);height:min(1.375rem, 55.836px);border-width:0.125rem;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));background-color:var(--ion-item-background, var(--ion-background-color, #fff));contain:strict}.checkbox-label-placement-end.sc-ion-alert-ios .alert-checkbox-icon.sc-ion-alert-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:6px;margin-inline-end:6px}.checkbox-label-placement-start.sc-ion-alert-ios .alert-checkbox-icon.sc-ion-alert-ios{-webkit-margin-start:6px;margin-inline-start:6px;-webkit-margin-end:16px;margin-inline-end:16px}[aria-checked=true].sc-ion-alert-ios .alert-checkbox-icon.sc-ion-alert-ios{border-color:var(--ion-color-primary, #0054e9);background-color:var(--ion-color-primary, #0054e9)}[aria-checked=true].sc-ion-alert-ios .alert-checkbox-inner.sc-ion-alert-ios{top:calc(min(1.375rem, 55.836px) / 8);position:absolute;width:calc(min(1.375rem, 55.836px) / 6 + 1px);height:calc(min(1.375rem, 55.836px) * 0.5);-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--ion-background-color, #fff)}[aria-checked=true].sc-ion-alert-ios .checkbox-label-placement-end.sc-ion-alert-ios .alert-checkbox-inner.sc-ion-alert-ios{inset-inline-start:calc(min(1.375rem, 55.836px) / 3)}[aria-checked=true].sc-ion-alert-ios .checkbox-label-placement-start.sc-ion-alert-ios .alert-checkbox-inner.sc-ion-alert-ios{inset-inline-end:calc(min(1.375rem, 55.836px) / 3)}.alert-button-group.sc-ion-alert-ios{-webkit-margin-end:-0.55px;margin-inline-end:-0.55px;-ms-flex-wrap:wrap;flex-wrap:wrap}.alert-button-group-vertical.sc-ion-alert-ios .alert-button.sc-ion-alert-ios{border-right:none}[dir=rtl].sc-ion-alert-ios-h .alert-button-group-vertical.sc-ion-alert-ios .alert-button.sc-ion-alert-ios:last-child,[dir=rtl] .sc-ion-alert-ios-h .alert-button-group-vertical.sc-ion-alert-ios .alert-button.sc-ion-alert-ios:last-child{border-right:none}[dir=rtl].sc-ion-alert-ios .alert-button-group-vertical.sc-ion-alert-ios .alert-button.sc-ion-alert-ios:last-child{border-right:none}@supports selector(:dir(rtl)){.alert-button-group-vertical.sc-ion-alert-ios .alert-button.sc-ion-alert-ios:last-child:dir(rtl){border-right:none}}.alert-button.sc-ion-alert-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:0;-ms-flex:1 1 auto;flex:1 1 auto;min-width:50%;height:max(44px, 2.75rem);border-top:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);border-right:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);background-color:transparent;color:var(--ion-color-primary, #0054e9);font-size:max(17px, 1.0625rem);overflow:hidden}[dir=rtl].sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:first-child,[dir=rtl] .sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:first-child{border-right:0}[dir=rtl].sc-ion-alert-ios .alert-button.sc-ion-alert-ios:first-child{border-right:0}@supports selector(:dir(rtl)){.alert-button.sc-ion-alert-ios:first-child:dir(rtl){border-right:0}}.alert-button.sc-ion-alert-ios:last-child{border-right:0;font-weight:bold}[dir=rtl].sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:last-child,[dir=rtl] .sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:last-child{border-right:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}[dir=rtl].sc-ion-alert-ios .alert-button.sc-ion-alert-ios:last-child{border-right:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}@supports selector(:dir(rtl)){.alert-button.sc-ion-alert-ios:last-child:dir(rtl){border-right:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}}.alert-button.ion-activated.sc-ion-alert-ios{background-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}.alert-button-role-destructive.sc-ion-alert-ios,.alert-button-role-destructive.ion-activated.sc-ion-alert-ios,.alert-button-role-destructive.ion-focused.sc-ion-alert-ios{color:var(--ion-color-danger, #c5000f)}`;
|
|
10394
|
+
const alertIosCss = () => `.sc-ion-alert-ios-h{--min-width:250px;--width:auto;--min-height:auto;--height:auto;--max-height:90%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-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-alert-ios-h{display:none}.alert-top.sc-ion-alert-ios-h{padding-top:50px;-ms-flex-align:start;align-items:flex-start}.alert-wrapper.sc-ion-alert-ios{display:-ms-flexbox;display:flex;-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);background:var(--background);contain:content;opacity:0;z-index:10}.alert-title.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.alert-sub-title.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-weight:normal}.alert-message.sc-ion-alert-ios,.alert-input-group.sc-ion-alert-ios{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-overflow-scrolling:touch;overflow-y:auto;overscroll-behavior-y:contain}.alert-checkbox-label.sc-ion-alert-ios,.alert-radio-label.sc-ion-alert-ios{overflow-wrap:anywhere}@media (any-pointer: coarse){.alert-checkbox-group.sc-ion-alert-ios::-webkit-scrollbar,.alert-radio-group.sc-ion-alert-ios::-webkit-scrollbar,.alert-message.sc-ion-alert-ios::-webkit-scrollbar{display:none}}.alert-input.sc-ion-alert-ios{padding-left:0;padding-right:0;padding-top:10px;padding-bottom:10px;width:100%;border:0;background:inherit;font:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.alert-button-group.sc-ion-alert-ios{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%}.alert-button-group-vertical.sc-ion-alert-ios{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.alert-button.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;border:0;font-size:0.875rem;line-height:1.25rem;z-index:0}.alert-button.ion-focused.sc-ion-alert-ios,.alert-tappable.ion-focused.sc-ion-alert-ios{background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.alert-button-inner.sc-ion-alert-ios{display:-ms-flexbox;display:flex;-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%;min-height:inherit}.alert-input-disabled.sc-ion-alert-ios,.alert-checkbox-button-disabled.sc-ion-alert-ios .alert-button-inner.sc-ion-alert-ios,.alert-radio-button-disabled.sc-ion-alert-ios .alert-button-inner.sc-ion-alert-ios{cursor:default;opacity:0.5;pointer-events:none}.alert-tappable.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:-ms-flexbox;display:flex;width:100%;border:0;background:transparent;font-size:inherit;line-height:initial;text-align:start;-webkit-appearance:none;-moz-appearance:none;appearance:none;contain:content}.alert-button.sc-ion-alert-ios,.alert-checkbox.sc-ion-alert-ios,.alert-input.sc-ion-alert-ios,.alert-radio.sc-ion-alert-ios{outline:none}.alert-radio-icon.sc-ion-alert-ios,.alert-checkbox-icon.sc-ion-alert-ios,.alert-checkbox-inner.sc-ion-alert-ios{-webkit-box-sizing:border-box;box-sizing:border-box}textarea.alert-input.sc-ion-alert-ios{min-height:37px;resize:none}.sc-ion-alert-ios-h{--background:var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9)));--max-width:clamp(270px, 16.875rem, 324px);--backdrop-opacity:var(--ion-backdrop-opacity, 0.3);font-size:max(14px, 0.875rem)}.alert-wrapper.sc-ion-alert-ios{border-radius:13px;-webkit-box-shadow:none;box-shadow:none;overflow:hidden}.alert-button.sc-ion-alert-ios .alert-button-inner.sc-ion-alert-ios{pointer-events:none}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.alert-translucent.sc-ion-alert-ios-h .alert-wrapper.sc-ion-alert-ios{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.9);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.alert-head.sc-ion-alert-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:7px;text-align:center}.alert-title.sc-ion-alert-ios{margin-top:8px;color:var(--ion-text-color, #000);font-size:max(17px, 1.0625rem);font-weight:600}.alert-sub-title.sc-ion-alert-ios{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));font-size:max(14px, 0.875rem)}.alert-message.sc-ion-alert-ios,.alert-input-group.sc-ion-alert-ios{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:21px;color:var(--ion-text-color, #000);font-size:max(13px, 0.8125rem);text-align:center}.alert-message.sc-ion-alert-ios{max-height:240px}.alert-message.sc-ion-alert-ios:empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:12px}.alert-input.sc-ion-alert-ios{border-radius:7px;margin-top:10px;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px;padding-top:7px;padding-bottom:7px;border:0.55px solid var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf));background-color:var(--ion-background-color, #fff);-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:1rem}.alert-input.sc-ion-alert-ios::-webkit-input-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-ios::-moz-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-ios:-ms-input-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-ios::-ms-input-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-ios::placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-ios::-ms-clear{display:none}.alert-input.sc-ion-alert-ios::-webkit-date-and-time-value{height:18px}.alert-radio-group.sc-ion-alert-ios,.alert-checkbox-group.sc-ion-alert-ios{-ms-scroll-chaining:none;overscroll-behavior:contain;max-height:240px;border-top:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);overflow-y:auto;-webkit-overflow-scrolling:touch}.alert-tappable.sc-ion-alert-ios{min-height:44px}.alert-radio-label.sc-ion-alert-ios{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px;padding-top:13px;padding-bottom:13px;-ms-flex:1;flex:1;-ms-flex-order:0;order:0;color:var(--ion-text-color, #000)}[aria-checked=true].sc-ion-alert-ios .alert-radio-label.sc-ion-alert-ios{color:var(--ion-color-primary, #0054e9)}.alert-radio-icon.sc-ion-alert-ios{position:relative;-ms-flex-order:1;order:1;min-width:30px}[aria-checked=true].sc-ion-alert-ios .alert-radio-inner.sc-ion-alert-ios{top:-7px;position:absolute;width:6px;height:12px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:2px;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--ion-color-primary, #0054e9)}[aria-checked=true].sc-ion-alert-ios .alert-radio-inner.sc-ion-alert-ios{inset-inline-start:7px}.alert-checkbox-label.sc-ion-alert-ios{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px;padding-top:13px;padding-bottom:13px;-ms-flex:1;flex:1;color:var(--ion-text-color, #000)}.alert-checkbox-icon.sc-ion-alert-ios{border-radius:50%;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:6px;margin-inline-end:6px;margin-top:10px;margin-bottom:10px;position:relative;width:min(1.375rem, 55.836px);height:min(1.375rem, 55.836px);border-width:0.125rem;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));background-color:var(--ion-item-background, var(--ion-background-color, #fff));contain:strict}[aria-checked=true].sc-ion-alert-ios .alert-checkbox-icon.sc-ion-alert-ios{border-color:var(--ion-color-primary, #0054e9);background-color:var(--ion-color-primary, #0054e9)}[aria-checked=true].sc-ion-alert-ios .alert-checkbox-inner.sc-ion-alert-ios{top:calc(min(1.375rem, 55.836px) / 8);position:absolute;width:calc(min(1.375rem, 55.836px) / 6 + 1px);height:calc(min(1.375rem, 55.836px) * 0.5);-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--ion-background-color, #fff)}[aria-checked=true].sc-ion-alert-ios .alert-checkbox-inner.sc-ion-alert-ios{inset-inline-start:calc(min(1.375rem, 55.836px) / 3)}.alert-button-group.sc-ion-alert-ios{-webkit-margin-end:-0.55px;margin-inline-end:-0.55px;-ms-flex-wrap:wrap;flex-wrap:wrap}.alert-button-group-vertical.sc-ion-alert-ios .alert-button.sc-ion-alert-ios{border-right:none}[dir=rtl].sc-ion-alert-ios-h .alert-button-group-vertical.sc-ion-alert-ios .alert-button.sc-ion-alert-ios:last-child,[dir=rtl] .sc-ion-alert-ios-h .alert-button-group-vertical.sc-ion-alert-ios .alert-button.sc-ion-alert-ios:last-child{border-right:none}[dir=rtl].sc-ion-alert-ios .alert-button-group-vertical.sc-ion-alert-ios .alert-button.sc-ion-alert-ios:last-child{border-right:none}@supports selector(:dir(rtl)){.alert-button-group-vertical.sc-ion-alert-ios .alert-button.sc-ion-alert-ios:last-child:dir(rtl){border-right:none}}.alert-button.sc-ion-alert-ios{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:0;-ms-flex:1 1 auto;flex:1 1 auto;min-width:50%;height:max(44px, 2.75rem);border-top:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);border-right:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);background-color:transparent;color:var(--ion-color-primary, #0054e9);font-size:max(17px, 1.0625rem);overflow:hidden}[dir=rtl].sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:first-child,[dir=rtl] .sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:first-child{border-right:0}[dir=rtl].sc-ion-alert-ios .alert-button.sc-ion-alert-ios:first-child{border-right:0}@supports selector(:dir(rtl)){.alert-button.sc-ion-alert-ios:first-child:dir(rtl){border-right:0}}.alert-button.sc-ion-alert-ios:last-child{border-right:0;font-weight:bold}[dir=rtl].sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:last-child,[dir=rtl] .sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:last-child{border-right:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}[dir=rtl].sc-ion-alert-ios .alert-button.sc-ion-alert-ios:last-child{border-right:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}@supports selector(:dir(rtl)){.alert-button.sc-ion-alert-ios:last-child:dir(rtl){border-right:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}}.alert-button.ion-activated.sc-ion-alert-ios{background-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}.alert-button-role-destructive.sc-ion-alert-ios,.alert-button-role-destructive.ion-activated.sc-ion-alert-ios,.alert-button-role-destructive.ion-focused.sc-ion-alert-ios{color:var(--ion-color-danger, #c5000f)}`;
|
|
10828
10395
|
|
|
10829
|
-
const alertMdCss = () => `.action-sheet-button-label-has-rich-content.sc-ion-alert-md,.alert-radio-label-has-rich-content.sc-ion-alert-md,.alert-checkbox-label-has-rich-content.sc-ion-alert-md,.select-option-label-has-rich-content.sc-ion-alert-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}.action-sheet-button-label-has-rich-content.sc-ion-alert-md,.alert-radio-label-has-rich-content.sc-ion-alert-md,.alert-checkbox-label-has-rich-content.sc-ion-alert-md,.select-option-content.sc-ion-alert-md{-ms-flex:1;flex:1}.action-sheet-button-label-text.sc-ion-alert-md,.alert-checkbox-label-text.sc-ion-alert-md,.alert-radio-label-text.sc-ion-alert-md,.select-option-label-text.sc-ion-alert-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}.select-option-start.sc-ion-alert-md,.select-option-end.sc-ion-alert-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.select-option-description.sc-ion-alert-md{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}.select-option-label.sc-ion-alert-md:not(.select-option-label-has-rich-content){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-option-label-has-rich-content.sc-ion-alert-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ion-radio.select-option-has-rich-content.sc-ion-alert-md::part(label),ion-radio.select-option-has-rich-content.sc-ion-alert-md [part~="label"],ion-checkbox.select-option-has-rich-content.sc-ion-alert-md::part(label),ion-checkbox.select-option-has-rich-content.sc-ion-alert-md [part~="label"],.select-option-content.sc-ion-alert-md{-ms-flex:1;flex:1;white-space:normal}.select-option-start.sc-ion-alert-md>ion-avatar.sc-ion-alert-md,.select-option-end.sc-ion-alert-md>ion-avatar.sc-ion-alert-md{width:40px;height:40px}.select-option-start.sc-ion-alert-md>ion-icon.sc-ion-alert-md,.select-option-end.sc-ion-alert-md>ion-icon.sc-ion-alert-md{width:24px;height:24px}.select-option-start.sc-ion-alert-md>ion-img.sc-ion-alert-md,.select-option-start.sc-ion-alert-md>img.sc-ion-alert-md,.select-option-start.sc-ion-alert-md>svg.sc-ion-alert-md,.select-option-start.sc-ion-alert-md>ion-thumbnail.sc-ion-alert-md,.select-option-end.sc-ion-alert-md>ion-img.sc-ion-alert-md,.select-option-end.sc-ion-alert-md>img.sc-ion-alert-md,.select-option-end.sc-ion-alert-md>svg.sc-ion-alert-md,.select-option-end.sc-ion-alert-md>ion-thumbnail.sc-ion-alert-md{width:56px;height:56px}.select-option-start.sc-ion-alert-md>video.sc-ion-alert-md,.select-option-end.sc-ion-alert-md>video.sc-ion-alert-md{width:114px;height:56px}.sc-ion-alert-md-h{--min-width:250px;--width:auto;--min-height:auto;--height:auto;--max-height:90%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-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-alert-md-h{display:none}.alert-top.sc-ion-alert-md-h{padding-top:50px;-ms-flex-align:start;align-items:flex-start}.alert-wrapper.sc-ion-alert-md{display:-ms-flexbox;display:flex;-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);background:var(--background);contain:content;opacity:0;z-index:10}.alert-title.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.alert-sub-title.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-weight:normal}.alert-message.sc-ion-alert-md,.alert-input-group.sc-ion-alert-md{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-overflow-scrolling:touch;overflow-y:auto;overscroll-behavior-y:contain}.alert-checkbox-label.sc-ion-alert-md,.alert-radio-label.sc-ion-alert-md{overflow-wrap:anywhere}@media (any-pointer: coarse){.alert-checkbox-group.sc-ion-alert-md::-webkit-scrollbar,.alert-radio-group.sc-ion-alert-md::-webkit-scrollbar,.alert-message.sc-ion-alert-md::-webkit-scrollbar{display:none}}.alert-input.sc-ion-alert-md{padding-left:0;padding-right:0;padding-top:10px;padding-bottom:10px;width:100%;border:0;background:inherit;font:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.alert-button-group.sc-ion-alert-md{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%}.alert-button-group-vertical.sc-ion-alert-md{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.alert-button.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;border:0;font-size:0.875rem;line-height:1.25rem;z-index:0}.alert-button.ion-focused.sc-ion-alert-md,.alert-tappable.ion-focused.sc-ion-alert-md{background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.alert-button-inner.sc-ion-alert-md{display:-ms-flexbox;display:flex;-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%;min-height:inherit}.radio-label-placement-start.sc-ion-alert-md,.checkbox-label-placement-start.sc-ion-alert-md{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.radio-label-placement-end.sc-ion-alert-md,.checkbox-label-placement-end.sc-ion-alert-md{-ms-flex-direction:row;flex-direction:row}.radio-justify-start.sc-ion-alert-md,.checkbox-justify-start.sc-ion-alert-md{-ms-flex-pack:start;justify-content:start}.radio-justify-end.sc-ion-alert-md,.checkbox-justify-end.sc-ion-alert-md{-ms-flex-pack:end;justify-content:end}.radio-justify-space-between.sc-ion-alert-md,.checkbox-justify-space-between.sc-ion-alert-md{-ms-flex-pack:justify;justify-content:space-between}.alert-input-disabled.sc-ion-alert-md,.alert-checkbox-button-disabled.sc-ion-alert-md .alert-button-inner.sc-ion-alert-md,.alert-radio-button-disabled.sc-ion-alert-md .alert-button-inner.sc-ion-alert-md{cursor:default;opacity:0.5;pointer-events:none}.alert-tappable.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:-ms-flexbox;display:flex;width:100%;border:0;background:transparent;font-size:inherit;line-height:initial;text-align:start;-webkit-appearance:none;-moz-appearance:none;appearance:none;contain:content}.alert-button.sc-ion-alert-md,.alert-checkbox.sc-ion-alert-md,.alert-input.sc-ion-alert-md,.alert-radio.sc-ion-alert-md{outline:none}.alert-radio-icon.sc-ion-alert-md,.alert-checkbox-icon.sc-ion-alert-md,.alert-checkbox-inner.sc-ion-alert-md{-webkit-box-sizing:border-box;box-sizing:border-box}textarea.alert-input.sc-ion-alert-md{min-height:37px;resize:none}.sc-ion-alert-md-h{--background:var(--ion-overlay-background-color, var(--ion-background-color, #fff));--max-width:280px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.32);font-size:0.875rem}.alert-wrapper.sc-ion-alert-md{border-radius:4px;-webkit-box-shadow:0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);box-shadow:0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12)}.alert-head.sc-ion-alert-md{-webkit-padding-start:24px;padding-inline-start:24px;-webkit-padding-end:24px;padding-inline-end:24px;padding-top:20px;padding-bottom:15px;text-align:start}.alert-title.sc-ion-alert-md{color:var(--ion-text-color, #000);font-size:1.25rem;font-weight:500}.alert-sub-title.sc-ion-alert-md{color:var(--ion-text-color, #000);font-size:1rem}.alert-message.sc-ion-alert-md,.alert-input-group.sc-ion-alert-md{-webkit-padding-start:24px;padding-inline-start:24px;-webkit-padding-end:24px;padding-inline-end:24px;padding-top:20px;padding-bottom:20px;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))}.alert-message.sc-ion-alert-md{font-size:1rem}@media screen and (max-width: 767px){.alert-message.sc-ion-alert-md{max-height:266px}}.alert-message.sc-ion-alert-md:empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.alert-head.sc-ion-alert-md+.alert-message.sc-ion-alert-md{padding-top:0}.alert-input.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px;border-bottom:1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));color:var(--ion-text-color, #000)}.alert-input.sc-ion-alert-md::-webkit-input-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-md::-moz-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-md:-ms-input-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-md::-ms-input-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-md::placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-md::-ms-clear{display:none}.alert-input.sc-ion-alert-md:focus{margin-bottom:4px;border-bottom:2px solid var(--ion-color-primary, #0054e9)}.alert-radio-group.sc-ion-alert-md,.alert-checkbox-group.sc-ion-alert-md{position:relative;border-top:1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));border-bottom:1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));overflow:auto}@media screen and (max-width: 767px){.alert-radio-group.sc-ion-alert-md,.alert-checkbox-group.sc-ion-alert-md{max-height:266px}}.alert-tappable.sc-ion-alert-md{position:relative;min-height:48px}.alert-radio-label.sc-ion-alert-md{padding-top:13px;padding-bottom:13px;max-width:calc(100% - 20px);color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));font-size:1rem}.radio-label-placement-end.sc-ion-alert-md .alert-radio-label.sc-ion-alert-md{-webkit-padding-start:56px;padding-inline-start:56px;-webkit-padding-end:24px;padding-inline-end:24px}.radio-label-placement-start.sc-ion-alert-md .alert-radio-label.sc-ion-alert-md{-webkit-padding-start:24px;padding-inline-start:24px;-webkit-padding-end:56px;padding-inline-end:56px}.alert-radio-icon.sc-ion-alert-md{top:0;border-radius:50%;display:block;position:relative;-ms-flex-negative:0;flex-shrink:0;width:20px;height:20px;border-width:2px;border-style:solid;border-color:var(--ion-color-step-550, var(--ion-background-color-step-550, #737373))}.radio-label-placement-end.sc-ion-alert-md .alert-radio-icon.sc-ion-alert-md{inset-inline-start:24px}.radio-label-placement-start.sc-ion-alert-md .alert-radio-icon.sc-ion-alert-md{inset-inline-end:24px}.alert-radio-inner.sc-ion-alert-md{top:3px;border-radius:50%;position:absolute;width:10px;height:10px;-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--ion-color-primary, #0054e9)}.alert-radio-inner.sc-ion-alert-md{inset-inline-start:3px}[aria-checked=true].sc-ion-alert-md .alert-radio-label.sc-ion-alert-md{color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626))}[aria-checked=true].sc-ion-alert-md .alert-radio-icon.sc-ion-alert-md{border-color:var(--ion-color-primary, #0054e9)}[aria-checked=true].sc-ion-alert-md .alert-radio-inner.sc-ion-alert-md{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}.alert-checkbox-label.sc-ion-alert-md{padding-top:13px;padding-bottom:13px;max-width:calc(100% - 16px);color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));font-size:1rem}.checkbox-label-placement-end.sc-ion-alert-md .alert-checkbox-label.sc-ion-alert-md{-webkit-padding-start:56px;padding-inline-start:56px;-webkit-padding-end:24px;padding-inline-end:24px}.checkbox-label-placement-start.sc-ion-alert-md .alert-checkbox-label.sc-ion-alert-md{-webkit-padding-start:24px;padding-inline-start:24px;-webkit-padding-end:56px;padding-inline-end:56px}.alert-checkbox-icon.sc-ion-alert-md{top:0;border-radius:2px;position:relative;-ms-flex-negative:0;flex-shrink:0;width:16px;height:16px;border-width:2px;border-style:solid;border-color:var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));contain:strict}.checkbox-label-placement-end.sc-ion-alert-md .alert-checkbox-icon.sc-ion-alert-md{inset-inline-start:24px}.checkbox-label-placement-start.sc-ion-alert-md .alert-checkbox-icon.sc-ion-alert-md{inset-inline-end:24px}[aria-checked=true].sc-ion-alert-md .alert-checkbox-icon.sc-ion-alert-md{border-color:var(--ion-color-primary, #0054e9);background-color:var(--ion-color-primary, #0054e9)}[aria-checked=true].sc-ion-alert-md .alert-checkbox-inner.sc-ion-alert-md{top:0;position:absolute;width:6px;height:10px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:2px;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--ion-color-primary-contrast, #fff)}[aria-checked=true].sc-ion-alert-md .alert-checkbox-inner.sc-ion-alert-md{inset-inline-start:3px}.alert-button-group.sc-ion-alert-md{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse;-ms-flex-pack:end;justify-content:flex-end}.alert-button.sc-ion-alert-md{border-radius:2px;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:0;margin-bottom:0;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;color:var(--ion-color-primary, #0054e9);font-weight:500;text-align:end;text-transform:uppercase;overflow:hidden}.alert-button-group.sc-ion-alert-md .alert-button-inner.sc-ion-alert-md{-ms-flex-pack:end;justify-content:flex-end}@media screen and (min-width: 768px){.sc-ion-alert-md-h{--max-width:min(100vw - 96px, 560px);--max-height:min(100vh - 96px, 560px)}}`;
|
|
10396
|
+
const alertMdCss = () => `.sc-ion-alert-md-h{--min-width:250px;--width:auto;--min-height:auto;--height:auto;--max-height:90%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-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-alert-md-h{display:none}.alert-top.sc-ion-alert-md-h{padding-top:50px;-ms-flex-align:start;align-items:flex-start}.alert-wrapper.sc-ion-alert-md{display:-ms-flexbox;display:flex;-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);background:var(--background);contain:content;opacity:0;z-index:10}.alert-title.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.alert-sub-title.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-weight:normal}.alert-message.sc-ion-alert-md,.alert-input-group.sc-ion-alert-md{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-overflow-scrolling:touch;overflow-y:auto;overscroll-behavior-y:contain}.alert-checkbox-label.sc-ion-alert-md,.alert-radio-label.sc-ion-alert-md{overflow-wrap:anywhere}@media (any-pointer: coarse){.alert-checkbox-group.sc-ion-alert-md::-webkit-scrollbar,.alert-radio-group.sc-ion-alert-md::-webkit-scrollbar,.alert-message.sc-ion-alert-md::-webkit-scrollbar{display:none}}.alert-input.sc-ion-alert-md{padding-left:0;padding-right:0;padding-top:10px;padding-bottom:10px;width:100%;border:0;background:inherit;font:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.alert-button-group.sc-ion-alert-md{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%}.alert-button-group-vertical.sc-ion-alert-md{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.alert-button.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;border:0;font-size:0.875rem;line-height:1.25rem;z-index:0}.alert-button.ion-focused.sc-ion-alert-md,.alert-tappable.ion-focused.sc-ion-alert-md{background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.alert-button-inner.sc-ion-alert-md{display:-ms-flexbox;display:flex;-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%;min-height:inherit}.alert-input-disabled.sc-ion-alert-md,.alert-checkbox-button-disabled.sc-ion-alert-md .alert-button-inner.sc-ion-alert-md,.alert-radio-button-disabled.sc-ion-alert-md .alert-button-inner.sc-ion-alert-md{cursor:default;opacity:0.5;pointer-events:none}.alert-tappable.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:-ms-flexbox;display:flex;width:100%;border:0;background:transparent;font-size:inherit;line-height:initial;text-align:start;-webkit-appearance:none;-moz-appearance:none;appearance:none;contain:content}.alert-button.sc-ion-alert-md,.alert-checkbox.sc-ion-alert-md,.alert-input.sc-ion-alert-md,.alert-radio.sc-ion-alert-md{outline:none}.alert-radio-icon.sc-ion-alert-md,.alert-checkbox-icon.sc-ion-alert-md,.alert-checkbox-inner.sc-ion-alert-md{-webkit-box-sizing:border-box;box-sizing:border-box}textarea.alert-input.sc-ion-alert-md{min-height:37px;resize:none}.sc-ion-alert-md-h{--background:var(--ion-overlay-background-color, var(--ion-background-color, #fff));--max-width:280px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.32);font-size:0.875rem}.alert-wrapper.sc-ion-alert-md{border-radius:4px;-webkit-box-shadow:0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);box-shadow:0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12)}.alert-head.sc-ion-alert-md{-webkit-padding-start:23px;padding-inline-start:23px;-webkit-padding-end:23px;padding-inline-end:23px;padding-top:20px;padding-bottom:15px;text-align:start}.alert-title.sc-ion-alert-md{color:var(--ion-text-color, #000);font-size:1.25rem;font-weight:500}.alert-sub-title.sc-ion-alert-md{color:var(--ion-text-color, #000);font-size:1rem}.alert-message.sc-ion-alert-md,.alert-input-group.sc-ion-alert-md{-webkit-padding-start:24px;padding-inline-start:24px;-webkit-padding-end:24px;padding-inline-end:24px;padding-top:20px;padding-bottom:20px;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))}.alert-message.sc-ion-alert-md{font-size:1rem}@media screen and (max-width: 767px){.alert-message.sc-ion-alert-md{max-height:266px}}.alert-message.sc-ion-alert-md:empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.alert-head.sc-ion-alert-md+.alert-message.sc-ion-alert-md{padding-top:0}.alert-input.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px;border-bottom:1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));color:var(--ion-text-color, #000)}.alert-input.sc-ion-alert-md::-webkit-input-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-md::-moz-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-md:-ms-input-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-md::-ms-input-placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-md::placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, var(--ion-text-color-step-600, #999999)));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-md::-ms-clear{display:none}.alert-input.sc-ion-alert-md:focus{margin-bottom:4px;border-bottom:2px solid var(--ion-color-primary, #0054e9)}.alert-radio-group.sc-ion-alert-md,.alert-checkbox-group.sc-ion-alert-md{position:relative;border-top:1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));border-bottom:1px solid var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));overflow:auto}@media screen and (max-width: 767px){.alert-radio-group.sc-ion-alert-md,.alert-checkbox-group.sc-ion-alert-md{max-height:266px}}.alert-tappable.sc-ion-alert-md{position:relative;min-height:48px}.alert-radio-label.sc-ion-alert-md{-webkit-padding-start:52px;padding-inline-start:52px;-webkit-padding-end:26px;padding-inline-end:26px;padding-top:13px;padding-bottom:13px;-ms-flex:1;flex:1;color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));font-size:1rem}.alert-radio-icon.sc-ion-alert-md{top:0;border-radius:50%;display:block;position:relative;width:20px;height:20px;border-width:2px;border-style:solid;border-color:var(--ion-color-step-550, var(--ion-background-color-step-550, #737373))}.alert-radio-icon.sc-ion-alert-md{inset-inline-start:26px}.alert-radio-inner.sc-ion-alert-md{top:3px;border-radius:50%;position:absolute;width:10px;height:10px;-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--ion-color-primary, #0054e9)}.alert-radio-inner.sc-ion-alert-md{inset-inline-start:3px}[aria-checked=true].sc-ion-alert-md .alert-radio-label.sc-ion-alert-md{color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626))}[aria-checked=true].sc-ion-alert-md .alert-radio-icon.sc-ion-alert-md{border-color:var(--ion-color-primary, #0054e9)}[aria-checked=true].sc-ion-alert-md .alert-radio-inner.sc-ion-alert-md{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}.alert-checkbox-label.sc-ion-alert-md{-webkit-padding-start:53px;padding-inline-start:53px;-webkit-padding-end:26px;padding-inline-end:26px;padding-top:13px;padding-bottom:13px;-ms-flex:1;flex:1;width:calc(100% - 53px);color:var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));font-size:1rem}.alert-checkbox-icon.sc-ion-alert-md{top:0;border-radius:2px;position:relative;width:16px;height:16px;border-width:2px;border-style:solid;border-color:var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));contain:strict}.alert-checkbox-icon.sc-ion-alert-md{inset-inline-start:26px}[aria-checked=true].sc-ion-alert-md .alert-checkbox-icon.sc-ion-alert-md{border-color:var(--ion-color-primary, #0054e9);background-color:var(--ion-color-primary, #0054e9)}[aria-checked=true].sc-ion-alert-md .alert-checkbox-inner.sc-ion-alert-md{top:0;position:absolute;width:6px;height:10px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:2px;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--ion-color-primary-contrast, #fff)}[aria-checked=true].sc-ion-alert-md .alert-checkbox-inner.sc-ion-alert-md{inset-inline-start:3px}.alert-button-group.sc-ion-alert-md{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse;-ms-flex-pack:end;justify-content:flex-end}.alert-button.sc-ion-alert-md{border-radius:2px;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:0;margin-bottom:0;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;color:var(--ion-color-primary, #0054e9);font-weight:500;text-align:end;text-transform:uppercase;overflow:hidden}.alert-button-inner.sc-ion-alert-md{-ms-flex-pack:end;justify-content:flex-end}@media screen and (min-width: 768px){.sc-ion-alert-md-h{--max-width:min(100vw - 96px, 560px);--max-height:min(100vh - 96px, 560px)}}`;
|
|
10830
10397
|
|
|
10831
10398
|
// TODO(FW-2832): types
|
|
10832
10399
|
/**
|
|
@@ -11000,7 +10567,22 @@ class Alert {
|
|
|
11000
10567
|
this.inputType = inputTypes.values().next().value;
|
|
11001
10568
|
this.processedInputs = inputs.map((i, index) => {
|
|
11002
10569
|
var _a;
|
|
11003
|
-
return
|
|
10570
|
+
return ({
|
|
10571
|
+
type: i.type || 'text',
|
|
10572
|
+
name: i.name || `${index}`,
|
|
10573
|
+
placeholder: i.placeholder || '',
|
|
10574
|
+
value: i.value,
|
|
10575
|
+
label: i.label,
|
|
10576
|
+
checked: !!i.checked,
|
|
10577
|
+
disabled: !!i.disabled,
|
|
10578
|
+
id: i.id || `alert-input-${this.overlayIndex}-${index}`,
|
|
10579
|
+
handler: i.handler,
|
|
10580
|
+
min: i.min,
|
|
10581
|
+
max: i.max,
|
|
10582
|
+
cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '',
|
|
10583
|
+
attributes: i.attributes || {},
|
|
10584
|
+
tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
|
|
10585
|
+
});
|
|
11004
10586
|
});
|
|
11005
10587
|
}
|
|
11006
10588
|
connectedCallback() {
|
|
@@ -11028,10 +10610,6 @@ class Alert {
|
|
|
11028
10610
|
this.gesture.destroy();
|
|
11029
10611
|
this.gesture = undefined;
|
|
11030
10612
|
}
|
|
11031
|
-
// Clean up aria-hidden if removed without dismiss() being called
|
|
11032
|
-
if (this.presented) {
|
|
11033
|
-
cleanupRootFocusTrapAccessibility();
|
|
11034
|
-
}
|
|
11035
10613
|
(_a = this.buttonGroupResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
11036
10614
|
this.buttonGroupResizeObserver = undefined;
|
|
11037
10615
|
}
|
|
@@ -11071,7 +10649,7 @@ class Alert {
|
|
|
11071
10649
|
async present() {
|
|
11072
10650
|
const unlock = await this.lockController.lock();
|
|
11073
10651
|
await this.delegateController.attachViewToDom();
|
|
11074
|
-
await present(this, 'alertEnter', iosEnterAnimation$
|
|
10652
|
+
await present(this, 'alertEnter', iosEnterAnimation$5, mdEnterAnimation$4).then(() => {
|
|
11075
10653
|
var _a, _b;
|
|
11076
10654
|
/**
|
|
11077
10655
|
* Check if alert has only one button and no inputs.
|
|
@@ -11102,7 +10680,7 @@ class Alert {
|
|
|
11102
10680
|
*/
|
|
11103
10681
|
async dismiss(data, role) {
|
|
11104
10682
|
const unlock = await this.lockController.lock();
|
|
11105
|
-
const dismissed = await dismiss(this, data, role, 'alertLeave', iosLeaveAnimation$
|
|
10683
|
+
const dismissed = await dismiss(this, data, role, 'alertLeave', iosLeaveAnimation$5, mdLeaveAnimation$4);
|
|
11106
10684
|
if (dismissed) {
|
|
11107
10685
|
this.delegateController.removeViewFromDom();
|
|
11108
10686
|
}
|
|
@@ -11200,61 +10778,14 @@ class Alert {
|
|
|
11200
10778
|
if (inputs.length === 0) {
|
|
11201
10779
|
return null;
|
|
11202
10780
|
}
|
|
11203
|
-
return (hAsync("div", { class: "alert-checkbox-group" }, inputs.map((i) => {
|
|
11204
|
-
var _a, _b;
|
|
11205
|
-
/**
|
|
11206
|
-
* Cast to `SelectAlertInput` to access rich content
|
|
11207
|
-
* fields (`startContent`, `endContent`, `description`)
|
|
11208
|
-
* that are passed through from `ion-select` but not
|
|
11209
|
-
* part of the public `AlertInput` interface.
|
|
11210
|
-
*/
|
|
11211
|
-
const richInput = i;
|
|
11212
|
-
const optionLabelOptions = {
|
|
11213
|
-
id: richInput.id,
|
|
11214
|
-
label: richInput.label,
|
|
11215
|
-
startContent: richInput.startContent,
|
|
11216
|
-
endContent: richInput.endContent,
|
|
11217
|
-
description: richInput.description,
|
|
11218
|
-
};
|
|
11219
|
-
const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'checkbox');
|
|
11220
|
-
const defaultJustify = getOverlayLabelJustify(mode, 'checkbox');
|
|
11221
|
-
return (hAsync("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': !i.disabled, 'ion-activatable': !i.disabled, 'alert-checkbox-button-disabled': i.disabled || false }) }, hAsync("div", { class: {
|
|
11222
|
-
'alert-button-inner': true,
|
|
11223
|
-
[`checkbox-label-placement-${(_a = richInput.labelPlacement) !== null && _a !== void 0 ? _a : defaultLabelPlacement}`]: true,
|
|
11224
|
-
[`checkbox-justify-${(_b = richInput.justify) !== null && _b !== void 0 ? _b : defaultJustify}`]: true,
|
|
11225
|
-
} }, hAsync("div", { class: "alert-checkbox-icon" }, hAsync("div", { class: "alert-checkbox-inner" })), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), mode === 'md' && hAsync("ion-ripple-effect", null)));
|
|
11226
|
-
})));
|
|
10781
|
+
return (hAsync("div", { class: "alert-checkbox-group" }, inputs.map((i) => (hAsync("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, hAsync("div", { class: "alert-button-inner" }, hAsync("div", { class: "alert-checkbox-icon" }, hAsync("div", { class: "alert-checkbox-inner" })), hAsync("div", { class: "alert-checkbox-label" }, i.label)), mode === 'md' && hAsync("ion-ripple-effect", null))))));
|
|
11227
10782
|
}
|
|
11228
10783
|
renderRadio() {
|
|
11229
10784
|
const inputs = this.processedInputs;
|
|
11230
|
-
const mode = getIonMode$1(this);
|
|
11231
10785
|
if (inputs.length === 0) {
|
|
11232
10786
|
return null;
|
|
11233
10787
|
}
|
|
11234
|
-
return (hAsync("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => {
|
|
11235
|
-
var _a, _b;
|
|
11236
|
-
/**
|
|
11237
|
-
* Cast to `SelectAlertInput` to access rich content
|
|
11238
|
-
* fields (`startContent`, `endContent`, `description`)
|
|
11239
|
-
* that are passed through from `ion-select` but not
|
|
11240
|
-
* part of the public `AlertInput` interface.
|
|
11241
|
-
*/
|
|
11242
|
-
const richInput = i;
|
|
11243
|
-
const optionLabelOptions = {
|
|
11244
|
-
id: richInput.id,
|
|
11245
|
-
label: richInput.label,
|
|
11246
|
-
startContent: richInput.startContent,
|
|
11247
|
-
endContent: richInput.endContent,
|
|
11248
|
-
description: richInput.description,
|
|
11249
|
-
};
|
|
11250
|
-
const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'radio');
|
|
11251
|
-
const defaultJustify = getOverlayLabelJustify(mode, 'radio');
|
|
11252
|
-
return (hAsync("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': !i.disabled, 'ion-activatable': !i.disabled, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, hAsync("div", { class: {
|
|
11253
|
-
'alert-button-inner': true,
|
|
11254
|
-
[`radio-label-placement-${(_a = richInput.labelPlacement) !== null && _a !== void 0 ? _a : defaultLabelPlacement}`]: true,
|
|
11255
|
-
[`radio-justify-${(_b = richInput.justify) !== null && _b !== void 0 ? _b : defaultJustify}`]: true,
|
|
11256
|
-
} }, hAsync("div", { class: "alert-radio-icon" }, hAsync("div", { class: "alert-radio-inner" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
|
|
11257
|
-
})));
|
|
10788
|
+
return (hAsync("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => (hAsync("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': true, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, hAsync("div", { class: "alert-button-inner" }, hAsync("div", { class: "alert-radio-icon" }, hAsync("div", { class: "alert-radio-inner" })), hAsync("div", { class: "alert-radio-label" }, i.label)))))));
|
|
11258
10789
|
}
|
|
11259
10790
|
renderInput() {
|
|
11260
10791
|
const inputs = this.processedInputs;
|
|
@@ -11334,7 +10865,7 @@ class Alert {
|
|
|
11334
10865
|
'alert-button-group': true,
|
|
11335
10866
|
'alert-button-group-vertical': buttons.length > 2 || this.isButtonGroupWrapped,
|
|
11336
10867
|
};
|
|
11337
|
-
return (hAsync("div", { class: alertButtonGroupClass, ref: (el) => (this.buttonGroupEl = el) }, buttons.map((button) => (hAsync("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass$
|
|
10868
|
+
return (hAsync("div", { class: alertButtonGroupClass, ref: (el) => (this.buttonGroupEl = el) }, buttons.map((button) => (hAsync("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass$2(button), tabIndex: 0, onClick: () => this.buttonClick(button) }), hAsync("span", { class: "alert-button-inner" }, button.text), mode === 'md' && hAsync("ion-ripple-effect", null))))));
|
|
11338
10869
|
}
|
|
11339
10870
|
renderAlertMessage(msgId) {
|
|
11340
10871
|
const { customHTMLEnabled, message } = this;
|
|
@@ -11357,9 +10888,9 @@ class Alert {
|
|
|
11357
10888
|
* If neither are defined, do not set aria-labelledby.
|
|
11358
10889
|
*/
|
|
11359
10890
|
const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
|
|
11360
|
-
return (hAsync(Host, { key: '
|
|
10891
|
+
return (hAsync(Host, { key: '8d54ccd725ea634be080e67b56fa5efe498f496c', tabindex: "-1", style: {
|
|
11361
10892
|
zIndex: `${20000 + overlayIndex}`,
|
|
11362
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '
|
|
10893
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '05a238583342285545587de9dce144a82d779193', tappable: this.backdropDismiss }), hAsync("div", { key: 'e52c53fd9845e66781af01b2a788a291b45a927c', tabindex: "0", "aria-hidden": "true" }), hAsync("div", Object.assign({ key: '8417e52eebca24ff436fab0703666db51072f980', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), hAsync("div", { key: '5c560d4800b24d41961423718108b54be6cd6f91', class: "alert-head" }, header && (hAsync("h2", { key: '8637b64cd5125b2258115d1c11f3743113658608', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '7a4e61a02c29b16b336d8acaf6569b30de6fe71e', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '30844b6a0a7e3dab46514cd548ecffa86dcd59cb', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: '39c824fee1e60ad8d6234c79d22ceb8bba8004af', tabindex: "0", "aria-hidden": "true" })));
|
|
11363
10894
|
}
|
|
11364
10895
|
get el() { return getElement(this); }
|
|
11365
10896
|
static get watchers() { return {
|
|
@@ -11417,7 +10948,7 @@ const inputClass = (input) => {
|
|
|
11417
10948
|
var _a, _b, _c;
|
|
11418
10949
|
return Object.assign(Object.assign({ 'alert-input': true, 'alert-input-disabled': ((_b = (_a = input.attributes) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : input.disabled) || false }, getClassMap(input.cssClass)), getClassMap(input.attributes ? (_c = input.attributes.class) === null || _c === void 0 ? void 0 : _c.toString() : ''));
|
|
11419
10950
|
};
|
|
11420
|
-
const buttonClass$
|
|
10951
|
+
const buttonClass$2 = (button) => {
|
|
11421
10952
|
return Object.assign({ 'alert-button': true, 'ion-focusable': true, 'ion-activatable': true, [`alert-button-role-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
|
|
11422
10953
|
};
|
|
11423
10954
|
|
|
@@ -19202,8 +18733,6 @@ const createColorClasses = (color) => {
|
|
|
19202
18733
|
const imgCss = () => `:host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}`;
|
|
19203
18734
|
|
|
19204
18735
|
/**
|
|
19205
|
-
* @deprecated
|
|
19206
|
-
*
|
|
19207
18736
|
* @part image - The inner `img` element.
|
|
19208
18737
|
*/
|
|
19209
18738
|
class Img {
|
|
@@ -19227,8 +18756,6 @@ class Img {
|
|
|
19227
18756
|
this.inheritedAttributes = inheritAttributes$1(this.el, ['draggable']);
|
|
19228
18757
|
}
|
|
19229
18758
|
componentDidLoad() {
|
|
19230
|
-
printIonWarning('[ion-img] - This component is deprecated and will be removed in Ionic v10. ' +
|
|
19231
|
-
'Use a native <img> with the loading="lazy" attribute instead.', this.el);
|
|
19232
18759
|
this.addIO();
|
|
19233
18760
|
}
|
|
19234
18761
|
disconnectedCallback() {
|
|
@@ -19281,7 +18808,7 @@ class Img {
|
|
|
19281
18808
|
render() {
|
|
19282
18809
|
const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
|
|
19283
18810
|
const { draggable } = inheritedAttributes;
|
|
19284
|
-
return (hAsync(Host, { key: '
|
|
18811
|
+
return (hAsync(Host, { key: '9bfaa659b0680189fd29f3acb2fdce7f70be6060', class: getIonMode$1(this) }, hAsync("img", { key: 'd484beae0d5cbe0406958bfad40cdd6c05625340', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
|
|
19285
18812
|
}
|
|
19286
18813
|
get el() { return getElement(this); }
|
|
19287
18814
|
static get watchers() { return {
|
|
@@ -19785,7 +19312,7 @@ class Input {
|
|
|
19785
19312
|
/**
|
|
19786
19313
|
* Whether auto correction should be enabled when the user is entering/editing the text value.
|
|
19787
19314
|
*/
|
|
19788
|
-
this.autocorrect =
|
|
19315
|
+
this.autocorrect = 'off';
|
|
19789
19316
|
/**
|
|
19790
19317
|
* Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
|
|
19791
19318
|
*
|
|
@@ -20242,7 +19769,7 @@ class Input {
|
|
|
20242
19769
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
20243
19770
|
*/
|
|
20244
19771
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
20245
|
-
return (hAsync(Host, { key: '
|
|
19772
|
+
return (hAsync(Host, { key: '9ba9cf425b573d2ca9ac34455a0e6b8474c4de6d', class: createColorClasses$1(this.color, {
|
|
20246
19773
|
[mode]: true,
|
|
20247
19774
|
'has-value': hasValue,
|
|
20248
19775
|
'has-focus': hasFocus,
|
|
@@ -20253,14 +19780,14 @@ class Input {
|
|
|
20253
19780
|
'in-item': inItem,
|
|
20254
19781
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
20255
19782
|
'input-disabled': disabled,
|
|
20256
|
-
}) }, hAsync("label", { key: '
|
|
19783
|
+
}) }, hAsync("label", { key: '74b989d0aa5ab38f29f952519868f05119df6005', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '47f2b42e2f74ea866b4f871026e08ab375d7a726', class: "native-wrapper", onClick: this.onLabelClick }, hAsync("slot", { key: 'eaabe5a4a329a356cac3294d15c087d0d131fff2', name: "start" }), hAsync("input", Object.assign({ key: 'c821a984a8a9b7f96f30892c06d8deda093ff24b', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (hAsync("button", { key: '62069c11016ee190dc46ab941372e1c4ad8a36ed', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
20257
19784
|
/**
|
|
20258
19785
|
* This prevents mobile browsers from
|
|
20259
19786
|
* blurring the input when the clear
|
|
20260
19787
|
* button is activated.
|
|
20261
19788
|
*/
|
|
20262
19789
|
ev.preventDefault();
|
|
20263
|
-
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '
|
|
19790
|
+
}, onClick: this.clearTextInput }, hAsync("ion-icon", { key: 'dd75a516d32110d85382b664c663bd41f177ce12', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '330d4b9389f2c62223a5ee24003e96ef3e6b2473', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '8e442bed130ddc84976ab70fd3f8578d6bcc6316', class: "input-highlight" })), this.renderBottomContent()));
|
|
20264
19791
|
}
|
|
20265
19792
|
get el() { return getElement(this); }
|
|
20266
19793
|
static get watchers() { return {
|
|
@@ -20288,7 +19815,7 @@ class Input {
|
|
|
20288
19815
|
"color": [513],
|
|
20289
19816
|
"autocapitalize": [1],
|
|
20290
19817
|
"autocomplete": [1],
|
|
20291
|
-
"autocorrect": [
|
|
19818
|
+
"autocorrect": [1],
|
|
20292
19819
|
"autofocus": [4],
|
|
20293
19820
|
"clearInput": [4, "clear-input"],
|
|
20294
19821
|
"clearInputIcon": [1, "clear-input-icon"],
|
|
@@ -22292,7 +21819,7 @@ class ListHeader {
|
|
|
22292
21819
|
/**
|
|
22293
21820
|
* iOS Loading Enter Animation
|
|
22294
21821
|
*/
|
|
22295
|
-
const iosEnterAnimation$
|
|
21822
|
+
const iosEnterAnimation$4 = (baseEl) => {
|
|
22296
21823
|
const baseAnimation = createAnimation();
|
|
22297
21824
|
const backdropAnimation = createAnimation();
|
|
22298
21825
|
const wrapperAnimation = createAnimation();
|
|
@@ -22317,7 +21844,7 @@ const iosEnterAnimation$3 = (baseEl) => {
|
|
|
22317
21844
|
/**
|
|
22318
21845
|
* iOS Loading Leave Animation
|
|
22319
21846
|
*/
|
|
22320
|
-
const iosLeaveAnimation$
|
|
21847
|
+
const iosLeaveAnimation$4 = (baseEl) => {
|
|
22321
21848
|
const baseAnimation = createAnimation();
|
|
22322
21849
|
const backdropAnimation = createAnimation();
|
|
22323
21850
|
const wrapperAnimation = createAnimation();
|
|
@@ -22490,10 +22017,6 @@ class Loading {
|
|
|
22490
22017
|
}
|
|
22491
22018
|
disconnectedCallback() {
|
|
22492
22019
|
this.triggerController.removeClickListener();
|
|
22493
|
-
// Clean up aria-hidden if removed without dismiss() being called
|
|
22494
|
-
if (this.presented) {
|
|
22495
|
-
cleanupRootFocusTrapAccessibility();
|
|
22496
|
-
}
|
|
22497
22020
|
}
|
|
22498
22021
|
/**
|
|
22499
22022
|
* Present the loading overlay after it has been created.
|
|
@@ -22501,7 +22024,7 @@ class Loading {
|
|
|
22501
22024
|
async present() {
|
|
22502
22025
|
const unlock = await this.lockController.lock();
|
|
22503
22026
|
await this.delegateController.attachViewToDom();
|
|
22504
|
-
await present(this, 'loadingEnter', iosEnterAnimation$
|
|
22027
|
+
await present(this, 'loadingEnter', iosEnterAnimation$4, mdEnterAnimation$3);
|
|
22505
22028
|
if (this.duration > 0) {
|
|
22506
22029
|
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
|
|
22507
22030
|
}
|
|
@@ -22524,7 +22047,7 @@ class Loading {
|
|
|
22524
22047
|
if (this.durationTimeout) {
|
|
22525
22048
|
clearTimeout(this.durationTimeout);
|
|
22526
22049
|
}
|
|
22527
|
-
const dismissed = await dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation$
|
|
22050
|
+
const dismissed = await dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation$4, mdLeaveAnimation$3);
|
|
22528
22051
|
if (dismissed) {
|
|
22529
22052
|
this.delegateController.removeViewFromDom();
|
|
22530
22053
|
}
|
|
@@ -22559,9 +22082,9 @@ class Loading {
|
|
|
22559
22082
|
* Otherwise, don't set aria-labelledby.
|
|
22560
22083
|
*/
|
|
22561
22084
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
22562
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
22085
|
+
return (hAsync(Host, Object.assign({ key: 'f86ddbc600cb5c396b7de38fb5f49625388c3c3f', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
22563
22086
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
22564
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '
|
|
22087
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: 'b53727aaddc37ef3c685fcc150c6d5193290a847', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '4c61bede8e0a4e47daa6f1f9d0f364ef6aec0bc3', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '84e51ceb07118f1eaeb757df28801c255496931b', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: 'fc97f1912e0fc558b7c309a5bc084415f5f620b2', class: "loading-spinner" }, hAsync("ion-spinner", { key: '6e186d856cd3f10f22c3e317ef00f31b4216459c', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: 'dcbe9d9a619daa1c08174e73827bdabeb59dde92', tabindex: "0", "aria-hidden": "true" })));
|
|
22565
22088
|
}
|
|
22566
22089
|
get el() { return getElement(this); }
|
|
22567
22090
|
static get watchers() { return {
|
|
@@ -24542,8 +24065,15 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onD
|
|
|
24542
24065
|
}
|
|
24543
24066
|
return false;
|
|
24544
24067
|
};
|
|
24068
|
+
/**
|
|
24069
|
+
* In Firefox, pressing over a text caret in the focusable wrapper can
|
|
24070
|
+
* start a native drag that swallows the gesture's pointer events.
|
|
24071
|
+
* Cancel native drag while the gesture is active.
|
|
24072
|
+
*/
|
|
24073
|
+
const preventNativeDragStart = (ev) => ev.preventDefault();
|
|
24545
24074
|
const onStart = (detail) => {
|
|
24546
24075
|
const { deltaY } = detail;
|
|
24076
|
+
el.addEventListener('dragstart', preventNativeDragStart);
|
|
24547
24077
|
/**
|
|
24548
24078
|
* Get the initial scrollY value so
|
|
24549
24079
|
* that we can correctly reset the scrollY
|
|
@@ -24646,6 +24176,7 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onD
|
|
|
24646
24176
|
onDragMove(eventDetail);
|
|
24647
24177
|
};
|
|
24648
24178
|
const onEnd = (detail) => {
|
|
24179
|
+
el.removeEventListener('dragstart', preventNativeDragStart);
|
|
24649
24180
|
const velocity = detail.velocityY;
|
|
24650
24181
|
const step = detail.deltaY / height;
|
|
24651
24182
|
const isAttemptingDismissWithCanDismiss = step >= 0 && canDismissBlocksGesture;
|
|
@@ -24835,7 +24366,7 @@ const createEnterAnimation$1 = () => {
|
|
|
24835
24366
|
/**
|
|
24836
24367
|
* iOS Modal Enter Animation for the Card presentation style
|
|
24837
24368
|
*/
|
|
24838
|
-
const iosEnterAnimation$
|
|
24369
|
+
const iosEnterAnimation$3 = (baseEl, opts) => {
|
|
24839
24370
|
const { presentingEl, currentBreakpoint, expandToScroll } = opts;
|
|
24840
24371
|
const root = getElementRoot(baseEl);
|
|
24841
24372
|
const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$1();
|
|
@@ -24928,7 +24459,7 @@ const createLeaveAnimation$1 = () => {
|
|
|
24928
24459
|
/**
|
|
24929
24460
|
* iOS Modal Leave Animation
|
|
24930
24461
|
*/
|
|
24931
|
-
const iosLeaveAnimation$
|
|
24462
|
+
const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
|
|
24932
24463
|
const { presentingEl, currentBreakpoint } = opts;
|
|
24933
24464
|
const root = getElementRoot(baseEl);
|
|
24934
24465
|
const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation$1();
|
|
@@ -25428,7 +24959,14 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
25428
24959
|
}
|
|
25429
24960
|
return true;
|
|
25430
24961
|
};
|
|
24962
|
+
/**
|
|
24963
|
+
* In Firefox, pressing over a text caret in the focusable wrapper can
|
|
24964
|
+
* start a native drag that swallows the gesture's pointer events.
|
|
24965
|
+
* Cancel native drag while the gesture is active.
|
|
24966
|
+
*/
|
|
24967
|
+
const preventNativeDragStart = (ev) => ev.preventDefault();
|
|
25431
24968
|
const onStart = (detail) => {
|
|
24969
|
+
baseEl.addEventListener('dragstart', preventNativeDragStart);
|
|
25432
24970
|
/**
|
|
25433
24971
|
* If canDismiss is anything other than `true`
|
|
25434
24972
|
* then users should be able to swipe down
|
|
@@ -25555,6 +25093,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
25555
25093
|
onDragMove(eventDetail);
|
|
25556
25094
|
};
|
|
25557
25095
|
const onEnd = (detail) => {
|
|
25096
|
+
baseEl.removeEventListener('dragstart', preventNativeDragStart);
|
|
25558
25097
|
const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
|
|
25559
25098
|
const eventDetail = {
|
|
25560
25099
|
currentY: detail.currentY,
|
|
@@ -26031,9 +25570,9 @@ const clearSafeAreaOverrides = (hostEl) => {
|
|
|
26031
25570
|
hostEl.style.removeProperty('--ion-safe-area-right');
|
|
26032
25571
|
};
|
|
26033
25572
|
|
|
26034
|
-
const modalIosCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);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);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet){--height:calc(100% - (var(--ion-modal-offset-top, 0px) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}`;
|
|
25573
|
+
const modalIosCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);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);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-wrapper{outline:none}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet){--height:calc(100% - (var(--ion-modal-offset-top, 0px) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}`;
|
|
26035
25574
|
|
|
26036
|
-
const modalMdCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);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);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet){--height:calc(100% - (var(--ion-modal-offset-top, 0px) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}`;
|
|
25575
|
+
const modalMdCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);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);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-wrapper{outline:none}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet){--height:calc(100% - (var(--ion-modal-offset-top, 0px) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}`;
|
|
26037
25576
|
|
|
26038
25577
|
// TODO(FW-2832): types
|
|
26039
25578
|
/**
|
|
@@ -26103,20 +25642,13 @@ class Modal {
|
|
|
26103
25642
|
/**
|
|
26104
25643
|
* The interaction behavior for the sheet modal when the handle is pressed.
|
|
26105
25644
|
*
|
|
26106
|
-
*
|
|
26107
|
-
* `
|
|
26108
|
-
* fullscreen or card modal).
|
|
26109
|
-
*
|
|
26110
|
-
* Set to `"cycle"` to make the handle focusable and let the sheet modal
|
|
26111
|
-
* cycle between available breakpoints when pressed. This keeps the sheet
|
|
26112
|
-
* operable with assistive technology.
|
|
25645
|
+
* Defaults to `"none"`, which means the modal will not change size or position when the handle is pressed.
|
|
25646
|
+
* Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.
|
|
26113
25647
|
*
|
|
26114
|
-
*
|
|
26115
|
-
*
|
|
26116
|
-
*
|
|
26117
|
-
* Defaults to `"cycle"`.
|
|
25648
|
+
* Handle behavior is unavailable when the `handle` property is set to `false` or
|
|
25649
|
+
* when the `breakpoints` property is not set (using a fullscreen or card modal).
|
|
26118
25650
|
*/
|
|
26119
|
-
this.handleBehavior = '
|
|
25651
|
+
this.handleBehavior = 'none';
|
|
26120
25652
|
/**
|
|
26121
25653
|
* If `true`, the modal will be dismissed when the backdrop is clicked.
|
|
26122
25654
|
*/
|
|
@@ -26308,10 +25840,6 @@ class Modal {
|
|
|
26308
25840
|
// Also called in dismiss() — intentional dual cleanup covers both
|
|
26309
25841
|
// dismiss-then-remove and direct DOM removal without dismiss.
|
|
26310
25842
|
this.cleanupSafeAreaOverrides();
|
|
26311
|
-
// Clean up aria-hidden if removed without dismiss() being called
|
|
26312
|
-
if (this.presented) {
|
|
26313
|
-
cleanupRootFocusTrapAccessibility();
|
|
26314
|
-
}
|
|
26315
25843
|
}
|
|
26316
25844
|
componentWillLoad() {
|
|
26317
25845
|
var _a;
|
|
@@ -26488,7 +26016,7 @@ class Modal {
|
|
|
26488
26016
|
this.statusBarStyle = await StatusBar.getStyle();
|
|
26489
26017
|
setCardStatusBarDark();
|
|
26490
26018
|
}
|
|
26491
|
-
await present(this, 'modalEnter', iosEnterAnimation$
|
|
26019
|
+
await present(this, 'modalEnter', iosEnterAnimation$3, mdEnterAnimation$2, {
|
|
26492
26020
|
presentingEl: presentingElement,
|
|
26493
26021
|
currentBreakpoint: this.initialBreakpoint,
|
|
26494
26022
|
backdropBreakpoint: this.backdropBreakpoint,
|
|
@@ -26550,7 +26078,7 @@ class Modal {
|
|
|
26550
26078
|
// All of the elements needed for the swipe gesture
|
|
26551
26079
|
// should be in the DOM and referenced by now, except
|
|
26552
26080
|
// for the presenting el
|
|
26553
|
-
const animationBuilder = this.leaveAnimation || config.get('modalLeave', iosLeaveAnimation$
|
|
26081
|
+
const animationBuilder = this.leaveAnimation || config.get('modalLeave', iosLeaveAnimation$3);
|
|
26554
26082
|
const ani = (this.animation = animationBuilder(el, {
|
|
26555
26083
|
presentingEl: this.presentingElement,
|
|
26556
26084
|
expandToScroll: this.expandToScroll,
|
|
@@ -26569,7 +26097,7 @@ class Modal {
|
|
|
26569
26097
|
if (!wrapperEl || initialBreakpoint === undefined) {
|
|
26570
26098
|
return;
|
|
26571
26099
|
}
|
|
26572
|
-
const animationBuilder = this.enterAnimation || config.get('modalEnter', iosEnterAnimation$
|
|
26100
|
+
const animationBuilder = this.enterAnimation || config.get('modalEnter', iosEnterAnimation$3);
|
|
26573
26101
|
const ani = (this.animation = animationBuilder(this.el, {
|
|
26574
26102
|
presentingEl: this.presentingElement,
|
|
26575
26103
|
currentBreakpoint: initialBreakpoint,
|
|
@@ -26759,7 +26287,7 @@ class Modal {
|
|
|
26759
26287
|
window.removeEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
|
|
26760
26288
|
this.keyboardOpenCallback = undefined;
|
|
26761
26289
|
}
|
|
26762
|
-
const dismissed = await dismiss(this, data, role, 'modalLeave', iosLeaveAnimation$
|
|
26290
|
+
const dismissed = await dismiss(this, data, role, 'modalLeave', iosLeaveAnimation$3, mdLeaveAnimation$2, {
|
|
26763
26291
|
presentingEl: presentingElement,
|
|
26764
26292
|
currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
|
|
26765
26293
|
backdropBreakpoint: this.backdropBreakpoint,
|
|
@@ -27191,20 +26719,25 @@ class Modal {
|
|
|
27191
26719
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
27192
26720
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
27193
26721
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
27194
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
26722
|
+
return (hAsync(Host, Object.assign({ key: 'ab93657f4a5b4c97168d292b398d975e4b5b4af4', "no-router": true,
|
|
27195
26723
|
// Allow the modal to be navigable when the handle is focusable
|
|
27196
26724
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
27197
26725
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
27198
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: '
|
|
26726
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '871a7ba7389f477acb011fc3b1c0a27760d0bfa7',
|
|
27199
26727
|
/*
|
|
27200
26728
|
role and aria-modal must be used on the
|
|
27201
26729
|
same element. They must also be set inside the
|
|
27202
26730
|
shadow DOM otherwise ion-button will not be highlighted
|
|
27203
26731
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
26732
|
+
|
|
26733
|
+
tabIndex={-1} is required so present() can move focus to this
|
|
26734
|
+
element (which carries the dialog role) instead of the role-less
|
|
26735
|
+
host. role="dialog" alone does not make an element focusable, so
|
|
26736
|
+
without the tabindex focus() would be a no-op.
|
|
27204
26737
|
*/
|
|
27205
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '
|
|
26738
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '44017261773bc2593d451d2dc805ae83923e679c', class: "modal-handle",
|
|
27206
26739
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
27207
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '
|
|
26740
|
+
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '006de71db3e69911ce6f4b10550ddb8aa0353997', onSlotchange: this.onSlotChange }))));
|
|
27208
26741
|
}
|
|
27209
26742
|
get el() { return getElement(this); }
|
|
27210
26743
|
static get watchers() { return {
|
|
@@ -28287,14 +27820,14 @@ class Note {
|
|
|
28287
27820
|
}; }
|
|
28288
27821
|
}
|
|
28289
27822
|
|
|
28290
|
-
const pickerIosCss = () => `:host{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,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-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(--highlight-background);z-index:-1}:host input{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:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)))}`;
|
|
27823
|
+
const pickerIosCss$1 = () => `:host{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,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-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(--highlight-background);z-index:-1}:host input{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:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)))}`;
|
|
28291
27824
|
|
|
28292
|
-
const pickerMdCss = () => `:host{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,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-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(--highlight-background);z-index:-1}:host input{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:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}`;
|
|
27825
|
+
const pickerMdCss$1 = () => `:host{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,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-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(--highlight-background);z-index:-1}:host input{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:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}`;
|
|
28293
27826
|
|
|
28294
27827
|
/**
|
|
28295
27828
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
28296
27829
|
*/
|
|
28297
|
-
class Picker {
|
|
27830
|
+
let Picker$1 = class Picker {
|
|
28298
27831
|
constructor(hostRef) {
|
|
28299
27832
|
registerInstance(this, hostRef);
|
|
28300
27833
|
this.ionInputModeChange = createEvent(this, "ionInputModeChange", 7);
|
|
@@ -28760,8 +28293,8 @@ class Picker {
|
|
|
28760
28293
|
}
|
|
28761
28294
|
get el() { return getElement(this); }
|
|
28762
28295
|
static get style() { return {
|
|
28763
|
-
ios: pickerIosCss(),
|
|
28764
|
-
md: pickerMdCss()
|
|
28296
|
+
ios: pickerIosCss$1(),
|
|
28297
|
+
md: pickerMdCss$1()
|
|
28765
28298
|
}; }
|
|
28766
28299
|
static get cmpMeta() { return {
|
|
28767
28300
|
"$flags$": 297,
|
|
@@ -28773,44 +28306,359 @@ class Picker {
|
|
|
28773
28306
|
"$lazyBundleId$": "-",
|
|
28774
28307
|
"$attrsToReflect$": []
|
|
28775
28308
|
}; }
|
|
28776
|
-
}
|
|
28309
|
+
};
|
|
28777
28310
|
|
|
28778
|
-
|
|
28311
|
+
/**
|
|
28312
|
+
* iOS Picker Enter Animation
|
|
28313
|
+
*/
|
|
28314
|
+
const iosEnterAnimation$2 = (baseEl) => {
|
|
28315
|
+
const baseAnimation = createAnimation();
|
|
28316
|
+
const backdropAnimation = createAnimation();
|
|
28317
|
+
const wrapperAnimation = createAnimation();
|
|
28318
|
+
backdropAnimation
|
|
28319
|
+
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
28320
|
+
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
28321
|
+
.beforeStyles({
|
|
28322
|
+
'pointer-events': 'none',
|
|
28323
|
+
})
|
|
28324
|
+
.afterClearStyles(['pointer-events']);
|
|
28325
|
+
wrapperAnimation
|
|
28326
|
+
.addElement(baseEl.querySelector('.picker-wrapper'))
|
|
28327
|
+
.fromTo('transform', 'translateY(100%)', 'translateY(0%)');
|
|
28328
|
+
return baseAnimation
|
|
28329
|
+
.addElement(baseEl)
|
|
28330
|
+
.easing('cubic-bezier(.36,.66,.04,1)')
|
|
28331
|
+
.duration(400)
|
|
28332
|
+
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
28333
|
+
};
|
|
28334
|
+
|
|
28335
|
+
/**
|
|
28336
|
+
* iOS Picker Leave Animation
|
|
28337
|
+
*/
|
|
28338
|
+
const iosLeaveAnimation$2 = (baseEl) => {
|
|
28339
|
+
const baseAnimation = createAnimation();
|
|
28340
|
+
const backdropAnimation = createAnimation();
|
|
28341
|
+
const wrapperAnimation = createAnimation();
|
|
28342
|
+
backdropAnimation
|
|
28343
|
+
.addElement(baseEl.querySelector('ion-backdrop'))
|
|
28344
|
+
.fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
|
|
28345
|
+
wrapperAnimation
|
|
28346
|
+
.addElement(baseEl.querySelector('.picker-wrapper'))
|
|
28347
|
+
.fromTo('transform', 'translateY(0%)', 'translateY(100%)');
|
|
28348
|
+
return baseAnimation
|
|
28349
|
+
.addElement(baseEl)
|
|
28350
|
+
.easing('cubic-bezier(.36,.66,.04,1)')
|
|
28351
|
+
.duration(400)
|
|
28352
|
+
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
28353
|
+
};
|
|
28354
|
+
|
|
28355
|
+
const pickerIosCss = () => `.sc-ion-picker-legacy-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}.sc-ion-picker-legacy-ios-h{inset-inline-start:0}.overlay-hidden.sc-ion-picker-legacy-ios-h{display:none}.picker-wrapper.sc-ion-picker-legacy-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-legacy-ios{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-legacy-ios{border:0;font-family:inherit}.picker-button.sc-ion-picker-legacy-ios:active,.picker-button.sc-ion-picker-legacy-ios:focus{outline:none}.picker-columns.sc-ion-picker-legacy-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-legacy-ios,.picker-below-highlight.sc-ion-picker-legacy-ios{display:none;pointer-events:none}.sc-ion-picker-legacy-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, var(--ion-background-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-legacy-ios{display:-ms-flexbox;display:flex;height:44px;border-bottom:0.55px solid var(--border-color)}.picker-toolbar-button.sc-ion-picker-legacy-ios{-ms-flex:1;flex:1;text-align:end}.picker-toolbar-button.sc-ion-picker-legacy-ios:last-child .picker-button.sc-ion-picker-legacy-ios{font-weight:600}.picker-toolbar-button.sc-ion-picker-legacy-ios:first-child{font-weight:normal;text-align:start}.picker-button.sc-ion-picker-legacy-ios,.picker-button.ion-activated.sc-ion-picker-legacy-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, #0054e9);font-size:16px}.picker-columns.sc-ion-picker-legacy-ios{height:215px;-webkit-perspective:1000px;perspective:1000px}.picker-above-highlight.sc-ion-picker-legacy-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}.picker-above-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}.picker-below-highlight.sc-ion-picker-legacy-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}.picker-below-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}`;
|
|
28779
28356
|
|
|
28357
|
+
const pickerMdCss = () => `.sc-ion-picker-legacy-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}.sc-ion-picker-legacy-md-h{inset-inline-start:0}.overlay-hidden.sc-ion-picker-legacy-md-h{display:none}.picker-wrapper.sc-ion-picker-legacy-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-legacy-md{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-legacy-md{border:0;font-family:inherit}.picker-button.sc-ion-picker-legacy-md:active,.picker-button.sc-ion-picker-legacy-md:focus{outline:none}.picker-columns.sc-ion-picker-legacy-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-legacy-md,.picker-below-highlight.sc-ion-picker-legacy-md{display:none;pointer-events:none}.sc-ion-picker-legacy-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, var(--ion-background-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-legacy-md{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;height:44px}.picker-button.sc-ion-picker-legacy-md,.picker-button.ion-activated.sc-ion-picker-legacy-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, #0054e9);font-size:14px;font-weight:500;text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none}.picker-columns.sc-ion-picker-legacy-md{height:216px;-webkit-perspective:1800px;perspective:1800px}.picker-above-highlight.sc-ion-picker-legacy-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, var(--ion-background-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}.picker-above-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}.picker-below-highlight.sc-ion-picker-legacy-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, var(--ion-background-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}.picker-below-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}`;
|
|
28358
|
+
|
|
28359
|
+
// TODO(FW-2832): types
|
|
28780
28360
|
/**
|
|
28781
28361
|
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
28782
|
-
*
|
|
28783
|
-
* @slot prefix - Content to show on the left side of the picker options.
|
|
28784
|
-
* @slot suffix - Content to show on the right side of the picker options.
|
|
28785
28362
|
*/
|
|
28786
|
-
class
|
|
28363
|
+
class Picker {
|
|
28787
28364
|
constructor(hostRef) {
|
|
28788
28365
|
registerInstance(this, hostRef);
|
|
28789
|
-
this.
|
|
28790
|
-
this.
|
|
28791
|
-
this.
|
|
28792
|
-
this.
|
|
28793
|
-
this.
|
|
28794
|
-
this.
|
|
28795
|
-
this.
|
|
28366
|
+
this.didPresent = createEvent(this, "ionPickerDidPresent", 7);
|
|
28367
|
+
this.willPresent = createEvent(this, "ionPickerWillPresent", 7);
|
|
28368
|
+
this.willDismiss = createEvent(this, "ionPickerWillDismiss", 7);
|
|
28369
|
+
this.didDismiss = createEvent(this, "ionPickerDidDismiss", 7);
|
|
28370
|
+
this.didPresentShorthand = createEvent(this, "didPresent", 7);
|
|
28371
|
+
this.willPresentShorthand = createEvent(this, "willPresent", 7);
|
|
28372
|
+
this.willDismissShorthand = createEvent(this, "willDismiss", 7);
|
|
28373
|
+
this.didDismissShorthand = createEvent(this, "didDismiss", 7);
|
|
28374
|
+
this.delegateController = createDelegateController(this);
|
|
28375
|
+
this.lockController = createLockController();
|
|
28376
|
+
this.triggerController = createTriggerController();
|
|
28377
|
+
this.presented = false;
|
|
28378
|
+
/** @internal */
|
|
28379
|
+
this.hasController = false;
|
|
28796
28380
|
/**
|
|
28797
|
-
* If `true`, the
|
|
28381
|
+
* If `true`, the keyboard will be automatically dismissed when the overlay is presented.
|
|
28798
28382
|
*/
|
|
28799
|
-
this.
|
|
28383
|
+
this.keyboardClose = true;
|
|
28800
28384
|
/**
|
|
28801
|
-
*
|
|
28802
|
-
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
|
28803
|
-
* For more information on colors, see [theming](/docs/theming/basics).
|
|
28385
|
+
* Array of buttons to be displayed at the top of the picker.
|
|
28804
28386
|
*/
|
|
28805
|
-
this.
|
|
28387
|
+
this.buttons = [];
|
|
28806
28388
|
/**
|
|
28807
|
-
*
|
|
28808
|
-
|
|
28809
|
-
|
|
28810
|
-
|
|
28811
|
-
*
|
|
28812
|
-
|
|
28813
|
-
|
|
28389
|
+
* Array of columns to be displayed in the picker.
|
|
28390
|
+
*/
|
|
28391
|
+
this.columns = [];
|
|
28392
|
+
/**
|
|
28393
|
+
* Number of milliseconds to wait before dismissing the picker.
|
|
28394
|
+
*/
|
|
28395
|
+
this.duration = 0;
|
|
28396
|
+
/**
|
|
28397
|
+
* If `true`, a backdrop will be displayed behind the picker.
|
|
28398
|
+
*/
|
|
28399
|
+
this.showBackdrop = true;
|
|
28400
|
+
/**
|
|
28401
|
+
* If `true`, the picker will be dismissed when the backdrop is clicked.
|
|
28402
|
+
*/
|
|
28403
|
+
this.backdropDismiss = true;
|
|
28404
|
+
/**
|
|
28405
|
+
* If `true`, the picker will animate.
|
|
28406
|
+
*/
|
|
28407
|
+
this.animated = true;
|
|
28408
|
+
/**
|
|
28409
|
+
* If `true`, the picker will open. If `false`, the picker will close.
|
|
28410
|
+
* Use this if you need finer grained control over presentation, otherwise
|
|
28411
|
+
* just use the pickerController or the `trigger` property.
|
|
28412
|
+
* Note: `isOpen` will not automatically be set back to `false` when
|
|
28413
|
+
* the picker dismisses. You will need to do that in your code.
|
|
28414
|
+
*/
|
|
28415
|
+
this.isOpen = false;
|
|
28416
|
+
this.onBackdropTap = () => {
|
|
28417
|
+
this.dismiss(undefined, BACKDROP);
|
|
28418
|
+
};
|
|
28419
|
+
this.dispatchCancelHandler = (ev) => {
|
|
28420
|
+
const role = ev.detail.role;
|
|
28421
|
+
if (isCancel(role)) {
|
|
28422
|
+
const cancelButton = this.buttons.find((b) => b.role === 'cancel');
|
|
28423
|
+
this.callButtonHandler(cancelButton);
|
|
28424
|
+
}
|
|
28425
|
+
};
|
|
28426
|
+
}
|
|
28427
|
+
onIsOpenChange(newValue, oldValue) {
|
|
28428
|
+
if (newValue === true && oldValue === false) {
|
|
28429
|
+
this.present();
|
|
28430
|
+
}
|
|
28431
|
+
else if (newValue === false && oldValue === true) {
|
|
28432
|
+
this.dismiss();
|
|
28433
|
+
}
|
|
28434
|
+
}
|
|
28435
|
+
triggerChanged() {
|
|
28436
|
+
const { trigger, el, triggerController } = this;
|
|
28437
|
+
if (trigger) {
|
|
28438
|
+
triggerController.addClickListener(el, trigger);
|
|
28439
|
+
}
|
|
28440
|
+
}
|
|
28441
|
+
connectedCallback() {
|
|
28442
|
+
prepareOverlay(this.el);
|
|
28443
|
+
this.triggerChanged();
|
|
28444
|
+
}
|
|
28445
|
+
disconnectedCallback() {
|
|
28446
|
+
this.triggerController.removeClickListener();
|
|
28447
|
+
}
|
|
28448
|
+
componentWillLoad() {
|
|
28449
|
+
var _a;
|
|
28450
|
+
if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
|
|
28451
|
+
setOverlayId(this.el);
|
|
28452
|
+
}
|
|
28453
|
+
}
|
|
28454
|
+
componentDidLoad() {
|
|
28455
|
+
printIonWarning('[ion-picker-legacy] - ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
|
|
28456
|
+
/**
|
|
28457
|
+
* If picker was rendered with isOpen="true"
|
|
28458
|
+
* then we should open picker immediately.
|
|
28459
|
+
*/
|
|
28460
|
+
if (this.isOpen === true) {
|
|
28461
|
+
raf(() => this.present());
|
|
28462
|
+
}
|
|
28463
|
+
/**
|
|
28464
|
+
* When binding values in frameworks such as Angular
|
|
28465
|
+
* it is possible for the value to be set after the Web Component
|
|
28466
|
+
* initializes but before the value watcher is set up in Stencil.
|
|
28467
|
+
* As a result, the watcher callback may not be fired.
|
|
28468
|
+
* We work around this by manually calling the watcher
|
|
28469
|
+
* callback when the component has loaded and the watcher
|
|
28470
|
+
* is configured.
|
|
28471
|
+
*/
|
|
28472
|
+
this.triggerChanged();
|
|
28473
|
+
}
|
|
28474
|
+
/**
|
|
28475
|
+
* Present the picker overlay after it has been created.
|
|
28476
|
+
*/
|
|
28477
|
+
async present() {
|
|
28478
|
+
const unlock = await this.lockController.lock();
|
|
28479
|
+
await this.delegateController.attachViewToDom();
|
|
28480
|
+
await present(this, 'pickerEnter', iosEnterAnimation$2, iosEnterAnimation$2, undefined);
|
|
28481
|
+
if (this.duration > 0) {
|
|
28482
|
+
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
|
|
28483
|
+
}
|
|
28484
|
+
unlock();
|
|
28485
|
+
}
|
|
28486
|
+
/**
|
|
28487
|
+
* Dismiss the picker overlay after it has been presented.
|
|
28488
|
+
*
|
|
28489
|
+
* @param data Any data to emit in the dismiss events.
|
|
28490
|
+
* @param role The role of the element that is dismissing the picker.
|
|
28491
|
+
* This can be useful in a button handler for determining which button was
|
|
28492
|
+
* clicked to dismiss the picker.
|
|
28493
|
+
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
|
28494
|
+
*/
|
|
28495
|
+
async dismiss(data, role) {
|
|
28496
|
+
const unlock = await this.lockController.lock();
|
|
28497
|
+
if (this.durationTimeout) {
|
|
28498
|
+
clearTimeout(this.durationTimeout);
|
|
28499
|
+
}
|
|
28500
|
+
const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation$2, iosLeaveAnimation$2);
|
|
28501
|
+
if (dismissed) {
|
|
28502
|
+
this.delegateController.removeViewFromDom();
|
|
28503
|
+
}
|
|
28504
|
+
unlock();
|
|
28505
|
+
return dismissed;
|
|
28506
|
+
}
|
|
28507
|
+
/**
|
|
28508
|
+
* Returns a promise that resolves when the picker did dismiss.
|
|
28509
|
+
*/
|
|
28510
|
+
onDidDismiss() {
|
|
28511
|
+
return eventMethod(this.el, 'ionPickerDidDismiss');
|
|
28512
|
+
}
|
|
28513
|
+
/**
|
|
28514
|
+
* Returns a promise that resolves when the picker will dismiss.
|
|
28515
|
+
*/
|
|
28516
|
+
onWillDismiss() {
|
|
28517
|
+
return eventMethod(this.el, 'ionPickerWillDismiss');
|
|
28518
|
+
}
|
|
28519
|
+
/**
|
|
28520
|
+
* Get the column that matches the specified name.
|
|
28521
|
+
*
|
|
28522
|
+
* @param name The name of the column.
|
|
28523
|
+
*/
|
|
28524
|
+
getColumn(name) {
|
|
28525
|
+
return Promise.resolve(this.columns.find((column) => column.name === name));
|
|
28526
|
+
}
|
|
28527
|
+
async buttonClick(button) {
|
|
28528
|
+
const role = button.role;
|
|
28529
|
+
if (isCancel(role)) {
|
|
28530
|
+
return this.dismiss(undefined, role);
|
|
28531
|
+
}
|
|
28532
|
+
const shouldDismiss = await this.callButtonHandler(button);
|
|
28533
|
+
if (shouldDismiss) {
|
|
28534
|
+
return this.dismiss(this.getSelected(), button.role);
|
|
28535
|
+
}
|
|
28536
|
+
return Promise.resolve();
|
|
28537
|
+
}
|
|
28538
|
+
async callButtonHandler(button) {
|
|
28539
|
+
if (button) {
|
|
28540
|
+
// a handler has been provided, execute it
|
|
28541
|
+
// pass the handler the values from the inputs
|
|
28542
|
+
const rtn = await safeCall(button.handler, this.getSelected());
|
|
28543
|
+
if (rtn === false) {
|
|
28544
|
+
// if the return value of the handler is false then do not dismiss
|
|
28545
|
+
return false;
|
|
28546
|
+
}
|
|
28547
|
+
}
|
|
28548
|
+
return true;
|
|
28549
|
+
}
|
|
28550
|
+
getSelected() {
|
|
28551
|
+
const selected = {};
|
|
28552
|
+
this.columns.forEach((col, index) => {
|
|
28553
|
+
const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined;
|
|
28554
|
+
selected[col.name] = {
|
|
28555
|
+
text: selectedColumn ? selectedColumn.text : undefined,
|
|
28556
|
+
value: selectedColumn ? selectedColumn.value : undefined,
|
|
28557
|
+
columnIndex: index,
|
|
28558
|
+
};
|
|
28559
|
+
});
|
|
28560
|
+
return selected;
|
|
28561
|
+
}
|
|
28562
|
+
render() {
|
|
28563
|
+
const { htmlAttributes } = this;
|
|
28564
|
+
const mode = getIonMode$1(this);
|
|
28565
|
+
return (hAsync(Host, Object.assign({ key: '80f66d33780d8a1352d24be9cb63a0cc03d01ab5', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
|
|
28566
|
+
zIndex: `${20000 + this.overlayIndex}`,
|
|
28567
|
+
}, class: Object.assign({ [mode]: true,
|
|
28568
|
+
// Used internally for styling
|
|
28569
|
+
[`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '97fb8e10ba08b197610cb8c0cdea61103883d55f', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'b3969cb6fbf7153623d14e3ca1493d3370efb211', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '299268483c3727e698d9135bfdf40349a7050ac1', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '95394de3ef691899b7dbf416f56fd3e86bbdce3f', 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", { key: '05f18bb8d00dc0e22f691b7e41f90f729a6c66d7', class: "picker-columns" }, hAsync("div", { key: '4a8fdf224effc0af67fd413e2e6aca8a78d1cf43', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: 'e50a31db45e3f39e9d0fed36a21be9257eec09bf', class: "picker-below-highlight" }))), hAsync("div", { key: '5a78cb2176ac807ea0c195c6b76cd0e8eef9d4c0', tabindex: "0", "aria-hidden": "true" })));
|
|
28570
|
+
}
|
|
28571
|
+
get el() { return getElement(this); }
|
|
28572
|
+
static get watchers() { return {
|
|
28573
|
+
"isOpen": [{
|
|
28574
|
+
"onIsOpenChange": 0
|
|
28575
|
+
}],
|
|
28576
|
+
"trigger": [{
|
|
28577
|
+
"triggerChanged": 0
|
|
28578
|
+
}]
|
|
28579
|
+
}; }
|
|
28580
|
+
static get style() { return {
|
|
28581
|
+
ios: pickerIosCss(),
|
|
28582
|
+
md: pickerMdCss()
|
|
28583
|
+
}; }
|
|
28584
|
+
static get cmpMeta() { return {
|
|
28585
|
+
"$flags$": 34,
|
|
28586
|
+
"$tagName$": "ion-picker-legacy",
|
|
28587
|
+
"$members$": {
|
|
28588
|
+
"overlayIndex": [2, "overlay-index"],
|
|
28589
|
+
"delegate": [16],
|
|
28590
|
+
"hasController": [4, "has-controller"],
|
|
28591
|
+
"keyboardClose": [4, "keyboard-close"],
|
|
28592
|
+
"enterAnimation": [16],
|
|
28593
|
+
"leaveAnimation": [16],
|
|
28594
|
+
"buttons": [16],
|
|
28595
|
+
"columns": [16],
|
|
28596
|
+
"cssClass": [1, "css-class"],
|
|
28597
|
+
"duration": [2],
|
|
28598
|
+
"showBackdrop": [4, "show-backdrop"],
|
|
28599
|
+
"backdropDismiss": [4, "backdrop-dismiss"],
|
|
28600
|
+
"animated": [4],
|
|
28601
|
+
"htmlAttributes": [16],
|
|
28602
|
+
"isOpen": [4, "is-open"],
|
|
28603
|
+
"trigger": [1],
|
|
28604
|
+
"presented": [32],
|
|
28605
|
+
"present": [64],
|
|
28606
|
+
"dismiss": [64],
|
|
28607
|
+
"onDidDismiss": [64],
|
|
28608
|
+
"onWillDismiss": [64],
|
|
28609
|
+
"getColumn": [64]
|
|
28610
|
+
},
|
|
28611
|
+
"$listeners$": undefined,
|
|
28612
|
+
"$lazyBundleId$": "-",
|
|
28613
|
+
"$attrsToReflect$": []
|
|
28614
|
+
}; }
|
|
28615
|
+
}
|
|
28616
|
+
const buttonWrapperClass = (button) => {
|
|
28617
|
+
return {
|
|
28618
|
+
[`picker-toolbar-${button.role}`]: button.role !== undefined,
|
|
28619
|
+
'picker-toolbar-button': true,
|
|
28620
|
+
};
|
|
28621
|
+
};
|
|
28622
|
+
const buttonClass$1 = (button) => {
|
|
28623
|
+
return Object.assign({ 'picker-button': true, 'ion-activatable': true }, getClassMap(button.cssClass));
|
|
28624
|
+
};
|
|
28625
|
+
|
|
28626
|
+
const pickerColumnCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}.assistive-focusable{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1;pointer-events:none}.assistive-focusable:focus{outline:none}.picker-opts{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-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}.picker-item-empty{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;overflow:hidden}.picker-opts::-webkit-scrollbar{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([slot=prefix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}::slotted([slot=suffix]){-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}:host(.picker-column-disabled) .picker-opts{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}`;
|
|
28627
|
+
|
|
28628
|
+
/**
|
|
28629
|
+
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
|
|
28630
|
+
*
|
|
28631
|
+
* @slot prefix - Content to show on the left side of the picker options.
|
|
28632
|
+
* @slot suffix - Content to show on the right side of the picker options.
|
|
28633
|
+
*/
|
|
28634
|
+
class PickerColumn {
|
|
28635
|
+
constructor(hostRef) {
|
|
28636
|
+
registerInstance(this, hostRef);
|
|
28637
|
+
this.ionChange = createEvent(this, "ionChange", 7);
|
|
28638
|
+
this.isScrolling = false;
|
|
28639
|
+
this.isColumnVisible = false;
|
|
28640
|
+
this.canExitInputMode = true;
|
|
28641
|
+
this.updateValueTextOnScroll = false;
|
|
28642
|
+
this.ariaLabel = null;
|
|
28643
|
+
this.isActive = false;
|
|
28644
|
+
/**
|
|
28645
|
+
* If `true`, the user cannot interact with the picker.
|
|
28646
|
+
*/
|
|
28647
|
+
this.disabled = false;
|
|
28648
|
+
/**
|
|
28649
|
+
* The color to use from your application's color palette.
|
|
28650
|
+
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
|
28651
|
+
* For more information on colors, see [theming](/docs/theming/basics).
|
|
28652
|
+
*/
|
|
28653
|
+
this.color = 'primary';
|
|
28654
|
+
/**
|
|
28655
|
+
* If `true`, tapping the picker will
|
|
28656
|
+
* reveal a number input keyboard that lets
|
|
28657
|
+
* the user type in values for each picker
|
|
28658
|
+
* column. This is useful when working
|
|
28659
|
+
* with time pickers.
|
|
28660
|
+
*
|
|
28661
|
+
* @internal
|
|
28814
28662
|
*/
|
|
28815
28663
|
this.numericInput = false;
|
|
28816
28664
|
this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
|
|
@@ -29269,96 +29117,461 @@ class PickerColumn {
|
|
|
29269
29117
|
}
|
|
29270
29118
|
}
|
|
29271
29119
|
}
|
|
29272
|
-
/** @internal */
|
|
29273
|
-
async scrollActiveItemIntoView(smooth = false) {
|
|
29274
|
-
const activeEl = this.activeItem;
|
|
29275
|
-
if (activeEl) {
|
|
29276
|
-
this.centerPickerItemInView(activeEl, smooth, false);
|
|
29120
|
+
/** @internal */
|
|
29121
|
+
async scrollActiveItemIntoView(smooth = false) {
|
|
29122
|
+
const activeEl = this.activeItem;
|
|
29123
|
+
if (activeEl) {
|
|
29124
|
+
this.centerPickerItemInView(activeEl, smooth, false);
|
|
29125
|
+
}
|
|
29126
|
+
}
|
|
29127
|
+
/**
|
|
29128
|
+
* Sets the value prop and fires the ionChange event.
|
|
29129
|
+
* This is used when we need to fire ionChange from
|
|
29130
|
+
* user-generated events that cannot be caught with normal
|
|
29131
|
+
* input/change event listeners.
|
|
29132
|
+
* @internal
|
|
29133
|
+
*/
|
|
29134
|
+
async setValue(value) {
|
|
29135
|
+
if (this.disabled === true || this.value === value) {
|
|
29136
|
+
return;
|
|
29137
|
+
}
|
|
29138
|
+
this.value = value;
|
|
29139
|
+
this.ionChange.emit({ value });
|
|
29140
|
+
}
|
|
29141
|
+
/**
|
|
29142
|
+
* Sets focus on the scrollable container within the picker column.
|
|
29143
|
+
* Use this method instead of the global `pickerColumn.focus()`.
|
|
29144
|
+
*/
|
|
29145
|
+
async setFocus() {
|
|
29146
|
+
if (this.assistiveFocusable) {
|
|
29147
|
+
this.assistiveFocusable.focus();
|
|
29148
|
+
}
|
|
29149
|
+
}
|
|
29150
|
+
connectedCallback() {
|
|
29151
|
+
var _a;
|
|
29152
|
+
this.ariaLabel = (_a = this.el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : 'Select a value';
|
|
29153
|
+
}
|
|
29154
|
+
get activeItem() {
|
|
29155
|
+
const { value } = this;
|
|
29156
|
+
const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
|
|
29157
|
+
return options.find((option) => {
|
|
29158
|
+
/**
|
|
29159
|
+
* If the whole picker column is disabled, the current value should appear active
|
|
29160
|
+
* If the current value item is specifically disabled, it should not appear active
|
|
29161
|
+
*/
|
|
29162
|
+
if (!this.disabled && option.disabled) {
|
|
29163
|
+
return false;
|
|
29164
|
+
}
|
|
29165
|
+
return option.value === value;
|
|
29166
|
+
});
|
|
29167
|
+
}
|
|
29168
|
+
render() {
|
|
29169
|
+
const { color, disabled, isActive, numericInput } = this;
|
|
29170
|
+
const mode = getIonMode$1(this);
|
|
29171
|
+
return (hAsync(Host, { key: '234c96a501d7ac413b9b0ea56b33017681e25b40', class: createColorClasses$1(color, {
|
|
29172
|
+
[mode]: true,
|
|
29173
|
+
['picker-column-active']: isActive,
|
|
29174
|
+
['picker-column-numeric-input']: numericInput,
|
|
29175
|
+
['picker-column-disabled']: disabled,
|
|
29176
|
+
}) }, hAsync("slot", { key: '9dc15ea0601ddd2cb2e0a745e91e036a8bd96f8b', name: "prefix" }), hAsync("div", { key: 'de4fe28ee4bc46b7c0420d6ab0df0e7809443da9', class: "picker-opts", ref: (el) => {
|
|
29177
|
+
this.scrollEl = el;
|
|
29178
|
+
}, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, hAsync("div", { key: '5297617462cc30e9444039ae032d8bdf718349af', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '55ea39ef867bcb1a11a912d52ecd20cb886c5fb3', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '3496730ce6182ebfd33e0ee4bafc130feb575a31', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '44c3628aa957d60f799dc7019f72fe8b676c7843' }), hAsync("div", { key: '5a1809f6c949678a67e0d4b5bfe93ea335c0161d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '98fd57f1c66dbaebc2db2dd5da142671b3159fd1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '85590708abddfa885994e549deac64866fec938f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: 'bb7e674f543696a80fcbfb1f68f2e975826898a6', name: "suffix" })));
|
|
29179
|
+
}
|
|
29180
|
+
get el() { return getElement(this); }
|
|
29181
|
+
static get watchers() { return {
|
|
29182
|
+
"aria-label": [{
|
|
29183
|
+
"ariaLabelChanged": 0
|
|
29184
|
+
}],
|
|
29185
|
+
"value": [{
|
|
29186
|
+
"valueChange": 0
|
|
29187
|
+
}]
|
|
29188
|
+
}; }
|
|
29189
|
+
static get style() { return pickerColumnCss(); }
|
|
29190
|
+
static get cmpMeta() { return {
|
|
29191
|
+
"$flags$": 265,
|
|
29192
|
+
"$tagName$": "ion-picker-column",
|
|
29193
|
+
"$members$": {
|
|
29194
|
+
"disabled": [4],
|
|
29195
|
+
"value": [1032],
|
|
29196
|
+
"color": [513],
|
|
29197
|
+
"numericInput": [4, "numeric-input"],
|
|
29198
|
+
"ariaLabel": [32],
|
|
29199
|
+
"isActive": [32],
|
|
29200
|
+
"scrollActiveItemIntoView": [64],
|
|
29201
|
+
"setValue": [64],
|
|
29202
|
+
"setFocus": [64]
|
|
29203
|
+
},
|
|
29204
|
+
"$listeners$": undefined,
|
|
29205
|
+
"$lazyBundleId$": "-",
|
|
29206
|
+
"$attrsToReflect$": [["color", "color"]]
|
|
29207
|
+
}; }
|
|
29208
|
+
}
|
|
29209
|
+
const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
|
|
29210
|
+
|
|
29211
|
+
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}.picker-opt{inset-inline-start: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}}`;
|
|
29212
|
+
|
|
29213
|
+
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}.picker-opt{inset-inline-start: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, #0054e9)}`;
|
|
29214
|
+
|
|
29215
|
+
/**
|
|
29216
|
+
* @internal
|
|
29217
|
+
*/
|
|
29218
|
+
class PickerColumnCmp {
|
|
29219
|
+
constructor(hostRef) {
|
|
29220
|
+
registerInstance(this, hostRef);
|
|
29221
|
+
this.ionPickerColChange = createEvent(this, "ionPickerColChange", 7);
|
|
29222
|
+
this.optHeight = 0;
|
|
29223
|
+
this.rotateFactor = 0;
|
|
29224
|
+
this.scaleFactor = 1;
|
|
29225
|
+
this.velocity = 0;
|
|
29226
|
+
this.y = 0;
|
|
29227
|
+
this.noAnimate = true;
|
|
29228
|
+
// `colDidChange` is a flag that gets set when the column is changed
|
|
29229
|
+
// dynamically. When this flag is set, the column will refresh
|
|
29230
|
+
// after the component re-renders to incorporate the new column data.
|
|
29231
|
+
// This is necessary because `this.refresh` queries for the option elements,
|
|
29232
|
+
// so it needs to wait for the latest elements to be available in the DOM.
|
|
29233
|
+
// Ex: column is created with 3 options. User updates the column data
|
|
29234
|
+
// to have 5 options. The column will still think it only has 3 options.
|
|
29235
|
+
this.colDidChange = false;
|
|
29236
|
+
}
|
|
29237
|
+
colChanged() {
|
|
29238
|
+
this.colDidChange = true;
|
|
29239
|
+
}
|
|
29240
|
+
async connectedCallback() {
|
|
29241
|
+
let pickerRotateFactor = 0;
|
|
29242
|
+
let pickerScaleFactor = 0.81;
|
|
29243
|
+
const mode = getIonMode$1(this);
|
|
29244
|
+
if (mode === 'ios') {
|
|
29245
|
+
pickerRotateFactor = -0.46;
|
|
29246
|
+
pickerScaleFactor = 1;
|
|
29247
|
+
}
|
|
29248
|
+
this.rotateFactor = pickerRotateFactor;
|
|
29249
|
+
this.scaleFactor = pickerScaleFactor;
|
|
29250
|
+
this.gesture = (await Promise.resolve().then(function () { return index; })).createGesture({
|
|
29251
|
+
el: this.el,
|
|
29252
|
+
gestureName: 'picker-swipe',
|
|
29253
|
+
gesturePriority: 100,
|
|
29254
|
+
threshold: 0,
|
|
29255
|
+
passive: false,
|
|
29256
|
+
onStart: (ev) => this.onStart(ev),
|
|
29257
|
+
onMove: (ev) => this.onMove(ev),
|
|
29258
|
+
onEnd: (ev) => this.onEnd(ev),
|
|
29259
|
+
});
|
|
29260
|
+
this.gesture.enable();
|
|
29261
|
+
// Options have not been initialized yet
|
|
29262
|
+
// Animation must be disabled through the `noAnimate` flag
|
|
29263
|
+
// Otherwise, the options will render
|
|
29264
|
+
// at the top of the column and transition down
|
|
29265
|
+
this.tmrId = setTimeout(() => {
|
|
29266
|
+
this.noAnimate = false;
|
|
29267
|
+
// After initialization, `refresh()` will be called
|
|
29268
|
+
// At this point, animation will be enabled. The options will
|
|
29269
|
+
// animate as they are being selected.
|
|
29270
|
+
this.refresh(true);
|
|
29271
|
+
}, 250);
|
|
29272
|
+
}
|
|
29273
|
+
componentDidLoad() {
|
|
29274
|
+
this.onDomChange();
|
|
29275
|
+
}
|
|
29276
|
+
componentDidUpdate() {
|
|
29277
|
+
// Options may have changed since last update.
|
|
29278
|
+
if (this.colDidChange) {
|
|
29279
|
+
// Animation must be disabled through the `onDomChange` parameter.
|
|
29280
|
+
// Otherwise, the recently added options will render
|
|
29281
|
+
// at the top of the column and transition down
|
|
29282
|
+
this.onDomChange(true, false);
|
|
29283
|
+
this.colDidChange = false;
|
|
29284
|
+
}
|
|
29285
|
+
}
|
|
29286
|
+
disconnectedCallback() {
|
|
29287
|
+
if (this.rafId !== undefined)
|
|
29288
|
+
cancelAnimationFrame(this.rafId);
|
|
29289
|
+
if (this.tmrId)
|
|
29290
|
+
clearTimeout(this.tmrId);
|
|
29291
|
+
if (this.gesture) {
|
|
29292
|
+
this.gesture.destroy();
|
|
29293
|
+
this.gesture = undefined;
|
|
29294
|
+
}
|
|
29295
|
+
}
|
|
29296
|
+
emitColChange() {
|
|
29297
|
+
this.ionPickerColChange.emit(this.col);
|
|
29298
|
+
}
|
|
29299
|
+
setSelected(selectedIndex, duration) {
|
|
29300
|
+
// if there is a selected index, then figure out it's y position
|
|
29301
|
+
// if there isn't a selected index, then just use the top y position
|
|
29302
|
+
const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
|
|
29303
|
+
this.velocity = 0;
|
|
29304
|
+
// set what y position we're at
|
|
29305
|
+
if (this.rafId !== undefined)
|
|
29306
|
+
cancelAnimationFrame(this.rafId);
|
|
29307
|
+
this.update(y, duration, true);
|
|
29308
|
+
this.emitColChange();
|
|
29309
|
+
}
|
|
29310
|
+
update(y, duration, saveY) {
|
|
29311
|
+
if (!this.optsEl) {
|
|
29312
|
+
return;
|
|
29313
|
+
}
|
|
29314
|
+
// ensure we've got a good round number :)
|
|
29315
|
+
let translateY = 0;
|
|
29316
|
+
let translateZ = 0;
|
|
29317
|
+
const { col, rotateFactor } = this;
|
|
29318
|
+
const prevSelected = col.selectedIndex;
|
|
29319
|
+
const selectedIndex = (col.selectedIndex = this.indexForY(-y));
|
|
29320
|
+
const durationStr = duration === 0 ? '' : duration + 'ms';
|
|
29321
|
+
const scaleStr = `scale(${this.scaleFactor})`;
|
|
29322
|
+
const children = this.optsEl.children;
|
|
29323
|
+
for (let i = 0; i < children.length; i++) {
|
|
29324
|
+
const button = children[i];
|
|
29325
|
+
const opt = col.options[i];
|
|
29326
|
+
const optOffset = i * this.optHeight + y;
|
|
29327
|
+
let transform = '';
|
|
29328
|
+
if (rotateFactor !== 0) {
|
|
29329
|
+
const rotateX = optOffset * rotateFactor;
|
|
29330
|
+
if (Math.abs(rotateX) <= 90) {
|
|
29331
|
+
translateY = 0;
|
|
29332
|
+
translateZ = 90;
|
|
29333
|
+
transform = `rotateX(${rotateX}deg) `;
|
|
29334
|
+
}
|
|
29335
|
+
else {
|
|
29336
|
+
translateY = -9999;
|
|
29337
|
+
}
|
|
29338
|
+
}
|
|
29339
|
+
else {
|
|
29340
|
+
translateZ = 0;
|
|
29341
|
+
translateY = optOffset;
|
|
29342
|
+
}
|
|
29343
|
+
const selected = selectedIndex === i;
|
|
29344
|
+
transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
|
|
29345
|
+
if (this.scaleFactor !== 1 && !selected) {
|
|
29346
|
+
transform += scaleStr;
|
|
29347
|
+
}
|
|
29348
|
+
// Update transition duration
|
|
29349
|
+
if (this.noAnimate) {
|
|
29350
|
+
opt.duration = 0;
|
|
29351
|
+
button.style.transitionDuration = '';
|
|
29352
|
+
}
|
|
29353
|
+
else if (duration !== opt.duration) {
|
|
29354
|
+
opt.duration = duration;
|
|
29355
|
+
button.style.transitionDuration = durationStr;
|
|
29356
|
+
}
|
|
29357
|
+
// Update transform
|
|
29358
|
+
if (transform !== opt.transform) {
|
|
29359
|
+
opt.transform = transform;
|
|
29360
|
+
}
|
|
29361
|
+
button.style.transform = transform;
|
|
29362
|
+
/**
|
|
29363
|
+
* Ensure that the select column
|
|
29364
|
+
* item has the selected class
|
|
29365
|
+
*/
|
|
29366
|
+
opt.selected = selected;
|
|
29367
|
+
if (selected) {
|
|
29368
|
+
button.classList.add(PICKER_OPT_SELECTED);
|
|
29369
|
+
}
|
|
29370
|
+
else {
|
|
29371
|
+
button.classList.remove(PICKER_OPT_SELECTED);
|
|
29372
|
+
}
|
|
29373
|
+
}
|
|
29374
|
+
this.col.prevSelected = prevSelected;
|
|
29375
|
+
if (saveY) {
|
|
29376
|
+
this.y = y;
|
|
29377
|
+
}
|
|
29378
|
+
if (this.lastIndex !== selectedIndex) {
|
|
29379
|
+
// have not set a last index yet
|
|
29380
|
+
hapticSelectionChanged();
|
|
29381
|
+
this.lastIndex = selectedIndex;
|
|
29382
|
+
}
|
|
29383
|
+
}
|
|
29384
|
+
decelerate() {
|
|
29385
|
+
if (this.velocity !== 0) {
|
|
29386
|
+
// still decelerating
|
|
29387
|
+
this.velocity *= DECELERATION_FRICTION;
|
|
29388
|
+
// do not let it go slower than a velocity of 1
|
|
29389
|
+
this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
|
|
29390
|
+
let y = this.y + this.velocity;
|
|
29391
|
+
if (y > this.minY) {
|
|
29392
|
+
// whoops, it's trying to scroll up farther than the options we have!
|
|
29393
|
+
y = this.minY;
|
|
29394
|
+
this.velocity = 0;
|
|
29395
|
+
}
|
|
29396
|
+
else if (y < this.maxY) {
|
|
29397
|
+
// gahh, it's trying to scroll down farther than we can!
|
|
29398
|
+
y = this.maxY;
|
|
29399
|
+
this.velocity = 0;
|
|
29400
|
+
}
|
|
29401
|
+
this.update(y, 0, true);
|
|
29402
|
+
const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1;
|
|
29403
|
+
if (notLockedIn) {
|
|
29404
|
+
// isn't locked in yet, keep decelerating until it is
|
|
29405
|
+
this.rafId = requestAnimationFrame(() => this.decelerate());
|
|
29406
|
+
}
|
|
29407
|
+
else {
|
|
29408
|
+
this.velocity = 0;
|
|
29409
|
+
this.emitColChange();
|
|
29410
|
+
hapticSelectionEnd();
|
|
29411
|
+
}
|
|
29412
|
+
}
|
|
29413
|
+
else if (this.y % this.optHeight !== 0) {
|
|
29414
|
+
// needs to still get locked into a position so options line up
|
|
29415
|
+
const currentPos = Math.abs(this.y % this.optHeight);
|
|
29416
|
+
// create a velocity in the direction it needs to scroll
|
|
29417
|
+
this.velocity = currentPos > this.optHeight / 2 ? 1 : -1;
|
|
29418
|
+
this.decelerate();
|
|
29419
|
+
}
|
|
29420
|
+
}
|
|
29421
|
+
indexForY(y) {
|
|
29422
|
+
return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
|
|
29423
|
+
}
|
|
29424
|
+
onStart(detail) {
|
|
29425
|
+
// We have to prevent default in order to block scrolling under the picker
|
|
29426
|
+
// but we DO NOT have to stop propagation, since we still want
|
|
29427
|
+
// some "click" events to capture
|
|
29428
|
+
if (detail.event.cancelable) {
|
|
29429
|
+
detail.event.preventDefault();
|
|
29430
|
+
}
|
|
29431
|
+
detail.event.stopPropagation();
|
|
29432
|
+
hapticSelectionStart();
|
|
29433
|
+
// reset everything
|
|
29434
|
+
if (this.rafId !== undefined)
|
|
29435
|
+
cancelAnimationFrame(this.rafId);
|
|
29436
|
+
const options = this.col.options;
|
|
29437
|
+
let minY = options.length - 1;
|
|
29438
|
+
let maxY = 0;
|
|
29439
|
+
for (let i = 0; i < options.length; i++) {
|
|
29440
|
+
if (!options[i].disabled) {
|
|
29441
|
+
minY = Math.min(minY, i);
|
|
29442
|
+
maxY = Math.max(maxY, i);
|
|
29443
|
+
}
|
|
29444
|
+
}
|
|
29445
|
+
this.minY = -(minY * this.optHeight);
|
|
29446
|
+
this.maxY = -(maxY * this.optHeight);
|
|
29447
|
+
}
|
|
29448
|
+
onMove(detail) {
|
|
29449
|
+
if (detail.event.cancelable) {
|
|
29450
|
+
detail.event.preventDefault();
|
|
29451
|
+
}
|
|
29452
|
+
detail.event.stopPropagation();
|
|
29453
|
+
// update the scroll position relative to pointer start position
|
|
29454
|
+
let y = this.y + detail.deltaY;
|
|
29455
|
+
if (y > this.minY) {
|
|
29456
|
+
// scrolling up higher than scroll area
|
|
29457
|
+
y = Math.pow(y, 0.8);
|
|
29458
|
+
this.bounceFrom = y;
|
|
29459
|
+
}
|
|
29460
|
+
else if (y < this.maxY) {
|
|
29461
|
+
// scrolling down below scroll area
|
|
29462
|
+
y += Math.pow(this.maxY - y, 0.9);
|
|
29463
|
+
this.bounceFrom = y;
|
|
29464
|
+
}
|
|
29465
|
+
else {
|
|
29466
|
+
this.bounceFrom = 0;
|
|
29467
|
+
}
|
|
29468
|
+
this.update(y, 0, false);
|
|
29469
|
+
}
|
|
29470
|
+
onEnd(detail) {
|
|
29471
|
+
if (this.bounceFrom > 0) {
|
|
29472
|
+
// bounce back up
|
|
29473
|
+
this.update(this.minY, 100, true);
|
|
29474
|
+
this.emitColChange();
|
|
29475
|
+
return;
|
|
29277
29476
|
}
|
|
29278
|
-
|
|
29279
|
-
|
|
29280
|
-
|
|
29281
|
-
|
|
29282
|
-
* user-generated events that cannot be caught with normal
|
|
29283
|
-
* input/change event listeners.
|
|
29284
|
-
* @internal
|
|
29285
|
-
*/
|
|
29286
|
-
async setValue(value) {
|
|
29287
|
-
if (this.disabled === true || this.value === value) {
|
|
29477
|
+
else if (this.bounceFrom < 0) {
|
|
29478
|
+
// bounce back down
|
|
29479
|
+
this.update(this.maxY, 100, true);
|
|
29480
|
+
this.emitColChange();
|
|
29288
29481
|
return;
|
|
29289
29482
|
}
|
|
29290
|
-
this.
|
|
29291
|
-
this.
|
|
29292
|
-
|
|
29293
|
-
|
|
29294
|
-
|
|
29295
|
-
|
|
29296
|
-
|
|
29297
|
-
|
|
29298
|
-
|
|
29299
|
-
|
|
29483
|
+
this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
|
|
29484
|
+
if (this.velocity === 0 && detail.deltaY === 0) {
|
|
29485
|
+
const opt = detail.event.target.closest('.picker-opt');
|
|
29486
|
+
if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) {
|
|
29487
|
+
this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
|
|
29488
|
+
}
|
|
29489
|
+
}
|
|
29490
|
+
else {
|
|
29491
|
+
this.y += detail.deltaY;
|
|
29492
|
+
if (Math.abs(detail.velocityY) < 0.05) {
|
|
29493
|
+
const isScrollingUp = detail.deltaY > 0;
|
|
29494
|
+
const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
|
|
29495
|
+
if (isScrollingUp && optHeightFraction > 0.5) {
|
|
29496
|
+
this.velocity = Math.abs(this.velocity) * -1;
|
|
29497
|
+
}
|
|
29498
|
+
else if (!isScrollingUp && optHeightFraction <= 0.5) {
|
|
29499
|
+
this.velocity = Math.abs(this.velocity);
|
|
29500
|
+
}
|
|
29501
|
+
}
|
|
29502
|
+
this.decelerate();
|
|
29300
29503
|
}
|
|
29301
29504
|
}
|
|
29302
|
-
|
|
29505
|
+
refresh(forceRefresh, animated) {
|
|
29303
29506
|
var _a;
|
|
29304
|
-
|
|
29305
|
-
|
|
29306
|
-
|
|
29307
|
-
|
|
29308
|
-
|
|
29309
|
-
|
|
29310
|
-
|
|
29311
|
-
* If the whole picker column is disabled, the current value should appear active
|
|
29312
|
-
* If the current value item is specifically disabled, it should not appear active
|
|
29313
|
-
*/
|
|
29314
|
-
if (!this.disabled && option.disabled) {
|
|
29315
|
-
return false;
|
|
29507
|
+
let min = this.col.options.length - 1;
|
|
29508
|
+
let max = 0;
|
|
29509
|
+
const options = this.col.options;
|
|
29510
|
+
for (let i = 0; i < options.length; i++) {
|
|
29511
|
+
if (!options[i].disabled) {
|
|
29512
|
+
min = Math.min(min, i);
|
|
29513
|
+
max = Math.max(max, i);
|
|
29316
29514
|
}
|
|
29317
|
-
|
|
29318
|
-
|
|
29515
|
+
}
|
|
29516
|
+
/**
|
|
29517
|
+
* Only update selected value if column has a
|
|
29518
|
+
* velocity of 0. If it does not, then the
|
|
29519
|
+
* column is animating might land on
|
|
29520
|
+
* a value different than the value at
|
|
29521
|
+
* selectedIndex
|
|
29522
|
+
*/
|
|
29523
|
+
if (this.velocity !== 0) {
|
|
29524
|
+
return;
|
|
29525
|
+
}
|
|
29526
|
+
const selectedIndex = clamp(min, (_a = this.col.selectedIndex) !== null && _a !== void 0 ? _a : 0, max);
|
|
29527
|
+
if (this.col.prevSelected !== selectedIndex || forceRefresh) {
|
|
29528
|
+
const y = selectedIndex * this.optHeight * -1;
|
|
29529
|
+
const duration = animated ? TRANSITION_DURATION : 0;
|
|
29530
|
+
this.velocity = 0;
|
|
29531
|
+
this.update(y, duration, true);
|
|
29532
|
+
}
|
|
29533
|
+
}
|
|
29534
|
+
onDomChange(forceRefresh, animated) {
|
|
29535
|
+
const colEl = this.optsEl;
|
|
29536
|
+
if (colEl) {
|
|
29537
|
+
// DOM READ
|
|
29538
|
+
// We perfom a DOM read over a rendered item, this needs to happen after the first render or after the column has changed
|
|
29539
|
+
this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
|
|
29540
|
+
}
|
|
29541
|
+
this.refresh(forceRefresh, animated);
|
|
29319
29542
|
}
|
|
29320
29543
|
render() {
|
|
29321
|
-
const
|
|
29544
|
+
const col = this.col;
|
|
29322
29545
|
const mode = getIonMode$1(this);
|
|
29323
|
-
return (hAsync(Host, { key: '
|
|
29324
|
-
|
|
29325
|
-
|
|
29326
|
-
['picker-column-numeric-input']: numericInput,
|
|
29327
|
-
['picker-column-disabled']: disabled,
|
|
29328
|
-
}) }, hAsync("slot", { key: '9dc15ea0601ddd2cb2e0a745e91e036a8bd96f8b', name: "prefix" }), hAsync("div", { key: 'de4fe28ee4bc46b7c0420d6ab0df0e7809443da9', class: "picker-opts", ref: (el) => {
|
|
29329
|
-
this.scrollEl = el;
|
|
29330
|
-
}, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, hAsync("div", { key: '5297617462cc30e9444039ae032d8bdf718349af', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '55ea39ef867bcb1a11a912d52ecd20cb886c5fb3', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '3496730ce6182ebfd33e0ee4bafc130feb575a31', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '44c3628aa957d60f799dc7019f72fe8b676c7843' }), hAsync("div", { key: '5a1809f6c949678a67e0d4b5bfe93ea335c0161d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '98fd57f1c66dbaebc2db2dd5da142671b3159fd1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '85590708abddfa885994e549deac64866fec938f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: 'bb7e674f543696a80fcbfb1f68f2e975826898a6', name: "suffix" })));
|
|
29546
|
+
return (hAsync(Host, { key: '86125e95f18837dfd021db01777d72a1562d8ee3', 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: {
|
|
29547
|
+
'max-width': this.col.columnWidth,
|
|
29548
|
+
} }, col.prefix && (hAsync("div", { key: 'b0f3d39e0bd128781066ffefb7a1e40d12a9e76d', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '0b106ac4d56916eaaa7f09d1b68348b3754b7bba', 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", { key: '00ff2f9dbb4561787e5a5223327c6a2a33f8362e', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
|
|
29331
29549
|
}
|
|
29332
29550
|
get el() { return getElement(this); }
|
|
29333
29551
|
static get watchers() { return {
|
|
29334
|
-
"
|
|
29335
|
-
"
|
|
29336
|
-
}],
|
|
29337
|
-
"value": [{
|
|
29338
|
-
"valueChange": 0
|
|
29552
|
+
"col": [{
|
|
29553
|
+
"colChanged": 0
|
|
29339
29554
|
}]
|
|
29340
29555
|
}; }
|
|
29341
|
-
static get style() { return
|
|
29556
|
+
static get style() { return {
|
|
29557
|
+
ios: pickerColumnIosCss(),
|
|
29558
|
+
md: pickerColumnMdCss()
|
|
29559
|
+
}; }
|
|
29342
29560
|
static get cmpMeta() { return {
|
|
29343
|
-
"$flags$":
|
|
29344
|
-
"$tagName$": "ion-picker-column",
|
|
29561
|
+
"$flags$": 32,
|
|
29562
|
+
"$tagName$": "ion-picker-legacy-column",
|
|
29345
29563
|
"$members$": {
|
|
29346
|
-
"
|
|
29347
|
-
"value": [1032],
|
|
29348
|
-
"color": [513],
|
|
29349
|
-
"numericInput": [4, "numeric-input"],
|
|
29350
|
-
"ariaLabel": [32],
|
|
29351
|
-
"isActive": [32],
|
|
29352
|
-
"scrollActiveItemIntoView": [64],
|
|
29353
|
-
"setValue": [64],
|
|
29354
|
-
"setFocus": [64]
|
|
29564
|
+
"col": [16]
|
|
29355
29565
|
},
|
|
29356
29566
|
"$listeners$": undefined,
|
|
29357
29567
|
"$lazyBundleId$": "-",
|
|
29358
|
-
"$attrsToReflect$": [
|
|
29568
|
+
"$attrsToReflect$": []
|
|
29359
29569
|
}; }
|
|
29360
29570
|
}
|
|
29361
|
-
const
|
|
29571
|
+
const PICKER_OPT_SELECTED = 'picker-opt-selected';
|
|
29572
|
+
const DECELERATION_FRICTION = 0.97;
|
|
29573
|
+
const MAX_PICKER_SPEED = 90;
|
|
29574
|
+
const TRANSITION_DURATION = 150;
|
|
29362
29575
|
|
|
29363
29576
|
const pickerColumnOptionIosCss = () => `.picker-column-option-button{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){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}`;
|
|
29364
29577
|
|
|
@@ -30555,9 +30768,9 @@ const mdLeaveAnimation$1 = (baseEl) => {
|
|
|
30555
30768
|
.addAnimation([backdropAnimation, wrapperAnimation]);
|
|
30556
30769
|
};
|
|
30557
30770
|
|
|
30558
|
-
const popoverIosCss = () => `:host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{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);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host
|
|
30771
|
+
const popoverIosCss = () => `:host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{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);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host{--width:200px;--max-height:90%;--box-shadow:none;--backdrop-opacity:var(--ion-backdrop-opacity, 0.08)}:host(.popover-desktop){--box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.12)}.popover-content{border-radius:10px}:host(.popover-desktop) .popover-content{border:0.5px solid var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.popover-arrow{display:block;position:absolute;width:20px;height:10px;overflow:hidden;z-index:11}.popover-arrow::after{top:3px;border-radius:3px;position:absolute;width:14px;height:14px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--background);content:"";z-index:10}.popover-arrow::after{inset-inline-start:3px}:host(.popover-bottom) .popover-arrow{top:auto;bottom:-10px}:host(.popover-bottom) .popover-arrow::after{top:-6px}:host(.popover-side-left) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host(.popover-side-right) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host(.popover-side-top) .popover-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.popover-side-start) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host-context([dir=rtl]):host(.popover-side-start) .popover-arrow,:host-context([dir=rtl]).popover-side-start .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}@supports selector(:dir(rtl)){:host(.popover-side-start:dir(rtl)) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}}:host(.popover-side-end) .popover-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host-context([dir=rtl]):host(.popover-side-end) .popover-arrow,:host-context([dir=rtl]).popover-side-end .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@supports selector(:dir(rtl)){:host(.popover-side-end:dir(rtl)) .popover-arrow{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}.popover-arrow,.popover-content{opacity:0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.popover-translucent) .popover-content,:host(.popover-translucent) .popover-arrow::after{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}`;
|
|
30559
30772
|
|
|
30560
|
-
const popoverMdCss = () => `:host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{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);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host
|
|
30773
|
+
const popoverMdCss = () => `:host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{z-index:10}.popover-content{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);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:auto;z-index:10}::slotted(.popover-viewport){--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-start:dir(rtl)){--offset-x:-5px}}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}@supports selector(:dir(rtl)){:host(.popover-nested.popover-side-end:dir(rtl)){--offset-x:5px}}:host{--width:250px;--max-height:90%;--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);--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}.popover-content{border-radius:4px;-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]) .popover-content{-webkit-transform-origin:right top;transform-origin:right top}[dir=rtl] .popover-content{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.popover-content:dir(rtl){-webkit-transform-origin:right top;transform-origin:right top}}.popover-viewport{-webkit-transition-delay:100ms;transition-delay:100ms}.popover-wrapper{opacity:0}`;
|
|
30561
30774
|
|
|
30562
30775
|
// TODO(FW-2832): types
|
|
30563
30776
|
/**
|
|
@@ -30781,10 +30994,6 @@ class Popover {
|
|
|
30781
30994
|
this.headerResizeObserver.disconnect();
|
|
30782
30995
|
this.headerResizeObserver = undefined;
|
|
30783
30996
|
}
|
|
30784
|
-
// Clean up aria-hidden if removed without dismiss() being called
|
|
30785
|
-
if (this.presented) {
|
|
30786
|
-
cleanupRootFocusTrapAccessibility();
|
|
30787
|
-
}
|
|
30788
30997
|
}
|
|
30789
30998
|
componentWillLoad() {
|
|
30790
30999
|
var _a, _b;
|
|
@@ -31023,9 +31232,9 @@ class Popover {
|
|
|
31023
31232
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
31024
31233
|
const desktop = isPlatform('desktop');
|
|
31025
31234
|
const enableArrow = arrow && !parentPopover;
|
|
31026
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
31235
|
+
return (hAsync(Host, Object.assign({ key: '2edd8333c630efbce59071f8a383e4326e928dbc', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
31027
31236
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
31028
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '
|
|
31237
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: 'aac4e68b08197534375e8ea3f8c9ea0c10ab2af4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'b7f4ebf57d4148b32856b0075d286f454be8de5d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '607d94c28d73e8e957175a7c0f6e8a99ec4dcd53', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '4366a5a5de550c09895e923f345583508e1ec30c', class: "popover-content", part: "content" }, hAsync("slot", { key: 'eb7886fbc99c15b667b7d825d24f1c12d9380f03' })))));
|
|
31029
31238
|
}
|
|
31030
31239
|
get el() { return getElement(this); }
|
|
31031
31240
|
static get watchers() { return {
|
|
@@ -31136,7 +31345,7 @@ class ProgressBar {
|
|
|
31136
31345
|
const mode = getIonMode$1(this);
|
|
31137
31346
|
// If the progress is displayed as a solid bar.
|
|
31138
31347
|
const progressSolid = buffer === 1;
|
|
31139
|
-
return (hAsync(Host, { key: '
|
|
31348
|
+
return (hAsync(Host, { key: 'c859e48f3d24a458239e36d925e5dc003ed07c6b', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
|
|
31140
31349
|
[mode]: true,
|
|
31141
31350
|
[`progress-bar-${type}`]: true,
|
|
31142
31351
|
'progress-paused': paused,
|
|
@@ -31321,7 +31530,7 @@ class Radio {
|
|
|
31321
31530
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
31322
31531
|
const mode = getIonMode$1(this);
|
|
31323
31532
|
const inItem = hostContext('ion-item', el);
|
|
31324
|
-
return (hAsync(Host, { key: '
|
|
31533
|
+
return (hAsync(Host, { key: 'af5dc59ed528150872e907ed1036e3e2decba939', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
|
|
31325
31534
|
[mode]: true,
|
|
31326
31535
|
'in-item': inItem,
|
|
31327
31536
|
'radio-checked': checked,
|
|
@@ -31332,10 +31541,10 @@ class Radio {
|
|
|
31332
31541
|
// Focus and active styling should not apply when the radio is in an item
|
|
31333
31542
|
'ion-activatable': !inItem,
|
|
31334
31543
|
'ion-focusable': !inItem,
|
|
31335
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '
|
|
31544
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '1312aba3259a87fe23a6911cdfa477e309469c8b', class: "radio-wrapper" }, hAsync("div", { key: 'b342aa27e240a300836d2a135658d346b95daf09', class: {
|
|
31336
31545
|
'label-text-wrapper': true,
|
|
31337
31546
|
'label-text-wrapper-hidden': !hasLabel,
|
|
31338
|
-
}, part: "label" }, hAsync("slot", { key: '
|
|
31547
|
+
}, part: "label" }, hAsync("slot", { key: '0a4613d29aa783d1882cf889377f7e4fd4fea51d' })), hAsync("div", { key: '191faea79dc4cd8befc4b873f5bd9f5af8ca2acc', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
31339
31548
|
}
|
|
31340
31549
|
get el() { return getElement(this); }
|
|
31341
31550
|
static get watchers() { return {
|
|
@@ -31354,7 +31563,7 @@ class Radio {
|
|
|
31354
31563
|
"color": [513],
|
|
31355
31564
|
"name": [1],
|
|
31356
31565
|
"disabled": [4],
|
|
31357
|
-
"value": [
|
|
31566
|
+
"value": [8],
|
|
31358
31567
|
"labelPlacement": [1, "label-placement"],
|
|
31359
31568
|
"justify": [1],
|
|
31360
31569
|
"alignment": [1],
|
|
@@ -31365,7 +31574,7 @@ class Radio {
|
|
|
31365
31574
|
},
|
|
31366
31575
|
"$listeners$": undefined,
|
|
31367
31576
|
"$lazyBundleId$": "-",
|
|
31368
|
-
"$attrsToReflect$": [["color", "color"]
|
|
31577
|
+
"$attrsToReflect$": [["color", "color"]]
|
|
31369
31578
|
}; }
|
|
31370
31579
|
}
|
|
31371
31580
|
let radioButtonIds = 0;
|
|
@@ -32430,7 +32639,7 @@ class Range {
|
|
|
32430
32639
|
const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
|
|
32431
32640
|
const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
|
|
32432
32641
|
renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
|
|
32433
|
-
return (hAsync(Host, { key: '
|
|
32642
|
+
return (hAsync(Host, { key: 'f8063d1234fb113fe55a7902845dd4b4da8b1edb', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
|
|
32434
32643
|
[mode]: true,
|
|
32435
32644
|
'in-item': inItem,
|
|
32436
32645
|
'range-disabled': disabled,
|
|
@@ -32444,10 +32653,10 @@ class Range {
|
|
|
32444
32653
|
'range-item-end-adjustment': needsEndAdjustment,
|
|
32445
32654
|
'range-value-min': valueAtMin,
|
|
32446
32655
|
'range-value-max': valueAtMax,
|
|
32447
|
-
}) }, hAsync("label", { key: '
|
|
32656
|
+
}) }, hAsync("label", { key: 'beead65ab01e3b18e4be59c0ee8ac6ebf32aad7c', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '03633c689d9d2e4c50a2131bcd560329df49e314', class: {
|
|
32448
32657
|
'label-text-wrapper': true,
|
|
32449
32658
|
'label-text-wrapper-hidden': !hasLabel,
|
|
32450
|
-
}, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '
|
|
32659
|
+
}, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: 'c066804263ab6ae7393f8dcc51184b7198844ffa', class: "native-wrapper" }, hAsync("slot", { key: '7e8ea224d72b3e965dd948bee7e45c1a096b6899', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '21f242f6f60ff3adce6a2d90b2d4dac1ceaf6624', name: "end" })))));
|
|
32451
32660
|
}
|
|
32452
32661
|
get el() { return getElement(this); }
|
|
32453
32662
|
static get watchers() { return {
|
|
@@ -33518,7 +33727,7 @@ class Refresher {
|
|
|
33518
33727
|
}
|
|
33519
33728
|
render() {
|
|
33520
33729
|
const mode = getIonMode$1(this);
|
|
33521
|
-
return (hAsync(Host, { key: '
|
|
33730
|
+
return (hAsync(Host, { key: '80fa313b0d77161680836bdd6aa334d02c549b41', slot: "fixed", class: {
|
|
33522
33731
|
[mode]: true,
|
|
33523
33732
|
// Used internally for styling
|
|
33524
33733
|
[`refresher-${mode}`]: true,
|
|
@@ -33744,7 +33953,7 @@ class RefresherContent {
|
|
|
33744
33953
|
const pullingIcon = this.pullingIcon;
|
|
33745
33954
|
const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
|
|
33746
33955
|
const mode = getIonMode$1(this);
|
|
33747
|
-
return (hAsync(Host, { key: '
|
|
33956
|
+
return (hAsync(Host, { key: '4add42b9fdfded359d1b054d04c2c6ff48e028c8', class: mode }, hAsync("div", { key: '45d4e4e0adfed7f96dd1849767aa2cde947de044', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: '6bd6c8ef5bf6e10699eec3bd8646431bfe1077a0', class: "refresher-pulling-icon" }, hAsync("div", { key: '852d20414da53352c8e58bc627e0fda38eff97cb', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: '0dde3578a80cc4b77a07c4d1db1af80c7eb10c27', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { key: 'c71dbfcf416a19c30fed38f722ebf0358c2181dd', class: "arrow-container" }, hAsync("ion-icon", { key: 'fa7c2cf624e7a9c41964e66cabc88c594da6d1fd', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: '3dd68c9968b421c379d1c4349ba619ee0a189c6d', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: 'f83bceceae4fa8245f91939fb6db589a595e975b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: '98e22ceb0f7883e871f815f6199f5cb313e2e086', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: 'faabe8a9b61c02a00994ef978bb82b9ba4537214', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: '029a0c073ee1a07f01211e12ba2abc985cf21ed7', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
|
|
33748
33957
|
}
|
|
33749
33958
|
get el() { return getElement(this); }
|
|
33750
33959
|
static get cmpMeta() { return {
|
|
@@ -33785,7 +33994,7 @@ class Reorder {
|
|
|
33785
33994
|
render() {
|
|
33786
33995
|
const mode = getIonMode$1(this);
|
|
33787
33996
|
const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
|
|
33788
|
-
return (hAsync(Host, { key: '
|
|
33997
|
+
return (hAsync(Host, { key: 'b869db61ca6393cf1476f2111a66b387b567c6d1', class: mode }, hAsync("slot", { key: 'a78edd1776835282b8b5c841377018f36c83296c' }, hAsync("ion-icon", { key: '7fb067c47bbb9a7258e5063f028282cc097d0f94', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
|
|
33789
33998
|
}
|
|
33790
33999
|
get el() { return getElement(this); }
|
|
33791
34000
|
static get style() { return {
|
|
@@ -34056,7 +34265,7 @@ class ReorderGroup {
|
|
|
34056
34265
|
}
|
|
34057
34266
|
render() {
|
|
34058
34267
|
const mode = getIonMode$1(this);
|
|
34059
|
-
return (hAsync(Host, { key: '
|
|
34268
|
+
return (hAsync(Host, { key: '9527bbdedaab63d31f562c874a7332ea60c4b47b', class: {
|
|
34060
34269
|
[mode]: true,
|
|
34061
34270
|
'reorder-enabled': !this.disabled,
|
|
34062
34271
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
|
@@ -34174,7 +34383,7 @@ class RippleEffect {
|
|
|
34174
34383
|
}
|
|
34175
34384
|
render() {
|
|
34176
34385
|
const mode = getIonMode$1(this);
|
|
34177
|
-
return (hAsync(Host, { key: '
|
|
34386
|
+
return (hAsync(Host, { key: '3b59cbb44741569a7350f9638b4392add673b6f1', role: "presentation", class: {
|
|
34178
34387
|
[mode]: true,
|
|
34179
34388
|
unbounded: this.unbounded,
|
|
34180
34389
|
} }));
|
|
@@ -35308,10 +35517,10 @@ class RouterLink {
|
|
|
35308
35517
|
rel: this.rel,
|
|
35309
35518
|
target: this.target,
|
|
35310
35519
|
};
|
|
35311
|
-
return (hAsync(Host, { key: '
|
|
35520
|
+
return (hAsync(Host, { key: '8372835161d507c7b821b7536c55f912eb6ce704', onClick: this.onClick, class: createColorClasses$1(this.color, {
|
|
35312
35521
|
[mode]: true,
|
|
35313
35522
|
'ion-activatable': true,
|
|
35314
|
-
}) }, hAsync("a", Object.assign({ key: '
|
|
35523
|
+
}) }, hAsync("a", Object.assign({ key: '315966e14a17760f3f64197e8315200039787897' }, attrs), hAsync("slot", { key: '95fc1697b884225e85e647dddcaa8f4af8b9a979' }))));
|
|
35315
35524
|
}
|
|
35316
35525
|
static get style() { return routerLinkCss(); }
|
|
35317
35526
|
static get cmpMeta() { return {
|
|
@@ -35350,11 +35559,10 @@ class RouterOutlet {
|
|
|
35350
35559
|
*/
|
|
35351
35560
|
this.animated = true;
|
|
35352
35561
|
}
|
|
35353
|
-
swipeGestureChanged() {
|
|
35354
|
-
this.updateGestureEnabled();
|
|
35355
|
-
}
|
|
35356
35562
|
swipeHandlerChanged() {
|
|
35357
|
-
this.
|
|
35563
|
+
if (this.gesture) {
|
|
35564
|
+
this.gesture.enable(this.swipeHandler !== undefined);
|
|
35565
|
+
}
|
|
35358
35566
|
}
|
|
35359
35567
|
async connectedCallback() {
|
|
35360
35568
|
const onStart = () => {
|
|
@@ -35394,21 +35602,11 @@ class RouterOutlet {
|
|
|
35394
35602
|
this.gestureOrAnimationInProgress = false;
|
|
35395
35603
|
}
|
|
35396
35604
|
});
|
|
35397
|
-
|
|
35398
|
-
this.swipeGesture = config.getBoolean('swipeBackEnabled', this.mode === 'ios');
|
|
35399
|
-
}
|
|
35400
|
-
else {
|
|
35401
|
-
this.updateGestureEnabled();
|
|
35402
|
-
}
|
|
35605
|
+
this.swipeHandlerChanged();
|
|
35403
35606
|
}
|
|
35404
35607
|
componentWillLoad() {
|
|
35405
35608
|
this.ionNavWillLoad.emit();
|
|
35406
35609
|
}
|
|
35407
|
-
updateGestureEnabled() {
|
|
35408
|
-
if (this.gesture) {
|
|
35409
|
-
this.gesture.enable(this.swipeHandler !== undefined && this.swipeGesture === true);
|
|
35410
|
-
}
|
|
35411
|
-
}
|
|
35412
35610
|
disconnectedCallback() {
|
|
35413
35611
|
if (this.gesture) {
|
|
35414
35612
|
this.gesture.destroy();
|
|
@@ -35519,13 +35717,10 @@ class RouterOutlet {
|
|
|
35519
35717
|
return true;
|
|
35520
35718
|
}
|
|
35521
35719
|
render() {
|
|
35522
|
-
return hAsync("slot", { key: '
|
|
35720
|
+
return hAsync("slot", { key: '386c41745b61daba161cf75063da97fe29ba36cb' });
|
|
35523
35721
|
}
|
|
35524
35722
|
get el() { return getElement(this); }
|
|
35525
35723
|
static get watchers() { return {
|
|
35526
|
-
"swipeGesture": [{
|
|
35527
|
-
"swipeGestureChanged": 0
|
|
35528
|
-
}],
|
|
35529
35724
|
"swipeHandler": [{
|
|
35530
35725
|
"swipeHandlerChanged": 0
|
|
35531
35726
|
}]
|
|
@@ -35539,7 +35734,6 @@ class RouterOutlet {
|
|
|
35539
35734
|
"delegate": [16],
|
|
35540
35735
|
"animated": [4],
|
|
35541
35736
|
"animation": [16],
|
|
35542
|
-
"swipeGesture": [1028, "swipe-gesture"],
|
|
35543
35737
|
"swipeHandler": [16],
|
|
35544
35738
|
"commit": [64],
|
|
35545
35739
|
"setRouteId": [64],
|
|
@@ -35558,7 +35752,7 @@ class Row {
|
|
|
35558
35752
|
registerInstance(this, hostRef);
|
|
35559
35753
|
}
|
|
35560
35754
|
render() {
|
|
35561
|
-
return (hAsync(Host, { key: '
|
|
35755
|
+
return (hAsync(Host, { key: '8ba906a8cbea060a79ed658c9bf34906f0c11d38', class: getIonMode$1(this) }, hAsync("slot", { key: 'd1009176f45b588fa52c7d9eb336f3c6d3214bb8' })));
|
|
35562
35756
|
}
|
|
35563
35757
|
static get style() { return rowCss(); }
|
|
35564
35758
|
static get cmpMeta() { return {
|
|
@@ -35610,7 +35804,7 @@ class Searchbar {
|
|
|
35610
35804
|
/**
|
|
35611
35805
|
* Set the input's autocorrect property.
|
|
35612
35806
|
*/
|
|
35613
|
-
this.autocorrect =
|
|
35807
|
+
this.autocorrect = 'off';
|
|
35614
35808
|
/**
|
|
35615
35809
|
* Set the cancel button icon. Only applies to `md` mode.
|
|
35616
35810
|
* Defaults to `arrow-back-sharp`.
|
|
@@ -36031,8 +36225,8 @@ class Searchbar {
|
|
|
36031
36225
|
const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
|
|
36032
36226
|
const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
|
|
36033
36227
|
const shouldShowCancelButton = this.shouldShowCancelButton();
|
|
36034
|
-
const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '
|
|
36035
|
-
return (hAsync(Host, { key: '
|
|
36228
|
+
const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '226b7a676b4819cda4062b8334fa8d4c4cee6f1a', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '89adb4efa17a78c973bbd5527cfac91d99ceb9bb', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
|
|
36229
|
+
return (hAsync(Host, { key: '237dd767403dba3cb3d7de8905996e275669da3b', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
|
|
36036
36230
|
[mode]: true,
|
|
36037
36231
|
'searchbar-animated': animated,
|
|
36038
36232
|
'searchbar-disabled': this.disabled,
|
|
@@ -36042,14 +36236,14 @@ class Searchbar {
|
|
|
36042
36236
|
'searchbar-has-focus': this.focused,
|
|
36043
36237
|
'searchbar-should-show-clear': this.shouldShowClearButton(),
|
|
36044
36238
|
'searchbar-should-show-cancel': this.shouldShowCancelButton(),
|
|
36045
|
-
}) }, hAsync("div", { key: '
|
|
36239
|
+
}) }, hAsync("div", { key: '5b4bdf7280bea710304b6975e76390fe6ceb7417', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '01a0820a2cf904aec1c7d84b542ab7918d435632', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: 'cd64973206b1cc59d221112861733b7ee25f0323', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '2061fa8449bbc576cf8c5130ea613378ea492944', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
|
|
36046
36240
|
/**
|
|
36047
36241
|
* This prevents mobile browsers from
|
|
36048
36242
|
* blurring the input when the clear
|
|
36049
36243
|
* button is activated.
|
|
36050
36244
|
*/
|
|
36051
36245
|
ev.preventDefault();
|
|
36052
|
-
}, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '
|
|
36246
|
+
}, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '00df6f7742bff70b1b088d544b8c00e962e7216c', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
|
|
36053
36247
|
}
|
|
36054
36248
|
get el() { return getElement(this); }
|
|
36055
36249
|
static get watchers() { return {
|
|
@@ -36081,7 +36275,7 @@ class Searchbar {
|
|
|
36081
36275
|
"animated": [4],
|
|
36082
36276
|
"autocapitalize": [1],
|
|
36083
36277
|
"autocomplete": [1],
|
|
36084
|
-
"autocorrect": [
|
|
36278
|
+
"autocorrect": [1],
|
|
36085
36279
|
"cancelButtonIcon": [1, "cancel-button-icon"],
|
|
36086
36280
|
"cancelButtonText": [1, "cancel-button-text"],
|
|
36087
36281
|
"clearIcon": [1, "clear-icon"],
|
|
@@ -36658,14 +36852,14 @@ class Segment {
|
|
|
36658
36852
|
}
|
|
36659
36853
|
render() {
|
|
36660
36854
|
const mode = getIonMode$1(this);
|
|
36661
|
-
return (hAsync(Host, { key: '
|
|
36855
|
+
return (hAsync(Host, { key: 'eda6b7b88b7967b55cf9098c59b655b348a42224', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
|
|
36662
36856
|
[mode]: true,
|
|
36663
36857
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
36664
36858
|
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
|
36665
36859
|
'segment-activated': this.activated,
|
|
36666
36860
|
'segment-disabled': this.disabled,
|
|
36667
36861
|
'segment-scrollable': this.scrollable,
|
|
36668
|
-
}) }, hAsync("slot", { key: '
|
|
36862
|
+
}) }, hAsync("slot", { key: 'fdb451f235ce59c5bb50c61a13c69160ece2d5df', onSlotchange: this.onSlottedItemsChange })));
|
|
36669
36863
|
}
|
|
36670
36864
|
get el() { return getElement(this); }
|
|
36671
36865
|
static get watchers() { return {
|
|
@@ -36813,7 +37007,7 @@ class SegmentButton {
|
|
|
36813
37007
|
const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
|
|
36814
37008
|
const mode = getIonMode$1(this);
|
|
36815
37009
|
const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
|
|
36816
|
-
return (hAsync(Host, { key: '
|
|
37010
|
+
return (hAsync(Host, { key: 'f69e2a24198a7c57543dbe66902da039a6569c64', class: {
|
|
36817
37011
|
[mode]: true,
|
|
36818
37012
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
36819
37013
|
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
|
@@ -36829,7 +37023,7 @@ class SegmentButton {
|
|
|
36829
37023
|
'ion-activatable': true,
|
|
36830
37024
|
'ion-activatable-instant': true,
|
|
36831
37025
|
'ion-focusable': true,
|
|
36832
|
-
} }, hAsync("button", Object.assign({ key: '
|
|
37026
|
+
} }, hAsync("button", Object.assign({ key: '0a6fea3a374074af19f7ece0ba3a7cf1e269ab6d', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '991018a38c59a6f3d76b2e952e5569c874d2c13e', class: "button-inner" }, hAsync("slot", { key: '23c547c80108025027b913c7fcbec189286627a3' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '7faa9d06ab6aa7346d16b0b6808979759a79650c' })), hAsync("div", { key: '0d61badf2c227dc38e20185b2b2bb590a5efa434', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: 'a84035752b78491c344179d1e61d109fb4bd1cf1', part: "indicator-background", class: "segment-button-indicator-background" }))));
|
|
36833
37027
|
}
|
|
36834
37028
|
get el() { return getElement(this); }
|
|
36835
37029
|
static get watchers() { return {
|
|
@@ -36866,7 +37060,7 @@ class SegmentContent {
|
|
|
36866
37060
|
registerInstance(this, hostRef);
|
|
36867
37061
|
}
|
|
36868
37062
|
render() {
|
|
36869
|
-
return (hAsync(Host, { key: '
|
|
37063
|
+
return (hAsync(Host, { key: '665f41a854621f898eaf7ba9a49e77cc9326501e' }, hAsync("slot", { key: '635aa57fbf6167dcd36fe8dc5dfc1c313637ac04' })));
|
|
36870
37064
|
}
|
|
36871
37065
|
static get style() { return segmentContentCss(); }
|
|
36872
37066
|
static get cmpMeta() { return {
|
|
@@ -36985,11 +37179,11 @@ class SegmentView {
|
|
|
36985
37179
|
}
|
|
36986
37180
|
render() {
|
|
36987
37181
|
const { disabled, isManualScroll, swipeGesture } = this;
|
|
36988
|
-
return (hAsync(Host, { key: '
|
|
37182
|
+
return (hAsync(Host, { key: '2a6e0a1046af75b1fa0eed20a5fbbb4634480297', class: {
|
|
36989
37183
|
'segment-view-disabled': disabled,
|
|
36990
37184
|
'segment-view-scroll-disabled': isManualScroll === false,
|
|
36991
37185
|
'segment-view-swipe-disabled': swipeGesture === false,
|
|
36992
|
-
} }, hAsync("slot", { key: '
|
|
37186
|
+
} }, hAsync("slot", { key: '644b60d179d0de3fa204e3bef26a3503ceeaf1d6' })));
|
|
36993
37187
|
}
|
|
36994
37188
|
get el() { return getElement(this); }
|
|
36995
37189
|
static get style() { return {
|
|
@@ -37011,9 +37205,9 @@ class SegmentView {
|
|
|
37011
37205
|
}; }
|
|
37012
37206
|
}
|
|
37013
37207
|
|
|
37014
|
-
const selectIosCss = () => `:host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--background:transparent;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--
|
|
37208
|
+
const selectIosCss = () => `:host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--background:transparent;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;font-family:var(--ion-font-family, inherit);white-space:nowrap;cursor:pointer;z-index:2}:host(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.has-focus) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}button{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}.select-icon{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative;-ms-flex-negative:0;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}:host(.select-label-placement-stacked) .select-icon,:host(.select-label-placement-floating) .select-icon{position:absolute;height:100%}:host(.select-ltr.select-label-placement-stacked) .select-icon,:host(.select-ltr.select-label-placement-floating) .select-icon{right:var(--padding-end, 0)}:host(.select-rtl.select-label-placement-stacked) .select-icon,:host(.select-rtl.select-label-placement-floating) .select-icon{left:var(--padding-start, 0)}.select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-wrapper{-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);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.select-wrapper .select-placeholder{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-wrapper-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{-ms-flex-positive:1;flex-grow:1}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.select-bottom{-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:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}:host(.has-focus.ion-valid),:host(.select-expanded.ion-valid),:host(.ion-touched.ion-invalid),:host(.select-expanded.ion-touched.ion-invalid){--border-color:var(--highlight-color)}.select-bottom .error-text{display:none;color:var(--highlight-color-invalid)}.select-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .select-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .select-bottom .helper-text{display:none}.label-text-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden,.select-outline-notch-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.select-justify-start) .select-wrapper{-ms-flex-pack:start;justify-content:start}:host(.select-justify-end) .select-wrapper{-ms-flex-pack:end;justify-content:end}:host(.select-label-placement-start) .select-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.select-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-end) .select-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.select-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-wrapper,:host(.select-label-placement-floating) .select-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-label-placement-floating) .label-text-wrapper{max-width:100%}:host(.select-ltr.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0;-ms-flex-positive:1;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.select-label-placement-floating:not(.label-floating)) .native-wrapper .select-placeholder{opacity:0}:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:1}:host(.label-floating) .label-text-wrapper{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]:last-of-type){-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}::slotted([slot=end]:first-of-type){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host{--border-width:0.55px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--highlight-height:0px}.select-icon{width:1.125rem;height:1.125rem;color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{width:calc(100% - 1.125rem - 4px)}:host(.select-disabled){opacity:0.3}::slotted(ion-button[slot=start].button-has-icon-only),::slotted(ion-button[slot=end].button-has-icon-only){--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}`;
|
|
37015
37209
|
|
|
37016
|
-
const selectMdCss = () => `:host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--background:transparent;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--select-text-media-height:1.5em;--select-text-media-width:1.5em;--select-text-gap:12px;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;font-family:var(--ion-font-family, inherit);white-space:nowrap;cursor:pointer;z-index:2}:host(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.has-focus) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}button{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}.select-icon{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative;-ms-flex-negative:0;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}:host(.select-label-placement-stacked) .select-icon,:host(.select-label-placement-floating) .select-icon{position:absolute;height:100%}:host(.select-ltr.select-label-placement-stacked) .select-icon,:host(.select-ltr.select-label-placement-floating) .select-icon{right:var(--padding-end, 0)}:host(.select-rtl.select-label-placement-stacked) .select-icon,:host(.select-rtl.select-label-placement-floating) .select-icon{left:var(--padding-start, 0)}.select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-text>*+*{-webkit-margin-start:var(--select-text-gap);margin-inline-start:var(--select-text-gap)}.select-text img,.select-text ion-img,.select-text ion-icon,.select-text ion-thumbnail,.select-text ion-avatar{border-radius:var(--select-text-media-border-radius);width:var(--select-text-media-width);height:var(--select-text-media-height);border-width:var(--select-text-media-border-width);border-style:var(--select-text-media-border-style);border-color:var(--select-text-media-border-color)}.select-wrapper{-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);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.select-wrapper .select-placeholder{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-wrapper-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{-ms-flex-positive:1;flex-grow:1}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.select-bottom{-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:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}:host(.has-focus.ion-valid),:host(.select-expanded.ion-valid),:host(.ion-touched.ion-invalid),:host(.select-expanded.ion-touched.ion-invalid){--border-color:var(--highlight-color)}.select-bottom .error-text{display:none;color:var(--highlight-color-invalid)}.select-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .select-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .select-bottom .helper-text{display:none}.label-text-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden,.select-outline-notch-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.select-justify-start) .select-wrapper{-ms-flex-pack:start;justify-content:start}:host(.select-justify-end) .select-wrapper{-ms-flex-pack:end;justify-content:end}:host(.select-label-placement-start) .select-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.select-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-end) .select-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.select-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-wrapper,:host(.select-label-placement-floating) .select-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-label-placement-floating) .label-text-wrapper{max-width:100%}:host(.select-ltr.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0;-ms-flex-positive:1;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.select-label-placement-floating:not(.label-floating)) .native-wrapper .select-placeholder{opacity:0}:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:1}:host(.label-floating) .label-text-wrapper{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]:last-of-type){-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}::slotted([slot=end]:first-of-type){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.select-fill-solid){--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-500, var(--ion-background-color-step-500, gray));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}:host(.select-fill-solid) .select-wrapper{border-bottom:var(--border-width) var(--border-style) var(--border-color)}:host(.select-expanded.select-fill-solid.ion-valid),:host(.has-focus.select-fill-solid.ion-valid),:host(.select-fill-solid.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host(.select-fill-solid) .select-bottom{border-top:none}@media (any-hover: hover){:host(.select-fill-solid:hover){--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}:host(.select-fill-solid.select-expanded),:host(.select-fill-solid.has-focus){--background:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--border-color:var(--highlight-color)}:host(.select-fill-solid) .select-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0px;border-end-start-radius:0px}:host(.label-floating.select-fill-solid) .label-text-wrapper{max-width:calc(100% / 0.75)}:host(.in-item.select-expanded.select-fill-solid) .select-wrapper .select-icon,:host(.in-item.has-focus.select-fill-solid) .select-wrapper .select-icon,:host(.in-item.has-focus.ion-valid.select-fill-solid) .select-wrapper .select-icon,:host(.in-item.ion-touched.ion-invalid.select-fill-solid) .select-wrapper .select-icon{color:var(--highlight-color)}:host(.select-fill-outline){--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}:host(.select-fill-outline.select-shape-round){--border-radius:28px;--padding-start:32px;--padding-end:32px}:host(.has-focus.select-fill-outline.ion-valid),:host(.select-fill-outline.ion-touched.ion-invalid){--border-color:var(--highlight-color)}@media (any-hover: hover){:host(.select-fill-outline:hover){--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}:host(.select-fill-outline.select-expanded),:host(.select-fill-outline.has-focus){--border-width:var(--highlight-height);--border-color:var(--highlight-color)}:host(.select-fill-outline) .select-bottom{border-top:none}:host(.select-fill-outline) .select-wrapper{border-bottom:none}:host(.select-ltr.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-fill-outline.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-fill-outline.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-fill-outline.select-label-placement-floating) .label-text-wrapper{position:absolute;max-width:calc(100% - var(--padding-start) - var(--padding-end))}:host(.select-fill-outline) .label-text-wrapper{position:relative;z-index:1}:host(.label-floating.select-fill-outline) .label-text-wrapper{-webkit-transform:translateY(-32%) scale(0.75);transform:translateY(-32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75)}:host(.select-fill-outline.select-label-placement-stacked) select,:host(.select-fill-outline.select-label-placement-floating) select{margin-left:0;margin-right:0;margin-top:6px;margin-bottom:6px}:host(.select-fill-outline) .select-outline-container{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:100%}:host(.select-fill-outline) .select-outline-start,:host(.select-fill-outline) .select-outline-end{pointer-events:none}:host(.select-fill-outline) .select-outline-start,:host(.select-fill-outline) .select-outline-notch,:host(.select-fill-outline) .select-outline-end{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color);-webkit-box-sizing:border-box;box-sizing:border-box}:host(.select-fill-outline) .select-outline-notch{max-width:calc(100% - var(--padding-start) - var(--padding-end))}:host(.select-fill-outline) .notch-spacer{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none}:host(.select-fill-outline) .select-outline-start{-webkit-border-start:var(--border-width) var(--border-style) var(--border-color);border-inline-start:var(--border-width) var(--border-style) var(--border-color)}:host(.select-fill-outline) .select-outline-start{border-start-start-radius:var(--border-radius);border-start-end-radius:0px;border-end-end-radius:0px;border-end-start-radius:var(--border-radius)}:host(.select-fill-outline) .select-outline-start{width:calc(var(--padding-start) - 4px)}:host(.select-fill-outline) .select-outline-end{-webkit-border-end:var(--border-width) var(--border-style) var(--border-color);border-inline-end:var(--border-width) var(--border-style) var(--border-color)}:host(.select-fill-outline) .select-outline-end{border-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px}:host(.select-fill-outline) .select-outline-end{-ms-flex-positive:1;flex-grow:1}:host(.label-floating.select-fill-outline) .select-outline-notch{border-top:none}:host(.in-item.select-expanded.select-fill-outline) .select-wrapper .select-icon,:host(.in-item.has-focus.select-fill-outline) .select-wrapper .select-icon,:host(.in-item.has-focus.ion-valid.select-fill-outline) .select-wrapper .select-icon,:host(.in-item.ion-touched.ion-invalid.select-fill-outline) .select-wrapper .select-icon{color:var(--highlight-color)}:host{--border-width:1px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--highlight-height:2px}:host(.select-label-placement-floating.select-expanded) .label-text-wrapper,:host(.select-label-placement-floating.has-focus) .label-text-wrapper,:host(.select-label-placement-stacked.select-expanded) .label-text-wrapper,:host(.select-label-placement-stacked.has-focus) .label-text-wrapper{color:var(--highlight-color)}:host(.has-focus.select-label-placement-floating.ion-valid) .label-text-wrapper,:host(.select-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,:host(.has-focus.select-label-placement-stacked.ion-valid) .label-text-wrapper,:host(.select-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper{color:var(--highlight-color)}.select-highlight{bottom:-1px;position:absolute;width:100%;height:var(--highlight-height);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.select-highlight{inset-inline-start:0}:host(.select-expanded) .select-highlight,:host(.has-focus) .select-highlight{-webkit-transform:scale(1);transform:scale(1)}:host(.in-item) .select-highlight{bottom:0}:host(.in-item) .select-highlight{inset-inline-start:0}.select-icon{width:0.8125rem;-webkit-transition:-webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host(.select-expanded:not(.has-expanded-icon)) .select-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.in-item.select-expanded) .select-wrapper .select-icon,:host(.in-item.has-focus) .select-wrapper .select-icon,:host(.in-item.has-focus.ion-valid) .select-wrapper .select-icon,:host(.in-item.ion-touched.ion-invalid) .select-wrapper .select-icon{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host(.select-expanded) .select-wrapper .select-icon,:host(.has-focus.ion-valid) .select-wrapper .select-icon,:host(.ion-touched.ion-invalid) .select-wrapper .select-icon,:host(.has-focus) .select-wrapper .select-icon{color:var(--highlight-color)}:host(.select-shape-round){--border-radius:16px}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{width:calc(100% - 0.8125rem - 4px)}:host(.select-disabled){opacity:0.38}::slotted(ion-button[slot=start].button-has-icon-only),::slotted(ion-button[slot=end].button-has-icon-only){--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}`;
|
|
37210
|
+
const selectMdCss = () => `:host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--background:transparent;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;font-family:var(--ion-font-family, inherit);white-space:nowrap;cursor:pointer;z-index:2}:host(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.has-focus) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}button{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}.select-icon{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative;-ms-flex-negative:0;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}:host(.select-label-placement-stacked) .select-icon,:host(.select-label-placement-floating) .select-icon{position:absolute;height:100%}:host(.select-ltr.select-label-placement-stacked) .select-icon,:host(.select-ltr.select-label-placement-floating) .select-icon{right:var(--padding-end, 0)}:host(.select-rtl.select-label-placement-stacked) .select-icon,:host(.select-rtl.select-label-placement-floating) .select-icon{left:var(--padding-start, 0)}.select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-wrapper{-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);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal;cursor:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}.select-wrapper .select-placeholder{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.select-wrapper-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;overflow:hidden}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{-ms-flex-positive:1;flex-grow:1}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}.select-bottom{-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:5px;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem;white-space:normal}:host(.has-focus.ion-valid),:host(.select-expanded.ion-valid),:host(.ion-touched.ion-invalid),:host(.select-expanded.ion-touched.ion-invalid){--border-color:var(--highlight-color)}.select-bottom .error-text{display:none;color:var(--highlight-color-invalid)}.select-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .select-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .select-bottom .helper-text{display:none}.label-text-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text,::slotted([slot=label]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden,.select-outline-notch-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden}:host(.select-justify-space-between) .select-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.select-justify-start) .select-wrapper{-ms-flex-pack:start;justify-content:start}:host(.select-justify-end) .select-wrapper{-ms-flex-pack:end;justify-content:end}:host(.select-label-placement-start) .select-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.select-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-end) .select-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.select-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.select-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.select-label-placement-stacked) .select-wrapper,:host(.select-label-placement-floating) .select-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}:host(.select-label-placement-stacked) .label-text-wrapper,:host(.select-label-placement-floating) .label-text-wrapper{max-width:100%}:host(.select-ltr.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-label-placement-stacked) .native-wrapper,:host(.select-label-placement-floating) .native-wrapper{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0;-ms-flex-positive:1;flex-grow:1;width:100%}:host(.select-label-placement-floating) .label-text-wrapper{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}:host(.select-label-placement-floating:not(.label-floating)) .native-wrapper .select-placeholder{opacity:0}:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-focus.select-label-placement-floating) .native-wrapper .select-placeholder,:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:1}:host(.label-floating) .label-text-wrapper{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted([slot=start]:last-of-type){-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}::slotted([slot=end]:first-of-type){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.select-fill-solid){--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-500, var(--ion-background-color-step-500, gray));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}:host(.select-fill-solid) .select-wrapper{border-bottom:var(--border-width) var(--border-style) var(--border-color)}:host(.select-expanded.select-fill-solid.ion-valid),:host(.has-focus.select-fill-solid.ion-valid),:host(.select-fill-solid.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host(.select-fill-solid) .select-bottom{border-top:none}@media (any-hover: hover){:host(.select-fill-solid:hover){--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}:host(.select-fill-solid.select-expanded),:host(.select-fill-solid.has-focus){--background:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--border-color:var(--highlight-color)}:host(.select-fill-solid) .select-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0px;border-end-start-radius:0px}:host(.label-floating.select-fill-solid) .label-text-wrapper{max-width:calc(100% / 0.75)}:host(.in-item.select-expanded.select-fill-solid) .select-wrapper .select-icon,:host(.in-item.has-focus.select-fill-solid) .select-wrapper .select-icon,:host(.in-item.has-focus.ion-valid.select-fill-solid) .select-wrapper .select-icon,:host(.in-item.ion-touched.ion-invalid.select-fill-solid) .select-wrapper .select-icon{color:var(--highlight-color)}:host(.select-fill-outline){--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}:host(.select-fill-outline.select-shape-round){--border-radius:28px;--padding-start:32px;--padding-end:32px}:host(.has-focus.select-fill-outline.ion-valid),:host(.select-fill-outline.ion-touched.ion-invalid){--border-color:var(--highlight-color)}@media (any-hover: hover){:host(.select-fill-outline:hover){--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}:host(.select-fill-outline.select-expanded),:host(.select-fill-outline.has-focus){--border-width:var(--highlight-height);--border-color:var(--highlight-color)}:host(.select-fill-outline) .select-bottom{border-top:none}:host(.select-fill-outline) .select-wrapper{border-bottom:none}:host(.select-ltr.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-ltr.select-fill-outline.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host(.select-rtl.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-rtl.select-fill-outline.select-label-placement-floating) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}:host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,:host(.select-fill-outline.select-label-placement-floating) .label-text-wrapper{position:absolute;max-width:calc(100% - var(--padding-start) - var(--padding-end))}:host(.select-fill-outline) .label-text-wrapper{position:relative;z-index:1}:host(.label-floating.select-fill-outline) .label-text-wrapper{-webkit-transform:translateY(-32%) scale(0.75);transform:translateY(-32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75)}:host(.select-fill-outline.select-label-placement-stacked) select,:host(.select-fill-outline.select-label-placement-floating) select{margin-left:0;margin-right:0;margin-top:6px;margin-bottom:6px}:host(.select-fill-outline) .select-outline-container{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:100%}:host(.select-fill-outline) .select-outline-start,:host(.select-fill-outline) .select-outline-end{pointer-events:none}:host(.select-fill-outline) .select-outline-start,:host(.select-fill-outline) .select-outline-notch,:host(.select-fill-outline) .select-outline-end{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color);-webkit-box-sizing:border-box;box-sizing:border-box}:host(.select-fill-outline) .select-outline-notch{max-width:calc(100% - var(--padding-start) - var(--padding-end))}:host(.select-fill-outline) .notch-spacer{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none}:host(.select-fill-outline) .select-outline-start{-webkit-border-start:var(--border-width) var(--border-style) var(--border-color);border-inline-start:var(--border-width) var(--border-style) var(--border-color)}:host(.select-fill-outline) .select-outline-start{border-start-start-radius:var(--border-radius);border-start-end-radius:0px;border-end-end-radius:0px;border-end-start-radius:var(--border-radius)}:host(.select-fill-outline) .select-outline-start{width:calc(var(--padding-start) - 4px)}:host(.select-fill-outline) .select-outline-end{-webkit-border-end:var(--border-width) var(--border-style) var(--border-color);border-inline-end:var(--border-width) var(--border-style) var(--border-color)}:host(.select-fill-outline) .select-outline-end{border-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px}:host(.select-fill-outline) .select-outline-end{-ms-flex-positive:1;flex-grow:1}:host(.label-floating.select-fill-outline) .select-outline-notch{border-top:none}:host(.in-item.select-expanded.select-fill-outline) .select-wrapper .select-icon,:host(.in-item.has-focus.select-fill-outline) .select-wrapper .select-icon,:host(.in-item.has-focus.ion-valid.select-fill-outline) .select-wrapper .select-icon,:host(.in-item.ion-touched.ion-invalid.select-fill-outline) .select-wrapper .select-icon{color:var(--highlight-color)}:host{--border-width:1px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--highlight-height:2px}:host(.select-label-placement-floating.select-expanded) .label-text-wrapper,:host(.select-label-placement-floating.has-focus) .label-text-wrapper,:host(.select-label-placement-stacked.select-expanded) .label-text-wrapper,:host(.select-label-placement-stacked.has-focus) .label-text-wrapper{color:var(--highlight-color)}:host(.has-focus.select-label-placement-floating.ion-valid) .label-text-wrapper,:host(.select-label-placement-floating.ion-touched.ion-invalid) .label-text-wrapper,:host(.has-focus.select-label-placement-stacked.ion-valid) .label-text-wrapper,:host(.select-label-placement-stacked.ion-touched.ion-invalid) .label-text-wrapper{color:var(--highlight-color)}.select-highlight{bottom:-1px;position:absolute;width:100%;height:var(--highlight-height);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.select-highlight{inset-inline-start:0}:host(.select-expanded) .select-highlight,:host(.has-focus) .select-highlight{-webkit-transform:scale(1);transform:scale(1)}:host(.in-item) .select-highlight{bottom:0}:host(.in-item) .select-highlight{inset-inline-start:0}.select-icon{width:0.8125rem;-webkit-transition:-webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host(.select-expanded:not(.has-expanded-icon)) .select-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.in-item.select-expanded) .select-wrapper .select-icon,:host(.in-item.has-focus) .select-wrapper .select-icon,:host(.in-item.has-focus.ion-valid) .select-wrapper .select-icon,:host(.in-item.ion-touched.ion-invalid) .select-wrapper .select-icon{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host(.select-expanded) .select-wrapper .select-icon,:host(.has-focus.ion-valid) .select-wrapper .select-icon,:host(.ion-touched.ion-invalid) .select-wrapper .select-icon,:host(.has-focus) .select-wrapper .select-icon{color:var(--highlight-color)}:host(.select-shape-round){--border-radius:16px}:host(.select-label-placement-stacked) .select-wrapper-inner,:host(.select-label-placement-floating) .select-wrapper-inner{width:calc(100% - 0.8125rem - 4px)}:host(.select-disabled){opacity:0.38}::slotted(ion-button[slot=start].button-has-icon-only),::slotted(ion-button[slot=end].button-has-icon-only){--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}`;
|
|
37017
37211
|
|
|
37018
37212
|
// TODO(FW-2832): types
|
|
37019
37213
|
/**
|
|
@@ -37048,7 +37242,6 @@ class Select {
|
|
|
37048
37242
|
this.helperTextId = `${this.inputId}-helper-text`;
|
|
37049
37243
|
this.errorTextId = `${this.inputId}-error-text`;
|
|
37050
37244
|
this.inheritedAttributes = {};
|
|
37051
|
-
this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
|
|
37052
37245
|
this.isExpanded = false;
|
|
37053
37246
|
/**
|
|
37054
37247
|
* The `hasFocus` state ensures the focus class is
|
|
@@ -37174,40 +37367,9 @@ class Select {
|
|
|
37174
37367
|
this.emitStyle();
|
|
37175
37368
|
}
|
|
37176
37369
|
setValue(value) {
|
|
37177
|
-
if (this.isValueEqual(this.value, value)) {
|
|
37178
|
-
return;
|
|
37179
|
-
}
|
|
37180
37370
|
this.value = value;
|
|
37181
37371
|
this.ionChange.emit({ value });
|
|
37182
37372
|
}
|
|
37183
|
-
isValueEqual(currentValue, newValue) {
|
|
37184
|
-
if (this.multiple) {
|
|
37185
|
-
const currentArr = Array.isArray(currentValue) ? currentValue : [];
|
|
37186
|
-
const newArr = Array.isArray(newValue) ? newValue : [];
|
|
37187
|
-
if (currentArr.length !== newArr.length) {
|
|
37188
|
-
return false;
|
|
37189
|
-
}
|
|
37190
|
-
// Multiset compare: each new value must match a distinct current value.
|
|
37191
|
-
// A plain `every(isOptionSelected)` would accept ['a','a'] as equal to
|
|
37192
|
-
// ['a','b'] when both 'a' and 'b' map to options whose values overlap.
|
|
37193
|
-
const remaining = currentArr.slice();
|
|
37194
|
-
return newArr.every((val) => {
|
|
37195
|
-
const idx = remaining.findIndex((c) => compareOptions(c, val, this.compareWith));
|
|
37196
|
-
if (idx === -1) {
|
|
37197
|
-
return false;
|
|
37198
|
-
}
|
|
37199
|
-
remaining.splice(idx, 1);
|
|
37200
|
-
return true;
|
|
37201
|
-
});
|
|
37202
|
-
}
|
|
37203
|
-
if (currentValue == null && newValue == null) {
|
|
37204
|
-
return true;
|
|
37205
|
-
}
|
|
37206
|
-
if (currentValue == null || newValue == null) {
|
|
37207
|
-
return false;
|
|
37208
|
-
}
|
|
37209
|
-
return compareOptions(currentValue, newValue, this.compareWith);
|
|
37210
|
-
}
|
|
37211
37373
|
async connectedCallback() {
|
|
37212
37374
|
const { el } = this;
|
|
37213
37375
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
@@ -37401,11 +37563,10 @@ class Select {
|
|
|
37401
37563
|
.join(' ');
|
|
37402
37564
|
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
|
37403
37565
|
const isSelected = isOptionSelected(selectValue, value, this.compareWith);
|
|
37404
|
-
const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
|
|
37405
37566
|
return {
|
|
37406
|
-
|
|
37567
|
+
role: isSelected ? 'selected' : '',
|
|
37568
|
+
text: option.textContent,
|
|
37407
37569
|
cssClass: optClass,
|
|
37408
|
-
disabled: option.disabled,
|
|
37409
37570
|
handler: () => {
|
|
37410
37571
|
this.setValue(value);
|
|
37411
37572
|
},
|
|
@@ -37413,9 +37574,6 @@ class Select {
|
|
|
37413
37574
|
'aria-checked': isSelected ? 'true' : 'false',
|
|
37414
37575
|
role: 'radio',
|
|
37415
37576
|
},
|
|
37416
|
-
startContent,
|
|
37417
|
-
endContent,
|
|
37418
|
-
description: option.description,
|
|
37419
37577
|
};
|
|
37420
37578
|
});
|
|
37421
37579
|
// Add "cancel" button
|
|
@@ -37436,19 +37594,13 @@ class Select {
|
|
|
37436
37594
|
.filter((cls) => cls !== 'hydrated')
|
|
37437
37595
|
.join(' ');
|
|
37438
37596
|
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
|
37439
|
-
const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
|
|
37440
37597
|
return {
|
|
37441
37598
|
type: inputType,
|
|
37442
37599
|
cssClass: optClass,
|
|
37443
|
-
label:
|
|
37600
|
+
label: option.textContent || '',
|
|
37444
37601
|
value,
|
|
37445
37602
|
checked: isOptionSelected(selectValue, value, this.compareWith),
|
|
37446
37603
|
disabled: option.disabled,
|
|
37447
|
-
startContent,
|
|
37448
|
-
endContent,
|
|
37449
|
-
description: option.description,
|
|
37450
|
-
labelPlacement: option.labelPlacement,
|
|
37451
|
-
justify: option.justify,
|
|
37452
37604
|
};
|
|
37453
37605
|
});
|
|
37454
37606
|
return alertInputs;
|
|
@@ -37461,9 +37613,8 @@ class Select {
|
|
|
37461
37613
|
.filter((cls) => cls !== 'hydrated')
|
|
37462
37614
|
.join(' ');
|
|
37463
37615
|
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
|
37464
|
-
const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
|
|
37465
37616
|
return {
|
|
37466
|
-
text:
|
|
37617
|
+
text: option.textContent || '',
|
|
37467
37618
|
cssClass: optClass,
|
|
37468
37619
|
value,
|
|
37469
37620
|
checked: isOptionSelected(selectValue, value, this.compareWith),
|
|
@@ -37474,11 +37625,6 @@ class Select {
|
|
|
37474
37625
|
this.close();
|
|
37475
37626
|
}
|
|
37476
37627
|
},
|
|
37477
|
-
startContent,
|
|
37478
|
-
endContent,
|
|
37479
|
-
description: option.description,
|
|
37480
|
-
labelPlacement: option.labelPlacement,
|
|
37481
|
-
justify: option.justify,
|
|
37482
37628
|
};
|
|
37483
37629
|
});
|
|
37484
37630
|
return popoverOptions;
|
|
@@ -37511,21 +37657,15 @@ class Select {
|
|
|
37511
37657
|
ionShadowTarget: this.nativeWrapperEl,
|
|
37512
37658
|
} });
|
|
37513
37659
|
}
|
|
37514
|
-
const options = this.createOverlaySelectOptions(this.childOpts, value);
|
|
37515
|
-
const hasRichContent = options.some((opt) => opt.startContent || opt.endContent || opt.description);
|
|
37516
37660
|
const popoverOpts = Object.assign(Object.assign({ mode,
|
|
37517
37661
|
event, alignment: 'center', size,
|
|
37518
|
-
showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: [
|
|
37519
|
-
'select-popover',
|
|
37520
|
-
hasRichContent ? 'select-popover-rich-content' : undefined,
|
|
37521
|
-
interfaceOptions.cssClass,
|
|
37522
|
-
], componentProps: {
|
|
37662
|
+
showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
|
|
37523
37663
|
header: interfaceOptions.header,
|
|
37524
37664
|
subHeader: interfaceOptions.subHeader,
|
|
37525
37665
|
message: interfaceOptions.message,
|
|
37526
37666
|
multiple,
|
|
37527
37667
|
value,
|
|
37528
|
-
options,
|
|
37668
|
+
options: this.createOverlaySelectOptions(this.childOpts, value),
|
|
37529
37669
|
} });
|
|
37530
37670
|
return popoverController.create(popoverOpts);
|
|
37531
37671
|
}
|
|
@@ -37606,18 +37746,12 @@ class Select {
|
|
|
37606
37746
|
}
|
|
37607
37747
|
return;
|
|
37608
37748
|
}
|
|
37609
|
-
|
|
37610
|
-
* Returns the text to display in the select based on the selected value.
|
|
37611
|
-
*
|
|
37612
|
-
* @param useHTML If `true`, the returned text will include any custom HTML content from the selected option. If `false`, the returned text will be plain text without any HTML. Defaults to `false`.
|
|
37613
|
-
* @returns The text to display in the select, either with or without HTML based on the `useHTML` parameter.
|
|
37614
|
-
*/
|
|
37615
|
-
getText(useHTML = false) {
|
|
37749
|
+
getText() {
|
|
37616
37750
|
const selectedText = this.selectedText;
|
|
37617
37751
|
if (selectedText != null && selectedText !== '') {
|
|
37618
37752
|
return selectedText;
|
|
37619
37753
|
}
|
|
37620
|
-
return generateText(this.childOpts, this.value, this.compareWith
|
|
37754
|
+
return generateText(this.childOpts, this.value, this.compareWith);
|
|
37621
37755
|
}
|
|
37622
37756
|
setFocus() {
|
|
37623
37757
|
if (this.focusEl) {
|
|
@@ -37687,47 +37821,6 @@ class Select {
|
|
|
37687
37821
|
*/
|
|
37688
37822
|
return this.renderLabel();
|
|
37689
37823
|
}
|
|
37690
|
-
/**
|
|
37691
|
-
* Wraps text nodes in the select text with span elements
|
|
37692
|
-
* so spacing can be added between elements without
|
|
37693
|
-
* changing the display to prevent losing the ellipses
|
|
37694
|
-
* behavior.
|
|
37695
|
-
*
|
|
37696
|
-
* Only wraps when the string contains HTML elements
|
|
37697
|
-
* alongside text.
|
|
37698
|
-
*/
|
|
37699
|
-
wrapSelectTextNodes(html) {
|
|
37700
|
-
const temp = document.createElement('div');
|
|
37701
|
-
temp.innerHTML = html;
|
|
37702
|
-
const hasElements = Array.from(temp.childNodes).some((n) => n.nodeType === Node.ELEMENT_NODE);
|
|
37703
|
-
// Return the plain text
|
|
37704
|
-
if (!hasElements) {
|
|
37705
|
-
return html;
|
|
37706
|
-
}
|
|
37707
|
-
Array.from(temp.childNodes).forEach((node) => {
|
|
37708
|
-
var _a, _b, _c, _d;
|
|
37709
|
-
if (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
|
|
37710
|
-
const text = node.textContent;
|
|
37711
|
-
/**
|
|
37712
|
-
* Split comma separator from the text content
|
|
37713
|
-
* e.g., ", Bacon" becomes ", " text node + <span>Bacon</span>.
|
|
37714
|
-
*/
|
|
37715
|
-
const commaMatch = text.match(/^(,\s*)(.*)/);
|
|
37716
|
-
if (commaMatch) {
|
|
37717
|
-
const commaNode = document.createTextNode(commaMatch[1]);
|
|
37718
|
-
const wrapper = document.createElement('span');
|
|
37719
|
-
wrapper.textContent = commaMatch[2];
|
|
37720
|
-
(_b = node.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(wrapper, node);
|
|
37721
|
-
(_c = wrapper.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(commaNode, wrapper);
|
|
37722
|
-
return;
|
|
37723
|
-
}
|
|
37724
|
-
const wrapper = document.createElement('span');
|
|
37725
|
-
(_d = node.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(wrapper, node);
|
|
37726
|
-
wrapper.appendChild(node);
|
|
37727
|
-
}
|
|
37728
|
-
});
|
|
37729
|
-
return temp.innerHTML;
|
|
37730
|
-
}
|
|
37731
37824
|
/**
|
|
37732
37825
|
* Renders either the placeholder
|
|
37733
37826
|
* or the selected values based on
|
|
@@ -37735,7 +37828,7 @@ class Select {
|
|
|
37735
37828
|
*/
|
|
37736
37829
|
renderSelectText() {
|
|
37737
37830
|
const { placeholder } = this;
|
|
37738
|
-
const displayValue = this.getText(
|
|
37831
|
+
const displayValue = this.getText();
|
|
37739
37832
|
let addPlaceholderClass = false;
|
|
37740
37833
|
let selectText = displayValue;
|
|
37741
37834
|
if (selectText === '' && placeholder !== undefined) {
|
|
@@ -37747,10 +37840,6 @@ class Select {
|
|
|
37747
37840
|
'select-placeholder': addPlaceholderClass,
|
|
37748
37841
|
};
|
|
37749
37842
|
const textPart = addPlaceholderClass ? 'placeholder' : 'text';
|
|
37750
|
-
if (this.customHTMLEnabled) {
|
|
37751
|
-
const wrapped = this.wrapSelectTextNodes(selectText);
|
|
37752
|
-
return hAsync("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart, innerHTML: wrapped });
|
|
37753
|
-
}
|
|
37754
37843
|
return (hAsync("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText));
|
|
37755
37844
|
}
|
|
37756
37845
|
/**
|
|
@@ -37773,7 +37862,6 @@ class Select {
|
|
|
37773
37862
|
get ariaLabel() {
|
|
37774
37863
|
var _a;
|
|
37775
37864
|
const { placeholder, inheritedAttributes } = this;
|
|
37776
|
-
// Get the plain text from the selected text
|
|
37777
37865
|
const displayValue = this.getText();
|
|
37778
37866
|
// The aria label should be preferred over visible text if both are specified
|
|
37779
37867
|
const definedLabel = (_a = inheritedAttributes['aria-label']) !== null && _a !== void 0 ? _a : this.labelText;
|
|
@@ -37867,7 +37955,7 @@ class Select {
|
|
|
37867
37955
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
37868
37956
|
*/
|
|
37869
37957
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
37870
|
-
return (hAsync(Host, { key: '
|
|
37958
|
+
return (hAsync(Host, { key: '5f4ee901b65554eacc9fa52230d06b1a5ff1247c', onClick: this.onClick, class: createColorClasses$1(this.color, {
|
|
37871
37959
|
[mode]: true,
|
|
37872
37960
|
'in-item': inItem,
|
|
37873
37961
|
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
@@ -37885,7 +37973,7 @@ class Select {
|
|
|
37885
37973
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
37886
37974
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
37887
37975
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
37888
|
-
}) }, hAsync("label", { key: '
|
|
37976
|
+
}) }, hAsync("label", { key: 'd56d89b5b58da2b5eaebada9d1be58ca45c67806', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: 'bc8bf089c693781ad5b3a5db76a12223867d748e', class: "select-wrapper-inner", part: "inner" }, hAsync("slot", { key: 'e1c12b96f1573eb192608c458ed1f3463174cd89', name: "start" }), hAsync("div", { key: '6ee5e3900d8e462f175649b502ac6faa2f2b9909', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: 'faeaea34aad412e1458beab95d4b1b9ca7b87c41', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'aeff51e51c990844869eff9940575ce6b2223135', class: "select-highlight" })), this.renderBottomContent()));
|
|
37889
37977
|
}
|
|
37890
37978
|
get el() { return getElement(this); }
|
|
37891
37979
|
static get watchers() { return {
|
|
@@ -37956,232 +38044,34 @@ const parseValue = (value) => {
|
|
|
37956
38044
|
}
|
|
37957
38045
|
return value.toString();
|
|
37958
38046
|
};
|
|
37959
|
-
const generateText = (opts, value, compareWith
|
|
38047
|
+
const generateText = (opts, value, compareWith) => {
|
|
37960
38048
|
if (value === undefined) {
|
|
37961
38049
|
return '';
|
|
37962
38050
|
}
|
|
37963
38051
|
if (Array.isArray(value)) {
|
|
37964
38052
|
return value
|
|
37965
|
-
.map((v) => textForValue(opts, v, compareWith
|
|
38053
|
+
.map((v) => textForValue(opts, v, compareWith))
|
|
37966
38054
|
.filter((opt) => opt !== null)
|
|
37967
38055
|
.join(', ');
|
|
37968
38056
|
}
|
|
37969
38057
|
else {
|
|
37970
|
-
return textForValue(opts, value, compareWith
|
|
38058
|
+
return textForValue(opts, value, compareWith) || '';
|
|
37971
38059
|
}
|
|
37972
38060
|
};
|
|
37973
|
-
|
|
37974
|
-
* Returns the display text for a given value from the list of options.
|
|
37975
|
-
* When `useHTML` is true, returns sanitized HTML for the select text.
|
|
37976
|
-
* When `useHTML` is false, returns plain text for aria-label and other
|
|
37977
|
-
* text-only contexts.
|
|
37978
|
-
*
|
|
37979
|
-
* @param opts - The list of ion-select-option elements.
|
|
37980
|
-
* @param value - The value to find the matching option for.
|
|
37981
|
-
* @param compareWith - Custom comparison function or property name.
|
|
37982
|
-
* @param useHTML - If true, returns HTML string. If false, returns plain text.
|
|
37983
|
-
*/
|
|
37984
|
-
const textForValue = (opts, value, compareWith, useHTML = false) => {
|
|
38061
|
+
const textForValue = (opts, value, compareWith) => {
|
|
37985
38062
|
const selectOpt = opts.find((opt) => {
|
|
37986
38063
|
return compareOptions(value, getOptionValue(opt), compareWith);
|
|
37987
38064
|
});
|
|
37988
|
-
|
|
37989
|
-
if (!selectOpt) {
|
|
37990
|
-
return null;
|
|
37991
|
-
}
|
|
37992
|
-
// Return sanitized HTML for the select text
|
|
37993
|
-
if (customHTMLEnabled && useHTML) {
|
|
37994
|
-
return getOptionContent(selectOpt, undefined, true);
|
|
37995
|
-
}
|
|
37996
|
-
/**
|
|
37997
|
-
* When custom HTML is enabled, extract only the default slot content.
|
|
37998
|
-
* This ensures aria-label and other text-only contexts read only
|
|
37999
|
-
* the relevant option text.
|
|
38000
|
-
*/
|
|
38001
|
-
if (customHTMLEnabled) {
|
|
38002
|
-
const content = getOptionContent(selectOpt);
|
|
38003
|
-
if (typeof content === 'string') {
|
|
38004
|
-
return content;
|
|
38005
|
-
}
|
|
38006
|
-
/**
|
|
38007
|
-
* Elements were found in the default slot, extract and concatenate
|
|
38008
|
-
* their text content while trimming whitespace.
|
|
38009
|
-
*/
|
|
38010
|
-
if (content) {
|
|
38011
|
-
const texts = Array.from(content.childNodes)
|
|
38012
|
-
.map((n) => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
|
|
38013
|
-
.filter((t) => t);
|
|
38014
|
-
return texts.join(' ') || null;
|
|
38015
|
-
}
|
|
38016
|
-
// Empty option
|
|
38017
|
-
return null;
|
|
38018
|
-
}
|
|
38019
|
-
return getDefaultSlotPlainText(selectOpt);
|
|
38020
|
-
};
|
|
38021
|
-
/**
|
|
38022
|
-
* Trims whitespace from all text nodes within a DOM tree.
|
|
38023
|
-
* This prevents invisible layout shifts and unwanted gaps between
|
|
38024
|
-
* elements when HTML content is injected via innerHTML or cloneNode,
|
|
38025
|
-
* as browsers preserve whitespace (tabs, newlines, spaces) from
|
|
38026
|
-
* the original source markup.
|
|
38027
|
-
*
|
|
38028
|
-
* @param node The root node to start trimming text nodes from.
|
|
38029
|
-
*/
|
|
38030
|
-
const trimTextNodes = (node) => {
|
|
38031
|
-
node.childNodes.forEach((child) => {
|
|
38032
|
-
var _a;
|
|
38033
|
-
if (child.nodeType === Node.TEXT_NODE) {
|
|
38034
|
-
child.textContent = ((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
|
|
38035
|
-
}
|
|
38036
|
-
else if (child.nodeType === Node.ELEMENT_NODE) {
|
|
38037
|
-
trimTextNodes(child);
|
|
38038
|
-
}
|
|
38039
|
-
});
|
|
38040
|
-
};
|
|
38041
|
-
/**
|
|
38042
|
-
* Extracts and clones content from an `ion-select-option` element
|
|
38043
|
-
* for rendering within overlay interfaces or the select text when `customHTMLEnabled` is `true`.
|
|
38044
|
-
*
|
|
38045
|
-
* @param option - The `ion-select-option` element to extract content from.
|
|
38046
|
-
* @param slotName - Optional slot name to extract. If omitted, extracts the default slot content.
|
|
38047
|
-
* @param useHTML - If `true`, the returned string will include any custom HTML content. If `false`, the returned string will be plain text without any HTML.
|
|
38048
|
-
* @returns When `useHTML` is `true`, a sanitized HTML string. When `false`, a
|
|
38049
|
-
* div element containing cloned child nodes. Returns `null` if no matching
|
|
38050
|
-
* content is found.
|
|
38051
|
-
*/
|
|
38052
|
-
const getOptionContent = (option, slotName, useHTML = false) => {
|
|
38053
|
-
let nodes;
|
|
38054
|
-
if (slotName) {
|
|
38055
|
-
// Named slot: get elements with matching slot attribute
|
|
38056
|
-
nodes = Array.from(option.children).filter((el) => el.getAttribute('slot') === slotName);
|
|
38057
|
-
}
|
|
38058
|
-
else {
|
|
38059
|
-
// Default slot: get nodes without a slot attribute
|
|
38060
|
-
const defaultSlot = getOptionDefaultSlot(option) || [];
|
|
38061
|
-
nodes = defaultSlot.filter((node) => {
|
|
38062
|
-
var _a;
|
|
38063
|
-
/**
|
|
38064
|
-
* Exclude whitespace-only text nodes (newline noise between
|
|
38065
|
-
* markup elements). Element nodes are always kept, even when
|
|
38066
|
-
* their textContent is empty (e.g. <svg>, <img>).
|
|
38067
|
-
*/
|
|
38068
|
-
if (node.nodeType === Node.TEXT_NODE) {
|
|
38069
|
-
return ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) !== 0;
|
|
38070
|
-
}
|
|
38071
|
-
return true;
|
|
38072
|
-
});
|
|
38073
|
-
}
|
|
38074
|
-
if (nodes.length === 0) {
|
|
38075
|
-
return null;
|
|
38076
|
-
}
|
|
38077
|
-
// Return plain text if no elements are found
|
|
38078
|
-
if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
|
|
38079
|
-
return nodes.map((n) => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); }).join(' ') || null;
|
|
38080
|
-
}
|
|
38081
|
-
/**
|
|
38082
|
-
* Mirror known custom-element properties (e.g. ion-icon's `icon`)
|
|
38083
|
-
* onto attributes before cloning. Frameworks like Vue set these as
|
|
38084
|
-
* DOM properties, which `cloneNode` doesn't copy, so without this
|
|
38085
|
-
* step the cloned overlay copy renders without the prop's value.
|
|
38086
|
-
*/
|
|
38087
|
-
nodes.forEach((n) => {
|
|
38088
|
-
if (n.nodeType === Node.ELEMENT_NODE) {
|
|
38089
|
-
reflectPropertiesToAttributes(n);
|
|
38090
|
-
}
|
|
38091
|
-
});
|
|
38092
|
-
// Clone each node into a temporary container
|
|
38093
|
-
const container = document.createElement('div');
|
|
38094
|
-
nodes.forEach((n) => {
|
|
38095
|
-
var _a;
|
|
38096
|
-
const clone = n.cloneNode(true);
|
|
38097
|
-
if (clone.nodeType === Node.TEXT_NODE) {
|
|
38098
|
-
clone.textContent = ((_a = clone.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
|
|
38099
|
-
}
|
|
38100
|
-
else {
|
|
38101
|
-
trimTextNodes(clone);
|
|
38102
|
-
}
|
|
38103
|
-
container.appendChild(clone);
|
|
38104
|
-
});
|
|
38105
|
-
/**
|
|
38106
|
-
* Sanitize the cloned DOM in place. Trusted attributes (size, color,
|
|
38107
|
-
* shape, etc.) are preserved; event handlers, javascript: URLs, and
|
|
38108
|
-
* blocked tags are stripped.
|
|
38109
|
-
*/
|
|
38110
|
-
sanitizeDOMTree(container);
|
|
38111
|
-
if (useHTML) {
|
|
38112
|
-
return container.innerHTML.trim() || null;
|
|
38113
|
-
}
|
|
38114
|
-
return container;
|
|
38115
|
-
};
|
|
38116
|
-
/**
|
|
38117
|
-
* Returns the child nodes that belong to the default slot of an
|
|
38118
|
-
* option element, excluding any nodes that are assigned to named
|
|
38119
|
-
* slots.
|
|
38120
|
-
*
|
|
38121
|
-
* @param option - The `ion-select-option` element to extract default-slot nodes from.
|
|
38122
|
-
* @returns An array of default slot nodes, or `null` if none are found.
|
|
38123
|
-
*/
|
|
38124
|
-
const getOptionDefaultSlot = (option) => {
|
|
38125
|
-
const defaultSlotNodes = Array.from(option.childNodes).filter((node) => {
|
|
38126
|
-
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
38127
|
-
return !node.hasAttribute('slot');
|
|
38128
|
-
}
|
|
38129
|
-
return node.nodeType === Node.TEXT_NODE;
|
|
38130
|
-
});
|
|
38131
|
-
if (defaultSlotNodes.length === 0) {
|
|
38132
|
-
return null;
|
|
38133
|
-
}
|
|
38134
|
-
return defaultSlotNodes;
|
|
38135
|
-
};
|
|
38136
|
-
/**
|
|
38137
|
-
* Extracts plain text from only the default slot of an option,
|
|
38138
|
-
* excluding content assigned to named slots (start/end).
|
|
38139
|
-
*/
|
|
38140
|
-
const getDefaultSlotPlainText = (option) => {
|
|
38141
|
-
const texts = Array.from(option.childNodes)
|
|
38142
|
-
.filter((node) => {
|
|
38143
|
-
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
38144
|
-
return !node.hasAttribute('slot');
|
|
38145
|
-
}
|
|
38146
|
-
return node.nodeType === Node.TEXT_NODE;
|
|
38147
|
-
})
|
|
38148
|
-
.filter((node) => node.nodeType === Node.TEXT_NODE)
|
|
38149
|
-
.map((n) => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
|
|
38150
|
-
.filter((t) => t);
|
|
38151
|
-
return texts.join(' ');
|
|
38152
|
-
};
|
|
38153
|
-
/**
|
|
38154
|
-
* Extracts the rich content from an `ion-select-option`.
|
|
38155
|
-
* When `customHTMLEnabled` is `false`, only the plain text from the
|
|
38156
|
-
* default slot is read and the start and end slots are skipped.
|
|
38157
|
-
*
|
|
38158
|
-
* @param option - The `ion-select-option` element to extract content from.
|
|
38159
|
-
* @param customHTMLEnabled - Whether custom HTML rendering is enabled
|
|
38160
|
-
* via the `innerHTMLTemplatesEnabled` config.
|
|
38161
|
-
*/
|
|
38162
|
-
const extractOptionContent = (option, customHTMLEnabled) => {
|
|
38163
|
-
var _a, _b;
|
|
38164
|
-
if (!customHTMLEnabled) {
|
|
38165
|
-
return {
|
|
38166
|
-
content: getDefaultSlotPlainText(option),
|
|
38167
|
-
startContent: undefined,
|
|
38168
|
-
endContent: undefined,
|
|
38169
|
-
};
|
|
38170
|
-
}
|
|
38171
|
-
return {
|
|
38172
|
-
content: getOptionContent(option),
|
|
38173
|
-
startContent: (_a = getOptionContent(option, 'start')) !== null && _a !== void 0 ? _a : undefined,
|
|
38174
|
-
endContent: (_b = getOptionContent(option, 'end')) !== null && _b !== void 0 ? _b : undefined,
|
|
38175
|
-
};
|
|
38065
|
+
return selectOpt ? selectOpt.textContent : null;
|
|
38176
38066
|
};
|
|
38177
38067
|
let selectIds = 0;
|
|
38178
38068
|
const OPTION_CLASS = 'select-interface-option';
|
|
38179
38069
|
|
|
38180
|
-
const ionicSelectModalMdCss = () => `.
|
|
38070
|
+
const ionicSelectModalMdCss = () => `.sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~="container"]{display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
|
|
38181
38071
|
|
|
38182
|
-
const selectModalIosCss = () => `.
|
|
38072
|
+
const selectModalIosCss = () => `.sc-ion-select-modal-ios-h{height:100%}ion-item.sc-ion-select-modal-ios{--inner-padding-end:0}ion-radio.sc-ion-select-modal-ios::after{bottom:0;position:absolute;width:calc(100% - 0.9375rem - 16px);border-width:0px 0px 0.55px 0px;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));content:""}ion-radio.sc-ion-select-modal-ios::after{inset-inline-start:calc(0.9375rem + 16px)}`;
|
|
38183
38073
|
|
|
38184
|
-
const selectModalMdCss = () => `.
|
|
38074
|
+
const selectModalMdCss = () => `.sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(container),ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md [part~="container"]{display:none}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(label),ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
|
|
38185
38075
|
|
|
38186
38076
|
class SelectModal {
|
|
38187
38077
|
constructor(hostRef) {
|
|
@@ -38235,90 +38125,39 @@ class SelectModal {
|
|
|
38235
38125
|
}
|
|
38236
38126
|
}
|
|
38237
38127
|
renderRadioOptions() {
|
|
38238
|
-
const mode = getIonMode$1(this);
|
|
38239
38128
|
const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
|
|
38240
|
-
return (hAsync("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option
|
|
38241
|
-
var _a, _b;
|
|
38242
|
-
/**
|
|
38243
|
-
* Cast to `SelectOverlayOption` to access rich content
|
|
38244
|
-
* fields (`startContent`, `endContent`, `description`)
|
|
38245
|
-
* that are passed through from `ion-select` but not
|
|
38246
|
-
* part of the public `SelectModalOption` interface.
|
|
38247
|
-
*/
|
|
38248
|
-
const richOption = option;
|
|
38249
|
-
const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
|
|
38250
|
-
const optionLabelOptions = {
|
|
38251
|
-
id: `modal-option-${index}`,
|
|
38252
|
-
label: richOption.text,
|
|
38253
|
-
startContent: richOption.startContent,
|
|
38254
|
-
endContent: richOption.endContent,
|
|
38255
|
-
description: richOption.description,
|
|
38256
|
-
};
|
|
38257
|
-
const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'radio', 'modal');
|
|
38258
|
-
const defaultJustify = getOverlayLabelJustify(mode, 'radio', 'modal');
|
|
38259
|
-
return (hAsync("ion-item", { lines: "none",
|
|
38129
|
+
return (hAsync("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (hAsync("ion-item", { lines: "none", class: Object.assign({
|
|
38260
38130
|
// TODO FW-4784
|
|
38261
|
-
|
|
38262
|
-
|
|
38263
|
-
|
|
38264
|
-
|
|
38265
|
-
|
|
38266
|
-
|
|
38267
|
-
|
|
38268
|
-
|
|
38269
|
-
|
|
38270
|
-
}
|
|
38271
|
-
|
|
38272
|
-
|
|
38131
|
+
'item-radio-checked': option.value === checked
|
|
38132
|
+
}, getClassMap(option.cssClass)) }, hAsync("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyDown: (ev) => {
|
|
38133
|
+
if (ev.key === 'Enter' && !ev.repeat) {
|
|
38134
|
+
this.pendingEnterTarget = ev.currentTarget;
|
|
38135
|
+
}
|
|
38136
|
+
}, onKeyUp: (ev) => {
|
|
38137
|
+
if (ev.key === ' ') {
|
|
38138
|
+
// Space selects and dismisses in one press.
|
|
38139
|
+
this.closeModal();
|
|
38140
|
+
}
|
|
38141
|
+
else if (ev.key === 'Enter') {
|
|
38142
|
+
const shouldClose = this.pendingEnterTarget === ev.currentTarget;
|
|
38143
|
+
this.pendingEnterTarget = null;
|
|
38144
|
+
if (shouldClose) {
|
|
38273
38145
|
this.closeModal();
|
|
38274
38146
|
}
|
|
38275
|
-
|
|
38276
|
-
|
|
38277
|
-
this.pendingEnterTarget = null;
|
|
38278
|
-
if (shouldClose) {
|
|
38279
|
-
this.closeModal();
|
|
38280
|
-
}
|
|
38281
|
-
}
|
|
38282
|
-
} }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
|
|
38283
|
-
})));
|
|
38147
|
+
}
|
|
38148
|
+
} }, option.text))))));
|
|
38284
38149
|
}
|
|
38285
38150
|
renderCheckboxOptions() {
|
|
38286
|
-
|
|
38287
|
-
return this.options.map((option, index) => {
|
|
38288
|
-
var _a, _b;
|
|
38289
|
-
/**
|
|
38290
|
-
* Cast to `SelectOverlayOption` to access rich content
|
|
38291
|
-
* fields (`startContent`, `endContent`, `description`)
|
|
38292
|
-
* that are passed through from `ion-select` but not
|
|
38293
|
-
* part of the public `SelectModalOption` interface.
|
|
38294
|
-
*/
|
|
38295
|
-
const richOption = option;
|
|
38296
|
-
const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
|
|
38297
|
-
const optionLabelOptions = {
|
|
38298
|
-
id: `modal-option-${index}`,
|
|
38299
|
-
label: richOption.text,
|
|
38300
|
-
startContent: richOption.startContent,
|
|
38301
|
-
endContent: richOption.endContent,
|
|
38302
|
-
description: richOption.description,
|
|
38303
|
-
};
|
|
38304
|
-
const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'checkbox', 'modal');
|
|
38305
|
-
const defaultJustify = getOverlayLabelJustify(mode, 'checkbox', 'modal');
|
|
38306
|
-
return (hAsync("ion-item", {
|
|
38151
|
+
return this.options.map((option) => (hAsync("ion-item", { class: Object.assign({
|
|
38307
38152
|
// TODO FW-4784
|
|
38308
|
-
|
|
38309
|
-
|
|
38310
|
-
|
|
38311
|
-
|
|
38312
|
-
}
|
|
38313
|
-
'select-option-has-rich-content': hasRichContent,
|
|
38314
|
-
}, value: option.value, disabled: option.disabled, checked: option.checked, justify: (_a = richOption.justify) !== null && _a !== void 0 ? _a : defaultJustify, labelPlacement: (_b = richOption.labelPlacement) !== null && _b !== void 0 ? _b : defaultLabelPlacement, onIonChange: (ev) => {
|
|
38315
|
-
this.setChecked(ev);
|
|
38316
|
-
this.callOptionHandler(ev);
|
|
38317
|
-
} }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
|
|
38318
|
-
});
|
|
38153
|
+
'item-checkbox-checked': option.checked
|
|
38154
|
+
}, getClassMap(option.cssClass)) }, hAsync("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
|
|
38155
|
+
this.setChecked(ev);
|
|
38156
|
+
this.callOptionHandler(ev);
|
|
38157
|
+
} }, option.text))));
|
|
38319
38158
|
}
|
|
38320
38159
|
render() {
|
|
38321
|
-
return (hAsync(Host, { key: '
|
|
38160
|
+
return (hAsync(Host, { key: 'fda0bf6f93cd5ec9f3c64f88a52de849e0e140a2', class: getIonMode$1(this) }, hAsync("ion-header", { key: '27c0b17175a53db9ff159feeeb96451a3f011dab' }, hAsync("ion-toolbar", { key: '91a4155ebc317fbc9f1bb3e26a7e94754b953c9b' }, this.header !== undefined && hAsync("ion-title", { key: 'f6dae8e4e381f322cc90efefd9bb6ef81d4d2f3e' }, this.header), hAsync("ion-buttons", { key: 'e7760532fb2e7e7385ed6e62097d92d96ff20148', slot: "end" }, hAsync("ion-button", { key: '4999b6fc46cba138186546dca67b7950855e6fb7', onClick: () => this.closeModal() }, this.cancelText)))), hAsync("ion-content", { key: 'c73f80a4bc25b9061ea65cf11e5d811c1a4d8704' }, hAsync("ion-list", { key: 'b21905d15b36ad5eb45845e768918d2763cf48b1' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
|
|
38322
38161
|
}
|
|
38323
38162
|
get el() { return getElement(this); }
|
|
38324
38163
|
static get style() { return {
|
|
@@ -38343,24 +38182,17 @@ class SelectModal {
|
|
|
38343
38182
|
|
|
38344
38183
|
const selectOptionCss = () => `:host{display:none}`;
|
|
38345
38184
|
|
|
38346
|
-
/**
|
|
38347
|
-
* @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
|
|
38348
|
-
*
|
|
38349
|
-
* @slot - Content is placed between the named slots if provided without a slot.
|
|
38350
|
-
* @slot start - Content is placed to the left of the select option text in LTR, and to the right in RTL.
|
|
38351
|
-
* @slot end - Content is placed to the right of the select option text in LTR, and to the left in RTL.
|
|
38352
|
-
*/
|
|
38353
38185
|
class SelectOption {
|
|
38354
38186
|
constructor(hostRef) {
|
|
38355
38187
|
registerInstance(this, hostRef);
|
|
38356
38188
|
this.inputId = `ion-selopt-${selectOptionIds++}`;
|
|
38357
38189
|
/**
|
|
38358
|
-
* If `true`, the user cannot interact with the select option.
|
|
38190
|
+
* If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
|
|
38359
38191
|
*/
|
|
38360
38192
|
this.disabled = false;
|
|
38361
38193
|
}
|
|
38362
38194
|
render() {
|
|
38363
|
-
return hAsync(Host, { key: '
|
|
38195
|
+
return hAsync(Host, { key: '824730b6c1e4f15b716e91b05840e890af5f1577', role: "option", id: this.inputId, class: getIonMode$1(this) });
|
|
38364
38196
|
}
|
|
38365
38197
|
get el() { return getElement(this); }
|
|
38366
38198
|
static get style() { return selectOptionCss(); }
|
|
@@ -38369,10 +38201,7 @@ class SelectOption {
|
|
|
38369
38201
|
"$tagName$": "ion-select-option",
|
|
38370
38202
|
"$members$": {
|
|
38371
38203
|
"disabled": [4],
|
|
38372
|
-
"value": [8]
|
|
38373
|
-
"description": [1],
|
|
38374
|
-
"labelPlacement": [1, "label-placement"],
|
|
38375
|
-
"justify": [1]
|
|
38204
|
+
"value": [8]
|
|
38376
38205
|
},
|
|
38377
38206
|
"$listeners$": undefined,
|
|
38378
38207
|
"$lazyBundleId$": "-",
|
|
@@ -38381,9 +38210,9 @@ class SelectOption {
|
|
|
38381
38210
|
}
|
|
38382
38211
|
let selectOptionIds = 0;
|
|
38383
38212
|
|
|
38384
|
-
const selectPopoverIosCss = () => `.
|
|
38213
|
+
const selectPopoverIosCss = () => `.sc-ion-select-popover-ios-h ion-list.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-ios,ion-label.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-ios-h{overflow-y:auto}`;
|
|
38385
38214
|
|
|
38386
|
-
const selectPopoverMdCss = () => `.
|
|
38215
|
+
const selectPopoverMdCss = () => `.sc-ion-select-popover-md-h ion-list.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-md,ion-label.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-md-h{overflow-y:auto}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(container),ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md [part~="container"]{display:none}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(label),ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-popover-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-popover-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-popover-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
|
|
38387
38216
|
|
|
38388
38217
|
/**
|
|
38389
38218
|
* @internal
|
|
@@ -38457,91 +38286,41 @@ class SelectPopover {
|
|
|
38457
38286
|
}
|
|
38458
38287
|
}
|
|
38459
38288
|
renderCheckboxOptions(options) {
|
|
38460
|
-
|
|
38461
|
-
return options.map((option, index) => {
|
|
38462
|
-
var _a, _b;
|
|
38463
|
-
/**
|
|
38464
|
-
* Cast to `SelectOverlayOption` to access rich content
|
|
38465
|
-
* fields (`startContent`, `endContent`, `description`)
|
|
38466
|
-
* that are passed through from `ion-select` but not
|
|
38467
|
-
* part of the public `SelectPopoverOption` interface.
|
|
38468
|
-
*/
|
|
38469
|
-
const richOption = option;
|
|
38470
|
-
const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
|
|
38471
|
-
const optionLabelOptions = {
|
|
38472
|
-
id: `popover-option-${index}`,
|
|
38473
|
-
label: richOption.text,
|
|
38474
|
-
startContent: richOption.startContent,
|
|
38475
|
-
endContent: richOption.endContent,
|
|
38476
|
-
description: richOption.description,
|
|
38477
|
-
};
|
|
38478
|
-
const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'checkbox');
|
|
38479
|
-
const defaultJustify = getOverlayLabelJustify(mode, 'checkbox');
|
|
38480
|
-
return (hAsync("ion-item", {
|
|
38289
|
+
return options.map((option) => (hAsync("ion-item", { class: Object.assign({
|
|
38481
38290
|
// TODO FW-4784
|
|
38482
|
-
|
|
38483
|
-
|
|
38484
|
-
|
|
38485
|
-
|
|
38486
|
-
}
|
|
38487
|
-
'select-option-has-rich-content': hasRichContent,
|
|
38488
|
-
}, value: option.value, disabled: option.disabled, checked: option.checked, justify: (_a = richOption.justify) !== null && _a !== void 0 ? _a : defaultJustify, labelPlacement: (_b = richOption.labelPlacement) !== null && _b !== void 0 ? _b : defaultLabelPlacement, onIonChange: (ev) => {
|
|
38489
|
-
this.setChecked(ev);
|
|
38490
|
-
this.callOptionHandler(ev);
|
|
38491
|
-
} }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
|
|
38492
|
-
});
|
|
38291
|
+
'item-checkbox-checked': option.checked
|
|
38292
|
+
}, getClassMap(option.cssClass)) }, hAsync("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
|
|
38293
|
+
this.setChecked(ev);
|
|
38294
|
+
this.callOptionHandler(ev);
|
|
38295
|
+
} }, option.text))));
|
|
38493
38296
|
}
|
|
38494
38297
|
renderRadioOptions(options) {
|
|
38495
|
-
const mode = getIonMode$1(this);
|
|
38496
38298
|
const checked = options.filter((o) => o.checked).map((o) => o.value)[0];
|
|
38497
|
-
return (hAsync("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option
|
|
38498
|
-
var _a, _b;
|
|
38499
|
-
/**
|
|
38500
|
-
* Cast to `SelectOverlayOption` to access rich content
|
|
38501
|
-
* fields (`startContent`, `endContent`, `description`)
|
|
38502
|
-
* that are passed through from `ion-select` but not
|
|
38503
|
-
* part of the public `SelectPopoverOption` interface.
|
|
38504
|
-
*/
|
|
38505
|
-
const richOption = option;
|
|
38506
|
-
const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
|
|
38507
|
-
const optionLabelOptions = {
|
|
38508
|
-
id: `popover-option-${index}`,
|
|
38509
|
-
label: richOption.text,
|
|
38510
|
-
startContent: richOption.startContent,
|
|
38511
|
-
endContent: richOption.endContent,
|
|
38512
|
-
description: richOption.description,
|
|
38513
|
-
};
|
|
38514
|
-
return (hAsync("ion-item", {
|
|
38299
|
+
return (hAsync("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option) => (hAsync("ion-item", { class: Object.assign({
|
|
38515
38300
|
// TODO FW-4784
|
|
38516
|
-
|
|
38517
|
-
|
|
38518
|
-
|
|
38519
|
-
|
|
38520
|
-
|
|
38521
|
-
|
|
38522
|
-
|
|
38523
|
-
|
|
38524
|
-
|
|
38525
|
-
|
|
38526
|
-
|
|
38527
|
-
|
|
38528
|
-
|
|
38301
|
+
'item-radio-checked': option.value === checked
|
|
38302
|
+
}, getClassMap(option.cssClass)) }, hAsync("ion-radio", { value: option.value, disabled: option.disabled, onClick: () => this.dismissParentPopover(), onKeyDown: (ev) => {
|
|
38303
|
+
if (ev.key === 'Enter' && !ev.repeat) {
|
|
38304
|
+
this.pendingEnterTarget = ev.currentTarget;
|
|
38305
|
+
}
|
|
38306
|
+
}, onKeyUp: (ev) => {
|
|
38307
|
+
if (ev.key === ' ') {
|
|
38308
|
+
// Space selects and dismisses in one press.
|
|
38309
|
+
this.dismissParentPopover();
|
|
38310
|
+
}
|
|
38311
|
+
else if (ev.key === 'Enter') {
|
|
38312
|
+
const shouldDismiss = this.pendingEnterTarget === ev.currentTarget;
|
|
38313
|
+
this.pendingEnterTarget = null;
|
|
38314
|
+
if (shouldDismiss) {
|
|
38529
38315
|
this.dismissParentPopover();
|
|
38530
38316
|
}
|
|
38531
|
-
|
|
38532
|
-
|
|
38533
|
-
this.pendingEnterTarget = null;
|
|
38534
|
-
if (shouldDismiss) {
|
|
38535
|
-
this.dismissParentPopover();
|
|
38536
|
-
}
|
|
38537
|
-
}
|
|
38538
|
-
} }, renderOptionLabel(optionLabelOptions, 'select-option-label'))));
|
|
38539
|
-
})));
|
|
38317
|
+
}
|
|
38318
|
+
} }, option.text))))));
|
|
38540
38319
|
}
|
|
38541
38320
|
render() {
|
|
38542
38321
|
const { header, message, options, subHeader } = this;
|
|
38543
38322
|
const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
|
|
38544
|
-
return (hAsync(Host, { key: '
|
|
38323
|
+
return (hAsync(Host, { key: 'e7449a1ecfcdbf45a79f8e26a00253c4e146448a', class: getIonMode$1(this) }, hAsync("ion-list", { key: '52abdfc8668c3429a0dcefef8ddedb6647fdd894' }, header !== undefined && hAsync("ion-list-header", { key: '978e5c03728756feafcc60a0e10e6ec59bf2ae11' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: 'e93c44e7f07a76def16e4b11f0fb4780d84ed402' }, hAsync("ion-label", { key: 'bba1aac43b0bc7f4f00978dd8301985233f3725c', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'ad96f6017cf2cc5219540bded2c4f1ca3b532de2' }, subHeader), message !== undefined && hAsync("p", { key: '3fd038921dc40c4d0c29734433984b279ccaeec3' }, message)))), this.renderOptions(options))));
|
|
38545
38324
|
}
|
|
38546
38325
|
get el() { return getElement(this); }
|
|
38547
38326
|
static get style() { return {
|
|
@@ -38591,11 +38370,11 @@ class SkeletonText {
|
|
|
38591
38370
|
const animated = this.animated && config.getBoolean('animated', true);
|
|
38592
38371
|
const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
|
|
38593
38372
|
const mode = getIonMode$1(this);
|
|
38594
|
-
return (hAsync(Host, { key: '
|
|
38373
|
+
return (hAsync(Host, { key: 'cb8da9aba121811b9a4ffdae60ed88105897cb3c', class: {
|
|
38595
38374
|
[mode]: true,
|
|
38596
38375
|
'skeleton-text-animated': animated,
|
|
38597
38376
|
'in-media': inMedia,
|
|
38598
|
-
} }, hAsync("span", { key: '
|
|
38377
|
+
} }, hAsync("span", { key: '5379deee3c76d46d615be0cba14b4f60129ffa25' }, "\u00A0")));
|
|
38599
38378
|
}
|
|
38600
38379
|
get el() { return getElement(this); }
|
|
38601
38380
|
static get style() { return skeletonTextCss(); }
|
|
@@ -38647,7 +38426,7 @@ class Spinner {
|
|
|
38647
38426
|
svgs.push(buildLine(spinner, duration, i, spinner.lines));
|
|
38648
38427
|
}
|
|
38649
38428
|
}
|
|
38650
|
-
return (hAsync(Host, { key: '
|
|
38429
|
+
return (hAsync(Host, { key: 'dd1954e557fa14b943e761474e29e4316ba53938', class: createColorClasses$1(self.color, {
|
|
38651
38430
|
[mode]: true,
|
|
38652
38431
|
[`spinner-${spinnerName}`]: true,
|
|
38653
38432
|
'spinner-paused': self.paused || config.getBoolean('_testing'),
|
|
@@ -38746,12 +38525,12 @@ class SplitPane {
|
|
|
38746
38525
|
}
|
|
38747
38526
|
render() {
|
|
38748
38527
|
const mode = getIonMode$1(this);
|
|
38749
|
-
return (hAsync(Host, { key: '
|
|
38528
|
+
return (hAsync(Host, { key: '05c88c009fbe2e223fd261760a2b49da1653ff62', class: {
|
|
38750
38529
|
[mode]: true,
|
|
38751
38530
|
// Used internally for styling
|
|
38752
38531
|
[`split-pane-${mode}`]: true,
|
|
38753
38532
|
'split-pane-visible': this.visible,
|
|
38754
|
-
} }, hAsync("slot", { key: '
|
|
38533
|
+
} }, hAsync("slot", { key: 'b35865082661253c4468520d79234fa5dab5bd35' })));
|
|
38755
38534
|
}
|
|
38756
38535
|
get el() { return getElement(this); }
|
|
38757
38536
|
static get watchers() { return {
|
|
@@ -38823,10 +38602,10 @@ class Tab {
|
|
|
38823
38602
|
}
|
|
38824
38603
|
render() {
|
|
38825
38604
|
const { tab, active, component } = this;
|
|
38826
|
-
return (hAsync(Host, { key: '
|
|
38605
|
+
return (hAsync(Host, { key: 'fbd837bad7a0632336d46a597ace23673b153e48', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
|
|
38827
38606
|
'ion-page': component === undefined,
|
|
38828
38607
|
'tab-hidden': !active,
|
|
38829
|
-
} }, hAsync("slot", { key: '
|
|
38608
|
+
} }, hAsync("slot", { key: '35c218169fda826c9c1337558e0278d0c7f5f26a' })));
|
|
38830
38609
|
}
|
|
38831
38610
|
get el() { return getElement(this); }
|
|
38832
38611
|
static get watchers() { return {
|
|
@@ -38940,11 +38719,11 @@ class TabBar {
|
|
|
38940
38719
|
const { color, translucent, keyboardVisible } = this;
|
|
38941
38720
|
const mode = getIonMode$1(this);
|
|
38942
38721
|
const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
|
|
38943
|
-
return (hAsync(Host, { key: '
|
|
38722
|
+
return (hAsync(Host, { key: '24e164eaf81a0bec9237b561465618f10990806c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
|
|
38944
38723
|
[mode]: true,
|
|
38945
38724
|
'tab-bar-translucent': translucent,
|
|
38946
38725
|
'tab-bar-hidden': shouldHide,
|
|
38947
|
-
}) }, hAsync("slot", { key: '
|
|
38726
|
+
}) }, hAsync("slot", { key: '0ca29a2d97a7c38bbf43f8d79e271b874b4d9be8' })));
|
|
38948
38727
|
}
|
|
38949
38728
|
get el() { return getElement(this); }
|
|
38950
38729
|
static get watchers() { return {
|
|
@@ -39042,7 +38821,7 @@ class TabButton {
|
|
|
39042
38821
|
rel,
|
|
39043
38822
|
target,
|
|
39044
38823
|
};
|
|
39045
|
-
return (hAsync(Host, { key: '
|
|
38824
|
+
return (hAsync(Host, { key: '638b93ef40701ec3aefb89b1579eb91aaf6d4f8a', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
|
|
39046
38825
|
[mode]: true,
|
|
39047
38826
|
'tab-selected': selected,
|
|
39048
38827
|
'tab-disabled': disabled,
|
|
@@ -39054,7 +38833,7 @@ class TabButton {
|
|
|
39054
38833
|
'ion-activatable': true,
|
|
39055
38834
|
'ion-selectable': true,
|
|
39056
38835
|
'ion-focusable': true,
|
|
39057
|
-
} }, hAsync("a", Object.assign({ key: '
|
|
38836
|
+
} }, hAsync("a", Object.assign({ key: 'c053d32fbcdad8d5e4a409956b47164d7a080c6b' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: 'b3b460d33ec978a46b069442280d31b23bc8e794', class: "button-inner" }, hAsync("slot", { key: '87b3928475c941263261101b8fae27c6370d4671' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '6532e5b4546aebe4becaebe1c93ce0e6aedaffe7', type: "unbounded" }))));
|
|
39058
38837
|
}
|
|
39059
38838
|
get el() { return getElement(this); }
|
|
39060
38839
|
static get style() { return {
|
|
@@ -39245,7 +39024,7 @@ class Tabs {
|
|
|
39245
39024
|
return Array.from(this.el.querySelectorAll('ion-tab'));
|
|
39246
39025
|
}
|
|
39247
39026
|
render() {
|
|
39248
|
-
return (hAsync(Host, { key: '
|
|
39027
|
+
return (hAsync(Host, { key: 'c7131135b31aa312dc0207602561e1c0f4ac3e53', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '6c46e91c0389bbcea1f15f35cf3ea513a74ac545', name: "top" }), hAsync("div", { key: '4f1b649d8bb60b61402b97359de204979c5eda52', class: "tabs-inner" }, hAsync("slot", { key: '8d1ef4952be4fb33567376e1083ea4da697fcae0' })), hAsync("slot", { key: '260b8da8031494e9cb4635b3d22c49a433042db1', name: "bottom" })));
|
|
39249
39028
|
}
|
|
39250
39029
|
get el() { return getElement(this); }
|
|
39251
39030
|
static get style() { return tabsCss(); }
|
|
@@ -39285,9 +39064,9 @@ class Text {
|
|
|
39285
39064
|
}
|
|
39286
39065
|
render() {
|
|
39287
39066
|
const mode = getIonMode$1(this);
|
|
39288
|
-
return (hAsync(Host, { key: '
|
|
39067
|
+
return (hAsync(Host, { key: 'bfaa49d35f43b8036725ae8a322c716fc6e43bdf', class: createColorClasses$1(this.color, {
|
|
39289
39068
|
[mode]: true,
|
|
39290
|
-
}) }, hAsync("slot", { key: '
|
|
39069
|
+
}) }, hAsync("slot", { key: 'c04880cd1935b42cbe60f58fd523b4d8a96072dc' })));
|
|
39291
39070
|
}
|
|
39292
39071
|
static get style() { return textCss(); }
|
|
39293
39072
|
static get cmpMeta() { return {
|
|
@@ -39748,7 +39527,7 @@ class Textarea {
|
|
|
39748
39527
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
39749
39528
|
*/
|
|
39750
39529
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
39751
|
-
return (hAsync(Host, { key: '
|
|
39530
|
+
return (hAsync(Host, { key: '4257e84acd46f43390fa2413d0b8f40e16a37499', class: createColorClasses$1(this.color, {
|
|
39752
39531
|
[mode]: true,
|
|
39753
39532
|
'has-value': hasValue,
|
|
39754
39533
|
'has-focus': hasFocus,
|
|
@@ -39757,7 +39536,7 @@ class Textarea {
|
|
|
39757
39536
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
39758
39537
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
39759
39538
|
'textarea-disabled': disabled,
|
|
39760
|
-
}) }, hAsync("label", { key: '
|
|
39539
|
+
}) }, hAsync("label", { key: '003da35bad92ab36777b7ae40855541bf900c64a', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '3cae2d19f96ba2b18a2d64298fdcc4b64ad34ac7', class: "textarea-wrapper-inner" }, hAsync("div", { key: 'e26cb06763d551f7f83b6ea80349871aab18a016', class: "start-slot-wrapper" }, hAsync("slot", { key: '135ba6db893eaca5f2a785fe61e24f33f56f3765', name: "start" })), hAsync("div", { key: '951eabdd01c5e370790cec8578268361dcc8abdc', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '13d78f1a934b9f8d85cd9ed386dabc786f953f1d', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), hAsync("div", { key: '699038558019470bccb4853fa65e7aeb069e0baa', class: "end-slot-wrapper" }, hAsync("slot", { key: '19d8c212d7c718aeb6924e10bf8e48cad01314ea', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: '910a9437437ce7cab21e37a1cb4a6b309afda58f', class: "textarea-highlight" })), this.renderBottomContent()));
|
|
39761
39540
|
}
|
|
39762
39541
|
get el() { return getElement(this); }
|
|
39763
39542
|
static get watchers() { return {
|
|
@@ -39826,7 +39605,7 @@ class Thumbnail {
|
|
|
39826
39605
|
registerInstance(this, hostRef);
|
|
39827
39606
|
}
|
|
39828
39607
|
render() {
|
|
39829
|
-
return (hAsync(Host, { key: '
|
|
39608
|
+
return (hAsync(Host, { key: 'b250e01664238f1dca8f9757b15bc3d5d9387ffa', class: getIonMode$1(this) }, hAsync("slot", { key: '72cb568bccabc983c5186a7596ef6c6d4ebf5ad9' })));
|
|
39830
39609
|
}
|
|
39831
39610
|
static get style() { return thumbnailCss(); }
|
|
39832
39611
|
static get cmpMeta() { return {
|
|
@@ -40686,9 +40465,9 @@ class Toast {
|
|
|
40686
40465
|
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
|
|
40687
40466
|
printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
|
|
40688
40467
|
}
|
|
40689
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
40468
|
+
return (hAsync(Host, Object.assign({ key: 'b5256edcf33d0ef51e6c5080c84e1ca58abe2ae0', tabindex: "-1" }, this.htmlAttributes, { style: {
|
|
40690
40469
|
zIndex: `${60000 + this.overlayIndex}`,
|
|
40691
|
-
}, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '
|
|
40470
|
+
}, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '0860f7e895d8bc66e44c4d924ca569f4cbb1a749', class: wrapperClass, part: "wrapper" }, hAsync("div", { key: '28784199c880a3f664677c8f5560b7caa8903251', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '0a63ba1336ad43d2aec14e49055eb46c112359c2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'ecec8107af582dc55d4b3828dd7f3054a29f26b1', class: "toast-content", part: "content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
|
|
40692
40471
|
}
|
|
40693
40472
|
get el() { return getElement(this); }
|
|
40694
40473
|
static get watchers() { return {
|
|
@@ -41006,7 +40785,7 @@ class Toggle {
|
|
|
41006
40785
|
const value = this.getValue();
|
|
41007
40786
|
const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
|
|
41008
40787
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
41009
|
-
return (hAsync(Host, { key: '
|
|
40788
|
+
return (hAsync(Host, { key: '736e1dcfca34fd41f6f0632652e7f86d6996a232', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
|
|
41010
40789
|
[mode]: true,
|
|
41011
40790
|
'in-item': hostContext('ion-item', el),
|
|
41012
40791
|
'toggle-activated': activated,
|
|
@@ -41016,10 +40795,10 @@ class Toggle {
|
|
|
41016
40795
|
[`toggle-alignment-${alignment}`]: alignment !== undefined,
|
|
41017
40796
|
[`toggle-label-placement-${labelPlacement}`]: true,
|
|
41018
40797
|
[`toggle-${rtl}`]: true,
|
|
41019
|
-
}) }, hAsync("label", { key: '
|
|
40798
|
+
}) }, hAsync("label", { key: 'e697739fd3964c1c6c23331cf7e38a9841c46a6a', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '3d500b8c1bc879591249d183c1abb3f5f26aff6b', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: 'e38f3fe0e66b4ca434fd81514f5ef771c2960841', class: {
|
|
41020
40799
|
'label-text-wrapper': true,
|
|
41021
40800
|
'label-text-wrapper-hidden': !hasLabel,
|
|
41022
|
-
}, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '
|
|
40801
|
+
}, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '006dd3558264d69ab020c07005b348adc4ecdd5b' }), this.renderHintText()), hAsync("div", { key: 'dd4e52de31caabee41ec1bc58efecd1e213368c9', class: "native-wrapper" }, this.renderToggleControl()))));
|
|
41023
40802
|
}
|
|
41024
40803
|
get el() { return getElement(this); }
|
|
41025
40804
|
static get watchers() { return {
|
|
@@ -41131,10 +40910,10 @@ class Toolbar {
|
|
|
41131
40910
|
this.childrenStyles.forEach((value) => {
|
|
41132
40911
|
Object.assign(childStyles, value);
|
|
41133
40912
|
});
|
|
41134
|
-
return (hAsync(Host, { key: '
|
|
40913
|
+
return (hAsync(Host, { key: 'b849db2863778dee6c5a251bffa1b3a657aeb036', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
|
|
41135
40914
|
[mode]: true,
|
|
41136
40915
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
41137
|
-
})) }, hAsync("div", { key: '
|
|
40916
|
+
})) }, hAsync("div", { key: '67f5bba9c4f527c3f35bfe1313a2b85741f9b246', class: "toolbar-background", part: "background" }), hAsync("div", { key: '085e8c68f056e5b0deb9d1606431fbeb45dae8e5', class: "toolbar-container", part: "container" }, hAsync("slot", { key: '15227c79c3baf883fd8c43fdb7e1313453933c79', name: "start" }), hAsync("slot", { key: '0b8a7f7e685aa31c80d9bc03446ccc3a9d07e0e8', name: "secondary" }), hAsync("div", { key: '57e4628c1fa89df79dd80456259db961bb691404', class: "toolbar-content", part: "content" }, hAsync("slot", { key: '82c2f6e1acf8d96db259bd8baf295881801edbd5' })), hAsync("slot", { key: 'b2d4afb15214199f206c0a5e08b581e4c9c2f58a', name: "primary" }), hAsync("slot", { key: 'bfb909a0c472f8834046c2ea23bef2f562167ad3', name: "end" }))));
|
|
41138
40917
|
}
|
|
41139
40918
|
get el() { return getElement(this); }
|
|
41140
40919
|
static get style() { return {
|
|
@@ -41180,11 +40959,11 @@ class ToolbarTitle {
|
|
|
41180
40959
|
render() {
|
|
41181
40960
|
const mode = getIonMode$1(this);
|
|
41182
40961
|
const size = this.getSize();
|
|
41183
|
-
return (hAsync(Host, { key: '
|
|
40962
|
+
return (hAsync(Host, { key: '44e63f8439df64c470692904427b417e19406476', class: createColorClasses$1(this.color, {
|
|
41184
40963
|
[mode]: true,
|
|
41185
40964
|
[`title-${size}`]: true,
|
|
41186
40965
|
'title-rtl': document.dir === 'rtl',
|
|
41187
|
-
}) }, hAsync("div", { key: '
|
|
40966
|
+
}) }, hAsync("div", { key: '784cf60a0db16045391891cc8fad0c7dbeba4039', class: "toolbar-title" }, hAsync("slot", { key: '0c720a50479ba257e8756337aeb9b0ab7516a227' }))));
|
|
41188
40967
|
}
|
|
41189
40968
|
get el() { return getElement(this); }
|
|
41190
40969
|
static get watchers() { return {
|
|
@@ -41264,8 +41043,10 @@ registerComponents([
|
|
|
41264
41043
|
Nav,
|
|
41265
41044
|
NavLink,
|
|
41266
41045
|
Note,
|
|
41046
|
+
Picker$1,
|
|
41267
41047
|
Picker,
|
|
41268
41048
|
PickerColumn,
|
|
41049
|
+
PickerColumnCmp,
|
|
41269
41050
|
PickerColumnOption,
|
|
41270
41051
|
Popover,
|
|
41271
41052
|
ProgressBar,
|