@ionic/core/components/ion-reorder-group.js

Base components for Ionic

/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import{d as t,H as s,i as e,h as r,t as i,f as o}from"./p-Ct2aBEue.js";import{a as n,g as h}from"./p-V1THdfzs.js";import{r as a}from"./p-B4IBdPVJ.js";import{b as d,a as c,h as l}from"./p-CEW4RXZO.js";import{b as m}from"./p-HthJZjZ6.js";const u=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.ionItemReorder=e(this,"ionItemReorder",7),this.ionReorderStart=e(this,"ionReorderStart",7),this.ionReorderMove=e(this,"ionReorderMove",7),this.ionReorderEnd=e(this,"ionReorderEnd",7),this.lastToIndex=-1,this.cachedHeights=[],this.scrollElTop=0,this.scrollElBottom=0,this.scrollElInitial=0,this.containerTop=0,this.containerBottom=0,this.state=0,this.disabled=!0}disabledChanged(){this.gesture&&this.gesture.enable(!this.disabled)}async connectedCallback(){const t=n(this.el);t&&(this.scrollEl=await h(t)),this.gesture=(await import("./p-D0YpjgON.js")).createGesture({el:this.el,gestureName:"reorder",gesturePriority:110,threshold:0,direction:"y",passive:!1,canStart:t=>this.canStart(t),onStart:t=>this.onStart(t),onMove:t=>this.onMove(t),onEnd:()=>this.onEnd()}),this.disabledChanged()}disconnectedCallback(){this.onEnd(),this.gesture&&(this.gesture.destroy(),this.gesture=void 0)}complete(t){return Promise.resolve(this.completeReorder(t))}canStart(t){if(this.selectedItemEl||0!==this.state)return!1;const s=t.event.target.closest("ion-reorder");if(!s)return!1;const e=f(s,this.el);return!!e&&(t.data=e,!0)}onStart(t){t.event.preventDefault();const s=this.selectedItemEl=t.data,e=this.cachedHeights;e.length=0;const r=this.el,i=r.__children||r.children;if(!i||0===i.length)return;let o=0;for(let t=0;t<i.length;t++){const s=i[t];o+=s.offsetHeight,e.push(o),s.$ionIndex=t}const n=r.getBoundingClientRect();if(this.containerTop=n.top,this.containerBottom=n.bottom,this.scrollEl){const t=this.scrollEl.getBoundingClientRect();this.scrollElInitial=this.scrollEl.scrollTop,this.scrollElTop=t.top+p,this.scrollElBottom=t.bottom-p}else this.scrollElInitial=0,this.scrollElTop=0,this.scrollElBottom=0;this.lastToIndex=b(s),this.selectedItemHeight=s.offsetHeight,this.state=1,s.classList.add(w),d(),this.ionReorderStart.emit()}onMove(t){const s=this.selectedItemEl;if(!s)return;const e=this.autoscroll(t.currentY),r=this.containerTop-e,i=Math.max(r,Math.min(t.currentY,this.containerBottom-e)),o=e+i-t.startY,n=this.lastToIndex,h=this.itemIndexForTop(i-r);if(h!==this.lastToIndex){const t=b(s);this.lastToIndex=h,c(),this.reorderMove(t,h)}s.style.transform=`translateY(${o}px)`,this.ionReorderMove.emit({from:n,to:h})}onEnd(){const t=this.selectedItemEl;if(this.state=2,!t)return void(this.state=0);const s=this.lastToIndex,e=b(t);s===e?this.completeReorder():this.ionItemReorder.emit({from:e,to:s,complete:this.completeReorder.bind(this)}),l(),this.ionReorderEnd.emit({from:e,to:s,complete:this.completeReorder.bind(this)})}completeReorder(t){const s=this.selectedItemEl;if(s&&2===this.state){const e=this.el.__children||this.el.children,r=e.length,i=this.lastToIndex,o=b(s);a((()=>{i===o||void 0!==t&&!0!==t||this.el.insertBefore(s,o<i?e[i+1]:e[i]);for(let t=0;t<r;t++)e[t].style.transform=""})),Array.isArray(t)&&(t=k(t,o,i)),s.style.transition="",s.classList.remove(w),this.selectedItemEl=void 0,this.state=0}return t}itemIndexForTop(t){const s=this.cachedHeights;for(let e=0;e<s.length;e++)if(s[e]>t)return e;return s.length-1}reorderMove(t,s){const e=this.selectedItemHeight,r=this.el.__children||this.el.children;for(let i=0;i<r.length;i++){let o="";i>t&&i<=s?o=`translateY(${-e}px)`:i<t&&i>=s&&(o=`translateY(${e}px)`),r[i].style.transform=o}}autoscroll(t){if(!this.scrollEl)return 0;let s=0;return t<this.scrollElTop?s=-g:t>this.scrollElBottom&&(s=g),0!==s&&this.scrollEl.scrollBy(0,s),this.scrollEl.scrollTop-this.scrollElInitial}render(){const t=m(this);return r(o,{key:"779332508f44409696b6bab80eda72f9b1d7869d",class:{[t]:!0,"reorder-enabled":!this.disabled,"reorder-list-active":0!==this.state}})}get el(){return this}static get watchers(){return{disabled:[{disabledChanged:0}]}}static get style(){return".reorder-list-active>*{display:block;-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms;will-change:transform}.reorder-enabled{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.reorder-enabled ion-reorder{display:block;cursor:-webkit-grab;cursor:grab;pointer-events:all;-ms-touch-action:none;touch-action:none}.reorder-selected,.reorder-selected ion-reorder{cursor:-webkit-grabbing;cursor:grabbing}.reorder-selected{position:relative;-webkit-transition:none !important;transition:none !important;-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.4);box-shadow:0 0 10px rgba(0, 0, 0, 0.4);opacity:0.8;z-index:100}.reorder-visible ion-reorder .reorder-icon{-webkit-transform:translate3d(0,  0,  0);transform:translate3d(0,  0,  0)}"}},[0,"ion-reorder-group",{disabled:[4],state:[32],complete:[64]},void 0,{disabled:[{disabledChanged:0}]}]),b=t=>t.$ionIndex,f=(t,s)=>{let e;for(;t;){if(e=t.parentElement,e===s)return t;t=e}},p=60,g=10,w="reorder-selected",k=(t,s,e)=>{const r=t[s];return t.splice(s,1),t.splice(e,0,r),t.slice()},v=u,x=function(){"undefined"!=typeof customElements&&["ion-reorder-group"].forEach((t=>{"ion-reorder-group"===t&&(customElements.get(i(t))||customElements.define(i(t),u))}))};export{v as IonReorderGroup,x as defineCustomElement}