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

Customizable loading skeleton for Svelte

function t(){}function e(t){return t()}function o(){return Object.create(null)}function n(t){t.forEach(e)}function i(t){return"function"==typeof t}function r(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function h(t,e,o){t.insertBefore(e,o||null)}function a(t,e,o){t.style.setProperty(e,o)}let s;function l(t){s=t}const d=[],g=Promise.resolve();let c=!1;const u=[],$=[],b=[];function f(t){$.push(t)}function m(){const t=new Set;do{for(;d.length;){const t=d.shift();l(t),p(t.$$)}for(;u.length;)u.shift()();for(;$.length;){const e=$.pop();t.has(e)||(e(),t.add(e))}}while(d.length);for(;b.length;)b.pop()();c=!1}function p(t){t.fragment&&(t.update(t.dirty),n(t.before_render),t.fragment.p(t.dirty,t.ctx),t.dirty=null,t.after_render.forEach(f))}function C(t,e){t.$$.dirty||(d.push(t),c||(c=!0,g.then(m)),t.$$.dirty=o()),t.$$.dirty[e]=!0}function x(r,h,a,d,g,c){const u=s;l(r);const $=h.props||{},b=r.$$={fragment:null,ctx:null,props:c,update:t,not_equal:g,bound:o(),on_mount:[],on_destroy:[],before_render:[],after_render:[],context:new Map(u?u.$$.context:[]),callbacks:o(),dirty:null};let p=!1;b.ctx=a?a(r,$,(t,e)=>{b.ctx&&g(b.ctx[t],b.ctx[t]=e)&&(b.bound[t]&&b.bound[t](e),p&&C(r,t))}):$,b.update(),p=!0,n(b.before_render),b.fragment=d(b.ctx),h.target&&(h.hydrate?b.fragment.l(function(t){return Array.from(t.childNodes)}(h.target)):b.fragment.c(),h.intro&&r.$$.fragment.i&&r.$$.fragment.i(),function(t,o,r){const{fragment:h,on_mount:a,on_destroy:s,after_render:l}=t.$$;h.m(o,r),f(()=>{const o=a.map(e).filter(i);s?s.push(...o):n(o),t.$$.on_mount=[]}),l.forEach(f)}(r,h.target,h.anchor),m()),l(u)}let y;function w(e){var o;return{c(){var n;n="div",o=document.createElement(n),this.c=t,o.className="skeleton",a(o,"height",e.height),a(o,"width",e.width),a(o,"border-radius",e.borderRadius),a(o,"--baseColor",e.baseColor),a(o,"--highlightColor",e.highlightColor),a(o,"--animationLength",e.animationLength)},m(t,e){h(t,o,e)},p(t,e){t.height&&a(o,"height",e.height),t.width&&a(o,"width",e.width),t.borderRadius&&a(o,"border-radius",e.borderRadius),t.baseColor&&a(o,"--baseColor",e.baseColor),t.highlightColor&&a(o,"--highlightColor",e.highlightColor),t.animationLength&&a(o,"--animationLength",e.animationLength)},i:t,o:t,d(t){var e;t&&(e=o).parentNode.removeChild(e)}}}function L(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&&(y=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 e,o;o=!0,(e=this).$$&&(n(e.$$.on_destroy),e.$$.fragment.d(o),e.$$.on_destroy=e.$$.fragment=null,e.$$.ctx={}),this.$destroy=t}$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 k extends y{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},L,w,r,["width","height","borderRadius","baseColor","highlightColor","animationLength"]),t&&(t.target&&h(t.target,this,t.anchor),t.props&&(this.$set(t.props),m()))}static get observedAttributes(){return["width","height","borderRadius","baseColor","highlightColor","animationLength"]}get width(){return this.$$.ctx.width}set width(t){this.$set({width:t}),m()}get height(){return this.$$.ctx.height}set height(t){this.$set({height:t}),m()}get borderRadius(){return this.$$.ctx.borderRadius}set borderRadius(t){this.$set({borderRadius:t}),m()}get baseColor(){return this.$$.ctx.baseColor}set baseColor(t){this.$set({baseColor:t}),m()}get highlightColor(){return this.$$.ctx.highlightColor}set highlightColor(t){this.$set({highlightColor:t}),m()}get animationLength(){return this.$$.ctx.animationLength}set animationLength(t){this.$set({animationLength:t}),m()}}customElements.define("loading-skeleton",k);export{k as Skeleton};