@six-group/ui-library 0.0.0-insider.a8d68c7 → 0.0.0-insider.a9875a1

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

@@ -0,0 +1,33 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixPicto } from "../six-picto";
+describe('six-picto', () => {
+    it('renders correct pictogram', async () => {
+        const page = await newSpecPage({
+            components: [SixPicto],
+            html: `<six-picto>copy</six-picto>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-picto>
+        <mock:shadow-root>
+          <div class="copy is-size-medium" part="icon"></div>
+        </mock:shadow-root>
+        copy
+      </six-picto>
+    `);
+    });
+    it('renders picto in correct size', async () => {
+        const page = await newSpecPage({
+            components: [SixPicto],
+            html: `<six-picto size="xxLarge">search</six-picto>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-picto size="xxLarge">
+        <mock:shadow-root>
+          <div class="is-size-xxLarge search" part="icon"></div>
+        </mock:shadow-root>
+        search
+      </six-picto>
+    `);
+    });
+});
+//# sourceMappingURL=six-picto.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-picto.spec.js","sourceRoot":"","sources":["../../../../src/components/six-picto/test/six-picto.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,6BAA6B;SACpC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,8CAA8C;SACrD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;KAO7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixPicto } from '../six-picto';\n\ndescribe('six-picto', () => {\n  it('renders correct pictogram', async () => {\n    const page = await newSpecPage({\n      components: [SixPicto],\n      html: `<six-picto>copy</six-picto>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-picto>\n        <mock:shadow-root>\n          <div class=\"copy is-size-medium\" part=\"icon\"></div>\n        </mock:shadow-root>\n        copy\n      </six-picto>\n    `);\n  });\n\n  it('renders picto in correct size', async () => {\n    const page = await newSpecPage({\n      components: [SixPicto],\n      html: `<six-picto size=\"xxLarge\">search</six-picto>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-picto size=\"xxLarge\">\n        <mock:shadow-root>\n          <div class=\"is-size-xxLarge search\" part=\"icon\"></div>\n        </mock:shadow-root>\n        search\n      </six-picto>\n    `);\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable
@@ -12,69 +12,69 @@ import { h } from '@stencil/core';
  * @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"
-      }
-    };
-  }
+    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

@@ -1 +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"]}
+{"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;;0BAEJ,CAAC;6BAGE,KAAK;;IAE7B,MAAM;QACJ,OAAO,CACL,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;aAClD,EACD,IAAI,EAAC,aAAa,mBACJ,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;YAE1D,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;oBACL,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG;iBAC7B,IAEA,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;gBAC5C,eAAQ,CACH,CACR,CACG,CACF,CACP,CAAC;IACJ,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-bar/test/six-progress-bar.spec.js

@@ -0,0 +1,24 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixProgressBar } from "../six-progress-bar";
+describe('six-progress-bar', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixProgressBar],
+            html: `<six-progress-bar percentage="50"></six-progress-bar>`,
+        });
+        expect(page.root).toEqualHtml(`
+       <six-progress-bar percentage="50">
+         <mock:shadow-root>
+           <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar" part="base" role="progressbar">
+             <div class="progress-bar__indicator" part="indicator" style="width: 50%;">
+               <span class="progress-bar__label" part="label">
+                 <slot></slot>
+               </span>
+             </div>
+           </div>
+         </mock:shadow-root>
+       </six-progress-bar>
+    `);
+    });
+});
+//# sourceMappingURL=six-progress-bar.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-progress-bar.spec.js","sourceRoot":"","sources":["../../../../src/components/six-progress-bar/test/six-progress-bar.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,uDAAuD;SAC9D,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixProgressBar } from '../six-progress-bar';\n\ndescribe('six-progress-bar', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixProgressBar],\n      html: `<six-progress-bar percentage=\"50\"></six-progress-bar>`,\n    });\n    expect(page.root).toEqualHtml(`\n       <six-progress-bar percentage=\"50\">\n         <mock:shadow-root>\n           <div aria-valuemax=\"100\" aria-valuemin=\"0\" aria-valuenow=\"50\" class=\"progress-bar\" part=\"base\" role=\"progressbar\">\n             <div class=\"progress-bar__indicator\" part=\"indicator\" style=\"width: 50%;\">\n               <span class=\"progress-bar__label\" part=\"label\">\n                 <slot></slot>\n               </span>\n             </div>\n           </div>\n         </mock:shadow-root>\n       </six-progress-bar>\n    `);\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 1.0
  * @status stable
@@ -11,105 +11,105 @@ import { h } from '@stencil/core';
  * @part label - The progress ring label.
  */
 export class SixProgressRing {
-  constructor() {
-    this.size = 128;
-    this.strokeWidth = 4;
-    this.percentage = 0;
-  }
-  handlePercentageChange() {
-    this.updateProgress();
-  }
-  componentDidLoad() {
-    this.updateProgress();
-  }
-  updateProgress() {
-    var _a;
-    if (((_a = this.indicator) === null || _a === void 0 ? void 0 : _a.r) == null)
-      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,
-        "defaultValue": "0"
-      }
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "percentage",
-        "methodName": "handlePercentageChange"
-      }];
-  }
+    constructor() {
+        this.size = 128;
+        this.strokeWidth = 4;
+        this.percentage = 0;
+    }
+    handlePercentageChange() {
+        this.updateProgress();
+    }
+    componentDidLoad() {
+        this.updateProgress();
+    }
+    updateProgress() {
+        var _a;
+        if (((_a = this.indicator) === null || _a === void 0 ? void 0 : _a.r) == null)
+            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,
+                "defaultValue": "0"
+            }
+        };
+    }
+    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

@@ -1 +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;sBAGF,CAAC;;EAGtB,sBAAsB;IACpB,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAEO,cAAc;;IACpB,IAAI,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,CAAC,KAAI,IAAI;MAAE,OAAO;IAEtC,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,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,EACtD,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  private 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 = 0;\n\n  @Watch('percentage')\n  handlePercentageChange() {\n    this.updateProgress();\n  }\n\n  componentDidLoad() {\n    this.updateProgress();\n  }\n\n  private updateProgress() {\n    if (this.indicator?.r == null) 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) => (this.indicator = el as SVGCircleElement)}\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"]}
+{"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;;oBAIX,GAAG;2BAGI,CAAC;0BAGF,CAAC;;IAGtB,sBAAsB;QACpB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,cAAc;;QACpB,IAAI,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,CAAC,KAAI,IAAI;YAAE,OAAO;QAEtC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC;QAC9C,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC;QAC3C,MAAM,MAAM,GAAG,aAAa,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC;QAEvE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,aAAa,IAAI,aAAa,EAAE,CAAC;QAC3E,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,MAAM,EAAE,CAAC;IACtD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;YACpC,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI;gBACnE,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;gBAEF,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAsB,CAAC,EACtD,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;YAEN,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB;gBAC7C,eAAQ,CACH,CACH,CACP,CAAC;IACJ,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  private 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 = 0;\n\n  @Watch('percentage')\n  handlePercentageChange() {\n    this.updateProgress();\n  }\n\n  componentDidLoad() {\n    this.updateProgress();\n  }\n\n  private updateProgress() {\n    if (this.indicator?.r == null) 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) => (this.indicator = el as SVGCircleElement)}\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"]}

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

@@ -0,0 +1,26 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixProgressRing } from "../six-progress-ring";
+describe('six-progress-ring', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixProgressRing],
+            html: `<six-progress-ring></six-progress-ring>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-progress-ring>
+        <mock:shadow-root>
+         <div class="progress-ring" part="base">
+          <svg class="progress-ring__image" height="128" width="128">
+           <circle class="progress-ring__track" cx="64" cy="64" fill="transparent" r="56" stroke-linecap="round" stroke-width="4"></circle>
+           <circle class="progress-ring__indicator" cx="64" cy="64" fill="transparent" r="56" stroke-linecap="round" stroke-width="4"></circle>
+          </svg>
+          <span class="progress-ring__label" part="label">
+           <slot></slot>
+          </span>
+         </div>
+        </mock:shadow-root>
+      </six-progress-ring>
+    `);
+    });
+});
+//# sourceMappingURL=six-progress-ring.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-progress-ring.spec.js","sourceRoot":"","sources":["../../../../src/components/six-progress-ring/test/six-progress-ring.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yCAAyC;SAChD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;KAc7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixProgressRing } from '../six-progress-ring';\n\ndescribe('six-progress-ring', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixProgressRing],\n      html: `<six-progress-ring></six-progress-ring>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-progress-ring>\n        <mock:shadow-root>\n         <div class=\"progress-ring\" part=\"base\">\n          <svg class=\"progress-ring__image\" height=\"128\" width=\"128\">\n           <circle class=\"progress-ring__track\" cx=\"64\" cy=\"64\" fill=\"transparent\" r=\"56\" stroke-linecap=\"round\" stroke-width=\"4\"></circle>\n           <circle class=\"progress-ring__indicator\" cx=\"64\" cy=\"64\" fill=\"transparent\" r=\"56\" stroke-linecap=\"round\" stroke-width=\"4\"></circle>\n          </svg>\n          <span class=\"progress-ring__label\" part=\"label\">\n           <slot></slot>\n          </span>\n         </div>\n        </mock:shadow-root>\n      </six-progress-ring>\n    `);\n  });\n});\n"]}