@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

package/dist/cjs/ion-select-modal.cjs.entry.js

@@ -3,36 +3,42 @@
  */
 'use strict';
 
-var index = require('./index-BfaXsATC.js');
-var ionicGlobal = require('./ionic-global-BerQGEpE.js');
-var overlays = require('./overlays-CQ_c1fko.js');
-var theme = require('./theme-CeDs6Hcv.js');
+var index = require('./index-uvry__L4.js');
+var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+var overlayControlLabel = require('./overlay-control-label-D2sdL2O8.js');
+var overlays = require('./overlays-KaNVDNqC.js');
+var selectOptionRender = require('./select-option-render-pULCGldr.js');
+var theme = require('./theme-Bw0rpaNN.js');
 require('./index-DkNv4J_i.js');
-require('./helpers-DdZyl6WL.js');
-require('./dir-DD0jPVH3.js');
-require('./hardware-back-button-CXmUnTJC.js');
-require('./framework-delegate-CEzl4MEA.js');
-require('./gesture-controller-dtqlP_q4.js');
+require('./helpers-YPQybDph.js');
+require('./dir-zwDPRE5K.js');
+require('./hardware-back-button-fqpYh-kd.js');
+require('./framework-delegate-Dfo5XsGv.js');
+require('./gesture-controller-BDUH7687.js');
+require('./index-B7zJsYWS.js');
 
-const ionicSelectModalMdCss = () => `.sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~="container"]{display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
+const ionicSelectModalMdCss = () => `.action-sheet-button-label-has-rich-content.sc-ion-select-modal-ionic,.alert-radio-label-has-rich-content.sc-ion-select-modal-ionic,.alert-checkbox-label-has-rich-content.sc-ion-select-modal-ionic,.select-option-label-has-rich-content.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}.action-sheet-button-label-has-rich-content.sc-ion-select-modal-ionic,.alert-radio-label-has-rich-content.sc-ion-select-modal-ionic,.alert-checkbox-label-has-rich-content.sc-ion-select-modal-ionic,.select-option-content.sc-ion-select-modal-ionic{-ms-flex:1;flex:1}.action-sheet-button-label-text.sc-ion-select-modal-ionic,.alert-checkbox-label-text.sc-ion-select-modal-ionic,.alert-radio-label-text.sc-ion-select-modal-ionic,.select-option-label-text.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}.select-option-start.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.select-option-description.sc-ion-select-modal-ionic{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}.select-option-label.sc-ion-select-modal-ionic:not(.select-option-label-has-rich-content){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-option-label-has-rich-content.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ion-radio.select-option-has-rich-content.sc-ion-select-modal-ionic::part(label),ion-radio.select-option-has-rich-content.sc-ion-select-modal-ionic [part~="label"],ion-checkbox.select-option-has-rich-content.sc-ion-select-modal-ionic::part(label),ion-checkbox.select-option-has-rich-content.sc-ion-select-modal-ionic [part~="label"],.select-option-content.sc-ion-select-modal-ionic{-ms-flex:1;flex:1;white-space:normal}.select-option-start.sc-ion-select-modal-ionic>ion-avatar.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>ion-avatar.sc-ion-select-modal-ionic{width:40px;height:40px}.select-option-start.sc-ion-select-modal-ionic>ion-icon.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>ion-icon.sc-ion-select-modal-ionic{font-size:24px}.select-option-start.sc-ion-select-modal-ionic>ion-img.sc-ion-select-modal-ionic,.select-option-start.sc-ion-select-modal-ionic>img.sc-ion-select-modal-ionic,.select-option-start.sc-ion-select-modal-ionic>svg.sc-ion-select-modal-ionic,.select-option-start.sc-ion-select-modal-ionic>ion-thumbnail.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>ion-img.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>img.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>svg.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>ion-thumbnail.sc-ion-select-modal-ionic{width:56px;height:56px}.select-option-start.sc-ion-select-modal-ionic>video.sc-ion-select-modal-ionic,.select-option-end.sc-ion-select-modal-ionic>video.sc-ion-select-modal-ionic{width:114px;height:56px}.sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~="container"]{display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label),ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
 
-const selectModalIosCss = () => `.sc-ion-select-modal-ios-h{height:100%}ion-item.sc-ion-select-modal-ios{--inner-padding-end:0}ion-radio.sc-ion-select-modal-ios::after{bottom:0;position:absolute;width:calc(100% - 0.9375rem - 16px);border-width:0px 0px 0.55px 0px;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));content:""}ion-radio.sc-ion-select-modal-ios::after{inset-inline-start:calc(0.9375rem + 16px)}`;
+const selectModalIosCss = () => `.action-sheet-button-label-has-rich-content.sc-ion-select-modal-ios,.alert-radio-label-has-rich-content.sc-ion-select-modal-ios,.alert-checkbox-label-has-rich-content.sc-ion-select-modal-ios,.select-option-label-has-rich-content.sc-ion-select-modal-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}.action-sheet-button-label-has-rich-content.sc-ion-select-modal-ios,.alert-radio-label-has-rich-content.sc-ion-select-modal-ios,.alert-checkbox-label-has-rich-content.sc-ion-select-modal-ios,.select-option-content.sc-ion-select-modal-ios{-ms-flex:1;flex:1}.action-sheet-button-label-text.sc-ion-select-modal-ios,.alert-checkbox-label-text.sc-ion-select-modal-ios,.alert-radio-label-text.sc-ion-select-modal-ios,.select-option-label-text.sc-ion-select-modal-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}.select-option-start.sc-ion-select-modal-ios,.select-option-end.sc-ion-select-modal-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.select-option-description.sc-ion-select-modal-ios{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}.select-option-label.sc-ion-select-modal-ios:not(.select-option-label-has-rich-content){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-option-label-has-rich-content.sc-ion-select-modal-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ion-radio.select-option-has-rich-content.sc-ion-select-modal-ios::part(label),ion-radio.select-option-has-rich-content.sc-ion-select-modal-ios [part~="label"],ion-checkbox.select-option-has-rich-content.sc-ion-select-modal-ios::part(label),ion-checkbox.select-option-has-rich-content.sc-ion-select-modal-ios [part~="label"],.select-option-content.sc-ion-select-modal-ios{-ms-flex:1;flex:1;white-space:normal}.select-option-start.sc-ion-select-modal-ios>ion-avatar.sc-ion-select-modal-ios,.select-option-start.sc-ion-select-modal-ios>ion-img.sc-ion-select-modal-ios,.select-option-start.sc-ion-select-modal-ios>ion-thumbnail.sc-ion-select-modal-ios,.select-option-start.sc-ion-select-modal-ios>img.sc-ion-select-modal-ios,.select-option-start.sc-ion-select-modal-ios>svg.sc-ion-select-modal-ios,.select-option-end.sc-ion-select-modal-ios>ion-avatar.sc-ion-select-modal-ios,.select-option-end.sc-ion-select-modal-ios>ion-img.sc-ion-select-modal-ios,.select-option-end.sc-ion-select-modal-ios>ion-thumbnail.sc-ion-select-modal-ios,.select-option-end.sc-ion-select-modal-ios>img.sc-ion-select-modal-ios,.select-option-end.sc-ion-select-modal-ios>svg.sc-ion-select-modal-ios{width:44px;height:44px}.select-option-start.sc-ion-select-modal-ios>ion-icon.sc-ion-select-modal-ios,.select-option-end.sc-ion-select-modal-ios>ion-icon.sc-ion-select-modal-ios{font-size:28px}.action-sheet-button-label-text.sc-ion-select-modal-ios{-ms-flex-pack:center;justify-content:center}.select-option-has-rich-content.sc-ion-select-modal-ios{-webkit-padding-end:16px;padding-inline-end:16px}.sc-ion-select-modal-ios-h{height:100%}ion-item.sc-ion-select-modal-ios{--inner-padding-end:0}ion-radio.sc-ion-select-modal-ios::after{bottom:0;position:absolute;width:calc(100% - 0.9375rem - 16px);border-width:0px 0px 0.55px 0px;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));content:""}ion-radio.sc-ion-select-modal-ios::after{inset-inline-start:calc(0.9375rem + 16px)}`;
 
-const selectModalMdCss = () => `.sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(container),ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md [part~="container"]{display:none}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(label),ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
+const selectModalMdCss = () => `.action-sheet-button-label-has-rich-content.sc-ion-select-modal-md,.alert-radio-label-has-rich-content.sc-ion-select-modal-md,.alert-checkbox-label-has-rich-content.sc-ion-select-modal-md,.select-option-label-has-rich-content.sc-ion-select-modal-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:16px}.action-sheet-button-label-has-rich-content.sc-ion-select-modal-md,.alert-radio-label-has-rich-content.sc-ion-select-modal-md,.alert-checkbox-label-has-rich-content.sc-ion-select-modal-md,.select-option-content.sc-ion-select-modal-md{-ms-flex:1;flex:1}.action-sheet-button-label-text.sc-ion-select-modal-md,.alert-checkbox-label-text.sc-ion-select-modal-md,.alert-radio-label-text.sc-ion-select-modal-md,.select-option-label-text.sc-ion-select-modal-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px}.select-option-start.sc-ion-select-modal-md,.select-option-end.sc-ion-select-modal-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px}.select-option-description.sc-ion-select-modal-md{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}.select-option-label.sc-ion-select-modal-md:not(.select-option-label-has-rich-content){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.select-option-label-has-rich-content.sc-ion-select-modal-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}ion-radio.select-option-has-rich-content.sc-ion-select-modal-md::part(label),ion-radio.select-option-has-rich-content.sc-ion-select-modal-md [part~="label"],ion-checkbox.select-option-has-rich-content.sc-ion-select-modal-md::part(label),ion-checkbox.select-option-has-rich-content.sc-ion-select-modal-md [part~="label"],.select-option-content.sc-ion-select-modal-md{-ms-flex:1;flex:1;white-space:normal}.select-option-start.sc-ion-select-modal-md>ion-avatar.sc-ion-select-modal-md,.select-option-end.sc-ion-select-modal-md>ion-avatar.sc-ion-select-modal-md{width:40px;height:40px}.select-option-start.sc-ion-select-modal-md>ion-icon.sc-ion-select-modal-md,.select-option-end.sc-ion-select-modal-md>ion-icon.sc-ion-select-modal-md{font-size:24px}.select-option-start.sc-ion-select-modal-md>ion-img.sc-ion-select-modal-md,.select-option-start.sc-ion-select-modal-md>img.sc-ion-select-modal-md,.select-option-start.sc-ion-select-modal-md>svg.sc-ion-select-modal-md,.select-option-start.sc-ion-select-modal-md>ion-thumbnail.sc-ion-select-modal-md,.select-option-end.sc-ion-select-modal-md>ion-img.sc-ion-select-modal-md,.select-option-end.sc-ion-select-modal-md>img.sc-ion-select-modal-md,.select-option-end.sc-ion-select-modal-md>svg.sc-ion-select-modal-md,.select-option-end.sc-ion-select-modal-md>ion-thumbnail.sc-ion-select-modal-md{width:56px;height:56px}.select-option-start.sc-ion-select-modal-md>video.sc-ion-select-modal-md,.select-option-end.sc-ion-select-modal-md>video.sc-ion-select-modal-md{width:114px;height:56px}.sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(container),ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md [part~="container"]{display:none}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(label),ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md [part~="label"]{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}`;
 
 const SelectModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        // Tracks the option that received Enter-keydown so keyup only
-        // dismisses when the press started on the same option. Prevents
-        // Enter on the triggering ion-select from auto-dismissing.
-        this.pendingEnterTarget = null;
-        /**
-         * The text to display on the cancel button.
-         */
-        this.cancelText = 'Close';
-        this.options = [];
     }
+    get el() { return index.getElement(this); }
+    // Tracks the option that received Enter-keydown so keyup only
+    // dismisses when the press started on the same option. Prevents
+    // Enter on the triggering ion-select from auto-dismissing.
+    pendingEnterTarget = null;
+    header;
+    /**
+     * The text to display on the cancel button.
+     */
+    cancelText = 'Close';
+    multiple;
+    options = [];
     closeModal() {
         const modal = this.el.closest('ion-modal');
         if (modal) {
@@ -58,7 +64,7 @@ const SelectModal = class {
     callOptionHandler(ev) {
         const option = this.findOptionFromEvent(ev);
         const values = this.getValues(ev);
-        if (option === null || option === void 0 ? void 0 : option.handler) {
+        if (option?.handler) {
             overlays.safeCall(option.handler, values);
         }
     }
@@ -72,43 +78,93 @@ const SelectModal = class {
         }
     }
     renderRadioOptions() {
+        const mode = ionicGlobal.getIonMode(this);
         const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
-        return (index.h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (index.h("ion-item", { lines: "none", class: Object.assign({
+        return (index.h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option, index$1) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectModalOption` interface.
+             */
+            const richOption = option;
+            const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
+            const optionLabelOptions = {
+                id: `modal-option-${index$1}`,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
+            };
+            const defaultLabelPlacement = overlayControlLabel.getOverlayLabelPlacement(mode, 'radio', 'modal');
+            const defaultJustify = overlayControlLabel.getOverlayLabelJustify(mode, 'radio', 'modal');
+            return (index.h("ion-item", { lines: "none",
                 // TODO FW-4784
-                'item-radio-checked': option.value === checked
-            }, theme.getClassMap(option.cssClass)) }, index.h("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyDown: (ev) => {
-                if (ev.key === 'Enter' && !ev.repeat) {
-                    this.pendingEnterTarget = ev.currentTarget;
-                }
-            }, onKeyUp: (ev) => {
-                if (ev.key === ' ') {
-                    // Space selects and dismisses in one press.
-                    this.closeModal();
-                }
-                else if (ev.key === 'Enter') {
-                    const shouldClose = this.pendingEnterTarget === ev.currentTarget;
-                    this.pendingEnterTarget = null;
-                    if (shouldClose) {
+                disabled: option.disabled, class: {
+                    // TODO FW-4784
+                    'item-radio-checked': option.value === checked,
+                    ...theme.getClassMap(option.cssClass),
+                } }, index.h("ion-radio", { class: {
+                    'select-option-has-rich-content': hasRichContent,
+                }, value: option.value, disabled: option.disabled, justify: richOption.justify ?? defaultJustify, labelPlacement: richOption.labelPlacement ?? defaultLabelPlacement, onClick: () => this.closeModal(), onKeyDown: (ev) => {
+                    if (ev.key === 'Enter' && !ev.repeat) {
+                        this.pendingEnterTarget = ev.currentTarget;
+                    }
+                }, onKeyUp: (ev) => {
+                    if (ev.key === ' ') {
+                        // Space selects and dismisses in one press.
                         this.closeModal();
                     }
-                }
-            } }, option.text))))));
+                    else if (ev.key === 'Enter') {
+                        const shouldClose = this.pendingEnterTarget === ev.currentTarget;
+                        this.pendingEnterTarget = null;
+                        if (shouldClose) {
+                            this.closeModal();
+                        }
+                    }
+                } }, selectOptionRender.renderOptionLabel(optionLabelOptions, 'select-option-label'))));
+        })));
     }
     renderCheckboxOptions() {
-        return this.options.map((option) => (index.h("ion-item", { class: Object.assign({
-                // TODO FW-4784
-                'item-checkbox-checked': option.checked
-            }, theme.getClassMap(option.cssClass)) }, index.h("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
-                this.setChecked(ev);
-                this.callOptionHandler(ev);
+        const mode = ionicGlobal.getIonMode(this);
+        return this.options.map((option, index$1) => {
+            /**
+             * Cast to `SelectOverlayOption` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `SelectModalOption` interface.
+             */
+            const richOption = option;
+            const hasRichContent = !!richOption.startContent || !!richOption.endContent || !!richOption.description;
+            const optionLabelOptions = {
+                id: `modal-option-${index$1}`,
+                label: richOption.text,
+                startContent: richOption.startContent,
+                endContent: richOption.endContent,
+                description: richOption.description,
+            };
+            const defaultLabelPlacement = overlayControlLabel.getOverlayLabelPlacement(mode, 'checkbox', 'modal');
+            const defaultJustify = overlayControlLabel.getOverlayLabelJustify(mode, 'checkbox', 'modal');
+            return (index.h("ion-item", {
                 // TODO FW-4784
-                index.forceUpdate(this);
-            } }, option.text))));
+                disabled: option.disabled, class: {
+                    // TODO FW-4784
+                    'item-checkbox-checked': option.checked,
+                    ...theme.getClassMap(option.cssClass),
+                }
+            }, index.h("ion-checkbox", { class: {
+                    'select-option-has-rich-content': hasRichContent,
+                }, value: option.value, disabled: option.disabled, checked: option.checked, justify: richOption.justify ?? defaultJustify, labelPlacement: richOption.labelPlacement ?? defaultLabelPlacement, onIonChange: (ev) => {
+                    this.setChecked(ev);
+                    this.callOptionHandler(ev);
+                    // TODO FW-4784
+                    index.forceUpdate(this);
+                } }, selectOptionRender.renderOptionLabel(optionLabelOptions, 'select-option-label'))));
+        });
     }
     render() {
-        return (index.h(index.Host, { key: 'fda0bf6f93cd5ec9f3c64f88a52de849e0e140a2', class: ionicGlobal.getIonMode(this) }, index.h("ion-header", { key: '27c0b17175a53db9ff159feeeb96451a3f011dab' }, index.h("ion-toolbar", { key: '91a4155ebc317fbc9f1bb3e26a7e94754b953c9b' }, this.header !== undefined && index.h("ion-title", { key: 'f6dae8e4e381f322cc90efefd9bb6ef81d4d2f3e' }, this.header), index.h("ion-buttons", { key: 'e7760532fb2e7e7385ed6e62097d92d96ff20148', slot: "end" }, index.h("ion-button", { key: '4999b6fc46cba138186546dca67b7950855e6fb7', onClick: () => this.closeModal() }, this.cancelText)))), index.h("ion-content", { key: 'c73f80a4bc25b9061ea65cf11e5d811c1a4d8704' }, index.h("ion-list", { key: 'b21905d15b36ad5eb45845e768918d2763cf48b1' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (index.h(index.Host, { key: '791e95b985dd4b135db17a25fc678e9f8b73c597', class: ionicGlobal.getIonMode(this) }, index.h("ion-header", { key: '697d18eef394c4c11c73afe69b9eadd1bad97d38' }, index.h("ion-toolbar", { key: '036968824ad8771020fe2b7604a6e72b73efc8ae' }, this.header !== undefined && index.h("ion-title", { key: '102e0346be83e879e733f9b410437b26216156aa' }, this.header), index.h("ion-buttons", { key: '436b997e990ce2f5e12e1651f8afc31ae231f7b0', slot: "end" }, index.h("ion-button", { key: 'ee4ddfd0612d33583aa0b93ebdb5257b10d4fda5', onClick: () => this.closeModal() }, this.cancelText)))), index.h("ion-content", { key: '38ea098f85ac69226e614e0a09f668e9209f7ea1' }, index.h("ion-list", { key: '20becc2537a1a027915fe0598203039ceb8ba4f3' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
-    get el() { return index.getElement(this); }
 };
 SelectModal.style = {
     ionic: ionicSelectModalMdCss(),