@scouterna/ui-webc 0.2.10 → 2.0.0

package/dist/collection/components/checkbox/checkbox.css

@@ -0,0 +1,81 @@
+.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:hover {
+  border: 2px solid var(--color-gray-400);
+  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);
+  cursor: pointer;
+}
+
+.checkbox:active {
+  background-color: var(--color-background-brand-subtle-pressed);
+}
+
+.checkbox:checked:hover {
+  background-color: var(--color-background-brand-hovered);
+  border: 2px solid var(--color-background-brand-hovered);
+  box-shadow: none;
+}
+
+.checkbox:checked {
+  background-color: var(--color-background-brand-base);
+  border-color: var(--color-background-brand-base);
+}
+
+.checkbox::after {
+  content: "";
+  position: absolute;
+  width: var(--spacing-10);
+  height: var(--spacing-10);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.checkbox:checked::before {
+  content: "";
+  background-color: var(--color-text-brand-inverse);
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  position: absolute;
+  /* Needed because of the border */
+  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:disabled {
+  pointer-events: none;
+  background-color: var(--color-gray-100);
+  border-color: var(--color-gray-100);
+}
+
+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/checkbox/checkbox.js

@@ -0,0 +1,176 @@
+import { h, } from "@stencil/core";
+import checkIcon from "@tabler/icons/outline/check.svg";
+export class ScoutCheckbox {
+    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;
+    ariaId;
+    scoutCheckboxChecked;
+    /**
+     * 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 checkbox = event.target;
+        console.log("checkbox", checkbox.checked);
+        this.scoutCheckboxChecked.emit({
+            checked: checkbox.checked,
+            element: checkbox,
+        });
+    }
+    /*
+    todo:
+    - Wrap checkbox with label if used.
+    - make sure it works with field nicely with label.
+    */
+    render() {
+        const Tag = this.label && this.label.length ? "label" : "div";
+        return (h(Tag, { key: '2d97627d29b09521936eeef81419673d70fc75f1' }, this.label, h("span", { key: 'f62b4e360f03b4b6fb6e8fee326756552a5a631d', class: "inlineDivider" }), h("input", { key: '7ca6b74e12c369fc937d1b8c85e70c52fd9aa25c', class: "checkbox", onChange: (event) => this.onClick(event), style: { "--icon-checkbox": `url(${checkIcon})` }, type: "checkbox", id: this.ariaId, "aria-labelledby": this.ariaLabelledby, "aria-disabled": this.disabled, disabled: this.disabled, checked: this.checked })));
+    }
+    static get is() { return "scout-checkbox"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "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 checkbox 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": "scoutCheckboxChecked",
+                "name": "scoutCheckboxChecked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    checked: boolean;\n    element: HTMLInputElement;\n  }",
+                    "resolved": "{ checked: 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=checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,iCAAiC,CAAC;AAOxD,MAAM,OAAO,aAAa;IAChB,OAAO,GAAY,KAAK,CAAC;IAEzB,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,cAAc,CAAS;IAEvB,KAAK,CAAS;IAEb,MAAM,CAAS;IAEf,oBAAoB,CAG1B;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,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;QAClD,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;QAE1C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;YAC7B,OAAO,EAAE,QAAQ,CAAC,OAAO;YACzB,OAAO,EAAE,QAAQ;SAClB,CAAC,CAAC;IACL,CAAC;IACD;;;;MAIE;IAEF,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,UAAU,EAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAO,SAAS,GAAG,EAAE,EACjD,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\";\nimport checkIcon from \"@tabler/icons/outline/check.svg\";\n\n@Component({\n  tag: \"scout-checkbox\",\n  styleUrl: \"checkbox.css\",\n  scoped: true,\n})\nexport class ScoutCheckbox {\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  @State() ariaId: string;\n\n  @Event() scoutCheckboxChecked: EventEmitter<{\n    checked: 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 checkbox = event.target as HTMLInputElement;\n    console.log(\"checkbox\", checkbox.checked);\n\n    this.scoutCheckboxChecked.emit({\n      checked: checkbox.checked,\n      element: checkbox,\n    });\n  }\n  /*\n  todo:\n  - Wrap checkbox with label if used.\n  - make sure it works with field nicely with label.\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=\"checkbox\"\n          onChange={(event) => this.onClick(event)}\n          style={{ \"--icon-checkbox\": `url(${checkIcon})` }}\n          type=\"checkbox\"\n          id={this.ariaId}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.disabled}\n          disabled={this.disabled}\n          checked={this.checked}\n        />\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/field/field.css

@@ -0,0 +1,26 @@
+.field {
+  display: flex;
+  flex-direction: column;
+}
+
+.label {
+  font: var(--type-label-sm);
+  font-weight: 600;
+  color: var(--color-text-base);
+}
+
+.error-text {
+  font: var(--type-label-sm);
+  color: var(--color-text-danger-base);
+  margin: var(--spacing-1) 0 0 0;
+}
+
+.error-text:empty {
+  margin: 0;
+}
+
+.help-text {
+  font: var(--type-label-sm);
+  color: var(--color-gray-600);
+  margin: var(--spacing-1) 0 0 0;
+}

package/dist/collection/components/field/field.js

@@ -0,0 +1,119 @@
+import { h } from "@stencil/core";
+export class ScoutField {
+    /**
+     * Label shown above the field.
+     */
+    label;
+    /**
+     * Help text shown below the field.
+     */
+    helpText;
+    inputId;
+    errorText = null;
+    errorHidden = false;
+    hostElement;
+    catchFieldId(event) {
+        event.stopPropagation();
+        this.inputId = event.detail;
+    }
+    handleInputChange(event) {
+        const { element } = event.detail;
+        this.errorHidden = true;
+        if (element.validity.valid) {
+            this.errorText = null;
+        }
+        else {
+            this.errorText = element.validationMessage;
+        }
+    }
+    handleValidationBlur() {
+        this.errorHidden = false;
+    }
+    render() {
+        return (h("div", { key: '0ba5919cf10618bf4617e1ced85485a6d136f668', class: "field" }, h("label", { key: '55cac1b4eb9c0d58ea1e4045b9c85c30a384d99b', htmlFor: this.inputId, class: "label" }, this.label), h("slot", { key: 'b5931e88ad82e693ff1dc24acd99db393f048fab' }), h("p", { key: '6354b6187ba63158bdd5c784787f1612eb641db4', class: "error-text", "aria-live": "polite" }, !this.errorHidden && this.errorText), this.helpText && h("p", { key: 'ba9e47977b682fbe28afd61c6a00832506860e56', class: "help-text" }, this.helpText)));
+    }
+    static get is() { return "scout-field"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label shown above the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Help text shown below the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help-text"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputId": {},
+            "errorText": {},
+            "errorHidden": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get listeners() {
+        return [{
+                "name": "_fieldId",
+                "method": "catchFieldId",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "scoutInputChange",
+                "method": "handleInputChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "scoutBlur",
+                "method": "handleValidationBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/components/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAe3E,MAAM,OAAO,UAAU;IACrB;;OAEG;IACK,KAAK,CAAU;IAEvB;;OAEG;IACK,QAAQ,CAAU;IAEjB,OAAO,CAAS;IAChB,SAAS,GAAkB,IAAI,CAAC;IAChC,WAAW,GAAY,KAAK,CAAC;IAE3B,WAAW,CAAe;IAGrC,YAAY,CAAC,KAA0B;QACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;IAC9B,CAAC;IAGD,iBAAiB,CACf,KAGE;QAEF,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAEjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QAC7C,CAAC;IACH,CAAC;IAGD,oBAAoB;QAClB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,OAAO;YAChB,8DAAO,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,OAAO,IACxC,IAAI,CAAC,KAAK,CACL;YACR,8DAAQ;YACR,0DAAG,KAAK,EAAC,YAAY,eAAW,QAAQ,IACrC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,CAClC;YACH,IAAI,CAAC,QAAQ,IAAI,0DAAG,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAK,CACtD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Listen, Prop, State } from \"@stencil/core\";\n\ntype ValidatableElement =\n  | HTMLButtonElement\n  | HTMLFieldSetElement\n  | HTMLInputElement\n  | HTMLOutputElement\n  | HTMLSelectElement\n  | HTMLTextAreaElement;\n\n@Component({\n  tag: \"scout-field\",\n  styleUrl: \"field.css\",\n  scoped: true,\n})\nexport class ScoutField {\n  /**\n   * Label shown above the field.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Help text shown below the field.\n   */\n  @Prop() helpText?: string;\n\n  @State() inputId: string;\n  @State() errorText: string | null = null;\n  @State() errorHidden: boolean = false;\n\n  @Element() hostElement!: HTMLElement;\n\n  @Listen(\"_fieldId\")\n  catchFieldId(event: CustomEvent<string>) {\n    event.stopPropagation();\n    this.inputId = event.detail;\n  }\n\n  @Listen(\"scoutInputChange\")\n  handleInputChange(\n    event: CustomEvent<{\n      value: string;\n      element: ValidatableElement;\n    }>,\n  ) {\n    const { element } = event.detail;\n\n    this.errorHidden = true;\n    if (element.validity.valid) {\n      this.errorText = null;\n    } else {\n      this.errorText = element.validationMessage;\n    }\n  }\n\n  @Listen(\"scoutBlur\")\n  handleValidationBlur() {\n    this.errorHidden = false;\n  }\n\n  render() {\n    return (\n      <div class=\"field\">\n        <label htmlFor={this.inputId} class=\"label\">\n          {this.label}\n        </label>\n        <slot />\n        <p class=\"error-text\" aria-live=\"polite\">\n          {!this.errorHidden && this.errorText}\n        </p>\n        {this.helpText && <p class=\"help-text\">{this.helpText}</p>}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/input/input.css

@@ -0,0 +1,15 @@
+.input {
+  height: var(--spacing-10);
+  padding: var(--spacing-2);
+  font: var(--type-body-base);
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--spacing-2);
+  background-color: var(--color-white);
+  color: var(--color-text-base);
+}
+
+.input:disabled {
+  background-color: var(--color-gray-100);
+  color: var(--color-gray-700);
+  cursor: not-allowed;
+}