@six-group/ui-library 0.0.0-insider.7c3e3d8 → 0.0.0-insider.7c990f3

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

@@ -1,4 +1,7 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
+import { EventListeners } from "../../utils/event-listeners";
+import FormControl from "../../functional-components/form-control/form-control";
+import { hasSlot } from "../../utils/slot";
 let id = 0;
 /**
  * @since 1.0
@@ -7,6 +10,7 @@ let id = 0;
  * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
  *
  * @slot - The switch's label.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
  *
  * @part base - The component's base wrapper.
  * @part control - The switch control.
@@ -14,388 +18,394 @@ let id = 0;
  * @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"
+    constructor() {
+        this.switchId = `switch-${++id}`;
+        this.labelId = `switch-label-${id}`;
+        this.errorTextId = `input-error-text-${id}`;
+        this.eventListeners = new EventListeners();
+        this.handleSlotChange = () => {
+            this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
+        };
+        this.handleClick = () => {
+            if (this.inputElement != null) {
+                this.checked = this.inputElement.checked;
+                this.sixChange.emit(this.checked);
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the switch.",
-          "tags": []
-        }
-      },
-      "removeFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit(this.checked);
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                this.checked = false;
+                this.sixChange.emit(this.checked);
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Removes focus from the switch.",
-          "tags": []
-        }
-      },
-      "reportValidity": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+            if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                this.checked = true;
+                this.sixChange.emit(this.checked);
             }
-          },
-          "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": []
+        };
+        this.handleMouseDown = (event) => {
+            var _a;
+            // Prevent clicks on the label from briefly blurring the input
+            event.preventDefault();
+            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.hasFocus = false;
+        this.hasErrorTextSlot = false;
+        this.name = '';
+        this.value = 'on';
+        this.disabled = false;
+        this.required = false;
+        this.checked = false;
+        this.label = '';
+        this.errorText = '';
+        this.errorTextCount = undefined;
+        this.invalid = false;
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    handleCheckedChange() {
+        if (this.inputElement != null) {
+            this.inputElement.checked = this.checked;
+            this.checked = this.inputElement.checked;
         }
-      },
-      "setCustomValidity": {
-        "complexType": {
-          "signature": "(message: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.forward('six-switch-change', 'change', this.host);
+        this.eventListeners.forward('six-switch-blur', 'blur', this.host);
+        this.eventListeners.forward('six-switch-focus', 'focus', this.host);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        this.eventListeners.removeAll();
+    }
+    handleLabelChange() {
+        this.handleSlotChange();
+    }
+    /** Sets focus on the switch. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the switch. */
+    async removeFocus() {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    render() {
+        return (h(FormControl, { inputId: this.switchId, label: this.label, labelId: this.labelId, hasLabelSlot: false, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, 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.inputElement = 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,
+                "defaultValue": "''"
+            },
+            "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,
+                "defaultValue": "'on'"
+            },
+            "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 show an asterisk beneath the label."
+                },
+                "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"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message shown, if `invalid` is set to true."
+                },
+                "attribute": "error-text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "errorTextCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1"
+                },
+                "attribute": "error-text-count",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true and an error message is provided by `errorText`, the error message is displayed."
+                },
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
             }
-          },
-          "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"
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "hasErrorTextSlot": {}
+        };
+    }
+    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",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "tags": [],
+                            "text": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the switch.",
+                    "tags": []
+                }
+            },
+            "removeFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes focus from the switch.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Resets the formcontrol",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "checked",
-        "methodName": "handleCheckedChange"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "handleCheckedChange"
+            }, {
+                "propName": "errorText",
+                "methodName": "handleLabelChange"
+            }, {
+                "propName": "label",
+                "methodName": "handleLabelChange"
+            }];
+    }
 }
 //# sourceMappingURL=six-switch.js.map