@ionic/core 9.0.0 → 9.0.1-dev.11787248963.10a00c73

package/dist/collection/components/range/range.js

@@ -43,48 +43,226 @@ import { roundToMaxDecimalPlaces } from "../../utils/floating-point";
  * @part pressed - Added to the knob-handle, knob, and pin that is currently being pressed to drag. Only one set has this part at a time when `dualKnobs` is `true`.
  */
 export class Range {
-    rangeId = `ion-r-${rangeIds++}`;
-    didLoad = false;
-    noUpdate = false;
-    rect;
-    hasFocus = false;
-    rangeSlider;
-    gesture;
-    inheritedAttributes = {};
-    contentEl = null;
-    initialContentScrollY = true;
-    originalIonInput;
-    /**
-     * Used to avoid setting the focused state on click or tap. The focused
-     * state is only set when the focus comes from the keyboard (e.g. Tab).
-     * This is set to true on pointer down (mouse/touch).
-     */
-    focusFromPointer = false;
-    /**
-     * Observes class changes on the knob handles to keep the activatedKnob
-     * state in sync with the ion-activated class. This is necessary to
-     * determine which knob the user is dragging when using dual knobs and
-     * apply the activated part correctly.
-     */
-    activatedObserver;
-    el;
-    ratioA = 0;
-    ratioB = 0;
-    activatedKnob;
-    focusedKnob;
-    hoveredKnob;
-    pressedKnob;
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     */
-    color;
-    /**
-     * How long, in milliseconds, to wait to trigger the
-     * `ionInput` event after each change in the range value.
-     */
-    debounce;
+    constructor() {
+        this.rangeId = `ion-r-${rangeIds++}`;
+        this.didLoad = false;
+        this.noUpdate = false;
+        this.hasFocus = false;
+        this.inheritedAttributes = {};
+        this.contentEl = null;
+        this.initialContentScrollY = true;
+        /**
+         * Used to avoid setting the focused state on click or tap. The focused
+         * state is only set when the focus comes from the keyboard (e.g. Tab).
+         * This is set to true on pointer down (mouse/touch).
+         */
+        this.focusFromPointer = false;
+        this.ratioA = 0;
+        this.ratioB = 0;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.rangeId;
+        /**
+         * If `true`, the range shows two knobs and `value` is an object with `lower`
+         * and `upper` properties. If `false`, the range shows one knob and `value` is
+         * a number.
+         */
+        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)`.
+         *
+         * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+         * if you need to access `this` from within the callback.
+         */
+        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;
+        /**
+         * Compares two RangeValue inputs to determine if they are different.
+         *
+         * @param newVal - The new value.
+         * @param oldVal - The old value.
+         * @returns `true` if the values are different, `false` otherwise.
+         */
+        this.compareValues = (newVal, oldVal) => {
+            if (typeof newVal === 'object' && typeof oldVal === 'object') {
+                return newVal.lower !== oldVal.lower || newVal.upper !== oldVal.upper;
+            }
+            return newVal !== oldVal;
+        };
+        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);
+            }
+        };
+        /**
+         * Where to place the label relative to the range.
+         * `"start"`: The label will appear to the left of the range in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the range in LTR and to the left in RTL.
+         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         * `"stacked"`: The label will appear above the range regardless of the direction.
+         */
+        this.labelPlacement = 'start';
+        this.setupGesture = async () => {
+            const rangeSlider = this.rangeSlider;
+            if (rangeSlider) {
+                this.gesture = (await import('../../utils/gesture')).createGesture({
+                    el: rangeSlider,
+                    gestureName: 'range',
+                    gesturePriority: 100,
+                    /**
+                     * Provide a threshold since the drag movement
+                     * might be a user scrolling the view.
+                     * If this is true, then the range
+                     * should not move.
+                     */
+                    threshold: 10,
+                    onStart: () => this.onStart(),
+                    onMove: (ev) => this.onMove(ev),
+                    onEnd: (ev) => this.onEnd(ev),
+                });
+                this.gesture.enable(!this.disabled);
+            }
+        };
+        /**
+         * Observes the knob handles for the ion-activated class and syncs
+         * activatedKnob so the activated part is correctly set on the handle,
+         * knob, and pin.
+         */
+        this.setupActivatedObserver = () => {
+            const knobHandleA = this.el.shadowRoot.querySelector('.range-knob-handle-a');
+            const knobHandleB = this.el.shadowRoot.querySelector('.range-knob-handle-b');
+            const syncActivated = () => {
+                this.activatedKnob = knobHandleA?.classList.contains('ion-activated')
+                    ? 'A'
+                    : knobHandleB?.classList.contains('ion-activated')
+                        ? 'B'
+                        : undefined;
+            };
+            if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+                this.activatedObserver = new MutationObserver(syncActivated);
+                this.activatedObserver.observe(this.el.shadowRoot, {
+                    attributes: true,
+                    attributeFilter: ['class'],
+                    subtree: true,
+                });
+            }
+            syncActivated();
+        };
+        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 = clamp(0, this.ratioA + step, 1);
+            }
+            else {
+                this.ratioB = clamp(0, this.ratioB + step, 1);
+            }
+            this.ionKnobMoveStart.emit({ value: ensureValueInBounds(this.value) });
+            this.updateValue();
+            this.emitValueChange();
+            this.ionKnobMoveEnd.emit({ value: ensureValueInBounds(this.value) });
+        };
+        this.onBlur = () => {
+            if (this.hasFocus) {
+                this.hasFocus = false;
+                this.focusedKnob = undefined;
+                this.ionBlur.emit();
+            }
+        };
+        this.onFocus = () => {
+            if (!this.hasFocus) {
+                this.hasFocus = true;
+                this.ionFocus.emit();
+            }
+        };
+        this.onKnobFocus = (knob) => {
+            // Clicking focuses the range which is needed for the keyboard,
+            // but we only want to add the ion-focused class when focused via Tab.
+            if (!this.focusFromPointer) {
+                this.focusedKnob = knob;
+            }
+            else {
+                this.focusFromPointer = false;
+                this.focusedKnob = undefined;
+            }
+            // If the knob was not already focused, emit the focus event
+            if (!this.hasFocus) {
+                this.hasFocus = true;
+                this.ionFocus.emit();
+            }
+        };
+        this.onKnobBlur = () => {
+            // Check if focus is moving to another knob within the same range
+            // by delaying the reset to allow the new focus to register
+            setTimeout(() => {
+                const activeElement = this.el.shadowRoot?.activeElement;
+                const isStillFocusedOnKnob = activeElement && activeElement.classList.contains('range-knob-handle');
+                if (!isStillFocusedOnKnob) {
+                    if (this.hasFocus) {
+                        this.hasFocus = false;
+                        this.focusedKnob = undefined;
+                        this.ionBlur.emit();
+                    }
+                }
+            }, 0);
+        };
+        this.onKnobMouseEnter = (knob) => {
+            this.hoveredKnob = knob;
+        };
+        this.onKnobMouseLeave = () => {
+            this.hoveredKnob = undefined;
+        };
+    }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
         /**
@@ -93,31 +271,11 @@ export class Range {
          */
         this.ionInput = debounce === undefined ? originalIonInput ?? ionInput : debounceEvent(ionInput, debounce);
     }
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    name = this.rangeId;
-    /**
-     * The text to display as the control's label. Use this over the `label` slot if
-     * you only need plain text. The `label` property will take priority over the
-     * `label` slot if both are used.
-     */
-    label;
-    /**
-     * If `true`, the range shows two knobs and `value` is an object with `lower`
-     * and `upper` properties. If `false`, the range shows one knob and `value` is
-     * a number.
-     */
-    dualKnobs = false;
     dualKnobsChanged() {
         if (!this.noUpdate) {
             this.updateRatio();
         }
     }
-    /**
-     * Minimum integer value of the range.
-     */
-    min = 0;
     minChanged(newValue) {
         if (!isSafeNumber(newValue)) {
             this.min = 0;
@@ -126,10 +284,6 @@ export class Range {
             this.updateRatio();
         }
     }
-    /**
-     * Maximum integer value of the range.
-     */
-    max = 100;
     maxChanged(newValue) {
         if (!isSafeNumber(newValue)) {
             this.max = 100;
@@ -138,43 +292,11 @@ export class Range {
             this.updateRatio();
         }
     }
-    /**
-     * If `true`, a pin with integer value is shown when the knob
-     * is pressed.
-     */
-    pin = false;
-    /**
-     * A callback used to format the pin text.
-     * By default the pin text is set to `Math.round(value)`.
-     *
-     * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
-     * if you need to access `this` from within the callback.
-     */
-    pinFormatter = (value) => Math.round(value);
-    /**
-     * If `true`, the knob snaps to tick marks evenly spaced based
-     * on the step property value.
-     */
-    snaps = false;
-    /**
-     * Specifies the value granularity.
-     */
-    step = 1;
     stepChanged(newValue) {
         if (!isSafeNumber(newValue)) {
             this.step = 1;
         }
     }
-    /**
-     * If `true`, tick marks are displayed based on the step value.
-     * Only applies when `snaps` is `true`.
-     */
-    ticks = true;
-    /**
-     * The start position of the range active bar. This feature is only available with a single knob (dualKnobs="false").
-     * Valid values are greater than or equal to the min value and less than or equal to the max value.
-     */
-    activeBarStart;
     activeBarStartChanged() {
         const { activeBarStart } = this;
         if (activeBarStart !== undefined) {
@@ -188,19 +310,11 @@ export class Range {
             }
         }
     }
-    /**
-     * If `true`, the user cannot interact with the range.
-     */
-    disabled = false;
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
         }
     }
-    /**
-     * the value of the range.
-     */
-    value = 0;
     valueChanged(newValue, oldValue) {
         const valuesChanged = this.compareValues(newValue, oldValue);
         if (valuesChanged) {
@@ -210,120 +324,6 @@ export class Range {
             this.updateRatio();
         }
     }
-    /**
-     * Compares two RangeValue inputs to determine if they are different.
-     *
-     * @param newVal - The new value.
-     * @param oldVal - The old value.
-     * @returns `true` if the values are different, `false` otherwise.
-     */
-    compareValues = (newVal, oldVal) => {
-        if (typeof newVal === 'object' && typeof oldVal === 'object') {
-            return newVal.lower !== oldVal.lower || newVal.upper !== oldVal.upper;
-        }
-        return newVal !== oldVal;
-    };
-    clampBounds = (value) => {
-        return clamp(this.min, value, this.max);
-    };
-    ensureValueInBounds = (value) => {
-        if (this.dualKnobs) {
-            return {
-                lower: this.clampBounds(value.lower),
-                upper: this.clampBounds(value.upper),
-            };
-        }
-        else {
-            return this.clampBounds(value);
-        }
-    };
-    /**
-     * Where to place the label relative to the range.
-     * `"start"`: The label will appear to the left of the range in LTR and to the right in RTL.
-     * `"end"`: The label will appear to the right of the range in LTR and to the left in RTL.
-     * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
-     * `"stacked"`: The label will appear above the range regardless of the direction.
-     */
-    labelPlacement = 'start';
-    /**
-     * The `ionChange` event is fired for `<ion-range>` elements when the user
-     * modifies the element's value:
-     * - When the user releases the knob after dragging;
-     * - When the user moves the knob with keyboard arrows
-     *
-     * This event will not emit when programmatically setting the `value` property.
-     */
-    ionChange;
-    /**
-     * The `ionInput` event is fired for `<ion-range>` elements when the value
-     * is modified. Unlike `ionChange`, `ionInput` is fired continuously
-     * while the user is dragging the knob.
-     */
-    ionInput;
-    /**
-     * Emitted when the range has focus.
-     */
-    ionFocus;
-    /**
-     * Emitted when the range loses focus.
-     */
-    ionBlur;
-    /**
-     * Emitted when the user starts moving the range knob, whether through
-     * mouse drag, touch gesture, or keyboard interaction.
-     */
-    ionKnobMoveStart;
-    /**
-     * Emitted when the user finishes moving the range knob, whether through
-     * mouse drag, touch gesture, or keyboard interaction.
-     */
-    ionKnobMoveEnd;
-    setupGesture = async () => {
-        const rangeSlider = this.rangeSlider;
-        if (rangeSlider) {
-            this.gesture = (await import('../../utils/gesture')).createGesture({
-                el: rangeSlider,
-                gestureName: 'range',
-                gesturePriority: 100,
-                /**
-                 * Provide a threshold since the drag movement
-                 * might be a user scrolling the view.
-                 * If this is true, then the range
-                 * should not move.
-                 */
-                threshold: 10,
-                onStart: () => this.onStart(),
-                onMove: (ev) => this.onMove(ev),
-                onEnd: (ev) => this.onEnd(ev),
-            });
-            this.gesture.enable(!this.disabled);
-        }
-    };
-    /**
-     * Observes the knob handles for the ion-activated class and syncs
-     * activatedKnob so the activated part is correctly set on the handle,
-     * knob, and pin.
-     */
-    setupActivatedObserver = () => {
-        const knobHandleA = this.el.shadowRoot.querySelector('.range-knob-handle-a');
-        const knobHandleB = this.el.shadowRoot.querySelector('.range-knob-handle-b');
-        const syncActivated = () => {
-            this.activatedKnob = knobHandleA?.classList.contains('ion-activated')
-                ? 'A'
-                : knobHandleB?.classList.contains('ion-activated')
-                    ? 'B'
-                    : undefined;
-        };
-        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
-            this.activatedObserver = new MutationObserver(syncActivated);
-            this.activatedObserver.observe(this.el.shadowRoot, {
-                attributes: true,
-                attributeFilter: ['class'],
-                subtree: true,
-            });
-        }
-        syncActivated();
-    };
     componentWillLoad() {
         /**
          * If user has custom ID set then we should
@@ -374,25 +374,6 @@ export class Range {
             this.activatedObserver = undefined;
         }
     }
-    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 = clamp(0, this.ratioA + step, 1);
-        }
-        else {
-            this.ratioB = clamp(0, this.ratioB + step, 1);
-        }
-        this.ionKnobMoveStart.emit({ value: ensureValueInBounds(this.value) });
-        this.updateValue();
-        this.emitValueChange();
-        this.ionKnobMoveEnd.emit({ value: ensureValueInBounds(this.value) });
-    };
     getValue() {
         const value = this.value ?? 0;
         if (this.dualKnobs) {
@@ -601,56 +582,6 @@ export class Range {
             };
         this.noUpdate = false;
     }
-    onBlur = () => {
-        if (this.hasFocus) {
-            this.hasFocus = false;
-            this.focusedKnob = undefined;
-            this.ionBlur.emit();
-        }
-    };
-    onFocus = () => {
-        if (!this.hasFocus) {
-            this.hasFocus = true;
-            this.ionFocus.emit();
-        }
-    };
-    onKnobFocus = (knob) => {
-        // Clicking focuses the range which is needed for the keyboard,
-        // but we only want to add the ion-focused class when focused via Tab.
-        if (!this.focusFromPointer) {
-            this.focusedKnob = knob;
-        }
-        else {
-            this.focusFromPointer = false;
-            this.focusedKnob = undefined;
-        }
-        // If the knob was not already focused, emit the focus event
-        if (!this.hasFocus) {
-            this.hasFocus = true;
-            this.ionFocus.emit();
-        }
-    };
-    onKnobBlur = () => {
-        // Check if focus is moving to another knob within the same range
-        // by delaying the reset to allow the new focus to register
-        setTimeout(() => {
-            const activeElement = this.el.shadowRoot?.activeElement;
-            const isStillFocusedOnKnob = activeElement && activeElement.classList.contains('range-knob-handle');
-            if (!isStillFocusedOnKnob) {
-                if (this.hasFocus) {
-                    this.hasFocus = false;
-                    this.focusedKnob = undefined;
-                    this.ionBlur.emit();
-                }
-            }
-        }, 0);
-    };
-    onKnobMouseEnter = (knob) => {
-        this.hoveredKnob = knob;
-    };
-    onKnobMouseLeave = () => {
-        this.hoveredKnob = undefined;
-    };
     /**
      * Returns true if content was passed to the "start" slot
      */