Web-Components (not pusblisde yet): <animated-svg>, <svg-loader>

animatedSvgAndSvgLoader.js

var app=function(t){"use strict";function e(){}function n(t){return t()}function i(){return Object.create(null)}function o(t){t.forEach(n)}function s(t){return"function"==typeof t}function a(t,e){return t!=t?e==e:t!==e}function r(t,e,n){t.insertBefore(e,n||null)}function l(t){t.parentNode.removeChild(t)}function d(t){return document.createElement(t)}function u(t){const e={};for(const n of t)e[n.name]=n.value;return e}let h;function c(t){h=t}function f(){if(!h)throw new Error("Function called outside component initialization");return h}function p(t){f().$$.on_mount.push(t)}function y(t){f().$$.after_update.push(t)}function g(t){f().$$.on_destroy.push(t)}function m(){const t=f();return(e,n)=>{const i=t.$$.callbacks[e];if(i){const o=function(t,e){const n=document.createEvent("CustomEvent");return n.initCustomEvent(t,!1,!1,e),n}(e,n);i.slice().forEach((e=>{e.call(t,o)}))}}}const $=[],b=[],k=[],w=[],x=Promise.resolve();let A=!1;function C(t){k.push(t)}let _=!1;const v=new Set;function D(){if(!_){_=!0;do{for(let t=0;t<$.length;t+=1){const e=$[t];c(e),E(e.$$)}for(c(null),$.length=0;b.length;)b.pop()();for(let t=0;t<k.length;t+=1){const e=k[t];v.has(e)||(v.add(e),e())}k.length=0}while($.length);for(;w.length;)w.pop()();A=!1,_=!1,v.clear()}}function E(t){if(null!==t.fragment){t.update(),o(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(C)}}const B=new Set;function O(t,e){-1===t.$$.dirty[0]&&($.push(t),A||(A=!0,x.then(D)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function T(t,a,r,d,u,f,p=[-1]){const y=h;c(t);const g=a.props||{},m=t.$$={fragment:null,ctx:null,props:f,update:e,not_equal:u,bound:i(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map(y?y.$$.context:[]),callbacks:i(),dirty:p,skip_bound:!1};let $=!1;if(m.ctx=r?r(t,g,((e,n,...i)=>{const o=i.length?i[0]:n;return m.ctx&&u(m.ctx[e],m.ctx[e]=o)&&(!m.skip_bound&&m.bound[e]&&m.bound[e](o),$&&O(t,e)),n})):[],m.update(),$=!0,o(m.before_update),m.fragment=!!d&&d(m.ctx),a.target){if(a.hydrate){const t=function(t){return Array.from(t.childNodes)}(a.target);m.fragment&&m.fragment.l(t),t.forEach(l)}else m.fragment&&m.fragment.c();a.intro&&((b=t.$$.fragment)&&b.i&&(B.delete(b),b.i(k))),function(t,e,i){const{fragment:a,on_mount:r,on_destroy:l,after_update:d}=t.$$;a&&a.m(e,i),C((()=>{const e=r.map(n).filter(s);l?l.push(...e):o(e),t.$$.on_mount=[]})),d.forEach(C)}(t,a.target,a.anchor),D()}var b,k;c(y)}let S;function W(t){return"string"==typeof t?Number.parseFloat(t):t}function j(t){return"true"===t||""===t||!0===t}function F(t){const e=W(t);return Number.isInteger(e)?e:j(t)}"function"==typeof HTMLElement&&(S=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){for(const t in this.$$.slotted)this.appendChild(this.$$.slotted[t])}attributeChangedCallback(t,e,n){this[t]=n}$destroy(){!function(t,e){const n=t.$$;null!==n.fragment&&(o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}(this,1),this.$destroy=e}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}});class H{constructor(t){this.dispatch=t,this._defaultConfig={enabled:!0,duration:2e3,oneByOne:!1,delay:0,timingFunction:"ease-in-out",loop:!1,loopDelay:500,stroke:"#000000",strokeWidth:1},this.animationTimers={},this.animationDataAttribute="data-svg-animation-end"}enable(t,e){this.updateTimer&&clearTimeout(this.updateTimer),this.container=t,this.props=Object.assign({enabled:!0},e),this.updateSvgs(t)}disable(){Object.keys(this.animationTimers).forEach((t=>clearTimeout(this.animationTimers[t]))),this.animationTimers={},this.container&&this.svgs(this.container).forEach((t=>t.removeAttribute(this.animationDataAttribute))),this.props.enabled=!1}updateSvgs(t){this.svgs(t).forEach(((t,e)=>{this.applySvgConfig(t),this.execAnimation(t,e)}))}applySvgConfig(t){if(!t)return;const{width:e}=window.getComputedStyle(t),n=t.getAttribute("viewBox"),i=this.defaultConfig(this.props).width;let o=W(e);o&&0!==o||(o=W(n.split(" ")[2])),o&&0!==o||!i||(o=i),t.style.width=o?o+"px":"auto"}execAnimation(t,e){if(!t)return;const{duration:n,loopDelay:i,loop:o,enabled:s}=this.defaultConfig(this.props),a=Array.from(t.querySelectorAll("path"));if(a.forEach((t=>{this.applySvgPathBasicStyles(t,this.props)})),!s||t.hasAttribute(this.animationDataAttribute)&&!o)return;if(t.hasAttribute(this.animationDataAttribute)){const n=W(t.getAttribute(this.animationDataAttribute))-Date.now()+1;return void this.setTimer(e,n+i,(()=>this.execAnimation(t,e)))}const r=this.calculateAnimationDuration(a.length-1,this.props),l=Date.now()+r;if(t.setAttribute(this.animationDataAttribute,""+l),setTimeout((()=>t.removeAttribute(this.animationDataAttribute)),r),a.forEach(((t,e)=>{this.animateSvgPath(t,e,this.props)})),this.dispatch&&this.dispatch({latestAnimationDuration:r}),o){const s=Math.max("number"==typeof o?o:n,r);this.setTimer(e,s+i,(()=>this.execAnimation(t,e)))}return r}setTimer(t,e,n){this.animationTimers[t]=setTimeout((()=>{n()}),e)}calculateAnimationDuration(t,e){const{duration:n,delay:i,oneByOne:o}=this.defaultConfig(e);let s=n;return o&&(s=n*t+(0===t?0:i*t||0)+n),s}applySvgPathBasicStyles(t,e){const{stroke:n,strokeWidth:i}=this.defaultConfig(e),{stroke:o,strokeWidth:s}=window.getComputedStyle(t);o&&"none"!==o||(t.style.stroke=this._defaultConfig.stroke),n&&(t.style.stroke=n),s||(t.style.strokeWidth=this._defaultConfig.strokeWidth+"px"),i&&(t.style.strokeWidth=i+"px"),t.style.fill="none"}animateSvgPath(t,e,n){const{duration:i,delay:o,timingFunction:s,oneByOne:a}=this.defaultConfig(n);let r=i;const l=0===e?0:o*e||0,d=t.getTotalLength();return t.style.transition="none",t.style.strokeDasharray=`${d} ${d}`,t.style.strokeDashoffset=""+d,t.getBoundingClientRect(),t.style.transitionProperty="stroke-dashoffset",t.style.transitionTimingFunction=s,t.style.transitionDuration=i+"ms",a&&(t.style.transitionDelay=i*e+l+"ms",r=i*e+l+i),t.style.strokeDashoffset="0",r}defaultConfig(t){const{enabled:e,duration:n,oneByOne:i,delay:o,timingFunction:s,loop:a,loopDelay:r,stroke:l,strokeWidth:d,width:u}=t;return{enabled:j(null!=e?e:this._defaultConfig.enabled),duration:W(null!=n?n:this._defaultConfig.duration),oneByOne:j(null!=i?i:this._defaultConfig.oneByOne),delay:W(null!=o?o:this._defaultConfig.delay),timingFunction:null!=s?s:this._defaultConfig.timingFunction,loop:F(null!=a?a:this._defaultConfig.loop),loopDelay:W(null!=r?r:this._defaultConfig.loopDelay),stroke:l,strokeWidth:W(d),width:W(null!=u?u:this._defaultConfig.width)}}svgs(t){return t?Array.from(t.querySelectorAll("svg")):[]}}class L extends H{constructor(t){super(t),this._defaultConfig=Object.assign(Object.assign({},this._defaultConfig),{shouldWaitAnimationEnd:!0,backdrop:"#fffffffa",delayBeforeHide:0,fadeOutDuration:1e3})}disable(){super.disable(),this.hideBackdrop(this.props)}updateSvgs(t){this.svgs(t).forEach(((t,e)=>{this.applySvgConfig(t);const n=this.execAnimation(t,e);n&&(this._latestAnimationDuration=n),this.applyContainerConfig(this.props)}))}applyContainerConfig(t){const{backdrop:e,enabled:n}=this.defaultConfig(t);this.container.style.background=e,this.container.style.width="100%",this.container.style.height="100%",this.container.style.position="absolute",this.container.style.top="0",this.container.style.left="0",this.container.style.display="flex",this.container.style.justifyContent="center",this.container.style.alignItems="center",this.container.style.alignContent="center",n&&this._latestAnimationDuration&&this.showBackdrop(),!n&&this._latestAnimationDuration&&this.hideBackdrop(t)}showBackdrop(){this._hideTimer&&clearTimeout(this._hideTimer),this.container.style.opacity="1",this.container.style.zIndex="1234567"}hideBackdrop(t){const{shouldWaitAnimationEnd:e,delayBeforeHide:n,fadeOutDuration:i}=this.defaultConfig(t);this._hideTimer=setTimeout((()=>{this.container.style.opacity="0",this.container.style.zIndex="-1",this.container.style.transition=`all ${i}ms`}),e?this._latestAnimationDuration+n:0)}defaultConfig(t){const{shouldWaitAnimationEnd:e=!0,backdrop:n="#fffffffa",delayBeforeHide:i=0,fadeOutDuration:o=1e3}=t;return Object.assign(Object.assign({},super.defaultConfig(t)),{backdrop:n,shouldWaitAnimationEnd:j(e),delayBeforeHide:W(i),fadeOutDuration:W(o)})}}function M(t){let n;return{c(){n=d("div"),n.innerHTML="<slot></slot>",this.c=e},m(e,i){r(e,n,i),t[11](n)},p:e,i:e,o:e,d(e){e&&l(n),t[11](null)}}}function P(t,e,n){let{enabled:i}=e,{duration:o}=e,{delay:s}=e,{onebyone:a}=e,{timingfunction:r}=e,{loop:l}=e,{loopdelay:d}=e,{stroke:u}=e,{strokewidth:h}=e,{width:c}=e;const f=m();let $;const k=new H((({latestAnimationDuration:t})=>f("animate",{latestAnimationDuration:t})));function w(){return $&&$.parentNode.host}function x(){return{enabled:i,duration:o,oneByOne:a,delay:s,timingFunction:r,loop:l,loopDelay:d,stroke:u,strokeWidth:h,width:c}}return p((()=>k.enable(w(),x()))),y((()=>k.enable(w(),x()))),g((()=>k.disable())),t.$$set=t=>{"enabled"in t&&n(1,i=t.enabled),"duration"in t&&n(2,o=t.duration),"delay"in t&&n(3,s=t.delay),"onebyone"in t&&n(4,a=t.onebyone),"timingfunction"in t&&n(5,r=t.timingfunction),"loop"in t&&n(6,l=t.loop),"loopdelay"in t&&n(7,d=t.loopdelay),"stroke"in t&&n(8,u=t.stroke),"strokewidth"in t&&n(9,h=t.strokewidth),"width"in t&&n(10,c=t.width)},[$,i,o,s,a,r,l,d,u,h,c,function(t){b[t?"unshift":"push"]((()=>{$=t,n(0,$)}))}]}class I extends S{constructor(t){super(),T(this,{target:this.shadowRoot,props:u(this.attributes)},P,M,a,{enabled:1,duration:2,delay:3,onebyone:4,timingfunction:5,loop:6,loopdelay:7,stroke:8,strokewidth:9,width:10}),t&&(t.target&&r(t.target,this,t.anchor),t.props&&(this.$set(t.props),D()))}static get observedAttributes(){return["enabled","duration","delay","onebyone","timingfunction","loop","loopdelay","stroke","strokewidth","width"]}get enabled(){return this.$$.ctx[1]}set enabled(t){this.$set({enabled:t}),D()}get duration(){return this.$$.ctx[2]}set duration(t){this.$set({duration:t}),D()}get delay(){return this.$$.ctx[3]}set delay(t){this.$set({delay:t}),D()}get onebyone(){return this.$$.ctx[4]}set onebyone(t){this.$set({onebyone:t}),D()}get timingfunction(){return this.$$.ctx[5]}set timingfunction(t){this.$set({timingfunction:t}),D()}get loop(){return this.$$.ctx[6]}set loop(t){this.$set({loop:t}),D()}get loopdelay(){return this.$$.ctx[7]}set loopdelay(t){this.$set({loopdelay:t}),D()}get stroke(){return this.$$.ctx[8]}set stroke(t){this.$set({stroke:t}),D()}get strokewidth(){return this.$$.ctx[9]}set strokewidth(t){this.$set({strokewidth:t}),D()}get width(){return this.$$.ctx[10]}set width(t){this.$set({width:t}),D()}}function N(t){let n;return{c(){n=d("div"),n.innerHTML="<slot></slot>",this.c=e},m(e,i){r(e,n,i),t[15](n)},p:e,i:e,o:e,d(e){e&&l(n),t[15](null)}}}function q(t,e,n){let{enabled:i}=e,{duration:o}=e,{delay:s}=e,{onebyone:a}=e,{timingfunction:r}=e,{loop:l}=e,{loopdelay:d}=e,{stroke:u}=e,{strokewidth:h}=e,{width:c}=e,{shouldwaitanimationend:f}=e,{backdrop:$}=e,{delaybeforehide:k}=e,{fadeoutduration:w}=e;const x=m();let A;const C=new L((({latestAnimationDuration:t})=>x("animate",{latestAnimationDuration:t})));function _(){return A&&A.parentNode.host}function v(){return{enabled:i,duration:o,oneByOne:a,delay:s,timingFunction:r,loop:l,loopDelay:d,stroke:u,strokeWidth:h,width:c,shouldWaitAnimationEnd:f,backdrop:$,delayBeforeHide:k,fadeOutDuration:w}}return p((()=>C.enable(_(),v()))),y((()=>C.enable(_(),v()))),g((()=>C.disable())),t.$$set=t=>{"enabled"in t&&n(1,i=t.enabled),"duration"in t&&n(2,o=t.duration),"delay"in t&&n(3,s=t.delay),"onebyone"in t&&n(4,a=t.onebyone),"timingfunction"in t&&n(5,r=t.timingfunction),"loop"in t&&n(6,l=t.loop),"loopdelay"in t&&n(7,d=t.loopdelay),"stroke"in t&&n(8,u=t.stroke),"strokewidth"in t&&n(9,h=t.strokewidth),"width"in t&&n(10,c=t.width),"shouldwaitanimationend"in t&&n(11,f=t.shouldwaitanimationend),"backdrop"in t&&n(12,$=t.backdrop),"delaybeforehide"in t&&n(13,k=t.delaybeforehide),"fadeoutduration"in t&&n(14,w=t.fadeoutduration)},[A,i,o,s,a,r,l,d,u,h,c,f,$,k,w,function(t){b[t?"unshift":"push"]((()=>{A=t,n(0,A)}))}]}customElements.define("animated-svg",I);class z extends S{constructor(t){super(),T(this,{target:this.shadowRoot,props:u(this.attributes)},q,N,a,{enabled:1,duration:2,delay:3,onebyone:4,timingfunction:5,loop:6,loopdelay:7,stroke:8,strokewidth:9,width:10,shouldwaitanimationend:11,backdrop:12,delaybeforehide:13,fadeoutduration:14}),t&&(t.target&&r(t.target,this,t.anchor),t.props&&(this.$set(t.props),D()))}static get observedAttributes(){return["enabled","duration","delay","onebyone","timingfunction","loop","loopdelay","stroke","strokewidth","width","shouldwaitanimationend","backdrop","delaybeforehide","fadeoutduration"]}get enabled(){return this.$$.ctx[1]}set enabled(t){this.$set({enabled:t}),D()}get duration(){return this.$$.ctx[2]}set duration(t){this.$set({duration:t}),D()}get delay(){return this.$$.ctx[3]}set delay(t){this.$set({delay:t}),D()}get onebyone(){return this.$$.ctx[4]}set onebyone(t){this.$set({onebyone:t}),D()}get timingfunction(){return this.$$.ctx[5]}set timingfunction(t){this.$set({timingfunction:t}),D()}get loop(){return this.$$.ctx[6]}set loop(t){this.$set({loop:t}),D()}get loopdelay(){return this.$$.ctx[7]}set loopdelay(t){this.$set({loopdelay:t}),D()}get stroke(){return this.$$.ctx[8]}set stroke(t){this.$set({stroke:t}),D()}get strokewidth(){return this.$$.ctx[9]}set strokewidth(t){this.$set({strokewidth:t}),D()}get width(){return this.$$.ctx[10]}set width(t){this.$set({width:t}),D()}get shouldwaitanimationend(){return this.$$.ctx[11]}set shouldwaitanimationend(t){this.$set({shouldwaitanimationend:t}),D()}get backdrop(){return this.$$.ctx[12]}set backdrop(t){this.$set({backdrop:t}),D()}get delaybeforehide(){return this.$$.ctx[13]}set delaybeforehide(t){this.$set({delaybeforehide:t}),D()}get fadeoutduration(){return this.$$.ctx[14]}set fadeoutduration(t){this.$set({fadeoutduration:t}),D()}}return customElements.define("svg-loader",z),t.AnimatedSvg=H,t.AnimatedSvgWebComponent=I,t.SvgLoader=L,t.SvgLoaderWebComponent=z,t.getBoolean=j,t.getBooleanOrInt=F,t.getInt=W,t.isEmpty=function(t){return!Object.keys(t).length},Object.defineProperty(t,"__esModule",{value:!0}),t}({});
//# sourceMappingURL=index.js.map

Already published as @tsrt/web-components.