@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786730389.1a1927bf

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

@@ -7,12 +7,11 @@ import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput, isSafeN
 import { printIonWarning } from "../../utils/logging/index";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { roundToMaxDecimalPlaces } from "../../utils/floating-point";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the range. Use the "labelPlacement" property to control where the label is placed relative to the range.
  * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
@@ -44,233 +43,74 @@ 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 {
-    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;
-        /**
-         * 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)`.
-         *
-         * 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 === null || knobHandleA === void 0 ? void 0 : knobHandleA.classList.contains('ion-activated'))
-                    ? 'A'
-                    : (knobHandleB === null || knobHandleB === void 0 ? void 0 : 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(() => {
-                var _a;
-                const activeElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.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;
-        };
-    }
+    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;
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
         /**
          * If debounce is undefined, we have to manually revert the ionInput emitter in case
          * debounce used to be set to a number. Otherwise, the event would stay debounced.
          */
-        this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
+        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;
+    /**
+     * Show two knobs.
+     */
+    dualKnobs = false;
+    /**
+     * Minimum integer value of the range.
+     */
+    min = 0;
     minChanged(newValue) {
         if (!isSafeNumber(newValue)) {
             this.min = 0;
@@ -279,6 +119,10 @@ export class Range {
             this.updateRatio();
         }
     }
+    /**
+     * Maximum integer value of the range.
+     */
+    max = 100;
     maxChanged(newValue) {
         if (!isSafeNumber(newValue)) {
             this.max = 100;
@@ -287,11 +131,43 @@ 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) {
@@ -305,11 +181,19 @@ 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) {
@@ -319,6 +203,120 @@ 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
@@ -342,7 +340,6 @@ export class Range {
         this.didLoad = true;
     }
     connectedCallback() {
-        var _a;
         this.updateRatio();
         this.debounceChanged();
         this.disabledChanged();
@@ -358,7 +355,7 @@ export class Range {
             this.setupActivatedObserver();
         }
         const ionContent = findClosestIonContent(this.el);
-        this.contentEl = (_a = ionContent === null || ionContent === void 0 ? void 0 : ionContent.querySelector('.ion-content-scroll-host')) !== null && _a !== void 0 ? _a : ionContent;
+        this.contentEl = ionContent?.querySelector('.ion-content-scroll-host') ?? ionContent;
     }
     disconnectedCallback() {
         if (this.gesture) {
@@ -370,9 +367,27 @@ 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() {
-        var _a;
-        const value = (_a = this.value) !== null && _a !== void 0 ? _a : 0;
+        const value = this.value ?? 0;
         if (this.dualKnobs) {
             if (typeof value === 'object') {
                 return value;
@@ -458,9 +473,8 @@ export class Range {
      * @param detail The details of the gesture or mouse event.
      */
     onEnd(detail) {
-        var _a;
         const { contentEl, initialContentScrollY } = this;
-        const currentX = (_a = detail.currentX) !== null && _a !== void 0 ? _a : detail.clientX;
+        const currentX = detail.currentX ?? detail.clientX;
         /**
          * The `pressedKnob` can be undefined if the user never
          * dragged the knob. They just tapped on the bar.
@@ -580,6 +594,56 @@ 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
      */
@@ -596,7 +660,6 @@ export class Range {
         return this.label !== undefined || this.el.querySelector('[slot="label"]') !== null;
     }
     renderRangeSlider() {
-        var _a;
         const { min, max, step, handleKeyboard, activatedKnob, focusedKnob, hoveredKnob, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
         let barStart = `${ratioLower * 100}%`;
         let barEnd = `${100 - ratioUpper * 100}%`;
@@ -613,7 +676,7 @@ export class Range {
              * 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)) {
+            if (this.valA < (this.activeBarStart ?? 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.
@@ -692,10 +755,7 @@ export class Range {
             } }, 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-container" }, h("div", { class: {
-                'range-bar': true,
-                'has-ticks': ticks.length > 0,
-            }, role: "presentation", part: "bar" }), h("div", { class: {
+            }, part: tick.active ? 'tick-active' : 'tick' }))), h("div", { class: "range-bar-container" }, h("div", { class: "range-bar", role: "presentation", part: "bar" }), h("div", { class: {
                 'range-bar': true,
                 'range-bar-active': true,
                 'has-ticks': ticks.length > 0,
@@ -759,12 +819,12 @@ export class Range {
          */
         const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
         const needsEndAdjustment = inItem && !hasEndContent;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         /**
          * Determine the name and position of the pressed knob to apply
          * Host classes for styling.
          */
-        const pressedKnobName = dualKnobs ? pressedKnob === null || pressedKnob === void 0 ? void 0 : pressedKnob.toLowerCase() : undefined;
+        const pressedKnobName = dualKnobs ? pressedKnob?.toLowerCase() : undefined;
         const pressedKnobPosition = dualKnobs && pressedKnob ? getKnobPosition(pressedKnob, this.ratioA, this.ratioB, dualKnobs) : undefined;
         /**
          * Determine if any knob is at the min or max value to
@@ -773,8 +833,8 @@ export class Range {
         const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
         const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: '0f39669a81cfb08a3aca6998b95bda68f5076306', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: 'cd26f0187c0d37c7eb9df923f75c8a0f57c19ab6', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+                [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
                 'range-dual-knobs': dualKnobs,
@@ -787,25 +847,23 @@ export class Range {
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, h("label", { key: 'c1615da8ac01fccb650a8d1eb6b6b69562634e2f', class: "range-wrapper", id: "range-label" }, h("div", { key: 'ba530e76d0253f457b04bbd8403d9a02ac859cfe', class: {
+            }) }, h("label", { key: '90224fd24b0e625a17e7972feff73a0ac31e093d', class: "range-wrapper", id: "range-label" }, h("div", { key: 'e07b9fa10983249c425eec26b741f0f628daf2b2', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '253bfb6e4add9852054f08194f07d32430832f1f', class: "native-wrapper" }, h("slot", { key: '160ee66c73ab6e982c6efddb0107fbbcd42de962', name: "start" }), this.renderRangeSlider(), h("slot", { key: '486102e34a85d900aa6a6d909b27a98da947bbe2', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '9e252f1190838fbae46e724bf665f9b1943600a4', class: "native-wrapper" }, h("slot", { key: '950697dd9636da340de659812daa91fff50e5345', name: "start" }), this.renderRangeSlider(), h("slot", { key: 'd3fce46b29db275af71e6149e725967839ec12b0', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["range.ios.scss"],
-            "md": ["range.md.scss"],
-            "ionic": ["range.ionic.scss"]
+            "md": ["range.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["range.ios.css"],
-            "md": ["range.md.css"],
-            "ionic": ["range.ionic.css"]
+            "md": ["range.md.css"]
         };
     }
     static get properties() {