@ionic/core 8.6.3-dev.11751378808.12cc4a5c → 8.6.3-nightly.20250619
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/action-sheet.js +9 -8
- package/components/alert.js +8 -7
- package/components/ion-app.js +1 -3
- package/components/ion-datetime.js +2 -8
- package/components/ion-loading.js +8 -7
- package/components/ion-menu.js +5 -27
- package/components/ion-reorder-group.js +2 -1
- package/components/ion-router.js +0 -1
- package/components/ion-searchbar.js +6 -4
- package/components/ion-toast.js +7 -6
- package/components/modal.js +14 -242
- package/components/popover.js +7 -8
- package/dist/cjs/ion-action-sheet.cjs.entry.js +9 -8
- package/dist/cjs/ion-alert.cjs.entry.js +8 -7
- package/dist/cjs/ion-app_8.cjs.entry.js +1 -3
- package/dist/cjs/ion-datetime_3.cjs.entry.js +2 -8
- package/dist/cjs/ion-loading.cjs.entry.js +8 -7
- package/dist/cjs/ion-menu_3.cjs.entry.js +5 -27
- package/dist/cjs/ion-modal.cjs.entry.js +14 -242
- package/dist/cjs/ion-popover.cjs.entry.js +7 -8
- package/dist/cjs/ion-reorder_2.cjs.entry.js +2 -1
- package/dist/cjs/ion-route_4.cjs.entry.js +0 -1
- package/dist/cjs/ion-searchbar.cjs.entry.js +6 -4
- package/dist/cjs/ion-toast.cjs.entry.js +7 -6
- package/dist/collection/components/action-sheet/action-sheet.js +12 -11
- package/dist/collection/components/alert/alert.js +11 -10
- package/dist/collection/components/app/app.js +3 -8
- package/dist/collection/components/datetime/datetime.js +8 -23
- package/dist/collection/components/loading/loading.js +11 -10
- package/dist/collection/components/menu/menu.js +19 -62
- package/dist/collection/components/modal/animations/ios.enter.js +2 -2
- package/dist/collection/components/modal/animations/ios.leave.js +2 -2
- package/dist/collection/components/modal/modal.js +16 -118
- package/dist/collection/components/popover/popover.js +14 -18
- package/dist/collection/components/reorder-group/reorder-group.js +3 -2
- package/dist/collection/components/router/router.js +1 -5
- package/dist/collection/components/searchbar/searchbar.js +7 -5
- package/dist/collection/components/toast/toast.js +10 -9
- package/dist/docs.json +72 -138
- package/dist/esm/ion-action-sheet.entry.js +9 -8
- package/dist/esm/ion-alert.entry.js +8 -7
- package/dist/esm/ion-app_8.entry.js +1 -3
- package/dist/esm/ion-datetime_3.entry.js +2 -8
- package/dist/esm/ion-loading.entry.js +8 -7
- package/dist/esm/ion-menu_3.entry.js +5 -27
- package/dist/esm/ion-modal.entry.js +14 -242
- package/dist/esm/ion-popover.entry.js +7 -8
- package/dist/esm/ion-reorder_2.entry.js +2 -1
- package/dist/esm/ion-route_4.entry.js +0 -1
- package/dist/esm/ion-searchbar.entry.js +6 -4
- package/dist/esm/ion-toast.entry.js +7 -6
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-b758a177.entry.js → p-2020aa51.entry.js} +1 -1
- package/dist/ionic/p-29759454.entry.js +4 -0
- package/dist/ionic/{p-e37d6c67.entry.js → p-3a4feac2.entry.js} +1 -1
- package/dist/ionic/{p-2d0eccfb.entry.js → p-6b666996.entry.js} +1 -1
- package/dist/ionic/p-7149db7e.entry.js +4 -0
- package/dist/ionic/{p-01123ecf.entry.js → p-96389029.entry.js} +1 -1
- package/dist/ionic/{p-0d131a02.entry.js → p-9e699d4a.entry.js} +1 -1
- package/dist/ionic/p-bec79123.entry.js +4 -0
- package/dist/ionic/{p-03d21728.entry.js → p-cb787a4b.entry.js} +1 -1
- package/dist/ionic/{p-d8429eb4.entry.js → p-cd12ed1c.entry.js} +1 -1
- package/dist/ionic/{p-5f671887.entry.js → p-ead42a37.entry.js} +1 -1
- package/dist/types/components/action-sheet/action-sheet.d.ts +6 -5
- package/dist/types/components/alert/alert.d.ts +6 -5
- package/dist/types/components/app/app.d.ts +0 -2
- package/dist/types/components/datetime/datetime.d.ts +0 -6
- package/dist/types/components/loading/loading.d.ts +6 -5
- package/dist/types/components/menu/menu.d.ts +3 -25
- package/dist/types/components/modal/modal.d.ts +6 -20
- package/dist/types/components/popover/popover.d.ts +5 -6
- package/dist/types/components/reorder-group/reorder-group.d.ts +1 -0
- package/dist/types/components/router/router.d.ts +0 -1
- package/dist/types/components/searchbar/searchbar.d.ts +2 -0
- package/dist/types/components/toast/toast.d.ts +5 -4
- package/dist/types/components.d.ts +18 -32
- package/hydrate/index.js +69 -322
- package/hydrate/index.mjs +69 -322
- package/package.json +3 -3
- package/dist/collection/components/modal/animations/ios.transition.js +0 -143
- package/dist/ionic/p-69f91268.entry.js +0 -4
- package/dist/ionic/p-6f74a187.entry.js +0 -4
- package/dist/ionic/p-b9ba04ca.entry.js +0 -4
- package/dist/types/components/modal/animations/ios.transition.d.ts +0 -14
|
@@ -242,7 +242,7 @@ const Menu = class {
|
|
|
242
242
|
return Promise.resolve(this._isOpen);
|
|
243
243
|
}
|
|
244
244
|
/**
|
|
245
|
-
* Returns `true`
|
|
245
|
+
* Returns `true` is the menu is active.
|
|
246
246
|
*
|
|
247
247
|
* A menu is active when it can be opened or closed, meaning it's enabled
|
|
248
248
|
* and it's not part of a `ion-split-pane`.
|
|
@@ -253,10 +253,6 @@ const Menu = class {
|
|
|
253
253
|
/**
|
|
254
254
|
* Opens the menu. If the menu is already open or it can't be opened,
|
|
255
255
|
* it returns `false`.
|
|
256
|
-
*
|
|
257
|
-
* @param animated If `true`, the menu will animate when opening.
|
|
258
|
-
* If `false`, the menu will open instantly without animation.
|
|
259
|
-
* Defaults to `true`.
|
|
260
256
|
*/
|
|
261
257
|
open(animated = true) {
|
|
262
258
|
return this.setOpen(true, animated);
|
|
@@ -264,38 +260,20 @@ const Menu = class {
|
|
|
264
260
|
/**
|
|
265
261
|
* Closes the menu. If the menu is already closed or it can't be closed,
|
|
266
262
|
* it returns `false`.
|
|
267
|
-
*
|
|
268
|
-
* @param animated If `true`, the menu will animate when closing. If `false`,
|
|
269
|
-
* the menu will close instantly without animation. Defaults to `true`.
|
|
270
|
-
* @param role The role of the element that is closing the menu.
|
|
271
|
-
* This can be useful in a button handler for determining which button was
|
|
272
|
-
* clicked to close the menu. Some examples include:
|
|
273
|
-
* `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
|
|
274
263
|
*/
|
|
275
264
|
close(animated = true, role) {
|
|
276
265
|
return this.setOpen(false, animated, role);
|
|
277
266
|
}
|
|
278
267
|
/**
|
|
279
|
-
* Toggles the menu. If the menu is already open, it will try to close,
|
|
280
|
-
* otherwise it will try to open it.
|
|
268
|
+
* Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
|
|
281
269
|
* If the operation can't be completed successfully, it returns `false`.
|
|
282
|
-
*
|
|
283
|
-
* @param animated If `true`, the menu will animate when opening/closing.
|
|
284
|
-
* If `false`, the menu will open/close instantly without animation.
|
|
285
|
-
* Defaults to `true`.
|
|
286
270
|
*/
|
|
287
271
|
toggle(animated = true) {
|
|
288
272
|
return this.setOpen(!this._isOpen, animated);
|
|
289
273
|
}
|
|
290
274
|
/**
|
|
291
|
-
* Opens or closes the
|
|
275
|
+
* Opens or closes the button.
|
|
292
276
|
* If the operation can't be completed successfully, it returns `false`.
|
|
293
|
-
*
|
|
294
|
-
* @param shouldOpen If `true`, the menu will open. If `false`, the menu
|
|
295
|
-
* will close.
|
|
296
|
-
* @param animated If `true`, the menu will animate when opening/closing.
|
|
297
|
-
* If `false`, the menu will open/close instantly without animation.
|
|
298
|
-
* @param role The role of the element that is closing the menu.
|
|
299
277
|
*/
|
|
300
278
|
setOpen(shouldOpen, animated = true, role) {
|
|
301
279
|
return index$1.menuController._setOpen(this, shouldOpen, animated, role);
|
|
@@ -660,14 +638,14 @@ const Menu = class {
|
|
|
660
638
|
* the ionBackButton listener in the menu controller
|
|
661
639
|
* will handle closing the menu when Escape is pressed.
|
|
662
640
|
*/
|
|
663
|
-
return (index.h(index.Host, { key: '
|
|
641
|
+
return (index.h(index.Host, { key: '9e4ae9476a76781f1d228395c9af9e1c39ec82bb', onKeyDown: hardwareBackButton.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
664
642
|
[mode]: true,
|
|
665
643
|
[`menu-type-${type}`]: true,
|
|
666
644
|
'menu-enabled': !disabled,
|
|
667
645
|
[`menu-side-${side}`]: true,
|
|
668
646
|
'menu-pane-visible': isPaneVisible,
|
|
669
647
|
'split-pane-side': theme.hostContext('ion-split-pane', el),
|
|
670
|
-
} }, index.h("div", { key: '
|
|
648
|
+
} }, index.h("div", { key: 'c6153589d872ac7e3fdf5eedfdb858eb64ccd713', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: '9994aac4b22f17db34c9b8b2aa56b8710b9df645' })), index.h("ion-backdrop", { key: 'f09ac30cc4dd2dcb10628965e659dae5a23baf98', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
671
649
|
}
|
|
672
650
|
get el() { return index.getElement(this); }
|
|
673
651
|
static get watchers() { return {
|
|
@@ -589,7 +589,7 @@ const iosEnterAnimation = (baseEl, opts) => {
|
|
|
589
589
|
baseAnimation.addAnimation(contentAnimation);
|
|
590
590
|
}
|
|
591
591
|
if (presentingEl) {
|
|
592
|
-
const
|
|
592
|
+
const isMobile = window.innerWidth < 768;
|
|
593
593
|
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
594
594
|
const presentingElRoot = helpers.getElementRoot(presentingEl);
|
|
595
595
|
const presentingAnimation = animation.createAnimation().beforeStyles({
|
|
@@ -598,7 +598,7 @@ const iosEnterAnimation = (baseEl, opts) => {
|
|
|
598
598
|
overflow: 'hidden',
|
|
599
599
|
});
|
|
600
600
|
const bodyEl = document.body;
|
|
601
|
-
if (
|
|
601
|
+
if (isMobile) {
|
|
602
602
|
/**
|
|
603
603
|
* Fallback for browsers that does not support `max()` (ex: Firefox)
|
|
604
604
|
* No need to worry about statusbar padding since engines like Gecko
|
|
@@ -676,7 +676,7 @@ const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
|
|
|
676
676
|
.duration(duration)
|
|
677
677
|
.addAnimation(wrapperAnimation);
|
|
678
678
|
if (presentingEl) {
|
|
679
|
-
const
|
|
679
|
+
const isMobile = window.innerWidth < 768;
|
|
680
680
|
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
681
681
|
const presentingElRoot = helpers.getElementRoot(presentingEl);
|
|
682
682
|
const presentingAnimation = animation.createAnimation()
|
|
@@ -694,7 +694,7 @@ const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
|
|
|
694
694
|
}
|
|
695
695
|
});
|
|
696
696
|
const bodyEl = document.body;
|
|
697
|
-
if (
|
|
697
|
+
if (isMobile) {
|
|
698
698
|
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
699
699
|
const modalTransform = hasCardModal ? '-10px' : transformOffset;
|
|
700
700
|
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
@@ -741,144 +741,6 @@ const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
|
|
|
741
741
|
return baseAnimation;
|
|
742
742
|
};
|
|
743
743
|
|
|
744
|
-
/**
|
|
745
|
-
* Transition animation from portrait view to landscape view
|
|
746
|
-
* This handles the case where a card modal is open in portrait view
|
|
747
|
-
* and the user switches to landscape view
|
|
748
|
-
*/
|
|
749
|
-
const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
|
|
750
|
-
const { presentingEl } = opts;
|
|
751
|
-
if (!presentingEl) {
|
|
752
|
-
// No transition needed for non-card modals
|
|
753
|
-
return animation.createAnimation('portrait-to-landscape-transition');
|
|
754
|
-
}
|
|
755
|
-
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
756
|
-
const presentingElRoot = helpers.getElementRoot(presentingEl);
|
|
757
|
-
const bodyEl = document.body;
|
|
758
|
-
const baseAnimation = animation.createAnimation('portrait-to-landscape-transition')
|
|
759
|
-
.addElement(baseEl)
|
|
760
|
-
.easing('cubic-bezier(0.32,0.72,0,1)')
|
|
761
|
-
.duration(duration);
|
|
762
|
-
const presentingAnimation = animation.createAnimation().beforeStyles({
|
|
763
|
-
transform: 'translateY(0)',
|
|
764
|
-
'transform-origin': 'top center',
|
|
765
|
-
overflow: 'hidden',
|
|
766
|
-
});
|
|
767
|
-
if (!hasCardModal) {
|
|
768
|
-
// Non-card modal: transition from portrait state to landscape state
|
|
769
|
-
// Portrait: presentingEl has transform and body has black background
|
|
770
|
-
// Landscape: no transform, no body background, modal wrapper opacity changes
|
|
771
|
-
const root = helpers.getElementRoot(baseEl);
|
|
772
|
-
const wrapperAnimation = animation.createAnimation()
|
|
773
|
-
.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
|
|
774
|
-
.fromTo('opacity', '1', '1'); // Keep wrapper visible in landscape
|
|
775
|
-
const backdropAnimation = animation.createAnimation()
|
|
776
|
-
.addElement(root.querySelector('ion-backdrop'))
|
|
777
|
-
.fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
|
|
778
|
-
// Animate presentingEl from portrait state back to normal
|
|
779
|
-
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
780
|
-
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
781
|
-
const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
|
|
782
|
-
presentingAnimation
|
|
783
|
-
.addElement(presentingEl)
|
|
784
|
-
.afterStyles({
|
|
785
|
-
transform: 'translateY(0px) scale(1)',
|
|
786
|
-
'border-radius': '0px',
|
|
787
|
-
})
|
|
788
|
-
.beforeAddWrite(() => bodyEl.style.setProperty('background-color', ''))
|
|
789
|
-
.fromTo('transform', fromTransform, 'translateY(0px) scale(1)')
|
|
790
|
-
.fromTo('filter', 'contrast(0.85)', 'contrast(1)')
|
|
791
|
-
.fromTo('border-radius', '10px 10px 0 0', '0px');
|
|
792
|
-
baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
|
|
793
|
-
}
|
|
794
|
-
else {
|
|
795
|
-
// Card modal: transition from portrait card state to landscape card state
|
|
796
|
-
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
797
|
-
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
798
|
-
const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
|
|
799
|
-
const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
|
|
800
|
-
presentingAnimation
|
|
801
|
-
.addElement(presentingElRoot.querySelector('.modal-wrapper'))
|
|
802
|
-
.fromTo('transform', fromTransform, toTransform)
|
|
803
|
-
.fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
|
|
804
|
-
const shadowAnimation = animation.createAnimation()
|
|
805
|
-
.addElement(presentingElRoot.querySelector('.modal-shadow'))
|
|
806
|
-
.fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
|
|
807
|
-
.fromTo('transform', fromTransform, toTransform);
|
|
808
|
-
baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
|
|
809
|
-
}
|
|
810
|
-
return baseAnimation;
|
|
811
|
-
};
|
|
812
|
-
/**
|
|
813
|
-
* Transition animation from landscape view to portrait view
|
|
814
|
-
* This handles the case where a card modal is open in landscape view
|
|
815
|
-
* and the user switches to portrait view
|
|
816
|
-
*/
|
|
817
|
-
const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
|
|
818
|
-
const { presentingEl } = opts;
|
|
819
|
-
if (!presentingEl) {
|
|
820
|
-
// No transition needed for non-card modals
|
|
821
|
-
return animation.createAnimation('landscape-to-portrait-transition');
|
|
822
|
-
}
|
|
823
|
-
const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
|
|
824
|
-
const presentingElRoot = helpers.getElementRoot(presentingEl);
|
|
825
|
-
const bodyEl = document.body;
|
|
826
|
-
const baseAnimation = animation.createAnimation('landscape-to-portrait-transition')
|
|
827
|
-
.addElement(baseEl)
|
|
828
|
-
.easing('cubic-bezier(0.32,0.72,0,1)')
|
|
829
|
-
.duration(duration);
|
|
830
|
-
const presentingAnimation = animation.createAnimation().beforeStyles({
|
|
831
|
-
transform: 'translateY(0)',
|
|
832
|
-
'transform-origin': 'top center',
|
|
833
|
-
overflow: 'hidden',
|
|
834
|
-
});
|
|
835
|
-
if (!hasCardModal) {
|
|
836
|
-
// Non-card modal: transition from landscape state to portrait state
|
|
837
|
-
const root = helpers.getElementRoot(baseEl);
|
|
838
|
-
const wrapperAnimation = animation.createAnimation()
|
|
839
|
-
.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
|
|
840
|
-
.fromTo('opacity', '1', '1'); // Keep wrapper visible
|
|
841
|
-
const backdropAnimation = animation.createAnimation()
|
|
842
|
-
.addElement(root.querySelector('ion-backdrop'))
|
|
843
|
-
.fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
|
|
844
|
-
// Animate presentingEl from normal state to portrait state
|
|
845
|
-
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
846
|
-
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
847
|
-
const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
|
|
848
|
-
presentingAnimation
|
|
849
|
-
.addElement(presentingEl)
|
|
850
|
-
.afterStyles({
|
|
851
|
-
transform: toTransform,
|
|
852
|
-
'border-radius': '10px 10px 0 0',
|
|
853
|
-
filter: 'contrast(0.85)',
|
|
854
|
-
overflow: 'hidden',
|
|
855
|
-
'transform-origin': 'top center',
|
|
856
|
-
})
|
|
857
|
-
.beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
|
|
858
|
-
.fromTo('transform', 'translateY(0px) scale(1)', toTransform)
|
|
859
|
-
.fromTo('filter', 'contrast(1)', 'contrast(0.85)')
|
|
860
|
-
.fromTo('border-radius', '0px', '10px 10px 0 0');
|
|
861
|
-
baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
|
|
862
|
-
}
|
|
863
|
-
else {
|
|
864
|
-
// Card modal: transition from landscape card state to portrait card state
|
|
865
|
-
const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
|
|
866
|
-
const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
|
|
867
|
-
const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
|
|
868
|
-
const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
|
|
869
|
-
presentingAnimation
|
|
870
|
-
.addElement(presentingElRoot.querySelector('.modal-wrapper'))
|
|
871
|
-
.fromTo('transform', fromTransform, toTransform)
|
|
872
|
-
.fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
|
|
873
|
-
const shadowAnimation = animation.createAnimation()
|
|
874
|
-
.addElement(presentingElRoot.querySelector('.modal-shadow'))
|
|
875
|
-
.fromTo('opacity', '0', '0') // Shadow stays hidden
|
|
876
|
-
.fromTo('transform', fromTransform, toTransform);
|
|
877
|
-
baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
|
|
878
|
-
}
|
|
879
|
-
return baseAnimation;
|
|
880
|
-
};
|
|
881
|
-
|
|
882
744
|
const createEnterAnimation = () => {
|
|
883
745
|
const backdropAnimation = animation.createAnimation()
|
|
884
746
|
.fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
|
|
@@ -1622,17 +1484,6 @@ const Modal = class {
|
|
|
1622
1484
|
el.dispatchEvent(ev);
|
|
1623
1485
|
}
|
|
1624
1486
|
};
|
|
1625
|
-
/**
|
|
1626
|
-
* When the modal receives focus directly, pass focus to the handle
|
|
1627
|
-
* if it exists and is focusable, otherwise let the focus trap handle it.
|
|
1628
|
-
*/
|
|
1629
|
-
this.onModalFocus = (ev) => {
|
|
1630
|
-
const { dragHandleEl, el } = this;
|
|
1631
|
-
// Only handle focus if the modal itself was focused (not a child element)
|
|
1632
|
-
if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
|
|
1633
|
-
dragHandleEl.focus();
|
|
1634
|
-
}
|
|
1635
|
-
};
|
|
1636
1487
|
}
|
|
1637
1488
|
onIsOpenChange(newValue, oldValue) {
|
|
1638
1489
|
if (newValue === true && oldValue === false) {
|
|
@@ -1660,7 +1511,6 @@ const Modal = class {
|
|
|
1660
1511
|
}
|
|
1661
1512
|
disconnectedCallback() {
|
|
1662
1513
|
this.triggerController.removeClickListener();
|
|
1663
|
-
this.cleanupViewTransitionListener();
|
|
1664
1514
|
}
|
|
1665
1515
|
componentWillLoad() {
|
|
1666
1516
|
var _a;
|
|
@@ -1871,8 +1721,6 @@ const Modal = class {
|
|
|
1871
1721
|
else if (hasCardModal) {
|
|
1872
1722
|
this.initSwipeToClose();
|
|
1873
1723
|
}
|
|
1874
|
-
// Initialize view transition listener for iOS card modals
|
|
1875
|
-
this.initViewTransitionListener();
|
|
1876
1724
|
unlock();
|
|
1877
1725
|
}
|
|
1878
1726
|
initSwipeToClose() {
|
|
@@ -1967,13 +1815,13 @@ const Modal = class {
|
|
|
1967
1815
|
}
|
|
1968
1816
|
/**
|
|
1969
1817
|
* Dismiss the modal overlay after it has been presented.
|
|
1818
|
+
*
|
|
1819
|
+
* @param data Any data to emit in the dismiss events.
|
|
1820
|
+
* @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
|
|
1821
|
+
*
|
|
1970
1822
|
* This is a no-op if the overlay has not been presented yet. If you want
|
|
1971
1823
|
* to remove an overlay from the DOM that was never presented, use the
|
|
1972
1824
|
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
1973
|
-
*
|
|
1974
|
-
* @param data Any data to emit in the dismiss events.
|
|
1975
|
-
* @param role The role of the element that is dismissing the modal.
|
|
1976
|
-
* For example, `cancel` or `backdrop`.
|
|
1977
1825
|
*/
|
|
1978
1826
|
async dismiss(data, role) {
|
|
1979
1827
|
var _a;
|
|
@@ -2026,7 +1874,6 @@ const Modal = class {
|
|
|
2026
1874
|
if (this.gesture) {
|
|
2027
1875
|
this.gesture.destroy();
|
|
2028
1876
|
}
|
|
2029
|
-
this.cleanupViewTransitionListener();
|
|
2030
1877
|
}
|
|
2031
1878
|
this.currentBreakpoint = undefined;
|
|
2032
1879
|
this.animation = undefined;
|
|
@@ -2046,10 +1893,8 @@ const Modal = class {
|
|
|
2046
1893
|
return overlays.eventMethod(this.el, 'ionModalWillDismiss');
|
|
2047
1894
|
}
|
|
2048
1895
|
/**
|
|
2049
|
-
* Move a sheet style modal to a specific breakpoint.
|
|
2050
|
-
*
|
|
2051
|
-
* @param breakpoint The breakpoint value to move the sheet modal to.
|
|
2052
|
-
* Must be a value defined in your `breakpoints` array.
|
|
1896
|
+
* Move a sheet style modal to a specific breakpoint. The breakpoint value must
|
|
1897
|
+
* be a value defined in your `breakpoints` array.
|
|
2053
1898
|
*/
|
|
2054
1899
|
async setCurrentBreakpoint(breakpoint) {
|
|
2055
1900
|
if (!this.isSheetModal) {
|
|
@@ -2102,97 +1947,24 @@ const Modal = class {
|
|
|
2102
1947
|
await this.setCurrentBreakpoint(nextBreakpoint);
|
|
2103
1948
|
return true;
|
|
2104
1949
|
}
|
|
2105
|
-
initViewTransitionListener() {
|
|
2106
|
-
// Only enable for iOS card modals when no custom animations are provided
|
|
2107
|
-
if (index$3.getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
|
|
2108
|
-
return;
|
|
2109
|
-
}
|
|
2110
|
-
// Set initial view state
|
|
2111
|
-
this.currentViewIsPortrait = window.innerWidth < 768;
|
|
2112
|
-
// Create debounced resize handler
|
|
2113
|
-
let resizeTimeout;
|
|
2114
|
-
this.resizeListener = () => {
|
|
2115
|
-
clearTimeout(resizeTimeout);
|
|
2116
|
-
resizeTimeout = setTimeout(() => {
|
|
2117
|
-
this.handleViewTransition();
|
|
2118
|
-
}, 100); // Debounce for 100ms to avoid excessive calls
|
|
2119
|
-
};
|
|
2120
|
-
window.addEventListener('resize', this.resizeListener);
|
|
2121
|
-
}
|
|
2122
|
-
handleViewTransition() {
|
|
2123
|
-
const isPortrait = window.innerWidth < 768;
|
|
2124
|
-
// Only transition if view state actually changed
|
|
2125
|
-
if (this.currentViewIsPortrait === isPortrait) {
|
|
2126
|
-
return;
|
|
2127
|
-
}
|
|
2128
|
-
// Cancel any ongoing transition animation
|
|
2129
|
-
if (this.viewTransitionAnimation) {
|
|
2130
|
-
this.viewTransitionAnimation.destroy();
|
|
2131
|
-
this.viewTransitionAnimation = undefined;
|
|
2132
|
-
}
|
|
2133
|
-
const { presentingElement } = this;
|
|
2134
|
-
if (!presentingElement) {
|
|
2135
|
-
return;
|
|
2136
|
-
}
|
|
2137
|
-
// Create transition animation
|
|
2138
|
-
let transitionAnimation;
|
|
2139
|
-
if (this.currentViewIsPortrait && !isPortrait) {
|
|
2140
|
-
// Portrait to landscape transition
|
|
2141
|
-
transitionAnimation = portraitToLandscapeTransition(this.el, {
|
|
2142
|
-
presentingEl: presentingElement});
|
|
2143
|
-
}
|
|
2144
|
-
else {
|
|
2145
|
-
// Landscape to portrait transition
|
|
2146
|
-
transitionAnimation = landscapeToPortraitTransition(this.el, {
|
|
2147
|
-
presentingEl: presentingElement});
|
|
2148
|
-
}
|
|
2149
|
-
// Update state and play animation
|
|
2150
|
-
this.currentViewIsPortrait = isPortrait;
|
|
2151
|
-
this.viewTransitionAnimation = transitionAnimation;
|
|
2152
|
-
transitionAnimation.play().then(() => {
|
|
2153
|
-
this.viewTransitionAnimation = undefined;
|
|
2154
|
-
});
|
|
2155
|
-
}
|
|
2156
|
-
cleanupViewTransitionListener() {
|
|
2157
|
-
const hasCardView = !!this.resizeListener;
|
|
2158
|
-
if (this.resizeListener) {
|
|
2159
|
-
window.removeEventListener('resize', this.resizeListener);
|
|
2160
|
-
this.resizeListener = undefined;
|
|
2161
|
-
}
|
|
2162
|
-
if (this.viewTransitionAnimation) {
|
|
2163
|
-
this.viewTransitionAnimation.destroy();
|
|
2164
|
-
this.viewTransitionAnimation = undefined;
|
|
2165
|
-
}
|
|
2166
|
-
if (hasCardView) {
|
|
2167
|
-
// If we had a card view, let's trigger the view transition
|
|
2168
|
-
// one last time to make sure we're in the right state.
|
|
2169
|
-
// This will prevent tricky things like resizing the modal causing
|
|
2170
|
-
// it to dismiss programatically too quickly and preventing the view transition
|
|
2171
|
-
// from being applied.
|
|
2172
|
-
this.handleViewTransition();
|
|
2173
|
-
}
|
|
2174
|
-
}
|
|
2175
1950
|
render() {
|
|
2176
1951
|
const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
|
|
2177
1952
|
const showHandle = handle !== false && isSheetModal;
|
|
2178
1953
|
const mode = index$3.getIonMode(this);
|
|
2179
1954
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
2180
1955
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
2181
|
-
|
|
2182
|
-
return (index$3.h(index$3.Host, Object.assign({ key: '857fbf50b5d0b43c1f1a335d740649cedf1d6e2b', "no-router": true,
|
|
2183
|
-
// Allow the modal to be navigable when the handle is focusable
|
|
2184
|
-
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
1956
|
+
return (index$3.h(index$3.Host, Object.assign({ key: '0bcbdcfcd7d890eb599da3f97f21c317d34f8e0e', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
2185
1957
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
2186
|
-
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle
|
|
1958
|
+
}, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), index$3.h("ion-backdrop", { key: 'd72159e73daa5af7349aa9e8f695aa435eb43069', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'fd2d9b13676ae72473881649a397b6eacde03a03', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '908eccb1ad982dcde2dbcff0cbb18b6e60f8ba74',
|
|
2187
1959
|
/*
|
|
2188
1960
|
role and aria-modal must be used on the
|
|
2189
1961
|
same element. They must also be set inside the
|
|
2190
1962
|
shadow DOM otherwise ion-button will not be highlighted
|
|
2191
1963
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
2192
1964
|
*/
|
|
2193
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '
|
|
1965
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '332dc0b40363a77c7be62331d9f26def91c790e9', class: "modal-handle",
|
|
2194
1966
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
2195
|
-
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle"
|
|
1967
|
+
tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), index$3.h("slot", { key: 'c32698350193c450327e97049daf8b8d1fda0d0e' }))));
|
|
2196
1968
|
}
|
|
2197
1969
|
get el() { return index$3.getElement(this); }
|
|
2198
1970
|
static get watchers() { return {
|
|
@@ -1263,8 +1263,6 @@ const Popover = class {
|
|
|
1263
1263
|
* Developers can pass a mouse, touch, or pointer event
|
|
1264
1264
|
* to position the popover relative to where that event
|
|
1265
1265
|
* was dispatched.
|
|
1266
|
-
*
|
|
1267
|
-
* @param event The event to position the popover relative to.
|
|
1268
1266
|
*/
|
|
1269
1267
|
async present(event) {
|
|
1270
1268
|
const unlock = await this.lockController.lock();
|
|
@@ -1328,14 +1326,15 @@ const Popover = class {
|
|
|
1328
1326
|
}
|
|
1329
1327
|
/**
|
|
1330
1328
|
* Dismiss the popover overlay after it has been presented.
|
|
1331
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
1332
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
1333
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
1334
1329
|
*
|
|
1335
1330
|
* @param data Any data to emit in the dismiss events.
|
|
1336
|
-
* @param role The role of the element that is dismissing the popover. For example,
|
|
1331
|
+
* @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
|
|
1337
1332
|
* @param dismissParentPopover If `true`, dismissing this popover will also dismiss
|
|
1338
1333
|
* a parent popover if this popover is nested. Defaults to `true`.
|
|
1334
|
+
*
|
|
1335
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
1336
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
1337
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
1339
1338
|
*/
|
|
1340
1339
|
async dismiss(data, role, dismissParentPopover = true) {
|
|
1341
1340
|
const unlock = await this.lockController.lock();
|
|
@@ -1387,9 +1386,9 @@ const Popover = class {
|
|
|
1387
1386
|
const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
|
|
1388
1387
|
const desktop = index.isPlatform('desktop');
|
|
1389
1388
|
const enableArrow = arrow && !parentPopover;
|
|
1390
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
1389
|
+
return (index.h(index.Host, Object.assign({ key: '1de4862099cfcb5035e78008e6dc7c1371846f9a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
|
|
1391
1390
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
1392
|
-
}, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '
|
|
1391
|
+
}, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '981aa4e0102cb93312ffbd8243cdf2a0cdc60469', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: '1a28ed55e9d34ef78cf0eb0178643301fd2dd75d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '1c206ea5eb3c0b5883a3d45c34cd22dd5ffe4b65', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '5ba561486a328c0c7ab825995fdbfb7a196429a4', class: "popover-content", part: "content" }, index.h("slot", { key: '00fc244ce9dcc2dfc677e6c34b7c8e7a330b2b03' })))));
|
|
1393
1392
|
}
|
|
1394
1393
|
get el() { return index.getElement(this); }
|
|
1395
1394
|
static get watchers() { return {
|
|
@@ -92,6 +92,7 @@ const ReorderGroup = class {
|
|
|
92
92
|
}
|
|
93
93
|
/**
|
|
94
94
|
* Completes the reorder operation. Must be called by the `ionItemReorder` event.
|
|
95
|
+
*
|
|
95
96
|
* If a list of items is passed, the list will be reordered and returned in the
|
|
96
97
|
* proper order.
|
|
97
98
|
*
|
|
@@ -278,7 +279,7 @@ const ReorderGroup = class {
|
|
|
278
279
|
}
|
|
279
280
|
render() {
|
|
280
281
|
const mode = index.getIonMode(this);
|
|
281
|
-
return (index.h(index.Host, { key: '
|
|
282
|
+
return (index.h(index.Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
|
|
282
283
|
[mode]: true,
|
|
283
284
|
'reorder-enabled': !this.disabled,
|
|
284
285
|
'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
|
|
@@ -676,7 +676,6 @@ const Router = class {
|
|
|
676
676
|
*
|
|
677
677
|
* @param path The path to navigate to.
|
|
678
678
|
* @param direction The direction of the animation. Defaults to `"forward"`.
|
|
679
|
-
* @param animation A custom animation to use for the transition.
|
|
680
679
|
*/
|
|
681
680
|
async push(path, direction = 'forward', animation) {
|
|
682
681
|
var _a;
|
|
@@ -257,8 +257,10 @@ const Searchbar = class {
|
|
|
257
257
|
/**
|
|
258
258
|
* Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
|
|
259
259
|
* `input.focus()`.
|
|
260
|
+
*
|
|
260
261
|
* Developers who wish to focus an input when a page enters
|
|
261
262
|
* should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
|
|
263
|
+
*
|
|
262
264
|
* Developers who wish to focus an input when an overlay is presented
|
|
263
265
|
* should call `setFocus` after `didPresent` has resolved.
|
|
264
266
|
*
|
|
@@ -437,8 +439,8 @@ const Searchbar = class {
|
|
|
437
439
|
const clearIcon = this.clearIcon || (mode === 'ios' ? index$1.closeCircle : index$1.closeSharp);
|
|
438
440
|
const searchIcon = this.searchIcon || (mode === 'ios' ? index$1.searchOutline : index$1.searchSharp);
|
|
439
441
|
const shouldShowCancelButton = this.shouldShowCancelButton();
|
|
440
|
-
const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '
|
|
441
|
-
return (index.h(index.Host, { key: '
|
|
442
|
+
const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '5835c36fcb0b52aec956538202a783f6c194d853', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, index.h("div", { key: '85df41676bed611467bd4df0002b08baee4f539c', "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
|
|
443
|
+
return (index.h(index.Host, { key: 'e1e30cdd79f9f54d5f2d27501012358bc46880e5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
|
|
442
444
|
[mode]: true,
|
|
443
445
|
'searchbar-animated': animated,
|
|
444
446
|
'searchbar-disabled': this.disabled,
|
|
@@ -448,14 +450,14 @@ const Searchbar = class {
|
|
|
448
450
|
'searchbar-has-focus': this.focused,
|
|
449
451
|
'searchbar-should-show-clear': this.shouldShowClearButton(),
|
|
450
452
|
'searchbar-should-show-cancel': this.shouldShowCancelButton(),
|
|
451
|
-
}) }, index.h("div", { key: '
|
|
453
|
+
}) }, index.h("div", { key: '7e9db147282a35bb1e3c9c6125b9a044e81ddde5', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: '02f08da21326b78d6cd249d54deab96fd8472ba8', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, index.h("ion-icon", { key: '048b00348456bd827ae734491c46a67bfb146227', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '71f64339bbfd54ebd26a0946c8ee9d726cd89c04', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
|
|
452
454
|
/**
|
|
453
455
|
* This prevents mobile browsers from
|
|
454
456
|
* blurring the input when the clear
|
|
455
457
|
* button is activated.
|
|
456
458
|
*/
|
|
457
459
|
ev.preventDefault();
|
|
458
|
-
}, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: '
|
|
460
|
+
}, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: '9b1a177b21951c1c95897a468b34bb7bbd63d137', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
|
|
459
461
|
}
|
|
460
462
|
get el() { return index.getElement(this); }
|
|
461
463
|
static get watchers() { return {
|
|
@@ -674,15 +674,16 @@ const Toast = class {
|
|
|
674
674
|
}
|
|
675
675
|
/**
|
|
676
676
|
* Dismiss the toast overlay after it has been presented.
|
|
677
|
-
* This is a no-op if the overlay has not been presented yet. If you want
|
|
678
|
-
* to remove an overlay from the DOM that was never presented, use the
|
|
679
|
-
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
680
677
|
*
|
|
681
678
|
* @param data Any data to emit in the dismiss events.
|
|
682
679
|
* @param role The role of the element that is dismissing the toast.
|
|
683
680
|
* This can be useful in a button handler for determining which button was
|
|
684
681
|
* clicked to dismiss the toast.
|
|
685
|
-
* Some examples include:
|
|
682
|
+
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
|
683
|
+
*
|
|
684
|
+
* This is a no-op if the overlay has not been presented yet. If you want
|
|
685
|
+
* to remove an overlay from the DOM that was never presented, use the
|
|
686
|
+
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
|
686
687
|
*/
|
|
687
688
|
async dismiss(data, role) {
|
|
688
689
|
var _a, _b;
|
|
@@ -850,9 +851,9 @@ const Toast = class {
|
|
|
850
851
|
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
|
|
851
852
|
index$1.printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
|
|
852
853
|
}
|
|
853
|
-
return (index$1.h(index$1.Host, Object.assign({ key: '
|
|
854
|
+
return (index$1.h(index$1.Host, Object.assign({ key: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
|
|
854
855
|
zIndex: `${60000 + this.overlayIndex}`,
|
|
855
|
-
}, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$1.h("div", { key: '
|
|
856
|
+
}, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$1.h("div", { key: '7c3ad1a8df9e21fc30fc179c7edebeabcf3c6874', class: wrapperClass }, index$1.h("div", { key: 'f950c21e8d7bf92653e0bd52e820ed6b84fa8cf5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$1.h("ion-icon", { key: '0266241927dbe16799adb57f9fc11bd5372877b2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$1.h("div", { key: '9ef4b87bad672af6a5b693af61375564daf1eeeb', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
|
|
856
857
|
}
|
|
857
858
|
get el() { return index$1.getElement(this); }
|
|
858
859
|
static get watchers() { return {
|