@scouterna/ui-webc 2.2.5 → 2.2.6

package/dist/components/p-4RT-nIeK.js

@@ -1,71 +0,0 @@
-import { p as proxyCustomElement, M as Mixin, c as createEvent, h } from './p-fr5CaUFu.js';
-import { i as inputMixin } from './p-B-kEl-ny.js';
-
-const radioButtonCss = ".radio.sc-scout-radio-button{width:var(--spacing-6);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;border-radius:100%;background-color:var(--color-white);border:2px solid var(--color-gray-300);position:relative}.radio.sc-scout-radio-button:hover{border:2px solid var(--color-gray-400);box-shadow:inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);cursor:pointer}.radio.sc-scout-radio-button:active{background-color:var(--color-background-brand-subtle-pressed)}.radio.sc-scout-radio-button:checked:hover{border-color:var(--color-background-brand-hovered);box-shadow:none}.radio.sc-scout-radio-button:checked:hover::before{background-color:var(--color-background-brand-hovered)}.radio.sc-scout-radio-button:checked{border-color:var(--color-background-brand-base)}.radio.sc-scout-radio-button::after{content:\"\";position:absolute;width:var(--spacing-10);height:var(--spacing-10);top:50%;left:50%;transform:translate(-50%, -50%)}.radio.sc-scout-radio-button:checked::before{content:\"\";background-color:var(--color-background-brand-base);width:var(--spacing-4);height:var(--spacing-4);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:100%}.radio.sc-scout-radio-button:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}label.sc-scout-radio-button{display:flex;align-items:center;gap:var(--spacing-2);font:var(--type-label-base);color:var(--color-text-base)}";
-
-const ScoutRadioButton = /*@__PURE__*/ proxyCustomElement(class ScoutRadioButton extends Mixin(inputMixin) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.scoutInputChange = createEvent(this, "scoutInputChange");
-        this.scoutBlur = createEvent(this, "scoutBlur");
-        this._scoutValidate = createEvent(this, "_scoutValidate");
-        this._scoutInvalid = createEvent(this, "_scoutInvalid");
-        this._scoutFieldId = createEvent(this, "_scoutFieldId");
-        this.scoutChecked = createEvent(this, "scoutChecked");
-    }
-    checked = false;
-    disabled = false;
-    /**
-     * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.
-     */
-    ariaLabelledby;
-    label;
-    value;
-    name;
-    scoutChecked;
-    onChange(event) {
-        const radio = event.target;
-        this.scoutChecked.emit({
-            checked: radio.checked,
-            element: radio,
-        });
-    }
-    render() {
-        const Tag = this.label?.length ? "label" : "div";
-        return (h(Tag, { key: '22df090dcbf2f2b4b14b7cad8d34500295045f70' }, h("input", { key: '3bcc5022fa6202fd1fe733c1a8430f7ed1a54cf4', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "radio", value: this.value, name: this.name, class: "radio", "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
-                this.onInput();
-                this.onChange(event);
-            }, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }), this.label));
-    }
-    static get style() { return radioButtonCss; }
-}, [770, "scout-radio-button", {
-        "validate": [16],
-        "checked": [4],
-        "disabled": [4],
-        "ariaLabelledby": [1, "aria-labelledby"],
-        "label": [1],
-        "value": [1],
-        "name": [1],
-        "ariaId": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["scout-radio-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "scout-radio-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ScoutRadioButton);
-            }
-            break;
-    } });
-}
-
-export { ScoutRadioButton as S, defineCustomElement as d };
-//# sourceMappingURL=p-4RT-nIeK.js.map
-
-//# sourceMappingURL=p-4RT-nIeK.js.map

package/dist/components/p-4RT-nIeK.js.map

@@ -1 +0,0 @@
-{"file":"p-4RT-nIeK.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,ghDAAghD;;ACqB1hD,MAAA,gBACX,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;;IAGjB,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEL,IAAA,KAAK;AAEL,IAAA,IAAI;AAEH,IAAA,YAAY;AAKrB,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAE9C,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,KAAK,CAAC,OAAO;AACtB,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;AAChD,QAAA,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,OAAO,EAAA,iBAAA,EACI,IAAI,CAAC,cAAc,EAAA,eAAA,EACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAClB,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACtB,aAAC,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EACjC,CAAA,EACD,IAAI,CAAC,KAAK,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/radio-button/radio-button.css?tag=scout-radio-button&encapsulation=scoped","src/components/radio-button/radio-button.tsx"],"sourcesContent":[".radio {\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  border-radius: 100%;\n  background-color: var(--color-white);\n  border: 2px solid var(--color-gray-300);\n  position: relative;\n}\n\n.radio:hover {\n  border: 2px solid var(--color-gray-400);\n  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n  cursor: pointer;\n}\n\n.radio:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.radio:checked:hover {\n  border-color: var(--color-background-brand-hovered);\n  box-shadow: none;\n}\n\n.radio:checked:hover::before {\n  background-color: var(--color-background-brand-hovered);\n}\n\n.radio:checked {\n  border-color: var(--color-background-brand-base);\n}\n\n.radio::after {\n  content: \"\";\n  position: absolute;\n  width: var(--spacing-10);\n  height: var(--spacing-10);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.radio:checked::before {\n  content: \"\";\n  background-color: var(--color-background-brand-base);\n  width: var(--spacing-4);\n  height: var(--spacing-4);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 100%;\n}\n\n.radio:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\nlabel {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2);\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n","import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The radio button component is used to let users select one option from a set.\n * When used in a form, make sure to wrap it in a Field component to display a\n * label, help text, and error messages.\n */\n@Component({\n  tag: \"scout-radio-button\",\n  styleUrl: \"radio-button.css\",\n  scoped: true,\n})\nexport class ScoutRadioButton\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  @Prop() checked: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your radio button with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @Prop() value: string;\n\n  @Prop() name: string;\n\n  @Event() scoutChecked: EventEmitter<{\n    checked: boolean;\n    element: HTMLInputElement;\n  }>;\n\n  onChange(event: Event) {\n    const radio = event.target as HTMLInputElement;\n\n    this.scoutChecked.emit({\n      checked: radio.checked,\n      element: radio,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        <input\n          ref={(el) => this.setInputRef(el)}\n          id={this.ariaId}\n          type=\"radio\"\n          value={this.value}\n          name={this.name}\n          class=\"radio\"\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.checked}\n          onChange={(event) => {\n            this.onInput();\n            this.onChange(event);\n          }}\n          onBlur={() => this.onBlur()}\n          onInvalid={() => this.onInvalid()}\n        />\n        {this.label}\n      </Tag>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-B-kEl-ny.js.map

@@ -1 +0,0 @@
-{"file":"p-B-kEl-ny.js","mappings":";;AAQa,MAAA,UAAU,GAAG,CAAwB,IAAO,KAAI;UACrD,UAAW,GAAA,cAAQ,IAAI,CAAA;;;;AAC3B;;;;AAIG;AACK,QAAA,QAAQ;AAEP,QAAA,gBAAgB;AAIhB,QAAA,SAAS;AAElB;;AAEG;AACM,QAAA,cAAc;AAEvB;;AAEG;AACM,QAAA,aAAa;AAEtB;;AAEG;AACM,QAAA,aAAa;AAEb,QAAA,MAAM;AAEP,QAAA,YAAY;QAOpB,iBAAiB,GAAA;YACf,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA,CAAE;YAC9D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;;QAGtC,gBAAgB,GAAA;YACd,IAAI,CAAC,aAAa,EAAE;;QAGtB,OAAO,GAAA;YACL,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;AACzB,gBAAA,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK;gBAC9B,OAAO,EAAE,IAAI,CAAC,YAAY;AAC3B,aAAA,CAAC;;QAGJ,MAAM,GAAA;AACJ,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;QAGvB,SAAS,GAAA;AACP,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;;QAG3B,aAAa,GAAA;AACX,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB;;AAGF,YAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YAChE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,iBAAiB,IAAI,EAAE,CAAC;AAE5D,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;;AAG1D,QAAA,WAAW,CACT,EAKuB,EAAA;AAEvB,YAAA,IAAI,CAAC,YAAY,GAAG,EAAE;;;AAG1B,IAAA,OAAO,UAAU;AACnB;;;;","names":[],"sources":["src/mixins/inputMixin.ts"],"sourcesContent":["import {\n  Event,\n  type EventEmitter,\n  type MixedInCtor,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nexport const inputMixin = <B extends MixedInCtor>(Base: B) => {\n  class InputMixin extends Base {\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: HTMLElement;\n    }>;\n    @Event() scoutBlur: EventEmitter<void>;\n\n    /**\n     * Internal event used for form field validation.\n     */\n    @Event() _scoutValidate: EventEmitter<{ element: HTMLElement }>;\n\n    /**\n     * Internal event used for form field validation.\n     */\n    @Event() _scoutInvalid: EventEmitter<void>;\n\n    /**\n     * Internal event used for form field association.\n     */\n    @Event() _scoutFieldId: EventEmitter<string>;\n\n    @State() ariaId: string;\n\n    private inputElement:\n      | HTMLButtonElement\n      | HTMLInputElement\n      | HTMLOutputElement\n      | HTMLSelectElement\n      | HTMLTextAreaElement;\n\n    componentWillLoad() {\n      this.ariaId = `_${Math.random().toString(36).substring(2, 9)}`;\n      this._scoutFieldId.emit(this.ariaId);\n    }\n\n    componentDidLoad() {\n      this.runValidation();\n    }\n\n    onInput() {\n      this.runValidation();\n      this.scoutInputChange.emit({\n        value: this.inputElement.value,\n        element: this.inputElement,\n      });\n    }\n\n    onBlur() {\n      this.scoutBlur.emit();\n    }\n\n    onInvalid() {\n      this._scoutInvalid.emit();\n    }\n\n    runValidation() {\n      if (!this.validate) {\n        return;\n      }\n\n      const validationMessage = this.validate(this.inputElement.value);\n      this.inputElement.setCustomValidity(validationMessage ?? \"\");\n\n      this._scoutValidate.emit({ element: this.inputElement });\n    }\n\n    setInputRef(\n      el:\n        | HTMLButtonElement\n        | HTMLInputElement\n        | HTMLOutputElement\n        | HTMLSelectElement\n        | HTMLTextAreaElement,\n    ) {\n      this.inputElement = el;\n    }\n  }\n  return InputMixin;\n};\n"],"version":3}

package/dist/components/p-CLzh39Ll.js

@@ -1,73 +0,0 @@
-import { p as proxyCustomElement, M as Mixin, c as createEvent, h } from './p-fr5CaUFu.js';
-import { i as inputMixin } from './p-B-kEl-ny.js';
-
-const checkSvg = 'data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB3aWR0aD0iMjQiCiAgaGVpZ2h0PSIyNCIKICB2aWV3Qm94PSIwIDAgMjQgMjQiCiAgZmlsbD0ibm9uZSIKICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItY2hlY2siCj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNNSAxMmw1IDVsMTAgLTEwIiAvPgo8L3N2Zz4=';
-
-const checkboxCss = ".checkbox.sc-scout-checkbox{width:var(--spacing-6);height:var(--spacing-6);-moz-appearance:none;appearance:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;border-radius:3px;background-color:var(--color-text-brand-inverse);border:2px solid var(--color-gray-300);position:relative}.checkbox.sc-scout-checkbox:hover{border:2px solid var(--color-gray-400);box-shadow:inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);cursor:pointer}.checkbox.sc-scout-checkbox:active{background-color:var(--color-background-brand-subtle-pressed)}.checkbox.sc-scout-checkbox:checked:hover{background-color:var(--color-background-brand-hovered);border-color:var(--color-background-brand-hovered);box-shadow:none}.checkbox.sc-scout-checkbox:checked{background-color:var(--color-background-brand-base);border-color:var(--color-background-brand-base)}.checkbox.sc-scout-checkbox::after{content:\"\";position:absolute;width:var(--spacing-10);height:var(--spacing-10);top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox.sc-scout-checkbox:checked::before{content:\"\";background-color:var(--color-text-brand-inverse);width:var(--spacing-6);height:var(--spacing-6);position:absolute;top:50%;left:50%;right:0;bottom:0;transform:translate(-50%, -50%);-webkit-mask-image:var(--icon-checkbox);mask-image:var(--icon-checkbox);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.checkbox.sc-scout-checkbox:disabled{pointer-events:none;background-color:var(--color-gray-100);border-color:var(--color-gray-100)}label.sc-scout-checkbox{display:flex;align-items:center;gap:var(--spacing-2);font:var(--type-label-base);color:var(--color-text-base)}";
-
-const ScoutCheckbox = /*@__PURE__*/ proxyCustomElement(class ScoutCheckbox extends Mixin(inputMixin) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.scoutInputChange = createEvent(this, "scoutInputChange");
-        this.scoutBlur = createEvent(this, "scoutBlur");
-        this._scoutValidate = createEvent(this, "_scoutValidate");
-        this._scoutInvalid = createEvent(this, "_scoutInvalid");
-        this._scoutFieldId = createEvent(this, "_scoutFieldId");
-        this.scoutChecked = createEvent(this, "scoutChecked");
-    }
-    checked = false;
-    disabled = false;
-    /**
-     * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.
-     */
-    ariaLabelledby;
-    label;
-    value;
-    name;
-    scoutChecked;
-    onChange(event) {
-        const checkbox = event.target;
-        this.scoutChecked.emit({
-            checked: checkbox.checked,
-            element: checkbox,
-        });
-    }
-    render() {
-        const Tag = this.label?.length ? "label" : "div";
-        return (h(Tag, { key: '67b42b2b686fffecf891da832236fde663b740dc' }, h("input", { key: '81821918d102e1ca809915c14a20aa0847f46e30', ref: (el) => this.setInputRef(el), id: this.ariaId, type: "checkbox", value: this.value, name: this.name, class: "checkbox", style: { "--icon-checkbox": `url(${checkSvg})` }, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked, onChange: (event) => {
-                this.onInput();
-                this.onChange(event);
-            }, onBlur: () => this.onBlur(), onInvalid: () => this.onInvalid() }), this.label));
-    }
-    static get style() { return checkboxCss; }
-}, [770, "scout-checkbox", {
-        "validate": [16],
-        "checked": [4],
-        "disabled": [4],
-        "ariaLabelledby": [1, "aria-labelledby"],
-        "label": [1],
-        "value": [1],
-        "name": [1],
-        "ariaId": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["scout-checkbox"];
-    components.forEach(tagName => { switch (tagName) {
-        case "scout-checkbox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ScoutCheckbox);
-            }
-            break;
-    } });
-}
-
-export { ScoutCheckbox as S, defineCustomElement as d };
-//# sourceMappingURL=p-CLzh39Ll.js.map
-
-//# sourceMappingURL=p-CLzh39Ll.js.map

package/dist/components/p-CLzh39Ll.js.map

@@ -1 +0,0 @@
-{"file":"p-CLzh39Ll.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,4fAA4f;;ACA7gB,MAAM,WAAW,GAAG,woDAAwoD;;ACuB/oD,MAAA,aACX,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAQ,KAAK,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;;IAGjB,OAAO,GAAY,KAAK;IAExB,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,cAAc;AAEd,IAAA,KAAK;AAEL,IAAA,KAAK;AAEL,IAAA,IAAI;AAEH,IAAA,YAAY;AAKrB,IAAA,QAAQ,CAAC,KAAY,EAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B;AAEjD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;YACrB,OAAO,EAAE,QAAQ,CAAC,OAAO;AACzB,YAAA,OAAO,EAAE,QAAQ;AAClB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK;QAChD,QACE,EAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,EACjC,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAOC,QAAS,CAAA,CAAA,CAAG,EAAE,qBAChC,IAAI,CAAC,cAAc,EAAA,eAAA,EACrB,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,KAAK,KAAI;gBAClB,IAAI,CAAC,OAAO,EAAE;AACd,gBAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACtB,aAAC,EACD,MAAM,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC3B,SAAS,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EACjC,CAAA,EACD,IAAI,CAAC,KAAK,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","checkIcon"],"sources":["../../node_modules/.pnpm/@tabler+icons@3.35.0/node_modules/@tabler/icons/icons/outline/check.svg","src/components/checkbox/checkbox.css?tag=scout-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  class=\"icon icon-tabler icons-tabler-outline icon-tabler-check\"\n>\n  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M5 12l5 5l10 -10\" />\n</svg>",".checkbox {\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  appearance: none;\n  -webkit-appearance: none;\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  border-radius: 3px;\n  background-color: var(--color-text-brand-inverse);\n  border: 2px solid var(--color-gray-300);\n  position: relative;\n}\n\n.checkbox:hover {\n  border: 2px solid var(--color-gray-400);\n  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);\n  cursor: pointer;\n}\n\n.checkbox:active {\n  background-color: var(--color-background-brand-subtle-pressed);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--color-background-brand-hovered);\n  border-color: var(--color-background-brand-hovered);\n  box-shadow: none;\n}\n\n.checkbox:checked {\n  background-color: var(--color-background-brand-base);\n  border-color: var(--color-background-brand-base);\n}\n\n.checkbox::after {\n  content: \"\";\n  position: absolute;\n  width: var(--spacing-10);\n  height: var(--spacing-10);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.checkbox:checked::before {\n  content: \"\";\n  background-color: var(--color-text-brand-inverse);\n  width: var(--spacing-6);\n  height: var(--spacing-6);\n  position: absolute;\n  /* Needed because of the border */\n  top: 50%;\n  left: 50%;\n  right: 0;\n  bottom: 0;\n  transform: translate(-50%, -50%);\n  mask-image: var(--icon-checkbox);\n  mask-repeat: no-repeat;\n}\n\n.checkbox:disabled {\n  pointer-events: none;\n  background-color: var(--color-gray-100);\n  border-color: var(--color-gray-100);\n}\n\nlabel {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-2);\n  font: var(--type-label-base);\n  color: var(--color-text-base);\n}\n","import {\n  Component,\n  type ComponentInterface,\n  Event,\n  type EventEmitter,\n  h,\n  Mixin,\n  Prop,\n} from \"@stencil/core\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\nimport { inputMixin } from \"../../mixins/inputMixin\";\n\n/**\n * The checkbox component is used to let users select one or more options from a\n * set. For toggling a single option, consider using the Switch component\n * instead. When used in a form, make sure to wrap it in a Field component to\n * display a label, help text, and error messages.\n */\n@Component({\n  tag: \"scout-checkbox\",\n  styleUrl: \"checkbox.css\",\n  scoped: true,\n})\nexport class ScoutCheckbox\n  extends Mixin(inputMixin)\n  implements ComponentInterface\n{\n  @Prop() checked: boolean = false;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Use this prop if you need to connect your checkbox with another element describing its use, other than the property label.\n   */\n  @Prop() ariaLabelledby: string;\n\n  @Prop() label: string;\n\n  @Prop() value: string;\n\n  @Prop() name: string;\n\n  @Event() scoutChecked: EventEmitter<{\n    checked: boolean;\n    element: HTMLInputElement;\n  }>;\n\n  onChange(event: Event) {\n    const checkbox = event.target as HTMLInputElement;\n\n    this.scoutChecked.emit({\n      checked: checkbox.checked,\n      element: checkbox,\n    });\n  }\n\n  render() {\n    const Tag = this.label?.length ? \"label\" : \"div\";\n    return (\n      <Tag>\n        <input\n          ref={(el) => this.setInputRef(el)}\n          id={this.ariaId}\n          type=\"checkbox\"\n          value={this.value}\n          name={this.name}\n          class=\"checkbox\"\n          style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.checked}\n          onChange={(event) => {\n            this.onInput();\n            this.onChange(event);\n          }}\n          onBlur={() => this.onBlur()}\n          onInvalid={() => this.onInvalid()}\n        />\n        {this.label}\n      </Tag>\n    );\n  }\n}\n"],"version":3}