UNPKG

@trimble-oss/moduswebcomponents

Version:

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

1 lines 4.76 kB
import{r as s,h as r,F as o,H as e,g as a}from"./p-D_4hbGjA.js";import{i}from"./p-BLBSdonk.js";const t=class{constructor(r){s(this,r),this.inheritedAttributes={},this.customClass="",this.indeterminate=!1,this.max=100,this.value=0,this.variant="default"}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Progress"),this.inheritedAttributes=i(this.el)}getClasses(){const s=[],r=(({variant:s,indeterminate:r})=>{let o="";if(s)switch(s){case"default":o=`${o} modus-wc-progress modus-wc-w-full`;break;case"radial":o=`${o} modus-wc-radial-progress`}return r&&"radial"===s&&(o=`${o} modus-wc-radial-progress--indeterminate`),o.trim()})({variant:this.variant,indeterminate:this.indeterminate});return r&&s.push(r),this.customClass&&s.push(this.customClass),s.join(" ")}getPercentageValue(){return Math.min(Math.max(0,this.value),this.max)/this.max*100}render(){const s=this.indeterminate?{"aria-hidden":"true"}:{"aria-valuenow":this.value,"aria-valuemin":0,"aria-valuemax":this.max},a=this.indeterminate?{}:{max:this.max,value:this.value};return r(e,{key:"4fa3d01526bb6e7097d6ddd17a7b2e6431f3a692",class:"modus-wc-progress-container"},"default"===this.variant?r(o,null,r("progress",Object.assign({class:this.getClasses()},a,s,this.inheritedAttributes)),this.label&&r("modus-wc-input-label",{labelText:this.label})):r("div",Object.assign({class:this.getClasses(),style:{"--value":`${this.getPercentageValue()}`},role:"progressbar"},s,this.inheritedAttributes),r("span",{class:"modus-wc-radial-progress-label"},this.label),r("slot",null)))}get el(){return a(this)}};t.style='modus-wc-progress.modus-wc-progress-container .modus-wc-radial-progress-label{font-size:var(--modus-wc-font-size-md);margin:0 var(--modus-wc-spacing-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}modus-wc-progress.modus-wc-progress-container .modus-wc-progress{color:var(--modus-wc-color-primary)}modus-wc-progress.modus-wc-progress-container .modus-wc-radial-progress{color:var(--modus-wc-color-trimble-blue)}modus-wc-progress.modus-wc-progress-container .modus-wc-radial-progress.modus-wc-radial-progress--indeterminate{--value:var(--_value) !important;animation-duration:5s;animation-iteration-count:infinite;animation-name:grow;animation-timing-function:ease-in-out}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress,[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress{appearance:none;background-color:transparent;border:1px solid var(--modus-wc-color-gray-6);border-radius:var(--modus-wc-border-radius-sm);height:var(--modus-wc-line-height-sm);overflow:hidden;width:100%}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress::-webkit-progress-value,[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress::-webkit-progress-value{border-radius:var(--modus-wc-border-radius-sm)}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress::-moz-progress-bar,[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress::-moz-progress-bar{border-radius:var(--modus-wc-border-radius-sm)}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress .modus-wc-progress-label,[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress .modus-wc-progress-label{color:var(--modus-wc-color-white)}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress::-webkit-progress-value{background-color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress::-moz-progress-bar{background-color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-progress .modus-wc-progress:indeterminate{background-color:transparent;--progress-color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress::-webkit-progress-value{background-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress::-moz-progress-bar{background-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-progress .modus-wc-progress:indeterminate{background-color:transparent;--progress-color:var(--modus-wc-color-highlight-blue)}.modus-wc-radial-progress.modus-wc-radial-progress--indeterminate{--value:var(--_value) !important;animation-duration:5s;animation-iteration-count:infinite;animation-name:grow;animation-timing-function:ease-in-out}[data-theme=modus-classic-light] .modus-wc-radial-progress{color:var(--modus-wc-color-primary)}[data-theme=modus-classic-dark] .modus-wc-radial-progress{color:var(--modus-wc-color-highlight-blue)}@property --_value{inherits:true;initial-value:0;syntax:"<number>"}@keyframes grow{0%{--_value:0}50%{--_value:100}100%{--_value:0}}';export{t as modus_wc_progress}