@ionic/core 8.8.4-dev.11775576543.172b7b99 → 8.8.4-dev.11775666666.132201b7

package/hydrate/index.mjs

@@ -22148,10 +22148,18 @@ class ItemSliding {
         this.disabledChanged();
     }
     disconnectedCallback() {
+        var _a;
         if (this.gesture) {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        if (this.tmr !== undefined) {
+            clearTimeout(this.tmr);
+            this.tmr = undefined;
+        }
+        // Abort any in-progress animation. The abort handler rejects the pending
+        // promise, causing animateFullSwipe's finally block to run cleanup.
+        (_a = this.animationAbortController) === null || _a === void 0 ? void 0 : _a.abort();
         this.item = null;
         this.leftOptions = this.rightOptions = undefined;
         if (openSlidingItem === this.el) {
@@ -22185,6 +22193,9 @@ class ItemSliding {
      */
     async open(side) {
         var _a;
+        if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
+            return;
+        }
         /**
          * It is possible for the item to be added to the DOM
          * after the item-sliding component was created. As a result,
@@ -22236,6 +22247,9 @@ class ItemSliding {
      * Close the sliding item. Items can also be closed from the [List](./list).
      */
     async close() {
+        if ((this.state & 128 /* SlidingState.AnimatingFullSwipe */) !== 0) {
+            return;
+        }
         this.setOpenAmount(0, true);
     }
     /**
@@ -22266,6 +22280,111 @@ class ItemSliding {
             return this.rightOptions;
         }
     }
+    /**
+     * Check if the given item options element contains at least one expandable, non-disabled option.
+     */
+    hasExpandableOptions(options) {
+        if (!options)
+            return false;
+        const optionElements = options.querySelectorAll('ion-item-option');
+        return Array.from(optionElements).some((option) => {
+            return option.expandable === true && !option.disabled;
+        });
+    }
+    /**
+     * Returns a Promise that resolves after `ms` milliseconds, or rejects if the
+     * given AbortSignal is fired before the timer expires.
+     */
+    delay(ms, signal) {
+        return new Promise((resolve, reject) => {
+            const id = setTimeout(resolve, ms);
+            signal.addEventListener('abort', () => {
+                clearTimeout(id);
+                reject(new DOMException('Animation cancelled', 'AbortError'));
+            }, { once: true });
+        });
+    }
+    /**
+     * Animate the item to a specific position using CSS transitions.
+     * Returns a Promise that resolves when the animation completes, or rejects if
+     * the given AbortSignal is fired.
+     */
+    animateToPosition(position, duration, signal) {
+        return new Promise((resolve, reject) => {
+            if (!this.item) {
+                return resolve();
+            }
+            this.item.style.transition = `transform ${duration}ms ease-out`;
+            this.item.style.transform = `translate3d(${-position}px, 0, 0)`;
+            const id = setTimeout(resolve, duration);
+            signal.addEventListener('abort', () => {
+                clearTimeout(id);
+                reject(new DOMException('Animation cancelled', 'AbortError'));
+            }, { once: true });
+        });
+    }
+    /**
+     * Calculate the swipe threshold distance required to trigger a full swipe animation.
+     * Returns the maximum options width plus a margin to ensure it's achievable.
+     */
+    getSwipeThreshold(direction) {
+        const maxWidth = direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide;
+        return maxWidth + SWIPE_MARGIN;
+    }
+    /**
+     * Animate the item through a full swipe sequence: off-screen → trigger action → return.
+     * This is used when an expandable option is swiped beyond the threshold.
+     */
+    async animateFullSwipe(direction) {
+        const abortController = new AbortController();
+        this.animationAbortController = abortController;
+        const { signal } = abortController;
+        // Prevent interruption during animation
+        if (this.gesture) {
+            this.gesture.enable(false);
+        }
+        try {
+            const options = direction === 'end' ? this.rightOptions : this.leftOptions;
+            // Trigger expandable state without moving the item
+            // Set state directly so expandable option fills its container, starting from
+            // the exact position where the user released, without any visual snap.
+            this.state =
+                direction === 'end'
+                    ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */ | 128 /* SlidingState.AnimatingFullSwipe */
+                    : 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */ | 128 /* SlidingState.AnimatingFullSwipe */;
+            await this.delay(100, signal);
+            // Animate off-screen while maintaining the expanded state
+            const offScreenDistance = direction === 'end' ? window.innerWidth : -window.innerWidth;
+            await this.animateToPosition(offScreenDistance, 250, signal);
+            // Trigger action
+            if (options) {
+                options.fireSwipeEvent();
+            }
+            // Small delay before returning
+            await this.delay(300, signal);
+            // Return to closed state
+            await this.animateToPosition(0, 250, signal);
+        }
+        catch (_a) {
+            // Animation was aborted (e.g. component disconnected). finally handles cleanup.
+        }
+        finally {
+            this.animationAbortController = undefined;
+            // Reset state
+            if (this.item) {
+                this.item.style.transition = '';
+                this.item.style.transform = '';
+            }
+            this.openAmount = 0;
+            this.state = 2 /* SlidingState.Disabled */;
+            if (openSlidingItem === this.el) {
+                openSlidingItem = undefined;
+            }
+            if (this.gesture) {
+                this.gesture.enable(!this.disabled);
+            }
+        }
+    }
     async updateOptions() {
         var _a;
         const options = this.el.querySelectorAll('ion-item-options');
@@ -22372,6 +22491,23 @@ class ItemSliding {
         if (contentEl) {
             resetContentScrollY(contentEl, initialContentScrollY);
         }
+        // Check for full swipe conditions with expandable options
+        const rawSwipeDistance = Math.abs(gesture.deltaX);
+        const direction = gesture.deltaX < 0 ? 'end' : 'start';
+        const options = direction === 'end' ? this.rightOptions : this.leftOptions;
+        const hasExpandable = this.hasExpandableOptions(options);
+        const shouldTriggerFullSwipe = hasExpandable &&
+            (rawSwipeDistance > this.getSwipeThreshold(direction) ||
+                (Math.abs(gesture.velocityX) > 0.5 &&
+                    rawSwipeDistance > (direction === 'end' ? this.optsWidthRightSide : this.optsWidthLeftSide) * 0.5));
+        if (shouldTriggerFullSwipe) {
+            this.animateFullSwipe(direction).catch(() => {
+                if (this.gesture) {
+                    this.gesture.enable(!this.disabled);
+                }
+            });
+            return;
+        }
         const velocity = gesture.velocityX;
         let restingPoint = this.openAmount > 0 ? this.optsWidthRightSide : -this.optsWidthLeftSide;
         // Check if the drag didn't clear the buttons mid-point
@@ -22479,7 +22615,7 @@ class ItemSliding {
     }
     render() {
         const theme = getIonTheme(this);
-        return (hAsync(Host, { key: '79cd09dd43183008f470b31abb7b3606f653a98b', class: {
+        return (hAsync(Host, { key: 'c945f30d9f7deb90d22064d4059e2b08f35614be', class: {
                 [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.4-dev.11775576543.172b7b99",
+  "version": "8.8.4-dev.11775666666.132201b7",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"