@limetech/lime-elements
Version:
50 lines (46 loc) • 16.9 kB
JavaScript
import { r as registerInstance, h } from './index-DBTJNfo7.js';
import { a as abbreviate } from './format-BMPGHLQ8.js';
import './_commonjsHelpers-BFTU3MAI.js';
const circularProgressCss = () => ` "UTF-8";.displays-percentage-colors[style*="--percentage: 0%"]{--circular-progress-fill-color:var( --color-percent--0to10 )}.displays-percentage-colors[style*="--percentage: 1%"]{--circular-progress-fill-color:var( --color-percent--0to10 )}.displays-percentage-colors[style*="--percentage: 2%"]{--circular-progress-fill-color:var( --color-percent--0to10 )}.displays-percentage-colors[style*="--percentage: 3%"]{--circular-progress-fill-color:var( --color-percent--0to10 )}.displays-percentage-colors[style*="--percentage: 4%"]{--circular-progress-fill-color:var( --color-percent--0to10 )}.displays-percentage-colors[style*="--percentage: 5%"]{--circular-progress-fill-color:var( --color-percent--0to10 )}.displays-percentage-colors[style*="--percentage: 6%"]{--circular-progress-fill-color:var( --color-percent--0to10 )}.displays-percentage-colors[style*="--percentage: 7%"]{--circular-progress-fill-color:var( --color-percent--0to10 )}.displays-percentage-colors[style*="--percentage: 8%"]{--circular-progress-fill-color:var( --color-percent--0to10 )}.displays-percentage-colors[style*="--percentage: 9%"]{--circular-progress-fill-color:var( --color-percent--0to10 )}.displays-percentage-colors[style*="--percentage: 10%"]{--circular-progress-fill-color:var( --color-percent--10to20 )}.displays-percentage-colors[style*="--percentage: 11%"]{--circular-progress-fill-color:var( --color-percent--10to20 )}.displays-percentage-colors[style*="--percentage: 12%"]{--circular-progress-fill-color:var( --color-percent--10to20 )}.displays-percentage-colors[style*="--percentage: 13%"]{--circular-progress-fill-color:var( --color-percent--10to20 )}.displays-percentage-colors[style*="--percentage: 14%"]{--circular-progress-fill-color:var( --color-percent--10to20 )}.displays-percentage-colors[style*="--percentage: 15%"]{--circular-progress-fill-color:var( --color-percent--10to20 )}.displays-percentage-colors[style*="--percentage: 16%"]{--circular-progress-fill-color:var( --color-percent--10to20 )}.displays-percentage-colors[style*="--percentage: 17%"]{--circular-progress-fill-color:var( --color-percent--10to20 )}.displays-percentage-colors[style*="--percentage: 18%"]{--circular-progress-fill-color:var( --color-percent--10to20 )}.displays-percentage-colors[style*="--percentage: 19%"]{--circular-progress-fill-color:var( --color-percent--10to20 )}.displays-percentage-colors[style*="--percentage: 20%"]{--circular-progress-fill-color:var( --color-percent--20to30 )}.displays-percentage-colors[style*="--percentage: 21%"]{--circular-progress-fill-color:var( --color-percent--20to30 )}.displays-percentage-colors[style*="--percentage: 22%"]{--circular-progress-fill-color:var( --color-percent--20to30 )}.displays-percentage-colors[style*="--percentage: 23%"]{--circular-progress-fill-color:var( --color-percent--20to30 )}.displays-percentage-colors[style*="--percentage: 24%"]{--circular-progress-fill-color:var( --color-percent--20to30 )}.displays-percentage-colors[style*="--percentage: 25%"]{--circular-progress-fill-color:var( --color-percent--20to30 )}.displays-percentage-colors[style*="--percentage: 26%"]{--circular-progress-fill-color:var( --color-percent--20to30 )}.displays-percentage-colors[style*="--percentage: 27%"]{--circular-progress-fill-color:var( --color-percent--20to30 )}.displays-percentage-colors[style*="--percentage: 28%"]{--circular-progress-fill-color:var( --color-percent--20to30 )}.displays-percentage-colors[style*="--percentage: 29%"]{--circular-progress-fill-color:var( --color-percent--20to30 )}.displays-percentage-colors[style*="--percentage: 30%"]{--circular-progress-fill-color:var( --color-percent--30to40 )}.displays-percentage-colors[style*="--percentage: 31%"]{--circular-progress-fill-color:var( --color-percent--30to40 )}.displays-percentage-colors[style*="--percentage: 32%"]{--circular-progress-fill-color:var( --color-percent--30to40 )}.displays-percentage-colors[style*="--percentage: 33%"]{--circular-progress-fill-color:var( --color-percent--30to40 )}.displays-percentage-colors[style*="--percentage: 34%"]{--circular-progress-fill-color:var( --color-percent--30to40 )}.displays-percentage-colors[style*="--percentage: 35%"]{--circular-progress-fill-color:var( --color-percent--30to40 )}.displays-percentage-colors[style*="--percentage: 36%"]{--circular-progress-fill-color:var( --color-percent--30to40 )}.displays-percentage-colors[style*="--percentage: 37%"]{--circular-progress-fill-color:var( --color-percent--30to40 )}.displays-percentage-colors[style*="--percentage: 38%"]{--circular-progress-fill-color:var( --color-percent--30to40 )}.displays-percentage-colors[style*="--percentage: 39%"]{--circular-progress-fill-color:var( --color-percent--30to40 )}.displays-percentage-colors[style*="--percentage: 40%"]{--circular-progress-fill-color:var( --color-percent--40to50 )}.displays-percentage-colors[style*="--percentage: 41%"]{--circular-progress-fill-color:var( --color-percent--40to50 )}.displays-percentage-colors[style*="--percentage: 42%"]{--circular-progress-fill-color:var( --color-percent--40to50 )}.displays-percentage-colors[style*="--percentage: 43%"]{--circular-progress-fill-color:var( --color-percent--40to50 )}.displays-percentage-colors[style*="--percentage: 44%"]{--circular-progress-fill-color:var( --color-percent--40to50 )}.displays-percentage-colors[style*="--percentage: 45%"]{--circular-progress-fill-color:var( --color-percent--40to50 )}.displays-percentage-colors[style*="--percentage: 46%"]{--circular-progress-fill-color:var( --color-percent--40to50 )}.displays-percentage-colors[style*="--percentage: 47%"]{--circular-progress-fill-color:var( --color-percent--40to50 )}.displays-percentage-colors[style*="--percentage: 48%"]{--circular-progress-fill-color:var( --color-percent--40to50 )}.displays-percentage-colors[style*="--percentage: 49%"]{--circular-progress-fill-color:var( --color-percent--40to50 )}.displays-percentage-colors[style*="--percentage: 50%"]{--circular-progress-fill-color:var( --color-percent--50to60 )}.displays-percentage-colors[style*="--percentage: 51%"]{--circular-progress-fill-color:var( --color-percent--50to60 )}.displays-percentage-colors[style*="--percentage: 52%"]{--circular-progress-fill-color:var( --color-percent--50to60 )}.displays-percentage-colors[style*="--percentage: 53%"]{--circular-progress-fill-color:var( --color-percent--50to60 )}.displays-percentage-colors[style*="--percentage: 54%"]{--circular-progress-fill-color:var( --color-percent--50to60 )}.displays-percentage-colors[style*="--percentage: 55%"]{--circular-progress-fill-color:var( --color-percent--50to60 )}.displays-percentage-colors[style*="--percentage: 56%"]{--circular-progress-fill-color:var( --color-percent--50to60 )}.displays-percentage-colors[style*="--percentage: 57%"]{--circular-progress-fill-color:var( --color-percent--50to60 )}.displays-percentage-colors[style*="--percentage: 58%"]{--circular-progress-fill-color:var( --color-percent--50to60 )}.displays-percentage-colors[style*="--percentage: 59%"]{--circular-progress-fill-color:var( --color-percent--50to60 )}.displays-percentage-colors[style*="--percentage: 60%"]{--circular-progress-fill-color:var( --color-percent--60to70 )}.displays-percentage-colors[style*="--percentage: 61%"]{--circular-progress-fill-color:var( --color-percent--60to70 )}.displays-percentage-colors[style*="--percentage: 62%"]{--circular-progress-fill-color:var( --color-percent--60to70 )}.displays-percentage-colors[style*="--percentage: 63%"]{--circular-progress-fill-color:var( --color-percent--60to70 )}.displays-percentage-colors[style*="--percentage: 64%"]{--circular-progress-fill-color:var( --color-percent--60to70 )}.displays-percentage-colors[style*="--percentage: 65%"]{--circular-progress-fill-color:var( --color-percent--60to70 )}.displays-percentage-colors[style*="--percentage: 66%"]{--circular-progress-fill-color:var( --color-percent--60to70 )}.displays-percentage-colors[style*="--percentage: 67%"]{--circular-progress-fill-color:var( --color-percent--60to70 )}.displays-percentage-colors[style*="--percentage: 68%"]{--circular-progress-fill-color:var( --color-percent--60to70 )}.displays-percentage-colors[style*="--percentage: 69%"]{--circular-progress-fill-color:var( --color-percent--60to70 )}.displays-percentage-colors[style*="--percentage: 70%"]{--circular-progress-fill-color:var( --color-percent--70to80 )}.displays-percentage-colors[style*="--percentage: 71%"]{--circular-progress-fill-color:var( --color-percent--70to80 )}.displays-percentage-colors[style*="--percentage: 72%"]{--circular-progress-fill-color:var( --color-percent--70to80 )}.displays-percentage-colors[style*="--percentage: 73%"]{--circular-progress-fill-color:var( --color-percent--70to80 )}.displays-percentage-colors[style*="--percentage: 74%"]{--circular-progress-fill-color:var( --color-percent--70to80 )}.displays-percentage-colors[style*="--percentage: 75%"]{--circular-progress-fill-color:var( --color-percent--70to80 )}.displays-percentage-colors[style*="--percentage: 76%"]{--circular-progress-fill-color:var( --color-percent--70to80 )}.displays-percentage-colors[style*="--percentage: 77%"]{--circular-progress-fill-color:var( --color-percent--70to80 )}.displays-percentage-colors[style*="--percentage: 78%"]{--circular-progress-fill-color:var( --color-percent--70to80 )}.displays-percentage-colors[style*="--percentage: 79%"]{--circular-progress-fill-color:var( --color-percent--70to80 )}.displays-percentage-colors[style*="--percentage: 80%"]{--circular-progress-fill-color:var( --color-percent--80to90 )}.displays-percentage-colors[style*="--percentage: 81%"]{--circular-progress-fill-color:var( --color-percent--80to90 )}.displays-percentage-colors[style*="--percentage: 82%"]{--circular-progress-fill-color:var( --color-percent--80to90 )}.displays-percentage-colors[style*="--percentage: 83%"]{--circular-progress-fill-color:var( --color-percent--80to90 )}.displays-percentage-colors[style*="--percentage: 84%"]{--circular-progress-fill-color:var( --color-percent--80to90 )}.displays-percentage-colors[style*="--percentage: 85%"]{--circular-progress-fill-color:var( --color-percent--80to90 )}.displays-percentage-colors[style*="--percentage: 86%"]{--circular-progress-fill-color:var( --color-percent--80to90 )}.displays-percentage-colors[style*="--percentage: 87%"]{--circular-progress-fill-color:var( --color-percent--80to90 )}.displays-percentage-colors[style*="--percentage: 88%"]{--circular-progress-fill-color:var( --color-percent--80to90 )}.displays-percentage-colors[style*="--percentage: 89%"]{--circular-progress-fill-color:var( --color-percent--80to90 )}.displays-percentage-colors[style*="--percentage: 90%"]{--circular-progress-fill-color:var( --color-percent--90to100 )}.displays-percentage-colors[style*="--percentage: 91%"]{--circular-progress-fill-color:var( --color-percent--90to100 )}.displays-percentage-colors[style*="--percentage: 92%"]{--circular-progress-fill-color:var( --color-percent--90to100 )}.displays-percentage-colors[style*="--percentage: 93%"]{--circular-progress-fill-color:var( --color-percent--90to100 )}.displays-percentage-colors[style*="--percentage: 94%"]{--circular-progress-fill-color:var( --color-percent--90to100 )}.displays-percentage-colors[style*="--percentage: 95%"]{--circular-progress-fill-color:var( --color-percent--90to100 )}.displays-percentage-colors[style*="--percentage: 96%"]{--circular-progress-fill-color:var( --color-percent--90to100 )}.displays-percentage-colors[style*="--percentage: 97%"]{--circular-progress-fill-color:var( --color-percent--90to100 )}.displays-percentage-colors[style*="--percentage: 98%"]{--circular-progress-fill-color:var( --color-percent--90to100 )}.displays-percentage-colors[style*="--percentage: 99%"]{--circular-progress-fill-color:var( --color-percent--90to100 )}.displays-percentage-colors[style*="--percentage: 100%"]{--circular-progress-fill-color:var( --color-percent--100to110 )}.displays-percentage-colors[style="--percentage: 100%;"]{--circular-progress-fill-color:var(--color-percent--100)}:host{display:block;box-sizing:border-box;isolation:isolate}:host([size=x-small]){--circular-progress-size:1.5rem;font-weight:bold}:host([size=x-small]) .value{letter-spacing:-0.0625rem}:host([size=small]){--circular-progress-size:2rem;font-weight:bold}:host([size=small]) .value{letter-spacing:-0.03125rem}:host([size=medium]){--circular-progress-size:3rem}:host([size=large]){--circular-progress-size:4rem}:host([size=x-large]){--circular-progress-size:5rem}.lime-circular-progress{--size:var(--circular-progress-size, 3rem);--fill-color:var( --circular-progress-fill-color, var(--lime-primary-color, var(--limel-theme-primary-color)) );--track-color:var( --circular-progress-track-color, rgb(var(--contrast-400)) );position:relative;display:flex;align-items:center;justify-content:center;width:var(--size);height:var(--size);border-radius:50%;line-height:normal;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.7);background:conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%)}.lime-circular-progress:before{content:"";position:absolute;width:calc(var(--size) * 0.75 + 0.25rem);height:calc(var(--size) * 0.75 + 0.25rem);border-radius:50%;background-color:var(--circular-progress-background-color, rgb(var(--contrast-100)));box-shadow:var(--button-shadow-pressed)}.prefix{font-size:clamp(0.5rem, var(--size) * 0.16, 2.25rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;color:var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));width:45%;top:20%;position:absolute}.value{display:flex;font-size:clamp(0.5rem, var(--size) * 0.25, 4rem);color:var(--circular-progress-text-color, rgb(var(--contrast-1200)));z-index:1;cursor:default}.suffix{font-size:clamp(0.5rem, var(--size) * 0.18, 2.5rem);color:var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));padding-top:4%}`;
const PERCENT = 100;
const CircularProgress = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/**
* The value of the progress bar.
*/
this.value = 0;
/**
* The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
*/
this.maxValue = PERCENT;
/**
* The prefix which is displayed before the `value`, must be a few characters characters long.
*/
this.prefix = null;
/**
* The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
*/
this.suffix = '%';
/**
* When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
*/
this.displayPercentageColors = false;
this.renderPrefix = () => {
if (this.prefix) {
return h("span", { class: "prefix" }, this.prefix);
}
};
}
render() {
const classList = {
'lime-circular-progress': true,
'displays-percentage-colors': this.displayPercentageColors,
};
const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
const value = Math.round(this.value * 10) / 10;
return (h("div", { key: 'b2de8450baa7722c2a362a41ea97de6b694bf6ba', role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), h("span", { key: 'e3fdb555dd58a1a18227659761e9ee9171050b79', class: "value" }, abbreviate(value), h("span", { key: 'a0d25b4e71beaf4993bb78e96eb2094020b5de52', class: "suffix" }, this.suffix))));
}
};
CircularProgress.style = circularProgressCss();
export { CircularProgress as limel_circular_progress };