@ionic/core 8.5.5-dev.11744729748.174bf7e0 → 8.5.5-dev.11745934912.1dcd33ea

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

@@ -1,19 +1,21 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import caretDownRegular from "@phosphor-icons/core/assets/regular/caret-down.svg";
 import { Host, h, forceUpdate } from "@stencil/core";
 import { compareOptions, createNotchController, isOptionSelected } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
-import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
 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 { getIonMode } from "../../global/ionic-global";
+import { config } from "../../global/config";
+import { getIonTheme } from "../../global/ionic-global";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @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.
@@ -97,9 +99,10 @@ export class Select {
         this.selectedText = undefined;
         this.toggleIcon = undefined;
         this.expandedIcon = undefined;
+        this.required = false;
         this.shape = undefined;
+        this.size = undefined;
         this.value = undefined;
-        this.required = false;
     }
     styleChanged() {
         this.emitStyle();
@@ -244,11 +247,11 @@ export class Select {
     createOverlay(ev) {
         let selectInterface = this.interface;
         if (selectInterface === 'action-sheet' && this.multiple) {
-            printIonWarning(`[ion-select] - Interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`);
+            console.warn(`Select interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`);
             selectInterface = 'alert';
         }
         if (selectInterface === 'popover' && !ev) {
-            printIonWarning(`[ion-select] - Interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`);
+            console.warn(`Select interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`);
             selectInterface = 'alert';
         }
         if (selectInterface === 'action-sheet') {
@@ -364,8 +367,8 @@ export class Select {
     async openPopover(ev) {
         const { fill, labelPlacement } = this;
         const interfaceOptions = this.interfaceOptions;
-        const mode = getIonMode(this);
-        const showBackdrop = mode === 'md' ? false : true;
+        const theme = getIonTheme(this);
+        const showBackdrop = theme === 'md' ? false : true;
         const multiple = this.multiple;
         const value = this.value;
         let event = ev;
@@ -376,7 +379,7 @@ export class Select {
          * when using a fill in MD mode or if the
          * label is floating/stacked.
          */
-        if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
+        if (hasFloatingOrStackedLabel || (theme === 'md' && fill !== undefined)) {
             size = 'cover';
             /**
              * Otherwise the popover
@@ -389,7 +392,7 @@ export class Select {
                     ionShadowTarget: this.nativeWrapperEl,
                 } });
         }
-        const popoverOpts = Object.assign(Object.assign({ mode,
+        const popoverOpts = Object.assign(Object.assign({ theme,
             event, alignment: 'center', size,
             showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
                 header: interfaceOptions.header,
@@ -414,9 +417,9 @@ export class Select {
         return popoverController.create(popoverOpts);
     }
     async openActionSheet() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const interfaceOptions = this.interfaceOptions;
-        const actionSheetOpts = Object.assign(Object.assign({ mode }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
+        const actionSheetOpts = Object.assign(Object.assign({ theme }, interfaceOptions), { buttons: this.createActionSheetButtons(this.childOpts, this.value), cssClass: ['select-action-sheet', interfaceOptions.cssClass] });
         /**
          * Workaround for Stencil to autodefine
          * ion-action-sheet when
@@ -433,8 +436,8 @@ export class Select {
     async openAlert() {
         const interfaceOptions = this.interfaceOptions;
         const inputType = this.multiple ? 'checkbox' : 'radio';
-        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: [
+        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: [
                 {
                     text: this.cancelText,
                     role: 'cancel',
@@ -468,8 +471,8 @@ export class Select {
     }
     openModal() {
         const { multiple, value, interfaceOptions } = this;
-        const mode = getIonMode(this);
-        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
+        const theme = getIonTheme(this);
+        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode: theme, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
                 header: interfaceOptions.header,
                 multiple,
                 value,
@@ -542,6 +545,18 @@ 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: {
@@ -574,8 +589,8 @@ export class Select {
      * when fill="outline".
      */
     renderLabelContainer() {
-        const mode = getIonMode(this);
-        const hasOutlineFill = mode === 'md' && this.fill === 'outline';
+        const theme = getIonTheme(this);
+        const hasOutlineFill = theme === 'md' && this.fill === 'outline';
         if (hasOutlineFill) {
             /**
              * The outline fill has a special outline
@@ -624,15 +639,10 @@ export class Select {
      * next to the select text.
      */
     renderSelectIcon() {
-        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;
+        const { isExpanded, selectExpandedIcon, selectCollapsedIcon } = this;
+        let icon = selectCollapsedIcon;
+        if (isExpanded) {
+            icon = selectExpandedIcon;
         }
         return h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
     }
@@ -667,6 +677,63 @@ 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.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "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 { el, helperText, errorText, helperTextId, errorTextId } = this;
         if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
@@ -704,13 +771,17 @@ export class Select {
         return h("div", { class: "select-bottom" }, this.renderHintText());
     }
     render() {
-        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
-        const mode = getIonMode(this);
+        const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, name, value } = this;
+        const theme = getIonTheme(this);
+        const shape = this.getShape();
         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 shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const size = this.getSize();
+        const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         renderHiddenInput(true, el, name, parseValue(value), disabled);
@@ -732,8 +803,8 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '2314f2d2d02827e6728892311cd566dd91840956', onClick: this.onClick, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '56bf013506dc6b882b827ae5d848292cdebf92c8', onClick: this.onClick, class: createColorClasses(this.color, {
+                [theme]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
                 'select-disabled': disabled,
@@ -748,20 +819,33 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '533d0fa45a3f5a2836ae92f669901d99a54120c0', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'cf6bdd44f012b8ff5cbd04b23c839db708b1ce8c', class: "select-wrapper-inner" }, h("slot", { key: '68a58f8469acbfdd84c326034f9da3e2aba9b178', name: "start" }), h("div", { key: '216f4f68c1a799e61cef7c3291e7307dec005ca9', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '9de291427f968aa6557b926fba3d6cac9915d20c', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'e41efa0a5944a0972f87822cb9005087bedab846', class: "select-highlight" })), this.renderBottomContent()));
+                [`select-size-${size}`]: size !== undefined,
+            }) }, h("label", { key: 'cfb256dfe432ac23df006514e75142cbfb595620', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '7bba5aed0735f4237e4f4b8d08859cb9cfac7f9f', class: "select-wrapper-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: '3c5fa6ca8b44b8c03a5d9a574397245a66fc5eb2', class: "select-outline" }), h("slot", { key: 'c5625dd59673573f34654a173a97426375e9d9e4', name: "start" }), h("div", { key: '742a45ef81c5dd03484e2f2db872a78ab5ad3115', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: 'eb81bdc78e0d631b646c87c8fcd3d43958976bb3', name: "end" }), shouldRenderInnerIcon && this.renderSelectIcon()), shouldRenderOuterIcon && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '9bc84d872a6b4144c3fe0b1013ac7edfe3381c41', 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"]
+            "md": ["select.md.scss"],
+            "ionic": ["select.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select.ios.css"],
-            "md": ["select.md.css"]
+            "md": ["select.md.css"],
+            "ionic": ["select.ionic.css"]
         };
     }
     static get properties() {
@@ -860,7 +944,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 `md` mode."
+                    "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."
                 },
                 "attribute": "fill",
                 "reflect": false
@@ -1093,7 +1177,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode."
+                    "text": "The toggle icon to use. Defaults to `\"chevronExpand\"` for the `\"ios\"` theme,\nor `\"caretDownSharp\"` for the `\"md\"` and `\"ionic\"` themes."
                 },
                 "attribute": "toggle-icon",
                 "reflect": false
@@ -1110,62 +1194,79 @@ 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` mode 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\"` theme will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed."
                 },
                 "attribute": "expanded-icon",
                 "reflect": false
             },
+            "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."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "shape": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'round'",
-                    "resolved": "\"round\" | undefined",
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The shape of the select. If \"round\" it will have an increased border radius."
+                    "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."
                 },
                 "attribute": "shape",
                 "reflect": false
             },
-            "value": {
-                "type": "any",
-                "mutable": true,
+            "size": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "any | null",
-                    "resolved": "any",
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the select."
+                    "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."
                 },
-                "attribute": "value",
+                "attribute": "size",
                 "reflect": false
             },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
+            "value": {
+                "type": "any",
+                "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "any | null",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "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."
+                    "text": "The value of the select."
                 },
-                "attribute": "required",
-                "reflect": false,
-                "defaultValue": "false"
+                "attribute": "value",
+                "reflect": false
             }
         };
     }