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

package/dist/collection/components/circular-progress/circular-progress.css

@@ -63,11 +63,16 @@
 /**
  * @prop --circular-progress-size: Determines the visual size of the visualization. This does not override the `size` property if it is specified.
  * @prop --circular-progress-track-color: Determines the color of the circular track. Defaults to `--contrast-400`.
+ * @prop --circular-progress-suffix-color: Determines the color of the prefix. Defaults to `--contrast-1000`.
+ * @prop --circular-progress-text-color: Determines the color of the value. Defaults to `--contrast-1200`.
+ * @prop --circular-progress-prefix-color: Determines the color of the suffix. Defaults to `--contrast-1000`.
  * @prop --circular-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.
+ * @prop --circular-progress-background-color: Determines the background color of the central section. Defaults to `--contrast-100`.
  */
 :host {
   display: block;
   box-sizing: border-box;
+  isolation: isolate;
 }
 
 :host([size=x-small]) {
@@ -99,13 +104,15 @@
       --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%;
-  box-shadow: 0 0 0 0.125rem rgba(var(--contrast-100), 0.8);
+  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 {
@@ -114,19 +121,34 @@
   width: calc(var(--size) * 0.75 + 0.25rem);
   height: calc(var(--size) * 0.75 + 0.25rem);
   border-radius: 50%;
-  background-color: rgb(var(--contrast-100));
+  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 {
-  font-size: calc(var(--size) * 0.25);
-  color: rgb(var(--contrast-1200));
+  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 {
-  opacity: 0.7;
+  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"] {

package/dist/collection/components/circular-progress/circular-progress.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 import { abbreviate } from '../badge/format';
 const PERCENT = 100;
 /**
@@ -27,22 +27,17 @@ const PERCENT = 100;
  */
 export class CircularProgress {
   constructor() {
-    /**
-     * The value of the progress bar.
-     */
+    this.renderPrefix = () => {
+      if (this.prefix) {
+        return h("span", { class: "prefix" }, this.prefix);
+      }
+    };
     this.value = 0;
-    /**
-     * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
-     */
     this.maxValue = PERCENT;
-    /**
-     * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
-     */
+    this.prefix = null;
     this.suffix = '%';
-    /**
-     * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
-     */
     this.displayPercentageColors = false;
+    this.size = undefined;
   }
   render() {
     const classList = {
@@ -51,113 +46,134 @@ export class CircularProgress {
     };
     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 } },
-      h("span", { class: "value" },
-        abbreviate(value),
-        h("span", { class: "suffix" }, this.suffix))));
+    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))));
   }
   static get is() { return "limel-circular-progress"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["circular-progress.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["circular-progress.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the progress bar."
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "maxValue": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The maximum value within the scale that the progress bar should visualize. Defaults to `100`."
+  static get originalStyleUrls() {
+    return {
+      "$": ["circular-progress.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["circular-progress.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the progress bar."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "max-value",
-      "reflect": false,
-      "defaultValue": "PERCENT"
-    },
-    "suffix": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "maxValue": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The maximum value within the scale that the progress bar should visualize. Defaults to `100`."
+        },
+        "attribute": "max-value",
+        "reflect": false,
+        "defaultValue": "PERCENT"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`"
+      "prefix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The prefix which is displayed before the `value`, must be a few characters characters long."
+        },
+        "attribute": "prefix",
+        "reflect": true,
+        "defaultValue": "null"
       },
-      "attribute": "suffix",
-      "reflect": false,
-      "defaultValue": "'%'"
-    },
-    "displayPercentageColors": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "suffix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`"
+        },
+        "attribute": "suffix",
+        "reflect": false,
+        "defaultValue": "'%'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%."
+      "displayPercentageColors": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%."
+        },
+        "attribute": "display-percentage-colors",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "display-percentage-colors",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CircularProgressSize",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
-        "references": {
-          "CircularProgressSize": {
-            "location": "import",
-            "path": "./circular-progress.types"
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CircularProgressSize",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+          "references": {
+            "CircularProgressSize": {
+              "location": "import",
+              "path": "./circular-progress.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified."
-      },
-      "attribute": "size",
-      "reflect": true
-    }
-  }; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified."
+        },
+        "attribute": "size",
+        "reflect": true
+      }
+    };
+  }
 }