@ionic/core 8.7.17-dev.11769628168.11eca7cd → 8.7.17-dev.11770147425.1bfcd5e5

package/hydrate/index.mjs

@@ -12869,6 +12869,7 @@ const datetimeMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-flow:colu
  * @slot buttons - The buttons in the datetime.
  * @slot time-label - The label for the time selector in the datetime.
  *
+ * @part wheel - The wheel container when using a wheel style layout, or in the month/year picker when using a grid style layout.
  * @part wheel-item - The individual items when using a wheel style layout, or in the
  * month/year picker when using a grid style layout.
  * @part wheel-item active - The currently selected wheel-item.
@@ -14044,7 +14045,7 @@ class Datetime {
         const todayString = workingParts.day !== null
             ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
             : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
-        return (hAsync("ion-picker-column", { "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
                 const { value } = ev.detail;
                 const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
@@ -14119,7 +14120,7 @@ class Datetime {
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
         const pickerColumnValue = (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined;
-        return (hAsync("ion-picker-column", { "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
                 ev.stopPropagation();
@@ -14131,7 +14132,7 @@ class Datetime {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column", { "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
                 ev.stopPropagation();
@@ -14143,7 +14144,7 @@ class Datetime {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column", { "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
                 ev.stopPropagation();
@@ -14176,7 +14177,7 @@ class Datetime {
         if (hoursData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column", { "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
                 ev.stopPropagation();
@@ -14187,7 +14188,7 @@ class Datetime {
         if (minutesData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column", { "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
                 ev.stopPropagation();
@@ -14200,7 +14201,7 @@ class Datetime {
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
-        return (hAsync("ion-picker-column", { "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
                 const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
                 this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
@@ -14542,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: 'efdbc0922670a841bc667ceac392cdc1dedffd01', "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,
@@ -14552,7 +14553,7 @@ class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, hAsync("div", { key: '3f8bb75fcb0baff55182ef3aa1b535eacc58d81f', 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 {
@@ -14624,6 +14625,7 @@ class Datetime {
 let datetimeIds = 0;
 const CANCEL_ROLE = 'datetime-cancel';
 const CONFIRM_ROLE = 'datetime-confirm';
+const WHEEL_PART = 'wheel';
 const WHEEL_ITEM_PART = 'wheel-item';
 const WHEEL_ITEM_ACTIVE_PART = `active`;
 
@@ -28713,13 +28715,29 @@ 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 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`.
+ * @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.
  */
 class Range {
     constructor(hostRef) {
@@ -28737,6 +28755,7 @@ class Range {
         this.inheritedAttributes = {};
         this.contentEl = null;
         this.initialContentScrollY = true;
+        this.focusFromPointer = false;
         this.ratioA = 0;
         this.ratioB = 0;
         /**
@@ -28868,6 +28887,7 @@ class Range {
         this.onBlur = () => {
             if (this.hasFocus) {
                 this.hasFocus = false;
+                this.focusedKnob = undefined;
                 this.ionBlur.emit();
             }
         };
@@ -28878,21 +28898,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
@@ -28904,18 +28923,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;
@@ -29169,7 +29188,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);
@@ -29196,9 +29214,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);
@@ -29215,14 +29247,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
      */
@@ -29240,7 +29264,7 @@ class Range {
     }
     renderRangeSlider() {
         var _a;
-        const { min, max, step, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
+        const { min, max, step, handleKeyboard, 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);
@@ -29300,7 +29324,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
@@ -29313,6 +29339,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),
@@ -29338,6 +29365,10 @@ class Range {
                 'has-ticks': ticks.length > 0,
             }, role: "presentation", style: barStyle, part: "bar-active" })), renderKnob(rtl, {
             knob: 'A',
+            position: this.dualKnobs ? (this.ratioA <= this.ratioB ? 'lower' : 'upper') : 'lower',
+            dualKnobs: this.dualKnobs,
+            focused: focusedKnob === 'A',
+            hovered: hoveredKnob === 'A',
             pressed: pressedKnob === 'A',
             value: this.valA,
             ratio: this.ratioA,
@@ -29350,9 +29381,15 @@ class Range {
             inheritedAttributes,
             onKnobFocus: this.onKnobFocus,
             onKnobBlur: this.onKnobBlur,
+            onKnobMouseEnter: this.onKnobMouseEnter,
+            onKnobMouseLeave: this.onKnobMouseLeave,
         }), this.dualKnobs &&
             renderKnob(rtl, {
                 knob: 'B',
+                position: this.ratioB <= this.ratioA ? 'lower' : 'upper',
+                dualKnobs: this.dualKnobs,
+                focused: focusedKnob === 'B',
+                hovered: hoveredKnob === 'B',
                 pressed: pressedKnob === 'B',
                 value: this.valB,
                 ratio: this.ratioB,
@@ -29365,6 +29402,8 @@ class Range {
                 inheritedAttributes,
                 onKnobFocus: this.onKnobFocus,
                 onKnobBlur: this.onKnobBlur,
+                onKnobMouseEnter: this.onKnobMouseEnter,
+                onKnobMouseLeave: this.onKnobMouseLeave,
             })));
     }
     render() {
@@ -29390,10 +29429,11 @@ 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: '4a393e229cf599f3377b606acaebe5f090d41f6e', 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-has-pin': pin,
                 [`range-label-placement-${labelPlacement}`]: true,
@@ -29401,10 +29441,10 @@ class Range {
                 '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: 'd7f45882aa7f11bbac1cb783caa0053151efcc70', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '537d3b1e7f9fed0c8380678551e31325b1ef1f85', 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: 'cb50f07a3704d04af3554211ffad35f7d9fcc450', class: "native-wrapper" }, hAsync("slot", { key: '09004eaa72688ca0f0536bd5f5d7160a23d16406', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: 'a94da21d2ea7ed2feafcc0651c72da21d6de1e57', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29442,6 +29482,8 @@ class Range {
             "labelPlacement": [1, "label-placement"],
             "ratioA": [32],
             "ratioB": [32],
+            "focusedKnob": [32],
+            "hoveredKnob": [32],
             "pressedKnob": [32]
         },
         "$listeners$": undefined,
@@ -29449,7 +29491,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, pressed, focused, hovered, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, onKnobMouseEnter, onKnobMouseLeave, }) => {
     const start = rtl ? 'right' : 'left';
     const knobStyle = () => {
         const style = {};
@@ -29470,16 +29512,50 @@ 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',
+        ]
+            .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',
+        ]
+            .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',
+        ]
+            .filter(Boolean)
+            .join(' ') })));
 };
 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.11769628168.11eca7cd",
+  "version": "8.7.17-dev.11770147425.1bfcd5e5",
   "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}