@sparkle-learning/core 0.0.30 → 0.0.33

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, b as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays-34cfa9e0.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-b306f6c2.js';
+import { c as createAnimation } from './animation-7b083379.js';
 import './hardware-back-button-b6ccf74a.js';
-import './helpers-39367fe1.js';
+import './helpers-9d0930de.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License

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

@@ -1,6 +1,6 @@
 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 { l as clamp } from './helpers-39367fe1.js';
+import { e as clamp } from './helpers-9d0930de.js';
 import { c as createColorClasses } from './theme-c336c9d9.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}";

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

@@ -0,0 +1,441 @@
+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 { i as isRTL } from './dir-03012648.js';
+import { c as createColorClasses, h as hostContext } from './theme-c336c9d9.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}";
+
+const rangeMdCss = ":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:var(--bar-background-active);--knob-box-shadow:none;--knob-size:18px;--bar-height:2px;--bar-background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.26);--bar-background-active:var(--ion-color-primary, #3880ff);--bar-border-radius:0;--height:42px;--pin-background:var(--ion-color-primary, #3880ff);--pin-color:var(--ion-color-primary-contrast, #fff);padding-left:14px;padding-right:14px;padding-top:8px;padding-bottom:8px;font-size:12px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:14px;padding-inline-start:14px;-webkit-padding-end:14px;padding-inline-end:14px}}:host(.ion-color) .range-bar{background:rgba(var(--ion-color-base-rgb), 0.26)}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-knob,:host(.ion-color) .range-pin,:host(.ion-color) .range-pin::before,:host(.ion-color) .range-tick{background:var(--ion-color-base);color:var(--ion-color-contrast)}::slotted([slot=start]){margin-left:0;margin-right:14px;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:14px;margin-inline-end:14px}}::slotted([slot=end]){margin-left:14px;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:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0}}:host(.range-has-pin){padding-top:28px}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-knob{transform:scale(0.67);transition-duration:120ms;transition-property:transform, background-color, border;transition-timing-function:ease;z-index:2}.range-tick{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick-active{background:transparent}.range-pin{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;border-radius:50%;transform:translate3d(0,  0,  0) scale(0.01);display:inline-block;position:relative;min-width:28px;height:28px;transition:transform 120ms ease, background 120ms ease;background:var(--pin-background);color:var(--pin-color);text-align:center}.range-pin::before{left:50%;top:3px;margin-left:-13px;border-radius:50% 50% 50% 0;position:absolute;width:26px;height:26px;transform:rotate(-45deg);transition:background 120ms ease;background:var(--pin-background);content:\"\";z-index:-1}[dir=rtl] .range-pin::before,:host-context([dir=rtl]) .range-pin::before{left:unset;right:unset;right:50%}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.range-pin::before{margin-left:unset;-webkit-margin-start:-13px;margin-inline-start:-13px}}[dir=rtl] .range-pin::before,:host-context([dir=rtl]) .range-pin::before{left:unset}.range-knob-pressed .range-pin{transform:translate3d(0,  -24px,  0) scale(1)}:host(:not(.range-has-pin)) .range-knob-pressed .range-knob{transform:scale(1)}:host(.range-disabled) .range-bar-active,:host(.range-disabled) .range-bar,:host(.range-disabled) .range-tick{background-color:var(--ion-color-step-250, #bfbfbf)}:host(.range-disabled) .range-knob{transform:scale(0.55);outline:5px solid #fff;background-color:var(--ion-color-step-250, #bfbfbf)}";
+
+const Range = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionChange = createEvent(this, "ionChange", 7);
+    this.ionStyle = createEvent(this, "ionStyle", 7);
+    this.ionFocus = createEvent(this, "ionFocus", 7);
+    this.ionBlur = createEvent(this, "ionBlur", 7);
+    this.didLoad = false;
+    this.noUpdate = false;
+    this.hasFocus = false;
+    this.inheritedAttributes = {};
+    this.ratioA = 0;
+    this.ratioB = 0;
+    /**
+     * How long, in milliseconds, to wait to trigger the
+     * `ionChange` event after each change in the range value.
+     * This also impacts form bindings such as `ngModel` or `v-model`.
+     */
+    this.debounce = 0;
+    // TODO: In Ionic Framework v6 this should initialize to this.rangeId like the other form components do.
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = '';
+    /**
+     * Show two knobs.
+     */
+    this.dualKnobs = false;
+    /**
+     * Minimum integer value of the range.
+     */
+    this.min = 0;
+    /**
+     * Maximum integer value of the range.
+     */
+    this.max = 100;
+    /**
+     * If `true`, a pin with integer value is shown when the knob
+     * is pressed.
+     */
+    this.pin = false;
+    /**
+     * A callback used to format the pin text.
+     * By default the pin text is set to `Math.round(value)`.
+     */
+    this.pinFormatter = (value) => Math.round(value);
+    /**
+     * If `true`, the knob snaps to tick marks evenly spaced based
+     * on the step property value.
+     */
+    this.snaps = false;
+    /**
+     * Specifies the value granularity.
+     */
+    this.step = 1;
+    /**
+     * If `true`, tick marks are displayed based on the step value.
+     * Only applies when `snaps` is `true`.
+     */
+    this.ticks = true;
+    /**
+     * If `true`, the user cannot interact with the range.
+     */
+    this.disabled = false;
+    /**
+     * the value of the range.
+     */
+    this.value = 0;
+    this.clampBounds = (value) => {
+      return clamp(this.min, value, this.max);
+    };
+    this.ensureValueInBounds = (value) => {
+      if (this.dualKnobs) {
+        return {
+          lower: this.clampBounds(value.lower),
+          upper: this.clampBounds(value.upper)
+        };
+      }
+      else {
+        return this.clampBounds(value);
+      }
+    };
+    this.setupGesture = async () => {
+      const rangeSlider = this.rangeSlider;
+      if (rangeSlider) {
+        this.gesture = (await import('./index-a12c14bd.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),
+        });
+        this.gesture.enable(!this.disabled);
+      }
+    };
+    this.handleKeyboard = (knob, isIncrease) => {
+      let step = this.step;
+      step = step > 0 ? step : 1;
+      step = step / (this.max - this.min);
+      if (!isIncrease) {
+        step *= -1;
+      }
+      if (knob === 'A') {
+        this.ratioA = clamp(0, this.ratioA + step, 1);
+      }
+      else {
+        this.ratioB = clamp(0, this.ratioB + step, 1);
+      }
+      this.updateValue();
+    };
+    this.onBlur = () => {
+      if (this.hasFocus) {
+        this.hasFocus = false;
+        this.ionBlur.emit();
+        this.emitStyle();
+      }
+    };
+    this.onFocus = () => {
+      if (!this.hasFocus) {
+        this.hasFocus = true;
+        this.ionFocus.emit();
+        this.emitStyle();
+      }
+    };
+  }
+  debounceChanged() {
+    this.ionChange = debounceEvent(this.ionChange, this.debounce);
+  }
+  minChanged() {
+    if (!this.noUpdate) {
+      this.updateRatio();
+    }
+  }
+  maxChanged() {
+    if (!this.noUpdate) {
+      this.updateRatio();
+    }
+  }
+  disabledChanged() {
+    if (this.gesture) {
+      this.gesture.enable(!this.disabled);
+    }
+    this.emitStyle();
+  }
+  valueChanged(value) {
+    if (!this.noUpdate) {
+      this.updateRatio();
+    }
+    value = this.ensureValueInBounds(value);
+    this.ionChange.emit({ value });
+  }
+  componentWillLoad() {
+    /**
+     * 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']);
+  }
+  componentDidLoad() {
+    this.setupGesture();
+    this.didLoad = true;
+  }
+  connectedCallback() {
+    this.updateRatio();
+    this.debounceChanged();
+    this.disabledChanged();
+    /**
+     * If we have not yet rendered
+     * ion-range, then rangeSlider is not defined.
+     * But if we are moving ion-range via appendChild,
+     * then rangeSlider will be defined.
+     */
+    if (this.didLoad) {
+      this.setupGesture();
+    }
+  }
+  disconnectedCallback() {
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
+  }
+  getValue() {
+    const value = this.value || 0;
+    if (this.dualKnobs) {
+      if (typeof value === 'object') {
+        return value;
+      }
+      return {
+        lower: 0,
+        upper: value
+      };
+    }
+    else {
+      if (typeof value === 'object') {
+        return value.upper;
+      }
+      return value;
+    }
+  }
+  emitStyle() {
+    this.ionStyle.emit({
+      'interactive': true,
+      'interactive-disabled': this.disabled
+    });
+  }
+  onStart(detail) {
+    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.setFocus(this.pressedKnob);
+    // update the active knob's position
+    this.update(currentX);
+  }
+  onMove(detail) {
+    this.update(detail.currentX);
+  }
+  onEnd(detail) {
+    this.update(detail.currentX);
+    this.pressedKnob = undefined;
+  }
+  update(currentX) {
+    // figure out where the pointer is currently at
+    // update the knob being interacted with
+    const rect = this.rect;
+    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
+    if (isRTL(this.el)) {
+      ratio = 1 - ratio;
+    }
+    if (this.snaps) {
+      // snaps the ratio to the current value
+      ratio = valueToRatio(ratioToValue(ratio, this.min, this.max, this.step), this.min, this.max);
+    }
+    // update which knob is pressed
+    if (this.pressedKnob === 'A') {
+      this.ratioA = ratio;
+    }
+    else {
+      this.ratioB = ratio;
+    }
+    // Update input value
+    this.updateValue();
+  }
+  get valA() {
+    return ratioToValue(this.ratioA, this.min, this.max, this.step);
+  }
+  get valB() {
+    return ratioToValue(this.ratioB, this.min, this.max, this.step);
+  }
+  get ratioLower() {
+    if (this.dualKnobs) {
+      return Math.min(this.ratioA, this.ratioB);
+    }
+    return 0;
+  }
+  get ratioUpper() {
+    if (this.dualKnobs) {
+      return Math.max(this.ratioA, this.ratioB);
+    }
+    return this.ratioA;
+  }
+  updateRatio() {
+    const value = this.getValue();
+    const { min, max } = this;
+    if (this.dualKnobs) {
+      this.ratioA = valueToRatio(value.lower, min, max);
+      this.ratioB = valueToRatio(value.upper, min, max);
+    }
+    else {
+      this.ratioA = valueToRatio(value, min, max);
+    }
+  }
+  updateValue() {
+    this.noUpdate = true;
+    const { valA, valB } = this;
+    this.value = !this.dualKnobs
+      ? valA
+      : {
+        lower: Math.min(valA, valB),
+        upper: Math.max(valA, valB)
+      };
+    this.noUpdate = false;
+  }
+  setFocus(knob) {
+    if (this.el.shadowRoot) {
+      const knobEl = this.el.shadowRoot.querySelector(knob === 'A' ? '.range-knob-a' : '.range-knob-b');
+      if (knobEl) {
+        knobEl.focus();
+      }
+    }
+  }
+  render() {
+    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
+     * and use that instead.
+     */
+    let { labelText } = getAriaLabel(el, rangeId);
+    if (labelText === undefined || labelText === null) {
+      labelText = inheritedAttributes['aria-label'];
+    }
+    const mode = getIonMode(this);
+    const barStart = `${ratioLower * 100}%`;
+    const 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]
+      };
+    };
+    const barStyle = {
+      [start]: barStart,
+      [end]: barEnd
+    };
+    const ticks = [];
+    if (this.snaps && this.ticks) {
+      for (let value = min; value <= max; value += step) {
+        const ratio = valueToRatio(value, min, max);
+        const tick = {
+          ratio,
+          active: ratio >= ratioLower && ratio <= ratioUpper,
+        };
+        tick[start] = `${ratio * 100}%`;
+        ticks.push(tick);
+      }
+    }
+    renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
+    return (h(Host, { onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        [mode]: true,
+        '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-tick': true,
+        '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',
+      value: this.valA,
+      ratio: this.ratioA,
+      pin,
+      pinFormatter,
+      disabled,
+      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" })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "debounce": ["debounceChanged"],
+    "min": ["minChanged"],
+    "max": ["maxChanged"],
+    "disabled": ["disabledChanged"],
+    "value": ["valueChanged"]
+  }; }
+};
+const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, labelText, pinFormatter }) => {
+  const start = rtl ? 'right' : 'left';
+  const knobStyle = () => {
+    const style = {};
+    style[start] = `${ratio * 100}%`;
+    return style;
+  };
+  return (h("div", { onKeyDown: (ev) => {
+      const key = ev.key;
+      if (key === 'ArrowLeft' || key === 'ArrowDown') {
+        handleKeyboard(knob, false);
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+      else if (key === 'ArrowRight' || key === 'ArrowUp') {
+        handleKeyboard(knob, true);
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+    }, class: {
+      'range-knob-handle': true,
+      'range-knob-a': knob === 'A',
+      '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" })));
+};
+const ratioToValue = (ratio, min, max, step) => {
+  let value = (max - min) * ratio;
+  if (step > 0) {
+    value = Math.round(value / step) * step + min;
+  }
+  return clamp(min, value, max);
+};
+const valueToRatio = (value, min, max) => {
+  return clamp(0, (value - min) / (max - min), 1);
+};
+let rangeIds = 0;
+Range.style = {
+  ios: rangeIosCss,
+  md: rangeMdCss
+};
+
+export { Range as ion_range };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { j as caretBackSharp, k as arrowDown } from './index-dc61f152.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';

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

@@ -1,9 +1,9 @@
 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, l as clamp, g as getElementRoot, k as raf } from './helpers-39367fe1.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-b306f6c2.js';
+import { c as createAnimation } from './animation-7b083379.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License

package/dist/esm/ion-reorder-group.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, e as getElement, H as Host } from './index-5568e3fa.js';
 import { g as getIonMode } from './ionic-global-0939c477.js';
-import { c as componentOnReady } from './helpers-39367fe1.js';
+import { c as componentOnReady } from './helpers-9d0930de.js';
 import { a as hapticSelectionStart, b as hapticSelectionChanged, c as hapticSelectionEnd } from './haptic-99c9e346.js';
 
 const reorderGroupCss = ".reorder-list-active>*{transition:transform 300ms;will-change:transform}.reorder-enabled{user-select:none}.reorder-enabled ion-reorder{display:block;cursor:grab;pointer-events:all;touch-action:none}.reorder-selected,.reorder-selected ion-reorder{cursor:grabbing}.reorder-selected{position:relative;transition:none !important;box-shadow:0 0 10px rgba(0, 0, 0, 0.4);opacity:0.8;z-index:100}.reorder-visible ion-reorder .reorder-icon{transform:translate3d(0,  0,  0)}";

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { r as reorderThreeOutline, l as reorderTwoSharp } from './index-dc61f152.js';
+import { r as reorderThreeOutline, l as reorderTwoSharp } from './index-ea26196a.js';
 import { g as getIonMode } from './ionic-global-0939c477.js';
 
 const reorderIosCss = ":host([slot]){display:none;line-height:0;z-index:100}.reorder-icon{display:block;font-size:22px}.reorder-icon{font-size:34px;opacity:0.4}";

package/dist/esm/ion-router-outlet.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, i as createEvent, h, e as getElement } from './index-5568e3fa.js';
 import { g as getIonMode, c as config } from './ionic-global-0939c477.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-a7ad9c8e.js';
-import { a as attachComponent, d as detachComponent } from './framework-delegate-3bc58c27.js';
-import { s as shallowEqualStringMap } from './helpers-39367fe1.js';
-import { t as transition } from './index-c26d8655.js';
+import { a as attachComponent, d as detachComponent } from './framework-delegate-518bd233.js';
+import { s as shallowEqualStringMap } from './helpers-9d0930de.js';
+import { t as transition } from './index-8de9446b.js';
 
 const routeOutletCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;overflow:hidden;z-index:0}";
 
@@ -35,7 +35,7 @@ const RouterOutlet = class {
         this.swipeHandler.onStart();
       }
     };
-    this.gesture = (await import('./swipe-back-34251834.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), step => this.ani && this.ani.progressStep(step), (shouldComplete, step, dur) => {
+    this.gesture = (await import('./swipe-back-9a3b2cdd.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), step => this.ani && this.ani.progressStep(step), (shouldComplete, step, dur) => {
       if (this.ani) {
         this.ani.onFinish(() => {
           this.gestureOrAnimationInProgress = false;

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, i as createEvent, e as getElement } from './index-5568e3fa.js';
-import { c as componentOnReady, o as debounce } from './helpers-39367fe1.js';
+import { c as componentOnReady, k as debounce } from './helpers-9d0930de.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, f as forceUpdate, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { n as arrowBackSharp, o as closeCircle, p as closeSharp, s as searchOutline, q as searchSharp } from './index-dc61f152.js';
+import { n as arrowBackSharp, o as closeCircle, p as closeSharp, s as searchOutline, q as searchSharp } from './index-ea26196a.js';
 import { c as config, g as getIonMode } from './ionic-global-0939c477.js';
-import { e as debounceEvent, k as raf } from './helpers-39367fe1.js';
+import { l as debounceEvent, b as raf } from './helpers-9d0930de.js';
 import { i as isRTL } from './dir-03012648.js';
 import { c as createColorClasses } from './theme-c336c9d9.js';
 

package/dist/esm/ion-segment-button.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, f as forceUpdate, h, H as Host, e as getElement } from './index-5568e3fa.js';
 import { g as getIonMode } from './ionic-global-0939c477.js';
-import { a as addEventListener, r as removeEventListener } from './helpers-39367fe1.js';
+import { a as addEventListener, r as removeEventListener } from './helpers-9d0930de.js';
 import { h as hostContext } from './theme-c336c9d9.js';
 
 const segmentButtonIosCss = ":host{--color:initial;--color-hover:var(--color);--color-checked:var(--color);--color-disabled:var(--color);--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;border-radius:var(--border-radius);display:flex;position:relative;flex:1 1 auto;flex-direction:column;height:auto;background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;font-kerning:none;cursor:pointer}.button-native{border-radius:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;margin-left:var(--margin-start);margin-right:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);transform:translate3d(0,  0,  0);display:flex;position:relative;flex-direction:inherit;flex-grow:1;align-items:center;justify-content:center;width:100%;min-width:inherit;max-width:inherit;height:auto;min-height:inherit;max-height:inherit;transition:var(--transition);border:none;outline:none;background:transparent;contain:content;pointer-events:none;overflow:hidden;z-index:2}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end)}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{display:flex;position:relative;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.segment-button-checked){background:var(--background-checked);color:var(--color-checked)}:host(.segment-button-disabled){cursor:default;pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(:focus){outline:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.segment-button-checked:hover) .button-native{color:var(--color-checked)}}::slotted(ion-icon){flex-shrink:0;order:-1;pointer-events:none}::slotted(ion-label){display:block;align-self:center;line-height:22px;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;pointer-events:none}:host(.segment-button-layout-icon-top) .button-native{flex-direction:column}:host(.segment-button-layout-icon-start) .button-native{flex-direction:row}:host(.segment-button-layout-icon-end) .button-native{flex-direction:row-reverse}:host(.segment-button-layout-icon-bottom) .button-native{flex-direction:column-reverse}:host(.segment-button-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.segment-button-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color, var(--color-checked))}.segment-button-indicator{transform-origin:left;position:absolute;opacity:0;box-sizing:border-box;will-change:transform, opacity;pointer-events:none}.segment-button-indicator-background{width:100%;height:var(--indicator-height);transform:var(--indicator-transform);box-shadow:var(--indicator-box-shadow);pointer-events:none}.segment-button-indicator-animated{transition:var(--indicator-transition)}:host(.segment-button-checked) .segment-button-indicator{opacity:1}@media (prefers-reduced-motion: reduce){.segment-button-indicator-background{transform:none}.segment-button-indicator-animated{transition:none}}:host{--background:none;--background-checked:none;--background-hover:none;--background-hover-opacity:0;--background-focused:none;--background-focused-opacity:0;--border-radius:7px;--border-width:1px;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--border-style:solid;--indicator-box-shadow:0 0 5px rgba(0, 0, 0, 0.16);--indicator-color:var(--ion-color-step-350, var(--ion-background-color, #fff));--indicator-height:100%;--indicator-transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);--indicator-transform:none;--transition:100ms all linear;--padding-top:0;--padding-end:13px;--padding-bottom:0;--padding-start:13px;margin-top:2px;margin-bottom:2px;position:relative;flex-basis:0;flex-direction:row;min-width:70px;min-height:28px;transform:translate3d(0, 0, 0);font-size:13px;font-weight:450;line-height:37px}:host::before{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px;transition:160ms opacity ease-in-out;transition-delay:100ms;border-left:var(--border-width) var(--border-style) var(--border-color);content:\"\";opacity:1;will-change:opacity}:host(:first-of-type)::before{border-left-color:transparent}:host(.segment-button-disabled){opacity:0.3}::slotted(ion-icon){font-size:24px}:host(.segment-button-layout-icon-start) ::slotted(ion-label){margin-left:2px;margin-right:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.segment-button-layout-icon-start) ::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:0;margin-inline-end:0}}:host(.segment-button-layout-icon-end) ::slotted(ion-label){margin-left:0;margin-right:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.segment-button-layout-icon-end) ::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:2px;margin-inline-end:2px}}.segment-button-indicator{padding-left:2px;padding-right:2px;left:0;right:0;top:0;bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.segment-button-indicator{padding-left:unset;padding-right:unset;-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px}}.segment-button-indicator-background{border-radius:var(--border-radius);background:var(--indicator-color)}.segment-button-indicator-background{transition:var(--indicator-transition)}:host(.segment-button-checked)::before,:host(.segment-button-after-checked)::before{opacity:0}:host(.segment-button-checked){z-index:-1}:host(.segment-button-activated){--indicator-transform:scale(0.95)}:host(.ion-focused) .button-native{opacity:0.7}@media (any-hover: hover){:host(:hover) .button-native{opacity:0.5}:host(.segment-button-checked:hover) .button-native{opacity:1}}:host(.in-segment-color){background:none;color:var(--ion-text-color, #000)}:host(.in-segment-color) .segment-button-indicator-background{background:var(--ion-color-step-350, var(--ion-background-color, #fff))}@media (any-hover: hover){:host(.in-segment-color:hover) .button-native,:host(.in-segment-color.segment-button-checked:hover) .button-native{color:var(--ion-text-color, #000)}}:host(.in-toolbar:not(.in-segment-color)){--background-checked:var(--ion-toolbar-segment-background-checked, none);--color:var(--ion-toolbar-segment-color, var(--ion-toolbar-color), initial);--color-checked:var(--ion-toolbar-segment-color-checked, var(--ion-toolbar-color), initial);--indicator-color:var(--ion-toolbar-segment-indicator-color, var(--ion-color-step-350, var(--ion-background-color, #fff)))}:host(.in-toolbar-color) .segment-button-indicator-background{background:#fff}:host(.in-toolbar-color:not(.in-segment-color)) .button-native{color:var(--ion-color-contrast)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.in-toolbar-color:not(.in-segment-color):hover) .button-native{color:var(--ion-color-contrast)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color):hover) .button-native{color:var(--ion-color-base)}}";

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, w as writeTask, h, H as Host, e as getElement } from './index-5568e3fa.js';
 import { c as config, g as getIonMode } from './ionic-global-0939c477.js';
-import { p as pointerCoord } from './helpers-39367fe1.js';
+import { p as pointerCoord } from './helpers-9d0930de.js';
 import { i as isRTL } from './dir-03012648.js';
 import { c as createColorClasses, h as hostContext } from './theme-c336c9d9.js';
 

package/dist/esm/ion-select_2.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 { f as focusElement, j as findItemLabel, b as getAriaLabel, d as renderHiddenInput } from './helpers-39367fe1.js';
-import { f as popoverController, h as actionSheetController, a as alertController } from './overlays-34cfa9e0.js';
+import { f as focusElement, m as findItemLabel, n as getAriaLabel, d as renderHiddenInput } from './helpers-9d0930de.js';
+import { c as popoverController, f as actionSheetController, h as alertController } from './overlays-5c777f10.js';
 import { h as hostContext } from './theme-c336c9d9.js';
 import './hardware-back-button-b6ccf74a.js';