@sparkle-learning/core 0.0.34 → 0.0.37

package/dist/esm/ion-picker-column.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
-import { e as clamp } from './helpers-9d0930de.js';
-import { b as hapticSelectionChanged, c as hapticSelectionEnd, a as hapticSelectionStart } from './haptic-99c9e346.js';
+import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
+import { d as clamp } from './helpers-03073fe4.js';
+import { b as hapticSelectionChanged, c as hapticSelectionEnd, a as hapticSelectionStart } from './haptic-522f76f2.js';
 
 const pickerColumnIosCss = ".picker-col{display:flex;position:relative;flex:1;justify-content:center;height:100%;box-sizing:content-box;contain:content}.picker-opts{position:relative;flex:1;max-width:100%}.picker-opt{left:0;top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}[dir=rtl] .picker-opt,:host-context([dir=rtl]) .picker-opt{left:unset;right:unset;right:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{justify-content:flex-start}.picker-opts-right{justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;flex:1;text-align:start;white-space:nowrap}.picker-col{padding-left:4px;padding-right:4px;padding-top:0;padding-bottom:0;transform-style:preserve-3d}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.picker-col{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}.picker-prefix,.picker-suffix,.picker-opts{top:77px;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;transform-origin:center center;height:46px;transform-style:preserve-3d;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;backface-visibility:hidden;pointer-events:auto}[dir=rtl] .picker-opt,:host-context([dir=rtl]) .picker-opt{transform-origin:calc(100% - center) center}";
 
@@ -31,15 +31,15 @@ const PickerColumnCmp = class {
     }
     this.rotateFactor = pickerRotateFactor;
     this.scaleFactor = pickerScaleFactor;
-    this.gesture = (await import('./index-a12c14bd.js')).createGesture({
+    this.gesture = (await import('./index-21661af2.js')).createGesture({
       el: this.el,
       gestureName: 'picker-swipe',
       gesturePriority: 100,
       threshold: 0,
       passive: false,
-      onStart: ev => this.onStart(ev),
-      onMove: ev => this.onMove(ev),
-      onEnd: ev => this.onEnd(ev),
+      onStart: (ev) => this.onStart(ev),
+      onMove: (ev) => this.onMove(ev),
+      onEnd: (ev) => this.onEnd(ev),
     });
     this.gesture.enable();
     this.tmrId = setTimeout(() => {
@@ -52,7 +52,7 @@ const PickerColumnCmp = class {
     if (colEl) {
       // DOM READ
       // We perfom a DOM read over a rendered item, this needs to happen after the first render
-      this.optHeight = (colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0);
+      this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
     }
     this.refresh();
   }
@@ -70,7 +70,7 @@ const PickerColumnCmp = class {
   setSelected(selectedIndex, duration) {
     // if there is a selected index, then figure out it's y position
     // if there isn't a selected index, then just use the top y position
-    const y = (selectedIndex > -1) ? -(selectedIndex * this.optHeight) : 0;
+    const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
     this.velocity = 0;
     // set what y position we're at
     cancelAnimationFrame(this.rafId);
@@ -85,14 +85,14 @@ const PickerColumnCmp = class {
     let translateY = 0;
     let translateZ = 0;
     const { col, rotateFactor } = this;
-    const selectedIndex = col.selectedIndex = this.indexForY(-y);
-    const durationStr = (duration === 0) ? '' : duration + 'ms';
+    const selectedIndex = (col.selectedIndex = this.indexForY(-y));
+    const durationStr = duration === 0 ? '' : duration + 'ms';
     const scaleStr = `scale(${this.scaleFactor})`;
     const children = this.optsEl.children;
     for (let i = 0; i < children.length; i++) {
       const button = children[i];
       const opt = col.options[i];
-      const optOffset = (i * this.optHeight) + y;
+      const optOffset = i * this.optHeight + y;
       let transform = '';
       if (rotateFactor !== 0) {
         const rotateX = optOffset * rotateFactor;
@@ -126,8 +126,8 @@ const PickerColumnCmp = class {
       // Update transform
       if (transform !== opt.transform) {
         opt.transform = transform;
-        button.style.transform = transform;
       }
+      button.style.transform = transform;
       // Update selected item
       if (selected !== opt.selected) {
         opt.selected = selected;
@@ -154,9 +154,7 @@ const PickerColumnCmp = class {
       // still decelerating
       this.velocity *= DECELERATION_FRICTION;
       // do not let it go slower than a velocity of 1
-      this.velocity = (this.velocity > 0)
-        ? Math.max(this.velocity, 1)
-        : Math.min(this.velocity, -1);
+      this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
       let y = this.y + this.velocity;
       if (y > this.minY) {
         // whoops, it's trying to scroll up farther than the options we have!
@@ -169,7 +167,7 @@ const PickerColumnCmp = class {
         this.velocity = 0;
       }
       this.update(y, 0, true);
-      const notLockedIn = (Math.round(y) % this.optHeight !== 0) || (Math.abs(this.velocity) > 1);
+      const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1;
       if (notLockedIn) {
         // isn't locked in yet, keep decelerating until it is
         this.rafId = requestAnimationFrame(() => this.decelerate());
@@ -184,7 +182,7 @@ const PickerColumnCmp = class {
       // needs to still get locked into a position so options line up
       const currentPos = Math.abs(this.y % this.optHeight);
       // create a velocity in the direction it needs to scroll
-      this.velocity = (currentPos > (this.optHeight / 2) ? 1 : -1);
+      this.velocity = currentPos > this.optHeight / 2 ? 1 : -1;
       this.decelerate();
     }
   }
@@ -204,7 +202,7 @@ const PickerColumnCmp = class {
     // reset everything
     cancelAnimationFrame(this.rafId);
     const options = this.col.options;
-    let minY = (options.length - 1);
+    let minY = options.length - 1;
     let maxY = 0;
     for (let i = 0; i < options.length; i++) {
       if (!options[i].disabled) {
@@ -253,7 +251,7 @@ const PickerColumnCmp = class {
     this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
     if (this.velocity === 0 && detail.deltaY === 0) {
       const opt = detail.event.target.closest('.picker-opt');
-      if (opt && opt.hasAttribute('opt-index')) {
+      if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) {
         this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
       }
     }
@@ -294,7 +292,7 @@ const PickerColumnCmp = class {
     }
     const selectedIndex = clamp(min, this.col.selectedIndex || 0, max);
     if (this.col.prevSelected !== selectedIndex || forceRefresh) {
-      const y = (selectedIndex * this.optHeight) * -1;
+      const y = selectedIndex * this.optHeight * -1;
       this.velocity = 0;
       this.update(y, TRANSITION_DURATION, true);
     }
@@ -307,10 +305,10 @@ const PickerColumnCmp = class {
         [mode]: true,
         'picker-col': true,
         'picker-opts-left': this.col.align === 'left',
-        'picker-opts-right': this.col.align === 'right'
+        'picker-opts-right': this.col.align === 'right',
       }, style: {
-        'max-width': this.col.columnWidth
-      } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: el => this.optsEl = el }, col.options.map((o, index) => h(Button, { type: "button", class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+        'max-width': this.col.columnWidth,
+      } }, col.prefix && (h("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h(Button, { type: "button", class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/ion-picker.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
-import { B as BACKDROP, i as isCancel, p as prepareOverlay, a as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays-5c777f10.js';
-import { g as getClassMap } from './theme-c336c9d9.js';
-import { c as createAnimation } from './animation-7b083379.js';
-import './hardware-back-button-b6ccf74a.js';
-import './helpers-9d0930de.js';
+import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
+import { B as BACKDROP, i as isCancel, p as prepareOverlay, a as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays-bdd9344a.js';
+import { g as getClassMap } from './theme-7ef00c83.js';
+import { c as createAnimation } from './animation-e0716b39.js';
+import './hardware-back-button-fa04d6e9.js';
+import './helpers-03073fe4.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -20,7 +20,7 @@ const iosEnterAnimation = (baseEl) => {
     .addElement(baseEl.querySelector('ion-backdrop'))
     .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
     .beforeStyles({
-    'pointer-events': 'none'
+    'pointer-events': 'none',
   })
     .afterClearStyles(['pointer-events']);
   wrapperAnimation
@@ -102,7 +102,7 @@ const Picker = class {
     this.dispatchCancelHandler = (ev) => {
       const role = ev.detail.role;
       if (isCancel(role)) {
-        const cancelButton = this.buttons.find(b => b.role === 'cancel');
+        const cancelButton = this.buttons.find((b) => b.role === 'cancel');
         this.callButtonHandler(cancelButton);
       }
     };
@@ -152,7 +152,7 @@ const Picker = class {
    * @param name The name of the column.
    */
   getColumn(name) {
-    return Promise.resolve(this.columns.find(column => column.name === name));
+    return Promise.resolve(this.columns.find((column) => column.name === name));
   }
   async buttonClick(button) {
     const role = button.role;
@@ -180,13 +180,11 @@ const Picker = class {
   getSelected() {
     const selected = {};
     this.columns.forEach((col, index) => {
-      const selectedColumn = col.selectedIndex !== undefined
-        ? col.options[col.selectedIndex]
-        : undefined;
+      const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined;
       selected[col.name] = {
         text: selectedColumn ? selectedColumn.text : undefined,
         value: selectedColumn ? selectedColumn.value : undefined,
-        columnIndex: index
+        columnIndex: index,
       };
     });
     return selected;
@@ -195,17 +193,17 @@ const Picker = class {
     const { htmlAttributes } = this;
     const mode = getIonMode(this);
     return (h(Host, Object.assign({ "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
-        zIndex: `${20000 + this.overlayIndex}`
+        zIndex: `${20000 + this.overlayIndex}`,
       }, class: Object.assign({ [mode]: true,
         // Used internally for styling
-        [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { class: "picker-toolbar" }, this.buttons.map(b => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { class: "picker-columns" }, h("div", { class: "picker-above-highlight" }), this.presented && this.columns.map(c => h("ion-picker-column", { col: c })), h("div", { class: "picker-below-highlight" }))), h("div", { tabindex: "0" })));
+        [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { class: "picker-columns" }, h("div", { class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-column", { col: c })), h("div", { class: "picker-below-highlight" }))), h("div", { tabindex: "0" })));
   }
   get el() { return getElement(this); }
 };
 const buttonWrapperClass = (button) => {
   return {
     [`picker-toolbar-${button.role}`]: button.role !== undefined,
-    'picker-toolbar-button': true
+    'picker-toolbar-button': true,
   };
 };
 const buttonClass = (button) => {

package/dist/esm/ion-progress-bar.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host } from './index-5568e3fa.js';
-import { c as config, g as getIonMode } from './ionic-global-0939c477.js';
-import { e as clamp } from './helpers-9d0930de.js';
-import { c as createColorClasses } from './theme-c336c9d9.js';
+import { r as registerInstance, h, H as Host } from './index-c04b9ed5.js';
+import { c as config, g as getIonMode } from './ionic-global-4903e23e.js';
+import { d as clamp } from './helpers-03073fe4.js';
+import { c as createColorClasses } from './theme-7ef00c83.js';
 
 const progressBarIosCss = ":host{--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);--progress-background:var(--ion-color-primary, #3880ff);--buffer-background:var(--background);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.buffer-circles-container,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute}.buffer-circles{right:-10px;left:-10px;}.progress,.progress-buffer-bar,.buffer-circles-container{transform-origin:left top;transition:transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:var(--buffer-background);z-index:1}.buffer-circles-container{overflow:hidden}.indeterminate-bar-primary{top:0;right:0;bottom:0;left:-145.166611%;animation:primary-indeterminate-translate 2s infinite linear}.indeterminate-bar-primary .progress-indeterminate{animation:primary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.indeterminate-bar-secondary{top:0;right:0;bottom:0;left:-54.888891%;animation:secondary-indeterminate-translate 2s infinite linear}.indeterminate-bar-secondary .progress-indeterminate{animation:secondary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.buffer-circles{background-image:radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);background-repeat:repeat-x;background-position:5px center;background-size:10px 10px;z-index:0;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed){transform:scaleX(-1)}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{animation-play-state:paused}:host(.ion-color) .progress-buffer-bar{background:rgba(var(--ion-color-base-rgb), 0.3)}:host(.ion-color) .buffer-circles{background-image:radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%)}:host(.ion-color) .progress,:host(.ion-color) .progress-indeterminate{background:var(--ion-color-base)}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{to{transform:translateX(-10px)}}:host{height:3px}";
 
@@ -39,10 +39,8 @@ const ProgressBar = class {
         [mode]: true,
         [`progress-bar-${type}`]: true,
         'progress-paused': paused,
-        'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed
-      }) }, type === 'indeterminate'
-      ? renderIndeterminate()
-      : renderProgress(value, buffer)));
+        'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
+      }) }, type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)));
   }
 };
 const renderIndeterminate = () => {

package/dist/esm/ion-refresher-content.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { j as caretBackSharp, k as arrowDown } from './index-ea26196a.js';
-import { g as getIonMode, c as config, a as isPlatform } from './ionic-global-0939c477.js';
-import { s as sanitizeDOMString } from './index-435af8e6.js';
-import { S as SPINNERS } from './spinner-configs-f609a655.js';
+import { r as registerInstance, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { j as caretBackSharp, k as arrowDown } from './index-4044fde9.js';
+import { g as getIonMode, c as config, a as isPlatform } from './ionic-global-4903e23e.js';
+import { s as sanitizeDOMString } from './index-be6112f8.js';
+import { S as SPINNERS } from './spinner-configs-a37e628a.js';
 
 const RefresherContent = class {
   constructor(hostRef) {
@@ -23,13 +23,7 @@ const RefresherContent = class {
     const pullingIcon = this.pullingIcon;
     const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
     const mode = getIonMode(this);
-    return (h(Host, { class: mode }, h("div", { class: "refresher-pulling" }, this.pullingIcon && hasSpinner &&
-      h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' &&
-        h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp })))), this.pullingIcon && !hasSpinner &&
-      h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false })), this.pullingText &&
-      h("div", { class: "refresher-pulling-text", innerHTML: sanitizeDOMString(this.pullingText) })), h("div", { class: "refresher-refreshing" }, this.refreshingSpinner &&
-      h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner })), this.refreshingText &&
-      h("div", { class: "refresher-refreshing-text", innerHTML: sanitizeDOMString(this.refreshingText) }))));
+    return (h(Host, { class: mode }, h("div", { class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp })))))), this.pullingIcon && !hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false }))), this.pullingText && (h("div", { class: "refresher-pulling-text", innerHTML: sanitizeDOMString(this.pullingText) }))), h("div", { class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText && (h("div", { class: "refresher-refreshing-text", innerHTML: sanitizeDOMString(this.refreshingText) })))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/ion-refresher.entry.js

@@ -1,9 +1,11 @@
-import { w as writeTask, r as registerInstance, i as createEvent, j as readTask, h, e as getElement, H as Host } from './index-5568e3fa.js';
-import { a as isPlatform, g as getIonMode } from './ionic-global-0939c477.js';
-import { g as getTimeGivenProgression } from './cubic-bezier-a7ad9c8e.js';
-import { t as transitionEndAsync, c as componentOnReady, e as clamp, g as getElementRoot, b as raf } from './helpers-9d0930de.js';
-import { h as hapticImpact } from './haptic-99c9e346.js';
-import { c as createAnimation } from './animation-7b083379.js';
+import { w as writeTask, r as registerInstance, i as createEvent, j as readTask, h, e as getElement, H as Host } from './index-c04b9ed5.js';
+import { a as isPlatform, g as getIonMode } from './ionic-global-4903e23e.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-4c0db14f.js';
+import { I as ION_CONTENT_ELEMENT_SELECTOR, p as printIonContentErrorMsg, b as ION_CONTENT_CLASS_SELECTOR, g as getScrollElement } from './index-37004831.js';
+import { t as transitionEndAsync, c as componentOnReady, d as clamp, g as getElementRoot, b as raf } from './helpers-03073fe4.js';
+import { h as hapticImpact } from './haptic-522f76f2.js';
+import { c as createAnimation } from './animation-e0716b39.js';
+import './index-dad75b83.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -14,38 +16,38 @@ const getRefresherAnimationType = (contentEl) => {
   return hasHeader ? 'translate' : 'scale';
 };
 const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
-  return type === 'scale' ? createScaleAnimation(pullingSpinner, refresherEl) : createTranslateAnimation(pullingSpinner, refresherEl);
+  return type === 'scale'
+    ? createScaleAnimation(pullingSpinner, refresherEl)
+    : createTranslateAnimation(pullingSpinner, refresherEl);
 };
 const createBaseAnimation = (pullingRefresherIcon) => {
   const spinner = pullingRefresherIcon.querySelector('ion-spinner');
   const circle = spinner.shadowRoot.querySelector('circle');
   const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
   const arrowContainer = pullingRefresherIcon.querySelector('.arrow-container');
-  const arrow = (arrowContainer) ? arrowContainer.querySelector('ion-icon') : null;
-  const baseAnimation = createAnimation()
-    .duration(1000)
-    .easing('ease-out');
+  const arrow = arrowContainer ? arrowContainer.querySelector('ion-icon') : null;
+  const baseAnimation = createAnimation().duration(1000).easing('ease-out');
   const spinnerArrowContainerAnimation = createAnimation()
     .addElement(spinnerArrowContainer)
     .keyframes([
     { offset: 0, opacity: '0.3' },
     { offset: 0.45, opacity: '0.3' },
     { offset: 0.55, opacity: '1' },
-    { offset: 1, opacity: '1' }
+    { offset: 1, opacity: '1' },
   ]);
   const circleInnerAnimation = createAnimation()
     .addElement(circle)
     .keyframes([
     { offset: 0, strokeDasharray: '1px, 200px' },
-    { offset: 0.20, strokeDasharray: '1px, 200px' },
+    { offset: 0.2, strokeDasharray: '1px, 200px' },
     { offset: 0.55, strokeDasharray: '100px, 200px' },
-    { offset: 1, strokeDasharray: '100px, 200px' }
+    { offset: 1, strokeDasharray: '100px, 200px' },
   ]);
   const circleOuterAnimation = createAnimation()
     .addElement(spinner)
     .keyframes([
     { offset: 0, transform: 'rotate(-90deg)' },
-    { offset: 1, transform: 'rotate(210deg)' }
+    { offset: 1, transform: 'rotate(210deg)' },
   ]);
   /**
    * Only add arrow animation if present
@@ -57,17 +59,17 @@ const createBaseAnimation = (pullingRefresherIcon) => {
       .addElement(arrowContainer)
       .keyframes([
       { offset: 0, transform: 'rotate(0deg)' },
-      { offset: 0.30, transform: 'rotate(0deg)' },
+      { offset: 0.3, transform: 'rotate(0deg)' },
       { offset: 0.55, transform: 'rotate(280deg)' },
-      { offset: 1, transform: 'rotate(400deg)' }
+      { offset: 1, transform: 'rotate(400deg)' },
     ]);
     const arrowAnimation = createAnimation()
       .addElement(arrow)
       .keyframes([
       { offset: 0, transform: 'translateX(2px) scale(0)' },
-      { offset: 0.30, transform: 'translateX(2px) scale(0)' },
+      { offset: 0.3, transform: 'translateX(2px) scale(0)' },
       { offset: 0.55, transform: 'translateX(-1.5px) scale(1)' },
-      { offset: 1, transform: 'translateX(-1.5px) scale(1)' }
+      { offset: 1, transform: 'translateX(-1.5px) scale(1)' },
     ]);
     baseAnimation.addAnimation([arrowContainerAnimation, arrowAnimation]);
   }
@@ -88,7 +90,7 @@ const createScaleAnimation = (pullingRefresherIcon, refresherEl) => {
     .addElement(pullingRefresherIcon)
     .keyframes([
     { offset: 0, transform: `scale(0) translateY(-${height}px)` },
-    { offset: 1, transform: 'scale(1) translateY(100px)' }
+    { offset: 1, transform: 'scale(1) translateY(100px)' },
   ]);
   return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
 };
@@ -107,7 +109,7 @@ const createTranslateAnimation = (pullingRefresherIcon, refresherEl) => {
     .addElement(pullingRefresherIcon)
     .keyframes([
     { offset: 0, transform: `translateY(-${height}px)` },
-    { offset: 1, transform: 'translateY(100px)' }
+    { offset: 1, transform: 'translateY(100px)' },
   ]);
   return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
 };
@@ -143,7 +145,7 @@ const handleScrollWhilePulling = (ticks, numTicks, pullAmount) => {
 const handleScrollWhileRefreshing = (spinner, lastVelocityY) => {
   writeTask(() => {
     // If user pulls down quickly, the spinner should spin faster
-    spinner.style.setProperty('--refreshing-rotation-duration', (lastVelocityY >= 1.0) ? '0.5s' : '2s');
+    spinner.style.setProperty('--refreshing-rotation-duration', lastVelocityY >= 1.0 ? '0.5s' : '2s');
     spinner.style.setProperty('opacity', '1');
   });
 };
@@ -170,7 +172,7 @@ const shouldUseNativeRefresher = async (referenceEl, mode) => {
   if (!refresherContent) {
     return Promise.resolve(false);
   }
-  await new Promise(resolve => componentOnReady(refresherContent, resolve));
+  await new Promise((resolve) => componentOnReady(refresherContent, resolve));
   const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner');
   const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
   return (pullingSpinner !== null &&
@@ -289,7 +291,7 @@ const Refresher = class {
     this.didRefresh = false;
     this.needsCompletion = false;
     this.pointerDown = false;
-    this.animations.forEach(ani => ani.destroy());
+    this.animations.forEach((ani) => ani.destroy());
     this.animations = [];
     this.progress = 0;
     this.state = 1 /* Inactive */;
@@ -299,7 +301,7 @@ const Refresher = class {
     const ticks = pullingSpinner.shadowRoot.querySelectorAll('svg');
     let MAX_PULL = this.scrollEl.clientHeight * 0.16;
     const NUM_TICKS = ticks.length;
-    writeTask(() => ticks.forEach(el => el.style.setProperty('animation', 'none')));
+    writeTask(() => ticks.forEach((el) => el.style.setProperty('animation', 'none')));
     this.scrollListenerCallback = () => {
       // If pointer is not on screen or refresher is not active, ignore scroll
       if (!this.pointerDown && this.state === 1 /* Inactive */) {
@@ -338,8 +340,8 @@ const Refresher = class {
          * gesture before the refresher completes, we want the
          * refresher tick marks to quickly fade out.
          */
-        const offset = (this.didStart) ? 30 : 0;
-        const pullAmount = this.progress = clamp(0, (Math.abs(scrollTop) - offset) / MAX_PULL, 1);
+        const offset = this.didStart ? 30 : 0;
+        const pullAmount = (this.progress = clamp(0, (Math.abs(scrollTop) - offset) / MAX_PULL, 1));
         const shouldShowRefreshingSpinner = this.state === 8 /* Refreshing */ || pullAmount === 1;
         if (shouldShowRefreshingSpinner) {
           if (this.pointerDown) {
@@ -365,7 +367,7 @@ const Refresher = class {
       });
     };
     this.scrollEl.addEventListener('scroll', this.scrollListenerCallback);
-    this.gesture = (await import('./index-a12c14bd.js')).createGesture({
+    this.gesture = (await import('./index-21661af2.js')).createGesture({
       el: this.scrollEl,
       gestureName: 'refresher',
       gesturePriority: 31,
@@ -388,7 +390,7 @@ const Refresher = class {
           MAX_PULL = this.scrollEl.clientHeight * 0.16;
         }
       },
-      onMove: ev => {
+      onMove: (ev) => {
         this.lastVelocityY = ev.velocityY;
       },
       onEnd: () => {
@@ -417,14 +419,17 @@ const Refresher = class {
         refreshingCircle.style.setProperty('animation-delay', '-655ms');
       });
     }
-    this.gesture = (await import('./index-a12c14bd.js')).createGesture({
+    this.gesture = (await import('./index-21661af2.js')).createGesture({
       el: this.scrollEl,
       gestureName: 'refresher',
       gesturePriority: 31,
       direction: 'y',
       threshold: 5,
-      canStart: () => this.state !== 8 /* Refreshing */ && this.state !== 32 /* Completing */ && this.scrollEl.scrollTop === 0,
+      canStart: () => this.state !== 8 /* Refreshing */ &&
+        this.state !== 32 /* Completing */ &&
+        this.scrollEl.scrollTop === 0,
       onStart: (ev) => {
+        this.progress = 0;
         ev.data = { animation: undefined, didStart: false, cancelled: false };
       },
       onMove: (ev) => {
@@ -453,13 +458,11 @@ const Refresher = class {
         if (!ev.data.didStart) {
           return;
         }
+        this.gesture.enable(false);
         writeTask(() => this.scrollEl.style.removeProperty('--overflow'));
         if (this.progress <= 0.4) {
-          this.gesture.enable(false);
-          ev.data.animation
-            .progressEnd(0, this.progress, 500)
-            .onFinish(() => {
-            this.animations.forEach(ani => ani.destroy());
+          ev.data.animation.progressEnd(0, this.progress, 500).onFinish(() => {
+            this.animations.forEach((ani) => ani.destroy());
             this.animations = [];
             this.gesture.enable(true);
             this.state = 1 /* Inactive */;
@@ -470,13 +473,14 @@ const Refresher = class {
         const snapBackAnimation = createSnapBackAnimation(pullingRefresherIcon);
         this.animations.push(snapBackAnimation);
         writeTask(async () => {
-          pullingRefresherIcon.style.setProperty('--ion-pulling-refresher-translate', `${(progress * 100)}px`);
+          pullingRefresherIcon.style.setProperty('--ion-pulling-refresher-translate', `${progress * 100}px`);
           ev.data.animation.progressEnd();
           await snapBackAnimation.play();
           this.beginRefresh();
           ev.data.animation.destroy();
+          this.gesture.enable(true);
         });
-      }
+      },
     });
     this.disabledChanged();
   }
@@ -510,19 +514,33 @@ const Refresher = class {
       console.error('Make sure you use: <ion-refresher slot="fixed">');
       return;
     }
-    const contentEl = this.el.closest('ion-content');
+    const contentEl = this.el.closest(ION_CONTENT_ELEMENT_SELECTOR);
     if (!contentEl) {
-      console.error('<ion-refresher> must be used inside an <ion-content>');
+      printIonContentErrorMsg(this.el);
       return;
     }
-    await new Promise(resolve => componentOnReady(contentEl, resolve));
-    this.scrollEl = await contentEl.getScrollElement();
-    this.backgroundContentEl = getElementRoot(contentEl).querySelector('#background-content');
+    const customScrollTarget = contentEl.querySelector(ION_CONTENT_CLASS_SELECTOR);
+    /**
+     * Query the custom scroll target (if available), first. In refresher implementations,
+     * the ion-refresher element will always be a direct child of ion-content (slot="fixed"). By
+     * querying the custom scroll target first and falling back to the ion-content element,
+     * the correct scroll element will be returned by the implementation.
+     */
+    this.scrollEl = await getScrollElement(customScrollTarget !== null && customScrollTarget !== void 0 ? customScrollTarget : contentEl);
+    /**
+     * Query the host `ion-content` directly (if it is available), to use its
+     * inner #background-content has the target. Otherwise fallback to the
+     * custom scroll target host.
+     *
+     * This makes it so that implementers do not need to re-create the background content
+     * element and styles.
+     */
+    this.backgroundContentEl = getElementRoot(contentEl !== null && contentEl !== void 0 ? contentEl : customScrollTarget).querySelector('#background-content');
     if (await shouldUseNativeRefresher(this.el, getIonMode(this))) {
       this.setupNativeRefresher(contentEl);
     }
     else {
-      this.gesture = (await import('./index-a12c14bd.js')).createGesture({
+      this.gesture = (await import('./index-21661af2.js')).createGesture({
         el: contentEl,
         gestureName: 'refresher',
         gesturePriority: 31,
@@ -531,7 +549,7 @@ const Refresher = class {
         passive: false,
         canStart: () => this.canStart(),
         onStart: () => this.onStart(),
-        onMove: ev => this.onMove(ev),
+        onMove: (ev) => this.onMove(ev),
         onEnd: () => this.onEnd(),
       });
       this.disabledChanged();
@@ -628,7 +646,7 @@ const Refresher = class {
     if ((this.state & 56 /* _BUSY_ */) !== 0) {
       return;
     }
-    const pullFactor = (Number.isNaN(this.pullFactor) || this.pullFactor < 0) ? 1 : this.pullFactor;
+    const pullFactor = Number.isNaN(this.pullFactor) || this.pullFactor < 0 ? 1 : this.pullFactor;
     const deltaY = detail.deltaY * pullFactor;
     // don't bother if they're scrolling up
     // and have not already started dragging
@@ -719,7 +737,7 @@ const Refresher = class {
     // emit "refresh" because it was pulled down far enough
     // and they let go to begin refreshing
     this.ionRefresh.emit({
-      complete: this.complete.bind(this)
+      complete: this.complete.bind(this),
     });
   }
   close(state, delay) {
@@ -740,15 +758,15 @@ const Refresher = class {
     if (this.nativeRefresher) {
       return;
     }
-    this.appliedStyles = (y > 0);
+    this.appliedStyles = y > 0;
     writeTask(() => {
       if (this.scrollEl && this.backgroundContentEl) {
         const scrollStyle = this.scrollEl.style;
         const backgroundStyle = this.backgroundContentEl.style;
-        scrollStyle.transform = backgroundStyle.transform = ((y > 0) ? `translateY(${y}px) translateZ(0px)` : '');
+        scrollStyle.transform = backgroundStyle.transform = y > 0 ? `translateY(${y}px) translateZ(0px)` : '';
         scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration;
         scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay;
-        scrollStyle.overflow = (overflowVisible ? 'hidden' : '');
+        scrollStyle.overflow = overflowVisible ? 'hidden' : '';
       }
     });
   }