1import { 2 createLockController 3} from "./chunk-FOMEZ63H.js"; 4import { 5 disableContentScrollY, 6 findClosestIonContent, 7 findIonContent, 8 isIonContent, 9 printIonContentErrorMsg, 10 resetContentScrollY 11} from "./chunk-ALSNOEG3.js"; 12import { 13 KEYBOARD_DID_OPEN 14} from "./chunk-2WACTY4V.js"; 15import "./chunk-Q535AENF.js"; 16import { 17 getCapacitor 18} from "./chunk-TECVDSEG.js"; 19import { 20 deepReady, 21 waitForMount 22} from "./chunk-7WVISTDL.js"; 23import { 24 getTimeGivenProgression 25} from "./chunk-2S57T3GS.js"; 26import { 27 BACKDROP, 28 FOCUS_TRAP_DISABLE_CLASS, 29 GESTURE, 30 OVERLAY_GESTURE_PRIORITY, 31 createTriggerController, 32 dismiss, 33 eventMethod, 34 prepareOverlay, 35 present, 36 setOverlayId 37} from "./chunk-4MEJEBWM.js"; 38import { 39 createAnimation 40} from "./chunk-RIBVNXHQ.js"; 41import { 42 CoreDelegate, 43 attachComponent, 44 detachComponent 45} from "./chunk-Z42OVMMO.js"; 46import { 47 getClassMap 48} from "./chunk-O5S42IXR.js"; 49import "./chunk-QBR2RTFG.js"; 50import { 51 win 52} from "./chunk-MIOLVGSM.js"; 53import { 54 printIonWarning 55} from "./chunk-ITE2OHLM.js"; 56import { 57 config, 58 getIonMode 59} from "./chunk-C46CB72A.js"; 60import { 61 Host, 62 createEvent, 63 getElement, 64 h, 65 registerInstance, 66 writeTask 67} from "./chunk-SRPSML5O.js"; 68import { 69 clamp, 70 getElementRoot, 71 hasLazyBuild, 72 inheritAttributes, 73 raf 74} from "./chunk-NRSVX4KN.js"; 75import { 76 createGesture 77} from "./chunk-T4GYAOTA.js"; 78import "./chunk-2VHYZHLL.js"; 79import { 80 __async 81} from "./chunk-CO64IJQE.js"; 82 83// node_modules/@ionic/core/dist/esm/ion-modal.entry.js 84var Style; 85(function(Style2) { 86 Style2["Dark"] = "DARK"; 87 Style2["Light"] = "LIGHT"; 88 Style2["Default"] = "DEFAULT"; 89})(Style || (Style = {})); 90var StatusBar = { 91 getEngine() { 92 const capacitor = getCapacitor(); 93 if (capacitor === null || capacitor === void 0 ? void 0 : capacitor.isPluginAvailable("StatusBar")) { 94 return capacitor.Plugins.StatusBar; 95 } 96 return void 0; 97 }, 98 setStyle(options) { 99 const engine = this.getEngine(); 100 if (!engine) { 101 return; 102 } 103 engine.setStyle(options); 104 }, 105 getStyle: function() { 106 return __async(this, null, function* () { 107 const engine = this.getEngine(); 108 if (!engine) { 109 return Style.Default; 110 } 111 const { 112 style 113 } = yield engine.getInfo(); 114 return style; 115 }); 116 } 117}; 118var getBackdropValueForSheet = (x, backdropBreakpoint) => { 119 if (backdropBreakpoint === 1) { 120 return 0; 121 } 122 const slope = 1 / (1 - backdropBreakpoint); 123 const b = -(backdropBreakpoint * slope); 124 return x * slope + b; 125}; 126var setCardStatusBarDark = () => { 127 if (!win || win.innerWidth >= 768) { 128 return; 129 } 130 StatusBar.setStyle({ 131 style: Style.Dark 132 }); 133}; 134var setCardStatusBarDefault = (defaultStyle = Style.Default) => { 135 if (!win || win.innerWidth >= 768) { 136 return; 137 } 138 StatusBar.setStyle({ 139 style: defaultStyle 140 }); 141}; 142var handleCanDismiss = (el, animation) => __async(void 0, null, function* () { 143 if (typeof el.canDismiss !== "function") { 144 return; 145 } 146 const shouldDismiss = yield el.canDismiss(void 0, GESTURE); 147 if (!shouldDismiss) { 148 return; 149 } 150 if (animation.isRunning()) { 151 animation.onFinish(() => { 152 el.dismiss(void 0, "handler"); 153 }, { 154 oneTimeCallback: true 155 }); 156 } else { 157 el.dismiss(void 0, "handler"); 158 } 159}); 160var calculateSpringStep = (t) => { 161 return 255275e-8 * 2.71828 ** (-14.9619 * t) - 1.00255 * 2.71828 ** (-0.0380968 * t) + 1; 162}; 163var SwipeToCloseDefaults = { 164 MIN_PRESENTING_SCALE: 0.915 165}; 166var createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) => { 167 const DISMISS_THRESHOLD = 0.5; 168 const height = el.offsetHeight; 169 let isOpen = false; 170 let canDismissBlocksGesture = false; 171 let contentEl = null; 172 let scrollEl = null; 173 const canDismissMaxStep = 0.2; 174 let initialScrollY = true; 175 let lastStep = 0; 176 const getScrollY = () => { 177 if (contentEl && isIonContent(contentEl)) { 178 return contentEl.scrollY; 179 } else { 180 return true; 181 } 182 }; 183 const canStart = (detail) => { 184 const target = detail.event.target; 185 if (target === null || !target.closest) { 186 return true; 187 } 188 contentEl = findClosestIonContent(target); 189 if (contentEl) { 190 if (isIonContent(contentEl)) { 191 const root = getElementRoot(contentEl); 192 scrollEl = root.querySelector(".inner-scroll"); 193 } else { 194 scrollEl = contentEl; 195 } 196 const hasRefresherInContent = !!contentEl.querySelector("ion-refresher"); 197 return !hasRefresherInContent && scrollEl.scrollTop === 0; 198 } 199 const footer = target.closest("ion-footer"); 200 if (footer === null) { 201 return true; 202 } 203 return false;
204 }; 205 const onStart = (detail) => { 206 const { 207 deltaY 208 } = detail; 209 initialScrollY = getScrollY(); 210 canDismissBlocksGesture = el.canDismiss !== void 0 && el.canDismiss !== true; 211 if (deltaY > 0 && contentEl) { 212 disableContentScrollY(contentEl); 213 } 214 animation.progressStart(true, isOpen ? 1 : 0); 215 }; 216 const onMove = (detail) => { 217 const { 218 deltaY 219 } = detail; 220 if (deltaY > 0 && contentEl) { 221 disableContentScrollY(contentEl); 222 } 223 const step = detail.deltaY / height; 224 const isAttemptingDismissWithCanDismiss = step >= 0 && canDismissBlocksGesture; 225 const maxStep = isAttemptingDismissWithCanDismiss ? canDismissMaxStep : 0.9999; 226 const processedStep = isAttemptingDismissWithCanDismiss ? calculateSpringStep(step / maxStep) : step; 227 const clampedStep = clamp(1e-4, processedStep, maxStep); 228 animation.progressStep(clampedStep); 229 if (clampedStep >= DISMISS_THRESHOLD && lastStep < DISMISS_THRESHOLD) { 230 setCardStatusBarDefault(statusBarStyle); 231 } else if (clampedStep < DISMISS_THRESHOLD && lastStep >= DISMISS_THRESHOLD) { 232 setCardStatusBarDark(); 233 } 234 lastStep = clampedStep; 235 }; 236 const onEnd = (detail) => { 237 const velocity = detail.velocityY; 238 const step = detail.deltaY / height; 239 const isAttemptingDismissWithCanDismiss = step >= 0 && canDismissBlocksGesture; 240 const maxStep = isAttemptingDismissWithCanDismiss ? canDismissMaxStep : 0.9999; 241 const processedStep = isAttemptingDismissWithCanDismiss ? calculateSpringStep(step / maxStep) : step; 242 const clampedStep = clamp(1e-4, processedStep, maxStep); 243 const threshold = (detail.deltaY + velocity * 1e3) / height; 244 const shouldComplete = !isAttemptingDismissWithCanDismiss && threshold >= DISMISS_THRESHOLD; 245 let newStepValue = shouldComplete ? -1e-3 : 1e-3; 246 if (!shouldComplete) { 247 animation.easing("cubic-bezier(1, 0, 0.68, 0.28)"); 248 newStepValue += getTimeGivenProgression([0, 0], [1, 0], [0.68, 0.28], [1, 1], clampedStep)[0]; 249 } else { 250 animation.easing("cubic-bezier(0.32, 0.72, 0, 1)"); 251 newStepValue += getTimeGivenProgression([0, 0], [0.32, 0.72], [0, 1], [1, 1], clampedStep)[0]; 252 } 253 const duration = shouldComplete ? computeDuration(step * height, velocity) : computeDuration((1 - clampedStep) * height, velocity); 254 isOpen = shouldComplete; 255 gesture.enable(false); 256 if (contentEl) { 257 resetContentScrollY(contentEl, initialScrollY); 258 } 259 animation.onFinish(() => { 260 if (!shouldComplete) { 261 gesture.enable(true); 262 } 263 }).progressEnd(shouldComplete ? 1 : 0, newStepValue, duration); 264 if (isAttemptingDismissWithCanDismiss && clampedStep > maxStep / 4) { 265 handleCanDismiss(el, animation); 266 } else if (shouldComplete) { 267 onDismiss(); 268 } 269 }; 270 const gesture = createGesture({ 271 el, 272 gestureName: "modalSwipeToClose", 273 gesturePriority: OVERLAY_GESTURE_PRIORITY, 274 direction: "y", 275 threshold: 10, 276 canStart, 277 onStart, 278 onMove, 279 onEnd 280 }); 281 return gesture; 282}; 283var computeDuration = (remaining, velocity) => { 284 return clamp(400, remaining / Math.abs(velocity * 1.1), 500); 285}; 286var createSheetEnterAnimation = (opts) => { 287 const { 288 currentBreakpoint, 289 backdropBreakpoint, 290 expandToScroll 291 } = opts; 292 const shouldShowBackdrop = backdropBreakpoint === void 0 || backdropBreakpoint < currentBreakpoint; 293 const initialBackdrop = shouldShowBackdrop ? `calc(var(--backdrop-opacity) * ${currentBreakpoint})` : "0"; 294 const backdropAnimation = createAnimation("backdropAnimation").fromTo("opacity", 0, initialBackdrop); 295 if (shouldShowBackdrop) { 296 backdropAnimation.beforeStyles({ 297 "pointer-events": "none" 298 }).afterClearStyles(["pointer-events"]); 299 } 300 const wrapperAnimation = createAnimation("wrapperAnimation").keyframes([{ 301 offset: 0, 302 opacity: 1, 303 transform: "translateY(100%)" 304 }, { 305 offset: 1, 306 opacity: 1, 307 transform: `translateY(${100 - currentBreakpoint * 100}%)` 308 }]); 309 const contentAnimation = !expandToScroll ? createAnimation("contentAnimation").keyframes([{ 310 offset: 0, 311 opacity: 1, 312 maxHeight: `${(1 - currentBreakpoint) * 100}%` 313 }, { 314 offset: 1, 315 opacity: 1, 316 maxHeight: `${currentBreakpoint * 100}%` 317 }]) : void 0; 318 return { 319 wrapperAnimation, 320 backdropAnimation, 321 contentAnimation 322 }; 323}; 324var createSheetLeaveAnimation = (opts) => { 325 const { 326 currentBreakpoint, 327 backdropBreakpoint 328 } = opts; 329 const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint, backdropBreakpoint)})`; 330 const defaultBackdrop = [{ 331 offset: 0, 332 opacity: backdropValue 333 }, { 334 offset: 1, 335 opacity: 0 336 }]; 337 const customBackdrop = [{ 338 offset: 0, 339 opacity: backdropValue 340 }, { 341 offset: backdropBreakpoint, 342 opacity: 0 343 }, { 344 offset: 1, 345 opacity: 0 346 }]; 347 const backdropAnimation = createAnimation("backdropAnimation").keyframes(backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop); 348 const wrapperAnimation = createAnimation("wrapperAnimation").keyframes([{ 349 offset: 0, 350 opacity: 1, 351 transform: `translateY(${100 - currentBreakpoint * 100}%)` 352 }, { 353 offset: 1, 354 opacity: 1, 355 transform: `translateY(100%)` 356 }]); 357 return { 358 wrapperAnimation, 359 backdropAnimation 360 }; 361}; 362var createEnterAnimation$1 = () => { 363 const backdropAnimation = createAnimation().fromTo("opacity", 0.01, "var(--backdrop-opacity)").beforeStyles({ 364 "pointer-events": "none" 365 }).afterClearStyles(["pointer-events"]); 366 const wrapperAnimation = createAnimation().fromTo("transform", "translateY(100vh)", "translateY(0vh)"); 367 return { 368 backdropAnimation, 369 wrapperAnimation, 370 contentAnimation: void 0 371 }; 372}; 373var iosEnterAnimation = (baseEl, opts) => { 374 const { 375 presentingEl, 376 currentBreakpoint, 377 expandToScroll 378 } = opts; 379 const root = getElementRoot(baseEl); 380 const { 381 wrapperAnimation, 382 backdropAnimation, 383 contentAnimation 384 } = currentBreakpoint !== void 0 ? createSheetEnterAnimation(opts) : createEnterAnimation$1(); 385 backdropAnimation.addElement(root.querySelector("ion-backdrop")); 386 wrapperAnimation.addElement(root.querySelectorAll(".modal-wrapper, .modal-shadow")).beforeStyles({ 387 opacity: 1 388 }); 389 !expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector(".ion-page"))); 390 const baseAnimation = createAnimation("entering-base").addElement(baseEl).easing("cubic-bezier(0.32,0.72,0,1)").duration(500).addAnimation([wrapperAnimation]).beforeAddWrite(() => { 391 if (expandToScroll) { 392 return; 393 } 394 const ionFooter = baseEl.querySelector("ion-footer"); 395 const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector("ion-footer"); 396 if (ionFooter && !ionFooterAlreadyAppended) { 397 const footerHeight = ionFooter.clientHeight; 398 const clonedFooter = ionFooter.cloneNode(true); 399 baseEl.shadowRoot.appendChild(clonedFooter); 400 ionFooter.style.setProperty("display", "none"); 401 ionFooter.setAttribute("aria-hidden", "true"); 402 const page = baseEl.querySelector(".ion-page"); 403 page.style.setProperty("padding-bottom", `${footerHeight}px`); 404 } 405 }); 406 if (contentAnimation) { 407 baseAnimation.addAnimation(contentAnimation); 408 } 409 if (presentingEl) { 410 const isMobile = window.innerWidth < 768; 411 const hasCardModal = presentingEl.tagName === "ION-MODAL" && presentingEl.presentingElement !== void 0; 412 const presentingElRoot = getElementRoot(presentingEl); 413 const presentingAnimation = createAnimation().beforeStyles({ 414 transform: "translateY(0)", 415 "transform-origin": "top center", 416 overflow: "hidden" 417 }); 418 const bodyEl = document.body; 419 if (isMobile) { 420 const transformOffset = !CSS.supports("width", "max(0px, 1px)") ? "30px" : "max(30px, var(--ion-safe-area-top))"; 421 const modalTransform = hasCardModal ? "-10px" : transformOffset; 422 const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE; 423 const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`; 424 presentingAnimation.afterStyles({ 425 transform: finalTransform 426 }).beforeAddWrite(() => bodyEl.style.setProperty("background-color", "black")).addElement(presentingEl).keyframes([{ 427 offset: 0, 428 filter: "contrast(1)", 429 transform: "translateY(0px) scale(1)", 430 borderRadius: "0px" 431 }, { 432 offset: 1, 433 filter: "contrast(0.85)", 434 transform: finalTransform, 435 borderRadius: "10px 10px 0 0" 436 }]); 437 baseAnimation.addAnimation(presentingAnimation); 438 } else { 439 baseAnimation.addAnimation(backdropAnimation); 440 if (!hasCardModal) { 441 wrapperAnimation.fromTo("opacity", "0", "1"); 442 } else { 443 const toPresentingScale = hasCardModal ? SwipeToCloseDefaults.MIN_PRESENTING_SCALE : 1; 444 const finalTransform = `translateY(-10px) scale(${toPresentingScale})`; 445 presentingAnimation.afterStyles({ 446 transform: finalTransform 447 }).addElement(presentingElRoot.querySelector(".modal-wrapper")).keyframes([{ 448 offset: 0, 449 filter: "contrast(1)", 450 transform: "translateY(0) scale(1)" 451 }, { 452 offset: 1, 453 filter: "contrast(0.85)", 454 transform: finalTransform 455 }]); 456 const shadowAnimation = createAnimation().afterStyles({ 457 transform: finalTransform 458 }).addElement(presentingElRoot.querySelector(".modal-shadow")).keyframes([{ 459 offset: 0, 460 opacity: "1", 461 transform: "translateY(0) scale(1)" 462 }, { 463 offset: 1, 464 opacity: "0", 465 transform: finalTransform 466 }]); 467 baseAnimation.addAnimation([presentingAnimation, shadowAnimation]); 468 } 469 } 470 } else { 471 baseAnimation.addAnimation(backdropAnimation); 472 } 473 return baseAnimation; 474}; 475var createLeaveAnimation$1 = () => { 476 const backdropAnimation = createAnimation().fromTo("opacity", "var(--backdrop-opacity)", 0); 477 const wrapperAnimation = createAnimation().fromTo("transform", "translateY(0vh)", "translateY(100vh)"); 478 return { 479 backdropAnimation, 480 wrapperAnimation 481 }; 482}; 483var iosLeaveAnimation = (baseEl, opts, duration = 500) => { 484 const { 485 presentingEl, 486 currentBreakpoint, 487 expandToScroll 488 } = opts; 489 const root = getElementRoot(baseEl); 490 const { 491 wrapperAnimation, 492 backdropAnimation 493 } = currentBreakpoint !== void 0 ? createSheetLeaveAnimation(opts) : createLeaveAnimation$1(); 494 backdropAnimation.addElement(root.querySelector("ion-backdrop")); 495 wrapperAnimation.addElement(root.querySelectorAll(".modal-wrapper, .modal-shadow")).beforeStyles({ 496 opacity: 1 497 }); 498 const baseAnimation = createAnimation("leaving-base").addElement(baseEl).easing("cubic-bezier(0.32,0.72,0,1)").duration(duration).addAnimation(wrapperAnimation).beforeAddWrite(() => { 499 if (expandToScroll) { 500 return; 501 } 502 const ionFooter = baseEl.querySelector("ion-footer"); 503 if (ionFooter) { 504 const clonedFooter = baseEl.shadowRoot.querySelector("ion-footer"); 505 ionFooter.style.removeProperty("display"); 506 ionFooter.removeAttribute("aria-hidden"); 507 clonedFooter.style.setProperty("display", "none"); 508 clonedFooter.setAttribute("aria-hidden", "true"); 509 const page = baseEl.querySelector(".ion-page"); 510 page.style.removeProperty("padding-bottom"); 511 } 512 }); 513 if (presentingEl) { 514 const isMobile = window.innerWidth < 768; 515 const hasCardModal = presentingEl.tagName === "ION-MODAL" && presentingEl.presentingElement !== void 0; 516 const presentingElRoot = getElementRoot(presentingEl); 517 const presentingAnimation = createAnimation().beforeClearStyles(["transform"]).afterClearStyles(["transform"]).onFinish((currentStep) => { 518 if (currentStep !== 1) { 519 return; 520 } 521 presentingEl.style.setProperty("overflow", "");
522 const numModals = Array.from(bodyEl.querySelectorAll("ion-modal:not(.overlay-hidden)")).filter((m) => m.presentingElement !== void 0).length; 523 if (numModals <= 1) { 524 bodyEl.style.setProperty("background-color", ""); 525 } 526 }); 527 const bodyEl = document.body; 528 if (isMobile) { 529 const transformOffset = !CSS.supports("width", "max(0px, 1px)") ? "30px" : "max(30px, var(--ion-safe-area-top))"; 530 const modalTransform = hasCardModal ? "-10px" : transformOffset; 531 const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE; 532 const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`; 533 presentingAnimation.addElement(presentingEl).keyframes([{ 534 offset: 0, 535 filter: "contrast(0.85)", 536 transform: finalTransform, 537 borderRadius: "10px 10px 0 0" 538 }, { 539 offset: 1, 540 filter: "contrast(1)", 541 transform: "translateY(0px) scale(1)", 542 borderRadius: "0px" 543 }]); 544 baseAnimation.addAnimation(presentingAnimation); 545 } else { 546 baseAnimation.addAnimation(backdropAnimation); 547 if (!hasCardModal) { 548 wrapperAnimation.fromTo("opacity", "1", "0"); 549 } else { 550 const toPresentingScale = hasCardModal ? SwipeToCloseDefaults.MIN_PRESENTING_SCALE : 1; 551 const finalTransform = `translateY(-10px) scale(${toPresentingScale})`; 552 presentingAnimation.addElement(presentingElRoot.querySelector(".modal-wrapper")).afterStyles({ 553 transform: "translate3d(0, 0, 0)" 554 }).keyframes([{ 555 offset: 0, 556 filter: "contrast(0.85)", 557 transform: finalTransform 558 }, { 559 offset: 1, 560 filter: "contrast(1)", 561 transform: "translateY(0) scale(1)" 562 }]); 563 const shadowAnimation = createAnimation().addElement(presentingElRoot.querySelector(".modal-shadow")).afterStyles({ 564 transform: "translateY(0) scale(1)" 565 }).keyframes([{ 566 offset: 0, 567 opacity: "0", 568 transform: finalTransform 569 }, { 570 offset: 1, 571 opacity: "1", 572 transform: "translateY(0) scale(1)" 573 }]); 574 baseAnimation.addAnimation([presentingAnimation, shadowAnimation]); 575 } 576 } 577 } else { 578 baseAnimation.addAnimation(backdropAnimation); 579 } 580 return baseAnimation; 581}; 582var createEnterAnimation = () => { 583 const backdropAnimation = createAnimation().fromTo("opacity", 0.01, "var(--backdrop-opacity)").beforeStyles({ 584 "pointer-events": "none" 585 }).afterClearStyles(["pointer-events"]); 586 const wrapperAnimation = createAnimation().keyframes([{ 587 offset: 0, 588 opacity: 0.01, 589 transform: "translateY(40px)" 590 }, { 591 offset: 1, 592 opacity: 1, 593 transform: `translateY(0px)` 594 }]); 595 return { 596 backdropAnimation, 597 wrapperAnimation, 598 contentAnimation: void 0 599 }; 600}; 601var mdEnterAnimation = (baseEl, opts) => { 602 const { 603 currentBreakpoint, 604 expandToScroll 605 } = opts; 606 const root = getElementRoot(baseEl); 607 const { 608 wrapperAnimation, 609 backdropAnimation, 610 contentAnimation 611 } = currentBreakpoint !== void 0 ? createSheetEnterAnimation(opts) : createEnterAnimation(); 612 backdropAnimation.addElement(root.querySelector("ion-backdrop")); 613 wrapperAnimation.addElement(root.querySelector(".modal-wrapper")); 614 expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector(".ion-page"))); 615 const baseAnimation = createAnimation().addElement(baseEl).easing("cubic-bezier(0.36,0.66,0.04,1)").duration(280).addAnimation([backdropAnimation, wrapperAnimation]).beforeAddWrite(() => { 616 if (expandToScroll) { 617 return; 618 } 619 const ionFooter = baseEl.querySelector("ion-footer"); 620 const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector("ion-footer"); 621 if (ionFooter && !ionFooterAlreadyAppended) { 622 const footerHeight = ionFooter.clientHeight; 623 const clonedFooter = ionFooter.cloneNode(true); 624 baseEl.shadowRoot.appendChild(clonedFooter); 625 ionFooter.style.setProperty("display", "none"); 626 ionFooter.setAttribute("aria-hidden", "true"); 627 const page = baseEl.querySelector(".ion-page"); 628 page.style.setProperty("padding-bottom", `${footerHeight}px`); 629 } 630 }); 631 if (contentAnimation) { 632 baseAnimation.addAnimation(contentAnimation); 633 } 634 return baseAnimation; 635}; 636var createLeaveAnimation = () => { 637 const backdropAnimation = createAnimation().fromTo("opacity", "var(--backdrop-opacity)", 0); 638 const wrapperAnimation = createAnimation().keyframes([{ 639 offset: 0, 640 opacity: 0.99, 641 transform: `translateY(0px)` 642 }, { 643 offset: 1, 644 opacity: 0, 645 transform: "translateY(40px)" 646 }]); 647 return { 648 backdropAnimation, 649 wrapperAnimation 650 }; 651}; 652var mdLeaveAnimation = (baseEl, opts) => { 653 const { 654 currentBreakpoint, 655 expandToScroll 656 } = opts; 657 const root = getElementRoot(baseEl); 658 const { 659 wrapperAnimation, 660 backdropAnimation 661 } = currentBreakpoint !== void 0 ? createSheetLeaveAnimation(opts) : createLeaveAnimation(); 662 backdropAnimation.addElement(root.querySelector("ion-backdrop")); 663 wrapperAnimation.addElement(root.querySelector(".modal-wrapper")); 664 const baseAnimation = createAnimation().easing("cubic-bezier(0.47,0,0.745,0.715)").duration(200).addAnimation([backdropAnimation, wrapperAnimation]).beforeAddWrite(() => { 665 if (expandToScroll) { 666 return; 667 } 668 const ionFooter = baseEl.querySelector("ion-footer"); 669 if (ionFooter) { 670 const clonedFooter = baseEl.shadowRoot.querySelector("ion-footer"); 671 ionFooter.style.removeProperty("display"); 672 ionFooter.removeAttribute("aria-hidden"); 673 clonedFooter.style.setProperty("display", "none"); 674 clonedFooter.setAttribute("aria-hidden", "true"); 675 const page = baseEl.querySelector(".ion-page"); 676 page.style.removeProperty("padding-bottom"); 677 } 678 }); 679 return baseAnimation; 680}; 681var createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakp
681oint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => { 682 const defaultBackdrop = [{ 683 offset: 0, 684 opacity: "var(--backdrop-opacity)" 685 }, { 686 offset: 1, 687 opacity: 0.01 688 }]; 689 const customBackdrop = [{ 690 offset: 0, 691 opacity: "var(--backdrop-opacity)" 692 }, { 693 offset: 1 - backdropBreakpoint, 694 opacity: 0 695 }, { 696 offset: 1, 697 opacity: 0 698 }]; 699 const SheetDefaults = { 700 WRAPPER_KEYFRAMES: [{ 701 offset: 0, 702 transform: "translateY(0%)" 703 }, { 704 offset: 1, 705 transform: "translateY(100%)" 706 }], 707 BACKDROP_KEYFRAMES: backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop, 708 CONTENT_KEYFRAMES: [{ 709 offset: 0, 710 maxHeight: "100%" 711 }, { 712 offset: 1, 713 maxHeight: "0%" 714 }] 715 }; 716 const contentEl = baseEl.querySelector("ion-content"); 717 const height = wrapperEl.clientHeight; 718 let currentBreakpoint = initialBreakpoint; 719 let offset = 0; 720 let canDismissBlocksGesture = false; 721 let cachedScrollEl = null; 722 const canDismissMaxStep = 0.95; 723 const maxBreakpoint = breakpoints[breakpoints.length - 1]; 724 const minBreakpoint = breakpoints[0]; 725 const wrapperAnimation = animation.childAnimations.find((ani) => ani.id === "wrapperAnimation"); 726 const backdropAnimation = animation.childAnimations.find((ani) => ani.id === "backdropAnimation"); 727 const contentAnimation = animation.childAnimations.find((ani) => ani.id === "contentAnimation"); 728 const enableBackdrop = () => { 729 baseEl.style.setProperty("pointer-events", "auto"); 730 backdropEl.style.setProperty("pointer-events", "auto"); 731 baseEl.classList.remove(FOCUS_TRAP_DISABLE_CLASS); 732 }; 733 const disableBackdrop = () => { 734 baseEl.style.setProperty("pointer-events", "none"); 735 backdropEl.style.setProperty("pointer-events", "none"); 736 baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS); 737 }; 738 const swapFooterVisibility = (footer) => { 739 const originalFooter = baseEl.querySelector("ion-footer"); 740 if (!originalFooter) { 741 return; 742 } 743 const clonedFooter = wrapperEl.nextElementSibling; 744 const footerToHide = footer === "original" ? clonedFooter : originalFooter; 745 const footerToShow = footer === "original" ? originalFooter : clonedFooter; 746 footerToShow.style.removeProperty("display"); 747 footerToShow.removeAttribute("aria-hidden"); 748 const page = baseEl.querySelector(".ion-page"); 749 if (footer === "original") { 750 page.style.removeProperty("padding-bottom"); 751 } else { 752 const pagePadding = footerToShow.clientHeight; 753 page.style.setProperty("padding-bottom", `${pagePadding}px`); 754 } 755 footerToHide.style.setProperty("display", "none"); 756 footerToHide.setAttribute("aria-hidden", "true"); 757 }; 758 if (wrapperAnimation && backdropAnimation) { 759 wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]); 760 backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]); 761 contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]); 762 animation.progressStart(true, 1 - currentBreakpoint); 763 const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint; 764 if (shouldEnableBackdrop) { 765 enableBackdrop(); 766 } else { 767 disableBackdrop(); 768 } 769 } 770 if (contentEl && currentBreakpoint !== maxBreakpoint && expandToScroll) { 771 contentEl.scrollY = false; 772 } 773 const canStart = (detail) => { 774 const contentEl2 = findClosestIonContent(detail.event.target); 775 currentBreakpoint = getCurrentBreakpoint(); 776 if (!expandToScroll && contentEl2) { 777 const scrollEl = isIonContent(contentEl2) ? getElementRoot(contentEl2).querySelector(".inner-scroll") : contentEl2; 778 return scrollEl.scrollTop === 0; 779 } 780 if (currentBreakpoint === 1 && contentEl2) { 781 const scrollEl = isIonContent(contentEl2) ? getElementRoot(contentEl2).querySelector(".inner-scroll") : contentEl2; 782 const hasRefresherInContent = !!contentEl2.querySelector("ion-refresher"); 783 return !hasRefresherInContent && scrollEl.scrollTop === 0; 784 } 785 return true; 786 };
787 const onStart = (detail) => { 788 canDismissBlocksGesture = baseEl.canDismiss !== void 0 && baseEl.canDismiss !== true && minBreakpoint === 0; 789 if (!expandToScroll) { 790 const targetEl = findClosestIonContent(detail.event.target); 791 cachedScrollEl = targetEl && isIonContent(targetEl) ? getElementRoot(targetEl).querySelector(".inner-scroll") : targetEl; 792 } 793 if (!expandToScroll) { 794 swapFooterVisibility("original"); 795 } 796 if (detail.deltaY > 0 && contentEl) { 797 contentEl.scrollY = false; 798 } 799 raf(() => { 800 baseEl.focus(); 801 }); 802 animation.progressStart(true, 1 - currentBreakpoint); 803 }; 804 const onMove = (detail) => { 805 if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl) { 806 return; 807 } 808 if (detail.deltaY > 0 && contentEl) { 809 contentEl.scrollY = false; 810 } 811 const initialStep = 1 - currentBreakpoint; 812 const secondToLastBreakpoint = breakpoints.length > 1 ? 1 - breakpoints[1] : void 0; 813 const step = initialStep + detail.deltaY / height; 814 const isAttemptingDismissWithCanDismiss = secondToLastBreakpoint !== void 0 && step >= secondToLastBreakpoint && canDismissBlocksGesture; 815 const maxStep = isAttemptingDismissWithCanDismiss ? canDismissMaxStep : 0.9999; 816 const processedStep = isAttemptingDismissWithCanDismiss && secondToLastBreakpoint !== void 0 ? secondToLastBreakpoint + calculateSpringStep((step - secondToLastBreakpoint) / (maxStep - secondToLastBreakpoint)) : step; 817 offset = clamp(1e-4, processedStep, maxStep); 818 animation.progressStep(offset); 819 }; 820 const onEnd = (detail) => { 821 if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) { 822 return; 823 } 824 const velocity = detail.velocityY; 825 const threshold = (detail.deltaY + velocity * 350) / height; 826 const diff = currentBreakpoint - threshold; 827 const closest = breakpoints.reduce((a, b) => { 828 return Math.abs(b - diff) < Math.abs(a - diff) ? b : a; 829 }); 830 moveSheetToBreakpoint({ 831 breakpoint: closest, 832 breakpointOffset: offset, 833 canDismiss: canDismissBlocksGesture, 834 /** 835 * The swipe is user-driven, so we should 836 * always animate when the gesture ends. 837 */ 838 animated: true 839 }); 840 }; 841 const moveSheetToBreakpoint = (options) => { 842 const { 843 breakpoint, 844 canDismiss, 845 breakpointOffset, 846 animated 847 } = options; 848 const shouldPreventDismiss = canDismiss && breakpoint === 0; 849 const snapToBreakpoint = shouldPreventDismiss ? currentBreakpoint : breakpoint; 850 const shouldRemainOpen = snapToBreakpoint !== 0; 851 currentBreakpoint = 0; 852 if (wrapperAnimation && backdropAnimation) { 853 wrapperAnimation.keyframes([{ 854 offset: 0, 855 transform: `translateY(${breakpointOffset * 100}%)` 856 }, { 857 offset: 1, 858 transform: `translateY(${(1 - snapToBreakpoint) * 100}%)` 859 }]); 860 backdropAnimation.keyframes([{ 861 offset: 0, 862 opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(1 - breakpointOffset, backdropBreakpoint)})` 863 }, { 864 offset: 1, 865 opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})` 866 }]); 867 if (contentAnimation) { 868 contentAnimation.keyframes([{ 869 offset: 0, 870 maxHeight: `${(1 - breakpointOffset) * 100}%` 871 }, { 872 offset: 1, 873 maxHeight: `${snapToBreakpoint * 100}%` 874 }]); 875 } 876 animation.progressStep(0); 877 } 878 gesture.enable(false); 879 if (!expandToScroll && shouldRemainOpen) { 880 swapFooterVisibility("cloned"); 881 } 882 if (shouldPreventDismiss) { 883 handleCanDismiss(baseEl, animation); 884 } else if (!shouldRemainOpen) { 885 onDismiss(); 886 } 887 if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) { 888 contentEl.scrollY = true; 889 } 890 return new Promise((resolve) => { 891 animation.onFinish(() => { 892 if (shouldRemainOpen) { 893 if (wrapperAnimation && backdropAnimation) { 894 raf(() => { 895 wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]); 896 backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]); 897 contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]); 898 animation.progressStart(true, 1 - snapToBreakpoint); 899 currentBreakpoint = snapToBreakpoint; 900 onBreakpointChange(currentBreakpoint); 901 const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint; 902 if (shouldEnableBackdrop) { 903 enableBackdrop(); 904 } else { 905 disableBackdrop(); 906 } 907 gesture.enable(true); 908 resolve(); 909 }); 910 } else { 911 gesture.enable(true); 912 resolve(); 913 } 914 } else { 915 resolve(); 916 } 917 }, { 918 oneTimeCallback: true 919 }).progressEnd(1, 0, animated ? 500 : 0); 920 }); 921 }; 922 const gesture = createGesture({ 923 el: wrapperEl, 924 gestureName: "modalSheet", 925 gesturePriority: 40, 926 direction: "y", 927 threshold: 10, 928 canStart, 929 onStart, 930 onMove, 931 onEnd 932 }); 933 return { 934 gesture, 935 moveSheetToBreakpoint 936 }; 937};
938var 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-sha
938dow);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}:host(.modal-sheet.modal-no-expand-scroll) ion-footer ion-toolbar:first-of-type{padding-top:6px}'; 939var IonModalIosStyle0 = modalIosCss; 940var 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);
940-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}'; 941var IonModalMdStyle0 = modalMdCss; 942var Modal = class { 943 constructor(hostRef) { 944 registerInstance(this, hostRef); 945 this.didPresent = createEvent(this, "ionModalDidPresent", 7); 946 this.willPresent = createEvent(this, "ionModalWillPresent", 7); 947 this.willDismiss = createEvent(this, "ionModalWillDismiss", 7); 948 this.didDismiss = createEvent(this, "ionModalDidDismiss", 7); 949 this.ionBreakpointDidChange = createEvent(this, "ionBreakpointDidChange", 7); 950 this.didPresentShorthand = createEvent(this, "didPresent", 7); 951 this.willPresentShorthand = createEvent(this, "willPresent", 7); 952 this.willDismissShorthand = createEvent(this, "willDismiss", 7); 953 this.didDismissShorthand = createEvent(this, "didDismiss", 7); 954 this.ionMount = createEvent(this, "ionMount", 7); 955 this.lockController = createLockController(); 956 this.triggerController = createTriggerController(); 957 this.coreDelegate = CoreDelegate(); 958 this.isSheetModal = false; 959 this.inheritedAttributes = {}; 960 this.inline = false; 961 this.gestureAnimationDismissing = false; 962 this.onHandleClick = () => { 963 const { 964 sheetTransition, 965 handleBehavior 966 } = this; 967 if (handleBehavior !== "cycle" || sheetTransition !== void 0) { 968 return; 969 } 970 this.moveToNextBreakpoint(); 971 }; 972 this.onBackdropTap = () => { 973 const { 974 sheetTransition 975 } = this; 976 if (sheetTransition !== void 0) { 977 return; 978 } 979 this.dismiss(void 0, BACKDROP); 980 }; 981 this.onLifecycle = (modalEvent) => { 982 const el = this.usersElement; 983 const name = LIFECYCLE_MAP[modalEvent.type]; 984 if (el && name) { 985 const ev = new CustomEvent(name, { 986 bubbles: false, 987 cancelable: false, 988 detail: modalEvent.detail 989 }); 990 el.dispatchEvent(ev); 991 } 992 }; 993 this.presented = false; 994 this.hasController = false; 995 this.overlayIndex = void 0; 996 this.delegate = void 0; 997 this.keyboardClose = true; 998 this.enterAnimation = void 0; 999 this.leaveAnimation = void 0; 1000 this.breakpoints = void 0; 1001 this.expandToScroll = true; 1002 this.initialBreakpoint = void 0; 1003 this.backdropBreakpoint = 0; 1004 this.handle = void 0; 1005 this.handleBehavior = "none"; 1006 this.component = void 0; 1007 this.componentProps = void 0; 1008 this.cssClass = void 0; 1009 this.backdropDismiss = true; 1010 this.showBackdrop = true; 1011 this.animated = true; 1012 this.presentingElement = void 0; 1013 this.htmlAttributes = void 0; 1014 this.isOpen = false;
1015 this.trigger = void 0; 1016 this.keepContentsMounted = false; 1017 this.focusTrap = true; 1018 this.canDismiss = true; 1019 } 1020 onIsOpenChange(newValue, oldValue) { 1021 if (newValue === true && oldValue === false) { 1022 this.present(); 1023 } else if (newValue === false && oldValue === true) { 1024 this.dismiss(); 1025 } 1026 } 1027 triggerChanged() { 1028 const { 1029 trigger, 1030 el, 1031 triggerController 1032 } = this; 1033 if (trigger) { 1034 triggerController.addClickListener(el, trigger); 1035 } 1036 } 1037 breakpointsChanged(breakpoints) { 1038 if (breakpoints !== void 0) { 1039 this.sortedBreakpoints = breakpoints.sort((a, b) => a - b); 1040 } 1041 } 1042 connectedCallback() { 1043 const { 1044 el 1045 } = this; 1046 prepareOverlay(el); 1047 this.triggerChanged(); 1048 } 1049 disconnectedCallback() { 1050 this.triggerController.removeClickListener(); 1051 } 1052 componentWillLoad() { 1053 var _a; 1054 const { 1055 breakpoints, 1056 initialBreakpoint, 1057 el, 1058 htmlAttributes 1059 } = this; 1060 const isSheetModal = this.isSheetModal = breakpoints !== void 0 && initialBreakpoint !== void 0; 1061 const attributesToInherit = ["aria-label", "role"]; 1062 this.inheritedAttributes = inheritAttributes(el, attributesToInherit); 1063 if (htmlAttributes !== void 0) { 1064 attributesToInherit.forEach((attribute) => { 1065 const attributeValue = htmlAttributes[attribute]; 1066 if (attributeValue) { 1067 this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { 1068 [attribute]: htmlAttributes[attribute] 1069 }); 1070 delete htmlAttributes[attribute]; 1071 } 1072 }); 1073 } 1074 if (isSheetModal) { 1075 this.currentBreakpoint = this.initialBreakpoint; 1076 } 1077 if (breakpoints !== void 0 && initialBreakpoint !== void 0 && !breakpoints.includes(initialBreakpoint)) { 1078 printIonWarning("Your breakpoints array must include the initialBreakpoint value."); 1079 } 1080 if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) { 1081 setOverlayId(this.el); 1082 } 1083 } 1084 componentDidLoad() { 1085 if (this.isOpen === true) { 1086 raf(() => this.present()); 1087 } 1088 this.breakpointsChanged(this.breakpoints); 1089 this.triggerChanged(); 1090 } 1091 /** 1092 * Determines whether or not an overlay 1093 * is being used inline or via a controller/JS 1094 * and returns the correct delegate. 1095 * By default, subsequent calls to getDelegate 1096 * will use a cached version of the delegate. 1097 * This is useful for calling dismiss after 1098 * present so that the correct delegate is given. 1099 */ 1100 getDelegate(force = false) { 1101 if (this.workingDelegate && !force) { 1102 return { 1103 delegate: this.workingDelegate, 1104 inline: this.inline 1105 }; 1106 } 1107 const parentEl = this.el.parentNode; 1108 const inline = this.inline = parentEl !== null && !this.hasController; 1109 const delegate = this.workingDelegate = inline ? this.delegate || this.coreDelegate : this.delegate; 1110 return { 1111 inline, 1112 delegate 1113 }; 1114 } 1115 /** 1116 * Determines whether or not the 1117 * modal is allowed to dismiss based 1118 * on the state of the canDismiss prop. 1119 */ 1120 checkCanDismiss(data, role) { 1121 return __async(this, null, function* () { 1122 const { 1123 canDismiss 1124 } = this; 1125 if (typeof canDismiss === "function") { 1126 return canDismiss(data, role); 1127 } 1128 return canDismiss; 1129 }); 1130 } 1131 /** 1132 * Present the modal overlay after it has been created. 1133 */ 1134 present() { 1135 return __async(this, null, function* () { 1136 const unlock = yield this.lockController.lock(); 1137 if (this.presented) { 1138 unlock(); 1139 return; 1140 } 1141 const { 1142 presentingElement, 1143 el 1144 } = this; 1145 this.currentBreakpoint = this.initialBreakpoint; 1146 const { 1147 inline, 1148 delegate 1149 } = this.getDelegate(true); 1150 this.ionMount.emit();
1151 this.usersElement = yield attachComponent(delegate, el, this.component, ["ion-page"], this.componentProps, inline); 1152 if (hasLazyBuild(el)) { 1153 yield deepReady(this.usersElement); 1154 } else if (!this.keepContentsMounted) { 1155 yield waitForMount(); 1156 } 1157 writeTask(() => this.el.classList.add("show-modal")); 1158 const hasCardModal = presentingElement !== void 0; 1159 if (hasCardModal && getIonMode(this) === "ios") { 1160 this.statusBarStyle = yield StatusBar.getStyle(); 1161 setCardStatusBarDark(); 1162 } 1163 yield present(this, "modalEnter", iosEnterAnimation, mdEnterAnimation, { 1164 presentingEl: presentingElement, 1165 currentBreakpoint: this.initialBreakpoint, 1166 backdropBreakpoint: this.backdropBreakpoint, 1167 expandToScroll: this.expandToScroll 1168 }); 1169 if (typeof window !== "undefined") { 1170 this.keyboardOpenCallback = () => { 1171 if (this.gesture) { 1172 this.gesture.enable(false); 1173 raf(() => { 1174 if (this.gesture) { 1175 this.gesture.enable(true); 1176 } 1177 }); 1178 } 1179 }; 1180 window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback); 1181 } 1182 if (this.isSheetModal) { 1183 this.initSheetGesture(); 1184 } else if (hasCardModal) { 1185 this.initSwipeToClose(); 1186 } 1187 unlock(); 1188 }); 1189 } 1190 initSwipeToClose() { 1191 var _a; 1192 if (getIonMode(this) !== "ios") { 1193 return; 1194 } 1195 const { 1196 el 1197 } = this; 1198 const animationBuilder = this.leaveAnimation || config.get("modalLeave", iosLeaveAnimation); 1199 const ani = this.animation = animationBuilder(el, { 1200 presentingEl: this.presentingElement, 1201 expandToScroll: this.expandToScroll 1202 }); 1203 const contentEl = findIonContent(el); 1204 if (!contentEl) { 1205 printIonContentErrorMsg(el); 1206 return; 1207 } 1208 const statusBarStyle = (_a = this.statusBarStyle) !== null && _a !== void 0 ? _a : Style.Default; 1209 this.gesture = createSwipeToCloseGesture(el, ani, statusBarStyle, () => { 1210 this.gestureAnimationDismissing = true; 1211 setCardStatusBarDefault(this.statusBarStyle); 1212 this.animation.onFinish(() => __async(this, null, function* () { 1213 yield this.dismiss(void 0, GESTURE); 1214 this.gestureAnimationDismissing = false; 1215 })); 1216 }); 1217 this.gesture.enable(true); 1218 } 1219 initSheetGesture() { 1220 const { 1221 wrapperEl, 1222 initialBreakpoint, 1223 backdropBreakpoint 1224 } = this; 1225 if (!wrapperEl || initialBreakpoint === void 0) { 1226 return; 1227 } 1228 const animationBuilder = this.enterAnimation || config.get("modalEnter", iosEnterAnimation); 1229 const ani = this.animation = animationBuilder(this.el, { 1230 presentingEl: this.presentingElement, 1231 currentBreakpoint: initialBreakpoint, 1232 backdropBreakpoint, 1233 expandToScroll: this.expandToScroll 1234 }); 1235 ani.progressStart(true, 1); 1236 const { 1237 gesture, 1238 moveSheetToBreakpoint 1239 } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, this.expandToScroll, () => { 1240 var _a; 1241 return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; 1242 }, () => this.sheetOnDismiss(), (breakpoint) => { 1243 if (this.currentBreakpoint !== breakpoint) { 1244 this.currentBreakpoint = breakpoint; 1245 this.ionBreakpointDidChange.emit({ 1246 breakpoint 1247 }); 1248 } 1249 }); 1250 this.gesture = gesture; 1251 this.moveSheetToBreakpoint = moveSheetToBreakpoint; 1252 this.gesture.enable(true); 1253 } 1254 sheetOnDismiss() { 1255 this.gestureAnimationDismissing = true; 1256 this.animation.onFinish(() => __async(this, null, function* () { 1257 this.currentBreakpoint = 0; 1258 this.ionBreakpointDidChange.emit({ 1259 breakpoint: this.currentBreakpoint 1260 }); 1261 yield this.dismiss(void 0, GESTURE); 1262 this.gestureAnimationDismissing = false; 1263 })); 1264 } 1265 /** 1266 * Dismiss the modal overlay after it has been presented. 1267 * 1268 * @param data Any data to emit in the dismiss events. 1269 * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'. 1270 * 1271 * This is a no-op if the overlay has not been presented yet. If you want 1272 * to remove an overlay from the DOM that was never presented, use the 1273 * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method. 1274 */ 1275 dismiss(data, role) { 1276 return __async(this, null, function* () { 1277 var _a; 1278 if (this.gestureAnimationDismissing && role !== GESTURE) { 1279 return false;
1280 } 1281 const unlock = yield this.lockController.lock(); 1282 if (role !== "handler" && !(yield this.checkCanDismiss(data, role))) { 1283 unlock(); 1284 return false; 1285 } 1286 const { 1287 presentingElement 1288 } = this; 1289 const hasCardModal = presentingElement !== void 0; 1290 if (hasCardModal && getIonMode(this) === "ios") { 1291 setCardStatusBarDefault(this.statusBarStyle); 1292 } 1293 if (typeof window !== "undefined" && this.keyboardOpenCallback) { 1294 window.removeEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback); 1295 this.keyboardOpenCallback = void 0; 1296 } 1297 const dismissed = yield dismiss(this, data, role, "modalLeave", iosLeaveAnimation, mdLeaveAnimation, { 1298 presentingEl: presentingElement, 1299 currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint, 1300 backdropBreakpoint: this.backdropBreakpoint, 1301 expandToScroll: this.expandToScroll 1302 }); 1303 if (dismissed) { 1304 const { 1305 delegate 1306 } = this.getDelegate(); 1307 yield detachComponent(delegate, this.usersElement); 1308 writeTask(() => this.el.classList.remove("show-modal")); 1309 if (this.animation) { 1310 this.animation.destroy(); 1311 } 1312 if (this.gesture) { 1313 this.gesture.destroy(); 1314 } 1315 } 1316 this.currentBreakpoint = void 0; 1317 this.animation = void 0; 1318 unlock(); 1319 return dismissed; 1320 }); 1321 } 1322 /** 1323 * Returns a promise that resolves when the modal did dismiss. 1324 */ 1325 onDidDismiss() { 1326 return eventMethod(this.el, "ionModalDidDismiss"); 1327 } 1328 /** 1329 * Returns a promise that resolves when the modal will dismiss. 1330 */ 1331 onWillDismiss() { 1332 return eventMethod(this.el, "ionModalWillDismiss"); 1333 } 1334 /** 1335 * Move a sheet style modal to a specific breakpoint. The breakpoint value must 1336 * be a value defined in your `breakpoints` array. 1337 */ 1338 setCurrentBreakpoint(breakpoint) { 1339 return __async(this, null, function* () { 1340 if (!this.isSheetModal) { 1341 printIonWarning("setCurrentBreakpoint is only supported on sheet modals."); 1342 return; 1343 } 1344 if (!this.breakpoints.includes(breakpoint)) { 1345 printIonWarning(`Attempted to set invalid breakpoint value ${breakpoint}. Please double check that the breakpoint value is part of your defined breakpoints.`); 1346 return; 1347 } 1348 const { 1349 currentBreakpoint, 1350 moveSheetToBreakpoint, 1351 canDismiss, 1352 breakpoints, 1353 animated 1354 } = this; 1355 if (currentBreakpoint === breakpoint) { 1356 return; 1357 } 1358 if (moveSheetToBreakpoint) { 1359 this.sheetTransition = moveSheetToBreakpoint({ 1360 breakpoint, 1361 breakpointOffset: 1 - currentBreakpoint, 1362 canDismiss: canDismiss !== void 0 && canDismiss !== true && breakpoints[0] === 0, 1363 animated 1364 }); 1365 yield this.sheetTransition; 1366 this.sheetTransition = void 0; 1367 } 1368 }); 1369 } 1370 /** 1371 * Returns the current breakpoint of a sheet style modal 1372 */ 1373 getCurrentBreakpoint() { 1374 return __async(this, null, function* () { 1375 return this.currentBreakpoint; 1376 }); 1377 } 1378 moveToNextBreakpoint() { 1379 return __async(this, null, function* () { 1380 const { 1381 breakpoints, 1382 currentBreakpoint 1383 } = this; 1384 if (!breakpoints || currentBreakpoint == null) { 1385 return false; 1386 } 1387 const allowedBreakpoints = breakpoints.filter((b) => b !== 0); 1388 const currentBreakpointIndex = allowedBreakpoints.indexOf(currentBreakpoint); 1389 const nextBreakpointIndex = (currentBreakpointIndex + 1) % allowedBreakpoints.length; 1390 const nextBreakpoint = allowedBreakpoints[nextBreakpointIndex]; 1391 yield this.setCurrentBreakpoint(nextBreakpoint); 1392 return true; 1393 }); 1394 } 1395 render() { 1396 const { 1397 handle, 1398 isSheetModal, 1399 presentingElement, 1400 htmlAttributes, 1401 handleBehavior, 1402 inheritedAttributes, 1403 focusTrap, 1404 expandToScroll 1405 } = this; 1406 const showHandle = handle !== false && isSheetModal; 1407 const mode = getIonMode(this); 1408 const isCardModal = presentingElement !== void 0 && mode === "ios"; 1409 const isHandleCycle = handleBehavior === "cycle"; 1410 return h(Host, Object.assign({ 1411 key: "e661562f9e4126136cee337e4ab8ca69ac80faae", 1412 "no-router": true, 1413 tabindex: "-1" 1414 }, htmlAttributes, { 1415 style: { 1416 zIndex: `${2e4 + this.overlayIndex}` 1417 }, 1418 class: Object.assign({ 1419 [mode]: true,
1420 ["modal-default"]: !isCardModal && !isSheetModal, 1421 [`modal-card`]: isCardModal, 1422 [`modal-sheet`]: isSheetModal, 1423 [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 1424 "overlay-hidden": true, 1425 [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false 1426 }, getClassMap(this.cssClass)), 1427 onIonBackdropTap: this.onBackdropTap, 1428 onIonModalDidPresent: this.onLifecycle, 1429 onIonModalWillPresent: this.onLifecycle, 1430 onIonModalWillDismiss: this.onLifecycle, 1431 onIonModalDidDismiss: this.onLifecycle 1432 }), h("ion-backdrop", { 1433 key: "9221692e0e111f99e80239ca44faaaed9b288425", 1434 ref: (el) => this.backdropEl = el, 1435 visible: this.showBackdrop, 1436 tappable: this.backdropDismiss, 1437 part: "backdrop" 1438 }), mode === "ios" && h("div", { 1439 key: "20def7088d31e5eb13c3f2404c514cd8b74cd966", 1440 class: "modal-shadow" 1441 }), h("div", Object.assign({ 1442 key: "b11229330571d4ff7b9136dfdddcd7d759ada876", 1443 /* 1444 role and aria-modal must be used on the 1445 same element. They must also be set inside the 1446 shadow DOM otherwise ion-button will not be highlighted 1447 when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134 1448 */ 1449 role: "dialog" 1450 }, inheritedAttributes, { 1451 "aria-modal": "true", 1452 class: "modal-wrapper ion-overlay-wrapper", 1453 part: "content", 1454 ref: (el) => this.wrapperEl = el 1455 }), showHandle && h("button", { 1456 key: "95b2a62477dfbc063a91910f0d37357388cfd914", 1457 class: "modal-handle", 1458 // Prevents the handle from receiving keyboard focus when it does not cycle 1459 tabIndex: !isHandleCycle ? -1 : 0, 1460 "aria-label": "Activate to adjust the size of the dialog overlaying the screen", 1461 onClick: isHandleCycle ? this.onHandleClick : void 0, 1462 part: "handle" 1463 }), h("slot", { 1464 key: "fba17dfdbdffbfd8992f473f633d172c5124dc19" 1465 }))); 1466 } 1467 get el() { 1468 return getElement(this); 1469 } 1470 static get watchers() { 1471 return { 1472 "isOpen": ["onIsOpenChange"], 1473 "trigger": ["triggerChanged"] 1474 }; 1475 } 1476}; 1477var LIFECYCLE_MAP = { 1478 ionModalDidPresent: "ionViewDidEnter", 1479 ionModalWillPresent: "ionViewWillEnter", 1480 ionModalWillDismiss: "ionViewWillLeave", 1481 ionModalDidDismiss: "ionViewDidLeave" 1482}; 1483Modal.style = { 1484 ios: IonModalIosStyle0, 1485 md: IonModalMdStyle0 1486}; 1487export { 1488 Modal as ion_modal 1489};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.