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

package/dist/collection/components/select/select.js

@@ -1,4 +1,4 @@
-import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import { h, Fragment, } from "@stencil/core";
 /**
@@ -11,47 +11,37 @@ export class DBSelect {
         this._messageId = undefined;
         this._validMessageId = undefined;
         this._invalidMessageId = undefined;
+        this._invalidMessage = undefined;
         this._placeholderId = "";
         this._descByIds = "";
         this._value = "";
         this.initialized = false;
         this._voiceOverFallback = "";
     }
-    handleClick(event) {
-        if (this.onClick) {
-            this.onClick.emit(event);
-        }
-    }
-    handleInput(event) {
-        if (this.onInput) {
-            this.onInput.emit(event);
-        }
-        if (this.input) {
-            this.input(event);
-        }
+    hasValidState() {
+        var _a;
+        return !!((_a = this.validMessage) !== null && _a !== void 0 ? _a : this.validation === "valid");
     }
-    handleChange(event) {
-        var _a, _b, _c, _d, _e, _f;
-        if (this.onChange) {
-            this.onChange.emit(event);
-        }
-        if (this.change) {
-            this.change(event);
-        }
+    handleValidation() {
+        var _a, _b, _c, _d;
         /* For a11y reasons we need to map the correct message with the select */
         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);
             }
         }
@@ -62,20 +52,31 @@ export class DBSelect {
             this._descByIds = this._placeholderId;
         }
     }
-    handleBlur(event) {
-        if (this.onBlur) {
-            this.onBlur.emit(event);
+    handleClick(event) {
+        if (this.click) {
+            this.click.emit(event);
         }
+    }
+    handleInput(event) {
+        if (this.input) {
+            this.input.emit(event);
+        }
+        this.handleValidation();
+    }
+    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);
         }
     }
     getOptionLabel(option) {
@@ -115,6 +116,16 @@ export class DBSelect {
         }
     }
     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 && this.initialized) {
             const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;
             const placeholderId = this._id + DEFAULT_PLACEHOLDER_ID_SUFFIX;
@@ -131,14 +142,14 @@ export class DBSelect {
             this.initialized = false;
         }
     }
-    watch0() {
-        this.watch0Fn();
+    watch1() {
+        this.watch1Fn();
     }
-    watch1Fn() {
+    watch2Fn() {
         this._value = this.value;
     }
-    watch1() {
-        this.watch1Fn();
+    watch2() {
+        this.watch2Fn();
     }
     componentDidLoad() {
         var _a;
@@ -150,27 +161,28 @@ export class DBSelect {
         this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
         this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
         this._placeholderId = mId + DEFAULT_PLACEHOLDER_ID_SUFFIX;
+        this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
         this.watch0Fn();
         this.watch1Fn();
+        this.watch2Fn();
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return (h("div", { key: '85a29658a39b64e4205017e7888ef795d480deb5', class: cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon) }, h("label", { key: '1cfc3fb32ca1d4fddd964c866e3f5063d01bdd68', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: '19ec1171b29a57ec6e545c15e2a2ab38002fef12', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        var _a, _b, _c, _d;
+        return (h("div", { key: '12c4c4b0b3631810eeb09363775c1e43baa72359', class: cls("db-select", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-hide-icon": getHideProp(this.showIcon) }, h("label", { key: '08a0a9a3c09c285287e60c4405ecbbcf3978ee14', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("select", { key: '22968912b86ddb286f33f4f17305bc3c9d1a784b', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, required: this.required, disabled: this.disabled, id: this._id, name: this.name, size: this.size,
+            }, required: getBoolean(this.required, "required"), disabled: getBoolean(this.disabled, "disabled"), id: this._id, name: this.name, size: this.size,
             /* @ts-ignore */
-            value: (_b = this.value) !== null && _b !== void 0 ? _b : this._value, autocomplete: this.autocomplete, multiple: this.multiple, onInput: (event) => this.handleInput(event), onClick: (event) => this.handleClick(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": this._descByIds }, h("option", { key: '232c4bcf08fa6241c232a5853d61917b9fe6812d', hidden: true }), this.options
-            ? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => {
-                var _a;
-                return (h(Fragment, null, option.options ? (h("optgroup", { label: this.getOptionLabel(option) }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (h("option", { key: optgroupOption.value.toString(), value: optgroupOption.value, selected: optgroupOption.selected, disabled: optgroupOption.disabled }, this.getOptionLabel(optgroupOption)))))) : null, !option.options ? (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, this.getOptionLabel(option))) : null));
-            })
-            : null, h("slot", { key: 'f3630e5abaf877c9bbfc650a9cc126e78ac8d59d' })), h("span", { key: '9f770336f16272c43d124bf064868f3b42ed9084', id: this._placeholderId }, (_d = this.placeholder) !== null && _d !== void 0 ? _d : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, h("db-infotext", { key: '30b40e29195baeff0fed9ceec7ce4850b50dcf1b', size: "small", semantic: "successful", id: this._validMessageId }, (_e = this.validMessage) !== null && _e !== void 0 ? _e : DEFAULT_VALID_MESSAGE), h("db-infotext", { key: 'ed8335ee6d0cc6bc0b5f0b4e6e075cdee193e966', size: "small", semantic: "critical", id: this._invalidMessageId }, (_f = this.invalidMessage) !== null && _f !== void 0 ? _f : (((_g = this._ref) === null || _g === void 0 ? void 0 : _g.validationMessage) || DEFAULT_INVALID_MESSAGE)), h("span", { key: '4ed34ac0948c3df2d8a04ef03fae4aa501b64a2e', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            value: (_b = this.value) !== null && _b !== void 0 ? _b : this._value, autocomplete: this.autocomplete, multiple: this.multiple, onInput: (event) => this.handleInput(event), onClick: (event) => this.handleClick(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": this._descByIds }, h("option", { key: '65c5eb3e359672016745ddee6d76f54ac5a57abd', hidden: true }), this.options ? ((_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => {
+            var _a;
+            return (h(Fragment, null, option.options ? (h("optgroup", { label: this.getOptionLabel(option) }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (h("option", { key: optgroupOption.value.toString(), value: optgroupOption.value, selected: optgroupOption.selected, disabled: optgroupOption.disabled }, this.getOptionLabel(optgroupOption)))))) : null, !option.options ? (h("option", { value: option.value, disabled: option.disabled, selected: option.selected }, this.getOptionLabel(option))) : null));
+        })) : (h("slot", null))), h("span", { key: 'a47248bcabcd7022605e3033e258dd3e722c0b0e', id: this._placeholderId }, (_d = this.placeholder) !== null && _d !== void 0 ? _d : this.label), 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: '3967431568981c39ebbed80175d3d0b6b020a031', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'db45821fd19f5f5458a1f130ea32c33d374bc2f4', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-select"; }
     static get properties() {
         return {
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"id\"]",
@@ -191,14 +203,14 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
-            "message": {
+            "invalidMessage": {
                 "type": "string",
+                "attribute": "invalid-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSelectProps[\"message\"]",
+                    "original": "DBSelectProps[\"invalidMessage\"]",
                     "resolved": "string",
                     "references": {
                         "DBSelectProps": {
@@ -216,15 +228,15 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "message",
                 "reflect": false
             },
-            "showMessage": {
-                "type": "boolean",
+            "message": {
+                "type": "string",
+                "attribute": "message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSelectProps[\"showMessage\"]",
-                    "resolved": "boolean",
+                    "original": "DBSelectProps[\"message\"]",
+                    "resolved": "string",
                     "references": {
                         "DBSelectProps": {
                             "location": "import",
@@ -241,15 +253,15 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-message",
                 "reflect": false
             },
-            "value": {
+            "showMessage": {
                 "type": "any",
+                "attribute": "show-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSelectProps[\"value\"]",
-                    "resolved": "any",
+                    "original": "DBSelectProps[\"showMessage\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBSelectProps": {
                             "location": "import",
@@ -266,61 +278,15 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
-            "input": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBSelectProps[\"input\"]",
-                    "resolved": "(event: Event) => void",
-                    "references": {
-                        "DBSelectProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/select/model.ts::DBSelectProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "change": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBSelectProps[\"change\"]",
-                    "resolved": "(event: Event) => void",
-                    "references": {
-                        "DBSelectProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/select/model.ts::DBSelectProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "validation": {
-                "type": "string",
+            "value": {
+                "type": "any",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSelectProps[\"validation\"]",
-                    "resolved": "\"invalid\" | \"no-validation\" | \"valid\"",
+                    "original": "DBSelectProps[\"value\"]",
+                    "resolved": "any",
                     "references": {
                         "DBSelectProps": {
                             "location": "import",
@@ -337,14 +303,14 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation",
                 "reflect": false
             },
-            "invalidMessage": {
+            "validMessage": {
                 "type": "string",
+                "attribute": "valid-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSelectProps[\"invalidMessage\"]",
+                    "original": "DBSelectProps[\"validMessage\"]",
                     "resolved": "string",
                     "references": {
                         "DBSelectProps": {
@@ -362,15 +328,15 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid-message",
                 "reflect": false
             },
-            "required": {
-                "type": "boolean",
+            "validation": {
+                "type": "string",
+                "attribute": "validation",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSelectProps[\"required\"]",
-                    "resolved": "boolean",
+                    "original": "DBSelectProps[\"validation\"]",
+                    "resolved": "\"invalid\" | \"no-validation\" | \"valid\"",
                     "references": {
                         "DBSelectProps": {
                             "location": "import",
@@ -387,15 +353,15 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false
             },
-            "validMessage": {
-                "type": "string",
+            "required": {
+                "type": "any",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBSelectProps[\"validMessage\"]",
-                    "resolved": "string",
+                    "original": "DBSelectProps[\"required\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBSelectProps": {
                             "location": "import",
@@ -412,57 +378,11 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "valid-message",
                 "reflect": false
             },
-            "blur": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBSelectProps[\"blur\"]",
-                    "resolved": "(event: FocusEvent) => void",
-                    "references": {
-                        "DBSelectProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/select/model.ts::DBSelectProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "focus": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBSelectProps[\"focus\"]",
-                    "resolved": "(event: FocusEvent) => void",
-                    "references": {
-                        "DBSelectProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/select/model.ts::DBSelectProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"className\"]",
@@ -483,11 +403,11 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"variant\"]",
@@ -508,15 +428,15 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false
             },
             "showLabel": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-label",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"showLabel\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBSelectProps": {
                             "location": "import",
@@ -533,11 +453,11 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-label",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"icon\"]",
@@ -558,15 +478,15 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "showIcon": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"showIcon\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBSelectProps": {
                             "location": "import",
@@ -583,11 +503,11 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-icon",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"label\"]",
@@ -608,15 +528,15 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "disabled": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"disabled\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBSelectProps": {
                             "location": "import",
@@ -633,11 +553,11 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"name\"]",
@@ -658,11 +578,11 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "size": {
                 "type": "number",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"size\"]",
@@ -683,11 +603,11 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false
             },
             "autocomplete": {
                 "type": "string",
+                "attribute": "autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"autocomplete\"]",
@@ -708,11 +628,11 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autocomplete",
                 "reflect": false
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"multiple\"]",
@@ -733,11 +653,11 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false
             },
             "options": {
                 "type": "unknown",
+                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"options\"]",
@@ -761,6 +681,7 @@ export class DBSelect {
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"placeholder\"]",
@@ -781,11 +702,11 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "messageIcon": {
                 "type": "string",
+                "attribute": "message-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBSelectProps[\"messageIcon\"]",
@@ -806,7 +727,6 @@ export class DBSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "message-icon",
                 "reflect": false
             }
         };
@@ -817,6 +737,7 @@ export class DBSelect {
             "_messageId": {},
             "_validMessageId": {},
             "_invalidMessageId": {},
+            "_invalidMessage": {},
             "_placeholderId": {},
             "_descByIds": {},
             "_value": {},
@@ -826,8 +747,8 @@ export class DBSelect {
     }
     static get events() {
         return [{
-                "method": "onClick",
-                "name": "onClick",
+                "method": "click",
+                "name": "click",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -841,8 +762,8 @@ export class DBSelect {
                     "references": {}
                 }
             }, {
-                "method": "onInput",
-                "name": "onInput",
+                "method": "input",
+                "name": "input",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -856,8 +777,8 @@ export class DBSelect {
                     "references": {}
                 }
             }, {
-                "method": "onChange",
-                "name": "onChange",
+                "method": "change",
+                "name": "change",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -871,8 +792,8 @@ export class DBSelect {
                     "references": {}
                 }
             }, {
-                "method": "onBlur",
-                "name": "onBlur",
+                "method": "blur",
+                "name": "blur",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -886,8 +807,8 @@ export class DBSelect {
                     "references": {}
                 }
             }, {
-                "method": "onFocus",
-                "name": "onFocus",
+                "method": "focus",
+                "name": "focus",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -904,14 +825,20 @@ export class DBSelect {
     }
     static get watchers() {
         return [{
-                "propName": "_id",
+                "propName": "_ref",
                 "methodName": "watch0"
             }, {
-                "propName": "initialized",
+                "propName": "invalidMessage",
                 "methodName": "watch0"
             }, {
-                "propName": "value",
+                "propName": "_id",
+                "methodName": "watch1"
+            }, {
+                "propName": "initialized",
                 "methodName": "watch1"
+            }, {
+                "propName": "value",
+                "methodName": "watch2"
             }];
     }
 }