@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

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

@@ -1,393 +1,401 @@
-import { Component, Event, h, Method, Prop, State, Watch } from '@stencil/core';
-let id = 0;
-/**
- * @since 1.0
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot - The switch's label.
- *
- * @part base - The component's base wrapper.
- * @part control - The switch control.
- * @part thumb - The switch position indicator.
- * @part label - The switch label.
- */
-export class SixSwitch {
-  constructor() {
-    this.switchId = `switch-${++id}`;
-    this.labelId = `switch-label-${id}`;
-    this.hasFocus = false;
-    /** Set to true to disable the switch. */
-    this.disabled = false;
-    /** Set to true to make the switch a required field. */
-    this.required = false;
-    /** Set to true to draw the switch in a checked state. */
-    this.checked = false;
-    /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-    this.invalid = false;
-    /** default value the switch will be reverted to when reset is executed */
-    this.defaultValue = '';
-  }
-  handleCheckedChange() {
-    this.input.checked = this.checked;
-    this.sixChange.emit(this.checked);
-  }
-  connectedCallback() {
-    this.handleClick = this.handleClick.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-  }
-  componentWillLoad() {
-    this.defaultValue = this.value;
-  }
-  /** Sets focus on the switch. */
-  async setFocus(options) {
-    this.input.focus(options);
-  }
-  /** Removes focus from the switch. */
-  async removeFocus() {
-    this.input.blur();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    return this.input.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    return this.input.validity.valid;
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    this.input.setCustomValidity(message);
-    this.invalid = !this.input.checkValidity();
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    this.value = this.defaultValue;
-    this.input.setCustomValidity('');
-    this.invalid = false;
-  }
-  handleClick() {
-    this.checked = this.input.checked;
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.sixBlur.emit(this.checked);
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.sixFocus.emit();
-  }
-  handleKeyDown(event) {
-    if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      this.checked = false;
-    }
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      this.checked = true;
-    }
-  }
-  handleMouseDown(event) {
-    // Prevent clicks on the label from briefly blurring the input
-    event.preventDefault();
-    this.input.focus();
-  }
-  render() {
-    return (h("label", { part: "base", htmlFor: this.switchId, class: {
-        switch: true,
-        'switch--checked': this.checked,
-        'switch--disabled': this.disabled,
-        'switch--focused': this.hasFocus,
-      }, onMouseDown: this.handleMouseDown },
-      h("span", { part: "control", class: "switch__control" },
-        h("span", { part: "thumb", class: "switch__thumb" }),
-        h("input", { ref: (el) => (this.input = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })),
-      h("span", { part: "label", id: this.labelId, class: "switch__label" },
-        h("slot", null))));
-  }
-  static get is() { return "six-switch"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-switch.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-switch.css"]
-  }; }
-  static get properties() { return {
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The switch'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 switch'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 switch."
-      },
-      "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 switch a required field."
-      },
-      "attribute": "required",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "checked": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw the switch in a checked state."
-      },
-      "attribute": "checked",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "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"
-    }
-  }; }
-  static get states() { return {
-    "hasFocus": {}
-  }; }
-  static get events() { return [{
-      "method": "sixBlur",
-      "name": "six-switch-blur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the control loses focus."
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "sixChange",
-      "name": "six-switch-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the control's checked state changes."
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "sixFocus",
-      "name": "six-switch-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"
-          },
-          "FocusOptions": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the switch.",
-        "tags": []
-      }
-    },
-    "removeFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Removes focus from the switch.",
-        "tags": []
-      }
-    },
-    "reportValidity": {
-      "complexType": {
-        "signature": "() => Promise<boolean>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "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"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "Checks for validity.",
-        "tags": []
-      }
-    },
-    "setCustomValidity": {
-      "complexType": {
-        "signature": "(message: string) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "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"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Resets the formcontrol",
-        "tags": []
-      }
-    }
-  }; }
-  static get watchers() { return [{
-      "propName": "checked",
-      "methodName": "handleCheckedChange"
-    }]; }
-}
+import { h } from '@stencil/core';
+let id = 0;
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The switch's label.
+ *
+ * @part base - The component's base wrapper.
+ * @part control - The switch control.
+ * @part thumb - The switch position indicator.
+ * @part label - The switch label.
+ */
+export class SixSwitch {
+  constructor() {
+    this.switchId = `switch-${++id}`;
+    this.labelId = `switch-label-${id}`;
+    /** default value the switch will be reverted to when reset is executed */
+    this.defaultValue = '';
+    this.hasFocus = false;
+    this.name = undefined;
+    this.value = undefined;
+    this.disabled = false;
+    this.required = false;
+    this.checked = false;
+    this.invalid = false;
+  }
+  handleCheckedChange() {
+    this.input.checked = this.checked;
+    this.sixChange.emit(this.checked);
+  }
+  connectedCallback() {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+  }
+  componentWillLoad() {
+    this.defaultValue = this.value;
+  }
+  /** Sets focus on the switch. */
+  async setFocus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the switch. */
+  async removeFocus() {
+    this.input.blur();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  async reportValidity() {
+    return this.input.reportValidity();
+  }
+  /** Checks for validity. */
+  async checkValidity() {
+    return this.input.validity.valid;
+  }
+  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
+  async setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.invalid = !this.input.checkValidity();
+  }
+  /** Resets the formcontrol */
+  async reset() {
+    this.value = this.defaultValue;
+    this.input.setCustomValidity('');
+    this.invalid = false;
+  }
+  handleClick() {
+    this.checked = this.input.checked;
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.sixBlur.emit(this.checked);
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.sixFocus.emit();
+  }
+  handleKeyDown(event) {
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.checked = false;
+    }
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.checked = true;
+    }
+  }
+  handleMouseDown(event) {
+    // Prevent clicks on the label from briefly blurring the input
+    event.preventDefault();
+    this.input.focus();
+  }
+  render() {
+    return (h("label", { part: "base", htmlFor: this.switchId, class: {
+        switch: true,
+        'switch--checked': this.checked,
+        'switch--disabled': this.disabled,
+        'switch--focused': this.hasFocus,
+      }, onMouseDown: this.handleMouseDown }, h("span", { part: "control", class: "switch__control" }, h("span", { part: "thumb", class: "switch__thumb" }), h("input", { ref: (el) => (this.input = el), id: this.switchId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown })), h("span", { part: "label", id: this.labelId, class: "switch__label" }, h("slot", null))));
+  }
+  static get is() { return "six-switch"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-switch.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-switch.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The switch'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 switch'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 switch."
+        },
+        "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 switch a required field."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to draw the switch in a checked state."
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "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"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasFocus": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sixBlur",
+        "name": "six-switch-blur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the control loses focus."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "sixChange",
+        "name": "six-switch-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the control's checked state changes."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "sixFocus",
+        "name": "six-switch-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"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the switch.",
+          "tags": []
+        }
+      },
+      "removeFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Removes focus from the switch.",
+          "tags": []
+        }
+      },
+      "reportValidity": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "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"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "Checks for validity.",
+          "tags": []
+        }
+      },
+      "setCustomValidity": {
+        "complexType": {
+          "signature": "(message: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "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"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Resets the formcontrol",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "checked",
+        "methodName": "handleCheckedChange"
+      }];
+  }
+}
+//# sourceMappingURL=six-switch.js.map