@ionic/core 8.8.19-dev.11786730389.1a1927bf → 8.8.19-dev.11786832241.150538c7

package/dist/cjs/slot-mutation-controller-CgTGFqlW.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-CaLhEmTE.js');
+var dir = require('./dir-Brx7VkvP.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/collection/components/input/input.ios.css

@@ -206,12 +206,6 @@
 }
 
 .input-clear-icon {
-  -webkit-margin-start: auto;
-  margin-inline-start: auto;
-  -webkit-margin-end: auto;
-  margin-inline-end: auto;
-  margin-top: auto;
-  margin-bottom: auto;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -269,14 +263,47 @@
   line-height: normal;
 }
 
+.input-control {
+  display: flex;
+  flex-grow: 1;
+  width: 100%;
+  /**
+  * Allows the control to shrink below the label and input's intrinsic
+  * width, preventing the start and end slots from being pushed outside
+  * the wrapper. The label and input truncate independently, so it can
+  * use whatever space remains after accounting for the slots.
+  */
+  min-width: 0;
+}
+
 .native-wrapper {
   display: flex;
   position: relative;
   flex-grow: 1;
-  align-items: center;
   width: 100%;
 }
 
+/**
+ * When the label sits beside the input, the label should size to its content
+ * and the input should take the remaining space. A zero flex basis prevents
+ * the input from requesting its full width and forcing the label to shrink.
+ * Stacked and floating placements use a column layout, so their flex basis
+ * controls height instead and does not need to be overridden.
+ */
+:host(.input-label-placement-start) .native-wrapper,
+:host(.input-label-placement-end) .native-wrapper,
+:host(.input-label-placement-fixed) .native-wrapper {
+  flex: 1 1 0;
+}
+
+.input-start,
+.input-end {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+}
+
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -377,6 +404,12 @@
    */
   display: flex;
   align-items: center;
+  /**
+  * Allows the label to shrink below its intrinsic content width.
+  * Without this the label keeps its full width and can push the
+  * input and end slot outside the wrapper.
+  */
+  min-width: 0;
   /**
    * Label text should not extend
    * beyond the bounds of the input.
@@ -395,6 +428,18 @@
   pointer-events: none;
 }
 
+/**
+ * When start/end slots are added or removed, we temporarily
+ * disable the label transition to prevent the floating label
+ * from animating as its position is adjusted.
+ *
+ * This class is applied by the start container controller, so
+ * renaming it here requires renaming it there too.
+ */
+:host(.skip-label-transition) .label-text-wrapper {
+  transition: none;
+}
+
 /**
  * We need to use two elements instead of
  * one. The .label-text-wrapper is responsible
@@ -438,7 +483,7 @@
  * Label is on the left of the input in LTR and
  * on the right in RTL.
  */
-:host(.input-label-placement-start) .input-wrapper {
+:host(.input-label-placement-start) .input-control {
   flex-direction: row;
 }
 
@@ -460,7 +505,7 @@
  * Label is on the right of the input in LTR and
  * on the left in RTL.
  */
-:host(.input-label-placement-end) .input-wrapper {
+:host(.input-label-placement-end) .input-control {
   flex-direction: row-reverse;
 }
 
@@ -508,10 +553,9 @@
  * Floating: Label sits over the input when the input has no
  * value and is blurred. Label sits above the input and is scaled
  * down when the input is focused or has a value.
- *
  */
-:host(.input-label-placement-stacked) .input-wrapper,
-:host(.input-label-placement-floating) .input-wrapper {
+:host(.input-label-placement-stacked) .input-control,
+:host(.input-label-placement-floating) .input-control {
   flex-direction: column;
   align-items: start;
 }
@@ -542,18 +586,6 @@
   }
 }
 
-/**
- * Ensures the input does not
- * overlap the label.
- */
-:host(.input-label-placement-stacked) input,
-:host(.input-label-placement-floating) input {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 1px;
-  margin-bottom: 0;
-}
-
 /**
  * This makes the label sit over the input
  * when the input is blurred and has no value.