@ionic/core 8.8.14-dev.11783984044.10eaba06 → 8.8.14-dev.11784037956.17449639

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

@@ -2,17 +2,14 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, h, forceUpdate } from "@stencil/core";
-import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { compareOptions, createNotchController, isOptionSelected, checkInvalidState } 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 { reflectPropertiesToAttributes, sanitizeDOMTree } from "../../utils/sanitization/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 { getIonMode } from "../../global/ionic-global";
 // TODO(FW-2832): types
 /**
@@ -40,7 +37,6 @@ export class Select {
         this.helperTextId = `${this.inputId}-helper-text`;
         this.errorTextId = `${this.inputId}-error-text`;
         this.inheritedAttributes = {};
-        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
         this.isExpanded = false;
         /**
          * The `hasFocus` state ensures the focus class is
@@ -166,40 +162,9 @@ export class Select {
         this.emitStyle();
     }
     setValue(value) {
-        if (this.isValueEqual(this.value, value)) {
-            return;
-        }
         this.value = value;
         this.ionChange.emit({ value });
     }
-    isValueEqual(currentValue, newValue) {
-        if (this.multiple) {
-            const currentArr = Array.isArray(currentValue) ? currentValue : [];
-            const newArr = Array.isArray(newValue) ? newValue : [];
-            if (currentArr.length !== newArr.length) {
-                return false;
-            }
-            // Multiset compare: each new value must match a distinct current value.
-            // A plain `every(isOptionSelected)` would accept ['a','a'] as equal to
-            // ['a','b'] when both 'a' and 'b' map to options whose values overlap.
-            const remaining = currentArr.slice();
-            return newArr.every((val) => {
-                const idx = remaining.findIndex((c) => compareOptions(c, val, this.compareWith));
-                if (idx === -1) {
-                    return false;
-                }
-                remaining.splice(idx, 1);
-                return true;
-            });
-        }
-        if (currentValue == null && newValue == null) {
-            return true;
-        }
-        if (currentValue == null || newValue == null) {
-            return false;
-        }
-        return compareOptions(currentValue, newValue, this.compareWith);
-    }
     async connectedCallback() {
         const { el } = this;
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
@@ -434,11 +399,10 @@ export class Select {
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
             const isSelected = isOptionSelected(selectValue, value, this.compareWith);
-            const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
             return {
-                text: content !== null && content !== void 0 ? content : '',
+                role: isSelected ? 'selected' : '',
+                text: option.textContent,
                 cssClass: optClass,
-                disabled: option.disabled,
                 handler: () => {
                     this.setValue(value);
                 },
@@ -446,9 +410,6 @@ export class Select {
                     'aria-checked': isSelected ? 'true' : 'false',
                     role: 'radio',
                 },
-                startContent,
-                endContent,
-                description: option.description,
             };
         });
         // Add "cancel" button
@@ -469,19 +430,13 @@ export class Select {
                 .filter((cls) => cls !== 'hydrated')
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
-            const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
             return {
                 type: inputType,
                 cssClass: optClass,
-                label: content !== null && content !== void 0 ? content : '',
+                label: option.textContent || '',
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
                 disabled: option.disabled,
-                startContent,
-                endContent,
-                description: option.description,
-                labelPlacement: option.labelPlacement,
-                justify: option.justify,
             };
         });
         return alertInputs;
@@ -494,9 +449,8 @@ export class Select {
                 .filter((cls) => cls !== 'hydrated')
                 .join(' ');
             const optClass = `${OPTION_CLASS} ${copyClasses}`;
-            const { content, startContent, endContent } = extractOptionContent(option, this.customHTMLEnabled);
             return {
-                text: content !== null && content !== void 0 ? content : '',
+                text: option.textContent || '',
                 cssClass: optClass,
                 value,
                 checked: isOptionSelected(selectValue, value, this.compareWith),
@@ -507,11 +461,6 @@ export class Select {
                         this.close();
                     }
                 },
-                startContent,
-                endContent,
-                description: option.description,
-                labelPlacement: option.labelPlacement,
-                justify: option.justify,
             };
         });
         return popoverOptions;
@@ -544,21 +493,15 @@ export class Select {
                     ionShadowTarget: this.nativeWrapperEl,
                 } });
         }
-        const options = this.createOverlaySelectOptions(this.childOpts, value);
-        const hasRichContent = options.some((opt) => opt.startContent || opt.endContent || opt.description);
         const popoverOpts = Object.assign(Object.assign({ mode,
             event, alignment: 'center', size,
-            showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: [
-                'select-popover',
-                hasRichContent ? 'select-popover-rich-content' : undefined,
-                interfaceOptions.cssClass,
-            ], componentProps: {
+            showBackdrop }, interfaceOptions), { component: 'ion-select-popover', cssClass: ['select-popover', interfaceOptions.cssClass], componentProps: {
                 header: interfaceOptions.header,
                 subHeader: interfaceOptions.subHeader,
                 message: interfaceOptions.message,
                 multiple,
                 value,
-                options,
+                options: this.createOverlaySelectOptions(this.childOpts, value),
             } });
         /**
          * Workaround for Stencil to autodefine
@@ -685,18 +628,12 @@ export class Select {
         }
         return;
     }
-    /**
-     * Returns the text to display in the select based on the selected value.
-     *
-     * @param useHTML If `true`, the returned text will include any custom HTML content from the selected option. If `false`, the returned text will be plain text without any HTML. Defaults to `false`.
-     * @returns The text to display in the select, either with or without HTML based on the `useHTML` parameter.
-     */
-    getText(useHTML = false) {
+    getText() {
         const selectedText = this.selectedText;
         if (selectedText != null && selectedText !== '') {
             return selectedText;
         }
-        return generateText(this.childOpts, this.value, this.compareWith, useHTML);
+        return generateText(this.childOpts, this.value, this.compareWith);
     }
     setFocus() {
         if (this.focusEl) {
@@ -766,47 +703,6 @@ export class Select {
          */
         return this.renderLabel();
     }
-    /**
-     * Wraps text nodes in the select text with span elements
-     * so spacing can be added between elements without
-     * changing the display to prevent losing the ellipses
-     * behavior.
-     *
-     * Only wraps when the string contains HTML elements
-     * alongside text.
-     */
-    wrapSelectTextNodes(html) {
-        const temp = document.createElement('div');
-        temp.innerHTML = html;
-        const hasElements = Array.from(temp.childNodes).some((n) => n.nodeType === Node.ELEMENT_NODE);
-        // Return the plain text
-        if (!hasElements) {
-            return html;
-        }
-        Array.from(temp.childNodes).forEach((node) => {
-            var _a, _b, _c, _d;
-            if (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
-                const text = node.textContent;
-                /**
-                 * Split comma separator from the text content
-                 * e.g., ", Bacon" becomes ", " text node + <span>Bacon</span>.
-                 */
-                const commaMatch = text.match(/^(,\s*)(.*)/);
-                if (commaMatch) {
-                    const commaNode = document.createTextNode(commaMatch[1]);
-                    const wrapper = document.createElement('span');
-                    wrapper.textContent = commaMatch[2];
-                    (_b = node.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(wrapper, node);
-                    (_c = wrapper.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(commaNode, wrapper);
-                    return;
-                }
-                const wrapper = document.createElement('span');
-                (_d = node.parentNode) === null || _d === void 0 ? void 0 : _d.replaceChild(wrapper, node);
-                wrapper.appendChild(node);
-            }
-        });
-        return temp.innerHTML;
-    }
     /**
      * Renders either the placeholder
      * or the selected values based on
@@ -814,7 +710,7 @@ export class Select {
      */
     renderSelectText() {
         const { placeholder } = this;
-        const displayValue = this.getText(true);
+        const displayValue = this.getText();
         let addPlaceholderClass = false;
         let selectText = displayValue;
         if (selectText === '' && placeholder !== undefined) {
@@ -826,10 +722,6 @@ export class Select {
             'select-placeholder': addPlaceholderClass,
         };
         const textPart = addPlaceholderClass ? 'placeholder' : 'text';
-        if (this.customHTMLEnabled) {
-            const wrapped = this.wrapSelectTextNodes(selectText);
-            return h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart, innerHTML: wrapped });
-        }
         return (h("div", { "aria-hidden": "true", class: selectTextClasses, part: textPart }, selectText));
     }
     /**
@@ -852,7 +744,6 @@ export class Select {
     get ariaLabel() {
         var _a;
         const { placeholder, inheritedAttributes } = this;
-        // Get the plain text from the selected text
         const displayValue = this.getText();
         // The aria label should be preferred over visible text if both are specified
         const definedLabel = (_a = inheritedAttributes['aria-label']) !== null && _a !== void 0 ? _a : this.labelText;
@@ -946,7 +837,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: 'a3036d51e0db13332641e9523264ddd1ab031912', onClick: this.onClick, class: createColorClasses(this.color, {
+        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),
@@ -964,7 +855,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '58b77f683499b958840721bdb59a9bf822c7f218', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), h("div", { key: '9e68d96524c1b87d6cb1bdce79fa86f2022be04a', class: "select-wrapper-inner", part: "inner" }, h("slot", { key: 'c9bcc5d684d2cefadff6ad3ec91498d5b405afc5', name: "start" }), h("div", { key: '5405bc15ffb3437ca00c64fbbc83d8eb2631c4ea', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '95e2f041c8517afb1cc6bddb2c3c38cf41f2376e', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'f3d2410f678ea22a107121aea1bbda197a618ed6', 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"; }
@@ -1624,223 +1515,25 @@ const parseValue = (value) => {
     }
     return value.toString();
 };
-const generateText = (opts, value, compareWith, useHTML = false) => {
+const generateText = (opts, value, compareWith) => {
     if (value === undefined) {
         return '';
     }
     if (Array.isArray(value)) {
         return value
-            .map((v) => textForValue(opts, v, compareWith, useHTML))
+            .map((v) => textForValue(opts, v, compareWith))
             .filter((opt) => opt !== null)
             .join(', ');
     }
     else {
-        return textForValue(opts, value, compareWith, useHTML) || '';
+        return textForValue(opts, value, compareWith) || '';
     }
 };
-/**
- * Returns the display text for a given value from the list of options.
- * When `useHTML` is true, returns sanitized HTML for the select text.
- * When `useHTML` is false, returns plain text for aria-label and other
- * text-only contexts.
- *
- * @param opts - The list of ion-select-option elements.
- * @param value - The value to find the matching option for.
- * @param compareWith - Custom comparison function or property name.
- * @param useHTML - If true, returns HTML string. If false, returns plain text.
- */
-const textForValue = (opts, value, compareWith, useHTML = false) => {
+const textForValue = (opts, value, compareWith) => {
     const selectOpt = opts.find((opt) => {
         return compareOptions(value, getOptionValue(opt), compareWith);
     });
-    const customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-    if (!selectOpt) {
-        return null;
-    }
-    // Return sanitized HTML for the select text
-    if (customHTMLEnabled && useHTML) {
-        return getOptionContent(selectOpt, undefined, true);
-    }
-    /**
-     * When custom HTML is enabled, extract only the default slot content.
-     * This ensures aria-label and other text-only contexts read only
-     * the relevant option text.
-     */
-    if (customHTMLEnabled) {
-        const content = getOptionContent(selectOpt);
-        if (typeof content === 'string') {
-            return content;
-        }
-        /**
-         * Elements were found in the default slot, extract and concatenate
-         * their text content while trimming whitespace.
-         */
-        if (content) {
-            const texts = Array.from(content.childNodes)
-                .map((n) => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
-                .filter((t) => t);
-            return texts.join(' ') || null;
-        }
-        // Empty option
-        return null;
-    }
-    return getDefaultSlotPlainText(selectOpt);
-};
-/**
- * Trims whitespace from all text nodes within a DOM tree.
- * This prevents invisible layout shifts and unwanted gaps between
- * elements when HTML content is injected via innerHTML or cloneNode,
- * as browsers preserve whitespace (tabs, newlines, spaces) from
- * the original source markup.
- *
- * @param node The root node to start trimming text nodes from.
- */
-const trimTextNodes = (node) => {
-    node.childNodes.forEach((child) => {
-        var _a;
-        if (child.nodeType === Node.TEXT_NODE) {
-            child.textContent = ((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
-        }
-        else if (child.nodeType === Node.ELEMENT_NODE) {
-            trimTextNodes(child);
-        }
-    });
-};
-/**
- * Extracts and clones content from an `ion-select-option` element
- * for rendering within overlay interfaces or the select text when `customHTMLEnabled` is `true`.
- *
- * @param option - The `ion-select-option` element to extract content from.
- * @param slotName - Optional slot name to extract. If omitted, extracts the default slot content.
- * @param useHTML - If `true`, the returned string will include any custom HTML content. If `false`, the returned string will be plain text without any HTML.
- * @returns When `useHTML` is `true`, a sanitized HTML string. When `false`, a
- * div element containing cloned child nodes. Returns `null` if no matching
- * content is found.
- */
-const getOptionContent = (option, slotName, useHTML = false) => {
-    let nodes;
-    if (slotName) {
-        // Named slot: get elements with matching slot attribute
-        nodes = Array.from(option.children).filter((el) => el.getAttribute('slot') === slotName);
-    }
-    else {
-        // Default slot: get nodes without a slot attribute
-        const defaultSlot = getOptionDefaultSlot(option) || [];
-        nodes = defaultSlot.filter((node) => {
-            var _a;
-            /**
-             * Exclude whitespace-only text nodes (newline noise between
-             * markup elements). Element nodes are always kept, even when
-             * their textContent is empty (e.g. <svg>, <img>).
-             */
-            if (node.nodeType === Node.TEXT_NODE) {
-                return ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) !== 0;
-            }
-            return true;
-        });
-    }
-    if (nodes.length === 0) {
-        return null;
-    }
-    // Return plain text if no elements are found
-    if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
-        return nodes.map((n) => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); }).join(' ') || null;
-    }
-    /**
-     * Mirror known custom-element properties (e.g. ion-icon's `icon`)
-     * onto attributes before cloning. Frameworks like Vue set these as
-     * DOM properties, which `cloneNode` doesn't copy, so without this
-     * step the cloned overlay copy renders without the prop's value.
-     */
-    nodes.forEach((n) => {
-        if (n.nodeType === Node.ELEMENT_NODE) {
-            reflectPropertiesToAttributes(n);
-        }
-    });
-    // Clone each node into a temporary container
-    const container = document.createElement('div');
-    nodes.forEach((n) => {
-        var _a;
-        const clone = n.cloneNode(true);
-        if (clone.nodeType === Node.TEXT_NODE) {
-            clone.textContent = ((_a = clone.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
-        }
-        else {
-            trimTextNodes(clone);
-        }
-        container.appendChild(clone);
-    });
-    /**
-     * Sanitize the cloned DOM in place. Trusted attributes (size, color,
-     * shape, etc.) are preserved; event handlers, javascript: URLs, and
-     * blocked tags are stripped.
-     */
-    sanitizeDOMTree(container);
-    if (useHTML) {
-        return container.innerHTML.trim() || null;
-    }
-    return container;
-};
-/**
- * Returns the child nodes that belong to the default slot of an
- * option element, excluding any nodes that are assigned to named
- * slots.
- *
- * @param option - The `ion-select-option` element to extract default-slot nodes from.
- * @returns An array of default slot nodes, or `null` if none are found.
- */
-const getOptionDefaultSlot = (option) => {
-    const defaultSlotNodes = Array.from(option.childNodes).filter((node) => {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-            return !node.hasAttribute('slot');
-        }
-        return node.nodeType === Node.TEXT_NODE;
-    });
-    if (defaultSlotNodes.length === 0) {
-        return null;
-    }
-    return defaultSlotNodes;
-};
-/**
- * Extracts plain text from only the default slot of an option,
- * excluding content assigned to named slots (start/end).
- */
-const getDefaultSlotPlainText = (option) => {
-    const texts = Array.from(option.childNodes)
-        .filter((node) => {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-            return !node.hasAttribute('slot');
-        }
-        return node.nodeType === Node.TEXT_NODE;
-    })
-        .filter((node) => node.nodeType === Node.TEXT_NODE)
-        .map((n) => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
-        .filter((t) => t);
-    return texts.join(' ');
-};
-/**
- * Extracts the rich content from an `ion-select-option`.
- * When `customHTMLEnabled` is `false`, only the plain text from the
- * default slot is read and the start and end slots are skipped.
- *
- * @param option - The `ion-select-option` element to extract content from.
- * @param customHTMLEnabled - Whether custom HTML rendering is enabled
- * via the `innerHTMLTemplatesEnabled` config.
- */
-const extractOptionContent = (option, customHTMLEnabled) => {
-    var _a, _b;
-    if (!customHTMLEnabled) {
-        return {
-            content: getDefaultSlotPlainText(option),
-            startContent: undefined,
-            endContent: undefined,
-        };
-    }
-    return {
-        content: getOptionContent(option),
-        startContent: (_a = getOptionContent(option, 'start')) !== null && _a !== void 0 ? _a : undefined,
-        endContent: (_b = getOptionContent(option, 'end')) !== null && _b !== void 0 ? _b : undefined,
-    };
+    return selectOpt ? selectOpt.textContent : null;
 };
 let selectIds = 0;
 const OPTION_CLASS = 'select-interface-option';

package/dist/collection/components/select/select.md.css

@@ -75,14 +75,6 @@
    * @prop --border-width: Width of the select border
    *
    * @prop --ripple-color: The color of the ripple effect on MD mode.
-   *
-   * @prop --select-text-media-width: The width of media (icons/images) in the select text.
-   * @prop --select-text-media-height: The height of media (icons/images) in the select text.
-   * @prop --select-text-media-border-width: The border width of media (icons/images) in the select text.
-   * @prop --select-text-media-border-color: The border color of media (icons/images) in the select text.
-   * @prop --select-text-media-border-radius: The border radius of media (icons/images) in the select text.
-   * @prop --select-text-media-border-style: The border style of media (icons/images) in the select text.
-   * @prop --select-text-gap: The gap between elements in the select text.
    */
   --padding-top: 0px;
   --padding-end: 0px;
@@ -95,9 +87,6 @@
   --highlight-color-focused: var(--ion-color-primary, #0054e9);
   --highlight-color-valid: var(--ion-color-success, #2dd55b);
   --highlight-color-invalid: var(--ion-color-danger, #c5000f);
-  --select-text-media-height: 1.5em;
-  --select-text-media-width: 1.5em;
-  --select-text-gap: 12px;
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -238,28 +227,6 @@ button {
   overflow: hidden;
 }
 
-/**
- * If the select text contains rich content, we want to add some
- * spacing between the elements without changing the display to
- * prevent losing the ellipses behavior.
- */
-.select-text > * + * {
-  margin-inline-start: var(--select-text-gap);
-}
-
-.select-text img,
-.select-text ion-img,
-.select-text ion-icon,
-.select-text ion-thumbnail,
-.select-text ion-avatar {
-  border-radius: var(--select-text-media-border-radius);
-  width: var(--select-text-media-width);
-  height: var(--select-text-media-height);
-  border-width: var(--select-text-media-border-width);
-  border-style: var(--select-text-media-border-style);
-  border-color: var(--select-text-media-border-color);
-}
-
 .select-wrapper {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);