@ionic/core 8.8.10 → 8.8.11-dev.11781186446.19d9a1cc
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/index.js +1 -1
- package/components/ion-action-sheet.js +1 -1
- package/components/ion-alert.js +1 -1
- package/components/ion-back-button.js +1 -1
- package/components/ion-button.js +1 -1
- package/components/ion-card.js +1 -1
- package/components/ion-chip.js +1 -1
- package/components/ion-datetime-button.js +1 -1
- package/components/ion-datetime.js +1 -1
- package/components/ion-fab-button.js +1 -1
- package/components/ion-infinite-scroll-content.js +1 -1
- package/components/ion-input-password-toggle.js +1 -1
- package/components/ion-input.js +1 -1
- package/components/ion-item-option.js +1 -1
- package/components/ion-item.js +1 -1
- package/components/ion-loading.js +1 -1
- package/components/ion-menu-button.js +1 -1
- package/components/ion-menu.js +1 -1
- package/components/ion-modal.js +1 -1
- package/components/ion-popover.js +1 -1
- package/components/ion-progress-bar.js +1 -1
- package/components/ion-radio.js +1 -1
- package/components/ion-range.js +1 -1
- package/components/ion-refresher-content.js +1 -1
- package/components/ion-refresher.js +1 -1
- package/components/ion-reorder-group.js +1 -1
- package/components/ion-reorder.js +1 -1
- package/components/ion-ripple-effect.js +1 -1
- package/components/ion-router-link.js +1 -1
- package/components/ion-router-outlet.js +1 -1
- package/components/ion-row.js +1 -1
- package/components/ion-searchbar.js +1 -1
- package/components/ion-segment-button.js +1 -1
- package/components/ion-segment-content.js +1 -1
- package/components/ion-segment-view.js +1 -1
- package/components/ion-segment.js +1 -1
- package/components/ion-select-modal.js +1 -1
- package/components/ion-select-option.js +1 -1
- package/components/ion-select-popover.js +1 -1
- package/components/ion-select.js +1 -1
- package/components/ion-skeleton-text.js +1 -1
- package/components/ion-spinner.js +1 -1
- package/components/ion-split-pane.js +1 -1
- package/components/ion-tab-bar.js +1 -1
- package/components/ion-tab-button.js +1 -1
- package/components/ion-tab.js +1 -1
- package/components/ion-tabs.js +1 -1
- package/components/ion-text.js +1 -1
- package/components/ion-textarea.js +1 -1
- package/components/ion-thumbnail.js +1 -1
- package/components/ion-title.js +1 -1
- package/components/ion-toast.js +1 -1
- package/components/ion-toggle.js +1 -1
- package/components/ion-toolbar.js +1 -1
- package/components/{p-nQi4oKcG.js → p-B8U2xbtx.js} +1 -1
- package/components/p-BpCi7xHq.js +4 -0
- package/components/p-CHzfYZbv.js +4 -0
- package/components/{p-DDWp95gH.js → p-Ck2wcXbv.js} +1 -1
- package/components/{p-C2lKgrXx.js → p-DEBD4LvH.js} +1 -1
- package/components/p-DH50pr9O.js +4 -0
- package/components/{p-BSEgsdFI.js → p-DhkITZ-y.js} +1 -1
- package/components/p-DmpBvltk.js +4 -0
- package/components/{p-5bE_Wz4Y.js → p-DpV-p5Xs.js} +1 -1
- package/components/{p-Cfx4M1Bn.js → p-Dz74mwlk.js} +1 -1
- package/components/{p-BLmJ0zRm.js → p-XJWMAP8m.js} +1 -1
- package/components/p-djQLE88P.js +4 -0
- package/components/{p-B60hm8Qv.js → p-r0aq7dpt.js} +1 -1
- package/components/{p-rCa2eL0j.js → p-wk2QqrAo.js} +1 -1
- package/dist/cjs/index.cjs.js +1 -2
- package/dist/cjs/ion-action-sheet.cjs.entry.js +8 -4
- package/dist/cjs/ion-alert.cjs.entry.js +7 -3
- package/dist/cjs/ion-app_8.cjs.entry.js +23 -9
- package/dist/cjs/ion-avatar_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-col_3.cjs.entry.js +1 -1
- package/dist/cjs/{ion-datetime_3.cjs.entry.js → ion-datetime.cjs.entry.js} +1 -639
- package/dist/cjs/ion-input.cjs.entry.js +4 -4
- package/dist/cjs/ion-item_8.cjs.entry.js +2 -2
- package/dist/cjs/ion-loading.cjs.entry.js +7 -3
- package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-modal.cjs.entry.js +9 -5
- package/dist/cjs/ion-popover.cjs.entry.js +7 -3
- package/dist/cjs/ion-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/ion-radio_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-range.cjs.entry.js +3 -3
- package/dist/cjs/ion-refresher_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-reorder_2.cjs.entry.js +2 -2
- package/dist/cjs/ion-ripple-effect.cjs.entry.js +1 -1
- package/dist/cjs/ion-route_4.cjs.entry.js +2 -2
- package/dist/cjs/ion-searchbar.cjs.entry.js +5 -5
- package/dist/cjs/ion-segment-content.cjs.entry.js +1 -1
- package/dist/cjs/ion-segment-view.cjs.entry.js +2 -2
- package/dist/cjs/ion-segment_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-select-modal.cjs.entry.js +2 -2
- package/dist/cjs/ion-select_3.cjs.entry.js +36 -5
- package/dist/cjs/ion-spinner.cjs.entry.js +1 -1
- package/dist/cjs/ion-split-pane.cjs.entry.js +2 -2
- package/dist/cjs/ion-tab-bar_2.cjs.entry.js +4 -4
- package/dist/cjs/ion-tab_2.cjs.entry.js +3 -3
- package/dist/cjs/ion-text.cjs.entry.js +2 -2
- package/dist/cjs/ion-textarea.cjs.entry.js +2 -2
- package/dist/cjs/ion-toast.cjs.entry.js +3 -3
- package/dist/cjs/ion-toggle.cjs.entry.js +3 -3
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{overlays-TbKsuC-K.js → overlays-DSmSrd_4.js} +26 -7
- package/dist/collection/collection-manifest.json +5 -9
- package/dist/collection/components/action-sheet/action-sheet.js +8 -4
- package/dist/collection/components/alert/alert.js +7 -3
- package/dist/collection/components/input/input.js +8 -8
- package/dist/collection/components/loading/loading.js +7 -3
- package/dist/collection/components/modal/modal.js +9 -5
- package/dist/collection/components/popover/popover.js +7 -3
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/radio/radio.js +4 -4
- package/dist/collection/components/range/range.js +3 -3
- package/dist/collection/components/refresher/refresher.js +1 -1
- package/dist/collection/components/refresher-content/refresher-content.js +1 -1
- package/dist/collection/components/reorder/reorder.js +1 -1
- package/dist/collection/components/reorder-group/reorder-group.js +1 -1
- package/dist/collection/components/ripple-effect/ripple-effect.js +1 -1
- package/dist/collection/components/router-link/router-link.js +2 -2
- package/dist/collection/components/router-outlet/router-outlet.js +38 -5
- package/dist/collection/components/row/row.js +1 -1
- package/dist/collection/components/searchbar/searchbar.js +9 -9
- package/dist/collection/components/segment/segment.js +2 -2
- package/dist/collection/components/segment-button/segment-button.js +2 -2
- package/dist/collection/components/segment-content/segment-content.js +1 -1
- package/dist/collection/components/segment-view/segment-view.js +2 -2
- package/dist/collection/components/select/select.js +33 -2
- 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 +1 -1
- package/dist/collection/components/skeleton-text/skeleton-text.js +2 -2
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/split-pane/split-pane.js +2 -2
- package/dist/collection/components/tab/tab.js +2 -2
- package/dist/collection/components/tab-bar/tab-bar.js +2 -2
- package/dist/collection/components/tab-button/tab-button.js +2 -2
- package/dist/collection/components/tabs/tabs.js +1 -1
- package/dist/collection/components/text/text.js +2 -2
- package/dist/collection/components/textarea/textarea.js +2 -2
- package/dist/collection/components/thumbnail/thumbnail.js +1 -1
- package/dist/collection/components/title/title.js +2 -2
- package/dist/collection/components/toast/toast.js +2 -2
- package/dist/collection/components/toggle/toggle.js +3 -3
- package/dist/collection/components/toolbar/toolbar.js +2 -2
- package/dist/collection/index.js +1 -1
- package/dist/collection/utils/overlays.js +25 -6
- package/dist/docs.json +247 -1170
- package/dist/esm/{index-DV3sJJW8.js → index-AlrZKoWR.js} +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-accordion_2.entry.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +8 -4
- package/dist/esm/ion-alert.entry.js +7 -3
- package/dist/esm/ion-app_8.entry.js +23 -9
- package/dist/esm/ion-avatar_3.entry.js +1 -1
- package/dist/esm/ion-back-button.entry.js +1 -1
- package/dist/esm/ion-breadcrumb_2.entry.js +1 -1
- package/dist/esm/ion-col_3.entry.js +1 -1
- package/dist/esm/{ion-datetime_3.entry.js → ion-datetime.entry.js} +5 -641
- package/dist/esm/ion-fab_3.entry.js +1 -1
- package/dist/esm/ion-input-password-toggle.entry.js +1 -1
- package/dist/esm/ion-input.entry.js +5 -5
- package/dist/esm/ion-item_8.entry.js +3 -3
- package/dist/esm/ion-loading.entry.js +7 -3
- package/dist/esm/ion-menu_3.entry.js +2 -2
- package/dist/esm/ion-modal.entry.js +9 -5
- package/dist/esm/ion-popover.entry.js +7 -3
- package/dist/esm/ion-progress-bar.entry.js +1 -1
- package/dist/esm/ion-radio_2.entry.js +3 -3
- package/dist/esm/ion-range.entry.js +3 -3
- package/dist/esm/ion-refresher_2.entry.js +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 +6 -6
- package/dist/esm/ion-segment-content.entry.js +1 -1
- package/dist/esm/ion-segment-view.entry.js +2 -2
- package/dist/esm/ion-segment_2.entry.js +4 -4
- package/dist/esm/ion-select-modal.entry.js +2 -2
- package/dist/esm/ion-select_3.entry.js +38 -7
- package/dist/esm/ion-spinner.entry.js +1 -1
- package/dist/esm/ion-split-pane.entry.js +2 -2
- package/dist/esm/ion-tab-bar_2.entry.js +4 -4
- package/dist/esm/ion-tab_2.entry.js +3 -3
- package/dist/esm/ion-text.entry.js +2 -2
- package/dist/esm/ion-textarea.entry.js +2 -2
- package/dist/esm/ion-toast.entry.js +3 -3
- package/dist/esm/ion-toggle.entry.js +4 -4
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{overlays-TbiM4mdr.js → overlays-DLNOHWNc.js} +26 -7
- package/dist/html.html-data.json +6 -77
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-aa5d6b8f.entry.js → p-03aa786d.entry.js} +1 -1
- package/dist/ionic/{p-8fce95d5.entry.js → p-14095ba5.entry.js} +1 -1
- package/dist/ionic/{p-3a126bca.entry.js → p-259d0d98.entry.js} +1 -1
- package/dist/ionic/{p-e847a888.entry.js → p-2a6d6565.entry.js} +1 -1
- package/dist/ionic/{p-fabcce6c.entry.js → p-341032b3.entry.js} +1 -1
- package/dist/ionic/{p-a21add2f.entry.js → p-441fbb13.entry.js} +1 -1
- package/dist/ionic/{p-3a7d1e91.entry.js → p-4502a274.entry.js} +1 -1
- package/dist/ionic/p-4621c387.entry.js +4 -0
- package/dist/ionic/p-4bb3eb60.entry.js +4 -0
- package/dist/ionic/{p-874b4bd8.entry.js → p-51cd1643.entry.js} +1 -1
- package/dist/ionic/p-5c3ec490.entry.js +4 -0
- package/dist/ionic/{p-3ae5f277.entry.js → p-627fabd9.entry.js} +1 -1
- package/dist/ionic/{p-e0be05c5.entry.js → p-629e4703.entry.js} +1 -1
- package/dist/ionic/{p-5d1da0a2.entry.js → p-76e92a84.entry.js} +1 -1
- package/dist/ionic/{p-9f1103ce.entry.js → p-7a37b3ce.entry.js} +1 -1
- package/dist/ionic/p-7aed7726.entry.js +4 -0
- package/dist/ionic/p-7ebd980c.entry.js +4 -0
- package/dist/ionic/{p-3353c229.entry.js → p-80b44b3c.entry.js} +1 -1
- package/dist/ionic/p-8d624ee5.entry.js +4 -0
- package/dist/ionic/{p-390ca786.entry.js → p-9177f4ac.entry.js} +1 -1
- package/dist/ionic/p-944c8939.entry.js +4 -0
- package/dist/ionic/p-9c6a5a8d.entry.js +4 -0
- package/dist/ionic/{p-DV3sJJW8.js → p-AlrZKoWR.js} +1 -1
- package/dist/ionic/p-Cg5-OQYy.js +4 -0
- package/dist/ionic/p-a2e51c5d.entry.js +4 -0
- package/dist/ionic/{p-4858af1f.entry.js → p-a5213260.entry.js} +1 -1
- package/dist/ionic/{p-37e720da.entry.js → p-a7628bc7.entry.js} +1 -1
- package/dist/ionic/{p-ef4c3bee.entry.js → p-b1599fca.entry.js} +1 -1
- package/dist/ionic/p-b16be471.entry.js +4 -0
- package/dist/ionic/{p-84d5ce05.entry.js → p-b9ac1fe0.entry.js} +1 -1
- package/dist/ionic/{p-94f2a736.entry.js → p-c93553d2.entry.js} +1 -1
- package/dist/ionic/{p-75dc25ba.entry.js → p-d2c7f046.entry.js} +1 -1
- package/dist/ionic/{p-c4d8641b.entry.js → p-d8387b99.entry.js} +1 -1
- package/dist/ionic/p-d8ac9eea.entry.js +4 -0
- package/dist/ionic/{p-9a65ac7f.entry.js → p-db1b6738.entry.js} +1 -1
- package/dist/ionic/p-ed797c72.entry.js +4 -0
- package/dist/ionic/{p-8eb8ee76.entry.js → p-ef93ca92.entry.js} +1 -1
- package/dist/ionic/p-f09f9642.entry.js +4 -0
- package/dist/ionic/p-f1c06f82.entry.js +4 -0
- package/dist/ionic/{p-0fa9c382.entry.js → p-fe4aa1db.entry.js} +1 -1
- package/dist/types/components/input/input.d.ts +1 -1
- package/dist/types/components/router-outlet/router-outlet.d.ts +7 -0
- package/dist/types/components/searchbar/searchbar.d.ts +1 -1
- package/dist/types/components/select/select.d.ts +1 -0
- package/dist/types/components.d.ts +19 -282
- package/dist/types/index.d.ts +1 -1
- package/dist/types/interface.d.ts +0 -1
- package/dist/types/utils/config.d.ts +0 -8
- package/dist/types/utils/overlays.d.ts +11 -9
- package/hydrate/index.js +202 -795
- package/hydrate/index.mjs +202 -795
- package/package.json +37 -5
- package/components/ion-picker-legacy-column.d.ts +0 -11
- package/components/ion-picker-legacy-column.js +0 -4
- package/components/ion-picker-legacy.d.ts +0 -11
- package/components/ion-picker-legacy.js +0 -4
- package/components/p-0NRupjzW.js +0 -4
- package/components/p-Bth-EzJ0.js +0 -4
- package/components/p-CU5rbWAW.js +0 -4
- package/components/p-W9CZ2mWX.js +0 -4
- package/components/p-dhLYXa7A.js +0 -4
- package/components/p-uVRyUM3z.js +0 -4
- package/dist/collection/components/picker-legacy/animations/ios.enter.js +0 -27
- package/dist/collection/components/picker-legacy/animations/ios.leave.js +0 -23
- package/dist/collection/components/picker-legacy/picker-interface.js +0 -1
- package/dist/collection/components/picker-legacy/picker.ios.css +0 -300
- package/dist/collection/components/picker-legacy/picker.js +0 -890
- package/dist/collection/components/picker-legacy/picker.md.css +0 -287
- package/dist/collection/components/picker-legacy-column/picker-column.ios.css +0 -231
- package/dist/collection/components/picker-legacy-column/picker-column.js +0 -422
- package/dist/collection/components/picker-legacy-column/picker-column.md.css +0 -222
- package/dist/collection/components/picker-legacy-column/test/test.utils.js +0 -43
- package/dist/ionic/p-00dbb17e.entry.js +0 -4
- package/dist/ionic/p-01f81ea5.entry.js +0 -4
- package/dist/ionic/p-0d005398.entry.js +0 -4
- package/dist/ionic/p-27d30585.entry.js +0 -4
- package/dist/ionic/p-2bb2cb18.entry.js +0 -4
- package/dist/ionic/p-2f55dc1a.entry.js +0 -4
- package/dist/ionic/p-30bf9737.entry.js +0 -4
- package/dist/ionic/p-3a541154.entry.js +0 -4
- package/dist/ionic/p-485fda23.entry.js +0 -4
- package/dist/ionic/p-4baa5b82.entry.js +0 -4
- package/dist/ionic/p-4dc1c33c.entry.js +0 -4
- package/dist/ionic/p-5fc7e542.entry.js +0 -4
- package/dist/ionic/p-e686695b.entry.js +0 -4
- package/dist/ionic/p-ec090e0a.entry.js +0 -4
- package/dist/ionic/p-xOfi7-Zn.js +0 -4
- package/dist/types/components/picker-legacy/animations/ios.enter.d.ts +0 -5
- package/dist/types/components/picker-legacy/animations/ios.leave.d.ts +0 -5
- package/dist/types/components/picker-legacy/picker-interface.d.ts +0 -52
- package/dist/types/components/picker-legacy/picker.d.ts +0 -158
- package/dist/types/components/picker-legacy-column/picker-column.d.ts +0 -46
- package/dist/types/components/picker-legacy-column/test/test.utils.d.ts +0 -9
|
@@ -120,10 +120,6 @@ const alertController = /*@__PURE__*/ createController('ion-alert');
|
|
|
120
120
|
const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
|
|
121
121
|
const loadingController = /*@__PURE__*/ createController('ion-loading');
|
|
122
122
|
const modalController = /*@__PURE__*/ createController('ion-modal');
|
|
123
|
-
/**
|
|
124
|
-
* @deprecated Use the inline ion-picker component instead.
|
|
125
|
-
*/
|
|
126
|
-
const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
|
|
127
123
|
const popoverController = /*@__PURE__*/ createController('ion-popover');
|
|
128
124
|
const toastController = /*@__PURE__*/ createController('ion-toast');
|
|
129
125
|
/**
|
|
@@ -217,7 +213,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
|
|
|
217
213
|
* Should NOT include: Toast
|
|
218
214
|
*/
|
|
219
215
|
const trapKeyboardFocus = (ev, doc) => {
|
|
220
|
-
const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-
|
|
216
|
+
const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover');
|
|
221
217
|
const target = ev.target;
|
|
222
218
|
/**
|
|
223
219
|
* If no active overlay, ignore this event.
|
|
@@ -451,7 +447,7 @@ const dismissOverlay = (doc, data, role, overlayTag, id) => {
|
|
|
451
447
|
*/
|
|
452
448
|
const getOverlays = (doc, selector) => {
|
|
453
449
|
if (selector === undefined) {
|
|
454
|
-
selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-
|
|
450
|
+
selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover,ion-toast';
|
|
455
451
|
}
|
|
456
452
|
return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
|
|
457
453
|
};
|
|
@@ -513,6 +509,29 @@ const setRootAriaHidden = (hidden = false) => {
|
|
|
513
509
|
viewContainer.removeAttribute('aria-hidden');
|
|
514
510
|
}
|
|
515
511
|
};
|
|
512
|
+
/**
|
|
513
|
+
* Cleans up root `aria-hidden` and `backdrop-no-scroll` when
|
|
514
|
+
* an overlay is removed from the DOM without going through
|
|
515
|
+
* the `dismiss()` flow (e.g., when a framework unmounts the
|
|
516
|
+
* overlay during a route change).
|
|
517
|
+
*
|
|
518
|
+
* Should be called from an overlay's `disconnectedCallback`
|
|
519
|
+
* when the overlay was still presented at the time of removal.
|
|
520
|
+
*/
|
|
521
|
+
const cleanupRootFocusTrapAccessibility = () => {
|
|
522
|
+
if (typeof document === 'undefined') {
|
|
523
|
+
return;
|
|
524
|
+
}
|
|
525
|
+
const remainingOverlays = getPresentedOverlays(document);
|
|
526
|
+
const hasRemainingLocking = remainingOverlays.some((o) => {
|
|
527
|
+
const el = o;
|
|
528
|
+
return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
|
|
529
|
+
});
|
|
530
|
+
if (!hasRemainingLocking) {
|
|
531
|
+
setRootAriaHidden(false);
|
|
532
|
+
document.body.classList.remove(gestureController.BACKDROP_NO_SCROLL);
|
|
533
|
+
}
|
|
534
|
+
};
|
|
516
535
|
const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
|
|
517
536
|
var _a, _b;
|
|
518
537
|
if (overlay.presented) {
|
|
@@ -920,6 +939,7 @@ exports.GESTURE = GESTURE;
|
|
|
920
939
|
exports.OVERLAY_GESTURE_PRIORITY = OVERLAY_GESTURE_PRIORITY;
|
|
921
940
|
exports.actionSheetController = actionSheetController;
|
|
922
941
|
exports.alertController = alertController;
|
|
942
|
+
exports.cleanupRootFocusTrapAccessibility = cleanupRootFocusTrapAccessibility;
|
|
923
943
|
exports.createDelegateController = createDelegateController;
|
|
924
944
|
exports.createTriggerController = createTriggerController;
|
|
925
945
|
exports.dismiss = dismiss;
|
|
@@ -930,7 +950,6 @@ exports.getPresentedOverlay = getPresentedOverlay;
|
|
|
930
950
|
exports.isCancel = isCancel;
|
|
931
951
|
exports.loadingController = loadingController;
|
|
932
952
|
exports.modalController = modalController;
|
|
933
|
-
exports.pickerController = pickerController;
|
|
934
953
|
exports.popoverController = popoverController;
|
|
935
954
|
exports.prepareOverlay = prepareOverlay;
|
|
936
955
|
exports.present = present;
|
|
@@ -58,8 +58,6 @@
|
|
|
58
58
|
"components/nav-link/nav-link.js",
|
|
59
59
|
"components/note/note.js",
|
|
60
60
|
"components/picker-column-option/picker-column-option.js",
|
|
61
|
-
"components/picker-legacy/picker.js",
|
|
62
|
-
"components/picker-legacy-column/picker-column.js",
|
|
63
61
|
"components/popover/popover.js",
|
|
64
62
|
"components/progress-bar/progress-bar.js",
|
|
65
63
|
"components/range/range.js",
|
|
@@ -143,6 +141,11 @@
|
|
|
143
141
|
"ion-chip"
|
|
144
142
|
]
|
|
145
143
|
},
|
|
144
|
+
{
|
|
145
|
+
"components": [
|
|
146
|
+
"ion-datetime"
|
|
147
|
+
]
|
|
148
|
+
},
|
|
146
149
|
{
|
|
147
150
|
"components": [
|
|
148
151
|
"ion-input"
|
|
@@ -291,13 +294,6 @@
|
|
|
291
294
|
"ion-thumbnail"
|
|
292
295
|
]
|
|
293
296
|
},
|
|
294
|
-
{
|
|
295
|
-
"components": [
|
|
296
|
-
"ion-datetime",
|
|
297
|
-
"ion-picker-legacy",
|
|
298
|
-
"ion-picker-legacy-column"
|
|
299
|
-
]
|
|
300
|
-
},
|
|
301
297
|
{
|
|
302
298
|
"components": [
|
|
303
299
|
"ion-fab",
|
|
@@ -5,7 +5,7 @@ import { Host, h, readTask } from "@stencil/core";
|
|
|
5
5
|
import { createButtonActiveGesture } from "../../utils/gesture/button-active";
|
|
6
6
|
import { raf } from "../../utils/helpers";
|
|
7
7
|
import { createLockController } from "../../utils/lock-controller";
|
|
8
|
-
import { BACKDROP, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
|
|
8
|
+
import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
|
|
9
9
|
import { getClassMap } from "../../utils/theme";
|
|
10
10
|
import { getIonMode } from "../../global/ionic-global";
|
|
11
11
|
import { iosEnterAnimation } from "./animations/ios.enter";
|
|
@@ -284,6 +284,10 @@ export class ActionSheet {
|
|
|
284
284
|
this.gesture = undefined;
|
|
285
285
|
}
|
|
286
286
|
this.triggerController.removeClickListener();
|
|
287
|
+
// Clean up aria-hidden if removed without dismiss() being called
|
|
288
|
+
if (this.presented) {
|
|
289
|
+
cleanupRootFocusTrapAccessibility();
|
|
290
|
+
}
|
|
287
291
|
}
|
|
288
292
|
componentWillLoad() {
|
|
289
293
|
var _a;
|
|
@@ -387,12 +391,12 @@ export class ActionSheet {
|
|
|
387
391
|
const cancelButton = allButtons.find((b) => b.role === 'cancel');
|
|
388
392
|
const buttons = allButtons.filter((b) => b.role !== 'cancel');
|
|
389
393
|
const headerID = `action-sheet-${overlayIndex}-header`;
|
|
390
|
-
return (h(Host, Object.assign({ key: '
|
|
394
|
+
return (h(Host, Object.assign({ key: '572ea2b7b7ffd902186a17f8063e46f4e7360633', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
|
|
391
395
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
392
|
-
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '
|
|
396
|
+
}, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '065f29ec2021e25fdde59707a42cbacd4f9319c6', tappable: this.backdropDismiss }), h("div", { key: 'c92615ae5b292bfd223cee644c07f144f5f1d974', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'd4b30e289503203048420c35ac447dfff72c9183', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '7fc9bcc2f32666e170cd2052ce2b359b3915da60', class: "action-sheet-container" }, h("div", { key: 'd85ff13a6029bbe081053e818eeaa115327abdc1', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (h("div", { key: 'c743f928302e20007219fbcdd1e5c2efa662d3d9', id: headerID, class: {
|
|
393
397
|
'action-sheet-title': true,
|
|
394
398
|
'action-sheet-has-sub-title': this.subHeader !== undefined,
|
|
395
|
-
} }, header, this.subHeader && h("div", { key: '
|
|
399
|
+
} }, header, this.subHeader && h("div", { key: '2cce9ba82989d893052cb6acf88677058a7b26ce', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (h("div", { key: 'cf91d8a47838570e4c533694614bb6ad46f20ac7', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '5ffc9e3d9f4db002a1112ed71977a407edb9f86e' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: 'e0802b849fef77fd8158cbfee23adf7fc6e08d62', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '991a60ebf6966e5815f849325c4e9c571a31fdeb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'af533882239ba0d4e98691e38d517fbcee858a6d' })))))), h("div", { key: '7107a8b235b00bf48486db95f66ac3ba53faf157', tabindex: "0", "aria-hidden": "true" })));
|
|
396
400
|
}
|
|
397
401
|
static get is() { return "ion-action-sheet"; }
|
|
398
402
|
static get encapsulation() { return "scoped"; }
|
|
@@ -7,7 +7,7 @@ import { createButtonActiveGesture } from "../../utils/gesture/button-active";
|
|
|
7
7
|
import { raf } from "../../utils/helpers";
|
|
8
8
|
import { createLockController } from "../../utils/lock-controller";
|
|
9
9
|
import { printIonWarning } from "../../utils/logging/index";
|
|
10
|
-
import { createDelegateController, createTriggerController,
|
|
10
|
+
import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
|
|
11
11
|
import { sanitizeDOMString } from "../../utils/sanitization/index";
|
|
12
12
|
import { getClassMap } from "../../utils/theme";
|
|
13
13
|
import { config } from "../../global/config";
|
|
@@ -222,6 +222,10 @@ export class Alert {
|
|
|
222
222
|
this.gesture.destroy();
|
|
223
223
|
this.gesture = undefined;
|
|
224
224
|
}
|
|
225
|
+
// Clean up aria-hidden if removed without dismiss() being called
|
|
226
|
+
if (this.presented) {
|
|
227
|
+
cleanupRootFocusTrapAccessibility();
|
|
228
|
+
}
|
|
225
229
|
(_a = this.buttonGroupResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
226
230
|
this.buttonGroupResizeObserver = undefined;
|
|
227
231
|
}
|
|
@@ -502,9 +506,9 @@ export class Alert {
|
|
|
502
506
|
* If neither are defined, do not set aria-labelledby.
|
|
503
507
|
*/
|
|
504
508
|
const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
|
|
505
|
-
return (h(Host, { key: '
|
|
509
|
+
return (h(Host, { key: '80642b44e08bcbe73f7a217578f89716827e2f7d', tabindex: "-1", style: {
|
|
506
510
|
zIndex: `${20000 + overlayIndex}`,
|
|
507
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '
|
|
511
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: 'f7777dfd624d4a6253681bf36ab3b66389617fb5', tappable: this.backdropDismiss }), h("div", { key: '2a3a03bae54ff66d7d182d41eda7158b5228fdbc', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '255051adf9deeb3d9b872906b8eaa4a93075325c', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '3039e1a0f37617b9cba644b259b62097401cf84b', class: "alert-head" }, header && (h("h2", { key: 'b65dc3fa312a520d893d0710a28d72dfad17d020', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: 'e1f9bd496f2baaa28c7c0c6efb7b84591d1548de', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'ffa52291e21ee6a56bf11abbef87c698512ae477', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '5db1dce6054f16ea8da7830754c740ace31eb9d1', tabindex: "0", "aria-hidden": "true" })));
|
|
508
512
|
}
|
|
509
513
|
static get is() { return "ion-alert"; }
|
|
510
514
|
static get encapsulation() { return "scoped"; }
|
|
@@ -56,7 +56,7 @@ export class Input {
|
|
|
56
56
|
/**
|
|
57
57
|
* Whether auto correction should be enabled when the user is entering/editing the text value.
|
|
58
58
|
*/
|
|
59
|
-
this.autocorrect =
|
|
59
|
+
this.autocorrect = false;
|
|
60
60
|
/**
|
|
61
61
|
* Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
|
|
62
62
|
*
|
|
@@ -540,7 +540,7 @@ export class Input {
|
|
|
540
540
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
541
541
|
*/
|
|
542
542
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
543
|
-
return (h(Host, { key: '
|
|
543
|
+
return (h(Host, { key: '6a05f61339d8045285d5820c2508296cc842c210', class: createColorClasses(this.color, {
|
|
544
544
|
[mode]: true,
|
|
545
545
|
'has-value': hasValue,
|
|
546
546
|
'has-focus': hasFocus,
|
|
@@ -551,14 +551,14 @@ export class Input {
|
|
|
551
551
|
'in-item': inItem,
|
|
552
552
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
553
553
|
'input-disabled': disabled,
|
|
554
|
-
}) }, h("label", { key: '
|
|
554
|
+
}) }, h("label", { key: 'b546d66f53ea25082494e3a4cb0ce7532ee649d7', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '6af832f2b25fadee7a49adb999166dbc97565e2d', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: 'e7a8895038a8d2503f646acfda20c6c1a99c2839', name: "start" }), h("input", Object.assign({ key: 'ce85703e0434a6322bb4275a924e3cd91c79fa20', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '1e59589fc89a37d7830dc915b4c19d26a8f568c7', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
555
555
|
/**
|
|
556
556
|
* This prevents mobile browsers from
|
|
557
557
|
* blurring the input when the clear
|
|
558
558
|
* button is activated.
|
|
559
559
|
*/
|
|
560
560
|
ev.preventDefault();
|
|
561
|
-
}, onClick: this.clearTextInput }, h("ion-icon", { key: '
|
|
561
|
+
}, onClick: this.clearTextInput }, h("ion-icon", { key: '7d443c5061bf6436d3b77a2444676c679b3e62e4', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '5516f88d46886348217570ec1fadda0b79b63c01', name: "end" })), shouldRenderHighlight && h("div", { key: '2a1fdb7e7c974654dfbb3afb4fbfd9204e9d9092', class: "input-highlight" })), this.renderBottomContent()));
|
|
562
562
|
}
|
|
563
563
|
static get is() { return "ion-input"; }
|
|
564
564
|
static get encapsulation() { return "scoped"; }
|
|
@@ -650,11 +650,11 @@ export class Input {
|
|
|
650
650
|
"defaultValue": "'off'"
|
|
651
651
|
},
|
|
652
652
|
"autocorrect": {
|
|
653
|
-
"type": "
|
|
653
|
+
"type": "boolean",
|
|
654
654
|
"mutable": false,
|
|
655
655
|
"complexType": {
|
|
656
|
-
"original": "
|
|
657
|
-
"resolved": "
|
|
656
|
+
"original": "boolean",
|
|
657
|
+
"resolved": "boolean",
|
|
658
658
|
"references": {}
|
|
659
659
|
},
|
|
660
660
|
"required": false,
|
|
@@ -667,7 +667,7 @@ export class Input {
|
|
|
667
667
|
"setter": false,
|
|
668
668
|
"reflect": false,
|
|
669
669
|
"attribute": "autocorrect",
|
|
670
|
-
"defaultValue": "
|
|
670
|
+
"defaultValue": "false"
|
|
671
671
|
},
|
|
672
672
|
"autofocus": {
|
|
673
673
|
"type": "boolean",
|
|
@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
|
|
|
5
5
|
import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
|
|
6
6
|
import { raf } from "../../utils/helpers";
|
|
7
7
|
import { createLockController } from "../../utils/lock-controller";
|
|
8
|
-
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present,
|
|
8
|
+
import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
|
|
9
9
|
import { sanitizeDOMString } from "../../utils/sanitization/index";
|
|
10
10
|
import { getClassMap } from "../../utils/theme";
|
|
11
11
|
import { config } from "../../global/config";
|
|
@@ -114,6 +114,10 @@ export class Loading {
|
|
|
114
114
|
}
|
|
115
115
|
disconnectedCallback() {
|
|
116
116
|
this.triggerController.removeClickListener();
|
|
117
|
+
// Clean up aria-hidden if removed without dismiss() being called
|
|
118
|
+
if (this.presented) {
|
|
119
|
+
cleanupRootFocusTrapAccessibility();
|
|
120
|
+
}
|
|
117
121
|
}
|
|
118
122
|
/**
|
|
119
123
|
* Present the loading overlay after it has been created.
|
|
@@ -179,9 +183,9 @@ export class Loading {
|
|
|
179
183
|
* Otherwise, don't set aria-labelledby.
|
|
180
184
|
*/
|
|
181
185
|
const ariaLabelledBy = message !== undefined ? msgId : null;
|
|
182
|
-
return (h(Host, Object.assign({ key: '
|
|
186
|
+
return (h(Host, Object.assign({ key: 'ab48bfcee8f7e3e33847a2f262fdc08b9ea804ca', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
|
|
183
187
|
zIndex: `${40000 + this.overlayIndex}`,
|
|
184
|
-
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '
|
|
188
|
+
}, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '41baccc7fb6474389a3a3431c208e829ef738b75', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '7b7290974abbe8db8739b19835aca9f8b5c271c2', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'e32466abfcc92aaad47ea03b1dcb49f66abe4b63', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'c5e6e6f9e3f39dba0225d08d7dd2c1b96a1d83c7', class: "loading-spinner" }, h("ion-spinner", { key: 'f428038959d879404ea898011363aac0b807ad11', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '490e531367b86c319fa4260722dcff4dd631fa88', tabindex: "0", "aria-hidden": "true" })));
|
|
185
189
|
}
|
|
186
190
|
static get is() { return "ion-loading"; }
|
|
187
191
|
static get encapsulation() { return "scoped"; }
|
|
@@ -8,7 +8,7 @@ import { raf, inheritAttributes, hasLazyBuild, getElementRoot } from "../../util
|
|
|
8
8
|
import { createLockController } from "../../utils/lock-controller";
|
|
9
9
|
import { printIonWarning } from "../../utils/logging/index";
|
|
10
10
|
import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
|
|
11
|
-
import {
|
|
11
|
+
import { BACKDROP, cleanupRootFocusTrapAccessibility, createTriggerController, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, GESTURE, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
|
|
12
12
|
import { getClassMap } from "../../utils/theme";
|
|
13
13
|
import { deepReady, waitForMount } from "../../utils/transition/index";
|
|
14
14
|
import { config } from "../../global/config";
|
|
@@ -275,6 +275,10 @@ export class Modal {
|
|
|
275
275
|
// Also called in dismiss() — intentional dual cleanup covers both
|
|
276
276
|
// dismiss-then-remove and direct DOM removal without dismiss.
|
|
277
277
|
this.cleanupSafeAreaOverrides();
|
|
278
|
+
// Clean up aria-hidden if removed without dismiss() being called
|
|
279
|
+
if (this.presented) {
|
|
280
|
+
cleanupRootFocusTrapAccessibility();
|
|
281
|
+
}
|
|
278
282
|
}
|
|
279
283
|
componentWillLoad() {
|
|
280
284
|
var _a;
|
|
@@ -1162,20 +1166,20 @@ export class Modal {
|
|
|
1162
1166
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
1163
1167
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
1164
1168
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
1165
|
-
return (h(Host, Object.assign({ key: '
|
|
1169
|
+
return (h(Host, Object.assign({ key: '1a8350cc8389b167ba9dadd2e629d531af5698cf', "no-router": true,
|
|
1166
1170
|
// Allow the modal to be navigable when the handle is focusable
|
|
1167
1171
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
1168
1172
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1169
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '
|
|
1173
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'f757adb2407482cf567dbbf689b5d3c44c59d9fb', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '960517dded3129f74f146b652e55d7fd21a163ae', class: "modal-shadow" }), h("div", Object.assign({ key: '590f49003dda88fee559d08dd844a666731f438f',
|
|
1170
1174
|
/*
|
|
1171
1175
|
role and aria-modal must be used on the
|
|
1172
1176
|
same element. They must also be set inside the
|
|
1173
1177
|
shadow DOM otherwise ion-button will not be highlighted
|
|
1174
1178
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
1175
1179
|
*/
|
|
1176
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '
|
|
1180
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '6b4e133da9d8bfbaa50158fcd5635e9868941072', class: "modal-handle",
|
|
1177
1181
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
1178
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '
|
|
1182
|
+
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'dbacacb0f285c4a712a65cb1597d3a332056d954', onSlotchange: this.onSlotChange }))));
|
|
1179
1183
|
}
|
|
1180
1184
|
static get is() { return "ion-modal"; }
|
|
1181
1185
|
static get encapsulation() { return "shadow"; }
|
|
@@ -7,7 +7,7 @@ import { CoreDelegate, attachComponent, detachComponent } from "../../utils/fram
|
|
|
7
7
|
import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
|
|
8
8
|
import { createLockController } from "../../utils/lock-controller";
|
|
9
9
|
import { printIonWarning } from "../../utils/logging/index";
|
|
10
|
-
import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, setOverlayId,
|
|
10
|
+
import { BACKDROP, cleanupRootFocusTrapAccessibility, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
|
|
11
11
|
import { isPlatform } from "../../utils/platform";
|
|
12
12
|
import { getClassMap } from "../../utils/theme";
|
|
13
13
|
import { deepReady, waitForMount } from "../../utils/transition/index";
|
|
@@ -229,6 +229,10 @@ export class Popover {
|
|
|
229
229
|
this.headerResizeObserver.disconnect();
|
|
230
230
|
this.headerResizeObserver = undefined;
|
|
231
231
|
}
|
|
232
|
+
// Clean up aria-hidden if removed without dismiss() being called
|
|
233
|
+
if (this.presented) {
|
|
234
|
+
cleanupRootFocusTrapAccessibility();
|
|
235
|
+
}
|
|
232
236
|
}
|
|
233
237
|
componentWillLoad() {
|
|
234
238
|
var _a, _b;
|
|
@@ -467,9 +471,9 @@ export class Popover {
|
|
|
467
471
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
468
472
|
const desktop = isPlatform('desktop');
|
|
469
473
|
const enableArrow = arrow && !parentPopover;
|
|
470
|
-
return (h(Host, Object.assign({ key: '
|
|
474
|
+
return (h(Host, Object.assign({ key: 'd7f3aa2c2fa93a93585e3eda9e4a6d0daaa541be', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
471
475
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
472
|
-
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '
|
|
476
|
+
}, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'b87be2ef14219997b9c47dcbaf904eb770d0e057', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'e6243572faf1b871ae2b34923410b2a6638469f0', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '3d4938c9d0764a644398e0e7a4361106da1bd926', class: "popover-arrow", part: "arrow" }), h("div", { key: '24ad6d777828aad2881d56595693e6022fc9cb8e', class: "popover-content", part: "content" }, h("slot", { key: '79f83df74a5c5e3dd7650f15c1aa50795b90a345' })))));
|
|
473
477
|
}
|
|
474
478
|
static get is() { return "ion-popover"; }
|
|
475
479
|
static get encapsulation() { return "shadow"; }
|
|
@@ -43,7 +43,7 @@ export class ProgressBar {
|
|
|
43
43
|
const mode = getIonMode(this);
|
|
44
44
|
// If the progress is displayed as a solid bar.
|
|
45
45
|
const progressSolid = buffer === 1;
|
|
46
|
-
return (h(Host, { key: '
|
|
46
|
+
return (h(Host, { key: 'd7476268ce53b6a4f425b7bc9f01d6935eb411c3', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
|
|
47
47
|
[mode]: true,
|
|
48
48
|
[`progress-bar-${type}`]: true,
|
|
49
49
|
'progress-paused': paused,
|
|
@@ -136,7 +136,7 @@ export class Radio {
|
|
|
136
136
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
137
137
|
const mode = getIonMode(this);
|
|
138
138
|
const inItem = hostContext('ion-item', el);
|
|
139
|
-
return (h(Host, { key: '
|
|
139
|
+
return (h(Host, { key: 'd9425b252ed38086420d91d5c680421d121c99f4', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
|
|
140
140
|
[mode]: true,
|
|
141
141
|
'in-item': inItem,
|
|
142
142
|
'radio-checked': checked,
|
|
@@ -147,10 +147,10 @@ export class Radio {
|
|
|
147
147
|
// Focus and active styling should not apply when the radio is in an item
|
|
148
148
|
'ion-activatable': !inItem,
|
|
149
149
|
'ion-focusable': !inItem,
|
|
150
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '
|
|
150
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: 'de391fca2aa0b681af5c1d089121596c46e68271', class: "radio-wrapper" }, h("div", { key: '44e4c71645f86a9e73ad58c0e8b41c0558b920f6', class: {
|
|
151
151
|
'label-text-wrapper': true,
|
|
152
152
|
'label-text-wrapper-hidden': !hasLabel,
|
|
153
|
-
}, part: "label" }, h("slot", { key: '
|
|
153
|
+
}, part: "label" }, h("slot", { key: '589d7c1b45a1918b5811663daa8f30788e7729f8' })), h("div", { key: '0f61a17b195582d6c9a0c597cd40e6629256e479', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
154
154
|
}
|
|
155
155
|
static get is() { return "ion-radio"; }
|
|
156
156
|
static get encapsulation() { return "shadow"; }
|
|
@@ -250,7 +250,7 @@ export class Radio {
|
|
|
250
250
|
},
|
|
251
251
|
"getter": false,
|
|
252
252
|
"setter": false,
|
|
253
|
-
"reflect":
|
|
253
|
+
"reflect": true,
|
|
254
254
|
"attribute": "value"
|
|
255
255
|
},
|
|
256
256
|
"labelPlacement": {
|
|
@@ -769,7 +769,7 @@ export class Range {
|
|
|
769
769
|
const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
|
|
770
770
|
const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
|
|
771
771
|
renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
|
|
772
|
-
return (h(Host, { key: '
|
|
772
|
+
return (h(Host, { key: 'cd26f0187c0d37c7eb9df923f75c8a0f57c19ab6', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
|
|
773
773
|
[mode]: true,
|
|
774
774
|
'in-item': inItem,
|
|
775
775
|
'range-disabled': disabled,
|
|
@@ -783,10 +783,10 @@ export class Range {
|
|
|
783
783
|
'range-item-end-adjustment': needsEndAdjustment,
|
|
784
784
|
'range-value-min': valueAtMin,
|
|
785
785
|
'range-value-max': valueAtMax,
|
|
786
|
-
}) }, h("label", { key: '
|
|
786
|
+
}) }, h("label", { key: '90224fd24b0e625a17e7972feff73a0ac31e093d', class: "range-wrapper", id: "range-label" }, h("div", { key: 'e07b9fa10983249c425eec26b741f0f628daf2b2', class: {
|
|
787
787
|
'label-text-wrapper': true,
|
|
788
788
|
'label-text-wrapper-hidden': !hasLabel,
|
|
789
|
-
}, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '
|
|
789
|
+
}, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '9e252f1190838fbae46e724bf665f9b1943600a4', class: "native-wrapper" }, h("slot", { key: '950697dd9636da340de659812daa91fff50e5345', name: "start" }), this.renderRangeSlider(), h("slot", { key: 'd3fce46b29db275af71e6149e725967839ec12b0', name: "end" })))));
|
|
790
790
|
}
|
|
791
791
|
static get is() { return "ion-range"; }
|
|
792
792
|
static get encapsulation() { return "shadow"; }
|
|
@@ -716,7 +716,7 @@ export class Refresher {
|
|
|
716
716
|
}
|
|
717
717
|
render() {
|
|
718
718
|
const mode = getIonMode(this);
|
|
719
|
-
return (h(Host, { key: '
|
|
719
|
+
return (h(Host, { key: '1dd475095f76491206644828cf89fc6d2ec276d1', slot: "fixed", class: {
|
|
720
720
|
[mode]: true,
|
|
721
721
|
// Used internally for styling
|
|
722
722
|
[`refresher-${mode}`]: true,
|
|
@@ -48,7 +48,7 @@ export class RefresherContent {
|
|
|
48
48
|
const pullingIcon = this.pullingIcon;
|
|
49
49
|
const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
|
|
50
50
|
const mode = getIonMode(this);
|
|
51
|
-
return (h(Host, { key: '
|
|
51
|
+
return (h(Host, { key: 'ec378d6a302be697c12c4f973a57c6ad2ada070f', class: mode }, h("div", { key: '0055f98f8c5a1ed7979dc8146ec1f82a575860c7', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '4f88468e26370df6889e72aa54ebb395ebf3757d', class: "refresher-pulling-icon" }, h("div", { key: '05b3f8679576aaa6c2d84d60df6629a392df29e2', class: "spinner-arrow-container" }, h("ion-spinner", { key: '0bf6ceea416ce1140c0f10a5bede063cae7054f4', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { key: 'b71ede8455837968218edae28504e5e14bbc1f5c', class: "arrow-container" }, h("ion-icon", { key: '30b808288d23d3eac681b1225cd8392fdacfefe1', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'fee1ae7e57ef8a02f5654808dff9dca3002b6702', class: "refresher-pulling-icon" }, h("ion-icon", { key: '55b34a98028adb497fbc2ac66bdb3d5ae5b1705b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: 'ef8f987daa8060cb6f8fd83c0864095042b9eecf', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'cd6fe0e81b34eeae11478fcc8a42044bff6f7a52', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '9cd778229582b538d54589c4d8e4d470efb64aad', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
|
|
52
52
|
}
|
|
53
53
|
static get is() { return "ion-refresher-content"; }
|
|
54
54
|
static get properties() {
|
|
@@ -20,7 +20,7 @@ export class Reorder {
|
|
|
20
20
|
render() {
|
|
21
21
|
const mode = getIonMode(this);
|
|
22
22
|
const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
|
|
23
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: '4d35db30b5b3df2020d2212abb3cfac94f9bc2b8', class: mode }, h("slot", { key: '68a565ae4a47f6a9f5d6ba845b596fdfa629ece8' }, h("ion-icon", { key: '168fb0f8eb9c02329274488900fcdb05d44cb895', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
|
|
24
24
|
}
|
|
25
25
|
static get is() { return "ion-reorder"; }
|
|
26
26
|
static get encapsulation() { return "shadow"; }
|
|
@@ -253,7 +253,7 @@ export class ReorderGroup {
|
|
|
253
253
|
}
|
|
254
254
|
render() {
|
|
255
255
|
const mode = getIonMode(this);
|
|
256
|
-
return (h(Host, { key: '
|
|
256
|
+
return (h(Host, { key: '3afdc6a6c81bba2f88ea523d4b73c6fccff1b9ec', class: {
|
|
257
257
|
[mode]: true,
|
|
258
258
|
'reorder-enabled': !this.disabled,
|
|
259
259
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
|
@@ -68,7 +68,7 @@ export class RippleEffect {
|
|
|
68
68
|
}
|
|
69
69
|
render() {
|
|
70
70
|
const mode = getIonMode(this);
|
|
71
|
-
return (h(Host, { key: '
|
|
71
|
+
return (h(Host, { key: '5e88b5225414e29883256c86f111ded5bdf2ef91', role: "presentation", class: {
|
|
72
72
|
[mode]: true,
|
|
73
73
|
unbounded: this.unbounded,
|
|
74
74
|
} }));
|
|
@@ -22,10 +22,10 @@ export class RouterLink {
|
|
|
22
22
|
rel: this.rel,
|
|
23
23
|
target: this.target,
|
|
24
24
|
};
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: '6d5fdfa0dcf1eb216173bcc53f1f4d625f3ec551', onClick: this.onClick, class: createColorClasses(this.color, {
|
|
26
26
|
[mode]: true,
|
|
27
27
|
'ion-activatable': true,
|
|
28
|
-
}) }, h("a", Object.assign({ key: '
|
|
28
|
+
}) }, h("a", Object.assign({ key: '85796b7b48581fe9830ba1102dad7d1069de4e17' }, attrs), h("slot", { key: '0f93b0da3ec4ae8f50f624f9e7bed87d13d712d0' }))));
|
|
29
29
|
}
|
|
30
30
|
static get is() { return "ion-router-link"; }
|
|
31
31
|
static get encapsulation() { return "shadow"; }
|
|
@@ -23,10 +23,11 @@ export class RouterOutlet {
|
|
|
23
23
|
*/
|
|
24
24
|
this.animated = true;
|
|
25
25
|
}
|
|
26
|
+
swipeGestureChanged() {
|
|
27
|
+
this.updateGestureEnabled();
|
|
28
|
+
}
|
|
26
29
|
swipeHandlerChanged() {
|
|
27
|
-
|
|
28
|
-
this.gesture.enable(this.swipeHandler !== undefined);
|
|
29
|
-
}
|
|
30
|
+
this.updateGestureEnabled();
|
|
30
31
|
}
|
|
31
32
|
async connectedCallback() {
|
|
32
33
|
const onStart = () => {
|
|
@@ -66,11 +67,21 @@ export class RouterOutlet {
|
|
|
66
67
|
this.gestureOrAnimationInProgress = false;
|
|
67
68
|
}
|
|
68
69
|
});
|
|
69
|
-
this.
|
|
70
|
+
if (this.swipeGesture === undefined) {
|
|
71
|
+
this.swipeGesture = config.getBoolean('swipeBackEnabled', this.mode === 'ios');
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
this.updateGestureEnabled();
|
|
75
|
+
}
|
|
70
76
|
}
|
|
71
77
|
componentWillLoad() {
|
|
72
78
|
this.ionNavWillLoad.emit();
|
|
73
79
|
}
|
|
80
|
+
updateGestureEnabled() {
|
|
81
|
+
if (this.gesture) {
|
|
82
|
+
this.gesture.enable(this.swipeHandler !== undefined && this.swipeGesture === true);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
74
85
|
disconnectedCallback() {
|
|
75
86
|
if (this.gesture) {
|
|
76
87
|
this.gesture.destroy();
|
|
@@ -181,7 +192,7 @@ export class RouterOutlet {
|
|
|
181
192
|
return true;
|
|
182
193
|
}
|
|
183
194
|
render() {
|
|
184
|
-
return h("slot", { key: '
|
|
195
|
+
return h("slot", { key: 'ce09e6fbba7b0a2276cdde5245bb37c9a162c1c7' });
|
|
185
196
|
}
|
|
186
197
|
static get is() { return "ion-router-outlet"; }
|
|
187
198
|
static get encapsulation() { return "shadow"; }
|
|
@@ -293,6 +304,25 @@ export class RouterOutlet {
|
|
|
293
304
|
"getter": false,
|
|
294
305
|
"setter": false
|
|
295
306
|
},
|
|
307
|
+
"swipeGesture": {
|
|
308
|
+
"type": "boolean",
|
|
309
|
+
"mutable": true,
|
|
310
|
+
"complexType": {
|
|
311
|
+
"original": "boolean",
|
|
312
|
+
"resolved": "boolean | undefined",
|
|
313
|
+
"references": {}
|
|
314
|
+
},
|
|
315
|
+
"required": false,
|
|
316
|
+
"optional": true,
|
|
317
|
+
"docs": {
|
|
318
|
+
"tags": [],
|
|
319
|
+
"text": "If `true`, the router-outlet should allow navigation via swipe-to-go-back gesture.\nDefaults to `true` for `\"ios\"` mode and `false` for `\"md\"` mode."
|
|
320
|
+
},
|
|
321
|
+
"getter": false,
|
|
322
|
+
"setter": false,
|
|
323
|
+
"reflect": false,
|
|
324
|
+
"attribute": "swipe-gesture"
|
|
325
|
+
},
|
|
296
326
|
"swipeHandler": {
|
|
297
327
|
"type": "unknown",
|
|
298
328
|
"mutable": false,
|
|
@@ -514,6 +544,9 @@ export class RouterOutlet {
|
|
|
514
544
|
static get elementRef() { return "el"; }
|
|
515
545
|
static get watchers() {
|
|
516
546
|
return [{
|
|
547
|
+
"propName": "swipeGesture",
|
|
548
|
+
"methodName": "swipeGestureChanged"
|
|
549
|
+
}, {
|
|
517
550
|
"propName": "swipeHandler",
|
|
518
551
|
"methodName": "swipeHandlerChanged"
|
|
519
552
|
}];
|
|
@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
|
|
|
5
5
|
import { getIonMode } from "../../global/ionic-global";
|
|
6
6
|
export class Row {
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: 'a9066661fff12baaf3e80b2e8c08591af72fe5b8', class: getIonMode(this) }, h("slot", { key: '62b103af46d3a5ec9c146019ae300b68a4ae867a' })));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "ion-row"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|