@haxtheweb/haxcms-nodejs/dist/public/build/es6/node_modules/@lit-labs/motion/animate.js

HAXcms single and multisite nodejs server, api, and administration

import{nothing as t}from"../../lit/html.js";import{directive as i,PartType as e}from"../../lit/directive.js";import{AsyncDirective as s}from"../../lit/async-directive.js";import{controllerMap as o}from"./animate-controller.js";export{AnimateController}from"./animate-controller.js";let n=0;const r=new Map,h=new WeakSet,a=()=>new Promise((t=>requestAnimationFrame(t))),l=[{transform:"translateY(100%) scale(0)",opacity:0}],p=[{transform:"translateY(-100%) scale(0)",opacity:0}],d=[{transform:"translateX(-100%) scale(0)",opacity:0}],m=[{transform:"translateX(100%) scale(0)",opacity:0}],c=[{}],f=[{opacity:0}],u=f,y=[{opacity:0},{opacity:1}],v=[{opacity:0},{opacity:.25,offset:.75},{opacity:1}],g=(t,i)=>{const e=t-i;return 0===e?void 0:e},w=(t,i)=>{const e=t/i;return 1===e?void 0:e},A={left:(t,i)=>{const e=g(t,i);return{value:e,transform:null==e||isNaN(e)?void 0:`translateX(${e}px)`}},top:(t,i)=>{const e=g(t,i);return{value:e,transform:null==e||isNaN(e)?void 0:`translateY(${e}px)`}},width:(t,i)=>{let e;0===i&&(i=1,e={width:"1px"});const s=w(t,i);return{value:s,overrideFrom:e,transform:null==s||isNaN(s)?void 0:`scaleX(${s})`}},height:(t,i)=>{let e;0===i&&(i=1,e={height:"1px"});const s=w(t,i);return{value:s,overrideFrom:e,transform:null==s||isNaN(s)?void 0:`scaleY(${s})`}}},b={duration:333,easing:"ease-in-out"},O=["left","top","width","height","opacity","color","background"],C=new WeakMap;class x extends s{constructor(t){if(super(t),this.t=!1,this.i=null,this.o=null,this.h=!0,this.shouldLog=!1,t.type===e.CHILD)throw Error("The `animate` directive must be used in attribute position.");this.createFinished()}createFinished(){this.resolveFinished?.(),this.finished=new Promise((t=>{this.l=t}))}async resolveFinished(){this.l?.(),this.l=void 0}render(i){return t}getController(){return o.get(this.u)}isDisabled(){return this.options.disabled||this.getController()?.disabled}update(t,[i]){const e=void 0===this.u;return e&&(this.u=t.options?.host,this.u.addController(this),this.u.updateComplete.then((t=>this.t=!0)),this.element=t.element,C.set(this.element,this)),this.optionsOrCallback=i,(e||"function"!=typeof i)&&this.p(i),this.render(i)}p(t){t=t??{};const i=this.getController();void 0!==i&&((t={...i.defaultOptions,...t}).keyframeOptions={...i.defaultOptions.keyframeOptions,...t.keyframeOptions}),t.properties??=O,this.options=t}m(){const t={},i=this.element.getBoundingClientRect(),e=getComputedStyle(this.element);return this.options.properties.forEach((s=>{const o=i[s]??(A[s]?void 0:e[s]),n=Number(o);t[s]=isNaN(n)?o+"":n})),t}v(){let t,i=!0;return this.options.guard&&(t=this.options.guard(),i=((t,i)=>{if(Array.isArray(t)){if(Array.isArray(i)&&i.length===t.length&&t.every(((t,e)=>t===i[e])))return!1}else if(i===t)return!1;return!0})(t,this._)),this.h=this.t&&!this.isDisabled()&&!this.isAnimating()&&i&&this.element.isConnected,this.h&&(this._=Array.isArray(t)?Array.from(t):t),this.h}hostUpdate(){"function"==typeof this.optionsOrCallback&&this.p(this.optionsOrCallback()),this.v()&&(this.A=this.m(),this.i=this.i??this.element.parentNode,this.o=this.element.nextSibling)}async hostUpdated(){if(!this.h||!this.element.isConnected||this.options.skipInitial&&!this.isHostRendered)return;let t;this.prepare(),await a;const i=this.O(),e=this.j(this.options.keyframeOptions,i),s=this.m();if(void 0!==this.A){const{from:e,to:o}=this.N(this.A,s,i);this.log("measured",[this.A,s,e,o]),t=this.calculateKeyframes(e,o)}else{const e=r.get(this.options.inId);if(e){r.delete(this.options.inId);const{from:o,to:h}=this.N(e,s,i);t=this.calculateKeyframes(o,h),t=this.options.in?[{...this.options.in[0],...t[0]},...this.options.in.slice(1),t[1]]:t,n++,t.forEach((t=>t.zIndex=n))}else this.options.in&&(t=[...this.options.in,{}])}this.animate(t,e)}resetStyles(){void 0!==this.P&&(this.element.setAttribute("style",this.P??""),this.P=void 0)}commitStyles(){this.P=this.element.getAttribute("style"),this.webAnimation?.commitStyles(),this.webAnimation?.cancel()}reconnected(){}async disconnected(){if(!this.h)return;if(void 0!==this.options.id&&r.set(this.options.id,this.A),void 0===this.options.out)return;if(this.prepare(),await a(),this.i?.isConnected){const t=this.o&&this.o.parentNode===this.i?this.o:null;if(this.i.insertBefore(this.element,t),this.options.stabilizeOut){const t=this.m();this.log("stabilizing out");const i=this.A.left-t.left,e=this.A.top-t.top;!("static"===getComputedStyle(this.element).position)||0===i&&0===e||(this.element.style.position="relative"),0!==i&&(this.element.style.left=i+"px"),0!==e&&(this.element.style.top=e+"px")}}const t=this.j(this.options.keyframeOptions);await this.animate(this.options.out,t),this.element.remove()}prepare(){this.createFinished()}start(){this.options.onStart?.(this)}didFinish(t){t&&this.options.onComplete?.(this),this.A=void 0,this.animatingProperties=void 0,this.frames=void 0,this.resolveFinished()}O(){const t=[];for(let i=this.element.parentNode;i;i=i?.parentNode){const e=C.get(i);e&&!e.isDisabled()&&e&&t.push(e)}return t}get isHostRendered(){const t=h.has(this.u);return t||this.u.updateComplete.then((()=>{h.add(this.u)})),t}j(t,i=this.O()){const e={...b};return i.forEach((t=>Object.assign(e,t.options.keyframeOptions))),Object.assign(e,t),e}N(t,i,e){t={...t},i={...i};const s=e.map((t=>t.animatingProperties)).filter((t=>void 0!==t));let o=1,n=1;return s.length>0&&(s.forEach((t=>{t.width&&(o/=t.width),t.height&&(n/=t.height)})),void 0!==t.left&&void 0!==i.left&&(t.left=o*t.left,i.left=o*i.left),void 0!==t.top&&void 0!==i.top&&(t.top=n*t.top,i.top=n*i.top)),{from:t,to:i}}calculateKeyframes(t,i,e=!1){const s={},o={};let n=!1;const r={};for(const e in i){const h=t[e],l=i[e];if(e in A){const t=A[e];if(void 0===h||void 0===l)continue;const i=t(h,l);void 0!==i.transform&&(r[e]=i.value,n=!0,s.transform=`${s.transform??""} ${i.transform}`,void 0!==i.overrideFrom&&Object.assign(s,i.overrideFrom))}else h!==l&&void 0!==h&&void 0!==l&&(n=!0,s[e]=h,o[e]=l)}return s.transformOrigin=o.transformOrigin=e?"center center":"top left",this.animatingProperties=r,n?[s,o]:void 0}async animate(t,i=this.options.keyframeOptions){this.start(),this.frames=t;let e=!1;if(!this.isAnimating()&&!this.isDisabled()&&(this.options.onFrames&&(this.frames=t=this.options.onFrames(this),this.log("modified frames",t)),void 0!==t)){this.log("animate",[t,i]),e=!0,this.webAnimation=this.element.animate(t,i);const s=this.getController();s?.add(this);try{await this.webAnimation.finished}catch(t){}s?.remove(this)}return this.didFinish(e),e}isAnimating(){return"running"===this.webAnimation?.playState||this.webAnimation?.pending}log(t,i){this.shouldLog&&!this.isDisabled()&&console.log(t,this.options.id,i)}}const N=i(x);export{x as Animate,N as animate,a as animationFrame,O as defaultCssProperties,b as defaultKeyframeOptions,u as fade,y as fadeIn,v as fadeInSlow,f as fadeOut,p as flyAbove,l as flyBelow,d as flyLeft,m as flyRight,c as none,A as transformProps};