@limetech/lime-elements
Version:
2 lines • 2.39 kB
JavaScript
import{r as e,h as r,H as i,g as t}from"./p-288f0842.js";import{t as s}from"./p-4c88e5d3.js";const a=':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}}';const o=100;const n=class{constructor(r){e(this,r);this.language="en";this.value=0;this.indeterminate=false;this.accessibleLabel=undefined}render(){if(!this.isFinite(this.value)){return}const e=s.get("loading",this.language);const t=s.get("progress-bar",this.language);const a=this.indeterminate?undefined:this.value;const n=this.indeterminate?e:undefined;return r(i,{role:"progressbar","aria-label":this.accessibleLabel||t,"aria-live":"polite","aria-valuemin":"0","aria-valuemax":"1","aria-valuenow":a,"aria-valuetext":n,style:{"--percentage":`${this.value*o}%`}},r("div",{class:"progress"}))}watchValue(e){if(!this.isFinite(e)){return}this.updateProgress(e)}updateProgress(e){if(this.host){this.host.style.setProperty("--percentage",`${e*o}%`)}}isFinite(e){return Number.isFinite(e)}get host(){return t(this)}static get watchers(){return{value:["watchValue"]}}};n.style=a;export{n as limel_linear_progress};
//# sourceMappingURL=p-e6bb4d1a.entry.js.map