@ionic/core 8.8.9-dev.11780493937.17fe092d → 8.8.9-dev.11780683233.1c5e9d9b
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/ion-action-sheet.js +1 -1
- package/components/ion-alert.js +1 -1
- package/components/ion-back-button.js +1 -1
- package/components/ion-button.js +1 -1
- package/components/ion-card.js +1 -1
- package/components/ion-chip.js +1 -1
- package/components/ion-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-footer.js +1 -1
- package/components/ion-gallery-item.d.ts +11 -0
- package/components/ion-gallery-item.js +4 -0
- package/components/ion-gallery.js +1 -1
- package/components/ion-grid.js +1 -1
- package/components/ion-header.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-legacy-column.js +1 -1
- package/components/ion-picker-legacy.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-router-link.js +1 -1
- package/components/ion-router-outlet.js +1 -1
- package/components/ion-row.js +1 -1
- package/components/ion-searchbar.js +1 -1
- package/components/ion-segment-button.js +1 -1
- package/components/ion-segment-content.js +1 -1
- package/components/ion-segment-view.js +1 -1
- package/components/ion-segment.js +1 -1
- package/components/ion-select-modal.js +1 -1
- package/components/ion-select-option.js +1 -1
- package/components/ion-select-popover.js +1 -1
- package/components/ion-select.js +1 -1
- package/components/ion-skeleton-text.js +1 -1
- package/components/ion-spinner.js +1 -1
- package/components/ion-split-pane.js +1 -1
- package/components/ion-tab-bar.js +1 -1
- package/components/ion-tab-button.js +1 -1
- package/components/ion-tab.js +1 -1
- package/components/ion-tabs.js +1 -1
- package/components/ion-text.js +1 -1
- package/components/ion-textarea.js +1 -1
- package/components/ion-thumbnail.js +1 -1
- package/components/ion-title.js +1 -1
- package/components/ion-toast.js +1 -1
- package/components/ion-toggle.js +1 -1
- package/components/ion-toolbar.js +1 -1
- package/components/p-7kL3tltU.js +4 -0
- package/components/{p-CPm7KgOP.js → p-BFZBl0TS.js} +1 -1
- package/components/{p-pvh0bjpw.js → p-BVi3gqm6.js} +1 -1
- package/components/{p-D6g8ud1e.js → p-BVk7LVs0.js} +1 -1
- package/components/{p-B9MABkWm.js → p-BdUtZxku.js} +1 -1
- package/components/{p-CzC_ZSgb.js → p-Be8tHurp.js} +1 -1
- package/components/{p-C8kBejTT.js → p-CG3ZV6ON.js} +1 -1
- package/components/{p-CBS0sBAa.js → p-CaqTORfV.js} +1 -1
- package/components/{p-D2mReIu8.js → p-CkA0SI9d.js} +1 -1
- package/components/{p-DAXhdEp5.js → p-CsakePQg.js} +1 -1
- package/components/{p-CgSn4J7d.js → p-D1gEOh9B.js} +1 -1
- package/components/{p-IYdTEyGb.js → p-D3qBmaqi.js} +1 -1
- package/components/{p-Do7NMUwR.js → p-DGn-jQpr.js} +1 -1
- package/components/p-DH4JHV73.js +4 -0
- package/components/{p-DCS3n7Uq.js → p-DYK0qX7x.js} +1 -1
- package/components/{p-Dp2x0MpA.js → p-DfV7pOtM.js} +1 -1
- package/components/{p-BhkGOA7t.js → p-F3N54OKJ.js} +1 -1
- package/components/{p-CgZLVOCc.js → p-MPREydZp.js} +1 -1
- package/components/{p-kKYBfhbe.js → p-OFfrVDLw.js} +1 -1
- package/components/p-iZO3WzZT.js +4 -0
- package/components/p-qclL-gNR.js +4 -0
- package/dist/cjs/ion-app_8.cjs.entry.js +33 -291
- package/dist/cjs/ion-avatar_3.cjs.entry.js +2 -2
- package/dist/cjs/ion-col_3.cjs.entry.js +4 -4
- package/dist/cjs/ion-datetime_3.cjs.entry.js +4 -4
- package/dist/cjs/ion-gallery-item.cjs.entry.js +79 -0
- package/dist/cjs/ion-gallery.cjs.entry.js +96 -14
- package/dist/cjs/ion-img.cjs.entry.js +2 -2
- package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-input-otp.cjs.entry.js +3 -3
- package/dist/cjs/ion-input-password-toggle.cjs.entry.js +3 -3
- package/dist/cjs/ion-input.cjs.entry.js +4 -4
- package/dist/cjs/ion-item-option_3.cjs.entry.js +4 -4
- package/dist/cjs/ion-item_8.cjs.entry.js +12 -12
- package/dist/cjs/ion-loading.cjs.entry.js +2 -2
- package/dist/cjs/ion-menu_3.cjs.entry.js +6 -6
- package/dist/cjs/ion-modal.cjs.entry.js +4 -4
- package/dist/cjs/ion-nav_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-picker-column-option.cjs.entry.js +2 -2
- package/dist/cjs/ion-popover.cjs.entry.js +2 -2
- package/dist/cjs/ion-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/ion-radio_2.cjs.entry.js +5 -5
- package/dist/cjs/ion-range.cjs.entry.js +3 -3
- package/dist/cjs/ion-refresher_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-reorder_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-ripple-effect.cjs.entry.js +1 -1
- package/dist/cjs/ion-route_4.cjs.entry.js +2 -2
- package/dist/cjs/ion-searchbar.cjs.entry.js +4 -4
- package/dist/cjs/ion-segment-content.cjs.entry.js +1 -1
- package/dist/cjs/ion-segment-view.cjs.entry.js +2 -2
- package/dist/cjs/ion-segment_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +6 -6
- package/dist/cjs/ion-spinner.cjs.entry.js +1 -1
- package/dist/cjs/ion-split-pane.cjs.entry.js +2 -2
- package/dist/cjs/ion-tab-bar_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-tab_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-text.cjs.entry.js +2 -2
- package/dist/cjs/ion-textarea.cjs.entry.js +3 -3
- package/dist/cjs/ion-toast.cjs.entry.js +2 -2
- package/dist/cjs/ion-toggle.cjs.entry.js +3 -3
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/content/content.css +0 -56
- package/dist/collection/components/footer/footer.ios.css +0 -13
- package/dist/collection/components/footer/footer.js +18 -65
- package/dist/collection/components/footer/footer.md.css +0 -13
- package/dist/collection/components/footer/footer.utils.js +0 -9
- package/dist/collection/components/gallery/gallery.css +1 -86
- package/dist/collection/components/gallery/gallery.js +85 -16
- package/dist/collection/components/gallery/test/utils.js +13 -13
- package/dist/collection/components/gallery-item/gallery-item.css +87 -0
- package/dist/collection/components/gallery-item/gallery-item.js +95 -0
- package/dist/collection/components/grid/grid.js +2 -2
- package/dist/collection/components/header/header.ionic.css +0 -75
- package/dist/collection/components/header/header.ios.css +0 -75
- package/dist/collection/components/header/header.js +11 -41
- package/dist/collection/components/header/header.md.css +0 -75
- package/dist/collection/components/header/header.utils.js +0 -9
- package/dist/collection/components/img/img.js +2 -2
- package/dist/collection/components/infinite-scroll/infinite-scroll.js +1 -1
- package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js +2 -2
- package/dist/collection/components/input/input.js +4 -4
- package/dist/collection/components/input-otp/input-otp.js +3 -3
- package/dist/collection/components/input-password-toggle/input-password-toggle.js +3 -3
- package/dist/collection/components/item-divider/item-divider.js +2 -2
- package/dist/collection/components/item-group/item-group.js +1 -1
- package/dist/collection/components/item-option/item-option.js +2 -2
- package/dist/collection/components/item-options/item-options.js +1 -1
- package/dist/collection/components/item-sliding/item-sliding.js +1 -1
- package/dist/collection/components/label/label.js +2 -2
- package/dist/collection/components/list/list.js +1 -1
- package/dist/collection/components/list-header/list-header.js +2 -2
- package/dist/collection/components/loading/loading.js +2 -2
- package/dist/collection/components/menu/menu.js +2 -2
- package/dist/collection/components/menu-button/menu-button.js +2 -2
- package/dist/collection/components/menu-toggle/menu-toggle.js +2 -2
- package/dist/collection/components/modal/modal.js +4 -4
- package/dist/collection/components/nav/nav.js +1 -1
- package/dist/collection/components/nav-link/nav-link.js +1 -1
- package/dist/collection/components/note/note.js +2 -2
- package/dist/collection/components/picker-column-option/picker-column-option.js +2 -2
- package/dist/collection/components/picker-legacy/picker.js +2 -2
- package/dist/collection/components/picker-legacy-column/picker-column.js +2 -2
- package/dist/collection/components/popover/popover.js +2 -2
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/radio/radio.js +3 -3
- package/dist/collection/components/radio-group/radio-group.js +2 -2
- package/dist/collection/components/range/range.js +3 -3
- package/dist/collection/components/refresher/refresher.js +1 -1
- package/dist/collection/components/refresher-content/refresher-content.js +2 -2
- package/dist/collection/components/reorder/reorder.js +2 -2
- package/dist/collection/components/reorder-group/reorder-group.js +1 -1
- package/dist/collection/components/ripple-effect/ripple-effect.js +1 -1
- package/dist/collection/components/router-link/router-link.js +2 -2
- package/dist/collection/components/router-outlet/router-outlet.js +1 -1
- package/dist/collection/components/row/row.js +2 -2
- package/dist/collection/components/searchbar/searchbar.js +4 -4
- package/dist/collection/components/segment/segment.js +2 -2
- package/dist/collection/components/segment-button/segment-button.js +2 -2
- package/dist/collection/components/segment-content/segment-content.js +1 -1
- package/dist/collection/components/segment-view/segment-view.js +2 -2
- package/dist/collection/components/select/select.js +3 -3
- package/dist/collection/components/select-modal/select-modal.js +1 -1
- package/dist/collection/components/select-option/select-option.js +1 -1
- package/dist/collection/components/select-popover/select-popover.js +2 -2
- package/dist/collection/components/skeleton-text/skeleton-text.js +2 -2
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/split-pane/split-pane.js +2 -2
- package/dist/collection/components/tab/tab.js +2 -2
- package/dist/collection/components/tab-bar/tab-bar.js +2 -2
- package/dist/collection/components/tab-button/tab-button.js +2 -2
- package/dist/collection/components/tabs/tabs.js +1 -1
- package/dist/collection/components/text/text.js +2 -2
- package/dist/collection/components/textarea/textarea.js +3 -3
- package/dist/collection/components/thumbnail/thumbnail.js +2 -2
- package/dist/collection/components/title/title.js +2 -2
- package/dist/collection/components/toast/toast.js +2 -2
- package/dist/collection/components/toggle/toggle.js +3 -3
- package/dist/collection/components/toolbar/toolbar.js +2 -2
- package/dist/collection/utils/css-value-validation.js +14 -0
- package/dist/docs.json +96 -20
- package/dist/esm/ion-app_8.entry.js +33 -291
- package/dist/esm/ion-avatar_3.entry.js +2 -2
- package/dist/esm/ion-col_3.entry.js +4 -4
- package/dist/esm/ion-datetime_3.entry.js +4 -4
- package/dist/esm/ion-gallery-item.entry.js +77 -0
- package/dist/esm/ion-gallery.entry.js +96 -14
- package/dist/esm/ion-img.entry.js +2 -2
- package/dist/esm/ion-infinite-scroll_2.entry.js +3 -3
- package/dist/esm/ion-input-otp.entry.js +3 -3
- package/dist/esm/ion-input-password-toggle.entry.js +3 -3
- package/dist/esm/ion-input.entry.js +4 -4
- package/dist/esm/ion-item-option_3.entry.js +4 -4
- package/dist/esm/ion-item_8.entry.js +12 -12
- package/dist/esm/ion-loading.entry.js +2 -2
- package/dist/esm/ion-menu_3.entry.js +6 -6
- package/dist/esm/ion-modal.entry.js +4 -4
- package/dist/esm/ion-nav_2.entry.js +2 -2
- package/dist/esm/ion-picker-column-option.entry.js +2 -2
- package/dist/esm/ion-popover.entry.js +2 -2
- package/dist/esm/ion-progress-bar.entry.js +1 -1
- package/dist/esm/ion-radio_2.entry.js +5 -5
- package/dist/esm/ion-range.entry.js +3 -3
- package/dist/esm/ion-refresher_2.entry.js +3 -3
- package/dist/esm/ion-reorder_2.entry.js +3 -3
- package/dist/esm/ion-ripple-effect.entry.js +1 -1
- package/dist/esm/ion-route_4.entry.js +2 -2
- package/dist/esm/ion-searchbar.entry.js +4 -4
- package/dist/esm/ion-segment-content.entry.js +1 -1
- package/dist/esm/ion-segment-view.entry.js +2 -2
- package/dist/esm/ion-segment_2.entry.js +4 -4
- package/dist/esm/ion-select-modal.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +6 -6
- package/dist/esm/ion-spinner.entry.js +1 -1
- package/dist/esm/ion-split-pane.entry.js +2 -2
- package/dist/esm/ion-tab-bar_2.entry.js +4 -4
- package/dist/esm/ion-tab_2.entry.js +3 -3
- package/dist/esm/ion-text.entry.js +2 -2
- package/dist/esm/ion-textarea.entry.js +3 -3
- package/dist/esm/ion-toast.entry.js +2 -2
- package/dist/esm/ion-toggle.entry.js +3 -3
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/html.html-data.json +45 -9
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-f7ca50a5.entry.js → p-0592c549.entry.js} +1 -1
- package/dist/ionic/{p-67c2d349.entry.js → p-0aa510cd.entry.js} +1 -1
- package/dist/ionic/{p-9ccfb733.entry.js → p-0cd5fd9d.entry.js} +1 -1
- package/dist/ionic/{p-bf0c5a8d.entry.js → p-0e9d4e11.entry.js} +1 -1
- package/dist/ionic/{p-497f6391.entry.js → p-11a38333.entry.js} +1 -1
- package/dist/ionic/{p-0030507d.entry.js → p-1a009a51.entry.js} +1 -1
- package/dist/ionic/{p-7186786e.entry.js → p-23e524f8.entry.js} +1 -1
- package/dist/ionic/{p-1439fecb.entry.js → p-2826761a.entry.js} +1 -1
- package/dist/ionic/{p-93315d96.entry.js → p-2c4170d8.entry.js} +1 -1
- package/dist/ionic/p-2d5a2511.entry.js +4 -0
- package/dist/ionic/{p-7f294078.entry.js → p-3706ea52.entry.js} +1 -1
- package/dist/ionic/{p-b69add0e.entry.js → p-3e376501.entry.js} +1 -1
- package/dist/ionic/{p-c684a3b6.entry.js → p-44597202.entry.js} +1 -1
- package/dist/ionic/{p-8458f1b6.entry.js → p-4a27a79a.entry.js} +1 -1
- package/dist/ionic/{p-b7235e85.entry.js → p-4f07113d.entry.js} +1 -1
- package/dist/ionic/{p-88e7f52a.entry.js → p-52b85650.entry.js} +1 -1
- package/dist/ionic/{p-199bffb3.entry.js → p-5a6e0ae1.entry.js} +1 -1
- package/dist/ionic/p-6906dca7.entry.js +4 -0
- package/dist/ionic/{p-19a1ff9a.entry.js → p-7b09c19d.entry.js} +1 -1
- package/dist/ionic/{p-76c70824.entry.js → p-7b886782.entry.js} +1 -1
- package/dist/ionic/{p-89eab395.entry.js → p-82c05be2.entry.js} +1 -1
- package/dist/ionic/{p-b653f4c2.entry.js → p-83c0eb9b.entry.js} +1 -1
- package/dist/ionic/{p-b4fd91b8.entry.js → p-85ff1314.entry.js} +1 -1
- package/dist/ionic/{p-3f18dfe9.entry.js → p-8eca5ba1.entry.js} +1 -1
- package/dist/ionic/{p-f08edb25.entry.js → p-96f52444.entry.js} +1 -1
- package/dist/ionic/{p-f167c55c.entry.js → p-a3b047e0.entry.js} +1 -1
- package/dist/ionic/{p-40d9e029.entry.js → p-a73caa5e.entry.js} +1 -1
- package/dist/ionic/{p-1ad16c09.entry.js → p-b0dfd018.entry.js} +1 -1
- package/dist/ionic/{p-a3f9be52.entry.js → p-b6130fe4.entry.js} +1 -1
- package/dist/ionic/{p-084c2623.entry.js → p-c5f745b4.entry.js} +1 -1
- package/dist/ionic/{p-52ed96a8.entry.js → p-c781241c.entry.js} +1 -1
- package/dist/ionic/p-cb154afe.entry.js +4 -0
- package/dist/ionic/{p-031df892.entry.js → p-cde69f38.entry.js} +1 -1
- package/dist/ionic/p-d6f0a698.entry.js +4 -0
- package/dist/ionic/{p-dd2981d0.entry.js → p-d9804d04.entry.js} +1 -1
- package/dist/ionic/{p-7054a1b9.entry.js → p-e342b205.entry.js} +1 -1
- package/dist/ionic/p-e4071bf8.entry.js +4 -0
- package/dist/ionic/{p-9dfbe98d.entry.js → p-e8916b04.entry.js} +1 -1
- package/dist/ionic/{p-dac1d4de.entry.js → p-f10f8f95.entry.js} +1 -1
- package/dist/ionic/p-fdcbe59a.entry.js +4 -0
- package/dist/types/components/footer/footer.d.ts +2 -12
- package/dist/types/components/footer/footer.utils.d.ts +0 -1
- package/dist/types/components/gallery/gallery.d.ts +33 -8
- package/dist/types/components/gallery/test/utils.d.ts +1 -1
- package/dist/types/components/gallery-item/gallery-item.d.ts +35 -0
- package/dist/types/components/header/header.d.ts +3 -10
- package/dist/types/components/header/header.utils.d.ts +0 -1
- package/dist/types/components.d.ts +41 -12
- package/dist/types/utils/css-value-validation.d.ts +9 -0
- package/hydrate/index.js +334 -421
- package/hydrate/index.mjs +334 -421
- package/package.json +1 -1
- package/components/p-BF5oFX1I.js +0 -4
- package/components/p-CpFORZud.js +0 -4
- package/components/p-GElQZ38c.js +0 -4
- package/components/p-d77Zk1DK.js +0 -4
- package/components/p-hdGd8ben.js +0 -4
- package/dist/collection/utils/on-scroll/collapse-hide.utils.js +0 -168
- package/dist/ionic/p-04b5794c.entry.js +0 -4
- package/dist/ionic/p-2aa7567e.entry.js +0 -4
- package/dist/ionic/p-44d483c2.entry.js +0 -4
- package/dist/ionic/p-ad4d0138.entry.js +0 -4
- package/dist/ionic/p-ff09d2a5.entry.js +0 -4
- package/dist/types/utils/on-scroll/collapse-hide.utils.d.ts +0 -26
|
@@ -89,7 +89,7 @@ Buttons.style = {
|
|
|
89
89
|
md: buttonsMdCss()
|
|
90
90
|
};
|
|
91
91
|
|
|
92
|
-
const contentCss = () => `:host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}#background-content{right:0px;left:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{right:0px;left:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom) + var(--internal-content-safe-area-padding-bottom, 0px));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:""}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}
|
|
92
|
+
const contentCss = () => `:host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;-ms-flex:1;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}#background-content{right:0px;left:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{right:0px;left:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom) + var(--internal-content-safe-area-padding-bottom, 0px));position:absolute;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:pan-x pan-y pinch-zoom;touch-action:pan-x pan-y pinch-zoom}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:""}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:100%;height:100%;-webkit-box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03);box-shadow:inset -9px 0 9px 0 rgba(0, 0, 100, 0.03)}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;-webkit-transform:scaleX(-1);transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0)}`;
|
|
93
93
|
|
|
94
94
|
const Content = class {
|
|
95
95
|
constructor(hostRef) {
|
|
@@ -530,171 +530,6 @@ const updateScrollDetail = (detail, el, timestamp, shouldStart) => {
|
|
|
530
530
|
};
|
|
531
531
|
Content.style = contentCss();
|
|
532
532
|
|
|
533
|
-
/** Cumulative downward delta before hiding (header or footer `collapse="hide"`). */
|
|
534
|
-
const COLLAPSE_HIDE_THRESHOLD_PX = 24;
|
|
535
|
-
/**
|
|
536
|
-
* Cumulative upward delta before showing again after hide. Small bias
|
|
537
|
-
* (instead of "any upward delta") guards against inertial-scroll
|
|
538
|
-
* oscillation flicking the region back open during a downward gesture.
|
|
539
|
-
*/
|
|
540
|
-
const COLLAPSE_SHOW_THRESHOLD_PX = 5;
|
|
541
|
-
const WHEEL_SCROLL_SUPPRESS_MS = 80;
|
|
542
|
-
const getContentHostFromScrollEl = (scrollEl) => {
|
|
543
|
-
const root = scrollEl.getRootNode();
|
|
544
|
-
if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
|
|
545
|
-
return root.host;
|
|
546
|
-
}
|
|
547
|
-
// Light-DOM fallback: the scroll element may live inside a non-shadow
|
|
548
|
-
// ion-content (e.g. custom scroll host). Walk up to the nearest ion-content.
|
|
549
|
-
return scrollEl.closest('ion-content');
|
|
550
|
-
};
|
|
551
|
-
const applySlideDistance = (regionEl, contentHost, slideCssVar, heightPx) => {
|
|
552
|
-
const value = `${Math.max(0, Math.ceil(heightPx))}px`;
|
|
553
|
-
regionEl.style.setProperty(slideCssVar, value);
|
|
554
|
-
contentHost === null || contentHost === void 0 ? void 0 : contentHost.style.setProperty(slideCssVar, value);
|
|
555
|
-
};
|
|
556
|
-
const clearSlideDistance = (regionEl, contentHost, slideCssVar) => {
|
|
557
|
-
regionEl.style.removeProperty(slideCssVar);
|
|
558
|
-
contentHost === null || contentHost === void 0 ? void 0 : contentHost.style.removeProperty(slideCssVar);
|
|
559
|
-
};
|
|
560
|
-
/**
|
|
561
|
-
* Scroll/wheel-driven hide/show for `collapse="hide"` on `ion-header` or `ion-footer`.
|
|
562
|
-
* Hide after {@link COLLAPSE_HIDE_THRESHOLD_PX}px cumulative downward delta; show after
|
|
563
|
-
* {@link COLLAPSE_SHOW_THRESHOLD_PX}px cumulative upward delta. Each direction drains
|
|
564
|
-
* (not resets) the opposing accumulator so inertial-scroll jitter doesn't stall either
|
|
565
|
-
* transition. Motion is defined in component SCSS and `content.scss`; this toggles
|
|
566
|
-
* classes and syncs the slide distance CSS var.
|
|
567
|
-
*/
|
|
568
|
-
const createCollapseHideInteraction = ({ regionEl, scrollEl, slideCssVar, contentPartnerClass, contentHiddenClass, regionHiddenClass, }) => {
|
|
569
|
-
const contentHost = getContentHostFromScrollEl(scrollEl);
|
|
570
|
-
if (contentHost !== null) {
|
|
571
|
-
contentHost.classList.add(contentPartnerClass);
|
|
572
|
-
}
|
|
573
|
-
let resizeObserver;
|
|
574
|
-
let destroyed = false;
|
|
575
|
-
const syncSlideDistance = () => {
|
|
576
|
-
readTask(() => {
|
|
577
|
-
if (destroyed) {
|
|
578
|
-
return;
|
|
579
|
-
}
|
|
580
|
-
const heightPx = regionEl.offsetHeight;
|
|
581
|
-
writeTask(() => {
|
|
582
|
-
if (destroyed) {
|
|
583
|
-
return;
|
|
584
|
-
}
|
|
585
|
-
applySlideDistance(regionEl, contentHost, slideCssVar, heightPx);
|
|
586
|
-
});
|
|
587
|
-
});
|
|
588
|
-
};
|
|
589
|
-
if (typeof ResizeObserver !== 'undefined') {
|
|
590
|
-
resizeObserver = new ResizeObserver(() => {
|
|
591
|
-
syncSlideDistance();
|
|
592
|
-
});
|
|
593
|
-
resizeObserver.observe(regionEl);
|
|
594
|
-
}
|
|
595
|
-
syncSlideDistance();
|
|
596
|
-
requestAnimationFrame(() => {
|
|
597
|
-
if (!destroyed) {
|
|
598
|
-
syncSlideDistance();
|
|
599
|
-
}
|
|
600
|
-
});
|
|
601
|
-
let hidden = false;
|
|
602
|
-
let accDown = 0;
|
|
603
|
-
let accUp = 0;
|
|
604
|
-
let lastScrollTop = scrollEl.scrollTop;
|
|
605
|
-
let lastWheelTime = 0;
|
|
606
|
-
const setHidden = (next) => {
|
|
607
|
-
if (hidden === next || destroyed) {
|
|
608
|
-
return;
|
|
609
|
-
}
|
|
610
|
-
hidden = next;
|
|
611
|
-
// When transitioning to hidden, re-measure synchronously in case the
|
|
612
|
-
// initial layout reported offsetHeight === 0 (e.g. mid page transition).
|
|
613
|
-
// Without this the slide animates by 0px and only opacity fades.
|
|
614
|
-
if (hidden) {
|
|
615
|
-
const heightPx = regionEl.offsetHeight;
|
|
616
|
-
if (heightPx > 0) {
|
|
617
|
-
applySlideDistance(regionEl, contentHost, slideCssVar, heightPx);
|
|
618
|
-
}
|
|
619
|
-
}
|
|
620
|
-
writeTask(() => {
|
|
621
|
-
if (destroyed) {
|
|
622
|
-
return;
|
|
623
|
-
}
|
|
624
|
-
regionEl.classList.toggle(regionHiddenClass, hidden);
|
|
625
|
-
contentHost === null || contentHost === void 0 ? void 0 : contentHost.classList.toggle(contentHiddenClass, hidden);
|
|
626
|
-
if (hidden) {
|
|
627
|
-
// `inert` removes the subtree from the tab order and AT, AND moves
|
|
628
|
-
// focus out automatically in supporting browsers. `aria-hidden` is
|
|
629
|
-
// kept as a fallback for older engines without `inert` support.
|
|
630
|
-
regionEl.setAttribute('inert', '');
|
|
631
|
-
regionEl.setAttribute('aria-hidden', 'true');
|
|
632
|
-
}
|
|
633
|
-
else {
|
|
634
|
-
regionEl.removeAttribute('inert');
|
|
635
|
-
regionEl.removeAttribute('aria-hidden');
|
|
636
|
-
}
|
|
637
|
-
});
|
|
638
|
-
};
|
|
639
|
-
// Accumulate cumulative movement in each direction. The OPPOSITE accumulator
|
|
640
|
-
// is drained (not reset) by each event, so brief inertial jitter does not
|
|
641
|
-
// wipe a sustained gesture's accumulation. Crossing a threshold resets both.
|
|
642
|
-
const processDelta = (delta) => {
|
|
643
|
-
if (delta > 0) {
|
|
644
|
-
accUp = Math.max(0, accUp - delta);
|
|
645
|
-
accDown += delta;
|
|
646
|
-
if (accDown >= COLLAPSE_HIDE_THRESHOLD_PX) {
|
|
647
|
-
setHidden(true);
|
|
648
|
-
accDown = 0;
|
|
649
|
-
accUp = 0;
|
|
650
|
-
}
|
|
651
|
-
}
|
|
652
|
-
else if (delta < 0) {
|
|
653
|
-
const mag = -delta;
|
|
654
|
-
accDown = Math.max(0, accDown - mag);
|
|
655
|
-
accUp += mag;
|
|
656
|
-
if (accUp >= COLLAPSE_SHOW_THRESHOLD_PX) {
|
|
657
|
-
setHidden(false);
|
|
658
|
-
accUp = 0;
|
|
659
|
-
accDown = 0;
|
|
660
|
-
}
|
|
661
|
-
}
|
|
662
|
-
};
|
|
663
|
-
const onWheel = (ev) => {
|
|
664
|
-
if (destroyed) {
|
|
665
|
-
return;
|
|
666
|
-
}
|
|
667
|
-
lastWheelTime = performance.now();
|
|
668
|
-
processDelta(ev.deltaY);
|
|
669
|
-
};
|
|
670
|
-
const onScroll = () => {
|
|
671
|
-
if (destroyed) {
|
|
672
|
-
return;
|
|
673
|
-
}
|
|
674
|
-
const st = scrollEl.scrollTop;
|
|
675
|
-
if (performance.now() - lastWheelTime < WHEEL_SCROLL_SUPPRESS_MS) {
|
|
676
|
-
lastScrollTop = st;
|
|
677
|
-
return;
|
|
678
|
-
}
|
|
679
|
-
const delta = st - lastScrollTop;
|
|
680
|
-
lastScrollTop = st;
|
|
681
|
-
processDelta(delta);
|
|
682
|
-
};
|
|
683
|
-
scrollEl.addEventListener('wheel', onWheel, { passive: true });
|
|
684
|
-
scrollEl.addEventListener('scroll', onScroll, { passive: true });
|
|
685
|
-
return () => {
|
|
686
|
-
destroyed = true;
|
|
687
|
-
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
|
|
688
|
-
scrollEl.removeEventListener('wheel', onWheel);
|
|
689
|
-
scrollEl.removeEventListener('scroll', onScroll);
|
|
690
|
-
regionEl.classList.remove(regionHiddenClass);
|
|
691
|
-
regionEl.removeAttribute('inert');
|
|
692
|
-
regionEl.removeAttribute('aria-hidden');
|
|
693
|
-
contentHost === null || contentHost === void 0 ? void 0 : contentHost.classList.remove(contentPartnerClass, contentHiddenClass);
|
|
694
|
-
clearSlideDistance(regionEl, contentHost, slideCssVar);
|
|
695
|
-
};
|
|
696
|
-
};
|
|
697
|
-
|
|
698
533
|
const handleFooterFade = (scrollEl, baseEl) => {
|
|
699
534
|
readTask(() => {
|
|
700
535
|
const scrollTop = scrollEl.scrollTop;
|
|
@@ -723,26 +558,16 @@ const handleFooterFade = (scrollEl, baseEl) => {
|
|
|
723
558
|
});
|
|
724
559
|
});
|
|
725
560
|
};
|
|
726
|
-
const createFooterHideInteraction = (footerEl, scrollEl) => createCollapseHideInteraction({
|
|
727
|
-
regionEl: footerEl,
|
|
728
|
-
scrollEl,
|
|
729
|
-
slideCssVar: '--footer-hide-slide-y',
|
|
730
|
-
contentPartnerClass: 'content-footer-hide-scroll-partner',
|
|
731
|
-
contentHiddenClass: 'content-footer-hide-scroll-hidden',
|
|
732
|
-
regionHiddenClass: 'footer-collapse-hide-hidden',
|
|
733
|
-
});
|
|
734
561
|
|
|
735
|
-
const ionicFooterMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}
|
|
562
|
+
const ionicFooterMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
|
|
736
563
|
|
|
737
|
-
const footerIosCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}
|
|
564
|
+
const footerIosCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-ios ion-toolbar:first-of-type{--border-width:0.55px 0 0}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.footer-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.footer-translucent-ios ion-toolbar{--opacity:0.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}.footer-collapse-fade ion-toolbar{--opacity-scale:inherit}`;
|
|
738
565
|
|
|
739
|
-
const footerMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}
|
|
566
|
+
const footerMdCss = () => `ion-footer{display:block;position:relative;-ms-flex-order:1;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
|
|
740
567
|
|
|
741
568
|
const Footer = class {
|
|
742
569
|
constructor(hostRef) {
|
|
743
570
|
registerInstance(this, hostRef);
|
|
744
|
-
this.didLoad = false;
|
|
745
|
-
this.setupToken = 0;
|
|
746
571
|
this.keyboardCtrl = null;
|
|
747
572
|
this.keyboardCtrlPromise = null;
|
|
748
573
|
this.keyboardVisible = false;
|
|
@@ -757,45 +582,25 @@ const Footer = class {
|
|
|
757
582
|
this.translucent = false;
|
|
758
583
|
this.checkCollapsibleFooter = () => {
|
|
759
584
|
const theme = getIonTheme(this);
|
|
760
|
-
|
|
761
|
-
const hasFade = collapse === 'fade';
|
|
762
|
-
const hasHide = collapse === 'hide';
|
|
763
|
-
const runIosFade = theme === 'ios' && hasFade;
|
|
764
|
-
if (!runIosFade && !hasHide) {
|
|
765
|
-
this.destroyCollapsibleFooter();
|
|
766
|
-
return;
|
|
767
|
-
}
|
|
768
|
-
// Skip teardown/rebuild when the collapse mode and theme have not changed
|
|
769
|
-
// since the last setup — avoids thrashing listeners and resetting scroll
|
|
770
|
-
// accumulators on unrelated re-renders (e.g. keyboardVisible state flips).
|
|
771
|
-
const activeMode = hasHide ? 'hide' : 'fade';
|
|
772
|
-
if (this.appliedCollapse === activeMode && this.appliedTheme === theme) {
|
|
585
|
+
if (theme !== 'ios') {
|
|
773
586
|
return;
|
|
774
587
|
}
|
|
588
|
+
const { collapse } = this;
|
|
589
|
+
const hasFade = collapse === 'fade';
|
|
775
590
|
this.destroyCollapsibleFooter();
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
this.appliedTheme = theme;
|
|
785
|
-
if (runIosFade) {
|
|
591
|
+
if (hasFade) {
|
|
592
|
+
const appRootSelector = config.get('appRootSelector', 'ion-app');
|
|
593
|
+
const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
|
|
594
|
+
const contentEl = pageEl ? findIonContent(pageEl) : null;
|
|
595
|
+
if (!contentEl) {
|
|
596
|
+
printIonContentErrorMsg(this.el);
|
|
597
|
+
return;
|
|
598
|
+
}
|
|
786
599
|
this.setupFadeFooter(contentEl);
|
|
787
600
|
}
|
|
788
|
-
else if (hasHide) {
|
|
789
|
-
void this.setupHideFooter(contentEl);
|
|
790
|
-
}
|
|
791
601
|
};
|
|
792
602
|
this.setupFadeFooter = async (contentEl) => {
|
|
793
|
-
const
|
|
794
|
-
const scrollEl = await getScrollElement(contentEl);
|
|
795
|
-
if (token !== this.setupToken) {
|
|
796
|
-
return;
|
|
797
|
-
}
|
|
798
|
-
this.scrollEl = scrollEl;
|
|
603
|
+
const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
|
|
799
604
|
/**
|
|
800
605
|
* Handle fading of toolbars on scroll
|
|
801
606
|
*/
|
|
@@ -807,18 +612,12 @@ const Footer = class {
|
|
|
807
612
|
};
|
|
808
613
|
}
|
|
809
614
|
componentDidLoad() {
|
|
810
|
-
this.didLoad = true;
|
|
811
615
|
this.checkCollapsibleFooter();
|
|
812
616
|
}
|
|
813
617
|
componentDidUpdate() {
|
|
814
618
|
this.checkCollapsibleFooter();
|
|
815
619
|
}
|
|
816
620
|
async connectedCallback() {
|
|
817
|
-
// On re-attach (didLoad already true but disconnectedCallback ran since),
|
|
818
|
-
// componentDidLoad will not fire again — re-run setup here.
|
|
819
|
-
if (this.didLoad) {
|
|
820
|
-
this.checkCollapsibleFooter();
|
|
821
|
-
}
|
|
822
621
|
const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
|
|
823
622
|
/**
|
|
824
623
|
* If the keyboard is hiding, then we need to wait
|
|
@@ -846,7 +645,6 @@ const Footer = class {
|
|
|
846
645
|
}
|
|
847
646
|
}
|
|
848
647
|
disconnectedCallback() {
|
|
849
|
-
this.destroyCollapsibleFooter();
|
|
850
648
|
if (this.keyboardCtrlPromise) {
|
|
851
649
|
this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
|
|
852
650
|
this.keyboardCtrlPromise = null;
|
|
@@ -856,36 +654,18 @@ const Footer = class {
|
|
|
856
654
|
this.keyboardCtrl = null;
|
|
857
655
|
}
|
|
858
656
|
}
|
|
859
|
-
async setupHideFooter(contentEl) {
|
|
860
|
-
const token = ++this.setupToken;
|
|
861
|
-
const scrollEl = await getScrollElement(contentEl);
|
|
862
|
-
// A newer checkCollapsibleFooter ran while we were awaiting — abandon.
|
|
863
|
-
if (token !== this.setupToken) {
|
|
864
|
-
return;
|
|
865
|
-
}
|
|
866
|
-
this.scrollEl = scrollEl;
|
|
867
|
-
this.footerHideCleanup = createFooterHideInteraction(this.el, scrollEl);
|
|
868
|
-
}
|
|
869
657
|
destroyCollapsibleFooter() {
|
|
870
|
-
// Invalidate any in-flight setupHideFooter/setupFadeFooter awaits.
|
|
871
|
-
this.setupToken++;
|
|
872
|
-
if (this.footerHideCleanup) {
|
|
873
|
-
this.footerHideCleanup();
|
|
874
|
-
this.footerHideCleanup = undefined;
|
|
875
|
-
}
|
|
876
658
|
if (this.scrollEl && this.contentScrollCallback) {
|
|
877
659
|
this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
|
|
878
660
|
this.contentScrollCallback = undefined;
|
|
879
661
|
}
|
|
880
|
-
this.appliedCollapse = undefined;
|
|
881
|
-
this.appliedTheme = undefined;
|
|
882
662
|
}
|
|
883
663
|
render() {
|
|
884
664
|
const { translucent, collapse } = this;
|
|
885
665
|
const theme = getIonTheme(this);
|
|
886
666
|
const tabs = this.el.closest('ion-tabs');
|
|
887
667
|
const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
|
|
888
|
-
return (h(Host, { key: '
|
|
668
|
+
return (h(Host, { key: '4a2989a177b47ee26ffa23e2c9f5418773584796', role: "contentinfo", class: {
|
|
889
669
|
[theme]: true,
|
|
890
670
|
// Used internally for styling
|
|
891
671
|
[`footer-${theme}`]: true,
|
|
@@ -893,7 +673,7 @@ const Footer = class {
|
|
|
893
673
|
[`footer-translucent-${theme}`]: translucent,
|
|
894
674
|
['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
|
|
895
675
|
[`footer-collapse-${collapse}`]: collapse !== undefined,
|
|
896
|
-
} }, theme === 'ios' && translucent && h("div", { key: '
|
|
676
|
+
} }, theme === 'ios' && translucent && h("div", { key: 'c644963db3e06254014e398ea02189d6127ccf61', class: "footer-background" }), h("slot", { key: '839e33c6c30f5c1c703239a19458ff10da9a5e76' })));
|
|
897
677
|
}
|
|
898
678
|
get el() { return getElement(this); }
|
|
899
679
|
};
|
|
@@ -1079,14 +859,6 @@ const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
|
|
|
1079
859
|
titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
|
|
1080
860
|
});
|
|
1081
861
|
};
|
|
1082
|
-
const createHeaderHideInteraction = (headerEl, scrollEl) => createCollapseHideInteraction({
|
|
1083
|
-
regionEl: headerEl,
|
|
1084
|
-
scrollEl,
|
|
1085
|
-
slideCssVar: '--header-hide-slide-y',
|
|
1086
|
-
contentPartnerClass: 'content-header-hide-scroll-partner',
|
|
1087
|
-
contentHiddenClass: 'content-header-hide-scroll-hidden',
|
|
1088
|
-
regionHiddenClass: 'header-collapse-hide-hidden',
|
|
1089
|
-
});
|
|
1090
862
|
const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
|
|
1091
863
|
readTask(() => {
|
|
1092
864
|
const scrollTop = scrollEl.scrollTop;
|
|
@@ -1143,17 +915,16 @@ const getRoleType = (isInsideMenu, isCondensed, theme) => {
|
|
|
1143
915
|
return ROLE_BANNER;
|
|
1144
916
|
};
|
|
1145
917
|
|
|
1146
|
-
const headerIonicCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header
|
|
918
|
+
const headerIonicCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}ion-header.header-divider{border-bottom:var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5))}ion-toolbar+ion-toolbar{--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px))}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(var(--token-scale-100, 4px));backdrop-filter:saturate(180%) blur(var(--token-scale-100, 4px))}.header-translucent-ionic ion-toolbar{--opacity:0.7}}`;
|
|
1147
919
|
|
|
1148
|
-
const headerIosCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header
|
|
920
|
+
const headerIosCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:0.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-fade.header-transitioning ion-toolbar{--background:transparent;--border-style:none}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense ion-toolbar,.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--background:var(--ion-background-color, #fff)}.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--border-style:none;--opacity-scale:1}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}`;
|
|
1149
921
|
|
|
1150
|
-
const headerMdCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header
|
|
922
|
+
const headerMdCss = () => `ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}ion-header{z-index:10}.header-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-md.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}`;
|
|
1151
923
|
|
|
1152
924
|
const Header = class {
|
|
1153
925
|
constructor(hostRef) {
|
|
1154
926
|
registerInstance(this, hostRef);
|
|
1155
927
|
this.inheritedAttributes = {};
|
|
1156
|
-
this.didLoad = false;
|
|
1157
928
|
/**
|
|
1158
929
|
* If `true`, the header will have a line at the bottom.
|
|
1159
930
|
* TODO(ROU-10855): add support for this prop on ios/md themes
|
|
@@ -1184,37 +955,25 @@ const Header = class {
|
|
|
1184
955
|
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
1185
956
|
}
|
|
1186
957
|
componentDidLoad() {
|
|
1187
|
-
this.didLoad = true;
|
|
1188
958
|
this.checkCollapsibleHeader();
|
|
1189
959
|
}
|
|
1190
960
|
componentDidUpdate() {
|
|
1191
961
|
this.checkCollapsibleHeader();
|
|
1192
962
|
}
|
|
1193
|
-
connectedCallback() {
|
|
1194
|
-
// On re-attach (didLoad already true but disconnectedCallback ran since),
|
|
1195
|
-
// componentDidLoad will not fire again — re-run setup here.
|
|
1196
|
-
if (this.didLoad) {
|
|
1197
|
-
this.checkCollapsibleHeader();
|
|
1198
|
-
}
|
|
1199
|
-
}
|
|
1200
963
|
disconnectedCallback() {
|
|
1201
964
|
this.destroyCollapsibleHeader();
|
|
1202
965
|
}
|
|
1203
966
|
async checkCollapsibleHeader() {
|
|
1204
967
|
const theme = getIonTheme(this);
|
|
968
|
+
if (theme !== 'ios') {
|
|
969
|
+
return;
|
|
970
|
+
}
|
|
1205
971
|
const { collapse } = this;
|
|
1206
972
|
const hasCondense = collapse === 'condense';
|
|
1207
973
|
const hasFade = collapse === 'fade';
|
|
1208
|
-
const hasHide = collapse === 'hide';
|
|
1209
|
-
const runIosCollapse = theme === 'ios' && (hasCondense || hasFade);
|
|
1210
|
-
const runHide = hasHide;
|
|
1211
|
-
if (!runIosCollapse && !runHide) {
|
|
1212
|
-
this.destroyCollapsibleHeader();
|
|
1213
|
-
return;
|
|
1214
|
-
}
|
|
1215
974
|
this.destroyCollapsibleHeader();
|
|
1216
975
|
const appRootSelector = config.get('appRootSelector', 'ion-app');
|
|
1217
|
-
if (
|
|
976
|
+
if (hasCondense) {
|
|
1218
977
|
const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
|
|
1219
978
|
const contentEl = pageEl ? findIonContent(pageEl) : null;
|
|
1220
979
|
// Cloned elements are always needed in iOS transition
|
|
@@ -1225,7 +984,7 @@ const Header = class {
|
|
|
1225
984
|
});
|
|
1226
985
|
await this.setupCondenseHeader(contentEl, pageEl);
|
|
1227
986
|
}
|
|
1228
|
-
else if (
|
|
987
|
+
else if (hasFade) {
|
|
1229
988
|
const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
|
|
1230
989
|
const contentEl = pageEl ? findIonContent(pageEl) : null;
|
|
1231
990
|
if (!contentEl) {
|
|
@@ -1235,29 +994,12 @@ const Header = class {
|
|
|
1235
994
|
const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
|
|
1236
995
|
await this.setupFadeHeader(contentEl, condenseHeader);
|
|
1237
996
|
}
|
|
1238
|
-
if (runHide) {
|
|
1239
|
-
const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
|
|
1240
|
-
const contentEl = pageEl ? findIonContent(pageEl) : null;
|
|
1241
|
-
if (!contentEl) {
|
|
1242
|
-
printIonContentErrorMsg(this.el);
|
|
1243
|
-
return;
|
|
1244
|
-
}
|
|
1245
|
-
await this.setupHideHeader(contentEl);
|
|
1246
|
-
}
|
|
1247
|
-
}
|
|
1248
|
-
async setupHideHeader(contentEl) {
|
|
1249
|
-
const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
|
|
1250
|
-
this.headerHideCleanup = createHeaderHideInteraction(this.el, scrollEl);
|
|
1251
997
|
}
|
|
1252
998
|
destroyCollapsibleHeader() {
|
|
1253
999
|
if (this.intersectionObserver) {
|
|
1254
1000
|
this.intersectionObserver.disconnect();
|
|
1255
1001
|
this.intersectionObserver = undefined;
|
|
1256
1002
|
}
|
|
1257
|
-
if (this.headerHideCleanup) {
|
|
1258
|
-
this.headerHideCleanup();
|
|
1259
|
-
this.headerHideCleanup = undefined;
|
|
1260
|
-
}
|
|
1261
1003
|
if (this.scrollEl && this.contentScrollCallback) {
|
|
1262
1004
|
this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
|
|
1263
1005
|
this.contentScrollCallback = undefined;
|
|
@@ -1324,7 +1066,7 @@ const Header = class {
|
|
|
1324
1066
|
const isCondensed = collapse === 'condense';
|
|
1325
1067
|
// banner role must be at top level, so remove role if inside a menu
|
|
1326
1068
|
const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, theme);
|
|
1327
|
-
return (h(Host, Object.assign({ key: '
|
|
1069
|
+
return (h(Host, Object.assign({ key: '3395dedfd5165ba6e9f3ad1a25f0bb5b3678704a', role: roleType, class: {
|
|
1328
1070
|
[theme]: true,
|
|
1329
1071
|
// Used internally for styling
|
|
1330
1072
|
[`header-${theme}`]: true,
|
|
@@ -1332,7 +1074,7 @@ const Header = class {
|
|
|
1332
1074
|
[`header-collapse-${collapse}`]: true,
|
|
1333
1075
|
[`header-translucent-${theme}`]: this.translucent,
|
|
1334
1076
|
['header-divider']: divider,
|
|
1335
|
-
} }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: '
|
|
1077
|
+
} }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'cafeb88b6e73d64b264514ea46590fd3477b3052', class: "header-background" }), h("slot", { key: 'ad681aaf866d7e7a5e5e731c0b5d6f5cc9fe94d2' })));
|
|
1336
1078
|
}
|
|
1337
1079
|
get el() { return getElement(this); }
|
|
1338
1080
|
};
|
|
@@ -1519,7 +1261,7 @@ const RouterOutlet = class {
|
|
|
1519
1261
|
return true;
|
|
1520
1262
|
}
|
|
1521
1263
|
render() {
|
|
1522
|
-
return h("slot", { key: '
|
|
1264
|
+
return h("slot", { key: '56e3d06ed939755796058e30ef19fbc7f7cb490d' });
|
|
1523
1265
|
}
|
|
1524
1266
|
get el() { return getElement(this); }
|
|
1525
1267
|
static get watchers() { return {
|
|
@@ -1559,11 +1301,11 @@ const ToolbarTitle = class {
|
|
|
1559
1301
|
render() {
|
|
1560
1302
|
const theme = getIonTheme(this);
|
|
1561
1303
|
const size = this.getSize();
|
|
1562
|
-
return (h(Host, { key: '
|
|
1304
|
+
return (h(Host, { key: 'd64e86bed418cba707d4a26c9274f18ed06c0e9e', class: createColorClasses(this.color, {
|
|
1563
1305
|
[theme]: true,
|
|
1564
1306
|
[`title-${size}`]: true,
|
|
1565
1307
|
'title-rtl': document.dir === 'rtl',
|
|
1566
|
-
}) }, h("div", { key: '
|
|
1308
|
+
}) }, h("div", { key: '386a71e974cde0bfbf5b655d69ed5f718de8ce48', class: "toolbar-title" }, h("slot", { key: '8aa804c9e1b11574a42268805d3117a085e699b4' }))));
|
|
1567
1309
|
}
|
|
1568
1310
|
get el() { return getElement(this); }
|
|
1569
1311
|
static get watchers() { return {
|
|
@@ -1809,11 +1551,11 @@ const Toolbar = class {
|
|
|
1809
1551
|
Object.assign(childStyles, style);
|
|
1810
1552
|
});
|
|
1811
1553
|
const titlePlacement = this.getTitlePlacement();
|
|
1812
|
-
return (h(Host, { key: '
|
|
1554
|
+
return (h(Host, { key: 'bcb621674157410d7eaeb006779bdd677346587e', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
|
|
1813
1555
|
[theme]: true,
|
|
1814
1556
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
1815
1557
|
[`toolbar-title-placement-${titlePlacement}`]: true,
|
|
1816
|
-
})), childStyles) }, h("div", { key: '
|
|
1558
|
+
})), childStyles) }, h("div", { key: '0d31a98b2571b9a0ae142fbdfd83e2ebdcd8e069', class: "toolbar-background", part: "background" }), h("div", { key: 'de938534c487c6cb4060dac44b40c2d872130f50', class: "toolbar-container", part: "container" }, h("slot", { key: 'a337150d353e439eae67c31ff86e383ed51f3d8f', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '02effd3ce0cdad5ec5645fa58ccb329321449190', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: '3e22f5feda2aea02117bdea2fe8a4b8905ba82f6', class: "toolbar-content", part: "content" }, h("slot", { key: 'ebf828643ff05a8bf662a54715d21d0859168d31' })), h("slot", { key: 'a6940648dfe25a7aa8792a1bd9267437274f333c', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'afb1d61aa0e430fcf483ba482af64762474e06fe', name: "end", onSlotchange: () => this.updateSlotClasses }))));
|
|
1817
1559
|
}
|
|
1818
1560
|
get el() { return getElement(this); }
|
|
1819
1561
|
static get watchers() { return {
|
|
@@ -159,9 +159,9 @@ const Thumbnail = class {
|
|
|
159
159
|
}
|
|
160
160
|
render() {
|
|
161
161
|
const theme = getIonTheme(this);
|
|
162
|
-
return (h(Host, { key: '
|
|
162
|
+
return (h(Host, { key: 'fdf9d92949a1e8cf6faded77ffed084f74fc040b', class: {
|
|
163
163
|
[theme]: true,
|
|
164
|
-
} }, h("slot", { key: '
|
|
164
|
+
} }, h("slot", { key: 'e1b1439c035d9a9503efd1c1a04aed9f4e8e0af7' })));
|
|
165
165
|
}
|
|
166
166
|
};
|
|
167
167
|
Thumbnail.style = thumbnailCss();
|
|
@@ -126,10 +126,10 @@ const Grid = class {
|
|
|
126
126
|
}
|
|
127
127
|
render() {
|
|
128
128
|
const theme = getIonTheme(this);
|
|
129
|
-
return (h(Host, { key: '
|
|
129
|
+
return (h(Host, { key: 'e3320fc2fc5391d26898cc119505cd3be30dd48b', class: {
|
|
130
130
|
[theme]: true,
|
|
131
131
|
'grid-fixed': this.fixed,
|
|
132
|
-
} }, h("slot", { key: '
|
|
132
|
+
} }, h("slot", { key: '2000e6b336c294aadf4585269c301d734d2fe478' })));
|
|
133
133
|
}
|
|
134
134
|
};
|
|
135
135
|
Grid.style = gridCss();
|
|
@@ -142,9 +142,9 @@ const Row = class {
|
|
|
142
142
|
}
|
|
143
143
|
render() {
|
|
144
144
|
const theme = getIonTheme(this);
|
|
145
|
-
return (h(Host, { key: '
|
|
145
|
+
return (h(Host, { key: '3a3c40062d2d0487c61dedbb172215b87bb425b1', class: {
|
|
146
146
|
[theme]: true,
|
|
147
|
-
} }, h("slot", { key: '
|
|
147
|
+
} }, h("slot", { key: '164f457f6f7853ed8f7279d20bc6ede6cf9d3e5c' })));
|
|
148
148
|
}
|
|
149
149
|
};
|
|
150
150
|
Row.style = rowCss();
|
|
@@ -2309,11 +2309,11 @@ const Picker = class {
|
|
|
2309
2309
|
render() {
|
|
2310
2310
|
const { htmlAttributes } = this;
|
|
2311
2311
|
const theme = getIonTheme(this);
|
|
2312
|
-
return (h(Host, Object.assign({ key: '
|
|
2312
|
+
return (h(Host, Object.assign({ key: '681ad6d20efa16f1d6c6f9a7d03caec2b17ff36e', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
|
|
2313
2313
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2314
2314
|
}, class: Object.assign({ [theme]: true,
|
|
2315
2315
|
// Used internally for styling
|
|
2316
|
-
[`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '
|
|
2316
|
+
[`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '6dc71805810955048479c2a6eddce2303161cb8f', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '0e61724c261c9d69ba23d3cb9064018942755033', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a6ca79c9a5fce42b5aad6808802535c723f27fb9', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '7651cbe9d723bba032788d85711e0f7c1dc32c21', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'd6b83aded670bc74515c337c038503e396ab42cc', class: "picker-columns" }, h("div", { key: '1dfef6ed386d7b327dc19397cc9f01c3938fbab9', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'ec8b2f4de073a245f8917a494a681adf5d1f94f6', class: "picker-below-highlight" }))), h("div", { key: '8557ce93083feefa5deb6097270d756424f89ab2', tabindex: "0", "aria-hidden": "true" })));
|
|
2317
2317
|
}
|
|
2318
2318
|
get el() { return getElement(this); }
|
|
2319
2319
|
static get watchers() { return {
|
|
@@ -2671,9 +2671,9 @@ const PickerColumnCmp = class {
|
|
|
2671
2671
|
render() {
|
|
2672
2672
|
const col = this.col;
|
|
2673
2673
|
const theme = getIonTheme(this);
|
|
2674
|
-
return (h(Host, { key: '
|
|
2674
|
+
return (h(Host, { key: 'aed1c1a702e03765d704f6f563fe26df58e68bbf', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
|
|
2675
2675
|
'max-width': this.col.columnWidth,
|
|
2676
|
-
} }, col.prefix && (h("div", { key: '
|
|
2676
|
+
} }, col.prefix && (h("div", { key: 'a6fae778eec5d57dba4b36b3e448c5c12fe0688b', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '1b77354fe5eeeeb4db94fab035a9ef5e45d695ac', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '105286ef7ba6eac0796f5af7d6f1daef7107444a', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
|
|
2677
2677
|
}
|
|
2678
2678
|
get el() { return getElement(this); }
|
|
2679
2679
|
static get watchers() { return {
|