@ionic/core 8.8.19-dev.11787007863.1976a30e → 8.8.19-dev.11787083540.1511caf2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/index.js +1 -1
- package/components/ion-accordion-group.js +1 -1
- package/components/ion-accordion.js +1 -1
- package/components/ion-action-sheet.js +1 -1
- package/components/ion-alert.js +1 -1
- package/components/ion-app.js +1 -1
- package/components/ion-avatar.js +1 -1
- package/components/ion-back-button.js +1 -1
- package/components/ion-backdrop.js +1 -1
- package/components/ion-badge.js +1 -1
- package/components/ion-breadcrumb.js +1 -1
- package/components/ion-breadcrumbs.js +1 -1
- package/components/ion-button.js +1 -1
- package/components/ion-buttons.js +1 -1
- package/components/ion-card-content.js +1 -1
- package/components/ion-card-header.js +1 -1
- package/components/ion-card-subtitle.js +1 -1
- package/components/ion-card-title.js +1 -1
- package/components/ion-card.js +1 -1
- package/components/ion-checkbox.js +1 -1
- package/components/ion-chip.js +1 -1
- package/components/ion-col.js +1 -1
- package/components/ion-content.js +1 -1
- package/components/ion-datetime-button.js +1 -1
- package/components/ion-datetime.js +1 -1
- package/components/ion-fab-button.js +1 -1
- package/components/ion-fab-list.js +1 -1
- package/components/ion-fab.js +1 -1
- package/components/ion-footer.js +1 -1
- package/components/ion-grid.js +1 -1
- package/components/ion-header.js +1 -1
- package/components/ion-icon.js +1 -1
- package/components/ion-img.js +1 -1
- package/components/ion-infinite-scroll-content.js +1 -1
- package/components/ion-infinite-scroll.js +1 -1
- package/components/ion-input-otp.js +1 -1
- package/components/ion-input-password-toggle.js +1 -1
- package/components/ion-input.js +1 -1
- package/components/ion-item-divider.js +1 -1
- package/components/ion-item-group.js +1 -1
- package/components/ion-item-option.js +1 -1
- package/components/ion-item-options.js +1 -1
- package/components/ion-item-sliding.js +1 -1
- package/components/ion-item.js +1 -1
- package/components/ion-label.js +1 -1
- package/components/ion-list-header.js +1 -1
- package/components/ion-list.js +1 -1
- package/components/ion-loading.js +1 -1
- package/components/ion-menu-button.js +1 -1
- package/components/ion-menu-toggle.js +1 -1
- package/components/ion-menu.js +1 -1
- package/components/ion-modal.js +1 -1
- package/components/ion-nav-link.js +1 -1
- package/components/ion-nav.js +1 -1
- package/components/ion-note.js +1 -1
- package/components/ion-picker-column-option.js +1 -1
- package/components/ion-picker-column.js +1 -1
- package/components/ion-picker-legacy-column.d.ts +11 -0
- package/components/ion-picker-legacy-column.js +4 -0
- package/components/ion-picker-legacy.d.ts +11 -0
- package/components/ion-picker-legacy.js +4 -0
- package/components/ion-picker.js +1 -1
- package/components/ion-popover.js +1 -1
- package/components/ion-progress-bar.js +1 -1
- package/components/ion-radio-group.js +1 -1
- package/components/ion-radio.js +1 -1
- package/components/ion-range.js +1 -1
- package/components/ion-refresher-content.js +1 -1
- package/components/ion-refresher.js +1 -1
- package/components/ion-reorder-group.js +1 -1
- package/components/ion-reorder.js +1 -1
- package/components/ion-ripple-effect.js +1 -1
- package/components/ion-route-redirect.js +1 -1
- package/components/ion-route.js +1 -1
- package/components/ion-router-link.js +1 -1
- package/components/ion-router-outlet.js +1 -1
- package/components/ion-router.js +1 -1
- package/components/ion-row.js +1 -1
- package/components/ion-searchbar.js +1 -1
- package/components/ion-segment-button.js +1 -1
- package/components/ion-segment-content.js +1 -1
- package/components/ion-segment-view.js +1 -1
- package/components/ion-segment.js +1 -1
- package/components/ion-select-modal.js +1 -1
- package/components/ion-select-option.js +1 -1
- package/components/ion-select-popover.js +1 -1
- package/components/ion-select.js +1 -1
- package/components/ion-skeleton-text.js +1 -1
- package/components/ion-spinner.js +1 -1
- package/components/ion-split-pane.js +1 -1
- package/components/ion-tab-bar.js +1 -1
- package/components/ion-tab-button.js +1 -1
- package/components/ion-tab.js +1 -1
- package/components/ion-tabs.js +1 -1
- package/components/ion-text.js +1 -1
- package/components/ion-textarea.js +1 -1
- package/components/ion-thumbnail.js +1 -1
- package/components/ion-title.js +1 -1
- package/components/ion-toast.js +1 -1
- package/components/ion-toggle.js +1 -1
- package/components/ion-toolbar.js +1 -1
- package/components/{p-DV85C0e0.js → p--JUspHvy.js} +1 -1
- package/components/p-0LM2oPMC.js +4 -0
- package/components/{p-_0JhwClE.js → p-6J0vc7Z8.js} +1 -1
- package/components/p-9GFIh9p1.js +4 -0
- package/components/p-B21528L5.js +4 -0
- package/components/p-B2nSfLHH.js +4 -0
- package/components/p-B3qf4bEn.js +4 -0
- package/components/p-B9jFTlwE.js +4 -0
- package/components/p-BDd9Zrb9.js +4 -0
- package/components/p-BLmJ0zRm.js +4 -0
- package/components/p-BMYNBJgf.js +4 -0
- package/components/p-BRYd8D-I.js +4 -0
- package/components/p-BSEgsdFI.js +4 -0
- package/components/p-BTEOs1at.js +4 -0
- package/components/p-BTJrYwxN.js +4 -0
- package/components/p-BV-zKay-.js +4 -0
- package/components/p-BYRVyMu9.js +4 -0
- package/components/{p-DwpKZ6rl.js → p-BkKAANMJ.js} +1 -1
- package/components/p-Bmq8qlkW.js +4 -0
- package/components/p-BuxQcfHK.js +4 -0
- package/components/p-Bz0dSlXZ.js +4 -0
- package/components/p-C7II1iDj.js +4 -0
- package/components/p-CHqRYvYm.js +4 -0
- package/components/p-CSZf8_j0.js +4 -0
- package/components/p-CTdRooFV.js +4 -0
- package/components/p-Cf2jSDS8.js +4 -0
- package/components/p-Cfx4M1Bn.js +4 -0
- package/components/p-CgkrslTX.js +4 -0
- package/components/p-CiCzYG2V.js +4 -0
- package/{dist/ionic/p-BkfAWuv6.js → components/p-Ck0lEczL.js} +1 -1
- package/components/p-CmR5uXej.js +4 -0
- package/components/p-CniZht3v.js +4 -0
- package/components/p-CsaojgEs.js +4 -0
- package/components/p-CtWGkNnJ.js +4 -0
- package/components/p-D13Eaw-8.js +4 -0
- package/components/p-D4FYu-4R.js +4 -0
- package/components/p-D6Ynv7Xh.js +4 -0
- package/components/p-DARjq3GM.js +4 -0
- package/components/p-DEZ2myA3.js +4 -0
- package/components/p-DOFCbuQR.js +4 -0
- package/components/p-DVe41iHI.js +4 -0
- package/components/p-DX5m9g56.js +4 -0
- package/components/p-DboHi2CL.js +4 -0
- package/components/p-DiVJyqlX.js +4 -0
- package/components/p-DmzFY5IC.js +4 -0
- package/components/{p-ryyf_ItD.js → p-DqLB8yFQ.js} +1 -1
- package/components/p-DqZAXv2t.js +4 -0
- package/components/p-Dv8w0kqz.js +4 -0
- package/components/p-Dw7GNDKq.js +4 -0
- package/components/p-Dww01PNs.js +4 -0
- package/components/p-Gy276IJk.js +4 -0
- package/components/p-ZzLXTvyt.js +4 -0
- package/components/p-cyNmxje6.js +4 -0
- package/components/p-j5IxBIan.js +4 -0
- package/components/p-k_E4tX5Z.js +4 -0
- package/components/p-lVAbdiAu.js +4 -0
- package/components/p-o8OKV5aD.js +4 -0
- package/components/{p-30_sZS2V.js → p-qMmFisyx.js} +1 -1
- package/components/p-rCa2eL0j.js +4 -0
- package/dist/cjs/{animation-C0mOHzej.js → animation-Ch16T-Nb.js} +4 -4
- package/dist/cjs/{app-globals-BREG4twP.js → app-globals-Dd89e0MR.js} +1 -1
- package/dist/cjs/{button-active-BKj1rdFx.js → button-active-AWp_ygDP.js} +3 -3
- package/dist/cjs/config-D6C-KlA9.js +201 -0
- package/dist/cjs/dir-DD0jPVH3.js +31 -0
- package/dist/cjs/{format-pp0Du3K-.js → format-BUFWn4Bn.js} +30 -40
- package/dist/cjs/{framework-delegate-NTLQ5YzV.js → framework-delegate-CEzl4MEA.js} +7 -5
- package/dist/cjs/{gesture-controller-BDUH7687.js → gesture-controller-dtqlP_q4.js} +8 -15
- package/dist/cjs/{haptic-Ch-X4gRx.js → haptic-ClPPQ_PS.js} +3 -2
- package/dist/cjs/{hardware-back-button-fqpYh-kd.js → hardware-back-button-CXmUnTJC.js} +4 -4
- package/dist/cjs/{helpers-CaLhEmTE.js → helpers-DdZyl6WL.js} +15 -11
- package/dist/cjs/{index-P1nQxrpZ.js → index-BJ2-LydH.js} +7 -36
- package/dist/cjs/{index-uvry__L4.js → index-BfaXsATC.js} +14 -31
- package/dist/cjs/{index-D48vawBq.js → index-CD92bI7B.js} +2 -2
- package/dist/cjs/{index-Ck9advCT.js → index-CukZnH1U.js} +5 -5
- package/dist/cjs/{index-D2X6b92x.js → index-DOiZqxWZ.js} +7 -6
- package/dist/cjs/{index-wOmugbdg.js → index-DqmRDbxg.js} +1 -1
- package/dist/cjs/{index-BlshL9ib.js → index-MWAIyVLl.js} +3 -2
- package/dist/cjs/index.cjs.js +19 -18
- package/dist/cjs/{input-shims-DvHAFqiP.js → input-shims-CPKgrIe3.js} +12 -9
- package/dist/cjs/input.utils-DQaUGGed.js +150 -0
- package/dist/cjs/ion-accordion_2.cjs.entry.js +341 -368
- package/dist/cjs/ion-action-sheet.cjs.entry.js +77 -187
- package/dist/cjs/ion-alert.cjs.entry.js +112 -273
- package/dist/cjs/ion-app_8.cjs.entry.js +190 -307
- package/dist/cjs/ion-avatar_3.cjs.entry.js +4 -10
- package/dist/cjs/ion-back-button.cjs.entry.js +24 -47
- package/dist/cjs/ion-backdrop.cjs.entry.js +14 -18
- package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +122 -199
- package/dist/cjs/ion-button_2.cjs.entry.js +67 -138
- package/dist/cjs/ion-card_5.cjs.entry.js +31 -82
- package/dist/cjs/ion-checkbox.cjs.entry.js +102 -152
- package/dist/cjs/ion-chip.cjs.entry.js +11 -17
- package/dist/cjs/ion-col_3.cjs.entry.js +10 -134
- package/dist/cjs/ion-datetime-button.cjs.entry.js +242 -253
- package/dist/cjs/ion-datetime_3.cjs.entry.js +3167 -0
- package/dist/cjs/ion-fab_3.cjs.entry.js +82 -139
- package/dist/cjs/ion-img.cjs.entry.js +13 -34
- package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js +73 -100
- package/dist/cjs/ion-input-otp.cjs.entry.js +372 -435
- package/dist/cjs/ion-input-password-toggle.cjs.entry.js +22 -36
- package/dist/cjs/ion-input.cjs.entry.js +212 -343
- package/dist/cjs/ion-item-option_3.cjs.entry.js +55 -94
- package/dist/cjs/ion-item_8.cjs.entry.js +93 -191
- package/dist/cjs/ion-loading.cjs.entry.js +61 -146
- package/dist/cjs/ion-menu_3.cjs.entry.js +109 -170
- package/dist/cjs/ion-modal.cjs.entry.js +262 -455
- package/dist/cjs/ion-nav_2.cjs.entry.js +159 -101
- package/dist/cjs/ion-picker-column-option.cjs.entry.js +34 -37
- package/dist/cjs/ion-picker-column.cjs.entry.js +406 -417
- package/dist/cjs/ion-picker.cjs.entry.js +393 -401
- package/dist/cjs/ion-popover.cjs.entry.js +206 -319
- package/dist/cjs/ion-progress-bar.cjs.entry.js +26 -31
- package/dist/cjs/ion-radio_2.cjs.entry.js +135 -207
- package/dist/cjs/ion-range.cjs.entry.js +237 -302
- package/dist/cjs/ion-refresher_2.cjs.entry.js +94 -165
- package/dist/cjs/ion-reorder_2.cjs.entry.js +24 -53
- package/dist/cjs/ion-ripple-effect.cjs.entry.js +14 -14
- package/dist/cjs/ion-route_4.cjs.entry.js +72 -175
- package/dist/cjs/ion-searchbar.cjs.entry.js +200 -291
- package/dist/cjs/ion-segment-content.cjs.entry.js +2 -2
- package/dist/cjs/ion-segment-view.cjs.entry.js +17 -28
- package/dist/cjs/ion-segment_2.cjs.entry.js +126 -169
- package/dist/cjs/ion-select-modal.cjs.entry.js +49 -104
- package/dist/cjs/ion-select_3.cjs.entry.js +260 -787
- package/dist/cjs/ion-spinner.cjs.entry.js +10 -24
- package/dist/cjs/ion-split-pane.cjs.entry.js +16 -29
- package/dist/cjs/ion-tab-bar_2.cjs.entry.js +42 -100
- package/dist/cjs/ion-tab_2.cjs.entry.js +28 -53
- package/dist/cjs/ion-text.cjs.entry.js +5 -11
- package/dist/cjs/ion-textarea.cjs.entry.js +189 -296
- package/dist/cjs/ion-toast.cjs.entry.js +118 -236
- package/dist/cjs/ion-toggle.cjs.entry.js +122 -175
- package/dist/cjs/{ionic-global-k6hOWWpn.js → ionic-global-BerQGEpE.js} +8 -13
- package/dist/cjs/ionic.cjs.js +4 -4
- package/dist/cjs/{ios.transition-KvuRAe2W.js → ios.transition-CTiTDh3m.js} +18 -13
- package/dist/cjs/{item-multiple-inputs-BdYSbfKN.js → item-multiple-inputs-jOJZE_I0.js} +1 -1
- package/dist/cjs/{keyboard-cHxZlTyz.js → keyboard-UuAS4D_9.js} +2 -2
- package/dist/cjs/{keyboard-controller-PtZoN2GS.js → keyboard-controller-GXBiBRKS.js} +6 -6
- package/dist/cjs/{keyboard-Cix5TVkD.js → keyboard-hHzlEQpk.js} +2 -2
- package/dist/cjs/loader.cjs.js +4 -4
- package/dist/cjs/{md.transition-Bjl5Ozph.js → md.transition-BpiTAaqF.js} +9 -7
- package/dist/cjs/notch-controller-aiy8aQb-.js +155 -0
- package/dist/cjs/{overlays-IlP4H2Gn.js → overlays-CQ_c1fko.js} +33 -48
- package/dist/cjs/{status-tap-BR_ujYHg.js → status-tap-7FzRlXNr.js} +4 -3
- package/dist/cjs/{swipe-back-DzQKEl5g.js → swipe-back-DwTZiAc9.js} +5 -5
- package/dist/cjs/{theme-Bw0rpaNN.js → theme-CeDs6Hcv.js} +1 -6
- package/dist/collection/collection-manifest.json +10 -6
- package/dist/collection/components/accordion/accordion.js +312 -315
- package/dist/collection/components/accordion-group/accordion-group.js +25 -48
- package/dist/collection/components/action-sheet/action-sheet.ios.css +2 -228
- package/dist/collection/components/action-sheet/action-sheet.js +64 -173
- package/dist/collection/components/action-sheet/action-sheet.md.css +2 -174
- package/dist/collection/components/action-sheet/test/basic/fixture.js +0 -3
- package/dist/collection/components/alert/alert.ios.css +10 -279
- package/dist/collection/components/alert/alert.js +97 -257
- package/dist/collection/components/alert/alert.md.css +20 -268
- package/dist/collection/components/app/app.js +0 -3
- package/dist/collection/components/back-button/back-button.js +19 -42
- package/dist/collection/components/backdrop/backdrop.js +14 -16
- package/dist/collection/components/badge/badge.js +0 -6
- package/dist/collection/components/breadcrumb/breadcrumb.js +30 -91
- package/dist/collection/components/breadcrumbs/breadcrumbs.js +88 -103
- package/dist/collection/components/button/button.js +61 -132
- package/dist/collection/components/buttons/buttons.js +15 -13
- package/dist/collection/components/card/card.js +21 -54
- package/dist/collection/components/card-header/card-header.js +8 -12
- package/dist/collection/components/card-subtitle/card-subtitle.js +0 -6
- package/dist/collection/components/card-title/card-title.js +0 -6
- package/dist/collection/components/checkbox/checkbox.js +97 -147
- package/dist/collection/components/chip/chip.js +10 -14
- package/dist/collection/components/col/col.js +3 -127
- package/dist/collection/components/content/content.js +64 -93
- package/dist/collection/components/datetime/datetime.ios.css +2 -42
- package/dist/collection/components/datetime/datetime.js +816 -1051
- package/dist/collection/components/datetime/datetime.md.css +1 -42
- package/dist/collection/components/datetime/utils/data.js +14 -13
- package/dist/collection/components/datetime/utils/format.js +11 -21
- package/dist/collection/components/datetime/utils/manipulation.js +8 -8
- package/dist/collection/components/datetime/utils/parse.js +10 -10
- package/dist/collection/components/datetime/utils/state.js +2 -8
- package/dist/collection/components/datetime/utils/validate.js +5 -4
- package/dist/collection/components/datetime-button/datetime-button.ios.css +0 -5
- package/dist/collection/components/datetime-button/datetime-button.js +237 -247
- package/dist/collection/components/datetime-button/datetime-button.md.css +0 -5
- package/dist/collection/components/fab/fab.js +13 -20
- package/dist/collection/components/fab-button/fab-button.js +55 -104
- package/dist/collection/components/fab-list/fab-list.js +11 -10
- package/dist/collection/components/footer/footer.js +44 -50
- package/dist/collection/components/grid/grid.js +6 -4
- package/dist/collection/components/header/header.js +25 -35
- package/dist/collection/components/img/img.js +10 -34
- package/dist/collection/components/infinite-scroll/infinite-scroll.js +66 -73
- package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js +3 -20
- package/dist/collection/components/input/input.ios.css +26 -57
- package/dist/collection/components/input/input.js +206 -336
- package/dist/collection/components/input/input.md.css +43 -79
- package/dist/collection/components/input-otp/input-otp.js +368 -430
- package/dist/collection/components/input-password-toggle/input-password-toggle.js +19 -32
- package/dist/collection/components/item/item.js +53 -99
- package/dist/collection/components/item-divider/item-divider.js +12 -17
- package/dist/collection/components/item-group/item-group.js +1 -1
- package/dist/collection/components/item-option/item-option.js +22 -50
- package/dist/collection/components/item-options/item-options.js +8 -11
- package/dist/collection/components/item-sliding/item-sliding.js +21 -27
- package/dist/collection/components/label/label.js +6 -26
- package/dist/collection/components/list/list.js +8 -11
- package/dist/collection/components/list-header/list-header.js +2 -12
- package/dist/collection/components/loading/loading.js +51 -135
- package/dist/collection/components/menu/menu.js +63 -105
- package/dist/collection/components/menu-button/menu-button.js +21 -30
- package/dist/collection/components/menu-toggle/menu-toggle.js +15 -22
- package/dist/collection/components/modal/animations/ios.enter.js +1 -1
- package/dist/collection/components/modal/animations/md.enter.js +1 -1
- package/dist/collection/components/modal/gestures/sheet.js +10 -22
- package/dist/collection/components/modal/gestures/swipe-to-close.js +3 -15
- package/dist/collection/components/modal/modal.js +228 -398
- package/dist/collection/components/modal/safe-area-utils.js +7 -6
- package/dist/collection/components/modal/test/fixtures.js +0 -3
- package/dist/collection/components/nav/nav.js +247 -69
- package/dist/collection/components/nav/view-controller.js +1 -7
- package/dist/collection/components/nav-link/nav-link.js +10 -21
- package/dist/collection/components/note/note.js +2 -8
- package/dist/collection/components/picker/picker.js +390 -398
- package/dist/collection/components/picker-column/picker-column.css +0 -3
- package/dist/collection/components/picker-column/picker-column.js +404 -414
- package/dist/collection/components/picker-column-option/picker-column-option.js +31 -33
- package/dist/collection/components/picker-column-option/picker-column-option.md.css +1 -6
- package/dist/collection/components/picker-legacy/animations/ios.enter.js +27 -0
- package/dist/collection/components/picker-legacy/animations/ios.leave.js +23 -0
- package/dist/collection/components/picker-legacy/picker-interface.js +1 -0
- package/dist/collection/components/picker-legacy/picker.ios.css +300 -0
- package/dist/collection/components/picker-legacy/picker.js +890 -0
- package/dist/collection/components/picker-legacy/picker.md.css +287 -0
- package/dist/collection/components/picker-legacy-column/picker-column.ios.css +231 -0
- package/dist/collection/components/picker-legacy-column/picker-column.js +422 -0
- package/dist/collection/components/picker-legacy-column/picker-column.md.css +222 -0
- package/dist/collection/components/picker-legacy-column/test/test.utils.js +43 -0
- package/dist/collection/components/popover/animations/ios.enter.js +2 -1
- package/dist/collection/components/popover/animations/md.enter.js +2 -1
- package/dist/collection/components/popover/popover.ios.css +0 -15
- package/dist/collection/components/popover/popover.js +185 -302
- package/dist/collection/components/popover/popover.md.css +0 -15
- package/dist/collection/components/popover/test/fixture.js +0 -1
- package/dist/collection/components/popover/utils.js +6 -4
- package/dist/collection/components/progress-bar/progress-bar.js +23 -27
- package/dist/collection/components/radio/radio.js +66 -102
- package/dist/collection/components/radio-group/radio-group.js +66 -101
- package/dist/collection/components/radio-group/test/fixtures.js +0 -2
- package/dist/collection/components/range/range.js +232 -296
- package/dist/collection/components/refresher/refresher.js +78 -110
- package/dist/collection/components/refresher-content/refresher-content.js +4 -41
- package/dist/collection/components/reorder/reorder.js +1 -2
- package/dist/collection/components/reorder-group/reorder-group.js +15 -44
- package/dist/collection/components/ripple-effect/ripple-effect.js +13 -12
- package/dist/collection/components/route/route.js +10 -39
- package/dist/collection/components/route-redirect/route-redirect.js +0 -31
- package/dist/collection/components/router/router.js +33 -37
- package/dist/collection/components/router/utils/dom.js +7 -25
- package/dist/collection/components/router/utils/matching.js +9 -7
- package/dist/collection/components/router/utils/parser.js +1 -1
- package/dist/collection/components/router/utils/path.js +1 -0
- package/dist/collection/components/router-link/router-link.js +12 -37
- package/dist/collection/components/router-outlet/router-outlet.js +21 -82
- package/dist/collection/components/row/row.js +1 -1
- package/dist/collection/components/searchbar/searchbar.js +199 -289
- package/dist/collection/components/segment/segment.js +85 -120
- package/dist/collection/components/segment-button/segment-button.js +37 -43
- package/dist/collection/components/segment-content/segment-content.js +1 -1
- package/dist/collection/components/segment-view/segment-view.js +16 -26
- package/dist/collection/components/select/select.ios.css +69 -96
- package/dist/collection/components/select/select.js +213 -629
- package/dist/collection/components/select/select.md.css +85 -118
- package/dist/collection/components/select-modal/select-modal.ios.css +0 -218
- package/dist/collection/components/select-modal/select-modal.js +38 -92
- package/dist/collection/components/select-modal/select-modal.md.css +0 -164
- package/dist/collection/components/select-modal/test/fixtures.js +1 -8
- package/dist/collection/components/select-option/select-option.js +9 -110
- package/dist/collection/components/select-popover/select-popover.ios.css +0 -218
- package/dist/collection/components/select-popover/select-popover.js +36 -103
- package/dist/collection/components/select-popover/select-popover.md.css +0 -164
- package/dist/collection/components/select-popover/test/fixtures.js +1 -8
- package/dist/collection/components/skeleton-text/skeleton-text.js +8 -12
- package/dist/collection/components/spinner/spinner.js +9 -21
- package/dist/collection/components/split-pane/split-pane.js +15 -27
- package/dist/collection/components/tab/tab.js +6 -17
- package/dist/collection/components/tab-bar/tab-bar.js +14 -32
- package/dist/collection/components/tab-button/tab-button.js +23 -62
- package/dist/collection/components/tabs/tabs.js +20 -33
- package/dist/collection/components/text/text.js +2 -8
- package/dist/collection/components/textarea/textarea.ios.css +62 -94
- package/dist/collection/components/textarea/textarea.js +181 -287
- package/dist/collection/components/textarea/textarea.md.css +77 -103
- package/dist/collection/components/thumbnail/thumbnail.js +1 -1
- package/dist/collection/components/title/title.js +2 -18
- package/dist/collection/components/toast/toast.js +106 -223
- package/dist/collection/components/toggle/toggle.js +115 -167
- package/dist/collection/components/toolbar/toolbar.js +7 -15
- package/dist/collection/global/config.js +6 -4
- package/dist/collection/global/ionic-global.js +2 -8
- package/dist/collection/index.js +1 -1
- package/dist/collection/utils/animation/animation.js +3 -3
- package/dist/collection/utils/config.js +4 -5
- package/dist/collection/utils/focus-controller/index.js +1 -1
- package/dist/collection/utils/focus-trap.js +3 -3
- package/dist/collection/utils/forms/index.js +0 -1
- package/dist/collection/utils/framework-delegate.js +6 -4
- package/dist/collection/utils/gesture/gesture-controller.js +8 -15
- package/dist/collection/utils/gesture/index.js +2 -10
- package/dist/collection/utils/gesture/listener.js +4 -27
- package/dist/collection/utils/hardware-back-button.js +3 -3
- package/dist/collection/utils/helpers.js +14 -10
- package/dist/collection/utils/input-shims/hacks/scroll-assist.js +5 -4
- package/dist/collection/utils/input-shims/hacks/scroll-data.js +2 -1
- package/dist/collection/utils/keyboard/keyboard-controller.js +5 -5
- package/dist/collection/utils/keyboard/keyboard.js +1 -1
- package/dist/collection/utils/logging/index.js +4 -23
- package/dist/collection/utils/menu-controller/index.js +2 -1
- package/dist/collection/utils/native/haptic.js +3 -2
- package/dist/collection/utils/native/keyboard.js +2 -2
- package/dist/collection/utils/native/status-bar.js +1 -1
- package/dist/collection/utils/overlays.js +23 -38
- package/dist/collection/utils/platform.js +5 -4
- package/dist/collection/utils/rtl/dir.js +18 -7
- package/dist/collection/utils/sanitization/index.js +20 -276
- package/dist/collection/utils/slot-mutation-controller.js +2 -1
- package/dist/collection/utils/test/playwright/apply-keyboard-focus.js +1 -1
- package/dist/collection/utils/test/playwright/drag-element.js +3 -2
- package/dist/collection/utils/test/playwright/generator.js +4 -3
- package/dist/collection/utils/test/playwright/page/event-spy.js +12 -11
- package/dist/collection/utils/test/playwright/page/utils/goto.js +5 -4
- package/dist/collection/utils/test/playwright/page/utils/set-content.js +1 -1
- package/dist/collection/utils/test/playwright/page/utils/set-ion-viewport.js +3 -2
- package/dist/collection/utils/test/press-keys.js +17 -10
- package/dist/collection/utils/theme.js +1 -6
- package/dist/collection/utils/transition/ios.transition.js +13 -9
- package/dist/collection/utils/transition/md.transition.js +4 -3
- package/dist/docs.json +1256 -556
- package/dist/esm/{animation-CGFdmGk9.js → animation-DLJpuoEz.js} +4 -4
- package/dist/esm/{app-globals-CYmMeGdU.js → app-globals-D0C5S4hU.js} +1 -1
- package/dist/esm/{button-active--80YqSHA.js → button-active-CXXy0FIE.js} +3 -3
- package/dist/esm/config-DQCONYYp.js +195 -0
- package/dist/esm/dir-o8OKV5aD.js +29 -0
- package/dist/esm/{format-Dcwga61t.js → format-CAmvpAez.js} +31 -41
- package/dist/esm/{framework-delegate--ajhSeKH.js → framework-delegate-B9yvYzqV.js} +7 -5
- package/dist/esm/{gesture-controller-TXPDHL13.js → gesture-controller-BTEOs1at.js} +8 -15
- package/dist/esm/{haptic-Cq4UAeka.js → haptic-DzAMWJuk.js} +3 -2
- package/dist/esm/{hardware-back-button-gLJHMX_F.js → hardware-back-button-B93Gru0Y.js} +4 -4
- package/dist/esm/{helpers-DexiPLIC.js → helpers-DkCLSLI9.js} +15 -11
- package/dist/esm/{index-_Za5VB9w.js → index-B_8X7INq.js} +2 -2
- package/dist/esm/{index-DppOcPFQ.js → index-Bck1OwMs.js} +7 -36
- package/dist/esm/{index-BvabGprD.js → index-DV3sJJW8.js} +2 -2
- package/dist/esm/{index-CumkqGQF.js → index-DdeElWma.js} +7 -6
- package/dist/esm/{index-8s8kZKJ7.js → index-Dsz7OTeL.js} +5 -5
- package/dist/esm/{index-BCgUwrV0.js → index-DwNKJodj.js} +3 -2
- package/dist/esm/{index-ChhhtsGZ.js → index-tcQvqkiX.js} +15 -32
- package/dist/esm/index.js +16 -16
- package/dist/esm/{input-shims-BB0AKb_k.js → input-shims-d-hDv86G.js} +12 -9
- package/dist/esm/input.utils-Cd23Gdd1.js +147 -0
- package/dist/esm/ion-accordion_2.entry.js +341 -368
- package/dist/esm/ion-action-sheet.entry.js +77 -187
- package/dist/esm/ion-alert.entry.js +111 -272
- package/dist/esm/ion-app_8.entry.js +190 -307
- package/dist/esm/ion-avatar_3.entry.js +4 -10
- package/dist/esm/ion-back-button.entry.js +24 -47
- package/dist/esm/ion-backdrop.entry.js +14 -18
- package/dist/esm/ion-breadcrumb_2.entry.js +122 -199
- package/dist/esm/ion-button_2.entry.js +67 -138
- package/dist/esm/ion-card_5.entry.js +31 -82
- package/dist/esm/ion-checkbox.entry.js +102 -152
- package/dist/esm/ion-chip.entry.js +11 -17
- package/dist/esm/ion-col_3.entry.js +10 -134
- package/dist/esm/ion-datetime-button.entry.js +242 -253
- package/dist/esm/ion-datetime_3.entry.js +3163 -0
- package/dist/esm/ion-fab_3.entry.js +82 -139
- package/dist/esm/ion-img.entry.js +13 -34
- package/dist/esm/ion-infinite-scroll_2.entry.js +72 -99
- package/dist/esm/ion-input-otp.entry.js +372 -435
- package/dist/esm/ion-input-password-toggle.entry.js +22 -36
- package/dist/esm/ion-input.entry.js +210 -341
- package/dist/esm/ion-item-option_3.entry.js +55 -94
- package/dist/esm/ion-item_8.entry.js +93 -191
- package/dist/esm/ion-loading.entry.js +60 -145
- package/dist/esm/ion-menu_3.entry.js +109 -170
- package/dist/esm/ion-modal.entry.js +262 -455
- package/dist/esm/ion-nav_2.entry.js +159 -101
- package/dist/esm/ion-picker-column-option.entry.js +34 -37
- package/dist/esm/ion-picker-column.entry.js +406 -417
- package/dist/esm/ion-picker.entry.js +393 -401
- package/dist/esm/ion-popover.entry.js +206 -319
- package/dist/esm/ion-progress-bar.entry.js +26 -31
- package/dist/esm/ion-radio_2.entry.js +135 -207
- package/dist/esm/ion-range.entry.js +237 -302
- package/dist/esm/ion-refresher_2.entry.js +92 -163
- package/dist/esm/ion-reorder_2.entry.js +24 -53
- package/dist/esm/ion-ripple-effect.entry.js +14 -14
- package/dist/esm/ion-route_4.entry.js +72 -175
- package/dist/esm/ion-searchbar.entry.js +200 -291
- package/dist/esm/ion-segment-content.entry.js +2 -2
- package/dist/esm/ion-segment-view.entry.js +17 -28
- package/dist/esm/ion-segment_2.entry.js +126 -169
- package/dist/esm/ion-select-modal.entry.js +49 -104
- package/dist/esm/ion-select_3.entry.js +260 -787
- package/dist/esm/ion-spinner.entry.js +10 -24
- package/dist/esm/ion-split-pane.entry.js +16 -29
- package/dist/esm/ion-tab-bar_2.entry.js +42 -100
- package/dist/esm/ion-tab_2.entry.js +28 -53
- package/dist/esm/ion-text.entry.js +5 -11
- package/dist/esm/ion-textarea.entry.js +188 -295
- package/dist/esm/ion-toast.entry.js +117 -235
- package/dist/esm/ion-toggle.entry.js +122 -175
- package/dist/esm/{ionic-global-BVB7BrLT.js → ionic-global-Cp_eT4sZ.js} +8 -13
- package/dist/esm/ionic.js +5 -5
- package/dist/esm/{ios.transition-BdhybwLl.js → ios.transition-CxNhMt4a.js} +18 -13
- package/dist/esm/{item-multiple-inputs-rU8VaNNg.js → item-multiple-inputs-DlNuqNJm.js} +1 -1
- package/dist/esm/{keyboard-DAF8GNJ9.js → keyboard-CUw4ekVy.js} +2 -2
- package/dist/esm/{keyboard-controller-DEwoa1ev.js → keyboard-controller-BaaVITYt.js} +6 -6
- package/dist/esm/{keyboard-Cj8mLJeq.js → keyboard-ywgs5efA.js} +2 -2
- package/dist/esm/loader.js +5 -5
- package/dist/esm/{md.transition-B5lqKGCs.js → md.transition-IE4mC3kp.js} +9 -7
- package/dist/esm/notch-controller-Doqis1td.js +153 -0
- package/dist/esm/{overlays-CjWwtvf1.js → overlays-COCl_nm9.js} +33 -48
- package/dist/esm/{status-tap-DpLhkDWs.js → status-tap-HhO5eQI9.js} +4 -3
- package/dist/esm/{swipe-back-cz4-lyG3.js → swipe-back-DK6afpuO.js} +5 -5
- package/dist/esm/{theme-byZM6qHV.js → theme-DiVJyqlX.js} +1 -6
- package/dist/html.html-data.json +80 -52
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-01f81ea5.entry.js +4 -0
- package/dist/ionic/p-0283ea73.entry.js +4 -0
- package/dist/ionic/p-02ecae65.entry.js +4 -0
- package/dist/ionic/p-0672f677.entry.js +4 -0
- package/dist/ionic/p-0c06fe60.entry.js +4 -0
- package/dist/ionic/p-0fa9c382.entry.js +4 -0
- package/dist/ionic/p-1af4d74c.entry.js +4 -0
- package/dist/ionic/p-1d7ef0d2.entry.js +4 -0
- package/dist/ionic/p-26f05d3a.entry.js +4 -0
- package/dist/ionic/p-27d30585.entry.js +4 -0
- package/dist/ionic/p-2bb2cb18.entry.js +4 -0
- package/dist/ionic/p-31e7bd05.entry.js +4 -0
- package/dist/ionic/p-32f53010.entry.js +4 -0
- package/dist/ionic/p-35eb8b5c.entry.js +4 -0
- package/dist/ionic/p-37e720da.entry.js +4 -0
- package/dist/ionic/p-3efa137b.entry.js +4 -0
- package/dist/ionic/p-432bd72c.entry.js +4 -0
- package/dist/ionic/p-47214c72.entry.js +4 -0
- package/dist/ionic/p-4e172429.entry.js +4 -0
- package/dist/ionic/p-5c3da84e.entry.js +4 -0
- package/dist/ionic/p-5d1da0a2.entry.js +4 -0
- package/dist/ionic/p-5d8082fe.entry.js +4 -0
- package/dist/ionic/p-613d3c43.entry.js +4 -0
- package/dist/ionic/p-616e4d4f.entry.js +4 -0
- package/dist/ionic/p-65d611b2.entry.js +4 -0
- package/dist/ionic/p-67806e3f.entry.js +4 -0
- package/dist/ionic/p-68307fbf.entry.js +4 -0
- package/dist/ionic/p-68cbb2fc.entry.js +4 -0
- package/dist/ionic/p-737ae9eb.entry.js +4 -0
- package/dist/ionic/p-7b0d6248.entry.js +4 -0
- package/dist/ionic/p-7e71e470.entry.js +4 -0
- package/dist/ionic/p-84d5ce05.entry.js +4 -0
- package/dist/ionic/p-85d49987.entry.js +4 -0
- package/dist/ionic/p-8945088b.entry.js +4 -0
- package/dist/ionic/p-8b155568.entry.js +4 -0
- package/dist/ionic/p-90267c4b.entry.js +4 -0
- package/dist/ionic/p-92ad8a67.entry.js +4 -0
- package/dist/ionic/p-9a97d4e0.entry.js +4 -0
- package/dist/ionic/p-9e4b0894.entry.js +4 -0
- package/dist/ionic/p-9eeaBrnk.js +4 -0
- package/dist/ionic/p-B2kaj8sx.js +4 -0
- package/dist/ionic/p-B4y7nxsg.js +4 -0
- package/dist/ionic/p-B8t9Ro6f.js +4 -0
- package/dist/ionic/p-BEOxsxBw.js +4 -0
- package/dist/ionic/p-BJ2NxSHp.js +4 -0
- package/dist/ionic/p-BLiL8g0v.js +4 -0
- package/dist/ionic/p-BTEOs1at.js +4 -0
- package/dist/ionic/p-BUFIpxKM.js +4 -0
- package/dist/ionic/p-BYRVyMu9.js +4 -0
- package/dist/ionic/p-C0eMdTCW.js +4 -0
- package/dist/ionic/p-CKvCXMs9.js +4 -0
- package/dist/ionic/p-CPTv7G9B.js +4 -0
- package/dist/ionic/{p-CQ_4TirR.js → p-Cd4H8ft-.js} +1 -1
- package/dist/ionic/{p-I3In7hMC.js → p-ClM02LPk.js} +1 -1
- package/dist/ionic/p-CtWGkNnJ.js +4 -0
- package/dist/ionic/p-CxMyXUtt.js +4 -0
- package/dist/ionic/p-D13Eaw-8.js +4 -0
- package/dist/ionic/p-DCoy2elM.js +4 -0
- package/dist/ionic/{p-BvabGprD.js → p-DV3sJJW8.js} +1 -1
- package/dist/ionic/p-DZaO33Mw.js +4 -0
- package/dist/ionic/p-DiVJyqlX.js +4 -0
- package/dist/ionic/p-DipZFfzN.js +4 -0
- package/dist/ionic/p-DqN5EA2O.js +4 -0
- package/dist/ionic/p-Dr9fTCb1.js +4 -0
- package/dist/ionic/p-DzWaWHGc.js +4 -0
- package/dist/ionic/p-EkpneKVM.js +4 -0
- package/dist/ionic/p-Nqf6uvGh.js +4 -0
- package/dist/ionic/p-SNAkTDfm.js +4 -0
- package/dist/ionic/p-ab00b0d8.entry.js +4 -0
- package/dist/ionic/p-c2175309.entry.js +4 -0
- package/dist/ionic/p-c4b69d9b.entry.js +4 -0
- package/dist/ionic/p-c4d8641b.entry.js +4 -0
- package/dist/ionic/{p-40424a88.entry.js → p-c6e49f3f.entry.js} +1 -1
- package/dist/ionic/p-ce637936.entry.js +4 -0
- package/dist/ionic/{p-08443c08.entry.js → p-da85e958.entry.js} +1 -1
- package/dist/ionic/p-dfa8d673.entry.js +4 -0
- package/dist/ionic/p-e139357c.entry.js +4 -0
- package/dist/ionic/p-f37ca594.entry.js +4 -0
- package/dist/ionic/p-f8dd336e.entry.js +4 -0
- package/dist/ionic/p-f9de757b.entry.js +4 -0
- package/dist/ionic/p-fe11cf51.entry.js +4 -0
- package/dist/ionic/p-mjKAFv89.js +4 -0
- package/dist/ionic/p-o8OKV5aD.js +4 -0
- package/dist/ionic/p-tcQvqkiX.js +5 -0
- package/dist/types/components/img/img.d.ts +0 -2
- package/dist/types/components/input/input.d.ts +6 -12
- package/dist/types/components/modal/modal-interface.d.ts +0 -9
- package/dist/types/components/modal/modal.d.ts +4 -11
- package/dist/types/components/nav/nav-interface.d.ts +1 -0
- package/dist/types/components/nav/nav.d.ts +22 -2
- package/dist/types/components/picker-legacy/animations/ios.enter.d.ts +5 -0
- package/dist/types/components/picker-legacy/animations/ios.leave.d.ts +5 -0
- package/dist/types/components/picker-legacy/picker-interface.d.ts +52 -0
- package/dist/types/components/picker-legacy/picker.d.ts +158 -0
- package/dist/types/components/picker-legacy-column/picker-column.d.ts +46 -0
- package/dist/types/components/picker-legacy-column/test/test.utils.d.ts +9 -0
- package/dist/types/components/route/route.d.ts +1 -1
- package/dist/types/components/router-outlet/router-outlet.d.ts +0 -7
- package/dist/types/components/searchbar/searchbar.d.ts +1 -1
- package/dist/types/components/select/select-interface.d.ts +0 -31
- package/dist/types/components/select/select.d.ts +6 -30
- package/dist/types/components/select-option/select-option.d.ts +1 -42
- package/dist/types/components/textarea/textarea.d.ts +5 -12
- package/dist/types/components.d.ts +311 -74
- package/dist/types/index.d.ts +1 -1
- package/dist/types/interface.d.ts +1 -0
- package/dist/types/utils/config.d.ts +8 -1
- package/dist/types/utils/forms/index.d.ts +0 -1
- package/dist/types/utils/helpers.d.ts +8 -5
- package/dist/types/utils/logging/index.d.ts +1 -2
- package/dist/types/utils/overlays.d.ts +9 -11
- package/dist/types/utils/rtl/dir.d.ts +10 -4
- package/dist/types/utils/sanitization/index.d.ts +2 -58
- package/dist/types/utils/test/playwright/playwright-page.d.ts +1 -1
- package/dist/types/utils/test/playwright/testExpect.d.ts +1 -1
- package/hydrate/index.js +7265 -10630
- package/hydrate/index.mjs +7265 -10630
- package/package.json +12 -55
- package/components/p--m5cCjbK.js +0 -4
- package/components/p-8FN7p701.js +0 -4
- package/components/p-B-FxiyeI.js +0 -4
- package/components/p-B4uHHhPK.js +0 -4
- package/components/p-BMPN55of.js +0 -4
- package/components/p-BMS4t-kJ.js +0 -4
- package/components/p-BOvLNVKq.js +0 -4
- package/components/p-BSQPZ79H.js +0 -4
- package/components/p-BWBigMsI.js +0 -4
- package/components/p-BZ4-QTes.js +0 -4
- package/components/p-BhamHSw3.js +0 -4
- package/components/p-BjluhQMI.js +0 -4
- package/components/p-BlsIikdZ.js +0 -4
- package/components/p-Blug1Vxu.js +0 -4
- package/components/p-BpG8kBfD.js +0 -4
- package/components/p-BqPNzJf6.js +0 -4
- package/components/p-C5KYjZWD.js +0 -4
- package/components/p-C91npEel.js +0 -4
- package/components/p-C9BGR5fy.js +0 -4
- package/components/p-CD4fmpem.js +0 -4
- package/components/p-CEW4RXZO.js +0 -4
- package/components/p-CKhiNOEg.js +0 -4
- package/components/p-CO2zzh3W.js +0 -4
- package/components/p-CVb3x_r3.js +0 -4
- package/components/p-CWLrHG8Y.js +0 -4
- package/components/p-CbhUdtjf.js +0 -4
- package/components/p-CejmQs3h.js +0 -4
- package/components/p-CfnNZz_d.js +0 -4
- package/components/p-CmKf4pgI.js +0 -4
- package/components/p-Cs5f-uOS.js +0 -4
- package/components/p-D7-vHX0A.js +0 -4
- package/components/p-DKrhJJV0.js +0 -4
- package/components/p-DRfgH82D.js +0 -4
- package/components/p-DSzSbVP2.js +0 -4
- package/components/p-DVKS-ovH.js +0 -4
- package/components/p-DWCzVL3Y.js +0 -4
- package/components/p-Dd8ajo9a.js +0 -4
- package/components/p-DdnhY_oj.js +0 -4
- package/components/p-DgZOZQjJ.js +0 -4
- package/components/p-Dmd2xqCe.js +0 -4
- package/components/p-G0TxqHfe.js +0 -4
- package/components/p-GG5GhznE.js +0 -4
- package/components/p-J-p0EtHR.js +0 -4
- package/components/p-LXu5-6Ti.js +0 -4
- package/components/p-TXPDHL13.js +0 -4
- package/components/p-UQSiXX2Z.js +0 -4
- package/components/p-UuPYCOZE.js +0 -4
- package/components/p-WeeS7GvC.js +0 -4
- package/components/p-_IKFD3ID.js +0 -4
- package/components/p-byZM6qHV.js +0 -4
- package/components/p-hh7qIC-X.js +0 -4
- package/components/p-idq4JFo2.js +0 -4
- package/components/p-qT1szVjw.js +0 -4
- package/components/p-wzAhIh03.js +0 -4
- package/components/p-ypuYdSDB.js +0 -4
- package/components/p-yuj4Nkm_.js +0 -4
- package/dist/cjs/config-CjUbvdPW.js +0 -36
- package/dist/cjs/dir-Brx7VkvP.js +0 -20
- package/dist/cjs/index-B7zJsYWS.js +0 -429
- package/dist/cjs/input.utils-BZdMWVrt.js +0 -35
- package/dist/cjs/ion-datetime.cjs.entry.js +0 -2770
- package/dist/cjs/overlay-control-label-D2sdL2O8.js +0 -50
- package/dist/cjs/select-option-render-pULCGldr.js +0 -123
- package/dist/cjs/slot-mutation-controller-CgTGFqlW.js +0 -397
- package/dist/collection/utils/forms/start-container-controller.js +0 -132
- package/dist/collection/utils/overlay-control-label.js +0 -45
- package/dist/collection/utils/select-option-render.js +0 -118
- package/dist/esm/config-DWCzVL3Y.js +0 -32
- package/dist/esm/dir-B-FxiyeI.js +0 -18
- package/dist/esm/index-CKM1DdGm.js +0 -424
- package/dist/esm/input.utils-B1ValN_N.js +0 -33
- package/dist/esm/ion-datetime.entry.js +0 -2768
- package/dist/esm/overlay-control-label-BSQPZ79H.js +0 -47
- package/dist/esm/select-option-render-C4m76VGH.js +0 -121
- package/dist/esm/slot-mutation-controller-u741eD3Z.js +0 -393
- package/dist/ionic/p-06533d51.entry.js +0 -4
- package/dist/ionic/p-0FNc80PN.js +0 -4
- package/dist/ionic/p-141f5b47.entry.js +0 -4
- package/dist/ionic/p-14a5e8f5.entry.js +0 -4
- package/dist/ionic/p-19269e04.entry.js +0 -4
- package/dist/ionic/p-19abbc33.entry.js +0 -4
- package/dist/ionic/p-1edf0573.entry.js +0 -4
- package/dist/ionic/p-4204184c.entry.js +0 -4
- package/dist/ionic/p-4bc3ecdb.entry.js +0 -4
- package/dist/ionic/p-4eOQC00Z.js +0 -4
- package/dist/ionic/p-4eed9ca1.entry.js +0 -4
- package/dist/ionic/p-53bac1c9.entry.js +0 -4
- package/dist/ionic/p-5506caeb.entry.js +0 -4
- package/dist/ionic/p-5521dc1f.entry.js +0 -4
- package/dist/ionic/p-5993a77f.entry.js +0 -4
- package/dist/ionic/p-5c3626de.entry.js +0 -4
- package/dist/ionic/p-5d3b411c.entry.js +0 -4
- package/dist/ionic/p-60576951.entry.js +0 -4
- package/dist/ionic/p-7116e558.entry.js +0 -4
- package/dist/ionic/p-711a8319.entry.js +0 -4
- package/dist/ionic/p-71419a55.entry.js +0 -4
- package/dist/ionic/p-79325ffe.entry.js +0 -4
- package/dist/ionic/p-7bb3e957.entry.js +0 -4
- package/dist/ionic/p-82525fb0.entry.js +0 -4
- package/dist/ionic/p-84a38904.entry.js +0 -4
- package/dist/ionic/p-865fa114.entry.js +0 -4
- package/dist/ionic/p-8e1d9e3a.entry.js +0 -4
- package/dist/ionic/p-8f204f1e.entry.js +0 -4
- package/dist/ionic/p-9055e897.entry.js +0 -4
- package/dist/ionic/p-9658e083.entry.js +0 -4
- package/dist/ionic/p-988baee1.entry.js +0 -4
- package/dist/ionic/p-9nmHvEvw.js +0 -4
- package/dist/ionic/p-B-FxiyeI.js +0 -4
- package/dist/ionic/p-BB0LlG4y.js +0 -4
- package/dist/ionic/p-BMPN55of.js +0 -4
- package/dist/ionic/p-BQ8oNV0v.js +0 -4
- package/dist/ionic/p-BSQPZ79H.js +0 -4
- package/dist/ionic/p-BhamHSw3.js +0 -4
- package/dist/ionic/p-BjvtSsVI.js +0 -4
- package/dist/ionic/p-BwIp10KV.js +0 -4
- package/dist/ionic/p-C-94tAim.js +0 -4
- package/dist/ionic/p-C6eME8Ey.js +0 -4
- package/dist/ionic/p-CKUuSnDR.js +0 -4
- package/dist/ionic/p-CMRtMbJc.js +0 -4
- package/dist/ionic/p-CPcPmkGv.js +0 -4
- package/dist/ionic/p-CaRuIadB.js +0 -4
- package/dist/ionic/p-Cdjxf_yg.js +0 -4
- package/dist/ionic/p-ChhhtsGZ.js +0 -5
- package/dist/ionic/p-CmKf4pgI.js +0 -4
- package/dist/ionic/p-D5t_-oMk.js +0 -4
- package/dist/ionic/p-D94b61er.js +0 -4
- package/dist/ionic/p-DAztxQR0.js +0 -4
- package/dist/ionic/p-DCI3rXQo.js +0 -4
- package/dist/ionic/p-DDhtUaaA.js +0 -4
- package/dist/ionic/p-DWCzVL3Y.js +0 -4
- package/dist/ionic/p-DkUB-ROc.js +0 -4
- package/dist/ionic/p-Dn0mqQ_R.js +0 -4
- package/dist/ionic/p-T71k3C35.js +0 -4
- package/dist/ionic/p-TXPDHL13.js +0 -4
- package/dist/ionic/p-a71232d6.entry.js +0 -4
- package/dist/ionic/p-a73d8742.entry.js +0 -4
- package/dist/ionic/p-a8421d18.entry.js +0 -4
- package/dist/ionic/p-a8c2c343.entry.js +0 -4
- package/dist/ionic/p-acf0a6af.entry.js +0 -4
- package/dist/ionic/p-ad98e3ff.entry.js +0 -4
- package/dist/ionic/p-af5166f5.entry.js +0 -4
- package/dist/ionic/p-bc2bad5f.entry.js +0 -4
- package/dist/ionic/p-be08d500.entry.js +0 -4
- package/dist/ionic/p-be9a4f51.entry.js +0 -4
- package/dist/ionic/p-byZM6qHV.js +0 -4
- package/dist/ionic/p-ccc5044d.entry.js +0 -4
- package/dist/ionic/p-ce32912b.entry.js +0 -4
- package/dist/ionic/p-ded69ceb.entry.js +0 -4
- package/dist/ionic/p-e0c6e31e.entry.js +0 -4
- package/dist/ionic/p-e1e5b507.entry.js +0 -4
- package/dist/ionic/p-e8c3e08a.entry.js +0 -4
- package/dist/ionic/p-ed5d540d.entry.js +0 -4
- package/dist/ionic/p-f046aa37.entry.js +0 -4
- package/dist/ionic/p-f2802440.entry.js +0 -4
- package/dist/ionic/p-f402f5a4.entry.js +0 -4
- package/dist/ionic/p-fe1bfbcf.entry.js +0 -4
- package/dist/types/utils/forms/start-container-controller.d.ts +0 -34
- package/dist/types/utils/overlay-control-label.d.ts +0 -32
- package/dist/types/utils/select-option-render.d.ts +0 -53
- /package/components/{p-LpMHEu3v.js → p-CO7fmmxt.js} +0 -0
|
@@ -3,29 +3,25 @@
|
|
|
3
3
|
*/
|
|
4
4
|
'use strict';
|
|
5
5
|
|
|
6
|
-
var index = require('./index-
|
|
7
|
-
var
|
|
8
|
-
var slotMutationController = require('./slot-mutation-controller-CgTGFqlW.js');
|
|
6
|
+
var index = require('./index-BfaXsATC.js');
|
|
7
|
+
var notchController = require('./notch-controller-aiy8aQb-.js');
|
|
9
8
|
var compareWithUtils = require('./compare-with-utils-DSicavqM.js');
|
|
10
9
|
var validity = require('./validity-BpS37YFM.js');
|
|
11
|
-
var helpers = require('./helpers-
|
|
12
|
-
var overlays = require('./overlays-
|
|
13
|
-
var dir = require('./dir-
|
|
14
|
-
var
|
|
15
|
-
var theme = require('./theme-Bw0rpaNN.js');
|
|
10
|
+
var helpers = require('./helpers-DdZyl6WL.js');
|
|
11
|
+
var overlays = require('./overlays-CQ_c1fko.js');
|
|
12
|
+
var dir = require('./dir-DD0jPVH3.js');
|
|
13
|
+
var theme = require('./theme-CeDs6Hcv.js');
|
|
16
14
|
var watchOptions = require('./watch-options-CviOsrTS.js');
|
|
17
|
-
var index$1 = require('./index-
|
|
18
|
-
var ionicGlobal = require('./ionic-global-
|
|
19
|
-
var overlayControlLabel = require('./overlay-control-label-D2sdL2O8.js');
|
|
20
|
-
var selectOptionRender = require('./select-option-render-pULCGldr.js');
|
|
15
|
+
var index$1 = require('./index-DqmRDbxg.js');
|
|
16
|
+
var ionicGlobal = require('./ionic-global-BerQGEpE.js');
|
|
21
17
|
require('./index-DkNv4J_i.js');
|
|
22
|
-
require('./hardware-back-button-
|
|
23
|
-
require('./framework-delegate-
|
|
24
|
-
require('./gesture-controller-
|
|
18
|
+
require('./hardware-back-button-CXmUnTJC.js');
|
|
19
|
+
require('./framework-delegate-CEzl4MEA.js');
|
|
20
|
+
require('./gesture-controller-dtqlP_q4.js');
|
|
25
21
|
|
|
26
|
-
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);--
|
|
22
|
+
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}`;
|
|
27
23
|
|
|
28
|
-
const selectMdCss = () => `:host{--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--placeholder-color:currentColor;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--background:transparent;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--select-text-media-height:1.5em;--select-text-media-width:1.5em;--select-text-gap:12px;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;font-family:var(--ion-font-family, inherit);white-space:nowrap;cursor:pointer;z-index:2}:host(.select-label-placement-floating),:host(.select-label-placement-stacked){min-height:56px}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0}:host(.select-disabled){pointer-events:none}:host(.has-focus) button{border:2px solid #5e9ed6}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.select-placeholder{color:var(--placeholder-color);opacity:var(--placeholder-opacity)}button{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.select-icon{-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0;position:relative;-ms-flex-negative:0;flex-shrink:0}:host(.in-item-color) .select-icon{color:inherit}.select-text{-ms-flex:1;flex:1;min-width:16px;font-size:inherit;text-overflow:ellipsis;white-space:inherit;overflow:hidden}.select-text>*+*{-webkit-margin-start:var(--select-text-gap);margin-inline-start:var(--select-text-gap)}.select-text img,.select-text ion-img,.select-text ion-icon,.select-text ion-thumbnail,.select-text ion-avatar{border-radius:var(--select-text-media-border-radius);width:var(--select-text-media-width);height:var(--select-text-media-height);border-width:var(--select-text-media-border-width);border-style:var(--select-text-media-border-style);border-color:var(--select-text-media-border-color)}.select-wrapper{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;-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-control{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:inherit;justify-content:inherit;min-width:0}: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;min-width:0;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}:host(.skip-label-transition) .label-text-wrapper{-webkit-transition:none;transition: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-negative:100000;flex-shrink:100000;-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-control,:host(.select-label-placement-floating) .select-control{-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;-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{-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) .native-wrapper .select-placeholder{opacity:0}:host(.label-floating.select-label-placement-floating) .native-wrapper .select-placeholder{opacity:var(--placeholder-opacity)}: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)}.select-start,.select-end{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center}::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;--internal-start-container-adjustment:0px;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:100%}:host(.select-fill-outline) .label-text-wrapper{position:relative;z-index:1}:host(.select-fill-outline:not(.label-floating)) .select-control{position:relative}:host(.label-floating.select-fill-outline) .label-text-wrapper{-webkit-transform:translate(var(--internal-start-container-adjustment, 0px), -32%) scale(0.75);transform:translate(var(--internal-start-container-adjustment, 0px), -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);border-start-start-radius:var(--border-radius);border-start-end-radius:0px;border-end-end-radius:0px;border-end-start-radius:var(--border-radius);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);border-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px;-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-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}`;
|
|
24
|
+
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}`;
|
|
29
25
|
|
|
30
26
|
const Select = class {
|
|
31
27
|
constructor(hostRef) {
|
|
@@ -36,240 +32,141 @@ const Select = class {
|
|
|
36
32
|
this.ionFocus = index.createEvent(this, "ionFocus", 7);
|
|
37
33
|
this.ionBlur = index.createEvent(this, "ionBlur", 7);
|
|
38
34
|
this.ionStyle = index.createEvent(this, "ionStyle", 7);
|
|
35
|
+
this.inputId = `ion-sel-${selectIds++}`;
|
|
36
|
+
this.helperTextId = `${this.inputId}-helper-text`;
|
|
37
|
+
this.errorTextId = `${this.inputId}-error-text`;
|
|
38
|
+
this.inheritedAttributes = {};
|
|
39
|
+
this.isExpanded = false;
|
|
40
|
+
/**
|
|
41
|
+
* The `hasFocus` state ensures the focus class is
|
|
42
|
+
* added regardless of how the element is focused.
|
|
43
|
+
* The `ion-focused` class only applies when focused
|
|
44
|
+
* via tabbing, not by clicking.
|
|
45
|
+
* The `has-focus` logic was added to ensure the class
|
|
46
|
+
* is applied in both cases.
|
|
47
|
+
*/
|
|
48
|
+
this.hasFocus = false;
|
|
49
|
+
/**
|
|
50
|
+
* Track validation state for proper aria-live announcements.
|
|
51
|
+
*/
|
|
52
|
+
this.isInvalid = false;
|
|
53
|
+
/**
|
|
54
|
+
* The text to display on the cancel button.
|
|
55
|
+
*/
|
|
56
|
+
this.cancelText = 'Cancel';
|
|
57
|
+
/**
|
|
58
|
+
* If `true`, the user cannot interact with the select.
|
|
59
|
+
*/
|
|
60
|
+
this.disabled = false;
|
|
61
|
+
/**
|
|
62
|
+
* The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
|
|
63
|
+
*/
|
|
64
|
+
this.interface = 'alert';
|
|
65
|
+
/**
|
|
66
|
+
* Any additional options that the `alert`, `action-sheet` or `popover` interface
|
|
67
|
+
* can take. See the [ion-alert docs](./alert), the
|
|
68
|
+
* [ion-action-sheet docs](./action-sheet), the
|
|
69
|
+
* [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the
|
|
70
|
+
* create options for each interface.
|
|
71
|
+
*
|
|
72
|
+
* Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
|
|
73
|
+
*/
|
|
74
|
+
this.interfaceOptions = {};
|
|
75
|
+
/**
|
|
76
|
+
* Where to place the label relative to the select.
|
|
77
|
+
* `"start"`: The label will appear to the left of the select in LTR and to the right in RTL.
|
|
78
|
+
* `"end"`: The label will appear to the right of the select in LTR and to the left in RTL.
|
|
79
|
+
* `"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.
|
|
80
|
+
* `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.
|
|
81
|
+
* `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
|
|
82
|
+
* When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
|
|
83
|
+
*/
|
|
84
|
+
this.labelPlacement = 'start';
|
|
85
|
+
/**
|
|
86
|
+
* If `true`, the select can accept multiple values.
|
|
87
|
+
*/
|
|
88
|
+
this.multiple = false;
|
|
89
|
+
/**
|
|
90
|
+
* The name of the control, which is submitted with the form data.
|
|
91
|
+
*/
|
|
92
|
+
this.name = this.inputId;
|
|
93
|
+
/**
|
|
94
|
+
* The text to display on the ok button.
|
|
95
|
+
*/
|
|
96
|
+
this.okText = 'OK';
|
|
97
|
+
/**
|
|
98
|
+
* If true, screen readers will announce it as a required field. This property
|
|
99
|
+
* works only for accessibility purposes, it will not prevent the form from
|
|
100
|
+
* submitting if the value is invalid.
|
|
101
|
+
*/
|
|
102
|
+
this.required = false;
|
|
103
|
+
this.onClick = (ev) => {
|
|
104
|
+
const target = ev.target;
|
|
105
|
+
const closestSlot = target.closest('[slot="start"], [slot="end"]');
|
|
106
|
+
if (target === this.el || closestSlot === null) {
|
|
107
|
+
this.setFocus();
|
|
108
|
+
this.open(ev);
|
|
109
|
+
}
|
|
110
|
+
else {
|
|
111
|
+
/**
|
|
112
|
+
* Prevent clicks to the start/end slots from opening the select.
|
|
113
|
+
* We ensure the target isn't this element in case the select is slotted
|
|
114
|
+
* in, for example, an item. This would prevent the select from ever
|
|
115
|
+
* being opened since the element itself has slot="start"/"end".
|
|
116
|
+
*
|
|
117
|
+
* Clicking a slotted element also causes a click
|
|
118
|
+
* on the <label> element (since it wraps the slots).
|
|
119
|
+
* Clicking <label> dispatches another click event on
|
|
120
|
+
* the native form control that then bubbles up to this
|
|
121
|
+
* listener. This additional event targets the host
|
|
122
|
+
* element, so the select overlay is opened.
|
|
123
|
+
*
|
|
124
|
+
* When the slotted elements are clicked (and therefore
|
|
125
|
+
* the ancestor <label> element) we want to prevent the label
|
|
126
|
+
* from dispatching another click event.
|
|
127
|
+
*
|
|
128
|
+
* Do not call stopPropagation() because this will cause
|
|
129
|
+
* click handlers on the slotted elements to never fire in React.
|
|
130
|
+
* When developers do onClick in React a native "click" listener
|
|
131
|
+
* is added on the root element, not the slotted element. When that
|
|
132
|
+
* native click listener fires, React then dispatches the synthetic
|
|
133
|
+
* click event on the slotted element. However, if stopPropagation
|
|
134
|
+
* is called then the native click event will never bubble up
|
|
135
|
+
* to the root element.
|
|
136
|
+
*/
|
|
137
|
+
ev.preventDefault();
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
this.onFocus = () => {
|
|
141
|
+
this.hasFocus = true;
|
|
142
|
+
this.ionFocus.emit();
|
|
143
|
+
};
|
|
144
|
+
this.onBlur = () => {
|
|
145
|
+
this.hasFocus = false;
|
|
146
|
+
this.ionBlur.emit();
|
|
147
|
+
};
|
|
148
|
+
/**
|
|
149
|
+
* Stops propagation when the label is clicked,
|
|
150
|
+
* otherwise, two clicks will be triggered.
|
|
151
|
+
*/
|
|
152
|
+
this.onLabelClick = (ev) => {
|
|
153
|
+
// Only stop propagation if the click was directly on the label
|
|
154
|
+
// and not on the input or other child elements
|
|
155
|
+
if (ev.target === ev.currentTarget) {
|
|
156
|
+
ev.stopPropagation();
|
|
157
|
+
}
|
|
158
|
+
};
|
|
39
159
|
}
|
|
40
|
-
inputId = `ion-sel-${selectIds++}`;
|
|
41
|
-
helperTextId = `${this.inputId}-helper-text`;
|
|
42
|
-
errorTextId = `${this.inputId}-error-text`;
|
|
43
|
-
overlay;
|
|
44
|
-
focusEl;
|
|
45
|
-
mutationO;
|
|
46
|
-
inheritedAttributes = {};
|
|
47
|
-
slotMutationController;
|
|
48
|
-
nativeWrapperEl;
|
|
49
|
-
notchSpacerEl;
|
|
50
|
-
validationObserver;
|
|
51
|
-
notchController;
|
|
52
|
-
startContainerController;
|
|
53
|
-
startContainerEl;
|
|
54
|
-
customHTMLEnabled = index.config.get('innerHTMLTemplatesEnabled', config.ENABLE_HTML_CONTENT_DEFAULT);
|
|
55
|
-
get el() { return index.getElement(this); }
|
|
56
|
-
isExpanded = false;
|
|
57
|
-
/**
|
|
58
|
-
* The `hasFocus` state ensures the focus class is
|
|
59
|
-
* added regardless of how the element is focused.
|
|
60
|
-
* The `ion-focused` class only applies when focused
|
|
61
|
-
* via tabbing, not by clicking.
|
|
62
|
-
* The `has-focus` logic was added to ensure the class
|
|
63
|
-
* is applied in both cases.
|
|
64
|
-
*/
|
|
65
|
-
hasFocus = false;
|
|
66
|
-
/**
|
|
67
|
-
* Track validation state for proper aria-live announcements.
|
|
68
|
-
*/
|
|
69
|
-
isInvalid = false;
|
|
70
|
-
hintTextId;
|
|
71
|
-
/**
|
|
72
|
-
* The text to display on the cancel button.
|
|
73
|
-
*/
|
|
74
|
-
cancelText = 'Cancel';
|
|
75
|
-
/**
|
|
76
|
-
* The color to use from your application's color palette.
|
|
77
|
-
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
|
78
|
-
* For more information on colors, see [theming](/docs/theming/basics).
|
|
79
|
-
*
|
|
80
|
-
* This property is only available when using the modern select syntax.
|
|
81
|
-
*/
|
|
82
|
-
color;
|
|
83
|
-
/**
|
|
84
|
-
* This property allows developers to specify a custom function or property
|
|
85
|
-
* name for comparing objects when determining the selected option in the
|
|
86
|
-
* ion-select. When not specified, the default behavior will use strict
|
|
87
|
-
* equality (===) for comparison.
|
|
88
|
-
*/
|
|
89
|
-
compareWith;
|
|
90
|
-
/**
|
|
91
|
-
* If `true`, the user cannot interact with the select.
|
|
92
|
-
*/
|
|
93
|
-
disabled = false;
|
|
94
|
-
/**
|
|
95
|
-
* The fill for the item. If `"solid"` the item will have a background. If
|
|
96
|
-
* `"outline"` the item will be transparent with a border. Only available in `md` mode.
|
|
97
|
-
*/
|
|
98
|
-
fill;
|
|
99
|
-
/**
|
|
100
|
-
* Text that is placed under the select and displayed when an error is detected.
|
|
101
|
-
*/
|
|
102
|
-
errorText;
|
|
103
|
-
/**
|
|
104
|
-
* Text that is placed under the select and displayed when no error is detected.
|
|
105
|
-
*/
|
|
106
|
-
helperText;
|
|
107
|
-
/**
|
|
108
|
-
* The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
|
|
109
|
-
*/
|
|
110
|
-
interface = 'alert';
|
|
111
|
-
/**
|
|
112
|
-
* Any additional options that the `alert`, `action-sheet` or `popover` interface
|
|
113
|
-
* can take. See the [ion-alert docs](./alert), the
|
|
114
|
-
* [ion-action-sheet docs](./action-sheet), the
|
|
115
|
-
* [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the
|
|
116
|
-
* create options for each interface.
|
|
117
|
-
*
|
|
118
|
-
* Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
|
|
119
|
-
*/
|
|
120
|
-
interfaceOptions = {};
|
|
121
|
-
/**
|
|
122
|
-
* How to pack the label and select within a line.
|
|
123
|
-
* `justify` does not apply when the label and select
|
|
124
|
-
* are on different lines when `labelPlacement` is set to
|
|
125
|
-
* `"floating"` or `"stacked"`.
|
|
126
|
-
* `"start"`: The label and select will appear on the left in LTR and
|
|
127
|
-
* on the right in RTL.
|
|
128
|
-
* `"end"`: The label and select will appear on the right in LTR and
|
|
129
|
-
* on the left in RTL.
|
|
130
|
-
* `"space-between"`: The label and select will appear on opposite
|
|
131
|
-
* ends of the line with space between the two elements.
|
|
132
|
-
*/
|
|
133
|
-
justify;
|
|
134
|
-
/**
|
|
135
|
-
* The visible label associated with the select.
|
|
136
|
-
*
|
|
137
|
-
* Use this if you need to render a plaintext label.
|
|
138
|
-
*
|
|
139
|
-
* The `label` property will take priority over the `label` slot if both are used.
|
|
140
|
-
*/
|
|
141
|
-
label;
|
|
142
|
-
/**
|
|
143
|
-
* Where to place the label relative to the select.
|
|
144
|
-
* `"start"`: The label will appear to the left of the select in LTR and to the right in RTL.
|
|
145
|
-
* `"end"`: The label will appear to the right of the select in LTR and to the left in RTL.
|
|
146
|
-
* `"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.
|
|
147
|
-
* `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.
|
|
148
|
-
* `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
|
|
149
|
-
* When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
|
|
150
|
-
*/
|
|
151
|
-
labelPlacement = 'start';
|
|
152
|
-
/**
|
|
153
|
-
* If `true`, the select can accept multiple values.
|
|
154
|
-
*/
|
|
155
|
-
multiple = false;
|
|
156
|
-
/**
|
|
157
|
-
* The name of the control, which is submitted with the form data.
|
|
158
|
-
*/
|
|
159
|
-
name = this.inputId;
|
|
160
|
-
/**
|
|
161
|
-
* The text to display on the ok button.
|
|
162
|
-
*/
|
|
163
|
-
okText = 'OK';
|
|
164
|
-
/**
|
|
165
|
-
* The text to display when the select is empty.
|
|
166
|
-
*/
|
|
167
|
-
placeholder;
|
|
168
|
-
/**
|
|
169
|
-
* The text to display instead of the selected option's value.
|
|
170
|
-
*/
|
|
171
|
-
selectedText;
|
|
172
|
-
/**
|
|
173
|
-
* The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,
|
|
174
|
-
* or `caretDownSharp` for `md` mode.
|
|
175
|
-
*/
|
|
176
|
-
toggleIcon;
|
|
177
|
-
/**
|
|
178
|
-
* The toggle icon to show when the select is open. If defined, the icon
|
|
179
|
-
* rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`
|
|
180
|
-
* will be used for when the select is both open and closed.
|
|
181
|
-
*/
|
|
182
|
-
expandedIcon;
|
|
183
|
-
/**
|
|
184
|
-
* The shape of the select. If "round" it will have an increased border radius.
|
|
185
|
-
*/
|
|
186
|
-
shape;
|
|
187
|
-
/**
|
|
188
|
-
* The value of the select.
|
|
189
|
-
*/
|
|
190
|
-
value;
|
|
191
|
-
/**
|
|
192
|
-
* If true, screen readers will announce it as a required field. This property
|
|
193
|
-
* works only for accessibility purposes, it will not prevent the form from
|
|
194
|
-
* submitting if the value is invalid.
|
|
195
|
-
*/
|
|
196
|
-
required = false;
|
|
197
|
-
/**
|
|
198
|
-
* Emitted when the value has changed.
|
|
199
|
-
*
|
|
200
|
-
* This event will not emit when programmatically setting the `value` property.
|
|
201
|
-
*/
|
|
202
|
-
ionChange;
|
|
203
|
-
/**
|
|
204
|
-
* Emitted when the selection is cancelled.
|
|
205
|
-
*/
|
|
206
|
-
ionCancel;
|
|
207
|
-
/**
|
|
208
|
-
* Emitted when the overlay is dismissed.
|
|
209
|
-
*/
|
|
210
|
-
ionDismiss;
|
|
211
|
-
/**
|
|
212
|
-
* Emitted when the select has focus.
|
|
213
|
-
*/
|
|
214
|
-
ionFocus;
|
|
215
|
-
/**
|
|
216
|
-
* Emitted when the select loses focus.
|
|
217
|
-
*/
|
|
218
|
-
ionBlur;
|
|
219
|
-
/**
|
|
220
|
-
* Emitted when the styles change.
|
|
221
|
-
* @internal
|
|
222
|
-
*/
|
|
223
|
-
ionStyle;
|
|
224
160
|
styleChanged() {
|
|
225
161
|
this.emitStyle();
|
|
226
162
|
}
|
|
227
163
|
setValue(value) {
|
|
228
|
-
if (this.isValueEqual(this.value, value)) {
|
|
229
|
-
return;
|
|
230
|
-
}
|
|
231
164
|
this.value = value;
|
|
232
165
|
this.ionChange.emit({ value });
|
|
233
166
|
}
|
|
234
|
-
isValueEqual(currentValue, newValue) {
|
|
235
|
-
if (this.multiple) {
|
|
236
|
-
const currentArr = Array.isArray(currentValue) ? currentValue : [];
|
|
237
|
-
const newArr = Array.isArray(newValue) ? newValue : [];
|
|
238
|
-
if (currentArr.length !== newArr.length) {
|
|
239
|
-
return false;
|
|
240
|
-
}
|
|
241
|
-
// Multiset compare: each new value must match a distinct current value.
|
|
242
|
-
// A plain `every(isOptionSelected)` would accept ['a','a'] as equal to
|
|
243
|
-
// ['a','b'] when both 'a' and 'b' map to options whose values overlap.
|
|
244
|
-
const remaining = currentArr.slice();
|
|
245
|
-
return newArr.every((val) => {
|
|
246
|
-
const idx = remaining.findIndex((c) => compareWithUtils.compareOptions(c, val, this.compareWith));
|
|
247
|
-
if (idx === -1) {
|
|
248
|
-
return false;
|
|
249
|
-
}
|
|
250
|
-
remaining.splice(idx, 1);
|
|
251
|
-
return true;
|
|
252
|
-
});
|
|
253
|
-
}
|
|
254
|
-
if (currentValue == null && newValue == null) {
|
|
255
|
-
return true;
|
|
256
|
-
}
|
|
257
|
-
if (currentValue == null || newValue == null) {
|
|
258
|
-
return false;
|
|
259
|
-
}
|
|
260
|
-
return compareWithUtils.compareOptions(currentValue, newValue, this.compareWith);
|
|
261
|
-
}
|
|
262
167
|
async connectedCallback() {
|
|
263
168
|
const { el } = this;
|
|
264
|
-
this.
|
|
265
|
-
this.startContainerController?.calculateStartContainerWidth();
|
|
266
|
-
index.forceUpdate(this);
|
|
267
|
-
});
|
|
268
|
-
this.notchController = slotMutationController.createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
269
|
-
this.startContainerController = slotMutationController.createStartContainerController(el, () => this.startContainerEl, () => {
|
|
270
|
-
return ionicGlobal.getIonMode(this) === 'md' && this.fill === 'outline';
|
|
271
|
-
});
|
|
272
|
-
this.startContainerController.calculateStartContainerWidth();
|
|
169
|
+
this.notchController = notchController.createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
273
170
|
this.updateOverlayOptions();
|
|
274
171
|
this.emitStyle();
|
|
275
172
|
this.mutationO = watchOptions.watchForOptions(this.el, 'ion-select-option', async () => {
|
|
@@ -341,18 +238,10 @@ const Select = class {
|
|
|
341
238
|
this.mutationO.disconnect();
|
|
342
239
|
this.mutationO = undefined;
|
|
343
240
|
}
|
|
344
|
-
if (this.slotMutationController) {
|
|
345
|
-
this.slotMutationController.destroy();
|
|
346
|
-
this.slotMutationController = undefined;
|
|
347
|
-
}
|
|
348
241
|
if (this.notchController) {
|
|
349
242
|
this.notchController.destroy();
|
|
350
243
|
this.notchController = undefined;
|
|
351
244
|
}
|
|
352
|
-
if (this.startContainerController) {
|
|
353
|
-
this.startContainerController.destroy();
|
|
354
|
-
this.startContainerController = undefined;
|
|
355
|
-
}
|
|
356
245
|
// Clean up validation observer to prevent memory leaks.
|
|
357
246
|
if (this.validationObserver) {
|
|
358
247
|
this.validationObserver.disconnect();
|
|
@@ -509,11 +398,10 @@ const Select = class {
|
|
|
509
398
|
.join(' ');
|
|
510
399
|
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
|
511
400
|
const isSelected = compareWithUtils.isOptionSelected(selectValue, value, this.compareWith);
|
|
512
|
-
const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
|
|
513
401
|
return {
|
|
514
|
-
|
|
402
|
+
role: isSelected ? 'selected' : '',
|
|
403
|
+
text: option.textContent,
|
|
515
404
|
cssClass: optClass,
|
|
516
|
-
disabled: option.disabled,
|
|
517
405
|
handler: () => {
|
|
518
406
|
this.setValue(value);
|
|
519
407
|
},
|
|
@@ -521,9 +409,6 @@ const Select = class {
|
|
|
521
409
|
'aria-checked': isSelected ? 'true' : 'false',
|
|
522
410
|
role: 'radio',
|
|
523
411
|
},
|
|
524
|
-
startContent,
|
|
525
|
-
endContent,
|
|
526
|
-
description: option.description,
|
|
527
412
|
};
|
|
528
413
|
});
|
|
529
414
|
// Add "cancel" button
|
|
@@ -544,19 +429,13 @@ const Select = class {
|
|
|
544
429
|
.filter((cls) => cls !== 'hydrated')
|
|
545
430
|
.join(' ');
|
|
546
431
|
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
|
547
|
-
const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
|
|
548
432
|
return {
|
|
549
433
|
type: inputType,
|
|
550
434
|
cssClass: optClass,
|
|
551
|
-
label:
|
|
435
|
+
label: option.textContent || '',
|
|
552
436
|
value,
|
|
553
437
|
checked: compareWithUtils.isOptionSelected(selectValue, value, this.compareWith),
|
|
554
438
|
disabled: option.disabled,
|
|
555
|
-
startContent,
|
|
556
|
-
endContent,
|
|
557
|
-
description: option.description,
|
|
558
|
-
labelPlacement: option.labelPlacement,
|
|
559
|
-
justify: option.justify,
|
|
560
439
|
};
|
|
561
440
|
});
|
|
562
441
|
return alertInputs;
|
|
@@ -569,9 +448,8 @@ const Select = class {
|
|
|
569
448
|
.filter((cls) => cls !== 'hydrated')
|
|
570
449
|
.join(' ');
|
|
571
450
|
const optClass = `${OPTION_CLASS} ${copyClasses}`;
|
|
572
|
-
const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
|
|
573
451
|
return {
|
|
574
|
-
text:
|
|
452
|
+
text: option.textContent || '',
|
|
575
453
|
cssClass: optClass,
|
|
576
454
|
value,
|
|
577
455
|
checked: compareWithUtils.isOptionSelected(selectValue, value, this.compareWith),
|
|
@@ -582,11 +460,6 @@ const Select = class {
|
|
|
582
460
|
this.close();
|
|
583
461
|
}
|
|
584
462
|
},
|
|
585
|
-
startContent,
|
|
586
|
-
endContent,
|
|
587
|
-
description: option.description,
|
|
588
|
-
labelPlacement: option.labelPlacement,
|
|
589
|
-
justify: option.justify,
|
|
590
463
|
};
|
|
591
464
|
});
|
|
592
465
|
return popoverOptions;
|
|
@@ -615,60 +488,33 @@ const Select = class {
|
|
|
615
488
|
*/
|
|
616
489
|
}
|
|
617
490
|
else {
|
|
618
|
-
event = {
|
|
619
|
-
...ev,
|
|
620
|
-
detail: {
|
|
491
|
+
event = Object.assign(Object.assign({}, ev), { detail: {
|
|
621
492
|
ionShadowTarget: this.nativeWrapperEl,
|
|
622
|
-
}
|
|
623
|
-
};
|
|
493
|
+
} });
|
|
624
494
|
}
|
|
625
|
-
const
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
mode,
|
|
629
|
-
event,
|
|
630
|
-
alignment: 'center',
|
|
631
|
-
size,
|
|
632
|
-
showBackdrop,
|
|
633
|
-
...interfaceOptions,
|
|
634
|
-
component: 'ion-select-popover',
|
|
635
|
-
cssClass: [
|
|
636
|
-
'select-popover',
|
|
637
|
-
hasRichContent ? 'select-popover-rich-content' : undefined,
|
|
638
|
-
interfaceOptions.cssClass,
|
|
639
|
-
],
|
|
640
|
-
componentProps: {
|
|
495
|
+
const popoverOpts = Object.assign(Object.assign({ mode,
|
|
496
|
+
event, alignment: 'center', size,
|
|
497
|
+
showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
|
|
641
498
|
header: interfaceOptions.header,
|
|
642
499
|
subHeader: interfaceOptions.subHeader,
|
|
643
500
|
message: interfaceOptions.message,
|
|
644
501
|
multiple,
|
|
645
502
|
value,
|
|
646
|
-
options,
|
|
647
|
-
}
|
|
648
|
-
};
|
|
503
|
+
options: this.createOverlaySelectOptions(this.childOpts, value),
|
|
504
|
+
} });
|
|
649
505
|
return overlays.popoverController.create(popoverOpts);
|
|
650
506
|
}
|
|
651
507
|
async openActionSheet() {
|
|
652
508
|
const mode = ionicGlobal.getIonMode(this);
|
|
653
509
|
const interfaceOptions = this.interfaceOptions;
|
|
654
|
-
const actionSheetOpts = {
|
|
655
|
-
mode,
|
|
656
|
-
...interfaceOptions,
|
|
657
|
-
buttons: this.createActionSheetButtons(this.childOpts, this.value),
|
|
658
|
-
cssClass: ['select-action-sheet', interfaceOptions.cssClass],
|
|
659
|
-
};
|
|
510
|
+
const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
|
|
660
511
|
return overlays.actionSheetController.create(actionSheetOpts);
|
|
661
512
|
}
|
|
662
513
|
async openAlert() {
|
|
663
514
|
const interfaceOptions = this.interfaceOptions;
|
|
664
515
|
const inputType = this.multiple ? 'checkbox' : 'radio';
|
|
665
516
|
const mode = ionicGlobal.getIonMode(this);
|
|
666
|
-
const alertOpts = {
|
|
667
|
-
mode,
|
|
668
|
-
...interfaceOptions,
|
|
669
|
-
header: interfaceOptions.header ? interfaceOptions.header : this.labelText,
|
|
670
|
-
inputs: this.createAlertInputs(this.childOpts, inputType, this.value),
|
|
671
|
-
buttons: [
|
|
517
|
+
const alertOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
|
|
672
518
|
{
|
|
673
519
|
text: this.cancelText,
|
|
674
520
|
role: 'cancel',
|
|
@@ -682,31 +528,23 @@ const Select = class {
|
|
|
682
528
|
this.setValue(selectedValues);
|
|
683
529
|
},
|
|
684
530
|
},
|
|
685
|
-
],
|
|
686
|
-
cssClass: [
|
|
531
|
+
], cssClass: [
|
|
687
532
|
'select-alert',
|
|
688
533
|
interfaceOptions.cssClass,
|
|
689
534
|
this.multiple ? 'multiple-select-alert' : 'single-select-alert',
|
|
690
|
-
]
|
|
691
|
-
};
|
|
535
|
+
] });
|
|
692
536
|
return overlays.alertController.create(alertOpts);
|
|
693
537
|
}
|
|
694
538
|
openModal() {
|
|
695
539
|
const { multiple, value, interfaceOptions } = this;
|
|
696
540
|
const mode = ionicGlobal.getIonMode(this);
|
|
697
|
-
const modalOpts = {
|
|
698
|
-
...interfaceOptions,
|
|
699
|
-
mode,
|
|
700
|
-
cssClass: ['select-modal', interfaceOptions.cssClass],
|
|
701
|
-
component: 'ion-select-modal',
|
|
702
|
-
componentProps: {
|
|
541
|
+
const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
|
|
703
542
|
header: interfaceOptions.header,
|
|
704
543
|
cancelText: this.cancelText,
|
|
705
544
|
multiple,
|
|
706
545
|
value,
|
|
707
546
|
options: this.createOverlaySelectOptions(this.childOpts, value),
|
|
708
|
-
}
|
|
709
|
-
};
|
|
547
|
+
} });
|
|
710
548
|
return overlays.modalController.create(modalOpts);
|
|
711
549
|
}
|
|
712
550
|
/**
|
|
@@ -743,18 +581,12 @@ const Select = class {
|
|
|
743
581
|
}
|
|
744
582
|
return;
|
|
745
583
|
}
|
|
746
|
-
|
|
747
|
-
* Returns the text to display in the select based on the selected value.
|
|
748
|
-
*
|
|
749
|
-
* @param useHTML If `true`, the returned text will include any custom HTML content from the selected option. If `false`, the returned text will be plain text without any HTML. Defaults to `false`.
|
|
750
|
-
* @returns The text to display in the select, either with or without HTML based on the `useHTML` parameter.
|
|
751
|
-
*/
|
|
752
|
-
getText(useHTML = false) {
|
|
584
|
+
getText() {
|
|
753
585
|
const selectedText = this.selectedText;
|
|
754
586
|
if (selectedText != null && selectedText !== '') {
|
|
755
587
|
return selectedText;
|
|
756
588
|
}
|
|
757
|
-
return generateText(this.childOpts, this.value, this.compareWith
|
|
589
|
+
return generateText(this.childOpts, this.value, this.compareWith);
|
|
758
590
|
}
|
|
759
591
|
setFocus() {
|
|
760
592
|
if (this.focusEl) {
|
|
@@ -768,51 +600,6 @@ const Select = class {
|
|
|
768
600
|
};
|
|
769
601
|
this.ionStyle.emit(style);
|
|
770
602
|
}
|
|
771
|
-
onClick = (ev) => {
|
|
772
|
-
const target = ev.target;
|
|
773
|
-
const closestSlot = target.closest('[slot="start"], [slot="end"]');
|
|
774
|
-
if (target === this.el || closestSlot === null) {
|
|
775
|
-
this.setFocus();
|
|
776
|
-
this.open(ev);
|
|
777
|
-
}
|
|
778
|
-
else {
|
|
779
|
-
/**
|
|
780
|
-
* Prevent clicks to the start/end slots from opening the select.
|
|
781
|
-
* We ensure the target isn't this element in case the select is slotted
|
|
782
|
-
* in, for example, an item. This would prevent the select from ever
|
|
783
|
-
* being opened since the element itself has slot="start"/"end".
|
|
784
|
-
*
|
|
785
|
-
* Clicking a slotted element also causes a click
|
|
786
|
-
* on the <label> element (since it wraps the slots).
|
|
787
|
-
* Clicking <label> dispatches another click event on
|
|
788
|
-
* the native form control that then bubbles up to this
|
|
789
|
-
* listener. This additional event targets the host
|
|
790
|
-
* element, so the select overlay is opened.
|
|
791
|
-
*
|
|
792
|
-
* When the slotted elements are clicked (and therefore
|
|
793
|
-
* the ancestor <label> element) we want to prevent the label
|
|
794
|
-
* from dispatching another click event.
|
|
795
|
-
*
|
|
796
|
-
* Do not call stopPropagation() because this will cause
|
|
797
|
-
* click handlers on the slotted elements to never fire in React.
|
|
798
|
-
* When developers do onClick in React a native "click" listener
|
|
799
|
-
* is added on the root element, not the slotted element. When that
|
|
800
|
-
* native click listener fires, React then dispatches the synthetic
|
|
801
|
-
* click event on the slotted element. However, if stopPropagation
|
|
802
|
-
* is called then the native click event will never bubble up
|
|
803
|
-
* to the root element.
|
|
804
|
-
*/
|
|
805
|
-
ev.preventDefault();
|
|
806
|
-
}
|
|
807
|
-
};
|
|
808
|
-
onFocus = () => {
|
|
809
|
-
this.hasFocus = true;
|
|
810
|
-
this.ionFocus.emit();
|
|
811
|
-
};
|
|
812
|
-
onBlur = () => {
|
|
813
|
-
this.hasFocus = false;
|
|
814
|
-
this.ionBlur.emit();
|
|
815
|
-
};
|
|
816
603
|
renderLabel() {
|
|
817
604
|
const { label } = this;
|
|
818
605
|
return (index.h("div", { class: {
|
|
@@ -821,8 +608,8 @@ const Select = class {
|
|
|
821
608
|
}, part: "label" }, label === undefined ? index.h("slot", { name: "label" }) : index.h("div", { class: "label-text" }, label)));
|
|
822
609
|
}
|
|
823
610
|
componentDidRender() {
|
|
824
|
-
|
|
825
|
-
this.
|
|
611
|
+
var _a;
|
|
612
|
+
(_a = this.notchController) === null || _a === void 0 ? void 0 : _a.calculateNotchWidth();
|
|
826
613
|
}
|
|
827
614
|
/**
|
|
828
615
|
* Gets any content passed into the `label` slot,
|
|
@@ -841,64 +628,33 @@ const Select = class {
|
|
|
841
628
|
return this.label !== undefined || this.labelSlot !== null;
|
|
842
629
|
}
|
|
843
630
|
/**
|
|
844
|
-
*
|
|
845
|
-
*
|
|
846
|
-
* or mouse) and slotted content clicks to propagate so event delegation
|
|
847
|
-
* works for parent handlers.
|
|
631
|
+
* Renders the border container
|
|
632
|
+
* when fill="outline".
|
|
848
633
|
*/
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
* behavior.
|
|
868
|
-
*
|
|
869
|
-
* Only wraps when the string contains HTML elements
|
|
870
|
-
* alongside text.
|
|
871
|
-
*/
|
|
872
|
-
wrapSelectTextNodes(html) {
|
|
873
|
-
const temp = document.createElement('div');
|
|
874
|
-
temp.innerHTML = html;
|
|
875
|
-
const hasElements = Array.from(temp.childNodes).some((n) => n.nodeType === Node.ELEMENT_NODE);
|
|
876
|
-
// Return the plain text
|
|
877
|
-
if (!hasElements) {
|
|
878
|
-
return html;
|
|
634
|
+
renderLabelContainer() {
|
|
635
|
+
const mode = ionicGlobal.getIonMode(this);
|
|
636
|
+
const hasOutlineFill = mode === 'md' && this.fill === 'outline';
|
|
637
|
+
if (hasOutlineFill) {
|
|
638
|
+
/**
|
|
639
|
+
* The outline fill has a special outline
|
|
640
|
+
* that appears around the select and the label.
|
|
641
|
+
* Certain stacked and floating label placements cause the
|
|
642
|
+
* label to translate up and create a "cut out"
|
|
643
|
+
* inside of that border by using the notch-spacer element.
|
|
644
|
+
*/
|
|
645
|
+
return [
|
|
646
|
+
index.h("div", { class: "select-outline-container" }, index.h("div", { class: "select-outline-start" }), index.h("div", { class: {
|
|
647
|
+
'select-outline-notch': true,
|
|
648
|
+
'select-outline-notch-hidden': !this.hasLabel,
|
|
649
|
+
} }, index.h("div", { class: "notch-spacer", "aria-hidden": "true", ref: (el) => (this.notchSpacerEl = el) }, this.label)), index.h("div", { class: "select-outline-end" })),
|
|
650
|
+
this.renderLabel(),
|
|
651
|
+
];
|
|
879
652
|
}
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
* e.g., ", Bacon" becomes ", " text node + <span>Bacon</span>.
|
|
886
|
-
*/
|
|
887
|
-
const commaMatch = text.match(/^(,\s*)(.*)/);
|
|
888
|
-
if (commaMatch) {
|
|
889
|
-
const commaNode = document.createTextNode(commaMatch[1]);
|
|
890
|
-
const wrapper = document.createElement('span');
|
|
891
|
-
wrapper.textContent = commaMatch[2];
|
|
892
|
-
node.parentNode?.replaceChild(wrapper, node);
|
|
893
|
-
wrapper.parentNode?.insertBefore(commaNode, wrapper);
|
|
894
|
-
return;
|
|
895
|
-
}
|
|
896
|
-
const wrapper = document.createElement('span');
|
|
897
|
-
node.parentNode?.replaceChild(wrapper, node);
|
|
898
|
-
wrapper.appendChild(node);
|
|
899
|
-
}
|
|
900
|
-
});
|
|
901
|
-
return temp.innerHTML;
|
|
653
|
+
/**
|
|
654
|
+
* If not using the outline style,
|
|
655
|
+
* we can render just the label.
|
|
656
|
+
*/
|
|
657
|
+
return this.renderLabel();
|
|
902
658
|
}
|
|
903
659
|
/**
|
|
904
660
|
* Renders either the placeholder
|
|
@@ -907,7 +663,7 @@ const Select = class {
|
|
|
907
663
|
*/
|
|
908
664
|
renderSelectText() {
|
|
909
665
|
const { placeholder } = this;
|
|
910
|
-
const displayValue = this.getText(
|
|
666
|
+
const displayValue = this.getText();
|
|
911
667
|
let addPlaceholderClass = false;
|
|
912
668
|
let selectText = displayValue;
|
|
913
669
|
if (selectText === '' && placeholder !== undefined) {
|
|
@@ -919,10 +675,6 @@ const Select = class {
|
|
|
919
675
|
'select-placeholder': addPlaceholderClass,
|
|
920
676
|
};
|
|
921
677
|
const textPart = addPlaceholderClass ? 'placeholder' : 'text';
|
|
922
|
-
if (this.customHTMLEnabled) {
|
|
923
|
-
const wrapped = this.wrapSelectTextNodes(selectText);
|
|
924
|
-
return index.h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart, innerHTML: wrapped });
|
|
925
|
-
}
|
|
926
678
|
return (index.h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText));
|
|
927
679
|
}
|
|
928
680
|
/**
|
|
@@ -938,16 +690,16 @@ const Select = class {
|
|
|
938
690
|
}
|
|
939
691
|
else {
|
|
940
692
|
const defaultIcon = mode === 'ios' ? index$1.chevronExpand : index$1.caretDownSharp;
|
|
941
|
-
icon = toggleIcon
|
|
693
|
+
icon = toggleIcon !== null && toggleIcon !== void 0 ? toggleIcon : defaultIcon;
|
|
942
694
|
}
|
|
943
695
|
return index.h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
|
|
944
696
|
}
|
|
945
697
|
get ariaLabel() {
|
|
698
|
+
var _a;
|
|
946
699
|
const { placeholder, inheritedAttributes } = this;
|
|
947
|
-
// Get the plain text from the selected text
|
|
948
700
|
const displayValue = this.getText();
|
|
949
701
|
// The aria label should be preferred over visible text if both are specified
|
|
950
|
-
const definedLabel = inheritedAttributes['aria-label']
|
|
702
|
+
const definedLabel = (_a = inheritedAttributes['aria-label']) !== null && _a !== void 0 ? _a : this.labelText;
|
|
951
703
|
/**
|
|
952
704
|
* If developer has specified a placeholder
|
|
953
705
|
* and there is nothing selected, the selectText
|
|
@@ -1018,10 +770,28 @@ const Select = class {
|
|
|
1018
770
|
const inItem = theme.hostContext('ion-item', this.el);
|
|
1019
771
|
const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
|
|
1020
772
|
const hasValue = this.hasValue();
|
|
1021
|
-
const
|
|
773
|
+
const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
|
|
1022
774
|
helpers.renderHiddenInput(true, el, name, parseValue(value), disabled);
|
|
1023
|
-
|
|
1024
|
-
|
|
775
|
+
/**
|
|
776
|
+
* If the label is stacked, it should always sit above the select.
|
|
777
|
+
* For floating labels, the label should move above the select if
|
|
778
|
+
* the select has a value, is open, or has anything in either
|
|
779
|
+
* the start or end slot.
|
|
780
|
+
*
|
|
781
|
+
* If there is content in the start slot, the label would overlap
|
|
782
|
+
* it if not forced to float. This is also applied to the end slot
|
|
783
|
+
* because with the default or solid fills, the select is not
|
|
784
|
+
* vertically centered in the container, but the label is. This
|
|
785
|
+
* causes the slots and label to appear vertically offset from each
|
|
786
|
+
* other when the label isn't floating above the input. This doesn't
|
|
787
|
+
* apply to the outline fill, but this was not accounted for to keep
|
|
788
|
+
* things consistent.
|
|
789
|
+
*
|
|
790
|
+
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
791
|
+
*/
|
|
792
|
+
const labelShouldFloat = labelPlacement === 'stacked' ||
|
|
793
|
+
(labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded || hasStartEndSlots));
|
|
794
|
+
return (index.h(index.Host, { key: 'f16327d6866ffee76e1618fcd3281590ca0fd56d', onClick: this.onClick, class: theme.createColorClasses(this.color, {
|
|
1025
795
|
[mode]: true,
|
|
1026
796
|
'in-item': inItem,
|
|
1027
797
|
'in-item-color': theme.hostContext('ion-item.ion-color', el),
|
|
@@ -1039,8 +809,9 @@ const Select = class {
|
|
|
1039
809
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
1040
810
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
1041
811
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
1042
|
-
}) }, index.h("label", { key: '
|
|
812
|
+
}) }, index.h("label", { key: 'db13f76b384a7a7461c1ad752108eadf9c0213be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), index.h("div", { key: '2fb0e57bd596c0f525be79293b7da4aca55a9385', class: "select-wrapper-inner", part: "inner" }, index.h("slot", { key: 'cd694c36242789a89461ed3412af9891ad68411b', name: "start" }), index.h("div", { key: 'fdf62911be54f4ab29eb3c2eb153f082e76a8f49', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), index.h("slot", { key: 'a32f5c4b101d4d6ad45870f4c4446960009377f5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && index.h("div", { key: '61f792024a5f221ef4f28a3c249bd3a0de5edeab', class: "select-highlight" })), this.renderBottomContent()));
|
|
1043
813
|
}
|
|
814
|
+
get el() { return index.getElement(this); }
|
|
1044
815
|
static get watchers() { return {
|
|
1045
816
|
"disabled": [{
|
|
1046
817
|
"styleChanged": 0
|
|
@@ -1069,219 +840,25 @@ const parseValue = (value) => {
|
|
|
1069
840
|
}
|
|
1070
841
|
return value.toString();
|
|
1071
842
|
};
|
|
1072
|
-
const generateText = (opts, value, compareWith
|
|
843
|
+
const generateText = (opts, value, compareWith) => {
|
|
1073
844
|
if (value === undefined) {
|
|
1074
845
|
return '';
|
|
1075
846
|
}
|
|
1076
847
|
if (Array.isArray(value)) {
|
|
1077
848
|
return value
|
|
1078
|
-
.map((v) => textForValue(opts, v, compareWith
|
|
849
|
+
.map((v) => textForValue(opts, v, compareWith))
|
|
1079
850
|
.filter((opt) => opt !== null)
|
|
1080
851
|
.join(', ');
|
|
1081
852
|
}
|
|
1082
853
|
else {
|
|
1083
|
-
return textForValue(opts, value, compareWith
|
|
854
|
+
return textForValue(opts, value, compareWith) || '';
|
|
1084
855
|
}
|
|
1085
856
|
};
|
|
1086
|
-
|
|
1087
|
-
* Returns the display text for a given value from the list of options.
|
|
1088
|
-
* When `useHTML` is true, returns sanitized HTML for the select text.
|
|
1089
|
-
* When `useHTML` is false, returns plain text for aria-label and other
|
|
1090
|
-
* text-only contexts.
|
|
1091
|
-
*
|
|
1092
|
-
* @param opts - The list of ion-select-option elements.
|
|
1093
|
-
* @param value - The value to find the matching option for.
|
|
1094
|
-
* @param compareWith - Custom comparison function or property name.
|
|
1095
|
-
* @param useHTML - If true, returns HTML string. If false, returns plain text.
|
|
1096
|
-
*/
|
|
1097
|
-
const textForValue = (opts, value, compareWith, useHTML = false) => {
|
|
857
|
+
const textForValue = (opts, value, compareWith) => {
|
|
1098
858
|
const selectOpt = opts.find((opt) => {
|
|
1099
859
|
return compareWithUtils.compareOptions(value, getOptionValue(opt), compareWith);
|
|
1100
860
|
});
|
|
1101
|
-
|
|
1102
|
-
if (!selectOpt) {
|
|
1103
|
-
return null;
|
|
1104
|
-
}
|
|
1105
|
-
// Return sanitized HTML for the select text
|
|
1106
|
-
if (customHTMLEnabled && useHTML) {
|
|
1107
|
-
return getOptionContent(selectOpt, undefined, true);
|
|
1108
|
-
}
|
|
1109
|
-
/**
|
|
1110
|
-
* When custom HTML is enabled, extract only the default slot content.
|
|
1111
|
-
* This ensures aria-label and other text-only contexts read only
|
|
1112
|
-
* the relevant option text.
|
|
1113
|
-
*/
|
|
1114
|
-
if (customHTMLEnabled) {
|
|
1115
|
-
const content = getOptionContent(selectOpt);
|
|
1116
|
-
if (typeof content === 'string') {
|
|
1117
|
-
return content;
|
|
1118
|
-
}
|
|
1119
|
-
/**
|
|
1120
|
-
* Elements were found in the default slot, extract and concatenate
|
|
1121
|
-
* their text content while trimming whitespace.
|
|
1122
|
-
*/
|
|
1123
|
-
if (content) {
|
|
1124
|
-
const texts = Array.from(content.childNodes)
|
|
1125
|
-
.map((n) => n.textContent?.trim())
|
|
1126
|
-
.filter((t) => t);
|
|
1127
|
-
return texts.join(' ') || null;
|
|
1128
|
-
}
|
|
1129
|
-
// Empty option
|
|
1130
|
-
return null;
|
|
1131
|
-
}
|
|
1132
|
-
return getDefaultSlotPlainText(selectOpt);
|
|
1133
|
-
};
|
|
1134
|
-
/**
|
|
1135
|
-
* Trims whitespace from all text nodes within a DOM tree.
|
|
1136
|
-
* This prevents invisible layout shifts and unwanted gaps between
|
|
1137
|
-
* elements when HTML content is injected via innerHTML or cloneNode,
|
|
1138
|
-
* as browsers preserve whitespace (tabs, newlines, spaces) from
|
|
1139
|
-
* the original source markup.
|
|
1140
|
-
*
|
|
1141
|
-
* @param node The root node to start trimming text nodes from.
|
|
1142
|
-
*/
|
|
1143
|
-
const trimTextNodes = (node) => {
|
|
1144
|
-
node.childNodes.forEach((child) => {
|
|
1145
|
-
if (child.nodeType === Node.TEXT_NODE) {
|
|
1146
|
-
child.textContent = child.textContent?.trim() || '';
|
|
1147
|
-
}
|
|
1148
|
-
else if (child.nodeType === Node.ELEMENT_NODE) {
|
|
1149
|
-
trimTextNodes(child);
|
|
1150
|
-
}
|
|
1151
|
-
});
|
|
1152
|
-
};
|
|
1153
|
-
/**
|
|
1154
|
-
* Extracts and clones content from an `ion-select-option` element
|
|
1155
|
-
* for rendering within overlay interfaces or the select text when `customHTMLEnabled` is `true`.
|
|
1156
|
-
*
|
|
1157
|
-
* @param option - The `ion-select-option` element to extract content from.
|
|
1158
|
-
* @param slotName - Optional slot name to extract. If omitted, extracts the default slot content.
|
|
1159
|
-
* @param useHTML - If `true`, the returned string will include any custom HTML content. If `false`, the returned string will be plain text without any HTML.
|
|
1160
|
-
* @returns When `useHTML` is `true`, a sanitized HTML string. When `false`, a
|
|
1161
|
-
* div element containing cloned child nodes. Returns `null` if no matching
|
|
1162
|
-
* content is found.
|
|
1163
|
-
*/
|
|
1164
|
-
const getOptionContent = (option, slotName, useHTML = false) => {
|
|
1165
|
-
let nodes;
|
|
1166
|
-
if (slotName) {
|
|
1167
|
-
// Named slot: get elements with matching slot attribute
|
|
1168
|
-
nodes = Array.from(option.children).filter((el) => el.getAttribute('slot') === slotName);
|
|
1169
|
-
}
|
|
1170
|
-
else {
|
|
1171
|
-
// Default slot: get nodes without a slot attribute
|
|
1172
|
-
const defaultSlot = getOptionDefaultSlot(option) || [];
|
|
1173
|
-
nodes = defaultSlot.filter((node) => {
|
|
1174
|
-
/**
|
|
1175
|
-
* Exclude whitespace-only text nodes (newline noise between
|
|
1176
|
-
* markup elements). Element nodes are always kept, even when
|
|
1177
|
-
* their textContent is empty (e.g. <svg>, <img>).
|
|
1178
|
-
*/
|
|
1179
|
-
if (node.nodeType === Node.TEXT_NODE) {
|
|
1180
|
-
return node.textContent?.trim().length !== 0;
|
|
1181
|
-
}
|
|
1182
|
-
return true;
|
|
1183
|
-
});
|
|
1184
|
-
}
|
|
1185
|
-
if (nodes.length === 0) {
|
|
1186
|
-
return null;
|
|
1187
|
-
}
|
|
1188
|
-
// Return plain text if no elements are found
|
|
1189
|
-
if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
|
|
1190
|
-
return nodes.map((n) => n.textContent?.trim()).join(' ') || null;
|
|
1191
|
-
}
|
|
1192
|
-
/**
|
|
1193
|
-
* Mirror known custom-element properties (e.g. ion-icon's `icon`)
|
|
1194
|
-
* onto attributes before cloning. Frameworks like Vue set these as
|
|
1195
|
-
* DOM properties, which `cloneNode` doesn't copy, so without this
|
|
1196
|
-
* step the cloned overlay copy renders without the prop's value.
|
|
1197
|
-
*/
|
|
1198
|
-
nodes.forEach((n) => {
|
|
1199
|
-
if (n.nodeType === Node.ELEMENT_NODE) {
|
|
1200
|
-
index$2.reflectPropertiesToAttributes(n);
|
|
1201
|
-
}
|
|
1202
|
-
});
|
|
1203
|
-
// Clone each node into a temporary container
|
|
1204
|
-
const container = document.createElement('div');
|
|
1205
|
-
nodes.forEach((n) => {
|
|
1206
|
-
const clone = n.cloneNode(true);
|
|
1207
|
-
if (clone.nodeType === Node.TEXT_NODE) {
|
|
1208
|
-
clone.textContent = clone.textContent?.trim() || '';
|
|
1209
|
-
}
|
|
1210
|
-
else {
|
|
1211
|
-
trimTextNodes(clone);
|
|
1212
|
-
}
|
|
1213
|
-
container.appendChild(clone);
|
|
1214
|
-
});
|
|
1215
|
-
/**
|
|
1216
|
-
* Sanitize the cloned DOM in place. Trusted attributes (size, color,
|
|
1217
|
-
* shape, etc.) are preserved; event handlers, javascript: URLs, and
|
|
1218
|
-
* blocked tags are stripped.
|
|
1219
|
-
*/
|
|
1220
|
-
index$2.sanitizeDOMTree(container);
|
|
1221
|
-
if (useHTML) {
|
|
1222
|
-
return container.innerHTML.trim() || null;
|
|
1223
|
-
}
|
|
1224
|
-
return container;
|
|
1225
|
-
};
|
|
1226
|
-
/**
|
|
1227
|
-
* Returns the child nodes that belong to the default slot of an
|
|
1228
|
-
* option element, excluding any nodes that are assigned to named
|
|
1229
|
-
* slots.
|
|
1230
|
-
*
|
|
1231
|
-
* @param option - The `ion-select-option` element to extract default-slot nodes from.
|
|
1232
|
-
* @returns An array of default slot nodes, or `null` if none are found.
|
|
1233
|
-
*/
|
|
1234
|
-
const getOptionDefaultSlot = (option) => {
|
|
1235
|
-
const defaultSlotNodes = Array.from(option.childNodes).filter((node) => {
|
|
1236
|
-
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
1237
|
-
return !node.hasAttribute('slot');
|
|
1238
|
-
}
|
|
1239
|
-
return node.nodeType === Node.TEXT_NODE;
|
|
1240
|
-
});
|
|
1241
|
-
if (defaultSlotNodes.length === 0) {
|
|
1242
|
-
return null;
|
|
1243
|
-
}
|
|
1244
|
-
return defaultSlotNodes;
|
|
1245
|
-
};
|
|
1246
|
-
/**
|
|
1247
|
-
* Extracts plain text from only the default slot of an option,
|
|
1248
|
-
* excluding content assigned to named slots (start/end).
|
|
1249
|
-
*/
|
|
1250
|
-
const getDefaultSlotPlainText = (option) => {
|
|
1251
|
-
const texts = Array.from(option.childNodes)
|
|
1252
|
-
.filter((node) => {
|
|
1253
|
-
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
1254
|
-
return !node.hasAttribute('slot');
|
|
1255
|
-
}
|
|
1256
|
-
return node.nodeType === Node.TEXT_NODE;
|
|
1257
|
-
})
|
|
1258
|
-
.filter((node) => node.nodeType === Node.TEXT_NODE)
|
|
1259
|
-
.map((n) => n.textContent?.trim())
|
|
1260
|
-
.filter((t) => t);
|
|
1261
|
-
return texts.join(' ');
|
|
1262
|
-
};
|
|
1263
|
-
/**
|
|
1264
|
-
* Extracts the rich content from an `ion-select-option`.
|
|
1265
|
-
* When `customHTMLEnabled` is `false`, only the plain text from the
|
|
1266
|
-
* default slot is read and the start and end slots are skipped.
|
|
1267
|
-
*
|
|
1268
|
-
* @param option - The `ion-select-option` element to extract content from.
|
|
1269
|
-
* @param customHTMLEnabled - Whether custom HTML rendering is enabled
|
|
1270
|
-
* via the `innerHTMLTemplatesEnabled` config.
|
|
1271
|
-
*/
|
|
1272
|
-
const extractOptionContent = (option, customHTMLEnabled) => {
|
|
1273
|
-
if (!customHTMLEnabled) {
|
|
1274
|
-
return {
|
|
1275
|
-
content: getDefaultSlotPlainText(option),
|
|
1276
|
-
startContent: undefined,
|
|
1277
|
-
endContent: undefined,
|
|
1278
|
-
};
|
|
1279
|
-
}
|
|
1280
|
-
return {
|
|
1281
|
-
content: getOptionContent(option),
|
|
1282
|
-
startContent: getOptionContent(option, 'start') ?? undefined,
|
|
1283
|
-
endContent: getOptionContent(option, 'end') ?? undefined,
|
|
1284
|
-
};
|
|
861
|
+
return selectOpt ? selectOpt.textContent : null;
|
|
1285
862
|
};
|
|
1286
863
|
let selectIds = 0;
|
|
1287
864
|
const OPTION_CLASS = 'select-interface-option';
|
|
@@ -1295,91 +872,36 @@ const selectOptionCss = () => `:host{display:none}`;
|
|
|
1295
872
|
const SelectOption = class {
|
|
1296
873
|
constructor(hostRef) {
|
|
1297
874
|
index.registerInstance(this, hostRef);
|
|
875
|
+
this.inputId = `ion-selopt-${selectOptionIds++}`;
|
|
876
|
+
/**
|
|
877
|
+
* If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
|
|
878
|
+
*/
|
|
879
|
+
this.disabled = false;
|
|
1298
880
|
}
|
|
1299
|
-
inputId = `ion-selopt-${selectOptionIds++}`;
|
|
1300
|
-
get el() { return index.getElement(this); }
|
|
1301
|
-
/**
|
|
1302
|
-
* If `true`, the user cannot interact with the select option.
|
|
1303
|
-
*/
|
|
1304
|
-
disabled = false;
|
|
1305
|
-
/**
|
|
1306
|
-
* The text value of the option.
|
|
1307
|
-
*/
|
|
1308
|
-
value;
|
|
1309
|
-
/**
|
|
1310
|
-
* Text that is placed underneath the option text to provide additional details about the option.
|
|
1311
|
-
*/
|
|
1312
|
-
description;
|
|
1313
|
-
/**
|
|
1314
|
-
* Where the label is placed relative to the option's selection control
|
|
1315
|
-
* (radio circle or checkbox box) when the option is rendered in an
|
|
1316
|
-
* `alert`, `popover`, or `modal` interface.
|
|
1317
|
-
* `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL.
|
|
1318
|
-
* `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.
|
|
1319
|
-
*
|
|
1320
|
-
* Applies to the `alert`, `popover`, and `modal` interfaces, but has no
|
|
1321
|
-
* visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).
|
|
1322
|
-
*
|
|
1323
|
-
* When unset, the interface picks a default based on mode and control
|
|
1324
|
-
* type.
|
|
1325
|
-
*/
|
|
1326
|
-
labelPlacement;
|
|
1327
|
-
/**
|
|
1328
|
-
* How to pack the label and the option's selection control within a line.
|
|
1329
|
-
* `"start"`: The label and radio will appear on the left in LTR and
|
|
1330
|
-
* on the right in RTL.
|
|
1331
|
-
* `"end"`: The label and radio will appear on the right in LTR and
|
|
1332
|
-
* on the left in RTL.
|
|
1333
|
-
* `"space-between"`: The label and radio will appear on opposite
|
|
1334
|
-
* ends of the line with space between the two elements.
|
|
1335
|
-
*
|
|
1336
|
-
* Applies to the `alert`, `popover`, and `modal` interfaces, but has no
|
|
1337
|
-
* visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).
|
|
1338
|
-
*
|
|
1339
|
-
* When unset, the interface picks a default based on mode and control
|
|
1340
|
-
* type.
|
|
1341
|
-
*/
|
|
1342
|
-
justify;
|
|
1343
881
|
render() {
|
|
1344
|
-
return index.h(index.Host, { key: '
|
|
882
|
+
return index.h(index.Host, { key: '824730b6c1e4f15b716e91b05840e890af5f1577', role: "option", id: this.inputId, class: ionicGlobal.getIonMode(this) });
|
|
1345
883
|
}
|
|
884
|
+
get el() { return index.getElement(this); }
|
|
1346
885
|
};
|
|
1347
886
|
let selectOptionIds = 0;
|
|
1348
887
|
SelectOption.style = selectOptionCss();
|
|
1349
888
|
|
|
1350
|
-
const selectPopoverIosCss = () => `.
|
|
889
|
+
const selectPopoverIosCss = () => `.sc-ion-select-popover-ios-h ion-list.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-ios,ion-label.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-ios-h{overflow-y:auto}`;
|
|
1351
890
|
|
|
1352
|
-
const selectPopoverMdCss = () => `.
|
|
891
|
+
const selectPopoverMdCss = () => `.sc-ion-select-popover-md-h ion-list.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-md,ion-label.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.sc-ion-select-popover-md-h{overflow-y:auto}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(container),ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md [part~="container"]{display:none}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md::part(label),ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-popover-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-popover-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-popover-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
|
|
1353
892
|
|
|
1354
893
|
const SelectPopover = class {
|
|
1355
894
|
constructor(hostRef) {
|
|
1356
895
|
index.registerInstance(this, hostRef);
|
|
896
|
+
// Tracks the option that received Enter-keydown so keyup only
|
|
897
|
+
// dismisses when the press started on the same option. Prevents
|
|
898
|
+
// Enter on the triggering ion-select from auto-dismissing.
|
|
899
|
+
this.pendingEnterTarget = null;
|
|
900
|
+
/**
|
|
901
|
+
* An array of options for the popover
|
|
902
|
+
*/
|
|
903
|
+
this.options = [];
|
|
1357
904
|
}
|
|
1358
|
-
get el() { return index.getElement(this); }
|
|
1359
|
-
// Tracks the option that received Enter-keydown so keyup only
|
|
1360
|
-
// dismisses when the press started on the same option. Prevents
|
|
1361
|
-
// Enter on the triggering ion-select from auto-dismissing.
|
|
1362
|
-
pendingEnterTarget = null;
|
|
1363
|
-
/**
|
|
1364
|
-
* The header text of the popover
|
|
1365
|
-
*/
|
|
1366
|
-
header;
|
|
1367
|
-
/**
|
|
1368
|
-
* The subheader text of the popover
|
|
1369
|
-
*/
|
|
1370
|
-
subHeader;
|
|
1371
|
-
/**
|
|
1372
|
-
* The text content of the popover body
|
|
1373
|
-
*/
|
|
1374
|
-
message;
|
|
1375
|
-
/**
|
|
1376
|
-
* If true, the select accepts multiple values
|
|
1377
|
-
*/
|
|
1378
|
-
multiple;
|
|
1379
|
-
/**
|
|
1380
|
-
* An array of options for the popover
|
|
1381
|
-
*/
|
|
1382
|
-
options = [];
|
|
1383
905
|
findOptionFromEvent(ev) {
|
|
1384
906
|
const { options } = this;
|
|
1385
907
|
return options.find((o) => o.value === ev.target.value);
|
|
@@ -1392,7 +914,7 @@ const SelectPopover = class {
|
|
|
1392
914
|
callOptionHandler(ev) {
|
|
1393
915
|
const option = this.findOptionFromEvent(ev);
|
|
1394
916
|
const values = this.getValues(ev);
|
|
1395
|
-
if (option
|
|
917
|
+
if (option === null || option === void 0 ? void 0 : option.handler) {
|
|
1396
918
|
overlays.safeCall(option.handler, values);
|
|
1397
919
|
}
|
|
1398
920
|
}
|
|
@@ -1437,94 +959,45 @@ const SelectPopover = class {
|
|
|
1437
959
|
}
|
|
1438
960
|
}
|
|
1439
961
|
renderCheckboxOptions(options) {
|
|
1440
|
-
|
|
1441
|
-
return options.map((option, index$1) => {
|
|
1442
|
-
/**
|
|
1443
|
-
* Cast to `SelectOverlayOption` to access rich content
|
|
1444
|
-
* fields (`startContent`, `endContent`, `description`)
|
|
1445
|
-
* that are passed through from `ion-select` but not
|
|
1446
|
-
* part of the public `SelectPopoverOption` interface.
|
|
1447
|
-
*/
|
|
1448
|
-
const richOption = option;
|
|
1449
|
-
const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
|
|
1450
|
-
const optionLabelOptions = {
|
|
1451
|
-
id: `popover-option-${index$1}`,
|
|
1452
|
-
label: richOption.text,
|
|
1453
|
-
startContent: richOption.startContent,
|
|
1454
|
-
endContent: richOption.endContent,
|
|
1455
|
-
description: richOption.description,
|
|
1456
|
-
};
|
|
1457
|
-
const defaultLabelPlacement = overlayControlLabel.getOverlayLabelPlacement(mode, 'checkbox');
|
|
1458
|
-
const defaultJustify = overlayControlLabel.getOverlayLabelJustify(mode, 'checkbox');
|
|
1459
|
-
return (index.h("ion-item", {
|
|
962
|
+
return options.map((option) => (index.h("ion-item", { class: Object.assign({
|
|
1460
963
|
// TODO FW-4784
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
}, value: option.value, disabled: option.disabled, checked: option.checked, justify: richOption.justify ?? defaultJustify, labelPlacement: richOption.labelPlacement ?? defaultLabelPlacement, onIonChange: (ev) => {
|
|
1469
|
-
this.setChecked(ev);
|
|
1470
|
-
this.callOptionHandler(ev);
|
|
1471
|
-
// TODO FW-4784
|
|
1472
|
-
index.forceUpdate(this);
|
|
1473
|
-
} }, selectOptionRender.renderOptionLabel(optionLabelOptions, 'select-option-label'))));
|
|
1474
|
-
});
|
|
964
|
+
'item-checkbox-checked': option.checked
|
|
965
|
+
}, theme.getClassMap(option.cssClass)) }, index.h("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
|
|
966
|
+
this.setChecked(ev);
|
|
967
|
+
this.callOptionHandler(ev);
|
|
968
|
+
// TODO FW-4784
|
|
969
|
+
index.forceUpdate(this);
|
|
970
|
+
} }, option.text))));
|
|
1475
971
|
}
|
|
1476
972
|
renderRadioOptions(options) {
|
|
1477
|
-
const mode = ionicGlobal.getIonMode(this);
|
|
1478
973
|
const checked = options.filter((o) => o.checked).map((o) => o.value)[0];
|
|
1479
|
-
return (index.h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option
|
|
1480
|
-
/**
|
|
1481
|
-
* Cast to `SelectOverlayOption` to access rich content
|
|
1482
|
-
* fields (`startContent`, `endContent`, `description`)
|
|
1483
|
-
* that are passed through from `ion-select` but not
|
|
1484
|
-
* part of the public `SelectPopoverOption` interface.
|
|
1485
|
-
*/
|
|
1486
|
-
const richOption = option;
|
|
1487
|
-
const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
|
|
1488
|
-
const optionLabelOptions = {
|
|
1489
|
-
id: `popover-option-${index$1}`,
|
|
1490
|
-
label: richOption.text,
|
|
1491
|
-
startContent: richOption.startContent,
|
|
1492
|
-
endContent: richOption.endContent,
|
|
1493
|
-
description: richOption.description,
|
|
1494
|
-
};
|
|
1495
|
-
return (index.h("ion-item", {
|
|
974
|
+
return (index.h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, options.map((option) => (index.h("ion-item", { class: Object.assign({
|
|
1496
975
|
// TODO FW-4784
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
976
|
+
'item-radio-checked': option.value === checked
|
|
977
|
+
}, theme.getClassMap(option.cssClass)) }, index.h("ion-radio", { value: option.value, disabled: option.disabled, onClick: () => this.dismissParentPopover(), onKeyDown: (ev) => {
|
|
978
|
+
if (ev.key === 'Enter' && !ev.repeat) {
|
|
979
|
+
this.pendingEnterTarget = ev.currentTarget;
|
|
1501
980
|
}
|
|
1502
|
-
},
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
981
|
+
}, onKeyUp: (ev) => {
|
|
982
|
+
if (ev.key === ' ') {
|
|
983
|
+
// Space selects and dismisses in one press.
|
|
984
|
+
this.dismissParentPopover();
|
|
985
|
+
}
|
|
986
|
+
else if (ev.key === 'Enter') {
|
|
987
|
+
const shouldDismiss = this.pendingEnterTarget === ev.currentTarget;
|
|
988
|
+
this.pendingEnterTarget = null;
|
|
989
|
+
if (shouldDismiss) {
|
|
1511
990
|
this.dismissParentPopover();
|
|
1512
991
|
}
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
this.pendingEnterTarget = null;
|
|
1516
|
-
if (shouldDismiss) {
|
|
1517
|
-
this.dismissParentPopover();
|
|
1518
|
-
}
|
|
1519
|
-
}
|
|
1520
|
-
} }, selectOptionRender.renderOptionLabel(optionLabelOptions, 'select-option-label'))));
|
|
1521
|
-
})));
|
|
992
|
+
}
|
|
993
|
+
} }, option.text))))));
|
|
1522
994
|
}
|
|
1523
995
|
render() {
|
|
1524
996
|
const { header, message, options, subHeader } = this;
|
|
1525
997
|
const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
|
|
1526
|
-
return (index.h(index.Host, { key: '
|
|
998
|
+
return (index.h(index.Host, { key: 'e7449a1ecfcdbf45a79f8e26a00253c4e146448a', class: ionicGlobal.getIonMode(this) }, index.h("ion-list", { key: '52abdfc8668c3429a0dcefef8ddedb6647fdd894' }, header !== undefined && index.h("ion-list-header", { key: '978e5c03728756feafcc60a0e10e6ec59bf2ae11' }, header), hasSubHeaderOrMessage && (index.h("ion-item", { key: 'e93c44e7f07a76def16e4b11f0fb4780d84ed402' }, index.h("ion-label", { key: 'bba1aac43b0bc7f4f00978dd8301985233f3725c', class: "ion-text-wrap" }, subHeader !== undefined && index.h("h3", { key: 'ad96f6017cf2cc5219540bded2c4f1ca3b532de2' }, subHeader), message !== undefined && index.h("p", { key: '3fd038921dc40c4d0c29734433984b279ccaeec3' }, message)))), this.renderOptions(options))));
|
|
1527
999
|
}
|
|
1000
|
+
get el() { return index.getElement(this); }
|
|
1528
1001
|
};
|
|
1529
1002
|
SelectPopover.style = {
|
|
1530
1003
|
ios: selectPopoverIosCss(),
|