@ysx-libs/mobile-picker/dist/mobile-picker.umd.js

A mobile list picker plugin, use vanilla ts

var me=Object.defineProperty;var ge=(c,d,f)=>d in c?me(c,d,{enumerable:!0,configurable:!0,writable:!0,value:f}):c[d]=f;var tt=(c,d,f)=>(ge(c,typeof d!="symbol"?d+"":d,f),f),Et=(c,d,f)=>{if(!d.has(c))throw TypeError("Cannot "+f)};var n=(c,d,f)=>(Et(c,d,"read from private field"),f?f.call(c):d.get(c)),l=(c,d,f)=>{if(d.has(c))throw TypeError("Cannot add the same private member more than once");d instanceof WeakSet?d.add(c):d.set(c,f)},a=(c,d,f,j)=>(Et(c,d,"write to private field"),j?j.call(c,f):d.set(c,f),f);var r=(c,d,f)=>(Et(c,d,"access private method"),f);(function(c,d){typeof exports=="object"&&typeof module!="undefined"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(c=typeof globalThis!="undefined"?globalThis:c||self,d(c.MobilePicker={}))})(this,function(c){var q,p,S,b,N,C,y,L,F,H,T,R,D,z,O,P,E,nt,Ot,st,At,ot,qt,rt,Wt,lt,Xt,ht,Bt,at,Vt,W,pt,X,It,B,xt,k,_,ct,$t,dt,_t,G,vt,ut,jt,J,Mt,w,v,Y,M,K,Nt,I,ft,Rt,Q,yt,mt,zt,U,Tt;"use strict";const j={time:300,distance:15,duration:2500,deceleration:.0015},St={duration:300},wt={speed:20,discreteTime:400},Gt={selectedIndexes:[],usePointerEvents:!1,scrollShape:"scale",moveThreshold:20,momentum:j,itemClassName:"mobile-picker-view-item",clickToSelect:!1,mouseWheel:!1,onlyLeftButton:!0};function et(o){return typeof window!="undefined"&&window.navigator?!!navigator.userAgent.match(o):!1}const Jt=et(/safari/i)&&!et(/chrome/i)&&!et(/android/i),Kt=et(/iP(ad|od|hone)/i),Yt="picker-drag-start",Dt="picker-dragging";function A(o,t,e){return Math.min(Math.max(o,t),e)}function Qt(o,t){return A(o||0,0,t)}function it(o,t,e){return o>e||o<t}function Ut(o,t,e,i){const s=o-t,h=Math.abs(s)/e,{deceleration:u}=i,m=h/u*(s<0?-1:1);return Math.round(m)}const Zt=15,te=.1;function ee(o){if(!!(o!=null&&o.length))for(let t=0;t<o.length;t++){const e=o[t];e.style.transform="none"}}function ie(o,t,e){if(!!(e!=null&&e.length))for(let i=0;i<e.length;i++){const s=e[i],h=1-te*Math.abs(o/t+i);s.style.transform=`scale(${h.toFixed(2)})`}}function ne(o,t,e){if(!!(e!=null&&e.length))for(let i=0;i<e.length;i++){const s=e[i],h=Zt*(o/t+i);s.style.transform=`rotateX(${h.toFixed(0)}deg)`}}const Pt={flat:null,scale:ie,rotate:ne};function se(o){return 1-Math.pow(1-o,3)}function oe({startPoi:o,duration:t,destPoi:e,onRunning:i,onEnd:s}){const h=performance.now();let u=o,m=-1,g=!1;const x=Z=>{if(g)return;const gt=Z-h,$=Math.min(gt/t,1),Ct=se($);u=o+(e-o)*Ct,i(u),$<1?m=requestAnimationFrame(x):s()};return m=requestAnimationFrame(x),{cancel:()=>{g||(g=!0,cancelAnimationFrame(m))}}}function kt(o){if(o.length===0)return;const t=o.item(0);if(!!t)return{clientX:t.clientX,clientY:t.clientY}}const bt=o=>{if("clientX"in o&&"clientY"in o)return{clientX:o.clientX,clientY:o.clientY};if("touches"in o){const t=kt(o.touches);if(t)return t}if("changedTouches"in o){const t=kt(o.changedTouches);if(t)return t}},re=o=>typeof o=="function";function le(o,t){let e=null;for(;o&&!e;)(o==null?void 0:o.matches)&&o.matches(t)&&(e=o),o=o.parentNode;return e}function he(o,t){let e=0;if(!o||!o.parentNode)return-1;let i=o.previousElementSibling;for(;i;)(!t||i.matches(t))&&e++,i=i.previousElementSibling;return e}const Lt={listContainerHeight:0,itemHeight:0,minScrollY:0,maxScrollY:0,limitMinScrollY:0,limitMaxScrollY:0};class ae{constructor(t,e){l(this,nt);l(this,st);l(this,ot);l(this,rt);l(this,lt);l(this,ht);l(this,at);l(this,W);l(this,X);l(this,B);l(this,k);l(this,ct);l(this,dt);l(this,G);l(this,ut);l(this,J);l(this,w);l(this,Y);l(this,K);l(this,q,!1);l(this,p,0);l(this,S,null);tt(this,"metaInfo",Lt);l(this,b,null);l(this,N,null);l(this,C,null);l(this,y,null);l(this,L,null);l(this,F,null);l(this,H,void 0);l(this,T,void 0);tt(this,"innerSelectedIndex",0);l(this,R,-1);l(this,D,null);l(this,z,void 0);l(this,O,void 0);l(this,P,null);l(this,E,"");this.rootNode=t,this.options=e,a(this,H,e.usePointerEvents?"PointerEvent"in window&&(!Jt||Kt):!1),a(this,T,e.momentum===!1?!1:{...j,...e.momentum}),a(this,z,r(this,nt,Ot).call(this,e.clickToSelect)),a(this,O,r(this,st,At).call(this,e.mouseWheel)),r(this,rt,Wt).call(this),r(this,lt,Xt).call(this),a(this,E,"init"),this.setIndex(this.options.selectedIndex);const{items:i,itemHeight:s}=this.metaInfo;i&&(a(this,P,r(this,ot,qt).call(this,e.scrollShape,i)),n(this,P)?n(this,P).call(this,n(this,p),s,i):ee(i))}setIndex(t,e=0){var s;if(!((s=this.metaInfo.items)!=null&&s.length))return this.innerSelectedIndex;a(this,E,n(this,E)||"api");const i=Qt(t,this.metaInfo.items.length-1);if(this.innerSelectedIndex!==i){r(this,w,v).call(this,{duration:e});const h=r(this,ut,jt).call(this,i);r(this,Y,M).call(this,h),r(this,W,pt).call(this,i)}return i}destroy(){var t,e,i,s,h;r(this,K,Nt).call(this),(t=n(this,y))==null||t.abort(),a(this,y,null),(e=n(this,L))==null||e.abort(),a(this,L,null),(i=n(this,F))==null||i.abort(),a(this,F,null),a(this,E,""),this.metaInfo=Lt,r(this,w,v).call(this),r(this,Y,M).call(this,0),(h=(s=n(this,D))==null?void 0:s.cancel)==null||h.call(s),a(this,D,null)}}q=new WeakMap,p=new WeakMap,S=new WeakMap,b=new WeakMap,N=new WeakMap,C=new WeakMap,y=new WeakMap,L=new WeakMap,F=new WeakMap,H=new WeakMap,T=new WeakMap,R=new WeakMap,D=new WeakMap,z=new WeakMap,O=new WeakMap,P=new WeakMap,E=new WeakMap,nt=new WeakSet,Ot=function(t){return t?t===!0?{...St,enable:!0}:{...St,...t,enable:!0}:{...St,enable:!1}},st=new WeakSet,At=function(t){return t?t===!0?{...wt,enable:!0}:{...wt,...t,enable:!0}:{...wt,enable:!1}},ot=new WeakSet,qt=function(t,e){let i=Pt.flat;return(e==null?void 0:e.length)>3&&(i=re(t)?t:Pt[t]),i},rt=new WeakSet,Wt=function(){const t=this.rootNode.firstElementChild,e=t==null?void 0:t.firstElementChild;if(n(this,q)||!e)return;const i=0,s=-t.offsetHeight+e.offsetHeight;this.metaInfo={itemContainer:t,items:t.children,listContainerHeight:t.offsetHeight,itemHeight:e.offsetHeight,maxScrollY:i,minScrollY:s,limitMinScrollY:s-this.options.moveThreshold,limitMaxScrollY:i+this.options.moveThreshold}},lt=new WeakSet,Xt=function(){var i,s,h,u,m;a(this,y,new AbortController),n(this,H)?this.rootNode.addEventListener("pointerdown",r(this,X,It).bind(this),{signal:(i=n(this,y))==null?void 0:i.signal}):(this.rootNode.addEventListener("touchstart",r(this,X,It).bind(this),{signal:(s=n(this,y))==null?void 0:s.signal}),this.rootNode.addEventListener("mousedown",r(this,X,It).bind(this),{signal:(h=n(this,y))==null?void 0:h.signal})),a(this,L,new AbortController),this.metaInfo.itemContainer.addEventListener("transitionend",r(this,ct,$t).bind(this),{signal:(u=n(this,L))==null?void 0:u.signal});const{enable:t,duration:e}=n(this,z);if(t){const{itemClassName:g}=this.options;this.rootNode.addEventListener("click",x=>{if(n(this,q))return;const V=le(x.target,"."+g);if(V){const Z=he(V,"."+g);a(this,E,"click"),this.setIndex(Z,e)}})}n(this,O).enable&&(a(this,F,new AbortController),this.rootNode.addEventListener("wheel",g=>{g.preventDefault(),g.stopPropagation(),r(this,ht,Bt).call(this,g)},{signal:(m=n(this,F))==null?void 0:m.signal}))},ht=new WeakSet,Bt=function(t){const{deltaY:e,deltaMode:i}=t;let s=0;i===1?s=-e*n(this,O).speed:s=-e;const{limitMinScrollY:h,limitMaxScrollY:u,minScrollY:m,maxScrollY:g}=this.metaInfo;let x=n(this,p)+s;it(x,m,g)&&(x=A(n(this,p)+s/3,h,u)),r(this,w,v).call(this,{duration:300}),r(this,Y,M).call(this,x),r(this,at,Vt).call(this)},at=new WeakSet,Vt=function(){window.clearTimeout(n(this,R)),a(this,R,window.setTimeout(()=>{const{index:t,y:e}=r(this,G,vt).call(this,n(this,p)),{limitMinScrollY:i,limitMaxScrollY:s}=this.metaInfo,h=A(e,i,s);r(this,w,v).call(this,{duration:500}),r(this,Y,M).call(this,h),a(this,E,"wheel"),r(this,W,pt).call(this,t)},n(this,O).discreteTime))},W=new WeakSet,pt=function(t){r(this,dt,_t).call(this,t),this.options.onChange(t,n(this,E))},X=new WeakSet,It=function(t){var s,h;const e=bt(t);if(n(this,b)||!e||this.options.onlyLeftButton&&t.type==="mousedown"&&t.button!==0)return;r(this,w,v).call(this),(h=(s=n(this,D))==null?void 0:s.cancel)==null||h.call(s),a(this,D,null),this.rootNode.classList.add(Yt),a(this,b,{time:Date.now(),startY:e.clientY,pointY:e.clientY});const i=t.target;a(this,S,i.ownerDocument),a(this,N,new AbortController),a(this,C,new AbortController),n(this,H)?(this.rootNode.setPointerCapture(t.pointerId),n(this,S).addEventListener("pointermove",r(this,B,xt).bind(this),{signal:n(this,N).signal}),n(this,S).addEventListener("pointerup",r(this,k,_).bind(this),{signal:n(this,C).signal}),n(this,S).addEventListener("pointercancel",r(this,k,_).bind(this),{signal:n(this,C).signal})):(n(this,S).addEventListener("mousemove",r(this,B,xt).bind(this),{signal:n(this,N).signal}),n(this,S).addEventListener("touchmove",r(this,B,xt).bind(this),{signal:n(this,N).signal}),n(this,S).addEventListener("mouseup",r(this,k,_).bind(this),{signal:n(this,C).signal}),n(this,S).addEventListener("touchend",r(this,k,_).bind(this),{signal:n(this,C).signal}),n(this,S).addEventListener("touchcancel",r(this,k,_).bind(this),{signal:n(this,C).signal}))},B=new WeakSet,xt=function(t){const e=bt(t);if(!this.rootNode||!n(this,b)||!e)return;this.rootNode.classList.remove(Yt),this.rootNode.classList.add(Dt);const{pointY:i}=n(this,b),s=e.clientY-i;n(this,b).pointY=e.clientY;const{minScrollY:h,maxScrollY:u,limitMinScrollY:m,limitMaxScrollY:g}=this.metaInfo;let x=n(this,p)+s;it(x,h,u)&&(x=A(n(this,p)+s/3,m,g)),r(this,Y,M).call(this,x)},k=new WeakSet,_=function(t){if(!this.rootNode||!n(this,b))return;n(this,H)&&this.rootNode.releasePointerCapture(t.pointerId);let e=0,i=500,s=n(this,p);const{limitMinScrollY:h,limitMaxScrollY:u,minScrollY:m,maxScrollY:g}=this.metaInfo,x=r(this,J,Mt).call(this);let V=!1;if(x)s=x;else{const $=bt(t),{time:Ct,startY:Ft,pointY:de}=n(this,b),Ht=Date.now()-Ct,ue=Math.abs(Math.round($.clientY)-Ft);if(n(this,T)&&Ht<n(this,T).time&&ue>n(this,T).distance){V=!0;const fe=Ut(de,Ft,Ht,n(this,T));i=n(this,T).duration,s=n(this,p)+fe,it(s,m,g)&&(i=500)}}const{index:Z,y:gt}=r(this,G,vt).call(this,s);s=gt,e=Z,s!==n(this,p)&&(a(this,E,"drag"),s=A(s,h,u),V?(r(this,w,v).call(this,{duration:i,setProp:!1}),a(this,D,oe({startPoi:n(this,p),duration:i,destPoi:s,onRunning:$=>{r(this,Y,M).call(this,$)},onEnd:()=>{r(this,Y,M).call(this,gt)}}))):(r(this,w,v).call(this,{duration:i}),r(this,Y,M).call(this,s)),r(this,W,pt).call(this,e)),r(this,K,Nt).call(this)},ct=new WeakSet,$t=function(){const t=r(this,J,Mt).call(this);t===null?r(this,w,v).call(this):(r(this,w,v).call(this,{duration:500}),r(this,Y,M).call(this,t))},dt=new WeakSet,_t=function(t){this.innerSelectedIndex=t},G=new WeakSet,vt=function(t){var m;if(!((m=this.metaInfo.items)!=null&&m.length))return{index:-1,y:0};const{itemHeight:e,items:i}=this.metaInfo;let s=-1,h=0;const u=Math.min(0,t);return s=A(Math.round(Math.abs(u)/e),0,i.length-1),h=s*e*(u/(Math.abs(u)||1)),{index:s,y:h}},ut=new WeakSet,jt=function(t){var i;if(!((i=this.metaInfo.items)!=null&&i.length))return 0;const{itemHeight:e}=this.metaInfo;return-t*e},J=new WeakSet,Mt=function(){let t=null;const{minScrollY:e,maxScrollY:i}=this.metaInfo;return it(n(this,p),e,i)&&(t=n(this,p)>i?i:e),t},w=new WeakSet,v=function(t){const e=(t==null?void 0:t.duration)||0,i=(t==null?void 0:t.setProp)!==!1;a(this,q,e>0),i&&this.rootNode.style.setProperty("--picker-transit-duration",`${e}ms`)},Y=new WeakSet,M=function(t){if(!this.rootNode||n(this,p)===t)return;this.rootNode.style.setProperty("--picker-transit-y",`${t}px`),a(this,p,t);const{items:e,itemHeight:i}=this.metaInfo;n(this,P)&&n(this,P).call(this,t,i,e)},K=new WeakSet,Nt=function(){var t,e;this.rootNode.classList.remove(Yt),this.rootNode.classList.remove(Dt),a(this,b,null),(t=n(this,N))==null||t.abort(),a(this,N,null),(e=n(this,C))==null||e.abort(),a(this,C,null)};class ce{constructor(t,e){l(this,ft);l(this,Q);l(this,mt);l(this,U);tt(this,"rootNode");tt(this,"innerOptions");l(this,I,[]);if(this.rootNode=typeof t=="string"?document.querySelector(t):t,!this.rootNode)throw new Error("root node not found");this.innerOptions={...Gt,...e},r(this,ft,Rt).call(this)}setIndexes(t){this.innerOptions.selectedIndexes=t;const e=[];return t.forEach((i,s)=>{n(this,I)[s]&&e.push(n(this,I)[s].setIndex(i))}),e}refreshAll(t){const e=this.rootNode.querySelectorAll(".mobile-picker-view");return e.length?(this.innerOptions.selectedIndexes.length=e.length,n(this,I).forEach(i=>i.destroy()),n(this,I).length=e.length,this.refreshColumns(n(this,I).map((i,s)=>s),t)):r(this,U,Tt).call(this)}refreshColumns(t,e){const i=this.rootNode.querySelectorAll(".mobile-picker-view");return i.length?(t.forEach(s=>{const h=i[s];h&&n(this,I)[s]&&(n(this,I)[s].destroy(),n(this,I)[s]=r(this,Q,yt).call(this,h,e||this.innerOptions.selectedIndexes,s))}),this.innerOptions.selectedIndexes=n(this,I).map(s=>s.innerSelectedIndex),this.innerOptions.selectedIndexes):r(this,U,Tt).call(this)}}I=new WeakMap,ft=new WeakSet,Rt=function(t){var s,h;const e=this.rootNode.querySelectorAll(".mobile-picker-view");this.innerOptions.selectedIndexes.length=e.length,e.forEach((u,m)=>{const g=r(this,Q,yt).call(this,u,t||this.innerOptions.selectedIndexes,m);n(this,I).push(g)}),this.innerOptions.selectedIndexes=n(this,I).map(u=>u.innerSelectedIndex);const i=((h=(s=n(this,I)[0])==null?void 0:s.metaInfo)==null?void 0:h.itemHeight)||0;i>0&&this.rootNode.style.setProperty("--picker-item-height",`${i}px`)},Q=new WeakSet,yt=function(t,e,i){return new ae(t,{...this.innerOptions,selectedIndex:e[i],onChange:(h,u)=>{r(this,mt,zt).call(this,h,u,i)}})},mt=new WeakSet,zt=function(t,e,i){var s,h;this.innerOptions.selectedIndexes[i]=t,(h=(s=this.innerOptions).onChange)==null||h.call(s,this.innerOptions.selectedIndexes,e,i)},U=new WeakSet,Tt=function(){return this.innerOptions.selectedIndexes=[],n(this,I).forEach(t=>t.destroy()),a(this,I,[]),[]},c.Picker=ce,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});