@sparkle-learning/core 0.0.33 → 0.0.36

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

@@ -1,16 +1,16 @@
-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, a as present, p as prepareOverlay, d as dismiss, e as eventMethod, s as safeCall, j as focusFirstDescendant } from './overlays-5c777f10.js';
-import { g as getClassMap } from './theme-c336c9d9.js';
-import { c as createAnimation } from './animation-7b083379.js';
-import { s as sanitizeDOMString } from './index-435af8e6.js';
-import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-518bd233.js';
-import { b as raf, g as getElementRoot, a as addEventListener } from './helpers-9d0930de.js';
-import { d as deepReady } from './index-8de9446b.js';
-import './gesture-controller-686622ba.js';
-import './hardware-back-button-b6ccf74a.js';
+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-c04b9ed5.js';
+import { g as getIonMode, a as isPlatform } from './ionic-global-4903e23e.js';
+import { c as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-522f76f2.js';
+import { createGesture } from './index-21661af2.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-3b4dca92.js';
+import { g as getClassMap } from './theme-7ef00c83.js';
+import { c as createAnimation } from './animation-12377cb3.js';
+import { s as sanitizeDOMString } from './index-be6112f8.js';
+import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-3e634a5c.js';
+import { l as raf, g as getElementRoot, a as addEventListener } from './helpers-bf0e23d6.js';
+import { d as deepReady } from './index-2b84cad2.js';
+import './gesture-controller-7be18351.js';
+import './hardware-back-button-fa04d6e9.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -64,13 +64,13 @@ const createButtonActiveGesture = (el, isButton) => {
     el,
     gestureName: 'buttonActiveDrag',
     threshold: 0,
-    onStart: ev => activateButtonAtPoint(ev.currentX, ev.currentY, hapticSelectionStart),
-    onMove: ev => activateButtonAtPoint(ev.currentX, ev.currentY, hapticSelectionChanged),
+    onStart: (ev) => activateButtonAtPoint(ev.currentX, ev.currentY, hapticSelectionStart),
+    onMove: (ev) => activateButtonAtPoint(ev.currentX, ev.currentY, hapticSelectionChanged),
     onEnd: () => {
       clearActiveButton(true);
       hapticSelectionEnd();
       initialTouchedButton = undefined;
-    }
+    },
   });
 };
 
@@ -88,7 +88,7 @@ const iosEnterAnimation$2 = (baseEl) => {
     .addElement(baseEl.querySelector('ion-backdrop'))
     .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
     .beforeStyles({
-    'pointer-events': 'none'
+    'pointer-events': 'none',
   })
     .afterClearStyles(['pointer-events']);
   wrapperAnimation
@@ -111,9 +111,7 @@ 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);
+  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%)');
@@ -138,7 +136,7 @@ const mdEnterAnimation$2 = (baseEl) => {
     .addElement(baseEl.querySelector('ion-backdrop'))
     .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
     .beforeStyles({
-    'pointer-events': 'none'
+    'pointer-events': 'none',
   })
     .afterClearStyles(['pointer-events']);
   wrapperAnimation
@@ -161,9 +159,7 @@ 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);
+  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%)');
@@ -214,7 +210,7 @@ const ActionSheet = class {
     this.dispatchCancelHandler = (ev) => {
       const role = ev.detail.role;
       if (isCancel(role)) {
-        const cancelButton = this.getButtons().find(b => b.role === 'cancel');
+        const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
         this.callButtonHandler(cancelButton);
       }
     };
@@ -277,10 +273,8 @@ const ActionSheet = class {
     return true;
   }
   getButtons() {
-    return this.buttons.map(b => {
-      return (typeof b === 'string')
-        ? { text: b }
-        : b;
+    return this.buttons.map((b) => {
+      return typeof b === 'string' ? { text: b } : b;
     });
   }
   disconnectedCallback() {
@@ -312,17 +306,14 @@ const ActionSheet = class {
     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');
+    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" })));
+      }, 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); }
 };
@@ -348,14 +339,12 @@ const iosEnterAnimation$1 = (baseEl) => {
     .addElement(baseEl.querySelector('ion-backdrop'))
     .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
     .beforeStyles({
-    'pointer-events': 'none'
+    'pointer-events': 'none',
   })
     .afterClearStyles(['pointer-events']);
-  wrapperAnimation
-    .addElement(baseEl.querySelector('.alert-wrapper'))
-    .keyframes([
+  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper')).keyframes([
     { offset: 0, opacity: '0.01', transform: 'scale(1.1)' },
-    { offset: 1, opacity: '1', transform: 'scale(1)' }
+    { offset: 1, opacity: '1', transform: 'scale(1)' },
   ]);
   return baseAnimation
     .addElement(baseEl)
@@ -374,14 +363,10 @@ 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([
+  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)' }
+    { offset: 1, opacity: 0, transform: 'scale(0.9)' },
   ]);
   return baseAnimation
     .addElement(baseEl)
@@ -404,14 +389,12 @@ const mdEnterAnimation$1 = (baseEl) => {
     .addElement(baseEl.querySelector('ion-backdrop'))
     .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
     .beforeStyles({
-    'pointer-events': 'none'
+    'pointer-events': 'none',
   })
     .afterClearStyles(['pointer-events']);
-  wrapperAnimation
-    .addElement(baseEl.querySelector('.alert-wrapper'))
-    .keyframes([
+  wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper')).keyframes([
     { offset: 0, opacity: '0.01', transform: 'scale(0.9)' },
-    { offset: 1, opacity: '1', transform: 'scale(1)' }
+    { offset: 1, opacity: '1', transform: 'scale(1)' },
   ]);
   return baseAnimation
     .addElement(baseEl)
@@ -430,12 +413,8 @@ 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);
+  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')
@@ -489,46 +468,42 @@ const Alert = class {
     this.dispatchCancelHandler = (ev) => {
       const role = ev.detail.role;
       if (isCancel(role)) {
-        const cancelButton = this.processedButtons.find(b => b.role === 'cancel');
+        const cancelButton = this.processedButtons.find((b) => b.role === 'cancel');
         this.callButtonHandler(cancelButton);
       }
     };
   }
   onKeydown(ev) {
-    const inputTypes = new Set(this.processedInputs.map(i => i.type));
+    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')) {
+    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);
+    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);
+    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];
+      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];
+      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));
+      const nextProcessed = this.processedInputs.find((input) => input.id === (nextEl === null || nextEl === void 0 ? void 0 : nextEl.id));
       if (nextProcessed) {
         this.rbClick(nextProcessed);
         nextEl.focus();
@@ -537,10 +512,8 @@ const Alert = class {
   }
   buttonsChanged() {
     const buttons = this.buttons;
-    this.processedButtons = buttons.map(btn => {
-      return (typeof btn === 'string')
-        ? { text: btn, role: btn.toLowerCase() === 'cancel' ? 'cancel' : undefined }
-        : btn;
+    this.processedButtons = buttons.map((btn) => {
+      return typeof btn === 'string' ? { text: btn, role: btn.toLowerCase() === 'cancel' ? 'cancel' : undefined } : btn;
     });
   }
   inputsChanged() {
@@ -549,14 +522,14 @@ const Alert = class {
     // 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 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));
+    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.`);
+      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) => ({
@@ -573,7 +546,7 @@ const Alert = class {
       max: i.max,
       cssClass: i.cssClass || '',
       attributes: i.attributes || {},
-      tabindex: (i.type === 'radio' && i !== focusable) ? -1 : 0
+      tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
     }));
   }
   connectedCallback() {
@@ -659,7 +632,7 @@ const Alert = class {
     return Promise.resolve(false);
   }
   callButtonHandler(button, data) {
-    if (button && button.handler) {
+    if (button === null || button === void 0 ? void 0 : button.handler) {
       // a handler has been provided, execute it
       // pass the handler the values from the inputs
       const returnData = safeCall(button.handler, data);
@@ -681,27 +654,30 @@ const Alert = class {
     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);
+      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);
+      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 => {
+    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();
+      case 'checkbox':
+        return this.renderCheckbox();
+      case 'radio':
+        return this.renderRadio();
+      default:
+        return this.renderInput();
     }
   }
   renderCheckbox() {
@@ -710,24 +686,24 @@ const Alert = class {
     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))))));
+    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)))))));
+    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 => {
+    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 => {
+        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) {
@@ -736,7 +712,7 @@ const Alert = class {
           } }))));
       }
       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 => {
+        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) {
@@ -751,9 +727,9 @@ const Alert = class {
     const mode = getIonMode(this);
     const alertButtonGroupClass = {
       'alert-button-group': true,
-      'alert-button-group-vertical': buttons.length > 2
+      '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)))));
+    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;
@@ -764,7 +740,7 @@ const Alert = class {
     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" })));
+      }, 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 {
@@ -814,7 +790,7 @@ const getPopoverDimensions = (size, contentEl, triggerEl) => {
   }
   return {
     contentWidth,
-    contentHeight
+    contentHeight,
   };
 };
 const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parentPopoverEl) => {
@@ -847,8 +823,8 @@ const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parent
               return;
             }
             popoverEl.dismiss(undefined, undefined, false);
-          }
-        }
+          },
+        },
       ];
       break;
     case 'context-menu':
@@ -875,8 +851,8 @@ const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parent
               return;
             }
             popoverEl.dismiss(undefined, undefined, false);
-          }
-        }
+          },
+        },
       ];
       break;
   }
@@ -918,7 +894,7 @@ const configureTriggerInteraction = (triggerEl, triggerAction, popoverEl) => {
                 hoverTimeout = undefined;
               });
             }, 100);
-          }
+          },
         },
         {
           eventName: 'mouseleave',
@@ -938,7 +914,7 @@ const configureTriggerInteraction = (triggerEl, triggerAction, popoverEl) => {
             if (target.closest('ion-popover') !== popoverEl) {
               popoverEl.dismiss(undefined, undefined, false);
             }
-          }
+          },
         },
         {
           /**
@@ -946,12 +922,12 @@ const configureTriggerInteraction = (triggerEl, triggerAction, popoverEl) => {
            * from dismissing when dismiss-on-select="true".
            */
           eventName: 'click',
-          callback: (ev) => ev.stopPropagation()
+          callback: (ev) => ev.stopPropagation(),
         },
         {
           eventName: 'ionPopoverActivateTrigger',
-          callback: (ev) => popoverEl.presentFromTrigger(ev, true)
-        }
+          callback: (ev) => popoverEl.presentFromTrigger(ev, true),
+        },
       ];
       break;
     case 'context-menu':
@@ -965,16 +941,16 @@ const configureTriggerInteraction = (triggerEl, triggerAction, popoverEl) => {
              */
             ev.preventDefault();
             popoverEl.presentFromTrigger(ev);
-          }
+          },
         },
         {
           eventName: 'click',
-          callback: (ev) => ev.stopPropagation()
+          callback: (ev) => ev.stopPropagation(),
         },
         {
           eventName: 'ionPopoverActivateTrigger',
-          callback: (ev) => popoverEl.presentFromTrigger(ev, true)
-        }
+          callback: (ev) => popoverEl.presentFromTrigger(ev, true),
+        },
       ];
       break;
     case 'click':
@@ -989,12 +965,12 @@ const configureTriggerInteraction = (triggerEl, triggerAction, popoverEl) => {
            * the first popover to dismiss.
            */
           eventName: 'click',
-          callback: (ev) => popoverEl.presentFromTrigger(ev)
+          callback: (ev) => popoverEl.presentFromTrigger(ev),
         },
         {
           eventName: 'ionPopoverActivateTrigger',
-          callback: (ev) => popoverEl.presentFromTrigger(ev, true)
-        }
+          callback: (ev) => popoverEl.presentFromTrigger(ev, true),
+        },
       ];
       break;
   }
@@ -1012,7 +988,7 @@ const getIndexOfItem = (items, item) => {
   if (!item || item.tagName !== 'ION-ITEM') {
     return -1;
   }
-  return items.findIndex(el => el === item);
+  return items.findIndex((el) => el === item);
 };
 /**
  * Given an array of elements and a currently focused ion-item
@@ -1047,8 +1023,17 @@ const focusItem = (item) => {
 const isTriggerElement = (el) => el.hasAttribute('data-ion-popover-trigger');
 const configureKeyboardInteraction = (popoverEl) => {
   const callback = async (ev) => {
+    var _a;
     const activeElement = document.activeElement;
     let items = [];
+    const targetTagName = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.tagName;
+    /**
+     * Only handle custom keyboard interactions for the host popover element
+     * and children ion-item elements.
+     */
+    if (targetTagName !== 'ION-POPOVER' && targetTagName !== 'ION-ITEM') {
+      return;
+    }
     /**
      * Complex selectors with :not() are :not supported
      * in older versions of Chromium so we need to do a
@@ -1060,9 +1045,9 @@ const configureKeyboardInteraction = (popoverEl) => {
        * 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 */
+      /* eslint-disable-next-line */
     }
-    catch (_a) { }
+    catch (_b) { }
     switch (ev.key) {
       /**
        * If we are in a child popover
@@ -1084,7 +1069,6 @@ const configureKeyboardInteraction = (popoverEl) => {
         // Disable movement/scroll with keyboard
         ev.preventDefault();
         const nextItem = getNextItem(items, activeElement);
-        // tslint:disable-next-line:strict-type-predicates
         if (nextItem !== undefined) {
           focusItem(nextItem);
         }
@@ -1096,7 +1080,6 @@ const configureKeyboardInteraction = (popoverEl) => {
         // Disable movement/scroll with keyboard
         ev.preventDefault();
         const prevItem = getPrevItem(items, activeElement);
-        // tslint:disable-next-line:strict-type-predicates
         if (prevItem !== undefined) {
           focusItem(prevItem);
         }
@@ -1107,7 +1090,6 @@ const configureKeyboardInteraction = (popoverEl) => {
       case 'Home':
         ev.preventDefault();
         const firstItem = items[0];
-        // tslint:disable-next-line:strict-type-predicates
         if (firstItem !== undefined) {
           focusItem(firstItem);
         }
@@ -1118,7 +1100,6 @@ const configureKeyboardInteraction = (popoverEl) => {
       case 'End':
         ev.preventDefault();
         const lastItem = items[items.length - 1];
-        // tslint:disable-next-line:strict-type-predicates
         if (lastItem !== undefined) {
           focusItem(lastItem);
         }
@@ -1152,7 +1133,7 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
     top: 0,
     left: 0,
     width: 0,
-    height: 0
+    height: 0,
   };
   /**
    * Calculate position relative to the
@@ -1169,7 +1150,7 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
         top: mouseEv.clientY,
         left: mouseEv.clientX,
         width: 1,
-        height: 1
+        height: 1,
       };
       break;
     /**
@@ -1191,7 +1172,9 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
        * 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));
+      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;
       }
@@ -1200,7 +1183,7 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
         top: triggerBoundingBox.top,
         left: triggerBoundingBox.left,
         width: triggerBoundingBox.width,
-        height: triggerBoundingBox.height
+        height: triggerBoundingBox.height,
       };
       break;
   }
@@ -1240,9 +1223,9 @@ const calculatePopoverOrigin = (side, align, isRTL) => {
     case 'right':
       return { originX: 'left', originY: getOriginYAlignment(align) };
     case 'start':
-      return { originX: (isRTL) ? 'left' : 'right', originY: getOriginYAlignment(align) };
+      return { originX: isRTL ? 'left' : 'right', originY: getOriginYAlignment(align) };
     case 'end':
-      return { originX: (isRTL) ? 'right' : 'left', originY: getOriginYAlignment(align) };
+      return { originX: isRTL ? 'right' : 'left', originY: getOriginYAlignment(align) };
   }
 };
 const getOriginXAlignment = (align) => {
@@ -1275,26 +1258,29 @@ const calculateArrowPosition = (side, arrowWidth, arrowHeight, top, left, conten
    * 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) };
+  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) };
+  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) };
+      return { arrowTop: top + contentHeight, arrowLeft: left + contentWidth / 2 - arrowWidth / 2 };
     case 'bottom':
-      return { arrowTop: top - arrowHeight, arrowLeft: left + (contentWidth / 2) - (arrowWidth / 2) };
+      return { arrowTop: top - arrowHeight, arrowLeft: left + contentWidth / 2 - arrowWidth / 2 };
     case 'left':
       return leftPosition;
     case 'right':
       return rightPosition;
     case 'start':
-      return (isRTL) ? rightPosition : leftPosition;
+      return isRTL ? rightPosition : leftPosition;
     case 'end':
-      return (isRTL) ? leftPosition : rightPosition;
+      return isRTL ? leftPosition : rightPosition;
     default:
       return { arrowTop: 0, arrowLeft: 0 };
   }
@@ -1308,31 +1294,31 @@ const calculateArrowPosition = (side, arrowWidth, arrowHeight, top, left, conten
 const calculatePopoverSide = (side, triggerBoundingBox, contentWidth, contentHeight, arrowWidth, arrowHeight, isRTL) => {
   const sideLeft = {
     top: triggerBoundingBox.top,
-    left: triggerBoundingBox.left - contentWidth - arrowWidth
+    left: triggerBoundingBox.left - contentWidth - arrowWidth,
   };
   const sideRight = {
     top: triggerBoundingBox.top,
-    left: triggerBoundingBox.left + triggerBoundingBox.width + arrowWidth
+    left: triggerBoundingBox.left + triggerBoundingBox.width + arrowWidth,
   };
   switch (side) {
     case 'top':
       return {
         top: triggerBoundingBox.top - contentHeight - arrowHeight,
-        left: triggerBoundingBox.left
+        left: triggerBoundingBox.left,
       };
     case 'right':
       return sideRight;
     case 'bottom':
       return {
         top: triggerBoundingBox.top + triggerBoundingBox.height + arrowHeight,
-        left: triggerBoundingBox.left
+        left: triggerBoundingBox.left,
       };
     case 'left':
       return sideLeft;
     case 'start':
-      return (isRTL) ? sideRight : sideLeft;
+      return isRTL ? sideRight : sideLeft;
     case 'end':
-      return (isRTL) ? sideLeft : sideRight;
+      return isRTL ? sideLeft : sideRight;
   }
 };
 /**
@@ -1369,14 +1355,14 @@ const calculatePopoverEndAlign = (side, triggerBoundingBox, contentWidth, conten
     case 'right':
       return {
         top: -(contentHeight - triggerBoundingBox.height),
-        left: 0
+        left: 0,
       };
     case 'top':
     case 'bottom':
     default:
       return {
         top: 0,
-        left: -(contentWidth - triggerBoundingBox.width)
+        left: -(contentWidth - triggerBoundingBox.width),
       };
   }
 };
@@ -1396,15 +1382,15 @@ const calculatePopoverCenterAlign = (side, triggerBoundingBox, contentWidth, con
     case 'left':
     case 'right':
       return {
-        top: -((contentHeight / 2) - (triggerBoundingBox.height / 2)),
-        left: 0
+        top: -(contentHeight / 2 - triggerBoundingBox.height / 2),
+        left: 0,
       };
     case 'top':
     case 'bottom':
     default:
       return {
         top: 0,
-        left: -((contentWidth / 2) - (triggerBoundingBox.width / 2))
+        left: -(contentWidth / 2 - triggerBoundingBox.width / 2),
       };
   }
 };
@@ -1423,7 +1409,9 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
   let originY = contentOriginY;
   let checkSafeAreaLeft = false;
   let checkSafeAreaRight = false;
-  const triggerTop = triggerCoordinates ? triggerCoordinates.top + triggerCoordinates.height : bodyHeight / 2 - contentHeight / 2;
+  const triggerTop = triggerCoordinates
+    ? triggerCoordinates.top + triggerCoordinates.height
+    : bodyHeight / 2 - contentHeight / 2;
   const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
   let addPopoverBottomClass = false;
   /**
@@ -1451,10 +1439,19 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
    * the trigger, then we should not adjust top
    * margins.
    */
-  if (triggerTop + triggerHeight + contentHeight > bodyHeight &&
-    (side === 'top' || side === 'bottom')) {
+  if (triggerTop + triggerHeight + contentHeight > bodyHeight && (side === 'top' || side === 'bottom')) {
     if (triggerTop - contentHeight > 0) {
-      top = triggerTop - contentHeight - triggerHeight - (arrowHeight - 1);
+      /**
+       * While we strive to align the popover with the trigger
+       * on smaller screens this is not always possible. As a result,
+       * we adjust the popover up so that it does not hang
+       * off the bottom of the screen. However, we do not want to move
+       * the popover up so much that it goes off the top of the screen.
+       *
+       * We chose 12 here so that the popover position looks a bit nicer as
+       * it is not right up against the edge of the screen.
+       */
+      top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
       arrowTop = top + contentHeight;
       originY = 'bottom';
       addPopoverBottomClass = true;
@@ -1467,7 +1464,18 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
       bottom = bodyPadding;
     }
   }
-  return { top, left, bottom, originX, originY, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass };
+  return {
+    top,
+    left,
+    bottom,
+    originX,
+    originY,
+    checkSafeAreaLeft,
+    checkSafeAreaRight,
+    arrowTop,
+    arrowLeft,
+    addPopoverBottomClass,
+  };
 };
 const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
   /**
@@ -1519,12 +1527,12 @@ const iosEnterAnimation = (baseEl, opts) => {
     top: bodyHeight / 2 - contentHeight / 2,
     left: bodyWidth / 2 - contentWidth / 2,
     originX: isRTL ? 'right' : 'left',
-    originY: 'top'
+    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 { 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();
@@ -1532,12 +1540,10 @@ const iosEnterAnimation = (baseEl, opts) => {
     .addElement(root.querySelector('ion-backdrop'))
     .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
     .beforeStyles({
-    'pointer-events': 'none'
+    'pointer-events': 'none',
   })
     .afterClearStyles(['pointer-events']);
-  wrapperAnimation
-    .addElement(root.querySelector('.popover-wrapper'))
-    .fromTo('opacity', 0.01, 1);
+  wrapperAnimation.addElement(root.querySelector('.popover-wrapper')).fromTo('opacity', 0.01, 1);
   return baseAnimation
     .easing('ease')
     .duration(100)
@@ -1591,12 +1597,8 @@ const iosLeaveAnimation = (baseEl) => {
   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);
+  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(() => {
@@ -1638,7 +1640,7 @@ const mdEnterAnimation = (baseEl, opts) => {
     top: bodyHeight / 2 - contentHeight / 2,
     left: bodyWidth / 2 - contentWidth / 2,
     originX: isRTL ? 'right' : 'left',
-    originY: 'top'
+    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;
@@ -1652,19 +1654,16 @@ const mdEnterAnimation = (baseEl, opts) => {
     .addElement(root.querySelector('ion-backdrop'))
     .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
     .beforeStyles({
-    'pointer-events': 'none'
+    'pointer-events': 'none',
   })
     .afterClearStyles(['pointer-events']);
-  wrapperAnimation
-    .addElement(root.querySelector('.popover-wrapper'))
-    .duration(150)
-    .fromTo('opacity', 0.01, 1);
+  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}`
+    top: `calc(${top}px + var(--offset-y, 0px))`,
+    left: `calc(${left}px + var(--offset-x, 0px))`,
+    'transform-origin': `${originY} ${originX}`,
   })
     .beforeAddWrite(() => {
     if (bottom !== undefined) {
@@ -1672,9 +1671,7 @@ const mdEnterAnimation = (baseEl, opts) => {
     }
   })
     .fromTo('transform', 'scale(0.8)', 'scale(1)');
-  viewportAnimation
-    .addElement(root.querySelector('.popover-viewport'))
-    .fromTo('opacity', 0.01, 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)
@@ -1701,12 +1698,8 @@ const mdLeaveAnimation = (baseEl) => {
   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);
+  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(() => {
@@ -1754,6 +1747,10 @@ const Popover = class {
     this.backdropDismiss = true;
     /**
      * If `true`, a backdrop will be displayed behind the popover.
+     * This property controls whether or not the backdrop
+     * darkens the screen when the popover is presented.
+     * It does not control whether or not the backdrop
+     * is active or present in the DOM.
      */
     this.showBackdrop = true;
     /**
@@ -1806,9 +1803,8 @@ const Popover = class {
      */
     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.
+     * If `true`, the popover will display an arrow that points at the
+     * `reference` when running in `ios` mode. Does not apply in `md` mode.
      */
     this.arrow = true;
     /**
@@ -1831,11 +1827,18 @@ const Popover = class {
      * behavior in a popover using a list of items.
      */
     this.keyboardEvents = false;
-    this.onDismiss = (ev) => {
-      ev.stopPropagation();
-      ev.preventDefault();
-      this.dismiss();
-    };
+    /**
+     * If `true`, the component passed into `ion-popover` will
+     * automatically be mounted when the popover is created. The
+     * component will remain mounted even when the popover is dismissed.
+     * However, the component will be destroyed when the popover is
+     * destroyed. This property is not reactive and should only be
+     * used when initially creating a popover.
+     *
+     * Note: This feature only applies to inline popovers in JavaScript
+     * frameworks such as Angular, React, and Vue.
+     */
+    this.keepContentsMounted = false;
     this.onBackdropTap = () => {
       this.dismiss(undefined, BACKDROP);
     };
@@ -1846,7 +1849,7 @@ const Popover = class {
         const event = new CustomEvent(name, {
           bubbles: false,
           cancelable: false,
-          detail: modalEvent.detail
+          detail: modalEvent.detail,
         });
         el.dispatchEvent(event);
       }
@@ -1856,7 +1859,7 @@ const Popover = class {
       if (destroyTriggerInteraction) {
         destroyTriggerInteraction();
       }
-      const triggerEl = this.triggerEl = (trigger !== undefined) ? document.getElementById(trigger) : null;
+      const triggerEl = (this.triggerEl = trigger !== undefined ? document.getElementById(trigger) : null);
       if (!triggerEl) {
         return;
       }
@@ -1899,7 +1902,7 @@ const Popover = class {
      * 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.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';
@@ -1948,7 +1951,7 @@ const Popover = class {
     if (this.workingDelegate && !force) {
       return {
         delegate: this.workingDelegate,
-        inline: this.inline
+        inline: this.inline,
       };
     }
     /**
@@ -1961,8 +1964,8 @@ const Popover = class {
      * 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;
+    const inline = (this.inline = parentEl !== null && !this.hasController);
+    const delegate = (this.workingDelegate = inline ? this.delegate || this.coreDelegate : this.delegate);
     return { inline, delegate };
   }
   /**
@@ -2000,7 +2003,7 @@ const Popover = class {
       trigger: this.triggerEl,
       reference: this.reference,
       side: this.side,
-      align: this.alignment
+      align: this.alignment,
     });
     await this.currentTransition;
     this.currentTransition = undefined;
@@ -2082,10 +2085,10 @@ const Popover = class {
     const mode = getIonMode(this);
     const { onLifecycle, popoverId, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
     const desktop = isPlatform('desktop');
-    const enableArrow = arrow && !parentPopover && !desktop;
+    const enableArrow = arrow && !parentPopover;
     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)))));
+      }, 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, 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 {
@@ -2095,10 +2098,10 @@ const Popover = class {
   }; }
 };
 const LIFECYCLE_MAP = {
-  'ionPopoverDidPresent': 'ionViewDidEnter',
-  'ionPopoverWillPresent': 'ionViewWillEnter',
-  'ionPopoverWillDismiss': 'ionViewWillLeave',
-  'ionPopoverDidDismiss': 'ionViewDidLeave',
+  ionPopoverDidPresent: 'ionViewDidEnter',
+  ionPopoverWillPresent: 'ionViewWillEnter',
+  ionPopoverWillDismiss: 'ionViewWillLeave',
+  ionPopoverDidDismiss: 'ionViewDidLeave',
 };
 let popoverIds = 0;
 Popover.style = {
@@ -2124,7 +2127,7 @@ const SelectPopover = class {
   }
   findOptionFromEvent(ev) {
     const { options } = this;
-    return options.find(o => o.value === ev.target.value);
+    return options.find((o) => o.value === ev.target.value);
   }
   /**
    * When an option is selected we need to get the value(s)
@@ -2134,7 +2137,7 @@ const SelectPopover = class {
   callOptionHandler(ev) {
     const option = this.findOptionFromEvent(ev);
     const values = this.getValues(ev);
-    if (option && option.handler) {
+    if (option === null || option === void 0 ? void 0 : option.handler) {
       safeCall(option.handler, values);
     }
   }
@@ -2160,7 +2163,7 @@ const SelectPopover = class {
     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);
+      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
@@ -2170,22 +2173,23 @@ const SelectPopover = class {
   renderOptions(options) {
     const { multiple } = this;
     switch (multiple) {
-      case true: return this.renderCheckboxOptions(options);
-      default: return this.renderRadioOptions(options);
+      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))));
+    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) })))));
+    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))));
+    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 = {