@six-group/ui-library 3.0.0-beta.1.8 → 4.0.0-beta.1

package/dist/collection/components/six-checkbox/six-checkbox.js

@@ -1,4 +1,4 @@
-import { Component, Event, Method, Prop, State, Watch, h, Element } from '@stencil/core';
+import { h } from '@stencil/core';
 import FormControl from '../../functional-components/form-control/form-control';
 import { hasSlot } from '../../utils/slot';
 import { EventListeners } from '../../utils/event-listeners';
@@ -27,27 +27,21 @@ export class SixCheckbox {
     this.customErrorText = '';
     this.customValidation = false;
     this.eventListeners = new EventListeners();
+    /** default state whether the radio button should be checked or not when resetting */
+    this.defaultState = false;
     this.hasFocus = false;
     this.hasLabelSlot = false;
     this.hasErrorTextSlot = false;
-    /** Set to true to disable the checkbox. */
+    this.name = undefined;
+    this.value = undefined;
     this.disabled = false;
-    /** Set to true to make the checkbox a required field. */
     this.required = false;
-    /** The checkbox label. Alternatively, you can use the label slot. */
     this.label = '';
-    /** The checkbox's error text. Alternatively, you can use the error-text slot. */
     this.errorText = '';
-    /** Set to true to draw the checkbox in a checked state. */
     this.checked = false;
-    /** Set to true to draw the checkbox in an indeterminate state. */
     this.indeterminate = false;
-    /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
     this.invalid = false;
-    /** Set to display the error text on blur and not when typing */
     this.errorOnBlur = false;
-    /** default state whether the radio button should be checked or not when resetting */
-    this.defaultState = false;
   }
   handleCheckedChange() {
     if (!this.input) {
@@ -145,406 +139,403 @@ export class SixCheckbox {
     return this.invalid && (!this.errorOnBlur || !this.hasFocus);
   }
   render() {
-    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.displayError() },
-      h("label", { part: "base", class: {
-          checkbox: true,
-          'checkbox--checked': this.checked,
-          'checkbox--disabled': this.disabled,
-          'checkbox--focused': this.hasFocus,
-          'checkbox--invalid': this.invalid,
-          'checkbox--indeterminate': this.indeterminate,
-        }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown },
-        h("span", { part: "control", class: "checkbox__control" },
-          this.checked && (h("span", { part: "checked-icon", class: "checkbox__icon" },
-            h("svg", { viewBox: "0 0 16 16" },
-              h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" },
-                h("g", { stroke: "currentColor", "stroke-width": "2" },
-                  h("g", { transform: "translate(3.428571, 3.428571)" },
-                    h("path", { d: "M0,5.71428571 L3.42857143,9.14285714" }),
-                    h("path", { d: "M9.14285714,0 L3.42857143,9.14285714" }))))))),
-          !this.checked && this.indeterminate && (h("span", { part: "indeterminate-icon", class: "checkbox__icon" },
-            h("svg", { viewBox: "0 0 16 16" },
-              h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" },
-                h("g", { stroke: "currentColor", "stroke-width": "2" },
-                  h("g", { transform: "translate(2.285714, 6.857143)" },
-                    h("path", { d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))),
-          h("input", { ref: (el) => (this.input = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid })),
-        h("span", { part: "text", id: this.textId, class: "checkbox__text" },
-          h("slot", null)))));
+    return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, errorText: this.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.displayError() }, h("label", { part: "base", class: {
+        checkbox: true,
+        'checkbox--checked': this.checked,
+        'checkbox--disabled': this.disabled,
+        'checkbox--focused': this.hasFocus,
+        'checkbox--invalid': this.invalid,
+        'checkbox--indeterminate': this.indeterminate,
+      }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "checkbox__control" }, this.checked && (h("span", { part: "checked-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(3.428571, 3.428571)" }, h("path", { d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(2.285714, 6.857143)" }, h("path", { d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { ref: (el) => (this.input = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid })), h("span", { part: "text", id: this.textId, class: "checkbox__text" }, h("slot", null)))));
   }
   static get is() { return "six-checkbox"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-checkbox.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-checkbox.css"]
-  }; }
-  static get properties() { return {
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The checkbox's name attribute."
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The checkbox's value attribute."
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to disable the checkbox."
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to make the checkbox a required field."
-      },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The checkbox label. Alternatively, you can use the label slot."
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "errorText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The checkbox's error text. Alternatively, you can use the error-text slot."
-      },
-      "attribute": "error-text",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "checked": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-checkbox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-checkbox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The checkbox's name attribute."
+        },
+        "attribute": "name",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw the checkbox in a checked state."
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The checkbox's value attribute."
+        },
+        "attribute": "value",
+        "reflect": false
       },
-      "attribute": "checked",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "indeterminate": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to disable the checkbox."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw the checkbox in an indeterminate state."
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to make the checkbox a required field."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "indeterminate",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "invalid": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The checkbox label. Alternatively, you can use the label slot."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "This will be true when the control is in an invalid state. Validity is determined by the `required` prop."
+      "errorText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The checkbox's error text. Alternatively, you can use the error-text slot."
+        },
+        "attribute": "error-text",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "invalid",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "errorOnBlur": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to draw the checkbox in a checked state."
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to display the error text on blur and not when typing"
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to draw the checkbox in an indeterminate state."
+        },
+        "attribute": "indeterminate",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "error-on-blur",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "hasFocus": {},
-    "hasLabelSlot": {},
-    "hasErrorTextSlot": {}
-  }; }
-  static get events() { return [{
-      "method": "sixBlur",
-      "name": "six-checkbox-blur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the control loses focus."
+      "invalid": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This will be true when the control is in an invalid state. Validity is determined by the `required` prop."
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
+      "errorOnBlur": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to display the error text on blur and not when typing"
+        },
+        "attribute": "error-on-blur",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasFocus": {},
+      "hasLabelSlot": {},
+      "hasErrorTextSlot": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sixBlur",
+        "name": "six-checkbox-blur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the control loses focus."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
           }
         }
-      }
-    }, {
-      "method": "sixChange",
-      "name": "six-checkbox-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the control's checked state changes."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
+      }, {
+        "method": "sixChange",
+        "name": "six-checkbox-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the control's checked state changes."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
           }
         }
-      }
-    }, {
-      "method": "sixFocus",
-      "name": "six-checkbox-focus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the control gains focus."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
+      }, {
+        "method": "sixFocus",
+        "name": "six-checkbox-focus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the control gains focus."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
           },
-          "FocusOptions": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets focus on the checkbox.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Sets focus on the checkbox.",
-        "tags": []
-      }
-    },
-    "removeFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "removeFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Removes focus from the checkbox.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Removes focus from the checkbox.",
-        "tags": []
-      }
-    },
-    "reportValidity": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "reportValidity": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
         },
-        "return": "Promise<boolean>"
+        "docs": {
+          "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Checks for validity and shows the browser's validation message if the control is invalid.",
-        "tags": []
-      }
-    },
-    "checkValidity": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "checkValidity": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
         },
-        "return": "Promise<boolean>"
+        "docs": {
+          "text": "Checks for validity.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Checks for validity.",
-        "tags": []
-      }
-    },
-    "setCustomValidity": {
-      "complexType": {
-        "signature": "(message: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "setCustomValidity": {
+        "complexType": {
+          "signature": "(message: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Sets a custom validation message. If `message` is not empty, the field will be considered invalid.",
-        "tags": []
-      }
-    },
-    "reset": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "reset": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Resets the formcontrol",
-        "tags": []
+        "docs": {
+          "text": "Resets the formcontrol",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "checked",
-      "methodName": "handleCheckedChange"
-    }, {
-      "propName": "indeterminate",
-      "methodName": "handleCheckedChange"
-    }, {
-      "propName": "errorText",
-      "methodName": "handleLabelChange"
-    }, {
-      "propName": "label",
-      "methodName": "handleLabelChange"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "checked",
+        "methodName": "handleCheckedChange"
+      }, {
+        "propName": "indeterminate",
+        "methodName": "handleCheckedChange"
+      }, {
+        "propName": "errorText",
+        "methodName": "handleLabelChange"
+      }, {
+        "propName": "label",
+        "methodName": "handleLabelChange"
+      }];
+  }
 }
+//# sourceMappingURL=six-checkbox.js.map