@sparkle-learning/core 0.0.35 → 0.0.38

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

@@ -1,515 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-51e8292e.js');
-const ionicGlobal = require('./ionic-global-2cde9d3a.js');
-const index$2 = require('./index-9c7b27e4.js');
-const helpers = require('./helpers-c2496722.js');
-const index$1 = require('./index-e56e09b8.js');
-const dir = require('./dir-5af5259a.js');
-const theme = require('./theme-b0b295c1.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) {
-    index.registerInstance(this, hostRef);
-    this.ionChange = index.createEvent(this, "ionChange", 7);
-    this.ionStyle = index.createEvent(this, "ionStyle", 7);
-    this.ionFocus = index.createEvent(this, "ionFocus", 7);
-    this.ionBlur = index.createEvent(this, "ionBlur", 7);
-    this.ionKnobMoveStart = index.createEvent(this, "ionKnobMoveStart", 7);
-    this.ionKnobMoveEnd = index.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;
-    /**
-     * 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 helpers.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 Promise.resolve().then(function () { return require('./index-12082cba.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) => {
-      const { ensureValueInBounds } = this;
-      let step = this.step;
-      step = step > 0 ? step : 1;
-      step = step / (this.max - this.min);
-      if (!isIncrease) {
-        step *= -1;
-      }
-      if (knob === 'A') {
-        this.ratioA = helpers.clamp(0, this.ratioA + step, 1);
-      }
-      else {
-        this.ratioB = helpers.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) {
-        this.hasFocus = false;
-        this.ionBlur.emit();
-        this.emitStyle();
-      }
-    };
-    this.onFocus = () => {
-      if (!this.hasFocus) {
-        this.hasFocus = true;
-        this.ionFocus.emit();
-        this.emitStyle();
-      }
-    };
-  }
-  debounceChanged() {
-    this.ionChange = helpers.debounceEvent(this.ionChange, this.debounce);
-  }
-  minChanged() {
-    if (!this.noUpdate) {
-      this.updateRatio();
-    }
-  }
-  maxChanged() {
-    if (!this.noUpdate) {
-      this.updateRatio();
-    }
-  }
-  activeBarStartChanged() {
-    const { activeBarStart } = this;
-    if (activeBarStart !== undefined) {
-      if (activeBarStart > this.max) {
-        index$1.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) {
-        index$1.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);
-    }
-    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 = helpers.inheritAriaAttributes(this.el);
-  }
-  componentDidLoad() {
-    this.setupGesture();
-    this.didLoad = true;
-  }
-  connectedCallback() {
-    this.updateRatio();
-    this.debounceChanged();
-    this.disabledChanged();
-    this.activeBarStartChanged();
-    /**
-     * 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();
-    }
-    this.contentEl = index$2.findClosestIonContent(this.el);
-  }
-  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 { contentEl } = this;
-    if (contentEl) {
-      this.initialContentScrollY = index$2.disableContentScrollY(contentEl);
-    }
-    const rect = (this.rect = this.rangeSlider.getBoundingClientRect());
-    const currentX = detail.currentX;
-    // figure out which knob they started closer to
-    let ratio = helpers.clamp(0, (currentX - rect.left) / rect.width, 1);
-    if (dir.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);
-    this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) });
-  }
-  onMove(detail) {
-    this.update(detail.currentX);
-  }
-  onEnd(detail) {
-    const { contentEl, initialContentScrollY } = this;
-    if (contentEl) {
-      index$2.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
-    // update the knob being interacted with
-    const rect = this.rect;
-    let ratio = helpers.clamp(0, (currentX - rect.left) / rect.width, 1);
-    if (dir.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);
-    }
-    const { activeBarStart } = this;
-    if (activeBarStart == null) {
-      return 0;
-    }
-    return valueToRatio(activeBarStart, this.min, this.max);
-  }
-  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() {
-    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
-     * and use that instead.
-     */
-    let { labelText } = helpers.getAriaLabel(el, rangeId);
-    if (labelText === undefined || labelText === null) {
-      labelText = inheritedAttributes['aria-label'];
-    }
-    const mode = ionicGlobal.getIonMode(this);
-    let barStart = `${ratioLower * 100}%`;
-    let barEnd = `${100 - ratioUpper * 100}%`;
-    const rtl = dir.isRTL(this.el);
-    const start = rtl ? 'right' : 'left';
-    const end = rtl ? 'left' : 'right';
-    const tickStyle = (tick) => {
-      return {
-        [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,
-    };
-    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,
-          /**
-           * 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);
-      }
-    }
-    helpers.renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-    return (index.h(index.Host, { onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: theme.createColorClasses(this.color, {
-        [mode]: true,
-        'in-item': theme.hostContext('ion-item', el),
-        'range-disabled': disabled,
-        'range-pressed': pressedKnob !== undefined,
-        'range-has-pin': pin,
-      }) }, index.h("slot", { name: "start" }), index.h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl) }, ticks.map((tick) => (index.h("div", { style: tickStyle(tick), role: "presentation", class: {
-        'range-tick': true,
-        'range-tick-active': tick.active,
-      }, part: tick.active ? 'tick-active' : 'tick' }))), index.h("div", { class: "range-bar", role: "presentation", part: "bar" }), index.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,
-      })), index.h("slot", { name: "end" })));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "debounce": ["debounceChanged"],
-    "min": ["minChanged"],
-    "max": ["maxChanged"],
-    "activeBarStart": ["activeBarStartChanged"],
-    "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 (index.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 && (index.h("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value))), index.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 helpers.clamp(min, value, max);
-};
-const valueToRatio = (value, min, max) => {
-  return helpers.clamp(0, (value - min) / (max - min), 1);
-};
-let rangeIds = 0;
-Range.style = {
-  ios: rangeIosCss,
-  md: rangeMdCss
-};
-
-exports.ion_range = Range;

package/dist/cjs/ion-text.cjs.entry.js

@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-51e8292e.js');
-const ionicGlobal = require('./ionic-global-2cde9d3a.js');
-const theme = require('./theme-b0b295c1.js');
-
-const textCss = ":host(.ion-color){color:var(--ion-color-base)}";
-
-const Text = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    const mode = ionicGlobal.getIonMode(this);
-    return (index.h(index.Host, { class: theme.createColorClasses(this.color, {
-        [mode]: true,
-      }) }, index.h("slot", null)));
-  }
-};
-Text.style = textCss;
-
-exports.ion_text = Text;

package/dist/cjs/sparkle-quiz-feedback_5.cjs.entry.js

@@ -1,117 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-51e8292e.js');
-
-function GetSelectOptionId(questionId, index) {
-  return "question-" + questionId + "-option-" + index;
-}
-
-const sparkleQuizFeedbackCss = ":host{display:block}";
-
-const SparkleQuizFeedback = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.quizFeedbackChange = index.createEvent(this, "quizFeedbackChange", 7);
-    this.displayOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-  }
-  render() {
-    return (index.h(index.Host, { class: "quiz__feedback" }, index.h("div", { class: "question-container" }, index.h("div", { class: "question-text" }, this.question.questionText), index.h("div", null, this.displayOptions.map((option, index$1) => index.h("div", { class: "option" }, index.h("input", { type: "radio", id: GetSelectOptionId(this.question.questionId, index$1), name: "question-" + this.question.questionId, value: option, onChange: (e) => this.quizFeedbackChange.emit({ value: e.target.value, question: this.question }) }), index.h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index$1) }, index.h("span", { class: "number" }, this.displayOptions[index$1]), " ", option), index.h("br", null)))))));
-  }
-};
-SparkleQuizFeedback.style = sparkleQuizFeedbackCss;
-
-const sparkleQuizInputCss = ":host{display:block}";
-
-const SparkleQuizInput = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.quizInputChange = index.createEvent(this, "quizInputChange", 7);
-  }
-  render() {
-    return (index.h(index.Host, { class: "quiz__input" }, index.h("div", { class: "question-container" }, index.h("label", { htmlFor: "question-" + this.question.questionId, class: "form-label" }, this.question.questionText), index.h("input", { type: "text", class: "form-control", id: "question-" + this.question.questionId, name: "question-" + this.question.questionId, onInput: (e) => this.quizInputChange.emit({ value: e.target.value, question: this.question }) }))));
-  }
-};
-SparkleQuizInput.style = sparkleQuizInputCss;
-
-const sparkleQuizOpinionCss = "sparkle-quiz-opinion .scale{display:flex;justify-content:space-between}sparkle-quiz-opinion .scale>p{margin:0}sparkle-quiz-opinion .scale>p.selected{color:var(--ion-color-primary)}sparkle-quiz-opinion ion-icon{font-size:30px}sparkle-quiz-opinion .icon-group{min-width:70px;text-align:right;padding-right:10px}";
-
-const SparkleQuizOpinion = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.quizOpinionChange = index.createEvent(this, "quizOpinionChange", 7);
-    this.fivePointsDisplayOptions = ['Strongly agree', 'Agree', 'Not sure', 'Disagree', 'Strongly disagree'];
-    this.tenPointsDisplayOptions = ["Never",
-      "Never",
-      "Sometimes",
-      "Sometimes",
-      "Half of the time",
-      "Half of the time",
-      "Most of the time",
-      "Most of the time",
-      "Always",
-      "Always",
-      "Always"];
-    this.tenPointsDefaultValue = 5;
-  }
-  optionChanged(index, answer) {
-    this.selectedIndex = index;
-    this.quizOpinionChange.emit({ value: answer, question: this.question });
-  }
-  renderFivePointScale() {
-    return (this.fivePointsDisplayOptions.map((option, index$1) => index.h("div", { class: "option" }, index.h("input", { id: GetSelectOptionId(this.question.questionId, index$1), type: "radio", name: "question-" + this.question.questionId, value: option, onChange: (e) => this.optionChanged(index$1, this.fivePointsDisplayOptions[index$1]) }), index.h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index$1) }, index.h("span", { class: "number" }, index$1 + 1), option), index.h("br", null))));
-  }
-  renderTenPointScale() {
-    return (index.h("div", null, index.h("ion-item", null, index.h("ion-range", { class: "opinion-range", onIonChange: (e) => this.optionChanged(+e.detail.value, this.tenPointsDisplayOptions[+e.detail.value]), min: 0, max: 10, value: this.tenPointsDefaultValue, step: 1, pin: true, snaps: true }, index.h("ion-icon", { size: "small", slot: "start", name: "star-outline" }), index.h("ion-icon", { slot: "end", name: "star" }))), index.h("div", { class: "scale" }, index.h("p", null, "Never"), index.h("p", { class: "selected" }, this.tenPointsDisplayOptions[this.selectedIndex] || this.tenPointsDisplayOptions[this.tenPointsDefaultValue]), index.h("p", null, "Always")), index.h("br", null), index.h("hr", null)));
-  }
-  render() {
-    return (index.h(index.Host, { class: "quiz__opinion" }, index.h("div", { class: "opinion-container" }, index.h("div", { class: "question-text" }, this.question.questionText), index.h("div", null, this.question.scale == "FIVE-POINTS" && this.renderFivePointScale(), this.question.scale == "TEN-POINTS" && this.renderTenPointScale()))));
-  }
-  get el() { return index.getElement(this); }
-};
-SparkleQuizOpinion.style = sparkleQuizOpinionCss;
-
-const sparkleQuizPollCss = ":host{display:block}";
-
-const SparkleQuizPoll = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.quizInputChange = index.createEvent(this, "quizInputChange", 7);
-  }
-  render() {
-    return (index.h(index.Host, { class: "quiz__input" }, index.h("div", { class: "question-container" }, index.h("label", { htmlFor: "question-" + this.question.questionId, class: "form-label" }, this.question.questionText), index.h("input", { type: "text", class: "form-control", id: "question-" + this.question.questionId, name: "question-" + this.question.questionId, onInput: (e) => this.quizInputChange.emit({ value: e.target.value, question: this.question }) }))));
-  }
-};
-SparkleQuizPoll.style = sparkleQuizPollCss;
-
-const sparkleQuizSelectCss = ":host{display:block}";
-
-const SparkleQuizSelect = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.quizSelectChange = index.createEvent(this, "quizSelectChange", 7);
-    this.allowMultiple = false;
-    this.values = [];
-    this.displayOptions = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
-  }
-  optionChanged(e) {
-    if (e.target.checked) {
-      this.values = [...this.values, e.target.value];
-    }
-    else {
-      this.values = this.values.filter(x => x !== e.target.value);
-    }
-    this.quizSelectChange.emit({ value: this.values, question: this.question });
-  }
-  render() {
-    return (index.h(index.Host, { class: "quiz__select" }, index.h("div", { class: "question-container" }, index.h("div", { class: "question-text" }, this.question.questionText), index.h("div", null, this.question.options.map((option, index$1) => index.h("div", { class: "option" }, index.h("input", { type: this.allowMultiple ? "checkbox" : "radio", id: GetSelectOptionId(this.question.questionId, index$1), name: "question-" + this.question.questionId, value: option.option, onChange: (e) => this.optionChanged(e) }), index.h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index$1) }, index.h("span", { class: "number" }, this.displayOptions[index$1]), option.option), index.h("br", null)))))));
-  }
-};
-SparkleQuizSelect.style = sparkleQuizSelectCss;
-
-exports.sparkle_quiz_feedback = SparkleQuizFeedback;
-exports.sparkle_quiz_input = SparkleQuizInput;
-exports.sparkle_quiz_opinion = SparkleQuizOpinion;
-exports.sparkle_quiz_poll = SparkleQuizPoll;
-exports.sparkle_quiz_select = SparkleQuizSelect;