@ionic/core 8.7.19-nightly.20260304 → 8.8.0
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.d.ts +2 -0
- package/components/index.js +1 -114
- package/components/ion-accordion-group.js +1 -268
- package/components/ion-accordion.js +1 -456
- package/components/ion-action-sheet.js +1 -6
- package/components/ion-alert.js +1 -6
- package/components/ion-app.js +1 -132
- package/components/ion-avatar.js +1 -41
- package/components/ion-back-button.js +1 -130
- package/components/ion-backdrop.js +1 -6
- package/components/ion-badge.js +1 -47
- package/components/ion-breadcrumb.js +1 -137
- package/components/ion-breadcrumbs.js +1 -164
- package/components/ion-button.js +1 -6
- package/components/ion-buttons.js +1 -6
- package/components/ion-card-content.js +1 -45
- package/components/ion-card-header.js +1 -56
- package/components/ion-card-subtitle.js +1 -48
- package/components/ion-card-title.js +1 -48
- package/components/ion-card.js +1 -107
- package/components/ion-checkbox.js +1 -6
- package/components/ion-chip.js +1 -66
- package/components/ion-col.js +1 -163
- package/components/ion-content.js +1 -6
- package/components/ion-datetime-button.js +1 -383
- package/components/ion-datetime.js +1 -2047
- package/components/ion-fab-button.js +1 -151
- package/components/ion-fab-list.js +1 -73
- package/components/ion-fab.js +1 -101
- package/components/ion-footer.js +1 -179
- package/components/ion-grid.js +1 -46
- package/components/ion-header.js +1 -6
- package/components/ion-icon.js +1 -6
- package/components/ion-img.js +1 -133
- package/components/ion-infinite-scroll-content.js +1 -69
- package/components/ion-infinite-scroll.js +1 -236
- package/components/ion-input-otp.js +1 -682
- package/components/ion-input-password-toggle.js +1 -128
- package/components/ion-input.js +1 -646
- package/components/ion-item-divider.js +1 -59
- package/components/ion-item-group.js +1 -46
- package/components/ion-item-option.js +1 -91
- package/components/ion-item-options.js +1 -73
- package/components/ion-item-sliding.js +1 -457
- package/components/ion-item.js +1 -6
- package/components/ion-label.js +1 -6
- package/components/ion-list-header.js +1 -6
- package/components/ion-list.js +1 -6
- package/components/ion-loading.js +1 -343
- package/components/ion-menu-button.js +1 -109
- package/components/ion-menu-toggle.js +1 -64
- package/components/ion-menu.js +1 -741
- package/components/ion-modal.js +1 -6
- package/components/ion-nav-link.js +1 -64
- package/components/ion-nav.js +1 -951
- package/components/ion-note.js +1 -47
- package/components/ion-picker-column-option.js +1 -6
- package/components/ion-picker-column.js +1 -6
- package/components/ion-picker-legacy-column.js +1 -6
- package/components/ion-picker-legacy.js +1 -342
- package/components/ion-picker.js +1 -6
- package/components/ion-popover.js +1 -6
- package/components/ion-progress-bar.js +1 -100
- package/components/ion-radio-group.js +1 -6
- package/components/ion-radio.js +1 -6
- package/components/ion-range.js +1 -844
- package/components/ion-refresher-content.js +1 -88
- package/components/ion-refresher.js +1 -750
- package/components/ion-reorder-group.js +1 -322
- package/components/ion-reorder.js +1 -60
- package/components/ion-ripple-effect.js +1 -6
- package/components/ion-route-redirect.js +1 -45
- package/components/ion-route.js +1 -74
- package/components/ion-router-link.js +1 -61
- package/components/ion-router-outlet.js +1 -226
- package/components/ion-router.js +1 -840
- package/components/ion-row.js +1 -36
- package/components/ion-searchbar.js +1 -540
- package/components/ion-segment-button.js +1 -173
- package/components/ion-segment-content.js +1 -35
- package/components/ion-segment-view.js +1 -142
- package/components/ion-segment.js +1 -602
- package/components/ion-select-modal.js +1 -6
- package/components/ion-select-option.js +1 -46
- package/components/ion-select-popover.js +1 -6
- package/components/ion-select.js +1 -1035
- package/components/ion-skeleton-text.js +1 -64
- package/components/ion-spinner.js +1 -6
- package/components/ion-split-pane.js +1 -190
- package/components/ion-tab-bar.js +1 -135
- package/components/ion-tab-button.js +1 -127
- package/components/ion-tab.js +1 -82
- package/components/ion-tabs.js +1 -204
- package/components/ion-text.js +1 -42
- package/components/ion-textarea.js +1 -554
- package/components/ion-thumbnail.js +1 -36
- package/components/ion-title.js +1 -6
- package/components/ion-toast.js +1 -938
- package/components/ion-toggle.js +1 -360
- package/components/ion-toolbar.js +1 -6
- package/components/p-1KVKSLu5.js +4 -0
- package/{dist/ionic/p-DUt5fQmA.js → components/p-9VcRUwdB.js} +1 -1
- package/components/p-ApmKVjaE.js +4 -0
- package/components/p-B-hirT0v.js +1 -35
- package/components/p-B6FQ0cKR.js +4 -0
- package/components/p-B6HaBl3o.js +4 -0
- package/components/p-B8b1Ukl9.js +4 -0
- package/components/p-BFxT89Wl.js +4 -0
- package/components/p-BJoMtgfR.js +4 -0
- package/components/p-BNAG-aVv.js +4 -0
- package/{dist/ionic/p-D-eFFUkA.js → components/p-BR3tZJmu.js} +1 -1
- package/{dist/ionic/p-D0dMcSkw.js → components/p-BS1TtEiJ.js} +1 -1
- package/components/p-BSB38Tek.js +4 -0
- package/components/p-BTEOs1at.js +1 -192
- package/components/p-BTeL5HCK.js +4 -0
- package/{dist/ionic/p-DbQ5QkTP.js → components/p-BUbsoBOV.js} +1 -1
- package/components/p-BVnB3eEn.js +4 -0
- package/components/p-BYDc3hSE.js +4 -0
- package/components/p-BagjAGC0.js +4 -0
- package/components/p-BegtE7nr.js +4 -0
- package/components/p-BgwEQWW6.js +4 -0
- package/components/p-Bk2zuNWT.js +4 -0
- package/components/p-BmVRXR1y.js +1 -72
- package/components/p-Bum_LjMh.js +4 -0
- package/components/p-BxwWvu-b.js +4 -0
- package/components/p-C4jPsTQa.js +4 -0
- package/components/p-C53feagD.js +1 -15
- package/{dist/ionic/p-CwgG81ZD.js → components/p-C59ryAuS.js} +1 -1
- package/components/p-C7AoMl7c.js +4 -0
- package/components/p-CBzELu-H.js +4 -0
- package/components/p-CDfQnFrd.js +4 -0
- package/components/p-CH0NYjKq.js +4 -0
- package/components/p-CIGNaXM1.js +1 -10
- package/components/p-CO7fmmxt.js +1 -29
- package/components/p-CU1SSH8_.js +4 -0
- package/components/p-CVF7ukTk.js +4 -0
- package/components/p-CgfaEEem.js +4 -0
- package/components/p-CgqKJg96.js +4 -0
- package/components/p-Cl0B-RWe.js +1 -452
- package/components/p-CneGxKsZ.js +4 -0
- package/components/p-CoA-aqGF.js +4 -0
- package/{dist/ionic/p-DdR6rpbR.js → components/p-Cq8cQ0NL.js} +1 -1
- package/components/p-Csw8xuz4.js +4 -0
- package/components/p-CtWGkNnJ.js +1 -162
- package/components/p-Cwv-vmkN.js +4 -0
- package/{dist/ionic/p-BYEqWnSg.js → components/p-Cy5XSfIk.js} +1 -1
- package/components/p-Cyxa_4PV.js +4 -0
- package/components/p-Cz5nLPGT.js +4 -0
- package/components/p-D13Eaw-8.js +1 -76
- package/components/p-D6NJwNJN.js +4 -0
- package/components/p-D6Ynv7Xh.js +1 -141
- package/components/p-DHsZWn1l.js +4 -0
- package/components/p-DJMZehmW.js +4 -0
- package/components/p-DJztqcrH.js +1 -14
- package/components/p-DYdpXONG.js +4 -0
- package/components/p-DgbT0exM.js +4 -0
- package/components/p-DiVJyqlX.js +1 -40
- package/components/p-Dtdm8lKC.js +1 -44
- package/components/p-YLXPWgVj.js +4 -0
- package/components/p-ZjP4CjeZ.js +1 -4
- package/{dist/ionic/p-DCv9sLH2.js → components/p-ak_d-z48.js} +1 -1
- package/components/p-cyNmxje6.js +1 -155
- package/components/p-fpbh6w3f.js +4 -0
- package/components/p-hHmYLOfE.js +1 -87
- package/components/p-kvaDs24J.js +4 -0
- package/components/p-vEbVo2hO.js +4 -0
- package/dist/cjs/{animation-Bt3H9L1C.js → animation-Dg4yiuR2.js} +1 -1
- package/dist/cjs/app-globals-CLI8xCmk.js +11 -0
- package/dist/cjs/{button-active-CMc8cD90.js → button-active-FscMI17-.js} +1 -1
- package/dist/cjs/{config-C5fsO43a.js → config-BukYi_pW.js} +1 -1
- package/dist/cjs/{data-JwZKaIQB.js → data-BYlBjkMU.js} +1 -1
- package/dist/cjs/{framework-delegate-DMJRBuDi.js → framework-delegate-CRgp8o_p.js} +1 -1
- package/dist/cjs/{hardware-back-button-VCK4V3mG.js → hardware-back-button-C4rMJ5uI.js} +1 -1
- package/dist/cjs/{helpers-DrTqNghc.js → helpers-CxTYJdbT.js} +1 -1
- package/dist/cjs/{index-094mMFB-.js → index-C845Ti6K.js} +4 -4
- package/dist/cjs/{index-DrMUZJj6.js → index-CFUwM5x_.js} +5 -5
- package/dist/cjs/{index-D6Wc6v08.js → index-CqT-2gKy.js} +503 -382
- package/dist/cjs/{index-CO6eryBo.js → index-MbaBbWXk.js} +2 -2
- package/dist/cjs/{index-C534ULug.js → index-YcSftOMz.js} +2 -2
- package/dist/cjs/index.cjs.js +12 -12
- package/dist/cjs/{input-shims-CuMghsQ-.js → input-shims-Dl5cnc_e.js} +3 -3
- package/dist/cjs/{input.utils-B_QROI2g.js → input.utils-DmeJ8dmo.js} +2 -2
- package/dist/cjs/ion-accordion_2.cjs.entry.js +23 -15
- package/dist/cjs/ion-action-sheet.cjs.entry.js +21 -15
- package/dist/cjs/ion-alert.cjs.entry.js +25 -17
- package/dist/cjs/ion-app_8.cjs.entry.js +48 -43
- package/dist/cjs/ion-avatar_3.cjs.entry.js +12 -12
- package/dist/cjs/ion-back-button.cjs.entry.js +7 -7
- package/dist/cjs/ion-backdrop.cjs.entry.js +6 -6
- package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +20 -14
- package/dist/cjs/ion-button_2.cjs.entry.js +36 -18
- package/dist/cjs/ion-card_5.cjs.entry.js +23 -23
- package/dist/cjs/ion-checkbox.cjs.entry.js +7 -7
- package/dist/cjs/ion-chip.cjs.entry.js +6 -6
- package/dist/cjs/ion-col_3.cjs.entry.js +8 -8
- package/dist/cjs/ion-datetime-button.cjs.entry.js +8 -8
- package/dist/cjs/ion-datetime_3.cjs.entry.js +75 -46
- package/dist/cjs/ion-fab_3.cjs.entry.js +17 -13
- package/dist/cjs/ion-img.cjs.entry.js +8 -6
- package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js +17 -13
- package/dist/cjs/ion-input-otp.cjs.entry.js +16 -10
- package/dist/cjs/ion-input-password-toggle.cjs.entry.js +9 -7
- package/dist/cjs/ion-input.cjs.entry.js +21 -13
- package/dist/cjs/ion-item-option_3.cjs.entry.js +19 -17
- package/dist/cjs/ion-item_8.cjs.entry.js +48 -42
- package/dist/cjs/ion-loading.cjs.entry.js +18 -14
- package/dist/cjs/ion-menu_3.cjs.entry.js +30 -22
- package/dist/cjs/ion-modal.cjs.entry.js +237 -59
- package/dist/cjs/ion-nav_2.cjs.entry.js +14 -10
- package/dist/cjs/ion-picker-column-option.cjs.entry.js +10 -8
- package/dist/cjs/ion-picker-column.cjs.entry.js +11 -7
- package/dist/cjs/ion-picker.cjs.entry.js +6 -6
- package/dist/cjs/ion-popover.cjs.entry.js +21 -15
- package/dist/cjs/ion-progress-bar.cjs.entry.js +7 -7
- package/dist/cjs/ion-radio_2.cjs.entry.js +17 -13
- package/dist/cjs/ion-range.cjs.entry.js +205 -57
- package/dist/cjs/ion-refresher_2.cjs.entry.js +45 -14
- package/dist/cjs/ion-reorder_2.cjs.entry.js +13 -11
- package/dist/cjs/ion-ripple-effect.cjs.entry.js +4 -4
- package/dist/cjs/ion-route_4.cjs.entry.js +20 -10
- package/dist/cjs/ion-searchbar.cjs.entry.js +22 -12
- package/dist/cjs/ion-segment-content.cjs.entry.js +3 -3
- package/dist/cjs/ion-segment-view.cjs.entry.js +13 -8
- package/dist/cjs/ion-segment_2.cjs.entry.js +26 -16
- package/dist/cjs/ion-select-modal.cjs.entry.js +17 -13
- package/dist/cjs/ion-select_3.cjs.entry.js +33 -24
- package/dist/cjs/ion-spinner.cjs.entry.js +4 -4
- package/dist/cjs/ion-split-pane.cjs.entry.js +15 -9
- package/dist/cjs/ion-tab-bar_2.cjs.entry.js +14 -12
- package/dist/cjs/ion-tab_2.cjs.entry.js +10 -8
- package/dist/cjs/ion-text.cjs.entry.js +4 -4
- package/dist/cjs/ion-textarea.cjs.entry.js +20 -14
- package/dist/cjs/ion-toast.cjs.entry.js +21 -15
- package/dist/cjs/ion-toggle.cjs.entry.js +10 -8
- package/dist/cjs/{ionic-global-HMVqOFGO.js → ionic-global-Bc3kJi1Z.js} +1 -1
- package/dist/cjs/ionic.cjs.js +5 -5
- package/dist/cjs/{ios.transition-BOt_uW73.js → ios.transition-trBiC95R.js} +4 -4
- package/dist/cjs/loader.cjs.js +4 -4
- package/dist/cjs/{md.transition-Dt968VXB.js → md.transition-CUQECuvD.js} +4 -4
- package/dist/cjs/{notch-controller-Bzqhjm4f.js → notch-controller-sD-lTpdc.js} +1 -1
- package/dist/cjs/{overlays-B2b-TTbl.js → overlays-C2jiBSNQ.js} +5 -5
- package/dist/cjs/{status-tap-g0sWWkXk.js → status-tap-CCJk5VgT.js} +3 -3
- package/dist/cjs/{swipe-back-BIayeNOD.js → swipe-back-BGhTQ1CU.js} +2 -2
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/accordion-group/accordion-group.js +4 -2
- package/dist/collection/components/action-sheet/action-sheet.js +20 -10
- package/dist/collection/components/alert/alert.js +24 -12
- package/dist/collection/components/back-button/back-button.js +4 -2
- package/dist/collection/components/badge/badge.js +2 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +8 -4
- package/dist/collection/components/breadcrumbs/breadcrumbs.js +4 -2
- package/dist/collection/components/button/button.js +6 -3
- package/dist/collection/components/card/card.js +6 -3
- package/dist/collection/components/card-header/card-header.js +2 -1
- package/dist/collection/components/card-subtitle/card-subtitle.js +2 -1
- package/dist/collection/components/card-title/card-title.js +2 -1
- package/dist/collection/components/checkbox/checkbox.js +4 -2
- package/dist/collection/components/chip/chip.js +2 -1
- package/dist/collection/components/content/content.js +12 -7
- package/dist/collection/components/datetime/datetime.js +43 -22
- package/dist/collection/components/datetime-button/datetime-button.js +2 -1
- package/dist/collection/components/fab-button/fab-button.js +6 -3
- package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js +4 -2
- package/dist/collection/components/input/input.js +11 -6
- package/dist/collection/components/input-otp/input-otp.js +8 -4
- package/dist/collection/components/input-password-toggle/input-password-toggle.js +4 -2
- package/dist/collection/components/item/item.js +10 -5
- package/dist/collection/components/item-divider/item-divider.js +7 -3
- package/dist/collection/components/item-option/item-option.js +6 -3
- package/dist/collection/components/item-options/item-options.js +2 -1
- package/dist/collection/components/item-sliding/item-sliding.js +2 -1
- package/dist/collection/components/label/label.js +6 -3
- package/dist/collection/components/list-header/list-header.js +6 -3
- package/dist/collection/components/loading/loading.js +22 -11
- package/dist/collection/components/menu/menu.js +10 -5
- package/dist/collection/components/menu-button/menu-button.js +2 -1
- package/dist/collection/components/modal/gestures/sheet.js +120 -12
- package/dist/collection/components/modal/gestures/swipe-to-close.js +54 -1
- package/dist/collection/components/modal/modal.js +127 -45
- package/dist/collection/components/nav/nav.js +89 -45
- package/dist/collection/components/nav-link/nav-link.js +9 -5
- package/dist/collection/components/note/note.js +2 -1
- package/dist/collection/components/picker/picker.js +2 -1
- package/dist/collection/components/picker-column/picker-column.js +6 -3
- package/dist/collection/components/picker-column-option/picker-column-option.js +2 -1
- package/dist/collection/components/picker-legacy/picker.js +24 -12
- package/dist/collection/components/picker-legacy-column/picker-column.js +4 -2
- package/dist/collection/components/popover/popover.js +33 -17
- package/dist/collection/components/progress-bar/progress-bar.js +2 -1
- package/dist/collection/components/radio/radio.js +2 -1
- package/dist/collection/components/radio-group/radio-group.js +6 -3
- package/dist/collection/components/range/range.js +214 -53
- package/dist/collection/components/refresher/refresher.js +73 -5
- package/dist/collection/components/refresher-content/refresher-content.js +8 -4
- package/dist/collection/components/reorder-group/reorder-group.js +6 -3
- package/dist/collection/components/route/route.js +4 -2
- package/dist/collection/components/router/router.js +10 -5
- package/dist/collection/components/router-link/router-link.js +6 -3
- package/dist/collection/components/router-outlet/router-outlet.js +18 -9
- package/dist/collection/components/searchbar/searchbar.js +11 -6
- package/dist/collection/components/segment/segment.js +10 -5
- package/dist/collection/components/segment-button/segment-button.js +4 -2
- package/dist/collection/components/segment-view/segment-view.ios.css +2 -1
- package/dist/collection/components/segment-view/segment-view.js +30 -4
- package/dist/collection/components/segment-view/segment-view.md.css +2 -1
- package/dist/collection/components/select/select.js +17 -8
- package/dist/collection/components/select-modal/select-modal.js +27 -2
- package/dist/collection/components/select-popover/select-popover.js +2 -1
- package/dist/collection/components/skeleton-text/skeleton-text.js +2 -1
- package/dist/collection/components/spinner/spinner.js +4 -2
- package/dist/collection/components/tab/tab.js +4 -2
- package/dist/collection/components/tab-bar/tab-bar.js +4 -2
- package/dist/collection/components/tab-button/tab-button.js +4 -2
- package/dist/collection/components/tabs/tabs.js +4 -2
- package/dist/collection/components/text/text.js +2 -1
- package/dist/collection/components/textarea/textarea.js +10 -7
- package/dist/collection/components/title/title.js +4 -2
- package/dist/collection/components/toast/toast.js +34 -17
- package/dist/collection/components/toggle/toggle.js +4 -2
- package/dist/collection/components/toolbar/toolbar.js +2 -1
- package/dist/docs.d.ts +37 -0
- package/dist/docs.json +1186 -389
- package/dist/esm/{animation-Dt8bGnA-.js → animation-CnGMT4ji.js} +1 -1
- package/dist/esm/app-globals-DhZjtldk.js +9 -0
- package/dist/esm/{button-active-L570Swow.js → button-active-BBx21brx.js} +1 -1
- package/dist/esm/{config-mCdtaoPe.js → config-TO1rZH52.js} +1 -1
- package/dist/esm/{data-DCORV9FH.js → data-B9iGR5YO.js} +1 -1
- package/dist/esm/{framework-delegate-BYawdMXj.js → framework-delegate-CyxE1S_P.js} +1 -1
- package/dist/esm/{hardware-back-button-CPLxO-Ev.js → hardware-back-button-CTe4XmL7.js} +1 -1
- package/dist/esm/{helpers-DEn3pfjm.js → helpers-Tl8jw6S2.js} +1 -1
- package/dist/esm/{index-r2D9DEro.js → index-B-hkiOUh.js} +4 -4
- package/dist/esm/{index-CvDIirVx.js → index-B2KwgBLx.js} +5 -5
- package/dist/esm/{index-ceb5RaMT.js → index-BtUdxPjv.js} +2 -2
- package/dist/esm/{index-C8IsBmNU.js → index-IGIE5vDm.js} +503 -382
- package/dist/esm/{index-Bs3kT4bc.js → index-hW6eNZ3o.js} +2 -2
- package/dist/esm/index.js +12 -12
- package/dist/esm/{input-shims-D6H3ZaWt.js → input-shims-AaDhOpKN.js} +3 -3
- package/dist/esm/{input.utils-DrvTa8gz.js → input.utils-Bxa_DQ7-.js} +2 -2
- package/dist/esm/ion-accordion_2.entry.js +23 -15
- package/dist/esm/ion-action-sheet.entry.js +21 -15
- package/dist/esm/ion-alert.entry.js +25 -17
- package/dist/esm/ion-app_8.entry.js +48 -43
- package/dist/esm/ion-avatar_3.entry.js +12 -12
- package/dist/esm/ion-back-button.entry.js +7 -7
- package/dist/esm/ion-backdrop.entry.js +6 -6
- package/dist/esm/ion-breadcrumb_2.entry.js +20 -14
- package/dist/esm/ion-button_2.entry.js +36 -18
- package/dist/esm/ion-card_5.entry.js +23 -23
- package/dist/esm/ion-checkbox.entry.js +7 -7
- package/dist/esm/ion-chip.entry.js +6 -6
- package/dist/esm/ion-col_3.entry.js +8 -8
- package/dist/esm/ion-datetime-button.entry.js +8 -8
- package/dist/esm/ion-datetime_3.entry.js +75 -46
- package/dist/esm/ion-fab_3.entry.js +17 -13
- package/dist/esm/ion-img.entry.js +8 -6
- package/dist/esm/ion-infinite-scroll_2.entry.js +17 -13
- package/dist/esm/ion-input-otp.entry.js +16 -10
- package/dist/esm/ion-input-password-toggle.entry.js +9 -7
- package/dist/esm/ion-input.entry.js +21 -13
- package/dist/esm/ion-item-option_3.entry.js +19 -17
- package/dist/esm/ion-item_8.entry.js +48 -42
- package/dist/esm/ion-loading.entry.js +18 -14
- package/dist/esm/ion-menu_3.entry.js +30 -22
- package/dist/esm/ion-modal.entry.js +237 -59
- package/dist/esm/ion-nav_2.entry.js +14 -10
- package/dist/esm/ion-picker-column-option.entry.js +10 -8
- package/dist/esm/ion-picker-column.entry.js +11 -7
- package/dist/esm/ion-picker.entry.js +6 -6
- package/dist/esm/ion-popover.entry.js +21 -15
- package/dist/esm/ion-progress-bar.entry.js +7 -7
- package/dist/esm/ion-radio_2.entry.js +17 -13
- package/dist/esm/ion-range.entry.js +205 -57
- package/dist/esm/ion-refresher_2.entry.js +45 -14
- package/dist/esm/ion-reorder_2.entry.js +13 -11
- package/dist/esm/ion-ripple-effect.entry.js +4 -4
- package/dist/esm/ion-route_4.entry.js +20 -10
- package/dist/esm/ion-searchbar.entry.js +22 -12
- package/dist/esm/ion-segment-content.entry.js +3 -3
- package/dist/esm/ion-segment-view.entry.js +13 -8
- package/dist/esm/ion-segment_2.entry.js +26 -16
- package/dist/esm/ion-select-modal.entry.js +17 -13
- package/dist/esm/ion-select_3.entry.js +33 -24
- package/dist/esm/ion-spinner.entry.js +4 -4
- package/dist/esm/ion-split-pane.entry.js +15 -9
- package/dist/esm/ion-tab-bar_2.entry.js +14 -12
- package/dist/esm/ion-tab_2.entry.js +10 -8
- package/dist/esm/ion-text.entry.js +4 -4
- package/dist/esm/ion-textarea.entry.js +20 -14
- package/dist/esm/ion-toast.entry.js +21 -15
- package/dist/esm/ion-toggle.entry.js +10 -8
- package/dist/esm/{ionic-global-CDrldh-5.js → ionic-global-DfbeLwcV.js} +1 -1
- package/dist/esm/ionic.js +6 -6
- package/dist/esm/{ios.transition-BDzw0_Hm.js → ios.transition--aMF-pDH.js} +4 -4
- package/dist/esm/loader.js +5 -5
- package/dist/esm/{md.transition-BzDYi3qq.js → md.transition-BEVbfm8j.js} +4 -4
- package/dist/esm/{notch-controller-BwelN_JM.js → notch-controller-DAcvKU57.js} +1 -1
- package/dist/esm/{overlays-D5YkFThA.js → overlays-F8GHPo-e.js} +5 -5
- package/dist/esm/{status-tap-5DQ7Fc4V.js → status-tap-BfJqFSLF.js} +3 -3
- package/dist/esm/{swipe-back-BKw2CAHc.js → swipe-back-BZBFwTQV.js} +2 -2
- package/dist/html.html-data.json +117 -109
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-031b76f7.entry.js +4 -0
- package/dist/ionic/p-045a6a42.entry.js +4 -0
- package/dist/ionic/p-07506134.entry.js +4 -0
- package/dist/ionic/p-084c25b2.entry.js +4 -0
- package/dist/ionic/p-0d8b5c38.entry.js +4 -0
- package/dist/ionic/p-16813ce7.entry.js +4 -0
- package/dist/ionic/p-16b65553.entry.js +4 -0
- package/dist/ionic/p-1b02923f.entry.js +4 -0
- package/dist/ionic/{p-5c8f7253.entry.js → p-1b169fb6.entry.js} +1 -1
- package/dist/ionic/{p-915b3e3d.entry.js → p-23fac490.entry.js} +1 -1
- package/dist/ionic/{p-b8551510.entry.js → p-294f4bb5.entry.js} +1 -1
- package/dist/ionic/p-2a68388b.entry.js +4 -0
- package/dist/ionic/p-2f5a8140.entry.js +4 -0
- package/dist/ionic/{p-49d06882.entry.js → p-301c43f8.entry.js} +1 -1
- package/dist/ionic/{p-79bd78f9.entry.js → p-370a60ee.entry.js} +1 -1
- package/dist/ionic/p-3e143d1d.entry.js +4 -0
- package/dist/ionic/p-4819b469.entry.js +4 -0
- package/dist/ionic/p-4dd5e8e0.entry.js +4 -0
- package/dist/ionic/p-51c11c47.entry.js +4 -0
- package/dist/ionic/p-53f750a5.entry.js +4 -0
- package/dist/ionic/{p-7cad388a.entry.js → p-6af16209.entry.js} +1 -1
- package/dist/ionic/{p-7f98e710.entry.js → p-6b701daa.entry.js} +1 -1
- package/dist/ionic/p-6b97f2a3.entry.js +4 -0
- package/dist/ionic/p-71e322f7.entry.js +4 -0
- package/dist/ionic/p-7620be24.entry.js +4 -0
- package/dist/ionic/p-771b27a5.entry.js +4 -0
- package/dist/ionic/{p-906bb44d.entry.js → p-7ca71c83.entry.js} +1 -1
- package/dist/ionic/{p-11aa58d6.entry.js → p-80cac7a2.entry.js} +1 -1
- package/dist/ionic/p-96a2e768.entry.js +4 -0
- package/dist/ionic/{p-582824c5.entry.js → p-9833cf63.entry.js} +1 -1
- package/dist/ionic/p-9cbc6f1f.entry.js +4 -0
- package/dist/ionic/p-9cdbabbb.entry.js +4 -0
- package/dist/ionic/p-9eac4eb1.entry.js +4 -0
- package/dist/ionic/{p-675b1a31.entry.js → p-9fae83d8.entry.js} +1 -1
- package/dist/ionic/p-B8xlpH8p.js +4 -0
- package/dist/ionic/{p-C7hRNDhM.js → p-BAt5H1ac.js} +1 -1
- package/dist/ionic/p-BW_TRJm8.js +4 -0
- package/dist/ionic/{p-DDb5r57F.js → p-Bum7H1fw.js} +1 -1
- package/dist/ionic/p-BvFYtOdE.js +4 -0
- package/dist/ionic/{p-Dc45iWE4.js → p-BxIcPWoV.js} +1 -1
- package/dist/ionic/p-C0JvVFMv.js +4 -0
- package/dist/ionic/{p-CTfR9YZG.js → p-CGmVTdWh.js} +1 -1
- package/dist/ionic/{p-BOVrCkpJ.js → p-CYbRmDdy.js} +1 -1
- package/dist/ionic/{p-MUoJJJwd.js → p-CYvM5g3q.js} +1 -1
- package/dist/ionic/p-CmFz1Mjc.js +4 -0
- package/dist/ionic/p-CtA-yJYy.js +4 -0
- package/dist/ionic/p-D8HJQ1qq.js +4 -0
- package/dist/ionic/{p-B0q1YL7N.js → p-DB_iPQC-.js} +1 -1
- package/dist/ionic/{p-DNcfiJwE.js → p-DLbbmF9h.js} +1 -1
- package/dist/ionic/p-DTPR1Wpn.js +4 -0
- package/dist/ionic/p-DjriolRs.js +4 -0
- package/dist/ionic/p-DtVZDHlS.js +4 -0
- package/dist/ionic/p-IGIE5vDm.js +5 -0
- package/dist/ionic/{p-BFvmZNyx.js → p-NFFyoJ4Q.js} +1 -1
- package/dist/ionic/p-a805674e.entry.js +4 -0
- package/dist/ionic/{p-da7d04cc.entry.js → p-a84f2d21.entry.js} +1 -1
- package/dist/ionic/p-aa47f46e.entry.js +4 -0
- package/dist/ionic/{p-2668188b.entry.js → p-b325a113.entry.js} +1 -1
- package/dist/ionic/{p-d1f54e28.entry.js → p-b440381f.entry.js} +1 -1
- package/dist/ionic/p-b6e0ff03.entry.js +4 -0
- package/dist/ionic/{p-6f37536a.entry.js → p-bcaa827e.entry.js} +1 -1
- package/dist/ionic/{p-fb0271ae.entry.js → p-c3cce9d8.entry.js} +1 -1
- package/dist/ionic/{p-b0a7585c.entry.js → p-ca31010f.entry.js} +1 -1
- package/dist/ionic/p-d4e8b473.entry.js +4 -0
- package/dist/ionic/{p-9575b654.entry.js → p-e663bc5a.entry.js} +1 -1
- package/dist/ionic/p-e6c5f060.entry.js +4 -0
- package/dist/ionic/{p-652318c3.entry.js → p-e6cedcd7.entry.js} +1 -1
- package/dist/ionic/{p-fbb00634.entry.js → p-e863ffe8.entry.js} +1 -1
- package/dist/ionic/{p-0ca0fe9c.entry.js → p-f2deaceb.entry.js} +1 -1
- package/dist/ionic/{p-ac4eb91d.entry.js → p-f5dfb9a3.entry.js} +1 -1
- package/dist/ionic/{p-bce86e56.entry.js → p-f8186550.entry.js} +1 -1
- package/dist/ionic/p-fdbc90d4.entry.js +4 -0
- package/dist/ionic/p-gbVXD275.js +4 -0
- package/dist/ionic/p-hNN3VvaC.js +4 -0
- package/dist/types/components/datetime/datetime.d.ts +10 -0
- package/dist/types/components/header/header.utils.d.ts +2 -1
- package/dist/types/components/item/item.d.ts +2 -0
- package/dist/types/components/item-divider/item-divider.d.ts +3 -0
- package/dist/types/components/item-option/item-option.d.ts +2 -0
- package/dist/types/components/list-header/list-header.d.ts +2 -0
- package/dist/types/components/modal/gestures/sheet.d.ts +2 -2
- package/dist/types/components/modal/gestures/swipe-to-close.d.ts +2 -2
- package/dist/types/components/modal/modal-interface.d.ts +25 -0
- package/dist/types/components/modal/modal.d.ts +22 -1
- package/dist/types/components/range/range-interface.d.ts +1 -0
- package/dist/types/components/range/range.d.ts +44 -4
- package/dist/types/components/refresher/refresher-interface.d.ts +7 -0
- package/dist/types/components/refresher/refresher.d.ts +16 -3
- package/dist/types/components/segment-view/segment-view.d.ts +4 -0
- package/dist/types/components/select/select.d.ts +3 -0
- package/dist/types/components/select-modal/select-modal.d.ts +4 -0
- package/dist/types/components.d.ts +964 -191
- package/dist/types/interface.d.ts +2 -2
- package/dist/types/stencil-public-runtime.d.ts +126 -14
- package/dist/types/utils/gesture/listener.d.ts +2 -1
- package/hydrate/index.d.ts +12 -0
- package/hydrate/index.js +5632 -1421
- package/hydrate/index.mjs +5631 -1422
- package/package.json +2 -2
- package/components/p-B25GjpND.js +0 -71
- package/components/p-BANeLH_G.js +0 -290
- package/components/p-BBFQmhcD.js +0 -59
- package/components/p-BC-awmYt.js +0 -306
- package/components/p-BHbOsu99.js +0 -501
- package/components/p-BTlwXR9e.js +0 -73
- package/components/p-BcazQttQ.js +0 -612
- package/components/p-BdGshsIJ.js +0 -226
- package/components/p-BfS7vSpC.js +0 -147
- package/components/p-BhRFCLuX.js +0 -675
- package/components/p-Bhnhnzjz.js +0 -75
- package/components/p-BmcqD0EN.js +0 -153
- package/components/p-Boi6hecl.js +0 -115
- package/components/p-Bt_moUyl.js +0 -232
- package/components/p-Bxl5etF4.js +0 -146
- package/components/p-ByjmWt3s.js +0 -139
- package/components/p-C04oPyjT.js +0 -54
- package/components/p-C6dkQWq2.js +0 -1626
- package/components/p-CFZWrvIQ.js +0 -194
- package/components/p-CIJwkzL6.js +0 -195
- package/components/p-CL12ApCQ.js +0 -820
- package/components/p-CXJR56Oq.js +0 -564
- package/components/p-Cdm3dKWf.js +0 -108
- package/components/p-CslsoGzv.js +0 -192
- package/components/p-Cyd00tgZ.js +0 -167
- package/components/p-CzAJ3ArC.js +0 -380
- package/components/p-CzW34QBh.js +0 -12
- package/components/p-D0zXRwcr.js +0 -196
- package/components/p-D5hF6rwn.js +0 -339
- package/components/p-D8eD2iBA.js +0 -67
- package/components/p-DGOrLIyS.js +0 -481
- package/components/p-DK2Bn1Mc.js +0 -305
- package/components/p-DKRQWlK2.js +0 -598
- package/components/p-DNDUsygf.js +0 -128
- package/components/p-DTWZF6wg.js +0 -418
- package/components/p-DWoUQeZ3.js +0 -3012
- package/components/p-DX0w75a9.js +0 -420
- package/components/p-Dt8zaCLQ.js +0 -92
- package/components/p-DyFBFrV7.js +0 -264
- package/components/p-DyHPCMyn.js +0 -39
- package/components/p-LgLeKTkH.js +0 -112
- package/components/p-NhiRFRn9.js +0 -50
- package/components/p-OuiHmXO5.js +0 -646
- package/components/p-Wro9IPHE.js +0 -459
- package/components/p-aIWC4ZEV.js +0 -305
- package/components/p-c-XJ9XhZ.js +0 -915
- package/components/p-fVuFT3Wd.js +0 -78
- package/components/p-iyo0Toaz.js +0 -2822
- package/components/p-l_lso3Zl.js +0 -140
- package/components/p-mQp4lwQD.js +0 -1638
- package/dist/cjs/app-globals-Ciccnk9_.js +0 -10
- package/dist/esm/app-globals-BDSf8fOA.js +0 -8
- package/dist/ionic/p-11518b31.entry.js +0 -4
- package/dist/ionic/p-221a3d8c.entry.js +0 -4
- package/dist/ionic/p-2ac254dc.entry.js +0 -4
- package/dist/ionic/p-2bd1ea35.entry.js +0 -4
- package/dist/ionic/p-30333874.entry.js +0 -4
- package/dist/ionic/p-31db96da.entry.js +0 -4
- package/dist/ionic/p-34642fa1.entry.js +0 -4
- package/dist/ionic/p-35696017.entry.js +0 -4
- package/dist/ionic/p-363d1209.entry.js +0 -4
- package/dist/ionic/p-46a38cfd.entry.js +0 -4
- package/dist/ionic/p-4eec1a5e.entry.js +0 -4
- package/dist/ionic/p-530fcd71.entry.js +0 -4
- package/dist/ionic/p-5d6fb6e3.entry.js +0 -4
- package/dist/ionic/p-66fbe052.entry.js +0 -4
- package/dist/ionic/p-7babec72.entry.js +0 -4
- package/dist/ionic/p-82d5bb3d.entry.js +0 -4
- package/dist/ionic/p-97eb0812.entry.js +0 -4
- package/dist/ionic/p-9b6d46f2.entry.js +0 -4
- package/dist/ionic/p-BKc55Xev.js +0 -4
- package/dist/ionic/p-Bmgaetn_.js +0 -4
- package/dist/ionic/p-C8IsBmNU.js +0 -5
- package/dist/ionic/p-CJxh_yLS.js +0 -4
- package/dist/ionic/p-DZRJwG4S.js +0 -4
- package/dist/ionic/p-a4a9f5ae.entry.js +0 -4
- package/dist/ionic/p-b0ebf9f8.entry.js +0 -4
- package/dist/ionic/p-be263062.entry.js +0 -4
- package/dist/ionic/p-c175d792.entry.js +0 -4
- package/dist/ionic/p-cc2a9936.entry.js +0 -4
- package/dist/ionic/p-cc45bcbc.entry.js +0 -4
- package/dist/ionic/p-d0a2a1ab.entry.js +0 -4
- package/dist/ionic/p-e4c57008.entry.js +0 -4
- package/dist/ionic/p-e5d6d0f0.entry.js +0 -4
- package/dist/ionic/p-f1dfee25.entry.js +0 -4
- package/dist/ionic/p-f9f7b9db.entry.js +0 -4
package/components/ion-select.js
CHANGED
|
@@ -1,1038 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
|
-
import { p as proxyCustomElement, H, e as createEvent, f as printIonWarning, h, d as Host, i as forceUpdate } from './p-DWoUQeZ3.js';
|
|
5
|
-
import { c as createNotchController } from './p-BmcqD0EN.js';
|
|
6
|
-
import { i as isOptionSelected, d as defineCustomElement$8, c as compareOptions } from './p-Bt_moUyl.js';
|
|
7
|
-
import { c as checkInvalidState } from './p-DJztqcrH.js';
|
|
8
|
-
import { d as inheritAttributes, e as renderHiddenInput, h as focusVisibleElement } from './p-D5hF6rwn.js';
|
|
9
|
-
import { c as popoverController, b as actionSheetController, a as alertController, m as modalController } from './p-c-XJ9XhZ.js';
|
|
10
|
-
import { i as isRTL } from './p-C53feagD.js';
|
|
11
|
-
import { h as hostContext, c as createColorClasses } from './p-DiVJyqlX.js';
|
|
12
|
-
import { w as watchForOptions } from './p-Dtdm8lKC.js';
|
|
13
|
-
import { v as chevronExpand, h as caretDownSharp } from './p-CO7fmmxt.js';
|
|
14
|
-
import { b as getIonMode } from './p-Bxl5etF4.js';
|
|
15
|
-
import { d as defineCustomElement$n } from './p-CXJR56Oq.js';
|
|
16
|
-
import { d as defineCustomElement$m } from './p-BcazQttQ.js';
|
|
17
|
-
import { d as defineCustomElement$l } from './p-Bhnhnzjz.js';
|
|
18
|
-
import { d as defineCustomElement$k } from './p-DK2Bn1Mc.js';
|
|
19
|
-
import { d as defineCustomElement$j } from './p-BBFQmhcD.js';
|
|
20
|
-
import { d as defineCustomElement$i } from './p-DyFBFrV7.js';
|
|
21
|
-
import { d as defineCustomElement$h } from './p-DGOrLIyS.js';
|
|
22
|
-
import { d as defineCustomElement$g } from './p-DX0w75a9.js';
|
|
23
|
-
import { d as defineCustomElement$f } from './p-Wro9IPHE.js';
|
|
24
|
-
import { d as defineCustomElement$e } from './p-aIWC4ZEV.js';
|
|
25
|
-
import { d as defineCustomElement$d } from './p-Cdm3dKWf.js';
|
|
26
|
-
import { d as defineCustomElement$c } from './p-B25GjpND.js';
|
|
27
|
-
import { d as defineCustomElement$b } from './p-NhiRFRn9.js';
|
|
28
|
-
import { d as defineCustomElement$a } from './p-iyo0Toaz.js';
|
|
29
|
-
import { d as defineCustomElement$9 } from './p-C6dkQWq2.js';
|
|
30
|
-
import { d as defineCustomElement$7 } from './p-BANeLH_G.js';
|
|
31
|
-
import { d as defineCustomElement$6 } from './p-LgLeKTkH.js';
|
|
32
|
-
import { d as defineCustomElement$5 } from './p-CFZWrvIQ.js';
|
|
33
|
-
import { d as defineCustomElement$4 } from './p-CslsoGzv.js';
|
|
34
|
-
import { d as defineCustomElement$3 } from './p-BTlwXR9e.js';
|
|
35
|
-
import { d as defineCustomElement$2 } from './p-Dt8zaCLQ.js';
|
|
36
|
-
|
|
37
|
-
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}";
|
|
38
|
-
|
|
39
|
-
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}";
|
|
40
|
-
|
|
41
|
-
const Select = /*@__PURE__*/ proxyCustomElement(class Select extends H {
|
|
42
|
-
constructor(registerHost) {
|
|
43
|
-
super();
|
|
44
|
-
if (registerHost !== false) {
|
|
45
|
-
this.__registerHost();
|
|
46
|
-
}
|
|
47
|
-
this.__attachShadow();
|
|
48
|
-
this.ionChange = createEvent(this, "ionChange", 7);
|
|
49
|
-
this.ionCancel = createEvent(this, "ionCancel", 7);
|
|
50
|
-
this.ionDismiss = createEvent(this, "ionDismiss", 7);
|
|
51
|
-
this.ionFocus = createEvent(this, "ionFocus", 7);
|
|
52
|
-
this.ionBlur = createEvent(this, "ionBlur", 7);
|
|
53
|
-
this.ionStyle = createEvent(this, "ionStyle", 7);
|
|
54
|
-
this.inputId = `ion-sel-${selectIds++}`;
|
|
55
|
-
this.helperTextId = `${this.inputId}-helper-text`;
|
|
56
|
-
this.errorTextId = `${this.inputId}-error-text`;
|
|
57
|
-
this.inheritedAttributes = {};
|
|
58
|
-
this.isExpanded = false;
|
|
59
|
-
/**
|
|
60
|
-
* The `hasFocus` state ensures the focus class is
|
|
61
|
-
* added regardless of how the element is focused.
|
|
62
|
-
* The `ion-focused` class only applies when focused
|
|
63
|
-
* via tabbing, not by clicking.
|
|
64
|
-
* The `has-focus` logic was added to ensure the class
|
|
65
|
-
* is applied in both cases.
|
|
66
|
-
*/
|
|
67
|
-
this.hasFocus = false;
|
|
68
|
-
/**
|
|
69
|
-
* Track validation state for proper aria-live announcements.
|
|
70
|
-
*/
|
|
71
|
-
this.isInvalid = false;
|
|
72
|
-
/**
|
|
73
|
-
* The text to display on the cancel button.
|
|
74
|
-
*/
|
|
75
|
-
this.cancelText = 'Cancel';
|
|
76
|
-
/**
|
|
77
|
-
* If `true`, the user cannot interact with the select.
|
|
78
|
-
*/
|
|
79
|
-
this.disabled = false;
|
|
80
|
-
/**
|
|
81
|
-
* The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
|
|
82
|
-
*/
|
|
83
|
-
this.interface = 'alert';
|
|
84
|
-
/**
|
|
85
|
-
* Any additional options that the `alert`, `action-sheet` or `popover` interface
|
|
86
|
-
* can take. See the [ion-alert docs](./alert), the
|
|
87
|
-
* [ion-action-sheet docs](./action-sheet), the
|
|
88
|
-
* [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the
|
|
89
|
-
* create options for each interface.
|
|
90
|
-
*
|
|
91
|
-
* Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
|
|
92
|
-
*/
|
|
93
|
-
this.interfaceOptions = {};
|
|
94
|
-
/**
|
|
95
|
-
* Where to place the label relative to the select.
|
|
96
|
-
* `"start"`: The label will appear to the left of the select in LTR and to the right in RTL.
|
|
97
|
-
* `"end"`: The label will appear to the right of the select in LTR and to the left in RTL.
|
|
98
|
-
* `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.
|
|
99
|
-
* `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.
|
|
100
|
-
* `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
|
|
101
|
-
* When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
|
|
102
|
-
*/
|
|
103
|
-
this.labelPlacement = 'start';
|
|
104
|
-
/**
|
|
105
|
-
* If `true`, the select can accept multiple values.
|
|
106
|
-
*/
|
|
107
|
-
this.multiple = false;
|
|
108
|
-
/**
|
|
109
|
-
* The name of the control, which is submitted with the form data.
|
|
110
|
-
*/
|
|
111
|
-
this.name = this.inputId;
|
|
112
|
-
/**
|
|
113
|
-
* The text to display on the ok button.
|
|
114
|
-
*/
|
|
115
|
-
this.okText = 'OK';
|
|
116
|
-
/**
|
|
117
|
-
* If true, screen readers will announce it as a required field. This property
|
|
118
|
-
* works only for accessibility purposes, it will not prevent the form from
|
|
119
|
-
* submitting if the value is invalid.
|
|
120
|
-
*/
|
|
121
|
-
this.required = false;
|
|
122
|
-
this.onClick = (ev) => {
|
|
123
|
-
const target = ev.target;
|
|
124
|
-
const closestSlot = target.closest('[slot="start"], [slot="end"]');
|
|
125
|
-
if (target === this.el || closestSlot === null) {
|
|
126
|
-
this.setFocus();
|
|
127
|
-
this.open(ev);
|
|
128
|
-
}
|
|
129
|
-
else {
|
|
130
|
-
/**
|
|
131
|
-
* Prevent clicks to the start/end slots from opening the select.
|
|
132
|
-
* We ensure the target isn't this element in case the select is slotted
|
|
133
|
-
* in, for example, an item. This would prevent the select from ever
|
|
134
|
-
* being opened since the element itself has slot="start"/"end".
|
|
135
|
-
*
|
|
136
|
-
* Clicking a slotted element also causes a click
|
|
137
|
-
* on the <label> element (since it wraps the slots).
|
|
138
|
-
* Clicking <label> dispatches another click event on
|
|
139
|
-
* the native form control that then bubbles up to this
|
|
140
|
-
* listener. This additional event targets the host
|
|
141
|
-
* element, so the select overlay is opened.
|
|
142
|
-
*
|
|
143
|
-
* When the slotted elements are clicked (and therefore
|
|
144
|
-
* the ancestor <label> element) we want to prevent the label
|
|
145
|
-
* from dispatching another click event.
|
|
146
|
-
*
|
|
147
|
-
* Do not call stopPropagation() because this will cause
|
|
148
|
-
* click handlers on the slotted elements to never fire in React.
|
|
149
|
-
* When developers do onClick in React a native "click" listener
|
|
150
|
-
* is added on the root element, not the slotted element. When that
|
|
151
|
-
* native click listener fires, React then dispatches the synthetic
|
|
152
|
-
* click event on the slotted element. However, if stopPropagation
|
|
153
|
-
* is called then the native click event will never bubble up
|
|
154
|
-
* to the root element.
|
|
155
|
-
*/
|
|
156
|
-
ev.preventDefault();
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
this.onFocus = () => {
|
|
160
|
-
this.hasFocus = true;
|
|
161
|
-
this.ionFocus.emit();
|
|
162
|
-
};
|
|
163
|
-
this.onBlur = () => {
|
|
164
|
-
this.hasFocus = false;
|
|
165
|
-
this.ionBlur.emit();
|
|
166
|
-
};
|
|
167
|
-
/**
|
|
168
|
-
* Stops propagation when the label is clicked,
|
|
169
|
-
* otherwise, two clicks will be triggered.
|
|
170
|
-
*/
|
|
171
|
-
this.onLabelClick = (ev) => {
|
|
172
|
-
// Only stop propagation if the click was directly on the label
|
|
173
|
-
// and not on the input or other child elements
|
|
174
|
-
if (ev.target === ev.currentTarget) {
|
|
175
|
-
ev.stopPropagation();
|
|
176
|
-
}
|
|
177
|
-
};
|
|
178
|
-
}
|
|
179
|
-
styleChanged() {
|
|
180
|
-
this.emitStyle();
|
|
181
|
-
}
|
|
182
|
-
setValue(value) {
|
|
183
|
-
this.value = value;
|
|
184
|
-
this.ionChange.emit({ value });
|
|
185
|
-
}
|
|
186
|
-
async connectedCallback() {
|
|
187
|
-
const { el } = this;
|
|
188
|
-
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
189
|
-
this.updateOverlayOptions();
|
|
190
|
-
this.emitStyle();
|
|
191
|
-
this.mutationO = watchForOptions(this.el, 'ion-select-option', async () => {
|
|
192
|
-
this.updateOverlayOptions();
|
|
193
|
-
/**
|
|
194
|
-
* We need to re-render the component
|
|
195
|
-
* because one of the new ion-select-option
|
|
196
|
-
* elements may match the value. In this case,
|
|
197
|
-
* the rendered selected text should be updated.
|
|
198
|
-
*/
|
|
199
|
-
forceUpdate(this);
|
|
200
|
-
});
|
|
201
|
-
// Watch for class changes to update validation state.
|
|
202
|
-
if (typeof MutationObserver !== 'undefined') {
|
|
203
|
-
this.validationObserver = new MutationObserver(() => {
|
|
204
|
-
const newIsInvalid = checkInvalidState(this.el);
|
|
205
|
-
if (this.isInvalid !== newIsInvalid) {
|
|
206
|
-
this.isInvalid = newIsInvalid;
|
|
207
|
-
/**
|
|
208
|
-
* Screen readers tend to announce changes
|
|
209
|
-
* to `aria-describedby` when the attribute
|
|
210
|
-
* is changed during a blur event for a
|
|
211
|
-
* native form control.
|
|
212
|
-
* However, the announcement can be spotty
|
|
213
|
-
* when using a non-native form control
|
|
214
|
-
* and `forceUpdate()`.
|
|
215
|
-
* This is due to `forceUpdate()` internally
|
|
216
|
-
* rescheduling the DOM update to a lower
|
|
217
|
-
* priority queue regardless if it's called
|
|
218
|
-
* inside a Promise or not, thus causing
|
|
219
|
-
* the screen reader to potentially miss the
|
|
220
|
-
* change.
|
|
221
|
-
* By using a State variable inside a Promise,
|
|
222
|
-
* it guarantees a re-render immediately at
|
|
223
|
-
* a higher priority.
|
|
224
|
-
*/
|
|
225
|
-
Promise.resolve().then(() => {
|
|
226
|
-
this.hintTextId = this.getHintTextId();
|
|
227
|
-
});
|
|
228
|
-
}
|
|
229
|
-
});
|
|
230
|
-
this.validationObserver.observe(el, {
|
|
231
|
-
attributes: true,
|
|
232
|
-
attributeFilter: ['class'],
|
|
233
|
-
});
|
|
234
|
-
}
|
|
235
|
-
// Always set initial state
|
|
236
|
-
this.isInvalid = checkInvalidState(this.el);
|
|
237
|
-
}
|
|
238
|
-
componentWillLoad() {
|
|
239
|
-
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
240
|
-
this.hintTextId = this.getHintTextId();
|
|
241
|
-
}
|
|
242
|
-
componentDidLoad() {
|
|
243
|
-
/**
|
|
244
|
-
* If any of the conditions that trigger the styleChanged callback
|
|
245
|
-
* are met on component load, it is possible the event emitted
|
|
246
|
-
* prior to a parent web component registering an event listener.
|
|
247
|
-
*
|
|
248
|
-
* To ensure the parent web component receives the event, we
|
|
249
|
-
* emit the style event again after the component has loaded.
|
|
250
|
-
*
|
|
251
|
-
* This is often seen in Angular with the `dist` output target.
|
|
252
|
-
*/
|
|
253
|
-
this.emitStyle();
|
|
254
|
-
}
|
|
255
|
-
disconnectedCallback() {
|
|
256
|
-
if (this.mutationO) {
|
|
257
|
-
this.mutationO.disconnect();
|
|
258
|
-
this.mutationO = undefined;
|
|
259
|
-
}
|
|
260
|
-
if (this.notchController) {
|
|
261
|
-
this.notchController.destroy();
|
|
262
|
-
this.notchController = undefined;
|
|
263
|
-
}
|
|
264
|
-
// Clean up validation observer to prevent memory leaks.
|
|
265
|
-
if (this.validationObserver) {
|
|
266
|
-
this.validationObserver.disconnect();
|
|
267
|
-
this.validationObserver = undefined;
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
/**
|
|
271
|
-
* Open the select overlay. The overlay is either an alert, action sheet, or popover,
|
|
272
|
-
* depending on the `interface` property on the `ion-select`.
|
|
273
|
-
*
|
|
274
|
-
* @param event The user interface event that called the open.
|
|
275
|
-
*/
|
|
276
|
-
async open(event) {
|
|
277
|
-
if (this.disabled || this.isExpanded) {
|
|
278
|
-
return undefined;
|
|
279
|
-
}
|
|
280
|
-
this.isExpanded = true;
|
|
281
|
-
const overlay = (this.overlay = await this.createOverlay(event));
|
|
282
|
-
// Add logic to scroll selected item into view before presenting
|
|
283
|
-
const scrollSelectedIntoView = () => {
|
|
284
|
-
const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
|
|
285
|
-
if (indexOfSelected > -1) {
|
|
286
|
-
const selectedItem = overlay.querySelector(`.select-interface-option:nth-of-type(${indexOfSelected + 1})`);
|
|
287
|
-
if (selectedItem) {
|
|
288
|
-
/**
|
|
289
|
-
* Browsers such as Firefox do not
|
|
290
|
-
* correctly delegate focus when manually
|
|
291
|
-
* focusing an element with delegatesFocus.
|
|
292
|
-
* We work around this by manually focusing
|
|
293
|
-
* the interactive element.
|
|
294
|
-
* ion-radio and ion-checkbox are the only
|
|
295
|
-
* elements that ion-select-popover uses, so
|
|
296
|
-
* we only need to worry about those two components
|
|
297
|
-
* when focusing.
|
|
298
|
-
*/
|
|
299
|
-
const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
|
|
300
|
-
if (interactiveEl) {
|
|
301
|
-
selectedItem.scrollIntoView({ block: 'nearest' });
|
|
302
|
-
// Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
|
|
303
|
-
// and removing `ion-focused` style
|
|
304
|
-
interactiveEl.setFocus();
|
|
305
|
-
}
|
|
306
|
-
focusVisibleElement(selectedItem);
|
|
307
|
-
}
|
|
308
|
-
}
|
|
309
|
-
else {
|
|
310
|
-
/**
|
|
311
|
-
* If no value is set then focus the first enabled option.
|
|
312
|
-
*/
|
|
313
|
-
const firstEnabledOption = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
|
|
314
|
-
if (firstEnabledOption) {
|
|
315
|
-
/**
|
|
316
|
-
* Focus the option for the same reason as we do above.
|
|
317
|
-
*
|
|
318
|
-
* Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
|
|
319
|
-
* and removing `ion-focused` style
|
|
320
|
-
*/
|
|
321
|
-
firstEnabledOption.setFocus();
|
|
322
|
-
focusVisibleElement(firstEnabledOption.closest('ion-item'));
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
};
|
|
326
|
-
// For modals and popovers, we can scroll before they're visible
|
|
327
|
-
if (this.interface === 'modal') {
|
|
328
|
-
overlay.addEventListener('ionModalWillPresent', scrollSelectedIntoView, { once: true });
|
|
329
|
-
}
|
|
330
|
-
else if (this.interface === 'popover') {
|
|
331
|
-
overlay.addEventListener('ionPopoverWillPresent', scrollSelectedIntoView, { once: true });
|
|
332
|
-
}
|
|
333
|
-
else {
|
|
334
|
-
/**
|
|
335
|
-
* For alerts and action sheets, we need to wait a frame after willPresent
|
|
336
|
-
* because these overlays don't have their content in the DOM immediately
|
|
337
|
-
* when willPresent fires. By waiting a frame, we ensure the content is
|
|
338
|
-
* rendered and can be properly scrolled into view.
|
|
339
|
-
*/
|
|
340
|
-
const scrollAfterRender = () => {
|
|
341
|
-
requestAnimationFrame(() => {
|
|
342
|
-
scrollSelectedIntoView();
|
|
343
|
-
});
|
|
344
|
-
};
|
|
345
|
-
if (this.interface === 'alert') {
|
|
346
|
-
overlay.addEventListener('ionAlertWillPresent', scrollAfterRender, { once: true });
|
|
347
|
-
}
|
|
348
|
-
else if (this.interface === 'action-sheet') {
|
|
349
|
-
overlay.addEventListener('ionActionSheetWillPresent', scrollAfterRender, { once: true });
|
|
350
|
-
}
|
|
351
|
-
}
|
|
352
|
-
overlay.onDidDismiss().then(() => {
|
|
353
|
-
this.overlay = undefined;
|
|
354
|
-
this.isExpanded = false;
|
|
355
|
-
this.ionDismiss.emit();
|
|
356
|
-
this.setFocus();
|
|
357
|
-
});
|
|
358
|
-
await overlay.present();
|
|
359
|
-
return overlay;
|
|
360
|
-
}
|
|
361
|
-
createOverlay(ev) {
|
|
362
|
-
let selectInterface = this.interface;
|
|
363
|
-
if (selectInterface === 'action-sheet' && this.multiple) {
|
|
364
|
-
printIonWarning(`[ion-select] - Interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`);
|
|
365
|
-
selectInterface = 'alert';
|
|
366
|
-
}
|
|
367
|
-
if (selectInterface === 'popover' && !ev) {
|
|
368
|
-
printIonWarning(`[ion-select] - Interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`);
|
|
369
|
-
selectInterface = 'alert';
|
|
370
|
-
}
|
|
371
|
-
if (selectInterface === 'action-sheet') {
|
|
372
|
-
return this.openActionSheet();
|
|
373
|
-
}
|
|
374
|
-
if (selectInterface === 'popover') {
|
|
375
|
-
return this.openPopover(ev);
|
|
376
|
-
}
|
|
377
|
-
if (selectInterface === 'modal') {
|
|
378
|
-
return this.openModal();
|
|
379
|
-
}
|
|
380
|
-
return this.openAlert();
|
|
381
|
-
}
|
|
382
|
-
updateOverlayOptions() {
|
|
383
|
-
const overlay = this.overlay;
|
|
384
|
-
if (!overlay) {
|
|
385
|
-
return;
|
|
386
|
-
}
|
|
387
|
-
const childOpts = this.childOpts;
|
|
388
|
-
const value = this.value;
|
|
389
|
-
switch (this.interface) {
|
|
390
|
-
case 'action-sheet':
|
|
391
|
-
overlay.buttons = this.createActionSheetButtons(childOpts, value);
|
|
392
|
-
break;
|
|
393
|
-
case 'popover':
|
|
394
|
-
const popover = overlay.querySelector('ion-select-popover');
|
|
395
|
-
if (popover) {
|
|
396
|
-
popover.options = this.createOverlaySelectOptions(childOpts, value);
|
|
397
|
-
}
|
|
398
|
-
break;
|
|
399
|
-
case 'modal':
|
|
400
|
-
const modal = overlay.querySelector('ion-select-modal');
|
|
401
|
-
if (modal) {
|
|
402
|
-
modal.options = this.createOverlaySelectOptions(childOpts, value);
|
|
403
|
-
}
|
|
404
|
-
break;
|
|
405
|
-
case 'alert':
|
|
406
|
-
const inputType = this.multiple ? 'checkbox' : 'radio';
|
|
407
|
-
overlay.inputs = this.createAlertInputs(childOpts, inputType, value);
|
|
408
|
-
break;
|
|
409
|
-
}
|
|
410
|
-
}
|
|
411
|
-
createActionSheetButtons(data, selectValue) {
|
|
412
|
-
const actionSheetButtons = data.map((option) => {
|
|
413
|
-
const value = getOptionValue(option);
|
|
414
|
-
// Remove hydrated before copying over classes
|
|
415
|
-
const copyClasses = Array.from(option.classList)
|
|
416
|
-
.filter((cls) => cls !== 'hydrated')
|
|
417
|
-
.join(' ');
|
|
418
|
-
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
|
419
|
-
const isSelected = isOptionSelected(selectValue, value, this.compareWith);
|
|
420
|
-
return {
|
|
421
|
-
role: isSelected ? 'selected' : '',
|
|
422
|
-
text: option.textContent,
|
|
423
|
-
cssClass: optClass,
|
|
424
|
-
handler: () => {
|
|
425
|
-
this.setValue(value);
|
|
426
|
-
},
|
|
427
|
-
htmlAttributes: {
|
|
428
|
-
'aria-checked': isSelected ? 'true' : 'false',
|
|
429
|
-
role: 'radio',
|
|
430
|
-
},
|
|
431
|
-
};
|
|
432
|
-
});
|
|
433
|
-
// Add "cancel" button
|
|
434
|
-
actionSheetButtons.push({
|
|
435
|
-
text: this.cancelText,
|
|
436
|
-
role: 'cancel',
|
|
437
|
-
handler: () => {
|
|
438
|
-
this.ionCancel.emit();
|
|
439
|
-
},
|
|
440
|
-
});
|
|
441
|
-
return actionSheetButtons;
|
|
442
|
-
}
|
|
443
|
-
createAlertInputs(data, inputType, selectValue) {
|
|
444
|
-
const alertInputs = data.map((option) => {
|
|
445
|
-
const value = getOptionValue(option);
|
|
446
|
-
// Remove hydrated before copying over classes
|
|
447
|
-
const copyClasses = Array.from(option.classList)
|
|
448
|
-
.filter((cls) => cls !== 'hydrated')
|
|
449
|
-
.join(' ');
|
|
450
|
-
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
|
451
|
-
return {
|
|
452
|
-
type: inputType,
|
|
453
|
-
cssClass: optClass,
|
|
454
|
-
label: option.textContent || '',
|
|
455
|
-
value,
|
|
456
|
-
checked: isOptionSelected(selectValue, value, this.compareWith),
|
|
457
|
-
disabled: option.disabled,
|
|
458
|
-
};
|
|
459
|
-
});
|
|
460
|
-
return alertInputs;
|
|
461
|
-
}
|
|
462
|
-
createOverlaySelectOptions(data, selectValue) {
|
|
463
|
-
const popoverOptions = data.map((option) => {
|
|
464
|
-
const value = getOptionValue(option);
|
|
465
|
-
// Remove hydrated before copying over classes
|
|
466
|
-
const copyClasses = Array.from(option.classList)
|
|
467
|
-
.filter((cls) => cls !== 'hydrated')
|
|
468
|
-
.join(' ');
|
|
469
|
-
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
|
470
|
-
return {
|
|
471
|
-
text: option.textContent || '',
|
|
472
|
-
cssClass: optClass,
|
|
473
|
-
value,
|
|
474
|
-
checked: isOptionSelected(selectValue, value, this.compareWith),
|
|
475
|
-
disabled: option.disabled,
|
|
476
|
-
handler: (selected) => {
|
|
477
|
-
this.setValue(selected);
|
|
478
|
-
if (!this.multiple) {
|
|
479
|
-
this.close();
|
|
480
|
-
}
|
|
481
|
-
},
|
|
482
|
-
};
|
|
483
|
-
});
|
|
484
|
-
return popoverOptions;
|
|
485
|
-
}
|
|
486
|
-
async openPopover(ev) {
|
|
487
|
-
const { fill, labelPlacement } = this;
|
|
488
|
-
const interfaceOptions = this.interfaceOptions;
|
|
489
|
-
const mode = getIonMode(this);
|
|
490
|
-
const showBackdrop = mode === 'md' ? false : true;
|
|
491
|
-
const multiple = this.multiple;
|
|
492
|
-
const value = this.value;
|
|
493
|
-
let event = ev;
|
|
494
|
-
let size = 'auto';
|
|
495
|
-
const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
|
|
496
|
-
/**
|
|
497
|
-
* The popover should take up the full width
|
|
498
|
-
* when using a fill in MD mode or if the
|
|
499
|
-
* label is floating/stacked.
|
|
500
|
-
*/
|
|
501
|
-
if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
|
|
502
|
-
size = 'cover';
|
|
503
|
-
/**
|
|
504
|
-
* Otherwise the popover
|
|
505
|
-
* should be positioned relative
|
|
506
|
-
* to the native element.
|
|
507
|
-
*/
|
|
508
|
-
}
|
|
509
|
-
else {
|
|
510
|
-
event = Object.assign(Object.assign({}, ev), { detail: {
|
|
511
|
-
ionShadowTarget: this.nativeWrapperEl,
|
|
512
|
-
} });
|
|
513
|
-
}
|
|
514
|
-
const popoverOpts = Object.assign(Object.assign({ mode,
|
|
515
|
-
event, alignment: 'center', size,
|
|
516
|
-
showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
|
|
517
|
-
header: interfaceOptions.header,
|
|
518
|
-
subHeader: interfaceOptions.subHeader,
|
|
519
|
-
message: interfaceOptions.message,
|
|
520
|
-
multiple,
|
|
521
|
-
value,
|
|
522
|
-
options: this.createOverlaySelectOptions(this.childOpts, value),
|
|
523
|
-
} });
|
|
524
|
-
return popoverController.create(popoverOpts);
|
|
525
|
-
}
|
|
526
|
-
async openActionSheet() {
|
|
527
|
-
const mode = getIonMode(this);
|
|
528
|
-
const interfaceOptions = this.interfaceOptions;
|
|
529
|
-
const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
|
|
530
|
-
return actionSheetController.create(actionSheetOpts);
|
|
531
|
-
}
|
|
532
|
-
async openAlert() {
|
|
533
|
-
const interfaceOptions = this.interfaceOptions;
|
|
534
|
-
const inputType = this.multiple ? 'checkbox' : 'radio';
|
|
535
|
-
const mode = getIonMode(this);
|
|
536
|
-
const alertOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
|
|
537
|
-
{
|
|
538
|
-
text: this.cancelText,
|
|
539
|
-
role: 'cancel',
|
|
540
|
-
handler: () => {
|
|
541
|
-
this.ionCancel.emit();
|
|
542
|
-
},
|
|
543
|
-
},
|
|
544
|
-
{
|
|
545
|
-
text: this.okText,
|
|
546
|
-
handler: (selectedValues) => {
|
|
547
|
-
this.setValue(selectedValues);
|
|
548
|
-
},
|
|
549
|
-
},
|
|
550
|
-
], cssClass: [
|
|
551
|
-
'select-alert',
|
|
552
|
-
interfaceOptions.cssClass,
|
|
553
|
-
this.multiple ? 'multiple-select-alert' : 'single-select-alert',
|
|
554
|
-
] });
|
|
555
|
-
return alertController.create(alertOpts);
|
|
556
|
-
}
|
|
557
|
-
openModal() {
|
|
558
|
-
const { multiple, value, interfaceOptions } = this;
|
|
559
|
-
const mode = getIonMode(this);
|
|
560
|
-
const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
|
|
561
|
-
header: interfaceOptions.header,
|
|
562
|
-
multiple,
|
|
563
|
-
value,
|
|
564
|
-
options: this.createOverlaySelectOptions(this.childOpts, value),
|
|
565
|
-
} });
|
|
566
|
-
return modalController.create(modalOpts);
|
|
567
|
-
}
|
|
568
|
-
/**
|
|
569
|
-
* Close the select interface.
|
|
570
|
-
*/
|
|
571
|
-
close() {
|
|
572
|
-
if (!this.overlay) {
|
|
573
|
-
return Promise.resolve(false);
|
|
574
|
-
}
|
|
575
|
-
return this.overlay.dismiss();
|
|
576
|
-
}
|
|
577
|
-
hasValue() {
|
|
578
|
-
return this.getText() !== '';
|
|
579
|
-
}
|
|
580
|
-
get childOpts() {
|
|
581
|
-
return Array.from(this.el.querySelectorAll('ion-select-option'));
|
|
582
|
-
}
|
|
583
|
-
/**
|
|
584
|
-
* Returns any plaintext associated with
|
|
585
|
-
* the label (either prop or slot).
|
|
586
|
-
* Note: This will not return any custom
|
|
587
|
-
* HTML. Use the `hasLabel` getter if you
|
|
588
|
-
* want to know if any slotted label content
|
|
589
|
-
* was passed.
|
|
590
|
-
*/
|
|
591
|
-
get labelText() {
|
|
592
|
-
const { label } = this;
|
|
593
|
-
if (label !== undefined) {
|
|
594
|
-
return label;
|
|
595
|
-
}
|
|
596
|
-
const { labelSlot } = this;
|
|
597
|
-
if (labelSlot !== null) {
|
|
598
|
-
return labelSlot.textContent;
|
|
599
|
-
}
|
|
600
|
-
return;
|
|
601
|
-
}
|
|
602
|
-
getText() {
|
|
603
|
-
const selectedText = this.selectedText;
|
|
604
|
-
if (selectedText != null && selectedText !== '') {
|
|
605
|
-
return selectedText;
|
|
606
|
-
}
|
|
607
|
-
return generateText(this.childOpts, this.value, this.compareWith);
|
|
608
|
-
}
|
|
609
|
-
setFocus() {
|
|
610
|
-
if (this.focusEl) {
|
|
611
|
-
this.focusEl.focus();
|
|
612
|
-
}
|
|
613
|
-
}
|
|
614
|
-
emitStyle() {
|
|
615
|
-
const { disabled } = this;
|
|
616
|
-
const style = {
|
|
617
|
-
'interactive-disabled': disabled,
|
|
618
|
-
};
|
|
619
|
-
this.ionStyle.emit(style);
|
|
620
|
-
}
|
|
621
|
-
renderLabel() {
|
|
622
|
-
const { label } = this;
|
|
623
|
-
return (h("div", { class: {
|
|
624
|
-
'label-text-wrapper': true,
|
|
625
|
-
'label-text-wrapper-hidden': !this.hasLabel,
|
|
626
|
-
}, part: "label" }, label === undefined ? h("slot", { name: "label" }) : h("div", { class: "label-text" }, label)));
|
|
627
|
-
}
|
|
628
|
-
componentDidRender() {
|
|
629
|
-
var _a;
|
|
630
|
-
(_a = this.notchController) === null || _a === void 0 ? void 0 : _a.calculateNotchWidth();
|
|
631
|
-
}
|
|
632
|
-
/**
|
|
633
|
-
* Gets any content passed into the `label` slot,
|
|
634
|
-
* not the <slot> definition.
|
|
635
|
-
*/
|
|
636
|
-
get labelSlot() {
|
|
637
|
-
return this.el.querySelector('[slot="label"]');
|
|
638
|
-
}
|
|
639
|
-
/**
|
|
640
|
-
* Returns `true` if label content is provided
|
|
641
|
-
* either by a prop or a content. If you want
|
|
642
|
-
* to get the plaintext value of the label use
|
|
643
|
-
* the `labelText` getter instead.
|
|
644
|
-
*/
|
|
645
|
-
get hasLabel() {
|
|
646
|
-
return this.label !== undefined || this.labelSlot !== null;
|
|
647
|
-
}
|
|
648
|
-
/**
|
|
649
|
-
* Renders the border container
|
|
650
|
-
* when fill="outline".
|
|
651
|
-
*/
|
|
652
|
-
renderLabelContainer() {
|
|
653
|
-
const mode = getIonMode(this);
|
|
654
|
-
const hasOutlineFill = mode === 'md' && this.fill === 'outline';
|
|
655
|
-
if (hasOutlineFill) {
|
|
656
|
-
/**
|
|
657
|
-
* The outline fill has a special outline
|
|
658
|
-
* that appears around the select and the label.
|
|
659
|
-
* Certain stacked and floating label placements cause the
|
|
660
|
-
* label to translate up and create a "cut out"
|
|
661
|
-
* inside of that border by using the notch-spacer element.
|
|
662
|
-
*/
|
|
663
|
-
return [
|
|
664
|
-
h("div", { class: "select-outline-container" }, h("div", { class: "select-outline-start" }), h("div", { class: {
|
|
665
|
-
'select-outline-notch': true,
|
|
666
|
-
'select-outline-notch-hidden': !this.hasLabel,
|
|
667
|
-
} }, h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), h("div", { class: "select-outline-end" })),
|
|
668
|
-
this.renderLabel(),
|
|
669
|
-
];
|
|
670
|
-
}
|
|
671
|
-
/**
|
|
672
|
-
* If not using the outline style,
|
|
673
|
-
* we can render just the label.
|
|
674
|
-
*/
|
|
675
|
-
return this.renderLabel();
|
|
676
|
-
}
|
|
677
|
-
/**
|
|
678
|
-
* Renders either the placeholder
|
|
679
|
-
* or the selected values based on
|
|
680
|
-
* the state of the select.
|
|
681
|
-
*/
|
|
682
|
-
renderSelectText() {
|
|
683
|
-
const { placeholder } = this;
|
|
684
|
-
const displayValue = this.getText();
|
|
685
|
-
let addPlaceholderClass = false;
|
|
686
|
-
let selectText = displayValue;
|
|
687
|
-
if (selectText === '' && placeholder !== undefined) {
|
|
688
|
-
selectText = placeholder;
|
|
689
|
-
addPlaceholderClass = true;
|
|
690
|
-
}
|
|
691
|
-
const selectTextClasses = {
|
|
692
|
-
'select-text': true,
|
|
693
|
-
'select-placeholder': addPlaceholderClass,
|
|
694
|
-
};
|
|
695
|
-
const textPart = addPlaceholderClass ? 'placeholder' : 'text';
|
|
696
|
-
return (h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText));
|
|
697
|
-
}
|
|
698
|
-
/**
|
|
699
|
-
* Renders the chevron icon
|
|
700
|
-
* next to the select text.
|
|
701
|
-
*/
|
|
702
|
-
renderSelectIcon() {
|
|
703
|
-
const mode = getIonMode(this);
|
|
704
|
-
const { isExpanded, toggleIcon, expandedIcon } = this;
|
|
705
|
-
let icon;
|
|
706
|
-
if (isExpanded && expandedIcon !== undefined) {
|
|
707
|
-
icon = expandedIcon;
|
|
708
|
-
}
|
|
709
|
-
else {
|
|
710
|
-
const defaultIcon = mode === 'ios' ? chevronExpand : caretDownSharp;
|
|
711
|
-
icon = toggleIcon !== null && toggleIcon !== void 0 ? toggleIcon : defaultIcon;
|
|
712
|
-
}
|
|
713
|
-
return h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
|
|
714
|
-
}
|
|
715
|
-
get ariaLabel() {
|
|
716
|
-
var _a;
|
|
717
|
-
const { placeholder, inheritedAttributes } = this;
|
|
718
|
-
const displayValue = this.getText();
|
|
719
|
-
// The aria label should be preferred over visible text if both are specified
|
|
720
|
-
const definedLabel = (_a = inheritedAttributes['aria-label']) !== null && _a !== void 0 ? _a : this.labelText;
|
|
721
|
-
/**
|
|
722
|
-
* If developer has specified a placeholder
|
|
723
|
-
* and there is nothing selected, the selectText
|
|
724
|
-
* should have the placeholder value.
|
|
725
|
-
*/
|
|
726
|
-
let renderedLabel = displayValue;
|
|
727
|
-
if (renderedLabel === '' && placeholder !== undefined) {
|
|
728
|
-
renderedLabel = placeholder;
|
|
729
|
-
}
|
|
730
|
-
/**
|
|
731
|
-
* If there is a developer-defined label,
|
|
732
|
-
* then we need to concatenate the developer label
|
|
733
|
-
* string with the current current value.
|
|
734
|
-
* The label for the control should be read
|
|
735
|
-
* before the values of the control.
|
|
736
|
-
*/
|
|
737
|
-
if (definedLabel !== undefined) {
|
|
738
|
-
renderedLabel = renderedLabel === '' ? definedLabel : `${definedLabel}, ${renderedLabel}`;
|
|
739
|
-
}
|
|
740
|
-
return renderedLabel;
|
|
741
|
-
}
|
|
742
|
-
renderListbox() {
|
|
743
|
-
const { disabled, inputId, isExpanded, required } = this;
|
|
744
|
-
return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
|
|
745
|
-
}
|
|
746
|
-
getHintTextId() {
|
|
747
|
-
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
|
|
748
|
-
if (isInvalid && errorText) {
|
|
749
|
-
return errorTextId;
|
|
750
|
-
}
|
|
751
|
-
if (helperText) {
|
|
752
|
-
return helperTextId;
|
|
753
|
-
}
|
|
754
|
-
return undefined;
|
|
755
|
-
}
|
|
756
|
-
/**
|
|
757
|
-
* Renders the helper text or error text values
|
|
758
|
-
*/
|
|
759
|
-
renderHintText() {
|
|
760
|
-
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
|
|
761
|
-
return [
|
|
762
|
-
h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
|
|
763
|
-
h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null),
|
|
764
|
-
];
|
|
765
|
-
}
|
|
766
|
-
/**
|
|
767
|
-
* Responsible for rendering helper text, and error text. This element
|
|
768
|
-
* should only be rendered if hint text is set.
|
|
769
|
-
*/
|
|
770
|
-
renderBottomContent() {
|
|
771
|
-
const { helperText, errorText } = this;
|
|
772
|
-
/**
|
|
773
|
-
* undefined and empty string values should
|
|
774
|
-
* be treated as not having helper/error text.
|
|
775
|
-
*/
|
|
776
|
-
const hasHintText = !!helperText || !!errorText;
|
|
777
|
-
if (!hasHintText) {
|
|
778
|
-
return;
|
|
779
|
-
}
|
|
780
|
-
return h("div", { class: "select-bottom" }, this.renderHintText());
|
|
781
|
-
}
|
|
782
|
-
render() {
|
|
783
|
-
const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value, hasFocus, } = this;
|
|
784
|
-
const mode = getIonMode(this);
|
|
785
|
-
const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
|
|
786
|
-
const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined;
|
|
787
|
-
const rtl = isRTL(el) ? 'rtl' : 'ltr';
|
|
788
|
-
const inItem = hostContext('ion-item', this.el);
|
|
789
|
-
const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
|
|
790
|
-
const hasValue = this.hasValue();
|
|
791
|
-
const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
|
|
792
|
-
renderHiddenInput(true, el, name, parseValue(value), disabled);
|
|
793
|
-
/**
|
|
794
|
-
* If the label is stacked, it should always sit above the select.
|
|
795
|
-
* For floating labels, the label should move above the select if
|
|
796
|
-
* the select has a value, is open, or has anything in either
|
|
797
|
-
* the start or end slot.
|
|
798
|
-
*
|
|
799
|
-
* If there is content in the start slot, the label would overlap
|
|
800
|
-
* it if not forced to float. This is also applied to the end slot
|
|
801
|
-
* because with the default or solid fills, the select is not
|
|
802
|
-
* vertically centered in the container, but the label is. This
|
|
803
|
-
* causes the slots and label to appear vertically offset from each
|
|
804
|
-
* other when the label isn't floating above the input. This doesn't
|
|
805
|
-
* apply to the outline fill, but this was not accounted for to keep
|
|
806
|
-
* things consistent.
|
|
807
|
-
*
|
|
808
|
-
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
809
|
-
*/
|
|
810
|
-
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
811
|
-
return (h(Host, { key: '9f0a833ebc3df27a42146b07bcbb181c05f5e5c4', onClick: this.onClick, class: createColorClasses(this.color, {
|
|
812
|
-
[mode]: true,
|
|
813
|
-
'in-item': inItem,
|
|
814
|
-
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
815
|
-
'select-disabled': disabled,
|
|
816
|
-
'select-expanded': isExpanded,
|
|
817
|
-
'has-expanded-icon': expandedIcon !== undefined,
|
|
818
|
-
'has-value': hasValue,
|
|
819
|
-
'label-floating': labelShouldFloat,
|
|
820
|
-
'has-placeholder': placeholder !== undefined,
|
|
821
|
-
'has-focus': hasFocus,
|
|
822
|
-
// TODO(FW-6451): Remove `ion-focusable` class in favor of `has-focus`.
|
|
823
|
-
'ion-focusable': true,
|
|
824
|
-
[`select-${rtl}`]: true,
|
|
825
|
-
[`select-fill-${fill}`]: fill !== undefined,
|
|
826
|
-
[`select-justify-${justify}`]: justifyEnabled,
|
|
827
|
-
[`select-shape-${shape}`]: shape !== undefined,
|
|
828
|
-
[`select-label-placement-${labelPlacement}`]: true,
|
|
829
|
-
}) }, h("label", { key: '4b32396d8557c0d1cba13440a11e66b8eb7b13a9', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'd226cc8e30cd5202c235476cfa1632fc40bc609f', class: "select-wrapper-inner" }, h("slot", { key: 'df813ff3b7de518c70ea4fedd25bcb965607026d', name: "start" }), h("div", { key: '4a4e9348a136c598b7b08f80ecdcca268afec2d5', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'f168d8b42a1e193ad27d09e5f1553b231f0332e5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'ec3deede22dd403cb16a08f532ae4809cf86a3e7', class: "select-highlight" })), this.renderBottomContent()));
|
|
830
|
-
}
|
|
831
|
-
get el() { return this; }
|
|
832
|
-
static get watchers() { return {
|
|
833
|
-
"disabled": ["styleChanged"],
|
|
834
|
-
"isExpanded": ["styleChanged"],
|
|
835
|
-
"placeholder": ["styleChanged"],
|
|
836
|
-
"value": ["styleChanged"]
|
|
837
|
-
}; }
|
|
838
|
-
static get style() { return {
|
|
839
|
-
ios: selectIosCss,
|
|
840
|
-
md: selectMdCss
|
|
841
|
-
}; }
|
|
842
|
-
}, [289, "ion-select", {
|
|
843
|
-
"cancelText": [1, "cancel-text"],
|
|
844
|
-
"color": [513],
|
|
845
|
-
"compareWith": [1, "compare-with"],
|
|
846
|
-
"disabled": [4],
|
|
847
|
-
"fill": [1],
|
|
848
|
-
"errorText": [1, "error-text"],
|
|
849
|
-
"helperText": [1, "helper-text"],
|
|
850
|
-
"interface": [1],
|
|
851
|
-
"interfaceOptions": [8, "interface-options"],
|
|
852
|
-
"justify": [1],
|
|
853
|
-
"label": [1],
|
|
854
|
-
"labelPlacement": [1, "label-placement"],
|
|
855
|
-
"multiple": [4],
|
|
856
|
-
"name": [1],
|
|
857
|
-
"okText": [1, "ok-text"],
|
|
858
|
-
"placeholder": [1],
|
|
859
|
-
"selectedText": [1, "selected-text"],
|
|
860
|
-
"toggleIcon": [1, "toggle-icon"],
|
|
861
|
-
"expandedIcon": [1, "expanded-icon"],
|
|
862
|
-
"shape": [1],
|
|
863
|
-
"value": [1032],
|
|
864
|
-
"required": [4],
|
|
865
|
-
"isExpanded": [32],
|
|
866
|
-
"hasFocus": [32],
|
|
867
|
-
"isInvalid": [32],
|
|
868
|
-
"hintTextId": [32],
|
|
869
|
-
"open": [64]
|
|
870
|
-
}, undefined, {
|
|
871
|
-
"disabled": ["styleChanged"],
|
|
872
|
-
"isExpanded": ["styleChanged"],
|
|
873
|
-
"placeholder": ["styleChanged"],
|
|
874
|
-
"value": ["styleChanged"]
|
|
875
|
-
}]);
|
|
876
|
-
const getOptionValue = (el) => {
|
|
877
|
-
const value = el.value;
|
|
878
|
-
return value === undefined ? el.textContent || '' : value;
|
|
879
|
-
};
|
|
880
|
-
const parseValue = (value) => {
|
|
881
|
-
if (value == null) {
|
|
882
|
-
return undefined;
|
|
883
|
-
}
|
|
884
|
-
if (Array.isArray(value)) {
|
|
885
|
-
return value.join(',');
|
|
886
|
-
}
|
|
887
|
-
return value.toString();
|
|
888
|
-
};
|
|
889
|
-
const generateText = (opts, value, compareWith) => {
|
|
890
|
-
if (value === undefined) {
|
|
891
|
-
return '';
|
|
892
|
-
}
|
|
893
|
-
if (Array.isArray(value)) {
|
|
894
|
-
return value
|
|
895
|
-
.map((v) => textForValue(opts, v, compareWith))
|
|
896
|
-
.filter((opt) => opt !== null)
|
|
897
|
-
.join(', ');
|
|
898
|
-
}
|
|
899
|
-
else {
|
|
900
|
-
return textForValue(opts, value, compareWith) || '';
|
|
901
|
-
}
|
|
902
|
-
};
|
|
903
|
-
const textForValue = (opts, value, compareWith) => {
|
|
904
|
-
const selectOpt = opts.find((opt) => {
|
|
905
|
-
return compareOptions(value, getOptionValue(opt), compareWith);
|
|
906
|
-
});
|
|
907
|
-
return selectOpt ? selectOpt.textContent : null;
|
|
908
|
-
};
|
|
909
|
-
let selectIds = 0;
|
|
910
|
-
const OPTION_CLASS = 'select-interface-option';
|
|
911
|
-
function defineCustomElement$1() {
|
|
912
|
-
if (typeof customElements === "undefined") {
|
|
913
|
-
return;
|
|
914
|
-
}
|
|
915
|
-
const components = ["ion-select", "ion-action-sheet", "ion-alert", "ion-backdrop", "ion-button", "ion-buttons", "ion-checkbox", "ion-content", "ion-header", "ion-icon", "ion-item", "ion-label", "ion-list", "ion-list-header", "ion-modal", "ion-popover", "ion-radio", "ion-radio-group", "ion-ripple-effect", "ion-select-modal", "ion-select-popover", "ion-title", "ion-toolbar"];
|
|
916
|
-
components.forEach(tagName => { switch (tagName) {
|
|
917
|
-
case "ion-select":
|
|
918
|
-
if (!customElements.get(tagName)) {
|
|
919
|
-
customElements.define(tagName, Select);
|
|
920
|
-
}
|
|
921
|
-
break;
|
|
922
|
-
case "ion-action-sheet":
|
|
923
|
-
if (!customElements.get(tagName)) {
|
|
924
|
-
defineCustomElement$n();
|
|
925
|
-
}
|
|
926
|
-
break;
|
|
927
|
-
case "ion-alert":
|
|
928
|
-
if (!customElements.get(tagName)) {
|
|
929
|
-
defineCustomElement$m();
|
|
930
|
-
}
|
|
931
|
-
break;
|
|
932
|
-
case "ion-backdrop":
|
|
933
|
-
if (!customElements.get(tagName)) {
|
|
934
|
-
defineCustomElement$l();
|
|
935
|
-
}
|
|
936
|
-
break;
|
|
937
|
-
case "ion-button":
|
|
938
|
-
if (!customElements.get(tagName)) {
|
|
939
|
-
defineCustomElement$k();
|
|
940
|
-
}
|
|
941
|
-
break;
|
|
942
|
-
case "ion-buttons":
|
|
943
|
-
if (!customElements.get(tagName)) {
|
|
944
|
-
defineCustomElement$j();
|
|
945
|
-
}
|
|
946
|
-
break;
|
|
947
|
-
case "ion-checkbox":
|
|
948
|
-
if (!customElements.get(tagName)) {
|
|
949
|
-
defineCustomElement$i();
|
|
950
|
-
}
|
|
951
|
-
break;
|
|
952
|
-
case "ion-content":
|
|
953
|
-
if (!customElements.get(tagName)) {
|
|
954
|
-
defineCustomElement$h();
|
|
955
|
-
}
|
|
956
|
-
break;
|
|
957
|
-
case "ion-header":
|
|
958
|
-
if (!customElements.get(tagName)) {
|
|
959
|
-
defineCustomElement$g();
|
|
960
|
-
}
|
|
961
|
-
break;
|
|
962
|
-
case "ion-icon":
|
|
963
|
-
if (!customElements.get(tagName)) {
|
|
964
|
-
defineCustomElement$f();
|
|
965
|
-
}
|
|
966
|
-
break;
|
|
967
|
-
case "ion-item":
|
|
968
|
-
if (!customElements.get(tagName)) {
|
|
969
|
-
defineCustomElement$e();
|
|
970
|
-
}
|
|
971
|
-
break;
|
|
972
|
-
case "ion-label":
|
|
973
|
-
if (!customElements.get(tagName)) {
|
|
974
|
-
defineCustomElement$d();
|
|
975
|
-
}
|
|
976
|
-
break;
|
|
977
|
-
case "ion-list":
|
|
978
|
-
if (!customElements.get(tagName)) {
|
|
979
|
-
defineCustomElement$c();
|
|
980
|
-
}
|
|
981
|
-
break;
|
|
982
|
-
case "ion-list-header":
|
|
983
|
-
if (!customElements.get(tagName)) {
|
|
984
|
-
defineCustomElement$b();
|
|
985
|
-
}
|
|
986
|
-
break;
|
|
987
|
-
case "ion-modal":
|
|
988
|
-
if (!customElements.get(tagName)) {
|
|
989
|
-
defineCustomElement$a();
|
|
990
|
-
}
|
|
991
|
-
break;
|
|
992
|
-
case "ion-popover":
|
|
993
|
-
if (!customElements.get(tagName)) {
|
|
994
|
-
defineCustomElement$9();
|
|
995
|
-
}
|
|
996
|
-
break;
|
|
997
|
-
case "ion-radio":
|
|
998
|
-
if (!customElements.get(tagName)) {
|
|
999
|
-
defineCustomElement$8();
|
|
1000
|
-
}
|
|
1001
|
-
break;
|
|
1002
|
-
case "ion-radio-group":
|
|
1003
|
-
if (!customElements.get(tagName)) {
|
|
1004
|
-
defineCustomElement$7();
|
|
1005
|
-
}
|
|
1006
|
-
break;
|
|
1007
|
-
case "ion-ripple-effect":
|
|
1008
|
-
if (!customElements.get(tagName)) {
|
|
1009
|
-
defineCustomElement$6();
|
|
1010
|
-
}
|
|
1011
|
-
break;
|
|
1012
|
-
case "ion-select-modal":
|
|
1013
|
-
if (!customElements.get(tagName)) {
|
|
1014
|
-
defineCustomElement$5();
|
|
1015
|
-
}
|
|
1016
|
-
break;
|
|
1017
|
-
case "ion-select-popover":
|
|
1018
|
-
if (!customElements.get(tagName)) {
|
|
1019
|
-
defineCustomElement$4();
|
|
1020
|
-
}
|
|
1021
|
-
break;
|
|
1022
|
-
case "ion-title":
|
|
1023
|
-
if (!customElements.get(tagName)) {
|
|
1024
|
-
defineCustomElement$3();
|
|
1025
|
-
}
|
|
1026
|
-
break;
|
|
1027
|
-
case "ion-toolbar":
|
|
1028
|
-
if (!customElements.get(tagName)) {
|
|
1029
|
-
defineCustomElement$2();
|
|
1030
|
-
}
|
|
1031
|
-
break;
|
|
1032
|
-
} });
|
|
1033
|
-
}
|
|
1034
|
-
|
|
1035
|
-
const IonSelect = Select;
|
|
1036
|
-
const defineCustomElement = defineCustomElement$1;
|
|
1037
|
-
|
|
1038
|
-
export { IonSelect, defineCustomElement };
|
|
4
|
+
import{p as e,H as t,e as i,f as l,h as o,d as s,t as a,i as r}from"./p-BJoMtgfR.js";import{c as n}from"./p-ak_d-z48.js";import{i as c,d,c as p}from"./p-BSB38Tek.js";import{c as h}from"./p-DJztqcrH.js";import{d as b,e as m,h as g}from"./p-DgbT0exM.js";import{c as f,b as u,a as x,m as v}from"./p-Cq8cQ0NL.js";import{i as w}from"./p-C53feagD.js";import{h as k,c as y}from"./p-DiVJyqlX.js";import{w as j}from"./p-Dtdm8lKC.js";import{v as z,h as C}from"./p-CO7fmmxt.js";import{b as E}from"./p-CDfQnFrd.js";import{d as T}from"./p-1KVKSLu5.js";import{d as O}from"./p-CH0NYjKq.js";import{d as I}from"./p-CoA-aqGF.js";import{d as A}from"./p-BTeL5HCK.js";import{d as B}from"./p-B8b1Ukl9.js";import{d as D}from"./p-BFxT89Wl.js";import{d as P}from"./p-ApmKVjaE.js";import{d as S}from"./p-BYDc3hSE.js";import{d as Y}from"./p-YLXPWgVj.js";import{d as F}from"./p-kvaDs24J.js";import{d as L}from"./p-B6FQ0cKR.js";import{d as W}from"./p-DYdpXONG.js";import{d as $}from"./p-BagjAGC0.js";import{d as q}from"./p-BVnB3eEn.js";import{d as K}from"./p-DHsZWn1l.js";import{d as M}from"./p-Bk2zuNWT.js";import{d as V}from"./p-fpbh6w3f.js";import{d as H}from"./p-Bum_LjMh.js";import{d as J}from"./p-CVF7ukTk.js";import{d as N}from"./p-CgfaEEem.js";import{d as G}from"./p-DJMZehmW.js";const Q=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.ionChange=i(this,"ionChange",7),this.ionCancel=i(this,"ionCancel",7),this.ionDismiss=i(this,"ionDismiss",7),this.ionFocus=i(this,"ionFocus",7),this.ionBlur=i(this,"ionBlur",7),this.ionStyle=i(this,"ionStyle",7),this.inputId="ion-sel-"+_++,this.helperTextId=this.inputId+"-helper-text",this.errorTextId=this.inputId+"-error-text",this.inheritedAttributes={},this.isExpanded=!1,this.hasFocus=!1,this.isInvalid=!1,this.cancelText="Cancel",this.disabled=!1,this.interface="alert",this.interfaceOptions={},this.labelPlacement="start",this.multiple=!1,this.name=this.inputId,this.okText="OK",this.required=!1,this.onClick=e=>{const t=e.target,i=t.closest('[slot="start"], [slot="end"]');t===this.el||null===i?(this.setFocus(),this.open(e)):e.preventDefault()},this.onFocus=()=>{this.hasFocus=!0,this.ionFocus.emit()},this.onBlur=()=>{this.hasFocus=!1,this.ionBlur.emit()},this.onLabelClick=e=>{e.target===e.currentTarget&&e.stopPropagation()}}styleChanged(){this.emitStyle()}setValue(e){this.value=e,this.ionChange.emit({value:e})}async connectedCallback(){const{el:e}=this;this.notchController=n(e,(()=>this.notchSpacerEl),(()=>this.labelSlot)),this.updateOverlayOptions(),this.emitStyle(),this.mutationO=j(this.el,"ion-select-option",(async()=>{this.updateOverlayOptions(),r(this)})),"undefined"!=typeof MutationObserver&&(this.validationObserver=new MutationObserver((()=>{const e=h(this.el);this.isInvalid!==e&&(this.isInvalid=e,Promise.resolve().then((()=>{this.hintTextId=this.getHintTextId()})))})),this.validationObserver.observe(e,{attributes:!0,attributeFilter:["class"]})),this.isInvalid=h(this.el)}componentWillLoad(){this.inheritedAttributes=b(this.el,["aria-label"]),this.hintTextId=this.getHintTextId()}componentDidLoad(){this.emitStyle()}disconnectedCallback(){this.mutationO&&(this.mutationO.disconnect(),this.mutationO=void 0),this.notchController&&(this.notchController.destroy(),this.notchController=void 0),this.validationObserver&&(this.validationObserver.disconnect(),this.validationObserver=void 0)}async open(e){if(this.disabled||this.isExpanded)return;this.isExpanded=!0;const t=this.overlay=await this.createOverlay(e),i=()=>{const e=this.childOpts.findIndex((e=>e.value===this.value));if(e>-1){const i=t.querySelector(`.select-interface-option:nth-of-type(${e+1})`);if(i){const e=i.querySelector("ion-radio, ion-checkbox");e&&(i.scrollIntoView({block:"nearest"}),e.setFocus()),g(i)}}else{const e=t.querySelector("ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)");e&&(e.setFocus(),g(e.closest("ion-item")))}};if("modal"===this.interface)t.addEventListener("ionModalWillPresent",i,{once:!0});else if("popover"===this.interface)t.addEventListener("ionPopoverWillPresent",i,{once:!0});else{const e=()=>{requestAnimationFrame((()=>{i()}))};"alert"===this.interface?t.addEventListener("ionAlertWillPresent",e,{once:!0}):"action-sheet"===this.interface&&t.addEventListener("ionActionSheetWillPresent",e,{once:!0})}return t.onDidDismiss().then((()=>{this.overlay=void 0,this.isExpanded=!1,this.ionDismiss.emit(),this.setFocus()})),await t.present(),t}createOverlay(e){let t=this.interface;return"action-sheet"===t&&this.multiple&&(l(`[ion-select] - Interface cannot be "${t}" with a multi-value select. Using the "alert" interface instead.`),t="alert"),"popover"!==t||e||(l(`[ion-select] - Interface cannot be a "${t}" without passing an event. Using the "alert" interface instead.`),t="alert"),"action-sheet"===t?this.openActionSheet():"popover"===t?this.openPopover(e):"modal"===t?this.openModal():this.openAlert()}updateOverlayOptions(){const e=this.overlay;if(!e)return;const t=this.childOpts,i=this.value;switch(this.interface){case"action-sheet":e.buttons=this.createActionSheetButtons(t,i);break;case"popover":const l=e.querySelector("ion-select-popover");l&&(l.options=this.createOverlaySelectOptions(t,i));break;case"modal":const o=e.querySelector("ion-select-modal");o&&(o.options=this.createOverlaySelectOptions(t,i));break;case"alert":e.inputs=this.createAlertInputs(t,this.multiple?"checkbox":"radio",i)}}createActionSheetButtons(e,t){const i=e.map((e=>{const i=R(e),l=Array.from(e.classList).filter((e=>"hydrated"!==e)).join(" "),o=`${ee} ${l}`,s=c(t,i,this.compareWith);return{role:s?"selected":"",text:e.textContent,cssClass:o,handler:()=>{this.setValue(i)},htmlAttributes:{"aria-checked":s?"true":"false",role:"radio"}}}));return i.push({text:this.cancelText,role:"cancel",handler:()=>{this.ionCancel.emit()}}),i}createAlertInputs(e,t,i){return e.map((e=>{const l=R(e),o=Array.from(e.classList).filter((e=>"hydrated"!==e)).join(" ");return{type:t,cssClass:`${ee} ${o}`,label:e.textContent||"",value:l,checked:c(i,l,this.compareWith),disabled:e.disabled}}))}createOverlaySelectOptions(e,t){return e.map((e=>{const i=R(e),l=Array.from(e.classList).filter((e=>"hydrated"!==e)).join(" ");return{text:e.textContent||"",cssClass:`${ee} ${l}`,value:i,checked:c(t,i,this.compareWith),disabled:e.disabled,handler:e=>{this.setValue(e),this.multiple||this.close()}}}))}async openPopover(e){const{fill:t,labelPlacement:i}=this,l=this.interfaceOptions,o=E(this),s="md"!==o,a=this.multiple,r=this.value;let n=e,c="auto";"floating"===i||"stacked"===i||"md"===o&&void 0!==t?c="cover":n=Object.assign(Object.assign({},e),{detail:{ionShadowTarget:this.nativeWrapperEl}});const d=Object.assign(Object.assign({mode:o,event:n,alignment:"center",size:c,showBackdrop:s},l),{component:"ion-select-popover",cssClass:["select-popover",l.cssClass],componentProps:{header:l.header,subHeader:l.subHeader,message:l.message,multiple:a,value:r,options:this.createOverlaySelectOptions(this.childOpts,r)}});return f.create(d)}async openActionSheet(){const e=E(this),t=this.interfaceOptions,i=Object.assign(Object.assign({mode:e},t),{buttons:this.createActionSheetButtons(this.childOpts,this.value),cssClass:["select-action-sheet",t.cssClass]});return u.create(i)}async openAlert(){const e=this.interfaceOptions,t=this.multiple?"checkbox":"radio",i=E(this),l=Object.assign(Object.assign({mode:i},e),{header:e.header?e.header:this.labelText,inputs:this.createAlertInputs(this.childOpts,t,this.value),buttons:[{text:this.cancelText,role:"cancel",handler:()=>{this.ionCancel.emit()}},{text:this.okText,handler:e=>{this.setValue(e)}}],cssClass:["select-alert",e.cssClass,this.multiple?"multiple-select-alert":"single-select-alert"]});return x.create(l)}openModal(){const{multiple:e,value:t,interfaceOptions:i}=this,l=E(this),o=Object.assign(Object.assign({},i),{mode:l,cssClass:["select-modal",i.cssClass],component:"ion-select-modal",componentProps:{header:i.header,cancelText:this.cancelText,multiple:e,value:t,options:this.createOverlaySelectOptions(this.childOpts,t)}});return v.create(o)}close(){return this.overlay?this.overlay.dismiss():Promise.resolve(!1)}hasValue(){return""!==this.getText()}get childOpts(){return Array.from(this.el.querySelectorAll("ion-select-option"))}get labelText(){const{label:e}=this;if(void 0!==e)return e;const{labelSlot:t}=this;return null!==t?t.textContent:void 0}getText(){const e=this.selectedText;return null!=e&&""!==e?e:X(this.childOpts,this.value,this.compareWith)}setFocus(){this.focusEl&&this.focusEl.focus()}emitStyle(){const{disabled:e}=this;this.ionStyle.emit({"interactive-disabled":e})}renderLabel(){const{label:e}=this;return o("div",{class:{"label-text-wrapper":!0,"label-text-wrapper-hidden":!this.hasLabel},part:"label"},void 0===e?o("slot",{name:"label"}):o("div",{class:"label-text"},e))}componentDidRender(){var e;null===(e=this.notchController)||void 0===e||e.calculateNotchWidth()}get labelSlot(){return this.el.querySelector('[slot="label"]')}get hasLabel(){return void 0!==this.label||null!==this.labelSlot}renderLabelContainer(){return"md"===E(this)&&"outline"===this.fill?[o("div",{class:"select-outline-container"},o("div",{class:"select-outline-start"}),o("div",{class:{"select-outline-notch":!0,"select-outline-notch-hidden":!this.hasLabel}},o("div",{class:"notch-spacer","aria-hidden":"true",ref:e=>this.notchSpacerEl=e},this.label)),o("div",{class:"select-outline-end"})),this.renderLabel()]:this.renderLabel()}renderSelectText(){const{placeholder:e}=this;let t=!1,i=this.getText();return""===i&&void 0!==e&&(i=e,t=!0),o("div",{"aria-hidden":"true",class:{"select-text":!0,"select-placeholder":t},part:t?"placeholder":"text"},i)}renderSelectIcon(){const e=E(this),{isExpanded:t,toggleIcon:i,expandedIcon:l}=this;let s;return s=t&&void 0!==l?l:null!=i?i:"ios"===e?z:C,o("ion-icon",{class:"select-icon",part:"icon","aria-hidden":"true",icon:s})}get ariaLabel(){var e;const{placeholder:t,inheritedAttributes:i}=this,l=this.getText(),o=null!==(e=i["aria-label"])&&void 0!==e?e:this.labelText;let s=l;return""===s&&void 0!==t&&(s=t),void 0!==o&&(s=""===s?o:`${o}, ${s}`),s}renderListbox(){const{disabled:e,inputId:t,isExpanded:i,required:l}=this;return o("button",{disabled:e,id:t,"aria-label":this.ariaLabel,"aria-haspopup":"dialog","aria-expanded":""+i,"aria-describedby":this.hintTextId,"aria-invalid":this.isInvalid?"true":void 0,"aria-required":""+l,onFocus:this.onFocus,onBlur:this.onBlur,ref:e=>this.focusEl=e})}getHintTextId(){const{helperText:e,errorText:t,helperTextId:i,errorTextId:l,isInvalid:o}=this;return o&&t?l:e?i:void 0}renderHintText(){const{helperText:e,errorText:t,helperTextId:i,errorTextId:l,isInvalid:s}=this;return[o("div",{id:i,class:"helper-text",part:"supporting-text helper-text","aria-live":"polite"},s?null:e),o("div",{id:l,class:"error-text",part:"supporting-text error-text",role:"alert"},s?t:null)]}renderBottomContent(){const{helperText:e,errorText:t}=this;if(e||t)return o("div",{class:"select-bottom",part:"bottom"},this.renderHintText())}render(){const{disabled:e,el:t,isExpanded:i,expandedIcon:l,labelPlacement:a,justify:r,placeholder:n,fill:c,shape:d,name:p,value:h,hasFocus:b}=this,g=E(this),f="floating"===a||"stacked"===a,u=!f&&void 0!==r,x=w(t)?"rtl":"ltr",v=k("ion-item",this.el),j="md"===g&&"outline"!==c&&!v,z=this.hasValue(),C=null!==t.querySelector('[slot="start"], [slot="end"]');m(!0,t,p,U(h),e);const T="stacked"===a||"floating"===a&&(z||i||C);return o(s,{key:"5f4ee901b65554eacc9fa52230d06b1a5ff1247c",onClick:this.onClick,class:y(this.color,{[g]:!0,"in-item":v,"in-item-color":k("ion-item.ion-color",t),"select-disabled":e,"select-expanded":i,"has-expanded-icon":void 0!==l,"has-value":z,"label-floating":T,"has-placeholder":void 0!==n,"has-focus":b,"ion-focusable":!0,["select-"+x]:!0,["select-fill-"+c]:void 0!==c,["select-justify-"+r]:u,["select-shape-"+d]:void 0!==d,["select-label-placement-"+a]:!0})},o("label",{key:"d56d89b5b58da2b5eaebada9d1be58ca45c67806",class:"select-wrapper",id:"select-label",onClick:this.onLabelClick,part:"wrapper"},this.renderLabelContainer(),o("div",{key:"bc8bf089c693781ad5b3a5db76a12223867d748e",class:"select-wrapper-inner",part:"inner"},o("slot",{key:"e1c12b96f1573eb192608c458ed1f3463174cd89",name:"start"}),o("div",{key:"6ee5e3900d8e462f175649b502ac6faa2f2b9909",class:"native-wrapper",ref:e=>this.nativeWrapperEl=e,part:"container"},this.renderSelectText(),this.renderListbox()),o("slot",{key:"faeaea34aad412e1458beab95d4b1b9ca7b87c41",name:"end"}),!f&&this.renderSelectIcon()),f&&this.renderSelectIcon(),j&&o("div",{key:"aeff51e51c990844869eff9940575ce6b2223135",class:"select-highlight"})),this.renderBottomContent())}get el(){return this}static get watchers(){return{disabled:[{styleChanged:0}],isExpanded:[{styleChanged:0}],placeholder:[{styleChanged:0}],value:[{styleChanged:0}]}}static get style(){return{ios:":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}",md:":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}"}}},[289,"ion-select",{cancelText:[1,"cancel-text"],color:[513],compareWith:[1,"compare-with"],disabled:[4],fill:[1],errorText:[1,"error-text"],helperText:[1,"helper-text"],interface:[1],interfaceOptions:[8,"interface-options"],justify:[1],label:[1],labelPlacement:[1,"label-placement"],multiple:[4],name:[1],okText:[1,"ok-text"],placeholder:[1],selectedText:[1,"selected-text"],toggleIcon:[1,"toggle-icon"],expandedIcon:[1,"expanded-icon"],shape:[1],value:[1032],required:[4],isExpanded:[32],hasFocus:[32],isInvalid:[32],hintTextId:[32],open:[64]},void 0,{disabled:[{styleChanged:0}],isExpanded:[{styleChanged:0}],placeholder:[{styleChanged:0}],value:[{styleChanged:0}]}]),R=e=>{const t=e.value;return void 0===t?e.textContent||"":t},U=e=>{if(null!=e)return Array.isArray(e)?e.join(","):""+e},X=(e,t,i)=>void 0===t?"":Array.isArray(t)?t.map((t=>Z(e,t,i))).filter((e=>null!==e)).join(", "):Z(e,t,i)||"",Z=(e,t,i)=>{const l=e.find((e=>p(t,R(e),i)));return l?l.textContent:null};let _=0;const ee="select-interface-option",te=Q,ie=function(){"undefined"!=typeof customElements&&["ion-select","ion-action-sheet","ion-alert","ion-backdrop","ion-button","ion-buttons","ion-checkbox","ion-content","ion-header","ion-icon","ion-item","ion-label","ion-list","ion-list-header","ion-modal","ion-popover","ion-radio","ion-radio-group","ion-ripple-effect","ion-select-modal","ion-select-popover","ion-title","ion-toolbar"].forEach((e=>{switch(e){case"ion-select":customElements.get(a(e))||customElements.define(a(e),Q);break;case"ion-action-sheet":customElements.get(a(e))||T();break;case"ion-alert":customElements.get(a(e))||O();break;case"ion-backdrop":customElements.get(a(e))||I();break;case"ion-button":customElements.get(a(e))||A();break;case"ion-buttons":customElements.get(a(e))||B();break;case"ion-checkbox":customElements.get(a(e))||D();break;case"ion-content":customElements.get(a(e))||P();break;case"ion-header":customElements.get(a(e))||S();break;case"ion-icon":customElements.get(a(e))||Y();break;case"ion-item":customElements.get(a(e))||F();break;case"ion-label":customElements.get(a(e))||L();break;case"ion-list":customElements.get(a(e))||W();break;case"ion-list-header":customElements.get(a(e))||$();break;case"ion-modal":customElements.get(a(e))||q();break;case"ion-popover":customElements.get(a(e))||K();break;case"ion-radio":customElements.get(a(e))||d();break;case"ion-radio-group":customElements.get(a(e))||M();break;case"ion-ripple-effect":customElements.get(a(e))||V();break;case"ion-select-modal":customElements.get(a(e))||H();break;case"ion-select-popover":customElements.get(a(e))||J();break;case"ion-title":customElements.get(a(e))||N();break;case"ion-toolbar":customElements.get(a(e))||G()}}))};export{te as IonSelect,ie as defineCustomElement}
|