@sparkle-learning/core 0.0.32 → 0.0.35

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

@@ -2,19 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-bae2a754.js');
-const ionicGlobal = require('./ionic-global-878073d1.js');
-const haptic = require('./haptic-91e86eb7.js');
-const index = require('./index-43642662.js');
-const overlays = require('./overlays-0a748609.js');
-const theme = require('./theme-4252ac15.js');
-const animation = require('./animation-6132e37f.js');
-const index$2 = require('./index-185f9c5a.js');
-const frameworkDelegate = require('./framework-delegate-2470a246.js');
-const helpers = require('./helpers-7e28976c.js');
-const index$3 = require('./index-b12edb26.js');
-require('./gesture-controller-07c31f70.js');
-require('./hardware-back-button-f7b5d99e.js');
+const index$1 = require('./index-51e8292e.js');
+const ionicGlobal = require('./ionic-global-2cde9d3a.js');
+const haptic = require('./haptic-780f33c4.js');
+const index = require('./index-12082cba.js');
+const overlays = require('./overlays-32df265a.js');
+const theme = require('./theme-b0b295c1.js');
+const animation = require('./animation-ee586546.js');
+const index$2 = require('./index-af080b50.js');
+const frameworkDelegate = require('./framework-delegate-59a98abd.js');
+const helpers = require('./helpers-c2496722.js');
+const index$3 = require('./index-787d4498.js');
+require('./gesture-controller-0eb5579e.js');
+require('./hardware-back-button-92d97ff8.js');
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -68,13 +68,13 @@ const createButtonActiveGesture = (el, isButton) => {
     el,
     gestureName: 'buttonActiveDrag',
     threshold: 0,
-    onStart: ev => activateButtonAtPoint(ev.currentX, ev.currentY, haptic.hapticSelectionStart),
-    onMove: ev => activateButtonAtPoint(ev.currentX, ev.currentY, haptic.hapticSelectionChanged),
+    onStart: (ev) => activateButtonAtPoint(ev.currentX, ev.currentY, haptic.hapticSelectionStart),
+    onMove: (ev) => activateButtonAtPoint(ev.currentX, ev.currentY, haptic.hapticSelectionChanged),
     onEnd: () => {
       clearActiveButton(true);
       haptic.hapticSelectionEnd();
       initialTouchedButton = undefined;
-    }
+    },
   });
 };
 
@@ -92,7 +92,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
@@ -115,9 +115,7 @@ const iosLeaveAnimation$2 = (baseEl) => {
   const baseAnimation = animation.createAnimation();
   const backdropAnimation = animation.createAnimation();
   const wrapperAnimation = animation.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%)');
@@ -142,7 +140,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
@@ -165,9 +163,7 @@ const mdLeaveAnimation$2 = (baseEl) => {
   const baseAnimation = animation.createAnimation();
   const backdropAnimation = animation.createAnimation();
   const wrapperAnimation = animation.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%)');
@@ -218,7 +214,7 @@ const ActionSheet = class {
     this.dispatchCancelHandler = (ev) => {
       const role = ev.detail.role;
       if (overlays.isCancel(role)) {
-        const cancelButton = this.getButtons().find(b => b.role === 'cancel');
+        const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
         this.callButtonHandler(cancelButton);
       }
     };
@@ -281,10 +277,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() {
@@ -316,17 +310,14 @@ const ActionSheet = class {
     const { htmlAttributes } = this;
     const mode = ionicGlobal.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 (index$1.h(index$1.Host, Object.assign({ role: "dialog", "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
         zIndex: `${20000 + this.overlayIndex}`,
-      }, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index$1.h("ion-backdrop", { tappable: this.backdropDismiss }), index$1.h("div", { tabindex: "0" }), index$1.h("div", { class: "action-sheet-wrapper ion-overlay-wrapper", role: "dialog", ref: el => this.wrapperEl = el }, index$1.h("div", { class: "action-sheet-container" }, index$1.h("div", { class: "action-sheet-group", ref: el => this.groupEl = el }, this.header !== undefined &&
-      index$1.h("div", { class: {
-          'action-sheet-title': true,
-          'action-sheet-has-sub-title': this.subHeader !== undefined
-        } }, this.header, this.subHeader && index$1.h("div", { class: "action-sheet-sub-title" }, this.subHeader)), buttons.map(b => index$1.h("button", { type: "button", id: b.id, class: buttonClass$1(b), onClick: () => this.buttonClick(b) }, index$1.h("span", { class: "action-sheet-button-inner" }, b.icon && index$1.h("ion-icon", { icon: b.icon, lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index$1.h("ion-ripple-effect", null)))), cancelButton &&
-      index$1.h("div", { class: "action-sheet-group action-sheet-group-cancel" }, index$1.h("button", { type: "button", class: buttonClass$1(cancelButton), onClick: () => this.buttonClick(cancelButton) }, index$1.h("span", { class: "action-sheet-button-inner" }, cancelButton.icon &&
-        index$1.h("ion-icon", { icon: cancelButton.icon, lazy: false, class: "action-sheet-icon" }), cancelButton.text), mode === 'md' && index$1.h("ion-ripple-effect", null))))), index$1.h("div", { tabindex: "0" })));
+      }, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index$1.h("ion-backdrop", { tappable: this.backdropDismiss }), index$1.h("div", { tabindex: "0" }), index$1.h("div", { class: "action-sheet-wrapper ion-overlay-wrapper", role: "dialog", ref: (el) => (this.wrapperEl = el) }, index$1.h("div", { class: "action-sheet-container" }, index$1.h("div", { class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, this.header !== undefined && (index$1.h("div", { class: {
+        'action-sheet-title': true,
+        'action-sheet-has-sub-title': this.subHeader !== undefined,
+      } }, this.header, this.subHeader && index$1.h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (index$1.h("button", { type: "button", id: b.id, class: buttonClass$1(b), onClick: () => this.buttonClick(b) }, index$1.h("span", { class: "action-sheet-button-inner" }, b.icon && index$1.h("ion-icon", { icon: b.icon, lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index$1.h("ion-ripple-effect", null))))), cancelButton && (index$1.h("div", { class: "action-sheet-group action-sheet-group-cancel" }, index$1.h("button", { type: "button", class: buttonClass$1(cancelButton), onClick: () => this.buttonClick(cancelButton) }, index$1.h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && index$1.h("ion-icon", { icon: cancelButton.icon, lazy: false, class: "action-sheet-icon" }), cancelButton.text), mode === 'md' && index$1.h("ion-ripple-effect", null)))))), index$1.h("div", { tabindex: "0" })));
   }
   get el() { return index$1.getElement(this); }
 };
@@ -352,14 +343,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)
@@ -378,14 +367,10 @@ const iosLeaveAnimation$1 = (baseEl) => {
   const baseAnimation = animation.createAnimation();
   const backdropAnimation = animation.createAnimation();
   const wrapperAnimation = animation.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)
@@ -408,14 +393,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)
@@ -434,12 +417,8 @@ const mdLeaveAnimation$1 = (baseEl) => {
   const baseAnimation = animation.createAnimation();
   const backdropAnimation = animation.createAnimation();
   const wrapperAnimation = animation.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')
@@ -493,46 +472,42 @@ const Alert = class {
     this.dispatchCancelHandler = (ev) => {
       const role = ev.detail.role;
       if (overlays.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();
@@ -541,10 +516,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() {
@@ -553,14 +526,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) => ({
@@ -577,7 +550,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() {
@@ -663,7 +636,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 = overlays.safeCall(button.handler, data);
@@ -685,27 +658,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() {
@@ -714,24 +690,24 @@ const Alert = class {
     if (inputs.length === 0) {
       return null;
     }
-    return (index$1.h("div", { class: "alert-checkbox-group" }, inputs.map(i => (index$1.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({}, theme.getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, index$1.h("div", { class: "alert-button-inner" }, index$1.h("div", { class: "alert-checkbox-icon" }, index$1.h("div", { class: "alert-checkbox-inner" })), index$1.h("div", { class: "alert-checkbox-label" }, i.label)), mode === 'md' && index$1.h("ion-ripple-effect", null))))));
+    return (index$1.h("div", { class: "alert-checkbox-group" }, inputs.map((i) => (index$1.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({}, theme.getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, index$1.h("div", { class: "alert-button-inner" }, index$1.h("div", { class: "alert-checkbox-icon" }, index$1.h("div", { class: "alert-checkbox-inner" })), index$1.h("div", { class: "alert-checkbox-label" }, i.label)), mode === 'md' && index$1.h("ion-ripple-effect", null))))));
   }
   renderRadio() {
     const inputs = this.processedInputs;
     if (inputs.length === 0) {
       return null;
     }
-    return (index$1.h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map(i => (index$1.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({}, theme.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" }, index$1.h("div", { class: "alert-button-inner" }, index$1.h("div", { class: "alert-radio-icon" }, index$1.h("div", { class: "alert-radio-inner" })), index$1.h("div", { class: "alert-radio-label" }, i.label)))))));
+    return (index$1.h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => (index$1.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({}, theme.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" }, index$1.h("div", { class: "alert-button-inner" }, index$1.h("div", { class: "alert-radio-icon" }, index$1.h("div", { class: "alert-radio-inner" })), index$1.h("div", { class: "alert-radio-label" }, i.label)))))));
   }
   renderInput() {
     const inputs = this.processedInputs;
     if (inputs.length === 0) {
       return null;
     }
-    return (index$1.h("div", { class: "alert-input-group" }, inputs.map(i => {
+    return (index$1.h("div", { class: "alert-input-group" }, inputs.map((i) => {
       var _a, _b, _c, _d;
       if (i.type === 'textarea') {
-        return (index$1.h("div", { class: "alert-input-wrapper" }, index$1.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 (index$1.h("div", { class: "alert-input-wrapper" }, index$1.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) {
@@ -740,7 +716,7 @@ const Alert = class {
           } }))));
       }
       else {
-        return (index$1.h("div", { class: "alert-input-wrapper" }, index$1.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 (index$1.h("div", { class: "alert-input-wrapper" }, index$1.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) {
@@ -755,9 +731,9 @@ const Alert = class {
     const mode = ionicGlobal.getIonMode(this);
     const alertButtonGroupClass = {
       'alert-button-group': true,
-      'alert-button-group-vertical': buttons.length > 2
+      'alert-button-group-vertical': buttons.length > 2,
     };
-    return (index$1.h("div", { class: alertButtonGroupClass }, buttons.map(button => index$1.h("button", { type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }, index$1.h("span", { class: "alert-button-inner" }, button.text), mode === 'md' && index$1.h("ion-ripple-effect", null)))));
+    return (index$1.h("div", { class: alertButtonGroupClass }, buttons.map((button) => (index$1.h("button", { type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }, index$1.h("span", { class: "alert-button-inner" }, button.text), mode === 'md' && index$1.h("ion-ripple-effect", null))))));
   }
   render() {
     const { overlayIndex, header, subHeader, htmlAttributes } = this;
@@ -768,7 +744,7 @@ const Alert = class {
     const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';
     return (index$1.h(index$1.Host, Object.assign({ role: role, "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
         zIndex: `${20000 + overlayIndex}`,
-      }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index$1.h("ion-backdrop", { tappable: this.backdropDismiss }), index$1.h("div", { tabindex: "0" }), index$1.h("div", { class: "alert-wrapper ion-overlay-wrapper", ref: el => this.wrapperEl = el }, index$1.h("div", { class: "alert-head" }, header && index$1.h("h2", { id: hdrId, class: "alert-title" }, header), subHeader && index$1.h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader)), index$1.h("div", { id: msgId, class: "alert-message", innerHTML: index$2.sanitizeDOMString(this.message) }), this.renderAlertInputs(), this.renderAlertButtons()), index$1.h("div", { tabindex: "0" })));
+      }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index$1.h("ion-backdrop", { tappable: this.backdropDismiss }), index$1.h("div", { tabindex: "0" }), index$1.h("div", { class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index$1.h("div", { class: "alert-head" }, header && (index$1.h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (index$1.h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), index$1.h("div", { id: msgId, class: "alert-message", innerHTML: index$2.sanitizeDOMString(this.message) }), this.renderAlertInputs(), this.renderAlertButtons()), index$1.h("div", { tabindex: "0" })));
   }
   get el() { return index$1.getElement(this); }
   static get watchers() { return {
@@ -818,7 +794,7 @@ const getPopoverDimensions = (size, contentEl, triggerEl) => {
   }
   return {
     contentWidth,
-    contentHeight
+    contentHeight,
   };
 };
 const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parentPopoverEl) => {
@@ -851,8 +827,8 @@ const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parent
               return;
             }
             popoverEl.dismiss(undefined, undefined, false);
-          }
-        }
+          },
+        },
       ];
       break;
     case 'context-menu':
@@ -879,8 +855,8 @@ const configureDismissInteraction = (triggerEl, triggerAction, popoverEl, parent
               return;
             }
             popoverEl.dismiss(undefined, undefined, false);
-          }
-        }
+          },
+        },
       ];
       break;
   }
@@ -922,7 +898,7 @@ const configureTriggerInteraction = (triggerEl, triggerAction, popoverEl) => {
                 hoverTimeout = undefined;
               });
             }, 100);
-          }
+          },
         },
         {
           eventName: 'mouseleave',
@@ -942,7 +918,7 @@ const configureTriggerInteraction = (triggerEl, triggerAction, popoverEl) => {
             if (target.closest('ion-popover') !== popoverEl) {
               popoverEl.dismiss(undefined, undefined, false);
             }
-          }
+          },
         },
         {
           /**
@@ -950,12 +926,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':
@@ -969,16 +945,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':
@@ -993,12 +969,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;
   }
@@ -1016,7 +992,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
@@ -1051,8 +1027,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
@@ -1064,9 +1049,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
@@ -1088,7 +1073,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);
         }
@@ -1100,7 +1084,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);
         }
@@ -1111,7 +1094,6 @@ const configureKeyboardInteraction = (popoverEl) => {
       case 'Home':
         ev.preventDefault();
         const firstItem = items[0];
-        // tslint:disable-next-line:strict-type-predicates
         if (firstItem !== undefined) {
           focusItem(firstItem);
         }
@@ -1122,7 +1104,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);
         }
@@ -1156,7 +1137,7 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
     top: 0,
     left: 0,
     width: 0,
-    height: 0
+    height: 0,
   };
   /**
    * Calculate position relative to the
@@ -1173,7 +1154,7 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
         top: mouseEv.clientY,
         left: mouseEv.clientX,
         width: 1,
-        height: 1
+        height: 1,
       };
       break;
     /**
@@ -1195,7 +1176,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;
       }
@@ -1204,7 +1187,7 @@ const getPopoverPosition = (isRTL, contentWidth, contentHeight, arrowWidth, arro
         top: triggerBoundingBox.top,
         left: triggerBoundingBox.left,
         width: triggerBoundingBox.width,
-        height: triggerBoundingBox.height
+        height: triggerBoundingBox.height,
       };
       break;
   }
@@ -1244,9 +1227,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) => {
@@ -1279,26 +1262,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 };
   }
@@ -1312,31 +1298,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;
   }
 };
 /**
@@ -1373,14 +1359,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),
       };
   }
 };
@@ -1400,15 +1386,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),
       };
   }
 };
@@ -1427,7 +1413,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;
   /**
@@ -1455,10 +1443,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;
@@ -1471,7 +1468,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) => {
   /**
@@ -1523,12 +1531,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 = animation.createAnimation();
   const backdropAnimation = animation.createAnimation();
   const wrapperAnimation = animation.createAnimation();
@@ -1536,12 +1544,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)
@@ -1595,12 +1601,8 @@ const iosLeaveAnimation = (baseEl) => {
   const baseAnimation = animation.createAnimation();
   const backdropAnimation = animation.createAnimation();
   const wrapperAnimation = animation.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(() => {
@@ -1642,7 +1644,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;
@@ -1656,19 +1658,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) {
@@ -1676,9 +1675,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)
@@ -1705,12 +1702,8 @@ const mdLeaveAnimation = (baseEl) => {
   const baseAnimation = animation.createAnimation();
   const backdropAnimation = animation.createAnimation();
   const wrapperAnimation = animation.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(() => {
@@ -1758,6 +1751,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;
     /**
@@ -1810,9 +1807,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;
     /**
@@ -1835,11 +1831,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, overlays.BACKDROP);
     };
@@ -1850,7 +1853,7 @@ const Popover = class {
         const event = new CustomEvent(name, {
           bubbles: false,
           cancelable: false,
-          detail: modalEvent.detail
+          detail: modalEvent.detail,
         });
         el.dispatchEvent(event);
       }
@@ -1860,7 +1863,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;
       }
@@ -1903,7 +1906,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 = ionicGlobal.getIonMode(this) === 'ios' ? 'center' : 'start';
@@ -1952,7 +1955,7 @@ const Popover = class {
     if (this.workingDelegate && !force) {
       return {
         delegate: this.workingDelegate,
-        inline: this.inline
+        inline: this.inline,
       };
     }
     /**
@@ -1965,8 +1968,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 };
   }
   /**
@@ -2004,7 +2007,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;
@@ -2086,10 +2089,10 @@ const Popover = class {
     const mode = ionicGlobal.getIonMode(this);
     const { onLifecycle, popoverId, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
     const desktop = ionicGlobal.isPlatform('desktop');
-    const enableArrow = arrow && !parentPopover && !desktop;
+    const enableArrow = arrow && !parentPopover;
     return (index$1.h(index$1.Host, Object.assign({ "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
         zIndex: `${20000 + this.overlayIndex}`,
-      }, id: popoverId, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonDismiss: this.onDismiss, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index$1.h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index$1.h("div", { class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index$1.h("div", { class: "popover-arrow", part: "arrow" }), index$1.h("div", { class: "popover-content", part: "content" }, index$1.h("slot", null)))));
+      }, id: popoverId, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index$1.h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index$1.h("div", { class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index$1.h("div", { class: "popover-arrow", part: "arrow" }), index$1.h("div", { class: "popover-content", part: "content" }, index$1.h("slot", null)))));
   }
   get el() { return index$1.getElement(this); }
   static get watchers() { return {
@@ -2099,10 +2102,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 = {
@@ -2128,7 +2131,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)
@@ -2138,7 +2141,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) {
       overlays.safeCall(option.handler, values);
     }
   }
@@ -2164,7 +2167,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
@@ -2174,22 +2177,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 => index$1.h("ion-item", { class: theme.getClassMap(option.cssClass) }, index$1.h("ion-checkbox", { slot: "start", value: option.value, disabled: option.disabled, checked: option.checked }), index$1.h("ion-label", null, option.text))));
+    return options.map((option) => (index$1.h("ion-item", { class: theme.getClassMap(option.cssClass) }, index$1.h("ion-checkbox", { slot: "start", value: option.value, disabled: option.disabled, checked: option.checked }), index$1.h("ion-label", null, option.text))));
   }
   renderRadioOptions(options) {
-    const checked = options.filter(o => o.checked).map(o => o.value)[0];
-    return (index$1.h("ion-radio-group", { value: checked }, options.map(option => index$1.h("ion-item", { class: theme.getClassMap(option.cssClass) }, index$1.h("ion-label", null, option.text), index$1.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 (index$1.h("ion-radio-group", { value: checked }, options.map((option) => (index$1.h("ion-item", { class: theme.getClassMap(option.cssClass) }, index$1.h("ion-label", null, option.text), index$1.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 (index$1.h(index$1.Host, { class: ionicGlobal.getIonMode(this) }, index$1.h("ion-list", null, header !== undefined && index$1.h("ion-list-header", null, header), hasSubHeaderOrMessage &&
-      index$1.h("ion-item", null, index$1.h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && index$1.h("h3", null, subHeader), message !== undefined && index$1.h("p", null, message))), this.renderOptions(options))));
+    return (index$1.h(index$1.Host, { class: ionicGlobal.getIonMode(this) }, index$1.h("ion-list", null, header !== undefined && index$1.h("ion-list-header", null, header), hasSubHeaderOrMessage && (index$1.h("ion-item", null, index$1.h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && index$1.h("h3", null, subHeader), message !== undefined && index$1.h("p", null, message)))), this.renderOptions(options))));
   }
 };
 SelectPopover.style = {