/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
'use strict';

var index = require('./index-D6Wc6v08.js');
var ionicGlobal = require('./ionic-global-DpRwOXLK.js');
var overlays = require('./overlays-D7GuFhXb.js');
var theme = require('./theme-CeDs6Hcv.js');
require('./helpers-DnouLczu.js');
require('./focus-visible-BIj-I3-C.js');
require('./framework-delegate-Bwdk9vFS.js');
require('./gesture-controller-dtqlP_q4.js');

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, 18px);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, 16px);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%}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 SelectModal = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.options = [];
    }
    closeModal() {
        const modal = this.el.closest('ion-modal');
        if (modal) {
            modal.dismiss();
        }
    }
    findOptionFromEvent(ev) {
        const { options } = this;
        return options.find((o) => o.value === ev.target.value);
    }
    getValues(ev) {
        const { multiple, options } = this;
        if (multiple) {
            // this is a modal with checkboxes (multiple value select)
            // return an array of all the checked values
            return options.filter((o) => o.checked).map((o) => o.value);
        }
        // this is a modal with radio buttons (single value select)
        // return the value that was clicked, otherwise undefined
        const option = ev ? this.findOptionFromEvent(ev) : null;
        return option ? option.value : undefined;
    }
    callOptionHandler(ev) {
        const option = this.findOptionFromEvent(ev);
        const values = this.getValues(ev);
        if (option === null || option === void 0 ? void 0 : option.handler) {
            overlays.safeCall(option.handler, values);
        }
    }
    setChecked(ev) {
        const { multiple } = this;
        const option = this.findOptionFromEvent(ev);
        // this is a modal with checkboxes (multiple value select)
        // we need to set the checked value for this option
        if (multiple && option) {
            option.checked = ev.detail.checked;
        }
    }
    getModalContextClasses() {
        const el = this.el;
        return {
            'in-modal-default': theme.hostContext('ion-modal.modal-default', el),
            'in-modal-sheet': theme.hostContext('ion-modal.modal-sheet', el),
        };
    }
    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.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.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: 'dc377d9dc34389b1755dc0c86a3fb145d1c24bcb', class: Object.assign({ [ionicGlobal.getIonMode(this)]: true }, this.getModalContextClasses()) }, index.h("ion-header", { key: 'ee5b06c52d79b92a172b8d347b977264adc879e0' }, index.h("ion-toolbar", { key: 'a67603902b5fef8cb9931c0b3a47095dcc44ebfc' }, this.header !== undefined && index.h("ion-title", { key: 'aad40c470d3e29f90ff6187b593f5d00e0e83017' }, this.header), index.h("ion-buttons", { key: '91961a528b08b0bcb7078ee783c523c1aa9cd4e4', slot: "end" }, index.h("ion-button", { key: 'd891eadde7a5f3803dcade9ef161058bec62c2aa', onClick: () => this.closeModal() }, "Close")))), index.h("ion-content", { key: '55522714075a0959a10bb8501dc40fa99fed52d5' }, index.h("ion-list", { key: '24d68ca271dacc295a619581aa42a7a1f9327101' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
    }
    get el() { return index.getElement(this); }
};
SelectModal.style = {
    ionic: selectModalIonicCss,
    ios: selectModalIosCss,
    md: selectModalMdCss
};

exports.ion_select_modal = SelectModal;
