@limetech/lime-elements
Version:
1 lines • 2.24 kB
JavaScript
import{r,h as e,H as i,a as t}from"./p-DBTJNfo7.js";import{t as a}from"./p-DVRaJQvC.js";const s=class{constructor(e){r(this,e),this.language="en",this.value=0,this.indeterminate=!1}render(){if(!this.isFinite(this.value))return;const r=a.get("loading",this.language),t=a.get("progress-bar",this.language);return e(i,{role:"progressbar","aria-label":this.accessibleLabel||t,"aria-live":"polite","aria-valuemin":"0","aria-valuemax":"1","aria-valuenow":this.indeterminate?void 0:this.value,"aria-valuetext":this.indeterminate?r:void 0,style:{"--percentage":100*this.value+"%"}},e("div",{class:"progress"}))}watchValue(r){this.isFinite(r)&&this.updateProgress(r)}updateProgress(r){this.host&&this.host.style.setProperty("--percentage",100*r+"%")}isFinite(r){return Number.isFinite(r)}get host(){return t(this)}static get watchers(){return{value:[{watchValue:0}]}}};s.style=':host(limel-linear-progress){isolation:isolate;position:relative;overflow:hidden;display:flex;width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--background-color, rgb(var(--contrast-800), 0.5))}.progress{height:100%;width:var(--percentage, 0%);border-radius:0.25rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-linear-progress[indeterminate]) .progress{background-color:transparent;width:100%}:host(limel-linear-progress[indeterminate]) .progress:before,:host(limel-linear-progress[indeterminate]) .progress:after{will-change:left, right, opacity;content:"";position:absolute;inset:0;height:100%;border-radius:0.25rem;opacity:0;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-linear-progress[indeterminate]) .progress:before{animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}:host(limel-linear-progress[indeterminate]) .progress:after{animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite 1.15s}@keyframes indeterminate{0%{left:-35%;right:100%;opacity:0}10%,80%{opacity:1}60%{left:100%;right:-90%}100%{left:100%;right:-90%;opacity:0}}@keyframes indeterminate-short{0%{left:-200%;right:100%;opacity:0}10%,80%{opacity:1}60%{left:107%;right:-8%}100%{left:107%;right:-8%;opacity:0}}';export{s as limel_linear_progress}