@ionic/core 8.7.16-dev.11767019759.14b7f2fa → 8.7.16-dev.11767028735.16932cea
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/modal.js +15 -92
- package/dist/cjs/ion-modal.cjs.entry.js +15 -92
- package/dist/collection/components/modal/gestures/sheet.js +1 -3
- package/dist/collection/components/modal/gestures/swipe-to-close.js +1 -3
- package/dist/collection/components/modal/modal.ios.css +4 -0
- package/dist/collection/components/modal/modal.js +11 -84
- package/dist/collection/components/modal/modal.md.css +4 -0
- package/dist/docs.json +1 -1
- package/dist/esm/ion-modal.entry.js +15 -92
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-91840a80.entry.js +4 -0
- package/dist/types/components/modal/gestures/sheet.d.ts +1 -1
- package/dist/types/components/modal/gestures/swipe-to-close.d.ts +1 -1
- package/dist/types/components/modal/modal.d.ts +0 -12
- package/hydrate/index.js +15 -92
- package/hydrate/index.mjs +15 -92
- package/package.json +1 -1
- package/dist/ionic/p-88b087a9.entry.js +0 -4
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
+
*/
|
|
4
|
+
import{r as t,c as o,f as i,w as a,e,h as r,d as s,g as n}from"./p-C8IsBmNU.js";import{f as d,i as h,d as l,r as p,a as c,p as m}from"./p-CwgG81ZD.js";import{C as f,a as u,d as b}from"./p-D-eFFUkA.js";import{e as v,g as x,r as w,b as g,h as k}from"./p-CTfR9YZG.js";import{c as y}from"./p-B-hirT0v.js";import{g as A}from"./p-CIGNaXM1.js";import{G as Y,O as D,F as E,e as B,B as T,j as O,k as S,f as C,g as M,h as P}from"./p-DdR6rpbR.js";import{g as j}from"./p-DiVJyqlX.js";import{e as R,w as L}from"./p-DUt5fQmA.js";import{b as $}from"./p-BFvmZNyx.js";import{KEYBOARD_DID_OPEN as I}from"./p-9eeaBrnk.js";import{c as N}from"./p-DDb5r57F.js";import{g as z}from"./p-hHmYLOfE.js";import{createGesture as W}from"./p-Cl0B-RWe.js";import{w as F}from"./p-ZjP4CjeZ.js";import"./p-B0q1YL7N.js";import"./p-BTEOs1at.js";import"./p-D13Eaw-8.js";var H;!function(t){t.Dark="DARK",t.Light="LIGHT",t.Default="DEFAULT"}(H||(H={}));const Z={getEngine(){const t=A();if(null==t?void 0:t.isPluginAvailable("StatusBar"))return t.Plugins.StatusBar},setStyle(t){const o=this.getEngine();o&&o.setStyle(t)},getStyle:async function(){const t=this.getEngine();if(!t)return H.Default;const{style:o}=await t.getInfo();return o}},V=(t,o)=>{if(1===o)return 0;const i=1/(1-o);return t*i+-o*i},G=()=>{!F||F.innerWidth>=768||Z.setStyle({style:H.Dark})},U=(t=H.Default)=>{!F||F.innerWidth>=768||Z.setStyle({style:t})},K=async(t,o)=>{"function"==typeof t.canDismiss&&await t.canDismiss(void 0,Y)&&(o.isRunning()?o.onFinish((()=>{t.dismiss(void 0,"handler")}),{oneTimeCallback:!0}):t.dismiss(void 0,"handler"))},_=t=>.00255275*2.71828**(-14.9619*t)-1.00255*2.71828**(-.0380968*t)+1,q=.915,X=(t,o)=>v(400,t/Math.abs(1.1*o),500),J=t=>{const{currentBreakpoint:o,backdropBreakpoint:i,expandToScroll:a}=t,e=void 0===i||i<o,r=e?`calc(var(--backdrop-opacity) * ${o})`:"0",s=N("backdropAnimation").fromTo("opacity",0,r);return e&&s.beforeStyles({"pointer-events":"none"}).afterClearStyles(["pointer-events"]),{wrapperAnimation:N("wrapperAnimation").keyframes([{offset:0,opacity:1,transform:"translateY(100%)"},{offset:1,opacity:1,transform:`translateY(${100-100*o}%)`}]),backdropAnimation:s,contentAnimation:a?void 0:N("contentAnimation").keyframes([{offset:0,opacity:1,maxHeight:100*(1-o)+"%"},{offset:1,opacity:1,maxHeight:100*o+"%"}])}},Q=t=>{const{currentBreakpoint:o,backdropBreakpoint:i}=t,a=`calc(var(--backdrop-opacity) * ${V(o,i)})`,e=[{offset:0,opacity:a},{offset:1,opacity:0}],r=[{offset:0,opacity:a},{offset:i,opacity:0},{offset:1,opacity:0}],s=N("backdropAnimation").keyframes(0!==i?r:e);return{wrapperAnimation:N("wrapperAnimation").keyframes([{offset:0,opacity:1,transform:`translateY(${100-100*o}%)`},{offset:1,opacity:1,transform:"translateY(100%)"}]),backdropAnimation:s}},tt=(t,o)=>{const{presentingEl:i,currentBreakpoint:a,expandToScroll:e}=o,r=x(t),{wrapperAnimation:s,backdropAnimation:n,contentAnimation:d}=void 0!==a?J(o):{backdropAnimation:N().fromTo("opacity",.01,"var(--backdrop-opacity)").beforeStyles({"pointer-events":"none"}).afterClearStyles(["pointer-events"]),wrapperAnimation:N().fromTo("transform","translateY(100vh)","translateY(0vh)"),contentAnimation:void 0};n.addElement(r.querySelector("ion-backdrop")),s.addElement(r.querySelectorAll(".modal-wrapper, .modal-shadow")).beforeStyles({opacity:1}),!e&&(null==d||d.addElement(t.querySelector(".ion-page")));const h=N("entering-base").addElement(t).easing("cubic-bezier(0.32,0.72,0,1)").duration(500).addAnimation([s]);if(d&&h.addAnimation(d),i){const t=window.innerWidth<768,o="ION-MODAL"===i.tagName&&void 0!==i.presentingElement,a=x(i),e=N().beforeStyles({transform:"translateY(0)","transform-origin":"top center",overflow:"hidden"}),r=document.body;if(t){const t=CSS.supports("width","max(0px, 1px)")?"max(30px, var(--ion-safe-area-top))":"30px",a=`translateY(${o?"-10px":t}) scale(0.915)`;e.afterStyles({transform:a}).beforeAddWrite((()=>r.style.setProperty("background-color","black"))).addElement(i).keyframes([{offset:0,filter:"contrast(1)",transform:"translateY(0px) scale(1)",borderRadius:"0px"},{offset:1,filter:"contrast(0.85)",transform:a,borderRadius:"10px 10px 0 0"}]),h.addAnimation(e)}else if(h.addAnimation(n),o){const t=`translateY(-10px) scale(${o?q:1})`;e.afterStyles({transform:t}).addElement(a.querySelector(".modal-wrapper")).keyframes([{offset:0,filter:"contrast(1)",transform:"translateY(0) scale(1)"},{offset:1,filter:"contrast(0.85)",transform:t}]);const i=N().afterStyles({transform:t}).addElement(a.querySelector(".modal-shadow")).keyframes([{offset:0,opacity:"1",transform:"translateY(0) scale(1)"},{offset:1,opacity:"0",transform:t}]);h.addAnimation([e,i])}else s.fromTo("opacity","0","1")}else h.addAnimation(n);return h},ot=(t,o,i=500)=>{const{presentingEl:a,currentBreakpoint:e}=o,r=x(t),{wrapperAnimation:s,backdropAnimation:n}=void 0!==e?Q(o):{backdropAnimation:N().fromTo("opacity","var(--backdrop-opacity)",0),wrapperAnimation:N().fromTo("transform","translateY(0vh)","translateY(100vh)")};n.addElement(r.querySelector("ion-backdrop")),s.addElement(r.querySelectorAll(".modal-wrapper, .modal-shadow")).beforeStyles({opacity:1});const d=N("leaving-base").addElement(t).easing("cubic-bezier(0.32,0.72,0,1)").duration(i).addAnimation(s);if(a){const t=window.innerWidth<768,o="ION-MODAL"===a.tagName&&void 0!==a.presentingElement,i=x(a),e=N().beforeClearStyles(["transform"]).afterClearStyles(["transform"]).onFinish((t=>{1===t&&(a.style.setProperty("overflow",""),Array.from(r.querySelectorAll("ion-modal:not(.overlay-hidden)")).filter((t=>void 0!==t.presentingElement)).length<=1&&r.style.setProperty("background-color",""))})),r=document.body;if(t){const t=CSS.supports("width","max(0px, 1px)")?"max(30px, var(--ion-safe-area-top))":"30px",i=`translateY(${o?"-10px":t}) scale(0.915)`;e.addElement(a).keyframes([{offset:0,filter:"contrast(0.85)",transform:i,borderRadius:"10px 10px 0 0"},{offset:1,filter:"contrast(1)",transform:"translateY(0px) scale(1)",borderRadius:"0px"}]),d.addAnimation(e)}else if(d.addAnimation(n),o){const t=`translateY(-10px) scale(${o?q:1})`;e.addElement(i.querySelector(".modal-wrapper")).afterStyles({transform:"translate3d(0, 0, 0)"}).keyframes([{offset:0,filter:"contrast(0.85)",transform:t},{offset:1,filter:"contrast(1)",transform:"translateY(0) scale(1)"}]);const a=N().addElement(i.querySelector(".modal-shadow")).afterStyles({transform:"translateY(0) scale(1)"}).keyframes([{offset:0,opacity:"0",transform:t},{offset:1,opacity:"1",transform:"translateY(0) scale(1)"}]);d.addAnimation([e,a])}else s.fromTo("opacity","1","0")}else d.addAnimation(n);return d},it=(t,o)=>{const{currentBreakpoint:i,expandToScroll:a}=o,e=x(t),{wrapperAnimation:r,backdropAnimation:s,contentAnimation:n}=void 0!==i?J(o):{backdropAnimation:N().fromTo("opacity",.01,"var(--backdrop-opacity)").beforeStyles({"pointer-events":"none"}).afterClearStyles(["pointer-events"]),wrapperAnimation:N().keyframes([{offset:0,opacity:.01,transform:"translateY(40px)"},{offset:1,opacity:1,transform:"translateY(0px)"}]),contentAnimation:void 0};s.addElement(e.querySelector("ion-backdrop")),r.addElement(e.querySelector(".modal-wrapper")),!a&&(null==n||n.addElement(t.querySelector(".ion-page")));const d=N().addElement(t).easing("cubic-bezier(0.36,0.66,0.04,1)").duration(280).addAnimation([s,r]);return n&&d.addAnimation(n),d},at=(t,o)=>{const{currentBreakpoint:i}=o,a=x(t),{wrapperAnimation:e,backdropAnimation:r}=void 0!==i?Q(o):{backdropAnimation:N().fromTo("opacity","var(--backdrop-opacity)",0),wrapperAnimation:N().keyframes([{offset:0,opacity:.99,transform:"translateY(0px)"},{offset:1,opacity:0,transform:"translateY(40px)"}])};return r.addElement(a.querySelector("ion-backdrop")),e.addElement(a.querySelector(".modal-wrapper")),N().easing("cubic-bezier(0.47,0,0.745,0.715)").duration(200).addAnimation([r,e])},et=class{constructor(i){t(this,i),this.didPresent=o(this,"ionModalDidPresent",7),this.willPresent=o(this,"ionModalWillPresent",7),this.willDismiss=o(this,"ionModalWillDismiss",7),this.didDismiss=o(this,"ionModalDidDismiss",7),this.ionBreakpointDidChange=o(this,"ionBreakpointDidChange",7),this.didPresentShorthand=o(this,"didPresent",7),this.willPresentShorthand=o(this,"willPresent",7),this.willDismissShorthand=o(this,"willDismiss",7),this.didDismissShorthand=o(this,"didDismiss",7),this.ionMount=o(this,"ionMount",7),this.lockController=y(),this.triggerController=B(),this.coreDelegate=f(),this.isSheetModal=!1,this.inheritedAttributes={},this.inline=!1,this.gestureAnimationDismissing=!1,this.presented=!1,this.hasController=!1,this.keyboardClose=!0,this.expandToScroll=!0,this.backdropBreakpoint=0,this.handleBehavior="none",this.backdropDismiss=!0,this.showBackdrop=!0,this.animated=!0,this.isOpen=!1,this.keepContentsMounted=!1,this.focusTrap=!0,this.canDismiss=!0,this.onHandleClick=()=>{const{sheetTransition:t,handleBehavior:o}=this;"cycle"===o&&void 0===t&&this.moveToNextBreakpoint()},this.onBackdropTap=()=>{const{sheetTransition:t}=this;void 0===t&&this.dismiss(void 0,T)},this.onLifecycle=t=>{const o=this.usersElement,i=rt[t.type];if(o&&i){const a=new CustomEvent(i,{bubbles:!1,cancelable:!1,detail:t.detail});o.dispatchEvent(a)}},this.onModalFocus=t=>{const{dragHandleEl:o,el:i}=this;t.target===i&&o&&-1!==o.tabIndex&&o.focus()},this.onSlotChange=({target:t})=>{t.assignedElements().forEach((t=>{t.querySelectorAll("ion-modal").forEach((t=>{null===t.getAttribute("data-parent-ion-modal")&&t.setAttribute("data-parent-ion-modal",this.el.id)}))}))}}onIsOpenChange(t,o){!0===t&&!1===o?this.present():!1===t&&!0===o&&this.dismiss()}triggerChanged(){const{trigger:t,el:o,triggerController:i}=this;t&&i.addClickListener(o,t)}onWindowResize(){"ios"!==$(this)||!this.presentingElement||this.enterAnimation||this.leaveAnimation||(clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout((()=>{this.handleViewTransition()}),50))}breakpointsChanged(t){void 0!==t&&(this.sortedBreakpoints=t.sort(((t,o)=>t-o)))}connectedCallback(){const{el:t}=this;O(t),this.triggerChanged()}disconnectedCallback(){this.triggerController.removeClickListener(),this.cleanupViewTransitionListener(),this.cleanupParentRemovalObserver()}componentWillLoad(){var t;const{breakpoints:o,initialBreakpoint:a,el:e,htmlAttributes:r}=this,s=this.isSheetModal=void 0!==o&&void 0!==a,n=["aria-label","role"];this.inheritedAttributes=g(e,n),e.parentNode&&(this.cachedOriginalParent=e.parentNode),void 0!==r&&n.forEach((t=>{r[t]&&(this.inheritedAttributes=Object.assign(Object.assign({},this.inheritedAttributes),{[t]:r[t]}),delete r[t])})),s&&(this.currentBreakpoint=this.initialBreakpoint),void 0===o||void 0===a||o.includes(a)||i("[ion-modal] - Your breakpoints array must include the initialBreakpoint value."),(null===(t=this.htmlAttributes)||void 0===t?void 0:t.id)||S(this.el)}componentDidLoad(){!0===this.isOpen&&w((()=>this.present())),this.breakpointsChanged(this.breakpoints),this.triggerChanged()}getDelegate(t=!1){if(this.workingDelegate&&!t)return{delegate:this.workingDelegate,inline:this.inline};const o=this.inline=null!==this.el.parentNode&&!this.hasController;return{inline:o,delegate:this.workingDelegate=o?this.delegate||this.coreDelegate:this.delegate}}async checkCanDismiss(t,o){const{canDismiss:i}=this;return"function"==typeof i?i(t,o):i}async present(){const t=await this.lockController.lock();if(this.presented)return void t();const{presentingElement:o,el:i}=this;this.currentBreakpoint=this.initialBreakpoint;const{inline:e,delegate:r}=this.getDelegate(!0);this.ionMount.emit(),this.usersElement=await u(r,i,this.component,["ion-page"],this.componentProps,e),k(i)?await R(this.usersElement):this.keepContentsMounted||await L(),a((()=>this.el.classList.add("show-modal")));const s=void 0!==o;s&&"ios"===$(this)&&(this.statusBarStyle=await Z.getStyle(),G()),await C(this,"modalEnter",tt,it,{presentingEl:o,currentBreakpoint:this.initialBreakpoint,backdropBreakpoint:this.backdropBreakpoint,expandToScroll:this.expandToScroll}),"undefined"!=typeof window&&(this.keyboardOpenCallback=()=>{this.gesture&&(this.gesture.enable(!1),w((()=>{this.gesture&&this.gesture.enable(!0)})))},window.addEventListener(I,this.keyboardOpenCallback));const n=void 0!==this.breakpoints&&void 0!==this.initialBreakpoint;this.isSheetModal=n,n?this.initSheetGesture():s&&this.initSwipeToClose(),this.initViewTransitionListener(),this.initParentRemovalObserver(),t()}initSwipeToClose(){var t;if("ios"!==$(this))return;const{el:o}=this,i=this.leaveAnimation||e.get("modalLeave",ot),a=this.animation=i(o,{presentingEl:this.presentingElement,expandToScroll:this.expandToScroll});if(!c(o))return void m(o);const r=null!==(t=this.statusBarStyle)&&void 0!==t?t:H.Default;this.gesture=((t,o,i,a)=>{const e=.5,r=t.offsetHeight;let s=!1,n=!1,c=null,m=null,f=!0,u=0;const b=W({el:t,gestureName:"modalSwipeToClose",gesturePriority:D,direction:"y",threshold:10,canStart:t=>{const o=t.event.target;if(null===o||!o.closest)return!0;if(c=d(o),c){if(h(c)){const t=x(c);m=t.querySelector(".inner-scroll")}else m=c;return!c.querySelector("ion-refresher")&&0===m.scrollTop}return null===o.closest("ion-footer")},onStart:i=>{const{deltaY:a}=i;f=!c||!h(c)||c.scrollY,n=void 0!==t.canDismiss&&!0!==t.canDismiss,a>0&&c&&l(c),o.progressStart(!0,s?1:0)},onMove:t=>{const{deltaY:a}=t;a>0&&c&&l(c);const s=t.deltaY/r,d=s>=0&&n,h=d?.2:.9999,p=d?_(s/h):s,m=v(1e-4,p,h);o.progressStep(m),m>=e&&u<e?U(i):m<e&&u>=e&&G(),u=m},onEnd:i=>{const d=i.velocityY,h=i.deltaY/r,l=h>=0&&n,m=l?.2:.9999,u=l?_(h/m):h,x=v(1e-4,u,m),w=!l&&(i.deltaY+1e3*d)/r>=e;let g=w?-.001:.001;w?(o.easing("cubic-bezier(0.32, 0.72, 0, 1)"),g+=z([0,0],[.32,.72],[0,1],[1,1],x)[0]):(o.easing("cubic-bezier(1, 0, 0.68, 0.28)"),g+=z([0,0],[1,0],[.68,.28],[1,1],x)[0]);const k=X(w?h*r:(1-x)*r,d);s=w,b.enable(!1),c&&p(c,f),o.onFinish((()=>{w||b.enable(!0)})).progressEnd(w?1:0,g,k),l&&x>m/4?K(t,o):w&&a()}});return b})(o,a,r,(()=>{this.gestureAnimationDismissing=!0,U(this.statusBarStyle),this.animation.onFinish((async()=>{await this.dismiss(void 0,Y),this.gestureAnimationDismissing=!1}))})),this.gesture.enable(!0)}initSheetGesture(){const{wrapperEl:t,initialBreakpoint:o,backdropBreakpoint:i}=this;if(!t||void 0===o)return;const a=this.enterAnimation||e.get("modalEnter",tt),r=this.animation=a(this.el,{presentingEl:this.presentingElement,currentBreakpoint:o,backdropBreakpoint:i,expandToScroll:this.expandToScroll});r.progressStart(!0,1);const{gesture:s,moveSheetToBreakpoint:n}=((t,o,i,a,e,r,s=[],n,l,p,c)=>{const m={WRAPPER_KEYFRAMES:[{offset:0,transform:"translateY(0%)"},{offset:1,transform:"translateY(100%)"}],BACKDROP_KEYFRAMES:0!==e?[{offset:0,opacity:"var(--backdrop-opacity)"},{offset:1-e,opacity:0},{offset:1,opacity:0}]:[{offset:0,opacity:"var(--backdrop-opacity)"},{offset:1,opacity:.01}],CONTENT_KEYFRAMES:[{offset:0,maxHeight:"100%"},{offset:1,maxHeight:"0%"}]},f=t.querySelector("ion-content"),u=i.clientHeight;let b=a,g=0,k=!1,y=null,A=null,Y=null,D=null;const B=s[s.length-1],T=s[0],O=r.childAnimations.find((t=>"wrapperAnimation"===t.id)),S=r.childAnimations.find((t=>"backdropAnimation"===t.id)),C=r.childAnimations.find((t=>"contentAnimation"===t.id)),M=()=>{!1!==t.focusTrap&&!1!==t.showBackdrop&&(t.style.setProperty("pointer-events","auto"),o.style.setProperty("pointer-events","auto"),t.classList.remove(E))},P=()=>{t.style.setProperty("pointer-events","none"),o.style.setProperty("pointer-events","none"),t.classList.add(E)},j=o=>{if(!A&&(A=Array.from(t.querySelectorAll("ion-footer")),!A.length))return;const i=t.querySelector(".ion-page");if(D=o,"stationary"===o)A.forEach((t=>{t.classList.remove("modal-footer-moving"),t.style.removeProperty("position"),t.style.removeProperty("width"),t.style.removeProperty("height"),t.style.removeProperty("top"),t.style.removeProperty("left"),null==i||i.style.removeProperty("padding-bottom"),null==i||i.appendChild(t)}));else{let o=0;A.forEach(((i,a)=>{const e=i.getBoundingClientRect(),r=document.body.getBoundingClientRect();o+=i.clientHeight;const s=e.top-r.top,n=e.left-r.left;if(i.style.setProperty("--pinned-width",`${i.clientWidth}px`),i.style.setProperty("--pinned-height",`${i.clientHeight}px`),i.style.setProperty("--pinned-top",`${s}px`),i.style.setProperty("--pinned-left",`${n}px`),0===a){Y=s;const o=t.querySelector("ion-header");o&&(Y-=o.clientHeight)}})),A.forEach((t=>{null==i||i.style.setProperty("padding-bottom",`${o}px`),t.classList.add("modal-footer-moving"),t.style.setProperty("position","absolute"),t.style.setProperty("width","var(--pinned-width)"),t.style.setProperty("height","var(--pinned-height)"),t.style.setProperty("top","var(--pinned-top)"),t.style.setProperty("left","var(--pinned-left)"),document.body.appendChild(t)}))}};O&&S&&(O.keyframes([...m.WRAPPER_KEYFRAMES]),S.keyframes([...m.BACKDROP_KEYFRAMES]),null==C||C.keyframes([...m.CONTENT_KEYFRAMES]),r.progressStart(!0,1-b),b>e&&!1!==t.focusTrap&&!1!==t.showBackdrop?M():P()),f&&b!==B&&n&&(f.scrollY=!1);const R=o=>{const{breakpoint:i,canDismiss:a,breakpointOffset:d,animated:h}=o,l=a&&0===i,u=l?b:i,v=0!==u;return b=0,O&&S&&(O.keyframes([{offset:0,transform:`translateY(${100*d}%)`},{offset:1,transform:`translateY(${100*(1-u)}%)`}]),S.keyframes([{offset:0,opacity:`calc(var(--backdrop-opacity) * ${V(1-d,e)})`},{offset:1,opacity:`calc(var(--backdrop-opacity) * ${V(u,e)})`}]),C&&C.keyframes([{offset:0,maxHeight:100*(1-d)+"%"},{offset:1,maxHeight:100*u+"%"}]),r.progressStep(0)),L.enable(!1),l?K(t,r):v||p(),!f||u!==s[s.length-1]&&n||(f.scrollY=!0),n||0!==u||j("stationary"),new Promise((o=>{r.onFinish((()=>{v?(n||j("stationary"),O&&S?w((()=>{O.keyframes([...m.WRAPPER_KEYFRAMES]),S.keyframes([...m.BACKDROP_KEYFRAMES]),null==C||C.keyframes([...m.CONTENT_KEYFRAMES]),r.progressStart(!0,1-u),b=u,c(b),b>e&&!1!==t.focusTrap&&!1!==t.showBackdrop?M():P(),L.enable(!0),o()})):(L.enable(!0),o())):o()}),{oneTimeCallback:!0}).progressEnd(1,0,h?500:0)}))},L=W({el:i,gestureName:"modalSheet",gesturePriority:40,direction:"y",threshold:10,canStart:t=>{const o=d(t.event.target);if(b=l(),!n&&o)return 0===(h(o)?x(o).querySelector(".inner-scroll"):o).scrollTop;if(1===b&&o){const t=h(o)?x(o).querySelector(".inner-scroll"):o;return!o.querySelector("ion-refresher")&&0===t.scrollTop}return!0},onStart:o=>{if(k=void 0!==t.canDismiss&&!0!==t.canDismiss&&0===T,!n){const t=d(o.event.target);y=t&&h(t)?x(t).querySelector(".inner-scroll"):t}n||j("moving"),o.deltaY>0&&f&&(f.scrollY=!1),w((()=>{t.focus()})),r.progressStart(!0,1-b)},onMove:t=>{if(n||null===Y||null===D||(t.currentY>=Y&&"moving"===D?j("stationary"):t.currentY<Y&&"stationary"===D&&j("moving")),!n&&t.deltaY<=0&&y)return;t.deltaY>0&&f&&(f.scrollY=!1);const o=s.length>1?1-s[1]:void 0,i=1-b+t.deltaY/u,a=void 0!==o&&i>=o&&k,e=a?.95:.9999,d=a&&void 0!==o?o+_((i-o)/(e-o)):i;g=v(1e-4,d,e),r.progressStep(g)},onEnd:t=>{if(!n&&t.deltaY<=0&&y&&y.scrollTop>0)return void j("stationary");const o=b-(t.deltaY+350*t.velocityY)/u,i=s.reduce(((t,i)=>Math.abs(i-o)<Math.abs(t-o)?i:t));R({breakpoint:i,breakpointOffset:g,canDismiss:k,animated:!0})}});return{gesture:L,moveSheetToBreakpoint:R}})(this.el,this.backdropEl,t,o,i,r,this.sortedBreakpoints,this.expandToScroll,(()=>{var t;return null!==(t=this.currentBreakpoint)&&void 0!==t?t:0}),(()=>this.sheetOnDismiss()),(t=>{this.currentBreakpoint!==t&&(this.currentBreakpoint=t,this.ionBreakpointDidChange.emit({breakpoint:t}))}));this.gesture=s,this.moveSheetToBreakpoint=n,this.gesture.enable(!0),(!1===this.showBackdrop||!1===this.focusTrap||i>0)&&this.setupChildRoutePassthrough()}setupChildRoutePassthrough(){var t;this.cachedPageParent=this.getOriginalPageParent();const o=this.cachedPageParent;if(!o||"ION-APP"===o.tagName)return;const i=Array.from(o.children).some((t=>{var o;return!(t===this.el||t instanceof HTMLElement&&"none"===window.getComputedStyle(t).display||"TEMPLATE"===t.tagName||"SLOT"===t.tagName||t.nodeType===Node.TEXT_NODE&&!(null===(o=t.textContent)||void 0===o?void 0:o.trim()))}));if(i)return;o.classList.add("ion-page-overlay-passthrough");const a=o.parentElement;"ION-ROUTER-OUTLET"===(null==a?void 0:a.tagName)&&"ION-APP"!==(null===(t=a.parentElement)||void 0===t?void 0:t.tagName)&&(a.style.setProperty("pointer-events","none"),a.setAttribute("data-overlay-passthrough","true"))}getOriginalPageParent(){if(!this.cachedOriginalParent)return null;let t=this.cachedOriginalParent;for(;t&&!t.classList.contains("ion-page");)t=t.parentElement;return t}cleanupChildRoutePassthrough(){const t=this.cachedPageParent;if(!t)return;t.classList.remove("ion-page-overlay-passthrough");const o=t.parentElement;(null==o?void 0:o.hasAttribute("data-overlay-passthrough"))&&(o.style.removeProperty("pointer-events"),o.removeAttribute("data-overlay-passthrough")),this.cachedPageParent=void 0}sheetOnDismiss(){this.gestureAnimationDismissing=!0,this.animation.onFinish((async()=>{this.currentBreakpoint=0,this.ionBreakpointDidChange.emit({breakpoint:this.currentBreakpoint}),await this.dismiss(void 0,Y),this.gestureAnimationDismissing=!1}))}async dismiss(t,o){var i;if(this.gestureAnimationDismissing&&o!==Y)return!1;const e=await this.lockController.lock();if(await this.dismissNestedModals(),"handler"!==o&&!await this.checkCanDismiss(t,o))return e(),!1;const{presentingElement:r}=this;void 0!==r&&"ios"===$(this)&&U(this.statusBarStyle),"undefined"!=typeof window&&this.keyboardOpenCallback&&(window.removeEventListener(I,this.keyboardOpenCallback),this.keyboardOpenCallback=void 0);const s=await M(this,t,o,"modalLeave",ot,at,{presentingEl:r,currentBreakpoint:null!==(i=this.currentBreakpoint)&&void 0!==i?i:this.initialBreakpoint,backdropBreakpoint:this.backdropBreakpoint,expandToScroll:this.expandToScroll});if(s){const{delegate:t}=this.getDelegate();await b(t,this.usersElement),a((()=>this.el.classList.remove("show-modal"))),this.animation&&this.animation.destroy(),this.gesture&&this.gesture.destroy(),this.cleanupViewTransitionListener(),this.cleanupParentRemovalObserver(),this.cleanupChildRoutePassthrough()}return this.currentBreakpoint=void 0,this.animation=void 0,e(),s}onDidDismiss(){return P(this.el,"ionModalDidDismiss")}onWillDismiss(){return P(this.el,"ionModalWillDismiss")}async setCurrentBreakpoint(t){if(!this.isSheetModal)return void i("[ion-modal] - setCurrentBreakpoint is only supported on sheet modals.");if(!this.breakpoints.includes(t))return void i(`[ion-modal] - Attempted to set invalid breakpoint value ${t}. Please double check that the breakpoint value is part of your defined breakpoints.`);const{currentBreakpoint:o,moveSheetToBreakpoint:a,canDismiss:e,breakpoints:r,animated:s}=this;o!==t&&a&&(this.sheetTransition=a({breakpoint:t,breakpointOffset:1-o,canDismiss:void 0!==e&&!0!==e&&0===r[0],animated:s}),await this.sheetTransition,this.sheetTransition=void 0)}async getCurrentBreakpoint(){return this.currentBreakpoint}async moveToNextBreakpoint(){const{breakpoints:t,currentBreakpoint:o}=this;if(!t||null==o)return!1;const i=t.filter((t=>0!==t)),a=i.indexOf(o),e=i[(a+1)%i.length];return await this.setCurrentBreakpoint(e),!0}initViewTransitionListener(){"ios"!==$(this)||!this.presentingElement||this.enterAnimation||this.leaveAnimation||(this.currentViewIsPortrait=window.innerWidth<768)}handleViewTransition(){if(!this.presented)return;const t=window.innerWidth<768;if(this.currentViewIsPortrait===t)return;this.viewTransitionAnimation&&(this.viewTransitionAnimation.destroy(),this.viewTransitionAnimation=void 0);const{presentingElement:o}=this;if(!o)return;let i;i=this.currentViewIsPortrait&&!t?((t,o,i=300)=>{const{presentingEl:a}=o;if(!a)return N("portrait-to-landscape-transition");const e="ION-MODAL"===a.tagName&&void 0!==a.presentingElement,r=x(a),s=document.body,n=N("portrait-to-landscape-transition").addElement(t).easing("cubic-bezier(0.32,0.72,0,1)").duration(i),d=N().beforeStyles({transform:"translateY(0)","transform-origin":"top center",overflow:"hidden"});if(e){const t="translateY(-10px) scale(0.915)",o="translateY(0px) scale(1)";d.addElement(a).afterStyles({transform:o}).fromTo("transform",t,o).fromTo("filter","contrast(0.85)","contrast(1)");const i=N().addElement(r.querySelector(".modal-shadow")).afterStyles({transform:o,opacity:"0"}).fromTo("transform",t,o);n.addAnimation([d,i])}else{const o=x(t),i=N().addElement(o.querySelectorAll(".modal-wrapper, .modal-shadow")).fromTo("opacity","1","1"),e=N().addElement(o.querySelector("ion-backdrop")).fromTo("opacity","var(--backdrop-opacity)","var(--backdrop-opacity)"),r=`translateY(${CSS.supports("width","max(0px, 1px)")?"max(30px, var(--ion-safe-area-top))":"30px"}) scale(0.915)`;d.addElement(a).afterStyles({transform:"translateY(0px) scale(1)","border-radius":"0px"}).beforeAddWrite((()=>s.style.setProperty("background-color",""))).fromTo("transform",r,"translateY(0px) scale(1)").fromTo("filter","contrast(0.85)","contrast(1)").fromTo("border-radius","10px 10px 0 0","0px"),n.addAnimation([d,i,e])}return n})(this.el,{presentingEl:o}):((t,o,i=300)=>{const{presentingEl:a}=o;if(!a)return N("landscape-to-portrait-transition");const e="ION-MODAL"===a.tagName&&void 0!==a.presentingElement,r=x(a),s=document.body,n=N("landscape-to-portrait-transition").addElement(t).easing("cubic-bezier(0.32,0.72,0,1)").duration(i),d=N().beforeStyles({transform:"translateY(0)","transform-origin":"top center",overflow:"hidden"});if(e){const t="translateY(-10px) scale(0.915)",o="translateY(0) scale(1)";d.addElement(a).afterStyles({transform:o}).fromTo("transform",t,o);const i=N().addElement(r.querySelector(".modal-shadow")).afterStyles({transform:o,opacity:"0"}).fromTo("transform",t,o);n.addAnimation([d,i])}else{const o=x(t),i=N().addElement(o.querySelectorAll(".modal-wrapper, .modal-shadow")).fromTo("opacity","1","1"),e=N().addElement(o.querySelector("ion-backdrop")).fromTo("opacity","var(--backdrop-opacity)","var(--backdrop-opacity)"),r=`translateY(${CSS.supports("width","max(0px, 1px)")?"max(30px, var(--ion-safe-area-top))":"30px"}) scale(0.915)`;d.addElement(a).afterStyles({transform:r}).beforeAddWrite((()=>s.style.setProperty("background-color","black"))).keyframes([{offset:0,transform:"translateY(0px) scale(1)",filter:"contrast(1)",borderRadius:"0px"},{offset:.2,transform:"translateY(0px) scale(1)",filter:"contrast(1)",borderRadius:"10px 10px 0 0"},{offset:1,transform:r,filter:"contrast(0.85)",borderRadius:"10px 10px 0 0"}]),n.addAnimation([d,i,e])}return n})(this.el,{presentingEl:o}),this.currentViewIsPortrait=t,this.viewTransitionAnimation=i,i.play().then((()=>{this.viewTransitionAnimation=void 0,this.reinitSwipeToClose()}))}cleanupViewTransitionListener(){this.resizeTimeout&&(clearTimeout(this.resizeTimeout),this.resizeTimeout=void 0),this.viewTransitionAnimation&&(this.viewTransitionAnimation.destroy(),this.viewTransitionAnimation=void 0)}reinitSwipeToClose(){"ios"===$(this)&&this.presentingElement&&(this.gesture&&(this.gesture.destroy(),this.gesture=void 0),this.animation&&(this.animation.progressEnd(0,0,0),this.animation.destroy(),this.animation=void 0),w((()=>{this.ensureCorrectModalPosition(),this.initSwipeToClose()})))}ensureCorrectModalPosition(){const{el:t,presentingElement:o}=this,i=x(t).querySelector(".modal-wrapper");if(i&&(i.style.transform="translateY(0vh)",i.style.opacity="1"),"ION-MODAL"===(null==o?void 0:o.tagName))if(window.innerWidth<768){const t=CSS.supports("width","max(0px, 1px)")?"max(30px, var(--ion-safe-area-top))":"30px";o.style.transform=`translateY(${t}) scale(0.915)`}else o.style.transform="translateY(0px) scale(1)"}async dismissNestedModals(){const t=document.querySelectorAll(`ion-modal[data-parent-ion-modal="${this.el.id}"]`);null==t||t.forEach((async t=>{await t.dismiss(void 0,"parent-dismissed")}))}initParentRemovalObserver(){"undefined"!=typeof MutationObserver&&"undefined"!=typeof window&&this.cachedOriginalParent&&this.cachedOriginalParent.nodeType!==Node.DOCUMENT_NODE&&this.cachedOriginalParent.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&(this.hasController||this.cachedOriginalParent===document.body||"ION-APP"===this.cachedOriginalParent.tagName||(this.parentRemovalObserver=new MutationObserver((t=>{t.forEach((t=>{"childList"===t.type&&t.removedNodes.length>0&&(Array.from(t.removedNodes).some((t=>{var o,i;const a=t===this.cachedOriginalParent,e=!!this.cachedOriginalParent&&(null===(i=(o=t).contains)||void 0===i?void 0:i.call(o,this.cachedOriginalParent));return a||e}))||this.cachedOriginalParent&&!this.cachedOriginalParent.isConnected)&&(this.dismiss(void 0,"parent-removed"),this.cachedOriginalParent=void 0)}))})),this.parentRemovalObserver.observe(document.body,{childList:!0,subtree:!0})))}cleanupParentRemovalObserver(){var t;null===(t=this.parentRemovalObserver)||void 0===t||t.disconnect(),this.parentRemovalObserver=void 0}render(){const{handle:t,isSheetModal:o,presentingElement:i,htmlAttributes:a,handleBehavior:e,inheritedAttributes:n,focusTrap:d,expandToScroll:h}=this,l=!1!==t&&o,p=$(this),c=void 0!==i&&"ios"===p,m="cycle"===e;return r(s,Object.assign({key:"87328006ea6c75ebc518ace300438492a567223e","no-router":!0,tabIndex:m&&o&&l?0:-1},a,{style:{zIndex:`${2e4+this.overlayIndex}`},class:Object.assign({[p]:!0,"modal-default":!c&&!o,"modal-card":c,"modal-sheet":o,"modal-no-expand-scroll":o&&!h,"overlay-hidden":!0,[E]:!1===d},j(this.cssClass)),onIonBackdropTap:this.onBackdropTap,onIonModalDidPresent:this.onLifecycle,onIonModalWillPresent:this.onLifecycle,onIonModalWillDismiss:this.onLifecycle,onIonModalDidDismiss:this.onLifecycle,onFocus:this.onModalFocus}),r("ion-backdrop",{key:"ee94ff8e09b691dd4ad4e4db1720f06bc3c5a469",ref:t=>this.backdropEl=t,visible:this.showBackdrop,tappable:this.backdropDismiss,part:"backdrop"}),"ios"===p&&r("div",{key:"bffd69b4635c22d9f249725bd952c1e93d5615c7",class:"modal-shadow"}),r("div",Object.assign({key:"1d394d3c68916e464ff1fbf5242419f4a3d3cca1",role:"dialog"},n,{"aria-modal":"true",class:"modal-wrapper ion-overlay-wrapper",part:"content",ref:t=>this.wrapperEl=t}),l&&r("button",{key:"2dcf58792018e557e0c323baad2d672bc99c0bb1",class:"modal-handle",tabIndex:m?0:-1,"aria-label":"Activate to adjust the size of the dialog overlaying the screen",onClick:m?this.onHandleClick:void 0,part:"handle",ref:t=>this.dragHandleEl=t}),r("slot",{key:"44164b1e8710c3895400ad9f44ecd99873874ad5",onSlotchange:this.onSlotChange})))}get el(){return n(this)}static get watchers(){return{isOpen:["onIsOpenChange"],trigger:["triggerChanged"]}}},rt={ionModalDidPresent:"ionViewDidEnter",ionModalWillPresent:"ionViewWillEnter",ionModalWillDismiss:"ionViewWillLeave",ionModalDidDismiss:"ionViewDidLeave"};et.style={ios:':host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}',md:':host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}'};export{et as ion_modal}
|
|
@@ -29,7 +29,7 @@ export interface MoveSheetToBreakpointOptions {
|
|
|
29
29
|
*/
|
|
30
30
|
animated: boolean;
|
|
31
31
|
}
|
|
32
|
-
export declare const createSheetGesture: (baseEl: HTMLIonModalElement, backdropEl: HTMLIonBackdropElement, wrapperEl: HTMLElement, initialBreakpoint: number, backdropBreakpoint: number, animation: Animation, breakpoints: number[] | undefined, expandToScroll: boolean, getCurrentBreakpoint: () => number, onDismiss: () => void, onBreakpointChange: (breakpoint: number) => void
|
|
32
|
+
export declare const createSheetGesture: (baseEl: HTMLIonModalElement, backdropEl: HTMLIonBackdropElement, wrapperEl: HTMLElement, initialBreakpoint: number, backdropBreakpoint: number, animation: Animation, breakpoints: number[] | undefined, expandToScroll: boolean, getCurrentBreakpoint: () => number, onDismiss: () => void, onBreakpointChange: (breakpoint: number) => void) => {
|
|
33
33
|
gesture: import("@utils/gesture").Gesture;
|
|
34
34
|
moveSheetToBreakpoint: (options: MoveSheetToBreakpointOptions) => Promise<void>;
|
|
35
35
|
};
|
|
@@ -3,4 +3,4 @@ import type { Style as StatusBarStyle } from '../../../utils/native/status-bar';
|
|
|
3
3
|
export declare const SwipeToCloseDefaults: {
|
|
4
4
|
MIN_PRESENTING_SCALE: number;
|
|
5
5
|
};
|
|
6
|
-
export declare const createSwipeToCloseGesture: (el: HTMLIonModalElement, animation: Animation, statusBarStyle: StatusBarStyle, onDismiss: () => void
|
|
6
|
+
export declare const createSwipeToCloseGesture: (el: HTMLIonModalElement, animation: Animation, statusBarStyle: StatusBarStyle, onDismiss: () => void) => import("@utils/gesture").Gesture;
|
|
@@ -303,18 +303,6 @@ export declare class Modal implements ComponentInterface, OverlayInterface {
|
|
|
303
303
|
* Removes passthrough styles added by setupChildRoutePassthrough.
|
|
304
304
|
*/
|
|
305
305
|
private cleanupChildRoutePassthrough;
|
|
306
|
-
/**
|
|
307
|
-
* Sets initial safe-area overrides based on modal configuration before
|
|
308
|
-
* the modal becomes visible. This predicts whether the modal will touch
|
|
309
|
-
* screen edges to avoid a visual snap after animation completes.
|
|
310
|
-
*/
|
|
311
|
-
private setInitialSafeAreaOverrides;
|
|
312
|
-
/**
|
|
313
|
-
* Updates safe-area CSS variable overrides based on whether the modal
|
|
314
|
-
* is touching each edge of the viewport. This is called after animation
|
|
315
|
-
* and during gestures to handle dynamic position changes.
|
|
316
|
-
*/
|
|
317
|
-
private updateSafeAreaOverrides;
|
|
318
306
|
private sheetOnDismiss;
|
|
319
307
|
/**
|
|
320
308
|
* Dismiss the modal overlay after it has been presented.
|
package/hydrate/index.js
CHANGED
|
@@ -21533,7 +21533,7 @@ const calculateSpringStep = (t) => {
|
|
|
21533
21533
|
const SwipeToCloseDefaults = {
|
|
21534
21534
|
MIN_PRESENTING_SCALE: 0.915,
|
|
21535
21535
|
};
|
|
21536
|
-
const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss
|
|
21536
|
+
const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) => {
|
|
21537
21537
|
/**
|
|
21538
21538
|
* The step value at which a card modal
|
|
21539
21539
|
* is eligible for dismissing via gesture.
|
|
@@ -21690,8 +21690,6 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onG
|
|
|
21690
21690
|
const processedStep = isAttemptingDismissWithCanDismiss ? calculateSpringStep(step / maxStep) : step;
|
|
21691
21691
|
const clampedStep = clamp(0.0001, processedStep, maxStep);
|
|
21692
21692
|
animation.progressStep(clampedStep);
|
|
21693
|
-
// Notify modal of position change for safe-area updates
|
|
21694
|
-
onGestureMove === null || onGestureMove === void 0 ? void 0 : onGestureMove();
|
|
21695
21693
|
/**
|
|
21696
21694
|
* When swiping down half way, the status bar style
|
|
21697
21695
|
* should be reset to its default value.
|
|
@@ -22235,7 +22233,7 @@ const mdLeaveAnimation$2 = (baseEl, opts) => {
|
|
|
22235
22233
|
return baseAnimation;
|
|
22236
22234
|
};
|
|
22237
22235
|
|
|
22238
|
-
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange
|
|
22236
|
+
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
|
|
22239
22237
|
// Defaults for the sheet swipe animation
|
|
22240
22238
|
const defaultBackdrop = [
|
|
22241
22239
|
{ offset: 0, opacity: 'var(--backdrop-opacity)' },
|
|
@@ -22566,8 +22564,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
22566
22564
|
: step;
|
|
22567
22565
|
offset = clamp(0.0001, processedStep, maxStep);
|
|
22568
22566
|
animation.progressStep(offset);
|
|
22569
|
-
// Notify modal of position change for safe-area updates
|
|
22570
|
-
onGestureMove === null || onGestureMove === void 0 ? void 0 : onGestureMove();
|
|
22571
22567
|
};
|
|
22572
22568
|
const onEnd = (detail) => {
|
|
22573
22569
|
/**
|
|
@@ -22762,9 +22758,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
22762
22758
|
};
|
|
22763
22759
|
};
|
|
22764
22760
|
|
|
22765
|
-
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
22761
|
+
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
22766
22762
|
|
|
22767
|
-
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
22763
|
+
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
22768
22764
|
|
|
22769
22765
|
// TODO(FW-2832): types
|
|
22770
22766
|
/**
|
|
@@ -22987,9 +22983,7 @@ class Modal {
|
|
|
22987
22983
|
}
|
|
22988
22984
|
}
|
|
22989
22985
|
onWindowResize() {
|
|
22990
|
-
//
|
|
22991
|
-
this.updateSafeAreaOverrides();
|
|
22992
|
-
// Only handle view transition for iOS card modals when no custom animations are provided
|
|
22986
|
+
// Only handle resize for iOS card modals when no custom animations are provided
|
|
22993
22987
|
if (getIonMode$1(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
|
|
22994
22988
|
return;
|
|
22995
22989
|
}
|
|
@@ -23171,8 +23165,6 @@ class Modal {
|
|
|
23171
23165
|
else if (!this.keepContentsMounted) {
|
|
23172
23166
|
await waitForMount();
|
|
23173
23167
|
}
|
|
23174
|
-
// Predict safe-area needs based on modal configuration to avoid visual snap
|
|
23175
|
-
this.setInitialSafeAreaOverrides(presentingElement);
|
|
23176
23168
|
writeTask(() => this.el.classList.add('show-modal'));
|
|
23177
23169
|
const hasCardModal = presentingElement !== undefined;
|
|
23178
23170
|
/**
|
|
@@ -23234,8 +23226,6 @@ class Modal {
|
|
|
23234
23226
|
else if (hasCardModal) {
|
|
23235
23227
|
this.initSwipeToClose();
|
|
23236
23228
|
}
|
|
23237
|
-
// Now that animation is complete, update safe-area based on actual position
|
|
23238
|
-
this.updateSafeAreaOverrides();
|
|
23239
23229
|
// Initialize view transition listener for iOS card modals
|
|
23240
23230
|
this.initViewTransitionListener();
|
|
23241
23231
|
// Initialize parent removal observer
|
|
@@ -23287,7 +23277,7 @@ class Modal {
|
|
|
23287
23277
|
await this.dismiss(undefined, GESTURE);
|
|
23288
23278
|
this.gestureAnimationDismissing = false;
|
|
23289
23279
|
});
|
|
23290
|
-
}
|
|
23280
|
+
});
|
|
23291
23281
|
this.gesture.enable(true);
|
|
23292
23282
|
}
|
|
23293
23283
|
initSheetGesture() {
|
|
@@ -23308,8 +23298,7 @@ class Modal {
|
|
|
23308
23298
|
this.currentBreakpoint = breakpoint;
|
|
23309
23299
|
this.ionBreakpointDidChange.emit({ breakpoint });
|
|
23310
23300
|
}
|
|
23311
|
-
|
|
23312
|
-
}, () => this.updateSafeAreaOverrides());
|
|
23301
|
+
});
|
|
23313
23302
|
this.gesture = gesture;
|
|
23314
23303
|
this.moveSheetToBreakpoint = moveSheetToBreakpoint;
|
|
23315
23304
|
this.gesture.enable(true);
|
|
@@ -23387,76 +23376,6 @@ class Modal {
|
|
|
23387
23376
|
// Clear the cached reference
|
|
23388
23377
|
this.cachedPageParent = undefined;
|
|
23389
23378
|
}
|
|
23390
|
-
/**
|
|
23391
|
-
* Sets initial safe-area overrides based on modal configuration before
|
|
23392
|
-
* the modal becomes visible. This predicts whether the modal will touch
|
|
23393
|
-
* screen edges to avoid a visual snap after animation completes.
|
|
23394
|
-
*/
|
|
23395
|
-
setInitialSafeAreaOverrides(presentingElement) {
|
|
23396
|
-
const style = this.el.style;
|
|
23397
|
-
const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
|
|
23398
|
-
const isCardModal = presentingElement !== undefined;
|
|
23399
|
-
const isTablet = window.innerWidth >= 768;
|
|
23400
|
-
// Sheet modals: always touch bottom, top depends on breakpoint
|
|
23401
|
-
if (isSheetModal) {
|
|
23402
|
-
style.setProperty('--ion-safe-area-top', '0px');
|
|
23403
|
-
// Don't override bottom - sheet always touches bottom
|
|
23404
|
-
style.setProperty('--ion-safe-area-left', '0px');
|
|
23405
|
-
style.setProperty('--ion-safe-area-right', '0px');
|
|
23406
|
-
return;
|
|
23407
|
-
}
|
|
23408
|
-
// Card modals are inset from edges (rounded corners), no safe areas needed
|
|
23409
|
-
if (isCardModal) {
|
|
23410
|
-
style.setProperty('--ion-safe-area-top', '0px');
|
|
23411
|
-
style.setProperty('--ion-safe-area-bottom', '0px');
|
|
23412
|
-
style.setProperty('--ion-safe-area-left', '0px');
|
|
23413
|
-
style.setProperty('--ion-safe-area-right', '0px');
|
|
23414
|
-
return;
|
|
23415
|
-
}
|
|
23416
|
-
// Phone modals are fullscreen, need all safe areas
|
|
23417
|
-
if (!isTablet) {
|
|
23418
|
-
// Don't set any overrides - inherit from :root
|
|
23419
|
-
return;
|
|
23420
|
-
}
|
|
23421
|
-
// Default tablet modal: centered dialog, no safe areas needed
|
|
23422
|
-
// Check for fullscreen override via CSS custom properties
|
|
23423
|
-
const computedStyle = getComputedStyle(this.el);
|
|
23424
|
-
const width = computedStyle.getPropertyValue('--width').trim();
|
|
23425
|
-
const height = computedStyle.getPropertyValue('--height').trim();
|
|
23426
|
-
if (width === '100%' && height === '100%') {
|
|
23427
|
-
// Fullscreen modal - need safe areas, don't override
|
|
23428
|
-
return;
|
|
23429
|
-
}
|
|
23430
|
-
// Centered dialog - zero out all safe areas
|
|
23431
|
-
style.setProperty('--ion-safe-area-top', '0px');
|
|
23432
|
-
style.setProperty('--ion-safe-area-bottom', '0px');
|
|
23433
|
-
style.setProperty('--ion-safe-area-left', '0px');
|
|
23434
|
-
style.setProperty('--ion-safe-area-right', '0px');
|
|
23435
|
-
}
|
|
23436
|
-
/**
|
|
23437
|
-
* Updates safe-area CSS variable overrides based on whether the modal
|
|
23438
|
-
* is touching each edge of the viewport. This is called after animation
|
|
23439
|
-
* and during gestures to handle dynamic position changes.
|
|
23440
|
-
*/
|
|
23441
|
-
updateSafeAreaOverrides() {
|
|
23442
|
-
const wrapper = this.wrapperEl;
|
|
23443
|
-
if (!wrapper)
|
|
23444
|
-
return;
|
|
23445
|
-
const rect = wrapper.getBoundingClientRect();
|
|
23446
|
-
const threshold = 2; // Account for subpixel rendering
|
|
23447
|
-
const touchingTop = rect.top <= threshold;
|
|
23448
|
-
const touchingBottom = rect.bottom >= window.innerHeight - threshold;
|
|
23449
|
-
const touchingLeft = rect.left <= threshold;
|
|
23450
|
-
const touchingRight = rect.right >= window.innerWidth - threshold;
|
|
23451
|
-
// Remove override when touching edge (allow inheritance), set to 0 when not touching
|
|
23452
|
-
const style = this.el.style;
|
|
23453
|
-
touchingTop ? style.removeProperty('--ion-safe-area-top') : style.setProperty('--ion-safe-area-top', '0px');
|
|
23454
|
-
touchingBottom
|
|
23455
|
-
? style.removeProperty('--ion-safe-area-bottom')
|
|
23456
|
-
: style.setProperty('--ion-safe-area-bottom', '0px');
|
|
23457
|
-
touchingLeft ? style.removeProperty('--ion-safe-area-left') : style.setProperty('--ion-safe-area-left', '0px');
|
|
23458
|
-
touchingRight ? style.removeProperty('--ion-safe-area-right') : style.setProperty('--ion-safe-area-right', '0px');
|
|
23459
|
-
}
|
|
23460
23379
|
sheetOnDismiss() {
|
|
23461
23380
|
/**
|
|
23462
23381
|
* While the gesture animation is finishing
|
|
@@ -23630,6 +23549,10 @@ class Modal {
|
|
|
23630
23549
|
this.currentViewIsPortrait = window.innerWidth < 768;
|
|
23631
23550
|
}
|
|
23632
23551
|
handleViewTransition() {
|
|
23552
|
+
// Only run view transitions when the modal is presented
|
|
23553
|
+
if (!this.presented) {
|
|
23554
|
+
return;
|
|
23555
|
+
}
|
|
23633
23556
|
const isPortrait = window.innerWidth < 768;
|
|
23634
23557
|
// Only transition if view state actually changed
|
|
23635
23558
|
if (this.currentViewIsPortrait === isPortrait) {
|
|
@@ -23794,20 +23717,20 @@ class Modal {
|
|
|
23794
23717
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
23795
23718
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
23796
23719
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
23797
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
23720
|
+
return (hAsync(Host, Object.assign({ key: '87328006ea6c75ebc518ace300438492a567223e', "no-router": true,
|
|
23798
23721
|
// Allow the modal to be navigable when the handle is focusable
|
|
23799
23722
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
23800
23723
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
23801
|
-
}, 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 }), hAsync("ion-backdrop", { key: '
|
|
23724
|
+
}, 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 }), hAsync("ion-backdrop", { key: 'ee94ff8e09b691dd4ad4e4db1720f06bc3c5a469', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'bffd69b4635c22d9f249725bd952c1e93d5615c7', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '1d394d3c68916e464ff1fbf5242419f4a3d3cca1',
|
|
23802
23725
|
/*
|
|
23803
23726
|
role and aria-modal must be used on the
|
|
23804
23727
|
same element. They must also be set inside the
|
|
23805
23728
|
shadow DOM otherwise ion-button will not be highlighted
|
|
23806
23729
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
23807
23730
|
*/
|
|
23808
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '
|
|
23731
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '2dcf58792018e557e0c323baad2d672bc99c0bb1', class: "modal-handle",
|
|
23809
23732
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
23810
|
-
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) })), hAsync("slot", { key: '
|
|
23733
|
+
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) })), hAsync("slot", { key: '44164b1e8710c3895400ad9f44ecd99873874ad5', onSlotchange: this.onSlotChange }))));
|
|
23811
23734
|
}
|
|
23812
23735
|
get el() { return getElement(this); }
|
|
23813
23736
|
static get watchers() { return {
|
package/hydrate/index.mjs
CHANGED
|
@@ -21531,7 +21531,7 @@ const calculateSpringStep = (t) => {
|
|
|
21531
21531
|
const SwipeToCloseDefaults = {
|
|
21532
21532
|
MIN_PRESENTING_SCALE: 0.915,
|
|
21533
21533
|
};
|
|
21534
|
-
const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss
|
|
21534
|
+
const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) => {
|
|
21535
21535
|
/**
|
|
21536
21536
|
* The step value at which a card modal
|
|
21537
21537
|
* is eligible for dismissing via gesture.
|
|
@@ -21688,8 +21688,6 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onG
|
|
|
21688
21688
|
const processedStep = isAttemptingDismissWithCanDismiss ? calculateSpringStep(step / maxStep) : step;
|
|
21689
21689
|
const clampedStep = clamp(0.0001, processedStep, maxStep);
|
|
21690
21690
|
animation.progressStep(clampedStep);
|
|
21691
|
-
// Notify modal of position change for safe-area updates
|
|
21692
|
-
onGestureMove === null || onGestureMove === void 0 ? void 0 : onGestureMove();
|
|
21693
21691
|
/**
|
|
21694
21692
|
* When swiping down half way, the status bar style
|
|
21695
21693
|
* should be reset to its default value.
|
|
@@ -22233,7 +22231,7 @@ const mdLeaveAnimation$2 = (baseEl, opts) => {
|
|
|
22233
22231
|
return baseAnimation;
|
|
22234
22232
|
};
|
|
22235
22233
|
|
|
22236
|
-
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange
|
|
22234
|
+
const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
|
|
22237
22235
|
// Defaults for the sheet swipe animation
|
|
22238
22236
|
const defaultBackdrop = [
|
|
22239
22237
|
{ offset: 0, opacity: 'var(--backdrop-opacity)' },
|
|
@@ -22564,8 +22562,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
22564
22562
|
: step;
|
|
22565
22563
|
offset = clamp(0.0001, processedStep, maxStep);
|
|
22566
22564
|
animation.progressStep(offset);
|
|
22567
|
-
// Notify modal of position change for safe-area updates
|
|
22568
|
-
onGestureMove === null || onGestureMove === void 0 ? void 0 : onGestureMove();
|
|
22569
22565
|
};
|
|
22570
22566
|
const onEnd = (detail) => {
|
|
22571
22567
|
/**
|
|
@@ -22760,9 +22756,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
22760
22756
|
};
|
|
22761
22757
|
};
|
|
22762
22758
|
|
|
22763
|
-
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
22759
|
+
const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
|
|
22764
22760
|
|
|
22765
|
-
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
22761
|
+
const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
|
|
22766
22762
|
|
|
22767
22763
|
// TODO(FW-2832): types
|
|
22768
22764
|
/**
|
|
@@ -22985,9 +22981,7 @@ class Modal {
|
|
|
22985
22981
|
}
|
|
22986
22982
|
}
|
|
22987
22983
|
onWindowResize() {
|
|
22988
|
-
//
|
|
22989
|
-
this.updateSafeAreaOverrides();
|
|
22990
|
-
// Only handle view transition for iOS card modals when no custom animations are provided
|
|
22984
|
+
// Only handle resize for iOS card modals when no custom animations are provided
|
|
22991
22985
|
if (getIonMode$1(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
|
|
22992
22986
|
return;
|
|
22993
22987
|
}
|
|
@@ -23169,8 +23163,6 @@ class Modal {
|
|
|
23169
23163
|
else if (!this.keepContentsMounted) {
|
|
23170
23164
|
await waitForMount();
|
|
23171
23165
|
}
|
|
23172
|
-
// Predict safe-area needs based on modal configuration to avoid visual snap
|
|
23173
|
-
this.setInitialSafeAreaOverrides(presentingElement);
|
|
23174
23166
|
writeTask(() => this.el.classList.add('show-modal'));
|
|
23175
23167
|
const hasCardModal = presentingElement !== undefined;
|
|
23176
23168
|
/**
|
|
@@ -23232,8 +23224,6 @@ class Modal {
|
|
|
23232
23224
|
else if (hasCardModal) {
|
|
23233
23225
|
this.initSwipeToClose();
|
|
23234
23226
|
}
|
|
23235
|
-
// Now that animation is complete, update safe-area based on actual position
|
|
23236
|
-
this.updateSafeAreaOverrides();
|
|
23237
23227
|
// Initialize view transition listener for iOS card modals
|
|
23238
23228
|
this.initViewTransitionListener();
|
|
23239
23229
|
// Initialize parent removal observer
|
|
@@ -23285,7 +23275,7 @@ class Modal {
|
|
|
23285
23275
|
await this.dismiss(undefined, GESTURE);
|
|
23286
23276
|
this.gestureAnimationDismissing = false;
|
|
23287
23277
|
});
|
|
23288
|
-
}
|
|
23278
|
+
});
|
|
23289
23279
|
this.gesture.enable(true);
|
|
23290
23280
|
}
|
|
23291
23281
|
initSheetGesture() {
|
|
@@ -23306,8 +23296,7 @@ class Modal {
|
|
|
23306
23296
|
this.currentBreakpoint = breakpoint;
|
|
23307
23297
|
this.ionBreakpointDidChange.emit({ breakpoint });
|
|
23308
23298
|
}
|
|
23309
|
-
|
|
23310
|
-
}, () => this.updateSafeAreaOverrides());
|
|
23299
|
+
});
|
|
23311
23300
|
this.gesture = gesture;
|
|
23312
23301
|
this.moveSheetToBreakpoint = moveSheetToBreakpoint;
|
|
23313
23302
|
this.gesture.enable(true);
|
|
@@ -23385,76 +23374,6 @@ class Modal {
|
|
|
23385
23374
|
// Clear the cached reference
|
|
23386
23375
|
this.cachedPageParent = undefined;
|
|
23387
23376
|
}
|
|
23388
|
-
/**
|
|
23389
|
-
* Sets initial safe-area overrides based on modal configuration before
|
|
23390
|
-
* the modal becomes visible. This predicts whether the modal will touch
|
|
23391
|
-
* screen edges to avoid a visual snap after animation completes.
|
|
23392
|
-
*/
|
|
23393
|
-
setInitialSafeAreaOverrides(presentingElement) {
|
|
23394
|
-
const style = this.el.style;
|
|
23395
|
-
const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
|
|
23396
|
-
const isCardModal = presentingElement !== undefined;
|
|
23397
|
-
const isTablet = window.innerWidth >= 768;
|
|
23398
|
-
// Sheet modals: always touch bottom, top depends on breakpoint
|
|
23399
|
-
if (isSheetModal) {
|
|
23400
|
-
style.setProperty('--ion-safe-area-top', '0px');
|
|
23401
|
-
// Don't override bottom - sheet always touches bottom
|
|
23402
|
-
style.setProperty('--ion-safe-area-left', '0px');
|
|
23403
|
-
style.setProperty('--ion-safe-area-right', '0px');
|
|
23404
|
-
return;
|
|
23405
|
-
}
|
|
23406
|
-
// Card modals are inset from edges (rounded corners), no safe areas needed
|
|
23407
|
-
if (isCardModal) {
|
|
23408
|
-
style.setProperty('--ion-safe-area-top', '0px');
|
|
23409
|
-
style.setProperty('--ion-safe-area-bottom', '0px');
|
|
23410
|
-
style.setProperty('--ion-safe-area-left', '0px');
|
|
23411
|
-
style.setProperty('--ion-safe-area-right', '0px');
|
|
23412
|
-
return;
|
|
23413
|
-
}
|
|
23414
|
-
// Phone modals are fullscreen, need all safe areas
|
|
23415
|
-
if (!isTablet) {
|
|
23416
|
-
// Don't set any overrides - inherit from :root
|
|
23417
|
-
return;
|
|
23418
|
-
}
|
|
23419
|
-
// Default tablet modal: centered dialog, no safe areas needed
|
|
23420
|
-
// Check for fullscreen override via CSS custom properties
|
|
23421
|
-
const computedStyle = getComputedStyle(this.el);
|
|
23422
|
-
const width = computedStyle.getPropertyValue('--width').trim();
|
|
23423
|
-
const height = computedStyle.getPropertyValue('--height').trim();
|
|
23424
|
-
if (width === '100%' && height === '100%') {
|
|
23425
|
-
// Fullscreen modal - need safe areas, don't override
|
|
23426
|
-
return;
|
|
23427
|
-
}
|
|
23428
|
-
// Centered dialog - zero out all safe areas
|
|
23429
|
-
style.setProperty('--ion-safe-area-top', '0px');
|
|
23430
|
-
style.setProperty('--ion-safe-area-bottom', '0px');
|
|
23431
|
-
style.setProperty('--ion-safe-area-left', '0px');
|
|
23432
|
-
style.setProperty('--ion-safe-area-right', '0px');
|
|
23433
|
-
}
|
|
23434
|
-
/**
|
|
23435
|
-
* Updates safe-area CSS variable overrides based on whether the modal
|
|
23436
|
-
* is touching each edge of the viewport. This is called after animation
|
|
23437
|
-
* and during gestures to handle dynamic position changes.
|
|
23438
|
-
*/
|
|
23439
|
-
updateSafeAreaOverrides() {
|
|
23440
|
-
const wrapper = this.wrapperEl;
|
|
23441
|
-
if (!wrapper)
|
|
23442
|
-
return;
|
|
23443
|
-
const rect = wrapper.getBoundingClientRect();
|
|
23444
|
-
const threshold = 2; // Account for subpixel rendering
|
|
23445
|
-
const touchingTop = rect.top <= threshold;
|
|
23446
|
-
const touchingBottom = rect.bottom >= window.innerHeight - threshold;
|
|
23447
|
-
const touchingLeft = rect.left <= threshold;
|
|
23448
|
-
const touchingRight = rect.right >= window.innerWidth - threshold;
|
|
23449
|
-
// Remove override when touching edge (allow inheritance), set to 0 when not touching
|
|
23450
|
-
const style = this.el.style;
|
|
23451
|
-
touchingTop ? style.removeProperty('--ion-safe-area-top') : style.setProperty('--ion-safe-area-top', '0px');
|
|
23452
|
-
touchingBottom
|
|
23453
|
-
? style.removeProperty('--ion-safe-area-bottom')
|
|
23454
|
-
: style.setProperty('--ion-safe-area-bottom', '0px');
|
|
23455
|
-
touchingLeft ? style.removeProperty('--ion-safe-area-left') : style.setProperty('--ion-safe-area-left', '0px');
|
|
23456
|
-
touchingRight ? style.removeProperty('--ion-safe-area-right') : style.setProperty('--ion-safe-area-right', '0px');
|
|
23457
|
-
}
|
|
23458
23377
|
sheetOnDismiss() {
|
|
23459
23378
|
/**
|
|
23460
23379
|
* While the gesture animation is finishing
|
|
@@ -23628,6 +23547,10 @@ class Modal {
|
|
|
23628
23547
|
this.currentViewIsPortrait = window.innerWidth < 768;
|
|
23629
23548
|
}
|
|
23630
23549
|
handleViewTransition() {
|
|
23550
|
+
// Only run view transitions when the modal is presented
|
|
23551
|
+
if (!this.presented) {
|
|
23552
|
+
return;
|
|
23553
|
+
}
|
|
23631
23554
|
const isPortrait = window.innerWidth < 768;
|
|
23632
23555
|
// Only transition if view state actually changed
|
|
23633
23556
|
if (this.currentViewIsPortrait === isPortrait) {
|
|
@@ -23792,20 +23715,20 @@ class Modal {
|
|
|
23792
23715
|
const isCardModal = presentingElement !== undefined && mode === 'ios';
|
|
23793
23716
|
const isHandleCycle = handleBehavior === 'cycle';
|
|
23794
23717
|
const isSheetModalWithHandle = isSheetModal && showHandle;
|
|
23795
|
-
return (hAsync(Host, Object.assign({ key: '
|
|
23718
|
+
return (hAsync(Host, Object.assign({ key: '87328006ea6c75ebc518ace300438492a567223e', "no-router": true,
|
|
23796
23719
|
// Allow the modal to be navigable when the handle is focusable
|
|
23797
23720
|
tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
|
|
23798
23721
|
zIndex: `${20000 + this.overlayIndex}`,
|
|
23799
|
-
}, 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 }), hAsync("ion-backdrop", { key: '
|
|
23722
|
+
}, 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 }), hAsync("ion-backdrop", { key: 'ee94ff8e09b691dd4ad4e4db1720f06bc3c5a469', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'bffd69b4635c22d9f249725bd952c1e93d5615c7', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '1d394d3c68916e464ff1fbf5242419f4a3d3cca1',
|
|
23800
23723
|
/*
|
|
23801
23724
|
role and aria-modal must be used on the
|
|
23802
23725
|
same element. They must also be set inside the
|
|
23803
23726
|
shadow DOM otherwise ion-button will not be highlighted
|
|
23804
23727
|
when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
|
|
23805
23728
|
*/
|
|
23806
|
-
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '
|
|
23729
|
+
role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '2dcf58792018e557e0c323baad2d672bc99c0bb1', class: "modal-handle",
|
|
23807
23730
|
// Prevents the handle from receiving keyboard focus when it does not cycle
|
|
23808
|
-
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) })), hAsync("slot", { key: '
|
|
23731
|
+
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) })), hAsync("slot", { key: '44164b1e8710c3895400ad9f44ecd99873874ad5', onSlotchange: this.onSlotChange }))));
|
|
23809
23732
|
}
|
|
23810
23733
|
get el() { return getElement(this); }
|
|
23811
23734
|
static get watchers() { return {
|