@ionic/core 8.8.3-dev.11774545677.151db026 → 8.8.3-dev.11774956231.12ab3ff2

package/dist/collection/components/select/select.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import caretDownRegular from "@phosphor-icons/core/assets/regular/caret-down.svg";
 import { Build, Host, h, forceUpdate } from "@stencil/core";
 import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
@@ -11,12 +10,10 @@ import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { watchForOptions } from "../../utils/watch-options";
 import { caretDownSharp, chevronExpand } from "ionicons/icons";
-import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML.
  * @slot start - Content to display at the leading edge of the select.
@@ -471,8 +468,8 @@ export class Select {
     async openPopover(ev) {
         const { fill, labelPlacement } = this;
         const interfaceOptions = this.interfaceOptions;
-        const theme = getIonTheme(this);
-        const showBackdrop = theme === 'md' ? false : true;
+        const mode = getIonMode(this);
+        const showBackdrop = mode === 'md' ? false : true;
         const multiple = this.multiple;
         const value = this.value;
         let event = ev;
@@ -483,7 +480,7 @@ export class Select {
          * when using a fill in MD mode or if the
          * label is floating/stacked.
          */
-        if (hasFloatingOrStackedLabel || (theme === 'md' && fill !== undefined)) {
+        if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
             size = 'cover';
             /**
              * Otherwise the popover
@@ -496,7 +493,7 @@ export class Select {
                     ionShadowTarget: this.nativeWrapperEl,
                 } });
         }
-        const popoverOpts = Object.assign(Object.assign({ theme,
+        const popoverOpts = Object.assign(Object.assign({ mode,
             event, alignment: 'center', size,
             showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
                 header: interfaceOptions.header,
@@ -521,9 +518,9 @@ export class Select {
         return popoverController.create(popoverOpts);
     }
     async openActionSheet() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const interfaceOptions = this.interfaceOptions;
-        const actionSheetOpts = Object.assign(Object.assign({ theme }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
+        const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
         /**
          * Workaround for Stencil to autodefine
          * ion-action-sheet when
@@ -540,8 +537,8 @@ export class Select {
     async openAlert() {
         const interfaceOptions = this.interfaceOptions;
         const inputType = this.multiple ? 'checkbox' : 'radio';
-        const theme = getIonTheme(this);
-        const alertOpts = Object.assign(Object.assign({ theme }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
+        const mode = getIonMode(this);
+        const alertOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { header: interfaceOptions.header ? interfaceOptions.header : this.labelText, inputs: this.createAlertInputs(this.childOpts, inputType, this.value), buttons: [
                 {
                     text: this.cancelText,
                     role: 'cancel',
@@ -575,8 +572,8 @@ export class Select {
     }
     openModal() {
         const { multiple, value, interfaceOptions } = this;
-        const theme = getIonTheme(this);
-        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode: theme, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
+        const mode = getIonMode(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,
@@ -650,18 +647,6 @@ export class Select {
         };
         this.ionStyle.emit(style);
     }
-    getSize() {
-        const theme = getIonTheme(this);
-        const { size } = this;
-        // TODO(ROU-11370): Remove theme check when sizes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (size === undefined) {
-            return 'medium';
-        }
-        return size;
-    }
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
@@ -694,8 +679,8 @@ export class Select {
      * when fill="outline".
      */
     renderLabelContainer() {
-        const theme = getIonTheme(this);
-        const hasOutlineFill = theme === 'md' && this.fill === 'outline';
+        const mode = getIonMode(this);
+        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
         if (hasOutlineFill) {
             /**
              * The outline fill has a special outline
@@ -744,10 +729,15 @@ export class Select {
      * next to the select text.
      */
     renderSelectIcon() {
-        const { isExpanded, selectExpandedIcon, selectCollapsedIcon } = this;
-        let icon = selectCollapsedIcon;
-        if (isExpanded) {
-            icon = selectExpandedIcon;
+        const mode = getIonMode(this);
+        const { isExpanded, toggleIcon, expandedIcon } = this;
+        let icon;
+        if (isExpanded && expandedIcon !== undefined) {
+            icon = expandedIcon;
+        }
+        else {
+            const defaultIcon = mode === 'ios' ? chevronExpand : caretDownSharp;
+            icon = toggleIcon !== null && toggleIcon !== void 0 ? toggleIcon : defaultIcon;
         }
         return h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
     }
@@ -782,63 +772,6 @@ export class Select {
         const { disabled, inputId, isExpanded, required } = this;
         return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        // TODO(ROU-11366): Remove theme check when shapes are defined for all themes.
-        if (theme === 'ionic' && shape === undefined) {
-            return 'round';
-        }
-        return shape;
-    }
-    /**
-     * Get the icon to use for the expand icon.
-     * If an icon is set on the component, use that.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get selectExpandedIcon() {
-        // Return the expandedIcon or toggleIcon if either is explicitly set
-        if (this.expandedIcon != null) {
-            return this.expandedIcon;
-        }
-        else if (this.toggleIcon != null) {
-            return this.toggleIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronExpand,
-            ionic: caretDownRegular,
-            md: caretDownSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured select expanded icon or the default icon
-        return config.get('selectExpandedIcon', defaultIcon);
-    }
-    /**
-     * Get the icon to use for the collapsed icon.
-     * If an icon is set on the component, use that.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     */
-    get selectCollapsedIcon() {
-        // Return the toggleIcon if it is explicitly set
-        if (this.toggleIcon) {
-            return this.toggleIcon;
-        }
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: chevronExpand,
-            ionic: caretDownRegular,
-            md: caretDownSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        return config.get('selectCollapsedIcon', defaultIcon);
-    }
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         if (isInvalid && errorText) {
@@ -876,17 +809,13 @@ export class Select {
         return (h("div", { class: "select-bottom", part: "bottom" }, this.renderHintText()));
     }
     render() {
-        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, name, value, hasFocus, } = this;
-        const theme = getIonTheme(this);
-        const shape = this.getShape();
+        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value, hasFocus, } = this;
+        const mode = getIonMode(this);
         const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
-        const shouldRenderOuterIcon = theme !== 'ionic' && hasFloatingOrStackedLabel;
-        const shouldRenderInnerIcon = theme === 'ionic' || !hasFloatingOrStackedLabel;
         const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined;
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const inItem = hostContext('ion-item', this.el);
-        const size = this.getSize();
-        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
+        const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         renderHiddenInput(true, el, name, parseValue(value), disabled);
@@ -908,8 +837,8 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '663520f7e688836f89101008efd49f38cc5e4aed', onClick: this.onClick, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: '5f4ee901b65554eacc9fa52230d06b1a5ff1247c', onClick: this.onClick, class: createColorClasses(this.color, {
+                [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
                 'select-disabled': disabled,
@@ -926,33 +855,20 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-                [`select-size-${size}`]: size !== undefined,
-            }) }, h("label", { key: '17c2602b8e33017cbb898a332f9960482ac72c84', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '00b4887a9f5c6137b2c817e69e77498b3502051d', class: "select-wrapper-inner", part: "inner" }, 
-        /**
-         * For the ionic theme, we render the outline container here
-         * instead of higher up, so it can be positioned relative to
-         * the native wrapper instead of the <label> element or the
-         * entire component. This allows the label text to be positioned
-         * above the outline, while staying within the bounds of the
-         * <label> element, ensuring that clicking the label text
-         * focuses the select.
-         */
-        theme === 'ionic' && fill === 'outline' && h("div", { key: 'd4916d84ec0d92888139b84be64cd766150e1d83', class: "select-outline" }), h("slot", { key: 'ad9ca19118b0a4cad5995f1010bf8dc9b6c1d4d3', name: "start" }), h("div", { key: '7f36c316973409d237a135ee191bb0f39174e47c', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0a23c1be8afefa31cf7161dd7470decf30603ce0', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '0c455c157c0fb6f43f3f030758f5c583f13fceda', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'd56d89b5b58da2b5eaebada9d1be58ca45c67806', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: 'bc8bf089c693781ad5b3a5db76a12223867d748e', class: "select-wrapper-inner", part: "inner" }, h("slot", { key: 'e1c12b96f1573eb192608c458ed1f3463174cd89', name: "start" }), h("div", { key: '6ee5e3900d8e462f175649b502ac6faa2f2b9909', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'faeaea34aad412e1458beab95d4b1b9ca7b87c41', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'aeff51e51c990844869eff9940575ce6b2223135', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["select.ios.scss"],
-            "md": ["select.md.scss"],
-            "ionic": ["select.ionic.scss"]
+            "md": ["select.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select.ios.css"],
-            "md": ["select.md.css"],
-            "ionic": ["select.ionic.css"]
+            "md": ["select.md.css"]
         };
     }
     static get properties() {
@@ -1061,7 +977,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in the `\"md\"` theme."
+                    "text": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode."
                 },
                 "getter": false,
                 "setter": false,
@@ -1321,7 +1237,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The toggle icon to use. Defaults to `\"chevronExpand\"` for the `\"ios\"` theme,\nor `\"caretDownSharp\"` for the `\"md\"` and `\"ionic\"` themes."
+                    "text": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode."
                 },
                 "getter": false,
                 "setter": false,
@@ -1340,89 +1256,70 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `\"md\"` theme will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed."
+                    "text": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "expanded-icon"
             },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "false"
-            },
             "shape": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'soft' | 'round' | 'rectangular'",
-                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "original": "'round'",
+                    "resolved": "\"round\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `\"soft\"` for a select with slightly rounded corners,\n`\"round\"` for a select with fully rounded corners,\nor `\"rectangular\"` for a select without rounded corners.\n\nDefaults to `\"round\"` for the `\"ionic\"` theme, undefined for all other themes."
+                    "text": "The shape of the select. If \"round\" it will have an increased border radius."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "shape"
             },
-            "size": {
-                "type": "string",
-                "mutable": false,
+            "value": {
+                "type": "any",
+                "mutable": true,
                 "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+                    "original": "any | null",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the select. If \"large\" it will increase the height of the select, while\n\"small\" and \"medium\" provide progressively smaller heights.\n\nDefaults to `\"medium\"` for the ionic theme, and  undefined for all other themes."
+                    "text": "The value of the select."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "size"
+                "attribute": "value"
             },
-            "value": {
-                "type": "any",
-                "mutable": true,
+            "required": {
+                "type": "boolean",
+                "mutable": false,
                 "complexType": {
-                    "original": "any | null",
-                    "resolved": "any",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the select."
+                    "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "required",
+                "defaultValue": "false"
             }
         };
     }