axentix - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/components/caroulix/caroulix.esm.js

@@ -39,3 +39,3 @@ var __defProp = Object.defineProperty;
 };
-var _draggedPositionX, _isAnimated, _children, _totalMediaToLoad, _loadedMediaCount, _isResizing, _isScrolling, _isPressed, _deltaX, _deltaY, _windowResizeRef, _arrowPrev, _arrowNext, _arrowNextRef, _arrowPrevRef, _touchStartRef, _touchMoveRef, _touchReleaseRef, _xStart, _yStart, _indicators, _autoplayInterval, _pointerType, _getChildren, getChildren_fn, _waitForLoad, waitForLoad_fn, _newItemLoaded, newItemLoaded_fn, _setItemsPosition, setItemsPosition_fn, _setBasicCaroulixHeight, setBasicCaroulixHeight_fn, _handleDragStart, handleDragStart_fn, _handleDragMove, handleDragMove_fn, _handleDragRelease, handleDragRelease_fn, _enableIndicators, enableIndicators_fn, _handleIndicatorClick, handleIndicatorClick_fn, _resetIndicators, resetIndicators_fn, _getXPosition, getXPosition_fn, _getYPosition, getYPosition_fn, _setTransitionDuration, setTransitionDuration_fn, _emitSlideEvent, emitSlideEvent_fn;
+var _draggedPositionX, _isAnimated, _children, _totalMediaToLoad, _loadedMediaCount, _isResizing, _isScrolling, _isPressed, _deltaX, _deltaY, _windowResizeRef, _arrowPrev, _arrowNext, _arrowNextRef, _arrowPrevRef, _touchStartRef, _touchMoveRef, _touchReleaseRef, _xStart, _yStart, _indicators, _autoplayInterval, _pointerType, _getChildren, getChildren_fn, _waitForLoad, waitForLoad_fn, _newItemLoaded, newItemLoaded_fn, _setItemsPosition, setItemsPosition_fn, _setBasicCaroulixHeight, setBasicCaroulixHeight_fn, _handleDragStart, handleDragStart_fn, _handleDragMove, handleDragMove_fn, _handleDragRelease, handleDragRelease_fn, _enableIndicators, enableIndicators_fn, _handleIndicatorClick, handleIndicatorClick_fn, _resetIndicators, resetIndicators_fn, _setTransitionDuration, setTransitionDuration_fn, _emitSlideEvent, emitSlideEvent_fn;
 var caroulix = "";
@@ -172,2 +172,16 @@ const instances = [];
 };
+const getClientYPosition = (e) => {
+  if (e.targetTouches && e.targetTouches.length >= 1)
+    return e.targetTouches[0].clientY;
+  else if (e.changedTouches && e.changedTouches.length >= 1)
+    return e.changedTouches[0].pageY;
+  return e.clientY;
+};
+const getClientXPosition = (e) => {
+  if (e.targetTouches && e.targetTouches.length >= 1)
+    return e.targetTouches[0].clientX;
+  else if (e.changedTouches && e.changedTouches.length >= 1)
+    return e.changedTouches[0].pageX;
+  return e.clientX;
+};
 class AxentixComponent {
@@ -234,4 +248,2 @@ constructor() {
     __privateAdd(this, _resetIndicators);
-    __privateAdd(this, _getXPosition);
-    __privateAdd(this, _getYPosition);
     __privateAdd(this, _setTransitionDuration);
@@ -514,4 +526,4 @@ __privateAdd(this, _emitSlideEvent);
   __privateSet(this, _deltaY, 0);
-  __privateSet(this, _xStart, __privateMethod(this, _getXPosition, getXPosition_fn).call(this, e));
-  __privateSet(this, _yStart, __privateMethod(this, _getYPosition, getYPosition_fn).call(this, e));
+  __privateSet(this, _xStart, getClientXPosition(e));
+  __privateSet(this, _yStart, getClientYPosition(e));
 };
@@ -522,3 +534,3 @@ _handleDragMove = new WeakSet();
     return;
-  let x = __privateMethod(this, _getXPosition, getXPosition_fn).call(this, e), y = __privateMethod(this, _getYPosition, getYPosition_fn).call(this, e);
+  let x = getClientXPosition(e), y = getClientYPosition(e);
   __privateSet(this, _deltaX, __privateGet(this, _xStart) - x);
@@ -587,14 +599,2 @@ __privateSet(this, _deltaY, Math.abs(__privateGet(this, _yStart) - y));
 };
-_getXPosition = new WeakSet();
-getXPosition_fn = function(e) {
-  if (e.targetTouches && e.targetTouches.length >= 1)
-    return e.targetTouches[0].clientX;
-  return e.clientX;
-};
-_getYPosition = new WeakSet();
-getYPosition_fn = function(e) {
-  if (e.targetTouches && e.targetTouches.length >= 1)
-    return e.targetTouches[0].clientY;
-  return e.clientY;
-};
 _setTransitionDuration = new WeakSet();
@@ -601,0 +601,0 @@ setTransitionDuration_fn = function(duration) {

dist/components/caroulix/caroulix.min.js

@@ -1,2 +0,2 @@
-var qt=Object.defineProperty;var Ft=(l,r,c)=>r in l?qt(l,r,{enumerable:!0,configurable:!0,writable:!0,value:c}):l[r]=c;var K=(l,r,c)=>(Ft(l,typeof r!="symbol"?r+"":r,c),c),rt=(l,r,c)=>{if(!r.has(l))throw TypeError("Cannot "+c)};var e=(l,r,c)=>(rt(l,r,"read from private field"),c?c.call(l):r.get(l)),a=(l,r,c)=>{if(r.has(l))throw TypeError("Cannot add the same private member more than once");r instanceof WeakSet?r.add(l):r.set(l,c)},o=(l,r,c,g)=>(rt(l,r,"write to private field"),g?g.call(l,c):r.set(l,c),c),ht=(l,r,c,g)=>({set _(Q){o(l,r,Q,c)},get _(){return e(l,r,g)}}),h=(l,r,c)=>(rt(l,r,"access private method"),c);(function(l,r){typeof exports=="object"&&typeof module!="undefined"?module.exports=r():typeof define=="function"&&define.amd?define(r):(l=typeof globalThis!="undefined"?globalThis:l||self,l.Caroulix=r())})(this,function(){var C,b,d,T,S,D,N,O,x,X,A,E,I,R,$,k,P,m,H,U,v,Y,f,V,xt,_,gt,B,lt,y,M,q,nt,j,mt,tt,yt,et,Lt,it,bt,st,Et,W,ct,Z,dt,G,ut,F,ot,J,pt;"use strict";var l="";const r=[],c={components:[],plugins:[],prefix:"ax",mode:""},g=n=>c.components.find(s=>s.name===n).class,Q=()=>{const n=c.components.filter(t=>t.dataDetection),s=c.plugins.filter(t=>t.dataDetection);return[...n,...s].map(t=>t.name)},It=(n,s)=>{if(!n.name||!n.class){console.error(`[Axentix] Error registering ${s} : Missing required parameters.`);return}if(c[s].some(t=>t.name===n.name)){console.error(`[Axentix] Error registering ${s} : Already exist.`);return}n.autoInit&&(n.autoInit.selector=n.autoInit.selector+=":not(.no-axentix-init)"),c[s].push(n)},wt=n=>{It(n,"components")},Ct=n=>n.replace(/[\w]([A-Z])/g,s=>s[0]+"-"+s[1]).toLowerCase(),Tt=(n,s="")=>{const t=Ct(n);return s?s+"-"+t:t},Dt=(n,s,t,i,p="")=>{const u=s[0].toUpperCase()+s.slice(1).toLowerCase();Q().includes(u)&&t!=="Collapsible"&&u!=="Sidenav"&&(n[s]=g(u).getDefaultOptions());const L=p?p+"-"+s:s,z=ft(n[s],t,i,L);if(!(Object.keys(z).length===0&&n.constructor===Object))return z},ft=(n,s,t,i="")=>Object.keys(n).reduce((p,u)=>{if(typeof n[u]=="object"&&n[u]!==null){const L=Dt(n,u,s,t,i);L&&(p[u]=L)}else if(n[u]!==null){const L="data-"+s.toLowerCase()+"-"+Tt(u,i);if(t.hasAttribute(L)){const z=t.getAttribute(L);p[u]=typeof n[u]=="number"?Number(z):z,typeof n[u]=="boolean"&&(p[u]=z==="true")}}return p},{}),Ot=(n,s)=>{const t=Object.assign({},g(n).getDefaultOptions());return ft(t,n,s)},At=()=>{document.querySelectorAll("[data-ax]").forEach(s=>{let t=s.dataset.ax;if(t=t[0].toUpperCase()+t.slice(1).toLowerCase(),!Q().includes(t)){console.error(`[Axentix] Error: ${t} component doesn't exist. 
- Did you forget to register him ?`,s);return}try{const i=g(t);new i(`#${s.id}`)}catch(i){console.error("[Axentix] Data: Unable to load "+t,i)}})},Rt=()=>{try{new Axentix.Axentix("all")}catch(n){console.error("[Axentix] Unable to auto init.",n)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&Rt(),At()});const vt=(...n)=>n.reduce((s,t)=>{for(let i in t)s[i]=typeof t[i]=="object"&&t[i]!==null?vt(s[i],t[i]):t[i];return s},{}),$t=(n,s,t)=>vt(g(n).getDefaultOptions(),Ot(n,t),s),w=(n,s,t)=>{const i=new CustomEvent("ax."+s,{detail:t||{},bubbles:!0});n.dispatchEvent(i)},kt=()=>"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,Pt=()=>!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>=0,Mt=()=>kt()?"touch":Pt()?"pointer":"mouse",St=n=>{const s=r.find(t=>t.type!=="Toast"&&"#"+t.instance.el.id===n);return s?s.instance:!1};class Nt{constructor(){K(this,"el")}removeListeners(){}setupListeners(){}setup(){}preventDbInstance(s){if(s&&St(s))throw new Error(`Instance already exist on ${s}`)}sync(){w(this.el,"component.sync"),this.removeListeners(),this.setupListeners()}reset(){w(this.el,"component.reset"),this.removeListeners(),this.setup()}destroy(){w(this.el,"component.destroy"),this.removeListeners();const s=r.findIndex(t=>t.instance.el.id===this.el.id);r.splice(s,1)}}const Xt={animationDuration:500,height:"",backToOpposite:!0,enableTouch:!0,indicators:{enabled:!1,isFlat:!1,customClasses:""},autoplay:{enabled:!0,interval:5e3,side:"right"}};class at extends Nt{constructor(t,i){super();a(this,V);a(this,_);a(this,B);a(this,y);a(this,q);a(this,j);a(this,tt);a(this,et);a(this,it);a(this,st);a(this,W);a(this,Z);a(this,G);a(this,F);a(this,J);K(this,"options");K(this,"activeIndex");a(this,C,0);a(this,b,!1);a(this,d,void 0);a(this,T,0);a(this,S,0);a(this,D,!1);a(this,N,!1);a(this,O,!1);a(this,x,0);a(this,X,0);a(this,A,void 0);a(this,E,void 0);a(this,I,void 0);a(this,R,void 0);a(this,$,void 0);a(this,k,void 0);a(this,P,void 0);a(this,m,void 0);a(this,H,0);a(this,U,0);a(this,v,void 0);a(this,Y,void 0);a(this,f,void 0);try{this.preventDbInstance(t),r.push({type:"Caroulix",instance:this}),this.el=document.querySelector(t),this.options=$t("Caroulix",i,this.el),this.setup()}catch(p){console.error("[Axentix] Caroulix init error",p)}}setup(){w(this.el,"caroulix.setup"),this.options.autoplay.side=this.options.autoplay.side.toLowerCase(),["right","left"].includes(this.options.autoplay.side)||(this.options.autoplay.side="right"),this.activeIndex=0,o(this,C,0),o(this,b,!1),o(this,f,Mt()),o(this,d,h(this,V,xt).call(this)),this.options.indicators.enabled&&h(this,it,bt).call(this);const i=this.el.querySelector(".active");i?this.activeIndex=e(this,d).indexOf(i):e(this,d)[0].classList.add("active"),h(this,_,gt).call(this),e(this,T)===0&&h(this,q,nt).call(this),this.setupListeners(),this.options.autoplay.enabled&&this.play()}setupListeners(){o(this,A,h(this,q,nt).bind(this)),window.addEventListener("resize",e(this,A)),e(this,I)&&(o(this,R,this.next.bind(this,1)),e(this,I).addEventListener("click",e(this,R))),e(this,E)&&(o(this,$,this.prev.bind(this,1)),e(this,E).addEventListener("click",e(this,$))),this.options.enableTouch&&(o(this,k,h(this,j,mt).bind(this)),o(this,P,h(this,tt,yt).bind(this)),o(this,m,h(this,et,Lt).bind(this)),this.el.addEventListener(`${e(this,f)}${e(this,f)==="touch"?"start":"down"}`,e(this,k)),this.el.addEventListener(`${e(this,f)}move`,e(this,P)),this.el.addEventListener(`${e(this,f)}${e(this,f)==="touch"?"end":"up"}`,e(this,m)),this.el.addEventListener(e(this,f)==="pointer"?"pointerleave":"mouseleave",e(this,m)))}removeListeners(){window.removeEventListener("resize",e(this,A)),o(this,A,void 0),e(this,I)&&(e(this,I).removeEventListener("click",e(this,R)),o(this,R,void 0)),e(this,E)&&(e(this,E).removeEventListener("click",e(this,$)),o(this,$,void 0)),this.options.enableTouch&&(this.el.removeEventListener(`${e(this,f)}${e(this,f)==="pointer"?"down":"start"}`,e(this,k)),this.el.removeEventListener(`${e(this,f)}move`,e(this,P)),this.el.removeEventListener(`${e(this,f)}${e(this,f)==="touch"?"end":"up"}`,e(this,m)),this.el.removeEventListener(e(this,f)==="pointer"?"pointerleave":"mouseleave",e(this,m)),o(this,k,void 0),o(this,P,void 0),o(this,m,void 0))}goTo(t){if(t===this.activeIndex)return;(t>this.activeIndex?"right":"left")==="left"?this.prev(Math.abs(this.activeIndex-t)):this.next(Math.abs(this.activeIndex-t)),this.options.indicators.enabled&&h(this,W,ct).call(this)}play(){!this.options.autoplay.enabled||(this.stop(),o(this,Y,setInterval(()=>{this.options.autoplay.side==="right"?this.next(1,!1):this.prev(1,!1)},this.options.autoplay.interval)))}stop(){!this.options.autoplay.enabled||clearInterval(e(this,Y))}next(t=1,i=!0){e(this,D)||this.activeIndex===e(this,d).length-1&&!this.options.backToOpposite||(w(this.el,"caroulix.next",{step:t}),o(this,b,!0),i&&this.options.autoplay.enabled&&this.stop(),this.activeIndex<e(this,d).length-1?this.activeIndex+=t:this.options.backToOpposite&&(this.activeIndex=0),h(this,J,pt).call(this),h(this,y,M).call(this),i&&this.options.autoplay.enabled&&this.play())}prev(t=1,i=!0){e(this,D)||this.activeIndex===0&&!this.options.backToOpposite||(w(this.el,"caroulix.prev",{step:t}),o(this,b,!0),i&&this.options.autoplay.enabled&&this.stop(),this.activeIndex>0?this.activeIndex-=t:this.options.backToOpposite&&(this.activeIndex=e(this,d).length-1),h(this,J,pt).call(this),h(this,y,M).call(this),i&&this.options.autoplay.enabled&&this.play())}}return C=new WeakMap,b=new WeakMap,d=new WeakMap,T=new WeakMap,S=new WeakMap,D=new WeakMap,N=new WeakMap,O=new WeakMap,x=new WeakMap,X=new WeakMap,A=new WeakMap,E=new WeakMap,I=new WeakMap,R=new WeakMap,$=new WeakMap,k=new WeakMap,P=new WeakMap,m=new WeakMap,H=new WeakMap,U=new WeakMap,v=new WeakMap,Y=new WeakMap,f=new WeakMap,V=new WeakSet,xt=function(){return Array.from(this.el.children).reduce((t,i)=>(i.classList.contains("caroulix-item")&&t.push(i),i.classList.contains("caroulix-prev")&&o(this,E,i),i.classList.contains("caroulix-next")&&o(this,I,i),t),[])},_=new WeakSet,gt=function(){o(this,T,0),o(this,S,0),e(this,d).forEach(t=>{const i=t.querySelector("img, video");i&&(ht(this,T)._++,i.complete?h(this,B,lt).call(this,i,!0):(i.loadRef=h(this,B,lt).bind(this,i),i.addEventListener("load",i.loadRef)))})},B=new WeakSet,lt=function(t,i){ht(this,S)._++,i||(t.removeEventListener("load",t.loadRef),t.loadRef=void 0),e(this,T)==e(this,S)&&(h(this,q,nt).call(this),h(this,y,M).call(this,!0))},y=new WeakSet,M=function(t=!1){const i=this.el.getBoundingClientRect().width;e(this,d).forEach((u,L)=>{u.style.transform=`translateX(${i*L-i*this.activeIndex-e(this,C)}px)`}),this.options.indicators.enabled&&h(this,W,ct).call(this),e(this,d).find(u=>u.classList.contains("active")).classList.remove("active"),e(this,d)[this.activeIndex].classList.add("active"),setTimeout(()=>{o(this,b,!1)},this.options.animationDuration),t&&setTimeout(()=>h(this,F,ot).call(this,this.options.animationDuration),50)},q=new WeakSet,nt=function(){if(o(this,D,!0),this.el.style.transitionDuration="",this.options.autoplay.enabled&&this.play(),this.options.height)this.el.style.height=this.options.height;else{const t=e(this,d).map(p=>p.offsetHeight),i=Math.max(...t);this.el.style.height=i+"px"}h(this,y,M).call(this),setTimeout(()=>{this.el.style.transitionDuration=this.options.animationDuration+"ms",o(this,D,!1)},50)},j=new WeakSet,mt=function(t){t.target.closest(".caroulix-arrow")||t.target.closest(".caroulix-indicators")||e(this,b)||(t.type!=="touchstart"&&t.preventDefault(),this.options.autoplay.enabled&&this.stop(),h(this,F,ot).call(this,0),o(this,O,!0),o(this,N,!1),o(this,x,0),o(this,X,0),o(this,H,h(this,Z,dt).call(this,t)),o(this,U,h(this,G,ut).call(this,t)))},tt=new WeakSet,yt=function(t){if(!e(this,O)||e(this,N))return;let i=h(this,Z,dt).call(this,t),p=h(this,G,ut).call(this,t);if(o(this,x,e(this,H)-i),o(this,X,Math.abs(e(this,U)-p)),t.type==="touchmove"&&e(this,X)>Math.abs(e(this,x)))return o(this,N,!0),o(this,x,0),!1;t.cancelable&&t.preventDefault(),o(this,C,e(this,x)),h(this,y,M).call(this)},et=new WeakSet,Lt=function(t){if(!(t.target.closest(".caroulix-arrow")||t.target.closest(".caroulix-indicators"))&&(t.cancelable&&t.preventDefault(),e(this,O))){h(this,F,ot).call(this,this.options.animationDuration);let i=this.el.getBoundingClientRect().width;o(this,O,!1);const p=i*15/100;this.activeIndex!==e(this,d).length-1&&e(this,x)>p?this.next():this.activeIndex!==0&&e(this,x)<-p&&this.prev(),o(this,x,0),o(this,C,0),h(this,y,M).call(this),this.options.autoplay.enabled&&this.play()}},it=new WeakSet,bt=function(){o(this,v,document.createElement("ul")),e(this,v).classList.add("caroulix-indicators"),this.options.indicators.isFlat&&e(this,v).classList.add("caroulix-flat"),this.options.indicators.customClasses&&(e(this,v).className=`${e(this,v).className} ${this.options.indicators.customClasses}`);for(let t=0;t<e(this,d).length;t++){const i=document.createElement("li");i.triggerRef=h(this,st,Et).bind(this,t),i.addEventListener("click",i.triggerRef),e(this,v).appendChild(i)}this.el.appendChild(e(this,v))},st=new WeakSet,Et=function(t,i){i.preventDefault(),t!==this.activeIndex&&this.goTo(t)},W=new WeakSet,ct=function(){Array.from(e(this,v).children).forEach(t=>t.removeAttribute("class")),e(this,v).children[this.activeIndex].classList.add("active")},Z=new WeakSet,dt=function(t){return t.targetTouches&&t.targetTouches.length>=1?t.targetTouches[0].clientX:t.clientX},G=new WeakSet,ut=function(t){return t.targetTouches&&t.targetTouches.length>=1?t.targetTouches[0].clientY:t.clientY},F=new WeakSet,ot=function(t){this.el.style.transitionDuration=t+"ms"},J=new WeakSet,pt=function(){w(this.el,"caroulix.slide",{nextElement:e(this,d)[this.activeIndex],currentElement:e(this,d)[e(this,d).findIndex(t=>t.classList.contains("active"))]})},K(at,"getDefaultOptions",()=>Xt),wt({class:at,name:"Caroulix",dataDetection:!0,autoInit:{enabled:!0,selector:".caroulix"}}),at});
+var Nt=Object.defineProperty;var Xt=(h,r,l)=>r in h?Nt(h,r,{enumerable:!0,configurable:!0,writable:!0,value:l}):h[r]=l;var G=(h,r,l)=>(Xt(h,typeof r!="symbol"?r+"":r,l),l),ot=(h,r,l)=>{if(!r.has(h))throw TypeError("Cannot "+l)};var e=(h,r,l)=>(ot(h,r,"read from private field"),l?l.call(h):r.get(h)),a=(h,r,l)=>{if(r.has(h))throw TypeError("Cannot add the same private member more than once");r instanceof WeakSet?r.add(h):r.set(h,l)},o=(h,r,l,g)=>(ot(h,r,"write to private field"),g?g.call(h,l):r.set(h,l),l),at=(h,r,l,g)=>({set _(J){o(h,r,J,l)},get _(){return e(h,r,g)}}),c=(h,r,l)=>(ot(h,r,"access private method"),l);(function(h,r){typeof exports=="object"&&typeof module!="undefined"?module.exports=r():typeof define=="function"&&define.amd?define(r):(h=typeof globalThis!="undefined"?globalThis:h||self,h.Caroulix=r())})(this,function(){var T,b,d,C,S,D,N,O,x,X,A,E,I,R,$,k,P,m,z,H,v,U,f,K,ft,Q,vt,B,rt,y,M,q,it,V,xt,_,gt,j,mt,tt,yt,et,Lt,W,ht,F,st,Z,lt;"use strict";var h="";const r=[],l={components:[],plugins:[],prefix:"ax",mode:""},g=i=>l.components.find(n=>n.name===i).class,J=()=>{const i=l.components.filter(t=>t.dataDetection),n=l.plugins.filter(t=>t.dataDetection);return[...i,...n].map(t=>t.name)},bt=(i,n)=>{if(!i.name||!i.class){console.error(`[Axentix] Error registering ${n} : Missing required parameters.`);return}if(l[n].some(t=>t.name===i.name)){console.error(`[Axentix] Error registering ${n} : Already exist.`);return}i.autoInit&&(i.autoInit.selector=i.autoInit.selector+=":not(.no-axentix-init)"),l[n].push(i)},Et=i=>{bt(i,"components")},It=i=>i.replace(/[\w]([A-Z])/g,n=>n[0]+"-"+n[1]).toLowerCase(),wt=(i,n="")=>{const t=It(i);return n?n+"-"+t:t},Tt=(i,n,t,s,p="")=>{const u=n[0].toUpperCase()+n.slice(1).toLowerCase();J().includes(u)&&t!=="Collapsible"&&u!=="Sidenav"&&(i[n]=g(u).getDefaultOptions());const L=p?p+"-"+n:n,Y=ct(i[n],t,s,L);if(!(Object.keys(Y).length===0&&i.constructor===Object))return Y},ct=(i,n,t,s="")=>Object.keys(i).reduce((p,u)=>{if(typeof i[u]=="object"&&i[u]!==null){const L=Tt(i,u,n,t,s);L&&(p[u]=L)}else if(i[u]!==null){const L="data-"+n.toLowerCase()+"-"+wt(u,s);if(t.hasAttribute(L)){const Y=t.getAttribute(L);p[u]=typeof i[u]=="number"?Number(Y):Y,typeof i[u]=="boolean"&&(p[u]=Y==="true")}}return p},{}),Ct=(i,n)=>{const t=Object.assign({},g(i).getDefaultOptions());return ct(t,i,n)},Dt=()=>{document.querySelectorAll("[data-ax]").forEach(n=>{let t=n.dataset.ax;if(t=t[0].toUpperCase()+t.slice(1).toLowerCase(),!J().includes(t)){console.error(`[Axentix] Error: ${t} component doesn't exist. 
+ Did you forget to register him ?`,n);return}try{const s=g(t);new s(`#${n.id}`)}catch(s){console.error("[Axentix] Data: Unable to load "+t,s)}})},Ot=()=>{try{new Axentix.Axentix("all")}catch(i){console.error("[Axentix] Unable to auto init.",i)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&Ot(),Dt()});const dt=(...i)=>i.reduce((n,t)=>{for(let s in t)n[s]=typeof t[s]=="object"&&t[s]!==null?dt(n[s],t[s]):t[s];return n},{}),At=(i,n,t)=>dt(g(i).getDefaultOptions(),Ct(i,t),n),w=(i,n,t)=>{const s=new CustomEvent("ax."+n,{detail:t||{},bubbles:!0});i.dispatchEvent(s)},Rt=()=>"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,$t=()=>!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>=0,kt=()=>Rt()?"touch":$t()?"pointer":"mouse",Pt=i=>{const n=r.find(t=>t.type!=="Toast"&&"#"+t.instance.el.id===i);return n?n.instance:!1},ut=i=>i.targetTouches&&i.targetTouches.length>=1?i.targetTouches[0].clientY:i.changedTouches&&i.changedTouches.length>=1?i.changedTouches[0].pageY:i.clientY,pt=i=>i.targetTouches&&i.targetTouches.length>=1?i.targetTouches[0].clientX:i.changedTouches&&i.changedTouches.length>=1?i.changedTouches[0].pageX:i.clientX;class Mt{constructor(){G(this,"el")}removeListeners(){}setupListeners(){}setup(){}preventDbInstance(n){if(n&&Pt(n))throw new Error(`Instance already exist on ${n}`)}sync(){w(this.el,"component.sync"),this.removeListeners(),this.setupListeners()}reset(){w(this.el,"component.reset"),this.removeListeners(),this.setup()}destroy(){w(this.el,"component.destroy"),this.removeListeners();const n=r.findIndex(t=>t.instance.el.id===this.el.id);r.splice(n,1)}}const St={animationDuration:500,height:"",backToOpposite:!0,enableTouch:!0,indicators:{enabled:!1,isFlat:!1,customClasses:""},autoplay:{enabled:!0,interval:5e3,side:"right"}};class nt extends Mt{constructor(t,s){super();a(this,K);a(this,Q);a(this,B);a(this,y);a(this,q);a(this,V);a(this,_);a(this,j);a(this,tt);a(this,et);a(this,W);a(this,F);a(this,Z);G(this,"options");G(this,"activeIndex");a(this,T,0);a(this,b,!1);a(this,d,void 0);a(this,C,0);a(this,S,0);a(this,D,!1);a(this,N,!1);a(this,O,!1);a(this,x,0);a(this,X,0);a(this,A,void 0);a(this,E,void 0);a(this,I,void 0);a(this,R,void 0);a(this,$,void 0);a(this,k,void 0);a(this,P,void 0);a(this,m,void 0);a(this,z,0);a(this,H,0);a(this,v,void 0);a(this,U,void 0);a(this,f,void 0);try{this.preventDbInstance(t),r.push({type:"Caroulix",instance:this}),this.el=document.querySelector(t),this.options=At("Caroulix",s,this.el),this.setup()}catch(p){console.error("[Axentix] Caroulix init error",p)}}setup(){w(this.el,"caroulix.setup"),this.options.autoplay.side=this.options.autoplay.side.toLowerCase(),["right","left"].includes(this.options.autoplay.side)||(this.options.autoplay.side="right"),this.activeIndex=0,o(this,T,0),o(this,b,!1),o(this,f,kt()),o(this,d,c(this,K,ft).call(this)),this.options.indicators.enabled&&c(this,tt,yt).call(this);const s=this.el.querySelector(".active");s?this.activeIndex=e(this,d).indexOf(s):e(this,d)[0].classList.add("active"),c(this,Q,vt).call(this),e(this,C)===0&&c(this,q,it).call(this),this.setupListeners(),this.options.autoplay.enabled&&this.play()}setupListeners(){o(this,A,c(this,q,it).bind(this)),window.addEventListener("resize",e(this,A)),e(this,I)&&(o(this,R,this.next.bind(this,1)),e(this,I).addEventListener("click",e(this,R))),e(this,E)&&(o(this,$,this.prev.bind(this,1)),e(this,E).addEventListener("click",e(this,$))),this.options.enableTouch&&(o(this,k,c(this,V,xt).bind(this)),o(this,P,c(this,_,gt).bind(this)),o(this,m,c(this,j,mt).bind(this)),this.el.addEventListener(`${e(this,f)}${e(this,f)==="touch"?"start":"down"}`,e(this,k)),this.el.addEventListener(`${e(this,f)}move`,e(this,P)),this.el.addEventListener(`${e(this,f)}${e(this,f)==="touch"?"end":"up"}`,e(this,m)),this.el.addEventListener(e(this,f)==="pointer"?"pointerleave":"mouseleave",e(this,m)))}removeListeners(){window.removeEventListener("resize",e(this,A)),o(this,A,void 0),e(this,I)&&(e(this,I).removeEventListener("click",e(this,R)),o(this,R,void 0)),e(this,E)&&(e(this,E).removeEventListener("click",e(this,$)),o(this,$,void 0)),this.options.enableTouch&&(this.el.removeEventListener(`${e(this,f)}${e(this,f)==="pointer"?"down":"start"}`,e(this,k)),this.el.removeEventListener(`${e(this,f)}move`,e(this,P)),this.el.removeEventListener(`${e(this,f)}${e(this,f)==="touch"?"end":"up"}`,e(this,m)),this.el.removeEventListener(e(this,f)==="pointer"?"pointerleave":"mouseleave",e(this,m)),o(this,k,void 0),o(this,P,void 0),o(this,m,void 0))}goTo(t){if(t===this.activeIndex)return;(t>this.activeIndex?"right":"left")==="left"?this.prev(Math.abs(this.activeIndex-t)):this.next(Math.abs(this.activeIndex-t)),this.options.indicators.enabled&&c(this,W,ht).call(this)}play(){!this.options.autoplay.enabled||(this.stop(),o(this,U,setInterval(()=>{this.options.autoplay.side==="right"?this.next(1,!1):this.prev(1,!1)},this.options.autoplay.interval)))}stop(){!this.options.autoplay.enabled||clearInterval(e(this,U))}next(t=1,s=!0){e(this,D)||this.activeIndex===e(this,d).length-1&&!this.options.backToOpposite||(w(this.el,"caroulix.next",{step:t}),o(this,b,!0),s&&this.options.autoplay.enabled&&this.stop(),this.activeIndex<e(this,d).length-1?this.activeIndex+=t:this.options.backToOpposite&&(this.activeIndex=0),c(this,Z,lt).call(this),c(this,y,M).call(this),s&&this.options.autoplay.enabled&&this.play())}prev(t=1,s=!0){e(this,D)||this.activeIndex===0&&!this.options.backToOpposite||(w(this.el,"caroulix.prev",{step:t}),o(this,b,!0),s&&this.options.autoplay.enabled&&this.stop(),this.activeIndex>0?this.activeIndex-=t:this.options.backToOpposite&&(this.activeIndex=e(this,d).length-1),c(this,Z,lt).call(this),c(this,y,M).call(this),s&&this.options.autoplay.enabled&&this.play())}}return T=new WeakMap,b=new WeakMap,d=new WeakMap,C=new WeakMap,S=new WeakMap,D=new WeakMap,N=new WeakMap,O=new WeakMap,x=new WeakMap,X=new WeakMap,A=new WeakMap,E=new WeakMap,I=new WeakMap,R=new WeakMap,$=new WeakMap,k=new WeakMap,P=new WeakMap,m=new WeakMap,z=new WeakMap,H=new WeakMap,v=new WeakMap,U=new WeakMap,f=new WeakMap,K=new WeakSet,ft=function(){return Array.from(this.el.children).reduce((t,s)=>(s.classList.contains("caroulix-item")&&t.push(s),s.classList.contains("caroulix-prev")&&o(this,E,s),s.classList.contains("caroulix-next")&&o(this,I,s),t),[])},Q=new WeakSet,vt=function(){o(this,C,0),o(this,S,0),e(this,d).forEach(t=>{const s=t.querySelector("img, video");s&&(at(this,C)._++,s.complete?c(this,B,rt).call(this,s,!0):(s.loadRef=c(this,B,rt).bind(this,s),s.addEventListener("load",s.loadRef)))})},B=new WeakSet,rt=function(t,s){at(this,S)._++,s||(t.removeEventListener("load",t.loadRef),t.loadRef=void 0),e(this,C)==e(this,S)&&(c(this,q,it).call(this),c(this,y,M).call(this,!0))},y=new WeakSet,M=function(t=!1){const s=this.el.getBoundingClientRect().width;e(this,d).forEach((u,L)=>{u.style.transform=`translateX(${s*L-s*this.activeIndex-e(this,T)}px)`}),this.options.indicators.enabled&&c(this,W,ht).call(this),e(this,d).find(u=>u.classList.contains("active")).classList.remove("active"),e(this,d)[this.activeIndex].classList.add("active"),setTimeout(()=>{o(this,b,!1)},this.options.animationDuration),t&&setTimeout(()=>c(this,F,st).call(this,this.options.animationDuration),50)},q=new WeakSet,it=function(){if(o(this,D,!0),this.el.style.transitionDuration="",this.options.autoplay.enabled&&this.play(),this.options.height)this.el.style.height=this.options.height;else{const t=e(this,d).map(p=>p.offsetHeight),s=Math.max(...t);this.el.style.height=s+"px"}c(this,y,M).call(this),setTimeout(()=>{this.el.style.transitionDuration=this.options.animationDuration+"ms",o(this,D,!1)},50)},V=new WeakSet,xt=function(t){t.target.closest(".caroulix-arrow")||t.target.closest(".caroulix-indicators")||e(this,b)||(t.type!=="touchstart"&&t.preventDefault(),this.options.autoplay.enabled&&this.stop(),c(this,F,st).call(this,0),o(this,O,!0),o(this,N,!1),o(this,x,0),o(this,X,0),o(this,z,pt(t)),o(this,H,ut(t)))},_=new WeakSet,gt=function(t){if(!e(this,O)||e(this,N))return;let s=pt(t),p=ut(t);if(o(this,x,e(this,z)-s),o(this,X,Math.abs(e(this,H)-p)),t.type==="touchmove"&&e(this,X)>Math.abs(e(this,x)))return o(this,N,!0),o(this,x,0),!1;t.cancelable&&t.preventDefault(),o(this,T,e(this,x)),c(this,y,M).call(this)},j=new WeakSet,mt=function(t){if(!(t.target.closest(".caroulix-arrow")||t.target.closest(".caroulix-indicators"))&&(t.cancelable&&t.preventDefault(),e(this,O))){c(this,F,st).call(this,this.options.animationDuration);let s=this.el.getBoundingClientRect().width;o(this,O,!1);const p=s*15/100;this.activeIndex!==e(this,d).length-1&&e(this,x)>p?this.next():this.activeIndex!==0&&e(this,x)<-p&&this.prev(),o(this,x,0),o(this,T,0),c(this,y,M).call(this),this.options.autoplay.enabled&&this.play()}},tt=new WeakSet,yt=function(){o(this,v,document.createElement("ul")),e(this,v).classList.add("caroulix-indicators"),this.options.indicators.isFlat&&e(this,v).classList.add("caroulix-flat"),this.options.indicators.customClasses&&(e(this,v).className=`${e(this,v).className} ${this.options.indicators.customClasses}`);for(let t=0;t<e(this,d).length;t++){const s=document.createElement("li");s.triggerRef=c(this,et,Lt).bind(this,t),s.addEventListener("click",s.triggerRef),e(this,v).appendChild(s)}this.el.appendChild(e(this,v))},et=new WeakSet,Lt=function(t,s){s.preventDefault(),t!==this.activeIndex&&this.goTo(t)},W=new WeakSet,ht=function(){Array.from(e(this,v).children).forEach(t=>t.removeAttribute("class")),e(this,v).children[this.activeIndex].classList.add("active")},F=new WeakSet,st=function(t){this.el.style.transitionDuration=t+"ms"},Z=new WeakSet,lt=function(){w(this.el,"caroulix.slide",{nextElement:e(this,d)[this.activeIndex],currentElement:e(this,d)[e(this,d).findIndex(t=>t.classList.contains("active"))]})},G(nt,"getDefaultOptions",()=>St),Et({class:nt,name:"Caroulix",dataDetection:!0,autoInit:{enabled:!0,selector:".caroulix"}}),nt});

dist/components/toast/toast.d.ts

@@ -15,2 +15,3 @@ interface IToastOptions {
     isClosable?: boolean;
+    isSwipeable?: boolean;
     closableContent?: string;
@@ -17,0 +18,0 @@ loading?: {

dist/components/toast/toast.esm.js

@@ -29,3 +29,3 @@ var __defProp = Object.defineProperty;
 };
-var _content, _toasters, _createToaster, createToaster_fn, _removeToaster, removeToaster_fn, _fadeInToast, fadeInToast_fn, _fadeOutToast, fadeOutToast_fn, _animOut, animOut_fn, _createToast, createToast_fn, _hide, hide_fn;
+var _content, _toasters, _pointerType, _touchStartRef, _touchMoveRef, _touchReleaseRef, _isPressed, _xStart, _createToaster, createToaster_fn, _removeToaster, removeToaster_fn, _fadeInToast, fadeInToast_fn, _fadeOutToast, fadeOutToast_fn, _animOut, animOut_fn, _setupSwipeListeners, setupSwipeListeners_fn, _handleDragStart, handleDragStart_fn, _handleDragMove, handleDragMove_fn, _handleDragRelease, handleDragRelease_fn, _handleSwipe, handleSwipe_fn, _createToast, createToast_fn, _hide, hide_fn;
 var toast = "";
@@ -107,3 +107,19 @@ const instances = [];
 };
+const isTouchEnabled = () => "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+const isPointerEnabled = () => !!window.PointerEvent && "maxTouchPoints" in window.navigator && window.navigator.maxTouchPoints >= 0;
+const getPointerType = () => {
+  if (isTouchEnabled())
+    return "touch";
+  else if (isPointerEnabled())
+    return "pointer";
+  return "mouse";
+};
 const getInstanceByType = (type) => instances.filter((ins) => ins.type === type).map((ins) => ins.instance);
+const getClientXPosition = (e) => {
+  if (e.targetTouches && e.targetTouches.length >= 1)
+    return e.targetTouches[0].clientX;
+  else if (e.changedTouches && e.changedTouches.length >= 1)
+    return e.changedTouches[0].pageX;
+  return e.clientX;
+};
 const ToastOptions = {
@@ -118,2 +134,3 @@ animationDuration: 400,
   isClosable: false,
+  isSwipeable: true,
   closableContent: "x",
@@ -132,2 +149,7 @@ loading: {
     __privateAdd(this, _animOut);
+    __privateAdd(this, _setupSwipeListeners);
+    __privateAdd(this, _handleDragStart);
+    __privateAdd(this, _handleDragMove);
+    __privateAdd(this, _handleDragRelease);
+    __privateAdd(this, _handleSwipe);
     __privateAdd(this, _createToast);
@@ -139,2 +161,8 @@ __privateAdd(this, _hide);
     __privateAdd(this, _toasters, void 0);
+    __privateAdd(this, _pointerType, void 0);
+    __privateAdd(this, _touchStartRef, void 0);
+    __privateAdd(this, _touchMoveRef, void 0);
+    __privateAdd(this, _touchReleaseRef, void 0);
+    __privateAdd(this, _isPressed, void 0);
+    __privateAdd(this, _xStart, void 0);
     if (getInstanceByType("Toast").length > 0) {
@@ -148,2 +176,3 @@ console.error("[Axentix] Toast: Don't try to create multiple toast instances");
     this.options = extend(_Toast.getDefaultOptions(), options);
+    __privateSet(this, _pointerType, getPointerType());
     this.options.position = this.options.position.toLowerCase();
@@ -175,2 +204,8 @@ this.options.direction = this.options.direction.toLowerCase();
 _toasters = new WeakMap();
+_pointerType = new WeakMap();
+_touchStartRef = new WeakMap();
+_touchMoveRef = new WeakMap();
+_touchReleaseRef = new WeakMap();
+_isPressed = new WeakMap();
+_xStart = new WeakMap();
 _createToaster = new WeakSet();
@@ -244,2 +279,54 @@ createToaster_fn = function() {
 };
+_setupSwipeListeners = new WeakSet();
+setupSwipeListeners_fn = function(toast2) {
+  __privateSet(this, _touchStartRef, __privateMethod(this, _handleDragStart, handleDragStart_fn).bind(this));
+  __privateSet(this, _touchMoveRef, __privateMethod(this, _handleDragMove, handleDragMove_fn).bind(this));
+  __privateSet(this, _touchReleaseRef, __privateMethod(this, _handleDragRelease, handleDragRelease_fn).bind(this));
+  toast2.addEventListener(`${__privateGet(this, _pointerType)}${__privateGet(this, _pointerType) === "touch" ? "start" : "down"}`, __privateGet(this, _touchStartRef));
+  toast2.addEventListener(`${__privateGet(this, _pointerType)}move`, __privateGet(this, _touchMoveRef));
+  toast2.addEventListener(`${__privateGet(this, _pointerType)}${__privateGet(this, _pointerType) === "touch" ? "end" : "up"}`, __privateGet(this, _touchReleaseRef));
+  toast2.addEventListener(__privateGet(this, _pointerType) === "pointer" ? "pointerleave" : "mouseleave", __privateGet(this, _touchReleaseRef));
+};
+_handleDragStart = new WeakSet();
+handleDragStart_fn = function(e) {
+  if (e.target.closest(".toast-trigger"))
+    return;
+  const toast2 = e.target.closest(".toast");
+  if (toast2.dataset.closing)
+    return;
+  __privateSet(this, _xStart, getClientXPosition(e));
+  __privateSet(this, _isPressed, true);
+  toast2.style.transitionProperty = "height, margin, padding, transform, box-shadow";
+};
+_handleDragMove = new WeakSet();
+handleDragMove_fn = function(e) {
+  if (!__privateGet(this, _isPressed))
+    return;
+  const toast2 = e.target.closest(".toast");
+  const client = toast2.getBoundingClientRect();
+  const absDiff = Math.abs(getClientXPosition(e) - __privateGet(this, _xStart));
+  toast2.style.left = getClientXPosition(e) - __privateGet(this, _xStart) + "px";
+  toast2.style.opacity = absDiff < client.width ? (0.99 - absDiff / client.width).toString() : "0.01";
+};
+_handleDragRelease = new WeakSet();
+handleDragRelease_fn = function(e) {
+  if (!__privateGet(this, _isPressed))
+    return;
+  if (e.cancelable)
+    e.preventDefault();
+  __privateSet(this, _isPressed, false);
+  const toast2 = e.target.closest(".toast");
+  toast2.style.transitionProperty = "height, margin, opacity, padding, transform, box-shadow, left";
+  if (Math.abs(getClientXPosition(e) - __privateGet(this, _xStart)) > toast2.getBoundingClientRect().width / 2) {
+    __privateMethod(this, _hide, hide_fn).call(this, toast2);
+    toast2.dataset.closing = "true";
+  } else {
+    toast2.style.left = "0px";
+    toast2.style.opacity = 1;
+  }
+};
+_handleSwipe = new WeakSet();
+handleSwipe_fn = function(toast2) {
+  __privateMethod(this, _setupSwipeListeners, setupSwipeListeners_fn).call(this, toast2);
+};
 _createToast = new WeakSet();
@@ -259,2 +346,4 @@ createToast_fn = function() {
   }
+  if (this.options.isSwipeable)
+    __privateMethod(this, _handleSwipe, handleSwipe_fn).call(this, toast2);
   __privateMethod(this, _fadeInToast, fadeInToast_fn).call(this, toast2);
@@ -261,0 +350,0 @@ __privateGet(this, _toasters)[this.options.position].appendChild(toast2);

dist/components/toast/toast.min.js

@@ -1,2 +0,2 @@
-var F=Object.defineProperty;var V=(o,i,n)=>i in o?F(o,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):o[i]=n;var C=(o,i,n)=>(V(o,typeof i!="symbol"?i+"":i,n),n),A=(o,i,n)=>{if(!i.has(o))throw TypeError("Cannot "+n)};var d=(o,i,n)=>(A(o,i,"read from private field"),n?n.call(o):i.get(o)),l=(o,i,n)=>{if(i.has(o))throw TypeError("Cannot add the same private member more than once");i instanceof WeakSet?i.add(o):i.set(o,n)},E=(o,i,n,p)=>(A(o,i,"write to private field"),p?p.call(o,n):i.set(o,n),n);var c=(o,i,n)=>(A(o,i,"access private method"),n);(function(o,i){typeof exports=="object"&&typeof module!="undefined"?module.exports=i():typeof define=="function"&&define.amd?define(i):(o=typeof globalThis!="undefined"?globalThis:o||self,o.Toast=i())})(this,function(){var h,a,g,I,y,k,x,M,b,P,D,H,T,N,u,w;"use strict";var o="";const i=[],n={components:[],plugins:[],prefix:"ax",mode:""},p=r=>`--${n.prefix}-${r}`,R=r=>n.components.find(t=>t.name===r).class,U=()=>{const r=n.components.filter(e=>e.dataDetection),t=n.plugins.filter(e=>e.dataDetection);return[...r,...t].map(e=>e.name)},q=(r,t)=>{if(!r.name||!r.class){console.error(`[Axentix] Error registering ${t} : Missing required parameters.`);return}if(n[t].some(e=>e.name===r.name)){console.error(`[Axentix] Error registering ${t} : Already exist.`);return}r.autoInit&&(r.autoInit.selector=r.autoInit.selector+=":not(.no-axentix-init)"),n[t].push(r)},B=r=>{q(r,"components")},S=()=>{document.querySelectorAll("[data-ax]").forEach(t=>{let e=t.dataset.ax;if(e=e[0].toUpperCase()+e.slice(1).toLowerCase(),!U().includes(e)){console.error(`[Axentix] Error: ${e} component doesn't exist. 
- Did you forget to register him ?`,t);return}try{const s=R(e);new s(`#${t.id}`)}catch(s){console.error("[Axentix] Data: Unable to load "+e,s)}})},X=()=>{try{new Axentix.Axentix("all")}catch(r){console.error("[Axentix] Unable to auto init.",r)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&X(),S()});const v=(...r)=>r.reduce((t,e)=>{for(let s in e)t[s]=typeof e[s]=="object"&&e[s]!==null?v(t[s],e[s]):e[s];return t},{}),f=(r,t,e)=>{const s=new CustomEvent("ax."+t,{detail:e||{},bubbles:!0});r.dispatchEvent(s)},Y=r=>i.filter(t=>t.type===r).map(t=>t.instance),z={animationDuration:400,duration:4e3,classes:"",position:"right",direction:"top",mobileDirection:"bottom",offset:{x:"5%",y:"0%",mobileX:"10%",mobileY:"0%"},isClosable:!1,closableContent:"x",loading:{enabled:!0,border:"2px solid #E2E2E2"}},L=class{constructor(t,e){l(this,g);l(this,y);l(this,x);l(this,b);l(this,D);l(this,T);l(this,u);C(this,"options");C(this,"id");l(this,h,void 0);l(this,a,void 0);if(Y("Toast").length>0){console.error("[Axentix] Toast: Don't try to create multiple toast instances");return}i.push({type:"Toast",instance:this}),this.id=Math.random().toString().split(".")[1],E(this,h,t),this.options=v(L.getDefaultOptions(),e),this.options.position=this.options.position.toLowerCase(),this.options.direction=this.options.direction.toLowerCase(),this.options.mobileDirection=this.options.mobileDirection.toLowerCase(),E(this,a,{})}destroy(){const t=i.findIndex(e=>e.instance.id===this.id);i.splice(t,1)}show(){try{Object.keys(d(this,a)).includes(this.options.position)||c(this,g,I).call(this),c(this,T,N).call(this)}catch(t){console.error("[Axentix] Toast error",t)}}change(t,e){E(this,h,t),this.options=v(this.options,e)}};let m=L;return h=new WeakMap,a=new WeakMap,g=new WeakSet,I=function(){let t=document.createElement("div");["right","left"].includes(this.options.position)||(this.options.position="right"),this.options.position==="right"?t.style.right=this.options.offset.x:t.style.left=this.options.offset.x;const s=["bottom","top"];s.includes(this.options.direction)||(this.options.direction="top"),this.options.direction==="top"?t.style.top=this.options.offset.y:t.style.bottom=this.options.offset.y,s.includes(this.options.mobileDirection)||(this.options.mobileDirection="bottom"),t.style.setProperty(p("toaster-m-width"),100-this.options.offset.mobileX.slice(0,-1)+"%"),t.style.setProperty(p("toaster-m-offset"),this.options.offset.mobileY),this.options.loading.enabled&&t.style.setProperty(p("toast-loading-border"),this.options.loading.border),t.className=`toaster toaster-${this.options.position} toast-${this.options.direction} toaster-m-${this.options.mobileDirection}`,d(this,a)[this.options.position]=t,document.body.appendChild(t)},y=new WeakSet,k=function(){for(const t in d(this,a)){let e=d(this,a)[t];e.childElementCount<=0&&(e.remove(),delete d(this,a)[t])}},x=new WeakSet,M=function(t){setTimeout(()=>{f(t,"toast.show"),this.options.loading.enabled&&(t.classList.add("toast-loading"),t.style.setProperty(p("toast-loading-duration"),this.options.duration+"ms")),t.classList.add("toast-animated"),setTimeout(()=>{f(t,"toast.shown"),this.options.loading.enabled&&t.classList.add("toast-load")},this.options.animationDuration)},50)},b=new WeakSet,P=function(t){setTimeout(()=>{f(t,"toast.hide"),c(this,u,w).call(this,t)},this.options.duration+this.options.animationDuration)},D=new WeakSet,H=function(t){t.style.transitionTimingFunction="cubic-bezier(0.445, 0.05, 0.55, 0.95)",t.style.paddingTop="0",t.style.paddingBottom="0",t.style.margin="0",t.style.height="0"},T=new WeakSet,N=function(){let t=document.createElement("div");if(t.className="toast shadow-1 "+this.options.classes,t.innerHTML=d(this,h),t.style.transitionDuration=this.options.animationDuration+"ms",this.options.isClosable){let s=document.createElement("div");s.className="toast-trigger",s.innerHTML=this.options.closableContent,s.listenerRef=c(this,u,w).bind(this,t,s),s.addEventListener("click",s.listenerRef),t.appendChild(s)}c(this,x,M).call(this,t),d(this,a)[this.options.position].appendChild(t),c(this,b,P).call(this,t);const e=t.clientHeight;t.style.height=e+"px"},u=new WeakSet,w=function(t,e,s){if(t.isAnimated)return;let $=1;s&&(s.preventDefault(),$=0,this.options.isClosable&&e.removeEventListener("click",e.listenerRef)),t.style.opacity="0",t.isAnimated=!0;const O=$*this.options.animationDuration+this.options.animationDuration;setTimeout(()=>{c(this,D,H).call(this,t)},O/2),setTimeout(()=>{t.remove(),f(t,"toast.remove"),c(this,y,k).call(this)},O*1.45)},C(m,"getDefaultOptions",()=>z),B({class:m,name:"Toast"}),m});
+var ct=Object.defineProperty;var dt=(n,o,r)=>o in n?ct(n,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[o]=r;var k=(n,o,r)=>(dt(n,typeof o!="symbol"?o+"":o,r),r),U=(n,o,r)=>{if(!o.has(n))throw TypeError("Cannot "+r)};var a=(n,o,r)=>(U(n,o,"read from private field"),r?r.call(n):o.get(n)),l=(n,o,r)=>{if(o.has(n))throw TypeError("Cannot add the same private member more than once");o instanceof WeakSet?o.add(n):o.set(n,r)},c=(n,o,r,u)=>(U(n,o,"write to private field"),u?u.call(n,r):o.set(n,r),r);var h=(n,o,r)=>(U(n,o,"access private method"),r);(function(n,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o():typeof define=="function"&&define.amd?define(o):(n=typeof globalThis!="undefined"?globalThis:n||self,n.Toast=o())})(this,function(){var g,d,p,T,v,y,m,f,C,Y,L,z,P,F,A,V,$,G,M,J,R,K,S,Q,O,W,I,Z,X,j,x,B;"use strict";var n="";const o=[],r={components:[],plugins:[],prefix:"ax",mode:""},u=i=>`--${r.prefix}-${i}`,_=i=>r.components.find(t=>t.name===i).class,tt=()=>{const i=r.components.filter(e=>e.dataDetection),t=r.plugins.filter(e=>e.dataDetection);return[...i,...t].map(e=>e.name)},et=(i,t)=>{if(!i.name||!i.class){console.error(`[Axentix] Error registering ${t} : Missing required parameters.`);return}if(r[t].some(e=>e.name===i.name)){console.error(`[Axentix] Error registering ${t} : Already exist.`);return}i.autoInit&&(i.autoInit.selector=i.autoInit.selector+=":not(.no-axentix-init)"),r[t].push(i)},it=i=>{et(i,"components")},ot=()=>{document.querySelectorAll("[data-ax]").forEach(t=>{let e=t.dataset.ax;if(e=e[0].toUpperCase()+e.slice(1).toLowerCase(),!tt().includes(e)){console.error(`[Axentix] Error: ${e} component doesn't exist. 
+ Did you forget to register him ?`,t);return}try{const s=_(e);new s(`#${t.id}`)}catch(s){console.error("[Axentix] Data: Unable to load "+e,s)}})},st=()=>{try{new Axentix.Axentix("all")}catch(i){console.error("[Axentix] Unable to auto init.",i)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&st(),ot()});const H=(...i)=>i.reduce((t,e)=>{for(let s in e)t[s]=typeof e[s]=="object"&&e[s]!==null?H(t[s],e[s]):e[s];return t},{}),D=(i,t,e)=>{const s=new CustomEvent("ax."+t,{detail:e||{},bubbles:!0});i.dispatchEvent(s)},nt=()=>"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,rt=()=>!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>=0,at=()=>nt()?"touch":rt()?"pointer":"mouse",lt=i=>o.filter(t=>t.type===i).map(t=>t.instance),E=i=>i.targetTouches&&i.targetTouches.length>=1?i.targetTouches[0].clientX:i.changedTouches&&i.changedTouches.length>=1?i.changedTouches[0].pageX:i.clientX,ht={animationDuration:400,duration:4e3,classes:"",position:"right",direction:"top",mobileDirection:"bottom",offset:{x:"5%",y:"0%",mobileX:"10%",mobileY:"0%"},isClosable:!1,isSwipeable:!0,closableContent:"x",loading:{enabled:!0,border:"2px solid #E2E2E2"}},N=class{constructor(t,e){l(this,C);l(this,L);l(this,P);l(this,A);l(this,$);l(this,M);l(this,R);l(this,S);l(this,O);l(this,I);l(this,X);l(this,x);k(this,"options");k(this,"id");l(this,g,void 0);l(this,d,void 0);l(this,p,void 0);l(this,T,void 0);l(this,v,void 0);l(this,y,void 0);l(this,m,void 0);l(this,f,void 0);if(lt("Toast").length>0){console.error("[Axentix] Toast: Don't try to create multiple toast instances");return}o.push({type:"Toast",instance:this}),this.id=Math.random().toString().split(".")[1],c(this,g,t),this.options=H(N.getDefaultOptions(),e),c(this,p,at()),this.options.position=this.options.position.toLowerCase(),this.options.direction=this.options.direction.toLowerCase(),this.options.mobileDirection=this.options.mobileDirection.toLowerCase(),c(this,d,{})}destroy(){const t=o.findIndex(e=>e.instance.id===this.id);o.splice(t,1)}show(){try{Object.keys(a(this,d)).includes(this.options.position)||h(this,C,Y).call(this),h(this,X,j).call(this)}catch(t){console.error("[Axentix] Toast error",t)}}change(t,e){c(this,g,t),this.options=H(this.options,e)}};let b=N;return g=new WeakMap,d=new WeakMap,p=new WeakMap,T=new WeakMap,v=new WeakMap,y=new WeakMap,m=new WeakMap,f=new WeakMap,C=new WeakSet,Y=function(){let t=document.createElement("div");["right","left"].includes(this.options.position)||(this.options.position="right"),this.options.position==="right"?t.style.right=this.options.offset.x:t.style.left=this.options.offset.x;const s=["bottom","top"];s.includes(this.options.direction)||(this.options.direction="top"),this.options.direction==="top"?t.style.top=this.options.offset.y:t.style.bottom=this.options.offset.y,s.includes(this.options.mobileDirection)||(this.options.mobileDirection="bottom"),t.style.setProperty(u("toaster-m-width"),100-this.options.offset.mobileX.slice(0,-1)+"%"),t.style.setProperty(u("toaster-m-offset"),this.options.offset.mobileY),this.options.loading.enabled&&t.style.setProperty(u("toast-loading-border"),this.options.loading.border),t.className=`toaster toaster-${this.options.position} toast-${this.options.direction} toaster-m-${this.options.mobileDirection}`,a(this,d)[this.options.position]=t,document.body.appendChild(t)},L=new WeakSet,z=function(){for(const t in a(this,d)){let e=a(this,d)[t];e.childElementCount<=0&&(e.remove(),delete a(this,d)[t])}},P=new WeakSet,F=function(t){setTimeout(()=>{D(t,"toast.show"),this.options.loading.enabled&&(t.classList.add("toast-loading"),t.style.setProperty(u("toast-loading-duration"),this.options.duration+"ms")),t.classList.add("toast-animated"),setTimeout(()=>{D(t,"toast.shown"),this.options.loading.enabled&&t.classList.add("toast-load")},this.options.animationDuration)},50)},A=new WeakSet,V=function(t){setTimeout(()=>{D(t,"toast.hide"),h(this,x,B).call(this,t)},this.options.duration+this.options.animationDuration)},$=new WeakSet,G=function(t){t.style.transitionTimingFunction="cubic-bezier(0.445, 0.05, 0.55, 0.95)",t.style.paddingTop="0",t.style.paddingBottom="0",t.style.margin="0",t.style.height="0"},M=new WeakSet,J=function(t){c(this,T,h(this,R,K).bind(this)),c(this,v,h(this,S,Q).bind(this)),c(this,y,h(this,O,W).bind(this)),t.addEventListener(`${a(this,p)}${a(this,p)==="touch"?"start":"down"}`,a(this,T)),t.addEventListener(`${a(this,p)}move`,a(this,v)),t.addEventListener(`${a(this,p)}${a(this,p)==="touch"?"end":"up"}`,a(this,y)),t.addEventListener(a(this,p)==="pointer"?"pointerleave":"mouseleave",a(this,y))},R=new WeakSet,K=function(t){if(t.target.closest(".toast-trigger"))return;const e=t.target.closest(".toast");e.dataset.closing||(c(this,f,E(t)),c(this,m,!0),e.style.transitionProperty="height, margin, padding, transform, box-shadow")},S=new WeakSet,Q=function(t){if(!a(this,m))return;const e=t.target.closest(".toast"),s=e.getBoundingClientRect(),w=Math.abs(E(t)-a(this,f));e.style.left=E(t)-a(this,f)+"px",e.style.opacity=w<s.width?(.99-w/s.width).toString():"0.01"},O=new WeakSet,W=function(t){if(!a(this,m))return;t.cancelable&&t.preventDefault(),c(this,m,!1);const e=t.target.closest(".toast");e.style.transitionProperty="height, margin, opacity, padding, transform, box-shadow, left",Math.abs(E(t)-a(this,f))>e.getBoundingClientRect().width/2?(h(this,x,B).call(this,e),e.dataset.closing="true"):(e.style.left="0px",e.style.opacity=1)},I=new WeakSet,Z=function(t){h(this,M,J).call(this,t)},X=new WeakSet,j=function(){let t=document.createElement("div");if(t.className="toast shadow-1 "+this.options.classes,t.innerHTML=a(this,g),t.style.transitionDuration=this.options.animationDuration+"ms",this.options.isClosable){let s=document.createElement("div");s.className="toast-trigger",s.innerHTML=this.options.closableContent,s.listenerRef=h(this,x,B).bind(this,t,s),s.addEventListener("click",s.listenerRef),t.appendChild(s)}this.options.isSwipeable&&h(this,I,Z).call(this,t),h(this,P,F).call(this,t),a(this,d)[this.options.position].appendChild(t),h(this,A,V).call(this,t);const e=t.clientHeight;t.style.height=e+"px"},x=new WeakSet,B=function(t,e,s){if(t.isAnimated)return;let w=1;s&&(s.preventDefault(),w=0,this.options.isClosable&&e.removeEventListener("click",e.listenerRef)),t.style.opacity="0",t.isAnimated=!0;const q=w*this.options.animationDuration+this.options.animationDuration;setTimeout(()=>{h(this,$,G).call(this,t)},q/2),setTimeout(()=>{t.remove(),D(t,"toast.remove"),h(this,L,z).call(this)},q*1.45)},k(b,"getDefaultOptions",()=>ht),it({class:b,name:"Toast"}),b});

dist/components/waves/waves.min.js

@@ -1,2 +0,2 @@
-var f=Math.pow;(function(p,c){typeof exports=="object"&&typeof module!="undefined"?module.exports=c():typeof define=="function"&&define.amd?define(c):(p=typeof globalThis!="undefined"?globalThis:p||self,p.Waves=c())})(this,function(){"use strict";var p="";const c={components:[],plugins:[],prefix:"ax",mode:""},b=t=>`--${c.prefix}-${t}`,C=t=>c.components.find(n=>n.name===t).class,A=()=>{const t=c.components.filter(e=>e.dataDetection),n=c.plugins.filter(e=>e.dataDetection);return[...t,...n].map(e=>e.name)},$=()=>{document.querySelectorAll("[data-ax]").forEach(n=>{let e=n.dataset.ax;if(e=e[0].toUpperCase()+e.slice(1).toLowerCase(),!A().includes(e)){console.error(`[Axentix] Error: ${e} component doesn't exist. 
+(function(p,c){typeof exports=="object"&&typeof module!="undefined"?module.exports=c():typeof define=="function"&&define.amd?define(c):(p=typeof globalThis!="undefined"?globalThis:p||self,p.Waves=c())})(this,function(){"use strict";var f=Math.pow;var p="";const c={components:[],plugins:[],prefix:"ax",mode:""},b=t=>`--${c.prefix}-${t}`,C=t=>c.components.find(n=>n.name===t).class,A=()=>{const t=c.components.filter(e=>e.dataDetection),n=c.plugins.filter(e=>e.dataDetection);return[...t,...n].map(e=>e.name)},$=()=>{document.querySelectorAll("[data-ax]").forEach(n=>{let e=n.dataset.ax;if(e=e[0].toUpperCase()+e.slice(1).toLowerCase(),!A().includes(e)){console.error(`[Axentix] Error: ${e} component doesn't exist. 
  Did you forget to register him ?`,n);return}try{const o=C(e);new o(`#${n.id}`)}catch(o){console.error("[Axentix] Data: Unable to load "+e,o)}})},y=()=>{try{new Axentix.Axentix("all")}catch(t){console.error("[Axentix] Unable to auto init.",t)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&y(),$()});const E=()=>"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,L=()=>!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>=0,T=()=>E()?"touch":L()?"pointer":"mouse",x=()=>Math.random().toString().split(".")[1];let m="";const v={},w={},P=t=>{const n=x(),e=document.createElement("div"),o=document.createElement("div"),a=t.tagName.toLowerCase();return t.setAttribute("data-waves-id",n),o.classList.add("data-waves-item-inner"),o.setAttribute("data-waves-id",n),e.classList.add("data-waves-box"),e.setAttribute("data-waves-id",n),e.appendChild(o),v[n]=t,w[n]=e,["img","video"].includes(a)?t.parentNode.appendChild(e):t.appendChild(e),e},D=({id:t,size:n,x:e,y:o,container:a,item:s,target:l},d)=>{const i=document.createElement("span");let r=`height:${n}px;
@@ -3,0 +3,0 @@ width:${n}px;

dist/index.d.ts

@@ -14,2 +14,3 @@ import './core.scss';
 import './components/trends';
+import './components/skeleton';
 export { default as Caroulix } from './components/caroulix/index';
@@ -29,2 +30,3 @@ export { default as Collapsible } from './components/collapsible/index';
 export { Select } from './components/forms/select';
+export { Theme } from './components/theme/index';
 import './core/_colors.scss';
@@ -31,0 +33,0 @@ export * from './utils/config';

dist/utils/component.min.js

@@ -1,2 +0,2 @@
-var x=Object.defineProperty;var h=(s,n,i)=>n in s?x(s,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[n]=i;var a=(s,n,i)=>(h(s,typeof n!="symbol"?n+"":n,i),i);(function(s,n){typeof exports=="object"&&typeof module!="undefined"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(s=typeof globalThis!="undefined"?globalThis:s||self,n(s.Component={}))})(this,function(s){"use strict";const n=[],i={components:[],plugins:[],prefix:"ax",mode:""},d=o=>i.components.find(t=>t.name===o).class,l=()=>{const o=i.components.filter(e=>e.dataDetection),t=i.plugins.filter(e=>e.dataDetection);return[...o,...t].map(e=>e.name)},p=()=>{document.querySelectorAll("[data-ax]").forEach(t=>{let e=t.dataset.ax;if(e=e[0].toUpperCase()+e.slice(1).toLowerCase(),!l().includes(e)){console.error(`[Axentix] Error: ${e} component doesn't exist. 
+(function(s,n){typeof exports=="object"&&typeof module!="undefined"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(s=typeof globalThis!="undefined"?globalThis:s||self,n(s.Component={}))})(this,function(s){"use strict";var x=Object.defineProperty;var h=(s,n,i)=>n in s?x(s,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[n]=i;var a=(s,n,i)=>(h(s,typeof n!="symbol"?n+"":n,i),i);const n=[],i={components:[],plugins:[],prefix:"ax",mode:""},d=o=>i.components.find(t=>t.name===o).class,l=()=>{const o=i.components.filter(e=>e.dataDetection),t=i.plugins.filter(e=>e.dataDetection);return[...o,...t].map(e=>e.name)},p=()=>{document.querySelectorAll("[data-ax]").forEach(t=>{let e=t.dataset.ax;if(e=e[0].toUpperCase()+e.slice(1).toLowerCase(),!l().includes(e)){console.error(`[Axentix] Error: ${e} component doesn't exist. 
  Did you forget to register him ?`,t);return}try{const r=d(e);new r(`#${t.id}`)}catch(r){console.error("[Axentix] Data: Unable to load "+e,r)}})},u=()=>{try{new Axentix.Axentix("all")}catch(o){console.error("[Axentix] Unable to auto init.",o)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&u(),p()});const c=(o,t,e)=>{const r=new CustomEvent("ax."+t,{detail:e||{},bubbles:!0});o.dispatchEvent(r)},m=o=>{const t=n.find(e=>e.type!=="Toast"&&"#"+e.instance.el.id===o);return t?t.instance:!1};class f{constructor(){a(this,"el")}removeListeners(){}setupListeners(){}setup(){}preventDbInstance(t){if(t&&m(t))throw new Error(`Instance already exist on ${t}`)}sync(){c(this.el,"component.sync"),this.removeListeners(),this.setupListeners()}reset(){c(this.el,"component.reset"),this.removeListeners(),this.setup()}destroy(){c(this.el,"component.destroy"),this.removeListeners();const t=n.findIndex(e=>e.instance.el.id===this.el.id);n.splice(t,1)}}s.AxentixComponent=f,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

dist/utils/config.esm.js

@@ -1,2 +0,2 @@
-const version = "2.0.1";
+const version = "2.1.0";
 const instances = [];
@@ -3,0 +3,0 @@ const config = {

dist/utils/config.min.js

@@ -1,1 +0,1 @@
-(function(t,s){typeof exports=="object"&&typeof module!="undefined"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(t=typeof globalThis!="undefined"?globalThis:t||self,s(t.Config={}))})(this,function(t){"use strict";const s="2.0.1",u=[],o={components:[],plugins:[],prefix:"ax",mode:""},c=n=>`--${o.prefix}-${n}`,g=n=>o.components.find(i=>i.name===n).class,l=()=>{const n=o.components.filter(e=>e.dataDetection),i=o.plugins.filter(e=>e.dataDetection);return[...n,...i].map(e=>e.name)},d=()=>{const n=o.components.filter(e=>e.autoInit&&e.autoInit.enabled),i=o.plugins.filter(e=>e.autoInit&&e.autoInit.enabled);return[...n,...i].reduce((e,a)=>(e[a.name]=document.querySelectorAll(a.autoInit.selector),e),{})},r=(n,i)=>{if(!n.name||!n.class){console.error(`[Axentix] Error registering ${i} : Missing required parameters.`);return}if(o[i].some(e=>e.name===n.name)){console.error(`[Axentix] Error registering ${i} : Already exist.`);return}n.autoInit&&(n.autoInit.selector=n.autoInit.selector+=":not(.no-axentix-init)"),o[i].push(n)},f=n=>{r(n,"components")},m=n=>{r(n,"plugins")},p=()=>{!window||(window.Axentix||(window.Axentix={}),[...o.components,...o.plugins].forEach(n=>{window.Axentix[n.name]=n.class}))};t.config=o,t.exportToWindow=p,t.getAutoInitElements=d,t.getComponentClass=g,t.getCssVar=c,t.getDataElements=l,t.instances=u,t.registerComponent=f,t.registerPlugin=m,t.version=s,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(t,s){typeof exports=="object"&&typeof module!="undefined"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(t=typeof globalThis!="undefined"?globalThis:t||self,s(t.Config={}))})(this,function(t){"use strict";const s="2.1.0",u=[],o={components:[],plugins:[],prefix:"ax",mode:""},c=n=>`--${o.prefix}-${n}`,g=n=>o.components.find(i=>i.name===n).class,l=()=>{const n=o.components.filter(e=>e.dataDetection),i=o.plugins.filter(e=>e.dataDetection);return[...n,...i].map(e=>e.name)},d=()=>{const n=o.components.filter(e=>e.autoInit&&e.autoInit.enabled),i=o.plugins.filter(e=>e.autoInit&&e.autoInit.enabled);return[...n,...i].reduce((e,a)=>(e[a.name]=document.querySelectorAll(a.autoInit.selector),e),{})},r=(n,i)=>{if(!n.name||!n.class){console.error(`[Axentix] Error registering ${i} : Missing required parameters.`);return}if(o[i].some(e=>e.name===n.name)){console.error(`[Axentix] Error registering ${i} : Already exist.`);return}n.autoInit&&(n.autoInit.selector=n.autoInit.selector+=":not(.no-axentix-init)"),o[i].push(n)},f=n=>{r(n,"components")},m=n=>{r(n,"plugins")},p=()=>{!window||(window.Axentix||(window.Axentix={}),[...o.components,...o.plugins].forEach(n=>{window.Axentix[n.name]=n.class}))};t.config=o,t.exportToWindow=p,t.getAutoInitElements=d,t.getComponentClass=g,t.getCssVar=c,t.getDataElements=l,t.instances=u,t.registerComponent=f,t.registerPlugin=m,t.version=s,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

dist/utils/utilities.d.ts

@@ -22,1 +22,4 @@ export declare const extend: (...args: any[]) => any;
 export declare const getTriggers: (id: string, query?: string) => Array<HTMLElement>;
+export declare const getClientYPosition: (e: any) => number;
+export declare const getClientXPosition: (e: any) => number;
+export declare const isDarkMode: () => boolean;

dist/utils/utilities.esm.js

@@ -156,2 +156,17 @@ const instances = [];
 const getTriggers = (id, query = '[data-target="{ID}"]') => Array.from(document.querySelectorAll(query.replace("{ID}", id)));
-export { createEvent, createOverlay, destroy, destroyAll, extend, getAllInstances, getComponentOptions, getInstance, getInstanceByType, getPointerType, getTriggers, getUid, isPointerEnabled, isTouchEnabled, reset, resetAll, sync, syncAll, unwrap, updateOverlay, wrap };
+const getClientYPosition = (e) => {
+  if (e.targetTouches && e.targetTouches.length >= 1)
+    return e.targetTouches[0].clientY;
+  else if (e.changedTouches && e.changedTouches.length >= 1)
+    return e.changedTouches[0].pageY;
+  return e.clientY;
+};
+const getClientXPosition = (e) => {
+  if (e.targetTouches && e.targetTouches.length >= 1)
+    return e.targetTouches[0].clientX;
+  else if (e.changedTouches && e.changedTouches.length >= 1)
+    return e.changedTouches[0].pageX;
+  return e.clientX;
+};
+const isDarkMode = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+export { createEvent, createOverlay, destroy, destroyAll, extend, getAllInstances, getClientXPosition, getClientYPosition, getComponentOptions, getInstance, getInstanceByType, getPointerType, getTriggers, getUid, isDarkMode, isPointerEnabled, isTouchEnabled, reset, resetAll, sync, syncAll, unwrap, updateOverlay, wrap };

dist/utils/utilities.min.js

@@ -1,2 +0,2 @@
-(function(o,c){typeof exports=="object"&&typeof module!="undefined"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(o=typeof globalThis!="undefined"?globalThis:o||self,c(o.Utilities={}))})(this,function(o){"use strict";const c=[],f={components:[],plugins:[],prefix:"ax",mode:""},d=t=>f.components.find(e=>e.name===t).class,y=()=>{const t=f.components.filter(n=>n.dataDetection),e=f.plugins.filter(n=>n.dataDetection);return[...t,...e].map(n=>n.name)},v=t=>t.replace(/[\w]([A-Z])/g,e=>e[0]+"-"+e[1]).toLowerCase(),A=(t,e="")=>{const n=v(t);return e?e+"-"+n:n},O=(t,e,n,s,i="")=>{const r=e[0].toUpperCase()+e.slice(1).toLowerCase();y().includes(r)&&n!=="Collapsible"&&r!=="Sidenav"&&(t[e]=d(r).getDefaultOptions());const a=i?i+"-"+e:e,l=p(t[e],n,s,a);if(!(Object.keys(l).length===0&&t.constructor===Object))return l},p=(t,e,n,s="")=>Object.keys(t).reduce((i,r)=>{if(typeof t[r]=="object"&&t[r]!==null){const a=O(t,r,e,n,s);a&&(i[r]=a)}else if(t[r]!==null){const a="data-"+e.toLowerCase()+"-"+A(r,s);if(n.hasAttribute(a)){const l=n.getAttribute(a);i[r]=typeof t[r]=="number"?Number(l):l,typeof t[r]=="boolean"&&(i[r]=l==="true")}}return i},{}),T=(t,e)=>{const n=Object.assign({},d(t).getDefaultOptions());return p(n,t,e)},w=()=>{document.querySelectorAll("[data-ax]").forEach(e=>{let n=e.dataset.ax;if(n=n[0].toUpperCase()+n.slice(1).toLowerCase(),!y().includes(n)){console.error(`[Axentix] Error: ${n} component doesn't exist. 
- Did you forget to register him ?`,e);return}try{const s=d(n);new s(`#${e.id}`)}catch(s){console.error("[Axentix] Data: Unable to load "+n,s)}})},C=()=>{try{new Axentix.Axentix("all")}catch(t){console.error("[Axentix] Unable to auto init.",t)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&C(),w()});const g=(...t)=>t.reduce((e,n)=>{for(let s in n)e[s]=typeof n[s]=="object"&&n[s]!==null?g(e[s],n[s]):n[s];return e},{}),E=(t,e,n)=>g(d(t).getDefaultOptions(),T(t,n),e),b=(t,e=document.createElement("div"))=>(t[0].parentElement.insertBefore(e,t[0]),t.forEach(s=>e.appendChild(s)),e),D=t=>t.replaceWith(...t.childNodes),L=(t,e,n)=>{const s=new CustomEvent("ax."+e,{detail:n||{},bubbles:!0});t.dispatchEvent(s)},m=()=>"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,h=()=>!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>=0,P=()=>m()?"touch":h()?"pointer":"mouse",x=t=>c.filter(e=>e.type===t).map(e=>e.instance),u=t=>{const e=c.find(n=>n.type!=="Toast"&&"#"+n.instance.el.id===t);return e?e.instance:!1},I=()=>Math.random().toString().split(".")[1],S=()=>c,U=t=>u(t).sync(),k=()=>c.map(t=>t.instance.sync()),M=t=>u(t).reset(),N=()=>c.map(t=>t.instance.reset()),q=t=>u(t).destroy(),B=()=>c.map(t=>t.instance.destroy()),$=(t,e,n,s)=>{const i=t&&e?document.querySelector(`.ax-overlay[data-target="${n}"]`):document.createElement("div");return i.classList.add("ax-overlay"),i.style.transitionDuration=s+"ms",i.dataset.target=n,i},F=(t,e,n,s,i)=>{!t||(s?(e.addEventListener("click",n),document.body.appendChild(e),setTimeout(()=>{e.classList.add("active")},50)):(e.classList.remove("active"),setTimeout(()=>{e.removeEventListener("click",n),document.body.removeChild(e)},i)))},_=(t,e='[data-target="{ID}"]')=>Array.from(document.querySelectorAll(e.replace("{ID}",t)));o.createEvent=L,o.createOverlay=$,o.destroy=q,o.destroyAll=B,o.extend=g,o.getAllInstances=S,o.getComponentOptions=E,o.getInstance=u,o.getInstanceByType=x,o.getPointerType=P,o.getTriggers=_,o.getUid=I,o.isPointerEnabled=h,o.isTouchEnabled=m,o.reset=M,o.resetAll=N,o.sync=U,o.syncAll=k,o.unwrap=D,o.updateOverlay=F,o.wrap=b,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(o,r){typeof exports=="object"&&typeof module!="undefined"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(o=typeof globalThis!="undefined"?globalThis:o||self,r(o.Utilities={}))})(this,function(o){"use strict";const r=[],g={components:[],plugins:[],prefix:"ax",mode:""},u=t=>g.components.find(e=>e.name===t).class,h=()=>{const t=g.components.filter(n=>n.dataDetection),e=g.plugins.filter(n=>n.dataDetection);return[...t,...e].map(n=>n.name)},T=t=>t.replace(/[\w]([A-Z])/g,e=>e[0]+"-"+e[1]).toLowerCase(),v=(t,e="")=>{const n=T(t);return e?e+"-"+n:n},w=(t,e,n,s,i="")=>{const c=e[0].toUpperCase()+e.slice(1).toLowerCase();h().includes(c)&&n!=="Collapsible"&&c!=="Sidenav"&&(t[e]=u(c).getDefaultOptions());const a=i?i+"-"+e:e,l=y(t[e],n,s,a);if(!(Object.keys(l).length===0&&t.constructor===Object))return l},y=(t,e,n,s="")=>Object.keys(t).reduce((i,c)=>{if(typeof t[c]=="object"&&t[c]!==null){const a=w(t,c,e,n,s);a&&(i[c]=a)}else if(t[c]!==null){const a="data-"+e.toLowerCase()+"-"+v(c,s);if(n.hasAttribute(a)){const l=n.getAttribute(a);i[c]=typeof t[c]=="number"?Number(l):l,typeof t[c]=="boolean"&&(i[c]=l==="true")}}return i},{}),A=(t,e)=>{const n=Object.assign({},u(t).getDefaultOptions());return y(n,t,e)},C=()=>{document.querySelectorAll("[data-ax]").forEach(e=>{let n=e.dataset.ax;if(n=n[0].toUpperCase()+n.slice(1).toLowerCase(),!h().includes(n)){console.error(`[Axentix] Error: ${n} component doesn't exist. 
+ Did you forget to register him ?`,e);return}try{const s=u(n);new s(`#${e.id}`)}catch(s){console.error("[Axentix] Data: Unable to load "+n,s)}})},O=()=>{try{new Axentix.Axentix("all")}catch(t){console.error("[Axentix] Unable to auto init.",t)}};document.addEventListener("DOMContentLoaded",()=>{document.documentElement.dataset.axentix&&O(),C()});const f=(...t)=>t.reduce((e,n)=>{for(let s in n)e[s]=typeof n[s]=="object"&&n[s]!==null?f(e[s],n[s]):n[s];return e},{}),E=(t,e,n)=>f(u(t).getDefaultOptions(),A(t,n),e),D=(t,e=document.createElement("div"))=>(t[0].parentElement.insertBefore(e,t[0]),t.forEach(s=>e.appendChild(s)),e),P=t=>t.replaceWith(...t.childNodes),b=(t,e,n)=>{const s=new CustomEvent("ax."+e,{detail:n||{},bubbles:!0});t.dispatchEvent(s)},p=()=>"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0,m=()=>!!window.PointerEvent&&"maxTouchPoints"in window.navigator&&window.navigator.maxTouchPoints>=0,L=()=>p()?"touch":m()?"pointer":"mouse",k=t=>r.filter(e=>e.type===t).map(e=>e.instance),d=t=>{const e=r.find(n=>n.type!=="Toast"&&"#"+n.instance.el.id===t);return e?e.instance:!1},M=()=>Math.random().toString().split(".")[1],I=()=>r,S=t=>d(t).sync(),U=()=>r.map(t=>t.instance.sync()),x=t=>d(t).reset(),X=()=>r.map(t=>t.instance.reset()),Y=t=>d(t).destroy(),N=()=>r.map(t=>t.instance.destroy()),q=(t,e,n,s)=>{const i=t&&e?document.querySelector(`.ax-overlay[data-target="${n}"]`):document.createElement("div");return i.classList.add("ax-overlay"),i.style.transitionDuration=s+"ms",i.dataset.target=n,i},B=(t,e,n,s,i)=>{!t||(s?(e.addEventListener("click",n),document.body.appendChild(e),setTimeout(()=>{e.classList.add("active")},50)):(e.classList.remove("active"),setTimeout(()=>{e.removeEventListener("click",n),document.body.removeChild(e)},i)))},$=(t,e='[data-target="{ID}"]')=>Array.from(document.querySelectorAll(e.replace("{ID}",t))),F=t=>t.targetTouches&&t.targetTouches.length>=1?t.targetTouches[0].clientY:t.changedTouches&&t.changedTouches.length>=1?t.changedTouches[0].pageY:t.clientY,_=t=>t.targetTouches&&t.targetTouches.length>=1?t.targetTouches[0].clientX:t.changedTouches&&t.changedTouches.length>=1?t.changedTouches[0].pageX:t.clientX,W=()=>window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;o.createEvent=b,o.createOverlay=q,o.destroy=Y,o.destroyAll=N,o.extend=f,o.getAllInstances=I,o.getClientXPosition=_,o.getClientYPosition=F,o.getComponentOptions=E,o.getInstance=d,o.getInstanceByType=k,o.getPointerType=L,o.getTriggers=$,o.getUid=M,o.isDarkMode=W,o.isPointerEnabled=m,o.isTouchEnabled=p,o.reset=x,o.resetAll=X,o.sync=S,o.syncAll=U,o.unwrap=P,o.updateOverlay=B,o.wrap=D,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "axentix",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.",
@@ -10,2 +10,5 @@ "homepage": "https://useaxentix.com",
     "dev": "vite --host",
+    "test": "npx playwright test",
+    "test:watch": "PWDEBUG=1 npx playwright test",
+    "test:watch-windows": "set PWDEBUG=1 && npx playwright test",
     "build": "node scripts/build.js && npm run build:def",
@@ -51,10 +54,11 @@ "build:main": "node scripts/build.js main",
   "devDependencies": {
-    "autoprefixer": "^10.4.4",
+    "@playwright/test": "^1.22.2",
+    "autoprefixer": "^10.4.7",
     "fast-glob": "^3.2.11",
     "rollup-plugin-visualizer": "^5.6.0",
-    "sass": "^1.50.0",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.1",
-    "vite-plugin-mpa": "^1.1.1"
+    "sass": "^1.53.0",
+    "typescript": "^4.7.4",
+    "vite": "2.9.9",
+    "vite-plugin-mpa": "^1.1.3"
   }
 }

README.md

@@ -40,4 +40,4 @@ <p align="center">
   </a>
-  <a href="https://openbase.io/js/axentix?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge">
-    <img src="https://badges.openbase.io/js/rating/axentix.svg" alt="Rate on Openbase" />
+  <a href="https://openbase.com/js/axentix?utm_source=embedded&amp;utm_medium=badge&amp;utm_campaign=rate-badge">
+    <img src="https://badges.openbase.com/js/rating/axentix.svg?token=xEWyuQ6VoC2qG3gEvoNm6V3hVAvXbAnGQXJTC9OkTrI=" alt="Rate this package" />
   </a>
@@ -48,3 +48,3 @@ </p>
 
-![home gif](https://useaxentix.com/img/gif-home.gif?2)
+![top image](./top.png)
 
@@ -78,3 +78,3 @@ ## Quickstart
 After installation you have access to our source files.  
-You can build project with `npm run build` or serve it with `npm run serve`.
+You can build the project with `npm run build` or launch development server with `npm run dev`.
 
@@ -91,3 +91,3 @@ ## Documentation
 
-Support this project on [BuyMeACoffee](https://www.buymeacoffee.com/axentix) to become a sponsor and get **your logo here and on the docs** with a link to your website.
+Support this project on [BuyMeACoffee](https://www.buymeacoffee.com/axentix) to become a sponsor and get **your logo on the docs** with a link to your website.
 
@@ -94,0 +94,0 @@ <div align="center">

src/components/caroulix/caroulix.ts

 import { AxentixComponent, Component } from '../../utils/component';
 import { registerComponent, instances } from '../../utils/config';
-import { createEvent, getComponentOptions, getPointerType } from '../../utils/utilities';
+import { createEvent, getClientXPosition, getClientYPosition, getComponentOptions, getPointerType } from '../../utils/utilities';
 
@@ -66,3 +66,3 @@ export interface ICaroulixOptions {
   #indicators: HTMLElement;
-  #autoplayInterval: number;
+  #autoplayInterval: ReturnType<typeof setInterval>;
   #pointerType: string;
@@ -293,4 +293,4 @@
     this.#deltaY = 0;
-    this.#xStart = this.#getXPosition(e);
-    this.#yStart = this.#getYPosition(e);
+    this.#xStart = getClientXPosition(e);
+    this.#yStart = getClientYPosition(e);
   }
@@ -301,4 +301,4 @@
 
-    let x = this.#getXPosition(e),
-      y = this.#getYPosition(e);
+    let x = getClientXPosition(e),
+      y = getClientYPosition(e);
 
@@ -380,14 +380,2 @@ this.#deltaX = this.#xStart - x;
 
-  #getXPosition(e: any): number {
-    if (e.targetTouches && e.targetTouches.length >= 1) return e.targetTouches[0].clientX;
-
-    return e.clientX;
-  }
-
-  #getYPosition(e: any): number {
-    if (e.targetTouches && e.targetTouches.length >= 1) return e.targetTouches[0].clientY;
-
-    return e.clientY;
-  }
-
   #setTransitionDuration(duration: number) {
@@ -394,0 +382,0 @@ this.el.style.transitionDuration = duration + 'ms';

src/components/toast/toast.ts

 import { getCssVar, registerComponent, instances } from '../../utils/config';
-import { createEvent, extend, getInstanceByType } from '../../utils/utilities';
+import {
+  createEvent,
+  extend,
+  getClientXPosition,
+  getInstanceByType,
+  getPointerType,
+} from '../../utils/utilities';
 
@@ -13,2 +19,3 @@ interface IToastOptions {
   isClosable?: boolean;
+  isSwipeable?: boolean;
   closableContent?: string;
@@ -30,2 +37,3 @@ loading?: {
   isClosable: false,
+  isSwipeable: true,
   closableContent: 'x',
@@ -49,2 +57,8 @@ loading: {
   };
+  #pointerType: string;
+  #touchStartRef: any;
+  #touchMoveRef: any;
+  #touchReleaseRef: any;
+  #isPressed: boolean;
+  #xStart: number;
 
@@ -63,2 +77,3 @@ constructor(content: string, options?: IToastOptions) {
     this.options = extend(Toast.getDefaultOptions(), options);
+    this.#pointerType = getPointerType();
     // @ts-ignore
@@ -156,2 +171,64 @@ this.options.position = this.options.position.toLowerCase();
 
+  #setupSwipeListeners(toast) {
+    this.#touchStartRef = this.#handleDragStart.bind(this);
+    this.#touchMoveRef = this.#handleDragMove.bind(this);
+    this.#touchReleaseRef = this.#handleDragRelease.bind(this);
+
+    toast.addEventListener(
+      `${this.#pointerType}${this.#pointerType === 'touch' ? 'start' : 'down'}`,
+      this.#touchStartRef
+    );
+
+    toast.addEventListener(`${this.#pointerType}move`, this.#touchMoveRef);
+    toast.addEventListener(
+      `${this.#pointerType}${this.#pointerType === 'touch' ? 'end' : 'up'}`,
+      this.#touchReleaseRef
+    );
+    toast.addEventListener(
+      this.#pointerType === 'pointer' ? 'pointerleave' : 'mouseleave',
+      this.#touchReleaseRef
+    );
+  }
+
+  #handleDragStart(e: any) {
+    if ((e.target as HTMLElement).closest('.toast-trigger')) return;
+    const toast = e.target.closest('.toast') as HTMLElement;
+    if (toast.dataset.closing) return;
+    this.#xStart = getClientXPosition(e);
+    this.#isPressed = true;
+    toast.style.transitionProperty = 'height, margin, padding, transform, box-shadow';
+  }
+
+  #handleDragMove(e: any) {
+    if (!this.#isPressed) return;
+    const toast: HTMLElement = e.target.closest('.toast');
+    const client = toast.getBoundingClientRect();
+    const absDiff = Math.abs(getClientXPosition(e) - this.#xStart);
+
+    toast.style.left = getClientXPosition(e) - this.#xStart + 'px';
+    toast.style.opacity = absDiff < client.width ? (0.99 - absDiff / client.width).toString() : '0.01';
+  }
+
+  #handleDragRelease(e: any) {
+    if (!this.#isPressed) return;
+    if (e.cancelable) e.preventDefault();
+
+    this.#isPressed = false;
+    const toast = e.target.closest('.toast');
+
+    toast.style.transitionProperty = 'height, margin, opacity, padding, transform, box-shadow, left';
+
+    if (Math.abs(getClientXPosition(e) - this.#xStart) > toast.getBoundingClientRect().width / 2) {
+      this.#hide(toast);
+      toast.dataset.closing = 'true';
+    } else {
+      toast.style.left = '0px';
+      toast.style.opacity = 1;
+    }
+  }
+
+  #handleSwipe(toast: HTMLElement) {
+    this.#setupSwipeListeners(toast);
+  }
+
   #createToast() {
@@ -173,2 +250,3 @@ let toast = document.createElement('div');
 
+    if (this.options.isSwipeable) this.#handleSwipe(toast);
     this.#fadeInToast(toast);
@@ -175,0 +253,0 @@

src/index.ts

@@ -17,2 +17,3 @@ // Core CSS
 import './components/trends';
+import './components/skeleton';
 
@@ -34,2 +35,3 @@ // JS Components
 export { Select } from './components/forms/select';
+export { Theme } from './components/theme/index';
 
@@ -36,0 +38,0 @@ // Must be loaded at the end

src/utils/utilities.ts

@@ -106,1 +106,16 @@ import { instances, getComponentClass } from './config';
   Array.from(document.querySelectorAll(query.replace('{ID}', id)));
+
+export const getClientYPosition = (e: any): number => {
+  if (e.targetTouches && e.targetTouches.length >= 1) return e.targetTouches[0].clientY;
+  else if (e.changedTouches && e.changedTouches.length >= 1) return e.changedTouches[0].pageY;
+  return e.clientY;
+};
+
+export const getClientXPosition = (e: any): number => {
+  if (e.targetTouches && e.targetTouches.length >= 1) return e.targetTouches[0].clientX;
+  else if (e.changedTouches && e.changedTouches.length >= 1) return e.changedTouches[0].pageX;
+  return e.clientX;
+};
+
+export const isDarkMode = () =>
+  window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

No alert changes

Improved metrics

Total package byte prevSize

1034312

increased by6.12%

Number of package files

250

increased by5.49%

Lines of code

14922

increased by5.77%

Worsened metrics

Dev dependency count

8

increased by14.29%

No dependency changes