@ionic/core/components/ion-item-sliding.js

Base components for Ionic

/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import{d as t,H as i,i as s,p as e,h as n,t as o,f as r}from"./p-Ct2aBEue.js";import{a as h,d as a,r as d}from"./p-V1THdfzs.js";import{n as l,c as m}from"./p-B4IBdPVJ.js";import{w as c}from"./p-Dtdm8lKC.js";import{b as p}from"./p-HthJZjZ6.js";let u;const g=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=h(t),this.mutationObserver=c(t,"ion-item-option",(async()=>{await this.updateOptions()})),await this.updateOptions(),this.gesture=(await import("./p-D0YpjgON.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,u===this.el&&(u=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){if(null===(this.item=this.item??this.el.querySelector("ion-item")))return;const i=this.getOptions(t);i&&(void 0===t&&(t=i===this.leftOptions?"start":"end"),t=l(t)?"end":"start",this.openAmount<0&&i===this.leftOptions||this.openAmount>0&&i===this.rightOptions||(this.closeOpened(),this.state=4,requestAnimationFrame((()=>{this.calculateOptsWidth(),u=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!==u&&(u.close(),u=void 0,!0)}getOptions(t){return void 0===t?this.leftOptions||this.rightOptions:"start"===t?this.leftOptions:this.rightOptions}async updateOptions(){const t=Array.from(this.el.querySelectorAll("ion-item-options"));await Promise.all(t.map((t=>new Promise((i=>m(t,i))))));let i=0;this.leftOptions=this.rightOptions=void 0;for(const s of t)"start"==(l(s.side??s.getAttribute("side"))?"end":"start")?(this.leftOptions=s,i|=1):(this.rightOptions=s,i|=2);this.optsDirty=!0,this.sides=i}canStart(t){return!("rtl"===document.dir?window.innerWidth-t.startX<15:t.startX<15)&&(u&&u!==this.el&&this.closeOpened(),!(!this.rightOptions&&!this.leftOptions))}onStart(){this.item=this.el.querySelector("ion-item");const{contentEl:t}=this;t&&(this.initialContentScrollY=a(t)),u=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:e("[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&&d(i,s);const e=t.velocityX;let n=this.openAmount>0?this.optsWidthRightSide:-this.optsWidthLeftSide;b(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),u=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=p(this);return n(r,{key:"02174ca963753d3a51a4249068f3d436f8acb03d",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}]}]),b=(t,i,s)=>!i&&s||t&&i,v=g,f=function(){"undefined"!=typeof customElements&&["ion-item-sliding"].forEach((t=>{"ion-item-sliding"===t&&(customElements.get(o(t))||customElements.define(o(t),g))}))};export{v as IonItemSliding,f as defineCustomElement}