@db-ux/wc-core-components 2.0.0-0-custom-select-16b8cce → 2.0.0

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

@@ -1,5 +1,5 @@
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
-import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { h, } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -12,31 +12,34 @@ export class DBCheckbox {
         this._messageId = undefined;
         this._validMessageId = undefined;
         this._invalidMessageId = undefined;
+        this._invalidMessage = undefined;
         this._descByIds = "";
         this._voiceOverFallback = "";
     }
-    handleChange(event) {
-        var _a, _b, _c, _d, _e, _f;
-        if (this.onChange) {
-            this.onChange.emit(event);
-        }
-        if (this.change) {
-            this.change(event);
-        }
+    hasValidState() {
+        var _a;
+        return !!((_a = this.validMessage) !== null && _a !== void 0 ? _a : this.validation === "valid");
+    }
+    handleValidation() {
+        var _a, _b, _c, _d;
         /* For a11y reasons we need to map the correct message with the checkbox */
         if (!((_a = this._ref) === null || _a === void 0 ? void 0 : _a.validity.valid) || this.validation === "invalid") {
             this._descByIds = this._invalidMessageId;
+            this._invalidMessage =
+                this.invalidMessage ||
+                    ((_b = this._ref) === null || _b === void 0 ? void 0 : _b.validationMessage) ||
+                    DEFAULT_INVALID_MESSAGE;
             if (hasVoiceOver()) {
-                this._voiceOverFallback =
-                    (_d = (_b = this.invalidMessage) !== null && _b !== void 0 ? _b : (_c = this._ref) === null || _c === void 0 ? void 0 : _c.validationMessage) !== null && _d !== void 0 ? _d : DEFAULT_INVALID_MESSAGE;
+                this._voiceOverFallback = this._invalidMessage;
                 delay(() => (this._voiceOverFallback = ""), 1000);
             }
         }
-        else if (this.validation === "valid" ||
-            (((_e = this._ref) === null || _e === void 0 ? void 0 : _e.validity.valid) && this.required)) {
+        else if (this.hasValidState() &&
+            ((_c = this._ref) === null || _c === void 0 ? void 0 : _c.validity.valid) &&
+            this.required) {
             this._descByIds = this._validMessageId;
             if (hasVoiceOver()) {
-                this._voiceOverFallback = (_f = this.validMessage) !== null && _f !== void 0 ? _f : DEFAULT_VALID_MESSAGE;
+                this._voiceOverFallback = (_d = this.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE;
                 delay(() => (this._voiceOverFallback = ""), 1000);
             }
         }
@@ -47,20 +50,20 @@ export class DBCheckbox {
             this._descByIds = "";
         }
     }
-    handleBlur(event) {
-        if (this.onBlur) {
-            this.onBlur.emit(event);
+    handleChange(event) {
+        if (this.change) {
+            this.change.emit(event);
         }
+        this.handleValidation();
+    }
+    handleBlur(event) {
         if (this.blur) {
-            this.blur(event);
+            this.blur.emit(event);
         }
     }
     handleFocus(event) {
-        if (this.onFocus) {
-            this.onFocus.emit(event);
-        }
         if (this.focus) {
-            this.focus(event);
+            this.focus.emit(event);
         }
     }
     /**
@@ -96,6 +99,16 @@ export class DBCheckbox {
         }
     }
     watch0Fn() {
+        var _a;
+        this._invalidMessage =
+            this.invalidMessage ||
+                ((_a = this._ref) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
+                DEFAULT_INVALID_MESSAGE;
+    }
+    watch0() {
+        this.watch0Fn();
+    }
+    watch1Fn() {
         if (this._id) {
             const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;
             this._messageId = messageId;
@@ -106,32 +119,32 @@ export class DBCheckbox {
             }
         }
     }
-    watch0() {
-        this.watch0Fn();
+    watch1() {
+        this.watch1Fn();
     }
-    watch1Fn() {
+    watch2Fn() {
         if (this._ref) {
             if (this.indeterminate !== undefined) {
                 // When indeterminate is set, the value of the checked prop only impacts the form submitted values.
                 // It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
-                this._ref.indeterminate = this.indeterminate;
+                this._ref.indeterminate = !!getBoolean(this.indeterminate);
             }
         }
     }
-    watch1() {
-        this.watch1Fn();
+    watch2() {
+        this.watch2Fn();
     }
-    watch2Fn() {
+    watch3Fn() {
         if (this.initialized && this._ref) {
             // in angular this must be set via native element
             if (this.checked != undefined) {
-                this._ref.checked = this.checked;
+                this._ref.checked = !!getBoolean(this.checked);
             }
             this.initialized = false;
         }
     }
-    watch2() {
-        this.watch2Fn();
+    watch3() {
+        this.watch3Fn();
     }
     componentDidLoad() {
         var _a;
@@ -142,21 +155,23 @@ export class DBCheckbox {
         this._messageId = mId + DEFAULT_MESSAGE_ID_SUFFIX;
         this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
         this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
+        this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
         this.watch0Fn();
         this.watch1Fn();
         this.watch2Fn();
+        this.watch3Fn();
     }
     render() {
-        var _a, _b, _c;
-        return (h("div", { key: 'a0271b130c9ea285cf0ed8855ca6184e1bbd0dc2', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: '671bd2542c827f14c692b784b38dacddfba3e2e1', htmlFor: this._id }, h("input", { key: '2c570c34423a152cae7f300b8cd64ea37660af8a', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("div", { key: 'a1a0384951c739a12a75f9cd51afdbdfd51a9a2e', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: '755ba3bd5bc761d2207eb8479fc367959a46e83b', htmlFor: this._id }, h("input", { key: '9e4752cf34a51c4c1dd7de9de9438def286511dd', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, checked: this.checked, disabled: this.disabled, value: this.value, required: this.required, onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": this._descByIds }), this.label ? this.label : h("slot", null)), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, h("db-infotext", { key: 'c2616ac2d5953f553f758ac22ae493c6b4cd7c97', size: "small", semantic: "successful", id: this._validMessageId }, (_a = this.validMessage) !== null && _a !== void 0 ? _a : DEFAULT_VALID_MESSAGE), h("db-infotext", { key: 'b5b4f366e50fc282cc915c6161fb2e919a73093b', size: "small", semantic: "critical", id: this._invalidMessageId }, (_b = this.invalidMessage) !== null && _b !== void 0 ? _b : (((_c = this._ref) === null || _c === void 0 ? void 0 : _c.validationMessage) || DEFAULT_INVALID_MESSAGE)), h("span", { key: 'a852565958851811af7b2edf380f45d33e91479b', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": this._descByIds }), this.label ? this.label : h("slot", null)), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '575d9eef92ce0b4198b19cccc00fc115542d2e18', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '7a448fe4a8b2b7266df32ebb895a4397030fb960', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-checkbox"; }
     static get properties() {
         return {
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCheckboxProps[\"id\"]",
@@ -177,14 +192,14 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
-            "message": {
+            "invalidMessage": {
                 "type": "string",
+                "attribute": "invalid-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCheckboxProps[\"message\"]",
+                    "original": "DBCheckboxProps[\"invalidMessage\"]",
                     "resolved": "string",
                     "references": {
                         "DBCheckboxProps": {
@@ -202,15 +217,15 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "message",
                 "reflect": false
             },
-            "showMessage": {
-                "type": "boolean",
+            "message": {
+                "type": "string",
+                "attribute": "message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCheckboxProps[\"showMessage\"]",
-                    "resolved": "boolean",
+                    "original": "DBCheckboxProps[\"message\"]",
+                    "resolved": "string",
                     "references": {
                         "DBCheckboxProps": {
                             "location": "import",
@@ -227,15 +242,15 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-message",
                 "reflect": false
             },
-            "indeterminate": {
-                "type": "boolean",
+            "showMessage": {
+                "type": "any",
+                "attribute": "show-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCheckboxProps[\"indeterminate\"]",
-                    "resolved": "boolean",
+                    "original": "DBCheckboxProps[\"showMessage\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCheckboxProps": {
                             "location": "import",
@@ -252,15 +267,15 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "indeterminate",
                 "reflect": false
             },
-            "checked": {
-                "type": "boolean",
+            "indeterminate": {
+                "type": "any",
+                "attribute": "indeterminate",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCheckboxProps[\"checked\"]",
-                    "resolved": "boolean",
+                    "original": "DBCheckboxProps[\"indeterminate\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCheckboxProps": {
                             "location": "import",
@@ -277,38 +292,15 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false
             },
-            "change": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBCheckboxProps[\"change\"]",
-                    "resolved": "(event: Event) => void",
-                    "references": {
-                        "DBCheckboxProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "validation": {
-                "type": "string",
+            "checked": {
+                "type": "any",
+                "attribute": "checked",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCheckboxProps[\"validation\"]",
-                    "resolved": "\"invalid\" | \"no-validation\" | \"valid\"",
+                    "original": "DBCheckboxProps[\"checked\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCheckboxProps": {
                             "location": "import",
@@ -325,14 +317,14 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation",
                 "reflect": false
             },
-            "invalidMessage": {
+            "validMessage": {
                 "type": "string",
+                "attribute": "valid-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCheckboxProps[\"invalidMessage\"]",
+                    "original": "DBCheckboxProps[\"validMessage\"]",
                     "resolved": "string",
                     "references": {
                         "DBCheckboxProps": {
@@ -350,15 +342,15 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid-message",
                 "reflect": false
             },
-            "required": {
-                "type": "boolean",
+            "validation": {
+                "type": "string",
+                "attribute": "validation",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCheckboxProps[\"required\"]",
-                    "resolved": "boolean",
+                    "original": "DBCheckboxProps[\"validation\"]",
+                    "resolved": "\"invalid\" | \"no-validation\" | \"valid\"",
                     "references": {
                         "DBCheckboxProps": {
                             "location": "import",
@@ -375,15 +367,15 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false
             },
-            "validMessage": {
-                "type": "string",
+            "required": {
+                "type": "any",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBCheckboxProps[\"validMessage\"]",
-                    "resolved": "string",
+                    "original": "DBCheckboxProps[\"required\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCheckboxProps": {
                             "location": "import",
@@ -400,57 +392,11 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "valid-message",
                 "reflect": false
             },
-            "blur": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBCheckboxProps[\"blur\"]",
-                    "resolved": "(event: FocusEvent) => void",
-                    "references": {
-                        "DBCheckboxProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "focus": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBCheckboxProps[\"focus\"]",
-                    "resolved": "(event: FocusEvent) => void",
-                    "references": {
-                        "DBCheckboxProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/checkbox/model.ts::DBCheckboxProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCheckboxProps[\"className\"]",
@@ -471,11 +417,11 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCheckboxProps[\"size\"]",
@@ -496,15 +442,15 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false
             },
             "showLabel": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-label",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCheckboxProps[\"showLabel\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCheckboxProps": {
                             "location": "import",
@@ -521,11 +467,11 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-label",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCheckboxProps[\"name\"]",
@@ -546,15 +492,15 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "disabled": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCheckboxProps[\"disabled\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBCheckboxProps": {
                             "location": "import",
@@ -571,11 +517,11 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "value": {
                 "type": "any",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCheckboxProps[\"value\"]",
@@ -596,11 +542,11 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCheckboxProps[\"label\"]",
@@ -621,11 +567,11 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "messageIcon": {
                 "type": "string",
+                "attribute": "message-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBCheckboxProps[\"messageIcon\"]",
@@ -646,7 +592,6 @@ export class DBCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "message-icon",
                 "reflect": false
             }
         };
@@ -658,14 +603,15 @@ export class DBCheckbox {
             "_messageId": {},
             "_validMessageId": {},
             "_invalidMessageId": {},
+            "_invalidMessage": {},
             "_descByIds": {},
             "_voiceOverFallback": {}
         };
     }
     static get events() {
         return [{
-                "method": "onChange",
-                "name": "onChange",
+                "method": "change",
+                "name": "change",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -679,8 +625,8 @@ export class DBCheckbox {
                     "references": {}
                 }
             }, {
-                "method": "onBlur",
-                "name": "onBlur",
+                "method": "blur",
+                "name": "blur",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -694,8 +640,8 @@ export class DBCheckbox {
                     "references": {}
                 }
             }, {
-                "method": "onFocus",
-                "name": "onFocus",
+                "method": "focus",
+                "name": "focus",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -712,26 +658,32 @@ export class DBCheckbox {
     }
     static get watchers() {
         return [{
-                "propName": "_id",
+                "propName": "_ref",
                 "methodName": "watch0"
             }, {
-                "propName": "initialized",
+                "propName": "invalidMessage",
+                "methodName": "watch0"
+            }, {
+                "propName": "_id",
                 "methodName": "watch1"
+            }, {
+                "propName": "initialized",
+                "methodName": "watch2"
             }, {
                 "propName": "_ref",
-                "methodName": "watch1"
+                "methodName": "watch2"
             }, {
                 "propName": "indeterminate",
-                "methodName": "watch1"
+                "methodName": "watch2"
             }, {
                 "propName": "initialized",
-                "methodName": "watch2"
+                "methodName": "watch3"
             }, {
                 "propName": "_ref",
-                "methodName": "watch2"
+                "methodName": "watch3"
             }, {
                 "propName": "checked",
-                "methodName": "watch2"
+                "methodName": "watch3"
             }];
     }
 }