@ionic/core 8.8.4-dev.11776184632.103b8351 → 8.8.4-dev.11776246162.138c2737

package/dist/cjs/ion-popover.cjs.entry.js

@@ -4,7 +4,7 @@
 'use strict';
 
 var index = require('./index-CzcLEdQ5.js');
-var overlays = require('./overlays-Dhoy6v_5.js');
+var overlays = require('./overlays-BbhewSIQ.js');
 var frameworkDelegate = require('./framework-delegate-Dx9FrqAC.js');
 var helpers = require('./helpers-DJYxKN5U.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
@@ -832,6 +832,92 @@ const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
     return true;
 };
 
+const POPOVER_MD_BODY_PADDING$1 = 12;
+/**
+ * Ionic Popover Enter Animation
+ */
+// TODO(FW-2832): types
+const ionicEnterAnimation = (baseEl, opts) => {
+    var _a;
+    const { event: ev, size, trigger, reference, side, align } = opts;
+    const doc = baseEl.ownerDocument;
+    const isRTL = doc.dir === 'rtl';
+    const bodyWidth = doc.defaultView.innerWidth;
+    const bodyHeight = doc.defaultView.innerHeight;
+    const root = helpers.getElementRoot(baseEl);
+    const contentEl = root.querySelector('.popover-content');
+    const referenceSizeEl = trigger || ((_a = ev === null || ev === void 0 ? void 0 : ev.detail) === null || _a === void 0 ? void 0 : _a.ionShadowTarget) || (ev === null || ev === void 0 ? void 0 : ev.target);
+    const { contentWidth, contentHeight } = getPopoverDimensions(size, contentEl, referenceSizeEl);
+    const defaultPosition = {
+        top: bodyHeight / 2 - contentHeight / 2,
+        left: bodyWidth / 2 - contentWidth / 2,
+        originX: isRTL ? 'right' : 'left',
+        originY: 'top',
+    };
+    const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
+    const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING$1;
+    // MD mode now applies safe-area insets (previously passed 0, ignoring all safe areas).
+    // This is needed for Android edge-to-edge (API 36+) where system bars overlap content.
+    const safeArea = size === 'cover' ? { top: 0, bottom: 0, left: 0, right: 0 } : getSafeAreaInsets(doc);
+    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, checkSafeAreaTop, checkSafeAreaBottom, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, results.originX, results.originY, results.referenceCoordinates);
+    const safeAreaLeftCalc = ' + var(--ion-safe-area-left, 0px)';
+    const safeAreaRightCalc = ' - var(--ion-safe-area-right, 0px)';
+    let leftValue = `${left}px`;
+    if (checkSafeAreaLeft) {
+        leftValue = `${left}px${safeAreaLeftCalc}`;
+    }
+    if (checkSafeAreaRight) {
+        leftValue = `${left}px${safeAreaRightCalc}`;
+    }
+    let topValue = `${top}px`;
+    if (checkSafeAreaTop) {
+        topValue = `${top}px + var(--ion-safe-area-top, 0px)`;
+    }
+    const baseAnimation = animation.createAnimation();
+    const backdropAnimation = animation.createAnimation();
+    const wrapperAnimation = animation.createAnimation();
+    const contentAnimation = animation.createAnimation();
+    const viewportAnimation = animation.createAnimation();
+    backdropAnimation
+        .addElement(root.querySelector('ion-backdrop'))
+        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+        .beforeStyles({
+        'pointer-events': 'none',
+    })
+        .afterClearStyles(['pointer-events']);
+    wrapperAnimation.addElement(root.querySelector('.popover-wrapper')).duration(150).fromTo('opacity', 0.01, 1);
+    contentAnimation
+        .addElement(contentEl)
+        .beforeStyles({
+        top: `calc(${topValue} + var(--offset-y, 0px))`,
+        left: `calc(${leftValue} + var(--offset-x, 0px))`,
+        'transform-origin': `${originY} ${originX}`,
+    })
+        .beforeAddWrite(() => {
+        if (bottom !== undefined) {
+            let bottomValue = `${bottom}px`;
+            if (checkSafeAreaBottom) {
+                bottomValue = `${bottom}px + var(--ion-safe-area-bottom, 0px)`;
+            }
+            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
+        }
+    })
+        .fromTo('transform', 'scale(0.8)', 'scale(1)');
+    viewportAnimation.addElement(root.querySelector('.popover-viewport')).fromTo('opacity', 0.01, 1);
+    return baseAnimation
+        .easing('cubic-bezier(0.36,0.66,0.04,1)')
+        .duration(300)
+        .beforeAddWrite(() => {
+        if (size === 'cover') {
+            baseEl.style.setProperty('--width', `${contentWidth}px`);
+        }
+        if (addPopoverBottomClass) {
+            baseEl.classList.add('popover-bottom');
+        }
+    })
+        .addAnimation([backdropAnimation, wrapperAnimation, contentAnimation, viewportAnimation]);
+};
+
 const POPOVER_IOS_BODY_PADDING = 5;
 /**
  * Minimum edge margin for iOS popovers ensures visual spacing from screen
@@ -1436,7 +1522,7 @@ const Popover = class {
         else if (!this.keepContentsMounted) {
             await index$1.waitForMount();
         }
-        await overlays.present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
+        await overlays.present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, {
             event: event || this.event,
             size: this.size,
             trigger: this.triggerEl,
@@ -1545,9 +1631,9 @@ const Popover = class {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = ionicGlobal.isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (index.h(index.Host, Object.assign({ key: 'cc70f9b037b16ea78b999916106a1062ceb74cb6', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (index.h(index.Host, Object.assign({ key: '398b4c72cfea89fb743d427e3c2b48507649aff1', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [theme$1]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: 'e641e7ee28cbd54911ec3f8c0bfd9d7e3f2e85cd', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: '750494585c3524b27e42d79f02e729f3eff9e660', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '2e49b4ad1287e31a3cdbfebc91120405a998dc95', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '306586776e74acab787b2a96433553005bca580d', class: "popover-content", part: "content" }, index.h("slot", { key: '0273c0975cd7dc37db5cfa0b91d418867a77c4d8' })))));
+            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [theme$1]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '6baec0b33665557c55425ffad9c6b31741c25651', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: '6ce3a61164f478560cc45c618fc5b7f62b491ecd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: 'a36815fc0417a10fb350429909a79cb4025baf3a', class: "popover-arrow", part: "arrow" }), index.h("div", { key: 'cec3436cdb2cb6fa839c37abb3cb6daf7de453de', class: "popover-content", part: "content" }, index.h("slot", { key: '5405fb03bab017acd7fa09d00cfe1b7cfbdfae92' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -5,19 +5,18 @@
 
 var index = require('./index-CzcLEdQ5.js');
 var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
-var overlays = require('./overlays-Dhoy6v_5.js');
-var selectOptionRender = require('./select-option-render-qQf4xz8P.js');
+var overlays = require('./overlays-BbhewSIQ.js');
 var theme = require('./theme-IlOsGAz7.js');
 require('./helpers-DJYxKN5U.js');
 require('./focus-visible-BIj-I3-C.js');
 require('./framework-delegate-Dx9FrqAC.js');
 require('./gesture-controller-dtqlP_q4.js');
 
-const selectModalIonicCss = () => `.sc-ion-select-modal-ionic-h{height:100%}.select-option-label.sc-ion-select-modal-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.select-option-description.sc-ion-select-modal-ionic{display:block}.in-modal-default.sc-ion-select-modal-ionic-h ion-content.sc-ion-select-modal-ionic::part(scroll),.in-modal-default.sc-ion-select-modal-ionic-h ion-content.sc-ion-select-modal-ionic [part~="scroll"]{--padding-bottom:var(--token-space-400, var(--token-scale-400, 16px))}ion-item.sc-ion-select-modal-ionic{--border-width:0}ion-item.ion-focused.sc-ion-select-modal-ionic::part(native)::after,ion-item.ion-focused.sc-ion-select-modal-ionic [part~="native"]::after{border:none}ion-toolbar.sc-ion-select-modal-ionic{font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-700, var(--token-scale-700, 28px));text-decoration:none;text-transform:none}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-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"],ion-list.sc-ion-select-modal-ionic ion-checkbox.sc-ion-select-modal-ionic::part(label),ion-list.sc-ion-select-modal-ionic ion-checkbox.sc-ion-select-modal-ionic [part~="label"]{font-size:var(--token-font-size-400, 1rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none}.item-radio-checked.sc-ion-select-modal-ionic,.item-checkbox-checked.sc-ion-select-modal-ionic{--background:var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc));--border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}ion-content.sc-ion-select-modal-ionic{--padding-start:var(--token-space-400, var(--token-scale-400, 16px)) !important;--padding-end:var(--token-space-400, var(--token-scale-400, 16px)) !important;--padding-bottom:var(--token-space-1200, var(--token-scale-1200, 48px)) !important}ion-content.sc-ion-select-modal-ionic:has(.radio-checked) .ion-focused.sc-ion-select-modal-ionic:not(.item-radio-checked){--background-focused-opacity:1}.select-option-label.sc-ion-select-modal-ionic{gap:var(--token-space-300, var(--token-scale-300, 12px))}.select-option-description.sc-ion-select-modal-ionic{font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none;color:var(--token-text-subtle, var(--token-primitives-neutral-1000, #3b3b3b));font-size:var(--token-font-size-350, 0.875rem)}`;
+const selectModalIonicCss = () => `.sc-ion-select-modal-ionic-h{height:100%}.in-modal-default.sc-ion-select-modal-ionic-h ion-content.sc-ion-select-modal-ionic::part(scroll),.in-modal-default.sc-ion-select-modal-ionic-h ion-content.sc-ion-select-modal-ionic [part~="scroll"]{--padding-bottom:var(--token-space-400, var(--token-scale-400, 16px))}ion-item.sc-ion-select-modal-ionic{--border-width:0}ion-item.ion-focused.sc-ion-select-modal-ionic::part(native)::after,ion-item.ion-focused.sc-ion-select-modal-ionic [part~="native"]::after{border:none}ion-toolbar.sc-ion-select-modal-ionic{font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-700, var(--token-scale-700, 28px));text-decoration:none;text-transform:none}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-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"],ion-list.sc-ion-select-modal-ionic ion-checkbox.sc-ion-select-modal-ionic::part(label),ion-list.sc-ion-select-modal-ionic ion-checkbox.sc-ion-select-modal-ionic [part~="label"]{font-size:var(--token-font-size-400, 1rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none}.item-radio-checked.sc-ion-select-modal-ionic,.item-checkbox-checked.sc-ion-select-modal-ionic{--background:var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc));--border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}ion-content.sc-ion-select-modal-ionic{--padding-start:var(--token-space-400, var(--token-scale-400, 16px)) !important;--padding-end:var(--token-space-400, var(--token-scale-400, 16px)) !important;--padding-bottom:var(--token-space-1200, var(--token-scale-1200, 48px)) !important}ion-content.sc-ion-select-modal-ionic:has(.radio-checked) .ion-focused.sc-ion-select-modal-ionic:not(.item-radio-checked){--background-focused-opacity:1}`;
 
-const selectModalIosCss = () => `.sc-ion-select-modal-ios-h{height:100%}.select-option-label.sc-ion-select-modal-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.select-option-description.sc-ion-select-modal-ios{display:block}.select-option-label.sc-ion-select-modal-ios{gap:12px}.select-option-description.sc-ion-select-modal-ios{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}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 = () => `.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%}.select-option-label.sc-ion-select-modal-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.select-option-description.sc-ion-select-modal-md{display:block}.select-option-label.sc-ion-select-modal-md{gap:12px}.select-option-description.sc-ion-select-modal-md{padding-left:0;padding-right:0;padding-top:5px;padding-bottom:0;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem}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 = () => `.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) {
@@ -75,51 +74,33 @@ const SelectModal = class {
     }
     renderRadioOptions() {
         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$1) => {
-            const optionLabelOptions = {
-                id: `modal-option-${index$1}`,
-                label: option.text,
-                startContent: option.startContent,
-                endContent: option.endContent,
-                description: option.description,
-            };
-            return (index.h("ion-item", { lines: "none", class: Object.assign({
-                    // 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(), onKeyUp: (ev) => {
-                    if (ev.key === ' ') {
-                        /**
-                         * Selecting a radio option with keyboard navigation,
-                         * either through the Enter or Space keys, should
-                         * dismiss the modal.
-                         */
-                        this.closeModal();
-                    }
-                } }, selectOptionRender.renderOptionLabel(optionLabelOptions, 'select-option-label'))));
-        })));
+        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({
+                // 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(), onKeyUp: (ev) => {
+                if (ev.key === ' ') {
+                    /**
+                     * Selecting a radio option with keyboard navigation,
+                     * either through the Enter or Space keys, should
+                     * dismiss the modal.
+                     */
+                    this.closeModal();
+                }
+            } }, option.text))))));
     }
     renderCheckboxOptions() {
-        return this.options.map((option, index$1) => {
-            const optionLabelOptions = {
-                id: `modal-option-${index$1}`,
-                label: option.text,
-                startContent: option.startContent,
-                endContent: option.endContent,
-                description: option.description,
-            };
-            return (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);
-                    // TODO FW-4784
-                    index.forceUpdate(this);
-                } }, selectOptionRender.renderOptionLabel(optionLabelOptions, 'select-option-label'))));
-        });
+        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);
+                // TODO FW-4784
+                index.forceUpdate(this);
+            } }, option.text))));
     }
     render() {
-        return (index.h(index.Host, { key: '18730fa65652d7f4889222d085b96324df5938fa', class: Object.assign({ [ionicGlobal.getIonMode(this)]: true }, this.getModalContextClasses()) }, index.h("ion-header", { key: 'f919ce66062f36b0826f4fbd51a34563971d7fc5' }, index.h("ion-toolbar", { key: 'd60bb24925145dde45493cae446e581b9aadefab' }, this.header !== undefined && index.h("ion-title", { key: 'fd26f906b8bd3e05233576f4c568eefcdb25f5de' }, this.header), index.h("ion-buttons", { key: 'b3683b2d7e75ba63b7271da71849e905a37337b5', slot: "end" }, index.h("ion-button", { key: '40a26fc0f05119538b0522276d6e798ce8e18c77', onClick: () => this.closeModal() }, this.cancelText)))), index.h("ion-content", { key: '7c61146a953ebf2280564a02f1fa57c50f4b62bc' }, index.h("ion-list", { key: '4d6742ae8bd030d60ea2cd5686f445063ba1e9a5' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (index.h(index.Host, { key: 'c0218aa9ebcbe9d70a6cc1ed8d005ca656e163d3', class: Object.assign({ [ionicGlobal.getIonMode(this)]: true }, this.getModalContextClasses()) }, index.h("ion-header", { key: '4698d7442befa17e449655b2f9439001298991a0' }, index.h("ion-toolbar", { key: 'd0f1d3418f8fdbfdf12fef752f6be4939e70eb79' }, this.header !== undefined && index.h("ion-title", { key: '2916c22b3a42635e503fa0a0c916b32909999761' }, this.header), index.h("ion-buttons", { key: 'e93827fc49edd8ac04100e7df8a2a5144d257c19', slot: "end" }, index.h("ion-button", { key: '0b46828d67d5b4864f40fcbf082ae24797099fb9', onClick: () => this.closeModal() }, this.cancelText)))), index.h("ion-content", { key: '8460ad9ce425ad0b25b603d0cd42c58b68ca63ee' }, index.h("ion-list", { key: 'c48ea90af6f36a44102a8852267bd7f6f82f9598' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return index.getElement(this); }
 };