@ionic/core 8.7.17-dev.11770147425.1bfcd5e5 → 8.7.17-dev.11770405784.157a3c10

package/hydrate/index.js

@@ -28717,29 +28717,13 @@ 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 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.
+ * @part label - The label text describing the range.
  */
 class Range {
     constructor(hostRef) {
@@ -28757,7 +28741,6 @@ class Range {
         this.inheritedAttributes = {};
         this.contentEl = null;
         this.initialContentScrollY = true;
-        this.focusFromPointer = false;
         this.ratioA = 0;
         this.ratioB = 0;
         /**
@@ -28889,7 +28872,6 @@ class Range {
         this.onBlur = () => {
             if (this.hasFocus) {
                 this.hasFocus = false;
-                this.focusedKnob = undefined;
                 this.ionBlur.emit();
             }
         };
@@ -28900,20 +28882,21 @@ 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
@@ -28925,18 +28908,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;
@@ -29190,6 +29173,7 @@ 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);
@@ -29216,23 +29200,9 @@ 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) {
-            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;
-            }
+            this.ratioA = valueToRatio(value.lower, min, max);
+            this.ratioB = valueToRatio(value.upper, min, max);
         }
         else {
             this.ratioA = valueToRatio(value, min, max);
@@ -29249,6 +29219,14 @@ 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
      */
@@ -29266,7 +29244,7 @@ class Range {
     }
     renderRangeSlider() {
         var _a;
-        const { min, max, step, handleKeyboard, focusedKnob, hoveredKnob, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
+        const { min, max, step, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
         let barStart = `${ratioLower * 100}%`;
         let barEnd = `${100 - ratioUpper * 100}%`;
         const rtl = isRTL$1(this.el);
@@ -29326,9 +29304,7 @@ class Range {
                 ticks.push(tick);
             }
         }
-        return (hAsync("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl), onPointerDown: () => {
-                this.focusFromPointer = true;
-            },
+        return (hAsync("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl),
             /**
              * Since the gesture has a threshold, the value
              * won't change until the user has dragged past
@@ -29341,7 +29317,6 @@ 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),
@@ -29367,10 +29342,6 @@ 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,
@@ -29383,15 +29354,9 @@ 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,
@@ -29404,8 +29369,6 @@ class Range {
                 inheritedAttributes,
                 onKnobFocus: this.onKnobFocus,
                 onKnobBlur: this.onKnobBlur,
-                onKnobMouseEnter: this.onKnobMouseEnter,
-                onKnobMouseLeave: this.onKnobMouseLeave,
             })));
     }
     render() {
@@ -29431,11 +29394,10 @@ 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: '4a393e229cf599f3377b606acaebe5f090d41f6e', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'ed646a42d51b8fe22012198c354cbcf5a389c108', 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,
@@ -29443,10 +29405,10 @@ class Range {
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, hAsync("label", { key: 'd7f45882aa7f11bbac1cb783caa0053151efcc70', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '537d3b1e7f9fed0c8380678551e31325b1ef1f85', class: {
+            }) }, hAsync("label", { key: '3083e4f2a624e3b268396acb4415f7c6ac44d851', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '47b92f94d2a0381dd7c5cd3dda54ed2942096715', 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: 'cb50f07a3704d04af3554211ffad35f7d9fcc450', class: "native-wrapper" }, hAsync("slot", { key: '09004eaa72688ca0f0536bd5f5d7160a23d16406', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: 'a94da21d2ea7ed2feafcc0651c72da21d6de1e57', name: "end" })))));
+            }, 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" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29484,8 +29446,6 @@ class Range {
             "labelPlacement": [1, "label-placement"],
             "ratioA": [32],
             "ratioB": [32],
-            "focusedKnob": [32],
-            "hoveredKnob": [32],
             "pressedKnob": [32]
         },
         "$listeners$": undefined,
@@ -29493,7 +29453,7 @@ class Range {
         "$attrsToReflect$": [["color", "color"]]
     }; }
 }
-const renderKnob = (rtl, { knob, position, dualKnobs, value, ratio, min, max, disabled, pressed, focused, hovered, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, onKnobMouseEnter, onKnobMouseLeave, }) => {
+const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes, onKnobFocus, onKnobBlur, }) => {
     const start = rtl ? 'right' : 'left';
     const knobStyle = () => {
         const style = {};
@@ -29514,50 +29474,16 @@ const renderKnob = (rtl, { knob, position, dualKnobs, value, ratio, min, max, di
                 ev.preventDefault();
                 ev.stopPropagation();
             }
-        }, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, onMouseEnter: () => onKnobMouseEnter(knob), onMouseLeave: onKnobMouseLeave, class: {
+        }, onFocus: () => onKnobFocus(knob), onBlur: onKnobBlur, class: {
             'range-knob-handle': true,
-            'range-knob-handle-a': knob === 'A',
-            'range-knob-handle-b': knob === 'B',
+            'range-knob-a': knob === 'A',
+            'range-knob-b': knob === 'B',
             'range-knob-pressed': pressed,
             'range-knob-min': value === min,
             'range-knob-max': value === max,
             'ion-activatable': true,
             'ion-focusable': true,
-            '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(' ') })));
+        }, 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" })));
 };
 const ratioToValue = (ratio, min, max, step) => {
     let value = (max - min) * ratio;
@@ -33558,9 +33484,9 @@ class SegmentContent {
     }; }
 }
 
-const segmentViewIosCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
+const segmentViewIosCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled),:host(.segment-view-swipe-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
 
-const segmentViewMdCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
+const segmentViewMdCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled),:host(.segment-view-swipe-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
 
 class SegmentView {
     constructor(hostRef) {
@@ -33572,6 +33498,10 @@ class SegmentView {
          * If `true`, the segment view cannot be interacted with.
          */
         this.disabled = false;
+        /**
+         * If `true`, users will be able to swipe the segment view to navigate between segment contents.
+         */
+        this.swipeGesture = true;
     }
     handleScroll(ev) {
         var _a;
@@ -33659,11 +33589,12 @@ class SegmentView {
         return Array.from(this.el.querySelectorAll('ion-segment-content'));
     }
     render() {
-        const { disabled, isManualScroll } = this;
-        return (hAsync(Host, { key: 'e180b67bb3143a5f4611fb358c037be6fc782a8f', class: {
+        const { disabled, isManualScroll, swipeGesture } = this;
+        return (hAsync(Host, { key: '565cccce7f0cfc4c71508777cc60292d6f24334f', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
-            } }, hAsync("slot", { key: '41c11d6a7406a10f5c64a2e73abfc072afd8fc73' })));
+                'segment-view-swipe-disabled': swipeGesture === false,
+            } }, hAsync("slot", { key: '4118c240364467302b8f593e33c37837ea5d06f0' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -33675,6 +33606,7 @@ class SegmentView {
         "$tagName$": "ion-segment-view",
         "$members$": {
             "disabled": [4],
+            "swipeGesture": [4, "swipe-gesture"],
             "isManualScroll": [32],
             "setContent": [64]
         },
@@ -34181,6 +34113,7 @@ class Select {
         const mode = getIonMode$1(this);
         const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
                 header: interfaceOptions.header,
+                cancelText: this.cancelText,
                 multiple,
                 value,
                 options: this.createOverlaySelectOptions(this.childOpts, value),
@@ -34430,7 +34363,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: 'd8026835993d0e6dce747098f741a06ae4e4f54d', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'b7fa907f8fbc54fd63e2d07a9bb5156d94fd5057', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -34448,7 +34381,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: 'fcfb40209d6d07d49c7fdca4884b31abf6ac2567', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'f191664f2290c3890bde1156157c83a6ff17dbe2', class: "select-wrapper-inner" }, hAsync("slot", { key: '317a28d1115b4214f291e228ce0fe6fc782e57d5', name: "start" }), hAsync("div", { key: 'db68e18abd5ca3a1023d7c7b58bf89893ae18073', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '4274e042267c2234a198b0f65c89477898d08130', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '2e2eb1ee2b2791e0683d9afb186fde6e938ca59c', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: '11137e6a8b0374e93923ddb5a4629972ded5f43c', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '99e3c09b5e6c2e7be493ed5834f991fffe45cfff', class: "select-wrapper-inner" }, hAsync("slot", { key: '740f0e5a913cb0209d5acae31c33a6ed8f672dfc', name: "start" }), hAsync("div", { key: 'b20e33c8b60915a5194948fcf8e22d7789f0b050', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '0199f338185d5fa2cdd977bb20516746bd9ddad5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '3b54de893cc8fc66df8588cee22e30d6f10850b3', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34543,6 +34476,10 @@ const selectModalMdCss = ".sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-
 class SelectModal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * The text to display on the cancel button.
+         */
+        this.cancelText = 'Close';
         this.options = [];
     }
     closeModal() {
@@ -34609,7 +34546,7 @@ class SelectModal {
             } }, option.text))));
     }
     render() {
-        return (hAsync(Host, { key: 'b6c0dec240b2e41985b15fdf4e5a6d3a145c1567', class: getIonMode$1(this) }, hAsync("ion-header", { key: 'cd177e85ee0f62a60a3a708342d6ab6eb19a44dc' }, hAsync("ion-toolbar", { key: 'aee8222a5a4daa540ad202b2e4cac1ef93d9558c' }, this.header !== undefined && hAsync("ion-title", { key: '5f8fecc764d97bf840d3d4cfddeeccd118ab4436' }, this.header), hAsync("ion-buttons", { key: '919033950d7c2b0101f96a9c9698219de9f568ea', slot: "end" }, hAsync("ion-button", { key: '34b571cab6dced4bde555a077a21e91800829931', onClick: () => this.closeModal() }, "Close")))), hAsync("ion-content", { key: '3c9153d26ba7a5a03d3b20fcd628d0c3031661a7' }, hAsync("ion-list", { key: 'e00b222c071bc97c82ad1bba4db95a8a5c43ed6d' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (hAsync(Host, { key: '59ba79ffdbb69befe8e13745450c1071a1fe8c6c', class: getIonMode$1(this) }, hAsync("ion-header", { key: 'fa4d08ee43eec4b9add09d9ffabcba9ed13dd4af' }, hAsync("ion-toolbar", { key: 'b5e26cf092297c51c1dba3ce7963e7b03420393b' }, this.header !== undefined && hAsync("ion-title", { key: 'a8a93cdea4d119d3a17d8cef3878b8a1daa86e26' }, this.header), hAsync("ion-buttons", { key: 'bbc656713b41ef09099ed466f93a9cfbdaceecc1', slot: "end" }, hAsync("ion-button", { key: '80b8751fe4c96e06b620a0b9d17b2d9b3da2faa5', onClick: () => this.closeModal() }, this.cancelText)))), hAsync("ion-content", { key: 'a251fc00ae4cc7e6b3abe13caa10d95bb515558e' }, hAsync("ion-list", { key: 'bcaf38d6d91accfabb4a9d26783bc0e4801abe3c' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -34622,6 +34559,7 @@ class SelectModal {
         "$tagName$": "ion-select-modal",
         "$members$": {
             "header": [1],
+            "cancelText": [1, "cancel-text"],
             "multiple": [4],
             "options": [16]
         },