svelte-loading-skeleton/dist/index.min.js

Customizable loading skeleton for Svelte

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).LoadingSkeleton={})}(this,function(t){"use strict";function e(){}function o(t){return t()}function n(){return Object.create(null)}function i(t){t.forEach(o)}function r(t){return"function"==typeof t}function h(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function a(t,e,o){t.insertBefore(e,o||null)}function s(t,e,o){t.style.setProperty(e,o)}let l;function d(t){l=t}const g=[],c=Promise.resolve();let u=!1;const f=[],$=[],b=[];function m(t){$.push(t)}function p(){const t=new Set;do{for(;g.length;){const t=g.shift();d(t),C(t.$$)}for(;f.length;)f.shift()();for(;$.length;){const e=$.pop();t.has(e)||(e(),t.add(e))}}while(g.length);for(;b.length;)b.pop()();u=!1}function C(t){t.fragment&&(t.update(t.dirty),i(t.before_render),t.fragment.p(t.dirty,t.ctx),t.dirty=null,t.after_render.forEach(m))}function y(t,e){t.$$.dirty||(g.push(t),u||(u=!0,c.then(p)),t.$$.dirty=n()),t.$$.dirty[e]=!0}function x(t,h,a,s,g,c){const u=l;d(t);const f=h.props||{},$=t.$$={fragment:null,ctx:null,props:c,update:e,not_equal:g,bound:n(),on_mount:[],on_destroy:[],before_render:[],after_render:[],context:new Map(u?u.$$.context:[]),callbacks:n(),dirty:null};let b=!1;$.ctx=a?a(t,f,(e,o)=>{$.ctx&&g($.ctx[e],$.ctx[e]=o)&&($.bound[e]&&$.bound[e](o),b&&y(t,e))}):f,$.update(),b=!0,i($.before_render),$.fragment=s($.ctx),h.target&&(h.hydrate?$.fragment.l(function(t){return Array.from(t.childNodes)}(h.target)):$.fragment.c(),h.intro&&t.$$.fragment.i&&t.$$.fragment.i(),function(t,e,n){const{fragment:h,on_mount:a,on_destroy:s,after_render:l}=t.$$;h.m(e,n),m(()=>{const e=a.map(o).filter(r);s?s.push(...e):i(e),t.$$.on_mount=[]}),l.forEach(m)}(t,h.target,h.anchor),p()),d(u)}let w;function L(t){var o;return{c(){var n;n="div",o=document.createElement(n),this.c=e,o.className="skeleton",s(o,"height",t.height),s(o,"width",t.width),s(o,"border-radius",t.borderRadius),s(o,"--baseColor",t.baseColor),s(o,"--highlightColor",t.highlightColor),s(o,"--animationLength",t.animationLength)},m(t,e){a(t,o,e)},p(t,e){t.height&&s(o,"height",e.height),t.width&&s(o,"width",e.width),t.borderRadius&&s(o,"border-radius",e.borderRadius),t.baseColor&&s(o,"--baseColor",e.baseColor),t.highlightColor&&s(o,"--highlightColor",e.highlightColor),t.animationLength&&s(o,"--animationLength",e.animationLength)},i:e,o:e,d(t){var e;t&&(e=o).parentNode.removeChild(e)}}}function k(t,e,o){let{width:n="100%",height:i="25px",borderRadius:r="4px",baseColor:h="rgb(238, 238, 238)",highlightColor:a="rgb(245, 245, 245)",animationLength:s="1.2s"}=e;return t.$set=t=>{"width"in t&&o("width",n=t.width),"height"in t&&o("height",i=t.height),"borderRadius"in t&&o("borderRadius",r=t.borderRadius),"baseColor"in t&&o("baseColor",h=t.baseColor),"highlightColor"in t&&o("highlightColor",a=t.highlightColor),"animationLength"in t&&o("animationLength",s=t.animationLength)},{width:n,height:i,borderRadius:r,baseColor:h,highlightColor:a,animationLength:s}}"undefined"!=typeof HTMLElement&&(w=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){for(const t in this.$$.slotted)this.appendChild(this.$$.slotted[t])}attributeChangedCallback(t,e,o){this[t]=o}$destroy(){var t,o;o=!0,(t=this).$$&&(i(t.$$.on_destroy),t.$$.fragment.d(o),t.$$.on_destroy=t.$$.fragment=null,t.$$.ctx={}),this.$destroy=e}$on(t,e){const o=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return o.push(e),()=>{const t=o.indexOf(e);-1!==t&&o.splice(t,1)}}$set(){}});class R extends w{constructor(t){super(),this.shadowRoot.innerHTML="<style>.skeleton{background-color:var(--baseColor);background-image:linear-gradient(\n\t\t      90deg,\n\t\t      var(--baseColor),\n\t\t      var(--highlightColor),\n\t\t      var(--baseColor)\n\t\t    );background-size:200px 100%;background-repeat:no-repeat;display:inline-block;width:100%;animation:loading-animation var(--animationLength) ease-in-out infinite}@keyframes loading-animation{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}</style>",x(this,{target:this.shadowRoot},k,L,h,["width","height","borderRadius","baseColor","highlightColor","animationLength"]),t&&(t.target&&a(t.target,this,t.anchor),t.props&&(this.$set(t.props),p()))}static get observedAttributes(){return["width","height","borderRadius","baseColor","highlightColor","animationLength"]}get width(){return this.$$.ctx.width}set width(t){this.$set({width:t}),p()}get height(){return this.$$.ctx.height}set height(t){this.$set({height:t}),p()}get borderRadius(){return this.$$.ctx.borderRadius}set borderRadius(t){this.$set({borderRadius:t}),p()}get baseColor(){return this.$$.ctx.baseColor}set baseColor(t){this.$set({baseColor:t}),p()}get highlightColor(){return this.$$.ctx.highlightColor}set highlightColor(t){this.$set({highlightColor:t}),p()}get animationLength(){return this.$$.ctx.animationLength}set animationLength(t){this.$set({animationLength:t}),p()}}customElements.define("loading-skeleton",R),t.Skeleton=R,Object.defineProperty(t,"__esModule",{value:!0})});