@ionic/core 8.7.17-dev.11771959013.18adabe2 → 8.7.17-dev.11772030258.1ee4f499

package/components/refresher.utils.js

@@ -1,4 +1,196 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{writeTask as t}from"@stencil/core/internal/client";import{c as r}from"./animation.js";import{c as e,t as s,f as a}from"./helpers.js";const o=t=>{const r=t.previousElementSibling;return null!==r&&"ION-HEADER"===r.tagName?"translate":"scale"},n=(t,r,e)=>"scale"===t?i(r,e):l(r,e),f=t=>{const e=t.querySelector("ion-spinner"),s=e.shadowRoot.querySelector("circle"),a=t.querySelector(".spinner-arrow-container"),o=t.querySelector(".arrow-container"),n=o?o.querySelector("ion-icon"):null,f=r().duration(1e3).easing("ease-out"),i=r().addElement(a).keyframes([{offset:0,opacity:"0.3"},{offset:.45,opacity:"0.3"},{offset:.55,opacity:"1"},{offset:1,opacity:"1"}]),l=r().addElement(s).keyframes([{offset:0,strokeDasharray:"1px, 200px"},{offset:.2,strokeDasharray:"1px, 200px"},{offset:.55,strokeDasharray:"100px, 200px"},{offset:1,strokeDasharray:"100px, 200px"}]),c=r().addElement(e).keyframes([{offset:0,transform:"rotate(-90deg)"},{offset:1,transform:"rotate(210deg)"}]);if(o&&n){const t=r().addElement(o).keyframes([{offset:0,transform:"rotate(0deg)"},{offset:.3,transform:"rotate(0deg)"},{offset:.55,transform:"rotate(280deg)"},{offset:1,transform:"rotate(400deg)"}]),e=r().addElement(n).keyframes([{offset:0,transform:"translateX(2px) scale(0)"},{offset:.3,transform:"translateX(2px) scale(0)"},{offset:.55,transform:"translateX(-1.5px) scale(1)"},{offset:1,transform:"translateX(-1.5px) scale(1)"}]);f.addAnimation([t,e])}return f.addAnimation([i,l,c])},i=(t,e)=>{const s=e.clientHeight,a=r().addElement(t).keyframes([{offset:0,transform:`scale(0) translateY(-${s}px)`},{offset:1,transform:"scale(1) translateY(100px)"}]);return f(t).addAnimation([a])},l=(t,e)=>{const s=e.clientHeight,a=r().addElement(t).keyframes([{offset:0,transform:`translateY(-${s}px)`},{offset:1,transform:"translateY(100px)"}]);return f(t).addAnimation([a])},c=t=>r().duration(125).addElement(t).fromTo("transform","translateY(var(--ion-pulling-refresher-translate, 100px))","translateY(0px)"),p=(t,r)=>{t.style.setProperty("opacity",r.toString())},m=(r,e,s)=>{t((()=>{r.forEach(((t,r)=>{const o=r*(1/e),n=a(0,(s-o)/(1-o),1);t.style.setProperty("opacity",n.toString())}))}))},x=(r,e)=>{t((()=>{r.style.setProperty("--refreshing-rotation-duration",e>=1?"0.5s":"2s"),r.style.setProperty("opacity","1")}))},u=(r,e,a=200)=>{if(!r)return Promise.resolve();const o=s(r,a);return t((()=>{r.style.setProperty("transition",`${a}ms all ease-out`),void 0===e?r.style.removeProperty("transform"):r.style.setProperty("transform",`translate3d(0px, ${e}, 0px)`)})),o},g=()=>navigator.maxTouchPoints>0&&CSS.supports("background: -webkit-named-image(apple-pay-logo-black)"),h=async(t,r)=>{const s=t.querySelector("ion-refresher-content");if(!s)return Promise.resolve(!1);await new Promise((t=>e(s,t)));const a=t.querySelector("ion-refresher-content .refresher-pulling ion-spinner"),o=t.querySelector("ion-refresher-content .refresher-refreshing ion-spinner");return null!==a&&null!==o&&("ios"===r&&g()||"md"===r)};export{p as a,m as b,c,n as d,g as e,o as g,x as h,h as s,u as t}
+import { writeTask } from '@stencil/core/internal/client';
+import { c as createAnimation } from './animation.js';
+import { c as componentOnReady, t as transitionEndAsync, f as clamp } from './helpers.js';
+
+const getRefresherAnimationType = (contentEl) => {
+    const previousSibling = contentEl.previousElementSibling;
+    const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
+    return hasHeader ? 'translate' : 'scale';
+};
+const createPullingAnimation = (type, pullingSpinner, refresherEl) => {
+    return type === 'scale'
+        ? createScaleAnimation(pullingSpinner, refresherEl)
+        : createTranslateAnimation(pullingSpinner, refresherEl);
+};
+const createBaseAnimation = (pullingRefresherIcon) => {
+    const spinner = pullingRefresherIcon.querySelector('ion-spinner');
+    const circle = spinner.shadowRoot.querySelector('circle');
+    const spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
+    const arrowContainer = pullingRefresherIcon.querySelector('.arrow-container');
+    const arrow = arrowContainer ? arrowContainer.querySelector('ion-icon') : null;
+    const baseAnimation = createAnimation().duration(1000).easing('ease-out');
+    const spinnerArrowContainerAnimation = createAnimation()
+        .addElement(spinnerArrowContainer)
+        .keyframes([
+        { offset: 0, opacity: '0.3' },
+        { offset: 0.45, opacity: '0.3' },
+        { offset: 0.55, opacity: '1' },
+        { offset: 1, opacity: '1' },
+    ]);
+    const circleInnerAnimation = createAnimation()
+        .addElement(circle)
+        .keyframes([
+        { offset: 0, strokeDasharray: '1px, 200px' },
+        { offset: 0.2, strokeDasharray: '1px, 200px' },
+        { offset: 0.55, strokeDasharray: '100px, 200px' },
+        { offset: 1, strokeDasharray: '100px, 200px' },
+    ]);
+    const circleOuterAnimation = createAnimation()
+        .addElement(spinner)
+        .keyframes([
+        { offset: 0, transform: 'rotate(-90deg)' },
+        { offset: 1, transform: 'rotate(210deg)' },
+    ]);
+    /**
+     * Only add arrow animation if present
+     * this allows users to customize the spinners
+     * without errors being thrown
+     */
+    if (arrowContainer && arrow) {
+        const arrowContainerAnimation = createAnimation()
+            .addElement(arrowContainer)
+            .keyframes([
+            { offset: 0, transform: 'rotate(0deg)' },
+            { offset: 0.3, transform: 'rotate(0deg)' },
+            { offset: 0.55, transform: 'rotate(280deg)' },
+            { offset: 1, transform: 'rotate(400deg)' },
+        ]);
+        const arrowAnimation = createAnimation()
+            .addElement(arrow)
+            .keyframes([
+            { offset: 0, transform: 'translateX(2px) scale(0)' },
+            { offset: 0.3, transform: 'translateX(2px) scale(0)' },
+            { offset: 0.55, transform: 'translateX(-1.5px) scale(1)' },
+            { offset: 1, transform: 'translateX(-1.5px) scale(1)' },
+        ]);
+        baseAnimation.addAnimation([arrowContainerAnimation, arrowAnimation]);
+    }
+    return baseAnimation.addAnimation([spinnerArrowContainerAnimation, circleInnerAnimation, circleOuterAnimation]);
+};
+const createScaleAnimation = (pullingRefresherIcon, refresherEl) => {
+    /**
+     * Do not take the height of the refresher icon
+     * because at this point the DOM has not updated,
+     * so the refresher icon is still hidden with
+     * display: none.
+     * The `ion-refresher` container height
+     * is roughly the amount we need to offset
+     * the icon by when pulling down.
+     */
+    const height = refresherEl.clientHeight;
+    const spinnerAnimation = createAnimation()
+        .addElement(pullingRefresherIcon)
+        .keyframes([
+        { offset: 0, transform: `scale(0) translateY(-${height}px)` },
+        { offset: 1, transform: 'scale(1) translateY(100px)' },
+    ]);
+    return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
+};
+const createTranslateAnimation = (pullingRefresherIcon, refresherEl) => {
+    /**
+     * Do not take the height of the refresher icon
+     * because at this point the DOM has not updated,
+     * so the refresher icon is still hidden with
+     * display: none.
+     * The `ion-refresher` container height
+     * is roughly the amount we need to offset
+     * the icon by when pulling down.
+     */
+    const height = refresherEl.clientHeight;
+    const spinnerAnimation = createAnimation()
+        .addElement(pullingRefresherIcon)
+        .keyframes([
+        { offset: 0, transform: `translateY(-${height}px)` },
+        { offset: 1, transform: 'translateY(100px)' },
+    ]);
+    return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
+};
+const createSnapBackAnimation = (pullingRefresherIcon) => {
+    return createAnimation()
+        .duration(125)
+        .addElement(pullingRefresherIcon)
+        .fromTo('transform', 'translateY(var(--ion-pulling-refresher-translate, 100px))', 'translateY(0px)');
+};
+// iOS Native Refresher
+// -----------------------------
+const setSpinnerOpacity = (spinner, opacity) => {
+    spinner.style.setProperty('opacity', opacity.toString());
+};
+const handleScrollWhilePulling = (ticks, numTicks, pullAmount) => {
+    const max = 1;
+    writeTask(() => {
+        ticks.forEach((el, i) => {
+            /**
+             * Compute the opacity of each tick
+             * mark as a percentage of the pullAmount
+             * offset by max / numTicks so
+             * the tick marks are shown staggered.
+             */
+            const min = i * (max / numTicks);
+            const range = max - min;
+            const start = pullAmount - min;
+            const progression = clamp(0, start / range, 1);
+            el.style.setProperty('opacity', progression.toString());
+        });
+    });
+};
+const handleScrollWhileRefreshing = (spinner, lastVelocityY) => {
+    writeTask(() => {
+        // If user pulls down quickly, the spinner should spin faster
+        spinner.style.setProperty('--refreshing-rotation-duration', lastVelocityY >= 1.0 ? '0.5s' : '2s');
+        spinner.style.setProperty('opacity', '1');
+    });
+};
+const translateElement = (el, value, duration = 200) => {
+    if (!el) {
+        return Promise.resolve();
+    }
+    const trans = transitionEndAsync(el, duration);
+    writeTask(() => {
+        el.style.setProperty('transition', `${duration}ms all ease-out`);
+        if (value === undefined) {
+            el.style.removeProperty('transform');
+        }
+        else {
+            el.style.setProperty('transform', `translate3d(0px, ${value}, 0px)`);
+        }
+    });
+    return trans;
+};
+// Utils
+// -----------------------------
+/**
+ * In order to use the native iOS refresher the device must support rubber band scrolling.
+ * As part of this, we need to exclude Desktop Safari because it has a slightly different rubber band effect that is not compatible with the native refresher in Ionic.
+ *
+ * We also need to be careful not to include devices that spoof their user agent.
+ * For example, when using iOS emulation in Chrome the user agent will be spoofed such that
+ * navigator.maxTouchPointer > 0. To work around this,
+ * we check to see if the apple-pay-logo is supported as a named image which is only
+ * true on Apple devices.
+ *
+ * We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
+ * for rubber band support. However, this property was removed on iPadOS and it's possible
+ * that this will be removed on iOS in the future too.
+ *
+ */
+const supportsRubberBandScrolling = () => {
+    return navigator.maxTouchPoints > 0 && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)');
+};
+const shouldUseNativeRefresher = async (referenceEl, mode) => {
+    const refresherContent = referenceEl.querySelector('ion-refresher-content');
+    if (!refresherContent) {
+        return Promise.resolve(false);
+    }
+    await new Promise((resolve) => componentOnReady(refresherContent, resolve));
+    const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner');
+    const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
+    return (pullingSpinner !== null &&
+        refreshingSpinner !== null &&
+        ((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md'));
+};
+
+export { setSpinnerOpacity as a, handleScrollWhilePulling as b, createSnapBackAnimation as c, createPullingAnimation as d, supportsRubberBandScrolling as e, getRefresherAnimationType as g, handleScrollWhileRefreshing as h, shouldUseNativeRefresher as s, translateElement as t };

package/components/ripple-effect.js

@@ -1,4 +1,112 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as t,HTMLElement as n,readTask as i,writeTask as a,h as e,Host as o,transformTag as r}from"@stencil/core/internal/client";import{b as s}from"./ionic-global.js";const c=t(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.type="bounded"}async addRipple(t,n){return new Promise((e=>{i((()=>{const i=this.el.getBoundingClientRect(),o=i.width,r=i.height,s=Math.sqrt(o*o+r*r),c=Math.max(r,o),u=this.unbounded?c:s+l,d=Math.floor(c*f),p=u/d;let b=t-i.left,k=n-i.top;this.unbounded&&(b=.5*o,k=.5*r);const w=b-.5*d,y=k-.5*d,h=.5*o-b,g=.5*r-k;a((()=>{const t=document.createElement("div");t.classList.add("ripple-effect");const n=t.style;n.top=y+"px",n.left=w+"px",n.width=n.height=d+"px",n.setProperty("--final-scale",`${p}`),n.setProperty("--translate-end",`${h}px, ${g}px`),(this.el.shadowRoot||this.el).appendChild(t),setTimeout((()=>{e((()=>{m(t)}))}),325)}))}))}))}get unbounded(){return"unbounded"===this.type}render(){const t=s(this);return e(o,{key:"ae9d3b1ed6773a9b9bb2267129f7e9af23b6c9fc",role:"presentation",class:{[t]:!0,unbounded:this.unbounded}})}get el(){return this}static get style(){return":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1));-webkit-animation:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@-webkit-keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}"}},[1,"ion-ripple-effect",{type:[1],addRipple:[64]}]),m=t=>{t.classList.add("fade-out"),setTimeout((()=>{t.remove()}),200)},l=10,f=.5;function u(){"undefined"!=typeof customElements&&["ion-ripple-effect"].forEach((t=>{"ion-ripple-effect"===t&&(customElements.get(r(t))||customElements.define(r(t),c))}))}export{c as R,u as d}
+import { proxyCustomElement, HTMLElement, readTask, writeTask, h, Host } from '@stencil/core/internal/client';
+import { b as getIonMode } from './ionic-global.js';
+
+const rippleEffectCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1));-webkit-animation:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@-webkit-keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
+
+const RippleEffect = /*@__PURE__*/ proxyCustomElement(class RippleEffect extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * Sets the type of ripple-effect:
+         *
+         * - `bounded`: the ripple effect expands from the user's click position
+         * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
+         *
+         * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
+         * while surfaces for unbounded ripples should have it set to visible.
+         */
+        this.type = 'bounded';
+    }
+    /**
+     * Adds the ripple effect to the parent element.
+     *
+     * @param x The horizontal coordinate of where the ripple should start.
+     * @param y The vertical coordinate of where the ripple should start.
+     */
+    async addRipple(x, y) {
+        return new Promise((resolve) => {
+            readTask(() => {
+                const rect = this.el.getBoundingClientRect();
+                const width = rect.width;
+                const height = rect.height;
+                const hypotenuse = Math.sqrt(width * width + height * height);
+                const maxDim = Math.max(height, width);
+                const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
+                const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
+                const finalScale = maxRadius / initialSize;
+                let posX = x - rect.left;
+                let posY = y - rect.top;
+                if (this.unbounded) {
+                    posX = width * 0.5;
+                    posY = height * 0.5;
+                }
+                const styleX = posX - initialSize * 0.5;
+                const styleY = posY - initialSize * 0.5;
+                const moveX = width * 0.5 - posX;
+                const moveY = height * 0.5 - posY;
+                writeTask(() => {
+                    const div = document.createElement('div');
+                    div.classList.add('ripple-effect');
+                    const style = div.style;
+                    style.top = styleY + 'px';
+                    style.left = styleX + 'px';
+                    style.width = style.height = initialSize + 'px';
+                    style.setProperty('--final-scale', `${finalScale}`);
+                    style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
+                    const container = this.el.shadowRoot || this.el;
+                    container.appendChild(div);
+                    setTimeout(() => {
+                        resolve(() => {
+                            removeRipple(div);
+                        });
+                    }, 225 + 100);
+                });
+            });
+        });
+    }
+    get unbounded() {
+        return this.type === 'unbounded';
+    }
+    render() {
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'ae9d3b1ed6773a9b9bb2267129f7e9af23b6c9fc', role: "presentation", class: {
+                [mode]: true,
+                unbounded: this.unbounded,
+            } }));
+    }
+    get el() { return this; }
+    static get style() { return rippleEffectCss; }
+}, [257, "ion-ripple-effect", {
+        "type": [1],
+        "addRipple": [64]
+    }]);
+const removeRipple = (ripple) => {
+    ripple.classList.add('fade-out');
+    setTimeout(() => {
+        ripple.remove();
+    }, 200);
+};
+const PADDING = 10;
+const INITIAL_ORIGIN_SCALE = 0.5;
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-ripple-effect"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-ripple-effect":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RippleEffect);
+            }
+            break;
+    } });
+}
+
+export { RippleEffect as R, defineCustomElement as d };

package/components/select-modal.js

@@ -1,4 +1,199 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as o,HTMLElement as e,h as i,forceUpdate as t,Host as n,transformTag as c}from"@stencil/core/internal/client";import{b as a}from"./ionic-global.js";import{s as r}from"./overlays.js";import{g as s}from"./theme.js";import{d as l}from"./button.js";import{d}from"./buttons.js";import{d as m}from"./checkbox.js";import{d as b}from"./content.js";import{d as h}from"./header.js";import{d as p}from"./icon.js";import{d as u}from"./item.js";import{d as f}from"./list.js";import{d as k}from"./radio.js";import{d as g}from"./radio-group.js";import{d as v}from"./ripple-effect.js";import{d as y}from"./title.js";import{d as x}from"./toolbar.js";const j=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.cancelText="Close",this.options=[]}closeModal(){const o=this.el.closest("ion-modal");o&&o.dismiss()}findOptionFromEvent(o){const{options:e}=this;return e.find((e=>e.value===o.target.value))}getValues(o){const{multiple:e,options:i}=this;if(e)return i.filter((o=>o.checked)).map((o=>o.value));const t=o?this.findOptionFromEvent(o):null;return t?t.value:void 0}callOptionHandler(o){const e=this.findOptionFromEvent(o),i=this.getValues(o);(null==e?void 0:e.handler)&&r(e.handler,i)}setChecked(o){const{multiple:e}=this,i=this.findOptionFromEvent(o);e&&i&&(i.checked=o.detail.checked)}renderRadioOptions(){const o=this.options.filter((o=>o.checked)).map((o=>o.value))[0];return i("ion-radio-group",{value:o,onIonChange:o=>this.callOptionHandler(o)},this.options.map((e=>i("ion-item",{lines:"none",class:Object.assign({"item-radio-checked":e.value===o},s(e.cssClass))},i("ion-radio",{value:e.value,disabled:e.disabled,justify:"start",labelPlacement:"end",onClick:()=>this.closeModal(),onKeyUp:o=>{" "===o.key&&this.closeModal()}},e.text)))))}renderCheckboxOptions(){return this.options.map((o=>i("ion-item",{class:Object.assign({"item-checkbox-checked":o.checked},s(o.cssClass))},i("ion-checkbox",{value:o.value,disabled:o.disabled,checked:o.checked,justify:"start",labelPlacement:"end",onIonChange:o=>{this.setChecked(o),this.callOptionHandler(o),t(this)}},o.text))))}render(){return i(n,{key:"59ba79ffdbb69befe8e13745450c1071a1fe8c6c",class:a(this)},i("ion-header",{key:"fa4d08ee43eec4b9add09d9ffabcba9ed13dd4af"},i("ion-toolbar",{key:"b5e26cf092297c51c1dba3ce7963e7b03420393b"},void 0!==this.header&&i("ion-title",{key:"a8a93cdea4d119d3a17d8cef3878b8a1daa86e26"},this.header),i("ion-buttons",{key:"bbc656713b41ef09099ed466f93a9cfbdaceecc1",slot:"end"},i("ion-button",{key:"80b8751fe4c96e06b620a0b9d17b2d9b3da2faa5",onClick:()=>this.closeModal()},this.cancelText)))),i("ion-content",{key:"a251fc00ae4cc7e6b3abe13caa10d95bb515558e"},i("ion-list",{key:"bcaf38d6d91accfabb4a9d26783bc0e4801abe3c"},!0===this.multiple?this.renderCheckboxOptions():this.renderRadioOptions())))}get el(){return this}static get style(){return{ionic:'.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)}',ios:'.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)}',md:'.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)}'}}},[34,"ion-select-modal",{header:[1],cancelText:[1,"cancel-text"],multiple:[4],options:[16]}]);function E(){"undefined"!=typeof customElements&&["ion-select-modal","ion-button","ion-buttons","ion-checkbox","ion-content","ion-header","ion-icon","ion-item","ion-list","ion-radio","ion-radio-group","ion-ripple-effect","ion-title","ion-toolbar"].forEach((o=>{switch(o){case"ion-select-modal":customElements.get(c(o))||customElements.define(c(o),j);break;case"ion-button":customElements.get(c(o))||l();break;case"ion-buttons":customElements.get(c(o))||d();break;case"ion-checkbox":customElements.get(c(o))||m();break;case"ion-content":customElements.get(c(o))||b();break;case"ion-header":customElements.get(c(o))||h();break;case"ion-icon":customElements.get(c(o))||p();break;case"ion-item":customElements.get(c(o))||u();break;case"ion-list":customElements.get(c(o))||f();break;case"ion-radio":customElements.get(c(o))||k();break;case"ion-radio-group":customElements.get(c(o))||g();break;case"ion-ripple-effect":customElements.get(c(o))||v();break;case"ion-title":customElements.get(c(o))||y();break;case"ion-toolbar":customElements.get(c(o))||x()}}))}export{j as S,E as d}
+import { proxyCustomElement, HTMLElement, h, forceUpdate, Host } from '@stencil/core/internal/client';
+import { b as getIonMode } from './ionic-global.js';
+import { s as safeCall } from './overlays.js';
+import { g as getClassMap } from './theme.js';
+import { d as defineCustomElement$d } from './button.js';
+import { d as defineCustomElement$c } from './buttons.js';
+import { d as defineCustomElement$b } from './checkbox.js';
+import { d as defineCustomElement$a } from './content.js';
+import { d as defineCustomElement$9 } from './header.js';
+import { d as defineCustomElement$8 } from './icon.js';
+import { d as defineCustomElement$7 } from './item.js';
+import { d as defineCustomElement$6 } from './list.js';
+import { d as defineCustomElement$5 } from './radio.js';
+import { d as defineCustomElement$4 } from './radio-group.js';
+import { d as defineCustomElement$3 } from './ripple-effect.js';
+import { d as defineCustomElement$2 } from './title.js';
+import { d as defineCustomElement$1 } from './toolbar.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 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 = /*@__PURE__*/ proxyCustomElement(class SelectModal extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * The text to display on the cancel button.
+         */
+        this.cancelText = 'Close';
+        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) {
+            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;
+        }
+    }
+    renderRadioOptions() {
+        const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
+        return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { lines: "none", class: Object.assign({
+                // TODO FW-4784
+                'item-radio-checked': option.value === checked
+            }, getClassMap(option.cssClass)) }, 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) => (h("ion-item", { class: Object.assign({
+                // TODO FW-4784
+                'item-checkbox-checked': option.checked
+            }, getClassMap(option.cssClass)) }, 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
+                forceUpdate(this);
+            } }, option.text))));
+    }
+    render() {
+        return (h(Host, { key: '59ba79ffdbb69befe8e13745450c1071a1fe8c6c', class: getIonMode(this) }, h("ion-header", { key: 'fa4d08ee43eec4b9add09d9ffabcba9ed13dd4af' }, h("ion-toolbar", { key: 'b5e26cf092297c51c1dba3ce7963e7b03420393b' }, this.header !== undefined && h("ion-title", { key: 'a8a93cdea4d119d3a17d8cef3878b8a1daa86e26' }, this.header), h("ion-buttons", { key: 'bbc656713b41ef09099ed466f93a9cfbdaceecc1', slot: "end" }, h("ion-button", { key: '80b8751fe4c96e06b620a0b9d17b2d9b3da2faa5', onClick: () => this.closeModal() }, this.cancelText)))), h("ion-content", { key: 'a251fc00ae4cc7e6b3abe13caa10d95bb515558e' }, h("ion-list", { key: 'bcaf38d6d91accfabb4a9d26783bc0e4801abe3c' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+    }
+    get el() { return this; }
+    static get style() { return {
+        ionic: ionicSelectModalMdCss,
+        ios: selectModalIosCss,
+        md: selectModalMdCss
+    }; }
+}, [290, "ion-select-modal", {
+        "header": [1],
+        "cancelText": [1, "cancel-text"],
+        "multiple": [4],
+        "options": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-select-modal", "ion-button", "ion-buttons", "ion-checkbox", "ion-content", "ion-header", "ion-icon", "ion-item", "ion-list", "ion-radio", "ion-radio-group", "ion-ripple-effect", "ion-title", "ion-toolbar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-select-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SelectModal);
+            }
+            break;
+        case "ion-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "ion-buttons":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "ion-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "ion-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "ion-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ion-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ion-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ion-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ion-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ion-radio-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ion-ripple-effect":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ion-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ion-toolbar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SelectModal as S, defineCustomElement as d };