@sparkle-learning/core 0.0.34 → 0.0.35

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, e as createEvent, h, H as Host, i as getElement } from './index-9db08224.js';
+import { g as getIonMode } from './ionic-global-293e882b.js';
+import { m as clamp } from './helpers-94a5855b.js';
+import { c as hapticSelectionChanged, d as hapticSelectionEnd, b as hapticSelectionStart } from './haptic-3a76a65c.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, e as createEvent, h, H as Host, i as getElement } from './index-9db08224.js';
+import { g as getIonMode } from './ionic-global-293e882b.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-dfa730c8.js';
+import { g as getClassMap } from './theme-7ef00c83.js';
+import { c as createAnimation } from './animation-d98d3e81.js';
+import './hardware-back-button-fa04d6e9.js';
+import './helpers-94a5855b.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-9db08224.js';
+import { c as config, g as getIonMode } from './ionic-global-293e882b.js';
+import { m as clamp } from './helpers-94a5855b.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-range.entry.js

@@ -1,8 +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 { e as clamp, l as debounceEvent, i as inheritAttributes, n as getAriaLabel, d as renderHiddenInput } from './helpers-9d0930de.js';
+import { r as registerInstance, e as createEvent, h, H as Host, i as getElement } from './index-9db08224.js';
+import { g as getIonMode } from './ionic-global-293e882b.js';
+import { a as findClosestIonContent, d as disableContentScrollY, r as resetContentScrollY } from './index-c23a1826.js';
+import { m as clamp, d as debounceEvent, i as inheritAriaAttributes, k as getAriaLabel, l as renderHiddenInput } from './helpers-94a5855b.js';
+import { a as printIonWarning } from './index-dad75b83.js';
 import { i as isRTL } from './dir-03012648.js';
-import { c as createColorClasses, h as hostContext } from './theme-c336c9d9.js';
+import { c as createColorClasses, h as hostContext } from './theme-7ef00c83.js';
 
 const rangeIosCss = ":host{--knob-handle-size:calc(var(--knob-size) * 2);display:flex;position:relative;flex:3;align-items:center;font-family:var(--ion-font-family, inherit);user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;box-sizing:border-box}.range-knob-handle{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset;right:unset;right:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.range-knob-handle{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset;right:unset;right:0}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset}.range-knob{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host(.in-item) ::slotted(ion-label){align-self:center}:host{--knob-border-radius:50%;--knob-background:#ffffff;--knob-box-shadow:0 3px 1px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.02);--knob-size:28px;--bar-height:2px;--bar-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);--bar-background-active:var(--ion-color-primary, #3880ff);--bar-border-radius:0;--height:42px;padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-tick-active{background:var(--ion-color-base)}::slotted([slot=start]){margin-left:0;margin-right:16px;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}}::slotted([slot=end]){margin-left:16px;margin-right:0;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}}:host(.range-has-pin){padding-top:20px}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-tick{margin-left:-1px;border-radius:0;position:absolute;top:18px;width:2px;height:8px;background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.range-tick{margin-left:unset;-webkit-margin-start:-1px;margin-inline-start:-1px}}.range-tick-active{background:var(--bar-background-active)}.range-pin{transform:translate3d(0,  28px,  0) scale(0.01);padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;display:inline-block;position:relative;top:-20px;min-width:28px;transition:transform 120ms ease;background:transparent;color:var(--ion-text-color, #000);font-size:12px;text-align:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.range-pin{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.range-knob-pressed .range-pin{transform:translate3d(0,  0,  0) scale(1)}:host(.range-disabled){opacity:0.5}";
 
@@ -15,10 +17,14 @@ const Range = class {
     this.ionStyle = createEvent(this, "ionStyle", 7);
     this.ionFocus = createEvent(this, "ionFocus", 7);
     this.ionBlur = createEvent(this, "ionBlur", 7);
+    this.ionKnobMoveStart = createEvent(this, "ionKnobMoveStart", 7);
+    this.ionKnobMoveEnd = createEvent(this, "ionKnobMoveEnd", 7);
     this.didLoad = false;
     this.noUpdate = false;
     this.hasFocus = false;
     this.inheritedAttributes = {};
+    this.contentEl = null;
+    this.initialContentScrollY = true;
     this.ratioA = 0;
     this.ratioB = 0;
     /**
@@ -83,7 +89,7 @@ const Range = class {
       if (this.dualKnobs) {
         return {
           lower: this.clampBounds(value.lower),
-          upper: this.clampBounds(value.upper)
+          upper: this.clampBounds(value.upper),
         };
       }
       else {
@@ -93,19 +99,20 @@ const Range = class {
     this.setupGesture = async () => {
       const rangeSlider = this.rangeSlider;
       if (rangeSlider) {
-        this.gesture = (await import('./index-a12c14bd.js')).createGesture({
+        this.gesture = (await import('./index-21661af2.js')).createGesture({
           el: rangeSlider,
           gestureName: 'range',
           gesturePriority: 100,
           threshold: 0,
-          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.disabled);
       }
     };
     this.handleKeyboard = (knob, isIncrease) => {
+      const { ensureValueInBounds } = this;
       let step = this.step;
       step = step > 0 ? step : 1;
       step = step / (this.max - this.min);
@@ -118,7 +125,9 @@ const Range = class {
       else {
         this.ratioB = clamp(0, this.ratioB + step, 1);
       }
+      this.ionKnobMoveStart.emit({ value: ensureValueInBounds(this.value) });
       this.updateValue();
+      this.ionKnobMoveEnd.emit({ value: ensureValueInBounds(this.value) });
     };
     this.onBlur = () => {
       if (this.hasFocus) {
@@ -148,6 +157,19 @@ const Range = class {
       this.updateRatio();
     }
   }
+  activeBarStartChanged() {
+    const { activeBarStart } = this;
+    if (activeBarStart !== undefined) {
+      if (activeBarStart > this.max) {
+        printIonWarning(`Range: The value of activeBarStart (${activeBarStart}) is greater than the max (${this.max}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el);
+        this.activeBarStart = this.max;
+      }
+      else if (activeBarStart < this.min) {
+        printIonWarning(`Range: The value of activeBarStart (${activeBarStart}) is less than the min (${this.min}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el);
+        this.activeBarStart = this.min;
+      }
+    }
+  }
   disabledChanged() {
     if (this.gesture) {
       this.gesture.enable(!this.disabled);
@@ -166,8 +188,8 @@ const Range = class {
      * If user has custom ID set then we should
      * not assign the default incrementing ID.
      */
-    this.rangeId = (this.el.hasAttribute('id')) ? this.el.getAttribute('id') : `ion-r-${rangeIds++}`;
-    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+    this.rangeId = this.el.hasAttribute('id') ? this.el.getAttribute('id') : `ion-r-${rangeIds++}`;
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
   componentDidLoad() {
     this.setupGesture();
@@ -177,6 +199,7 @@ const Range = class {
     this.updateRatio();
     this.debounceChanged();
     this.disabledChanged();
+    this.activeBarStartChanged();
     /**
      * If we have not yet rendered
      * ion-range, then rangeSlider is not defined.
@@ -186,6 +209,7 @@ const Range = class {
     if (this.didLoad) {
       this.setupGesture();
     }
+    this.contentEl = findClosestIonContent(this.el);
   }
   disconnectedCallback() {
     if (this.gesture) {
@@ -201,7 +225,7 @@ const Range = class {
       }
       return {
         lower: 0,
-        upper: value
+        upper: value,
       };
     }
     else {
@@ -213,33 +237,39 @@ const Range = class {
   }
   emitStyle() {
     this.ionStyle.emit({
-      'interactive': true,
-      'interactive-disabled': this.disabled
+      interactive: true,
+      'interactive-disabled': this.disabled,
     });
   }
   onStart(detail) {
-    const rect = this.rect = this.rangeSlider.getBoundingClientRect();
+    const { contentEl } = this;
+    if (contentEl) {
+      this.initialContentScrollY = disableContentScrollY(contentEl);
+    }
+    const rect = (this.rect = this.rangeSlider.getBoundingClientRect());
     const currentX = detail.currentX;
     // figure out which knob they started closer to
     let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
     if (isRTL(this.el)) {
       ratio = 1 - ratio;
     }
-    this.pressedKnob =
-      !this.dualKnobs ||
-        Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)
-        ? 'A'
-        : 'B';
+    this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
     this.setFocus(this.pressedKnob);
     // update the active knob's position
     this.update(currentX);
+    this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) });
   }
   onMove(detail) {
     this.update(detail.currentX);
   }
   onEnd(detail) {
+    const { contentEl, initialContentScrollY } = this;
+    if (contentEl) {
+      resetContentScrollY(contentEl, initialContentScrollY);
+    }
     this.update(detail.currentX);
     this.pressedKnob = undefined;
+    this.ionKnobMoveEnd.emit({ value: this.ensureValueInBounds(this.value) });
   }
   update(currentX) {
     // figure out where the pointer is currently at
@@ -273,7 +303,11 @@ const Range = class {
     if (this.dualKnobs) {
       return Math.min(this.ratioA, this.ratioB);
     }
-    return 0;
+    const { activeBarStart } = this;
+    if (activeBarStart == null) {
+      return 0;
+    }
+    return valueToRatio(activeBarStart, this.min, this.max);
   }
   get ratioUpper() {
     if (this.dualKnobs) {
@@ -299,7 +333,7 @@ const Range = class {
       ? valA
       : {
         lower: Math.min(valA, valB),
-        upper: Math.max(valA, valB)
+        upper: Math.max(valA, valB),
       };
     this.noUpdate = false;
   }
@@ -312,7 +346,8 @@ const Range = class {
     }
   }
   render() {
-    const { min, max, step, el, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, inheritedAttributes, rangeId, pinFormatter } = this;
+    var _a;
+    const { min, max, step, el, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, inheritedAttributes, rangeId, pinFormatter, } = this;
     /**
      * Look for external label, ion-label, or aria-labelledby.
      * If none, see if user placed an aria-label on the host
@@ -323,27 +358,60 @@ const Range = class {
       labelText = inheritedAttributes['aria-label'];
     }
     const mode = getIonMode(this);
-    const barStart = `${ratioLower * 100}%`;
-    const barEnd = `${100 - ratioUpper * 100}%`;
+    let barStart = `${ratioLower * 100}%`;
+    let barEnd = `${100 - ratioUpper * 100}%`;
     const rtl = isRTL(this.el);
     const start = rtl ? 'right' : 'left';
     const end = rtl ? 'left' : 'right';
     const tickStyle = (tick) => {
       return {
-        [start]: tick[start]
+        [start]: tick[start],
       };
     };
+    if (this.dualKnobs === false) {
+      /**
+       * When the value is less than the activeBarStart or the min value,
+       * the knob will display at the start of the active bar.
+       */
+      if (this.valA < ((_a = this.activeBarStart) !== null && _a !== void 0 ? _a : this.min)) {
+        /**
+         * Sets the bar positions relative to the upper and lower limits.
+         * Converts the ratio values into percentages, used as offsets for left/right styles.
+         *
+         * The ratioUpper refers to the knob position on the bar.
+         * The ratioLower refers to the end position of the active bar (the value).
+         */
+        barStart = `${ratioUpper * 100}%`;
+        barEnd = `${100 - ratioLower * 100}%`;
+      }
+      else {
+        /**
+         * Otherwise, the knob will display at the end of the active bar.
+         *
+         * The ratioLower refers to the start position of the active bar (the value).
+         * The ratioUpper refers to the knob position on the bar.
+         */
+        barStart = `${ratioLower * 100}%`;
+        barEnd = `${100 - ratioUpper * 100}%`;
+      }
+    }
     const barStyle = {
       [start]: barStart,
-      [end]: barEnd
+      [end]: barEnd,
     };
     const ticks = [];
     if (this.snaps && this.ticks) {
       for (let value = min; value <= max; value += step) {
         const ratio = valueToRatio(value, min, max);
+        const ratioMin = Math.min(ratioLower, ratioUpper);
+        const ratioMax = Math.max(ratioLower, ratioUpper);
         const tick = {
           ratio,
-          active: ratio >= ratioLower && ratio <= ratioUpper,
+          /**
+           * Sets the tick mark as active when the tick is between the min bounds and the knob.
+           * When using activeBarStart, the tick mark will be active between the knob and activeBarStart.
+           */
+          active: ratio >= ratioMin && ratio <= ratioMax,
         };
         tick[start] = `${ratio * 100}%`;
         ticks.push(tick);
@@ -355,10 +423,10 @@ const Range = class {
         'in-item': hostContext('ion-item', el),
         'range-disabled': disabled,
         'range-pressed': pressedKnob !== undefined,
-        'range-has-pin': pin
-      }) }, h("slot", { name: "start" }), h("div", { class: "range-slider", ref: rangeEl => this.rangeSlider = rangeEl }, ticks.map(tick => (h("div", { style: tickStyle(tick), role: "presentation", class: {
+        'range-has-pin': pin,
+      }) }, h("slot", { name: "start" }), h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl) }, ticks.map((tick) => (h("div", { style: tickStyle(tick), role: "presentation", class: {
         'range-tick': true,
-        'range-tick-active': tick.active
+        'range-tick-active': tick.active,
       }, part: tick.active ? 'tick-active' : 'tick' }))), h("div", { class: "range-bar", role: "presentation", part: "bar" }), h("div", { class: "range-bar range-bar-active", role: "presentation", style: barStyle, part: "bar-active" }), renderKnob(rtl, {
       knob: 'A',
       pressed: pressedKnob === 'A',
@@ -370,26 +438,28 @@ const Range = class {
       handleKeyboard,
       min,
       max,
-      labelText
-    }), this.dualKnobs && renderKnob(rtl, {
-      knob: 'B',
-      pressed: pressedKnob === 'B',
-      value: this.valB,
-      ratio: this.ratioB,
-      pin,
-      pinFormatter,
-      disabled,
-      handleKeyboard,
-      min,
-      max,
-      labelText
-    })), h("slot", { name: "end" })));
+      labelText,
+    }), this.dualKnobs &&
+      renderKnob(rtl, {
+        knob: 'B',
+        pressed: pressedKnob === 'B',
+        value: this.valB,
+        ratio: this.ratioB,
+        pin,
+        pinFormatter,
+        disabled,
+        handleKeyboard,
+        min,
+        max,
+        labelText,
+      })), h("slot", { name: "end" })));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
     "debounce": ["debounceChanged"],
     "min": ["minChanged"],
     "max": ["maxChanged"],
+    "activeBarStart": ["activeBarStartChanged"],
     "disabled": ["disabledChanged"],
     "value": ["valueChanged"]
   }; }
@@ -419,8 +489,8 @@ const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin,
       'range-knob-b': knob === 'B',
       'range-knob-pressed': pressed,
       'range-knob-min': value === min,
-      'range-knob-max': value === max
-    }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": labelText, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && h("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value)), h("div", { class: "range-knob", role: "presentation", part: "knob" })));
+      'range-knob-max': value === max,
+    }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": labelText, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (h("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value))), h("div", { class: "range-knob", role: "presentation", part: "knob" })));
 };
 const ratioToValue = (ratio, min, max, step) => {
   let value = (max - min) * ratio;

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, i as getElement } from './index-9db08224.js';
+import { l as caretBackSharp, n as arrowDown } from './index-4ec6b9c2.js';
+import { g as getIonMode, c as config, a as isPlatform } from './ionic-global-293e882b.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); }
 };