@scouterna/ui-webc 0.2.10 → 2.0.0

package/dist/collection/components/input/input.js

@@ -0,0 +1,259 @@
+import { h, } from "@stencil/core";
+export class ScoutInput {
+    /**
+     * Type of input element. If you need a number input, read the accessibility
+     * section of this MDN article first:
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility
+     */
+    type = "text";
+    /**
+     * Input mode hints for devices with dynamic keyboards.
+     */
+    inputmode;
+    /**
+     * Regex pattern for input validation.
+     */
+    pattern;
+    /**
+     * Value of the input element, in case you want to control it yourself.
+     */
+    value = "";
+    /**
+     * Whether the input is disabled. Disabled inputs are not editable, excluded
+     * from tab order and are not validated.
+     */
+    disabled = false;
+    /**
+     * Custom validation function run on top of the implicit validation performed
+     * by the browser. Return a string with the validation message to mark the
+     * input as invalid, or null to mark it as valid.
+     */
+    validate;
+    scoutInputChange;
+    scoutBlur;
+    /**
+     * Internal event used for form field association.
+     */
+    _fieldId;
+    ariaId;
+    componentWillLoad() {
+        this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
+        this._fieldId.emit(this.ariaId);
+    }
+    onInput(event) {
+        const input = event.target;
+        if (this.validate) {
+            const validationMessage = this.validate(input.value);
+            input.setCustomValidity(validationMessage ?? "");
+        }
+        this.scoutInputChange.emit({
+            value: input.value,
+            element: input,
+        });
+    }
+    render() {
+        return (h("input", { key: '7bc05d32826cd3173b6a6e4620acfb501fae4edc', id: this.ariaId, type: this.type, inputMode: this.inputmode, pattern: this.pattern, class: "input", value: this.value, disabled: this.disabled, onInput: (e) => this.onInput(e), onBlur: () => this.scoutBlur.emit() }));
+    }
+    static get is() { return "scout-input"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputType",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"url\" | string & {}",
+                    "references": {
+                        "InputType": {
+                            "location": "local",
+                            "path": "/home/runner/work/j26-web-components/j26-web-components/packages/ui-webc/src/components/input/input.tsx",
+                            "id": "src/components/input/input.tsx::InputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of input element. If you need a number input, read the accessibility\nsection of this MDN article first:\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "\"text\""
+            },
+            "inputmode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputMode",
+                    "resolved": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\" | string & {}",
+                    "references": {
+                        "InputMode": {
+                            "location": "local",
+                            "path": "/home/runner/work/j26-web-components/j26-web-components/packages/ui-webc/src/components/input/input.tsx",
+                            "id": "src/components/input/input.tsx::InputMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Input mode hints for devices with dynamic keyboards."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inputmode"
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Regex pattern for input validation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pattern"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the input element, in case you want to control it yourself."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "\"\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled. Disabled inputs are not editable, excluded\nfrom tab order and are not validated."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "validate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(value: string) => string | null",
+                    "resolved": "(value: string) => string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom validation function run on top of the implicit validation performed\nby the browser. Return a string with the validation message to mark the\ninput as invalid, or null to mark it as valid."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ariaId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "scoutInputChange",
+                "name": "scoutInputChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    value: string;\n    element: HTMLInputElement;\n  }",
+                    "resolved": "{ value: string; element: HTMLInputElement; }",
+                    "references": {
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "scoutBlur",
+                "name": "scoutBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "_fieldId",
+                "name": "_fieldId",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal event used for form field association."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=input.js.map

package/dist/collection/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AA6BvB,MAAM,OAAO,UAAU;IACrB;;;;OAIG;IACK,IAAI,GAAc,MAAM,CAAC;IAEjC;;OAEG;IACK,SAAS,CAAa;IAE9B;;OAEG;IACK,OAAO,CAAU;IAEzB;;OAEG;IACK,KAAK,GAAW,EAAE,CAAC;IAE3B;;;OAGG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;;;OAIG;IACK,QAAQ,CAAoC;IAE3C,gBAAgB,CAGtB;IACM,SAAS,CAAqB;IAEvC;;OAEG;IACM,QAAQ,CAAuB;IAE/B,MAAM,CAAS;IAExB,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAC/D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAED,OAAO,CAAC,KAAiB;QACvB,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAE/C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACrD,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC;QACnD,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;YACzB,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,8DACE,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,GACnC,CACH,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nexport type InputType =\n  | \"text\"\n  | \"password\"\n  | \"email\"\n  | \"number\"\n  | \"tel\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\nexport type InputMode =\n  | \"none\"\n  | \"text\"\n  | \"decimal\"\n  | \"numeric\"\n  | \"tel\"\n  | \"search\"\n  | \"email\"\n  | \"url\"\n  // Hack to suggest above value but still allow any other string value\n  | (string & {});\n\n@Component({\n  tag: \"scout-input\",\n  styleUrl: \"input.css\",\n  scoped: true,\n})\nexport class ScoutInput implements ComponentInterface {\n  /**\n   * Type of input element. If you need a number input, read the accessibility\n   * section of this MDN article first:\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility\n   */\n  @Prop() type: InputType = \"text\";\n\n  /**\n   * Input mode hints for devices with dynamic keyboards.\n   */\n  @Prop() inputmode?: InputMode;\n\n  /**\n   * Regex pattern for input validation.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Value of the input element, in case you want to control it yourself.\n   */\n  @Prop() value: string = \"\";\n\n  /**\n   * Whether the input is disabled. Disabled inputs are not editable, excluded\n   * from tab order and are not validated.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Custom validation function run on top of the implicit validation performed\n   * by the browser. Return a string with the validation message to mark the\n   * input as invalid, or null to mark it as valid.\n   */\n  @Prop() validate?: (value: string) => string | null;\n\n  @Event() scoutInputChange: EventEmitter<{\n    value: string;\n    element: HTMLInputElement;\n  }>;\n  @Event() scoutBlur: EventEmitter<void>;\n\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  @State() ariaId: string;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n\n    if (this.validate) {\n      const validationMessage = this.validate(input.value);\n      input.setCustomValidity(validationMessage ?? \"\");\n    }\n\n    this.scoutInputChange.emit({\n      value: input.value,\n      element: input,\n    });\n  }\n\n  render() {\n    return (\n      <input\n        id={this.ariaId}\n        type={this.type}\n        inputMode={this.inputmode}\n        pattern={this.pattern}\n        class=\"input\"\n        value={this.value}\n        disabled={this.disabled}\n        onInput={(e) => this.onInput(e)}\n        onBlur={() => this.scoutBlur.emit()}\n      />\n    );\n  }\n}\n"]}

package/dist/collection/components/switch/switch.css

@@ -0,0 +1,79 @@
+.switch {
+  width: var(--spacing-12);
+  height: var(--spacing-6);
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  border-radius: var(--spacing-8);
+  background-color: var(--color-text-brand-inverse);
+  border: 1px solid var(--color-gray-300);
+  position: relative;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  transition-property: border-color;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in-out;
+  cursor: pointer;
+  --switch-ball-size: calc((var(--spacing-6) - var(--spacing-1) / 2) + 1px);
+}
+
+.switch:hover {
+  transition-property: none;
+  border-color: var(--color-gray-400);
+  background-color: var(--color-background-brand-subtle-hovered);
+}
+
+.switch:active {
+  background-color: var(--color-background-brand-subtle-pressed);
+}
+
+.switch:checked {
+  border-color: var(--color-background-brand-base);
+}
+
+.switch:hover::before {
+  background-color: var(--color-gray-400);
+}
+
+.switch::before {
+  content: "";
+  background-color: var(--color-gray-300);
+  width: var(--switch-ball-size);
+  height: var(--switch-ball-size);
+  border-radius: 50%;
+  position: absolute;
+  left: -1px;
+  right: 0;
+  transition-duration: 0.3s;
+  transition-property: left, right;
+}
+
+.switch:checked::before {
+  content: "";
+  background-color: var(--color-background-brand-base);
+  left: calc(100% - (var(--spacing-6) - var(--spacing-1) / 2) + 1px);
+  left: calc(100% - calc(var(--spacing-6) - var(--spacing-1) / 2) + 1px);
+}
+
+.switch:disabled {
+  pointer-events: none;
+  background-color: var(--color-gray-100);
+  border-color: var(--color-gray-100);
+}
+
+.switch:disabled::before {
+  background-color: var(--color-gray-300);
+}
+
+label {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  font: var(--type-label-base);
+  color: var(--color-text-base);
+}
+
+.inlineDivider {
+  width: var(--spacing-2);
+}

package/dist/collection/components/switch/switch.js

@@ -0,0 +1,173 @@
+import { h, } from "@stencil/core";
+export class ScoutSwitch {
+    /**
+     * Indicates whether the switch is toggled on or off.
+     */
+    toggled = false;
+    disabled = false;
+    /**
+     * Use this prop if you need to connect your switch with another element describing its use, other than the property label.
+     */
+    ariaLabelledby;
+    label;
+    ariaId;
+    scoutSwitchToggled;
+    /**
+     * Internal event used for form field association.
+     */
+    _fieldId;
+    componentWillLoad() {
+        this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;
+        this._fieldId.emit(this.ariaId);
+    }
+    onClick(event) {
+        const switchElement = event.target;
+        this.scoutSwitchToggled.emit({
+            toggled: switchElement.checked,
+            element: switchElement,
+        });
+    }
+    render() {
+        const Tag = this.label && this.label.length ? "label" : "div";
+        return (h(Tag, { key: '06f33e80dedee05abc34f15fbd8453f3df50d760' }, this.label, h("span", { key: '3061c223b64f313d4ebcd4b068ca84d83c5bb9c2', class: "inlineDivider" }), h("input", { key: '66a3a848ce3aa484af9bb13eda6cc30e46e74c1d', class: "switch", onChange: (event) => this.onClick(event), type: "checkbox", id: this.ariaId, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.toggled })));
+    }
+    static get is() { return "scout-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "toggled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the switch is toggled on or off."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggled",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "ariaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this prop if you need to connect your switch with another element describing its use, other than the property label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-labelledby"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "ariaId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "scoutSwitchToggled",
+                "name": "scoutSwitchToggled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    toggled: boolean;\n    element: HTMLInputElement;\n  }",
+                    "resolved": "{ toggled: boolean; element: HTMLInputElement; }",
+                    "references": {
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "_fieldId",
+                "name": "_fieldId",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal event used for form field association."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=switch.js.map

package/dist/collection/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AASvB,MAAM,OAAO,WAAW;IACtB;;OAEG;IACK,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEb,MAAM,CAAS;IAEf,kBAAkB,CAGxB;IACH;;OAEG;IACM,QAAQ,CAAuB;IAExC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAC/D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAED,OAAO,CAAC,KAAY;QAClB,MAAM,aAAa,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEvD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;YAC3B,OAAO,EAAE,aAAa,CAAC,OAAO;YAC9B,OAAO,EAAE,aAAa;SACvB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QAC9D,OAAO,CACL,EAAC,GAAG;YACD,IAAI,CAAC,KAAK;YACX,6DAAM,KAAK,EAAC,eAAe,GAAQ;YACnC,8DACE,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,MAAM,qBACE,IAAI,CAAC,cAAc,mBACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,GACrB,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  h,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-switch\",\n  styleUrl: \"switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutSwitch {\n  /**\n   * Indicates whether the switch is toggled on or off.\n   */\n  @Prop() toggled: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your switch with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @State() ariaId: string;\n\n  @Event() scoutSwitchToggled: EventEmitter<{\n    toggled: boolean;\n    element: HTMLInputElement;\n  }>;\n  /**\n   * Internal event used for form field association.\n   */\n  @Event() _fieldId: EventEmitter<string>;\n\n  componentWillLoad(): Promise<void> | void {\n    this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n    this._fieldId.emit(this.ariaId);\n  }\n\n  onClick(event: Event) {\n    const switchElement = event.target as HTMLInputElement;\n\n    this.scoutSwitchToggled.emit({\n      toggled: switchElement.checked,\n      element: switchElement,\n    });\n  }\n\n  render() {\n    const Tag = this.label && this.label.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        {this.label}\n        <span class=\"inlineDivider\"></span>\n        <input\n          class=\"switch\"\n          onChange={(event) => this.onClick(event)}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.toggled}\n        />\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/components/index.js

@@ -1,4 +1,4 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-CMd0pUms.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-MfRr-Vl1.js';
 
 function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');