npm - @sparkle-learning/core - Versions diffs - 0.0.27 → 0.0.30 - Mend

@sparkle-learning/core 0.0.27 → 0.0.30

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.

Files changed (697) hide show

package/dist/esm/ion-action-sheet_4.entry.js ADDED Viewed

@@ -0,0 +1,2196 @@
+import { w as writeTask, r as registerInstance, i as createEvent, j as readTask, h, H as Host, e as getElement, f as forceUpdate } from './index-5568e3fa.js';
+import { g as getIonMode, a as isPlatform } from './ionic-global-0939c477.js';
+import { c as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-99c9e346.js';
+import { createGesture } from './index-a12c14bd.js';
+import { B as BACKDROP, i as isCancel, b as present, p as prepareOverlay, d as dismiss, e as eventMethod, s as safeCall, j as focusFirstDescendant } from './overlays-34cfa9e0.js';
+import { g as getClassMap } from './theme-c336c9d9.js';
+import { c as createAnimation } from './animation-b306f6c2.js';
+import { s as sanitizeDOMString } from './index-435af8e6.js';
+import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-3bc58c27.js';
+import { k as raf, g as getElementRoot, a as addEventListener } from './helpers-39367fe1.js';
+import { d as deepReady } from './index-c26d8655.js';
+import './gesture-controller-686622ba.js';
+import './hardware-back-button-b6ccf74a.js';
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const createButtonActiveGesture = (el, isButton) => {
+  let currentTouchedButton;
+  let initialTouchedButton;
+  const activateButtonAtPoint = (x, y, hapticFeedbackFn) => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    const target = document.elementFromPoint(x, y);
+    if (!target || !isButton(target)) {
+      clearActiveButton();
+      return;
+    }
+    if (target !== currentTouchedButton) {
+      clearActiveButton();
+      setActiveButton(target, hapticFeedbackFn);
+    }
+  };
+  const setActiveButton = (button, hapticFeedbackFn) => {
+    currentTouchedButton = button;
+    if (!initialTouchedButton) {
+      initialTouchedButton = currentTouchedButton;
+    }
+    const buttonToModify = currentTouchedButton;
+    writeTask(() => buttonToModify.classList.add('ion-activated'));
+    hapticFeedbackFn();
+  };
+  const clearActiveButton = (dispatchClick = false) => {
+    if (!currentTouchedButton) {
+      return;
+    }
+    const buttonToModify = currentTouchedButton;
+    writeTask(() => buttonToModify.classList.remove('ion-activated'));
+    /**
+     * Clicking on one button, but releasing on another button
+     * does not dispatch a click event in browsers, so we
+     * need to do it manually here. Some browsers will
+     * dispatch a click if clicking on one button, dragging over
+     * another button, and releasing on the original button. In that
+     * case, we need to make sure we do not cause a double click there.
+     */
+    if (dispatchClick && initialTouchedButton !== currentTouchedButton) {
+      currentTouchedButton.click();
+    }
+    currentTouchedButton = undefined;
+  };
+  return createGesture({
+    el,
+    gestureName: 'buttonActiveDrag',
+    threshold: 0,
+    onStart: ev => activateButtonAtPoint(ev.currentX, ev.currentY, hapticSelectionStart),
+    onMove: ev => activateButtonAtPoint(ev.currentX, ev.currentY, hapticSelectionChanged),
+    onEnd: () => {
+      clearActiveButton(true);
+      hapticSelectionEnd();
+      initialTouchedButton = undefined;
+    }
+  });
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * iOS Action Sheet Enter Animation
+ */
+const iosEnterAnimation$2 = (baseEl) => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop'))
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+    'pointer-events': 'none'
+  })
+    .afterClearStyles(['pointer-events']);
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper'))
+    .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('cubic-bezier(.36,.66,.04,1)')
+    .duration(400)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * iOS Action Sheet Leave Animation
+ */
+const iosLeaveAnimation$2 = (baseEl) => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop'))
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper'))
+    .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('cubic-bezier(.36,.66,.04,1)')
+    .duration(450)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * MD Action Sheet Enter Animation
+ */
+const mdEnterAnimation$2 = (baseEl) => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop'))
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+    'pointer-events': 'none'
+  })
+    .afterClearStyles(['pointer-events']);
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper'))
+    .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('cubic-bezier(.36,.66,.04,1)')
+    .duration(400)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * MD Action Sheet Leave Animation
+ */
+const mdLeaveAnimation$2 = (baseEl) => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop'))
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.action-sheet-wrapper'))
+    .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('cubic-bezier(.36,.66,.04,1)')
+    .duration(450)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+const actionSheetIosCss = ".sc-ion-action-sheet-ios-h{--color:initial;--button-color-activated:var(--button-color);--button-color-focused:var(--button-color);--button-color-hover:var(--button-color);--button-color-selected:var(--button-color);--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--height:100%;--max-height:calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:block;position:fixed;outline:none;font-family:var(--ion-font-family, inherit);touch-action:none;user-select:none;z-index:1001}.overlay-hidden.sc-ion-action-sheet-ios-h{display:none}.action-sheet-wrapper.sc-ion-action-sheet-ios{left:0;right:0;bottom:0;transform:translate3d(0,  100%,  0);display:block;position:absolute;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);z-index:10;pointer-events:none}.action-sheet-button.sc-ion-action-sheet-ios{display:block;position:relative;width:100%;border:0;outline:none;background:var(--button-background);color:var(--button-color);font-family:inherit;overflow:hidden}.action-sheet-button-inner.sc-ion-action-sheet-ios{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;pointer-events:none;width:100%;height:100%;z-index:1}.action-sheet-container.sc-ion-action-sheet-ios{display:flex;flex-flow:column;justify-content:flex-end;height:100%;max-height:100%}.action-sheet-group.sc-ion-action-sheet-ios{flex-shrink:2;overscroll-behavior-y:contain;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:all;background:var(--background)}.action-sheet-group.sc-ion-action-sheet-ios::-webkit-scrollbar{display:none}.action-sheet-group-cancel.sc-ion-action-sheet-ios{flex-shrink:0;overflow:hidden}.action-sheet-button.sc-ion-action-sheet-ios::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.action-sheet-selected.sc-ion-action-sheet-ios{color:var(--button-color-selected)}.action-sheet-selected.sc-ion-action-sheet-ios::after{background:var(--button-background-selected);opacity:var(--button-background-selected-opacity)}.action-sheet-button.ion-activated.sc-ion-action-sheet-ios{color:var(--button-color-activated)}.action-sheet-button.ion-activated.sc-ion-action-sheet-ios::after{background:var(--button-background-activated);opacity:var(--button-background-activated-opacity)}.action-sheet-button.ion-focused.sc-ion-action-sheet-ios{color:var(--button-color-focused)}.action-sheet-button.ion-focused.sc-ion-action-sheet-ios::after{background:var(--button-background-focused);opacity:var(--button-background-focused-opacity)}@media (any-hover: hover){.action-sheet-button.sc-ion-action-sheet-ios:hover{color:var(--button-color-hover)}.action-sheet-button.sc-ion-action-sheet-ios:hover::after{background:var(--button-background-hover);opacity:var(--button-background-hover-opacity)}}.sc-ion-action-sheet-ios-h{--background:var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9));--backdrop-opacity:var(--ion-backdrop-opacity, 0.4);--button-background:linear-gradient(0deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08), rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 50%, transparent 50%) bottom/100% 1px no-repeat transparent;--button-background-activated:var(--ion-text-color, #000);--button-background-activated-opacity:.08;--button-background-hover:currentColor;--button-background-hover-opacity:.04;--button-background-focused:currentColor;--button-background-focused-opacity:.12;--button-background-selected:var(--ion-color-step-150, var(--ion-background-color, #fff));--button-background-selected-opacity:1;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-400, #999999);text-align:center}.action-sheet-wrapper.sc-ion-action-sheet-ios{margin-left:auto;margin-right:auto;margin-top:var(--ion-safe-area-top, 0);margin-bottom:var(--ion-safe-area-bottom, 0)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.action-sheet-wrapper.sc-ion-action-sheet-ios{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.action-sheet-container.sc-ion-action-sheet-ios{padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.action-sheet-container.sc-ion-action-sheet-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.action-sheet-group.sc-ion-action-sheet-ios{border-radius:13px;margin-bottom:8px}.action-sheet-group.sc-ion-action-sheet-ios:first-child{margin-top:10px}.action-sheet-group.sc-ion-action-sheet-ios:last-child{margin-bottom:10px}@supports (backdrop-filter: blur(0)){.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-group.sc-ion-action-sheet-ios{background-color:transparent;backdrop-filter:saturate(280%) blur(20px)}.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-title.sc-ion-action-sheet-ios,.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-button.sc-ion-action-sheet-ios{background-color:transparent;background-image:linear-gradient(0deg, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8), rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%), linear-gradient(0deg, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.4), rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.4) 50%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 50%);background-repeat:no-repeat;background-position:top, bottom;background-size:100% calc(100% - 1px), 100% 1px;backdrop-filter:saturate(120%)}.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-button.ion-activated.sc-ion-action-sheet-ios{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.7);background-image:none}.action-sheet-translucent.sc-ion-action-sheet-ios-h .action-sheet-cancel.sc-ion-action-sheet-ios{background:var(--button-background-selected)}}.action-sheet-title.sc-ion-action-sheet-ios{background:linear-gradient(0deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08), rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 50%, transparent 50%) bottom/100% 1px no-repeat transparent}.action-sheet-title.sc-ion-action-sheet-ios{padding-left:10px;padding-right:10px;padding-top:14px;padding-bottom:13px;color:var(--color, var(--ion-color-step-400, #999999));font-size:13px;font-weight:400;text-align:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.action-sheet-title.sc-ion-action-sheet-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}.action-sheet-title.action-sheet-has-sub-title.sc-ion-action-sheet-ios{font-weight:600}.action-sheet-sub-title.sc-ion-action-sheet-ios{padding-left:0;padding-right:0;padding-top:6px;padding-bottom:0;font-size:13px;font-weight:400}.action-sheet-button.sc-ion-action-sheet-ios{padding-left:18px;padding-right:18px;padding-top:18px;padding-bottom:18px;height:56px;font-size:20px;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.action-sheet-button.sc-ion-action-sheet-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:18px;padding-inline-start:18px;-webkit-padding-end:18px;padding-inline-end:18px}}.action-sheet-button.sc-ion-action-sheet-ios .action-sheet-icon.sc-ion-action-sheet-ios{margin-right:0.3em;font-size:28px;pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.action-sheet-button.sc-ion-action-sheet-ios .action-sheet-icon.sc-ion-action-sheet-ios{margin-right:unset;-webkit-margin-end:0.3em;margin-inline-end:0.3em}}.action-sheet-button.sc-ion-action-sheet-ios:last-child{background-image:none}.action-sheet-selected.sc-ion-action-sheet-ios{font-weight:bold}.action-sheet-cancel.sc-ion-action-sheet-ios{font-weight:600}.action-sheet-cancel.sc-ion-action-sheet-ios::after{background:var(--button-background-selected);opacity:var(--button-background-selected-opacity)}.action-sheet-destructive.sc-ion-action-sheet-ios,.action-sheet-destructive.ion-activated.sc-ion-action-sheet-ios,.action-sheet-destructive.ion-focused.sc-ion-action-sheet-ios{color:var(--ion-color-danger, #eb445a)}@media (any-hover: hover){.action-sheet-destructive.sc-ion-action-sheet-ios:hover{color:var(--ion-color-danger, #eb445a)}}";
+const actionSheetMdCss = ".sc-ion-action-sheet-md-h{--color:initial;--button-color-activated:var(--button-color);--button-color-focused:var(--button-color);--button-color-hover:var(--button-color);--button-color-selected:var(--button-color);--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--height:100%;--max-height:calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:block;position:fixed;outline:none;font-family:var(--ion-font-family, inherit);touch-action:none;user-select:none;z-index:1001}.overlay-hidden.sc-ion-action-sheet-md-h{display:none}.action-sheet-wrapper.sc-ion-action-sheet-md{left:0;right:0;bottom:0;transform:translate3d(0,  100%,  0);display:block;position:absolute;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);z-index:10;pointer-events:none}.action-sheet-button.sc-ion-action-sheet-md{display:block;position:relative;width:100%;border:0;outline:none;background:var(--button-background);color:var(--button-color);font-family:inherit;overflow:hidden}.action-sheet-button-inner.sc-ion-action-sheet-md{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;pointer-events:none;width:100%;height:100%;z-index:1}.action-sheet-container.sc-ion-action-sheet-md{display:flex;flex-flow:column;justify-content:flex-end;height:100%;max-height:100%}.action-sheet-group.sc-ion-action-sheet-md{flex-shrink:2;overscroll-behavior-y:contain;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:all;background:var(--background)}.action-sheet-group.sc-ion-action-sheet-md::-webkit-scrollbar{display:none}.action-sheet-group-cancel.sc-ion-action-sheet-md{flex-shrink:0;overflow:hidden}.action-sheet-button.sc-ion-action-sheet-md::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.action-sheet-selected.sc-ion-action-sheet-md{color:var(--button-color-selected)}.action-sheet-selected.sc-ion-action-sheet-md::after{background:var(--button-background-selected);opacity:var(--button-background-selected-opacity)}.action-sheet-button.ion-activated.sc-ion-action-sheet-md{color:var(--button-color-activated)}.action-sheet-button.ion-activated.sc-ion-action-sheet-md::after{background:var(--button-background-activated);opacity:var(--button-background-activated-opacity)}.action-sheet-button.ion-focused.sc-ion-action-sheet-md{color:var(--button-color-focused)}.action-sheet-button.ion-focused.sc-ion-action-sheet-md::after{background:var(--button-background-focused);opacity:var(--button-background-focused-opacity)}@media (any-hover: hover){.action-sheet-button.sc-ion-action-sheet-md:hover{color:var(--button-color-hover)}.action-sheet-button.sc-ion-action-sheet-md:hover::after{background:var(--button-background-hover);opacity:var(--button-background-hover-opacity)}}.sc-ion-action-sheet-md-h{--background:var(--ion-overlay-background-color, var(--ion-background-color, #fff));--backdrop-opacity:var(--ion-backdrop-opacity, 0.32);--button-background:transparent;--button-background-selected:currentColor;--button-background-selected-opacity:0;--button-background-activated:transparent;--button-background-activated-opacity:0;--button-background-hover:currentColor;--button-background-hover-opacity:.04;--button-background-focused:currentColor;--button-background-focused-opacity:.12;--button-color:var(--ion-color-step-850, #262626);--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54)}.action-sheet-wrapper.sc-ion-action-sheet-md{margin-left:auto;margin-right:auto;margin-top:var(--ion-safe-area-top, 0);margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.action-sheet-wrapper.sc-ion-action-sheet-md{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.action-sheet-title.sc-ion-action-sheet-md{padding-left:16px;padding-right:16px;padding-top:20px;padding-bottom:17px;min-height:60px;color:var(--color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54));font-size:16px;text-align:start}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.action-sheet-title.sc-ion-action-sheet-md{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.action-sheet-sub-title.sc-ion-action-sheet-md{padding-left:0;padding-right:0;padding-top:16px;padding-bottom:0;font-size:14px}.action-sheet-group.sc-ion-action-sheet-md:first-child{padding-top:0}.action-sheet-group.sc-ion-action-sheet-md:last-child{padding-bottom:var(--ion-safe-area-bottom)}.action-sheet-button.sc-ion-action-sheet-md{padding-left:16px;padding-right:16px;padding-top:0;padding-bottom:0;position:relative;height:52px;font-size:16px;text-align:start;contain:strict;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.action-sheet-button.sc-ion-action-sheet-md{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.action-sheet-icon.sc-ion-action-sheet-md{padding-bottom:4px;margin-left:0;margin-right:32px;margin-top:0;margin-bottom:0;color:var(--color);font-size:24px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.action-sheet-icon.sc-ion-action-sheet-md{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:32px;margin-inline-end:32px}}.action-sheet-button-inner.sc-ion-action-sheet-md{justify-content:flex-start}.action-sheet-selected.sc-ion-action-sheet-md{font-weight:bold}";
+const ActionSheet = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.didPresent = createEvent(this, "ionActionSheetDidPresent", 7);
+    this.willPresent = createEvent(this, "ionActionSheetWillPresent", 7);
+    this.willDismiss = createEvent(this, "ionActionSheetWillDismiss", 7);
+    this.didDismiss = createEvent(this, "ionActionSheetDidDismiss", 7);
+    this.presented = false;
+    /**
+     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+     */
+    this.keyboardClose = true;
+    /**
+     * An array of buttons for the action sheet.
+     */
+    this.buttons = [];
+    /**
+     * If `true`, the action sheet will be dismissed when the backdrop is clicked.
+     */
+    this.backdropDismiss = true;
+    /**
+     * If `true`, the action sheet will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     */
+    this.translucent = false;
+    /**
+     * If `true`, the action sheet will animate.
+     */
+    this.animated = true;
+    this.onBackdropTap = () => {
+      this.dismiss(undefined, BACKDROP);
+    };
+    this.dispatchCancelHandler = (ev) => {
+      const role = ev.detail.role;
+      if (isCancel(role)) {
+        const cancelButton = this.getButtons().find(b => b.role === 'cancel');
+        this.callButtonHandler(cancelButton);
+      }
+    };
+  }
+  /**
+   * Present the action sheet overlay after it has been created.
+   */
+  present() {
+    return present(this, 'actionSheetEnter', iosEnterAnimation$2, mdEnterAnimation$2);
+  }
+  connectedCallback() {
+    prepareOverlay(this.el);
+  }
+  /**
+   * Dismiss the action sheet overlay after it has been presented.
+   *
+   * @param data Any data to emit in the dismiss events.
+   * @param role The role of the element that is dismissing the action sheet.
+   * This can be useful in a button handler for determining which button was
+   * clicked to dismiss the action sheet.
+   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   */
+  dismiss(data, role) {
+    return dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation$2, mdLeaveAnimation$2);
+  }
+  /**
+   * Returns a promise that resolves when the action sheet did dismiss.
+   */
+  onDidDismiss() {
+    return eventMethod(this.el, 'ionActionSheetDidDismiss');
+  }
+  /**
+   * Returns a promise that resolves when the action sheet will dismiss.
+   *
+   */
+  onWillDismiss() {
+    return eventMethod(this.el, 'ionActionSheetWillDismiss');
+  }
+  async buttonClick(button) {
+    const role = button.role;
+    if (isCancel(role)) {
+      return this.dismiss(button.data, role);
+    }
+    const shouldDismiss = await this.callButtonHandler(button);
+    if (shouldDismiss) {
+      return this.dismiss(button.data, button.role);
+    }
+    return Promise.resolve();
+  }
+  async callButtonHandler(button) {
+    if (button) {
+      // a handler has been provided, execute it
+      // pass the handler the values from the inputs
+      const rtn = await safeCall(button.handler);
+      if (rtn === false) {
+        // if the return value of the handler is false then do not dismiss
+        return false;
+      }
+    }
+    return true;
+  }
+  getButtons() {
+    return this.buttons.map(b => {
+      return (typeof b === 'string')
+        ? { text: b }
+        : b;
+    });
+  }
+  disconnectedCallback() {
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
+  }
+  componentDidLoad() {
+    /**
+     * Do not create gesture if:
+     * 1. A gesture already exists
+     * 2. App is running in MD mode
+     * 3. A wrapper ref does not exist
+     */
+    const { groupEl, wrapperEl } = this;
+    if (this.gesture || getIonMode(this) === 'md' || !wrapperEl || !groupEl) {
+      return;
+    }
+    readTask(() => {
+      const isScrollable = groupEl.scrollHeight > groupEl.clientHeight;
+      if (!isScrollable) {
+        this.gesture = createButtonActiveGesture(wrapperEl, (refEl) => refEl.classList.contains('action-sheet-button'));
+        this.gesture.enable(true);
+      }
+    });
+  }
+  render() {
+    const { htmlAttributes } = this;
+    const mode = getIonMode(this);
+    const allButtons = this.getButtons();
+    const cancelButton = allButtons.find(b => b.role === 'cancel');
+    const buttons = allButtons.filter(b => b.role !== 'cancel');
+    return (h(Host, Object.assign({ role: "dialog", "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        zIndex: `${20000 + this.overlayIndex}`,
+      }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "action-sheet-wrapper ion-overlay-wrapper", role: "dialog", ref: el => this.wrapperEl = el }, h("div", { class: "action-sheet-container" }, h("div", { class: "action-sheet-group", ref: el => this.groupEl = el }, this.header !== undefined &&
+      h("div", { class: {
+          'action-sheet-title': true,
+          'action-sheet-has-sub-title': this.subHeader !== undefined
+        } }, this.header, this.subHeader && h("div", { class: "action-sheet-sub-title" }, this.subHeader)), buttons.map(b => h("button", { type: "button", id: b.id, class: buttonClass$1(b), onClick: () => this.buttonClick(b) }, h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null)))), cancelButton &&
+      h("div", { class: "action-sheet-group action-sheet-group-cancel" }, h("button", { type: "button", class: buttonClass$1(cancelButton), onClick: () => this.buttonClick(cancelButton) }, h("span", { class: "action-sheet-button-inner" }, cancelButton.icon &&
+        h("ion-icon", { icon: cancelButton.icon, lazy: false, class: "action-sheet-icon" }), cancelButton.text), mode === 'md' && h("ion-ripple-effect", null))))), h("div", { tabindex: "0" })));
+  }
+  get el() { return getElement(this); }
+};
+const buttonClass$1 = (button) => {
+  return Object.assign({ 'action-sheet-button': true, 'ion-activatable': true, 'ion-focusable': true, [`action-sheet-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
+};
+ActionSheet.style = {
+  ios: actionSheetIosCss,
+  md: actionSheetMdCss
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * iOS Alert Enter Animation
+ */
+const iosEnterAnimation$1 = (baseEl) => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop'))
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+    'pointer-events': 'none'
+  })
+    .afterClearStyles(['pointer-events']);
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.alert-wrapper'))
+    .keyframes([
+    { offset: 0, opacity: '0.01', transform: 'scale(1.1)' },
+    { offset: 1, opacity: '1', transform: 'scale(1)' }
+  ]);
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('ease-in-out')
+    .duration(200)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * iOS Alert Leave Animation
+ */
+const iosLeaveAnimation$1 = (baseEl) => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop'))
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.alert-wrapper'))
+    .keyframes([
+    { offset: 0, opacity: 0.99, transform: 'scale(1)' },
+    { offset: 1, opacity: 0, transform: 'scale(0.9)' }
+  ]);
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('ease-in-out')
+    .duration(200)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Md Alert Enter Animation
+ */
+const mdEnterAnimation$1 = (baseEl) => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop'))
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+    'pointer-events': 'none'
+  })
+    .afterClearStyles(['pointer-events']);
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.alert-wrapper'))
+    .keyframes([
+    { offset: 0, opacity: '0.01', transform: 'scale(0.9)' },
+    { offset: 1, opacity: '1', transform: 'scale(1)' }
+  ]);
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('ease-in-out')
+    .duration(150)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Md Alert Leave Animation
+ */
+const mdLeaveAnimation$1 = (baseEl) => {
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+  backdropAnimation
+    .addElement(baseEl.querySelector('ion-backdrop'))
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
+  wrapperAnimation
+    .addElement(baseEl.querySelector('.alert-wrapper'))
+    .fromTo('opacity', 0.99, 0);
+  return baseAnimation
+    .addElement(baseEl)
+    .easing('ease-in-out')
+    .duration(150)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+const alertIosCss = ".sc-ion-alert-ios-h{--min-width:250px;--width:auto;--min-height:auto;--height:auto;--max-height:90%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:flex;position:absolute;align-items:center;justify-content:center;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;touch-action:none;user-select:none;z-index:1001}.overlay-hidden.sc-ion-alert-ios-h{display:none}.alert-top.sc-ion-alert-ios-h{padding-top:50px;align-items:flex-start}.alert-wrapper.sc-ion-alert-ios{display:flex;flex-direction:column;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);background:var(--background);contain:content;opacity:0;z-index:10}.alert-title.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.alert-sub-title.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-weight:normal}.alert-message.sc-ion-alert-ios{box-sizing:border-box;-webkit-overflow-scrolling:touch;overflow-y:auto;overscroll-behavior-y:contain}.alert-checkbox-group.sc-ion-alert-ios::-webkit-scrollbar,.alert-radio-group.sc-ion-alert-ios::-webkit-scrollbar,.alert-message.sc-ion-alert-ios::-webkit-scrollbar{display:none}.alert-input.sc-ion-alert-ios{padding-left:0;padding-right:0;padding-top:10px;padding-bottom:10px;width:100%;border:0;background:inherit;font:inherit;box-sizing:border-box}.alert-button-group.sc-ion-alert-ios{display:flex;flex-direction:row;width:100%}.alert-button-group-vertical.sc-ion-alert-ios{flex-direction:column;flex-wrap:nowrap}.alert-button.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;border:0;font-size:14px;line-height:20px;z-index:0}.alert-button.ion-focused.sc-ion-alert-ios,.alert-tappable.ion-focused.sc-ion-alert-ios{background:var(--ion-color-step-100, #e6e6e6)}.alert-button-inner.sc-ion-alert-ios{display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%}.alert-input-disabled.sc-ion-alert-ios,.alert-checkbox-button-disabled.sc-ion-alert-ios .alert-button-inner.sc-ion-alert-ios,.alert-radio-button-disabled.sc-ion-alert-ios .alert-button-inner.sc-ion-alert-ios{cursor:default;opacity:0.5;pointer-events:none}.alert-tappable.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:flex;width:100%;border:0;background:transparent;font-size:inherit;line-height:initial;text-align:start;appearance:none;contain:strict}.alert-button.sc-ion-alert-ios,.alert-checkbox.sc-ion-alert-ios,.alert-input.sc-ion-alert-ios,.alert-radio.sc-ion-alert-ios{outline:none}.alert-radio-icon.sc-ion-alert-ios,.alert-checkbox-icon.sc-ion-alert-ios,.alert-checkbox-inner.sc-ion-alert-ios{box-sizing:border-box}textarea.alert-input.sc-ion-alert-ios{min-height:37px;resize:none}.sc-ion-alert-ios-h{--background:var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9));--max-width:270px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.3);font-size:14px}.alert-wrapper.sc-ion-alert-ios{border-radius:13px;box-shadow:none;overflow:hidden}.alert-button.sc-ion-alert-ios .alert-button-inner.sc-ion-alert-ios{pointer-events:none}@supports (backdrop-filter: blur(0)){.alert-translucent.sc-ion-alert-ios-h .alert-wrapper.sc-ion-alert-ios{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.9);backdrop-filter:saturate(180%) blur(20px)}}.alert-head.sc-ion-alert-ios{padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:7px;text-align:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-head.sc-ion-alert-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.alert-title.sc-ion-alert-ios{margin-top:8px;color:var(--ion-text-color, #000);font-size:17px;font-weight:600}.alert-sub-title.sc-ion-alert-ios{color:var(--ion-color-step-600, #666666);font-size:14px}.alert-message.sc-ion-alert-ios,.alert-input-group.sc-ion-alert-ios{padding-left:16px;padding-right:16px;padding-top:0;padding-bottom:21px;color:var(--ion-text-color, #000);font-size:13px;text-align:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-message.sc-ion-alert-ios,.alert-input-group.sc-ion-alert-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.alert-message.sc-ion-alert-ios{max-height:240px}.alert-message.sc-ion-alert-ios:empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:12px}.alert-input.sc-ion-alert-ios{border-radius:4px;margin-top:10px;padding-left:6px;padding-right:6px;padding-top:6px;padding-bottom:6px;border:0.55px solid var(--ion-color-step-250, #bfbfbf);background-color:var(--ion-background-color, #fff);appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-input.sc-ion-alert-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px}}.alert-input.sc-ion-alert-ios::placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, #999999));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-ios::-ms-clear{display:none}.alert-radio-group.sc-ion-alert-ios,.alert-checkbox-group.sc-ion-alert-ios{overscroll-behavior:contain;max-height:240px;border-top:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);overflow-y:auto;-webkit-overflow-scrolling:touch}.alert-tappable.sc-ion-alert-ios{height:44px}.alert-radio-label.sc-ion-alert-ios{padding-left:13px;padding-right:13px;padding-top:13px;padding-bottom:13px;flex:1;order:0;color:var(--ion-text-color, #000);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-radio-label.sc-ion-alert-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px}}[aria-checked=true].sc-ion-alert-ios .alert-radio-label.sc-ion-alert-ios{color:var(--ion-color-primary, #3880ff)}.alert-radio-icon.sc-ion-alert-ios{position:relative;order:1;min-width:30px}[aria-checked=true].sc-ion-alert-ios .alert-radio-inner.sc-ion-alert-ios{left:7px;top:-7px;position:absolute;width:6px;height:12px;transform:rotate(45deg);border-width:2px;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--ion-color-primary, #3880ff)}[dir=rtl].sc-ion-alert-ios [aria-checked=true].sc-ion-alert-ios .alert-radio-inner.sc-ion-alert-ios,[dir=rtl].sc-ion-alert-ios-h [aria-checked=true].sc-ion-alert-ios .alert-radio-inner.sc-ion-alert-ios,[dir=rtl] .sc-ion-alert-ios-h [aria-checked=true].sc-ion-alert-ios .alert-radio-inner.sc-ion-alert-ios{left:unset;right:unset;right:7px}.alert-checkbox-label.sc-ion-alert-ios{padding-left:13px;padding-right:13px;padding-top:13px;padding-bottom:13px;flex:1;color:var(--ion-text-color, #000);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-checkbox-label.sc-ion-alert-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px}}.alert-checkbox-icon.sc-ion-alert-ios{border-radius:50%;margin-left:16px;margin-right:6px;margin-top:10px;margin-bottom:10px;position:relative;width:24px;height:24px;border-width:1px;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));background-color:var(--ion-item-background, var(--ion-background-color, #fff));contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-checkbox-icon.sc-ion-alert-ios{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:6px;margin-inline-end:6px}}[aria-checked=true].sc-ion-alert-ios .alert-checkbox-icon.sc-ion-alert-ios{border-color:var(--ion-color-primary, #3880ff);background-color:var(--ion-color-primary, #3880ff)}[aria-checked=true].sc-ion-alert-ios .alert-checkbox-inner.sc-ion-alert-ios{left:9px;top:4px;position:absolute;width:5px;height:12px;transform:rotate(45deg);border-width:1px;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--ion-background-color, #fff)}[dir=rtl].sc-ion-alert-ios [aria-checked=true].sc-ion-alert-ios .alert-checkbox-inner.sc-ion-alert-ios,[dir=rtl].sc-ion-alert-ios-h [aria-checked=true].sc-ion-alert-ios .alert-checkbox-inner.sc-ion-alert-ios,[dir=rtl] .sc-ion-alert-ios-h [aria-checked=true].sc-ion-alert-ios .alert-checkbox-inner.sc-ion-alert-ios{left:unset;right:unset;right:9px}.alert-button-group.sc-ion-alert-ios{margin-right:-0.55px;flex-wrap:wrap}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-button-group.sc-ion-alert-ios{margin-right:unset;-webkit-margin-end:-0.55px;margin-inline-end:-0.55px}}.alert-button.sc-ion-alert-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:0;flex:1 1 auto;min-width:50%;height:44px;border-top:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);border-right:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);background-color:transparent;color:var(--ion-color-primary, #3880ff);font-size:17px;overflow:hidden}[dir=rtl].sc-ion-alert-ios .alert-button.sc-ion-alert-ios:first-child,[dir=rtl].sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:first-child,[dir=rtl] .sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:first-child{border-right:0}.alert-button.sc-ion-alert-ios:last-child{border-right:0;font-weight:bold}[dir=rtl].sc-ion-alert-ios .alert-button.sc-ion-alert-ios:last-child,[dir=rtl].sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:last-child,[dir=rtl] .sc-ion-alert-ios-h .alert-button.sc-ion-alert-ios:last-child{border-right:0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}.alert-button.ion-activated.sc-ion-alert-ios{background-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1)}.alert-button-role-destructive.sc-ion-alert-ios,.alert-button-role-destructive.ion-activated.sc-ion-alert-ios,.alert-button-role-destructive.ion-focused.sc-ion-alert-ios{color:var(--ion-color-danger, #eb445a)}";
+const alertMdCss = ".sc-ion-alert-md-h{--min-width:250px;--width:auto;--min-height:auto;--height:auto;--max-height:90%;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;left:0;right:0;top:0;bottom:0;display:flex;position:absolute;align-items:center;justify-content:center;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;touch-action:none;user-select:none;z-index:1001}.overlay-hidden.sc-ion-alert-md-h{display:none}.alert-top.sc-ion-alert-md-h{padding-top:50px;align-items:flex-start}.alert-wrapper.sc-ion-alert-md{display:flex;flex-direction:column;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);background:var(--background);contain:content;opacity:0;z-index:10}.alert-title.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.alert-sub-title.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-weight:normal}.alert-message.sc-ion-alert-md{box-sizing:border-box;-webkit-overflow-scrolling:touch;overflow-y:auto;overscroll-behavior-y:contain}.alert-checkbox-group.sc-ion-alert-md::-webkit-scrollbar,.alert-radio-group.sc-ion-alert-md::-webkit-scrollbar,.alert-message.sc-ion-alert-md::-webkit-scrollbar{display:none}.alert-input.sc-ion-alert-md{padding-left:0;padding-right:0;padding-top:10px;padding-bottom:10px;width:100%;border:0;background:inherit;font:inherit;box-sizing:border-box}.alert-button-group.sc-ion-alert-md{display:flex;flex-direction:row;width:100%}.alert-button-group-vertical.sc-ion-alert-md{flex-direction:column;flex-wrap:nowrap}.alert-button.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;border:0;font-size:14px;line-height:20px;z-index:0}.alert-button.ion-focused.sc-ion-alert-md,.alert-tappable.ion-focused.sc-ion-alert-md{background:var(--ion-color-step-100, #e6e6e6)}.alert-button-inner.sc-ion-alert-md{display:flex;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%}.alert-input-disabled.sc-ion-alert-md,.alert-checkbox-button-disabled.sc-ion-alert-md .alert-button-inner.sc-ion-alert-md,.alert-radio-button-disabled.sc-ion-alert-md .alert-button-inner.sc-ion-alert-md{cursor:default;opacity:0.5;pointer-events:none}.alert-tappable.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:flex;width:100%;border:0;background:transparent;font-size:inherit;line-height:initial;text-align:start;appearance:none;contain:strict}.alert-button.sc-ion-alert-md,.alert-checkbox.sc-ion-alert-md,.alert-input.sc-ion-alert-md,.alert-radio.sc-ion-alert-md{outline:none}.alert-radio-icon.sc-ion-alert-md,.alert-checkbox-icon.sc-ion-alert-md,.alert-checkbox-inner.sc-ion-alert-md{box-sizing:border-box}textarea.alert-input.sc-ion-alert-md{min-height:37px;resize:none}.sc-ion-alert-md-h{--background:var(--ion-overlay-background-color, var(--ion-background-color, #fff));--max-width:280px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.32);font-size:14px}.alert-wrapper.sc-ion-alert-md{border-radius:4px;box-shadow:0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12)}.alert-head.sc-ion-alert-md{padding-left:23px;padding-right:23px;padding-top:20px;padding-bottom:15px;text-align:start}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-head.sc-ion-alert-md{padding-left:unset;padding-right:unset;-webkit-padding-start:23px;padding-inline-start:23px;-webkit-padding-end:23px;padding-inline-end:23px}}.alert-title.sc-ion-alert-md{color:var(--ion-text-color, #000);font-size:20px;font-weight:500}.alert-sub-title.sc-ion-alert-md{color:var(--ion-text-color, #000);font-size:16px}.alert-message.sc-ion-alert-md,.alert-input-group.sc-ion-alert-md{padding-left:24px;padding-right:24px;padding-top:20px;padding-bottom:20px;color:var(--ion-color-step-550, #737373)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-message.sc-ion-alert-md,.alert-input-group.sc-ion-alert-md{padding-left:unset;padding-right:unset;-webkit-padding-start:24px;padding-inline-start:24px;-webkit-padding-end:24px;padding-inline-end:24px}}.alert-message.sc-ion-alert-md{max-height:266px;font-size:16px}.alert-message.sc-ion-alert-md:empty{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.alert-head.sc-ion-alert-md+.alert-message.sc-ion-alert-md{padding-top:0}.alert-input.sc-ion-alert-md{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px;border-bottom:1px solid var(--ion-color-step-150, #d9d9d9);color:var(--ion-text-color, #000)}.alert-input.sc-ion-alert-md::placeholder{color:var(--ion-placeholder-color, var(--ion-color-step-400, #999999));font-family:inherit;font-weight:inherit}.alert-input.sc-ion-alert-md::-ms-clear{display:none}.alert-input.sc-ion-alert-md:focus{margin-bottom:4px;border-bottom:2px solid var(--ion-color-primary, #3880ff)}.alert-radio-group.sc-ion-alert-md,.alert-checkbox-group.sc-ion-alert-md{position:relative;max-height:266px;border-top:1px solid var(--ion-color-step-150, #d9d9d9);border-bottom:1px solid var(--ion-color-step-150, #d9d9d9);overflow:auto}.alert-tappable.sc-ion-alert-md{position:relative;height:48px;overflow:hidden}.alert-radio-label.sc-ion-alert-md{padding-left:52px;padding-right:26px;padding-top:13px;padding-bottom:13px;flex:1;color:var(--ion-color-step-850, #262626);font-size:16px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-radio-label.sc-ion-alert-md{padding-left:unset;padding-right:unset;-webkit-padding-start:52px;padding-inline-start:52px;-webkit-padding-end:26px;padding-inline-end:26px}}.alert-radio-icon.sc-ion-alert-md{left:26px;top:0;border-radius:50%;display:block;position:relative;width:20px;height:20px;border-width:2px;border-style:solid;border-color:var(--ion-color-step-550, #737373)}[dir=rtl].sc-ion-alert-md .alert-radio-icon.sc-ion-alert-md,[dir=rtl].sc-ion-alert-md-h .alert-radio-icon.sc-ion-alert-md,[dir=rtl] .sc-ion-alert-md-h .alert-radio-icon.sc-ion-alert-md{left:unset;right:unset;right:26px}.alert-radio-inner.sc-ion-alert-md{left:3px;top:3px;border-radius:50%;position:absolute;width:10px;height:10px;transform:scale3d(0, 0, 0);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--ion-color-primary, #3880ff)}[dir=rtl].sc-ion-alert-md .alert-radio-inner.sc-ion-alert-md,[dir=rtl].sc-ion-alert-md-h .alert-radio-inner.sc-ion-alert-md,[dir=rtl] .sc-ion-alert-md-h .alert-radio-inner.sc-ion-alert-md{left:unset;right:unset;right:3px}[aria-checked=true].sc-ion-alert-md .alert-radio-label.sc-ion-alert-md{color:var(--ion-color-step-850, #262626)}[aria-checked=true].sc-ion-alert-md .alert-radio-icon.sc-ion-alert-md{border-color:var(--ion-color-primary, #3880ff)}[aria-checked=true].sc-ion-alert-md .alert-radio-inner.sc-ion-alert-md{transform:scale3d(1, 1, 1)}.alert-checkbox-label.sc-ion-alert-md{padding-left:53px;padding-right:26px;padding-top:13px;padding-bottom:13px;flex:1;color:var(--ion-color-step-850, #262626);font-size:16px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-checkbox-label.sc-ion-alert-md{padding-left:unset;padding-right:unset;-webkit-padding-start:53px;padding-inline-start:53px;-webkit-padding-end:26px;padding-inline-end:26px}}.alert-checkbox-icon.sc-ion-alert-md{left:26px;top:0;border-radius:2px;position:relative;width:16px;height:16px;border-width:2px;border-style:solid;border-color:var(--ion-color-step-550, #737373);contain:strict}[dir=rtl].sc-ion-alert-md .alert-checkbox-icon.sc-ion-alert-md,[dir=rtl].sc-ion-alert-md-h .alert-checkbox-icon.sc-ion-alert-md,[dir=rtl] .sc-ion-alert-md-h .alert-checkbox-icon.sc-ion-alert-md{left:unset;right:unset;right:26px}[aria-checked=true].sc-ion-alert-md .alert-checkbox-icon.sc-ion-alert-md{border-color:var(--ion-color-primary, #3880ff);background-color:var(--ion-color-primary, #3880ff)}[aria-checked=true].sc-ion-alert-md .alert-checkbox-inner.sc-ion-alert-md{left:3px;top:0;position:absolute;width:6px;height:10px;transform:rotate(45deg);border-width:2px;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--ion-color-primary-contrast, #fff)}[dir=rtl].sc-ion-alert-md [aria-checked=true].sc-ion-alert-md .alert-checkbox-inner.sc-ion-alert-md,[dir=rtl].sc-ion-alert-md-h [aria-checked=true].sc-ion-alert-md .alert-checkbox-inner.sc-ion-alert-md,[dir=rtl] .sc-ion-alert-md-h [aria-checked=true].sc-ion-alert-md .alert-checkbox-inner.sc-ion-alert-md{left:unset;right:unset;right:3px}.alert-button-group.sc-ion-alert-md{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;box-sizing:border-box;flex-wrap:wrap-reverse;justify-content:flex-end}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-button-group.sc-ion-alert-md{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.alert-button.sc-ion-alert-md{border-radius:2px;margin-left:0;margin-right:8px;margin-top:0;margin-bottom:0;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;color:var(--ion-color-primary, #3880ff);font-weight:500;text-align:end;text-transform:uppercase;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-button.sc-ion-alert-md{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.alert-button.sc-ion-alert-md{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}.alert-button-inner.sc-ion-alert-md{justify-content:flex-end}";
+const Alert = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.didPresent = createEvent(this, "ionAlertDidPresent", 7);
+    this.willPresent = createEvent(this, "ionAlertWillPresent", 7);
+    this.willDismiss = createEvent(this, "ionAlertWillDismiss", 7);
+    this.didDismiss = createEvent(this, "ionAlertDidDismiss", 7);
+    this.processedInputs = [];
+    this.processedButtons = [];
+    this.presented = false;
+    /**
+     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+     */
+    this.keyboardClose = true;
+    /**
+     * Array of buttons to be added to the alert.
+     */
+    this.buttons = [];
+    /**
+     * Array of input to show in the alert.
+     */
+    this.inputs = [];
+    /**
+     * If `true`, the alert will be dismissed when the backdrop is clicked.
+     */
+    this.backdropDismiss = true;
+    /**
+     * If `true`, the alert will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     */
+    this.translucent = false;
+    /**
+     * If `true`, the alert will animate.
+     */
+    this.animated = true;
+    this.onBackdropTap = () => {
+      this.dismiss(undefined, BACKDROP);
+    };
+    this.dispatchCancelHandler = (ev) => {
+      const role = ev.detail.role;
+      if (isCancel(role)) {
+        const cancelButton = this.processedButtons.find(b => b.role === 'cancel');
+        this.callButtonHandler(cancelButton);
+      }
+    };
+  }
+  onKeydown(ev) {
+    const inputTypes = new Set(this.processedInputs.map(i => i.type));
+    // The only inputs we want to navigate between using arrow keys are the radios
+    // ignore the keydown event if it is not on a radio button
+    if (!inputTypes.has('radio')
+      || (ev.target && !this.el.contains(ev.target))
+      || ev.target.classList.contains('alert-button')) {
+      return;
+    }
+    // Get all radios inside of the radio group and then
+    // filter out disabled radios since we need to skip those
+    const query = this.el.querySelectorAll('.alert-radio');
+    const radios = Array.from(query).filter(radio => !radio.disabled);
+    // The focused radio is the one that shares the same id as
+    // the event target
+    const index = radios.findIndex(radio => radio.id === ev.target.id);
+    // We need to know what the next radio element should
+    // be in order to change the focus
+    let nextEl;
+    // If hitting arrow down or arrow right, move to the next radio
+    // If we're on the last radio, move to the first radio
+    if (['ArrowDown', 'ArrowRight'].includes(ev.code)) {
+      nextEl = (index === radios.length - 1)
+        ? radios[0]
+        : radios[index + 1];
+    }
+    // If hitting arrow up or arrow left, move to the previous radio
+    // If we're on the first radio, move to the last radio
+    if (['ArrowUp', 'ArrowLeft'].includes(ev.code)) {
+      nextEl = (index === 0)
+        ? radios[radios.length - 1]
+        : radios[index - 1];
+    }
+    if (nextEl && radios.includes(nextEl)) {
+      const nextProcessed = this.processedInputs.find(input => input.id === (nextEl === null || nextEl === void 0 ? void 0 : nextEl.id));
+      if (nextProcessed) {
+        this.rbClick(nextProcessed);
+        nextEl.focus();
+      }
+    }
+  }
+  buttonsChanged() {
+    const buttons = this.buttons;
+    this.processedButtons = buttons.map(btn => {
+      return (typeof btn === 'string')
+        ? { text: btn, role: btn.toLowerCase() === 'cancel' ? 'cancel' : undefined }
+        : btn;
+    });
+  }
+  inputsChanged() {
+    const inputs = this.inputs;
+    // Get the first input that is not disabled and the checked one
+    // If an enabled checked input exists, set it to be the focusable input
+    // otherwise we default to focus the first input
+    // This will only be used when the input is type radio
+    const first = inputs.find(input => !input.disabled);
+    const checked = inputs.find(input => input.checked && !input.disabled);
+    const focusable = checked || first;
+    // An alert can be created with several different inputs. Radios,
+    // checkboxes and inputs are all accepted, but they cannot be mixed.
+    const inputTypes = new Set(inputs.map(i => i.type));
+    if (inputTypes.has('checkbox') && inputTypes.has('radio')) {
+      console.warn(`Alert cannot mix input types: ${(Array.from(inputTypes.values()).join('/'))}. Please see alert docs for more info.`);
+    }
+    this.inputType = inputTypes.values().next().value;
+    this.processedInputs = inputs.map((i, index) => ({
+      type: i.type || 'text',
+      name: i.name || `${index}`,
+      placeholder: i.placeholder || '',
+      value: i.value,
+      label: i.label,
+      checked: !!i.checked,
+      disabled: !!i.disabled,
+      id: i.id || `alert-input-${this.overlayIndex}-${index}`,
+      handler: i.handler,
+      min: i.min,
+      max: i.max,
+      cssClass: i.cssClass || '',
+      attributes: i.attributes || {},
+      tabindex: (i.type === 'radio' && i !== focusable) ? -1 : 0
+    }));
+  }
+  connectedCallback() {
+    prepareOverlay(this.el);
+  }
+  componentWillLoad() {
+    this.inputsChanged();
+    this.buttonsChanged();
+  }
+  disconnectedCallback() {
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
+  }
+  componentDidLoad() {
+    /**
+     * Do not create gesture if:
+     * 1. A gesture already exists
+     * 2. App is running in MD mode
+     * 3. A wrapper ref does not exist
+     */
+    if (this.gesture || getIonMode(this) === 'md' || !this.wrapperEl) {
+      return;
+    }
+    this.gesture = createButtonActiveGesture(this.wrapperEl, (refEl) => refEl.classList.contains('alert-button'));
+    this.gesture.enable(true);
+  }
+  /**
+   * Present the alert overlay after it has been created.
+   */
+  present() {
+    return present(this, 'alertEnter', iosEnterAnimation$1, mdEnterAnimation$1);
+  }
+  /**
+   * Dismiss the alert overlay after it has been presented.
+   *
+   * @param data Any data to emit in the dismiss events.
+   * @param role The role of the element that is dismissing the alert.
+   * This can be useful in a button handler for determining which button was
+   * clicked to dismiss the alert.
+   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   */
+  dismiss(data, role) {
+    return dismiss(this, data, role, 'alertLeave', iosLeaveAnimation$1, mdLeaveAnimation$1);
+  }
+  /**
+   * Returns a promise that resolves when the alert did dismiss.
+   */
+  onDidDismiss() {
+    return eventMethod(this.el, 'ionAlertDidDismiss');
+  }
+  /**
+   * Returns a promise that resolves when the alert will dismiss.
+   */
+  onWillDismiss() {
+    return eventMethod(this.el, 'ionAlertWillDismiss');
+  }
+  rbClick(selectedInput) {
+    for (const input of this.processedInputs) {
+      input.checked = input === selectedInput;
+      input.tabindex = input === selectedInput ? 0 : -1;
+    }
+    this.activeId = selectedInput.id;
+    safeCall(selectedInput.handler, selectedInput);
+    forceUpdate(this);
+  }
+  cbClick(selectedInput) {
+    selectedInput.checked = !selectedInput.checked;
+    safeCall(selectedInput.handler, selectedInput);
+    forceUpdate(this);
+  }
+  buttonClick(button) {
+    const role = button.role;
+    const values = this.getValues();
+    if (isCancel(role)) {
+      return this.dismiss({ values }, role);
+    }
+    const returnData = this.callButtonHandler(button, values);
+    if (returnData !== false) {
+      return this.dismiss(Object.assign({ values }, returnData), button.role);
+    }
+    return Promise.resolve(false);
+  }
+  callButtonHandler(button, data) {
+    if (button && button.handler) {
+      // a handler has been provided, execute it
+      // pass the handler the values from the inputs
+      const returnData = safeCall(button.handler, data);
+      if (returnData === false) {
+        // if the return value of the handler is false then do not dismiss
+        return false;
+      }
+      if (typeof returnData === 'object') {
+        return returnData;
+      }
+    }
+    return {};
+  }
+  getValues() {
+    if (this.processedInputs.length === 0) {
+      // this is an alert without any options/inputs at all
+      return undefined;
+    }
+    if (this.inputType === 'radio') {
+      // this is an alert with radio buttons (single value select)
+      // return the one value which is checked, otherwise undefined
+      const checkedInput = this.processedInputs.find(i => !!i.checked);
+      return checkedInput ? checkedInput.value : undefined;
+    }
+    if (this.inputType === 'checkbox') {
+      // this is an alert with checkboxes (multiple value select)
+      // return an array of all the checked values
+      return this.processedInputs.filter(i => i.checked).map(i => i.value);
+    }
+    // this is an alert with text inputs
+    // return an object of all the values with the input name as the key
+    const values = {};
+    this.processedInputs.forEach(i => {
+      values[i.name] = i.value || '';
+    });
+    return values;
+  }
+  renderAlertInputs() {
+    switch (this.inputType) {
+      case 'checkbox': return this.renderCheckbox();
+      case 'radio': return this.renderRadio();
+      default: return this.renderInput();
+    }
+  }
+  renderCheckbox() {
+    const inputs = this.processedInputs;
+    const mode = getIonMode(this);
+    if (inputs.length === 0) {
+      return null;
+    }
+    return (h("div", { class: "alert-checkbox-group" }, inputs.map(i => (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), h("div", { class: "alert-checkbox-label" }, i.label)), mode === 'md' && h("ion-ripple-effect", null))))));
+  }
+  renderRadio() {
+    const inputs = this.processedInputs;
+    if (inputs.length === 0) {
+      return null;
+    }
+    return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map(i => (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': true, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), h("div", { class: "alert-radio-label" }, i.label)))))));
+  }
+  renderInput() {
+    const inputs = this.processedInputs;
+    if (inputs.length === 0) {
+      return null;
+    }
+    return (h("div", { class: "alert-input-group" }, inputs.map(i => {
+      var _a, _b, _c, _d;
+      if (i.type === 'textarea') {
+        return (h("div", { class: "alert-input-wrapper" }, h("textarea", Object.assign({ placeholder: i.placeholder, value: i.value, id: i.id, tabIndex: i.tabindex }, i.attributes, { disabled: (_b = (_a = i.attributes) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : i.disabled, class: inputClass(i), onInput: e => {
+            var _a;
+            i.value = e.target.value;
+            if ((_a = i.attributes) === null || _a === void 0 ? void 0 : _a.onInput) {
+              i.attributes.onInput(e);
+            }
+          } }))));
+      }
+      else {
+        return (h("div", { class: "alert-input-wrapper" }, h("input", Object.assign({ placeholder: i.placeholder, type: i.type, min: i.min, max: i.max, value: i.value, id: i.id, tabIndex: i.tabindex }, i.attributes, { disabled: (_d = (_c = i.attributes) === null || _c === void 0 ? void 0 : _c.disabled) !== null && _d !== void 0 ? _d : i.disabled, class: inputClass(i), onInput: e => {
+            var _a;
+            i.value = e.target.value;
+            if ((_a = i.attributes) === null || _a === void 0 ? void 0 : _a.onInput) {
+              i.attributes.onInput(e);
+            }
+          } }))));
+      }
+    })));
+  }
+  renderAlertButtons() {
+    const buttons = this.processedButtons;
+    const mode = getIonMode(this);
+    const alertButtonGroupClass = {
+      'alert-button-group': true,
+      'alert-button-group-vertical': buttons.length > 2
+    };
+    return (h("div", { class: alertButtonGroupClass }, buttons.map(button => h("button", { type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }, h("span", { class: "alert-button-inner" }, button.text), mode === 'md' && h("ion-ripple-effect", null)))));
+  }
+  render() {
+    const { overlayIndex, header, subHeader, htmlAttributes } = this;
+    const mode = getIonMode(this);
+    const hdrId = `alert-${overlayIndex}-hdr`;
+    const subHdrId = `alert-${overlayIndex}-sub-hdr`;
+    const msgId = `alert-${overlayIndex}-msg`;
+    const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';
+    return (h(Host, Object.assign({ role: role, "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        zIndex: `${20000 + overlayIndex}`,
+      }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "alert-wrapper ion-overlay-wrapper", ref: el => this.wrapperEl = el }, h("div", { class: "alert-head" }, header && h("h2", { id: hdrId, class: "alert-title" }, header), subHeader && h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader)), h("div", { id: msgId, class: "alert-message", innerHTML: sanitizeDOMString(this.message) }), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { tabindex: "0" })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "buttons": ["buttonsChanged"],
+    "inputs": ["inputsChanged"]
+  }; }
+};
+const inputClass = (input) => {
+  var _a, _b, _c;
+  return Object.assign(Object.assign({ 'alert-input': true, 'alert-input-disabled': ((_b = (_a = input.attributes) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : input.disabled) || false }, getClassMap(input.cssClass)), getClassMap(input.attributes ? (_c = input.attributes.class) === null || _c === void 0 ? void 0 : _c.toString() : ''));
+};
+const buttonClass = (button) => {
+  return Object.assign({ 'alert-button': true, 'ion-focusable': true, 'ion-activatable': true, [`alert-button-role-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
+};
+Alert.style = {
+  ios: alertIosCss,
+  md: alertMdCss
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Returns the dimensions of the popover
+ * arrow on `ios` mode. If arrow is disabled
+ * returns (0, 0).
+ */
+const getArrowDimensions = (arrowEl) => {
+  if (!arrowEl) {
+    return { arrowWidth: 0, arrowHeight: 0 };
+  }
+  const { width, height } = arrowEl.getBoundingClientRect();
+  return { arrowWidth: width, arrowHeight: height };
+};
+/**
+ * Returns the recommended dimensions of the popover
+ * that takes into account whether or not the width
+ * should match the trigger width.
+ */
+const getPopoverDimensions = (size, contentEl, triggerEl) => {
+  const contentDimentions = contentEl.getBoundingClientRect();
+  const contentHeight = contentDimentions.height;
+  let contentWidth = contentDimentions.width;
+  if (size === 'cover' && triggerEl) {
+    const triggerDimensions = triggerEl.getBoundingClientRect();
+    contentWidth = triggerDimensions.width;
+  }
+  return {
+    contentWidth,
+    contentHeight
+  };
+};
+const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parentPopoverEl) => {
+  let dismissCallbacks = [];
+  const root = getElementRoot(parentPopoverEl);
+  const parentContentEl = root.querySelector('.popover-content');
+  switch (triggerAction) {
+    case 'hover':
+      dismissCallbacks = [
+        {
+          /**
+           * Do not use mouseover here
+           * as this will causes the event to
+           * be dispatched on each underlying
+           * element rather than on the popover
+           * content as a whole.
+           */
+          eventName: 'mouseenter',
+          callback: (ev) => {
+            /**
+             * Do not dismiss the popover is we
+             * are hovering over its trigger.
+             * This would be easier if we used mouseover
+             * but this would cause the event to be dispatched
+             * more often than we would like, potentially
+             * causing performance issues.
+             */
+            const element = document.elementFromPoint(ev.clientX, ev.clientY);
+            if (element === triggerEl) {
+              return;
+            }
+            popoverEl.dismiss(undefined, undefined, false);
+          }
+        }
+      ];
+      break;
+    case 'context-menu':
+    case 'click':
+    default:
+      dismissCallbacks = [
+        {
+          eventName: 'click',
+          callback: (ev) => {
+            /**
+             * Do not dismiss the popover is we
+             * are hovering over its trigger.
+             */
+            const target = ev.target;
+            const closestTrigger = target.closest('[data-ion-popover-trigger]');
+            if (closestTrigger === triggerEl) {
+              /**
+               * stopPropagation here so if the
+               * popover has dismissOnSelect="true"
+               * the popover does not dismiss since
+               * we just clicked a trigger element.
+               */
+              ev.stopPropagation();
+              return;
+            }
+            popoverEl.dismiss(undefined, undefined, false);
+          }
+        }
+      ];
+      break;
+  }
+  dismissCallbacks.forEach(({ eventName, callback }) => parentContentEl.addEventListener(eventName, callback));
+  return () => {
+    dismissCallbacks.forEach(({ eventName, callback }) => parentContentEl.removeEventListener(eventName, callback));
+  };
+};
+/**
+ * Configures the triggerEl to respond
+ * to user interaction based upon the triggerAction
+ * prop that devs have defined.
+ */
+const configureTriggerInteraction = (triggerEl, triggerAction, popoverEl) => {
+  let triggerCallbacks = [];
+  /**
+   * Based upon the kind of trigger interaction
+   * the user wants, we setup the correct event
+   * listeners.
+   */
+  switch (triggerAction) {
+    case 'hover':
+      let hoverTimeout;
+      triggerCallbacks = [
+        {
+          eventName: 'mouseenter',
+          callback: async (ev) => {
+            ev.stopPropagation();
+            if (hoverTimeout) {
+              clearTimeout(hoverTimeout);
+            }
+            /**
+             * Hovering over a trigger should not
+             * immediately open the next popover.
+             */
+            hoverTimeout = setTimeout(() => {
+              raf(() => {
+                popoverEl.presentFromTrigger(ev);
+                hoverTimeout = undefined;
+              });
+            }, 100);
+          }
+        },
+        {
+          eventName: 'mouseleave',
+          callback: (ev) => {
+            if (hoverTimeout) {
+              clearTimeout(hoverTimeout);
+            }
+            /**
+             * If mouse is over another popover
+             * that is not this popover then we should
+             * close this popover.
+             */
+            const target = ev.relatedTarget;
+            if (!target) {
+              return;
+            }
+            if (target.closest('ion-popover') !== popoverEl) {
+              popoverEl.dismiss(undefined, undefined, false);
+            }
+          }
+        },
+        {
+          /**
+           * stopPropagation here prevents the popover
+           * from dismissing when dismiss-on-select="true".
+           */
+          eventName: 'click',
+          callback: (ev) => ev.stopPropagation()
+        },
+        {
+          eventName: 'ionPopoverActivateTrigger',
+          callback: (ev) => popoverEl.presentFromTrigger(ev, true)
+        }
+      ];
+      break;
+    case 'context-menu':
+      triggerCallbacks = [
+        {
+          eventName: 'contextmenu',
+          callback: (ev) => {
+            /**
+             * Prevents the platform context
+             * menu from appearing.
+             */
+            ev.preventDefault();
+            popoverEl.presentFromTrigger(ev);
+          }
+        },
+        {
+          eventName: 'click',
+          callback: (ev) => ev.stopPropagation()
+        },
+        {
+          eventName: 'ionPopoverActivateTrigger',
+          callback: (ev) => popoverEl.presentFromTrigger(ev, true)
+        }
+      ];
+      break;
+    case 'click':
+    default:
+      triggerCallbacks = [
+        {
+          /**
+           * Do not do a stopPropagation() here
+           * because if you had two click triggers
+           * then clicking the first trigger and then
+           * clicking the second trigger would not cause
+           * the first popover to dismiss.
+           */
+          eventName: 'click',
+          callback: (ev) => popoverEl.presentFromTrigger(ev)
+        },
+        {
+          eventName: 'ionPopoverActivateTrigger',
+          callback: (ev) => popoverEl.presentFromTrigger(ev, true)
+        }
+      ];
+      break;
+  }
+  triggerCallbacks.forEach(({ eventName, callback }) => triggerEl.addEventListener(eventName, callback));
+  triggerEl.setAttribute('data-ion-popover-trigger', 'true');
+  return () => {
+    triggerCallbacks.forEach(({ eventName, callback }) => triggerEl.removeEventListener(eventName, callback));
+    triggerEl.removeAttribute('data-ion-popover-trigger');
+  };
+};
+/**
+ * Returns the index of an ion-item in an array of ion-items.
+ */
+const getIndexOfItem = (items, item) => {
+  if (!item || item.tagName !== 'ION-ITEM') {
+    return -1;
+  }
+  return items.findIndex(el => el === item);
+};
+/**
+ * Given an array of elements and a currently focused ion-item
+ * returns the next ion-item relative to the focused one or
+ * undefined.
+ */
+const getNextItem = (items, currentItem) => {
+  const currentItemIndex = getIndexOfItem(items, currentItem);
+  return items[currentItemIndex + 1];
+};
+/**
+ * Given an array of elements and a currently focused ion-item
+ * returns the previous ion-item relative to the focused one or
+ * undefined.
+ */
+const getPrevItem = (items, currentItem) => {
+  const currentItemIndex = getIndexOfItem(items, currentItem);
+  return items[currentItemIndex - 1];
+};
+/** Focus the internal button of the ion-item */
+const focusItem = (item) => {
+  const root = getElementRoot(item);
+  const button = root.querySelector('button');
+  if (button) {
+    raf(() => button.focus());
+  }
+};
+/**
+ * Returns `true` if `el` has been designated
+ * as a trigger element for an ion-popover.
+ */
+const isTriggerElement = (el) => el.hasAttribute('data-ion-popover-trigger');
+const configureKeyboardInteraction = (popoverEl) => {
+  const callback = async (ev) => {
+    const activeElement = document.activeElement;
+    let items = [];
+    /**
+     * Complex selectors with :not() are :not supported
+     * in older versions of Chromium so we need to do a
+     * try/catch here so errors are not thrown.
+     */
+    try {
+      /**
+       * Select all ion-items that are not children of child popovers.
+       * i.e. only select ion-item elements that are part of this popover
+       */
+      items = Array.from(popoverEl.querySelectorAll('ion-item:not(ion-popover ion-popover *):not([disabled])'));
+      /* tslint:disable-next-line */
+    }
+    catch (_a) { }
+    switch (ev.key) {
+      /**
+       * If we are in a child popover
+       * then pressing the left arrow key
+       * should close this popover and move
+       * focus to the popover that presented
+       * this one.
+       */
+      case 'ArrowLeft':
+        const parentPopover = await popoverEl.getParentPopover();
+        if (parentPopover) {
+          popoverEl.dismiss(undefined, undefined, false);
+        }
+        break;
+      /**
+       * ArrowDown should move focus to the next focusable ion-item.
+       */
+      case 'ArrowDown':
+        // Disable movement/scroll with keyboard
+        ev.preventDefault();
+        const nextItem = getNextItem(items, activeElement);
+        // tslint:disable-next-line:strict-type-predicates
+        if (nextItem !== undefined) {
+          focusItem(nextItem);
+        }
+        break;
+      /**
+       * ArrowUp should move focus to the previous focusable ion-item.
+       */
+      case 'ArrowUp':
+        // Disable movement/scroll with keyboard
+        ev.preventDefault();
+        const prevItem = getPrevItem(items, activeElement);
+        // tslint:disable-next-line:strict-type-predicates
+        if (prevItem !== undefined) {
+          focusItem(prevItem);
+        }
+        break;
+      /**
+       * Home should move focus to the first focusable ion-item.
+       */
+      case 'Home':
+        ev.preventDefault();
+        const firstItem = items[0];
+        // tslint:disable-next-line:strict-type-predicates
+        if (firstItem !== undefined) {
+          focusItem(firstItem);
+        }
+        break;
+      /**
+       * End should move focus to the last focusable ion-item.
+       */
+      case 'End':
+        ev.preventDefault();
+        const lastItem = items[items.length - 1];
+        // tslint:disable-next-line:strict-type-predicates
+        if (lastItem !== undefined) {
+          focusItem(lastItem);
+        }
+        break;
+      /**
+       * ArrowRight, Spacebar, or Enter should activate
+       * the currently focused trigger item to open a
+       * popover if the element is a trigger item.
+       */
+      case 'ArrowRight':
+      case ' ':
+      case 'Enter':
+        if (activeElement && isTriggerElement(activeElement)) {
+          const rightEvent = new CustomEvent('ionPopoverActivateTrigger');
+          activeElement.dispatchEvent(rightEvent);
+        }
+        break;
+    }
+  };
+  popoverEl.addEventListener('keydown', callback);
+  return () => popoverEl.removeEventListener('keydown', callback);
+};
+/**
+ * Positions a popover by taking into account
+ * the reference point, preferred side, alignment
+ * and viewport dimensions.
+ */
+const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, triggerEl, event) => {
+  var _a;
+  let referenceCoordinates = {
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0
+  };
+  /**
+   * Calculate position relative to the
+   * x-y coordinates in the event that
+   * was passed in
+   */
+  switch (reference) {
+    case 'event':
+      if (!event) {
+        return defaultPosition;
+      }
+      const mouseEv = event;
+      referenceCoordinates = {
+        top: mouseEv.clientY,
+        left: mouseEv.clientX,
+        width: 1,
+        height: 1
+      };
+      break;
+    /**
+     * Calculate position relative to the bounding
+     * box on either the trigger element
+     * specified via the `trigger` prop or
+     * the target specified on the event
+     * that was passed in.
+     */
+    case 'trigger':
+    default:
+      const customEv = event;
+      /**
+       * ionShadowTarget is used when we need to align the
+       * popover with an element inside of the shadow root
+       * of an Ionic component. Ex: Presenting a popover
+       * by clicking on the collapsed indicator inside
+       * of `ion-breadcrumb` and centering it relative
+       * to the indicator rather than `ion-breadcrumb`
+       * as a whole.
+       */
+      const actualTriggerEl = (triggerEl || ((_a = customEv === null || customEv === void 0 ? void 0 : customEv.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (customEv === null || customEv === void 0 ? void 0 : customEv.target));
+      if (!actualTriggerEl) {
+        return defaultPosition;
+      }
+      const triggerBoundingBox = actualTriggerEl.getBoundingClientRect();
+      referenceCoordinates = {
+        top: triggerBoundingBox.top,
+        left: triggerBoundingBox.left,
+        width: triggerBoundingBox.width,
+        height: triggerBoundingBox.height
+      };
+      break;
+  }
+  /**
+   * Get top/left offset that would allow
+   * popover to be positioned on the
+   * preferred side of the reference.
+   */
+  const coordinates = calculatePopoverSide(side, referenceCoordinates, contentWidth, contentHeight, arrowWidth, arrowHeight, isRTL);
+  /**
+   * Get the top/left adjustments that
+   * would allow the popover content
+   * to have the correct alignment.
+   */
+  const alignedCoordinates = calculatePopoverAlign(align, side, referenceCoordinates, contentWidth, contentHeight);
+  const top = coordinates.top + alignedCoordinates.top;
+  const left = coordinates.left + alignedCoordinates.left;
+  const { arrowTop, arrowLeft } = calculateArrowPosition(side, arrowWidth, arrowHeight, top, left, contentWidth, contentHeight, isRTL);
+  const { originX, originY } = calculatePopoverOrigin(side, align, isRTL);
+  return { top, left, referenceCoordinates, arrowTop, arrowLeft, originX, originY };
+};
+/**
+ * Determines the transform-origin
+ * of the popover animation so that it
+ * is in line with what the side and alignment
+ * prop values are. Currently only used
+ * with the MD animation.
+ */
+const calculatePopoverOrigin = (side, align, isRTL) => {
+  switch (side) {
+    case 'top':
+      return { originX: getOriginXAlignment(align), originY: 'bottom' };
+    case 'bottom':
+      return { originX: getOriginXAlignment(align), originY: 'top' };
+    case 'left':
+      return { originX: 'right', originY: getOriginYAlignment(align) };
+    case 'right':
+      return { originX: 'left', originY: getOriginYAlignment(align) };
+    case 'start':
+      return { originX: (isRTL) ? 'left' : 'right', originY: getOriginYAlignment(align) };
+    case 'end':
+      return { originX: (isRTL) ? 'right' : 'left', originY: getOriginYAlignment(align) };
+  }
+};
+const getOriginXAlignment = (align) => {
+  switch (align) {
+    case 'start':
+      return 'left';
+    case 'center':
+      return 'center';
+    case 'end':
+      return 'right';
+  }
+};
+const getOriginYAlignment = (align) => {
+  switch (align) {
+    case 'start':
+      return 'top';
+    case 'center':
+      return 'center';
+    case 'end':
+      return 'bottom';
+  }
+};
+/**
+ * Calculates where the arrow positioning
+ * should be relative to the popover content.
+ */
+const calculateArrowPosition = (side, arrowWidth, arrowHeight, top, left, contentWidth, contentHeight, isRTL) => {
+  /**
+   * Note: When side is left, right, start, or end, the arrow is
+   * been rotated using a `transform`, so to move the arrow up or down
+   * by its dimension, you need to use `arrowWidth`.
+   */
+  const leftPosition = { arrowTop: top + (contentHeight / 2) - (arrowWidth / 2), arrowLeft: left + contentWidth - (arrowWidth / 2) };
+  /**
+   * Move the arrow to the left by arrowWidth and then
+   * again by half of its width because we have rotated
+   * the arrow using a transform.
+   */
+  const rightPosition = { arrowTop: top + (contentHeight / 2) - (arrowWidth / 2), arrowLeft: left - (arrowWidth * 1.5) };
+  switch (side) {
+    case 'top':
+      return { arrowTop: top + contentHeight, arrowLeft: left + (contentWidth / 2) - (arrowWidth / 2) };
+    case 'bottom':
+      return { arrowTop: top - arrowHeight, arrowLeft: left + (contentWidth / 2) - (arrowWidth / 2) };
+    case 'left':
+      return leftPosition;
+    case 'right':
+      return rightPosition;
+    case 'start':
+      return (isRTL) ? rightPosition : leftPosition;
+    case 'end':
+      return (isRTL) ? leftPosition : rightPosition;
+    default:
+      return { arrowTop: 0, arrowLeft: 0 };
+  }
+};
+/**
+ * Calculates the required top/left
+ * values needed to position the popover
+ * content on the side specified in the
+ * `side` prop.
+ */
+const calculatePopoverSide = (side, triggerBoundingBox, contentWidth, contentHeight, arrowWidth, arrowHeight, isRTL) => {
+  const sideLeft = {
+    top: triggerBoundingBox.top,
+    left: triggerBoundingBox.left - contentWidth - arrowWidth
+  };
+  const sideRight = {
+    top: triggerBoundingBox.top,
+    left: triggerBoundingBox.left + triggerBoundingBox.width + arrowWidth
+  };
+  switch (side) {
+    case 'top':
+      return {
+        top: triggerBoundingBox.top - contentHeight - arrowHeight,
+        left: triggerBoundingBox.left
+      };
+    case 'right':
+      return sideRight;
+    case 'bottom':
+      return {
+        top: triggerBoundingBox.top + triggerBoundingBox.height + arrowHeight,
+        left: triggerBoundingBox.left
+      };
+    case 'left':
+      return sideLeft;
+    case 'start':
+      return (isRTL) ? sideRight : sideLeft;
+    case 'end':
+      return (isRTL) ? sideLeft : sideRight;
+  }
+};
+/**
+ * Calculates the required top/left
+ * offset values needed to provide the
+ * correct alignment regardless while taking
+ * into account the side the popover is on.
+ */
+const calculatePopoverAlign = (align, side, triggerBoundingBox, contentWidth, contentHeight) => {
+  switch (align) {
+    case 'center':
+      return calculatePopoverCenterAlign(side, triggerBoundingBox, contentWidth, contentHeight);
+    case 'end':
+      return calculatePopoverEndAlign(side, triggerBoundingBox, contentWidth, contentHeight);
+    case 'start':
+    default:
+      return { top: 0, left: 0 };
+  }
+};
+/**
+ * Calculate the end alignment for
+ * the popover. If side is on the x-axis
+ * then the align values refer to the top
+ * and bottom margins of the content.
+ * If side is on the y-axis then the
+ * align values refer to the left and right
+ * margins of the content.
+ */
+const calculatePopoverEndAlign = (side, triggerBoundingBox, contentWidth, contentHeight) => {
+  switch (side) {
+    case 'start':
+    case 'end':
+    case 'left':
+    case 'right':
+      return {
+        top: -(contentHeight - triggerBoundingBox.height),
+        left: 0
+      };
+    case 'top':
+    case 'bottom':
+    default:
+      return {
+        top: 0,
+        left: -(contentWidth - triggerBoundingBox.width)
+      };
+  }
+};
+/**
+ * Calculate the center alignment for
+ * the popover. If side is on the x-axis
+ * then the align values refer to the top
+ * and bottom margins of the content.
+ * If side is on the y-axis then the
+ * align values refer to the left and right
+ * margins of the content.
+ */
+const calculatePopoverCenterAlign = (side, triggerBoundingBox, contentWidth, contentHeight) => {
+  switch (side) {
+    case 'start':
+    case 'end':
+    case 'left':
+    case 'right':
+      return {
+        top: -((contentHeight / 2) - (triggerBoundingBox.height / 2)),
+        left: 0
+      };
+    case 'top':
+    case 'bottom':
+    default:
+      return {
+        top: 0,
+        left: -((contentWidth / 2) - (triggerBoundingBox.width / 2))
+      };
+  }
+};
+/**
+ * Adjusts popover positioning coordinates
+ * such that popover does not appear offscreen
+ * or overlapping safe area bounds.
+ */
+const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeAreaMargin, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0) => {
+  let arrowTop = coordArrowTop;
+  const arrowLeft = coordArrowLeft;
+  let left = coordLeft;
+  let top = coordTop;
+  let bottom;
+  let originX = contentOriginX;
+  let originY = contentOriginY;
+  let checkSafeAreaLeft = false;
+  let checkSafeAreaRight = false;
+  const triggerTop = triggerCoordinates ? triggerCoordinates.top + triggerCoordinates.height : bodyHeight / 2 - contentHeight / 2;
+  const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
+  let addPopoverBottomClass = false;
+  /**
+   * Adjust popover so it does not
+   * go off the left of the screen.
+   */
+  if (left < bodyPadding + safeAreaMargin) {
+    left = bodyPadding;
+    checkSafeAreaLeft = true;
+    originX = 'left';
+    /**
+     * Adjust popover so it does not
+     * go off the right of the screen.
+     */
+  }
+  else if (contentWidth + bodyPadding + left + safeAreaMargin > bodyWidth) {
+    checkSafeAreaRight = true;
+    left = bodyWidth - contentWidth - bodyPadding;
+    originX = 'right';
+  }
+  /**
+   * Adjust popover so it does not
+   * go off the top of the screen.
+   * If popover is on the left or the right of
+   * the trigger, then we should not adjust top
+   * margins.
+   */
+  if (triggerTop + triggerHeight + contentHeight > bodyHeight &&
+    (side === 'top' || side === 'bottom')) {
+    if (triggerTop - contentHeight > 0) {
+      top = triggerTop - contentHeight - triggerHeight - (arrowHeight - 1);
+      arrowTop = top + contentHeight;
+      originY = 'bottom';
+      addPopoverBottomClass = true;
+      /**
+       * If not enough room for popover to appear
+       * above trigger, then cut it off.
+       */
+    }
+    else {
+      bottom = bodyPadding;
+    }
+  }
+  return { top, left, bottom, originX, originY, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass };
+};
+const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
+  /**
+   * If no event provided and
+   * we do not have a trigger,
+   * then this popover was likely
+   * presented via the popoverController
+   * or users called `present` manually.
+   * In this case, the arrow should not be
+   * shown as we do not have a reference.
+   */
+  if (!ev && !trigger) {
+    return false;
+  }
+  /**
+   * If popover is on the left or the right
+   * of a trigger, but we needed to adjust the
+   * popover due to screen bounds, then we should
+   * hide the arrow as it will never be pointing
+   * at the trigger.
+   */
+  if (side !== 'top' && side !== 'bottom' && didAdjustBounds) {
+    return false;
+  }
+  return true;
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const POPOVER_IOS_BODY_PADDING = 5;
+/**
+ * iOS Popover Enter Animation
+ */
+const iosEnterAnimation = (baseEl, opts) => {
+  var _a;
+  const { event: ev, size, trigger, reference, side, align } = opts;
+  const doc = baseEl.ownerDocument;
+  const isRTL = doc.dir === 'rtl';
+  const bodyWidth = doc.defaultView.innerWidth;
+  const bodyHeight = doc.defaultView.innerHeight;
+  const root = getElementRoot(baseEl);
+  const contentEl = root.querySelector('.popover-content');
+  const arrowEl = root.querySelector('.popover-arrow');
+  const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
+  const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
+  const { arrowWidth, arrowHeight } = getArrowDimensions(arrowEl);
+  const defaultPosition = {
+    top: bodyHeight / 2 - contentHeight / 2,
+    left: bodyWidth / 2 - contentWidth / 2,
+    originX: isRTL ? 'right' : 'left',
+    originY: 'top'
+  };
+  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev);
+  const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
+  const margin = size === 'cover' ? 0 : 25;
+  const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+  backdropAnimation
+    .addElement(root.querySelector('ion-backdrop'))
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+    'pointer-events': 'none'
+  })
+    .afterClearStyles(['pointer-events']);
+  wrapperAnimation
+    .addElement(root.querySelector('.popover-wrapper'))
+    .fromTo('opacity', 0.01, 1);
+  return baseAnimation
+    .easing('ease')
+    .duration(100)
+    .beforeAddWrite(() => {
+    if (size === 'cover') {
+      baseEl.style.setProperty('--width', `${contentWidth}px`);
+    }
+    if (addPopoverBottomClass) {
+      baseEl.classList.add('popover-bottom');
+    }
+    if (bottom !== undefined) {
+      contentEl.style.setProperty('bottom', `${bottom}px`);
+    }
+    const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
+    const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
+    let leftValue = `${left}px`;
+    if (checkSafeAreaLeft) {
+      leftValue = `${left}px${safeAreaLeft}`;
+    }
+    if (checkSafeAreaRight) {
+      leftValue = `${left}px${safeAreaRight}`;
+    }
+    contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
+    contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
+    contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
+    if (arrowEl !== null) {
+      const didAdjustBounds = results.top !== top || results.left !== left;
+      const showArrow = shouldShowArrow(side, didAdjustBounds, ev, trigger);
+      if (showArrow) {
+        arrowEl.style.setProperty('top', `calc(${arrowTop}px + var(--offset-y, 0))`);
+        arrowEl.style.setProperty('left', `calc(${arrowLeft}px + var(--offset-x, 0))`);
+      }
+      else {
+        arrowEl.style.setProperty('display', 'none');
+      }
+    }
+  })
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * iOS Popover Leave Animation
+ */
+const iosLeaveAnimation = (baseEl) => {
+  const root = getElementRoot(baseEl);
+  const contentEl = root.querySelector('.popover-content');
+  const arrowEl = root.querySelector('.popover-arrow');
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+  backdropAnimation
+    .addElement(root.querySelector('ion-backdrop'))
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
+  wrapperAnimation
+    .addElement(root.querySelector('.popover-wrapper'))
+    .fromTo('opacity', 0.99, 0);
+  return baseAnimation
+    .easing('ease')
+    .afterAddWrite(() => {
+    baseEl.style.removeProperty('--width');
+    baseEl.classList.remove('popover-bottom');
+    contentEl.style.removeProperty('top');
+    contentEl.style.removeProperty('left');
+    contentEl.style.removeProperty('bottom');
+    contentEl.style.removeProperty('transform-origin');
+    if (arrowEl) {
+      arrowEl.style.removeProperty('top');
+      arrowEl.style.removeProperty('left');
+      arrowEl.style.removeProperty('display');
+    }
+  })
+    .duration(300)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const POPOVER_MD_BODY_PADDING = 12;
+/**
+ * Md Popover Enter Animation
+ */
+const mdEnterAnimation = (baseEl, opts) => {
+  var _a;
+  const { event: ev, size, trigger, reference, side, align } = opts;
+  const doc = baseEl.ownerDocument;
+  const isRTL = doc.dir === 'rtl';
+  const bodyWidth = doc.defaultView.innerWidth;
+  const bodyHeight = doc.defaultView.innerHeight;
+  const root = getElementRoot(baseEl);
+  const contentEl = root.querySelector('.popover-content');
+  const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
+  const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
+  const defaultPosition = {
+    top: bodyHeight / 2 - contentHeight / 2,
+    left: bodyWidth / 2 - contentWidth / 2,
+    originX: isRTL ? 'right' : 'left',
+    originY: 'top'
+  };
+  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
+  const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
+  const { originX, originY, top, left, bottom } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+  const contentAnimation = createAnimation();
+  const viewportAnimation = createAnimation();
+  backdropAnimation
+    .addElement(root.querySelector('ion-backdrop'))
+    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+    .beforeStyles({
+    'pointer-events': 'none'
+  })
+    .afterClearStyles(['pointer-events']);
+  wrapperAnimation
+    .addElement(root.querySelector('.popover-wrapper'))
+    .duration(150)
+    .fromTo('opacity', 0.01, 1);
+  contentAnimation
+    .addElement(contentEl)
+    .beforeStyles({
+    'top': `calc(${top}px + var(--offset-y, 0px))`,
+    'left': `calc(${left}px + var(--offset-x, 0px))`,
+    'transform-origin': `${originY} ${originX}`
+  })
+    .beforeAddWrite(() => {
+    if (bottom !== undefined) {
+      contentEl.style.setProperty('bottom', `${bottom}px`);
+    }
+  })
+    .fromTo('transform', 'scale(0.8)', 'scale(1)');
+  viewportAnimation
+    .addElement(root.querySelector('.popover-viewport'))
+    .fromTo('opacity', 0.01, 1);
+  return baseAnimation
+    .easing('cubic-bezier(0.36,0.66,0.04,1)')
+    .duration(300)
+    .beforeAddWrite(() => {
+    if (size === 'cover') {
+      baseEl.style.setProperty('--width', `${contentWidth}px`);
+    }
+    if (originY === 'bottom') {
+      baseEl.classList.add('popover-bottom');
+    }
+  })
+    .addAnimation([backdropAnimation, wrapperAnimation, contentAnimation, viewportAnimation]);
+};
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Md Popover Leave Animation
+ */
+const mdLeaveAnimation = (baseEl) => {
+  const root = getElementRoot(baseEl);
+  const contentEl = root.querySelector('.popover-content');
+  const baseAnimation = createAnimation();
+  const backdropAnimation = createAnimation();
+  const wrapperAnimation = createAnimation();
+  backdropAnimation
+    .addElement(root.querySelector('ion-backdrop'))
+    .fromTo('opacity', 'var(--backdrop-opacity)', 0);
+  wrapperAnimation
+    .addElement(root.querySelector('.popover-wrapper'))
+    .fromTo('opacity', 0.99, 0);
+  return baseAnimation
+    .easing('ease')
+    .afterAddWrite(() => {
+    baseEl.style.removeProperty('--width');
+    baseEl.classList.remove('popover-bottom');
+    contentEl.style.removeProperty('top');
+    contentEl.style.removeProperty('left');
+    contentEl.style.removeProperty('bottom');
+    contentEl.style.removeProperty('transform-origin');
+  })
+    .duration(150)
+    .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+const popoverIosCss = ":host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:flex;position:fixed;align-items:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{opacity:0;z-index:10}.popover-content{display:flex;position:absolute;flex-direction:column;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);background:var(--background);box-shadow:var(--box-shadow);overflow:auto;z-index:10}.popover-viewport{--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:flex;flex-direction:column;overflow:hidden}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}:host{--width:200px;--max-height:90%;--box-shadow:none;--backdrop-opacity:var(--ion-backdrop-opacity, 0.08)}:host(.popover-desktop){--box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.12)}.popover-content{border-radius:10px}:host(.popover-desktop) .popover-content{border:0.5px solid var(--ion-color-step-100, #e6e6e6)}.popover-arrow{display:block;position:absolute;width:20px;height:10px;overflow:hidden}.popover-arrow::after{left:3px;top:3px;border-radius:3px;position:absolute;width:14px;height:14px;transform:rotate(45deg);background:var(--background);content:\"\";z-index:10}[dir=rtl] .popover-arrow::after,:host-context([dir=rtl]) .popover-arrow::after{left:unset;right:unset;right:3px}:host(.popover-bottom) .popover-arrow{top:auto;bottom:-10px}:host(.popover-bottom) .popover-arrow::after{top:-6px}:host(.popover-side-left) .popover-arrow{transform:rotate(90deg)}:host(.popover-side-right) .popover-arrow{transform:rotate(-90deg)}:host(.popover-side-top) .popover-arrow{transform:rotate(180deg)}:host(.popover-side-start) .popover-arrow{transform:rotate(90deg)}:host-context([dir=rtl]):host(.popover-side-start) .popover-arrow,:host-context([dir=rtl]).popover-side-start .popover-arrow{transform:rotate(-90deg)}:host(.popover-side-end) .popover-arrow{transform:rotate(-90deg)}:host-context([dir=rtl]):host(.popover-side-end) .popover-arrow,:host-context([dir=rtl]).popover-side-end .popover-arrow{transform:rotate(90deg)}@supports (backdrop-filter: blur(0)){:host(.popover-translucent) .popover-content,:host(.popover-translucent) .popover-arrow::after{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);backdrop-filter:saturate(180%) blur(20px)}}";
+const popoverMdCss = ":host{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;--offset-x:0px;--offset-y:0px;left:0;right:0;top:0;bottom:0;display:flex;position:fixed;align-items:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);z-index:1001}:host(.popover-nested){pointer-events:none}:host(.popover-nested) .popover-wrapper{pointer-events:auto}:host(.overlay-hidden){display:none}.popover-wrapper{opacity:0;z-index:10}.popover-content{display:flex;position:absolute;flex-direction:column;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);background:var(--background);box-shadow:var(--box-shadow);overflow:auto;z-index:10}.popover-viewport{--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px;display:flex;flex-direction:column;overflow:hidden}:host(.popover-nested.popover-side-left){--offset-x:5px}:host(.popover-nested.popover-side-right){--offset-x:-5px}:host(.popover-nested.popover-side-start){--offset-x:5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-start),:host-context([dir=rtl]).popover-nested.popover-side-start{--offset-x:-5px}:host(.popover-nested.popover-side-end){--offset-x:-5px}:host-context([dir=rtl]):host(.popover-nested.popover-side-end),:host-context([dir=rtl]).popover-nested.popover-side-end{--offset-x:5px}:host{--width:250px;--max-height:90%;--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}.popover-content{border-radius:4px;transform-origin:left top}[dir=rtl] .popover-content,:host-context([dir=rtl]) .popover-content{transform-origin:right top}.popover-viewport{transition-delay:100ms}";
+const Popover = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.didPresent = createEvent(this, "ionPopoverDidPresent", 7);
+    this.willPresent = createEvent(this, "ionPopoverWillPresent", 7);
+    this.willDismiss = createEvent(this, "ionPopoverWillDismiss", 7);
+    this.didDismiss = createEvent(this, "ionPopoverDidDismiss", 7);
+    this.didPresentShorthand = createEvent(this, "didPresent", 7);
+    this.willPresentShorthand = createEvent(this, "willPresent", 7);
+    this.willDismissShorthand = createEvent(this, "willDismiss", 7);
+    this.didDismissShorthand = createEvent(this, "didDismiss", 7);
+    this.parentPopover = null;
+    this.popoverIndex = popoverIds++;
+    this.coreDelegate = CoreDelegate();
+    this.inline = false;
+    this.focusDescendantOnPresent = false;
+    this.presented = false;
+    /** @internal */
+    this.hasController = false;
+    /**
+     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+     */
+    this.keyboardClose = true;
+    /**
+     * If `true`, the popover will be dismissed when the backdrop is clicked.
+     */
+    this.backdropDismiss = true;
+    /**
+     * If `true`, a backdrop will be displayed behind the popover.
+     */
+    this.showBackdrop = true;
+    /**
+     * If `true`, the popover will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     */
+    this.translucent = false;
+    /**
+     * If `true`, the popover will animate.
+     */
+    this.animated = true;
+    /**
+     * Describes what kind of interaction with the trigger that
+     * should cause the popover to open. Does not apply when the `trigger`
+     * property is `undefined`.
+     * If `'click'`, the popover will be presented when the trigger is left clicked.
+     * If `'hover'`, the popover will be presented when a pointer hovers over the trigger.
+     * If `'context-menu'`, the popover will be presented when the trigger is right
+     * clicked on desktop and long pressed on mobile. This will also prevent your
+     * device's normal context menu from appearing.
+     */
+    this.triggerAction = 'click';
+    /**
+     * Describes how to calculate the popover width.
+     * If `'cover'`, the popover width will match the width of the trigger.
+     * If `'auto'`, the popover width will be determined by the content in
+     * the popover.
+     */
+    this.size = 'auto';
+    /**
+     * If `true`, the popover will be automatically
+     * dismissed when the content has been clicked.
+     */
+    this.dismissOnSelect = false;
+    /**
+     * Describes what to position the popover relative to.
+     * If `'trigger'`, the popover will be positioned relative
+     * to the trigger button. If passing in an event, this is
+     * determined via event.target.
+     * If `'event'`, the popover will be positioned relative
+     * to the x/y coordinates of the trigger action. If passing
+     * in an event, this is determined via event.clientX and event.clientY.
+     */
+    this.reference = 'trigger';
+    /**
+     * Describes which side of the `reference` point to position
+     * the popover on. The `'start'` and `'end'` values are RTL-aware,
+     * and the `'left'` and `'right'` values are not.
+     */
+    this.side = 'bottom';
+    /**
+     * If `true`, the popover will display an arrow
+     * that points at the `reference` when running in `ios` mode
+     * on mobile. Does not apply in `md` mode or on desktop.
+     */
+    this.arrow = true;
+    /**
+     * If `true`, the popover will open. If `false`, the popover will close.
+     * Use this if you need finer grained control over presentation, otherwise
+     * just use the popoverController or the `trigger` property.
+     * Note: `isOpen` will not automatically be set back to `false` when
+     * the popover dismisses. You will need to do that in your code.
+     */
+    this.isOpen = false;
+    /**
+     * @internal
+     *
+     * If `true` the popover will not register its own keyboard event handlers.
+     * This allows the contents of the popover to handle their own keyboard interactions.
+     *
+     * If `false`, the popover will register its own keyboard event handlers for
+     * navigating `ion-list` items within a popover (up/down/home/end/etc.).
+     * This will also cancel browser keyboard event bindings to prevent scroll
+     * behavior in a popover using a list of items.
+     */
+    this.keyboardEvents = false;
+    this.onDismiss = (ev) => {
+      ev.stopPropagation();
+      ev.preventDefault();
+      this.dismiss();
+    };
+    this.onBackdropTap = () => {
+      this.dismiss(undefined, BACKDROP);
+    };
+    this.onLifecycle = (modalEvent) => {
+      const el = this.usersElement;
+      const name = LIFECYCLE_MAP[modalEvent.type];
+      if (el && name) {
+        const event = new CustomEvent(name, {
+          bubbles: false,
+          cancelable: false,
+          detail: modalEvent.detail
+        });
+        el.dispatchEvent(event);
+      }
+    };
+    this.configureTriggerInteraction = () => {
+      const { trigger, triggerAction, el, destroyTriggerInteraction } = this;
+      if (destroyTriggerInteraction) {
+        destroyTriggerInteraction();
+      }
+      const triggerEl = this.triggerEl = (trigger !== undefined) ? document.getElementById(trigger) : null;
+      if (!triggerEl) {
+        return;
+      }
+      this.destroyTriggerInteraction = configureTriggerInteraction(triggerEl, triggerAction, el);
+    };
+    this.configureKeyboardInteraction = () => {
+      const { destroyKeyboardInteraction, el } = this;
+      if (destroyKeyboardInteraction) {
+        destroyKeyboardInteraction();
+      }
+      this.destroyKeyboardInteraction = configureKeyboardInteraction(el);
+    };
+    this.configureDismissInteraction = () => {
+      const { destroyDismissInteraction, parentPopover, triggerAction, triggerEl, el } = this;
+      if (!parentPopover || !triggerEl) {
+        return;
+      }
+      if (destroyDismissInteraction) {
+        destroyDismissInteraction();
+      }
+      this.destroyDismissInteraction = configureDismissInteraction(triggerEl, triggerAction, el, parentPopover);
+    };
+  }
+  onTriggerChange() {
+    this.configureTriggerInteraction();
+  }
+  onIsOpenChange(newValue, oldValue) {
+    if (newValue === true && oldValue === false) {
+      this.present();
+    }
+    else if (newValue === false && oldValue === true) {
+      this.dismiss();
+    }
+  }
+  connectedCallback() {
+    prepareOverlay(this.el);
+  }
+  componentWillLoad() {
+    /**
+     * If user has custom ID set then we should
+     * not assign the default incrementing ID.
+     */
+    this.popoverId = (this.el.hasAttribute('id')) ? this.el.getAttribute('id') : `ion-popover-${this.popoverIndex}`;
+    this.parentPopover = this.el.closest(`ion-popover:not(#${this.popoverId})`);
+    if (this.alignment === undefined) {
+      this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
+    }
+  }
+  componentDidLoad() {
+    const { parentPopover, isOpen } = this;
+    /**
+     * If popover was rendered with isOpen="true"
+     * then we should open popover immediately.
+     */
+    if (isOpen === true) {
+      raf(() => this.present());
+    }
+    if (parentPopover) {
+      addEventListener(parentPopover, 'ionPopoverWillDismiss', () => {
+        this.dismiss(undefined, undefined, false);
+      });
+    }
+    this.configureTriggerInteraction();
+  }
+  /**
+   * When opening a popover from a trigger, we should not be
+   * modifying the `event` prop from inside the component.
+   * Additionally, when pressing the "Right" arrow key, we need
+   * to shift focus to the first descendant in the newly presented
+   * popover.
+   *
+   * @internal
+   */
+  async presentFromTrigger(event, focusDescendant = false) {
+    this.focusDescendantOnPresent = focusDescendant;
+    await this.present(event);
+    this.focusDescendantOnPresent = false;
+  }
+  /**
+   * Determines whether or not an overlay
+   * is being used inline or via a controller/JS
+   * and returns the correct delegate.
+   * By default, subsequent calls to getDelegate
+   * will use a cached version of the delegate.
+   * This is useful for calling dismiss after
+   * present so that the correct delegate is given.
+   */
+  getDelegate(force = false) {
+    if (this.workingDelegate && !force) {
+      return {
+        delegate: this.workingDelegate,
+        inline: this.inline
+      };
+    }
+    /**
+     * If using overlay inline
+     * we potentially need to use the coreDelegate
+     * so that this works in vanilla JS apps.
+     * If a developer has presented this component
+     * via a controller, then we can assume
+     * the component is already in the
+     * correct place.
+     */
+    const parentEl = this.el.parentNode;
+    const inline = this.inline = parentEl !== null && !this.hasController;
+    const delegate = this.workingDelegate = (inline) ? this.delegate || this.coreDelegate : this.delegate;
+    return { inline, delegate };
+  }
+  /**
+   * Present the popover overlay after it has been created.
+   * Developers can pass a mouse, touch, or pointer event
+   * to position the popover relative to where that event
+   * was dispatched.
+   */
+  async present(event) {
+    if (this.presented) {
+      return;
+    }
+    /**
+     * When using an inline popover
+     * and dismissing a popover it is possible to
+     * quickly present the popover while it is
+     * dismissing. We need to await any current
+     * transition to allow the dismiss to finish
+     * before presenting again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
+    const data = Object.assign(Object.assign({}, this.componentProps), { popover: this.el });
+    const { inline, delegate } = this.getDelegate(true);
+    this.usersElement = await attachComponent(delegate, this.el, this.component, ['popover-viewport'], data, inline);
+    await deepReady(this.usersElement);
+    if (!this.keyboardEvents) {
+      this.configureKeyboardInteraction();
+    }
+    this.configureDismissInteraction();
+    this.currentTransition = present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
+      event: event || this.event,
+      size: this.size,
+      trigger: this.triggerEl,
+      reference: this.reference,
+      side: this.side,
+      align: this.alignment
+    });
+    await this.currentTransition;
+    this.currentTransition = undefined;
+    /**
+     * If popover is nested and was
+     * presented using the "Right" arrow key,
+     * we need to move focus to the first
+     * descendant inside of the popover.
+     */
+    if (this.focusDescendantOnPresent) {
+      focusFirstDescendant(this.el, this.el);
+    }
+  }
+  /**
+   * Dismiss the popover overlay after it has been presented.
+   *
+   * @param data Any data to emit in the dismiss events.
+   * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
+   * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
+   * a parent popover if this popover is nested. Defaults to `true`.
+   */
+  async dismiss(data, role, dismissParentPopover = true) {
+    /**
+     * When using an inline popover
+     * and presenting a popover it is possible to
+     * quickly dismiss the popover while it is
+     * presenting. We need to await any current
+     * transition to allow the present to finish
+     * before dismissing again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
+    const { destroyKeyboardInteraction, destroyDismissInteraction } = this;
+    if (dismissParentPopover && this.parentPopover) {
+      this.parentPopover.dismiss(data, role, dismissParentPopover);
+    }
+    this.currentTransition = dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
+    const shouldDismiss = await this.currentTransition;
+    if (shouldDismiss) {
+      if (destroyKeyboardInteraction) {
+        destroyKeyboardInteraction();
+        this.destroyKeyboardInteraction = undefined;
+      }
+      if (destroyDismissInteraction) {
+        destroyDismissInteraction();
+        this.destroyDismissInteraction = undefined;
+      }
+      /**
+       * If using popover inline
+       * we potentially need to use the coreDelegate
+       * so that this works in vanilla JS apps
+       */
+      const { delegate } = this.getDelegate();
+      await detachComponent(delegate, this.usersElement);
+    }
+    this.currentTransition = undefined;
+    return shouldDismiss;
+  }
+  /**
+   * @internal
+   */
+  async getParentPopover() {
+    return this.parentPopover;
+  }
+  /**
+   * Returns a promise that resolves when the popover did dismiss.
+   */
+  onDidDismiss() {
+    return eventMethod(this.el, 'ionPopoverDidDismiss');
+  }
+  /**
+   * Returns a promise that resolves when the popover will dismiss.
+   */
+  onWillDismiss() {
+    return eventMethod(this.el, 'ionPopoverWillDismiss');
+  }
+  render() {
+    const mode = getIonMode(this);
+    const { onLifecycle, popoverId, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
+    const desktop = isPlatform('desktop');
+    const enableArrow = arrow && !parentPopover && !desktop;
+    return (h(Host, Object.assign({ "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        zIndex: `${20000 + this.overlayIndex}`,
+      }, id: popoverId, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonDismiss: this.onDismiss, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { class: "popover-arrow", part: "arrow" }), h("div", { class: "popover-content", part: "content" }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "trigger": ["onTriggerChange"],
+    "triggerAction": ["onTriggerChange"],
+    "isOpen": ["onIsOpenChange"]
+  }; }
+};
+const LIFECYCLE_MAP = {
+  'ionPopoverDidPresent': 'ionViewDidEnter',
+  'ionPopoverWillPresent': 'ionViewWillEnter',
+  'ionPopoverWillDismiss': 'ionViewWillLeave',
+  'ionPopoverDidDismiss': 'ionViewDidLeave',
+};
+let popoverIds = 0;
+Popover.style = {
+  ios: popoverIosCss,
+  md: popoverMdCss
+};
+const selectPopoverIosCss = ".sc-ion-select-popover-ios-h ion-list.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-ios,ion-label.sc-ion-select-popover-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";
+const selectPopoverMdCss = ".sc-ion-select-popover-md-h ion-list.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list-header.sc-ion-select-popover-md,ion-label.sc-ion-select-popover-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-list.sc-ion-select-popover-md ion-radio.sc-ion-select-popover-md{opacity:0}ion-item.sc-ion-select-popover-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-popover-md{--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08);--background-focused:var(--ion-color-primary, #3880ff);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #3880ff);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-popover-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #3880ff)}";
+const SelectPopover = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * An array of options for the popover
+     */
+    this.options = [];
+  }
+  onSelect(ev) {
+    this.setChecked(ev);
+    this.callOptionHandler(ev);
+  }
+  findOptionFromEvent(ev) {
+    const { options } = this;
+    return options.find(o => o.value === ev.target.value);
+  }
+  /**
+   * When an option is selected we need to get the value(s)
+   * of the selected option(s) and return it in the option
+   * handler
+   */
+  callOptionHandler(ev) {
+    const option = this.findOptionFromEvent(ev);
+    const values = this.getValues(ev);
+    if (option && option.handler) {
+      safeCall(option.handler, values);
+    }
+  }
+  /**
+   * This is required when selecting a radio that is already
+   * selected because it will not trigger the ionChange event
+   * but we still want to close the popover
+   */
+  rbClick(ev) {
+    this.callOptionHandler(ev);
+  }
+  setChecked(ev) {
+    const { multiple } = this;
+    const option = this.findOptionFromEvent(ev);
+    // this is a popover with checkboxes (multiple value select)
+    // we need to set the checked value for this option
+    if (multiple && option) {
+      option.checked = ev.detail.checked;
+    }
+  }
+  getValues(ev) {
+    const { multiple, options } = this;
+    if (multiple) {
+      // this is a popover with checkboxes (multiple value select)
+      // return an array of all the checked values
+      return options.filter(o => o.checked).map(o => o.value);
+    }
+    // this is a popover with radio buttons (single value select)
+    // return the value that was clicked, otherwise undefined
+    const option = this.findOptionFromEvent(ev);
+    return option ? option.value : undefined;
+  }
+  renderOptions(options) {
+    const { multiple } = this;
+    switch (multiple) {
+      case true: return this.renderCheckboxOptions(options);
+      default: return this.renderRadioOptions(options);
+    }
+  }
+  renderCheckboxOptions(options) {
+    return (options.map(option => h("ion-item", { class: getClassMap(option.cssClass) }, h("ion-checkbox", { slot: "start", value: option.value, disabled: option.disabled, checked: option.checked }), h("ion-label", null, option.text))));
+  }
+  renderRadioOptions(options) {
+    const checked = options.filter(o => o.checked).map(o => o.value)[0];
+    return (h("ion-radio-group", { value: checked }, options.map(option => h("ion-item", { class: getClassMap(option.cssClass) }, h("ion-label", null, option.text), h("ion-radio", { value: option.value, disabled: option.disabled, onClick: ev => this.rbClick(ev) })))));
+  }
+  render() {
+    const { header, message, options, subHeader } = this;
+    const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
+    return (h(Host, { class: getIonMode(this) }, h("ion-list", null, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage &&
+      h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message))), this.renderOptions(options))));
+  }
+};
+SelectPopover.style = {
+  ios: selectPopoverIosCss,
+  md: selectPopoverMdCss
+};
+export { ActionSheet as ion_action_sheet, Alert as ion_alert, Popover as ion_popover, SelectPopover as ion_select_popover };