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

package/dist/cjs/slot-mutation-controller-DPHmqXdV.js

@@ -0,0 +1,397 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+var index = require('./index-DkNv4J_i.js');
+var helpers = require('./helpers-YPQybDph.js');
+var dir = require('./dir-zwDPRE5K.js');
+
+/**
+ * A utility to calculate the size of an outline notch
+ * width relative to the content passed. This is used in
+ * components such as `ion-select` with `fill="outline"`
+ * where we need to pass slotted HTML content. This is not
+ * needed when rendering plaintext content because we can
+ * render the plaintext again hidden with `opacity: 0` inside
+ * of the notch. As a result we can rely on the intrinsic size
+ * of the element to correctly compute the notch width. We
+ * cannot do this with slotted content because we cannot project
+ * it into 2 places at once.
+ *
+ * @internal
+ * @param el: The host element
+ * @param getNotchSpacerEl: A function that returns a reference to the notch spacer element inside of the component template.
+ * @param getLabelSlot: A function that returns a reference to the slotted content.
+ */
+const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
+    let notchVisibilityIO;
+    const needsExplicitNotchWidth = () => {
+        const notchSpacerEl = getNotchSpacerEl();
+        if (
+        /**
+         * If the notch is not being used
+         * then we do not need to set the notch width.
+         */
+        notchSpacerEl === undefined ||
+            /**
+             * If either the label property is being
+             * used or the label slot is not defined,
+             * then we do not need to estimate the notch width.
+             */
+            el.label !== undefined ||
+            getLabelSlot() === null) {
+            return false;
+        }
+        return true;
+    };
+    const calculateNotchWidth = () => {
+        if (needsExplicitNotchWidth()) {
+            /**
+             * Run this the frame after
+             * the browser has re-painted the host element.
+             * Otherwise, the label element may have a width
+             * of 0 and the IntersectionObserver will be used.
+             */
+            helpers.raf(() => {
+                setNotchWidth();
+            });
+        }
+    };
+    /**
+     * When using a label prop we can render
+     * the label value inside of the notch and
+     * let the browser calculate the size of the notch.
+     * However, we cannot render the label slot in multiple
+     * places so we need to manually calculate the notch dimension
+     * based on the size of the slotted content.
+     *
+     * This function should only be used to set the notch width
+     * on slotted label content. The notch width for label prop
+     * content is automatically calculated based on the
+     * intrinsic size of the label text.
+     */
+    const setNotchWidth = () => {
+        const notchSpacerEl = getNotchSpacerEl();
+        if (notchSpacerEl === undefined) {
+            return;
+        }
+        if (!needsExplicitNotchWidth()) {
+            notchSpacerEl.style.removeProperty('width');
+            return;
+        }
+        const width = getLabelSlot().scrollWidth;
+        if (
+        /**
+         * If the computed width of the label is 0
+         * and notchSpacerEl's offsetParent is null
+         * then that means the element is hidden.
+         * As a result, we need to wait for the element
+         * to become visible before setting the notch width.
+         *
+         * We do not check el.offsetParent because
+         * that can be null if the host element has
+         * position: fixed applied to it.
+         * notchSpacerEl does not have position: fixed.
+         */
+        width === 0 &&
+            notchSpacerEl.offsetParent === null &&
+            index.win !== undefined &&
+            'IntersectionObserver' in index.win) {
+            /**
+             * If there is an IO already attached
+             * then that will update the notch
+             * once the element becomes visible.
+             * As a result, there is no need to create
+             * another one.
+             */
+            if (notchVisibilityIO !== undefined) {
+                return;
+            }
+            const io = (notchVisibilityIO = new IntersectionObserver((ev) => {
+                /**
+                 * If the element is visible then we
+                 * can try setting the notch width again.
+                 */
+                if (ev[0].intersectionRatio === 1) {
+                    setNotchWidth();
+                    io.disconnect();
+                    notchVisibilityIO = undefined;
+                }
+            }, 
+            /**
+             * Set the root to be the host element
+             * This causes the IO callback
+             * to be fired in WebKit as soon as the element
+             * is visible. If we used the default root value
+             * then WebKit would only fire the IO callback
+             * after any animations (such as a modal transition)
+             * finished, and there would potentially be a flicker.
+             */
+            { threshold: 0.01, root: el }));
+            io.observe(notchSpacerEl);
+            return;
+        }
+        /**
+         * If the element is visible then we can set the notch width.
+         * The notch is only visible when the label is scaled,
+         * which is why we multiply the width by 0.75 as this is
+         * the same amount the label element is scaled by in the host CSS.
+         * (See $form-control-label-stacked-scale in ionic.globals.scss).
+         */
+        notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
+    };
+    const destroy = () => {
+        if (notchVisibilityIO) {
+            notchVisibilityIO.disconnect();
+            notchVisibilityIO = undefined;
+        }
+    };
+    return {
+        calculateNotchWidth,
+        destroy,
+    };
+};
+
+/**
+ * Applied to the host while the label is being repositioned. The
+ * component stylesheets style this class, so it must stay in sync with
+ * the `skip-label-transition` selector in those files. Renaming it here
+ * requires renaming it there too.
+ */
+const SKIP_LABEL_TRANSITION_CLASS = 'skip-label-transition';
+/**
+ * Set on the host as an inline style. The component stylesheets declare
+ * this property and read it with `var()`, so it must stay in sync with
+ * the `--internal-start-container-adjustment` references in those files.
+ * Renaming it here requires renaming it there too.
+ */
+const START_CONTAINER_ADJUSTMENT_VAR = '--internal-start-container-adjustment';
+/**
+ * A utility to measure and update the start container width adjustment
+ * for form components (input, textarea, select) with `fill="outline"`.
+ * This adjustment compensates for the start container width when
+ * positioning floating/stacked labels within the outline border.
+ *
+ * Measurement is deferred with raf() to avoid forcing layout during
+ * component updates, and a ResizeObserver watches for dynamic width
+ * changes (e.g., when web fonts load or async content changes).
+ *
+ * @internal
+ * @param el - The host element (ion-input, ion-textarea, or ion-select).
+ * @param getStartContainer - A callback that returns the start container element.
+ * @param shouldApplyAdjustment - A callback that determines whether the adjustment should be applied.
+ */
+const createStartContainerController = (el, getStartContainer, shouldApplyAdjustment) => {
+    let resizeObserver;
+    let observedContainer;
+    let measurementRaf;
+    let transitionRaf;
+    let appliedAdjustment;
+    const calculateAdjustment = () => {
+        const startSlot = getStartContainer();
+        if (!startSlot || !shouldApplyAdjustment()) {
+            return '';
+        }
+        /*
+         * Round to one decimal place so fractional widths produce a stable
+         * label offset when the start container is added, removed, or resized.
+         */
+        const startContainerWidth = startSlot.getBoundingClientRect().width;
+        const roundedWidth = Math.round(startContainerWidth * 10) / 10;
+        const sign = dir.isRTL(el) ? '' : '-';
+        return roundedWidth ? `${sign}${roundedWidth}px` : '0px';
+    };
+    const scheduleAdjustmentUpdate = () => {
+        // Return if there is already a measurement queued to avoid a flicker
+        if (measurementRaf !== undefined) {
+            return;
+        }
+        /*
+         * Defer the measurement until the next animation frame so layout
+         * is measured after the current update has been applied.
+         */
+        measurementRaf = helpers.raf(() => {
+            measurementRaf = undefined;
+            const adjustment = calculateAdjustment();
+            // Only suppress the label transition when the label has to move
+            if (adjustment !== appliedAdjustment) {
+                // Discard a removal queued by an earlier change
+                if (transitionRaf !== undefined) {
+                    cancelAnimationFrame(transitionRaf);
+                }
+                el.classList.add(SKIP_LABEL_TRANSITION_CLASS);
+                el.style.setProperty(START_CONTAINER_ADJUSTMENT_VAR, adjustment);
+                appliedAdjustment = adjustment;
+                // Re-enable the transition once the new offset has been painted
+                transitionRaf = helpers.raf(() => {
+                    transitionRaf = undefined;
+                    el.classList.remove(SKIP_LABEL_TRANSITION_CLASS);
+                });
+            }
+            setupResizeObserver();
+        });
+    };
+    const disconnectResizeObserver = () => {
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            resizeObserver = undefined;
+            observedContainer = undefined;
+        }
+    };
+    const setupResizeObserver = () => {
+        const startSlot = getStartContainer();
+        // Stop watching once the adjustment no longer applies
+        if (!startSlot || !shouldApplyAdjustment()) {
+            disconnectResizeObserver();
+            return;
+        }
+        // Return when prerendering or already watching this container
+        if (typeof ResizeObserver !== 'function' || (resizeObserver && observedContainer === startSlot)) {
+            return;
+        }
+        disconnectResizeObserver();
+        resizeObserver = new ResizeObserver(() => {
+            scheduleAdjustmentUpdate();
+        });
+        observedContainer = startSlot;
+        resizeObserver.observe(startSlot);
+    };
+    const calculateStartContainerWidth = () => {
+        scheduleAdjustmentUpdate();
+    };
+    const destroy = () => {
+        disconnectResizeObserver();
+        if (measurementRaf !== undefined) {
+            cancelAnimationFrame(measurementRaf);
+            measurementRaf = undefined;
+        }
+        // Tearing down mid-toggle would leave the transition disabled
+        if (transitionRaf !== undefined) {
+            cancelAnimationFrame(transitionRaf);
+            transitionRaf = undefined;
+            el.classList.remove(SKIP_LABEL_TRANSITION_CLASS);
+        }
+        // Re-apply from scratch if the element is connected again
+        appliedAdjustment = undefined;
+    };
+    return {
+        calculateStartContainerWidth,
+        destroy,
+    };
+};
+
+/**
+ * Used to update a scoped component that uses emulated slots. This fires when
+ * content is passed into the slot or when the content inside of a slot changes.
+ * This is not needed for components using native slots in the Shadow DOM.
+ * @internal
+ * @param el The host element to observe
+ * @param slotName mutationCallback will fire when nodes on these slot(s) change
+ * @param mutationCallback The callback to fire whenever the slotted content changes
+ */
+const createSlotMutationController = (el, slotName, mutationCallback) => {
+    let hostMutationObserver;
+    let slottedContentMutationObserver;
+    if (index.win !== undefined && 'MutationObserver' in index.win) {
+        const slots = Array.isArray(slotName) ? slotName : [slotName];
+        hostMutationObserver = new MutationObserver((entries) => {
+            for (const entry of entries) {
+                for (const node of entry.addedNodes) {
+                    /**
+                     * Check to see if the added node
+                     *  is our slotted content.
+                     */
+                    if (node.nodeType === Node.ELEMENT_NODE && slots.includes(node.slot)) {
+                        /**
+                         * If so, we want to watch the slotted
+                         * content itself for changes. This lets us
+                         * detect when content inside of the slot changes.
+                         */
+                        mutationCallback();
+                        /**
+                         * Adding the listener in an raf
+                         * waits until Stencil moves the slotted element
+                         * into the correct place in the event that
+                         * slotted content is being added.
+                         */
+                        helpers.raf(() => watchForSlotChange(node));
+                        return;
+                    }
+                }
+            }
+        });
+        hostMutationObserver.observe(el, {
+            childList: true,
+            /**
+             * This fixes an issue with the `ion-input` and
+             * `ion-textarea` not re-rendering in some cases
+             * when using the label slot functionality.
+             *
+             * HTML element patches in Stencil that are enabled
+             * by the `experimentalSlotFixes` flag in Stencil v4
+             * result in DOM manipulations that won't trigger
+             * the current mutation observer configuration and
+             * callback.
+             */
+            subtree: true,
+        });
+    }
+    /**
+     * Listen for changes inside of the slotted content.
+     * We can listen for subtree changes here to be
+     * informed of text within the slotted content
+     * changing. Doing this on the host is possible
+     * but it is much more expensive to do because
+     * it also listens for changes to the internals
+     * of the component.
+     */
+    const watchForSlotChange = (slottedEl) => {
+        if (slottedContentMutationObserver) {
+            slottedContentMutationObserver.disconnect();
+            slottedContentMutationObserver = undefined;
+        }
+        slottedContentMutationObserver = new MutationObserver((entries) => {
+            mutationCallback();
+            for (const entry of entries) {
+                for (const node of entry.removedNodes) {
+                    /**
+                     * If the element was removed then we
+                     * need to destroy the MutationObserver
+                     * so the element can be garbage collected.
+                     */
+                    if (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) {
+                        destroySlottedContentObserver();
+                    }
+                }
+            }
+        });
+        /**
+         * Listen for changes inside of the element
+         * as well as anything deep in the tree.
+         * We listen on the parentElement so that we can
+         * detect when slotted element itself is removed.
+         */
+        slottedContentMutationObserver.observe(slottedEl.parentElement ?? slottedEl, { subtree: true, childList: true });
+    };
+    const destroy = () => {
+        if (hostMutationObserver) {
+            hostMutationObserver.disconnect();
+            hostMutationObserver = undefined;
+        }
+        destroySlottedContentObserver();
+    };
+    const destroySlottedContentObserver = () => {
+        if (slottedContentMutationObserver) {
+            slottedContentMutationObserver.disconnect();
+            slottedContentMutationObserver = undefined;
+        }
+    };
+    return {
+        destroy,
+    };
+};
+
+exports.createNotchController = createNotchController;
+exports.createSlotMutationController = createSlotMutationController;
+exports.createStartContainerController = createStartContainerController;

package/dist/cjs/{status-tap-7FzRlXNr.js → status-tap-o9IIymsP.js}

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-BfaXsATC.js');
-var index$1 = require('./index-CD92bI7B.js');
-var helpers = require('./helpers-DdZyl6WL.js');
-require('./dir-DD0jPVH3.js');
+var index = require('./index-uvry__L4.js');
+var index$1 = require('./index-zVCah4Uz.js');
+var helpers = require('./helpers-YPQybDph.js');
+require('./dir-zwDPRE5K.js');
 
 const startStatusTap = () => {
     const win = window;

package/dist/cjs/{swipe-back-DwTZiAc9.js → swipe-back-B7X9VOlH.js}

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-var helpers = require('./helpers-DdZyl6WL.js');
-var dir = require('./dir-DD0jPVH3.js');
-var index = require('./index-BJ2-LydH.js');
-require('./index-BfaXsATC.js');
-require('./gesture-controller-dtqlP_q4.js');
+var helpers = require('./helpers-YPQybDph.js');
+var dir = require('./dir-zwDPRE5K.js');
+var index = require('./index-DwlRtFZe.js');
+require('./index-uvry__L4.js');
+require('./gesture-controller-BDUH7687.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {
     const win = el.ownerDocument.defaultView;

package/dist/cjs/{theme-CeDs6Hcv.js → theme-Bw0rpaNN.js}

@@ -11,7 +11,12 @@ const hostContext = (selector, el) => {
  */
 const createColorClasses = (color, cssClassMap) => {
     return typeof color === 'string' && color.length > 0
-        ? Object.assign({ 'ion-color': true, [`ion-color-${color}`]: true }, cssClassMap) : cssClassMap;
+        ? {
+            'ion-color': true,
+            [`ion-color-${color}`]: true,
+            ...cssClassMap,
+        }
+        : cssClassMap;
 };
 const getClassList = (classes) => {
     if (classes !== undefined) {

package/dist/collection/collection-manifest.json

@@ -58,8 +58,6 @@
     "components/nav-link/nav-link.js",
     "components/note/note.js",
     "components/picker-column-option/picker-column-option.js",
-    "components/picker-legacy/picker.js",
-    "components/picker-legacy-column/picker-column.js",
     "components/popover/popover.js",
     "components/progress-bar/progress-bar.js",
     "components/range/range.js",
@@ -80,8 +78,8 @@
     "components/segment-content/segment-content.js",
     "components/segment-view/segment-view.js",
     "components/select/select.js",
-    "components/select-modal/select-modal.js",
     "components/select-option/select-option.js",
+    "components/select-modal/select-modal.js",
     "components/select-popover/select-popover.js",
     "components/skeleton-text/skeleton-text.js",
     "components/spinner/spinner.js",
@@ -143,6 +141,11 @@
         "ion-chip"
       ]
     },
+    {
+      "components": [
+        "ion-datetime"
+      ]
+    },
     {
       "components": [
         "ion-input"
@@ -291,13 +294,6 @@
         "ion-thumbnail"
       ]
     },
-    {
-      "components": [
-        "ion-datetime",
-        "ion-picker-legacy",
-        "ion-picker-legacy-column"
-      ]
-    },
     {
       "components": [
         "ion-fab",