@limetech/lime-elements 36.1.0-next.13 → 36.1.0-next.15

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

@@ -63,7 +63,9 @@
 /**
  * @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-text-color: Determines the color of the circular value and suffix. Defaults to `--contrast-1200`.
  * @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;
@@ -105,7 +107,7 @@
   width: var(--size);
   height: var(--size);
   border-radius: 50%;
-  box-shadow: 0 0 0 0.125rem rgba(var(--contrast-100), 0.8);
+  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,13 +116,13 @@
   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);
 }
 
 .value {
   font-size: calc(var(--size) * 0.25);
-  color: rgb(var(--contrast-1200));
+  color: var(--circular-progress-text-color, rgb(var(--contrast-1200)));
   z-index: 1;
   cursor: default;
 }

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,11 @@ const PERCENT = 100;
  */
 export class CircularProgress {
   constructor() {
-    /**
-     * 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 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.size = undefined;
   }
   render() {
     const classList = {
@@ -51,113 +40,116 @@ 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 } }, 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`."
-      },
-      "attribute": "max-value",
-      "reflect": false,
-      "defaultValue": "PERCENT"
-    },
-    "suffix": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`"
+      "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"
       },
-      "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
+      }
+    };
+  }
 }