UNPKG

forms-reactive

Version:

Reactive Form Web Component

2 lines 18.5 kB
import{r as e,c as r,w as i,d as s,h as t,e as n,H as h}from"./p-3e1171f6.js";import{g as o}from"./p-f83a4566.js";import{I as f,b as a,p as l,g as c}from"./p-5fdca19f.js";import{t as p,e as g,g as d,d as u,r as m}from"./p-c1432a35.js";import{d as v,I as x}from"./p-55c608e9.js";import{g as y}from"./p-9c83f640.js";import{s as b,t as w,a as k,h as j,b as S,c as z,d as N,g as R}from"./p-fa586bb9.js";import"./p-8613551a.js";import"./p-78bffe29.js";import"./p-3647f076.js";import"./p-1fd4aad1.js";const M="ion-refresher{top:0;display:none;position:absolute;width:100%;height:60px;pointer-events:none;z-index:-1}ion-refresher{inset-inline-start:0}ion-refresher.refresher-active{display:block}ion-refresher-content{display:flex;flex-direction:column;justify-content:center;height:100%}.refresher-pulling,.refresher-refreshing{display:none;width:100%}.refresher-pulling-icon,.refresher-refreshing-icon{transform-origin:center;transition:200ms;font-size:30px;text-align:center}:host-context([dir=rtl]) .refresher-pulling-icon,:host-context([dir=rtl]) .refresher-refreshing-icon{transform-origin:calc(100% - center)}[dir=rtl] .refresher-pulling-icon,[dir=rtl] .refresher-refreshing-icon{transform-origin:calc(100% - center)}@supports selector(:dir(rtl)){.refresher-pulling-icon:dir(rtl),.refresher-refreshing-icon:dir(rtl){transform-origin:calc(100% - center)}}.refresher-pulling-text,.refresher-refreshing-text{font-size:16px;text-align:center}ion-refresher-content .arrow-container{display:none}.refresher-pulling ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling-icon{transform:rotate(180deg)}.refresher-refreshing ion-refresher-content .refresher-refreshing{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling-icon{transform:scale(0)}.refresher-completing ion-refresher-content .refresher-refreshing{display:block}.refresher-completing ion-refresher-content .refresher-refreshing-icon{transform:scale(0)}.refresher-native .refresher-pulling-text,.refresher-native .refresher-refreshing-text{display:none}.refresher-ios .refresher-pulling-icon,.refresher-ios .refresher-refreshing-icon{color:var(--ion-text-color, #000)}.refresher-ios .refresher-pulling-text,.refresher-ios .refresher-refreshing-text{color:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-lines-ios line,.refresher-ios .refresher-refreshing .spinner-lines-small-ios line,.refresher-ios .refresher-refreshing .spinner-crescent circle{stroke:var(--ion-text-color, #000)}.refresher-ios .refresher-refreshing .spinner-bubbles circle,.refresher-ios .refresher-refreshing .spinner-circles circle,.refresher-ios .refresher-refreshing .spinner-dots circle{fill:var(--ion-text-color, #000)}ion-refresher.refresher-native{display:block;z-index:1}ion-refresher.refresher-native ion-spinner{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}.refresher-native .refresher-refreshing ion-spinner{--refreshing-rotation-duration:2s;display:none;animation:var(--refreshing-rotation-duration) ease-out refresher-rotate forwards}.refresher-native .refresher-refreshing{display:none;animation:250ms linear refresher-pop forwards}.refresher-native ion-spinner{width:32px;height:32px;color:var(--ion-color-step-450, var(--ion-background-color-step-450, #747577))}.refresher-native.refresher-refreshing .refresher-pulling ion-spinner,.refresher-native.refresher-completing .refresher-pulling ion-spinner{display:none}.refresher-native.refresher-refreshing .refresher-refreshing ion-spinner,.refresher-native.refresher-completing .refresher-refreshing ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-pulling ion-spinner{display:block}.refresher-native.refresher-pulling .refresher-refreshing ion-spinner{display:none}.refresher-native.refresher-completing ion-refresher-content .refresher-refreshing-icon{transform:scale(0) rotate(180deg);transition:300ms}@keyframes refresher-pop{0%{transform:scale(1);animation-timing-function:ease-in}50%{transform:scale(1.2);animation-timing-function:ease-out}100%{transform:scale(1)}}@keyframes refresher-rotate{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}";const E=M;const P="ion-refresher{top:0;display:none;position:absolute;width:100%;height:60px;pointer-events:none;z-index:-1}ion-refresher{inset-inline-start:0}ion-refresher.refresher-active{display:block}ion-refresher-content{display:flex;flex-direction:column;justify-content:center;height:100%}.refresher-pulling,.refresher-refreshing{display:none;width:100%}.refresher-pulling-icon,.refresher-refreshing-icon{transform-origin:center;transition:200ms;font-size:30px;text-align:center}:host-context([dir=rtl]) .refresher-pulling-icon,:host-context([dir=rtl]) .refresher-refreshing-icon{transform-origin:calc(100% - center)}[dir=rtl] .refresher-pulling-icon,[dir=rtl] .refresher-refreshing-icon{transform-origin:calc(100% - center)}@supports selector(:dir(rtl)){.refresher-pulling-icon:dir(rtl),.refresher-refreshing-icon:dir(rtl){transform-origin:calc(100% - center)}}.refresher-pulling-text,.refresher-refreshing-text{font-size:16px;text-align:center}ion-refresher-content .arrow-container{display:none}.refresher-pulling ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling-icon{transform:rotate(180deg)}.refresher-refreshing ion-refresher-content .refresher-refreshing{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling-icon{transform:scale(0)}.refresher-completing ion-refresher-content .refresher-refreshing{display:block}.refresher-completing ion-refresher-content .refresher-refreshing-icon{transform:scale(0)}.refresher-native .refresher-pulling-text,.refresher-native .refresher-refreshing-text{display:none}.refresher-md .refresher-pulling-icon,.refresher-md .refresher-refreshing-icon{color:var(--ion-text-color, #000)}.refresher-md .refresher-pulling-text,.refresher-md .refresher-refreshing-text{color:var(--ion-text-color, #000)}.refresher-md .refresher-refreshing .spinner-lines-md line,.refresher-md .refresher-refreshing .spinner-lines-small-md line,.refresher-md .refresher-refreshing .spinner-crescent circle{stroke:var(--ion-text-color, #000)}.refresher-md .refresher-refreshing .spinner-bubbles circle,.refresher-md .refresher-refreshing .spinner-circles circle,.refresher-md .refresher-refreshing .spinner-dots circle{fill:var(--ion-text-color, #000)}ion-refresher.refresher-native{display:block;z-index:1}ion-refresher.refresher-native ion-spinner{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;width:24px;height:24px;color:var(--ion-color-primary, #0054e9)}ion-refresher.refresher-native .spinner-arrow-container{display:inherit}ion-refresher.refresher-native .arrow-container{display:block;position:absolute;width:24px;height:24px}ion-refresher.refresher-native .arrow-container ion-icon{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;left:0;right:0;bottom:-4px;position:absolute;color:var(--ion-color-primary, #0054e9);font-size:12px}ion-refresher.refresher-native.refresher-pulling ion-refresher-content .refresher-pulling,ion-refresher.refresher-native.refresher-ready ion-refresher-content .refresher-pulling{display:flex}ion-refresher.refresher-native.refresher-refreshing ion-refresher-content .refresher-refreshing,ion-refresher.refresher-native.refresher-completing ion-refresher-content .refresher-refreshing,ion-refresher.refresher-native.refresher-cancelling ion-refresher-content .refresher-refreshing{display:flex}ion-refresher.refresher-native .refresher-pulling-icon{transform:translateY(calc(-100% - 10px))}ion-refresher.refresher-native .refresher-pulling-icon,ion-refresher.refresher-native .refresher-refreshing-icon{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;border-radius:100%;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;display:flex;border:1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec));background:var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff));box-shadow:0px 1px 6px rgba(0, 0, 0, 0.1)}";const C=P;const Y=class{constructor(i){e(this,i);this.ionRefresh=r(this,"ionRefresh",7);this.ionPull=r(this,"ionPull",7);this.ionStart=r(this,"ionStart",7);this.appliedStyles=false;this.didStart=false;this.progress=0;this.pointerDown=false;this.needsCompletion=false;this.didRefresh=false;this.contentFullscreen=false;this.lastVelocityY=0;this.animations=[];this.nativeRefresher=false;this.state=1;this.pullMin=60;this.pullMax=this.pullMin+60;this.closeDuration="280ms";this.snapbackDuration="280ms";this.pullFactor=1;this.disabled=false}disabledChanged(){if(this.gesture){this.gesture.enable(!this.disabled)}}async checkNativeRefresher(){const e=await b(this.el,y(this));if(e&&!this.nativeRefresher){const e=this.el.closest("ion-content");this.setupNativeRefresher(e)}else if(!e){this.destroyNativeRefresher()}}destroyNativeRefresher(){if(this.scrollEl&&this.scrollListenerCallback){this.scrollEl.removeEventListener("scroll",this.scrollListenerCallback);this.scrollListenerCallback=undefined}this.nativeRefresher=false}async resetNativeRefresher(e,r){this.state=r;if(y(this)==="ios"){await w(e,undefined,300)}else{await p(this.el.querySelector(".refresher-refreshing-icon"),200)}this.didRefresh=false;this.needsCompletion=false;this.pointerDown=false;this.animations.forEach((e=>e.destroy()));this.animations=[];this.progress=0;this.state=1}async setupiOSNativeRefresher(e,r){this.elementToTransform=this.scrollEl;const t=e.shadowRoot.querySelectorAll("svg");let n=this.scrollEl.clientHeight*.16;const h=t.length;i((()=>t.forEach((e=>e.style.setProperty("animation","none")))));this.scrollListenerCallback=()=>{if(!this.pointerDown&&this.state===1){return}s((()=>{const e=this.scrollEl.scrollTop;const s=this.el.clientHeight;if(e>0){if(this.state===8){const t=g(0,e/(s*.5),1);i((()=>k(r,1-t)));return}return}if(this.pointerDown){if(!this.didStart){this.didStart=true;this.ionStart.emit()}if(this.pointerDown){this.ionPull.emit()}}const o=this.didStart?30:0;const f=this.progress=g(0,(Math.abs(e)-o)/n,1);const a=this.state===8||f===1;if(a){if(this.pointerDown){j(r,this.lastVelocityY)}if(!this.didRefresh){this.beginRefresh();this.didRefresh=true;v({style:x.Light});if(!this.pointerDown){w(this.elementToTransform,`${s}px`)}}}else{this.state=2;S(t,h,f)}}))};this.scrollEl.addEventListener("scroll",this.scrollListenerCallback);this.gesture=(await import("./p-52ed752a.js")).createGesture({el:this.scrollEl,gestureName:"refresher",gesturePriority:31,direction:"y",threshold:5,onStart:()=>{this.pointerDown=true;if(!this.didRefresh){w(this.elementToTransform,"0px")}if(n===0){n=this.scrollEl.clientHeight*.16}},onMove:e=>{this.lastVelocityY=e.velocityY},onEnd:()=>{this.pointerDown=false;this.didStart=false;if(this.needsCompletion){this.resetNativeRefresher(this.elementToTransform,32);this.needsCompletion=false}else if(this.didRefresh){s((()=>w(this.elementToTransform,`${this.el.clientHeight}px`)))}}});this.disabledChanged()}async setupMDNativeRefresher(e,r,s){const t=d(r).querySelector("circle");const n=this.el.querySelector("ion-refresher-content .refresher-pulling-icon");const h=d(s).querySelector("circle");if(t!==null&&h!==null){i((()=>{t.style.setProperty("animation","none");s.style.setProperty("animation-delay","-655ms");h.style.setProperty("animation-delay","-655ms")}))}this.gesture=(await import("./p-52ed752a.js")).createGesture({el:this.scrollEl,gestureName:"refresher",gesturePriority:31,direction:"y",threshold:5,canStart:()=>this.state!==8&&this.state!==32&&this.scrollEl.scrollTop===0,onStart:e=>{this.progress=0;e.data={animation:undefined,didStart:false,cancelled:false}},onMove:r=>{if(r.velocityY<0&&this.progress===0&&!r.data.didStart||r.data.cancelled){r.data.cancelled=true;return}if(!r.data.didStart){r.data.didStart=true;this.state=2;const{scrollEl:s}=this;const t=s.matches(f)?"overflow":"--overflow";i((()=>s.style.setProperty(t,"hidden")));const h=R(e);const o=z(h,n,this.el);r.data.animation=o;o.progressStart(false,0);this.ionStart.emit();this.animations.push(o);return}this.progress=g(0,r.deltaY/180*.5,1);r.data.animation.progressStep(this.progress);this.ionPull.emit()},onEnd:e=>{if(!e.data.didStart){return}this.gesture.enable(false);const{scrollEl:r}=this;const s=r.matches(f)?"overflow":"--overflow";i((()=>r.style.removeProperty(s)));if(this.progress<=.4){e.data.animation.progressEnd(0,this.progress,500).onFinish((()=>{this.animations.forEach((e=>e.destroy()));this.animations=[];this.gesture.enable(true);this.state=1}));return}const t=o([0,0],[0,0],[1,1],[1,1],this.progress)[0];const h=N(n);this.animations.push(h);i((async()=>{n.style.setProperty("--ion-pulling-refresher-translate",`${t*100}px`);e.data.animation.progressEnd();await h.play();this.beginRefresh();e.data.animation.destroy();this.gesture.enable(true)}))}});this.disabledChanged()}async setupNativeRefresher(e){if(this.scrollListenerCallback||!e||this.nativeRefresher||!this.scrollEl){return}this.setCss(0,"",false,"");this.nativeRefresher=true;const r=this.el.querySelector("ion-refresher-content .refresher-pulling ion-spinner");const i=this.el.querySelector("ion-refresher-content .refresher-refreshing ion-spinner");if(y(this)==="ios"){this.setupiOSNativeRefresher(r,i)}else{this.setupMDNativeRefresher(e,r,i)}}componentDidUpdate(){this.checkNativeRefresher()}async connectedCallback(){if(this.el.getAttribute("slot")!=="fixed"){console.error('Make sure you use: <ion-refresher slot="fixed">');return}const e=this.el.closest(a);if(!e){l(this.el);return}u(e,(async()=>{const r=e.querySelector(f);this.scrollEl=await c(r!==null&&r!==void 0?r:e);this.backgroundContentEl=await e.getBackgroundElement();this.contentFullscreen=e.fullscreen;if(await b(this.el,y(this))){this.setupNativeRefresher(e)}else{this.gesture=(await import("./p-52ed752a.js")).createGesture({el:e,gestureName:"refresher",gesturePriority:31,direction:"y",threshold:20,passive:false,canStart:()=>this.canStart(),onStart:()=>this.onStart(),onMove:e=>this.onMove(e),onEnd:()=>this.onEnd()});this.disabledChanged()}}))}disconnectedCallback(){this.destroyNativeRefresher();this.scrollEl=undefined;if(this.gesture){this.gesture.destroy();this.gesture=undefined}}async complete(){if(this.nativeRefresher){this.needsCompletion=true;if(!this.pointerDown){m((()=>m((()=>this.resetNativeRefresher(this.elementToTransform,32)))))}}else{this.close(32,"120ms")}}async cancel(){if(this.nativeRefresher){if(!this.pointerDown){m((()=>m((()=>this.resetNativeRefresher(this.elementToTransform,16)))))}}else{this.close(16,"")}}getProgress(){return Promise.resolve(this.progress)}canStart(){if(!this.scrollEl){return false}if(this.state!==1){return false}if(this.scrollEl.scrollTop>0){return false}return true}onStart(){this.progress=0;this.state=1;this.memoizeOverflowStyle();if(this.contentFullscreen&&this.backgroundContentEl){this.backgroundContentEl.style.setProperty("--offset-top","0px")}}onMove(e){if(!this.scrollEl){return}const r=e.event;if(r.touches!==undefined&&r.touches.length>1){return}if((this.state&56)!==0){return}const i=Number.isNaN(this.pullFactor)||this.pullFactor<0?1:this.pullFactor;const s=e.deltaY*i;if(s<=0){this.progress=0;this.state=1;if(this.appliedStyles){this.setCss(0,"",false,"");return}return}if(this.state===1){const e=this.scrollEl.scrollTop;if(e>0){this.progress=0;return}this.state=2}if(r.cancelable){r.preventDefault()}this.setCss(s,"0ms",true,"");if(s===0){this.progress=0;return}const t=this.pullMin;this.progress=s/t;if(!this.didStart){this.didStart=true;this.ionStart.emit()}this.ionPull.emit();if(s<t){this.state=2;return}if(s>this.pullMax){this.beginRefresh();return}this.state=4;return}onEnd(){if(this.state===4){this.beginRefresh()}else if(this.state===2){this.cancel()}else if(this.state===1){this.restoreOverflowStyle()}}beginRefresh(){this.state=8;this.setCss(this.pullMin,this.snapbackDuration,true,"");this.ionRefresh.emit({complete:this.complete.bind(this)})}close(e,r){setTimeout((()=>{var e;this.state=1;this.progress=0;this.didStart=false;this.setCss(0,"0ms",false,"",true);if(this.contentFullscreen&&this.backgroundContentEl){(e=this.backgroundContentEl)===null||e===void 0?void 0:e.style.removeProperty("--offset-top")}}),600);this.state=e;this.setCss(0,this.closeDuration,true,r)}setCss(e,r,s,t,n=false){if(this.nativeRefresher){return}this.appliedStyles=e>0;i((()=>{if(this.scrollEl&&this.backgroundContentEl){const i=this.scrollEl.style;const n=this.backgroundContentEl.style;i.transform=n.transform=e>0?`translateY(${e}px) translateZ(0px)`:"";i.transitionDuration=n.transitionDuration=r;i.transitionDelay=n.transitionDelay=t;i.overflow=s?"hidden":""}if(n){this.restoreOverflowStyle()}}))}memoizeOverflowStyle(){if(this.scrollEl){const{overflow:e,overflowX:r,overflowY:i}=this.scrollEl.style;this.overflowStyles={overflow:e!==null&&e!==void 0?e:"",overflowX:r!==null&&r!==void 0?r:"",overflowY:i!==null&&i!==void 0?i:""}}}restoreOverflowStyle(){if(this.overflowStyles!==undefined&&this.scrollEl!==undefined){const{overflow:e,overflowX:r,overflowY:i}=this.overflowStyles;this.scrollEl.style.overflow=e;this.scrollEl.style.overflowX=r;this.scrollEl.style.overflowY=i;this.overflowStyles=undefined}}render(){const e=y(this);return t(h,{key:"4c36bffbfa32ef1bd28a60f4455c125842880659",slot:"fixed",class:{[e]:true,[`refresher-${e}`]:true,"refresher-native":this.nativeRefresher,"refresher-active":this.state!==1,"refresher-pulling":this.state===2,"refresher-ready":this.state===4,"refresher-refreshing":this.state===8,"refresher-cancelling":this.state===16,"refresher-completing":this.state===32}})}get el(){return n(this)}static get watchers(){return{disabled:["disabledChanged"]}}};Y.style={ios:E,md:C};export{Y as ion_refresher}; //# sourceMappingURL=p-f6e3f609.entry.js.map