@ionic/core 8.7.17-dev.11772118942.181221d4 → 8.7.17-dev.11772568074.1d7a4aea

package/components/refresher.utils.js

@@ -1,196 +1,4 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-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 };
+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}

package/components/ripple-effect.js

@@ -1,112 +1,4 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-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 };
+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}

package/components/select-modal.js

@@ -1,199 +1,4 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-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 };
+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}