taggedjs-animate-css 0.0.13 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/bundle.js CHANGED
@@ -1,6 +1,6 @@
1
- var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.d(e,{_z:()=>c,mi:()=>l,qG:()=>r,Ce:()=>u,Xn:()=>d,MV:()=>f});var n={};function o({fxIn:t,fxOut:e,staggerBy:n=300,outPositionAbsolute:o=!0}){return{in:e=>i({fxName:t,staggerBy:n,...e}),out:t=>a({fxName:e,staggerBy:n,outPositionAbsolute:o,...t})}}t.r(n),t.d(n,{_z:()=>c,mi:()=>l,qG:()=>r,Ce:()=>u,Xn:()=>d,MV:()=>f});const i=async({target:t,stagger:e,staggerBy:n,fxName:o="fadeInDown"})=>{t.style.opacity="0",e&&await s(e*n),t.style.opacity="1",t.classList.add("animate__animated","animate__"+o)},a=async({target:t,stagger:e,outPositionAbsolute:n=!0,fxName:o="fadeOutUp",staggerBy:i})=>(n&&function(t){t.style.zIndex=t.style.zIndex||1;const e=t.offsetTop+"px",n=t.offsetLeft+"px",o=t.clientWidth+(t.offsetWidth-t.clientWidth)+1+"px",i=t.clientHeight+(t.offsetHeight-t.clientHeight)+1+"px";setTimeout((()=>{t.style.top=e,t.style.left=n,t.style.width=o,t.style.height=i,t.style.position="absolute"}),0)}(t),e&&await s(e*i),new Promise((function(e){t.classList.add("animate__animated","animate__"+o),t.addEventListener("animationend",(function n(i){i.target===t&&(t.classList.remove("animate__animated","animate__"+o),t.removeEventListener("animationend",n),e(void 0))}))})));function s(t){return new Promise((e=>{setTimeout(e,t)}))}const{in:u,out:f}=o({fxIn:"fadeInDown",fxOut:"fadeOutUp"}),{in:r,out:d}=o({fxIn:"fadeIn",fxOut:"fadeOut"});function l({fxIn:t,fxOut:e,duration:i=".2s",outPositionAbsolute:a=!1}={duration:".2s",outPositionAbsolute:!1}){if(!t||!e){const n=o({fxIn:"fadeInDown",fxOut:"fadeOutUp",outPositionAbsolute:a});t||(t=n.in),e||(e=n.out)}const s=(0,n.getInnerHTML)();return n.html`
1
+ var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.d(e,{_z:()=>c,mi:()=>l,qG:()=>r,Ce:()=>u,Xn:()=>d,MV:()=>f});var n={};function o({fxIn:t,fxOut:e,staggerBy:n=300,outPositionAbsolute:o=!0}){return{in:e=>i({fxName:t,staggerBy:n,...e}),out:t=>a({fxName:e,staggerBy:n,outPositionAbsolute:o,...t})}}t.r(n),t.d(n,{_z:()=>c,mi:()=>l,qG:()=>r,Ce:()=>u,Xn:()=>d,MV:()=>f});const i=async({target:t,stagger:e,staggerBy:n,fxName:o="fadeInDown"})=>{t.style.opacity="0",e&&await s(e*n),t.style.opacity="1",t.classList.add("animate__animated","animate__"+o)},a=async({target:t,stagger:e,outPositionAbsolute:n=!0,fxName:o="fadeOutUp",staggerBy:i})=>(n&&function(t){t.style.zIndex=t.style.zIndex||1;const e=t.offsetTop+"px",n=t.offsetLeft+"px",o=t.clientWidth+(t.offsetWidth-t.clientWidth)+1+"px",i=t.clientHeight+(t.offsetHeight-t.clientHeight)+1+"px";setTimeout((()=>{t.style.top=e,t.style.left=n,t.style.width=o,t.style.height=i,t.style.position="absolute"}),0)}(t),e&&await s(e*i),new Promise((function(e){t.classList.add("animate__animated","animate__"+o),t.addEventListener("animationend",(function n(i){i.target===t&&(t.classList.remove("animate__animated","animate__"+o),t.removeEventListener("animationend",n),e(void 0))}))})));function s(t){return new Promise((e=>{setTimeout(e,t)}))}const{in:u,out:f}=o({fxIn:"fadeInUp",fxOut:"fadeOutDown"}),{in:r,out:d}=o({fxIn:"fadeIn",fxOut:"fadeOut"});function l({fxIn:t,fxOut:e,duration:i=".2s",outPositionAbsolute:a=!1}={duration:".2s",outPositionAbsolute:!1}){if(!t||!e){const n=o({fxIn:"fadeInUp",fxOut:"fadeOutDown",outPositionAbsolute:a});t||(t=n.in),e||(e=n.out)}const s=(0,n.getInnerHTML)();return n.html`
2
2
  <div oninit=${t} ondestroy=${e} style.--animate-duration=${i}>${s}</div>
3
- `.acceptInnerHTML(s)}function c({fxIn:t,fxOut:e,duration:i=".2s",outPositionAbsolute:a=!0}={duration:".2s",outPositionAbsolute:!0}){if(!t||!e){const n=o({fxIn:"fadeInDown",fxOut:"fadeOutUp",outPositionAbsolute:a});t||(t=n.in),e||(e=n.out)}const s=(0,n.getInnerHTML)();return n.html`
3
+ `.acceptInnerHTML(s)}function c({fxIn:t,fxOut:e,duration:i=".2s",outPositionAbsolute:a=!0}={duration:".2s",outPositionAbsolute:!0}){if(!t||!e){const n=o({fxIn:"fadeInUp",fxOut:"fadeOutDown",outPositionAbsolute:a});t||(t=n.in),e||(e=n.out)}const s=(0,n.getInnerHTML)();return n.html`
4
4
  <div oninit=${t} ondestroy=${e} style.--animate-duration=${i}>${s}</div>
5
5
  `.acceptInnerHTML(s)}var m=e._z,y=e.mi,g=e.qG,p=e.Ce,x=e.Xn,I=e.MV;export{m as animateLoop,y as animateWrap,g as fadeIn,p as fadeInDown,x as fadeOut,I as fadeOutUp};
6
6
  //# sourceMappingURL=bundle.js.map
package/bundle.js.gz CHANGED
Binary file
package/bundle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"bundle.js","mappings":"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","sources":["webpack://taggedjs-animate-css/webpack/bootstrap","webpack://taggedjs-animate-css/webpack/runtime/define property getters","webpack://taggedjs-animate-css/webpack/runtime/hasOwnProperty shorthand","webpack://taggedjs-animate-css/webpack/runtime/make namespace object","webpack://taggedjs-animate-css/./ts/createFx.function.ts","webpack://taggedjs-animate-css/./ts/index.ts"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export function createFx({ fxIn, fxOut, staggerBy = 300, outPositionAbsolute = true, }) {\n return {\n in: (input) => animateInit({ fxName: fxIn, staggerBy, ...input }),\n out: (input) => animateDestroy({ fxName: fxOut, staggerBy, outPositionAbsolute, ...input }),\n };\n}\nconst animateInit = async ({ target, stagger, staggerBy, fxName = 'fadeInDown' }) => {\n target.style.opacity = '0';\n if (stagger) {\n await wait(stagger * staggerBy);\n }\n target.style.opacity = '1';\n target.classList.add('animate__animated', 'animate__' + fxName);\n};\nconst animateDestroy = async ({ target, stagger, outPositionAbsolute = true, fxName = 'fadeOutUp', staggerBy }) => {\n if (outPositionAbsolute) {\n captureElementPosition(target);\n }\n if (stagger) {\n await wait(stagger * staggerBy);\n }\n return new Promise(function (res) {\n // Create a one-time event listener\n function handleAnimationEnd(event) {\n // Optional: make sure the event is from the target element\n if (event.target !== target)\n return;\n // Clean up\n target.classList.remove('animate__animated', 'animate__' + fxName);\n target.removeEventListener('animationend', handleAnimationEnd);\n res(undefined);\n }\n target.classList.add('animate__animated', 'animate__' + fxName);\n target.addEventListener('animationend', handleAnimationEnd);\n });\n};\n// absolute\nexport function captureElementPosition(element) {\n element.style.zIndex = element.style.zIndex || 1;\n const toTop = element.offsetTop + 'px';\n const toLeft = element.offsetLeft + 'px';\n const toWidth = (element.clientWidth + (element.offsetWidth - element.clientWidth) + 1) + 'px';\n const toHeight = (element.clientHeight + (element.offsetHeight - element.clientHeight) + 1) + 'px';\n const fix = () => {\n element.style.top = toTop;\n element.style.left = toLeft;\n element.style.width = toWidth;\n element.style.height = toHeight;\n element.style.position = 'absolute';\n };\n // element.style.position = 'fixed'\n // allow other elements that are being removed to have a moment to figure out where they currently sit\n setTimeout(fix, 0);\n}\nfunction wait(time) {\n return new Promise((res) => {\n setTimeout(res, time);\n });\n}\n","import { createFx } from \"./createFx.function.js\";\nimport { getInnerHTML, html } from \"taggedjs\";\nexport const { in: fadeInDown, out: fadeOutUp } = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp' });\nexport const { in: fadeIn, out: fadeOut } = createFx({ fxIn: 'fadeIn', fxOut: 'fadeOut' });\n/** Use on html elements to have them animated in and out */\nexport function animateWrap({ fxIn, fxOut, duration = '.2s', outPositionAbsolute = false, } = {\n duration: '.2s',\n outPositionAbsolute: false,\n}) {\n if (!fxIn || !fxOut) {\n const created = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp', outPositionAbsolute });\n if (!fxIn) {\n fxIn = created.in;\n }\n if (!fxOut) {\n fxOut = created.out;\n }\n }\n const innerHTML = getInnerHTML();\n return html `\n <div oninit=${fxIn} ondestroy=${fxOut} style.--animate-duration=${duration}>${innerHTML}</div>\n `.acceptInnerHTML(innerHTML);\n}\n/** Use on html elements, within a loop, to have them animated in and out */\nexport function animateLoop({ fxIn, fxOut, duration = '.2s', outPositionAbsolute = true, } = {\n duration: '.2s',\n outPositionAbsolute: true,\n}) {\n if (!fxIn || !fxOut) {\n const created = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp', outPositionAbsolute });\n if (!fxIn) {\n fxIn = created.in;\n }\n if (!fxOut) {\n fxOut = created.out;\n }\n }\n const innerHTML = getInnerHTML();\n return html `\n <div oninit=${fxIn} ondestroy=${fxOut} style.--animate-duration=${duration}>${innerHTML}</div>\n `.acceptInnerHTML(innerHTML);\n}\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","createFx","fxIn","fxOut","staggerBy","outPositionAbsolute","in","input","animateInit","fxName","out","animateDestroy","async","target","stagger","style","opacity","wait","classList","add","element","zIndex","toTop","offsetTop","toLeft","offsetLeft","toWidth","clientWidth","offsetWidth","toHeight","clientHeight","offsetHeight","setTimeout","top","left","width","height","position","captureElementPosition","Promise","res","addEventListener","handleAnimationEnd","event","remove","removeEventListener","undefined","time","fadeInDown","fadeOutUp","fadeIn","fadeOut","animateWrap","duration","created","innerHTML","getInnerHTML","html","acceptInnerHTML","animateLoop"],"sourceRoot":""}
1
+ {"version":3,"file":"bundle.js","mappings":"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","sources":["webpack://taggedjs-animate-css/webpack/bootstrap","webpack://taggedjs-animate-css/webpack/runtime/define property getters","webpack://taggedjs-animate-css/webpack/runtime/hasOwnProperty shorthand","webpack://taggedjs-animate-css/webpack/runtime/make namespace object","webpack://taggedjs-animate-css/./ts/createFx.function.ts","webpack://taggedjs-animate-css/./ts/index.ts"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export function createFx({ fxIn, fxOut, staggerBy = 300, outPositionAbsolute = true, }) {\n return {\n in: (input) => animateInit({ fxName: fxIn, staggerBy, ...input }),\n out: (input) => animateDestroy({ fxName: fxOut, staggerBy, outPositionAbsolute, ...input }),\n };\n}\nconst animateInit = async ({ target, stagger, staggerBy, fxName = 'fadeInDown' }) => {\n target.style.opacity = '0';\n if (stagger) {\n await wait(stagger * staggerBy);\n }\n target.style.opacity = '1';\n target.classList.add('animate__animated', 'animate__' + fxName);\n};\nconst animateDestroy = async ({ target, stagger, outPositionAbsolute = true, fxName = 'fadeOutUp', staggerBy }) => {\n if (outPositionAbsolute) {\n captureElementPosition(target);\n }\n if (stagger) {\n await wait(stagger * staggerBy);\n }\n return new Promise(function (res) {\n // Create a one-time event listener\n function handleAnimationEnd(event) {\n // Optional: make sure the event is from the target element\n if (event.target !== target)\n return;\n // Clean up\n target.classList.remove('animate__animated', 'animate__' + fxName);\n target.removeEventListener('animationend', handleAnimationEnd);\n res(undefined);\n }\n target.classList.add('animate__animated', 'animate__' + fxName);\n target.addEventListener('animationend', handleAnimationEnd);\n });\n};\n// absolute\nexport function captureElementPosition(element) {\n element.style.zIndex = element.style.zIndex || 1;\n const toTop = element.offsetTop + 'px';\n const toLeft = element.offsetLeft + 'px';\n const toWidth = (element.clientWidth + (element.offsetWidth - element.clientWidth) + 1) + 'px';\n const toHeight = (element.clientHeight + (element.offsetHeight - element.clientHeight) + 1) + 'px';\n const fix = () => {\n element.style.top = toTop;\n element.style.left = toLeft;\n element.style.width = toWidth;\n element.style.height = toHeight;\n element.style.position = 'absolute';\n };\n // element.style.position = 'fixed'\n // allow other elements that are being removed to have a moment to figure out where they currently sit\n setTimeout(fix, 0);\n}\nfunction wait(time) {\n return new Promise((res) => {\n setTimeout(res, time);\n });\n}\n","import { createFx } from \"./createFx.function.js\";\nimport { getInnerHTML, html } from \"taggedjs\";\nexport const { in: fadeInDown, out: fadeOutUp } = createFx({\n fxIn: 'fadeInUp',\n fxOut: 'fadeOutDown'\n});\nexport const { in: fadeIn, out: fadeOut } = createFx({\n fxIn: 'fadeIn',\n fxOut: 'fadeOut',\n});\n/** Use on html elements to have them animated in and out */\nexport function animateWrap({ fxIn, fxOut, duration = '.2s', outPositionAbsolute = false, } = {\n duration: '.2s',\n outPositionAbsolute: false,\n}) {\n if (!fxIn || !fxOut) {\n const created = createFx({\n fxIn: 'fadeInUp',\n fxOut: 'fadeOutDown',\n outPositionAbsolute,\n });\n if (!fxIn) {\n fxIn = created.in;\n }\n if (!fxOut) {\n fxOut = created.out;\n }\n }\n const innerHTML = getInnerHTML();\n return html `\n <div oninit=${fxIn} ondestroy=${fxOut} style.--animate-duration=${duration}>${innerHTML}</div>\n `.acceptInnerHTML(innerHTML);\n}\n/** Use on html elements, within a loop, to have them animated in and out */\nexport function animateLoop({ fxIn, fxOut, duration = '.2s', outPositionAbsolute = true, } = {\n duration: '.2s',\n outPositionAbsolute: true,\n}) {\n if (!fxIn || !fxOut) {\n const created = createFx({\n fxIn: 'fadeInUp',\n fxOut: 'fadeOutDown',\n outPositionAbsolute\n });\n if (!fxIn) {\n fxIn = created.in;\n }\n if (!fxOut) {\n fxOut = created.out;\n }\n }\n const innerHTML = getInnerHTML();\n return html `\n <div oninit=${fxIn} ondestroy=${fxOut} style.--animate-duration=${duration}>${innerHTML}</div>\n `.acceptInnerHTML(innerHTML);\n}\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","createFx","fxIn","fxOut","staggerBy","outPositionAbsolute","in","input","animateInit","fxName","out","animateDestroy","async","target","stagger","style","opacity","wait","classList","add","element","zIndex","toTop","offsetTop","toLeft","offsetLeft","toWidth","clientWidth","offsetWidth","toHeight","clientHeight","offsetHeight","setTimeout","top","left","width","height","position","captureElementPosition","Promise","res","addEventListener","handleAnimationEnd","event","remove","removeEventListener","undefined","time","fadeInDown","fadeOutUp","fadeIn","fadeOut","animateWrap","duration","created","innerHTML","getInnerHTML","html","acceptInnerHTML","animateLoop"],"sourceRoot":""}
package/bundle.js.map.gz CHANGED
Binary file
package/js/index.js CHANGED
@@ -1,14 +1,24 @@
1
1
  import { createFx } from "./createFx.function.js";
2
2
  import { getInnerHTML, html } from "taggedjs";
3
- export const { in: fadeInDown, out: fadeOutUp } = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp' });
4
- export const { in: fadeIn, out: fadeOut } = createFx({ fxIn: 'fadeIn', fxOut: 'fadeOut' });
3
+ export const { in: fadeInDown, out: fadeOutUp } = createFx({
4
+ fxIn: 'fadeInUp',
5
+ fxOut: 'fadeOutDown'
6
+ });
7
+ export const { in: fadeIn, out: fadeOut } = createFx({
8
+ fxIn: 'fadeIn',
9
+ fxOut: 'fadeOut',
10
+ });
5
11
  /** Use on html elements to have them animated in and out */
6
12
  export function animateWrap({ fxIn, fxOut, duration = '.2s', outPositionAbsolute = false, } = {
7
13
  duration: '.2s',
8
14
  outPositionAbsolute: false,
9
15
  }) {
10
16
  if (!fxIn || !fxOut) {
11
- const created = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp', outPositionAbsolute });
17
+ const created = createFx({
18
+ fxIn: 'fadeInUp',
19
+ fxOut: 'fadeOutDown',
20
+ outPositionAbsolute,
21
+ });
12
22
  if (!fxIn) {
13
23
  fxIn = created.in;
14
24
  }
@@ -27,7 +37,11 @@ export function animateLoop({ fxIn, fxOut, duration = '.2s', outPositionAbsolute
27
37
  outPositionAbsolute: true,
28
38
  }) {
29
39
  if (!fxIn || !fxOut) {
30
- const created = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp', outPositionAbsolute });
40
+ const created = createFx({
41
+ fxIn: 'fadeInUp',
42
+ fxOut: 'fadeOutDown',
43
+ outPositionAbsolute
44
+ });
31
45
  if (!fxIn) {
32
46
  fxIn = created.in;
33
47
  }
package/js/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAgB,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE7C,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,EAAC,IAAI,EAAC,YAAY,EAAE,KAAK,EAAC,WAAW,EAAC,CAAC,CAAA;AAClG,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC,EAAC,IAAI,EAAC,QAAQ,EAAE,KAAK,EAAC,SAAS,EAAC,CAAC,CAAA;AAgBtF,4DAA4D;AAC5D,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,mBAAmB,GAAG,KAAK,MACL;IACtB,QAAQ,EAAE,KAAK;IACf,mBAAmB,EAAE,KAAK;CAC3B;IACC,IAAG,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAC,IAAI,EAAC,YAAY,EAAE,KAAK,EAAC,WAAW,EAAE,mBAAmB,EAAC,CAAC,CAAA;QAErF,IAAG,CAAC,IAAI,EAAE,CAAC;YACT,IAAI,GAAG,OAAO,CAAC,EAAE,CAAA;QACnB,CAAC;QAED,IAAG,CAAC,KAAK,EAAE,CAAC;YACV,KAAK,GAAG,OAAO,CAAC,GAAG,CAAA;QACrB,CAAC;IACH,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,OAAO,IAAI,CAAA;kBACK,IAAI,cAAc,KAAK,6BAA6B,QAAQ,IAAI,SAAS;GACxF,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;AAC9B,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,mBAAmB,GAAG,IAAI,MACJ;IACtB,QAAQ,EAAE,KAAK;IACf,mBAAmB,EAAE,IAAI;CAC1B;IACC,IAAG,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAC,IAAI,EAAC,YAAY,EAAE,KAAK,EAAC,WAAW,EAAE,mBAAmB,EAAC,CAAC,CAAA;QAErF,IAAG,CAAC,IAAI,EAAE,CAAC;YACT,IAAI,GAAG,OAAO,CAAC,EAAE,CAAA;QACnB,CAAC;QAED,IAAG,CAAC,KAAK,EAAE,CAAC;YACV,KAAK,GAAG,OAAO,CAAC,GAAG,CAAA;QACrB,CAAC;IACH,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,OAAO,IAAI,CAAA;kBACK,IAAI,cAAc,KAAK,6BAA6B,QAAQ,IAAI,SAAS;GACxF,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;AAC9B,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAgB,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE7C,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC;IACzD,IAAI,EAAC,UAAU;IACf,KAAK,EAAC,aAAa;CACpB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC;IACnD,IAAI,EAAC,QAAQ;IACb,KAAK,EAAC,SAAS;CAChB,CAAC,CAAA;AAgBF,4DAA4D;AAC5D,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,mBAAmB,GAAG,KAAK,MACL;IACtB,QAAQ,EAAE,KAAK;IACf,mBAAmB,EAAE,KAAK;CAC3B;IACC,IAAG,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,OAAO,GAAG,QAAQ,CAAC;YACvB,IAAI,EAAC,UAAU;YACf,KAAK,EAAC,aAAa;YACnB,mBAAmB;SACpB,CAAC,CAAA;QAEF,IAAG,CAAC,IAAI,EAAE,CAAC;YACT,IAAI,GAAG,OAAO,CAAC,EAAE,CAAA;QACnB,CAAC;QAED,IAAG,CAAC,KAAK,EAAE,CAAC;YACV,KAAK,GAAG,OAAO,CAAC,GAAG,CAAA;QACrB,CAAC;IACH,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,OAAO,IAAI,CAAA;kBACK,IAAI,cAAc,KAAK,6BAA6B,QAAQ,IAAI,SAAS;GACxF,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;AAC9B,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,mBAAmB,GAAG,IAAI,MACJ;IACtB,QAAQ,EAAE,KAAK;IACf,mBAAmB,EAAE,IAAI;CAC1B;IACC,IAAG,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,OAAO,GAAG,QAAQ,CAAC;YACvB,IAAI,EAAC,UAAU;YACf,KAAK,EAAC,aAAa;YACnB,mBAAmB;SACpB,CAAC,CAAA;QAEF,IAAG,CAAC,IAAI,EAAE,CAAC;YACT,IAAI,GAAG,OAAO,CAAC,EAAE,CAAA;QACnB,CAAC;QAED,IAAG,CAAC,KAAK,EAAE,CAAC;YACV,KAAK,GAAG,OAAO,CAAC,GAAG,CAAA;QACrB,CAAC;IACH,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,OAAO,IAAI,CAAA;kBACK,IAAI,cAAc,KAAK,6BAA6B,QAAQ,IAAI,SAAS;GACxF,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;AAC9B,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "taggedjs-animate-css",
3
3
  "type": "module",
4
- "version": "0.0.13",
4
+ "version": "0.0.14",
5
5
  "description": "HTML and CSS animations for TaggedJs brought to us by animate-css",
6
6
  "main": "js/index.js",
7
7
  "keywords": [