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

package/dist/collection/components/input/input.js

@@ -1,4 +1,4 @@
-import { cls, delay, getHideProp, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import { h, } from "@stencil/core";
 /**
@@ -11,42 +11,36 @@ export class DBInput {
         this._messageId = undefined;
         this._validMessageId = undefined;
         this._invalidMessageId = undefined;
+        this._invalidMessage = undefined;
         this._dataListId = undefined;
         this._descByIds = "";
         this._value = "";
         this._voiceOverFallback = "";
     }
-    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 input */
         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 || this.minLength || this.maxLength || this.pattern))) {
+        else if (this.hasValidState() &&
+            ((_c = this._ref) === null || _c === void 0 ? void 0 : _c.validity.valid) &&
+            (this.required || this.minLength || this.maxLength || this.pattern)) {
             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);
             }
         }
@@ -57,25 +51,32 @@ export class DBInput {
             this._descByIds = "";
         }
     }
-    handleBlur(event) {
-        if (this.onBlur) {
-            this.onBlur.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);
         }
     }
-    getDataList(_list) {
+    getDataList() {
+        const _list = this.dataList;
         return Array.from((isArrayOfStrings(_list)
-            ? _list.map((val) => ({
+            ? _list === null || _list === void 0 ? void 0 : _list.map((val) => ({
                 value: val,
                 label: undefined,
             }))
@@ -114,6 +115,16 @@ export class DBInput {
         }
     }
     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() {
         var _a;
         if (this._id) {
             const messageId = this._id + DEFAULT_MESSAGE_ID_SUFFIX;
@@ -127,14 +138,14 @@ export class DBInput {
             }
         }
     }
-    watch0() {
-        this.watch0Fn();
+    watch1() {
+        this.watch1Fn();
     }
-    watch1Fn() {
+    watch2Fn() {
         this._value = this.value;
     }
-    watch1() {
-        this.watch1Fn();
+    watch2() {
+        this.watch2Fn();
     }
     componentDidLoad() {
         var _a;
@@ -145,20 +156,24 @@ export class DBInput {
         this._validMessageId = mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX;
         this._invalidMessageId = mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX;
         this._dataListId = mId + DEFAULT_DATALIST_ID_SUFFIX;
+        this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
         this.watch0Fn();
         this.watch1Fn();
+        this.watch2Fn();
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (h("div", { key: '27ca6ca78881b0ca837b0c1c64533160ebeb28f4', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-hide-icon": getHideProp(this.showIcon), "data-icon": this.icon, "data-icon-after": this.iconAfter, "data-hide-icon-after": getHideProp(this.showIcon) }, h("label", { key: 'a315cf7bf30dc070839e9ed0d2b0acbf7c3e6664', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("input", { key: 'a31d17d54469082152be2cc72a9ae60738dbb623', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        var _a, _b, _c, _d, _e;
+        return (h("div", { key: 'c3ed7a1df5324e27517ab8db7e1be6b7696d94b5', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-hide-icon": getHideProp(this.showIcon), "data-icon": this.icon, "data-icon-after": this.iconAfter, "data-hide-icon-after": getHideProp(this.showIcon) }, h("label", { key: 'd75719ce987720f268235b431d46cd1af85696b7', htmlFor: this._id }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL), h("input", { key: '87676239598629d7aadda7689bc0717a1ad772bb', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, type: this.type || "text", placeholder: (_b = this.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: this.disabled, required: this.required, step: this.step, value: (_c = this.value) !== null && _c !== void 0 ? _c : this._value, maxLength: this.maxLength, minLength: this.minLength, max: this.max, min: this.min, readOnly: this.readOnly, form: this.form, pattern: this.pattern, size: this.size, autoComplete: this.autocomplete, autoFocus: this.autofocus, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), list: this.dataList && this._dataListId, "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds }), this.dataList ? (h("datalist", { id: this._dataListId }, (_e = this.getDataList(this.dataList)) === null || _e === void 0 ? void 0 : _e.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: '13cb6a1a9bd85beb16952f9cc7d74656bb7f836a' }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, h("db-infotext", { key: '8cac2689efbb19ae72ef25316b3309a8eb95dff7', size: "small", semantic: "successful", id: this._validMessageId }, (_f = this.validMessage) !== null && _f !== void 0 ? _f : DEFAULT_VALID_MESSAGE), h("db-infotext", { key: '8bed69ac448eb47e57e9e379b69f782f0b700d2f', size: "small", semantic: "critical", id: this._invalidMessageId }, (_g = this.invalidMessage) !== null && _g !== void 0 ? _g : (((_h = this._ref) === null || _h === void 0 ? void 0 : _h.validationMessage) || DEFAULT_INVALID_MESSAGE)), h("span", { key: '0bc8771f4d6121930df983cbc039b8b4234c4f74', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, id: this._id, name: this.name, type: this.type || "text", placeholder: (_b = this.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), step: getNumber(this.step), value: (_c = this.value) !== null && _c !== void 0 ? _c : this._value, maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), max: getNumber(this.max), min: getNumber(this.min), readOnly: getBoolean(this.readOnly, "readOnly") ||
+                getBoolean(this.readonly, "readonly"), form: this.form, pattern: this.pattern, size: this.size, autoComplete: this.autocomplete, autoFocus: getBoolean(this.autofocus, "autofocus"), onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), list: this.dataList && this._dataListId, "aria-describedby": (_d = this.ariaDescribedBy) !== null && _d !== void 0 ? _d : this._descByIds }), this.dataList ? (h("datalist", { id: this._dataListId }, (_e = this.getDataList()) === null || _e === void 0 ? void 0 : _e.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: '2f81f48b7a436bc94fd58b7a4bcbce67f8e5d48b' }), 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: 'dcea4b32d5bf57686f12c57bb2e0bef01cf65582', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'e649a79cb1eee7df9e29d9596453f3fc534fb9fc', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-input"; }
     static get properties() {
         return {
             "id": {
                 "type": "string",
+                "attribute": "id",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"id\"]",
@@ -179,14 +194,14 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false
             },
-            "dataListId": {
+            "invalidMessage": {
                 "type": "string",
+                "attribute": "invalid-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"dataListId\"]",
+                    "original": "DBInputProps[\"invalidMessage\"]",
                     "resolved": "string",
                     "references": {
                         "DBInputProps": {
@@ -204,14 +219,14 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "data-list-id",
                 "reflect": false
             },
-            "message": {
+            "dataListId": {
                 "type": "string",
+                "attribute": "data-list-id",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"message\"]",
+                    "original": "DBInputProps[\"dataListId\"]",
                     "resolved": "string",
                     "references": {
                         "DBInputProps": {
@@ -229,15 +244,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "message",
                 "reflect": false
             },
-            "showMessage": {
-                "type": "boolean",
+            "message": {
+                "type": "string",
+                "attribute": "message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"showMessage\"]",
-                    "resolved": "boolean",
+                    "original": "DBInputProps[\"message\"]",
+                    "resolved": "string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -254,15 +269,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-message",
                 "reflect": false
             },
-            "value": {
+            "showMessage": {
                 "type": "any",
+                "attribute": "show-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"value\"]",
-                    "resolved": "any",
+                    "original": "DBInputProps[\"showMessage\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -279,38 +294,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
-            "input": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBInputProps[\"input\"]",
-                    "resolved": "(event: Event) => void",
-                    "references": {
-                        "DBInputProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/input/model.ts::DBInputProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "change": {
-                "type": "unknown",
+            "value": {
+                "type": "any",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"change\"]",
-                    "resolved": "(event: Event) => void",
+                    "original": "DBInputProps[\"value\"]",
+                    "resolved": "any",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -326,14 +318,16 @@ export class DBInput {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false
             },
-            "validation": {
+            "validMessage": {
                 "type": "string",
+                "attribute": "valid-message",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"validation\"]",
-                    "resolved": "\"invalid\" | \"no-validation\" | \"valid\"",
+                    "original": "DBInputProps[\"validMessage\"]",
+                    "resolved": "string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -350,15 +344,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validation",
                 "reflect": false
             },
-            "invalidMessage": {
+            "validation": {
                 "type": "string",
+                "attribute": "validation",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"invalidMessage\"]",
-                    "resolved": "string",
+                    "original": "DBInputProps[\"validation\"]",
+                    "resolved": "\"invalid\" | \"no-validation\" | \"valid\"",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -375,15 +369,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid-message",
                 "reflect": false
             },
             "required": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"required\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -400,15 +394,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false
             },
             "minLength": {
-                "type": "number",
+                "type": "any",
+                "attribute": "min-length",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"minLength\"]",
-                    "resolved": "number",
+                    "resolved": "number | string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -425,15 +419,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min-length",
                 "reflect": false
             },
             "maxLength": {
-                "type": "number",
+                "type": "any",
+                "attribute": "max-length",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"maxLength\"]",
-                    "resolved": "number",
+                    "resolved": "number | string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -450,39 +444,14 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-length",
                 "reflect": false
             },
             "pattern": {
                 "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBInputProps[\"pattern\"]",
-                    "resolved": "string",
-                    "references": {
-                        "DBInputProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/input/model.ts::DBInputProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
                 "attribute": "pattern",
-                "reflect": false
-            },
-            "validMessage": {
-                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"validMessage\"]",
+                    "original": "DBInputProps[\"pattern\"]",
                     "resolved": "string",
                     "references": {
                         "DBInputProps": {
@@ -500,38 +469,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "valid-message",
                 "reflect": false
             },
-            "blur": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBInputProps[\"blur\"]",
-                    "resolved": "(event: FocusEvent) => void",
-                    "references": {
-                        "DBInputProps": {
-                            "location": "import",
-                            "path": "./model",
-                            "id": "src/components/input/model.ts::DBInputProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
-            },
-            "focus": {
+            "dataList": {
                 "type": "unknown",
+                "attribute": "data-list",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"focus\"]",
-                    "resolved": "(event: FocusEvent) => void",
+                    "original": "DBInputProps[\"dataList\"]",
+                    "resolved": "ValueLabelType[] | string[]",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -551,6 +497,7 @@ export class DBInput {
             },
             "className": {
                 "type": "string",
+                "attribute": "classname",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"className\"]",
@@ -571,11 +518,11 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "classname",
                 "reflect": false
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"variant\"]",
@@ -596,15 +543,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false
             },
             "showLabel": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-label",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"showLabel\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -621,15 +568,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-label",
                 "reflect": false
             },
             "showIcon": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "show-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"showIcon\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -646,11 +593,11 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-icon",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"icon\"]",
@@ -671,11 +618,11 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "iconAfter": {
                 "type": "string",
+                "attribute": "icon-after",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"iconAfter\"]",
@@ -696,11 +643,11 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-after",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"label\"]",
@@ -721,11 +668,11 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"name\"]",
@@ -746,11 +693,11 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"type\"]",
@@ -771,11 +718,11 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"placeholder\"]",
@@ -796,15 +743,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "disabled": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"disabled\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -821,11 +768,11 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "step": {
                 "type": "any",
+                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"step\"]",
@@ -846,11 +793,61 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "step",
+                "reflect": false
+            },
+            "maxlength": {
+                "type": "any",
+                "attribute": "maxlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBInputProps[\"maxlength\"]",
+                    "resolved": "number | string",
+                    "references": {
+                        "DBInputProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/input/model.ts::DBInputProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "minlength": {
+                "type": "any",
+                "attribute": "minlength",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBInputProps[\"minlength\"]",
+                    "resolved": "number | string",
+                    "references": {
+                        "DBInputProps": {
+                            "location": "import",
+                            "path": "./model",
+                            "id": "src/components/input/model.ts::DBInputProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "max": {
                 "type": "any",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"max\"]",
@@ -871,11 +868,11 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false
             },
             "min": {
                 "type": "any",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"min\"]",
@@ -896,15 +893,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false
             },
             "readOnly": {
-                "type": "boolean",
+                "type": "any",
+                "attribute": "read-only",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"readOnly\"]",
-                    "resolved": "boolean",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -921,15 +918,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "read-only",
                 "reflect": false
             },
-            "form": {
-                "type": "string",
+            "readonly": {
+                "type": "any",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"form\"]",
-                    "resolved": "string",
+                    "original": "DBInputProps[\"readonly\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -946,15 +943,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form",
                 "reflect": false
             },
-            "size": {
-                "type": "number",
+            "form": {
+                "type": "string",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"size\"]",
-                    "resolved": "number",
+                    "original": "DBInputProps[\"form\"]",
+                    "resolved": "string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -971,15 +968,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false
             },
-            "autocomplete": {
-                "type": "string",
+            "size": {
+                "type": "number",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"autocomplete\"]",
-                    "resolved": "string",
+                    "original": "DBInputProps[\"size\"]",
+                    "resolved": "number",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -996,15 +993,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autocomplete",
                 "reflect": false
             },
-            "autofocus": {
-                "type": "boolean",
+            "autocomplete": {
+                "type": "string",
+                "attribute": "autocomplete",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"autofocus\"]",
-                    "resolved": "boolean",
+                    "original": "DBInputProps[\"autocomplete\"]",
+                    "resolved": "string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -1021,15 +1018,15 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autofocus",
                 "reflect": false
             },
-            "dataList": {
-                "type": "unknown",
+            "autofocus": {
+                "type": "any",
+                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBInputProps[\"dataList\"]",
-                    "resolved": "ValueLabelType[] | string[]",
+                    "original": "DBInputProps[\"autofocus\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBInputProps": {
                             "location": "import",
@@ -1045,10 +1042,12 @@ export class DBInput {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false
             },
             "ariaDescribedBy": {
                 "type": "string",
+                "attribute": "aria-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"ariaDescribedBy\"]",
@@ -1069,11 +1068,11 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-described-by",
                 "reflect": false
             },
             "messageIcon": {
                 "type": "string",
+                "attribute": "message-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DBInputProps[\"messageIcon\"]",
@@ -1094,7 +1093,6 @@ export class DBInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "message-icon",
                 "reflect": false
             }
         };
@@ -1105,6 +1103,7 @@ export class DBInput {
             "_messageId": {},
             "_validMessageId": {},
             "_invalidMessageId": {},
+            "_invalidMessage": {},
             "_dataListId": {},
             "_descByIds": {},
             "_value": {},
@@ -1113,8 +1112,8 @@ export class DBInput {
     }
     static get events() {
         return [{
-                "method": "onInput",
-                "name": "onInput",
+                "method": "input",
+                "name": "input",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1128,8 +1127,8 @@ export class DBInput {
                     "references": {}
                 }
             }, {
-                "method": "onChange",
-                "name": "onChange",
+                "method": "change",
+                "name": "change",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1143,8 +1142,8 @@ export class DBInput {
                     "references": {}
                 }
             }, {
-                "method": "onBlur",
-                "name": "onBlur",
+                "method": "blur",
+                "name": "blur",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1158,8 +1157,8 @@ export class DBInput {
                     "references": {}
                 }
             }, {
-                "method": "onFocus",
-                "name": "onFocus",
+                "method": "focus",
+                "name": "focus",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1176,11 +1175,17 @@ export class DBInput {
     }
     static get watchers() {
         return [{
-                "propName": "_id",
+                "propName": "_ref",
                 "methodName": "watch0"
             }, {
-                "propName": "value",
+                "propName": "invalidMessage",
+                "methodName": "watch0"
+            }, {
+                "propName": "_id",
                 "methodName": "watch1"
+            }, {
+                "propName": "value",
+                "methodName": "watch2"
             }];
     }
 }