@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
|
@@ -91,7 +91,7 @@ Buttons.style = {
|
|
|
91
91
|
md: buttonsMdCss()
|
|
92
92
|
};
|
|
93
93
|
|
|
94
|
-
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)}
|
|
94
|
+
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)}`;
|
|
95
95
|
|
|
96
96
|
const Content = class {
|
|
97
97
|
constructor(hostRef) {
|
|
@@ -532,171 +532,6 @@ const updateScrollDetail = (detail, el, timestamp, shouldStart) => {
|
|
|
532
532
|
};
|
|
533
533
|
Content.style = contentCss();
|
|
534
534
|
|
|
535
|
-
/** Cumulative downward delta before hiding (header or footer `collapse="hide"`). */
|
|
536
|
-
const COLLAPSE_HIDE_THRESHOLD_PX = 24;
|
|
537
|
-
/**
|
|
538
|
-
* Cumulative upward delta before showing again after hide. Small bias
|
|
539
|
-
* (instead of "any upward delta") guards against inertial-scroll
|
|
540
|
-
* oscillation flicking the region back open during a downward gesture.
|
|
541
|
-
*/
|
|
542
|
-
const COLLAPSE_SHOW_THRESHOLD_PX = 5;
|
|
543
|
-
const WHEEL_SCROLL_SUPPRESS_MS = 80;
|
|
544
|
-
const getContentHostFromScrollEl = (scrollEl) => {
|
|
545
|
-
const root = scrollEl.getRootNode();
|
|
546
|
-
if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
|
|
547
|
-
return root.host;
|
|
548
|
-
}
|
|
549
|
-
// Light-DOM fallback: the scroll element may live inside a non-shadow
|
|
550
|
-
// ion-content (e.g. custom scroll host). Walk up to the nearest ion-content.
|
|
551
|
-
return scrollEl.closest('ion-content');
|
|
552
|
-
};
|
|
553
|
-
const applySlideDistance = (regionEl, contentHost, slideCssVar, heightPx) => {
|
|
554
|
-
const value = `${Math.max(0, Math.ceil(heightPx))}px`;
|
|
555
|
-
regionEl.style.setProperty(slideCssVar, value);
|
|
556
|
-
contentHost === null || contentHost === void 0 ? void 0 : contentHost.style.setProperty(slideCssVar, value);
|
|
557
|
-
};
|
|
558
|
-
const clearSlideDistance = (regionEl, contentHost, slideCssVar) => {
|
|
559
|
-
regionEl.style.removeProperty(slideCssVar);
|
|
560
|
-
contentHost === null || contentHost === void 0 ? void 0 : contentHost.style.removeProperty(slideCssVar);
|
|
561
|
-
};
|
|
562
|
-
/**
|
|
563
|
-
* Scroll/wheel-driven hide/show for `collapse="hide"` on `ion-header` or `ion-footer`.
|
|
564
|
-
* Hide after {@link COLLAPSE_HIDE_THRESHOLD_PX}px cumulative downward delta; show after
|
|
565
|
-
* {@link COLLAPSE_SHOW_THRESHOLD_PX}px cumulative upward delta. Each direction drains
|
|
566
|
-
* (not resets) the opposing accumulator so inertial-scroll jitter doesn't stall either
|
|
567
|
-
* transition. Motion is defined in component SCSS and `content.scss`; this toggles
|
|
568
|
-
* classes and syncs the slide distance CSS var.
|
|
569
|
-
*/
|
|
570
|
-
const createCollapseHideInteraction = ({ regionEl, scrollEl, slideCssVar, contentPartnerClass, contentHiddenClass, regionHiddenClass, }) => {
|
|
571
|
-
const contentHost = getContentHostFromScrollEl(scrollEl);
|
|
572
|
-
if (contentHost !== null) {
|
|
573
|
-
contentHost.classList.add(contentPartnerClass);
|
|
574
|
-
}
|
|
575
|
-
let resizeObserver;
|
|
576
|
-
let destroyed = false;
|
|
577
|
-
const syncSlideDistance = () => {
|
|
578
|
-
index.readTask(() => {
|
|
579
|
-
if (destroyed) {
|
|
580
|
-
return;
|
|
581
|
-
}
|
|
582
|
-
const heightPx = regionEl.offsetHeight;
|
|
583
|
-
index.writeTask(() => {
|
|
584
|
-
if (destroyed) {
|
|
585
|
-
return;
|
|
586
|
-
}
|
|
587
|
-
applySlideDistance(regionEl, contentHost, slideCssVar, heightPx);
|
|
588
|
-
});
|
|
589
|
-
});
|
|
590
|
-
};
|
|
591
|
-
if (typeof ResizeObserver !== 'undefined') {
|
|
592
|
-
resizeObserver = new ResizeObserver(() => {
|
|
593
|
-
syncSlideDistance();
|
|
594
|
-
});
|
|
595
|
-
resizeObserver.observe(regionEl);
|
|
596
|
-
}
|
|
597
|
-
syncSlideDistance();
|
|
598
|
-
requestAnimationFrame(() => {
|
|
599
|
-
if (!destroyed) {
|
|
600
|
-
syncSlideDistance();
|
|
601
|
-
}
|
|
602
|
-
});
|
|
603
|
-
let hidden = false;
|
|
604
|
-
let accDown = 0;
|
|
605
|
-
let accUp = 0;
|
|
606
|
-
let lastScrollTop = scrollEl.scrollTop;
|
|
607
|
-
let lastWheelTime = 0;
|
|
608
|
-
const setHidden = (next) => {
|
|
609
|
-
if (hidden === next || destroyed) {
|
|
610
|
-
return;
|
|
611
|
-
}
|
|
612
|
-
hidden = next;
|
|
613
|
-
// When transitioning to hidden, re-measure synchronously in case the
|
|
614
|
-
// initial layout reported offsetHeight === 0 (e.g. mid page transition).
|
|
615
|
-
// Without this the slide animates by 0px and only opacity fades.
|
|
616
|
-
if (hidden) {
|
|
617
|
-
const heightPx = regionEl.offsetHeight;
|
|
618
|
-
if (heightPx > 0) {
|
|
619
|
-
applySlideDistance(regionEl, contentHost, slideCssVar, heightPx);
|
|
620
|
-
}
|
|
621
|
-
}
|
|
622
|
-
index.writeTask(() => {
|
|
623
|
-
if (destroyed) {
|
|
624
|
-
return;
|
|
625
|
-
}
|
|
626
|
-
regionEl.classList.toggle(regionHiddenClass, hidden);
|
|
627
|
-
contentHost === null || contentHost === void 0 ? void 0 : contentHost.classList.toggle(contentHiddenClass, hidden);
|
|
628
|
-
if (hidden) {
|
|
629
|
-
// `inert` removes the subtree from the tab order and AT, AND moves
|
|
630
|
-
// focus out automatically in supporting browsers. `aria-hidden` is
|
|
631
|
-
// kept as a fallback for older engines without `inert` support.
|
|
632
|
-
regionEl.setAttribute('inert', '');
|
|
633
|
-
regionEl.setAttribute('aria-hidden', 'true');
|
|
634
|
-
}
|
|
635
|
-
else {
|
|
636
|
-
regionEl.removeAttribute('inert');
|
|
637
|
-
regionEl.removeAttribute('aria-hidden');
|
|
638
|
-
}
|
|
639
|
-
});
|
|
640
|
-
};
|
|
641
|
-
// Accumulate cumulative movement in each direction. The OPPOSITE accumulator
|
|
642
|
-
// is drained (not reset) by each event, so brief inertial jitter does not
|
|
643
|
-
// wipe a sustained gesture's accumulation. Crossing a threshold resets both.
|
|
644
|
-
const processDelta = (delta) => {
|
|
645
|
-
if (delta > 0) {
|
|
646
|
-
accUp = Math.max(0, accUp - delta);
|
|
647
|
-
accDown += delta;
|
|
648
|
-
if (accDown >= COLLAPSE_HIDE_THRESHOLD_PX) {
|
|
649
|
-
setHidden(true);
|
|
650
|
-
accDown = 0;
|
|
651
|
-
accUp = 0;
|
|
652
|
-
}
|
|
653
|
-
}
|
|
654
|
-
else if (delta < 0) {
|
|
655
|
-
const mag = -delta;
|
|
656
|
-
accDown = Math.max(0, accDown - mag);
|
|
657
|
-
accUp += mag;
|
|
658
|
-
if (accUp >= COLLAPSE_SHOW_THRESHOLD_PX) {
|
|
659
|
-
setHidden(false);
|
|
660
|
-
accUp = 0;
|
|
661
|
-
accDown = 0;
|
|
662
|
-
}
|
|
663
|
-
}
|
|
664
|
-
};
|
|
665
|
-
const onWheel = (ev) => {
|
|
666
|
-
if (destroyed) {
|
|
667
|
-
return;
|
|
668
|
-
}
|
|
669
|
-
lastWheelTime = performance.now();
|
|
670
|
-
processDelta(ev.deltaY);
|
|
671
|
-
};
|
|
672
|
-
const onScroll = () => {
|
|
673
|
-
if (destroyed) {
|
|
674
|
-
return;
|
|
675
|
-
}
|
|
676
|
-
const st = scrollEl.scrollTop;
|
|
677
|
-
if (performance.now() - lastWheelTime < WHEEL_SCROLL_SUPPRESS_MS) {
|
|
678
|
-
lastScrollTop = st;
|
|
679
|
-
return;
|
|
680
|
-
}
|
|
681
|
-
const delta = st - lastScrollTop;
|
|
682
|
-
lastScrollTop = st;
|
|
683
|
-
processDelta(delta);
|
|
684
|
-
};
|
|
685
|
-
scrollEl.addEventListener('wheel', onWheel, { passive: true });
|
|
686
|
-
scrollEl.addEventListener('scroll', onScroll, { passive: true });
|
|
687
|
-
return () => {
|
|
688
|
-
destroyed = true;
|
|
689
|
-
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
|
|
690
|
-
scrollEl.removeEventListener('wheel', onWheel);
|
|
691
|
-
scrollEl.removeEventListener('scroll', onScroll);
|
|
692
|
-
regionEl.classList.remove(regionHiddenClass);
|
|
693
|
-
regionEl.removeAttribute('inert');
|
|
694
|
-
regionEl.removeAttribute('aria-hidden');
|
|
695
|
-
contentHost === null || contentHost === void 0 ? void 0 : contentHost.classList.remove(contentPartnerClass, contentHiddenClass);
|
|
696
|
-
clearSlideDistance(regionEl, contentHost, slideCssVar);
|
|
697
|
-
};
|
|
698
|
-
};
|
|
699
|
-
|
|
700
535
|
const handleFooterFade = (scrollEl, baseEl) => {
|
|
701
536
|
index.readTask(() => {
|
|
702
537
|
const scrollTop = scrollEl.scrollTop;
|
|
@@ -725,26 +560,16 @@ const handleFooterFade = (scrollEl, baseEl) => {
|
|
|
725
560
|
});
|
|
726
561
|
});
|
|
727
562
|
};
|
|
728
|
-
const createFooterHideInteraction = (footerEl, scrollEl) => createCollapseHideInteraction({
|
|
729
|
-
regionEl: footerEl,
|
|
730
|
-
scrollEl,
|
|
731
|
-
slideCssVar: '--footer-hide-slide-y',
|
|
732
|
-
contentPartnerClass: 'content-footer-hide-scroll-partner',
|
|
733
|
-
contentHiddenClass: 'content-footer-hide-scroll-hidden',
|
|
734
|
-
regionHiddenClass: 'footer-collapse-hide-hidden',
|
|
735
|
-
});
|
|
736
563
|
|
|
737
|
-
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)}
|
|
564
|
+
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}`;
|
|
738
565
|
|
|
739
|
-
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)}
|
|
566
|
+
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}`;
|
|
740
567
|
|
|
741
|
-
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)}
|
|
568
|
+
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}`;
|
|
742
569
|
|
|
743
570
|
const Footer = class {
|
|
744
571
|
constructor(hostRef) {
|
|
745
572
|
index.registerInstance(this, hostRef);
|
|
746
|
-
this.didLoad = false;
|
|
747
|
-
this.setupToken = 0;
|
|
748
573
|
this.keyboardCtrl = null;
|
|
749
574
|
this.keyboardCtrlPromise = null;
|
|
750
575
|
this.keyboardVisible = false;
|
|
@@ -759,45 +584,25 @@ const Footer = class {
|
|
|
759
584
|
this.translucent = false;
|
|
760
585
|
this.checkCollapsibleFooter = () => {
|
|
761
586
|
const theme = ionicGlobal.getIonTheme(this);
|
|
762
|
-
|
|
763
|
-
const hasFade = collapse === 'fade';
|
|
764
|
-
const hasHide = collapse === 'hide';
|
|
765
|
-
const runIosFade = theme === 'ios' && hasFade;
|
|
766
|
-
if (!runIosFade && !hasHide) {
|
|
767
|
-
this.destroyCollapsibleFooter();
|
|
768
|
-
return;
|
|
769
|
-
}
|
|
770
|
-
// Skip teardown/rebuild when the collapse mode and theme have not changed
|
|
771
|
-
// since the last setup — avoids thrashing listeners and resetting scroll
|
|
772
|
-
// accumulators on unrelated re-renders (e.g. keyboardVisible state flips).
|
|
773
|
-
const activeMode = hasHide ? 'hide' : 'fade';
|
|
774
|
-
if (this.appliedCollapse === activeMode && this.appliedTheme === theme) {
|
|
587
|
+
if (theme !== 'ios') {
|
|
775
588
|
return;
|
|
776
589
|
}
|
|
590
|
+
const { collapse } = this;
|
|
591
|
+
const hasFade = collapse === 'fade';
|
|
777
592
|
this.destroyCollapsibleFooter();
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
this.appliedTheme = theme;
|
|
787
|
-
if (runIosFade) {
|
|
593
|
+
if (hasFade) {
|
|
594
|
+
const appRootSelector = index.config.get('appRootSelector', 'ion-app');
|
|
595
|
+
const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
|
|
596
|
+
const contentEl = pageEl ? index$1.findIonContent(pageEl) : null;
|
|
597
|
+
if (!contentEl) {
|
|
598
|
+
index$1.printIonContentErrorMsg(this.el);
|
|
599
|
+
return;
|
|
600
|
+
}
|
|
788
601
|
this.setupFadeFooter(contentEl);
|
|
789
602
|
}
|
|
790
|
-
else if (hasHide) {
|
|
791
|
-
void this.setupHideFooter(contentEl);
|
|
792
|
-
}
|
|
793
603
|
};
|
|
794
604
|
this.setupFadeFooter = async (contentEl) => {
|
|
795
|
-
const
|
|
796
|
-
const scrollEl = await index$1.getScrollElement(contentEl);
|
|
797
|
-
if (token !== this.setupToken) {
|
|
798
|
-
return;
|
|
799
|
-
}
|
|
800
|
-
this.scrollEl = scrollEl;
|
|
605
|
+
const scrollEl = (this.scrollEl = await index$1.getScrollElement(contentEl));
|
|
801
606
|
/**
|
|
802
607
|
* Handle fading of toolbars on scroll
|
|
803
608
|
*/
|
|
@@ -809,18 +614,12 @@ const Footer = class {
|
|
|
809
614
|
};
|
|
810
615
|
}
|
|
811
616
|
componentDidLoad() {
|
|
812
|
-
this.didLoad = true;
|
|
813
617
|
this.checkCollapsibleFooter();
|
|
814
618
|
}
|
|
815
619
|
componentDidUpdate() {
|
|
816
620
|
this.checkCollapsibleFooter();
|
|
817
621
|
}
|
|
818
622
|
async connectedCallback() {
|
|
819
|
-
// On re-attach (didLoad already true but disconnectedCallback ran since),
|
|
820
|
-
// componentDidLoad will not fire again — re-run setup here.
|
|
821
|
-
if (this.didLoad) {
|
|
822
|
-
this.checkCollapsibleFooter();
|
|
823
|
-
}
|
|
824
623
|
const promise = keyboardController.createKeyboardController(async (keyboardOpen, waitForResize) => {
|
|
825
624
|
/**
|
|
826
625
|
* If the keyboard is hiding, then we need to wait
|
|
@@ -848,7 +647,6 @@ const Footer = class {
|
|
|
848
647
|
}
|
|
849
648
|
}
|
|
850
649
|
disconnectedCallback() {
|
|
851
|
-
this.destroyCollapsibleFooter();
|
|
852
650
|
if (this.keyboardCtrlPromise) {
|
|
853
651
|
this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
|
|
854
652
|
this.keyboardCtrlPromise = null;
|
|
@@ -858,36 +656,18 @@ const Footer = class {
|
|
|
858
656
|
this.keyboardCtrl = null;
|
|
859
657
|
}
|
|
860
658
|
}
|
|
861
|
-
async setupHideFooter(contentEl) {
|
|
862
|
-
const token = ++this.setupToken;
|
|
863
|
-
const scrollEl = await index$1.getScrollElement(contentEl);
|
|
864
|
-
// A newer checkCollapsibleFooter ran while we were awaiting — abandon.
|
|
865
|
-
if (token !== this.setupToken) {
|
|
866
|
-
return;
|
|
867
|
-
}
|
|
868
|
-
this.scrollEl = scrollEl;
|
|
869
|
-
this.footerHideCleanup = createFooterHideInteraction(this.el, scrollEl);
|
|
870
|
-
}
|
|
871
659
|
destroyCollapsibleFooter() {
|
|
872
|
-
// Invalidate any in-flight setupHideFooter/setupFadeFooter awaits.
|
|
873
|
-
this.setupToken++;
|
|
874
|
-
if (this.footerHideCleanup) {
|
|
875
|
-
this.footerHideCleanup();
|
|
876
|
-
this.footerHideCleanup = undefined;
|
|
877
|
-
}
|
|
878
660
|
if (this.scrollEl && this.contentScrollCallback) {
|
|
879
661
|
this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
|
|
880
662
|
this.contentScrollCallback = undefined;
|
|
881
663
|
}
|
|
882
|
-
this.appliedCollapse = undefined;
|
|
883
|
-
this.appliedTheme = undefined;
|
|
884
664
|
}
|
|
885
665
|
render() {
|
|
886
666
|
const { translucent, collapse } = this;
|
|
887
667
|
const theme = ionicGlobal.getIonTheme(this);
|
|
888
668
|
const tabs = this.el.closest('ion-tabs');
|
|
889
669
|
const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
|
|
890
|
-
return (index.h(index.Host, { key: '
|
|
670
|
+
return (index.h(index.Host, { key: '4a2989a177b47ee26ffa23e2c9f5418773584796', role: "contentinfo", class: {
|
|
891
671
|
[theme]: true,
|
|
892
672
|
// Used internally for styling
|
|
893
673
|
[`footer-${theme}`]: true,
|
|
@@ -895,7 +675,7 @@ const Footer = class {
|
|
|
895
675
|
[`footer-translucent-${theme}`]: translucent,
|
|
896
676
|
['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
|
|
897
677
|
[`footer-collapse-${collapse}`]: collapse !== undefined,
|
|
898
|
-
} }, theme === 'ios' && translucent && index.h("div", { key: '
|
|
678
|
+
} }, theme === 'ios' && translucent && index.h("div", { key: 'c644963db3e06254014e398ea02189d6127ccf61', class: "footer-background" }), index.h("slot", { key: '839e33c6c30f5c1c703239a19458ff10da9a5e76' })));
|
|
899
679
|
}
|
|
900
680
|
get el() { return index.getElement(this); }
|
|
901
681
|
};
|
|
@@ -1081,14 +861,6 @@ const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
|
|
|
1081
861
|
titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
|
|
1082
862
|
});
|
|
1083
863
|
};
|
|
1084
|
-
const createHeaderHideInteraction = (headerEl, scrollEl) => createCollapseHideInteraction({
|
|
1085
|
-
regionEl: headerEl,
|
|
1086
|
-
scrollEl,
|
|
1087
|
-
slideCssVar: '--header-hide-slide-y',
|
|
1088
|
-
contentPartnerClass: 'content-header-hide-scroll-partner',
|
|
1089
|
-
contentHiddenClass: 'content-header-hide-scroll-hidden',
|
|
1090
|
-
regionHiddenClass: 'header-collapse-hide-hidden',
|
|
1091
|
-
});
|
|
1092
864
|
const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
|
|
1093
865
|
index.readTask(() => {
|
|
1094
866
|
const scrollTop = scrollEl.scrollTop;
|
|
@@ -1145,17 +917,16 @@ const getRoleType = (isInsideMenu, isCondensed, theme) => {
|
|
|
1145
917
|
return ROLE_BANNER;
|
|
1146
918
|
};
|
|
1147
919
|
|
|
1148
|
-
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
|
|
920
|
+
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}}`;
|
|
1149
921
|
|
|
1150
|
-
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
|
|
922
|
+
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}`;
|
|
1151
923
|
|
|
1152
|
-
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
|
|
924
|
+
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}`;
|
|
1153
925
|
|
|
1154
926
|
const Header = class {
|
|
1155
927
|
constructor(hostRef) {
|
|
1156
928
|
index.registerInstance(this, hostRef);
|
|
1157
929
|
this.inheritedAttributes = {};
|
|
1158
|
-
this.didLoad = false;
|
|
1159
930
|
/**
|
|
1160
931
|
* If `true`, the header will have a line at the bottom.
|
|
1161
932
|
* TODO(ROU-10855): add support for this prop on ios/md themes
|
|
@@ -1186,37 +957,25 @@ const Header = class {
|
|
|
1186
957
|
this.inheritedAttributes = helpers.inheritAriaAttributes(this.el);
|
|
1187
958
|
}
|
|
1188
959
|
componentDidLoad() {
|
|
1189
|
-
this.didLoad = true;
|
|
1190
960
|
this.checkCollapsibleHeader();
|
|
1191
961
|
}
|
|
1192
962
|
componentDidUpdate() {
|
|
1193
963
|
this.checkCollapsibleHeader();
|
|
1194
964
|
}
|
|
1195
|
-
connectedCallback() {
|
|
1196
|
-
// On re-attach (didLoad already true but disconnectedCallback ran since),
|
|
1197
|
-
// componentDidLoad will not fire again — re-run setup here.
|
|
1198
|
-
if (this.didLoad) {
|
|
1199
|
-
this.checkCollapsibleHeader();
|
|
1200
|
-
}
|
|
1201
|
-
}
|
|
1202
965
|
disconnectedCallback() {
|
|
1203
966
|
this.destroyCollapsibleHeader();
|
|
1204
967
|
}
|
|
1205
968
|
async checkCollapsibleHeader() {
|
|
1206
969
|
const theme = ionicGlobal.getIonTheme(this);
|
|
970
|
+
if (theme !== 'ios') {
|
|
971
|
+
return;
|
|
972
|
+
}
|
|
1207
973
|
const { collapse } = this;
|
|
1208
974
|
const hasCondense = collapse === 'condense';
|
|
1209
975
|
const hasFade = collapse === 'fade';
|
|
1210
|
-
const hasHide = collapse === 'hide';
|
|
1211
|
-
const runIosCollapse = theme === 'ios' && (hasCondense || hasFade);
|
|
1212
|
-
const runHide = hasHide;
|
|
1213
|
-
if (!runIosCollapse && !runHide) {
|
|
1214
|
-
this.destroyCollapsibleHeader();
|
|
1215
|
-
return;
|
|
1216
|
-
}
|
|
1217
976
|
this.destroyCollapsibleHeader();
|
|
1218
977
|
const appRootSelector = index.config.get('appRootSelector', 'ion-app');
|
|
1219
|
-
if (
|
|
978
|
+
if (hasCondense) {
|
|
1220
979
|
const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
|
|
1221
980
|
const contentEl = pageEl ? index$1.findIonContent(pageEl) : null;
|
|
1222
981
|
// Cloned elements are always needed in iOS transition
|
|
@@ -1227,7 +986,7 @@ const Header = class {
|
|
|
1227
986
|
});
|
|
1228
987
|
await this.setupCondenseHeader(contentEl, pageEl);
|
|
1229
988
|
}
|
|
1230
|
-
else if (
|
|
989
|
+
else if (hasFade) {
|
|
1231
990
|
const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
|
|
1232
991
|
const contentEl = pageEl ? index$1.findIonContent(pageEl) : null;
|
|
1233
992
|
if (!contentEl) {
|
|
@@ -1237,29 +996,12 @@ const Header = class {
|
|
|
1237
996
|
const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
|
|
1238
997
|
await this.setupFadeHeader(contentEl, condenseHeader);
|
|
1239
998
|
}
|
|
1240
|
-
if (runHide) {
|
|
1241
|
-
const pageEl = this.el.closest(`${appRootSelector},ion-page,.ion-page,page-inner`);
|
|
1242
|
-
const contentEl = pageEl ? index$1.findIonContent(pageEl) : null;
|
|
1243
|
-
if (!contentEl) {
|
|
1244
|
-
index$1.printIonContentErrorMsg(this.el);
|
|
1245
|
-
return;
|
|
1246
|
-
}
|
|
1247
|
-
await this.setupHideHeader(contentEl);
|
|
1248
|
-
}
|
|
1249
|
-
}
|
|
1250
|
-
async setupHideHeader(contentEl) {
|
|
1251
|
-
const scrollEl = (this.scrollEl = await index$1.getScrollElement(contentEl));
|
|
1252
|
-
this.headerHideCleanup = createHeaderHideInteraction(this.el, scrollEl);
|
|
1253
999
|
}
|
|
1254
1000
|
destroyCollapsibleHeader() {
|
|
1255
1001
|
if (this.intersectionObserver) {
|
|
1256
1002
|
this.intersectionObserver.disconnect();
|
|
1257
1003
|
this.intersectionObserver = undefined;
|
|
1258
1004
|
}
|
|
1259
|
-
if (this.headerHideCleanup) {
|
|
1260
|
-
this.headerHideCleanup();
|
|
1261
|
-
this.headerHideCleanup = undefined;
|
|
1262
|
-
}
|
|
1263
1005
|
if (this.scrollEl && this.contentScrollCallback) {
|
|
1264
1006
|
this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
|
|
1265
1007
|
this.contentScrollCallback = undefined;
|
|
@@ -1326,7 +1068,7 @@ const Header = class {
|
|
|
1326
1068
|
const isCondensed = collapse === 'condense';
|
|
1327
1069
|
// banner role must be at top level, so remove role if inside a menu
|
|
1328
1070
|
const roleType = getRoleType(theme.hostContext('ion-menu', this.el), isCondensed, theme$1);
|
|
1329
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
1071
|
+
return (index.h(index.Host, Object.assign({ key: '3395dedfd5165ba6e9f3ad1a25f0bb5b3678704a', role: roleType, class: {
|
|
1330
1072
|
[theme$1]: true,
|
|
1331
1073
|
// Used internally for styling
|
|
1332
1074
|
[`header-${theme$1}`]: true,
|
|
@@ -1334,7 +1076,7 @@ const Header = class {
|
|
|
1334
1076
|
[`header-collapse-${collapse}`]: true,
|
|
1335
1077
|
[`header-translucent-${theme$1}`]: this.translucent,
|
|
1336
1078
|
['header-divider']: divider,
|
|
1337
|
-
} }, inheritedAttributes), theme$1 !== 'md' && translucent && index.h("div", { key: '
|
|
1079
|
+
} }, inheritedAttributes), theme$1 !== 'md' && translucent && index.h("div", { key: 'cafeb88b6e73d64b264514ea46590fd3477b3052', class: "header-background" }), index.h("slot", { key: 'ad681aaf866d7e7a5e5e731c0b5d6f5cc9fe94d2' })));
|
|
1338
1080
|
}
|
|
1339
1081
|
get el() { return index.getElement(this); }
|
|
1340
1082
|
};
|
|
@@ -1521,7 +1263,7 @@ const RouterOutlet = class {
|
|
|
1521
1263
|
return true;
|
|
1522
1264
|
}
|
|
1523
1265
|
render() {
|
|
1524
|
-
return index.h("slot", { key: '
|
|
1266
|
+
return index.h("slot", { key: '56e3d06ed939755796058e30ef19fbc7f7cb490d' });
|
|
1525
1267
|
}
|
|
1526
1268
|
get el() { return index.getElement(this); }
|
|
1527
1269
|
static get watchers() { return {
|
|
@@ -1561,11 +1303,11 @@ const ToolbarTitle = class {
|
|
|
1561
1303
|
render() {
|
|
1562
1304
|
const theme$1 = ionicGlobal.getIonTheme(this);
|
|
1563
1305
|
const size = this.getSize();
|
|
1564
|
-
return (index.h(index.Host, { key: '
|
|
1306
|
+
return (index.h(index.Host, { key: 'd64e86bed418cba707d4a26c9274f18ed06c0e9e', class: theme.createColorClasses(this.color, {
|
|
1565
1307
|
[theme$1]: true,
|
|
1566
1308
|
[`title-${size}`]: true,
|
|
1567
1309
|
'title-rtl': document.dir === 'rtl',
|
|
1568
|
-
}) }, index.h("div", { key: '
|
|
1310
|
+
}) }, index.h("div", { key: '386a71e974cde0bfbf5b655d69ed5f718de8ce48', class: "toolbar-title" }, index.h("slot", { key: '8aa804c9e1b11574a42268805d3117a085e699b4' }))));
|
|
1569
1311
|
}
|
|
1570
1312
|
get el() { return index.getElement(this); }
|
|
1571
1313
|
static get watchers() { return {
|
|
@@ -1811,11 +1553,11 @@ const Toolbar = class {
|
|
|
1811
1553
|
Object.assign(childStyles, style);
|
|
1812
1554
|
});
|
|
1813
1555
|
const titlePlacement = this.getTitlePlacement();
|
|
1814
|
-
return (index.h(index.Host, { key: '
|
|
1556
|
+
return (index.h(index.Host, { key: 'bcb621674157410d7eaeb006779bdd677346587e', class: Object.assign(Object.assign({}, theme.createColorClasses(this.color, {
|
|
1815
1557
|
[theme$1]: true,
|
|
1816
1558
|
'in-toolbar': theme.hostContext('ion-toolbar', this.el),
|
|
1817
1559
|
[`toolbar-title-placement-${titlePlacement}`]: true,
|
|
1818
|
-
})), childStyles) }, index.h("div", { key: '
|
|
1560
|
+
})), childStyles) }, index.h("div", { key: '0d31a98b2571b9a0ae142fbdfd83e2ebdcd8e069', class: "toolbar-background", part: "background" }), index.h("div", { key: 'de938534c487c6cb4060dac44b40c2d872130f50', class: "toolbar-container", part: "container" }, index.h("slot", { key: 'a337150d353e439eae67c31ff86e383ed51f3d8f', name: "start", onSlotchange: () => this.updateSlotClasses }), index.h("slot", { key: '02effd3ce0cdad5ec5645fa58ccb329321449190', name: "secondary", onSlotchange: () => this.updateSlotClasses }), index.h("div", { key: '3e22f5feda2aea02117bdea2fe8a4b8905ba82f6', class: "toolbar-content", part: "content" }, index.h("slot", { key: 'ebf828643ff05a8bf662a54715d21d0859168d31' })), index.h("slot", { key: 'a6940648dfe25a7aa8792a1bd9267437274f333c', name: "primary", onSlotchange: () => this.updateSlotClasses }), index.h("slot", { key: 'afb1d61aa0e430fcf483ba482af64762474e06fe', name: "end", onSlotchange: () => this.updateSlotClasses }))));
|
|
1819
1561
|
}
|
|
1820
1562
|
get el() { return index.getElement(this); }
|
|
1821
1563
|
static get watchers() { return {
|
|
@@ -161,9 +161,9 @@ const Thumbnail = class {
|
|
|
161
161
|
}
|
|
162
162
|
render() {
|
|
163
163
|
const theme = ionicGlobal.getIonTheme(this);
|
|
164
|
-
return (index.h(index.Host, { key: '
|
|
164
|
+
return (index.h(index.Host, { key: 'fdf9d92949a1e8cf6faded77ffed084f74fc040b', class: {
|
|
165
165
|
[theme]: true,
|
|
166
|
-
} }, index.h("slot", { key: '
|
|
166
|
+
} }, index.h("slot", { key: 'e1b1439c035d9a9503efd1c1a04aed9f4e8e0af7' })));
|
|
167
167
|
}
|
|
168
168
|
};
|
|
169
169
|
Thumbnail.style = thumbnailCss();
|
|
@@ -128,10 +128,10 @@ const Grid = class {
|
|
|
128
128
|
}
|
|
129
129
|
render() {
|
|
130
130
|
const theme = ionicGlobal.getIonTheme(this);
|
|
131
|
-
return (index.h(index.Host, { key: '
|
|
131
|
+
return (index.h(index.Host, { key: 'e3320fc2fc5391d26898cc119505cd3be30dd48b', class: {
|
|
132
132
|
[theme]: true,
|
|
133
133
|
'grid-fixed': this.fixed,
|
|
134
|
-
} }, index.h("slot", { key: '
|
|
134
|
+
} }, index.h("slot", { key: '2000e6b336c294aadf4585269c301d734d2fe478' })));
|
|
135
135
|
}
|
|
136
136
|
};
|
|
137
137
|
Grid.style = gridCss();
|
|
@@ -144,9 +144,9 @@ const Row = class {
|
|
|
144
144
|
}
|
|
145
145
|
render() {
|
|
146
146
|
const theme = ionicGlobal.getIonTheme(this);
|
|
147
|
-
return (index.h(index.Host, { key: '
|
|
147
|
+
return (index.h(index.Host, { key: '3a3c40062d2d0487c61dedbb172215b87bb425b1', class: {
|
|
148
148
|
[theme]: true,
|
|
149
|
-
} }, index.h("slot", { key: '
|
|
149
|
+
} }, index.h("slot", { key: '164f457f6f7853ed8f7279d20bc6ede6cf9d3e5c' })));
|
|
150
150
|
}
|
|
151
151
|
};
|
|
152
152
|
Row.style = rowCss();
|
|
@@ -2311,11 +2311,11 @@ const Picker = class {
|
|
|
2311
2311
|
render() {
|
|
2312
2312
|
const { htmlAttributes } = this;
|
|
2313
2313
|
const theme$1 = ionicGlobal.getIonTheme(this);
|
|
2314
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
2314
|
+
return (index.h(index.Host, Object.assign({ key: '681ad6d20efa16f1d6c6f9a7d03caec2b17ff36e', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
|
|
2315
2315
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2316
2316
|
}, class: Object.assign({ [theme$1]: true,
|
|
2317
2317
|
// Used internally for styling
|
|
2318
|
-
[`picker-${theme$1}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index.h("ion-backdrop", { key: '
|
|
2318
|
+
[`picker-${theme$1}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index.h("ion-backdrop", { key: '6dc71805810955048479c2a6eddce2303161cb8f', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: '0e61724c261c9d69ba23d3cb9064018942755033', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: 'a6ca79c9a5fce42b5aad6808802535c723f27fb9', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index.h("div", { key: '7651cbe9d723bba032788d85711e0f7c1dc32c21', class: "picker-toolbar" }, this.buttons.map((b) => (index.h("div", { class: buttonWrapperClass(b) }, index.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index.h("div", { key: 'd6b83aded670bc74515c337c038503e396ab42cc', class: "picker-columns" }, index.h("div", { key: '1dfef6ed386d7b327dc19397cc9f01c3938fbab9', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index.h("ion-picker-legacy-column", { col: c })), index.h("div", { key: 'ec8b2f4de073a245f8917a494a681adf5d1f94f6', class: "picker-below-highlight" }))), index.h("div", { key: '8557ce93083feefa5deb6097270d756424f89ab2', tabindex: "0", "aria-hidden": "true" })));
|
|
2319
2319
|
}
|
|
2320
2320
|
get el() { return index.getElement(this); }
|
|
2321
2321
|
static get watchers() { return {
|
|
@@ -2673,9 +2673,9 @@ const PickerColumnCmp = class {
|
|
|
2673
2673
|
render() {
|
|
2674
2674
|
const col = this.col;
|
|
2675
2675
|
const theme$1 = ionicGlobal.getIonTheme(this);
|
|
2676
|
-
return (index.h(index.Host, { key: '
|
|
2676
|
+
return (index.h(index.Host, { key: 'aed1c1a702e03765d704f6f563fe26df58e68bbf', class: Object.assign({ [theme$1]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, theme.getClassMap(col.cssClass)), style: {
|
|
2677
2677
|
'max-width': this.col.columnWidth,
|
|
2678
|
-
} }, col.prefix && (index.h("div", { key: '
|
|
2678
|
+
} }, col.prefix && (index.h("div", { key: 'a6fae778eec5d57dba4b36b3e448c5c12fe0688b', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), index.h("div", { key: '1b77354fe5eeeeb4db94fab035a9ef5e45d695ac', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index$1) => (index.h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index$1 }, o.text)))), col.suffix && (index.h("div", { key: '105286ef7ba6eac0796f5af7d6f1daef7107444a', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
|
|
2679
2679
|
}
|
|
2680
2680
|
get el() { return index.getElement(this); }
|
|
2681
2681
|
static get watchers() { return {
|