npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.931e1d7 → 0.0.0-insider.98c4058 - Mend

@six-group/ui-library 0.0.0-insider.931e1d7 → 0.0.0-insider.98c4058

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1586) hide show

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

	@@ -1 +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~~;;0BAEJ~~,CAAC;~~6BAGE~~,KAAK~~;;IAE7B~~,MAAM;QACJ,OAAO,CACL,4DACE,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,4DACE,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,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;gBAC5C,8DAAQ,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"]}
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;IAL3B;QAME,+CAA+C;QACvC,eAAU,GAAG,CAAC,CAAC;QAEvB,sHAAsH;QAC9G,kBAAa,GAAG,KAAK,CAAC;KA+B/B;IA7BC,MAAM;QACJ,OAAO,CACL,4DACE,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,4DACE,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,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;gBAC5C,8DAAQ,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-ring/six-progress-ring.js CHANGED Viewed

@@ -12,8 +12,11 @@ import { h } from "@stencil/core";
  */
 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;
+        /** The current progress percentage, 0 - 100. */
         this.percentage = 0;
     }
     handlePercentageChange() {
@@ -33,7 +36,7 @@ export class SixProgressRing {
         this.indicator.style.strokeDashoffset = `${offset}`;
     }
     render() {
-        return (h("div", { key: '585f31918309719acad14e1b01121be9a8c1cd89', part: "base", class: "progress-ring" }, h("svg", { key: '5c039de9145c4c43f52e2787d39aaf3710c30f76', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '8b8ae8deb553e5e34a916fedfd7b5378ab47de9f', 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", { key: 'aab242e5b4797bdbcf75146e55a73f080d8742c1', 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", { key: 'dea1cbc19b910dd1d07a10a56ae6b1700b0d5113', part: "label", class: "progress-ring__label" }, h("slot", { key: 'a00bf6f710f3e65dfc1bc645a808aba2fabe0d40' }))));
+        return (h("div", { key: 'c8c3514a26d4150765130fda6bda5460fb434d79', part: "base", class: "progress-ring" }, h("svg", { key: 'a964fd75f7bddf4698c6b5b7d4db9f944965d767', class: "progress-ring__image", width: this.size, height: this.size }, h("circle", { key: '678441aa31d06a0342bbf001d09be5689ca4365f', 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", { key: '830f220dfacbbde4f96ae082db78d26f020be862', 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", { key: '98eaffcfda3cbd8edb7764eeced3ed71a7996da7', part: "label", class: "progress-ring__label" }, h("slot", { key: 'c1af327a0b559f6269ac4943050740fd078ec14c' }))));
     }
     static get is() { return "six-progress-ring"; }
     static get encapsulation() { return "shadow"; }
@@ -63,6 +66,8 @@ export class SixProgressRing {
                     "tags": [],
                     "text": "The size of the progress ring in pixels."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "128"
@@ -81,6 +86,8 @@ export class SixProgressRing {
                     "tags": [],
                     "text": "The stroke width of the progress ring in pixels."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "stroke-width",
                 "reflect": false,
                 "defaultValue": "4"
@@ -99,6 +106,8 @@ export class SixProgressRing {
                     "tags": [],
                     "text": "The current progress percentage, 0 - 100."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "percentage",
                 "reflect": false,
                 "defaultValue": "0"

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

	@@ -1 +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~~;;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,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;YACpC,4DAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI;gBACnE,+DACE,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,+DACE,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,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB;gBAC7C,8DAAQ,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"]}
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;IAL5B;QAQE,+CAA+C;QACvC,SAAI,GAAG,GAAG,CAAC;QAEnB,uDAAuD;QAC/C,gBAAW,GAAG,CAAC,CAAC;QAExB,gDAAgD;QACxC,eAAU,GAAG,CAAC,CAAC;KAsDxB;IAnDC,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,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;YACpC,4DAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI;gBACnE,+DACE,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,+DACE,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,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB;gBAC7C,8DAAQ,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-radio/six-radio.js CHANGED Viewed

@@ -19,6 +19,17 @@ export class SixRadio {
         this.inputId = `radio-${++id}`;
         this.labelId = `radio-label-${id}`;
         this.eventListeners = new EventListeners();
+        this.hasFocus = false;
+        /** The radio's name attribute. */
+        this.name = '';
+        /** The radio's value attribute. */
+        this.value = 'on';
+        /** Set to true to disable the radio. */
+        this.disabled = false;
+        /** Set to true to draw the radio in a checked state. */
+        this.checked = false;
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
         this.handleClick = () => {
             if (this.nativeInput != null) {
                 this.checked = this.nativeInput.checked;
@@ -55,12 +66,6 @@ export class SixRadio {
             event.preventDefault();
             (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
         };
-        this.hasFocus = false;
-        this.name = '';
-        this.value = 'on';
-        this.disabled = false;
-        this.checked = false;
-        this.invalid = false;
     }
     handleCheckedChange() {
         if (this.checked) {
@@ -103,12 +108,12 @@ export class SixRadio {
         return this.getAllRadios().filter((radio) => radio !== this.host);
     }
     render() {
-        return (h("label", { key: '1d4d0be85edb89c166b6f22ea72498b9c8d8cea8', part: "base", class: {
+        return (h("label", { key: '161f926ba9dac8cfd1ac2136d6df8020144154d2', part: "base", class: {
                 radio: true,
                 'radio--checked': this.checked,
                 'radio--disabled': this.disabled,
                 'radio--focused': this.hasFocus,
-            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: '76b4c8511865e24af02bb954155c3b73d005b0af', part: "control", class: "radio__control" }, h("span", { key: '8a236d9faf510c005b77ff71917f79928478f558', part: "checked-icon", class: "radio__icon" }, h("svg", { key: 'a09807981249028dab896dd1363455f742ffc3ae', viewBox: "0 0 16 16" }, h("g", { key: '2794897dc88c3c531a560966702eee882a0ad34f', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: 'e698f2e02915293aa3d61191971a009e1075882a', fill: "currentColor" }, h("circle", { key: '0c08e9a157e5fe0155bb2859a70a302549a35129', cx: "8", cy: "8", r: "5" }))))), h("input", { key: 'ca747587d281cb058c73dff36bbbb24f92c513ef', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: '9e4de8ac9871f4ed19960842ff4da889f03b697b', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: 'cb241e2debf683cc9f799606a48724f824c7dbfe' }))));
+            }, htmlFor: this.inputId, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("span", { key: '4e0e1c1f5ca86f4c166a7c7fa2c92da01d9bb8d3', part: "control", class: "radio__control" }, h("span", { key: '1f36dab715db65562a15c6279f2c1db7a1884429', part: "checked-icon", class: "radio__icon" }, h("svg", { key: 'da94e693fcb2588d25639568e0f8c4cf0f657c5a', viewBox: "0 0 16 16" }, h("g", { key: '8a2b59ac79f6f3b6d06abbb1018c842d9f569fa5', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { key: '200348293cce5552ddafd769431836d20bd93978', fill: "currentColor" }, h("circle", { key: '4678277115274c01a2cc8727ac2a0cc82578c239', cx: "8", cy: "8", r: "5" }))))), h("input", { key: '3fedc2104064ceb903946bc9bc40c783580e5df7', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: '3f736251b5c860655af87113b5e2188199491f0e', part: "label", id: this.labelId, class: "radio__label" }, h("slot", { key: '32b6952ea80099d1250735f24986f848e21750e2' }))));
     }
     static get is() { return "six-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -138,6 +143,8 @@ export class SixRadio {
                     "tags": [],
                     "text": "The radio's name attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
@@ -156,6 +163,8 @@ export class SixRadio {
                     "tags": [],
                     "text": "The radio's value attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "'on'"
@@ -174,6 +183,8 @@ export class SixRadio {
                     "tags": [],
                     "text": "Set to true to disable the radio."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -192,6 +203,8 @@ export class SixRadio {
                     "tags": [],
                     "text": "Set to true to draw the radio in a checked state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
@@ -210,6 +223,8 @@ export class SixRadio {
                     "tags": [],
                     "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"

package/dist/collection/components/six-radio/six-radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-radio.js","sourceRoot":"","sources":["../../../src/components/six-radio/six-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\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 - The radio's label.\n \n @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n /\n\n@Component({\n tag: 'six-radio',\n styleUrl: 'six-radio.scss',\n shadow: true,\n})\nexport class SixRadio {\n private inputId = `radio-${++id}`;\n private labelId = `radio-label-${id}`;\n private nativeInput?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixRadioElement;\n\n @State() hasFocus = false;\n\n /* The radio's name attribute. /\n @Prop() name = '';\n\n /* The radio's value attribute. /\n @Prop({ reflect: true }) value = 'on';\n\n /* Set to true to disable the radio. /\n @Prop() disabled = false;\n\n /* Set to true to draw the radio in a checked state. /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.checked) {\n this.getSiblingRadios().forEach((radio) => (radio.checked = false));\n }\n if (this.nativeInput != null) {\n this.nativeInput.checked = this.checked;\n }\n }\n\n @Watch('name')\n handleNameChange(name: string) {\n if (this.nativeInput != null) {\n this.nativeInput.name = name;\n }\n }\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control's checked state changes. /\n @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.eventListeners.forward('six-radio-change', 'change', this.host);\n this.eventListeners.forward('six-radio-blur', 'blur', this.host);\n this.eventListeners.forward('six-radio-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the radio. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the radio. */\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private getAllRadios() {\n const form = this.host.closest('form') \|\| document.body;\n\n if (this.name === '') return [];\n\n return [...form.querySelectorAll('six-radio')].filter(\n (radio: HTMLSixRadioElement) => radio.name === this.name\n ) as HTMLSixRadioElement[];\n }\n\n private getSiblingRadios() {\n return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n }\n\n private handleClick = () => {\n if (this.nativeInput != null) {\n this.checked = this.nativeInput.checked;\n this.sixChange.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (keyboardEvent: KeyboardEvent) => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {\n const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;\n let index = radios.indexOf(this.host) + incr;\n if (index < 0) index = radios.length - 1;\n if (index > radios.length - 1) index = 0;\n\n this.getAllRadios().forEach((radio) => (radio.checked = false));\n radios[index].setFocus();\n radios[index].checked = true;\n radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));\n keyboardEvent.preventDefault();\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.nativeInput?.focus();\n };\n\n render() {\n return (\n <label\n part=\"base\"\n class={{\n radio: true,\n 'radio--checked': this.checked,\n 'radio--disabled': this.disabled,\n 'radio--focused': this.hasFocus,\n }}\n htmlFor={this.inputId}\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"radio__control\">\n <span part=\"checked-icon\" class=\"radio__icon\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g fill=\"currentColor\">\n <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n </g>\n </g>\n </svg>\n </span>\n\n <input\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"radio__label\">\n <slot />\n </span>\n </label>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-radio.js","sourceRoot":"","sources":["../../../src/components/six-radio/six-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\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 - The radio's label.\n \n @part base - The component's base wrapper.\n * @part control - The radio control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part label - The radio label.\n /\n\n@Component({\n tag: 'six-radio',\n styleUrl: 'six-radio.scss',\n shadow: true,\n})\nexport class SixRadio {\n private inputId = `radio-${++id}`;\n private labelId = `radio-label-${id}`;\n private nativeInput?: HTMLInputElement;\n private eventListeners = new EventListeners();\n\n @Element() host!: HTMLSixRadioElement;\n\n @State() hasFocus = false;\n\n /* The radio's name attribute. /\n @Prop() name = '';\n\n /* The radio's value attribute. /\n @Prop({ reflect: true }) value = 'on';\n\n /* Set to true to disable the radio. /\n @Prop() disabled = false;\n\n /* Set to true to draw the radio in a checked state. /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n @Watch('checked')\n handleCheckedChange() {\n if (this.checked) {\n this.getSiblingRadios().forEach((radio) => (radio.checked = false));\n }\n if (this.nativeInput != null) {\n this.nativeInput.checked = this.checked;\n }\n }\n\n @Watch('name')\n handleNameChange(name: string) {\n if (this.nativeInput != null) {\n this.nativeInput.name = name;\n }\n }\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-radio-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control's checked state changes. /\n @Event({ eventName: 'six-radio-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-radio-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.eventListeners.forward('six-radio-change', 'change', this.host);\n this.eventListeners.forward('six-radio-blur', 'blur', this.host);\n this.eventListeners.forward('six-radio-focus', 'focus', this.host);\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the radio. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the radio. */\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private getAllRadios() {\n const form = this.host.closest('form') \|\| document.body;\n\n if (this.name === '') return [];\n\n return [...form.querySelectorAll('six-radio')].filter(\n (radio: HTMLSixRadioElement) => radio.name === this.name\n ) as HTMLSixRadioElement[];\n }\n\n private getSiblingRadios() {\n return this.getAllRadios().filter((radio) => radio !== this.host) as HTMLSixRadioElement[];\n }\n\n private handleClick = () => {\n if (this.nativeInput != null) {\n this.checked = this.nativeInput.checked;\n this.sixChange.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleKeyDown = (keyboardEvent: KeyboardEvent) => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(keyboardEvent.key)) {\n const radios = this.getAllRadios().filter((radio) => !radio.disabled);\n const incr = ['ArrowUp', 'ArrowLeft'].includes(keyboardEvent.key) ? -1 : 1;\n let index = radios.indexOf(this.host) + incr;\n if (index < 0) index = radios.length - 1;\n if (index > radios.length - 1) index = 0;\n\n this.getAllRadios().forEach((radio) => (radio.checked = false));\n radios[index].setFocus();\n radios[index].checked = true;\n radios[index].dispatchEvent(new CustomEvent('six-radio-change', { bubbles: true, cancelable: true }));\n keyboardEvent.preventDefault();\n }\n };\n\n private handleMouseDown = (event: MouseEvent) => {\n // Prevent clicks on the label from briefly blurring the input\n event.preventDefault();\n this.nativeInput?.focus();\n };\n\n render() {\n return (\n <label\n part=\"base\"\n class={{\n radio: true,\n 'radio--checked': this.checked,\n 'radio--disabled': this.disabled,\n 'radio--focused': this.hasFocus,\n }}\n htmlFor={this.inputId}\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleMouseDown}\n >\n <span part=\"control\" class=\"radio__control\">\n <span part=\"checked-icon\" class=\"radio__icon\">\n <svg viewBox=\"0 0 16 16\">\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g fill=\"currentColor\">\n <circle cx=\"8\" cy=\"8\" r=\"5\"></circle>\n </g>\n </g>\n </svg>\n </span>\n\n <input\n ref={(el) => (this.nativeInput = el)}\n id={this.inputId}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n aria-labelledby={this.labelId}\n onClick={this.handleClick}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n />\n </span>\n\n <span part=\"label\" id={this.labelId} class=\"radio__label\">\n <slot />\n </span>\n </label>\n );\n }\n}\n"]}

package/dist/collection/components/six-range/six-range.js CHANGED Viewed

@@ -24,6 +24,37 @@ export class SixRange {
         this.helpTextId = `input-help-text-${id}`;
         this.errorTextId = `input-error-text-${id}`;
         this.eventListeners = new EventListeners();
+        this.hasFocus = false;
+        this.hasHelpTextSlot = false;
+        this.hasErrorTextSlot = false;
+        this.hasLabelSlot = false;
+        this.hasTooltip = false;
+        /** The input's name attribute. */
+        this.name = '';
+        /** The input's value attribute. */
+        this.value = 0;
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The range's help text. Alternatively, you can use the help-text slot. */
+        this.helpText = '';
+        /** Set to true to disable the input. */
+        this.disabled = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** The input's min attribute. */
+        this.min = 0;
+        /** The input's max attribute. */
+        this.max = 100;
+        /** The input's step attribute. */
+        this.step = 1;
+        /** The preferred placedment of the tooltip. */
+        this.tooltip = 'top';
+        /** A function used to format the tooltip's value. */
+        this.tooltipFormatter = (value) => value.toString();
         this.handleInput = () => {
             if (this.nativeInput != null) {
                 this.update(parseFloat(this.nativeInput.value));
@@ -58,25 +89,6 @@ export class SixRange {
         this.handleTouchStart = () => {
             this.setFocus();
         };
-        this.hasFocus = false;
-        this.hasHelpTextSlot = false;
-        this.hasErrorTextSlot = false;
-        this.hasLabelSlot = false;
-        this.hasTooltip = false;
-        this.name = '';
-        this.value = 0;
-        this.required = false;
-        this.helpText = '';
-        this.disabled = false;
-        this.label = '';
-        this.errorText = '';
-        this.errorTextCount = undefined;
-        this.invalid = false;
-        this.min = 0;
-        this.max = 100;
-        this.step = 1;
-        this.tooltip = 'top';
-        this.tooltipFormatter = (value) => value.toString();
     }
     handleLabelChange() {
         this.handleSlotChange();
@@ -188,7 +200,7 @@ export class SixRange {
         }
     }
     render() {
-        return (h(FormControl, { key: '247e4d734ffd21fb8600961f821e38088e7746d7', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: '253bbcaffc90185969ccc1eb96cafe889b3130f2', part: "base", class: {
+        return (h(FormControl, { key: 'edd5bce1c123ad354cc8a359f2d6563c3ace1fd3', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: "medium", errorTextId: this.errorTextId, errorText: this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, errorTextCount: this.errorTextCount, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'c3c694426ea3c659d6cbb9905ca503596c55e537', part: "base", class: {
                 range: true,
                 // States
                 'range--disabled': this.disabled,
@@ -196,7 +208,7 @@ export class SixRange {
                 'range--tooltip-visible': this.hasTooltip,
                 'range--tooltip-top': this.tooltip === 'top',
                 'range--tooltip-bottom': this.tooltip === 'bottom',
-            }, onTouchStart: this.handleTouchStart }, h("input", { key: '83c6c8855ca6df0ee2d95a95fee668b5bbf306db', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { key: 'fac373f95f6bfebd98e52f92fc74825e853f6812', part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
+            }, onTouchStart: this.handleTouchStart }, h("input", { key: '23ebc2c5aa5eb8d73ac869fc7d5858b836af0e1c', part: "input", ref: (el) => (this.nativeInput = el), type: "range", class: "range__control", name: this.name, disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.tooltip !== 'none' && (h("output", { key: '86669cf2b175c72432054542356d11d537d8426f', part: "tooltip", ref: (el) => (this.output = el), class: "range__tooltip" }, this.tooltipFormatter(this.value))))));
     }
     static get is() { return "six-range"; }
     static get encapsulation() { return "shadow"; }
@@ -226,6 +238,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The input's name attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
@@ -244,6 +258,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The input's value attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "0"
@@ -262,6 +278,8 @@ export class SixRange {
                     "tags": [],
                     "text": "Set to true to show an asterisk beneath the label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -280,6 +298,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The range's help text. Alternatively, you can use the help-text slot."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "help-text",
                 "reflect": false,
                 "defaultValue": "''"
@@ -298,6 +318,8 @@ export class SixRange {
                     "tags": [],
                     "text": "Set to true to disable the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -316,6 +338,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The label text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
@@ -334,6 +358,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The error message shown, if `invalid` is set to true."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error-text",
                 "reflect": false,
                 "defaultValue": "''"
@@ -352,6 +378,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error-text-count",
                 "reflect": false
             },
@@ -369,6 +397,8 @@ export class SixRange {
                     "tags": [],
                     "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
@@ -387,6 +417,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The input's min attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
@@ -405,6 +437,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The input's max attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max",
                 "reflect": false,
                 "defaultValue": "100"
@@ -423,6 +457,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The input's step attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "step",
                 "reflect": false,
                 "defaultValue": "1"
@@ -441,6 +477,8 @@ export class SixRange {
                     "tags": [],
                     "text": "The preferred placedment of the tooltip."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "'top'"
@@ -459,6 +497,8 @@ export class SixRange {
                     "tags": [],
                     "text": "A function used to format the tooltip's value."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "(value: number) => value.toString()"
             }
         };

package/dist/collection/components/six-range/six-range.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-range.js","sourceRoot":"","sources":["../../../src/components/six-range/six-range.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,WAAW,MAAM,uDAAuD,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;;;;;;GAaG;AAMH,MAAM,OAAO,QAAQ;;QACX,YAAO,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC;QAC1B,YAAO,GAAG,eAAe,EAAE,EAAE,CAAC;QAC9B,eAAU,GAAG,mBAAmB,EAAE,EAAE,CAAC;QACrC,gBAAW,GAAG,oBAAoB,EAAE,EAAE,CAAC;QACvC,mBAAc,GAAG,IAAI,cAAc,EAAE,CAAC;QA6HtC,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE,CAAC;gBAC7B,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;YAClD,CAAC;YACD,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;YACxB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE;;YACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE,CAAC;gBAC7B,MAAA,IAAI,CAAC,cAAc,0CAAE,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACnD,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;YACrB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE,CAAC;gBAC7B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACjD,CAAC;QACH,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;YACvD,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAChD,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;QAC3D,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC,CAAC;wBAxJkB,KAAK;+BACE,KAAK;gCACJ,KAAK;4BACT,KAAK;0BACP,KAAK;oBAGZ,EAAE;qBAGgB,CAAC;wBAGf,KAAK;wBAGL,EAAE;wBAGF,KAAK;qBAGR,EAAE;yBAGqB,EAAE;;uBAMN,KAAK;mBAG1B,CAAC;mBAGD,GAAG;oBAGF,CAAC;uBAG6B,KAAK;gCAGvB,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE;;IAc9D,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAKD,iBAAiB;QACf,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,iBAAiB;;QACf,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC9E,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,gBAAgB;QACd,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,IAAI,WAAW,IAAI,IAAI,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAChE,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC/E,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC;IAClC,CAAC;IAED,kBAAkB;QAChB,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QACtC,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IAEO,SAAS;;QACf,MAAM,GAAG,GAAG,MAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,mCAAI,CAAC,CAAC;QAClC,MAAM,GAAG,GAAG,MAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,mCAAI,CAAC,CAAC;QAClC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtB,CAAC;IAED,+BAA+B;IAE/B,KAAK,CAAC,QAAQ,CAAC,OAAsB;;QACnC,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IAED,oCAAoC;IAEpC,KAAK,CAAC,WAAW;;QACf,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAC;IAC3B,CAAC;IAuCO,WAAW,CAAC,GAAW,EAAE,GAAW,EAAE,KAAa;QACzD,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE,CAAC;YAC/E,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;YACzD,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;YAChD,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC;YAC7C,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;YACtF,MAAM,CAAC,GAAG,QAAQ,UAAU,GAAG,OAAO,kBAAkB,OAAO,MAAM,SAAS,YAAY,SAAS,SAAS,CAAC;YAC7G,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC,GAAG,CAAC;YACjD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,YAAY,GAAG,CAAC,IAAI,CAAC;QAC1D,CAAC;IACH,CAAC;IAEO,SAAS;QACf,OAAO,SAAS,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,CAAC;IAEO,MAAM,CAAC,WAAoB;;QACjC,IAAI,WAAW,IAAI,IAAI,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC;QAC3B,CAAC;QAED,MAAM,GAAG,GAAG,MAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,mCAAI,CAAC,CAAC;QAClC,MAAM,GAAG,GAAG,MAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,mCAAI,CAAC,CAAC;QAClC,IAAI,KAAK,CAAC;QACV,MAAM,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,KAAc,CAAC,CAAC;QACpD,IAAI,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC;YACvB,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,WAAW,CAAC;QACtB,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE,CAAC;YAC7B,iEAAiE;YACjE,oEAAoE;YACpE,YAAY;YACZ,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;YAC1C,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAClD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QACD,IAAI,CAAC,2BAA2B,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACvD,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IAED;;OAEG;IACK,eAAe,CAAC,GAAW,EAAE,GAAW;QAC9C,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;IACjD,CAAC;IAED;;OAEG;IACK,2BAA2B,CAAC,GAAW,EAAE,GAAW,EAAE,KAAa;QACzE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE,CAAC;YAClD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;YAC/D,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU;gBAC/B,0EAA0E;oBAC1E,OAAO;oBACP,mCAAmC;oBACnC,OAAO;oBACP,IAAI,CAAC;QACT,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,WAAW,qDACV,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,OAAO;YAE1B,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,KAAK,EAAE,IAAI;oBAEX,SAAS;oBACT,iBAAiB,EAAE,IAAI,CAAC,QAAQ;oBAChC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;oBAC/B,wBAAwB,EAAE,IAAI,CAAC,UAAU;oBACzC,oBAAoB,EAAE,IAAI,CAAC,OAAO,KAAK,KAAK;oBAC5C,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;iBACnD,EACD,YAAY,EAAE,IAAI,CAAC,gBAAgB;gBAEnC,8DACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EACpC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,GACvB;gBACD,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,CAC1B,+DAAQ,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,gBAAgB,IAC3E,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAC3B,CACV,CACG,CACM,CACf,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\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 label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n /\n@Component({\n tag: 'six-range',\n styleUrl: 'six-range.scss',\n shadow: true,\n})\nexport class SixRange {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private eventListeners = new EventListeners();\n private resizeObserver?: ResizeObserver;\n\n private output?: HTMLElement;\n private nativeInput?: HTMLInputElement;\n\n @Element() host!: HTMLSixRangeElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasTooltip = false;\n\n /* The input's name attribute. /\n @Prop() name = '';\n\n /* The input's value attribute. /\n @Prop({ mutable: true }) value = 0;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The range's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* Set to true to disable the input. /\n @Prop() disabled = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's min attribute. /\n @Prop() min = 0;\n\n /* The input's max attribute. /\n @Prop() max = 100;\n\n /* The input's step attribute. /\n @Prop() step = 1;\n\n /* The preferred placedment of the tooltip. /\n @Prop() tooltip: 'top' \| 'bottom' \| 'none' = 'top';\n\n /* A function used to format the tooltip's value. /\n @Prop() tooltipFormatter = (value: number) => value.toString();\n\n /* Emitted when the control's value changes. /\n @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('label')\n @Watch('errorText')\n @Watch('helpText')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n handleValueChange() {\n this.update();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.update();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.update();\n this.resizeObserver = new ResizeObserver(() => this.update());\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentDidUpdate() {\n const { min, max } = this.getMinMax();\n this.syncTooltip(min, max, this.value);\n }\n\n private getMinMax() {\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n return { min, max };\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private handleInput = () => {\n if (this.nativeInput != null) {\n this.update(parseFloat(this.nativeInput.value));\n }\n requestAnimationFrame(() => {\n this.sixChange.emit();\n });\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.hasTooltip = false;\n this.sixBlur.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.unobserve(this.nativeInput);\n }\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.hasTooltip = true;\n this.sixFocus.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.observe(this.nativeInput);\n }\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private handleTouchStart = () => {\n this.setFocus();\n };\n\n private syncTooltip(min: number, max: number, value: number) {\n if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n const percent = Math.max(0, (value - min) / (max - min));\n const inputWidth = this.nativeInput.offsetWidth;\n const tooltipWidth = this.output.offsetWidth;\n const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n const x = `calc(${inputWidth percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n this.output.style.transform = `translateX(${x})`;\n this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n }\n }\n\n private isFirefox() {\n return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n }\n\n private update(updateValue?: number) {\n if (updateValue != null) {\n this.value = updateValue;\n }\n\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n let value;\n const parsedValue = parseFloat(this.value as never);\n if (isNaN(parsedValue)) {\n value = this.getDefaultValue(min, max);\n } else {\n value = parsedValue;\n }\n\n if (this.nativeInput != null) {\n // The value may have constraints, so we set the native control's\n // value and sync it back to ensure it adheres to min, max, and step\n // properly.\n this.nativeInput.value = value.toString();\n this.value = parseFloat(this.nativeInput.value);\n } else {\n this.value = value;\n }\n this.calculateColorRunnableTrack(min, max, this.value);\n this.syncTooltip(min, max, this.value);\n }\n\n /*\n from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n /\n private getDefaultValue(min: number, max: number): number {\n return max < min ? min : min + (max - min) / 2;\n }\n\n /\n For Firefox this functionality is not needed because it is supported by standard CSS.\n /\n private calculateColorRunnableTrack(min: number, max: number, value: number) {\n if (!this.isFirefox() && this.nativeInput != null) {\n const percent = Math.ceil(((value - min) / (max - min)) 100);\n this.nativeInput.style.background =\n '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n percent +\n '%, var(--six-color-web-rock-300) ' +\n percent +\n '%)';\n }\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n size=\"medium\"\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n errorTextCount={this.errorTextCount}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n range: true,\n\n // States\n 'range--disabled': this.disabled,\n 'range--focused': this.hasFocus,\n 'range--tooltip-visible': this.hasTooltip,\n 'range--tooltip-top': this.tooltip === 'top',\n 'range--tooltip-bottom': this.tooltip === 'bottom',\n }}\n onTouchStart={this.handleTouchStart}\n >\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n type=\"range\"\n class=\"range__control\"\n name={this.name}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n {this.tooltip !== 'none' && (\n <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n {this.tooltipFormatter(this.value)}\n </output>\n )}\n </div>\n </FormControl>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-range.js","sourceRoot":"","sources":["../../../src/components/six-range/six-range.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\n\nlet id = 0;\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 label - The input's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part input - The native range input.\n * @part tooltip - The range tooltip.\n /\n@Component({\n tag: 'six-range',\n styleUrl: 'six-range.scss',\n shadow: true,\n})\nexport class SixRange {\n private inputId = `input-${++id}`;\n private labelId = `input-label-${id}`;\n private helpTextId = `input-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private eventListeners = new EventListeners();\n private resizeObserver?: ResizeObserver;\n\n private output?: HTMLElement;\n private nativeInput?: HTMLInputElement;\n\n @Element() host!: HTMLSixRangeElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasTooltip = false;\n\n /* The input's name attribute. /\n @Prop() name = '';\n\n /* The input's value attribute. /\n @Prop({ mutable: true }) value = 0;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The range's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* Set to true to disable the input. /\n @Prop() disabled = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's min attribute. /\n @Prop() min = 0;\n\n /* The input's max attribute. /\n @Prop() max = 100;\n\n /* The input's step attribute. /\n @Prop() step = 1;\n\n /* The preferred placedment of the tooltip. /\n @Prop() tooltip: 'top' \| 'bottom' \| 'none' = 'top';\n\n /* A function used to format the tooltip's value. /\n @Prop() tooltipFormatter = (value: number) => value.toString();\n\n /* Emitted when the control's value changes. /\n @Event({ eventName: 'six-range-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. /\n @Event({ eventName: 'six-range-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-range-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('label')\n @Watch('errorText')\n @Watch('helpText')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('value')\n @Watch('min')\n @Watch('max')\n handleValueChange() {\n this.update();\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.update();\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n const nativeInput = this.nativeInput;\n if (nativeInput == null) {\n return;\n }\n this.update();\n this.resizeObserver = new ResizeObserver(() => this.update());\n }\n\n disconnectedCallback() {\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n componentDidUpdate() {\n const { min, max } = this.getMinMax();\n this.syncTooltip(min, max, this.value);\n }\n\n private getMinMax() {\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n return { min, max };\n }\n\n /* Sets focus on the input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeInput?.focus(options);\n }\n\n /* Removes focus from the input. /\n @Method()\n async removeFocus() {\n this.nativeInput?.blur();\n }\n\n private handleInput = () => {\n if (this.nativeInput != null) {\n this.update(parseFloat(this.nativeInput.value));\n }\n requestAnimationFrame(() => {\n this.sixChange.emit();\n });\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.hasTooltip = false;\n this.sixBlur.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.unobserve(this.nativeInput);\n }\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.hasTooltip = true;\n this.sixFocus.emit();\n if (this.nativeInput != null) {\n this.resizeObserver?.observe(this.nativeInput);\n }\n };\n\n private handleSlotChange = () => {\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private handleTouchStart = () => {\n this.setFocus();\n };\n\n private syncTooltip(min: number, max: number, value: number) {\n if (this.tooltip !== 'none' && this.nativeInput != null && this.output != null) {\n const percent = Math.max(0, (value - min) / (max - min));\n const inputWidth = this.nativeInput.offsetWidth;\n const tooltipWidth = this.output.offsetWidth;\n const thumbSize = getComputedStyle(this.nativeInput).getPropertyValue('--thumb-size');\n const x = `calc(${inputWidth percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;\n this.output.style.transform = `translateX(${x})`;\n this.output.style.marginLeft = `-${tooltipWidth / 2}px`;\n }\n }\n\n private isFirefox() {\n return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n }\n\n private update(updateValue?: number) {\n if (updateValue != null) {\n this.value = updateValue;\n }\n\n const min = Number(this.min) ?? 0;\n const max = Number(this.max) ?? 0;\n let value;\n const parsedValue = parseFloat(this.value as never);\n if (isNaN(parsedValue)) {\n value = this.getDefaultValue(min, max);\n } else {\n value = parsedValue;\n }\n\n if (this.nativeInput != null) {\n // The value may have constraints, so we set the native control's\n // value and sync it back to ensure it adheres to min, max, and step\n // properly.\n this.nativeInput.value = value.toString();\n this.value = parseFloat(this.nativeInput.value);\n } else {\n this.value = value;\n }\n this.calculateColorRunnableTrack(min, max, this.value);\n this.syncTooltip(min, max, this.value);\n }\n\n /*\n from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value\n /\n private getDefaultValue(min: number, max: number): number {\n return max < min ? min : min + (max - min) / 2;\n }\n\n /\n For Firefox this functionality is not needed because it is supported by standard CSS.\n /\n private calculateColorRunnableTrack(min: number, max: number, value: number) {\n if (!this.isFirefox() && this.nativeInput != null) {\n const percent = Math.ceil(((value - min) / (max - min)) 100);\n this.nativeInput.style.background =\n '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +\n percent +\n '%, var(--six-color-web-rock-300) ' +\n percent +\n '%)';\n }\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n size=\"medium\"\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n errorTextCount={this.errorTextCount}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n range: true,\n\n // States\n 'range--disabled': this.disabled,\n 'range--focused': this.hasFocus,\n 'range--tooltip-visible': this.hasTooltip,\n 'range--tooltip-top': this.tooltip === 'top',\n 'range--tooltip-bottom': this.tooltip === 'bottom',\n }}\n onTouchStart={this.handleTouchStart}\n >\n <input\n part=\"input\"\n ref={(el) => (this.nativeInput = el)}\n type=\"range\"\n class=\"range__control\"\n name={this.name}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.value}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n {this.tooltip !== 'none' && (\n <output part=\"tooltip\" ref={(el) => (this.output = el)} class=\"range__tooltip\">\n {this.tooltipFormatter(this.value)}\n </output>\n )}\n </div>\n </FormControl>\n );\n }\n}\n"]}

package/dist/collection/components/six-root/six-root.js CHANGED Viewed

@@ -11,12 +11,16 @@ import { h } from "@stencil/core";
  */
 export class SixRoot {
     constructor() {
+        /** Defines whether the content section should be padded */
+        // eslint-disable-next-line @stencil-community/ban-default-true
         this.padded = true;
+        /** Defines the stage of the application*/
         this.stage = null;
+        /** Defines the version of the application*/
         this.version = '';
     }
     render() {
-        return (h("host", { key: 'bb7825453e8962c4284fb6fbb4134c4b7767ffbd', class: "six-root" }, h("header", { key: '443e36e1fb8ab628ab2e1bde1eef3f3f0a6c9a3e', part: "header" }, this.stage && h("six-stage-indicator", { key: 'e10e1a45360e64f7319e15b5a615b898e41c5a6f', stage: this.stage }, this.version), h("slot", { key: '83f124f27a434c0eaab23e25c9690e63619d3238', name: "header" })), h("nav", { key: '52f47a0ea56ea73c01acfb974005b25a07f31c1c', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: 'dc394fd3eba205aae4bfff5a17f826e64d7aabcb', name: "left-sidebar" })), h("main", { key: '6bc11607edf2b772a2ae8e83aa6116d0996353f2', part: "main" }, h("div", { key: 'dce7d4f1ff72fdad0daf1ded16d6e91c709ea837', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: '2f738b3b6705db8d0bfe07590df59cc4d243cad0', name: "main" })), h("div", { key: '005c723d6515ffc9a0acdc51460a4f51872ae717', class: "six-root__footer" }, h("slot", { key: '8cc3c97bc3c1a328ed4a99dfa1b17c6d3abb4607', name: "footer" }))), h("nav", { key: '05b12db2b51c4c4b5cb0de37c7f79d7e3220dda6', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '9c7977c0f58dc781acb189a816f5dc0cd61c8304', name: "right-sidebar" }))));
+        return (h("host", { key: 'afa4ab3690aae98f49bc74f2f78fbc7d7c804cde', class: "six-root" }, h("header", { key: '256dc2baecc083a3fe7fade7f0238d149123c465', part: "header" }, this.stage && h("six-stage-indicator", { key: 'f53065557a13d9513cc654306fd6e17eea28f8af', stage: this.stage }, this.version), h("slot", { key: '4458f26a10c2c550b5d3ad1adbca8067e1376cab', name: "header" })), h("nav", { key: '86824c3286c747d3bd8e235af341ed5671c24ec4', class: "six-root__left-sidebar", part: "left-sidebar" }, h("slot", { key: '7eac3c269e294cbd8f0c98f045c8791be10b8aef', name: "left-sidebar" })), h("main", { key: 'cf1b6c43cd996f0673e8990a6d78409af51eea41', part: "main" }, h("div", { key: 'f95ec5b509e1834cb5c0f8abaac498409753105f', class: { 'six-root__container': true, 'six-root__container--padded': this.padded }, part: "container" }, h("slot", { key: 'd13f71d95d83748eedf59b43334892e2fd842e7c', name: "main" })), h("div", { key: '2c76a92a46db1d09cea6b09eea6bc8a7c81b6536', class: "six-root__footer" }, h("slot", { key: '9d0aa991bcb43a360c770c9d63b404799dfb94ff', name: "footer" }))), h("nav", { key: '7af5df12fe56e6414627608fd704507d949ce1ad', class: "six-root__right-sidebar", part: "right-sidebar" }, h("slot", { key: '621b9a7c7d9db229a9bb8e82680ee2d41e245883', name: "right-sidebar" }))));
     }
     static get is() { return "six-root"; }
     static get encapsulation() { return "shadow"; }
@@ -46,6 +50,8 @@ export class SixRoot {
                     "tags": [],
                     "text": "Defines whether the content section should be padded"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "padded",
                 "reflect": false,
                 "defaultValue": "true"
@@ -70,6 +76,8 @@ export class SixRoot {
                     "tags": [],
                     "text": "Defines the stage of the application"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "stage",
                 "reflect": false,
                 "defaultValue": "null"
@@ -88,6 +96,8 @@ export class SixRoot {
                     "tags": [],
                     "text": "Defines the version of the application"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "version",
                 "reflect": false,
                 "defaultValue": "''"

package/dist/collection/components/six-root/six-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-root.js","sourceRoot":"","sources":["../../../src/components/six-root/six-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG5D;;;;;;;;;GASG;AAOH,MAAM,OAAO,OAAO~~;;sBAKD~~,IAAI;~~qBAGM~~,IAAI;~~uBAGb~~,EAAE~~;;IAEpB~~,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAC,UAAU;YACpB,+DAAQ,IAAI,EAAC,QAAQ;gBAClB,IAAI,CAAC,KAAK,IAAI,4EAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB;gBAC3F,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf;YACT,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc;gBACrD,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB;YACN,6DAAM,IAAI,EAAC,MAAM;gBACf,4DAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW;oBACvG,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB;gBACN,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;YACP,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe;gBACvD,6DAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/*\n @since 1.0\n * @status stable\n \n @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n /\n\n@Component({\n tag: 'six-root',\n styleUrl: 'six-root.scss',\n shadow: true,\n})\nexport class SixRoot {\n @Element() host!: HTMLSixRootElement;\n\n /* Defines whether the content section should be padded /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() padded = true;\n\n /* Defines the stage of the application/\n @Prop() stage: StageType = null;\n\n /* Defines the version of the application*/\n @Prop() version = '';\n\n render() {\n return (\n <host class=\"six-root\">\n <header part=\"header\">\n {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n <slot name=\"header\" />\n </header>\n <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n <slot name=\"left-sidebar\" />\n </nav>\n <main part=\"main\">\n <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n <slot name=\"main\" />\n </div>\n <div class=\"six-root__footer\">\n <slot name=\"footer\" />\n </div>\n </main>\n <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n <slot name=\"right-sidebar\" />\n </nav>\n </host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-root.js","sourceRoot":"","sources":["../../../src/components/six-root/six-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG5D;;;;;;;;;GASG;AAOH,MAAM,OAAO,OAAO;IALpB;QAQE,2DAA2D;QAC3D,+DAA+D;QACvD,WAAM,GAAG,IAAI,CAAC;QAEtB,0CAA0C;QAClC,UAAK,GAAc,IAAI,CAAC;QAEhC,4CAA4C;QACpC,YAAO,GAAG,EAAE,CAAC;KA0BtB;IAxBC,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAC,UAAU;YACpB,+DAAQ,IAAI,EAAC,QAAQ;gBAClB,IAAI,CAAC,KAAK,IAAI,4EAAqB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,CAAuB;gBAC3F,6DAAM,IAAI,EAAC,QAAQ,GAAG,CACf;YACT,4DAAK,KAAK,EAAC,wBAAwB,EAAC,IAAI,EAAC,cAAc;gBACrD,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB;YACN,6DAAM,IAAI,EAAC,MAAM;gBACf,4DAAK,KAAK,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,6BAA6B,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,WAAW;oBACvG,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB;gBACN,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD;YACP,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,eAAe;gBACvD,6DAAM,IAAI,EAAC,eAAe,GAAG,CACzB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport { StageType } from '../six-stage-indicator/six-stage-indicator';\n\n/*\n @since 1.0\n * @status stable\n \n @slot header - Used to define the header component.\n * @slot main - Used to define the components in the main area.\n * @slot left-sidebar - Used to define the sidebar on the left side.\n * @slot right-sidebar - Used to define the sidebar on the right side.\n * @slot footer - Used to define the footer component.\n /\n\n@Component({\n tag: 'six-root',\n styleUrl: 'six-root.scss',\n shadow: true,\n})\nexport class SixRoot {\n @Element() host!: HTMLSixRootElement;\n\n /* Defines whether the content section should be padded /\n // eslint-disable-next-line @stencil-community/ban-default-true\n @Prop() padded = true;\n\n /* Defines the stage of the application/\n @Prop() stage: StageType = null;\n\n /* Defines the version of the application*/\n @Prop() version = '';\n\n render() {\n return (\n <host class=\"six-root\">\n <header part=\"header\">\n {this.stage && <six-stage-indicator stage={this.stage}>{this.version}</six-stage-indicator>}\n <slot name=\"header\" />\n </header>\n <nav class=\"six-root__left-sidebar\" part=\"left-sidebar\">\n <slot name=\"left-sidebar\" />\n </nav>\n <main part=\"main\">\n <div class={{ 'six-root__container': true, 'six-root__container--padded': this.padded }} part=\"container\">\n <slot name=\"main\" />\n </div>\n <div class=\"six-root__footer\">\n <slot name=\"footer\" />\n </div>\n </main>\n <nav class=\"six-root__right-sidebar\" part=\"right-sidebar\">\n <slot name=\"right-sidebar\" />\n </nav>\n </host>\n );\n }\n}\n"]}