@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

package/dist/collection/components/six-picto/six-picto.js

@@ -1,50 +1,53 @@
-import { Component, Host, h, Element, Prop } from '@stencil/core';
-/**
- * @since 1.1
- * @status stable
- *
- * @part icon - The component's icon wrapper.
- */
-export class SixPicto {
-  constructor() {
-    /**
-     * Defines the size of the icon.
-     */
-    this.size = 'medium';
-  }
-  render() {
-    var _a;
-    const iconName = (_a = this.host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
-    return (h(Host, null,
-      h("div", { part: "icon", class: { [`is-size-${this.size}`]: !!this.size, [`${iconName}`]: true } })));
-  }
-  static get is() { return "six-picto"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-picto.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-picto.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl'",
-        "resolved": "\"4xl\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the size of the icon."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}
+import { Host, h } from '@stencil/core';
+/**
+ * @since 1.1
+ * @status stable
+ *
+ * @part icon - The component's icon wrapper.
+ */
+export class SixPicto {
+  constructor() {
+    this.size = 'medium';
+  }
+  render() {
+    var _a;
+    const iconName = (_a = this.host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
+    return (h(Host, null, h("div", { part: "icon", class: { [`is-size-${this.size}`]: !!this.size, [`${iconName}`]: true } })));
+  }
+  static get is() { return "six-picto"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-picto.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-picto.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl'",
+          "resolved": "\"4xl\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the size of the icon."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=six-picto.js.map

package/dist/collection/components/six-picto/six-picto.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-picto.js","sourceRoot":"","sources":["../../../src/components/six-picto/six-picto.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;GAKG;AAOH,MAAM,OAAO,QAAQ;;gBAMiF,QAAQ;;EAE5G,MAAM;;IACJ,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,CAAC;IAC7C,OAAO,CACL,EAAC,IAAI;MACH,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,GAAI,CACvF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\n\n/**\n * @since 1.1\n * @status stable\n *\n * @part icon - The component's icon wrapper.\n */\n\n@Component({\n  tag: 'six-picto',\n  styleUrl: 'six-picto.scss',\n  shadow: true,\n})\nexport class SixPicto {\n  @Element() host: HTMLSixPictoElement;\n\n  /**\n   * Defines the size of the icon.\n   */\n  @Prop() size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl' = 'medium';\n\n  render() {\n    const iconName = this.host.innerHTML?.trim();\n    return (\n      <Host>\n        <div part=\"icon\" class={{ [`is-size-${this.size}`]: !!this.size, [`${iconName}`]: true }} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-progress-bar/six-progress-bar.js

@@ -1,77 +1,80 @@
-import { Component, h, Prop } from '@stencil/core';
-/**
- * @since 1.0
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot - A label to show inside the indicator.
- *
- * @part base - The component's base wrapper.
- * @part indicator - The progress bar indicator.
- * @part label - The progress bar label.
- */
-export class SixProgressBar {
-  constructor() {
-    /** The progress bar's percentage, 0 to 100. */
-    this.percentage = 0;
-    /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
-    this.indeterminate = false;
-  }
-  render() {
-    return (h("div", { part: "base", class: {
-        'progress-bar': true,
-        'progress-bar--indeterminate': this.indeterminate,
-      }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage },
-      h("div", { part: "indicator", class: "progress-bar__indicator", style: {
-          width: `${this.percentage}%`,
-        } }, !this.indeterminate && (h("span", { part: "label", class: "progress-bar__label" },
-        h("slot", null))))));
-  }
-  static get is() { return "six-progress-bar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-progress-bar.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-progress-bar.css"]
-  }; }
-  static get properties() { return {
-    "percentage": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The progress bar's percentage, 0 to 100."
-      },
-      "attribute": "percentage",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "indeterminate": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state."
-      },
-      "attribute": "indeterminate",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-}
+import { h } from '@stencil/core';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - A label to show inside the indicator.
+ *
+ * @part base - The component's base wrapper.
+ * @part indicator - The progress bar indicator.
+ * @part label - The progress bar label.
+ */
+export class SixProgressBar {
+  constructor() {
+    this.percentage = 0;
+    this.indeterminate = false;
+  }
+  render() {
+    return (h("div", { part: "base", class: {
+        'progress-bar': true,
+        'progress-bar--indeterminate': this.indeterminate,
+      }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { part: "indicator", class: "progress-bar__indicator", style: {
+        width: `${this.percentage}%`,
+      } }, !this.indeterminate && (h("span", { part: "label", class: "progress-bar__label" }, h("slot", null))))));
+  }
+  static get is() { return "six-progress-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-progress-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-progress-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "percentage": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The progress bar's percentage, 0 to 100."
+        },
+        "attribute": "percentage",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state."
+        },
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}
+//# sourceMappingURL=six-progress-bar.js.map

package/dist/collection/components/six-progress-bar/six-progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-progress-bar.js","sourceRoot":"","sources":["../../../src/components/six-progress-bar/six-progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;;GAWG;AAOH,MAAM,OAAO,cAAc;;sBAEJ,CAAC;yBAGE,KAAK;;EAE7B,MAAM;IACJ,OAAO,CACL,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;OAClD,EACD,IAAI,EAAC,aAAa,mBACJ,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;MAE1D,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;UACL,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG;SAC7B,IAEA,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;QAC5C,eAAQ,CACH,CACR,CACG,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'six-progress-bar',\n  styleUrl: 'six-progress-bar.scss',\n  shadow: true,\n})\nexport class SixProgressBar {\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() percentage = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.percentage}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: `${this.percentage}%`,\n          }}\n        >\n          {!this.indeterminate && (\n            <span part=\"label\" class=\"progress-bar__label\">\n              <slot />\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-progress-ring/six-progress-ring.js

@@ -1,111 +1,114 @@
-import { Component, h, Prop, Watch } from '@stencil/core';
-/**
- * @since 1.0
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot - A label to show inside the ring.
- *
- * @part base - The component's base wrapper.
- * @part label - The progress ring label.
- */
-export class SixProgressRing {
-  constructor() {
-    /** The size of the progress ring in pixels. */
-    this.size = 128;
-    /** The stroke width of the progress ring in pixels. */
-    this.strokeWidth = 4;
-  }
-  handlePercentageChange() {
-    this.updateProgress();
-  }
-  componentDidLoad() {
-    this.updateProgress();
-  }
-  updateProgress() {
-    if (!this.indicator.r) {
-      return;
-    }
-    const radius = this.indicator.r.baseVal.value;
-    const circumference = radius * 2 * Math.PI;
-    const offset = circumference - (this.percentage / 100) * circumference;
-    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;
-    this.indicator.style.strokeDashoffset = `${offset}`;
-  }
-  render() {
-    return (h("div", { part: "base", class: "progress-ring" },
-      h("svg", { class: "progress-ring__image", width: this.size, height: this.size },
-        h("circle", { class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }),
-        h("circle", { ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })),
-      h("span", { part: "label", class: "progress-ring__label" },
-        h("slot", null))));
-  }
-  static get is() { return "six-progress-ring"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-progress-ring.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-progress-ring.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the progress ring in pixels."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "128"
-    },
-    "strokeWidth": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The stroke width of the progress ring in pixels."
-      },
-      "attribute": "stroke-width",
-      "reflect": false,
-      "defaultValue": "4"
-    },
-    "percentage": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The current progress percentage, 0 - 100."
-      },
-      "attribute": "percentage",
-      "reflect": false
-    }
-  }; }
-  static get watchers() { return [{
-      "propName": "percentage",
-      "methodName": "handlePercentageChange"
-    }]; }
-}
+import { h } from '@stencil/core';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - A label to show inside the ring.
+ *
+ * @part base - The component's base wrapper.
+ * @part label - The progress ring label.
+ */
+export class SixProgressRing {
+  constructor() {
+    this.size = 128;
+    this.strokeWidth = 4;
+    this.percentage = undefined;
+  }
+  handlePercentageChange() {
+    this.updateProgress();
+  }
+  componentDidLoad() {
+    this.updateProgress();
+  }
+  updateProgress() {
+    if (!this.indicator.r) {
+      return;
+    }
+    const radius = this.indicator.r.baseVal.value;
+    const circumference = radius * 2 * Math.PI;
+    const offset = circumference - (this.percentage / 100) * circumference;
+    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;
+    this.indicator.style.strokeDashoffset = `${offset}`;
+  }
+  render() {
+    return (h("div", { part: "base", class: "progress-ring" }, h("svg", { class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { class: "progress-ring__track", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 }), h("circle", { ref: (el) => (this.indicator = el), class: "progress-ring__indicator", "stroke-width": this.strokeWidth, "stroke-linecap": "round", fill: "transparent", r: this.size / 2 - this.strokeWidth * 2, cx: this.size / 2, cy: this.size / 2 })), h("span", { part: "label", class: "progress-ring__label" }, h("slot", null))));
+  }
+  static get is() { return "six-progress-ring"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-progress-ring.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-progress-ring.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the progress ring in pixels."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "128"
+      },
+      "strokeWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The stroke width of the progress ring in pixels."
+        },
+        "attribute": "stroke-width",
+        "reflect": false,
+        "defaultValue": "4"
+      },
+      "percentage": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The current progress percentage, 0 - 100."
+        },
+        "attribute": "percentage",
+        "reflect": false
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "percentage",
+        "methodName": "handlePercentageChange"
+      }];
+  }
+}
+//# sourceMappingURL=six-progress-ring.js.map

package/dist/collection/components/six-progress-ring/six-progress-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-progress-ring.js","sourceRoot":"","sources":["../../../src/components/six-progress-ring/six-progress-ring.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;;;;;;;GAUG;AAOH,MAAM,OAAO,eAAe;;gBAIX,GAAG;uBAGI,CAAC;;;EAMvB,sBAAsB;IACpB,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAED,cAAc;IACZ,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE;MACrB,OAAO;KACR;IACD,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;IAC9C,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;IAC3C,MAAM,MAAM,GAAG,aAAa,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;IAEvE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,aAAa,IAAI,aAAa,EAAE,CAAC;IAC3E,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,MAAM,EAAE,CAAC;EACtD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;MACpC,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI;QACnE,cACE,KAAK,EAAC,sBAAsB,kBACd,IAAI,CAAC,WAAW,oBACf,OAAO,EACtB,IAAI,EAAC,aAAa,EAClB,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,EACvC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GACjB;QAEF,cACE,GAAG,EAAE,CAAC,EAAoB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EACpD,KAAK,EAAC,0BAA0B,kBAClB,IAAI,CAAC,WAAW,oBACf,OAAO,EACtB,IAAI,EAAC,aAAa,EAClB,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,EACvC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GACjB,CACE;MAEN,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB;QAC7C,eAAQ,CACH,CACH,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - A label to show inside the ring.\n *\n * @part base - The component's base wrapper.\n * @part label - The progress ring label.\n */\n\n@Component({\n  tag: 'six-progress-ring',\n  styleUrl: 'six-progress-ring.scss',\n  shadow: true,\n})\nexport class SixProgressRing {\n  indicator: SVGCircleElement;\n\n  /** The size of the progress ring in pixels. */\n  @Prop() size = 128;\n\n  /** The stroke width of the progress ring in pixels. */\n  @Prop() strokeWidth = 4;\n\n  /** The current progress percentage, 0 - 100. */\n  @Prop() percentage: number;\n\n  @Watch('percentage')\n  handlePercentageChange() {\n    this.updateProgress();\n  }\n\n  componentDidLoad() {\n    this.updateProgress();\n  }\n\n  updateProgress() {\n    if (!this.indicator.r) {\n      return;\n    }\n    const radius = this.indicator.r.baseVal.value;\n    const circumference = radius * 2 * Math.PI;\n    const offset = circumference - (this.percentage / 100) * circumference;\n\n    this.indicator.style.strokeDasharray = `${circumference} ${circumference}`;\n    this.indicator.style.strokeDashoffset = `${offset}`;\n  }\n\n  render() {\n    return (\n      <div part=\"base\" class=\"progress-ring\">\n        <svg class=\"progress-ring__image\" width={this.size} height={this.size}>\n          <circle\n            class=\"progress-ring__track\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n\n          <circle\n            ref={(el: SVGCircleElement) => (this.indicator = el)}\n            class=\"progress-ring__indicator\"\n            stroke-width={this.strokeWidth}\n            stroke-linecap=\"round\"\n            fill=\"transparent\"\n            r={this.size / 2 - this.strokeWidth * 2}\n            cx={this.size / 2}\n            cy={this.size / 2}\n          />\n        </svg>\n\n        <span part=\"label\" class=\"progress-ring__label\">\n          <slot />\n        </span>\n      </div>\n    );\n  }\n}\n"]}