@ionic/core 8.7.17-dev.11771359170.1fda0949 → 8.7.17-dev.11771865171.14f4c2cf

package/hydrate/index.mjs

@@ -12878,21 +12878,14 @@ const datetimeMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:colu
  * layout with `presentation="date-time"` or `"time-date"`.
  * @part time-button active - The time picker button when the picker is open.
  *
- * @part calendar-header - The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout.
  * @part month-year-button - The button that opens the month/year picker when
  * using a grid style layout.
- * @part prev-next-buttons - The buttons used to navigate to the next or previous month when using a grid style layout.
- * @part prev-button - The button used to navigate to the previous month when using a grid style layout.
- * @part next-button - The button used to navigate to the next month when using a grid style layout.
- * @part days-of-week - The container for the day-of-the-week header (both weekdays and weekends) when using a grid style layout.
  *
  * @part calendar-day - The individual buttons that display a day inside of the datetime
  * calendar.
  * @part calendar-day active - The currently selected calendar day.
  * @part calendar-day today - The calendar day that contains the current day.
  * @part calendar-day disabled - The calendar day that is disabled.
- *
- * @part datetime-header - The datetime header contains the content for the `title` slot and the selected date.
  */
 class Datetime {
     constructor(hostRef) {
@@ -14234,11 +14227,11 @@ class Datetime {
         const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
         // don't use the inheritAttributes util because it removes dir from the host, and we still need that
         const hostDir = this.el.getAttribute('dir') || undefined;
-        return (hAsync("div", { class: "calendar-header", part: "calendar-header" }, hAsync("div", { class: "calendar-action-buttons" }, hAsync("div", { class: "calendar-month-year" }, hAsync("button", { class: {
+        return (hAsync("div", { class: "calendar-header" }, hAsync("div", { class: "calendar-action-buttons" }, hAsync("div", { class: "calendar-month-year" }, hAsync("button", { class: {
                 'calendar-month-year-toggle': true,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, hAsync("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), hAsync("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && hAsync("ion-ripple-effect", null))), hAsync("div", { class: "calendar-next-prev" }, hAsync("ion-buttons", null, hAsync("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth(), part: "prev-next-buttons prev-button" }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), hAsync("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth(), part: "prev-next-buttons next-button" }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), hAsync("div", { class: "calendar-days-of-week", "aria-hidden": "true", part: "days-of-week" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
+            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, hAsync("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), hAsync("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && hAsync("ion-ripple-effect", null))), hAsync("div", { class: "calendar-next-prev" }, hAsync("ion-buttons", null, hAsync("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), hAsync("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, hAsync("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), hAsync("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
             return hAsync("div", { class: "day-of-week" }, d);
         }))));
     }
@@ -14470,7 +14463,7 @@ class Datetime {
         if (!hasSlottedTitle && !this.showDefaultTitle) {
             return;
         }
-        return (hAsync("div", { class: "datetime-header", part: "datetime-header" }, hAsync("div", { class: "datetime-title" }, hAsync("slot", { name: "title" }, "Select Date")), showExpandedHeader && hAsync("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
+        return (hAsync("div", { class: "datetime-header" }, hAsync("div", { class: "datetime-title" }, hAsync("slot", { name: "title" }, "Select Date")), showExpandedHeader && hAsync("div", { class: "datetime-selected-date" }, this.getHeaderSelectedDateText())));
     }
     /**
      * Render time picker inside of datetime.
@@ -14550,7 +14543,7 @@ class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (hAsync(Host, { key: '3d0787ecb3ad104c4a60d68a6e57140f018a70f2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
+        return (hAsync(Host, { key: '19e20c9b6b5f9467e91a2567b6dc7d9d38b56cc3', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -14560,7 +14553,7 @@ class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, hAsync("div", { key: '6b245a0033d5ddd1918bc839f142141bf5ec54c5', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, hAsync("div", { key: 'e31b5ef76cd6262dafd39f2d21980887880ec32e', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28722,13 +28715,30 @@ const rangeMdCss = ":host{--knob-handle-size:calc(var(--knob-size) * 2);display:
  * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.
  *
+ * @part label - The label text describing the range.
  * @part tick - An inactive tick mark.
  * @part tick-active - An active tick mark.
- * @part pin - The counter that appears above a knob.
- * @part knob - The handle that is used to drag the range.
  * @part bar - The inactive part of the bar.
  * @part bar-active - The active part of the bar.
- * @part label - The label text describing the range.
+ * @part knob-handle - The container element that wraps the knob and handles drag interactions.
+ * @part knob-handle-a - The container element for the first knob. Only available when `dualKnobs` is `true`.
+ * @part knob-handle-b - The container element for the second knob. Only available when `dualKnobs` is `true`.
+ * @part knob-handle-lower - The container element for the lower knob. Only available when `dualKnobs` is `true`.
+ * @part knob-handle-upper - The container element for the upper knob. Only available when `dualKnobs` is `true`.
+ * @part pin - The counter that appears above a knob.
+ * @part pin-a - The counter that appears above the first knob. Only available when `dualKnobs` is `true`.
+ * @part pin-b - The counter that appears above the second knob. Only available when `dualKnobs` is `true`.
+ * @part pin-lower - The counter that appears above the lower knob. Only available when `dualKnobs` is `true`.
+ * @part pin-upper - The counter that appears above the upper knob. Only available when `dualKnobs` is `true`.
+ * @part knob - The visual knob element that appears on the range track.
+ * @part knob-a - The visual knob element for the first knob. Only available when `dualKnobs` is `true`.
+ * @part knob-b - The visual knob element for the second knob. Only available when `dualKnobs` is `true`.
+ * @part knob-lower - The visual knob element for the lower knob. Only available when `dualKnobs` is `true`.
+ * @part knob-upper - The visual knob element for the upper knob. Only available when `dualKnobs` is `true`.
+ * @part activated - Added to the knob-handle, knob, and pin when the knob is activated (has the `ion-activated` class). Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part focused - Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time when `dualKnobs` is `true`.
+ * @part hover - Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time when `dualKnobs` is `true`.
+ * @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`.
  */
 class Range {
     constructor(hostRef) {
@@ -28746,6 +28756,7 @@ class Range {
         this.inheritedAttributes = {};
         this.contentEl = null;
         this.initialContentScrollY = true;
+        this.focusFromPointer = false;
         this.ratioA = 0;
         this.ratioB = 0;
         /**
@@ -28855,6 +28866,29 @@ class Range {
                 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;
+            };
+            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;
@@ -28877,6 +28911,7 @@ class Range {
         this.onBlur = () => {
             if (this.hasFocus) {
                 this.hasFocus = false;
+                this.focusedKnob = undefined;
                 this.ionBlur.emit();
             }
         };
@@ -28887,21 +28922,20 @@ class Range {
             }
         };
         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();
             }
-            // Manually manage ion-focused class for dual knobs
-            if (this.dualKnobs && this.el.shadowRoot) {
-                const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
-                const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
-                // Remove ion-focused from both knobs first
-                knobA === null || knobA === void 0 ? void 0 : knobA.classList.remove('ion-focused');
-                knobB === null || knobB === void 0 ? void 0 : knobB.classList.remove('ion-focused');
-                // Add ion-focused only to the focused knob
-                const focusedKnobEl = knob === 'A' ? knobA : knobB;
-                focusedKnobEl === null || focusedKnobEl === void 0 ? void 0 : focusedKnobEl.classList.add('ion-focused');
-            }
         };
         this.onKnobBlur = () => {
             // Check if focus is moving to another knob within the same range
@@ -28913,18 +28947,18 @@ class Range {
                 if (!isStillFocusedOnKnob) {
                     if (this.hasFocus) {
                         this.hasFocus = false;
+                        this.focusedKnob = undefined;
                         this.ionBlur.emit();
                     }
-                    // Remove ion-focused from both knobs when focus leaves the range
-                    if (this.dualKnobs && this.el.shadowRoot) {
-                        const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
-                        const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
-                        knobA === null || knobA === void 0 ? void 0 : knobA.classList.remove('ion-focused');
-                        knobB === null || knobB === void 0 ? void 0 : knobB.classList.remove('ion-focused');
-                    }
                 }
             }, 0);
         };
+        this.onKnobMouseEnter = (knob) => {
+            this.hoveredKnob = knob;
+        };
+        this.onKnobMouseLeave = () => {
+            this.hoveredKnob = undefined;
+        };
     }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
@@ -29001,6 +29035,7 @@ class Range {
         this.originalIonInput = this.ionInput;
         this.setupGesture();
         this.updateRatio();
+        this.setupActivatedObserver();
         this.didLoad = true;
     }
     connectedCallback() {
@@ -29026,6 +29061,10 @@ class Range {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        if (this.activatedObserver) {
+            this.activatedObserver.disconnect();
+            this.activatedObserver = undefined;
+        }
     }
     getValue() {
         var _a;
@@ -29178,7 +29217,6 @@ class Range {
             ratio = 1 - ratio;
         }
         this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
-        this.setFocus(this.pressedKnob);
     }
     get valA() {
         return ratioToValue(this.ratioA, this.min, this.max, this.step);
@@ -29205,9 +29243,23 @@ class Range {
     updateRatio() {
         const value = this.getValue();
         const { min, max } = this;
+        /**
+         * For dual knobs, value gives lower/upper but not which is A vs B.
+         * Assign (lowerRatio, upperRatio) to (ratioA, ratioB) in the way that
+         * minimizes change from the current ratios so the knobs don't swap.
+         */
         if (this.dualKnobs) {
-            this.ratioA = valueToRatio(value.lower, min, max);
-            this.ratioB = valueToRatio(value.upper, min, max);
+            const lowerRatio = valueToRatio(value.lower, min, max);
+            const upperRatio = valueToRatio(value.upper, min, max);
+            if (Math.abs(this.ratioA - lowerRatio) + Math.abs(this.ratioB - upperRatio) <=
+                Math.abs(this.ratioA - upperRatio) + Math.abs(this.ratioB - lowerRatio)) {
+                this.ratioA = lowerRatio;
+                this.ratioB = upperRatio;
+            }
+            else {
+                this.ratioA = upperRatio;
+                this.ratioB = lowerRatio;
+            }
         }
         else {
             this.ratioA = valueToRatio(value, min, max);
@@ -29224,14 +29276,6 @@ class Range {
             };
         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();
-            }
-        }
-    }
     /**
      * Returns true if content was passed to the "start" slot
      */
@@ -29249,7 +29293,7 @@ class Range {
     }
     renderRangeSlider() {
         var _a;
-        const { min, max, step, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
+        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}%`;
         const rtl = isRTL$1(this.el);
@@ -29309,7 +29353,9 @@ class Range {
                 ticks.push(tick);
             }
         }
-        return (hAsync("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl),
+        return (hAsync("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl), onPointerDown: () => {
+                this.focusFromPointer = true;
+            },
             /**
              * Since the gesture has a threshold, the value
              * won't change until the user has dragged past
@@ -29322,6 +29368,7 @@ class Range {
              * we need to listen for the "pointerUp" event.
              */
             onPointerUp: (ev) => {
+                this.focusFromPointer = false;
                 /**
                  * If the user drags the knob on the web
                  * version (does not occur on mobile),
@@ -29347,6 +29394,11 @@ class Range {
                 'has-ticks': ticks.length > 0,
             }, role: "presentation", style: barStyle, part: "bar-active" })), renderKnob(rtl, {
             knob: 'A',
+            position: getKnobPosition('A', this.ratioA, this.ratioB, this.dualKnobs),
+            dualKnobs: this.dualKnobs,
+            activated: activatedKnob === 'A',
+            focused: focusedKnob === 'A',
+            hovered: hoveredKnob === 'A',
             pressed: pressedKnob === 'A',
             value: this.valA,
             ratio: this.ratioA,
@@ -29359,9 +29411,16 @@ class Range {
             inheritedAttributes,
             onKnobFocus: this.onKnobFocus,
             onKnobBlur: this.onKnobBlur,
+            onKnobMouseEnter: this.onKnobMouseEnter,
+            onKnobMouseLeave: this.onKnobMouseLeave,
         }), this.dualKnobs &&
             renderKnob(rtl, {
                 knob: 'B',
+                position: getKnobPosition('B', this.ratioA, this.ratioB, this.dualKnobs),
+                dualKnobs: this.dualKnobs,
+                activated: activatedKnob === 'B',
+                focused: focusedKnob === 'B',
+                hovered: hoveredKnob === 'B',
                 pressed: pressedKnob === 'B',
                 value: this.valB,
                 ratio: this.ratioB,
@@ -29374,6 +29433,8 @@ class Range {
                 inheritedAttributes,
                 onKnobFocus: this.onKnobFocus,
                 onKnobBlur: this.onKnobBlur,
+                onKnobMouseEnter: this.onKnobMouseEnter,
+                onKnobMouseLeave: this.onKnobMouseLeave,
             })));
     }
     render() {
@@ -29392,6 +29453,12 @@ class Range {
         const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode$1(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 pressedKnobPosition = dualKnobs && pressedKnob ? getKnobPosition(pressedKnob, this.ratioA, this.ratioB, dualKnobs) : undefined;
         /**
          * Determine if any knob is at the min or max value to
          * apply Host classes for styling.
@@ -29399,21 +29466,24 @@ 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 (hAsync(Host, { key: 'ed646a42d51b8fe22012198c354cbcf5a389c108', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '8e439db9836fdefdc779573082c788e3ddb3ef73', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
+                'range-dual-knobs': dualKnobs,
                 'range-pressed': pressedKnob !== undefined,
+                [`range-pressed-${pressedKnobName}`]: pressedKnob !== undefined && pressedKnobName !== undefined,
+                [`range-pressed-${pressedKnobPosition}`]: pressedKnob !== undefined && pressedKnobPosition !== undefined,
                 'range-has-pin': pin,
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, hAsync("label", { key: '3083e4f2a624e3b268396acb4415f7c6ac44d851', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '47b92f94d2a0381dd7c5cd3dda54ed2942096715', class: {
+            }) }, hAsync("label", { key: 'e14c56db4d1eef11a3a0639c4bbed368041fc3eb', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '16d125b0af19fdfa3663731657a7cca51a7ed442', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '5341da8d19eb29091df680978a0e20cc8f2eec65', class: "native-wrapper" }, hAsync("slot", { key: '09f1437078032676695442d8c827a16faa7dffe2', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '02b7781970ea4d44f10b5f4627a2ca36eca45f85', name: "end" })))));
+            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '545cc52a3e675e9df328dab537a4e44b7f3c59f8', class: "native-wrapper" }, hAsync("slot", { key: 'ac54b45a21c9db231ebe11498d508d05864b56fb', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '7182dba53df2ff878d572b30afda64b37082c82e', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29451,6 +29521,9 @@ class Range {
             "labelPlacement": [1, "label-placement"],
             "ratioA": [32],
             "ratioB": [32],
+            "activatedKnob": [32],
+            "focusedKnob": [32],
+            "hoveredKnob": [32],
             "pressedKnob": [32]
         },
         "$listeners$": undefined,
@@ -29458,7 +29531,7 @@ class Range {
         "$attrsToReflect$": [["color", "color"]]
     }; }
 }
-const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, }) => {
+const renderKnob = (rtl, { knob, position, dualKnobs, value, ratio, min, max, disabled, activated, focused, hovered, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, onKnobMouseEnter, onKnobMouseLeave, }) => {
     const start = rtl ? 'right' : 'left';
     const knobStyle = () => {
         const style = {};
@@ -29479,16 +29552,66 @@ const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin,
                 ev.preventDefault();
                 ev.stopPropagation();
             }
-        }, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, class: {
+        }, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, onMouseEnter: () => onKnobMouseEnter(knob), onMouseLeave: onKnobMouseLeave, class: {
             'range-knob-handle': true,
-            'range-knob-a': knob === 'A',
-            'range-knob-b': knob === 'B',
+            'range-knob-handle-a': knob === 'A',
+            'range-knob-handle-b': knob === 'B',
             'range-knob-pressed': pressed,
             'range-knob-min': value === min,
             'range-knob-max': value === max,
             'ion-activatable': true,
             'ion-focusable': true,
-        }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": ariaLabel !== undefined ? ariaLabel : null, "aria-labelledby": ariaLabel === undefined ? 'range-label' : null, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (hAsync("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value))), hAsync("div", { class: "range-knob", role: "presentation", part: "knob" })));
+            'ion-focused': focused,
+        }, part: [
+            'knob-handle',
+            dualKnobs && knob === 'A' && 'knob-handle-a',
+            dualKnobs && knob === 'B' && 'knob-handle-b',
+            dualKnobs && position === 'lower' && 'knob-handle-lower',
+            dualKnobs && position === 'upper' && 'knob-handle-upper',
+            pressed && 'pressed',
+            focused && 'focused',
+            hovered && 'hover',
+            activated && 'activated',
+        ]
+            .filter(Boolean)
+            .join(' '), style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": ariaLabel !== undefined ? ariaLabel : null, "aria-labelledby": ariaLabel === undefined ? 'range-label' : null, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (hAsync("div", { class: "range-pin", role: "presentation", part: [
+            'pin',
+            dualKnobs && knob === 'A' && 'pin-a',
+            dualKnobs && knob === 'B' && 'pin-b',
+            dualKnobs && position === 'lower' && 'pin-lower',
+            dualKnobs && position === 'upper' && 'pin-upper',
+            pressed && 'pressed',
+            focused && 'focused',
+            hovered && 'hover',
+            activated && 'activated',
+        ]
+            .filter(Boolean)
+            .join(' ') }, pinFormatter(value))), hAsync("div", { class: "range-knob", role: "presentation", part: [
+            'knob',
+            dualKnobs && knob === 'A' && 'knob-a',
+            dualKnobs && knob === 'B' && 'knob-b',
+            dualKnobs && position === 'lower' && 'knob-lower',
+            dualKnobs && position === 'upper' && 'knob-upper',
+            pressed && 'pressed',
+            focused && 'focused',
+            hovered && 'hover',
+            activated && 'activated',
+        ]
+            .filter(Boolean)
+            .join(' ') })));
+};
+/**
+ * Returns whether the given knob is at the lower or upper position based
+ * on current ratios for the given knob.
+ */
+const getKnobPosition = (knob, ratioA, ratioB, dualKnobs) => {
+    if (dualKnobs) {
+        if (knob === 'A') {
+            return ratioA <= ratioB ? 'lower' : 'upper';
+        }
+        return ratioB <= ratioA ? 'lower' : 'upper';
+    }
+    return 'lower';
 };
 const ratioToValue = (ratio, min, max, step) => {
     let value = (max - min) * ratio;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.17-dev.11771359170.1fda0949",
+  "version": "8.7.17-dev.11771865171.14f4c2cf",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"

package/dist/ionic/p-012212e4.entry.js

@@ -1,4 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import{r as e,c as t,f as a,h as n,d as r,g as i}from"./p-C8IsBmNU.js";import{f as o,d as s,r as l}from"./p-CwgG81ZD.js";import{j as h,e as d,d as b,i as g,a as c}from"./p-CTfR9YZG.js";import{i as p}from"./p-C53feagD.js";import{h as m,c as u}from"./p-DiVJyqlX.js";import{b as k}from"./p-BFvmZNyx.js";const x=class{constructor(a){e(this,a),this.ionChange=t(this,"ionChange",7),this.ionInput=t(this,"ionInput",7),this.ionFocus=t(this,"ionFocus",7),this.ionBlur=t(this,"ionBlur",7),this.ionKnobMoveStart=t(this,"ionKnobMoveStart",7),this.ionKnobMoveEnd=t(this,"ionKnobMoveEnd",7),this.rangeId="ion-r-"+y++,this.didLoad=!1,this.noUpdate=!1,this.hasFocus=!1,this.inheritedAttributes={},this.contentEl=null,this.initialContentScrollY=!0,this.ratioA=0,this.ratioB=0,this.name=this.rangeId,this.dualKnobs=!1,this.min=0,this.max=100,this.pin=!1,this.pinFormatter=e=>Math.round(e),this.snaps=!1,this.step=1,this.ticks=!0,this.disabled=!1,this.value=0,this.compareValues=(e,t)=>"object"==typeof e&&"object"==typeof t?e.lower!==t.lower||e.upper!==t.upper:e!==t,this.clampBounds=e=>d(this.min,e,this.max),this.ensureValueInBounds=e=>this.dualKnobs?{lower:this.clampBounds(e.lower),upper:this.clampBounds(e.upper)}:this.clampBounds(e),this.labelPlacement="start",this.setupGesture=async()=>{const e=this.rangeSlider;e&&(this.gesture=(await import("./p-Cl0B-RWe.js")).createGesture({el:e,gestureName:"range",gesturePriority:100,threshold:10,onStart:()=>this.onStart(),onMove:e=>this.onMove(e),onEnd:e=>this.onEnd(e)}),this.gesture.enable(!this.disabled))},this.handleKeyboard=(e,t)=>{const{ensureValueInBounds:a}=this;let n=this.step;n=n>0?n:1,n/=this.max-this.min,t||(n*=-1),"A"===e?this.ratioA=d(0,this.ratioA+n,1):this.ratioB=d(0,this.ratioB+n,1),this.ionKnobMoveStart.emit({value:a(this.value)}),this.updateValue(),this.emitValueChange(),this.ionKnobMoveEnd.emit({value:a(this.value)})},this.onBlur=()=>{this.hasFocus&&(this.hasFocus=!1,this.ionBlur.emit())},this.onFocus=()=>{this.hasFocus||(this.hasFocus=!0,this.ionFocus.emit())},this.onKnobFocus=e=>{if(this.hasFocus||(this.hasFocus=!0,this.ionFocus.emit()),this.dualKnobs&&this.el.shadowRoot){const t=this.el.shadowRoot.querySelector(".range-knob-a"),a=this.el.shadowRoot.querySelector(".range-knob-b");null==t||t.classList.remove("ion-focused"),null==a||a.classList.remove("ion-focused");const n="A"===e?t:a;null==n||n.classList.add("ion-focused")}},this.onKnobBlur=()=>{setTimeout((()=>{var e;const t=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.activeElement;if((!t||!t.classList.contains("range-knob-handle"))&&(this.hasFocus&&(this.hasFocus=!1,this.ionBlur.emit()),this.dualKnobs&&this.el.shadowRoot)){const e=this.el.shadowRoot.querySelector(".range-knob-a"),t=this.el.shadowRoot.querySelector(".range-knob-b");null==e||e.classList.remove("ion-focused"),null==t||t.classList.remove("ion-focused")}}),0)}}debounceChanged(){const{ionInput:e,debounce:t,originalIonInput:a}=this;this.ionInput=void 0===t?null!=a?a:e:b(e,t)}minChanged(e){h(e)||(this.min=0),this.noUpdate||this.updateRatio()}maxChanged(e){h(e)||(this.max=100),this.noUpdate||this.updateRatio()}stepChanged(e){h(e)||(this.step=1)}activeBarStartChanged(){const{activeBarStart:e}=this;void 0!==e&&(e>this.max?(a(`[ion-range] - The value of activeBarStart (${e}) 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):e<this.min&&(a(`[ion-range] - The value of activeBarStart (${e}) 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(){this.gesture&&this.gesture.enable(!this.disabled)}valueChanged(e,t){this.compareValues(e,t)&&this.ionInput.emit({value:this.value}),this.noUpdate||this.updateRatio()}componentWillLoad(){this.el.hasAttribute("id")&&(this.rangeId=this.el.getAttribute("id")),this.inheritedAttributes=g(this.el),this.min=h(this.min)?this.min:0,this.max=h(this.max)?this.max:100,this.step=h(this.step)?this.step:1}componentDidLoad(){this.originalIonInput=this.ionInput,this.setupGesture(),this.updateRatio(),this.didLoad=!0}connectedCallback(){var e;this.updateRatio(),this.debounceChanged(),this.disabledChanged(),this.activeBarStartChanged(),this.didLoad&&this.setupGesture();const t=o(this.el);this.contentEl=null!==(e=null==t?void 0:t.querySelector(".ion-content-scroll-host"))&&void 0!==e?e:t}disconnectedCallback(){this.gesture&&(this.gesture.destroy(),this.gesture=void 0)}getValue(){var e;const t=null!==(e=this.value)&&void 0!==e?e:0;return this.dualKnobs?"object"==typeof t?t:{lower:0,upper:t}:"object"==typeof t?t.upper:t}emitValueChange(){this.value=this.ensureValueInBounds(this.value),this.ionChange.emit({value:this.value})}onStart(){this.ionKnobMoveStart.emit({value:this.ensureValueInBounds(this.value)})}onMove(e){const{contentEl:t,pressedKnob:a}=this,n=e.currentX;t&&void 0===this.pressedKnob&&(this.initialContentScrollY=s(t)),void 0===a&&this.setPressedKnob(n),this.update(n)}onEnd(e){var t;const{contentEl:a,initialContentScrollY:n}=this,r=null!==(t=e.currentX)&&void 0!==t?t:e.clientX;void 0===this.pressedKnob&&this.setPressedKnob(r),a&&void 0!==this.pressedKnob&&l(a,n),this.update(r),this.pressedKnob=void 0,this.emitValueChange(),this.ionKnobMoveEnd.emit({value:this.ensureValueInBounds(this.value)})}update(e){const t=this.rect;let a=d(0,(e-t.left)/t.width,1);p(this.el)&&(a=1-a),this.snaps&&(a=w(v(a,this.min,this.max,this.step),this.min,this.max)),"A"===this.pressedKnob?this.ratioA=a:this.ratioB=a,this.updateValue()}setPressedKnob(e){const t=this.rect=this.rangeSlider.getBoundingClientRect();let a=d(0,(e-t.left)/t.width,1);p(this.el)&&(a=1-a),this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-a)<Math.abs(this.ratioB-a)?"A":"B",this.setFocus(this.pressedKnob)}get valA(){return v(this.ratioA,this.min,this.max,this.step)}get valB(){return v(this.ratioB,this.min,this.max,this.step)}get ratioLower(){if(this.dualKnobs)return Math.min(this.ratioA,this.ratioB);const{activeBarStart:e}=this;return null==e?0:w(e,this.min,this.max)}get ratioUpper(){return this.dualKnobs?Math.max(this.ratioA,this.ratioB):this.ratioA}updateRatio(){const e=this.getValue(),{min:t,max:a}=this;this.dualKnobs?(this.ratioA=w(e.lower,t,a),this.ratioB=w(e.upper,t,a)):this.ratioA=w(e,t,a)}updateValue(){this.noUpdate=!0;const{valA:e,valB:t}=this;this.value=this.dualKnobs?{lower:Math.min(e,t),upper:Math.max(e,t)}:e,this.noUpdate=!1}setFocus(e){if(this.el.shadowRoot){const t=this.el.shadowRoot.querySelector("A"===e?".range-knob-a":".range-knob-b");t&&t.focus()}}get hasStartSlotContent(){return null!==this.el.querySelector('[slot="start"]')}get hasEndSlotContent(){return null!==this.el.querySelector('[slot="end"]')}get hasLabel(){return void 0!==this.label||null!==this.el.querySelector('[slot="label"]')}renderRangeSlider(){var e;const{min:t,max:a,step:r,handleKeyboard:i,pressedKnob:o,disabled:s,pin:l,ratioLower:h,ratioUpper:d,pinFormatter:b,inheritedAttributes:g}=this;let c=100*h+"%",m=100-100*d+"%";const u=p(this.el),k=u?"right":"left",x=u?"left":"right",v=e=>({[k]:e[k]});!1===this.dualKnobs&&(this.valA<(null!==(e=this.activeBarStart)&&void 0!==e?e:this.min)?(c=100*d+"%",m=100-100*h+"%"):(c=100*h+"%",m=100-100*d+"%"));const y={[k]:c,[x]:m},z=[];if(this.snaps&&this.ticks)for(let e=t;e<=a;e+=r){const n=w(e,t,a),r=Math.min(h,d),i=Math.max(h,d),o={ratio:n,active:n>=r&&n<=i};o[k]=100*n+"%",z.push(o)}return n("div",{class:"range-slider",ref:e=>this.rangeSlider=e,onPointerUp:e=>{void 0===this.pressedKnob&&(this.onStart(),this.onEnd(e))}},z.map((e=>n("div",{style:v(e),role:"presentation",class:{"range-tick":!0,"range-tick-active":e.active},part:e.active?"tick-active":"tick"}))),n("div",{class:"range-bar-container"},n("div",{class:"range-bar",role:"presentation",part:"bar"}),n("div",{class:{"range-bar":!0,"range-bar-active":!0,"has-ticks":z.length>0},role:"presentation",style:y,part:"bar-active"})),f(u,{knob:"A",pressed:"A"===o,value:this.valA,ratio:this.ratioA,pin:l,pinFormatter:b,disabled:s,handleKeyboard:i,min:t,max:a,inheritedAttributes:g,onKnobFocus:this.onKnobFocus,onKnobBlur:this.onKnobBlur}),this.dualKnobs&&f(u,{knob:"B",pressed:"B"===o,value:this.valB,ratio:this.ratioB,pin:l,pinFormatter:b,disabled:s,handleKeyboard:i,min:t,max:a,inheritedAttributes:g,onKnobFocus:this.onKnobFocus,onKnobBlur:this.onKnobBlur}))}render(){const{disabled:e,el:t,hasLabel:a,rangeId:i,pin:o,pressedKnob:s,labelPlacement:l,label:h,dualKnobs:d,min:b,max:g}=this,p=m("ion-item",t),x=p&&!(a&&("start"===l||"fixed"===l)||this.hasStartSlotContent),f=p&&!(a&&"end"===l||this.hasEndSlotContent),v=k(this),w=d?this.valA===b||this.valB===b:this.valA===b,y=d?this.valA===g||this.valB===g:this.valA===g;return c(!0,t,this.name,JSON.stringify(this.getValue()),e),n(r,{key:"ed646a42d51b8fe22012198c354cbcf5a389c108",onFocusin:this.onFocus,onFocusout:this.onBlur,id:i,class:u(this.color,{[v]:!0,"in-item":p,"range-disabled":e,"range-pressed":void 0!==s,"range-has-pin":o,[`range-label-placement-${l}`]:!0,"range-item-start-adjustment":x,"range-item-end-adjustment":f,"range-value-min":w,"range-value-max":y})},n("label",{key:"3083e4f2a624e3b268396acb4415f7c6ac44d851",class:"range-wrapper",id:"range-label"},n("div",{key:"47b92f94d2a0381dd7c5cd3dda54ed2942096715",class:{"label-text-wrapper":!0,"label-text-wrapper-hidden":!a},part:"label"},void 0!==h?n("div",{class:"label-text"},h):n("slot",{name:"label"})),n("div",{key:"5341da8d19eb29091df680978a0e20cc8f2eec65",class:"native-wrapper"},n("slot",{key:"09f1437078032676695442d8c827a16faa7dffe2",name:"start"}),this.renderRangeSlider(),n("slot",{key:"02b7781970ea4d44f10b5f4627a2ca36eca45f85",name:"end"}))))}get el(){return i(this)}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],step:["stepChanged"],activeBarStart:["activeBarStartChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}},f=(e,{knob:t,value:a,ratio:r,min:i,max:o,disabled:s,pressed:l,pin:h,handleKeyboard:d,pinFormatter:b,inheritedAttributes:g,onKnobFocus:c,onKnobBlur:p})=>{const m=e?"right":"left",u=g["aria-label"];return n("div",{onKeyDown:e=>{const a=e.key;"ArrowLeft"===a||"ArrowDown"===a?(d(t,!1),e.preventDefault(),e.stopPropagation()):"ArrowRight"!==a&&"ArrowUp"!==a||(d(t,!0),e.preventDefault(),e.stopPropagation())},onFocus:()=>c(t),onBlur:p,class:{"range-knob-handle":!0,"range-knob-a":"A"===t,"range-knob-b":"B"===t,"range-knob-pressed":l,"range-knob-min":a===i,"range-knob-max":a===o,"ion-activatable":!0,"ion-focusable":!0},style:(()=>{const e={};return e[m]=100*r+"%",e})(),role:"slider",tabindex:s?-1:0,"aria-label":void 0!==u?u:null,"aria-labelledby":void 0===u?"range-label":null,"aria-valuemin":i,"aria-valuemax":o,"aria-disabled":s?"true":null,"aria-valuenow":a},h&&n("div",{class:"range-pin",role:"presentation",part:"pin"},b(a)),n("div",{class:"range-knob",role:"presentation",part:"knob"}))},v=(e,t,a,n)=>{let r=(a-t)*e;return n>0&&(r=Math.round(r/n)*n+t),function(e,...t){if(!h(e))return 0;const a=Math.max(...t.map((e=>function(e){return h(e)?e%1==0?0:e.toString().split(".")[1].length:0}(e))));return Number(e.toFixed(a))}(d(t,r,a),t,a,n)},w=(e,t,a)=>d(0,(e-t)/(a-t),1);let y=0;x.style={ios:":host{--knob-handle-size:calc(var(--knob-size) * 2);display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){-ms-flex:initial;flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:-webkit-grabbing;cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.range-knob-handle{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}.range-knob-handle{inset-inline-start:0}:host-context([dir=rtl]) .range-knob-handle{left:unset}[dir=rtl] .range-knob-handle{left:unset}@supports selector(:dir(rtl)){.range-knob-handle:dir(rtl){left:unset}}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar-container{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}.range-bar-container{inset-inline-start:0}:host-context([dir=rtl]) .range-bar-container{left:unset}[dir=rtl] .range-bar-container{left:unset}@supports selector(:dir(rtl)){.range-bar-container:dir(rtl){left:unset}}.range-bar{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-knob{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}.range-knob{inset-inline-start:calc(50% - var(--knob-size) / 2)}:host-context([dir=rtl]) .range-knob{left:unset}[dir=rtl] .range-knob{left:unset}@supports selector(:dir(rtl)){.range-knob:dir(rtl){left:unset}}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host([slot=start]),:host([slot=end]){width:auto}:host(.in-item) ::slotted(ion-label){-ms-flex-item-align:center;align-self:center}.range-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}::slotted([slot=label]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}:host(.range-label-placement-start) .range-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.range-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-end) .range-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.range-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.range-label-placement-stacked) .range-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}:host(.range-label-placement-stacked) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.in-item.range-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.range-label-placement-stacked) .native-wrapper{margin-bottom:0px}:host{--knob-border-radius:50%;--knob-background:#ffffff;--knob-box-shadow:0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);--knob-size:26px;--bar-height:4px;--bar-background:var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));--bar-background-active:var(--ion-color-primary, #0054e9);--bar-border-radius:2px;--height:42px}:host(.range-item-start-adjustment){-webkit-padding-start:24px;padding-inline-start:24px}:host(.range-item-end-adjustment){-webkit-padding-end:24px;padding-inline-end:24px}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-tick-active{background:var(--ion-color-base)}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-has-pin:not(.range-label-placement-stacked)){padding-top:calc(8px + 0.75rem)}:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper{margin-bottom:calc(8px + 0.75rem)}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-bar-active.has-ticks{border-radius:0;-webkit-margin-start:-2px;margin-inline-start:-2px;-webkit-margin-end:-2px;margin-inline-end:-2px}.range-tick{-webkit-margin-start:-2px;margin-inline-start:-2px;border-radius:0;position:absolute;top:17px;width:4px;height:8px;background:var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));pointer-events:none}.range-tick-active{background:var(--bar-background-active)}.range-pin{-webkit-transform:translate3d(0,  100%,  0) scale(0.01);transform:translate3d(0,  100%,  0) scale(0.01);-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;min-width:28px;-webkit-transition:-webkit-transform 120ms ease;transition:-webkit-transform 120ms ease;transition:transform 120ms ease;transition:transform 120ms ease, -webkit-transform 120ms ease;background:transparent;color:var(--ion-text-color, #000);font-size:0.75rem;text-align:center}.range-knob-pressed .range-pin,.range-knob-handle.ion-focused .range-pin{-webkit-transform:translate3d(0, calc(-100% + 11px), 0) scale(1);transform:translate3d(0, calc(-100% + 11px), 0) scale(1)}:host(.range-disabled){opacity:0.3}",md:':host{--knob-handle-size:calc(var(--knob-size) * 2);display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){-ms-flex:initial;flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:-webkit-grabbing;cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.range-knob-handle{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}.range-knob-handle{inset-inline-start:0}:host-context([dir=rtl]) .range-knob-handle{left:unset}[dir=rtl] .range-knob-handle{left:unset}@supports selector(:dir(rtl)){.range-knob-handle:dir(rtl){left:unset}}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar-container{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}.range-bar-container{inset-inline-start:0}:host-context([dir=rtl]) .range-bar-container{left:unset}[dir=rtl] .range-bar-container{left:unset}@supports selector(:dir(rtl)){.range-bar-container:dir(rtl){left:unset}}.range-bar{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-knob{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}.range-knob{inset-inline-start:calc(50% - var(--knob-size) / 2)}:host-context([dir=rtl]) .range-knob{left:unset}[dir=rtl] .range-knob{left:unset}@supports selector(:dir(rtl)){.range-knob:dir(rtl){left:unset}}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host([slot=start]),:host([slot=end]){width:auto}:host(.in-item) ::slotted(ion-label){-ms-flex-item-align:center;align-self:center}.range-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}::slotted([slot=label]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}:host(.range-label-placement-start) .range-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.range-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-end) .range-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.range-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.range-label-placement-stacked) .range-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}:host(.range-label-placement-stacked) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.in-item.range-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.range-label-placement-stacked) .native-wrapper{margin-bottom:0px}: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, 0, 84, 233), 0.26);--bar-background-active:var(--ion-color-primary, #0054e9);--bar-border-radius:0;--height:42px;--pin-background:var(--ion-color-primary, #0054e9);--pin-color:var(--ion-color-primary-contrast, #fff)}::slotted(:not(ion-icon)[slot=start]),::slotted(:not(ion-icon)[slot=end]),.native-wrapper{font-size:0.75rem}:host(.range-item-start-adjustment){-webkit-padding-start:18px;padding-inline-start:18px}:host(.range-item-end-adjustment){-webkit-padding-end:18px;padding-inline-end:18px}: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-knob::before,: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]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-has-pin:not(.range-label-placement-stacked)){padding-top:1.75rem}:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper{margin-bottom:1.75rem}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-knob{-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease;z-index:2}.range-knob::before{border-radius:50%;position:absolute;width:var(--knob-size);height:var(--knob-size);-webkit-transform:scale(1);transform:scale(1);-webkit-transition:0.267s cubic-bezier(0, 0, 0.58, 1);transition:0.267s cubic-bezier(0, 0, 0.58, 1);background:var(--knob-background);content:"";opacity:0.13;pointer-events:none}.range-knob::before{inset-inline-start:0}.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%;-webkit-transform:translate3d(0,  0,  0) scale(0.01);transform:translate3d(0,  0,  0) scale(0.01);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:1.75rem;height:1.75rem;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color)}.range-pin::before{bottom:-1px;-webkit-margin-start:-13px;margin-inline-start:-13px;border-radius:50% 50% 50% 0;position:absolute;width:26px;height:26px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}.range-pin::before{inset-inline-start:50%}:host-context([dir=rtl]) .range-pin::before{left:unset}[dir=rtl] .range-pin::before{left:unset}@supports selector(:dir(rtl)){.range-pin::before:dir(rtl){left:unset}}.range-knob-pressed .range-pin,.range-knob-handle.ion-focused .range-pin{-webkit-transform:translate3d(0, calc(-100% + 4px), 0) scale(1);transform:translate3d(0, calc(-100% + 4px), 0) scale(1)}@media (any-hover: hover){.range-knob-handle:hover .range-knob:before{-webkit-transform:scale(2);transform:scale(2);opacity:0.13}}.range-knob-handle.ion-activated .range-knob:before,.range-knob-handle.ion-focused .range-knob:before,.range-knob-handle.range-knob-pressed .range-knob:before{-webkit-transform:scale(2);transform:scale(2)}.range-knob-handle.ion-focused .range-knob::before{opacity:0.13}.range-knob-handle.ion-activated .range-knob::before,.range-knob-handle.range-knob-pressed .range-knob::before{opacity:0.25}:host(:not(.range-has-pin)) .range-knob-pressed .range-knob,:host(:not(.range-has-pin)) .range-knob-handle.ion-focused .range-knob{-webkit-transform:scale(1);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, var(--ion-background-color-step-250, #bfbfbf))}:host(.range-disabled) .range-knob{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf))}:host(.range-disabled) .label-text-wrapper,:host(.range-disabled) ::slotted([slot=start]),:host(.range-disabled) ::slotted([slot=end]){opacity:0.38}'};export{x as ion_range}