@limetech/lime-elements 36.1.0-next.8 → 36.1.0

package/dist/esm/{limel-linear-progress.entry.js → limel-circular-progress_2.entry.js}

@@ -1,6 +1,38 @@
-import { r as registerInstance, h, g as getElement } from './index-11cd0b60.js';
+import { r as registerInstance, h, g as getElement } from './index-cdfd351d.js';
+import { a as abbreviate } from './format-a0e2d949.js';
 import { M as MDCFoundation, a as MDCComponent } from './component-410aad5a.js';
 import { g as getCorrectPropertyName } from './util-f1bde91c.js';
+import './_commonjsHelpers-5ec8f9b7.js';
+
+const circularProgressCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      var(--lime-text-primary-on-background-color)\n  )}:host{display:block;box-sizing:border-box;isolation:isolate}:host([size=x-small]){--circular-progress-size:1.5rem;font-weight:bold}:host([size=small]){--circular-progress-size:2rem;font-weight:bold}: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(--mdc-theme-primary));--track-color:var(\n      --circular-progress-track-color,\n      rgb(var(--contrast-400))\n  );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%}.displays-percentage-colors[style^=\"--percentage:1\"]{--circular-progress-fill-color:var(--color-percent--10to20)}.displays-percentage-colors[style^=\"--percentage:2\"]{--circular-progress-fill-color:var(--color-percent--20to30)}.displays-percentage-colors[style^=\"--percentage:3\"]{--circular-progress-fill-color:var(--color-percent--30to40)}.displays-percentage-colors[style^=\"--percentage:4\"]{--circular-progress-fill-color:var(--color-percent--40to50)}.displays-percentage-colors[style^=\"--percentage:5\"]{--circular-progress-fill-color:var(--color-percent--50to60)}.displays-percentage-colors[style^=\"--percentage:6\"]{--circular-progress-fill-color:var(--color-percent--60to70)}.displays-percentage-colors[style^=\"--percentage:7\"]{--circular-progress-fill-color:var(--color-percent--70to80)}.displays-percentage-colors[style^=\"--percentage:8\"]{--circular-progress-fill-color:var(--color-percent--80to90)}.displays-percentage-colors[style^=\"--percentage:9\"],.displays-percentage-colors[style=\"--percentage:100%;\"]{--circular-progress-fill-color:var(--color-percent--90to100)}.displays-percentage-colors[style=\"--percentage:1%;\"],.displays-percentage-colors[style=\"--percentage:2%;\"],.displays-percentage-colors[style=\"--percentage:3%;\"],.displays-percentage-colors[style=\"--percentage:4%;\"],.displays-percentage-colors[style=\"--percentage:5%;\"],.displays-percentage-colors[style=\"--percentage:6%;\"],.displays-percentage-colors[style=\"--percentage:7%;\"],.displays-percentage-colors[style=\"--percentage:8%;\"],.displays-percentage-colors[style=\"--percentage:9%;\"]{--circular-progress-fill-color:var(--color-percent--0to10)}";
+
+const PERCENT = 100;
+const CircularProgress = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.renderPrefix = () => {
+      if (this.prefix) {
+        return h("span", { class: "prefix" }, this.prefix);
+      }
+    };
+    this.value = 0;
+    this.maxValue = PERCENT;
+    this.prefix = null;
+    this.suffix = '%';
+    this.displayPercentageColors = false;
+    this.size = undefined;
+  }
+  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; // eslint-disable-line no-magic-numbers
+    return (h("div", { role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), h("span", { class: "value" }, abbreviate(value), h("span", { class: "suffix" }, this.suffix))));
+  }
+};
+CircularProgress.style = circularProgressCss;
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -428,13 +460,7 @@ const linearProgressCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-
 const LinearProgress = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * The value of the progress bar. Should be between `0` and `1`.
-     */
     this.value = 0;
-    /**
-     * Puts the progress bar in an indeterminate state
-     */
     this.indeterminate = false;
   }
   connectedCallback() {
@@ -476,4 +502,4 @@ const LinearProgress = class {
 };
 LinearProgress.style = linearProgressCss;
 
-export { LinearProgress as limel_linear_progress };
+export { CircularProgress as limel_circular_progress, LinearProgress as limel_linear_progress };