skeleton-webcomponent-loader 2.0.0 → 2.1.4

package/dist/skeleton-webcomponent/p-b1ce4c03.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t}from"./p-13a85a5d.js";const r=["progress","progress-dark","pulse","false"],i=class{constructor(t){e(this,t),this.count=1,this.variant="text",this.width=null,this.height=null,this.marginBottom=null,this.animation="progress",this.customStyles={},this.showWarnings=!0,this.items=[]}componentWillLoad(){this.init()}componentWillUpdate(){this.init()}init(){if(this.items.length=this.count,this.items.fill(1),r.includes(this.animation)||(this.showWarnings&&console.warn(`\`Skeleton\` need to receive 'animation' as: ${r.join(", ")}. Forcing default to "progress".`),this.animation="progress"),this.customStyles&&"string"==typeof this.customStyles)try{this.customStyles=JSON.parse(this.customStyles)}catch(e){this.showWarnings&&console.warn("can't parse styles",this.customStyles)}}get style(){let e={width:null,height:null,marginBottom:null};this.width&&(e.width=this.width),this.height&&(e.height=this.height),this.marginBottom&&(e.marginBottom=this.marginBottom);const t="object"==typeof this.customStyles?this.customStyles:{};return Object.assign(Object.assign({},e),t)}render(){return this.items.map(((e,r)=>t("span",{key:r,class:{circle:"circle"===this.variant,rect:"rect"===this.variant,progress:"progress"===this.animation,"progress-dark":"progress-dark"===this.animation,pulse:"pulse"===this.animation,skeleton:!0},"aria-busy":"true","aria-valuemin":"0","aria-valuemax":"100","aria-valuetext":"Loading...",role:"progressbar",tabindex:"0",style:this.style})))}};i.style=".skeleton{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;overflow:hidden;position:relative;background:var(--skeleton-background, #eff1f6) no-repeat;border-radius:var(--skeleton-border-radius, 4px);width:var(--skeleton-width, 100%);height:var(--skeleton-height, 20px);display:inline-block;margin-bottom:var(--skeleton-margin-bottom, 10px);will-change:transform}.skeleton:after,.skeleton:before{-webkit-box-sizing:border-box;box-sizing:border-box}.skeleton.circle{width:var(--skeleton-width, 40px);height:var(--skeleton-height, 40px);margin-bottom:var(--skeleton-margin-bottom, 5px);border-radius:var(--skeleton-border-radius, 50%)}.skeleton.rect{border-radius:var(--skeleton-border-radius, 0px)}.skeleton.progress,.skeleton.progress-dark{-webkit-animation:progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;animation:progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;background-size:200px 100%}.skeleton.progress{background-image:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0))}.skeleton.progress-dark{background-image:-webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(0, 0, 0, 0.2)), to(transparent));background-image:linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent)}.skeleton.pulse{-webkit-animation:pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;animation:pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;-webkit-animation-delay:0.5s;animation-delay:0.5s}@media (prefers-reduced-motion: reduce){.skeleton.pulse,.skeleton.progress-dark,.skeleton.progress{-webkit-animation:none;animation:none}.skeleton.progress,.skeleton.progress-dark{background-image:none}}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@-webkit-keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}";export{i as nb_skeleton}