@ionic/core 8.7.17-dev.11771959013.18adabe2 → 8.7.17-dev.11772055571.14fddd38

package/components/ion-item-sliding.js

@@ -1,4 +1,461 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as t,HTMLElement as i,createEvent as s,h as e,Host as n,transformTag as o}from"@stencil/core/internal/client";import{a as r,d as h,r as a}from"./index8.js";import{m as d}from"./helpers.js";import{p as l}from"./index4.js";import{w as m}from"./watch-options.js";import{b as c}from"./ionic-global.js";let p;const u=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.ionDrag=s(this,"ionDrag",7),this.item=null,this.openAmount=0,this.initialOpenAmount=0,this.optsWidthRightSide=0,this.optsWidthLeftSide=0,this.sides=0,this.optsDirty=!0,this.contentEl=null,this.initialContentScrollY=!0,this.state=2,this.disabled=!1}disabledChanged(){this.gesture&&this.gesture.enable(!this.disabled)}async connectedCallback(){const{el:t}=this;this.item=t.querySelector("ion-item"),this.contentEl=r(t),this.mutationObserver=m(t,"ion-item-option",(async()=>{await this.updateOptions()})),await this.updateOptions(),this.gesture=(await import("./index3.js")).createGesture({el:t,gestureName:"item-swipe",gesturePriority:100,threshold:5,canStart:t=>this.canStart(t),onStart:()=>this.onStart(),onMove:t=>this.onMove(t),onEnd:t=>this.onEnd(t)}),this.disabledChanged()}disconnectedCallback(){this.gesture&&(this.gesture.destroy(),this.gesture=void 0),this.item=null,this.leftOptions=this.rightOptions=void 0,p===this.el&&(p=void 0),this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=void 0)}getOpenAmount(){return Promise.resolve(this.openAmount)}getSlidingRatio(){return Promise.resolve(this.getSlidingRatioSync())}async open(t){var i;if(null===(this.item=null!==(i=this.item)&&void 0!==i?i:this.el.querySelector("ion-item")))return;const s=this.getOptions(t);s&&(void 0===t&&(t=s===this.leftOptions?"start":"end"),t=d(t)?"end":"start",this.openAmount<0&&s===this.leftOptions||this.openAmount>0&&s===this.rightOptions||(this.closeOpened(),this.state=4,requestAnimationFrame((()=>{this.calculateOptsWidth(),p=this.el,this.setOpenAmount("end"===t?this.optsWidthRightSide:-this.optsWidthLeftSide,!1),this.state="end"===t?8:16}))))}async close(){this.setOpenAmount(0,!0)}async closeOpened(){return void 0!==p&&(p.close(),p=void 0,!0)}getOptions(t){return void 0===t?this.leftOptions||this.rightOptions:"start"===t?this.leftOptions:this.rightOptions}async updateOptions(){var t;const i=this.el.querySelectorAll("ion-item-options");let s=0;this.leftOptions=this.rightOptions=void 0;for(let e=0;e<i.length;e++){const n=i.item(e),o=void 0!==n.componentOnReady?await n.componentOnReady():n;"start"==(d(null!==(t=o.side)&&void 0!==t?t:o.getAttribute("side"))?"end":"start")?(this.leftOptions=o,s|=1):(this.rightOptions=o,s|=2)}this.optsDirty=!0,this.sides=s}canStart(t){return!("rtl"===document.dir?window.innerWidth-t.startX<15:t.startX<15)&&(p&&p!==this.el&&this.closeOpened(),!(!this.rightOptions&&!this.leftOptions))}onStart(){this.item=this.el.querySelector("ion-item");const{contentEl:t}=this;t&&(this.initialContentScrollY=h(t)),p=this.el,void 0!==this.tmr&&(clearTimeout(this.tmr),this.tmr=void 0),0===this.openAmount&&(this.optsDirty=!0,this.state=4),this.initialOpenAmount=this.openAmount,this.item&&(this.item.style.transition="none")}onMove(t){this.optsDirty&&this.calculateOptsWidth();let i,s=this.initialOpenAmount-t.deltaX;switch(this.sides){case 2:s=Math.max(0,s);break;case 1:s=Math.min(0,s);break;case 3:break;case 0:return;default:l("[ion-item-sliding] - invalid ItemSideFlags value",this.sides)}s>this.optsWidthRightSide?(i=this.optsWidthRightSide,s=i+.55*(s-i)):s<-this.optsWidthLeftSide&&(i=-this.optsWidthLeftSide,s=i+.55*(s-i)),this.setOpenAmount(s,!1)}onEnd(t){const{contentEl:i,initialContentScrollY:s}=this;i&&a(i,s);const e=t.velocityX;let n=this.openAmount>0?this.optsWidthRightSide:-this.optsWidthLeftSide;g(this.openAmount>0==!(e<0),Math.abs(e)>.3,Math.abs(this.openAmount)<Math.abs(n/2))&&(n=0);const o=this.state;this.setOpenAmount(n,!0),32&o&&this.rightOptions?this.rightOptions.fireSwipeEvent():64&o&&this.leftOptions&&this.leftOptions.fireSwipeEvent()}calculateOptsWidth(){this.optsWidthRightSide=0,this.rightOptions&&(this.rightOptions.style.display="flex",this.optsWidthRightSide=this.rightOptions.offsetWidth,this.rightOptions.style.display=""),this.optsWidthLeftSide=0,this.leftOptions&&(this.leftOptions.style.display="flex",this.optsWidthLeftSide=this.leftOptions.offsetWidth,this.leftOptions.style.display=""),this.optsDirty=!1}setOpenAmount(t,i){if(void 0!==this.tmr&&(clearTimeout(this.tmr),this.tmr=void 0),!this.item)return;const{el:s}=this,e=this.item.style;if(this.openAmount=t,i&&(e.transition=""),t>0)this.state=t>=this.optsWidthRightSide+30?40:8;else{if(!(t<0))return s.classList.add("item-sliding-closing"),this.gesture&&this.gesture.enable(!1),this.tmr=setTimeout((()=>{this.state=2,this.tmr=void 0,this.gesture&&this.gesture.enable(!this.disabled),s.classList.remove("item-sliding-closing")}),600),p=void 0,void(e.transform="");this.state=t<=-this.optsWidthLeftSide-30?80:16}e.transform=`translate3d(${-t}px,0,0)`,this.ionDrag.emit({amount:t,ratio:this.getSlidingRatioSync()})}getSlidingRatioSync(){return this.openAmount>0?this.openAmount/this.optsWidthRightSide:this.openAmount<0?this.openAmount/this.optsWidthLeftSide:0}render(){const t=c(this);return e(n,{key:"d812322c9fb5da4ee16e99dc38bfb24cb4590d03",class:{[t]:!0,"item-sliding-active-slide":2!==this.state,"item-sliding-active-options-end":!!(8&this.state),"item-sliding-active-options-start":!!(16&this.state),"item-sliding-active-swipe-end":!!(32&this.state),"item-sliding-active-swipe-start":!!(64&this.state)}})}get el(){return this}static get watchers(){return{disabled:[{disabledChanged:0}]}}static get style(){return"ion-item-sliding{display:block;position:relative;width:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ion-item-sliding .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.item-sliding-active-slide .item{position:relative;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);opacity:1;z-index:2;pointer-events:none;will-change:transform}.item-sliding-closing ion-item-options{pointer-events:none}.item-sliding-active-swipe-end .item-options-end .item-option-expandable{padding-left:100%;-ms-flex-order:1;order:1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-left;transition-property:padding-left}:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-end .item-options-end .item-option-expandable:dir(rtl){-ms-flex-order:-1;order:-1}}.item-sliding-active-swipe-start .item-options-start .item-option-expandable{padding-right:100%;-ms-flex-order:-1;order:-1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-right;transition-property:padding-right}:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl){-ms-flex-order:1;order:1}}"}},[0,"ion-item-sliding",{disabled:[4],state:[32],getOpenAmount:[64],getSlidingRatio:[64],open:[64],close:[64],closeOpened:[64]},void 0,{disabled:[{disabledChanged:0}]}]),g=(t,i,s)=>!i&&s||t&&i,b=u,v=function(){"undefined"!=typeof customElements&&["ion-item-sliding"].forEach((t=>{"ion-item-sliding"===t&&(customElements.get(o(t))||customElements.define(o(t),u))}))};export{b as IonItemSliding,v as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as findClosestIonContent, d as disableContentScrollY, r as resetContentScrollY } from './index8.js';
+import { m as isEndSide } from './helpers.js';
+import { p as printIonWarning } from './index4.js';
+import { w as watchForOptions } from './watch-options.js';
+import { b as getIonMode } from './ionic-global.js';
+
+const itemSlidingCss = "ion-item-sliding{display:block;position:relative;width:100%;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ion-item-sliding .item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.item-sliding-active-slide .item{position:relative;-webkit-transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:-webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);transition:transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);opacity:1;z-index:2;pointer-events:none;will-change:transform}.item-sliding-closing ion-item-options{pointer-events:none}.item-sliding-active-swipe-end .item-options-end .item-option-expandable{padding-left:100%;-ms-flex-order:1;order:1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-left;transition-property:padding-left}:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable{-ms-flex-order:-1;order:-1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-end .item-options-end .item-option-expandable:dir(rtl){-ms-flex-order:-1;order:-1}}.item-sliding-active-swipe-start .item-options-start .item-option-expandable{padding-right:100%;-ms-flex-order:-1;order:-1;-webkit-transition-duration:0.6s;transition-duration:0.6s;-webkit-transition-property:padding-right;transition-property:padding-right}:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable{-ms-flex-order:1;order:1}@supports selector(:dir(rtl)){.item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl){-ms-flex-order:1;order:1}}";
+
+const SWIPE_MARGIN = 30;
+const ELASTIC_FACTOR = 0.55;
+let openSlidingItem;
+const ItemSliding = /*@__PURE__*/ proxyCustomElement(class ItemSliding extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.ionDrag = createEvent(this, "ionDrag", 7);
+        this.item = null;
+        this.openAmount = 0;
+        this.initialOpenAmount = 0;
+        this.optsWidthRightSide = 0;
+        this.optsWidthLeftSide = 0;
+        this.sides = 0 /* ItemSide.None */;
+        this.optsDirty = true;
+        this.contentEl = null;
+        this.initialContentScrollY = true;
+        this.state = 2 /* SlidingState.Disabled */;
+        /**
+         * If `true`, the user cannot interact with the sliding item.
+         */
+        this.disabled = false;
+    }
+    disabledChanged() {
+        if (this.gesture) {
+            this.gesture.enable(!this.disabled);
+        }
+    }
+    async connectedCallback() {
+        const { el } = this;
+        this.item = el.querySelector('ion-item');
+        this.contentEl = findClosestIonContent(el);
+        /**
+         * The MutationObserver needs to be added before we
+         * call updateOptions below otherwise we may miss
+         * ion-item-option elements that are added to the DOM
+         * while updateOptions is running and before the MutationObserver
+         * has been initialized.
+         */
+        this.mutationObserver = watchForOptions(el, 'ion-item-option', async () => {
+            await this.updateOptions();
+        });
+        await this.updateOptions();
+        this.gesture = (await import('./index3.js')).createGesture({
+            el,
+            gestureName: 'item-swipe',
+            gesturePriority: 100,
+            threshold: 5,
+            canStart: (ev) => this.canStart(ev),
+            onStart: () => this.onStart(),
+            onMove: (ev) => this.onMove(ev),
+            onEnd: (ev) => this.onEnd(ev),
+        });
+        this.disabledChanged();
+    }
+    disconnectedCallback() {
+        if (this.gesture) {
+            this.gesture.destroy();
+            this.gesture = undefined;
+        }
+        this.item = null;
+        this.leftOptions = this.rightOptions = undefined;
+        if (openSlidingItem === this.el) {
+            openSlidingItem = undefined;
+        }
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = undefined;
+        }
+    }
+    /**
+     * Get the amount the item is open in pixels.
+     */
+    getOpenAmount() {
+        return Promise.resolve(this.openAmount);
+    }
+    /**
+     * Get the ratio of the open amount of the item compared to the width of the options.
+     * If the number returned is positive, then the options on the right side are open.
+     * If the number returned is negative, then the options on the left side are open.
+     * If the absolute value of the number is greater than 1, the item is open more than
+     * the width of the options.
+     */
+    getSlidingRatio() {
+        return Promise.resolve(this.getSlidingRatioSync());
+    }
+    /**
+     * Open the sliding item.
+     *
+     * @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
+     */
+    async open(side) {
+        var _a;
+        /**
+         * It is possible for the item to be added to the DOM
+         * after the item-sliding component was created. As a result,
+         * if this.item is null, then we should attempt to
+         * query for the ion-item again.
+         * However, if the item is already defined then
+         * we do not query for it again.
+         */
+        const item = (this.item = (_a = this.item) !== null && _a !== void 0 ? _a : this.el.querySelector('ion-item'));
+        if (item === null) {
+            return;
+        }
+        const optionsToOpen = this.getOptions(side);
+        if (!optionsToOpen) {
+            return;
+        }
+        /**
+         * If side is not set, we need to infer the side
+         * so we know which direction to move the options
+         */
+        if (side === undefined) {
+            side = optionsToOpen === this.leftOptions ? 'start' : 'end';
+        }
+        // In RTL we want to switch the sides
+        side = isEndSide(side) ? 'end' : 'start';
+        const isStartOpen = this.openAmount < 0;
+        const isEndOpen = this.openAmount > 0;
+        /**
+         * If a side is open and a user tries to
+         * re-open the same side, we should not do anything
+         */
+        if (isStartOpen && optionsToOpen === this.leftOptions) {
+            return;
+        }
+        if (isEndOpen && optionsToOpen === this.rightOptions) {
+            return;
+        }
+        this.closeOpened();
+        this.state = 4 /* SlidingState.Enabled */;
+        requestAnimationFrame(() => {
+            this.calculateOptsWidth();
+            const width = side === 'end' ? this.optsWidthRightSide : -this.optsWidthLeftSide;
+            openSlidingItem = this.el;
+            this.setOpenAmount(width, false);
+            this.state = side === 'end' ? 8 /* SlidingState.End */ : 16 /* SlidingState.Start */;
+        });
+    }
+    /**
+     * Close the sliding item. Items can also be closed from the [List](./list).
+     */
+    async close() {
+        this.setOpenAmount(0, true);
+    }
+    /**
+     * Close all of the sliding items in the list. Items can also be closed from the [List](./list).
+     */
+    async closeOpened() {
+        if (openSlidingItem !== undefined) {
+            openSlidingItem.close();
+            openSlidingItem = undefined;
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Given an optional side, return the ion-item-options element.
+     *
+     * @param side This side of the options to get. If a side is not provided it will
+     * return the first one available.
+     */
+    getOptions(side) {
+        if (side === undefined) {
+            return this.leftOptions || this.rightOptions;
+        }
+        else if (side === 'start') {
+            return this.leftOptions;
+        }
+        else {
+            return this.rightOptions;
+        }
+    }
+    async updateOptions() {
+        var _a;
+        const options = this.el.querySelectorAll('ion-item-options');
+        let sides = 0;
+        // Reset left and right options in case they were removed
+        this.leftOptions = this.rightOptions = undefined;
+        for (let i = 0; i < options.length; i++) {
+            const item = options.item(i);
+            /**
+             * We cannot use the componentOnReady helper
+             * util here since we need to wait for all of these items
+             * to be ready before we set `this.sides` and `this.optsDirty`.
+             */
+            // eslint-disable-next-line custom-rules/no-component-on-ready-method
+            const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
+            const side = isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
+            if (side === 'start') {
+                this.leftOptions = option;
+                sides |= 1 /* ItemSide.Start */;
+            }
+            else {
+                this.rightOptions = option;
+                sides |= 2 /* ItemSide.End */;
+            }
+        }
+        this.optsDirty = true;
+        this.sides = sides;
+    }
+    canStart(gesture) {
+        /**
+         * If very close to start of the screen
+         * do not open left side so swipe to go
+         * back will still work.
+         */
+        const rtl = document.dir === 'rtl';
+        const atEdge = rtl ? window.innerWidth - gesture.startX < 15 : gesture.startX < 15;
+        if (atEdge) {
+            return false;
+        }
+        const selected = openSlidingItem;
+        if (selected && selected !== this.el) {
+            this.closeOpened();
+        }
+        return !!(this.rightOptions || this.leftOptions);
+    }
+    onStart() {
+        /**
+         * We need to query for the ion-item
+         * every time the gesture starts. Developers
+         * may toggle ion-item elements via *ngIf.
+         */
+        this.item = this.el.querySelector('ion-item');
+        const { contentEl } = this;
+        if (contentEl) {
+            this.initialContentScrollY = disableContentScrollY(contentEl);
+        }
+        openSlidingItem = this.el;
+        if (this.tmr !== undefined) {
+            clearTimeout(this.tmr);
+            this.tmr = undefined;
+        }
+        if (this.openAmount === 0) {
+            this.optsDirty = true;
+            this.state = 4 /* SlidingState.Enabled */;
+        }
+        this.initialOpenAmount = this.openAmount;
+        if (this.item) {
+            this.item.style.transition = 'none';
+        }
+    }
+    onMove(gesture) {
+        if (this.optsDirty) {
+            this.calculateOptsWidth();
+        }
+        let openAmount = this.initialOpenAmount - gesture.deltaX;
+        switch (this.sides) {
+            case 2 /* ItemSide.End */:
+                openAmount = Math.max(0, openAmount);
+                break;
+            case 1 /* ItemSide.Start */:
+                openAmount = Math.min(0, openAmount);
+                break;
+            case 3 /* ItemSide.Both */:
+                break;
+            case 0 /* ItemSide.None */:
+                return;
+            default:
+                printIonWarning('[ion-item-sliding] - invalid ItemSideFlags value', this.sides);
+                break;
+        }
+        let optsWidth;
+        if (openAmount > this.optsWidthRightSide) {
+            optsWidth = this.optsWidthRightSide;
+            openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
+        }
+        else if (openAmount < -this.optsWidthLeftSide) {
+            optsWidth = -this.optsWidthLeftSide;
+            openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
+        }
+        this.setOpenAmount(openAmount, false);
+    }
+    onEnd(gesture) {
+        const { contentEl, initialContentScrollY } = this;
+        if (contentEl) {
+            resetContentScrollY(contentEl, initialContentScrollY);
+        }
+        const velocity = gesture.velocityX;
+        let restingPoint = this.openAmount > 0 ? this.optsWidthRightSide : -this.optsWidthLeftSide;
+        // Check if the drag didn't clear the buttons mid-point
+        // and we aren't moving fast enough to swipe open
+        const isResetDirection = this.openAmount > 0 === !(velocity < 0);
+        const isMovingFast = Math.abs(velocity) > 0.3;
+        const isOnCloseZone = Math.abs(this.openAmount) < Math.abs(restingPoint / 2);
+        if (swipeShouldReset(isResetDirection, isMovingFast, isOnCloseZone)) {
+            restingPoint = 0;
+        }
+        const state = this.state;
+        this.setOpenAmount(restingPoint, true);
+        if ((state & 32 /* SlidingState.SwipeEnd */) !== 0 && this.rightOptions) {
+            this.rightOptions.fireSwipeEvent();
+        }
+        else if ((state & 64 /* SlidingState.SwipeStart */) !== 0 && this.leftOptions) {
+            this.leftOptions.fireSwipeEvent();
+        }
+    }
+    calculateOptsWidth() {
+        this.optsWidthRightSide = 0;
+        if (this.rightOptions) {
+            this.rightOptions.style.display = 'flex';
+            this.optsWidthRightSide = this.rightOptions.offsetWidth;
+            this.rightOptions.style.display = '';
+        }
+        this.optsWidthLeftSide = 0;
+        if (this.leftOptions) {
+            this.leftOptions.style.display = 'flex';
+            this.optsWidthLeftSide = this.leftOptions.offsetWidth;
+            this.leftOptions.style.display = '';
+        }
+        this.optsDirty = false;
+    }
+    setOpenAmount(openAmount, isFinal) {
+        if (this.tmr !== undefined) {
+            clearTimeout(this.tmr);
+            this.tmr = undefined;
+        }
+        if (!this.item) {
+            return;
+        }
+        const { el } = this;
+        const style = this.item.style;
+        this.openAmount = openAmount;
+        if (isFinal) {
+            style.transition = '';
+        }
+        if (openAmount > 0) {
+            this.state =
+                openAmount >= this.optsWidthRightSide + SWIPE_MARGIN
+                    ? 8 /* SlidingState.End */ | 32 /* SlidingState.SwipeEnd */
+                    : 8 /* SlidingState.End */;
+        }
+        else if (openAmount < 0) {
+            this.state =
+                openAmount <= -this.optsWidthLeftSide - SWIPE_MARGIN
+                    ? 16 /* SlidingState.Start */ | 64 /* SlidingState.SwipeStart */
+                    : 16 /* SlidingState.Start */;
+        }
+        else {
+            /**
+             * The sliding options should not be
+             * clickable while the item is closing.
+             */
+            el.classList.add('item-sliding-closing');
+            /**
+             * Item sliding cannot be interrupted
+             * while closing the item. If it did,
+             * it would allow the item to get into an
+             * inconsistent state where multiple
+             * items are then open at the same time.
+             */
+            if (this.gesture) {
+                this.gesture.enable(false);
+            }
+            this.tmr = setTimeout(() => {
+                this.state = 2 /* SlidingState.Disabled */;
+                this.tmr = undefined;
+                if (this.gesture) {
+                    this.gesture.enable(!this.disabled);
+                }
+                el.classList.remove('item-sliding-closing');
+            }, 600);
+            openSlidingItem = undefined;
+            style.transform = '';
+            return;
+        }
+        style.transform = `translate3d(${-openAmount}px,0,0)`;
+        this.ionDrag.emit({
+            amount: openAmount,
+            ratio: this.getSlidingRatioSync(),
+        });
+    }
+    getSlidingRatioSync() {
+        if (this.openAmount > 0) {
+            return this.openAmount / this.optsWidthRightSide;
+        }
+        else if (this.openAmount < 0) {
+            return this.openAmount / this.optsWidthLeftSide;
+        }
+        else {
+            return 0;
+        }
+    }
+    render() {
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'd812322c9fb5da4ee16e99dc38bfb24cb4590d03', class: {
+                [mode]: true,
+                'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
+                'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
+                'item-sliding-active-options-start': (this.state & 16 /* SlidingState.Start */) !== 0,
+                'item-sliding-active-swipe-end': (this.state & 32 /* SlidingState.SwipeEnd */) !== 0,
+                'item-sliding-active-swipe-start': (this.state & 64 /* SlidingState.SwipeStart */) !== 0,
+            } }));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "disabled": ["disabledChanged"]
+    }; }
+    static get style() { return itemSlidingCss; }
+}, [256, "ion-item-sliding", {
+        "disabled": [4],
+        "state": [32],
+        "getOpenAmount": [64],
+        "getSlidingRatio": [64],
+        "open": [64],
+        "close": [64],
+        "closeOpened": [64]
+    }, undefined, {
+        "disabled": ["disabledChanged"]
+    }]);
+const swipeShouldReset = (isResetDirection, isMovingFast, isOnResetZone) => {
+    // The logic required to know when the sliding item should close (openAmount=0)
+    // depends on three booleans (isResetDirection, isMovingFast, isOnResetZone)
+    // and it ended up being too complicated to be written manually without errors
+    // so the truth table is attached below: (0=false, 1=true)
+    // isResetDirection | isMovingFast | isOnResetZone || shouldClose
+    //         0        |       0      |       0       ||    0
+    //         0        |       0      |       1       ||    1
+    //         0        |       1      |       0       ||    0
+    //         0        |       1      |       1       ||    0
+    //         1        |       0      |       0       ||    0
+    //         1        |       0      |       1       ||    1
+    //         1        |       1      |       0       ||    1
+    //         1        |       1      |       1       ||    1
+    // The resulting expression was generated by resolving the K-map (Karnaugh map):
+    return (!isMovingFast && isOnResetZone) || (isResetDirection && isMovingFast);
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-item-sliding"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-item-sliding":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ItemSliding);
+            }
+            break;
+    } });
+}
+
+const IonItemSliding = ItemSliding;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonItemSliding, defineCustomElement };

package/components/ion-item.js

@@ -1,4 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{I as o,d as s}from"./item.js";const t=o,m=s;export{t as IonItem,m as defineCustomElement}
+import { I as Item, d as defineCustomElement$1 } from './item.js';
+
+const IonItem = Item;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonItem, defineCustomElement };

package/components/ion-label.js

@@ -1,4 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{L as o,d as s}from"./label.js";const a=o,r=s;export{a as IonLabel,r as defineCustomElement}
+import { L as Label, d as defineCustomElement$1 } from './label.js';
+
+const IonLabel = Label;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonLabel, defineCustomElement };

package/components/ion-list-header.js

@@ -1,4 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{L as s,d as o}from"./list-header.js";const r=s,t=o;export{r as IonListHeader,t as defineCustomElement}
+import { L as ListHeader, d as defineCustomElement$1 } from './list-header.js';
+
+const IonListHeader = ListHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonListHeader, defineCustomElement };

package/components/ion-list.js

@@ -1,4 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{L as s,d as o}from"./list.js";const t=s,r=o;export{t as IonList,r as defineCustomElement}
+import { L as List, d as defineCustomElement$1 } from './list.js';
+
+const IonList = List;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonList, defineCustomElement };